/* ==========================================================================
   you² — dark liquid glass. This sheet IS you²'s design system.

   One primitive: a translucent panel over a slowly drifting coloured backdrop,
   with a hairline stroke, an inset top highlight and a soft shadow. Everything
   else — sidebar, cards, widgets, rows, chips, tooltips, the search palette —
   is that primitive at a different size.

   It is loaded as `<link id="skin">` and is swapped out wholesale when the
   shell enters the Nutrition app, which wears GoodFood's own design system
   instead (vendor/goodfood.css + skins/goodfood-shell.css). In production that
   switch is a page load; here it is a stylesheet swap, which is the honest
   equivalent. Nothing in this file may leak into GoodFood and nothing of
   GoodFood's may leak in here.

   The token *names* are GoodFood's (--surface, --line, --muted, --r-card, …)
   so one set of view templates can be styled by either sheet. The *values*
   here are glass.

   Dark is the design. Light exists so the toggle is not a lie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens.
   -------------------------------------------------------------------------- */
:root{
  --font:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --r-card:16px;
  --r-entry:12px;
  --r-tile:11px;
  --r-input:10px;

  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:.15s;
  --t-mid:.28s;
  --t-slow:.55s;
}

:root,html[data-theme="dark"]{
  color-scheme:dark;
  /* the field the glass refracts */
  --paper:#07090f;
  --blob-a:rgba(57,135,229,.28);
  --blob-b:rgba(144,133,233,.22);
  --blob-c:rgba(25,158,112,.18);
  /* the panel itself */
  --surface:rgba(255,255,255,.055);
  --surface-2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.10);
  --line-strong:rgba(255,255,255,.22);
  --hi:rgba(255,255,255,.14);          /* the inset top highlight */
  --blur:blur(20px) saturate(140%);
  --shadow-float:0 18px 50px rgba(0,0,0,.45);
  --scrim:rgba(4,6,11,.55);
  /* type */
  --ink:#f2f4f8;
  --muted:rgba(242,244,248,.68);
  --faint:rgba(242,244,248,.44);
  --ghost:rgba(242,244,248,.30);
  /* severity */
  --good:#4ec98a;      --good-soft:rgba(78,201,138,.15);
  --warn:#f0b64a;      --warn-soft:rgba(240,182,74,.15);
  --danger:#ef7a6b;    --danger-soft:rgba(239,122,107,.15);
  --over:#f0b64a;
}

html[data-theme="light"]{
  color-scheme:light;
  --paper:#eef1f7;
  --blob-a:rgba(42,120,214,.20);
  --blob-b:rgba(74,58,167,.12);
  --blob-c:rgba(27,175,122,.14);
  --surface:rgba(255,255,255,.62);
  --surface-2:rgba(255,255,255,.82);
  --line:rgba(20,30,60,.10);
  --line-strong:rgba(20,30,60,.22);
  --hi:rgba(255,255,255,.95);
  --blur:blur(20px) saturate(150%);
  --shadow-float:0 12px 34px rgba(30,40,80,.10);
  --scrim:rgba(20,30,60,.34);
  --ink:#0d1220;
  --muted:rgba(13,18,32,.68);
  --faint:rgba(13,18,32,.46);
  --ghost:rgba(13,18,32,.32);
  --good:#12855c;      --good-soft:rgba(18,133,92,.13);
  --warn:#9a6a00;      --warn-soft:rgba(154,106,0,.14);
  --danger:#b8402f;    --danger-soft:rgba(184,64,47,.12);
  --over:#9a6a00;
}

/* --------------------------------------------------------------------------
   2. Reset and base.
   -------------------------------------------------------------------------- */
*{box-sizing:border-box;margin:0;padding:0;}
/* class rules out-specify the UA's [hidden] rule, which otherwise leaves
   "hidden" containers taking up layout */
[hidden]{display:none !important;}
html,body{background:var(--paper);color:var(--ink);min-height:100%;}
body{
  font-family:var(--font);font-size:13.5px;line-height:1.5;
  letter-spacing:-.011em;-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.02em;}
a{color:var(--accent);}
button,input,select,textarea{font:inherit;color:inherit;}
::selection{background:var(--accent-soft);color:var(--ink);}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px;}
button:focus-visible,a:focus-visible{outline-offset:3px;}
/* colours only animate while the theme is actually switching, so nothing
   cross-fades on first paint */
html.theming,html.theming *{
  transition:background-color .32s var(--ease),border-color .32s var(--ease),
             color .32s var(--ease),box-shadow .32s var(--ease) !important;
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}
.scroll-y{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;}
.scroll-y::-webkit-scrollbar{width:9px;}
.scroll-y::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:999px;
  border:3px solid transparent;background-clip:content-box;}

/* The coloured field the glass refracts. One very slow drift, nothing else.
   Fixed and behind everything, so scrolling never moves it. */
.blobs{position:fixed;inset:-25%;z-index:0;filter:blur(72px);pointer-events:none;}
.blob{position:absolute;border-radius:50%;}
.b1{width:55vw;height:55vw;left:3%;top:-12%;background:var(--blob-a);
  animation:drift 34s ease-in-out infinite alternate;}
.b2{width:46vw;height:46vw;right:-4%;top:28%;background:var(--blob-b);
  animation:drift 42s ease-in-out infinite alternate-reverse;}
.b3{width:42vw;height:42vw;left:34%;bottom:-14%;background:var(--blob-c);
  animation:drift 38s ease-in-out infinite alternate;}
@keyframes drift{from{transform:translate(0,0);}to{transform:translate(5vw,3vh);}}

/* --------------------------------------------------------------------------
   3. The glass primitive.

   Every panel in the app is this rule at a different size. The list is
   explicit rather than a utility class so a view's markup never has to know
   it is being rendered in glass — the same template renders in GoodFood's
   flat surfaces when that sheet is the one loaded.
   -------------------------------------------------------------------------- */
.card,.widget,.prow,.stat,.tile,.sheet,.palette-box,.tip,.wday,
.notice,.stub-note,.pair-reading{
  background:var(--surface);
  backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--hi), var(--shadow-float);
}
.stat,.tile,.wday{border-radius:var(--r-tile);box-shadow:inset 0 1px 0 var(--hi);}
.pair-reading{border-radius:var(--r-entry);box-shadow:inset 0 1px 0 var(--hi);}

/* --------------------------------------------------------------------------
   4. The components the views ask for, by GoodFood's names, in glass.
   -------------------------------------------------------------------------- */
.card{padding:17px 18px;}
.card.flush{padding:0;overflow:hidden;}
.card-title{font-size:14.5px;font-weight:600;letter-spacing:-.02em;}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;}
.card-sub{font-size:11.5px;color:var(--faint);margin-top:2px;}
.section-title{font-size:16px;font-weight:700;letter-spacing:-.025em;}
.page-title{font-size:23px;font-weight:700;letter-spacing:-.03em;line-height:1.12;}
.page-sub{font-size:12.5px;color:var(--muted);margin-top:4px;}

/* layout helpers */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start;}
.stack{display:flex;flex-direction:column;gap:14px;}
.row{display:flex;align-items:center;gap:9px;}
.row-wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.spacer{margin-left:auto;}
.split-grid > *,.stack > *{min-width:0;}

/* forms */
.field{
  background:var(--surface-2);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:var(--r-input);
  padding:9px 12px;font-size:13.5px;color:var(--ink);width:100%;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.field::placeholder{color:var(--faint);}
.field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.field.sm{padding:6px 10px;font-size:12.5px;}
.field.compact{padding:8px 11px;font-size:13px;}
.input-row{display:flex;gap:9px;align-items:center;}
.field-label{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:block;margin-bottom:6px;}
.select{
  background:var(--surface-2);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:var(--r-input);
  padding:8px 30px 8px 12px;color:var(--ink);font-size:13px;cursor:pointer;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 15px) calc(50% + 1px), calc(100% - 10px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow);}
