/* ==========================================================================
   ATTUN

   One stylesheet, five themes, written once against a token contract. No
   selector below the token blocks is theme-qualified except the four
   structural exceptions marked STRUCTURAL — a theme that needs its own rules
   is a second product, not a theme.

   The series colours are not taste. Six hues at 60° spacing, each stepped to
   the minimum chroma that still clears the lightness band, the chroma floor,
   protan/deutan separation (ΔE 12.4, target 8), the normal-vision floor
   (18.1, floor 15) and 3:1 on every surface it can land on — the most
   restrained palette that is still legal, rather than the prettiest one that
   is not. The slot ORDER is the stacking order, chosen by enumeration for
   worst-adjacent separation. Identity is stable across themes on purpose:
   movement is sage in all five, so switching theme never relabels a chart.
   ========================================================================== */

/* ---------- HARBOUR — the default. Slack water before dawn. -------------- */
:root,
:root[data-theme="harbour"]{
  --bg:#070B0F; --bg-2:#0B131B;
  --bg-wash:radial-gradient(120% 80% at 50% -10%,#0B131B,transparent 62%);
  --bloom:radial-gradient(900px 460px at 50% -6%,rgba(58,214,196,.13),transparent 62%),
          radial-gradient(620px 420px at 100% 100%,rgba(157,140,255,.07),transparent 60%);
  --vignette:radial-gradient(115% 82% at 50% 42%,transparent 45%,rgba(0,0,0,.42));
  --surface:rgba(255,255,255,.035); --surface-flat:#101417;
  --surface-2:rgba(255,255,255,.07); --well:#0A1117; --track:#080D12;
  --ink:#E9F2F3; --ink-2:#BFD2D6; --dim:#7E969B; --dim-2:#6F888D; --on-accent:#04100F;
  --line:rgba(255,255,255,.10); --line-2:rgba(255,255,255,.18); --line-accent:rgba(58,214,196,.42);
  --accent:#3AD6C4; --accent-2:#9D8CFF;
  --accent-soft:linear-gradient(100deg,rgba(58,214,196,.28),rgba(157,140,255,.28));
  --accent-ring:inset 0 0 0 1px rgba(58,214,196,.40);
  --lift:0 24px 70px -30px rgba(0,0,0,.90); --lift-accent:0 10px 30px -12px rgba(58,214,196,.55);
  --glow:1; --field-alpha:.30; --grain-opacity:.05; --grain-blend:overlay;
  --chart-grid:rgba(255,255,255,.08); --chart-cursor:rgba(255,255,255,.035); --series-empty:#1B2226;
  --seq-1:#2B5048; --seq-2:#2E6D60; --seq-3:#308C7A; --seq-4:#31AB95; --seq-5:#35CBB1;
}
/* ---------- PAPER — warm pressed paper under a north window. ------------- */
:root[data-theme="paper"]{
  --bg:#F4F1EA; --bg-2:#EAE5DA;
  --bg-wash:radial-gradient(120% 80% at 50% -10%,#EAE5DA,transparent 62%);
  --bloom:radial-gradient(900px 460px at 50% -6%,rgba(20,104,98,.07),transparent 62%),
          radial-gradient(620px 420px at 100% 100%,rgba(85,74,160,.05),transparent 60%);
  --vignette:radial-gradient(115% 82% at 50% 42%,transparent 55%,rgba(27,42,46,.06));
  --surface:#FBF9F4; --surface-flat:#FBF9F4;
  --surface-2:#FFFEFC; --well:#EDE9DF; --track:#E4DFD4;
  --ink:#1B2A2E; --ink-2:#33454A; --dim:#4B5D61; --dim-2:#536467; --on-accent:#F7FBFA;
  --line:rgba(27,42,46,.16); --line-2:rgba(27,42,46,.30); --line-accent:rgba(20,104,98,.55);
  --accent:#146862; --accent-2:#554AA0;
  --accent-soft:#E7F0EE;
  --accent-ring:inset 0 0 0 1px rgba(20,104,98,.55);
  --lift:0 18px 44px -26px rgba(27,42,46,.28); --lift-accent:0 8px 22px -10px rgba(20,104,98,.30);
  --glow:0; --field-alpha:.14; --grain-opacity:.035; --grain-blend:multiply;
  --chart-grid:rgba(27,42,46,.14); --chart-cursor:rgba(27,42,46,.045); --series-empty:#DCD8CE;
  --seq-1:#8AADA4; --seq-2:#5D988B; --seq-3:#248372; --seq-4:#066859; --seq-5:#004E42;
}
/* ---------- GRAPHITE — a measuring instrument, not a mood. --------------- */
:root[data-theme="graphite"]{
  --bg:#0B0C0E; --bg-2:#131519;
  --bg-wash:radial-gradient(120% 80% at 50% -10%,#131519,transparent 62%);
  --bloom:radial-gradient(900px 460px at 50% -6%,rgba(143,188,232,.07),transparent 62%);
  --vignette:radial-gradient(115% 82% at 50% 42%,transparent 40%,rgba(0,0,0,.50));
  --surface:rgba(255,255,255,.04); --surface-flat:#151618;
  --surface-2:rgba(255,255,255,.075); --well:#08090B; --track:#101215;
  --ink:#ECEEF1; --ink-2:#C4C9CF; --dim:#8D959D; --dim-2:#7F878F; --on-accent:#0A0D10;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.17); --line-accent:rgba(143,188,232,.40);
  --accent:#8FBCE8; --accent-2:#CFDAE4;
  --accent-soft:rgba(143,188,232,.14);
  --accent-ring:inset 0 0 0 1px rgba(143,188,232,.38);
  --lift:0 22px 60px -30px rgba(0,0,0,.95); --lift-accent:0 10px 28px -14px rgba(143,188,232,.38);
  --glow:.55; --field-alpha:.16; --grain-opacity:.065; --grain-blend:overlay;
  --chart-grid:rgba(255,255,255,.08); --chart-cursor:rgba(255,255,255,.035); --series-empty:#1E2022;
  --seq-1:#314B5E; --seq-2:#3C6584; --seq-3:#4681AB; --seq-4:#519DD3; --seq-5:#5FBAFB;
}
/* ---------- EMBER — lamplight at the end of the day. --------------------- */
:root[data-theme="ember"]{
  --bg:#100B08; --bg-2:#1A120C;
  --bg-wash:radial-gradient(120% 80% at 50% -10%,#1A120C,transparent 62%);
  --bloom:radial-gradient(900px 460px at 50% -6%,rgba(237,176,124,.12),transparent 62%),
          radial-gradient(620px 420px at 100% 100%,rgba(201,139,168,.07),transparent 60%);
  --vignette:radial-gradient(115% 82% at 50% 42%,transparent 45%,rgba(16,7,2,.45));
  --surface:rgba(255,236,214,.045); --surface-flat:#1B1511;
  --surface-2:rgba(255,236,214,.085); --well:#0B0705; --track:#150F0B;
  --ink:#F5EAE0; --ink-2:#DCC9BA; --dim:#A4897B; --dim-2:#9A8174; --on-accent:#180D06;
  --line:rgba(255,226,199,.10); --line-2:rgba(255,226,199,.19); --line-accent:rgba(237,176,124,.42);
  --accent:#EDB07C; --accent-2:#C98BA8;
  --accent-soft:linear-gradient(100deg,rgba(237,176,124,.26),rgba(201,139,168,.26));
  --accent-ring:inset 0 0 0 1px rgba(237,176,124,.40);
  --lift:0 24px 66px -30px rgba(0,0,0,.92); --lift-accent:0 10px 30px -12px rgba(237,176,124,.45);
  --glow:.85; --field-alpha:.26; --grain-opacity:.055; --grain-blend:overlay;
  --chart-grid:rgba(255,226,199,.09); --chart-cursor:rgba(255,236,214,.035); --series-empty:#2A221C;
  --seq-1:#59422E; --seq-2:#7C5737; --seq-3:#A06E3F; --seq-4:#C58549; --seq-5:#EB9D55;
}
/* ---------- VESPER — the blue hour, lit by one candle. ------------------- */
:root[data-theme="vesper"]{
  --bg:#0A0A14; --bg-2:#121228;
  --bg-wash:radial-gradient(120% 80% at 50% -10%,#121228,transparent 62%);
  --bloom:radial-gradient(900px 460px at 50% -6%,rgba(232,203,147,.10),transparent 62%),
          radial-gradient(620px 420px at 100% 100%,rgba(199,155,210,.08),transparent 60%);
  --vignette:radial-gradient(115% 82% at 50% 42%,transparent 45%,rgba(4,4,12,.48));
  --surface:rgba(214,220,255,.05); --surface-flat:#141520;
  --surface-2:rgba(214,220,255,.09); --well:#07070F; --track:#0F0F1C;
  --ink:#EDEBF5; --ink-2:#C8C5DC; --dim:#8E8BA8; --dim-2:#8583A2; --on-accent:#14100A;
  --line:rgba(214,220,255,.11); --line-2:rgba(214,220,255,.21); --line-accent:rgba(232,203,147,.42);
  --accent:#E8CB93; --accent-2:#C79BD2;
  --accent-soft:linear-gradient(100deg,rgba(232,203,147,.24),rgba(199,155,210,.24));
  --accent-ring:inset 0 0 0 1px rgba(232,203,147,.40);
  --lift:0 24px 70px -30px rgba(0,0,0,.92); --lift-accent:0 10px 30px -12px rgba(232,203,147,.42);
  --glow:1; --field-alpha:.28; --grain-opacity:.05; --grain-blend:overlay;
  --chart-grid:rgba(214,220,255,.09); --chart-cursor:rgba(214,220,255,.035); --series-empty:#20212E;
  --seq-1:#52462B; --seq-2:#715E30; --seq-3:#917735; --seq-4:#B1913C; --seq-5:#D3AC44;
}

/* ---------- not themed -------------------------------------------------- */
/* Series identity, motion and type are constant across all five. Only the
   light theme re-steps the series, because a mark stepped for a near-black
   ground disappears on paper. */
:root{
  --s-care:#C47171; --s-mind:#668CCC; --s-movement:#699C5E;
  --s-craft:#A877B4; --s-social:#AD8439; --s-screen:#179FA5;
  --pol-up:#11AB83; --pol-down:#D37642;
  --positive:#11AB83; --warn:#D37642;
  --positive-soft:rgba(17,171,131,.15); --warn-soft:rgba(211,118,66,.15);
  --drift-fill:.30;
  --focus:var(--accent);
  --grad-cta:linear-gradient(100deg,var(--accent),var(--accent-2));
  --grad-area:linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,transparent),transparent);
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --body:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:22px; --r-pill:999px;
  --pad:clamp(1rem,3.4vw,2rem);
}
:root[data-theme="paper"]{
  --s-care:#9C4E4F; --s-mind:#4468A5; --s-movement:#46773B;
  --s-craft:#83548E; --s-social:#886108; --s-screen:#009298;
  --pol-up:#0C8968; --pol-down:#B25720;
  --positive:#166E54; --warn:#B25720;
  --positive-soft:rgba(22,110,84,.12); --warn-soft:rgba(178,87,32,.12);
  --drift-fill:.46;
}

/* ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  min-height:100svh;
  background:var(--bg-wash),var(--bg);
  color:var(--ink);
  font-family:var(--body);
  font-size:15px;line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background .55s var(--ease),color .55s var(--ease);
}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:none;cursor:pointer}
svg{display:block}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---------- ambient ------------------------------------------------------ */

.amb{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.amb .bloom{position:absolute;inset:0;background:var(--bloom)}
.amb .vig{position:absolute;inset:0;background:var(--vignette)}
/* 5% of an feTurbulence — enough to stop the big soft gradients banding */
.amb .grain{
  position:absolute;inset:0;opacity:var(--grain-opacity);mix-blend-mode:var(--grain-blend);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.amb .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:calc(.5 * var(--field-alpha) + .12)}
.amb .o1{left:50%;top:12%;width:min(70vw,820px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 42%,transparent),transparent 66%);
  animation:drift-a 44s ease-in-out infinite}
.amb .o2{left:82%;top:64%;width:min(44vw,520px);aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(circle,color-mix(in srgb,var(--accent-2) 38%,transparent),transparent 68%);
  animation:drift-b 61s ease-in-out infinite}
@keyframes drift-a{0%,100%{margin:0 0}50%{margin:3vh -4vw}}
@keyframes drift-b{0%,100%{margin:0 0}50%{margin:-4vh 4vw}}

/* ---------- shell -------------------------------------------------------- */

.shell{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:0 var(--pad) 5rem}
@media(min-width:1440px){.shell{max-width:1320px}}

/* ---------- micro-caps: the single most characteristic thing here -------- */

.mc{font-family:var(--mono);font-size:10px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);font-weight:400;line-height:1.4}
.mc-s{font-family:var(--mono);font-size:9px;letter-spacing:.28em;text-transform:uppercase;color:var(--dim)}
.mc-l{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--dim)}
/* a 10px tracked cap is small on a phone; the whole scale steps up there */
@media(max-width:640px){
  .mc{font-size:11px;letter-spacing:.2em}
  .mc-s{font-size:10px;letter-spacing:.22em}
  .mc-l{font-size:12px;letter-spacing:.18em}
}

.num{font-weight:200;letter-spacing:-.025em;line-height:1;color:var(--ink)}
.num-hero{font-size:clamp(3rem,7.6vw,4.6rem);font-variant-numeric:proportional-nums}
.num-l{font-size:clamp(1.7rem,3.4vw,2.3rem)}
.num-m{font-size:1.35rem;font-weight:300}
.num-s{font-size:1.05rem;font-weight:400}
/* tabular only where digits must line up in a column; a big standalone
   numeral looks loose with every digit the width of a zero */
.tab{font-variant-numeric:tabular-nums}

/* ---------- header ------------------------------------------------------- */

.top{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line);
}
.top-in{max-width:1240px;margin:0 auto;padding:.85rem var(--pad);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.4rem}
@media(min-width:1440px){.top-in{max-width:1320px}}
.brand{display:flex;align-items:center;gap:.7rem;min-width:0;flex:0 0 auto}
.brand .mark{width:34px;height:34px;flex:none;color:var(--ink)}
.brand h1{font-size:1.32rem;font-weight:900;letter-spacing:-.035em;line-height:1;white-space:nowrap}
.brand p{margin-top:.3rem;white-space:nowrap}

