:root {
  --ph:#d62728; --bn:#1f77b4; --pn:#2ca02c; --bersatu:#15803d; --bersama:#f59e0b; --muda:#ec4899; --ot:#64748b; --border:var(--line);
}
body[data-theme="light"] {
  --bg:#f8fafc; --panel:#ffffff; --panel2:#f1f5f9; --text:#0f172a; --muted:#475569;
  --line:#cbd5e1; --chart-grid:rgba(100,116,139,.25); --chart-text:#0f172a; --chart-muted:#64748b; --chart-axis:#334155; --point-stroke:#ffffff;
  background:linear-gradient(180deg,#ffffff 0,#f8fafc 46%,#eef2f7 100%);
}
body[data-theme="dark"] {
  --bg:#07111f; --panel:#0f172a; --panel2:#111827; --text:#e5e7eb; --muted:#9ca3af;
  --line:#334155; --chart-grid:rgba(148,163,184,.18); --chart-text:#e5e7eb; --chart-muted:#94a3b8; --chart-axis:#cbd5e1; --point-stroke:#020617;
  background:radial-gradient(circle at top left,#1e293b 0,#07111f 45%,#020617 100%);
}
* { box-sizing:border-box; }
body { margin:0; color:var(--text); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,"Noto Sans TC",sans-serif; }
header { position:sticky; top:0; z-index:10; backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
body[data-theme="light"] header { background:rgba(255,255,255,.88); }
body[data-theme="dark"] header { background:rgba(2,6,23,.78); }
.header-inner { max-width:1320px; margin:auto; padding:24px 22px; display:flex; gap:20px; justify-content:space-between; align-items:flex-end; }
h1 { margin:0; font-size:clamp(26px,4vw,44px); letter-spacing:-.04em; line-height:1.05; }
.subtitle { margin:10px 0 0; max-width:820px; color:var(--muted); line-height:1.55; }
nav { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; align-items:center; }
nav a, select, button {
  color:var(--text); text-decoration:none; padding:8px 11px; border:1px solid var(--line); border-radius:12px; background:var(--panel); font-size:13px; cursor:pointer;
}
nav a { border-radius:999px; }
button.active:not(.toggle) {
  background:#2563eb;
  color:#fff;
  border-color:#1d4ed8;
}
main { max-width:1320px; margin:auto; padding:22px; }
.grid { display:grid; gap:18px; }
.kpis { grid-template-columns:repeat(4,minmax(0,1fr)); }
.two-col { grid-template-columns:1.1fr .9fr; }
.three-col { grid-template-columns:repeat(3,minmax(0,1fr)); }
.card {
  background:var(--panel); border:1px solid var(--line); border-radius:22px; padding:20px;
  box-shadow:0 14px 35px rgba(15,23,42,.08);
}
body[data-theme="dark"] .card { box-shadow:0 18px 60px rgba(0,0,0,.25); }
.section { margin-top:22px; }
.section-title { display:flex; gap:14px; align-items:center; justify-content:space-between; margin-bottom:14px; }
h2 { margin:0; font-size:24px; letter-spacing:-.02em; }
h3 { margin:8px 0 6px; }
.kpi .label { color:var(--muted); font-size:13px; }
.kpi .value { font-size:44px; font-weight:850; letter-spacing:-.05em; margin-top:4px; }
.kpi .sub, .small { color:var(--muted); font-size:13px; line-height:1.55; }
.ph { color:var(--ph); } .bn { color:var(--bn); } .pn { color:var(--pn); } .bersatu { color:var(--bersatu); } .bersama { color:var(--bersama); } .muda { color:var(--muda); } .ot, .others { color:var(--ot); }
.badge { display:inline-flex; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:var(--panel2); font-size:12px; }
.info { display:grid; gap:12px; }
.info-item, .mini {
  border:1px solid var(--line); border-radius:16px; padding:14px; background:var(--panel2);
}
.info-item p, .mini p { margin:6px 0 0; color:var(--muted); line-height:1.5; }
.chart-wrap { overflow:auto; width:100%; }
svg { width:100%; height:auto; min-width:900px; display:block; }
.legend { display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; color:var(--muted); font-size:13px; }
.legend span { display:flex; align-items:center; gap:6px; }
.swatch { width:12px; height:12px; border-radius:3px; display:inline-block; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th,td { padding:10px 9px; border-bottom:1px solid var(--line); text-align:right; vertical-align:top; }
th:first-child, td:first-child, td.text { text-align:left; }
th { color:var(--muted); font-weight:700; }
.table-wrap { overflow:auto; }
.tooltip {
  position:fixed; display:none; pointer-events:none; max-width:340px; z-index:30;
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:12px;
  padding:10px 12px; font-size:13px; line-height:1.45; box-shadow:0 18px 55px rgba(15,23,42,.18);
}
.update-box {
  width:100%; min-height:220px; resize:vertical; border:1px solid var(--line); border-radius:18px;
  background:var(--panel2); color:var(--text); padding:16px; line-height:1.65; font-size:15px; font-family:inherit;
}
.slider-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.slider-card { border:1px solid var(--line); background:var(--panel2); border-radius:16px; padding:14px; }
.slider-head { display:flex; justify-content:space-between; gap:12px; font-weight:700; }
input[type=range] { width:100%; margin-top:10px; accent-color:#2563eb; }
.big-result { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:12px; }
.result-pill { border:1px solid var(--line); border-radius:16px; padding:12px; background:var(--panel2); }
.result-pill b { display:block; font-size:28px; }
.source-list { margin:10px 0 0; padding-left:20px; color:var(--muted); line-height:1.65; }
.source-list a { color:#2563eb; text-decoration:none; }
body[data-theme="dark"] .source-list a { color:#93c5fd; }
footer { max-width:1320px; margin:auto; padding:8px 22px 38px; color:var(--muted); font-size:13px; line-height:1.55; }
@media(max-width:950px) { .header-inner{display:block;} nav{justify-content:flex-start;margin-top:14px;} .kpis,.two-col,.three-col,.slider-grid,.big-result{grid-template-columns:1fr;} }

/* Width and slider overflow fixes */
.card,
.grid > *,
.info-item,
.mini,
.slider-card,
.result-pill {
  min-width: 0;
}

.two-col {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
}

.three-col,
.kpis,
.slider-grid,
.big-result {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.slider-grid {
  align-items: stretch;
}

.slider-card {
  width: 100%;
  overflow: hidden;
}

.slider-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: start;
}

.slider-head span:first-child {
  min-width: 0;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  line-height: 1.35;
}

.slider-head span:last-child {
  min-width: 34px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

input[type=range] {
  display: block;
  width: 100%;
  max-width: 100%;
}

.section-title {
  flex-wrap: wrap;
}

.section-title > div {
  min-width: 0;
}

.section-title button,
.section-title select {
  max-width: 100%;
  white-space: normal;
}

.big-result {
  align-items: stretch;
}

.result-pill {
  width: 100%;
}

@media(max-width: 1150px) {
  .slider-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  }
}

@media(max-width: 700px) {
  .slider-grid,
  .big-result,
  .kpis,
  .two-col,
  .three-col {
    grid-template-columns: 1fr;
  }

  .slider-head {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  nav {
    align-items: stretch;
  }

  nav a,
  nav select {
    max-width: 100%;
  }
}

/* Extra advanced features */
.path-grid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:14px;
}
.path-card {
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel2);
  padding:16px;
  min-width:0;
}
.path-card .big {
  font-size:34px;
  font-weight:850;
  letter-spacing:-.04em;
  margin:4px 0 8px;
}
.path-card p {
  margin:0;
  color:var(--muted);
  line-height:1.5;
}
.gauge-list {
  display:grid;
  gap:14px;
}
.gauge-row {
  display:grid;
  grid-template-columns: minmax(170px, 240px) minmax(0, 1fr) 58px;
  gap:12px;
  align-items:center;
}
.gauge-label {
  font-weight:700;
  overflow-wrap:anywhere;
}
.gauge-track {
  height:16px;
  border-radius:999px;
  background:rgba(148,163,184,.22);
  overflow:hidden;
  border:1px solid var(--line);
}
.gauge-fill {
  height:100%;
  border-radius:999px;
  width:0%;
  transition:width .25s ease;
}
.gauge-value {
  text-align:right;
  font-variant-numeric:tabular-nums;
  color:var(--muted);
}
.mc-controls {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
}
.mc-summary {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
  gap:10px;
  margin:14px 0;
}
.mc-pill {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  padding:12px;
}
.mc-pill b {
  display:block;
  font-size:26px;
  letter-spacing:-.03em;
}
.heatmap-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
  gap:12px;
}
.heat-tile {
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  min-height:96px;
  background:var(--panel2);
}
.heat-tile strong {
  display:block;
  margin-bottom:6px;
}
.heat-tile small {
  color:var(--muted);
  line-height:1.45;
}
.explain-box {
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel2);
  padding:16px;
  line-height:1.6;
  color:var(--muted);
  white-space:pre-wrap;
}
@media(max-width:700px) {
  .gauge-row {
    grid-template-columns: 1fr;
    gap:6px;
  }
  .gauge-value {
    text-align:left;
  }
}

/* Force top KPI cards into one consistent row */
.kpis {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: stretch;
}

.kpis .card,
.kpis .kpi {
  width: 100%;
  min-width: 0;
}

.kpis .kpi .value {
  line-height: 1;
}

.kpis .kpi .label,
.kpis .kpi .sub {
  overflow-wrap: anywhere;
}

@media(max-width: 760px) {
  .kpis {
    grid-template-columns: repeat(4, minmax(150px, 1fr)) !important;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x proximity;
  }

  .kpis .kpi {
    scroll-snap-align: start;
  }

  .kpis .kpi .value {
    font-size: 36px;
  }
}

/* Friendlier Monte Carlo panel */
.mc-help {
  border:1px solid var(--line);
  border-radius:16px;
  background:var(--panel2);
  padding:14px;
  margin:12px 0;
  color:var(--muted);
  line-height:1.55;
}
.mc-summary .mc-pill {
  min-width:0;
}
.mc-pill span {
  display:block;
  color:var(--muted);
  line-height:1.35;
  overflow-wrap:anywhere;
}
.mc-pill b {
  line-height:1.05;
}
#mcChart text {
  user-select:none;
}

#simulator.two-col {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr);
}

#simPills.big-result {
  grid-template-columns: repeat(auto-fit, minmax(135px, 1fr)) !important;
}

#simPills .result-pill {
  min-width: 0;
  width: 100%;
}

#simPills .result-pill span,
#simPills .result-pill b {
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  #simPills.big-result {
    grid-template-columns: repeat(7, minmax(120px, 1fr)) !important;
    overflow-x: auto;
    padding-bottom: 6px;
  }
}

/* Simulated result chart: no left-right scrolling */
#simulator .chart-wrap {
  overflow-x: hidden;
  max-width: 100%;
}

#simChart {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100%;
}

/* Monte Carlo expanded outcome chart */
#montecarlo .chart-wrap {
  overflow-x: hidden;
  max-width: 100%;
}

#mcChart {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100%;
}

#mcChart text {
  user-select: none;
}

.mc-outcome-legend {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
}

.mc-outcome-legend span {
  display:flex;
  align-items:center;
  gap:6px;
}

.mc-outcome-legend i {
  width:11px;
  height:11px;
  border-radius:3px;
  display:inline-block;
}

/* Confidence range chart: no left-right scrolling */
#advanced .card:first-child .chart-wrap {
  overflow-x: hidden;
  max-width: 100%;
}

#rangeChart {
  min-width: 0 !important;
  width: 100% !important;
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: 0;
}

#rangeChart + * {
  margin-top: 0;
}

/* Layout order fix: Confidence range, Updates and Forecast log are full-row cards */
#advanced.grid {
  grid-template-columns: 1fr !important;
}

#updates,
#forecastlog {
  width: 100%;
}

