/* Shared theme + controls. Loaded after each page's own <style>, so it wins on ties. */
:root {
  --paper:#f5f5f5; --paper2:#ececec; --ink:#2d3142; --muted:#4f5d75; --soft:#7a8399;
  --rule:rgba(45,49,66,0.12); --accent:#eb6c36; --tint:rgba(235,108,54,0.08); --link:#2e5aa8; --card:#ffffff;
  --color-paper:#f5f5f5; --color-paper-2:#ececec; --color-ink:#2d3142; --color-muted:#4f5d75; --color-soft:#7a8399;
  --color-rule:rgba(45,49,66,0.12); --color-accent:#eb6c36; --color-accent-tint:rgba(235,108,54,0.08); --color-link:#2e5aa8;
  --sans:'Geist','Be Vietnam Pro',system-ui,sans-serif; --serif:'Playfair Display','Instrument Serif','Noto Serif',serif;
  --mono:'Geist Mono',ui-monospace,Menlo,monospace;
  --font-sans:var(--sans); --font-serif:var(--serif); --font-mono:var(--mono);
  --dscale:1;
  color-scheme: light;
}
:root[lang="zh"] {
  --sans:'Geist','Noto Sans SC','PingFang SC','Microsoft YaHei',sans-serif;
  --serif:'Playfair Display','Noto Serif SC','Songti SC',serif;
  --font-sans:var(--sans); --font-serif:var(--serif);
}
:root[data-theme="dark"] {
  --paper:#2d3142; --paper2:#393e53; --ink:#f5f5f5; --muted:#bfc0c0; --soft:#8e98ac;
  --rule:rgba(245,245,245,0.12); --accent:#f08a59; --tint:rgba(240,138,89,0.10); --link:#6a95d8; --card:#353a4e;
  --color-paper:#2d3142; --color-paper-2:#393e53; --color-ink:#f5f5f5; --color-muted:#bfc0c0; --color-soft:#8e98ac;
  --color-rule:rgba(245,245,245,0.12); --color-accent:#f08a59; --color-accent-tint:rgba(240,138,89,0.10); --color-link:#6a95d8;
  color-scheme: dark;
}
html { transition: background-color .2s; }
body { background: var(--paper) !important; color: var(--ink) !important; }
[hidden] { display: none !important; }

/* page chrome that pages hard-coded as white */
.card, .tile, .guide pre, .guide table { background: var(--card) !important; border-color: var(--rule) !important; }
.tile.accent { background: var(--tint) !important; border-color: var(--accent) !important; }
.card-header { border-bottom-color: var(--rule) !important; }
.card h3, .tile .v, .card .t, .guide p, .guide li, .guide td, .card li strong, .card td strong, .guide strong { color: var(--ink); }
.card ul, .card li, .card .d, .tile p, .tile li, .guide th, .subtitle, .lead, .footer, .foot { color: var(--muted); }
.guide code, .card code, .tile code { background: var(--paper2) !important; color: var(--ink); }
.guide a, .card a, a { color: var(--link); }
th.rec, td.rec { background: var(--tint) !important; }
.nav { background: color-mix(in srgb, var(--paper) 92%, transparent) !important; border-bottom-color: var(--rule) !important; }
.nav a.item, .brand { color: var(--ink) !important; }
.frame { border-color: var(--rule) !important; background: var(--paper) !important; }
.frame-bar { border-bottom-color: var(--rule) !important; color: var(--muted) !important; }
.frame iframe { height: 1200px; transition: height .2s; }
svg { width: 100%; display: block; }
.diagram-container { width: 100%; overflow-x: auto; }

/* narrow screens: tables scroll inside their own box, long code tokens may break */
.guide table { display: block; overflow-x: auto; max-width: 100%; }
.guide table thead, .guide table tbody { display: table; width: 100%; min-width: 640px; }
.guide th, .guide td { min-width: 6em; }
.card table { display: block; overflow-x: auto; max-width: 100%; }
.card table thead, .card table tbody { display: table; width: 100%; min-width: 760px; }
.tile code, .card code, .lead code, p code, li code { overflow-wrap: anywhere; }
.tile .v { overflow-wrap: anywhere; }
.guide a, .card a { overflow-wrap: anywhere; word-break: break-all; }

