/* Vorific Bench. Pigments: iron-gall, laid paper, lapis, verdigris, orpiment, cinnabar. */

:root{
  --ground:#E7E3D8;
  --plate:#F4F2EB;
  --plate-2:#EDEAE0;
  --sunk:#E2DED2;
  --rule:#CFC9B6;
  --rule-soft:#DFDACB;
  --ink:#1E2127;
  --ink-2:#4B4F55;
  --muted:#787B71;
  --lapis:#2B4A8B;
  --lapis-wash:#E3E7F2;
  --verdigris:#38796A;
  --orpiment:#94690F;
  --cinnabar:#A32E22;
  --focus:#2B4A8B;
  --shadow-1:0 1px 2px rgba(30,33,39,.05);
  --shadow-2:0 1px 0 rgba(30,33,39,.04), 0 10px 28px -18px rgba(30,33,39,.45);
  --r:3px;
  --head:66px;   /* masthead height, re-measured by app.js */
  --glyph:'Noto Sans Symbols 2','Segoe UI Symbol','Apple Symbols','Noto Sans Symbols','Symbola','DejaVu Sans','Noto Emoji',sans-serif;
  --ui:'Archivo',system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:'Fraunces',Georgia,"Iowan Old Style","Times New Roman",serif;
  --mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111319; --plate:#191C23; --plate-2:#20242C; --sunk:#0D0F14;
    --rule:#333945; --rule-soft:#282D37;
    --ink:#E0DED2; --ink-2:#B2B3AA; --muted:#868A80;
    --lapis:#8CACE8; --lapis-wash:#1E2637;
    --verdigris:#63B39C; --orpiment:#D9A441; --cinnabar:#E0705B; --focus:#8CACE8;
    --shadow-1:0 1px 2px rgba(0,0,0,.3);
    --shadow-2:0 1px 0 rgba(0,0,0,.35), 0 12px 32px -20px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --ground:#111319; --plate:#191C23; --plate-2:#20242C; --sunk:#0D0F14;
  --rule:#333945; --rule-soft:#282D37;
  --ink:#E0DED2; --ink-2:#B2B3AA; --muted:#868A80;
  --lapis:#8CACE8; --lapis-wash:#1E2637;
  --verdigris:#63B39C; --orpiment:#D9A441; --cinnabar:#E0705B; --focus:#8CACE8;
  --shadow-1:0 1px 2px rgba(0,0,0,.3);
  --shadow-2:0 1px 0 rgba(0,0,0,.35), 0 12px 32px -20px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html{color-scheme:light dark}
body{
  margin:0;
  background:var(--ground); color:var(--ink);
  font-family:var(--ui); font-size:15px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.glyph{font-family:var(--glyph)}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px; border-radius:2px}
code{font-family:var(--glyph); font-size:1.05em}

/* ───────────────────────────── masthead ───────────────────────────── */
.masthead{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap;
  padding:12px 20px;
  background:color-mix(in srgb, var(--plate) 88%, transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.brand{display:flex; align-items:baseline; gap:12px; min-width:0}
.brand h1{
  font-family:var(--display); font-optical-sizing:auto; font-weight:800;
  font-size:24px; letter-spacing:-.02em; margin:0;
}
.brand .tag{
  font-size:11.5px; text-transform:uppercase; letter-spacing:.14em; color:var(--muted);
  border-left:1px solid var(--rule); padding-left:12px; white-space:nowrap;
}
.gauges{display:flex; gap:8px}
.gauge{
  display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto;
  gap:0 10px; align-items:center;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--plate-2);
  padding:6px 14px; box-shadow:var(--shadow-1);
}
.gauge .gk{grid-column:1; grid-row:1; font-size:10.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--muted)}
.gauge .gb{grid-column:1; grid-row:2; font-size:12.5px; font-weight:600; color:var(--ink-2)}
.gauge .gv{
  grid-column:2; grid-row:1 / span 2;
  font-family:var(--display); font-weight:800; font-size:28px; line-height:1;
  font-variant-numeric:tabular-nums;
}
.gauge .gv-word{font-size:14px; font-family:var(--ui); font-weight:700; letter-spacing:.06em; text-transform:uppercase}

/* ─────────────────────────────── shell ────────────────────────────── */
/* palette · bench · console — author in the middle, watch it run on the right */
.shell{display:grid; grid-template-columns:300px minmax(0,1fr) 372px; align-items:start}
@media (max-width:1300px){
  .shell{grid-template-columns:300px minmax(0,1fr)}
  .console{grid-column:2; position:static; height:auto; border-left:0; border-top:1px solid var(--rule)}
  .console-scroll{max-height:none}
}
@media (max-width:940px){
  .shell{grid-template-columns:1fr}
  .console{grid-column:1}
}

/* ────────────────────────────── palette ───────────────────────────── */
.palette{
  position:sticky; top:var(--head);
  height:calc(100vh - var(--head)); display:flex; flex-direction:column;
  border-right:1px solid var(--rule); background:var(--plate-2);
}
@media (max-width:940px){ .palette{position:static; height:auto; border-right:0; border-bottom:1px solid var(--rule)} }

.search{position:relative; padding:12px 14px 0}
.search .mag{
  position:absolute; left:25px; top:23px; width:15px; height:15px;
  fill:none; stroke:var(--muted); stroke-width:1.6; stroke-linecap:round; pointer-events:none;
}
.search input{
  width:100%; font:inherit; font-size:14px; color:var(--ink);
  background:var(--plate); border:1px solid var(--rule); border-radius:var(--r);
  padding:8px 30px 8px 33px;
}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{border-color:var(--focus)}
.clear-search{
  position:absolute; right:20px; top:19px; width:20px; height:20px;
  border:0; background:none; color:var(--muted); font-size:18.5px; line-height:1; cursor:pointer;
}
.clear-search:hover{color:var(--cinnabar)}
.hint{margin:7px 14px 0; font-size:12px; color:var(--muted); line-height:1.4}
.hint b{color:var(--ink-2); font-weight:500}

.palette-scroll{flex:1 1 auto; overflow-y:auto; padding:10px 14px 4px; min-height:180px}
@media (max-width:940px){ .palette-scroll{max-height:46vh} }

.group{margin-bottom:14px}
.group > h4{
  position:sticky; top:-10px; z-index:2; margin:0 -14px 7px; padding:5px 14px;
  font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--muted);
  background:var(--plate-2); border-bottom:1px solid var(--rule-soft);
}
.chips{display:grid; grid-template-columns:repeat(auto-fill,minmax(76px,1fr)); gap:4px}
.chip{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:6px 3px 5px; min-height:52px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--plate);
  color:var(--ink); font:inherit; cursor:pointer;
  transition:border-color .12s, background .12s, transform .08s;
}
.chip:hover{border-color:var(--lapis); background:var(--lapis-wash); transform:translateY(-1px)}
.chip:active{transform:none}
.chip .g{font-family:var(--glyph); font-size:18.5px; line-height:1.05}
.chip .l{font-size:10px; color:var(--muted); text-align:center; line-height:1.2; overflow-wrap:anywhere}