/* Left-hand app menu */
:root { --sidebar-w: 270px; }
.app-shell { display: flex; min-height: 100vh; }
.side-menu {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-w);
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 22px 18px;
  border-right: 1px solid var(--line);
  background: var(--panel);
  box-shadow: 14px 0 35px rgba(15,23,42,.08);
}
body[data-theme="dark"] .side-menu { box-shadow: 18px 0 55px rgba(0,0,0,.28); }
.side-brand {
  display: grid;
  gap: 4px;
  padding: 8px 8px 14px;
  border-bottom: 1px solid var(--line);
}
.side-brand strong { font-size: 18px; letter-spacing: -.02em; }
.side-brand span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.side-section { display: grid; gap: 8px; }
.side-section-title {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 0 8px;
}
.side-menu select { width: 100%; border-radius: 14px; background: var(--panel2); }
.side-nav { display: grid; gap: 8px; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 16px;
  padding: 12px 13px;
  font-weight: 750;
}
.side-link:hover,
.side-link.active { border-color: #2563eb; background: rgba(37,99,235,.10); }
.side-link.active { background:#2563eb; color:#fff; border-color:#1d4ed8; }
.side-link .icon { width: 22px; text-align: center; }

/* Desktop side-menu sizing: page links match the selector width */
@media (min-width: 861px) {
  .side-menu .side-section,
  .side-menu .side-nav,
  .side-menu select,
  .side-menu .side-link {
    width: 100%;
    max-width: 100%;
  }
  .side-menu .side-nav {
    justify-items: stretch;
    align-items: stretch;
  }
  .side-menu .side-link {
    min-width: 0;
    box-sizing: border-box;
  }
  .side-menu .side-link span:not(.icon) {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: normal;
  }
}
.site-content { width: 100%; min-width: 0; margin-left: var(--sidebar-w); }
.site-content header { position: static; }
.site-content .header-inner { max-width: 1320px; }
.site-content header nav { display: none; }
body > main,
body > footer { margin-left: var(--sidebar-w); }
.utility-stubs { display:none !important; }
.page-title { margin:0 0 14px; font-size: clamp(24px,3vw,36px); letter-spacing:-.035em; }
.page-subtitle { margin: -6px 0 16px; color: var(--muted); line-height:1.45; max-width: 920px; }

@media(max-width: 860px) {
  :root { --sidebar-w: 100%; }
  .app-shell { display: block; }
  .side-menu {
    position: sticky;
    top: 0;
    width: 100%;
    max-height: none;
    padding: 12px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .side-brand { padding: 4px 6px 10px; }
  .side-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-content,
  body > main,
  body > footer { margin-left: 0; }
}

/* Simulator page layout - single source of truth
   Edit this section only for Simulator card placement, spacing and height. */
body[data-page="simulator"] {
  min-height: 100vh;
  overflow-y: auto;
  overflow-x: hidden;
}

body[data-page="simulator"] header,
body[data-page="simulator"] footer {
  display: none;
}

body[data-page="simulator"] main {
  max-width: none;
  min-height: 100vh;
  height: auto;
  padding: 10px;
  overflow: visible;
}

body[data-page="simulator"] .sim-screen {
  --sim-row-unit: 215px;
  display: grid;
  grid-template-columns: minmax(280px, .95fr) minmax(0, 1.08fr) minmax(0, 1.08fr);
  grid-template-rows: minmax(500px, auto) repeat(6, var(--sim-row-unit));
  grid-template-areas:
    "controls result  result"
    "gov      mcchart mcprob"
    "gov      mcchart mcprob"
    "path     prob    mc"
    "path     prob    mc"
    "path     prob    explain"
    "path     prob    explain";
  gap: 8px;
  align-items: stretch;
  min-height: calc(100vh - 20px);
  height: auto;
}

body[data-page="simulator"] .sim-column {
  display: contents;
}

body[data-page="simulator"] .sim-screen .card {
  min-width: 0;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  padding: 12px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  box-shadow: 0 8px 22px rgba(15,23,42,.07);
}

body[data-page="simulator"] .sim-screen .card > * {
  min-width: 0;
}

body[data-page="simulator"] .sim-controls-card { grid-area: controls; }
body[data-page="simulator"] .sim-result-card { grid-area: result; }
body[data-page="simulator"] .sim-gov-card { grid-area: gov; }
body[data-page="simulator"] .sim-mc-chart-card { grid-area: mcchart; }
body[data-page="simulator"] .sim-mc-prob-card { grid-area: mcprob; }
body[data-page="simulator"] .sim-mc-controls-card { grid-area: mc; }
body[data-page="simulator"] .sim-explain-card { grid-area: explain; }
body[data-page="simulator"] .sim-path-card { grid-area: path; align-self: stretch; }
body[data-page="simulator"] .sim-prob-card { grid-area: prob; }

body[data-page="simulator"] .sim-screen .section-title {
  margin-bottom: 8px;
  gap: 8px;
  flex: 0 0 auto;
}

body[data-page="simulator"] .sim-screen h2 {
  font-size: 16px;
  line-height: 1.15;
}

body[data-page="simulator"] .sim-screen .small {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.35;
}

/* Scenario simulator */
body[data-page="simulator"] .sim-controls-card .slider-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}
body[data-page="simulator"] .sim-controls-card .slider-card {
  padding: 7px 9px;
  border-radius: 10px;
}
body[data-page="simulator"] .sim-controls-card .slider-head {
  font-size: 11px;
  line-height: 1.15;
}
body[data-page="simulator"] .sim-controls-card input[type=range] { margin-top: 3px; }
body[data-page="simulator"] .sim-controls-card .small { display: none; }

/* Simulated result */
body[data-page="simulator"] .sim-result-card {
  padding: 14px;
  gap: 7px;
}
body[data-page="simulator"] .sim-result-card .section-title { margin-bottom: 4px; }
body[data-page="simulator"] .sim-result-card .big-result {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0 0 2px;
  flex: 0 0 auto;
}
body[data-page="simulator"] .sim-result-card .result-pill {
  padding: 7px 9px;
  border-radius: 10px;
}
body[data-page="simulator"] .sim-result-card .result-pill b {
  font-size: 25px;
  line-height: 1;
}
body[data-page="simulator"] .sim-result-card .result-pill small { line-height: 1.15; }
body[data-page="simulator"] .sim-result-card .chart-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 210px;
  margin: 0;
  overflow: hidden;
}
body[data-page="simulator"] #simChart {
  min-width: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
body[data-page="simulator"] .sim-result-card .info {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 2px;
  flex: 0 0 auto;
}
body[data-page="simulator"] .sim-result-card .info-item {
  padding: 7px 8px;
  border-radius: 10px;
  font-size: 12px;
}
body[data-page="simulator"] .sim-result-card .info-item p {
  margin-top: 2px;
  line-height: 1.3;
}

/* Government formation, path, probability and explanation cards */
body[data-page="simulator"] .sim-gov-card .gov-prediction-body,
body[data-page="simulator"] .sim-mc-controls-card .mc-summary,
body[data-page="simulator"] .sim-explain-card .explain-box,
body[data-page="simulator"] .sim-path-card .path-grid,
body[data-page="simulator"] .sim-prob-card .gauge-list {
  min-height: 0;
  overflow: auto;
}
body[data-page="simulator"] .sim-path-card .path-grid {
  grid-template-columns: 1fr;
  gap: 6px;
}
body[data-page="simulator"] .sim-path-card .path-card {
  padding: 8px;
  border-radius: 10px;
}
body[data-page="simulator"] .sim-path-card .path-card .big {
  font-size: 22px;
  line-height: 1;
  margin: 2px 0 4px;
}
body[data-page="simulator"] .sim-path-card .path-card p {
  font-size: 11px;
  line-height: 1.25;
}
body[data-page="simulator"] .sim-prob-card .gauge-list { gap: 30px; }
body[data-page="simulator"] .sim-prob-card .gauge-row {
  grid-template-columns: minmax(120px, .9fr) minmax(0, 1fr) 38px;
  gap: 7px;
}
body[data-page="simulator"] .sim-prob-card .gauge-label,
body[data-page="simulator"] .sim-prob-card .gauge-value {
  font-size: 11px;
  line-height: 1.2;
}
body[data-page="simulator"] .sim-prob-card .gauge-track { height: 10px; }
body[data-page="simulator"] .sim-explain-card .explain-box {
  flex: 1 1 auto;
  max-height: none;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 12px;
  line-height: 1.4;
}

/* Monte Carlo controls and charts */
body[data-page="simulator"] .sim-mc-controls-card .section-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
}
body[data-page="simulator"] .sim-mc-controls-card .mc-controls {
  gap: 6px;
  justify-content: end;
}
body[data-page="simulator"] .sim-mc-controls-card select,
body[data-page="simulator"] .sim-mc-controls-card button {
  padding: 6px 8px;
  font-size: 11px;
  border-radius: 9px;
}
body[data-page="simulator"] .sim-mc-controls-card .small { display: none; }
body[data-page="simulator"] .sim-mc-controls-card .mc-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 4px 0 0;
  flex: 1 1 auto;
  align-content: start;
}
body[data-page="simulator"] .sim-mc-controls-card .mc-pill {
  padding: 8px;
  border-radius: 10px;
}
body[data-page="simulator"] .sim-mc-controls-card .mc-pill span {
  font-size: 10.5px;
  line-height: 1.2;
}
body[data-page="simulator"] .sim-mc-controls-card .mc-pill b {
  font-size: 18px;
  line-height: 1.05;
}
body[data-page="simulator"] .sim-mc-chart-card .chart-wrap,
body[data-page="simulator"] .sim-mc-prob-card .chart-wrap {
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}
body[data-page="simulator"] .sim-mc-prob-card .small { flex: 0 0 auto; }
body[data-page="simulator"] #mcChart,
body[data-page="simulator"] #mcProbChart {
  min-width: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
body[data-page="simulator"] #mcChart text,
body[data-page="simulator"] #mcProbChart text {
  user-select: none;
}

@media (min-width: 1500px) {
  body[data-page="simulator"] .sim-screen { --sim-row-unit: 225px; }
}

@media (max-width: 1200px) {
  body[data-page="simulator"] main { padding: 10px; }
  body[data-page="simulator"] .sim-screen {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-template-areas:
      "controls"
      "result"
      "gov"
      "mcchart"
      "mcprob"
      "mc"
      "explain"
      "path"
      "prob";
    min-height: 0;
  }
  body[data-page="simulator"] .sim-screen .card {
    height: auto;
    overflow: visible;
  }
  body[data-page="simulator"] .sim-result-card .chart-wrap,
  body[data-page="simulator"] .sim-mc-chart-card .chart-wrap,
  body[data-page="simulator"] .sim-mc-prob-card .chart-wrap {
    height: 300px;
    min-height: 300px;
  }
  body[data-page="simulator"] .sim-controls-card .small,
  body[data-page="simulator"] .sim-mc-controls-card .small {
    display: block;
  }
  body[data-page="simulator"] .sim-gov-card .gov-prediction-body,
  body[data-page="simulator"] .sim-mc-controls-card .mc-summary,
  body[data-page="simulator"] .sim-explain-card .explain-box,
  body[data-page="simulator"] .sim-path-card .path-grid,
  body[data-page="simulator"] .sim-prob-card .gauge-list {
    overflow: visible;
  }
}

@media (max-width: 700px) {
  .side-nav { grid-template-columns: 1fr; }
  body[data-page="simulator"] .sim-result-card .big-result,
  body[data-page="simulator"] .sim-result-card .info,
  body[data-page="simulator"] .sim-mc-controls-card .mc-summary {
    grid-template-columns: 1fr;
  }
  body[data-page="simulator"] .sim-prob-card .gauge-row {
    grid-template-columns: 1fr;
  }
}

/* Daily prediction chart toggle buttons follow chart line colours */
.toggle[data-s="PH"] {
  border-color: var(--ph);
  color: var(--ph);
}

.toggle[data-s="BN"] {
  border-color: var(--bn);
  color: var(--bn);
}

.toggle[data-s="PN"] {
  border-color: var(--pn);
  color: var(--pn);
}

.toggle[data-s="BERSATU"] {
  border-color: var(--bersatu);
  color: var(--bersatu);
}

.toggle[data-s="BERSAMA"] {
  border-color: var(--bersama);
  color: var(--bersama);
}

.toggle[data-s="MUDA"] {
  border-color: var(--muda);
  color: var(--muda);
}

.toggle[data-s="Others"] {
  border-color: var(--ot);
  color: var(--ot);
}

.toggle[data-s="PH"].active {
  background: var(--ph);
  border-color: var(--ph);
  color: #fff;
}

.toggle[data-s="BN"].active {
  background: var(--bn);
  border-color: var(--bn);
  color: #fff;
}

.toggle[data-s="PN"].active {
  background: var(--pn);
  border-color: var(--pn);
  color: #fff;
}

.toggle[data-s="BERSATU"].active {
  background: var(--bersatu);
  border-color: var(--bersatu);
  color: #fff;
}

.toggle[data-s="BERSAMA"].active {
  background: var(--bersama);
  border-color: var(--bersama);
  color: #fff;
}

.toggle[data-s="MUDA"].active {
  background: var(--muda);
  border-color: var(--muda);
  color: #fff;
}

.toggle[data-s="Others"].active {
  background: var(--ot);
  border-color: var(--ot);
  color: #fff;
}

/* Mobile collapsible side menu */
.mobile-menu-toggle,
.mobile-menu-backdrop {
  display: none;
}

@media (max-width: 860px) {
  :root { --sidebar-w: 0px; }

  body {
    padding-top: 0;
  }

  body.menu-open {
    overflow: hidden;
  }

  .mobile-menu-toggle {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 1200;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 9px 13px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: color-mix(in srgb, var(--panel) 94%, transparent);
    color: var(--text);
    box-shadow: 0 14px 34px rgba(15,23,42,.16);
    backdrop-filter: blur(14px);
    font-weight: 850;
  }

  .mobile-menu-toggle .bars {
    position: relative;
    width: 18px;
    height: 14px;
    display: inline-block;
  }

  .mobile-menu-toggle .bars::before,
  .mobile-menu-toggle .bars::after,
  .mobile-menu-toggle .bars span {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    border-radius: 999px;
    background: currentColor;
    transition: transform .22s ease, opacity .22s ease, top .22s ease;
  }

  .mobile-menu-toggle .bars::before { top: 0; }
  .mobile-menu-toggle .bars span { top: 6px; }
  .mobile-menu-toggle .bars::after { top: 12px; }

  body.menu-open .mobile-menu-toggle .bars::before {
    top: 6px;
    transform: rotate(45deg);
  }

  body.menu-open .mobile-menu-toggle .bars span {
    opacity: 0;
  }

  body.menu-open .mobile-menu-toggle .bars::after {
    top: 6px;
    transform: rotate(-45deg);
  }

  .mobile-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: block;
    background: rgba(2,6,23,.48);
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  body.menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .side-menu {
    position: fixed;
    z-index: 1100;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    width: min(84vw, 330px);
    max-width: 330px;
    height: 100dvh;
    max-height: 100dvh;
    padding: 72px 16px 18px;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    border-radius: 0 24px 24px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    pointer-events: none;
    box-shadow: 24px 0 70px rgba(15,23,42,.22);
    transform: translateX(-108%);
    transition: transform .24s ease;
  }

  body.menu-open .side-menu {
    pointer-events: auto;
    transform: translateX(0);
  }

  .side-brand {
    padding: 4px 6px 14px;
  }

  .side-nav {
    grid-template-columns: 1fr;
  }

  .side-link {
    min-height: 46px;
  }

  .site-content,
  body > main,
  body > footer {
    margin-left: 0;
  }

  main,
  .vc-main {
    padding-top: 74px;
  }
}

