/* ── States of Bharat — full-width map + right dossier drawer ─────────────── */

/* Near full-bleed so the map can grow */
.feature.states-page.wrap,
main.wrap.feature.states-page {
  width: min(100% - 1rem, 1480px);
}
.feature.states-page .feature-head {
  padding: 1.6rem 0 0.7rem;
}
.feature.states-page .feature-head .eyebrow { color: var(--kesari-deep); }
.feature.states-page .feature-head .lede { max-width: 64ch; font-size: .98rem; }
.feature.states-page .feature-head h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); }

/* Toolbar */
.states-toolbar {
  display:flex; flex-wrap:wrap; gap:.7rem; align-items:center; justify-content:center;
  margin: .15rem auto 1.1rem;
}
.states-toolbar .tsearch input { width: min(82vw, 340px); }
.seg {
  display:inline-flex; padding:3px; border-radius:999px;
  background:var(--card); border:1px solid var(--line-strong); gap:2px;
}
.seg-btn {
  font:600 .8rem/1 var(--font-body); padding:.48rem .85rem; border-radius:999px;
  color:var(--ink-soft); background:transparent; border:0;
}
.seg-btn.active {
  background: linear-gradient(135deg, var(--kesari), var(--kesari-deep));
  color:#fff; box-shadow: var(--sh-saffron);
}

/* ── Full-width map stage (no blue “sea”) ─────────────────────────────────── */
.map-stage {
  margin: 0 auto 1.8rem;
  background: var(--card);
  border:1px solid var(--line-strong);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  overflow: hidden;
  position: relative;
}
.map-stage::before {
  content:""; position:absolute; inset:0 0 auto 0; height:5px; z-index:2;
  background: linear-gradient(90deg, var(--kesari), var(--white), var(--harit));
}
.map-stage-inner {
  position: relative;
  padding: 0.6rem 0.35rem 0.25rem;
}

.map-frame {
  position: relative;
  width: 100%;
  min-height: min(88vh, 1040px);
  border-radius: var(--r-lg);
  overflow: visible; /* labels near edges stay readable */
  /* Parchment canvas — light */
  background:
    radial-gradient(ellipse 80% 60% at 50% 42%, color-mix(in srgb, var(--kesari) 10%, transparent), transparent 70%),
    radial-gradient(ellipse 50% 40% at 70% 80%, color-mix(in srgb, var(--harit) 7%, transparent), transparent 65%),
    linear-gradient(165deg, #fff9ef 0%, var(--parchment) 45%, #f0e6d2 100%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--line-strong) 70%, transparent);
}
[data-theme="dark"] .map-frame {
  background:
    radial-gradient(ellipse 80% 55% at 50% 40%, color-mix(in srgb, var(--kesari) 14%, transparent), transparent 68%),
    radial-gradient(ellipse 45% 35% at 72% 78%, color-mix(in srgb, var(--harit) 10%, transparent), transparent 60%),
    linear-gradient(165deg, #1c1812 0%, #14110c 50%, #1a1610 100%);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

.map-frame svg {
  display:block;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: min(86vh, 1000px);
  max-height: min(94vh, 1200px);
  margin: 0 auto;
  overflow: visible;
}
@media (max-width: 720px) {
  .map-frame { min-height: min(72vh, 720px); }
  .map-frame svg {
    min-height: min(70vh, 680px);
    max-height: min(80vh, 780px);
  }
}
.map-loading {
  position:absolute; inset:0; display:grid; place-items:center;
  color:var(--ink-faint); font-weight:600; letter-spacing:.02em;
}

/* Paths — soft Tiranga bands (kesari / white / harit) + slight raised 3D */
.map-frame svg #states {
  /* group-level soft lift */
  filter: none;
}
.map-frame svg .state-path {
  cursor: pointer;
  transition:
    fill .2s var(--ease),
    stroke .2s var(--ease),
    stroke-width .2s var(--ease),
    filter .22s var(--ease),
    opacity .18s ease;
  stroke-width: 0.85;
  stroke-linejoin: round;
  /* default band = soft white/cream */
  fill: #f4eee3;
  stroke: #c4b49a;
  /* raised tile: light rim + soft shadow */
  filter:
    drop-shadow(0 0.6px 0 rgba(255,255,255,.55))
    drop-shadow(0 1.6px 2.2px rgba(42,33,24,.14))
    drop-shadow(0 3.5px 6px rgba(42,33,24,.08));
}

/* Subtle flag-color bands — muted, not neon */
.map-frame svg .state-path.band-kesari {
  fill: #efd2a8;             /* soft saffron clay */
  stroke: #c4924e;
}
.map-frame svg .state-path.band-white {
  fill: #f6f1e7;             /* warm white */
  stroke: #c9b89a;
}
.map-frame svg .state-path.band-harit {
  fill: #d5e5cc;             /* soft harit mist */
  stroke: #7a9a6e;
}

/* UTs: slightly flatter / cooler white so they read as different */
.map-frame svg .state-path[data-kind="UT"] {
  fill: #f0ebe0;
  stroke: #b5a68c;
}
.map-frame svg .state-path[data-kind="UT"].band-kesari {
  fill: #ead4b4;
  stroke: #b88955;
}
.map-frame svg .state-path[data-kind="UT"].band-harit {
  fill: #d0deca;
  stroke: #6f8f66;
}

.map-frame svg .state-path.is-dim {
  opacity: 0.2;
  filter: grayscale(0.45) drop-shadow(0 0 0 transparent);
}

/* Hover: lift the tile */
.map-frame svg .state-path.is-hover {
  fill: #f0c48a !important;  /* soft saffron lift */
  stroke: #8a5a22;
  stroke-width: 1.35;
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.65))
    drop-shadow(0 3px 4px rgba(42,33,24,.2))
    drop-shadow(0 8px 14px rgba(180,100,30,.18));
  opacity: 1;
}
.map-frame svg .state-path.band-harit.is-hover {
  fill: #b9d4ad !important;
  stroke: #4a6b42;
}
.map-frame svg .state-path.band-white.is-hover {
  fill: #fff8ee !important;
  stroke: #8a7355;
}

