/* ---------------------------------------------------------------------------
   The Frozen House. Cool, precise, slightly austere: the subject is
   constitutional arithmetic and contested federalism, so the page is quiet and
   the map is the only loud thing on it.

   Diverging scale is orange to blue. Not red to green, and not red to blue
   either: red reads as alarm, and this page should not editorialise about which
   direction is the bad one.
--------------------------------------------------------------------------- */

:root {
  --ink:        #16191c;
  --ink-2:      #3d454c;
  --muted:      #626c75;
  --faint:      #8b949c;
  --paper:      #f2f3f4;
  --panel:      #ffffff;
  --rule:       #d5dade;
  --rule-soft:  #e6eaed;
  --accent:     #1f4f7a;
  --accent-ink: #14384f;

  /* Diverging, colour-blind safe. Loss warm, gain cool. */
  --loss-4: #8c4a08;
  --loss-3: #bf6a12;
  --loss-2: #e39b4f;
  --loss-1: #f6d5ac;
  --zero:   #e9eaea;
  --gain-1: #cfe0ec;
  --gain-2: #82aecd;
  --gain-3: #3c7ba6;
  --gain-4: #17486b;

  --focus: #b3541e;

  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, monospace;
  /* Fira Sans carries the interface and every number: it has real tabular
     figures and stays legible at 11px in a dense table. IBM Plex Serif carries
     display type and long-form prose, where a serif slows the eye down in a way
     that suits constitutional argument. Both have full fallbacks, so a blocked
     or slow font request degrades rather than breaking the layout. */
  --sans: "Fira Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

/* `display:flex` on a component beats the hidden attribute's UA default of
   display:none, so conditional rows would stay visible. Settle it once. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  font-variant-numeric: tabular-lining-nums;
}

/* Every number on this page is meant to be compared with the number above it. */
table, .num, input[type="number"], .blocks, .readout, .legend, .headline { font-variant-numeric: tabular-nums; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: 10px 16px; z-index: 50;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- masthead */
.masthead {
  background: var(--ink);
  color: #eef1f3;
  padding: 30px 0 34px;
  border-bottom: 4px solid var(--accent);
}

/* Author credit. Quiet in the masthead, conventional in the footer. */
.credit { margin: 0; font-size: 13px; line-height: 1.6; }
.credit-links { display: inline-flex; flex-wrap: wrap; gap: 4px 14px; margin-left: 10px; }
.credit a { text-underline-offset: 2px; }
.credit-masthead {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid #2c3842; color: #93a5b2;
}
.credit-masthead a { color: #9ec6dd; }
.credit-masthead a:hover { color: #d6e8f2; }
.footer .credit { color: var(--ink-2); margin-bottom: 6px; }
.footer .credit a { color: var(--accent); }

.brand { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.brand-mark { width: 34px; height: 21px; color: var(--brand-mark, #7fb0cf); flex: none; }
.brand-name {
  margin: 0; font-family: var(--sans); font-size: 13.5px; font-weight: 500;
  letter-spacing: .015em; color: #b9c9d5;
}
.brand-name span { color: #7fb0cf; font-weight: 600; }

.masthead h1 {
  margin: 0 0 15px;
  font-family: var(--serif);
  font-size: clamp(32px, 6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.018em;
  font-weight: 500;
}
.standfirst {
  margin: 0 0 18px;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(15.5px, 1.9vw, 18.5px); line-height: 1.58; color: #cbd7df;
}
.status {
  margin: 0 0 16px; font-size: 13px; line-height: 1.5;
  color: #93a5b2; border-left: 2px solid #3a4a57; padding-left: 12px;
}
.masthead-links { margin: 0; display: flex; gap: 18px; flex-wrap: wrap; }
.masthead-links a {
  font-size: 13.5px; color: #9ec6dd; text-decoration: none;
  border-bottom: 1px solid #46606f; padding-bottom: 2px;
}
.masthead-links a:hover { color: #d6e8f2; border-bottom-color: #9ec6dd; }

/* ---------------------------------------------------------------- controls */
.controls {
  background: var(--panel);
  border: 1px solid var(--rule);
  margin: 26px 0;
  padding: 20px;
}

.presets { border-bottom: 1px solid var(--rule-soft); padding-bottom: 16px; margin-bottom: 18px; }
.presets-label { font-size: 13px; color: var(--muted); display: block; margin-bottom: 8px; }
/* One quiet tray rather than a row of boxed buttons: the presets read as a
   single control, and the chosen one lifts out as a white tile with a thin
   accent rule, instead of flooding solid blue. Square corners throughout. */
.preset-buttons {
  display: flex; flex-wrap: wrap; gap: 3px; padding: 3px;
  background: #eef1f3; border: 1px solid var(--rule-soft);
}
.preset {
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  background: transparent; color: var(--muted);
  border: 0; padding: 8px 14px;
  box-shadow: inset 0 -2px 0 transparent;
  /* Stretch to fill each row, so a tray that wraps stays a clean rectangle
     rather than ending in a ragged half-empty line. */
  flex: 1 1 auto; text-align: center;
}
.preset:hover { background: rgba(255, 255, 255, .6); color: var(--ink); }
.preset.is-on {
  background: #fff; color: var(--accent-ink);
  box-shadow: inset 0 -2px 0 var(--accent), 0 1px 2px rgba(22, 25, 28, .08);
}
.preset:focus-visible { outline-offset: -2px; }
.preset-caption {
  margin: 10px 0 0; font-size: 13.5px; color: var(--ink-2); min-height: 1.4em;
}

.control-grid {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(238px, 1fr));
}
.field label, .constraints legend {
  display: block; font-size: 13px; font-weight: 600; color: var(--ink);
  margin-bottom: 6px;
}
.hint { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.42; }

select, input[type="number"] {
  font: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--rule); padding: 7px 8px; width: 100%;
  border-radius: 0;
}
select:hover, input[type="number"]:hover { border-color: var(--faint); }

.house-row { display: flex; gap: 10px; align-items: center; }
.house-row input[type="range"] { flex: 1; min-width: 0; accent-color: var(--accent); }
.house-row input[type="number"] { width: 82px; flex: none; font-variant-numeric: tabular-nums; }

.constraints { border: 0; padding: 18px 0 0; margin: 18px 0 0; border-top: 1px solid var(--rule-soft); }
.constraints legend { padding: 0; }
.check { display: flex; gap: 9px; align-items: flex-start; margin-bottom: 11px; cursor: pointer; }
.check input[type="checkbox"] { margin-top: 3px; accent-color: var(--accent); flex: none; }
.check strong { display: block; font-size: 14px; font-weight: 600; }
.check em { display: block; font-style: normal; font-size: 12.5px; color: var(--muted); line-height: 1.42; }
.check-sub { margin: -4px 0 12px 26px; align-items: center; gap: 8px; }
.check-sub label { font-size: 13px; margin: 0; }
.check-sub input { width: 116px; }
.check-sub .hint { margin: 0; }

.control-actions { display: flex; gap: 9px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.btn {
  font: inherit; font-size: 13.5px; cursor: pointer;
  background: var(--accent); color: #fff; border: 1px solid var(--accent);
  padding: 8px 14px;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.btn-quiet { background: #fff; color: var(--ink-2); border-color: var(--rule); }
.btn-quiet:hover { background: #eef1f3; }
.copied { font-size: 13px; color: var(--accent); }

.linkish {
  font: inherit; font-size: inherit; color: var(--accent);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}

/* ------------------------------------------------------------------ alerts */
.alert {
  border: 1px solid #c9a227; background: #fdf7e4; color: #4a3c07;
  padding: 13px 15px; margin: 0 0 18px; font-size: 14px; line-height: 1.5;
}
.alert.is-error { border-color: #a8471c; background: #fbeee8; color: #5a2410; }
.alert strong { display: block; margin-bottom: 3px; }
.alert .btn { margin-top: 9px; }

/* ---------------------------------------------------------------- headline */
.headline-grid {
  display: grid; gap: 1px; background: var(--rule);
  border: 1px solid var(--rule); margin-bottom: 26px;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
}
.stat { background: var(--panel); padding: 14px 16px; }
.stat .k { font-size: 12px; color: var(--muted); margin: 0 0 4px; }
.stat .v { font-size: 25px; font-weight: 600; letter-spacing: -0.02em; margin: 0; line-height: 1.1; }
.stat .s { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.stat .v.up { color: var(--gain-4); }
.stat .v.down { color: var(--loss-4); }

/* -------------------------------------------------------------------- head */
.section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin: 34px 0 4px;
}
.section-head h2, .panel h2, .prose h2 {
  margin: 0; font-family: var(--serif); font-size: 23px;
  font-weight: 500; letter-spacing: -0.01em;
}
.section-note { margin: 6px 0 14px; font-size: 13.5px; color: var(--muted); }

.viewtoggle { display: flex; border: 1px solid var(--rule); }
.seg {
  font: inherit; font-size: 13px; cursor: pointer;
  background: #fff; color: var(--ink-2); border: 0; padding: 7px 13px;
}
.seg + .seg { border-left: 1px solid var(--rule); }
.seg.is-on { background: var(--ink); color: #fff; }

/* ----------------------------------------------------------------- chamber */
.chamber-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) 328px;
  gap: 20px; align-items: center;
  background: var(--panel); border: 1px solid var(--rule); padding: 16px 18px;
}
.chamber { min-width: 0; }
.chamber svg { display: block; width: 100%; height: auto; }
.chamber .hc-total {
  font-family: var(--serif); font-size: 40px; font-weight: 500; fill: var(--ink);
  font-variant-numeric: tabular-nums;
}
.chamber .hc-total-label { font-size: 12.5px; fill: var(--muted); letter-spacing: .02em; }
.chamber .hc-sub { font-size: 11.5px; fill: var(--faint); }

.chamber-legend { font-size: 13px; }
.cl-row {
  display: grid; grid-template-columns: 12px 1fr auto auto auto;
  gap: 9px; align-items: baseline; padding: 6px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.cl-dot { width: 10px; height: 10px; border-radius: 50%; align-self: center; }
.cl-name { color: var(--ink); }
.cl-seats { font-weight: 600; font-variant-numeric: tabular-nums; }
.cl-share { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; }
.cl-delta { font-variant-numeric: tabular-nums; min-width: 58px; text-align: right; color: var(--faint); }
.cl-delta.up { color: var(--gain-4); font-weight: 600; }
.cl-delta.down { color: var(--loss-4); font-weight: 600; }
.cl-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--faint); line-height: 1.45; }


/* --------------------------------------------------------------------- map */
/* India in Mercator is taller than it is wide, so an unconstrained map runs
   well past the fold on a laptop. Cap the figure's WIDTH rather than the SVG's
   height: capping the height instead leaves the drawing letterboxed inside a
   too-wide box with dead gutters either side. The readout takes the slack. */
.map-layout {
  display: grid; gap: 18px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 400px);
}
.map-figure {
  margin: 0; background: var(--panel); border: 1px solid var(--rule);
  padding: 6px; max-width: 700px;
}
#map svg { display: block; width: 100%; height: auto; }
#map path.unit {
  stroke: #ffffff; stroke-width: .7; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; cursor: pointer;
}
/* No browser focus ring or tap flash: both draw a rectangle round the shape's
   bounding box, which on a state as ragged as Madhya Pradesh looks broken.
   Keyboard focus is shown instead by an outline that follows the border. */
#map { -webkit-tap-highlight-color: transparent; }
#map path.unit:focus, #map path.unit:focus-visible { outline: none; }
/* The hover outline lives in its own layer on top (see map.js), so every
   edge of a highlighted state shows the full stroke, shared border or coast. */
#map path.hl {
  fill: none; pointer-events: none; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* Soft rather than black: a translucent slate reads on the palest fill and the
   darkest blue alike without shouting over the colour it is outlining. */
#map path.hl-hover { stroke: rgba(40, 52, 62, .55); stroke-width: 1.3; }
#map path.hl-hover.is-focus { stroke: var(--focus); stroke-width: 2.4; }
#map path.unit.is-absent, #map path.lifted.is-absent { fill: url(#hatch) !important; }

/* Selecting a state lifts it: a copy grows toward the centre while the rest of
   India recedes — faded, desaturated, slightly out of focus and set back. */
#map .sea { fill: transparent; }
#map .stage { transform-box: view-box; transform-origin: 50% 48%; }
#map svg.has-selection .stage { opacity: .3; filter: grayscale(.8) blur(1.4px); transform: scale(.95); }
/* The hole the state leaves behind. */
#map svg.has-selection path.unit.is-selected { fill: var(--panel) !important; }
#map path.lifted {
  stroke: #ffffff; stroke-width: 1.2; stroke-linejoin: round;
  vector-effect: non-scaling-stroke; cursor: zoom-out;
}
#map .lift.is-lifted path.lifted { filter: drop-shadow(0 10px 16px rgba(22, 25, 28, .26)); }
#map .lift-name {
  font-family: var(--sans); font-size: 22px; font-weight: 600; fill: var(--ink);
  pointer-events: none;
}
/* The label is sized in map units, so on a phone the map's shrink would take it
   down to about 10px. Compensate so it still reads at roughly 17px. */
@media (max-width: 620px) {
  #map .lift-name { font-size: 38px; }
}

.legend { margin: 8px 4px 2px; font-size: 12px; color: var(--muted); }
.legend .swatches { display: flex; gap: 0; margin: 5px 0 4px; }
.legend .sw { height: 13px; flex: 1; }
.legend .ends { display: flex; justify-content: space-between; font-size: 11.5px; }

.readout {
  background: var(--panel); border: 1px solid var(--rule); padding: 15px; min-height: 220px;
  position: sticky; top: 14px;   /* follows the map while the eye moves down it */
}
.readout-empty { margin: 0; font-size: 13.5px; color: var(--faint); }
.readout h3 { margin: 0 0 2px; font-size: 17px; font-weight: 620; }
.readout .sub { margin: 0 0 12px; font-size: 12px; color: var(--muted); }
.readout dl { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; font-size: 13.5px; }
.readout dt { color: var(--muted); }
.readout dd { margin: 0; text-align: right; font-weight: 600; }
.readout .big { font-size: 21px; }
.readout .up { color: var(--gain-4); }
.readout .down { color: var(--loss-4); }
.readout .vw-line {
  margin: 13px 0 0; padding-top: 11px; border-top: 1px solid var(--rule-soft);
  font-size: 13px; color: var(--ink-2); line-height: 1.45;
}

.carto { font-size: 12px; color: var(--faint); margin: 10px 0 0; line-height: 1.45; }

/* ------------------------------------------------------------------ blocks */
.blocks { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); }
.block { background: var(--panel); border: 1px solid var(--rule); padding: 10px 11px 11px; }
.block-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.block-name { font-size: 13px; font-weight: 600; }
.block-delta { font-size: 12.5px; font-weight: 600; }
.block-delta.up { color: var(--gain-4); }
.block-delta.down { color: var(--loss-4); }
.block-delta.same { color: var(--faint); }
.block-sub { font-size: 11.5px; color: var(--muted); margin: 1px 0 7px; }
.squares { display: flex; flex-wrap: wrap; gap: 2px; }
.sq { width: 9px; height: 9px; }
.sq.kept { background: #9aa4ac; }
.sq.gain { background: var(--gain-3); }
.sq.loss { background: transparent; border: 1.5px solid var(--loss-3); }

/* ------------------------------------------------------------------ panels */
.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; margin-top: 34px; }
.panel { background: var(--panel); border: 1px solid var(--rule); padding: 17px 18px 18px; }

.share-row { margin-bottom: 15px; }
.share-top { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 5px; }
.share-top .nm { font-weight: 600; }
.share-top .vl { color: var(--ink-2); }
.share-bar { position: relative; height: 20px; background: #eceef0; }
.share-fill { height: 100%; background: var(--accent); }
.share-now { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--ink); }
.share-legend { font-size: 12px; color: var(--muted); margin-top: 10px; }
.membership { font-size: 12.5px; color: var(--muted); margin-top: 12px; line-height: 1.55; }
.membership p { margin: 0 0 7px; }
.membership .cl-dot { display: inline-block; margin-right: 6px; vertical-align: 0; }

.vw-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.vw-table th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; padding: 0 0 5px; }
.vw-table td { padding: 4px 0; border-top: 1px solid var(--rule-soft); }
.vw-table td:last-child, .vw-table th:last-child { text-align: right; }
.vw-bar { display: inline-block; height: 9px; vertical-align: middle; margin-right: 7px; }
.vw-head { font-size: 12px; font-weight: 600; color: var(--ink); margin: 14px 0 5px; }
.vw-head:first-child { margin-top: 0; }
.vw-punch {
  margin: 15px 0 0; padding-top: 13px; border-top: 1px solid var(--rule);
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
}

/* ------------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; background: var(--panel); border: 1px solid var(--rule); }
#table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 13px; white-space: nowrap; }
#table th, #table td { padding: 7px 11px; border-bottom: 1px solid var(--rule-soft); text-align: right; }
#table th:first-child, #table td:first-child {
  text-align: left; position: sticky; left: 0; background: var(--panel);
  border-right: 1px solid var(--rule); font-weight: 600;
}
#table thead th {
  position: sticky; top: 0; background: #eef1f3; z-index: 2;
  font-size: 11.5px; color: var(--ink-2); cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--rule);
}
#table thead th:first-child { z-index: 3; background: #eef1f3; }
#table thead th[aria-sort="ascending"]::after  { content: " \2191"; }
#table thead th[aria-sort="descending"]::after { content: " \2193"; }
#table tbody tr:hover td { background: #f7f9fa; }
#table tbody tr:hover td:first-child { background: #f7f9fa; }
#table td.up { color: var(--gain-4); font-weight: 600; }
#table td.down { color: var(--loss-4); font-weight: 600; }

/* ------------------------------------------------------------------- prose */
.prose { margin: 44px 0 0; }
.prose h2 { margin: 0 0 12px; }
.prose h3 {
  margin: 28px 0 7px; font-family: var(--sans);
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.prose p, .prose li {
  font-family: var(--serif); font-weight: 300;
  font-size: 15.5px; line-height: 1.68; color: var(--ink-2);
}
.prose .lede {
  font-size: 16.5px; color: var(--ink); border-left: 2px solid var(--accent);
  padding-left: 14px; margin-bottom: 18px;
}
.prose a { color: var(--accent); text-underline-offset: 2px; }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.fine { font-size: 13px; color: var(--muted); }
.prose cite { font-style: italic; }

.mtable { width: 100%; border-collapse: collapse; font-size: 13.5px; margin: 4px 0 0; }
.mtable th, .mtable td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.mtable th { font-weight: 600; color: var(--ink); white-space: nowrap; }
.mtable td { color: var(--ink-2); }

.paradox-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.pill {
  font-size: 12.5px; background: #fdf1e3; border: 1px solid #e0bd92;
  color: #6d3d0c; padding: 4px 9px; font-variant-numeric: tabular-nums;
}

.src { margin: 0 0 15px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.src b { color: var(--ink); font-weight: 600; }
.src a { color: var(--accent); word-break: break-word; }
.src .meta { color: var(--muted); font-size: 12.5px; }

/* ------------------------------------------------------- the reference page */
.doc-masthead { background: var(--ink); padding: 14px 0; }
.doc-back {
  display: inline-flex; align-items: center; gap: 10px;
  color: #b9c9d5; text-decoration: none; font-size: 13.5px;
}
.doc-back .brand-mark { width: 30px; height: 19px; color: #7fb0cf; }
.doc-back .bn { color: #7fb0cf; font-weight: 600; }
.doc-back:hover { color: #e8eff4; }

.doc-layout {
  display: grid; grid-template-columns: 232px minmax(0, 1fr);
  gap: 46px; align-items: start; padding-top: 34px;
}
.doc-nav { position: sticky; top: 18px; font-size: 13px; }
.doc-nav-head { margin: 0 0 8px; font-size: 11.5px; color: var(--faint); font-weight: 600; }
.doc-nav ol { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.doc-nav ol ol { padding-left: 14px; margin: 4px 0; }
.doc-nav li { margin-bottom: 5px; }
.doc-nav a {
  color: var(--ink-2); text-decoration: none;
  border-left: 2px solid var(--rule); padding-left: 10px; display: block;
}
.doc-nav a:hover { color: var(--accent); border-left-color: var(--accent); }

.doc { padding-bottom: 30px; }
.doc-kicker { margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.doc h1 {
  margin: 0 0 14px; font-family: var(--serif); font-weight: 500;
  font-size: clamp(30px, 4.6vw, 44px); line-height: 1.08; letter-spacing: -0.015em;
}
.doc-lede {
  font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 1.55;
  color: var(--ink-2); margin: 0 0 34px; padding-bottom: 26px;
  border-bottom: 1px solid var(--rule);
}
.doc h2 {
  font-family: var(--serif); font-weight: 500; font-size: 26px;
  margin: 46px 0 12px; letter-spacing: -0.01em; scroll-margin-top: 18px;
}
.doc h3 {
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  margin: 28px 0 8px; color: var(--ink); scroll-margin-top: 18px;
}
.doc h4 { font-family: var(--sans); font-weight: 600; font-size: 13.5px; margin: 0 0 6px; }
.doc p, .doc li {
  font-family: var(--serif); font-weight: 300;
  font-size: 16px; line-height: 1.7; color: var(--ink-2);
}
.doc a { color: var(--accent); text-underline-offset: 2px; }
.doc strong { font-weight: 600; color: var(--ink); }
.doc cite { font-style: italic; }

.formula {
  font-family: var(--mono) !important; font-size: 14.5px !important;
  background: #eaedef; border-left: 3px solid var(--accent);
  padding: 11px 14px; margin: 14px 0; color: var(--ink) !important;
}
.doc-callout {
  background: #eef3f7; border: 1px solid #c5d7e4;
  padding: 15px 17px; margin: 18px 0; font-size: 16.5px !important;
}
.doc-fine { font-size: 14px !important; color: var(--muted) !important; }
.doc-tag {
  font-family: var(--sans); font-size: 11px; font-weight: 500;
  background: #ece8e1; color: #6d5a3c; padding: 2px 7px; vertical-align: middle;
}
.doc-steps { padding-left: 22px; }
.doc-steps li { margin-bottom: 8px; }
.doc-reading li { margin-bottom: 12px; font-size: 15px; }
.doc-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 16px 0; }
.doc-col { background: var(--panel); border: 1px solid var(--rule); padding: 14px 15px; }
.doc-col p { font-size: 14.5px; margin: 0; }
.doc-foot {
  margin-top: 44px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 14px !important;
}

.doc-table-wrap { overflow-x: auto; margin: 14px 0; }
.doc-table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: 13.5px; }
.doc-table th, .doc-table td {
  text-align: left; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule-soft);
}
.doc-table thead th { font-weight: 600; color: var(--ink); border-bottom: 1px solid var(--rule); }
.doc-table td { color: var(--ink-2); }

/* the live worked example */
.demo { background: var(--panel); border: 1px solid var(--rule); padding: 16px 17px; margin: 18px 0; }
.demo-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.demo-controls label { font-family: var(--sans); font-size: 13px; font-weight: 600; }
.demo-controls input[type="range"] { flex: 1; max-width: 260px; accent-color: var(--accent); }
.demo-controls output {
  font-family: var(--sans); font-weight: 600; font-size: 17px;
  font-variant-numeric: tabular-nums; min-width: 30px;
}
.demo-table-wrap { overflow-x: auto; }
.demo-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--sans); font-size: 13px; font-variant-numeric: tabular-nums;
}
.demo-table th, .demo-table td {
  padding: 7px 10px; text-align: right; border-bottom: 1px solid var(--rule-soft);
}
.demo-table thead th { font-size: 11.5px; color: var(--muted); font-weight: 600; text-align: right; }
.demo-table tbody th, .demo-table thead th:first-child { text-align: left; font-weight: 600; }
.demo-table .seats { font-weight: 700; font-size: 15px; }
.demo-table tr.is-fall td, .demo-table tr.is-fall th { background: #fdf0e6; }
.demo-table .tick { color: var(--gain-3); font-weight: 600; }
.demo-table .fall { color: var(--loss-3); }
.demo-note { font-family: var(--sans) !important; font-size: 13.5px !important; margin: 12px 0 0; }
.demo-note .warn { color: #8c4a08; font-weight: 600; }

@media (max-width: 900px) {
  /* minmax(0, 1fr), not 1fr: a bare 1fr track has an automatic minimum and
     lets the multi-column contents list force it wider than the viewport,
     which scrolled the whole page sideways on phones. */
  .doc-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .doc-nav { position: static; min-width: 0; border-bottom: 1px solid var(--rule); padding-bottom: 14px; }
  .doc-nav ol { columns: 2; column-gap: 20px; }
  .doc-cols { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .doc-nav ol { columns: 1; }
  .doc h2 { font-size: 23px; margin-top: 38px; }
  .doc p, .doc li { font-size: 15.5px; }
}

/* ------------------------------------------------------------------ footer */
.footer { margin-top: 50px; padding: 24px 0 44px; border-top: 1px solid var(--rule); }
.footer p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.footer-brand {
  font-family: var(--serif) !important; font-size: 15px !important;
  color: var(--ink) !important; margin-bottom: 6px !important;
}

/* Legend foot needs its own rule now the ends row is a three-column flex. */
.legend-foot { margin-top: 6px; }

/* ------------------------------------------------------------- responsive */
@media (max-width: 960px) {
  .map-layout { grid-template-columns: 1fr; }
  .map-figure { max-width: none; }
  /* Stacked, the readout sits below the map, so pinning it to the top of the
     viewport would park it over the content instead of beside it. */
  .readout { min-height: 0; position: static; }
}
@media (max-width: 900px) {
  .chamber-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .wrap { padding: 0 14px; }
  .masthead { padding: 22px 0 26px; }
  /* Credit links drop under the credit line rather than wrapping mid-sentence. */
  .credit-links { display: flex; margin: 4px 0 0; }
  /* A three-way toggle cannot share one 347px row without every label breaking
     across two lines, so it stacks. The two-way chamber toggle still fits. */
  .viewtoggle:has(.seg:nth-child(3)) { flex-direction: column; }
  .viewtoggle:has(.seg:nth-child(3)) .seg + .seg { border-left: 0; border-top: 1px solid var(--rule); }
  .viewtoggle:has(.seg:nth-child(3)) .seg { text-align: left; padding: 9px 12px; }
  .preset-buttons { gap: 6px; }
  .preset { flex: 1 1 auto; text-align: center; }
  .status { padding-left: 10px; }
  .chamber-wrap { padding: 12px; }
  .cl-row { grid-template-columns: 12px 1fr auto auto; gap: 7px; font-size: 12.5px; }
  .cl-share { display: none; }
  .controls { padding: 15px; margin: 18px 0; }
  .control-grid { grid-template-columns: 1fr; gap: 15px; }
  .headline-grid { grid-template-columns: 1fr 1fr; }
  .blocks { grid-template-columns: repeat(auto-fill, minmax(136px, 1fr)); gap: 10px; }
  .section-head { margin-top: 28px; }
  .viewtoggle { width: 100%; }
  .seg { flex: 1; padding: 9px 8px; }
  .prose { margin-top: 32px; }
  #table th, #table td { padding: 6px 9px; }
}

@media (prefers-reduced-motion: no-preference) {
  #map path.unit, #map path.lifted { transition: fill 180ms ease; }
  #map .stage { transition: opacity 420ms ease, filter 420ms ease, transform 560ms cubic-bezier(.2, .7, .2, 1); }
  #map .lift path.lifted { transition: fill 180ms ease, filter 360ms ease; }
  .share-fill { transition: width 220ms ease; }
  .btn, .seg { transition: background-color 120ms ease; }
  .preset { transition: background-color 160ms ease, color 160ms ease, box-shadow 200ms ease; }
}

@media print {
  .controls, .viewtoggle, .btn, .skip { display: none; }
  body { background: #fff; }
}