/* Aster web page. Tokens: UI_SPEC §2.1 (values exact). No shadows, no washes. */
:root{
  --bg:#F4F2EC;--surface:#FFFEFB;--ink:#242C28;--muted:#5F655B;--line:#DCDED4;--control:#858A80;
  --accent:#355442;--accent-soft:#D9E4CD;--accent-fill:#355442;--accent-fill-edge:#355442;--on-accent-fill:#F4F2EC;
  --degraded:#8A6420;--failed:#AF4D37;
  --serif:"Iowan Old Style","Baskerville","Palatino Linotype",Palatino,Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,0,0,1);
  --fast:120ms;--base:200ms;--slow:320ms;
  --focus-w:2px;
  --gutter:24px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#121512;--surface:#1B1F1B;--ink:#F4F7ED;--muted:#909B8D;--line:#293023;--control:#6A7366;
  --accent:#CCF798;--accent-soft:#26301F;--accent-fill:#3E5F2E;--accent-fill-edge:#5E8A46;--on-accent-fill:#F4F7ED;
  --degraded:#E0B25A;--failed:#E07A62;color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#121512;--surface:#1B1F1B;--ink:#F4F7ED;--muted:#909B8D;--line:#293023;--control:#6A7366;
  --accent:#CCF798;--accent-soft:#26301F;--accent-fill:#3E5F2E;--accent-fill-edge:#5E8A46;--on-accent-fill:#F4F7ED;
  --degraded:#E0B25A;--failed:#E07A62;color-scheme:dark;}
/* After the dark blocks and at their specificity, so Increase Contrast works in both themes. */
@media (prefers-contrast:more){:root,:root:not([data-theme="light"]),:root[data-theme="dark"]{--muted:var(--ink);--line:var(--control);--focus-w:3px}}
@media (max-width:430px){:root{--gutter:16px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0}
body{background:var(--bg);color:var(--ink);font:17px/1.45 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;min-height:100vh;min-height:100dvh}
button,input{font:inherit;color:inherit}
:focus-visible{outline:var(--focus-w) solid var(--accent);outline-offset:2px;border-radius:6px}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:8px;top:-60px;background:var(--surface);color:var(--accent);padding:10px 14px;border-radius:10px;z-index:10;font:500 15px var(--sans)}
.skip:focus{top:8px}

/* ---------- page frame: one column, max 520 px ---------- */
.page{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.site-header,.screen,.site-footer{width:100%;max-width:calc(520px + 2 * var(--gutter));margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.site-header{display:flex;justify-content:space-between;align-items:center;min-height:64px;padding-top:8px}
.screen{flex:1;padding-top:24px;padding-bottom:24px;outline:none}
.site-footer{padding-top:16px;padding-bottom:max(28px,env(safe-area-inset-bottom));font-size:13px;color:var(--muted);display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.site-footer:empty{padding:0}
.site-footer .text{font-size:13px}

/* ---------- type ---------- */
.wordmark{display:inline-flex;align-items:center;gap:6px;min-height:44px;font:400 22px/1 var(--serif);letter-spacing:-.04em;color:var(--ink);text-decoration:none}
.wordmark svg{width:14px;height:14px;fill:var(--accent);flex:none}
.state{font:400 clamp(32px,7vw,40px)/1.15 var(--serif);letter-spacing:-.02em;margin:0;color:var(--ink);outline:none}
.title{font:600 24px/1.2 var(--sans);margin:0;outline:none}
.body{margin:8px 0 0;font-size:17px;line-height:1.45}
.meta{font-size:13px;line-height:1.4;color:var(--muted);margin:6px 0 0}
.fact{font-size:15px;line-height:1.4;color:var(--muted);margin:8px 0 0}
.tnum{font-variant-numeric:tabular-nums}
.label{display:block;font:500 15px/1.3 var(--sans)}
.section-label{font:400 13px/1.3 var(--sans);color:var(--muted);margin:32px 0 8px}
.deg-text{color:var(--degraded)}
hr.hair{border:0;border-top:1px solid var(--line);margin:24px 0}

/* ---------- buttons ---------- */
.primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:52px;padding:12px 16px;border-radius:12px;border:1px solid var(--accent-fill-edge);background:var(--accent-fill);color:var(--on-accent-fill);font:600 17px/1.2 var(--sans);text-decoration:none;cursor:pointer;transition:transform var(--fast) var(--ease),opacity var(--fast)}
.primary:active{transform:scale(.985)}
.primary[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.text{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;border:0;background:none;color:var(--accent);font:500 15px/1.3 var(--sans);cursor:pointer;text-decoration:none;text-align:left}
.text:hover{text-decoration:underline;text-underline-offset:3px}
.text.danger{color:var(--failed)}
.text[disabled],.text[aria-disabled="true"]{opacity:.55;cursor:not-allowed;text-decoration:none}
.back{display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0;border:0;background:none;color:var(--accent);font:400 17px var(--sans);cursor:pointer;text-decoration:none}
.actions{margin-top:16px}

/* ---------- rows ---------- */
.group{list-style:none;margin:0;padding:0;background:var(--surface);border-radius:14px;overflow:hidden}
.group + .group{margin-top:12px}
/* The group clips its corners, so rings inside it are drawn inward (spec §7: visible focus). */
.group .row:focus-visible{outline-offset:-3px}
.group .text:focus-visible{outline-offset:0}
.row{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 16px;border:0;border-bottom:1px solid var(--line);width:100%;background:none;text-align:left;color:var(--ink);font:inherit}
.group > li:last-child > .row{border-bottom:0}
a.row,button.row{cursor:pointer;text-decoration:none}
a.row:hover,button.row:hover{background:color-mix(in srgb,var(--surface) 92%,var(--ink))}
.row .main{flex:1;min-width:0}
.row .lbl{display:block;font:500 16px/1.3 var(--sans);overflow-wrap:anywhere}
.row .lbl.plain{font-weight:400}
.row .note-text{display:block;font:400 17px/1.45 var(--sans);overflow-wrap:anywhere;white-space:pre-wrap}
.row .lives{display:block;font-size:13px;line-height:1.4;color:var(--muted);margin-top:2px}
.row .val{color:var(--muted);font-size:15px;text-align:right;flex:none;font-variant-numeric:tabular-nums}
.row .chev{color:var(--muted);flex:none}
.row .row-acts{display:flex;gap:16px;flex:none;flex-wrap:wrap}
.row.stack{flex-wrap:wrap}
@media (max-width:430px){.row.stack .row-acts,.row.stack .chip{flex-basis:100%}.row.stack .chip{flex-basis:auto}}
.row-note{padding:0 16px 10px;margin:0}

/* ---------- chip, dot, steps, meter ---------- */
.chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);font:500 13px/1.3 var(--sans);flex:none}
.chip i,.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);display:inline-block;flex:none}
.dot{margin-top:7px}
.dot.wait{animation:breathe 1.6s var(--ease) 6 alternate}
@keyframes breathe{from{opacity:1}to{opacity:.35}}
.steps{list-style:none;margin:16px 0;padding:0;display:grid;gap:12px;counter-reset:s}
.steps li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px;align-items:start;counter-increment:s}
.steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;border:1px solid var(--control);display:grid;place-items:center;font:600 13px/1 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.meter{display:flex;gap:4px;margin-top:8px;max-width:240px}
.meter i{flex:1;height:4px;border-radius:2px;background:var(--line)}
.meter i.on{background:var(--accent)}
.meter.deg i.on{background:var(--degraded)}

