/* Department panel (dept-panel.js). Built on the PCSO site tokens in styles.css; Belleair swaps them for black and white. */
body{--c-blue:#3b4048;--c-card:var(--surface);--c-card-2:var(--surface-2);--c-sunk:var(--bg-2);--c-line:var(--line);--c-line-2:var(--line-2);--c-text:var(--ink);--c-muted:var(--muted);--c-bg:var(--bg);--c-frame:var(--bg)}
.dp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:14px}
.dp-span{grid-column:span 2}
@media (max-width:980px){.dp-grid{grid-template-columns:1fr}.dp-span{grid-column:auto}}
.dp-me{grid-row:span 2}
.dp-me-top{display:flex;align-items:center;gap:12px}
.dp-me-top>div{flex:1;min-width:0}.dp-me-top b{display:block;font:700 22px/1.1 var(--f-display);text-transform:uppercase}
.dp-me-top small{color:var(--muted);font-size:13.5px}
.dp-av{width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--bg-2);flex:none}
.dp-me-top .dp-av{width:52px;height:52px}
.dp-act{display:grid;gap:6px;padding:12px 14px;border-radius:16px;background:var(--bg-2)}
.dp-act p{display:flex;justify-content:space-between;gap:10px;font-size:14.5px}.dp-act p span{color:var(--muted);font-variant-numeric:tabular-nums}
.dp-bar{height:8px;border-radius:999px;background:var(--surface);overflow:hidden}.dp-bar i{display:block;height:100%;background:var(--gold);border-radius:inherit;transition:width .4s}
.dp-wide{width:100%}
.dp-foot{font-size:13px;color:var(--muted)}.dp-foot b{color:var(--ink)}
.dp-link{all:unset;cursor:pointer;color:var(--gold);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.dp-link:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.dp-people{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.dp-people li{display:flex;gap:10px;align-items:center}.dp-people b{display:block;font-size:14.5px}.dp-people small{color:var(--muted);font-size:12.5px}
.dp-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.dp-post{padding:14px 0;border-top:1px solid var(--line);display:grid;gap:6px}.dp-post:first-of-type{border-top:0}
.dp-post h3{font-size:22px;text-transform:uppercase}.dp-post p{color:var(--ink);font-size:15px;white-space:normal}
.dp-empty{color:var(--muted);font-size:14px;margin:4px 0}
.dp-fail{max-width:640px}
.dp-sub{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px;align-items:center}
.dp-sub a{font:600 13.5px/1 var(--f-body);text-decoration:none;color:var(--muted);padding:10px 14px;border-radius:999px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.dp-sub .dp-sub-end{margin-left:auto}
.dp-sub a[aria-current="page"]{background:var(--green-2);color:#fff;box-shadow:none}
.dp-stack{display:grid;gap:14px}
.dp-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
.dp-toolbar input[type=search]{flex:1 1 240px;font:400 14.5px/1.3 var(--f-body);color:var(--ink);background:var(--surface);border:0;border-radius:999px;padding:11px 16px;box-shadow:inset 0 0 0 1px var(--line-2)}
.dp-dots{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}.dp-dots i{width:9px;height:9px;border-radius:50%;background:var(--ok)}.dp-dots i.warn{background:#d9a441;margin-left:8px}
.dp-inline{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted)}
.dp-inline select,.dp-rowin input,.dp-rowin select{font:400 14px/1.3 var(--f-body);color:var(--ink);background:var(--bg-2);border:0;border-radius:10px;padding:8px 10px;box-shadow:inset 0 0 0 1px var(--line-2)}
.dp-rank{margin-bottom:14px;gap:0;padding:0;overflow:hidden}
.dp-rank-head,.dp-member summary{display:grid;grid-template-columns:minmax(0,1fr) 110px 190px 120px;gap:10px;align-items:center;padding:12px 18px}
.dp-rank-head{background:var(--bg-2);font:600 11.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.dp-rank-head h3{font:700 16px/1 var(--f-display);letter-spacing:.12em;color:var(--silver)}
.dp-member{border-top:1px solid var(--line)}
.dp-member summary{cursor:pointer;list-style:none}.dp-member summary::-webkit-details-marker{display:none}
.dp-member summary:hover{background:rgba(255,255,255,.03)}
.dp-member[open] summary{background:rgba(255,255,255,.04)}
.dp-who{display:flex;align-items:center;gap:10px;min-width:0}.dp-who>span{display:grid;min-width:0}.dp-who b{font-size:14.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.dp-who small{color:var(--muted);font-size:12px}
.dp-time{font-variant-numeric:tabular-nums}.dp-time.low{color:#ec7b7f}
.dp-pts{display:inline-block;font:600 11.5px/1 var(--f-body);letter-spacing:.04em;padding:6px 9px;border-radius:999px;background:rgba(79,191,127,.14);color:var(--ok);white-space:nowrap}
.dp-pts.ok{background:rgba(217,164,65,.14);color:#e3b55a}.dp-pts.bad{background:rgba(200,56,61,.15);color:#ec7b7f}
.dp-member-body{display:grid;gap:8px;padding:6px 18px 18px 58px}
.dp-member-body h4{font:600 11.5px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:8px}
.dp-line{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;font-size:14px;padding:4px 0}.dp-line.void{opacity:.5;text-decoration:line-through}
.dp-ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.dp-ladder div{display:grid;gap:2px;padding:10px 12px;border-radius:14px;background:var(--bg-2);box-shadow:inset 0 0 0 1px var(--line)}
.dp-ladder div.hit{box-shadow:inset 0 0 0 1px rgba(200,56,61,.6);background:rgba(200,56,61,.1)}
.dp-ladder i{font:700 12px/1 var(--f-mono);font-style:normal;color:var(--muted)}.dp-ladder small{color:var(--muted);font-size:12px}
.dp-loa{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--line)}.dp-loa:first-of-type{border-top:0}
.dp-loa>div{flex:1;min-width:200px;display:grid}.dp-loa small{color:var(--muted);font-size:13px}
.dp-col{display:grid;gap:14px;align-content:start}
.dp-records{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:8px}
.dp-rec{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:16px;background:var(--bg-2);text-decoration:none}
.dp-rec>span{flex:1;min-width:0;display:grid}.dp-rec small{color:var(--muted);font-size:12px}
.dp-rec:hover{box-shadow:inset 0 0 0 1px var(--gold)}
.dp-toggle{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);cursor:pointer}
.dp-toggle span{display:grid}.dp-toggle small{color:var(--muted);font-size:13px}
.dp-toggle input{width:20px;height:20px;accent-color:var(--gold);flex:none}
.dp-checks{display:flex;flex-wrap:wrap;gap:6px 14px;max-height:220px;overflow:auto;padding:10px 12px;border-radius:14px;background:var(--bg-2);font-size:14px}
.dp-checks label{display:inline-flex;gap:6px;align-items:center;text-transform:none;letter-spacing:0;font:400 14px/1.3 var(--f-body);color:var(--ink)}
.dp-rows{display:grid;gap:8px}
.dp-rowin{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.dp-rowin input{flex:1 1 140px}.dp-rowin input[type=number]{flex:0 1 150px}
.dp-move{display:inline-flex;gap:4px}
.dp-h4{font:600 12.5px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:12px}
.dp-modal .dp-dlg{display:grid;gap:14px}.dp-dlg-text{color:var(--muted)}
.tbl tr.dp-low td:last-child{color:#ec7b7f}
.dp-res{display:flex;flex-direction:column;min-height:70vh;height:min(85vh,980px);border-radius:26px;border:1px solid var(--line);overflow:hidden}
body.res-full .ptop,body.res-full .foot{display:none}
body.res-full .sec.gutter{padding:0!important}
body.res-full .sec.gutter>.wrap{max-width:none;width:100%;margin:0;padding:0}
body.res-full .dp-res{height:calc(100vh - var(--res-top,170px));min-height:480px;border-radius:0;border-width:1px 0 0}
@media (max-width:760px){
  .dp-rank-head{grid-template-columns:1fr}.dp-rank-head span{display:none}
  .dp-member summary{grid-template-columns:minmax(0,1fr) auto}
  .dp-member summary>span:nth-child(n+3){grid-column:2}
  .dp-member-body{padding-left:18px}
  .dp-line{grid-template-columns:1fr}
}

/* Standalone panel (bpd-panel.html) */
.dp-shell{min-height:100vh;display:flex;flex-direction:column}
.dp-head{position:sticky;top:0;z-index:50;background:rgba(0,0,0,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.dp-head .wrap{display:flex;align-items:center;gap:16px;padding-block:12px;flex-wrap:wrap}
.dp-brand{display:flex;align-items:center;gap:12px;text-decoration:none;margin-right:auto}
.dp-brand img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:#111}
.dp-brand small{display:block;font:600 11px/1 var(--f-body);letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.dp-brand b{display:block;font:700 22px/1 var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.dp-meline{display:flex;align-items:center;gap:10px;font-size:13px}.dp-meline .dp-av{width:36px;height:36px}.dp-meline b{display:block;font-size:14px}.dp-meline span{color:var(--muted)}
.dp-tabs{border-bottom:1px solid var(--line);background:rgba(10,10,10,.92)}
.dp-tabs .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;padding-block:8px}
.dp-tabs a{flex:none;font:600 13.5px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:10px}
.dp-tabs a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.dp-tabs a[aria-current="page"]{color:#000;background:#fff}
.dp-main{flex:1;padding-block:clamp(22px,4vw,40px)}
.dp-foot-bar{border-top:1px solid var(--line);padding-block:18px;color:var(--muted);font-size:13px}

/* Belleair Police Department: black and white. */
body.dp-bpd{
  --bg:#000;--bg-2:#0d0d0d;--surface:#111;--surface-2:#1a1a1a;--line:rgba(255,255,255,.1);--line-2:rgba(255,255,255,.2);
  --ink:#f5f5f5;--muted:#a3a3a3;--silver:#e5e5e5;--green:#262626;--green-2:#333;--gold:#fff;--gold-2:#bdbdbd;
  --c-blue:#333;background:#000;color:var(--ink)
}
body.dp-bpd .btn-gold{background:#fff;color:#000;box-shadow:none}
body.dp-bpd .dp-sub a[aria-current="page"]{background:#fff;color:#000}
body.dp-bpd .pill{background:rgba(255,255,255,.12);color:#fff}
body.dp-bpd .pill.loa{background:rgba(255,255,255,.06);color:#bdbdbd;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
body.dp-bpd .toast{background:#111;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.3)}