/* Deputy Portal */
.gate { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.gate-card { text-align: center; max-width: 420px; }
.gate-card img { width: 140px; height: auto; filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5)); }
.gate-card h1 { font-size: 40px; margin: 8px 0 10px; }
.gate-card .btn { margin: 18px 0 10px; }
.gate-note { min-height: 1.4em; color: var(--warn); font-size: 14px; }
.back { font-size: 13px; color: var(--paper-dim); }

.app { display: grid; grid-template-columns: 250px minmax(0, 1fr); min-height: 100vh; }
.side {
  position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 18px; padding: 20px 14px;
  background: linear-gradient(180deg, var(--side-1, #08110a), var(--side-2, #0a150c)); border-right: 1px solid var(--line-soft);
}
.side-brand { display: flex; align-items: center; gap: 10px; padding: 0 6px; color: var(--paper); text-decoration: none !important; }
.side-brand span { display: flex; flex-direction: column; line-height: 1.1; }
.side-brand b { font: 700 18px var(--slab); }
.side-brand small { margin-top: 3px; font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--brass); }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; }
.side-nav .grp { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding: 14px 10px 6px; }
.side-nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 10px; color: var(--paper-dim);
  font-weight: 500; text-decoration: none !important; border: 1px solid transparent;
}
.side-nav a svg { width: 18px; height: 18px; flex: none; opacity: .8; }
.side-nav a:hover { background: rgba(236, 228, 210, .04); color: var(--paper); }
.side-nav a.on { background: rgba(var(--brass-rgb, 193, 137, 63), .1); border-color: var(--line); color: var(--brass-hi); }
.side-user { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(236, 228, 210, .03); border: 1px solid var(--line-soft); }
.side-user .who { flex: 1; min-width: 0; line-height: 1.25; }
.side-user .who b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-user .who small { color: var(--muted); font-size: 12px; }
.icon-btn { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; border: 1px solid var(--line-soft); color: var(--paper-dim); background: none; cursor: pointer; }
.icon-btn:hover { color: var(--brass-hi); border-color: var(--line); }
.icon-btn svg { width: 16px; height: 16px; }

.av { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex: none; background: var(--pine-3); border: 1px solid var(--line); }
.av.lg { width: 104px; height: 104px; border: 3px solid var(--brass); box-shadow: 0 0 0 5px rgba(var(--brass-rgb, 193, 137, 63), .15); }
.av.ph { display: grid; place-items: center; font: 700 14px var(--slab); color: var(--brass); }
.av.lg.ph { font-size: 36px; }

.menu-btn { display: none; }
.view { padding: 28px clamp(16px, 3vw, 40px) 60px; max-width: 1200px; width: 100%; min-width: 0; outline: none; }
.view-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.view-head h1 { font-size: 32px; margin: 4px 0 0; }
.view-head p { margin: 4px 0 0; color: var(--paper-dim); }

.tabs { display: flex; gap: 4px; padding: 4px; border-radius: 12px; background: rgba(var(--night-rgb, 7, 13, 8), .6); border: 1px solid var(--line-soft); width: max-content; max-width: 100%; overflow-x: auto; margin-bottom: 20px; }
.tabs button { border: 0; background: none; padding: 8px 14px; border-radius: 9px; cursor: pointer; color: var(--paper-dim); font-weight: 600; font-size: 14px; white-space: nowrap; }
.tabs button.on { background: var(--brass); color: #1a1206; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.acc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1250px) { .acc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .acc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.log-pg { justify-content: space-between; align-items: center; margin-top: 10px; font-size: 13px; }
.log-pg:empty { display: none; }
/* service stars in a personnel file */
.pf-stars { margin: 14px 0 4px; }
.pf-medals { margin-top: 8px; }
/* Sync & Settings sections */
.ss-sec { margin-bottom: 16px; }
.ss-sec .tbadge { margin-left: 4px; }
#view .card[data-sec][hidden] { display: none !important; }
.ss-pair:has(> .card[hidden]) { grid-template-columns: 1fr; }
.ss-pair:not(:has(> .card:not([hidden]))) { display: none; }
#view .card[data-sec]:not([hidden]) ~ .card[data-sec]:not([hidden]) { margin-top: 16px; }
.ks-card { margin-bottom: 16px; }
.st-tbl td, .st-tbl th { padding: 6px 6px; text-align: left; }
.st-tbl .st-in { width: 78px; padding: 6px 8px; font-size: 13px; }
.st-tbl .st-in.st-changed { border-color: rgba(var(--brass-rgb, 193, 137, 63), .6); color: var(--brass-hi); }
.ks-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line-soft); }
.ks-row small { display: block; margin-top: 2px; font-size: 12.5px; }
.ks-row .chip { margin-left: 6px; vertical-align: 1px; }
.ks-row .btn { flex: none; }
.card h3 { font-size: 18px; margin-bottom: 12px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.card-head h3 { margin: 0; }

/* credential */
.cred {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 24px; border-radius: 18px; border: 1px solid var(--line);
  background: radial-gradient(600px 240px at 0% 0%, rgba(var(--brass-rgb, 193, 137, 63), .16), transparent 60%), linear-gradient(135deg, var(--hero-1, #18301a), var(--pine, #0b160d) 70%);
}
.cred::after {
  content: ''; position: absolute; right: -40px; bottom: -60px; width: 260px; height: 285px; opacity: .07;
  background: url('/assets/badge.webp') center/contain no-repeat; pointer-events: none;
}
.cred .name { font: 700 28px/1.1 var(--slab); margin: 6px 0 4px; }
.cred .rank { color: var(--brass-hi); font-weight: 600; }
.cred .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.cred .pts { text-align: right; position: relative; z-index: 1; }
.cred .pts b { display: block; font: 700 46px/1 var(--slab); color: var(--brass-hi); }
.cred .pts span { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); }

.stat { padding: 18px; }
.stat .k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.stat .v { font: 700 30px/1.1 var(--slab); margin-top: 6px; }
.stat .s { font-size: 13px; color: var(--paper-dim); }

/* breakdown bars */
.bars { display: grid; gap: 14px; }
.bar-row { display: grid; grid-template-columns: 150px 1fr 70px; gap: 12px; align-items: center; font-size: 14px; }
.bar-row .track { height: 10px; border-radius: 99px; background: rgba(236, 228, 210, .06); overflow: hidden; }
.bar-row .fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--brass-lo), var(--brass-hi)); }
.bar-row .fill.alt { background: linear-gradient(90deg, #3d6b39, var(--good)); }
.bar-row .fill.neg { background: linear-gradient(90deg, #6b3a35, var(--bad)); }
.bar-row b { text-align: right; font-family: var(--slab); font-size: 17px; }

/* lists */
.rows { display: flex; flex-direction: column; }
.row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line-soft); }
.row:last-child { border-bottom: 0; }
.row .ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: rgba(var(--brass-rgb, 193, 137, 63), .1); color: var(--brass-hi); }
.row .ic svg { width: 18px; height: 18px; }
.row .ic.g { background: rgba(127, 191, 106, .1); color: var(--good); }
.row .ic.r { background: rgba(217, 103, 92, .1); color: var(--bad); }
.row .t { min-width: 0; }
.row .t b { display: block; font-weight: 600; font-size: 14px; }
.row .t small { color: var(--muted); font-size: 12.5px; }
.row .amt { font: 700 17px var(--slab); white-space: nowrap; }
.amt.plus { color: var(--good); }
.amt.minus { color: var(--bad); }
.amt.zero { color: var(--muted); }

/* rewards */
.rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.reward { display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: var(--radius); border: 1px solid var(--line-soft); background: linear-gradient(180deg, rgba(var(--pine3-rgb, 23, 44, 23), .8), rgba(var(--pine-rgb, 11, 22, 13), .8)); }
.reward .cat { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); }
.reward h4 { font-size: 19px; margin: 0; }
.reward p { color: var(--paper-dim); font-size: 14px; margin: 0; flex: 1; }
.reward .foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; }
.reward .cost { font: 700 22px var(--slab); color: var(--brass-hi); }
.reward .cost small { font: 500 12px var(--sans); color: var(--muted); }
.progress { height: 6px; border-radius: 99px; background: rgba(236, 228, 210, .06); overflow: hidden; }
.progress div { height: 100%; background: var(--brass); }

/* leaderboard */
.podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; gap: 14px; align-items: end; margin-bottom: 20px; }
.pod { text-align: center; padding: 20px 12px 16px; border-radius: 16px; border: 1px solid var(--line-soft); background: rgba(var(--night-rgb, 7, 13, 8), .5); }
.pod.p1 { border-color: var(--brass); background: linear-gradient(180deg, rgba(var(--brass-rgb, 193, 137, 63), .16), rgba(var(--night-rgb, 7, 13, 8), .5)); padding-top: 28px; }
.pod .place { font: 700 13px var(--slab); letter-spacing: .14em; color: var(--brass); }
.pod .av { width: 64px; height: 64px; margin: 10px auto 8px; display: block; }
.pod.p1 .av { width: 80px; height: 80px; border: 2px solid var(--brass); }
.pod b { display: block; font-family: var(--slab); font-size: 17px; }
.pod .score { font: 700 22px var(--slab); color: var(--brass-hi); }
.lb-row { display: grid; grid-template-columns: 34px 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 6px; border-bottom: 1px solid var(--line-soft); }
.lb-row.me { background: rgba(var(--brass-rgb, 193, 137, 63), .08); border-radius: 10px; }
.lb-row .n { font: 700 15px var(--slab); color: var(--muted); text-align: center; }

/* tables + forms */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
td { padding: 10px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
td.num { text-align: right; font-family: var(--slab); font-weight: 700; }
.person { display: flex; align-items: center; gap: 10px; min-width: 180px; }
.person .av { width: 30px; height: 30px; }
label.f, div.f { display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; color: var(--paper-dim); }
input.in, select.in, textarea.in {
  width: 100%; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(var(--night-rgb, 7, 13, 8), .7); color: var(--paper);
}
input.in:focus, select.in:focus, textarea.in:focus { border-color: var(--brass); outline: none; }
.form { display: grid; gap: 14px; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.picker { max-height: 280px; overflow-y: auto; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(var(--night-rgb, 7, 13, 8), .5); }
.picker label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); cursor: pointer; font-size: 14px; }
.picker label:hover { background: rgba(236, 228, 210, .03); }
.picker input { accent-color: var(--brass); }
.notice { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(224, 166, 75, .35); background: rgba(224, 166, 75, .07); margin-bottom: 16px; font-size: 14px; }
.notice b { color: var(--warn); }
.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; }
.toolbar .in { max-width: 280px; }

.modal { position: fixed; inset: 0; background: rgba(0, 0, 0, .6); display: grid; place-items: center; z-index: 60; padding: 16px; }
.modal[hidden] { display: none; }
.modal.top { place-items: start center; padding-top: max(16px, 5vh); }
.modal-card { width: min(460px, 100%); background: var(--pine-2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }
.modal-card h3 { font-size: 22px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }

.skeleton { height: 120px; border-radius: var(--radius); background: linear-gradient(90deg, rgba(236,228,210,.03), rgba(236,228,210,.07), rgba(236,228,210,.03)); background-size: 200% 100%; animation: sh 1.2s infinite; }
@keyframes sh { to { background-position: -200% 0; } }

/* SOP */
.sop { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px; align-items: start; }
.sop-nav { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding: 10px; }
.sop-nav .grp { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); padding: 12px 8px 4px; }
.sop-nav a { display: block; padding: 6px 8px; border-radius: 8px; color: var(--paper-dim); font-size: 13.5px; text-decoration: none !important; }
.sop-nav a:hover { color: var(--paper); background: rgba(236, 228, 210, .04); }
.sop-nav a.on { color: var(--brass-hi); background: rgba(var(--brass-rgb, 193, 137, 63), .1); }
.sop-mobile { display: none; margin-bottom: 14px; }
.sop-body { padding: 28px clamp(18px, 3vw, 40px); }
.sop-title { font-size: 30px; margin-bottom: 18px; }
.sop-content { line-height: 1.7; color: var(--paper); max-width: 820px; }
.sop-content h1 { font-size: 26px; margin: 28px 0 10px; }
.sop-content h2 { font-size: 22px; margin: 28px 0 8px; padding-top: 14px; border-top: 1px solid var(--line-soft); color: var(--brass-hi); }
.sop-content h3 { font-size: 18px; margin: 20px 0 6px; }
.sop-content h4 { font-size: 16px; margin: 16px 0 6px; }
.sop-content p { margin: 0 0 12px; }
.sop-content ul, .sop-content ol { margin: 0 0 14px; padding-left: 22px; }
.sop-content li { margin: 4px 0; }
.sop-content li p { margin: 0; }
.sop-content table { margin: 10px 0 18px; border: 1px solid var(--line-soft); }
.sop-content td, .sop-content th { border: 1px solid var(--line-soft); vertical-align: top; }
.sop-content img { border-radius: 10px; margin: 10px 0; }
.sop-content a { text-decoration: underline; }

@media (max-width: 980px) {
  .g4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) { .sop { grid-template-columns: 1fr; } .sop-nav { display: none; } .sop-mobile { display: block; } }
