/* ADHD Study Pack (Focus Dial) — moved out of the page for the CSP. */
[hidden]{display:none!important}

/* ============================================================
   FOCUS DIAL — tokens
   Light is the bare :root palette; dark redefines tokens only.
   ============================================================ */
:root{
  --bg:#EDF0EE; --bg-2:#E4E9E6; --surface:#F8FAF8; --surface-2:#EAEFEC; --surface-3:#DFE6E2;
  --line:#D4DCD8; --line-2:#C2CDC8;
  --ink:#141B19; --ink-2:#3E4A47; --muted:#5B6865;
  --focus:#CC4520; --rest:#0A7F5F; --long:#5B4FD1; --alert:#9A5F00;   /* each passes 4.5:1 with white text */
  --focus-wash:rgba(210,74,34,.10); --rest-wash:rgba(10,127,95,.10); --long-wash:rgba(91,79,209,.10);
  --accent:var(--focus); --accent-ink:#FFFFFF;
  --good:#0A7F5F; --warn:#9A5F00; --crit:#B23B2C;
  --grid:rgba(20,27,25,.08);
  --shadow-1:0 1px 2px rgba(20,27,25,.05);
  --shadow-2:0 1px 2px rgba(20,27,25,.05), 0 10px 30px -18px rgba(20,27,25,.45);
  --shadow-3:0 24px 60px -24px rgba(20,27,25,.40), 0 2px 6px rgba(20,27,25,.08);
  --font-display:'Bricolage Grotesque','Trebuchet MS',system-ui,sans-serif;
  --font-ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
  --r-s:8px; --r-m:12px; --r-l:18px; --r-xl:26px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0D1114; --bg-2:#080B0D; --surface:#141A1D; --surface-2:#1B2327; --surface-3:#232D31;
    --line:#263034; --line-2:#33403F;
    --ink:#E7EDEA; --ink-2:#B3C0BC; --muted:#8C9A96;
    --focus:#EE6033; --rest:#23A48D; --long:#8B7DE8; --alert:#B8851F;
    --focus-wash:rgba(238,96,51,.13); --rest-wash:rgba(35,164,141,.13); --long-wash:rgba(139,124,232,.13);
    --accent-ink:#0D1114;
    --good:#23A48D; --warn:#D9A63A; --crit:#E4685C;
    --grid:rgba(231,237,234,.09);
    --shadow-1:0 1px 2px rgba(0,0,0,.4);
    --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
    --shadow-3:0 28px 70px -28px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.5);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0D1114; --bg-2:#080B0D; --surface:#141A1D; --surface-2:#1B2327; --surface-3:#232D31;
  --line:#263034; --line-2:#33403F;
  --ink:#E7EDEA; --ink-2:#B3C0BC; --muted:#8C9A96;
  --focus:#EE6033; --rest:#23A48D; --long:#8B7DE8; --alert:#B8851F;
  --focus-wash:rgba(238,96,51,.13); --rest-wash:rgba(35,164,141,.13); --long-wash:rgba(139,124,232,.13);
  --accent-ink:#0D1114;
  --good:#23A48D; --warn:#D9A63A; --crit:#E4685C;
  --grid:rgba(231,237,234,.09);
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 1px 2px rgba(0,0,0,.4), 0 12px 32px -20px rgba(0,0,0,.9);
  --shadow-3:0 28px 70px -28px rgba(0,0,0,.85), 0 2px 8px rgba(0,0,0,.5);
  color-scheme:dark;
}
:root[data-accent="rest"]{--accent:var(--rest)}
:root[data-accent="long"]{--accent:var(--long)}
:root[data-accent="alert"]{--accent:var(--alert)}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-ui); font-size:calc(14px*var(--ts,1)); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-.015em}
button,input,select,textarea{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:99px; border:3px solid transparent; background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ---------- shell ---------- */
.app{display:grid; grid-template-columns:74px minmax(0,1fr); height:100dvh; min-height:620px}
.rail{
  background:var(--surface); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:14px 0 12px;
}
.brand{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;margin-bottom:10px;
  background:var(--accent); color:var(--accent-ink); font-family:var(--font-display); font-weight:700; font-size:calc(17px*var(--ts,1));
  box-shadow:var(--shadow-2);
}
.rail-btn{
  width:52px; padding:8px 0 6px; border:0; background:transparent; border-radius:12px; cursor:pointer;
  display:grid; place-items:center; gap:3px; color:var(--muted); transition:background .16s, color .16s;
}
.rail-btn svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rail-btn span{font-size:calc(9.5px*min(var(--ts,1),1.15)); letter-spacing:.055em; text-transform:uppercase; font-weight:600}
.rail-btn:hover{background:var(--surface-2); color:var(--ink-2)}
.rail-btn[aria-current="page"]{background:var(--surface-3); color:var(--ink)}
.rail-btn[aria-current="page"] svg{stroke:var(--accent)}
.rail-sp{flex:1}

.main{display:flex; flex-direction:column; min-width:0; min-height:0}
.topbar{
  display:flex; align-items:center; gap:14px; padding:12px 20px; border-bottom:1px solid var(--line);
  background:var(--surface); min-height:58px; flex-wrap:wrap;
}
.topbar .date{font-family:var(--font-mono); font-size:calc(11.5px*var(--ts,1)); color:var(--muted); letter-spacing:.03em; text-transform:uppercase}
.topbar .sep{width:1px;height:22px;background:var(--line)}
.top-sp{flex:1}
.view{display:none; overflow:auto; padding:22px; flex:1; min-height:0}
.view.on{display:block}
.view-head{display:flex; align-items:flex-end; gap:14px; margin-bottom:18px; flex-wrap:wrap}
.view-head h2{font-size:calc(22px*var(--ts,1)); font-weight:700}
.view-head p{margin:0; color:var(--muted); font-size:calc(13px*var(--ts,1)); max-width:60ch}

/* ---------- primitives ---------- */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:10px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-2);
  font-size:calc(13px*var(--ts,1)); font-weight:600; cursor:pointer; transition:background .15s,border-color .15s,color .15s,transform .1s;
}
.btn:hover{background:var(--surface-2); color:var(--ink); border-color:var(--line-2)}
.btn:active{transform:translateY(1px)}
.btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.06); color:var(--accent-ink)}
.btn.ghost{background:transparent; border-color:transparent; color:var(--muted)}
.btn.ghost:hover{background:var(--surface-2); color:var(--ink)}
.btn.sm{padding:5px 9px; font-size:calc(12px*var(--ts,1)); border-radius:8px}
.btn.icon{padding:7px; border-radius:9px}
.btn[disabled]{opacity:.45; pointer-events:none}
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-1)}
.pad{padding:16px 18px}
.eyebrow{
  font-family:var(--font-mono); font-size:calc(10.5px*var(--ts,1)); letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:99px;
  background:var(--surface-2); border:1px solid var(--line); font-size:calc(11.5px*var(--ts,1)); font-weight:600; color:var(--ink-2);
}
.chip.on{background:var(--accent); border-color:transparent; color:var(--accent-ink)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--muted); flex:none}
.field{display:flex; flex-direction:column; gap:5px}
.field > label{font-size:calc(11.5px*var(--ts,1)); font-weight:600; color:var(--muted); letter-spacing:.02em}
input[type="text"],input[type="number"],input[type="time"],input[type="date"],input[type="url"],select,textarea{
  background:var(--bg); border:1px solid var(--line); border-radius:9px; padding:8px 10px; font-size:calc(13px*var(--ts,1)); width:100%;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--focus-wash)}
textarea{resize:vertical; font-family:inherit; line-height:1.55}
input[type="range"]{accent-color:var(--accent); width:100%; height:20px}
input[type="checkbox"]{accent-color:var(--accent); width:16px; height:16px}
.switch-row{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line)}
.switch-row:last-child{border-bottom:0}
.switch-row .lbl{font-size:calc(13px*var(--ts,1)); font-weight:500}
.switch-row .hint{font-size:calc(11.5px*var(--ts,1)); color:var(--muted); margin-top:1px}
.num{font-family:var(--font-mono); font-variant-numeric:tabular-nums}
.grid{display:grid; gap:16px}
.scroll-y{overflow:auto}
.empty{
  border:1px dashed var(--line-2); border-radius:var(--r-m); padding:18px; text-align:center;
  color:var(--muted); font-size:calc(12.5px*var(--ts,1));
}

