/* Generated from build/shared/palette.js — do not edit by hand. */
:root {
  --hm-blue: #005A8C;
  --hm-teal: #008080;
  --hm-green: #28A745;
  --hm-ink: #333333;
  --hm-bg: #F8F9FA;
  --hm-seq-0: #ECF4FF;
  --hm-seq-1: #C2D5EF;
  --hm-seq-2: #99B7DA;
  --hm-seq-3: #729AC4;
  --hm-seq-4: #497DAD;
  --hm-seq-5: #196196;
  --hm-seq-6: #00467E;
  --hm-div-0: #792E00;
  --hm-div-1: #A76E34;
  --hm-div-2: #D3AD8C;
  --hm-div-3: #F0F4F7;
  --hm-div-4: #93BBDB;
  --hm-div-5: #3F83B5;
  --hm-div-6: #004B8C;
  --hm-cat-0: #005A8C;
  --hm-cat-1: #B97300;
  --hm-cat-2: #008080;
  --hm-cat-3: #7749A4;
  --hm-cat-4: #28A745;
  --hm-cat-5: #C04A3B;
  --hm-cat-6: #3C9DC3;
  --hm-cat-7: #922F66;
  --hm-n-0: #F7FAFD;
  --hm-n-1: #EDF0F3;
  --hm-n-2: #DFE2E4;
  --hm-n-3: #C8CBCE;
  --hm-n-4: #A2A5A8;
  --hm-n-5: #787B7D;
  --hm-n-6: #535658;
  --hm-n-7: #333638;
}

/* Generated by build/ingest-fonts.js — do not edit by hand.
   Montserrat and Open Sans, SIL Open Font License 1.1. Re-run `npm run fonts`
   to refresh. */

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/montserrat-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/montserrat-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/open-sans-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/open-sans-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/open-sans-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Health Monitor — Foundation for Research in Health Systems
   --------------------------------------------------------------------------
   Design direction: "the statistical annexure, made live".

   The sources behind this platform — Census tables, SRS bulletins, NFHS
   reports — all share one printed vernacular: a numbered table, a stamp of
   unit / source / year, and a symbol-keyed footnote apparatus. That vernacular
   is the identity here, rather than a generic dashboard look, because it is
   already how the audience reads this data.

   The signature element is the PROVENANCE STAMP: a small letterspaced block
   carrying unit · source · year, which rides with every column, every chart
   series and every explorer chip. In a tool whose whole purpose is combining
   indicators across tables, knowing that one column is Census 2001 and the
   next is NFHS 2015-16 is not a footnote — it is the most important thing on
   the screen, so it is drawn like it.

   Colour discipline: blue is structure, teal is provenance, green means
   "in your selection" and nothing else.

   Design tokens (--hm-blue, --hm-seq-*, --hm-cat-* …) are generated from
   build/shared/palette.js and prepended to this file at build time.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Semantic layer
   -------------------------------------------------------------------------- */