.select option{background:#12161f;color:#f2f4f8;}
html[data-theme="light"] .select option{background:#fff;color:#0d1220;}

/* buttons */
.btn{
  font-family:inherit;font-size:13px;font-weight:600;letter-spacing:-.01em;
  border-radius:999px;padding:9px 16px;cursor:pointer;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  white-space:nowrap;line-height:1;text-decoration:none;
  transition:background-color var(--t-fast), color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn:active:not(:disabled){transform:scale(.965);}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn-primary{background:var(--accent);color:var(--on-accent);}
.btn-primary:hover:not(:disabled){filter:brightness(1.08);box-shadow:var(--accent-shine);}
.btn-ghost{
  background:var(--surface);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  color:var(--ink);border-color:var(--line);box-shadow:inset 0 1px 0 var(--hi);
}
.btn-ghost:hover:not(:disabled){background:var(--surface-2);border-color:var(--line-strong);}
.btn-accent{background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line);}
.btn-accent:hover:not(:disabled){filter:brightness(1.12);}
.btn-danger{background:transparent;color:var(--danger);border-color:var(--danger-soft);}
.btn-danger:hover:not(:disabled){background:var(--danger-soft);border-color:var(--danger);}
.btn-sm{padding:6px 12px;font-size:12px;}
.btn-xs{padding:4px 10px;font-size:11px;gap:5px;}
.btn-icon{width:32px;height:32px;padding:0;font-size:14px;flex-shrink:0;}
.btn-block{width:100%;}
.btn-link{
  background:transparent;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--muted);
  display:inline-flex;align-items:center;gap:6px;transition:color var(--t-fast);
}
.btn-link:hover{color:var(--ink);}

/* segmented control */
.segment{
  display:inline-flex;gap:2px;padding:3px;border-radius:999px;flex-wrap:wrap;
  background:var(--surface);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);box-shadow:inset 0 0 0 1px var(--line);
}
.segment-item{
  border:0;background:transparent;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em;
  padding:6px 13px;border-radius:999px;white-space:nowrap;
  transition:color var(--t-fast), background-color var(--t-fast), box-shadow var(--t-fast);
}
.segment-item:hover{color:var(--ink);}
.segment-item[data-active="true"]{
  color:var(--accent-ink);background:var(--accent-soft);
  box-shadow:inset 0 0 0 1px var(--accent-line);
}

/* tiles, stats and bars */
.stat{padding:13px 14px;}
.stat .s-label{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:7px;}
.stat .s-num{font-size:25px;font-weight:700;letter-spacing:-.04em;line-height:1;margin-top:8px;
  font-variant-numeric:tabular-nums;}
.stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px;}
.stat-grid > *{min-width:0;}
.tile{padding:12px 13px;}
.bar-row + .bar-row{margin-top:12px;}
.bar-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:6px;}
.bar-name{font-size:13px;font-weight:500;}
.bar-pct{font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;}
.bar-track{height:6px;border-radius:999px;background:var(--surface-2);overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);}
.bar-fill{display:block;height:100%;border-radius:999px;
  transition:width var(--t-slow) var(--ease-out), background-color var(--t-mid);}
.bar-foot{font-size:10.5px;color:var(--faint);margin-top:4px;font-variant-numeric:tabular-nums;}
.bar-row.dense .bar-name{font-size:12.5px;color:var(--muted);}
.bar-row.dense + .bar-row.dense{margin-top:9px;}

/* status colour utilities */
.c-good{color:var(--good);}     .bg-good{background:var(--good);}
.c-warn{color:var(--warn);}     .bg-warn{background:var(--warn);}
.c-danger{color:var(--danger);} .bg-danger{background:var(--danger);}
.c-over{color:var(--over);}     .bg-over{background:var(--over);}
.c-accent{color:var(--accent-ink);} .bg-accent{background:var(--accent);}
.c-muted{color:var(--muted);}   .c-faint{color:var(--faint);}

/* chips, pills, empties, notices */
.chip-wrap{display:flex;flex-wrap:wrap;gap:7px;}
.chip{
  background:var(--surface);backdrop-filter:var(--blur);
  -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:999px;
  padding:6px 11px;font-size:12.5px;display:inline-flex;align-items:center;gap:8px;
  box-shadow:inset 0 1px 0 var(--hi);
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.chip:hover{border-color:var(--line-strong);}
.chip .c-name{font-weight:600;letter-spacing:-.01em;max-width:230px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chip .c-count{background:var(--surface-2);border:1px solid var(--line);color:var(--muted);
  font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:999px;
  font-variant-numeric:tabular-nums;}
.pill-note{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:500;
  padding:5px 11px;border-radius:999px;}
.pill-note.accent{background:var(--accent-soft);color:var(--accent-ink);
  box-shadow:inset 0 0 0 1px var(--accent-line);}
.pill-note.quiet{background:var(--surface-2);color:var(--muted);
  box-shadow:inset 0 0 0 1px var(--line);}
.empty{text-align:center;padding:28px 18px;color:var(--faint);font-size:13px;}
.empty .e-glyph{font-size:24px;display:block;margin-bottom:9px;opacity:.5;}
.empty .e-hint{font-size:11.5px;color:var(--ghost);margin-top:5px;}
.notice{border-radius:var(--r-entry);padding:13px 15px;font-size:12.5px;
  border-color:var(--warn-soft);background:var(--warn-soft);box-shadow:inset 0 1px 0 var(--hi);}
.notice .n-title{font-weight:600;color:var(--warn);font-size:13px;}
.notice .n-body{color:var(--muted);font-size:11.5px;margin-top:3px;}
.table-scroll{overflow-x:auto;scrollbar-width:thin;}

/* skeletons and motion */
.skel{border-radius:8px;background:var(--surface-2);position:relative;overflow:hidden;}
.skel::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--hi),transparent);
  animation:shimmer 1.3s infinite;}
.skel.line{height:11px;}
.skel.tile{height:104px;border-radius:var(--r-tile);}
@keyframes shimmer{from{transform:translateX(-100%);}to{transform:translateX(100%);}}
@keyframes fade-in{from{opacity:0;}to{opacity:1;}}
@keyframes modal-in{from{opacity:0;transform:translateY(14px) scale(.975);}to{opacity:1;transform:none;}}
@keyframes rise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
.reveal{animation:rise .5s var(--ease-out) both;}
.reveal-1{animation-delay:.03s;} .reveal-2{animation-delay:.09s;}
.reveal-3{animation-delay:.15s;} .reveal-4{animation-delay:.21s;}
.reveal-5{animation-delay:.27s;} .reveal-6{animation-delay:.33s;}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;}
  .blob{animation:none !important;}
}

/* --------------------------------------------------------------------------
   5b. Utility type. Every number is mono and tabular, everywhere.
   -------------------------------------------------------------------------- */
.mono,.num{font-family:var(--mono);font-variant-numeric:tabular-nums;
  font-feature-settings:'tnum' 1;letter-spacing:-.01em;}
.small{font-size:12px;}
.muted{color:var(--muted);}
.faint{color:var(--faint);}
.hide{display:none !important;}

/* --------------------------------------------------------------------------
   4b. The shell frame and the sidebar — the only shared UI. Never a top bar.

   The sidebar is a floating glass panel, not a wall: it sits inside the page
   padding with the backdrop visible around it, which is what makes the whole
   surface read as one sheet of glass over one field of colour.

   Its order is deliberate. We are building you², so you²'s own sections come
   first, directly under the brand; the app switcher is a secondary group below
   a divider. Inside another app the same order holds for that app.
   -------------------------------------------------------------------------- */
