:root{
  --bg:#eef1ec; --surface:#fff; --surface-2:#f7f9f6; --ink:#12150f; --ink-2:#4a5247;
  --muted:#79826f; --line:#dbe1d6; --line-2:#c9d2c3;
  --accent:#2f6d3a; --accent-2:#e8f2e6; --accent-ink:#fff;
  --whole:#3f8f4a; --bifur:#d99215; --forest:#1d7a72; --kerala:#6a4fbb; --point:#c2382f;
  --shadow:0 1px 2px rgba(18,21,15,.06),0 8px 24px -8px rgba(18,21,15,.14);
  --r:10px; --rail:330px; --ins:320px;
}
@media (prefers-color-scheme:dark){
  :root{--bg:#10130f; --surface:#191d18; --surface-2:#20251f; --ink:#e9ece6; --ink-2:#b3bcaf;
    --muted:#7f8a7a; --line:#2a302a; --line-2:#3a423a; --accent:#7fc08a; --accent-2:#1e2a1f;
    --accent-ink:#0d1a0e; --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px -10px rgba(0,0,0,.6);}
}
*{box-sizing:border-box}
html{height:100%}
body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font:14.5px/1.55 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.2;margin:0;font-weight:650;letter-spacing:-.01em}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
button{font:inherit}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-rows:auto 1fr auto;height:100vh}

.topbar{display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;
  background:var(--surface);border-bottom:1px solid var(--line);z-index:20}
.brand{display:flex;align-items:baseline;gap:.55rem;min-width:0}
.brand .mark{width:26px;height:26px;border-radius:7px;background:var(--accent);
  color:var(--accent-ink);display:grid;place-items:center;font-size:.9rem;flex:0 0 auto;
  align-self:center}
.brand h1{font-size:1rem;white-space:nowrap}
.brand .tag{font-size:.76rem;color:var(--muted);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.topbar nav{margin-left:auto;display:flex;gap:.15rem;align-items:center}
.topbar nav a{padding:.35rem .6rem;border-radius:7px;font-size:.83rem;
  color:var(--ink-2);text-decoration:none}
.topbar nav a:hover{background:var(--surface-2);color:var(--ink)}
.topbar nav a.cta{background:var(--accent);color:var(--accent-ink)}
.topbar nav a.cta:hover{filter:brightness(1.06)}

.work{display:grid;grid-template-columns:var(--rail) minmax(0,1fr) var(--ins);min-height:0}
.rail{background:var(--surface);border-right:1px solid var(--line);
  overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.stage{position:relative;min-width:0}
#map{position:absolute;inset:0;background:var(--surface-2)}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:.15rem;padding:.5rem .6rem 0;position:sticky;top:0;
  background:var(--surface);z-index:6;border-bottom:1px solid var(--line)}
.tab{flex:1;padding:.5rem .3rem .6rem;border:0;background:none;cursor:pointer;
  color:var(--muted);font-size:.82rem;border-bottom:2px solid transparent;
  border-radius:6px 6px 0 0}
.tab:hover{color:var(--ink)}
.tab[aria-selected=true]{color:var(--ink);font-weight:650;border-bottom-color:var(--accent)}
.pane{display:none;padding:.85rem}
.pane[data-active]{display:block}

/* ---------- controls ---------- */
.field{margin:0 0 .65rem}
.field>span{display:block;font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:.25rem;font-weight:600}
select,input[type=search]{width:100%;padding:.46rem .55rem;border:1px solid var(--line-2);
  border-radius:8px;background:var(--surface-2);color:var(--ink);font:inherit;font-size:.88rem}
select:focus,input:focus{outline:2px solid var(--accent);outline-offset:-1px}
select:disabled{opacity:.45}

.block{margin:1rem 0 0;padding-top:.85rem;border-top:1px solid var(--line)}
.block:first-child{margin-top:0;padding-top:0;border-top:0}
.block>h3{font-size:.73rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin-bottom:.5rem}

/* category + layer chips */
.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;padding:.32rem .55rem;
  border:1px solid var(--line-2);border-radius:99px;background:var(--surface-2);
  color:var(--ink-2);font-size:.78rem;cursor:pointer;user-select:none;line-height:1.3}
