/* Layout: sticky header; library = filter rail | book list | detail panel (overlay on phones). Meters echo audio level bars. */
:root{
  --bg:#F2F3F6;--surface:#FFFFFF;--ink:#181B26;--muted:#5B6172;--line:#DADDE5;--chip:#E9EBF0;
  --accent:#146C5E;--accent-ink:#FFFFFF;--accent-soft:#DCEEE9;--amber:#A85C08;--danger:#B42318;
  --f-display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --r:8px;
  --m1:#2E7D6B;--m2:#C2410C;--m3:#6D28D9;--m4:#B45309;--m5:#2563EB;--m6:#BE185D;--m7:#4D7C0F;--m8:#64748B;--m9:#0E7490;--m10:#DC2626;--m11:#78350F;--m12:#A21CAF;--m13:#1E3A8A;--m14:#3F3F46;--mother:#CBD2DB;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12141B;--surface:#1A1D27;--ink:#E8EAF0;--muted:#9AA0B2;--line:#2C3040;--chip:#242836;
  --accent:#4CC3AC;--accent-ink:#0C1F1B;--accent-soft:#17332D;--amber:#E3A04A;--danger:#F97066;
  --m1:#4CC3AC;--m2:#FB923C;--m3:#A78BFA;--m4:#FBBF24;--m5:#60A5FA;--m6:#F472B6;--m7:#A3E635;--m8:#94A3B8;--m9:#22D3EE;--m10:#F87171;--m11:#D6A77A;--m12:#E879F9;--m13:#818CF8;--m14:#A1A1AA;--mother:#4B5563;color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#12141B;--surface:#1A1D27;--ink:#E8EAF0;--muted:#9AA0B2;--line:#2C3040;--chip:#242836;
  --accent:#4CC3AC;--accent-ink:#0C1F1B;--accent-soft:#17332D;--amber:#E3A04A;--danger:#F97066;
  --m1:#4CC3AC;--m2:#FB923C;--m3:#A78BFA;--m4:#FBBF24;--m5:#60A5FA;--m6:#F472B6;--m7:#A3E635;--m8:#94A3B8;--m9:#22D3EE;--m10:#F87171;--m11:#D6A77A;--m12:#E879F9;--m13:#818CF8;--m14:#A1A1AA;--mother:#4B5563;color-scheme:dark}
html,body{background:var(--bg);color:var(--ink)}
body{font-family:var(--f-body);font-size:15px;line-height:1.5}
*{box-sizing:border-box}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}

.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:var(--surface);border-bottom:1px solid var(--line);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px;
  display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:500;font-size:22px;letter-spacing:.01em}
.brand svg{color:var(--accent)}
.tabs{display:flex;gap:4px}
.tabs button{border:0;background:transparent;padding:6px 12px;border-radius:999px;color:var(--muted);font-weight:700}
.tabs button[aria-current="true"]{background:var(--accent-soft);color:var(--ink)}
#draftbar{margin-left:auto;display:inline-flex;gap:8px;align-items:center;font-size:13px}
#draftbar:not([hidden])+#conn{margin-left:0}
.pill.draft{border-color:var(--amber);color:var(--amber);border-style:dashed}
.tsub{margin:4px 0 2px 2px}.tsub>summary{list-style:none;cursor:pointer}.tsub>summary::-webkit-details-marker{display:none}.tsub>.chips{padding:4px 0 6px 12px}.chip.grp{font-weight:600}
.tline{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin:3px 0}.tline .gname{font-size:12px;color:var(--muted);min-width:9.5em}.tline .chips{display:inline-flex;flex-wrap:wrap;gap:4px}
.draftnote{border:1px dashed var(--amber);border-radius:var(--r);padding:10px 12px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;margin-bottom:10px}
#conn{margin-left:auto;font-family:var(--f-mono);font-size:12px;color:var(--muted)}