.nav{display:flex;gap:.15rem;padding:.2rem;border:1px solid var(--line);border-radius:var(--r-pill);
  background:var(--surface);justify-self:center}
.nav button{padding:.46rem .82rem;border-radius:var(--r-pill);color:var(--dim);transition:.18s var(--ease);
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}
.nav button:hover{color:var(--ink)}
.nav button[aria-selected="true"]{color:var(--ink);background:var(--accent-soft);box-shadow:var(--accent-ring)}

.util{display:flex;align-items:center;gap:.55rem;justify-self:end}
.privacy{margin-right:.3rem;opacity:.85}
.icon-btn{width:36px;height:36px;min-width:36px;display:grid;place-items:center;color:var(--dim);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);transition:.2s var(--ease)}
.icon-btn svg{width:17px;height:17px}
.icon-btn:hover{color:var(--ink);border-color:var(--line-2)}
.icon-btn[aria-expanded="true"],
.icon-btn[aria-pressed="true"]{color:var(--ink);border-color:var(--line-accent)}

/* the running timer, visible from every view at every width */
.nowpill{display:flex;align-items:center;gap:.5rem;height:36px;padding:0 .8rem;border-radius:var(--r-pill);
  border:1px solid var(--line);background:var(--surface);transition:.2s var(--ease)}