.chip:hover{border-color:var(--accent)}
.chip .sw{width:9px;height:9px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 2px var(--surface)}
.chip .n{color:var(--muted);font-variant-numeric:tabular-nums;font-size:.72rem}
.chip[aria-pressed=true]{background:var(--accent-2);border-color:var(--accent);color:var(--ink);font-weight:600}
.chip[aria-pressed=false]{opacity:.5}
.chip[aria-pressed=false] .sw{background:var(--muted)!important}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.metric{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.5rem .6rem}
.metric .k{font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.metric .v{font-size:1.15rem;font-weight:660;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;margin-top:.05rem}
.metric .v small{font-size:.62em;font-weight:500;color:var(--muted);margin-left:.15em}
.metric.wide{grid-column:1/-1}
.bar{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:.45rem 0 .3rem}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px}
.hint{font-size:.75rem;color:var(--muted);margin:.3rem 0 0}

#results{max-height:250px;overflow-y:auto;margin-top:.2rem;
  border:1px solid var(--line);border-radius:var(--r)}
#results:empty{display:none}
.hit{padding:.42rem .55rem;cursor:pointer;border-bottom:1px solid var(--line)}
.hit:last-child{border-bottom:0}
.hit:hover,.hit:focus{background:var(--accent-2);outline:none}
.hit b{font-weight:600;font-size:.86rem;display:block}
.hit small{color:var(--muted);font-size:.74rem}
.more{padding:.45rem .55rem;font-size:.75rem;color:var(--muted)}

/* ---------- detail card ---------- */
#detail{position:absolute;right:14px;top:14px;width:300px;max-height:calc(100% - 28px);
  overflow-y:auto;background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:.9rem;box-shadow:var(--shadow);z-index:12}
#detail h3{font-size:1.05rem}
#detail .sub{color:var(--muted);font-size:.78rem;margin:.1rem 0 .55rem}
#detail .close{position:absolute;right:.45rem;top:.35rem;width:26px;height:26px;
  border:0;border-radius:7px;background:none;color:var(--muted);font-size:1.15rem;cursor:pointer}
