:root{--bg:#08090A;--bg2:#0B0C0D;--card:#141619;--line:#1E2126;--ink:#F4F4F5;--mute:#9EA1AD;--green:#00E37A;--red:#FF5C5C;--sleep:#2A2D33;
--font-body:"Plus Jakarta Sans",system-ui,-apple-system,sans-serif;--font-display:"Space Grotesk",system-ui,sans-serif;--font-mono:"IBM Plex Mono",monospace;
--space-8:8px;--space-12:12px;--space-16:16px;--space-20:20px;--space-24:24px;--space-32:32px;--space-40:40px;
--radius-card:18px;--radius-input:16px;--radius-sheet:32px;--radius-pill:999px}
*{box-sizing:border-box}html{background:var(--bg);color:var(--ink);font:16px/1.4 var(--font-body)}
body{margin:0;max-width:520px;margin-inline:auto;padding:0 var(--space-16) var(--space-40)}
.top{padding:var(--space-16) 0}.wordmark{height:60px}
.eyebrow{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.big{font-family:var(--font-display);font-weight:600;font-size:44px;letter-spacing:-.03em}
.mono{font-family:var(--font-mono);font-size:13px}
.muted{color:var(--mute)}.drift{color:var(--red)}
.row{display:flex;justify-content:space-between;align-items:baseline}
.bar{height:6px;background:var(--line);border-radius:var(--radius-pill);margin-top:var(--space-8)}.bar span{display:block;height:100%;background:var(--green);border-radius:var(--radius-pill)}
.ringwrap{display:flex;justify-content:center;padding:var(--space-16) 0}.ringwrap svg{width:min(320px,80vw);height:auto}
.now{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-12);padding:var(--space-12) 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--green);margin-inline-end:var(--space-8)}
.nowlabel{font-weight:700;font-size:22px}
.btn{background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius-pill);padding:var(--space-12) var(--space-16);font:inherit;cursor:pointer;list-style:none}
.btn.primary{background:var(--green);color:var(--bg);border-color:var(--green);font-weight:700}
.btn.ghost{background:transparent}
.btn.linklike{background:transparent;border-color:transparent;text-decoration:underline;color:var(--mute);padding:var(--space-8) var(--space-16)}
a.link-mute{color:var(--mute);text-decoration:none}
a.link-mute:hover,a.link-mute:focus-visible{text-decoration:underline}
summary{list-style:none}summary::-webkit-details-marker{display:none}summary::marker{display:none}
.switch>summary::after,.splitgap>summary::after,.splitblock>summary::after,.confirm>summary::after{content:'+';margin-inline-start:var(--space-8);font-weight:700;display:inline-block}
.switch[open]>summary::after,.splitgap[open]>summary::after,.splitblock[open]>summary::after,.confirm[open]>summary::after{content:'\2715'}
.switch{position:relative}
/* Once open, the sheet has its own header+close (see _sheet_header.html) --
   the trigger that opened it is no longer needed for anything and used to
   sit awkwardly inside the fixed-position sheet, visually overlapping real
   tile options. visibility (not display) so .actions' flex layout doesn't
   reflow when it disappears. */
.switch[open]>summary{visibility:hidden}
.switch:not([open]) .grid{display:none}
.switch[open] .grid{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%;max-width:520px;margin-inline:auto;margin-top:0;z-index:2;
  background:var(--bg2);padding:var(--space-24) var(--space-16) var(--space-32);border-radius:var(--radius-sheet) var(--radius-sheet) 0 0;
  border:1px solid var(--line);border-bottom:none;box-shadow:0 -8px 32px rgba(0,0,0,.5);max-height:70vh;overflow-y:auto}
.switch[open] .grid::before{content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);width:36px;height:4px;border-radius:var(--radius-pill);background:var(--line)}
/* Reusable sheet header (see _sheet_header.html): a label plus an explicit
   close control fixed to the sheet's own top-right corner, independent of
   wherever the trigger that opened it happens to sit -- the trigger used
   to double as the only way to dismiss, which put it awkwardly inside the
   opened grid alongside real options. */