/* search results */
.results{display:flex; flex-direction:column; gap:3px; margin-bottom:8px}
.result{
  display:grid; grid-template-columns:38px minmax(0,1fr) auto; align-items:center; gap:9px;
  padding:6px 8px; text-align:left;
  border:1px solid transparent; border-radius:var(--r); background:none;
  color:var(--ink); font:inherit; cursor:pointer;
}
.result:hover,.result.on{background:var(--lapis-wash); border-color:var(--lapis)}
.result .g{font-family:var(--glyph); font-size:17.5px; text-align:center; color:var(--ink)}
.result .n{font-size:13.5px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.result .n em{font-style:normal; color:var(--lapis); font-weight:700}
.result .d{font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.09em; white-space:nowrap}
.no-results{padding:14px 4px; font-size:13px; color:var(--muted)}

/* trays */
.tray{border-top:1px solid var(--rule); padding:11px 14px 13px; flex:0 0 auto}
.tray h3{
  margin:0 0 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  font-weight:700; color:var(--muted); display:flex; align-items:center; gap:6px;
}
.tray .count{font-weight:500; letter-spacing:0; text-transform:none; font-size:11.5px}
.mod-row{display:flex; flex-wrap:wrap; gap:4px}
.mod{
  display:inline-flex; align-items:baseline; gap:5px;
  font-family:var(--glyph); font-size:14px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--plate); color:var(--ink);
  padding:4px 9px; cursor:pointer;
}
.mod:hover{border-color:var(--orpiment); background:var(--plate-2)}
.mod .cap{font-family:var(--ui); font-size:10.5px; color:var(--muted)}

