/* Mississippi Impaired Driving — design system (one file, one shell, four portal skins) */
:root{
  --sfst:#176b98;--sfst-dk:#0e5b86;--sfst-soft:#e7f2f8;
  --aride:#b97813;--aride-dk:#7b4a09;--aride-soft:#fff3dc;
  --dre:#6b3fa0;--dre-dk:#583285;--dre-soft:#f1e9f8;
  --admin:#1f7a63;--admin-dk:#155a48;--admin-soft:#e6f5ee;
  --navy:#0f3555;--text:#17283a;--muted:#6f7f8e;--border:#dce3e8;--light:#f5f7f9;--bg:#eef2f5;--card:#fff;
  --red:#b74141;--red-soft:#fbeaea;--green:#27885e;--green-soft:#e6f5ee;--amber:#b97813;--amber-soft:#fff2db;
  --p:var(--navy);--p-dk:#0a2540;--p-soft:#e7eef5;
  --r:10px;--shadow:0 1px 2px rgba(15,40,70,.06),0 4px 14px rgba(15,40,70,.05);--side:250px;
}
body[data-portal=sfst]{--p:var(--sfst);--p-dk:var(--sfst-dk);--p-soft:var(--sfst-soft)}
body[data-portal=aride]{--p:var(--aride);--p-dk:var(--aride-dk);--p-soft:var(--aride-soft)}
body[data-portal=dre]{--p:var(--dre);--p-dk:var(--dre-dk);--p-soft:var(--dre-soft)}
body[data-portal=admin]{--p:var(--admin);--p-dk:var(--admin-dk);--p-soft:var(--admin-soft)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}
body{font:14px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;color:var(--text);background:var(--bg)}
a{color:var(--p);text-decoration:none}a:hover{text-decoration:underline}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.01em}h1{font-size:24px}h2{font-size:17px}h3{font-size:14px}
.muted{color:var(--muted)}.small{font-size:12px}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--p);font-weight:700}
.btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:#fff;color:var(--text);padding:7px 12px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;white-space:nowrap}
.btn:hover{background:var(--light);text-decoration:none}.btn.primary{background:var(--p);border-color:var(--p);color:#fff}.btn.primary:hover{background:var(--p-dk)}
.btn.danger{color:var(--red);border-color:#e8c4c4}.btn.sm{padding:4px 9px;font-size:12px}.btn.ghost{border-color:transparent;background:transparent}
.chip{display:inline-block;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--light);color:var(--muted);white-space:nowrap}
.chip.ok{background:var(--green-soft);color:var(--green)}.chip.warn{background:var(--amber-soft);color:#8a5a0c}.chip.bad{background:var(--red-soft);color:var(--red)}.chip.p{background:var(--p-soft);color:var(--p-dk)}
.chip.sfst{background:var(--sfst-soft);color:var(--sfst-dk)}.chip.aride{background:var(--aride-soft);color:var(--aride-dk)}.chip.dre{background:var(--dre-soft);color:var(--dre-dk)}.chip.admin{background:var(--admin-soft);color:var(--admin-dk)}
.card{background:var(--card);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow)}
.card>.hd{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border)}
.card>.bd{padding:14px 16px}.card>.ft{padding:10px 16px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:8px}
.grid{display:grid;gap:14px;align-items:start;align-content:start}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g2,.g3,.g4{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:13px}th{text-align:left;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:8px 10px;border-bottom:1px solid var(--border);background:var(--light);white-space:nowrap}
td{padding:8px 10px;border-bottom:1px solid #edf1f4;vertical-align:middle}tr.row,tr[data-href]{cursor:pointer}tr.row:hover td,tr[data-href]:hover td{background:var(--p-soft)}tr[data-href]:hover td strong,tr[data-href]:hover td b{color:var(--p-dk)}
.stat{padding:14px 16px}.stat .v{font-size:26px;font-weight:800;line-height:1.1}.stat .l{font-size:12px;color:var(--muted);margin-top:2px}.stat.accent{border-top:3px solid var(--p)}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.toolbar .sp{flex:1}
input,select,textarea{font:inherit;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 10px;background:#fff;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--p-soft);border-color:var(--p)}
label{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}label input,label select,label textarea{margin-top:4px;font-size:14px;text-transform:none;letter-spacing:0}
.field{margin-bottom:10px}.field .val{font-size:14px}
.ph{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}.ph p{margin:4px 0 0;color:var(--muted)}
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:14px;overflow:auto}.tabs a{padding:9px 12px;font-weight:600;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}.tabs a.on{color:var(--p);border-color:var(--p)}
.list .it{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #edf1f4}.list .it:last-child{border:0}
.dot{width:8px;height:8px;border-radius:50%;background:var(--p);flex:none}.dot.bad{background:var(--red)}.dot.warn{background:var(--amber)}.dot.ok{background:var(--green)}
.empty{padding:24px;text-align:center;color:var(--muted)}
.flash{padding:10px 14px;border-radius:8px;margin-bottom:12px;background:var(--p-soft);border:1px solid var(--border)}.flash.error{background:var(--red-soft);color:var(--red)}.flash.success{background:var(--green-soft);color:var(--green)}.flash.warning{background:var(--amber-soft)}
.pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;padding:10px 0 0;font-size:12px;color:var(--muted)}
/* shell */
.shell{display:grid;grid-template-columns:var(--side) minmax(0,1fr);min-height:100vh}
.side{background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.brand{display:flex;gap:10px;align-items:center;padding:14px 14px 10px;color:var(--text)}.brand:hover{text-decoration:none}.brand img{width:38px;height:38px;object-fit:contain}.brand b{display:block;font-size:14px}.brand small{color:var(--muted);font-size:11px}
.switch{margin:4px 12px 10px;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;background:var(--light);padding:4px;border-radius:9px}
.switch a,.switch span{text-align:center;font-size:11px;font-weight:800;padding:6px 0;border-radius:6px;color:var(--muted)}.switch a:hover{text-decoration:none;color:var(--text)}
.switch a.on{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.12)}.switch a.on[data-portal=sfst]{color:var(--sfst)}.switch a.on[data-portal=aride]{color:var(--aride)}.switch a.on[data-portal=dre]{color:var(--dre)}.switch a.on[data-portal=admin]{color:var(--admin)}.switch .off{opacity:.35}
.nav{padding:4px 8px;flex:1}.nav .grp{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px;font-weight:700}
.nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:var(--text);font-weight:600}.nav a:hover{background:var(--light);text-decoration:none}
.nav a.on{background:var(--p-soft);color:var(--p-dk)}.nav a .n{margin-left:auto;background:var(--p);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px}.nav a .ic{width:18px;text-align:center;opacity:.7}
.me{border-top:1px solid var(--border);padding:12px 14px;display:flex;gap:10px;align-items:center}.av{width:34px;height:34px;border-radius:50%;background:var(--p);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:none;text-transform:uppercase}
.me .who{flex:1;min-width:0}.me .who b{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.me .who small{color:var(--muted)}
.me .menu{position:relative}.me .menu summary{list-style:none;cursor:pointer;padding:4px 8px;border-radius:6px}.me .menu summary::-webkit-details-marker{display:none}.me .menu summary:hover{background:var(--light)}
.me .menu div{position:absolute;bottom:32px;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow);min-width:160px;padding:6px}.me .menu a,.me .menu button{display:block;width:100%;text-align:left;padding:8px 10px;border:0;background:none;font:inherit;color:var(--text);border-radius:6px;cursor:pointer}.me .menu a:hover,.me .menu button:hover{background:var(--light);text-decoration:none}
.top{display:flex;align-items:center;gap:12px;padding:10px 24px;background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:5}.top .crumbs{color:var(--muted);font-size:13px}.top .crumbs b{color:var(--text)}.top .sp{flex:1}
.menu-btn{display:none;border:0;background:none;font-size:20px;cursor:pointer}
.main{padding:22px 24px 40px;max-width:1400px}
@media(max-width:900px){.shell{grid-template-columns:1fr}.side{position:fixed;left:-100%;width:280px;z-index:20;transition:left .2s}.side.open{left:0}.menu-btn{display:block}.main{padding:16px}}
/* login */
.login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(160deg,#0f3555,#1a5a7a)}
.login{width:min(420px,100%);padding:28px;text-align:center}.login .logo{width:88px;margin:0 auto 10px;display:block}.login label{text-align:left;margin-top:14px}.login .btn{width:100%;justify-content:center;margin-top:16px}
.form{padding:20px;max-width:560px}
/* home */
.home{max-width:1100px;margin:20px auto;text-align:center}.home .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:22px;text-align:left}@media(max-width:900px){.home .cards{grid-template-columns:1fr}}
.home .pc{display:block;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;border-top:4px solid var(--c);color:var(--text);box-shadow:var(--shadow)}.home .pc:hover{text-decoration:none;transform:translateY(-2px)}.home .pc img{width:90px;height:90px;display:block;margin:0 auto 10px;object-fit:contain}
.home .pc[data-portal=sfst]{--c:var(--sfst)}.home .pc[data-portal=aride]{--c:var(--aride)}.home .pc[data-portal=dre]{--c:var(--dre)}
.home .pc .eb{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--c);font-weight:700}.home .pc h2{font-size:20px;margin:2px 0 6px}.home .pc b{color:var(--c)}.home .pc.off{opacity:.45;pointer-events:none}
.home .admin-card{display:flex;align-items:center;gap:14px;margin-top:16px;text-align:left;border-left:4px solid var(--admin);padding:16px 18px;color:var(--text)}.home .admin-card:hover{text-decoration:none}.home .admin-card>div{flex:1}.home .admin-card .eb{color:var(--admin);font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700}.home .admin-card .btn{background:var(--admin);border-color:var(--admin)}
  --sfst-soft:#12324a;--aride-soft:#3a2a10;--dre-soft:#2c1f45;--admin-soft:#10332a;--green-soft:#123527;--red-soft:#3a1c1c;--amber-soft:#3a2a10;
  --sfst:#4aa3d6;--aride:#e0a03c;--dre:#a684dc;--admin:#3fae8d;--sfst-dk:#7cc0e6;--aride-dk:#f0be6c;--dre-dk:#c6acf0;--admin-dk:#7fd3b8;--navy:#8fb3d9}