#detail .close:hover{background:var(--surface-2);color:var(--ink)}
.badge{display:inline-flex;align-items:center;gap:.35rem;padding:.18rem .5rem;
  border-radius:99px;font-size:.72rem;font-weight:600;color:#fff}
dl.kv{display:grid;grid-template-columns:auto 1fr;gap:.25rem .7rem;margin:.7rem 0 0;
  font-size:.82rem}
dl.kv dt{color:var(--muted);font-size:.77rem}
dl.kv dd{margin:0;word-break:break-word;font-variant-numeric:tabular-nums}
.flag{background:#fdf3e2;color:#7a4a06;border:1px solid #f0dcb6;border-radius:9px;
  padding:.45rem .55rem;margin-top:.55rem;font-size:.77rem;line-height:1.45}
@media (prefers-color-scheme:dark){.flag{background:#2e2513;color:#f2cf94;border-color:#4a3c1c}}

#loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:.45rem 1rem;font-size:.83rem;box-shadow:var(--shadow);z-index:11}

/* ---------- downloads / missing ---------- */
.dl{border:1px solid var(--line);border-radius:var(--r);padding:.6rem .65rem;margin-bottom:.5rem}
.dl header{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;
  margin-bottom:.45rem}
.dl h4{font-size:.9rem}
.dl .meta{font-size:.72rem;color:var(--muted);font-variant-numeric:tabular-nums}
.dlrow{display:grid;grid-template-columns:repeat(4,1fr);gap:.25rem}
.dlrow a,.btn{display:block;text-align:center;padding:.34rem .2rem;border:1px solid var(--line-2);
  border-radius:7px;text-decoration:none;color:var(--ink-2);font-size:.74rem;
  background:var(--surface-2);font-weight:600}
.dlrow a:hover,.btn:hover{border-color:var(--accent);color:var(--accent)}
.btn{margin-top:.3rem;font-size:.79rem;padding:.42rem .5rem}
.btn.primary{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.btn.primary:hover{color:var(--accent-ink);filter:brightness(1.06)}

.miss{padding:.45rem 0;border-bottom:1px solid var(--line)}
.miss:last-child{border-bottom:0}
.miss b{font-size:.85rem;display:block}
.miss small{display:block;color:var(--muted);font-size:.73rem}
.miss .why{color:var(--ink-2);font-style:italic}

.note{font-size:.78rem;color:var(--muted);line-height:1.5;margin:0 0 .7rem}

/* ---------- footer ---------- */
.footer{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  padding:.5rem 1rem;background:var(--surface);border-top:1px solid var(--line);
  font-size:.77rem;color:var(--muted)}
.footer .who{color:var(--ink-2)}
.footer .who b{color:var(--ink);font-weight:650}
/* the byline links to the author's profile; keep it quiet until hovered so the
   footer still reads as a credit line rather than a call to action */
.footer .who a{color:inherit;text-decoration:none}
.footer .who a b{border-bottom:1px solid var(--line-2)}
.footer .who a:hover b{color:var(--accent);border-bottom-color:var(--accent)}
.footer .who a:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
.footer .right{margin-left:auto;display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------- document pages ---------- */
/* Two columns so a wide screen carries a sticky contents rail beside the prose
   instead of two empty margins. */
.docwrap{display:grid;grid-template-columns:minmax(0,1fr);gap:0;
  max-width:1120px;margin:0 auto;padding:1.6rem 1.4rem 4rem}
@media (min-width:1000px){
  .docwrap{grid-template-columns:236px minmax(0,1fr);gap:3rem;padding-top:2.2rem}
}
/* On a wide screen the 1120px cap left ~780px of the viewport empty while the
   four-column reference tables were squeezed into a 790px column and wrapped
   every cell. Prose keeps its 74ch measure regardless (see the .doc>* rule), so
   widening the container gives the extra room to the tables and code, which is
   what actually needs it. */
@media (min-width:1400px){ .docwrap{max-width:1120px} }
.docnav{align-self:start}
@media (min-width:1000px){
  .docnav{position:sticky;top:1.5rem;max-height:calc(100vh - 3rem);overflow-y:auto}
}
.docnav h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin-bottom:.55rem}
.docnav ol{list-style:none;margin:0;padding:0;counter-reset:s}
.docnav li{counter-increment:s;margin:.1rem 0}
.docnav a{display:block;padding:.32rem .55rem .32rem 1.9rem;border-radius:7px;
  font-size:.83rem;color:var(--ink-2);text-decoration:none;position:relative;line-height:1.35}
.docnav a::before{content:counter(s);position:absolute;left:.55rem;color:var(--muted);
  font-size:.72rem;font-variant-numeric:tabular-nums;top:.4rem}
.docnav a:hover{background:var(--surface);color:var(--ink)}
.docnav a.on{background:var(--accent-2);color:var(--ink);font-weight:600}
.docnav a.on::before{color:var(--accent)}
.docnav .back{margin-top:.7rem;padding-top:.7rem;border-top:1px solid var(--line)}

/* Prose keeps a readable measure, but tables and code use the full column width --
   that is where the extra space on a wide screen actually helps. */
.doc{min-width:0;max-width:760px}   /* the single content measure: prose,
   tables and code all bounded by this one value, so the right edge cannot go
   ragged. Anything narrower (a two-column label grid) may be narrower. */
.doc>h2,.doc>h3,.doc>h4,.doc>p,.doc>ul,.doc>ol,.doc>.callout{max-width:100%}
.doc>h2{font-size:1.5rem;margin:2.6rem 0 .7rem;scroll-margin-top:1.5rem}
.doc>h2:first-child{margin-top:0}
.doc h3{font-size:1.02rem;margin:1.8rem 0 .5rem;color:var(--ink)}
.doc h4{font-size:.76rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);margin:1.9rem 0 .55rem;padding-bottom:.3rem;
  border-bottom:1px solid var(--line)}
.doc p,.doc li{color:var(--ink-2);margin:0 0 .9rem}
.doc ul,.doc ol{padding-left:1.25rem}
.doc li{margin-bottom:.55rem}
.doc strong{color:var(--ink);font-weight:640}
.lede{font-size:1.1rem;line-height:1.6;color:var(--ink)!important;
  border-left:3px solid var(--accent);padding-left:1rem;margin-left:0}
/* display:block keeps the horizontal scroll on narrow screens, but a block fills
   its container while the rows only span their content -- which paints empty
   background to the right of the last column. fit-content makes the box hug. */
.doc table{border-collapse:collapse;font-size:.87rem;margin:1.1rem 0 1.4rem;
  display:block;width:fit-content;max-width:100%;overflow-x:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r)}
.doc th,.doc td{text-align:left;padding:.5rem .8rem;border-bottom:1px solid var(--line);
  white-space:nowrap}
.doc td:last-child{white-space:normal;min-width:18ch}
.doc tr:last-child th,.doc tr:last-child td{border-bottom:0}
.doc thead th,.doc tr:first-child th{font-size:.72rem;text-transform:uppercase;
  letter-spacing:.05em;color:var(--muted);background:var(--surface)}
.doc tbody tr:hover,.doc tr:hover{background:var(--surface)}
.doc code{background:var(--surface);border:1px solid var(--line);border-radius:5px;
  padding:.08rem .34rem;font-size:.87em}
.doc pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem 1rem;overflow-x:auto;font-size:.83rem;line-height:1.5;max-width:100%}
.doc pre code{border:0;padding:0;background:none}
/* Widening the container helped the wide reference tables, but code blocks and
   two-column tables do not have wide content: the longest line in any example
   here is ~570px, so at the full 1191px column they were 31-48% filled -- a big
   empty box with one short line in it, which is just blank space again. Cap them
   near the prose measure so body content reads as one column and only the wide
   reference tables use the full width. */
.doc pre{max-width:100%}
.doc table:not(.ref){max-width:100%}
/* A two-column label grid has no wide content: at full column width its two
   short labels sit marooned in huge empty cells while the prose beside it is
   half as wide, which reads as a broken layout. Let it hug its content. */
.doc table.ref.pair{width:auto;max-width:640px;table-layout:auto}
.doc table.ref.pair td:first-child,
.doc table.ref.pair th:first-child{width:auto}

/* Reference tables hold sentences, not figures, so they wrap and use the full
   column width instead of inheriting the numeric tables' nowrap. */
/* The card reference is 27 entries of prose. As a four-column table it is either
   cramped (narrow column) or wildly wider than the prose beside it (wide column) --
   there is no width at which a 70-character prose line and a four-column prose
   table agree. So it is not a table at any width: each entry is a labelled block,
   which is what it already became on a phone. .src and .pair keep table layout
   because their cells hold short values, not paragraphs. */
.doc table.ref{display:table;width:100%;max-width:100%;table-layout:fixed;overflow:visible}
.doc table.ref:not(.src):not(.pair),
.doc table.ref:not(.src):not(.pair) tbody,
.doc table.ref:not(.src):not(.pair) tr,
.doc table.ref:not(.src):not(.pair) td{display:block;width:auto;max-width:100%}
.doc table.ref:not(.src):not(.pair) tr:first-child{display:none}
.doc table.ref:not(.src):not(.pair) tr{border-bottom:1px solid var(--line);padding:.55rem 0}
.doc table.ref:not(.src):not(.pair) tr:last-child{border-bottom:0}
.doc table.ref:not(.src):not(.pair) td{border-bottom:0;padding:.25rem .8rem}
.doc table.ref:not(.src):not(.pair) td:first-child{font-weight:650;font-size:1rem;color:var(--ink)}
.doc table.ref:not(.src):not(.pair) td[data-l]:not(:first-child)::before{content:attr(data-l);
  display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600;margin-bottom:.1rem}
.doc table.ref th,.doc table.ref td{white-space:normal;vertical-align:top;
  padding:.6rem .8rem;min-width:0;
  /* NOT hyphens:auto and NOT overflow-wrap:anywhere. In a narrow column those
     two break ordinary words mid-stem -- "OpenStreetMap contribu-tors",
     "National Remote Sensing Centr-e" -- which reads as a rendering fault.
     break-word only splits a word that genuinely cannot fit on its own line. */
  hyphens:none;overflow-wrap:break-word}
.doc table.ref td:first-child{width:19%;color:var(--ink)}

/* The source-credit tables are not four equal columns of prose: "Obtained via"
   holds one or two words ("Bhuvan", "Direct", "india-geodata") while the
   publisher names are long. Splitting them evenly is what squeezed the
   publisher column until it hyphenated. */
.doc table.ref.src td:first-child,
.doc table.ref.src th:first-child{width:22%}
.doc table.ref.src td:nth-child(2),
.doc table.ref.src th:nth-child(2){width:30%}
.doc table.ref.src td:nth-child(3),
.doc table.ref.src th:nth-child(3){width:17%}
.doc table.ref tr:hover{background:transparent}
.doc table.ref .r-u{display:block;font-size:.72rem;font-weight:400;
  color:var(--muted);letter-spacing:.02em;margin-top:.1rem}
@media (max-width:700px){
  .doc table.ref,.doc table.ref tbody,.doc table.ref tr,.doc table.ref td{display:block;width:auto}
  .doc table.ref tr:first-child{display:none}
  .doc table.ref tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  .doc table.ref tr:last-child{border-bottom:0}
  .doc table.ref td{border-bottom:0;padding:.25rem .8rem}
  /* the .src percentage widths are more specific than the block rule above, so
     they survive the stack and squeeze cells to 56-98px. Reset them all. */
  .doc table.ref td,.doc table.ref th,
  .doc table.ref.src td,.doc table.ref.src th,
  .doc table.ref.src td:nth-child(2),.doc table.ref.src th:nth-child(2),
  .doc table.ref.src td:nth-child(3),.doc table.ref.src th:nth-child(3){width:auto}
  .doc table.ref td:first-child,
  .doc table.ref.src td:first-child{width:auto;font-weight:650;font-size:1rem}
  .doc table.ref td[data-l]:not(:first-child)::before{content:attr(data-l);
    display:block;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;
    color:var(--muted);font-weight:600;margin-bottom:.1rem}
}
.callout{background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r);padding:.9rem 1.1rem;margin:1.3rem 0}
.callout.warn{border-left-color:var(--bifur)}
.callout p:last-child{margin-bottom:0}
.callout p{color:var(--ink-2)}

