/* ============================================================================
   VALENCE · chapter-page additions (Structure 2 rework)
   Contents rail, animation cards, the interactive models carried over from the
   bonding bench, and the practice-set components. Everything reads the site
   tokens in styles.css, so light and dark themes follow automatically.
   ========================================================================== */

/* ---------- page layout: contents rail beside the notes -------------------- */
.pgwrap{display:block}
@media (min-width:1100px){
  .pgwrap{display:grid;grid-template-columns:236px minmax(0,1fr);gap:22px;align-items:start}
}
.pgtoc{background:var(--panel);border:1px solid var(--rule);border-radius:2px;box-shadow:var(--shadow);
  margin-bottom:18px;font-size:13px}
@media (min-width:1100px){
  .pgtoc{position:sticky;top:calc(var(--topbar,153px) + 10px);max-height:calc(100vh - var(--topbar,153px) - 20px);overflow:auto;margin-bottom:0}
}
.pgtoc>summary{cursor:pointer;list-style:none;padding:11px 14px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-2)}
.pgtoc>summary::-webkit-details-marker{display:none}
.pgtoc>summary::after{content:" ▾";color:var(--ink-3)}
.pgtoc[open]>summary::after{content:" ▴"}
@media (min-width:1100px){ .pgtoc>summary{cursor:default} .pgtoc>summary::after,.pgtoc[open]>summary::after{content:""} }
.pgtoc .tocin{padding:0 8px 12px}
.pgtoc h4{margin:12px 6px 5px;font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600}
.pgtoc a{display:block;padding:4px 7px;border-radius:2px;color:var(--ink-2);text-decoration:none;line-height:1.35}
.pgtoc a:hover{background:var(--sunk);color:var(--ink)}
.pgtoc a.on{background:var(--structure);color:#fff}
.pgtoc a .n{display:inline-block;min-width:1.7em;font-family:"IBM Plex Mono",monospace;font-size:11px;opacity:.8}
.pgtoc a.hl:not(.on){color:var(--bg-hl-fg)}
.pgtoc .tstat{margin:12px 7px 0;padding-top:9px;border-top:1px solid var(--rule);color:var(--ink-3);font-size:11.5px;line-height:1.45}

/* ---------- section headings ----------------------------------------------- */
.doc h2.sec{scroll-margin-top:calc(var(--topbar,153px) + 12px);display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.doc h2.sec .secno{font-family:"IBM Plex Mono",monospace;font-size:13px;font-weight:600;color:var(--ink-3);min-width:1.6em}
.doc h2.sec .oc{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;color:var(--bg-sl-fg);
  background:var(--bg-sl-bg);padding:1px 7px;border-radius:2px;letter-spacing:.03em}
.doc h2.sec.hl .oc{color:var(--bg-hl-fg);background:var(--bg-hl-bg)}
.doc h2.sec .badge{margin-left:0}
.doc .partlabel{margin:40px 0 0;font-family:"IBM Plex Mono",monospace;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:var(--structure)}
.doc .partlabel:first-child{margin-top:0}
.doc .partlabel+h2.sec{margin-top:6px}
.doc .intro{background:var(--panel-2);border:1px solid var(--rule);padding:13px 16px;margin:0 0 8px;font-size:14.5px}
.doc .intro p:last-child{margin-bottom:0}
.doc .intro .gq{font-style:italic;color:var(--ink-2)}
.doc .num{font-variant-numeric:tabular-nums}
.doc table caption{caption-side:top;text-align:left;font-size:12.5px;color:var(--ink-3);padding:0 0 7px}
.doc table caption b{color:var(--ink-2)}
.doc figure img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--rule);border-radius:2px}
.doc ul.checklist{list-style:none;padding-left:0}
.doc ul.checklist li{padding-left:26px;position:relative}
.doc ul.checklist li::before{content:"☐";position:absolute;left:2px;top:-1px;color:var(--ink-3);font-size:15px}
.doc table.ko td:first-child{white-space:nowrap}