.shell{
  position:relative;z-index:1;
  display:flex;align-items:flex-start;gap:14px;padding:14px;min-height:100vh;
}
.sidebar{
  position:sticky;top:14px;flex:0 0 224px;width:224px;
  height:calc(100vh - 28px);
  display:flex;flex-direction:column;gap:14px;
  padding:15px 11px 12px;
  background:var(--surface);
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border:1px solid var(--line);border-radius:var(--r-card);
  box-shadow:inset 0 1px 0 var(--hi), var(--shadow-float);
  overflow-y:auto;scrollbar-width:none;z-index:20;
}
.sidebar::-webkit-scrollbar{display:none;}

.sb-brand{display:flex;align-items:center;gap:10px;padding:2px 6px 0;}
/* the one element in the app with a glow: the identity mark */
.sb-mark{
  width:29px;height:29px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(135deg,var(--accent),color-mix(in srgb,var(--accent) 45%,var(--accent-mix,#9085e9)));
  box-shadow:var(--accent-shine);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--on-accent);letter-spacing:-.03em;
}
.sb-word{font-weight:700;font-size:16px;letter-spacing:-.025em;line-height:1.1;}
.sb-word sup,.sb-item sup{font-size:.68em;top:-.45em;position:relative;}
/* one line or nothing: a wrapped tagline pushes the sidebar out of alignment */
.sb-tag{font-size:10.5px;color:var(--faint);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:150px;}

.sb-group{display:flex;flex-direction:column;gap:2px;}
.sb-label{
  font-size:9.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ghost);padding:0 9px 6px;
}
.sb-item{
  display:flex;align-items:center;gap:9px;width:100%;
  padding:7px 9px;border:1px solid transparent;background:transparent;cursor:pointer;
  border-radius:10px;font-family:inherit;font-size:13px;font-weight:500;
  color:var(--muted);text-align:left;text-decoration:none;letter-spacing:-.012em;
  transition:color var(--t-fast), background-color var(--t-fast),
             border-color var(--t-fast), box-shadow var(--t-fast);
}
.sb-item:hover{color:var(--ink);background:var(--surface);}
.sb-item[aria-current]{
  color:var(--ink);background:var(--surface-2);font-weight:600;
  border-color:var(--line);box-shadow:inset 0 1px 0 var(--hi), var(--accent-shine);
}
.sb-item .sb-dot{
  width:7px;height:7px;border-radius:50%;flex-shrink:0;
  background:var(--sb-dot,var(--faint));
  box-shadow:0 0 8px var(--sb-dot,transparent);
}
.sb-item .sb-key{
  margin-left:auto;font-size:10px;color:var(--ghost);font-family:var(--mono);
  border:1px solid var(--line);border-radius:4px;padding:0 4px;line-height:15px;
}
.sb-item[aria-current] .sb-key{color:var(--muted);border-color:var(--line-strong);}
.sb-item.sb-sub{padding-left:24px;font-size:12.5px;}
.sb-subhead{font-size:12px;font-weight:600;color:var(--ink);
  padding:10px 9px 3px;letter-spacing:-.015em;}
.sb-sep{height:1px;background:var(--line);margin:0 9px;}

.sb-foot{margin-top:auto;display:flex;flex-direction:column;gap:8px;
  padding:11px 3px 0;border-top:1px solid var(--line);}
.sb-foot-row{display:flex;gap:6px;}
.sb-foot .btn{flex:1;}
.sb-note{font-size:10px;color:var(--ghost);padding:0 6px;line-height:1.5;}
.sb-note b{color:var(--faint);font-weight:600;}

a.btn{text-decoration:none;}
.menu-btn{display:none;}

/* --------------------------------------------------------------------------
   5. The one token the component layer does not have.

   The Day timeline tints the hours you were in bed. It is a background band,
   not a status, so it borrows the accent's own soft surface.
   -------------------------------------------------------------------------- */
:root{ --night-band:var(--accent-soft); }

/* --------------------------------------------------------------------------
   6. Stream identity — the one categorical palette.

   A one-accent system cannot colour twelve simultaneous lanes on the Day
   clock, and "gaming" has to be the same colour on the timeline, in the screen
   breakdown and in the legend or it has to be re-learned on every screen. So
   this is a categorical palette, declared once and themed both ways, and it is
   used for stream identity only — never for status, never as decoration.
   -------------------------------------------------------------------------- */
:root{
  --c-productive:#34d399;
  --c-neutral:#6c7a83;
  --c-procrast:#f5c451;
  --c-gaming:#f2726a;
  --c-food:#8ba8f8;
  --c-caffeine:#c99a63;
  --c-alcohol:#e48bb6;
  --c-supp:#2ac0d3;
  --c-exercise:#50c49d;
  --c-hr:#f2726a;
  --c-steps:#9aa8bf;
  --c-co2:#f5c451;
  --c-wake:#3c454d;
  --c-light:#7f9ad1;
  --c-deep:#8ba8f8;
  --c-delta:#8ba8f8;
  --c-sigma:#2ac0d3;
  --c-move:#6c7a83;
  --c-resp:#7fd0b6;
  /* two-series overlays: the first and second line of any pair chart */
  --s1:#8ba8f8;
  --s2:#e0a35f;
}
html[data-theme="light"]{
  --c-productive:#0d9a6c;
  --c-neutral:#7c8a93;
  --c-procrast:#a97a0c;
  --c-gaming:#cf4139;
  --c-food:#4256a8;
  --c-caffeine:#7a4b18;
  --c-alcohol:#a8477f;
  --c-supp:#0c93a3;
  --c-exercise:#0d7a58;
  --c-hr:#cf4139;
  --c-steps:#6b7a94;
  --c-co2:#a97a0c;
  --c-wake:#c9c9c4;
  --c-light:#6d88c2;
  --c-deep:#31408a;
  --c-delta:#4256a8;
  --c-sigma:#0c93a3;
  --c-move:#7c8a93;
  --c-resp:#2f7d63;
  --s1:#4256a8;
  --s2:#8a5a12;
}

/* --------------------------------------------------------------------------
   7. The page frame inside the shell.
   -------------------------------------------------------------------------- */
.main{flex:1 1 auto;min-width:0;}
/* No centred measure. At 1440 the sidebar takes 224 px and the main column
   takes the rest: a 4-across widget grid and a 7-column correlation row both
   want the width, and a 900-px column in a 1440-px window was two thirds
   empty. Reading measure is enforced where it matters (page-sub, footnote,
   pair-reading), not by starving the whole page. */
.page{max-width:none;padding:6px 6px 30px;}
.view{display:none;}
.view.active{display:block;}
/* GoodFood's .page-head is a flex row of title and controls. Ours stacks an
   eyebrow above the title and puts the controls in an inner row, so the flex
   has to go or the eyebrow becomes a column beside the heading. */
.page-head{display:block;margin-bottom:15px;}
.page-eyebrow{
  font-size:10px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--accent-ink);margin-bottom:6px;
}
.page-sub{max-width:78ch;}
.back-link{
  background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:14px;
  display:inline-flex;align-items:center;gap:6px;transition:color var(--t-fast);
}
.back-link:hover{color:var(--accent-ink);}
/* A footnote explains the screen's one convention and then gets out of the
   way: one line, in the quietest ink on the page. */
.footnote{
  font-size:11px;color:var(--ghost);line-height:1.55;max-width:104ch;
  margin-top:16px;padding-top:11px;border-top:1px solid var(--line);
}

/* --------------------------------------------------------------------------
   8. The widget vocabulary — a label, one number with its unit, a delta.

   What is left of the widget grid after the dashboard became one composition:
   the shell's loading skeleton still lays out a grid of these, and the delta
   line under a number is drawn by Y2.deltaHtml on every screen.
   -------------------------------------------------------------------------- */
