/* ============================================================
   Solentra: India rooftop solar tracker
   Design: a precise instrument panel. A dark "control deck" holds the
   national totals; a single sticky filter bar governs everything below;
   map and detail rail work side by side; one table, sortable.
   ============================================================ */

:root{
  --dash-ink:#0F1A14;
  --dash-deep:#0E5022;
  --dash-green:#2E9E3A;
  --dash-gold:#F5C20C;
  --dash-line:#E4EDE6;
  --dash-mute:#5F6E64;
  /* Was #93A29A: 2.67:1 on white, and it coloured the trend chart's axis
     numbers, every rail label and the result count - the small text that says
     what the big numbers mean. Text needs 4.5:1. --dash-hair keeps the old
     value for the rules and separators that are not text. */
  --dash-faint:#6B7A71;
  --dash-hair:#93A29A;
  --dash-bg:#F6F9F6;
}

/* A class carrying display:flex/grid outranks the UA [hidden] rule, which is
   how the loader stayed on screen after the data arrived. Settle it once. */
[hidden]{display:none !important}

/* ---------- 1. CONTROL DECK (dark hero + national numbers) ---------- */
.deck{
  position:relative;
  background:
    radial-gradient(120% 140% at 88% -10%, rgba(46,158,58,.30) 0%, transparent 55%),
    radial-gradient(90% 120% at 5% 0%, rgba(245,194,12,.14) 0%, transparent 50%),
    linear-gradient(168deg,#0B3F1B 0%,#0E5022 46%,#0A3417 100%);
  color:#fff;
  padding:112px 0 0;
  overflow:hidden;
}
.deck::after{ /* fine grid texture */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.16;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 78%);
}
.deck > .container{position:relative;z-index:1}
.deck .breadcrumbs{color:rgba(255,255,255,.62);margin-bottom:18px}
.deck .breadcrumbs a{color:rgba(255,255,255,.90)}
.deck .breadcrumbs .sep{opacity:.4}

.deck-top{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:end}
.deck-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dash-gold);margin-bottom:14px;
}
.deck-eyebrow::before{content:"";width:22px;height:1.5px;background:var(--dash-gold)}
.deck h1{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(32px,4.6vw,54px);line-height:1.02;letter-spacing:-.032em;
  color:#fff;margin:0 0 16px;
}
.deck h1 em{font-style:normal;color:var(--dash-gold)}
.deck-lead{font-size:16px;line-height:1.62;color:rgba(255,255,255,.80);max-width:56ch;margin:0}
.deck-meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  margin-top:20px;font-size:13px;color:rgba(255,255,255,.66);
}
.live-dot{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(245,194,12,.14);border:1px solid rgba(245,194,12,.34);
  color:var(--dash-gold);border-radius:999px;padding:5px 12px;font-weight:600;font-size:12px;
}
.live-dot i{width:7px;height:7px;border-radius:50%;background:var(--dash-gold);
  box-shadow:0 0 0 0 rgba(245,194,12,.7);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(245,194,12,0)}100%{box-shadow:0 0 0 0 rgba(245,194,12,0)}}

/* sparkline sits in the deck, right side */
.deck-spark{align-self:end;min-height:115px}
.deck-spark-label{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.55);font-weight:700;margin-bottom:8px}
.deck-spark svg{width:100%;height:74px;display:block;overflow:visible}
.deck-spark-foot{display:flex;justify-content:space-between;font-size:11.5px;
  color:rgba(255,255,255,.50);margin-top:6px}
.deck-spark-empty{font-size:13px;color:rgba(255,255,255,.62);line-height:1.55;
  border-left:2px solid rgba(245,194,12,.5);padding-left:14px}

/* national figures: one continuous strip, not floating cards */
/* Reserve what the data will occupy: these boxes lay out at first paint but
   fill about 1.5s later, so the page jumped roughly 200px under the reader. */