/* ---- collapsible sidebar ---- */
.side .collapse{position:absolute;right:-13px;top:18px;width:26px;height:26px;border-radius:50%;border:1px solid var(--border);background:var(--card);color:var(--muted);cursor:pointer;font-size:12px;display:flex;align-items:center;justify-content:center;z-index:6}
.side{overflow:visible}.side .scroll{overflow:auto;flex:1;display:flex;flex-direction:column}
.shell.collapsed{grid-template-columns:64px minmax(0,1fr)}.shell.collapsed .brand span,.shell.collapsed .switch,.shell.collapsed .nav .grp,.shell.collapsed .nav a span:not(.ic),.shell.collapsed .nav a .n,.shell.collapsed .me .who,.shell.collapsed .me .menu{display:none}
.shell.collapsed .brand{justify-content:center;padding:14px 8px}.shell.collapsed .nav a{justify-content:center;padding:10px 0}.shell.collapsed .nav a .ic{width:auto;font-size:16px}.shell.collapsed .me{justify-content:center;padding:12px 8px}
.theme-btn{border:1px solid var(--border);background:var(--card);border-radius:999px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--muted)}
@media(max-width:900px){.side .collapse{display:none}}
/* checkbox rendered as a switch */
.access-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);text-transform:none;letter-spacing:0;font-size:14px;color:var(--text);margin:0;cursor:pointer}.access-row:last-child{border:0}.access-row small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.switch-wrap{position:relative;width:38px;height:22px;flex:none}.switch-wrap input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}.switch-wrap i{position:absolute;inset:0;border-radius:999px;background:#c9d2da;transition:.15s}.switch-wrap i::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:.15s}.switch-wrap input:checked+i{background:var(--green)}.switch-wrap input:checked+i::after{left:19px}
.rowbtns{display:flex;gap:6px;flex-wrap:wrap}.rowbtns form{display:inline}.inline{display:inline}
a.card{color:var(--text);display:block}a.card:hover{text-decoration:none;border-color:var(--p)}.list a.it{color:var(--text)}.list a.it:hover{text-decoration:none;background:var(--light)}
/* ---- portal-colored sidebar (matches the original portals: blue SFST, gold ARIDE, purple DRE, green Admin) ---- */
body[data-portal=sfst] .side,body[data-portal=aride] .side,body[data-portal=dre] .side,body[data-portal=admin] .side{background:var(--p-dk);border-right-color:transparent;color:#fff}
body:not([data-portal=home]) .side .brand,body:not([data-portal=home]) .side .brand b{color:#fff}body:not([data-portal=home]) .side .brand small{color:rgba(255,255,255,.7)}
body:not([data-portal=home]) .side .switch{background:rgba(0,0,0,.25)}body:not([data-portal=home]) .side .switch a,body:not([data-portal=home]) .side .switch span{color:rgba(255,255,255,.7)}body:not([data-portal=home]) .side .switch a.on{background:#fff;color:var(--p-dk)!important}
body:not([data-portal=home]) .side .nav .grp{color:rgba(255,255,255,.55)}body:not([data-portal=home]) .side .nav a{color:#fff}body:not([data-portal=home]) .side .nav a:hover{background:rgba(255,255,255,.12)}
body:not([data-portal=home]) .side .nav a.on{background:#fff;color:var(--p-dk)}body:not([data-portal=home]) .side .nav a .n{background:#fff;color:var(--p-dk)}body:not([data-portal=home]) .side .nav a.on .n{background:var(--p-dk);color:#fff}
body:not([data-portal=home]) .side .me{border-top-color:rgba(255,255,255,.2)}body:not([data-portal=home]) .side .me .who small{color:rgba(255,255,255,.7)}body:not([data-portal=home]) .side .av{background:#fff;color:var(--p-dk)}
body:not([data-portal=home]) .side .me .menu summary{color:#fff}body:not([data-portal=home]) .side .me .menu summary:hover{background:rgba(255,255,255,.15)}
/* collapse handle: larger, centered on the sidebar edge */
.side .collapse{top:50%;transform:translateY(-50%);width:34px;height:34px;right:-17px;font-size:18px;font-weight:700;background:var(--p);color:#fff;border:2px solid var(--bg);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.side .collapse:hover{filter:brightness(1.1)}
.seal-ic{width:22px;height:22px;object-fit:contain}
/* home cards follow the theme */
.home .pc{background:var(--card)}.home .pc.off{opacity:.5}
.home-ann .ann{padding:10px 0;border-bottom:1px solid var(--border)}.home-ann .ann:last-child{border:0}.home-ann .ann p{margin:4px 0 0;color:var(--text)}
.me .menu summary{font-size:26px;line-height:1;padding:8px 11px;border-radius:8px}
.top .back{margin-right:4px}
/* clickable cards: visible edge + hover lift, both themes */
a.card,.card[onclick],.home .pc{transition:transform .12s,border-color .12s,box-shadow .12s}
a.card:hover,.home .pc:hover{border-color:var(--p);box-shadow:0 6px 18px rgba(0,0,0,.18);transform:translateY(-2px)}
a.card{border-left:4px solid var(--p)}
/* clearer card edges in dark mode */
.grid.g2[style*="stretch"] a.card{display:flex;flex-direction:column}
.home .cards{margin-bottom:22px}.home .admin-card{margin-top:22px}
/* card grids: clickable tiles stretch to the tallest in their row; stat rows keep a gap below */
.main > .grid.g4{margin-bottom:16px}
.grid > a.card{align-self:stretch;height:100%}
/* collapse handle pinned to the viewport: always mid-screen on the sidebar edge */
.side .collapse{position:fixed;top:50vh;left:calc(var(--side) - 17px);right:auto;transform:translateY(-50%);z-index:30}
.shell.collapsed .side .collapse{left:calc(64px - 17px)}
/* floating sidebar tooltip */
.side-tip{position:fixed;transform:translateY(-50%);background:#0f1b2a;color:#fff;padding:6px 10px;border-radius:6px;font-size:13px;font-weight:600;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.3);z-index:80;pointer-events:none;opacity:0;transition:opacity .1s}
.side-tip::before{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#0f1b2a}
.side-tip.on{opacity:1}
.toolbar select,.toolbar input:not([type=checkbox]){width:auto}.toolbar .search{flex:1;min-width:220px;max-width:420px}

/* checkbox / radio lists rendered by Django's CheckboxSelectMultiple */
.checks{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:2px 12px;max-height:260px;overflow:auto;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.checks>div{display:contents}.checks label{display:flex;align-items:center;gap:8px;text-transform:none;letter-spacing:0;font-size:13px;font-weight:500;color:var(--text);margin:0;padding:4px 0;cursor:pointer}
.checks input[type=checkbox],.checks input[type=radio]{width:auto;margin:0;flex:none}
.field .checks{margin-top:4px}
.access-row>span:first-child{flex:1;min-width:0}

/* list cards: breathing room, a filter box in the header and a footer with count + rows + pages */
.card>.bd{padding:16px 20px}.card>.hd{padding:14px 20px}.card>.ft{padding:12px 20px}
.card>.bd.flush{padding:0}
th{padding:11px 14px}td{padding:11px 14px}
.card th:first-child,.card td:first-child,.panel th:first-child,.panel td:first-child{padding-left:20px}
.card th:last-child,.card td:last-child,.panel th:last-child,.panel td:last-child{padding-right:20px}
.card-filter{width:min(320px,100%);padding:7px 12px;border:1px solid var(--border);border-radius:8px;background:var(--bg);color:var(--text);font-size:13px}
.card-filter:focus{outline:2px solid var(--p-soft);border-color:var(--p)}
.hd .card-filter,.panel-heading .card-filter,.admin-list-heading .card-filter{margin-left:auto}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:12px 20px;border-top:1px solid var(--border);font-size:13px;color:var(--muted)}
.card-foot b{color:var(--text)}.foot-nav{display:flex;align-items:center;gap:10px}
.foot-nav .rows-form label{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:12px;text-transform:none;letter-spacing:0;font-weight:600;color:var(--muted)}
.foot-nav .rows-form select{width:auto;padding:4px 8px;margin:0;font-size:13px}
.foot-page{font-weight:700;color:var(--text);padding:0 4px}.foot-nav .btn[aria-disabled=true]{opacity:.45;pointer-events:none}
.panel:has(>.card-foot){padding-bottom:0}.panel>.card-foot{margin:18px -24px 0;border-radius:0 0 13px 13px}
.panel th:first-child,.panel td:first-child{padding-left:14px}.panel th:last-child,.panel td:last-child{padding-right:14px}
.main{min-width:0}

/* sortable / resizable headers */
th.col{position:relative;user-select:none}th.sortable{cursor:pointer}th.sortable:hover{color:var(--text)}
th.sortable::after{content:"↕";margin-left:6px;opacity:.35;font-size:10px}th.sorted[data-dir=asc]::after{content:"▲";opacity:1;color:var(--p)}th.sorted[data-dir=desc]::after{content:"▼";opacity:1;color:var(--p)}
.col-grip{position:absolute;top:0;right:-3px;width:7px;height:100%;cursor:col-resize;z-index:1}.col-grip:hover,.col-resizing .col-grip{background:var(--p-soft)}
body.col-resizing{cursor:col-resize;user-select:none}

/* row action menus */
.act-cell{text-align:right;white-space:nowrap;width:1%}th.action-header{text-align:right}
.act-btn{width:32px;height:28px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;padding:0}
.act-btn:hover,.act-btn.on{background:var(--p-soft);color:var(--p);border-color:var(--p)}
.act-menu{position:absolute;display:none;min-width:180px;padding:6px;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);z-index:60;flex-direction:column;gap:2px}
.act-menu.on{display:flex}
.act-menu form{margin:0;display:block}
.act-menu .btn,.act-menu button{display:flex;width:100%;justify-content:flex-start;text-align:left;border:0;background:transparent;box-shadow:none;padding:8px 12px;border-radius:7px;font-size:13px;font-weight:600;color:var(--text);cursor:pointer;margin:0}
.act-menu .btn:hover,.act-menu button:hover{background:var(--p-soft);color:var(--p)}
.act-menu .btn.primary{color:var(--p)}.act-menu .btn.danger,.act-menu button.danger{color:var(--red)}
.act-menu .btn[disabled],.act-menu button[disabled]{opacity:.5;cursor:not-allowed}

/* tokens the carried-over rules in forms.css rely on */
:root{--desktop-card-padding:20px;--desktop-section-gap:16px;--gold:#d5a238;--purple:#6f42a1;--row-action-accent:var(--p);--portal-font:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif}
/* cards and panels: consistent spacing between blocks and padding inside */
.main>.card,.main>.panel,.main>section,.main>.grid{margin-bottom:20px}.main>*:last-child{margin-bottom:0}
.evaluation-choice-grid{margin-bottom:20px}
a.card,a.card:hover,a.evaluation-choice-card,a.evaluation-choice-card:hover,a.evaluation-choice-card *{text-decoration:none}
.choice-icon.blue{background:var(--p-soft);color:var(--p)}
/* search box: icon + borderless input inside one bordered pill */
.search{display:flex;align-items:center;gap:6px;padding:0 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg)}
.search span{color:var(--muted);font-size:14px;flex:none}
.search input,.toolbar .search input:not([type=checkbox]){flex:1;width:100%;min-width:0;border:0;background:transparent;padding:7px 4px;outline:none;box-shadow:none}
.search:focus-within{border-color:var(--p);outline:2px solid var(--p-soft)}

/* type-ahead panels (replaces the browser datalist popup) */
.combo-panel{position:absolute;z-index:70;max-height:280px;overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:10px;box-shadow:0 12px 32px rgba(0,0,0,.18);padding:4px}
.combo-item{padding:8px 12px;border-radius:7px;font-size:14px;color:var(--text);cursor:pointer}
.combo-item b{color:var(--p)}.combo-item:hover,.combo-item.active{background:var(--p-soft);color:var(--p)}
.combo-input{background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:32px}
.combo-hidden{display:none!important}

/* filter toolbars folded from the older labelled grids */
.filter-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 12px}
.filter-toolbar .tb-field{margin:0;display:flex;align-items:center;gap:6px}
.filter-toolbar .tb-field>select,.filter-toolbar .tb-field>input:not([type=checkbox]){width:auto;min-width:150px;max-width:260px;padding:7px 10px}
.filter-toolbar .tb-inline-label{margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.filter-toolbar .search{flex:1;min-width:220px;max-width:420px}
.filter-toolbar .actions,.filter-toolbar .sfst-list-filter-actions,.filter-toolbar .rolling-log-filter-actions,.filter-toolbar .filter-actions{display:flex;gap:6px;margin:0;align-items:center}
.filter-toolbar .panel-heading{flex-basis:100%;margin:0 0 4px}
.filter-toolbar .rolling-filter-search,.filter-toolbar .sfst-filter-search{flex:1;min-width:220px}
.filter-toolbar .tb-field .combo-input{width:auto;min-width:180px}
.filter-toolbar>.actions,.filter-toolbar>[class*="actions"]{width:auto;flex:0 0 auto;grid-column:auto}
.combo-item.combo-clear{color:var(--muted);font-style:italic}
.rows-form .combo-input{width:84px;min-width:0}
form.filter-toolbar,form.filter-toolbar.form-grid,form.filter-toolbar.rolling-log-filter-grid,form.filter-toolbar.sfst-list-filter-grid,form.filter-toolbar.filter-form{display:flex!important;grid-template-columns:none;gap:8px;margin:0 0 12px}
form.filter-toolbar .actions{display:inline-flex;gap:6px;margin:0;width:auto;flex:0 0 auto;grid-column:auto;justify-content:flex-start}
form.filter-toolbar .actions .btn{margin:0}

/* filter bar: one height, one width rule, everywhere */
.toolbar,.filter-toolbar{--fh:38px}
.toolbar .search,.filter-toolbar .search{flex:1 1 260px;min-width:240px;max-width:380px;height:var(--fh);box-sizing:border-box}
.toolbar .search input,.filter-toolbar .search input{height:100%;padding:0 4px}
.toolbar>select,.toolbar>input:not([type=checkbox]),.toolbar .combo-input,.filter-toolbar .tb-field>select,.filter-toolbar .tb-field>input:not([type=checkbox]),.filter-toolbar .tb-field .combo-input{height:var(--fh);box-sizing:border-box;padding:0 30px 0 12px;min-width:150px;max-width:220px;width:auto;flex:0 1 auto}
.filter-toolbar .tb-field>input[type=date]{padding-right:10px;min-width:150px}
.toolbar .btn,.filter-toolbar .btn,.toolbar button,.filter-toolbar button{height:var(--fh);padding:0 14px;display:inline-flex;align-items:center}
.filter-toolbar .tb-field{flex:0 1 auto;max-width:none}
.filter-toolbar .rolling-filter-search,.filter-toolbar .sfst-filter-search{flex:1 1 260px;max-width:380px}
.filter-toolbar .rolling-filter-search .search,.filter-toolbar .sfst-filter-search .search{width:100%;max-width:none}
.hd.toolbar{padding:12px 20px}
.tb-actions{display:flex;gap:6px;align-items:center;margin-left:auto;flex:0 0 auto}
.tb-actions .muted,.tb-actions .small{margin-left:8px;white-space:nowrap}
.toolbar .sp{display:none}

/* action cell: fixed-size ⋯ button in every table, regardless of legacy row-action rules */
td.act-cell{width:64px;min-width:64px;padding:8px 14px 8px 8px!important;text-align:right;vertical-align:middle;white-space:nowrap}
td.act-cell.row-actions,td.act-cell .row-action-buttons{display:table-cell;position:static;flex:none;gap:0}
.act-btn,td.act-cell .act-btn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:28px;min-width:32px;max-width:32px;min-height:28px;max-height:28px;padding:0;margin:0;line-height:1;border-radius:8px;font-size:18px;vertical-align:middle;box-sizing:border-box}
th.action-header{width:64px;min-width:64px}
td.act-cell,td.act-cell.rowbtns,td.act-cell.row-actions{display:table-cell!important;height:auto;align-items:normal;justify-content:normal}
/* progress / requirement tiles: padding inside, like every other card */
.progress-card,.requirement-progress-card,.chart-card,.data-card{padding:16px 18px;box-sizing:border-box}
.progress-card .progress-heading{margin-bottom:10px;align-items:center}
.progress-card .progress-heading:last-child{margin-bottom:0}

/* program notes card: compact composer, inline options, button on the right, tidy empty state */
.program-note-form textarea{min-height:76px;max-height:200px;resize:vertical;margin:0}
.program-note-form .note-options{display:flex;align-items:center;gap:18px;margin-top:10px}
.program-note-form .note-options label{display:inline-flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:none;color:var(--muted);cursor:pointer}
.program-note-form .note-options input[type=checkbox]{width:15px;height:15px;margin:0;accent-color:var(--p)}
.program-note-form .note-options .btn{margin-left:auto}
.program-note-list{margin-top:16px}
.program-note-list:empty,.program-note-list>.empty,.program-note-list>p.muted{text-align:left;padding:14px 16px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);margin:0}
.panel.program-notes-panel>.program-note-list:last-child{padding-bottom:0}
.program-note-list>.empty-cell{text-align:left;padding:14px 16px;border:1px dashed var(--border);border-radius:10px;color:var(--muted);margin:0;background:transparent}
.program-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid var(--border);border-radius:10px;margin-bottom:10px}
.program-note-copy{flex:1;min-width:0}.program-note-copy p{margin:6px 0}.program-note-copy small{color:var(--muted)}
.program-note-actions.act-inline{flex:0 0 auto;display:flex}

/* report scope card: compact */
.state-report-filters{padding:18px 20px 16px!important}
.state-report-filter-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;padding:0}
.state-report-filter-heading h2{font-size:17px;margin:0}.state-report-filter-heading .eyebrow{margin-bottom:2px}.state-report-filter-heading p:not(.eyebrow){margin:2px 0 0;font-size:12px;color:var(--muted)}
.state-production-badge{font-size:11px;padding:4px 10px;white-space:nowrap}
.state-report-primary-filters,.state-filter-grid,.personal-report-filters .form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px 14px;padding:0;margin:0}
.state-report-filters .field{margin:0;min-width:0}
.state-report-filters .field label,.state-filter-grid label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;display:block}
.state-report-filters .form-control,.state-filter-grid .form-control,.state-report-filters .combo-input{min-height:36px;height:36px;padding:0 30px 0 10px;font-size:13px}
.state-report-filters .field small,.state-filter-grid small{font-size:11px;margin-top:3px;line-height:1.3}
.state-report-filters .field-help{font-size:11px;margin-top:3px}
.state-filter-emphasis{background:transparent;border:0;padding:0}
.state-report-filters details{margin:12px 0 0;padding:0}
.state-report-filters details>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--p);padding:8px 0;list-style:none;display:flex;align-items:center;gap:6px}
.state-report-filters details>summary::before{content:"▸";font-size:11px;transition:transform .15s}.state-report-filters details[open]>summary::before{transform:rotate(90deg)}
.state-report-filters details>summary::-webkit-details-marker{display:none}
.state-report-filters details .state-filter-section{margin:8px 0 0;padding:12px 0 0;border-top:1px solid var(--border)}
.state-report-filters details .state-filter-section h3,.state-report-filters details .state-filter-section .section-title{font-size:12px;margin:0 0 8px}
.state-report-filters .state-report-actions,.state-report-filters .report-filter-actions,.state-report-filters .actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;padding:12px 0 0;border-top:1px solid var(--border)}
@media(max-width:1100px){.state-report-primary-filters,.state-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.state-filter-emphasis,.state-filter-emphasis .form-control{background:transparent!important;border-color:var(--border)!important;box-shadow:none!important}
.state-filter-emphasis .form-control,.state-filter-emphasis .combo-input{background:var(--bg)!important}
.state-source-metrics a.source-tile{display:block;text-decoration:none;color:inherit;cursor:pointer;transition:transform .1s,box-shadow .1s}
.state-source-metrics a.source-tile:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12)}
.state-source-metrics a.source-tile.on{outline:2px solid var(--p);outline-offset:-2px}
.portal-only-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;background:var(--p-soft);color:var(--p);font-size:9.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;vertical-align:middle;cursor:help}
.source-coverage-note{margin:0 0 12px;padding:10px 14px;border-left:3px solid var(--p);background:var(--p-soft);border-radius:0 8px 8px 0;font-size:13px;line-height:1.45;color:var(--text)}
/* advanced filters: same compact grid as the scope row */
.phase146-more{margin:10px 0 0}
.phase146-more>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--p);padding:6px 0;list-style:none;display:flex;align-items:center;gap:6px}
.phase146-more>summary::-webkit-details-marker{display:none}.phase146-more>summary::before{content:"▸";font-size:11px;transition:transform .15s}.phase146-more[open]>summary::before{transform:rotate(90deg)}
/* collapsed "More filters" section used on report/workspace filter bars (compliance_results.html, state_reporting_dashboard.html, inservice/workspace.html, reports/report.html) alongside .compliance-filter-grid */
.workspace-more-filters{margin:10px 0 0}
.workspace-more-filters>summary{cursor:pointer;font-size:13px;font-weight:600;color:var(--p);padding:6px 0;list-style:none;display:flex;align-items:center;gap:6px}
.workspace-more-filters>summary::-webkit-details-marker{display:none}.workspace-more-filters>summary::before{content:"▸";font-size:11px;transition:transform .15s}.workspace-more-filters[open]>summary::before{transform:rotate(90deg)}
.workspace-more-filters .compliance-filter-grid{margin-top:10px}
.state-filter-group{margin:8px 0 0;padding:10px 0 0;border-top:1px solid var(--border)}
.state-filter-group-heading{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.state-filter-group-heading h3,.state-filter-group-heading strong{font-size:12.5px;margin:0;font-weight:700}
.state-filter-group-heading span,.state-filter-group-heading .step{width:18px;height:18px;font-size:10px;border-radius:50%;display:inline-grid;place-items:center;background:var(--p-soft);color:var(--p);font-weight:800}
.state-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px 14px}
.state-filter-grid .field{margin:0;min-width:0}
.state-filter-grid label,.state-filter-grid .field-label-row label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;display:block}
.state-filter-grid .field-label-row{margin-bottom:4px}
.state-filter-grid .form-control,.state-filter-grid .combo-input{min-height:34px;height:34px;padding:0 30px 0 10px;font-size:13px}
.state-filter-grid input[type=time],.state-filter-grid input[type=date],.state-filter-grid input[type=number]{padding-right:10px}
.state-filter-grid small{font-size:10.5px;margin-top:2px;line-height:1.3}
.state-report-filter-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:1100px){.state-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
#report-more-filters .state-filter-grid,.phase146-more .state-filter-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px 12px!important}
#report-more-filters .state-filter-group{margin:6px 0 0;padding:8px 0 0}
#report-more-filters .state-filter-group-heading{margin-bottom:6px}
#report-more-filters .form-control,#report-more-filters .combo-input{height:32px;min-height:32px;font-size:12.5px}
@media(max-width:1100px){#report-more-filters .state-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
/* my reports: advanced groups as tight as state reporting */
.personal-report-filter-section{margin:6px 0 0;padding:8px 0 0;border-top:1px solid var(--border)}
.personal-report-filter-section h3{font-size:12.5px;margin:0 0 6px;text-transform:none;letter-spacing:0}
.personal-report-filter-section .state-filter-grid,.personal-report-filter-section .form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px 12px!important}
.personal-report-filter-section .form-control,.personal-report-filter-section .combo-input{height:32px;min-height:32px;font-size:12.5px}
.personal-report-filter-section small,.personal-report-filter-section .field-help{font-size:10.5px;margin-top:2px}
.personal-report-filters .state-report-filter-actions{margin-top:10px;padding-top:10px}
@media(max-width:1100px){.personal-report-filter-section .state-filter-grid,.personal-report-filter-section .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.personal-report-filter-section{padding:8px 0 0!important}
.personal-report-filter-section h3{margin:0 0 6px!important}
.personal-report-filter-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px 12px!important}
.personal-report-filter-grid .form-control,.personal-report-filter-grid .combo-input,.personal-report-filter-grid input,.personal-report-filter-grid select{height:32px!important;min-height:32px!important;font-size:12.5px}
.personal-report-filter-grid label{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;display:block}
.personal-report-filter-grid small{font-size:10.5px;margin-top:2px;line-height:1.3}
@media(max-width:1100px){.personal-report-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
.phase146-basic-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px 12px!important}
.check-row{display:flex;align-items:flex-start;gap:10px;margin:14px 0;font-size:13px;text-transform:none;letter-spacing:0;color:var(--text);cursor:pointer}
.check-row input[type=checkbox]{width:16px;height:16px;margin:2px 0 0;flex:none;accent-color:var(--p)}
/* option rows (roles, toggles): text takes the room, control sits right */
.access-row>span:first-child{flex:1 1 auto;min-width:0;display:block}
.access-row>span:first-child b{font-weight:600;white-space:normal}
.access-row>input[type=radio],.access-row>input[type=checkbox]{width:16px;height:16px;margin:0;flex:none;accent-color:var(--p)}
.access-row .switch-wrap{flex:none}
/* edit forms: consistent rhythm */
.card>.bd .field{margin-bottom:12px}.card>.bd .field:last-child{margin-bottom:0}
.card>.bd .field label{margin-bottom:5px}
.card>.bd .field .field-help,.card>.bd .field small,.card>.bd .field .muted{font-size:12px;line-height:1.4;margin-top:4px;display:block}
.card>.bd textarea{min-height:64px}
.grid.g2>.card{margin-bottom:0}
/* record / edit pages: cards stack full width, one after another */
.stack{display:flex;flex-direction:column;gap:20px}
.stack>.card{margin:0;width:100%}
.stack>.card .bd .field{max-width:none}
.stack .grid.g2,.stack .g2{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px}
/* stacked edit cards: fields flow two-up; long ones span the row */
.stack>.card>.bd,.stack>.card>form.bd{display:grid;grid-template-columns:1fr 1fr;gap:4px 24px;align-items:start}
.stack>.card>.bd>.field,.stack>.card>form.bd>.field{margin-bottom:8px;min-width:0}
.stack>.card>.bd>.field:has(textarea),.stack>.card>.bd>.field:has(.checks),.stack>.card>.bd>.field:has(input[type=file]),.stack>.card>form.bd>.field:has(textarea),
.stack>.card>.bd>.flash,.stack>.card>.bd>.access-row,.stack>.card>.bd>p,.stack>.card>.bd>.check-row,.stack>.card>.bd>.ft,.stack>.card>form.bd>.ft,.stack>.card>.bd>.grid,.stack>.card>.bd>.stack-full,.stack>.card>.bd>.kv,.stack>.card>.bd>.table-wrap,.stack>.card>.bd>table,.stack>.card>.bd>div:not(.field){grid-column:1/-1}
.stack>.card>.bd>.field:has(input[list]),.stack>.card>.bd>.field:has(.combo-input){grid-column:auto}
@media(max-width:900px){.stack>.card>.bd,.stack>.card>form.bd{grid-template-columns:1fr}}
/* segmented No access / View / Manage control */
.seg{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;flex:none;background:var(--bg)}
.seg-opt{margin:0;display:block;text-transform:none;letter-spacing:0;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer}
.seg-opt input{position:absolute;opacity:0;width:0;height:0}
.seg-opt span{display:block;padding:6px 12px;border-right:1px solid var(--border)}
.seg-opt:last-child span{border-right:0}
.seg-opt input:checked+span{background:var(--p);color:#fff}
.seg-opt input:focus-visible+span{outline:2px solid var(--p-soft);outline-offset:-2px}
.seg-opt input:disabled+span{opacity:.5;cursor:not-allowed}
.module-row small{font-size:12px;color:var(--muted);display:block}

/* compact record/edit cards */
.stack{gap:14px}
.stack>.card>.hd{padding:10px 18px}.stack>.card>.hd h3{font-size:14px;margin:0}
.stack>.card>.bd,.stack>.card>form.bd{padding:12px 18px 14px;gap:2px 20px}
.stack>.card>.bd>.field,.stack>.card>form.bd>.field{margin-bottom:6px}
.stack .field label{margin-bottom:3px;font-size:10.5px}
.stack input:not([type=checkbox]):not([type=radio]),.stack select,.stack .combo-input{height:34px;min-height:34px;padding:0 30px 0 10px;font-size:13px}
.stack input[type=date],.stack input[type=time],.stack input[type=file]{padding-right:10px}
.stack input[type=file]{height:auto;padding:5px 10px}
.stack textarea{min-height:52px;padding:7px 10px;font-size:13px}
.stack .field .small.muted,.stack .field small,.stack .field .field-help{font-size:11px;margin-top:2px;line-height:1.3}
.stack .checks{max-height:none;padding:6px 10px;gap:0 12px}.stack .checks label{font-size:12.5px;padding:2px 0}
.stack .access-row{padding:6px 0}.stack .access-row>span:first-child b{font-size:13px}.stack .module-row small{font-size:11px}
.stack .seg-opt span{padding:4px 10px;font-size:11.5px}
.stack>.card>.ft{padding:10px 18px}
/* on-call notifications: three tight columns, county list scrolls */
.stack .field:has(#id_on_call_notification_counties) .checks,.stack .field:has([name=on_call_notification_counties]) .checks{grid-template-columns:repeat(4,1fr);max-height:150px;overflow:auto}
.stack .field:has([name=on_call_notification_channels]) .checks{grid-template-columns:repeat(4,1fr)}
.stack .field:has([name=on_call_dre_enabled]) .checks{padding:4px 10px}
.stack>.card>.bd.oncall-prefs{display:block}
.oncall-prefs .oncall-master{margin-bottom:8px}
.oncall-prefs .oncall-notification_channels .checks{grid-template-columns:repeat(4,max-content);gap:0 28px}
.oncall-prefs .oncall-notification_counties .checks{grid-template-columns:repeat(6,1fr);max-height:132px;overflow:auto}

/* legacy "program record" edit forms (in-service record etc.): compact sections, fields two-up */
.program-record-form .info-note{padding:10px 14px;font-size:12.5px;margin:0 0 12px}
.program-edit-section{display:grid;grid-template-columns:1fr 1fr;gap:4px 20px;margin:0;padding:12px 0 6px;border-top:1px solid var(--border)}
.program-edit-section:first-of-type{border-top:0;padding-top:0}
.program-edit-section-heading{grid-column:1/-1;margin:0 0 4px}
.program-edit-section-heading .eyebrow{margin:0 0 2px;font-size:10px}
.program-edit-section-heading h2{font-size:15px;margin:0}
.program-edit-section-heading p:not(.eyebrow){margin:2px 0 0;font-size:12px;color:var(--muted)}
.program-edit-section p.field{margin:0 0 8px;min-width:0}
.program-edit-section p.field label{font-size:10.5px;margin:0 0 3px}
.program-edit-section .form-control,.program-edit-section input:not([type=checkbox]),.program-edit-section select{height:34px;min-height:34px;padding:0 10px;font-size:13px;width:100%;box-sizing:border-box}
.program-edit-section textarea{min-height:60px;height:auto;padding:7px 10px;font-size:13px;width:100%;box-sizing:border-box}
.program-edit-section p.field:has(textarea),.program-edit-section .manual-completion-field{grid-column:1/-1}
.program-edit-section .field-help{font-size:11px;margin-top:2px;line-height:1.3;display:block}
.program-edit-section .manual-completion-control{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;font-size:13px;text-transform:none;letter-spacing:0;border-radius:8px}
.program-record-form>.actions{display:flex;justify-content:flex-end;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--border)}
@media(max-width:900px){.program-edit-section{grid-template-columns:1fr}}

/* dashboard stat tiles with icons */
.stat.tile{display:flex;align-items:center;gap:14px;text-decoration:none;color:inherit;padding:16px 18px}
.stat.tile:hover{border-color:var(--p);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.stat.tile .l{font-size:12.5px;font-weight:700;color:var(--text);margin:0}
.stat.tile .v{font-size:26px;font-weight:800;line-height:1.1;margin:2px 0}
.stat.tile .s{font-size:12px;color:var(--muted)}
.tile-ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;font-size:20px;font-weight:800}
.tile-ic.blue{background:#e6f2f8;color:#176385}.tile-ic.purple{background:var(--p-soft);color:var(--p)}.tile-ic.gold{background:#fdf1d6;color:#a8640b}.tile-ic.green{background:#e8f5ee;color:#25734e}
.status-strip{display:flex!important;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.status-main{display:flex;align-items:center;gap:12px;font-size:15px}
.status-orb{width:16px;height:16px;border-radius:50%;background:var(--muted);flex:none}.status-orb.green{background:#3fbf7f}.status-orb.gold{background:#e6b83a}.status-orb.red{background:#e05c5c}.status-orb.blue{background:var(--p)}
.status-strip .kv{display:grid;grid-template-columns:repeat(4,auto);gap:6px 28px}.status-strip .kv small{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}.status-strip .kv b{font-size:13.5px}

/* SFST performance evaluation (class check-off) */
.performance-checklist{display:grid;gap:10px;padding:0 18px 18px}
.performance-section-count{color:var(--muted);font-weight:700;white-space:nowrap;font-size:13px}
.performance-check-item{display:grid;grid-template-columns:26px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--border);border-radius:10px;background:var(--card);cursor:pointer;transition:border-color .15s,background .15s}
.performance-check-item:hover{border-color:var(--p)}
.performance-check-item.checked{border-color:var(--green);background:var(--green-soft)}
.performance-check-item input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--green)}
.performance-check-item span{display:grid;gap:4px;line-height:1.45}
.performance-check-item span strong{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--green)}
.performance-form-note{margin:0 18px 18px;padding:12px 14px;border-left:4px solid var(--amber);background:var(--amber-soft);border-radius:6px;font-size:13px}
.typed-signature{min-height:54px;padding:8px 12px;border-bottom:1px solid var(--text);font-family:"Brush Script MT","Segoe Script",cursive;font-size:30px;color:var(--text)}
.performance-signature-consent{display:flex;align-items:flex-start;gap:10px;margin:16px 0 0;padding:12px 14px;background:var(--light);border:1px solid var(--border);border-radius:10px;font-weight:600;font-size:13px;text-transform:none;letter-spacing:0}
.performance-signature-consent input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--p)}