@media (max-width: 820px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .side { position: fixed; inset: 0 auto 0 0; width: 270px; z-index: 50; transform: translateX(-100%); transition: transform .25s; }
  .side.open { transform: none; box-shadow: 0 0 60px rgba(0, 0, 0, .7); }
  .menu-btn {
    display: flex; flex-direction: column; justify-content: center; gap: 4px; position: fixed; top: 12px; right: 12px; z-index: 55;
    width: 42px; height: 42px; padding: 0 11px; border-radius: 10px; border: 1px solid var(--line); background: rgba(var(--night-rgb, 7, 13, 8), .9); cursor: pointer;
  }
  .menu-btn span { height: 2px; background: var(--paper); border-radius: 2px; }
  .view { padding-top: 64px; }
  .g2 { grid-template-columns: 1fr; }
  .cred { grid-template-columns: 1fr; text-align: left; }
  .cred .pts { text-align: left; }
  .podium { grid-template-columns: 1fr; }
  .pod.p1 { order: -1; }
  .bar-row { grid-template-columns: 110px 1fr 56px; }
}
@media (max-width: 480px) { .g4 { grid-template-columns: 1fr 1fr; } .stat .v { font-size: 24px; } }

/* overview: quick links and the Field Training Academy button */
.tile { display: flex; align-items: center; gap: 14px; color: var(--paper); text-decoration: none !important; transition: border-color .15s, transform .15s; }
.tile:hover { border-color: var(--line); transform: translateY(-1px); }
.tile-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; flex: none; background: rgba(var(--brass-rgb, 193, 137, 63), .1); color: var(--brass-hi); border: 1px solid var(--line); }
.tile-ic svg { width: 22px; height: 22px; }
.tile-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.tile-t b { font: 700 17px/1.2 var(--slab); }
.tile-t small { color: var(--paper-dim); font-size: 13px; line-height: 1.45; }
.tile-go svg { width: 18px; height: 18px; color: var(--muted); }
.tile:hover .tile-go svg { color: var(--brass-hi); }
.academy-cta {
  display: flex; align-items: center; gap: 16px; margin-top: 16px; padding: 20px 22px; color: var(--paper); text-decoration: none !important;
  border-color: rgba(var(--hi-rgb, 224, 171, 98), .35); background: linear-gradient(120deg, rgba(var(--brass-rgb, 193, 137, 63), .16), rgba(var(--brass-rgb, 193, 137, 63), 0) 75%), linear-gradient(120deg, rgba(var(--night-rgb, 7, 13, 8), .88), rgba(var(--pine3-rgb, 23, 44, 23), .75));
}
.academy-cta:hover { border-color: var(--brass); }
.academy-cta .tile-ic { width: 52px; height: 52px; background: rgba(var(--brass-rgb, 193, 137, 63), .18); }
.academy-cta .tile-ic svg { width: 28px; height: 28px; }
.academy-cta .tile-t b { font-size: 21px; }
.academy-cta .btn svg { width: 15px; height: 15px; }
@media (max-width: 640px) { .academy-cta { flex-wrap: wrap; } .academy-cta .btn { width: 100%; } .cred { grid-template-columns: auto 1fr; } .cred .pts { grid-column: 1 / -1; text-align: left; } }

/* Command Staff page */
.cmd-tier { margin-bottom: 30px; }
.cmd-tier-head { margin-bottom: 14px; }
.cmd-tier-head h2 { font-size: 24px; margin: 6px 0 0; }
.cmd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.cmd-card { border: 1px solid var(--line-soft); border-radius: 16px; overflow: hidden; background: linear-gradient(180deg, rgba(var(--pine3-rgb, 23, 44, 23), .75), rgba(var(--pine-rgb, 11, 22, 13), .9)); transition: border-color .15s; }
.cmd-card:hover { border-color: var(--line); }
.cmd-photo { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--night, #0a120b); }
.cmd-photo.ph { display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, rgba(var(--brass-rgb, 193, 137, 63), .14), transparent 65%), var(--night, #0a120b); }
.cmd-photo.ph img { width: 46%; height: auto; border-radius: 50%; opacity: .9; }
.cmd-photo.ph img.badge { border-radius: 0; opacity: .5; }
.cmd-body { padding: 14px 16px 16px; text-align: center; }
.cmd-body h3 { font: 700 20px/1.2 var(--slab); color: var(--brass-hi); margin: 0; }
.cmd-rank { color: var(--paper-dim); margin-top: 4px; font-size: 15px; }
.cmd-rank .chip { margin-left: 4px; vertical-align: 1px; }
.cmd-pos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 10px; }
.cmd-pos span { font-size: 12px; padding: 2px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--brass-hi); background: rgba(var(--brass-rgb, 193, 137, 63), .06); }
.cmd-bio { margin: 12px 0 0; color: var(--paper); font-size: 14px; line-height: 1.55; white-space: pre-wrap; text-align: left; }
/* Command Staff profiles editor */
.prof-list { display: grid; gap: 14px; }
.prof { display: grid; grid-template-columns: 150px 1fr; gap: 18px; align-items: start; }
.prof-pic { display: grid; gap: 8px; }
.prof-pic .cmd-photo { border-radius: 12px; }
.prof-pic label.btn { cursor: pointer; }
.prof-name { margin-bottom: 6px; }
.prof-name b { font: 700 18px var(--slab); }
.prof .cmd-pos { justify-content: flex-start; margin: 0 0 10px; }
.prof textarea { width: 100%; resize: vertical; }
@media (max-width: 640px) { .prof { grid-template-columns: 1fr; } .prof-pic { grid-template-columns: 110px 1fr; align-items: center; } }