.nowpill.on{border-color:var(--line-accent)}
.nowpill .dot{width:7px;height:7px;border-radius:50%;background:var(--dim-2);flex:none}
.nowpill.on .dot{background:var(--accent);animation:beat 2.4s ease-in-out infinite;
  box-shadow:0 0 calc(9px * var(--glow)) var(--accent)}
@keyframes beat{0%,100%{opacity:.45}50%{opacity:1}}
.nowpill b{font-family:var(--mono);font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink)}
.nowpill span{max-width:12ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- cards -------------------------------------------------------- */

.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px;align-content:start;align-items:start;padding-top:22px}
.card{
  grid-column:1/-1;position:relative;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  box-shadow:var(--lift);
  -webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  padding:clamp(1rem,2.2vw,1.5rem);
}
.card-h{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.card-h .mc{flex:none}
.card-h .sub{margin-left:auto;font-size:.8rem;color:var(--dim)}
/* a header carrying a control aligns on centres, not baselines —
   a padded button has no baseline to share with a label */
.card-h.with-action{align-items:center}
.card-h .card-actions{margin-left:auto;display:flex;align-items:center;gap:.75rem;flex:none}
.card-h .card-actions .sub{margin-left:0}
.card-h.with-action .ghost{flex:none}

.c6{grid-column:span 6}.c7{grid-column:span 7}.c5{grid-column:span 5}
.c8{grid-column:span 8}.c4{grid-column:span 4}.c3{grid-column:span 3}
.rule{height:1px;background:var(--line);border:0;margin:1rem 0}
/* Section hints. A tap-toggle rather than a hover tooltip: hover reveals
   nothing on a phone, and this app is mostly used on one. The expanding block
   also cannot be clipped by a card's bounds the way a floating bubble can. */
.hint-btn{
  position:relative;width:19px;height:19px;min-width:19px;flex:none;
  display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;
  color:var(--dim-2);font-family:var(--mono);font-size:10px;line-height:1;
  transition:.16s var(--ease)
}
/* the visible dot stays small; the thing you can actually hit is 44px */
.hint-btn::before{content:"";position:absolute;inset:-13px}
.hint-btn:hover,.hint-btn[aria-expanded="true"]{color:var(--ink);border-color:var(--line-accent)}
/* `hidden` toggles display, which cannot be animated — so the reveal used to
   pop open at full height. The 0fr→1fr grid trick animates to the content's
   natural height without measuring it in JavaScript. */
.hint-wrap{
  display:grid;grid-template-rows:0fr;
  opacity:0;visibility:hidden;margin-bottom:0;
  transition:grid-template-rows .32s var(--ease),opacity .2s var(--ease),
             margin-bottom .32s var(--ease),visibility 0s linear .32s;
}
.hint-wrap.open{
  grid-template-rows:1fr;opacity:1;visibility:visible;margin-bottom:1rem;
  transition:grid-template-rows .32s var(--ease),opacity .24s var(--ease) .05s,
             margin-bottom .32s var(--ease),visibility 0s;
}
.hint-body{
  overflow:hidden;min-height:0;
  padding:.75rem .85rem;
  border-left:2px solid var(--line-accent);border-radius:0 var(--r-m) var(--r-m) 0;
  background:var(--well);font-size:.85rem;line-height:1.6;color:var(--dim);max-width:70ch;
}
/* the padding has to collapse too, or a closed hint still occupies 1.5rem */
.hint-wrap:not(.open) .hint-body{padding-top:0;padding-bottom:0;transition:padding .32s var(--ease)}
.hint-wrap.open .hint-body{transition:padding .32s var(--ease)}
.hint-body strong{color:var(--ink-2);font-weight:500}
/* a card with no header carries the control in its corner instead */
.card > .hint-btn.corner{position:absolute;top:14px;right:14px}

.bank-split{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:clamp(1rem,3vw,2.4rem);align-items:center}
@media(max-width:820px){.bank-split{grid-template-columns:minmax(0,1fr);gap:1.2rem}}
.card.clickable{cursor:pointer;display:flex;flex-direction:column;align-self:stretch}
.card.clickable:hover{border-color:var(--line-2)}
.card.clickable .ghost{align-self:flex-start}

/* ---------- hero --------------------------------------------------------- */

.hero{display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr);gap:clamp(1rem,3vw,2.5rem);align-items:center}
.hero-stats{display:grid;gap:.2rem}
.hero-stats.trio{grid-template-columns:repeat(3,1fr);gap:0 1.6rem}
.stat{padding:.72rem 0;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:0}
.hero-stats:not(.trio) .stat:nth-last-child(-n+2){border-bottom:0}
.stat .v{display:flex;align-items:baseline;gap:.4rem}
.stat .mc{margin-top:.3rem;display:block}
.ring-wrap{position:relative;width:clamp(280px,38vw,420px);aspect-ratio:1;justify-self:center}
.ring-wrap svg{width:100%;height:100%;overflow:visible}
.ring-core{position:absolute;inset:0;display:grid;place-content:center;text-align:center;pointer-events:none;gap:.42rem}
.ring-core .num{text-shadow:0 0 calc(26px * var(--glow)) color-mix(in srgb,var(--accent) 38%,transparent)}
.ring-core .bankline{margin-top:.2rem;padding-top:.5rem;border-top:1px solid var(--line);color:var(--positive)}
.ring-core .bankline.over{color:var(--warn)}

