/* ISLAND demo pages — shared tokens and components (light + dark). */
:root{
  --bg:#F5F7F5; --surface:#FFFFFF; --ink:#1C2320; --muted:#59645F; --rule:#D3DAD5; --rule-soft:#E6EBE7;
  --ember:#B4441A; --ember-soft:#F6E3D9; --leaf:#2E6A5C; --leaf-soft:#DDEDE8;
  --warn:#8A5A00; --warn-soft:#F7EBCF; --code-bg:#ECEFEC; --on-ember:#FFFFFF;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Literata",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121715; --surface:#1A201E; --ink:#E6ECE8; --muted:#A3AFA9; --rule:#2F3834; --rule-soft:#252D2A;
    --ember:#F0875A; --ember-soft:#3A2419; --leaf:#74B9A8; --leaf-soft:#1C302B;
    --warn:#E3B45A; --warn-soft:#352B14; --code-bg:#222A27; --on-ember:#1A0E08; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#121715; --surface:#1A201E; --ink:#E6ECE8; --muted:#A3AFA9; --rule:#2F3834; --rule-soft:#252D2A;
  --ember:#F0875A; --ember-soft:#3A2419; --leaf:#74B9A8; --leaf-soft:#1C302B;
  --warn:#E3B45A; --warn-soft:#352B14; --code-bg:#222A27; --on-ember:#1A0E08; color-scheme:dark;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.5;padding-inline:18px}
.wrap{max-width:76rem;margin:0 auto;padding-block:1.6rem 3rem}
header.top{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:.6rem 1.5rem;border-bottom:2px solid var(--ink);padding-bottom:.9rem}
h1{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,3.4vw,2.1rem);margin:0;line-height:1.1;text-wrap:balance}
.sub{color:var(--muted);font-size:.95rem;margin:.35rem 0 0;max-width:46rem}
.eyebrow{font-family:var(--display);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.sitenav{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-family:var(--display);font-size:.88rem}
.sitenav a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule)}
.sitenav a[aria-current="page"]{border-color:var(--ember);color:var(--ember)}
.grid{display:grid;grid-template-columns:minmax(0,23rem) minmax(0,1fr);gap:1.4rem;margin-top:1.3rem}
@media (max-width:860px){.grid{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--rule);padding:1rem 1.1rem}
.panel h2{font-family:var(--display);font-size:1.05rem;margin:0 0 .7rem;font-weight:700}
.stack{display:flex;flex-direction:column;gap:1.1rem}
fieldset{border:1px solid var(--rule);margin:0;padding:.6rem .7rem .7rem;display:flex;flex-direction:column;gap:.45rem;min-width:0}
legend{font-family:var(--display);font-weight:500;font-size:.85rem;padding:0 .3rem}
label{display:flex;flex-direction:column;gap:.15rem;font-size:.78rem;color:var(--muted);font-family:var(--display);letter-spacing:.02em}
select,input[type=text],input[type=number],input[type=range]{font-family:var(--body);font-size:.92rem;color:var(--ink);background:var(--bg);border:1px solid var(--rule);padding:.3rem .35rem;width:100%}
input[type=range]{padding:0;accent-color:var(--ember)}
.row{display:flex;flex-wrap:wrap;gap:.6rem}
.row>label{flex:1 1 7rem}
button{font-family:var(--display);font-weight:500;font-size:.92rem;border:1px solid var(--ink);background:var(--surface);color:var(--ink);padding:.5rem .9rem;cursor:pointer}
button.primary{background:var(--ember);border-color:var(--ember);color:var(--on-ember)}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,select:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--ember);outline-offset:2px}
.actions{display:flex;flex-wrap:wrap;gap:.5rem}
.now{display:grid;grid-template-columns:repeat(auto-fit,minmax(10.5rem,1fr));gap:.8rem}
.stat{border:1px solid var(--rule);padding:.6rem .75rem;background:var(--bg)}
.stat .k{font-family:var(--display);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stat .v{font-family:var(--display);font-weight:700;font-size:1.6rem;font-variant-numeric:tabular-nums;line-height:1.15}
.stat .s{font-size:.8rem;color:var(--muted)}
.chip{display:inline-block;font-family:var(--display);font-size:.8rem;font-weight:500;padding:.12rem .5rem;border:1px solid var(--rule);background:var(--bg)}
.chip.learned,.chip.knew_it{background:var(--leaf-soft);border-color:var(--leaf);color:var(--leaf)}
.chip.wheel_spinning{background:var(--warn-soft);border-color:var(--warn);color:var(--warn)}
.chip.learned_then_lost,.chip.knew_then_lost{background:var(--ember-soft);border-color:var(--ember);color:var(--ember)}
.alert{border-left:4px solid var(--warn);background:var(--warn-soft);padding:.6rem .8rem;font-size:.92rem}
.hazbot{border-left:4px solid var(--leaf);background:var(--leaf-soft);padding:.6rem .8rem;font-size:.92rem}
.hazbot b,.alert b{font-family:var(--display)}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:.8rem}
.skill{border:1px solid var(--rule);padding:.6rem .7rem;background:var(--bg)}
.skill .top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.skill .name{font-family:var(--display);font-weight:500;font-size:.92rem}
.skill .pl{font-family:var(--mono);font-size:.85rem;font-variant-numeric:tabular-nums}
.skill .desc{font-size:.76rem;color:var(--muted);margin:.1rem 0 .3rem}
svg.spark{width:100%;height:84px;display:block}
.log{font-family:var(--mono);font-size:.82rem;max-height:17rem;overflow:auto;border:1px solid var(--rule);background:var(--bg)}
.log table{border-collapse:collapse;width:100%}
.log th,.log td{padding:.32rem .5rem;border-bottom:1px solid var(--rule-soft);text-align:left;white-space:nowrap}
.log th{font-family:var(--display);font-weight:500;font-size:.72rem;letter-spacing:.04em;color:var(--muted);position:sticky;top:0;background:var(--bg)}
.log td.code{color:var(--ember);font-weight:500}
.log tr.repeat td{color:var(--muted)}
.codes{font-family:var(--mono);font-size:.9rem;display:flex;flex-wrap:wrap;gap:.3rem 1.2rem}
.codes span b{color:var(--ember);font-weight:500}
.note{font-size:.8rem;color:var(--muted)}
.empty{color:var(--muted);font-size:.85rem;padding:.6rem .5rem}
[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
.caveat{font-size:.8rem;color:var(--ink);border-left:3px solid var(--warn);background:var(--warn-soft);padding:.35rem .55rem;margin-top:.45rem}
.caveat::before{content:"Caution · ";font-family:var(--display);font-weight:500;color:var(--warn)}
/* report viewer */
.readstrip{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem .8rem;margin-top:.6rem;font-size:.85rem}
.readstrip .lbl{font-family:var(--display);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
button.linkish{background:none;border:0;padding:0;font-family:var(--display);font-weight:500;font-size:inherit;color:var(--leaf);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
button.linkish:hover{color:var(--ember)}
a.btnlink{font-family:var(--display);font-weight:500;font-size:.92rem;border:1px solid var(--ink);background:var(--surface);color:var(--ink);padding:.5rem .9rem;text-decoration:none}
dialog.docdlg{width:min(60rem,calc(100vw - 32px));max-height:calc(100vh - 48px);padding:0;border:1px solid var(--rule);background:var(--surface);color:var(--ink)}
dialog.docdlg::backdrop{background:rgba(10,14,12,.55)}
dialog.docdlg .docbar{position:sticky;top:0;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1rem;padding:.8rem 1.1rem;border-bottom:2px solid var(--ink);background:var(--surface);z-index:1}
dialog.docdlg .docbar h2{font-family:var(--display);font-size:1.15rem;margin:0;text-wrap:balance}
.docbody{padding:.6rem 1.4rem 2rem;font-size:18px;line-height:1.6;max-height:calc(100vh - 140px);overflow:auto;outline:none}
.docbody > *{max-width:46rem}
.docbody h1{font-family:var(--display);font-size:1.7rem;line-height:1.15;margin:1.2rem 0 .6rem}
.docbody h2{font-family:var(--display);font-size:1.3rem;margin:1.8rem 0 .5rem;padding-top:.6rem;border-top:1px solid var(--rule)}
.docbody h3{font-family:var(--display);font-size:1.05rem;margin:1.3rem 0 .3rem;color:var(--ember)}
.docbody h4{font-family:var(--display);font-size:.95rem;margin:1rem 0 .3rem}
.docbody code{font-family:var(--mono);font-size:.82em;background:var(--code-bg);padding:.08em .3em}
.docbody pre{font-family:var(--mono);font-size:.78rem;background:var(--bg);border:1px solid var(--rule);padding:.8rem;overflow-x:auto;max-width:none}
.docbody pre code{background:none;padding:0}
.docbody blockquote{margin:.8rem 0;padding:.3rem .9rem;border-left:3px solid var(--rule);color:var(--muted)}
.docbody .docscroll{overflow-x:auto;max-width:none;margin:1rem 0}
.docbody table{border-collapse:collapse;font-size:.85rem;font-variant-numeric:tabular-nums}
.docbody th,.docbody td{border-bottom:1px solid var(--rule);padding:.4rem .55rem;text-align:left;vertical-align:top}
.docbody th{font-family:var(--display);font-weight:500;color:var(--muted)}
.docbody a{color:var(--leaf)}
ul.doclist{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
ul.doclist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.7rem 0;border-bottom:1px solid var(--rule)}
ul.doclist li .note{grid-column:1;font-size:.82rem}
ul.doclist li a{grid-row:1 / span 2;grid-column:2;align-self:center;font-family:var(--display);font-size:.85rem;color:var(--leaf)}