/* ---------- focus view ---------- */
.focus-wrap{display:grid; grid-template-columns:minmax(240px,1fr) minmax(420px,1.35fr) minmax(250px,1fr); gap:18px; align-items:start; max-width:1420px; margin:0 auto}
.stage{
  position:relative; border-radius:var(--r-xl); border:1px solid var(--line); background:var(--surface);
  box-shadow:var(--shadow-2); padding:22px 22px 20px; display:flex; flex-direction:column; align-items:center; gap:14px;
  overflow:hidden;
}
.stage::before{
  content:""; position:absolute; inset:-40% -20% auto; height:70%; pointer-events:none;
  background:radial-gradient(60% 100% at 50% 0%, var(--phase-wash), transparent 70%); opacity:.9;
}
.stage-head{display:flex; align-items:center; gap:10px; width:100%; position:relative}
.phase-pill{
  display:inline-flex; align-items:center; gap:7px; padding:5px 12px; border-radius:99px;
  background:var(--phase-wash); color:var(--phase); font-weight:700; font-size:calc(12px*var(--ts,1)); letter-spacing:.02em;
}
.phase-pill .dot{background:var(--phase); animation:breathe 2.6s ease-in-out infinite}
.paused .phase-pill .dot{animation:none; opacity:.5}
@keyframes breathe{0%,100%{transform:scale(.8); opacity:.55} 50%{transform:scale(1.25); opacity:1}}
.dial{position:relative; width:min(340px,54vh); aspect-ratio:1}
.dial svg{width:100%; height:100%; display:block; transform:rotate(-90deg)}
.dial .track{stroke:var(--surface-3); fill:none}
.dial .prog{stroke:var(--phase); fill:none; stroke-linecap:round; transition:stroke-dashoffset .35s linear, stroke .3s}
.dial .tick{stroke:var(--line-2)}
.dial .tick.maj{stroke:var(--muted)}
.dial-face{position:absolute; inset:0; display:grid; place-content:center; text-align:center; gap:2px}
.clock{
  font-family:var(--font-display); font-weight:700; font-size:clamp(46px,8.4vh,68px); line-height:1;
  letter-spacing:-.035em; font-variant-numeric:tabular-nums; color:var(--ink);
}
.clock.sub{font-size:calc(13px*var(--ts,1)); font-weight:600; letter-spacing:.02em}
.dial-task{font-size:calc(12.5px*var(--ts,1)); color:var(--muted); max-width:200px; margin:4px auto 0; line-height:1.35}
.dial-end{font-family:var(--font-mono); font-size:calc(11px*var(--ts,1)); color:var(--muted); letter-spacing:.03em}
.controls{display:flex; align-items:center; gap:10px; position:relative}
.btn-run{
  width:64px;height:64px;border-radius:50%;border:0; cursor:pointer; display:grid; place-items:center;
  background:var(--phase); color:var(--accent-ink); box-shadow:0 10px 26px -12px var(--phase);
  transition:transform .12s, filter .15s;
}
.btn-run:hover{filter:brightness(1.07)}
.btn-run:active{transform:scale(.95)}
.btn-run svg{width:24px;height:24px;fill:currentColor;stroke:none}
.pips{display:flex; gap:6px; align-items:center}
.pip{width:9px;height:9px;border-radius:50%; border:1.5px solid var(--line-2); background:transparent}
.pip.done{background:var(--focus); border-color:var(--focus)}
.pip.now{border-color:var(--phase); box-shadow:0 0 0 3px var(--phase-wash)}
.quick{display:flex; gap:8px; flex-wrap:wrap; justify-content:center; position:relative}
.side-stack{display:flex; flex-direction:column; gap:14px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; flex-wrap:wrap}
.panel-head h3{font-size:calc(13.5px*var(--ts,1)); font-weight:700; letter-spacing:-.01em}

/* ---------- lists / tasks ---------- */
.task{
  display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:var(--r-m);
  border:1px solid transparent; transition:background .14s,border-color .14s; cursor:default;
  flex-wrap:wrap;   /* at large text the buttons drop below the title instead of crushing it */
}
.task:hover{background:var(--surface-2); border-color:var(--line)}
.task.active{background:var(--focus-wash); border-color:color-mix(in srgb, var(--focus) 35%, transparent)}
.task.done .t-title{text-decoration:line-through; color:var(--muted)}
.task .box{
  width:17px;height:17px;border-radius:6px;border:1.6px solid var(--line-2); background:var(--surface); flex:none;
  margin-top:2px; cursor:pointer; display:grid; place-items:center; padding:0;
}
.task.done .box{background:var(--rest); border-color:var(--rest)}
.task .box svg{width:11px;height:11px;stroke:var(--accent-ink); fill:none; stroke-width:2.6; opacity:0}
.task.done .box svg{opacity:1}
.t-body{flex:1 1 55%; min-width:0}
.t-actions{margin-left:auto}
.t-title{font-size:calc(13px*var(--ts,1)); font-weight:500; line-height:1.35; word-break:break-word}
.t-meta{display:flex; align-items:center; gap:8px; margin-top:4px; flex-wrap:wrap}
.t-meta .m{font-family:var(--font-mono); font-size:calc(10.5px*var(--ts,1)); color:var(--muted); letter-spacing:.02em}
.t-actions{display:flex; gap:2px; opacity:0; transition:opacity .14s}
.task:hover .t-actions,.task.active .t-actions{opacity:1}
.energy{width:6px; border-radius:99px; align-self:stretch; background:var(--muted); flex:none}
.energy.low{background:var(--long)} .energy.med{background:var(--alert)} .energy.high{background:var(--focus)}
.stack{display:flex; flex-direction:column; gap:2px}

/* ---------- calendar ---------- */
.cal{display:grid; grid-template-columns:52px repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-radius:var(--r-m); overflow:hidden; background:var(--surface)}
.cal-h{padding:8px 6px; text-align:center; border-bottom:1px solid var(--line); background:var(--surface-2); position:sticky; top:0; z-index:2}
.cal-h .d{font-size:calc(11px*var(--ts,1)); color:var(--muted); text-transform:uppercase; letter-spacing:.06em; font-weight:600}
.cal-h .n{font-family:var(--font-display); font-size:calc(16px*var(--ts,1)); font-weight:600}
.cal-h.today .n{color:var(--accent)}
.cal-body{position:relative; border-right:1px solid var(--line); min-height:0}
.cal-body:last-child{border-right:0}
.cal-hours{border-right:1px solid var(--line)}
/* --calh is set by renderCalendar so the rows grow with the text size and the
   event positions (computed in JS from the same number) stay on the lines. */