/* .btn is a full-width block in the dashboard rail; inside prose it should size
   to its label instead of stretching the whole measure. */
.doc a.btn{display:inline-flex;align-items:center;gap:.4rem;width:auto;
  padding:.5rem .9rem;font-size:.86rem;margin:.2rem 0 .3rem}

@media (max-width:900px){
  :root{--rail:290px}
  .brand .tag{display:none}
}
@media (max-width:760px){
  .shell{height:auto;min-height:100vh}
  .work{grid-template-columns:1fr;grid-template-rows:auto 66vh}
  .rail{border-right:0;border-bottom:1px solid var(--line);max-height:none}
  .stage{min-height:340px}
  #detail{left:14px;right:14px;width:auto;max-height:58%}
  .dlrow{grid-template-columns:repeat(2,1fr)}
}

/* ---------- analysis ---------- */
.sr-only{position:fixed;top:0;left:0;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ramp{display:flex;height:10px;border-radius:3px;overflow:hidden;margin:.5rem 0 .2rem}
.ramp i{flex:1}
.ramp-lab{display:flex;justify-content:space-between;font-size:.7rem;color:var(--muted);
  font-variant-numeric:tabular-nums}
.statline{display:flex;align-items:baseline;gap:.5rem;padding:.3rem 0;
  border-bottom:1px solid var(--line);font-size:.83rem}
.statline:last-of-type{border-bottom:0}
.statline span{flex:1}
.statline b{font-variant-numeric:tabular-nums}
.statline small{color:var(--muted);font-size:.74rem;min-width:6.5em;text-align:right}
table.mini{width:100%;border-collapse:collapse;font-size:.79rem;
  font-variant-numeric:tabular-nums}
table.mini th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600;padding:.25rem .3rem}
table.mini td{padding:.3rem;border-top:1px solid var(--line)}
table.mini td:not(:first-child),table.mini th:not(:first-child){text-align:right}
ul.lim{margin:0 0 .7rem;padding-left:1.05rem}
ul.lim li{font-size:.78rem;color:var(--muted);margin:.35rem 0;line-height:1.45}
#detail .an{margin-top:.7rem;padding-top:.6rem;border-top:1px solid var(--line)}
#detail .an h4{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:.5rem 0 .3rem}


