/* ============================================================================
   senate-map-shared.css - Campaigns & Elections design system (shared visual tokens + core
   components) for the Senate/Governor 2026 map product.
   ----------------------------------------------------------------------------
   Single source of truth for the design tokens and the shared component styles
   used by: index.html (hub), senatni_mapa_usa_2026.html (main app),
   senat_2026_zdroje.html (sources), and all 50 per-state pages in stat/.
   Page-specific layout stays inline in each file; anything visual and reusable
   lives here so the 50 state pages stay tiny and the system can never drift.
   No build step, no @import, no runtime dependency - a plain static stylesheet.
   ============================================================================ */

:root {
  /* ---- Campaigns & Elections surface ---- */
  --paper: #ffffff;
  --panel: #ffffff;
  --panel-2: #f4f4f4;
  --ink: #111827;
  --muted: #3f4a5a;
  --faint: #6b7280;
  --hair: #e9e9e9;
  --hair-strong: #d4d4d4;
  --hero-gradient: linear-gradient(90deg, #ffffff 0%, #f4f4f4 52%, #d4d4d4 100%);
  --shadow-card: 0 10px 28px rgba(17, 24, 39, 0.08);
  --shadow-soft: 0 6px 18px rgba(17, 24, 39, 0.06);

  /* ---- race rating ramp (generic - reusable for Senate, Governor, …) ---- */
  --r-safe:   #a72734;
  --r-likely: #bd3342;
  --r-lean:   #d88a92;
  --r-tilt:   #f7e8ea;
  --race-toss:#f2c94c;   /* contested = signal yellow */
  --d-tilt:   #e8f1fa;
  --d-lean:   #7ba7d1;
  --d-likely: #2368a5;
  --d-safe:   #1a5790;
  --ind:      #9a6b00;
  --race-none:#d4d4d4;   /* no race = quiet neutral grey */

  /* ---- strategic layer: single-hue sequential (does not fight the ramp) ---- */
  --strat-1: #e8f1fa;
  --strat-2: #a8c7e6;
  --strat-3: #1a5790;
  --strat-4: #143f69;

  --good: #0f7a4f;
  --warn: #9a6b00;
  --danger: #a72734;

  --radius-tile: 6px;
  --radius-card: 10px;

  --display: "Libre Franklin", "IBM Plex Sans", Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --sans: "IBM Plex Sans", Arial, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

button, select, input, textarea { font: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* Full-bleed layout - use the whole viewport, no narrow centered cap. */
.app { width: 100%; max-width: none; margin: 0; padding: 40px clamp(20px, 4vw, 84px) 72px; }

/* ---------- header ---------- */
header { display: block; padding: 54px clamp(20px, 4vw, 84px) 42px;
         margin: -40px calc(50% - 50vw) 26px; border-bottom: 1px solid var(--hair);
         background: var(--hero-gradient); }
.kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px;
          border-radius: 999px; background: rgba(26, 87, 144, 0.10); color: #143f69;
          font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
          margin: 0 0 14px; text-decoration: none; transition: background .12s ease; }
a.kicker:hover { background: rgba(26, 87, 144, 0.18); }
a.kicker:focus-visible { outline: 3px solid rgba(242, 201, 76, 0.5); outline-offset: 2px; }
.kicker::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--race-toss);
                  box-shadow: 0 0 0 4px rgba(242, 201, 76, 0.24); }