.hour{height:var(--calh,44px); border-bottom:1px solid var(--grid); position:relative}
.hour-lbl{height:var(--calh,44px); font-family:var(--font-mono); font-size:calc(9.5px*min(var(--ts,1),1.25)); color:var(--muted); text-align:right; padding:2px 6px 0 0; border-bottom:1px solid transparent}
.ev{
  position:absolute; left:3px; right:3px; border-radius:7px; padding:3px 6px; overflow:hidden; cursor:pointer;
  background:var(--surface-2); border-left:3px solid var(--muted); font-size:calc(11px*var(--ts,1)); line-height:1.25;
  box-shadow:var(--shadow-1); transition:filter .15s;
}
.ev:hover{filter:brightness(.97)}
.ev .ttl{font-weight:600; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
/* The column is only so wide; the block's aria-label always carries the full
   time, so clipping the visible label is safe. */
.ev .tm{font-family:var(--font-mono); font-size:calc(9.5px*min(var(--ts,1),1.25)); color:var(--muted); white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.ev.study{background:var(--focus-wash); border-left-color:var(--focus)}
.ev.class{background:var(--long-wash); border-left-color:var(--long)}
.ev.break{background:var(--rest-wash); border-left-color:var(--rest)}
.ev.gcal{background:var(--surface-2); border-left-style:dashed; border-left-color:var(--ink-2); opacity:.96}
.ev.gfocus{background:var(--focus-wash); border-left-style:dashed; border-left-color:var(--focus)}
.ev.free{opacity:.72}
.ev .src{font-family:var(--font-mono); font-size:calc(8.5px*var(--ts,1)); letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.ev.allday{border-radius:5px; font-size:calc(10px*var(--ts,1)); padding:1px 6px}
.gstat{display:flex; align-items:center; gap:7px; font-size:calc(12px*var(--ts,1)); margin-bottom:10px}
.gstat .dot{width:8px;height:8px}
.callist{display:flex; flex-direction:column; gap:2px; margin:2px 0 10px}
.callist label{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:8px; font-size:calc(12.5px*var(--ts,1)); cursor:pointer}
.callist label:hover{background:var(--surface-2)}
.callist .swatch{width:9px;height:9px;border-radius:3px;background:var(--muted);flex:none}
.gerr{border:1px solid var(--line); border-left:3px solid var(--alert); border-radius:8px; padding:9px 11px; font-size:calc(12px*var(--ts,1)); line-height:1.45; color:var(--ink-2); margin-bottom:10px}
.gerr strong{display:block; color:var(--ink); margin-bottom:2px}
.nowline{position:absolute; left:0; right:0; height:2px; background:var(--focus); z-index:3; pointer-events:none}
.nowline::before{content:""; position:absolute; left:-4px; top:-3px; width:8px;height:8px;border-radius:50%;background:var(--focus)}

/* ---------- notes ---------- */
.board{position:relative; min-height:520px; border-radius:var(--r-l); border:1px solid var(--line);
  background:var(--surface-2) ; background-image:radial-gradient(var(--line-2) 1px, transparent 1px); background-size:22px 22px; overflow:auto}
.sticky{
  position:absolute; width:196px; min-height:110px; border-radius:4px; padding:11px 12px 26px;
  box-shadow:var(--shadow-2); cursor:grab; display:flex; flex-direction:column; gap:6px;
  color:#1A1410; font-size:calc(12.5px*var(--ts,1)); line-height:1.45; touch-action:none;
}
.sticky.drag{cursor:grabbing; box-shadow:var(--shadow-3); z-index:50; transform:rotate(-1deg) scale(1.02)}
.sticky textarea{
  background:transparent; border:0; padding:0; resize:none; color:inherit; font-size:calc(12.5px*var(--ts,1)); line-height:1.45; min-height:64px; width:100%;
}
.sticky textarea:focus{outline:none; box-shadow:none}
.sticky .s-foot{position:absolute; left:10px; right:8px; bottom:6px; display:flex; align-items:center; gap:4px; justify-content:space-between}
.sticky .s-tag{font-family:var(--font-mono); font-size:calc(9px*var(--ts,1)); letter-spacing:.06em; text-transform:uppercase; opacity:.6}
.sticky .s-btn{border:0;background:transparent;cursor:pointer;padding:2px;border-radius:5px;opacity:.45;color:inherit}
.sticky .s-btn:hover{opacity:1; background:rgba(0,0,0,.08)}
.sticky .s-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.sticky.pinned{box-shadow:var(--shadow-3), 0 0 0 2px var(--accent)}

/* ---------- calm ---------- */
.breath-stage{display:grid; place-items:center; gap:18px; padding:26px 0}
.orb{
  width:220px;height:220px;border-radius:50%; display:grid; place-items:center; position:relative;
  background:radial-gradient(circle at 50% 45%, var(--long-wash), transparent 68%);
}
.orb .ring{position:absolute; inset:0; border-radius:50%; border:2px solid var(--long); opacity:.35}
.orb .core{
  width:96px;height:96px;border-radius:50%; background:var(--long); opacity:.85;
  transition:transform var(--bt,4s) cubic-bezier(.37,0,.63,1); transform:scale(.55);
  box-shadow:0 0 60px -10px var(--long);
}
.orb.expand .core{transform:scale(1.5)}
.orb-txt{position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-size:calc(17px*var(--ts,1)); font-weight:600; color:var(--ink); pointer-events:none}
.orb-count{font-family:var(--font-mono); font-size:calc(12px*var(--ts,1)); color:var(--muted); margin-top:64px}
@media (prefers-reduced-motion:reduce){
  .orb .core{transition:none} .phase-pill .dot{animation:none}
  *{scroll-behavior:auto !important}
}
.scale-row{display:flex; gap:6px}
.scale-btn{
  flex:1; padding:9px 0; border-radius:9px; border:1px solid var(--line); background:var(--surface);
  font-family:var(--font-mono); font-size:calc(12.5px*var(--ts,1)); cursor:pointer; color:var(--ink-2); transition:.14s;
}
.scale-btn:hover{border-color:var(--line-2); background:var(--surface-2)}
.scale-btn.on{background:var(--accent); border-color:transparent; color:var(--accent-ink); font-weight:600}

/* ---------- sound ---------- */
.mix{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:12px}
.layer{border:1px solid var(--line); border-radius:var(--r-m); padding:12px 13px; background:var(--surface); transition:border-color .15s, background .15s}
.layer.on{border-color:color-mix(in srgb, var(--accent) 45%, transparent); background:var(--surface-2)}
.layer .lh{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:2px}
.layer .nm{font-size:calc(13px*var(--ts,1)); font-weight:600}
.layer .hint{font-size:calc(11px*var(--ts,1)); color:var(--muted); min-height:30px}
.pwr{width:34px;height:20px;border-radius:99px;border:1px solid var(--line-2); background:var(--surface-3); cursor:pointer; position:relative; padding:0; flex:none}
.pwr::after{content:""; position:absolute; top:2px; left:2px; width:14px;height:14px;border-radius:50%; background:var(--muted); transition:.16s}
.layer.on .pwr{background:var(--accent); border-color:transparent}
.layer.on .pwr::after{transform:translateX(14px); background:var(--accent-ink)}

/* ---------- presets & chips ---------- */
.preset-chip.active, [data-preset].active {
  background: var(--accent) !important;
  border-color: transparent !important;
  color: var(--accent-ink) !important;
  font-weight: 600;
}
.preset-chip-custom {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
  transition: .14s;
}
.preset-chip-custom.active {
  background: var(--accent);
  border-color: transparent;
}
.preset-chip-custom .preset-chip {
  border: 0 !important;
  background: transparent !important;
  border-radius: 8px 0 0 8px;
  padding-right: 5px;
}
.preset-chip-custom.active .preset-chip {
  color: var(--accent-ink) !important;
}
.preset-del {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-right: 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: .14s;
  padding: 0;
}
.preset-del:hover {
  background: color-mix(in srgb, var(--ink) 12%, transparent);
  color: var(--ink);
}
.preset-chip-custom.active .preset-del {
  color: var(--accent-ink);
  opacity: .8;
}
.preset-chip-custom.active .preset-del:hover {
  background: color-mix(in srgb, var(--accent-ink) 25%, transparent);
  opacity: 1;
}

/* ---------- stats ---------- */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(150px*min(var(--ts,1),1.5))),1fr)); gap:12px}
.kpi{padding:13px 15px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line)}
.kpi .v{font-family:var(--font-display); font-size:calc(27px*var(--ts,1)); font-weight:700; letter-spacing:-.03em; font-variant-numeric:tabular-nums; line-height:1.1}
.kpi .k{font-family:var(--font-mono); font-size:calc(10px*var(--ts,1)); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-top:3px; overflow-wrap:anywhere}
.kpi .d{font-size:calc(11.5px*var(--ts,1)); color:var(--ink-2); margin-top:5px}
.chart-card{padding:16px 18px 12px}
.chart-card h3{font-size:calc(13.5px*var(--ts,1)); font-weight:700}
.chart-card .cap{font-size:calc(11.5px*var(--ts,1)); color:var(--muted); margin:2px 0 12px}
svg.chart{width:100%; height:auto; display:block; overflow:visible}
svg.chart text{font-family:var(--font-mono); font-size:9.5px; fill:var(--muted)}
svg.chart .gl{stroke:var(--grid); stroke-width:1}
svg.chart .bar{fill:var(--accent); transition:opacity .12s}
svg.chart .bar:hover{opacity:.75}
svg.chart .bar.dim{fill:var(--surface-3)}
svg.chart .lbl{fill:var(--ink-2); font-weight:600}
.tbl{width:100%; border-collapse:collapse; font-size:calc(12.5px*var(--ts,1))}
.tbl th{text-align:left; font-family:var(--font-mono); font-size:calc(10px*var(--ts,1)); letter-spacing:.09em; text-transform:uppercase; color:var(--muted); font-weight:500; padding:6px 10px; border-bottom:1px solid var(--line)}
.tbl td{padding:7px 10px; border-bottom:1px solid var(--line); vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr:hover{background:var(--surface-2)}

/* ---------- overlays ---------- */
.scrim{position:fixed; inset:0; background:color-mix(in srgb, var(--bg-2) 72%, transparent); backdrop-filter:blur(3px); display:none; place-items:center; z-index:100; padding:24px}
.scrim.on{display:grid}
.modal{width:min(560px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-3); max-height:86dvh; display:flex; flex-direction:column}
.modal .modal-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:15px 18px; border-bottom:1px solid var(--line)}
.modal .modal-head h2{font-size:calc(16px*var(--ts,1)); font-weight:700}
.modal .body{padding:18px; overflow:auto; display:flex; flex-direction:column; gap:14px}
.modal footer{padding:13px 18px; border-top:1px solid var(--line); display:flex; gap:8px; justify-content:flex-end}
.cmdk{width:min(560px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); box-shadow:var(--shadow-3); overflow:hidden; align-self:start; margin-top:8vh}
.cmdk input{border:0; border-bottom:1px solid var(--line); border-radius:0; padding:14px 16px; font-size:calc(15px*var(--ts,1)); background:transparent}
.cmdk input:focus{box-shadow:none; border-color:var(--line)}
.cmd-list{max-height:340px; overflow:auto; padding:6px}
.cmd{display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:9px; cursor:pointer; font-size:calc(13px*var(--ts,1))}
.cmd .k{margin-left:auto; font-family:var(--font-mono); font-size:calc(10.5px*var(--ts,1)); color:var(--muted)}
.cmd.sel{background:var(--surface-3)}
.toasts{position:fixed; bottom:18px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:200; align-items:center}
.toast{
  background:var(--ink); color:var(--bg); padding:9px 15px; border-radius:99px; font-size:calc(12.5px*var(--ts,1)); font-weight:600;
  box-shadow:var(--shadow-3); animation:rise .22s ease-out;
}
@keyframes rise{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
.tip{
  position:fixed; z-index:300; pointer-events:none; background:var(--ink); color:var(--bg);
  padding:6px 9px; border-radius:8px; font-size:calc(11.5px*var(--ts,1)); line-height:1.35; box-shadow:var(--shadow-2);
  opacity:0; transition:opacity .12s; max-width:220px; font-family:var(--font-ui);
}
.tip.on{opacity:1}
.banner{
  display:flex; align-items:center; gap:10px; padding:9px 14px; background:var(--long-wash);
  border-bottom:1px solid var(--line); font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2);
}
.mini-timer{display:flex; align-items:center; gap:9px; padding:5px 10px 5px 8px; border-radius:99px; background:var(--phase-wash); border:1px solid transparent}
.mini-timer .num{font-size:calc(14px*var(--ts,1)); font-weight:700; color:var(--phase)}
/* main area + side column. The side column grows with the text size so its
   contents keep their room, and both columns fold into one when there is not
   enough width — see the scaled breakpoints below. */
