/* ============================================================
   BharatPulse — National Scheme Monitoring Command Center
   Design system: institutional command-center
   Chrome: ink navy · Interactive: signal blue · Status ramp G/Y/O/R
   ============================================================ */

:root{
  /* chrome */
  --ink:#0C1A2B; --ink-2:#13263D; --ink-3:#1B324F;
  /* canvas + surface */
  --canvas:#EDF0F4; --surface:#FFFFFF; --surface-alt:#F6F8FB;
  --border:#DCE2EB; --border-strong:#C7D0DD;
  /* text */
  --text:#18222F; --muted:#66758A; --faint:#94A1B2;
  /* interactive (cool — never collides with warm status ramp) */
  --brand:#2563B5; --brand-deep:#1B4D8F; --brand-soft:#E8F0FA; --brand-ring:rgba(37,99,181,.28);
  /* emblem keyline (single decorative saffron) */
  --saffron:#E8943B;
  /* status ramp (data semantics) */
  --green:#1C9A57; --green-soft:#E4F4EB;
  --yellow:#CFA014; --yellow-soft:#FBF1D6;
  --orange:#E2701A; --orange-soft:#FCEADB;
  --red:#D14343; --red-soft:#FBE5E5;
  /* categorical (cool, for non-status charts) */
  --c1:#2563B5; --c2:#2BA39A; --c3:#6C5CE7; --c4:#C77DCE; --c5:#4A6FA5; --c6:#E8943B;
  /* shape */
  --r-sm:8px; --r:12px; --r-lg:16px;
  --sh-sm:0 1px 2px rgba(16,32,53,.06);
  --sh:0 4px 18px rgba(16,32,53,.07);
  --sh-lg:0 18px 48px rgba(16,32,53,.14);
  --rail-w:248px;
  --tb-h:68px;
  --ff-disp:"Space Grotesk",sans-serif;
  --ff-body:"Inter",sans-serif;
  --ff-mono:"IBM Plex Mono",monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--ff-body); color:var(--text);
  background:var(--canvas); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased; overflow:hidden;
}
h1,h2,h3,h4{font-family:var(--ff-disp); margin:0; letter-spacing:-.01em; color:var(--text)}
button{font-family:inherit; cursor:pointer}
::selection{background:var(--brand-soft)}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums}
.eyebrow{font-family:var(--ff-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--brand); font-weight:600}

