/* dashboard + problem pages. Everything new is scoped under .dash; the two shared rules below (table, .tw) are also used by the methodology page. */
.tw{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:34rem}th,td{text-align:left;padding:.5rem .7rem;border-bottom:1px solid var(--line)}thead th{background:var(--grey);font-size:.85rem}td{font-variant-numeric:tabular-nums}

.dash{--acc:var(--indigo);--hatch:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--ink) 20%,transparent) 4px 6px);
--sv0:var(--peacock);--sv1:var(--leaf);--sv2:var(--turmeric);--sv3:color-mix(in srgb,var(--madder) 50%,var(--turmeric));--sv4:var(--madder);
--k-peacock:color-mix(in srgb,var(--peacock) 45%,var(--on-dark));--k-leaf:color-mix(in srgb,var(--leaf) 45%,var(--on-dark));--k-madder:color-mix(in srgb,var(--madder) 40%,var(--on-dark))}
.dash :is(h1,h2,p,li,td,th,dt,dd,span,button,label,summary){letter-spacing:0}
.dash :lang(hi),.dash:lang(hi){line-height:1.7}
.dash h1{margin-bottom:.2em}
.dash .lede{font-size:1.1rem;color:var(--mute);margin:0 0 .6rem}
.dash .back{display:inline-flex;align-items:center;padding:.5rem 0;min-height:2.75rem;color:var(--ink)}
.dash .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.a-indigo{--acc:var(--indigo)}.a-jamun{--acc:var(--jamun)}.a-peacock{--acc:var(--peacock)}.a-leaf{--acc:var(--leaf)}
.sv0{--c:var(--sv0)}.sv1{--c:var(--sv1)}.sv2{--c:var(--sv2)}.sv3{--c:var(--sv3)}.sv4{--c:var(--sv4)}

/* demo treatment: ribbon, chip on every panel, hatched/dotted marks */
.dash .ribbon{margin:0 0 1rem;padding:.7rem 1rem;max-width:none;font-size:.95rem;color:var(--ink);background:repeating-linear-gradient(135deg,var(--saffron-bg) 0 14px,color-mix(in srgb,var(--saffron) 22%,var(--saffron-bg)) 14px 28px);border:2px solid var(--saffron)}
.dash .ribbon strong{font-size:1rem;margin-inline-end:.4rem}
.dash .demo-chip{font-size:.85rem;font-weight:600;padding:.1rem .6rem;border:1.5px dashed var(--saffron);color:var(--ink);background:var(--saffron-bg);border-radius:.2rem;white-space:nowrap}
.dash .demo-toggle{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;margin:.4rem 0 0}
.dash .demo-toggle input{width:1.25rem;height:1.25rem;accent-color:var(--turmeric)}

/* full-bleed band behind the page title (shadow bleeds sideways, clip-path trims it vertically) */
.hero,.phead{position:relative;margin:0 0 1.8rem;background:var(--hb);color:var(--ink);box-shadow:0 0 0 100vmax var(--hb);clip-path:inset(0 -100vmax)}
.hero{--hb:var(--indigo-deep);color:var(--on-dark);padding:1.6rem 0 2.4rem}
@media (prefers-color-scheme:dark){.hero{--hb:var(--indigo-soft)}}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;background:repeating-linear-gradient(90deg,var(--indigo-mid) 0 3rem,var(--turmeric) 3rem 6rem,var(--peacock) 6rem 9rem,var(--leaf) 9rem 12rem,var(--jamun) 12rem 15rem)}
.hero h1{color:var(--on-dark);font-size:var(--t-3xl)}
.hero .lede{color:var(--on-dark-mute);max-width:36rem}
.hero .demo-toggle{color:var(--on-dark)}
.hero :focus-visible{outline-color:var(--on-dark)}
.hero-in{display:grid;gap:1.8rem}
@media (min-width:60rem){.hero-in.has-k{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:end;gap:3.5rem}}

