/* Themes. Loaded by every page after its own stylesheet.
 *
 * Dark is the base: each stylesheet's :root holds the dark values. The
 * selectors below (:root[data-theme=...]) are more specific than :root, so they
 * win regardless of load order. The effective theme is set on <html> by the
 * small script in the page head (see hsights/common/theme.py), before the first
 * paint, so the page never flashes the wrong colours.
 *
 * Charts are drawn in a mid-tone palette on transparent backgrounds, so they
 * need no per-theme colours (Plotly cannot read CSS variables).
 */

:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f6fb;
  --panel: #ffffff;
  --panel-2: #fbfcff;
  --raise: #eef2f8;
  --line: #d9e0ec;
  --line-soft: #e6ebf3;
  --ink: #111a2c;
  --muted: #475672;
  --dim: #5f6d88;
  --accent: #3563e9;
  --accent-soft: rgba(53, 99, 233, .12);
  --up: #0f9f6e;
  --down: #d6334d;
  --warn: #b96f00;
  --link: #2c58d6;
  --up-ink: #0b8a5f;
  --warn-ink: #9a5c00;
  --down-ink: #c42b44;
  --raise-hover: #e3e9f4;
  --line-strong: #c3cddd;
  --card-top: #ffffff;
  --card-bottom: #f6f8fc;
  --on-accent: #ffffff;
  --accent-2: #4f7bf0;
  --accent-line: #3563e9;
  --down-2: #e04a62;
  --on-down: #ffffff;
}

:root[data-theme="paper"] {
  color-scheme: light;
  --bg: #f3eee3;
  --panel: #fbf7ee;
  --panel-2: #fffcf5;
  --raise: #efe7d7;
  --line: #ddd2bd;
  --line-soft: #e8dfcd;
  --ink: #2a241b;
  --muted: #5b5143;
  --dim: #74695a;
  --accent: #2f5fa8;
  --accent-soft: rgba(47, 95, 168, .12);
  --up: #2e7d4f;
  --down: #b3433a;
  --warn: #9a6212;
  --link: #2f5fa8;
  --up-ink: #28703f;
  --warn-ink: #8a560b;
  --down-ink: #a33a31;
  --raise-hover: #e8dec9;
  --line-strong: #cbbda3;
  --card-top: #fffcf5;
  --card-bottom: #f6efe1;
  --on-accent: #fffcf5;
  --accent-2: #4373bd;
  --accent-line: #2f5fa8;
  --down-2: #c65248;
  --on-down: #fffcf5;
}

/* Light themes: soften the dark-theme glows and shadows. */
:root[data-theme="light"] body,
:root[data-theme="paper"] body {
  background:
    radial-gradient(1100px 620px at 16% -12%, var(--accent-soft), transparent 62%),
    var(--bg);
}

/* ----------------------------------------------------------- the switch */
/* One button: the current theme's icon and name; a click steps to the next theme. */
.theme-cycle { display: inline-flex; align-items: center; gap: 7px; width: auto; min-width: 0; flex: none;
               padding: 7px 11px; border-radius: 999px; border: 1px solid var(--line);
               background: var(--raise); color: var(--muted); cursor: pointer; box-shadow: none;
               font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px; font-weight: 600;
               letter-spacing: .06em; line-height: 1.2; transition: color .15s, border-color .15s; }
.theme-cycle:hover { color: var(--ink); border-color: var(--accent); }
.theme-cycle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.theme-icon { width: 16px; height: 16px; flex: none; background: currentColor;
              -webkit-mask: var(--theme-icon) center / contain no-repeat;
              mask: var(--theme-icon) center / contain no-repeat; }
:root[data-theme-pref="light"] .theme-cycle { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%224%22/%3E%3Cpath d=%22M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4%22/%3E%3C/svg%3E"); }
:root[data-theme-pref="light"] .theme-name::after { content: "LIGHT"; }
:root[data-theme-pref="dark"] .theme-cycle { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M20 14.5A8 8 0 1 1 9.5 4a6.5 6.5 0 0 0 10.5 10.5z%22/%3E%3C/svg%3E"); }
:root[data-theme-pref="dark"] .theme-name::after { content: "DARK"; }
:root[data-theme-pref="paper"] .theme-cycle { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M6 3h9l4 4v14H6z%22/%3E%3Cpath d=%22M15 3v4h4M9 12h7M9 16h7%22/%3E%3C/svg%3E"); }
:root[data-theme-pref="paper"] .theme-name::after { content: "PAPER"; }
:root[data-theme-pref="auto"] .theme-cycle { --theme-icon: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 3v18%22 /%3E%3Cpath d=%22M12 3a9 9 0 0 1 0 18z%22 fill=%22black%22/%3E%3C/svg%3E"); }
:root[data-theme-pref="auto"] .theme-name::after { content: "AUTO"; }
/* Older pages may still carry the four-button group: keep it styled. */
.theme-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px;
                border: 1px solid var(--line); background: var(--raise); flex: none; }
.theme-switch button { width: auto; min-width: 0; padding: 5px 9px; border: 0; border-radius: 6px;
                       background: transparent; color: var(--dim); cursor: pointer;
                       font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px;
                       font-weight: 600; letter-spacing: .08em; line-height: 1.2; box-shadow: none; }
@media (max-width: 640px) {
  .theme-cycle { padding: 8px; }
  .theme-cycle .theme-name { display: none; }
}