:root {
  --surface: #ffffff;
  --surface-sunken: var(--hm-bg);
  --surface-raised: #ffffff;

  --line: var(--hm-n-2);
  --line-soft: var(--hm-n-1);
  --line-strong: var(--hm-n-3);

  --text: var(--hm-ink);
  --text-muted: var(--hm-n-6);
  --text-faint: var(--hm-n-5);
  --text-invert: #ffffff;

  --accent: var(--hm-blue);
  --accent-ink: #00436a;
  --provenance: var(--hm-teal);
  --selected: var(--hm-green);

  --focus: #0b7fc7;

  --font-display: 'Montserrat', 'Segoe UI', system-ui, sans-serif;
  --font-body: 'Open Sans', 'Segoe UI', system-ui, sans-serif;

  --step--2: 0.6875rem;
  --step--1: 0.8125rem;
  --step-0: 1.0625rem;
  --step-1: 1.1875rem;
  --step-2: 1.375rem;
  --step-3: 1.625rem;
  --step-4: clamp(2rem, 1.35rem + 2.3vw, 2.875rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --radius: 6px;
  --radius-sm: 3px;
  --shadow: 0 1px 2px rgba(0, 40, 70, 0.06), 0 4px 16px -10px rgba(0, 40, 70, 0.25);

  --shell: 1320px;
  --measure: 68ch;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 120ms;
  --slow: 600ms;
}

/* --------------------------------------------------------------------------
   2. Reset and base
   -------------------------------------------------------------------------- */

*,
*::before,
*::after { box-sizing: border-box; }

/* Any author `display` rule beats the user-agent's `[hidden] { display: none }`,
   so an element given a layout mode (grid, flex) silently refuses to hide. That
   is a whole class of bug, and this is the one place to close it. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--accent-ink);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

h1 { font-size: var(--step-4); font-weight: 700; }
h2 { font-size: var(--step-3); font-weight: 600; }
h3 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.012em; }
h4 { font-size: var(--step-1); font-weight: 600; letter-spacing: 0; }

p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { color: var(--accent-ink); }

svg { display: block; }
img { max-width: 100%; height: auto; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.hm-visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hm-skip {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-2) var(--space-4);
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-weight: 600;
  transition: top var(--fast) var(--ease);
}
.hm-skip:focus { top: var(--space-3); }

.hm-shell {
  width: min(100% - 2.5rem, var(--shell));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   3. The provenance stamp — the signature element
   -------------------------------------------------------------------------- */

.hm-stamp {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45em;
  font-family: var(--font-body);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--provenance);
  white-space: nowrap;
}

.hm-stamp__sep {
  color: var(--line-strong);
  font-weight: 400;
  letter-spacing: 0;
}

/* Horizontal rail of stamps that sits under a page title. */
.hm-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-4);
  align-items: center;
  padding: var(--space-3) 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin: var(--space-5) 0;
}

.hm-rail__item {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-right: var(--space-4);
  border-right: 1px solid var(--line-soft);
}
.hm-rail__item:last-child { border-right: 0; padding-right: 0; }

.hm-rail__label {
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hm-rail__value {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--text);
}

/* Footnote symbols keep the printed convention: superscript, teal, linked. */
.hm-symbol {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: var(--provenance);
  font-weight: 700;
  margin-left: 0.15em;
  text-decoration: none;
}
.hm-symbol:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   4. Masthead
   -------------------------------------------------------------------------- */

.hm-masthead {
  background: var(--accent);
  border-bottom: 3px solid var(--provenance);
  color: var(--text-invert);
}

.hm-masthead__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 64px;
  padding-block: var(--space-3);
}

.hm-wordmark {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: inherit;
  text-decoration: none;
  flex-shrink: 0;
}

/* The supplied logo is a single dark navy on transparency, so on the blue
   masthead it is knocked out to white rather than shipped as a second file.
   Same trick in the footer, which sits on the darker accent ink. */
.hm-wordmark__mark {
  height: 44px;
  width: auto;
  filter: brightness(0) invert(1);
}

.hm-footer__logo {
  height: auto;
  width: 190px;
  max-width: 100%;
  margin-bottom: var(--space-4);
  filter: brightness(0) invert(1);
  opacity: 0.92;
}

.hm-wordmark__rule {
  width: 1px;
  height: 22px;
  background: currentColor;
  opacity: 0.35;
}

.hm-wordmark__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: -0.02em;
}

.hm-masthead__nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.hm-masthead__nav a {
  color: inherit;
  text-decoration: none;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.02em;
  padding-block: var(--space-1);
  border-bottom: 2px solid transparent;
}
.hm-masthead__nav a:hover,
.hm-masthead__nav a[aria-current='page'] { border-bottom-color: currentColor; }

/* --------------------------------------------------------------------------
   5. Breadcrumb
   -------------------------------------------------------------------------- */

.hm-breadcrumb {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  font-size: var(--step--1);
}

.hm-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: var(--space-3) 0;
}

.hm-breadcrumb li:not(:last-child)::after {
  content: '/';
  margin-left: var(--space-2);
  color: var(--line-strong);
}

.hm-breadcrumb a { color: var(--text-muted); text-decoration: none; }
.hm-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.hm-breadcrumb [aria-current] { color: var(--text); font-weight: 600; }