/* Support conversation thread */
.support-thread{display:grid;gap:12px}
.support-message{padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--light)}
.support-message.admin{background:var(--p-soft);border-color:var(--p)}
.support-message-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:8px}
.support-message-body{line-height:1.5;white-space:pre-wrap}

/* MFA */
.mfa-card{width:min(560px,100%);text-align:left}.mfa-card .logo{margin-bottom:6px}.mfa-card h1{text-align:center}.mfa-card>.muted{text-align:center}
.mfa-choice{display:grid;gap:12px;margin-top:14px}.mfa-method{padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--light)}.mfa-method h2{font-size:15px;margin:0 0 4px;display:flex;align-items:center;gap:8px}
.mfa-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}.mfa-row .form-control{flex:1 1 140px;min-width:120px}.mfa-card .mfa-row .btn{width:auto;margin:0}
.mfa-enroll-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}.mfa-enroll-grid h3{margin:0 0 6px}
.mfa-qr{display:block;width:200px;height:200px;border:1px solid var(--border);border-radius:10px;background:#fff;padding:8px;margin:10px 0}
.secret-code{display:inline-block;padding:6px 10px;border-radius:6px;background:var(--light);border:1px solid var(--border);font-size:13px;letter-spacing:.08em;word-break:break-all}
.mfa-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}.mfa-option{padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--light)}.mfa-option h3{margin:0 0 6px}
.recovery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin:14px 0}.recovery-grid code{padding:10px 12px;border:1px solid var(--border);border-radius:8px;background:var(--light);font-size:15px;letter-spacing:.1em;text-align:center}
.bulk-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.bulk-select-cell{width:32px}.bulk-select-cell input{width:16px;height:16px;accent-color:var(--p)}
.pw-stack{display:grid;grid-template-columns:minmax(0,420px);gap:12px}.pw-stack .field{margin:0}
.written-report h3{color:var(--p);margin:18px 0 6px;font-size:16px}.written-report p{line-height:1.55;margin:0 0 8px}.written-report ul{margin:0 0 8px 18px;padding:0}.written-report li{margin:2px 0}.written-report li.sub{list-style:circle;margin-left:18px}
/* collapse control: a tab that is part of the sidebar ribbon, not a floating box */
.side .collapse{position:fixed;top:50vh;left:var(--side);right:auto;transform:translateY(-50%);width:22px;height:56px;border-radius:0 10px 10px 0;border:0;box-shadow:2px 0 6px rgba(0,0,0,.18);background:var(--p-dk);color:rgba(255,255,255,.85);font-size:15px;font-weight:700;z-index:30}
.side .collapse:hover{background:var(--p);color:#fff;filter:none}
.shell.collapsed .side .collapse{left:64px}
body[data-portal=home] .side .collapse{background:var(--card);color:var(--muted);box-shadow:2px 0 6px rgba(0,0,0,.12);border:1px solid var(--border);border-left:0}
body[data-portal=home] .side .collapse:hover{background:var(--light);color:var(--text)}
/* sidebar: brand + portal switcher pinned top, account pinned bottom, only the menu scrolls */
.side{height:100vh;overflow:hidden;display:flex;flex-direction:column;z-index:25}/* above .main so the fixed collapse tab is clickable */
.side .brand,.side .switch,.side .me{flex:none}
.side .scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.35) transparent}
body[data-portal=home] .side .scroll{scrollbar-color:var(--border) transparent}
.side .me{margin-top:auto}
/* 30 Name Sheet: compact candidate card */
.name-sheet-form .card-heading.compact{padding-bottom:6px}
.name-sheet-candidate-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px;padding:0 20px 18px}
.name-sheet-candidate-grid .field label{margin-bottom:4px}
.name-sheet-candidate-grid .form-control.static{background:var(--light);color:var(--text);font-weight:600;min-height:38px;display:flex;align-items:center}
.name-sheet-candidate-grid textarea{min-height:38px;height:38px;resize:vertical}
.name-sheet-candidate-grid .field.wide{grid-column:span 3}
@media(max-width:900px){.name-sheet-candidate-grid{grid-template-columns:1fr}.name-sheet-candidate-grid .field.wide{grid-column:span 1}}
.tabs a .n{display:inline-block;min-width:18px;padding:0 6px;border-radius:999px;background:var(--light);color:var(--muted);font-size:11px;text-align:center;margin-left:4px}.tabs a.on .n{background:var(--p);color:#fff}
/* page header: title block shrinks, action buttons stay on the right on desktop */
.ph>div:first-child{flex:1 1 320px;min-width:0}.ph>.rowbtns{flex:none;margin-left:auto}
@media(max-width:700px){.ph>.rowbtns{margin-left:0;width:100%}}
/* delete confirmation checkbox row: normal sentence, checkbox and text side by side */
.delete-confirm-check{display:flex;justify-content:flex-start;align-items:center;gap:12px;text-transform:none;letter-spacing:0;font-size:14px;font-weight:600;color:var(--text);cursor:pointer}
.delete-confirm-check input[type=checkbox]{width:18px;height:18px;margin:0;flex:none;accent-color:var(--red,#b42318)}
.delete-confirm-check span{flex:1;text-align:left}
/* brand block: fixed height on every portal so the switcher never shifts */
.side .brand{min-height:84px;box-sizing:border-box;align-items:center}
.side .brand span{display:flex;flex-direction:column;justify-content:center;min-width:0}
.side .brand small{display:block;line-height:1.3}
.shell.collapsed .side .brand{min-height:84px}
/* in-page confirmation dialog (data-modal links); the page behind is dimmed and blurred */
.modal{border:0;border-radius:14px;padding:0;width:min(720px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow:auto;background:var(--bg);color:var(--text);box-shadow:0 24px 64px rgba(0,0,0,.35)}
.modal::backdrop{background:rgba(10,18,28,.45);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal-body{padding:20px 22px 22px}.modal-body .ph{margin-bottom:12px}.modal-body .ph h1{font-size:22px}.modal-body .page-heading h1{font-size:22px}.modal-body .page-heading{margin-bottom:12px}
.modal-x{position:absolute;top:10px;right:12px;border:0;background:transparent;font-size:24px;line-height:1;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}.modal-x:hover{background:var(--light);color:var(--text)}
.modal .panel,.modal .card{box-shadow:none}
/* a page opened inside the dialog keeps its own top Cancel/Back link — hide it (the × and the bottom Cancel remain) and keep the heading clear of the × */
.modal-body .page-heading,.modal-body .ph{padding-right:44px}.modal-body .page-heading>.btn,.modal-body .ph>.btn,.modal-body .page-heading>a[href]{display:none}
/* one checkbox / radio size everywhere: 18px, portal colour, aligned with its label text */
input[type=checkbox],input[type=radio]{width:18px;height:18px;min-width:18px;margin:0;vertical-align:-3px;accent-color:var(--p);cursor:pointer}
label>input[type=checkbox],label>input[type=radio]{margin-right:8px}
.check-row input[type=checkbox],.access-row>input[type=radio],.access-row>input[type=checkbox],.program-note-form .note-options input[type=checkbox]{width:18px;height:18px}
html:has(dialog.modal[open]){overflow:hidden}
/* standard filter form: label above field, even grid, actions bottom-right — same look on every list page */
form.filter-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 14px;align-items:end;margin:0 0 14px}
form.filter-form .field{margin:0;min-width:0}
form.filter-form .field label{display:block;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 4px;font-weight:700}
form.filter-form .field .form-control{width:100%;height:38px;box-sizing:border-box}
form.filter-form .field input[type=date]{padding-right:10px}
form.filter-form>.actions{grid-column:1/-1;display:flex;justify-content:flex-end;gap:8px;margin:0}
form.filter-form>.actions .btn{height:38px;display:inline-flex;align-items:center;padding:0 16px}
/* the search box gets a little more room than a select */
form.filter-form .field:first-child{grid-column:span 2}
@media(max-width:700px){form.filter-form .field:first-child{grid-column:span 1}}
/* panel heading sits tighter over a filter form */
.panel>.card-heading+form.filter-form{margin-top:4px}
/* panel heading inside a padded panel bleeds to the edges like a card header */
.card-heading h2{font-size:18px;margin:0}.card-heading p{margin:4px 0 0}
.panel>.card-heading{margin:-20px -20px 16px}
/* clickable tiles everywhere: visible edge, lift on hover, accent when selected */
a.metric-card,a.source-tile,a.quick-report-result-card,.metric-link,.compliance-scope-card{border:1px solid var(--border);border-radius:var(--r);background:var(--card);color:inherit;text-decoration:none;transition:transform .12s,border-color .12s,box-shadow .12s}
a.metric-card:hover,a.source-tile:hover,a.quick-report-result-card:hover,.metric-link:hover,.compliance-scope-card:hover{border-color:var(--p);box-shadow:0 6px 18px rgba(0,0,0,.14);transform:translateY(-2px);text-decoration:none}
.state-source-metrics a.source-tile.on,.compliance-scope-card.active{outline:0;border:2px solid var(--p);padding:12px 14px}
/* ---- phones: page never wider than the screen; tables scroll inside their card ---- */
.page,.main{min-width:0;max-width:100%}
.card>.bd.flush,.table-wrap,.panel .table-wrap,.card>.bd:has(>table){overflow-x:auto;-webkit-overflow-scrolling:touch}
.card>.bd.flush>table,.table-wrap>table{min-width:max-content}
@media(max-width:900px){
  html,body{overflow-x:hidden}
  .page{overflow-x:hidden}
  .top{flex-wrap:wrap;gap:8px}.top .sp{display:none}.top .crumbs{flex:1 1 100%;order:3;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ph h1{font-size:22px}.ph>.rowbtns{width:100%;margin-left:0}
  .grid,.grid.g2,.grid.g3,.grid.g4,.three-up,.four-up,.dashboard-stats,.compliance-filter-grid,.aride-filter-grid,.data-form-grid,.name-sheet-candidate-grid,.state-source-metrics,.state-comparison-coverage,.quick-report-metric-grid,.requirement-progress-grid,.certification-hero{grid-template-columns:1fr!important}
  .field.wide,.compliance-filter-grid .wide-field,.name-sheet-candidate-grid .field.wide,.name-sheet-candidate-grid .field:first-child{grid-column:auto!important}
  form.filter-form{grid-template-columns:1fr}form.filter-form .field:first-child{grid-column:auto}form.filter-form>.actions{justify-content:stretch}form.filter-form>.actions .btn{flex:1;justify-content:center}
  .tabs{gap:0}.tabs a{padding:9px 10px;font-size:13px}
  .card>.hd{flex-wrap:wrap}.card>.hd .card-filter{width:100%;order:9}
  .rowbtns{flex-wrap:wrap}.rowbtns .btn{flex:1 1 auto;justify-content:center}
  .row-action-buttons{flex-wrap:wrap}
  .incident-final-actions,.sticky-form-actions{position:sticky;bottom:0;flex-direction:column;align-items:stretch;gap:10px}
  .incident-final-actions .actions,.sticky-form-actions .actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%}
  .modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px)}
  .kv{grid-template-columns:1fr 1fr}
  .status-strip{flex-direction:column;align-items:flex-start}
  .checks{grid-template-columns:1fr 1fr}
}
@media(max-width:480px){.kv,.checks{grid-template-columns:1fr}.tabs{overflow-x:auto;flex-wrap:nowrap}.tabs a{white-space:nowrap}}
/* version stamp: bottom-right of every page, out of the way */
.page{position:relative}
.app-version{position:fixed;right:12px;bottom:8px;font-size:11px;color:var(--muted);opacity:.75;pointer-events:none;z-index:5;font-variant-numeric:tabular-nums}

/* guard rail under any free-text box that lands on a record about a member of the public
   (SFST incident textareas, DRE opinion/toxicology/narrative, on-call notes) */
.field-guard{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--warn,#8a6100)}
html[data-theme=dark] .field-guard{color:#e0b357}

/* under-18 subject notice - flagged, not hidden (see docs/DATA-INVENTORY.md) */
.juvenile-notice{border-left:4px solid var(--warn,#b8860b);background:rgba(184,134,11,.08)}
html[data-theme=dark] .juvenile-notice{background:rgba(224,179,87,.12)}
.chip.warn{background:rgba(184,134,11,.15);color:#8a6100;border-color:rgba(184,134,11,.4)}
html[data-theme=dark] .chip.warn{background:rgba(224,179,87,.18);color:#e0b357}