/* 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: #ffffff;
  --paper: #ffffff;
  --raised: #f1f0ee;
  --sidebar-bg: #f7f7f5;
  --sidebar-hover: #efefed;
  --ink: #37352f;
  --secondary: #57554f;
  --muted: #6b6963;
  --line: #e9e9e6;
  --line-strong: #d3d1cb;
  --control-border: #a5a29b;
  --accent: #37352f;
  --soft: #f1f0ee;
  --accent-solid: #25241f;
  --on-accent: #ffffff;
  --warning-bg: #fbf3db;
  --warning-ink: #89632a;
  --warning-line: #cab989;
  --success-bg: #edf3ec;
  --success-ink: #276749;
  --danger-bg: #fdebec;
  --danger-ink: #a33d40;
  --danger-line: #c58c8d;
  --glass: rgba(255,255,255,.98);
  --shadow-color: rgba(15,15,15,.08);
  color-scheme: light;
  --shadow: 0 4px 18px var(--shadow-color);
  --overlay: rgba(15,15,15,.38);
  --media-overlay: rgba(9,13,18,.92);
  --on-overlay: #ffffff;
}
:root[data-theme="dark"] {
  --bg: #191919;
  --paper: #202020;
  --raised: #2c2c2b;
  --sidebar-bg: #202020;
  --sidebar-hover: #2c2c2b;
  --ink: #e9e9e7;
  --secondary: #cacac6;
  --muted: #aaa9a4;
  --line: #343432;
  --line-strong: #51514d;
  --control-border: #74746e;
  --accent: #e9e9e7;
  --soft: #2c2c2b;
  --accent-solid: #e9e9e7;
  --on-accent: #191919;
  --warning-bg: #3b3222;
  --warning-ink: #e7c58c;
  --warning-line: #8c774d;
  --success-bg: #25352b;
  --success-ink: #a0c9af;
  --danger-bg: #3c272a;
  --danger-ink: #e9aaa9;
  --danger-line: #a86d72;
  --glass: rgba(25,25,25,.98);
  --shadow-color: rgba(0,0,0,.28);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg: #191919;
    --paper: #202020;
    --raised: #2c2c2b;
    --sidebar-bg: #202020;
    --sidebar-hover: #2c2c2b;
    --ink: #e9e9e7;
    --secondary: #cacac6;
    --muted: #aaa9a4;
    --line: #343432;
    --line-strong: #51514d;
    --control-border: #74746e;
    --accent: #e9e9e7;
    --soft: #2c2c2b;
    --accent-solid: #e9e9e7;
    --on-accent: #191919;
    --warning-bg: #3b3222;
    --warning-ink: #e7c58c;
    --warning-line: #8c774d;
    --success-bg: #25352b;
    --success-ink: #a0c9af;
    --danger-bg: #3c272a;
    --danger-ink: #e9aaa9;
    --danger-line: #a86d72;
    --glass: rgba(25,25,25,.98);
    --shadow-color: rgba(0,0,0,.28);
    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; }
@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); }