.sheet-header{position:relative;display:flex;align-items:center;min-height:24px;margin-bottom:var(--space-16)}
.grid>.sheet-header{grid-column:1/-1}
.sheet-close{position:absolute;top:-8px;right:-8px;background:transparent;border:none;color:var(--mute);font-size:22px;line-height:1;cursor:pointer;padding:var(--space-8)}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-8);margin-top:var(--space-12)}
.tile{border-radius:var(--radius-card);padding:var(--space-16) var(--space-8);font:inherit;font-size:13px;cursor:pointer;background:#0F1A14;color:var(--green);border:1px solid #1E4D35}
.tile.drift{background:#1A1012;color:var(--red);border-color:#4D2121}
.timeline{margin-top:var(--space-16)}.slot{display:flex;gap:var(--space-12);margin-bottom:var(--space-8)}.slot .t{color:var(--mute);width:44px;padding-top:var(--space-16);flex:none}
.card{flex:1;border-radius:var(--radius-card);padding:var(--space-16);border:1px solid var(--line);background:var(--card)}
.card summary{cursor:pointer}.card b{display:block;font-weight:700}.card small{color:var(--mute)}
.card.chosen{background:#0C1A12;border-color:#1E4D35}.card.chosen b{color:var(--green)}
.card.drift{background:#1C0F10;border-color:#4D2121}.card.drift b{color:var(--red)}
.card.sleep{background:var(--card);color:var(--mute)}
.card.verified{border-width:2px}
.card.gap{background:#160E0F;border:1px dashed #4D2121}.card.gap b{color:var(--red)}
.actions{display:flex;gap:var(--space-8);margin-top:var(--space-12)}
.login{padding:var(--space-40) 0}.login h1{font-weight:700;font-size:32px;letter-spacing:-.03em}
.login input{width:100%;padding:var(--space-12);border-radius:var(--radius-input);border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;margin:var(--space-12) 0}
:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media (prefers-reduced-motion:no-preference){.bar span{transition:width .4s}}
.h1{font-weight:700;font-size:30px;letter-spacing:-.03em;margin:var(--space-8) 0 var(--space-8)}
.h2{display:block;font-weight:700;font-size:22px;margin:var(--space-8) 0 var(--space-8)}
.green{color:var(--green)}.small{font-size:13px}.wide{width:100%;margin-top:var(--space-12);padding:var(--space-16);border-radius:var(--radius-pill)}
.tile.sel{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-8);background:var(--card);color:var(--mute);border-color:var(--line)}
.tile.sel input{position:absolute;opacity:0;inset:0}.tile.sel:has(input:checked){background:#0F1A14;color:var(--green);border-color:var(--green)}
.tile.sel b{font-family:var(--font-display);font-size:22px;color:var(--ink)}.tile.sel:has(input:checked) b{color:var(--green)}
/* Intent-aware selectable tiles (split's segment picker): the base .tile
   intent color applies whether or not selected -- selection highlights
   with a bolder border in that SAME color, never an override to green
   regardless of intent. Plain .tile.sel above (duration picker, focus's
   activity picker) has no intent to preserve and keeps its old behavior. */
.tile.chosen.sel{background:#0F1A14;color:var(--green);border-color:#1E4D35}
.tile.drift.sel{background:#1A1012;color:var(--red);border-color:#4D2121}
.tile.chosen.sel:has(input:checked){border-color:var(--green);border-width:2px}
.tile.drift.sel:has(input:checked){border-color:var(--red);border-width:2px}
.insight{background:#0C1A12;border:1px solid #1E4D35;border-radius:var(--radius-card);padding:var(--space-16);margin:var(--space-16) 0}
.center{text-align:center}.pill{display:inline-block;padding:var(--space-8) var(--space-20);border-radius:var(--radius-pill);background:#0F1A14;color:var(--green);border:1px solid #1E4D35;font-weight:700}
.timer{position:relative;display:inline-block;margin:var(--space-24) 0 var(--space-8)}.timerlabel{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.actions.center{justify-content:center}.btn.danger{background:#1C0F10;color:var(--red);border-color:#4D2121}
.stack{display:flex;flex-direction:column;gap:var(--space-12)}
.row-btn{text-align:start;padding:var(--space-16);padding-inline-end:var(--space-32);border-radius:var(--radius-card);position:relative}
.row-btn::after{content:'\203A';position:absolute;inset-inline-end:var(--space-16);top:50%;transform:translateY(-50%);color:var(--mute);font-size:20px}
.gapcard{margin-bottom:var(--space-12)}.gapcard b{font-size:18px}.chosen-ink{color:var(--green)}.drift-ink{color:var(--red)}
.in{flex:1;padding:var(--space-12);border-radius:var(--radius-input);border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:inherit}
textarea.in{width:100%;min-height:120px;resize:vertical;display:block;margin-top:var(--space-12)}
.chips{display:flex;gap:var(--space-8);flex-wrap:wrap;margin-top:var(--space-12)}
.chip{position:relative;display:inline-flex;cursor:pointer}
.chip input{position:absolute;opacity:0;inset:0;margin:0}
.chip span{padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);background:var(--card);color:var(--mute);border:1px solid var(--line)}
.chip:has(input:checked) span{background:#0F1A14;color:var(--green);border-color:var(--green)}
.actions.split>*{flex:1;text-align:center}
.cutrow{display:flex;gap:var(--space-8);align-items:center}
.cutrow .remove-cut{flex:none;padding:var(--space-8) var(--space-12);font-size:18px;line-height:1}
.notif{background:#1A1C20;border-radius:22px;padding:var(--space-16);margin-top:var(--space-24)}.grid.three{grid-template-columns:repeat(3,1fr)}
.mono-num{font-variant-numeric:tabular-nums}
nav.tabs{display:flex;gap:var(--space-16);margin-top:var(--space-8)}nav.tabs a{color:var(--mute);text-decoration:none}
nav.tabs a.on{color:var(--bg);background:var(--ink);padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);font-weight:700}
.filterrow{display:flex;gap:var(--space-8);flex-wrap:wrap;margin:var(--space-16) 0}
.filterrow a{padding:var(--space-8) var(--space-16);border-radius:var(--radius-pill);background:var(--card);color:var(--mute);border:1px solid var(--line);text-decoration:none;font-size:13px}
.filterrow a.on{background:var(--ink);color:var(--bg);font-weight:700;border-color:var(--ink)}
.journal-day{display:flex;align-items:center;gap:var(--space-12);margin:var(--space-24) 0 var(--space-12)}
.journal-ring{flex:none;width:42px;height:42px}.journal-ring svg{width:42px;height:42px}
.journal-thread-note{margin-top:var(--space-12);padding-top:var(--space-12);border-top:1px solid var(--line)}
.history-cards{display:grid;gap:var(--space-16);margin-top:var(--space-20);justify-items:center}
.history-card{display:flex;flex-direction:column;align-items:center;gap:var(--space-8);text-decoration:none;color:var(--ink);position:relative}
.history-ring{display:block;position:relative}.history-ring svg{width:100%;height:100%}
.history-date{font-size:12px;color:var(--mute)}
.history-notedot{display:flex;align-items:center;gap:4px;font-size:11px;color:var(--mute);position:absolute;top:-2px;right:-2px}
.history-notedot .dot{width:6px;height:6px;margin-inline-end:0;background:var(--green)}
.history-chipgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(7,1fr);gap:3px;overflow-x:auto;padding:var(--space-16) 0;margin-top:var(--space-8)}
.history-chip{width:12px;height:12px;border-radius:3px;display:block;position:relative}
.history-chip.empty{background:transparent}
.chip-dot{position:absolute;top:-2px;right:-2px;width:5px;height:5px;border-radius:50%;background:var(--ink)}

@media (min-width:768px){
  body{max-width:680px;padding-inline:var(--space-24)}
  .login{max-width:400px;margin-inline:auto}
}
@media (min-width:1200px){
  body{padding:var(--space-32)}
  body.dashboard{max-width:1200px}
  body.dashboard main{display:grid;grid-template-columns:430px 1fr;gap:var(--space-20);align-items:start}
}