.widget-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
/* surface, stroke, highlight and shadow all come from the glass primitive */
.widget{
  padding:15px 16px 12px;
  display:flex;flex-direction:column;gap:2px;min-width:0;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.widget:hover{border-color:var(--line-strong);background:var(--surface-2);}
.w-label{
  font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);display:flex;align-items:center;gap:7px;min-height:15px;
}
.w-val{display:flex;align-items:baseline;gap:5px;margin-top:8px;flex-wrap:wrap;}
.w-num{font-size:26px;font-weight:700;letter-spacing:-.04em;line-height:1;}
.w-unit{font-size:12px;font-weight:600;color:var(--muted);}
.w-delta{font-size:11px;font-weight:600;margin-top:6px;display:flex;align-items:center;gap:5px;}
.w-delta .w-base{color:var(--faint);font-weight:500;}

/* --------------------------------------------------------------------------
   9. Expanding rows — Correlations and Watching.
   -------------------------------------------------------------------------- */
.rows{display:flex;flex-direction:column;gap:7px;}
.prow{overflow:hidden;transition:border-color var(--t-fast), box-shadow var(--t-fast);}
.prow.open{border-color:var(--accent-line);
  box-shadow:inset 0 1px 0 var(--hi), var(--shadow-float), 0 0 0 3px var(--accent-glow);}
.prow-head{
  width:100%;display:grid;
  grid-template-columns:minmax(0,1fr) 92px 62px 74px 52px 84px 20px;
  align-items:center;gap:14px;
  padding:12px 16px;background:transparent;border:0;cursor:pointer;
  font-family:inherit;color:inherit;text-align:left;
  transition:background-color var(--t-fast);
}
.prow-head:hover{background:var(--surface-2);}
.prow.open .prow-head{background:var(--accent-soft);}
.prow-pair{font-size:13.5px;font-weight:600;letter-spacing:-.015em;min-width:0;}
.prow-pair .arrow{color:var(--faint);margin:0 6px;font-weight:400;}
.prow-pair .out{color:var(--muted);font-weight:500;}
.prow-sub{display:block;font-size:11px;color:var(--faint);margin-top:4px;}
.prow-cell{font-size:12px;text-align:right;}
.prow-cell .ck{
  display:block;font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ghost);margin-bottom:2px;
}
.prow-cell b{font-weight:600;}
.prow-caret{color:var(--faint);font-size:13px;transition:transform var(--t-mid) var(--ease-out);text-align:center;}
.prow.open .prow-caret{transform:rotate(180deg);color:var(--accent);}
.prow-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--t-mid) var(--ease-out);}
.prow-panel > div{overflow:hidden;}
.prow.open .prow-panel{grid-template-rows:1fr;}
.prow-body{padding:2px 16px 18px;border-top:1px solid var(--line);margin-top:-1px;}

.tier{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;white-space:nowrap;
}
.tier-headline{background:var(--accent-soft);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent-line);}
.tier-watching{background:var(--warn-soft);color:var(--warn);}
.tier-null{background:var(--surface-2);color:var(--faint);}

.chipbar{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
.fchip{
  background:transparent;border:1px solid var(--line-strong);border-radius:999px;
  padding:6px 13px;font-family:inherit;font-size:12.5px;font-weight:500;
  color:var(--muted);cursor:pointer;white-space:nowrap;
  transition:color var(--t-fast), border-color var(--t-fast), background-color var(--t-fast);
}
.fchip:hover{color:var(--ink);border-color:var(--muted);}
.fchip[aria-pressed="true"]{
  background:var(--accent-soft);color:var(--accent-ink);border-color:var(--accent-line);
}

/* --------------------------------------------------------------------------
   10. The pair view — used inline by Correlations, Watching and quick look.
   -------------------------------------------------------------------------- */
.pair-stats{
  display:flex;flex-wrap:wrap;gap:0 26px;padding:14px 0 4px;
  font-size:12px;color:var(--muted);
}
.pair-stats > span{display:inline-flex;gap:6px;align-items:baseline;}
.pair-stats b{color:var(--ink);font-weight:600;}
.pair-charts{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:16px;margin-top:12px;}
.pair-block{min-width:0;}
.pair-block h4{
  font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin-bottom:9px;
}
.pair-block .cap{font-size:11.5px;color:var(--faint);margin-top:7px;line-height:1.5;}
.pair-actions{display:flex;align-items:center;gap:10px;margin-top:18px;flex-wrap:wrap;}
.pair-reading{font-size:12.5px;color:var(--ink);line-height:1.55;max-width:88ch;padding:11px 14px;}

/* --------------------------------------------------------------------------
   11. Effect bars — "what moved since", benchmark trends, marker deltas.
   -------------------------------------------------------------------------- */
.eff-row{
  display:grid;grid-template-columns:minmax(0,1fr) 150px 104px 62px;
  align-items:center;gap:12px;padding:6px 2px;border-top:1px solid var(--line);
  font-size:12.5px;
}
/* A long ranked list is two columns at 1440, not one row 1,100 px wide with
   500 px of nothing in the middle of it. Each column carries its own header,
   the way a two-up table does. */
.eff-cols{display:grid;grid-template-columns:minmax(0,1fr);column-gap:38px;}
@media(min-width:1240px){ .eff-cols{grid-template-columns:1fr 1fr;} }
.eff-row:first-child{border-top:0;}
.eff-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;}
.eff-name small{color:var(--faint);margin-left:6px;font-weight:400;}
.eff-bar{height:20px;}
.eff-bar svg{display:block;}
.eff-fig{text-align:right;font-size:12px;}
.eff-fig .ci{color:var(--faint);font-size:11px;}
.eff-n{text-align:right;font-size:11px;color:var(--faint);}

/* --------------------------------------------------------------------------
   12. The Day timeline.
   -------------------------------------------------------------------------- */
.tl-readout{
  display:flex;flex-wrap:wrap;gap:5px 16px;align-items:baseline;
  min-height:26px;padding:9px 2px 11px;margin-bottom:2px;
  border-bottom:1px solid var(--line);font-size:11.5px;color:var(--faint);
}
.tl-readout .ro-time{font-size:14px;font-weight:700;color:var(--ink);min-width:52px;}
.tl-readout .ro{display:inline-flex;gap:5px;align-items:baseline;}
.tl-readout .ro b{color:var(--ink);font-weight:600;}
.tl-wrap{margin:12px -4px 0;}
.tl-scroll{display:flex;overflow-x:auto;scrollbar-width:thin;padding-bottom:8px;}
.tl-labels{flex:none;position:sticky;left:0;z-index:2;background:var(--surface);}
.tl-plot{flex:none;}
.tl-legend{display:flex;flex-wrap:wrap;gap:5px 14px;font-size:11px;color:var(--faint);margin-top:2px;}
.tl-legend .lg{display:inline-flex;align-items:center;gap:5px;}
.tl-legend i{width:9px;height:9px;border-radius:2.5px;display:inline-block;}
.daynav{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.daynav-date{font-size:13px;font-weight:600;min-width:132px;text-align:center;}
.weekstrip{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:15px;}
.wday{
  padding:7px 11px;cursor:pointer;font-family:inherit;text-align:left;color:inherit;
  display:flex;flex-direction:column;gap:2px;min-width:76px;
  transition:border-color var(--t-fast), background-color var(--t-fast);
}
.wday:hover{border-color:var(--line-strong);background:var(--surface-2);}
.wday[aria-current="true"]{border-color:var(--accent-line);background:var(--accent-soft);}
.wday .dl{font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);}
.wday .sc{font-size:19px;font-weight:700;letter-spacing:-.04em;line-height:1.1;}
.wday .sc2{font-size:10.5px;color:var(--faint);}

/* --------------------------------------------------------------------------
   13. Small shared pieces.
   -------------------------------------------------------------------------- */
