/* dark, the same roles in deep water */
  

  /* legacy names still used in a few places, mapped rather than hunted down */
  :root, 

  *{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; }
  html,body{ height:100%; }
  body{
    font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,system-ui,sans-serif;
    background:var(--ground);
    background-attachment:fixed;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow:hidden;
    height:100dvh;
    user-select:none;
  }
  button{ font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
  a{ color:inherit; text-decoration:none; }
  input,select{ font-family:inherit; font-size:var(--fs-4); color:var(--ink); }

  :root{ --nav-h: 58px; }
  #app{ height:100dvh; display:flex; flex-direction:column; max-width:520px; margin:0 auto; position:relative; }

  /* ---------- Header ---------- */
  #app header{
    padding:calc(var(--safe-top) + var(--space-5)) var(--space-5) var(--space-3);
    display:flex; align-items:center; justify-content:space-between;
    flex-shrink:0;
  }
  .brand{ display:flex; align-items:center; gap:var(--space-2); }
  .brand svg{ width:22px; height:22px; display:block; }
  /* One of exactly two places the display serif appears. The other is the
     screen title. Weight 500, because the serif carries the distinction and
     600 in a serif at this size reads as heavy rather than confident. */
  .brand span{
    font-family:var(--display);
    font-size:var(--fs-4); font-weight:var(--fw-med);
    letter-spacing:-0.01em; color:var(--ink);
  }
  .coins{
    display:flex; align-items:center; gap:var(--space-2);
    background:var(--surface); border:1px solid var(--line);
    padding:var(--space-2) var(--space-3) var(--space-2) var(--space-3); border-radius:var(--r-pill);
    font-variant-numeric:tabular-nums; font-weight:var(--fw-hi); font-size:var(--fs-3);
    transition:transform var(--dur-base) var(--ease), border-color .4s ease;
  }
  .coins.bump{ transform:scale(1.14); border-color:var(--line); }
  .coin-dot{ width:15px; height:15px; border-radius:50%; background:var(--surface-2); }

  /* ---------- Main scroll area ---------- */
  /* The last card on every screen was running under the tab bar and could not
     be scrolled clear of it. Bottom padding is the bar height plus its safe-area
     inset plus one step, so the final element always clears.
     --nav-h is declared here rather than in tokens.css because it is a measured
     consequence of the nav rule below, not a design decision anyone makes. */
  #app main{
    flex:1; overflow-y:auto; overflow-x:hidden; -webkit-overflow-scrolling:touch;
    padding:var(--space-1) var(--space-5)
            calc(var(--nav-h) + max(var(--space-2), var(--safe-bottom)) + var(--space-4));
    overscroll-behavior-y:contain;
  }
  main::-webkit-scrollbar{ display:none; }

  .daystamp{ font-size:var(--fs-3); color:var(--ink-mute); font-weight:var(--fw-med); margin:var(--space-1) 0 var(--space-1); }

  /* ---------- Now: the single next action ---------- */
  .nextlabel{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-mute); margin-bottom:var(--space-3); display:flex; align-items:center; gap:var(--space-2); }
  .nextlabel .why{ color:var(--ink-soft); }

  .nowcard{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-card);
    padding:var(--space-5) var(--space-5) var(--space-5);
    position:relative; overflow:hidden;
    animation:rise var(--dur-base) var(--ease) both;
  }
  .nowcard::before{
    content:""; position:absolute; inset:0 0 auto 0; height:2px;
    background:var(--surface-2);
    opacity:.45;
  }
  .task-cat{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--tide); margin-bottom:var(--space-2); letter-spacing:.01em; }
  .task-name{ font-size:var(--fs-6); font-weight:var(--fw-hi); line-height:1.14; letter-spacing:-0.03em; text-wrap:balance; margin-bottom:var(--space-4); }
  .task-meta{ display:flex; gap:var(--space-4); flex-wrap:wrap; color:var(--ink-soft); font-size:var(--fs-3); font-weight:var(--fw-med); margin-bottom:var(--space-5); }
  .task-meta b{ color:var(--ink); font-weight:var(--fw-hi); font-variant-numeric:tabular-nums; }
  .forward{
    font-size:var(--fs-2); color:var(--ink-soft); line-height:1.45;
    background:color-mix(in oklab, var(--tide) 20%, transparent); border-radius:var(--r-control);
    padding:var(--space-3) var(--space-3); margin-bottom:var(--space-5); font-weight:var(--fw-med);
  }
  .forward b{ color:var(--tide); font-weight:var(--fw-hi); }

  /* session-length quick pick */
  .lenpick{ display:flex; gap:var(--space-2); margin-top:var(--space-4); justify-content:center; }
  .lenpick button{
    flex:1; padding:var(--space-2); border-radius:var(--r-control); background:var(--surface); border:1px solid var(--line);
    color:var(--ink-soft); font-size:var(--fs-3); font-weight:var(--fw-hi); transition:all var(--dur-base) var(--ease);
  }
  .lenpick button.on{ background:var(--surface-2); border-color:var(--line); color:var(--ink-soft); }

  /* ---------- Empty state (onboarding) ---------- */
  .empty{ text-align:center; padding:var(--space-6) var(--space-2); animation:rise var(--dur-base) var(--ease) both; }
  .empty .mark{ width:64px; height:64px; margin:0 auto var(--space-5); opacity:.9; }
  .empty h2{ font-size:var(--fs-5); font-weight:var(--fw-med); letter-spacing:-0.015em; margin-bottom:var(--space-2); }
  .empty p{ color:var(--ink-soft); font-size:var(--fs-3); line-height:1.5; max-width:34ch; margin:0 auto var(--space-5); }

  /* ---------- Tasks view ---------- */
  /* A heading has to outrank the thing it introduces. This was --fs-3 at
     --ink-mute, which is the same size as body copy and greyer than it, so
     every section read as a caption and the page read as fragments. */
  .section-h{
    font-size:var(--fs-4); font-weight:var(--fw-med); color:var(--ink);
    letter-spacing:-0.01em;
    margin:var(--space-6) var(--space-1) var(--space-3);
  }
  .section-h:first-child{ margin-top:var(--space-1); }
  .tasklist{ display:flex; flex-direction:column; gap:var(--space-2); }
  .taskrow{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
    padding:var(--space-4) var(--space-4); display:flex; align-items:center; gap:var(--space-3);
    animation:rise var(--dur-base) var(--ease) both;
  }
  .prio{ display:flex; flex-direction:column; gap:var(--space-1); flex-shrink:0; }
  .prio i{ width:6px; height:6px; border-radius:50%; background:var(--line); }
  .prio.p1 i:nth-child(1),.prio.p2 i:nth-child(-n+2),.prio.p3 i{ background:var(--ink-soft); }
  .taskrow .body{ flex:1; min-width:0; }
  .taskrow .nm{ font-size:var(--fs-4); font-weight:var(--fw-hi); letter-spacing:-0.01em; margin-bottom:var(--space-1); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .taskrow .sub{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); }
  .taskrow .sub .due{ color:var(--tide); }
  .win-urgent{ color:var(--ink-soft); font-weight:var(--fw-hi); }
  .taskrow .del{ flex-shrink:0; width:30px; height:30px; border-radius:var(--r-control); color:var(--ink-mute); display:grid; place-items:center; transition:all .18s ease; }
  .taskrow .del:active{ background:var(--surface); color:var(--ink-soft); }
  .taskrow.done{ opacity:.5; }
  .taskrow.done .nm{ text-decoration:line-through; text-decoration-color:var(--ink-mute); }

  /* ---------- Story / life memory ---------- */
  .story-intro{ font-size:var(--fs-3); color:var(--ink-soft); font-weight:var(--fw-med); margin:var(--space-1) 0 var(--space-4); line-height:1.5; }

  /* focus room (evolving avatar) */
  .room{
    margin:var(--space-2) 0 var(--space-1); border-radius:var(--r-card); overflow:hidden;
    background:var(--ink);
    border:1px solid var(--line);
    animation:rise var(--dur-base) var(--ease) both;
  }
  .room svg{ display:block; }
  .room-cap{ padding:var(--space-3) var(--space-4) var(--space-4); border-top:1px solid var(--line); }
  .room-title{ font-size:var(--fs-3); font-weight:var(--fw-hi); letter-spacing:-0.01em; }
  .room-next{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); margin-top:var(--space-1); line-height:1.45; }
  .statgrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:var(--space-2); }
  .stat{
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
    padding:var(--space-4) var(--space-4); animation:rise var(--dur-base) var(--ease) both;
  }
  /* The number dominates its own card and nothing beyond it. At --fs-6 six of
     these tied with the screen title, which gives a page seven focal points
     and therefore none. One step down still leaves it three sizes clear of
     its own label, which is the hierarchy that actually matters here. */
  .stat .n{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.02em; font-variant-numeric:tabular-nums; line-height:1; }
  .stat .n small{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink-soft); letter-spacing:normal; margin-left:var(--space-1); }
  .stat .k{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); margin-top:var(--space-2); }
  .stat.wide{ grid-column:1 / -1; }
  .stat.accent .n{ color:var(--ink-soft); }
  .stat.tide .n{ color:var(--tide); }

  .levelwrap{ margin:var(--space-4) 0 var(--space-1); }
  .levelwrap .top{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--space-2); }
  .levelwrap .lv{ font-size:var(--fs-4); font-weight:var(--fw-hi); }
  .levelwrap .xp{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; }
  .bar{ height:9px; border-radius:var(--r-pill); background:var(--surface); overflow:hidden; border:1px solid var(--line); }
  .bar i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--tide); transition:width var(--dur-base) var(--ease); }
  .bar.sk{ height:7px; margin-top:var(--space-2); }

  /* skills panel */
  .skills{ display:flex; flex-direction:column; gap:var(--space-3); }
  .skill-top{ display:flex; align-items:center; justify-content:space-between; }
  .skill-nm{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .skill-lv{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; }

  /* insights */
  .insight-body{ font-size:var(--fs-3); color:var(--ink-soft); font-weight:var(--fw-med); line-height:1.5; }
  .forecast{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); padding:var(--space-4) var(--space-4); animation:rise var(--dur-base) var(--ease) both; }
  .fc-big{ font-size:var(--fs-6); font-weight:var(--fw-hi); letter-spacing:-0.03em; color:var(--ink-soft); font-variant-numeric:tabular-nums; line-height:1; }
  .fc-big small{ font-size:var(--fs-4); font-weight:var(--fw-hi); color:var(--ink-soft); letter-spacing:normal; }
  .fc-lbl{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); margin-top:var(--space-2); line-height:1.45; }

  .plan{ display:flex; flex-direction:column; gap:var(--space-2); }
  .pday{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); padding:var(--space-3) var(--space-4); animation:rise var(--dur-base) var(--ease) both; }
  .pday.today{ background:var(--surface); border-color:var(--line); }
  .pday.empty{ padding:var(--space-3) var(--space-4); display:flex; align-items:center; justify-content:space-between; opacity:.55; }
  .pd-head{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-2); }
  .pd-date{ font-size:var(--fs-3); color:var(--ink-mute); font-weight:var(--fw-med); }
  .pd-date b{ color:var(--ink); font-weight:var(--fw-hi); font-size:var(--fs-3); }
  .pday.today .pd-date b{ color:var(--ink-soft); }
  .pd-load{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .pd-none{ font-size:var(--fs-2); color:var(--ink-mute); }
  .pd-bar{ height:4px; border-radius:var(--r-pill); background:var(--surface); overflow:hidden; margin-bottom:var(--space-3); }
  .pd-bar i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--surface-2); }
  .pd-routines{ display:flex; gap:var(--space-1); flex-wrap:wrap; margin-bottom:var(--space-3); }
  .pd-rt{ font-size:var(--fs-1); padding:var(--space-1) var(--space-2); border-radius:var(--r-pill); background:var(--ground); border:1px solid var(--line); color:var(--ink-mute); font-weight:var(--fw-med); }
  .pd-rt.on{ color:var(--tide); border-color:var(--surface-2); }
  .pd-list{ display:flex; flex-direction:column; gap:var(--space-2); }
  .pd-task{ display:flex; align-items:center; gap:var(--space-2); }
  .pdot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
  .pd-nm{ font-size:var(--fs-3); font-weight:var(--fw-med); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pd-meta{ font-size:var(--fs-1); color:var(--ink-mute); font-weight:var(--fw-med); flex-shrink:0; }
  .aisum{ font-size:var(--fs-3); color:var(--ink-soft); line-height:1.55; margin:var(--space-1) 0 var(--space-4); text-wrap:pretty; }
  .scores{ display:flex; flex-direction:column; gap:var(--space-4); }
  .sc-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-2); }
  .sc-lbl{ font-size:var(--fs-3); font-weight:var(--fw-hi); letter-spacing:-0.01em; }
  .sc-val{ font-size:var(--fs-4); font-weight:var(--fw-hi); color:var(--ink-soft); font-variant-numeric:tabular-nums; }
  .sc-note{ font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-2); line-height:1.45; }
  .boosts{ display:flex; flex-direction:column; gap:var(--space-2); }
  .boost{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); padding:var(--space-3) var(--space-4); }
  .bo-t{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink-soft); margin-bottom:var(--space-1); }
  .bo-w{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.5; }
  .outlooks{ display:flex; flex-direction:column; gap:var(--space-2); }
  .outlook{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control); padding:var(--space-3) var(--space-4); animation:rise var(--dur-base) var(--ease) both; }
  .outlook.warn{ background:var(--surface-2); border-color:var(--line); }
  .ol-nm{ font-size:var(--fs-3); font-weight:var(--fw-hi); letter-spacing:-0.01em; margin-bottom:var(--space-1); }
  .ol-st{ font-size:var(--fs-2); color:var(--ink-soft); font-weight:var(--fw-med); }
  .outlook.warn .ol-st{ color:var(--ink-soft); }

  .rhythm{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--space-2); height:80px; margin-top:var(--space-3); padding:0 var(--space-1); }
  .rcol{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:var(--space-2); height:100%; }
  .rbar{ width:100%; max-width:44px; border-radius:var(--r-control); background:var(--surface-2); transition:height var(--dur-base) var(--ease), opacity .4s ease; }
  .rlbl{ font-size:var(--fs-1); color:var(--ink-mute); font-weight:var(--fw-med); }

  .miles{ display:flex; flex-direction:column; gap:var(--space-2); }
  .mile{
    display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4);
    background:var(--surface); border:1px solid var(--line); border-radius:var(--r-control);
    animation:rise var(--dur-base) var(--ease) both;
  }
  .mile .ic{ width:34px; height:34px; border-radius:var(--r-control); background:var(--surface-2); display:grid; place-items:center; flex-shrink:0; }
  .mile .ic svg{ width:18px; height:18px; color:var(--ink-soft); }
  .mile .t{ font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .mile .d{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); margin-top:var(--space-1); }

  .feed{ display:flex; flex-direction:column; gap:var(--space-1); }
  .fitem{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-1); border-bottom:1px solid var(--line); }
  .fitem:last-child{ border-bottom:none; }
  .fitem .fdot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
  .fitem .ft{ flex:1; font-size:var(--fs-3); font-weight:var(--fw-med); }
  .fitem .ft b{ font-weight:var(--fw-hi); }
  .fitem .fm{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); font-variant-numeric:tabular-nums; }

  /* ---------- Bottom nav ---------- */
  /* Solid, with a hairline. Not a floating island: a rounded bar with a shadow
     reads as a card that happens to contain navigation, and it competes with the
     content above it for the same visual weight. */
  #app nav{
    /* flex-shrink and an explicit floor: the bar is the one thing that must
       survive any layout mistake, because without it there is no way to move
       between screens at all.

       --surface-solid, not --surface: in light mode --surface is pure white
       and the page is one step below it, so a white bar separated by a hairline
       reads as absent. This is chrome, not content, and it has to announce
       itself. The same treatment was set in primitives.css and lost, because
       that file loads first. */
    flex-shrink:0; display:flex; min-height:var(--nav-h);
    box-shadow:0 -1px 0 var(--line), var(--shadow-2);
    padding:var(--space-2) var(--space-4) max(var(--space-2), var(--safe-bottom));
    background:var(--surface-solid);
    border-top:1px solid var(--line);
    gap:var(--space-1);
  }
  #app nav button{
    flex:1; padding:var(--space-2) 0 var(--space-2); border-radius:var(--r-control); display:flex; flex-direction:column; align-items:center; gap:var(--space-1);
    color:var(--ink-mute); transition:color .2s ease;
  }
  #app nav button svg{ width:24px; height:24px; }
  #app nav button span{
    font-size:0.6875rem; font-weight:var(--fw-med); letter-spacing:0;
    /* Never truncated. A tab label that says "Insigh..." is worse than a
       smaller one that says "Insights". */
    white-space:nowrap; overflow:visible;
  }
  #app nav button.on{
    color:var(--ink);
    background:none;
  }

  /* ---------- Session takeover ---------- */
  .session{
    position:fixed; inset:0; z-index:var(--z-scrim);
    background:var(--ground);
    display:flex; flex-direction:column; align-items:center;
    padding:calc(var(--safe-top) + var(--space-6)) var(--space-5) calc(var(--safe-bottom) + var(--space-5));
    max-width:520px; margin:0 auto;
    animation:sessIn var(--dur-base) var(--ease) both;
  }
  @keyframes sessIn{ from{ opacity:0; transform:scale(1.04); } to{ opacity:1; transform:scale(1); } }
  .session.out{ animation:sessOut var(--dur-base) var(--ease) both; }
  @keyframes sessOut{ to{ opacity:0; transform:scale(1.03); } }
  .sess-cat{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--tide); margin-bottom:var(--space-2); }
  .sess-name{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.025em; text-align:center; text-wrap:balance; margin-bottom:auto; max-width:20ch; }

  .ring-wrap{ position:relative; width:270px; height:270px; margin:auto 0; display:grid; place-items:center; }
  .ring-wrap svg{ transform:rotate(-90deg); position:absolute; inset:0; }
  .ring-bg{ fill:none; stroke:var(--surface); stroke-width:10; }
  .ring-fg{ fill:none; stroke:url(#rg); stroke-width:10; stroke-linecap:round; transition:stroke-dashoffset 1s linear; }
  .ring-inner{ text-align:center; }
  .timer{ font-size:var(--fs-numeric); font-weight:var(--fw-body); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; line-height:1; }
  .timer-sub{ font-size:var(--fs-3); color:var(--ink-mute); font-weight:var(--fw-med); margin-top:var(--space-2); }
  .sess-calm{ font-size:var(--fs-3); color:var(--ink-soft); font-weight:var(--fw-med); text-align:center; max-width:26ch; margin:var(--space-5) auto 0; line-height:1.5; text-wrap:balance; }
  .sess-ot{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--tide); text-align:center; margin-top:var(--space-3); letter-spacing:.02em; }
  .sess-bg{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); text-align:center; margin:var(--space-3) auto 0; }

  .sess-actions{ display:flex; gap:var(--space-3); width:100%; margin-top:var(--space-5); }
  .sess-actions button{ flex:1; padding:var(--space-4); border-radius:var(--r-control); font-size:var(--fs-4); font-weight:var(--fw-hi); transition:transform var(--dur-base) var(--ease), background .2s ease; }
  .sess-actions button:active{ transform:scale(.96); }

  /* ---------- Reward moment ---------- */
  .reward{
    position:fixed; inset:0; z-index:var(--z-sheet); display:grid; place-items:center;
    pointer-events:none; padding:var(--space-6);
  }
  .reward-card{
    text-align:center; transform:scale(.7); opacity:0;
    animation:rewardPop var(--dur-base) var(--ease) forwards;
  }
  @keyframes rewardPop{
    0%{ transform:scale(.6); opacity:0; }
    18%{ transform:scale(1.08); opacity:1; }
    30%{ transform:scale(1); }
    78%{ transform:scale(1); opacity:1; }
    100%{ transform:scale(.96); opacity:0; }
  }
  .reward-glow{ position:absolute; width:340px; height:340px; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%;
    background:var(--surface-2); animation:glowPulse var(--dur-base) var(--ease) forwards; }
  @keyframes glowPulse{ 0%{ transform:translate(-50%,-50%) scale(.4); opacity:0; } 40%{ opacity:1; } 100%{ transform:translate(-50%,-50%) scale(1.3); opacity:0; } }
  .reward-amt{ font-size:var(--fs-numeric); font-weight:var(--fw-hi); letter-spacing:-0.04em; color:var(--ink-soft); line-height:1; position:relative; display:flex; align-items:center; justify-content:center; gap:var(--space-3); }
  .reward-amt .coin-dot{ width:40px; height:40px; }
  .reward-msg{ font-size:var(--fs-4); font-weight:var(--fw-hi); color:var(--ink); margin-top:var(--space-4); position:relative; text-wrap:balance; }
  .reward-sub{ font-size:var(--fs-3); color:var(--ink-soft); margin-top:var(--space-1); font-weight:var(--fw-med); position:relative; }
  .spark{ position:absolute; width:7px; height:7px; border-radius:50%; background:var(--surface-2); left:50%; top:50%; }

  /* ---------- Sheet (add task) ---------- */
  .scrim{
    position:fixed; inset:0; z-index:var(--z-scrim);
    background:var(--scrim);
    -webkit-backdrop-filter:blur(20px) saturate(140%);
    backdrop-filter:blur(20px) saturate(140%);
    opacity:0; transition:opacity var(--dur-base) var(--ease);
  }
  .scrim.show{ opacity:1; }
  .sheet{
    position:fixed; left:0; right:0; bottom:0; z-index:var(--z-scrim); max-width:520px; margin:0 auto;
    background:var(--surface); border-top:1px solid var(--line);
    border-radius:var(--r-card); padding:var(--space-2) var(--space-5) calc(var(--safe-bottom) + var(--space-5));
    transform:translateY(100%); transition:transform var(--dur-base) var(--ease);
    max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  }
  .sheet::-webkit-scrollbar{ display:none; }
  .sheet-x{
    position:sticky; top:0; z-index:2; float:right; width:34px; height:34px; border-radius:50%;
    background:var(--surface); border:1px solid var(--line); color:var(--ink-soft);
    display:grid; place-items:center; margin:-var(--space-1) -var(--space-1) 0 0;
  }
  .sheet-x svg{ width:16px; height:16px; }
  .sheet-x:active{ background:var(--line); }
  .sheet.show{ transform:translateY(0); }
  .grab{ width:38px; height:5px; border-radius:var(--r-pill); background:var(--line); margin:0 auto var(--space-4); flex-shrink:0; }
  .sheet h3{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.02em; margin-bottom:var(--space-4); }
  .field{ margin-bottom:var(--space-4); }
  .field label{ display:block; font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-mute); margin-bottom:var(--space-2); }
  .field .opt{ color:var(--ink-mute); font-weight:var(--fw-med); }
  /* Every input except the checkbox, rather than a list of types that has to
     be extended each time one is used. Naming them individually is why
     datetime-local, time and email rendered dark on dark: they inherited the
     ink colour and never got the background that goes with it. */
  .field input:not([type=checkbox]):not([type=range]), .field select{
    width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--r-control); background:var(--ground); border:1px solid var(--line); color:var(--ink);
    -webkit-appearance:none; appearance:none;
  }
  .field input:focus, .field select:focus{ outline:none; border-color:var(--line); }
  .field input::placeholder{ color:var(--ink-mute); }
  /* The browser draws the calendar and clock glyphs in its own colour, which
     is near black and invisible on a dark field. */
  
  .segrow{ display:flex; gap:var(--space-2); }
  .segrow input[type=time]{ flex:1; padding:var(--space-3); border-radius:var(--r-control); background:var(--ground); border:1px solid var(--line); color:var(--ink); text-align:center; -webkit-appearance:none; }
  .segrow button{
    flex:1; padding:var(--space-3); border-radius:var(--r-control); background:var(--ground); border:1px solid var(--line);
    color:var(--ink-soft); font-size:var(--fs-3); font-weight:var(--fw-med); transition:all var(--dur-base) var(--ease);
  }
  /* Selected, said three ways.
     This was --surface-2 on a --ground base: a 0.022 lightness difference and
     a slightly darker label, which is no signal at all. The sound mode worked
     perfectly and looked like nothing was chosen.

     Fill, border and weight together, because any one of them alone is the
     one that disappears for somebody. */
  .segrow button.on{
    background:var(--accent-wash);
    border-color:var(--accent);
    color:var(--accent-deep);
    font-weight:var(--fw-hi);
  }
  .segrow button[aria-pressed="true"]{
    background:var(--accent-wash); border-color:var(--accent);
    color:var(--accent-deep); font-weight:var(--fw-hi);
  }


  /* ---------- toast ---------- */
  .toast{
    position:fixed; left:50%; bottom:calc(var(--safe-bottom) + 92px); transform:translate(-50%, 20px);
    z-index:var(--z-sheet); background:var(--surface); border:1px solid var(--line);
    color:var(--ink); padding:var(--space-3) var(--space-4); border-radius:var(--r-pill); font-size:var(--fs-3); font-weight:var(--fw-med);
    opacity:0; transition:all var(--dur-base) var(--ease); pointer-events:none; max-width:88vw; text-align:center;
  }
  .toast.show{ opacity:1; transform:translate(-50%, 0); }

  @keyframes rise{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:translateY(0); } }

  /* Wider screens: the phone column looks lost in the middle of a laptop.
     Nav moves to a rail and the content gets room without becoming a wall. */
  /* ---- desktop: a real sidebar, not a phone stretched wide ----
     The brand sits at the top of the rail rather than floating across the
     content, which is what made the wide layout read as a scaled up phone. */
  @media (min-width: 880px){
    
    #app{ max-width:1180px; flex-direction:row; align-items:stretch; gap:0; }
    #app nav{
      order:-1; flex-direction:column; width:260px; flex-shrink:0; gap:var(--space-1);
      padding:calc(var(--rail-head) + var(--space-2)) var(--space-3) var(--space-4);
      background:var(--surface-2);
      border-right:1px solid var(--line); align-self:stretch;
    }
    /* absolute, not fixed. #app is centred at 1180px, so a fixed header
       anchors to the viewport and lands at the far left of the screen with
       the rail nowhere near it. #app is position:relative, so absolute puts
       it where the rail actually is. */
    #app header{
      position:absolute; top:0; left:0; width:260px; height:var(--rail-head);
      justify-content:center; padding:var(--space-5) var(--space-4) var(--space-3);
      background:none; z-index:calc(var(--z-nav) + 1);
      flex-direction:column; align-items:flex-start; gap:var(--space-4);
    }
    #app header .brand{ font-size:var(--fs-5); }
    #app header .brand img{ width:28px; height:28px; }
    #app header .hdr-right{ width:100%; justify-content:flex-start; gap:var(--space-2); }

    /* A real hit area, not a text link. 44px minimum, the label at reading
       size rather than the 11px a phone tab bar needs. */
    #app nav button{
      flex:0 0 auto; flex-direction:row; justify-content:flex-start;
      gap:var(--space-3); min-height:44px;
      padding:var(--space-3) var(--space-3); border-radius:var(--r-control);
      transition:background .18s ease, color .18s ease;
    }
    #app nav button span{ font-size:var(--fs-3); font-weight:var(--fw-med); }
    #app nav button:hover{ background:var(--surface); color:var(--ink); }
    #app nav button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

    /* Where you are, said three ways: a filled surface, a weight change, and
       a rule down the leading edge. One of the three alone is what made the
       old state read as barely there, and colour alone is also the one that
       disappears for anyone who cannot see it. */
    #app nav button.on{
      color:var(--ink);
      background:var(--surface);
      font-weight:var(--fw-hi);
      box-shadow:inset 2px 0 0 var(--accent);
    }
    #app nav button.on svg{ color:var(--accent); }

    #app main{ padding:var(--space-7) var(--space-7) var(--space-7); }
    #app main > *{ max-width:760px; margin-inline:auto; }
    .statgrid{ grid-template-columns:repeat(3,1fr); }
    .plan{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); align-items:start; }
    .skills{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-5); }
    .scores{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-5); }
    .boosts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
    .routines{ gap:var(--space-2); }
    .sheet{ max-width:560px; border-radius:var(--r-card); bottom:auto; top:50%; left:50%; right:auto;
      transform:translate(-50%,-46%) scale(.97); opacity:0; max-height:82dvh;
      border:1px solid var(--line); padding:var(--space-4) var(--space-6) var(--space-6); }
    .sheet.show{ transform:translate(-50%,-50%) scale(1); opacity:1; }
    .session{ max-width:100%; }
    .room svg{ max-height:340px; }
  }
  @media (min-width: 880px) and (max-width: 1100px){
    #app main{ padding:var(--space-7) var(--space-5) var(--space-7); }
    .plan{ grid-template-columns:1fr; }
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.01ms !important; transition-duration:.05ms !important; }
    .ring-fg{ transition:none; }
  }

  /* header actions */
  .hdr-right{ display:flex; align-items:center; gap:var(--space-2); }
  .syncdot{ width:7px; height:7px; border-radius:50%; background:var(--ink-mute); transition:background .3s ease; }
  .syncdot.syncing{ background:var(--surface-2); animation:pulse 1.2s ease-in-out infinite; }
  /* Offline is the one state worth noticing from across the room, so it is the
     only dot that moves. */
  .syncdot.offline{ background:var(--danger); animation:offpulse 2.4s ease-in-out infinite; }
  @keyframes pulse{ 50%{ opacity:.35; } }
  .gear{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; color:var(--ink-mute); border:1px solid transparent; transition:all .2s ease; }
  .gear:active{ color:var(--ink-soft); background:var(--surface); }
  .gear svg{ width:20px; height:20px; }
  .coins:active{ transform:scale(.94); }

  /* whoami */
  .whoami{ display:flex; align-items:center; gap:var(--space-3); margin-top:var(--space-1); }
  .wi-name{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.02em; }
  .wi-title{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-soft); background:var(--surface-2); padding:var(--space-1) var(--space-3); border-radius:var(--r-pill); }

  /* shop */
  .shop{ max-height:86dvh; overflow-y:auto; }
  .shop::-webkit-scrollbar{ display:none; }
  .shop-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--space-1); }
  .shop-head h3{ margin:0; }
  .shop-head .coins{ padding:var(--space-1) var(--space-3) var(--space-1) var(--space-2); font-size:var(--fs-3); }
  .shop-sub{ font-size:var(--fs-2); color:var(--ink-mute); line-height:1.45; margin-bottom:var(--space-1); }
  .shop-cur{ font-size:var(--fs-2); color:var(--ink-soft); margin-bottom:var(--space-3); }
  .shop-cur b{ color:var(--ink); }
  .linkbtn{ color:var(--ink-soft); font-weight:var(--fw-hi); font-size:var(--fs-2); }
  .shop-list{ display:flex; flex-direction:column; gap:var(--space-2); }
  .shop-item{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-4); background:var(--ground); border:1px solid var(--line); border-radius:var(--r-control); }
  .shop-item .sw{ width:20px; height:20px; border-radius:var(--r-control); flex-shrink:0; }
  .shop-nm{ flex:1; font-size:var(--fs-3); font-weight:var(--fw-med); }
  .shop-buy{ display:flex; align-items:center; gap:var(--space-1); padding:var(--space-2) var(--space-4); border-radius:var(--r-pill); background:var(--surface-2); color:var(--accent-ink); font-size:var(--fs-3); font-weight:var(--fw-hi); font-variant-numeric:tabular-nums; }
  .shop-buy::before{ content:""; width:12px; height:12px; border-radius:50%; background:var(--accent-ink); opacity:.35; }
  .shop-buy:disabled{ background:var(--surface); color:var(--ink-mute); }
  .shop-buy:disabled::before{ display:none; }
  .shop-equip{ padding:var(--space-2) var(--space-4); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink); font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .shop-have{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-mute); padding:var(--space-2) var(--space-1); }
  .shop-have.on{ color:var(--ink-soft); }

  /* settings */
  .dangerbtn{ width:100%; margin-top:var(--space-3); padding:var(--space-4); border-radius:var(--r-control); background:transparent; border:1px solid var(--surface-2); color:var(--danger); font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .dangerbtn:active{ background:var(--surface-2); }

  /* session share */
  .sess-share{ display:flex; align-items:center; gap:var(--space-2); margin:var(--space-4) auto 0; padding:var(--space-2) var(--space-4); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-2); font-weight:var(--fw-med); transition:all .18s ease; }
  .sess-share:active{ color:var(--ink); border-color:var(--tide); }

  /* onboarding */
  .onboard{ position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); z-index:var(--z-scrim); width:min(380px,90vw); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); padding:var(--space-6) var(--space-5) var(--space-5); text-align:center; animation:rewardPop2 var(--dur-base) var(--ease) both; max-height:88dvh; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
  .onboard::-webkit-scrollbar{ display:none; }
  @keyframes rewardPop2{ from{ opacity:0; transform:translate(-50%,-46%) scale(.94); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
  .ob-ic{ width:60px; height:60px; border-radius:var(--r-card); background:var(--surface-2); display:grid; place-items:center; margin:0 auto var(--space-4); }
  .ob-ic svg{ width:29px; height:29px; color:var(--ink-soft); }
  .onboard h2{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.025em; margin-bottom:var(--space-3); text-wrap:balance; line-height:1.2; }
  .ob-body{ font-size:var(--fs-3); color:var(--ink-soft); line-height:1.55; margin:0 auto var(--space-5); max-width:30ch; text-wrap:pretty; }
  .ob-dots{ display:flex; gap:var(--space-2); justify-content:center; margin-bottom:var(--space-5); }
  .ob-dots span{ width:6px; height:6px; border-radius:50%; background:var(--line); transition:all var(--dur-base) var(--ease); }
  .ob-dots span.on{ background:var(--surface-2); width:20px; border-radius:var(--r-pill); }

  /* auth */

  /* device setup */
  .recipe{ text-align:left; margin:0 0 var(--space-3); padding-left:var(--space-4); display:flex; flex-direction:column; gap:var(--space-2); }
  .recipe li{ font-size:var(--fs-3); color:var(--ink-soft); line-height:1.45; }
  .copysteps{ width:100%; padding:var(--space-3); border-radius:var(--r-control); background:var(--ground); border:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-2); font-weight:var(--fw-med); margin-bottom:var(--space-3); }
  .copysteps:active{ border-color:var(--ink-soft); color:var(--ink-soft); }
  .recipe-note{ font-size:var(--fs-2); color:var(--ink-soft); font-weight:var(--fw-med); margin-bottom:var(--space-3); text-align:left; line-height:1.45; }
  .setup-place{ font-size:var(--fs-2); color:var(--ink-soft); margin-bottom:var(--space-3); }
  .setup-place b{ color:var(--ink-soft); }
  .setup-count{ font-size:var(--fs-1); font-weight:var(--fw-hi); color:var(--ink-mute); letter-spacing:.02em; margin-bottom:var(--space-3); }
  .setup-open{ display:block; width:100%; padding:var(--space-3); border-radius:var(--r-control); background:var(--ground);
    border:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-3); font-weight:var(--fw-hi);
    margin-bottom:var(--space-4); text-align:center; text-decoration:none;
    transition:transform var(--dur-base) var(--ease), background .2s; }
  .setup-open:active{ transform:scale(.98); background:var(--surface-2); }
  .setup-open:active{ transform:scale(.98); }

  /* pause reflection */
  .preasons{ display:flex; flex-direction:column; gap:var(--space-2); margin-bottom:var(--space-5); }
  .preason{ width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--r-control); background:var(--ground); border:1px solid var(--line); color:var(--ink-soft); font-size:var(--fs-3); font-weight:var(--fw-med); text-align:left; transition:all var(--dur-base) var(--ease); }
  .preason.on{ background:color-mix(in oklab, var(--tide) 28%, transparent); border-color:var(--tide); color:var(--tide); }

  /* daily routines strip */
  .routines{ display:flex; gap:var(--space-2); margin-bottom:var(--space-4); flex-wrap:wrap; }
  .rt{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius:var(--r-pill); background:var(--surface); border:1px solid var(--line); transition:all var(--dur-base) var(--ease); }
  .rt-box{ width:17px; height:17px; border-radius:50%; border:1.8px solid var(--ink-mute); display:grid; place-items:center; flex-shrink:0; transition:all .2s ease; }
  .rt-box svg{ width:10px; height:10px; color:var(--accent-ink); }
  .rt-nm{ font-size:var(--fs-3); font-weight:var(--fw-med); color:var(--ink-soft); }
  .rt:active{ transform:scale(.95); }
  .rt.done{ background:var(--surface-2); border-color:var(--line); }
  .rt.done .rt-box{ background:var(--surface-2); border-color:var(--line); }
  .rt.done .rt-nm{ color:var(--ink-soft); }

  .blockbar{ width:100%; margin:var(--space-4) 0 var(--space-1); }
  .blockbar.tight{ margin:0 0 var(--space-4); }
  .bb-top{ display:flex; justify-content:space-between; font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); margin-bottom:var(--space-2); font-variant-numeric:tabular-nums; }
  .blockbar .bar i{ background:var(--surface-2); }

  /* AI planner */
  .plantext{ width:100%; padding:var(--space-4); border-radius:var(--r-control); background:var(--ground); border:1px solid var(--line); color:var(--ink); font-size:var(--fs-4); line-height:1.5; resize:none; -webkit-appearance:none; font-family:inherit; }
  .plantext:focus{ outline:none; border-color:var(--line); }
  .plantext::placeholder{ color:var(--ink-mute); }
  .planex{ display:flex; flex-direction:column; gap:var(--space-2); margin:var(--space-3) 0 var(--space-1); }
  .planex button{ text-align:left; padding:var(--space-2) var(--space-3); border-radius:var(--r-control); background:transparent; border:1px solid var(--line); color:var(--ink-mute); font-size:var(--fs-2); font-weight:var(--fw-med); transition:all .18s ease; }
  .planex button:active{ color:var(--ink-soft); border-color:var(--line); }
  .planmsg{ font-size:var(--fs-3); color:var(--tide); line-height:1.5; margin:var(--space-3) 0; white-space:pre-wrap; min-height:2px; font-weight:var(--fw-med); }
  .planmsg.err{ color:var(--danger); }
  .planctx{ margin-top:var(--space-4); border-top:1px solid var(--line); }
  .planctx summary{ padding:var(--space-3) var(--space-1) var(--space-2); font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-mute); cursor:pointer; list-style:none; }
  .planctx summary::-webkit-details-marker{ display:none; }

  /* manual */
  .manual details{ border-bottom:1px solid var(--line); }
  .manual details:last-child{ border-bottom:none; }
  .manual summary{ padding:var(--space-4) var(--space-5) var(--space-4) var(--space-1); font-size:var(--fs-3); font-weight:var(--fw-hi); letter-spacing:-0.01em; cursor:pointer; list-style:none; position:relative; }
  .manual summary::-webkit-details-marker{ display:none; }
  .manual summary::after{ content:""; position:absolute; right:6px; top:21px; width:8px; height:8px; border-right:2px solid var(--ink-mute); border-bottom:2px solid var(--ink-mute); transform:rotate(45deg); transition:transform var(--dur-base) var(--ease); }
  .manual details[open] summary{ color:var(--ink-soft); }
  .manual details[open] summary::after{ transform:rotate(-135deg); border-color:var(--line); }
  .man-a{ font-size:var(--fs-3); color:var(--ink-soft); line-height:1.6; padding:0 var(--space-1) var(--space-4) var(--space-1); text-wrap:pretty; }

  /* deadline that no longer fits the days available */
  .riskbox{ background:var(--surface-2); border:1px solid var(--surface-2);
    color:var(--line); border-radius:var(--r-control); padding:var(--space-4) var(--space-4); font-size:var(--fs-3);
    line-height:1.55; margin:var(--space-1) 0 var(--space-4); }
  .riskbox b{ color:var(--line); font-weight:var(--fw-hi); }

  /* platform / lease mode strip */
  /* Demoted out of the first slot. It is a setup suggestion, not news, and
     it was appearing above the content on every screen. */
  .mode-strip{ display:flex; align-items:center; gap:var(--space-2); flex-wrap:wrap;
    order:99; margin-top:var(--space-5);
    background:color-mix(in oklab, var(--tide) 24%, transparent); border:1px solid color-mix(in oklab, var(--tide) 40%, transparent);
    color:var(--tide); border-radius:var(--r-control); padding:var(--space-3) var(--space-3); font-size:var(--fs-2);
    font-weight:var(--fw-med); line-height:1.45; margin:var(--space-1) 0 var(--space-4); }
  .mode-strip button{ color:var(--tide); font-weight:var(--fw-hi); text-decoration:underline; font-size:var(--fs-2); }
  .mode-strip.locked button{ color:var(--ink-soft); }
  .mode-strip.locked{ background:var(--surface-2); border-color:var(--line); color:var(--ink-soft); }
  .syncdot.locked{ background:var(--surface-2); }

  /* ---- display face, shared with the landing page ---- */
  /* The display serif, shared. Weight 400 is right at --fs-6 where the size
     alone carries it; at --fs-5 it reads as body copy set large, so the
     smaller headings step up to 500. */
  .greeting, .empty h2, .onboard h2, .whoami .wi-name{
    font-family:var(--display);
    font-weight:var(--fw-body); letter-spacing:-0.012em;
  }
  .empty h2{ font-weight:var(--fw-med); }
  .greeting{ font-size:var(--fs-6); line-height:1.1; margin-bottom:var(--space-5); text-wrap:balance; }
  .empty h2{ font-size:var(--fs-5); }
  .onboard h2{ font-size:var(--fs-6); line-height:1.14; }
  .whoami .wi-name{ font-size:var(--fs-5); }

  /* ---- settings, rebuilt ---- */
  .set-group{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.09em; text-transform:uppercase;
    color:var(--ink-mute); margin:var(--space-5) var(--space-1) var(--space-3); }
  .set-group:first-of-type{ margin-top:var(--space-1); }
  .fnote{ font-size:var(--fs-2); color:var(--ink-mute); line-height:1.5; margin-top:var(--space-2); }
  .acct-row{ display:flex; align-items:center; gap:var(--space-3); }
  .acct-av{ width:44px; height:44px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
    background:var(--surface-2); color:var(--accent-ink);
    font-size:var(--fs-5); font-weight:var(--fw-hi); }
  .acct-nm{ font-size:var(--fs-4); font-weight:var(--fw-hi); letter-spacing:-0.01em; }
  .acct-sub{ font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-1); }

  /* ---- hold to stop ---- */
  .holdbtn{ position:relative; overflow:hidden; border-radius:var(--r-control); padding:var(--space-4);
    background:var(--ground); border:1px solid var(--line); width:100%;
    touch-action:none; -webkit-user-select:none; user-select:none; }
  .hold-fill{ position:absolute; inset:0; width:var(--hold,0%);
    background:var(--surface-2);
    transition:width .06s linear; pointer-events:none; }
  .hold-txt{ position:relative; display:inline-flex; align-items:center; gap:var(--space-2);
    font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink-soft); }
  .holdbtn.holding .hold-txt{ color:var(--ink); }
  .holdbtn.holding{ border-color:var(--surface-2); }
  .hold-left{ font-variant-numeric:tabular-nums; font-weight:var(--fw-hi); color:var(--line); min-width:2ch; }

  /* ---- a session running on another device ---- */
  .live-strip{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
    background:color-mix(in oklab, var(--tide) 24%, transparent); border:1px solid color-mix(in oklab, var(--tide) 40%, transparent);
    color:var(--tide); border-radius:var(--r-control); padding:var(--space-3) var(--space-4); font-size:var(--fs-2);
    font-weight:var(--fw-med); line-height:1.5; margin:var(--space-1) 0 var(--space-4); }
  .live-strip div{ flex:1; min-width:180px; }
  .live-strip b{ color:var(--ink); font-weight:var(--fw-hi); }
  .live-strip button{ background:var(--tide); color:var(--ground); font-weight:var(--fw-hi);
    font-size:var(--fs-2); padding:var(--space-2) var(--space-4); border-radius:var(--r-pill); white-space:nowrap; }
  .live-strip button:active{ transform:scale(.96); }

  /* an owed break, takeable at any point in the session */
  .sess-break{ display:flex; align-items:center; gap:var(--space-2); margin:var(--space-3) auto 0;
    padding:var(--space-2) var(--space-4); border-radius:var(--r-pill); background:color-mix(in oklab, var(--tide) 28%, transparent);
    border:1px solid color-mix(in oklab, var(--tide) 40%, transparent); color:var(--tide);
    font-size:var(--fs-2); font-weight:var(--fw-hi); }
  .sess-break:active{ transform:scale(.96); background:color-mix(in oklab, var(--tide) 40%, transparent); }

  /* ---- where you are in today ---- */
  .today-strip{ margin:0 0 var(--space-4); }
  .ts-top{ display:flex; justify-content:space-between; font-size:var(--fs-2);
    color:var(--ink-mute); font-weight:var(--fw-med); margin-bottom:var(--space-2); font-variant-numeric:tabular-nums; }
  .ts-top b{ color:var(--ink); font-weight:var(--fw-hi); }
  .ts-bar{ height:6px; border-radius:var(--r-pill); background:var(--surface);
    overflow:hidden; border:1px solid var(--line); }
  .ts-bar i{ display:block; height:100%; border-radius:var(--r-pill);
    background:var(--surface-2); transition:width var(--dur-base) var(--ease); }
  .ts-sub{ font-size:var(--fs-1); color:var(--ink-mute); margin-top:var(--space-2); }

  /* ---- the day ring, sitting inside the session ring ---- */
  .ring-bg.day{ stroke:var(--surface); stroke-width:5; }
  .ring-day{ fill:none; stroke:var(--tide); stroke-width:5; stroke-linecap:round;
    opacity:.75; transition:stroke-dashoffset var(--dur-base) var(--ease); }

  /* ---- the reward moment ---- */
  .reward-card .reward-ring{ position:relative; width:96px; height:96px; margin:0 auto var(--space-4); }
  .reward-ring svg{ width:96px; height:96px; transform:rotate(-90deg); }
  .reward-ring circle{ fill:none; stroke:var(--surface-2); stroke-width:5; }
  .reward-ring .rr-fg{ stroke:var(--line); stroke-linecap:round;
    stroke-dasharray:264; stroke-dashoffset:264; animation:rrSweep var(--dur-base) var(--ease) forwards; }
  @keyframes rrSweep{ to{ stroke-dashoffset:0; } }
  .reward-ring .coin-dot{ position:absolute; left:50%; top:50%; width:40px; height:40px;
    transform:translate(-50%,-50%);
    animation:coinPop var(--dur-base) var(--ease) both; }
  @keyframes coinPop{ from{ transform:translate(-50%,-50%) scale(.4); opacity:0; }
                      to{ transform:translate(-50%,-50%) scale(1); opacity:1; } }
  .reward-glow.big{ background:var(--surface-2); }
  .reward .reward-card{ animation:rwIn var(--dur-base) var(--ease) both; }
  @keyframes rwIn{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:scale(1); } }
  .reward.out .reward-card{ animation:rwOut var(--dur-base) var(--ease) forwards; }
  @keyframes rwOut{ to{ opacity:0; transform:scale(.96) translateY(-8px); } }
  .reward-amt{ font-variant-numeric:tabular-nums; }

  /* ---- a task that keeps sliding ---- */
  .stuck-tag{ color:var(--line); font-weight:var(--fw-hi); }

  /* ---- add to home screen ---- */
  .inst-steps{ display:flex; flex-direction:column; gap:var(--space-3); margin:var(--space-1) 0 var(--space-4); text-align:left; }
  .inst-step{ display:flex; align-items:flex-start; gap:var(--space-3); }
  .inst-ic{ width:38px; height:38px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center;
    background:var(--surface-2); color:var(--ink-soft); }
  .inst-ic svg{ width:19px; height:19px; }
  .inst-step b{ display:block; font-size:var(--fs-3); font-weight:var(--fw-hi); margin-bottom:var(--space-1); }
  .inst-step span:last-child{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.45; }
  .inst-done{ font-size:var(--fs-3); color:var(--tide); font-weight:var(--fw-med); margin:var(--space-1) 0 var(--space-4); }

  /* ---- a day you can open ---- */
  .pd-head{ display:flex; align-items:center; justify-content:space-between;
    margin-bottom:var(--space-2); cursor:pointer; user-select:none; }
  .pd-right{ display:flex; align-items:center; gap:var(--space-2); }
  .pd-chev{ width:16px; height:16px; color:var(--ink-mute); transition:transform var(--dur-base) var(--ease); }
  .pday.open .pd-chev{ transform:rotate(180deg); }
  .pday:not(.open) .pd-list{ display:none; }
  .pday:not(.open) .pd-bar{ margin-bottom:0; }
  .pd-task{ position:relative; }
  .pd-del{ width:26px; height:26px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center;
    color:var(--ink-mute); transition:all .18s ease; }
  .pd-del svg{ width:14px; height:14px; }
  .pd-del:active{ background:var(--surface-2); color:var(--danger); }
  .fixed-tag{ color:var(--tide); font-weight:var(--fw-hi); }

  /* ---- goals: outcomes, milestones, and an honest capacity read ---- */
  .goal-empty{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
    padding:var(--space-5) var(--space-5); text-align:center; margin-bottom:var(--space-2); }
  .goal-empty p{ font-size:var(--fs-3); color:var(--ink-soft); line-height:1.6; margin-bottom:var(--space-4);
    max-width:38ch; margin-inline:auto; }

  .cap{ margin:var(--space-1) 0 var(--space-4); }
  .cap-top{ display:flex; justify-content:space-between; font-size:var(--fs-2); color:var(--ink-mute);
    font-weight:var(--fw-med); margin-bottom:var(--space-2); font-variant-numeric:tabular-nums; }
  .cap-bar{ height:7px; border-radius:var(--r-pill); background:var(--surface);
    border:1px solid var(--line); overflow:hidden; }
  .cap-bar i{ display:block; height:100%; border-radius:var(--r-pill);
    background:var(--tide); transition:width var(--dur-base) var(--ease); }
  .cap-bar.tight i{ background:var(--surface-2); }
  .cap-bar.over i{ background:var(--danger); }
  .cap-note{ font-size:var(--fs-2); color:var(--ink-mute); line-height:1.5; margin-top:var(--space-2); }
  .cap-note.over{ color:var(--line); }

  .goals{ display:flex; flex-direction:column; gap:var(--space-3); }
  .goal{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
    padding:var(--space-4); animation:rise var(--dur-base) var(--ease) both; }
  .goal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
  .goal-name{ font-size:var(--fs-4); font-weight:var(--fw-hi); letter-spacing:-0.02em; line-height:1.25; }
  .goal-sub{ font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-1); font-weight:var(--fw-med); }
  .goal-x{ width:28px; height:28px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center;
    color:var(--ink-mute); transition:all .18s ease; }
  .goal-x svg{ width:14px; height:14px; }
  .goal-x:active{ background:var(--surface); color:var(--ink-soft); }
  .goal-why{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.55; margin:var(--space-3) 0 var(--space-1); }

  .miles-list{ display:flex; flex-direction:column; gap:var(--space-1); margin-top:var(--space-3); }
  .mile-row{ display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
    padding:var(--space-2) var(--space-1); border-radius:var(--r-control); transition:background .15s ease; }
  .mile-row:active{ background:var(--surface); }
  .mile-box{ width:17px; height:17px; border-radius:var(--r-control); flex-shrink:0; display:grid; place-items:center;
    border:1.8px solid var(--ink-mute); transition:all .2s ease; }
  .mile-box svg{ width:10px; height:10px; color:var(--accent-ink); }
  .mile-row.done .mile-box{ background:var(--surface-2); border-color:var(--line); }
  .mile-nm{ flex:1; font-size:var(--fs-3); font-weight:var(--fw-med); color:var(--ink-soft); min-width:0; }
  .mile-row.done .mile-nm{ color:var(--ink-mute); text-decoration:line-through;
    text-decoration-color:var(--ink-mute); }
  .mile-due{ font-size:var(--fs-1); color:var(--ink-mute); flex-shrink:0; font-variant-numeric:tabular-nums; }

  /* ---- today's fixed commitments ---- */
  .classes{ display:flex; flex-direction:column; gap:var(--space-1); margin:0 0 var(--space-4); }
  .cls{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); border-radius:var(--r-control);
    background:var(--surface); border:1px solid var(--line); }
  .cls-t{ font-size:var(--fs-1); color:var(--ink-mute); font-variant-numeric:tabular-nums;
    font-weight:var(--fw-hi); flex-shrink:0; width:42px; }
  .cls-n{ font-size:var(--fs-3); font-weight:var(--fw-med); color:var(--ink-soft); min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .cls.now{ border-color:color-mix(in oklab, var(--tide) 40%, transparent); background:color-mix(in oklab, var(--tide) 2%, transparent); }
  .cls.now .cls-t, .cls.now .cls-n{ color:var(--tide); }
  .cls.past{ opacity:.45; }

  /* ---- the week editor ---- */
  .wk-list{ display:flex; flex-direction:column; gap:var(--space-4); margin-bottom:var(--space-1); }
  .wk-name{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.07em; text-transform:uppercase;
    color:var(--ink-mute); margin-bottom:var(--space-2); }
  .wk-row{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) 0;
    border-bottom:1px solid var(--line); }
  .wk-row:last-child{ border-bottom:none; }
  .wk-time{ font-size:var(--fs-2); color:var(--ink-mute); font-variant-numeric:tabular-nums;
    flex-shrink:0; width:92px; }
  .wk-cls{ flex:1; font-size:var(--fs-3); font-weight:var(--fw-med); min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

  /* ---- things pinned to a clock time ---- */
  .pd-clock{ font-size:var(--fs-1); font-weight:var(--fw-hi); color:var(--ink-soft); flex-shrink:0;
    width:44px; font-variant-numeric:tabular-nums; letter-spacing:-0.01em; }
  .pd-task.timed .pd-nm{ color:var(--ink); font-weight:var(--fw-hi); }
  .pd-fixed{ display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:var(--space-2);
    padding-bottom:var(--space-2); border-bottom:1px dashed var(--line); }
  .pd-fix{ display:flex; align-items:center; gap:var(--space-2); }
  .pd-fix .pd-clock{ color:var(--tide); }
  .pd-fixnm{ flex:1; font-size:var(--fs-2); font-weight:var(--fw-med); color:var(--ink-soft);
    min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pd-pin{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-mute); flex-shrink:0; }

  /* ---- exam readiness ---- */
  .ready{ display:flex; align-items:center; gap:var(--space-4); padding:var(--space-5);
    background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-card); margin:var(--space-1) 0 var(--space-5); }
  .ready-ring{ position:relative; width:88px; height:88px; flex-shrink:0; }
  .ready-ring svg{ width:88px; height:88px; transform:rotate(-90deg); }
  .ready-ring circle{ fill:none; stroke:var(--surface); stroke-width:7; }
  .ready-ring .rr{ stroke:var(--tide); stroke-linecap:round;
    transition:stroke-dashoffset var(--dur-base) var(--ease); }
  .ready.good .rr{ stroke:var(--tide); }
  .ready.mid .rr{ stroke:var(--line); }
  .ready.risk .rr{ stroke:var(--danger); }
  .ready-pct{ position:absolute; inset:0; display:grid; place-items:center;
    font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
  .ready-pct span{ font-size:var(--fs-1); font-weight:var(--fw-hi); color:var(--ink-mute); margin-left:var(--space-1); }
  .ready-body{ min-width:0; }
  .ready-t{ font-size:var(--fs-4); font-weight:var(--fw-hi); letter-spacing:-0.02em; margin-bottom:var(--space-1); }
  .ready-d{ font-size:var(--fs-2); color:var(--ink-mute); font-weight:var(--fw-med); margin-bottom:var(--space-2); }
  .ready-n{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.5; }
  .ready.risk .ready-n{ color:var(--line); }

  /* ---- how much today is carrying ---- */
  .load{ margin:0 0 var(--space-4); padding:var(--space-4) var(--space-4); border-radius:var(--r-card);
    background:var(--surface); border:1px solid var(--line); }
  .load-top{ display:flex; align-items:baseline; justify-content:space-between; margin-bottom:var(--space-2); }
  .load-lbl{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-mute); }
  .load-val{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
  .load-bar{ height:6px; border-radius:var(--r-pill); background:var(--surface); overflow:hidden; }
  .load-bar i{ display:block; height:100%; border-radius:var(--r-pill);
    background:var(--tide); transition:width var(--dur-base) var(--ease); }
  .load.full .load-bar i{ background:var(--surface-2); }
  .load.over .load-bar i{ background:var(--danger); }
  .load.over .load-val{ color:var(--line); }
  .load-note{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.5; margin-top:var(--space-3); }
  .load.over .load-note{ color:var(--line); }
  .load-meta{ font-size:var(--fs-1); color:var(--ink-mute); margin-top:var(--space-1); }

  /* ---- friction ---- */
  .fric-tag{ color:var(--line); font-weight:var(--fw-hi); }
  .ease{ display:flex; align-items:center; justify-content:center; gap:var(--space-2); width:100%;
    margin:0 0 var(--space-3); padding:var(--space-3); border-radius:var(--r-control); font-size:var(--fs-2); font-weight:var(--fw-hi);
    background:var(--surface-2); border:1px solid var(--surface-2);
    color:var(--ink-soft); }
  .ease svg{ width:15px; height:15px; }
  .ease:active{ transform:scale(.98); }

  /* ---- the week ---- */
  .review{ background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-card); padding:var(--space-4); margin-bottom:var(--space-5); }
  .rv-spark{ display:flex; align-items:flex-end; gap:var(--space-1); height:64px; margin-bottom:var(--space-4); }
  .rv-col{ flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-end; height:100%; gap:var(--space-1); }
  .rv-fill{ width:100%; min-height:3px; border-radius:var(--r-control);
    background:var(--surface-2); opacity:.85; }
  .rv-col span{ font-size:var(--fs-1); color:var(--ink-mute); font-weight:var(--fw-hi); }
  .rv-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3) var(--space-4);
    padding-bottom:var(--space-4); border-bottom:1px solid var(--line); }
  .rv-grid div{ display:flex; flex-direction:column; gap:var(--space-1); }
  .rv-grid b{ font-size:var(--fs-5); font-weight:var(--fw-hi); letter-spacing:-0.03em; font-variant-numeric:tabular-nums; }
  .rv-grid span{ font-size:var(--fs-1); color:var(--ink-mute); line-height:1.35; }
  .rv-line{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.6; margin-top:var(--space-3); }
  .rv-line b{ color:var(--ink); font-weight:var(--fw-hi); }

  /* ---- dictation ---- */
  .plantext-wrap{ position:relative; }
  .plantext-wrap .plantext{ padding-right:var(--space-7); }
  .mic{ position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:var(--r-control);
    display:grid; place-items:center; color:var(--ink-mute);
    background:var(--surface); border:1px solid var(--line); transition:all .2s ease; }
  .mic svg{ width:16px; height:16px; }
  .mic.hot{ color:var(--accent-ink); background:var(--surface-2); border-color:var(--line);
    animation:micPulse 1.3s ease-in-out infinite; }
  @keyframes micPulse{ 0%,100%{ }
                       50%{ } }

  /* ---- starting points instead of a blank box ---- */
  .convos{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-bottom:var(--space-3); }
  .convos button{ font-size:var(--fs-2); font-weight:var(--fw-med); padding:var(--space-2) var(--space-3); border-radius:var(--r-pill);
    background:color-mix(in oklab, var(--tide) 24%, transparent); border:1px solid color-mix(in oklab, var(--tide) 6%, transparent);
    color:var(--tide); }
  .convos button:active{ transform:scale(.96); }

  /* ---- what the week is asking of you ---- */
  .mode-hint{ font-size:var(--fs-2); color:var(--ink-mute); line-height:1.5;
    padding:var(--space-2) var(--space-3); border-radius:var(--r-control); background:var(--surface);
    border:1px solid var(--line); margin-bottom:var(--space-4); }
  .mode-hint.exam{ color:var(--ink-soft); border-color:var(--surface-2);
    background:var(--surface-2); }
  .mode-hint.open{ color:var(--tide); border-color:color-mix(in oklab, var(--tide) 40%, transparent);
    background:color-mix(in oklab, var(--tide) 16%, transparent); }

  /* ---- the season ---- */
  .season{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.5; padding:var(--space-3) var(--space-3);
    border-radius:var(--r-control); background:var(--surface-2);
    border:1px solid var(--surface-2); margin-bottom:var(--space-4); }
  .season b{ color:var(--ink-soft); font-weight:var(--fw-hi); }

  /* =====================================================================
     Material. Glass is a layer at a real elevation, not a blur effect.
     Each level is further from the page and catches slightly more light,
     which is what makes the hierarchy readable without borders.
     ===================================================================== */
  /* =====================================================================
     Material, and where it belongs.

     Glass is the navigation and temporary layer: the bar, the sheets, the
     things that sit above what you are reading. It was on nine content
     elements too, which is the one thing the guidance is emphatic about not
     doing, because a material meant to draw attention to content underneath
     cannot do that when the content is made of it as well.

     Content keeps its elevation, since that is hierarchy rather than
     decoration. It just stops being see through.
     ===================================================================== */

  /* Refraction was attempted here and removed with the glass material.
     Surfaces separate by value now. */

  .glass, .onboard{ position:relative; }
  .glass, .sheet, .onboard{
    background:var(--surface);
    border:1px solid transparent;
    box-shadow:var(--shadow-3);
    transition:background var(--dur-base) var(--ease);
  }
  .sheet, .onboard{ box-shadow:var(--shadow-4); }
  

  /* The highlight. It travels across the surface as the surface moves through
     the world, which is the difference between glass and a blurred rectangle. */
  

  /* Thickness. Over nothing the surface is nearly clear; once content is
     passing behind it, it thickens enough to stay legible. Driven from script
     rather than guessed, because only the page knows what is under there. */
  /* Solid. This was the last of the glass: a color-mix that left the tab bar
     30% transparent, so content scrolled visibly through it and the bar read
     as half-there. A navigation bar is either present or it is not. */
  #app nav{
    background:var(--surface-solid);
    transition:background var(--dur-base) var(--ease);
  }

  /* content: solid, elevated, legible */
  #app main .tcard, #app main .review, #app main .goal, #app main .ready,
  #app main .load, #app main .insight, #app main .empty, #app main .taskrow,
  #app main .cls, #app main .goal-empty, #app main .home{
    background:var(--surface);
    border:1px solid var(--line);
  }
  #app main .taskrow, #app main .cls{ }

  /* the one thing that matters sits highest */
  #app main .tcard{ }

  /* Kept only on the sheets, where the material is real. On a solid card it
     was a gradient pretending to be a reflection. */


  /* buttons compress rather than bounce, and light moves across them */

  /* navigation floats free of the page -- mobile only. Unscoped, this used to
     win the cascade on desktop too (same #app nav / #app header selectors as
     the >=880px rail), stomping the rail's top padding and solid background
     and causing the fixed header to overlap the first nav items. */
  @media (max-width: 879px){
    /* A bar, not an island. This rule used to round the nav to a 999px pill
       and float it with margins, which overrode the prompt-2 fix 700 lines
       above it purely by coming later. flex-direction is restated because a
       leaked desktop rule would otherwise stack the tabs vertically, and this
       is the rule that has to win on a phone. */
    #app nav{
      position:relative;
      z-index:var(--z-nav);
      flex-direction:row;
      width:auto; order:0;
      background:var(--surface-solid);
      border:none; border-top:1px solid var(--line);
      border-radius:0;
      margin:0;
      padding:var(--space-2) var(--space-4) max(var(--space-2), var(--safe-bottom));
    }
    #app nav button{ border-radius:var(--r-control); transition:background var(--dur-base) var(--ease), color .25s ease; }
    /* Said two ways on a phone: the label fills in and the icon takes the
       accent. There is no room for the rail's edge rule down here. */
    #app nav button.on{ color:var(--ink); font-weight:var(--fw-hi); background:var(--surface-2); }
    #app nav button.on svg{ color:var(--accent); }

    #app header{
      background:var(--ground);
    }
  }
  .coins{ background:var(--surface-2); border:1px solid var(--line); color:var(--ink-soft); }
  .coin-dot{ background:var(--accent); }

  /* nothing pops in: it settles */
  @keyframes settle{
    from{ opacity:0; transform:translateY(14px) scale(.985); }
    to{ opacity:1; transform:none; }
  }
  #app main > *{ animation:settle var(--dur-base) var(--ease) both; }
  #app main > *:nth-child(2){ animation-delay:.04s; }
  #app main > *:nth-child(3){ animation-delay:.08s; }
  #app main > *:nth-child(4){ animation-delay:.12s; }
  @media (prefers-reduced-motion:reduce){
    #app main > *{ animation:none; }
  }

  /* ---- when your day starts and ends ---- */
  .daybtn{ display:flex; align-items:center; gap:var(--space-3); width:100%; padding:var(--space-3) var(--space-4);
    border-radius:var(--r-control); margin-bottom:var(--space-4); text-align:left;
    background:var(--surface); border:1px solid var(--line);
    font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink);
    transition:transform var(--dur-base) var(--ease); }
  .daybtn svg{ width:19px; height:19px; color:var(--ink-soft); flex-shrink:0; }
  .daybtn.up svg{ color:var(--ink-soft); }
  .daybtn-sub{ margin-left:auto; font-size:var(--fs-2); font-weight:var(--fw-med); color:var(--ink-mute); }
  .daybtn:active{ transform:scale(.99); }

  /* ---- where you live ---- */
  .home{ background:var(--surface); border:1px solid var(--line);
    border-radius:var(--r-card); padding:var(--space-4); margin:var(--space-4) 0 var(--space-5); }
  .home-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-3); margin-bottom:var(--space-3); }
  .home-name{ font-size:var(--fs-4); font-weight:var(--fw-hi); letter-spacing:-0.02em; }
  .home-sub{ font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-1); }
  .home-step{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.06em; color:var(--ink-soft);
    background:var(--surface-2); padding:var(--space-1) var(--space-2); border-radius:var(--r-pill); white-space:nowrap; }
  .home-note{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.55; margin-top:var(--space-3); }
  .home-note b{ color:var(--ink-soft); font-weight:var(--fw-hi); }
  .shop-next{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.6; margin-top:var(--space-3);
    padding:var(--space-3) var(--space-4); border-radius:var(--r-control);
    background:var(--surface-2); border:1px solid var(--line); }
  .shop-next b{ color:var(--ink); font-weight:var(--fw-hi); }
  .shop-later{ font-size:var(--fs-1); color:var(--ink-mute); margin-top:var(--space-2); }

  /* ---- sites the extension holds shut ---- */
  .sites{ display:flex; flex-wrap:wrap; gap:var(--space-2); margin-top:var(--space-3); }
  .site-chip{ display:inline-flex; align-items:center; gap:var(--space-2); font-size:var(--fs-2); font-weight:var(--fw-med);
    padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius:var(--r-pill); background:var(--surface);
    border:1px solid var(--line); color:var(--ink); }
  /* Nineteen pixels is a target you miss. The circle stays small because the
     chip is small, but the area that answers a finger does not have to match
     what is drawn. */
  .site-chip button{ width:19px; height:19px; border-radius:50%; display:grid; place-items:center;
    color:var(--ink-mute); background:none; flex-shrink:0; position:relative; }
  .site-chip button::after{
    content:""; position:absolute; inset:-11px; border-radius:50%;
  }
  .site-chip button svg{ width:10px; height:10px; }
  .site-chip button:active{ background:var(--surface-2); color:var(--danger); }
  .site-sugg{ display:flex; flex-wrap:wrap; gap:var(--space-1); margin-top:var(--space-2); }
  .site-sugg button{ font-size:var(--fs-1); font-weight:var(--fw-med); padding:var(--space-1) var(--space-3); border-radius:var(--r-pill);
    background:none; border:1px dashed var(--line); color:var(--ink-mute); }
  .site-sugg button:active{ border-style:solid; color:var(--ink-soft); border-color:var(--line); }

  /* ---- rows the markup asks for that were never styled ----
     Each of these was used in a template while its rule either never existed
     or was removed as unused before the markup caught up. */
  

  .skill{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) 0; }
  .skill + .skill{ border-top:1px solid var(--line); }
  .skill .sk-nm{ font-size:var(--fs-3); font-weight:var(--fw-med); min-width:84px; flex-shrink:0; }
  .skill .bar{ flex:1; }
  .skill .sk-lv{ font-size:var(--fs-2); color:var(--ink-mute); font-variant-numeric:tabular-nums;
    flex-shrink:0; min-width:34px; text-align:right; }

  .score{ display:flex; flex-direction:column; gap:var(--space-2); padding:var(--space-3) 0; }
  .score + .score{ border-top:1px solid var(--line); }
  .score .sc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-2); }
  .score .sc-nm{ font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .score .sc-lbl{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-soft); }
  .score .bar{ height:8px; margin-top:var(--space-1); }
  .score .sc-top{ align-items:flex-end; }

  /* The number is the answer, and it was set two points larger than the word
     beside it. That made the label almost as loud as the thing it labels. */
  .score .sc-val{ font-size:var(--fs-6); font-weight:var(--fw-hi); letter-spacing:-0.035em;
    line-height:1; color:var(--ink);
    font-variant-numeric:tabular-nums; }
  .score .sc-why{ font-size:var(--fs-2); color:var(--ink-soft); line-height:1.55; }

  .wk-day{ margin-bottom:var(--space-1); }
  .wk-day:last-child{ margin-bottom:0; }

  .authform{ margin:var(--space-3) 0 var(--space-1); }
  .authform input{ width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--r-control);
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    font-size:var(--fs-4); -webkit-appearance:none; }
  .authform input:focus{ outline:none; border-color:var(--line); }
  .authform input::placeholder{ color:var(--ink-mute); }

  /* a link styled as a segmented button, for downloads */
  .segbtn{ display:inline-flex; align-items:center; justify-content:center; flex:1;
    padding:var(--space-3) var(--space-3); border-radius:var(--r-control); font-size:var(--fs-3); font-weight:var(--fw-hi);
    background:var(--surface); border:1px solid var(--line); color:var(--ink);
    text-decoration:none; transition:transform var(--dur-base) var(--ease); }
  .segbtn:active{ transform:scale(.98); }
  .opt.ok{ color:var(--tide); font-weight:var(--fw-hi); }

  /* ---- offline ----
     A state, not an error. Said once at the top, and marked on the few things
     that genuinely cannot happen, so nothing looks alive that is not. */
  .offbar{ display:flex; align-items:flex-start; gap:var(--space-2); font-size:var(--fs-2); line-height:1.5;
    color:var(--danger); background:var(--danger);
    border:1px solid var(--danger); border-radius:var(--r-control);
    padding:var(--space-3) var(--space-3); margin-bottom:var(--space-4); }
  
  .offbar i{ width:8px; height:8px; border-radius:50%; flex-shrink:0; margin-top:var(--space-1);
    background:var(--line);
    animation:offpulse 2.4s ease-in-out infinite; }
  @keyframes offpulse{
    0%,100%{ }
    60%    { }
  }
  @media (prefers-reduced-motion:reduce){ .offbar i{ animation:none; } }

  .dimmed{ opacity:.42; filter:saturate(.35); cursor:default; }
  .netoff{ position:relative; opacity:.42; filter:saturate(.35); }
  .netoff-tag{ position:absolute; inset:auto 0 -15px 0; text-align:center;
    font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.04em; color:var(--ink-mute); }

  /* ---- offline ----
     A state, not an error. It says what still works before it says what does
     not, because almost everything still works. */
  .offbar{ display:flex; align-items:center; gap:var(--space-2); font-size:var(--fs-2); line-height:1.5;
    padding:var(--space-2) var(--space-3); border-radius:var(--r-control); margin-bottom:var(--space-4);
    color:var(--danger); background:var(--danger);
    border:1px solid var(--danger); }
  
  .offbar i{ width:8px; height:8px; border-radius:50%; flex-shrink:0;
    background:var(--line); animation:offpulse 2.4s ease-in-out infinite; }
  @keyframes offpulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
  @media (prefers-reduced-motion:reduce){ .offbar i{ animation:none; } }

  .netoff{ position:relative; opacity:.45; cursor:default; }
  .netoff > *{ pointer-events:none; }
  .netoff-tag{ position:absolute; inset:auto 0 -16px 0; font-size:var(--fs-1); font-weight:var(--fw-hi);
    letter-spacing:.04em; text-transform:uppercase; color:var(--ink-mute); text-align:center; }
  .dimmed{ opacity:.45; filter:saturate(.4); }

  .ob-fine{ font-size:var(--fs-1); color:var(--ink-mute); line-height:1.55;
    margin-top:var(--space-3); text-align:center; }

  /* =====================================================================
     Accessibility fallbacks the material requires.

     Glass is a preference, not a requirement. Three system settings change
     what it should be, and a translucent surface that ignores them is a
     legibility problem rather than a style choice.
     ===================================================================== */

  /* Reduce Transparency: the material becomes frosted, which on the web means
     opaque. Nothing shows through, and nothing moves position. */
  @media (prefers-reduced-transparency: reduce){
    .glass, .sheet, .onboard, #app nav, #app header{
      background:var(--surface);
    }
    .sheet::before, .onboard::before{ display:none; }
    .offbar, .season, .shop-next, .mode-hint{
      background:var(--surface);
    }
  }

  /* Increase Contrast: borders become definite rather than suggested, and the
     softest text steps up to the next level. */
  @media (prefers-contrast: more){
    .glass, .sheet, .onboard, #app nav{ border-width:1.5px; }
    :root, 
    .glass, .sheet, .onboard, #app nav,
    #app main .tcard, #app main .review, #app main .goal, #app main .ready,
    #app main .load, #app main .insight, #app main .empty, #app main .taskrow{
      border-width:1.5px;
    }
    #app nav button.on{
    color:var(--ink);
    background:none;
  }
  }

  /* Forced colours: hand the whole thing over to the system palette rather
     than fighting it with a translucent surface it cannot see through. */
  @media (forced-colors: active){
    .glass, .sheet, .onboard, #app nav, #app header,
    #app main .tcard, #app main .review, #app main .goal, #app main .taskrow{
      background:Canvas; border:1px solid CanvasText; box-shadow:var(--shadow-3);
    }
    .syncdot, .offbar i{ forced-color-adjust:none; }
  }

  /* Where the floating bar meets scrolling content. Without this a line of
     text can sit half behind the glass and read as neither. */
  #app main{ padding-bottom:calc(var(--safe-bottom) + var(--space-7)); }
  #app::after{
    content:""; position:fixed; left:0; right:0; pointer-events:none;
    bottom:0; height:calc(var(--safe-bottom) + 88px); z-index:calc(var(--z-nav) - 1);
    background:var(--ground);
  }
  @media (prefers-reduced-transparency: reduce){
    #app::after{ background:var(--ground); height:calc(var(--safe-bottom) + 76px); }
  }
  @media (min-width: 880px){
    #app::after{ display:none; }        /* the rail is beside content, not over it */
    #app main{ padding-bottom:var(--space-7); }
  }

  /* When motion or transparency is turned down, the surface stops moving and
     settles at its most legible value rather than its prettiest. */
  @media (prefers-reduced-motion:reduce){
    .glass::before, .sheet::before, .onboard::before, #app nav::before{ display:none; }
    .glass, .sheet, .onboard, #app nav{ transition:none; }
  }
  @media (prefers-reduced-transparency: reduce){
    .glass::before, .sheet::before, .onboard::before, #app nav::before{ display:none; }
    .glass::after, .sheet::after, .onboard::after, #app nav::after{ display:none; }
    .glass, .sheet, .onboard, #app nav{ border:1px solid var(--line); }
  }
  @media (forced-colors: active){
    .glass::before, .glass::after, .sheet::before, .sheet::after,
    .onboard::before, .onboard::after, #app nav::before, #app nav::after{ display:none; }
  }

  /* ---- the sound, on the session screen ---- */
  .envbar{ display:flex; align-items:center; gap:var(--space-2); align-self:center;
    padding:var(--space-2) var(--space-2) var(--space-2) var(--space-3); border-radius:var(--r-pill); margin-bottom:var(--space-4);
    background:var(--surface); border:1px solid var(--line); }
  .env-wave{ display:flex; align-items:flex-end; gap:var(--space-1); height:13px; }
  .env-wave i{ width:2.5px; border-radius:var(--r-pill); background:var(--tide);
    animation:envpulse 1.5s ease-in-out infinite; }
  .env-wave i:nth-child(1){ height:60%; animation-delay:0s; }
  .env-wave i:nth-child(2){ height:100%; animation-delay:.22s; }
  .env-wave i:nth-child(3){ height:45%; animation-delay:.44s; }
  @keyframes envpulse{ 0%,100%{ transform:scaleY(.45); } 50%{ transform:scaleY(1); } }
  .env-nm{ font-size:var(--fs-2); font-weight:var(--fw-hi); color:var(--ink-soft); white-space:nowrap; }
  .env-skip{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
    color:var(--ink-mute); background:none; flex-shrink:0; }
  .env-skip svg{ width:14px; height:14px; }
  .env-skip:active{ background:var(--surface); color:var(--ink); }
  @media (prefers-reduced-motion:reduce){ .env-wave i{ animation:none; height:70%; } }
  .envmodes{ width:100%; max-width:280px; margin-bottom:var(--space-4); }
  .envmodes button{ padding:var(--space-2) var(--space-1); font-size:var(--fs-2); }

  .envrow{ display:flex; align-items:center; gap:var(--space-3); width:100%; padding:var(--space-3) var(--space-3);
    border-radius:var(--r-control); text-align:left; margin-bottom:var(--space-1);
    background:var(--surface); border:1px solid transparent; }
  .envrow.on{ border-color:var(--line); background:var(--surface-2); }
  .envrow-nm{ font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .envrow-hint{ font-size:var(--fs-1); color:var(--ink-mute); margin-top:var(--space-1); line-height:1.4; }
  .envrow-tag{ margin-left:auto; font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.05em;
    text-transform:uppercase; padding:var(--space-1) var(--space-2); border-radius:var(--r-pill); flex-shrink:0; }
  .envrow-tag.studied{ background:color-mix(in oklab, var(--tide) 16%, transparent); color:var(--tide); }
  .envrow-tag.untested{ background:var(--surface-2); color:var(--tide); }
  .envvol{ width:100%; margin-top:var(--space-1); accent-color:var(--ink-soft); }
  .opt.ok{ color:var(--tide); }

  /* ---- a routine can have a time, or not ---- */
  .rt-row{ display:flex; align-items:center; gap:var(--space-2); margin-top:var(--space-2); flex-wrap:wrap; }
  .rt-time{ color:var(--ink); font-size:var(--fs-2); padding:var(--space-1) var(--space-2); width:auto; min-width:96px;
    border-radius:var(--r-control); border:1px solid var(--line);
    background:var(--surface); color:var(--ink); font-family:inherit; }
  .rt-bell{ display:inline-flex; align-items:center; gap:var(--space-1); font-size:var(--fs-1); font-weight:var(--fw-hi);
    padding:var(--space-1) var(--space-2); border-radius:var(--r-pill); color:var(--ink-mute);
    background:var(--surface); border:1px solid var(--line); }
  .rt-bell.on{ color:var(--tide); border-color:var(--line); background:var(--surface-2); }
  .rt-bell:disabled{ opacity:.4; }

  /* ---- buddies ---- */
  .bud{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0; }
  .bud + .bud{ border-top:1px solid var(--line); }
  .bud-nm{ flex:1; font-size:var(--fs-3); font-weight:var(--fw-hi); }
  .bud-wait{ font-size:var(--fs-1); color:var(--ink-mute); }

  /* ---- read it if you want it ---- */
  .score{ width:100%; text-align:left; background:none; border:none; cursor:pointer; }
  .score .sc-more{ font-size:var(--fs-1); color:var(--ink-soft); font-weight:var(--fw-hi); margin-top:var(--space-1); display:block; }
  .boost{ display:flex; align-items:center; gap:var(--space-2); width:100%; text-align:left;
    padding:var(--space-3) var(--space-4); border-radius:var(--r-control); margin-bottom:var(--space-2);
    background:var(--surface); border:1px solid var(--line); }
  .boost .bo-t{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink); flex:1; line-height:1.4; }
  .boost .bo-go{ color:var(--ink-mute); flex-shrink:0; }
  .boost:active{ background:var(--surface-2); }
  .detail{ max-width:440px; }
  .det-val{ font-size:var(--fs-numeric); font-weight:var(--fw-hi); letter-spacing:-.04em; line-height:1;
    color:var(--ink); margin:var(--space-1) 0 var(--space-3); font-variant-numeric:tabular-nums; }
  .det-val small{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink-mute); letter-spacing:0; }
  .det-body{ font-size:var(--fs-3); line-height:1.65; color:var(--ink-soft); margin:0; }

  /* A checkbox with a sentence beside it, used where a choice needs explaining
     rather than just naming. The generic input rule strips the native control,
     so the box has to ask for it back. */
  .check{ display:flex; gap:var(--space-3); align-items:flex-start; margin-bottom:var(--space-3);
    font-size:var(--fs-2); line-height:1.55; color:var(--ink-soft); cursor:pointer; }
  .check input[type="checkbox"]{
    width:19px; height:19px; min-width:19px; margin:var(--space-1) 0 0; padding:0;
    flex-shrink:0; accent-color:var(--ink-soft);
    -webkit-appearance:checkbox; appearance:checkbox;
    border:none; border-radius:0; background:none; }

  /* ---- first run: one question, then the answer working ---- */
  .onboard.intro{ max-width:440px; }
  .pain{ display:block; width:100%; text-align:left; padding:var(--space-3) var(--space-4);
    border-radius:var(--r-control); margin-bottom:var(--space-2);
    background:var(--surface); border:1px solid var(--line); }
  .pain:active{ background:var(--surface-2); border-color:var(--line); }
  .pain-t{ display:block; font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink); }
  .pain-s{ display:block; font-size:var(--fs-2); color:var(--ink-mute); line-height:1.5; margin-top:var(--space-1); }

  .ba{ margin:var(--space-4) 0 var(--space-5); }
  .ba-row{ display:flex; align-items:flex-start; gap:var(--space-3); padding:var(--space-3) var(--space-4);
    border-radius:var(--r-control); }
  .ba-row.before{ background:var(--surface); border:1px solid var(--line); }
  .ba-row.after{ background:var(--surface-2); border:1px solid var(--line); }
  .ba-lbl{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.06em; text-transform:uppercase;
    flex-shrink:0; padding-top:var(--space-1); width:74px; }
  .ba-row.before .ba-lbl{ color:var(--ink-mute); }
  .ba-row.after .ba-lbl{ color:var(--ink-soft); }
  .ba-txt{ font-size:var(--fs-3); line-height:1.5; color:var(--ink-soft); }
  .ba-row.after .ba-txt{ color:var(--ink); font-weight:var(--fw-med); }
  .ba-arrow{ display:flex; justify-content:center; padding:var(--space-2) 0; color:var(--ink-mute); }
  .ba-arrow svg{ width:19px; height:19px; }
  @media (prefers-reduced-motion:no-preference){
    .ba-row.after{ animation:baIn var(--dur-base) var(--ease) both .25s; }
    .ba-arrow{ animation:baIn var(--dur-base) var(--ease) both .12s; }
    @keyframes baIn{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }
  }

  /* ---- the question mark ---- */
  .has-help{ display:flex; align-items:center; justify-content:space-between; gap:var(--space-2); }

  .sheet.help{ max-width:440px; }
  .help-b{ font-size:var(--fs-3); line-height:1.6; color:var(--ink-soft); margin:0 0 var(--space-4); }
  .demo{ border-radius:var(--r-control); background:var(--surface);
    border:1px solid var(--line); padding:var(--space-1) var(--space-1); margin-bottom:var(--space-4); }
  .demo-l{ display:flex; align-items:center; gap:var(--space-3); padding:var(--space-2) var(--space-3); font-size:var(--fs-2);
    color:var(--ink-soft); line-height:1.45; }
  .demo-l + .demo-l{ border-top:1px solid var(--line); }
  .demo-l i{ width:20px; height:20px; border-radius:50%; flex-shrink:0; font-style:normal;
    display:grid; place-items:center; font-size:var(--fs-1); font-weight:var(--fw-hi);
    background:var(--surface-2); color:var(--ink-soft); }
  .demo-l:last-child span{ color:var(--ink); font-weight:var(--fw-med); }
  @media (prefers-reduced-motion:no-preference){
    .demo-l{ animation:demoIn var(--dur-base) var(--ease) both; }
    @keyframes demoIn{ from{ opacity:0; transform:translateX(-6px); } to{ opacity:1; transform:none; } }
  }

  /* ---- the guide: a line each, the rest behind a tap ---- */
  .man-e{ padding:var(--space-4) 0; border-bottom:1px solid var(--line); }
  .man-e:last-child{ border-bottom:none; }
  .man-q{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink); margin-bottom:var(--space-1); }
  .man-g{ font-size:var(--fs-2); line-height:1.55; color:var(--ink-soft); }
  .man-more{ font-size:var(--fs-2); line-height:1.6; color:var(--ink-soft); margin-top:var(--space-2);
    padding-left:var(--space-3); border-left:2px solid var(--line); }
  .man-demo{ margin-top:var(--space-2); }

  /* ---- the walkthrough: every feature, on sample data ---- */
  .tdemo{ border-radius:var(--r-control); padding:var(--space-3) var(--space-4); margin:var(--space-4) 0 var(--space-4);
    background:var(--surface); border:1px solid var(--line); text-align:left; }
  .td-cat{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.06em; text-transform:uppercase;
    color:var(--tide); margin-bottom:var(--space-1); }
  .td-task{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink); line-height:1.35; }
  .td-why{ font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-1); line-height:1.5; }
  .td-btn{ margin-top:var(--space-3); padding:var(--space-3); border-radius:var(--r-pill); text-align:center;
    font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--accent-ink);
    background:var(--surface-2); }
  .td-note{ font-size:var(--fs-1); color:var(--ink-mute); line-height:1.5; margin-top:var(--space-3); }
  .td-fire{ display:flex; gap:var(--space-2); align-items:baseline; margin-top:var(--space-2); }
  .td-coin{ font-size:var(--fs-6); font-weight:var(--fw-hi); color:var(--ink-soft); letter-spacing:-.02em; }
  .td-xp{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink-soft); }
  .td-app{ display:flex; justify-content:space-between; align-items:center;
    padding:var(--space-2) 0; font-size:var(--fs-3); color:var(--ink-soft); }
  .td-app + .td-app{ border-top:1px solid var(--line); }
  .td-shut{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.05em; text-transform:uppercase;
    color:var(--danger); }
  .td-said{ font-size:var(--fs-3); font-style:italic; color:var(--ink-soft); line-height:1.5; }
  .td-arrow{ text-align:center; color:var(--ink-mute); font-size:var(--fs-4); padding:var(--space-1) 0; }
  .td-day{ display:flex; gap:var(--space-3); align-items:baseline; padding:var(--space-2) 0; font-size:var(--fs-2);
    color:var(--ink-soft); }
  .td-day + .td-day{ border-top:1px solid var(--line); }
  .td-day b{ width:38px; flex-shrink:0; color:var(--ink); font-size:var(--fs-2); }
  .td-day.gone{ opacity:.45; text-decoration:line-through; }
  .td-row{ display:flex; justify-content:space-between; align-items:baseline;
    padding:var(--space-2) 0; font-size:var(--fs-2); color:var(--ink-soft); }
  .td-row + .td-row{ border-top:1px solid var(--line); }
  .td-row b{ font-size:var(--fs-4); font-weight:var(--fw-hi); color:var(--ink); }
  .td-gold{ color:var(--ink-soft) !important; }
  .td-score{ display:flex; align-items:center; gap:var(--space-2); padding:var(--space-2) 0; font-size:var(--fs-2);
    color:var(--ink-soft); }
  .td-score b{ font-size:var(--fs-5); font-weight:var(--fw-hi); color:var(--ink); width:34px; text-align:right; }
  .td-bar{ flex:1; height:6px; border-radius:var(--r-pill); background:var(--line); overflow:hidden; }
  .td-bar i{ display:block; height:100%; border-radius:var(--r-pill); background:var(--surface-2); }
  .td-hdr{ display:flex; justify-content:space-between; align-items:center;
    font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.06em; text-transform:uppercase;
    color:var(--ink-mute); }
  .td-q{ width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
    color:var(--ink-soft); background:var(--surface-2); border:1px solid var(--line); }
  .td-q svg{ width:14px; height:14px; }
  @media (prefers-reduced-motion:no-preference){
    .td-app, .td-day, .td-score{ animation:tdIn var(--dur-base) var(--ease) both; }
    .td-fire{ animation:tdPop var(--dur-base) var(--ease) both .15s; }
    @keyframes tdIn{ from{ opacity:0; transform:translateX(-7px); } to{ opacity:1; transform:none; } }
    @keyframes tdPop{ from{ opacity:0; transform:scale(.86); } to{ opacity:1; transform:none; } }
  }

  /* ---- planning with someone ---- */
  .planrow{ position:relative; padding:var(--space-3) var(--space-4); border-radius:var(--r-control); margin-bottom:var(--space-2);
    background:var(--surface); border:1px solid var(--line); }
  .planrow.agreed{ border-color:var(--line); background:var(--surface-2); }
  .pl-when{ font-size:var(--fs-1); font-weight:var(--fw-hi); letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-soft); }
  .pl-what{ font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink); margin-top:var(--space-1); }
  .pl-who{ font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-1); line-height:1.45; }
  .pl-x{ position:absolute; top:10px; right:10px; width:26px; height:26px; border-radius:50%;
    display:grid; place-items:center; color:var(--ink-mute); background:none; }
  .field textarea{ width:100%; padding:var(--space-3) var(--space-4); border-radius:var(--r-control);
    background:var(--ground); border:1px solid var(--line); color:var(--ink);
    font-family:inherit; font-size:var(--fs-4); line-height:1.5; resize:vertical; }
  .field textarea::placeholder{ color:var(--ink-mute); }
  .field textarea:focus{ outline:none; border-color:var(--line); }

  /* ---- something is waiting on you ---- */
  .alerts{ margin-bottom:var(--space-4); }
  .alertrow{ display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
    padding:var(--space-3) var(--space-4); border-radius:var(--r-control); margin-bottom:var(--space-2);
    background:var(--surface-2); border:1px solid var(--line); }
  .alertrow:active{ background:var(--surface); }
  .al-ic{ width:34px; height:34px; border-radius:50%; flex-shrink:0; display:grid;
    place-items:center; color:var(--ink-soft); background:var(--surface); }
  .al-ic svg{ width:17px; height:17px; }
  .al-b{ display:block; min-width:0; }
  .al-t{ display:block; font-size:var(--fs-3); font-weight:var(--fw-hi); color:var(--ink); line-height:1.35; }
  .al-s{ display:block; font-size:var(--fs-2); color:var(--ink-mute); margin-top:var(--space-1); }
  .foot-legal{ display:block; width:100%; font-size:var(--fs-1); color:var(--ink-mute); margin-top:var(--space-3); }

  /* The browser paints the calendar and clock glyphs itself, in its own
     near-black. On a dark field that is invisible, so it is inverted rather
     than left to disappear. */
  html[data-theme="dark"] .field input::-webkit-calendar-picker-indicator,
  html[data-theme="dark"] .rt-time::-webkit-calendar-picker-indicator{
    filter:invert(0.85);
  }