.figures{
  min-height:124px;
  display:grid;grid-template-columns:repeat(5,1fr);
  margin-top:52px;border-top:1px solid rgba(255,255,255,.16);
}
.fig{padding:22px 26px 30px;border-right:1px solid rgba(255,255,255,.12);position:relative}
.fig:last-child{border-right:0}
.fig-l{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(255,255,255,.56);margin-bottom:9px}
.fig-v{font-family:var(--font-display);font-weight:700;font-size:clamp(21px,2.4vw,31px);
  line-height:1;letter-spacing:-.028em;color:#fff}
.fig-s{font-size:12.5px;color:rgba(255,255,255,.60);margin-top:8px;line-height:1.45}
.fig--accent .fig-v{color:var(--dash-gold)}
.fig-delta{display:inline-block;margin-top:8px;font-size:12px;font-weight:700;
  color:#8FE3A0;background:rgba(143,227,160,.12);border-radius:6px;padding:3px 8px}

/* ---------- 2. STICKY CONTROL BAR ---------- */
.controls{
  /* The site header is also sticky at top:0 and outranks this bar on z-index,
     so pinning to 0 hid the whole Measure row behind it: clicks landed on the
     logo and navigated away. --hdr-h is measured at runtime because the header
     changes height with width and with its own .is-scrolled state. */
  position:sticky;top:var(--hdr-h,72px);z-index:30;
  background:rgba(255,255,255,.94);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dash-line);
  box-shadow:0 1px 0 rgba(15,26,20,.03);
}
.controls-inner{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;
  /* padding-block only: the shorthand was resetting .container's own side
     gutters to zero, running the controls edge to edge on a phone. */
  padding-top:13px;padding-bottom:13px}
.ctrl-group{display:flex;align-items:center;gap:8px;min-width:0}
.ctrl-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dash-faint);white-space:nowrap}

.seg{display:flex;flex-wrap:wrap;gap:3px;background:var(--dash-bg);
  border:1px solid var(--dash-line);padding:3px;border-radius:11px}
.seg button{
  border:0;background:transparent;padding:6px 11px;border-radius:8px;
  font:inherit;font-size:12.5px;font-weight:600;color:var(--dash-mute);cursor:pointer;
  transition:background .15s ease,color .15s ease;white-space:nowrap;
}
.seg button:hover{background:#E7F0E9;color:var(--dash-deep)}
.seg button[aria-pressed="true"]{background:var(--dash-deep);color:#fff}

.pick{
  appearance:none;font:inherit;font-size:16px;font-weight:600;color:var(--dash-ink);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%235F6E64' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 12px center;
  border:1px solid var(--dash-line);border-radius:10px;padding:9px 34px 9px 13px;cursor:pointer;
}
.pick:focus-visible,.seek input:focus-visible{outline:2px solid var(--dash-green);outline-offset:1px}

.seek{display:flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--dash-line);
  border-radius:10px;padding:0 13px;min-width:210px;flex:1 1 210px;max-width:320px}
.seek i{color:var(--dash-faint);font-size:15px}
.seek input{border:0;outline:0;background:transparent;font:inherit;font-size:16px;
  padding:10px 0;width:100%}

.toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-size:13px;font-weight:600;color:var(--dash-mute);
  border:1px solid var(--dash-line);border-radius:10px;padding:9px 13px;background:#fff;
  transition:border-color .15s,background .15s,color .15s}
.toggle:hover{border-color:#C9DECD}
.toggle input{position:absolute;opacity:0;width:0;height:0}
.toggle .sw{width:30px;height:17px;border-radius:999px;background:#D8E2DA;position:relative;
  transition:background .18s ease;flex:none}
.toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:#fff;transition:transform .18s cubic-bezier(.4,1.3,.5,1);
  box-shadow:0 1px 2px rgba(0,0,0,.2)}