/* ---------- right-hand insights panel ---------- */
.insights{background:var(--surface);border-left:1px solid var(--line);
  overflow-y:auto;display:flex;flex-direction:column;min-height:0}
.ins-head{padding:.8rem .9rem .6rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;background:var(--surface);z-index:4}
.ins-head h2{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.ins-head p{margin:.15rem 0 0;font-size:.95rem;font-weight:640;color:var(--ink);line-height:1.3}
#ins-body{padding:.85rem}
.ins-sec{margin:0 0 1rem}
.ins-sec>h3{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);margin:0 0 .4rem}
.cards{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.5rem .6rem .55rem;min-width:0}
.card.w{grid-column:1/-1}
.card .lab{font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:600;line-height:1.25;display:block}
.card .val{display:flex;align-items:baseline;gap:.25rem;margin-top:.15rem;flex-wrap:wrap}
.card .num{font-size:1.22rem;font-weight:660;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;line-height:1.1;color:var(--ink)}
.card .unit{font-size:.72rem;color:var(--muted);font-weight:500}
.card .sub{font-size:.7rem;color:var(--muted);margin-top:.18rem;line-height:1.35}
.card.accent .num{color:var(--accent)}
.meter{height:5px;border-radius:99px;background:var(--line);overflow:hidden;margin:.35rem 0 0}
.meter>i{display:block;height:100%;background:var(--accent);border-radius:99px}
.card .swatch{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:.3rem;
  vertical-align:baseline}