.saved{list-style:none; margin:0; padding:0; max-height:146px; overflow-y:auto}
.saved li{display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--rule-soft)}
.saved li:last-child{border-bottom:0}
.saved .nm{
  flex:1 1 auto; min-width:0; font:inherit; font-size:13px; text-align:left;
  background:none; border:0; padding:1px 0; color:var(--ink); cursor:text;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.saved .nm:hover{color:var(--lapis)}
.saved .nm-edit{
  flex:1 1 auto; min-width:0; font:inherit; font-size:13px; color:var(--ink);
  background:var(--plate); border:1px solid var(--focus); border-radius:var(--r); padding:1px 6px;
}
.saved .sc{font-family:var(--mono); font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.empty-note{font-size:12.5px; color:var(--muted); line-height:1.45}
.mini{font:inherit; font-size:12px; background:none; border:0; color:var(--lapis); cursor:pointer; padding:2px 3px}
.mini:hover{text-decoration:underline}

/* ─────────────────────────────── bench ────────────────────────────── */
.bench{padding:18px 20px 64px; display:flex; flex-direction:column; gap:16px; min-width:0}

.panel{background:var(--plate); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--shadow-2)}
.ph{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:9px 14px; border-bottom:1px solid var(--rule-soft);
}
.ph-foot{border-bottom:0; border-top:1px solid var(--rule-soft)}
.ph .t{font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--muted)}
.ph .r{display:flex; gap:6px; align-items:center; flex-wrap:wrap}

.btn{
  font:inherit; font-size:12.5px; font-weight:500;
  border:1px solid var(--rule); background:var(--plate-2); color:var(--ink);
  padding:5px 11px; border-radius:var(--r); cursor:pointer;
  transition:border-color .12s, background .12s;
}
.btn:hover:not(:disabled){border-color:var(--lapis); background:var(--lapis-wash)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.primary{background:var(--lapis); border-color:var(--lapis); color:#F4F2EB; font-weight:600}
.btn.primary:hover:not(:disabled){filter:brightness(1.09); background:var(--lapis)}
select.btn{padding:5px 6px; max-width:230px}

#expr{
  width:100%; border:0; background:transparent; color:var(--ink);
  font-family:var(--glyph); font-size:26px; line-height:1.75;
  padding:14px; resize:vertical; min-height:74px; display:block;
}
#expr::placeholder{color:var(--muted); opacity:.6}
.gloss{
  margin:0; padding:0 14px 14px;
  font-family:var(--display); font-size:18px; line-height:1.5; text-wrap:pretty; color:var(--ink);
}
.gloss .op{color:var(--muted); font-family:var(--ui); font-size:14.5px}
.gloss em{font-style:normal; color:var(--lapis); font-weight:600}
.gloss .placeholder{color:var(--muted); font-family:var(--ui); font-size:14.5px}
.gloss .err{color:var(--cinnabar); font-family:var(--ui); font-size:14.5px}

/* tabs */
.tabs{display:flex; gap:2px; padding:6px 8px 0; border-bottom:1px solid var(--rule-soft)}
.tab{
  font:inherit; font-size:12.5px; font-weight:600; letter-spacing:.04em;
  border:1px solid transparent; border-bottom:0; background:none; color:var(--muted);
  padding:7px 13px; border-radius:var(--r) var(--r) 0 0; cursor:pointer; margin-bottom:-1px;
  display:inline-flex; align-items:center; gap:6px;
}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"]{
  background:var(--plate-2); border-color:var(--rule-soft); border-bottom:1px solid var(--plate-2);
  color:var(--ink);
}
.pip{width:6px; height:6px; border-radius:50%; background:var(--cinnabar); display:inline-block}
.pip[data-sev="warn"]{background:var(--orpiment)}
.pip[data-sev="note"]{background:var(--lapis)}

.view{min-height:70px}
.scroll-x{overflow-x:auto}
table{width:100%; border-collapse:collapse; font-size:13.5px}

/* reading */
.elements td{padding:7px 14px; border-bottom:1px solid var(--rule-soft); vertical-align:top}
.elements tr:last-child td{border-bottom:0}
.elements td.n{width:34px; color:var(--muted); font-family:var(--mono); font-size:11.5px; text-align:right; padding-right:0}
.elements td.g{font-family:var(--glyph); font-size:18.5px; white-space:nowrap; width:1%; padding-right:20px}
.elements td.m b{font-weight:600}
.elements td.m .k{color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.1em; margin-left:8px}