.grid.side{--side:300px; grid-template-columns:minmax(0,1fr) calc(var(--side)*min(var(--ts,1),1.45)); align-items:start}
.grid.side.wide{--side:320px}
.grid.side.calm-split{--side:280px}
@media (max-width:1100px){
  .focus-wrap{grid-template-columns:1fr; max-width:640px}
  .stage{order:-1}
}
@media (max-width:900px){ .grid.side{grid-template-columns:minmax(0,1fr)} }
/* Bigger text needs the same room a narrower window does, and a media query
   cannot read --ts. applyComfort() sets data-scale, so the two rules below are
   the breakpoints above multiplied by roughly the text scale. */
@media (max-width:1400px){
  [data-scale="lg"] .focus-wrap{grid-template-columns:1fr; max-width:820px}
  [data-scale="lg"] .stage{order:-1}
}
@media (max-width:1150px){ [data-scale="lg"] .grid.side{grid-template-columns:minmax(0,1fr)} }
@media (max-width:1900px){
  [data-scale="xl"] .focus-wrap{grid-template-columns:1fr; max-width:900px}
  [data-scale="xl"] .stage{order:-1}
}
@media (max-width:1500px){ [data-scale="xl"] .grid.side{grid-template-columns:minmax(0,1fr)} }
@media (max-width:760px){
  .app{grid-template-columns:1fr; height:auto; min-height:100dvh}
  .rail{flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line); padding:8px 10px}
  .brand{margin:0 8px 0 0}
  .rail-sp{display:none}
  .view{padding:16px 14px}
  .cal{grid-template-columns:44px repeat(7,minmax(64px,1fr)); overflow-x:auto}
}

/* ---------- priority matrix (Eisenhower) ---------- */
.mx-frame{
  display:grid; grid-template-columns:26px minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:22px minmax(190px,auto) minmax(190px,auto); gap:9px;
}
.mx-top,.mx-side{
  display:grid; place-items:center; font-family:var(--font-mono); font-size:calc(10px*var(--ts,1));
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.mx-side{writing-mode:vertical-rl; transform:rotate(180deg)}
.mx-cell{
  border:1px solid var(--line); border-top:3px solid var(--q); border-radius:var(--r-m);
  background:var(--surface-2); padding:11px 12px; display:flex; flex-direction:column; gap:7px;
  transition:background .15s, box-shadow .15s;
}
.mx-cell.over{background:var(--surface-3); box-shadow:0 0 0 2px var(--q)}
.mx-head{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.mx-head strong{font-family:var(--font-display); font-size:calc(13.5px*var(--ts,1)); letter-spacing:-.01em}
.mx-badge{
  font-family:var(--font-mono); font-size:calc(9.5px*var(--ts,1)); font-weight:600; letter-spacing:.06em;
  color:var(--q); background:color-mix(in srgb, var(--q) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--q) 34%, transparent); padding:1px 5px; border-radius:5px;
}
.mx-note{font-size:calc(11.5px*var(--ts,1)); color:var(--muted); line-height:1.45; margin:-1px 0 1px}
.mx-list{display:flex; flex-direction:column; gap:6px; flex:1}
.mx-chip{
  display:flex; align-items:flex-start; gap:8px; padding:7px 9px; border-radius:9px;
  background:var(--surface); border:1px solid var(--line); font-size:calc(12.5px*var(--ts,1)); line-height:1.35; cursor:grab;
  transition:border-color .14s, transform .1s;
}
.mx-chip:hover{border-color:var(--q)}
.mx-chip:active{cursor:grabbing}
.mx-chip.dragging{opacity:.35}
.mx-chip.on{box-shadow:0 0 0 2px var(--q)}
.mx-chip .mx-t{flex:1; min-width:0; word-break:break-word}
.mx-chip .m{font-family:var(--font-mono); font-size:calc(10px*var(--ts,1)); color:var(--muted); white-space:nowrap; margin-top:1px}
.mx-empty{
  border:1px dashed var(--line-2); border-radius:9px; padding:9px 10px; text-align:center;
  font-size:calc(11.5px*var(--ts,1)); color:var(--muted); line-height:1.4;
}
.mx-tray{margin-top:14px; border:1px solid var(--line); border-radius:var(--r-m); padding:11px 12px; background:var(--surface-2)}
.mx-tray.over{background:var(--surface-3); box-shadow:0 0 0 2px var(--line-2)}
.mx-tray .mx-list{flex-direction:row; flex-wrap:wrap}
.mx-tray .mx-chip{width:auto; max-width:260px}
.qtag{
  display:inline-flex; align-items:center; font-family:var(--font-mono); font-size:calc(9.5px*var(--ts,1)); font-weight:600;
  letter-spacing:.06em; padding:0 4px; border-radius:4px; border:1px solid currentColor; line-height:15px;
}
.mini2{display:grid; grid-template-columns:1fr 1fr; gap:6px; margin-top:10px}
.mini-q{
  border:1px solid var(--line); border-left:3px solid var(--q); border-radius:9px; padding:6px 8px;
  background:var(--surface-2); text-align:left; cursor:pointer; transition:background .14s;
}
.mini-q:hover{background:var(--surface-3)}
.mini-q .n{font-family:var(--font-display); font-size:calc(17px*var(--ts,1)); font-weight:700; line-height:1.15; color:var(--ink)}
.mini-q .l{font-size:calc(9.5px*var(--ts,1)); color:var(--muted); letter-spacing:.02em; display:block}
.mx-bar{display:flex; height:11px; border-radius:99px; overflow:hidden; background:var(--surface-3); margin:4px 0 10px}
.mx-bar span{display:block; height:100%}
.mx-legend{display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:calc(12px*var(--ts,1)); padding:3px 0}
.mx-nudge{
  border-left:3px solid var(--q); background:color-mix(in srgb, var(--q) 8%, transparent);
  border-radius:0 9px 9px 0; padding:8px 10px; font-size:calc(12px*var(--ts,1)); line-height:1.45; color:var(--ink-2); margin-top:10px;
}
.mx-pick{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.mx-pick .btn{flex-direction:column; align-items:flex-start; gap:2px; padding:10px 11px; border-left:3px solid var(--q); text-align:left}
.mx-pick .btn span{font-weight:500; font-size:calc(11px*var(--ts,1)); color:var(--muted)}
@media (max-width:820px){
  .mx-frame{display:flex; flex-direction:column}
  .mx-top,.mx-side,.mx-corner{display:none}
  .mx-pick{grid-template-columns:1fr}
}
/* ---------- sign-in gate ---------- */
.gate{
  position:fixed; inset:0; z-index:400; display:none; place-items:center; padding:22px;
  background:
    radial-gradient(90% 70% at 50% -10%, var(--focus-wash), transparent 70%),
    var(--bg);
  overflow:auto;
}
.gate.on{display:grid}
.gate-card{
  width:min(400px,100%); background:var(--surface); border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--shadow-3); padding:26px 24px 20px; align-self:center;
}
.gate-brand{display:flex; align-items:center; gap:11px; margin-bottom:4px}
.gate-brand .brand{margin:0; width:40px; height:40px; font-size:calc(15px*var(--ts,1))}
.gate-brand h1{font-family:var(--font-display); font-size:calc(19px*var(--ts,1)); font-weight:700; letter-spacing:-.02em; margin:0}
.gate-sub{font-size:calc(12.5px*var(--ts,1)); color:var(--muted); line-height:1.5; margin:8px 0 16px}
.gate form{display:flex; flex-direction:column; gap:11px}
.gate .row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:calc(12px*var(--ts,1)); color:var(--muted)}
.gate .row label{display:flex; align-items:center; gap:7px; cursor:pointer}
.gate-or{display:flex; align-items:center; gap:10px; margin:14px 0 11px; color:var(--muted); font-size:calc(11px*var(--ts,1))}
.gate-or::before,.gate-or::after{content:""; height:1px; background:var(--line); flex:1}
.gate-msg{
  border-left:3px solid var(--q,var(--crit)); background:color-mix(in srgb, var(--q,var(--crit)) 8%, transparent);
  border-radius:0 9px 9px 0; padding:8px 10px; font-size:calc(12px*var(--ts,1)); line-height:1.45; color:var(--ink-2); margin-bottom:12px;
}
.gate-note{font-size:calc(11px*var(--ts,1)); color:var(--muted); line-height:1.5; margin:14px 0 0; border-top:1px solid var(--line); padding-top:12px}
.gate-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:12px}
.who{display:inline-flex; align-items:center; gap:7px; max-width:190px}
.who .av{
  width:22px;height:22px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent); color:var(--accent-ink); font-size:calc(10px*var(--ts,1)); font-weight:700; font-family:var(--font-display);
  background-size:cover; background-position:center;
}
.who .nm{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:calc(12px*var(--ts,1)); font-weight:600}
.topnav{display:flex; align-items:center; gap:4px}
.topnav a{
  font-size:calc(12px*var(--ts,1)); font-weight:600; color:var(--muted); text-decoration:none; padding:5px 9px; border-radius:8px;
}
.topnav a:hover{background:var(--surface-2); color:var(--ink)}
@media (max-width:760px){ .topnav a{padding:5px 7px} }

