:root {
  --bg: #f3f5f8; --panel: #ffffff; --ink: #18202b; --muted: #64707f; --line: #dde2e9; --line-strong: #c7ced8;
  --brand: #1f4e8c; --brand-ink: #ffffff; --brand-soft: #e7eef8;
  --day: #e0a21b; --day-soft: #fdf6e6; --night: #4b5fc1; --night-soft: #eef0fb;
  --ok: #1d7a46; --ok-soft: #e6f4ec; --warn: #a35b00; --warn-soft: #fff3e0; --bad: #b42318; --bad-soft: #fdecea;
  --ot: #7b3fb5; --ot-soft: #f3ecfb; --radius: 10px; --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-size: 15px; line-height: 1.4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #11151c; --panel: #1a2029; --ink: #e8ecf2; --muted: #98a3b3; --line: #2a323e; --line-strong: #3a4452;
    --brand: #5b8fd6; --brand-ink: #0b1220; --brand-soft: #1e2b3f;
    --day-soft: #2b2416; --night-soft: #1d2140; --ok-soft: #14291e; --warn-soft: #2e2212; --bad-soft: #321716; --ot-soft: #271c35;
    --shadow: none;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #11151c; --panel: #1a2029; --ink: #e8ecf2; --muted: #98a3b3; --line: #2a323e; --line-strong: #3a4452;
    --brand: #5b8fd6; --brand-ink: #0b1220; --brand-soft: #1e2b3f;
    --day-soft: #2b2416; --night-soft: #1d2140; --ok-soft: #14291e; --warn-soft: #2e2212; --bad-soft: #321716; --ot-soft: #271c35;
    --shadow: none;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); }
a { color: var(--brand); }
h1 { font-size: 1.45rem; margin: 0 0 .6rem; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
h3 { font-size: 1rem; margin: .6rem 0 .4rem; }
main { padding: 16px; max-width: 1500px; margin: 0 auto; }
.muted { color: var(--muted); }
.error-text { color: var(--bad); }
.ok-text { color: var(--ok); }
.strong { font-weight: 600; }
.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; }
[hidden] { display: none !important; }