.ins-lim{border-top:1px solid var(--line);padding:.7rem .9rem 1rem;margin-top:auto}
.ins-lim summary{cursor:pointer;font-size:.78rem;color:var(--muted);font-weight:600}
.ins-lim summary:hover{color:var(--ink)}
.ins-empty{font-size:.8rem;color:var(--muted);line-height:1.5}
/* "not available on this basis" -- an explanation where a card would have been */
.ins-na{font-size:.75rem;color:var(--muted);line-height:1.5;margin:.1rem 0 0;
  background:var(--surface-2);border:1px dashed var(--line-2);border-radius:var(--r);
  padding:.6rem .7rem}
.ins-na b{color:var(--ink)}

/* ---------- geometry basis toggle (Kerala only) ---------- */
.basis{margin:0 0 .8rem}
.basis-l{display:block;font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);font-weight:600;margin-bottom:.3rem}
.basis-b{display:grid;grid-template-columns:1fr 1fr;gap:.3rem}
.basis .bt{display:block;text-align:left;padding:.42rem .5rem;border-radius:8px;cursor:pointer;
  border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink-2);
  font-size:.76rem;line-height:1.25}
.basis .bt small{display:block;font-size:.64rem;color:var(--muted);margin-top:.1rem}
.basis .bt:hover{border-color:var(--accent)}
.basis .bt[aria-pressed=true]{background:var(--accent-2);border-color:var(--accent);
  color:var(--ink);font-weight:640}
.basis-note{font-size:.73rem;color:var(--muted);line-height:1.45;margin:0 0 .9rem;
  padding-left:.6rem;border-left:2px solid #0277bd}

/* ---------- the i buttons and their popover ---------- */
.i{display:inline-grid;place-items:center;width:13px;height:13px;padding:0;margin-left:.3rem;
  border:1px solid var(--line-2);border-radius:99px;background:var(--surface);
  color:var(--muted);font-size:9px;font-weight:700;font-style:normal;line-height:1;
  cursor:pointer;vertical-align:middle;text-transform:none;letter-spacing:0;flex:0 0 auto}
.i:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-2)}
.i:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kv dt .i,.vg>h4 .i,.ins-sec>h3 .i{margin-left:.25rem}

/* position:fixed on purpose -- an absolutely positioned popover with no
   positioned ancestor is measured against the root and stretches the document. */
#defpop{position:fixed;z-index:60;background:var(--surface);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--shadow);padding:.8rem .9rem .75rem;
  font-size:.78rem;line-height:1.5;color:var(--ink-2);max-height:70vh;overflow-y:auto}
#defpop[hidden]{display:none}
#defpop h4{font-size:.9rem;color:var(--ink);margin:0 2rem .35rem 0}
#defpop h4 span{font-size:.68rem;font-weight:500;color:var(--muted);text-transform:none}
#defpop p{margin:0 0 .55rem}
#defpop dl{margin:0 0 .55rem}
#defpop dt{font-size:.63rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);
  font-weight:700;margin-top:.45rem}
#defpop dd{margin:.1rem 0 0}
#defpop a{font-size:.73rem}
.defpop-x{position:absolute;top:.3rem;right:.4rem;width:22px;height:22px;border:0;
  background:none;color:var(--muted);font-size:1.1rem;line-height:1;cursor:pointer;border-radius:6px}
.defpop-x:hover{background:var(--surface-2);color:var(--ink)}

