/* ===== Family theme tokens (shared with Still / Mellow / Workout Log / Meal Log) =====
     Verbatim values. No colour literal appears below these blocks - every rule
     in this file reads a token, which is what lets one accent move everything. */
  :root{
    --canvas:#f0efec; --surface:#fcfcfb; --surface-quiet:#f6f5f2;
    --ink:#0b0b0b; --ink-muted:#52514e;
    --edge:rgba(11,11,11,0.10); --edge-strong:#c3c2b7;
    --danger:#d03b3b;
    --accent:#c43f0b; --accent-text:#b83c08; --accent-hi:#ca4c0b; --accent-lo:#c43f0b;
    --accent-ink:#ffffff; --accent-wash:rgba(196,63,11,0.10);
    --icon-hi:#c43f0b; --icon-lo:#892c08; --icon-mark:#faf5ec;
    --shadow-card:0 1px 3px rgba(11,11,11,.06), 0 1px 2px rgba(11,11,11,.04);
    --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Sleep Log's own two additions, both deliberately NEUTRAL: the night band
       behind the timeline chart and its hour grid. Neither is a judgement
       colour - nothing in this app is ever drawn in red for being a bad night. */
    --night:rgba(11,11,11,0.05);
    --night-line:rgba(11,11,11,0.13);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --canvas:#0d0d0d; --surface:#1a1a19; --surface-quiet:#242422;
      --ink:#ffffff; --ink-muted:#c3c2b7;
      --edge:rgba(255,255,255,0.10); --edge-strong:#383835;
      --danger:#e66767;
      --accent:#f97b22; --accent-text:var(--accent); --accent-hi:#fb8a2e; --accent-lo:#ef5a11;
      --accent-ink:#241105; --accent-wash:rgba(249,123,34,0.15);
      --shadow-card:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
      --night:rgba(255,255,255,0.05);
      --night-line:rgba(255,255,255,0.13);
    }
  }
  :root[data-theme="dark"]{
    --canvas:#0d0d0d; --surface:#1a1a19; --surface-quiet:#242422;
    --ink:#ffffff; --ink-muted:#c3c2b7;
    --edge:rgba(255,255,255,0.10); --edge-strong:#383835;
    --danger:#e66767;
    --accent:#f97b22; --accent-text:var(--accent); --accent-hi:#fb8a2e; --accent-lo:#ef5a11;
    --accent-ink:#241105; --accent-wash:rgba(249,123,34,0.15);
    --shadow-card:0 1px 3px rgba(0,0,0,.35), 0 1px 2px rgba(0,0,0,.25);
    --night:rgba(255,255,255,0.05);
    --night-line:rgba(255,255,255,0.13);
  }

  /* ===== Accent alternates (verbatim family values, contrast-locked to 4.5:1) ===== */
  html[data-accent="ocean"] {
    --accent: #0b6ea8; --accent-text: #0a5a8a; --accent-hi: #107cb9;
    --accent-lo: #0b6ea8; --accent-ink: #ffffff; --accent-wash: rgba(11,110,168,0.10);
    --icon-hi: #0b6ea8; --icon-lo: #084d76;
  }
  html[data-accent="forest"] {
    --accent: #2a7a3f; --accent-text: #226634; --accent-hi: #2f8545;
    --accent-lo: #2a7a3f; --accent-ink: #ffffff; --accent-wash: rgba(42,122,63,0.10);
    --icon-hi: #2a7a3f; --icon-lo: #1d552c;
  }
  html[data-accent="plum"] {
    --accent: #8a3d8f; --accent-text: #733378; --accent-hi: #a049a5;
    --accent-lo: #8a3d8f; --accent-ink: #ffffff; --accent-wash: rgba(138,61,143,0.10);
    --icon-hi: #8a3d8f; --icon-lo: #612b64;
  }
  html[data-accent="crimson"] {
    --accent: #c02b3f; --accent-text: #a32334; --accent-hi: #d63a4e;
    --accent-lo: #c02b3f; --accent-ink: #ffffff; --accent-wash: rgba(192,43,63,0.10);
    --icon-hi: #c02b3f; --icon-lo: #861e2c;
  }
  html[data-accent="slate"] {
    --accent: #4a5b70; --accent-text: #3c4a5c; --accent-hi: #5a6d85;
    --accent-lo: #4a5b70; --accent-ink: #ffffff; --accent-wash: rgba(74,91,112,0.10);
    --icon-hi: #4a5b70; --icon-lo: #34404e;
  }
  html[data-accent="gold"] {
    --accent: #8a6410; --accent-text: #75540c; --accent-hi: #986e18;
    --accent-lo: #8a6410; --accent-ink: #ffffff; --accent-wash: rgba(138,100,16,0.10);
    --icon-hi: #8a6410; --icon-lo: #61460b;
  }
  html[data-accent="teal"] {
    --accent: #0f7a75; --accent-text: #0c6560; --accent-hi: #12847d;
    --accent-lo: #0f7a75; --accent-ink: #ffffff; --accent-wash: rgba(15,122,117,0.10);
    --icon-hi: #0f7a75; --icon-lo: #0b5552;
  }
  html[data-accent="pink"] {
    --accent: #c3245f; --accent-text: #a51e50; --accent-hi: #d33973;
    --accent-lo: #c3245f; --accent-ink: #ffffff; --accent-wash: rgba(195,36,95,0.10);
    --icon-hi: #c3245f; --icon-lo: #891943;
  }
  html[data-accent="black"] {
    --accent: #111111; --accent-text: #000000; --accent-hi: #2b2b2b;
    --accent-lo: #111111; --accent-ink: #ffffff; --accent-wash: rgba(0,0,0,0.07);
    --icon-hi: #111111; --icon-lo: #0c0c0c;
  }
  /* ⚠ THE SELECTOR BELOW IS :not(...), NOT :where(:not(...)).
     Still ships the :where() form and it is a live bug there - measured in
     this app before it was changed: OS in dark mode, accent set to ocean,
     --accent resolved to #f97b22 (ember) instead of #3aa6e0. :where()
     contributes ZERO specificity, so html[data-accent="ocean"]:where(...)
     scores (0,1,1) and loses to the base dark block's :root:not(...) at
     (0,2,0) - the accent is silently discarded for every user whose phone is
     in dark mode and who has not set the manual toggle, which is the common
     case. Dropping :where() lifts it to (0,2,1) and it wins. Mellow already
     uses this form; do not "tidy" it back. */
  @media (prefers-color-scheme: dark){
    html[data-accent="ocean"]:not([data-theme="light"]) {
      --accent: #3aa6e0; --accent-text: var(--accent); --accent-hi: #4fb3e8;
      --accent-lo: #2b93cc; --accent-ink: #04222f; --accent-wash: rgba(58,166,224,0.14);
    }
    html[data-accent="forest"]:not([data-theme="light"]) {
      --accent: #54b96e; --accent-text: var(--accent); --accent-hi: #63c67c;
      --accent-lo: #43a55d; --accent-ink: #082014; --accent-wash: rgba(84,185,110,0.14);
    }
    html[data-accent="plum"]:not([data-theme="light"]) {
      --accent: #c176c6; --accent-text: var(--accent); --accent-hi: #cd88d1;
      --accent-lo: #ac63b1; --accent-ink: #1d0b1c; --accent-wash: rgba(193,118,198,0.14);
    }
    html[data-accent="crimson"]:not([data-theme="light"]) {
      --accent: #ef6274; --accent-text: var(--accent); --accent-hi: #f57383;
      --accent-lo: #e04f62; --accent-ink: #2e0810; --accent-wash: rgba(239,98,116,0.14);
    }
    html[data-accent="slate"]:not([data-theme="light"]) {
      --accent: #8ea4bf; --accent-text: var(--accent); --accent-hi: #9db1c9;
      --accent-lo: #7d94b1; --accent-ink: #111820; --accent-wash: rgba(142,164,191,0.14);
    }
    html[data-accent="gold"]:not([data-theme="light"]) {
      --accent: #d9a63c; --accent-text: var(--accent); --accent-hi: #e3b451;
      --accent-lo: #c8952f; --accent-ink: #241a04; --accent-wash: rgba(217,166,60,0.14);
    }
    html[data-accent="teal"]:not([data-theme="light"]) {
      --accent: #3fbdb4; --accent-text: var(--accent); --accent-hi: #52c9c0;
      --accent-lo: #33a9a1; --accent-ink: #04231f; --accent-wash: rgba(63,189,180,0.14);
    }
    html[data-accent="pink"]:not([data-theme="light"]) {
      --accent: #f07aa6; --accent-text: var(--accent); --accent-hi: #f58cb4;
      --accent-lo: #dd6894; --accent-ink: #2e0a1a; --accent-wash: rgba(240,122,166,0.14);
    }
    html[data-accent="black"]:not([data-theme="light"]) {
      --accent: #f2f2ef; --accent-text: var(--accent); --accent-hi: #ffffff;
      --accent-lo: #e2e2de; --accent-ink: #141413; --accent-wash: rgba(242,242,239,0.14);
    }
  }
  html[data-theme="dark"][data-accent="ocean"] {
    --accent: #3aa6e0; --accent-text: var(--accent); --accent-hi: #4fb3e8;
    --accent-lo: #2b93cc; --accent-ink: #04222f; --accent-wash: rgba(58,166,224,0.14);
  }
  html[data-theme="dark"][data-accent="forest"] {
    --accent: #54b96e; --accent-text: var(--accent); --accent-hi: #63c67c;
    --accent-lo: #43a55d; --accent-ink: #082014; --accent-wash: rgba(84,185,110,0.14);
  }
  html[data-theme="dark"][data-accent="plum"] {
    --accent: #c176c6; --accent-text: var(--accent); --accent-hi: #cd88d1;
    --accent-lo: #ac63b1; --accent-ink: #1d0b1c; --accent-wash: rgba(193,118,198,0.14);
  }
  html[data-theme="dark"][data-accent="crimson"] {
    --accent: #ef6274; --accent-text: var(--accent); --accent-hi: #f57383;
    --accent-lo: #e04f62; --accent-ink: #2e0810; --accent-wash: rgba(239,98,116,0.14);
  }
  html[data-theme="dark"][data-accent="slate"] {
    --accent: #8ea4bf; --accent-text: var(--accent); --accent-hi: #9db1c9;
    --accent-lo: #7d94b1; --accent-ink: #111820; --accent-wash: rgba(142,164,191,0.14);
  }
  html[data-theme="dark"][data-accent="gold"] {
    --accent: #d9a63c; --accent-text: var(--accent); --accent-hi: #e3b451;
    --accent-lo: #c8952f; --accent-ink: #241a04; --accent-wash: rgba(217,166,60,0.14);
  }
  html[data-theme="dark"][data-accent="teal"] {
    --accent: #3fbdb4; --accent-text: var(--accent); --accent-hi: #52c9c0;
    --accent-lo: #33a9a1; --accent-ink: #04231f; --accent-wash: rgba(63,189,180,0.14);
  }
  html[data-theme="dark"][data-accent="pink"] {
    --accent: #f07aa6; --accent-text: var(--accent); --accent-hi: #f58cb4;
    --accent-lo: #dd6894; --accent-ink: #2e0a1a; --accent-wash: rgba(240,122,166,0.14);
  }
  html[data-theme="dark"][data-accent="black"] {
    --accent: #f2f2ef; --accent-text: var(--accent); --accent-hi: #ffffff;
    --accent-lo: #e2e2de; --accent-ink: #141413; --accent-wash: rgba(242,242,239,0.14);
  }

  /* ===== Shell ===== */
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;background:var(--canvas);color:var(--ink);font-family:var(--font-ui);
    -webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;}
  /* overflow-x stated explicitly: an overflow-y:auto scroller computes
     overflow-x to auto as well, and one over-wide row then makes the whole
     page drag sideways on a 375pt phone. Learned on Workout Log; defended
     here before it can happen. Label+control rows also wrap, same reason. */
  body{min-height:100vh; overflow-x:hidden;}
  #shell{max-width:480px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;}

  .screen{display:none;flex:1;flex-direction:column;padding:16px 20px 24px;overflow-x:hidden;}
  .screen.active{display:flex;animation:screen-in .3s cubic-bezier(.22,1,.36,1);}
  @keyframes screen-in{ from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:none;} }
  /* Room for the fixed tab bar plus the home indicator. */
  .screen.tabbed{padding-bottom:calc(76px + env(safe-area-inset-bottom));}

  h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;}
  p{margin:0;}

  .topbar{display:flex;align-items:center;justify-content:space-between;gap:8px;
    margin-bottom:14px;min-height:34px;flex-wrap:wrap;
    padding-top:max(4px, env(safe-area-inset-top));}
  .iconbtn{background:none;border:none;color:var(--ink-muted);font-size:20px;line-height:1;padding:6px;
    cursor:pointer;border-radius:10px;font-family:inherit;}
  .iconbtn:hover{background:var(--surface-quiet);}

  .card{background:var(--surface);border:1px solid var(--edge);border-radius:16px;padding:16px;
    box-shadow:var(--shadow-card);}
  .card + .card{margin-top:10px;}
  .card-quiet{background:var(--surface-quiet);box-shadow:none;}

  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    border:none;border-radius:14px;padding:14px 18px;font-size:16px;font-weight:600;
    cursor:pointer;width:100%;font-family:inherit;
    transition:transform .12s ease, box-shadow .12s ease, opacity .12s ease;}
  .btn:active{transform:scale(.97);}
  .btn-primary{background:linear-gradient(180deg,var(--accent-hi),var(--accent-lo));color:var(--accent-ink);
    box-shadow:0 2px 8px var(--accent-wash);}
  .btn-quiet{background:var(--surface-quiet);color:var(--ink);border:1px solid var(--edge);}
  .btn-ghost{background:none;color:var(--accent-text);padding:10px;}
  .btn-danger{background:none;color:var(--danger);padding:10px;}
  .btn-row{display:flex;gap:10px;}
  .btn-row .btn{flex:1;min-width:0;}
  .btn-sm{padding:9px 14px;font-size:14px;width:auto;border-radius:11px;}

  .tag{display:inline-block;font-size:12px;font-weight:600;color:var(--accent-text);
    background:var(--accent-wash);border-radius:100px;padding:3px 10px;}
  .muted{color:var(--ink-muted);font-size:14px;}
  .tiny{font-size:12.5px;color:var(--ink-muted);line-height:1.5;}
  .sectionlbl{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-muted);margin:18px 0 6px;}
  .sectionlbl.first{margin-top:2px;}

  .statrow{display:flex;gap:8px;}
  .stat{flex:1;text-align:center;min-width:0;}
  .stat .num{font-size:22px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;}
  .stat .num small{font-size:13px;font-weight:600;color:var(--ink-muted);letter-spacing:0;}
  .stat .lbl{font-size:11.5px;color:var(--ink-muted);margin-top:1px;line-height:1.25;}
  /* A figure that has not earned itself yet renders as a dash - never as a
     zero, never as a small number with a caveat attached. */
  .stat .num.empty{color:var(--edge-strong);}

  .chiprow{display:flex;flex-wrap:wrap;gap:8px;}
  .chip{border:1px solid var(--edge-strong);background:var(--surface);border-radius:100px;
    padding:9px 14px;font-size:14.5px;font-weight:600;cursor:pointer;color:var(--ink);font-family:inherit;
    transition:transform .12s ease, background .15s ease, border-color .15s ease;}
  .chip:active{transform:scale(.95);}
  .chip.selected{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);}

  /* ===== Tab bar ===== */
  #tabbar{position:fixed;left:0;right:0;bottom:0;z-index:60;
    background:var(--surface);border-top:1px solid var(--edge);
    padding-bottom:env(safe-area-inset-bottom);display:flex;}
  #tabbar .tabwrap{max-width:480px;margin:0 auto;width:100%;display:flex;}
  .tabbtn{flex:1;background:none;border:none;padding:9px 4px 8px;cursor:pointer;font-family:inherit;
    display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--ink-muted);
    transition:color .15s ease;min-width:0;}
  .tabbtn .tabico{width:23px;height:23px;display:block;fill:none;stroke:currentColor;
    stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
  .tabbtn .tablbl{font-size:11px;font-weight:600;letter-spacing:-.01em;}
  .tabbtn.active{color:var(--accent-text);}
  html.no-tabs #tabbar{display:none;}

  /* ===== Rows / fields ===== */
  .row{display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:13px 0;border-bottom:1px solid var(--edge);flex-wrap:wrap;}
  .row:last-child{border-bottom:none;}
  .row .rlabel{font-size:15px;font-weight:600;}
  .row .rhint{font-size:12.5px;color:var(--ink-muted);margin-top:2px;line-height:1.4;}
  .row .rleft{min-width:0;flex:1;}

  input[type="time"], input[type="date"], input[type="number"], select, textarea{
    font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface-quiet);
    border:1px solid var(--edge-strong);border-radius:11px;padding:9px 11px;
    -webkit-appearance:none;appearance:none;max-width:100%;}
  input[type="time"]{min-width:106px;text-align:center;font-variant-numeric:tabular-nums;}
  textarea{width:100%;resize:vertical;min-height:64px;font-size:15px;line-height:1.45;}
  input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible{
    outline:2px solid var(--accent);outline-offset:2px;}

  /* A stepper - two big targets and a number, which beats a number keyboard
     for a value that moves in fives at seven in the morning. */
  .stepper{display:flex;align-items:center;gap:2px;background:var(--surface-quiet);
    border:1px solid var(--edge-strong);border-radius:11px;overflow:hidden;}
  .stepper button{width:40px;height:40px;font-size:19px;font-weight:600;color:var(--ink);
    cursor:pointer;font-family:inherit;background:none;border:none;line-height:1;}
  .stepper button:active{background:var(--accent-wash);}
  .stepper .sval{min-width:66px;text-align:center;font-size:15px;font-weight:600;
    font-variant-numeric:tabular-nums;}

  .segmented{display:flex;background:var(--surface-quiet);border-radius:12px;padding:3px;}
  .segmented button{flex:1;border:none;background:none;padding:8px 6px;border-radius:9px;font-size:14px;
    font-weight:600;color:var(--ink-muted);cursor:pointer;font-family:inherit;min-width:0;}
  .segmented button.active{background:var(--surface);color:var(--ink);box-shadow:0 1px 2px var(--edge);}

  /* ===== The rating scale (quality / mood) ===== */
  .scalerow{display:flex;gap:7px;}
  .scalebtn{flex:1;border:1px solid var(--edge-strong);background:var(--surface);border-radius:12px;
    padding:9px 2px 7px;cursor:pointer;font-family:inherit;color:var(--ink);min-width:0;
    display:flex;flex-direction:column;align-items:center;gap:2px;
    transition:transform .12s ease, background .15s ease, border-color .15s ease;}
  .scalebtn:active{transform:scale(.94);}
  .scalebtn .sface{font-size:21px;line-height:1.1;}
  .scalebtn .slbl{font-size:10.5px;font-weight:600;color:var(--ink-muted);text-align:center;
    line-height:1.15;}
  .scalebtn.selected{border-color:var(--accent);background:var(--accent-wash);}
  .scalebtn.selected .slbl{color:var(--accent-text);}

  /* ===== The night timeline - the signature chart =====
     One row per night, drawn on a shared clock so bedtimes line up
     vertically. A regular sleeper's bars stack into a straight column; a
     scattered one's zig-zag. That shape IS the insight, and it reads without
     a single number attached to it. */
  .timeline{margin-top:4px;}
  .tl-axis{position:relative;height:14px;margin-left:46px;margin-bottom:3px;}
  .tl-axis span{position:absolute;top:0;font-size:10.5px;color:var(--ink-muted);
    transform:translateX(-50%);white-space:nowrap;}
  .tl-row{display:flex;align-items:center;gap:0;height:23px;}
  .tl-day{width:46px;flex:0 0 46px;font-size:11px;color:var(--ink-muted);font-weight:600;
    white-space:nowrap;overflow:hidden;}
  .tl-track{position:relative;flex:1;height:15px;background:var(--night);border-radius:5px;
    overflow:hidden;min-width:0;}
  .tl-grid{position:absolute;top:0;bottom:0;width:1px;background:var(--night-line);}
  .tl-bar{position:absolute;top:2px;bottom:2px;background:var(--accent);border-radius:3px;opacity:.92;}
  /* In bed but not asleep - the same bar hollowed out, so latency and
     night-waking show as gaps rather than as a number somewhere else. */
  .tl-gap{position:absolute;top:2px;bottom:2px;background:var(--night);}
  .tl-nap{position:absolute;top:5px;bottom:5px;background:var(--accent);opacity:.42;border-radius:2px;}
  .tl-row.empty .tl-track{opacity:.55;}
  .tl-none{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    font-size:10px;color:var(--ink-muted);white-space:nowrap;}

  /* ===== Duration bars (Trends) ===== */
  .barwrap{position:relative;}
  .bars{display:flex;align-items:flex-end;gap:5px;height:118px;margin-top:6px;position:relative;}
  .barcol{flex:1;display:flex;flex-direction:column;justify-content:flex-end;height:100%;min-width:0;}
  .bar{background:var(--accent);border-radius:4px 4px 0 0;min-height:3px;opacity:.9;}
  /* An unlogged night is not a zero. It draws as a hairline in the hairline
     colour, which reads as "no reading" rather than as a bar at the floor. */
  .bar.none{background:var(--edge);min-height:3px;opacity:1;}
  .barlbls{display:flex;gap:5px;margin-top:5px;}
  .barlbl{flex:1;text-align:center;font-size:10px;color:var(--ink-muted);min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  /* The target band sits BEHIND the bars as a quiet stripe, never as a line a
     bar can be seen to fall short of. */
  .targetband{position:absolute;left:0;right:0;background:var(--accent-wash);pointer-events:none;
    border-radius:3px;}

  /* ===== Empty states ===== */
  .empty{text-align:center;padding:26px 14px;}
  .empty .eico{font-size:30px;opacity:.5;}
  .empty .etitle{font-size:15.5px;font-weight:700;margin-top:8px;}
  .empty .etext{font-size:13.5px;color:var(--ink-muted);margin-top:5px;line-height:1.5;}

  /* ===== Guide ===== */
  .guiderow{display:flex;align-items:center;gap:12px;padding:13px 4px;border-bottom:1px solid var(--edge);
    cursor:pointer;background:none;border-left:none;border-right:none;border-top:none;width:100%;
    text-align:left;font-family:inherit;color:var(--ink);transition:opacity .12s ease;}
  .guiderow:active{opacity:.6;}
  .guiderow:last-child{border-bottom:none;}
  .guiderow .gico{font-size:19px;width:26px;flex:0 0 26px;text-align:center;}
  .guiderow .gname{font-weight:600;font-size:14.5px;}
  .guiderow .gtag{font-size:12.5px;color:var(--ink-muted);margin-top:2px;line-height:1.35;}
  .guiderow .gchev{color:var(--edge-strong);font-size:17px;flex:0 0 auto;}

  .notecard{font-size:13px;color:var(--ink-muted);background:var(--surface-quiet);
    border-radius:12px;padding:11px 13px;line-height:1.5;}
  .notecard strong{color:var(--ink);}
  .notecard + .notecard{margin-top:8px;}

  /* ===== History list ===== */
  .nightrow{display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:12px 4px;border-bottom:1px solid var(--edge);width:100%;background:none;border-left:none;
    border-right:none;border-top:none;font-family:inherit;color:var(--ink);text-align:left;cursor:pointer;}
  .nightrow:active{opacity:.6;}
  .nightrow:last-child{border-bottom:none;}
  .nightrow .ndate{font-weight:600;font-size:14.5px;}
  .nightrow .nmeta{font-size:12.5px;color:var(--ink-muted);margin-top:2px;}
  .nightrow .ndur{font-size:15px;font-weight:700;font-variant-numeric:tabular-nums;flex:0 0 auto;}

  /* ===== Splash ===== */
  #splash{
    position:fixed;inset:0;z-index:200;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:linear-gradient(145deg, var(--icon-hi), var(--icon-lo));
    animation:splash-out 0.35s ease 3s forwards;
  }
  html.no-splash #splash{display:none;}
  @keyframes splash-out{ to{ opacity:0; visibility:hidden; pointer-events:none; } }
  .splash-mark{width:92px;height:92px;overflow:visible;}
  /* The mark is the product: a crescent, and three stars that arrive in
     sequence. Same "one thing lit, the rest recedes" family language as
     Mellow's ranked list and Still's rings, read as a night sky. */
  .splash-moon{fill:var(--icon-mark);opacity:0;transform-origin:46px 46px;
    animation:splash-moon .7s cubic-bezier(.22,1,.36,1) .1s forwards;}
  @keyframes splash-moon{ from{opacity:0;transform:scale(.55) rotate(-25deg);}
                          to{opacity:1;transform:none;} }
  /* Each star settles at its own opacity - one lit, two receding, the same
     1.00 / 0.62 / 0.42 the icon uses. The end value rides on a custom
     property so all three share one keyframe. */
  .splash-star{fill:var(--icon-mark);opacity:0;transform-box:fill-box;transform-origin:center;
    animation:splash-star .45s cubic-bezier(.34,1.56,.64,1) both;}
  .splash-star.s1{--star-op:1;   animation-delay:.62s;}
  .splash-star.s2{--star-op:.62; animation-delay:.80s;}
  .splash-star.s3{--star-op:.42; animation-delay:.98s;}
  @keyframes splash-star{ from{opacity:0;transform:scale(.2);} to{opacity:var(--star-op,.85);transform:none;} }
  .splash-name{margin:14px 0 0;font:700 27px/1.35 var(--font-ui);letter-spacing:-.02em;
    color:var(--icon-mark);animation:splash-rise .45s cubic-bezier(.22,1,.36,1) 1.2s both;}
  /* Full cream, not a dimmed one - the Workout Log contrast finding: at 14.5px
     this is body text for the contrast rules, and cream at 88% over the accent
     sits under the 4.5 line. Size and weight already say it is secondary. */
  .splash-tag{margin:0;font-size:14.5px;color:var(--icon-mark);}
  .splash-tag i{display:inline-block;font-style:normal;
    animation:splash-rise .4s cubic-bezier(.22,1,.36,1) both;}
  /* One word per beat, on the same clock as Workout Log, Mellow and Meal Log,
     so the five cards keep time with each other. */
  .splash-tag i:nth-child(1){animation-delay:1.6s;}
  .splash-tag i:nth-child(2){animation-delay:1.95s;}
  .splash-tag i:nth-child(3){animation-delay:2.3s;}
  @keyframes splash-rise{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} }

  /* ===== Sheets ===== */
  .sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:90;
    display:none;align-items:flex-end;justify-content:center;}
  .sheet-overlay.open{display:flex;}
  .sheet{background:var(--surface);width:100%;max-width:480px;border-radius:20px 20px 0 0;
    padding:18px 20px calc(20px + env(safe-area-inset-bottom));max-height:86vh;
    overflow-y:auto;overflow-x:hidden;}
  .sheet-handle{width:36px;height:4px;background:var(--edge-strong);border-radius:100px;margin:0 auto 14px;}
  .sheet h3{font-size:16px;margin-bottom:10px;}
  .sheet h3.spaced{margin-top:20px;}
  .swatchrow{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:6px;}
  .swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;
    padding:0;position:relative;}
  .swatch[aria-pressed="true"]{border-color:var(--ink);}
  .swatch[aria-pressed="true"]::after{content:'\2713';position:absolute;inset:0;display:flex;
    align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700;
    text-shadow:0 1px 2px rgba(0,0,0,.4);}

  /* ===== Toast ===== */
  #toast{position:fixed;left:50%;transform:translateX(-50%) translateY(14px);
    bottom:calc(84px + env(safe-area-inset-bottom));z-index:120;
    background:var(--ink);color:var(--canvas);font-size:14px;font-weight:600;
    padding:10px 16px;border-radius:100px;opacity:0;pointer-events:none;
    transition:opacity .2s ease, transform .2s ease;max-width:88vw;text-align:center;}
  #toast.show{opacity:.96;transform:translateX(-50%) translateY(0);}

  @media (prefers-reduced-motion: reduce){
    #splash *{animation:none !important;opacity:1 !important;transform:none !important;}
    .screen.active{animation:none !important;}
    *{transition-duration:.01ms !important;}
  }