/* qomplain: tokens and components from DESIGN.md. Do not add a colour, size or radius that is not a token there. */
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/ahn-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Atkinson Hyperlegible Next";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/ahn-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --bg:#ffffff;--surface:#f3f6f8;--ink:#14212b;--muted:#566876;--line:#dce3e8;--control-line:#7d8d99;
  --track:#14212b;--track-empty:#b8c5ce;--gold:#8a5f0c;--gold-fill:#b07a12;--gold-wash:#fbf3df;
  --held:#9b3d2e;--focus:#2b6cb0;--on-ink:#ffffff;color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121c24;--surface:#1a2630;--ink:#eef2f5;--muted:#9aabb8;--line:#2c3b47;--control-line:#6b7d8b;
  --track:#cfdbe4;--track-empty:#4b5d6b;--gold:#e8b73f;--gold-fill:#e8b73f;--gold-wash:#2e2615;
  --held:#e58b78;--focus:#8ab8ea;--on-ink:#121c24;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#121c24;--surface:#1a2630;--ink:#eef2f5;--muted:#9aabb8;--line:#2c3b47;--control-line:#6b7d8b;
  --track:#cfdbe4;--track-empty:#4b5d6b;--gold:#e8b73f;--gold-fill:#e8b73f;--gold-wash:#2e2615;
  --held:#e58b78;--focus:#8ab8ea;--on-ink:#121c24;color-scheme:dark}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:72px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Atkinson Hyperlegible Next",sans-serif;
  font-size:17px;line-height:26px;font-weight:400;-webkit-tap-highlight-color:transparent;
  font-variant-numeric:tabular-nums;min-height:100dvh;display:flex;flex-direction:column}
body.has-sticky{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a.tap,.linkbtn,.back{display:inline-flex;align-items:center;min-height:48px}
button,input,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.wrap{width:100%;max-width:40rem;margin:0 auto;padding:0 20px}
.text{max-width:34rem}

header.top{position:sticky;top:0;z-index:5;background:var(--bg);border-bottom:1px solid var(--line)}
header.top .wrap{display:flex;align-items:center;gap:12px;height:56px}
.mark{font-weight:800;font-size:21px;letter-spacing:-0.02em;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;min-height:48px}
header.top nav a{text-decoration:none;font-weight:700;font-size:15px;display:inline-flex;align-items:center;min-height:48px;padding:0 4px}

main{flex:1;padding:24px 0 64px}
h1{font-size:28px;line-height:34px;font-weight:750;letter-spacing:-0.01em;margin:0 0 12px}
h2{font-size:20px;line-height:26px;font-weight:700;margin:32px 0 8px}
p{margin:0 0 12px}
.muted{color:var(--muted)}
.small{font-size:15px;line-height:22px;font-weight:450}

.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:52px;border-radius:10px;
  border:0;background:var(--ink);color:var(--on-ink);font-weight:700;font-size:17px;text-decoration:none;cursor:pointer;padding:0 20px}
