/* ==========================================================================
   election.ltd — shared surface layer

   THE DESIGN LANGUAGE IS votersir.site, AND THE TOKENS BELOW ARE ITS OWN.
   Surya picked that site as the reference on 2026-09-12 after rejecting a light
   card build as "very bad". These values were read off the live stylesheet at
   karnataka.votersir.site rather than eyeballed from a screenshot, so the estate
   matches exactly rather than approximately.

   What that build does that the rejected one did not:
     - dark navy ground, vivid accents, mono numerals
     - a figure is never alone: big abbreviated value, exact value, percentage,
       and the denominator it is a share of
     - ranked horizontal bar lists, each row its own colour
     - dense KPI grids of six to eight, not four big empty boxes
     - a chart is WITHHELD with a stated threshold when coverage is too low,
       rather than drawn from a sample that would describe the sample

   That last one is the same rule this project already follows for absent values,
   arrived at independently. It is kept.
   ========================================================================== */

:root {
  /* Ground and panels */
  --bg:        #0b1020;
  --bg-2:      #111832;
  --panel:     #141c38;
  --panel-2:   #1a2344;
  --line:      #243059;
  --line-soft: #1c2547;

  /* Ink */
  --ink:   #e8ecf8;
  --ink-2: #a6b0d0;
  --ink-3: #6f7ba3;

  /* Brand and semantics */
  --brand:   #4f7cff;
  --brand-2: #7aa2ff;
  --ok:      #22c55e;
  --warn:    #f59e0b;
  --bad:     #ef4d63;
  --accent:  #a855f7;
  --teal:    #14b8a6;

  /* Categorical ramp for parties and ranked lists. Ordered so adjacent rows in a
     bar list never sit next to a near neighbour in hue. */
  --c1: #4f7cff; --c2: #f59e0b; --c3: #22c55e; --c4: #a855f7;
  --c5: #ef4d63; --c6: #14b8a6; --c7: #ec4899; --c8: #7aa2ff;
  --c-other: #6f7ba3;

  --r:    14px;
  --r-sm: 9px;
  --sh:   0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;

  --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px;
  --fs-16: 16px; --fs-19: 19px; --fs-23: 23px; --fs-28: 28px;
  --fs-33: 33px; --fs-40: 40px;

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 28px; --space-7: 40px; --space-8: 56px;

  /* ── Compatibility aliases ──────────────────────────────────────────────
     The light build named its tokens --ink-900/700/500/400, --paper*, --rule*,
     --brand-050/600, --verify and --accent-*. Roughly 128 inline styles across the
     pages still reference those names, and an undefined custom property does not
     fall back - it resolves to nothing, which is how the state page heading ended
     up dark-on-dark after the theme swap.

     Aliasing is deliberate rather than a rewrite: it is one edit instead of 128,
     it cannot miss an occurrence, and it keeps pages nobody has revisited correct.
     New code should use the names above. */
  --ink-900: var(--ink);
  --ink-700: var(--ink-2);
  --ink-500: var(--ink-2);
  --ink-400: var(--ink-3);
  --paper:        var(--panel);
  --paper-alt:    var(--bg-2);
  --paper-sunken: var(--bg-2);
  --rule:         var(--line);
  --rule-strong:  var(--line);
  --brand-050:    var(--panel-2);
  --brand-600:    var(--brand-2);
  --brand-800:    var(--bg-2);
  --verify:       var(--ok);
  --accent-600:   var(--warn);
  --accent-500:   #f97316;
  --status-unknown: var(--ink-3);
  --tier-state:   var(--brand);
  --fs-15: 15px;
  --lh-body: 1.55;
  --gutter: var(--space-5);
  --container-prose: 72ch;
  --radius: var(--r-sm);
  --font-sans: var(--sans);
  --font-mono: var(--mono);
  --font-deva: "Noto Sans Devanagari", var(--sans);
}

html { color-scheme: dark; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--fs-14);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--brand-2); text-decoration: none; }
a:hover { color: var(--ink); text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--panel); color: var(--ink); padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line); border-radius: var(--r-sm);
}
.skip-link:focus { left: var(--space-4); top: var(--space-4); }

/* Every host's MainLayout carries Blazor's #blazor-error-ui bar, but its only hiding rule
   lived in app.css, which no host loads any more. Unhidden, "An unhandled error has
   occurred. Reload" printed at the foot of every page on every host. blazor.web.js shows
   it (display:block) only if an error actually occurs. */