/* ---------- fields ---------- */
.field{display:block;width:100%;min-height:52px;padding:12px 14px;border-radius:10px;border:1px solid var(--control);background:var(--surface);color:var(--ink);font:17px var(--sans)}
.field:focus{outline:var(--focus-w) solid var(--accent);outline-offset:2px}
.field[disabled]{opacity:.6}
.field[aria-invalid="true"]{border-color:var(--failed)}
.codefield{font:500 32px/1.1 var(--mono);letter-spacing:.25em;font-variant-numeric:tabular-nums;padding-right:4px}
.pwwrap{position:relative;margin-top:8px}
.pwwrap .field{padding-right:72px}
.pwwrap .text{position:absolute;right:10px;top:4px}
.field-gap{margin-top:8px}

/* ---------- inline status ---------- */
.status{display:flex;gap:8px;align-items:flex-start;margin:12px 0 0;font-size:15px;line-height:1.4}
.status:empty{margin:0}
.status .g{flex:none;width:18px;text-align:center}
.status.ok{color:var(--ink)}.status.deg{color:var(--degraded)}.status.bad{color:var(--failed)}.status.mut{color:var(--muted)}
.err{color:var(--failed);font-size:15px;margin:8px 0 0}
.err:empty{margin:0}
.indent{margin-left:26px}
.undo{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px;padding:4px 16px;background:var(--surface);border-radius:12px;font-size:15px}

/* ---------- blocks ---------- */
.card{background:var(--surface);border-radius:14px;padding:20px}
@media (max-width:430px){.card{padding:16px}}
.offline{display:flex;gap:8px;align-items:flex-start;padding:10px max(var(--gutter),env(safe-area-inset-left));background:var(--surface);border-bottom:1px solid var(--line);color:var(--degraded);font-size:14px;line-height:1.4}
.offline-inner{width:100%;max-width:520px;margin:0 auto;display:flex;gap:8px}
.facts{margin:12px 0 0;padding:0 0 0 18px}
.facts li{margin:6px 0}
.locked-top{padding-top:8vh}
.first-paint .opening{opacity:0;animation:appear 1ms linear 600ms forwards}
@keyframes appear{to{opacity:1}}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}.mt24{margin-top:24px}.mt32{margin-top:32px}

/* ---------- dialog (native) ---------- */
.dialog{width:min(400px,calc(100vw - 32px));background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:14px;padding:20px}
.dialog::backdrop{background:color-mix(in srgb,var(--bg) 40%,transparent)}
.dialog-title{font:600 20px/1.25 var(--sans);margin:0}
.dialog .acts{display:flex;justify-content:flex-end;gap:16px;margin-top:16px;flex-wrap:wrap}

/* ---------- motion ---------- */
.screen.enter{animation:rise var(--slow) var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .screen.enter{animation:fade var(--slow) var(--ease)}
  .dot.wait{animation:none}
  .primary{transition:none}
  .primary:active{transform:none}
}