/* fea-0022 · Colour themes: dark, light and patriotic (USA red, white and blue; the default since v1.28).
   Each page keeps its dark palette in its own :root. This file adds the shared helper tokens and, under
   :root[data-theme=…] (more specific than :root), the light and patriotic palettes. theme.js sets data-theme on <html>.
   Party colours (--dem*, --rep*, --ind*) and the map's rating ramps mean the same in every theme. */
:root {
  --tint: 255, 255, 255;            /* overlays, hovers, hairlines: rgba(var(--tint), a) */
  --bg-rgb: 10, 12, 18;             /* translucent header, tooltips */
  --accent-rgb: 240, 192, 64;
  --accent-hover: #f5cf62;
  --on-accent: #0a0c12;             /* text on an accent background */
  --brand: var(--accent);           /* the "26" in the logo */
  --backdrop: radial-gradient(ellipse at center, #0f1624 0%, #0a0c12 70%);
  --nodata: #2a2d3a; --hold: #2a2f40; --vacant: #3a3f50;
  --ok-strong: #7fe0b9; --bad-strong: #ff8b7e;
  --header-rule: transparent;
  --mti-bg: #0a0c12; --mti-ring: #f0c040; --mti-m: #e8ecf4; --mti-26: #f0c040;   /* the M26 chat badge (v1.27) */
  color-scheme: dark;
}

:root[data-theme="light"] {
  --bg: #f3f5f9; --surface: #ffffff; --surface2: #e9edf4; --border: rgba(20, 30, 50, 0.13);
  --text: #18202e; --text-dim: #566179; --accent: #8a5d00; --ok: #17805a;
  --dem-light: #1f68b0; --rep-light: #b83226; --ind: #7b4a9c;
  --tossup: #8f95a3; --norace: #dde2ea; --swing: #8445a3;
  --tint: 20, 30, 50;
  --bg-rgb: 243, 245, 249;
  --accent-rgb: 176, 124, 10;
  --accent-hover: #6f4b00;
  --on-accent: #ffffff;
  --backdrop: radial-gradient(ellipse at center, #ffffff 0%, #e8ecf3 75%);
  --nodata: #b9c0cc; --hold: #a7afbd; --vacant: #9aa2b1;
  --ok-strong: #0f6b49; --bad-strong: #a32a1f;
  --fin-other: #9aa1b0; --fin-party: #6c7489;
  --mti-bg: #ffffff; --mti-ring: #8a5d00; --mti-m: #18202e; --mti-26: #8a5d00;
  color-scheme: light;
}

:root[data-theme="patriotic"] {
  /* v1.26: light — sky white and pale blue-grey page, navy ink, flag-red highlights, a flag-blue header */
  --bg: #edf1f8; --surface: #ffffff; --surface2: #e2e8f3; --border: rgba(11, 42, 99, 0.15);
  --text: #0b2a63; --text-dim: #4b5d80; --accent: #b4232f; --ok: #17805a;
  --dem-light: #1f68b0; --rep-light: #b83226; --ind: #7b4a9c; --swing: #8445a3;
  --norace: #d6dce7; --tossup: #8f95a3;   /* neutral grey, so "no race" never reads as a Democratic blue */
  --tint: 11, 42, 99;
  --bg-rgb: 237, 241, 248;
  --accent-rgb: 180, 35, 47;
  --accent-hover: #931c26;
  --on-accent: #ffffff;
  --brand: #d42a38;
  --backdrop: radial-gradient(ellipse at 60% 35%, #ffffff 0%, #eef2f8 45%, #d3dae7 100%);
  --nodata: #b9c0cc; --hold: #a7afbd; --vacant: #9aa2b1;
  --ok-strong: #0f6b49; --bad-strong: #a32a1f;
  --fin-other: #9aa1b0; --fin-party: #6c7489;
  --mti-bg: #1d3f99; --mti-ring: #d42a38; --mti-m: #ffffff; --mti-26: #ff8a92;
  --header-bg: linear-gradient(100deg, #0b2a63 0%, #1d3f99 55%, #2a4fb8 100%);
  --header-rule: linear-gradient(#b22234 0 33.3%, #ffffff 33.3% 66.6%, #b22234 66.6% 100%);
  color-scheme: light;
}
/* patriotic: a flag-blue header with a field of white stars and a red-white-red stripe, a faint star field behind the page */
:root[data-theme="patriotic"] body {
  background: radial-gradient(circle, rgba(11, 42, 99, 0.05) 1px, transparent 1.6px) 0 0 / 26px 26px fixed,
              linear-gradient(180deg, #f7f9fc 0%, #e6ebf4 100%) fixed, var(--bg);
}
:root[data-theme="patriotic"] body > header {
  /* the header is dark blue, so its own controls switch to white-on-blue tokens */
  --text: #ffffff; --text-dim: #c9d5f0; --border: rgba(255, 255, 255, 0.28); --surface: rgba(255, 255, 255, 0.1);
  --surface2: rgba(255, 255, 255, 0.2); --accent: #ffffff; --accent-rgb: 255, 255, 255; --accent-hover: #e8edf8;
  --on-accent: #0b2a63; --tint: 255, 255, 255; --brand: #ff6b74;
  color: var(--text); background: var(--header-bg);
  box-shadow: 0 2px 8px rgba(11, 42, 99, 0.25); color-scheme: dark;
}
:root[data-theme="patriotic"] body > header::before {  /* a canton of white stars behind the logo */
  content: ''; position: absolute; left: 0; top: 0; height: 64px; width: 300px; max-width: 70%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 1px, transparent 1.7px) 4px 4px / 20px 20px;
  -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent); mask-image: linear-gradient(90deg, #000 55%, transparent);
}
:root[data-theme="patriotic"] body > header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; background: var(--header-rule); pointer-events: none;
}
:root[data-theme="patriotic"] body > header .mt-theme-menu { --text: #0b2a63; --text-dim: #4b5d80; --surface: #ffffff; --border: rgba(11, 42, 99, 0.15);
  --accent: #b4232f; --tint: 11, 42, 99; --on-accent: #ffffff; }

/* light and patriotic: the white map labels need a halo on the deep rating colours */
:root[data-theme="light"] .state-label, :root[data-theme="patriotic"] .state-label { fill: #fff; stroke: rgba(0, 0, 0, 0.5); stroke-width: 2px; paint-order: stroke; vector-effect: non-scaling-stroke; }
:root[data-theme="light"] .state-path, :root[data-theme="patriotic"] .state-path { stroke: rgba(255, 255, 255, 0.9); }
:root[data-theme="light"] .state-path:hover, :root[data-theme="light"] .state-path.selected,
:root[data-theme="patriotic"] .state-path:hover, :root[data-theme="patriotic"] .state-path.selected { stroke: rgba(24, 32, 46, 0.7); filter: brightness(1.1); }
:root[data-theme="light"] dialog::backdrop, :root[data-theme="light"] #issue-dialog::backdrop,
:root[data-theme="patriotic"] dialog::backdrop, :root[data-theme="patriotic"] #issue-dialog::backdrop { background: rgba(20, 30, 50, 0.4); }

/* ---- the theme toggle (theme.js renders it into every [data-theme-toggle]) */
.mt-theme { position: relative; display: inline-flex; flex-shrink: 0; }
.mt-theme-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 8px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: transparent; color: var(--text); font: inherit; font-size: 0.78rem; white-space: nowrap;
}
.mt-theme-btn:hover { background: var(--surface2); border-color: rgba(var(--tint), 0.2); }
.mt-theme-btn[aria-expanded="true"] { border-color: var(--accent); }
.mt-sw {
  width: 16px; height: 16px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(var(--tint), 0.35);
  background: var(--sw);
}
.mt-sw[data-t="dark"] { --sw: linear-gradient(135deg, #0a0c12 0 50%, #f0c040 50% 100%); }
.mt-sw[data-t="light"] { --sw: linear-gradient(135deg, #ffffff 0 50%, #8a5d00 50% 100%); }
.mt-sw[data-t="patriotic"] { --sw: conic-gradient(#b22234 0 33.3%, #ffffff 0 66.6%, #1d3f99 0 100%); }
.mt-theme-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 2000; min-width: 230px; padding: 4px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  font-family: 'DM Sans', sans-serif; text-align: left;
}
.mt-theme-menu[hidden] { display: none; }
.mt-theme-menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: none; border-radius: 7px; background: none;
  color: var(--text); font: inherit; font-size: 0.85rem; cursor: pointer; text-align: left;
}
.mt-theme-menu button:hover, .mt-theme-menu button:focus-visible { background: rgba(var(--tint), 0.07); outline: none; }
.mt-theme-menu button small { display: block; color: var(--text-dim); font-size: 0.72rem; }
.mt-theme-menu .mt-check { margin-left: auto; color: var(--accent); font-weight: 600; visibility: hidden; }
.mt-theme-menu [aria-checked="true"] .mt-check { visibility: visible; }
.mt-theme-menu hr { border: none; border-top: 1px solid var(--border); margin: 4px 6px; }
.mt-theme-menu .mt-box {
  width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(var(--tint), 0.4); flex-shrink: 0; display: grid; place-items: center;
  font-size: 11px; line-height: 1; color: var(--on-accent);
}
.mt-theme-menu [aria-checked="true"] .mt-box { background: var(--accent); border-color: var(--accent); }
.mt-theme-note { padding: 4px 10px 6px; font-size: 0.7rem; color: var(--text-dim); line-height: 1.4; }
.mt-theme-corner { position: fixed; top: 14px; right: 16px; z-index: 50; }
@media (max-width: 1560px) { .header-controls .mt-theme-label { display: none; } .header-controls .mt-theme-btn { padding: 0 7px; } }
@media (max-width: 760px) {
  .mt-theme-btn .mt-theme-label { display: none; }
  .mt-theme-btn { padding: 0 7px; }
}