/* Approved Studio presentation. Uses the current application data and saved edits. */
:root[data-dashboard-style]{
  --dashboard-font:Vazirmatn,Tahoma,sans-serif;
  --ease-ui:cubic-bezier(.2,.7,.25,1);
  --theme-moon:block;--theme-sun:none;
  --good:#327b61;--warn:#946520;--crit:#b44c4c;
  --fac:#ae7a26;--nonfac:#3f84b4;--violet:#8270ad;--teal:#268f92;
  --dash-brand-filter:none;
}
:root[data-dashboard-style] body,
:root[data-dashboard-style] button,
:root[data-dashboard-style] input,
:root[data-dashboard-style] select,
:root[data-dashboard-style] textarea{font-family:var(--dashboard-font);font-synthesis:none}
:root[data-dashboard-style] #app{isolation:isolate}
:root[data-dashboard-style] #app main{min-width:0}
:root[data-dashboard-style] #app :is(.page,.view,.subview,.panel,[id^="chart-"],.shared-heading,.shared-drill){min-width:0;max-width:100%}
:root[data-dashboard-style] #app .grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
:root[data-dashboard-style] #app .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Flex items and native button padding previously pushed ten admission years out of the panel. */
:root[data-dashboard-style] #app .cols{width:100%;min-width:0;gap:clamp(3px,.55vw,8px)}
:root[data-dashboard-style] #app .col{flex:1 1 0;min-width:0;max-width:100%;padding-inline:0}
:root[data-dashboard-style] #app .col :is(.cn,.cl){max-width:100%;text-align:center;overflow-wrap:anywhere;line-height:1.65}
:root[data-dashboard-style] #app .col .cb{flex-shrink:1}
:root[data-dashboard-style] #app .hbar .hb-top{gap:10px;align-items:baseline}
:root[data-dashboard-style] #app .hbar .hb-l{min-width:0;overflow-wrap:anywhere}
:root[data-dashboard-style] #app .hbar .hb-n{flex:none;font-variant-numeric:tabular-nums}
:root[data-dashboard-style] #app .stack-legend{flex-wrap:wrap}
:root[data-dashboard-style] #app .tabs{flex-wrap:wrap}
:root[data-dashboard-style] #app aside.rail{min-height:0;scrollbar-gutter:stable}
:root[data-dashboard-style] #app .page-head h2{font-weight:700;letter-spacing:-.6px;text-wrap:balance}
:root[data-dashboard-style] #app :is(.kv,.ac-n,.sov,.hb-n,.num,.cn,.c-num){font-variant-numeric:tabular-nums;font-weight:700}
:root[data-dashboard-style] #app :is(.sb-t,.wt b,.panel h3,.rcard h4,.tab,.a-t){font-weight:700}
:root[data-dashboard-style] #app :is(.page-head p,.p-note,.read,.rcard p,.kl){text-wrap:pretty}
:root[data-dashboard-style] #app .page-head p{max-width:82ch}
:root[data-dashboard-style] #app :is(.kpis,.grid2,.grid3,.gallery,.alert-strip)>*{min-width:0}
:root[data-dashboard-style] #app :is(.topbar,.panel,.kpi,.alert-card,.rcard,.callout,.narr){transition:border-color .2s var(--ease-ui),box-shadow .24s var(--ease-ui),background-color .2s var(--ease-ui)}
:root[data-dashboard-style] #app :is(a,button){-webkit-tap-highlight-color:transparent;touch-action:manipulation}
:root[data-dashboard-style] #app :is(.nav a,.tab,.btn,.fchips button,.rcard,.alert-card){transition:transform .18s var(--ease-ui),background-color .18s var(--ease-ui),border-color .18s var(--ease-ui),box-shadow .2s var(--ease-ui),color .18s var(--ease-ui)}
:root[data-dashboard-style] #app :is(.nav a,.tab,.btn,.fchips button,.rcard,.alert-card):active{transform:translateY(1px);box-shadow:none}
:root[data-dashboard-style] #app :is(button,a,input,select,textarea,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--accent) 76%,var(--ink));outline-offset:3px;scroll-margin-block:90px}
:root[data-dashboard-style] #app .nav a.on{background:var(--accent);color:var(--surface);box-shadow:none}
:root[data-dashboard-style] #app :is(.tab.on,.fchips button.on){background:var(--accent);color:var(--surface);box-shadow:none}
:root[data-dashboard-style] #app .tbl-wrap{max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-color:var(--line-2) transparent}
:root[data-dashboard-style] #app :is(th,td){font-variant-numeric:tabular-nums}
:root[data-dashboard-style] #app td.ent{font-weight:500}
:root[data-dashboard-style] #app tbody tr{transition:background-color .15s ease}
:root[data-dashboard-style] #app .search-hit button{min-height:44px}
:root[data-dashboard-style] #app .filterbox input:focus{outline:2px solid color-mix(in srgb,var(--accent) 30%,transparent);border-color:var(--accent)}
:root[data-dashboard-style] #app :is(.thread,.sim-ctl){border-color:var(--line)}
:root[data-dashboard-style] .drawer{font-family:var(--dashboard-font);border-color:var(--line)}