@media (max-width:700px){.basis-b{grid-template-columns:1fr}}
@media print{.i,#defpop,.basis{display:none!important}}

@media (max-width:1400px){:root{--ins:290px}}
@media (max-width:1180px){
  .work{grid-template-columns:var(--rail) minmax(0,1fr)}
  .insights{grid-column:1/-1;border-left:0;border-top:1px solid var(--line);max-height:none}
}
@media (max-width:760px){.insights{grid-column:auto}}

/* ---------- village card: composite gauges ---------- */
.scores{margin-top:.3rem}
.gauge{margin:0 0 .55rem}
.g-top{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem;font-size:.8rem}
.g-top b{font-variant-numeric:tabular-nums;font-weight:660}
.g-top b small{font-size:.68em;color:var(--muted);font-weight:500}
.g-track{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:.22rem 0 .15rem}
.g-track>i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#a8c99a,var(--accent))}
.g-hint{font-size:.68rem;color:var(--muted);line-height:1.3}
.band{display:grid;grid-template-columns:auto 1fr;gap:.15rem .45rem;align-items:center;
  background:var(--surface-2);border:1px solid var(--line);border-left:3px solid var(--b);
  border-radius:8px;padding:.45rem .55rem;margin:.5rem 0 .35rem}
.band-dot{width:8px;height:8px;border-radius:50%;background:var(--b)}
.band b{font-size:.85rem;text-transform:capitalize}
.band-why{grid-column:2;font-size:.7rem;color:var(--muted);line-height:1.35}
.g-note{font-size:.68rem;color:var(--muted);line-height:1.4;margin:.3rem 0 0}

/* ---------- citations ---------- */
.doc p.cite{max-width:100%;padding:.6rem .8rem;background:var(--surface);
  border-left:3px solid var(--line-2);border-radius:0 var(--r) var(--r) 0;
  font-size:.88rem;line-height:1.55;margin:.5rem 0 1rem}
.doc details.bib{max-width:100%;margin:0 0 1.2rem}
.doc details.bib summary{cursor:pointer;font-size:.8rem;color:var(--muted);font-weight:600;
  padding:.2rem 0}
.doc details.bib summary:hover{color:var(--ink)}
.doc details.bib pre{margin-top:.5rem}

/* ---------- village report card ---------- */
.an{margin-top:.7rem}
.vg{padding-top:.7rem;margin-top:.7rem;border-top:1px solid var(--line)}
.vg:first-child{border-top:0;margin-top:.2rem;padding-top:0}
.vg>h4{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
  font-weight:700;margin:0 0 .5rem}
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:.4rem}
.vs{background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:.35rem .45rem}
.vs-l{display:block;font-size:.63rem;text-transform:uppercase;letter-spacing:.04em;
  color:var(--muted);font-weight:600;line-height:1.2}
.vs-v{display:block;font-size:1rem;font-weight:660;font-variant-numeric:tabular-nums;
  letter-spacing:-.02em;margin-top:.1rem;line-height:1.15}
.vs-v i{font-style:normal;font-size:.6em;color:var(--muted);font-weight:500;margin-left:.2em}
.vs-s{display:block;font-size:.63rem;color:var(--muted);margin-top:.1rem;line-height:1.3}

.vbar{margin:0 0 .5rem}
.vbar-t{display:flex;justify-content:space-between;align-items:baseline;font-size:.78rem}
.vbar-t b{font-variant-numeric:tabular-nums}
.vbar-t b i{font-style:normal;font-size:.72em;color:var(--muted);font-weight:500}
.vbar-track{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:.2rem 0 .12rem}
.vbar-track>i{display:block;height:100%;border-radius:99px}
.vbar-s{font-size:.65rem;color:var(--muted);font-variant-numeric:tabular-nums}

.vrow{display:flex;justify-content:space-between;gap:.6rem;padding:.24rem 0;
  border-bottom:1px solid var(--line);font-size:.76rem}
.vrow:last-child{border-bottom:0}
.vrow span{color:var(--muted);flex:0 0 auto}
.vrow b{font-weight:600;text-align:right;word-break:break-word}

.vax{margin:0 0 .6rem}
.vax-t{display:flex;align-items:baseline;gap:.4rem;font-size:.79rem}
.vax-t span{flex:1}
.vax-t b{font-variant-numeric:tabular-nums;font-weight:680}
.vax-t b i{font-style:normal;font-size:.7em;color:var(--muted);font-weight:500}
.vax-b{font-style:normal;font-size:.62rem;text-transform:uppercase;letter-spacing:.05em;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;padding:.05rem .35rem;font-weight:700}
.vax-track{height:7px;border-radius:99px;background:var(--line);overflow:hidden;margin:.22rem 0 .14rem}
.vax-track>i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#a8c99a,var(--accent))}
.vax-s{font-size:.65rem;color:var(--muted);line-height:1.35}

.vband{border:1px solid var(--line);border-left:3px solid var(--b);border-radius:8px;
  background:var(--surface-2);padding:.45rem .55rem;margin:.55rem 0 .35rem}