/* ---------- first run + host-page docs ---------- */
.qs-row{display:flex; align-items:flex-start; gap:9px; padding:7px 0; border-bottom:1px solid var(--line)}
.qs-row:last-of-type{border-bottom:0}
.qs-tick{
  width:17px;height:17px;border-radius:50%;border:1.6px solid var(--line-2); flex:none; margin-top:2px;
  display:grid; place-items:center; background:var(--surface);
}
.qs-row.done .qs-tick{background:var(--rest); border-color:var(--rest)}
.qs-tick svg{width:10px;height:10px;stroke:var(--accent-ink);fill:none;stroke-width:2.8;opacity:0}
.qs-row.done .qs-tick svg{opacity:1}
.qs-row .qs-b{flex:1; min-width:0; display:flex; flex-direction:column; gap:1px}
.qs-row .qs-t{display:block; font-size:calc(12.5px*var(--ts,1)); font-weight:600; line-height:1.35}
.qs-row.done .qs-t{color:var(--muted); font-weight:500}
.qs-row .qs-h{display:block; font-size:calc(11px*var(--ts,1)); color:var(--muted); line-height:1.4; margin-top:1px}
.kv{display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:5px 0; border-bottom:1px solid var(--line); font-size:calc(12.5px*var(--ts,1))}
.kv:last-child{border-bottom:0}
.kv strong{font-family:var(--font-mono); font-size:calc(11.5px*var(--ts,1)); font-weight:600; text-align:right; word-break:break-all}
.doc{font-size:calc(12px*var(--ts,1)); color:var(--ink-2); line-height:1.6}
.doc code, .code{font-family:var(--font-mono); font-size:calc(11.5px*var(--ts,1))}
.code{
  display:block; white-space:pre; overflow-x:auto; background:var(--bg); border:1px solid var(--line);
  border-radius:9px; padding:10px 12px; color:var(--ink-2); line-height:1.55; margin:8px 0;
}
.doc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px}
/* Narrow screens: every two-column view (plan, tasks, matrix, stats) stacks
   instead of forcing a 300px sidebar past the edge of the screen. */
@media (max-width:860px){
  .view .grid{grid-template-columns:minmax(0,1fr) !important}
}

/* Site addition: on a phone the header wraps onto a second line instead of
   widening the whole page (which made mobile browsers zoom the app out). */
@media (max-width:760px){
  .topbar{flex-wrap:wrap; gap:8px; padding:10px 14px}
  .topbar .sep,.topbar .top-sp{display:none}
  .topnav{margin-left:auto}
}
/* ---------- stopwatch (site addition) ---------- */
.track-chip{gap:7px; padding:3px 4px 3px 10px; background:var(--focus-wash); border-color:color-mix(in srgb, var(--focus) 40%, transparent); color:var(--ink); max-width:340px}
.track-chip .dot{background:var(--focus); animation:breathe 2.2s ease-in-out infinite}
.track-chip .tt{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; max-width:170px}
.track-chip .num{font-weight:700; color:var(--focus)}
.track-chip .btn{padding:3px 8px}
.task.tracking{background:var(--focus-wash); border-color:color-mix(in srgb, var(--focus) 45%, transparent)}
.task.tracking .t-actions{opacity:1}
.ev.tracking{box-shadow:0 0 0 2px var(--focus), var(--shadow-1)}
@media (prefers-reduced-motion:reduce){ .track-chip .dot{animation:none} }
@media (max-width:760px){ .track-chip{max-width:100%} .track-chip .tt{max-width:120px} }
/* =====================================================================
   ACCESSIBILITY AND COMFORT (site addition)
   Settings live on <html> as data-* attributes set by js/lib/comfort.js;
   --ts scales every font size (see the calc() in each font-size above).
   ===================================================================== */
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:fixed; left:12px; top:-80px; z-index:1000; background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none}
.skip:focus{top:12px}
.views{flex:1; min-height:0; display:flex; flex-direction:column}
.views:focus{outline:none}
.view-head h2:focus:not(:focus-visible){outline:none}

/* contrast fixes: coloured labels are mixed toward the ink so small text stays readable */
.mx-badge{color:color-mix(in srgb, var(--q) 62%, var(--ink))}
.qtag{color:color-mix(in srgb, var(--q, var(--muted)) 62%, var(--ink))}
.qcol{color:color-mix(in srgb, var(--q) 62%, var(--ink))}
.ev .tm{color:var(--ink-2)}
/* the countdown in the top bar sits on its own phase wash: 3.9:1 straight, so
   it is mixed toward the ink like the other coloured labels */
.mini-timer .num{color:color-mix(in srgb, var(--phase) 68%, var(--ink))}
.sticky .s-tag{opacity:.85}
.cmd.sel .k{color:var(--ink-2)}
.sticky .s-btn{opacity:.7; min-width:26px; min-height:26px; display:grid; place-items:center}

/* ---- spacing (WCAG 1.4.12 text spacing) ---- */
[data-spacing="relaxed"] body,
[data-spacing="relaxed"] :is(p,li,label,textarea,.t-title,.mx-t,.doc,.hint,.set-hint,.mx-note,.dial-task){line-height:1.75!important}
[data-spacing="loose"] body,
[data-spacing="loose"] :is(p,li,label,textarea,.t-title,.mx-t,.doc,.hint,.set-hint,.mx-note,.dial-task){line-height:1.9!important}
[data-spacing="loose"] body{letter-spacing:.04em; word-spacing:.14em}
[data-spacing="loose"] :is(h1,h2,h3,h4){letter-spacing:.01em}

/* ---- typeface ---- */
[data-font="readable"]{--font-ui:'Atkinson Hyperlegible',Verdana,Tahoma,sans-serif; --font-display:'Atkinson Hyperlegible',Verdana,Tahoma,sans-serif}
[data-font="system"]{--font-ui:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif; --font-display:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}

/* ---- high contrast (both themes) ---- */
:root[data-contrast="high"]{
  --ink:#000; --ink-2:#17201E; --muted:#33403D; --line:#7E8C88; --line-2:#56645F;
  --surface:#fff; --surface-2:#F1F4F2; --surface-3:#E2E8E5; --bg:#F4F6F5;
  --focus:#B5360F; --rest:#005C42; --long:#3F32B8; --alert:#7A4A00; --crit:#9A1E10;
  --grid:rgba(0,0,0,.18);
}
@media (prefers-color-scheme:dark){
  :root[data-contrast="high"]:not([data-theme="light"]){
    --ink:#fff; --ink-2:#EEF3F1; --muted:#CAD5D1; --line:#71807B; --line-2:#9AA8A3;
    --surface:#000; --surface-2:#0E1315; --surface-3:#1C2427; --bg:#000;
    --focus:#FF8A5C; --rest:#4FD1B3; --long:#B3A8FF; --alert:#F2C35B; --crit:#FF8C80;
    --grid:rgba(255,255,255,.2);
  }
}
:root[data-theme="dark"][data-contrast="high"]{
  --ink:#fff; --ink-2:#EEF3F1; --muted:#CAD5D1; --line:#71807B; --line-2:#9AA8A3;
  --surface:#000; --surface-2:#0E1315; --surface-3:#1C2427; --bg:#000;
  --focus:#FF8A5C; --rest:#4FD1B3; --long:#B3A8FF; --alert:#F2C35B; --crit:#FF8C80;
  --grid:rgba(255,255,255,.2);
}
[data-contrast="high"] :is(.card,.btn,.chip,.task,.mx-chip,.layer,input,select,textarea){border-width:1.5px}

/* ---- colour intensity ---- */
:root[data-color="soft"]{
  --focus:#A65A40; --rest:#3A7566; --long:#5F5A9C; --alert:#876A2E; --crit:#9A4A3E;
  --focus-wash:rgba(166,90,64,.08); --rest-wash:rgba(58,117,102,.08); --long-wash:rgba(95,90,156,.08);
}
@media (prefers-color-scheme:dark){
  :root[data-color="soft"]:not([data-theme="light"]){
    --focus:#D69478; --rest:#6CAE9E; --long:#A39BD6; --alert:#CDA96A; --crit:#DB8E83;
    --focus-wash:rgba(214,148,120,.10); --rest-wash:rgba(108,174,158,.10); --long-wash:rgba(163,155,214,.10);
  }
}
:root[data-theme="dark"][data-color="soft"]{
  --focus:#D69478; --rest:#6CAE9E; --long:#A39BD6; --alert:#CDA96A; --crit:#DB8E83;
  --focus-wash:rgba(214,148,120,.10); --rest-wash:rgba(108,174,158,.10); --long-wash:rgba(163,155,214,.10);
}
[data-color="mono"] :is(.app,.gate,.scrim,.toasts){filter:grayscale(1)}