/* top activities list beside the ring */
.top-acts{display:grid;gap:.55rem;align-content:center}
.ta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.55rem;padding:.45rem 0;width:100%;text-align:left;
  border-radius:var(--r-s);transition:.16s var(--ease)}
.ta:hover{background:var(--chart-cursor)}
.ta .dot{width:8px;height:8px;border-radius:2px;flex:none}
.ta .dot.hollow{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.ta .bar{grid-column:2/-1;height:2px;border-radius:2px;background:var(--track);overflow:hidden;margin-top:.3rem}
.ta .bar i{display:block;height:100%;border-radius:2px;opacity:.8}

/* ---------- controls ----------------------------------------------------- */

.controls{display:flex;gap:.9rem;align-items:center;flex-wrap:wrap}
.rail{display:flex;gap:.35rem;overflow-x:auto;flex:1 1 320px;padding:.2rem;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent);
          mask-image:linear-gradient(90deg,transparent,#000 16px,#000 calc(100% - 16px),transparent)}
.rail::-webkit-scrollbar{display:none}
.chip{
  display:inline-flex;align-items:center;gap:.45rem;flex:none;height:36px;padding:0 .8rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  transition:.18s var(--ease);white-space:nowrap
}
.chip .dot{width:7px;height:7px;border-radius:2px;flex:none}
.chip .dot.hollow{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.chip:hover{color:var(--ink);border-color:var(--line-2)}
.chip[aria-pressed="true"],.chip.on{color:var(--ink);border-color:transparent;background:var(--accent-soft);box-shadow:var(--accent-ring)}
.chip.sm{height:30px;padding:0 .62rem;font-size:9px}

.cta{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;flex:none;
  height:48px;padding:0 1.5rem;border-radius:var(--r-pill);
  background:var(--grad-cta);color:var(--on-accent);
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;
  box-shadow:var(--lift-accent);transition:.2s var(--ease)
}
.cta:hover{transform:translateY(-1px);filter:brightness(1.06)}
.cta .tri{width:0;height:0;border-left:8px solid currentColor;border-top:5px solid transparent;border-bottom:5px solid transparent}
.cta.running{background:none;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-accent)}
.cta.running:hover{filter:none;box-shadow:inset 0 0 0 1px var(--accent)}
.cta.running .tri{width:9px;height:10px;border:0;background:currentColor;border-radius:2px}

.seg{display:flex;gap:.15rem;padding:.2rem;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);flex:none}
.seg button{min-height:32px;padding:.3rem .68rem;border-radius:var(--r-pill);color:var(--dim);transition:.16s var(--ease);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.seg button:hover{color:var(--ink)}
.seg button[aria-pressed="true"],.seg button.on{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line)}

.ghost{display:inline-flex;align-items:center;gap:.4rem;min-height:36px;padding:.4rem .78rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--dim);
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;transition:.18s var(--ease)}
.ghost:hover{color:var(--ink);border-color:var(--line-2)}
.ghost svg{width:14px;height:14px}
.ghost.on{color:var(--ink);border-color:var(--line-accent)}

