/* =============================================================
   SE&LD — Schools & Employees Information  ·  UI CONCEPT
   Government palette: Pakistan green + white, gold seal accent.
   Light, formal, high-contrast — built to stay legible on cheap
   screens and to render fast on slow connections.
   ============================================================= */

:root{
  --green:      #04693A;   /* primary — Pakistan green */
  --green-dk:   #01411C;   /* headers, deep surfaces   */
  --green-lt:   #E8F3ED;   /* tint surface             */
  --gold:       #C8A951;   /* seal / accent            */
  --bg:         #F6F8F7;
  --card:       #FFFFFF;
  --heading:    #10221A;
  --body:       #4B5A53;
  --border:     #DCE6E0;
  --line:       #EDF2EF;
  --danger:     #B3261E;
  --warn:       #9A6B00;

  /* Cadre badges — reuse on every checker page */
  --cadre-teach-bg:     #E7F5EE;
  --cadre-teach-fg:     #01411C;
  --cadre-teach-bd:     #9FCFB5;
  --cadre-nteach-bg:    #F3F0E8;
  --cadre-nteach-fg:    #5C4A1F;
  --cadre-nteach-bd:    #D4C7A3;
  --cadre-other-bg:     #EEF1F3;
  --cadre-other-fg:     #334155;
  --cadre-other-bd:     #CBD5E1;

  /* School level badges — reuse on every checker page */
  --lvl-primary-bg:     #E8F5E9;
  --lvl-primary-fg:     #1B5E20;
  --lvl-primary-bd:     #A5D6A7;
  --lvl-middle-bg:      #E3F2FD;
  --lvl-middle-fg:      #0D47A1;
  --lvl-middle-bd:      #90CAF9;
  --lvl-elementary-bg:  #E0F7FA;
  --lvl-elementary-fg:  #006064;
  --lvl-elementary-bd:  #80DEEA;
  --lvl-secondary-bg:   #FFF3E0;
  --lvl-secondary-fg:   #E65100;
  --lvl-secondary-bd:   #FFCC80;
  --lvl-hisec-bg:       #F3E5F5;
  --lvl-hisec-fg:       #6A1B9A;
  --lvl-hisec-bd:       #CE93D8;
  --lvl-office-bg:      #ECEFF1;
  --lvl-office-fg:      #37474F;
  --lvl-office-bd:      #B0BEC5;
  --lvl-post-bg:        #E8EAF6;
  --lvl-post-fg:        #283593;
  --lvl-post-bd:        #9FA8DA;

  /* Height of the sticky nav — anything that sticks below it offsets by this.
     Driven by the emblem, so it tracks the .crest breakpoints below. */
  --navh: 112px;

  --ease: cubic-bezier(0.22,1,0.36,1);
  --shadow-sm: 0 1px 2px rgba(16,34,26,.05), 0 1px 3px rgba(16,34,26,.04);
  --shadow-md: 0 4px 16px rgba(16,34,26,.07);
  --shadow-lg: 0 18px 50px rgba(16,34,26,.10);
  --nav-bg: rgba(255,255,255,.86);
  --warn-box-bg: #FDF9EF;
  --warn-box-bd: #E8D9A8;
  --warn-box-fg: #5A4A17;
  --danger-soft-bg: #FBEAE9;
  --danger-soft-bd: #F2C6C2;
  --sk: rgba(1,65,28,.08);
  color-scheme: light;
}