/* ---- focus outline and links ---- */
[data-focus="strong"] :focus-visible{outline:3px solid var(--ink)!important; outline-offset:3px!important; box-shadow:0 0 0 7px color-mix(in srgb, var(--accent) 45%, transparent)!important}
[data-links="underline"] a{text-decoration:underline!important; text-underline-offset:2px}

/* ---- motion: "system" follows the OS setting, "reduce" stops it outright ---- */
@media (prefers-reduced-motion:reduce){
  [data-motion="system"] *,[data-motion="system"] *::before,[data-motion="system"] *::after{
    animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
}
[data-motion="reduce"] *,[data-motion="reduce"] *::before,[data-motion="reduce"] *::after{
  animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important}
/* the breathing pacer is the one motion that is the point: it keeps a slow, smaller swell */
[data-motion="reduce"] .orb .core,[data-motion="system"] .orb .core{transition:transform var(--bt,4s) linear!important}
[data-motion="reduce"] .orb.expand .core{transform:scale(1.15)}

/* ---- focus and interruptions ---- */
[data-coaching="off"] #focusMatrix :is(.mx-nudge,[data-mxswap],[data-mxsort]){display:none}
[data-streaks="off"] #streakChip{display:none}
[data-simple="on"] :is(#quickStart,#focusMatrix,.fx-queue,.fx-sound){display:none!important}
[data-explain="off"] :is(.view-head p,.hint,.mx-note,.cap,.explain){display:none!important}

/* =====================================================================
   SETUP VIEW
   ===================================================================== */
.set-shell{display:grid; grid-template-columns:236px minmax(0,1fr); gap:22px; max-width:1120px; align-items:start}
.set-nav{position:sticky; top:0; display:flex; flex-direction:column; gap:2px; padding:8px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l)}
.set-tab{display:flex; align-items:center; gap:10px; padding:9px 11px; border:0; border-radius:10px; background:transparent; color:var(--ink-2);
  font-weight:600; font-size:calc(13px*var(--ts,1)); text-align:left; cursor:pointer; line-height:1.3}
.set-tab svg{width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.set-tab:hover{background:var(--surface-2); color:var(--ink)}
.set-tab[aria-selected="true"]{background:var(--surface-3); color:var(--ink)}
.set-tab[aria-selected="true"] svg{stroke:var(--accent)}
.set-body{min-width:0}
.set-panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-l); padding:22px 24px 12px}
.set-panel:focus{outline:none}
.set-panel > h3{font-size:calc(19px*var(--ts,1)); font-weight:700}
.set-lead{color:var(--muted); margin:5px 0 8px; max-width:66ch; font-size:calc(13px*var(--ts,1)); line-height:1.55}
.set-group{margin-top:20px}
.set-group-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:4px}
.set-group h4,.set-group-head h4{font-family:var(--font-mono); font-size:calc(10.5px*var(--ts,1)); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:600; margin:0 0 4px}
.set-row{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,auto); gap:4px 24px; align-items:center; padding:13px 0; border:0; border-top:1px solid var(--line); margin:0; min-width:0}
.set-row > .set-text{min-width:0}
fieldset.set-row{padding:13px 0}
fieldset.set-row > legend{float:left; padding:0; width:100%}
fieldset.set-row > legend + *{clear:left}
.set-label{font-weight:600; font-size:calc(13.5px*var(--ts,1)); color:var(--ink); display:block}
.set-hint{margin:3px 0 0; color:var(--muted); font-size:calc(12px*var(--ts,1)); line-height:1.55; max-width:62ch}
.set-row.stack-row{grid-template-columns:minmax(0,1fr)}
.set-control{justify-self:end; display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0; max-width:100%}
/* a voice name can be very long — the control shrinks rather than the row growing */
.set-control select{max-width:100%; text-overflow:ellipsis}
.set-row.stack-row .set-control{justify-self:start}
.set-fields{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:12px; padding:10px 0 4px}
.set-cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; margin:12px 0 10px}
.set-cards .card{box-shadow:none}
.set-preview{margin:14px 0 4px; padding:14px 16px; border:1px dashed var(--line-2); border-radius:var(--r-m); background:var(--surface-2)}
.set-preview p{margin:6px 0 0; color:var(--ink-2); line-height:1.55}

/* switch: a real checkbox with role="switch". The selector has to out-rank the
   plain input[type="checkbox"] rule above, and --sw grows the whole thing with
   the text size (capped, so it stays a switch and not a slab). */
input[type="checkbox"].switch{--sw:min(var(--ts,1),1.3); appearance:none; -webkit-appearance:none;
  width:calc(42px*var(--sw)); height:calc(24px*var(--sw)); border-radius:99px; background:var(--surface-3); border:1px solid var(--line-2);
  position:relative; cursor:pointer; flex:none; margin:0; transition:background .16s}
.switch::after{content:""; position:absolute; top:calc(2px*var(--sw)); left:calc(2px*var(--sw)); width:calc(18px*var(--sw)); height:calc(18px*var(--sw));
  border-radius:50%; background:var(--muted); transition:transform .16s, background .16s}
.switch:checked{background:var(--accent); border-color:transparent}
.switch:checked::after{transform:translateX(calc(18px*var(--sw))); background:var(--accent-ink)}
[data-contrast="high"] .switch::after{box-shadow:0 0 0 1px var(--ink)}

/* segmented control: real radio buttons, so arrow keys and screen readers work natively */
.seg{display:inline-flex; flex-wrap:wrap; gap:3px; padding:3px; background:var(--surface-2); border:1px solid var(--line); border-radius:11px}
.seg label{position:relative; display:block; cursor:pointer}
.seg input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.seg span{display:block; padding:6px 11px; border-radius:8px; font-size:calc(12.5px*var(--ts,1)); font-weight:600; color:var(--ink-2); white-space:nowrap}
.seg input:checked + span{background:var(--surface); color:var(--ink); box-shadow:var(--shadow-1), inset 0 0 0 1px var(--line-2)}
.seg input:focus-visible + span{outline:2px solid var(--accent); outline-offset:1px}
[data-contrast="high"] .seg input:checked + span{box-shadow:inset 0 0 0 2px var(--ink)}
.set-row select{width:auto; min-width:180px; max-width:100%}
.set-row input[type="range"]{width:220px; max-width:100%}

/* comfort profiles */
.prof-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,calc(240px*min(var(--ts,1),1.5))),1fr)); gap:10px; margin:14px 0 6px}
.prof{position:relative; display:flex; flex-direction:column; gap:5px; border:1px solid var(--line); border-radius:var(--r-m); padding:14px 15px 13px; background:var(--surface); cursor:pointer; transition:border-color .15s}
.prof:hover{border-color:var(--line-2)}
.prof input{position:absolute; opacity:0; inset:0; margin:0; cursor:pointer}
.prof.on{border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent)}
.prof:has(input:focus-visible){outline:2px solid var(--accent); outline-offset:2px}
.prof .p-top{display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap}
.prof .p-name{font-weight:700; font-family:var(--font-display); font-size:calc(14.5px*var(--ts,1))}
.prof .p-badge{font-family:var(--font-mono); font-size:calc(10px*var(--ts,1)); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); border-radius:6px; padding:1px 6px; white-space:nowrap}
.prof .p-about{font-size:calc(12px*var(--ts,1)); color:var(--muted); line-height:1.5}
.prof .p-check{width:18px; height:18px; border-radius:50%; border:1.6px solid var(--line-2); flex:none}
.prof.on .p-check{background:var(--accent); border-color:var(--accent); box-shadow:inset 0 0 0 3px var(--surface)}
.kbd-list{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 14px; margin:10px 0 6px; align-items:baseline}
.kbd-list kbd{font-family:var(--font-mono); font-size:calc(11.5px*var(--ts,1)); padding:2px 7px; border:1px solid var(--line-2); border-bottom-width:2px; border-radius:6px; background:var(--surface-2); color:var(--ink); justify-self:start; white-space:nowrap}
.kbd-list span{font-size:calc(13px*var(--ts,1)); color:var(--ink-2)}
[aria-disabled="true"]{opacity:.5}

@media (max-width:860px){
  .set-shell{grid-template-columns:minmax(0,1fr)}
  .set-nav{position:static; flex-direction:row; overflow-x:auto; padding:6px}
  .set-tab{white-space:nowrap; flex:none}
  .set-panel{padding:18px 16px 8px}
  .set-row{grid-template-columns:minmax(0,1fr)}
  .set-control{justify-self:start}
}
.prof-fs{border:0; margin:0; padding:0; min-width:0}
.set-fs{min-inline-size:0}
.toast{display:flex; align-items:center; gap:10px}
.toast-x{border:0; background:transparent; color:inherit; cursor:pointer; font:inherit; padding:2px 6px; border-radius:6px; opacity:.8}
.toast-x:hover{opacity:1; background:rgba(255,255,255,.14)}
button.qtag{background:transparent; cursor:pointer; font:inherit; font-family:var(--font-mono); font-size:calc(9.5px*var(--ts,1)); font-weight:600; letter-spacing:.06em; padding:0 4px; line-height:15px}
kbd{font-family:var(--font-mono); font-size:.9em; padding:0 4px; border:1px solid var(--line-2); border-radius:4px; background:var(--surface-2)}
.cal-h.today .n{color:color-mix(in srgb, var(--accent) 70%, var(--ink))}   /* today's date, readable at 16px */