#blazor-error-ui {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 1000;
  background: var(--bad); color: #fff; padding: var(--space-3) var(--space-5); font-size: var(--fs-14);
}
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
#blazor-error-ui a { color: #fff; text-decoration: underline; }

/* ── Site chrome ──────────────────────────────────────────────────────── */

.rz-head {
  position: sticky; top: 0; z-index: 30;
  background: rgba(11,16,32,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.rz-head__in {
  max-width: 1320px; margin-inline: auto;
  padding: var(--space-3) var(--space-5);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
}
.rz-brand { display: flex; align-items: center; gap: var(--space-3); text-decoration: none; }
.rz-brand:hover { text-decoration: none; }
.rz-brand__mark {
  width: 40px; height: 40px; border-radius: 11px; flex: none;
  background: linear-gradient(140deg, var(--brand), var(--accent));
  display: grid; place-items: center;
  font-family: var(--mono); font-size: var(--fs-13); font-weight: 700;
  color: #fff; letter-spacing: -.02em;
  box-shadow: 0 0 0 1px rgba(79,124,255,.35), 0 6px 20px -6px rgba(79,124,255,.55);
}
.rz-brand__name { font-size: var(--fs-16); font-weight: 700; color: var(--ink); line-height: 1.15; }
.rz-brand__sub {
  display: block; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 500; margin-top: 2px;
}

.rz-nav { display: flex; gap: var(--space-2); margin-left: auto; flex-wrap: wrap; }
.rz-nav a {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 8px 14px; border-radius: 10px;
  font-size: var(--fs-13); font-weight: 500; color: var(--ink-2);
  border: 1px solid transparent;
}
.rz-nav a:hover { background: var(--panel); color: var(--ink); text-decoration: none; }
.rz-nav a.is-active { background: var(--panel-2); border-color: var(--brand); color: var(--ink); }

.rz-live {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--fs-11); color: var(--ok);
}
.rz-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); box-shadow: 0 0 0 3px rgba(34,197,94,.18);
}

/* ── Search ───────────────────────────────────────────────────────────── */

.rz-search { display: flex; gap: var(--space-2); width: 100%; max-width: 460px; }
.rz-search input {
  flex: 1; min-width: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: 10px; padding: 9px 12px;
  color: var(--ink); font-family: var(--sans); font-size: var(--fs-13);
}
.rz-search input::placeholder { color: var(--ink-3); }
.rz-search input:focus { border-color: var(--brand); outline: none; }
.rz-search button {
  background: var(--brand); border: 0; border-radius: 10px;
  padding: 9px 16px; color: #fff; font-family: var(--sans);
  font-size: var(--fs-13); font-weight: 600; cursor: pointer;
}
.rz-search button:hover { background: var(--brand-2); }

/* ── Page frame ───────────────────────────────────────────────────────── */

.rz-wrap { max-width: 1320px; margin-inline: auto; padding: var(--space-5) var(--space-5) var(--space-8); }

.rz-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--fs-12); color: var(--ink-3); margin-bottom: var(--space-4);
  font-family: var(--mono);
}
.rz-path a { color: var(--ink-2); }
.rz-path .sep { color: var(--line); }

/* ── Card ─────────────────────────────────────────────────────────────── */

.rz-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh);
  padding: var(--space-5); margin-bottom: var(--space-4);
}
.rz-card--tight { padding: var(--space-4); }
.rz-card--flush { padding: 0; overflow: hidden; }

.rz-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-4);
}
.rz-card__title {
  font-size: var(--fs-16); font-weight: 600; color: var(--ink); margin: 0;
}
.rz-card__meta { font-family: var(--mono); font-size: var(--fs-12); color: var(--ink-3); }

/* ── Figures ──────────────────────────────────────────────────────────── */

.rz-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); }

.rz-fig {
  background: var(--bg-2); border: 1px solid var(--line-soft);
  border-radius: var(--r-sm); padding: var(--space-4);
}
.rz-fig__label {
  display: block; font-size: 10px; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3);
  margin-bottom: 6px;
}
.rz-fig__value {
  display: block; font-family: var(--mono); font-size: var(--fs-28);
  font-weight: 700; color: var(--ink); line-height: 1.1; letter-spacing: -.02em;
}
.rz-fig__sub { display: block; font-size: var(--fs-12); color: var(--ink-3); margin-top: 5px; }