/* --------------------------------------------------------------------------
   6. Page structure
   -------------------------------------------------------------------------- */

.hm-main { padding-block: var(--space-6) var(--space-8); }

.hm-eyebrow {
  font-family: var(--font-body);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--provenance);
  margin-bottom: var(--space-3);
}

.hm-lead {
  font-size: var(--step-1);
  color: var(--text-muted);
  max-width: var(--measure);
  margin-top: var(--space-4);
}

.hm-section { margin-top: var(--space-7); }
.hm-section__head { margin-bottom: var(--space-4); }

.hm-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.hm-card__body { padding: var(--space-5); }

/* --------------------------------------------------------------------------
   7. Key findings — the generated read-out
   -------------------------------------------------------------------------- */

.hm-findings {
  border-left: 3px solid var(--provenance);
  padding: var(--space-1) 0 var(--space-1) var(--space-5);
  margin: var(--space-6) 0;
}

.hm-findings h2 {
  font-size: var(--step-1);
  letter-spacing: 0;
  margin-bottom: var(--space-3);
}

.hm-findings ul { margin: 0; padding: 0; list-style: none; }

.hm-findings li {
  max-width: var(--measure);
  margin-bottom: var(--space-3);
  font-size: var(--step-1);
  line-height: 1.6;
}
.hm-findings li:last-child { margin-bottom: 0; }
.hm-findings strong { color: var(--accent-ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   8. Panels: Table / Chart / Map
   -------------------------------------------------------------------------- */

.hm-panels {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hm-panels__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--surface), var(--hm-n-0));
}

.hm-tabs {
  display: inline-flex;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.hm-tab {
  appearance: none;
  border: 0;
  border-right: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text-muted);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.hm-tab:last-child { border-right: 0; }
.hm-tab:hover { background: var(--hm-n-0); color: var(--text); }
.hm-tab[aria-selected='true'] { background: var(--accent); color: var(--text-invert); }

.hm-panels__tools { margin-left: auto; display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.hm-panel { padding: var(--space-5); }
.hm-panel[hidden] { display: none; }
.hm-panel--flush { padding: 0; }

/* --------------------------------------------------------------------------
   9. Controls
   -------------------------------------------------------------------------- */

.hm-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  padding: 0.38rem 0.8rem;
  cursor: pointer;
  transition: background var(--fast) var(--ease), border-color var(--fast) var(--ease);
}
.hm-btn:hover { background: var(--hm-n-0); border-color: var(--text-faint); }
/* A toggle that is on should read as "on", not as the page's main action. */
.hm-btn[aria-pressed='true'] {
  background: color-mix(in oklab, var(--accent) 10%, #fff);
  border-color: var(--accent);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.hm-btn--primary { background: var(--accent); border-color: var(--accent); color: var(--text-invert); }
.hm-btn--primary:hover { background: var(--accent-ink); border-color: var(--accent-ink); }
.hm-btn--ghost { border-color: transparent; background: transparent; color: var(--accent); }
.hm-btn--ghost:hover { background: var(--hm-n-0); }

.hm-field {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-faint);
}

.hm-select,
.hm-input {
  font: inherit;
  font-size: var(--step--1);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 0.36rem 0.6rem;
  min-width: 8rem;
}

.hm-search {
  position: relative;
  flex: 1 1 320px;
  max-width: 460px;
}

.hm-search input {
  width: 100%;
  font: inherit;
  font-size: var(--step--1);
  padding: 0.45rem 0.75rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.12);
  color: var(--text-invert);
}
.hm-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.hm-search input:focus { background: var(--surface); color: var(--text); }
.hm-search input:focus::placeholder { color: var(--text-faint); }

.hm-suggest {
  position: absolute;
  z-index: 40;
  inset-inline: 0;
  top: calc(100% + 6px);
  max-height: 60vh;
  overflow-y: auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 32px -12px rgba(0, 40, 70, 0.4);
  list-style: none;
  margin: 0;
  padding: var(--space-1);
}
.hm-suggest:empty { display: none; }

.hm-suggest li a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: var(--step--1);
  line-height: 1.4;
}
.hm-suggest li a:hover,
.hm-suggest li a:focus,
.hm-suggest li[aria-selected='true'] a { background: var(--hm-n-0); }
.hm-suggest mark { background: #fdf3c8; color: inherit; padding: 0 1px; }

/* Chip: one selected series, carrying its own provenance. */
.hm-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--chip-colour, var(--accent));
  border-radius: var(--radius-sm);
  background: var(--surface);
  padding: 0.3rem 0.5rem 0.3rem 0.6rem;
  font-size: var(--step--1);
  line-height: 1.25;
  max-width: 100%;
}