/* Studio workspace with the approved floating sidebar. */
:root[data-dashboard-style="studio"]{
  --bg:#f4f6f8;--dash-bg:#f4f6f8;--surface:#fff;--surface-2:#f1f5f7;--sidebar:#152d3a;
  --ink:#132e3c;--ink-2:#405969;--muted:#687d8b;--accent:#087f8c;
  --line:#e0e6eb;--line-2:#cbd7df;--hair:#e9eef2;
  --seq-2:#b7d5de;--seq-3:#73afb9;--seq-4:#198c9b;
  --dash-rail:#152d3a;--dash-hover:#e5f1f3;--r:14px;
  --shadow:0 5px 15px -13px #1b354766,0 1px 2px #18334303;
  --studio-rail-ink:#dfedf1;--studio-rail-muted:#94acb8;--studio-rail-line:#2c4756;
}
:root[data-dashboard-style="studio"] #app .shell{grid-template-columns:260px minmax(0,1fr);gap:0;padding:0}
:root[data-dashboard-style="studio"] #app aside.rail{top:18px;height:calc(100dvh - 36px);margin:18px 12px;border:1px solid color-mix(in srgb,var(--studio-rail-line) 45%,transparent);border-radius:24px;padding:24px 12px 18px;background:var(--dash-rail);box-shadow:0 14px 30px -18px #1c45413b,0 2px 6px #1c454109;color:var(--studio-rail-ink);scrollbar-gutter:auto}
:root[data-dashboard-style="studio"] #app .side-brand{gap:12px;padding:0 3px 22px;margin-bottom:10px;border-color:var(--studio-rail-line)}
:root[data-dashboard-style="studio"] #app .side-brand img{filter:brightness(0) invert(1);width:46px;height:55px}
:root[data-dashboard-style="studio"] #app .side-brand .sb-t{color:var(--studio-rail-ink);font-size:13px}
:root[data-dashboard-style="studio"] #app .side-brand .sb-s{color:var(--studio-rail-muted);font-size:10px}
:root[data-dashboard-style="studio"] #app .nav-lbl{color:var(--studio-rail-muted);padding-bottom:14px}
:root[data-dashboard-style="studio"] #app .nav a{color:var(--studio-rail-ink);border-radius:13px;min-height:48px;padding:11px 12px;margin-bottom:8px;font-size:11.5px}
:root[data-dashboard-style="studio"] #app .nav a:hover{background:#213e4e;color:#fff}
:root[data-dashboard-style="studio"] #app .nav a.on{background:#0f7d8f;color:#fff;box-shadow:0 7px 14px -8px #0f7d8f80}
:root[data-dashboard-style="studio"] #app .nav a .ico{border-radius:7px;background:color-mix(in srgb,currentColor 7%,transparent)}
:root[data-dashboard-style="studio"] #app .side-foot{border-color:var(--studio-rail-line);color:var(--studio-rail-muted);font-size:10px}
:root[data-dashboard-style="studio"] #app .side-foot b{color:var(--studio-rail-ink)!important}
:root[data-dashboard-style="studio"] #app .rail .side-reset{background:#1e3948;color:var(--studio-rail-ink);border-color:var(--studio-rail-line);border-radius:12px}
:root[data-dashboard-style="studio"] #app .rail .side-reset:hover{background:#294959;color:#fff;border-color:#416271}
:root[data-dashboard-style="studio"] #app .topbar{border:1px solid var(--line);border-radius:18px;top:18px;margin:18px 16px 0;padding:12px 16px;gap:12px;min-height:68px;box-shadow:0 10px 24px -18px #1b354733;background:color-mix(in srgb,var(--surface) 96%,transparent)}
:root[data-dashboard-style="studio"] #app .searchbox{max-width:680px;min-width:0}
:root[data-dashboard-style="studio"] #app .searchbox input{height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2)}
:root[data-dashboard-style="studio"] #app .topbar .btn.ghost{min-height:42px;border-radius:11px}
:root[data-dashboard-style="studio"] #app #theme-btn{width:42px}
:root[data-dashboard-style="studio"] #app .who{gap:9px;white-space:nowrap;flex:none}
:root[data-dashboard-style="studio"] #app .who .av{width:38px;height:38px}
:root[data-dashboard-style="studio"] #app .btn.ghost{border-radius:8px}
:root[data-dashboard-style="studio"] #app .freshness{border:0;background:transparent;margin-inline-start:auto;white-space:nowrap;flex:none}
:root[data-dashboard-style="studio"] #app .page{padding:34px 32px 0;max-width:1530px}
:root[data-dashboard-style="studio"] #app .page-head{padding:0 0 25px;border-bottom:1px solid var(--line-2);margin-bottom:28px}
:root[data-dashboard-style="studio"] #app .page-head h2{font-size:34px;line-height:1.5;letter-spacing:-1.1px}
:root[data-dashboard-style="studio"] #app .page-head p{font-size:12.5px;margin-top:10px;line-height:2}
:root[data-dashboard-style="studio"] #app .kpis{gap:12px;margin-bottom:25px;grid-template-columns:repeat(auto-fit,minmax(145px,1fr))}
:root[data-dashboard-style="studio"] #app .kpi{padding:22px 20px 19px;border-radius:12px;border-color:var(--line);box-shadow:none;min-height:140px;border-top:3px solid var(--line-2)}
:root[data-dashboard-style="studio"] #app .kpi::before{display:none}
:root[data-dashboard-style="studio"] #app .kpi.hi{border-top-color:var(--fac)}
:root[data-dashboard-style="studio"] #app .kpi .kv{font-size:36px;letter-spacing:-1px;line-height:1.25}
:root[data-dashboard-style="studio"] #app .kpi .kl{font-size:11px;margin-top:12px}
:root[data-dashboard-style="studio"] #app .kpi .kd{font-size:10px;margin-top:8px}
:root[data-dashboard-style="studio"] #app #home-kpis .kpi:first-child{background:var(--surface);border-color:var(--line);border-top-color:var(--accent)}
:root[data-dashboard-style="studio"] #app #home-kpis .kpi:first-child .kv{color:var(--accent)}
:root[data-dashboard-style="studio"] #app .alert-strip{gap:12px;margin-bottom:25px}
:root[data-dashboard-style="studio"] #app .alert-card{padding:16px 20px;border-radius:10px;box-shadow:none;display:flex;align-items:center;gap:15px}
:root[data-dashboard-style="studio"] #app .alert-card .ac-n{font-size:27px;min-width:30px}
:root[data-dashboard-style="studio"] #app .alert-card .ac-l{margin:0;font-size:11px}
:root[data-dashboard-style="studio"] #app :is(.callout,.narr){padding:21px 24px;border-radius:12px;background:var(--surface);border-color:var(--line);border-inline-start:3px solid var(--accent);box-shadow:none;margin-bottom:24px}
:root[data-dashboard-style="studio"] #app :is(.callout h3,.narr h3){font-size:14px}
:root[data-dashboard-style="studio"] #app :is(.callout p,.narr p){font-size:12.5px;line-height:2.05}
:root[data-dashboard-style="studio"] #app .grid2,:root[data-dashboard-style="studio"] #app .grid3{gap:20px}
:root[data-dashboard-style="studio"] #app .panel{border-radius:14px;padding:25px 25px 21px;box-shadow:none;margin-bottom:20px}
:root[data-dashboard-style="studio"] #app .panel h3{font-size:15px}
:root[data-dashboard-style="studio"] #app .panel .p-note{font-size:11px;margin-bottom:25px}
:root[data-dashboard-style="studio"] #app .read{font-size:11.5px;padding-top:16px;margin-top:22px}
:root[data-dashboard-style="studio"] #app .tabs{border:0;border-bottom:1px solid var(--line-2);border-radius:0;background:none;padding:0;gap:16px;width:100%;margin-bottom:25px}
:root[data-dashboard-style="studio"] #app .tab{padding:10px 2px 12px;border-radius:0;border-bottom:2px solid transparent;background:none;color:var(--muted)}
:root[data-dashboard-style="studio"] #app .tab.on{background:none;color:var(--accent);border-bottom-color:var(--accent)}
:root[data-dashboard-style="studio"] #app .rcard{border-radius:13px;padding:24px;box-shadow:none}
:root[data-dashboard-style="studio"] #app .rcard .rc-ico{border-radius:9px;background:var(--surface-2)}
:root[data-dashboard-style="studio"] #app .rcard h4{font-size:15px}
:root[data-dashboard-style="studio"] #app .tbl-wrap{border-radius:8px}
:root[data-dashboard-style="studio"] #app thead th{background:var(--ink);color:var(--surface);padding:14px;font-size:11px}
:root[data-dashboard-style="studio"] #app tbody td{padding:14px;font-size:12px}
:root[data-dashboard-style="studio"] #app tbody td.ent{font-weight:700}


