/* ==========================================================================
   Shared surface layer for every election.ltd host.

   Lives in Election.Ui, not in one web project, because all five hosts render the
   same card/figure/table vocabulary and a second copy would drift.

   The hybrid register. Card layout and stat grids come from the WebForms
   original (IndiaSIR/Election), which Surya picked as the better UI. The rules
   governing what goes IN a card come from the design panel:

     1. the first thing on a page is a figure, never a sentence
     2. one dominant object answers the page's question in under a second
     3. every figure carries its provenance
     4. a missing value is a stated fact with a reason, never a dash or a zero

   Deliberately NOT used here: the futuristic layer in tokens.css
   (--grad-hero, --glow-*, --glass-*, .deep, PlateLattice). Glow and blur fight
   dense figures, and that layer is what got the previous build rejected. It
   stays in Election.Ui for store.election.ltd.
   ========================================================================== */

:root {
  --card-radius: 14px;
  --card-shadow: 0 1px 2px rgba(11, 18, 32, .04), 0 8px 24px -12px rgba(11, 18, 32, .18);
  --card-shadow-hover: 0 2px 4px rgba(11, 18, 32, .06), 0 16px 36px -14px rgba(11, 18, 32, .26);
  --lh-data: 1.25;
  --fs-11: 0.6875rem;
  --fs-56: 3.5rem;
}

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

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

/* Breadcrumb / path bar. Tier colour is carried as a left border, never a fill. */
.rz-path {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--fs-13); color: var(--ink-500);
  margin-bottom: var(--space-4);
}
.rz-path a { color: var(--ink-500); text-decoration: none; }
.rz-path a:hover { color: var(--brand-600); text-decoration: underline; }
.rz-path .sep { color: var(--rule-strong); }

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

.rz-card {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--space-5);
  margin-bottom: var(--space-5);
}
.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-11); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--ink-500); margin: 0;
}
/* The meta slot carries counts, sort order and status - the things that tell a
   reader how complete what they are looking at is. */
.rz-card__meta {
  font-size: var(--fs-11); font-family: var(--font-mono);
  color: var(--ink-400); letter-spacing: .04em;
}

/* ── THE CALL: the dominant object on a constituency page ─────────────── */

.rz-call { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: start; }
@media (max-width: 760px) { .rz-call { grid-template-columns: 1fr; } }

.rz-call__label {
  font-size: var(--fs-11); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-400);
  margin-bottom: var(--space-2);
}
.rz-call__winner {
  font-size: var(--fs-40); font-weight: 600; line-height: 1.1;
  color: var(--ink-900); margin: 0 0 var(--space-2);
  overflow-wrap: anywhere;
}
.rz-call__party { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--fs-16); color: var(--ink-700); }

/* The margin is the second-largest thing on the page, because "by how much" is
   half the question a reader arrives with. */
.rz-call__margin {
  font-family: var(--font-mono); font-size: var(--fs-33); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.02em;
  color: var(--ink-900); line-height: 1.1;
}
.rz-call__marginpct { font-size: var(--fs-19); color: var(--ink-500); margin-left: var(--space-2); }
.rz-call__over { font-size: var(--fs-14); color: var(--ink-500); margin-top: var(--space-2); }

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

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

.rz-fig {
  background: var(--paper-alt);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: var(--space-4) var(--space-3);
}
.rz-fig__label {
  display: block; font-size: var(--fs-11); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500);
  margin-bottom: var(--space-2);
}
.rz-fig__value {
  display: block; font-family: var(--font-mono);
  font-size: var(--fs-23); font-weight: 600;
  font-variant-numeric: tabular-nums lining-nums; letter-spacing: -.01em;
  color: var(--ink-900); line-height: var(--lh-data);
}
.rz-fig__sub { display: block; font-size: var(--fs-12); color: var(--ink-500); margin-top: var(--space-1); }

/* A figure the source does not carry. Rule 4: it states what is absent and why,
   in the same slot the number would have occupied, at a weight that does not
   pretend to be data. */
.rz-fig--absent { background: transparent; border-style: dashed; }
.rz-fig--absent .rz-fig__value { font-size: var(--fs-14); font-weight: 400; color: var(--ink-400); letter-spacing: 0; }

