/* Watch Desk portal-local styles for content areas that aren't (yet) Chief360.Ui components.
   Token-driven; renders inside the layout's .app root so it flips with day/night. */

/* ---- shared bits ---- */
.wd-toolbar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px; }
.wd-toolbar .lbl { font-size:12px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.wd-sp { flex:1; }
.wd-datenav { display:inline-flex; align-items:center; gap:6px; }
.wd-datenav .lab { font-weight:700; min-width:104px; text-align:center; }
.wd-tag { display:inline-block; color:#fff; font-size:11.5px; font-weight:700; padding:2px 9px; border-radius:20px; }
.wd-person { display:inline-flex; align-items:center; gap:8px; }
.wd-pav { width:26px; height:26px; border-radius:50%; background:var(--side); color:#fff; font-size:10px; font-weight:800; display:grid; place-items:center; }
.wd-mono { font-variant-numeric:tabular-nums; color:var(--text); }

/* permission matrix (Calendar Setup › Roles) */
.wd-matrix { width:100%; border-collapse:collapse; }
.wd-matrix th, .wd-matrix td { padding:9px 10px; border-top:1px solid var(--line); text-align:center; }
.wd-matrix th:first-child, .wd-matrix td:first-child { text-align:left; font-weight:700; }
.wd-matrix thead th { background:var(--line-2); font-size:12px; color:var(--muted); border-top:0; }

/* ══ AVAILABILITY (Chat 43) — mockup approved 2026-08-25, folded in ═══════════
   One page: Week / Month / List display modes crossed with a Mine / Agency scope
   toggle. Mine DIMS everyone else's entries (coverage context stays visible) rather
   than hiding them; Agency shows the full set at full brightness.

   Colours: every value resolves to an existing custom property. The four availability
   types map straight onto the status tokens — Available = --ok, Maybe = --amber,
   Unavailable = --under, Duty Crew = --over — carried by .wd-t-* below, which the
   client already emits as ColorClass. No hex literal is introduced (the only #fff is
   foreground-on-colour, the same role .wd-tag/.wd-pav already use above).
   Everything is scoped under .app so it flips with day/night. */

/* ---- toolbar ---- */
.app .av-filter { max-width:190px; min-height:40px; }
.app .av-lbl { font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); }
/* 40px tap targets on the date stepper — crews drive this from a phone in the bay. */
.app .av-page .wd-datenav .btn { min-width:40px; min-height:40px; justify-content:center; }

/* ---- split: calendar (left) + persistent rail (right) ---- */
.app .av-layout { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:16px; align-items:start; }
.app .av-main { min-width:0; }
.app .av-rail { display:flex; flex-direction:column; gap:16px; min-width:0; }
.app .av-rail .w { grid-column:auto; }

/* ---- week grid ---- */
.app .av-cal { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.app .av-day { background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  min-height:168px; min-width:0; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.app .av-day.today { border-color:var(--orange); box-shadow:0 0 0 1px var(--orange); }
.app .av-dh { display:flex; align-items:baseline; justify-content:space-between;
  padding:7px 9px; border-bottom:1px solid var(--line-2); }
.app .av-dow { font-size:11px; font-weight:800; text-transform:uppercase;
  letter-spacing:.05em; color:var(--muted); }
.app .av-dnum { font-weight:800; font-size:14px; }
.app .av-dnum.on { color:var(--orange); }
.app .av-slots { flex:1; padding:6px; display:flex; flex-direction:column; gap:5px; }

/* An entry and a day's add control are BUTTONS so they are focusable and answer
   Enter/Space. Reset the native chrome COMPLETELY — see the .av-mcell note below. */
.app .av-block { -webkit-appearance:none; appearance:none; border:0; background:none;
  font:inherit; color:#fff; display:block; width:100%; text-align:left; cursor:pointer;
  border-radius:6px; padding:5px 7px; font-size:11.5px; font-weight:700; line-height:1.25; }
.app .av-block .who { display:block; font-weight:800; }
.app .av-block .tm { display:block; font-weight:600; opacity:.92; font-size:10.5px; }
.app .av-block.mine { outline:2px solid var(--card); outline-offset:-2px; }

.app .av-add { -webkit-appearance:none; appearance:none; border:1px dashed var(--line);
  background:none; font:inherit; color:var(--muted); margin:0 6px 6px; border-radius:6px;
  font-size:13px; font-weight:700; min-height:40px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:4px; }
.app .av-add:hover { border-color:var(--orange); color:var(--orange-ink); background:var(--orange-soft); }

/* ---- legend + swatches ---- */
.app .av-legend { display:flex; gap:12px; flex-wrap:wrap; align-items:center;
  margin-top:14px; font-size:12px; color:var(--muted); }
.app .av-legend .lg { display:flex; align-items:center; gap:6px; }
.app .av-sw { width:11px; height:11px; border-radius:3px; display:inline-block; flex:none; }
.app .av-chip { font-size:11px; font-weight:600; background:var(--orange-soft);
  color:var(--orange-ink); border:1px solid var(--orange); border-radius:6px;
  padding:3px 8px; display:inline-flex; align-items:center; gap:4px; }

/* ---- month grid ---- */
.app .av-monthgrid { background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.app .av-mrow { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.app .av-mdow { background:var(--surface); color:var(--muted); font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; text-align:right; padding:7px 10px;
  border-bottom:1px solid var(--line); border-left:1px solid var(--line-2); }
.app .av-mdow:first-child { border-left:0; }

/* THEME FIX carried across from the mockup (Availability, 2026-08-25): the day cell is a
   <button>, and resetting only border-left/border-top leaves the browser's native 2px outset
   bezel drawn down the right and bottom edge of EVERY cell. Reset the border wholesale, then
   re-add the two grid lines, and turn appearance off so no UA background creeps back. */
.app .av-mcell { -webkit-appearance:none; appearance:none; border:0; font:inherit;
  color:var(--text); background:var(--card);
  border-left:1px solid var(--line-2); border-top:1px solid var(--line-2);
  min-height:88px; min-width:0; padding:6px 7px; width:100%; text-align:left; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; }
.app .av-mrow > .av-mcell:first-child { border-left:0; }
.app .av-mcell:hover { background:var(--surface); }
.app .av-mcell.out { background:var(--surface); color:var(--muted-2); cursor:default; }
.app .av-mcell.today { box-shadow:inset 0 0 0 2px var(--orange); }
.app .av-mn { font-size:12.5px; font-weight:800; text-align:right; }
.app .av-mn.on { color:var(--orange); }
.app .av-mdot { display:flex; align-items:center; gap:6px; min-width:0; font-size:11px;
  font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app .av-mdot .d { width:8px; height:8px; border-radius:50%; flex:none; }
.app .av-more { font-size:10.5px; color:var(--muted); font-weight:700; }

/* ---- scope toggle: Mine dims everyone else, Agency is full brightness ---- */
.app .av-cal.scope-mine .av-block:not(.mine) { opacity:.4; }
.app .av-monthgrid.scope-mine .av-mdot:not(.mine),
.app .av-monthgrid.scope-mine .av-more { opacity:.4; }

/* ---- rail: presets, Available Now ---- */
.app .av-presetlist { display:flex; flex-direction:column; gap:8px; }
.app .av-preset { -webkit-appearance:none; appearance:none; font:inherit; color:var(--text);
  display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%;
  border:1px solid var(--line); background:var(--card); border-radius:8px;
  padding:8px 10px; min-height:40px; text-align:left; cursor:pointer; }
.app .av-preset:hover { border-color:var(--orange); background:var(--orange-soft); }
.app .av-preset .nm { font-weight:700; }
.app .av-preset .tm { color:var(--muted); font-size:12px; }
.app .av-availnow { display:flex; align-items:center; gap:9px; padding:6px 0; }
.app .av-availnow .grow { flex:1; min-width:0; }
.app .av-availnow .ttl { display:block; font-weight:700; }
.app .av-availnow .meta { display:block; color:var(--muted); font-size:12px; }
.app .av-dot { width:10px; height:10px; border-radius:50%; flex:none; display:inline-block; }
/* widget-footer link that stays on this page (it just flips the two toggles) */
.app .av-link { -webkit-appearance:none; appearance:none; border:0; background:none; padding:0;
  font:inherit; font-weight:600; color:var(--side); cursor:pointer; }
.app .av-link:hover { color:var(--orange-ink); }

/* Calendar Setup is a MODAL in the design, so nothing in it was drawn for a full-width canvas. As a
   page it gets the dialog's proportions: a column the width of a form, not the width of a monitor. */
.app .av-setwrap { max-width:860px }
.app .av-setsection { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em;
  color:var(--muted); margin:6px 0 12px; padding-bottom:5px; border-bottom:1px solid var(--line-2) }

/* ---- repeat, and the overlap warning (ported from Chief360Availability.html 2026-10-20) ----
   Ported WITH the markup that uses them, after a week of doing it the other way round: File Share's tag
   chips and its whole document table both shipped a day before the rules that style them, because a
   class with no rule behind it is a plain element and nothing anywhere says so. */
.app .av-repeat { border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin:0 0 14px;
  background:var(--surface); display:flex; flex-direction:column; gap:12px }
.app .av-every { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; flex-wrap:wrap }
.app .av-every label { font-size:13px; font-weight:700 }
.app .av-wkchips { display:flex; flex-wrap:wrap; gap:6px }
.app .av-wk { appearance:none; -webkit-appearance:none; font-family:inherit; flex:1 1 40px; min-width:40px;
  min-height:40px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text);
  font-size:12.5px; font-weight:700; cursor:pointer; padding:0 6px }
.app .av-wk:hover { border-color:var(--orange) }
.app .av-wk[aria-pressed="true"] { background:var(--orange-soft); border-color:var(--orange); color:var(--orange-ink) }
.app .av-repsum { font-size:12.5px; font-weight:600; color:var(--text); background:var(--card);
  border:1px solid var(--line); border-radius:8px; padding:8px 11px }
.app .av-repsum.bad { color:var(--under); border-color:var(--under) }
.app .av-repnote { font-size:11.5px; color:var(--muted) }

/* ---- Add/Edit Availability dialog (ported from Chief360Availability.html #avAddDlg, 2026-11-03).
   Mockup colours are light-only (#fff); tokened here so the dialog works in dark mode too. ---- */
.dialog.av-dlg { width:min(760px,100%) }
.app .av-tabbar, .av-dlg .av-tabbar { display:flex; gap:2px; background:var(--surface); border-bottom:1px solid var(--line); padding:0 10px; overflow-x:auto }
.av-dlg .av-tab { appearance:none; -webkit-appearance:none; border:0; background:none; font:inherit; padding:11px 14px; font-size:12.5px; font-weight:700;
  color:var(--muted); cursor:pointer; border-bottom:2px solid transparent; white-space:nowrap; min-height:40px; display:flex; align-items:center }
.av-dlg .av-tab:hover { color:var(--text) }
.av-dlg .av-tab.on { color:var(--orange-ink); border-bottom-color:var(--orange) }
.av-dlg .av-mb { padding:16px 18px; overflow:auto; max-height:calc(100vh - 220px) }
.av-dlg .av-tabpane { padding:16px }
.av-dlg .av-mf { border-top:1px solid var(--line); padding:12px 18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap }
.av-dlg .av-mf .grow { flex:1 }
.av-dlg .av-mf .btn svg, .av-dlg .av-mf .c3-btn svg { width:14px; height:14px }
.av-dlg .av-field { display:flex; flex-direction:column; gap:5px }
.av-dlg .av-field label { font-size:12px; font-weight:700; color:var(--text) }
.av-dlg .av-field .desc { font-size:11.5px; color:var(--muted); font-weight:600 }
.av-dlg .av-field select, .av-dlg .av-field input[type=text], .av-dlg .av-field input[type=number], .av-dlg .av-field input[type=date],
.av-dlg .av-every input[type=number] { border:1px solid var(--line); border-radius:7px; padding:9px 10px; font-size:13px;
  background:var(--card); color:var(--text); font-family:inherit; min-height:40px }
.av-dlg .av-fgrid { display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; margin-bottom:0 }
.av-dlg .av-full { grid-column:1/-1 }
.av-dlg .av-chips { display:flex; gap:7px; flex-wrap:wrap }
.av-dlg .av-typechip { appearance:none; -webkit-appearance:none; font:inherit; color:var(--text); display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--line); border-radius:8px; padding:8px 11px; font-weight:700; font-size:12.5px; cursor:pointer; background:var(--card); min-height:40px }
.av-dlg .av-typechip.sel { border-color:var(--orange); background:var(--orange-soft); color:var(--orange-ink) }
.av-dlg .av-pplbl { font-size:12px; font-weight:700; display:block; margin-bottom:8px }
.av-dlg .av-presetpick { display:grid; grid-template-columns:1fr 1fr; gap:8px }
.av-dlg .av-pp { appearance:none; -webkit-appearance:none; font:inherit; color:var(--text); text-align:left; display:flex; flex-direction:column; gap:2px;
  border:1px solid var(--line); border-radius:8px; padding:10px 11px; cursor:pointer; background:var(--card); min-height:40px }
.av-dlg .av-pp:hover, .av-dlg .av-pp.sel { border-color:var(--orange); background:var(--orange-soft) }
.av-dlg .av-pp .nm { font-weight:800 }
.av-dlg .av-pp .tm { color:var(--muted); font-size:12px }
.av-dlg .av-req { color:var(--under); font-weight:800 }
.av-dlg .av-repeat { margin:4px 0 14px }
@media (max-width:640px) { .av-dlg .av-fgrid, .av-dlg .av-presetpick { grid-template-columns:1fr } }
.app .av-conflist { display:flex; flex-direction:column; border:1px solid var(--line); border-radius:8px; overflow:hidden }
.app .av-confrow { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px;
  border-bottom:1px solid var(--line-2); background:var(--card) }
.app .av-confrow:last-child { border-bottom:0 }
.app .av-confrow .win { font-weight:700; font-size:12.5px }
.app .av-confrow .out { margin-left:auto; font-size:12px; color:var(--muted); font-weight:600 }
.app .av-confmore { padding:9px 12px; font-size:12px; color:var(--muted); background:var(--surface) }
/* the type pill carries its colour inline from the entry, so only the shape is here */
.app .av-tpill { display:inline-block; border-radius:20px; padding:2px 9px; font-size:11.5px; font-weight:700 }

/* ---- neutral pill for a roster row with no entry ---- */
.app .pill.av-grey { background:var(--line-2); color:var(--muted); }

/* ---- availability type colours (also drive .wd-tag pills + .av-sw/.av-dot swatches).
       Declared last in this block so the block/tag foreground defaults don't outrank them. ---- */
.app .wd-t-avail { background:var(--ok); }
.app .wd-t-maybe { background:var(--amber); color:var(--text); }
.app .wd-t-unavail { background:var(--under); }
.app .wd-t-duty { background:var(--over); }

/* ---- breakpoints — the portal's four ---- */
@media (max-width:1100px) {
  /* Rail drops under the week grid. Grid items default to min-width:auto, so the nested
     7-col calendar would otherwise blow the track out and turn .content's overflow into a
     page-level sideways scroll instead of shrinking the cells. */
  .app .av-layout { grid-template-columns:minmax(0,1fr); }
  .app .av-layout > * { min-width:0; }
}
@media (max-width:900px) {
  .app .av-monthgrid { font-size:12.5px; }
  /* List view scrolls inside its own wrapper, never the page body. */
  .app .av-page .table-wrap { overflow-x:auto; }
}
@media (max-width:760px) {
  /* Week grid collapses to stacked full-width day cards. */
  .app .av-cal { grid-template-columns:minmax(0,1fr); }
  .app .av-day { min-height:auto; }
}
@media (max-width:560px) {
  /* Month keeps 7 columns at 375px by shrinking cells and dropping the dot labels to
     colour-only dots. */
  .app .av-mdow { padding:5px 3px; font-size:9.5px; }
  .app .av-mcell { min-height:56px; padding:4px; gap:3px; }
  .app .av-mn { font-size:11px; }
  .app .av-mdot { font-size:0; gap:0; }
  .app .av-mdot .d { width:9px; height:9px; }
  .app .av-more { font-size:9px; width:100%; }
  .app .av-legend { gap:8px; }
  .app .av-filter { max-width:100%; }
}

/* ---- Dispatch Management ---- */
.dm-hint { color:var(--muted); font-size:12.5px; margin:0 0 14px; }
.dm-tiles { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.dm-tile { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:14px; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:6px; }
.dm-tile:hover { border-color:var(--orange); }
.dm-tile .t { display:flex; align-items:center; gap:9px; font-weight:800; font-size:14px; }
.dm-tile .t .ic { color:var(--orange); display:inline-flex; }
.dm-tile .d { color:var(--muted); font-size:12.5px; flex:1; }
.dm-tile .m { display:flex; gap:6px; flex-wrap:wrap; }

.dm-detail { display:grid; grid-template-columns:210px 1fr; gap:16px; align-items:start; }
.dm-rail { background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.dm-rail .h { background:var(--black); color:#fff; font-weight:700; font-size:13px; padding:10px 13px; }
.dm-rail .grp { font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:10px 13px 4px; }
.dm-rail a { display:flex; align-items:center; gap:8px; padding:8px 13px; color:var(--text); text-decoration:none; cursor:pointer; font-size:13.5px; border-left:3px solid transparent; }
.dm-rail a:hover { background:var(--line-2); }
.dm-rail a.active { background:var(--orange-soft); border-left-color:var(--orange); font-weight:700; }
.dm-cnt { color:var(--muted); font-weight:500; font-size:12px; margin-left:8px; }
.dm-scaffold { color:var(--muted); font-size:13px; padding:8px 2px; }
.dm-chip { display:inline-block; background:var(--line-2); color:var(--text); font-size:11px; border-radius:20px; padding:1px 8px; margin:1px 2px; }
.dm-chip.raw { font-family:var(--mono); background:var(--surface); border:1px solid var(--line); }
.dm-disc { font-size:10px; font-weight:800; border-radius:4px; padding:1px 6px; color:#fff; margin-left:4px; }
.dm-disc.fire { background:#CE3B3B; } .dm-disc.ems { background:#159A4C; } .dm-disc.law { background:#2563EB; } .dm-disc.other { background:#6A7787; }
.dm-swatch { width:12px; height:12px; border-radius:3px; display:inline-block; vertical-align:-1px; margin-right:6px; }
.dm-qbtn { border:0; border-radius:6px; color:#fff; font-size:11px; font-weight:700; padding:3px 8px; cursor:pointer; margin-right:3px; }
.dm-qbtn.fire { background:#CE3B3B; } .dm-qbtn.ems { background:#159A4C; } .dm-qbtn.law { background:#2563EB; } .dm-qbtn.other { background:#6A7787; }
@media (max-width:900px){ .dm-detail { grid-template-columns:1fr; } }

/* ---- Riding Board ---- */
.rb-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:14px; }
.rb-stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:12px 14px; position:relative; overflow:hidden; }
.rb-stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent, var(--side)); }
.rb-stat .k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.rb-stat .v { font-size:24px; font-weight:800; }
.rb-stat .d { font-size:12px; color:var(--muted); }
.rb-board { display:flex; gap:14px; overflow-x:auto; padding-bottom:6px; align-items:flex-start; }
.rb-appar { flex:0 0 260px; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.rb-appar-head { background:var(--black); color:#fff; padding:9px 12px; display:flex; align-items:center; gap:8px; }
.rb-appar-head .nm { font-weight:800; }
.rb-appar-head .ct { margin-left:auto; font-size:12px; color:#cdd7e6; }
.rb-appar-head .own { font-size:11px; color:var(--amber); }
.rb-slot { display:flex; align-items:center; gap:11px; padding:9px 12px; border-bottom:1px solid var(--line-2); cursor:pointer; }
.rb-slot:hover { background:var(--orange-soft); }
.rb-slot .pos { width:70px; flex:none; font-size:11px; font-weight:700; color:var(--muted); text-transform:uppercase; }
.rb-slot .who { flex:1; min-width:0; }
.rb-slot .who .n { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rb-slot .who .rk { font-size:11px; color:var(--muted); }
.rb-slot.open .who { color:var(--muted-2); font-style:italic; }
.rb-pav { width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:11px; background:var(--side); }
.rb-pav.open { background:var(--line); color:var(--muted-2); }
.rb-qual { font-size:10px; font-weight:700; color:var(--muted); border:1px solid var(--line); border-radius:20px; padding:1px 7px; }
.rb-exp { font-size:10px; color:var(--amber); }

/* ---- Radio Alert (Devices + Tones) ---- */
.ra-strip { display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin-bottom:14px; }
.ra-stat { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:12px 14px; position:relative; overflow:hidden; }
.ra-stat::before { content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--accent, var(--side)); }
.ra-stat.ok { --accent:var(--ok); } .ra-stat.alert { --accent:var(--under); } .ra-stat.orphan { --accent:var(--amber); } .ra-stat.blue { --accent:var(--over); }
.ra-stat .n { font-size:22px; font-weight:800; } .ra-stat .l { font-size:11.5px; color:var(--muted); }
.ra-filter { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.ra-chip { border:1px solid var(--line); background:var(--card); border-radius:20px; padding:3px 12px; font-size:12px; font-weight:600; cursor:pointer; color:var(--muted); }
.ra-chip.on { background:var(--orange-soft); border-color:var(--orange); color:var(--orange-ink); }
.ra-count { margin-left:auto; color:var(--muted); font-size:12px; }
.ra-dev { display:flex; align-items:center; gap:10px; }
.ra-coin { width:34px; height:34px; border-radius:9px; background:var(--navy); color:#fff; display:grid; place-items:center; flex:none; }
.ra-nm { font-weight:700; } .ra-loc { font-size:12px; color:var(--muted); }
.ra-sdot { width:9px; height:9px; border-radius:50%; display:inline-block; margin-right:6px; background:var(--muted-2); }
.ra-sdot.on { background:var(--ok); } .ra-sdot.off { background:var(--under); } .ra-sdot.stale { background:var(--amber); }
.ra-health { display:flex; flex-direction:column; gap:10px; }
.ra-hrow .hl { display:flex; justify-content:space-between; font-size:12px; margin-bottom:3px; }
.ra-hbar { height:8px; background:var(--line-2); border-radius:20px; overflow:hidden; }
.ra-hbar i { display:block; height:100%; background:var(--side); }
.ra-hbar i.warn { background:var(--amber); } .ra-hbar i.hot { background:var(--under); }
.ra-spark { color:var(--muted); font-variant-numeric:tabular-nums; }
/* icon picker */
.ra-iconpick { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.ra-iconprev { display:flex; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--line-2); background:var(--surface); }
.ra-iconscroll { max-height:220px; overflow:auto; padding:8px; }
.ra-icat { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:8px 2px 4px; }
.ra-icongrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:6px; }
.ra-icontile { border:1px solid var(--line); border-radius:8px; background:var(--card); padding:8px 6px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; text-align:center; }
.ra-icontile.on { border-color:var(--orange); background:var(--orange-soft); }
.ra-idot { width:20px; height:20px; border-radius:50%; }

/* Support / Helpdesk */
.sp-textarea { width:100%; box-sizing:border-box; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); font:inherit; font-size:13px; padding:8px 10px; resize:vertical; }
.sp-textarea:focus { outline:none; border-color:var(--orange); }
.sp-drop { border:1px dashed var(--line); border-radius:var(--r); background:var(--line-2); color:var(--muted); font-size:12.5px; padding:16px; text-align:center; }
.sp-thread { display:flex; flex-direction:column; gap:10px; max-height:340px; overflow:auto; padding:4px 2px; margin:4px 0 12px; }
.sp-msg { border:1px solid var(--line); border-radius:10px; padding:10px 12px; background:var(--card); }
.sp-msg.staff { background:var(--orange-soft); border-color:var(--orange); }
.sp-msg-head { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:4px; }
.sp-msg-head .meta { margin-left:auto; }
.sp-msg-body { font-size:13px; white-space:pre-wrap; }
.lk { color:var(--side); cursor:pointer; }
.lk:hover { text-decoration:underline; }

/* Support / Helpdesk — reconciled to mockup rev 2 (overrides earlier sp-* where redefined) */
.sp-note { display:flex; align-items:center; gap:8px; background:var(--orange-soft); border:1px solid var(--orange); color:var(--orange-ink); border-radius:8px; padding:9px 12px; font-size:12.5px; font-weight:600; margin-bottom:12px; }
.sp-stat .num { font-size:30px; font-weight:800; color:var(--text); line-height:1.05; }
.sp-stat .sub { font-size:11.5px; color:var(--muted-2); margin-top:3px; }
.sp-metabar { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; padding:10px 2px 12px; border-bottom:1px solid var(--line); font-size:12.5px; margin-bottom:12px; }
.sp-metabar .m { display:flex; align-items:center; gap:6px; } .sp-metabar .m b { color:var(--text); } .sp-metabar .m span { color:var(--muted); }
.sp-thread { display:flex; flex-direction:column; gap:15px; max-height:360px; overflow:auto; padding:2px; margin-bottom:14px; }
.sp-msg { display:flex; gap:11px; }
.sp-av { width:34px; height:34px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:800; font-size:11.5px; color:#fff; }
.sp-av.req { background:var(--side); } .sp-av.agent { background:var(--orange); }
.sp-bub { flex:1; min-width:0; }
.sp-hln { display:flex; align-items:center; gap:8px; font-size:12px; margin-bottom:4px; }
.sp-hln .nm { font-weight:700; } .sp-hln .tm { color:var(--muted); }
.sp-txt { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:11px 13px; font-size:13px; line-height:1.5; white-space:pre-wrap; }
.sp-msg.agent .sp-txt { background:var(--orange-soft); border-color:var(--orange); }
.sp-reply { border:1px solid var(--line); border-radius:10px; background:var(--card); overflow:hidden; }
.sp-reply-bar { display:flex; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid var(--line-2); }

/* ============================================================================================
   HELP CENTER (Support 8) — ported from Chief360SupportHelpCenter.html, approved 2026-10-22.
   Every class below is USED by HelpCenter.razor / HelpCenterKnowledgeBase.razor /
   HelpCenterIdeas.razor. A class ported from a mockup with no rule here is just an unstyled tag,
   and a rule here with no markup is dead weight, so the two lists are kept equal on purpose.
   No hardcoded hex: every colour is a :root token, as the mockup's own notes require.

   NOT ported, deliberately:
     .hc-tabs      — the three-way switcher is Chief360Segmented Underline on the title band
                     (Chief360PageHeader's Tabs slot), which is the portal's own control for this.
     .hc-seg       — Chief360Segmented pills.
     .hc-card/.hc-att/.hc-h3 — Chief360Table, dm-chip and Chief360SectionHead already exist.
     .hc-menu/.hc-helpwrap   — the app-bar ? popover is not built (see HelpCenter.razor).
   ============================================================================================ */

/* ---- Knowledge Base: search hero ---- */
.hc-hero { background:var(--navy); border-radius:12px; padding:26px 24px; margin-bottom:20px; color:var(--card); }
.hc-hero h2 { margin:0 0 4px; font-size:19px; font-weight:800; }
.hc-hero p { margin:0 0 16px; color:rgba(255,255,255,.72); font-size:13px; }
.hc-srch { display:flex; gap:8px; max-width:620px; }
.hc-srch input { flex:1; border:1px solid transparent; border-radius:8px; padding:11px 14px; font:inherit; font-size:14px;
  background:var(--card); color:var(--text); box-sizing:border-box; }
.hc-srch input:focus { outline:2px solid var(--orange); }

/* ---- Knowledge Base: browse-by-area cards. `.soon` is an HONEST STATE, not a styling choice:
       dashed and dimmed says "no article here yet" instead of offering an empty room. ---- */
.hc-areas { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px; }
.hc-area { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; cursor:pointer;
  text-align:left; display:flex; flex-direction:column; gap:5px; font:inherit; color:var(--text); }
.hc-area:hover { border-color:var(--orange); box-shadow:var(--shadow); }
.hc-area .nm { font-weight:700; font-size:13.5px; display:flex; align-items:center; gap:7px; }
.hc-area .nm svg { width:15px; height:15px; color:var(--orange); }
.hc-area .ct { font-size:11.5px; color:var(--muted); }
.hc-area.soon { opacity:.62; cursor:default; border-style:dashed; }
.hc-area.soon:hover { border-color:var(--line); box-shadow:none; }

/* ---- Knowledge Base: one article, open ---- */
.hc-art { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; max-width:860px; }
.hc-art .top { padding:14px 20px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.hc-art .top .back { border:0; background:none; color:var(--over); font-weight:600; font-size:12.5px; cursor:pointer; padding:0; font-family:inherit; }
.hc-art .bd { padding:20px; }
.hc-art h2 { margin:0 0 4px; font-size:20px; }
.hc-art .by { color:var(--muted); font-size:12px; margin-bottom:16px; }
/* BoldDesk-authored body: staff-written markup, so headings/lists/links are styled rather than stripped. */
.hc-art .bd p { margin:0 0 12px; font-size:14px; line-height:1.65; }
.hc-art .bd ol, .hc-art .bd ul { margin:0 0 12px; padding-left:22px; font-size:14px; line-height:1.75; }
.hc-art .bd h3, .hc-art .bd h4 { margin:18px 0 8px; font-size:15px; }
.hc-art .bd a { color:var(--over); }
.hc-art .bd img { max-width:100%; height:auto; }
.hc-art .bd table { width:100%; border-collapse:collapse; margin:0 0 12px; font-size:13px; }
.hc-art .bd th, .hc-art .bd td { border:1px solid var(--line); padding:7px 9px; text-align:left; }
.hc-art .note { background:var(--orange-soft); border-left:3px solid var(--orange); padding:10px 14px;
  border-radius:0 8px 8px 0; font-size:13px; margin:0 0 14px; }
.hc-foot { border-top:1px solid var(--line-2); padding:14px 20px; display:flex; align-items:center; gap:12px;
  flex-wrap:wrap; background:var(--surface); }
/* `.grow` has no standalone rule in this sheet — it is defined per container, so a bare <span class="grow">
   is an unstyled tag. Declared here rather than left to an inline style. */
.hc-foot .grow { flex:1; min-width:0; }

/* ---- Ideas Board: the submit box, and a row per idea ---- */
.hc-new { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:18px; max-width:1020px; }
.hc-idea { display:flex; gap:14px; padding:15px; border:1px solid var(--line); border-radius:12px;
  background:var(--card); margin-bottom:10px; }
.hc-idea .ib { flex:1; min-width:0; }
.hc-idea .it { font-weight:700; font-size:14px; margin-bottom:3px; }
.hc-idea .im { color:var(--muted); font-size:12px; margin-bottom:7px; }
.hc-idea .ix { font-size:13px; line-height:1.55; }
/* The merged/duplicate note. It exists to say the vote was CARRIED, not filed: an agency that reads
   "duplicate" with no target reasonably concludes its request vanished. */
.hc-idea .dup { background:var(--surface); border-left:3px solid var(--over); padding:8px 12px;
  border-radius:0 6px 6px 0; font-size:12.5px; margin-top:9px; }

/* THE COUNT IS AGENCIES, NOT VOTES. "37 agencies want this" is the number that argues for building
   something; a raw vote total can be one enthusiastic department. The label is part of the control. */
.hc-vote { flex:none; width:62px; border:1px solid var(--line); border-radius:10px; background:var(--card); cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; padding:8px 4px; font:inherit; }
.hc-vote:hover { border-color:var(--orange); }
.hc-vote.on { background:var(--orange-soft); border-color:var(--orange); }
.hc-vote:disabled { cursor:default; opacity:.6; }
.hc-vote .n { font-size:17px; font-weight:800; color:var(--text); }
.hc-vote .l { font-size:9.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }

.hc-hint { color:var(--muted); font-size:12px; }
.hc-subj { font-weight:600; color:var(--over); cursor:pointer; }

@media (max-width:900px) { .hc-areas { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px) {
  .hc-areas { grid-template-columns:1fr; }
  .hc-hero { padding:18px 16px; }
  .hc-srch { flex-direction:column; }
}

/* ---- App-bar utility icon (Support sits next to the profile, not in the side nav) ---- */
.app .wd-appbar-icon { width:36px; height:36px; border-radius:8px; display:grid; place-items:center;
  color:#cdd7e6; cursor:pointer; text-decoration:none; flex:none; }
.app .wd-appbar-icon:hover { background:#1d1d22; color:#fff; }
/* The unread mark on an app-bar icon: a DOT, never a number (platform rule, 2026-09-30). Positioned on
   the icon exactly as the master template's .appbar .iconbtn .dot does, so Chat matches Notifications
   when that one lands. The icon is a grid, hence position:relative here rather than on a wrapper. */
.app .wd-appbar-icon { position:relative; }
.app .wd-appbar-dot { position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%;
  background:var(--orange); }

/* ---- Home widget picker rows ---- */
.app .wd-pick { display:flex; align-items:flex-start; gap:12px; padding:11px 12px; border:1px solid var(--line);
  border-radius:9px; margin-bottom:9px; cursor:pointer; }
.app .wd-pick:hover { border-color:var(--orange); background:var(--orange-soft); }
.app .wd-pick-ic { width:36px; height:36px; flex:none; border-radius:8px; background:var(--navy); color:#fff;
  display:grid; place-items:center; }
.app .wd-pick-meta { flex:1; display:flex; flex-direction:column; }
.app .wd-pick-t { font-weight:700; }
.app .wd-pick-d { color:var(--muted); font-size:12px; }
.app .wd-pick input { width:18px; height:18px; margin-top:9px; accent-color:var(--orange); }

/* ═══ HOME WIDGET SYSTEM ═════════════════════════════════════════════════════
   Drag to reorder with a mouse; the ▲▼ buttons in each header do the same job
   on touch and by keyboard (HTML5 drag never fires on touch devices). */

.app .wd-home-empty { text-align:center; padding:48px 16px; color:var(--muted);
  border:2px dashed var(--line); border-radius:12px; background:var(--card); }
.app .wd-home-empty p { margin:0 0 14px; }

/* widgets are drag sources; the one in flight dims and lifts */
.app .wd-arrange .w { cursor:grab; }
.app .wd-arrange .w:active { cursor:grabbing; }
.app .w.wd-dragging { opacity:.45; outline:2px dashed var(--orange); outline-offset:2px; }

/* per-widget arrange controls, in the black header */
.app .w-head .wd-warrange { margin-left:auto; display:flex; align-items:center; gap:2px; }
.app .wd-wbtn { border:0; background:transparent; color:#8a929c; cursor:pointer; font-size:11px;
  line-height:1; padding:4px 5px; border-radius:5px; }
.app .wd-wbtn:hover:not(:disabled) { color:#fff; background:#ffffff1a; }
.app .wd-wbtn:disabled { opacity:.3; cursor:default; }
.app .wd-wbtn.wd-wrm { font-size:16px; }
.app .wd-wbtn.wd-wrm:hover { color:var(--orange); }
/* .src sits before the controls when both are present */
.app .w-head .src + .wd-warrange { margin-left:8px; }

/* quick-links widget body */
.app .wd-ql { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.app .wd-ql a { display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--line);
  border-radius:8px; text-decoration:none; color:var(--text); font-weight:600; font-size:12.5px; }
.app .wd-ql a:hover { border-color:var(--orange); background:var(--orange-soft); color:var(--orange-ink); }

/* ---- Widgets dialog ---- */
.app .wd-wtools { margin-bottom:10px; }
.app .wd-wfilters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.app .wd-wchip { font-size:12px; font-weight:700; padding:5px 11px; border-radius:20px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.app .wd-wchip:hover { border-color:var(--orange); color:var(--orange-ink); }
.app .wd-wchip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
.app .wd-wchip .n { opacity:.65; margin-left:3px; }
.app .wd-wlist { max-height:46vh; overflow-y:auto; }
.app .wd-wcap { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  font-weight:700; margin:14px 0 7px; }
.app .wd-wcap:first-child { margin-top:0; }
.app .wd-wempty { text-align:center; color:var(--muted); padding:32px 12px; }
.app .wd-wfoot { display:flex; align-items:center; gap:10px; margin-top:14px;
  padding-top:12px; border-top:1px solid var(--line-2); }
.app .wd-wfoot .meta { flex:1; }
.app .wd-pick.on { border-color:var(--orange); background:var(--orange-soft); }

@media (max-width:760px) {
  .app .wd-ql { grid-template-columns:1fr; }
  .app .wd-wlist { max-height:none; }
  /* drag is unavailable on touch — make the move controls unmistakable */
  .app .wd-wbtn { padding:7px 9px; font-size:13px; }
  .app .wd-arrange .w { cursor:default; }
}

/* ═══ EVENT CALENDAR (Chat 32) ═══════════════════════════════════════════════
   The Monthly / Weekly / Daily grids are the shared Chief360Calendar component,
   so nothing here re-implements a calendar. These rules cover the split layout,
   the rail, the dialog innards and the ecminimonth widget shape.

   Colours: every value below resolves to an existing custom property. The five
   event-type colours come from the Chief360Calendar chip palette by REUSING
   .c3-cal-ev as the swatch element (.ec-sw), so the legend and the grid can
   never drift apart and no hex literal is introduced here. */

/* ---- neutral pill. "ec-grey" came from Event Calendar's mockup, but seven call sites across Radio
   Alert, Dispatch, Admin and Newsroom reasonably wrote Color="grey" and got an UNSTYLED pill —
   transparent background, inherited colour — which looked like plain text rather than a pill. Both
   names are the same pill; nothing had to change at the call sites. ---- */
.app .pill.ec-grey, .app .pill.grey { background:var(--line-2); color:var(--muted); }

/* ---- swatches: a .c3-cal-ev chip shrunk to a legend/row marker ---- */
.app .ec-sw { display:inline-block; width:22px; height:12px; padding:0; border-radius:4px;
  flex:none; vertical-align:-1px; }
.app .ec-sw-lg { display:inline-block; width:64px; height:20px; padding:0; border-radius:5px; flex:none; }

/* ---- split: views (left) + persistent rail (right) ---- */
.app .ec-split { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:16px; align-items:start; }
.app .ec-main { min-width:0; }
.app .ec-rail { display:flex; flex-direction:column; gap:16px; min-width:0; }
.app .ec-rail .w { grid-column:auto; }

/* ---- Event Calendar views, ported from the approved mockup (Chief360EventCalendar.html, lines 365-425,
   557-590) on 2026-11-03: toolbar, month grid, week row, day slots, list table, legend and filter fields. The
   type colours come from each event's own type, so the mockup's per-category classes are not used. ---- */
.app .ec-toolbar { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.app .ec-segtoggle { display:flex; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#fff; }
.app .ec-segtoggle button { border:0; background:#fff; padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; white-space:nowrap; }
.app .ec-segtoggle button + button { border-left:1px solid var(--line); }
.app .ec-segtoggle button.on { background:var(--navy); color:#fff; }
.app .ec-monthnav { display:flex; align-items:center; gap:10px; }
.app .ec-monthnav .arw { width:30px; height:30px; border:1px solid var(--line); background:#fff; border-radius:7px; display:grid; place-items:center; cursor:pointer; color:var(--muted); font-size:16px; line-height:1; }
.app .ec-monthnav .arw:hover { border-color:var(--orange); color:var(--orange-ink); }
.app .ec-monthnav .mlabel { font-weight:800; font-size:14px; min-width:110px; text-align:center; }
.app .ec-spacer { flex:1; }
.app .ec-cal { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); overflow:hidden; }
.app .ec-dow { display:grid; grid-template-columns:repeat(7,1fr); background:var(--black); border-bottom:3px solid var(--orange); }
.app .ec-dow > div { padding:8px 6px; text-align:center; font-size:10.5px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#cdd7e6; }
.app .ec-wk { display:grid; grid-template-columns:repeat(7,1fr); border-bottom:1px solid var(--line-2); }
.app .ec-wk:last-child { border-bottom:0; }
.app .ec-cell { min-height:96px; border-right:1px solid var(--line-2); padding:6px; position:relative; min-width:0; }
.app .ec-cell:last-child { border-right:0; }
.app .ec-cell.out { background:var(--surface); color:var(--muted-2,var(--muted)); }
.app .ec-cell.today { background:var(--orange-soft); }
.app .ec-dnum { font-size:12px; font-weight:700; color:var(--muted); }
.app .ec-cell.today .ec-dnum { color:var(--orange-ink); font-weight:800; }
.app .ec-hol { font-size:10px; color:var(--orange-ink); font-weight:700; margin-bottom:3px; }
.app .ec-evt { display:flex; align-items:center; gap:4px; font-size:10.5px; font-weight:700; color:#fff; background:var(--muted); border-radius:5px; padding:3px 6px; margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.app .ec-evt.sel { outline:2px solid var(--black); outline-offset:1px; }
.app .ec-evt .txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.app .ec-evt .cov { font-family:var(--mono); opacity:.9; flex:none; }
.app .ec-more { font-size:10px; font-weight:700; color:var(--side); margin-top:2px; cursor:pointer; }
.app .ec-week-row { display:grid; grid-template-columns:repeat(7,1fr); }
.app .ec-daycol { min-height:220px; border-right:1px solid var(--line-2); padding:8px; background:var(--card); min-width:0; }
.app .ec-daycol:last-child { border-right:0; }
.app .ec-daycol.today { background:var(--orange-soft); }
.app .ec-tablewrap { overflow-x:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); }
.app .ec-tablewrap table { min-width:820px; width:100%; }
.app .ec-tablewrap tr[data-link] { cursor:pointer; }
.app .ec-tablewrap thead th { background:var(--black); color:#fff; border-bottom:3px solid var(--orange); }
.app .ec-filecount { color:var(--muted); font-size:11.5px; }
.app .ec-ahead { display:flex; align-items:center; gap:10px; font-weight:800; font-size:14px; padding:4px 2px 12px; }
.app .ec-ahead .sub { font-weight:600; color:var(--muted); font-size:12px; }
.app .ec-slot { display:grid; grid-template-columns:64px 1fr; border-top:1px solid var(--line-2); }
.app .ec-slot:first-of-type { border-top:0; }
.app .ec-slot .shr { padding:10px 8px 0 0; color:var(--muted); font-size:11.5px; font-family:var(--mono); text-align:right; }
.app .ec-slot .body { padding:8px 0; min-height:28px; }
.app .ec-acard { background:var(--card); border:1px solid var(--line); border-left-width:3px; border-radius:8px; padding:9px 12px; margin-bottom:8px; cursor:pointer; }
.app .ec-acard:hover { border-color:var(--orange); }
.app .ec-acard .at { display:flex; justify-content:space-between; font-weight:700; font-size:13px; margin-bottom:4px; }
.app .ec-acard .am { display:flex; gap:10px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); }
.app .ec-field { margin-bottom:12px; }
.app .ec-field label { display:block; font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:5px; }
.app .ec-field select { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 10px; font:inherit; font-size:13px; background:#fff; color:inherit; }
.app .ec-field select:focus { outline:none; border-color:var(--orange); }

.app .ec-legend { display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 4px; font-size:12px; color:var(--muted); }
.app .ec-legend .lg { display:flex; align-items:center; gap:6px; }
.app .ec-legend .sw { width:11px; height:11px; border-radius:3px; flex:none; }
.app .ec-legend .key { margin-left:auto; display:flex; gap:12px; flex-wrap:wrap; color:var(--muted-2,var(--muted)); font-size:11.5px; }
@media (max-width:640px) {
  .app .ec-dow > div { font-size:9px; }
  .app .ec-cell { min-height:52px; padding:4px; }
  .app .ec-evt { font-size:9.5px; padding:2px 4px; }
  .app .ec-legend .key { display:none; }
  .app .ec-monthnav .mlabel { min-width:0; }
}

/* HEALTH BARS — the mockup's `.health` block (Scheduling rev 2.79a, lines 242–247), ported as written
   with its tokens: one row per day, a name, a bar and a count. The fill colour is set per row from the
   day's state (under / at / over the limit); the track is --line-2 so it flips with the theme. Shared by
   the Time Off "On Leave — next 14 days" card and the Event Calendar page's own override below. */
.app .health { display:flex; flex-direction:column; gap:9px; }
.app .health .hr { display:flex; align-items:center; gap:10px; }
.app .health .hr .nm { width:58px; flex:none; color:var(--muted); font-size:12px; }
.app .health .hr .bar { flex:1; height:9px; border-radius:20px; background:var(--line-2); overflow:hidden; }
.app .health .hr .bar i { display:block; height:100%; border-radius:20px; background:var(--side); }
.app .health .hr .bar i.warn { background:var(--amber); }
.app .health .hr .bar i.hot { background:var(--under); }
.app .health .hr .ct { width:46px; flex:none; text-align:right; font-family:var(--mono); font-size:12px; }

/* THE PAYROLL BALANCE IMPORT (Scheduling 4202): the paste box is monospaced so columns line up by eye,
   and a preview row the service refused is coloured as a whole row, not a cell. */
.app .sch-csv { display:block; width:100%; box-sizing:border-box; min-height:120px; padding:10px 12px; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--text); font-family:var(--mono); font-size:12.5px; line-height:1.45; resize:vertical; }
.app .sch-csv:focus { outline:2px solid var(--orange); outline-offset:1px; }
.app .sch-rowbad td { color:var(--under); }

.app .ec-page .health .hr { cursor:pointer; }
.app .ec-page .health .hr .nm { width:96px; }

/* ---- list view ---- */
.app .ec-listrow { cursor:pointer; }
.app .ec-listname { font-weight:700; color:var(--side); }

/* ---- Actions dropdown (title bar). The portal has no dropdown component; this is the
       lightweight anchored popover the mockup proposed, kept under the ec- prefix. ---- */
.app .ec-menu-wrap { position:relative; display:inline-flex; }
.app .ec-menu-back { position:fixed; inset:0; z-index:59; }
.app .ec-menu { position:absolute; top:calc(100% + 6px); right:0; z-index:60; min-width:210px;
  max-width:calc(100vw - 32px); background:var(--card); border:1px solid var(--line);
  border-radius:9px; box-shadow:var(--shadow); padding:6px; }
.app .ec-menu button { display:block; width:100%; border:0; background:transparent; text-align:left;
  padding:9px 10px; font:inherit; font-size:13px; font-weight:600; color:var(--text);
  border-radius:7px; cursor:pointer; }
.app .ec-menu button:hover:not(:disabled) { background:var(--surface); }
.app .ec-menu button:disabled { color:var(--muted-2); cursor:not-allowed; }

/* ---- event detail dialog ---- */
.app .ec-detail-when { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.app .ec-detail-type { font-size:11.5px; font-weight:800; color:var(--orange-ink);
  text-transform:uppercase; letter-spacing:.03em; }
.app .ec-caps { display:flex; gap:6px; flex-wrap:wrap; }
.app .ec-cap-chip { font-size:11px; font-weight:700; padding:4px 9px; border-radius:20px;
  background:var(--line-2); color:var(--muted); }
.app .ec-cap-chip.on { background:var(--orange-soft); color:var(--orange-ink); }

.app .ec-kv { display:grid; grid-template-columns:120px minmax(0,1fr); row-gap:8px; column-gap:10px; margin:0; }
.app .ec-kv dt { color:var(--muted); font-size:12px; font-weight:700; }
.app .ec-kv dd { margin:0; font-size:12.5px; }

.app .ec-hint { background:var(--orange-soft); border:1px solid var(--orange); color:var(--orange-ink);
  border-radius:8px; padding:10px 12px; font-size:12px; }
.app .ec-hint b { font-weight:800; }

.app .ec-empty { text-align:center; padding:34px 14px; color:var(--muted); }
.app .ec-empty-ic { display:inline-grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:var(--line-2); color:var(--muted); margin-bottom:10px; }
.app .ec-empty-t { font-weight:700; color:var(--text); margin-bottom:4px; }

/* ---- attachments ---- */
.app .ec-att { display:flex; align-items:center; gap:11px; padding:9px 0; border-bottom:1px solid var(--line-2); }
.app .ec-att:last-of-type { border-bottom:0; }
.app .ec-att .grow { flex:1; min-width:0; }
.app .ec-att .fn { display:block; font-weight:600; font-size:12.5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app .ec-att .meta { display:block; color:var(--muted); font-size:11px; }
.app .ec-fico { width:36px; height:36px; border-radius:7px; flex:none; display:grid; place-items:center;
  font-size:9.5px; font-weight:800; color:#fff; background:var(--muted); }
.app .ec-fico.pdf { background:var(--under); }
.app .ec-fico.img { background:var(--over); }
.app .ec-fico.doc { background:var(--side); }
.app .ec-drop { border:2px dashed var(--line); border-radius:9px; padding:22px; text-align:center;
  color:var(--muted); font-size:13px; }
/* revision 11 (2026-11-05): attachments are uploaded to Event Calendar's own storage. Ported from the mockup;
   every colour is a token, so dark mode follows the palette. */
.app .ec-att .fm { display:block; color:var(--muted); font-size:11px; }
.app .ec-att .dl, .app .ec-att .x { background:none; border:0; padding:0; font:inherit; font-weight:700;
  font-size:12px; cursor:pointer; flex:none; }
.app .ec-att .dl { color:var(--side); }
.app .ec-att .dl + .dl { margin-left:2px; }
.app .ec-att .dl.ec-att-rm { color:var(--under); }
.app .ec-att .dl.ec-att-keep { color:var(--muted); }
.app .ec-att .dl:disabled, .app .ec-att .x:disabled { opacity:.5; cursor:default; }
.app .ec-att .x { color:var(--muted); }
.app .ec-att .err { color:var(--under); font-size:11.5px; font-weight:600; }
.app .ec-att.fail .fn { color:var(--muted); }
.app .ec-att-tag { margin-left:6px; }
.app .ec-att-list { margin-top:12px; }
.app .ec-att-actions { margin-top:12px; display:flex; align-items:center; }
.app .ec-i { display:inline-grid; place-items:center; width:15px; height:15px; border-radius:50%;
  border:1.5px solid var(--muted); color:var(--muted); font-size:10px; font-weight:800; line-height:1;
  cursor:help; margin-left:7px; vertical-align:middle; font-style:normal; }
.app .ec-prog { height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; margin-top:5px; }
.app .ec-prog > i { display:block; height:100%; width:0; background:var(--orange); transition:width .25s; }
/* The drop zone IS the file input: an invisible input covers it, so a click opens the device's picker and a
   dropped file lands in the input. The (i) tip sits above it so its hover still shows. */
.app .ec-drop-pick { position:relative; }
.app .ec-drop-pick .ec-i { position:relative; z-index:1; }
.app .ec-drop-link { color:var(--side); font-weight:700; cursor:pointer; }
.app .ec-drop-input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.app .ec-att-pick { position:relative; cursor:pointer; }
.app .ec-file-input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; pointer-events:none; }

/* ---- checklist ---- */
.app .ec-chk { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line-2); }
.app .ec-chk:last-of-type { border-bottom:0; }
.app .ec-box { width:19px; height:19px; border-radius:5px; border:2px solid var(--line); flex:none; position:relative; }
.app .ec-chk.done .ec-box { background:var(--ok); border-color:var(--ok); }
/* tick drawn in CSS — no icon key needed for a 12px checkmark */
.app .ec-chk.done .ec-box::after { content:""; position:absolute; left:5px; top:1px; width:4px; height:9px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg); }
.app .ec-chk.done .t { color:var(--muted); text-decoration:line-through; }

/* ---- capability toggle rows (Add/Edit › Staffing & Credit) ---- */
.app .ec-togglist { display:flex; flex-direction:column; }
.app .ec-toggrow { display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-2); }
.app .ec-toggrow:last-child { border-bottom:0; }
.app .ec-toggrow .tg-meta { flex:1; min-width:0; }
.app .ec-toggrow .t { display:block; font-weight:700; font-size:13px; }
.app .ec-toggrow .d { display:block; color:var(--muted); font-size:11.5px; }
.app .ec-staffreq { border:1px solid var(--line); background:var(--surface); border-radius:9px;
  padding:12px; display:flex; flex-direction:column; gap:12px; }

/* ---- templates + management rows (list ↔ form in one dialog) ---- */
.app .ec-tmpl,
.app .ec-mgmtrow { display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:9px; padding:9px 12px; }
.app .ec-tmpl .ti { width:36px; height:36px; border-radius:8px; background:var(--navy); color:#fff;
  display:grid; place-items:center; font-size:10px; font-weight:800; flex:none; }
.app .ec-tmpl .grow,
.app .ec-mgmtrow .grow { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
.app .ec-tmpl .tn,
.app .ec-mgmtrow .nm { font-weight:700; font-size:12.8px; }
.app .ec-tmpl .meta { color:var(--muted); font-size:11.5px; }
.app .ec-secheader { font-weight:800; font-size:11px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); }
.app .ec-secheader-note { font-weight:600; text-transform:none; letter-spacing:0; }
.app .ec-secheader-2 { margin-top:8px; }

/* ---- dialog form rows + chipsets ---- */
.app .ec-row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.app .ec-row3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.app .ec-chipset { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.app .ec-selchip { font-size:12px; font-weight:700; padding:6px 12px; border-radius:20px;
  border:1px solid var(--line); background:var(--card); color:var(--muted); cursor:pointer; }
.app .ec-selchip.on { background:var(--navy); border-color:var(--navy); color:#fff; }
/* Subscribe dialog: event-type picker. Two columns where there is room; a colour dot per type so the
   rows read the same way the calendar legend does. */
.app .ec-typepick { border:1px solid var(--line); border-radius:8px; padding:10px 12px 12px; margin:0 0 14px; }
.app .ec-typepick legend { font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:0 4px; }
.app .ec-typegrid { display:grid; grid-template-columns:1fr 1fr; gap:6px 18px; }
.app .ec-typerow { display:flex; align-items:center; gap:8px; font-size:13px; min-height:28px; cursor:pointer; }
.app .ec-typerow input { width:16px; height:16px; accent-color:var(--orange); flex:none; }
.app .ec-typedot { width:10px; height:10px; border-radius:3px; flex:none; }
.app .ec-typeacts { display:flex; gap:8px; margin-top:10px; }
@media (max-width:640px) { .app .ec-typegrid { grid-template-columns:1fr; } }
.app .ec-dlg-foot { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding-top:12px; border-top:1px solid var(--line-2); }
.app .ec-dlg-foot .grow { flex:1; min-width:0; }

/* ---- ecminimonth Home widget ---- */
.app .ec-mini-title { font-weight:700; font-size:12.5px; margin-bottom:8px; }
.app .ec-mini { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:2px; }
.app .ec-mini-dow { text-align:center; font-size:9.5px; font-weight:800; color:var(--muted);
  text-transform:uppercase; padding-bottom:2px; }
.app .ec-mini-c { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:3px 0 4px; font-size:11px; font-weight:600; color:var(--text); border-radius:5px; }
.app .ec-mini-c.out { color:var(--muted-2); }
.app .ec-mini-c.today { background:var(--orange); color:#fff; font-weight:800; }
.app .ec-mini-dot { width:5px; height:5px; border-radius:50%; background:var(--orange); }
.app .ec-mini-c.today .ec-mini-dot { background:#fff; }
.app .ec-mini-dot.none { background:transparent; }

/* ---- ≤1100px: the split folds, same breakpoint as the 12-col widget grid ---- */
@media (max-width:1100px) {
  .app .ec-split { grid-template-columns:minmax(0,1fr); }
  /* Grid items default to min-width:auto, so a nested grid (the 7-col month grid) will blow the
     column out past the viewport and .content's overflow:auto turns that into a page-level
     horizontal scroll instead of the cells shrinking. Force every level to respect its track. */
  .app .ec-split > *, .app .ec-page .c3-cal, .app .ec-page .c3-cal-grid,
  .app .ec-page .c3-cal-week, .app .ec-page .c3-cal-cell, .app .ec-page .c3-cal-wcol { min-width:0; }
}

/* ---- ≤900px: the list table scrolls inside its own wrapper, never the page ---- */
@media (max-width:900px) {
  .app .ec-page .table-wrap { overflow-x:auto; }
}

/* ---- ≤760px: grids shrink, Weekly stacks, form rows go single-column ---- */
@media (max-width:760px) {
  .app .ec-page .c3-cal-cell { min-height:64px; }
  /* Weekly's columns hold full, untruncated chips — 7 of them do not fit under ~760px.
     Monthly stays 7-col (compact chips still read); Daily is the mobile single-day view. */
  .app .ec-page .c3-cal-week { grid-template-columns:minmax(0,1fr); }
  .app .ec-page .c3-cal-wcol { border-left:0; border-top:1px solid var(--line-2); }
  .app .ec-page .c3-cal-wbody { min-height:0; }
  .app .ec-row2, .app .ec-row3 { grid-template-columns:minmax(0,1fr); }
  .app .ec-menu { right:auto; left:0; }
  .app .ec-page .health .hr .nm { width:74px; }
}

/* ---- ≤560px: trim ---- */
@media (max-width:560px) {
  .app .ec-page .c3-cal-cell { min-height:52px; padding:4px; }
  .app .ec-page .c3-cal-dow { padding:7px 4px; font-size:10.5px; }
  .app .ec-page .c3-cal-ev { font-size:10.5px; padding:2px 5px; }
  .app .ec-kv { grid-template-columns:minmax(0,1fr); row-gap:2px; }
  .app .ec-kv dd { margin-bottom:6px; }
  .app .ec-mini-c { font-size:10px; }
  .app .ec-tmpl, .app .ec-mgmtrow { flex-wrap:wrap; }
}


/* ══ ACCESSIBILITY (portal-local) ═════════════════════════════════════════════
   Behavioural only — no visual change. Added 2026-08-25. */

/* The Dispatch section rail is now <button>s so it can be reached by keyboard.
   Strip the UA styling so it renders exactly as the anchors did. */
.app .dm-rail button { -webkit-appearance:none; appearance:none; background:none; border:0;
  width:100%; text-align:left; font:inherit; font-size:13.5px; color:var(--text);
  display:flex; align-items:center; gap:8px; padding:8px 13px; cursor:pointer;
  border-left:3px solid transparent; }
.app .dm-rail button:hover { background:var(--line-2); }
.app .dm-rail button.active { background:var(--orange-soft); border-left-color:var(--orange); font-weight:700; }

/* Filter chips are <button>s with aria-pressed; keep the chip look. */
.app .ra-chip, .app .wd-chip-btn { -webkit-appearance:none; appearance:none; font:inherit; cursor:pointer; }
.app .ra-chip[aria-pressed="true"] { /* .on already carries the visual state */ }

/* Global Unit Status swatch. Colour is data (DAM's global-status catalog), not a theme
   token, so it comes through inline from the row rather than from a class. */
.app .dm-gs { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px;
  font-weight:700; white-space:nowrap; }

/* Shown when a page's data load fails. Deliberately plain and unmistakable — it replaces the
   old behaviour of quietly rendering sample rows that looked real. */
.app .wd-loadfail { max-width:560px; margin:48px auto; padding:28px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--under);
  border-radius:var(--r); box-shadow:var(--shadow); }
.app .wd-loadfail h2 { margin:0 0 10px; font-size:18px; }
.app .wd-loadfail p { margin:0 0 10px; color:var(--text); }
.app .wd-loadfail p.meta { color:var(--muted); font-size:12.5px; margin-bottom:18px; }

/* "Not built yet" state. Distinct from .wd-loadfail (a failure) — this is an area whose owning
   service does not exist, so there is nothing to retry. Neutral, not alarming. */
.app .wd-notready { max-width:600px; margin:48px auto; padding:28px; text-align:center;
  background:var(--card); border:1px solid var(--line); border-left:4px solid var(--muted);
  border-radius:var(--r); box-shadow:var(--shadow); }
.app .wd-notready h2 { margin:0 0 10px; font-size:18px; }
.app .wd-notready p { margin:0 0 10px; }
.app .wd-notready p.meta { color:var(--muted); font-size:12.5px; margin:0; }
.app .wd-notready code { font-family:var(--mono); font-size:12px; background:var(--surface);
  padding:1px 5px; border-radius:4px; }

/* ---- Announcement banners (HQ 12 owns the feature; spec in their CONSUMER_GUIDE.md) ----
   Colours are inline from the author's chosen contrast pair, so nothing here sets a colour.
   The link inherits currentColor deliberately: a blue link would break that pair. */
.app .wd-announce { display:flex; flex-direction:column; gap:1px; }
.app .wd-announce-item { display:flex; align-items:center; gap:12px; padding:10px 16px;
  font-size:13.5px; font-weight:600; }
.app .wd-announce-text { flex:1; min-width:0; }
.app .wd-announce-text a { color:currentColor; text-decoration:underline; margin-left:8px;
  font-weight:700; }
.app .wd-announce-x { flex:none; width:28px; height:28px; display:grid; place-items:center;
  background:transparent; border:0; color:currentColor; opacity:.75; cursor:pointer;
  font-size:18px; line-height:1; border-radius:6px; }
.app .wd-announce-x:hover { opacity:1; background:#0000001a; }
.app .wd-announce-x:focus-visible { outline:2px solid currentColor; outline-offset:2px; }

@media (max-width:760px) {
  /* Dismiss is the one action every user performs — 40px on touch. */
  .app .wd-announce-x { width:40px; height:40px; }
  .app .wd-announce-item { padding:12px 14px; }
}

/* ---- Sample-data notice ----------------------------------------------------
   Used by any page rendering an approved mockup whose owning service does not exist yet.
   Deliberately loud and above the content: the whole point is that a reader can never mistake
   a design preview for their agency's real records. Distinct from .wd-loadfail (a failure) and
   .wd-notready (nothing to show at all) — here there IS content, and it is invented. */
/* Block, not flex: the message contains inline <b> emphasis mid-sentence, and as flex items those
   words get laid out as separate columns and shove to the far edge. */
/* Newsroom composers. The identity block is not a picker — it shows an automatic behaviour. */
.app .nra-dialog .bc-identity { display:flex; gap:12px; align-items:flex-start; background:var(--line-2);
  border:1px solid var(--line); border-radius:8px; padding:12px; }
.app .nra-dialog .bc-identity .tt { font-weight:700; font-size:13px; margin-bottom:2px; }
.app .nra-dialog .bc-identity .btn { margin-top:8px; }
.app .nra-dialog .nc-thumb { width:74px; height:50px; border-radius:6px; flex:none;
  background:repeating-linear-gradient(45deg, var(--line-2) 0 6px, #F4F7FA 6px 12px); }
.app .nra-dialog .bc-review { display:grid; grid-template-columns:auto 1fr; gap:8px 18px; margin:0; font-size:13px; }
.app .nra-dialog .bc-review dt { color:var(--muted); }
.app .nra-dialog .bc-review dd { margin:0; font-weight:600; }
.app .nra-dialog .fld label.c3-switch { display:inline-flex; margin-bottom:0; }

/* Personnel roster (Chat 1). Live data, so the table has to behave at 600 rows as well as 6. */
.app .pm-bar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 14px; }
/* c3-input is width:100% by design — it is built for a stacked Chief360Field. On this toolbar the
   controls sit SIDE BY SIDE, so the width is overridden here rather than by not using c3-input: the
   alternative was a second set of pm-* field rules that would drift from every other field. */
.app .pm-bar .c3-input { width:auto; }
.app .pm-search { min-width:220px; }
.app .pm-bar select.c3-input { min-width:160px; }
.app .pm-bar .grow { flex:1; }
.app .pm-name { font-weight:600; margin-right:6px; }

/* ---- Divisions and Person Groups (ported from Chief360PersonnelManagement.html, 2026-10-20) ----
   Ported WITH the markup, which is the rule now: a class with no rule behind it is a plain element and
   nothing anywhere says so. #fff and #fafbfd in the mockup become card/surface tokens so these cards
   are not white rectangles in dark mode. */
.app .pm-dgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; max-width:1320px }
.app .pm-dgrid .w { grid-column:span 1; padding:0; display:flex; flex-direction:column }
.app .pm-dcard-top { padding:13px 15px; border-bottom:1px solid var(--line-2); display:flex; align-items:flex-start; gap:11px }
.app .pm-dcard-ico { width:38px; height:38px; border-radius:9px; background:var(--side); color:var(--card);
  display:grid; place-items:center; flex:none }
.app .pm-dcard-ico .c3-ico { width:18px; height:18px }
.app .pm-dcard-nm { font-size:15px; font-weight:800; color:var(--text) }
.app .pm-dcard-nm .pill { margin-left:8px; vertical-align:middle }
.app .pm-dcard-ty { font-size:11.5px; color:var(--muted); margin-top:2px; display:inline-block }
.app .pm-dcard-stats { display:flex; gap:18px; padding:12px 15px }
.app .pm-dcard-stats .s .n { font-size:18px; font-weight:800; color:var(--text); display:block }
.app .pm-dcard-stats .s .l { font-size:11px; color:var(--muted) }
.app .pm-dcard-foot { margin-top:auto; border-top:1px solid var(--line-2); display:flex }
.app .pm-dcard-foot a { flex:1; text-align:center; padding:10px; font-size:12.5px; font-weight:700;
  text-decoration:none; color:var(--side); cursor:pointer }
.app .pm-dcard-foot a:hover { background:var(--orange-soft); color:var(--orange-ink) }
.app .pm-dcard-foot a + a { border-left:1px solid var(--line-2) }
.app .pm-dcard-retired { background:var(--surface) }
.app .pm-dcard-retired .pm-dcard-ico { background:var(--muted) }
.app .pm-dcard-retired .pm-dcard-nm { color:var(--muted) }

/* the retire guard: what still depends on a division, before the button that would refuse */
.app .pm-dzone { margin:16px 15px 15px; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.app .pm-dz-head { background:var(--surface); padding:10px 13px; font-size:11px; font-weight:800;
  text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--line-2) }
.app .pm-dz-body { padding:13px }
.app .pm-blockpanel { border-radius:8px; padding:12px 13px; font-size:12.5px }
.app .pm-blockpanel.blocked { background:#fbe4e1; border:1px solid #f0b3ab; color:#7a241c }
.app .pm-blockpanel.ok { background:#e1f3e9; border:1px solid #b6dcc4; color:#155e33 }
.app[data-theme="dark"] .pm-blockpanel.blocked { background:#3A1F1C; border-color:#6b2c25; color:#F0A79B }
.app[data-theme="dark"] .pm-blockpanel.ok { background:#16311F; border-color:#265c3a; color:#6FD39B }
.app .pm-blockpanel h4 { margin:0 0 6px; font-size:13px }
.app .pm-blockpanel ul { margin:6px 0 0; padding-left:18px }
.app .pm-blockpanel li { margin:2px 0 }
.app .pm-blockpanel .ctx { display:block; color:var(--muted); font-size:11.5px; margin-top:9px; line-height:1.5 }
.app .pm-dzone-actions { display:flex; align-items:center; gap:9px; border-top:1px solid var(--line-2);
  margin-top:12px; padding-top:12px; font-size:12px; color:var(--muted) }
.app .pm-dzone-actions .grow { flex:1 }
.app .btn.pm-btn-danger { border-color:var(--under); color:var(--under) }
.app .btn.pm-btn-danger:hover:not(:disabled) { background:#fbe4e1; border-color:var(--under); color:var(--under) }

/* Person Groups: the list beside its members */
.app .pm-groupswrap { display:grid; grid-template-columns:320px minmax(0,1fr); gap:16px; max-width:1320px }
.app .pm-groupswrap .w { grid-column:span 1 }
.app .pm-grouprow { display:flex; align-items:center; gap:10px; padding:10px 13px;
  border-bottom:1px solid var(--line-2); cursor:pointer; border-left:3px solid transparent }
.app .pm-grouprow:last-child { border-bottom:0 }
.app .pm-grouprow:hover { background:var(--orange-soft) }
.app .pm-grouprow.on { background:var(--orange-soft); border-left-color:var(--orange) }
.app .pm-grouprow .ttl { font-weight:600 }
.app .pm-grouprow .meta { color:var(--muted); font-size:12px }
.app .pm-grouprow .grow { flex:1; min-width:0 }

@media (max-width:1100px) {
  .app .pm-dgrid { grid-template-columns:repeat(2,1fr) }
  .app .pm-groupswrap { grid-template-columns:260px minmax(0,1fr) }
}
@media (max-width:760px) {
  .app .pm-dgrid { grid-template-columns:1fr }
  .app .pm-groupswrap { grid-template-columns:1fr }
}
.app .wd-table { width:100%; border-collapse:separate; border-spacing:0; background:var(--card);
  border:1px solid var(--line); border-radius:10px; overflow:hidden; font-size:13px; }
.app .wd-table th { text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); padding:10px 14px; background:var(--line-2); white-space:nowrap; }
.app .wd-table td { padding:11px 14px; border-top:1px solid var(--line); vertical-align:middle; }
.app .wd-table tbody tr:first-child td { border-top:0; }
@media (max-width:760px) {
  /* The phone keeps name and account — who they are and whether they can sign in. The rest is
     reachable by turning the device, which beats a horizontally scrolling table nobody can read. */
  .app .wd-table th:nth-child(2), .app .wd-table td:nth-child(2),
  .app .wd-table th:nth-child(3), .app .wd-table td:nth-child(3),
  .app .wd-table th:nth-child(4), .app .wd-table td:nth-child(4) { display:none; }
}

/* Newsroom member surfaces (News + Bulletin Board), Chat 6 revision 2026-09-30. */
.app .nr-h { font-size:14px; font-weight:700; margin:18px 0 10px; display:flex; align-items:center; gap:8px; }
.app .nr-ct { font-size:11px; font-weight:700; color:var(--muted); background:var(--line-2); border-radius:20px; padding:1px 8px; }
/* Pinned notices read as current, not as news: flagged, full width, above the grid. */
.app .nr-notices { margin-bottom:6px; }
.app .nr-notice { display:flex; gap:12px; background:var(--card); border:1px solid var(--line);
  border-left:3px solid var(--under); border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.app .nr-noticeflag { color:var(--under); flex:none; }
.app .nr-notice h3, .app .nr-bul h3 { margin:0 0 3px; font-size:13.5px; font-weight:700; }
.app .nr-notice p, .app .nr-bul p { margin:0; font-size:12.5px; }
.app .nr-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:18px 0 10px; }
.app .nr-toolbar .nr-h { margin:0; }
.app .nr-search { min-width:180px; }
.app .nr-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px; }
.app .nr-card { background:var(--card); border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.app .nr-thumb { height:130px; background-size:cover; background-position:center; background-color:var(--line-2); }
.app .nr-body { padding:11px 13px 13px; }
.app .nr-more { margin-top:14px; text-align:center; }
.app .nr-more .meta { margin-top:6px; }
.app .nr-empty { background:var(--card); border:1px solid var(--line); border-radius:10px; padding:22px; text-align:center; }
.app .nr-empty p { margin:0 0 4px; }
/* The sentence the nav badge cannot carry. */
.app .nr-owed { background:var(--orange-soft); border:1px solid var(--orange); color:var(--orange-ink);
  border-radius:8px; padding:10px 14px; margin:0 0 16px; font-size:13px; }
.app .nr-bgroup { margin-bottom:6px; }
.app .nr-bul { display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line);
  border-radius:10px; padding:12px 14px; margin-bottom:8px; }
.app .nr-bul.owed { border-left:3px solid var(--orange); }
/* Message-type identity: stored colour PAIR, never a hardcoded foreground. */
.app .nr-bicon { width:34px; height:34px; border-radius:8px; display:grid; place-items:center; flex:none; }
/* .grow is only defined scoped elsewhere in this sheet, so these rows need their own: without it the
   Acknowledge button sits against the text instead of at the end of the row. */
.app .nr-bul > .grow, .app .nr-notice > .grow { flex:1; min-width:0; }
.app .nr-bul > .btn, .app .nr-bul > .pill { flex:none; align-self:center; }
@media (max-width:640px) { .app .nr-grid { grid-template-columns:1fr; } }
.app .wd-sample { display:block; margin:0 0 16px; padding:10px 14px;
  background:#FFF4D6; color:#7A4E06; border:1px solid #E8C97A; border-left:4px solid #E8731C;
  border-radius:8px; font-size:12.5px; line-height:1.45; }
.app[data-theme="dark"] .wd-sample { background:#3A2F16; color:#E6C072; border-color:#5C4A22; }

/* ---- Incidents (Incident Manager, Chat 44 — mockup approved 2026-08-31) ----
   Class shapes ported from their DesignTemplates HTML under the same im- prefix. */
.app .im-filters { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; margin-bottom:16px; }
.app .im-field { display:flex; flex-direction:column; gap:4px; min-width:180px; }
.app .im-field.grow { flex:1; min-width:220px; }
.app .im-field label { font-size:11px; font-weight:700; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; }
.app .im-count { color:var(--muted); font-size:12.5px; margin:0 0 10px; }

/* Time is fixed narrow — table auto-layout otherwise hands the first column extra room. */
.app .im-table th:first-child, .app .im-table td:first-child { width:92px; }
.app .im-timecell { white-space:nowrap; line-height:1.35; }
.app .im-timecell .d { font-size:11.5px; display:block; }
.app .im-timecell .t { display:block; }

/* Whole Nature/Status cell carries the status colour — IM's deliberate exception to the
   pill-on-white-row convention, kept for parity with the current system's colour scanning.
   The colour is canonical status data, so it arrives inline from the row, not from a class. */
/* The colour sits on the <td> itself. A child cannot stretch to a table cell's height —
   height:100% does not resolve against a table-cell — so painting a wrapper span leaves the
   row half-painted whenever a neighbouring cell is taller (a long location name, five unit
   chips). Verified: with the span, cell 57px / fill 54px on a tall row. */
.app .im-naturecell { padding:0 !important; line-height:1.4; color:#fff; }
.app .im-nature { font-weight:700; display:block; }
.app .im-statuslabel { display:block; font-size:12px; font-weight:600; opacity:.95; }
.app .im-rowbtn { display:block; width:100%; background:none; border:0; padding:10px 13px;
  font:inherit; text-align:left; cursor:pointer; color:inherit; }
/* Underline rather than a colour change: the label is white on a solid status fill, so
   recolouring it to orange on purple or red is unreadable. */
.app .im-rowbtn:hover .im-nature { text-decoration:underline; }
.app .im-rowbtn:focus-visible { outline:3px solid #fff; outline-offset:-3px; }

/* Location-flavoured field sits above the combined address, which is always shown. */
.app .im-addr { display:block; }
.app .im-addr .loc { font-weight:700; display:block; }
.app .im-addr .street { font-weight:400; font-size:12px; display:block; }

.app .im-units, .app .im-tags { display:flex; flex-wrap:wrap; gap:4px; }
.app .im-unit { font-size:11px; font-weight:700; padding:2px 7px; border-radius:6px;
  white-space:nowrap; color:#fff; }
.app .im-tag { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:20px;
  background:#EFE8FA; color:#5A3B9E; white-space:nowrap; }
.app[data-theme="dark"] .im-tag { background:#2A2140; color:#B49AE8; }
.app .im-statuspill { display:inline-block; padding:2px 9px; border-radius:20px; font-size:11px;
  font-weight:700; color:#fff; }
.app .im-muted { color:var(--muted); }
.app .im-empty { text-align:center; color:var(--muted); padding:28px 13px !important; }

/* Detail dialog panes */
.app .im-pane { padding:18px 20px; }
.app .im-kv { display:grid; grid-template-columns:130px 1fr; gap:8px 16px; margin:0 0 4px; font-size:13px; }
.app .im-kv dt { color:var(--muted); font-weight:700; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.04em; padding-top:2px; }
.app .im-kv dd { margin:0; }
.app .im-sectionhead { display:flex; align-items:baseline; gap:10px; margin:20px 0 10px; }
.app .im-sectionhead h3 { margin:0; font-size:14px; font-weight:800; }
.app .im-sectionhead small { color:var(--muted); }
.app .im-note { font-size:12px; margin:12px 0 0; }

@media (max-width:760px) {
  .app .im-field, .app .im-field.grow { min-width:0; width:100%; }
  .app .im-kv { grid-template-columns:1fr; gap:2px 0; }
  .app .im-kv dt { padding-top:8px; }
  .app .im-pane { padding:14px 16px; }
}

/* ---- Admin area (Agency Management, Chat 17 — revision approved 2026-09-15) ----
   Ported from DesignTemplates\AgencyManagement\AgencyManagement.html under its am- prefix, scoped to .app.
   Switches and dialogs use the Chief360.Ui components (c3-switch, Chief360Dialog) rather than the mockup's
   local .switch/.modal, so they keep the shared focus trap and keyboard behaviour. */
.app .am-intro { margin-bottom:14px; }
.app .am-blocked { margin:0 0 14px; padding:12px 14px; background:#fbe4e1; color:#8a2a1c;
  border:1px solid #f0b9ae; border-left:4px solid var(--under); border-radius:8px; font-size:13px; line-height:1.5; }
.app .am-err { margin:0 0 12px; padding:9px 12px; background:#fbe4e1; color:#8a2a1c; border-radius:7px; font-size:12.5px; }
.app .am-empty { color:var(--muted); font-size:12.5px; margin:4px 0; }
.app .am-ok { color:var(--ok); font-weight:700; font-size:12.5px; align-self:center; }
.app .am-savebar { display:flex; gap:10px; align-items:center; }

.app .am-layout { display:flex; gap:16px; align-items:flex-start; max-width:1320px; }
.app .am-rail { width:206px; flex:none; background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden; position:sticky; top:0; }
.app .am-railhead { background:var(--black); color:#fff; font-weight:700; font-size:11.5px; letter-spacing:.04em;
  text-transform:uppercase; padding:9px 13px; }
.app .am-cap { background:#f3f6fa; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:.06em;
  text-transform:uppercase; padding:8px 13px 6px; }
.app .am-item { display:flex; align-items:center; padding:9px 13px; color:var(--text); font-weight:600; font-size:12.5px;
  border:0; border-left:3px solid transparent; border-bottom:1px solid var(--line-2); cursor:pointer; background:none;
  width:100%; text-align:left; font-family:inherit; }
.app .am-item:hover { background:var(--orange-soft); }
.app .am-item.on { background:var(--card); border-left-color:var(--orange); color:var(--orange-ink); }
.app .am-item:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.app .am-item .n { margin-left:auto; font-size:10px; font-weight:800; color:#fff; background:var(--under); border-radius:20px; padding:1px 6px; }
.app .am-main { flex:1; min-width:0; }
.app .am-main > h2 { margin:0 0 3px; font-size:16px; color:var(--text); }
.app .am-main .lede { color:var(--muted); font-size:12.5px; margin:0 0 16px; }
.app .am-note2 { color:var(--muted); font-size:11px; font-weight:400; text-transform:none; letter-spacing:0; }

.app .am-panel { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:16px 18px; margin-bottom:14px; }
.app .am-panel h3 { margin:0 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  display:flex; align-items:center; gap:8px; }
/* A ticked list inside a field — the position editor's required qualifications. Scrolls rather than
   growing the dialog, because an agency with forty qualifications would push the Save button off screen.
   One per line: these are names like "Engineer / Apparatus Operator" and wrapping them into columns makes
   it hard to see which checkbox belongs to which name. */
.app .sch-quallist { display:flex; flex-direction:column; gap:7px; max-height:220px; overflow-y:auto;
  border:1px solid var(--line); border-radius:7px; padding:9px 11px; background:var(--card); }

.app .am-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.app .am-grid3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; }
.app .am-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.app .am-field label, .app .am-flabel { font-size:11.5px; font-weight:700; color:var(--muted); }
.app .am-field input:not([type=range]):not([type=file]), .app .am-field select {
  border:1px solid var(--line); border-radius:7px; padding:8px 10px; font:inherit; background:var(--card); color:var(--text); min-width:0; }
.app .am-field input:focus, .app .am-field select:focus { outline:none; border-color:var(--orange); }
.app .am-field .mono, .app .am-lrow .lu { font-family:var(--mono); }
.app .am-linknote { background:#e6f0fb; border:1px solid #c9d9fb; border-radius:8px; padding:11px 13px; font-size:12.5px;
  color:#28407e; display:flex; gap:9px; align-items:flex-start; margin-bottom:14px; }
.app .am-linknote .i { font-weight:800; flex:none; }
.app .am-tags { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.app .am-tag { font-size:10px; font-weight:700; padding:2px 7px; border-radius:5px; background:var(--surface); color:var(--muted); }
.app .am-tag.on { background:#e1f3e9; color:var(--ok); }
.app .am-coin { width:40px; height:40px; border-radius:9px; display:grid; place-items:center; color:#fff; font-weight:800;
  font-size:12px; flex:none; background:var(--side); }
.app .am-coin.sm { width:34px; height:34px; font-size:11px; }
.app .am-coin.lg { width:150px; height:150px; border-radius:12px; font-size:30px; }

.app .am-lrow { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line-2); }
.app .am-lrow:last-child { border-bottom:0; }
.app .am-lrow.dragging { opacity:.45; }
.app .am-lrow .drag { color:var(--muted); cursor:grab; letter-spacing:-2px; }
.app .am-lrow .ei.sm { width:28px; height:28px; border-radius:7px; background:var(--orange-soft); color:var(--orange-ink);
  display:grid; place-items:center; flex:none; }
.app .am-lrow .lmain { flex:1; min-width:0; display:flex; flex-direction:column; }
.app .am-lrow .lmain .lt { font-weight:700; }
.app .am-lrow .lmain .lu { font-size:11.5px; color:var(--muted); overflow-wrap:anywhere; }
.app .am-lrow .lmain .lu.am-prose { font-family:inherit; }
.app .am-mv { width:28px; height:28px; flex:none; border:1px solid var(--line); background:var(--card); border-radius:6px;
  color:var(--muted); cursor:pointer; font-size:10px; line-height:1; }
.app .am-mv:disabled { opacity:.35; cursor:default; }
.app .am-swatch { width:12px; height:12px; border-radius:50%; flex:none; }
.app .am-main .btn.sm { padding:5px 11px; font-size:12px; }

.app .am-mkrow { display:grid; grid-template-columns:170px 1fr 80px auto; gap:10px; align-items:center; padding:9px 0;
  border-bottom:1px solid var(--line-2); }
.app .am-mkrow:last-child { border-bottom:0; }
.app .am-mkrow.head { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:700; }
.app .am-mkrow input { border:1px solid var(--line); border-radius:7px; padding:7px 9px; font-family:var(--mono);
  font-size:12px; min-width:0; background:var(--card); color:var(--text); }
.app .am-mkacts { display:flex; gap:6px; justify-content:flex-end; }
.app .am-okk { color:var(--ok); font-weight:800; font-size:12px; }
.app .am-bad { color:var(--under); font-weight:800; font-size:12px; }
.app .am-fb { color:var(--muted); font-weight:700; font-size:11px; }

.app .am-cropwrap { display:flex; gap:20px; align-items:flex-start; }
.app .am-cropbox { width:260px; height:260px; max-width:100%; flex:none; border:1px solid var(--line); border-radius:10px;
  overflow:hidden; display:grid; place-items:center;
  background:var(--surface) repeating-linear-gradient(45deg,#e9edf3 0 10px,#e3e8ef 10px 20px); }
.app .am-cropbox img { width:100%; height:100%; object-fit:cover; display:block; }
.app .am-cropside { flex:1; display:flex; flex-direction:column; gap:14px; min-width:0; }
.app .am-range { width:100%; }
.app .am-dutybar { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }

.app .am-picked { margin:10px 0 0; font-size:13px; }

.app .am-frtabs { display:flex; gap:4px; border-bottom:1px solid var(--line); margin:2px 0 14px; }
.app .am-frtab { padding:8px 14px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; border:0;
  background:transparent; border-bottom:3px solid transparent; display:flex; align-items:center; gap:7px; font-family:inherit; }
.app .am-frtab:hover { color:var(--text); }
.app .am-frtab.on { color:var(--orange-ink); border-bottom-color:var(--orange); }
.app .am-frtab .ct { color:var(--muted); font-weight:600; }
.app .am-frtab .badge { background:var(--under); color:#fff; font-size:10px; font-weight:800; border-radius:20px; padding:1px 7px; }
.app .am-plistbar { display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap; }
.app .am-plistbar .sf { display:flex; border:1px solid var(--line); border-radius:8px; padding:8px 11px; min-width:240px; background:var(--card); }
.app .am-plistbar .sf input { border:0; outline:none; font:inherit; flex:1; min-width:0; background:transparent; color:var(--text); }
.app .am-plistbar .ct { margin-left:auto; color:var(--muted); font-size:12px; }
.app .am-psub { color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; margin:6px 2px 8px; }
.app .am-prow { background:var(--card); border:1px solid var(--line); border-radius:10px; margin-bottom:8px; overflow:hidden; }
.app .am-prow .rowhead { display:flex; align-items:center; gap:11px; padding:11px 14px; cursor:pointer; width:100%;
  border:0; background:none; font:inherit; text-align:left; color:var(--text); }
.app .am-prow .rowhead:hover { background:var(--surface); }
.app .am-prow .rowhead:focus-visible { outline:2px solid var(--orange); outline-offset:-2px; }
.app .am-prow .nm { min-width:0; display:flex; flex-direction:column; }
.app .am-prow .nm .t { font-weight:700; }
.app .am-prow .nm .s { font-size:11.5px; color:var(--muted); }
.app .am-prow .sum { margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; justify-content:flex-end; max-width:46%; }
.app .am-scap { font-size:10px; font-weight:700; padding:2px 7px; border-radius:20px; background:#e1f3e9; color:var(--ok); }
.app .am-scap.more { background:var(--surface); color:var(--muted); }
.app .am-chev { color:var(--muted); transition:transform .15s; flex:none; font-size:18px; line-height:1; }
.app .am-prow.open .am-chev { transform:rotate(90deg); }
.app .am-prow .rowbody { border-top:1px solid var(--line-2); }
.app .am-mxwrap { overflow-x:auto; }
.app .am-matrix { width:100%; border-collapse:collapse; }
.app .am-matrix th { text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  font-weight:700; padding:9px 14px; }
.app .am-matrix th.c { text-align:center; width:140px; }
.app .am-matrix td { padding:8px 14px; border-top:1px solid var(--line-2); font-size:13px; }
.app .am-matrix td.c { text-align:center; }
.app .am-matrix .cap { font-weight:600; }
.app .am-pf { padding:10px 14px; border-top:1px solid var(--line-2); display:flex; align-items:center; gap:8px; background:var(--surface); flex-wrap:wrap; }
.app .am-pf .l { color:var(--muted); font-size:11.5px; }
.app .am-pf .r { margin-left:auto; display:flex; gap:8px; }
.app .am-req { display:flex; align-items:center; gap:12px; background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:12px 15px; margin-bottom:10px; flex-wrap:wrap; }
.app .am-req .m { flex:1; min-width:180px; display:flex; flex-direction:column; }
.app .am-req .m .t { font-weight:700; }
.app .am-req .m .s { font-size:12px; color:var(--muted); }
.app .am-req .acts { display:flex; gap:8px; }
.app .am-danger { color:var(--under); }
.app .am-danger:hover:not(:disabled) { border-color:var(--under); color:var(--under); background:#fbe4e1; }
.app .am-capchecks { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin:12px 0; }
.app .am-capchecks.am-accept { width:100%; margin:4px 0 0; }
.app .am-toggles { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
/* Role editor: the permission catalog arrives grouped, so the switches are grouped too — a flat list of
   every slug an agency has is unreadable once the catalog grows. Two columns where there is room. */
.app .am-dlgh { margin:16px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); }
.app .am-permgroup { border-top:1px solid var(--line); padding:10px 0 2px; }
.app .am-permgroup:first-of-type { border-top:0; }
.app .am-permgh { font-weight:600; font-size:12.5px; margin-bottom:2px; }
.app .am-permgroup .am-toggles { display:grid; grid-template-columns:1fr 1fr; gap:8px 20px; margin-top:8px; }
.app .am-permd { display:block; color:var(--muted); font-size:11.5px; font-weight:400; }
@media (max-width:640px) { .app .am-permgroup .am-toggles { grid-template-columns:1fr; } }
.app .am-dlgfoot { display:flex; align-items:center; gap:9px; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); }
.app .am-dlgfoot .meta { font-size:11.5px; }
.app .am-dlgfoot .grow { flex:1; }
.app .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.app .wd-wlink { margin-top:8px; font-size:12.5px; }
/* Scheduling Home widgets (SchedulingHomeWidget): the My Shifts button row, a negative bank in red,
   and the mini calendar's out-of-month cells dimmed (the mockup draws them like any other; a member
   reading "30" at the top-left of October should not take it for the 30th of October). */
.app .wd-wbtns { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.app .wd-neg { color:var(--under); }
.app .sch-mini .c.wd-dim { color:var(--muted); border-style:dashed; }

@media (max-width:1100px) {
  .app .am-mkrow { grid-template-columns:130px 1fr 70px auto; }
}
@media (max-width:900px) {
  /* Rail collapses to wrap-chips above the content (Dispatch pattern) — no horizontal page scroll. */
  .app .am-layout { flex-direction:column; }
  .app .am-rail { width:100%; position:static; display:flex; flex-wrap:wrap; padding:6px; }
  .app .am-rail .am-railhead { width:calc(100% + 12px); margin:-6px -6px 6px; }
  .app .am-rail .am-cap { display:none; }
  .app .am-item { width:auto; border-left:0; border-bottom:0; border-radius:20px; margin:3px; padding:7px 12px; background:var(--surface); }
  .app .am-item.on { background:var(--orange-soft); }
}
@media (max-width:760px) {
  .app .am-grid2, .app .am-grid3, .app .am-capchecks { grid-template-columns:1fr; }
  .app .am-cropwrap { flex-direction:column; }
  .app .am-mkrow { grid-template-columns:1fr auto; }
  .app .am-mkrow.head { display:none; }
  .app .am-mkrow > div:first-child { grid-column:1 / -1; font-weight:700; }
  .app .am-mkrow input { grid-column:1 / -1; }
  /* 40px touch targets on the controls crews actually tap. */
  .app .am-mv { width:40px; height:40px; }
  .app .am-main .btn.sm { min-height:40px; }
}
@media (max-width:560px) {
  .app .am-prow .sum .am-scap:not(.more) { display:none; }
  .app .am-frtabs { overflow-x:auto; }
}

/* ---- Radio Alert (Chat 36 — mockup approved; single nav item, three views) ----------------
   Toolbar switches the view; the active button is .primary, so there is no new control to style. */
.app .ra-tools { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 16px; max-width:1320px; }
.app .ra-tools .ra-spacer { flex:1; }

/* ONE player for the whole table. Audio must never double up, so the bar lives above the rows and
   every row's play button drives this single element. */
.app .ra-player { display:flex; align-items:center; gap:11px; padding:9px 13px; background:var(--orange-soft);
  border:1px solid #f2d3ac; border-radius:var(--r); margin-bottom:12px; }
.app .ra-pbtn { width:32px; height:32px; flex:none; border:0; border-radius:50%; background:var(--orange);
  color:#fff; cursor:pointer; display:grid; place-items:center; }
.app .ra-ptitle { font-weight:700; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:30%; }
.app .ra-pbar { flex:1; height:6px; background:#f2d3ac; border-radius:20px; overflow:hidden; min-width:80px; }
.app .ra-pbar i { display:block; height:100%; background:var(--orange); width:0; }
.app .ra-ptime { font-family:var(--mono); font-size:12px; color:var(--orange-ink); white-space:nowrap; }
.app .ra-pclose { border:0; background:transparent; color:var(--orange-ink); font-size:20px; line-height:1; cursor:pointer; }

/* A tone's icon is CONTENT from the Icon Catalog, not chrome — real rows render <img src="{IconUrl}">.
   The sprite glyph is the stand-in until IconUrl is populated, at the size the design specifies. */
.app .ra-icon { width:30px; height:30px; flex:none; border-radius:8px; display:grid; place-items:center;
  background:var(--surface); color:var(--text); }
.app .ra-icon img { width:30px; height:30px; border-radius:8px; display:block; }
.app .ra-tonecell { display:flex; align-items:center; gap:9px; }
.app .ra-rowacts { display:flex; gap:6px; justify-content:flex-end; }

.app .ra-miniplay { width:26px; height:26px; flex:none; border:1px solid var(--line); border-radius:50%;
  background:var(--card); color:var(--orange-ink); cursor:pointer; display:grid; place-items:center; }
.app .ra-miniplay:hover:not(:disabled) { background:var(--orange-soft); }
.app .ra-noplay, .app .ra-miniplay:disabled { opacity:.4; cursor:default; }

/* Tables scroll inside their own container, never the page body. */
.app .ra-scroll { overflow-x:auto; }
.app .ra-note { color:var(--muted); font-size:12px; margin:10px 0 0; }

@media (max-width:560px) {
  .app .ra-tools .btn { flex:1 1 auto; justify-content:center; min-height:40px; }
  .app .ra-tools .ra-spacer, .app .ra-count { display:none; }
  .app .ra-ptitle { max-width:none; }
}

/* ---------------------------------------------------------------------------
   Form primitives added 2026-10-15 with the Event Calendar and Availability
   fold-ins. Scoped under .app like everything else in this sheet.

   .wd-radiogroup exists because a TRI-STATE needs three controls. Availability's
   CountsAsAvailable is true / false / null, where null means "nobody has
   classified this type yet" and Scheduling never counts it as available. A
   switch can only say two things, so it would have had to collapse one of the
   three — and collapsing "unclassified" into either answer is the bug that
   prompted the fold-in.
   --------------------------------------------------------------------------- */

.app .wd-radiogroup { display:flex; flex-direction:column; gap:8px; }

.app .wd-radio { display:flex; align-items:center; gap:10px; font-size:13px; cursor:pointer;
                 padding:8px 10px; border:1px solid var(--line); border-radius:var(--r);
                 background:var(--surface); }
.app .wd-radio:hover { border-color:var(--navy); }
.app .wd-radio input { width:16px; height:16px; margin:0; flex:none; accent-color:var(--navy); cursor:pointer; }
.app .wd-radio span { line-height:1.35; }

/* The save row under a form: button left, a quiet status note beside it. */
.app .wd-formfoot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:14px; }

/* A standing note that is information, not an error — "coverage is not available
   yet" and the like. Deliberately not .am-err: a reader learns nothing from a
   page that shouts at them about something they cannot act on. */
.app .wd-note { border:1px solid var(--line); border-left:3px solid var(--amber);
                background:var(--surface); border-radius:var(--r);
                padding:10px 12px; font-size:13px; line-height:1.5; margin:0 0 12px; }

/* A native colour input, sized like the other form controls. Agencies choose
   their own hex for event types and availability types, so this replaced a
   palette-key <select> that could only offer eight. */
.app .ec-colour { width:64px; height:34px; padding:2px; border:1px solid var(--line);
                  border-radius:var(--r); background:var(--surface); cursor:pointer; }

/* A field that shows a value the user cannot change here — an event's Category
   comes from its type, so it is displayed rather than offered as a picker. */
.app .ec-readonly { font-size:13px; padding:8px 10px; border:1px dashed var(--line);
                    border-radius:var(--r); color:var(--muted); background:var(--surface); }

.app .ec-form2 { display:grid; grid-template-columns:1fr 1fr; gap:14px 12px; }
/* The shared kit's .c3-field + .c3-field margin dropped the second column of the first row 14px (Brooks 2026-10-30,
   tone editor: Tone A (ms) below Tone A (Hz)); in the grid the gap spaces the rows. */
.app .ec-form2 > .c3-field { margin-top:0; }

@media (max-width:560px) {
  .app .ec-form2 { grid-template-columns:minmax(0,1fr); }
}

/* ===========================================================================
   SCHEDULING (Chat 31) — the area's own design system, ported from
   DesignTemplates/Chief360Scheduling/Chief360Scheduling.html.

   ALL 123 sch-* classes were missing from this sheet, which is why the
   Scheduling pages rendered as unstyled markup: the components referenced
   classes that existed only inside the mockup file. Extracted verbatim and
   scoped under .app like every other block here.

   The mockup's FYI comments are design notes for me, not UI (Scheduling's bus
   3301), so they are stripped. `.fyi-mark` itself is carried: it is display:none
   and keeps any stray marker in ported markup rendering nothing.
   =========================================================================== */

.app in CSS
   and JS, .app and a blank marker <span class="fyi-mark" data-fyi="scheduling"></span> beside visible notes (it renders nothing). Rulings live in Chief360Scheduling's
   Decision Register; the notes here are pointers to them.

   REVISION HISTORY:
   2026-10-03 — Removed No-Show Audit Log (deferred to Phase 2+), .app redesigned
                Vacation Bidding (manager Time Off setup + member Home bidding flow), .app fixed Approval Workflows with standard Edit dialog pattern.

   DO NOT MODIFY  ─ appbar, .app sidebar chrome, .app crumbbar, .app titlebar, .app :root tokens, .app the Widgets dialog, .app or the shared component classes.
   DO MODIFY      ─ the <title>, .app the crumb/title text, .app the nav item list for
                    your area, .app everything inside <div class="content">, .app and the
                    "FEATURE STYLES" block at the bottom of this stylesheet.

   Chrome recipe:  black appbar (#0D0D10) + 3px orange stripe · blue sidebar
                   (#1565B0) identity · navy crumb band (#13233D) · black
                   titlebar with orange H1 · black widget headers, .app orange icon.
   Icons:          FLAT, .app monochrome, .app currentColor stroke SVG. No emoji, .app no
                   multicolour glyphs anywhere in the chrome or the nav.
   Naming:         "Home" = the Watch Desk landing.  "Dashboards" = the
                   Dashboard360 analytics product.  They are NOT the same thing.
   ========================================================================== */
/* ONLY the tokens the shared sheet does not already define.

   This block used to restate the whole palette — --black, --navy, --side, --surface, --card, --line,
   --text, --muted, --orange*, --ok/--under/--over/--amber, --sans, --mono, --r, --shadow — all at
   :root, all byte-identical to chief360.css except one. index.html loads chief360.css FIRST and
   watchdesk.css second, so at equal specificity this copy won every one of them. The exception was
   --muted: this said #6A7787, the shared sheet says #5A6775, and chief360.css carries a comment
   explaining that it was darkened deliberately because the old value measured 4.56:1 on white and
   only just cleared AA at the 11-12px sizes --muted is used at. The duplicate reverted that fix
   across the whole portal, silently, for every page. Deleting the duplicates restores it.

   --purple is genuinely local: it is a Scheduling accent (contract overtime, callback, holdover)
   that the shared sheet has no token for. If another portal needs it, it should move to
   chief360.css rather than be copied again. */
:root { --purple:#6D4AC7; --purple-soft:#efe9fb; }
/* The soft fill needs a night value, or a purple chip stays a LIGHT LILAC block on a dark page —
   the same half-flip the shared sheet has between --orange-soft (flipped) and --orange-ink (not).
   Values taken from chief360.css's own night palette (.pill.purple) so the two agree. */
.app[data-theme="dark"] { --purple:#B49BEE; --purple-soft:#241B3C; }
.app .fyi-mark { display:none }
.app .sch-ddl .pop button .ckb { width:15px;height:15px;border:1px solid var(--line);border-radius:4px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;color:#fff }
.app .sch-ddl .pop button.on .ckb { background:var(--orange);border-color:var(--orange) }
.app .sch-ddl .pop button:not(.on) .ckb svg { display:none }
.app .sch-eligme .sch-openchip:not(.mine) { opacity:.25;pointer-events:none }
.app .sch-eligme #sch-csb-list tbody tr:not(.mine) { opacity:.25 }
.app .sch-openchip { display:block;width:100%;text-align:left;border:1px dashed var(--orange);background:var(--orange-soft);border-radius:5px;padding:4px 7px;margin:3px 0;font-size:10.5px;line-height:1.35;cursor:pointer;font:inherit;color:var(--text) }
.app .sch-openchip b { display:block;font-size:10.5px }
.app .sch-openchip .t { font-family:var(--mono);font-size:9.5px;display:block }
.app .sch-openchip.cb { border-style:solid;border-color:var(--purple);background:var(--purple-soft) }
.app .sch-openchip .sch-vchip { margin-top:3px;display:inline-block }
.app .sch-addcols { display:grid;grid-template-columns:2fr 1fr;gap:18px;align-items:start }
.app .sch-addside { border:1px solid var(--line);border-radius:10px;background:var(--surface);padding:12px }
.app .sch-adj-old { color:var(--muted);text-decoration:line-through;margin-right:6px }
.app .sch-ddl { position:relative }
.app .sch-ddl>button { display:flex;align-items:center;gap:8px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font:inherit;font-size:13px;cursor:pointer;color:var(--text) }
.app .sch-ddl .dot { width:11px;height:11px;border-radius:50%;flex:0 0 auto }
.app .sch-ddl .car { margin-left:auto;color:var(--muted);font-size:11px }
.app .sch-ddl .pop { display:none;position:absolute;z-index:60;top:calc(100% + 4px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);padding:5px;max-height:270px;overflow:auto }
.app .sch-ddl.open .pop { display:block }
.app .sch-ddl .pop button { display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;border-radius:7px;padding:8px 9px;font:inherit;font-size:13px;text-align:left;cursor:pointer;color:var(--text) }
.app .sch-ddl .pop button:hover { background:var(--surface) }
.app .sch-ddl .pop .bal { margin-left:auto;color:var(--muted);font-size:11.5px }
.app .sch-pane { display:none }
.app .sch-pane.on { display:block }
.app .sch-sr { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
.app .sch-acts { display:none;gap:8px }
.app .sch-acts.on { display:inline-flex }
.app .sch-hint { color:var(--muted);font-size:12px;max-width:1320px }
.app .sch-dlg .btn { min-height:40px }
.app .sch-pane .btn { min-height:40px }
.app .sch-toolbar { display:flex;align-items:center;gap:10px;padding:10px 13px;border:1px solid var(--line);border-radius:var(--r);background:var(--card);flex-wrap:wrap;box-shadow:var(--shadow);margin-bottom:16px }
.app .sch-lbl { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted) }
.app .sch-seg { display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden }
.app .sch-seg button { border:0;background:var(--card);padding:8px 10px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-left:1px solid var(--line);min-height:40px;font-family:inherit }
.app .sch-toolbar { gap:6px }
.app .sch-toolbar select { max-width:118px;font-size:11.5px }
.app .sch-pane>.sch-toolbar:first-child { margin:-20px -20px 16px;border-radius:0;border-left:0;border-right:0;border-top:0;padding:12px 20px }
.app .sch-seg button:first-child { border-left:0 }
.app .sch-seg button.on { background:var(--orange-soft);color:var(--orange-ink) }
.app .sch-seg button:disabled { opacity:.45;cursor:not-allowed }
/* The Edit schedule dialog is the mockup's 900px tabbed editor (schDlgSchedule, rev 2.93); Chief360Dialog has no width option. */
.dialog:has(.sch-scdlg) { max-width:900px;width:min(96vw,900px) }
.app .sch-sp { flex:1 }
/* My Schedule's month label, between "← August" and "October →". The mockup's own measurements:
   bold 15px in a bordered box with a floor on the width, so the toolbar does not jump as the month
   name changes length (May to September moves it ~40px otherwise).

   NOT called sch-mymonth: that name is already taken in this sheet by a TABLE rule
   (.sch-mymonth td), and a second meaning for one class is how a selector starts applying where
   nobody expects it. */
.app .sch-mymonthlbl {
  font-weight:800;font-size:15px;padding:8px 12px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);color:var(--text);min-width:150px;text-align:center }
.app .sch-datenav { display:flex;align-items:center;gap:2px }
.app .sch-datenav button { border:1px solid var(--line);background:var(--card);width:40px;height:40px;border-radius:7px;cursor:pointer;color:var(--muted);display:grid;place-items:center }
.app .sch-datenav button svg { width:14px;height:14px }
.app .sch-datenav .lab { font-weight:700;padding:0 6px;min-width:0;text-align:center;white-space:nowrap }
.app .sch-datejump { position:relative;display:inline-block;cursor:pointer;border-radius:4px }
.app .sch-datejump:hover { text-decoration:underline }
.app .sch-datejump:focus-within { outline:2px solid var(--orange);outline-offset:2px }
.app .sch-datejump input { position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer }
.app .sch-datejump input::-webkit-calendar-picker-indicator { position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;cursor:pointer }
.app .sch-board { max-width:1320px }
.app .sch-stationhead { display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px;margin:18px 2px 8px;color:var(--text) }
.app .sch-stationhead .bar { width:8px;height:18px;border-radius:3px;flex:none }
.app .sch-stationhead .meta { color:var(--muted);font-weight:600;font-size:12px }
.app .sch-stationhead .shift { font-weight:800;font-size:11px }
.app .sch-sched { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);margin-bottom:12px;overflow:hidden }
.app .sch-schedhead { background:var(--navy);color:#fff;display:flex;align-items:center;gap:10px;padding:5px 10px;font-weight:700;font-size:13px }
.app .sch-schedhead small { font-weight:600;color:#9fb3d1;margin-left:8px;font-size:11px }
.app .sch-schedhead .btn { background:transparent;color:#cfe0f2;border-color:#3d5578;min-height:32px }
.app .sch-schedhead .btn:hover { color:#fff;border-color:var(--orange) }
.app .sch-ico { appearance:none;border:0;background:transparent;color:#b9c8e2;width:28px;height:28px;border-radius:6px;display:grid;place-items:center;cursor:pointer;font:inherit;font-size:15px;line-height:1;padding:0 }
.app .sch-ico svg { width:14px;height:14px }
.app .sch-ico:hover { background:rgba(255,255,255,.14);color:#fff }
/* The ADD control, with its word. A bare + at the end of a navy bar that can run wider than the
   viewport is findable only by someone who already knows it is there. */
.app .sch-ico-wide { width:auto;gap:5px;padding:0 9px;display:inline-flex;align-items:center;font-size:11.5px;font-weight:700;letter-spacing:.02em }
.app .sch-count { font-family:var(--mono);font-size:11.5px;font-weight:800;border-radius:6px;padding:2px 7px }
.app .sch-count.ok { background:#e1f3e9;color:var(--ok) }
.app .sch-count.under { background:#fbe4e1;color:var(--under) }
.app .sch-count.over { background:#e6f0fb;color:var(--over) }
.app .sch-seat { border-top:1px solid var(--line-2);padding:5px 8px;display:flex;gap:8px;align-items:stretch }
.app .sch-seat .sch-strip { flex:1;min-width:0 }
.app .sch-cands { border:1px solid var(--line);border-radius:10px;margin-top:8px;overflow:hidden;background:var(--card) }
.app .sch-cand { display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:8px 10px;border-top:1px solid var(--line-2);cursor:pointer }
.app .sch-cand:first-child { border-top:0 }
.app .sch-cand:hover { background:var(--surface) }
.app .sch-cand.sel { background:#eef4fb }
.app .sch-cand .nm { font-weight:700;font-size:12.5px;min-width:110px }
.app .sch-cand .meta { margin-left:auto }
.app .sch-cands.freeonly .sch-cand.busy { display:none }
.app .sch-avstrip { display:flex;flex-basis:100%;height:7px;border-radius:4px;overflow:hidden;margin-top:5px;min-width:160px }
.app .sch-avstrip i { display:block }
.app .sch-avstrip .av, .app .sch-avkey.av { background:#58c88b }
.app .sch-avstrip .un, .app .sch-avkey.un { background:#e2766a }
.app .sch-avstrip .nd, .app .sch-avkey.nd { background:#cfd6de }
.app .sch-avkey { display:inline-block;width:10px;height:10px;border-radius:3px;vertical-align:-1px;margin-right:3px }
.app .sch-combo { position:relative }
.app .sch-combolist { display:none;position:absolute;z-index:70;top:calc(100% + 3px);left:0;right:0;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);max-height:220px;overflow:auto;padding:4px }
.app .sch-combolist button { display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;padding:7px 9px;font:inherit;font-size:12.5px;cursor:pointer;color:var(--text) }
.app .sch-combolist button:hover { background:var(--surface) }
.app .sch-combolist button { display:flex;gap:8px;align-items:center }
.app .sch-combolist .cst { margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap }
.app .sch-cdot { width:9px;height:9px;border-radius:50%;flex:none }
.app .sch-cdot.ok { background:#27ae60 }
.app .sch-cdot.warn { background:#f39c12 }
.app .sch-addref { margin-top:14px;border-top:1px solid var(--line-2);padding-top:12px }
.app .sch-fltddl>button { width:auto;font-weight:600;padding:7px 10px }
.app .sch-fltddl>button svg { width:13px;height:13px;color:var(--muted);flex:none }
.app .sch-fltcnt { background:var(--orange);color:#fff;border-radius:99px;font-size:10.5px;font-weight:800;padding:1px 7px }
.app .sch-fltpop { left:0;right:auto;width:272px;max-height:none;overflow:visible;padding:12px }
.app .sch-fltpop .sch-field { margin:0 0 10px }
.app .sch-fltpop select { width:100%;max-width:none }
.app .sch-fltsep { border-top:1px solid var(--line-2);margin:4px 0 10px }
.app .sch-fltfoot { display:flex;align-items:center;gap:10px;justify-content:space-between;margin-top:2px;font-size:12px }
.app .sch-poslbl { display:none }
.app .sch-board.showpos .sch-poslbl { display:flex;flex:none;width:92px;align-items:center;font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);border-right:1px solid var(--line-2);padding-right:6px }
.app .sch-strip { display:flex;gap:4px }
.app .sch-cov { appearance:none;-webkit-appearance:none;border:0;font:inherit;text-align:left;border-radius:6px;padding:6px 10px;min-height:40px;cursor:pointer;display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-width:0 }
.app .sch-cov .nm { font-weight:700;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto }
.app .sch-cov .mt { display:flex;align-items:center;gap:6px;flex-wrap:nowrap;font-size:11px;margin-left:auto;min-width:0;overflow:hidden }
.app .sch-cov .mt>* { white-space:nowrap;flex:none }
.app .sch-cov.fill { background:#eef4fb;color:var(--text);border:1px solid #d3e2f2;border-left:4px solid var(--wc,#3498db) }
.app .sch-cards { display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;align-items:start }
.app .sch-card { border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card);box-shadow:var(--shadow) }
.app .sch-card .hd { background:var(--navy);color:#fff;padding:6px 10px;display:flex;gap:8px;align-items:center;font-weight:700;font-size:12.5px }
.app .sch-card .hd small { color:#9fb3d1;font-weight:600;font-size:10.5px }
.app .sch-crow { display:flex;gap:8px;padding:7px 9px;border-top:1px solid var(--line-2);align-items:flex-start }
.app .sch-crow:first-of-type { border-top:0 }
.app #sch-board-cards:not(.showpos) .sch-crow .pl { display:none }
.app .sch-crow .pl { width:78px;flex:none;font-size:9px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);padding-top:5px }
.app .sch-crow .en { flex:1;min-width:0 }
.app .sch-crow .en .sch-occ { margin-bottom:3px }
.app .sch-crow .en .sch-openchip { margin:0 0 3px }
.app .sch-cov.ovr, .app .sch-occ.ovr { border-right:3px dashed #d99114 }

/* ── EXTRAS, LANES, PENDING ADD TIME, OVERLAPS (Scheduling 4191, mockup rev 2.79a) ──────────────
   Ported from the approved HTML, then given the night variants the mockup does not have — ported
   mockup CSS is light-only, and a literal #f6f8fa tint on a night card is the fault this portal has
   already been bitten by once. */

/* The Extra row sits under the positions, on the surface tint so it reads as "not a position". Only
   the FIRST lane carries the label and its (i); later lanes (.sch-xlane) have no label and no top
   border, so a packed stack reads as one row. */
.app .sch-xrow { background:var(--surface) }
.app .sch-xrow .sch-poslbl, .app .sch-board.showpos .sch-xrow .sch-poslbl {
  display:flex;flex-direction:row;justify-content:flex-start;align-items:center;flex:none;width:92px;
  font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  border-right:1px solid var(--line-2);padding-right:6px }
.app .sch-xrow .sch-poslbl .sch-fi { text-transform:none;letter-spacing:0 }
.app .sch-xrow.sch-xlane { border-top-color:transparent;padding-top:0 }
/* A later lane of a POSITION row (overlaps, section 16.1): same treatment, so a two-lane position
   reads as one position with two people on it rather than two positions. */
.app .sch-seat.sch-lane { border-top-color:transparent;padding-top:0 }
/* Empty time on a lane, laid out on the same shift clock as the chips around it. */
.app .sch-xgap { min-width:0 }
/* An extra's chip: the fill is neutral because the row is not a position, but the work-code strip on
   the left stays — it is still real duty, and the colour says what kind. */
.app .sch-cov.fill.sch-xtra { background:#f6f8fa;border-color:#dde3ea }
.app[data-theme="dark"] .sch-cov.fill.sch-xtra { background:#1C2530;border-color:var(--line) }

/* PENDING ADD TIME: dashed, because it is a request and not an assignment — nothing is on duty here
   yet, and a solid chip would read as somebody being there. */
.app .sch-xpend {
  appearance:none;-webkit-appearance:none;font:inherit;font-size:11.5px;font-weight:700;
  border:1.5px dashed #7a8494;border-radius:6px;background:var(--card);color:#4a5462;padding:6px 8px;
  min-height:40px;cursor:pointer;text-align:left;min-width:0;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis }
.app .sch-xpend:hover, .app .sch-xpend:focus-visible { border-color:var(--side);color:var(--side) }
.app[data-theme="dark"] .sch-xpend { color:#B6C2D1;border-color:#5a6778 }

/* THE OVERLAP MARK: two COUNTED people on one position at the same time. A top dashed line in the
   same amber as the overrun mark — the same family of "worth a look", on a different edge so the two
   facts never read as one. Both chips in an overlapping pair get it. */
.app .sch-cov.fill.ovl, .app .sch-occ.ovl { border-top:2px dashed #d99114 }
/* The mark on the position label when any pair on the row overlaps. #9A6A12 is 4.73:1 on white and
   the vetted #E6C072 is 9.71:1 on the night card. */
.app .sch-ovlmark { color:#9A6A12;font-weight:800;margin-left:4px;cursor:help }
.app[data-theme="dark"] .sch-ovlmark { color:#E6C072 }
.app .sch-todot { display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:5px;vertical-align:-1px }
.app [data-fltcard] .sch-railitem { flex-wrap:wrap;border-left:4px solid var(--wc,#3498db);border-radius:0 6px 6px 0 }
.app [data-fltcard] .sch-railitem .where { flex-basis:100%;order:3;margin-top:2px }
.app .sch-occ.co { opacity:.7;border-style:dashed }
.app .sch-occ.co .pn::before { content:"a9 ";color:#8a94a3 }
.app .sch-ovrchip { font-size:9px;font-weight:800;border-radius:4px;padding:1px 5px;background:#fdf3e4;border:1px solid #daa04c;color:#8a5a0a;white-space:nowrap }
.app .sch-cov.fill:hover { border-color:var(--side) }
.app .sch-cov.fill .tm { color:var(--muted) }
.app .sch-cov.vac { background:repeating-linear-gradient(45deg,#fdf3e4,#fdf3e4 6px,#fbeede 6px,#fbeede 12px);border:1px dashed #daa04c;color:var(--orange-ink) }
.app .sch-cov.vac:hover { border-color:var(--orange) }
/* Not required (Scheduling 5069): open time on a position that does not count toward minimum. Quiet, never the vacancy orange. */
.app .sch-cov.opt { background:transparent;border:1px dashed var(--line);color:var(--muted) }
.app .sch-cov.opt:hover { border-color:var(--muted);color:var(--text) }
.app .sch-openchip.opt { border-color:var(--line);background:transparent;color:var(--muted) }
.app .sch-openchip.opt:hover { border-color:var(--muted);color:var(--text) }
.app .sch-albl { font-size:9.5px;font-weight:800;letter-spacing:.04em;background:var(--navy);color:#fff;border-radius:4px;padding:1px 5px }
.app .sch-albl.ot { background:#c0392b }
.app .sch-albl.reg { background:#3498db }
.app .sch-albl.cbot { background:#d35400 }
.app .sch-albl.fto { background:#3498db }
.app .sch-albl.oic { background:#9b59b6 }
.app .sch-albl.act { background:#d35400 }
.app .sch-albl.det { background:#16a085 }
/* 13-107 / 13-109. Both say "present, seat still short", so neither takes a work-type colour: those
   mean "what this person is doing", and these mean "it does not count". Grey reads as inert, which
   is exactly right for an FTO. No-show is its own deep red rather than reusing .ot's #c0392b, so the
   two are not the same swatch with different words at 9.5px. */
/* #5F6B6C, not the #7F8C8D this started as: these chips are 9.5px BOLD, which is not "large text"
   by any definition, so they need 4.5:1. The lighter grey measured 3.48:1 and this measures 5.42. */
.app .sch-albl.nc { background:#5F6B6C }
.app .sch-albl.nsh { background:#922b21 }
.app .sch-needs { font-size:10.5px;font-weight:700;color:var(--under) }
.app .sch-vchip { font-size:9.5px;font-weight:800;border-radius:4px;padding:1px 6px;background:var(--card);border:1px solid var(--line) }
.app .sch-vchip.moveup { color:var(--over);border-color:#b9d2f1 }
.app .sch-vchip.callback { color:var(--orange-ink);border-color:#eccb9d }
.app .sch-vchip.holdover { color:var(--purple);border-color:#d9cdf3 }
.app .sch-tlwrap { overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-width:1320px }
.app .sch-tl { min-width:920px }
.app .sch-tlaxis { display:grid;grid-template-columns:190px 1fr;background:var(--navy);color:#fff }
.app .sch-tlaxis .corner { padding:9px 10px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em }
.app .sch-tlhours { position:relative;height:32px }
.app .sch-tlhours span { position:absolute;top:9px;font-family:var(--mono);font-size:10.5px;color:#b9c8de;transform:translateX(-50%) }
.app .sch-tlrow { display:grid;grid-template-columns:190px 1fr;border-top:1px solid var(--line-2) }
.app .sch-tlrow .rl { padding:8px 10px;font-weight:700;font-size:12.5px;display:flex;align-items:center;gap:8px }
.app .sch-tltrack { position:relative }
.app .sch-bar { position:absolute;height:28px;border-radius:5px;font-size:10.5px;font-weight:700;display:flex;align-items:center;gap:6px;padding:0 7px;overflow:hidden;white-space:nowrap;border:0;cursor:pointer;font-family:inherit }
.app .sch-bar.fill { background:var(--side);color:#fff }
.app .sch-bar.gap { background:repeating-linear-gradient(45deg,#f6dfc2,#f6dfc2 5px,#fbeede 5px,#fbeede 10px);color:var(--orange-ink);border:1px dashed #daa04c }
.app .sch-bar .bt { font-family:var(--mono);font-weight:600;opacity:.85 }
.app .sch-nowline { position:absolute;top:0;bottom:0;width:2px;background:var(--under) }
/* The mockup's global table rule (Chief360Scheduling.html 211-213). Bare tables only, and :where() keeps it below every module's own table rule. */
.app :where(table:not([class])) { width:100%;border-collapse:collapse;font-size:13px }
.app :where(table:not([class])) th { background:var(--surface);padding:10px 12px;text-align:left;font-weight:700;border-bottom:1px solid var(--line);color:var(--text) }
.app :where(table:not([class])) td { padding:10px 12px;border-bottom:1px solid var(--line-2) }
.app .sch-tscroll { overflow-x:auto;-webkit-overflow-scrolling:touch;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);max-width:1320px }
.app .sch-tscroll table { min-width:720px }
.app .sch-tscroll th { background:var(--navy);color:#fff;border-bottom:0 }
.app .sch-tscroll th .sh { display:inline-grid;place-items:center;width:18px;height:18px;border-radius:4px;background:#fff;color:var(--navy);font-size:10px;font-weight:800;margin-left:6px }
.app .sch-cellnames { display:block;color:var(--muted);font-size:11px;margin-top:2px }
.app .sch-mgrid td { vertical-align:top;height:60px }
.app .sch-mgrid .d { font-weight:800;display:block;margin-bottom:3px }
.app .sch-lanes { display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px;max-width:1320px }
.app .sch-lane { appearance:none;-webkit-appearance:none;font:inherit;text-align:left;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--side);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 12px;cursor:pointer;min-height:40px;color:var(--text) }
.app .sch-lane .n { display:block;font-size:22px;font-weight:800;line-height:1.1 }
.app .sch-lane .t { display:block;font-size:11.5px;font-weight:700;color:var(--muted);margin-top:2px }
.app .sch-lane.inherit { border-left-color:var(--under) }
.app .sch-lane.inherit .n { color:var(--under) }
.app .sch-lane .flag { font-size:10px;font-weight:800;color:#fff;background:var(--under);border-radius:10px;padding:1px 7px;margin-left:6px;vertical-align:3px }
.app .sch-kv { display:grid;grid-template-columns:110px 1fr;gap:5px 10px;font-size:12.5px;margin:0 }
.app .sch-kv dt { color:var(--muted);font-weight:700 }
.app .sch-kv dd { margin:0 }
.app .sch-tag { font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;background:var(--purple-soft);color:var(--purple);border-radius:4px;padding:2px 6px;white-space:nowrap }
.app .sch-elig { list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px }
.app .sch-elig li { display:flex;gap:8px;align-items:flex-start;font-size:12.5px }
.app .sch-elig .b { flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;line-height:1 }
.app .sch-elig .b svg { width:11px;height:11px }
.app .sch-elig .b.ok { background:#e1f3e9;color:var(--ok) }
.app .sch-elig .b.warn { background:#FFF4D6;color:#9A6A12 }
.app .sch-elig .b.bad { background:#fbe4e1;color:var(--under) }
.app .sch-elig .b.info { background:#e6f0fb;color:var(--over) }
.app .sch-mini { display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-size:10.5px;text-align:center }
.app .sch-mini .h { font-weight:800;color:var(--muted);text-transform:uppercase;font-size:9px;padding:2px 0 }
.app .sch-mini .c { border:1px solid var(--line-2);border-radius:5px;padding:3px 0 4px;font-weight:600;color:var(--text) }
.app .sch-mini .c.mine { background:var(--orange-soft);border-color:#f0d4b3;font-weight:800 }
.app .sch-mini .c .sd { display:block;width:7px;height:7px;border-radius:50%;margin:2px auto 0 }
.app .sch-life { display:flex;align-items:center;gap:6px;flex-wrap:wrap }
.app .sch-life .st { font-size:11px;font-weight:800;letter-spacing:.04em;border-radius:16px;padding:5px 12px;background:var(--line-2);color:var(--muted) }
.app .sch-life .st.done { background:#e1f3e9;color:var(--ok) }
.app .sch-life .st.on { background:var(--navy);color:#fff }
.app .sch-life .a { color:var(--muted);font-weight:700 }
.app .sch-dq { display:flex;flex-wrap:wrap;gap:8px }
.app .sch-dq button { appearance:none;-webkit-appearance:none;font:inherit;display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);border-radius:20px;padding:8px 13px;font-size:12px;font-weight:700;cursor:pointer;min-height:40px }
.app .sch-dq button:hover { border-color:var(--orange);color:var(--orange-ink) }
.app .sch-dq .n { font-family:var(--mono);font-weight:800;background:#fbe4e1;color:var(--under);border-radius:10px;padding:0 7px }
.app .sch-matrix th, .app .sch-matrix td { text-align:center }
.app .sch-matrix th:first-child, .app .sch-matrix td:first-child { text-align:left }
.app .sch-matrix td:first-child { font-family:var(--mono);font-size:11.5px }
.app .sch-matrix td svg { width:15px;height:15px;color:var(--ok);margin:0 auto }
.app .sch-matrix .no { color:#c6ccd4;font-weight:700 }
.app .sch-fgrid { display:grid;grid-template-columns:1fr 1fr;gap:12px 16px }
/* chief360.css spaces .c3-field + .c3-field by 14px, which drops the second cell of a grid row (5088). */
.app .sch-fgrid > .c3-field { margin-top:0 }
.app .sch-full { grid-column:1/-1 }
.app .sch-field { display:flex;flex-direction:column;gap:5px }
.app .sch-field label { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--muted) }
.app .sch-field select, .app .sch-field input[type=text], .app .sch-field input[type=search], .app .sch-field input[type=number], .app .sch-field input[type=date], .app .sch-field textarea { border:1px solid var(--line);border-radius:7px;padding:9px 10px;font-size:13px;background:var(--input-bg);font-family:inherit;min-height:40px;color:var(--text) }
.app .sch-field textarea { min-height:64px;resize:vertical }
.app .sch-choices { display:flex;flex-wrap:wrap;gap:7px }
.app .sch-choice { appearance:none;-webkit-appearance:none;font:inherit;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 12px;font-size:12.5px;font-weight:700;cursor:pointer;min-height:40px;color:var(--text) }
.app .sch-choice.on { border-color:var(--orange);background:var(--orange-soft);color:var(--orange-ink) }
/* A footer button that TOGGLES a pane (Put on rotation) needs the pressed state the pane's own
   presence does not give it — the pane opens above the footer, where the button is not looking.
   Same ink as sch-choice.on so one dialog has one idea of "this is the one that is open". */
.app .dlg-foot .btn.on { border-color:var(--orange);background:var(--orange-soft);color:var(--orange-ink) }
.app .sch-presets { display:grid;grid-template-columns:repeat(4,1fr);gap:10px }
.app .sch-preset { appearance:none;-webkit-appearance:none;font:inherit;text-align:left;border:1px solid var(--line);border-radius:9px;background:var(--card);padding:11px 12px;cursor:pointer;color:var(--text) }
.app .sch-preset[disabled] { opacity:.55;cursor:not-allowed;background:#f6f8fb }
.app .sch-preset .nm { font-weight:800;font-size:12.5px }
.app .sch-preset .d { color:var(--muted);font-size:11.5px;margin-top:2px }
.app .sch-preset .code { font-family:var(--mono);font-size:10px;color:var(--muted);display:block;margin-top:4px }
.app .sch-preset.on { border-color:var(--orange);background:var(--orange-soft) }
.app .sch-timer { font-family:var(--mono);font-weight:800;color:var(--under) }
.app .sch-editacts { display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px }
.app .sch-stage { display:flex;align-items:stretch;gap:16px }
.app .sch-stage .sch-board { flex:1;min-width:0;max-width:none }
/* The 4/7 Day table and its caption are ONE flex child. Without this they were two, so the
   caption became a narrow column beside the table instead of a line under it. min-width:0 is
   what lets the table scroll inside the flex row rather than stretching it. */
.app .sch-stage>.sch-mdwrap { flex:1 1 0;min-width:0 }
.app .sch-rail { width:288px;flex:none;display:flex;flex-direction:column;gap:16px;order:99;background:var(--card);border:1px solid var(--line);border-top:0;border-right:0;border-radius:0;box-shadow:var(--shadow),24px 0 0 0 var(--card);padding:14px;margin:-16px -22px 0 0 }
.app .sch-stage>[id^="sch-board-"] { flex:1 1 0;min-width:0 }
.app .sch-rail h4 { margin:0 0 7px;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);display:flex;align-items:center;justify-content:space-between }
.app .sch-rail .cnt { font-family:var(--mono);font-weight:800;color:#fff;background:var(--under);border-radius:20px;font-size:10px;padding:1px 8px }
.app .sch-railcard { background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);overflow:visible }
.app .sch-railitem { display:flex;align-items:center;gap:8px;padding:8px 10px;border-top:1px solid var(--line-2);font-size:12px;position:relative }
.app .sch-railitem:first-child { border-top:0 }
.app .sch-railitem .nm { font-weight:600;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.app .sch-railitem .where { font-family:var(--mono);font-size:10px;color:var(--muted) }
.app .sch-railitem.vac { background:#fdf6e8 }
/* A REAL schedule name is longer than a mockup's: "Career Staff Station 12 · Driver — MPO", not
   "Engine 6 · driver". On one line the name collapses to "Ca…" and the row says nothing at all,
   which is worse than the row being taller. The window and qualifications drop to a second line. */
/* Manager Board: what approving a queued decision would cost. Two levels, because they are two
   different statements — this decision takes a unit under its minimum, versus a unit that is
   already under it gets worse. Colour alone never carries it: the sentence says which. */
.app .wd-impact-breach { color:var(--under); font-weight:700 }
.app .wd-impact-short { color:var(--orange-ink); font-weight:600 }

.app .sch-railitem.vac { flex-wrap:wrap }
.app .sch-railitem.vac .where { flex-basis:100%; order:3; margin-top:2px }
.app button.sch-railitem { appearance:none;-webkit-appearance:none;border:0;border-top:1px solid var(--line-2);width:100%;background:none;font:inherit;text-align:left;cursor:pointer;color:inherit }
.app button.sch-railitem:first-child { border-top:0 }
.app button.sch-railitem:hover { background:#f6f8fb }
.app .sch-drop { border:1.5px dashed var(--line);border-radius:8px;padding:12px;text-align:center;color:var(--muted);font-size:11.5px;font-weight:600;background:var(--card) }
/* Armed while a drag is over it. A drop target that does not change when you are on it leaves people
   releasing the mouse hopefully — and the dashed box is easy to miss at the foot of a long rail. */
.app .sch-drop.over { border-color:var(--orange);border-style:solid;background:var(--orange-soft);color:var(--orange-ink) }
/* A draggable row says so on hover. Grab, not pointer: these are also click-to-edit, so the cursor is
   the only hint that dragging is a second thing they do. */
.app .sch-railitem[draggable="true"]:hover,
.app .sch-occ[draggable="true"]:hover { cursor:grab }
.app .sch-vacpill { display:inline-flex;align-items:center;gap:8px;background:var(--orange);border:0;color:#fff;font-weight:700;font-size:12.5px;padding:7px 13px;border-radius:20px;cursor:pointer;min-height:40px;font-family:inherit }
.app .sch-vacpill .dot { width:7px;height:7px;border-radius:50%;background:#fff }
.app .sch-pub { font-size:9.5px;font-weight:800;letter-spacing:.05em;border-radius:4px;padding:2px 7px;text-transform:uppercase }
/* Same 4.31:1 -> 5.10:1 correction as .sch-dr, and the same amber: two chips a few pixels apart
   that mean the same thing should not be two different inks. */
.app .sch-pub.draft { background:#FFF4D6;color:#8C5F0E;border:1px solid #eccfa3 }
.app .sch-pub.published { background:#e1f3e9;color:var(--ok);border:1px solid #bfe4cd }
.app .sch-pub.mixed { background:#FFF4D6;color:#9A6A12;border:1px solid #eccfa3;font-family:var(--mono) }
/* #9A6A12 measured 4.31:1 on this fill, and at 9px uppercase the 4.5:1 floor applies. #8C5F0E is
   5.10:1, the same amber a shade down. It matters more now than it did: rev 2.76 makes this tag the
   first thing on the row rather than one chip among the labels. */
.app .sch-dr { font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:4px;padding:1px 5px;background:#FFF4D6;color:#8C5F0E;border:1px dashed #d9b26a }

/* A DRAFT SEGMENT IS DRAWN DASHED AND FADED (mockup rev 2.76). The tag alone was not enough: on a
   full board it is one small chip among the labels, and a chief scanning for what the crew can
   actually see had to read every row.

   THE FADE IS ON THE FILL, NOT THE ELEMENT. `opacity` was the obvious way to write this and it is
   wrong: it drags the TEXT toward the background too, and the smallest type on the board is the
   9.5px mono time pill. Measured, compositing the whole alpha chain: at opacity .72 that pill fell
   to 2.94:1 in light mode, and no opacity fixed it — .84 still only reached 3.75:1.

   A veil laid over the background instead gives the same faded read and leaves every text colour
   where the designer put it. Measured after the change: the name is 14.7:1 and the time pill 5.7:1
   in light, 14.5:1 and 7.6:1 in dark — all at or above their unfaded values, because lightening the
   fill helps the text rather than hurting it.

   The outline is an inset shadow rather than `border`, because each of these elements already has a
   border whose colour comes from the work type; replacing it would throw that away. */
.app .sch-occ.draft,
.app .sch-cov.fill.draft,
.app .sch-railitem.draft {
  box-shadow:inset 0 0 0 1.5px #d9b26a;
  background-image:linear-gradient(rgba(255,255,255,.55),rgba(255,255,255,.55));
}
/* Dark mode veils with black: a white veil there would lift the row off the night surface, which
   reads as emphasis rather than as "not published yet". */
.app[data-theme="dark"] .sch-occ.draft,
.app[data-theme="dark"] .sch-cov.fill.draft,
.app[data-theme="dark"] .sch-railitem.draft {
  background-image:linear-gradient(rgba(0,0,0,.30),rgba(0,0,0,.30));
}
.app .sch-pubbar { display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r);box-shadow:var(--shadow);padding:9px 13px;margin-bottom:14px;font-size:12.5px }
.app .sch-det { flex:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--line);color:var(--muted);font-size:10px;font-weight:800;font-style:italic;display:grid;place-items:center;font-family:var(--mono);background:var(--card) }
.app .sch-cov.fill:hover .sch-det, .app .sch-cov.fill:focus-visible .sch-det { border-color:var(--side);color:var(--side) }
.app .sch-hover { position:fixed;z-index:120;display:none;background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 30px rgba(16,23,38,.18);padding:11px 13px;min-width:250px;max-width:320px;pointer-events:none }
.app .sch-hover.on { display:block }
.app .sch-hover .hr2 { display:flex;gap:10px;padding:4px 0;align-items:flex-start }
.app .sch-hover .k { font-size:9.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;min-width:62px;padding-top:3px }
.app .sch-hover .v { font-size:12px;display:flex;flex-wrap:wrap;gap:4px }

/* THE 30 DAY DAY-CARD: a whole day's roster rather than one person's details, so it is wider. NOT
   scrollable — .sch-hover is pointer-events:none so the card never blocks the board, which also means
   a scrollbar on it would not respond. The page caps the lines per schedule and says "+N more"
   instead, which is honest about there being more; clipping would hide the openings, and they are
   drawn last. */
.app .sch-dayhover { min-width:290px;max-width:380px }
.app .sch-dayhover .sch-dayhead {
  font-weight:800;font-size:12.5px;padding-bottom:7px;margin-bottom:7px;
  border-bottom:1px solid var(--line-2);color:var(--text) }
.app .sch-dayhover .sch-dayblk + .sch-dayblk { margin-top:9px;padding-top:9px;border-top:1px solid var(--line-2) }
.app .sch-dayhover .sch-dayblk .hd { display:flex;align-items:center;gap:8px;font-size:12px;margin-bottom:3px }
.app .sch-dayhover .sch-dayblk .hd b { flex:1;min-width:0 }
.app .sch-dayhover .ln { display:flex;gap:8px;font-size:11.5px;padding:1px 0 }
.app .sch-dayhover .ln .nm { flex:1;min-width:0 }
.app .sch-dayhover .ln .tm { font-size:10.5px;color:var(--muted) }
/* An opening is the thing worth seeing on a future day, so it is not grey like the rest. */
.app .sch-dayhover .ln.open .nm { color:var(--under);font-weight:700 }
.app[data-theme="dark"] .sch-dayhover .ln.open .nm { color:#F0A79B }
.app .sch-bdg { font-family:var(--mono);font-size:10px;font-weight:700;padding:1px 5px;border-radius:4px;border:1px solid;letter-spacing:.02em;line-height:1.5 }
.app .sch-vtag { font-size:11px;background:var(--surface);border:1px solid var(--line-2);border-radius:5px;padding:1px 7px }
.app .sch-legend { display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:16px;padding:10px 13px;background:var(--card);border:1px solid var(--line);border-radius:var(--r);font-size:11.5px;color:var(--muted);box-shadow:var(--shadow) }
.app .sch-legend .li { display:flex;align-items:center;gap:6px;font-weight:600 }
.app .sch-legend .sw { width:13px;height:13px;border-radius:3px;border:1px solid rgba(0,0,0,.08) }
.app .sch-legend .note2 { margin-left:auto;font-style:italic;color:var(--muted) }
/* FIXED LAYOUT, so the day columns are equal. Brooks: "The columns for the 4-day view are not
   balanced." Without table-layout:fixed a table sizes columns to their CONTENT, so one day holding
   "Battalion Chief 12" took twice the width of a day holding "Engine 6" — four tours you cannot
   compare at a glance, which is the only reason to put them side by side.

   The row label gets an explicit width; the day columns then divide the remainder evenly whatever is
   in them. Content has to be told to wrap once the width stops stretching to fit it. */
.app .sch-md { border-collapse:collapse;width:100%;table-layout:fixed }
.app .sch-md th, .app .sch-md td { border:1px solid var(--line-2);vertical-align:top }
.app .sch-md .rowlabel { width:190px }
/* overflow-wrap rather than word-break: it breaks a long word only when it has to, instead of
   chopping every name at the column edge. */
.app .sch-md td .sch-occ,
.app .sch-md td .sch-openchip { overflow-wrap:anywhere }
.app .sch-md td .sch-occ .pn { overflow-wrap:anywhere }
@media (max-width:1100px) { .app .sch-md .rowlabel { width:140px } }
.app .sch-hist { font-size:12px;color:var(--muted);display:flex;flex-direction:column;gap:5px;margin-top:4px }
.app .sch-mymonth td { vertical-align:top }
.app .sch-my { display:block;width:100%;text-align:left;border:0;font:inherit;cursor:pointer;border-radius:5px;padding:4px 7px;margin:3px 0;font-size:10.5px;line-height:1.35;color:#0d2436 }
.app .sch-my b { display:block;font-size:10.5px }
.app .sch-my.bb { background:#bfe0f7 }
.app .sch-my.sal { background:#d7ee9d }
.app .sch-my.ot { background:#f7597d;color:#fff }
.app .sch-my .t { font-family:var(--mono);font-size:9.5px }
.app .sch-mykey { width:11px;height:11px;border-radius:3px;display:inline-block;margin-right:-8px }
.app .sch-mykey.bb { background:#bfe0f7 }
.app .sch-mykey.sal { background:#d7ee9d }
.app .sch-mykey.ot { background:#f7597d }
/* My Schedule's legend is Shift / Time off / Trade pending; the mockup's sheet only colours its demo agencies
   (bb, sal). Shift uses bb's blue, time off sal's green, a pending trade amber. */
.app .sch-my.off, .app .sch-mykey.off { background:#d7ee9d }
.app .sch-my.trade, .app .sch-mykey.trade { background:#fde3a7 }
/* The mockup's .btn.sm, scoped to My Schedule so pages already approved at the base size keep it. */
.app .sch-mysched .btn.sm { padding:5px 11px;font-size:12.5px }
.app .sch-mysched .btn.xs { padding:3px 8px;font-size:11.5px }
.app .sch-mysched .w-foot { display:flex;align-items:center;gap:10px }

/* ── My Account › Agencies (Chief360UserProfile mockup revision 4, bus 5016) ──────────────────────────────────
   Ported from the mockup's .up-* rules, which are prefixed so they cannot collide. Left out: .up-tabs (the page
   keeps its Chief360Segmented), the mockup-only persona switch, and the member keyword dialog (not built yet).
   The Add agency rows borrow the template's .agrow, scoped here under .up-dir. */
.app .up-wrap { max-width:1100px;display:flex;flex-direction:column;gap:16px;margin-top:14px }
.app .up-sr { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0 }
.app .up-intro { margin:0;color:var(--muted);max-width:760px }
.app .up-card { background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden }
.app .up-cardhead { display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;border-bottom:1px solid var(--line) }
.app .up-cardhead h2 { margin:0;font-size:15px }
.app .up-cardhead .up-count { color:var(--muted);font-size:12.5px }
.app .up-cardhead .up-tools { margin-left:auto;display:flex;gap:8px;align-items:center;flex-wrap:wrap }
.app .up-search { position:relative;width:260px;max-width:100%;display:block }
.app .up-search svg { position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted) }
.app .up-search input { width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px 8px 32px;font:inherit;font-size:13px;min-height:38px;background:var(--card);color:var(--text) }
.app .up-search input:focus { outline:none;border-color:var(--orange) }
.app .up-listbar { display:flex;align-items:center;gap:12px;flex-wrap:wrap }
.app .up-listbar .up-search { width:360px }
.app .up-listbar .up-count { color:var(--muted);font-size:12.5px }
.app .up-pager { display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line-2);font-size:12.5px;color:var(--muted) }
.app .up-pager .up-pgbtns { margin-left:auto;display:flex;align-items:center;gap:8px }
.app .up-pager .up-pgno { color:var(--text);font-weight:600;min-width:84px;text-align:center }
.app .up-pager .btn:disabled { opacity:.45;cursor:not-allowed;filter:none }
.app .up-cardnote { padding:10px 14px;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line-2);background:var(--surface) }
.app .up-scroll { overflow-x:auto }
.app .up-empty { padding:22px 14px;color:var(--muted);text-align:center }
.app .up-tbl { width:100% }   /* fills its card (Brooks 2026-10-30: the columns stopped two-thirds across) */
.app .up-tbl td { vertical-align:middle }
.app .up-tbl th.up-pri, .app .up-tbl td.up-pri { width:84px;text-align:center }
.app .up-tbl th.up-act, .app .up-tbl td.up-act { width:190px;text-align:right }
.app .up-tbl tr.up-isprimary { background:var(--surface) }
.app .up-radio { display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer }
.app .up-radio:hover { background:var(--orange-soft) }
.app .up-radio input { width:18px;height:18px;margin:0;accent-color:var(--orange);cursor:pointer }
.app .up-radio input:disabled { cursor:not-allowed }
.app .up-radio.off { cursor:not-allowed }
.app .up-radio.off:hover { background:none }
.app .up-ag { display:flex;align-items:center;gap:11px;min-width:0 }
.app .up-coin { width:34px;height:34px;flex:none;border-radius:50%;background:var(--side);color:var(--card);display:grid;place-items:center;font-weight:800;font-size:11px }
.app .up-coin.dim { background:var(--muted) }
.app .up-n { font-weight:700;display:block }
.app .up-s { color:var(--muted);font-size:12px;display:block }
.app .up-pills { display:flex;gap:5px;flex-wrap:wrap }
.app .up-staffhead { color:var(--purple) }
.app .up-flash { display:none;align-items:center;gap:10px;background:var(--card);border:1px solid var(--ok);border-left-width:4px;color:var(--ok);border-radius:8px;padding:10px 12px;font-size:13px }
.app .up-flash.on { display:flex }
.app .up-flash svg { width:16px;height:16px;flex:none }
.app .up-flash.warn { background:var(--orange-soft);border-color:var(--orange);color:var(--orange-ink) }
.app .up-step { font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:700;margin:4px 0 8px }
.app .up-dir { display:flex;flex-direction:column;max-height:300px;overflow:auto;margin-bottom:6px }
.app .up-dir .agrow { display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer;width:100%;text-align:left;font:inherit;background:var(--card);color:inherit;min-height:52px }
.app .up-dir .agrow:hover { border-color:var(--orange);background:var(--orange-soft) }
.app .up-dir .agrow[aria-pressed="true"] { border-color:var(--orange);background:var(--orange-soft) }
.app .up-dir .agrow:disabled { cursor:default;opacity:.62 }
.app .up-dir .agrow:disabled:hover { border-color:var(--line);background:var(--card) }
.app .up-dir .agmeta { flex:1;min-width:0 }
.app .up-wrap .btn.sm, .app .up-dir ~ .dlg-foot .btn.sm { padding:5px 11px;font-size:12.5px }
@media (max-width:1100px) {
  .app .up-tbl th.up-act, .app .up-tbl td.up-act { width:160px }
}
@media (max-width:900px) {
  .app .up-search { width:220px }
  .app .up-listbar .up-search { width:300px }
}
@media (max-width:760px) {
  .app .up-cardhead .up-tools { margin-left:0;width:100% }
  .app .up-search { flex:1;width:auto }
  .app .up-listbar .up-search { flex:1 1 100%;width:auto }
}
@media (max-width:560px) {
  .app .up-search input { min-height:40px }
  .app .up-tbl thead { display:none }
  .app .up-tbl, .app .up-tbl tbody { display:block }
  .app .up-tbl tr { display:grid;grid-template-columns:44px 1fr;gap:4px 8px;padding:10px 12px;border-bottom:1px solid var(--line-2) }
  .app .up-tbl td { display:block;padding:0;border:0 }
  .app .up-tbl td.up-pri { width:auto;grid-row:span 2;align-self:center }
  .app .up-tbl td.up-act { width:auto;grid-column:2;text-align:left }
  .app .up-tbl td.up-act:empty { display:none }
  .app .up-tbl .btn.sm, .app .up-pager .btn.sm { min-height:40px;padding:0 14px }
  .app .up-pager .up-range { flex:1 1 100% }
  .app .up-pager .up-pgbtns { margin-left:0;width:100%;justify-content:space-between }
  .app .up-cardhead .up-tools .btn { flex:1;justify-content:center;min-height:40px }
}
.app .sch-divcap { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);margin:0 0 6px;display:flex;align-items:baseline;gap:8px }
.app .sch-divcap small { font-weight:600;text-transform:none;letter-spacing:0;font-family:var(--mono);font-size:10px }
.app .sch-md .dayhead { padding:0;background:var(--navy);border-bottom:0 }
.app .sch-md .dayhead .accent { display:block;height:4px }
.app .sch-md .dayhead .dl { display:block;padding:7px 10px;font-weight:800;font-size:12.5px;text-align:center;color:#fff }
.app .sch-md .dayhead .dl small { display:block;font-family:var(--mono);font-weight:600;color:#9fb0c6;font-size:10px }
.app .sch-md .rowlabel { width:150px;background:var(--navy);color:#fff;padding:9px 12px;font-weight:700;font-size:12.5px;border-bottom:1px solid #2a4265 }
.app .sch-md .rowlabel small { display:block;font-family:var(--mono);font-weight:600;color:#9fb0c6;font-size:10px }
.app .sch-md .cell { padding:5px;min-width:142px }
.app .sch-occ { display:flex;align-items:center;gap:5px;flex-wrap:wrap;padding:3px 6px;border-radius:5px;margin-bottom:3px;font-size:11px;background:#eef4fb;border:1px solid #d3e2f2;border-left:3px solid var(--wc,#3498db);color:var(--text) }
.app .sch-occ:last-child { margin-bottom:0 }
.app .sch-occ .pn { font-weight:600;min-width:0;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.app .sch-occ .tm { font-family:var(--mono);font-size:9.5px;color:var(--muted);background:rgba(255,255,255,.8);padding:0 5px;border-radius:4px }
.app .sch-occ .sch-albl { font-size:8.5px;padding:0 5px }
.app .sch-occ.vac { background:repeating-linear-gradient(45deg,#fdf3e4,#fdf3e4 6px,#fbeede 6px,#fbeede 12px);border:1px dashed #daa04c;color:var(--orange-ink);font-weight:700 }
.app .sch-month { border-collapse:collapse;width:100%;table-layout:fixed }
.app .sch-month th { background:var(--navy);color:#fff;font-size:10.5px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:8px;border-bottom:0 }
.app .sch-month td { border:1px solid var(--line-2);vertical-align:top;height:112px;padding:0;width:14.28% }
.app .sch-mcell { padding:5px 6px;height:100%;display:flex;flex-direction:column;gap:2px }
.app .sch-mcell .dnum { display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-weight:700;color:var(--muted);font-size:11.5px }
.app .sch-mcell .dnum .add { color:var(--side);font-weight:800;cursor:pointer;border:0;background:0;font-family:var(--mono);font-size:13px;line-height:1;padding:0 2px }
.app .sch-mcell.out { background:#f7f8fb }
.app .sch-mcell.today { box-shadow:inset 0 0 0 2px var(--side) }
.app .sch-mrow { display:flex;align-items:center;justify-content:space-between;gap:4px;font-size:10px;font-weight:600 }
.app .sch-mrow .nm { white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text) }
.app .sch-mcount { font-family:var(--mono);font-weight:700;font-size:9px;padding:0 5px;border-radius:20px;color:#fff;flex:none }
.app .sch-mcount.ok { background:var(--ok) }
.app .sch-mcount.under { background:var(--under) }
.app .sch-mcount.over { background:var(--over) }
.app .sch-tltrack { background-image:repeating-linear-gradient(90deg,transparent,transparent calc(100%/24 - 1px),var(--line-2) calc(100%/24 - 1px),var(--line-2) calc(100%/24)) }
.app .sch-nowline::before { content:"NOW";position:absolute;top:-1px;left:3px;font-family:var(--mono);font-size:8px;font-weight:800;color:#fff;background:var(--under);padding:0 4px;border-radius:3px }
.app .sch-bar .mini { font-family:var(--mono);font-size:8.5px;background:rgba(255,255,255,.25);padding:0 4px;border-radius:3px }
.app .sch-bar.gap .mini { background:rgba(0,0,0,.08) }
.app .sch-otc { font-family:var(--mono);font-size:9.5px;font-weight:800;border-radius:4px;padding:1px 6px;border:1px solid;white-space:nowrap }
.app .sch-otc.reg { background:#eceff3;color:var(--muted);border-color:var(--line) }
.app .sch-otc.flsa { background:#fbeede;color:var(--orange-ink);border-color:#eccb9d }
.app .sch-otc.contract { background:var(--purple-soft);color:var(--purple);border-color:#d9cdf3 }
.app .sch-setupgrid { display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px }
.app .sch-sucard { border:1px solid var(--line);border-radius:9px;background:var(--card);padding:13px 14px;display:flex;flex-direction:column;gap:7px }
.app .sch-sucard.sec { background:#f8fafc }
.app .sch-sucard .t { display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px }
.app .sch-sucard .t .ic { color:var(--orange);display:grid;place-items:center }
.app .sch-sucard .t .ic svg { width:16px;height:16px }
.app .sch-sucard .d { margin:0;font-size:12px;color:var(--muted);flex:1 }
.app .sch-sucard .m { font-size:11px;font-weight:700;color:var(--muted) }
.app .sch-sucard .a { margin-top:2px }
.app .sch-backbar { display:flex;align-items:center;gap:10px;margin-bottom:12px }
.app .sch-backbar .lbl { font-size:12px;font-weight:700;color:var(--muted) }
.app .sch-subhead { margin:16px 0 8px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted) }
.app .sch-selrow td { background:var(--orange-soft) }
.app .sch-swatch { display:inline-grid;place-items:center;min-width:26px;height:22px;padding:0 5px;border-radius:5px;font-size:10.5px;font-weight:800;vertical-align:middle }
.app .sch-swatchrow { display:flex;align-items:center;gap:8px }
.app .sch-drag { color:#c6ccd4;font-weight:800;letter-spacing:-2px;cursor:grab;user-select:none }
.app .sch-patrow { display:flex;gap:5px;margin-top:10px }
.app .sch-patbox { flex:none;width:46px;border:1px solid var(--line);border-radius:6px;padding:5px 0 6px;text-align:center;font-size:12px;font-weight:800;color:var(--muted);background:#f6f8fb }
.app .sch-patbox i { display:block;font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.05em;margin-top:2px }
.app .sch-patbox.on { background:var(--orange-soft);border-color:#f0d4b3;color:var(--orange-ink) }
.app .sch-comp { display:flex;align-items:baseline;gap:9px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:8px 11px;margin-bottom:6px;font-size:12.5px }
.app .sch-comp .n { flex:none;font-weight:800;color:var(--orange-ink) }
.app .sch-comp .m { font-weight:800;font-size:12px }
.app .sch-comp .p { color:var(--muted);font-size:12px }
.app .sch-tier { display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:9px 12px;margin-bottom:6px }
.app .sch-tier .n { flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--line-2);font-size:11.5px;font-weight:800;color:var(--muted) }
.app .sch-tier.coerce { background:#fdf6ee;border-color:#eccb9d }
.app .sch-tier.coerce .n { background:#fbeede;color:var(--orange-ink) }
.app .sch-tier .tm { flex:1;min-width:0 }
.app .sch-tier .tt { font-weight:800;font-size:12.5px;display:flex;align-items:center;gap:7px;flex-wrap:wrap }
.app .sch-tier .td { color:var(--muted);font-size:12px;margin-top:1px }
.app .sch-callout { margin-top:14px;border:1px solid #d9cdf3;background:var(--purple-soft);border-radius:8px;padding:10px 12px;font-size:12.5px }
.app .sch-kv-wide { grid-template-columns:230px 1fr }
.app .sch-patmini { display:inline-flex;gap:2px;flex-wrap:wrap;max-width:260px;vertical-align:middle }
.app .sch-patmini i { width:12px;height:12px;border-radius:3px;background:#eceff3;border:1px solid var(--line-2);font-style:normal }
.app .sch-patmini i.on { background:var(--orange);border-color:var(--orange) }
.app .sch-tsin { border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:12px;min-height:34px;width:100%;min-width:90px;background:var(--input-bg);color:var(--text) }
.app .sch-tsin.hrs { min-width:70px;width:70px;font-family:var(--mono) }
.app .sch-or { display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;margin:2px 0 }
.app .sch-or::before, .app .sch-or::after { content:"";flex:1;height:1px;background:var(--line) }
.app .sch-fi { display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;min-width:15px;padding:0;border-radius:50%;border:1px solid var(--line);color:var(--muted);background:var(--card);font-size:10px;font-weight:700;line-height:1;cursor:help;vertical-align:middle;margin-left:4px;font-family:inherit }
.app .sch-fi:hover, .app .sch-fi:focus-visible { color:var(--orange);border-color:var(--orange) }
.app .sch-choice[disabled] { opacity:.55;cursor:not-allowed }

@media (max-width:760px) {
  .app .sch-addcols { grid-template-columns:1fr }
}

@media (max-width:760px) {
  .app .sch-pane>.sch-toolbar:first-child { margin:-14px -14px 14px;padding:10px 14px }
}

@media (max-width:760px) {
  .app .sch-ico { width:40px;height:40px }
}

@media (max-width:560px) {
  .app .sch-fltpop { position:fixed;left:12px;right:12px;top:auto;width:auto }
}

@media (max-width:760px) {
  .app .sch-board.showpos .sch-poslbl { width:56px;font-size:8.5px;letter-spacing:.02em }
}

@media (max-width:760px) {
  .app .sch-cov .mt { flex-wrap:wrap }
}

@media (max-width:1100px) {
  .app .sch-lanes { grid-template-columns:repeat(2,1fr) }
  .app .sch-presets { grid-template-columns:1fr 1fr }
  /* rev 2.85 (Brooks: "At the bottom is fine."): the rail drops under the boards instead of hiding. */
  .app .sch-stage { flex-direction:column }
  .app .sch-rail { width:auto;margin:0;border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow) }
}

@media (max-width:900px) {
  .app .sch-toolbar { gap:8px }
  .app .sch-datenav .lab { min-width:110px }
  .app .sch-tl { min-width:860px }
  .app .sch-tscroll table { min-width:640px }
  .app .sch-tscroll .sch-md { min-width:760px }
  .app .sch-tscroll .sch-month { min-width:700px }
  .app .sch-legend .note2 { margin-left:0;flex-basis:100% }
}

@media (max-width:760px) {
  .app .sch-strip { flex-direction:column }
  .app .sch-cov { width:100% }
  .app .sch-fgrid { grid-template-columns:1fr }
  .app .sch-kv-wide { grid-template-columns:1fr }
  .app .sch-kv-wide dd { margin-bottom:6px }
  .app .sch-comp { flex-wrap:wrap }
  .app .sch-tier { align-items:flex-start }
  .app .sch-presets { grid-template-columns:1fr }
  .app .sch-lanes { grid-template-columns:1fr 1fr }
}

@media (max-width:560px) {
  .app .sch-lanes { grid-template-columns:1fr }
  .app .sch-seg { overflow-x:auto;max-width:100% }
  .app .sch-datenav .lab { min-width:90px;font-size:12px }
  .app .sch-kv { grid-template-columns:96px 1fr }
  .app .sch-pubbar { font-size:12px }
  .app .sch-vacpill { padding:7px 11px }
}

@media (max-width:760px) {
  .app .sch-fi { width:22px;height:22px;min-width:22px;font-size:12px }
}

/* ========================================================================
   DISPATCH AGENCY MANAGEMENT (Chat 18) — ported from DispatchAgencyManagement.html; 32 of its 37 dm-* classes were missing from this sheet
   ======================================================================== */

.app .dm-layout { display:flex;gap:16px;align-items:flex-start;max-width:1320px }
.app .dm-rail { width:196px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:0 }
.app .dm-railhead { background:var(--black);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:9px 13px }
.app .dm-cap { background:#f3f6fa;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:8px 13px 6px }
.app .dm-cap:first-child { padding-top:10px }
.app .dm-item { display:flex;align-items:center;padding:9px 13px;color:var(--text);text-decoration:none;font-weight:600;font-size:12.5px;border-left:3px solid transparent;border-bottom:1px solid var(--line-2);cursor:pointer;background:none;width:100%;text-align:left;border-top:0;border-right:0;font:inherit }
.app .dm-item:hover { background:var(--orange-soft) }
.app .dm-item.on { background:var(--card);border-left-color:var(--orange);color:var(--orange-ink) }
.app .dm-item .n { margin-left:auto;font-size:10px;font-weight:800;color:#fff;background:var(--under);border-radius:20px;padding:1px 6px }
.app .dm-main { flex:1;min-width:0;display:flex;flex-direction:column;gap:16px }
.app .dm-panel { display:none;flex-direction:column;gap:16px }
.app .dm-panel.on { display:flex }
.app .dm-toolbar { display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--line-2);background:var(--card);flex-wrap:wrap }
.app .dm-search { flex:1;max-width:260px;border:1px solid var(--line);border-radius:7px;padding:7px 10px;font-size:12.5px;font:inherit }
.app .dm-search:focus { outline:none;border-color:var(--orange) }
.app .dm-seg { display:flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;flex:none }
.app .dm-seg button { border:0;background:var(--card);padding:6px 11px;font-size:12px;font-weight:600;color:var(--muted);cursor:pointer;border-left:1px solid var(--line) }
.app .dm-seg button:first-child { border-left:0 }
.app .dm-seg button.on { background:var(--orange-soft);color:var(--orange-ink) }
.app .dm-hint { padding:10px 13px;color:var(--muted);font-size:12.5px;border-bottom:1px solid var(--line-2);background:#fbfcfe }
.app .dm-chips { display:flex;gap:5px;flex-wrap:wrap }
/* THREE CLASSES THAT HAD NO RULE AT ALL. tools/ParamCheck/classcheck.py reported dm-geojson and
   dm-map-placeholder: the geofence GeoJSON box and the unit bulk-preload box were rendering as bare
   browser textareas — proportional font, default border, ignoring the theme — and the map
   placeholder was an unstyled line of text rather than a surface. Nothing errored; they just looked
   like somebody had forgotten them, which is exactly what had happened. dm-bulk is the new import
   box and shares the rule rather than adding a fourth lookalike. */
.app .dm-geojson, .app .dm-bulk {
  width:100%;font-family:var(--mono);font-size:12px;line-height:1.5;padding:9px 10px;
  border:1px solid var(--line);border-radius:7px;background:var(--input-bg);color:var(--text);
  resize:vertical }
.app .dm-geojson:focus, .app .dm-bulk:focus { outline:2px solid var(--side-hi);outline-offset:-1px }
/* Monospace on purpose: both are one-record-per-line, and a proportional font hides a stray space
   at the end of a line, which is the difference between creating a value and matching one. */
.app .dm-map-placeholder {
  display:grid;place-items:center;min-height:180px;padding:16px;text-align:center;
  border:1.5px dashed var(--line);border-radius:8px;background:var(--surface);
  color:var(--muted);font-size:12.5px;font-weight:600 }
.app .dm-chip { font-size:11px;font-weight:600;background:#eef3f9;color:#2c496b;border:1px solid #d7e3f0;border-radius:6px;padding:2px 8px }
.app .dm-chip.raw { background:#f4f0ea;color:#6a5636;border-color:#e4dcce;font-family:var(--mono) }
.app .dm-chip .rm { margin-left:4px;cursor:pointer;color:#8a929c;font-weight:800 }
.app .dm-chip .rm:hover { color:var(--under) }
.app .dm-swatch { display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:7px;vertical-align:middle }
.app .dm-qadd { display:inline-flex;gap:5px;flex-wrap:wrap }
.app .dm-qbtn { border:1.5px solid;border-radius:16px;padding:3px 9px;font-size:11px;font-weight:800;cursor:pointer;background:var(--card) }
.app .dm-qbtn.fire { border-color:#e0906a;color:#b85f12 }
.app .dm-qbtn.fire:hover { background:#fde4d8 }
.app .dm-qbtn.ems { border-color:#7cc79b;color:#159A4C }
.app .dm-qbtn.ems:hover { background:#e1f3e9 }
.app .dm-qbtn.law { border-color:#8fb4e6;color:#2563EB }
.app .dm-qbtn.law:hover { background:#e6f0fb }
.app .dm-qbtn.other { border-color:#b9c2cd;color:#5b6673 }
.app .dm-qbtn.other:hover { background:#eef1f5 }
.app .dm-lk { color:var(--side);font-weight:700;text-decoration:none;cursor:pointer;background:none;border:0;font-size:inherit;padding:0 }
.app .dm-lk:hover { color:var(--orange-ink) }
.app .dm-lk.danger { color:var(--under) }
.app .dm-lk.mute { color:#b3bcc7;cursor:not-allowed }
.app .dm-rowacts { display:flex;gap:10px;justify-content:flex-end;align-items:center;white-space:nowrap }
.app .dm-callsign { font-weight:800;letter-spacing:.02em }
.app .dm-fgrid { display:grid;grid-template-columns:1fr 1fr;gap:12px 18px;margin-bottom:16px }
.app .dm-fgrid.dm-f1 { grid-template-columns:1fr }
.app .dm-field { display:flex;flex-direction:column;gap:5px }
.app .dm-field label { font-size:12px;font-weight:700;color:var(--text) }
.app .dm-field .dm-desc { font-size:11.5px;color:var(--muted) }
.app .dm-field select, .app .dm-field input[type=text], .app .dm-field input[type=number] { border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:13px;background:var(--input-bg);font:inherit;color:var(--text) }
.app .dm-field select[disabled], .app .dm-field input[disabled] { background:var(--surface);color:var(--muted);cursor:not-allowed }
.app .dm-section { font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:14px 0 10px;padding-bottom:5px;border-bottom:1px solid var(--line-2) }
.app .dm-section:first-child { margin-top:0 }
.app .dm-togline { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2) }
.app .dm-togline:last-child { border-bottom:0 }
.app .dm-togline .tt { font-weight:700;font-size:13px }
.app .dm-togline .td { font-size:11.5px;color:var(--muted) }
.app .dm-switch { width:40px;height:22px;border-radius:20px;background:#cdd5df;position:relative;cursor:pointer;flex:none;transition:.15s;border:0;padding:0 }
.app .dm-switch.on { background:var(--ok) }
.app .dm-switch::after { content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.15s;box-shadow:0 1px 2px rgba(0,0,0,.3) }
.app .dm-switch.on::after { left:20px }
.app .dm-switch[disabled] { opacity:.5;cursor:not-allowed }
.app .dm-radios { display:flex;gap:7px;flex-wrap:wrap }
.app .dm-radio { border:1.5px solid var(--line);border-radius:8px;padding:6px 12px;font-weight:800;font-size:12.5px;cursor:pointer;background:var(--card);color:var(--muted) }
.app .dm-radio.on { border-color:var(--orange);background:var(--orange-soft);color:var(--orange-ink) }
.app .dm-summary { background:var(--orange-soft);border:1px solid #f0d3b0;border-radius:8px;padding:10px 13px;margin:10px 0 2px;color:var(--orange-ink);font-size:12.7px;font-weight:600 }
.app .dm-picklist { max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:8px;padding:0 12px }
.app .dm-picklist .row { cursor:pointer }
.app .dm-picklist input[type=checkbox] { width:16px;height:16px;accent-color:var(--orange);cursor:pointer;flex:none }
.app .dm-tabbar { display:flex;gap:2px;background:#f3f6fa;border-bottom:1px solid var(--line);padding:0 10px;flex:none }
.app .dm-tab { padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;font:inherit }
.app .dm-tab:hover { color:var(--text) }
.app .dm-tab.on { color:var(--orange-ink);border-bottom-color:var(--orange) }
.app .dm-tabbody { padding:0;overflow:auto;flex:1 }
.app .dm-tabpane { display:none;padding:16px 18px }
.app .dm-tabpane.on { display:block }
.app .dm-kv { display:grid;grid-template-columns:160px 1fr;gap:9px 14px;padding:14px 18px;font-size:13px }
.app .dm-kv .k { color:var(--muted);font-weight:700 }
.app .dm-agrtext { padding:0 18px 16px;font-size:13px;line-height:1.6 }
.app .dm-agrtext p { margin:0 0 10px }
.app .dm-pager { display:flex;align-items:center;justify-content:space-between;padding:9px 18px;border-top:1px solid var(--line-2);background:#fbfcfe;font-size:12px;color:var(--muted);flex:none }
.app .dm-pager .pg { display:flex;gap:4px }
.app .dm-pager .pg button { border:1px solid var(--line);background:var(--card);border-radius:6px;padding:3px 9px;font-weight:700;cursor:pointer;color:var(--text) }
.app .dm-pager .pg button.on { background:var(--orange-soft);border-color:var(--orange);color:var(--orange-ink) }

@media (max-width:900px) {
  .app .dm-layout { flex-direction:column }
  .app .dm-rail { width:100%;position:static;display:flex;flex-wrap:wrap;padding:6px }
  .app .dm-rail .dm-railhead { width:calc(100% + 12px);margin:-6px -6px 6px }
  .app .dm-rail .dm-cap { display:none }
  .app .dm-item { border-left:0;border-bottom:0;border-radius:20px;margin:3px;padding:7px 12px;background:var(--surface) }
  .app .dm-item.on { background:var(--orange-soft) }
  .app .dm-fgrid { grid-template-columns:1fr }
}

@media (max-width:760px) {
  .app .dm-kv { grid-template-columns:1fr }
  .app .dm-tabbar { overflow-x:auto }
  .app .dm-rowacts { flex-wrap:wrap;justify-content:flex-start }
}

@media (max-width:560px) {
  .app .dm-toolbar { flex-direction:column;align-items:stretch }
  .app .dm-search { max-width:none }
  .app .dm-seg { overflow-x:auto }
}

/* ========================================================================
   INCIDENT MANAGER (Chat 44) — ported from their mockup; 44 of 58 im-* classes were missing from this sheet
   ======================================================================== */

.app .im-lpage { display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between;
  margin-top:12px;padding:10px 13px;background:var(--card);border:1px solid var(--line);border-radius:8px;max-width:1320px }
.app .im-lpage .meta { flex:1 1 320px }
.app .im-lpager { display:flex;align-items:center;gap:8px;flex:0 0 auto }
.app .im-filters { display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin-bottom:16px;max-width:1320px }
.app .im-field { display:flex;flex-direction:column;gap:4px;min-width:170px;position:relative }
.app .im-field label { font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em }
.app .im-field input { border:1px solid var(--line);border-radius:8px;padding:8px 10px;font:inherit;font-size:13px;background:var(--input-bg);min-height:36px;color:var(--text) }
.app .im-field input:focus { outline:none;border-color:var(--orange) }
.app .im-field.grow { flex:1;min-width:220px }
.app .c3-msel-btn { width:100%;min-height:36px;border:1px solid var(--line);border-radius:8px;background:var(--input-bg);
  display:flex;align-items:center;gap:6px;padding:5px 8px;cursor:pointer;font:inherit;text-align:left;color:var(--text) }
.app .c3-msel-btn:hover { border-color:var(--orange) }
.app .c3-msel.open .c3-msel-btn { border-color:var(--orange) }
.app .c3-msel-chips { display:flex;flex-wrap:nowrap;gap:4px;flex:1;min-width:0;overflow:hidden }
.app .c3-msel-chip { background:var(--surface);border-radius:6px;padding:2px 7px;font-size:12px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:130px }
.app .c3-msel-chip.count { flex:none;background:var(--orange-soft);color:var(--orange-ink);max-width:none }
.app .c3-msel-placeholder { color:var(--muted);font-size:13px;font-weight:400 }
.app .c3-msel-chev { flex:none;opacity:.6;transition:transform .15s }
.app .c3-msel.open .c3-msel-chev { transform:rotate(180deg) }
.app .c3-msel-panel { display:none;position:absolute;top:calc(100% + 4px);left:0;min-width:240px;max-width:320px;
  background:var(--card);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow);z-index:60;overflow:hidden }
.app .c3-msel.open .c3-msel-panel { display:block }
.app .c3-msel-search { width:100%;border:0;border-bottom:1px solid var(--line-2);padding:9px 11px;font:inherit;font-size:13px }
.app .c3-msel-search:focus { outline:none;background:var(--surface) }
.app .c3-msel-list { max-height:220px;overflow-y:auto;padding:4px 0 }
.app .c3-msel-row { display:flex;align-items:center;gap:9px;padding:7px 11px;cursor:pointer;font-size:13px }
.app .c3-msel-row:hover { background:var(--orange-soft) }
.app .c3-msel-row input { width:16px;height:16px;flex:none;accent-color:var(--orange);cursor:pointer }
.app .c3-msel-row.all { border-bottom:1px solid var(--line-2);font-weight:700 }
.app .c3-msel-empty { padding:12px;color:var(--muted);font-size:12.5px;text-align:center }
/* The wrapper has to establish the positioning context for the absolutely-placed panel, and sit
   above the dialog's own stacking so the list is not clipped by it. */
.app .c3-msel { position:relative }
/* CLICK-OUTSIDE-TO-CLOSE without JavaScript: a transparent full-viewport layer behind the panel.
   A blur handler would fire before the row's click and swallow the selection. */
.app .c3-msel-backdrop { position:fixed;inset:0;z-index:55;border:0;background:transparent;padding:0 }
/* Inside the incident filter bar (.im-field input styles every input): the panel's search box and checkboxes keep
   their own shape rather than becoming 36px bordered fields. */
.app .im-field .c3-msel-search { border:0;border-bottom:1px solid var(--line-2);border-radius:0;min-height:0;padding:9px 11px;background:var(--card) }
.app .im-field .c3-msel-row input { min-height:0;padding:0;border-radius:3px }
.app .im-daterange { display:flex;align-items:center;gap:6px }
.app .im-daterange input { width:112px }
.app .im-filters .btn { height:36px }
.app .im-table-scroll { overflow-x:auto;max-width:1320px }
.app .im-table-scroll table { min-width:760px }
.app .im-table-scroll th:first-child, .app .im-table-scroll td:first-child { width:92px }
.app .im-timecell { white-space:nowrap;line-height:1.35;color:var(--text) }
.app .im-timecell .d { font-size:11.5px;display:block }
.app .im-timecell .t { font-weight:400 }
.app .im-naturecell { line-height:1.4;padding:0!important }
.app .im-naturecell .im-statusfill { display:block;padding:10px 13px;color:#fff }
.app .im-naturecell .im-nature { font-weight:700;display:block }
.app .im-naturecell .im-statuslabel { display:block;font-size:12px;font-weight:600;opacity:.95 }
.app .im-nature { font-weight:700;display:block }
.app .im-addr { display:block;color:var(--text) }
.app .im-addr .loc { font-weight:700;display:block }
.app .im-addr .street { font-weight:400;font-size:12px;display:block }
.app .im-arow { cursor:pointer }
.app .im-l2 { z-index:200 }
.app .im-kv { width:100% }
.app .im-kv td { padding:7px 0;border-top:1px solid var(--line-2);font-size:12.5px;vertical-align:top }
.app .im-kv tr:first-child td { border-top:0 }
.app .im-kv td:first-child { width:150px;color:var(--muted);font-weight:700;font-size:11px;
  letter-spacing:.03em;text-transform:uppercase;padding-right:12px }
.app .im-aexport { display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-top:10px;padding:11px 13px;background:var(--card);border:1px solid var(--line);border-radius:6px }
.app .im-aexport > div:first-child { flex:1 1 300px;min-width:0 }
.app .im-aexpbtns { display:flex;gap:6px;flex:0 0 auto }
.app .im-atools { display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 10px;padding:10px 12px;
  background:var(--surface);border:1px solid var(--line);border-radius:6px }
.app .im-af { display:flex;flex-direction:column;gap:3px;flex:1 1 130px;min-width:0 }
.app .im-af label { font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--muted) }
.app .im-af input, .app .im-af select { width:100%;min-width:0;font:inherit;font-size:12px;padding:6px 8px;
  border:1px solid var(--line);border-radius:5px;background:var(--card);color:var(--text) }
.app .im-aexp { flex:0 0 auto;display:flex;flex-direction:column }
.app .im-aexp .btn { margin-right:4px }
.app .im-apage { display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start;justify-content:space-between;
  margin-top:10px;padding:9px 12px;background:var(--surface);border:1px solid var(--line);border-radius:6px }
.app .im-apage .meta { flex:1 1 320px }
.app .im-apager { display:flex;align-items:center;gap:8px;flex:0 0 auto }
.app .im-did { font-family:var(--mono);font-size:11.5px;max-width:100%;display:inline-block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom }
.app .im-auditkey { margin-top:12px;padding:12px 14px;background:#f7f9fc;border:1px solid var(--line);border-radius:8px }
.app .im-tags { display:flex;flex-wrap:wrap;gap:4px }
.app .im-tag { font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:20px;background:var(--purple-soft);color:var(--purple);white-space:nowrap }
.app .im-units { display:flex;flex-wrap:wrap;gap:4px }
.app .im-unit { font-size:11px;font-weight:700;padding:2px 7px;border-radius:6px;white-space:nowrap;color:#fff }
.app .im-rowbtn { background:none;border:0;padding:0;font:inherit;text-align:left;cursor:pointer;color:inherit;width:100% }
.app .im-rowbtn:hover .im-nature { text-decoration:underline }
.app .im-count { color:var(--muted);font-size:12.5px;margin:0 0 10px }
.app .im-form { display:grid;grid-template-columns:1fr 1fr;gap:20px }
.app .im-frow { display:flex;flex-direction:column;gap:4px;margin-bottom:12px }
.app .im-frow:last-child { margin-bottom:0 }
.app .im-frow label { font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em }
.app .im-frow input, .app .im-frow select, .app .im-frow textarea { border:1px solid var(--line);border-radius:8px;padding:8px 10px;
  font:inherit;font-size:13px;background:var(--input-bg);min-height:36px;width:100%;color:var(--text) }
.app .im-frow textarea { min-height:72px;resize:vertical }
.app .im-frow input:focus, .app .im-frow select:focus, .app .im-frow textarea:focus { outline:none;border-color:var(--orange) }
.app .im-frow .im-desc { color:var(--muted);font-size:11.5px }
.app .im-fpair { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.app .im-fsrc { font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  background:var(--surface);padding:1px 6px;border-radius:4px;margin-left:6px }
.app .im-modal { width:960px }
.app .im-tabbar { display:flex;gap:2px;background:#f3f6fa;border-bottom:1px solid var(--line);padding:0 10px;flex:none;overflow-x:auto }
.app .im-tab { padding:10px 14px;font-size:12.5px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;background:none;border-top:0;border-left:0;border-right:0;font:inherit;white-space:nowrap }
.app .im-tab:hover { color:var(--text) }
.app .im-tab.on { color:var(--orange-ink);border-bottom-color:var(--orange) }
.app .im-tabbody { padding:0;overflow:auto;flex:1 }
.app .im-tabpane { display:none;padding:16px 18px }
.app .im-tabpane.on { display:block }
.app .im-kv { display:grid;grid-template-columns:150px 1fr;gap:9px 14px;font-size:13px;margin-bottom:16px }
.app .im-kv .k { color:var(--muted);font-weight:700 }
.app .im-split { display:grid;grid-template-columns:1fr 1fr;gap:20px }
.app .im-map { background:var(--surface);border:1px solid var(--line);border-radius:8px;height:220px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:12.5px;text-align:center;padding:12px }
/* Basemap (WdMap, GeoReference tiles). The attribution control is MapLibre's own and must stay visible (licence). */
.app .wd-map { position:relative;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:var(--surface) }
.app .wd-map-canvas { position:absolute;inset:0 }
.app .wd-map-msg { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;text-align:center;color:var(--muted);font-size:12.5px;background:var(--surface) }
.app .wd-map-msg-corner { inset:auto auto 8px 8px;padding:4px 8px;border-radius:6px;border:1px solid var(--line) }
/* Shape editor (geofences): toolbar under the map, and draggable corner handles. The handle is a MapLibre marker
   element, appended inside the map, so it is styled without the .app scope it may not sit under. */
.app .wd-map-tools { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px }
.app .wd-map-tools .grow { flex:1 }
.app .wd-map-status { color:var(--muted);font-size:12.5px }
.wd-map-handle { width:12px;height:12px;border-radius:50%;background:#fff;border:2px solid #e67e22;box-shadow:0 0 0 1px rgba(0,0,0,.25);cursor:grab }
.wd-map-handle:active { cursor:grabbing }
@media (max-width:760px) { .app .im-split { grid-template-columns:1fr } }
.app .im-noteshead { font-weight:700;margin:18px 0 8px }
.app .im-notes-table td { vertical-align:top }
.app .im-notes-table .im-notetime { white-space:nowrap;color:var(--muted) }
.app .im-note-restricted { color:var(--muted);font-style:italic }
.app .im-src { margin-left:auto;font-size:9px;font-weight:700;letter-spacing:.05em;color:var(--muted);text-transform:uppercase;background:var(--surface);padding:2px 7px;border-radius:4px }

@media (max-width:900px) {
  .app .im-split { grid-template-columns:1fr }
  .app .im-form { grid-template-columns:1fr }
}

@media (max-width:760px) {
  .app .im-kv { grid-template-columns:1fr }
  .app .im-field { min-width:130px }
  .app .im-fpair { grid-template-columns:1fr }
}

@media (max-width:560px) {
  .app .im-filters { gap:8px }
  .app .im-field { min-width:100% }
  .app .im-field.grow { min-width:100% }
  .app .c3-msel-panel { left:0;right:0;min-width:0;max-width:none }
}

/* ========================================================================
   FILE SHARE (Chat 11) — ported from their mockup; all 73 fs-* classes were missing from this sheet
   ======================================================================== */

.app .fs-ctl { display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px }
.app .fs-ctl label { display:inline-flex;align-items:center;gap:6px;font-weight:700 }
.app .fs-ctl select { max-width:100%;font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--line);border-radius:6px;background:var(--card);color:var(--text);min-height:40px }
.app .fs-tabs { display:flex;gap:4px;border-bottom:2px solid var(--line);margin:0 0 16px;max-width:1320px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none }
.app .fs-tabs::-webkit-scrollbar { display:none }
.app .fs-tab { appearance:none;background:none;border:0;border-bottom:3px solid transparent;font:inherit;font-weight:700;font-size:13.5px;color:var(--muted);padding:10px 14px;cursor:pointer;white-space:nowrap;min-height:42px }
.app .fs-tab:hover { color:var(--text) }
.app .fs-tab[aria-selected="true"] { color:var(--text);border-bottom-color:var(--orange) }
.app .fs-pane { display:none;max-width:1320px }
.app .fs-pane.on { display:block }
.app .fs-split { display:grid;grid-template-columns:270px minmax(0,1fr);gap:16px;align-items:start }
.app .fs-stack { display:grid;gap:16px }
.app .fs-split > .w, .app .fs-stack > .w { grid-column:auto }
.app .fs-field.fs-sharepick { display:none;margin-bottom:12px }
.app .fs-share { appearance:none;width:100%;text-align:left;background:none;border:0;border-left:3px solid transparent;border-bottom:1px solid var(--line-2);font:inherit;color:inherit;padding:10px 12px;cursor:pointer;display:flex;gap:10px;align-items:flex-start;min-height:48px }
.app .fs-share:last-child { border-bottom:0 }
.app .fs-share:hover { background:var(--surface) }
.app .fs-share[aria-current="true"] { background:var(--orange-soft);border-left-color:var(--orange) }
.app .fs-share svg { width:18px;height:18px;flex:none;color:var(--side);margin-top:1px }
.app .fs-share .n { font-weight:700;display:block }
.app .fs-share .m { color:var(--muted);font-size:12px;display:block }
.app .fs-path { display:flex;flex-wrap:wrap;align-items:center;gap:2px;font-size:13px;margin-bottom:10px }
.app .fs-path button { appearance:none;background:none;border:0;font:inherit;color:var(--side);font-weight:600;cursor:pointer;padding:8px 4px;min-height:40px }
.app .fs-path button:hover { text-decoration:underline }
.app .fs-path .cur { font-weight:700;color:var(--text);padding:8px 4px }
.app .fs-path .sepr { color:var(--muted) }
.app .fs-bar { display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-bottom:10px }
.app .fs-search { flex:1;min-width:180px;position:relative;display:block }
.app .fs-search svg { position:absolute;left:10px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--muted) }
.app .fs-search input { width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 10px 8px 32px;font:inherit;font-size:13px;min-height:40px }
.app .fs-search input:focus { outline:none;border-color:var(--orange) }
.app .fs-chips { display:flex;gap:6px;flex-wrap:wrap }
.app .fs-chip { appearance:none;font:inherit;font-size:12px;font-weight:700;padding:6px 12px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer;min-height:40px;white-space:nowrap }
.app .fs-chip:hover { border-color:var(--orange);color:var(--orange-ink) }
.app .fs-chip[aria-pressed="true"] { background:var(--navy);border-color:var(--navy);color:var(--card) }
.app .fs-count { color:var(--muted);font-size:12px;margin-left:auto }
.app .fs-tablewrap { overflow:visible }
/* THE TABLE ITSELF. The mockup styles bare `table`, `th` and `td` globally; this portal has no
   element-level table styling at all (it uses .table and .wd-table), so the port brought every .fs-*
   rule and left the rows completely unstyled — no cell padding, no header band, no row rules. The
   File Share table rendered as run-together text, which is what Brooks sent back on 2026-10-20.
   Scoped to .fs-tablewrap rather than loosed on `table`, which would restyle every other page. */
.app .fs-tablewrap table { width:100%;border-collapse:collapse;font-size:13px }
.app .fs-tablewrap th { background:var(--surface);padding:10px 12px;text-align:left;font-weight:700;border-bottom:1px solid var(--line);color:var(--text) }
/* NO vertical-align. The mockup's `td` rule does not set one, so cells default to `middle` — which is
   what lines the 40px-tall .fs-name button up with the plain text beside it. I added `vertical-align:top`
   when porting, and the name then sat lower than Modified/Modified by/Size on the same row (Brooks,
   2026-10-21: "the folder name either has too much or the others don't have enough"). Porting CSS
   verbatim means not adding properties the design does not have, as much as not dropping ones it does. */
.app .fs-tablewrap td { padding:10px 12px;border-bottom:1px solid var(--line-2) }
.app .fs-tablewrap tbody tr:last-child td { border-bottom:0 }
.app .fs-tablewrap tbody tr:hover { background:var(--surface) }
/* the row's own action button sits right, as the mockup's kebab does */
.app .fs-tablewrap td:last-child { text-align:right;white-space:nowrap }
/* The row kebab. The mockup's own .fs-kebab is a <details> whose menu is position:fixed and moved
   beside the button by its JavaScript; this opens a sheet instead, so only the trigger is needed. */
.app .fs-rowmenu { appearance:none;background:none;border:0;cursor:pointer;color:var(--muted);
  width:40px;height:40px;border-radius:8px;display:inline-grid;place-items:center }
.app .fs-rowmenu:hover { background:var(--surface);color:var(--text) }
.app .fs-rowmenu .c3-ico { width:18px;height:18px }
/* the same trigger ON THE CARD HEADER, which is black with white text — the row treatment would put a
   light grey box on it. Matches the existing .w-head .more convention rather than inventing a second. */
.app .w-head .fs-rowmenu { color:#9aa3ad; width:32px; height:32px }
.app .w-head .fs-rowmenu:hover { background:rgba(255,255,255,.12); color:#fff }
.app .fs-name { appearance:none;background:none;border:0;font:inherit;color:var(--text);font-weight:600;cursor:pointer;text-align:left;padding:4px 0;display:flex;align-items:center;gap:9px;min-height:40px }
.app .fs-name:hover .fs-nm { color:var(--orange-ink);text-decoration:underline }
.app .fs-name svg { width:18px;height:18px;flex:none;color:var(--muted) }
.app .fs-name.folder svg { color:var(--side) }
.app .fs-nm { overflow-wrap:anywhere }
.app .fs-sub { display:none;color:var(--muted);font-size:12px;font-weight:400 }
.app .fs-ext { font-family:var(--mono);font-size:10px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:4px;padding:1px 4px;flex:none;text-transform:uppercase }
.app td.fs-act { width:48px;text-align:right;position:relative }
.app td.fs-c-mod, .app td.fs-c-by, .app td.fs-c-size { white-space:nowrap }
.app .titlebar .acts.fs-acts { flex-wrap:wrap;justify-content:flex-end }
.app .fs-kebab summary { list-style:none;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:8px;color:var(--muted);margin-left:auto }
.app .fs-kebab summary::-webkit-details-marker { display:none }
.app .fs-kebab summary:hover, .app .fs-kebab[open] summary { background:var(--surface);color:var(--text) }
.app .fs-kebab summary svg { width:18px;height:18px }
.app .fs-menu { position:fixed;top:8px;right:8px;z-index:60;background:var(--card);border:1px solid var(--line);border-radius:10px;box-shadow:var(--shadow);min-width:216px;max-width:300px;padding:6px;text-align:left }
.app .fs-menu button { appearance:none;display:flex;width:100%;align-items:center;gap:9px;background:none;border:0;font:inherit;font-size:13px;color:var(--text);padding:9px 10px;border-radius:6px;cursor:pointer;text-align:left;min-height:40px }
.app .fs-menu button:hover { background:var(--surface) }
.app .fs-menu button svg { width:16px;height:16px;flex:none;color:var(--muted) }
.app .fs-menu button.danger, .app .fs-menu button.danger svg { color:var(--under) }
.app .fs-menu button[disabled], .app .fs-menu button[disabled] svg { color:var(--muted);cursor:not-allowed }
.app .fs-menu .why { display:block;font-size:11.5px;color:var(--muted);padding:0 10px 6px 35px }
.app .fs-menuttl { display:none }
.app .fs-lbl-s { display:none }
.app .fs-menu hr { border:0;border-top:1px solid var(--line-2);margin:4px 0 }
.app .fs-empty { text-align:center;color:var(--muted);padding:34px 14px }
.app .fs-empty svg { width:34px;height:34px;margin:0 auto 10px;color:var(--side) }
.app .fs-empty h3 { margin:0 0 6px;color:var(--text);font-size:15px }
.app .fs-empty p { margin:0 auto 14px;max-width:440px }
.app .fs-field { display:block;margin-bottom:14px }
.app .fs-field .l { display:block;font-weight:700;font-size:12.5px;margin-bottom:5px }
.app .fs-field .h { display:block;color:var(--muted);font-size:12px;margin-top:4px }
.app .fs-field input[type=text], .app .fs-field textarea, .app .fs-field select { width:100%;border:1px solid var(--line);border-radius:8px;padding:9px 11px;font:inherit;font-size:13.5px;min-height:42px;background:var(--card);color:var(--text) }
.app .fs-field textarea { min-height:84px;resize:vertical }
.app .fs-radio { display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:9px;margin-bottom:8px;cursor:pointer;min-height:44px }
.app .fs-radio input { margin-top:3px;accent-color:var(--orange);width:17px;height:17px;flex:none }
.app .fs-radio .t { font-weight:700;display:block }
.app .fs-radio .d { color:var(--muted);font-size:12px;display:block }
.app .fs-kv { display:grid;grid-template-columns:118px minmax(0,1fr);gap:6px 12px;font-size:13px;margin:0 }
.app .fs-kv dt { color:var(--muted) }
.app .fs-kv dd { margin:0;font-weight:600;overflow-wrap:anywhere }
.app .fs-callout { border:1px solid var(--line);border-left:4px solid var(--purple);background:var(--purple-soft);border-radius:8px;padding:10px 12px;font-size:12.5px;margin-bottom:14px }
.app .fs-callout.warn { border-left-color:var(--under);background:var(--card) }
.app .fs-callout.info { border-left-color:var(--side);background:var(--surface) }
.app .fs-callout b { display:block;margin-bottom:2px }
.app .fs-h3 { font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:16px 0 8px }
.app .fs-h3:first-child { margin-top:0 }
.app .modal.fs-wide { width:980px }
.app .fs-view { display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px }
.app .fs-preview { background:var(--surface);border:1px solid var(--line);border-radius:8px;min-height:380px;display:grid;place-items:center;padding:18px }
.app .fs-page { background:var(--card);width:min(100%,290px);aspect-ratio:8.5/11;box-shadow:var(--shadow);padding:22px 20px;display:flex;flex-direction:column;gap:9px }
.app .fs-page i { display:block;height:7px;border-radius:4px;background:var(--line-2) }
.app .fs-page i.h { height:12px;width:62%;background:var(--line) }
.app .fs-page i.s { width:80% }
.app .fs-page i.xs { width:45% }
.app .fs-holdonly { display:none }
.app .is-hold .fs-holdonly { display:block }
.app .is-hold .fs-nohold { display:none!important }
.app .fs-drop { border:2px dashed var(--line);border-radius:12px;padding:26px 16px;text-align:center;color:var(--muted);margin-bottom:14px }
.app .fs-drop svg { width:28px;height:28px;margin:0 auto 8px;color:var(--side) }
.app .fs-up { display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-2) }
.app .fs-up:last-child { border-bottom:0 }
.app .fs-up .g { flex:1;min-width:0 }
.app .fs-up .g b { overflow-wrap:anywhere }
.app .fs-prog { height:7px;border-radius:20px;background:var(--line-2);overflow:hidden;margin-top:5px }
.app .fs-prog i { display:block;height:100%;background:var(--side);border-radius:20px }
.app .fs-tree { border:1px solid var(--line);border-radius:9px;max-height:260px;overflow:auto }
.app .fs-tree label { display:flex;align-items:center;gap:9px;padding:9px 12px;border-bottom:1px solid var(--line-2);cursor:pointer;min-height:44px }
.app .fs-tree label:last-child { border-bottom:0 }
.app .fs-tree input { accent-color:var(--orange);width:17px;height:17px;flex:none }
.app .fs-tree svg { width:17px;height:17px;color:var(--side);flex:none }
.app .fs-tree .i1 { padding-left:34px }
.app .fs-tree .i2 { padding-left:56px }
.app .fs-grid th.c, .app .fs-grid td.c { text-align:center;width:124px }
.app .fs-grid input[type=checkbox] { width:19px;height:19px;accent-color:var(--orange);cursor:pointer }
.app .fs-grid td.c label { display:inline-grid;place-items:center;min-width:42px;min-height:42px;cursor:pointer }
.app .fs-savebar { display:none;align-items:center;gap:9px;background:var(--navy);color:var(--card);padding:10px 14px }
.app .fs-savebar.on { display:flex }
.app .fs-savebar .g { flex:1;font-size:12.5px }
.app .fs-banner { display:none }
.app[data-fs-role="member"] .fs-edit, .app[data-fs-role="member"] .fs-folders, .app[data-fs-role="member"] .fs-admin, .app[data-fs-role="member"] .fs-officer, .app[data-fs-role="contributor"] .fs-admin, .app[data-fs-role="divadmin"] .fs-agencyadmin { display:none!important }
.app[data-fs-role="divadmin"] .fs-banner { display:block }
.app:not([data-fs-role="member"]) .fs-viewonly { display:none!important }
.app[data-fs-state="first"] .fs-populated { display:none!important }
.app:not([data-fs-state="first"]) .fs-firstrun { display:none!important }
.app[data-fs-view="home"] .fs-area { display:none!important }
.app:not([data-fs-view="home"]) .fs-home { display:none!important }
.app .fs-sr { position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap }
.app .fs-divonly { display:none }
.app[data-fs-role="divadmin"] .fs-divonly { display:revert }
.app[data-fs-role="owner"] .fs-nonadmin, .app[data-fs-role="agencyadmin"] .fs-nonadmin, .app[data-fs-role="divadmin"] .fs-nonadmin { display:none!important }
.app:not([data-fs-role="owner"]):not([data-fs-role="agencyadmin"]) .fs-shareadmin { display:none!important }
.app[data-fs-role="owner"] .fs-notshareadmin, .app[data-fs-role="agencyadmin"] .fs-notshareadmin { display:none!important }
.app:not([data-fs-role="owner"]) .fs-approver { display:none!important }
.app .fs-pendonly { display:none }
.app .is-pending .fs-pendonly { display:block }
.app .is-pending .btn.fs-pendonly { display:inline-flex }
.app .is-pending .fs-nopend { display:none!important }
.app .fs-check { display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border:1px solid var(--line);border-radius:9px;cursor:pointer;min-height:44px;font-size:13px }
.app .fs-check input { margin-top:2px;width:18px;height:18px;accent-color:var(--orange);flex:none }
.app .fs-hint { flex-basis:100%;font-size:12px }
.app .fs-area [hidden], .app .modal-scrim[id^="fsDlg"] [hidden] { display:none!important }
.app .is-hold .btn.fs-holdonly { display:inline-flex }

/* tags (FS-R16..FS-R20): chips on rows, the tag editor's current list and its option sheet.
   Ported verbatim from the mockup (Chief360FileShare.html, 2026-10-19) — the chips shipped a day
   ahead of this block and rendered as default buttons, which is the whole reason the port is a
   mechanical copy rather than something approximated from a screenshot. */
.app .fs-tags { display:flex;flex-wrap:wrap;gap:4px;margin:0 0 4px }
.app .fs-tag { appearance:none;display:inline-flex;align-items:center;gap:4px;font:inherit;font-size:11px;font-weight:600;line-height:1.2;padding:2px 7px;border-radius:20px;border:1px solid var(--line);background:var(--surface);color:var(--text);cursor:pointer;max-width:100%;min-height:26px;white-space:nowrap;text-align:left }
.app .fs-tag svg { width:11px;height:11px;flex:none;color:var(--muted) }
.app .fs-tag.p svg { color:var(--side) }
.app button.fs-tag:hover { border-color:var(--orange);color:var(--orange-ink) }
.app .fs-tag.more { color:var(--muted) }
.app .fs-vtags { margin:0 0 4px }
.app .fs-tagcur { display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:40px;margin-bottom:12px }
.app .fs-tagcur .fs-tag { cursor:default;font-size:12.5px;padding:2px 2px 2px 10px;min-height:36px }
.app .fs-tagcur .fs-tag button { appearance:none;border:0;background:none;width:32px;height:32px;border-radius:50%;cursor:pointer;color:var(--muted);font:inherit;font-size:17px;line-height:1;flex:none }
.app .fs-tagcur .fs-tag button:hover { background:var(--line-2);color:var(--text) }
.app .fs-tagopts { border:1px solid var(--line);border-radius:9px;max-height:300px;overflow:auto;margin-top:10px }
.app .fs-taggrp { font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;padding:9px 12px 4px }
.app .fs-tagopt { appearance:none;width:100%;display:flex;align-items:center;gap:10px;background:none;border:0;border-bottom:1px solid var(--line-2);font:inherit;font-size:13px;color:var(--text);text-align:left;padding:7px 12px;cursor:pointer;min-height:46px }
.app .fs-tagopt:last-child { border-bottom:0 }
.app .fs-tagopt:hover, .app .fs-tagopt:focus-visible { background:var(--surface) }
.app .fs-tagopt .av { width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--card);display:grid;place-items:center;font-size:11px;font-weight:700;flex:none }
.app .fs-tagopt .av.l { background:var(--surface);color:var(--muted);border:1px solid var(--line) }
.app .fs-tagopt .av svg { width:14px;height:14px }
.app .fs-tagopt .g { flex:1;min-width:0 }
.app .fs-tagopt .g b { display:block;font-weight:600;overflow-wrap:anywhere }
.app .fs-tagopt .g span { display:block;color:var(--muted);font-size:12px }
.app .fs-tagopt .ck { width:16px;height:16px;color:var(--orange);visibility:hidden;flex:none }
.app .fs-tagopt.on .ck { visibility:visible }
.app .fs-tagopt.new b { color:var(--side) }
.app .fs-tagnote { margin:10px 0 0;color:var(--muted);font-size:12px }

@media (max-width:1100px) {
  .app .fs-split { grid-template-columns:230px minmax(0,1fr) }
  .app .fs-view { grid-template-columns:1fr }
  .app .fs-preview { min-height:300px }
}

@media (max-width:900px) {
  .app .fs-split { grid-template-columns:1fr }
  .app .fs-sharelist { display:none }
  .app .fs-field.fs-sharepick { display:block }
  .app .fs-tablewrap { overflow-x:auto }
  .app .fs-menu { max-width:none;position:fixed;left:10px;right:10px!important;bottom:10px;top:auto!important;z-index:90;max-height:70vh;overflow:auto }
  .app .fs-area .btn, .app .fs-acts .btn, .app .modal-scrim[id^="fsDlg"] .btn { min-height:40px }
  .app .fs-menuttl { display:block;font-weight:700;padding:8px 10px;border-bottom:1px solid var(--line-2);margin-bottom:4px;overflow-wrap:anywhere }
  /* a chip is a tap target on a phone, not an 11px label */
  .app .fs-tag { min-height:40px;padding:6px 11px }
  .app .fs-tags { margin-left:0 }
}

@media (max-width:760px) {
  .app .fs-c-mod, .app .fs-c-by, .app .fs-c-size, .app .fs-c-x { display:none }
  .app .fs-sub { display:block }
  .app .fs-preview { min-height:230px }
  .app .fs-kv { grid-template-columns:104px minmax(0,1fr) }
  .app .fs-grid th.c, .app .fs-grid td.c { width:auto;padding-left:4px;padding-right:4px }
  .app .fs-savebar { flex-wrap:wrap }
}

@media (max-width:560px) {
  .app .fs-tab { padding:10px 10px;font-size:13px }
  .app .fs-ctl label { display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100% }
  .app .fs-ctl select { width:100% }
  .app .fs-lbl-l { display:none }
  .app .fs-lbl-s { display:inline }
  .app .fs-chips { flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;width:100% }
  .app .fs-chip { flex:none }
  .app .fs-count { margin-left:0;width:100% }
  .app .fs-search { min-width:100% }
}

/* ---- Person Groups: the member table, the dual-list picker and the editor tabs ----
   Ported from Chief360PersonnelManagement.html (2026-10-20) WITH the markup that uses them. The
   mockup's #fff becomes var(--card) so none of this is a white rectangle in dark mode. */
.app .pm-ghead { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:0 0 12px }
.app .pm-ghead .nm { font-size:15px; font-weight:800; color:var(--text) }
/* THE COLUMN CHOOSER — ported from the Personnel mockup (.colmenu), which was never brought across.
   Without these rules <details class="pm-colmenu"> opened as an ordinary block: it pushed the page
   down instead of floating, the checkboxes ran together on one line with no spacing, and there was no
   panel, border or shadow. Brooks reported it as a display issue on the Roster.
   The positioning context is the <details> itself, so the panel anchors to the Columns button. */
.app .pm-colmenu { position:relative; display:inline-block }
.app .pm-colmenu > summary { list-style:none; cursor:pointer }
.app .pm-colmenu > summary::-webkit-details-marker { display:none }
/* LEFT-anchored, not right. The mockup's Columns button sits at the RIGHT of its toolbar, so right:0
   was correct there; here it is the third control from the LEFT, and right:0 threw the panel off the
   left edge of the window. Anchor follows the control, not the source it was copied from. */
.app .pm-colmenu .pop { position:absolute; left:0; right:auto; top:calc(100% + 6px); z-index:30;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow);
  padding:10px 12px; display:flex; flex-direction:column; gap:8px; min-width:230px }
.app .pm-colmenu .pop label { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:600;
  cursor:pointer; white-space:nowrap }
/* The "not available yet" note wraps, unlike the options above it, so it needs its own width rule. */
.app .pm-colnote { max-width:260px; white-space:normal; font-size:11.5px; line-height:1.45;
  color:var(--muted); border-top:1px solid var(--line-2); padding-top:8px; margin-top:2px }

/* THE ROSTER'S SIX STAT CARDS. auto-fit so they fill the row at any width and wrap rather than
   scroll — six fixed cards would overflow a laptop. The number is the thing being read, so it is
   large and the label is small under it, as the design draws them.

   The colours are semantic: a count of problems is not neutral. They are the portal's own tokens so
   they flip with the theme, and each is the SAME ink those tokens carry everywhere else — a chief who
   learns red means "needs doing" on one page should not have to relearn it here. */
.app .pm-stats {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:12px; margin:0 0 16px }
.app .pm-stat {
  background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px 16px;
  display:flex; flex-direction:column; gap:2px }
.app .pm-stat b { font-size:30px; font-weight:800; line-height:1.05; color:var(--text) }
.app .pm-stat span { font-size:12px; color:var(--muted); font-weight:600 }

/* THE COUNTS ARE NOT NEUTRAL, so they are coloured — but measured, because the obvious tokens do not
   survive both themes at 30px:
     --amber is #E0AC44, which is 2.07:1 on a white card. It fails even the 3:1 large-text floor, let
     alone 4.5, and it is not redefined for dark mode at all. #9A6A12 is 4.73:1 in light; in dark the
     vetted #E6C072 is 9.71:1.
     --under is #CE3B3B: 4.87:1 in light, but only 3.45:1 on the night card. #F0A79B — the red ink
     chief360.css already pairs with its dark surfaces — is 8.55:1.
   So the colour is stated per theme rather than taken from one token that only works in one. */
.app .pm-stat b.ok { color:var(--ok) }
.app .pm-stat b.warn { color:#9A6A12 }
.app .pm-stat b.bad { color:var(--under) }
.app[data-theme="dark"] .pm-stat b.warn { color:#E6C072 }
.app[data-theme="dark"] .pm-stat b.bad { color:#F0A79B }

.app .pm-person { display:flex; align-items:center; gap:10px }
.app .pm-person .av { width:32px; height:32px; border-radius:50%; background:var(--side); color:var(--card);
  display:grid; place-items:center; font-size:11.5px; font-weight:800; flex:none }
.app .pm-person .nm { font-weight:600 }
/* the Role pill as a control: same shape as .pill, but it is a button and says so on hover */
.app .pm-rolepill { appearance:none; border:1px solid var(--line); background:var(--line-2); color:var(--muted);
  font:inherit; font-size:11px; font-weight:700; padding:2px 8px; border-radius:20px; cursor:pointer; white-space:nowrap }
.app .pm-rolepill:hover:not(:disabled) { border-color:var(--orange); color:var(--orange-ink) }
.app .pm-rolepill.on { background:#FFF4D6; color:#9A6A12; border-color:#e8c98a }
.app[data-theme="dark"] .pm-rolepill.on { background:#3A2F16; color:#E6C072; border-color:#5c4a22 }
.app .pm-removelink { appearance:none; border:0; background:none; padding:0; font:inherit; font-weight:600;
  color:var(--under); cursor:pointer }
.app .pm-removelink:hover:not(:disabled) { text-decoration:underline }
.app .pm-note { background:var(--orange-soft); border:1px solid #f0d4b3; border-radius:8px; padding:9px 11px;
  font-size:12px; color:var(--orange-ink); margin:12px 0 0 }
.app[data-theme="dark"] .pm-note { border-color:#5c431f }
.app .pm-addgrid { display:grid; grid-template-columns:1fr 1fr; gap:14px }
.app .pm-addgrid .field { display:flex; flex-direction:column; gap:6px; font-size:12px; font-weight:700; color:var(--text) }
.app .pm-addgrid .field .meta { font-weight:600; font-size:11px }
.app .pm-addgrid input, .app .pm-addgrid select { border:1px solid var(--line); border-radius:8px; padding:9px 11px;
  font:inherit; font-size:13px; background:var(--card); color:var(--text); min-height:40px }
.app .pm-dtabs { display:flex; gap:0; border-bottom:1px solid var(--line); margin:-4px 0 14px }
.app .pm-dtab { border:0; border-bottom:3px solid transparent; background:none; padding:9px 14px; font:inherit;
  font-size:13px; font-weight:700; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:7px }
.app .pm-dtab.on { color:var(--orange-ink); border-bottom-color:var(--orange) }
.app .pm-dual { display:grid; grid-template-columns:1fr 46px 1fr; gap:10px; align-items:stretch }
.app .pm-dual .col h4 { margin:0 0 6px; font-size:12px; font-weight:700; color:var(--text) }
.app .pm-dual .col input[type=search] { width:100%; box-sizing:border-box; border:1px solid var(--line);
  border-radius:8px; padding:7px 10px; font:inherit; font-size:13px; margin-bottom:6px; background:var(--card); color:var(--text) }
.app .pm-dual .list { border:1px solid var(--line); border-radius:8px; height:260px; overflow-y:auto; background:var(--card) }
.app .pm-dual .list .it { display:flex; align-items:center; gap:8px; padding:7px 10px;
  border-bottom:1px solid var(--line-2); font-size:13px; cursor:pointer; user-select:none }
.app .pm-dual .list .it:last-child { border-bottom:0 }
.app .pm-dual .list .it.sel { background:var(--orange-soft) }
.app .pm-dual .list .it .sub { color:var(--muted); font-size:11px }
.app .pm-dual .list .empty { padding:14px 10px; font-size:12px; color:var(--muted) }
.app .pm-dual .mid { display:flex; flex-direction:column; justify-content:center; gap:6px }
.app .pm-dual .mid button { border:1px solid var(--line); background:var(--card); border-radius:8px; height:34px;
  font:inherit; font-size:14px; font-weight:700; cursor:pointer; color:var(--text) }
.app .pm-dual .mid button:disabled { opacity:.4; cursor:default }
.app .pm-dual .cnt { font-size:11px; color:var(--muted); margin-top:4px }
@media (max-width:760px) {
  .app .pm-dual { grid-template-columns:1fr }
  .app .pm-dual .mid { flex-direction:row; justify-content:center }
  .app .pm-dual .mid button { width:56px }
  .app .pm-dual .list { height:200px }
  .app .pm-addgrid { grid-template-columns:1fr }
}

/* ---- Admin > Chat Rooms (Chat Room's contribution; mockup approved by Brooks 2026-10-20) ----
   Ported verbatim from DesignTemplates\AgencyManagement\Chief360ChatRoom\Chief360ChatRoom.html, which
   is the APPROVED design for this section — not Chat Room's own page mockup, which is the member chat
   surface and is what I built the first version from. Token-driven where the mockup hard-codes #fff.
   Scoped under .app so they cannot reach anything else; the chat PAGE's own .cr-host/.cr-note/.cr-attach
   live in that page's style block and share no names with these. */
.app .cr-opt { display:flex; gap:10px; align-items:flex-start; padding:10px 12px; border:1px solid var(--line);
  border-radius:var(--r); margin-bottom:8px; cursor:pointer; background:var(--card); }
.app .cr-opt input { margin-top:3px; }
.app .cr-opt b { display:block; font-size:13px; }
.app .cr-opt span { font-size:12px; color:var(--muted); }
.app .cr-opt.on { border-color:var(--orange); background:var(--orange-soft); }
.app .cr-sub { margin:18px 0 8px; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); font-weight:800; }
.app .cr-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin:0 0 12px; }
.app .cr-toolbar input[type=search] { border:1px solid var(--line); border-radius:7px; padding:7px 10px;
  font:inherit; min-width:200px; background:var(--input-bg); color:var(--text); }
.app .cr-toolbar .grow { flex:1; }
.app .cr-state { display:inline-flex; gap:6px; margin:0 0 12px; }
.app .cr-state button { font:inherit; font-size:11.5px; font-weight:700; padding:3px 10px;
  border:1px solid var(--line); background:var(--card); border-radius:20px; cursor:pointer; color:var(--muted); }
.app .cr-state button.on { background:var(--orange-soft); border-color:var(--orange); color:var(--orange-ink); }
.app .cr-tbl { width:100%; border-collapse:collapse; }
.app .cr-tbl td, .app .cr-tbl th { padding:9px 10px; text-align:left; border-bottom:1px solid var(--line-2);
  vertical-align:middle; }
.app .cr-tbl th { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); font-weight:800; }
.app .cr-tbl td.act { text-align:right; white-space:nowrap; }
.app .cr-tbl td.act .btn { margin-left:6px; }
.app .cr-tbl tr.off td:first-child b { color:var(--muted); }
.app .cr-tbl .btn[disabled] { opacity:.45; cursor:default; }
.app .cr-tbl .mono { font-family:var(--mono); }
.app .cr-empty { padding:26px 10px; text-align:center; color:var(--muted); font-size:13px; }
.app .cr-holdrow { display:flex; gap:12px; align-items:flex-start; padding:10px 0; border-bottom:1px solid var(--line-2); }
.app .cr-holdrow:last-child { border-bottom:0; }
.app .cr-holdrow .why { font-weight:600; color:var(--text); }
.app .cr-holdrow .meta { font-size:12px; color:var(--muted); }
.app .cr-holdrow.released .why { text-decoration:line-through; color:var(--muted); }
.app .cr-confirm { background:var(--orange-soft); border:1px solid var(--orange); border-radius:var(--r);
  padding:10px 12px; font-size:12.5px; margin-top:10px; }
.app .cr-callout { background:var(--line-2); border-radius:var(--r); padding:10px 12px; font-size:12.5px;
  color:var(--muted); margin:10px 0 0; }

/* ---- Bulletin composer: the audience checkbox rows (Manage Bulletin Board) ---- */
.app .bl-check { display:flex; align-items:center; gap:8px; padding:5px 2px; font-size:13px; cursor:pointer; }
.app .bl-check input { width:16px; height:16px; accent-color:var(--orange); cursor:pointer; }
.app .bl-check .meta { color:var(--muted); font-size:12px; }

/* ---- A named permission refusal, shown in place of a gated surface (ViewRefused) ---- */
.app .wd-refused { display:flex; gap:14px; align-items:flex-start; background:var(--card);
  border:1px solid var(--line); border-left:3px solid var(--orange); border-radius:var(--r);
  box-shadow:var(--shadow); padding:16px 18px; margin:14px 0; max-width:720px; }
.app .wd-refused .ic { width:34px; height:34px; flex:none; border-radius:8px; background:var(--orange-soft);
  color:var(--orange-ink); display:grid; place-items:center; }
.app .wd-refused .ic .c3-ico { width:18px; height:18px; }
.app .wd-refused h2 { margin:0 0 6px; font-size:15px; font-weight:800; color:var(--text); }
.app .wd-refused p { margin:0 0 6px; font-size:13px; line-height:1.5; color:var(--text); max-width:62ch; }
.app .wd-refused p.meta { color:var(--muted); font-size:12.5px; margin:0; }
.app .wd-refused code { font-family:var(--mono); background:var(--line-2); border-radius:4px; padding:1px 5px; }

/* ---- Chief Message (26) rows: ported with the markup from their approved mockup ----
   Three row-level classes their tables use. .unread is deliberately NOT ported: Chat 26's contract has
   no read state at all (most people act on the push and never open the portal), so the mockup's unread
   dot binds to nothing and the page does not draw one. */
.app .chan-tag { color:var(--muted); font-size:11px; margin-top:2px; }
.app .msgrow-crit { color:var(--under); font-weight:700; }

/* ---- Scheduling setup: the work-code / label colour swatch ----
   The stored PAIR rendered as given — the background and the readable foreground the palette shipped
   with it. Never a hardcoded white: it is unreadable on the palette's yellows, which is the whole
   reason the pair is stored together. */
.app .sch-swatch { display:inline-grid; place-items:center; min-width:34px; height:22px; padding:0 7px;
  border-radius:5px; font-size:11px; font-weight:800; letter-spacing:.02em; }

/* ---- Add / Edit Assignment: the approved two-column dialog (Brooks, 2026-10-23) ----
   Left is the assignment; right is a grey panel holding times, labels and the note. The panel is a
   real visual group in the design, not fields that happen to sit on the right — times and labels are
   what a manager adjusts repeatedly while the left side stays settled.
   One column below 900px: a phone cannot carry two of these side by side, and the grey panel then
   reads as a section rather than a sidebar. */
.app .sch-dlg2 { display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:start }
.app .sch-dlgmain { min-width:0 }
.app .sch-dlgside {
  background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:13px;min-width:0 }
/* The right COLUMN, which holds the grey panel and then the toggles under it. The toggles are not
   inside the panel: Brooks's design puts them "below the panel", because they are about what happens
   AFTER the save rather than about the times and labels the panel holds. They were full width at the
   bottom of the dialog, above the footer, which read as part of the footer. */
.app .sch-dlgcol { min-width:0;display:flex;flex-direction:column;gap:0 }
@media (max-width:900px) { .app .sch-dlg2 { grid-template-columns:minmax(0,1fr) } }

/* Two fields across, as the design pairs Schedule/Date and Member/Work code.
   align-items:start so the two labels sit on the same line. Without it the cells stretch and a field
   carrying a Hint pushes its partner's label down — Brooks: "the 4 fields at the top left are not
   lined up". Only Member has a hint, which is exactly why only that row looked wrong. */
.app .sch-pair {
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:start }
/* THE 14px THAT MISALIGNED THEM. chief360.css spaces consecutive fields with
   `.c3-field + .c3-field { margin-top:14px }`, and in a GRID the second cell is still an adjacent
   sibling in the DOM — so the right-hand field dropped 14px below its partner while the grid itself
   was perfectly fine. Measured, not guessed: both rows were off by exactly 14. The shared sheet
   already resets this inside .c3-fieldset for the same reason; a grid row needs it too, because the
   gap is the single source of spacing here. */
.app .sch-pair > .c3-field + .c3-field { margin-top:0 }
@media (max-width:620px) { .app .sch-pair { grid-template-columns:minmax(0,1fr) } }

/* "Ends Fri Oct 2 · 07:00 · Length 24 hours" — the line under the times. */
.app .sch-ends { font-size:11.5px;color:var(--muted);margin:7px 0 0 }
.app .sch-ends b { color:var(--text) }

/* ---- MEMBER: type to filter, which is what the mockup's placeholder promises ----
   A <select> cannot be typed into past its first letter and an agency's roster does not fit in one,
   so this is an input plus a results list that narrows as the name is typed.

   THE LIST FLOATS. It was in flow, which pushed the whole left column down as soon as the dialog
   opened and knocked the 2x2 field grid out of alignment — Brooks: "the Member selection should be a
   filtered drop down and not push everything down". Absolute, so the grid keeps its shape and the
   list overlays what is beneath it like any other dropdown. */
.app .sch-memb { position:relative }
/* The wrapper round the filter input is the closer anchor: the list sits under the input, not under the whole field. */
.app .sch-memb-wrap { position:relative }
.app .sch-memb-list {
  position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:70;
  border:1px solid var(--line);border-radius:8px;background:var(--card);box-shadow:var(--shadow);
  max-height:260px;overflow-y:auto;overscroll-behavior:contain }
/* The AVAILABILITY & STATUS reference list is the same rows but in flow: it is a reference table, not
   a dropdown, and the design gives it its own block. */
.app .sch-reflist {
  margin-top:6px;border:1px solid var(--line);border-radius:8px;background:var(--card);
  max-height:260px;overflow-y:auto;overscroll-behavior:contain }
.app .sch-memb-row {
  display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;
  border-top:1px solid var(--line-2);background:none;font:inherit;text-align:left;
  cursor:pointer;color:var(--text) }
.app .sch-memb-row:first-child { border-top:0 }
/* The availability REFERENCE rows carry the mockup's `.sch-avstrip` under the pills (flex-basis:100%), so
   those rows wrap; the type-to-filter picker rows above them stay one line. */
.app .sch-reflist .sch-memb-row { flex-wrap:wrap }
.app .sch-memb-row:hover, .app .sch-memb-row:focus-visible { background:var(--orange-soft) }
.app .sch-memb-row .nm { font-weight:700;font-size:12.5px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.app .sch-memb-row .det { font-size:11px;color:var(--muted);white-space:nowrap }
/* The chosen member becomes a CARD with a way out, which is also how the Edit dialog draws MEMBER. */
.app .sch-memb-sel {
  display:flex;align-items:center;gap:10px;padding:9px 11px;border:1px solid var(--line);
  border-radius:8px;background:var(--card) }
.app .sch-memb-sel .nm { font-weight:700;font-size:13px;flex:1;min-width:0 }
.app .sch-memb-none { padding:11px;color:var(--muted);font-size:12.5px;text-align:center }

/* ---- WORK CODE: the colour dot the design puts inside the control ----
   A native <select> cannot carry a swatch per option, so the dot shows the CHOSEN work type's colour
   and the select is padded to sit beside it. The colour is the one the board draws that work code
   in, so the field previews the strip. */
/* The CONTROL is the positioning context, not the field: a field is label + control, so centring the
   dot on the field puts it half a label too high. */
.app .sch-wc .c3-control { position:relative }
.app .sch-wc .dot {
  position:absolute;left:11px;top:50%;transform:translateY(-50%);
  width:10px;height:10px;border-radius:50%;pointer-events:none;z-index:1 }
.app .sch-wc select { padding-left:29px }
/* The picker that replaced the select (Brooks 2026-10-25: a dot on every item, not only the chosen one):
   a button drawn like the control, the member picker's list beneath it, a dot in flow on each row. */
.app .sch-wcpick { position:relative }
.app .sch-wcbtn { display:flex;align-items:center;gap:9px;width:100%;text-align:left;cursor:pointer }
.app .sch-wcbtn .nm { flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.app .sch-wcbtn .caret { color:var(--muted);font-size:12px }
.app .sch-wcdot { flex:none;width:10px;height:10px;border-radius:50%;border:1px solid rgba(0,0,0,.12) }
.app .sch-wcpick .sch-memb-row { flex-wrap:nowrap }

/* ---- Edit Assignment: Details / Notes / History tabs ---- */
.app .sch-tabs { display:flex;gap:2px;border-bottom:1px solid var(--line);margin-bottom:13px }
.app .sch-tab {
  appearance:none;-webkit-appearance:none;font:inherit;font-size:13px;font-weight:700;
  border:1px solid transparent;border-bottom:0;border-radius:8px 8px 0 0;padding:8px 14px;
  background:none;color:var(--muted);cursor:pointer;margin-bottom:-1px }
.app .sch-tab:hover { color:var(--text) }
/* #8F4A0E rather than --orange-ink (#b85f12): the ink on the soft fill measured 3.93:1, just under
   AA, and a tab label is the thing you read to know where you are. This is 5.1:1. */
.app .sch-tab.on {
  background:var(--orange-soft);border-color:var(--line);color:#8F4A0E }
.app[data-theme="dark"] .sch-tab.on { color:#E8A866 }

/* One note or one history line. A reply is indented against its parent. */
.app .sch-note { padding:9px 11px;border-top:1px solid var(--line-2) }
.app .sch-note:first-child { border-top:0 }
.app .sch-note.reply { padding-left:28px;background:var(--surface) }
/* NAMESPACED, because `.who` is an UNSCOPED global in chief360.css — `color:#cdd7e6` for the dark app
   bar. My note author inherited it and measured 1.45:1 on white: very nearly invisible, and the kind
   of thing a screenshot does not show at a glance. Generic words make poor class names in a
   stylesheet that still has unprefixed globals in it. */
.app .sch-note-who { display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--text) }
.app .sch-note-when { font-size:11px;color:var(--muted);font-family:var(--mono) }
.app .sch-note-txt { font-size:12.5px;margin-top:3px;white-space:pre-wrap;color:var(--text) }

/* The consequences list in the no-show confirm: short, concrete, and read before clicking. */
.app .sch-conseq { margin:8px 0 0;padding-left:18px;font-size:12.5px;line-height:1.55 }
.app .sch-conseq li { margin-bottom:3px }

/* The reason, folded away until it applies. */
.app .sch-reasonbox { margin-top:12px;border:1px solid var(--line);border-radius:8px;padding:9px 11px }
.app .sch-reasonbox > summary { cursor:pointer;font-size:12.5px;font-weight:700;color:var(--muted) }
.app .sch-reasonbox[open] > summary { margin-bottom:9px;color:var(--text) }

/* ---- The two toggles, label left and switch right, under the grey panel as the design has them. */
.app .sch-toggles { margin-top:12px;display:flex;flex-direction:column;gap:10px }
.app .sch-toggle { display:flex;align-items:center;gap:10px }
.app .sch-toggle .lbl { flex:1;min-width:0;font-size:13px;font-weight:700 }

/* ---- News composer: the category picker ----
   Toggle buttons rather than a multi-select, because a story usually has one or two categories out of
   a handful and a <select multiple> hides the choice behind a scroll and a ctrl-click. */
.app .nr-catpicks { display:flex;flex-wrap:wrap;gap:6px }
.app .nr-catpick {
  appearance:none;-webkit-appearance:none;font:inherit;font-size:12px;font-weight:600;
  border:1px solid var(--line);border-radius:20px;padding:5px 12px;min-height:32px;
  background:var(--card);color:var(--text);cursor:pointer }
.app .nr-catpick:hover { border-color:var(--side-hi) }
.app .nr-catpick.on { background:var(--orange);border-color:var(--orange);color:#fff }
/* The pressed state is carried by colour AND by aria-pressed; the focus ring has to survive both. */
.app .nr-catpick:focus-visible { outline:2px solid var(--side-hi);outline-offset:2px }

/* ---- Scheduling setup: rotations nested under their shift, and the pattern list ---- */
.app .am-lrow.sch-sub { padding-left:46px; background:var(--surface); }
.app .sch-patterns { max-height:260px; overflow-y:auto; overscroll-behavior:contain; margin-bottom:4px; }


/* ============================================================================
   DARK MODE — the night variants for tints that no token will flip.

   WHY THIS BLOCK EXISTS. The portal's page CSS is ported from mockups that were drawn light-only.
   Panels said `background:#fff` outright (now fixed in place, pointing at --card / --input-bg), and
   the chips, caption bars, tab bars and hover fills say things like #eef4fb, #FFF4D6 and #f6f8fb —
   literal light values with no token behind them. In dark mode every one of those stayed light. On
   2026-10-23 Brooks sent a phone screenshot of the 7 Day board: white table, white toolbar, white
   chips, on a dark page.

   The fix follows the convention chief360.css already set — "light tints that don't come from a
   token need a night variant" — and reuses ITS palette rather than inventing a second one:
     red #3A1F1C / ink #F0A79B    amber #3A2F16 / ink #E6C072    purple #241B3C / ink #B49BEE
     green #16311F / ink #6FD39B  blue  #16263B / ink #7BB0EE    neutral #1C2530
   A tint whose rule already sets color:var(--muted) or var(--text) needs only the background; those
   tokens flip on their own.

   OVERRIDES, NOT EDITS. Everything here is additive under [data-theme="dark"], so light mode is
   provably unchanged — which matters, because these are approved visuals.

   DELIBERATELY STILL LIGHT: the dot on the today pill, the shift chip on the navy table header, the
   dot on the orange vacancy pill, the switch knob, and the .sch-my / .sch-mykey work-type swatches.
   Those are white or bright ON a colour in BOTH themes; turning them dark makes them disappear.
   ============================================================================ */

/* ---- neutral inset surfaces: caption bars, tab bars, hints, pagers, hovers, grey cells ---- */
.app[data-theme="dark"] .am-cap,
.app[data-theme="dark"] .dm-cap,
.app[data-theme="dark"] .dm-hint,
.app[data-theme="dark"] .dm-tabbar,
.app[data-theme="dark"] .dm-pager,
.app[data-theme="dark"] .im-tabbar,
.app[data-theme="dark"] .im-auditkey,
.app[data-theme="dark"] .sch-mcell.out,
.app[data-theme="dark"] .sch-sucard.sec,
.app[data-theme="dark"] .sch-patbox,
.app[data-theme="dark"] .sch-patmini i,
.app[data-theme="dark"] .sch-otc.reg,
.app[data-theme="dark"] .sch-preset[disabled],
.app[data-theme="dark"] button.sch-railitem:hover,
.app[data-theme="dark"] .dm-qbtn.other:hover,
.app[data-theme="dark"] .nra-dialog .nc-thumb { background:#1C2530 }

/* ---- filled grey tracks: a "no data" strip and the switch track must still READ as filled ---- */
.app[data-theme="dark"] .sch-avstrip .nd,
.app[data-theme="dark"] .sch-avkey.nd,
.app[data-theme="dark"] .dm-switch { background:#39424E }

/* ---- blue / information ---- */
.app[data-theme="dark"] .sch-occ,
.app[data-theme="dark"] .sch-cov.fill,
.app[data-theme="dark"] .sch-cand.sel { background:#16263B;border-color:var(--line) }
.app[data-theme="dark"] .sch-count.over,
.app[data-theme="dark"] .sch-elig .b.info,
.app[data-theme="dark"] .dm-chip { background:#16263B;color:#7BB0EE;border-color:var(--line) }
.app[data-theme="dark"] .am-linknote { background:#16263B;border-color:var(--line) }
.app[data-theme="dark"] .dm-qbtn.law:hover { background:#16263B }
/* The time pill inside an occupant chip was an 80%-white scrim — opaque enough to stay a white
   lozenge on the night fill. A low-alpha WHITE still lifts the surface in dark mode. */
.app[data-theme="dark"] .sch-occ .tm { background:rgba(255,255,255,.08);color:#B6C2D1 }
/* --muted on that scrim measured 2.97:1, and this is 9.5px mono — the smallest type on the board,
   where the margin matters most. #B6C2D1 is 6.9:1 on the composited fill. Light mode already
   measured clean, so this is dark-only. */

/* ---- green / covered ---- */
.app[data-theme="dark"] .sch-count.ok,
.app[data-theme="dark"] .sch-elig .b.ok,
.app[data-theme="dark"] .sch-life .st.done,
.app[data-theme="dark"] .sch-pub.published,
.app[data-theme="dark"] .am-tag.on,
.app[data-theme="dark"] .am-scap { background:#16311F;color:#6FD39B;border-color:var(--line) }
.app[data-theme="dark"] .dm-qbtn.ems:hover { background:#16311F }

/* ---- red / short ---- */
.app[data-theme="dark"] .sch-count.under,
.app[data-theme="dark"] .sch-elig .b.bad,
.app[data-theme="dark"] .sch-dq .n,
.app[data-theme="dark"] .am-blocked,
.app[data-theme="dark"] .am-err { background:#3A1F1C;color:#F0A79B;border-color:var(--line) }
.app[data-theme="dark"] .btn.pm-btn-danger:hover:not(:disabled),
.app[data-theme="dark"] .am-danger:hover:not(:disabled) { background:#3A1F1C;color:#F0A79B }
.app[data-theme="dark"] .dm-qbtn.fire:hover { background:#3A1F1C }

/* ---- amber / draft, overrun, vacancy ---- */
.app[data-theme="dark"] .sch-elig .b.warn,
.app[data-theme="dark"] .sch-pub.draft,
.app[data-theme="dark"] .sch-pub.mixed,
.app[data-theme="dark"] .sch-dr,
.app[data-theme="dark"] .sch-ovrchip,
.app[data-theme="dark"] .sch-railitem.vac,
.app[data-theme="dark"] .sch-tier.coerce,
.app[data-theme="dark"] .sch-tier.coerce .n,
.app[data-theme="dark"] .sch-otc.flsa { background:#3A2F16;color:#E6C072;border-color:#5C4A22 }
.app[data-theme="dark"] .ra-pbar { background:#3A2F16 }

/* ---- the hatched "open / not covered" fills: same hatch, night amber ---- */
.app[data-theme="dark"] .sch-occ.vac,
.app[data-theme="dark"] .sch-cov.vac {
  background:repeating-linear-gradient(45deg,#3A2F16,#3A2F16 6px,#2E2512 6px,#2E2512 12px);
  color:#E6C072;border-color:#5C4A22 }
.app[data-theme="dark"] .sch-bar.gap {
  background:repeating-linear-gradient(45deg,#3A2F16,#3A2F16 5px,#2E2512 5px,#2E2512 10px);
  color:#E6C072;border-color:#5C4A22 }

/* ---- the crop checkerboard: it must still read as "transparent", not as a panel ---- */
.app[data-theme="dark"] .am-cropbox {
  background:var(--surface) repeating-linear-gradient(45deg,#1C2530 0 10px,#222A34 10px 20px) }

/* ---- SHIFTS & ROTATIONS: rotation blocks, the pattern chips, the Members panel and the change-impact
   step (Scheduling 4177 / 4178 / 4184; mockup rev 2.78c–f). Ported from the mockup with its #fff panels
   re-tokened: the mockup is light-only, and a white table in the dark theme is a torch. ---- */
.app .sch-patmini { display:inline-flex;gap:2px;flex-wrap:wrap;max-width:260px;vertical-align:middle }
.app .sch-patmini i { width:12px;height:12px;border-radius:3px;background:#eceff3;border:1px solid var(--line-2);font-style:normal }
.app .sch-patmini i.on { background:var(--orange);border-color:var(--orange) }
.app .sch-patmini i.sch-ltr { width:auto;min-width:14px;height:14px;padding:0 2px;display:inline-grid;place-items:center;
  font-family:var(--mono);font-size:9px;font-weight:800;line-height:1;color:var(--orange-ink);background:var(--orange-soft);border:1px solid var(--orange) }
.app .sch-patmini i.sch-ltr.k1 { color:#fff;background:var(--navy);border-color:var(--navy) }
.app .sch-patmini i.sch-ltr.k2 { color:#6D4AC7;background:#efe9fb;border-color:#d9cdf3 }
.app .sch-patmini i.sch-ltr.k3 { color:var(--ok);background:#e1f3e9;border-color:#b9e0c9 }
.app[data-theme="dark"] .sch-patmini i { background:#1F2731;border-color:#2E3845 }
.app[data-theme="dark"] .sch-patmini i.sch-ltr.k2 { color:#B49BEE;background:#241B3C;border-color:#3B2E5E }
.app[data-theme="dark"] .sch-patmini i.sch-ltr.k3 { color:#6FD39B;background:#16311F;border-color:#245A36 }
.app .sch-tscroll table.sch-blk { min-width:640px }
.app .sch-blk td { vertical-align:middle }
.app .sch-blk input.sch-blkl { width:48px;min-width:48px;text-transform:uppercase;font-family:var(--mono);font-weight:800;text-align:center }
.app .sch-blk .sch-blkn { min-width:120px }
.app .sch-blk .sch-blkt { width:112px;min-width:104px }
.app .sch-blk .btn.sm { min-height:34px;padding:4px 9px }
.app .sch-tscroll table.sch-memtbl { min-width:1080px }
.app .sch-memtbl td { vertical-align:top }
.app .sch-rotmem { border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:var(--r);padding:12px 14px;background:var(--card);margin:2px 0 8px }
.app .sch-check { display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;text-transform:none;letter-spacing:0;color:var(--text);margin:8px 0 }
.app .sch-impsum { margin-top:12px;padding:10px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:700 }
.app .sch-impsec { margin-top:14px }
.app .sch-impsec .sch-subhead { margin:0 0 6px }
.app .sch-impsec .sch-impmeta { font-size:11.5px;color:var(--muted);margin:0 0 6px }
.app .sch-warnline { font-size:11.5px;color:#8C5F0E;margin:2px 0 0 }
.app .sch-warnline.red { color:var(--under) }
.app[data-theme="dark"] .sch-warnline { color:#E6C072 }
.app[data-theme="dark"] .sch-warnline.red { color:#F0A79B }
.app .sch-rotstatus { margin-left:6px }

/* ---- MY TIMESHEET (Scheduling 4175): a row that changed after the member checked it ---- */
.app .sch-reverify td:first-child { border-left:3px solid #d99114 }
.app .sch-reverify { background:#fdf6e8 }
.app[data-theme="dark"] .sch-reverify { background:#2E2512 }
/* The No-show action pill is red, as the mockup draws it (style color var(--under) on the pill). */
.app .sch-choice.sch-danger { color:var(--under) }

/* ── Pass Down Log (Event Calendar, Chat 32) — ported from the mockup's .ec-pd block 2026-10-25. Card
   surfaces use the token, not #fff (ported mockup CSS is light-only); the two status tints set bg AND
   text together so they hold in either theme. ── */
.app .ec-pd-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:12px}
.app .ec-pd-toolbar select{max-width:260px;font-weight:700}
.app .ec-pd-nav{display:flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:8px;background:var(--card);padding:3px}
.app .ec-pd-nav button{border:0;background:transparent;width:30px;height:30px;border-radius:6px;cursor:pointer;color:var(--muted);font-size:16px}
.app .ec-pd-nav button:hover:not(:disabled){background:var(--line-2)}
.app .ec-pd-nav button:disabled{opacity:.4;cursor:default}
.app .ec-pd-nav .lbl{font-weight:800;font-size:12.8px;padding:0 6px;min-width:178px;text-align:center}
.app .ec-pd-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.app .ec-pd-cat{border:1px solid var(--line);background:var(--card);border-radius:20px;padding:4px 11px;font-size:11.5px;font-weight:700;display:inline-flex;gap:6px;align-items:center;color:var(--muted)}
.app .ec-pd-cat i{width:9px;height:9px;border-radius:50%}
.app .ec-pd-cat.on{color:var(--text);border-color:var(--text)}
.app .ec-pd-status{display:flex;gap:10px;align-items:center;border-radius:10px;padding:10px 14px;margin-bottom:12px;font-size:12.8px}
.app .ec-pd-status.open{background:#FFF4D6;color:#7a5410}
.app .ec-pd-status.closed{background:#e1f3e9;color:#1d6b44}
.app .ec-pd-status b{font-weight:800}
.app .ec-pd-split{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:16px;align-items:start}
.app .ec-pd-split > .w{grid-column:auto;min-width:0}
@media (max-width:1100px){.app .ec-pd-split{grid-template-columns:1fr}}
.app .ec-pd-entry{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:9px}
.app .ec-pd-entry .top{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:6px}
.app .ec-pd-entry .tm{font-family:var(--mono,monospace);font-size:12px;color:var(--muted);font-weight:700}
.app .ec-pd-entry .cat{border-radius:20px;padding:2px 10px;font-size:11px;font-weight:800}
.app .ec-pd-entry .txt{font-size:13.2px;line-height:1.45;white-space:pre-wrap}
.app .ec-pd-entry .meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px;font-size:11.5px;color:var(--muted)}
.app .ec-pd-entry .meta .chip{background:var(--line-2);border-radius:6px;padding:2px 8px;font-weight:700;color:var(--text)}
.app .ec-pd-entry .meta .src{background:#e6f0fb;color:var(--over);border-radius:6px;padding:2px 8px;font-weight:800}
.app .ec-pd-entry .meta a{margin-left:auto;font-weight:700;font-size:11.5px;color:var(--orange-ink,#b45f06);text-decoration:none}
.app .ec-pd-foot{color:var(--muted);font-size:11.8px;padding:6px 2px 14px}
.app .ec-pd-per{display:flex;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.3px;cursor:pointer}
.app .ec-pd-per:last-child{border-bottom:0}
.app .ec-pd-per.on{font-weight:800}
.app .ec-pd-per .grow{flex:1;min-width:0}
.app .ec-pd-empty{text-align:center;color:var(--muted);padding:28px 10px;border:1px dashed var(--line);border-radius:10px;background:var(--card)}

/* ── Offices & Terms (Personnel, Chat 1) — ported from the Personnel mockup 2026-10-25: filter bar, table wrap,
   the toggle chip, holder chips and the term tag. Card surfaces use the token, not #fff. ── */
.app .pm-filterbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:10px 12px;margin-bottom:14px}
.app .pm-filterbar .field{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;color:var(--muted)}
.app .pm-filterbar select{max-width:280px}
.app .pm-filterbar .grow{flex:1}
.app .pm-tablewrap{overflow-x:auto}
.app .wchip{font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer}
.app .wchip.on{color:var(--orange-ink);border-color:var(--orange);background:var(--orange-soft)}
.app .pm-holders{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.app .pm-holders .pm-person{margin:0}
.app .pm-termcur{font-size:11px;font-weight:700;color:var(--orange-ink);background:var(--orange-soft);border:1px solid #f0d4b3;border-radius:20px;padding:2px 9px;margin-left:8px}
.app .pm-dual .mid{display:grid;place-items:center;color:var(--muted);font-size:18px}
.app .pm-dual .list .it .grow{flex:1;min-width:0}
/* Qualifications (mockup .pm-qchip): the abbreviation Scheduling shows on a slot. The type's colour is not on the
   record this host reads, so the chip wears the card tokens rather than an invented pair. */
.app .pm-qchip{display:inline-block;padding:2px 10px;border-radius:20px;font-weight:700;font-size:12px;background:var(--line);color:var(--text)}
/* Pass Down setup (mockup pdSetupDlg): the who-sees-which-category matrix and the per-log rows. */
.app .ec-pd-matrix{width:100%;border-collapse:collapse;font-size:12.3px}
.app .ec-pd-matrix th,.app .ec-pd-matrix td{border-bottom:1px solid var(--line);padding:7px 6px;text-align:center}
.app .ec-pd-matrix th:first-child,.app .ec-pd-matrix td:first-child{text-align:left}
.app .ec-pd-sc{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.app .ec-pd-sc:last-child{border-bottom:0}
.app .ec-pd-sc .grow{flex:1;min-width:160px}
.app .ec-pd-dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px;vertical-align:middle}

/* Newsroom composer — featured image (2026-10-26, mockup nr-feat*) */
.app .nr-feat { display:flex; gap:10px; align-items:center; margin:0 0 8px }
.app .nr-featthumb { width:96px; height:64px; object-fit:cover; border-radius:6px; border:1px solid var(--line) }

/* Newsroom settings — mailing list cards (2026-10-26, mockup nr-mlcard) */
.app .nr-mlcard { display:flex; align-items:center; gap:14px; padding:12px 14px; border:1px solid var(--line); border-radius:10px; margin:0 0 8px; background:var(--card) }
.app .nr-mlcard.on { border-color:var(--orange) }
.app .nr-mlcard .big { font-size:22px; font-weight:700; min-width:72px; text-align:center; line-height:1.1 }
.app .nr-mlcard .big small { display:block; font-size:11px; font-weight:400; color:var(--muted) }
.app .nr-mlcard .nm { font-weight:600 }
.app .nr-mlcard .d { color:var(--muted); font-size:12px }

/* Personnel — person editor (mockup personDlg: vertical grouped rail + scrolling panes; 2026-10-30) */
.app .pm-editor { display:flex; max-height:64vh; min-height:360px }
.app .pm-tabs { width:186px; flex:none; border-right:1px solid var(--line); display:flex; flex-direction:column; overflow-y:auto }
.app .pm-tab { border:0; border-left:3px solid transparent; border-bottom:1px solid var(--line-2); background:transparent; text-align:left;
  padding:8px 13px; font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer; display:flex; align-items:center }
.app .pm-tab:hover { background:var(--orange-soft) }
.app .pm-tab.on { background:var(--card); border-left-color:var(--orange); color:var(--orange-ink); font-weight:700 }
.app .pm-tabgrp { background:var(--surface); color:var(--muted); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em;
  padding:6px 13px; border-bottom:1px solid var(--line-2); flex:none }
.app .pm-lock { display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; border-radius:50%; background:#8a6d3b;
  flex:none; margin-left:auto }
.app .pm-panes { flex:1; min-width:0; overflow-y:auto; padding:16px 18px }
.app .pm-kv { display:grid; grid-template-columns:150px 1fr; gap:9px 16px; font-size:13px; margin-bottom:12px }
.app .pm-kv .k { color:var(--muted); font-weight:600 }
/* Person editor identity strip and the palette (mockup .pm-idstrip, .colorgrid; Personnel 5187) */
.app .pm-idstrip { display:flex; align-items:center; gap:14px; padding:4px 0 14px; margin-bottom:14px; border-bottom:1px solid var(--line) }
.app .pm-idphoto { position:relative; width:60px; height:60px; border-radius:50%; border:2px solid var(--orange); padding:0;
  background:var(--side); color:#fff; font-size:19px; font-weight:700; cursor:pointer; flex:none; display:grid; place-items:center; overflow:hidden }
.app .pm-idphoto img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover }
.app .pm-idphoto .cam { position:absolute; right:0; bottom:0; width:20px; height:20px; border-radius:50% 0 0 0; background:var(--orange);
  color:#fff; display:grid; place-items:center; opacity:.9 }
.app .pm-idphoto:hover .cam, .app .pm-idphoto:focus-visible .cam { opacity:1 }
.app .pm-idphoto:focus-visible { outline:2px solid var(--orange); outline-offset:2px }
.app .pm-idname { font-size:17px; font-weight:700; color:var(--text); margin-bottom:5px }
.app .pm-idpills { display:flex; flex-wrap:wrap; gap:6px }
.app .pm-h { margin:16px 0 8px; font-size:13px; font-weight:800; color:var(--text); display:flex; align-items:center; gap:4px }
.app .pm-saved { margin-left:auto; font-size:11px; font-weight:700; color:var(--ok); opacity:0; transition:opacity .2s }
.app .pm-saved.on { opacity:1 }
.app .pm-chk { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:6px }
.app .pm-chk label { display:flex; align-items:center; gap:9px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); font-size:13px; color:var(--text); cursor:pointer; min-height:38px }
.app .pm-chk label:hover { border-color:var(--orange) }
.app .pm-chk label.on { background:color-mix(in srgb, var(--over) 12%, var(--card)); border-color:var(--over) }
.app .pm-chk input { width:16px; height:16px; accent-color:var(--over); flex:none }
.app .pm-chk label.lock { cursor:default; opacity:.85 }
.app .pm-chk label .meta { margin-left:auto; font-size:11px; color:var(--muted) }
.app .pm-pick { display:flex; align-items:center; gap:6px; min-height:34px }
.app .pm-pick .grow { flex:1; min-width:0 }
.app .colorgrid { display:flex; flex-wrap:wrap; gap:2px; max-width:680px }
.app .colorbox { width:32px; height:32px; border:0; padding:0; cursor:pointer; display:grid; place-items:center; font-size:16px; line-height:1 }
.app .colorbox.selected { box-shadow:inset 0 0 0 2px #fff, 0 0 0 1px rgba(0,0,0,.35) }
.app .colorbox:focus-visible { outline:2px solid var(--text); outline-offset:2px }
@media (max-width:760px) { .app .colorbox { width:40px; height:40px } }
.app .pm-sechead { font-weight:800; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); margin:14px 0 6px }
.app .pm-sechead:first-child { margin-top:0 }
.app .pm-mf { display:flex; align-items:center; gap:8px; padding:10px 18px; border-top:1px solid var(--line) }
.app .pm-mf .grow { flex:1; color:var(--muted); font-size:12px }
/* .c3-field + .c3-field drops a grid row's second cell 14px (same bug as .sch-fgrid); the grid's gap spaces it. */
.app .am-grid2 > .c3-field, .app .am-grid3 > .c3-field { margin-top:0 }
.app .am-grid2 + .am-grid2 { margin-top:14px }
@media (max-width:760px) {
  .app .pm-editor { flex-direction:column; max-height:none }
  .app .pm-tabs { width:auto; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--line) }
  .app .pm-tabgrp { display:none }
  .app .pm-tab { border-left:0; border-bottom:3px solid transparent; white-space:nowrap }
  .app .pm-tab.on { border-bottom-color:var(--orange) }
}

/* Newsroom review dialog (mockup #reviewscrim): body | on-approval + history; comment + decisions in the foot. */
.app .nr-reviewgrid { display:grid; grid-template-columns:1fr 300px; gap:16px }
.app .nr-rv-card { border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--surface); font-size:12.5px; display:flex; flex-direction:column; gap:6px }
.app .nr-rv-card h4 { margin:0 0 4px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) }
.app .nr-timeline { list-style:none; margin:0; padding:0 }
.app .nr-timeline li { position:relative; padding:0 0 12px 20px; font-size:12.5px }
.app .nr-timeline li::before { content:""; position:absolute; left:3px; top:3px; width:9px; height:9px; border-radius:50%; background:var(--side) }
.app .nr-timeline li::after { content:""; position:absolute; left:7px; top:12px; bottom:0; width:1px; background:var(--line) }
.app .nr-timeline li:last-child::after { display:none }
.app .nr-timeline .w { color:var(--muted); font-size:11.5px }
.app .nr-reviewfoot { display:flex; flex-direction:column; gap:10px; border-top:1px solid var(--line); margin-top:16px; padding-top:12px }
.app .nr-commentbox { width:100%; border:1px solid var(--line); border-radius:8px; padding:9px 11px; font:inherit; min-height:56px; resize:vertical; background:var(--input-bg); color:var(--text) }
@media (max-width:760px) { .app .nr-reviewgrid { grid-template-columns:1fr } }

/* Newsroom reader: the author's body, read-only. */
.app .nr-readbody { line-height:1.55 }
.app .nr-readbody img, .app .nr-readbody video { max-width:100%; height:auto }

/* My Account › Agencies — member Request access dialog (UserProfile mockup rev 4, upReqDlg; 2026-10-30) */
.app .up-kw { display:flex; gap:8px; align-items:stretch }
.app .up-kw .agsearch { flex:1; min-width:0; margin:0; border:1px solid var(--line); border-radius:8px; padding:10px 12px; font:inherit; font-size:13.5px; background:var(--input-bg); color:var(--text) }
.app .up-kw .agsearch:focus { outline:none; border-color:var(--orange) }
.app .up-kw .btn { min-height:40px }
.app .up-kwhint { margin:6px 0 8px; font-size:12px; color:var(--muted) }
.app .wempty { text-align:center; color:var(--muted); padding:24px 12px; font-size:13px }

/* Newsroom settings — mockup nrview-settings / categories / msgtypes / mailing / social (2026-10-30).
   Ported from the approved HTML and tokened, so the night theme flips with the rest of the pane. */
.app .nr-cfgbar { display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:11.5px; color:var(--muted); margin:0 0 6px }
.app .nr-cfgbar .sp { flex:1 }
.app .nr-badge-lock { background:var(--surface); color:var(--muted); border-radius:6px; padding:1px 7px; font-size:10.5px; font-weight:700; white-space:nowrap }
.app .nr-tabs { display:flex; flex:none; border-bottom:1px solid var(--line); gap:2px; overflow-x:auto; overflow-y:hidden; margin-bottom:14px }
.app .nr-tabs button { border:0; background:transparent; padding:13px 4px; margin-right:14px; font-size:12.5px; font-weight:700; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; white-space:nowrap }
.app .nr-tabs button:hover { color:var(--text) }
.app .nr-tabs button.on { color:var(--side); border-bottom-color:var(--orange) }
.app[data-theme="dark"] .nr-tabs button.on { color:var(--text) }
.app .nr-setcol { display:flex; flex-direction:column; gap:16px; max-width:900px }
.app .nr-setcol > .w, .app .nr-wcard { grid-column:auto }
.app .nr-setrow { display:flex; align-items:center; gap:12px; padding:11px 0; border-top:1px solid var(--line-2); flex-wrap:wrap }
.app .nr-setrow:first-child { border-top:0 }
.app .nr-setrow .grow { flex:1; min-width:220px }
.app .nr-setrow .tt { font-weight:700; font-size:13px }
.app .nr-setrow .td { color:var(--muted); font-size:11.5px }
.app .nr-setrow select, .app .nr-setrow input[type=number] { border:1px solid var(--line); border-radius:8px; padding:7px 10px; font:inherit; background:var(--input-bg); color:var(--text) }
.app .nr-setrow select:disabled, .app .nr-setrow input:disabled { opacity:.75; cursor:not-allowed }
.app .nr-switch { width:40px; height:23px; border-radius:20px; background:#cfd6df; position:relative; flex:none }
.app .nr-switch::after { content:""; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%; background:#fff; box-shadow:0 1px 2px #0003 }
.app .nr-switch.on { background:var(--ok) }
.app .nr-switch.on::after { left:19px }
.app .nr-switch.locked { opacity:.55; cursor:not-allowed }
.app[data-theme="dark"] .nr-switch { background:#3A4552 }
.app[data-theme="dark"] .nr-switch.on { background:var(--ok) }
.app .nr-visseg { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden }
.app .nr-visseg button { border:0; background:var(--card); padding:9px 18px; font-size:13px; font-weight:700; color:var(--muted); border-right:1px solid var(--line) }
.app .nr-visseg button:last-child { border-right:0 }
.app .nr-visseg button.on { background:var(--side); color:#fff }
.app .nr-visseg button:disabled { cursor:not-allowed }
.app .nr-nudge { display:flex; align-items:center; gap:12px; background:#fff8e6; border:1px solid #f0e2b6; border-radius:8px; padding:9px 14px; font-size:12.5px; color:#7a5b12; margin-bottom:12px; flex-wrap:wrap }
.app .nr-nudge .grow { flex:1; min-width:190px }
.app[data-theme="dark"] .nr-nudge { background:#3A2F16; border-color:#5A4720; color:#E6C072 }
.app .nr-imgrow { display:flex; align-items:center; gap:14px; flex-wrap:wrap }
.app .nr-imgthumb { width:104px; height:66px; border-radius:8px; border:1px solid var(--line); flex:none; background-color:#dfe7f1; background-size:cover; background-position:center; background-repeat:no-repeat }
.app .nr-imgmeta { flex:1; min-width:170px }
.app .nr-imgmeta .nm { display:block; font-weight:800; font-size:13px }
.app .nr-imgmeta .d { display:block; color:var(--muted); font-size:11.5px; margin-top:2px }
.app .nr-img-default { background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 100'><rect width='160' height='100' fill='%2313233D'/><circle cx='80' cy='36' r='15' fill='none' stroke='%23E8731C' stroke-width='4'/><path d='M73 36h14M80 29v14' stroke='%23E8731C' stroke-width='4' stroke-linecap='round'/><rect y='84' width='160' height='16' fill='%23E8731C'/><text x='80' y='70' fill='%23cdd7e6' font-family='Arial,Helvetica,sans-serif' font-size='9' letter-spacing='1' text-anchor='middle'>CHIEF 360 DEFAULT</text></svg>") }
.app .nr-imgthumb.sm { width:62px; height:40px; border-radius:6px }
/* An agency library picture, until read links can be served: a neutral picture glyph, not a fake photo. */
.app .nr-img-agency { background-color:var(--surface); background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393A0AE' stroke-width='1.6'><rect x='3' y='5' width='18' height='14' rx='2'/><circle cx='9' cy='10' r='1.6'/><path d='M21 16l-5-5-8 8'/></svg>"); background-size:40% auto }
.app .nr-panel { border:1px solid var(--line); border-radius:10px; padding:14px; margin-top:14px; background:var(--surface) }
.app .nr-panel > .ph { display:flex; align-items:center; gap:8px; font-weight:800; font-size:13px; margin-bottom:12px }
.app .nr-catname { display:flex; align-items:center; gap:10px }
.app .nr-catname .child-mark { color:var(--muted); margin-right:2px }
.app .nr-catname .c3-tile { width:28px; height:28px; border-radius:8px; flex:none }
.app .nr-chip { font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:6px; border:1px solid var(--line); color:var(--muted); background:var(--card); display:inline-block }
.app .nr-chip.int { border-color:#c7d9ef; background:#eaf2fc; color:var(--over) }
.app[data-theme="dark"] .nr-chip.int { border-color:#24405F; background:#16263B; color:#7BB0EE }
.app .nr-locked { color:var(--muted-2); text-align:center }
/* A Chief360Table inside a black-headed card: the card owns the black band, so the table's own
   head drops to the mockup's quiet surface row and loses its border. */
.app .w-body.flush { padding:0 }
.app .w-body.flush .table { border:0; border-radius:0 }
.app .w-body.flush .table thead th { background:var(--surface); color:var(--text); border-bottom:1px solid var(--line) }
.app .w-foot .td { color:var(--muted) }
.app .nr-ctgrid { display:grid; grid-template-columns:1.6fr 1fr; gap:18px; max-width:1200px; align-items:start }
.app .nr-tagsearch { width:100%; border:1px solid var(--line); border-radius:8px; padding:8px 11px; font:inherit; background:var(--input-bg); color:var(--text); margin:0 0 12px }
.app .nr-tagflow { display:flex; flex-wrap:wrap; gap:8px }
.app .nr-tg { display:inline-flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:20px; padding:5px 6px 5px 12px; font-size:12.5px; font-weight:600; background:var(--card) }
.app .nr-tg .ct { color:var(--muted); font-size:11px }
.app .nr-tg button { border:0; background:transparent; color:var(--muted); cursor:pointer; padding:0 4px; font:inherit; font-size:12px }
.app .nr-tg button:hover { color:var(--orange) }
.app .nr-addtag { display:flex; gap:8px; margin-top:14px }
.app .nr-addtag input { flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 11px; font:inherit; background:var(--input-bg); color:var(--text) }
.app .nr-acctgrid { display:grid; gap:12px; max-width:940px }
.app .nr-acct { background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); display:flex; align-items:center; gap:14px; padding:14px; flex-wrap:wrap }
.app .nr-acct .pic { width:44px; height:44px; border-radius:10px; flex:none; display:grid; place-items:center; color:#fff; font-weight:800; font-size:15px; background:#5A6775 }
.app .nr-acct .grow { flex:1; min-width:0 }
.app .nr-acct .nm { font-weight:800; font-size:14px }
.app .nr-acct .hd { color:var(--muted); font-size:12px; margin-top:2px }
.app .nr-acct .acts { display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.app .nr-mllist { display:grid; gap:12px; max-width:1000px }
.app .nr-mllist .nr-mlcard { margin:0 }
.app .nr-mlcard .big.pend { color:#9A6A12 }
.app[data-theme="dark"] .nr-mlcard .big.pend { color:#E6C072 }
@media (max-width:760px) { .app .nr-ctgrid { grid-template-columns:1fr } }

/* Shift Board — observed-holiday label on a day (2026-10-26, mockup rev 2.82) */
.app .sch-holiday { display:inline-block; margin-left:6px; padding:1px 7px; border-radius:999px; font-size:11px; font-weight:600; background:var(--amber-bg, rgba(245,158,11,.18)); color:var(--amber, #b45309); vertical-align:middle }
.app .sch-mcell .sch-holiday { display:block; margin:2px 0 0; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* rev 2.85: the rail's Publishing block, and the manager's Not open panel in the vacancy dialog (rev 2.83-2.84). */
.app .sch-railpub .sch-railitem { flex-wrap:wrap }
.app .sch-railpub .nm { white-space:normal;flex:1 1 140px }
.app .sch-vacnot { background:var(--card);border:1px solid var(--line);border-left:4px solid var(--under);border-radius:8px;padding:10px 13px;font-size:12.5px }
.app .sch-vacnot .ttl { font-weight:800;font-size:13px;margin-bottom:2px }

/* rev 2.86: Shifts as crew cards, and the crew Members dialog's chips. */
.app .sch-crewcard { align-items:flex-start;flex-wrap:wrap }
.app .sch-crewcard .lmain { display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 320px }
.app .sch-patchip { display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;font-size:11px;font-weight:700;background:var(--line-2, #eef1f5);color:var(--ink, inherit) }
.app .sch-crewhist { display:flex;flex-direction:column;gap:2px;margin-top:2px }
.app .sch-crewmore { display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%;justify-content:flex-end }
.app .sch-memchip { display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;font-size:10.5px;border:1px solid var(--line);color:var(--muted) }
.app .sch-memchip.warn { border-color:#eccfa3;background:#FFF8E6;color:#9A6A12 }
.app .sch-memtbl tr.off td { opacity:.7 }

/* Scheduling rev 2.87 (13-146): events on the Shift Board rail and the New special event dialog. Ported from the mockup
   with its literal colours swapped for tokens (an untokened tint inherits black text in dark mode). */
.app .sch-evitem { flex-wrap:wrap;border-left:4px solid var(--ec,var(--orange,#E07A1F));border-radius:0 6px 6px 0;text-align:left;width:100%;background:transparent;font:inherit;color:inherit;cursor:pointer }
.app .sch-evitem .where { flex-basis:100%;order:3;margin-top:2px }
.app .sch-evitem .sch-evstaff { flex-basis:100%;order:4;display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:4px;font-size:11px;color:var(--text) }
.app .sch-evitem .sch-evstaff b { font-family:var(--mono) }
.app .sch-evitem .sch-evstaff .short { color:var(--under) }
.app .sch-evitem.unstaffed { background:var(--input-bg);cursor:default }
.app .sch-evitem.unstaffed .nm { font-weight:500 }
.app .sch-evitem .sch-evacts { display:flex;gap:4px;margin-left:auto }
.app .sch-evfill { display:flex;gap:6px;align-items:center;flex-wrap:wrap }
.app .sch-evfill select { min-width:150px }
.app .sch-evrows td { vertical-align:top }
.app .sch-choice-l { display:inline-flex;gap:6px;align-items:center;font-size:13px;cursor:pointer }
.app .sch-field input[type=time], .app .sch-field input[type=datetime-local] { border:1px solid var(--line);border-radius:7px;padding:9px 10px;font-size:13px;background:var(--input-bg);font-family:inherit;min-height:40px;color:var(--text) }

/* Manager Board (2026-10-28, mockup view-manager): filter bar, held-for-manager box, right column, due colours. */
.app .sch-mgbar { display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px }
.app .sch-mgq { min-width:200px }
.app .sch-mgfoot { display:flex;gap:10px;align-items:center;margin:10px 0 0 }
.app .sch-mgcol { grid-column:span 4;display:flex;flex-direction:column;gap:14px;min-width:0 }
@media (max-width:1100px){ .app .sch-mgcol { grid-column:span 12 } }
.app .sch-holdbox { display:flex;gap:12px;align-items:flex-start;margin-bottom:10px;padding:12px;background:var(--amber-bg, rgba(245,158,11,.12));border:1px solid var(--amber);border-left:4px solid var(--amber);border-radius:6px }
.app .sch-holdmain { flex:1;min-width:0 }
.app .sch-holdttl { font-weight:700;color:var(--text);margin-bottom:4px }
.app .sch-holdlist { margin:8px 0 0 16px;border-left:2px solid var(--amber);padding:8px 0 0 12px;display:flex;flex-direction:column;gap:6px }
.app .sch-holdrow { display:flex;gap:8px;align-items:center }
.app .health .hr .bar i.ok { background:var(--ok) }
/* Radio Alert fleet widget: label left, count right (the hv value had no rule). */
.app .health .hr .hv { margin-left:auto;font-family:var(--mono);font-weight:700;font-size:12.5px }
.app .health .hr .hl { margin:0;font-size:12.5px }
.app .sch-due-warn { color:var(--amber);font-weight:700 }
.app .sch-due-hot { color:var(--under);font-weight:700 }
.app .ml-8 { margin-left:8px }

/* Reports (2026-10-28, mockup view-reports): library links that cannot run yet, and the one shown. */
.app .ql a.off { opacity:.5; cursor:not-allowed; color:var(--muted) }
.app .ql a.off:hover { border-color:var(--line); background:transparent }
.app .ql a.on { border-color:var(--orange); background:var(--orange-soft) }

/* Toggle rows (mockup .togglerow), used by Employee Approval and the settings switches (2026-10-28). */
.app .togglerow { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2);cursor:pointer }
.app .togglerow:last-child { border-bottom:0 }
.app .togglerow .tr-meta { flex:1;min-width:0 }
.app .togglerow .tr-t { display:block;font-weight:600;color:var(--text) }
.app .togglerow .tr-d { display:block;color:var(--muted);font-size:12px }

/* Multi-day special events (Scheduling 13-148, mockup rev 2.88): the Days table, the "Day 1 of 3" chip, "Members sign up for". */
.app .sch-evdays td { vertical-align:middle }
.app .sch-evdays .hrs { font-family:var(--mono);color:var(--muted) }
.app .sch-evdays .hrs.over { color:var(--under);font-weight:700 }
.app .sch-evdaychip { font-family:var(--mono);font-size:10px;font-weight:700;color:var(--orange-ink, var(--orange));background:var(--orange-soft);border-radius:10px;padding:1px 7px;margin-left:4px }
.app .sch-evsignfor { display:flex;flex-direction:column;gap:6px;margin-top:10px }

/* Auto-Fill (Scheduling 4915, mockup rev 2.90-2.91): rule cards, the editor's two columns, report tiles, the next-run note. */
.app .af-checks { border:1px solid var(--line);border-radius:6px;padding:6px 8px;background:var(--input-bg);max-height:140px;overflow-y:auto }
.app .af-checks label { display:block;padding:3px 0;font-weight:400 }
.app .af-rule { display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:12px;margin-bottom:10px }
.app .af-rule.off { opacity:.6 }
.app .af-seq { background:var(--navy);color:#fff;border-radius:50%;width:32px;height:32px;display:grid;place-items:center;flex:none;font-weight:700 }
.app .af-rule-body { flex:1;min-width:0 }
.app .af-rule-body .meta { line-height:1.5;margin-top:4px }
.app .af-rule-acts { display:flex;flex-direction:column;gap:6px;flex:none;align-items:flex-end }
.app .af-form { display:grid;grid-template-columns:1fr 1fr;gap:16px }
@media (max-width:760px){ .app .af-form { grid-template-columns:1fr } }
.app .af-form .sch-field { margin-bottom:12px }
.app .af-tiles { display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px;background:var(--surface);border-radius:8px;padding:12px;text-align:center }
.app .af-tile .num { font-size:20px;font-weight:800;font-family:var(--mono) }
.app .af-tile .lab { font-size:12px;color:var(--muted) }
.app .af-nextrun { background:var(--navy);color:#fff;border-radius:8px;padding:10px 12px;margin-top:12px;font-size:12.5px }
.app .af-nextrun .meta { color:#cfe0f2 }

/* Callouts (Scheduling 13-158, mockup rev 3.00: schDlgCallout, schDlgCalloutRecord, schDlgCalloutReview, schDlgCalloutReason).
   .sch-noshow-warn is the mockup's red-tinted sentence box, tinted from --under so it reads in both themes. */
.app .sch-noshow-warn { background:color-mix(in srgb, var(--under) 10%, var(--card));border:1px solid color-mix(in srgb, var(--under) 35%, var(--card));border-radius:8px;padding:9px 12px;margin:0 0 12px;font-size:13px;color:var(--text) }
.app .sch-co-retired td { opacity:.6 }
.app .dlg-foot .sch-co-retire { margin-right:auto }

/* Dashboards (Dashboard360) — Chat 3's area, mockup Chief360WatchDesk\DesignTemplates\Chief360Dashboard (2026-11-05).
   The in-content section rail (.db-rail), the (i) tip (.db-i), the table, the dashed "Add display" bar and the
   re-adopt question. Every colour is a token, so night mode flips with the rest of the portal; the tip and the
   rail head sit on --black in both themes, which is why their text is fixed white. */
.app .db-layout { display:flex;gap:16px;align-items:flex-start;max-width:1360px }
.app .db-rail { width:210px;flex:none;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;position:sticky;top:0;display:flex;flex-direction:column }
.app .db-railhead { background:var(--black);color:#fff;font-weight:700;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;padding:10px 13px }
.app .db-ritem { -webkit-appearance:none;appearance:none;background:none;border:0;border-left:3px solid transparent;display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 13px;font:inherit;font-size:13px;font-weight:600;color:var(--text);cursor:pointer }
.app .db-ritem .ico { width:18px;height:18px;flex:none;color:var(--muted);display:grid;place-items:center }
.app .db-ritem .ico svg { width:16px;height:16px }
.app .db-ritem:hover { background:var(--surface) }
.app .db-ritem.on { background:var(--orange-soft);border-left-color:var(--orange);color:var(--orange-ink) }
.app .db-ritem.on .ico { color:var(--orange-ink) }
.app .db-ritem:focus-visible { outline:2px solid var(--orange);outline-offset:-2px }
.app .db-panels { flex:1;min-width:0 }
.app .db-tbl { width:100%;border-collapse:collapse;font-size:13px;color:var(--text) }
.app .db-tbl th { background:var(--surface);padding:10px 12px;text-align:left;font-weight:700;border-bottom:1px solid var(--line);color:var(--text);white-space:nowrap }
.app .db-tbl td { padding:10px 12px;border-bottom:1px solid var(--line-2);vertical-align:top }
.app .db-tbl tbody tr:last-child td { border-bottom:0 }
.app .db-tbl tbody tr:hover { background:var(--surface) }
.app .db-tbl .meta { color:var(--muted);font-size:12px }
.app .db-tbl .btn.sm, .app .db-dlg .btn.sm { padding:5px 11px;font-size:12.5px }
.app .db-tbl .btn svg { width:15px;height:15px }
.app .db-i { display:inline-grid;place-items:center;width:16px;height:16px;margin-left:6px;color:var(--muted);cursor:help;position:relative;vertical-align:middle;font-weight:400 }
.app .db-i svg { width:14px;height:14px }
.app .db-i:hover, .app .db-i:focus-visible { color:var(--orange) }
.app .w-head .db-i { color:#aeb7c2 }
.app .db-i::after { content:attr(data-tip);display:none;position:absolute;left:-8px;top:calc(100% + 7px);width:max-content;max-width:min(280px,70vw);background:var(--black);color:#fff;padding:8px 10px;border-radius:7px;font-size:12px;font-weight:500;line-height:1.4;text-align:left;text-transform:none;letter-spacing:0;white-space:normal;box-shadow:var(--shadow);z-index:300 }
.app .db-i:hover::after, .app .db-i:focus::after { display:block }
.app th .db-i::after { left:auto;right:-8px }
.app .db-addw { width:100%;border:2px dashed var(--line);background:var(--card);color:var(--muted);border-radius:12px;padding:16px;font:inherit;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px }
.app .db-addw:hover { border-color:var(--orange);color:var(--orange-ink);background:var(--orange-soft) }
.app .db-addw svg { width:16px;height:16px }
.app .db-search { padding:12px 13px 0 }
.app .db-search .c3-search { margin-left:0;width:100% }
.app .db-warn { display:flex;align-items:flex-start;gap:7px;background:color-mix(in srgb, var(--under) 12%, var(--card));color:var(--text);border:1px solid color-mix(in srgb, var(--under) 35%, var(--card));border-radius:8px;padding:8px 11px;font-size:12.5px;font-weight:600;margin-top:12px }
.app .db-lbl2 { font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:8px }
.app .db-dlg .db-grow { flex:1;min-width:0;color:var(--muted);font-size:12px;text-align:left }
.app .db-dlg .db-remove { margin-right:auto }
@media (max-width:900px) {
  /* The rail becomes a scrolling strip above the panel, as the mockup does it; never a page-wide scroll. */
  .app .db-layout { flex-direction:column }
  .app .db-rail { width:100%;position:static;flex-direction:row;overflow-x:auto }
  .app .db-rail .db-railhead { display:none }
  .app .db-ritem { width:auto;white-space:nowrap;border-left:0;border-bottom:3px solid transparent }
  .app .db-ritem.on { border-bottom-color:var(--orange) }
}

/* Dashboards, slice 2 (2026-11-06): the layout editor, New layout gallery, page dialog, Theme Editor and Content
   Scheduler, ported from the same mockup. The mockup's #fff chip and button backgrounds are --card here, so the
   chips read in night mode; the zone schematic keeps the mockup's fixed blues because its text is white on them. */
.app .db-dlg.dialog.wide { width:min(980px,100%) }
.app .db-chips { display:flex;flex-wrap:wrap;gap:7px;margin:4px 0 2px }
.app .db-wchip { -webkit-appearance:none;appearance:none;font:inherit;font-size:12px;font-weight:700;padding:5px 11px;border-radius:20px;border:1px solid var(--line);background:var(--card);color:var(--muted);cursor:pointer }
.app .db-wchip:hover { border-color:var(--orange);color:var(--orange-ink) }
.app .db-wchip.on { background:var(--navy);border-color:var(--navy);color:#fff }
.app .db-wchip:disabled { opacity:.45;cursor:not-allowed }
.app .db-tchip { -webkit-appearance:none;appearance:none;display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:20px;padding:5px 11px;font:inherit;font-size:12px;font-weight:600;cursor:pointer }
.app .db-tchip:hover { border-color:var(--orange) }
.app .db-tchip.on { border-color:var(--orange);background:var(--orange-soft);color:var(--orange-ink) }
.app .db-zoneschem { position:relative;border:1px solid var(--line);border-radius:9px;overflow:hidden;margin-bottom:14px;background:var(--line-2);aspect-ratio:16/6 }
.app .db-zoneschem.portrait { aspect-ratio:9/10;max-width:260px;margin-left:auto;margin-right:auto }
.app .db-zn { position:absolute;box-sizing:border-box;border:2px solid var(--line-2);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;gap:6px;border-radius:6px;padding:4px;text-align:center;overflow:hidden }
.app .db-zn.rotating { background:#2E8BD6 }
.app .db-zn.locked { background:#1565B0 }
.app .db-zn.strip { background:#0D0D10 }
.app .db-zpct { opacity:.8;font-weight:600 }
.app .db-emcard { border:1px solid var(--line);border-radius:9px;margin-bottom:12px;overflow:hidden }
.app .db-emhead { display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--surface);border-bottom:1px solid var(--line) }
.app .db-emhead .ico { width:20px;height:20px;flex:none;color:var(--muted);display:grid;place-items:center }
.app .db-emhead .ico svg { width:17px;height:17px }
.app .db-emhead .ttl { font-weight:700 }
.app .db-emhead .grow { flex:1;min-width:0 }
.app .db-embody { padding:13px }
.app .db-help { color:var(--muted);font-size:11.5px }
.app .db-defrow { display:flex;align-items:center;gap:8px;margin-bottom:10px;font-weight:600;flex-wrap:wrap }
.app .db-inp-sm { width:64px !important;text-align:center }
.app .db-pages, .app .db-layers { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px }
.app .db-page, .app .db-layer { display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:9px;padding:9px 11px;background:var(--card) }
.app .db-page .grow, .app .db-layer .grow { flex:1;min-width:0 }
.app .db-page .meta, .app .db-layer .meta { color:var(--muted);font-size:12px }
.app .db-page-rank, .app .db-layer-rank { width:22px;height:22px;flex:none;border-radius:50%;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px }
.app .db-page-acts, .app .db-layer-move { display:flex;gap:4px;flex:none }
.app .db-page-acts button:disabled, .app .db-layer-move button:disabled { opacity:.35;cursor:default }
.app .db-layerctl { display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px }
.app .db-layerctl .c3-input { width:auto;min-width:130px;max-width:230px }
.app .db-maxrow { display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700 }
.app .db-colrow { display:flex;align-items:center;gap:8px;margin-bottom:8px }
.app .db-colrow .c3-input:not(.db-inp-sm) { flex:1;min-width:0 }
.app .db-time { display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.app .db-timeread { color:var(--muted);font-size:12px;margin-top:6px }
.app .db-togglerow { display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line-2) }
.app .db-togglerow .tr-meta { flex:1;min-width:0 }
.app .db-togglerow .tr-t { font-weight:600 }
.app .db-togglerow .tr-d { color:var(--muted);font-size:12px }
.app .db-tplgrid { display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px }
.app .db-tpl { -webkit-appearance:none;appearance:none;text-align:left;background:var(--card);border:2px solid var(--line);border-radius:10px;padding:10px;cursor:pointer;display:flex;flex-direction:column;gap:4px;font:inherit;color:var(--text) }
.app .db-tpl:hover { border-color:var(--orange) }
.app .db-tpl.on { border-color:var(--orange);background:var(--orange-soft) }
.app .db-tpl-name { font-weight:700;font-size:12.5px }
.app .db-tpl-sub { font-size:11px;color:var(--muted) }
.app .db-tpl-thumb { position:relative;display:block;width:100%;background:#0D0D10;border-radius:5px;overflow:hidden }
.app .db-tpl-thumb.l { aspect-ratio:16/9 }
.app .db-tpl-thumb.p { aspect-ratio:9/16;width:52%;margin:0 auto }
.app .db-tb { position:absolute;display:block;border-radius:2px }
.app .db-tb.hdr { background:#1E6FB8 }
.app .db-tb.main { background:#2E8BD6;box-shadow:inset 0 0 0 1px #0D0D10 }
.app .db-tb.side { background:#1565B0;box-shadow:inset 0 0 0 1px #2E8BD6 }
.app .db-tb.strip { background:var(--orange) }
.app .db-legend { display:flex;flex-wrap:wrap;gap:14px;margin-top:10px;font-size:11px;color:var(--muted) }
.app .db-legend span { display:inline-flex;align-items:center;gap:5px }
.app .db-legend .db-tb { position:static;width:12px;height:12px;display:inline-block }
.app .db-lock { max-width:560px;margin:40px auto;text-align:center;padding:28px 24px;border:1px dashed var(--line);border-radius:12px;background:var(--card);color:var(--text) }
.app .db-lock .ico { width:44px;height:44px;margin:0 auto 14px;border-radius:50%;background:var(--orange-soft);color:var(--orange-ink);display:grid;place-items:center }
.app .db-lock .ico svg { width:22px;height:22px }
.app .db-lock h3 { margin:0 0 8px;font-size:16px }
.app .db-lock p { margin:0 0 16px;color:var(--muted);font-size:13px }
.app .db-pro { display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.06em;color:var(--orange-ink);background:var(--orange-soft);border-radius:4px;padding:2px 6px;margin-left:6px;vertical-align:middle }
.app .db-swrow { display:flex;align-items:center;gap:11px;padding:8px 0;border-bottom:1px solid var(--line-2) }
.app .db-swrow:last-child { border-bottom:0 }
.app .db-sw { width:28px;height:28px;border-radius:7px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12) }
.app .db-swrow .grow { flex:1;min-width:0;display:flex;flex-direction:column;gap:1px }
.app .db-swrow .meta { color:var(--muted);font-size:11.5px }
.app .db-swrow input[type=color] { width:40px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--card);cursor:pointer }
.app .db-stat { display:flex;flex-direction:column;gap:2px }
.app .db-stat .num { font-size:30px;font-weight:800;line-height:1;color:var(--text) }
.app .db-stat .num.ok { color:var(--ok) } .app .db-stat .num.amber { color:var(--amber) } .app .db-stat .num.blue { color:var(--over) }
.app .db-stat .lab { color:var(--muted);font-size:12px }
.app .cs-cal { padding:12px 13px }
.app .cs-cal .hd { display:flex;align-items:center;gap:8px;margin-bottom:10px }
.app .cs-cal .hd .m { font-weight:800;font-size:14px;flex:1 }
.app .cs-cal .hd button { width:26px;height:26px;border:1px solid var(--line);background:var(--card);color:var(--muted);border-radius:6px;cursor:pointer;display:grid;place-items:center }
.app .cs-cal .hd button:hover { border-color:var(--orange);color:var(--orange-ink) }
.app .cs-cal .dow, .app .cs-cal .days { display:grid;grid-template-columns:repeat(7,1fr);gap:4px }
.app .cs-cal .dow { margin-bottom:4px }
.app .cs-cal .dow span { text-align:center;font-size:10px;font-weight:800;color:var(--muted);text-transform:uppercase }
.app .cs-day { aspect-ratio:1;border-radius:7px;border:1px solid transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:12px;font-weight:600;color:var(--text);position:relative }
.app .cs-day.muted { color:var(--muted);opacity:.5 }
.app .cs-day.today { background:var(--navy);color:#fff;font-weight:800 }
.app .cs-day .dots { display:flex;gap:2px;position:absolute;bottom:4px }
.app .cs-day .dots i { width:5px;height:5px;border-radius:50%;display:block }
.app .cs-legend { display:flex;flex-wrap:wrap;gap:10px;padding:10px 13px;border-top:1px solid var(--line-2);font-size:11.5px;color:var(--muted) }
.app .cs-legend .li { display:flex;align-items:center;gap:6px }
.app .cs-legend i { width:8px;height:8px;border-radius:50%;display:block }
.app .cs-q { display:grid;grid-template-columns:52px 1fr auto;gap:11px;align-items:center;padding:9px 0;border-bottom:1px solid var(--line-2) }
.app .cs-q:last-child { border-bottom:0 }
.app .cs-q .d { text-align:center;line-height:1.15 }
.app .cs-q .d .dn { font-size:17px;font-weight:800 }
.app .cs-q .d .mo { font-size:9.5px;font-weight:800;text-transform:uppercase;color:var(--muted) }
.app .cs-q .ttl { font-weight:700 }
.app .cs-q .meta { color:var(--muted);font-size:11.5px }
.app .cs-types { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px }
.app .cs-typebtn { -webkit-appearance:none;appearance:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 8px;border:2px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);font:inherit;font-size:12.5px;font-weight:700;cursor:pointer }
.app .cs-typebtn .ic svg { width:20px;height:20px }
.app .cs-typebtn.on { border-color:var(--orange);background:var(--orange-soft);color:var(--orange-ink) }
.app .cs-typebtn:disabled { opacity:.45;cursor:not-allowed }
.app .cs-row2 { display:grid;grid-template-columns:1fr 1fr;gap:10px }
.app .cs-optrow { display:flex;align-items:flex-start;gap:9px;border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin-bottom:7px;cursor:pointer }
.app .cs-optrow.on { border-color:var(--orange);background:var(--orange-soft) }
.app .cs-optrow .ot { font-weight:700 }
.app .cs-optrow .od { color:var(--muted);font-size:12px }
.app .db-sec { margin-top:16px }
@media (max-width:900px) {
  .app .db-page, .app .db-layer { flex-wrap:wrap }
  .app .db-page-acts { width:100%;justify-content:flex-end }
  .app .cs-types { grid-template-columns:repeat(2,1fr) }
  .app .cs-row2 { grid-template-columns:1fr }
}

/* THE SELECT CHEVRON SURVIVES A BACKGROUND SHORTHAND (2026-11-05, Brooks's phone screenshot of Timesheets).
   .sch-field / .dm-field / .nr-setrow set `background:var(--input-bg)`, which outranks the shared select.c3-input
   rule: in light the chevron vanished, and in dark the shared dark rule put the image back with repeat reset,
   so it tiled across the whole box. Restated last, so a field rule's shorthand cannot undo it. Dark keeps its
   own image (the shared .app[data-theme="dark"] rule is more specific). */
.app select.c3-input { background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="%236A7787" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>');background-repeat:no-repeat;background-position:right 10px center;padding-right:30px }