/* stepper: -  value  + */
.stepper{display:inline-grid;grid-template-columns:auto auto auto;align-items:center;gap:.1rem;
  border:1px solid var(--line);border-radius:var(--r-m);background:var(--well);padding:.2rem}
.stepper button{width:34px;height:34px;display:grid;place-items:center;color:var(--dim);border-radius:var(--r-s);
  font-size:1rem;line-height:1;transition:.16s}
.stepper button:hover{background:var(--surface-2);color:var(--ink)}
.stepper .val{min-width:4.2rem;text-align:center;font-family:var(--mono);font-size:.82rem;font-weight:600;
  color:var(--ink);font-variant-numeric:tabular-nums}

input[type=text],textarea,select{
  width:100%;background:var(--well);border:1px solid var(--line);border-radius:var(--r-m);
  padding:.6rem .7rem;font-size:.88rem;color:var(--ink);transition:.18s var(--ease)
}
textarea{resize:vertical;min-height:74px;line-height:1.55;font-family:var(--body)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--line-accent)}
input::placeholder,textarea::placeholder{color:var(--dim-2)}

/* ---------- charts ------------------------------------------------------- */

.chart{width:100%;position:relative}
.chart svg{width:100%;display:block;overflow:visible;touch-action:pan-y}
.ax{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;fill:var(--dim)}
.ax-y{paint-order:stroke fill;stroke:var(--surface-flat);stroke-width:3px;stroke-linejoin:round}
@media(max-width:640px){.ax{font-size:10px;letter-spacing:.1em}}
.gridline{stroke:var(--chart-grid);stroke-width:1}
/* the one arc that is still being written breathes; the rest of the ring is
   still, so the live one is unambiguous without being loud */
