/* Approved A/C palette: warm paper and warm graphite. */
:root {
  --sans: "Avenir Next", Avenir, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --serif: var(--sans);
}
:root[data-mode="dark"] {
  --bg: #2E2B28;
  --bg2: #393530;
  --ink: #F4EEE5;
  --mut: #C1B6A7;
  --line: #655E54;
  --amber: #D7B88C;
  --amber-hi: #E8CCA5;
  --blue: #C1B6A7;
  --accent: var(--amber);
  --danger: #efafa2;
  --btn-top: #D7B88C;
  --btn-bot: #D7B88C;
  --btn-ink: #2E2B28;
  --btn-hover: #E8CCA5;
  --paper: #E7DED0;
  --paper-ink: #352F29;
  --paper-mut: #6B6155;
  --g-bg: #131314;
  --g-ink: #e3e3e3;
  --g-line: #8e918f;
  --g-hover: #1e1f20;
  color-scheme: dark;
}
/* Base fallback is warm paper; the synchronous bootstrap resolves system mode. */
:root, :root[data-mode="light"] {
  --bg: #F4EFE6;
  --bg2: #FFFCF6;
  --ink: #352F29;
  --mut: #70665B;
  --line: #D6CBBE;
  --amber: #795934;
  --amber-hi: #664928;
  --blue: #70665B;
  --danger: #a4402c;
  --btn-top: #795934;
  --btn-bot: #795934;
  --btn-ink: #FFFCF6;
  --btn-hover: #664928;
  --paper: #EAE1D3;
  --paper-ink: #352F29;
  --paper-mut: #685E53;
  --g-bg: #ffffff;
  --g-ink: #1f1f1f;
  --g-line: #dadce0;
  --g-hover: #edf2f3;
  color-scheme: light;
}

:root {
  /* Semantic aliases let existing readers and inline trip themes keep their contract. */
  --accent: var(--amber);
  --panel: var(--bg2); --text: var(--ink); --meta: var(--mut); --meta-dim: var(--mut);
  --heading-font: var(--serif); --mono: "SF Mono", ui-monospace, Menlo, monospace;
  --rail-line: color-mix(in srgb, var(--meta) 34%, transparent);
  --hairline: color-mix(in srgb, var(--meta) 20%, transparent);
  --ink-dim: var(--meta); --paper-ink-2: var(--paper-mut); --paper-ink-dark: var(--paper-ink); --paper-tag: #735015;
  --shadow-card: 0 6px 18px rgb(0 0 0 / .24); --shadow-lift: 0 8px 24px rgb(0 0 0 / .2); --shadow-rest: none;
  --page-width: 1412px; --page-gutter: 56px; --reading-width: 46rem;
  --radius-control: 8px; --radius-card: 12px;
}
:root:not([data-mode="dark"]) {
  --rail-line: color-mix(in srgb, var(--meta) 42%, transparent);
  --hairline: color-mix(in srgb, var(--meta) 26%, transparent);
  --shadow-card: 0 6px 18px rgb(33 54 64 / .1); --shadow-lift: 0 8px 24px rgb(33 54 64 / .1); --shadow-rest: 0 1px 2px rgb(33 54 64 / .05);
}
:root:lang(zh) { --sans: "Avenir Next", Avenir, "PingFang SC", "Noto Sans SC", sans-serif; }
@media (max-width: 1100px) { :root { --page-gutter: 36px; } }
@media (max-width: 720px) { :root { --page-gutter: 20px; } }

/* Header tools: quiet 18px glyphs with 44px native hit targets. */
.preference-control.preference-control {
  display:inline-flex; position:relative; flex:none; width:44px; height:44px;
  min-width:44px; max-width:none; padding:0; border:0; background:transparent;
  color:var(--mut); border-radius:8px; vertical-align:middle;
}
.preference-control .choice-trigger, .nav-toggle {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  width:44px; min-width:44px; height:44px; padding:0; border:0; border-radius:8px;
  font:inherit; color:var(--mut); background:transparent; cursor:pointer;
}
.preference-control .choice-trigger:hover, .nav-toggle:hover { color:var(--ink); background:color-mix(in srgb,var(--ink) 6%,transparent); }
.preference-control .choice-trigger:active, .nav-toggle:active { background:color-mix(in srgb,var(--ink) 10%,transparent); }
.preference-control .choice-trigger:focus-visible, .nav-toggle:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.preference-control.preference-control .choice-trigger svg { width:18px; height:18px; flex:none; transform:none; transition:none; }
.preference-control.preference-labeled { width:auto; }
.preference-labeled .choice-trigger { width:auto; padding-inline:10px; font-size:13px; }
.header-choice-panel {
  position:fixed; inset:auto; margin:0; padding:8px; max-height:calc(100dvh - 32px); overflow:auto;
  color:var(--ink); background:var(--bg2); border:1px solid var(--line); border-radius:12px;
  box-shadow:var(--shadow-card); font:14px/1.4 var(--sans);
}
.header-choice-panel:not(:popover-open) { display:none; }
.header-choice-panel fieldset { border:0; min-width:0; margin:0; padding:0; }
.header-choice-panel legend { padding:8px 10px 10px; font-size:12px; color:var(--mut); }
.choice-option { display:flex; position:relative; align-items:center; gap:12px; min-height:44px; padding:10px; border-radius:7px; cursor:pointer; }
.choice-option:hover { background:color-mix(in srgb,var(--ink) 6%,transparent); }
.choice-option input { position:absolute; opacity:0; width:1px; height:1px; }
.choice-option:has(input:focus-visible) { outline:2px solid var(--accent); outline-offset:-2px; }
.choice-option > span { display:flex; align-items:center; }
.choice-option .choice-check { margin-left:auto; opacity:0; color:var(--accent); }
.choice-option:has(input:checked) .choice-check { opacity:1; }

.choice-option > span:nth-of-type(2) { min-width:0; flex:1; overflow-wrap:anywhere; }