.kv{display:flex;flex-direction:column;gap:0;}
.kv-row{
  display:flex;align-items:center;gap:14px;padding:6px 0;
  border-top:1px solid var(--line);font-size:12.5px;
}
.kv-row:first-child{border-top:0;}
.kv-row .k{color:var(--muted);flex:1 1 auto;min-width:0;}
.kv-row .v{font-weight:600;text-align:right;}
.kv-row .v small{color:var(--faint);font-weight:500;margin-left:3px;}
/* wide enough for the widest inline chart it carries (the 124 px benchmark
   trend), whose markers overflow their box by design */
.kv-row .mid{width:132px;flex:none;text-align:right;}
.kv-row .v{min-width:104px;flex:none;text-align:right;}
/* Same reason as .eff-cols: a list of forty markers is two columns at 1440. */
@media(min-width:1240px){
  .kv.kv-2{display:grid;grid-template-columns:1fr 1fr;column-gap:38px;}
  .kv.kv-2 > .kv-row:nth-child(2){border-top:0;}
}

/* GoodFood's .e-hint is inline, which runs the hint onto the end of the
   headline sentence. An empty state is two lines or it is one muddle. */
.empty .e-hint{display:block;max-width:56ch;margin:9px auto 0;line-height:1.6;}
.empty b{color:var(--muted);}

.tip{
  position:fixed;z-index:120;pointer-events:none;opacity:0;
  transform:translate(-50%,-125%);
  border-radius:10px;padding:8px 11px;font-size:11.5px;line-height:1.5;white-space:nowrap;
  transition:opacity var(--t-fast);
}
.tip.show{opacity:1;}
.tip .tk{color:var(--muted);margin-right:8px;}
.tip .tv{
  font-weight:600;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}

.sheet-backdrop{
  position:fixed;inset:0;z-index:100;background:var(--scrim);
  display:flex;align-items:center;justify-content:center;padding:28px;
  animation:fade-in .16s var(--ease) both;
}
.sheet{
  border-color:var(--line-strong);
  width:100%;max-width:560px;max-height:min(80vh,720px);
  display:flex;flex-direction:column;
  animation:modal-in .22s var(--ease-out) both;
}
.sheet > header{
  display:flex;align-items:center;gap:14px;
  padding:19px 22px 15px;border-bottom:1px solid var(--line);
}
.sheet > header h3{font-size:16px;font-weight:600;letter-spacing:-.02em;}
.sheet > .body{padding:18px 22px 22px;overflow-y:auto;}

.palette{position:fixed;inset:0;z-index:110;background:var(--scrim);padding:12vh 24px 24px;}
.palette-box{
  max-width:560px;margin:0 auto;border-color:var(--line-strong);overflow:hidden;
  animation:modal-in .2s var(--ease-out) both;
}
.palette-box input{
  width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;
  padding:17px 20px;font-family:inherit;font-size:15px;color:var(--ink);
}
.palette-box input:focus{outline:none;}
.palette-list{max-height:52vh;overflow-y:auto;padding:7px;}
.pal-row{
  display:flex;align-items:baseline;gap:11px;width:100%;
  padding:9px 12px;border:0;background:transparent;border-radius:10px;
  cursor:pointer;font-family:inherit;color:inherit;text-align:left;font-size:13px;
}
.pal-row:hover,.pal-row.sel{background:var(--accent-soft);color:var(--ink);}
.pal-kind{
  font-size:9.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--faint);min-width:84px;flex:none;
}
.pal-row.sel .pal-kind{color:var(--accent-ink);opacity:.8;}
.pal-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pal-unit{font-size:11px;color:var(--faint);}
.palette-foot{padding:9px 20px;border-top:1px solid var(--line);font-size:11px;color:var(--ghost);}

.stub-note{
  display:flex;gap:12px;align-items:flex-start;
  background:var(--accent-soft);border-color:var(--accent-line);
  padding:15px 17px;margin-bottom:18px;
}
.stub-note h3{font-size:13.5px;font-weight:700;color:var(--accent-ink);letter-spacing:-.015em;}
.stub-note p{font-size:12.5px;color:var(--muted);margin-top:4px;line-height:1.55;max-width:92ch;}
.stub-sections{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px;}

.hypno{margin-top:4px;}
.hypno svg{display:block;width:100%;}

/* --------------------------------------------------------------------------
   13b. Dashboard panels — the design-phase treatments.

   One composition (Conditions: outside, bedroom, office, body) drawn five
   ways, plus the panel design those five replace, kept as `ref`. Nothing here
   introduces a colour, a font or a spacing step: every rule is a layout for
   primitives that already exist above, and the four subject hues are taken
   from the stream palette in section 6 rather than invented.

   The shared idea is `.dash-fill`, a grid that claims the height between the
   page header and the footnote so a treatment fills 1440x900 without
   scrolling, and `.dash-grow`, the one child of a card allowed to take
   whatever height is left (a chart measures it and draws to it).
   -------------------------------------------------------------------------- */
.dash-switch{display:flex;align-items:center;gap:9px;}
.dash-vlabel{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ghost);}
.dash-vname{font-size:12px;font-weight:600;color:var(--muted);min-width:104px;}
.dash-switch .segment-item{padding:6px 11px;font-family:var(--mono);}
/* `ref` is the thing being compared against, not a sixth candidate, so it sits
   behind a divider rather than in the run of letters. */
.dash-switch .segment-item.is-ref{margin-left:5px;padding-left:14px;
  box-shadow:inset 1px 0 0 var(--line);}

.dash-fill{
  display:grid;gap:12px;min-height:calc(100vh - 212px);
  /* subject identity, one hue each, used on edges and lines and nowhere else */
  --sub-out:var(--s2);
  --sub-bed:var(--c-deep);
  --sub-off:var(--c-supp);
  --sub-body:var(--c-exercise);
}
.dash-fill > *{min-width:0;min-height:0;}
.dash-card{display:flex;flex-direction:column;}
.dash-grow{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;}
.dash-grow > svg{display:block;width:100%;}
.lane-svg{display:block;width:100%;overflow:visible;}
/* the subject's dot, the only place a subject hue becomes a shape */
.bn-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hue);}

/* the four body numbers, as one flat strip under C and E */
.body-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:11px 17px 12px;}
.bs-cell{padding:0 18px;border-left:1px solid var(--line);min-width:0;}
.bs-cell:first-child{padding-left:0;border-left:0;}
.bs-cell .s-label{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);}
.bs-num{font-size:24px;font-weight:700;letter-spacing:-.04em;margin-top:6px;line-height:1;}
.bs-num .u{font-size:11px;font-weight:600;color:var(--muted);}
.body-strip .w-delta{font-size:10.5px;margin-top:6px;flex-wrap:wrap;gap:4px;}
.body-strip .w-delta > span{white-space:nowrap;}

/* --------------------------------------- A — bands: a table with a chart per row */
.cA{grid-template-rows:repeat(4,minmax(0,1fr));}
.band{display:grid;grid-template-columns:146px minmax(0,1fr) 38%;gap:16px;
  align-items:center;padding:13px 17px;}
.band-name{display:flex;align-items:flex-start;gap:8px;min-width:0;}
.band-name .bn-dot{margin-top:6px;}
.bn-text{font-size:16px;font-weight:700;letter-spacing:-.025em;line-height:1.15;min-width:0;}
.bn-text small{display:block;font-size:10.5px;font-weight:500;color:var(--faint);
  margin-top:4px;letter-spacing:0;line-height:1.35;}
.band-reads{display:flex;flex-wrap:wrap;align-items:flex-start;row-gap:11px;}
.band-read{padding:0 15px;border-left:1px solid var(--line);min-width:0;}
.band-read:first-child{padding-left:0;border-left:0;}
.band-read .k{font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);white-space:nowrap;}
.band-read .v{font-size:18px;font-weight:700;letter-spacing:-.04em;margin-top:5px;
  white-space:nowrap;line-height:1;}