/* =====================================================================
   MOOD
   A log of three numbers should not look like a form. The pad is the
   feature: mood up, energy across, one dot. Everything it can express is
   also on the sliders beside it, which are the real control.
   ===================================================================== */
.view-tools{margin-left:auto; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.mood-form{display:grid; grid-template-columns:minmax(0,260px) minmax(0,1fr); gap:20px; align-items:start; margin-bottom:6px}
.pad-wrap{display:flex; flex-direction:column; gap:9px; min-width:0}
.mpad{
  position:relative; aspect-ratio:1; border-radius:18px; border:1px solid var(--line-2); overflow:hidden;
  cursor:crosshair; touch-action:none; isolation:isolate;
  background:
    radial-gradient(125% 125% at 100% 0%, color-mix(in srgb, var(--rest) 42%, transparent), transparent 62%),
    radial-gradient(125% 125% at 0% 100%, color-mix(in srgb, var(--crit) 34%, transparent), transparent 62%),
    radial-gradient(125% 125% at 100% 100%, color-mix(in srgb, var(--warn) 30%, transparent), transparent 66%),
    linear-gradient(to top, color-mix(in srgb, var(--ink) 7%, var(--surface-2)), var(--surface-2));
}
.mpad::after{                                  /* a soft grid so the position reads as a value */
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:25% 25%, 25% 25%;
}
.pad-glow{position:absolute; width:56%; height:56%; border-radius:50%; transform:translate(-50%,-50%); filter:blur(26px); opacity:.85; transition:left .18s, top .18s, background .18s; pointer-events:none}
.pad-dot{
  position:absolute; width:26px; height:26px; margin:0; border-radius:50%; transform:translate(-50%,-50%);
  border:2.5px solid var(--surface); box-shadow:0 6px 18px -6px rgba(0,0,0,.5), 0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent);
  transition:left .18s cubic-bezier(.22,1,.36,1), top .18s cubic-bezier(.22,1,.36,1), background .18s; z-index:2;
}
.pad-ax,.pad-q{position:absolute; font-size:calc(9.5px*min(var(--ts,1),1.3)); letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--muted); pointer-events:none; z-index:1}
.pad-ax-y{top:8px; left:50%; transform:translateX(-50%)}
.pad-ax-y.low{top:auto; bottom:8px}
.pad-ax-x{right:8px; top:50%; transform:translateY(-50%)}
.pad-ax-x.low{right:auto; left:8px}
.pad-q{font-size:calc(9px*min(var(--ts,1),1.25)); text-transform:none; letter-spacing:.02em; font-weight:600; opacity:.75}
.pad-q-tl{top:26px; left:10px} .pad-q-tr{top:26px; right:10px}
.pad-q-bl{bottom:26px; left:10px} .pad-q-br{bottom:26px; right:10px}
.pad-read{margin:0; text-align:center; font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); font-weight:600}
.mood-fields{display:flex; flex-direction:column; gap:14px; min-width:0}
.mfield label{display:flex; justify-content:space-between; gap:10px; align-items:baseline; font-size:calc(12.5px*var(--ts,1)); font-weight:600; margin-bottom:5px}
.mfield .num{color:var(--accent)}
.mfield input[type="range"]{margin:0; width:100%}   /* the browser's own 2px each side overflows the card */
.mfield .hint{margin:3px 0 0; font-size:calc(11.5px*var(--ts,1)); color:var(--muted)}
.tagline{display:flex; flex-wrap:wrap; gap:6px; margin-top:7px}
.tagline.read{margin-top:8px}
.tag{
  border:1px solid var(--line); background:var(--surface-2); color:var(--ink-2); cursor:pointer;
  padding:5px 11px; border-radius:99px; font:inherit; font-size:calc(11.5px*var(--ts,1)); font-weight:600;
  transition:background .14s, color .14s, border-color .14s;
}
.tag:hover{border-color:var(--line-2); color:var(--ink)}
.tag.on{background:color-mix(in srgb, var(--accent) 16%, var(--surface)); border-color:color-mix(in srgb, var(--accent) 45%, transparent); color:color-mix(in srgb, var(--accent) 70%, var(--ink))}
.tagline.read .tag{cursor:default}
.chart-wrap{width:100%; overflow:hidden}
.chart-note{margin:9px 0 0; font-size:calc(12px*var(--ts,1)); color:var(--muted); line-height:1.6}
.mood-ribbon{width:100%; height:auto; display:block}
.mood-ribbon .rib-line{filter:drop-shadow(0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent))}
/* the day grid, drawn as a table so it reads as data too */
.mood-grid-wrap{overflow-x:auto; padding-bottom:4px}
.mg{border-collapse:separate; border-spacing:4px; margin:2px 0 0}
.mg th{
  font-size:calc(9.5px*min(var(--ts,1),1.2)); color:var(--muted); font-weight:700; text-align:right;
  padding-right:4px; text-transform:uppercase; letter-spacing:.06em;
}
.mg-cell{
  position:relative; width:17px; height:17px; min-width:17px; border-radius:5px; overflow:hidden;
  background:var(--c, var(--surface-3)); transition:transform .12s;
}
.mg-cell.none{background:var(--surface-3); opacity:.55}
.mg-cell.empty-cell{background:transparent}
.mg-cell:hover{transform:scale(1.22)}
.mg-bar{position:absolute; left:0; right:0; bottom:0; background:color-mix(in srgb, var(--ink) 34%, transparent)}
/* right-hand column */
.now-orb{
  width:96px; height:96px; margin:6px auto 10px; border-radius:50%; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, color-mix(in srgb, var(--c) 92%, white 18%), var(--c) 72%);
  box-shadow:0 14px 34px -14px var(--c), inset 0 -6px 16px -8px rgba(0,0,0,.35);
  color:var(--accent-ink); font:700 calc(30px*var(--ts,1))/1 var(--font-display); font-variant-numeric:tabular-nums;
}
.now-word{margin:0; text-align:center; font:700 calc(17px*var(--ts,1))/1.2 var(--font-display)}
.now-sub{margin:4px 0 0; text-align:center; font-size:calc(12px*var(--ts,1)); color:var(--muted)}
.now-note{margin:10px 0 0; font-size:calc(12.5px*var(--ts,1)); color:var(--ink-2); font-style:italic; line-height:1.55}
.now-meta{margin:10px 0 0; text-align:center; font-size:calc(11.5px*var(--ts,1)); color:var(--muted)}
.kv-note{margin:2px 0 8px; font-size:calc(11.5px*var(--ts,1)); color:var(--muted); line-height:1.55}
.tag-stat{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:6px 0; flex-wrap:wrap; font-size:calc(11.5px*var(--ts,1)); color:var(--muted)}
.m-row{display:flex; gap:10px; align-items:flex-start; padding:9px 0; border-bottom:1px solid var(--line)}
.m-row:last-child{border-bottom:0}
.m-chip{
  flex:none; width:28px; height:28px; border-radius:9px; display:grid; place-items:center; background:var(--c);
  color:var(--accent-ink); font:700 calc(12.5px*var(--ts,1))/1 var(--font-mono);
}
.m-body{flex:1; min-width:0}
.m-top{display:flex; justify-content:space-between; gap:8px; align-items:baseline; flex-wrap:wrap; font-size:calc(12.5px*var(--ts,1))}
.m-when{font-family:var(--font-mono); font-size:calc(10.5px*var(--ts,1)); color:var(--muted)}
.m-meta{font-size:calc(11.5px*var(--ts,1)); color:var(--muted); margin-top:2px}
.m-note{font-size:calc(12px*var(--ts,1)); color:var(--ink-2); margin-top:4px; line-height:1.5}
.m-row .s-btn{opacity:.55}
.m-row:hover .s-btn,.m-row:focus-within .s-btn{opacity:1}
@media (max-width:720px){ .mood-form{grid-template-columns:minmax(0,1fr)} .pad-wrap{max-width:320px} }
[data-scale="lg"] .mood-form,[data-scale="xl"] .mood-form{grid-template-columns:minmax(0,1fr)}

/* =====================================================================
   ABOUT
   The one screen that is allowed to show off. Every animation is additive:
   with motion off, each piece simply starts where it would have landed.
   ===================================================================== */