/* ---------- control bar ---------- */
.ctl-bar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 94%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); font-family: var(--sans); }
.ctl-inner { max-width: 1280px; margin: 0 auto; padding: 0.4rem 1.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ctl-left { display: flex; gap: 1rem; }
.ctl-right { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; }
.ctl-link { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted) !important; text-decoration: none; }
.ctl-link:hover { color: var(--accent) !important; }
.ctl-btn, .ctl-select { font: inherit; font-size: 0.8rem; color: var(--ink); background: var(--card); border: 1px solid var(--rule); border-radius: 4px; padding: 0.25rem 0.55rem; cursor: pointer; line-height: 1.2; }
.ctl-btn:hover, .ctl-select:hover { border-color: var(--accent); }
.ctl-btn[aria-pressed="true"] { background: var(--tint); border-color: var(--accent); }
.ctl-val { font-family: var(--mono); font-size: 0.7rem; color: var(--soft); min-width: 3em; text-align: center; }
.ctl-embedded { display: none; }
html.embedded body { min-height: 0 !important; padding: 1.5rem 2rem 1rem !important; }
html.embedded { overflow: hidden; }
body > .nav { top: 2.4rem; }

/* ---------- SVG dark theme: remap every hard-coded colour the diagrams use ---------- */
:root[data-theme="dark"] svg [fill="#f5f5f5"] { fill: #2d3142; }
:root[data-theme="dark"] svg [fill="#ffffff"] { fill: #393e53; }
:root[data-theme="dark"] svg [fill="#2d3142"] { fill: #f5f5f5; }
:root[data-theme="dark"] svg [fill="#4f5d75"] { fill: #bfc0c0; }
:root[data-theme="dark"] svg [fill="#7a8399"] { fill: #8e98ac; }
:root[data-theme="dark"] svg [fill="#2e5aa8"] { fill: #6a95d8; }
:root[data-theme="dark"] svg [fill="#eb6c36"] { fill: #f08a59; }
:root[data-theme="dark"] svg [fill="rgba(45,49,66,0.02)"] { fill: rgba(245,245,245,0.03); }
:root[data-theme="dark"] svg [fill="rgba(45,49,66,0.03)"] { fill: rgba(245,245,245,0.04); }
:root[data-theme="dark"] svg [fill="rgba(45,49,66,0.05)"] { fill: rgba(245,245,245,0.06); }
:root[data-theme="dark"] svg [fill="rgba(45,49,66,0.40)"] { fill: rgba(245,245,245,0.45); }
:root[data-theme="dark"] svg [fill="rgba(79,93,117,0.10)"] { fill: rgba(191,192,192,0.12); }
:root[data-theme="dark"] svg [fill="rgba(235,108,54,0.08)"] { fill: rgba(240,138,89,0.12); }
:root[data-theme="dark"] svg [stroke="#4f5d75"] { stroke: #bfc0c0; }
:root[data-theme="dark"] svg [stroke="#2d3142"] { stroke: #f5f5f5; }
:root[data-theme="dark"] svg [stroke="#7a8399"] { stroke: #8e98ac; }
:root[data-theme="dark"] svg [stroke="#2e5aa8"] { stroke: #6a95d8; }
:root[data-theme="dark"] svg [stroke="#eb6c36"] { stroke: #f08a59; }
:root[data-theme="dark"] svg [stroke="rgba(45,49,66,0.10)"] { stroke: rgba(245,245,245,0.12); }
:root[data-theme="dark"] svg [stroke="rgba(45,49,66,0.12)"] { stroke: rgba(245,245,245,0.14); }
:root[data-theme="dark"] svg [stroke="rgba(45,49,66,0.20)"] { stroke: rgba(245,245,245,0.22); }
:root[data-theme="dark"] svg [stroke="rgba(45,49,66,0.22)"] { stroke: rgba(245,245,245,0.24); }
:root[data-theme="dark"] svg [stroke="rgba(45,49,66,0.30)"] { stroke: rgba(245,245,245,0.32); }
:root[data-theme="dark"] svg [stroke="rgba(45,49,66,0.40)"] { stroke: rgba(245,245,245,0.42); }
:root[data-theme="dark"] svg [stroke="rgba(79,93,117,0.50)"] { stroke: rgba(191,192,192,0.55); }
:root[data-theme="dark"] svg [stroke="rgba(122,131,153,0.40)"] { stroke: rgba(142,152,172,0.45); }
:root[data-theme="dark"] svg [stroke="rgba(235,108,54,0.50)"] { stroke: rgba(240,138,89,0.55); }

/* font families inside SVG follow the page language (CJK fallback) */
svg text[font-family^="'Geist',"] { font-family: var(--sans) !important; }
svg text[font-family^="'Playfair"] { font-family: var(--serif) !important; }

@media (max-width: 720px) {
  .ctl-inner { padding: 0.4rem 0.75rem; }
  .ctl-left { display: none; }
  body { padding-left: 1rem !important; padding-right: 1rem !important; }
}
@media print { .ctl-bar { display: none; } }