.band-read .v .u{font-size:10.5px;font-weight:600;color:var(--muted);}
.band-sub{font-size:10px;color:var(--ghost);margin-top:5px;white-space:nowrap;
  display:flex;align-items:baseline;gap:4px;}
.band-sub .w-base{color:var(--ghost);font-weight:500;}
.band-chart{height:132px;min-height:0;}

/* -------------------------------- B — one flat grid, subject on a coloured edge */
.cB{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));}
.utile{position:relative;padding:13px 15px 11px 17px;display:flex;flex-direction:column;
  overflow:hidden;}
.utile::before{content:"";position:absolute;left:0;top:11px;bottom:11px;width:3px;
  border-radius:0 3px 3px 0;background:var(--hue);}
.u-eyebrow{font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);line-height:1.4;min-height:2.5em;}
.u-val{display:flex;align-items:baseline;gap:6px;margin-top:5px;flex-wrap:wrap;}
.u-num{font-size:27px;font-weight:800;letter-spacing:-.05em;line-height:1;}
.u-unit{font-size:11px;font-weight:600;color:var(--muted);}
.u-glyph{font-size:23px;line-height:1;}
.u-word{font-size:15px;font-weight:700;letter-spacing:-.02em;}
.u-sub{font-size:10.5px;color:var(--ghost);margin-top:7px;line-height:1.45;}
.u-sub .w-base{color:var(--ghost);font-weight:500;margin-left:5px;}
.u-spark{margin-top:auto;height:48px;padding-top:6px;}

/* ------------------------------------------- C — the chart is the panel */
.cC{grid-template-rows:repeat(3,minmax(0,1fr)) auto;}
.cp{padding:11px 17px 9px;display:flex;flex-direction:column;}
.cp-head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;}
.cp-chart{flex:1 1 auto;min-height:0;margin-top:5px;}
.cp-cap{font-size:11px;color:var(--faint);line-height:1.5;margin-top:7px;padding-top:7px;
  border-top:1px solid var(--line);}
.cp-cap .u{color:var(--ghost);}

/* --------------------------------- D — status rings, four quiet groups on a plane */
.cD{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));}
/* the groups are equal panes and stay equal: a group that grows a ring row
   pushes the pane below it off a 900-px screen. */
.ringgroup{padding:15px 18px 16px;display:flex;flex-direction:column;overflow:hidden;}
.rg-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}
.rg-note{flex:1 1 100%;font-size:10.5px;color:var(--faint);line-height:1.5;margin-top:5px;}
.ring-row{flex:1 1 auto;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;align-content:center;justify-items:center;}
.ring{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0;}
.ring-arc{position:relative;width:128px;height:128px;}
.ring-arc svg{display:block;}
.ring-mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:2px;pointer-events:none;}
.ring-num{font-size:23px;font-weight:700;letter-spacing:-.045em;line-height:1;}
.ring-unit{font-size:10px;font-weight:600;color:var(--muted);}
.ring-label{font-size:11.5px;font-weight:600;text-align:center;letter-spacing:-.01em;}
.ring-word{font-size:10.5px;font-weight:600;text-align:center;line-height:1.35;}

/* ------------------------------ E — one 24-hour clock, every lane hung off it */
.cE{grid-template-rows:minmax(0,1fr) auto;}
.strip{padding:13px 18px 8px;display:flex;flex-direction:column;}
.strip .card-sub{line-height:1.5;max-width:96ch;}
.strip-clock{text-align:right;line-height:1.15;flex:none;}
.strip-clock span{font-size:20px;font-weight:700;letter-spacing:-.04em;}
.strip-clock small{display:block;font-size:10px;color:var(--faint);}
.lanes{flex:1 1 auto;min-height:0;display:grid;
  grid-template-columns:150px minmax(0,1fr) 112px;column-gap:14px;
  grid-auto-rows:minmax(0,1fr);align-items:stretch;}
.lane-name,.lane-plot,.lane-now{border-top:1px solid var(--line);min-width:0;}
.lane-name{display:flex;align-items:center;gap:7px;}
.ln-sub{font-size:9px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);}
.ln-metric{font-size:12.5px;font-weight:600;letter-spacing:-.015em;}
.lane-plot{display:flex;flex-direction:column;justify-content:center;}
.lane-now{display:flex;align-items:center;justify-content:flex-end;
  font-size:18px;font-weight:700;letter-spacing:-.04em;}
.lane-now .u{font-size:10.5px;font-weight:600;color:var(--muted);}
.lane-axis{display:grid;grid-template-columns:150px minmax(0,1fr) 112px;column-gap:14px;
  margin-top:3px;}
.la-plot{min-width:0;}

/* ------------------- ref — the panel design the treatments here replace */
.vE{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:minmax(0,1fr) auto;}
.vE .e-out{grid-row:1 / 3;}
.vE .e-body{grid-column:2 / 4;}
.wx-glyph{font-size:32px;line-height:1;}
.wx-num{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin:6px 0 12px;}
.wx-num > .mono{font-size:52px;font-weight:800;letter-spacing:-.05em;line-height:1;}
.hero-unit{font-size:15px;font-weight:600;color:var(--muted);}
.hero-med{font-size:11.5px;color:var(--faint);margin-left:auto;}
.cond-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;}
.cond .s-label{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);}
.cond-num{font-size:21px;font-weight:700;letter-spacing:-.035em;margin-top:5px;}
.cond-num .u{font-size:11px;font-weight:600;color:var(--muted);}
.vE .e-body .stat-grid{margin-top:2px;}
.vE .e-body .s-num .u{font-size:12px;font-weight:600;color:var(--muted);}
.vE .e-body .w-delta{font-size:10.5px;flex-wrap:wrap;gap:4px;}
.vE .e-body .w-delta > span{white-space:nowrap;}

@media(max-width:1180px){
  .cD{grid-template-columns:1fr;grid-template-rows:repeat(4,auto);}
  .cB{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));}
  .band{grid-template-columns:132px minmax(0,1fr) 32%;}
  .vE{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .vE .e-out{grid-row:auto;}
  .vE .e-body{grid-column:1 / 3;}
  .dash-fill{min-height:0;}
}

/* --------------------------------------------------------------------------
   14. Responsive. 1440 and 1024 are the two sizes that must be right.
   -------------------------------------------------------------------------- */
@media(max-width:1180px){
  .widget-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .pair-charts{grid-template-columns:1fr;}
}
@media(max-width:1080px){
  .sidebar{flex:0 0 214px;width:214px;}
  .prow-head{grid-template-columns:minmax(0,1fr) 84px 56px 68px 78px 20px;}
  .prow-head .prow-n{display:none;}
  .eff-row{grid-template-columns:minmax(0,1fr) 130px 100px;}
  .eff-row .eff-n{display:none;}
}
@media(max-width:900px){
  .widget-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .sidebar{
    position:fixed;left:0;top:0;transform:translateX(-100%);
    transition:transform var(--t-mid) var(--ease-out);box-shadow:var(--shadow-float);
  }
  .sidebar.open{transform:none;}
  .menu-btn{display:inline-flex;position:sticky;top:14px;margin:14px 0 0 14px;z-index:15;}
  .page{padding:6px 4px 28px;}
}
@media(max-width:620px){
  .widget-grid{grid-template-columns:1fr;}
  .prow-head{grid-template-columns:minmax(0,1fr) 74px 20px;}
  .prow-head .prow-hide{display:none;}
}

/* --------------------------------------------------------------------------
   15. Responsive tail — the sidebar becomes a drawer, still a glass panel.
   -------------------------------------------------------------------------- */