.hm-chip__text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hm-chip__name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-chip__meta { font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--provenance); }

.hm-chip__remove {
  appearance: none;
  border: 0;
  background: none;
  color: var(--text-faint);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.hm-chip__remove:hover { background: var(--hm-n-1); color: var(--text); }

/* --------------------------------------------------------------------------
   10. Data table
   -------------------------------------------------------------------------- */

.hm-tablewrap {
  overflow: auto;
  max-height: 76vh;
  overscroll-behavior: contain;
}

.hm-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--step--1);
  line-height: 1.35;
}

/* The source title and reading notes sit above the scroll container as running
   text. Inside the table they would be laid out as part of the table box,
   pushing every row down and scrolling sideways with the columns. */
.hm-tablenote {
  margin: 0;
  padding: var(--space-4) var(--space-5) var(--space-3);
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--text-muted);
  max-width: var(--measure);
}
.hm-tablenote strong { color: var(--text); font-weight: 600; }

.hm-table th,
.hm-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--line-soft);
  text-align: right;
  vertical-align: bottom;
  white-space: nowrap;
}

.hm-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--surface);
  border-bottom: 1px solid var(--line-strong);
  vertical-align: bottom;
  font-weight: 600;
  color: var(--accent-ink);
}

/* Grouped header rows (nested column headers) get a lighter rule. */
.hm-table thead tr:not(:last-child) th {
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--step--2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}
.hm-table thead tr:not(:last-child) th[colspan] { border-left: 1px solid var(--line-soft); }

.hm-table th[scope='row'],
.hm-table thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  border-right: 1px solid var(--line);
}
.hm-table thead th:first-child { z-index: 4; }