/* Dark palettes retain the same hierarchy and semantic chart colours. */
:root[data-dashboard-style][data-theme="dark"]{
  --theme-moon:none;--theme-sun:block;--dash-brand-filter:brightness(0) invert(1);
  --good:#85c6aa;--warn:#dcbd82;--crit:#eb9a98;
  --fac:#d9b275;--nonfac:#80b4d6;--violet:#b6a2d6;--teal:#74c1c4;
  --shadow:0 9px 24px -17px #0006;
}
:root[data-dashboard-style="studio"][data-theme="dark"]{
  --bg:#111e29;--dash-bg:#111e29;--surface:#1c2d3a;--surface-2:#263b49;--sidebar:#10222e;
  --ink:#e4eff6;--ink-2:#bdcfdb;--muted:#92aebe;--accent:#70c7d0;
  --line:#314653;--line-2:#465e6e;--hair:#2b414e;
  --seq-2:#405f6d;--seq-3:#589fac;--seq-4:#75c5d0;
  --dash-rail:#10222e;--dash-hover:#2b4556;
}
:root[data-dashboard-style="studio"][data-theme="dark"] #app thead th{background:#2a4555;color:var(--ink)}
/* Touch layouts retain every navigation item and each report label. */
@media(max-width:1180px) and (min-width:1001px){
  :root[data-dashboard-style="studio"] #app .shell{grid-template-columns:260px minmax(0,1fr)}
  :root[data-dashboard-style="studio"] #app .topbar{padding:12px 14px;gap:9px}
  :root[data-dashboard-style="studio"] #app .page{padding:27px 22px 0}
  :root[data-dashboard-style] #app .kpis{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
  :root[data-dashboard-style] #app .kpi{padding-inline:17px}
  :root[data-dashboard-style] #app .kpi .kv{font-size:31px}
  :root[data-dashboard-style] #app .panel{padding-inline:21px}
}
@media(max-width:1000px){
  :root[data-dashboard-style] #app .shell{grid-template-columns:minmax(0,1fr);padding:16px;gap:16px}
  :root[data-dashboard-style] #app aside.rail{top:auto;position:static;height:auto;min-height:0;margin:0;padding:16px 18px;border-radius:20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px 20px}
  :root[data-dashboard-style] #app .side-brand{padding:0;border:0;margin:0;gap:12px}
  :root[data-dashboard-style] #app .side-brand img{width:36px;height:44px}
  :root[data-dashboard-style] #app .side-foot{grid-column:2;grid-row:1;padding:0;border:0;margin:0;font-size:9px}
  :root[data-dashboard-style] #app .side-reset{margin-top:6px;padding:5px 9px;min-height:30px;font-size:9px}
  :root[data-dashboard-style] #app .nav{display:flex;flex-wrap:wrap;gap:5px;padding-top:12px}
  :root[data-dashboard-style] #app .nav-lbl{padding:0 5px;font-size:9px}
  :root[data-dashboard-style] #app .nav a{min-height:40px;padding:8px 11px;margin:0;font-size:11px;gap:8px;border-radius:8px}
  :root[data-dashboard-style] #app .nav a .ico{width:19px;height:19px;font-size:12px}
  :root[data-dashboard-style="studio"] #app .nav{border-color:var(--studio-rail-line)}
  :root[data-dashboard-style="studio"] #app .topbar{padding:12px 14px;border:1px solid var(--line);border-radius:18px;top:10px}
  :root[data-dashboard-style="studio"] #app .page{padding:28px 2px 0}
  :root[data-dashboard-style] #app .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  :root[data-dashboard-style] #app .shell{padding:10px;gap:12px}
  :root[data-dashboard-style] #app aside.rail{padding:13px 12px;gap:12px;border-radius:18px}
  :root[data-dashboard-style] #app .side-brand{gap:9px}
  :root[data-dashboard-style] #app .side-brand img{width:32px;height:40px}
  :root[data-dashboard-style] #app .side-brand .sb-t{font-size:10.5px}
  :root[data-dashboard-style] #app .side-brand .sb-s{font-size:9px}
  :root[data-dashboard-style] #app .side-foot{max-width:100px;font-size:8px;line-height:1.8}
  :root[data-dashboard-style] #app .side-reset{min-height:32px;font-size:9px}
  :root[data-dashboard-style] #app .nav{gap:5px}
  :root[data-dashboard-style] #app .nav-lbl{flex-basis:100%;padding:0 3px 4px}
  :root[data-dashboard-style] #app .nav a{font-size:10px;min-height:40px;padding:8px 9px;gap:6px}
  :root[data-dashboard-style] #app .topbar{position:relative;top:0;padding:10px;gap:9px;border-radius:18px}
  :root[data-dashboard-style] #app .searchbox{min-width:0;flex-basis:100%;order:-1}
  :root[data-dashboard-style] #app .searchbox input{height:42px;font-size:16px}
  :root[data-dashboard-style] #app .who .av{width:28px;height:28px;border-radius:8px;font-size:11px}
  :root[data-dashboard-style] #app .who .wt b{font-size:10px}
  :root[data-dashboard-style] #app .who .wt span{font-size:8px}
  :root[data-dashboard-style] #app .freshness{font-size:8px;padding:5px 6px;gap:4px}
  :root[data-dashboard-style] #app .top-actions{gap:5px}
  :root[data-dashboard-style] #app .top-actions .btn.ghost{min-height:36px;font-size:10px;padding:5px 8px}
  :root[data-dashboard-style] #app #theme-btn{width:36px;padding:0}
  :root[data-dashboard-style] #app .page{padding:23px 1px 0}
  :root[data-dashboard-style] #app .page-head{margin-bottom:20px;padding-inline:0}
  :root[data-dashboard-style] #app .page-head h2{font-size:25px;letter-spacing:-.4px}
  :root[data-dashboard-style="studio"] #app .page-head{padding-bottom:19px}
  :root[data-dashboard-style="studio"] #app .page-head h2{font-size:28px}
  :root[data-dashboard-style] #app .page-head p{font-size:11.5px;line-height:2;margin-top:7px}
  :root[data-dashboard-style] #app .kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
  :root[data-dashboard-style] #app .kpi{padding:19px 16px 17px;min-height:124px;border-radius:14px}
  :root[data-dashboard-style] #app .kpi .kv{font-size:30px}
  :root[data-dashboard-style] #app .kpi .kl{font-size:10.5px;margin-top:9px}
  :root[data-dashboard-style] #app .kpi .kd{font-size:9px;margin-top:6px}
  :root[data-dashboard-style] #app .alert-strip{grid-template-columns:minmax(0,1fr);gap:9px;margin-bottom:17px}
  :root[data-dashboard-style] #app .alert-card{padding:12px 17px;border-radius:10px;gap:15px}
  :root[data-dashboard-style] #app .alert-card .ac-n{font-size:23px}
  :root[data-dashboard-style] #app .alert-card .ac-l{font-size:11px}
  :root[data-dashboard-style] #app :is(.callout,.narr){padding:18px;border-radius:13px;margin-bottom:18px}
  :root[data-dashboard-style] #app :is(.callout p,.narr p){font-size:11.8px;line-height:2.05}
  :root[data-dashboard-style] #app .grid2,:root[data-dashboard-style] #app .grid3,:root[data-dashboard-style] #app .gallery{grid-template-columns:minmax(0,1fr);gap:0}
  :root[data-dashboard-style] #app .panel{padding:21px 18px 18px;border-radius:15px;margin-bottom:15px}
  :root[data-dashboard-style] #app .panel h3{font-size:13.5px}
  :root[data-dashboard-style] #app .panel .p-note{font-size:10.5px;margin-bottom:21px}
  :root[data-dashboard-style] #app .read{font-size:11px;margin-top:18px;padding-top:14px}
  :root[data-dashboard-style] #app .rcard{padding:22px;border-radius:14px;margin-bottom:15px}
  :root[data-dashboard-style] #app .rcard h4{font-size:14px}
  :root[data-dashboard-style] #app .rcard p{font-size:11.5px}
  :root[data-dashboard-style] #app .tabs{gap:4px;max-width:100%}
  :root[data-dashboard-style] #app .tab{font-size:10px;padding:9px 10px;min-height:38px}
  :root[data-dashboard-style="studio"] #app .tabs{gap:12px}
  :root[data-dashboard-style="studio"] #app .tab{padding-inline:1px}
  :root[data-dashboard-style] #app .filterbox input{font-size:16px;min-height:42px}
  :root[data-dashboard-style] #app :is(thead th,tbody td){padding:12px;font-size:11px}
  :root[data-dashboard-style] #app .sim{grid-template-columns:minmax(0,1fr)}
}
@media(hover:hover) and (pointer:fine){
  :root[data-dashboard-style] #app .nav a:not(.on):hover{transform:translateX(-2px)}
  :root[data-dashboard-style] #app :is(.rcard,.alert-card):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));box-shadow:0 10px 22px -18px color-mix(in srgb,var(--accent) 70%,transparent)}
  :root[data-dashboard-style] #app .kpi:hover{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
  }