/* assay */
.assay{display:grid; grid-template-columns:252px minmax(0,1fr)}
@media (max-width:760px){ .assay{grid-template-columns:1fr} }
.verdict{padding:16px 14px; border-right:1px solid var(--rule-soft)}
@media (max-width:760px){ .verdict{border-right:0; border-bottom:1px solid var(--rule-soft)} }
.verdict .score{font-family:var(--display); font-weight:800; font-size:54px; line-height:.95; font-variant-numeric:tabular-nums; letter-spacing:-.03em}
.verdict .band{font-size:12.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; margin-top:4px}
.verdict p{font-size:13px; color:var(--ink-2); margin:10px 0 0; line-height:1.45}
.meter{height:5px; background:var(--sunk); border-radius:3px; margin-top:12px; position:relative; overflow:hidden}
.meter i{position:absolute; top:0; bottom:0; display:block; border-radius:3px; transition:width .18s ease, left .18s ease, right .18s ease}
.ledger{font-size:13px}
.ledger td{padding:4px 14px; font-variant-numeric:tabular-nums}
.ledger tr:first-child td{padding-top:12px}
.ledger td.v{text-align:right; width:1%; font-family:var(--mono); font-weight:500; white-space:nowrap}
.ledger td.c{color:var(--muted); text-align:right; width:1%; font-family:var(--mono); font-size:11.5px; white-space:nowrap}
.pos{color:var(--verdigris)} .neg{color:var(--cinnabar)}
.ledger .total td{border-top:1px solid var(--rule); padding-top:8px; padding-bottom:12px; font-weight:700; color:var(--ink)}
.ledger .empty{padding:16px 14px; color:var(--muted); font-size:13px}

.foot{margin:0; padding:11px 14px 13px; border-top:1px solid var(--rule-soft); color:var(--muted); font-size:12px; line-height:1.5}
.foot b{color:var(--ink-2); font-weight:600}

/* consequences */
.notes{list-style:none; margin:0; padding:0}
.notes li{display:flex; gap:10px; padding:10px 14px; border-bottom:1px solid var(--rule-soft); font-size:13.5px; line-height:1.5}
.notes li:last-child{border-bottom:0}
.notes .sev{
  font-size:10px; text-transform:uppercase; letter-spacing:.1em; font-weight:700;
  padding:2px 6px; border-radius:2px; height:fit-content; white-space:nowrap; border:1px solid;
}
.sev.err{color:var(--cinnabar); border-color:var(--cinnabar)}
.sev.warn{color:var(--orpiment); border-color:var(--orpiment)}
.sev.note{color:var(--lapis); border-color:var(--lapis)}
.notes .sev.note:only-of-type{color:var(--verdigris); border-color:var(--verdigris)}
.notes b{font-weight:600}

/* ──────────────────────────────── world ───────────────────────────── */
.world{padding:6px 14px 10px}
.wrow{display:grid; grid-template-columns:106px minmax(0,1fr); gap:10px; align-items:start; padding:7px 0; border-bottom:1px solid var(--rule-soft)}
.wrow:last-child{border-bottom:0}
.wlab{font-size:10.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); font-weight:700; padding-top:6px; line-height:1.35}
.wlab .g{font-family:var(--glyph); font-size:13px; color:var(--ink-2); margin-right:5px; letter-spacing:0; text-transform:none}
.wlab .dead{color:var(--cinnabar)}
.wbox{display:flex; flex-wrap:wrap; gap:4px; align-items:center}
.vchip{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--rule); background:var(--plate-2); border-radius:var(--r);
  padding:3px 4px 3px 8px; font-size:12.5px; color:var(--ink);
}
.vchip .g{font-family:var(--glyph); font-size:14px}
.vchip .x{background:none; border:0; color:var(--muted); cursor:pointer; font:inherit; font-size:15px; line-height:1; padding:0 3px; border-radius:2px}
.vchip .x:hover{color:var(--cinnabar); background:var(--sunk)}
.vchip.more{color:var(--muted); padding:3px 8px}
.wadd{
  font:inherit; font-size:12px; color:var(--muted);
  border:1px dashed var(--rule); background:none; border-radius:var(--r);
  padding:3px 9px; cursor:pointer;
}
.wadd:hover{border-color:var(--lapis); border-style:solid; color:var(--lapis)}
.wadd-form{display:inline-flex}
.wadd-form input{
  font-family:var(--glyph); font-size:14px; width:96px; color:var(--ink);
  border:1px solid var(--focus); background:var(--plate); padding:3px 7px; border-radius:var(--r) 0 0 var(--r);
}
.wadd-form button{
  font:inherit; font-size:11.5px; border:1px solid var(--focus); border-left:0;
  background:var(--plate-2); color:var(--ink); padding:0 8px; border-radius:0 var(--r) var(--r) 0; cursor:pointer;
}

