/* ===== Shell, nav rail, account card, home: ported from design-pack/prototype (tokens live in tokens.css) ===== */
  body { margin: 0; padding: 20px; background: var(--surface-100); font-family: var(--font-sans); color: var(--ink); }
  .seg { display: inline-flex; padding: 3px; border-radius: 10px; background: #dcdce1; }
  .seg button { font: 500 13px/16px var(--font-sans); color: var(--ink-muted); background: none; border: 0; padding: 6px 12px; border-radius: 8px; cursor: pointer; }
  .seg button[aria-pressed="true"] { background: var(--surface-000); color: var(--ink); box-shadow: var(--shadow-chip); }
  .seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

  /* App window (the outer box in the sketch) */
  .window { position: relative; width: 1040px; height: 560px; border-radius: var(--radius-xl); border: 1px solid var(--line);
            background: var(--surface-100); overflow: hidden; }

  /* Account: round profile picture in the top-right corner */
  .acct { position: absolute; right: var(--space-3); top: var(--space-3); z-index: 5; }
  .account { position: relative; display: block; width: 44px; height: 44px; padding: 0; border: 0;
             border-radius: 50%; overflow: visible; cursor: pointer; background: var(--surface-000);
             box-shadow: 0 0 0 2px var(--surface-000), 0 2px 8px rgba(28, 26, 34, 0.12); transition: transform .15s ease, box-shadow .15s ease; }
  .account svg { display: block; width: 100%; height: 100%; border-radius: 50%; }
  .account:hover { transform: scale(1.05); box-shadow: 0 0 0 2px var(--surface-000), 0 4px 14px rgba(28, 26, 34, 0.16); }
  .account:active { transform: scale(.96); }
  .account:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .account .tip { left: auto; right: 0; top: calc(100% + 10px); transform: translateY(-4px); }
  .account:hover .tip, .account:focus-visible .tip { opacity: 1; transform: none; }
  .acct.is-open .account .tip { opacity: 0 !important; }

  /* Profile card: grows out of the profile picture itself. The card is revealed as a circle that starts exactly
     on the avatar and widens to the full card, while the avatar glides into its spot on the cover.
     Radii nest: card 22px, 8px padding, so inner pieces use 14px. */
  .account { z-index: 1; transition: transform .15s ease, box-shadow .15s ease, opacity 0s linear .4s; }
  .acct.is-open .account { opacity: 0; transition: opacity 0s linear 0s; }
  .menu { position: absolute; right: -8px; top: -8px; z-index: 2; width: 288px; box-sizing: border-box; padding: 8px;
          border-radius: var(--radius-lg); background: var(--glass-fill);
          -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(170%); backdrop-filter: blur(var(--blur-glass)) saturate(170%);
          border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass);
          clip-path: circle(22px at calc(100% - 30px) 30px); visibility: hidden; pointer-events: none; will-change: clip-path;
          transition: clip-path .4s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .4s; }
  /* --r is set by script to the exact distance to the card's farthest corner, so the circle moves the whole time */
  .acct.is-open .menu { clip-path: circle(var(--r, 150%) at calc(100% - 30px) 30px); visibility: visible; pointer-events: auto;
          transition: clip-path .56s cubic-bezier(.32, .72, 0, 1), visibility 0s linear 0s; }
  .menu .who, .menu .more, .menu .options, .menu .cover-hint { opacity: 0; transition: opacity .12s ease; }
  .acct.is-open .menu .who, .acct.is-open .menu .more, .acct.is-open .menu .options, .acct.is-open .menu .cover-hint { opacity: 1; transition: opacity .3s ease .16s; }

  /* Cover picture people can add (placeholder for now) */
  .cover { position: relative; height: 96px; border-radius: 14px; background: var(--cover-placeholder);
           box-shadow: inset 0 0 0 1px var(--tile-edge); overflow: hidden; }
  .cover-hint { position: absolute; left: 12px; bottom: 10px; display: flex; align-items: center; gap: 6px;
                font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
  .cover-hint svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  /* Sits top-right on the cover. Closed, it is moved and scaled to cover the 44px avatar exactly (19px offset, 44/56). */
  .card-pfp { position: absolute; right: 12px; top: 12px; width: 56px; height: 56px; border-radius: 50%;
              box-shadow: 0 0 0 3px var(--surface-000), 0 2px 8px rgba(28, 26, 34, 0.12);
              transform: translate(19px, -19px) scale(.7857); transition: transform .4s cubic-bezier(.4, 0, .2, 1); will-change: transform; }
  .acct.is-open .card-pfp { transform: none; transition: transform .56s cubic-bezier(.32, .72, 0, 1); }
  .card-pfp svg { display: block; width: 100%; height: 100%; border-radius: 50%; }

  .who { padding: 14px 8px 12px; }
  .who-name { margin: 0; font: 600 17px/22px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
  .who-user { margin: 2px 0 0; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); }
  .rank { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 4px 10px 4px 8px; border-radius: 999px;
          background: var(--rank-bg); color: var(--accent); font: 600 12px/16px var(--font-sans); }
  .rank svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

  /* "More" arrow: reveals the account options below */
  .more { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 34px; border: 0; border-radius: 12px;
          background: transparent; cursor: pointer; color: var(--ink-muted); font: 500 12px/16px var(--font-sans); border-top: 1px solid var(--line);
          border-top-left-radius: 0; border-top-right-radius: 0; transition: color .15s ease, background .15s ease; }
  .more:hover { color: var(--ink); background: var(--glass-chip); border-top-color: transparent; border-radius: 12px; }
  .more:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .more svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
              transition: transform .3s cubic-bezier(.32, .72, 0, 1); }
  .acct.is-more .more svg { transform: rotate(180deg); }
  .options { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .36s cubic-bezier(.32, .72, 0, 1); }
  .acct.is-more .options { grid-template-rows: 1fr; }
  .options-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
  .options-in::before { content: ""; height: 4px; flex: none; }
  .options .menu-item { opacity: 0; transform: translateY(-4px); transition: opacity .2s ease, transform .25s ease, background .15s ease; }
  .acct.is-more .options .menu-item { opacity: 1; transform: none; transition: opacity .25s ease .08s, transform .3s cubic-bezier(.32, .72, 0, 1) .08s, background .15s ease; }

  .menu-item { display: flex; align-items: center; gap: 12px; width: 100%; height: 40px; padding: 0 12px; box-sizing: border-box; flex: none;
               border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-align: left;
               font: 500 14px/20px var(--font-sans); color: var(--ink); }
  .menu-item svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--ink-muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  .menu-item:hover { background: var(--glass-chip); }
  .menu-item:hover svg { stroke: var(--ink); }
  .menu-item:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
  .menu-sep { height: 1px; margin: 4px 4px; background: var(--line); flex: none; }
  .menu-item.danger { color: var(--close-red); }
  .menu-item.danger svg { stroke: var(--close-red); }

  /* ---------- The nav rail ---------- */
  /* iOS-style curves: a quick settle to collapse, a soft spring with a hint of overshoot to flow back down */
  .rail { position: absolute; left: var(--space-3); top: var(--space-3); height: calc(100% - 2 * var(--space-3)); width: 68px;
          display: flex; flex-direction: column; align-items: center; padding: 13px 0; box-sizing: border-box;
          border-radius: var(--radius-lg); background: var(--glass-fill);
          -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(170%); backdrop-filter: blur(var(--blur-glass)) saturate(170%);
          border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass);
          transition: left .26s cubic-bezier(.32, .72, 0, 1), top .26s cubic-bezier(.32, .72, 0, 1), width .26s cubic-bezier(.32, .72, 0, 1),
                      padding .26s cubic-bezier(.32, .72, 0, 1), border-radius .26s cubic-bezier(.32, .72, 0, 1),
                      background .22s ease, border-color .22s ease, box-shadow .3s ease,
                      height .62s cubic-bezier(.2, 1.12, .32, 1) .1s; }
  /* Collapsed: the holder disappears and only the toggle tile is left. The box shrinks onto the tile exactly,
     so the tile never moves; expanding grows the holder out of the tile, then flows it down. */
  .rail.is-collapsed, .rail.is-collapsed:hover, .rail.is-collapsed:focus-within {
          left: calc(var(--space-3) + 13px); top: calc(var(--space-3) + 13px); width: 42px; height: 42px; padding: 0;
          border-radius: var(--radius-md); background: transparent; border-color: transparent; box-shadow: none;
          -webkit-backdrop-filter: none; backdrop-filter: none;
          transition: height .4s cubic-bezier(.32, .72, 0, 1),
                      left .24s cubic-bezier(.32, .72, 0, 1) .3s, top .24s cubic-bezier(.32, .72, 0, 1) .3s, width .24s cubic-bezier(.32, .72, 0, 1) .3s,
                      padding .24s cubic-bezier(.32, .72, 0, 1) .3s, border-radius .24s cubic-bezier(.32, .72, 0, 1) .3s,
                      background .18s ease .34s, border-color .18s ease .34s, box-shadow .18s ease .34s; }
  /* Minimized: while you work in the app, the rail slips to the window edge as a thin strip with a right arrow */
  .rail.is-mini { left: 4px; width: 16px; padding: 0; border-radius: 8px; cursor: pointer;
          transition: left .42s cubic-bezier(.32, .72, 0, 1), width .42s cubic-bezier(.32, .72, 0, 1),
                      padding .42s cubic-bezier(.32, .72, 0, 1), border-radius .42s cubic-bezier(.32, .72, 0, 1), background .2s ease; }
  .rail.is-mini:hover { width: 22px; }
  .rail .group { transition: opacity .28s ease .3s, visibility 0s linear 0s; }
  .rail .logo { transition: transform .18s ease, background .2s ease, opacity .22s ease .2s, visibility 0s linear 0s; }
  .rail.is-mini .group, .rail.is-mini .logo { opacity: 0 !important; visibility: hidden; pointer-events: none;
          transition: opacity .1s ease, visibility 0s linear .1s; }
  .peek { position: absolute; inset: 0; border: 0; padding: 0; background: transparent; border-radius: inherit; color: var(--ink-muted);
          display: grid; place-items: center; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity .1s ease, visibility 0s linear .1s, color .15s ease; }
  .rail.is-mini .peek { opacity: 1; visibility: visible; transition: opacity .22s ease .22s, visibility 0s linear 0s, color .15s ease; }
  .rail.is-mini:hover .peek { color: var(--ink); }
  .peek:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .peek svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .rail.is-collapsed .group { opacity: 0 !important; visibility: hidden; transition: opacity .12s ease, visibility 0s linear .12s; }
  .rail:hover, .rail:focus-within { background: var(--glass-fill-hover); }

  /* Toggle tile: red X when open, three light bars when collapsed */
  .logo { position: relative; width: 40px; height: 40px; border-radius: var(--radius-md); background: var(--tile); border: 0; padding: 0;
          box-shadow: inset 0 0 0 1px var(--tile-edge), 0 1px 2px rgba(28, 26, 34, 0.06);
          flex: none; cursor: pointer; }
  .logo:hover { background: var(--tile-hover); }
  .logo:active { transform: scale(.92); }
  .logo:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .logo span { position: absolute; left: 50%; top: 50%; width: 18px; height: 2px; margin: -1px 0 0 -9px; border-radius: 2px;
               background: var(--close-red); transition: transform .5s cubic-bezier(.32, .72, 0, 1), opacity .25s ease, background .3s ease; }
  .logo span:nth-child(1) { transform: rotate(45deg); }
  .logo span:nth-child(2) { opacity: 0; transform: scaleX(.2); }
  .logo span:nth-child(3) { transform: rotate(-45deg); }
  .rail.is-collapsed .logo span { background: var(--tile-ink); }
  .rail.is-collapsed .logo span:nth-child(1) { transform: translateY(-6px); }
  .rail.is-collapsed .logo span:nth-child(2) { opacity: 1; transform: none; }
  .rail.is-collapsed .logo span:nth-child(3) { transform: translateY(6px); }

  .group { display: flex; flex-direction: column; gap: var(--space-2); margin-top: 28px; }
  .group.bottom { margin-top: auto; }

  /* Buttons: always shown while the rail is open */
  .nav { position: relative; width: 44px; height: 44px; border-radius: var(--radius-md); border: 0; background: transparent;
         color: var(--ink-muted); display: grid; place-items: center; cursor: pointer;
         transition: transform .15s ease, background .15s ease, color .15s ease; }
  .nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

  .nav:hover { background: var(--glass-chip); color: var(--ink); }
  .nav:active { transform: scale(.94); }
  .nav:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav[aria-current="page"] { background: var(--glass-chip-active); color: var(--ink); box-shadow: var(--shadow-chip); }
  .nav[aria-current="page"]::before { content: ""; position: absolute; left: -10px; top: 50%; width: 5px; height: 5px; margin-top: -2.5px;
         border-radius: 50%; background: var(--accent); }

  /* Tooltip label */
  .tip { position: absolute; left: calc(100% + 14px); top: 50%; transform: translate(-4px, -50%); white-space: nowrap;
         font: 500 13px/16px var(--font-sans); color: var(--ink); padding: 7px 10px; border-radius: var(--radius-sm);
         background: rgba(255,255,255,.8); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
         border: 1px solid var(--glass-edge); box-shadow: var(--shadow-chip); opacity: 0; pointer-events: none;
         transition: opacity .15s ease, transform .15s ease; }
  .nav:hover .tip, .nav:focus-visible .tip { opacity: 1; transform: translate(0, -50%); }

  @media (prefers-reduced-motion: reduce) { .nav, .tip, .rail, .group, .logo, .logo span, .peek, .menu, .menu *, .account { transition: none !important; } }

  /* Leaves room for the nav rail on the left (12 + 68 + 24) and the avatar column on the right (16 + 44 + 16) */
  .home { position: absolute; left: 104px; right: 76px; top: var(--space-3); height: min(72%, 600px);
          /* The Add cards only need room for their icon and one line of text; Free Note takes the rest */
          display: grid; grid-template-columns: minmax(0, 1fr) clamp(240px, 24%, 300px); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 20px; }

  /* Same white glass as the nav rail and the profile card */
  .glass-card { position: relative; box-sizing: border-box; border-radius: var(--radius-lg); background: var(--glass-fill);
                -webkit-backdrop-filter: blur(var(--blur-glass)) saturate(170%); backdrop-filter: blur(var(--blur-glass)) saturate(170%);
                border: 1px solid var(--glass-edge); box-shadow: var(--shadow-glass); }

  /* Dashboard */
  .dash { grid-row: 1 / span 3; padding: 22px 24px; display: flex; flex-direction: column; min-height: 0; }
  .dash-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .dash-title { margin: 0; font: 600 20px/28px var(--font-sans); letter-spacing: -0.01em; }
  .dash-sub { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
  .dash-body { flex: 1; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center; margin-top: 12px; }

  .meter { position: relative; width: 168px; height: 168px; flex: none; }
  .meter svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
  .meter .track { fill: none; stroke: var(--tile); stroke-width: 12; }
  .meter .value { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; transition: stroke-dashoffset .9s cubic-bezier(.32, .72, 0, 1); }
  .meter-label { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
  .meter-num { font: 700 36px/40px var(--font-sans); letter-spacing: -0.02em; }
  .meter-cap { font: 500 12px/16px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }

  .week { display: flex; flex-direction: column; height: 100%; max-height: 220px; min-height: 0; }
  .week-title { font: 500 13px/16px var(--font-sans); color: var(--ink-muted); margin: 0 0 12px; }
  .bars { flex: 1; min-height: 0; display: flex; align-items: flex-end; gap: 10px; border-bottom: 1px solid var(--line); }
  .bar { position: relative; flex: 1; height: 100%; display: flex; align-items: flex-end; cursor: default; }
  .bar i { display: block; width: 100%; max-width: 28px; margin: 0 auto; border-radius: 4px 4px 0 0; background: var(--accent); opacity: .85; transition: opacity .15s ease; }
  .bar.today i { opacity: 1; }
  .bar:hover i { opacity: 1; }
  .bar .tt { position: absolute; left: 50%; bottom: calc(var(--h) + 8px); transform: translate(-50%, 4px); white-space: nowrap;
             font: 500 12px/16px var(--font-sans); color: var(--ink); padding: 5px 8px; border-radius: var(--radius-sm);
             background: var(--surface-000); box-shadow: var(--shadow-chip); opacity: 0; pointer-events: none; transition: opacity .12s ease, transform .12s ease; }
  .bar:hover .tt { opacity: 1; transform: translate(-50%, 0); }
  .days { display: flex; gap: 10px; margin-top: 8px; }
  .days span { flex: 1; text-align: center; font: 500 12px/16px var(--font-sans); color: var(--ink-muted); }
  .days span.today { color: var(--ink); }

  /* Add cards */
  .add { display: flex; align-items: center; gap: 16px; padding: 0 22px; border: 1px solid var(--glass-edge); cursor: pointer; text-align: left;
         font-family: var(--font-sans); color: var(--ink); transition: transform .18s cubic-bezier(.32, .72, 0, 1), background .18s ease; }
  .add:hover { background: var(--glass-fill-hover); transform: translateY(-2px); }
  .add:active { transform: scale(.98); }
  .add:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
  .add-icon { width: 44px; height: 44px; flex: none; border-radius: var(--radius-md); background: var(--tile); display: grid; place-items: center;
              box-shadow: inset 0 0 0 1px var(--tile-edge); transition: background .18s ease; }
  .add:hover .add-icon { background: var(--tile-hover); }
  .add-icon svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
  .add-title { display: block; font: 600 16px/22px var(--font-sans); }
  .add-sub { display: block; font: 400 13px/18px var(--font-sans); color: var(--ink-muted); margin-top: 2px; }

  @media (prefers-reduced-motion: reduce) { .add, .meter .value, .bar .tt { transition: none !important; } }

  html,body{height:100%}
  body{padding:0;min-width:900px}
  .window{width:100vw;height:100vh;border:0;border-radius:0}
  .acct{right:16px;top:16px}