/* WHAT-IF cases page */
.whatif-main .page-subtitle,
.page-subtitle {
  margin: 10px 0 0;
  color: var(--muted);
  line-height: 1.55;
  max-width: 880px;
}
.whatif-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
}
.eyebrow {
  margin: 0 0 8px;
  color: var(--muted);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: 12px;
}
.whatif-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.whatif-kpis {
  margin-top: 18px;
}
.whatif-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.whatif-control-grid label {
  display: grid;
  gap: 8px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.whatif-control-grid select {
  width: 100%;
  border-radius: 14px;
}
.direct-answer {
  margin-top: 16px;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 18px;
  padding: 16px;
  line-height: 1.6;
}
.direct-answer span {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 850;
}
.direct-answer h3 {
  margin: 6px 0;
}
.direct-answer p {
  color: var(--muted);
  margin: 0;
}
.accuracy-meter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.accuracy-track {
  height: 18px;
  border-radius: 999px;
  background: rgba(148,163,184,.22);
  overflow: hidden;
  border: 1px solid var(--line);
}
.accuracy-track span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ot), var(--pn));
  transition: width .25s ease;
}
.signal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
  margin-top: 14px;
}
.signal-tile {
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 16px;
  padding: 12px;
}
.signal-tile span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.signal-tile strong {
  display: block;
  margin-top: 4px;
  font-size: 22px;
}
.whatif-filter-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.case-filter.active {
  background: #2563eb;
  border-color: #1d4ed8;
  color: #fff;
}
.cases-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.case-card {
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--panel2);
  padding: 16px;
  border-top-width: 6px;
  min-width: 0;
}
.case-card.high { border-top-color: #ef4444; }
.case-card.medium { border-top-color: #f59e0b; }
.case-card.low { border-top-color: #22c55e; }
.case-card h3 {
  margin: 10px 0 8px;
  line-height: 1.25;
}
.case-card p {
  color: var(--muted);
  line-height: 1.58;
  margin: 0;
}
.case-top,
.case-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
}
.case-tag,
.case-score {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}
.case-meta {
  margin-top: 14px;
  color: var(--muted);
  font-size: 12px;
}
.whatif-source-list {
  display: grid;
  gap: 10px;
}
.source-row {
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 16px;
  padding: 12px 14px;
}
.source-row a {
  color: #2563eb;
  text-decoration: none;
  font-weight: 800;
}
body[data-theme="dark"] .source-row a { color: #93c5fd; }
.source-row small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}
@media(max-width: 760px) {
  .whatif-hero,
  .accuracy-meter {
    display: block;
  }
  .whatif-actions {
    justify-content: flex-start;
    margin-top: 14px;
  }
  .whatif-control-grid {
    grid-template-columns: 1fr;
  }
  .accuracy-meter strong {
    display: block;
    margin-top: 10px;
  }
}

.whatif-search-row {
  margin: 14px 0 16px;
  display: grid;
  gap: 8px;
}
.whatif-search-label {
  color: var(--muted);
  font-size: 13px;
  font-weight: 850;
}
.whatif-search-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
}
.whatif-search-box input[type="search"] {
  width: 100%;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: var(--panel2);
  color: var(--text);
  padding: 11px 13px;
  font: inherit;
}
.whatif-search-box input[type="search"]::placeholder {
  color: var(--muted);
}
.keyword-chip-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.keyword-chip {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
mark.case-hit {
  background: rgba(250, 204, 21, .35);
  color: inherit;
  padding: 0 2px;
  border-radius: 4px;
}
@media(max-width: 760px) {
  .whatif-search-box {
    grid-template-columns: 1fr;
  }
}

/* Constituencies & odds page */
.co-main { max-width:1320px; margin:auto; padding:22px; }
.co-hero { display:flex; justify-content:space-between; align-items:flex-start; gap:18px; }
.co-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.co-date-value { font-size:30px !important; letter-spacing:-.03em; }
.co-pill-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.co-forecast-pill { border:1px solid var(--line); background:var(--panel2); border-radius:16px; padding:12px; }
.co-forecast-pill b { display:block; font-size:28px; line-height:1; margin-top:4px; }
.co-status-text { color:var(--muted); line-height:1.65; margin-top:0; }
.co-source-links { display:grid; gap:8px; }
.co-source-links a { color:#2563eb; text-decoration:none; line-height:1.4; }
body[data-theme="dark"] .co-source-links a { color:#93c5fd; }
.co-filter-row { display:flex; flex-wrap:wrap; gap:8px; justify-content:flex-end; }
.co-filter.active { background:#2563eb; color:#fff; border-color:#1d4ed8; }
.co-search-row { display:grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 2fr); gap:12px; align-items:end; margin-bottom:12px; }
.co-search-label { color:var(--muted); font-size:13px; font-weight:700; }
.co-search-box { display:flex; gap:8px; }
.co-search-box input { width:100%; color:var(--text); background:var(--panel2); border:1px solid var(--line); border-radius:14px; padding:10px 12px; font:inherit; }
.co-table-wrap { border:1px solid var(--line); border-radius:18px; overflow:auto; }
.co-table th { white-space:nowrap; }
.co-table td { text-align:left; min-width:120px; }
.co-table .seat-cell { min-width:170px; }
.co-table .odds-cell { min-width:250px; }
.co-seat-title { font-weight:850; }
.co-seat-code { color:var(--muted); font-size:12px; margin-bottom:3px; }
.co-candidate-list { display:flex; flex-direction:column; gap:6px; }
.co-candidate-pill { border:1px solid color-mix(in srgb, var(--candidate-color, var(--line)) 48%, var(--line)); border-left:7px solid var(--candidate-color, var(--line)); background:linear-gradient(90deg, color-mix(in srgb, var(--candidate-color, var(--panel2)) 14%, var(--panel2)), var(--panel2) 58%); border-radius:12px; padding:8px 10px; line-height:1.3; }
.co-candidate-pill strong { display:inline-block; min-width:58px; color:var(--candidate-color, var(--text)); }
.co-candidate-status { display:block; color:var(--muted); font-size:12px; margin-top:3px; }
.co-odds-list { display:grid; gap:5px; }
.co-odds-row { display:grid; grid-template-columns:82px 1fr 42px; gap:8px; align-items:center; font-size:13px; }
.co-odds-track { height:9px; border-radius:999px; background:var(--panel2); border:1px solid var(--line); overflow:hidden; }
.co-odds-bar { height:100%; border-radius:999px; background:var(--ot); }
.co-odds-bar.PH { background:var(--ph); }
.co-odds-bar.BN { background:var(--bn); }
.co-odds-bar.PN { background:var(--pn); }
.co-odds-bar.BERSATU { background:#15803d; }
.co-odds-bar.Others { background:var(--ot); }
.co-odds-bar.MUDA { background:#ec4899; }
.co-odds-bar.BERSAMA { background:#f59e0b; }
.co-prediction { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; border:1px solid var(--line); background:var(--panel2); font-weight:850; color:#fff; box-shadow:0 8px 18px rgba(15,23,42,.12); }
.co-prediction.PH { background:var(--ph); border-color:var(--ph); }
.co-prediction.BN { background:var(--bn); border-color:var(--bn); }
.co-prediction.PN { background:var(--pn); border-color:var(--pn); }
.co-prediction.BERSATU { background:#15803d; border-color:#15803d; }
.co-prediction.BERSAMA { background:#f59e0b; border-color:#f59e0b; }
.co-prediction.MUDA { background:#ec4899; border-color:#ec4899; }
.co-prediction.Others { background:var(--ot); border-color:var(--ot); }
.co-note { color:var(--muted); font-size:12px; line-height:1.45; margin-top:7px; }
@media(max-width: 850px) {
  .co-hero { display:block; }
  .co-actions { justify-content:flex-start; margin-top:14px; }
  .co-search-row { grid-template-columns:1fr; }
  .co-search-box { flex-direction:column; }
}

/* Constituencies page layout/timeline fixes */
.co-main {
  max-width: 1320px;
  margin-left: var(--sidebar-w);
  margin-right: auto;
  padding: 22px;
  min-width: 0;
}
.co-timeline-card { overflow: hidden; }
.co-timeline-wrap { display: grid; gap: 18px; margin-top: 18px; }
.co-timeline-axis { position: relative; height: 38px; padding: 17px 0 0; }
.co-timeline-track {
  position: relative;
  height: 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel2);
  overflow: hidden;
}
.co-timeline-progress {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bn), var(--ph));
  transition: width .35s ease;
}
.co-timeline-today {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: inline-grid;
  justify-items: center;
  gap: 4px;
  color: var(--text);
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
  z-index: 2;
}
.co-timeline-today::after {
  content: "";
  width: 2px;
  height: 28px;
  border-radius: 999px;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel) 80%, transparent);
}
.co-timeline-milestones {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(130px, 1fr));
  gap: 10px;
}
.co-timeline-item {
  position: relative;
  display: grid;
  gap: 5px;
  align-content: start;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel2);
  padding: 14px 12px 12px;
}
.co-timeline-dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: var(--ot);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--panel) 88%, transparent);
}
.co-timeline-item.done .co-timeline-dot { background: var(--bn); }
.co-timeline-item.current { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.co-timeline-item.current .co-timeline-dot { background: #2563eb; }
.co-timeline-item time { color: var(--muted); font-size: 12px; font-weight: 800; }
.co-timeline-item strong { font-size: 14px; line-height: 1.25; }
.co-timeline-item p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.45; }
@media(max-width: 1100px) {
  .co-timeline-milestones { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media(max-width: 860px) {
  .co-main { margin-left: 0; padding-top: 74px; }
}
@media(max-width: 640px) {
  .co-timeline-milestones { grid-template-columns: 1fr; }
  .co-timeline-axis { height: 34px; }
}
.co-timeline-points {
  position: absolute;
  left: 0;
  right: 0;
  top: 17px;
  height: 10px;
  pointer-events: none;
}
.co-axis-point {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: var(--panel);
  border: 3px solid #2563eb;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--panel) 80%, transparent);
}

/* Candidate profile/party links on constituency table */
.co-candidate-name { font-weight: 850; color: var(--text); text-decoration: none; }
.co-candidate-name:hover { text-decoration: underline; }
.co-candidate-name.pending { color: var(--muted); }
.co-party-link { color: inherit; text-decoration: none; font-weight: 800; }
.co-party-link:hover { text-decoration: underline; }
.co-candidate-status em { color: var(--muted); font-style: normal; opacity: .85; }
.co-candidate-links { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.co-candidate-links a { border:1px solid color-mix(in srgb, var(--candidate-color, #2563eb) 42%, var(--line)); border-radius:999px; padding:3px 7px; font-size:11px; font-weight:750; text-decoration:none; background:var(--panel); color:#2563eb; }
body[data-theme="dark"] .co-candidate-links a { color:#93c5fd; }
.co-candidate-links a:hover { text-decoration: underline; }

/* Prominent live-refresh status banner shared by WHAT-IF and Constituencies pages */
.refresh-panel {
  margin: 16px 0 24px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  border-width: 2px;
  position: sticky;
  top: 12px;
  z-index: 6;
}
.refresh-panel-icon {
  width: 58px;
  height: 58px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 28px;
  color: #fff;
  background: #2563eb;
  box-shadow: 0 10px 24px rgba(37,99,235,.25);
}
.refresh-panel-copy {
  min-width: 0;
}
.refresh-panel strong {
  display: block;
  font-size: clamp(17px, 2vw, 22px);
  letter-spacing: -.02em;
}
.refresh-panel p {
  margin: 5px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.refresh-panel small {
  display: block;
  margin-top: 7px;
  color: var(--muted);
  font-weight: 800;
}
.refresh-panel.is-loading,
.refresh-panel.is-updating {
  border-color: #2563eb;
  background: color-mix(in srgb, var(--panel) 88%, #2563eb 12%);
}
.refresh-panel.is-updating .refresh-panel-icon,
.refresh-panel.is-loading .refresh-panel-icon {
  animation: refreshSpin 1s linear infinite;
}
.refresh-panel.is-success {
  border-color: #16a34a;
  background: color-mix(in srgb, var(--panel) 88%, #16a34a 12%);
}
.refresh-panel.is-success .refresh-panel-icon { background: #16a34a; animation: none; }
.refresh-panel.is-warning {
  border-color: #d97706;
  background: color-mix(in srgb, var(--panel) 88%, #d97706 12%);
}
.refresh-panel.is-warning .refresh-panel-icon { background: #d97706; animation: none; }
.refresh-panel.is-error {
  border-color: #dc2626;
  background: color-mix(in srgb, var(--panel) 88%, #dc2626 12%);
}
.refresh-panel.is-error .refresh-panel-icon { background: #dc2626; animation: none; }
@keyframes refreshSpin {
  to { transform: rotate(360deg); }
}
@media(max-width: 760px) {
  .refresh-panel {
    position: static;
    grid-template-columns: 1fr;
  }
  .refresh-panel-icon {
    width: 52px;
    height: 52px;
  }
}
button:disabled {
  opacity: .62;
  cursor: wait;
}

.co-candidate-pill.filter-match { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.16); background:rgba(37,99,235,.06); }
.co-candidate-pill.filter-dim { opacity:.45; }
body[data-theme="dark"] .co-candidate-pill.filter-match { border-color:#93c5fd; box-shadow:0 0 0 2px rgba(147,197,253,.18); background:rgba(147,197,253,.08); }

/* Candidate-name click behaviour: expand profile details in-page */
.co-candidate-toggle {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: #2563eb;
  text-align: left;
}
body[data-theme="dark"] .co-candidate-toggle { color: #93c5fd; }
.co-candidate-toggle:hover,
.co-candidate-toggle:focus-visible { text-decoration: underline; outline: none; }
.co-candidate-toggle:focus-visible { box-shadow: 0 0 0 3px rgba(37,99,235,.22); border-radius: 6px; }
.co-candidate-hint {
  display: inline-block;
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.co-candidate-detail {
  margin-top: 8px;
  border-top: 1px solid var(--line);
  padding-top: 8px;
  color: var(--muted);
  font-size: 12px;
}
.co-candidate-pill.is-open {
  border-color: #2563eb;
  box-shadow: 0 0 0 2px rgba(37,99,235,.12);
}
body[data-theme="dark"] .co-candidate-pill.is-open { border-color: #93c5fd; }
.co-candidate-detail-title {
  color: var(--text);
  font-weight: 850;
  margin-bottom: 6px;
}
.co-candidate-detail-grid {
  display: grid;
  grid-template-columns: minmax(74px, auto) minmax(0, 1fr);
  gap: 6px 10px;
  align-items: start;
}
.co-candidate-detail-grid span { font-weight: 700; }
.co-candidate-detail-grid b {
  color: var(--text);
  font-weight: 750;
  min-width: 0;
}
.co-candidate-detail-grid em {
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}
.co-candidate-detail p { margin: 8px 0 0; }
.co-candidate-detail .co-candidate-links { display: inline-flex; margin-top: 0; }

/* Keep expanded candidate details inside the candidate card boundary */
.co-candidate-pill,
.co-candidate-detail,
.co-candidate-detail-grid,
.co-candidate-detail-grid b,
.co-candidate-detail-grid em,
.co-candidate-status,
.co-candidate-links,
.co-candidate-links a {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
.co-candidate-pill {
  overflow: hidden;
}
.co-candidate-detail {
  overflow: hidden;
}
.co-candidate-detail-grid {
  width: 100%;
}
.co-candidate-detail-grid b,
.co-candidate-detail-grid em,
.co-candidate-status {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.co-candidate-detail .co-candidate-links {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}
.co-candidate-links a {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@media(max-width: 760px) {
  .co-candidate-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Reliable native candidate details panels: prevent missing details and keep content contained */
.co-candidate-head {
  display: grid;
  grid-template-columns: minmax(58px, auto) minmax(0, 1fr);
  gap: 6px;
  align-items: start;
  min-width: 0;
}
.co-candidate-profile {
  display: block;
  min-width: 0;
  max-width: 100%;
}
.co-candidate-profile > summary {
  list-style: none;
  display: inline;
  min-width: 0;
  max-width: 100%;
}
.co-candidate-profile > summary::-webkit-details-marker { display: none; }
.co-candidate-profile > summary::after {
  content: ' ⌄';
  font-size: 11px;
  color: var(--muted);
}
.co-candidate-profile[open] > summary::after { content: ' ⌃'; }
.co-candidate-profile[open] .co-candidate-detail { display: block; }
.co-candidate-profile .co-candidate-detail {
  display: block;
  width: 100%;
  clear: both;
}
.co-candidate-pill .co-candidate-status {
  display: block;
  margin-top: 4px;
}
@media(max-width: 760px) {
  .co-candidate-head { grid-template-columns: 1fr; }
}

/* 2026-06-25: Mobile card groups should wrap instead of scrolling sideways */
@media (max-width: 760px) {
  .kpis,
  .big-result,
  #simPills.big-result,
  body[data-page="simulator"] .sim-result-card .big-result,
  .mc-summary,
  body[data-page="simulator"] .sim-mc-controls-card .mc-summary {
    grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)) !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    scroll-snap-type: none !important;
    padding-bottom: 0 !important;
  }

  .kpis .kpi,
  .big-result .result-pill,
  #simPills .result-pill,
  body[data-page="simulator"] .sim-result-card .result-pill,
  .mc-summary .mc-pill,
  body[data-page="simulator"] .sim-mc-controls-card .mc-pill {
    scroll-snap-align: unset !important;
    min-width: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 430px) {
  .kpis,
  .big-result,
  #simPills.big-result,
  body[data-page="simulator"] .sim-result-card .big-result,
  .mc-summary,
  body[data-page="simulator"] .sim-mc-controls-card .mc-summary {
    grid-template-columns: 1fr !important;
  }
}

/* 2026-06-26: Most probable government formation prediction card */
.gov-prediction-card {
  overflow: hidden;
}
.gov-prediction-body {
  display: grid;
  gap: 14px;
}
.gov-route-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: start;
}
.gov-route-title {
  margin: 0;
  font-size: clamp(22px, 3vw, 34px);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.08;
}
.gov-route-sub {
  margin: 7px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.gov-confidence {
  display: inline-grid;
  place-items: center;
  min-width: 112px;
  padding: 12px 14px;
  border-radius: 18px;
  background: var(--panel2);
  border: 1px solid var(--line);
  text-align: center;
}
.gov-confidence strong {
  font-size: 28px;
  line-height: 1;
}
.gov-confidence span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  margin-top: 4px;
}
.gov-route-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.gov-metric {
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 16px;
  padding: 12px;
  min-width: 0;
}
.gov-metric span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}
.gov-metric b {
  display: block;
  margin-top: 5px;
  font-size: 22px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.gov-reasons {
  margin: 0;
  padding-left: 19px;
  color: var(--muted);
  line-height: 1.55;
}
.gov-reasons li + li { margin-top: 4px; }
.gov-caveat {
  margin: 0;
  color: var(--muted);
  background: var(--panel2);
  border: 1px dashed var(--line);
  border-radius: 16px;
  padding: 12px 14px;
  line-height: 1.55;
}
body[data-page="simulator"] .sim-gov-card { grid-area: gov; }
body[data-page="simulator"] .sim-gov-card .section-title { margin-bottom: 8px; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-route-title { font-size: 17px; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-route-sub,
body[data-page="simulator"] .gov-prediction-card--compact .gov-reasons,
body[data-page="simulator"] .gov-prediction-card--compact .gov-caveat { font-size: 11px; line-height: 1.35; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-confidence { min-width: 82px; padding: 8px; border-radius: 12px; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-confidence strong { font-size: 20px; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-route-grid { grid-template-columns: 1fr; gap: 6px; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-metric { padding: 8px; border-radius: 10px; }
body[data-page="simulator"] .gov-prediction-card--compact .gov-metric b { font-size: 15px; }

@media(max-width: 760px) {
  .gov-route-head { grid-template-columns: 1fr; }
  .gov-confidence { justify-self: start; }
  .gov-route-grid { grid-template-columns: 1fr; }
}

/* 2026-06-26: political-sentiment explanation row for government card */
.gov-metric--wide {
  grid-column: 1 / -1;
}
.gov-metric--wide b {
  font-size: 16px;
  line-height: 1.45;
}

/* 2026-06-26: shared update-state visibility and strict parent-boundary containment */
main,
section,
.card,
.grid,
.grid > *,
.section,
.section-title,
.info,
.info-item,
.mini,
.kpi,
.result-pill,
.slider-card,
.gov-prediction-card,
.gov-prediction-body,
.gov-route-head,
.gov-route-grid,
.gov-metric,
.table-wrap,
.chart-wrap,
.co-seat-card,
.co-candidate-pill,
.wi-case,
.vc-panel,
.vc-chart-card,
.vc-start-card,
.vc-question-card,
.vc-strategy-card,
.vc-data-status {
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

.card,
.info-item,
.mini,
.kpi,
.result-pill,
.slider-card,
.gov-prediction-card,
.gov-metric,
.co-seat-card,
.co-candidate-pill,
.wi-case,
.vc-panel,
.vc-chart-card,
.vc-start-card,
.vc-question-card,
.vc-strategy-card,
.vc-data-status {
  overflow: hidden;
}

.card > *,
.info-item > *,
.mini > *,
.kpi > *,
.result-pill > *,
.slider-card > *,
.gov-prediction-card > *,
.gov-metric > *,
.co-seat-card > *,
.co-candidate-pill > *,
.wi-case > *,
.vc-panel > *,
.vc-chart-card > *,
.vc-start-card > *,
.vc-question-card > *,
.vc-strategy-card > *,
.vc-data-status > * {
  min-width: 0;
  max-width: 100%;
}

p,
small,
strong,
b,
span,
label,
li,
td,
th,
a,
.badge,
button,
select,
textarea,
input,
.gov-route-title,
.gov-route-sub,
.gov-reasons,
.gov-caveat,
.co-candidate-detail,
.co-candidate-detail-grid,
.co-candidate-links,
.co-candidate-links a,
.source-list,
.update-box {
  overflow-wrap: anywhere;
  word-break: normal;
}

img,
canvas,
video,
iframe {
  max-width: 100%;
  height: auto;
}

svg {
  box-sizing: border-box;
}

.chart-wrap,
.table-wrap {
  max-width: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

.section-title > div,
.section-title h2,
.section-title .badge,
.section-title button,
.section-title select,
.mc-controls,
.filter-row,
.co-filter-row,
.wi-filter-row {
  min-width: 0;
  max-width: 100%;
}

.section-title button,
.mc-controls button,
.mc-controls select,
.co-filter-row button,
.wi-filter-row button,
.filter-row button {
  white-space: normal;
}

.refresh-panel.auto-refresh-panel {
  margin-top: 0;
  margin-bottom: 24px;
}

.refresh-panel.is-collapsed {
  position: fixed;
  top: 14px;
  right: 14px;
  width: min(320px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  margin: 0;
  padding: 10px 12px;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  border-width: 1px;
  border-radius: 16px;
  box-shadow: 0 18px 50px rgba(15,23,42,.22);
  z-index: 90;
}

.refresh-panel.is-collapsed .refresh-panel-icon {
  width: 34px;
  height: 34px;
  font-size: 17px;
  box-shadow: none;
}

.refresh-panel.is-collapsed strong {
  font-size: 12.5px;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.refresh-panel.is-collapsed p {
  display: none;
}

.refresh-panel.is-collapsed small {
  margin-top: 2px;
  font-size: 10.5px;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.refresh-panel.is-collapsed.is-loading,
.refresh-panel.is-collapsed.is-updating {
  position: sticky;
  top: 12px;
  right: auto;
  width: auto;
  max-width: 100%;
  margin: 16px 0 24px;
  padding: 20px;
  grid-template-columns: auto minmax(0, 1fr);
  border-width: 2px;
  border-radius: 22px;
}

.refresh-panel.is-collapsed.is-loading .refresh-panel-icon,
.refresh-panel.is-collapsed.is-updating .refresh-panel-icon {
  width: 58px;
  height: 58px;
}

.refresh-panel.is-collapsed.is-loading strong,
.refresh-panel.is-collapsed.is-updating strong {
  font-size: clamp(17px, 2vw, 22px);
  white-space: normal;
  overflow: visible;
}

.refresh-panel.is-collapsed.is-loading p,
.refresh-panel.is-collapsed.is-updating p {
  display: block;
}

.refresh-panel.is-collapsed.is-loading small,
.refresh-panel.is-collapsed.is-updating small {
  white-space: normal;
  overflow: visible;
  font-size: inherit;
}

@media(max-width: 760px) {
  .refresh-panel.is-collapsed {
    top: 10px;
    right: 10px;
    width: min(300px, calc(100vw - 20px));
  }
  .refresh-panel.is-collapsed.is-loading,
  .refresh-panel.is-collapsed.is-updating {
    position: static;
    grid-template-columns: 1fr;
    margin: 16px 0 24px;
  }
}

/* 2026-06-26: enhanced government-formation political scenario scorecard */
.gov-score-breakdown,
.gov-route-scorecard {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  min-width: 0;
}
.gov-score-breakdown > div,
.gov-route-score {
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 14px;
  padding: 10px 12px;
  overflow-wrap: anywhere;
}
.gov-score-breakdown span,
.gov-route-score span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}
.gov-score-breakdown b,
.gov-route-score b {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.15;
}
.gov-route-score.active {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 18%, transparent) inset;
}
.gov-factor-list {
  display: grid;
  gap: 8px;
  min-width: 0;
  color: var(--muted);
  line-height: 1.45;
}
.gov-factor-list > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}
.gov-factor-chip {
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 12px;
  line-height: 1.25;
  overflow-wrap: anywhere;
  white-space: normal;
}
.gov-factor-chip.pos { border-color: color-mix(in srgb, var(--good, #16a34a) 35%, var(--line)); }
.gov-factor-chip.neg { border-color: color-mix(in srgb, var(--bad, #ef4444) 35%, var(--line)); }
body[data-page="simulator"] .gov-score-breakdown,
body[data-page="simulator"] .gov-route-scorecard { grid-template-columns: 1fr 1fr; gap: 6px; }
body[data-page="simulator"] .gov-score-breakdown > div,
body[data-page="simulator"] .gov-route-score { padding: 8px; border-radius: 10px; }
body[data-page="simulator"] .gov-score-breakdown b,
body[data-page="simulator"] .gov-route-score b { font-size: 14px; }
body[data-page="simulator"] .gov-factor-chip { font-size: 10.5px; padding: 5px 7px; }
@media (max-width: 760px) {
  .gov-score-breakdown,
  .gov-route-scorecard { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 430px) {
  .gov-score-breakdown,
  .gov-route-scorecard { grid-template-columns: 1fr; }
}

/* Dynamic party/entity resolver */
.entity-resolver-card {
  overflow: hidden;
  contain: layout paint;
}
.entity-title-row {
  align-items: flex-start;
  gap: 1rem;
}
.entity-title-row p {
  margin: .25rem 0 0;
  color: var(--muted);
  max-width: 78ch;
}
.entity-split-row {
  margin: .9rem 0;
  padding: .85rem;
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 16px;
  background: rgba(148, 163, 184, .08);
  min-width: 0;
  overflow: hidden;
}
.entity-split-row > strong {
  display: block;
  margin-bottom: .55rem;
}
.entity-split-row > div,
.entity-grid,
.entity-chip-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  min-width: 0;
}
.entity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  align-items: stretch;
  margin-top: 1rem;
}
.entity-chip,
.entity-split-pill,
.entity-formation-pill {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.entity-split-pill,
.entity-formation-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, .28);
  background: rgba(255,255,255,.06);
  font-size: .86rem;
}
.entity-split-pill.ph { border-color: rgba(214,39,40,.45); }
.entity-split-pill.bn { border-color: rgba(31,119,180,.45); }
.entity-split-pill.pn { border-color: rgba(44,160,44,.45); }
.entity-split-pill.ot { border-color: rgba(100,116,139,.45); }
.entity-chip {
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  padding: .9rem;
  background: rgba(15, 23, 42, .03);
  overflow: hidden;
}
body[data-theme="dark"] .entity-chip {
  background: rgba(255,255,255,.04);
}
.entity-chip.is-promoted { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, .24); }
.entity-chip.ph { border-top: 4px solid var(--ph); }
.entity-chip.bn { border-top: 4px solid var(--bn); }
.entity-chip.pn { border-top: 4px solid var(--pn); }
.entity-chip.ot { border-top: 4px solid var(--ot); }
.entity-chip-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: .75rem;
  min-width: 0;
}
.entity-chip-head strong,
.entity-chip-head span {
  overflow-wrap: anywhere;
}
.entity-chip-head span {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: .18rem .5rem;
  font-size: .72rem;
  background: rgba(245, 158, 11, .16);
  color: #92400e;
}
body[data-theme="dark"] .entity-chip-head span {
  color: #fde68a;
}
.entity-chip-metrics {
  margin: .65rem 0;
}
.entity-chip-metrics span {
  flex: 1 1 105px;
  padding: .42rem .5rem;
  border-radius: 12px;
  background: rgba(148, 163, 184, .10);
  font-size: .78rem;
  line-height: 1.3;
}
.entity-chip p,
.entity-caveat {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.entity-caveat {
  margin-top: .85rem;
}
@media (max-width: 720px) {
  .entity-grid {
    grid-template-columns: 1fr;
  }
  .entity-title-row {
    display: block;
  }
  .entity-title-row .badge {
    margin-top: .65rem;
    display: inline-flex;
  }
  .entity-chip-head {
    flex-direction: column;
  }
}

/* 2026-06-26: table/header and scorecard unit clarity fixes */
#logTable thead th:first-child {
  white-space: nowrap;
  min-width: 4.5rem;
}
#logTable tbody td:first-child {
  white-space: normal;
  word-break: normal;
  overflow-wrap: normal;
}
.gov-score-breakdown b {
  font-variant-numeric: tabular-nums;
}
.entity-formation-summary {
  display: block;
}

/* Blank-load recovery guard: keep static content visible if a late script recovers. */
body.app-error main { display: block; }
#appErrorNotice { margin: 0 0 18px; }
body:not(.app-ready) main { opacity: 1; }


/* Constituency interactive map */
.co-map-card { overflow: hidden; }
.co-map-title-row { align-items: flex-start; gap: 12px; }
.co-map-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; min-width: 0; }
.co-map-actions button { min-height: 34px; }
.co-map-tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 10px 0 14px; }
.co-map-tools label { font-size: .82rem; color: var(--muted); font-weight: 800; }
.co-map-tools select { min-width: min(260px, 100%); max-width: 100%; }
.co-map-layout { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: 14px; align-items: stretch; min-width: 0; }
.co-map-canvas-wrap { border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.055); padding: 12px; min-width: 0; max-width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; }
.co-seat-map { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; min-height: 520px; max-height: 760px; aspect-ratio: 1.58 / 1; }
.co-map-bg { fill: rgba(15,23,42,.08); }
body[data-theme="light"] .co-map-bg { fill: rgba(15,23,42,.025); }
.co-map-johor-outline { fill: rgba(148,163,184,.10); stroke: rgba(255,255,255,.55); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
body[data-theme="light"] .co-map-johor-outline { fill: rgba(37,99,235,.035); stroke: rgba(15,23,42,.25); }
.co-map-district-label { fill: rgba(226,232,240,.20); font-weight: 950; font-size: 26px; letter-spacing: .05em; pointer-events: none; }
.co-map-neighbour-label { fill: rgba(226,232,240,.34); font-family: Georgia, serif; font-size: 26px; pointer-events: none; }
body[data-theme="light"] .co-map-district-label { fill: rgba(15,23,42,.16); }
body[data-theme="light"] .co-map-neighbour-label { fill: rgba(15,23,42,.38); }
.co-map-boundary-seat path { stroke-linejoin: round; }
.co-map-seat polygon { stroke-linejoin: round; }
.co-map-dot-seat circle { stroke-width: 1.6; }
.co-map-hemi-total { fill: var(--text); font-size: 54px; font-weight: 950; pointer-events: none; }

.co-map-seat { cursor: pointer; outline: none; }
.co-map-seat rect, .co-map-seat path, .co-map-seat polygon, .co-map-seat circle { stroke: rgba(255,255,255,.42); stroke-width: 1.2; transition: transform .16s ease, filter .16s ease, opacity .16s ease, stroke-width .16s ease; vector-effect: non-scaling-stroke; }
body[data-theme="light"] .co-map-seat rect, body[data-theme="light"] .co-map-seat path, body[data-theme="light"] .co-map-seat polygon, body[data-theme="light"] .co-map-seat circle { stroke: rgba(15,23,42,.22); }
.co-map-seat:hover rect, .co-map-seat:hover path, .co-map-seat:hover polygon, .co-map-seat:hover circle, .co-map-seat:focus rect, .co-map-seat:focus path, .co-map-seat:focus polygon, .co-map-seat:focus circle { filter: brightness(1.12); stroke-width: 2.3; }
.co-map-seat.is-selected rect, .co-map-seat.is-selected path, .co-map-seat.is-selected polygon, .co-map-seat.is-selected circle { stroke: #fff; stroke-width: 3; filter: brightness(1.18); }
body[data-theme="light"] .co-map-seat.is-selected rect, body[data-theme="light"] .co-map-seat.is-selected path, body[data-theme="light"] .co-map-seat.is-selected polygon, body[data-theme="light"] .co-map-seat.is-selected circle { stroke: #111827; }
.co-map-ph rect, .co-map-ph path, .co-map-ph polygon, .co-map-ph circle, .co-map-ph i { fill: #dc2626; background: #dc2626; }
.co-map-bn rect, .co-map-bn path, .co-map-bn polygon, .co-map-bn circle, .co-map-bn i { fill: #2563eb; background: #2563eb; }
.co-map-pn rect, .co-map-pn path, .co-map-pn polygon, .co-map-pn circle, .co-map-pn i { fill: #16a34a; background: #16a34a; }
.co-map-bersatu rect, .co-map-bersatu path, .co-map-bersatu polygon, .co-map-bersatu circle, .co-map-bersatu i { fill: #15803d; background: #15803d; }
.co-map-others rect, .co-map-others path, .co-map-others polygon, .co-map-others circle, .co-map-others i { fill: #64748b; background: #64748b; }
.co-map-muda, .co-map-muda rect, .co-map-muda path, .co-map-muda polygon, .co-map-muda circle, .co-map-muda i { fill:#ec4899; background:#ec4899; }
.co-map-bersama, .co-map-bersama rect, .co-map-bersama path, .co-map-bersama polygon, .co-map-bersama circle, .co-map-bersama i { fill:#f59e0b; background:#f59e0b; }
.co-map-seat text { pointer-events: none; fill: #fff; font-weight: 900; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.co-map-code { font-size: 12px; letter-spacing: .02em; }
.co-map-boundary-seat .co-map-code { font-size: 9px; opacity: .94; }
.co-map-name { font-size: 8px; }
.co-map-legend { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-top: 10px; font-size: .82rem; color: var(--muted); user-select: none; }
.co-map-legend-item { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; border: 1px solid var(--border); border-radius: 999px; background: rgba(255,255,255,.045); color: var(--muted); padding: 5px 9px; font: inherit; cursor: pointer; transition: opacity .16s ease, filter .16s ease, background .16s ease, border-color .16s ease; }
.co-map-legend-item:hover, .co-map-legend-item:focus-visible { background: rgba(255,255,255,.085); border-color: rgba(148,163,184,.55); outline: none; }
.co-map-legend-item.is-off { opacity: .42; filter: grayscale(1); text-decoration: line-through; }
.co-map-legend-item i { width: 12px; height: 12px; border-radius: 999px; display: inline-block; flex: 0 0 auto; }
.co-map-seat.is-hidden-by-legend { opacity: .10; filter: grayscale(1); pointer-events: none; }
.co-map-legend-note { flex: 1 1 220px; min-width: 0; }
.co-map-detail { border: 1px solid var(--border); border-radius: 18px; background: rgba(255,255,255,.055); padding: 14px; min-width: 0; overflow: auto; max-height: 660px; }
.co-map-detail-empty { color: var(--muted); display: grid; align-content: center; min-height: 260px; }
.co-map-detail-card { display: grid; gap: 10px; min-width: 0; }
.co-map-detail-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.co-map-detail-head h3 { margin: 0; overflow-wrap: anywhere; }
.co-map-rating { display: grid; grid-template-columns: 1fr; gap: 6px; font-size: .9rem; color: var(--muted); }
.co-map-rating b { color: var(--text); }
.co-map-lead-card { display:inline-flex; width:max-content; max-width:100%; gap:4px; align-items:center; border-radius:999px; padding:6px 10px; color:#fff; font-weight:850; overflow-wrap:anywhere; }
.co-map-rating.co-map-ph .co-map-lead-card { background:#dc2626; }
.co-map-rating.co-map-bn .co-map-lead-card { background:#2563eb; }
.co-map-rating.co-map-pn .co-map-lead-card { background:#16a34a; }
.co-map-rating.co-map-bersatu .co-map-lead-card { background:#15803d; }
.co-map-rating.co-map-bersama .co-map-lead-card { background:#f59e0b; }
.co-map-rating.co-map-muda .co-map-lead-card { background:#ec4899; }
.co-map-rating.co-map-others .co-map-lead-card { background:#64748b; }
.co-map-lead-card b { color:#fff; }
.co-map-detail h4 { margin: 8px 0 0; font-size: .9rem; }
.co-map-odds { display: grid; gap: 7px; }
.co-map-odd-row { display: grid; grid-template-columns: 78px 44px minmax(0,1fr); gap: 8px; align-items: center; font-size: .82rem; }
.co-map-odd-row b { text-align: right; }
.co-map-odd-row em { height: 8px; border-radius: 999px; background: rgba(148,163,184,.24); overflow: hidden; display: block; min-width: 0; }
.co-map-odd-row i { display: block; height: 100%; border-radius: inherit; }
.co-map-candidate-list { display: grid; gap: 8px; }
.co-map-candidate { border: 1px solid color-mix(in srgb, var(--candidate-color, var(--border)) 48%, var(--border)); border-left: 7px solid var(--candidate-color, var(--border)); border-radius: 14px; padding: 9px 10px; display: grid; gap: 5px; min-width: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--candidate-color, transparent) 14%, rgba(255,255,255,.035)), rgba(255,255,255,.035) 58%); }
.co-map-candidate strong, .co-map-candidate span, .co-map-candidate small { overflow-wrap: anywhere; }
.co-map-candidate span { display: block; color: var(--muted); font-size: .78rem; margin-top: 2px; }
.co-map-candidate small { color: var(--muted); }
.co-map-candidate-links { display: flex; flex-wrap: wrap; gap: 6px; }
.co-map-candidate-links a { border: 1px solid color-mix(in srgb, var(--candidate-color, var(--border)) 42%, var(--border)); border-radius: 999px; padding: 3px 8px; font-size: .72rem; font-weight: 750; text-decoration: none; max-width: 100%; overflow-wrap: anywhere; background: var(--panel); }
.co-map-source { margin-top: 10px; }
@media (max-width: 980px) {
  .co-map-layout { grid-template-columns: 1fr; }
  .co-seat-map { min-height: 360px; aspect-ratio: 1.35 / 1; }
  .co-map-detail { max-height: none; }
}
@media (max-width: 560px) {
  .co-map-title-row { display: block; }
  .co-map-actions { justify-content: flex-start; margin-top: 10px; }
  .co-map-tools { align-items: stretch; }
  .co-map-tools label, .co-map-tools select, .co-map-tools .small { width: 100%; }
  .co-map-canvas-wrap, .co-map-detail { padding: 10px; border-radius: 14px; }
  .co-map-odd-row { grid-template-columns: 72px 40px minmax(0,1fr); }
}


/* 2026-06-26: preserve individual candidate party colour even when filtered/open */
.co-candidate-pill.filter-match,
.co-candidate-pill.is-open,
body[data-theme="dark"] .co-candidate-pill.filter-match,
body[data-theme="dark"] .co-candidate-pill.is-open {
  border-left-color: var(--candidate-color, var(--line));
}
.co-candidate-pill.filter-match strong,
.co-candidate-pill.is-open strong {
  color: var(--candidate-color, var(--text));
}

/* 2026-06-26: fix constituency odds progress bars.
   The percentage text was visible, but the fill was not reliably visible because:
   1) table bars were inline spans, so width could be ignored; and
   2) map detail bars used classes on the <i> itself, while older selectors targeted child <i> elements. */
.co-odds-track { position: relative; }
.co-odds-bar {
  display: block;
  min-width: 0;
  height: 100%;
  transition: width .22s ease;
}
.co-map-odd-row em { position: relative; }
.co-map-odd-row i {
  display: block;
  min-width: 0;
  height: 100%;
  transition: width .22s ease;
}
.co-map-odd-row i.co-map-ph { background: #dc2626; }
.co-map-odd-row i.co-map-bn { background: #2563eb; }
.co-map-odd-row i.co-map-pn { background: #16a34a; }
.co-map-odd-row i.co-map-bersatu { background: #15803d; }
.co-map-odd-row i.co-map-others { background: #64748b; }
.co-map-odd-row i.co-map-muda { background: #ec4899; }
.co-map-odd-row i.co-map-bersama { background: #f59e0b; }

/* 2026-06-26: map legend toss-up filter. Class names keep marginal for backward compatibility. */
.co-map-legend-marginal i {
  background: repeating-linear-gradient(45deg, #f59e0b 0 3px, #fff 3px 6px);
  border: 1px solid rgba(245,158,11,.9);
}
.co-map-legend-marginal.is-active {
  color: var(--text);
  border-color: #f59e0b;
  background: color-mix(in srgb, #f59e0b 18%, transparent);
  box-shadow: 0 0 0 2px rgba(245,158,11,.18) inset;
}
.co-map-seat.is-marginal-seat rect,
.co-map-seat.is-marginal-seat path,
.co-map-seat.is-marginal-seat polygon,
.co-map-seat.is-marginal-seat circle {
  stroke: #fbbf24;
  stroke-width: 2.2;
}
.co-map-seat.is-hidden-by-legend.is-marginal-seat rect,
.co-map-seat.is-hidden-by-legend.is-marginal-seat path,
.co-map-seat.is-hidden-by-legend.is-marginal-seat polygon,
.co-map-seat.is-hidden-by-legend.is-marginal-seat circle {
  stroke-width: 1.2;
}


/* 2026-06-27: true map legend filtering.
   Hidden coalition seats and non-toss-up seats under the Toss-up filter are removed from the SVG,
   not merely faded. This prevents non-toss-up seats such as Tenggaroh from still appearing. */
#johorSeatMap .co-map-seat.is-hidden-by-legend {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2026-06-27: Shared toss-up threshold control. */
.co-map-tossup-config {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line, rgba(148,163,184,.35));
  border-radius: 999px;
  background: var(--panel-soft, rgba(148,163,184,.08));
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.co-map-tossup-config input[type="range"] {
  width: 92px;
  min-width: 92px;
}
.co-map-tossup-config output {
  min-width: 28px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 680px) {
  .co-map-tossup-config {
    width: 100%;
    justify-content: space-between;
    border-radius: 14px;
  }
  .co-map-tossup-config input[type="range"] {
    flex: 1;
    width: auto;
  }
}


/* 2026-06-27: unified party/coalition flag badges and map legend swatches.
   These are lightweight in-app flag badges, not externally hosted logo images. */
.party-flag {
  --party-flag-bg: var(--ot);
  --party-flag-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 20px;
  padding: 0 8px 0 10px;
  border-radius: 4px 12px 12px 4px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--party-flag-bg) 72%, #fff 28%), var(--party-flag-bg));
  color: var(--party-flag-fg);
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 5px rgba(15,23,42,.12);
  position: relative;
  flex: 0 0 auto;
}
.party-flag::before {
  content: '';
  position: absolute;
  left: -4px;
  top: -2px;
  bottom: -2px;
  width: 2px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 62%, transparent);
}
.party-flag-ph { --party-flag-bg: var(--ph); }
.party-flag-bn { --party-flag-bg: var(--bn); }
.party-flag-pn { --party-flag-bg: var(--pn); }
.party-flag-bersatu { --party-flag-bg: var(--bersatu); }
.party-flag-bersama { --party-flag-bg: var(--bersama); }
.party-flag-muda { --party-flag-bg: var(--muda); }
.party-flag-others, .party-flag-ot { --party-flag-bg: var(--ot); }
.party-flag-group { display: inline-flex; align-items: center; gap: 5px; flex-wrap: wrap; vertical-align: middle; }
.flagged-label, .gauge-label, .gov-route-score span, .party-route-badge, .co-map-lead-card { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.gov-route-title .party-flag-group { margin-right: 8px; }
.gov-metric b .party-flag-group, .gov-route-score .party-flag-group { margin-right: 6px; }
.gov-route-score span { min-width: 0; }
.gov-route-score span > span:last-child, .gauge-label > span:last-child, .party-route-badge > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.kpi .label { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi.ph .label::before, .kpi.bn .label::before, .kpi.pn .label::before, .kpi.bersatu .label::before, .kpi.bersama .label::before, .kpi.muda .label::before, .kpi.others .label::before, .kpi.ot.party-kpi .label::before {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  min-width: 34px;
  padding: 0 8px 0 10px;
  border-radius: 4px 12px 12px 4px;
  color: #fff;
  font-size: 10px;
  font-weight: 950;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.28), 0 2px 5px rgba(15,23,42,.12);
}
.kpi.ph .label::before { content: 'PH'; background: linear-gradient(135deg, color-mix(in srgb, var(--ph) 72%, #fff 28%), var(--ph)); }
.kpi.bn .label::before { content: 'BN'; background: linear-gradient(135deg, color-mix(in srgb, var(--bn) 72%, #fff 28%), var(--bn)); }
.kpi.pn .label::before { content: 'PN'; background: linear-gradient(135deg, color-mix(in srgb, var(--pn) 72%, #fff 28%), var(--pn)); }
.kpi.bersatu .label::before { content: 'BERSATU'; background: linear-gradient(135deg, color-mix(in srgb, var(--bersatu) 72%, #fff 28%), var(--bersatu)); min-width: 60px; }
.kpi.bersama .label::before { content: 'BERSAMA'; background: linear-gradient(135deg, color-mix(in srgb, var(--bersama) 72%, #fff 28%), var(--bersama)); min-width: 60px; }
.kpi.muda .label::before { content: 'MUDA'; background: linear-gradient(135deg, color-mix(in srgb, var(--muda) 72%, #fff 28%), var(--muda)); min-width: 46px; }
.kpi.others .label::before, .kpi.ot.party-kpi .label::before { content: 'OTH'; background: linear-gradient(135deg, color-mix(in srgb, var(--ot) 72%, #fff 28%), var(--ot)); }
.co-map-legend-item i.co-map-ph { background: var(--ph); }
.co-map-legend-item i.co-map-bn { background: var(--bn); }
.co-map-legend-item i.co-map-pn { background: var(--pn); }
.co-map-legend-item i.co-map-bersatu { background: var(--bersatu); }
.co-map-legend-item i.co-map-bersama { background: var(--bersama); }
.co-map-legend-item i.co-map-muda { background: var(--muda); }
.co-map-legend-item i.co-map-others { background: var(--ot); }
.co-map-legend-item i.co-map-ph, .co-map-legend-item i.co-map-bn, .co-map-legend-item i.co-map-pn, .co-map-legend-item i.co-map-bersatu, .co-map-legend-item i.co-map-bersama, .co-map-legend-item i.co-map-muda, .co-map-legend-item i.co-map-others {
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 0 0 1px rgba(15,23,42,.06);
}
body[data-theme="light"] .co-map-legend-item i.co-map-ph, body[data-theme="light"] .co-map-legend-item i.co-map-bn, body[data-theme="light"] .co-map-legend-item i.co-map-pn, body[data-theme="light"] .co-map-legend-item i.co-map-bersatu, body[data-theme="light"] .co-map-legend-item i.co-map-bersama, body[data-theme="light"] .co-map-legend-item i.co-map-muda, body[data-theme="light"] .co-map-legend-item i.co-map-others {
  border-color: rgba(15,23,42,.24);
}
.vc-flagged-result { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.vc-flagged-result .party-flag { transform: translateY(-1px); }

/* 2026-06-28: News highlights, sentiment and dynamic contest-pattern cards */
.news-highlights-body { display:grid; gap:16px; }
.news-compact-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:12px; }
.news-meter { border:1px solid var(--line); background:var(--panel2); border-radius:16px; padding:14px; min-width:0; }
.news-meter span { display:block; color:var(--muted); font-size:12px; line-height:1.3; }
.news-meter b { display:block; font-size:28px; margin-top:4px; letter-spacing:-.03em; color:var(--text); }
.news-reading { margin:8px 0 12px; color:var(--muted); line-height:1.55; }
.news-chip-row { display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.news-chip { display:inline-flex; align-items:center; border:1px solid var(--line); border-radius:999px; padding:4px 9px; font-size:12px; line-height:1.2; background:var(--panel2); color:var(--muted); }
.news-chip.entity { color:var(--text); font-weight:700; }
.news-chip.issue { border-style:dashed; }
.news-impact-list { margin:10px 0 0; padding-left:20px; color:var(--muted); line-height:1.55; }
.news-highlight-list { display:grid; gap:12px; margin-top:12px; }
.news-highlight-card { border:1px solid var(--line); background:var(--panel2); border-radius:18px; padding:14px; }
.news-highlight-card h3 { margin:7px 0 10px; font-size:16px; line-height:1.35; }
.news-highlight-card a { color:inherit; text-decoration:none; }
.news-highlight-card a:hover { text-decoration:underline; }
.news-highlight-meta { display:flex; flex-wrap:wrap; gap:8px; align-items:center; color:var(--muted); font-size:12px; }
.news-highlight-meta span { display:inline-flex; align-items:center; }
.sentiment-positive { color:#16a34a; font-weight:800; }
.sentiment-negative { color:#dc2626; font-weight:800; }
.sentiment-neutral { color:var(--muted); font-weight:700; }
.news-sentiment-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; }
.news-sentiment-card { border:1px solid var(--line); background:var(--panel2); border-radius:16px; padding:13px; min-width:0; }
.news-sentiment-card strong { display:block; font-size:12px; color:var(--muted); }
.news-sentiment-card b { display:block; font-size:26px; margin-top:4px; color:var(--text); }
.news-sentiment-card span { display:block; font-size:12px; color:var(--muted); }
.news-sentiment-card.pos { border-top:4px solid #16a34a; }
.news-sentiment-card.neg { border-top:4px solid #dc2626; }
.news-sentiment-card.neu { border-top:4px solid var(--ot); }
body[data-page="news"] .table-wrap { margin-top:14px; }
@media(max-width:950px){ .news-compact-grid, .news-sentiment-grid { grid-template-columns:1fr; } }

/* OpenAI API news/sentiment layer */
.openai-panel { border:1px solid var(--line); background:var(--panel2); border-radius:18px; padding:14px; margin-top:12px; }
.openai-panel-head { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px; }
.openai-panel-head strong { margin-right:auto; }
.openai-meters { margin-top:8px; margin-bottom:8px; }
.warning-list { color:#b45309; }
.danger-text { color:#b91c1c; }
@media(max-width:1100px){ .news-compact-grid.openai-meters { grid-template-columns:1fr; } }

.ai-status-note {
  color: var(--text-muted, #64748b);
  background: rgba(148, 163, 184, .12);
  border: 1px solid rgba(148, 163, 184, .25);
  border-radius: 12px;
  padding: .55rem .7rem;
}


/* 2026-06-28: Genie AI sidebar forecast, compact professional layout and AI-use disclosure */
body {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
}
strong, b { font-weight: 600; }
h1, h2, h3, .page-title { font-weight: 620; }
main { padding: 16px; }
.card { border-radius: 18px; padding: 16px; box-shadow: 0 10px 26px rgba(15,23,42,.06); }
body[data-theme="dark"] .card { box-shadow: 0 14px 40px rgba(0,0,0,.22); }
.grid { gap: 12px; }
.section { margin-top: 14px; }
.section-title { gap: 10px; margin-bottom: 10px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
.page-title { margin-bottom: 8px; }
.page-subtitle, .whatif-main .page-subtitle { margin: 4px 0 10px; line-height: 1.45; }
.kpi .value { font-size: 34px; font-weight: 650; }
.kpi .label, .kpi .sub, .small { font-size: 12px; }
.badge { padding: 4px 8px; font-size: 11px; }
.info { gap: 9px; }
.info-item, .mini, .slider-card, .result-pill, .path-card, .news-sentiment-card { border-radius: 14px; padding: 12px; }
button, select, nav a { padding: 7px 10px; font-weight: 450; }
th { font-weight: 550; }
th, td { padding: 8px 8px; }
.legend { gap: 10px; margin-top: 8px; }
.side-menu {
  gap: 12px;
  padding: 16px 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.side-brand {
  padding: 4px 6px 10px;
}
.side-brand strong { font-size: 16px; font-weight: 620; }
.side-link {
  padding: 10px 11px;
  border-radius: 14px;
  font-weight: 520;
}
.side-nav { gap: 7px; }
.side-section { gap: 6px; }
.side-section-title { font-weight: 600; letter-spacing: .07em; }
.side-forecast-card {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 11px;
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  display: grid;
  gap: 8px;
}
.side-forecast-head {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .07em;
}
.side-forecast-head span { font-weight: 600; }
.side-forecast-head em {
  font-style: normal;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px 6px;
  background: var(--panel);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
}
.side-forecast-main {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.side-forecast-main span {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 7px 6px;
  background: var(--panel);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  font-size: 12px;
}
.side-forecast-main b { font-size: 18px; line-height: 1; font-weight: 650; }
.side-forecast-split {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}
.side-forecast-split.muted, .side-forecast-loading { color: var(--muted); }
.side-forecast-foot {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted);
  font-size: 11px;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}
.side-forecast-foot small { color: var(--muted); font-size: 11px; }
.side-forecast-card p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}
.ai-disclosure {
  margin: 10px 0 14px;
  border: 1px solid color-mix(in srgb, var(--line) 70%, #2563eb 30%);
  background: color-mix(in srgb, var(--panel2) 88%, #2563eb 12%);
  border-radius: 16px;
  padding: 10px 12px;
  display: grid;
  gap: 4px;
}
.ai-disclosure strong {
  font-size: 12px;
  font-weight: 620;
  color: var(--text);
}
.ai-disclosure span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}
.danger-text {
  color: #b91c1c;
  font-size: 12px;
  line-height: 1.45;
}
.openai-panel, .refresh-panel { border-radius: 16px; padding: 12px; }
.openai-panel-head strong { font-weight: 620; }
.news-sentiment-card b, .news-meter b, .result-pill b, .path-card .big { font-weight: 650; }
body[data-page="simulator"] main { padding: 8px; }
body[data-page="simulator"] .sim-screen { gap: 6px; }
@media(max-width: 860px) {
  .side-menu { gap: 10px; padding: 10px; }
  .side-forecast-card { padding: 10px; }
  .side-forecast-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  main, .vc-main { padding-top: 70px; }
  .ai-disclosure { margin: 8px 0 12px; }
}
@media(max-width: 520px) {
  main { padding: 12px; }
  .card { padding: 13px; }
  .side-forecast-main b { font-size: 16px; }
}


/* 2026-06-28: Genie AI logo, compact news meters, timestamps and map-outline refinements */
.side-brand {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
}
.side-brand-logo {
  width: 46px;
  height: 46px;
  object-fit: contain;
  border-radius: 14px;
  background: color-mix(in srgb, var(--panel2) 86%, #6d28d9 14%);
  border: 1px solid color-mix(in srgb, var(--line) 68%, #6d28d9 32%);
  padding: 3px;
  box-shadow: 0 6px 16px rgba(109,40,217,.12);
}
.side-brand-copy { min-width: 0; display: grid; gap: 2px; }
.side-brand-copy strong, .side-brand-copy span { display:block; }

.card { padding: 13px; border-radius: 16px; }
.grid { gap: 9px; }
.section { margin-top: 10px; }
.section-title { margin-bottom: 8px; gap: 8px; }
.kpis { gap: 9px; }
.kpi .value { font-size: 30px; }
.news-highlights-body { gap: 10px; }
.news-compact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.news-compact-grid.openai-meters { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.news-meter { border-radius: 13px; padding: 10px; }
.news-meter b { font-size: 23px; margin-top: 2px; }
.news-highlight-list { gap: 8px; margin-top: 8px; }
.news-highlight-card { border-radius: 14px; padding: 10px; }
.news-highlight-card h3 { margin: 5px 0 8px; font-size: 14px; font-weight: 560; }
.news-reading { margin: 6px 0 9px; line-height: 1.45; }
.news-freshness, .data-freshness {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
  border: 1px solid var(--line);
  background: var(--panel2);
  border-radius: 999px;
  padding: 5px 9px;
  display: inline-flex;
  max-width: 100%;
  flex-wrap: wrap;
}
.ai-disclosure-time {
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
}

#johorSeatMap .co-map-seat.is-color-off rect,
#johorSeatMap .co-map-seat.is-color-off path,
#johorSeatMap .co-map-seat.is-color-off polygon,
#johorSeatMap .co-map-seat.is-color-off circle {
  fill: transparent !important;
  stroke: rgba(226,232,240,.72) !important;
  stroke-width: 1.5 !important;
  opacity: .95;
}
body[data-theme="light"] #johorSeatMap .co-map-seat.is-color-off rect,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-color-off path,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-color-off polygon,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-color-off circle {
  stroke: rgba(15,23,42,.48) !important;
}
#johorSeatMap .co-map-seat.is-color-off text { fill: var(--muted); text-shadow: none; }

#johorSeatMap .co-map-seat.is-marginal-seat rect,
#johorSeatMap .co-map-seat.is-marginal-seat path,
#johorSeatMap .co-map-seat.is-marginal-seat polygon,
#johorSeatMap .co-map-seat.is-marginal-seat circle {
  stroke: #f59e0b !important;
  stroke-width: 3.6 !important;
  filter: drop-shadow(0 0 3px rgba(245,158,11,.30));
}
#johorSeatMap .co-map-seat.is-color-off.is-marginal-seat rect,
#johorSeatMap .co-map-seat.is-color-off.is-marginal-seat path,
#johorSeatMap .co-map-seat.is-color-off.is-marginal-seat polygon,
#johorSeatMap .co-map-seat.is-color-off.is-marginal-seat circle {
  fill: transparent !important;
  stroke: #f59e0b !important;
  stroke-width: 3.8 !important;
}

@media(max-width: 950px){
  .news-compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-compact-grid.openai-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-sentiment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media(max-width: 520px){
  .side-brand { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
  .side-brand-logo { width: 40px; height: 40px; border-radius: 12px; }
  main { padding: 10px; }
  .card { padding: 11px; }
  .news-meter { padding: 9px; }
  .news-meter b { font-size: 21px; }
}


/* 2026-06-28: map toss-up outline, compact multilingual news cards */
.news-compact-grid,
.news-compact-grid.openai-meters {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-bottom: 5px;
}
.news-meter {
  padding: 7px 8px;
  border-radius: 11px;
}
.news-meter span { font-size: 11px; line-height: 1.22; }
.news-meter b { font-size: 20px; margin-top: 1px; }
.news-highlight-list { gap: 5px; margin-top: 6px; }
.news-highlight-card { padding: 8px 9px; border-radius: 12px; }
.news-highlight-card h3 { margin: 4px 0 6px; font-size: 13.5px; line-height: 1.3; }
.news-highlight-meta { gap: 4px 6px; font-size: 11px; }
.news-chip-row { gap: 4px; }
.news-chip { padding: 2px 6px; font-size: 10.5px; }
.news-reading { margin: 5px 0 7px; line-height: 1.38; }
.news-freshness, .data-freshness { margin-bottom: 6px; padding: 4px 8px; font-size: 11.5px; }

/* Toss-up filter should de-emphasise non-toss-up seats without removing their outlines. */
#johorSeatMap .co-map-seat.is-hidden-by-legend,
#johorSeatMap .co-map-seat.is-tossup-filter-muted {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
#johorSeatMap .co-map-seat.is-tossup-filter-muted rect,
#johorSeatMap .co-map-seat.is-tossup-filter-muted path,
#johorSeatMap .co-map-seat.is-tossup-filter-muted polygon,
#johorSeatMap .co-map-seat.is-tossup-filter-muted circle,
#johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) rect,
#johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) path,
#johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) polygon,
#johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) circle {
  fill: transparent !important;
  stroke: rgba(226,232,240,.66) !important;
  stroke-width: 1.35 !important;
  filter: none !important;
}
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted rect,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted path,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted polygon,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted circle,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) rect,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) path,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) polygon,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) circle {
  stroke: rgba(15,23,42,.50) !important;
}
#johorSeatMap .co-map-seat.is-tossup-filter-muted text,
#johorSeatMap .co-map-seat.is-hidden-by-legend:not(.is-marginal-seat) text {
  opacity: .22;
  fill: var(--muted) !important;
  text-shadow: none !important;
}
#johorSeatMap .co-map-seat.is-marginal-seat rect,
#johorSeatMap .co-map-seat.is-marginal-seat path,
#johorSeatMap .co-map-seat.is-marginal-seat polygon,
#johorSeatMap .co-map-seat.is-marginal-seat circle {
  stroke: #f59e0b !important;
  stroke-width: 4.2 !important;
  filter: drop-shadow(0 0 4px rgba(245,158,11,.38));
}
@media(max-width: 950px){
  .news-compact-grid,
  .news-compact-grid.openai-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
}
@media(max-width: 520px){
  .news-compact-grid,
  .news-compact-grid.openai-meters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .news-meter { padding: 6px 7px; }
  .news-meter b { font-size: 18px; }
  .news-highlight-card { padding: 7px 8px; }
}

/* 2026-06-28: final UI consistency fixes requested after simulator/map review */
.party-flag-group {
  width: auto !important;
  inline-size: max-content;
  max-inline-size: 100%;
  flex: 0 0 auto;
  align-self: flex-start;
  justify-content: flex-start;
}
.flagged-label .party-flag-group,
.gauge-label .party-flag-group,
.gov-route-score .party-flag-group,
.party-route-badge .party-flag-group {
  flex: 0 0 auto;
}

body[data-page="simulator"] .sim-result-card .chart-wrap { order: 1; }
body[data-page="simulator"] .sim-result-card .big-result { order: 2; margin-top: 4px; }
body[data-page="simulator"] .sim-result-card .info { order: 3; }
body[data-page="simulator"] .sim-path-card,
body[data-page="simulator"] .sim-prob-card,
body[data-page="simulator"] .sim-mc-controls-card,
body[data-page="simulator"] .sim-explain-card {
  padding-bottom: 16px !important;
  gap: 8px;
}
body[data-page="simulator"] .sim-path-card > :last-child,
body[data-page="simulator"] .sim-prob-card > :last-child,
body[data-page="simulator"] .sim-mc-controls-card > :last-child,
body[data-page="simulator"] .sim-explain-card > :last-child {
  margin-bottom: 4px;
}

/* Candidate details open beside the clicked name on wider screens instead of pushing the whole cell down. */
.co-candidate-profile[open] {
  display: grid;
  grid-template-columns: minmax(120px, max-content) minmax(220px, 1fr);
  gap: 8px 10px;
  align-items: start;
  width: 100%;
}
.co-candidate-profile[open] > summary { grid-column: 1; }
.co-candidate-profile[open] .co-candidate-detail {
  grid-column: 2;
  margin-top: 0;
  padding-top: 0;
  padding-left: 10px;
  border-top: 0;
  border-left: 1px solid var(--line);
  width: auto;
  min-width: 0;
}
@media(max-width: 760px){
  .co-candidate-profile[open] { display: block; width: 100%; }
  .co-candidate-profile[open] .co-candidate-detail {
    margin-top: 8px;
    padding-top: 8px;
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }
}

/* Persistent outline layer keeps every constituency boundary visible when map colours or toss-up filter are active. */
#johorSeatMap .co-map-outline-layer { pointer-events: none; }
#johorSeatMap .co-map-seat-outline {
  fill: transparent !important;
  stroke: rgba(226,232,240,.58) !important;
  stroke-width: 1.15 !important;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}
body[data-theme="light"] #johorSeatMap .co-map-seat-outline { stroke: rgba(15,23,42,.44) !important; }
#johorSeatMap .co-map-seat.is-tossup-filter-muted rect,
#johorSeatMap .co-map-seat.is-tossup-filter-muted path,
#johorSeatMap .co-map-seat.is-tossup-filter-muted polygon,
#johorSeatMap .co-map-seat.is-tossup-filter-muted circle {
  fill: rgba(148,163,184,.04) !important;
  stroke: rgba(226,232,240,.82) !important;
  stroke-width: 1.45 !important;
}
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted rect,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted path,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted polygon,
body[data-theme="light"] #johorSeatMap .co-map-seat.is-tossup-filter-muted circle {
  fill: rgba(15,23,42,.018) !important;
  stroke: rgba(15,23,42,.60) !important;
}

/* Narrower news cards and language-coded media highlights. */
.news-highlight-list { gap: 4px !important; margin-top: 5px !important; }
.news-highlight-card { padding: 6px 7px !important; border-radius: 10px !important; border-left: 4px solid var(--news-lang-color, var(--line)); }
.news-highlight-card h3 { margin: 3px 0 5px !important; font-size: 13px !important; line-height: 1.24 !important; }
.news-highlight-meta { gap: 3px 5px !important; font-size: 10.5px !important; }
.news-chip-row { gap: 3px !important; }
.news-chip { padding: 2px 5px !important; font-size: 10px !important; }
.news-highlight-card.lang-en { --news-lang-color: #2563eb; }
.news-highlight-card.lang-ms { --news-lang-color: #16a34a; }
.news-highlight-card.lang-zh { --news-lang-color: #dc2626; }
.news-highlight-card.lang-ta { --news-lang-color: #f59e0b; }
.news-language-badge {
  border: 1px solid color-mix(in srgb, var(--news-lang-color, var(--line)) 55%, var(--line));
  color: var(--news-lang-color, var(--text));
  background: color-mix(in srgb, var(--news-lang-color, var(--panel2)) 10%, transparent);
  border-radius: 999px;
  padding: 1px 5px;
}


/* 2026-06-28: Equal-width party flag pills per card/group and vertical Monte Carlo summary. */
.party-flag-group[data-flag-equalised="1"] .party-flag {
  inline-size: var(--party-flag-equal-width, auto);
  min-inline-size: var(--party-flag-equal-width, 34px);
  text-align: center;
}
body[data-page="simulator"] .sim-mc-controls-card .mc-summary {
  grid-template-columns: 1fr !important;
  align-content: start;
}
body[data-page="simulator"] .sim-mc-controls-card .mc-summary .mc-pill {
  width: 100%;
}

/* 2026-06-28: align government metric cards with gauge-label styling */
.gov-route-grid {
  align-items: start;
}
.gov-metric {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 7px;
  width: fit-content;
  max-width: 100%;
  border-radius: 12px;
  padding: 7px 9px;
  background: color-mix(in srgb, var(--panel2) 70%, transparent);
  border: 1px solid var(--line);
}
.gov-metric > span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  flex: 0 0 auto;
}
.gov-metric > b {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 0;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.3;
  min-width: 0;
  overflow-wrap: anywhere;
}
.gov-metric > b > span,
.gov-metric > b .party-flag-group + span {
  display: inline;
  color: var(--text);
  font-size: inherit;
  line-height: inherit;
}
.gov-metric > b br {
  display: block;
  content: "";
  margin-bottom: 3px;
}
.gov-metric--wide {
  display: flex;
  width: 100%;
  border-radius: 12px;
}
.gov-metric--wide > b {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
}
body[data-page="simulator"] .gov-prediction-card--compact .gov-metric {
  padding: 6px 8px;
  border-radius: 11px;
}
body[data-page="simulator"] .gov-prediction-card--compact .gov-metric > b {
  font-size: 13px;
}
@media(max-width: 760px) {
  .gov-metric {
    display: flex;
    width: 100%;
  }
}

/* 2026-06-28: candidate popover overlays right-side columns instead of expanding the row */
.co-table-wrap.candidate-popover-active,
.card.candidate-popover-active,
body.candidate-popover-active .co-table-wrap,
body.candidate-popover-active .card:has(.co-candidate-pill.is-open) {
  overflow: visible !important;
}
.co-table-wrap.candidate-popover-active .co-table,
.co-table-wrap.candidate-popover-active .co-table tbody,
.co-table-wrap.candidate-popover-active .co-table tr,
.co-table-wrap.candidate-popover-active .co-table td,
.co-table-wrap.candidate-popover-active .co-candidate-list,
.co-table-wrap.candidate-popover-active .co-candidate-pill,
.co-table-wrap.candidate-popover-active .co-candidate-profile {
  overflow: visible !important;
}
.co-candidate-pill.is-open {
  position: relative;
  z-index: 120;
  overflow: visible !important;
}
.co-candidate-pill.is-open .co-candidate-profile {
  position: relative;
  z-index: 130;
  display: inline-block;
  max-width: none;
  overflow: visible !important;
}
.co-candidate-pill.is-open .co-candidate-detail {
  position: absolute;
  left: calc(100% + 12px);
  top: -10px;
  z-index: 9000;
  width: min(520px, calc(100vw - 64px));
  max-width: 520px;
  max-height: min(72vh, 560px);
  overflow: auto !important;
  margin-top: 0;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--candidate-color, #2563eb);
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 64px rgba(15,23,42,.24);
}
body[data-theme="dark"] .co-candidate-pill.is-open .co-candidate-detail {
  box-shadow: 0 28px 70px rgba(0,0,0,.46);
}
@media (max-width: 860px) {
  .co-candidate-pill.is-open .co-candidate-detail {
    position: static;
    width: 100%;
    max-width: 100%;
    max-height: none;
    margin-top: 8px;
    box-shadow: none;
  }
}

/* 2026-06-28: chart/diagram card pop-out controls */
.card.has-popout-btn, .vc-chart-card.has-popout-btn { position: relative; }
.card-popout-btn {
  position:absolute; top:8px; right:8px; z-index:8;
  width:28px; height:28px; border-radius:9px;
  border:1px solid var(--line); background:rgba(255,255,255,.78); color:var(--text);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; line-height:1; cursor:pointer; box-shadow:0 8px 18px rgba(15,23,42,.12);
  backdrop-filter: blur(8px);
}
[data-theme="dark"] .card-popout-btn { background:rgba(15,23,42,.78); }
.card-popout-btn:hover { transform: translateY(-1px); box-shadow:0 12px 24px rgba(15,23,42,.18); }
.card-popout-overlay {
  position:fixed; inset:0; z-index:9999; background:rgba(15,23,42,.54);
  display:flex; align-items:center; justify-content:center; padding:3vh 3vw;
}
.card-popout-window {
  width:75vw; height:75vh; min-width:min(75vw, 320px);
  background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:22px;
  box-shadow:0 30px 80px rgba(2,6,23,.36); display:flex; flex-direction:column; overflow:hidden;
}
.card-popout-header {
  display:flex; align-items:center; justify-content:space-between; gap:12px; padding:8px 10px;
  border-bottom:1px solid var(--line); background:var(--panel2); min-height:44px;
}
.card-popout-title { font-size:13px; font-weight:650; letter-spacing:.02em; color:var(--text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.card-popout-actions { display:flex; align-items:center; gap:6px; flex-shrink:0; }
.card-popout-close,
.card-popout-shot { border:1px solid var(--line); border-radius:10px; padding:6px 10px; background:transparent; color:var(--text); cursor:pointer; font-size:12px; line-height:1.1; }
.card-popout-shot { background:var(--panel); }
.card-popout-close:hover,
.card-popout-shot:hover { box-shadow:0 8px 18px rgba(15,23,42,.12); transform:translateY(-1px); }
.card-popout-body { flex:1; overflow:hidden; padding:10px; position:relative; display:block; }
.card-popout-fit { transform-origin: top left; width:max-content; max-width:none; }
.card-popout-body.is-scaled { display:flex; align-items:flex-start; justify-content:flex-start; }
.card-popout-body .card, .card-popout-body .vc-chart-card { height:auto; min-height:0; box-shadow:none; margin:0; max-width:none; }
.card-popout-body .card-popout-btn { display:none !important; }
.card-popout-body .chart-wrap { max-height:none; height:auto; overflow:hidden; }
.card-popout-body svg { width:100%; height:auto; min-height:0; }
.card-popout-body .co-map-stage svg,
.card-popout-body #coMapSvg { min-height:0; height:auto; }
body.card-popout-open { overflow:hidden; }
@media (max-width: 760px) {
  .card-popout-window { width:94vw; height:86vh; border-radius:18px; }
  .card-popout-overlay { padding:2vh 2vw; }
  .card-popout-header { padding:7px 8px; }
  .card-popout-close, .card-popout-shot { padding:5px 8px; font-size:11px; }
}

/* 2026-06-28: route realism notes */
.gov-reality-note {
  margin:8px 0 0; padding:8px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel2);
  font-size:12px; line-height:1.45; color:var(--muted);
}

/* Dynamic Genie AI accuracy-question cards */
.ai-question-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:10px;
}
.ai-question-card{
  border:1px solid var(--line);
  background:rgba(255,255,255,.045);
  border-radius:16px;
  padding:12px;
  box-shadow:0 8px 18px rgba(15,23,42,.05);
}
.ai-question-card h3{
  margin:6px 0 6px;
  font-size:.96rem;
  line-height:1.32;
  font-weight:650;
  letter-spacing:-.01em;
}
.ai-question-card p{
  margin:5px 0;
  font-size:.86rem;
  line-height:1.42;
  color:var(--muted);
}
.ai-question-answer{
  color:var(--text) !important;
}
.ai-question-meta{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  align-items:center;
}
.ai-question-meta span{
  border:1px solid var(--line);
  border-radius:999px;
  padding:3px 7px;
  font-size:.72rem;
  color:var(--muted);
  background:rgba(255,255,255,.04);
}
.ai-question-evidence{
  margin:7px 0 0;
  padding-left:18px;
  color:var(--muted);
  font-size:.8rem;
  line-height:1.35;
}
.news-chip.query{
  background:rgba(148,163,184,.14);
  border-color:rgba(148,163,184,.34);
}
.followup-row{
  margin-top:7px;
}
@media (max-width:760px){
  .ai-question-grid{grid-template-columns:1fr; gap:8px;}
  .ai-question-card{padding:10px;}
}

/* 2026-06-28: dynamic scenario controls and popup screenshot/export fitting */
.slider-note {
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:10.5px;
  line-height:1.3;
}
body[data-page="simulator"] .sim-controls-card .slider-note { margin-top:3px; }

/* 2026-06-28 final consistency / popup fit patch */
.card-popout-overlay{padding:2vh 2vw;}
.card-popout-window{width:75vw;height:75vh;max-width:75vw;max-height:75vh;}
.card-popout-header{min-height:40px;padding:6px 8px;}
.card-popout-body{overflow:hidden!important;padding:6px;display:flex;align-items:center;justify-content:center;}
.card-popout-fit{transform-origin:center center!important;max-width:none!important;max-height:none!important;}
.card-popout-body.is-scaled{display:flex;align-items:center;justify-content:center;}
.card-popout-shot{display:inline-flex!important;align-items:center;gap:5px;font-weight:600;background:var(--panel)!important;z-index:12;white-space:nowrap;}
.card-popout-actions{position:relative;z-index:12;}
.card-popout-body .card,.card-popout-body .vc-chart-card{overflow:hidden!important;}
.card-popout-body .chart-wrap,.card-popout-body .co-map-shell,.card-popout-body .co-map-panel,.card-popout-body .co-map-stage{overflow:hidden!important;max-height:none!important;}
@media (max-width:760px){.card-popout-window{width:96vw;height:88vh;max-width:96vw;max-height:88vh}.card-popout-shot{font-size:10.5px;padding:5px 7px}}

/* Forecast mode selector */
.side-forecast-mode-section { padding-top: 8px; }
.side-forecast-mode { margin-top: 6px; font-size: 11px; color: var(--muted); }
.forecast-mode-panel { padding: 12px 14px; }
.forecast-mode-select { min-width: 220px; }
.forecast-mode-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.forecast-mode-card { text-align: left; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); color: var(--text); padding: 10px 12px; display: flex; flex-direction: column; gap: 5px; cursor: pointer; font: inherit; }
.forecast-mode-card span { font-size: 12px; color: var(--muted); font-weight: 500; }
.forecast-mode-card b { font-size: 13px; font-weight: 650; color: var(--text); }
.forecast-mode-card em { font-style: normal; font-size: 11px; line-height: 1.35; color: var(--muted); }
.forecast-mode-card.active { border-color: var(--accent); box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 8%, var(--panel)); }
@media (max-width: 780px) { .forecast-mode-grid { grid-template-columns: 1fr; } .forecast-mode-select { width: 100%; min-width: 0; } }


/* 2026-06-29: forecast deduction explanation layer */
.forecast-deduction-card{overflow:visible;}
.forecast-deduction-body{display:grid;gap:12px;}
.deduction-overall{display:grid;gap:10px;}
.deduction-overall p{margin:0;color:var(--text);line-height:1.55;font-weight:400;}
.deduction-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;}
.deduction-steps span{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:var(--soft);font-size:.83rem;line-height:1.35;color:var(--muted);}
.deduction-steps b{display:inline-grid;place-items:center;min-width:20px;height:20px;border-radius:999px;background:var(--card);border:1px solid var(--line);font-size:.72rem;color:var(--text);font-weight:600;}
.deduction-grid{display:grid;grid-template-columns:.8fr 1.1fr 1.1fr;gap:10px;align-items:start;}
.deduction-grid h3{margin:0 0 8px;font-size:.9rem;font-weight:600;color:var(--text);}
.deduction-chip-row{display:flex;flex-wrap:wrap;gap:6px;}
.deduction-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--soft);border-radius:999px;padding:5px 8px;font-size:.78rem;color:var(--muted);}
.deduction-chip b{font-weight:600;color:var(--text);}
.deduction-seat-list{display:grid;gap:6px;}
.deduction-seat-detail,.co-deduction{border:1px solid var(--line);border-radius:10px;background:var(--soft);overflow:clip;}
.deduction-seat-detail summary,.co-deduction summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 9px;font-size:.8rem;color:var(--text);font-weight:500;}
.deduction-seat-detail summary b{display:inline-flex;align-items:center;gap:5px;font-weight:500;color:var(--muted);white-space:nowrap;}
.deduction-seat-detail p,.co-deduction p{margin:0;padding:0 9px 8px;font-size:.78rem;line-height:1.45;color:var(--muted);}
.co-deduction{margin-top:8px;background:color-mix(in srgb,var(--soft) 80%,transparent);}
.co-deduction summary{font-size:.76rem;padding:6px 8px;}
.co-map-deduction{margin-top:10px;}
@media(max-width:900px){.deduction-steps{grid-template-columns:1fr 1fr}.deduction-grid{grid-template-columns:1fr}.deduction-seat-detail summary,.co-deduction summary{align-items:flex-start;}}
@media(max-width:560px){.deduction-steps{grid-template-columns:1fr}}