/* The overview is read repeatedly: keep secondary labels legible at desktop size. */
@media(min-width:641px){
  :root[data-dashboard-style] #app .nav a{font-size:12.5px}
  :root[data-dashboard-style] #app .page-head p{font-size:13px}
  :root[data-dashboard-style] #app .kpi .kv{font-size:32px}
  :root[data-dashboard-style] #app .kpi .kl{font-size:12px}
  :root[data-dashboard-style] #app .kpi .kd{font-size:11px}
  :root[data-dashboard-style] #app .panel h3{font-size:15px}
  :root[data-dashboard-style] #app .panel .p-note{font-size:12px}
  :root[data-dashboard-style] #app :is(.callout p,.narr p,.read,.rcard p){font-size:13px}
  :root[data-dashboard-style] #app :is(.stack-legend,.hbar .hb-top){font-size:12px}
  :root[data-dashboard-style] #app .alert-card .ac-l{font-size:12px}
  :root[data-dashboard-style] #app thead th{font-size:12px}
  :root[data-dashboard-style] #app tbody td{font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  :root[data-dashboard-style] #app *,
  :root[data-dashboard-style] #app *::before,
  :root[data-dashboard-style] #app *::after,
  :root[data-dashboard-style] .drawer{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  :root[data-dashboard-style] #app :is(.nav a,.rcard,.alert-card):hover,
  :root[data-dashboard-style] #app :is(.nav a,.tab,.btn,.fchips button,.rcard,.alert-card):active{transform:none}
}

/* Follow system appearance until the user chooses a saved theme. */
@media(prefers-color-scheme:dark){
:root[data-dashboard-style="studio"]:not([data-theme]){
  --theme-moon:none;--theme-sun:block;--dash-brand-filter:brightness(0) invert(1);
  --good:#85c6aa;--warn:#dcbd82;--crit:#eb9a98;
  --fac:#d9b275;--nonfac:#80b4d6;--violet:#b6a2d6;--teal:#74c1c4;
  --shadow:0 9px 24px -17px #0006;

  --bg:#111e29;--dash-bg:#111e29;--surface:#1c2d3a;--surface-2:#263b49;--sidebar:#10222e;
  --ink:#e4eff6;--ink-2:#bdcfdb;--muted:#92aebe;--accent:#70c7d0;
  --line:#314653;--line-2:#465e6e;--hair:#2b414e;
  --seq-2:#405f6d;--seq-3:#589fac;--seq-4:#75c5d0;
  --dash-rail:#10222e;--dash-hover:#2b4556;
}
:root[data-dashboard-style="studio"]:not([data-theme]) #app thead th{background:#2a4555;color:var(--ink)}
}

/* The toolbar is a sibling of the rail and main report, so mobile order is natural. */
:root[data-dashboard-style="studio"] #app .shell{
  grid-template-areas:"rail toolbar" "rail content";
  grid-template-rows:auto 1fr;
}
:root[data-dashboard-style="studio"] #app .shell > .topbar{grid-area:toolbar;align-self:start}
:root[data-dashboard-style="studio"] #app .shell > aside.rail{grid-area:rail}
:root[data-dashboard-style="studio"] #app .shell > main{grid-area:content}
@media(min-width:1001px) and (max-height:760px){
  :root[data-dashboard-style="studio"] #app aside.rail{padding:18px 12px 14px}
  :root[data-dashboard-style="studio"] #app .side-brand{padding-bottom:16px;margin-bottom:6px}
  :root[data-dashboard-style="studio"] #app .nav-lbl{padding:8px 12px 10px}
  :root[data-dashboard-style="studio"] #app .nav a{min-height:44px;padding:9px 12px;margin-bottom:5px}
  :root[data-dashboard-style="studio"] #app .side-foot{padding-top:12px}
  :root[data-dashboard-style="studio"] #app .side-reset{min-height:34px;margin-top:8px;padding:6px 10px}
}
@media(max-width:1000px){
  :root[data-dashboard-style="studio"] #app .shell{
    grid-template-areas:"toolbar" "rail" "content";
    grid-template-rows:auto auto 1fr;
  }
  :root[data-dashboard-style="studio"] #app .shell > .topbar{position:relative;top:0;margin:0}
  :root[data-dashboard-style="studio"] #app .page{padding-top:12px}
}
@media(max-width:640px){
  :root[data-dashboard-style="studio"] #app .topbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:"search search" "profile actions" "freshness freshness";
    gap:10px 12px;padding:12px;
  }
  :root[data-dashboard-style="studio"] #app .searchbox{grid-area:search;max-width:none;width:100%}
  :root[data-dashboard-style="studio"] #app .who{grid-area:profile;margin:0}
  :root[data-dashboard-style="studio"] #app .top-actions{grid-area:actions;gap:8px}
  :root[data-dashboard-style="studio"] #app .top-actions .btn.ghost{min-height:44px}
  :root[data-dashboard-style="studio"] #app #theme-btn{width:44px}
  :root[data-dashboard-style="studio"] #app .freshness{grid-area:freshness;justify-self:start;margin:0;padding:0;font-size:9px}
  :root[data-dashboard-style="studio"] #app .who .wt b{font-size:12px}
  :root[data-dashboard-style="studio"] #app .who .wt span{font-size:10px}
  :root[data-dashboard-style="studio"] #app .who .av{width:34px;height:34px}
}