.live{animation:arc-breathe 4s ease-in-out infinite}
@keyframes arc-breathe{0%,100%{stroke-opacity:.72}50%{stroke-opacity:1}}
.legend{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:.7rem}
.legend i{display:inline-flex;align-items:center;gap:.4rem;font-style:normal}
.legend .key{width:12px;height:3px;border-radius:2px;flex:none}
.legend .key.hollow{height:9px;background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor;border-radius:2px}

.tip{
  position:absolute;z-index:40;pointer-events:none;opacity:0;transform:translateY(2px);
  background:color-mix(in srgb,var(--surface-flat) 94%,transparent);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  border:1px solid var(--line-2);border-radius:var(--r-m);padding:.6rem .7rem;
  box-shadow:var(--lift);min-width:132px;transition:opacity .12s var(--ease),transform .12s var(--ease)
}
.tip.show{opacity:1;transform:translateY(0)}
.tip .th{display:block;margin-bottom:.45rem}
.tip .tr{display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:.5rem;padding:.12rem 0}
.tip .tr .key{width:12px;height:2px;border-radius:2px}
.tip .tr .key.hollow{height:8px;background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.tip .tr b{font-weight:500;font-size:.82rem;color:var(--ink);font-variant-numeric:tabular-nums}
.tip .tr span{font-size:.78rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- rows, meters, lists ------------------------------------------ */

.rows{display:grid}
.row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  padding:.7rem .2rem;border-bottom:1px solid var(--line);min-height:48px;
  text-align:left;width:100%;transition:.16s var(--ease)
}
.row:last-child{border-bottom:0}
.row:hover{background:var(--chart-cursor)}
.row.clickable{cursor:pointer}
.row .dot{width:9px;height:9px;border-radius:2px;flex:none}
.row .dot.hollow{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}
.row .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;color:var(--ink-2)}
.row .rt{display:flex;align-items:baseline;gap:.55rem;flex:none}
.row .v{font-size:.92rem;color:var(--ink);font-variant-numeric:tabular-nums}
.row .sh{min-width:3.2em;text-align:right}
.row .spark{width:96px;flex:none;opacity:.9}
.row .v{min-width:5.4em;text-align:right}
.note-edit{padding:.2rem 0 .9rem}
.note-edit textarea{min-height:64px}
.delta{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.delta.good{color:var(--positive)}.delta.bad{color:var(--warn)}.delta.flat{color:var(--dim-2)}

.meter{height:6px;border-radius:3px;background:var(--track);overflow:hidden;position:relative}
.meter i{display:block;height:100%;border-radius:3px;background:var(--pol-up);transition:width .45s var(--ease)}
.meter i.over{background:var(--warn)}
.meter .limit{position:absolute;top:-3px;bottom:-3px;width:1px;background:var(--line-2)}

/* composition pill: the one place a stack is legal, because category is a
   partition — 2px surface gaps do the separating, never a stroke */
.pill-stack{display:flex;height:16px;border-radius:var(--r-s);overflow:hidden;gap:2px;background:var(--track)}
.pill-stack i{display:block;height:100%;min-width:3px}
.pill-stack i.hollow{background:transparent!important;box-shadow:inset 0 0 0 1.5px currentColor}

/* ---------- tags & notes ------------------------------------------------- */

.tagchip{
  display:inline-flex;align-items:center;gap:.4rem;min-height:30px;padding:.28rem .66rem;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--surface);color:var(--dim);
  font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;transition:.18s var(--ease)
}
.tagchip::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.55;flex:none}
.tagchip:has(.dot)::before{display:none}
.tagchip:hover{color:var(--ink);border-color:var(--line-2)}
.tagchip.on{color:var(--ink);border-color:transparent;background:var(--accent-soft);box-shadow:var(--accent-ring)}
/* Tags never get their own hue. A bag of coloured tag chips would wreck a
   palette that spends its colour on the six categories; tags are told apart
   by their labels and by where they appear, which is what labels are for. */