.toggle input:checked + .sw{background:var(--dash-gold)}
.toggle input:checked + .sw::after{transform:translateX(13px)}
.toggle:has(input:checked){background:#FFFBEC;border-color:#EBD79A;color:#6B5407}
.toggle input:focus-visible + .sw{outline:2px solid var(--dash-green);outline-offset:2px}

.reset{margin-left:auto;border:0;background:transparent;font:inherit;font-size:13px;
  font-weight:600;color:var(--dash-faint);cursor:pointer;padding:8px 4px;text-decoration:underline;
  text-underline-offset:3px;transition:color .15s}
.reset:hover{color:var(--dash-deep)}
.reset[hidden]{display:none}

/* active filter chips */
.chips{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:0 0 12px}
.chips[hidden]{display:none !important}
.chips-l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dash-faint);margin-right:2px}
.chip{display:inline-flex;align-items:center;gap:7px;background:#FFF8E1;
  border:1px solid #EBD79A;color:#6B5407;border-radius:999px;
  padding:5px 6px 5px 12px;font-size:12.5px;font-weight:600}
.chip b{font-weight:700}
.chip button{border:0;background:rgba(107,84,7,.10);color:#6B5407;cursor:pointer;
  width:18px;height:18px;border-radius:50%;font-size:13px;line-height:1;
  display:grid;place-items:center;padding:0;transition:background .13s}
.chip button:hover{background:rgba(107,84,7,.24)}
.chip button:focus-visible{outline:2px solid var(--dash-green);outline-offset:1px}

/* ---------- 3. WORKBENCH (map + detail rail) ---------- */
.work{background:var(--dash-bg);padding:26px 0 40px}
.bench{display:grid;grid-template-columns:minmax(0,1.42fr) minmax(0,1fr);gap:20px;align-items:start}

.panel{background:#fff;border:1px solid var(--dash-line);border-radius:16px;
  box-shadow:0 1px 2px rgba(15,26,20,.04);min-width:0}
.panel-hd{display:flex;flex-wrap:wrap;gap:12px;align-items:baseline;justify-content:space-between;
  padding:18px 20px 0}
.panel-hd h2{font-family:var(--font-display);font-weight:700;font-size:16.5px;
  color:var(--dash-ink);margin:0;letter-spacing:-.012em}
.panel-note{font-size:12.5px;color:var(--dash-mute);margin:5px 0 0;max-width:56ch}
.panel-bd{padding:16px 20px 20px}