/* KPI strip: oversized lead figure, each numeral its own palette colour */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(7rem,1fr));gap:1rem 1.6rem;margin:0}
.strip>div{display:flex;flex-direction:column-reverse;justify-content:flex-end}
.strip dd{margin:0;font:650 2rem/1.1 var(--serif);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.strip dt{font-size:.9rem;margin:.25rem 0 0;line-height:1.4}
.strip .lead{grid-column:1/-1}.strip .lead dd{font-size:clamp(3.6rem,11vw,6rem);line-height:1}
.hero .strip dt{color:var(--on-dark-mute)}
.hero .strip>div:nth-child(1) dd{color:var(--turmeric)}.hero .strip>div:nth-child(2) dd{color:var(--k-peacock)}.hero .strip>div:nth-child(3) dd{color:var(--k-leaf)}.hero .strip>div:nth-child(4) dd{color:var(--k-madder)}

/* problem header: sector colour carries the page */
.phead{--hb:color-mix(in srgb,var(--sc) 26%,var(--paper));padding:.4rem 0 2.2rem}
.phead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:10px;background:var(--sc);box-shadow:0 0 0 100vmax var(--sc);clip-path:inset(0 -100vmax)}
.phead h1,.phead .lede,.phead .strip dd{color:var(--ink)}
.ph-row{display:flex;gap:1.2rem;align-items:center;margin:.2rem 0 .6rem}
.ph-ic{flex:none;display:grid;place-items:center;width:5rem;height:5rem;background:var(--paper);border:4px solid var(--sc);border-radius:50%;color:color-mix(in srgb,var(--sc) 55%,var(--ink))}
.ph-ic svg{width:2.6rem;height:2.6rem}
.phead .strip{margin-top:1.2rem;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr))}
.phead .strip .lead{grid-column:auto}.phead .strip .lead dd{font-size:clamp(2.8rem,8vw,4.4rem)}
.phead .strip dt{color:var(--ink)}
.phead .strip>div[style] dd::after{content:"";display:block;width:3.2rem;height:.4rem;margin-top:.3rem;background:var(--c)}
@media (max-width:30rem){.ph-ic{width:3.6rem;height:3.6rem}.ph-ic svg{width:2rem;height:2rem}}

/* layout: filters rail + content */
.dash-grid{display:grid;gap:1rem}
.dash-main{min-width:0;container-type:inline-size}
.rail{border-top:5px solid var(--indigo);background:var(--indigo-soft);border-radius:0 0 .4rem .4rem}
.rail summary{display:flex;align-items:center;gap:.6rem;min-height:2.75rem;padding:.5rem .9rem;font-weight:600;cursor:pointer}
.rail summary .count{display:inline-grid;place-items:center;min-width:1.5rem;height:1.5rem;border-radius:1rem;background:var(--indigo);color:var(--paper);font-size:.8rem}
.rail .filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr));gap:.7rem;align-items:end;padding:0 .9rem .9rem;background:none;border:0}
.rail .filters .f{margin:0}.rail .btn.small{min-height:2.75rem}
.rail :is(select,input){background:var(--paper);color:var(--ink)}
@media (min-width:60rem){
  .dash-grid{grid-template-columns:14.5rem minmax(0,1fr);gap:2.4rem}
  .dash-grid>aside{position:sticky;top:4.8rem;align-self:start}
  .rail summary{pointer-events:none;list-style:none;cursor:default}.rail summary::-webkit-details-marker{display:none}
  .rail .filters{grid-template-columns:1fr}
}
@media (max-width:59.99rem){.rail summary::after{content:'';margin-inline-start:auto;width:.55rem;height:.55rem;border:solid var(--ink);border-width:0 2px 2px 0;transform:rotate(45deg)}.rail[open] summary::after{transform:rotate(-135deg)}.rail summary{list-style:none}.rail summary::-webkit-details-marker{display:none}}
.active{display:flex;flex-wrap:wrap;gap:.4rem .5rem;align-items:center;margin:0 0 1rem;font-size:.95rem}
.chip{font:inherit;font-size:.9rem;min-height:2.75rem;padding:.2rem .8rem;border:2px solid var(--c,var(--indigo));background:color-mix(in srgb,var(--c,var(--indigo)) 14%,var(--paper));color:var(--ink);border-radius:2rem;cursor:pointer}
.chip:hover{background:color-mix(in srgb,var(--c,var(--indigo)) 28%,var(--paper))}