/* Staff panel: one page with tabs, like the Academy admin */
.staff-hero { position: relative; overflow: hidden; padding: 22px 24px 0; margin-bottom: 16px; background: radial-gradient(600px 220px at 0% 0%, rgba(var(--brass-rgb, 193, 137, 63), .14), transparent 60%), linear-gradient(135deg, var(--hero-1, #18301a), var(--pine, #0b160d) 75%); border-color: var(--line); }
.staff-hero::after { content: ''; position: absolute; right: -30px; top: -20px; width: 200px; height: 220px; opacity: .07; background: url('/assets/badge.webp') center/contain no-repeat; pointer-events: none; }
.staff-hero .tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--brass-hi); border: 1px solid rgba(var(--hi-rgb, 224, 171, 98), .35); background: rgba(var(--brass-rgb, 193, 137, 63), .08); padding: 3px 10px; border-radius: 8px; }
.staff-hero .tag svg { width: 14px; height: 14px; }
.staff-hero h1 { font-size: 32px; margin: 10px 0 0; }
.staff-tabs { display: flex; gap: 2px; margin: 16px -24px 0; padding: 0 14px; border-top: 1px solid var(--line-soft); overflow-x: auto; position: relative; z-index: 1; }
.staff-tabs a { padding: 13px 14px; color: var(--paper-dim); white-space: nowrap; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
.staff-tabs a:hover { color: var(--paper); text-decoration: none; }
.staff-tabs a.on { color: var(--brass-hi); border-bottom-color: var(--brass); }
.tbadge { display: inline-block; min-width: 18px; padding: 0 6px; border-radius: 99px; background: rgba(217, 103, 92, .25); color: #f3c3bd; font-size: 11px; line-height: 18px; text-align: center; margin-left: 4px; }
.staff-tiles { margin-bottom: 16px; }
.staff-tile { display: flex; gap: 14px; align-items: center; color: var(--paper); text-decoration: none !important; }
.staff-tile:hover { border-color: var(--line); }
.staff-tile b { display: block; font: 700 26px/1 var(--slab); }
.staff-tile small { display: block; margin-top: 4px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.staff-tile.warn .tile-ic { color: var(--warn); }
.staff-tile.bad .tile-ic { color: var(--bad); background: rgba(217, 103, 92, .1); }
.staff-attn { margin-bottom: 16px; border-color: rgba(217, 103, 92, .4); }
.staff-attn h3 { color: var(--bad); font-size: 16px; margin-bottom: 6px; }
.staff-attn p { margin: 6px 0 0; font-size: 14px; color: var(--paper-dim); }
.staff-tools { margin-bottom: 16px; }
.staff-tools h3 { margin-bottom: 6px; }
.tool-row { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid var(--line-soft); color: var(--paper); text-decoration: none !important; }
.tool-row:first-of-type { border-top: 0; }
.tool-row b { display: block; font-size: 15px; }
.tool-row small { display: block; color: var(--muted); font-size: 13px; }
.tool-row .tool-go { margin-left: auto; color: var(--paper-dim); font-size: 13px; white-space: nowrap; }
.tool-row:hover b, .tool-row:hover .tool-go { color: var(--brass-hi); }
/* an open pop-up keeps the scroll to itself */
html:has(.modal:not([hidden])) { overflow: hidden; }
.modal, .modal-card { overscroll-behavior: contain; }
.staff-note { margin-bottom: 18px; }
.staff-note p { margin: 0; color: var(--paper-dim); font-size: 14px; }
.seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--line-soft); border-radius: 10px; overflow: hidden; }
.seg button { background: none; border: 0; border-right: 1px solid var(--line-soft); color: var(--paper-dim); padding: 8px 12px; font-size: 13px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button.on { background: rgba(var(--brass-rgb, 193, 137, 63), .12); color: var(--brass-hi); }
.card-head .cmd-tier-head { margin: 0; }
.card-head .cmd-tier-head h2 { font-size: 19px; margin-top: 2px; }
.prof-show { float: right; display: inline-flex; gap: 6px; align-items: center; font-size: 13px; color: var(--paper-dim); cursor: pointer; }
.prof.is-hidden { opacity: .55; }
@media (max-width: 640px) { .prof-show { float: none; display: flex; margin-top: 6px; } .staff-hero h1 { font-size: 26px; } }

td.nowrap { white-space: nowrap; }

/* Promotion view on the roster */
.pp-switch svg { flex: none; }
.pp-month { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.pp-month b { font-family: var(--slab); min-width: 130px; text-align: center; }
.pp-month .icon-btn { font-size: 18px; line-height: 1; }
.pp-month .icon-btn[disabled] { opacity: .35; cursor: default; }
.mp { position: relative; }
.mp-btn { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; justify-content: center; height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line-soft); background: none; color: var(--paper); font: 600 14px var(--slab); cursor: pointer; }
.mp-btn:hover, .mp-btn[aria-expanded="true"] { border-color: var(--line); color: var(--brass-hi); }
.mp-btn svg { width: 14px; height: 14px; opacity: .7; }
.mp-pop { position: absolute; top: calc(100% + 6px); right: 50%; transform: translateX(50%); z-index: 30; width: 244px; padding: 10px; border-radius: 12px; border: 1px solid var(--line); background: var(--pine-2); box-shadow: 0 12px 32px rgba(0,0,0,.45); }
.mp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.mp-head b { font-family: var(--slab); }
.mp-head .icon-btn { width: 30px; height: 30px; font-size: 16px; }
.mp-head .icon-btn[disabled] { opacity: .35; cursor: default; }
.mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mp-grid button { padding: 8px 0; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--paper-dim); font-size: 13px; cursor: pointer; }
.mp-grid button:hover:not([disabled]) { color: var(--paper); border-color: var(--line-soft); }
.mp-grid button.now { border-color: var(--line-soft); }
.mp-grid button.on { background: var(--brass); color: #1a1408; font-weight: 600; border-color: var(--brass); }
.mp-grid button[disabled] { opacity: .3; cursor: default; }
.mp-today { width: 100%; margin-top: 8px; padding: 7px 0; border-radius: 8px; border: 1px solid var(--line-soft); background: none; color: var(--paper-dim); font-size: 12.5px; cursor: pointer; }
.mp-today:hover { color: var(--brass-hi); border-color: var(--line); }
.st-rec { white-space: nowrap; }
.stat.pp-good .v { color: var(--good); }
.stat.pp-warn .v { color: var(--warn); }
.stat.pp-bad .v { color: var(--bad); }
.pp-table td { vertical-align: middle; }
.pp-row { cursor: pointer; }
.pp-row:hover td { background: rgba(236, 228, 210, .025); }
.pp-row.open td { background: rgba(var(--brass-rgb, 193, 137, 63), .05); border-bottom-color: transparent; }
.pp-row.pp-leave { opacity: .6; }
.pp-since { font-size: 12px; white-space: nowrap; }
.pp-act { display: flex; align-items: center; gap: 16px; flex-wrap: nowrap; min-width: 470px; }
.pp-total { display: flex; flex-direction: column; min-width: 64px; line-height: 1.15; }
.pp-total b { font: 700 20px/1.1 var(--slab); color: var(--paper); }
.pp-total small { font-size: 11px; color: var(--muted); }
.pp-weeks { display: flex; gap: 6px; align-items: flex-end; }
.pp-wk { display: flex; flex-direction: column; align-items: center; width: 34px; }
.pp-wk i { display: block; width: 14px; min-height: 2px; border-radius: 3px 3px 1px 1px; background: var(--brass); margin-top: auto; }
.pp-wk { height: 58px; justify-content: flex-end; }
.pp-wk small { font-size: 11px; color: var(--paper-dim); margin-top: 3px; font-variant-numeric: tabular-nums; }
.pp-wk span { font-size: 9.5px; letter-spacing: .1em; color: var(--muted); }
.pp-wk.future i { background: var(--line-soft); }
.pp-wk.future small { color: var(--muted); }
.pp-chips { display: flex; gap: 6px; flex-wrap: wrap; align-content: center; min-width: 0; max-width: 310px; }
.pp-acchip { cursor: pointer; }
.modal-card.wide { width: min(760px, 100%); max-height: 88vh; overflow: auto; }
.pp-rec { margin-top: 10px; background: none; border: 1px solid var(--line-soft); border-radius: 10px; color: var(--paper-dim); padding: 8px 12px; font: inherit; font-size: 13px; cursor: pointer; text-align: left; }
.pp-rec:hover { border-color: var(--line); color: var(--paper); }
.live { color: var(--bad); }
.rec-list { display: grid; gap: 10px; margin-top: 14px; }
.rec-it { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px 14px; }
.rec-it[hidden] { display: none; }
.rec-it.old { opacity: .6; }
.rec-h { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13px; }
.rec-it p { margin: 8px 0 0; white-space: pre-wrap; font-size: 14px; overflow-wrap: anywhere; }
.rec-links { margin-top: 6px; display: flex; gap: 12px; font-size: 13px; }
.stat[data-tip] { position: relative; cursor: default; }
.stat[data-tip]:hover::after, .stat[data-tip]:focus::after { content: attr(data-tip); position: absolute; left: 14px; top: calc(100% + 6px); z-index: 20; white-space: nowrap;
  background: var(--pine-2); border: 1px solid var(--line); border-radius: 10px; padding: 7px 12px; font-size: 13px; color: var(--paper); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.chip.transfer { font-size: 11px; padding: 0 7px; vertical-align: 1px; color: #6ca6d9; border-color: #2c4a63; background: rgba(108, 166, 217, .08); }
.chip.cnote { color: #b9a8e8; border-color: #4d4370; background: rgba(142, 124, 195, .1); }
.pp-mark { cursor: pointer; font: inherit; }
.pp-recbtn { cursor: pointer; font: inherit; background: none; color: var(--paper-dim); }
.pp-recbtn:hover { color: var(--paper); border-color: var(--line); }
.pp-mark.off { border-style: dashed; color: var(--muted); background: none; }
.pp-mark.off:hover { color: var(--paper); }
.pp-mark[disabled] { cursor: default; }
.rec-add { margin: 0 0 14px; }
.rec-add > summary { list-style: none; display: inline-flex; }
.rec-add > summary::-webkit-details-marker { display: none; }
.rec-add[open] { border: 1px solid var(--line-soft); border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.rec-add[open] > summary { display: none; }
.rec-hint { margin: 0; font-size: 13px; }
.rec-rm { margin-top: 8px; background: none; border: 0; padding: 0; color: var(--muted); font: inherit; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
.rec-rm.sure { color: var(--bad); }
/* undo a removal (shown for an hour to whoever removed it) */
.rec-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid rgba(232, 160, 60, .45); background: rgba(232, 160, 60, .08); border-radius: 10px; font-size: 13.5px; }
.rec-undo > span { min-width: 0; overflow-wrap: anywhere; }
.btn.undo { flex: none; background: #e8a03c; border-color: #e8a03c; color: #1a1408; font-weight: 700; padding: 8px 16px; font-size: 14px; }
.btn.undo:hover { background: #f2b356; border-color: #f2b356; }
.rec-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.rec-quiet { display: block; margin: 14px 0 0 auto; background: none; border: 0; padding: 0; color: var(--muted); opacity: .7; font: inherit; font-size: 12px; cursor: pointer; }
.rec-quiet:hover { opacity: 1; text-decoration: underline; }
.el-it { display: flex; gap: 8px; align-items: flex-start; padding: 5px 0; border-top: 1px solid var(--line-soft); }
.el-it i { font-style: normal; width: 14px; text-align: center; flex: none; }
.el-it.ok i { color: var(--good); }
.el-it.no i { color: var(--bad); }
.el-it.na i { color: var(--muted); }
.el-it small { display: block; color: var(--muted); font-size: 11.5px; }
.el-it > span { min-width: 0; flex: 1; }
.el-note { margin-top: 4px; padding: 6px 8px; border-left: 2px solid var(--line); background: rgba(236, 228, 210, .03); border-radius: 0 6px 6px 0; }
.el-note-t { font-size: 12px; color: var(--paper-dim); white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.45; }
.el-note.clip:not(.open) .el-note-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.el-note-a { display: flex; gap: 12px; margin-top: 3px; font-size: 11.5px; }
.el-note-a:empty { display: none; }
.el-more { background: none; border: 0; padding: 0; color: var(--brass-hi); font: inherit; cursor: pointer; }
.el-note-a a { color: var(--muted); }
.el-note-a a:hover, .el-more:hover { color: var(--paper); }
/* links inside notes and records */
.lnk { color: var(--sky); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.lnk.ticket, .lnk.discord { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 99px; border: 1px solid rgba(127, 198, 228, .35); background: rgba(127, 198, 228, .08); text-decoration: none; font-size: .95em; white-space: nowrap; vertical-align: baseline; }
.lnk.ticket:hover, .lnk.discord:hover { background: rgba(127, 198, 228, .16); }
.lnk svg { width: 13px; height: 13px; flex: none; }
.lnk small { color: var(--muted); font-size: .85em; }
.chip.part { color: #e39b4a; border-color: #6e4a24; background: rgba(227, 155, 74, .08); }
.pp-pop { position: fixed; z-index: 70; width: 300px; max-width: calc(100vw - 16px); padding: 14px; border-radius: 12px; background: var(--pine-2); border: 1px solid var(--line); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); font-size: 13px; max-height: calc(100vh - 16px); overflow-y: auto; overscroll-behavior: contain; }
.pp-pop-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.pp-pop-h b { font-family: var(--slab); font-size: 15px; }
.pp-pop-sub { font-size: 12px; margin: 2px 0 10px; }
.pp-pop-ov { font-size: 12px; margin: 0 0 10px; color: var(--warn); }
.pp-pop-ov.muted { color: var(--muted); margin: 8px 0 0; }
.pp-opt { padding: 8px 0; border-top: 1px solid var(--line-soft); }
.pp-opt-h { font-weight: 600; margin-bottom: 6px; }
.pp-opt-h .ok, .pp-opt.met .pp-opt-h { color: var(--good); }
.pp-item { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-bottom: 6px; color: var(--paper-dim); }
.pp-item b { color: var(--paper); font-variant-numeric: tabular-nums; }
.pp-meter { grid-column: 1 / -1; display: block; height: 5px; border-radius: 3px; background: rgba(236, 228, 210, .08); overflow: hidden; }
.pp-meter i { display: block; height: 100%; background: var(--brass); border-radius: 3px; }
.pp-meter i.full { background: var(--good); }
.pp-slot:empty { display: none; }
.pp-x { width: 44px; text-align: right; }
.pp-tog svg { width: 18px; height: 18px; transition: transform .2s; }
.pp-row.open .pp-tog svg { transform: rotate(180deg); }
.pp-row.open .pp-tog { border-color: var(--brass); color: var(--brass-hi); }
.pp-detail td { padding: 4px 10px 18px; background: rgba(var(--brass-rgb, 193, 137, 63), .05); }
.pp-detail-in { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.pp-chart svg { width: 100%; height: 170px; display: block; overflow: visible; }
.pp-hit { fill: transparent; }
.pp-bar { fill: var(--brass); }
.pp-bar.future { fill: transparent; }
g:hover .pp-bar { fill: var(--brass-hi); }
.pp-base { stroke: var(--line); stroke-width: 1; }
.pp-sep { stroke: var(--line-soft); stroke-width: 1; stroke-dasharray: 3 3; }
.pp-today { stroke: var(--sky); stroke-width: 1; stroke-dasharray: 2 3; opacity: .7; }
.pp-cum { fill: none; stroke: var(--sky); stroke-width: 2; vector-effect: non-scaling-stroke; }
.pp-target { stroke: var(--good); stroke-width: 1.5; stroke-dasharray: 6 4; vector-effect: non-scaling-stroke; }
.pp-ax { fill: var(--muted); font-size: 10px; text-anchor: middle; }
.pp-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--paper-dim); margin-top: 6px; }
.pp-legend i { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }
.pp-legend .k-bar { background: var(--brass); height: 9px; width: 9px; }
.pp-legend .k-cum { background: var(--sky); }
.pp-legend .k-target { background: repeating-linear-gradient(90deg, var(--good) 0 5px, transparent 5px 8px); }
.pp-sum { margin: 0; display: grid; gap: 8px; font-size: 13.5px; }
.pp-sum div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line-soft); padding-bottom: 6px; }
.pp-sum dt { color: var(--muted); }
.pp-sum dd { margin: 0; text-align: right; }
.pp-sum .up { color: var(--good); }
.pp-sum .down { color: var(--bad); }
@media (max-width: 900px) {
  .pp-detail-in { grid-template-columns: 1fr; }
  /* the table scrolls sideways on phones; keep the graph and summary in view */
  .pp-detail-in { position: sticky; left: 10px; max-width: calc(100vw - 92px); }
  .pp-month { margin-left: 0; }
}

/* Promotion view: the Inactive box filters to inactive people (click again for everyone) */
.stat.pp-inact { cursor: pointer; transition: background-color .15s, border-color .15s; }
.stat.pp-inact:hover { border-color: rgba(217, 103, 92, .35); }
.stat.pp-inact.on { background: rgba(217, 103, 92, .09); border-color: rgba(217, 103, 92, .45); }

/* panel marks: promote (green), demote (red), activity check (blue), remove (red) */
.chip.sky { color: var(--sky); border-color: rgba(127, 198, 228, .45); background: rgba(127, 198, 228, .08); }
.pp-mark.mk-demote, .pp-mark.mk-remove { background: rgba(217, 103, 92, .08); }
.pp-mark.mk-remove { font-weight: 600; }

/* division colours (roster, Settings, overview) */
.chip.dv { border-color: color-mix(in srgb, var(--dv) 45%, transparent); background: color-mix(in srgb, var(--dv) 12%, transparent); color: color-mix(in srgb, var(--dv) 80%, #ece4d2); }
.chip.dv.lead { border-color: var(--dv); background: color-mix(in srgb, var(--dv) 22%, transparent); font-weight: 600; }
.dv-academy { --dv: #e0ab62; }
.dv-srt { --dv: #e0685c; }
.dv-db { --dv: #a98be8; }
.dv-k9 { --dv: #c9925a; }
.dv-teu { --dv: #5fa8e8; }
.dv-gw { --dv: #7fbf6a; }
.dv-asu { --dv: #5fd0c8; }
.dv-pio { --dv: #e07fb5; }
.dv-events { --dv: #d6cf63; }

/* panel summary page */
.ps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ps-card h3 .chip { font-size: 14px; padding: 3px 12px; }
.ps-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line-soft); }
.ps-row:first-of-type { border-top: 0; }
.ps-row .muted { font-size: 12.5px; text-align: right; }
.pp-sumlink .tbadge { margin-left: 4px; }
.pp-det-acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.pp-award.on { color: var(--brass-hi); border-color: rgba(var(--hi-rgb, 224, 171, 98), .5); }
.pp-det-acts .pp-rec { margin-top: 0; }
.pp-sumlink .tbadge { background: rgba(var(--hi-rgb, 224, 171, 98), .2); color: var(--brass-hi); }
.ps-row.ps-aw { flex-direction: column; align-items: flex-start; gap: 6px; }
.ps-clear { margin-left: auto; color: var(--bad); border-color: rgba(217, 103, 92, .4); }
.ps-clear:hover { background: rgba(217, 103, 92, .1); }
.pp-lastc { white-space: nowrap; }
.pp-lastc .pp-mark { margin-bottom: 6px; }

/* ticket formats page */
.tf-h { margin: 40px 0 14px; padding: 22px 0 0 14px; font-size: 21px; border-top: 1px solid var(--line); position: relative; }
.tf-h::before { content: ''; position: absolute; left: 0; top: 24px; bottom: 3px; width: 4px; border-radius: 2px; background: var(--brass); }
.tf-h:first-of-type { margin-top: 18px; border-top: 0; padding-top: 0; }
.tf-h:first-of-type::before { top: 2px; }
.tf-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .tf-grid { grid-template-columns: 1fr; } }
.tf-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line-soft); cursor: pointer; }
.tf-row:first-of-type { border-top: 0; }
.tf-row .person { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; }
.tf-row .muted { font-size: 12.5px; flex: 0 1 auto; max-width: 45%; text-align: right; line-height: 1.35; }
.tf-row .person b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tf-row .person .chip { flex: none; }
.tf-acm { display: inline-flex; vertical-align: middle; margin-left: 4px; }
.tf-acm button { padding: 3px 10px; font-size: 12.5px; }
.tf-acts { margin-top: 12px; margin-bottom: 0; }
.tf-pick { display: grid; gap: 8px; }
.tf-sel { display: flex; flex-wrap: wrap; gap: 6px; }
.tf-x { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0 0 0 4px; font: inherit; }
.tf-x:hover { color: var(--bad); }
.ps-pick { margin-top: 2px; max-width: 100%; font-size: 13px; padding: 6px 8px; }

/* roster: a heading row per rank inside a group */
.rk-sep td { padding: 16px 10px 6px !important; font: 600 11.5px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--brass); border-top: 2px solid var(--line) !important; background: rgba(var(--brass-rgb, 193, 137, 63), .04); }
.rk-sep td span { color: var(--muted); margin-left: 6px; letter-spacing: 0; }
.rk-sep:first-child td { border-top: 0 !important; }

/* Overview: your activity, promotion, service stars, the department */
.ma-big b { font: 700 40px/1 var(--slab); color: var(--brass-hi); }
.ma-big span { display: block; color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.ma-bar { height: 8px; border-radius: 99px; background: rgba(255, 255, 255, .06); margin-top: 14px; overflow: hidden; }
.ma-bar i { display: block; height: 100%; background: var(--brass); border-radius: 99px; }
.ma-bar i.ok { background: var(--good); }
.ma-weeks { margin-top: 14px; }
.ma-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.ma-checks .ok { color: var(--good); }
.ma-checks .no { color: var(--bad); }
.medals { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.medal { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 14px 8px; border: 1px solid var(--line-soft); border-radius: 12px; background: rgba(var(--brass-rgb, 193, 137, 63), .04); }
.medal b { margin-top: 6px; font-family: var(--slab); }
.medal .medal-t { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brass); }
.medal small { font-size: 12px; }
.medal.locked { opacity: .55; }
.medal.locked .medal-t { color: var(--muted); }
.ma-h { margin: 18px 0 8px; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ma-top { display: grid; gap: 4px; }
.ma-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--line-soft); }
.ma-row:first-child { border-top: 0; }
.ma-row .ma-n { width: 18px; color: var(--muted); font-weight: 600; }
.ma-row .ma-h2 { margin-left: auto; font-weight: 700; }
.ma-grid { align-items: start; }

/* Staff log: record changes with Revert on one line */
.rc-row { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; }
.rc-row .t { flex: 1; min-width: 0; }
.rc-row .t small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-row > small, .rc-row > .btn { flex: none; }

/* Transfer Center: the counters work as filters */
.tc-stat { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; transition: border-color .15s, background .15s; }
.tc-stat:hover { border-color: var(--line); }
.tc-stat.on { border-color: var(--brass); background: rgba(var(--brass-rgb, 193, 137, 63), .1); }
.tc-row { cursor: pointer; }
.tc-row:hover td { background: rgba(var(--brass-rgb, 193, 137, 63), .05); }
.snap-grid{display:grid;grid-template-columns:minmax(120px,190px) 1fr;gap:0;border-top:1px solid var(--line,rgba(255,255,255,.08))}.snap-k,.snap-v{padding:9px 6px;border-bottom:1px solid var(--line,rgba(255,255,255,.08));font-size:13.5px}.snap-k{color:var(--muted,#9a9a8a)}.snap-v .chip{margin:0 4px 4px 0}@media(max-width:560px){.snap-grid{grid-template-columns:1fr}.snap-k{border-bottom:0;padding-bottom:0}}
/* Letters of Interest */
.loi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; margin-top: 18px; }
.loi-tile { display: flex; flex-direction: column; gap: 10px; text-align: left; cursor: pointer; font: inherit; color: inherit; padding: 18px 20px; transition: border-color .15s, transform .15s; }
.loi-tile:hover { border-color: var(--brass); transform: translateY(-1px); }
.loi-tile.off { cursor: default; }
.loi-tile.off:hover { border-color: var(--line-soft); transform: none; }
.loi-tile.off .loi-n, .loi-tile.off .loi-b { opacity: .6; }
.loi-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.loi-g { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--paper-dim); font-weight: 600; }
.loi-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.loi-n b { font: 700 17px var(--slab); color: var(--paper); }
.loi-s { font-family: Georgia, 'Times New Roman', serif; font-size: 22px; font-weight: 700; color: var(--brass-hi); letter-spacing: .04em; }
.loi-b { font-size: 13.5px; line-height: 1.55; color: var(--paper-dim); }
.loi-foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; min-height: 34px; }
.loi-why { color: var(--paper-dim); font-size: 13px; }
.loi-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--line-soft); cursor: pointer; flex-wrap: wrap; }
.loi-row:last-child { border-bottom: 0; }
.loi-row:hover { background: rgba(var(--brass-rgb, 193, 137, 63), .05); }
.loi-row .person { flex: 1; min-width: 200px; }
.loi-qa { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.loi-qa > div { margin-top: 4px; white-space: pre-wrap; }
.loi-c { padding: 8px 10px; margin: 6px 0; border-left: 2px solid var(--brass); background: rgba(var(--brass-rgb, 193, 137, 63), .05); border-radius: 0 8px 8px 0; }
.loi-c > div { white-space: pre-wrap; margin-top: 2px; }
/* issuer name on a record: click for a short card about them */
.who-lnk { background: none; border: 0; padding: 0; font: inherit; color: var(--brass-hi); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.who-lnk:hover { color: var(--paper, #ece4d2); }
.who-card { margin: 8px 0 4px; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 10px; background: rgba(var(--brass-rgb, 193, 137, 63), .05); }
.who-divs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.who-meta { font-size: 12.5px; margin-top: 6px; }
/* partly done checklist items: orange, not red */
.el-it.part i { color: var(--warn, #e39b4a); }
/* the promotion view fits the page: activity and chips wrap instead of forcing a sideways scroll */
.pp-act { min-width: 0; flex-wrap: wrap; row-gap: 6px; }
.person { min-width: 150px; }
/* service star tiers */
.medal.t5 svg, .medal.t6 svg { filter: drop-shadow(0 0 6px rgba(143, 211, 255, .45)); }
.medal.t6 .medal-t { color: #f2e6c9; }
.star-tiers { margin-top: 14px; }
.star-tiers summary { cursor: pointer; color: var(--brass-hi); font-size: 13.5px; }
.star-tiers table { margin-top: 8px; }
.star-tiers td.got { color: var(--good); font-weight: 600; }
.tier-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; }
/* numbers in plain, even digits (the slab font's digits go up and down) */
.cred .pts b, .stat .v, .bar-row b, .row .amt, .reward .cost, .pod .score, .lb-row .n, td.num, .staff-tile b, .pp-total b, .ma-big b,
.ma-h2, .pp-month b {
  font-family: 'Inter', system-ui, sans-serif; font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.01em;
}
/* personnel file (the record menu) */
.modal-card.file { width: min(1120px, 100%); max-height: 92vh; padding: 26px 28px; }
.modal-card.file #modal-title { display: none; }
.pf-head { display: flex; gap: 20px; align-items: center; padding: 20px 22px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(120deg, rgba(var(--brass-rgb, 193, 137, 63), .14), rgba(var(--brass-rgb, 193, 137, 63), .02) 60%); }
.pf-head .pf-av { width: 84px; height: 84px; border: 3px solid var(--brass); box-shadow: 0 0 0 5px rgba(var(--brass-rgb, 193, 137, 63), .14); }
.pf-head .pf-av.ph { font-size: 30px; }
.pf-who { flex: 1; min-width: 0; }
.pf-eye { margin: 0; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); font-weight: 600; }
.pf-who h2 { margin: 4px 0 2px; font: 700 26px var(--slab); }
.pf-who h2 .chip { vertical-align: 5px; font-size: 13px; }
.pf-rank { margin: 0; font-size: 15px; color: var(--paper); }
.pf-divs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pf-facts { margin: 0; display: grid; gap: 8px; padding-left: 20px; border-left: 1px solid var(--line); min-width: 170px; }
.pf-facts dt { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); }
.pf-facts dd { margin: 1px 0 0; font-size: 14px; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 14px; }
.pf-stat { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: rgba(0, 0, 0, .14); display: grid; gap: 2px; }
.pf-stat > span { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--paper-dim); font-weight: 600; }
.pf-stat > b { font: 700 30px var(--slab); line-height: 1.1; }
.pf-stat > b i { font-style: normal; font-size: 16px; color: var(--paper-dim); }
.pf-stat > small { font-size: 12px; color: var(--paper-dim); display: flex; align-items: center; gap: 8px; }
.pf-stat.good > b { color: var(--good); }
.pf-stat.part > b { color: #e39b4a; }
.pf-stat.bad { border-color: rgba(214, 92, 92, .5); background: rgba(214, 92, 92, .07); }
.pf-stat.bad > b { color: var(--bad); }
.pf-pips { display: inline-flex; gap: 4px; }
.pf-pips em { width: 22px; height: 6px; border-radius: 3px; background: var(--line); }
.pf-pips em.on { background: var(--bad); }
.pf-rule { margin: 10px 0 16px; font-size: 12.5px; }
.pf-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pf-body.solo { grid-template-columns: 1fr; }
.pf-side { border: 1px solid var(--line); border-radius: 12px; padding: 16px; position: sticky; top: 0; background: rgba(0, 0, 0, .14); }
.pf-side .rec-add { margin: 0; }
.pf-side .rec-add > summary { display: flex; justify-content: center; }
.pf-side .rec-add[open] { border: 0; padding: 0; }
.modal-card.file .rec-it { border-left: 3px solid var(--line); background: rgba(0, 0, 0, .1); }
.modal-card.file .rec-it[data-k="praise"] { border-left-color: var(--good); }
.modal-card.file .rec-it[data-k="warning"] { border-left-color: #e39b4a; }
.modal-card.file .rec-it[data-k="strike"] { border-left-color: var(--bad); }
.modal-card.file .rec-it.old { border-left-color: var(--line); }
@media (max-width: 820px) { .pf-head { flex-wrap: wrap; } .pf-facts { border-left: 0; padding-left: 0; width: 100%; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } .pf-body { grid-template-columns: 1fr; } .pf-side { position: static; order: -1; } }
.ro-row { cursor: pointer; transition: background .12s; }
.ro-row:hover, .ro-row:focus-visible { background: rgba(var(--brass-rgb, 193, 137, 63), .07); outline: none; }
.ro-row:hover td:first-child b { color: var(--brass-hi); }

/* saved Corporal file images */
.cf-img { display: block; max-width: 100%; max-height: 360px; margin-top: 6px; border-radius: 8px; border: 1px solid var(--line); }

/* Leave (LOA / ROA) */
.lv-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; }
.lv-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.lv-cur { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; border-color: rgba(var(--brass-rgb, 193, 137, 63), .45); }
.lv-q { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; }
.lv-q .muted { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; width: 58px; }
.lv-q button { background: none; border: 1px solid var(--line-soft); border-radius: 8px; color: var(--paper-dim); padding: 5px 10px; font-size: 13px; cursor: pointer; }
.lv-q button:hover { color: var(--paper); border-color: var(--line); }
.lv-q button.long { color: #e39b4a; border-color: #6e4a24; }
.lv-cal { display: grid; grid-template-columns: 24px 1fr 1fr 24px; gap: 14px; align-items: start; margin: 12px 0 8px; }
.lv-nav { background: none; border: 0; color: var(--paper-dim); font-size: 22px; cursor: pointer; padding: 0; margin-top: -2px; }
.lv-nav:hover { color: var(--brass-hi); }
.lv-mh { font-weight: 600; text-align: center; margin-bottom: 6px; }
.lv-dg { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.lv-dg i { font-style: normal; font-size: 11px; color: var(--muted); text-align: center; padding-bottom: 2px; }
.lv-dg button { aspect-ratio: 1; background: none; border: 1px solid transparent; border-radius: 6px; color: var(--paper); font-size: 13px; cursor: pointer; padding: 0; }
.lv-dg button:hover:not(:disabled) { border-color: var(--brass); }
.lv-dg button.off { color: var(--muted); opacity: .4; cursor: default; }
.lv-dg button.td { text-decoration: underline; }
.lv-dg button.ex { background: repeating-linear-gradient(135deg, rgba(127, 198, 228, .12) 0 4px, transparent 4px 8px); }
.lv-dg button.in { background: rgba(var(--brass-rgb, 193, 137, 63), .16); }
.lv-dg button.in.long { background: rgba(227, 155, 74, .26); }
.lv-dg button.a, .lv-dg button.b { background: var(--brass); color: #1a1408; font-weight: 700; }
.lv-sum { min-height: 22px; font-size: 14px; }
.lv-sum .long { color: #e39b4a; }
.lv-w { font-size: 12.5px; color: #e39b4a; margin-top: 4px; }
.lv-w::before { content: '⚠ '; }
.lv-sp { margin-top: 10px; padding: 10px 12px; border: 1px solid #6e4a24; border-radius: 10px; background: rgba(227, 155, 74, .06); }
.lv-chk { display: flex; gap: 8px; align-items: center; font-size: 13px; color: #e39b4a; margin-bottom: 6px; }
#lv-reason .f { margin-top: 10px; }
.lv-row { padding: 12px 0; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; }
.lv-row:first-of-type { border-top: 0; padding-top: 0; }
.lv-row-h { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.lv-note { font-size: 13px; color: var(--paper-dim); border-left: 2px solid var(--line); padding: 2px 0 2px 10px; white-space: pre-wrap; }
.lv-acts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.lv-acts:empty { display: none; }
.lv-bar { height: 4px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.lv-bar i { display: block; height: 100%; background: var(--brass); }
.side-nav a .nav-n { margin-left: auto; min-width: 18px; padding: 0 6px; border-radius: 9px; background: var(--brass); color: #1a1408; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
@media (max-width: 900px) { .lv-grid { grid-template-columns: 1fr; } .lv-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .lv-cal { grid-template-columns: 24px 1fr 24px; } .lv-cal .lv-m + .lv-m { display: none; } }

/* Leave Review: people, notes, who decided */
.lv-row-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.lv-name { font-weight: 700; color: var(--paper); text-decoration: none; border-bottom: 1px dotted transparent; }
.lv-name:hover { color: var(--brass-hi); border-bottom-color: var(--brass-hi); text-decoration: none; }
.lv-who { color: var(--sky); text-decoration: none; border-bottom: 1px dotted rgba(127, 198, 228, .5); }
.lv-who:hover { color: #a9dcf0; text-decoration: none; }
.lv-dates { font-size: 13.5px; font-variant-numeric: tabular-nums; }
.lv-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.chip.lv-role { font-size: 12px; }
.chip.lv-role .lv-who { color: inherit; border-bottom-color: currentColor; }
.chip.lv-loa { color: #e8b86a; border-color: rgba(232, 184, 106, .45); background: rgba(232, 184, 106, .1); font-weight: 700; }
.chip.lv-roa { color: #b9a8e8; border-color: #4d4370; background: rgba(142, 124, 195, .12); font-weight: 700; }
.chip.lv-src { font-size: 11px; color: var(--muted); border-style: dashed; }
.lv-tl { display: grid; gap: 6px; margin-top: 4px; }
.lv-ent { position: relative; font-size: 13px; line-height: 1.5; color: var(--paper-dim); background: rgba(255, 255, 255, .025); border: 1px solid var(--line-soft); border-left: 3px solid rgba(var(--brass-rgb, 193, 137, 63), .55); border-radius: 8px; padding: 7px 10px; }
.lv-ent + .lv-ent { border-left-color: rgba(127, 198, 228, .55); }
.lv-date { color: var(--brass-hi); font-weight: 600; white-space: nowrap; }
.lv-cs { font-family: ui-monospace, monospace; font-size: 12px; color: var(--paper); }
/* single-day picker */
.lv-pkgrid { align-items: start; }
.lv-pk-l { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.lv-pq { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.lv-pq button { background: none; border: 1px solid var(--line-soft); border-radius: 999px; color: var(--paper-dim); padding: 3px 10px; font-size: 12.5px; cursor: pointer; }
.lv-pq button:hover:not(:disabled) { color: var(--paper); border-color: var(--brass); }
.lv-pq button.on { background: rgba(var(--brass-rgb, 193, 137, 63), .18); border-color: var(--brass); color: var(--brass-hi); }
.lv-pq button:disabled { opacity: .35; cursor: default; }
.lv-pk { border: 1px solid var(--line-soft); border-radius: 10px; padding: 8px; background: rgba(0, 0, 0, .15); }
.lv-pk-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.lv-pk .lv-dg button.from { box-shadow: inset 0 0 0 1px var(--brass); }
.lv-pk .lv-dg button.base { box-shadow: inset 0 0 0 1px var(--sky); }
.lv-pk-v { font-size: 13px; margin-top: 6px; min-height: 18px; }
.lv-plus { color: #7fd08a; font-weight: 600; }

.lv-ent-h { font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
.lv-ent-h .lv-who, .lv-ent-h b { text-transform: none; letter-spacing: 0; font-size: 12.5px; }

.pp-slots { font-size: 12px; }
.pp-item.pp-focus b, .pp-item.pp-focus > span { color: var(--brass-hi); }

/* Ticket Formats: Academy progress pills, outreach, Select, and the hover card */
.tf-info { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; max-width: 60%; cursor: help; border-radius: 10px; padding: 2px; }
.tf-info:hover, .tf-info:focus-visible { outline: 1px dashed rgba(var(--brass-rgb, 193, 137, 63), .55); outline-offset: 2px; }
.tf-pg { font-size: 12px; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--line-soft); color: var(--paper-dim); white-space: nowrap; }
.tf-pg b { font-weight: 600; }
.tf-pg.good { border-color: rgba(127, 191, 106, .4); } .tf-pg.good b { color: var(--good); }
.tf-pg.part { border-color: rgba(224, 166, 75, .45); } .tf-pg.part b { color: var(--warn); }
.tf-pg.bad { border-color: rgba(217, 103, 92, .4); } .tf-pg.bad b { color: var(--bad); }
.tf-pg.warn { color: var(--warn); border-style: dashed; }
.tf-out { font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; color: var(--night); background: var(--brass-hi); white-space: nowrap; box-shadow: 0 0 0 3px rgba(var(--hi-rgb, 224, 171, 98), .16); }
.tf-out.none { background: none; color: var(--muted); font-weight: 400; box-shadow: none; border: 1px dashed var(--line); }
.tf-selrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12.5px; }
.tf-selrow button { background: none; border: 1px solid var(--line); color: var(--paper-dim); border-radius: 999px; padding: 3px 10px; font: inherit; cursor: pointer; }
.tf-selrow button:hover:not(:disabled) { border-color: var(--brass); color: var(--paper); }
.tf-selrow button:disabled { opacity: .45; cursor: default; }
.tf-pop { display: none; width: 340px; max-height: 70vh; overflow: auto; }
.tfp-s { margin: 12px 0 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); }
.tfp-ol { margin: 8px 0 4px; font-size: 12px; color: var(--paper-dim); }
.tfp-it { display: grid; grid-template-columns: 1fr auto; gap: 3px 10px; margin-bottom: 7px; }
.tfp-it b.good { color: var(--good); } .tfp-it b.part { color: var(--warn); } .tfp-it b.bad { color: var(--bad); }
.tfp-bar { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: var(--line-soft); overflow: hidden; }
.tfp-bar i { display: block; height: 100%; border-radius: 3px; background: var(--bad); }
.tfp-bar i.good { background: var(--good); } .tfp-bar i.part { background: var(--warn); }
.tfp-o { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 7px 0; border-top: 1px solid var(--line-soft); color: var(--paper); text-decoration: none; }
.tfp-o:first-of-type { border-top: 0; }
.tfp-o:hover b { color: var(--brass-hi); }
.tfp-d { color: var(--muted); font-size: 12px; }
.tfp-t { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.tfp-ok { color: var(--good); font-size: 12px; }

/* every Ticket Formats list: names never cut off, the pills wrap under them when there's no room */
.tf-row { flex-wrap: wrap; row-gap: 6px; }
.tf-row .person { flex: 1 0 auto; max-width: 100%; }
.tf-info { max-width: 100%; margin-left: auto; }
.tfp-no { color: var(--bad); font-size: 12px; }
.tfp-tasks { display: grid; gap: 3px; font-size: 12.5px; }
.tfp-tasks .good { color: var(--good); } .tfp-tasks .bad { color: var(--bad); }
.tfp-weeks { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; margin-top: 8px; text-align: center; }
.tfp-weeks i { display: block; margin: 0 auto 3px; width: 70%; border-radius: 3px 3px 0 0; background: var(--brass); }
.tfp-weeks small { display: block; font-size: 11px; }

/* Ticket Formats: rows stay on one line (the cards widen instead), a bit more room between the big sections */
.tf-row { flex-wrap: nowrap; }
.tf-info { flex: none; flex-wrap: nowrap; max-width: none; }
#view.tf-wide { max-width: none; }
#view.tf-wide .view-head { max-width: 1132px; }
#view.tf-wide .tf-grid { grid-template-columns: repeat(var(--tf-n, 2), var(--tf-col)); justify-content: start; }
.tf-h { margin-top: 64px; }
@media (max-width: 900px) { .tf-row { flex-wrap: wrap; } .tf-info { flex: 1 1 auto; flex-wrap: wrap; } }

/* two characters on one profile ("Hasan/Halae Kimbo"): one name and picture at a time */
[data-ped][hidden] { display: none !important; }
.cmd-card.two-ped { position: relative; cursor: pointer; }
.cmd-card.two-ped:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.ped-sw { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 9px; border-radius: 999px; background: rgba(var(--night-rgb, 7, 13, 8), .82); border: 1px solid var(--line); color: var(--brass-hi); font: 600 11.5px var(--sans); letter-spacing: .04em; pointer-events: none; }
.ped-name { all: unset; cursor: pointer; font: 700 18px var(--slab); color: var(--paper); border-bottom: 1px dashed rgba(var(--brass-rgb, 193, 137, 63), .6); }
.ped-name:hover { color: var(--brass-hi); }
.ped-name:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; border-radius: 4px; }
.ped-name .sw { margin-left: 8px; font: 600 11.5px var(--sans); color: var(--brass); letter-spacing: .04em; vertical-align: 2px; }

/* rank icons (the Discord role icons) next to rank names */
.ins { display: inline-block; height: 16px; width: auto; max-width: 22px; object-fit: contain; vertical-align: -3px; margin-right: 6px; }
span.ins { font-size: 14px; line-height: 1; height: auto; }
/* callsigns as small nameplates in the theme colour */
.chip.cs-plate { border-radius: 3px; padding: 1px 7px; font: 700 11.5px var(--slab); letter-spacing: .06em; color: #1b1407;
  background: linear-gradient(180deg, var(--brass-hi), var(--brass) 55%, var(--brass-lo)); border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .2); }
/* faint county-map contour lines behind the sidebar */
.side { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 600' fill='none' stroke='%23ffffff' stroke-opacity='.05' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M154 150 L149 161 L135 162 L122 170 L112 160 L110 150 L114 140 L121 129 L135 137 L148 140 L154 150Z'/%3E%3Cpath d='M178 150 L168 172 L140 175 L114 190 L94 171 L90 150 L97 131 L113 108 L141 123 L165 130 L178 150Z'/%3E%3Cpath d='M202 150 L188 183 L145 187 L106 210 L76 181 L70 150 L81 121 L104 87 L146 110 L183 119 L202 150Z'/%3E%3Cpath d='M226 150 L207 195 L150 200 L97 230 L58 192 L50 150 L64 112 L96 66 L152 96 L200 109 L226 150Z'/%3E%3Cpath d='M250 150 L226 206 L155 212 L89 250 L40 202 L30 150 L48 102 L87 45 L157 83 L218 99 L250 150Z'/%3E%3Cpath d='M274 150 L245 217 L160 225 L81 270 L22 213 L10 150 L32 93 L79 24 L163 69 L235 89 L274 150Z'/%3E%3Cpath d='M298 150 L264 228 L165 237 L73 290 L4 223 L-10 150 L15 83 L70 3 L168 56 L253 79 L298 150Z'/%3E%3Cpath d='M350 420 L349 431 L338 441 L323 438 L314 429 L302 420 L310 409 L324 404 L338 401 L353 407 L350 420Z'/%3E%3Cpath d='M369 420 L368 442 L347 462 L316 456 L298 439 L273 420 L290 397 L317 389 L345 383 L376 393 L369 420Z'/%3E%3Cpath d='M389 420 L387 453 L355 483 L308 473 L282 448 L245 420 L271 386 L311 373 L353 364 L399 380 L389 420Z'/%3E%3Cpath d='M409 420 L406 464 L364 504 L301 491 L266 457 L217 420 L251 374 L305 358 L360 345 L421 367 L409 420Z'/%3E%3Cpath d='M428 420 L425 475 L372 525 L294 509 L250 466 L188 420 L231 363 L298 342 L368 326 L444 354 L428 420Z'/%3E%3Cpath d='M448 420 L444 486 L381 546 L287 527 L234 476 L160 420 L211 351 L292 326 L376 308 L467 340 L448 420Z'/%3E%3Cpath d='M102 520 L94 528 L86 534 L73 538 L65 529 L62 520 L62 510 L73 503 L85 508 L98 510 L102 520Z'/%3E%3Cpath d='M125 520 L109 537 L91 548 L65 557 L50 537 L45 520 L44 499 L67 487 L90 496 L115 500 L125 520Z'/%3E%3Cpath d='M147 520 L123 545 L97 562 L58 575 L36 546 L27 520 L26 489 L60 470 L95 484 L133 489 L147 520Z'/%3E%3Cpath d='M169 520 L137 553 L103 576 L50 594 L21 554 L9 520 L8 478 L53 454 L100 472 L150 479 L169 520Z'/%3E%3C/svg%3E"), linear-gradient(180deg, var(--side-1, #08110a), var(--side-2, #0a150c)); background-size: 100% auto, auto; background-repeat: no-repeat; background-position: center 40px, 0 0; }

/* ───── finishing touches (Oct 2026) ───── */
.side-nav a, .btn, .seg button, .staff-tabs a, .tool-row, a.staff-tile, .th-card, .th-name, .th-avopt { transition: box-shadow .2s, border-color .2s, background-color .2s, color .2s; }
.side-nav a:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .32); background: rgba(var(--brass-rgb, 193, 137, 63), .06); box-shadow: 0 0 14px rgba(var(--brass-rgb, 193, 137, 63), .2); }
.side-nav a.on:hover { box-shadow: 0 0 16px rgba(var(--brass-rgb, 193, 137, 63), .28); }
.btn:hover, .btn:focus-visible { box-shadow: 0 0 10px rgba(var(--brass-rgb, 193, 137, 63), .25); }
.btn.danger:hover { box-shadow: 0 0 10px rgba(217, 103, 92, .22); }
.btn[disabled]:hover { box-shadow: none; }
.seg button:hover:not(.on) { color: var(--paper); background: rgba(var(--brass-rgb, 193, 137, 63), .06); }
.seg button.on { box-shadow: inset 0 -2px 0 var(--brass); }
.staff-tabs a:hover { color: var(--brass-hi); }
a.staff-tile:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .4); box-shadow: 0 0 18px rgba(var(--brass-rgb, 193, 137, 63), .2); }
.tool-row:hover { background: rgba(var(--brass-rgb, 193, 137, 63), .05); }
.card { transition: border-color .2s, box-shadow .2s; }
.card:not(.modal-card):hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .26); box-shadow: 0 0 16px rgba(var(--brass-rgb, 193, 137, 63), .1); }
.card, .modal-card { border-radius: 10px; } .btn { border-radius: 8px; } .in, .seg, select.in, .pf-stat { border-radius: 8px; }
.modal-card { box-shadow: 0 24px 70px rgba(0, 0, 0, .6), 0 0 0 1px rgba(var(--brass-rgb, 193, 137, 63), .12); }
.card.stat, a.staff-tile { position: relative; overflow: hidden; }
.card.stat::before, a.staff-tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, var(--brass), color-mix(in srgb, var(--brass) 15%, transparent)); }
.staff-tile .tile-ic { display: none; } .card.stat .v, .staff-tile b { font-family: var(--slab); }
.card.stat .k, .staff-tile small, .acc-grid .k, .pf-stat > span { text-transform: none; letter-spacing: .01em; font-size: 13px; }
/* division tags as stitched patches; "+N" for the ones that don't fit */
.chip.dv, .who-divs .chip:not(.cs-plate), .pf-divs .chip:not(.cs-plate), #view td .chip.brass:not(.cs-plate) { border-radius: 3px; padding: 3px 9px; font-weight: 600; font-size: 12.5px; letter-spacing: .01em; line-height: 1.25; display: inline-flex; align-items: center;
  background: linear-gradient(180deg, color-mix(in srgb, currentColor 18%, transparent), color-mix(in srgb, currentColor 7%, transparent)); border: 1px solid color-mix(in srgb, currentColor 55%, transparent);
  outline: 1px dashed color-mix(in srgb, currentColor 25%, transparent); outline-offset: -3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.chip.dv-more { border-radius: 3px; padding: 3px 8px; font-weight: 600; font-size: 12.5px; color: var(--paper-dim); background: rgba(255, 255, 255, .05); border: 1px solid var(--line-soft); cursor: default; }
.chip.dv-more:hover { color: var(--paper); border-color: rgba(var(--brass-rgb, 193, 137, 63), .45); }
.dv-pop { position: fixed; z-index: 90; max-width: 320px; display: flex; flex-wrap: wrap; gap: 6px; padding: 10px; border-radius: 8px; pointer-events: none;
  background: var(--pine-2); border: 1px solid rgba(var(--brass-rgb, 193, 137, 63), .3); box-shadow: 0 12px 34px rgba(0, 0, 0, .55); }
.dv-pop .chip { display: inline-flex !important; }
.dv-pop-h { width: 100%; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--paper-dim); margin-bottom: 2px; }
td.chip.cs-plate, td .chip.cs-plate { position: relative; top: -1.5px; }
/* rank bands, rows */
#view tr.rk-sep td { padding-top: 11px !important; padding-bottom: 11px !important; box-shadow: inset 1px 0 0 rgba(var(--brass-rgb, 193, 137, 63), .18), inset -1px 0 0 rgba(var(--brass-rgb, 193, 137, 63), .18); }
#view tr.ro-row { cursor: pointer; } #view tr.ro-row td { transition: background-color .15s, box-shadow .15s; }
#view tr.ro-row:hover td { background: rgba(var(--brass-rgb, 193, 137, 63), .045); } #view tr.ro-row:hover td:first-child { box-shadow: inset 2px 0 0 var(--brass); }
.person.nosign { position: relative; } .nosign-dot { position: absolute; left: 22px; top: 22px; width: 9px; height: 9px; border-radius: 50%; background: #6b736c; border: 2px solid var(--pine-2); }
.person .muted[title="Has not signed in to the portal yet"] { display: none; }
/* open badge spots as pins */
.pp-slots.slot-pins { display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.slot-pin { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 3px; font-size: 12px; font-weight: 600; line-height: 1.4; border: 1px solid; }
.slot-pin b { font-weight: 700; }
.slot-pin.open { color: var(--good, #7cc48a); border-color: color-mix(in srgb, var(--good, #7cc48a) 45%, transparent); background: color-mix(in srgb, var(--good, #7cc48a) 10%, transparent); }
.slot-pin.full { color: var(--muted, #9aa69c); border-color: var(--line-soft); background: rgba(255, 255, 255, .03); }
.card-head > span > .chip:last-child { border-radius: 3px; font-family: var(--slab); font-weight: 700; min-width: 24px; justify-content: center; }
/* sidebar: active bar and group rules */
.side-nav a.on { position: relative; } .side-nav a.on::before { content: ''; position: absolute; left: 0; top: 11px; bottom: 11px; width: 2px; border-radius: 0 3px 3px 0; background: var(--brass); opacity: .85; }
.side-nav .grp { display: flex; align-items: center; gap: 8px; } .side-nav .grp::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-soft), transparent); }
/* inputs, page, scrollbar */
.in:focus, select.in:focus, textarea.in:focus { outline: none; border-color: rgba(var(--brass-rgb, 193, 137, 63), .6) !important; box-shadow: 0 0 0 3px rgba(var(--brass-rgb, 193, 137, 63), .15); }
#view.anim > * { animation: view-in .22s ease-out both; } @keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
html { scrollbar-color: rgba(236, 228, 210, .13) transparent; scrollbar-width: thin; } ::selection { background: rgba(var(--brass-rgb, 193, 137, 63), .35); color: #fff; }
#view { max-width: 1440px; }
/* 1080p-ish screens: a bit narrower so there is some empty space on the right, like on 1440p */
@media (min-width: 1600px) and (max-width: 2300px) { #view { max-width: 1300px; } }
/* the SOP tab (the SOP's own styles come from sop.css, loaded when the tab opens) */
#view.sop-on { max-width: none; }
.sop-tab { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 28px; align-items: start; }
.sop-tab .sop-side { position: sticky; top: 16px; max-height: calc(100vh - 32px); }
.sop-tab .sop-main .sop-page { display: block; }
.sop-tab .sop-nav a.on { color: var(--brass-hi); font-weight: 600; }
.st-res { display: grid; gap: 8px; margin-bottom: 18px; } .st-res:empty { display: none; }
.st-res a, .st-pager a { display: block; padding: 10px 12px; border: 1px solid var(--line-soft); border-radius: 8px; color: inherit; text-decoration: none; }
.st-res a:hover, .st-pager a:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .4); }
.st-res b { color: var(--brass-hi); display: block; margin-bottom: 2px; } .st-res small, .st-pager small { display: block; color: var(--paper-dim); font-size: 12px; }
.st-pager { display: flex; justify-content: space-between; gap: 12px; margin-top: 28px; } .st-pager a { flex: 1; } .st-pager a.next { text-align: right; }
@media (max-width: 900px) { .sop-tab { grid-template-columns: 1fr; } .sop-tab .sop-side { position: static; max-height: 40vh; } }
/* the sidebar stays put while a personnel file is open: "overflow-x: hidden" on body (site.css) turned the page into its
   own scroll box once the pop-up locks scrolling, so the sticky sidebar jumped to the top of the page. clip doesn't. */
body { overflow-x: clip; }
/* the callsign nameplate next to a name in a heading (overview card, personnel file): sits level with the name */
h1 .chip.cs-plate, h2 .chip.cs-plate, h3 .chip.cs-plate { position: relative; top: 3px; margin-left: 4px; }
/* Transfer Center: people who left get a steel plate where current deputies have the brass callsign plate; unknown people get the badge */
.chip.tc-gone { border-radius: 3px; padding: 1px 7px; font: 700 11.5px var(--slab); letter-spacing: .06em; text-transform: uppercase; color: #15181b;
  background: linear-gradient(180deg, #c6cbd1, #8f969d 55%, #626970); border: 1px solid rgba(0, 0, 0, .4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 2px rgba(0, 0, 0, .45); text-shadow: 0 1px 0 rgba(255, 255, 255, .25); position: relative; top: -1.5px; }
.av.tc-ph { display: inline-grid; place-items: center; overflow: hidden; }
.av.tc-ph img { width: 72%; height: auto; opacity: .75; }
/* the Transfer tag's hover card on the roster: where from, their rank there, when */
.chip.transfer[data-xf] { cursor: help; }
.xf-card { position: fixed; z-index: 70; width: 230px; padding: 10px 12px 8px; border-radius: 10px; font-size: 12.5px; pointer-events: none;
  background: var(--pine-2, #102015); border: 1px solid rgba(108, 166, 217, .35); box-shadow: 0 12px 30px rgba(0, 0, 0, .55); animation: xf-in .12s ease-out; }
.xf-route { display: flex; align-items: center; justify-content: center; gap: 8px; padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--line-soft); color: rgba(108, 166, 217, .8); }
.xf-dept { font: 700 12px var(--slab); letter-spacing: .08em; padding: 3px 9px; border-radius: 4px; border: 1px solid rgba(108, 166, 217, .45); background: rgba(108, 166, 217, .1); color: #a9cdf0; }
.xf-dept.us { border-color: rgba(var(--brass-rgb, 193, 137, 63), .55); background: rgba(var(--brass-rgb, 193, 137, 63), .14); color: var(--brass-hi); }
.xf-row { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; align-items: baseline; padding: 3px 0; }
.xf-row span { color: var(--muted); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; }
.xf-row b { text-align: right; font-weight: 600; color: var(--paper); }
.xf-row small { grid-column: 2; text-align: right; color: var(--muted); font-size: 11px; margin-top: -2px; }
@keyframes xf-in { from { opacity: 0; transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .xf-card { animation: none; } }

/* LOA / ROA Review: the name line like the roster, buttons on the right of it, and a time bar with today marked */
.lv-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.lv-row-top .lv-av { width: 28px; height: 28px; border-radius: 50%; flex: none; font-size: 12px; }
.lv-rank { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13.5px; }
.lv-rank img { height: 15px; width: auto; }
.lv-acts-top { margin: 0 0 0 auto !important; display: inline-flex; gap: 6px; }
.lv-acts-top .btn { padding: .32em .8em; font-size: 12.5px; }
.lv-time { display: flex; align-items: center; gap: 10px; margin: 7px 0 9px; }
.lv-track { position: relative; flex: 1; max-width: 380px; height: 6px; border-radius: 99px; background: rgba(236, 228, 210, .08); }
.lv-track i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, rgba(var(--brass-rgb, 193, 137, 63), .3), rgba(var(--brass-rgb, 193, 137, 63), .85)); }
.lv-track b { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--brass-hi); box-shadow: 0 0 0 3px rgba(var(--brass-rgb, 193, 137, 63), .25); }
.lv-time span { font-size: 12.5px; font-weight: 600; color: var(--paper-dim); white-space: nowrap; }
.lv-time.soon .lv-track i { background: linear-gradient(90deg, rgba(227, 155, 74, .3), #e39b4a); }
.lv-time.soon b { background: #f0b46c; box-shadow: 0 0 0 3px rgba(227, 155, 74, .25); }
.lv-time.soon span { color: #f0b46c; }
.lv-time.over .lv-track i { background: linear-gradient(90deg, rgba(217, 103, 92, .3), #d9675c); }
.lv-time.over b { background: #f0a49b; box-shadow: 0 0 0 3px rgba(217, 103, 92, .3); }
.lv-time.over span { color: #f0a49b; }
.lv-time.nostart .lv-track { background: repeating-linear-gradient(90deg, rgba(236, 228, 210, .16) 0 6px, transparent 6px 11px); }
/* each person on leave as their own small card, with space between */
#lv-act { margin-top: 14px; }
#lv-act .lv-row, .lv-grid .card > .lv-row { padding: 16px 18px; margin: 0 0 22px; border: 1px solid var(--line); border-radius: 12px; background: rgba(236, 228, 210, .035); box-shadow: 0 4px 16px rgba(0, 0, 0, .28); }
#lv-act .lv-row:last-child, .lv-grid .card > .lv-row:last-child { margin-bottom: 0; }

/* Department: a picture card for everyone, grouped by rank tier */
.dp-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; padding: 14px 16px; }
#dp-q { flex: 1; min-width: 220px; }
#dp-d { width: auto; min-width: 160px; }
.dp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.dp-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--pine-2); transition: border-color .2s, box-shadow .2s, transform .2s; }
.dp-card:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .4); box-shadow: 0 0 18px rgba(var(--brass-rgb, 193, 137, 63), .12); transform: translateY(-2px); }
.dp-card[hidden], .dp-tier[hidden] { display: none; }
.dp-pic { position: relative; aspect-ratio: 1; display: grid; place-items: center; border-bottom: 1px solid var(--line-soft);
  background: radial-gradient(circle at 50% 45%, rgba(var(--brass-rgb, 193, 137, 63), .14), transparent 65%), #0b120d; }
.dp-pic > img:not(.dp-disc):not(.dp-badge) { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-disc { width: 46%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--brass-rgb, 193, 137, 63), .5); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
.dp-badge { width: 40%; opacity: .5; }
.dp-add { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 6px 8px; border-radius: 8px; font: 600 12px var(--sans, Inter, sans-serif); cursor: pointer;
  color: var(--brass-hi); background: rgba(8, 14, 10, .82); border: 1px dashed rgba(var(--brass-rgb, 193, 137, 63), .6); }
.dp-add:hover { background: rgba(var(--brass-rgb, 193, 137, 63), .18); }
.dp-body { padding: 10px 12px 13px; text-align: center; }
.dp-body h3 { font-size: 16px; margin: 0 0 5px; }
.dp-body h3 a { color: inherit; text-decoration: none; }
.dp-body h3 a:hover { color: var(--brass-hi); }
.dp-rank { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; font-size: 13px; color: var(--paper-dim); }
.dp-rank img { height: 15px; width: auto; }
.dp-divs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-top: 8px; }
.dp-divs .chip { font-size: 11px; padding: 2px 7px; }
/* the rank icon before the rank on the Administration cards */
.cmd-rank .rk-ic { height: 16px; width: auto; vertical-align: -3px; margin-right: 6px; }
/* "On this page": the heading you jumped to lights up for a moment */
.sx h2 { scroll-margin-top: 18px; }
h2.sx-hit { animation: sx-hit 2.2s ease-out; border-radius: 6px; }
@keyframes sx-hit {
  0%, 35% { background: rgba(var(--brass-rgb, 193, 137, 63), .2); box-shadow: 0 0 0 8px rgba(var(--brass-rgb, 193, 137, 63), .2), 0 0 26px rgba(var(--brass-rgb, 193, 137, 63), .35); color: var(--brass-hi); }
  100% { background: transparent; box-shadow: 0 0 0 8px transparent, 0 0 26px transparent; }
}
@media (prefers-reduced-motion: reduce) { h2.sx-hit { animation-duration: .01s; } }
/* Promotion view → Timelogs (remove / put back) */
.tl-list { display: grid; gap: 6px; max-height: 48vh; overflow: auto; }
.tl-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: 8px; cursor: pointer; }
.tl-row b { min-width: 58px; font-variant-numeric: tabular-nums; }
.tl-row span { color: var(--paper-dim); font-size: 13px; }
.tl-row:has(input:checked) { border-color: rgba(217, 103, 92, .55); background: rgba(217, 103, 92, .08); }
.tl-row.gone { cursor: default; flex-wrap: wrap; opacity: .8; }
.tl-row.gone small { flex: 1; color: var(--muted); font-size: 12px; }
.tl-h { margin: 16px 0 6px; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* the sidebar on shorter screens (1080p and laptops): tighter, so everything fits without a scrollbar */


/* rows open a personnel file: instead of a browser tooltip over the cards, a small arrow slides in after the name on hover */
#view tr.ro-row td:first-child .person b::after { content: '›'; display: inline-block; margin-left: 6px; font-weight: 700; color: var(--brass-hi, var(--brass)); opacity: 0; transform: translateX(-4px); transition: opacity .15s, transform .15s; }
#view tr.ro-row:hover td:first-child .person b::after, #view tr.ro-row:focus-visible td:first-child .person b::after { opacity: .8; transform: none; }
/* first visits on the roster: a note above it, the first row glows, and hovering a row says "Open file ›" */
.ro-tip { position: relative; display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 12px 14px 12px 14px; border-radius: 12px; border: 1px solid rgba(var(--brass-rgb, 193, 137, 63), .45);
  background: linear-gradient(90deg, rgba(var(--brass-rgb, 193, 137, 63), .15), rgba(var(--brass-rgb, 193, 137, 63), .04)); animation: ro-tip-in .35s ease-out; }
.ro-tip::after { content: ''; position: absolute; left: 34px; bottom: -7px; width: 12px; height: 12px; transform: rotate(45deg); background: rgb(var(--brass-rgb, 193, 137, 63)); opacity: .45; border-radius: 2px; }
.ro-tip-i { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--brass-rgb, 193, 137, 63), .16); color: var(--brass-hi); }
.ro-tip-i svg { width: 20px; height: 20px; }
.ro-tip > div { flex: 1; min-width: 0; }
.ro-tip b { display: block; font: 700 15px var(--slab, inherit); color: var(--paper); }
.ro-tip p { margin: 3px 0 0; font-size: 13px; color: var(--paper-dim); line-height: 1.5; }
.ro-tip .chip { pointer-events: none; font-size: 11px; padding: 1px 7px; vertical-align: 1px; }
@keyframes ro-tip-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
#view tr.ro-row.ro-pulse td { animation: ro-pulse 1.8s ease-in-out 1s 4; }
@keyframes ro-pulse { 0%, 100% { background-color: transparent; } 50% { background-color: rgba(var(--brass-rgb, 193, 137, 63), .16); } }
.ro-new #view tr.ro-row td:first-child .person b::after { content: 'Open file ›'; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; vertical-align: 1px; }
@media (prefers-reduced-motion: reduce) { .ro-tip, #view tr.ro-row.ro-pulse td { animation: none; } }
/* Department: pictures waiting for approval (Department Admin and up) */
.dp-wait { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 6px 12px 6px 10px; border-radius: 999px; font-size: 13px; color: var(--paper-dim);
  background: rgba(var(--brass-rgb, 193, 137, 63), .1); border: 1px solid rgba(var(--brass-rgb, 193, 137, 63), .35); }
.dp-wait i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--brass-hi, var(--brass)); box-shadow: 0 0 8px rgba(var(--brass-rgb, 193, 137, 63), .8); }
.dp-wait b { color: var(--paper); }
.dp-wait a { color: var(--brass-hi, var(--brass)); font-weight: 600; margin-left: 2px; }
/* sidebar: who made the site (like the Academy Portal), and a thin ring in the theme's colour around your picture */
/* sits in the sidebar's bottom padding, so the user box stays where it was */
.side-credit { position: absolute; left: 0; right: 0; bottom: 5px; margin: 0; font-size: 10px; line-height: 1; letter-spacing: .03em; text-align: center; color: var(--muted); opacity: .4; pointer-events: none; }
.side { padding-bottom: 24px; }
.side-user > .av { border: 0; box-shadow: 0 0 0 2px var(--pine-2, #10200f), 0 0 0 3.5px rgba(var(--brass-rgb, 193, 137, 63), .55); }
@media (max-height: 1060px) and (min-width: 821px) { .side { padding-bottom: 20px; } .side-credit { bottom: 4px; } }
/* Settings → Administration: smaller picture buttons; "+ 2nd character" sits quietly under them once there's a picture */
.prof-pic { gap: 6px; }
.prof-pic .btn { padding: 5px 8px; font-size: 12px; justify-content: center; }
.prof-pic .prof-two { border-style: dashed; color: var(--muted); opacity: .75; }
.prof-pic .prof-two:hover { opacity: 1; color: var(--paper); }
/* tables: a name and its callsign plate stay on one line; the divisions fold into "+N" first when the page gets narrower */
#view table .person > div { white-space: nowrap; }
#view table .person > div .chip { white-space: nowrap; }

/* BCSO Hub: a quiet card at the bottom of the Overview */
.hub-cta { display: flex; align-items: center; gap: 14px; margin-top: 16px; padding: 14px 18px; color: var(--paper); text-decoration: none !important; border-style: dashed; }
.hub-cta:hover { border-style: solid; border-color: rgba(var(--brass-rgb, 193, 137, 63), .5); }
.hub-cta .tile-t b { font-size: 16px; }
.hub-cta .tile-t small { color: var(--muted); }
.hub-cta .hub-go { margin-left: auto; font-size: 13px; color: var(--brass-hi); white-space: nowrap; }
@media (max-width: 640px) { .hub-cta { flex-wrap: wrap; } .hub-cta .hub-go { margin-left: 56px; } }

/* Department Administration only: shown, but greyed out for everyone else */
.btn.da-only[disabled] { opacity: .42; cursor: not-allowed; filter: saturate(.3); }
/* Settings → Overview: removed timelogs */
.tlr-list { display: grid; }
.tlr-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line-soft); }
.tlr-row:first-child { border-top: 0; }
.tlr-row small { display: block; margin-top: 2px; font-size: 12.5px; }

/* LOA / ROA: Manage (Department Administration) and each deputy's history */
.mg-h { margin: 18px 0 8px; font-size: 15px; }
.lvh { display: grid; }
.lvh-i { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--line-soft); font-size: 13.5px; line-height: 1.5; }
.lvh-i:first-child { border-top: 0; }
.lvh-d { color: var(--muted); font-size: 12.5px; padding-top: 1px; white-space: nowrap; }
.lvh-k { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--brass-hi); margin-right: 4px; }
.lvh-sub { font-size: 12px; margin-top: 2px; }
.lvh-x { border: 0; background: none; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }
.lvh-x:hover { color: var(--bad, #d96a5f); }
.lvh-add { margin-top: 10px; }
.lvh-add summary { cursor: pointer; font-size: 13px; }
.lvh-addf { display: grid; gap: 8px; margin-top: 8px; }
.lvh-addf .btn { justify-self: start; }
@media (max-width: 560px) { .lvh-i { grid-template-columns: minmax(0, 1fr) auto; } .lvh-d { grid-column: 1 / -1; } }

/* personnel file: Timelogs tab */
.pf-tlh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.pf-tlh b { min-width: 120px; text-align: center; }
.pf-tlh .muted { margin-left: auto; font-size: 13px; }
.pf-tl { display: grid; }
.pf-tlr { display: flex; align-items: center; gap: 12px; padding: 8px 2px; border-top: 1px solid var(--line-soft); font-size: 14px; }
.pf-tlr:first-child { border-top: 0; }
.pf-tlr b { margin-left: auto; font-variant-numeric: tabular-nums; }
/* Overview → Most hours on patrol: names open a basic card */
.ma-who { color: var(--paper); font-weight: 700; text-decoration: none; border-bottom: 1px dotted rgba(var(--brass-rgb, 193, 137, 63), .55); }
.ma-who:hover { color: var(--brass-hi); text-decoration: none; }
.pc-card { display: flex; gap: 16px; align-items: flex-start; }
.pc-card .pc-av { width: 76px; height: 76px; border-radius: 14px; flex: none; }
.pc-who h3 { margin: 0; font-size: 20px; }
.pc-rank { margin: 4px 0 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pc-rank img { width: 18px; height: 18px; }
.pc-since { margin: 10px 0 0; font-size: 13px; }

/* phones: the menu fits the visible screen (Safari's bottom bar included) and scrolls as one */
@media (max-width: 820px) {
  .side { top: 0; bottom: auto; height: 100vh; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(18px, calc(env(safe-area-inset-bottom) + 14px)); }
  .side .side-nav { flex: none; overflow: visible; }
  html:has(.side.open) { overflow: hidden; }
}
/* View as (super admins) */
.viewas { display: grid; gap: 5px; margin: 16px 6px 4px; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.viewas select { font: 13px var(--sans); letter-spacing: 0; text-transform: none; padding: 7px 8px; color: var(--paper); background: rgba(0, 0, 0, .25); border: 1px solid var(--line); border-radius: 8px; }
.viewas-bar { position: fixed; left: 50%; bottom: max(14px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 70; display: flex; gap: 12px; align-items: center; padding: 8px 10px 8px 16px; border-radius: 12px; background: var(--pine-2); color: var(--paper); border: 1px solid rgba(var(--brass-rgb, 193, 137, 63), .6); box-shadow: 0 14px 40px rgba(0, 0, 0, .5); font-size: 13.5px; white-space: nowrap; }
/* phones: the menu scrolls, so the site credit sits under the user box instead of at a fixed spot */
@media (max-width: 820px) { .side-credit { position: static; order: 99; margin-top: 12px; } }

/* the Academy ID card's gradient (and its light sheen), also on the personnel file header, the "You are here" step of the
   Path pages and the deputy card from Most hours on patrol. The Overview card keeps its own look. */
:root { --id-grad: linear-gradient(120deg, color-mix(in srgb, var(--hero-1, var(--pine-3)) 45%, var(--pine-2)), var(--pine-2) 60%, color-mix(in srgb, var(--brass) 8%, var(--pine-2))); }
.pf-head, .card.pt-now, .pc-card { position: relative; overflow: hidden; background: var(--id-grad); }
.pf-head::after, .card.pt-now::after, .pc-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .035) 50%, transparent 60%); pointer-events: none; }
.pf-head > *, .card.pt-now > *, .pc-card > * { position: relative; z-index: 1; }
.pc-card { padding: 16px; border: 1px solid var(--line); border-radius: 14px; }
/* Panel summary → Apply to roster sheet: the Discord part */
.ps-dc { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; font-size: 13px; line-height: 1.5; cursor: pointer; }
.ps-dc input { margin-top: 3px; accent-color: var(--brass); }
.ps-dc-line { margin-top: 3px; font-size: 12px; color: var(--muted); }
.ps-dc-line .good { color: var(--good); } .ps-dc-line .bad { color: var(--bad); }
/* Path pages on phones: At a glance stays two across */
@media (max-width: 820px) { .path-tools .grid.g2 { grid-template-columns: 1fr 1fr; gap: 10px 14px !important; } .path-tools .stat .k { font-size: 11px; } }
/* SOP tab on phones: the folders behind Contents (an older rule hid them with nothing to open them) */
.st-toc { display: none; }
@media (max-width: 900px) {
  .sop-tab .st-toc { display: inline-flex; width: 100%; justify-content: center; margin-top: 10px; }
  .sop-tab .sop-side { max-height: none; }
  .sop-tab .sop-nav { display: none; }
  .sop-tab.toc-open .sop-nav { display: block; max-height: 60vh; overflow-y: auto; }
}

/* the Halloween theme's logo in the faint header badges too */
html[data-theme="halloween"] .cred::after, html[data-theme="halloween"] .staff-hero::after { background-image: url('/assets/badge-halloween.webp?v=2'); }

/* 1080p screens: the same buttons as 1440p with a little less air between the groups, so everything fits */
@media (min-width: 821px) and (max-height: 1060px) {
  .side { gap: 12px; padding-top: 16px; }
  .side .th-chip { margin-top: -2px; }
  .side-nav { gap: 1px; }
  .side-nav .grp { padding: 9px 10px 4px; }
  .side-nav a { padding-top: 8px; padding-bottom: 8px; }
}
/* the sidebar scales down evenly if it still doesn't fit (portal.js fitSide) */
.side.fit > :not(.side-credit) { zoom: var(--z); }

/* the rank insignia in the deputy card keeps its own shape (Discord role icons aren't square) */
.pc-rank { display: block; }
@media (min-width: 600px) { .pc-rank { white-space: nowrap; } }
.pc-rank img { width: auto; height: 18px; max-width: 24px; object-fit: contain; vertical-align: -3px; margin-right: 6px; }

/* Manage timelogs */
.tlm-top { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.tlm-top b { min-width: 120px; text-align: center; }
.tlm-top .muted { margin-left: auto; font-size: 13px; }
.tlm-list { display: grid; gap: 4px; max-height: 44vh; overflow: auto; }
.tlm-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; min-height: 42px; padding: 5px 8px 5px 12px; border-radius: 9px; background: rgba(236, 228, 210, .03); border: 1px solid var(--line-soft); font-size: 13.5px; }
.tlm-row .tlm-day { min-width: 150px; }
.tlm-row .tlm-len { min-width: 64px; }
.tlm-row.gone { opacity: .72; }
.tlm-row.gone .tlm-len { text-decoration: line-through; }
.tlm-acts { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tlm-edit { display: inline-flex; align-items: center; gap: 4px; }
.tlm-edit input, .tlm-add input[type=number] { width: 70px; }
.tlm-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.tlm-add .f { margin: 0; }
.who-open { color: inherit; text-decoration: none; }
.who-open:hover b { text-decoration: underline; }

/* Remove from roster / Add Cadet */
.rm-chk { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 13.5px; cursor: pointer; }
.rm-prev { margin-top: 12px; padding: 10px 12px; border-radius: 9px; background: rgba(236, 228, 210, .03); border: 1px solid var(--line-soft); font-size: 13.5px; }
.rm-prev p { margin: 3px 0; }
.ac-hits { display: grid; gap: 4px; max-height: 220px; overflow: auto; margin: -4px 0 10px; }
.ac-hit { display: flex; align-items: baseline; gap: 10px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--line-soft); background: rgba(236, 228, 210, .03); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.ac-hit:hover { border-color: rgba(var(--brass-rgb, 193, 137, 63), .5); }
.ac-hit .muted { font-size: 12.5px; }
.pf-rm { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-soft); }
.view-head:has(#ro-addcadet) { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }

.pf-steam code { font-size: 12.5px; }
.pf-mini { padding: 1px 7px; margin-left: 2px; border-radius: 6px; border: 1px solid var(--line); background: transparent; color: var(--paper-dim); font: 600 11.5px var(--sans, inherit); cursor: pointer; }
.pf-mini:hover { color: var(--paper); border-color: rgba(var(--brass-rgb, 193, 137, 63), .5); }

.rm-roles { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 4px; }
.rm-roles i { font-style: normal; font-size: 11.5px; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--paper-dim); }

.cf-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; margin-left: auto; }

/* Sync & Settings: what the bot needs in a channel, the same way on every card */
.ss-need { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: -2px 0 12px; font-size: 12.5px; color: var(--muted); }
.ss-need b { font: 600 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--brass-hi); }
.ss-list { margin: 0 0 10px; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }
.ss-list li + li { margin-top: 2px; }

.xfn-list { display: grid; gap: 6px; margin-top: 10px; }
.xfn-row { display: flex; align-items: flex-start; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: rgba(108, 166, 217, .04); }
.xfn-row:hover, .xfn-row:focus-visible { border-color: rgba(108, 166, 217, .5); background: rgba(108, 166, 217, .08); outline: none; }
.xfn-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.xfn-main small { font-size: 12.5px; }
.xfn-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.xfn-tags .chip { font-size: 11px; }
.xfn-x { flex: none; width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 16px; line-height: 1; cursor: pointer; }
.xfn-x:hover { color: var(--paper); border-color: var(--muted); }
.xfn-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.xfn-detail { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); column-gap: 22px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.xfn-detail .xf-row b { overflow-wrap: anywhere; }
.xfn-pol { padding: 8px 0; border-top: 1px solid var(--line-soft, var(--line)); }
.xfn-pol:first-of-type { border-top: 0; }
.xfn-pol p { margin: 4px 0 0; font-size: 13px; }

.ag-chart { position: relative; display: flex; gap: 10px; height: 170px; margin-top: 18px; }
.ag-chart[hidden] { display: none; }
.ag-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.ag-bar { position: relative; flex: 1; width: 100%; max-width: 52px; }
.ag-bar i { position: absolute; left: 0; right: 0; bottom: 0; min-height: 2px; border-radius: 5px 5px 2px 2px; background: rgba(var(--brass-rgb, 193, 137, 63), .3); transition: background .15s; }
.ag-col.met .ag-bar i { background: rgba(var(--brass-rgb, 193, 137, 63), .75); }
.ag-col.now .ag-bar i { box-shadow: inset 0 0 0 1px var(--brass-hi); }
.ag-col:hover .ag-bar i { background: var(--brass-hi); }
.ag-col.future .ag-bar i { opacity: .25; }
.ag-bar small { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); margin-bottom: 3px; font-size: 11px; color: var(--paper-dim); white-space: nowrap; }
.ag-col > span { height: 14px; margin-top: 6px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.ag-days { gap: 3px; }
.ag-days .ag-bar { max-width: none; }
.ag-need { position: absolute; left: 0; right: 0; border-top: 1px dashed rgba(var(--brass-rgb, 193, 137, 63), .65); pointer-events: none; z-index: 1; }
.ag-need span { position: absolute; right: 0; bottom: 2px; font-size: 10.5px; color: var(--brass-hi); }
.ag-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.ag-seg button { font: inherit; font-size: 12.5px; background: none; border: 0; color: var(--muted); padding: 5px 11px; cursor: pointer; }
.ag-seg button + button { border-left: 1px solid var(--line); }
.ag-seg button.on { background: rgba(var(--brass-rgb, 193, 137, 63), .14); color: var(--brass-hi); }
.ma-act { cursor: pointer; transition: border-color .15s; }
.ma-act:hover, .ma-act:focus-visible { border-color: rgba(var(--brass-rgb, 193, 137, 63), .45); outline: none; }
.ma-head-r { display: inline-flex; align-items: center; gap: 8px; }
.ma-tog[aria-expanded="true"] svg { transform: rotate(180deg); }
.ma-detail .pp-detail-in { padding: 0; }

.wn-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brass-hi); margin-left: 7px; vertical-align: 2px; box-shadow: 0 0 8px rgba(var(--brass-rgb, 193, 137, 63), .8); }
.wn-dot[hidden] { display: none; }
.wn-tools { margin: 16px 0; }
.wn-day { margin-bottom: 16px; }
.wn-items { columns: 2 380px; column-gap: 32px; margin: 4px 0 0; padding: 0; list-style: none; }
.wn-items li { break-inside: avoid; padding: 7px 0 7px 14px; position: relative; font-size: 14px; line-height: 1.5; color: var(--paper-dim, var(--paper)); border-bottom: 1px solid var(--line-soft, rgba(255, 255, 255, .05)); }
.wn-items li::before { content: ''; position: absolute; left: 0; top: 15px; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--brass-rgb, 193, 137, 63), .6); }
.wn-items li b { color: var(--paper); font-weight: 600; }
.wn-fix { font-size: 10.5px; padding: 0 7px; vertical-align: 1px; }

.bulk-rm { display: grid; gap: 6px; margin: 4px 0 12px; }
.bulk-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(170px, 230px); gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.bulk-row .person { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.bulk-row .person input { width: auto; margin: 0; }
@media (max-width: 600px) { .bulk-row { grid-template-columns: 1fr; } }
.wn-groups { columns: 2 360px; column-gap: 28px; margin-top: 4px; }
.wn-group { break-inside: avoid; margin: 0 0 16px; }
.wn-group h4 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font: 600 12px var(--sans, Inter, sans-serif); letter-spacing: .08em; text-transform: uppercase; color: var(--brass-hi); }
.wn-group h4 span { font: 500 11px var(--sans, Inter, sans-serif); letter-spacing: 0; color: var(--muted); padding: 0 7px; border: 1px solid var(--line); border-radius: 999px; }
.wn-groups .wn-items { columns: auto; margin: 0; }
.wn-groups .wn-items li { padding: 5px 0 5px 14px; font-size: 13.5px; }
.wn-groups .wn-items li::before { top: 13px; }

/* Corporal Program view inside a Corporal's personnel file */
.cpp-open { margin-top: 12px; }
#pf-cpl { display: none; }
#modal-body.cpp-on #pf-cpl { display: block; }
#modal-body.cpp-on > :not(.pf-head):not(#pf-cpl) { display: none !important; }
.cpp-track { display: grid; grid-template-columns: repeat(3, 1fr); margin: 18px 0 6px; }
.cpp-node { position: relative; display: grid; justify-items: center; text-align: center; gap: 3px; padding: 0 6px; }
.cpp-node::before { content: ''; position: absolute; top: 15px; left: calc(-50% + 20px); right: calc(50% + 20px); height: 2px; border-radius: 2px; background: var(--line); }
.cpp-node:first-child::before { display: none; }
.cpp-node.done::before, .cpp-node.now::before { background: var(--brass); }
.cpp-node.ready::before { background: var(--good); }
.cpp-dot { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--line); font-weight: 700; font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.cpp-node.done .cpp-dot { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.cpp-node.now .cpp-dot { border-color: var(--brass); background: rgba(var(--brass-rgb, 193, 137, 63), .18); box-shadow: 0 0 0 6px rgba(var(--brass-rgb, 193, 137, 63), .12); }
.cpp-node.now .cpp-dot::after { content: ''; width: 10px; height: 10px; border-radius: 50%; background: var(--brass-hi); }
.cpp-node.ready .cpp-dot { border-color: var(--good); border-style: dashed; }
.cpp-node b { font-size: 14px; }
.cpp-node.now b { color: var(--brass-hi); }
.cpp-node small { font-size: 12px; color: var(--muted); }
.cpp-node.ready small { color: var(--good); }
#pf-cpl .pf-stat > small { flex-wrap: wrap; }
.cpp-bar { margin: 8px 0 6px; height: 6px; flex: 0 0 100%; }
.cpp-pips { display: flex; gap: 4px; margin: 9px 0 7px; flex: 0 0 100%; }
.cpp-pips em { flex: 1; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, .07); }
.cpp-pips em.on { background: var(--good); }
.cpp-sec { border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-top: 14px; background: rgba(0, 0, 0, .14); }
.cpp-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.cpp-h h4 { margin: 0; font-size: 15px; }
.cpp-steps, .cpp-checks { list-style: none; margin: 0; padding: 0; }
.cpp-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 11px 0; border-top: 1px solid var(--line); }
.cpp-step:first-child { border-top: 0; }
.cpp-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }
.cpp-step.done .cpp-n { border-color: var(--good); color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.cpp-step b, .cpp-checks b { display: block; font-size: 14px; font-weight: 600; }
.cpp-step small, .cpp-checks small { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.cpp-step:not(.done) b { color: var(--paper-dim); }
.cpp-r { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cpp-note { font-size: 12.5px; color: var(--brass-hi); text-decoration: none; white-space: nowrap; }
.cpp-note:hover { text-decoration: underline; }
.cpp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cpp-checks li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 8px 0; }
.cpp-ck { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.cpp-checks .ok .cpp-ck { color: var(--good); background: color-mix(in srgb, var(--good) 16%, transparent); }
.cpp-checks .no .cpp-ck { color: var(--bad); background: color-mix(in srgb, var(--bad) 16%, transparent); }
.cpp-checks .warn .cpp-ck { color: var(--warn); background: color-mix(in srgb, var(--warn) 16%, transparent); }
.cpp-dc { margin-top: 8px; }
.cpp-foot { font-size: 12.5px; margin: 12px 2px 0; }
@media (max-width: 720px) {
  .cpp-cols { grid-template-columns: 1fr; }
  .cpp-step { grid-template-columns: 28px minmax(0, 1fr); }
  .cpp-r { grid-column: 2; justify-content: flex-start; }
  .cpp-node small { display: none; }
}
/* roster on phones: the Transfer tag goes under the name instead of running into the callsign */
@media (max-width: 720px) {
  #view .ro-row .person > div { white-space: normal; min-width: 0; }
  #view .ro-row .person .chip.transfer { display: flex; width: max-content; margin-top: 4px; }
}

/* New transfer (Transfer Center) */
.nx-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
@media (max-width: 560px) { .nx-grid { grid-template-columns: 1fr; } }
.nx-picks, .nx-units { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nx-picks .chip, .nx-units .chip { cursor: pointer; font: inherit; font-size: 12.5px; opacity: .55; transition: opacity .15s, box-shadow .15s; }
.nx-picks .chip:hover, .nx-units .chip:hover { opacity: .85; }
.nx-picks .chip.on, .nx-units .chip.on { opacity: 1; box-shadow: 0 0 0 1px currentColor inset; }
.nx-divs { display: grid; gap: 8px; margin: 10px 0 12px; }
.nx-div { padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line-soft); background: rgba(var(--brass-rgb, 193, 137, 63), .025); }
.nx-div > p { margin: 6px 0 0; font-size: 12.5px; }
.nx-div .in { margin-top: 8px; }
.nx-dhead { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.nx-dhead .btn { margin-left: auto; }
.nx-div.xc, .nx-urow.xc { border-color: rgba(var(--brass-rgb, 193, 137, 63), .65); background: rgba(var(--brass-rgb, 193, 137, 63), .07); }
.chip.nx-xtag { color: var(--brass-hi); border-color: rgba(var(--brass-rgb, 193, 137, 63), .6); background: rgba(var(--brass-rgb, 193, 137, 63), .14); font-weight: 700; }
.nx-usub { margin-top: 10px; font-size: 12px; }
.nx-urow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line-soft); font-size: 13px; }
.nx-urow .btn { margin-left: auto; }
.nx-urow .in { flex-basis: 100%; margin-top: 2px; }
.nx-log { margin: 12px 0 0; font-size: 13.5px; }
.nx-log summary { cursor: pointer; color: var(--paper-dim); }
.nx-log[open] summary { margin-bottom: 8px; }
.chip.transfer.nx-pend { color: var(--warn); border-color: rgba(224, 166, 75, .45); background: rgba(224, 166, 75, .08); }
.xfn-tags .chip.xfn-none { opacity: .45; }