.count-chip{font-size:12px;font-weight:700;color:var(--dash-deep);
  background:#EEF5EF;border-radius:999px;padding:4px 11px;white-space:nowrap}
.count-chip[hidden]{display:none !important}

/* map */
.legend{display:flex;align-items:center;gap:3px}
.legend b{font-size:10.5px;color:var(--dash-faint);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin:0 5px}
.legend i{width:20px;height:9px;border-radius:2px;display:block}
/* map */
.mapwrap{overflow:visible;margin:0;padding:0}
.indiamap{width:100%;height:auto;display:block;aspect-ratio:860/760;max-height:min(72vh,780px);margin:0 auto}
.geo{stroke:#fff;stroke-width:.7;cursor:pointer;transition:opacity .15s ease,filter .15s ease}
.geo:hover{filter:brightness(1.06) drop-shadow(0 3px 8px rgba(14,80,34,.35));stroke-width:1.4;stroke:#0E5022}
.geo:focus-visible{outline:none;stroke:#F5C20C;stroke-width:2.4}
.geo.dim{opacity:.14;pointer-events:none}
.geo.mine{stroke:#F5C20C;stroke-width:1.5}
.geo.on{stroke:#0E5022;stroke-width:2.2;filter:drop-shadow(0 4px 12px rgba(14,80,34,.4))}
/* text-anchor lives here for in-map labels only. Callouts in the side gutter
   carry their own text-anchor attribute (start on the left, end on the right),
   and a CSS declaration beats an SVG presentation attribute - which centred
   them on the viewBox edge and clipped half of every one, including CH. */
.lbl{pointer-events:none;font-family:var(--font-display)}
.lbl:not(.out){text-anchor:middle}
/* These sit on a choropleth, so no single colour is safe against every fill.
   paint-order draws a halo beneath the glyphs in the opposite tone, which keeps
   them readable across the whole ramp rather than only at its ends. */
.lbl-ab{font-size:11px;font-weight:700;letter-spacing:.02em}
.lbl-v{font-size:9.5px;font-weight:600}
.lbl:not(.out){paint-order:stroke;stroke-width:2.4;stroke-linejoin:round}
.lbl:not(.out)[fill="#fff"]{stroke:rgba(9,32,17,.62)}
.lbl:not(.out)[fill="#16301F"]{stroke:rgba(255,255,255,.8)}
.lbl-ab.sm{font-size:9.5px}
.lbl.out{fill:var(--dash-mute)}
.lbl.out .lbl-ab{fill:var(--dash-ink)}
.out-v{font-size:9px;opacity:.85}
/* The callout in the gutter is the tap target for a state too small to hit on
   the map itself: at 360px Chandigarh's own path is 0.9 x 0.9 px, which no
   finger can land on. .hit is a second proxy over the state's real position. */
.callout{cursor:pointer}
.callout-hit{fill:transparent}
.callout:hover .lbl.out .lbl-ab,.callout:focus-visible .lbl.out .lbl-ab{fill:var(--dash-deep)}
.callout:focus-visible{outline:none}
.callout:focus-visible .callout-hit{fill:rgba(46,158,58,.12);stroke:var(--dash-green);stroke-width:1.5}
.hit{fill:transparent;cursor:pointer}
.leader{fill:none;stroke:#B9C7BD;stroke-width:.8}
.leader-dot{fill:#7E8F85}
.map-fallback{padding:40px 20px;text-align:center;color:var(--dash-mute);font-size:14px}

/* hover card */
.hovercard{
  /* WCAG 1.4.13: hover content must be hoverable. pointer-events:none meant a
     screen-magnifier user could never move onto it to read it. Escape and
     mouseleave both dismiss it. */
  position:fixed;z-index:60;pointer-events:auto;opacity:0;transform:translateY(4px);
  transition:opacity .13s ease,transform .13s ease;
  background:#0F2A18;color:#fff;border-radius:11px;padding:11px 14px;
  box-shadow:0 14px 34px rgba(8,30,15,.34);min-width:172px;
  border:1px solid rgba(255,255,255,.10);
}
.hovercard.show{opacity:1;transform:translateY(0)}
.hc-name{font-family:var(--font-display);font-weight:700;font-size:13.5px;margin-bottom:7px}
.hc-row{display:flex;justify-content:space-between;gap:16px;font-size:12px;line-height:1.75}
.hc-row span{color:rgba(255,255,255,.60)}
.hc-row b{font-weight:600;font-variant-numeric:tabular-nums}
.hc-hint{margin-top:8px;padding-top:7px;border-top:1px solid rgba(255,255,255,.12);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--dash-gold);font-weight:700}

/* detail rail */
.rail{position:sticky;top:calc(var(--hdr-h,72px) + var(--ctrl-h,112px) + 12px)}
.rail-hd{padding:18px 20px 14px;border-bottom:1px solid var(--dash-line)}
.rail-kind{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dash-faint);margin-bottom:5px}
.rail-name{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:-.02em;
  color:var(--dash-ink);margin:0;line-height:1.15}
.rail-sub{font-size:12.5px;color:var(--dash-mute);margin:6px 0 0}
.rail-bd{padding:16px 20px 20px;max-height:min(64vh,620px);overflow-y:auto}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--dash-line);
  border:1px solid var(--dash-line);border-radius:11px;overflow:hidden}
.cell{background:#fff;padding:11px 13px}
.cell-l{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dash-faint)}
.cell-v{font-family:var(--font-display);font-weight:700;font-size:16.5px;color:var(--dash-deep);
  margin-top:4px;letter-spacing:-.015em}
/* #A67C00 was 3.82:1 at 16.5px bold, below the 18.66px large-text allowance */
.cell--gold .cell-v{color:#8A6700}

.bar{height:5px;border-radius:3px;background:#EDF2EE;overflow:hidden;margin-top:9px}
.bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--dash-green),var(--dash-deep))}

.sub-h{font-family:var(--font-display);font-weight:700;font-size:12px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--dash-faint);margin:20px 0 9px;
  display:flex;justify-content:space-between;align-items:baseline}
.sub-h span{font-weight:600;text-transform:none;letter-spacing:0;font-size:11.5px}

.ranklist{display:flex;flex-direction:column;gap:1px}
.rankrow{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  padding:8px 10px;border-radius:8px;font-size:13px;transition:background .13s}
.rankrow:hover{background:#F5F9F5}
.rankrow .rr-n{color:var(--dash-ink);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rankrow .rr-v{font-variant-numeric:tabular-nums;color:var(--dash-mute);font-size:12.5px}
.rankrow .rr-bar{grid-column:1/-1;height:3px;border-radius:2px;background:#EDF2EE;overflow:hidden}
.rankrow .rr-bar i{display:block;height:100%;background:var(--dash-green);border-radius:2px}

/* ---------- 4. LEAGUE ---------- */
.league-wrap{margin-top:20px;min-width:0}
.tblscroll{overflow:auto;max-height:520px;border-radius:0 0 16px 16px}
table.grid{width:100%;border-collapse:collapse;font-size:13.5px}
table.grid th{
  position:sticky;top:0;z-index:2;background:#F2F7F3;color:var(--dash-deep);
  text-align:left;padding:11px 14px;font-family:var(--font-display);font-size:11.5px;
  font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border-bottom:1px solid #D9E7DC;white-space:nowrap;
}
table.grid th.sortable{cursor:pointer;user-select:none;transition:color .13s,background .13s}
/* The sortable headers and the state names are real buttons now, so they are
   reachable by Tab and fire on Enter and Space. These rules only stop them
   looking like buttons. */
table.grid th.sortable{padding:0}
.th-sort{width:100%;display:block;background:none;border:0;cursor:pointer;
  font:inherit;color:inherit;letter-spacing:inherit;text-transform:inherit;
  text-align:inherit;padding:11px 14px}
.th-sort:focus-visible,.st-open:focus-visible{outline:2px solid var(--dash-green);
  outline-offset:-2px;border-radius:4px}
.st-open{background:none;border:0;padding:0;font:inherit;color:inherit;
  cursor:pointer;text-align:left}
.st-open:hover{text-decoration:underline}
#rail:focus{outline:none}
#rail:focus-visible{outline:2px solid var(--dash-green);outline-offset:2px}
table.grid th.sortable:hover{background:#E8F1EA;color:#0A3C19}
table.grid th .arrow{opacity:.28;margin-left:4px;font-size:9px;display:inline-block}
table.grid th[aria-sort] .arrow{opacity:1;color:var(--dash-green)}
table.grid td{padding:10px 14px;border-bottom:1px solid #F1F5F1;color:var(--dash-mute)}
/* The table scrolls inside its own box rather than widening the page, which is
   right - but scrolling across to Conversion put the state name 283px
   off-screen and left a row of six numbers attached to nothing. */
table.grid td.st{position:sticky;left:0;background:#fff;z-index:1}
table.grid tbody tr:hover td.st{background:#F5F9F5}
table.grid thead th:nth-child(2){position:sticky;left:0;background:#F2F7F3;z-index:2}
table.grid td.n,table.grid th.n{text-align:right;font-variant-numeric:tabular-nums}
table.grid tbody tr{cursor:pointer;transition:background .12s}
table.grid tbody tr:hover{background:#F5FAF6}
table.grid tbody tr.on{background:#EEF6EF;box-shadow:inset 3px 0 0 var(--dash-deep)}
table.grid tbody tr.mine td:first-child{box-shadow:inset 3px 0 0 var(--dash-gold)}
table.grid .st{color:var(--dash-ink);font-weight:600}
/* was #AFBCB3 at 1.97:1 - the rank number was effectively invisible */
table.grid .rk{color:#79877F;font-size:12px;font-variant-numeric:tabular-nums}
.void-row td{text-align:center;color:var(--dash-faint);padding:38px 14px;cursor:default}
.minibar{display:inline-block;vertical-align:middle;width:44px;height:4px;border-radius:2px;
  background:#EDF2EE;margin-right:9px;overflow:hidden}
.minibar i{display:block;height:100%;background:var(--dash-green);border-radius:2px}

/* ---------- 5. INSIGHTS ---------- */
.reads{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  margin-top:20px;background:var(--dash-line);border:1px solid var(--dash-line);
  border-radius:14px;overflow:hidden}
.read{background:#fff;padding:15px 18px}
.read-t{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--dash-faint)}
.read-v{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-.022em;
  color:var(--dash-deep);margin:6px 0 5px}
.read-d{font-size:12px;line-height:1.55;color:var(--dash-mute);margin:0}

/* ---------- 6. FOOT ---------- */
.dash-foot{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:22px}
.dash-foot .spacer{flex:1}
/* carries the MNRE attribution and the boundary licence credit */
.src{font-size:12px;color:var(--dash-mute);line-height:1.7;margin:20px 0 0;max-width:92ch}
.src a{color:var(--dash-deep);font-weight:600}

.loading{display:flex;align-items:center;gap:12px;padding:70px 0;color:var(--dash-mute);font-size:15px}
.spin{width:17px;height:17px;border:2.5px solid #CFE1D3;border-top-color:var(--dash-green);
  border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.loaderr{padding:22px;border:1px solid #EAD79A;background:#FCF4D6;border-radius:12px;
  color:#5b4a12;font-size:15px;margin:30px 0}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .bench{grid-template-columns:minmax(0,1fr)}
  .rail{position:static}
  .rail-bd{max-height:none}
  .deck-top{grid-template-columns:1fr;gap:30px}
  .deck-spark{max-width:460px}
  .figures{grid-template-columns:repeat(3,1fr)}
  .fig:nth-child(3){border-right:0}
  .fig:nth-child(n+4){border-top:1px solid rgba(255,255,255,.12)}
}
@media (max-width:680px){
  /* The map's viewBox is 860 units wide and renders about 288px on a 360px
     phone - a scale of 0.335 - so 11px of SVG type lands at 3.7 real pixels and
     the whole map reads as grey specks. Font sizes inside an SVG are user
     units, so they have to be scaled up to come back to legible size. Same
     arithmetic for the trend chart's 900-unit viewBox. */
  .lbl-ab{font-size:30px}
  .lbl-v{font-size:25px}
  .lbl-ab.sm{font-size:25px}
  .out-v{font-size:24px}
  .lbl:not(.out){stroke-width:6}
  .leader{stroke-width:2}
  /* SVG units shrink with the viewBox, so a radius that is sensible on a
     desktop is a few pixels on a phone. 60 user units is about 40 CSS px
     here, against the 0.9px Chandigarh path it stands in for. */
  .hit{r:60}
  .leader-dot{r:3}
  .trendchart .gt,.trendchart .gx{font-size:29px}

  .deck{padding-top:96px}
  .figures{grid-template-columns:repeat(2,1fr)}
  .fig{padding:16px 14px 20px}
  .fig:nth-child(odd){border-right:1px solid rgba(255,255,255,.12)}
  .fig:nth-child(even){border-right:0}
  .fig:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}
  .fig:last-child{grid-column:1/-1}
  .controls-inner{padding:11px 0;gap:8px}
  .ctrl-label{display:none}
  .seek{max-width:none;flex:1 1 100%}
  .reset{margin-left:0}
  .grid2{grid-template-columns:1fr}
  .panel-bd,.rail-bd,.rail-hd{padding-left:15px;padding-right:15px}
  .panel-hd{padding-left:15px;padding-right:15px}
}
@media (prefers-reduced-motion:reduce){
  .geo,.read,.hovercard,.toggle .sw::after{transition:none}
  .live-dot i{animation:none}
}

/* ---------- trend ---------- */
.trend-panel{margin-top:20px}
.trend-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.seg.small button{padding:5px 10px;font-size:12px}
.trend-sum{display:flex;align-items:baseline;gap:9px;margin-bottom:6px}
.ts-v{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--dash-deep);letter-spacing:-.02em}
.ts-l{font-size:12.5px;color:var(--dash-mute)}
.trendchart{width:100%;height:auto;display:block;overflow:visible}
.trendchart .gl{stroke:#EDF2EE;stroke-width:1}
.trendchart .gt{fill:var(--dash-faint);font-size:10px;text-anchor:end;font-variant-numeric:tabular-nums}
.trendchart .gx{fill:var(--dash-faint);font-size:10px;text-anchor:middle}
.trendchart .pt{fill:#fff;stroke:#2E9E3A;stroke-width:2;cursor:pointer;transition:r .12s}
.trendchart .pt:hover{r:5}
.trend-empty{padding:26px 20px;background:#F7FBF7;border:1px dashed #CFE1D3;border-radius:12px}
.trend-empty strong{display:block;font-family:var(--font-display);font-size:14.5px;color:var(--dash-ink);margin-bottom:6px}
.trend-empty p{margin:0;font-size:13px;line-height:1.65;color:var(--dash-mute);max-width:74ch}
@media (max-width:640px){.trend-controls{width:100%}.seg.small{width:100%}}

/* ---------- static (indexable) data block ---------- */
.static-data{margin-top:26px;padding-top:24px;border-top:1px solid var(--dash-line)}
.static-data h2{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--dash-ink);margin:0 0 12px;letter-spacing:-.012em}
.static-data p{font-size:14px;line-height:1.7;color:var(--dash-mute);margin:0 0 12px;max-width:78ch}
.static-data strong{color:var(--dash-ink);font-weight:600}
.dash-static-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:14px;display:block;overflow-x:auto;white-space:nowrap}
.dash-static-table caption{caption-side:top;text-align:left;font-size:12px;color:var(--dash-faint);padding-bottom:8px;white-space:normal}
.dash-static-table th[scope=col]{background:#F2F7F3;color:var(--dash-deep);text-align:left;padding:9px 12px;font-family:var(--font-display);font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:1px solid #D9E7DC}
.dash-static-table th[scope=row]{text-align:left;font-weight:600;color:var(--dash-ink);padding:8px 12px;border-bottom:1px solid #F1F5F1}
.dash-static-table td{padding:8px 12px;border-bottom:1px solid #F1F5F1;color:var(--dash-mute);font-variant-numeric:tabular-nums}
.dash-static-table tbody tr:hover{background:#F7FBF7}

/* contextual link out to the tracker, used on the content pages */
.tracker-callout{background:#F3F9F4;border-left:3px solid var(--dash-green,#2E9E3A);
  border-radius:0 10px 10px 0;padding:12px 16px;font-size:14.5px;line-height:1.65;margin:0 0 16px}
.tracker-callout a{color:#0E5022;font-weight:600}

/* ---- deck scope + live metric --------------------------------------------
   The figures used to be nailed to the national totals. They now describe
   whatever is selected, so the deck has to say what it is describing, and the
   tile carrying the active metric is marked so the segmented control visibly
   does something. */
.fig-scope{padding:11px 26px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dash-gold);
  border-top:1px solid rgba(255,255,255,.12)}
.fig--live{background:rgba(245,194,12,.07)}
.fig--live .fig-l{color:var(--dash-gold)}

/* districts are openable from the rail */
button.rankrow{width:100%;text-align:left;background:none;border:0;font:inherit;
  cursor:pointer;font-family:inherit}
button.rankrow:hover{background:#F5F9F5}
button.rankrow:focus-visible{outline:2px solid var(--dash-green);outline-offset:-2px}
.rail-back{background:none;border:0;padding:0;font:inherit;color:var(--dash-green);
  font-weight:700;cursor:pointer;text-decoration:underline}
.rail-back:hover{color:var(--dash-ink)}