.about{max-width:1080px; margin:0 auto; padding-bottom:32px}
.ab-hero{
  position:relative; overflow:hidden; border-radius:26px; border:1px solid var(--line);
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 8%, var(--surface)), var(--surface) 55%);
  padding:clamp(22px,4vw,44px); margin-bottom:26px; box-shadow:var(--shadow-2);
}
.ab-aurora{position:absolute; inset:-30%; pointer-events:none; filter:blur(58px); opacity:.55}
.ab-aurora span{position:absolute; display:block; width:46%; height:46%; border-radius:50%}
.ab-aurora span:nth-child(1){background:color-mix(in srgb, var(--focus) 60%, transparent); top:2%; left:4%; animation:abFloat1 19s ease-in-out infinite}
.ab-aurora span:nth-child(2){background:color-mix(in srgb, var(--accent) 55%, transparent); top:28%; left:48%; animation:abFloat2 23s ease-in-out infinite}
.ab-aurora span:nth-child(3){background:color-mix(in srgb, var(--rest) 55%, transparent); top:52%; left:18%; animation:abFloat3 27s ease-in-out infinite}
@keyframes abFloat1{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(16%,10%,0) scale(1.18)}}
@keyframes abFloat2{0%,100%{transform:translate3d(0,0,0) scale(1.1)}50%{transform:translate3d(-14%,14%,0) scale(.92)}}
@keyframes abFloat3{0%,100%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(12%,-12%,0) scale(1.15)}}
.ab-hero-grid{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:28px; align-items:center}
.ab-eyebrow{margin:0 0 10px; font-size:calc(11px*var(--ts,1)); letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--accent)}
.ab-title{margin:0; font-family:var(--font-display); font-weight:700; letter-spacing:-.035em; line-height:1.02; font-size:clamp(34px,5.6vw,60px)}
.ab-shine{
  background:linear-gradient(100deg, var(--focus) 0%, var(--accent) 34%, var(--rest) 58%, var(--accent) 78%, var(--focus) 100%);
  background-size:280% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:abShine 7s linear infinite;
}
@keyframes abShine{0%{background-position:180% 0}100%{background-position:-100% 0}}
.ab-lead{margin:14px 0 0; font-size:calc(14.5px*var(--ts,1)); line-height:1.65; color:var(--ink-2); max-width:52ch}
.ab-cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:20px}
.ab-mark{position:relative; display:grid; place-items:center; width:min(210px,34vw)}
.ab-dial{width:100%; height:auto; transform:rotate(-90deg)}
.ab-dial .ab-track{fill:none; stroke:var(--surface-3); stroke-width:9}
.ab-dial .ab-prog{
  fill:none; stroke:url(#abG); stroke-width:9; stroke-linecap:round;
  stroke-dasharray:540; stroke-dashoffset:540; animation:abDraw 2.6s cubic-bezier(.22,1,.36,1) .25s forwards;
}
.ab-dial .ab-spark{fill:var(--rest); transform-origin:110px 110px; animation:abSpin 2.6s cubic-bezier(.22,1,.36,1) .25s forwards; opacity:.9}
.ab-dial .ab-ticks path{stroke:var(--line-2); stroke-width:2; stroke-linecap:round}
@keyframes abDraw{to{stroke-dashoffset:135}}
@keyframes abSpin{from{transform:rotate(0deg)}to{transform:rotate(270deg)}}
.ab-mark-clock{
  position:absolute; font-family:var(--font-display); font-weight:700; font-size:calc(27px*var(--ts,1));
  letter-spacing:-.03em; color:var(--ink);
}
.ab-h{font-size:calc(18px*var(--ts,1)); font-weight:700; letter-spacing:-.015em; margin:30px 0 14px}
.ab-stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(160px*min(var(--ts,1),1.5))),1fr)); gap:12px}
.ab-stat{
  padding:16px 17px; border-radius:var(--r-l); border:1px solid var(--line); background:var(--surface);
  display:flex; flex-direction:column; gap:3px;
}
.ab-stat strong{font-family:var(--font-display); font-size:calc(30px*var(--ts,1)); font-weight:700; letter-spacing:-.035em; line-height:1; color:var(--ink)}
.ab-stat-k{font-size:calc(12px*var(--ts,1)); font-weight:600; color:var(--ink-2)}
.ab-stat-n{font-size:calc(11.5px*var(--ts,1)); color:var(--muted); line-height:1.5}
.ab-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,calc(250px*min(var(--ts,1),1.4))),1fr)); gap:14px}
.ab-card{
  position:relative; padding:20px 19px; border-radius:var(--r-l); border:1px solid var(--line);
  background:var(--surface); overflow:hidden; transition:transform .2s, box-shadow .2s, border-color .2s;
}
.ab-card::before{
  content:""; position:absolute; inset:0 0 auto; height:2px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 70%, transparent), transparent);
  opacity:0; transition:opacity .25s;
}
.ab-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-2); border-color:var(--line-2)}
.ab-card:hover::before{opacity:1}
.ab-ico{
  display:grid; place-items:center; width:38px; height:38px; border-radius:11px; margin-bottom:12px;
  background:linear-gradient(145deg, color-mix(in srgb, var(--accent) 22%, var(--surface-2)), var(--surface-2));
  border:1px solid color-mix(in srgb, var(--accent) 24%, transparent);
}
.ab-ico svg{width:19px; height:19px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.ab-card h4{margin:0 0 6px; font-size:calc(14px*var(--ts,1)); font-weight:700; letter-spacing:-.01em}
.ab-card p{margin:0; font-size:calc(12.5px*var(--ts,1)); color:var(--muted); line-height:1.65}
.ab-flow{list-style:none; margin:0; padding:0; display:grid; gap:12px; counter-reset:step}
.ab-step{position:relative; display:flex; gap:14px; padding:16px 18px; border-radius:var(--r-l); border:1px solid var(--line); background:var(--surface)}
.ab-step-n{
  flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  background:color-mix(in srgb, var(--accent) 15%, var(--surface-2)); color:color-mix(in srgb, var(--accent) 72%, var(--ink));
  font:700 calc(13px*var(--ts,1))/1 var(--font-mono);
}
.ab-step h4{margin:2px 0 5px; font-size:calc(13.5px*var(--ts,1)); font-weight:700}
.ab-step p{margin:0; font-size:calc(12.5px*var(--ts,1)); color:var(--muted); line-height:1.6}
.ab-notes{margin-top:8px}
.ab-note{border:1px solid var(--line); border-radius:var(--r-m); background:var(--surface); margin-bottom:9px; overflow:hidden}
.ab-note summary{padding:13px 16px; cursor:pointer; font-weight:600; font-size:calc(13px*var(--ts,1))}
.ab-note summary::marker{color:var(--accent)}
.ab-note p{margin:0; padding:0 16px 14px; font-size:calc(12.5px*var(--ts,1)); color:var(--muted); line-height:1.65}
.ab-version{margin:18px 0 0; font-size:calc(11.5px*var(--ts,1)); color:var(--muted)}
.ab-version a{color:var(--accent)}
/* the reveal: set by JS when a band scrolls into the view */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1; transform:none}
@media (max-width:820px){ .ab-hero-grid{grid-template-columns:minmax(0,1fr)} .ab-mark{width:min(170px,46vw); margin:0 auto} }
[data-scale="xl"] .ab-hero-grid{grid-template-columns:minmax(0,1fr)}
/* motion off: no drift, no sweep, no drawing — the final frame, immediately */
@media (prefers-reduced-motion:reduce){
  [data-motion="system"] :is(.ab-aurora span,.ab-shine,.ab-dial .ab-prog,.ab-dial .ab-spark){animation:none!important}
  [data-motion="system"] .ab-dial .ab-prog{stroke-dashoffset:135}
  [data-motion="system"] .ab-shine{color:var(--accent); -webkit-text-fill-color:currentColor}
  [data-motion="system"] .reveal{opacity:1; transform:none}
}
[data-motion="reduce"] :is(.ab-aurora span,.ab-shine,.ab-dial .ab-prog,.ab-dial .ab-spark){animation:none!important}
[data-motion="reduce"] .ab-dial .ab-prog{stroke-dashoffset:135}
[data-motion="reduce"] .ab-shine{color:var(--accent); -webkit-text-fill-color:currentColor}
[data-motion="reduce"] :is(.reveal,.ab-card:hover){opacity:1; transform:none}
/* greyscale and high contrast: the gradient text would lose its contrast guarantee */
[data-color="mono"] .ab-shine,[data-contrast="high"] .ab-shine{
  background:none; color:var(--ink); -webkit-text-fill-color:currentColor; animation:none;
}
[data-contrast="high"] .ab-aurora{opacity:.25}
/* ---- Setup: the advanced disclosure ----
   Each section leads with the few settings most people change; the rest sit
   behind one button that says how many are inside. A real button with
   aria-expanded, not a details element, so the announcement is predictable. */
.adv{margin:6px 0 4px; border-top:1px solid var(--line)}
.adv-toggle{
  display:flex; align-items:center; gap:9px; width:100%; padding:13px 2px; border:0; background:transparent;
  cursor:pointer; font:inherit; font-size:calc(12.5px*var(--ts,1)); font-weight:600; color:var(--ink-2);
  border-radius:9px; transition:color .14s;
}
.adv-toggle:hover{color:var(--ink)}
.adv-chev{width:15px; height:15px; flex:none; fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s}
.adv.open .adv-chev{transform:rotate(90deg)}
.adv-label{text-align:left}
.adv-n{
  margin-left:auto; font-family:var(--font-mono); font-size:calc(10.5px*var(--ts,1)); color:var(--muted);
  background:var(--surface-2); border:1px solid var(--line); border-radius:99px; padding:2px 8px; min-width:22px; text-align:center;
}
.adv-n:empty{display:none}
.adv-body{padding-bottom:6px}
.adv-body .set-row:first-of-type{border-top:0}
.adv-lead{margin:0 0 4px; max-width:62ch}