.wrap{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px}
.lib{display:grid;grid-template-columns:230px minmax(0,1fr);gap:24px;align-items:start}
.lib.has-panel{grid-template-columns:230px minmax(0,1fr) minmax(0,440px)}
@media (max-width:1100px){.lib.has-panel{grid-template-columns:200px minmax(0,1fr) minmax(0,400px)}}
@media (max-width:860px){.lib,.lib.has-panel{grid-template-columns:minmax(0,1fr)}}
/* Focus mode: the book panel becomes the wide column and the list shrinks to a compact column */
.lib.panel-wide{grid-template-columns:230px minmax(0,380px) minmax(0,1fr)}
@media (max-width:1100px){.lib.panel-wide{grid-template-columns:200px minmax(0,320px) minmax(0,1fr)}}
.lib.panel-wide #listcol .row{grid-template-columns:minmax(0,1fr);gap:4px;padding:10px 12px}
.lib.panel-wide #listcol .row .t{font-size:15px}
.lib.panel-wide #listcol .row .by{font-size:12px}
.lib.panel-wide #listcol .row .chips,.lib.panel-wide #listcol .mini,.lib.panel-wide #listcol .row-side .pill.example{display:none}
.lib.panel-wide #listcol .mixbar{margin-top:6px;height:12px;border-radius:3px}
/* compact list: labels stay hidden, but hovering a color shows just that one label under the bar (space reserved so rows don't jump) */
.lib.panel-wide #listcol .mixlbl{display:block;height:18px;margin-top:4px;overflow:hidden;white-space:nowrap}
.lib.panel-wide #listcol .mixlbl span{display:none}
.lib.panel-wide #listcol .mixlbl span.hl,.lib.panel-wide #listcol .mixlbl span.on{display:inline-flex;margin:0 8px 0 0;font-size:12px}
.lib.panel-wide #listcol .row-side{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-start;gap:4px 8px;text-align:left}
.lib.panel-wide #listcol .tools{gap:6px}
.lib.panel-wide #listcol .tools select,.lib.panel-wide #listcol #add{flex:1 1 auto}
#panel.wide .p-body{columns:2 340px;column-gap:32px}
#panel.wide .p-body>*{break-inside:avoid}
.focusbtn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:6px 12px;font-size:13px}
.pctl{display:flex;gap:8px;flex:none;align-items:center}
@media (max-width:860px){.pctl .focusbtn{display:none}}

/* Filter rail */
#filters{position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:auto;padding-right:6px;overscroll-behavior:contain;display:flex;flex-direction:column;gap:6px}
@media (max-width:860px){#filters{position:static;max-height:none;overflow:visible;overscroll-behavior:auto}}
.rail-h{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700;display:flex;justify-content:space-between;align-items:center}
.rail-h button{border:0;background:none;color:var(--accent);font-size:12px;letter-spacing:0;text-transform:none;padding:0}
details.fg{border-top:1px solid var(--line);padding-block:6px}
details.fg summary{cursor:pointer;font-weight:700;font-size:14px;list-style:none;display:flex;justify-content:space-between}
details.fg summary::after{content:"+";color:var(--muted)}
details.fg[open] summary::after{content:"–"}
.fg .chips{margin-top:8px}

.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid transparent;background:var(--chip);border-radius:999px;padding:2px 10px;font-size:13px;line-height:1.6;white-space:nowrap}
button.chip:hover{border-color:var(--line)}
.chip[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.chip .n{font-family:var(--f-mono);font-size:11px;opacity:.7}
.chip .w{font-family:var(--f-mono);font-size:10px;letter-spacing:1px;color:var(--accent)}
.chip[aria-pressed="true"] .w{color:inherit}
.chip.w1{background:var(--chip)}
.chip.w2{background:var(--accent-soft)}
.chip.w3{background:var(--accent);color:var(--accent-ink)}
.chip.w3 .w{color:inherit}
/* Tags in a book's details are clickable: they toggle the same filter as the left menu */
.chip.ftag{cursor:pointer;transition:box-shadow .12s}
.feelrow{margin:4px 0 8px}.feelrow .lbl{font-size:12px;color:var(--muted);margin-bottom:3px}
.mixlbl span.ftag,.mini span.ftag{cursor:pointer;border-radius:4px;padding:0 3px;margin:0 -3px}
.mixlbl span.ftag:hover,.mini span.ftag:hover{background:var(--chip);color:var(--ink)}
.mixlbl span.ftag.on,.mini span.ftag.on{background:var(--accent-soft);color:var(--ink);font-weight:700}
.scale.ftag{cursor:pointer;border-radius:6px;padding:2px 6px;margin-inline:-6px}
.scale.ftag:hover{background:var(--chip)}
.scale.ftag.on{background:var(--accent-soft);box-shadow:inset 3px 0 0 var(--accent)}
.pval.ftag{cursor:pointer;border-bottom:1px dotted var(--muted)}
.pval.ftag:hover{color:var(--accent);border-bottom-color:var(--accent)}
.pval.ftag.on{background:var(--accent);color:var(--accent-ink);border-radius:999px;padding:1px 8px;border-bottom:0}
.chip.ftag:hover{box-shadow:0 0 0 1px var(--accent)}
.chip.ftag.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--accent)}
.chip.ftag.on::before{content:"✓";font-size:11px;margin-right:-2px}