/* ---------- animation cards (Flash via Ruffle) ----------------------------- */
.doc .flash{margin:18px 0;border:1px solid var(--rule-2);border-radius:2px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow)}
.doc .flash .fh{display:flex;align-items:center;gap:9px;padding:8px 12px;border-bottom:1px solid var(--rule);background:var(--panel-2)}
.doc .flash .fh .pill{font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;background:var(--structure-tint);color:var(--structure)}
.doc .flash .fh .ttl{font-family:Archivo,sans-serif;font-size:14px;font-weight:700;color:var(--ink)}
.doc .flash .stage{position:relative;width:100%;aspect-ratio:738/450;background:#fff}
.doc .flash .stage ruffle-player{position:absolute;inset:0;width:100%;height:100%}
.doc .flash .ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:16px;text-align:center;background:linear-gradient(180deg,#f7f9fb,#eef2f6)}
.doc .flash .ph .pb{appearance:none;border:0;background:var(--structure);color:#fff;font:inherit;font-weight:600;font-size:14px;
  padding:9px 18px;border-radius:2px;cursor:pointer}
.doc .flash .ph .pb[disabled]{opacity:.55;cursor:wait}
.doc .flash .ph small{color:#48525F;font-size:12.5px;max-width:46ch;line-height:1.45}
.doc .flash .fc{padding:9px 12px;font-size:13px;color:var(--ink-2);border-top:1px solid var(--rule)}
@media print{ .doc .flash .stage{display:none} }

/* ---------- interactive models (namespaced under .sim) --------------------- */
.doc .sim{
  --accent:var(--structure); --accent-soft:var(--structure-tint); --paper:var(--panel); --quiz-bg:var(--panel-2);
  --line:var(--rule); --line2:var(--rule-2); --dim:var(--ink-3); --ink2:var(--ink-2);
  --work:var(--good); --work-bg:var(--good-tint); --trap:var(--bad); --trap-bg:var(--bad-tint);
  --alert:var(--warn); --alert-bg:var(--warn-tint); --def:var(--structure); --def-bg:var(--structure-tint);
  --note:var(--s3); --sh:var(--shadow);
  margin:20px 0;border:1px solid var(--rule-2);border-top:3px solid var(--structure);border-radius:2px;
  background:var(--panel);box-shadow:var(--shadow);overflow:hidden;font-size:14px}
.doc .sim>.sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 9px;padding:9px 13px;border-bottom:1px solid var(--rule);background:var(--structure-tint)}
.doc .sim>.sh .ttl{font-family:Archivo,sans-serif;font-size:14px;font-weight:700;color:var(--structure)}
.doc .sim>.sh .sub{font-size:11.5px;color:var(--ink-3);margin-left:auto}
.doc .sim .sb{padding:13px}
.doc .sim p{max-width:none}
.doc .sim .ctl{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px 14px;align-items:center;margin-bottom:11px}
.doc .sim .ctl label{font-size:12.5px;color:var(--ink-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.doc .sim select,.doc .sim input[type=text],.doc .sim input[type=number]{font:inherit;font-size:13.5px;padding:5px 8px;border-radius:2px;
  border:1px solid var(--rule-2);background:var(--panel);color:var(--ink);min-height:0;max-width:100%}
.doc .sim input[type=range]{accent-color:var(--structure);width:190px;max-width:100%}
.doc .sim .chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.doc .sim .chip{appearance:none;border:1px solid var(--rule-2);background:var(--panel);color:var(--ink-2);
  font:inherit;font-size:12.5px;padding:4px 10px;border-radius:999px;cursor:pointer;min-height:0}
.doc .sim .chip:hover{border-color:var(--structure);color:var(--ink)}
.doc .sim .chip.on{background:var(--structure);border-color:var(--structure);color:#fff}
.doc .sim .out{background:var(--panel-2);border-radius:2px;padding:11px 13px;font-size:14px}
.doc .sim .out .big{font-size:19px;font-weight:700;letter-spacing:-.01em}
.doc .sim .grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px}
@media(max-width:660px){.doc .sim .grid2{grid-template-columns:1fr}}
.doc .sim .kv{display:flex;justify-content:space-between;gap:12px;padding:3px 0;font-size:13.5px;border-bottom:1px dashed var(--rule)}
.doc .sim .kv:last-child{border-bottom:0}
.doc .sim .kv b{font-weight:600;font-variant-numeric:tabular-nums}
.doc .sim .bar{height:9px;border-radius:5px;background:var(--rule);overflow:hidden;margin-top:5px}
.doc .sim .bar i{display:block;height:100%;background:var(--structure)}
.doc .sim .f{font-family:inherit;white-space:nowrap}
.doc .sim .pill{display:inline-block;font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;background:var(--panel-2);color:var(--ink-3);border:1px solid var(--rule-2)}
.doc .sim .qopt{display:block;width:100%;text-align:left;font:inherit;font-size:13.5px;padding:7px 11px;margin:4px 0;
  border:1px solid var(--rule-2);border-radius:2px;background:var(--panel);color:var(--ink);cursor:pointer}
.doc .sim .qopt.right{background:var(--good-tint);border-color:var(--good)}
.doc .sim .qopt.wrong{background:var(--bad-tint);border-color:var(--bad)}
.doc .sim .qwhy{font-size:13px;color:var(--ink-2);background:var(--panel-2);border-radius:2px;padding:8px 11px;margin-top:6px}
.doc .sim table{font-size:13px}
.doc .sim svg{max-width:100%}
.doc .sim .fig-t{fill:var(--ink)} .doc .sim .fig-d{fill:var(--ink-3)} .doc .sim .fig-s{stroke:var(--ink-2)}
@media print{ .doc .sim{break-inside:avoid} }

/* ---------- practice sets and worked tables ------------------------------- */
.doc .x-small,.doc .x-ev{font-size:.86em;color:var(--ink-3)}
.doc .x-ev{font-style:italic;margin-bottom:6px}
.doc .x-practice{margin-top:22px}
.doc .x-q{border:1px solid var(--rule);border-radius:2px;padding:9px 12px;margin:10px 0;background:var(--panel)}
.doc .x-qh{display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px 12px;font-size:.88em;margin-bottom:5px}
.doc .x-ref{color:var(--ink-3);font-family:"IBM Plex Mono",monospace;font-size:11px}
.doc .x-opts{display:flex;flex-wrap:wrap;gap:2px 0}
.doc .x-opts span{display:inline-block;flex:0 0 50%;padding-right:10px;margin:2px 0}
.doc .x-opts.x-opts1 span{flex-basis:100%}
@media(max-width:560px){ .doc .x-opts span{flex-basis:100%} }
.doc .x-qimg{display:block;margin:8px auto;max-width:100%;height:auto;background:#fff;border-radius:2px}
.doc .x-sol{margin-top:12px;border-top:1px dashed var(--rule-2);padding-top:8px}
.doc .x-sol>summary{cursor:pointer;font-weight:600;padding:4px 0;font-size:.9em;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.doc .x-s{border-top:1px dashed var(--rule);padding-top:6px;margin-top:8px}
.doc .x-s h4{margin:0 0 4px}
.doc .x-s .mk,.doc .x-mk{font-weight:700;color:var(--bg-hl-fg);font-size:.95em;margin-left:6px;letter-spacing:0;text-transform:none}
.doc .x-calc{width:100%}
.doc .x-calc td{vertical-align:top;padding:3px 10px 3px 0;border:none;font-size:14px}
.doc .x-calc td:first-child{font-weight:600;white-space:nowrap;color:var(--bx-we-ac)}
@media(max-width:560px){ .doc .x-calc td:first-child{white-space:normal} }
.doc .box .x-calc td:first-child{color:inherit}
.doc .we .x-calc td:first-child{color:var(--bx-we-ac)}
@media print{ details.x-sol{display:block} }
.doc .sim .tw{overflow-x:auto}
.doc .sim .tw table{margin:0}
.doc h4.evh{margin-top:26px;padding-top:12px;border-top:1px dashed var(--rule-2);color:var(--bx-ms-ac)}

.doc [id]{scroll-margin-top:calc(var(--topbar,153px) + 12px)}
/* R2 rework additions */
.doc figure .ftitle{font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);margin:0 0 6px}
.doc .hlpill{display:inline-block;font-family:"IBM Plex Mono",monospace;font-size:9.5px;font-weight:600;letter-spacing:.06em;padding:1px 6px;border-radius:9px;background:var(--bg-hl,#6a2b9d);color:var(--bg-hl-fg,#fff);margin-right:4px;vertical-align:1px}
.doc .baleq{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:15px;margin:8px 0 12px}
.doc .baleq .bc{white-space:nowrap}
.doc .baleq input{width:3.1em;padding:3px 4px;font:inherit;font-weight:600;text-align:center;border:1px solid var(--rule-2);border-radius:2px;background:var(--panel);color:var(--ink)}
.doc .baleq .bo{font-weight:600;color:var(--ink-2)}
.doc figure svg[data-w]{max-width:100%;height:auto;margin:0 auto}