/* ─────────────────────────────── console ──────────────────────────── */
.console{
  position:sticky; top:var(--head); height:calc(100vh - var(--head));
  display:flex; flex-direction:column;
  border-left:1px solid var(--rule); background:var(--plate-2);
}
.console-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:11px 14px; border-bottom:1px solid var(--rule); flex:0 0 auto;
}
.console-head .t{font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--muted)}
.console-head .r{display:flex; gap:6px}
.console-scroll{flex:1 1 auto; overflow-y:auto; padding:12px 14px 8px}

.cblock{margin-top:16px}
.cblock h4{
  margin:0 0 8px; font-size:10.5px; text-transform:uppercase; letter-spacing:.14em;
  color:var(--muted); font-weight:700; display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.cblock h4 .acts{font-weight:500; letter-spacing:.02em; text-transform:none; font-size:12px; color:var(--ink-2)}

.reg{display:flex; justify-content:space-between; gap:8px; padding:4px 0; border-bottom:1px solid var(--rule-soft); font-size:13px}
.reg:last-child{border-bottom:0}
.reg .k{font-family:var(--glyph); color:var(--ink-2)}
.reg .k.word{font-family:var(--ui); font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.1em}
.reg .v{text-align:right; font-variant-numeric:tabular-nums}
.reg .v .g{font-family:var(--glyph); color:var(--muted); margin-left:6px}

.outcome{padding:11px 12px; border:1px solid var(--rule); border-left-width:3px; border-radius:var(--r); background:var(--plate)}
.outcome .st{font-size:11px; text-transform:uppercase; letter-spacing:.14em; font-weight:700}
.outcome .ov{font-family:var(--display); font-size:18.5px; margin-top:3px; line-height:1.3}
.outcome .ov .g{font-family:var(--glyph); font-size:14px; color:var(--muted); margin-left:6px}
.outcome p{margin:7px 0 0; font-size:12.5px; color:var(--ink-2); line-height:1.45}

/* step by step */
.trace{list-style:none; margin:0; padding:0}
.step{
  display:grid; grid-template-columns:23px minmax(0,1fr); gap:9px;
  padding:7px 0 7px 0; border-bottom:1px solid var(--rule-soft);
}
.step:last-child{border-bottom:0}
.step .sn{font-family:var(--mono); font-size:11px; color:var(--muted); text-align:right; padding-top:2px; font-variant-numeric:tabular-nums}
.step .sg{
  font-family:var(--glyph); font-size:14px; color:var(--ink-2); line-height:1.35;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.step .sd{font-size:13px; line-height:1.45; margin-top:2px; overflow-wrap:anywhere}
.step .sd.lead{margin-top:0; color:var(--ink-2); font-weight:600}
.step.fail{border-left:2px solid var(--cinnabar); padding-left:7px; margin-left:-9px}
.step.fail .sd{color:var(--cinnabar)}
.step-cycle{
  margin:9px 0 3px; padding:3px 0; border-top:1px solid var(--rule);
  font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:700; color:var(--lapis);
}
.trace .empty{color:var(--muted); font-size:13px; padding:6px 0; line-height:1.45}

/* toast */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%);
  background:var(--ink); color:var(--ground); font-size:13.5px; font-weight:500;
  padding:9px 16px; border-radius:var(--r); box-shadow:var(--shadow-2); z-index:60;
  animation:rise .18s ease;
}
@keyframes rise{from{opacity:0; transform:translate(-50%,7px)} to{opacity:1; transform:translate(-50%,0)}}

[hidden]{display:none!important}
@media (prefers-reduced-motion: reduce){ *{transition:none!important; animation:none!important} }