.tags{display:flex;gap:.4rem;flex-wrap:wrap}

.note{background:var(--well);border:1px solid var(--line);border-radius:var(--r-m);padding:.8rem .9rem}
.note p{font-size:.88rem;line-height:1.6;color:var(--ink-2)}
.note .mc{margin-bottom:.45rem}
.notes-tl{display:grid;gap:.1rem}
.nt{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.7rem 0;border-bottom:1px solid var(--line)}
.nt:last-child{border-bottom:0}
.nt .when{white-space:nowrap}
.nt p{font-size:.88rem;line-height:1.55;color:var(--ink-2)}

.empty{padding:1.6rem .2rem;text-align:center;color:var(--dim-2);font-size:.86rem;line-height:1.6}

/* ---------- detail panel ------------------------------------------------- */

.scrim{position:fixed;inset:0;z-index:80;background:color-mix(in srgb,var(--bg) 72%,transparent);
  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .25s var(--ease)}
.scrim.show{opacity:1}
.panel{
  position:fixed;z-index:81;top:0;right:0;bottom:0;width:min(560px,100vw);
  background:var(--bg);border-left:1px solid var(--line);box-shadow:var(--lift);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .32s var(--ease)
}
.panel.show{transform:translateX(0)}
.panel-h{display:flex;align-items:center;gap:.8rem;padding:1rem var(--pad);border-bottom:1px solid var(--line);flex:none}
.panel-h .t{min-width:0;flex:1}
.panel-h h2{font-size:1.15rem;font-weight:400;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.panel-b{overflow-y:auto;padding:1rem var(--pad) 3rem;display:grid;gap:1.2rem;align-content:start}
.panel-sec{border-top:1px solid var(--line);padding-top:1rem}
.panel-sec > .mc:first-child{display:block;margin-bottom:.85rem}
.panel-sec:first-child{border-top:0;padding-top:0}

/* ---------- toasts ------------------------------------------------------- */

.toasts{position:fixed;z-index:90;right:var(--pad);bottom:1.4rem;display:grid;gap:.6rem;
  width:min(370px,calc(100vw - 2 * var(--pad)));pointer-events:none;
  transition:transform .32s var(--ease)}
body.panel-open .toasts{transform:translateX(max(-560px,calc(-100vw + var(--pad) + 16px)))}
.toast{
  pointer-events:auto;background:color-mix(in srgb,var(--surface-flat) 95%,transparent);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  border:1px solid var(--line-2);border-left:2px solid var(--dim);border-radius:var(--r-l);
  padding:.8rem .9rem;box-shadow:var(--lift);
  display:grid;grid-template-columns:1fr auto;gap:.45rem .8rem;align-items:start;
  animation:toast-in .34s var(--ease);
  transition:opacity .2s var(--ease),transform .2s var(--ease)
}
.toast.out{opacity:0;transform:translateY(6px)}
.toast.nudge{border-left-color:var(--accent)}
.toast.firm{border-left-color:var(--warn)}
.toast .mc,.toast .mc-s{grid-column:1;grid-row:1}
.toast p{grid-column:1/-1;grid-row:2}
.toast p{font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.toast .x{width:28px;height:28px;display:grid;place-items:center;color:var(--dim);border-radius:var(--r-s);grid-row:1;grid-column:2;margin:-.2rem -.2rem 0 0}
.toast .x:hover{background:var(--surface-2);color:var(--ink)}
@keyframes toast-in{from{opacity:0;transform:translateY(10px)}}

/* ---------- theme switcher ----------------------------------------------- */

.pop{
  position:absolute;top:calc(100% + 8px);right:0;z-index:70;width:min(268px,86vw);
  background:color-mix(in srgb,var(--surface-flat) 96%,transparent);
  -webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
  border:1px solid var(--line);border-radius:var(--r-l);box-shadow:var(--lift);padding:.85rem;
  animation:pop-in .22s var(--ease)
}
@keyframes pop-in{from{opacity:0;transform:translateY(-6px)}}
.pop h3{margin-bottom:.7rem}
.themes{display:grid;gap:.25rem}
.th-opt{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.7rem;
  padding:.5rem .55rem;border-radius:var(--r-m);min-height:44px;transition:.16s;text-align:left;width:100%}
.th-opt:hover{background:var(--surface-2)}
.th-opt .sw{display:flex;gap:3px;flex:none}
.th-opt .sw i{width:9px;height:16px;border-radius:2px;display:block}
.th-opt .nm{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.th-opt[aria-pressed="true"] .nm{color:var(--ink)}
.th-opt .tick{color:var(--accent);opacity:0}
.th-opt[aria-pressed="true"] .tick{opacity:1}

/* ---------- mobile tab bar ----------------------------------------------- */

.tabs{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:color-mix(in srgb,var(--bg) 92%,transparent);
  -webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tabs-in{display:grid;grid-template-columns:repeat(5,1fr)}
.tabs button{display:grid;justify-items:center;gap:.24rem;padding:.6rem .2rem .55rem;color:var(--dim-2);min-height:56px;transition:.16s}
.tabs button svg{width:19px;height:19px}
.tabs button[aria-selected="true"]{color:var(--accent)}
.tabs button span{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase}

/* ---------- responsive --------------------------------------------------- */

@media(max-width:1099px){
  .c6,.c7,.c5,.c8,.c4,.c3{grid-column:1/-1}
  .card.clickable{align-self:auto}
  .hero{grid-template-columns:1fr;gap:1.4rem;justify-items:center}
  .hero-stats,.top-acts{width:100%;max-width:520px}
  .hero-stats{grid-template-columns:1fr 1fr;gap:0 1.4rem}
  .ring-wrap{width:min(78vw,360px)}
}
@media(max-width:860px){
  .nav{display:none}
  .tabs{display:block}
  .shell{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .privacy{display:none}
  .top-in{grid-template-columns:1fr auto;gap:.8rem}
}
@media(max-width:640px){
  body{font-size:15px}
  .shell{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .tabs{display:block}
  .grid{gap:14px;padding-top:16px}
  .card{border-radius:var(--r-l);padding:1rem .9rem}
  .brand h1{font-size:1.14rem;letter-spacing:-.03em}
  .brand .mark{width:30px;height:30px}
  .brand p{display:none}
  .hero-stats{grid-template-columns:1fr 1fr}
  .hero-stats.trio{grid-template-columns:1fr;gap:0}
  .hero-stats.trio .stat:nth-last-child(-n+2){border-bottom:1px solid var(--line)}
  .hero-stats.trio .stat:last-child{border-bottom:0}
  .ring-wrap{width:min(84vw,340px)}
  .controls{gap:.6rem}
  .rail{flex-basis:100%;order:3}
  .cta{flex:1;min-width:150px;height:52px}
  .ghost{min-height:44px}
  .chip{height:40px}
  .chip.sm{height:34px}
  .seg button{min-height:38px;padding:.4rem .7rem}
  .toasts{right:.6rem;left:.6rem;bottom:calc(70px + env(safe-area-inset-bottom));width:auto}
  .panel{width:100vw;border-left:0}
  .panel-h .icon-btn{width:44px;height:44px;min-width:44px}
  .toast .x{width:44px;height:44px}
  .row{min-height:52px}
  #view-rules .row{grid-template-columns:auto 1fr;row-gap:.5rem}
  #view-rules .row .rt{grid-column:1/-1;justify-content:flex-start}
  .row .spark{width:56px}
  .row .v{min-width:4.6em}
}

/* ---------- motion ------------------------------------------------------- */
/* Motion that carries information keeps running — the ring still advances and
   the timer still ticks. Only the mood is suspended. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  .amb .orb,.nowpill.on .dot,.live{animation:none!important}
  .mote{display:none}
}
:root[data-motion="reduce"] .amb .orb,
:root[data-motion="reduce"] .nowpill.on .dot{animation:none}
:root[data-motion="reduce"] .mote{display:none}
:root[data-motion="reduce"] *{animation-duration:.001ms!important;transition-duration:.001ms!important}