/* A figure the source does not carry. States the absence; never a zero. */
.rz-fig--absent { background: transparent; border-style: dashed; }
.rz-fig--absent .rz-fig__value {
  font-size: var(--fs-14); font-weight: 500; color: var(--ink-3); letter-spacing: 0;
}
.rz-fig--nota { border-color: rgba(239,77,99,.4); }

/* Accent variants used for a headline figure. */
.rz-fig--lead .rz-fig__value { font-size: var(--fs-33); color: var(--brand-2); }

.rz-pct {
  display: inline-block; margin-left: var(--space-2);
  font-family: var(--mono); font-size: var(--fs-12); font-weight: 600;
  padding: 2px 7px; border-radius: 6px;
  background: rgba(79,124,255,.14); color: var(--brand-2);
}

/* ── Ranked bar list ──────────────────────────────────────────────────── */

.rz-rank { display: grid; gap: var(--space-2); }
.rz-rank__row {
  display: grid; grid-template-columns: minmax(90px, 190px) 1fr minmax(64px, auto);
  align-items: center; gap: var(--space-3);
  padding: 5px 0; text-decoration: none;
}
a.rz-rank__row:hover { text-decoration: none; }
a.rz-rank__row:hover .rz-rank__label { color: var(--ink); }
.rz-rank__label { font-size: var(--fs-13); color: var(--ink-2); overflow-wrap: anywhere; }
.rz-rank__track { height: 11px; border-radius: 6px; background: var(--bg-2); overflow: hidden; }
.rz-rank__fill  { display: block; height: 100%; border-radius: 6px; }
.rz-rank__value {
  font-family: var(--mono); font-size: var(--fs-13); color: var(--ink);
  text-align: right; font-variant-numeric: tabular-nums;
}

/* ── Composition bar ──────────────────────────────────────────────────── */

.rz-share { display: flex; height: 26px; border-radius: 7px; overflow: hidden; background: var(--bg-2); }
.rz-share__seg { height: 100%; }

.rz-bar { display: block; height: 7px; border-radius: 4px; background: var(--bg-2); overflow: hidden; min-width: 44px; }
.rz-bar__fill { display: block; height: 100%; border-radius: 4px; }

/* ── Tables ───────────────────────────────────────────────────────────── */

.rz-table-wrap { overflow-x: auto; }

table.rz { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); line-height: 1.3; }
table.rz th, table.rz td { padding: 10px var(--space-3); text-align: left; box-shadow: inset 0 -1px 0 var(--line-soft); }
table.rz thead th {
  font-size: 10px; font-family: var(--mono); text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-3); font-weight: 600; background: var(--bg-2); white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--line); position: sticky; top: 0; z-index: 1;
}
table.rz tbody tr:hover { background: var(--panel-2); }
table.rz td.num, table.rz th.num {
  text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums lining-nums;
}
table.rz tbody tr.is-winner { background: rgba(34,197,94,.07); }
table.rz tbody tr.is-winner:hover { background: rgba(34,197,94,.12); }
table.rz tbody tr.is-nota td { color: var(--ink-3); font-style: italic; }
table.rz a { color: var(--ink); }
table.rz a:hover { color: var(--brand-2); }

/* ── Party swatch ─────────────────────────────────────────────────────── */

.rz-party { display: inline-flex; align-items: center; gap: var(--space-2); white-space: nowrap; }
.rz-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.rz-swatch--nota { background: repeating-linear-gradient(45deg, var(--ink-3) 0 2px, transparent 2px 4px); }
.rz-tag {
  font-family: var(--mono); font-size: var(--fs-11); font-weight: 600;
  letter-spacing: .04em; color: var(--ink-2);
}

/* ── Chips and notices ────────────────────────────────────────────────── */

.rz-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: var(--fs-11); font-weight: 600;
  padding: 3px 9px; border-radius: 7px;
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink-2);
}
.rz-chip--ok   { color: var(--ok);    border-color: rgba(34,197,94,.35);  background: rgba(34,197,94,.10); }
.rz-chip--warn { color: var(--warn);  border-color: rgba(245,158,11,.35); background: rgba(245,158,11,.10); }
.rz-chip--bad  { color: var(--bad);   border-color: rgba(239,77,99,.35);  background: rgba(239,77,99,.10); }

.rz-notice {
  border: 1px dashed var(--line); border-radius: var(--r-sm);
  padding: var(--space-5); background: var(--bg-2);
  font-size: var(--fs-14); color: var(--ink-2);
}
.rz-notice strong { color: var(--ink); }

/* ── History rail ─────────────────────────────────────────────────────── */