h1 { font-family: var(--display); font-weight: 800; font-size: clamp(34px, 5vw, 66px);
     line-height: 1.02; letter-spacing: -0.02em; text-transform: uppercase; margin: 0 0 14px;
     color: #143f69; }
.title-with-icon { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); }
.title-icon { width: clamp(42px, 5vw, 70px); height: clamp(42px, 5vw, 70px); flex: none;
              color: #143f69; filter: drop-shadow(0 6px 14px rgba(17,24,39,.08)); }
.subtitle { margin: 0; max-width: 820px; color: var(--muted); font-size: 16px; line-height: 1.55; }

.top-menu { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 14px; max-width: 980px;
            margin-top: 22px; padding: 14px; background: rgba(255,255,255,.72);
            border: 1px solid var(--hair); border-radius: var(--radius-card);
            box-shadow: var(--shadow-soft); }
.top-menu-group { display: grid; gap: 7px; }
.top-menu-label { font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.top-menu-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.election-menu { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 5px; margin-top: 22px;
                 background: rgba(255,255,255,.76); border: 1px solid var(--hair);
                 border-radius: 999px; box-shadow: var(--shadow-soft); }
.election-menu a, .election-menu span { border: 0; border-radius: 999px; background: transparent;
                 color: var(--muted); font-size: 13px; font-weight: 800; padding: 9px 14px;
                 text-decoration: none; display: inline-flex; align-items: center; }
.election-menu a:hover { color: var(--d-safe); background: var(--d-tilt); }
.election-menu .on { background: var(--d-safe); color: #fff; }
.election-menu .disabled { cursor: not-allowed; color: var(--faint); background: var(--panel-2); }
.menu-group-label { font-size: 10px !important; letter-spacing: .1em; text-transform: uppercase;
                    color: var(--faint) !important; padding-right: 6px !important; }
.menu-divider { width: 1px; min-width: 1px; align-self: stretch; padding: 0 !important;
                margin: 4px 2px; background: var(--hair-strong); border-radius: 0 !important; }
.site-footer { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--hair);
               display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center;
               color: var(--faint); font-size: 12px; }
.site-footer a { color: var(--muted); font-weight: 800; text-decoration: none; }
.site-footer a:hover { color: var(--d-safe); text-decoration: underline; }
.brand-wordmark { font-family: var(--display); font-weight: 900; letter-spacing: 0; text-transform: uppercase;
                  line-height: .95; white-space: nowrap; }
.brand-wordmark .brand-blue { color: #0f5f93; }
.brand-wordmark .brand-red { color: #b32234; }
.brand-wordmark.hero { display: inline-flex; align-items: baseline; gap: .18em; font-size: clamp(42px, 8vw, 104px); }
.brand-wordmark.small { display: inline-flex; align-items: baseline; gap: .18em; font-size: 12px; margin-left: 7px; vertical-align: -1px; }

.soon { font-size: 9px; font-weight: 800; letter-spacing: .08em; color: var(--warn);
        background: #fff4cc; border-radius: 999px; padding: 2px 7px; margin-left: 6px; vertical-align: 1px; }

/* ---------- buttons / links ---------- */
.btn-link, .btn-ghost {
  border: 1px solid var(--hair); background: var(--panel); color: var(--d-safe);
  border-radius: var(--radius-tile); padding: 9px 15px; font-size: 13px; font-weight: 800; cursor: pointer;
  text-decoration: none; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center;
}
.btn-link:hover, .btn-ghost:hover { border-color: var(--d-safe); background: #e8f1fa; }
.btn-ghost { color: var(--muted); }
.btn { border: 1px solid var(--hair-strong); background: var(--panel); color: var(--ink);
       border-radius: var(--radius-tile); padding: 10px 12px; font: inherit; font-weight: 800; cursor: pointer;
       text-decoration: none; display: inline-flex; align-items: center; }
.btn:hover { border-color: var(--d-safe); color: var(--d-safe); background: #e8f1fa; }
.btn.warn { border-color: rgba(154,91,0,.4); color: var(--warn); }
.btn.good { border-color: rgba(15,122,79,.4); color: var(--good); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--faint); cursor: not-allowed;
       background: var(--panel-2); border-color: var(--hair); }

/* primary "go deeper" action - solid accent, the strongest link/button in the system.
   Use for the single most important next step on a surface (e.g. open a state's full page). */
.btn-strong { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--d-safe);
       background: var(--d-safe); color: #fff; border-radius: var(--radius-tile); padding: 8px 13px;
       font-size: 13px; font-weight: 800; text-decoration: none; white-space: nowrap; cursor: pointer;
       box-shadow: var(--shadow-soft); transition: background .12s ease, box-shadow .12s ease; }
.btn-strong:hover { background: #143f69; box-shadow: var(--shadow-card); }
.btn-strong:focus-visible { outline: 3px solid rgba(242, 201, 76, 0.5); outline-offset: 2px; }
.btn-strong-arrow { flex: none; transition: transform .12s ease; }
.btn-strong:hover .btn-strong-arrow { transform: translateX(2px); }

/* ---------- segmented control ---------- */
.seg { display: inline-flex; border: 1px solid var(--hair-strong); border-radius: var(--radius-tile);
       overflow: hidden; background: var(--panel); }
.seg > button, .seg > a { border: 0; background: transparent; color: var(--muted); font-weight: 800;
       font-size: 13px; padding: 9px 15px; cursor: pointer; white-space: nowrap; text-decoration: none;
       border-right: 1px solid var(--hair); display: inline-flex; align-items: center; }
.seg > button:last-child, .seg > a:last-child { border-right: 0; }
.seg > button.on, .seg > a.on { background: var(--d-safe); color: #fff; }
.seg > button:disabled { color: var(--faint); cursor: not-allowed; background: var(--panel-2); }
.seg > button:focus-visible { outline: 3px solid rgba(242, 201, 76, 0.32); outline-offset: -2px; }
.seg-label { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
       color: var(--faint); margin-right: 8px; align-self: center; }
.seg-wrap { display: inline-flex; align-items: center; }

/* ---------- panel ---------- */
.panel { background: var(--panel); border: 1px solid var(--hair); border-radius: var(--radius-card);
         box-shadow: var(--shadow-soft); overflow: hidden; }
.panel-pad { padding: 20px 22px; }
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
              margin-bottom: 16px; }
.panel-title { font-family: var(--display); font-weight: 800; font-size: 19px; margin: 0; letter-spacing: -0.02em; }
.eyebrow { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
           color: var(--d-safe); margin: 0 0 4px; }
.head-tools { display: flex; align-items: center; gap: 10px; }
.panel[data-collapsible].collapsed > :not(.panel-head) { display: none !important; }
.collapse-toggle { display: inline-grid; place-items: center; width: 32px; height: 32px;
       border: 1px solid var(--hair-strong); border-radius: var(--radius-tile); background: var(--panel);
       color: var(--muted); cursor: pointer; flex: none; }
.collapse-toggle:hover { border-color: var(--ink); color: var(--ink); }
.collapse-toggle:focus-visible { outline: 3px solid rgba(242, 201, 76, 0.4); outline-offset: 2px; }
.collapse-toggle .chev { transition: transform .18s ease; }
.collapse-toggle[aria-expanded="false"] .chev { transform: rotate(-90deg); }

/* ---------- rating pill ---------- */
.pill { display: inline-flex; align-items: center; border-radius: 999px; padding: 5px 10px;
        font-size: 12px; font-weight: 800; }

/* ---------- fills: rating (tiles, geo paths, pills) ---------- */
/* WHITE code on dark fills; DARK ink on light fills (WCAG contrast fix). */
.rating-safe-r   { background: var(--r-safe);   color: #fff; }
.rating-likely-r { background: var(--r-likely); color: #fff; }
.rating-lean-r   { background: var(--r-lean);   color: #fff; }
.rating-tilt-r   { background: var(--r-tilt);   color: #6d1721; text-shadow: none; }
.rating-toss     { background: var(--race-toss);color: var(--ink); text-shadow: none; }
.rating-tilt-d   { background: var(--d-tilt);   color: #143f69; text-shadow: none; }
.rating-lean-d   { background: var(--d-lean);   color: #fff; }
.rating-likely-d { background: var(--d-likely); color: #fff; }
.rating-safe-d   { background: var(--d-safe);   color: #fff; }
.rating-ind      { background: var(--ind);      color: #fff; }
.rating-none     { background: var(--race-none);color: var(--muted); text-shadow: none; border-color: var(--hair); }

/* ---------- geographic map (full + isolated) ---------- */
.geo-svg { width: 100%; height: auto; max-height: 620px; display: block; }
.geo-state { cursor: pointer; }
.geo-state > path { stroke: rgba(255,255,255,.7); stroke-width: 0.8; transition: filter .12s ease; }
.geo-state.inert { cursor: default; }
.geo-state:hover > path { filter: brightness(1.08); }
.geo-state:focus { outline: none; }
.geo-state:focus-visible > path { stroke: var(--ink); stroke-width: 2.2; }
.geo-state.selected > path { stroke: var(--ink); stroke-width: 2.4; }
.geo-state.dim > path { opacity: 0.22; }

.geo-state.rating-safe-r > path   { fill: var(--r-safe); }
.geo-state.rating-likely-r > path { fill: var(--r-likely); }
.geo-state.rating-lean-r > path   { fill: var(--r-lean); }
.geo-state.rating-tilt-r > path   { fill: var(--r-tilt); }
.geo-state.rating-toss > path     { fill: var(--race-toss); }
.geo-state.rating-tilt-d > path   { fill: var(--d-tilt); }
.geo-state.rating-lean-d > path   { fill: var(--d-lean); }
.geo-state.rating-likely-d > path { fill: var(--d-likely); }
.geo-state.rating-safe-d > path   { fill: var(--d-safe); }
.geo-state.rating-ind > path      { fill: var(--ind); }
.geo-state.rating-none > path     { fill: var(--race-none); stroke: var(--hair-strong); }

/* strategic-layer fills reused by the main app */
.target-battleground  { background: var(--strat-4); color: #fff; }
.target-powerbuild    { background: var(--strat-3); color: #fff; }
.target-supermajority { background: var(--strat-2); color: #143f69; text-shadow: none; }
.target-majority      { background: var(--strat-1); color: #143f69; text-shadow: none; border-color: var(--strat-2); }
.target-none          { background: var(--race-none); color: var(--muted); text-shadow: none; }

/* ---------- detail card rows ---------- */
.detail-title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.detail-title h2 { font-family: var(--display); font-weight: 800; font-size: 24px; margin: 0; letter-spacing: -0.02em; }
.detail-code { color: var(--muted); font-weight: 700; font-size: 14px; letter-spacing: .04em; }
.drow { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 11px 0;
        border-top: 1px solid var(--hair); font-size: 14px; }
.drow .k { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
.rating-gap { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); }

/* candidate-driven rating flag - incumbent strength overriding the state PVI */
.cand-driven { display: inline-flex; align-items: center; gap: 4px; margin-left: 8px; vertical-align: 1px;
               font-size: 11px; font-weight: 700; letter-spacing: .01em; border-radius: 6px; padding: 3px 8px;
               background: #fff4cc; color: var(--warn); border: 1px solid rgba(154,107,0,.24); cursor: help; white-space: nowrap; }
.cand-driven[hidden] { display: none; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; }
.strat-chip { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px; padding: 4px 9px;
              font-size: 12px; font-weight: 800; background: var(--strat-1); color: var(--d-safe); }
.strat-chip.none { background: var(--panel-2); color: var(--muted); }

/* ---------- candidates ---------- */
.cand { display: grid; grid-template-columns: 42px 1fr; gap: 11px; align-items: center;
        padding: 10px 0; border-top: 1px solid var(--hair); }
.cand:first-of-type { border-top: 0; padding-top: 2px; }
.avatar-wrap { position: relative; width: 42px; height: 42px; }
.avatar { width: 42px; height: 42px; border-radius: 8px; display: grid; place-items: center;
          font-weight: 800; font-size: 14px; overflow: hidden; background-position: center; background-size: cover;
          border: 1px solid var(--hair); }
.avatar.rep { background-color: #f7e8ea; color: var(--r-safe); }
.avatar.dem { background-color: #e8f1fa; color: var(--d-safe); }
.avatar.other { background-color: #fff4cc; color: var(--ind); }
.avatar.loaded { color: transparent; }
.cand .party { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; color: var(--muted); margin-bottom: 3px; }
.cand .dot { width: 9px; height: 9px; border-radius: 99px; }
.dot.rep { background: var(--r-safe); } .dot.dem { background: var(--d-safe); } .dot.other { background: var(--ind); }
.cand .name { font-weight: 600; font-size: 15px; line-height: 1.35; }

/* ---------- freshness badges ---------- */
.fresh-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
               border-radius: 6px; padding: 3px 8px; letter-spacing: .02em; white-space: nowrap; }
.fresh-badge.stale { background: #f7e8ea; color: var(--r-safe); border: 1px solid rgba(167,39,52,.3); }
.fresh-badge.pending { background: var(--panel-2); color: var(--muted); border: 1px solid var(--hair-strong); }
.fresh-badge.fresh { background: #e7f4ee; color: var(--good); border: 1px solid rgba(15,122,79,.3); }
.fresh-badge.hidden { display: none; }
.fresh-dot { width: 7px; height: 7px; border-radius: 99px; background: var(--r-likely); box-shadow: 0 0 0 3px rgba(167,39,52,.18); }

/* ---------- source links ---------- */
.source-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.source-links a { color: var(--d-safe); font-weight: 700; text-decoration: none; font-size: 13px; }
.source-links a:hover { text-decoration: underline; }
.source-links .none { color: var(--faint); font-size: 13px; }

/* ---------- footer / support note ---------- */
.support-note { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--hair); }
.small-heading { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.source-grid { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; line-height: 1.45; }
.source-grid a { color: var(--d-safe); font-weight: 700; text-decoration: none; }
.source-grid a:hover { text-decoration: underline; }
.foot-note { color: var(--faint); font-size: 12px; line-height: 1.45; margin: 8px 0 0; }

.empty-state { padding: 20px; color: var(--muted); border: 1px dashed var(--hair-strong);
               border-radius: var(--radius-card); text-align: center; }

/* ============================================================================
   CZ SENATE 2026 - additive layer (shared by senat_cz_2026.html + obvod/*.html)
   ----------------------------------------------------------------------------
   A structurally different election (two-round single-member), so it carries
   its OWN rating vocabulary. The competitiveness scale is deliberately NOT the
   US 9-tier partisan red<->blue ramp - that would read as party lean, which does
   not exist here. It also avoids the US contested yellow as the dominant colour.
   CZ uses an ink/teal uncertainty ramp: low noise for favored seats, stronger
   teal for competitive seats, and dark ink for genuinely wide-open races.
   ============================================================================ */

/* competitiveness rating pill/tile fills (4 tiers, one unused this cycle) */
.cz-rate { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px;
           padding: 5px 11px; font-size: 12px; font-weight: 800; letter-spacing: .01em; }
.cz-rate.safe        { background: #eef0f2; color: var(--muted); border: 1px solid var(--hair-strong); }
.cz-rate.favored     { background: #e8f4f1; color: #17685d; border: 1px solid rgba(23,104,93,.24); }
.cz-rate.competitive { background: #2f9e8f; color: #fff; }
.cz-rate.wide-open   { background: #22313f; color: #fff; }

/* seat-status chip - a structural fact axis, orthogonal to rating.
   Neutral / green / amber, never partisan colours. */
.cz-seat { display: inline-flex; align-items: center; gap: 6px; border-radius: 6px;
           padding: 4px 9px; font-size: 11px; font-weight: 800; letter-spacing: .04em;
           text-transform: uppercase; }
.cz-seat.incumbent { background: var(--panel-2); color: var(--muted); border: 1px solid var(--hair-strong); }
.cz-seat.open      { background: #e7f4ee; color: var(--good); border: 1px solid rgba(15,122,79,.3); }
.cz-seat.unclear   { background: #fff4cc; color: var(--warn); border: 1px solid rgba(154,107,0,.3); }

/* notable star - separate marquee flag, NOT a rating tier */
.cz-notable { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
              color: #17685d; border-radius: 6px; padding: 3px 8px; background: #e8f4f1;
              border: 1px solid rgba(23,104,93,.24); white-space: nowrap; }

/* open-question / data-caveat warning affordance - the CZ analogue of the US
   "Potřebuje revizi" badge. Never hides ambiguity; carries the flagNote as title. */
.cz-flag { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800;
           color: var(--danger); border-radius: 6px; padding: 3px 8px; background: #f7e8ea;
           border: 1px solid rgba(167,39,52,.3); cursor: help; white-space: nowrap; }
.cz-flag svg { width: 13px; height: 13px; flex: none; }
.cz-flag.dot { padding: 3px 7px; }

/* "editorial read, no polling" persistent honesty banner */
.cz-basis { display: flex; align-items: flex-start; gap: 10px; padding: 12px 15px;
            background: #fff9e8; border: 1px solid rgba(154,107,0,.28); border-radius: var(--radius-card);
            color: #6d4c00; font-size: 13px; line-height: 1.5; }
.cz-basis svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--warn); }

/* kartogram: abstract obvod-number tiles coloured by rating (the "map-like"
   overview - a real geographic obvod SVG is scoped out for v1, see deliverable) */
.obvod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
.obvod-tile { position: relative; display: grid; gap: 4px; padding: 12px 12px 11px; border-radius: var(--radius-tile);
              text-decoration: none; color: inherit; border: 1px solid transparent; cursor: pointer;
              transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; }
.obvod-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--ink); }
.obvod-tile:focus-visible { outline: 3px solid rgba(242,201,76,.5); outline-offset: 2px; }
.obvod-tile.safe        { background: #eef0f2; }
.obvod-tile.favored     { background: #e8f4f1; color: #12332e; }
.obvod-tile.competitive { background: #2f9e8f; color: #fff; }
.obvod-tile.wide-open   { background: #22313f; color: #fff; }
.obvod-tile .ot-num { font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; letter-spacing: -.02em; }
.obvod-tile .ot-seat { font-size: 11px; font-weight: 700; line-height: 1.2; }
.obvod-tile .ot-mark { position: absolute; top: 8px; right: 9px; display: inline-flex; gap: 3px; }
.obvod-tile .ot-mark span { font-size: 11px; line-height: 1; }
.obvod-tile.wide-open .ot-seat { color: rgba(255,255,255,.9); }

/* distinct party fields - křeslo (seat as held) vs 2026 ballot label */
.cz-party-pair { display: inline-flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; }
.cz-party-pair .cz-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700;
            border-radius: 6px; padding: 3px 8px; background: var(--panel-2); color: var(--muted); border: 1px solid var(--hair); }
.cz-party-pair .cz-chip b { color: var(--ink); font-weight: 800; }
.cz-party-pair .cz-chip.mismatch { background: #fff4cc; color: #6d4c00; border-color: rgba(154,107,0,.3); }
.cz-chip-k { font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }

/* incumbent marker on a candidate row */
.cz-incumbent-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800;
            letter-spacing: .05em; text-transform: uppercase; color: var(--d-safe); background: var(--d-tilt);
            border-radius: 5px; padding: 2px 7px; }

/* candidate avatar accent for CZ (no fixed party slots - one neutral treatment) */
.avatar.cz { background-color: var(--panel-2); color: var(--muted); }
.avatar.cz.incumbent { background-color: var(--d-tilt); color: var(--d-safe); }