/* sector chips: each keeps its colour and icon */
.secs{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1rem}
.sec-chip{display:inline-flex;align-items:center;gap:.45rem;min-height:2.75rem;padding:.15rem .8rem .15rem .35rem;font:inherit;font-size:.9rem;color:var(--ink);background:var(--paper);border:2px solid color-mix(in srgb,var(--sc) 70%,var(--paper));border-radius:2rem;cursor:pointer}
.sec-chip:hover{background:color-mix(in srgb,var(--sc) 16%,var(--paper))}
.sec-chip[aria-pressed=true]{background:color-mix(in srgb,var(--sc) 30%,var(--paper));border-color:var(--sc);font-weight:700;box-shadow:inset 0 0 0 1px var(--sc)}
.sec-chip[aria-pressed=true]::after{content:"✓";margin-inline-start:.1rem}
@media (max-width:40rem){.secs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:.5rem}.sec-chip{flex:none}}
.sic{flex:none;display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:color-mix(in srgb,var(--sc) 24%,var(--paper));color:color-mix(in srgb,var(--sc) 55%,var(--ink));box-shadow:inset 0 0 0 2px var(--sc)}
.sic svg{display:block}

/* panels: a coloured rule opens each section */
.panel{margin-top:2.6rem;container-type:inline-size}
.panel h2{margin:0}
.ph2{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:.3rem;padding-top:.9rem;border-top:1px solid var(--line)}
.ph2::before{content:"";position:absolute;top:-3px;inset-inline-start:0;width:5.5rem;height:5px;background:var(--acc)}
.panel>.help{margin:.2rem 0 .8rem}
.panel.tint{padding:1.2rem 1.2rem 1.4rem;background:var(--peacock-soft);border-radius:.5rem}
.panel.tint .ph2{border-top-color:transparent}
.panel.calm{padding:1rem 1.2rem 1.2rem;background:var(--grey);border-radius:.5rem;--acc:var(--mute)}
.panel.calm .ph2{border-top-color:transparent}
.dash .big{font-size:1.1rem}
.duo{display:grid;gap:0 2.6rem;margin-top:0}.duo>.panel{min-width:0}
@container (min-width:44rem){.duo{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}}

/* ranked rows: icon, coloured bar, 95% whisker, value and denominator */
.lr-list{list-style:none;margin:.4rem 0 0;padding:0}
.lr{--c:var(--acc);display:grid;grid-template-columns:minmax(8rem,14.5rem) 1fr 7.5rem;gap:.2rem .9rem;align-items:center;padding:.5rem 0;border-bottom:1px solid var(--line)}
.lr-axis{border:0;padding:0;font-size:.78rem;color:var(--mute)}
.lr-axis .lr-p{height:1rem;background:none}.lr-axis .lr-p span{position:absolute;top:0;transform:translateX(-50%)}.lr-axis .lr-p span:first-child{transform:none}.lr-axis .lr-p span:last-child{transform:translateX(-100%)}
.lr-l{display:flex;align-items:center;gap:.6rem;min-width:0;font-size:.95rem;line-height:1.35}.lr-l a{color:var(--ink)}
.lr-p{position:relative;display:block;height:1.6rem;margin-inline:6px;background:linear-gradient(var(--line),var(--line)) 0 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 50% 0/1px 100% no-repeat,linear-gradient(var(--line),var(--line)) 100% 0/1px 100% no-repeat}
.lr-bar{position:absolute;left:0;top:calc(50% - .45rem);height:.9rem;background:var(--c);border-radius:0 3px 3px 0}
.lr-w{position:absolute;top:calc(50% - 1px);height:2px;background:var(--ink);box-shadow:0 0 0 1px var(--paper)}
.lr-w::before,.lr-w::after{content:"";position:absolute;top:-5px;width:2px;height:12px;background:var(--ink);box-shadow:0 0 0 1px var(--paper)}.lr-w::before{left:0}.lr-w::after{right:0}
.lr-dot{position:absolute;top:50%;width:1rem;height:1rem;border-radius:50%;background:var(--c);border:2px solid var(--paper);box-shadow:0 0 0 2px var(--ink);transform:translate(-50%,-50%);text-decoration:none}
.lr.small .lr-dot{background:var(--paper)}.lr.small .lr-bar{opacity:.5}
.lr-v{font-variant-numeric:tabular-nums;font-size:.95rem}.lr-v strong{display:block;line-height:1.25}.lr-v small{display:block;color:var(--mute);font-size:.8rem;line-height:1.3}
.is-demo .lr-bar{background:repeating-linear-gradient(135deg,var(--c) 0 5px,color-mix(in srgb,var(--c) 25%,var(--paper)) 5px 9px);outline:1.5px dashed var(--c)}
@container (max-width:34rem){.lr{grid-template-columns:1fr 7rem;grid-template-areas:"l v" "p p"}.lr-l{grid-area:l}.lr-v{grid-area:v;text-align:end}.lr-p{grid-area:p}.lr-axis{grid-template-columns:1fr}.lr-axis>:first-child,.lr-axis>:last-child{display:none}}