/* Active: strongest raise + richer (still soft) flag accent */
.map-frame svg .state-path.is-active {
  fill: #e8b56a !important;
  stroke: #5c3a14;
  stroke-width: 1.55;
  filter:
    drop-shadow(0 1.2px 0 rgba(255,255,255,.7))
    drop-shadow(0 4px 6px rgba(42,33,24,.22))
    drop-shadow(0 10px 18px rgba(160,90,25,.22));
  opacity: 1;
}
.map-frame svg .state-path.band-harit.is-active {
  fill: #9fc492 !important;
  stroke: #2f4f2a;
}
.map-frame svg .state-path.band-white.is-active {
  fill: #fffdf8 !important;
  stroke: #6b5540;
}

/* Dark mode — muted Tiranga on deep parchment */
[data-theme="dark"] .map-frame svg .state-path {
  fill: #3a342c;
  stroke: #8a7a62;
  filter:
    drop-shadow(0 0.5px 0 rgba(255,230,190,.08))
    drop-shadow(0 2px 3px rgba(0,0,0,.35))
    drop-shadow(0 5px 10px rgba(0,0,0,.28));
}
[data-theme="dark"] .map-frame svg .state-path.band-kesari {
  fill: #4a3a28;
  stroke: #b08a55;
}
[data-theme="dark"] .map-frame svg .state-path.band-white {
  fill: #3c372f;
  stroke: #9a8b72;
}
[data-theme="dark"] .map-frame svg .state-path.band-harit {
  fill: #2e3a2c;
  stroke: #6a8f62;
}
[data-theme="dark"] .map-frame svg .state-path[data-kind="UT"] {
  fill: #353028;
  stroke: #8a7a62;
}
[data-theme="dark"] .map-frame svg .state-path.is-hover {
  fill: #6a4e2e !important;
  stroke: #e8c998;
  filter:
    drop-shadow(0 1px 0 rgba(255,220,160,.12))
    drop-shadow(0 4px 8px rgba(0,0,0,.45));
}
[data-theme="dark"] .map-frame svg .state-path.band-harit.is-hover {
  fill: #3d5a3a !important;
  stroke: #a8d09c;
}
[data-theme="dark"] .map-frame svg .state-path.is-active {
  fill: #8a6232 !important;
  stroke: #f0d4a0;
  filter:
    drop-shadow(0 1px 0 rgba(255,230,180,.15))
    drop-shadow(0 5px 12px rgba(0,0,0,.5));
}
[data-theme="dark"] .map-frame svg .state-path.band-harit.is-active {
  fill: #4a6e46 !important;
  stroke: #c5e6b8;
}
[data-theme="dark"] .map-frame svg .state-path.band-white.is-active {
  fill: #4a443a !important;
  stroke: #e8dcc4;
}