@media(max-width:1080px){
  .sidebar{flex:0 0 206px;width:206px;}
}
@media(max-width:900px){
  .shell{padding:10px;}
  .sidebar{
    position:fixed;left:10px;top:10px;bottom:10px;height:auto;
    transform:translateX(-115%);transition:transform var(--t-mid) var(--ease-out);
  }
  .sidebar.open{transform:none;}
  .menu-btn{display:inline-flex;margin:2px 0 8px 2px;}
}

/* --------------------------------------------------------------------------
   16. Per-app accent, one hue each.

   The hues themselves are not here. `_shell/accents.css` is the single source
   for all six apps — it is shared with the sidebar the external apps wear, so
   it speaks in neutral `--app-*` tokens and this block is the one place they
   are mapped into you²'s own names.

   The accent is the only colour that changes when you switch app, and in glass
   it is a translucent tint plus a glow rather than a solid block, so the panel
   underneath still reads as glass. The backdrop blobs move with it: the light
   behind the glass is the app's colour too, which is what makes the atmosphere
   and not just the marks change when you switch.

   Specificity, deliberately: `html[data-app]` is 0-1-1, the same as the
   `html[data-theme="dark"]` block above that sets the default blobs, and it is
   later in the file, so it wins. Status colours (--good/--warn/--danger) are
   NOT in here: they mean something, they are fixed, and no accent may be
   mistaken for one.
   -------------------------------------------------------------------------- */
html[data-app] {
  --accent: var(--app-accent);
  --accent-ink: var(--app-accent-ink);
  --accent-soft: var(--app-accent-soft);
  --accent-line: var(--app-accent-line);
  --accent-glow: var(--app-accent-glow);
  --accent-shine: var(--app-accent-shine);
  --accent-mix: var(--app-accent-mix);
  --on-accent: var(--app-on-accent);
  --blob-a: var(--app-blob-a);
  --blob-b: var(--app-blob-b);
  --blob-c: var(--app-blob-c);
}

/* --------------------------------------------------------------------------
   16. The default dashboard — four panels, one screenful

   Environment · Night · Day · Agenda in a 2×2 that fills 1440×900 with no
   scrolling. Nothing here introduces a colour or a size step: the ring is
   treatment D's ring at 150 px, the numbers are the mono scale, the padding is
   the 15–18 px the cards already use.
   -------------------------------------------------------------------------- */
.vRef{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));
  /* the whole point of this screen is that it ends: a fixed height rather than
     a minimum, so the four panels divide 1440x900 and nothing falls below. */
  height:calc(100vh - 196px);min-height:0;}
.vRef > .card{padding:15px 18px;overflow:hidden;}

/* ---- the two score panels ------------------------------------------------ */
.vRef .card-head{flex:none;}
.p-score{cursor:pointer;transition:border-color var(--t-fast) var(--ease);}
.p-score:hover{border-color:var(--line-strong);}
.p-score .drill{opacity:0;transition:opacity var(--t-fast) var(--ease);white-space:nowrap;}
.p-score:hover .drill{opacity:1;}
.score-body{flex:1 1 auto;min-height:0;display:flex;align-items:center;gap:20px;margin-top:6px;
  overflow:hidden;}
.big-ring{flex:none;gap:7px;}
.big-ring .ring-num{font-size:44px;}
.big-ring .ring-unit{font-size:11px;}
.big-ring .ring-word{font-size:13px;font-weight:700;letter-spacing:-.01em;text-transform:capitalize;}
/* the number is the control that opens the formula, so it looks like one */
.ring-open{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;background:none;border:0;padding:0;cursor:pointer;color:inherit;
  border-radius:50%;}
.ring-open:hover .ring-num{text-decoration:underline;text-underline-offset:4px;
  text-decoration-thickness:1px;}
.ring-open:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

.kr-grid{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:2px 18px;}
.kr{min-width:0;padding:5px 0;border-bottom:1px solid var(--line);}
.kr:nth-last-child(-n+2){border-bottom:0;}
.kr-label{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);}
.kr-num{font-size:19px;font-weight:700;letter-spacing:-.03em;line-height:1.25;}
.kr-num .u{font-size:11px;font-weight:600;color:var(--muted);}
.kr-delta{font-size:10px;display:flex;gap:5px;flex-wrap:wrap;color:var(--faint);}
.p-foot{margin-top:8px;}
.p-foot .chip{font-size:10.5px;}
.chip.q-ok{border-color:var(--good-soft);color:var(--good);}
.chip.q-bad{border-color:var(--danger-soft);color:var(--danger);}
.chip.q-none{color:var(--faint);}

/* ---- the environment panel ---------------------------------------------- */
.p-env .env-out{display:flex;align-items:flex-end;gap:16px;padding:0 0 8px;
  border-bottom:1px solid var(--line);}
.env-temp{font-size:38px;font-weight:800;letter-spacing:-.045em;line-height:1;}
.env-temp .hero-unit{font-size:14px;font-weight:600;color:var(--muted);margin-left:3px;}
.env-out-facts{font-size:11.5px;color:var(--muted);line-height:1.55;}
.env-out-facts b{color:var(--ink);}
.env-room{flex:1 1 0;min-height:0;display:flex;flex-direction:column;
  justify-content:center;padding-top:5px;overflow:hidden;}
.env-room + .env-room{border-top:1px solid var(--line);}
.env-name{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;}
.env-reads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 10px;margin:4px 0 0;}
.env-read{min-width:0;}
.env-read .s-label{display:block;font-size:9px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);}
.env-num{font-size:15px;font-weight:700;letter-spacing:-.025em;}
.env-num .u{font-size:10px;font-weight:600;color:var(--muted);}
/* a fixed 52 px so the chart is never taller than the box that clips it —
   a lane drawn to a flexed height loses its own title off the top */
.env-lane{flex:none;height:var(--lane-h,50px);margin-top:2px;overflow:hidden;}
.env-lane > svg{display:block;width:100%;height:100%;}

/* ---- the agenda ---------------------------------------------------------- */
.ag-list{flex:1 1 auto;min-height:0;overflow:auto;margin-top:4px;}
.ag-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:baseline;gap:12px;
  width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:8px 0;cursor:pointer;color:var(--ink);font:inherit;}
.ag-row:last-child{border-bottom:0;}
.ag-row:hover{background:var(--surface-2);}
.ag-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px;}
.ag-kind{font-size:9px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);}
.ag-name{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ag-val{font-size:11.5px;color:var(--muted);white-space:nowrap;}

/* ---- the live tier: freshness, and today so far ------------------------- */
/* A number that is a second old and a number waiting for tonight's batch look
   identical unless the screen says which is which. So every panel wears one
   quiet line — "as of 14:32" — with each source's expected cadence on hover,
   and a provisional figure carries a small hollow dot. It is the faintest ink
   on the page on purpose: it is there to be found, not to be read every
   morning. */
.head-right{display:flex;align-items:center;gap:10px;flex:none;}
.fresh{font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ghost);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;
  cursor:help;}
.fresh .mono{letter-spacing:0;}
.fresh-dot{width:5px;height:5px;border-radius:50%;border:1px solid var(--warn);
  background:none;flex:none;}
.fresh.is-prov{color:var(--faint);}

/* Today so far, under the Day panel's ring. Six counters and the habit count,
   on the same mono scale as everything else, with the 30-day median beneath
   each as a pace rather than a delta — an arrow against a whole-day median at
   09:00 would be a lie with a direction on it. */