/* Top bar */
.topbar { display: flex; align-items: center; gap: 16px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.brand a { font-weight: 700; color: var(--ink); text-decoration: none; font-size: 1.05rem; }
.brand { display: flex; align-items: center; gap: 8px; }
.links { display: flex; gap: 2px; flex: 1; flex-wrap: nowrap; align-items: center; min-width: 0; }
.links a { padding: 7px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; white-space: nowrap; }
.links a:hover { background: var(--bg); }
.links a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.user { display: flex; align-items: center; gap: 10px; }
.who { color: var(--muted); font-size: .9rem; }
.bell { position: relative; text-decoration: none; font-size: 1.1rem; }
.badge { position: absolute; top: -6px; right: -10px; background: var(--bad); color: #fff; border-radius: 10px; font-size: .7rem; padding: 0 5px; }
.menu-btn { display: none; }
@media (max-width: 1180px) {
  .menu-btn { display: inline-block; }
  .topbar { flex-wrap: wrap; }
  .links { display: none; order: 3; flex-basis: 100%; flex-direction: column; }
  .topbar.open .links { display: flex; }
  .who { display: none; }
}

/* Buttons and inputs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--line-strong);
  background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; text-decoration: none; white-space: nowrap; }
.btn:hover { border-color: var(--brand); }
.btn.primary { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.btn.danger { background: var(--bad); color: #fff; border-color: var(--bad); }
.btn.ghost { background: transparent; }
.btn.small { padding: 5px 10px; font-size: .88rem; }
.btn.wide { width: 100%; }
.btn:disabled { opacity: .6; cursor: default; }
.link { background: none; border: 0; color: var(--brand); cursor: pointer; padding: 6px 0; font: inherit; }
.icon-btn { background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink); line-height: 1; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--panel); color: var(--ink); min-width: 0; }
input:focus, select:focus, textarea:focus, .btn:focus-visible, .chip:focus-visible, .person.clickable:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; flex: 1; }
.field-label { font-size: .85rem; font-weight: 600; color: var(--muted); }
.hint { font-size: .8rem; color: var(--muted); }
.check { display: flex; align-items: center; gap: 8px; margin: 6px 0; }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 8px; padding: 0; margin: 0; list-style: none; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.grid2 .span2 { grid-column: 1 / -1; }
@media (max-width: 600px) { .grid2 { grid-template-columns: 1fr; } }

/* Cards and layout */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 14px; }
.cards { display: flex; flex-direction: column; gap: 12px; }
.cards.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.center { min-height: 80vh; display: grid; place-items: center; padding: 16px; }
.auth { width: 100%; max-width: 380px; }
.auth h1 { text-align: center; }

/* Filter chips (kept from the old design) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 14px; }
.chip { padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); cursor: pointer; font: inherit; font-size: .9rem; text-decoration: none; }
.chip.on { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }

/* Weekly schedule */
.week-nav { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.week-label { font-weight: 600; margin-left: 6px; }
input.small { padding: 5px 8px; }
.week-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; padding-bottom: 8px; }
.day { background: transparent; scroll-snap-align: start; min-width: 0; }
.day-head { background: var(--brand); color: var(--brand-ink); border-radius: var(--radius); padding: 8px 10px; text-align: center; margin-bottom: 8px; }
.day.today .day-head { box-shadow: 0 0 0 3px var(--day); }
.day.holiday .day-head { background: #8a2f2f; }
.dow { font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }
.date { font-size: 1.15rem; font-weight: 700; }
.holiday-name { font-size: .75rem; opacity: .9; }
.empty { text-align: center; padding: 12px; }
.shift-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 10px; overflow: hidden; box-shadow: var(--shadow); }
.shift-group.day { border-top: 4px solid var(--day); }
.shift-group.night { border-top: 4px solid var(--night); }
.group-head { display: flex; align-items: baseline; gap: 6px; padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--bg); }
.shift-group.day .group-head { background: var(--day-soft); }
.shift-group.night .group-head { background: var(--night-soft); }
.group-name { font-weight: 700; font-size: .9rem; }
.group-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; color: var(--muted); }
.group-count { margin-left: auto; font-size: .8rem; color: var(--muted); }
.roster { list-style: none; margin: 0; padding: 0; }
.person { padding: 7px 10px; border-bottom: 1px solid var(--line); }
.person:last-child { border-bottom: 0; }
.person.clickable { cursor: pointer; }
.person.clickable:hover { background: var(--brand-soft); }
.person.sup { background: linear-gradient(90deg, var(--brand-soft), transparent 60%); }
.person.off .person-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-strong); }
.person-line { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
.person-name { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.person-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rank, .desig { display: inline-block; margin-left: 5px; font-size: .66rem; font-weight: 700; padding: 1px 5px; border-radius: 4px; vertical-align: 1px; }
.rank { background: var(--brand); color: var(--brand-ink); }
.desig { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.notes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.note-text { font-size: .78rem; color: var(--muted); font-style: italic; }
.tag { display: inline-block; font-size: .72rem; padding: 1px 7px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); color: var(--ink); }
.tag.leave { background: var(--warn-soft); border-color: transparent; color: var(--warn); }
.tag.leave.kelly { background: var(--night-soft); color: var(--night); }
.tag.kind-ot { background: var(--ot-soft); color: var(--ot); border-color: transparent; }
.tag.kind-trade { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.pending { border-style: dashed; color: var(--muted); }
.tag.light { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.add-shift { width: 100%; }
@media (max-width: 860px) { .week-grid { grid-template-columns: repeat(7, 86vw); overflow-x: auto; scroll-snap-type: x mandatory; } }

/* My schedule */
.my-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.my-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-width: 720px; }
.my-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; box-shadow: var(--shadow); }
.my-day.today { border-color: var(--day); }
.my-date { font-weight: 700; display: flex; gap: 8px; align-items: baseline; }
.my-date .holiday-name { color: #8a2f2f; font-weight: 600; }
.my-shift { display: flex; gap: 10px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.my-shift.off .my-time { text-decoration: line-through; color: var(--muted); }
.my-code { font-weight: 700; min-width: 2.2em; text-align: center; border-radius: 6px; padding: 1px 6px; }
.my-shift.day .my-code { background: var(--day-soft); color: var(--warn); }
.my-shift.night .my-code { background: var(--night-soft); color: var(--night); }
.my-time { font-family: ui-monospace, Menlo, Consolas, monospace; }

/* Coverage */
.cov-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.cov-day { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; }
.cov-date { font-weight: 700; margin-bottom: 6px; }
.cov-window { border-left: 4px solid var(--ok); padding: 4px 8px; margin: 6px 0; }
.cov-window.short { border-left-color: var(--bad); background: var(--bad-soft); }
.cov-name { font-weight: 600; font-size: .9rem; }
.cov-nums { font-size: .82rem; color: var(--muted); }

/* Lists, tables, findings */
.findings { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 4px; }
.findings li { padding: 6px 10px; border-radius: 6px; font-size: .9rem; }
.findings li.error { background: var(--bad-soft); color: var(--bad); }
.findings li.warning { background: var(--warn-soft); color: var(--warn); }
.findings li.ok { background: var(--ok-soft); color: var(--ok); }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.table th, .table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-size: .8rem; color: var(--muted); font-weight: 600; }
.table tr.inactive td { color: var(--muted); }
.os-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.card.os.filled { opacity: .75; }
.approval { border-bottom: 1px solid var(--line); padding-bottom: 8px; }
.approval:last-child { border-bottom: 0; }
.notif.unread { border-left: 4px solid var(--brand); }
.temp-pw { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 1.3rem; padding: 10px; background: var(--bg); border-radius: 8px; text-align: center; user-select: all; }

/* Modal and toasts */
.modal-back { position: fixed; inset: 0; background: rgba(10, 15, 25, .45); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--panel); border-radius: 12px; width: 100%; max-width: 560px; max-height: 90vh; overflow: auto; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; }
.modal-body { padding: 16px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--line); flex-wrap: wrap; }
#toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 60; width: min(92vw, 480px); }
.toast { padding: 10px 14px; border-radius: 8px; background: var(--ink); color: var(--panel); box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.toast.error { background: var(--bad); color: #fff; }

.chip-select { border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 12px; background: var(--panel); color: var(--ink); font: inherit; font-size: .9rem; }
.chip-select.on { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }
.theme-btn { min-width: 3.6em; }
/* My Schedule calendar */
.my-controls { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.my-controls .chips { margin: 0; }
.my-title { margin: 6px 0 8px; }
.small { font-size: .85rem; }
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; max-width: 1100px; }
.cal-dow { text-align: center; font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; padding: 2px 0; }
.cal-cell { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; min-height: 92px; padding: 4px 5px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-cell.out { background: transparent; border-style: dashed; opacity: .45; }
.cal-cell.today { border-color: var(--day); box-shadow: 0 0 0 2px var(--day); }
.cal-date { font-size: .8rem; font-weight: 700; color: var(--muted); display: flex; justify-content: space-between; }
.cal-cell.work .cal-date { color: var(--ink); }
.holiday-dot { color: var(--bad); }
.cal-shift { border-radius: 6px; padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cal-shift.day { background: var(--day-soft); border-left: 3px solid var(--day); }
.cal-shift.night { background: var(--night-soft); border-left: 3px solid var(--night); }
.cal-shift.off { opacity: .6; }
.cal-shift.off .cal-time { text-decoration: line-through; }
.cal-shift .my-code { background: none !important; padding: 0; text-align: left; min-width: 0; }
.cal-time { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .72rem; overflow-wrap: anywhere; }
.cal-shift .notes { display: flex; flex-wrap: wrap; gap: 2px; }
.cal-shift .tag, .cal-cell > .tag { font-size: .66rem; padding: 0 4px; }
.my-week { font-weight: 700; color: var(--muted); font-size: .8rem; text-transform: uppercase; margin-top: 6px; }
.my-day.empty { padding: 6px 12px; opacity: .7; }
.my-day.empty .my-date { font-weight: 600; }
@media (max-width: 600px) {
  .cal { gap: 2px; }
  .cal-cell { min-height: 74px; padding: 3px; }
  .cal-time { font-size: .62rem; }
  .cal-dow { font-size: .65rem; }
}
.split-presets { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.day.focus { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: var(--radius); }
a.cov-date { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink); text-decoration: none; }
a.cov-date:hover .cov-open { text-decoration: underline; }
.cov-open { font-size: .8rem; font-weight: 500; color: var(--brand); }
.cov-day.has-short { border-color: var(--bad); }
.cov-short { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.cand-list { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; }
.cand { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.cand.warn { border-color: var(--warn); }
.cand-main { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cand .btn { align-self: flex-start; }
.shift-group.leave-group { border-top: 3px solid var(--line-strong); }
.shift-group.leave-group .group-head { background: var(--bg); }
.shift-group.lg-sick, .shift-group.lg-fmla { border-top-color: var(--bad); }
.shift-group.lg-vacation, .shift-group.lg-holiday, .shift-group.lg-comp { border-top-color: var(--ok); }
.shift-group.lg-kelly { border-top-color: var(--night); }
.shift-group.lg-training, .shift-group.lg-admin { border-top-color: var(--ot); }
/* Rule findings */
.findings.cards { gap: 8px; }
.findings.cards li { padding: 8px 12px; border-left: 4px solid currentColor; }
.f-title { font-weight: 700; font-size: .85rem; }
.f-msg { color: var(--ink); margin-top: 2px; line-height: 1.35; }
.rule-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; margin-top: 10px; }
.rule-card { background: var(--panel); border: 1px solid var(--line); border-left: 5px solid var(--bad); border-radius: var(--radius); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow); }
.rule-card.warning { border-left-color: var(--warn); }
.rule-card.acked { border-left-color: var(--line-strong); opacity: .8; }
.rule-card-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rule-sev { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 1px 7px; border-radius: 999px; background: var(--bad-soft); color: var(--bad); }
.rule-card.warning .rule-sev { background: var(--warn-soft); color: var(--warn); }
.rule-card.acked .rule-sev { background: var(--bg); color: var(--muted); }
.rule-name { font-weight: 700; }
.rule-person { font-size: 1.05rem; font-weight: 600; }
.rule-msg { line-height: 1.4; }
.rule-ack { font-size: .85rem; color: var(--muted); }
.rule-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ok-text.big { font-size: 1.1rem; margin-top: 16px; }
.rules-range { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 4px 0 8px; }
.rules-range input[type=date] { padding: 5px 8px; }
.shift-group.open-group { border-top: 3px dashed var(--ot); }
.shift-group.open-group .group-head { background: var(--ot-soft); }
.day-actions { display: flex; gap: 6px; }
.day-actions .add-shift { width: auto; flex: 1 1 0; min-width: 0; padding-left: 4px; padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift-group.open-group.must { border: 2px solid var(--bad); border-top-width: 4px; border-top-style: solid; }
.shift-group.open-group.must .group-head { background: var(--bad-soft); color: var(--bad); }
.person.must .person-name { color: var(--bad); font-weight: 700; }
.tag.must { background: var(--bad); color: #fff; font-weight: 700; }
.card.os.must { border: 2px solid var(--bad); background: var(--bad-soft); }
.name-search { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; font-size: .9rem; min-width: 160px; }
/* Schedule builder */
.plan-banner { background: var(--warn-soft); color: var(--ink); border: 2px solid var(--warn); border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px; }
.plan-unit { margin: 18px 0; }
.plan-unit h2 { margin-bottom: 8px; }
.plan-crews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.plan-person { padding: 8px 10px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.plan-person.moved { background: var(--warn-soft); }
.plan-move { font: inherit; font-size: .85rem; padding: 4px 6px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); }
.plan-outside { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 12px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 0; list-style: none; }
.plan-summary { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0; }
.plan-summary .stat { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 14px; }
.plan-summary .stat b { font-size: 1.3rem; margin-right: 4px; }
.plan-summary .stat.bad { border-color: var(--bad); color: var(--bad); }
.plan-summary .stat.ok { border-color: var(--ok); color: var(--ok); }
.plan-results details { margin: 6px 0; }
.plan-results summary { cursor: pointer; font-weight: 600; }
.plan-crews { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.spots { padding: 6px 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.spot-head { display: flex; justify-content: space-between; align-items: center; font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; margin-top: 6px; }
.spot { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); min-height: 38px; }
.spot.filled { background: var(--panel); }
.spot.filled .person-name { flex: 1; }
.spot.empty { border: 2px dashed var(--line-strong); background: transparent; }
.spot.extra { border: 1px dashed var(--line); opacity: .75; }
.spot.over { border-color: var(--warn); background: var(--warn-soft); }
.spot .plan-move { flex: 1; }
.small-x { font-size: 1.1rem; color: var(--muted); padding: 0 4px; }
.plan-grid { width: 100%; border-collapse: collapse; font-size: .78rem; margin: 4px 0 8px; table-layout: fixed; }
.plan-grid th, .plan-grid td { border: 1px solid var(--line); text-align: center; padding: 2px 1px; }
.plan-grid thead th { font-weight: 600; }
.plan-grid thead th.on { background: var(--bg); }
.plan-grid tbody th { text-align: left; padding: 2px 6px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-grid td.off { background: transparent; }
.plan-grid td.work.day { background: var(--day-soft); }
.plan-grid td.work.night { background: var(--night-soft); }
.plan-grid td.kelly { background: var(--night) !important; color: #fff; font-weight: 700; }
.plan-grid .kbox { display: block; cursor: pointer; }
.plan-grid .kbox input { position: absolute; opacity: 0; pointer-events: none; }
.plan-grid .kbox:focus-within { outline: 2px solid var(--brand); }
.plan-grid tr.totals td, .plan-grid tr.totals th { font-weight: 700; color: var(--muted); }
.person.on-ot { background: var(--bad-soft); box-shadow: inset 4px 0 0 var(--bad); }
.person.on-ot .person-name { color: var(--bad); }
.edit-box { margin: 8px 0 12px; padding: 12px; }
/* Schedule view lengths */
.week-grid.view-day { grid-template-columns: 1fr; }
.week-grid.view-day .day { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; align-items: start; }
.week-grid.view-day .day-head, .week-grid.view-day .day-actions { grid-column: 1 / -1; }
.week-grid.view-month .day.other-month { opacity: .45; }
.week-grid.view-month, .week-grid.view-3w { font-size: .9rem; }
@media (max-width: 700px) { .week-grid.view-day { grid-template-columns: 1fr; } }
.crumbs { max-width: 1500px; margin: 0 auto; padding: 8px 16px 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .88rem; }
.crumb { color: var(--brand); text-decoration: none; padding: 2px 8px; border-radius: 999px; background: var(--brand-soft); }
.crumb:hover { text-decoration: underline; }
.crumb.current { color: var(--ink); background: transparent; font-weight: 600; }
.crumb-sep { color: var(--muted); }
.import-box textarea { width: 100%; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; margin-top: 8px; }
.import-preview { max-height: 260px; overflow: auto; margin-top: 8px; }
.import-preview tr.bad td { color: var(--bad); }
.crew-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.crew-card-head h3 { margin: 0; }
.spots-line { font-size: .85rem; font-weight: 600; color: var(--ok); }
.spots-line.short { color: var(--bad); }
.crew-card.day { border-top: 3px solid var(--day); }
.crew-card.night { border-top: 3px solid var(--night); }
.crew-card.drop { outline: 3px dashed var(--brand); outline-offset: 2px; }
.crew-member[draggable=true] { cursor: grab; }
.crew-card .plan-move { margin-top: 8px; width: 100%; }
.shift-group.division-group { border-top: 3px solid var(--brand); }
.shift-group.division-group .group-head { background: var(--brand-soft); }
.tag.job { background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.spot .own { display: inline-flex; align-items: center; gap: 4px; }
.own-time { width: 6.6em; font: inherit; font-size: .82rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); }
.own-hours { width: 4.2em; font: inherit; font-size: .82rem; padding: 2px 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--muted); }
.own-time.set, .own-hours.set { color: var(--ink); border-color: var(--brand); font-weight: 600; }
.spot.filled { flex-wrap: wrap; }
.rank.acting { background: var(--warn); }
.spot-input { width: 5em; font: inherit; padding: 4px 6px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--panel); color: var(--ink); }
.bad-text { color: var(--bad); font-weight: 600; }
.draggable { cursor: grab; }
.spot.drop, .plan-crew.drop, .plan-unit.drop { outline: 3px dashed var(--brand); outline-offset: 2px; }
.kelly-details summary { cursor: pointer; font-size: .85rem; color: var(--brand); padding: 4px 10px 8px; }
.spot.drop-any { border: none; padding: 0; min-height: 0; }

.kelly-details { overflow-x: auto; }
.plan-grid { min-width: 560px; }
.plan-grid colgroup .name-col, .plan-grid thead th:first-child { width: 130px; }
.tag.slip-approved { background: var(--ok-soft); color: var(--ok); }
.tag.slip-submitted { background: var(--warn-soft); color: var(--warn); }
.tag.slip-none { background: var(--bad); color: #fff; }
.card.needs { border-color: var(--warn); }
.slip-denied, .slip-cancelled { opacity: .7; }
.tag.acting-ok { background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.audit-day h3 { margin: 0 0 6px; }
.audit-list { list-style: none; margin: 0; padding: 0; }
.audit-list li { display: grid; grid-template-columns: 3.5em 5.5em 11em 1fr; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.audit-list li:last-child { border-bottom: 0; }
.audit-time { font-family: ui-monospace, Menlo, Consolas, monospace; color: var(--muted); }
.audit-who { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.audit-kind { text-align: center; }
.audit-login .audit-kind { background: var(--bg); color: var(--muted); }
.audit-request .audit-kind { background: var(--warn-soft); color: var(--warn); }
.audit-change .audit-kind { background: var(--brand-soft); color: var(--brand); }
@media (max-width: 700px) { .audit-list li { grid-template-columns: 3.5em 1fr; } .audit-kind { display: none; } .audit-text { grid-column: 1 / -1; } }
.ask-row { display: flex; gap: 8px; }
.ask-input { flex: 1; font: inherit; font-size: 1.05rem; padding: 10px 14px; border-radius: 10px; border: 2px solid var(--brand); background: var(--panel); color: var(--ink); }
.card.ask .chips { margin-top: 10px; }
.report-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.report-table td.num, .report-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table tfoot td { font-weight: 700; border-top: 2px solid var(--line-strong); }
.report-out { margin-top: 12px; }

/* "More" menu */
.more { position: relative; }
.more summary { list-style: none; cursor: pointer; padding: 7px 10px; border-radius: 8px; white-space: nowrap; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: ' ▾'; font-size: .8em; }
.more.has-active summary { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.more-menu { position: absolute; top: 100%; left: 0; margin-top: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18); padding: 6px; display: flex; flex-direction: column; min-width: 160px; z-index: 30;
  max-height: calc(100vh - 80px); overflow-y: auto; overscroll-behavior: contain; }
.more-menu a { display: block; white-space: nowrap; }
/* Many pages: two columns so the whole list fits on a laptop screen (it still scrolls if the window is short). */
@media (min-width: 1181px) {
  .more-menu { display: grid; grid-template-columns: repeat(2, minmax(170px, 1fr)); gap: 2px 6px; left: auto; right: 0; }
}
.more-flat { display: none; }
@media (max-width: 1180px) {
  .more { display: none; }
  .more-flat { display: flex; flex-direction: column; align-items: center; align-self: stretch; border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
  .topbar.open { max-height: 100vh; overflow-y: auto; }
}
/* Fit 7 days on a laptop screen: tighter text as the window narrows; scroll only on phones. */
@media (max-width: 1500px) {
  .week-grid .shift-group, .week-grid .person-name { font-size: .92rem; }
  .week-grid .group-head { flex-wrap: wrap; }
  .week-grid .person-time { font-size: .72rem; }
  .week-grid .rank, .week-grid .desig { font-size: .62rem; }
}
@media (max-width: 1150px) {
  .week-grid { gap: 5px; }
  .week-grid .shift-group, .week-grid .person-name { font-size: .82rem; }
  .week-grid .person { padding-left: 6px; padding-right: 6px; }
}
.report-chart { width: 100%; max-width: 760px; height: auto; font-size: 12px; }
.report-chart rect { fill: var(--brand); }
.report-chart text { fill: var(--ink); }
.report-chart text.val { fill: var(--muted); }
.chart-card { margin: 10px 0; }
.saved-chip { display: inline-flex; align-items: center; }
@media print {
  .topbar, .crumbs, .card.ask, .report-out .toolbar .row, section.card:has(.report-form), .theme-btn, #toasts { display: none !important; }
  body, main { background: #fff; color: #000; }
  .card { box-shadow: none; border: 0; }
  .report-table { font-size: 10pt; }
  .report-table th, .report-table td { padding: 2px 6px; border-bottom: 1px solid #ccc; }
  .week-grid { grid-template-columns: repeat(7, 1fr) !important; }
}
.danger-text { color: var(--bad); }
.bal-row { display: flex; gap: 10px; flex-wrap: wrap; } .bal-row .stat { background: var(--bg); border-radius: 8px; padding: 8px 14px; } .bal-row .stat b { font-size: 1.3rem; }
.ot-row td { color: var(--bad); }
/* Home */
.home-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.home-head h1 { margin-bottom: 2px; }
.home-strip { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 6px; margin: 12px 0 16px; }
.home-day { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 6px; text-decoration: none; color: var(--ink); min-height: 92px; display: flex; flex-direction: column; gap: 4px; }
.home-day.today { border-color: var(--day); box-shadow: 0 0 0 2px var(--day); }
.home-day:not(.work) { opacity: .7; }
.hd-dow { font-size: .72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.hd-date { font-weight: 700; }
.hd-shift { border-radius: 6px; padding: 3px 5px; font-size: .72rem; display: flex; flex-direction: column; }
.hd-shift.day { background: var(--day-soft); border-left: 3px solid var(--day); }
.hd-shift.night { background: var(--night-soft); border-left: 3px solid var(--night); }
.hd-shift.ot { background: var(--bad-soft); border-left: 3px solid var(--bad); }
.hd-shift.off span:not(.hd-tag) { text-decoration: line-through; }
.hd-tag { font-weight: 600; color: var(--muted); }
.hd-tag.acting { color: var(--warn); }
.hd-off { font-size: .75rem; color: var(--muted); }
.todo-list { list-style: none; margin: 0; padding: 0; }
.todo-list li a { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.todo-list li:last-child a { border-bottom: 0; }
.todo-list li a:hover { background: var(--bg); }
.todo-n { min-width: 2em; text-align: center; font-weight: 700; border-radius: 999px; padding: 1px 8px; background: var(--brand-soft); color: var(--brand); }
.todo-list li.urgent .todo-n { background: var(--bad); color: #fff; }
.todo-go { margin-left: auto; color: var(--muted); }
.home-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; }
.tile { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 14px; text-align: center; font-weight: 600; color: var(--brand); text-decoration: none; box-shadow: var(--shadow); }
.tile:hover { border-color: var(--brand); }
@media (max-width: 900px) { .home-strip { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
/* Messaging, blasts */
.warn-text { color: var(--warn); }
.pick-list { max-height: 260px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.card.os.focus { box-shadow: 0 0 0 3px var(--brand); }
.table.compact td, .table.compact th { padding: 4px 8px; }
tr.next-up td { background: var(--bad-soft); font-weight: 600; }
tr.muted td { color: var(--muted); }
fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; display: flex; flex-wrap: wrap; gap: 4px 14px; }
legend { font-size: .85rem; color: var(--muted); padding: 0 4px; }
.bid-card { text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 4px; }
.crew-pick.full { opacity: .55; }
.banner { padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.banner.must { background: var(--bad-soft); color: var(--bad); }
.tag.equip { background: var(--bg); color: var(--muted); border-color: var(--line); }
.pre { white-space: pre-wrap; }
td .tag, .person-name .tag { margin-left: 6px; }
ol.steps { padding-left: 20px; display: flex; flex-direction: column; gap: 10px; }
ol.steps li > div { margin-top: 6px; }
.doc-link { margin-right: 10px; }
.small { font-size: .85rem; }
textarea.wide, input.wide { width: 100%; }
/* Vehicle checklist */
.check-section { flex-direction: column; flex-wrap: nowrap; gap: 0; padding: 4px 10px 8px; }
.check-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.check-item:last-child { border-bottom: 0; }
.check-label { flex: 1 1 200px; }
.choices { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
.check-item select.wide, .check-item textarea { width: 100%; }
.choice.on { background: var(--accent, #2b5cab); color: #fff; }
.choice { min-width: 64px; min-height: 36px; }
.choice.ok.on { background: var(--ok); color: #fff; border-color: var(--ok); }
.choice.bad.on { background: var(--bad); color: #fff; border-color: var(--bad); }
.choice.na.on { background: var(--muted); color: #fff; border-color: var(--muted); }
.btn.big { padding: 12px 18px; font-size: 1rem; }
.car-card h2 { margin: 0; }
.feature-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 16px; margin: 8px 0 12px; }
.transfer-lists { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.cost-table { table-layout: fixed; width: 100%; }
.cost-table th:nth-child(1) { width: 34%; } .cost-table th:nth-child(3) { width: 24%; } .cost-table th:nth-child(4) { width: 40px; }
.cost-table input, .cost-table select { width: 100%; min-width: 0; box-sizing: border-box; }
.cards.transfer-lists { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; }
/* Professional standards */
.grid3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px 12px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 12px; }
fieldset.subject { flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.card.inner { box-shadow: none; border: 1px solid var(--line); padding: 8px 10px; margin-bottom: 8px; }
.force-table { table-layout: fixed; width: 100%; } .force-table th:nth-child(1) { width: 34%; } .force-table th:nth-child(6) { width: 36px; }
.force-table input, .force-table select { width: 100%; min-width: 0; box-sizing: border-box; }
details.statement { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin-bottom: 8px; }
details.statement summary { cursor: pointer; font-weight: 600; }
li.note { border-left: 4px solid var(--line); padding-left: 10px; } li.note.pos { border-left-color: var(--ok); } li.note.neg { border-left-color: var(--warn); }
.cols3 { columns: 3 220px; list-style: none; padding: 0; } .cols3 li { padding: 3px 0; }
.row.wrap { flex-wrap: wrap; } .grow { flex: 1; }
.state-table td { white-space: nowrap; }
@media print { .state-table td, .state-table th { font-size: 9px; padding: 2px; } }
.num-input { width: 5em; }
.callout { background: var(--brand-soft); border-radius: 8px; padding: 10px 12px; }
.callout ol { margin: 6px 0 4px; padding-left: 20px; }
.phone-push { border-bottom: 1px solid var(--line); padding-bottom: 12px; margin-bottom: 12px; }
.notify-box { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 12px; background: var(--bg); }
.notify-box summary { cursor: pointer; font-size: .92rem; }
.notify-box[open] summary { margin-bottom: 8px; }
.notify-box .notify-rest { display: grid; gap: 8px; margin-top: 8px; }
.notify-box .notify-rest[hidden] { display: none; }
.notify-box input[type=datetime-local] { align-self: end; }
.who { text-decoration: none; }
.who:hover { text-decoration: underline; }
.code-input { font-size: 1.4rem; letter-spacing: .2em; text-align: center; }
.two-step .qr { display: block; margin: 8px auto; background: #fff; padding: 8px; border-radius: 8px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.codes { columns: 2; list-style: none; padding: 0; font-size: 1.05rem; }
.two-step ol { padding-left: 20px; }
.card.auth { box-sizing: border-box; max-width: min(420px, 100%); }
.auth .code-input { width: 100%; box-sizing: border-box; min-width: 0; }
/* Sections along the top, the section's pages in a second row. */
.links a.cjis::after { content: ' 🔒'; font-size: .75em; }
.subnav { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; padding: 6px 16px; background: var(--panel); border-bottom: 1px solid var(--line); position: sticky; top: 57px; z-index: 9; }
.subnav a { padding: 5px 10px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: .92rem; white-space: nowrap; }
.subnav a:hover { background: var(--bg); }
.subnav a.active { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.subnav.cjis { border-bottom-color: var(--warn, #b26a00); }
.cjis-tag { margin-left: auto; font-size: .72rem; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--warn, #b26a00); color: var(--warn, #b26a00); }
.section-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 12px; }
.section-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--ink); text-decoration: none; }
.section-tile:hover { border-color: var(--brand); }
.flat-group { display: flex; flex-direction: column; align-items: center; padding: 4px 0; }
.flat-head { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 6px; }
@media (max-width: 1180px) { .subnav { display: none; } }
@media (max-width: 1180px) { .links > a.has-group { display: none; } }
.onduty-groups { display: grid; gap: 10px; }
.onduty-group { border-left: 4px solid var(--line-strong); padding-left: 10px; }
.onduty-group.night { border-left-color: #5b6bbf; } .onduty-group.day { border-left-color: #d9a400; }
.onduty-time { font-weight: 600; font-size: .9rem; }
.onduty-group ul { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; }
.home-week.embedded { padding: 8px; }
.home-week.embedded .toolbar h1 { font-size: 1.2rem; }
.layout-mix { padding-left: 24px; }
/* The section row already has these on computers; keep them on phones. */
@media (min-width: 1181px) { .ps-tabs { display: none; } }

/* ---------- Training tracker ---------- */
.tk { display: grid; gap: 16px; }
.tk-hero { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: center; padding: 20px; border-radius: 16px;
  background: linear-gradient(135deg, var(--brand-soft), var(--panel) 60%); border: 1px solid var(--line); }
.tk-hero.person { grid-template-columns: auto 1fr; }
.tk-ring { display: grid; justify-items: center; gap: 6px; text-align: center; }
.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { display: block; }
.ring-track { fill: none; stroke: var(--line); }
.ring-arc { fill: none; stroke-linecap: round; transition: stroke-dashoffset 1.1s cubic-bezier(.2, .8, .2, 1); }
.ring-arc.ok { stroke: var(--ok); } .ring-arc.warn { stroke: var(--day); } .ring-arc.bad { stroke: var(--bad); } .ring-arc.info { stroke: var(--brand); }
.ring-center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1.1; }
.ring-center strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.tk-ring .ring-center strong { font-size: 2.2rem; letter-spacing: -.02em; }
.ring-center span { font-size: .72rem; color: var(--muted); }
.tk-req .ring-center strong { font-size: .8rem; }
.tk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.tk-tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); border-top: 4px solid var(--line-strong); }
.tk-tile strong { font-size: 2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.tk-tile.ok { border-top-color: var(--ok); } .tk-tile.ok strong { color: var(--ok); }
.tk-tile.warn { border-top-color: var(--day); } .tk-tile.warn strong { color: var(--warn); }
.tk-tile.bad { border-top-color: var(--bad); } .tk-tile.bad strong { color: var(--bad); }
.tk-tile.info { border-top-color: var(--brand); } .tk-tile.info strong { color: var(--brand); }
.tk-alert { padding: 12px 16px; border-radius: 10px; background: var(--warn-soft); border-left: 5px solid var(--day); }
.tk-alert.urgent { background: var(--bad-soft); border-left-color: var(--bad); animation: tk-pulse 2.4s ease-in-out 2; }
@keyframes tk-pulse { 50% { box-shadow: 0 0 0 4px var(--bad-soft); } }
.tk-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.tk-col { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); border-top: 5px solid var(--brand); }
.tk-col.state { border-top-color: #2f6fb8; } .tk-col.waspc { border-top-color: #7b3fb5; } .tk-col.department { border-top-color: #1d7a46; }
.tk-col-head { display: flex; justify-content: space-between; align-items: baseline; }
.tk-col-head h2 { margin: 0; font-size: 1.05rem; }
.tk-col-pct { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--muted); }
.tk-req { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; text-align: left; padding: 8px; border-radius: 10px; border: 1px solid transparent;
  background: none; color: var(--ink); font: inherit; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.tk-req:hover { background: var(--bg); border-color: var(--line); transform: translateY(-1px); }
.tk-req-body { display: grid; gap: 2px; min-width: 0; }
.tk-counts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tpill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.tpill.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tpill.due_soon { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tpill.overdue { background: var(--bad-soft); color: var(--bad); border-color: transparent; }
.tpill.exempt { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.tk-race .race-rows { display: grid; gap: 4px; margin-top: 8px; }
.race-row { display: grid; grid-template-columns: minmax(110px, 180px) 1fr auto; gap: 10px; align-items: center; color: var(--ink); text-decoration: none; padding: 2px 4px; border-radius: 6px; }
.race-row:hover { background: var(--bg); }
.race-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .9rem; }
.race-track { position: relative; height: 14px; border-radius: 7px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.race-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 7px; transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.race-fill.ok { background: linear-gradient(90deg, #2c9a5c, var(--ok)); } .race-fill.warn { background: linear-gradient(90deg, #f0b93a, var(--day)); }
.race-fill.bad { background: linear-gradient(90deg, #e2584c, var(--bad)); } .race-fill.na { background: var(--line-strong); }
.race-target { position: absolute; top: -2px; bottom: -2px; left: 66.67%; width: 2px; background: var(--ink); opacity: .55; }
.race-n { font-variant-numeric: tabular-nums; font-weight: 600; display: flex; gap: 6px; align-items: center; min-width: 92px; }
.cit { font-size: .68rem; font-weight: 700; padding: 0 5px; border-radius: 4px; background: var(--bad-soft); color: var(--bad); }
.cit.ok { background: var(--ok-soft); color: var(--ok); }
.tk-search { min-width: 180px; }
.tk-legend { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 10px; color: var(--muted); }
.tk-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tk-legend i { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.tk-matrix-wrap { overflow: auto; max-height: 70vh; border: 1px solid var(--line); border-radius: 10px; }
.tk-matrix { border-collapse: separate; border-spacing: 2px; font-size: .82rem; }
.tk-matrix th.who { position: sticky; left: 0; z-index: 2; background: var(--panel); text-align: left; white-space: nowrap; padding: 2px 8px; font-weight: 500; }
.tk-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--panel); }
.tk-matrix thead th.who { z-index: 4; }
.tk-matrix th.rot { height: 150px; width: 22px; vertical-align: bottom; padding: 0 0 4px; }
.tk-matrix th.rot span { display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-weight: 500; font-size: .76rem; max-height: 146px; overflow: hidden; text-overflow: ellipsis; }
.tk-matrix th.rot.state { border-bottom: 3px solid #2f6fb8; } .tk-matrix th.rot.waspc { border-bottom: 3px solid #7b3fb5; } .tk-matrix th.rot.department { border-bottom: 3px solid #1d7a46; }
.cell { width: 22px; height: 22px; border-radius: 5px; padding: 0; }
.cell a { display: block; width: 100%; height: 22px; }
.cell.done { background: var(--ok); } .cell.due_soon { background: var(--day); } .cell.overdue { background: var(--bad); }
.cell.todo { background: var(--line-strong); } .cell.exempt { background: var(--brand-soft); outline: 1px dashed var(--brand); outline-offset: -2px; } .cell.na { background: transparent; outline: 1px solid var(--line); outline-offset: -1px; }
.cell:hover { filter: brightness(1.12); }
.tk-who { list-style: none; padding: 0; margin: 4px 0 10px; display: grid; gap: 4px; }
.tk-who li { display: flex; justify-content: space-between; gap: 10px; }
/* Person page */
.tk-years { padding: 16px; }
.year-bars { display: flex; align-items: flex-end; gap: 12px; height: 160px; padding-top: 8px; }
.yb { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 4px; height: 100%; flex: 1; max-width: 60px; }
.yb-n { font-size: .78rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.yb-track { position: relative; width: 100%; height: 100%; background: var(--bg); border-radius: 6px 6px 0 0; overflow: hidden; }
.yb-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(0deg, var(--day), #f0c35a); border-radius: 6px 6px 0 0; transition: height .9s cubic-bezier(.2, .8, .2, 1); }
.yb-fill.ok { background: linear-gradient(0deg, var(--ok), #3fb373); }
.yb-y { font-size: .76rem; color: var(--muted); }
.tk-src { border-top: 5px solid var(--brand); }
.tk-src.state { border-top-color: #2f6fb8; } .tk-src.waspc { border-top-color: #7b3fb5; } .tk-src.department { border-top-color: #1d7a46; }
.tk-prow { border-bottom: 1px solid var(--line); }
.tk-prow summary { display: grid; grid-template-columns: 88px minmax(0, 1.2fr) minmax(0, 1fr) 120px; gap: 10px; align-items: center; padding: 8px 2px; cursor: pointer; list-style: none; }
.tk-prow summary::-webkit-details-marker { display: none; }
.tk-pname { font-weight: 600; }
.tk-pdetail { padding: 0 2px 10px 98px; }
.tk-prog { display: block; height: 8px; border-radius: 4px; background: var(--bg); overflow: hidden; border: 1px solid var(--line); min-width: 60px; }
.tk-prog-fill { display: block; height: 100%; width: 0; background: var(--ok); transition: width .9s ease; }
.tk-prog-fill.due_soon, .tk-prog-fill.todo { background: var(--day); } .tk-prog-fill.overdue { background: var(--bad); }
.tk-preview { padding: 6px 8px; background: var(--bg); border-radius: 6px; }
/* Assignments */
.asg-list { display: grid; gap: 6px; }
.asg-row { display: grid; grid-template-columns: 28px 1fr auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; }
.asg-row:hover { border-color: var(--brand); }
.asg-row.done { opacity: .7; }
.asg-check { width: 22px; height: 22px; border-radius: 6px; border: 2px solid var(--line-strong); display: grid; place-items: center; color: var(--ok); font-weight: 700; }
.asg-row.done .asg-check { border-color: var(--ok); background: var(--ok-soft); }
.asg-name { display: grid; gap: 2px; min-width: 0; }
.asg-prog { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; min-width: 140px; }
.asg-items { display: grid; gap: 8px; }
.asg-doc { display: grid; grid-template-columns: 32px 1fr auto auto; gap: 10px; align-items: center; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
.asg-doc.seen { background: var(--ok-soft); border-color: transparent; }
.asg-doc-ic { font-size: 1.3rem; }
.asg-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.asg-me { border-left: 5px solid var(--brand); }
.pick-list { max-height: 300px; overflow: auto; display: grid; gap: 2px; border: 1px solid var(--line); border-radius: 8px; padding: 6px; }
.pre { white-space: pre-wrap; }
@media (max-width: 700px) {
  .tk-hero, .tk-hero.person { grid-template-columns: 1fr; justify-items: center; }
  .tk-prow summary { grid-template-columns: 80px 1fr; }
  .tk-prow summary > .small, .tk-prow summary > .tk-prog { grid-column: 2; }
  .tk-pdetail { padding-left: 2px; }
  .race-row { grid-template-columns: 100px 1fr auto; }
  .asg-doc { grid-template-columns: 28px 1fr; } .asg-doc > .tag, .asg-doc > .btn, .asg-doc > a.btn { grid-column: 2; justify-self: start; }
  .asg-item { grid-template-columns: 24px 1fr; } .asg-item > * { grid-column: 2; } .asg-item > span:first-child { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .ring-arc, .race-fill, .yb-fill, .tk-prog-fill { transition: none; } .tk-alert.urgent { animation: none; } }
@media (max-width: 700px) { .tk-hist th:nth-child(4), .tk-hist td:nth-child(4) { display: none; } }

/* ---------- Org chart ---------- */
.org-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.org-side { position: sticky; top: 120px; display: grid; gap: 8px; max-height: calc(100vh - 140px); overflow: hidden; grid-template-rows: auto auto auto auto 1fr; }
.org-people { overflow: auto; display: grid; gap: 6px; align-content: start; padding-right: 2px; }
.org-person { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); cursor: grab; }
.org-person:hover { border-color: var(--brand); }
.org-person.picked { border-color: var(--brand); background: var(--brand-soft); box-shadow: 0 0 0 2px var(--brand-soft); }
.org-at { color: var(--ok); }
.org-scroll { overflow: auto; padding: 12px 0 24px; }
.org-chart { display: inline-block; min-width: 100%; }
.org-chart ul { display: flex; justify-content: center; padding: 22px 0 0; margin: 0; position: relative; }
.org-chart > ul { padding-top: 0; }
.org-chart li { list-style: none; display: flex; flex-direction: column; align-items: center; position: relative; padding: 22px 8px 0; }
.org-chart > ul > li { padding-top: 0; }
.org-chart li::before, .org-chart li::after { content: ''; position: absolute; top: 0; right: 50%; width: 50%; height: 22px; border-top: 2px solid var(--line-strong); }
.org-chart li::after { right: auto; left: 50%; border-left: 2px solid var(--line-strong); }
.org-chart li:only-child::before, .org-chart li:only-child::after { display: none; }
.org-chart li:only-child { padding-top: 0; }
.org-chart li:first-child::before, .org-chart li:last-child::after { border: 0 none; }
.org-chart li:last-child::before { border-right: 2px solid var(--line-strong); border-radius: 0 8px 0 0; }
.org-chart li:first-child::after { border-radius: 8px 0 0 0; }
.org-chart > ul > li::before, .org-chart > ul > li::after { display: none; }
.org-chart ul ul::before { content: ''; position: absolute; top: 0; left: 50%; height: 22px; border-left: 2px solid var(--line-strong); }
.org-box { min-width: 150px; max-width: 220px; padding: 8px 10px 10px; border-radius: 10px; background: var(--panel); border: 2px solid var(--brand); box-shadow: var(--shadow); transition: transform .12s, box-shadow .12s, border-color .12s; }
.org-chart > ul > li > .org-box { border-width: 3px; background: var(--brand-soft); }
.org-box.vacant { border-style: dashed; border-color: var(--line-strong); }
.org-box.over, .placing .org-box:hover { border-color: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); transform: translateY(-2px); }
.placing .org-box { cursor: copy; }
.org-title { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-weight: 700; font-size: .86rem; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.org-edit { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px; }
.org-holders { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 6px; }
.org-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: var(--bg); border: 1px solid var(--line); font-size: .86rem; cursor: grab; }
.org-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.org-x:hover { color: var(--bad); }
.org-vacant { margin-top: 6px; font-size: .8rem; color: var(--muted); font-style: italic; }
.org-plus { width: 24px; height: 24px; margin-top: 6px; border-radius: 50%; border: 2px solid var(--brand); background: var(--panel); color: var(--brand); font-weight: 700; line-height: 18px; cursor: pointer; position: relative; z-index: 1; }
.org-plus:hover { background: var(--brand); color: var(--brand-ink); }
.org-plus + ul { padding-top: 16px; }
.org-plus + ul::before { height: 16px; }
.org-plus + ul > li { padding-top: 16px; }
.org-plus + ul > li::before, .org-plus + ul > li::after { height: 16px; }
.org-picked { padding: 8px 12px; border-radius: 8px; background: var(--brand-soft); }
@media (max-width: 900px) { .org-wrap { grid-template-columns: 1fr; } .org-side { position: static; max-height: 420px; } }
/* Training request progress */
.req-track { display: flex; flex-wrap: wrap; gap: 0; list-style: none; padding: 0; margin: 0; counter-reset: none; }
.req-track li { position: relative; display: grid; gap: 2px; padding: 0 18px 0 24px; min-width: 130px; flex: 1; }
.req-track li::before { content: ''; position: absolute; left: 6px; top: 16px; bottom: -4px; width: 0; }
.req-track li:not(:last-child)::after { content: ''; position: absolute; top: 6px; left: 20px; right: 0; height: 2px; background: var(--line-strong); }
.rt-dot { position: absolute; left: 0; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px var(--panel); }
.req-track li.bad .rt-dot { background: var(--bad); } .req-track li.now .rt-dot { background: var(--day); animation: tk-pulse 2s infinite; } .req-track li.ok .rt-dot { background: var(--ok); outline: 3px solid var(--ok-soft); }
.req-track li strong { margin-top: 18px; }
.req-track li.bad strong { color: var(--bad); }
.rt-note { color: var(--bad); }
.req-history li.bad { border-left: 3px solid var(--bad); padding-left: 8px; }
.reason { color: var(--bad); }
.private-note { margin-top: 4px; padding: 6px 8px; border-radius: 6px; background: var(--warn-soft); border: 1px dashed var(--warn); }
.goal-tag { padding: 6px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }
.rec-pick { gap: 16px; }
@media (max-width: 700px) { .req-track { flex-direction: column; gap: 10px; } .req-track li:not(:last-child)::after { display: none; } }
.goal { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 4px; }
.goal.met { background: var(--ok-soft); border-color: transparent; }
.goal-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.goal-head strong { flex: 1; min-width: 160px; }
.goal-kind { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 2px 6px; border-radius: 4px; background: var(--brand-soft); color: var(--brand); }
.goal-kind.performance { background: var(--ot-soft); color: var(--ot); } .goal-kind.other { background: var(--bg); color: var(--muted); }
.goal-links { margin: 0; padding-left: 4px; list-style: none; }
/* Grid columns can shrink below their widest table (tables scroll inside .table-wrap). */
.two-col > * { min-width: 0; }
/* Asking before a typed-in pop-up is thrown away */
.modal-ask { display: grid; gap: 8px; margin: 0 16px 4px; padding: 10px 12px; border-radius: 10px; background: var(--warn-soft); border: 1px solid var(--day); }
.modal-ask[hidden] { display: none; }
.modal.nudge { animation: modal-nudge .35s ease; }
@keyframes modal-nudge { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) { .modal.nudge { animation: none; } }
.org-box.linked { border-color: var(--brand); }
.org-crew-head { margin-top: 6px; color: var(--muted); font-weight: 600; }
.org-box.from-crew { min-width: 140px; border-width: 1px; border-color: var(--line-strong); box-shadow: none; }
.org-box.from-crew .org-title { color: var(--muted); font-size: .75rem; }
.org-link { font-size: .8rem; }
/* A sergeant's officers stack in a column under them so the chart doesn't get miles wide. */
.org-chart ul.org-col { flex-direction: column; align-items: center; gap: 8px; padding-top: 16px; }
.org-chart ul.org-col::before { height: 100%; z-index: 0; }
.org-chart ul.org-col > li { padding: 0; }
.org-chart ul.org-col > li::before, .org-chart ul.org-col > li::after { display: none; }
.org-chart ul.org-col > li > .org-box { position: relative; z-index: 1; }
.ok-note { margin: 0; padding: 8px 10px; border-radius: 8px; background: var(--ok-soft); color: var(--ok); font-weight: 600; }

/* ---------- Evaluations ---------- */
.modal.wide { max-width: 820px; }
.req-track li.todo .rt-dot { background: var(--line-strong); }
.ev-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ev-stat { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ev-stat strong { font-size: 1.9rem; line-height: 1; color: var(--brand); }
.ev-stat span { font-size: .85rem; color: var(--muted); }
.ev-stat.hot { border-color: var(--bad); background: linear-gradient(135deg, var(--bad-soft), var(--panel) 70%); }
.ev-stat.hot strong { color: var(--bad); }
.ev-attn { border-left: 4px solid var(--bad); }
.ev-st { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .78rem; font-weight: 600; background: var(--bg); border: 1px solid var(--line); text-transform: capitalize; }
.ev-st.draft { color: var(--muted); border-style: dashed; }
.ev-st.review { background: var(--day-soft); color: var(--day); border-color: transparent; }
.ev-st.employee { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.ev-st.done { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
tr.ev-late td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--brand-soft); }
.ev-back { border-left: 4px solid var(--bad); color: var(--bad); }
.ev-sticky { position: sticky; top: 56px; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 12px; margin-bottom: 12px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ev-prog { flex: 0 0 160px; height: 8px; border-radius: 4px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.ev-prog-fill { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--ok)); transition: width .25s; }
.ev-sec h2 { margin-bottom: 4px; }
.ev-item { display: grid; grid-template-columns: minmax(180px, 1fr) auto; gap: 6px 14px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ev-item:last-child { border-bottom: 0; }
.ev-item .ev-comment, .ev-item .ev-c { grid-column: 1 / -1; }
.ev-comment.need textarea { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }
.ev-c { padding: 6px 10px; border-radius: 8px; background: var(--bg); font-size: .9rem; white-space: pre-wrap; }
.ev-btns { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.ev-b { min-width: 34px; height: 32px; padding: 0 8px; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--panel); color: var(--ink); font: inherit; font-weight: 600; cursor: pointer; }
.ev-b:hover { border-color: var(--brand); }
.ev-b.on { color: #fff; border-color: transparent; background: var(--brand); }
.ev-b.on.bad { background: var(--bad); } .ev-b.on.warn { background: var(--warn); } .ev-b.on.ok { background: var(--brand); } .ev-b.on.great { background: var(--ok); }
.ev-addc { height: 32px; }
.ev-val { min-width: 44px; text-align: center; padding: 4px 10px; border-radius: 8px; font-weight: 700; background: var(--bg); }
.ev-val.bad { background: var(--bad-soft); color: var(--bad); } .ev-val.warn { background: var(--warn-soft); color: var(--warn); } .ev-val.great { background: var(--ok-soft); color: var(--ok); }
.ev-text h3 { margin: 10px 0 4px; }
.ev-goals, .ev-next { list-style: none; padding: 0; display: grid; gap: 8px; }
.ev-goal { display: grid; gap: 6px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.ev-goal .tag, .ev-next .tag { margin-left: 6px; }
.ev-next input { flex: 1 1 260px; }
.ev-trend { display: flex; align-items: center; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.ev-spark { width: 220px; max-width: 100%; height: auto; }
.ev-spark-line { fill: none; stroke: var(--brand); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.ev-spark-dot { fill: var(--brand); }
.ev-spark-ok { stroke: var(--ok); stroke-dasharray: 4 4; stroke-width: 1; opacity: .7; }
.ev-missing { margin: 0; padding-left: 18px; }
.ev-events { margin: 0; padding-left: 18px; }
.fto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.fto-card { display: grid; gap: 10px; align-content: start; }
.fto-card.late { border-top: 4px solid var(--bad); }
.fto-card h2 { margin: 0; }
.fto-card .ev-spark { width: 100%; }
.fto-phase { display: flex; gap: 4px; flex-wrap: wrap; }
.fto-ph { flex: 1 1 0; min-width: 70px; text-align: center; font-size: .75rem; padding: 4px 6px; border-radius: 6px; background: var(--bg); color: var(--muted); border: 1px solid var(--line); }
.fto-ph.past { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.fto-ph.on { background: var(--brand); color: var(--brand-ink); border-color: transparent; font-weight: 700; }
.fto-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.fto-nums div { display: grid; padding: 6px; border-radius: 8px; background: var(--bg); }
.fto-nums strong { font-size: 1.3rem; }
.fto-nums span { font-size: .72rem; color: var(--muted); }
.fto-nums .bad { background: var(--bad-soft); color: var(--bad); }
@media (max-width: 640px) {
  .ev-item { grid-template-columns: 1fr; }
  .ev-btns { justify-content: flex-start; }
}
@media print {
  .no-print, header, nav, .topbar, .subnav, .crumbs, .ev-sticky, .ev-addc { display: none !important; }
  .card { box-shadow: none; border: 1px solid #999; break-inside: avoid; }
  .ev-b:not(.on) { display: none; }
}
/* Evaluations: APD form pieces */
.ev-sec-head { align-items: baseline; gap: 10px; }
.ev-sec-head .tag { margin-left: 8px; vertical-align: middle; }
.ev-sec.optional { border-style: dashed; }
.ev-note { margin: 0 0 6px; }
.ev-avg { font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--bg); white-space: nowrap; }
.ev-avg.bad { background: var(--bad-soft); color: var(--bad); } .ev-avg.ok { background: var(--brand-soft); color: var(--brand); } .ev-avg.great { background: var(--ok-soft); color: var(--ok); }
.ev-b.wide { min-width: 0; font-weight: 500; font-size: .85rem; }
textarea.need { border-color: var(--bad); box-shadow: 0 0 0 2px var(--bad-soft); }
.ev-info dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px 16px; margin: 0; }
.ev-info dt { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.ev-info dd { margin: 2px 0 0; font-weight: 600; }
.ev-instr summary { cursor: pointer; font-weight: 600; }
.ev-instr p { margin-top: 10px; }
.ev-log { padding: 8px 10px; border-radius: 8px; background: var(--bg); border: 1px dashed var(--line-strong); }
.ev-log ul { margin: 6px 0 0; padding-left: 18px; }
.ev-overall { border-top: 4px solid var(--brand); }
.ev-total-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.ev-total { font-size: 2rem; color: var(--brand); }
.ev-secbars { display: grid; gap: 5px; margin: 12px 0; }
.ev-secbar { display: grid; grid-template-columns: minmax(140px, 260px) 1fr 44px; gap: 8px; align-items: center; }
.ev-secbar-l { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-secbar-t { height: 10px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.ev-secbar-fill { height: 100%; width: 0; background: var(--brand); transition: width .3s; }
.ev-secbar-fill.bad { background: var(--bad); } .ev-secbar-fill.ok { background: linear-gradient(90deg, var(--brand), var(--ok)); }
.ev-remedial { padding: 8px 12px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); margin: 8px 0; }
.ev-final { font-size: 1.1rem; }
.ev-sigs { display: grid; gap: 12px; }
.ev-sigblock { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; }
.ev-sigblock h3 { margin: 0 0 4px; }
.ev-sig { margin-top: 6px; }
.ev-sig-name { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 1.5rem; color: var(--brand); }
.ev-sig.empty { color: var(--muted); font-style: italic; }
/* Evaluations dashboard */
.evd-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.evd-tile { display: grid; gap: 2px; align-content: center; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); }
.evd-tile strong { font-size: 1.9rem; line-height: 1; color: var(--brand); }
.evd-tile span { font-size: .82rem; color: var(--muted); }
.evd-tile.hot { border-color: var(--bad); background: linear-gradient(135deg, var(--bad-soft), var(--panel) 70%); }
.evd-tile.hot strong { color: var(--bad); }
.evd-tile.hero { grid-column: span 2; display: flex; align-items: center; gap: 14px; background: linear-gradient(135deg, var(--brand-soft), var(--panel) 75%); }
.evd-tile.hero strong { font-size: 1.2rem; color: var(--ink); display: block; }
.evd-ring { width: 74px; height: 74px; flex: none; }
.evd-tile.hero .evd-ring { width: 92px; height: 92px; }
.evd-ring-track { fill: none; stroke: var(--line); stroke-width: 12; }
.evd-ring-bar { fill: none; stroke: var(--ok); stroke-width: 12; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 60px 60px; transition: stroke-dasharray .6s; }
.evd-ring.warn .evd-ring-bar { stroke: var(--warn); } .evd-ring.bad .evd-ring-bar { stroke: var(--bad); }
.evd-ring-text { font-size: 24px; font-weight: 800; fill: var(--ink); }
.evd-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-bottom: 14px; }
.evd-grid .card { margin: 0; }
.evd-wide { grid-column: 1 / -1; }
.evd-pipe { display: flex; height: 22px; border-radius: 11px; overflow: hidden; background: var(--bg); border: 1px solid var(--line); margin: 6px 0 10px; }
.evd-seg { flex-basis: 0; min-width: 2px; }
.evd-seg.draft, .evd-dot.draft { background: var(--line-strong); } .evd-seg.employee, .evd-dot.employee { background: var(--warn); }
.evd-seg.review, .evd-dot.review { background: var(--day); } .evd-seg.chief, .evd-dot.chief { background: var(--brand); }
.evd-key { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: .85rem; }
.evd-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; }
.evd-hist { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; height: 150px; align-items: end; }
.evd-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; gap: 2px; }
.evd-barwrap { display: flex; align-items: flex-end; }
.evd-bar { width: 100%; border-radius: 6px 6px 0 0; background: var(--brand); transition: height .5s; }
.evd-bar.s1 { background: var(--bad); } .evd-bar.s2 { background: var(--warn); } .evd-bar.s3 { background: var(--brand); } .evd-bar.s4 { background: var(--day); } .evd-bar.s5 { background: var(--ok); }
.evd-n { font-weight: 700; } .evd-x { font-size: .8rem; color: var(--muted); }
.evd-secs { display: grid; gap: 6px; }
.evd-srow { display: grid; grid-template-columns: minmax(150px, 320px) 1fr 48px; gap: 10px; align-items: center; }
.evd-sl { font-size: .88rem; }
.evd-strack { height: 12px; border-radius: 6px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.evd-sfill { height: 100%; } .evd-sfill.bad { background: var(--bad); } .evd-sfill.ok { background: var(--brand); } .evd-sfill.great { background: var(--ok); }
.evd-flags, .evd-due { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.evd-flags li { padding: 6px 10px; border-radius: 8px; background: var(--bg); border-left: 4px solid var(--warn); }
.evd-flags li.overdue, .evd-flags li.low { border-left-color: var(--bad); }
.evd-due li.late { color: var(--bad); }
.evd-h { margin: 6px 0 10px; }
.evd-tree { display: grid; gap: 10px; margin-bottom: 14px; }
.evd-team { border: 1px solid var(--line); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow); }
.evd-team > summary { list-style: none; cursor: pointer; padding: 10px 14px; }
.evd-team > summary::-webkit-details-marker { display: none; }
.evd-team-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.evd-team-head .evd-ring { width: 54px; height: 54px; }
.evd-team-nums { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-left: auto; font-size: .88rem; color: var(--muted); }
.evd-team-nums strong { color: var(--ink); font-size: 1.05rem; } .evd-team-nums .bad strong { color: var(--bad); }
.evd-team-body { display: grid; gap: 6px; padding: 0 14px 12px; }
.evd-team .evd-team { box-shadow: none; background: var(--bg); }
.evd-person { display: grid; grid-template-columns: minmax(130px, 1.4fr) minmax(60px, .6fr) auto 34px 74px minmax(90px, auto); gap: 8px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--bg); color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.evd-person:hover { border-color: var(--brand); }
.evd-person.late { box-shadow: inset 3px 0 0 var(--bad); }
.evd-pn { font-weight: 600; }
.evd-score { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--line); color: var(--ink); }
.evd-score.s1 { background: var(--bad); color: #fff; } .evd-score.s2 { background: var(--warn); color: #fff; } .evd-score.s3 { background: var(--brand); color: #fff; } .evd-score.s4 { background: var(--day); color: #fff; } .evd-score.s5 { background: var(--ok); color: #fff; }
.evd-person .ev-spark { width: 70px; }
@media (max-width: 700px) {
  .evd-tile.hero { grid-column: 1 / -1; }
  .evd-person { grid-template-columns: 1fr auto 34px; }
  .evd-person > .small.muted:nth-child(2), .evd-person .ev-spark, .evd-nospark { display: none; }
  .evd-srow, .ev-secbar { grid-template-columns: 1fr 70px 44px; }
}
.evd-tags { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.evd-person { grid-template-columns: minmax(130px, 1.4fr) minmax(60px, .5fr) minmax(0, 1fr) 34px 74px minmax(100px, auto); }
.ev-sec-total { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 10px 0 6px; padding: 8px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); font-weight: 600; }
.ev-sec-total .ev-avg { font-size: 1.1rem; }
.org-crew-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0 12px; margin-top: 4px; }
/* Org chart move planner */
.org-tray { margin: 10px 0; padding: 12px 14px; border-radius: 12px; border: 2px dashed var(--brand); background: var(--brand-soft); display: grid; gap: 8px; }
.org-tray h3 { margin: 0; }
.org-moves { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.org-moves li { display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; background: var(--panel); }
.org-moves .org-x { margin-left: auto; }
.org-hole { margin: 0; padding: 6px 10px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.org-impact { display: grid; gap: 8px; }
.org-impact h3 { margin: 4px 0 0; }
.org-gaps.bad { padding: 8px 10px; border-radius: 8px; background: var(--bad-soft); color: var(--bad); }
.org-gaps ul { margin: 4px 0 0; padding-left: 18px; }
.org-up { color: var(--ok); }
.org-chip.moved { border-color: var(--warn); background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.org-delta.down { color: var(--bad); font-weight: 700; } .org-delta.up { color: var(--ok); font-weight: 700; }
.org-scroll.planning .org-box.linked { box-shadow: 0 0 0 3px var(--brand-soft); }
.tk-sworn { gap: 6px; align-items: center; margin-top: 4px; } .tk-sworn select { width: auto; }
/* ---------- Early intervention dashboard ---------- */
.ei-dash { display: grid; gap: 14px; }
.ei-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.ei-tile { display: grid; gap: 2px; padding: 14px 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: var(--shadow); position: relative; overflow: hidden; }
.ei-tile strong { font-size: 2rem; line-height: 1; color: var(--brand); }
.ei-tile span { font-size: .84rem; color: var(--muted); }
.ei-tile em { font-style: normal; font-size: .74rem; color: var(--muted); }
.ei-tile.hot { border-color: var(--bad); background: linear-gradient(135deg, var(--bad-soft), var(--panel) 70%); }
.ei-tile.hot strong { color: var(--bad); }
.ei-tile.warm { border-color: var(--warn); background: linear-gradient(135deg, var(--warn-soft), var(--panel) 70%); }
.ei-tile.warm strong { color: var(--warn); }
.ei-tile.calm strong { color: var(--ok); }
.ei-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.ei-grid .card, .ei-side .card { margin: 0; }
.ei-side { display: grid; gap: 14px; }
.ei-meters { display: grid; gap: 8px; }
.ei-meter { display: grid; grid-template-columns: minmax(130px, 200px) 1fr 40px; grid-template-areas: "who track pts" "hits hits hits"; gap: 4px 12px; align-items: center;
  padding: 8px 10px; border-radius: 10px; background: var(--bg); color: var(--ink); text-decoration: none; border: 1px solid transparent; }
.ei-meter:hover { border-color: var(--brand); }
.ei-who { grid-area: who; display: grid; }
.ei-track { grid-area: track; position: relative; height: 14px; border-radius: 7px; background: var(--panel); border: 1px solid var(--line); overflow: visible; }
.ei-fill { height: 100%; width: 0; border-radius: 7px; transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.ei-fill.low { background: linear-gradient(90deg, var(--day-soft), var(--day)); }
.ei-fill.near { background: linear-gradient(90deg, var(--warn-soft), var(--warn)); }
.ei-fill.over { background: linear-gradient(90deg, var(--warn), var(--bad)); box-shadow: 0 0 10px var(--bad-soft); }
.ei-line { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--bad); border-radius: 1px; }
.ei-pts { grid-area: pts; text-align: center; font-weight: 800; font-size: 1.15rem; }
.ei-pts.over { color: var(--bad); } .ei-pts.near { color: var(--warn); }
.ei-hits { grid-area: hits; display: flex; flex-wrap: wrap; gap: 4px; }
.ei-hit { font-size: .74rem; padding: 2px 8px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); }
.ei-clear { display: grid; gap: 2px; padding: 16px; border-radius: 12px; background: var(--ok-soft); color: var(--ok); text-align: center; }
.ei-alerts { display: grid; gap: 6px; }
.ei-alert { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); color: var(--ink); text-decoration: none; border-left: 4px solid var(--bad); }
.ei-alert.reviewing { border-left-color: var(--warn); } .ei-alert.closed { border-left-color: var(--line-strong); opacity: .85; }
.ei-alert-pts { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--bad-soft); color: var(--bad); line-height: 1; }
.ei-alert.reviewing .ei-alert-pts { background: var(--warn-soft); color: var(--warn); } .ei-alert.closed .ei-alert-pts { background: var(--line); color: var(--muted); }
.ei-alert-pts strong { font-size: 1.1rem; } .ei-alert-pts span { font-size: .6rem; }
.ei-st { font-size: .76rem; padding: 3px 9px; border-radius: 999px; background: var(--panel); border: 1px solid var(--line); white-space: nowrap; }
.ei-closed summary { cursor: pointer; margin: 10px 0 6px; font-weight: 600; }
.ei-cols { display: grid; grid-template-columns: repeat(12, 1fr); gap: 8px; height: 190px; align-items: end; }
.ei-col { display: grid; grid-template-rows: auto 1fr auto; height: 100%; gap: 3px; text-align: center; }
.ei-bar { position: relative; display: flex; align-items: flex-end; justify-content: center; }
.ei-stack { width: 70%; max-width: 38px; display: flex; flex-direction: column-reverse; border-radius: 6px 6px 0 0; overflow: hidden; height: 100%; justify-content: flex-start; }
.ei-seg { width: 100%; transition: height .6s; }
.ei-seg.use_of_force, .ei-dot.use_of_force { background: var(--bad); } .ei-seg.pursuit, .ei-dot.pursuit { background: var(--warn); }
.ei-seg.collision, .ei-dot.collision { background: var(--day); } .ei-seg.complaint, .ei-dot.complaint { background: var(--night); }
.ei-good, .ei-dot.commendation { background: var(--ok); }
.ei-good { position: absolute; left: 50%; width: 12px; height: 12px; margin: 0 0 -6px -6px; border-radius: 50%; border: 2px solid var(--panel); box-shadow: 0 0 0 1px var(--ok); }
.ei-n { font-size: .78rem; font-weight: 700; min-height: 1em; } .ei-m { font-size: .74rem; color: var(--muted); }
.ei-key { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; font-size: .84rem; }
.ei-dot { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.ei-outs { display: grid; gap: 6px; }
.ei-orow { display: grid; grid-template-columns: minmax(120px, 1fr) 1fr 28px; gap: 8px; align-items: center; font-size: .88rem; }
.ei-otrack { height: 10px; border-radius: 5px; background: var(--bg); border: 1px solid var(--line); overflow: hidden; }
.ei-ofill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--ok)); }
.ei-heatmap td.ei-heat { text-align: center; font-weight: 600; }
.ei-heat small { font-weight: 500; opacity: .85; }
.ei-heat.h1 { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ei-heat.h2 { background: color-mix(in srgb, var(--warn) 34%, transparent); }
.ei-heat.h3 { background: color-mix(in srgb, var(--bad) 40%, transparent); color: var(--ink); }
.ei-heat.good { background: color-mix(in srgb, var(--ok) 25%, transparent); }
.ei-flagged td:first-child { box-shadow: inset 3px 0 0 var(--bad); }
.ei-flag { color: var(--bad); margin-left: 6px; }
.ei-rules > summary { cursor: pointer; }
.ei-rulegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; margin-top: 10px; }
.ei-rule { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); }
.ei-rule.off { opacity: .5; }
.ei-rule-pts { display: grid; place-items: center; height: 36px; border-radius: 8px; background: var(--brand); color: var(--brand-ink); font-weight: 800; }
.ei-thr { margin-top: 10px; align-items: center; gap: 6px; }
@media (max-width: 900px) { .ei-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .ei-meter { grid-template-columns: 1fr 40px; grid-template-areas: "who pts" "track track" "hits hits"; }
  .ei-cols { gap: 3px; } .ei-m { font-size: .62rem; }
}
.ei-meter.alerted { border-color: var(--bad); }
/* 3D body diagram */
.body3d { display: grid; gap: 6px; }
.body3d-stage { position: relative; border-radius: 14px; background: radial-gradient(ellipse at 50% 40%, #13233f, #05080f 72%); border: 1px solid #1d2c48; overflow: hidden; cursor: grab;
  box-shadow: inset 0 0 60px rgba(60, 140, 255, .12); }
.body3d-stage:active { cursor: grabbing; }
.body3d-stage canvas { display: block; }
.body3d-views { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; }
.body3d-views .btn { min-width: 58px; }
.body3d-hint { text-align: center; font-size: .78rem; color: var(--muted); }
.body3d-spot { text-align: center; font-weight: 700; color: var(--brand); }
.body3d-fallback { padding: 14px; border: 1px dashed var(--line-strong); border-radius: 12px; }
/* Use of force: officer part, subjects, review */
.uof-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.uof-tabs { display: flex; gap: 6px; }
.uof-prompt { padding: 8px 12px; border-radius: 10px; background: var(--warn-soft); color: var(--warn); font-weight: 600; }
.uof-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.uof-item { display: grid; grid-template-columns: 32px 1fr auto; gap: 10px; align-items: center; padding: 8px 10px; border-radius: 10px; background: var(--bg); border: 1px solid var(--line); }
.uof-n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #ff3b3b; color: #fff; font-weight: 800; font-size: .85rem; }
.uof-n.inj { background: #18b884; }
.uof-btns { display: flex; gap: 4px; }
.uof-empty { padding: 10px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.uof-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 12px; }
.uof-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 8px; color: var(--muted); }
.uof-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.uof-dot.force { background: #ff3b3b; } .uof-dot.probe { background: #ffc531; } .uof-dot.injury { background: #2ee6a0; }
.uof-officer h3 { margin: 8px 0 4px; }
.uof-check { display: grid; gap: 4px; }
.uof-ck-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 4px 0; border-bottom: 1px solid var(--line); }
.uof-ck-row .seg { display: flex; gap: 4px; }
.uof-ck-row .chip { padding: 4px 10px; font-size: .82rem; }
.uof-find { align-items: center; gap: 8px; }
.uof-find strong { min-width: 140px; }
.uof-cklist { list-style: none; padding: 0; columns: 2; margin: 0 0 10px; }
.uof-cklist li.no { color: var(--bad); } .uof-cklist li.yes { color: var(--ok); }
.res-seq { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.offscreen { position: fixed; left: -10000px; top: 0; width: 300px; }
@media (max-width: 800px) { .uof-grid { grid-template-columns: 1fr; } .uof-cklist { columns: 1; } }