.btn.secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--control-line)}
.btn.inline{width:auto;display:inline-flex}
.bell{width:52px;padding:0;flex:none}
.bell[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.linkbtn{background:none;border:0;padding:0;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.row-actions{display:flex;flex-direction:column;gap:12px;margin-top:24px}
.back{background:none;border:0;padding:0;margin:-12px 0 4px;font-weight:700;cursor:pointer;gap:4px}

.box{background:var(--surface);border-radius:14px;padding:16px;margin:16px 0 8px;box-shadow:inset 0 0 0 1.5px var(--control-line)}
.box:has(textarea:focus-visible){box-shadow:inset 0 0 0 1.5px var(--control-line),0 0 0 3px var(--focus)}
.mic:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.box textarea{width:100%;min-height:132px;border:0;background:transparent;resize:none;font-size:19px;line-height:28px;outline:none}
.box .tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.mic{width:52px;height:52px;border-radius:10px;border:1.5px solid var(--control-line);background:var(--bg);display:grid;place-items:center;cursor:pointer}
.mic svg{width:22px;height:22px}
.media{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 0}
.thumb{position:relative;width:88px;height:88px;border-radius:10px;overflow:hidden;background:var(--line)}
.thumb img,.thumb video{width:100%;height:100%;object-fit:cover;display:block}
.thumb .kind{position:absolute;left:4px;bottom:4px;background:rgb(0 0 0 / .6);color:#fff;font-size:15px;line-height:22px;padding:0 6px;border-radius:4px}
.thumb button{position:absolute;top:0;right:0;width:48px;height:48px;border:0;background:none;cursor:pointer;display:grid;place-items:start end;padding:4px}
.thumb button span{width:26px;height:26px;border-radius:50%;background:rgb(0 0 0 / .65);color:#fff;display:grid;place-items:center;font-size:17px;line-height:1}
.tools .left{display:flex;gap:8px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.err{color:var(--held);font-size:15px;line-height:22px;margin:4px 0 0;min-height:0}

.chips{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.chip{min-height:48px;padding:0 16px;border-radius:8px;border:1.5px solid var(--control-line);background:var(--bg);font-weight:700;font-size:17px;cursor:pointer}
.chip[aria-pressed="true"],.chip[aria-checked="true"]{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}

.ai{border-left:3px solid var(--line);padding:4px 0 4px 16px;margin:16px 0 4px}
.ai .q{font-weight:700;font-size:20px;line-height:26px}
.disclose{font-size:15px;line-height:22px;color:var(--muted);margin-top:16px}
.steps{font-size:15px;line-height:22px;color:var(--muted);margin-bottom:8px}
.input{width:100%;min-height:52px;border-radius:10px;border:1.5px solid var(--control-line);background:var(--bg);padding:12px 16px;font-size:17px}
textarea.input{min-height:152px;font-size:19px;line-height:28px;resize:none;field-sizing:content;padding-bottom:16px}
label.lab{display:block;font-size:15px;line-height:22px;color:var(--muted);margin:16px 0 8px}
.hint{font-size:15px;line-height:22px;color:var(--muted);margin:8px 0 0}

.list{list-style:none;margin:8px 0 0;padding:0}
.list li{position:relative;border-top:1px solid var(--line);padding:16px 0}
.list li:last-child{border-bottom:1px solid var(--line)}
.list .t{font-weight:700;font-size:17px;line-height:24px;text-decoration:none;display:block}
.list a.t::after{content:"";position:absolute;inset:0}
.list .ctx{font-size:15px;line-height:22px;color:var(--muted);margin-top:4px}
.list .inner{position:relative;z-index:1}
.done{font-weight:700}

.ft{display:flex;align-items:center;gap:12px;margin-top:12px}
.ft .bar{display:grid;grid-template-columns:repeat(6,1fr);gap:4px;width:132px;flex:none}
.ft .bar i{height:4px;border-radius:1px;background:var(--track-empty)}
.ft .bar i.d{background:var(--track)}
.ft .bar i.g{background:var(--gold-fill)}
.ft .lab{font-size:15px;font-weight:700;line-height:22px}
.ft .lab.g{color:var(--gold)}

.tl{list-style:none;margin:12px 0 0;padding:0}
.tl li{position:relative;padding:0 0 24px 32px}
.tl li::before{content:"";position:absolute;left:7px;top:24px;bottom:0;width:2px;background:var(--track-empty)}
.tl li:last-child::before{display:none}
.tl li.d::before{background:var(--track)}
.tl li.g::before{background:var(--gold-fill)}
.tl li.cur::before{background:var(--track-empty)}
.tl .dot{position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;border:2px solid var(--track-empty);background:var(--bg)}
.tl li.d .dot{background:var(--track);border-color:var(--track)}
.tl li.g .dot{background:var(--gold-fill);border-color:var(--gold-fill)}
.tl li.cur .dot{background:var(--bg);border:3px solid var(--track);box-shadow:0 0 0 4px var(--line)}
.tl li.cur.gc .dot{border-color:var(--gold-fill)}
.tl .n{font-weight:700}
.tl .when{font-size:15px;color:var(--muted);margin-left:8px}
.tl .x{font-size:15px;line-height:22px;color:var(--muted);margin-top:4px}
.tl li.f .n{color:var(--muted);font-weight:450}

.panel{background:var(--surface);border-radius:14px;padding:20px;margin:16px 0}
.panel.gold{background:var(--gold-wash)}
.panel h2:first-child{margin-top:0}
.help{list-style:none;margin:0;padding:0}
.help li{border-top:1px solid var(--line)}
.help li:first-child{border-top:0}
.help a{display:block;padding:12px 0;text-decoration:none;min-height:48px}
.help a b{text-decoration:underline;text-underline-offset:3px;display:block}
.help .src{font-size:15px;line-height:22px;color:var(--muted);margin-top:4px}
.reports{margin:0;padding-left:20px}
.reports li{margin:0 0 8px}
.cause{display:flex;justify-content:space-between;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.cause:first-of-type{border-top:0}
.basis{font-size:15px;color:var(--muted);text-align:right;flex:none;max-width:9rem;line-height:22px}
.tag{display:inline-block;font-size:15px;font-weight:700;line-height:22px;padding:0 8px;border-radius:4px;box-shadow:inset 0 0 0 1px var(--control-line)}
.tag.h{color:var(--held);box-shadow:inset 0 0 0 1px var(--held)}
.note{border-left:3px solid var(--ink);padding:4px 0 4px 16px;margin:16px 0}
.note.h{border-color:var(--held)}
.reply{border-left:3px solid var(--ink);padding:4px 0 4px 16px;margin:12px 0}
.reply .who{font-weight:700}

.big{font-size:28px;line-height:34px;font-weight:750;letter-spacing:-0.01em;margin:0 0 8px}
.count{font-size:20px;line-height:26px;font-weight:700;margin:0 0 4px}
.row{display:flex;align-items:center;gap:12px;min-height:56px;border-top:1px solid var(--line);padding:4px 0}
.row:last-child{border-bottom:1px solid var(--line)}
.row .lbl{flex:1;line-height:22px}
.row .lbl small{display:block;font-size:15px;color:var(--muted)}
.row svg{flex:none}
.switch{width:56px;height:32px;border-radius:16px;border:0;background:var(--bg);box-shadow:inset 0 0 0 1.5px var(--control-line);position:relative;cursor:pointer;flex:none;margin:8px 0}
.switch::after{content:"";position:absolute;top:4px;left:4px;width:24px;height:24px;border-radius:50%;background:var(--control-line);transition:left .15s}
.switch[aria-checked="true"]{background:var(--ink)}
.switch[aria-checked="true"]::after{left:28px;background:var(--bg)}
.row.sw{cursor:pointer}
.row a.go{font-weight:700}

.sticky{position:fixed;left:0;right:0;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:12px 0 calc(12px + env(safe-area-inset-bottom));z-index:4}
.email{border:1px solid var(--control-line);border-radius:14px;padding:20px}
.email .hdr{font-size:15px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:16px}
.seg{display:flex;border-radius:10px;box-shadow:inset 0 0 0 1.5px var(--control-line);overflow:hidden;margin:8px 0 16px}
.seg button{flex:1;min-height:48px;border:0;background:none;font-weight:700;cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--on-ink)}
.toast{border-left:3px solid var(--ink);padding:4px 0 4px 16px;margin:12px 0;font-weight:700}
footer.bottom{border-top:1px solid var(--line);padding:12px 0 32px}
footer.bottom .wrap{display:flex;flex-wrap:wrap;gap:0 16px;font-size:15px}
footer.bottom a,footer.bottom .linkbtn{display:inline-flex;align-items:center;min-height:48px;padding:0;font-weight:450}
@media (min-width:900px){h1,.big{font-size:36px;line-height:42px}main{padding-top:48px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (hover:hover){.chip:hover{border-color:var(--ink)}.list li:hover a.t{text-decoration:underline}}

/* Brand: indigo (Eyal chose it 2026-11-07 from eight looks). Buttons, the q of the mark,
   done track segments, the bar under h1, left rules, link underlines, the box and help panel wash.
   Gold stays progress only. */
:root{--brand:#34408f;--on-brand:#ffffff;--brand-wash:#eef0fa;--brand-line:#34408f;--track:#34408f}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--brand:#aab4f0;--on-brand:#151a38;--brand-wash:#1e2342;--brand-line:#aab4f0;--track:#aab4f0}}
:root[data-theme="dark"]{--brand:#aab4f0;--on-brand:#151a38;--brand-wash:#1e2342;--brand-line:#aab4f0;--track:#aab4f0}
.mark .q{color:var(--brand)}
.btn{background:var(--brand);color:var(--on-brand)}
.btn.secondary{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--brand-line)}
.box{background:var(--brand-wash)}
.panel:not(.gold){background:var(--brand-wash)}
.ai,.note:not(.h),.reply{border-left-color:var(--brand)}
a{text-decoration-color:var(--brand)}
.chip[aria-pressed="true"],.switch[aria-checked="true"]{background:var(--brand);border-color:var(--brand)}
.check input{accent-color:var(--brand)}
h1::after{content:"";display:block;width:40px;height:4px;border-radius:2px;background:var(--brand);margin-top:12px}

/* Dictation (mic next to the camera): recording = brand fill with a timer; writing = pulsing. */
.mic.dict{width:auto;min-width:52px;padding:0 14px;gap:8px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink);font-weight:700;font-size:15px}
.mic.dict[aria-pressed="true"]{background:var(--brand);color:var(--on-brand);border-color:var(--brand)}
.mic.dict.busy{opacity:.75;animation:dictpulse 1.2s ease-in-out infinite}
@keyframes dictpulse{50%{opacity:.4}}
.dict-time:empty{display:none}
#dict-status .linkbtn{margin-left:8px}

/* v1 additions */
.btn[disabled]{opacity:.6;cursor:progress}
.check{display:flex;gap:12px;align-items:flex-start;min-height:48px;padding:12px 0;cursor:pointer}
.check input{width:24px;height:24px;margin:1px 0 0;flex:none;accent-color:var(--ink)}
.fieldset{border:0;margin:0;padding:0}
.adm table{width:100%;border-collapse:collapse;font-size:15px;line-height:22px}
.adm td,.adm th{border-top:1px solid var(--line);padding:8px 8px 8px 0;text-align:left;vertical-align:top}
.adm pre{white-space:pre-wrap;font:inherit;margin:0}
.adm .input{min-height:48px}
.adm textarea.input{font-size:17px;line-height:26px;min-height:120px}
.ext::after{content:"";display:inline-block;width:.8em;height:.8em;margin-left:4px;vertical-align:-1px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat}