/*
  Panel de Control Nacional — panel_control_build_plan.md, Phase 0.

  Ported VERBATIM from panel_control_nacional_mockup_v4.html's <style>, with
  two safe transforms so it can live under the shared storefront shell without
  cascade collisions:

    1. Every selector is scoped under `.body--panel` (the shell sets
       `<body class="sf body--panel">`, cf. precios.html's `body--precios`).
       The mockup uses generic class names (.wrap, .foot, .card, .legend,
       .empty) that storefront.css already defines; `.body--panel .wrap`
       (specificity 0,2,0) beats `.wrap` (0,1,0), so the panel always wins.
    2. The `:root{--color-*}` token block is kept AS-IS — those names don't
       exist in storefront.css (which uses --cream/--ink/…), so they only ADD
       vars, never override. Fonts are NOT re-declared here: storefront.css
       already self-hosts Libre Bodoni / IBM Plex Sans / IBM Plex Mono via
       @font-face and the font-family names match, so the panel reuses them
       (zero Google-Fonts request).

  The `.maqueta` illustrative-data banner is intentionally absent (production
  ships real/empty data, not illustrative). The `pulse` keyframe is renamed
  `panel-pulse` to avoid any collision with a storefront animation of the
  same name.
*/

/* Panel design tokens — Sprint 07b: scoped to the `.body--panel` content
   wrapper (was `:root`) so they no longer leak into the app shell's global
   tokens.css palette now that /panel renders inside dashboard_base.html.
   Most values match tokens.css, but the ones that DON'T (--color-soft-2, the
   font fallback chains) would otherwise repaint the sidebar/topbar/footer. */
.body--panel{
  --color-bg:#f7f3ea; --color-paper:#fffdf7; --color-bg-dark:#0f0d0b; --color-ink:#17130d;
  --color-soft:#564f41; --color-soft-2:#585040; --color-rule-soft:#e0d9c9;
  --color-signal:#d6553f; --color-signal-strong:#a52d22;
  --color-gold:#d8b66a; --color-gold-ink:#8a5e1c; --color-gold-soft:#f0e3cc;
  --color-swing:#c79a3a;
  --color-vote-yes:#1f6b3a; --color-vote-no:#b8311f; --color-vote-abs:#b8901f; --color-vote-aus:#6b6660;
  --color-wine:#7a2c1e;
  --morena:#8B2E2A; --pan:#004B87; --pri:#007A33; --pvem:#3F9E63; --pt:#E63946; --mc:#F58025; --prd:#caa106;
  --font-display:'Libre Bodoni', Georgia, serif;
  --font-sans:'IBM Plex Sans', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:'IBM Plex Mono', 'SF Mono', Menlo, monospace;
}
.body--panel *{box-sizing:border-box; margin:0; padding:0;}
.body--panel{background:var(--color-bg); color:var(--color-ink); font-family:var(--font-sans); font-size:15px; line-height:1.45; -webkit-font-smoothing:antialiased;}
.body--panel a{color:inherit; text-decoration:none; cursor:pointer;}
.body--panel .mono{font-family:var(--font-mono);} .body--panel .serif{font-family:var(--font-display);}
.body--panel .wrap{max-width:1280px; margin:0 auto; padding:0 32px;}
.body--panel .kicker{font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.18em; color:var(--color-gold-ink); font-weight:500;}
.body--panel .micro{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.12em; color:var(--color-soft-2);}
.body--panel .note-inline{font-size:11px; color:var(--color-soft-2); font-style:italic;}

/* Sprint 07b: the panel's own .shell masthead (brand / back link / search /
   live-pill / avatar) was removed — the app shell (dashboard_base.html) now
   provides the sidebar brand+nav and the topbar search+avatar. Its CSS
   (.shell, .brand, .shell-back, .pill-live, .live-dot, .acct + the panel-pulse
   keyframe) went with it. The context band + level tabs below stay; they moved
   into the page content. */

.body--panel .context{background:var(--color-paper); border-bottom:1px solid var(--color-ink);}
.body--panel .context .wrap{display:flex; align-items:center; gap:28px; padding:9px 32px; flex-wrap:wrap;}
.body--panel .context .item{font-size:12px; color:var(--color-soft);} .body--panel .context .item strong{color:var(--color-ink); font-weight:600;}
.body--panel .context .countdown{margin-left:auto; display:flex; align-items:center; gap:9px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--color-ink); border-radius:4px; padding:5px 11px;}
.body--panel .context .countdown b{font-size:14px;}

.body--panel .levels{background:var(--color-bg-dark);}
.body--panel .levels .wrap{display:flex; gap:2px; padding:0 32px;}
.body--panel .level-tab{flex:1; max-width:300px; background:transparent; border:none; border-right:1px solid rgba(255,255,255,.08); cursor:pointer; text-align:left; padding:16px 22px 14px; color:rgba(247,243,234,.6); transition:background .15s, color .15s;}
.body--panel .level-tab:hover{background:rgba(255,255,255,.04); color:var(--color-bg);}
.body--panel .level-tab .lt-num{font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--color-gold); opacity:.7;}
.body--panel .level-tab .lt-name{font-family:var(--font-display); font-size:25px; font-weight:600; letter-spacing:-.01em; line-height:1.05; margin:3px 0 4px; color:inherit;}
.body--panel .level-tab .lt-meta{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:rgba(247,243,234,.72);}
.body--panel .level-tab.active{background:var(--color-bg); color:var(--color-ink); border-right-color:var(--color-ink);}
.body--panel .level-tab.active .lt-num{color:var(--color-gold-ink); opacity:1;}
.body--panel .level-tab.active .lt-name{color:var(--color-ink);} .body--panel .level-tab.active .lt-meta{color:var(--color-soft);}

.body--panel .panel-wrap{display:none; padding:30px 0 70px;} .body--panel .panel-wrap.active{display:block;}
.body--panel .lead-line{font-family:var(--font-display); font-size:24px; font-weight:400; letter-spacing:-.01em; line-height:1.3; max-width:780px; margin-bottom:4px;}
.body--panel .lead-line em{font-style:italic; color:var(--color-gold-ink);}
.body--panel .lead-sub{font-size:13px; color:var(--color-soft); max-width:740px; margin-bottom:24px;}

.body--panel .subsec{margin:36px 0 16px; display:flex; align-items:baseline; gap:14px; border-bottom:1px solid var(--color-ink); padding-bottom:9px;}
.body--panel .subsec:first-of-type{margin-top:6px;}
.body--panel .subsec h2{font-family:var(--font-display); font-size:28px; font-weight:600; letter-spacing:-.015em;}
.body--panel .subsec .sk{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-gold-ink);}
.body--panel .subsec .right{margin-left:auto; font-family:var(--font-mono); font-size:11px; color:var(--color-soft); text-transform:uppercase; letter-spacing:.08em;}

.body--panel .card{background:var(--color-paper); border:1px solid var(--color-ink); border-radius:6px; overflow:hidden;}
.body--panel .grid{display:grid; gap:16px;} .body--panel .g3{grid-template-columns:repeat(3,1fr);} .body--panel .g2{grid-template-columns:repeat(2,1fr);} .body--panel .c2{grid-column:span 2;}
@media(max-width:1080px){.body--panel .g3{grid-template-columns:repeat(2,1fr);} .body--panel .level-tab .lt-name{font-size:21px;}}
@media(max-width:720px){.body--panel .g2,.body--panel .g3{grid-template-columns:1fr;} .body--panel .c2{grid-column:span 1;}}

.body--panel .ch{padding:14px 16px 12px; border-bottom:1px solid var(--color-ink);}
.body--panel .ch .ch-k{display:flex; align-items:center; gap:8px; margin-bottom:6px; flex-wrap:wrap;}
.body--panel .ch h3{font-family:var(--font-display); font-size:20px; font-weight:600; letter-spacing:-.01em; line-height:1.12;}
.body--panel .ch .ch-expl{font-size:11.5px; color:var(--color-soft); line-height:1.35; margin-top:7px;}
.body--panel .cf{padding:10px 16px; border-top:1px solid var(--color-ink); display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--color-bg);}
.body--panel .cf .src{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-soft-2);}
.body--panel .cf .drill{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-gold-ink); font-weight:500;}
.body--panel .cf .drill:hover{color:var(--color-signal);}

.body--panel .basis{font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; padding:2px 6px; border-radius:3px; border:1px solid var(--color-ink); color:var(--color-ink); white-space:nowrap;}
.body--panel .basis.admvo{background:var(--color-ink); color:var(--color-bg);}
.body--panel .basis.estat{background:transparent;}
.body--panel .basis.proxy{background:var(--color-gold-soft); color:var(--color-gold-ink); border-color:var(--color-gold-ink);}
.body--panel .basis.infer{background:transparent; color:var(--color-soft-2); border:1px dashed var(--color-soft-2);}

.body--panel .party{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; font-weight:600; padding:1px 6px; border-radius:3px; color:#fff; white-space:nowrap;}
.body--panel .p-morena{background:var(--morena);} .body--panel .p-pan{background:var(--pan);} .body--panel .p-pri{background:var(--pri);} .body--panel .p-pvem{background:var(--pvem);} .body--panel .p-pt{background:var(--pt);} .body--panel .p-mc{background:var(--mc);} .body--panel .p-prd{background:var(--prd);}

.body--panel .delta{font-family:var(--font-mono); font-size:11px; font-weight:500; display:inline-flex; align-items:center; gap:4px;}
.body--panel .delta.up{color:var(--color-vote-yes);} .body--panel .delta.down{color:var(--color-ink);} .body--panel .delta.flat{color:var(--color-soft-2);}

.body--panel .chart-host{padding:12px 14px 6px; position:relative;} .body--panel .chart-host svg{display:block;}
.body--panel .chtip{position:absolute; z-index:6; pointer-events:none; background:var(--color-paper); border:1px solid var(--color-ink); border-radius:5px; padding:7px 9px; min-width:148px; display:none;}
.body--panel .chtip .ct-h{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-soft); border-bottom:1px solid var(--color-rule-soft); padding-bottom:5px; margin-bottom:5px; white-space:nowrap;}
.body--panel .chtip .ct-row{display:flex; align-items:center; gap:8px; padding:2px 0;}
.body--panel .chtip .ct-sw{width:11px; height:3px; border-radius:2px; flex:none;}
.body--panel .chtip .ct-nm{font-size:11.5px; color:var(--color-ink); flex:1; white-space:nowrap;}
.body--panel .chtip .ct-vl{font-family:var(--font-display); font-size:13px; font-weight:600; color:var(--color-ink);}
.body--panel .chtip .ct-break{margin-top:6px; padding-top:6px; border-top:1px dotted var(--color-rule-soft); font-size:11px; color:var(--color-soft); line-height:1.35; max-width:228px; white-space:normal;}
.body--panel .chtip .ct-break b{display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-ink); margin-bottom:3px;}
.body--panel .brk-note{font-size:11px; color:var(--color-soft); padding:0 16px 12px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.body--panel .brk-note .rk{font-family:var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-ink); border:1px solid var(--color-ink); border-radius:3px; padding:1px 6px; white-space:nowrap;}
.body--panel .legend{display:flex; gap:14px; flex-wrap:wrap; padding:0 16px 12px;}
.body--panel .legend .lg{display:flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-soft);}
.body--panel .legend .sw{width:13px; height:3px; border-radius:2px; display:inline-block;}
.body--panel .legend .sw.box{height:11px; width:11px; border-radius:2px;}

.body--panel .headrow{display:flex; align-items:baseline; gap:14px; padding:13px 16px 4px; flex-wrap:wrap;}
.body--panel .headrow .big{font-family:var(--font-display); font-size:46px; font-weight:600; letter-spacing:-.02em; line-height:1; color:var(--color-vote-yes);}
.body--panel .headrow .cap{font-size:12px; color:var(--color-soft); max-width:240px;}
.body--panel .splitline{display:flex; gap:16px; padding:4px 16px 10px; font-size:12px; color:var(--color-soft); flex-wrap:wrap;}
.body--panel .splitline b{font-family:var(--font-mono);}

.body--panel .appr{padding:14px 16px 6px;}
.body--panel .appr .a-top{display:flex; align-items:baseline; gap:12px; margin-bottom:12px;}
.body--panel .appr .a-num{font-family:var(--font-display); font-size:48px; font-weight:600; line-height:1; letter-spacing:-.02em; color:var(--color-vote-yes);}
.body--panel .appr .a-lab{font-size:13px; color:var(--color-soft);} .body--panel .appr .a-lab b{color:var(--color-ink);}
.body--panel .appr .a-bar{display:flex; height:30px; border:1px solid var(--color-ink); border-radius:4px; overflow:hidden; margin-bottom:8px;}
.body--panel .appr .a-seg{display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:11px; color:#fff;}
.body--panel .appr .a-seg.yes{background:var(--color-vote-yes);} .body--panel .appr .a-seg.ns{background:var(--color-soft-2);} .body--panel .appr .a-seg.no{background:var(--color-signal-strong);}
.body--panel .appr .a-houses{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.body--panel .appr .house{border:1px solid var(--color-rule-soft); border-radius:4px; padding:6px 9px; font-size:11px;}
.body--panel .appr .house .hh{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-soft-2);}
.body--panel .appr .house .hv{font-family:var(--font-display); font-size:18px; font-weight:600;}

.body--panel .metric{padding:15px 16px 16px;}
.body--panel .metric .m-top{display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:10px;}
.body--panel .metric .m-label{font-size:13px; font-weight:600; line-height:1.25;}
.body--panel .metric .m-grader{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--color-soft-2); margin-top:2px;}
.body--panel .metric .m-val{font-family:var(--font-display); font-size:40px; font-weight:600; line-height:1; letter-spacing:-.02em;}
.body--panel .metric .m-foot{display:flex; align-items:center; gap:10px; margin-top:9px;}
.body--panel .metric .m-expl{font-size:11.5px; color:var(--color-soft); margin-top:9px; line-height:1.35; border-top:1px dotted var(--color-rule-soft); padding-top:9px;}

.body--panel .rank-body{padding:4px 0;}
.body--panel .rank-row{display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:12px; padding:9px 16px; border-bottom:1px dotted var(--color-rule-soft); transition:background .15s;}
.body--panel .rank-row:last-child{border-bottom:none;} .body--panel .rank-row:hover{background:var(--color-bg);}
.body--panel .rank-row .rk-pos{font-family:var(--font-display); font-size:24px; font-weight:600; line-height:1; text-align:center;}
.body--panel .rank-row.lead .rk-pos{color:var(--color-gold-ink);}
.body--panel .rank-row .rk-name{font-size:13.5px; font-weight:600; line-height:1.2;}
.body--panel .rank-row .rk-where{display:flex; align-items:center; gap:7px; margin-top:3px;}
.body--panel .rank-row .rk-val{text-align:right;}
.body--panel .rank-row .rk-num{font-family:var(--font-display); font-size:18px; font-weight:600; line-height:1;}
.body--panel .rank-row .rk-num .u{font-family:var(--font-mono); font-size:10px; color:var(--color-soft-2); font-weight:400;}
.body--panel .focus-tag{font-family:var(--font-mono); font-size:9.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--color-soft); background:var(--color-bg); border:1px solid var(--color-rule-soft); border-radius:3px; padding:1px 6px; margin-top:4px; display:inline-block;}

.body--panel .matbars{padding:14px 16px;}
.body--panel .matrow{display:grid; grid-template-columns:130px 1fr 38px; align-items:center; gap:10px; padding:5px 0;}
.body--panel .matrow .mt-l{font-size:12px;}
.body--panel .matrow .mt-track{height:14px; background:var(--color-bg); border:1px solid var(--color-rule-soft); border-radius:2px; overflow:hidden;}
.body--panel .matrow .mt-fill{height:100%; background:var(--color-ink);} .body--panel .matrow .mt-fill.g{background:var(--color-gold-ink);}
.body--panel .matrow .mt-n{font-family:var(--font-mono); font-size:11px; text-align:right; color:var(--color-soft);}

.body--panel .compass{padding:16px;}
.body--panel .axis{margin:14px 0;}
.body--panel .axis .ax-h{display:flex; justify-content:space-between; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-soft); margin-bottom:5px;}
.body--panel .axis .ax-track{position:relative; height:8px; background:linear-gradient(90deg,var(--color-rule-soft),var(--color-soft-2)); border:1px solid var(--color-ink); border-radius:4px;}
.body--panel .axis .ax-dot{position:absolute; top:50%; width:13px; height:13px; border-radius:50%; background:var(--color-gold-ink); border:2px solid var(--color-paper); transform:translate(-50%,-50%);}
/* Per-axis locked row (compass ok-state with one or more untagged axes). */
.body--panel .axis-locked .ax-track{filter:blur(2.5px); opacity:.45;}
.body--panel .axis-locked .ax-dot-pending{background:var(--color-soft-2); border-color:var(--color-paper);}
.body--panel .axis-locked .ax-pending{margin-top:5px; font-family:var(--font-mono); font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:var(--color-soft-2);}
.body--panel .lockwrap{position:relative;}
.body--panel .lockwrap .locked{filter:blur(4px); opacity:.5;}
.body--panel .lockwrap .lockmsg{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; background:rgba(255,253,247,.55);}
.body--panel .lockwrap .lockmsg .lk{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-wine); border:1px solid var(--color-wine); border-radius:3px; padding:3px 9px; margin-bottom:9px;}
.body--panel .lockwrap .lockmsg p{font-size:12px; color:var(--color-ink); max-width:320px; line-height:1.4;}
.body--panel .lockwrap .lockmsg b{font-family:var(--font-mono);}

/* panorama (geographic choropleth + accessible table — Phase K) */
.body--panel .pano-head{display:flex; align-items:center; gap:10px; padding:12px 16px 0; flex-wrap:wrap;}
.body--panel .seg-toggle{display:flex; gap:6px; flex-wrap:wrap;}
.body--panel .seg{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; border:1px solid var(--color-ink); border-radius:3px; padding:3px 9px; cursor:pointer; color:var(--color-soft); background:var(--color-paper);}
.body--panel .seg.on{background:var(--color-ink); color:var(--color-bg);}
/* real Mexico choropleth (_partials/_state_map.html); panel_charts.js paints
   each path by the active indicator + zero-CDN ramp on load + toggle. */
.body--panel .pano-map{margin:0; padding:10px 16px 4px;}
.body--panel .pano-map svg{width:100%; max-width:560px; height:auto; display:block; margin:0 auto;}
.body--panel .pano-map path{transition:filter .15s ease; cursor:default;}
.body--panel .pano-map path:hover{filter:brightness(1.12);}
.body--panel .pano-map path:focus-visible{outline:2px solid var(--color-gold-ink); outline-offset:1px; filter:brightness(1.12);}
.body--panel .pano-map .sn-map-state--no-data path{stroke-dasharray:5 4;}
/* row-reachable, colour-independent table that replaces the heat-strip's values */
.body--panel .pano-table{margin:6px 16px 14px; border:1px solid var(--color-rule-soft); border-radius:4px; background:var(--color-paper);}
.body--panel .pano-table>summary{font-family:var(--font-mono); font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--color-gold-ink); font-weight:500; padding:9px 12px; cursor:pointer; list-style:none;}
.body--panel .pano-table>summary::-webkit-details-marker{display:none;}
.body--panel .pano-table>summary::before{content:'▸ '; color:var(--color-soft);}
.body--panel .pano-table[open]>summary::before{content:'▾ ';}
.body--panel .pano-table>summary:hover{color:var(--color-signal);}
.body--panel .pano-table__scroll{max-height:360px; overflow-y:auto; border-top:1px solid var(--color-rule-soft);}
.body--panel #panoTable{width:100%; border-collapse:collapse; font-family:var(--font-mono); font-size:11.5px;}
.body--panel #panoTable th{position:sticky; top:0; background:var(--color-paper); text-align:right; color:var(--color-soft); font-weight:600; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; padding:6px 12px; border-bottom:1px solid var(--color-rule-soft);}
.body--panel #panoTable th.ent{text-align:left;}
.body--panel #panoTable td{text-align:right; padding:4px 12px; border-bottom:1px solid var(--color-rule-soft); color:var(--color-ink);}
.body--panel #panoTable td.rk{color:var(--color-soft);}
.body--panel #panoTable td.ent{text-align:left;}
.body--panel #panoTable th.active, .body--panel #panoTable td.active{color:var(--color-gold-ink); font-weight:700; background:rgba(122,92,18,.06);}
.body--panel #panoTable tbody tr:hover{background:var(--color-bg);}
.body--panel .pano-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 16px 12px; flex-wrap:wrap;}
.body--panel .tm-legend{display:flex; align-items:center; gap:8px; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-soft);}
.body--panel .tm-legend .sw{display:flex; gap:2px;} .body--panel .tm-legend .sw span{width:18px; height:11px;}

.body--panel .compare{padding:14px 16px;}
.body--panel .cmp-head{display:flex; gap:10px; margin-bottom:12px;}
.body--panel .cmp-pick{flex:1; border:1px solid var(--color-ink); border-radius:4px; padding:8px 10px;}
.body--panel .cmp-pick .cp-k{font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-soft-2);}
.body--panel .cmp-pick .cp-n{font-family:var(--font-display); font-size:18px; font-weight:600;}
.body--panel .cmp-row{display:grid; grid-template-columns:1fr 56px 22px 56px 1fr; align-items:center; gap:8px; padding:8px 0; border-bottom:1px dotted var(--color-rule-soft);}
.body--panel .cmp-row:last-child{border-bottom:none;}
.body--panel .cmp-metric{font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--color-soft-2); padding-top:6px;}
.body--panel .cmp-val{font-family:var(--font-display); font-size:17px; font-weight:600; text-align:center;}
.body--panel .cmp-bar{height:8px; background:var(--color-bg); border:1px solid var(--color-rule-soft); border-radius:2px; overflow:hidden;}
.body--panel .cmp-bar i{display:block; height:100%;}
.body--panel .cmp-win{color:var(--color-vote-yes); font-family:var(--font-mono); font-size:13px; text-align:center;}

/* In-card honest-empty: shown where a not-yet-wired data card's chart/rows
   would go (Phase 0). The card keeps its header + real source footer, so it
   honestly says what it WILL show and from where — never a fabricated chart. */
.body--panel .panel-pending{padding:30px 16px 34px; text-align:center;}
.body--panel .panel-pending .pp-k{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-gold-ink); margin-bottom:7px;}
.body--panel .panel-pending p{font-size:12px; color:var(--color-soft); line-height:1.4; max-width:300px; margin:0 auto;}
.body--panel .panel-pending .pp-fase{font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--color-ink);}

.body--panel .empty{background:var(--color-gold-soft); border:1px dashed var(--color-gold-ink); border-radius:6px; padding:18px;}
.body--panel .empty .e-k{font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--color-gold-ink); margin-bottom:8px;}
.body--panel .empty h3{font-family:var(--font-display); font-size:18px; font-weight:600; margin-bottom:7px;}
.body--panel .empty p{font-size:12.5px; color:var(--color-soft); line-height:1.45;}
.body--panel .empty .e-note{font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--color-soft-2); margin-top:11px; border-top:1px dotted var(--color-gold-ink); padding-top:10px;}

.body--panel .elec{display:grid; grid-template-columns:1.3fr 1fr;}
@media(max-width:820px){.body--panel .elec{grid-template-columns:1fr;}}
.body--panel .elec .e-left{padding:16px;} .body--panel .elec .e-right{background:var(--color-bg-dark); color:var(--color-bg); padding:16px;}
.body--panel .elec .race{display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center; padding:9px 0; border-bottom:1px dotted var(--color-rule-soft);}
.body--panel .elec .race:last-child{border-bottom:none;}
.body--panel .elec .race .st{font-family:var(--font-mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--color-soft-2); width:62px;}
.body--panel .elec .race .ld{font-size:13px; font-weight:500;} .body--panel .elec .race .ld small{color:var(--color-soft-2); font-weight:400;}
.body--panel .elec .race .pct{font-family:var(--font-display); font-size:18px; font-weight:600;}
.body--panel .pred-lock .pl-k{font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--color-gold);}
.body--panel .pred-lock h4{font-family:var(--font-display); font-size:21px; font-weight:600; margin:6px 0 4px;}
.body--panel .pred-blur{margin-top:12px; filter:blur(5px); opacity:.55; user-select:none;}
.body--panel .pred-blur .pb-row{display:flex; justify-content:space-between; padding:6px 0; border-bottom:1px solid rgba(255,255,255,.15); font-family:var(--font-mono); font-size:13px;}
.body--panel .pred-cta{margin-top:16px; background:var(--color-signal-strong); color:#fff; text-align:center; padding:10px; border-radius:4px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; font-weight:500;}

.body--panel .citylist{padding:6px 0;}
.body--panel .cityrow{display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center; padding:8px 16px; border-bottom:1px dotted var(--color-rule-soft);}
.body--panel .cityrow:last-child{border-bottom:none;}
.body--panel .cityrow .cy-n{font-size:13px; font-weight:500;}
.body--panel .cityrow .cy-bar{width:120px; height:9px; background:var(--color-bg); border:1px solid var(--color-rule-soft); border-radius:2px; overflow:hidden;}
.body--panel .cityrow .cy-bar i{display:block; height:100%; background:var(--color-swing);}
.body--panel .cityrow .cy-v{font-family:var(--font-mono); font-size:12px; color:var(--color-soft); width:42px; text-align:right;}

.body--panel .foot{border-top:1px solid var(--color-ink); background:var(--color-bg-dark); color:rgba(247,243,234,.7); padding:26px 0 32px;}
.body--panel .foot .wrap{display:flex; gap:30px; flex-wrap:wrap;}
.body--panel .foot .f-main{flex:1; min-width:260px;}
.body--panel .foot h5{font-family:var(--font-display); font-size:16px; color:var(--color-bg); margin-bottom:8px;}
.body--panel .foot p{font-size:12px; line-height:1.5; max-width:560px;}
.body--panel .foot .f-legend{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; align-items:center;}

/* ── Accessibility (Phase L) ──────────────────────────────────────────
   The v4 mockup shipped no keyboard-focus styling at all; these rings are
   the only visual addition, and they paint on :focus-visible ONLY (a mouse
   click never shows one). Surface-aware: an ink ring on the light card
   surfaces, a gold ring on the dark masthead/levels bar (an ink ring would
   vanish on #0f0d0b). Rings clear ≥3:1 against their backdrop. */
.body--panel a:focus-visible,
.body--panel .seg:focus-visible,
.body--panel .drill:focus-visible,
.body--panel .chart-host:focus-visible,
.body--panel [tabindex]:focus-visible{
  outline:2px solid var(--color-ink); outline-offset:2px; border-radius:2px;
}
/* Level tabs live on the dark bar: gold ring when unselected (dark bg),
   ink ring once selected (the active tab turns cream). */
.body--panel .level-tab:focus-visible{outline:3px solid var(--color-gold); outline-offset:-3px;}
.body--panel .level-tab.active:focus-visible{outline-color:var(--color-ink);}
/* The panorama indicator toggles are real <button>s now — strip native
   chrome so the ported .seg look is pixel-identical to the mockup's spans. */
.body--panel .seg{appearance:none; -webkit-appearance:none;}
/* Visually-hidden helper for the SR-only chart summaries wired in
   panel_charts.js (keyboard data-cursor hint, per-chart description). */
.body--panel .sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;}

/* Contrast (≥7:1) overrides where a muted token lands on a non-default surface:
   - the dark footer's .micro + the estat/inferido legend chips (the ported ink
     tokens were near-invisible on #0f0d0b);
   - the gold-tinted honest-empty card, where --color-soft/-soft-2 only reached
     ~6.3:1 — nudged darker to clear 7:1 while staying muted. */
.body--panel .foot .micro{color:rgba(247,243,234,.78);}
.body--panel .foot .basis.estat,
.body--panel .foot .basis.infer{color:rgba(247,243,234,.86); border-color:rgba(247,243,234,.5);}
.body--panel .empty p,
.body--panel .empty .e-note{color:#4a4534;}

@media (prefers-reduced-motion: reduce){
  .body--panel .live-dot{animation:none;}
}
