/* ============================================================================
   Brazil 2026 — overrides and additions on top of the shared styles.css.
   The base sheet carries the newsroom layout; everything here is either
   specific to this dashboard (round switch, candidate table, majority line) or
   carried over from the Berlin / Mecklenburg-Vorpommern sheet (de.css), whose
   flags, area tables, ranking bars and detail panel this dashboard reuses.
   ========================================================================= */

/* Brazil's own green on the brand mark; the round switch carries it too. */
body{ --accent:#17b35a; }
.brand-mark{ background: linear-gradient(145deg,#1fbf60,#0a7a3a); color:#fff8cc; }
::selection{ background:#2AAEE8; color:#04070c; }

/* Leaflet's zoom, layer and attribution controls sit at z-index 1000; the
   sticky header must be above them or they show through it on scroll. */
.topbar{ gap:16px; flex-wrap:wrap; z-index:1100; }
.brand{ min-width:210px; }
.brand-text h1, .brand-text p{ overflow-wrap:anywhere; }
.pagefoot code, .panel-foot code, .d-note code{ overflow-wrap:anywhere; }

/* ── round switch ───────────────────────────────────────────────────────
   The primary control on the page, so it is heavier than the other segments.
   The 2nd round stays visible but disabled until the TSE lists it. */
.electionseg{ flex:0 0 auto; }
.electionseg button{ padding:7px 15px; font-size:12.5px; font-weight:600; letter-spacing:.01em; }
.electionseg button.on{ box-shadow: inset 0 -2px 0 var(--accent); }
.electionseg button:disabled{ cursor:not-allowed; color: var(--ink-4); }
.electionseg button small{ font-size:10px; font-weight:500; color: var(--ink-3); margin-left:4px; }
.livebox{ margin-left:auto; }

/* ── hero ───────────────────────────────────────────────────────────────
   Two panels rather than the base sheet's three: a presidential race has no
   seat card. The KPI bar runs across the top — half the width was too little
   for five KPIs and a candidate's full name — and the candidate table and the
   map share the row below. The overrides sit inside the wide-screen query: an
   unconditional `.hero` rule here would out-rank the base sheet's
   max-width:1199px rule by coming later, and the layout would never collapse. */
@media (min-width:1200px){
  .hero{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-height:1200px;
         height: var(--hero-h, calc(100vh - 150px)); min-height:640px;
         grid-template-rows: min-content minmax(160px, 1fr); }
  .hero-status{ grid-column:1 / -1; grid-row:1; }
  .hero-results{ grid-column:1; grid-row:2; min-height:0; }
  .hero-map{ grid-column:2; grid-row:2; }
  .hero .panel-foot{ padding:7px 14px; }
}
@media (min-width:1600px){
  .hero{ grid-template-columns: minmax(0, 5.3fr) minmax(0, 6.7fr); }
}

.panel-map > .panel-head{ flex-wrap:wrap; }
#levelSeg{ flex-wrap:wrap; }
#levelSeg button small{ color: var(--ink-3); font-size:10px; margin-left:3px; }
#levelSeg button.on small{ color:#8fb6dd; }
.map-controls{ flex-wrap:wrap; row-gap:8px; }
#map{ position:relative; }
/* Shown for a moment when one finger tries to move the map on a phone. */
.map-hint{
  position:absolute; z-index:700; left:50%; bottom:28px; transform:translateX(-50%);
  padding:7px 14px; border-radius:100px; font-size:12.5px; white-space:nowrap; pointer-events:none;
  background: rgba(13,17,24,.95); border:1px solid var(--hair); color: var(--ink);
  opacity:0; transition: opacity .2s ease;
}
.map-hint.show{ opacity:1; }
.map-loading{
  position:absolute; z-index:700; left:50%; top:14px; transform:translateX(-50%);
  padding:6px 14px; border-radius:100px; font-size:12px;
  background: rgba(13,17,24,.95); border:1px solid var(--hair); color: var(--ink-2);
}

/* The toast is pinned just under the header; when a banner is open it would
   land on top of the banner text, so it moves below it. */
body:has(.banner:not([hidden])) .toast-rail{ top:118px; }

/* ── flags ──────────────────────────────────────────────────────────────
   Plain and never red: what the official source does or does not publish is
   not an error. */
.note-flag{
  display:inline-block; padding:1px 7px; margin-right:5px; border-radius:100px;
  font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase;
  background: var(--surface-3); color: var(--ink-2); border:1px solid var(--hair);
}
.note-flag.ok{ background:#0e2419; color:#8ff0bb; border-color:#1c5c3a; }
.searchrow{ flex-wrap:wrap; }
.level-note{ margin:0; flex:1 1 320px; min-width:0; font-size:11px; line-height:1.5; color: var(--ink-3); }

/* ── label boxes: small rectangles with a slight rounding, not pills ────── */
.tag, .note-flag, .state-pill{ border-radius:4px; }

/* ── status card ─────────────────────────────────────────────────────────
   Every item starts at the top, so labels, values and sub-lines sit on the
   same lines; the counting bar runs along the bottom edge of the whole card. */
.kpibar{ position:relative; }
.kpi-item{ justify-content:flex-start; padding-bottom:12px; }
.kpi-progress .progress{
  position:absolute; left:0; right:0; bottom:0; margin:0;
  height:4px; border-radius:0; background: var(--surface-3);
}
.kpi-progress .progress-fill{ border-radius:0; }
.kpi-lead-item{ flex-grow:1.3; }
.kpi-lead .nm{ overflow:hidden; text-overflow:ellipsis; }

/* ── candidate table ─────────────────────────────────────────────────────
   The share bar is the row's own background, as in the earlier dashboards;
   the dashed line is the 50% a candidate needs to be elected outright. */
.tbl-parties .c-main{ width:60%; }
.bar-maj{ position:absolute; top:3px; bottom:3px; width:0; border-left:1px dashed rgba(242,245,249,.5); }
.pparty{ display:block; font-size:11px; font-weight:450; color: var(--ink-3); margin-top:1px;
         overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowmain .pname{ line-height:1.15; min-width:0; }
.tbl-parties td{ height:44px; }
.tbl-parties td:nth-child(2){ font-size:12px; color: var(--ink-2); }
.tbl-parties td:nth-child(3){ font-size:15px; font-weight:650; color: var(--ink); }
.tbl-parties td:nth-child(4){ font-size:12px; }
.st-tag{
  display:inline-block; padding:1px 7px; border-radius:4px; font-size:10px; font-weight:700;
  letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  background:#0e2419; color:#8ff0bb; border:1px solid #1c5c3a;
}
.st-tag.warn{ background:#241a08; color:#f4c76a; border-color:#5b4413; }
.st-tag.quiet{ background: var(--surface-3); color: var(--ink-3); border-color: var(--hair); }

/* ── black on a dark surface ────────────────────────────────────────────
   Every candidate-coloured fill carries a hairline ring: it disappears under a
   bright colour and gives a dark one its shape. */
.swatch, .rowbar, .d-bar i, .rk-bar, .mini-chip::before, .rt-chip::before,
.legend-ramp i{ box-shadow: inset 0 0 0 1px rgba(242,245,249,.16); }
.chart-legend .swatch, .legend-item .swatch{ box-shadow: inset 0 0 0 1px rgba(242,245,249,.20); }
.mini-chip{
  display:inline-flex; align-items:center; gap:4px; margin-right:4px;
  font-size:10.5px; font-weight:650; color: var(--ink-2);
}
.mini-chip::before{ content:""; width:7px; height:7px; border-radius:2px; background: var(--pc); }

.chartwrap{ height:340px; flex:0 0 auto; }
/* The timeline's Y-axis control while a single candidate's own range is shown:
   visibly out of play, with the reason on hover. */
select:disabled{ opacity:.45; cursor:not-allowed; }
.tbl .empty{ color: var(--ink-3); text-align:center; padding:18px 8px; }

/* ── the area table ─────────────────────────────────────────────────────
   Two-line cells: the figure on top, its context below. */
.tbl-rt th{ padding:8px 12px; }
.tbl-rt td{ padding:7px 12px; vertical-align:middle; }
.rt-area{ min-width:180px; }
.rt-name{ display:block; font-size:13px; font-weight:560; color: var(--ink); }
.rt-sub{ display:block; font-size:10.5px; line-height:1.3; color: var(--ink-3); margin-top:2px; font-variant-numeric: tabular-nums; white-space:nowrap; }
.rt-main{ display:block; font-size:14px; font-weight:650; line-height:1.2; font-variant-numeric: tabular-nums; }
.rt-main.is-empty{ color: var(--ink-3); font-weight:500; font-size:12.5px; }
.rt-chip{ display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:650; line-height:1.2; }
.rt-chip::before{ content:""; width:10px; height:15px; border-radius:2px; background: var(--pc); }
.rt-cnt{ min-width:96px; }
.cnt-bar{ display:block; width:64px; height:3px; margin:3px 0 0 auto; border-radius:2px; background: var(--surface-3); overflow:hidden; }
.cnt-bar i{ display:block; height:100%; background: linear-gradient(90deg,#2AAEE8,#57d0ff); }
tr.sel > td{ background: rgba(42,174,232,.10); }
tr.sel > td:first-child{ box-shadow: inset 3px 0 0 #2AAEE8; }

/* ── ranking list ───────────────────────────────────────────────────────── */
.ranklist li{ position:relative; grid-template-columns: 22px 1fr auto; overflow:hidden; }
.ranklist li.sel{ background: rgba(42,174,232,.10); }
.rk-n{ color: var(--ink-3); font-size:11px; text-align:right; font-variant-numeric: tabular-nums; }
.rk-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; z-index:1; }
.rk-v{ font-weight:650; font-variant-numeric: tabular-nums; text-align:right; z-index:1; }
.rk-bar{ position:absolute; left:0; bottom:0; height:2px; opacity:.85; border-radius:0 2px 2px 0; }
.ranklist .rempty{ color: var(--ink-3); padding:14px 8px; cursor:default; display:block; }
.rank-controls select{ max-width:170px; }

/* ── detail panel ───────────────────────────────────────────────────────── */
.d-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:6px; }
.d-kind{ font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); }
.d-parent{ font-size:11.5px; color: var(--ink-3); margin-bottom:9px; }
.d-link{ color:#8fc7f0; cursor:pointer; text-decoration:none; }
.d-link:hover{ text-decoration:underline; }
.d-stats{ display:grid; grid-template-columns: repeat(auto-fit,minmax(118px,1fr)); gap:6px; margin-bottom:11px; }
.d-h{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color: var(--ink-3); margin:13px 0 6px; font-weight:600; }
.d-h small{ text-transform:none; letter-spacing:0; color: var(--ink-3); font-weight:400; margin-left:5px; }
.d-empty{ color: var(--ink-3); font-size:12px; margin:8px 0; }
.d-note{ font-size:11px; line-height:1.5; color: var(--ink-2); background: var(--surface-2); border:1px solid var(--hair-soft); border-radius: var(--radius-sm); padding:7px 9px; margin:0 0 10px; }
.d-note.quiet{ background:transparent; border:0; padding:0; color: var(--ink-3); margin:6px 0 0; }
/* swatch · candidate (party below) · share · votes */
.d-row{ grid-template-columns: 14px 1fr 54px 76px; align-items:start; }
.d-row .swatch{ margin-top:2px; }
.d-row .rsub{ font-style:normal; color: var(--ink-3); font-size:10.5px; }
.d-chips{ display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.d-chip{ display:inline-flex; align-items:center; gap:5px; padding:2px 8px; border-radius:100px; background: var(--surface-2); border:1px solid var(--hair-soft); font-size:11.5px; cursor:pointer; color: var(--ink-2); }
.d-chip:hover{ border-color: var(--ink-4); color: var(--ink); }
.d-chip .swatch{ width:8px; height:8px; border-radius:2px; }

/* ── reporting-state pills ──────────────────────────────────────────────── */
.state-pill{ display:inline-block; padding:1px 7px; font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; }
.state-pill.none{ background: var(--surface-3); color: var(--ink-3); border:1px solid var(--hair); }
.state-pill.part{ background:#241a08; color:#f4c76a; border:1px solid #5b4413; }
.state-pill.done{ background:#0e2419; color:#8ff0bb; border:1px solid #1c5c3a; }

.legend-note{ font-size:10.5px; color: var(--ink-3); }
/* how many areas each candidate leads, beside the name in the legend */
.legend-n{ font-weight:650; color: var(--ink); font-variant-numeric: tabular-nums; margin-left:1px; }

/* ── diagnostics ────────────────────────────────────────────────────────── */
.diag-row{ display:flex; gap:8px; align-items:flex-start; font-size:11.5px; color: var(--ink-2); line-height:1.5; }
.diag-row .diag-dot{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:0 0 auto; background: var(--ink-4); }
.diag-row.ok .diag-dot{ background:#4cc98a; }
.diag-row.warn .diag-dot{ background: var(--warning); }
.diag-row.info .diag-dot{ background:#5b8db8; }
.diag-h{ font-size:11px; letter-spacing:.05em; text-transform:uppercase; color: var(--ink-3); margin:16px 0 8px; }
.diag-log span{ color: var(--ink-4); margin-right:8px; }
.diag-log .log-err{ color:#f2938f; }
.diag-log .log-new{ color:#8ff0bb; }
.tbl .yes{ color:#8ff0bb; }
.tbl .no{ color: var(--ink-3); }
.tbl .swatch{ margin-right:6px; }

/* Keeps the header to one row down to 1200 px. */
@media (max-width:1279px){
  .topbar{ gap:12px; }
  .nav a{ padding:6px 8px; }
}
@media (max-width:1100px){
  .electionseg button{ padding:6px 11px; font-size:12px; }
}
/* Panel headers with a level selector, a search box, a checkbox and a count
   would widen the page on a narrow screen; they wrap instead. */
@media (max-width:1000px){
  .panel-head{ flex-wrap:wrap; row-gap:8px; }
  .right-tools{ flex-wrap:wrap; row-gap:8px; min-width:0; }
  .right-tools .mini-search{ flex:1 1 130px; width:auto; min-width:0; }
  .right-tools .ctl select{ max-width:150px; }
}
@media (max-width:760px){
  .brand{ min-width:0; flex:1 1 auto; }
  .brand-text{ min-width:0; }
  .livebox{ margin-left:0; }
  .electionseg{ width:100%; }
  .electionseg button{ flex:1 1 0; }
  .level-note{ flex-basis:100%; }
  /* Candidate table: name and share, then how many states they lead. */
  .tbl-parties th:nth-child(2), .tbl-parties td:nth-child(2),
  .tbl-parties th:nth-child(4), .tbl-parties td:nth-child(4){ display:none; }
  .tbl-parties th:nth-child(3), .tbl-parties td:nth-child(3){ display:table-cell; }
  .d-row{ grid-template-columns: 14px 1fr 50px; }
  .d-row .rvotes{ display:none; }
}