/* On-map labels — large enough to read at a glance */
.map-frame svg .state-label {
  pointer-events: none;
  opacity: 0.96;
}
.map-frame svg .lbl-name {
  font-family: var(--font-body), Mukta, system-ui, sans-serif;
  font-size: 15px;            /* was ~9.5 — too small */
  font-weight: 800;
  letter-spacing: 0.01em;
  fill: #1a140e;
  paint-order: stroke fill;
  stroke: rgba(255,252,245,.92);
  stroke-width: 4.2px;
  stroke-linejoin: round;
}
.map-frame svg .lbl-cap {
  font-family: var(--font-body), Mukta, system-ui, sans-serif;
  font-size: 12px;            /* was ~7.2 */
  font-weight: 700;
  fill: #3d3224;
  paint-order: stroke fill;
  stroke: rgba(255,252,245,.9);
  stroke-width: 3.6px;
  stroke-linejoin: round;
}
[data-theme="dark"] .map-frame svg .lbl-name {
  fill: #fff8ec;
  stroke: rgba(18,14,8,.88);
  stroke-width: 4.5px;
}
[data-theme="dark"] .map-frame svg .lbl-cap {
  fill: #e8d4b0;
  stroke: rgba(18,14,8,.85);
  stroke-width: 3.8px;
}
.map-frame svg .state-label.is-dim { opacity: 0.12; }
/* Hot labels stay ink/cream — never navy on saffron */
.map-frame svg .state-label.is-hot .lbl-name {
  fill: #120e0a;
  font-size: 16.5px;
  stroke-width: 5px;
}
.map-frame svg .state-label.is-hot .lbl-cap {
  fill: #2a2118;
  font-size: 13px;
}
[data-theme="dark"] .map-frame svg .state-label.is-hot .lbl-name { fill: #fffaf0; }
[data-theme="dark"] .map-frame svg .state-label.is-hot .lbl-cap { fill: #f0dfc0; }

/* On small screens still keep names readable; hide capitals if cramped */
@media (max-width: 640px) {
  .map-frame svg .lbl-name { font-size: 12.5px; stroke-width: 3.4px; }
  .map-frame svg .lbl-cap { font-size: 10px; stroke-width: 3px; }
  .map-frame svg .state-label.is-hot .lbl-name { font-size: 13.5px; }
  .map-frame svg .state-label.is-hot .lbl-cap { font-size: 11px; }
}

/* Floating tip near cursor / region */
.map-tip {
  position: absolute;
  z-index: 5;
  min-width: 160px;
  max-width: 240px;
  padding: .65rem .8rem .7rem;
  border-radius: 14px;
  background: var(--card-raise);
  border: 1px solid var(--line-strong);
  box-shadow: var(--sh-3);
  pointer-events: none;
  transform: translate(-10%, -110%);
}
.map-tip::before {
  content:""; position:absolute; left:.9rem; bottom:-6px; width:10px; height:10px;
  background:var(--card-raise); border-right:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong);
  transform: rotate(45deg);
}
.map-tip .mt-kind {
  font:700 .62rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  color: var(--kesari-deep); margin-bottom:.28rem;
}
.map-tip .mt-kind.ut { color: var(--harit-deep); }
[data-theme="dark"] .map-tip .mt-kind.ut { color: #7dca6e; }
.map-tip .mt-name {
  font:700 1.05rem/1.15 var(--font-head); color:var(--ink);
}
.map-tip .mt-cap {
  font:600 .84rem/1.3 var(--font-body); color:var(--ink-soft); margin-top:.2rem;
}
.map-tip .mt-cap::before { content:"Capital · "; font-weight:600; color:var(--ink-faint); }
.map-tip .mt-cta {
  margin-top:.45rem; font:700 .72rem/1 var(--font-body); color:var(--kesari-deep);
}

.map-footer-row {
  display:flex; flex-wrap:wrap; gap:.6rem 1.2rem; align-items:center; justify-content:space-between;
  padding: .55rem 1.1rem 1rem;
}
.map-hint {
  margin:0; font:600 .8rem/1.3 var(--font-body); color:var(--ink-faint);
}
.map-legend {
  display:flex; flex-wrap:wrap; gap:.85rem;
  font:600 .74rem/1 var(--font-body); color:var(--ink-soft);
}
.map-legend i {
  display:inline-block; width:12px; height:12px; border-radius:3px;
  margin-right:.35rem; vertical-align:middle; border:1px solid var(--line-strong);
}
.lg-state { background: linear-gradient(135deg, #efd2a8, #f6f1e7 50%, #d5e5cc); }
.lg-ut { background:#f0ebe0; }
.lg-hot { background:#e8b56a; border-color:#5c3a14 !important; }

/* ── Right-side state drawer (extends tree drawer look) ───────────────────── */
.state-drawer {
  width: min(96vw, 520px);
}
.state-drawer .drawer-top {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--kesari-soft) 55%, var(--card)), var(--card));
}
.state-drawer .sd-kind {
  display:inline-block;
  font:700 .68rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  padding:.32rem .55rem; border-radius:999px; color:#fff;
  background: var(--kesari-deep);
}
.state-drawer .sd-kind.ut { background: var(--chakra); }
.state-drawer .sd-cap {
  font:600 .95rem/1.35 var(--font-body); color:var(--ink-soft); margin-top:.35rem;
}
.state-drawer .sd-cap b { color:var(--ink); }

.sd-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.55rem; margin: .2rem 0 0.4rem;
}
.sd-stat {
  background: var(--parchment-2); border:1px solid var(--line);
  border-radius: 12px; padding:.6rem .7rem;
}
.sd-stat .k {
  font:700 .62rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.3rem;
}
.sd-stat .v { font:700 .95rem/1.25 var(--font-body); color:var(--ink); }
.sd-stat.wide { grid-column: 1 / -1; }
.sd-stat.wide .v { font-size:.86rem; font-weight:600; }

.sd-lead {
  display:grid; gap:.4rem;
  background: color-mix(in srgb, var(--kesari-soft) 40%, var(--card));
  border:1px solid var(--line-strong); border-radius:14px; padding:.75rem .85rem;
  margin-top:.2rem;
}
.sd-lead div { font-size:.92rem; color:var(--ink); line-height:1.4; }
.sd-lead b { color:var(--kesari-deep); font-weight:700; }

.sd-chips { display:flex; flex-wrap:wrap; gap:.38rem; }
.sd-chips span {
  font:600 .78rem/1.15 var(--font-body);
  padding:.38rem .58rem; border-radius:999px;
  background:var(--parchment-2); border:1px solid var(--line); color:var(--ink-soft);
}
.sd-section { margin-top: 0.15rem; }
.sd-note {
  margin-top:1.2rem; font-size:.78rem; color:var(--ink-faint); line-height:1.45;
  border-top:1px dashed var(--line); padding-top:.75rem;
}
.sd-two-col {
  display:grid; grid-template-columns:1fr 1fr; gap:.7rem 1rem;
}
@media (max-width: 420px) {
  .sd-two-col { grid-template-columns:1fr; }
  .sd-grid { grid-template-columns:1fr; }
}

.states-page .sources-block { margin-top: .2rem; }

/* ── City profile inside right drawer ───────────────────────────────────── */
.city-back {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: 100%;
  margin: 0 0 .75rem;
  padding: .65rem .8rem;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: var(--parchment-2);
  color: var(--kesari-deep);
  font: 700 .9rem/1.2 var(--font-body);
  text-align: left;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.city-back:hover {
  border-color: var(--kesari);
  background: color-mix(in srgb, var(--kesari-soft) 45%, var(--parchment-2));
  transform: translateX(-2px);
}
.city-back-arrow {
  display: inline-grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--kesari) 22%, transparent);
  font-size: 1rem;
  line-height: 1;
}
.city-drawer-top .city-back { margin-top: .15rem; padding-right: 2.6rem; }
.city-drawer-body .city-back { margin-top: 1.15rem; margin-bottom: 0; }
.city-drawer-top .city-state-tag {
  font:700 .68rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  color:var(--kesari-deep); margin: .15rem 0 .35rem;
}
.city-drawer-top .city-role {
  font:600 .92rem/1.35 var(--font-body); color:var(--ink-soft); margin:.25rem 0 0;
}
.city-drawer-body .city-hero { margin-bottom: .9rem; }
.city-img-wrap {
  position:relative; border-radius: var(--r-md); overflow:hidden;
  aspect-ratio: 16/10; background:
    linear-gradient(135deg, color-mix(in srgb, var(--kesari-soft) 80%, #fff), color-mix(in srgb, var(--harit-soft) 70%, #fff));
  border:1px solid var(--line-strong);
}
.city-img { width:100%; height:100%; object-fit:cover; display:block; }
.city-img-fallback {
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:3rem; opacity:.55;
}
.city-img-wrap:not(.no-img) .city-img-fallback { display:none; }
.city-img-wrap.no-img .city-img { display:none; }
.city-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin-bottom:.9rem;
}
.city-stats .cs {
  background:var(--parchment-2); border:1px solid var(--line); border-radius:12px; padding:.55rem .65rem;
}
.city-stats .cs:last-child { grid-column: 1 / -1; }
.city-stats .k {
  display:block; font:700 .62rem/1 var(--font-body); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.25rem;
}
.city-stats .v { font:700 .92rem/1.25 var(--font-body); color:var(--ink); }
.city-detail { font-size:.95rem; line-height:1.65; color:var(--ink); margin:0 0 .85rem; }
.city-known .k, .city-state-snap .k {
  font:700 .68rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.4rem;
}
.city-state-snap {
  margin-top:.9rem; padding:.75rem .85rem; border-radius:14px;
  background: color-mix(in srgb, var(--kesari-soft) 45%, var(--card));
  border:1px solid var(--line-strong);
}
.city-state-snap .cm { font:700 1rem/1.3 var(--font-body); color:var(--ink); }
.city-state-snap .party { font:600 .85rem/1.3 var(--font-body); color:var(--ink-soft); margin-top:.15rem; }

/* Drawer city list */
.city-list-hint {
  font-size:.82rem; color:var(--ink-faint); margin:0 0 .55rem;
}
.city-list { list-style:none; padding:0; margin:0; display:grid; gap:.4rem; }
.city-row {
  width:100%; display:grid; grid-template-columns: auto 1fr auto; gap:.55rem; align-items:center;
  text-align:left; padding:.65rem .7rem; border-radius:12px;
  background:var(--parchment-2); border:1px solid var(--line);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.city-row:hover, .city-row.is-active {
  border-color: var(--kesari);
  box-shadow: 0 0 0 3px var(--kesari-soft);
  transform: translateY(-1px);
}
.cr-num { font:800 .9rem/1 var(--font-mono); color:var(--kesari-deep); }
.cr-name { display:block; font:700 .95rem/1.2 var(--font-body); color:var(--ink); }
.cr-role { display:block; font:500 .75rem/1.25 var(--font-body); color:var(--ink-faint); margin-top:.15rem; }
.cr-meta {
  display:grid; gap:.2rem; text-align:right;
  font:600 .72rem/1.2 var(--font-body); color:var(--ink-soft);
}

/* ── Beautiful ranked state cards (earliest → latest) ─────────────────────── */
.state-cards-section { margin: 0.5rem 0 2.2rem; }
.sec-head-row { text-align:center; margin-bottom:1.1rem; }
.section-heading {
  font-size: clamp(1.25rem, 2.8vw, 1.65rem); margin:0 0 .35rem;
}
.section-sub {
  margin:0; font:600 .86rem/1.4 var(--font-body); color:var(--ink-faint);
}
.state-cards {
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.scard {
  position: relative;
  display:grid; grid-template-columns: auto 1fr;
  border-radius: 20px;
  border: 1px solid var(--line-strong);
  background: var(--card);
  box-shadow: var(--sh-2);
  overflow: hidden;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s ease;
}
.scard::before {
  content:""; position:absolute; inset:0 auto 0 0; width:5px;
  background: linear-gradient(180deg, var(--kesari), var(--harit));
}
.scard:hover {
  transform: translateY(-4px);
  box-shadow: var(--sh-3);
  border-color: color-mix(in srgb, var(--kesari) 45%, var(--line-strong));
}
.scard.is-active {
  border-color: var(--kesari);
  box-shadow: 0 0 0 3px var(--kesari-soft), var(--sh-2);
}
.scard.card-kesari { background: linear-gradient(145deg, color-mix(in srgb, #efd2a8 35%, var(--card)), var(--card) 55%); }
.scard.card-white { background: linear-gradient(145deg, color-mix(in srgb, #f6f1e7 55%, var(--card)), var(--card) 60%); }
.scard.card-harit { background: linear-gradient(145deg, color-mix(in srgb, #d5e5cc 40%, var(--card)), var(--card) 58%); }
[data-theme="dark"] .scard.card-kesari { background: linear-gradient(145deg, #2a2218, var(--card) 60%); }
[data-theme="dark"] .scard.card-white { background: linear-gradient(145deg, #221e18, var(--card) 60%); }
[data-theme="dark"] .scard.card-harit { background: linear-gradient(145deg, #1a241a, var(--card) 60%); }

.scard-rank {
  padding: 1.1rem .55rem 1rem .95rem;
  display:flex; align-items:flex-start;
}
.scard-rank .rn {
  font:800 1.55rem/1 var(--font-mono);
  color: var(--kesari-deep);
  letter-spacing: -.02em;
}
.scard-body { padding: 1rem 1rem 1rem .2rem; min-width:0; }
.scard-kind {
  display:inline-block;
  font:700 .62rem/1 var(--font-body); letter-spacing:.1em; text-transform:uppercase;
  padding:.28rem .5rem; border-radius:999px; color:#fff;
  background: var(--kesari-deep);
}
.scard-kind.ut { background: var(--harit-deep); }
.scard-name {
  font-size: 1.2rem; line-height:1.15; margin: .4rem 0 .25rem;
}
.scard-year {
  font:600 .82rem/1.3 var(--font-body); color:var(--ink-soft); margin-bottom:.65rem;
}
.scard-year b { color:var(--ink); font-weight:800; }
.scard-stats {
  display:grid; grid-template-columns:1fr 1fr; gap:.4rem; margin-bottom:.65rem;
}
.scard-stats > div {
  background: color-mix(in srgb, var(--parchment-2) 80%, transparent);
  border:1px solid var(--line); border-radius:11px; padding:.45rem .55rem;
}
.scard-stats .k {
  display:block; font:700 .6rem/1 var(--font-body); letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-faint); margin-bottom:.2rem;
}
.scard-stats .v { font:700 .86rem/1.25 var(--font-body); color:var(--ink); }
.scard-lead {
  margin-bottom:.7rem; padding:.55rem .65rem; border-radius:12px;
  background: color-mix(in srgb, var(--kesari-soft) 40%, transparent);
  border:1px solid var(--line);
}
.scard-lead .k {
  font:700 .6rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint);
}
.scard-lead .cm { font:700 .95rem/1.25 var(--font-body); color:var(--ink); margin-top:.25rem; }
.scard-lead .party { font:600 .8rem/1.25 var(--font-body); color:var(--ink-soft); }
.scard-cities .k {
  font:700 .6rem/1 var(--font-body); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:.4rem;
}
.scard-cities .top3 { list-style:none; padding:0; margin:0 0 .75rem; display:grid; gap:.3rem; }
.scard-cities .city-link {
  width:100%; display:flex; justify-content:space-between; gap:.5rem; align-items:center;
  text-align:left; padding:.4rem .5rem; border-radius:10px;
  background:var(--card); border:1px solid var(--line);
  font:600 .84rem/1.2 var(--font-body); color:var(--ink);
}
.scard-cities .city-link:hover {
  border-color: var(--kesari);
  background: color-mix(in srgb, var(--kesari-soft) 35%, var(--card));
}
.scard-cities .cn { min-width:0; }
.scard-cities .cp { font:700 .75rem/1 var(--font-mono); color:var(--ink-faint); white-space:nowrap; }
.scard-open {
  width:100%;
  font:700 .84rem/1 var(--font-body); padding:.65rem .8rem; border-radius:12px;
  background: transparent; border:1px solid var(--line-strong); color:var(--kesari-deep);
}
.scard-open:hover {
  border-color: var(--kesari);
  background: color-mix(in srgb, var(--kesari-soft) 40%, transparent);
}

/* Drawer open polish */
body.state-drawer-open .map-stage { filter: saturate(0.94); }