.p-today{flex:none;margin-top:9px;padding-top:8px;border-top:1px solid var(--line);}
.ts-head{font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);margin-bottom:5px;}
.ts-head b{color:var(--ink);letter-spacing:0;}
.ts-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 10px;}
.ts-cell{min-width:0;}
.ts-label{font-size:8.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ts-num{font-size:15px;font-weight:700;letter-spacing:-.025em;line-height:1.3;}
.ts-num .u{font-size:9.5px;font-weight:600;color:var(--muted);}
.ts-base{font-size:9px;color:var(--ghost);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;}

/* The sidebar says whether the stream is up, in one word. "reconnecting" is
   the only state worth a colour: a stale number presented as fresh is the one
   failure this whole mechanism exists to avoid. */
.live-note{display:inline-flex;align-items:center;gap:5px;margin-top:3px;}
.live-dot{width:5px;height:5px;border-radius:50%;background:var(--good);flex:none;}
.live-note[data-live="reconnecting"], .live-note[data-live="polling"]{color:var(--warn);}
.live-note[data-live="reconnecting"] .live-dot,
.live-note[data-live="polling"] .live-dot{background:var(--warn);
  animation:live-pulse 1.6s var(--ease) infinite;}
@keyframes live-pulse{0%,100%{opacity:1}50%{opacity:.25}}

@media (max-width:1100px){
  .ts-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 10px;}
}

/* ---- the score-formula sheet --------------------------------------------- */
.ftable{width:100%;border-collapse:collapse;font-size:12px;}
.ftable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);padding:0 12px 7px 0;white-space:nowrap;}
.ftable td{padding:7px 12px 7px 0;border-top:1px solid var(--line);}
.ftable tr.ftotal td{border-top:1px solid var(--line-strong);color:var(--ink);font-weight:700;}

@media (max-height:880px){
  .vRef{height:auto;grid-template-rows:repeat(2,auto);}
  .vRef > .card{min-height:236px;}
  .big-ring .ring-arc{width:118px;height:118px;}
  .big-ring .ring-arc svg{width:100%;height:100%;}
  .big-ring .ring-num{font-size:34px;}
  .kr-num{font-size:17px;}
  .ts-num{font-size:14px;}
  .p-env .env-room{flex:0 0 auto;}
  .p-env{--lane-h:42px;}
}

@media (max-width:1100px){
  .vRef{grid-template-columns:1fr;grid-template-rows:repeat(4,auto);}
  .score-body{flex-direction:column;align-items:flex-start;}
  .kr-grid{width:100%;}
}

/* --------------------------------------------------------------------------
   17. The four glass apps — Habits, Sleep, Exercise, Home

   Each of these is one application behind one gateway prefix, so the shell
   gives them the same furniture and nothing else: a tab strip in the page
   header, cards, and the primitives above. Nothing here invents a colour.
   -------------------------------------------------------------------------- */
.app-body{display:block;}
.app-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(8px);
  background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--r-input);
  padding:9px 16px;font-size:12.5px;font-weight:600;color:var(--ink);box-shadow:var(--shadow-float);
  opacity:0;pointer-events:none;transition:opacity var(--t-fast) var(--ease),
  transform var(--t-fast) var(--ease);z-index:60;}
.app-toast[data-on="1"]{opacity:1;transform:translateX(-50%) translateY(0);}
.app-toast[data-bad="1"]{border-color:var(--danger-soft);color:var(--danger);}

.stat-inline{font-size:13px;font-weight:700;white-space:nowrap;}
.stat-inline .u{font-size:10.5px;font-weight:600;color:var(--muted);}
.setform{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;}
.field-label{display:flex;flex-direction:column;gap:5px;font-size:9.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--faint);}
.field-label .field,.field-label .select{min-width:130px;}

/* ---- ticks: one cell per day, the same row in Habits and Supplements ----- */
.tickrow{display:flex;gap:1px;height:16px;margin-top:11px;}
.tick{background:var(--accent);border-radius:1.5px;opacity:.18;}
.tick.on{opacity:.95;}
.tick.na{background:var(--line);opacity:.5;}

/* ---- Habits ------------------------------------------------------------- */
.habit-list{display:flex;flex-direction:column;}
.habit{display:grid;grid-template-columns:22px minmax(0,1fr) auto auto;align-items:center;
  gap:12px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--line);
  padding:10px 0;cursor:pointer;color:var(--ink);font:inherit;}
.habit:last-child{border-bottom:0;}
.habit:hover{background:var(--surface-2);}
.hb-box{width:20px;height:20px;border-radius:6px;border:1px solid var(--line-strong);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  color:var(--on-accent);}
.habit[data-done="1"] .hb-box{background:var(--accent);border-color:var(--accent);}
.hb-name{font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb-stat{font-size:12px;white-space:nowrap;}
.hb-stat .u{font-size:10px;color:var(--muted);}
.habit-card .edit-form{display:flex;gap:9px;align-items:center;margin-top:12px;flex-wrap:wrap;}
.supp-list{display:flex;flex-direction:column;}
.supp{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--line);}
.supp:last-child{border-bottom:0;}
.sp-name{font-size:12.5px;font-weight:600;}
.sp-taken{font-size:11px;text-align:right;color:var(--muted);}
.rate-row{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.rate{display:flex;flex-direction:column;gap:5px;}
.rate .field{width:92px;}
.rate .s-label{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);}

/* ---- Sleep -------------------------------------------------------------- */
.feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;
  align-items:start;}
.ntable{width:100%;border-collapse:collapse;font-size:12px;}
.ntable th{text-align:left;font-size:9.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);padding:0 14px 8px 0;white-space:nowrap;
  position:sticky;top:0;background:var(--surface);}
.ntable td{padding:7px 14px 7px 0;border-top:1px solid var(--line);white-space:nowrap;}
.ntable tbody tr[data-night]{cursor:pointer;}
.ntable tbody tr:hover{background:var(--surface-2);}

/* ---- Exercise ----------------------------------------------------------- */
.sess-list{max-height:620px;overflow:auto;}
.sess-date{font-size:9.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--faint);padding:12px 0 4px;}
.sess{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(5,auto) 70px;align-items:center;
  gap:10px;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);
  padding:9px 0;cursor:pointer;color:var(--ink);font:inherit;}
.sess:hover{background:var(--surface-2);}
.sess[data-active="true"]{box-shadow:inset 2px 0 0 var(--accent);}
.sess-type{font-size:12.5px;font-weight:600;}
.sess-fig{font-size:12px;white-space:nowrap;text-align:right;}
.sess-fig .u{font-size:10px;color:var(--muted);}
.zonebar{display:flex;height:7px;border-radius:4px;overflow:hidden;background:var(--line);}
.zonebar .z0{background:var(--c-move);}
.zonebar .z1{background:var(--c-exercise);}
.zonebar .z2{background:var(--c-hr);}
.trend-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:12px;}

/* ---- Home --------------------------------------------------------------- */
.room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:12px;}
.hr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:14px;}
.hr-read{padding-left:10px;border-left:2px solid var(--st);}
.hr-num{font-size:20px;font-weight:700;letter-spacing:-.03em;}
.hr-num .u{font-size:11px;font-weight:600;color:var(--muted);}
.hr-band{font-size:10.5px;color:var(--muted);}
.wx-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;}
.wx-big{font-size:38px;font-weight:800;letter-spacing:-.045em;}
.wx-big .u{font-size:14px;font-weight:600;color:var(--muted);}
.wx-facts{font-size:11.5px;color:var(--muted);line-height:1.6;}
/* a chart's own title, sitting on it rather than in the card head */
.chart-cap{font-size:10px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--faint);margin:12px 0 -4px;}
.chart-cap:first-child{margin-top:4px;}

@media (max-width:1000px){
  .split-grid{grid-template-columns:1fr;}
  .sess{grid-template-columns:minmax(0,1fr) auto auto;}
}

/* the experiment write controls: a note that appears and goes, and the edit
   panel that drops out of the card it belongs to */
.exp-note{font-size:12px;font-weight:600;color:var(--good);margin-right:6px;}
.exp-note[data-bad="1"]{color:var(--danger);}
.edit-panel{border-top:1px solid var(--line);margin-top:14px;padding-top:14px;}
.field.compact{padding:8px 11px;font-size:13px;width:100%;}