.hm-table tbody tr:hover th[scope='row'],
.hm-table tbody tr:hover td { background: #f2f7fb; }

/* India is the denominator every other row is read against, so it is pinned
   and marked rather than left to sort into the middle of the list. */
.hm-table tbody tr[data-geo='IN'] th[scope='row'] { box-shadow: inset 3px 0 0 var(--accent); }
.hm-table tbody tr[data-geo='IN'] th,
.hm-table tbody tr[data-geo='IN'] td {
  background: #f4f8fb;
  font-weight: 600;
  border-bottom: 1px solid var(--line-strong);
}

/* Union territories are visually separated the way the source separates them. */
.hm-table tbody tr[data-first-ut='true'] th,
.hm-table tbody tr[data-first-ut='true'] td { border-top: 1px solid var(--line-strong); }

.hm-table td.is-missing { color: var(--text-faint); font-weight: 400; }
.hm-table td.is-missing abbr { text-decoration: none; border-bottom: 1px dotted var(--line-strong); cursor: help; }

/* In-cell magnitude bar: the annexure's own "read down the column" gesture,
   drawn instead of imagined. Kept faint so the digits stay primary. */
.hm-cell { position: relative; }
.hm-cell__bar {
  position: absolute;
  inset: 2px auto 2px 0;
  width: var(--fill, 0%);
  background: color-mix(in oklab, var(--accent) 17%, transparent);
  border-radius: 0 2px 2px 0;
  pointer-events: none;
  transform-origin: left center;
}
.hm-table[data-bars='off'] .hm-cell__bar { display: none; }
/* India is the reference, not a competitor — it would sit at full width in
   almost every column and add nothing but ink. */
.hm-table tbody tr[data-geo='IN'] .hm-cell__bar { display: none; }
.hm-cell__value { position: relative; }

.hm-table tbody tr.is-highlighted th[scope='row'],
.hm-table tbody tr.is-highlighted td { background: #e8f2f9; }

.hm-sort {
  appearance: none;
  border: 0;
  background: none;
  font: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  text-align: inherit;
}
.hm-sort::after {
  content: '';
  width: 0; height: 0;
  border-inline: 4px solid transparent;
  border-bottom: 5px solid currentColor;
  opacity: 0;
  transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.hm-sort:hover::after { opacity: 0.35; }
th[aria-sort='ascending'] .hm-sort::after { opacity: 1; }
th[aria-sort='descending'] .hm-sort::after { opacity: 1; transform: rotate(180deg); }

.hm-colmeta {
  display: block;
  font-size: var(--step--2);
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--provenance);
  margin-top: 2px;
}

.hm-table__empty { padding: var(--space-6); text-align: center; color: var(--text-muted); }

/* --------------------------------------------------------------------------
   11. Charts
   -------------------------------------------------------------------------- */

.hm-chart { width: 100%; background: var(--surface); }
.hm-chart text { font-family: var(--font-body); fill: var(--text-muted); font-size: 12px; }
.hm-chart .hm-axis line,
.hm-chart .hm-axis path { stroke: var(--line); }
.hm-chart .hm-gridline { stroke: var(--line-soft); }
.hm-chart .hm-baseline { stroke: var(--line-strong); }
.hm-chart .hm-mark { transition: opacity var(--fast) var(--ease); }
.hm-chart .hm-label { font-size: 11px; fill: var(--text-muted); }
.hm-chart .hm-value { font-size: 11px; font-weight: 600; fill: var(--text); }
/* A bar long enough to reach the axis edge takes its label inside instead. */
.hm-chart .hm-value--inside { fill: #fff; }
.hm-chart .hm-mark--muted { opacity: 0.25; }
.hm-chart .hm-mark--india { stroke: var(--accent-ink); stroke-width: 1; stroke-dasharray: 3 2; }

/* The national figure, drawn as a benchmark rather than a competing bar. */
.hm-chart .hm-reference { stroke: var(--accent-ink); stroke-width: 1.25; stroke-dasharray: 4 3; }
.hm-chart .hm-reference-label { font-size: 11px; font-weight: 700; fill: var(--accent-ink); }

.hm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-3) 0 0;
  font-size: var(--step--1);
}

.hm-legend__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  border: 0;
  background: none;
  font: inherit;
  color: var(--text);
  padding: 2px 4px;
  border-radius: var(--radius-sm);
}
.hm-legend__item[aria-pressed='false'] { opacity: 0.42; }
.hm-legend__item:hover { background: var(--hm-n-0); }

.hm-swatch {
  width: 12px; height: 12px;
  border-radius: 2px;
  background: var(--swatch, var(--accent));
  flex-shrink: 0;
}

.hm-smallmultiples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-5);
}

.hm-notice {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line);
  border-left: 3px solid var(--hm-cat-1);
  border-radius: var(--radius-sm);
  background: var(--hm-n-0);
  font-size: var(--step--1);
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.hm-notice strong { color: var(--text); }