/* tile cartogram: sequential indigo ramp, value printed in each tile */
.cart-wrap{display:grid;gap:.6rem 2.4rem;margin-top:.8rem;grid-template-areas:"cart" "legend" "note" "alt"}
@container (min-width:46rem){.cart-wrap{grid-template-columns:minmax(0,34rem) minmax(11rem,1fr);grid-template-areas:"cart legend" "cart note" "alt alt";align-items:start}.legend{flex-direction:column;align-items:flex-start}}
.cart{grid-area:cart;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:3px;width:100%}
.cart-wrap>.legend{grid-area:legend}.cart-wrap>.note{grid-area:note}.cart-wrap>.alt{grid-area:alt}
.b0{--tb:var(--seq-1);--tt:var(--ink)}.b1{--tb:var(--seq-2);--tt:var(--ink)}.b2{--tb:var(--seq-3);--tt:var(--ink)}.b3{--tb:var(--seq-4);--tt:var(--paper)}.b4{--tb:var(--seq-5);--tt:var(--paper)}
.tile{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.72rem;line-height:1.15;background-color:var(--tb);color:var(--tt);border-radius:3px;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--indigo) 35%,transparent);font-variant-numeric:tabular-nums}
.tile b{font-weight:700;font-size:.8rem}
.tile.small{background-image:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--tt) 22%,transparent) 4px 6px)}
.tile.none{background:none;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mute) 55%,transparent);color:var(--mute)}
.is-demo .tile:not(.none){background-image:radial-gradient(circle,color-mix(in srgb,var(--tt) 30%,transparent) 1px,transparent 1.5px);background-size:6px 6px}
.is-demo .tile.small:not(.none){background-image:repeating-linear-gradient(45deg,transparent 0 4px,color-mix(in srgb,var(--tt) 22%,transparent) 4px 6px);background-size:auto}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:.3rem 1rem;margin:.8rem 0 .4rem;padding:0;font-size:.85rem;color:var(--ink)}
.legend li{display:flex;align-items:center;gap:.35rem}
.sw{display:inline-block;width:1.1rem;height:1.1rem;border-radius:2px;background-color:var(--tb);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--indigo) 35%,transparent)}
.sw.none{background:none;box-shadow:inset 0 0 0 1px var(--mute)}.sw.small{background-image:var(--hatch)}
.alt{margin-top:.8rem}.alt summary{display:flex;align-items:center;min-height:2.75rem;cursor:pointer;font-weight:600;color:var(--indigo)}