/* NOTA gets its own tint, carried over from the WebForms original. */
.rz-fig--nota { background: #FEF6F6; border-color: #F3DADA; }

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

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

table.rz {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-14); line-height: var(--lh-data);
}
table.rz th, table.rz td { padding: var(--space-3); text-align: left; box-shadow: inset 0 -1px 0 var(--rule); }
table.rz thead th {
  font-size: var(--fs-11); font-family: var(--font-mono);
  text-transform: uppercase; letter-spacing: .07em; color: var(--ink-500);
  font-weight: 500; background: var(--paper-sunken); white-space: nowrap;
  box-shadow: inset 0 -1px 0 var(--rule-strong);
  position: sticky; top: 0; z-index: 1;
}
/* No zebra. With party swatches and micro bars in the same row it becomes mud. */
table.rz tbody tr:hover { background: var(--brand-050); }
table.rz td.num, table.rz th.num {
  text-align: right; font-family: var(--font-mono);
  font-variant-numeric: tabular-nums lining-nums;
}
table.rz tbody tr.is-winner { background: #F2F9F6; }
table.rz tbody tr.is-winner:hover { background: #E9F4EF; }
table.rz tbody tr.is-nota td { color: var(--ink-500); font-style: italic; }

/* ── 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: 2px; flex: none; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
/* Party identity is never colour alone - the tag always rides with the swatch. */
.rz-tag {
  font-family: var(--font-mono); font-size: var(--fs-12); font-weight: 500;
  letter-spacing: .03em; color: var(--ink-700);
}
/* NOTA is never a categorical colour. Hatched grey, always. */
.rz-swatch--nota {
  background: repeating-linear-gradient(45deg, var(--ink-400) 0 2px, transparent 2px 4px);
}

/* ── Vote-share bar ───────────────────────────────────────────────────── */

.rz-share { display: flex; height: 22px; border-radius: 4px; overflow: hidden; background: var(--paper-sunken); }
.rz-share__seg { height: 100%; }
.rz-share__seg:first-child { border-top-left-radius: 4px; border-bottom-left-radius: 4px; }

.rz-bar { display: block; height: 6px; border-radius: 3px; background: var(--paper-sunken); overflow: hidden; min-width: 40px; }
.rz-bar__fill { display: block; height: 100%; border-radius: 3px; }

/* ── Reconciliation ───────────────────────────────────────────────────── */

.rz-recon { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--fs-13); }
.rz-recon__body { color: var(--ink-700); }
.rz-recon--ok    { border-left: 3px solid var(--ok); padding-left: var(--space-3); }
.rz-recon--fail  { border-left: 3px solid var(--bad); padding-left: var(--space-3); }
.rz-recon--none  { border-left: 3px solid var(--ink-400); padding-left: var(--space-3); }

/* ── Notices: an outage or an empty result is information, not an error ── */

.rz-notice {
  border: 1px dashed var(--rule-strong); border-radius: 10px;
  padding: var(--space-5); background: var(--paper-alt);
  font-size: var(--fs-14); color: var(--ink-700);
}
.rz-notice strong { color: var(--ink-900); }

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

.rz-hist { display: grid; gap: var(--space-2); }
.rz-hist__row {
  display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--space-3);
  align-items: baseline; padding: var(--space-2) var(--space-3);
  border-radius: 8px; text-decoration: none;
}
.rz-hist__row:hover { background: var(--brand-050); }
.rz-hist__row.is-current { background: var(--paper-sunken); }
.rz-hist__year { font-family: var(--font-mono); font-weight: 600; color: var(--ink-900); font-size: var(--fs-14); }
.rz-hist__who { color: var(--ink-700); font-size: var(--fs-13); overflow-wrap: anywhere; }
.rz-hist__margin { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-500); font-variant-numeric: tabular-nums; }

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

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

.rz-states { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-3); }
.rz-state {
  display: block; text-decoration: none; padding: var(--space-4);
  background: var(--paper); border: 1px solid var(--rule);
  border-radius: 10px; border-left: 3px solid var(--tier-state);
  transition: box-shadow .15s, transform .15s;
}
.rz-state:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-1px); }
.rz-state__name { display: block; font-weight: 600; color: var(--ink-900); font-size: var(--fs-16); }
.rz-state__meta { display: block; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--ink-500); margin-top: var(--space-1); }

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