.vband b{display:block;font-size:.86rem;text-transform:capitalize;color:var(--b);margin-bottom:.1rem}
.vband span{font-size:.68rem;color:var(--muted);line-height:1.4}
.vnote{font-size:.65rem;color:var(--muted);line-height:1.45;margin:.35rem 0 0}
.chip-none[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip-none[aria-pressed=true] .sw-none{background:var(--surface)!important}
.sw-none{background:transparent;border:1.5px solid var(--muted);box-shadow:none}

/* ---------- PDF export button ---------- */
.ins-title{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.btn-pdf{flex:0 0 auto;border:1px solid var(--line-2);background:var(--surface-2);
  color:var(--ink-2);border-radius:7px;padding:.25rem .5rem;font-size:.7rem;font-weight:700;
  letter-spacing:.04em;cursor:pointer}
.btn-pdf:hover{border-color:var(--accent);color:var(--accent)}
.btn-pdf-card{width:100%;text-align:center;margin-top:.6rem;cursor:pointer;
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.btn-pdf-card:hover{filter:brightness(1.06);color:var(--accent-ink)}

/* ---------- print report ---------- */
#report{display:none}
@media screen{ body.printing #report{display:none} }
@media print{
  .shell,.topbar,.footer,.docwrap,.doc{display:none!important}
  #report{display:block!important;padding:0;margin:0;color:#000;background:#fff}
  @page{size:A4;margin:14mm}
  html,body{background:#fff!important;height:auto!important}
  .r-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12mm;
    border-bottom:1.5pt solid #2f6d3a;padding-bottom:4mm;margin-bottom:5mm}
  .r-head h1{font-size:18pt;margin:0 0 1mm;color:#12150f}
  .r-sub{margin:0;font-size:10.5pt;color:#4a5247}
  .r-brand{text-align:right;font-size:8pt;color:#4a5247;line-height:1.5}
  .r-brand strong{display:block;font-size:9.5pt;color:#2f6d3a}
  .r-brand span{display:block}
  .r-map{margin:0 0 5mm;break-inside:avoid}
  .r-map img{width:100%;max-height:105mm;object-fit:contain;border:0.5pt solid #dbe1d6}
  .r-map figcaption{font-size:7.5pt;color:#6b7280;margin-top:1mm}
  .r-nomap{font-size:9pt;color:#b8433a;margin:0 0 5mm}
  .r-sec{break-inside:avoid;margin-bottom:5mm}
  .r-sec h2{font-size:10pt;text-transform:uppercase;letter-spacing:.06em;color:#2f6d3a;
    margin:4mm 0 1.5mm;border-bottom:.5pt solid #dbe1d6;padding-bottom:1mm}
  table.r-tab{width:100%;border-collapse:collapse;font-size:9pt}
  table.r-tab th{text-align:left;font-weight:500;color:#4a5247;padding:1.1mm 0;
    width:52%;vertical-align:top}
  table.r-tab td{text-align:right;font-weight:650;padding:1.1mm 0;
    font-variant-numeric:tabular-nums;vertical-align:top}
  table.r-tab tr{border-bottom:.3pt solid #eef1ec}
  .r-u{font-weight:400;color:#6b7280;font-size:8pt}
  table.r-cmp{width:100%;border-collapse:collapse;font-size:8.6pt;margin-top:1mm}
  table.r-cmp th{text-align:left;font-weight:500;color:#4a5247;padding:1.1mm 0;vertical-align:top}
  table.r-cmp td{text-align:right;font-weight:650;padding:1.1mm 0 1.1mm 3mm;
    font-variant-numeric:tabular-nums;vertical-align:top;white-space:nowrap}
  table.r-cmp tr{border-bottom:.3pt solid #eef1ec}
  table.r-cmp thead th,table.r-cmp thead td{font-size:7.4pt;text-transform:uppercase;
    letter-spacing:.05em;color:#6b7280;font-weight:600;border-bottom:.6pt solid #dbe1d6}
  table.r-cmp .c-off{color:#01579b}
  table.r-cmp .c-d{font-weight:500;color:#6b7280}
  .r-note{font-size:8pt;color:#6b7280;margin:1.5mm 0 0}
  .r-foot{border-top:.8pt solid #dbe1d6;margin-top:6mm;padding-top:3mm;
    font-size:7.5pt;color:#4a5247;line-height:1.5;break-inside:avoid}
  .r-foot p{margin:0 0 2mm}
}
.vs-na{color:var(--muted);font-style:italic;font-size:.8rem!important;font-weight:500!important}
.vs.w{grid-column:1/-1}

/* ---------- Kerala ground-truth comparison ---------- */
.klc{border:1px solid var(--accent);border-radius:var(--r);padding:.6rem .65rem;
  background:var(--accent-2)}
.klc>h3{color:var(--accent)}
table.klc-t td:first-child{text-align:left;color:var(--ink-2)}
table.klc-t .up{color:var(--accent);font-weight:650}
table.klc-t .dn{color:var(--bifur);font-weight:650}