/* Single palette for the site, older pages, canvas charts and tools.
   Compatibility aliases keep archived layouts on the same theme. */
html[data-theme], :root:not([data-theme]) {
  color-scheme: dark;
  --bg: #111111;
  --surface: #1a1a1a;
  --text: #f4f4f4;
  --text-secondary: #c5c5c5;
  --muted: #a2a2a2;
  --border: #2e2e2e;
  --accent: #60a5fa;
  --accent-soft: #172554;
  --gain: #4ade80;
  --danger: #f87171;
  --loss: var(--danger);
  --paper: var(--bg);
  --paper-raised: var(--surface);
  --paper-quiet: var(--surface);
  --ink: var(--text);
  --ink-soft: var(--text-secondary);
  --text-soft: var(--muted);
  --faint: var(--muted);
  --line: var(--border);
  --line-strong: var(--border);
  --hairline: var(--border);
  --hairline-strong: var(--border);
  --market: var(--text-secondary);
  --target: var(--text-secondary);
  --positive: var(--gain);
  --negative: var(--loss);
  --session-pre: var(--accent);
  --session-market: var(--accent);
  --session-post: var(--accent);
  --session-band: var(--surface);
  --cream: var(--accent);
  --clay: var(--muted);
  --petrol: var(--accent);
  --burgundy: var(--danger);
  --green: var(--positive);
  --lime: var(--positive);
  --red: var(--danger);
  --yellow: var(--text-secondary);
  --amber: var(--text-secondary);
  --document-bg: #ffffff;
  --shadow: transparent;
  --control-shadow: transparent;
}
html[data-theme="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f4f4f4;
  --text: #141414;
  --text-secondary: #545454;
  --muted: #6b6b6b;
  --border: #dcdcdc;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --gain: #15803d;
  --danger: #b42318;
}
html { background: var(--bg); scrollbar-color: var(--muted) var(--bg); }
body { background: var(--bg); color: var(--text); caret-color: var(--accent); }
::selection { background: var(--accent-soft); color: var(--text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.site-header.is-scrolled { background: var(--bg); }
.index-page .site-header::before, .index-page .watchlist::before { background: var(--bg); }
.chart-tooltip, .radio-widget { background: var(--bg); box-shadow: none; }
#sheet-container tr:nth-child(even) td { background: var(--surface); }
#sheet-container tr:hover td, #sheet-container tr:nth-child(even):hover td { background: var(--surface); }
#sheet-container mark { background: var(--accent-soft); color: var(--text); }
.theme-widget {
  --theme-size: 40px;
  --theme-step: 40px;
  --theme-selection: 0;
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 35;
  box-sizing: border-box;
  width: var(--theme-size);
  height: var(--theme-size);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink-soft);
  box-shadow: none;
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease, border-color 180ms ease;
}
.theme-widget.is-open { width: calc(3 * var(--theme-step) + 2px); }
.theme-widget button {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: 11px "IBM Plex Sans", system-ui, sans-serif;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.theme-widget button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.theme-widget button:hover { color: var(--accent); }
.theme-toggle {
  position: absolute;
  inset: 0 auto 0 0;
  display: grid;
  place-items: center;
  width: calc(var(--theme-size) - 2px);
  height: calc(var(--theme-size) - 2px);
  border-radius: 50%;
}
.theme-toggle { opacity: 1; visibility: visible; transition: opacity 140ms ease, visibility 0s; }
.theme-toggle svg, .theme-choices svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle svg { grid-area: 1 / 1; opacity: 0; transform: scale(0.25); filter: blur(4px); transition: opacity 150ms cubic-bezier(0.2, 0, 0, 1), transform 150ms cubic-bezier(0.2, 0, 0, 1), filter 150ms cubic-bezier(0.2, 0, 0, 1); }
html[data-theme-preference="system"] .theme-toggle [data-theme-icon="system"],
html[data-theme-preference="dark"] .theme-toggle [data-theme-icon="dark"],
html[data-theme-preference="light"] .theme-toggle [data-theme-icon="light"] { opacity: 1; transform: scale(1); filter: blur(0); }
.theme-widget.is-open .theme-toggle { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 0s 140ms; }
.theme-toggle:active svg { transform: scale(0.96); }
.theme-choices {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  display: flex;
  width: calc(3 * var(--theme-step) - 4px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  transition: opacity 140ms ease, transform 190ms ease, visibility 0s 190ms;
}
.theme-widget.is-open .theme-choices { opacity: 1; visibility: visible; transform: translateX(0); transition: opacity 180ms ease 55ms, transform 320ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
.theme-choices button { display: grid; place-items: center; position: relative; z-index: 1; flex: 0 0 var(--theme-step); border-radius: 999px; transition: color 150ms ease; }
.theme-choices button:last-child { flex-basis: calc(var(--theme-step) - 4px); }
.theme-choices button[aria-pressed="true"] { color: var(--accent); }
.theme-choices button::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  padding: 5px 8px;
  border-radius: 5px;
  background: var(--ink);
  color: var(--paper);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%);
  transition: opacity 120ms ease, visibility 0s 120ms;
}
.theme-choices button:focus-visible::after { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (hover: hover) {
  .theme-choices button:hover::after { opacity: 1; visibility: visible; transition-delay: 350ms; }
}

.theme-indicator {
  position: absolute;
  inset: 0 auto 0 0;
  width: calc(var(--theme-step) - 4px);
  border-radius: 999px;
  background: var(--paper-raised);
  transform: translateX(calc(var(--theme-selection) * var(--theme-step)));
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1), background-color 180ms ease;
}
.theme-status { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (max-width: 760px) {
  .theme-widget { --theme-size: 44px; --theme-step: 44px; }
  .radio-widget { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); margin: 0; width: 44px; height: 44px; }
  .radio-widget button { width: 42px; height: 42px; }
  .radio-loading { width: 42px; height: 42px; }
  .radio-widget.is-open { width: calc(44px + 12ch + 1rem); }
  body:has(.theme-widget) { padding-bottom: 4.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .theme-widget, .theme-widget *, .theme-widget .theme-choices { transition: none !important; }
}
@media print {
  .theme-widget, .radio-widget { display: none !important; }
}

@media (prefers-color-scheme: light) {
:root:not([data-theme]) {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f4f4f4;
  --text: #141414;
  --text-secondary: #545454;
  --muted: #6b6b6b;
  --border: #dcdcdc;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --gain: #15803d;
  --danger: #b42318;
}
}
@media (max-width: 760px) {
  body:has(.theme-widget.is-open) .radio-widget.is-open { width: 44px; }
  body:has(.theme-widget.is-open) #music-label { opacity: 0; visibility: hidden; }
}