/* Tooltip shared by charts and map. */
.hm-tip {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  background: var(--accent-ink);
  color: var(--text-invert);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--step--1);
  line-height: 1.4;
  box-shadow: 0 8px 24px -10px rgba(0, 30, 50, 0.6);
  max-width: 280px;
}
.hm-tip[hidden] { display: none; }
.hm-tip__name { font-weight: 700; display: block; }
.hm-tip__meta { opacity: 0.75; font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   12. Map
   -------------------------------------------------------------------------- */

.hm-map { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: var(--space-5); align-items: start; }
.hm-map__figure { width: 100%; max-width: 620px; margin-inline: auto; }
.hm-map__region {
  stroke: var(--surface);
  stroke-width: 0.75;
  cursor: pointer;
  transition: fill var(--slow) var(--ease);
}
.hm-map__region:hover { stroke: var(--accent-ink); stroke-width: 1.5; }
.hm-map__region[data-selected='true'] { stroke: var(--selected); stroke-width: 2; }
.hm-map__region[data-value='none'] { fill: var(--hm-n-1); }

.hm-scale { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.hm-scale li { display: flex; align-items: center; gap: var(--space-2); padding: 2px 0; }
.hm-scale i { width: 18px; height: 12px; border-radius: 2px; flex-shrink: 0; }

/* --------------------------------------------------------------------------
   13. Sources, FAQ, related
   -------------------------------------------------------------------------- */

.hm-sources { list-style: none; margin: 0; padding: 0; font-size: var(--step--1); }
.hm-sources li { padding: var(--space-3) 0; border-bottom: 1px solid var(--line-soft); display: flex; gap: var(--space-3); }
.hm-sources li:last-child { border-bottom: 0; }
.hm-sources__key { flex: 0 0 2.5rem; color: var(--provenance); font-weight: 700; }
.hm-sources__body { min-width: 0; }
.hm-sources__body a { word-break: break-word; }
.hm-sources__note { color: var(--text-muted); }

.hm-faq { border-top: 1px solid var(--line); }
.hm-faq details { border-bottom: 1px solid var(--line); }
.hm-faq summary {
  cursor: pointer;
  padding: var(--space-4) 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  color: var(--accent-ink);
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
}
.hm-faq summary::-webkit-details-marker { display: none; }
.hm-faq summary::after {
  content: '+';
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--provenance);
  transition: transform var(--fast) var(--ease);
}
.hm-faq details[open] summary::after { transform: rotate(45deg); }
.hm-faq details > div { padding-bottom: var(--space-4); }

.hm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-4);
}

.hm-indicator {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease);
}
.hm-indicator:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}
.hm-indicator__num {
  font-size: var(--step--2);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--provenance);
}
.hm-indicator__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step-0); line-height: 1.3; color: var(--accent-ink); }
.hm-indicator__meta { font-size: var(--step--1); color: var(--text-muted); margin-top: auto; padding-top: var(--space-2); }
.hm-indicator[aria-disabled='true'] { opacity: 0.55; pointer-events: none; }

/* --------------------------------------------------------------------------
   13b. Explorer
   -------------------------------------------------------------------------- */

.hm-explorer {
  display: grid;
  grid-template-columns: 330px minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-top: var(--space-6);
}

.hm-rail-panel {
  position: sticky;
  top: var(--space-4);
  max-height: calc(100vh - 2rem);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hm-rail-panel__head { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: 1px solid var(--line); }
.hm-rail-panel__head h2 { font-size: var(--step-1); }
.hm-rail-panel__hint { font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--provenance); margin: var(--space-1) 0 0; font-weight: 600; }
.hm-rail-panel__body { padding: var(--space-3) var(--space-4) var(--space-4); overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); }
.hm-rail-panel__body .hm-input { width: 100%; }

.hm-tree { display: flex; flex-direction: column; gap: 2px; }

.hm-tree details > summary {
  cursor: pointer;
  list-style: none;
  padding: var(--space-2) var(--space-2) var(--space-2) 0;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-ink);
  display: flex;
  gap: var(--space-2);
  align-items: baseline;
  border-bottom: 1px solid var(--line-soft);
}
.hm-tree details > summary::-webkit-details-marker { display: none; }
.hm-tree details > summary::before {
  content: '▸';
  color: var(--provenance);
  font-size: 0.8em;
  transition: transform var(--fast) var(--ease);
}
.hm-tree details[open] > summary::before { transform: rotate(90deg); }
.hm-tree__count { margin-left: auto; font-size: var(--step--2); color: var(--text-faint); font-weight: 400; }

.hm-tree__series { list-style: none; margin: 0 0 var(--space-3); padding: var(--space-1) 0 0 var(--space-4); }
.hm-tree__series li { margin-bottom: 1px; }

.hm-tree__btn {
  display: flex;
  width: 100%;
  gap: var(--space-2);
  align-items: baseline;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--step--1);
  line-height: 1.3;
  color: var(--text);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.hm-tree__btn:hover { background: var(--hm-n-0); }