/* List */
.tools{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
/* Scrollbars: plain rounded thumbs, no track, border or arrow buttons. Each column's track starts below its pinned header. */
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--muted) 45%,transparent) transparent}} /* Firefox; Chrome/Safari use the rules below */
::-webkit-scrollbar{width:10px;height:10px;background:transparent}
::-webkit-scrollbar-track{background:transparent;border:0}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--muted) 45%,transparent);border-radius:999px;border:2px solid transparent;background-clip:padding-box;min-height:40px}
::-webkit-scrollbar-thumb:hover{background-color:color-mix(in srgb,var(--muted) 75%,transparent)}
::-webkit-scrollbar-button{display:none;width:0;height:0}
::-webkit-scrollbar-corner{background:transparent}
/* Desktop: search/sort sit on top and only the book list itself scrolls, so its scrollbar runs alongside the books */
@media (min-width:861px){
  .wrap:has(>#lib:not([hidden])){padding-bottom:0} /* columns fill the window exactly, so the page itself doesn't scroll */
  #listcol{position:sticky;top:76px;max-height:calc(100vh - 96px);display:flex;flex-direction:column;min-height:0}
  /* The box outline is drawn by #listbox::before and stops short of the right edge, so the scrollbar sits just outside the box */
  #listbox{position:relative;flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  #listbox::before{content:"";position:absolute;inset:0 calc(var(--sbw,10px) + 4px) 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);pointer-events:none}
  #listbox>#list{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;border:0;background:transparent;border-radius:0;padding:1px 4px 1px 1px}
  /* For you (desktop): heading spans the top, centered; below it the recommendations box and the book box sit side by side,
     same top, same height, equal widths. #fy and .fy dissolve so their parts become cells of the #lib grid. */
  .lib.fymode{grid-template-rows:auto auto minmax(0,1fr);height:calc(100vh - 96px);row-gap:0}
  .lib.fymode .fyhead{margin-bottom:6px}
  .lib.fymode .fybar{grid-column:1;grid-row:2;justify-self:center;width:min(900px,100%)}
  .lib.fymode.has-panel .fybar,.lib.fymode.panel-wide .fybar{width:100%}
  .lib.fymode>#fy:not([hidden]),.lib.fymode>#fy>.fy{display:contents}
  .lib.fymode .fyhead{grid-column:1/-1;justify-self:center;width:min(900px,100%);display:flex;flex-direction:column;gap:16px}
  .lib.fymode.has-panel .fyhead,.lib.fymode.panel-wide .fyhead{text-align:center;align-items:center}
  .lib.fymode.has-panel .fyhead .lede,.lib.fymode.panel-wide .fyhead .lede{margin-inline:auto}
  .lib.fymode.has-panel .fyhead>div:last-child,.lib.fymode.panel-wide .fyhead>div:last-child{justify-content:center}
  .lib.fymode .recbox{grid-column:1;grid-row:3;justify-self:center;align-self:stretch;width:min(900px,100%);min-height:0;position:relative;display:flex;flex-direction:column}
  .lib.fymode.has-panel .recbox,.lib.fymode.panel-wide .recbox{width:100%}
  .lib.fymode .recbox::before{content:"";position:absolute;inset:0 calc(var(--sbw,10px) + 4px) 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);pointer-events:none}
  .lib.fymode .recbox>.reclist{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;border:0;background:transparent;border-radius:0;padding:1px 4px 1px 1px}
  .lib.fymode>#panel{grid-column:2;grid-row:3;align-self:stretch;position:relative;top:auto;max-height:none;height:100%;min-height:0}
  .lib.fymode .focusbtn{display:none}
}
/* For you shares the library layout: the recommendations take the filters+list space and books open in the same side panel */
.lib.fymode>#filters,.lib.fymode>#listcol{display:none}
.lib.fymode{grid-template-columns:minmax(0,1fr)}
.lib.fymode.has-panel,.lib.fymode.panel-wide{grid-template-columns:minmax(0,900px) minmax(0,900px);justify-content:center} /* each box as wide as the list on its own; shrink evenly on smaller screens */
@media (max-width:860px){.lib.fymode,.lib.fymode.has-panel,.lib.fymode.panel-wide{grid-template-columns:minmax(0,1fr)}}
.rec.sel{background:var(--accent-soft);border-radius:var(--r)}
/* active For you filters sit at the top of the recommendations box, so the heading (and the book box beside it) never move */
/* the line above the recommendations box: always the same height, so picking a filter never moves either box */
.fybar{height:34px;display:flex;align-items:center;min-width:0}
.fyfilters{display:flex;flex-wrap:nowrap;gap:6px;align-items:center;overflow-x:auto;scrollbar-width:none;min-width:0;padding:0 2px}
.fyfilters::-webkit-scrollbar{display:none}
.fyfilters .ficon{color:var(--accent);flex:none}
.fyfilters .hint{font-size:12px;white-space:nowrap}
.fyfilters .chip,.fyfilters .linkbtn{flex:none;font-size:12px}
.fyfilters .chip.on{background:var(--accent);color:var(--accent-ink);cursor:pointer;border:0;font:inherit;font-size:12px;padding:1px 9px}
}
.tools input[type=search]{flex:1 1 220px;min-width:0}
.field,.tools input,.tools select{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:7px 10px}
.tools select{min-width:0;max-width:100%;text-overflow:ellipsis}
@media (max-width:560px){.tools select{flex:1 1 40%}}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--r);padding:7px 14px;font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.ghost{background:transparent}
.btn.danger{color:var(--danger);border-color:var(--danger);background:transparent}
.btn:disabled{opacity:.5;cursor:not-allowed}
#count{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-bottom:8px}
#listmore{display:block;width:100%;margin-top:8px;text-align:center}
#list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.row{all:unset;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer}
.row:first-child{border-top:0}
/* we keep the clicked book in place ourselves; the browser's own scroll anchoring would fight that */
html,body,#list,.reclist{overflow-anchor:none}
/* a pinned book holds its slot while the list is filtered around it */
.row.pinned,.rec.pinned{box-shadow:inset 3px 0 0 var(--accent)}
.row:hover{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.row[aria-current="true"]{background:var(--accent-soft)}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.row .t{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.25;text-wrap:balance}
.by{color:var(--muted);font-size:13px;margin:2px 0 8px}
.row-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right}
.len{font-family:var(--f-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.pill{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:4px;border:1px solid var(--line);color:var(--muted)}
.pill.finished{border-color:var(--accent);color:var(--accent)}
.pill.listening{border-color:var(--amber);color:var(--amber)}
.pill.example{border-style:dashed}
.stars{color:var(--amber);font-size:13px;letter-spacing:1px}
.empty{padding:32px 20px;text-align:center;color:var(--muted)}
.empty strong{display:block;color:var(--ink);font-family:var(--f-display);font-size:18px;margin-bottom:6px}

/* Level meter */
.meter{display:inline-flex;align-items:flex-end;gap:2px;height:14px}
.meter i{display:block;width:4px;background:var(--line);border-radius:1px}
.meter i:nth-child(1){height:5px}.meter i:nth-child(2){height:7px}.meter i:nth-child(3){height:9px}.meter i:nth-child(4){height:11px}.meter i:nth-child(5){height:14px}
.meter i.on{background:var(--accent)}
.mini{display:flex;gap:10px;font-size:11px;color:var(--muted);align-items:center}
.mini span{display:inline-flex;gap:4px;align-items:center}

/* Panel */
/* Panel = fixed title bar + a body that scrolls, so the scrollbar only runs alongside the body (works in every browser) */
#panel::before{content:"";position:absolute;inset:0 calc(var(--sbw,10px) + 4px) 0 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface);pointer-events:none}
#panel{background:transparent;border:0;padding:0;position:sticky;top:76px;max-height:calc(100vh - 96px);overflow:hidden;min-width:0;display:flex;flex-direction:column}
#panel[hidden]{display:none!important}
.p-head{position:relative;display:flex;justify-content:space-between;gap:12px;align-items:flex-start;flex:none;padding:20px 20px 10px;margin:1px calc(var(--sbw,10px) + 5px) 0 1px;border-bottom:1px solid transparent}
.p-scroll{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:0 24px 20px 21px;margin-bottom:1px}
#panel>.draftnote{position:relative;margin:14px calc(var(--sbw,10px) + 24px) 0 20px}
#panel.wide .p-head{padding:24px 28px 10px}#panel.wide .p-scroll{padding:0 32px 24px 29px}
#panel.scrolled .p-head{border-bottom-color:var(--line)}
#panel.scrolled .p-head h2{font-size:18px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
#panel.scrolled .p-head .pill{display:none}
@media (max-width:860px){#panel{position:fixed;inset:0;top:0;max-height:none;border-radius:0;z-index:20;border:0;background:var(--surface)}
  #panel::before{display:none}#panel .p-head{margin:0}
  #panel .p-head{padding:calc(16px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
  #panel .p-scroll{padding:0 max(16px,env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}}
.p-head h2{font-family:var(--f-display);font-size:26px;line-height:1.15;margin:0;text-wrap:balance;letter-spacing:-.01em}
.x{border:0;background:var(--chip);border-radius:999px;width:32px;height:32px;flex:none;font-size:18px;line-height:1}
.meta{display:flex;flex-wrap:wrap;gap:6px 14px;color:var(--muted);font-size:13px;margin:6px 0 14px}
.meta b{color:var(--ink);font-weight:700}
.sec{border-top:1px solid var(--line);padding-top:14px;margin-top:16px}
.sec h3{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 10px}
.scale{display:grid;grid-template-columns:120px minmax(0,1fr);gap:4px 10px;align-items:center;margin-bottom:8px;font-size:13px}
.scale .nm{font-weight:700}
.scale .rng{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;min-width:0}
.scale .rng .lo,.scale .rng .hi{flex:1;min-width:0}
.scale .rng .hi{text-align:right}
.tgroup{margin-bottom:10px}
.tgroup .lbl{font-size:12px;color:var(--muted);margin-bottom:4px}
/* Big view: tags as a tidy table, category on the left and its tags on the right, every row lined up */
#panel.wide .p-body>.sec.tags{column-span:all}
#panel.wide .sec.tags .tgroup{display:grid;grid-template-columns:150px minmax(0,1fr);column-gap:20px;align-items:start;margin:0;padding:10px 0;border-top:1px solid var(--line)}
#panel.wide .sec.tags .tgroup:first-of-type{border-top:0;padding-top:2px}
#panel.wide .sec.tags .tgroup>.lbl{grid-column:1;grid-row:1/span 20;margin:0;padding-top:5px;font-size:13px;font-weight:700;color:var(--ink)}
#panel.wide .sec.tags .tgroup>.chips,#panel.wide .sec.tags .tgroup>.tline{grid-column:2}
#panel.wide .sec.tags .tline{display:grid;grid-template-columns:130px minmax(0,1fr);gap:8px;align-items:start;margin:0 0 6px}
#panel.wide .sec.tags .tline .chips{display:flex;flex-wrap:wrap;min-width:0}
#panel.wide .sec.tags .tline:last-child{margin-bottom:0}
#panel.wide .sec.tags .tline .gname{padding-top:5px;min-width:0;font-size:12px}
#panel.wide .sec.tags .chips{gap:6px}
.mixbar{display:flex;height:8px;border-radius:2px;overflow:hidden;background:var(--chip);margin-top:8px;max-width:360px}
.mixbar.big{height:14px;max-width:none;margin-top:0}
.mixbar i{display:block;height:100%;transition:opacity .12s}
/* Hovering a bar segment highlights its label (and the other way round); the rest of the bar dims */
.mixbar.hov i:not(.hl){opacity:.3}
.mixbar i[data-ftag]{cursor:pointer}
.mixbar i.on{box-shadow:inset 0 0 0 2px var(--surface);opacity:1!important}
.mixlbl span.hl{color:var(--ink);font-weight:700;background:color-mix(in srgb,var(--c) 18%,transparent);border-radius:4px;padding:0 3px;margin:0 -3px}
.mchip.hl{box-shadow:0 0 0 2px var(--c);background:color-mix(in srgb,var(--c) 30%,var(--surface))}
.legend{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:4px 14px;margin-top:10px;font-size:13px}
.legend span{display:flex;align-items:center;gap:6px;min-width:0}
.legend b{font-family:var(--f-mono);font-weight:600;font-size:12px;margin-left:auto;font-variant-numeric:tabular-nums}
.sw{width:10px;height:10px;border-radius:2px;flex:none;display:inline-block}
dl.prof{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 14px;margin:0;font-size:14px}
dl.prof dt{color:var(--muted);font-size:13px}
dl.prof dd{margin:0;font-weight:700}
.mixin{display:grid;grid-template-columns:minmax(0,1fr) 76px;gap:6px 10px;align-items:center;font-size:13px}
.mixin input{width:100%}
.total{font-family:var(--f-mono);font-size:12px;text-transform:none;letter-spacing:0;color:var(--accent)}
.total.off{color:var(--danger)}
.mlegend{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mchip{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:2px 10px;font-size:13px;justify-self:start;
  background:color-mix(in srgb,var(--c) 16%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 50%,transparent);color:var(--ink)}
.mchip .sw{background:var(--c)}
.mchip b{font-family:var(--f-mono);font-weight:600;font-size:12px}
.mchip.ftag{cursor:pointer;transition:box-shadow .12s}
.mchip.ftag:hover{box-shadow:0 0 0 1px var(--c)}
.mchip.ftag.on{box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--c)}
.mchip.ftag.on::before{content:"✓";font-size:11px;margin-right:-2px}
.mixlbl{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:11px;color:var(--muted);margin-top:5px}
.mixlbl span{display:inline-flex;align-items:center;gap:5px}
.mixlbl .sw{background:var(--c);width:8px;height:8px}
.scale.sub .nm{padding-left:14px;font-weight:400;color:var(--muted)}
.gbtn{all:unset;cursor:pointer;display:inline-flex;gap:6px;align-items:center;font-weight:700}
.gbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.caret{font-size:11px;color:var(--accent)}
.avg{font-family:var(--f-mono);font-size:12px;color:var(--ink)}
.linkbtn{border:0;background:none;padding:0;color:var(--accent);font-size:12px;text-decoration:underline}
.fieldlist{display:flex;flex-direction:column;gap:8px;font-size:13px}
.mybox{background:var(--accent-soft);border-radius:var(--r);padding:12px 14px;margin:4px 0 6px;display:flex;flex-direction:column;gap:10px}
.mybox .r{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;font-size:13px}
.mybox label{display:inline-flex;gap:6px;align-items:center}
.mybox input[type=text]{width:9em}
.fy{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:16px}
.fy h1{font-family:var(--f-display);font-size:28px;margin:0;letter-spacing:-.01em}
.fy .lede{margin:4px 0 0;color:var(--muted);max-width:65ch}
.seg2{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.seg2 button{border:0;background:none;padding:6px 14px;font-size:13px;font-weight:700;color:var(--muted)}
.seg2 button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.rec{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:14px;align-items:start;padding:14px 16px;border-top:1px solid var(--line);cursor:pointer}
.rec:hover{background:color-mix(in srgb,var(--accent-soft) 45%,transparent)}
.rec:first-child{border-top:0}
.rec .t{font-family:var(--f-display);font-weight:700;font-size:17px;line-height:1.25}
.reclist{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);overflow:hidden}
.pick{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:8px 12px;border-top:1px solid var(--line)}
.pick:first-child{border-top:0}
.notice{border:1px dashed var(--line);border-radius:var(--r);padding:10px 14px;font-size:13px;color:var(--muted)}
.fieldlist b{display:block;margin-bottom:4px}
.notes{white-space:pre-wrap;font-size:14px}
.sim{display:flex;flex-direction:column;gap:8px;max-height:400px;overflow-y:auto;overscroll-behavior:contain;padding-right:4px;scrollbar-gutter:stable}
.sim+.simmore{font-size:12px;color:var(--muted);margin-top:6px}
.simrow{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:52px minmax(0,1fr);gap:10px;padding:8px;border-radius:6px;border:1px solid var(--line)}
.simrow:hover{border-color:var(--accent)}
.simrow:focus-visible{outline:2px solid var(--accent)}
.score{font-family:var(--f-mono);font-weight:600;font-size:15px;color:var(--accent);font-variant-numeric:tabular-nums}
.simrow .st{font-weight:700}
.why{font-size:12px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.hint{font-size:12px;color:var(--muted)}

/* Editor */
.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--muted);min-width:0}
.form label.full{grid-column:1/-1}
.form .field{color:var(--ink);font-size:14px;width:100%}
textarea.field{min-height:90px;resize:vertical}
.seg{display:flex;gap:3px;align-items:flex-end}
.seg button{border:1px solid var(--line);background:var(--chip);width:26px;border-radius:3px;padding:0}
.seg button:nth-child(1){height:14px}.seg button:nth-child(2){height:18px}.seg button:nth-child(3){height:22px}.seg button:nth-child(4){height:26px}.seg button:nth-child(5){height:30px}
.seg button.on{background:var(--accent);border-color:var(--accent)}
.seg .clr{width:auto;height:auto;padding:2px 8px;background:transparent;border:0;color:var(--muted);font-size:12px}
.rate{display:flex;gap:2px}
.rate button{border:0;background:none;font-size:20px;color:var(--line);padding:0 2px}
.rate button.on{color:var(--amber)}

/* Taxonomy */
.tax{max-width:980px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:14px}
.tax-intro{max-width:980px;margin:0 auto 16px}
.tax-intro h1{font-family:var(--f-display);font-size:28px;margin:0 0 4px;letter-spacing:-.01em}
.tax-intro p{margin:0;color:var(--muted);max-width:65ch}
.fcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:10px;min-width:0}
.fcard h2{font-family:var(--f-display);font-size:18px;margin:0;display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.kind{font-family:var(--f-mono);font-size:11px;color:var(--muted);font-weight:400}
.fcard p{margin:0;font-size:13px;color:var(--muted)}
.ends{display:flex;justify-content:space-between;font-size:13px;gap:8px}
.addtag{display:flex;gap:6px}
.addtag input{flex:1;min-width:0}

#toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom,0px));background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:var(--r);font-size:14px;z-index:30;max-width:calc(100% - 32px)}
@media (prefers-reduced-motion:no-preference){.row,.simrow,.chip{transition:background-color .12s,border-color .12s}}