/* ---------------- BOOT ---------------- */
.boot{position:fixed; inset:0; z-index:9999; background:var(--ink);
  display:flex; align-items:center; justify-content:center; color:#fff}
.boot__inner{text-align:center; width:min(330px,80vw)}
.boot__mark{display:flex; gap:7px; justify-content:center; margin-bottom:22px}
.boot__mark span{width:11px; height:34px; border-radius:3px; background:#2C4A6E; animation:bootpulse 1.1s ease-in-out infinite}
.boot__mark span{background:linear-gradient(var(--brand),var(--brand-deep))}
.boot__mark span:nth-child(2){animation-delay:.14s; background:linear-gradient(var(--green),#13734a)}
.boot__mark span:nth-child(3){animation-delay:.28s; background:linear-gradient(var(--yellow),#a37c0a)}
.boot__mark span:nth-child(4){animation-delay:.42s; background:linear-gradient(var(--saffron),#bf6f23)}
@keyframes bootpulse{0%,100%{transform:scaleY(.45); opacity:.5}50%{transform:scaleY(1); opacity:1}}
.boot__title{font-family:var(--ff-disp); font-size:26px; font-weight:700; letter-spacing:-.02em}
.boot__sub{color:#9DB0C7; font-size:13px; margin:6px 0 20px; font-family:var(--ff-mono)}
.boot__bar{height:3px; background:rgba(255,255,255,.12); border-radius:3px; overflow:hidden}
.boot__bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brand),var(--saffron)); transition:width .3s ease}

/* ---------------- APP SHELL ---------------- */
.app{display:flex; height:100vh; height:100dvh}

/* ---------------- COMMAND RAIL ---------------- */
.rail{width:var(--rail-w); flex:0 0 var(--rail-w); background:var(--ink); color:#C6D2E2;
  display:flex; flex-direction:column; position:relative; z-index:60}
.rail__brand{display:flex; align-items:center; gap:11px; padding:20px 18px 18px;
  border-bottom:1px solid rgba(255,255,255,.07)}
.rail__emblem{color:var(--saffron); display:grid; place-items:center; flex:0 0 auto}
.rail__word{display:flex; flex-direction:column; line-height:1.15}
.rail__word strong{font-family:var(--ff-disp); color:#fff; font-size:17px; font-weight:700; letter-spacing:-.01em}
.rail__word span{font-size:10.5px; color:#7E92AC; letter-spacing:.06em; text-transform:uppercase}
.rail__close{margin-left:auto; background:none; border:none; color:#8295AF; font-size:26px; line-height:1}
.rail__nav{padding:14px 12px; display:flex; flex-direction:column; gap:3px; flex:1; overflow-y:auto}
.navitem{display:flex; align-items:center; gap:12px; width:100%; padding:11px 13px; border:none;
  background:none; color:#A9B8CC; border-radius:var(--r-sm); font-size:13.5px; font-weight:500;
  text-align:left; position:relative; transition:.16s}
.navitem__ico{width:19px; height:19px; fill:currentColor; flex:0 0 auto; opacity:.85}
.navitem:hover{background:rgba(255,255,255,.05); color:#E6EDF6}
.navitem.is-active{background:linear-gradient(90deg,rgba(37,99,181,.22),rgba(37,99,181,.04)); color:#fff}
.navitem.is-active::before{content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  border-radius:3px; background:var(--saffron)}
.navitem.is-active .navitem__ico{opacity:1}
.rail__foot{padding:16px 18px; border-top:1px solid rgba(255,255,255,.07); font-size:12px}
.rail__stat{display:flex; justify-content:space-between; align-items:center; padding:3px 0; color:#8295AF}
.rail__stat b{font-family:var(--ff-mono); color:#DCE6F2; font-weight:500; font-size:12.5px}
.rail__credit{margin-top:10px; color:#5E7088; font-size:10.5px; letter-spacing:.03em}
.rail__scrim{display:none}

/* ---------------- MAIN ---------------- */
.main{flex:1; min-width:0; display:flex; flex-direction:column; height:100vh; height:100dvh}

/* topbar */
.topbar{height:var(--tb-h); flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; gap:16px; padding:0 22px; z-index:40}
.topbar__menu{background:none; border:1px solid var(--border); border-radius:8px; padding:7px; color:var(--text); display:grid; place-items:center}
.topbar__title{min-width:0; flex:1}
.topbar__title h1{font-size:19px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__title p{margin:1px 0 0; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.topbar__actions{display:flex; align-items:center; gap:10px}
.search{display:flex; align-items:center; gap:8px; background:var(--surface-alt); border:1px solid var(--border);
  border-radius:9px; padding:0 11px; height:38px; transition:.16s}
.search:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); background:#fff}
.search svg{fill:var(--faint); flex:0 0 auto}
.search input{border:none; background:none; outline:none; font-size:13px; width:200px; color:var(--text)}
.btn-ghost{display:flex; align-items:center; gap:7px; height:38px; padding:0 13px; background:var(--surface);
  border:1px solid var(--border); border-radius:9px; color:var(--text); font-size:13px; font-weight:500; transition:.16s}
.btn-ghost:hover{border-color:var(--border-strong); background:var(--surface-alt)}
.btn-ghost svg{stroke:var(--brand)}

/* ---------------- FILTER BAR ---------------- */
.filters{flex:0 0 auto; background:var(--surface); border-bottom:1px solid var(--border); padding:11px 22px}
.filters__row{display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.fdrop__btn{display:flex; align-items:center; gap:8px; height:36px; padding:0 12px; background:var(--surface-alt);
  border:1px solid var(--border); border-radius:8px; font-size:13px; color:var(--text); font-weight:500; transition:.16s}
.fdrop__btn:hover{border-color:var(--border-strong)}
.fdrop.is-open .fdrop__btn{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring); background:#fff}
.fdrop__btn svg{fill:var(--faint)}
.fdrop__cnt{background:var(--brand); color:#fff; font-family:var(--ff-mono); font-size:11px; font-weight:600;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; display:grid; place-items:center}
.fdrop.is-active .fdrop__lbl{color:var(--brand); font-weight:600}
.filters__reset{height:36px; padding:0 13px; background:none; border:1px dashed var(--border-strong);
  border-radius:8px; color:var(--muted); font-size:12.5px; font-weight:500; transition:.16s}
.filters__reset:hover{color:var(--red); border-color:var(--red)}
.filters__result{margin-left:auto; font-family:var(--ff-mono); font-size:12px; color:var(--muted); white-space:nowrap}
.filters__result b{color:var(--text)}
.chips{display:flex; gap:6px; flex-wrap:wrap; margin-top:9px}
.chips:empty{display:none}
.chip{display:inline-flex; align-items:center; gap:6px; background:var(--brand-soft); color:var(--brand-deep);
  border:1px solid #CFE0F3; border-radius:7px; padding:4px 7px 4px 9px; font-size:12px; font-weight:500; max-width:240px}
.chip span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.chip b{font-size:10px; opacity:.7; text-transform:uppercase; letter-spacing:.05em; font-weight:600}
.chip button{background:none; border:none; color:var(--brand-deep); font-size:15px; line-height:1; padding:0 2px; opacity:.6}
.chip button:hover{opacity:1}

/* ---------------- CANVAS ---------------- */
.canvas{flex:1; overflow-y:auto; padding:22px; scroll-behavior:smooth}
.view{display:none; animation:viewin .35s ease}
.view.is-active{display:block}
@keyframes viewin{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

/* ---------------- CARD + GRID ---------------- */
.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--sh-sm); padding:18px}
.card__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; margin-bottom:14px}
.card__head h3{font-size:14.5px; font-weight:600; white-space:nowrap; flex:0 0 auto}
.card__hint{font-size:11.5px; color:var(--faint); text-align:right; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.grid{display:grid; grid-template-columns:repeat(12,1fr); gap:16px; margin-top:16px}
.col-12{grid-column:span 12}.col-7{grid-column:span 7}.col-6{grid-column:span 6}.col-5{grid-column:span 5}

/* ---------------- PULSE (signature) ---------------- */
.pulse{padding:20px 22px 18px}
.pulse__head{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; margin-bottom:16px; flex-wrap:wrap}
.pulse__h{font-size:22px; font-weight:600; margin-top:3px; letter-spacing:-.02em}
.pulse__legend{display:flex; gap:16px; flex-wrap:wrap}
.plg{display:flex; align-items:center; gap:7px; font-size:12.5px}
.plg i{width:10px; height:10px; border-radius:3px; flex:0 0 auto}
.plg b{font-family:var(--ff-mono); font-weight:600}
.plg span{color:var(--muted)}
.pulse__bar{display:flex; height:46px; border-radius:9px; overflow:hidden; background:var(--surface-alt); box-shadow:inset 0 0 0 1px var(--border)}
.pulse__seg{position:relative; transition:width .9s cubic-bezier(.2,.8,.2,1); min-width:0; cursor:default}
.pulse__seg span{position:absolute; inset:0; display:grid; place-items:center; color:#fff; font-family:var(--ff-mono);
  font-size:12.5px; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.2); opacity:0; transition:.3s .4s}
.pulse__seg.show span{opacity:1}
.pulse__scale{display:flex; justify-content:space-between; margin-top:8px; font-family:var(--ff-mono); font-size:11px; color:var(--faint)}

/* ---------------- KPI CARDS ---------------- */
.kpis{display:grid; grid-template-columns:repeat(5,1fr); gap:14px}
.view#view-overview .kpis{margin-top:16px}
.kpi{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:16px 16px 14px;
  box-shadow:var(--sh-sm); position:relative; overflow:hidden; transition:.2s}
.kpi:hover{box-shadow:var(--sh); transform:translateY(-2px)}
.kpi::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--brand)}
.kpi.k-green::before{background:var(--green)}.kpi.k-yellow::before{background:var(--yellow)}
.kpi.k-orange::before{background:var(--orange)}.kpi.k-red::before{background:var(--red)}
.kpi__lbl{font-size:11.5px; color:var(--muted); font-weight:500; display:flex; align-items:center; gap:6px}
.kpi__lbl .dot{width:7px; height:7px; border-radius:50%}
.kpi__val{font-family:var(--ff-disp); font-size:29px; font-weight:600; letter-spacing:-.02em; margin:7px 0 2px; line-height:1}
.kpi__val small{font-size:15px; color:var(--muted); font-weight:500}
.kpi__sub{font-size:11.5px; color:var(--faint); font-family:var(--ff-mono)}
.kpi__sub.up{color:var(--green)}.kpi__sub.down{color:var(--red)}

/* ---------------- CHARTS ---------------- */
.chartbox{position:relative; height:230px}
.chartbox--tall{height:330px}

/* ---------------- RANK LIST ---------------- */
.ranklist{display:flex; flex-direction:column; gap:2px}
.rankrow{display:flex; align-items:center; gap:12px; padding:9px 8px; border-radius:8px; transition:.14s}
.rankrow:hover{background:var(--surface-alt)}
.rankrow__n{font-family:var(--ff-mono); font-size:12px; color:var(--faint); width:20px; flex:0 0 auto}
.rankrow__name{flex:1; min-width:0; font-size:13px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rankrow__name small{display:block; color:var(--faint); font-weight:400; font-size:11px; overflow:hidden; text-overflow:ellipsis}
.rankrow__bar{flex:0 0 90px; height:6px; border-radius:3px; background:var(--surface-alt); overflow:hidden}
.rankrow__bar i{display:block; height:100%; border-radius:3px}
.rankrow__score{font-family:var(--ff-mono); font-size:13px; font-weight:600; width:38px; text-align:right; flex:0 0 auto}

/* ---------------- GAUGE ---------------- */
.gauge{display:flex; flex-direction:column; align-items:center; justify-content:center; height:260px; gap:6px}
.gauge__svg{width:230px; height:140px}
.gauge__val{font-family:var(--ff-disp); font-size:42px; font-weight:600; letter-spacing:-.02em; margin-top:-30px}
.gauge__lbl{font-size:12.5px; color:var(--muted)}
.gauge__split{display:flex; gap:18px; margin-top:8px}
.gsplit{text-align:center}
.gsplit b{font-family:var(--ff-mono); font-size:15px; display:block}
.gsplit span{font-size:11px; color:var(--muted)}

/* ---------------- TABLE ---------------- */
.tablewrap{overflow-x:auto; border-radius:var(--r-sm)}
table.dt{width:100%; border-collapse:collapse; font-size:13px}
table.dt thead th{position:sticky; top:0; background:var(--surface-alt); text-align:left; padding:10px 12px;
  font-size:11px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); font-weight:600;
  border-bottom:1px solid var(--border); white-space:nowrap; cursor:pointer; user-select:none}
table.dt thead th.sortable:hover{color:var(--brand)}
table.dt thead th .arr{opacity:.35; font-size:9px; margin-left:3px}
table.dt thead th.sorted .arr{opacity:1; color:var(--brand)}
table.dt thead th.num,table.dt td.num{text-align:right; font-family:var(--ff-mono)}
table.dt tbody td{padding:10px 12px; border-bottom:1px solid var(--border); vertical-align:middle}
table.dt tbody tr{transition:.1s}
table.dt tbody tr:hover{background:var(--brand-soft)}
.td-name{font-weight:500; max-width:280px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.td-sub{color:var(--faint); font-size:11px}
.badge{display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:6px; font-size:11.5px; font-weight:600; white-space:nowrap}
.badge i{width:6px; height:6px; border-radius:50%}
.b-green{background:var(--green-soft); color:#13724a}.b-green i{background:var(--green)}
.b-yellow{background:var(--yellow-soft); color:#8a6a05}.b-yellow i{background:var(--yellow)}
.b-orange{background:var(--orange-soft); color:#a8500e}.b-orange i{background:var(--orange)}
.b-red{background:var(--red-soft); color:#a52d2d}.b-red i{background:var(--red)}
.b-flag{background:var(--surface-alt); color:var(--muted); border:1px solid var(--border); font-family:var(--ff-mono); font-weight:500; font-size:10.5px}
.flags{display:flex; gap:4px; flex-wrap:wrap}

/* pagination */
.pager{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 4px 2px; flex-wrap:wrap}
.pager__info{font-size:12px; color:var(--muted); font-family:var(--ff-mono)}
.pager__ctrls{display:flex; align-items:center; gap:5px}
.pager__btn{min-width:32px; height:32px; padding:0 9px; border:1px solid var(--border); background:var(--surface);
  border-radius:7px; font-size:12.5px; color:var(--text); font-family:var(--ff-mono); transition:.14s}
.pager__btn:hover:not(:disabled){border-color:var(--brand); color:var(--brand)}
.pager__btn.is-active{background:var(--brand); color:#fff; border-color:var(--brand)}
.pager__btn:disabled{opacity:.4; cursor:not-allowed}
.pager__size{margin-left:6px; height:32px; border:1px solid var(--border); border-radius:7px; background:var(--surface); font-size:12px; padding:0 6px; color:var(--text)}

/* ---------------- EXPLORER ---------------- */
.explorer{margin-bottom:16px}
.explorer__crumbs{display:flex; align-items:center; gap:4px; flex-wrap:wrap; margin-bottom:14px; font-size:13px}
.crumb{display:inline-flex; align-items:center; gap:6px; padding:6px 11px; background:var(--surface); border:1px solid var(--border);
  border-radius:8px; color:var(--text); font-weight:500; transition:.14s}
.crumb:hover{border-color:var(--brand); color:var(--brand)}
.crumb.is-current{background:var(--ink); color:#fff; border-color:var(--ink)}
.crumb small{font-size:10px; opacity:.6; text-transform:uppercase; letter-spacing:.05em}
.crumb-sep{color:var(--faint)}
.explorer__drill{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.drillcard{background:var(--surface); border:1px solid var(--border); border-radius:var(--r); padding:14px 15px;
  text-align:left; transition:.16s; box-shadow:var(--sh-sm); position:relative; overflow:hidden}
.drillcard:hover{border-color:var(--brand); box-shadow:var(--sh); transform:translateY(-2px)}
.drillcard__name{font-weight:600; font-size:13.5px; margin-bottom:9px; line-height:1.3; min-height:35px}
.drillcard__meter{height:5px; border-radius:3px; background:var(--surface-alt); overflow:hidden; margin-bottom:9px; display:flex}
.drillcard__meter i{height:100%}
.drillcard__row{display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:3px}
.drillcard__row b{font-family:var(--ff-mono); color:var(--text); font-weight:500}
.drillcard__go{position:absolute; top:13px; right:13px; color:var(--faint); transition:.16s}
.drillcard:hover .drillcard__go{color:var(--brand); transform:translateX(2px)}

/* ---------------- EMPTY STATE ---------------- */
.empty{text-align:center; padding:48px 20px; color:var(--muted)}
.empty__ico{width:52px; height:52px; margin:0 auto 14px; border-radius:14px; background:var(--surface-alt);
  display:grid; place-items:center; color:var(--faint)}
.empty h4{font-size:16px; color:var(--text); margin-bottom:5px}
.empty p{font-size:13px; max-width:340px; margin:0 auto}
.empty button{margin-top:14px; height:36px; padding:0 16px; border:1px solid var(--brand); background:var(--brand);
  color:#fff; border-radius:8px; font-size:13px; font-weight:500}

/* ---------------- FILTER PANEL (portal) ---------------- */
.fpanel{position:fixed; z-index:200; width:300px; max-width:calc(100vw - 24px); background:var(--surface);
  border:1px solid var(--border-strong); border-radius:var(--r); box-shadow:var(--sh-lg); overflow:hidden;
  animation:panelin .14s ease}
@keyframes panelin{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.fpanel__search{padding:10px}
.fpanel__search input{width:100%; height:36px; border:1px solid var(--border); border-radius:8px; padding:0 11px;
  font-size:13px; outline:none}
.fpanel__search input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-ring)}
.fpanel__actions{display:flex; gap:8px; padding:0 10px 8px}
.fpanel__actions button{flex:1; height:30px; border:1px solid var(--border); background:var(--surface-alt);
  border-radius:7px; font-size:12px; color:var(--muted); font-weight:500}
.fpanel__actions button:hover{color:var(--brand); border-color:var(--brand)}
.fpanel__list{max-height:300px; overflow-y:auto; padding:4px 6px 8px}
.fopt{display:flex; align-items:center; gap:9px; padding:7px 9px; border-radius:7px; cursor:pointer; font-size:13px}
.fopt:hover{background:var(--surface-alt)}
.fopt input{width:15px; height:15px; accent-color:var(--brand); flex:0 0 auto}
.fopt span{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fopt small{font-family:var(--ff-mono); font-size:11px; color:var(--faint)}

/* ---------------- TOOLTIP ---------------- */
.tip{position:fixed; z-index:500; background:var(--ink); color:#fff; padding:8px 11px; border-radius:8px;
  font-size:12px; pointer-events:none; box-shadow:var(--sh-lg); max-width:260px; line-height:1.45}
.tip b{color:#fff}.tip .t-sub{color:#9DB0C7; font-size:11px}

/* ---------------- SCROLLBARS ---------------- */
.canvas::-webkit-scrollbar,.fpanel__list::-webkit-scrollbar,.tablewrap::-webkit-scrollbar,.rail__nav::-webkit-scrollbar{width:9px; height:9px}
.canvas::-webkit-scrollbar-thumb,.fpanel__list::-webkit-scrollbar-thumb,.tablewrap::-webkit-scrollbar-thumb{background:#C4CEDB; border-radius:5px; border:2px solid var(--canvas)}
.canvas::-webkit-scrollbar-thumb:hover{background:#A9B6C8}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width:1200px){
  .kpis{grid-template-columns:repeat(3,1fr)}
  .col-7,.col-5,.col-6{grid-column:span 6}
}
@media (max-width:992px){
  :root{--rail-w:0px}
  .rail{position:fixed; left:0; top:0; bottom:0; width:264px; flex-basis:264px; transform:translateX(-100%);
    transition:transform .26s cubic-bezier(.4,0,.2,1)}
  .rail.is-open{transform:none; box-shadow:var(--sh-lg)}
  .rail__scrim{display:block; position:fixed; inset:0; background:rgba(12,26,43,.5); z-index:50; opacity:0;
    pointer-events:none; transition:.26s}
  .rail__scrim.is-open{opacity:1; pointer-events:auto}
  .search input{width:140px}
}
@media (max-width:768px){
  .canvas{padding:15px}
  .col-12,.col-7,.col-6,.col-5{grid-column:span 12}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .pulse__h{font-size:18px}
  .topbar__title p{display:none}
  .search input{width:110px}
  .filters__result{display:none}
  .card__hint{display:none}
}
@media (max-width:480px){
  .kpis{grid-template-columns:1fr 1fr; gap:10px}
  .kpi__val{font-size:24px}
  .topbar{padding:0 14px; gap:10px}
  .filters{padding:10px 14px}
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important; scroll-behavior:auto!important}
}

/* focus visibility */
:focus-visible{outline:2px solid var(--brand); outline-offset:2px; border-radius:4px}
.navitem:focus-visible{outline-offset:-2px}