.rz-hist { display: grid; gap: var(--space-1); }
.rz-hist__row {
  display: grid; grid-template-columns: 4.2rem 1fr auto; gap: var(--space-3);
  align-items: baseline; padding: 7px var(--space-3); border-radius: var(--r-sm);
  text-decoration: none;
}
.rz-hist__row:hover { background: var(--panel-2); text-decoration: none; }
.rz-hist__row.is-current { background: var(--panel-2); box-shadow: inset 2px 0 0 var(--brand); }
.rz-hist__year { font-family: var(--mono); font-weight: 700; color: var(--ink); font-size: var(--fs-13); }
.rz-hist__who { color: var(--ink-2); font-size: var(--fs-13); overflow-wrap: anywhere; }
.rz-hist__margin { font-family: var(--mono); font-size: var(--fs-11); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* ── Grids ────────────────────────────────────────────────────────────── */

.rz-cols { display: grid; grid-template-columns: 1fr 340px; gap: var(--space-4); align-items: start; }
@media (max-width: 1000px) { .rz-cols { grid-template-columns: 1fr; } }

.rz-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); }
.rz-state {
  display: block; text-decoration: none; padding: var(--space-4);
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-sm); transition: border-color .15s, transform .15s;
}
.rz-state:hover { border-color: var(--brand); transform: translateY(-1px); text-decoration: none; }
.rz-state__name { display: block; font-weight: 600; color: var(--ink); font-size: var(--fs-15, 15px); }
.rz-state__meta { display: block; font-family: var(--mono); font-size: var(--fs-11); color: var(--ink-3); margin-top: 5px; }

/* ── Footer ───────────────────────────────────────────────────────────── */

.rz-foot {
  border-top: 1px solid var(--line); background: var(--bg-2);
  margin-top: var(--space-8);
}
.rz-foot__in {
  max-width: 1320px; margin-inline: auto; padding: var(--space-6) var(--space-5);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-5);
}
.rz-foot h3 {
  font-size: 10px; font-family: var(--mono); text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-3); margin: 0 0 var(--space-3);
}
.rz-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rz-foot a { color: var(--ink-2); font-size: var(--fs-13); }
.rz-foot__legal {
  max-width: 1320px; margin-inline: auto;
  padding: var(--space-4) var(--space-5) var(--space-6);
  border-top: 1px solid var(--line-soft);
  font-size: var(--fs-12); color: var(--ink-3);
}

/* ── Map ──────────────────────────────────────────────────────────────── */

.rz-map-wrap { display: block; }
.rz-map {
  height: 460px; width: 100%;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2);
}
@media (max-width: 640px) { .rz-map { height: 320px; } }
.rz-map__meta {
  display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-3) 0 0;
  font-family: var(--mono); font-size: var(--fs-11); color: var(--ink-3);
}
.rz-map__meta .sep { color: var(--line); }
.rz-map .leaflet-container { border-radius: var(--r-sm); font: inherit; }

/* ── Booth status ─────────────────────────────────────────────────────
   Strong / Average / Weak / Poor is the SOURCE's classification, not ours.
   Colour is never the only signal: every use pairs it with the status word. */

.booth-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; }
.booth-chip::before { content: ""; width: 9px; height: 9px; border-radius: 3px; flex: none; }
.booth-strong::before  { background: var(--ok); }
.booth-average::before { background: var(--warn); }
.booth-weak::before    { background: #f97316; }
.booth-poor::before    { background: var(--bad); }
.booth-unknown::before { background: var(--ink-3); }
.booth-strong  { color: var(--ok); }
.booth-average { color: var(--warn); }
.booth-weak    { color: #f97316; }
.booth-poor    { color: var(--bad); }
.booth-unknown { color: var(--ink-3); }

.rz-legend { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0 0 var(--space-3); }
.rz-legend__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-12); color: var(--ink-3); }
.rz-legend__count { font-family: var(--mono); color: var(--ink-2); }

/* Forms inside a panel (the candidate filter). */
select, input[type="text"], input[type="search"] {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font-family: var(--sans); font-size: var(--fs-13); padding: 7px 10px;
}
button, input[type="submit"] {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--ink); font-family: var(--sans); font-size: var(--fs-13); font-weight: 500;
  padding: 7px 14px; cursor: pointer;
}
button:hover { border-color: var(--brand); }

@media (prefers-reduced-motion: reduce) {
  .rz-state { transition: none; }
  .rz-state:hover { transform: none; }
}