.hm-tree__btn[aria-pressed='true'] { background: color-mix(in oklab, var(--selected) 12%, #fff); box-shadow: inset 2px 0 0 var(--selected); }
.hm-tree__btn[aria-pressed='true']::after { content: '✓'; margin-left: auto; color: var(--selected); font-weight: 700; }
.hm-tree__meta { display: block; font-size: var(--step--2); letter-spacing: 0.06em; text-transform: uppercase; color: var(--provenance); }

.hm-workspace { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }

.hm-selection {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
}
.hm-selection__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.hm-selection__head h2 { font-size: var(--step-1); letter-spacing: 0; }

.hm-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hm-empty { color: var(--text-muted); font-size: var(--step--1); margin: 0; }

.hm-presets { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hm-preset {
  appearance: none;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font: inherit;
  font-size: var(--step--1);
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.hm-preset:hover { background: var(--hm-n-0); }
.hm-preset[aria-pressed='true'] { background: var(--selected); border-color: var(--selected); color: #fff; }

.hm-geo-list {
  margin-top: var(--space-3);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 2px var(--space-3);
  max-height: 320px;
  overflow-y: auto;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line-soft);
}
.hm-geo-list label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--step--1); padding: 2px 0; cursor: pointer; }
.hm-geo-list__group { grid-column: 1 / -1; font-size: var(--step--2); letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-faint); font-weight: 600; margin-top: var(--space-2); }

@media (max-width: 1080px) {
  .hm-explorer { grid-template-columns: 1fr; }
  .hm-rail-panel { position: static; max-height: 60vh; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */

.hm-footer {
  background: var(--accent-ink);
  color: rgba(255, 255, 255, 0.82);
  padding-block: var(--space-6);
  font-size: var(--step--1);
}
.hm-footer a { color: #fff; }
.hm-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); }
.hm-footer h2 {
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  margin-bottom: var(--space-3);
}
.hm-footer ul { list-style: none; margin: 0; padding: 0; }
.hm-footer li { margin-bottom: var(--space-2); }
.hm-footer__legal {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: var(--step--2);
  color: rgba(255, 255, 255, 0.6);
}

/* --------------------------------------------------------------------------
   15. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 900px) {
  .hm-map { grid-template-columns: 1fr; }
  .hm-masthead__inner { flex-wrap: wrap; }
  .hm-search { order: 3; flex-basis: 100%; max-width: none; }
}

@media (max-width: 640px) {
  :root { --step-0: 1rem; --space-5: 1.15rem; }
  .hm-shell { width: min(100% - 1.75rem, var(--shell)); }
  .hm-masthead__nav { gap: var(--space-4); }
  .hm-wordmark__mark { height: 34px; }
  .hm-wordmark__rule { display: none; }
  .hm-panel { padding: var(--space-4) var(--space-3); }
  .hm-rail { gap: var(--space-3); }
  .hm-rail__item { border-right: 0; padding-right: 0; flex-direction: row; gap: var(--space-2); align-items: baseline; }
  .hm-findings { padding-left: var(--space-4); }
}

/* --------------------------------------------------------------------------
   16. Motion
   --------------------------------------------------------------------------
   One orchestrated moment: on first paint, and whenever the indicator changes,
   marks grow from their baseline on a staggered timeline while the in-cell
   magnitude bars fill on the same clock. Everything else is fast and quiet.
   -------------------------------------------------------------------------- */

@keyframes hm-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.hm-cell__bar { animation: hm-fill var(--slow) var(--ease) both; animation-delay: var(--delay, 0ms); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
  }
}

/* --------------------------------------------------------------------------
   17. Print — researchers print these tables
   -------------------------------------------------------------------------- */

@media print {
  :root { --shell: 100%; }
  body { background: #fff; font-size: 10pt; }
  .hm-masthead, .hm-footer, .hm-panels__bar, .hm-search, .hm-skip, .hm-faq { display: none !important; }
  .hm-panels, .hm-card { border: 0; box-shadow: none; }
  .hm-panel[hidden] { display: block !important; }
  .hm-tablewrap { max-height: none; overflow: visible; }
  .hm-table { font-size: 8pt; }
  .hm-table thead th { position: static; }
  .hm-table th[scope='row'] { position: static; }
  .hm-cell__bar { display: none; }
  a[href]::after { content: ''; }
}