/* PSI table: value, position on 0-100 over five level segments, level as label + ascending meter */
.dash table{min-width:44rem;font-size:.95rem}
.dash th[scope=row]{font-weight:600;position:sticky;left:0;background:var(--peacock-soft)}
.dash :not(.tint) table th[scope=row]{background:var(--paper)}
.dash thead th{background:none;border-bottom:2px solid var(--peacock);color:var(--ink)}
.rowl{display:flex;align-items:center;gap:.6rem}.rowl a{color:var(--ink)}
.psi-c{white-space:nowrap}.psi-c strong{display:inline-block;min-width:2.8rem;margin-inline-end:.4rem}
.pt{position:relative;display:inline-flex;vertical-align:middle;width:8.5rem;height:.6rem;border-radius:3px;overflow:visible}
.pt i{flex:1;background:var(--c);border-inline-end:2px solid var(--peacock-soft)}.pt i:first-child{border-radius:3px 0 0 3px}.pt i:nth-child(5){border-radius:0 3px 3px 0;border:0}
.pt u{position:absolute;top:50%;width:1rem;height:1rem;border-radius:50%;background:var(--paper);border:3px solid var(--ink);transform:translate(-50%,-50%)}
.pt i:nth-child(1){--c:var(--sv0)}.pt i:nth-child(2){--c:var(--sv1)}.pt i:nth-child(3){--c:var(--sv2)}.pt i:nth-child(4){--c:var(--sv3)}.pt i:nth-child(5){--c:var(--sv4)}
.lvl{display:inline-flex;align-items:center;gap:.4rem;padding:.15rem .65rem .15rem .5rem;border-radius:2rem;background:color-mix(in srgb,var(--c) 22%,var(--paper));border:1.5px solid var(--c);color:var(--ink);font-size:.9rem;white-space:nowrap}
.meter{display:inline-flex;align-items:flex-end;gap:2px}
.meter i{width:5px;border:1.5px solid color-mix(in srgb,var(--c) 60%,var(--ink));border-radius:1px}.meter i:nth-child(1){height:7px}.meter i:nth-child(2){height:10px}.meter i:nth-child(3){height:13px}.meter i:nth-child(4){height:16px}.meter i:nth-child(5){height:19px}
.meter i.on{background:var(--c)}
.sevkey{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0 .4rem;padding:0}
.dash td.lv{white-space:nowrap}

/* trend */
.trend{display:block;width:100%;max-width:34rem;height:auto}
.trend .grid{stroke:var(--line)}.trend .axis{stroke:var(--mute)}.trend .line{fill:none;stroke:var(--leaf);stroke-width:3;stroke-linejoin:round}.is-demo .trend .line{stroke-dasharray:7 5}
.trend .dot{fill:var(--leaf);stroke:var(--paper);stroke-width:2}.trend .tick{fill:var(--mute);font-size:16px}.trend .lab{fill:var(--ink);font-size:17px;font-weight:600}

/* zero state, data quality */
.zero{margin-top:1rem;padding:1.4rem 1.4rem 1.6rem;border:1.5px dashed var(--indigo);background:var(--indigo-soft);border-radius:.4rem}.zero h2{margin-top:0}
.dash .dq{max-width:34rem;margin-top:.4rem}.dash .dq dt,.dash .dq dd{padding:.35rem 0;border-bottom:1px solid var(--line);margin:0}.dash .dq dt{color:var(--ink)}
.dash .empty{margin:.4rem 0}

/* problem page: evidence groups */
.ev-group{margin-top:2rem;padding-inline-start:1.2rem;border-inline-start:6px solid var(--sc,var(--indigo));container-type:inline-size}
.ev-group.cit{--acc:var(--sc)}
.ev-group.none{padding:1.2rem 1.4rem;background:var(--grey);border-inline-start:6px dashed var(--mute);border-radius:.3rem}
.ev-group>.panel:first-of-type{margin-top:.6rem}
.ev-badge{display:inline-flex;align-items:center;gap:.5rem;font-weight:600;font-size:.95rem}
.ev-badge::before{content:"";width:.9rem;height:.9rem;background:var(--sc,var(--indigo));display:inline-block;border-radius:50%}
.ev-badge.none::before{background:none;border:2px dashed var(--mute);border-radius:2px}
.ev-group.none h2{margin-top:.2rem}
.check{list-style:none;padding:0;margin:.6rem 0 0;max-width:40rem}
.check li{display:flex;align-items:center;gap:.8rem;padding:.55rem 0;border-bottom:1px solid var(--line);color:var(--ink)}
.box{flex:none;width:1rem;height:1rem;border:2px dashed var(--mute);border-radius:2px}
.dash .ev-group.none h2.ev-badge{font:600 1.3rem var(--serif);margin:0 0 .4rem;color:var(--ink)}
.dash .ev-group.none h2.ev-badge::before{display:none}
@media (prefers-reduced-motion:reduce){.dash *{transition:none!important;animation:none!important}}