/* The only color palette. Layout and components consume semantic tokens.
 * Explicit choice wins over the OS; absent JS follows the OS using CSS alone. */
:root {
  --bg: #f6f7f9;
  --paper: #ffffff;
  --raised: #eef1f5;
  --ink: #17212b;
  --secondary: #465566;
  --muted: #5c6978;
  --line: #dfe4eb;
  --line-strong: #bcc6d2;
  --control-border: #7b8898;
  --accent: #165fc5;
  --soft: #eaf2ff;
  --accent-solid: #1763ce;
  --on-accent: #ffffff;
  --warning-bg: #fff5df;
  --warning-ink: #805516;
  --warning-line: #b39969;
  --success-bg: #e9f5ed;
  --success-ink: #21653c;
  --danger-bg: #fff0f2;
  --danger-ink: #a52638;
  --danger-line: #b77781;
  --glass: rgba(255,255,255,.96);
  --shadow-color: rgba(27,36,48,.10);
  color-scheme: light;
  --shadow: 0 10px 35px var(--shadow-color);
  --overlay: rgba(12,22,26,.64);
  --media-overlay: rgba(9,13,18,.92);
  --on-overlay: #ffffff;
  --toast-bg: #17212b;
  --toast-ink: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #111418;
  --paper: #191e25;
  --raised: #232b35;
  --ink: #edf1f6;
  --secondary: #cad3df;
  --muted: #a7b2c0;
  --line: #323c48;
  --line-strong: #546476;
  --control-border: #728299;
  --accent: #7eb2ff;
  --soft: #1d2d44;
  --accent-solid: #286acf;
  --on-accent: #ffffff;
  --warning-bg: #332a1d;
  --warning-ink: #f1cc83;
  --warning-line: #90764d;
  --success-bg: #172f24;
  --success-ink: #96dbb1;
  --danger-bg: #3a2028;
  --danger-ink: #ffabb5;
  --danger-line: #b17480;
  --glass: rgba(25,30,37,.96);
  --shadow-color: rgba(0,0,0,.30);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #111418;
    --paper: #191e25;
    --raised: #232b35;
    --ink: #edf1f6;
    --secondary: #cad3df;
    --muted: #a7b2c0;
    --line: #323c48;
    --line-strong: #546476;
    --control-border: #728299;
    --accent: #7eb2ff;
    --soft: #1d2d44;
    --accent-solid: #286acf;
    --on-accent: #ffffff;
    --warning-bg: #332a1d;
    --warning-ink: #f1cc83;
    --warning-line: #90764d;
    --success-bg: #172f24;
    --success-ink: #96dbb1;
    --danger-bg: #3a2028;
    --danger-ink: #ffabb5;
    --danger-line: #b17480;
    --glass: rgba(25,30,37,.96);
    --shadow-color: rgba(0,0,0,.30);
    color-scheme: dark;
  }
}

/* Shared desktop, mobile, article and editor controls. No inline styles / CSP exceptions. */
.appearance-menu { position:relative; flex:0 0 auto; margin:0; letter-spacing:0; }
.appearance-menu > summary { display:flex; align-items:center; justify-content:center; gap:6px; min-width:44px; min-height:44px; padding:8px; list-style:none; border-radius:7px; color:var(--muted); font-size:12px; cursor:pointer; }
.appearance-menu > summary::-webkit-details-marker { display:none; }
.appearance-menu > summary:hover, .appearance-menu[open] > summary { background:var(--raised); color:var(--ink); }
.appearance-menu .appearance-symbol { width:18px; height:18px; flex-shrink:0; }
.appearance-panel { position:absolute; right:0; top:calc(100% + 6px); z-index:60; width:210px; max-width:calc(100vw - 32px); padding:8px; border:1px solid var(--line-strong); border-radius:10px; background:var(--paper); color:var(--ink); box-shadow:var(--shadow); }
.appearance-options { display:flex; flex-direction:column; gap:3px; }
.appearance-options > button { display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:8px 12px; border:1px solid transparent; border-radius:6px; font-size:13px; line-height:1.4; text-align:left; color:var(--secondary); }
.appearance-options > button:hover { background:var(--raised); }
.appearance-options > button[aria-checked="true"] { background:var(--soft); color:var(--accent); border-color:var(--accent); font-weight:650; }
.appearance-options > button[aria-checked="true"]::after { content:"✓"; margin-left:auto; }
.appearance-options > button:focus-visible { outline:3px solid var(--accent); outline-offset:1px; }
.appearance-options svg { width:18px; height:18px; flex-shrink:0; }
.reader-account-menu .appearance-options > button { min-height:36px; font-size:11px; padding:7px; }
@media (max-width:820px) {
  .appearance-menu > summary .appearance-label { display:none; }
  .public-body .mobile-header { gap:8px; }
  .mobile-header .mobile-date { display:none; }
}

/* Language-switch separators are text, not low-contrast decorative borders. */
.topline .top-language i, .mobile-header .top-language i { color:var(--muted); }