html[data-theme="dark"]{
  --green:      #3CB371;
  --green-dk:   #0B2818;
  --green-lt:   #1A2F24;
  --gold:       #D4B86A;
  --bg:         #0E1511;
  --card:       #17221B;
  --heading:    #E8F0EB;
  --body:       #A7B6AE;
  --border:     #2C3D34;
  --line:       #223028;
  --danger:     #F07167;
  --warn:       #E6B84D;

  --cadre-teach-bg:     #163226;
  --cadre-teach-fg:     #9BE4B8;
  --cadre-teach-bd:     #2F5C45;
  --cadre-nteach-bg:    #2A2618;
  --cadre-nteach-fg:    #E6D5A5;
  --cadre-nteach-bd:    #5C5130;
  --cadre-other-bg:     #1E272E;
  --cadre-other-fg:     #CBD5E1;
  --cadre-other-bd:     #3A4652;

  --lvl-primary-bg:     #163226;
  --lvl-primary-fg:     #81C784;
  --lvl-primary-bd:     #2E5A36;
  --lvl-middle-bg:      #152536;
  --lvl-middle-fg:      #90CAF9;
  --lvl-middle-bd:      #2A4A6A;
  --lvl-elementary-bg:  #143033;
  --lvl-elementary-fg:  #80DEEA;
  --lvl-elementary-bd:  #2A555A;
  --lvl-secondary-bg:   #332416;
  --lvl-secondary-fg:   #FFB74D;
  --lvl-secondary-bd:   #6A4520;
  --lvl-hisec-bg:       #2A1A33;
  --lvl-hisec-fg:       #CE93D8;
  --lvl-hisec-bd:       #56345F;
  --lvl-office-bg:      #1E272E;
  --lvl-office-fg:      #B0BEC5;
  --lvl-office-bd:      #455A64;
  --lvl-post-bg:        #1A2038;
  --lvl-post-fg:        #9FA8DA;
  --lvl-post-bd:        #3A4570;

  --shadow-sm: 0 1px 2px rgba(0,0,0,.35), 0 1px 3px rgba(0,0,0,.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 18px 50px rgba(0,0,0,.45);
  --nav-bg: rgba(14,21,17,.88);
  --warn-box-bg: #2A2414;
  --warn-box-bd: #5C4E28;
  --warn-box-fg: #E6D7A8;
  --danger-soft-bg: #3A1C1A;
  --danger-soft-bd: #6B3530;
  --sk: rgba(255,255,255,.08);
  color-scheme: dark;
}

*{ box-sizing:border-box; }
/* `clip` not `hidden`: overflow-x:hidden turns these into scroll containers,
   which silently disables position:sticky on every descendant — the nav and
   the results toolbar both stopped sticking. `clip` contains the off-canvas
   mobile menu without that side effect. */
html{ background:var(--bg); overflow-x:clip; scroll-behavior:smooth; height:100%; }
body{
  margin:0; background:var(--bg); color:var(--body);
  font-family:'Jost',system-ui,-apple-system,sans-serif;
  font-weight:400; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
  min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column;
}
body > main{ flex:1 0 auto; }
body > footer{ flex-shrink:0; margin-top:auto; }
body.modal-open{ overflow:hidden; }
::selection{ background:var(--green); color:#fff; }

/* Keyboard focus. Most controls here are custom elements (chips, facets, tabs,
   segmented buttons) whose default outline is easy to lose against the tinted
   fills, so one visible ring is declared for all of them. :focus-visible keeps
   it off for mouse users. */
:focus-visible{ outline:2px solid var(--green); outline-offset:2px; border-radius:4px; }
.field:focus-visible{ outline:none; }   /* the field draws its own focus ring */

h1,h2,h3,h4,.font-head{
  font-family:'Playfair Display',Georgia,serif;
  color:var(--heading); font-weight:600; letter-spacing:-.012em; line-height:1.15; margin:0;
}
.eyebrow{ font-size:.66rem; font-weight:600; letter-spacing:.3em; text-transform:uppercase; color:var(--green); }
a{ color:inherit; text-decoration:none; }

/* Landmarks for assistive tech. Result regions had no heading at all, so a
   screen-reader user had nothing to jump to between the search form and the
   results; these name the region without changing the visual design. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =============================================================
   Minimal utility layer.
   Replaces the Tailwind CDN build (~120KB runtime compiler) — the brief
   called for fast loading on weak connections, and only these few
   patterns were ever used.
   ============================================================= */
.flex{ display:flex } .grid{ display:grid } .hidden{ display:none }
.items-center{ align-items:center } .items-end{ align-items:flex-end }
.justify-between{ justify-content:space-between } .flex-wrap{ flex-wrap:wrap } .flex-col{ flex-direction:column } .ml-auto{ margin-left:auto } .text-center{ text-align:center } .gap-2{ gap:.5rem } .gap-3{ gap:.75rem } .gap-4{ gap:1rem }
.gap-5{ gap:1.25rem } .gap-6{ gap:1.5rem } .gap-8{ gap:2rem }
.mt-1{ margin-top:.25rem } .mt-2{ margin-top:.5rem } .mt-3{ margin-top:.75rem }
.mt-4{ margin-top:1rem } .mt-5{ margin-top:1.25rem } .mt-6{ margin-top:1.5rem }
.mt-8{ margin-top:2rem } .mt-10{ margin-top:2.5rem }
.mb-2{ margin-bottom:.5rem } .mb-4{ margin-bottom:1rem } .mb-6{ margin-bottom:1.5rem } .mb-9{ margin-bottom:2.25rem }
.py-3{ padding-top:.75rem; padding-bottom:.75rem }
.py-4{ padding-top:1rem; padding-bottom:1rem } .py-10{ padding-top:2.5rem; padding-bottom:2.5rem }
.px-5{ padding-left:1.25rem; padding-right:1.25rem }
.px-7{ padding-left:1.75rem; padding-right:1.75rem }
.p-5{ padding:1.25rem } .btn.px-5{ padding:.65rem 1.25rem } .btn.px-7{ padding:.9rem 1.75rem }
.text-xs{ font-size:.75rem } .text-sm{ font-size:.875rem } .text-lg{ font-size:1.125rem }
.space-y-3 > * + *{ margin-top:.75rem }
.grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
.grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
@media(min-width:640px){ .sm\:flex-row{ flex-direction:row } .sm\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media(min-width:1024px){
  .lg\:grid-cols-2{ grid-template-columns:repeat(2,minmax(0,1fr)) }
  .lg\:grid-cols-3{ grid-template-columns:repeat(3,minmax(0,1fr)) }
  .lg\:grid-cols-12{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  .lg\:col-span-4{ grid-column:span 4/span 4 }
  .lg\:col-span-5{ grid-column:span 5/span 5 }
  .lg\:col-span-6{ grid-column:span 6/span 6 }
  .lg\:col-span-7{ grid-column:span 7/span 7 }
  .lg\:col-span-8{ grid-column:span 8/span 8 }
  }
.max-w-lg{ max-width:32rem } .max-w-sm{ max-width:24rem } .max-w-md{ max-width:28rem }
/* arbitrary-value classes carried over from the Tailwind markup */
.text-\[9px\]{ font-size:9px } .text-\[10px\]{ font-size:10px } .text-\[11px\]{ font-size:11px }
.tracking-\[0\.14em\]{ letter-spacing:.14em } .tracking-\[0\.16em\]{ letter-spacing:.16em }
.tracking-\[0\.18em\]{ letter-spacing:.18em } .tracking-\[0\.22em\]{ letter-spacing:.22em }
.uppercase{ text-transform:uppercase }
.block{ display:block } .relative{ position:relative }
.w-full{ width:100% } .gap-12{ gap:3rem }
.mt-1\.5{ margin-top:.375rem }
.btn.py-3{ padding-top:.75rem; padding-bottom:.75rem }
.btn.py-4{ padding-top:1rem; padding-bottom:1rem } .btn.w-full{ width:100% }
.\!pt-0{ padding-top:0 !important } .\!pb-0{ padding-bottom:0 !important } .\!pt-6{ padding-top:1.5rem !important }
.\!text-sm{ font-size:.875rem !important }

/* ---------- Institution summary bar ----------
   Deliberately capped at two lines: title + stats on row 1, identifiers on
   row 2. The roll is what people came for, so it must clear the fold. */
.inst-head{ padding:.7rem .95rem; }
.inst-line1{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
.notice-banner{
  margin:0 0 1rem; padding:.85rem 1rem;
  border-radius:8px; border:1px solid transparent;
  font-size:.9rem; line-height:1.45; color:var(--heading);
}
.notice-banner[hidden]{ display:none !important; }
.notice-banner.danger{
  background:#FBEAE9; border-color:#F3D6D3; color:#7A1F1A;
}
.notice-banner.ok{
  background:#E8F5E9; border-color:#C8E6C9; color:#1B5E20;
}
.notice-banner strong{ font-weight:700; }
#one + .roll-extras{ margin-top:1rem; }
#campusExtras{ margin-bottom:1rem; }
#campusExtras[hidden]{ display:none !important; }
#many > #campusExtras{ margin-top:0; margin-bottom:1rem; }
#many > #rollExtras{ margin-top:1.1rem; }
#rollExtras[hidden]{ display:none !important; }
.roll-extras > .roll-panel + .roll-panel{ margin-top:1rem; }
.roll-panel .roll-panel-meta{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.65rem 1rem;
}
.roll-panel .roll-panel-meta .k{
  display:block; font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--body);
}
.roll-panel .roll-panel-meta .v{
  display:block; font-size:.9rem; font-weight:600; color:var(--heading); margin-top:.1rem;
}
.roll-panel .roll-panel-meta .v-inline{
  display:inline-flex; align-items:center; gap:.45rem; margin-top:.2rem;
}
.roll-panel .roll-panel-meta .v-sub{
  font-size:.78rem; font-weight:500; color:var(--body);
}
/* School details — 12-col row: Teaching(3) + Non-Teaching(3) + STR(6) */
.school-details-grid{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.65rem .7rem;
  margin-top:.45rem;
  align-items:start;
}
.school-details-grid > .kv-block{
  grid-column:span 3;
  min-width:0;
}
.school-details-grid > .school-details-str{
  grid-column:span 6;
  min-width:0;
}
.school-details-grid:not(:has(.kv-block)) > .school-details-str{
  grid-column:span 12;
  max-width:36rem;
}
.kv-block{ min-width:0; }
.kv-caption{
  font-size:.78rem; font-weight:700; color:var(--heading);
  margin:0 0 .28rem;
}
.kv-table{
  border:1px solid var(--border);
  border-radius:6px;
  overflow:hidden;
  font-size:.78rem;
  background:var(--card);
}
.kv-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) 3.2rem;
  gap:0;
  border-top:1px solid var(--border);
  min-height:1.55rem;
  align-items:center;
}
.kv-row:first-child{ border-top:0; }
.kv-row.head{
  background:#e8f5e9;
  font-weight:700; font-size:.68rem; letter-spacing:.04em;
  text-transform:uppercase; color:var(--heading);
}
.kv-row.total{
  background:rgba(16,34,26,.04);
  font-weight:700;
}
.kv-row.empty .kv-c{
  grid-column:1 / -1; color:var(--body); font-style:italic; padding:.35rem .5rem;
}
.kv-c{ padding:.22rem .45rem; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.kv-c.tot{ text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.kv-desig{ display:flex; flex-direction:column; }
.kv-desig .kv-row.head,
.kv-desig .kv-row.total{ flex:0 0 auto; }
.kv-desig-body .kv-row{ border-top:1px solid var(--border); }
.kv-desig .kv-row.total{ border-top:1px solid var(--border); }
.kv-summary .kv-row{
  grid-template-columns:minmax(0,1.55fr) minmax(0,.7fr);
  min-height:2.15rem;
}
.kv-summary .kv-lab{
  padding:.45rem .65rem; color:var(--heading); line-height:1.35; white-space:normal;
}
.kv-summary .kv-val{
  padding:.45rem .65rem; text-align:right; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--heading);
}
.kv-enroll-subs{
  border-top:1px solid var(--border);
  background:rgba(15,82,150,.03);
}
.kv-enroll-subs .kv-row{ border-top:1px solid rgba(16,34,26,.06); }
.kv-enroll-subs .kv-row:first-child{ border-top:0; }
.kv-summary .kv-row.subline .kv-lab,
.kv-summary .kv-row.subline .kv-val{
  font-size:.78rem; font-weight:500; color:var(--body);
  padding-top:.4rem; padding-bottom:.4rem;
}
.kv-summary .kv-row.enroll-sub{ min-height:2rem; }
.kv-summary .kv-row.enroll-sub .kv-lab{ padding-left:.85rem; }
.kv-gender-lab{
  display:inline-flex; align-items:center; gap:.35rem;
}
.kv-gender-lab .gico{
  width:18px; height:18px; border-radius:5px; flex:0 0 auto;
  display:inline-grid; place-items:center;
}
.kv-gender-lab .gico svg{ width:11px; height:11px; }
.kv-gender-txt{ color:var(--heading); font-weight:600; }
.kv-sum-lab .kv-eq{
  display:inline-grid; place-items:center;
  width:18px; height:18px; font-weight:700; color:var(--body); font-size:.85rem;
}
.kv-summary .kv-row.enroll-sum .kv-val,
.kv-summary .kv-row.enroll-sum .kv-gender-txt{ font-weight:700; color:var(--heading); }
.kv-summary .kv-row.bold .kv-lab,
.kv-summary .kv-row.bold .kv-val{ font-weight:700; }
.kv-mne{
  display:inline; font-weight:600; color:#0F5296; font-size:.72rem;
  white-space:normal;
}
.kv-summary .str-required .str-status{ color:#1a7a3c; }
.kv-summary .str-excess .str-status{ color:#b42318; }
.kv-summary .str-equal .str-status{ color:var(--heading); }
.school-details-ref{
  display:flex; flex-wrap:wrap; gap:.25rem 1.25rem;
  margin:.4rem 0 .55rem; padding:.45rem .65rem;
  background:rgba(16,34,26,.04); border:1px solid var(--border); border-radius:6px;
  font-size:.8rem; line-height:1.4;
}
.school-details-ref .ref-line{ color:var(--heading); }
.school-details-ref .ref-k{ font-weight:600; color:var(--body); }
.school-details-ref .ref-v{ font-weight:700; color:var(--heading); }
.school-details-ref .school-adopted{
  flex:1 1 100%;
  margin-top:.15rem;
  color:var(--green-dk);
}
.enroll-breakup{ margin-top:0; }
.school-details-str .enroll-breakup{ width:100%; }
.kv-breakup-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;
  max-width:100%;
}
.kv-breakup .kv-row{
  grid-template-columns:minmax(0,1.1fr) minmax(0,1.2fr) repeat(3,minmax(3.2rem,4.5rem));
  min-height:1.85rem;
}
.kv-breakup.has-present .kv-row{
  grid-template-columns:minmax(5.5rem,1fr) minmax(6rem,1.1fr) repeat(3,minmax(4.8rem,6.2rem));
}
.kv-breakup .kv-c.sec,
.kv-breakup .kv-c.cls{
  white-space:normal;
  overflow-wrap:anywhere;
  line-height:1.25;
}
.kv-breakup .kv-c.tot{ font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:400; }
.kv-breakup .kv-row.head,
.kv-breakup .kv-row.head .kv-c{
  font-weight:700; color:var(--heading);
}
.kv-breakup .enr-p{ font-weight:400; color:var(--body); }
.kv-breakup .enr-sep{ font-weight:400; color:var(--body); }
.kv-breakup .enr-t{ font-weight:600; color:var(--heading); }
.kv-breakup .kv-row.total .enr-t{ font-weight:700; }
.enroll-breakup .kv-hint{
  font-size:.68rem; font-weight:500; color:var(--body); margin-left:.35rem;
}
.enroll-breakup-summary{
  margin-top:.55rem; padding:.5rem .65rem;
  background:rgba(15,82,150,.08); border:1px solid rgba(15,82,150,.2);
  border-radius:6px; font-size:.82rem; color:var(--heading); line-height:1.4;
}
.enroll-breakup-summary .kv-mne{ font-size:.78rem; }
.enroll-breakup-icons{
  display:inline-flex; align-items:center; gap:.2rem; vertical-align:middle; margin:0 .2rem;
}
.enroll-breakup-icons .gico{
  width:18px; height:18px; border-radius:5px;
  display:inline-grid; place-items:center;
}
.enroll-breakup-icons .gico svg{ width:11px; height:11px; }
@media(max-width:1100px){
  .school-details-grid{ grid-template-columns:repeat(6,minmax(0,1fr)); }
  .school-details-grid > .kv-block{ grid-column:span 3; }
  .school-details-grid > .school-details-str{ grid-column:span 6; }
}
@media(max-width:640px){
  .school-details-grid{ grid-template-columns:1fr; }
  .school-details-grid > .kv-block,
  .school-details-grid > .school-details-str{ grid-column:auto; }
  .kv-breakup .kv-row,
  .kv-breakup.has-present .kv-row{
    grid-template-columns:5.5rem 6.75rem 5.1rem 5.1rem 5.4rem;
    min-width:27.85rem;
    font-size:.72rem;
  }
  .kv-breakup .kv-c{ padding:.28rem .35rem; }
}
.roll-more{
  text-align:center; padding:1.1rem 0 0.4rem; display:flex; flex-direction:column;
  align-items:center; gap:.55rem;
}
.roll-more[hidden]{ display:none !important; }
.inst-title{
  font-family:'Jost',system-ui,sans-serif; font-weight:600;
  font-size:clamp(.98rem,1.6vw,1.22rem); line-height:1.3; margin:0;
  color:var(--heading); letter-spacing:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}
.meta-row{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.mtag{
  display:inline-flex; align-items:center; gap:.3rem;
  background:var(--green-lt); border:1px solid var(--border); border-radius:99px;
  padding:.14rem .55rem; font-size:.68rem; line-height:1.5; color:var(--body); white-space:nowrap;
}
.mtag b{ color:var(--green-dk); font-weight:600; }
/* stat pills — replaces the tall stacked tiles */
.pill-row{ display:flex; flex-wrap:wrap; gap:.35rem; }
.pill{
  display:inline-flex; align-items:baseline; gap:.3rem;
  border:1px solid var(--border); border-radius:6px; background:var(--card);
  padding:.2rem .6rem; font-size:.68rem; color:var(--body); white-space:nowrap;
}
.pill strong{ font-family:'Playfair Display',serif; font-size:.98rem; color:var(--green-dk); line-height:1.1; }
.pill.alert{ background:#FDF3F2; border-color:#F3D6D3; }
.pill.alert strong{ color:var(--danger); }
@media(max-width:720px){ .inst-title{ white-space:normal; } }


/* ---------- Government header ----------
   One row: nav on the left, state emblem on the right. */
#nav{
  position:sticky; top:0; z-index:9000;
  background:var(--nav-bg); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}
#nav .container{
  display:flex; align-items:center; justify-content:flex-start; gap:.65rem;
  padding-top:.85rem; padding-bottom:.7rem;
}
#nav .tubelight{ margin-left:auto; }
.theme-toggle{
  flex-shrink:0; width:2.35rem; height:2.35rem; border-radius:999px;
  display:grid; place-items:center; cursor:pointer;
  border:1px solid var(--border); background:var(--card); color:var(--heading);
  box-shadow:var(--shadow-sm); transition:background .2s, color .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover{ border-color:var(--green); color:var(--green); }
.theme-toggle:focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
.theme-toggle svg{ width:1.05rem; height:1.05rem; display:block; }
.theme-toggle .ico-sun{ display:none; }
.theme-toggle .ico-moon{ display:block; }
html[data-theme="dark"] .theme-toggle .ico-sun{ display:block; }
html[data-theme="dark"] .theme-toggle .ico-moon{ display:none; }
html[data-theme="dark"] .crest{
  background:rgba(244,247,245,.94);
  border-radius:10px;
  padding:.2rem .3rem;
  box-sizing:content-box;
}
/* State emblem. Left on a transparent ground — the arms are an outline mark,
   so a filled tile behind them turns to mud at nav size. */
.crest{
  height:86px; width:auto; flex-shrink:0; display:block;
}
@media(max-width:900px){ .crest{ height:68px; } :root{ --navh:94px; } }
@media(max-width:520px){ .crest{ height:56px; } :root{ --navh:82px; } }
/* ---------- Tubelight nav ----------
   Vanilla port of the Framer-Motion pill navbar. The React version relies on
   `layoutId` to tween a shared indicator between items; here one absolutely
   positioned pill is moved and resized to match the active link, which gives
   the same effect without a layout engine. The lamp bar and its glow are the
   pill's own pseudo-elements, so they travel with it for free.
   Spring (stiffness 300 / damping 30) maps to a lightly overshooting easing. */
.tubelight{
  position:relative; display:flex; align-items:center; gap:.15rem;
  background:rgba(4,105,58,.045); border:1px solid var(--border);
  border-radius:999px; padding:4px; box-shadow:var(--shadow-sm);
  overflow-x:auto; overflow-y:visible; scrollbar-width:none; -ms-overflow-style:none;
  max-width:100%;
}
.tubelight::-webkit-scrollbar{ display:none; }
.tubelight a{
  position:relative; z-index:2; white-space:nowrap; flex-shrink:0;
  display:inline-flex; align-items:center; justify-content:center;
  padding:.5rem 1.05rem; border-radius:999px;
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--body); transition:color .25s;
}
.tubelight a:hover{ color:var(--green); }
.tubelight a.on{ color:var(--green-dk); }
.tl-i{ display:none; }                       /* icon shown only on narrow screens */

.tl-pill{
  position:absolute; top:4px; left:0; width:0; height:calc(100% - 8px);
  border-radius:999px; background:rgba(4,105,58,.10); z-index:1; pointer-events:none;
  transition:transform .45s cubic-bezier(.34,1.32,.64,1), width .45s cubic-bezier(.34,1.32,.64,1);
}
.tl-pill.instant{ transition:none; }         /* first paint must not fly in from x=0 */
/* the lamp bar */
.tl-pill::before{
  content:""; position:absolute; top:-5px; left:50%; transform:translateX(-50%);
  width:34px; height:4px; background:var(--green); border-radius:999px 999px 0 0;
}
/* and its bloom */
.tl-pill::after{
  content:""; position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  width:62px; height:30px; border-radius:999px; filter:blur(7px);
  background:radial-gradient(ellipse at 50% 100%, rgba(4,105,58,.42), rgba(4,105,58,0) 72%);
}

html[data-theme="dark"] .tubelight{
  background:rgba(60,179,113,.08);
}
html[data-theme="dark"] .tubelight a.on{ color:var(--green); }
html[data-theme="dark"] .tl-pill{ background:rgba(60,179,113,.16); }
html[data-theme="dark"] .stats-actions .chip.on,
html[data-theme="dark"] .chip.on{
  background:var(--green); color:#0E1511; border-color:var(--green);
}
html[data-theme="dark"] .leaflet-container{
  background:#1a2420;
  filter:brightness(.9) contrast(1.05) saturate(.92);
}
html[data-theme="dark"] .to-top{
  background:var(--card); color:var(--heading); border-color:var(--border);
}
html[data-theme="dark"] .to-top:hover{
  background:var(--green); color:#0E1511; border-color:var(--green);
}
@media(max-width:900px){
  .tl-t{ display:none; }
  .tl-i{ display:inline-flex; }
  .tubelight a{ padding:.55rem .85rem; }
  .tl-pill::before{ width:22px; }
  .tl-pill::after{ width:44px; }
}
@media(min-width:901px) and (max-width:1200px){
  .tubelight a{ padding:.5rem .7rem; font-size:.67rem; letter-spacing:.04em; }
}

/* ---------- Buttons ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5em; font-size:.74rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; border-radius:6px; border:1px solid transparent; cursor:pointer; transition:all .25s var(--ease); font-family:inherit; }
.btn-primary{ background:var(--green); color:#fff; border-color:var(--green); }
.btn-primary:hover{ background:var(--green-dk); border-color:var(--green-dk); box-shadow:var(--shadow-md); transform:translateY(-1px); }
.btn-ghost{ background:var(--card); color:var(--heading); border-color:var(--border); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green); }

/* ---------- Layout ---------- */
/* Inline padding only — the `padding` shorthand here would reset the block
   axis and silently kill any py-* utility used on a .container. */
.container{
  width:100%; max-width:1280px; margin:0 auto;
  padding-left:clamp(1rem,4vw,2.5rem); padding-right:clamp(1rem,4vw,2.5rem);
}
.section{ padding:clamp(2.5rem,5vw,4rem) 0; }
#res.section{ padding-top:.65rem; padding-bottom:.85rem; }
#guide.section{ padding-top:.85rem; padding-bottom:clamp(1.5rem,3vw,2.5rem); }
.fade-up{ opacity:0; transform:translateY(24px);
  transition:opacity .75s var(--ease), transform .75s var(--ease); }
.fade-up.in{ opacity:1; transform:none; }
.card{ background:var(--card); border:1px solid var(--border); border-radius:10px; box-shadow:var(--shadow-sm); }

/* ---------- Hero (landing) ---------- */
.hero{ position:relative; overflow:hidden; padding:clamp(3rem,7vw,5.5rem) 0 clamp(3rem,6vw,4.5rem); }
.hero-bg{ position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 60% at 82% 18%, rgba(4,105,58,.10), transparent 62%),
    radial-gradient(50% 50% at 12% 88%, rgba(200,169,81,.12), transparent 62%),
    linear-gradient(180deg,#FFFFFF 0%, var(--bg) 100%);
}
.hero-grid{
  position:absolute; inset:0; z-index:1; pointer-events:none; opacity:.5;
  background-image:linear-gradient(rgba(4,105,58,.05) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(4,105,58,.05) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(ellipse at 50% 40%, #000 5%, transparent 70%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 40%, #000 5%, transparent 70%);
}
.hero-inner{ position:relative; z-index:3; }
/* Reveals are plain CSS transitions toggled by an `.in` class from
   js/main.js. They used to be GSAP tweens, which cost two CDN requests for
   an effect the browser does natively. */
.reveal-line{ display:block; overflow:hidden; }
.reveal-line > *{
  display:block; opacity:0; transform:translateY(1.05em);
  transition:opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-line > *.in{ opacity:1; transform:none; }

/* home page router — replaces the mock search console */
.route{
  display:block; padding:.7rem .85rem; border-radius:9px; border:1px solid transparent;
  transition:background .2s, border-color .2s, transform .2s var(--ease);
}
.route + .route{ margin-top:.2rem; }
.route .k{ display:block; font-size:.9rem; font-weight:500; color:var(--heading); line-height:1.35; }
.route .d{ display:block; font-size:.74rem; color:var(--body); margin-top:.1rem; }
.route::after{ content:"→"; float:right; margin-top:-1.35rem; color:var(--green); opacity:0; transition:opacity .2s, transform .2s; }
.route:hover{ background:var(--green-lt); border-color:#BFE0CC; transform:translateX(3px); }
.route:hover::after{ opacity:1; }
.route:hover .k{ color:var(--green-dk); }

/* search console */
.console{ background:var(--card); border:1px solid var(--border); border-radius:12px; box-shadow:var(--shadow-lg); overflow:hidden; }
.console-head{ display:flex; align-items:center; gap:.6rem; padding:.8rem 1.1rem; background:var(--green-dk); color:#fff; }
.console-body{ padding:1.4rem 1.3rem 1.5rem; }
.field-wrap{ position:relative; }
.field{
  width:100%; background:#fff; border:1px solid var(--border); color:var(--heading);
  padding:.9rem 1rem .9rem 2.9rem; border-radius:8px; font-family:inherit; font-size:.95rem;
  transition:border-color .25s, box-shadow .25s;
}
.field::placeholder{ color:#6E7F77; }
.field:focus{ outline:none; border-color:var(--green); box-shadow:0 0 0 4px rgba(4,105,58,.12); }
.field-ico{ position:absolute; left:.95rem; top:50%; transform:translateY(-50%); color:var(--green); }
.status{ display:inline-flex; align-items:center; gap:.45rem; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--green); font-weight:600; }
.status .pulse{ width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.9s ease-in-out infinite; }
@keyframes pulse{ 0%,100%{ box-shadow:0 0 0 0 rgba(4,105,58,.45) } 50%{ box-shadow:0 0 0 7px rgba(4,105,58,0) } }
.switch{ display:inline-flex; align-items:center; gap:.55rem; cursor:pointer; font-size:.82rem; }
.switch input{ position:absolute; opacity:0; }
.switch .track{ width:38px; height:21px; border-radius:99px; background:#CBD6D0; position:relative; transition:background .25s; }
.switch .track::after{ content:""; position:absolute; top:3px; left:3px; width:15px; height:15px; border-radius:50%; background:#fff; transition:transform .25s var(--ease); box-shadow:var(--shadow-sm); }
.switch input:checked + .track{ background:var(--green); }
.switch input:checked + .track::after{ transform:translateX(17px); }

/* ---------- Stats ---------- */
.stat .num{ font-family:'Playfair Display',serif; font-size:clamp(1.7rem,3.8vw,2.5rem); color:var(--green-dk); line-height:1; }
.tile{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.1rem 1.2rem; box-shadow:var(--shadow-sm); }
.tile .k{ font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; color:var(--body); }
.tile .v{ font-family:'Playfair Display',serif; font-size:1.7rem; color:var(--green-dk); line-height:1.2; margin-top:.15rem; }

/* Home Sindh snapshot */
.stats-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; }
@media (min-width:900px){ .stats-kpis{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
.stats-kpi{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:.85rem 1rem; box-shadow:var(--shadow-sm);
}
.stats-kpi .k{ font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body); font-family:inherit; }
.stats-kpi .v{
  font-family:inherit; font-weight:600; font-size:clamp(1.15rem,2.4vw,1.45rem);
  color:var(--heading); line-height:1.2; margin-top:.3rem; font-variant-numeric:tabular-nums;
}
.stats-updated{ font-size:.75rem; color:var(--body); margin-top:.35rem; margin-bottom:0; }
.stats-meta{ font-size:.78rem; color:var(--body); margin-top:.85rem; line-height:1.55; }
.stats-meta strong{ color:var(--heading); font-weight:600; }
.stats-grid{ display:grid; gap:.85rem; margin-top:1rem; align-items:start; }
@media (min-width:900px){ .stats-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
#snapshot.section{ padding-top:.35rem; padding-bottom:.5rem; }
#tools.section{ padding-top:.5rem; padding-bottom:.75rem; }
#homeDisclaimer.section{ padding-top:.25rem; padding-bottom:1.25rem; }
.stats-panel{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-sm); padding:.85rem 1rem .9rem; display:flex; flex-direction:column;
}
.stats-panel-head{
  display:flex; flex-wrap:wrap; align-items:center; gap:.45rem .65rem; margin-bottom:.45rem;
}
.stats-panel-head h3{
  font-family:inherit; font-size:.95rem; font-weight:600; margin:0; flex:1 1 auto; min-width:9rem;
  color:var(--heading);
}
.stats-actions{ display:flex; flex-wrap:wrap; gap:.3rem; align-items:center; }
.stats-actions .chip{ font-size:.72rem; padding:.28rem .55rem; }
.stats-actions .chip.on{ background:var(--green); color:#fff; border-color:var(--green); }
.stats-actions [data-staff-view],
.stats-actions [data-metric]{ font-weight:700; }
.stats-chart-box{ position:relative; height:150px; }
#panelLevels .stats-chart-box{ height:188px; }
.stats-chart-box--split{
  display:flex; align-items:center; gap:.35rem;
}
.stats-doughnut-slot{
  flex:1 1 auto; min-width:0; height:100%;
  display:flex; align-items:center; justify-content:center;
}
#panelRegion .stats-chart-box{ height:168px; }
.stats-chart-box canvas{ width:100% !important; height:100% !important; }
.stats-chart-box--split .stats-doughnut-slot canvas{
  flex:0 0 150px;
  width:150px !important;
  height:150px !important;
  max-width:150px;
}
.stats-legend{
  display:flex; flex-direction:column; justify-content:center; gap:.35rem;
  flex:0 0 auto; min-width:5.75rem; padding-right:.55rem; margin-left:.15rem;
}
.stats-legend-btn{
  display:inline-flex; align-items:center; gap:.35rem;
  font:inherit; font-size:.78rem; font-weight:700; color:var(--heading);
  background:transparent; border:0; padding:.2rem .15rem; margin:0;
  cursor:pointer; text-align:left; border-radius:6px; line-height:1.2;
}
.stats-legend-btn:hover{ background:var(--green-lt); }
.stats-legend-btn .gico{
  width:18px; height:18px; border-radius:5px; margin-right:0; vertical-align:middle;
}
.stats-legend-btn .gico svg{ width:11px; height:11px; }
.stats-legend-btn.is-off{ opacity:.42; }
.stats-legend-btn.is-off .stats-legend-lab{ text-decoration:line-through; }
.stats-total{
  font-size:.78rem; font-weight:600; color:var(--heading); margin-top:.3rem;
  font-variant-numeric:tabular-nums;
}
.stats-table-wrap{ overflow:auto; max-height:200px; }
.stats-table{ width:100%; border-collapse:collapse; font-size:.8rem; }
.stats-table th,.stats-table td{
  text-align:left; padding:.4rem .45rem; border-bottom:1px solid var(--border); white-space:nowrap;
}
.stats-table th{
  font-size:.64rem; letter-spacing:.08em; text-transform:uppercase; color:var(--body); font-weight:600;
  position:sticky; top:0; background:var(--card);
}
.stats-table tfoot th{ border-top:1px solid var(--border); border-bottom:0; color:var(--heading); background:var(--green-lt); }
.stats-table td:not(:first-child), .stats-table tfoot th:not(:first-child){ font-variant-numeric:tabular-nums; }
.stats-note{ font-size:.74rem; color:var(--body); margin-top:.35rem; line-height:1.45; font-variant-numeric:tabular-nums; }
.stats-split-note{
  display:flex; flex-wrap:wrap; align-items:center; gap:.35rem .5rem;
}
.stats-split-item{ display:inline-flex; align-items:center; gap:.3rem; color:var(--heading); }
.stats-split-item .gico{
  width:18px; height:18px; border-radius:5px; margin-right:0; vertical-align:middle;
}
.stats-split-item .gico svg{ width:11px; height:11px; }
.stats-split-sep{ color:var(--body); opacity:.5; user-select:none; }
.stats-error{
  margin-top:.85rem; padding:.8rem 1rem; border-radius:10px;
  background:var(--danger-soft-bg); border:1px solid var(--danger-soft-bd);
  color:var(--danger); font-size:.86rem;
}
.stats-skel .sk{ margin-bottom:.55rem; }
.home-lead{ margin-top:.25rem; margin-bottom:0; font-size:.9rem; color:var(--body); max-width:36rem; line-height:1.45; }

/* ---------- Tool cards ---------- */
.tool{ position:relative; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.5rem 1.3rem; overflow:hidden; transition:transform .3s var(--ease), box-shadow .3s, border-color .3s; box-shadow:var(--shadow-sm); }
.tool::before{ content:""; position:absolute; inset:0 0 auto 0; height:3px; background:linear-gradient(90deg,var(--green),var(--gold)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--ease); }
.tool:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--green); }
.tool:hover::before{ transform:scaleX(1); }
.tool-ico{ width:44px; height:44px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:var(--green-lt); color:var(--green); margin-bottom:1rem; }
.tool h3{ font-size:1.18rem; margin-bottom:.4rem; }
.tool p{ font-size:.86rem; line-height:1.65; margin:0; }
.tool .go{ display:inline-flex; align-items:center; gap:.35rem; margin-top:.9rem; font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--green); font-weight:600; }

/* ---------- Toolbar (results page) ---------- */
.toolbar{ position:sticky; top:var(--navh); z-index:800; background:rgba(246,248,247,.94); backdrop-filter:blur(10px); border-bottom:1px solid var(--border); padding:.85rem 0; }
.seg{ display:inline-flex; background:var(--line); border:1px solid var(--border); border-radius:8px; padding:3px; }
.seg button{ display:inline-flex; align-items:center; gap:.4rem; padding:.45rem .9rem; font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; border:0; background:transparent; color:var(--body); border-radius:6px; cursor:pointer; transition:all .25s var(--ease); font-family:inherit; }
.seg button.on{ background:var(--card); color:var(--green); box-shadow:var(--shadow-sm); }
.chip{ display:inline-flex; align-items:center; gap:.35rem; padding:.4rem .75rem; border:1px solid var(--border); border-radius:99px; background:var(--card); font-size:.72rem; color:var(--body); cursor:pointer; transition:all .2s; }
.chip:hover{ border-color:var(--green); color:var(--green); }
.chip.on{ background:var(--green); color:#fff; border-color:var(--green); }

/* ---------- Employee cards ---------- */
.emp-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr)); gap:.9rem; }
.emp{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1rem 1.1rem; box-shadow:var(--shadow-sm); transition:transform .22s var(--ease), box-shadow .22s, border-color .22s; content-visibility:auto; contain-intrinsic-size:280px; }

/* Hover ring.
   A 1px border-colour change was almost invisible against the card's own
   outline, so the hovered card gets a 2px halo drawn *outside* the border —
   using box-shadow rather than a thicker border means nothing reflows and
   the grid never jumps. Applied to every hoverable result card so the
   feedback is the same wherever you are. */
.emp:hover, .icard:hover, .postrow:hover, .nearrow:hover, .nearrow.sel{
  transform:translateY(-2px);
  border-color:var(--green);
  box-shadow:0 0 0 2px rgba(4,105,58,.30), var(--shadow-md);
}
.postrow:hover, .nearrow:hover, .nearrow.sel{ transform:none; }
.postrow{ transition:transform .2s var(--ease), box-shadow .2s, border-color .2s; }

/* ---------- Gender marker ----------
   Venus / Mars glyphs rather than a word: the roll is scanned, not read, and
   a coloured mark is found faster than "Female" in a metadata line. Colour is
   backed by the glyph itself so it never carries the meaning alone. */
.gico{
  display:inline-grid; place-items:center; width:28px; height:28px; border-radius:9px;
  flex-shrink:0; vertical-align:-8px; margin-right:.45rem;
  box-shadow:inset 0 0 0 1px rgba(16,34,26,.06);
  transition:transform .2s var(--ease);
}
.gico.f{ background:linear-gradient(145deg,#FFF1F7,#F9D6E6); color:#AE1259; }
.gico.m{ background:linear-gradient(145deg,#EFF6FF,#D3E6FA); color:#0F5296; }
/* a small lift on the card being read keeps the roll feeling alive */
.emp:hover .gico, tr:hover .gico{ transform:scale(1.08); }
td .gico, .vc-grid .gico{ margin-right:.35rem; }
@media(max-width:520px){ .gico{ width:24px; height:24px; border-radius:7px; } }
.emp-top{ display:flex; gap:.8rem; align-items:flex-start; }
.avatar{ width:42px; height:42px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:.9rem; color:#fff; background:linear-gradient(145deg,var(--green),var(--green-dk)); }
.emp h3, .emp .vc-name{
  font-family:'Jost',system-ui,sans-serif; font-size:.95rem; font-weight:600;
  color:var(--heading); line-height:1.35; margin:0; letter-spacing:0;
}
.emp .role{
  font-size:.82rem; color:var(--body); margin-top:.15rem; line-height:1.3;
}
.emp .role b{ color:var(--heading); font-weight:700; }
.emp .meta{ font-size:.75rem; color:var(--body); margin-top:.25rem; display:flex; align-items:center; flex-wrap:wrap; gap:.35rem; }
/* Roll card fields — same label/value type as single-record rows */
.emp-fields{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  margin-top:.75rem;
  border:1px solid var(--line);
  border-radius:8px;
  overflow:hidden;
  background:var(--card);
}
.emp-fields > div{
  padding:.4rem .75rem;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:.1rem;
}
.emp-fields > div:nth-child(2n){ border-right:0; }
.emp-fields .ef-full{
  grid-column:1 / -1;
  border-right:0;
}
.emp-fields > div:last-child{ border-bottom:0; }
.emp-fields .k{
  font-family:inherit;
  font-size:calc(.58rem + 1px); letter-spacing:.12em; text-transform:uppercase;
  line-height:1.2; color:var(--body); margin:0;
}
.emp-fields .v{
  font-family:'Jost',system-ui,sans-serif;
  font-size:.85rem; line-height:1.3; font-weight:500;
  color:var(--heading); margin:0; word-break:break-word;
}
.emp-fields .v b{ font-weight:700; color:var(--heading); }
.emp-fields .checks-inline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
  padding:0; margin:0;
  color:inherit; /* don't force heading color onto badge text */
}
.emp-fields .checks-inline .badge{
  font-size:.65rem; padding:.12rem .38rem; line-height:1.2; text-transform:uppercase;
}
.emp-fields .badge.ok,
.emp-fields .badge.ok .chk-extra{ color:var(--green); }
.emp-fields .badge.no,
.emp-fields .badge.no .chk-extra{ color:var(--danger); }
@media(max-width:520px){
  .emp-fields{ grid-template-columns:1fr; }
  .emp-fields > div{ border-right:0; }
}
.emp-row{ display:flex; justify-content:space-between; gap:1rem; font-size:.78rem; padding:.3rem 0; border-top:1px solid var(--line); margin-top:.6rem; }
.emp-row span:first-child{ color:var(--body); }
.emp-row span:last-child{ color:var(--heading); font-weight:500; text-align:right; }
.badges{ display:flex; gap:.35rem; flex-wrap:wrap; margin-top:.7rem; }
.badge{ font-size:.6rem; font-weight:700; letter-spacing:.08em; padding:.22rem .5rem; border-radius:4px; text-transform:uppercase; transition:transform .15s var(--ease), box-shadow .15s var(--ease); }
.badge.ok{ background:var(--green-lt); color:var(--green); }
.badge.no{ background:#FBEAE9; color:var(--danger); }
.badge.bps{ background:#FDF6E3; color:var(--warn); }
.checks-inline .badge:hover, .badges .badge:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 6px rgba(1,65,28,.12);
}

/* ---------- Table view ---------- */
.tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:10px; background:var(--card); box-shadow:var(--shadow-sm); }
/* Inset shadows do not scroll with the content, so they mark "there is more
   this way" and are toggled off by JS once you reach that edge. */
.tbl-wrap.can-right{ box-shadow:inset -15px 0 13px -13px rgba(16,34,26,.30), var(--shadow-sm); }
.tbl-wrap.can-left{ box-shadow:inset 15px 0 13px -13px rgba(16,34,26,.30), var(--shadow-sm); }
.tbl-wrap.can-left.can-right{ box-shadow:inset 15px 0 13px -13px rgba(16,34,26,.30), inset -15px 0 13px -13px rgba(16,34,26,.30), var(--shadow-sm); }
.tbl-hint{
  display:none; margin:0; padding:.55rem .85rem; font-size:.72rem; color:var(--body);
  background:var(--green-lt); border-bottom:1px solid var(--border);
}
@media(max-width:900px){
  .tbl-hint{ display:block; }
}
table.data{ width:100%; border-collapse:collapse; font-size:.82rem; min-width:860px; }
.bio-tbl table.data{ min-width:780px; }
.bio-tbl .td-checks{ white-space:nowrap; }
.bio-tbl .td-checks .badge{ margin:.1rem .15rem .1rem 0; }
.bio-tbl .td-sticky{
  position:sticky; left:0; z-index:1;
  background:var(--card); box-shadow:2px 0 6px -4px rgba(16,34,26,.2);
}
.bio-tbl thead th:first-child{
  position:sticky; left:0; z-index:3;
}
.bio-tbl tbody tr:nth-child(even) .td-sticky{ background:#FBFDFC; }
.bio-tbl tbody tr:hover .td-sticky{ background:var(--green-lt); }
.bio-tbl .badge.ok, .bio-tbl .badge.ok .chk-extra{ color:var(--green); }
.bio-tbl .badge.no, .bio-tbl .badge.no .chk-extra{ color:var(--danger); }
/* location breadcrumb inside a table cell */
td .tpath{ color:var(--heading); font-weight:500; font-size:calc(.82rem + 1pt); }
td .tsub{ color:var(--body); font-size:calc(.76rem + 1pt); }
td .tsub i{ font-style:normal; color:#8A9A93; }
a.id-link{
  color:var(--green); font-weight:600;
  user-select:text; -webkit-user-select:text;
  cursor:pointer; text-decoration:none;
}
a.id-link:hover{ text-decoration:underline; color:var(--green-dk); }
.mtag a.id-link{ font-weight:600; }
.id-cell{
  display:inline-flex; align-items:center; gap:.2rem; max-width:100%;
}
.id-copy{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.35rem; height:1.35rem; padding:0; margin:0;
  border:0; border-radius:5px; background:transparent;
  color:var(--green); cursor:pointer; flex:0 0 auto;
  opacity:.72; transition:opacity .15s, background .15s, color .15s;
}
.id-copy:hover{
  opacity:1; color:var(--green-dk); background:var(--green-lt);
}
.id-copy:focus-visible{
  outline:2px solid var(--green); outline-offset:1px;
}
.id-copy svg{ display:block; }
table.data thead th{ position:sticky; top:0; background:var(--green-dk); color:#fff; text-align:left; font-weight:600; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:.7rem .8rem; white-space:nowrap; z-index:2; }
table.data td{ padding:.65rem .8rem; border-top:1px solid var(--line); vertical-align:top; }
table.data tbody tr{ content-visibility:auto; contain-intrinsic-size:44px; }
table.data tbody tr:nth-child(even){ background:#FBFDFC; }
table.data tbody tr:hover{ background:var(--green-lt); }

/* ---------- Skeletons (perceived speed on slow links) ----------
   Shapes are built by js/ui.js so a placeholder always matches the thing it
   stands in for. The wrapper keeps the same grid as the real result, so
   nothing jumps when the data lands. */
.sk{ background:linear-gradient(90deg,var(--line) 25%,var(--border) 37%,var(--line) 63%); background-size:400% 100%; animation:shimmer 1.3s infinite; border-radius:6px; }
@keyframes shimmer{ from{ background-position:100% 50% } to{ background-position:0 50% } }
.sk-card{
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  padding:1rem 1.1rem; box-shadow:var(--shadow-sm);
}
.sk-card + .sk-card{ margin-top:.5rem; }
.sk-checks{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; margin-top:.9rem; }
/* when the host is a grid, the placeholders tile like the real cards do */
.inst-grid .sk-card + .sk-card, .emp-grid .sk-card + .sk-card, .sne-sum .sk-card + .sk-card{ margin-top:0; }
[aria-busy="true"]{ cursor:progress; }
@media(max-width:640px){ .sk-checks{ grid-template-columns:1fr; } }

/* ---------- Busy buttons ---------- */
.spin{
  width:13px; height:13px; border-radius:50%; display:inline-block; flex-shrink:0;
  border:2px solid rgba(255,255,255,.35); border-top-color:#fff;
  animation:spin .6s linear infinite;
}
.btn-ghost .spin, .chip .spin{ border-color:rgba(4,105,58,.25); border-top-color:var(--green); }
@keyframes spin{ to{ transform:rotate(360deg) } }
.is-busy{ opacity:.85; cursor:progress; }

/* ---------- Blocking loader ----------
   Frosts and freezes the page during an explicit search. `inert`-like
   behaviour comes from pointer-events on the body, and Escape always
   releases it so a hung request can never trap anyone. */
/* Presence is binary — display, not a transition. If the compositor stalls
   (background tab, throttled device) a transitioned overlay can sit at
   opacity 0 while the body is already locked, freezing the page with nothing
   on screen. The fade is decorative and lives on the card instead. */
#blocker{
  position:fixed; inset:0; z-index:11000;
  display:none; place-items:center;
  background:rgba(246,248,247,.72);
  backdrop-filter:blur(7px) saturate(120%); -webkit-backdrop-filter:blur(7px) saturate(120%);
}
#blocker.in{ display:grid; }
body.is-blocked{ overflow:hidden; }
body.is-blocked main, body.is-blocked #nav, body.is-blocked footer{ pointer-events:none; user-select:none; }

.blk-card{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:1.9rem 2.3rem; text-align:center;
  min-width:min(300px,86vw);
  animation:blkIn .3s var(--ease) both;
}
@keyframes blkIn{ from{ opacity:0; transform:translateY(10px) scale(.97) } to{ opacity:1; transform:none } }
.blk-msg{ font-family:'Playfair Display',serif; font-size:1.12rem; color:var(--heading); margin-top:1.1rem; }
.blk-sub{ font-size:.75rem; color:var(--body); margin-top:.3rem; }

/* three arcs at different radii, counter-rotating — reads as motion even on a
   throttled device where a single spinner can look stalled */
.blk-ring{ position:relative; width:56px; height:56px; margin:0 auto; }
.blk-ring span{
  position:absolute; inset:0; border-radius:50%; border:3px solid transparent;
  animation:blkspin 1.15s linear infinite;
}
.blk-ring span:nth-child(1){ border-top-color:var(--green); }
.blk-ring span:nth-child(2){ inset:9px;  border-bottom-color:var(--gold); animation-duration:1.5s; animation-direction:reverse; }
.blk-ring span:nth-child(3){ inset:18px; border-top-color:var(--green-dk); animation-duration:.9s; }
@keyframes blkspin{ to{ transform:rotate(360deg) } }

/* ---------- Error panel ---------- */
.errbox{
  text-align:center; padding:2.6rem 1.4rem;
  background:var(--card); border:1px solid var(--border); border-radius:12px;
  box-shadow:var(--shadow-sm);
}
.err-ico{
  width:56px; height:56px; margin:0 auto 1rem; border-radius:50%;
  display:grid; place-items:center; background:#FBEAE9; color:var(--danger);
}
.errbox h3{ font-size:1.2rem; }
.errbox p{ margin:.5rem auto 0; max-width:34rem; color:var(--body); }
.err-code{ font-size:.7rem !important; letter-spacing:.1em; text-transform:uppercase; opacity:.7; margin-top:.7rem !important; }
.err-acts{ display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.3rem; }

/* ---------- 404 ---------- */
.nf{ text-align:center; max-width:44rem; margin:0 auto; padding:1rem 0 0; position:relative; }
.nf-code{
  font-family:'Playfair Display',serif; font-size:clamp(7rem,20vw,12rem); line-height:.85;
  color:var(--green); opacity:.07; letter-spacing:-.04em; user-select:none;
  margin-bottom:-2.2rem;
}
.nf-url{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.82rem;
  background:var(--green-lt); border:1px solid #BFE0CC; border-radius:5px;
  padding:.1rem .4rem; color:var(--green-dk); word-break:break-all;
}
.nf-guess{ margin-top:1.6rem; }
.nf-guess-in{
  display:flex; align-items:center; justify-content:center; gap:.8rem; flex-wrap:wrap;
  background:var(--card); border:1px solid var(--border); border-left:3px solid var(--green);
  border-radius:10px; padding:1rem 1.2rem; box-shadow:var(--shadow-sm);
}
.nf-guess-k{ font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--body); }
.nf-guess-in strong{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:1rem; color:var(--green-dk);
  background:var(--green-lt); border-radius:5px; padding:.15rem .5rem;
}

/* ---------- Toasts ---------- */
#toasts{
  position:fixed; z-index:10000; right:1rem; bottom:1rem;
  display:flex; flex-direction:column; gap:.5rem; align-items:flex-end;
  pointer-events:none; max-width:min(360px,calc(100vw - 2rem));
}
.toast{
  display:flex; align-items:center; gap:.6rem;
  background:var(--green-dk); color:#fff; border-radius:9px;
  padding:.65rem .9rem; font-size:.83rem; line-height:1.4;
  box-shadow:var(--shadow-lg);
  opacity:0; transform:translateY(10px) scale(.97);
  transition:opacity .28s var(--ease), transform .28s var(--ease);
}
.toast.in{ opacity:1; transform:none; }
.toast .ti{
  width:19px; height:19px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:.7rem; font-weight:700;
  background:rgba(255,255,255,.18);
}
.toast.err{ background:var(--danger); }
.toast.warn{ background:#7A5400; }
@media(max-width:520px){ #toasts{ left:1rem; right:1rem; align-items:stretch; } }

.empty{ text-align:center; padding:3rem 1rem; color:var(--body); }

/* ---------- Notes / legend ---------- */
.note{ background:var(--card); border:1px solid var(--border); border-radius:10px; padding:1.4rem; }
.note ul{ list-style:none; margin:0; padding:0; }
.note li{ position:relative; padding-left:1.4rem; font-size:.88rem; line-height:1.9; }
.note li::before{ content:""; position:absolute; left:.1rem; top:.85em; width:6px; height:6px; border-radius:50%; background:var(--green); }
.legend-list b{ color:var(--green-dk); font-weight:700; }
.legend{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:.7rem; }
.legend div{ background:var(--green-lt); border:1px solid var(--border); border-radius:8px; padding:.75rem .9rem; }
.legend b{ color:var(--green-dk); font-weight:700; letter-spacing:.05em; }
.warn-box{
  border:1px solid var(--warn-box-bd); border-left:3px solid var(--gold);
  background:var(--warn-box-bg); border-radius:8px; padding:1rem 1.2rem;
  font-size:.87rem; color:var(--warn-box-fg);
}

footer{
  background:var(--green-dk); color:#C8D8CF;
  border-top:3px solid var(--gold);
  padding:1.35rem 0;
  font-family:inherit;
}
footer a{ color:#C8D8CF; } footer a:hover{ color:#fff; }
.ft-row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem 1.5rem;
}
.ft-brand{
  display:inline-flex; align-items:center; gap:.75rem; text-decoration:none; color:inherit;
  min-width:0; max-width:36rem;
}
.ft-brand:hover{ color:#fff; }
.ft-logo{
  width:40px; height:40px; object-fit:contain; flex-shrink:0; display:block;
  padding:4px; box-sizing:border-box;
  background:#F4F7F5;
  border-radius:50%;
  border:1px solid rgba(200,169,81,.55);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.ft-text{ display:flex; flex-direction:column; gap:.15rem; min-width:0; line-height:1.35; }
.ft-name{
  font-family:inherit; font-size:.95rem; font-weight:600; color:#fff; letter-spacing:0;
}
.ft-dept{ font-size:.78rem; color:#C8D8CF; opacity:.9; }
.ft-copy{
  margin:0; font-size:.78rem; color:#C8D8CF; opacity:.85; white-space:nowrap;
}
@media (max-width:640px){
  .ft-row{ align-items:flex-start; }
  .ft-copy{ white-space:normal; }
}

/* Back to top */
.to-top{
  position:fixed; right:1.1rem; bottom:1.1rem; z-index:9000;
  width:2.6rem; height:2.6rem; border-radius:999px;
  display:grid; place-items:center;
  border:1px solid rgba(1,65,28,.2);
  background:var(--card); color:var(--green-dk);
  box-shadow:var(--shadow-md);
  cursor:pointer; opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}
.to-top.is-on{ opacity:1; pointer-events:auto; transform:translateY(0); }
.to-top:hover{ background:var(--green); color:#fff; border-color:var(--green); }
.to-top:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.to-top svg{ width:18px; height:18px; display:block; }
@media print{ .to-top{ display:none !important; } }

/* ---------- Modal ---------- */
#seld-modal, .seld-modal{
  position:fixed; inset:0; z-index:12000;
  display:grid; place-items:center; padding:1.25rem;
}
#seld-modal[hidden]{ display:none !important; }
.seld-modal .modal-backdrop{
  position:absolute; inset:0;
  background:rgba(1,65,28,.48);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:0; transition:opacity .22s var(--ease);
}
.seld-modal.in .modal-backdrop{ opacity:1; }
.seld-modal .modal-card{
  position:relative; z-index:1;
  width:min(420px,100%);
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); padding:1.6rem 1.5rem 1.35rem;
  text-align:center;
  transform:translateY(12px) scale(.97); opacity:0;
  transition:transform .28s var(--ease), opacity .28s var(--ease);
}
.seld-modal.in .modal-card{ transform:none; opacity:1; }
.seld-modal .modal-x{
  position:absolute; top:.7rem; right:.7rem;
  width:34px; height:34px; border:0; border-radius:8px;
  background:var(--green-lt); color:var(--green-dk); cursor:pointer;
  display:grid; place-items:center;
}
.seld-modal .modal-x:hover{ background:#d5ebe0; }
.seld-modal .modal-ico{
  width:56px; height:56px; margin:0 auto .9rem; border-radius:50%;
  display:grid; place-items:center; background:var(--green-lt); color:var(--green);
}
.seld-modal.warn .modal-ico, .seld-modal.err .modal-ico{ background:#FBEAE9; color:var(--danger); }
.seld-modal .modal-title{ font-size:1.25rem; margin:0; }
.seld-modal .modal-body{ margin:.55rem 0 0; color:var(--body); }
.seld-modal .modal-acts{ margin-top:1.25rem; display:flex; justify-content:center; gap:.5rem; }

/* =============================================================
   INSTITUTION CHECKER
   The live page stacks 16 dropdowns in a flat grid, so the one control
   most people actually want — the ID/name box — is buried among filters
   that are almost always left on "ALL". This inverts that: one large
   query bar, and the 16 filters collapsed into facet chips that only
   open when asked for. Region→District→Tehsil→UC are dependent, so they
   collapse further into a single drill-down "Location" facet: 16 → 12.
   ============================================================= */
/* z-index must clear the sticky results toolbar (800): `position:relative`
   here opens a stacking context, so the facet popovers inside can never
   paint above the toolbar on their own z-index alone. */
.sconsole{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); overflow:visible; position:relative; z-index:900;
}
.sc-head{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:.7rem 1.15rem; background:var(--green-dk); color:#fff;
  border-radius:13px 13px 0 0;
}
.sc-head .t{ display:flex; align-items:center; gap:.55rem; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; }
.sc-head .live{ display:inline-flex; align-items:center; gap:.4rem; font-size:.68rem; letter-spacing:.1em; color:#BFE0CC; }
.sc-body{ padding:1.15rem 1.15rem 0; }

/* --- the query bar --- */
.qbar{ display:flex; gap:.6rem; align-items:stretch; flex-wrap:wrap; }
.qbar .field-wrap{ flex:1; min-width:min(100%,260px); }
.qbar .field{ padding:1rem 8.5rem 1rem 3rem; font-size:1rem; }
.qbar .btn{ flex-shrink:0; }
/* live "what did you type?" read-out — sits inside the field, right side */
.detect{
  position:absolute; right:.6rem; top:50%; transform:translateY(-50%);
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--green-lt); border:1px solid #BFE0CC; color:var(--green-dk);
  border-radius:99px; padding:.2rem .6rem; font-size:.63rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  opacity:0; transition:opacity .2s; pointer-events:none;
}
.detect.show{ opacity:1; }
.detect.unknown{ background:#FDF6E3; border-color:#E8D9A8; color:var(--warn); }

/* --- suggestions --- */
.sugg{
  position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:60;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-lg); overflow:hidden; max-height:310px; overflow-y:auto;
}
.sugg[hidden]{ display:none; }
.sugg b{ display:block; padding:.45rem .9rem; font-size:.6rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--body); background:var(--line); font-weight:600; }
.sugg a{ display:flex; align-items:center; gap:.7rem; padding:.55rem .9rem; cursor:pointer; border-top:1px solid var(--line); }
.sugg a:first-of-type{ border-top:0 }
.sugg a:hover,.sugg a.hi{ background:var(--green-lt); }
.sugg .sid{ font-size:.68rem; font-weight:600; color:var(--green); background:var(--green-lt);
  border:1px solid #BFE0CC; border-radius:5px; padding:.1rem .4rem; flex-shrink:0; }
.sugg .snm{ font-size:.83rem; color:var(--heading); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sugg .sloc{ margin-left:auto; font-size:.68rem; color:var(--body); white-space:nowrap; flex-shrink:0; }

/* --- Advanced filters (collapsible) --- */
.adv-filters{ margin-top:1rem; border:1px solid var(--border); border-radius:12px; background:var(--card); overflow:hidden; }
.adv-toggle{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:.75rem;
  padding:.7rem 1rem; border:0; background:transparent; cursor:pointer; font-family:inherit;
  color:var(--heading); font-weight:600; font-size:.9rem;
}
.adv-toggle:hover{ background:var(--green-lt); }
.adv-toggle-lbl{ display:inline-flex; align-items:center; gap:.5rem; }
.adv-toggle-lbl svg{ color:var(--green); flex-shrink:0; }
.adv-count{
  display:inline-grid; place-items:center; min-width:1.35rem; height:1.35rem; padding:0 .35rem;
  border-radius:999px; background:var(--green); color:#fff; font-size:.68rem; font-weight:700;
}
.adv-chev{ color:#8A9A93; transition:transform .25s var(--ease); display:inline-flex; }
.adv-filters.open .adv-chev{ transform:rotate(180deg); color:var(--green); }
.adv-body{ padding:0 1rem 1rem; border-top:1px solid var(--border); }
.adv-grid{
  display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:.75rem .9rem; padding-top:.9rem;
}
.adv-field{
  display:flex; flex-direction:column; gap:.3rem;
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body); font-weight:600;
}
.adv-select{
  width:100%; font-family:inherit; font-size:.82rem; letter-spacing:0; text-transform:none; font-weight:500;
  color:var(--heading); background:var(--bg); border:1px solid var(--border); border-radius:8px;
  padding:.5rem .65rem; cursor:pointer;
}
.adv-select:focus{ outline:2px solid var(--green); outline-offset:1px; border-color:var(--green); }
.adv-select:disabled{ opacity:.55; cursor:not-allowed; }
@media (max-width:960px){
  .adv-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:560px){
  .adv-grid{ grid-template-columns:1fr; }
}

/* --- facet rail (legacy; unused on institutions) --- */
.rail{ display:flex; flex-wrap:wrap; gap:.45rem; align-items:stretch; margin-top:1rem; }
.rail-lbl{
  display:flex; align-items:center; font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--body); margin-right:.2rem; white-space:nowrap;
}
.facet{ position:relative; }
/* Each facet is a small labelled control rather than a bare pill: the field
   name sits above its current value, so the whole query is readable at a
   glance without opening anything. */
.facet > button{
  display:flex; align-items:center; gap:.55rem; font-family:inherit; text-align:left;
  padding:.4rem .7rem .45rem .5rem; border:1px solid var(--border); border-radius:10px;
  background:var(--card); cursor:pointer; min-width:118px; height:100%;
  transition:border-color .2s var(--ease), background .2s, box-shadow .2s, transform .2s var(--ease);
}
.facet > button:hover{ border-color:var(--green); box-shadow:var(--shadow-sm); transform:translateY(-1px); }
.fico{
  width:27px; height:27px; border-radius:7px; flex-shrink:0; display:grid; place-items:center;
  background:var(--green-lt); color:var(--green); transition:background .2s, color .2s;
}
.ftxt{ display:flex; flex-direction:column; min-width:0; line-height:1.2; }
.fn{ font-size:.55rem; letter-spacing:.17em; text-transform:uppercase; color:var(--body); }
.cv{
  font-size:.81rem; color:#667A71; font-weight:400; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis; max-width:150px;
}
.fchev{ margin-left:auto; color:#8A9A93; flex-shrink:0; transition:transform .25s var(--ease); }
.facet.open > button{ border-color:var(--green); box-shadow:var(--shadow-md); }
.facet.open .fchev{ transform:rotate(180deg); color:var(--green); }

/* a facet holding a value fills in — tinted, green-bordered, value in ink */
.facet.set > button{ border-color:var(--green); background:var(--green-lt); }
.facet.set .fico{ background:var(--green); color:#fff; }
.facet.set .fn{ color:var(--green); }
.facet.set .cv{ color:var(--green-dk); font-weight:600; }
.facet.set .fchev{ display:none; }
.facet .x{
  margin-left:auto; flex-shrink:0; width:19px; height:19px; border-radius:50%;
  display:grid; place-items:center; font-size:.9rem; line-height:1;
  background:rgba(1,65,28,.10); color:var(--green-dk); transition:background .2s, color .2s;
}
.facet .x:hover{ background:var(--danger); color:#fff; }
@media(max-width:520px){
  .facet > button{ min-width:0; }
  .facet .cv{ max-width:92px; }
}

.pop{
  position:absolute; top:calc(100% + .45rem); left:0; z-index:70; min-width:210px; max-width:290px;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-lg); padding:.35rem; max-height:290px; overflow-y:auto;
}
.pop[hidden]{ display:none; }
.pop.right{ left:auto; right:0; }
.pop button{
  display:flex; align-items:center; justify-content:space-between; gap:.6rem; width:100%;
  text-align:left; font-family:inherit; font-size:.8rem; color:var(--body);
  background:transparent; border:0; border-radius:6px; padding:.42rem .6rem; cursor:pointer;
}
.pop button:hover{ background:var(--green-lt); color:var(--green-dk); }
.pop button.on{ background:var(--green); color:#fff; }
.pop .crumb{
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  padding:.3rem .5rem .45rem; margin-bottom:.25rem; border-bottom:1px solid var(--line);
  font-size:.66rem; letter-spacing:.06em; text-transform:uppercase; color:var(--body);
}
.pop .crumb span{ color:var(--green); cursor:pointer; font-weight:600; }
.pop .crumb span:hover{ text-decoration:underline; }

/* --- presets --- */
.presets{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.7rem; }
.preset{
  font-family:inherit; font-size:.7rem; color:var(--green-dk); cursor:pointer;
  background:var(--green-lt); border:1px dashed #BFE0CC; border-radius:99px; padding:.3rem .7rem;
  transition:all .2s;
}
.preset:hover{ background:var(--green); color:#fff; border-style:solid; border-color:var(--green); }

/* --- live match strip --- */
.matchbar{
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:1rem; padding:.6rem 1.15rem; background:var(--green-lt);
  border-top:1px solid var(--border); border-radius:0 0 13px 13px;
}
.matchbar .n{ font-family:'Playfair Display',serif; font-size:1.35rem; color:var(--green-dk); line-height:1; }
.matchbar .lbl{ font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--body); }
.matchbar .how{ font-size:.72rem; color:var(--body); font-weight:500; letter-spacing:.02em; }
/* padded to a 24px minimum hit area — as bare text these were ~14px tall,
   which is under the touch-target floor on a phone */
.linkbtn{ background:none; border:0; font-family:inherit; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--green); font-weight:600; cursor:pointer;
  padding:.35rem .15rem; min-height:26px; }
.linkbtn:hover{ text-decoration:underline; }
.linkbtn[disabled]{ color:#8A9A93; cursor:default; text-decoration:none; }

/* --- institution result cards --- */
.inst-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(330px,1fr)); gap:.9rem; }
.icard{
  display:flex; flex-direction:column; background:var(--card); border:1px solid var(--border);
  border-radius:10px; padding:.9rem 1rem 0.8rem; box-shadow:var(--shadow-sm);
  transition:transform .22s var(--ease), box-shadow .22s, border-color .22s;
  content-visibility:auto; contain-intrinsic-size:236px;
}
.icard:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--green); }
.icard-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:.6rem; }
.icard h3{
  font-family:'Jost',sans-serif; font-size:.92rem; font-weight:600; color:var(--heading);
  line-height:1.35; margin:0;
}
.icard .ids{ display:flex; flex-wrap:wrap; gap:.3rem; margin-top:.4rem; }
.icard .path{
  display:flex; align-items:center; gap:.3rem; flex-wrap:wrap;
  font-size:.72rem; color:var(--body); margin-top:.55rem;
  padding-top:.5rem; border-top:1px solid var(--line);
}
.icard .path i{ font-style:normal; color:#8A9A93; }
.icard .lvl{ font-size:.72rem; color:var(--body); margin-top:.25rem; }
.icard .lvl b{ color:var(--heading); font-weight:500; }
.iname{ line-height:1.35; }
.iname .badge-level{ margin-left:.25rem; vertical-align:middle; }
.iname-meta{
  display:flex; flex-wrap:wrap; align-items:center; gap:.3rem;
  margin-top:.35rem;
}
.iname-kind{
  display:inline-flex; align-items:center; gap:.25rem;
  font-size:.72rem; color:var(--body); margin-right:.15rem;
}
.iname-kind .gico{ width:16px; height:16px; }
.iname-kind .gico svg{ width:10px; height:10px; }
.iname-kind-lbl{ font-weight:500; color:var(--heading); }
.mtag.as-tag{ color:var(--green-dk); background:var(--green-lt); border-color:var(--border); }
.icard .iname-meta{ margin-top:.45rem; }
.icard-top h3 .badge-level{ margin-left:.35rem; vertical-align:middle; font-size:.62rem; }
.enroll-bg{
  display:inline-flex; align-items:center; gap:.28rem;
  white-space:nowrap; margin:.1rem 0;
}
.enroll-bg-k{ font-weight:700; color:var(--heading); font-size:.78rem; }
.enroll-bg-n{ font-weight:600; color:var(--heading); font-variant-numeric:tabular-nums; }
.enroll-bg-sep{ margin:0 .35rem; color:var(--body); }
.enroll-bg .gico{
  width:18px; height:18px; border-radius:5px;
  display:inline-grid; place-items:center; flex:0 0 auto;
}
.enroll-bg .gico svg{ width:11px; height:11px; }
.enroll-bg-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.15rem 0; }
.enroll-cell{ white-space:nowrap; }
.asc-cell{ text-align:center !important; vertical-align:middle; }
.asc-dl{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--green); width:2rem; height:2rem; border-radius:6px;
  margin-inline:auto;
  transition:background .2s, color .2s, transform .15s;
}
.asc-dl:hover{
  color:var(--green-dk); background:var(--green-lt);
  transform:translateY(-1px); text-decoration:none;
}
.asc-dl svg{ display:block; }
.icard-act .asc-dl{ margin-left:.25rem; margin-inline:0; }
.icard-num{ display:flex; gap:.5rem; margin-top:.6rem; }
.icard-num > div{ flex:1; background:var(--bg); border:1px solid var(--line); border-radius:7px; padding:.4rem .55rem; }
.icard-num .k{ font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
.icard-num .v{ font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--green-dk); line-height:1.25; }
.icard-num .s{ font-size:.64rem; color:var(--body); }
/* boys / girls split — a bar reads faster than "B:1004, G:1" */
.split{ height:4px; border-radius:99px; background:#E3B7C4; overflow:hidden; margin-top:.3rem; }
.split span{ display:block; height:100%; background:var(--green); }
.icard-act{
  display:flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  margin-top:.7rem; padding-top:.6rem; border-top:1px solid var(--line);
}
.mini{
  font-family:inherit; font-size:.64rem; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
  border:1px solid var(--border); border-radius:5px; padding:.28rem .55rem;
  color:var(--body); background:var(--card); cursor:pointer; transition:all .2s;
}
.mini:hover{ border-color:var(--green); color:var(--green); }
.mini.solid{ background:var(--green); border-color:var(--green); color:#fff; }
.mini.solid:hover{ background:var(--green-dk); border-color:var(--green-dk); color:#fff; }
.badge.fnl{ background:var(--green-lt); color:var(--green); }
.badge.clsd{ background:#FBEAE9; color:var(--danger); }
.badge.nonv{ background:#FDF6E3; color:var(--warn); }
.badge.adp{ background:#EEF2FB; color:#2F4C93; }

@media(max-width:640px){
  .qbar .field{ padding-right:1rem; }
  .detect{ display:none; }
  .inst-grid{ grid-template-columns:1fr; }
}

/* =============================================================
   BIOMETRIC CHECKER
   One box on the live page accepts four different identifiers (RID, PID,
   CNIC, SEMIS) and returns either one employee or a whole institution
   roll, with no indication which it understood. Here the field reports
   what it read, and the answer people actually came for — are the three
   checks done — is a ring and three tiles, not a row of tick marks.
   ============================================================= */
.vcard{
  background:var(--card); border:1px solid var(--border); border-radius:14px;
  box-shadow:var(--shadow-lg); overflow:hidden;
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.vcard:hover{
  border-color:#b9d4c6;
  box-shadow:0 10px 28px rgba(1,65,28,.1);
}
.vc-head{ display:flex; align-items:center; gap:1rem; padding:.85rem 1.15rem; flex-wrap:wrap; }
.vc-av{
  width:62px; height:62px; border-radius:12px; flex-shrink:0;
  display:grid; place-items:center; color:#fff; font-size:1.35rem; font-weight:600;
  background:linear-gradient(145deg,var(--green),var(--green-dk));
  border:2px solid var(--gold);
}
.vc-id h2{ font-family:'Jost',sans-serif; font-size:1.22rem; font-weight:600; margin:0; }
.vc-id .role{ font-size:.85rem; color:var(--body); margin-top:.15rem; }
.vc-id .role b{ color:var(--heading); font-weight:700; }

/* completeness ring — the headline answer */
.vc-ring{ margin-left:auto; display:flex; align-items:center; gap:.9rem; }
.ring{ position:relative; width:74px; height:74px; flex-shrink:0; }
.ring svg{ transform:rotate(-90deg); display:block; }
.ring circle{ fill:none; stroke-width:7; stroke-linecap:round; }
.ring .trk{ stroke:var(--line); }
.ring .bar{ stroke:var(--green); transition:stroke-dashoffset 1s var(--ease), stroke .4s; }
.ring.partial .bar{ stroke:var(--warn); }
.ring.none .bar{ stroke:var(--danger); }
.ring .lbl{
  position:absolute; inset:0; display:grid; place-items:center; line-height:1;
  font-family:'Playfair Display',serif; font-size:1.15rem; color:var(--green-dk);
}
.vc-ring .cap{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--body); max-width:82px; }

/* the three checks, as tiles */
/* Cadre badge — Teaching / Non-Teaching (shared) */
.badge-cadre{
  display:inline-flex; align-items:center;
  font-size:.68rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:6px; border:1px solid; line-height:1.2;
  white-space:nowrap;
}
.badge-cadre.teaching{
  background:var(--cadre-teach-bg); color:var(--cadre-teach-fg); border-color:var(--cadre-teach-bd);
}
.badge-cadre.non-teaching{
  background:var(--cadre-nteach-bg); color:var(--cadre-nteach-fg); border-color:var(--cadre-nteach-bd);
}
.badge-cadre.other{
  background:var(--cadre-other-bg); color:var(--cadre-other-fg); border-color:var(--cadre-other-bd);
}

/* School level badge (shared) */
.badge-level{
  display:inline-flex; align-items:center;
  font-size:.68rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:.22rem .55rem; border-radius:6px; border:1px solid; line-height:1.2;
  white-space:nowrap;
}
.badge-level.primary{ background:var(--lvl-primary-bg); color:var(--lvl-primary-fg); border-color:var(--lvl-primary-bd); }
.badge-level.middle{ background:var(--lvl-middle-bg); color:var(--lvl-middle-fg); border-color:var(--lvl-middle-bd); }
.badge-level.elementary{ background:var(--lvl-elementary-bg); color:var(--lvl-elementary-fg); border-color:var(--lvl-elementary-bd); }
.badge-level.secondary{ background:var(--lvl-secondary-bg); color:var(--lvl-secondary-fg); border-color:var(--lvl-secondary-bd); }
.badge-level.hi-secondary{ background:var(--lvl-hisec-bg); color:var(--lvl-hisec-fg); border-color:var(--lvl-hisec-bd); }
.badge-level.office{ background:var(--lvl-office-bg); color:var(--lvl-office-fg); border-color:var(--lvl-office-bd); }
.badge-level.post-primary{ background:var(--lvl-post-bg); color:var(--lvl-post-fg); border-color:var(--lvl-post-bd); }
.badge-level.other{ background:var(--cadre-other-bg); color:var(--cadre-other-fg); border-color:var(--cadre-other-bd); }

/* Result detail: employee row + institution row */
.vc-rows{ border-top:1px solid var(--line); }
.vc-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  align-items:stretch;
}
.vc-row.emp{
  /* RID/PID | Father(wider) | Qual | Checks(narrower) */
  grid-template-columns:minmax(7rem,0.9fr) minmax(10rem,1.55fr) minmax(4.25rem,0.5fr) minmax(11rem,1.35fr);
}
.vc-row.inst{
  background:var(--green-lt);
  border-top:1px solid var(--border);
  /* District | Inst ID | Institution | Level | Cost Center | CR + open */
  grid-template-columns:minmax(6.5rem,0.8fr) minmax(6.5rem,0.6fr) minmax(10rem,2fr) minmax(6rem,0.7fr) minmax(6.5rem,1fr) minmax(4.5rem,0.55fr);
}
.vc-row > div{
  padding:.4rem .85rem;
  border-right:1px solid var(--line);
  min-width:0;
  display:flex; flex-direction:column; justify-content:center; gap:.12rem;
  transition:background .2s var(--ease);
}
.vc-row > div:last-child{ border-right:0; }
/* Emp row height is driven by check badges; give inst the same breathing room */
.vc-row.inst > div{
  padding:.58rem .85rem;
  min-height:3.35rem;
  box-sizing:border-box;
}
.vc-row.emp .col-qual{ padding-left:.65rem; padding-right:.65rem; }
.vc-row.emp .col-qual .v{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.vc-row.emp .col-checks{ min-width:0; }
.vc-row.inst .col-semis .v{ white-space:nowrap; letter-spacing:.02em; }
.vc-row.inst .col-cc{ white-space:nowrap; }
.vc-row.inst .col-cr{ padding-left:.55rem; padding-right:.55rem; }
.vc-row.inst .v.cr-open{
  display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap;
  font-size:.85rem; line-height:1.25; margin-top:0;
}
.vc-row.inst .cr-n{ font-weight:600; }
/* Same type scale on employee + institution rows */
.vc-row .k,
.vc-row.emp .k,
.vc-row.inst .k{
  font-size:calc(.58rem + 1px); letter-spacing:.12em; text-transform:uppercase;
  line-height:1.2; color:var(--body); margin:0;
}
.vc-row.inst .k{ color:#3d5c4c; }
.vc-row .v,
.vc-row.emp .v,
.vc-row.inst .v{
  font-size:.85rem; line-height:1.3; font-weight:500;
  margin:0; word-break:break-word; color:var(--heading);
}
.vc-row.inst .v{ color:var(--green-dk); }
.vc-row.inst .v.inst-name{
  font-weight:600; font-size:.85rem; line-height:1.3;
}
.vc-row .badge-level{
  font-size:.68rem; padding:.14rem .42rem; line-height:1.2;
  vertical-align:middle;
}
.ext-link{
  display:inline-flex; align-items:center; justify-content:center;
  width:1.45rem; height:1.45rem; flex-shrink:0;
  border-radius:5px; color:var(--green-dk);
  border:1px solid var(--border); background:var(--card);
  transition:background .2s var(--ease), border-color .2s var(--ease), transform .15s var(--ease), color .2s;
}
.ext-link:hover{
  background:var(--green-lt); border-color:var(--green); color:var(--green);
  transform:translateY(-1px);
}
.ext-link svg{ width:13px; height:13px; }
.vc-row .checks-inline{
  padding:0; margin-top:.05rem;
  display:flex; flex-wrap:nowrap; align-items:center; gap:.3rem;
}
.vc-row.emp .checks-inline .badge{
  font-size:.65rem; padding:.12rem .38rem; line-height:1.2;
}
.vc-row > div:hover{ background:rgba(4,105,58,.04); }
.vc-row.inst > div:hover{ background:rgba(1,65,28,.06); }
@media(max-width:900px){
  .vc-row.emp{
    grid-template-columns:1fr 1fr;
  }
  .vc-row.emp .col-checks{ grid-column:1 / -1; }
  .vc-row.emp .checks-inline{ flex-wrap:wrap; }
  .vc-row.inst{ grid-template-columns:1fr 1fr; }
  .vc-row > div{ border-bottom:1px solid var(--line); }
  .vc-row.inst .col-inst{ grid-column:1 / -1; }
}
@media(max-width:520px){
  .vc-row.emp, .vc-row.inst{ grid-template-columns:1fr; }
}

/* Employee roll — div list (mobile-safe; replaces <table>) */
.emp-list{
  border:1px solid var(--border); border-radius:10px; background:var(--card);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.emp-list-row{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:.55rem 1rem;
  align-items:center;
  padding:.85rem 1rem;
  border-top:1px solid var(--line);
  transition:background .2s var(--ease);
}
.emp-list-row:first-child{ border-top:0; }
.emp-list-row:nth-child(even){ background:#FBFDFC; }
.emp-list-row:hover{ background:var(--green-lt); }
.emp-list-row .el-name{
  font-family:'Jost',system-ui,sans-serif; font-size:.95rem; font-weight:600;
  color:var(--heading); line-height:1.35;
  display:inline-flex; align-items:center; gap:.35rem; flex-wrap:wrap;
}
.emp-list-row .el-sub{ font-size:.78rem; color:var(--body); margin-top:.2rem; }
.emp-list-row .el-sub b{ color:var(--heading); font-weight:700; }
.emp-list-row .el-ids{ font-size:.76rem; color:var(--body); margin-top:.25rem; }
.emp-list-row .el-checks{ display:flex; flex-wrap:wrap; gap:.35rem; justify-content:flex-end; }
.emp-list-row .el-meta{
  grid-column:1 / -1; font-size:.75rem; color:var(--danger);
}
@media(max-width:640px){
  .emp-list-row{
    grid-template-columns:1fr;
    gap:.45rem;
  }
  .emp-list-row .el-checks{ justify-content:flex-start; }
}

.checks{ display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem; padding:0 1.3rem 1.1rem; }
.checks-inline{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem;
  padding:.15rem 1.3rem 1rem;
}
.checks-inline .badge{ font-size:.72rem; padding:.28rem .55rem; }
.badge .chk-extra{ font-weight:700; margin-left:.1rem; color:inherit; }
.vc-name{
  display:inline-flex; align-items:center; gap:.4rem; flex-wrap:wrap;
  font-family:'Jost',system-ui,sans-serif; font-size:1.12rem; font-weight:600;
  letter-spacing:0; line-height:1.3; color:var(--heading);
}
.vc-name .gico{ margin:0; }
.vc-head-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; margin-top:.45rem; }
.chk{
  border:1px solid var(--border); border-radius:10px; padding:.7rem .8rem; background:var(--bg);
  display:flex; align-items:center; gap:.6rem;
}
.chk .ico{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; flex-shrink:0; }
.chk.yes{ background:var(--green-lt); border-color:#BFE0CC; }
.chk.yes .ico{ background:var(--green); color:#fff; }
.chk.no{ background:#FBEAE9; border-color:#F3D6D3; }
.chk.no .ico{ background:var(--danger); color:#fff; }
/* M&E server switched off — absent, not failed, so it must not read as red */
.chk.skip{ background:var(--bg); border-color:var(--border); border-style:dashed; }
.chk.skip .ico{ background:#CBD6D0; color:#fff; }
.chk.skip .v{ color:var(--body); font-weight:500; }
.chk .k{ font-size:.63rem; letter-spacing:.14em; text-transform:uppercase; color:var(--body); }
.chk .v{ font-size:.83rem; font-weight:600; color:var(--heading); line-height:1.2; }
.chk.yes .v{ color:var(--green-dk); } .chk.no .v{ color:var(--danger); }

/* detail grid */
.vc-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0;
  border-top:1px solid var(--line); }
.vc-grid > div{ padding:.7rem 1.3rem; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.vc-grid .k{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--body); }
.vc-grid .v{ font-size:.9rem; color:var(--heading); font-weight:500; margin-top:.1rem; word-break:break-word; }
.vc-foot{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; padding:.9rem 1.3rem; background:var(--green-lt); }

/* sample identifiers you can click instead of inventing one */
.samples{ display:flex; flex-wrap:wrap; gap:.4rem; align-items:center; margin-top:.7rem; }
.samp{
  font-family:'Jost',monospace; font-size:.72rem; letter-spacing:.03em; cursor:pointer;
  background:var(--card); border:1px dashed var(--border); border-radius:7px;
  padding:.3rem .65rem; color:var(--green-dk); transition:all .2s;
}
.samp:hover{ border-style:solid; border-color:var(--green); background:var(--green-lt); }
.samp b{ color:var(--body); font-weight:400; }

@media(max-width:640px){
  .checks{ grid-template-columns:1fr; }
  .vc-ring{ margin-left:0; width:100%; }
  .vc-grid > div{ border-right:0; }
}

/* =============================================================
   SANCTIONED SNE CHECKER
   The live table lists sanctioned posts only, which answers half the
   question — what people are really checking is how many of those posts
   are actually filled. Sanctioned / filled / vacant is shown as one bar
   per designation so the gap is the thing you see first.
   ============================================================= */
.sne-sum{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:.7rem; }
.postrow{
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem 1rem; align-items:center;
  padding:.7rem .9rem; border:1px solid var(--border); border-radius:9px; background:var(--card);
  box-shadow:var(--shadow-sm); content-visibility:auto; contain-intrinsic-size:74px;
}
.postrow + .postrow{ margin-top:.5rem; }
.postrow .nm{ font-size:1rem; color:var(--heading); font-weight:600; line-height:1.35; }
.postrow .sub{ font-size:.88rem; color:var(--body); margin-top:.2rem; line-height:1.4; }
.postrow .nums{ display:flex; gap:.9rem; align-items:baseline; white-space:nowrap; }
.postrow .nums b{ font-family:'Playfair Display',serif; font-size:1.05rem; color:var(--green-dk); }
.train-cards .postrow{ align-items:start; }
.train-cards .train-emp{ margin-top:.35rem; font-weight:600; }
.train-cards .train-side{
  flex-direction:column; align-items:flex-end; gap:.35rem; white-space:normal; text-align:right;
}
.train-cards .train-side .when{
  font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--green); font-weight:600;
}

/* Biometric — institution GPS map (CheckBiometrics Schools Location) */
.map-head{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.map-title-link{
  display:inline-flex; align-items:center; gap:.45rem; text-decoration:none; color:inherit;
}
.map-title-link:hover .eyebrow{ color:var(--green-dk); }
.map-title-link .ext-link{
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--green); opacity:.85;
}
.map-title-link:hover .ext-link{ opacity:1; transform:translateY(-1px); }
.bio-map{
  height:300px; width:100%; margin-top:.75rem;
  border:1px dashed #1a1a1a; border-radius:8px; background:#E8F0EC;
  z-index:0;
}
#mapPanel .leaflet-container{ font: inherit; }
#mapMissing{ margin-top:.75rem; }
.pbar{ grid-column:1/-1; height:7px; border-radius:99px; background:#F0DADA; overflow:hidden; display:flex; }
.pbar span{ display:block; height:100%; background:var(--green); }
.pbar i{ display:block; height:100%; background:repeating-linear-gradient(45deg,#F3D6D3,#F3D6D3 3px,#FBEAE9 3px,#FBEAE9 6px); flex:1; }
.vacpill{ font-size:.6rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:.18rem .45rem; border-radius:4px; background:#FBEAE9; color:var(--danger); }
.vacpill.none{ background:var(--green-lt); color:var(--green); }

/* =============================================================
   EMPLOYEE TRAINING CHECKER
   The live page puts 191 training programmes in a single <select>.
   Replaced with a type-to-filter combobox, and the result reads as a
   chronological timeline rather than a flat table.
   ============================================================= */
.combo{ position:relative; }
.combo-list{
  position:absolute; left:0; right:0; top:calc(100% + .4rem); z-index:60;
  background:var(--card); border:1px solid var(--border); border-radius:10px;
  box-shadow:var(--shadow-lg); max-height:280px; overflow-y:auto; padding:.3rem;
}
.combo-list[hidden]{ display:none; }
.combo-list button{
  display:block; width:100%; text-align:left; font-family:inherit; font-size:.8rem;
  color:var(--body); background:transparent; border:0; border-radius:6px;
  padding:.45rem .6rem; cursor:pointer; line-height:1.4;
}
.combo-list button:hover,.combo-list button.hi{ background:var(--green-lt); color:var(--green-dk); }
.combo-list button mark{ background:#FCEFC4; color:inherit; padding:0 1px; border-radius:2px; }
.combo-empty{ padding:.7rem .6rem; font-size:.8rem; color:var(--body); }

.tl{ position:relative; padding-left:1.9rem; }
.tl::before{ content:""; position:absolute; left:7px; top:.4rem; bottom:.4rem; width:2px; background:var(--line); }
.tlitem{ position:relative; padding-bottom:1rem; }
.tlitem::before{
  content:""; position:absolute; left:-1.9rem; top:.35rem; width:16px; height:16px;
  border-radius:50%; background:var(--card); border:3px solid var(--green); box-sizing:border-box;
}
.tlitem.pend::before{ border-color:var(--warn); }
.tlitem.miss::before{ border-color:#CBD6D0; }
.tlitem .card{ padding:.75rem .95rem; }
.tlitem h4{ font-family:'Jost',sans-serif; font-size:.9rem; font-weight:600; margin:0; line-height:1.4; }
.tlitem .when{ font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green); font-weight:600; }
.tlitem .meta{ font-size:.75rem; color:var(--body); margin-top:.3rem; }

/* =============================================================
   DISTANCE CHECKER
   Two radio-driven modes on the live page become a segmented switch, and
   the nearby-schools result gets a radar plot — a list of metre values
   does not convey "which direction, how far" the way a picture does.
   ============================================================= */
.dist-hero{
  display:flex; align-items:center; justify-content:center; gap:1.5rem; flex-wrap:wrap;
  padding:1.6rem 1.2rem; background:var(--green-lt); border:1px solid #BFE0CC; border-radius:12px;
}
.dist-hero .val{ font-family:'Playfair Display',serif; font-size:clamp(2rem,6vw,3.2rem); color:var(--green-dk); line-height:1; }
.dist-hero .unit{ font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--body); }
.dist-node{ text-align:center; max-width:210px; }
.dist-node .nm{ font-size:.82rem; color:var(--heading); font-weight:500; line-height:1.35; }
.dist-node .sid{ font-size:.66rem; color:var(--body); }
.dist-link{ flex:1; min-width:90px; display:flex; align-items:center; gap:.4rem; color:var(--green); }
.dist-link .ln{ flex:1; height:2px; background:repeating-linear-gradient(90deg,var(--green),var(--green) 5px,transparent 5px,transparent 10px); }

.radar{ width:100%; max-width:420px; margin:0 auto; display:block; }
.radar .rings{ fill:none; stroke:var(--border); stroke-dasharray:3 4; }
.radar .axis{ stroke:var(--line); }
.radar .rlbl{ font-size:8px; fill:#667A71; letter-spacing:.08em; }
.radar .dot{ fill:var(--green); cursor:pointer; transition:r .18s; }
.radar .dot:hover{ r:7; }
.radar .dot.sel{ fill:var(--gold); }
.radar .me{ fill:var(--green-dk); }
.nearrow{
  display:flex; align-items:center; gap:.8rem; padding:.6rem .8rem;
  border:1px solid var(--border); border-radius:9px; background:var(--card); cursor:pointer;
  transition:border-color .18s, background .18s;
}
.nearrow + .nearrow{ margin-top:.4rem; }
.nearrow:hover,.nearrow.sel{ border-color:var(--green); background:var(--green-lt); }
.nearrow .rank{ width:24px; height:24px; border-radius:50%; flex-shrink:0; display:grid; place-items:center;
  background:var(--green-lt); color:var(--green-dk); font-size:.7rem; font-weight:600; }
.nearrow.sel .rank{ background:var(--green); color:#fff; }
.nearrow .m{ margin-left:auto; font-family:'Playfair Display',serif; font-size:1rem; color:var(--green-dk); white-space:nowrap; }
.modeseg{ display:inline-flex; background:var(--line); border:1px solid var(--border); border-radius:9px; padding:3px; }
.modeseg button{
  display:inline-flex; align-items:center; gap:.4rem; padding:.5rem 1rem; font-family:inherit;
  font-size:.73rem; font-weight:600; letter-spacing:.06em; border:0; background:transparent;
  color:var(--body); border-radius:7px; cursor:pointer; transition:all .22s var(--ease);
}
.modeseg button.on{ background:var(--card); color:var(--green); box-shadow:var(--shadow-sm); }

.dist-map{ margin-top:.75rem; }
.dist-pin, .dist-pin-center{ background:transparent; border:0; }
.dist-pin-dot{
  width:22px; height:22px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
  background:var(--green); border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.35);
}
.dist-pin-center-dot{
  width:28px; height:28px; border-radius:50%;
  background:#c62828; border:3px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.4);
}
/* Map tooltips — school names + distance labels (−2pt vs prior) */
.leaflet-tooltip.dist-tip{
  font-family:inherit; font-size:8pt; line-height:1.35; padding:.25rem .4rem;
  border-radius:4px; box-shadow:0 1px 4px rgba(0,0,0,.18);
}
.leaflet-tooltip.dist-tip-school{ font-size:8pt; font-weight:bold; }
.leaflet-tooltip.dist-tip-near{
  font-size:6.5pt; font-weight:600; line-height:1.25;
  max-width:44rem !important; /* was 22rem — doubled */
  width:max-content;
  white-space:normal;
}
.leaflet-tooltip.dist-tip-near .dist-mtr-lbl{ font-size:7pt; }
.leaflet-tooltip.dist-tip-lvl-primary{ color:var(--lvl-primary-fg); border-left:3px solid var(--lvl-primary-fg); }
.leaflet-tooltip.dist-tip-lvl-middle{ color:var(--lvl-middle-fg); border-left:3px solid var(--lvl-middle-fg); }
.leaflet-tooltip.dist-tip-lvl-elementary{ color:var(--lvl-elementary-fg); border-left:3px solid var(--lvl-elementary-fg); }
.leaflet-tooltip.dist-tip-lvl-secondary{ color:var(--lvl-secondary-fg); border-left:3px solid var(--lvl-secondary-fg); }
.leaflet-tooltip.dist-tip-lvl-hi-secondary{ color:var(--lvl-hisec-fg); border-left:3px solid var(--lvl-hisec-fg); }
.leaflet-tooltip.dist-tip-lvl-post-primary{ color:var(--lvl-post-fg); border-left:3px solid var(--lvl-post-fg); }
.leaflet-tooltip.dist-tip-lvl-office{ color:var(--lvl-office-fg); border-left:3px solid var(--lvl-office-fg); }
.leaflet-tooltip.dist-tip-lvl-other{ color:#546E7A; border-left:3px solid #546E7A; }

/* Nearby map — school level colour key (shared badge palette) */
.dist-lvl-legend{
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--green-lt);
  padding:.7rem .9rem .85rem;
}
.dist-lvl-legend-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.35rem .85rem; margin-bottom:.55rem;
}
.dist-lvl-legend-note{ font-size:.72rem; color:var(--body); }
.dist-lvl-legend-row{
  display:flex; flex-wrap:wrap; gap:.45rem .55rem;
}
.dist-lvl-swatch{
  display:inline-flex; align-items:center; gap:.4rem;
  font-size:.72rem; font-weight:600; color:var(--heading);
  padding:.28rem .55rem; border-radius:6px;
  background:#fff; border:1px solid var(--border);
}
.dist-lvl-swatch i{
  display:inline-block; width:10px; height:10px; border-radius:50%;
  box-shadow:0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.12);
  flex-shrink:0;
}
.dist-lvl-swatch.primary{ color:var(--lvl-primary-fg); border-color:var(--lvl-primary-bd); background:var(--lvl-primary-bg); }
.dist-lvl-swatch.middle{ color:var(--lvl-middle-fg); border-color:var(--lvl-middle-bd); background:var(--lvl-middle-bg); }
.dist-lvl-swatch.elementary{ color:var(--lvl-elementary-fg); border-color:var(--lvl-elementary-bd); background:var(--lvl-elementary-bg); }
.dist-lvl-swatch.secondary{ color:var(--lvl-secondary-fg); border-color:var(--lvl-secondary-bd); background:var(--lvl-secondary-bg); }
.dist-lvl-swatch.hi-secondary{ color:var(--lvl-hisec-fg); border-color:var(--lvl-hisec-bd); background:var(--lvl-hisec-bg); }
.dist-lvl-swatch.post-primary{ color:var(--lvl-post-fg); border-color:var(--lvl-post-bd); background:var(--lvl-post-bg); }
.dist-lvl-swatch.office{ color:var(--lvl-office-fg); border-color:var(--lvl-office-bd); background:var(--lvl-office-bg); }
.dist-lvl-swatch.center{ color:#b71c1c; border-color:#ef9a9a; background:#ffebee; }
.dist-lvl-count{ font-weight:700; font-variant-numeric:tabular-nums; opacity:.9; }

.leaflet-tooltip.dist-tip .dist-mtr-lbl{
  font-size:10pt; font-weight:700; color:var(--green);
}
#mapPanel .leaflet-control{ font-size:8pt; }

/* Find School Distance: 12-col row — From 5 | To 5 | Search 2 */
.dist-pair-row{
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:.75rem 1rem;
  align-items:start;
}
.dist-pair-row > .dist-pair-cell{ grid-column:span 5; min-width:0; }
.dist-pair-row > .dist-pair-go{ grid-column:span 2; }
.dist-pair-go{ display:flex; flex-direction:column; }
.dist-go-btn{
  width:100%;
  padding:.9rem .5rem;
  min-height:3.15rem;
  box-sizing:border-box;
}
@media (max-width:639px){
  .dist-pair-row > .dist-pair-cell,
  .dist-pair-row > .dist-pair-go{ grid-column:span 12; }
}

/* Nearby meta: Try = same width as SEMIS (5); School Level spans Range + Search (7) */
.dist-meta-lbl{
  display:block;
  font-size:calc(10px + 1pt);
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--green);
  line-height:1.2;
}
.dist-near-meta{ align-items:start; }
.dist-near-meta > .dist-near-try{ grid-column:span 5; }
.dist-near-meta > .dist-near-levels{ grid-column:span 7; }
.dist-near-try,
.dist-near-levels{ min-width:0; }
@media (max-width:639px){
  .dist-near-meta > .dist-near-try,
  .dist-near-meta > .dist-near-levels{ grid-column:span 12; }
}

/* Green school name under SEMIS fields (+2pt vs text-xs ~12px) */
#fromNm, #toNm, #srcNm{
  font-size:14px; line-height:1.35; min-height:1.35em;
}

/* mobile menu */
#mmenu{ position:fixed; top:0; left:0; width:100vw; max-width:100%; height:100%; z-index:8999; background:var(--card); transform:translateX(100%); transition:transform .4s var(--ease); display:flex; flex-direction:column; justify-content:center; padding:2rem; }
#mmenu.open{ transform:translateX(0); }
#mmenu a{ font-family:'Playfair Display',serif; font-size:1.6rem; color:var(--heading); padding:.4rem 0; }
#mmenu a:hover{ color:var(--green); }

/* print */
/* ---------- Print ----------
   A printed checker result should be the record, not the tool that found it,
   so the whole search console, filter rail and result-state placeholders drop
   out and a departmental caption is stamped on instead. */
@media print{
  @page{ size: A4; margin:14mm; }
  #nav, #preloader, footer, .no-print, .toolbar,
  .sconsole, .adv-filters, .presets, .rail, .samples, .matchbar, .combo,
  #prompt, #none, #skeleton, #moreWrap, .sugg, .pop, .combo-list,
  #seld-modal{ display:none !important; }

  html, body{ background:#fff; }
  .section{ padding:.4rem 0 !important; }
  .container{ max-width:none; padding:0; }

  /* identify the sheet — it leaves the browser with no other context */
  main::before{
    content:"Schools & Employees Information — School Education & Literacy Department, Government of Sindh";
    display:block; font-family:Georgia,serif; font-size:9.5pt; color:#01411C;
    border-bottom:1pt solid #01411C; padding-bottom:5pt; margin-bottom:10pt;
  }

  .card, .emp, .icard, .postrow, .vcard, .tlitem, .tbl-wrap, .note, .warn-box{
    box-shadow:none !important; break-inside:avoid;
  }
  /* two-up rather than one-per-line, or a roll costs a ream */
  .inst-grid, .emp-grid{ grid-template-columns:1fr 1fr !important; gap:6pt !important; }
  .icard, .emp, .postrow{ margin-bottom:0; }

  .tbl-wrap{ overflow:visible !important; }
  table.data{ min-width:0 !important; font-size:8pt; }
  table.data thead th{ background:#E8F3ED !important; color:#01411C !important; }
  table.data tbody tr{ content-visibility:visible !important; }

  /* badges and bars carry meaning, so their fills must survive */
  .badge, .mtag, .pill, .vacpill, .chk, .pbar, .pbar span, .split, .split span,
  table.data thead th{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }

  .radar{ max-width:74mm; }
  a{ text-decoration:none; color:inherit; }
}

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  .reveal-line > *,.fade-up{ opacity:1 !important; transform:none !important }
}