/* ═══════════════════════════════════════════════════════════════════════════
   THE DESIGN LANGUAGE — approved 2026-08-08 (audit Deliverable F).
   File 139 series: tokens + per-surface classes land batch by batch;
   restyling travels in THIS file family, never mixed with behavior.
   Batch (a): the tokens + the field Attendance surface.
   ═══════════════════════════════════════════════════════════════════════ */
:root {
  /* ink */
  --ink: #1A1D2E;
  --ink-2: #525A6E;              /* secondary text — ≥4.6:1 on white */
  /* the state vocabulary (formalized) */
  --state-pend: #B45309;  --state-pend-bg: #FEF3E2;  --state-pend-line: #F0D9B8;
  --state-ok:   #0E6B3D;  --state-ok-bg:   #E6F5ED;  --state-ok-line:   #CDE8D9;
  --state-err:  #B3261E;  --state-err-bg:  #FDECEA;  --state-err-line:  #F5C6C0;
  /* rhythm */
  --sp: 8px;                     /* the base — cards 2sp pad, gaps 1.5sp */
  --card-r: 12px;
  --accent-w: 4px;               /* the left state-accent */
}

/* ── the field type scale: 22 / 17 / 16 / 13 ────────────────────────────── */
.fld-title   { font-size: 22px; font-weight: 800; letter-spacing: 0.2px; }
.fld-section { font-size: 17px; font-weight: 700; }
.fld-body    { font-size: 16px; }
.fld-meta    { font-size: 13px; color: var(--ink-2); }

/* ── the field surface ──────────────────────────────────────────────────── */
.fld-head {
  background: var(--navy); color: #fff; border-radius: 14px;
  padding: 16px 18px; margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(15,39,68,0.18);
}
.fld-head .fld-sub { font-size: 13px; opacity: 0.92; margin-top: 4px; }

.fld-card {
  border: 1px solid var(--gray2); border-radius: var(--card-r);
  margin-bottom: 12px; overflow: hidden; background: #fff;
  box-shadow: 0 1px 4px rgba(15,39,68,0.05);
}
.fld-card--dayoff { border-color: var(--state-ok-line); border-left: var(--accent-w) solid var(--state-ok); }
.fld-card--board  { border-color: var(--state-pend-line); border-left: var(--accent-w) solid var(--state-pend); background: #FFFBF4; }
.fld-card--board .fld-card-hd { background: var(--state-pend-bg); }
.fld-card-hd {
  width: 100%; display: flex; gap: 10px; align-items: center; background: #fff;
  border: 0; padding: 15px 14px; min-height: 52px; font-size: 17px; font-weight: 700;
  cursor: pointer; text-align: left;
}
.fld-card--dayoff .fld-card-hd { background: rgba(14,107,61,0.06); }
.fld-card-bd { padding: 4px 8px 10px; }

.fld-quiet {
  background: var(--state-ok-bg); border: 1px solid var(--state-ok-line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 12px;
  color: var(--state-ok); font-weight: 600; font-size: 14px;
}

.fld-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 10px; border-top: 1px solid var(--gray1); font-size: 16px;
}
.fld-row--done { opacity: 0.75; }
.fld-row input[type=checkbox] { width: 22px; height: 22px; flex-shrink: 0; }
.fld-row .fld-who { flex: 1; min-width: 0; }
.fld-row .fld-who .fld-meta { display: block; }

.fld-chip { font-size: 13px; font-weight: 700; border-radius: 6px; padding: 4px 10px; white-space: nowrap; }
.fld-chip--pend  { color: var(--state-pend); background: var(--state-pend-bg); border: 1px solid var(--state-pend-line); }
.fld-chip--ok    { color: var(--state-ok); }
.fld-chip--okabs { color: var(--state-err); }   /* a VALIDATED absence reads red: it deducts */
.fld-chip--err   { color: var(--state-err); background: var(--state-err-bg); border: 1px solid var(--state-err-line); }
.fld-chip--void  { color: var(--ink-2); text-decoration: line-through; font-weight: 400; }

/* speed tools */
.fld-input {
  min-height: 44px; font-size: 16px; padding: 10px 12px;
  border: 1.5px solid var(--gray2); border-radius: 10px; box-sizing: border-box;
}
#page-attendance-v2 .tb { min-height: 40px; padding: 8px 14px; font-size: 14px; border-radius: 10px; }
#page-attendance-v2 .btn { min-height: 44px; border-radius: 10px; }
#page-attendance-v2 .btn-sm { min-height: 40px; }

/* the fixed bar + the sheets */
#fld-bar {
  position: fixed; left: 0; right: 0; bottom: 0; background: var(--navy);
  padding: 14px 16px; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; z-index: 50; box-shadow: 0 -4px 16px rgba(15,39,68,0.25);
}
#fld-bar:empty { display: none; }
#fld-bar .btn { min-height: 46px; font-size: 16px; border-radius: 10px; }
.fld-sheet-wrap {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200;
  display: flex; align-items: flex-end; justify-content: center;
}
.fld-sheet {
  background: #fff; border-radius: 18px 18px 0 0; padding: 20px;
  width: 100%; max-width: 560px; max-height: 80vh; overflow: auto; box-sizing: border-box;
}
.fld-sheet-title { font-size: 19px; font-weight: 800; margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH (b) — MOBILIZATION + ACTIVITIES (2026-08-08). Office type scale
   20/15/13/11. The grammar unification rides here: .tb chips for filters
   (already native to these pages), the fixed navy selection bar for bulk,
   bottom-sheet styling for the two surfaces' own modals. Geometry tokens
   (radius/borders/shadows) apply via scoped rules; the recurring bands
   moved onto real classes in the JS.
   ═══════════════════════════════════════════════════════════════════════ */
/* the section voice: small uppercase labels above every board/ledger */
.ofc-sechdr {
  font-size: 11px; font-weight: 800; letter-spacing: 0.6px;
  color: var(--ink-2); text-transform: uppercase; margin: 16px 2px 6px;
}
/* the dark band header (Completed batches · Trade Test · step ledgers) */
.ofc-band {
  background: var(--navy); color: #fff; border-radius: var(--card-r);
  padding: 10px 14px; margin: 8px 0 4px; display: flex; gap: 10px;
  align-items: center; flex-wrap: wrap; font-size: 13px;
}
.ofc-band--tap { cursor: pointer; }
/* cards on the two surfaces: one geometry */
#page-mobilization .card, #page-activities .card,
#page-mobilization div[style*="border:1px solid"], #page-activities div[style*="border:1px solid"] {
  border-radius: var(--card-r) !important;
}
#page-mobilization, #page-activities { font-size: 13px; }
#page-mobilization .tb, #page-activities .tb {
  border-radius: 10px; min-height: 32px; padding: 6px 12px; font-size: 12px;
}
#page-mobilization input.sinp, #page-activities input.sinp,
#page-mobilization input[type=text], #page-activities input[type=text] {
  border-radius: 10px !important; border: 1.5px solid var(--gray2) !important;
  min-height: 36px; box-sizing: border-box;
}
/* the pinned action row keeps one voice */
.mob-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mob-actions .btn { border-radius: 10px; min-height: 38px; }

/* THE BULK GRAMMAR: the activities selection bar docks like the field bar */
#act-bulk:not(:empty) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--navy); padding: 12px 16px;
  box-shadow: 0 -4px 16px rgba(15,39,68,0.25);
}
#act-bulk:not(:empty) > div {
  background: transparent !important; border: 0 !important; margin: 0 !important;
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
#act-bulk:not(:empty) b, #act-bulk:not(:empty) .ab-no { white-space: normal; }
#act-bulk:not(:empty) .ab-no { color: #FFD9A0 !important; font-size: 12px; }
#act-bulk:not(:empty), #act-bulk:not(:empty) * { color: #fff; }
#act-bulk:not(:empty) .btn { min-height: 40px; border-radius: 10px; color: inherit; }
#act-bulk:not(:empty) .btn-gh { border-color: rgba(255,255,255,0.5); }
#page-activities:has(#act-bulk:not(:empty)) { padding-bottom: 90px; }

/* THE SHEET GRAMMAR: the two surfaces' own modals rise from the bottom */
#mo-activity .modal, #mo-actupd .modal, #mo-establish .modal, #mo-ttbulk .modal,
#mo-ttbres .modal, #mo-demob .modal, #mo-ttdoors .modal, #mo-ttpass .modal, #mo-cx .modal {
  border-radius: 18px 18px 0 0; align-self: flex-end; width: 100%;
  max-width: 720px; margin: 0 auto; max-height: 88vh; overflow: auto;
  padding: 20px; box-sizing: border-box;
}
#mo-activity, #mo-actupd, #mo-establish, #mo-ttbulk,
#mo-ttbres, #mo-demob, #mo-ttdoors, #mo-ttpass, #mo-cx {
  align-items: flex-end !important; justify-content: center;
}
/* batch (b) utilities — the two surfaces' recurring micro-styles */
.t-meta  { font-size: 10px; color: var(--ink-2); }
.t-meta2 { font-size: 11px; color: var(--ink-2); }
.t-err   { color: var(--state-err); }
.t-navy  { color: var(--navy); }
.t-pend  { color: var(--state-pend); font-weight: 700; }

/* ── STEP 1 REPAIR (the program's Rule 0 applied to batch b) ──────────────
   THE VISUAL STANDARD, recorded: the restyle makes screens CALMER and
   DENSER-feeling, never larger. Density is a feature for office
   operators; big targets belong to field surfaces only. */
/* ledgers never hide their actions: the table FITS at laptop width (the
   action cluster visible with no sideways scroll); narrower widths scroll
   inside the card with a VISIBLE thin scrollbar — never an invisible one */
#act-table .wd-table { min-width: 0 !important; width: 100%; table-layout: auto; }
#act-table th, #act-table td { padding: 4px 6px; font-size: 11px; }
#act-table td { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 147: the action column is a NORMAL last column when the table fits;
   pinning is a narrow-screen rescue that engages ONLY on genuine overflow
   (.wd-overflowing, toggled by the render + resize watch). Sticky table
   cells under border-collapse:collapse misrender in Chrome (detached
   strips, phantom cells — the ≥1900 artifact class): the overflowing
   state switches to border-collapse:separate. */
#act-table td:last-child, #act-table th:last-child { white-space: nowrap; max-width: none; }
#act-table .wd-overflowing table { border-collapse: separate; border-spacing: 0; }
#act-table .wd-overflowing.wd-scroll .wd-tsel td:last-child,
#act-table .wd-overflowing.wd-scroll .wd-tsel th:last-child {
  position: sticky; right: 0; z-index: 2;
  background: #fff; box-shadow: -6px 0 8px -6px rgba(15,39,68,0.25);
}
#act-table .wd-overflowing .wd-tsel tr.wd-hr th:last-child { background: var(--navy); }
#act-table .wd-overflowing .wd-tsel tr.wd-fr th:last-child { background: var(--gray1); }
#act-table .btn-sm { padding: 4px 8px !important; font-size: 11px !important; min-height: 26px; border-radius: 8px; }
#act-table input, #act-table select { max-width: 100px; font-size: 11px !important; box-sizing: border-box; }
.wd-scroll { scrollbar-width: thin; }
.wd-scroll::-webkit-scrollbar { height: 8px; }
.wd-scroll::-webkit-scrollbar-thumb { background: var(--gray3); border-radius: 4px; }
/* the same never-clip net for the other row-action tables */
#empdb-table-wrap, .bt-sheet-table, #mob-batchsheet { overflow-x: auto; }
/* helper notes: one quiet line, never inside a control row */
.est-quiet { font-size: 11px; color: var(--ink-2); margin: 4px 2px 8px; }

/* ── FILE 148: docked bars own the CONTENT AREA, never the sidebar's lane ──
   The sidebar is fixed left / 220px / z-100 at ≥768px; a left:0 docked bar
   slides its first 220px underneath it — badge and actions invisible and
   unclickable for every senior login (field logins have no sidebar, which
   is why field walks never caught it). At the sidebar's own breakpoint,
   every docked bar starts right of it. */
@media (min-width: 768px) {
  #act-bulk:not(:empty), #fld-bar { left: var(--sidebar-w); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH (c) — EMPLOYEE RECORDS + WORKERS DOCUMENTS (2026-08-08).
   Style only — zero behavior. Office scale; calmer + denser, never larger.
   Grammar unification rides: the three selection bars dock fixed-bottom in
   the navy voice; the surfaces' own modals rise as bottom sheets.
   ═══════════════════════════════════════════════════════════════════════ */
#page-empdb, #page-documents { font-size: 13px; }
#page-documents .tb { border-radius: 10px; min-height: 32px; padding: 6px 12px; font-size: 12px; }

/* ── EMPLOYEE RECORDS: the ledger becomes a card ── */
.empdb-desktop {
  border: 1px solid var(--gray2); border-radius: var(--card-r);
  background: #fff; scrollbar-width: thin;
}
.empdb-desktop::-webkit-scrollbar { height: 8px; }
.empdb-desktop::-webkit-scrollbar-thumb { background: var(--gray3); border-radius: 4px; }
#empdb-table { width: 100%; min-width: 1200px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
#empdb-table thead tr { background: var(--navy); color: #fff; }
#empdb-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--navy);
  padding: 0 8px; height: 32px; box-sizing: border-box; text-align: left;
  white-space: nowrap; font-size: 10.5px; font-weight: 600;
  letter-spacing: .4px; text-transform: uppercase;
}
#empdb-table td {
  padding: 5px 8px; height: 32px; box-sizing: border-box;
  border-bottom: 1px solid var(--gray1); white-space: nowrap; color: var(--ink);
}
#empdb-table tbody tr { cursor: pointer; }
#empdb-table tbody tr:hover td { background: #F8F9FC; }
#empdb-table .edb-code { font-weight: 600; color: var(--navy); }
#empdb-table .edb-nm { font-weight: 600; }
#empdb-table .edb-c, #empdb-table th.edb-c { text-align: center; }
#empdb-table .edb-empty { text-align: center; padding: 20px; color: var(--ink-2); height: auto; }
#empdb-table .pill { font-size: 10px; padding: 2px 6px; }
#empdb-table .btn-sm { font-size: 10px; padding: 3px 8px; border-radius: 8px; }
.empdb-card .pill { font-size: 10px; padding: 2px 5px; }
.empdb-card .btn-sm { font-size: 10px; padding: 3px 9px; margin-left: 6px; }
#empdb-popover { border-radius: var(--card-r); }
/* the filter chips + field frames (sheet & inline fields) on real classes */
.edc {
  border: 1px solid #E2E2E6; background: #F4F4F6; color: var(--navy);
  padding: 5px 10px; border-radius: 10px; font-size: 12px;
  margin: 0 6px 6px 0; cursor: pointer; white-space: nowrap;
}
.edc.on { border-color: var(--amber); background: var(--amber); color: #fff; }
.edc .edc-n { opacity: .65; margin-left: 6px; font-size: 10px; }
.edf-wrap { padding: 12px 0; border-bottom: 1px solid var(--gray1); }
.edf-hdr {
  font-size: 11px; font-weight: 800; color: var(--ink-2);
  margin: 0 0 6px; text-transform: uppercase; letter-spacing: .5px;
}
.edf-empty { color: var(--ink-2); font-size: 12px; }

/* ── WORKERS DOCUMENTS: token re-skin of the wd voice ── */
.wd-scroll, .wd-band { border-radius: var(--card-r); }
.wd-quiet, .wd-scopenote { color: var(--ink-2); }
.wd-stat { color: var(--ink-2); border-radius: 10px; }
.wd-stat-soon b { color: var(--state-pend); }
.wd-stat-exp b { color: var(--state-err); }
.wd-chip-exp { background: var(--state-err); }
.wd-chip-soon { background: var(--state-pend-bg); color: var(--state-pend); border-color: var(--state-pend-line); }
.wd-chip-miss { color: var(--ink-2); }
tr.wd-r-expired td.wd-colcode { border-left-color: var(--state-err); }
tr.wd-r-soon td.wd-colcode { border-left-color: var(--state-pend); }
.cert-batchcard {
  border: 2px solid var(--navy); border-radius: var(--card-r);
  padding: 12px; margin: 8px 0; background: #fff;
}

/* ── THE BULK GRAMMAR: selection bars dock fixed-bottom (the batch-b voice) ── */
.ofc-selbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--navy); color: #fff; padding: 8px 12px;
  border-radius: 8px; margin: 6px 0;
}
#idr-bulkbar:not(:empty), #cert-bulkbar:not(:empty) {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  background: var(--navy); padding: 12px 16px;
  box-shadow: 0 -4px 16px rgba(15,39,68,0.25);
}
#idr-bulkbar:not(:empty) .ofc-selbar, #cert-bulkbar:not(:empty) .ofc-selbar {
  background: transparent; padding: 0; margin: 0; border-radius: 0;
}
#page-documents:has(#idr-bulkbar:not(:empty)) #documents-body,
#page-documents:has(#cert-bulkbar:not(:empty)) #documents-body { padding-bottom: 90px; }
#idr-bulkbar:not(:empty) .btn, #cert-bulkbar:not(:empty) .btn { min-height: 40px; border-radius: 10px; }
#idr-bulkbar:not(:empty) .btn-gh, #cert-bulkbar:not(:empty) .btn-gh {
  border-color: rgba(255,255,255,0.5); color: #fff;
}
@media (min-width: 768px) {
  #idr-bulkbar:not(:empty), #cert-bulkbar:not(:empty) { left: var(--sidebar-w); }
}
/* below the sidebar breakpoint the mobile bottom nav (z-100, ~65px) owns
   bottom:0 — every docked bar rises above it or its buttons are dead
   (the file-130 class, re-caught by this batch's 380 occlusion sweep;
   #act-bulk from batch (b) carried the same latent bug) */
@media (max-width: 767px) {
  #idr-bulkbar:not(:empty), #cert-bulkbar:not(:empty), #act-bulk:not(:empty) {
    bottom: calc(65px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── THE SHEET GRAMMAR: the surfaces' own modals rise from the bottom ── */
#mo-idbulk .modal, #mo-certdetail .modal, #mo-certbook .modal,
#mo-certcomplete .modal, #mo-certoutcome .modal, #mo-certrecord .modal,
#mo-certreqs .modal, #mo-certbulk .modal, #mo-certbulkc .modal,
#mo-vt-admin .modal, #mo-emp-profile .modal {
  border-radius: 18px 18px 0 0; align-self: flex-end; width: 100%;
  max-width: 720px; margin: 0 auto; max-height: 88vh; overflow: auto;
  padding: 20px; box-sizing: border-box;
}
#mo-idbulk, #mo-certdetail, #mo-certbook, #mo-certcomplete, #mo-certoutcome,
#mo-certrecord, #mo-certreqs, #mo-certbulk, #mo-certbulkc, #mo-vt-admin,
#mo-emp-profile {
  align-items: flex-end !important; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH (d) — DASHBOARD + ALERTS + SITE UPDATE (2026-08-08).
   Style only — zero behavior. THE CONTENT-FIT COLUMN RULE lands here as the
   app standard: columns size to the wider of header vs longest value; the
   fixed min/max cell constraints and width formulas that manufactured dead
   whitespace are retired. Never clips — nowrap + auto layout + the wrap
   scrolls on narrow widths.
   ═══════════════════════════════════════════════════════════════════════ */
#page-dashboard, #page-update, #page-flags { font-size: 13px; }
#page-dashboard .card, #page-update .card, #page-flags .card,
#page-dashboard .metric {
  border: 1px solid var(--gray2); border-radius: var(--card-r);
  box-shadow: 0 1px 4px rgba(15,39,68,0.05);
}
#page-dashboard .card-title, #page-update .card-title, #page-flags .card-title {
  color: var(--ink-2);
}
/* ── THE CONTENT-FIT RULE (app-wide, from this batch onward) ── */
.su-table { width: auto; }
.su-table th:not(.lh), .su-table td:not(.rl) { min-width: 0; max-width: none; }
.su-wrap { border-radius: 10px; }
.su-table { border-color: var(--gray3); }
.su-table td { border-color: var(--gray2); }
/* dashboard rates table: hug content, quiet header */
#page-dashboard .dash-rates-t { border-collapse: collapse; font-size: 12px; }
#page-dashboard .dash-rates-t th {
  text-align: left; color: var(--ink-2); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .4px;
  padding: 0 18px 6px 0; border-bottom: 1px solid var(--gray2);
}
#page-dashboard .dash-rates-t th + th, #page-dashboard .dash-rates-t .dr-r { text-align: right; }
#page-dashboard .dash-rates-t td { padding: 6px 18px 6px 0; border-bottom: 1px solid var(--gray1); white-space: nowrap; }
#page-dashboard .dash-rates-t tr > *:last-child { padding-right: 0; }
/* the section voice inside cards */
.dash-secline { font-size: 12px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.dash-secline.ok { color: var(--state-ok); }
/* needs-you door chips */
.dash-need { border: 2px solid var(--amber); font-weight: 700; font-size: 13px; }
/* ── SITE UPDATE ── */
#page-update .su-hdr { border-radius: var(--card-r) var(--card-r) 0 0; }
#page-update .su-body { border-radius: 0 0 var(--card-r) var(--card-r); }
#page-update .sec-title { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
#page-update .sec-count { font-size: 12px; }
.su-blockhdr { font-size: 13px; font-weight: 700; color: var(--navy); padding: 6px 0; }
/* ── ALERTS: the palette semantics align with Workers Documents ──
   expired/critical = THE one solid red · warning/≤30d = amber tint */
.flg-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--gray1); }
.flg-ico {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
  background: var(--state-pend-bg); color: var(--state-pend);
}
.flg-ico--crit { background: var(--state-err); color: #fff; font-size: 16px; }
.flg-ico--red { background: var(--state-err-bg); color: var(--state-err); }
.flg-ico--blue { background: var(--blue-bg, #E8F0FE); color: var(--blue, #2563eb); }
.flg-title { font-size: 13px; font-weight: 700; margin-bottom: 2px; }
.flg-desc { font-size: 12px; color: var(--ink-2); }
.flg-time { font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.flg-ck { width: 18px; height: 18px; margin-top: 7px; flex-shrink: 0; }
.flg-kind {
  font-size: 11px; font-weight: 800; border-radius: 6px; padding: 2px 8px;
  color: #fff; background: var(--ink-2); white-space: nowrap;
}
.flg-kind--disputed { background: var(--state-err); }
.flg-kind--solo { background: var(--state-pend); }
.flg-kind--fieldot { background: var(--blue, #2563eb); }
.flg-dec-card { border: 2px solid var(--state-err); border-radius: var(--card-r); padding: 14px; margin-bottom: 10px; background: #fff; }
.flg-dec-title { font-size: 13px; font-weight: 800; color: var(--state-err); letter-spacing: .3px; }
.flg-dec-sect { font-size: 12px; font-weight: 800; margin: 10px 0 2px; text-transform: uppercase; letter-spacing: .4px; color: var(--ink); }
.flg-dec-row { padding: 8px 0; border-top: 1px solid var(--gray1); font-size: 13px; }
#page-flags .tb { border-radius: 10px; min-height: 32px; padding: 6px 12px; font-size: 12px; }

/* ── 156: state words in site columns — muted italic, never the site look ── */
.site-state { color: var(--ink-2); font-style: italic; white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   BATCH (e) — CLIENTS + TIMESHEETS + REVENUE (2026-08-08).
   Style only — zero behavior. The financial screens join the one voice:
   card geometry, uppercase quiet titles, content-fit tables, token palette.
   ═══════════════════════════════════════════════════════════════════════ */
#page-clients, #page-timesheets, #page-revenue { font-size: 13px; }
#page-clients .card, #page-timesheets .card, #page-revenue .card {
  border: 1px solid var(--gray2); border-radius: var(--card-r);
  box-shadow: 0 1px 4px rgba(15,39,68,0.05);
}
#page-revenue .tb, #page-clients .tb { border-radius: 10px; min-height: 32px; padding: 6px 12px; font-size: 12px; }

/* ── CLIENTS: the rate ledgers hug content; one table voice ── */
.clr-th {
  text-align: left; padding: 6px 14px 6px 0; border-bottom: 1px solid var(--gray2);
  font-size: 10.5px; color: var(--ink-2); font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; white-space: nowrap;
}
.clr-td { padding: 6px 14px 6px 0; border-bottom: 1px solid var(--gray1); font-size: 12px; white-space: nowrap; }
.clr-r { text-align: right; }
.clr-b { font-weight: 600; }
.clr-t { border-collapse: collapse; }          /* content-fit: no width:100% */
.clp-block { background: var(--gray1); border-radius: 10px; padding: 10px; margin-bottom: 8px; }
.clp-btn {
  padding: 3px 10px; border: 1px solid var(--navy); border-radius: 8px;
  background: #fff; color: var(--navy); cursor: pointer; font-size: 11px; font-weight: 600;
}
.clp-btn--solid { background: var(--navy); color: #fff; }
.clf-lbl { font-size: 10px; color: var(--ink-2); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.clf-sel { width: 100%; padding: 7px; border: 1.5px solid var(--gray2); border-radius: 8px; font-size: 12px; box-sizing: border-box; background: #fff; }
.cmp-chip {
  display: inline-block; padding: 5px 10px; margin: 3px; border-radius: 8px;
  cursor: pointer; font-size: 11px; border: 1.5px solid var(--gray2); background: #fff;
}
.cmp-chip.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.cl-seclbl { font-size: 10.5px; color: var(--ink-2); font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin: 4px 0; }

/* ── TIMESHEETS + REVENUE: quiet uppercase card voices ── */
.ts-title { font-size: 12px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; margin-bottom: 2px; }
.ts-sub, .rv-sub { font-size: 12px; color: var(--ink-2); }
.rv-card { padding: 14px; flex: 1; min-width: 180px; }
.rv-lbl { font-size: 10.5px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; }
.rv-big { font-size: 22px; font-weight: 800; margin-top: 2px; }
.rv-sub { margin-top: 2px; font-size: 11px; }
.rv-upband { border: 2px solid var(--state-err) !important; padding: 12px 14px; margin-bottom: 12px; cursor: pointer; }
.rv-upband b { color: var(--state-err); }
.rv-row { display: flex; gap: 12px; align-items: center; padding: 9px 4px; border-top: 1px solid var(--gray1); font-size: 13px; }
.rv-hdr { display: flex; gap: 12px; font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .5px; padding: 0 4px; }
.rv-crumb { cursor: pointer; color: var(--navy); font-weight: 700; }

/* ── THE SHEET GRAMMAR: the clients screen's own modals ── */
#mo-add-cl .modal, #mo-rate-editor .modal, #mo-registry .modal {
  border-radius: 18px 18px 0 0; align-self: flex-end; width: 100%;
  max-width: 760px; margin: 0 auto; max-height: 88vh; overflow: auto;
  padding: 20px; box-sizing: border-box;
}
#mo-add-cl, #mo-rate-editor, #mo-registry { align-items: flex-end !important; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   FILE 166 — THE ABSENCE TRACKER (set A). Phone layout is primary: three
   figures per row; the full ladder appears from 768px. One palette only.
   ═══════════════════════════════════════════════════════════════════════ */
#page-absence { font-size: 13px; padding-bottom: 24px; }
.abs-bar {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin: 0 0 10px; padding: 0 2px;
}
.abs-bar .tb { min-height: 34px; border-radius: 10px; font-size: 13px; padding: 6px 12px; }
.abs-legend { flex-basis: 100%; font-size: 11px; color: var(--ink-2); margin-top: 2px; }
.abs-provisional {
  border: 1px solid var(--state-pend-line); background: var(--state-pend-bg);
  color: var(--state-pend); border-radius: var(--card-r); padding: 10px 12px;
  font-size: 12px; line-height: 1.5; margin-bottom: 10px;
}
.abs-list { border: 1px solid var(--gray2); border-radius: var(--card-r); background: #fff; overflow: hidden; }
/* 167.1: the verdict — plain words lead the row; colour supports them */
.abs-verdict { display: block; font-size: 13px; font-weight: 800; margin-top: 3px; }
.abs-v-over { color: var(--state-err); }
.abs-amber .abs-v-over { color: var(--state-pend); }
.abs-v-ok { color: var(--state-ok); font-weight: 700; }
/* 167.4: the always-visible allowance explainer */
.abs-explain {
  font-size: 12.5px; color: var(--ink); background: #fff;
  border: 1px solid var(--gray2); border-radius: var(--card-r);
  padding: 9px 12px; margin-bottom: 10px; line-height: 1.45;
}
.abs-chipn { opacity: .65; font-size: 11px; margin-left: 3px; }
.abs-sel { width: auto; font-size: 12px; padding: 6px 8px; border-radius: 10px; }
.abs-search { flex: 1; min-width: 0; max-width: 340px; }
.abs-row {
  display: grid; grid-template-columns: 1fr auto; gap: 6px 10px;
  padding: 11px 12px; border-top: 1px solid var(--gray1); cursor: pointer;
  border-left: var(--accent-w) solid transparent;
}
.abs-row:first-child { border-top: 0; }
.abs-row:hover { background: #F8F9FC; }
.abs-amber { border-left-color: var(--state-pend); background: #FFFCF6; }
.abs-red   { border-left-color: var(--state-err);  background: #FFF7F6; }
.abs-who { min-width: 0; }
.abs-who b { font-size: 15px; font-weight: 700; display: block; }
.abs-meta { font-size: 11.5px; color: var(--ink-2); }
.abs-three { display: flex; gap: 12px; align-items: center; }
.abs-cell { display: flex; flex-direction: column; align-items: center; min-width: 42px; }
.abs-cell i { font-style: normal; font-size: 10px; color: var(--ink-2); text-transform: uppercase; letter-spacing: .4px; }
.abs-cell em { font-style: normal; font-size: 11px; color: var(--ink-2); }
.abs-used { border-left: 1px solid var(--gray2); padding-left: 12px; }
.abs-fig { font-size: 17px; font-weight: 800; color: var(--ink); line-height: 1.2; }
.abs-over { color: var(--state-err); }
.abs-amber .abs-over { color: var(--state-pend); }
.abs-red .abs-over { color: var(--state-err); }
.abs-thin { opacity: .55; font-style: italic; text-decoration: underline dotted; }
.abs-foot {
  grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap;
  justify-content: space-between; font-size: 11.5px; color: var(--ink-2);
}
.abs-money { font-variant-numeric: tabular-nums; }
.abs-norate { color: var(--state-pend); }
.abs-sheetladder { border: 1px solid var(--gray2); border-radius: 10px; overflow: hidden; margin-bottom: 8px; }
.abs-srow { display: flex; justify-content: space-between; padding: 7px 10px; border-top: 1px solid var(--gray1); font-size: 14px; }
.abs-srow:first-child { border-top: 0; }
.abs-over-row { background: var(--state-err-bg); color: var(--state-err); font-weight: 700; }
.abs-thin-row { opacity: .7; font-style: italic; }
.abs-hrow { display: flex; gap: 10px; justify-content: space-between; padding: 6px 2px; border-top: 1px solid var(--gray1); font-size: 13px; }

/* 167.2: the ladder lives ONLY in the tap-open sheet — every screen size
   shows the same verdict + three-figure row. */

/* ── 168: absence set B — review stage chips + record form + alert doors ── */
.abs-stage { display:inline-block; font-size:10px; font-weight:800; letter-spacing:0.4px;
  padding:2px 7px; border-radius:9px; margin-left:8px; vertical-align:middle; white-space:nowrap; }
.abs-stage-counselled     { background:var(--gray1, #F1F3F6); color:var(--ink-2); }
.abs-stage-written_warning{ background:var(--state-pend-bg, #fdf3e2); color:var(--state-pend, #a86a1d); }
.abs-stage-final_warning  { background:var(--state-err-bg, #fdeaea); color:var(--state-err, #b3261e); }
.abs-recform { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
.abs-recform .fld-input { flex:1; min-width:180px; }
.flg-door { cursor:pointer; }
.flg-door:hover { background:var(--gray1, #F1F3F6); }
/* 172: the guidance box + override mark */
.sal-guide { background: var(--state-pend-bg); border: 1px solid var(--state-pend-line);
  color: var(--state-pend); border-radius: 8px; padding: 8px 10px; margin-top: 8px; font-size: 12px; }
.sal-ovr { font-size: 10px; font-weight: 800; color: var(--state-pend); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   179 — THE MOBILIZATION RESTYLE (the MP's mix, §107b). Skin + section
   grammar ONLY: white / navy / dark cherry (the true identity — no gold),
   numbered plain-words sections, action-card treatment, the loud
   cannot-go tag, the batch pane visibly connected. Zero flow changes.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --cherry: #7A1F2B; --cherry-bg: #F9EDEF; --cherry-line: #E3C4CA; }
.mob-n { display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: var(--navy); color: #fff;
  font-family: 'Space Grotesk', sans-serif; font-size: 11px; font-weight: 700;
  border-radius: 4px; margin-right: 7px; flex-shrink: 0; }
.mob-sec { display: flex; align-items: baseline; gap: 2px; margin: 10px 0 4px;
  font-size: 12.5px; font-weight: 700; color: var(--navy); }
.mob-sec .t-meta { font-weight: 400; }
/* the action row reads as substantial cards; Establish carries the cherry */
.mob-actions .btn { padding: 10px 16px; font-size: 13px; border-radius: 9px; }
.mob-actions .btn-p { background: var(--cherry); border-color: var(--cherry); }
.mob-actions .btn-p:hover { background: #641922; }
/* the batch pane is unmistakably connected to the picker */
#est-batch-pane { border-left: 3px solid var(--cherry); }
#est-batch-pane .est-pane-h { color: var(--cherry); }
#est-batch-list .est-brow { background: var(--cherry-bg); border-left-color: var(--cherry-line); }
#est-batch-list .est-brow.miss { border-left-color: var(--amber); background: var(--amber-bg); }
/* the loud cannot-go tag */
.est-nogo { display: inline-block; background: var(--cherry); color: #fff;
  font-size: 9.5px; font-weight: 800; letter-spacing: 0.4px; padding: 2px 6px;
  border-radius: 4px; white-space: nowrap; }
.est-nogo-reason { font-size: 11px; color: var(--cherry); font-style: italic; }
/* the strip's sentence emphasizes in cherry */
.est-strip-w b { color: var(--cherry); }

/* ═══════════════════════════════════════════════════════════════════════════
   180 — MINED FROM IBM CARBON (Apache-2.0, carbon-design-system/carbon):
   the compact data-table grammar, the 2px-grid spacing steps, and compact
   field metrics — TOKENS AND PATTERNS ONLY, flowing through OUR stylesheet.
   No import, no dependency, no framework, no palette change (identity stays
   white/navy/cherry per §107b). Scope: the Mobilization pair exactly.
   Calmer and denser, never larger.
   ═══════════════════════════════════════════════════════════════════════ */
:root { --c-s2: 4px; --c-s3: 8px; --c-s4: 12px; --c-s5: 16px;
        --c-row: 32px; --c-field: 32px; --c-fs-tbl: 12px; --c-fs-ui: 13px; }
/* Carbon compact data-table → the marshalling board + the step ledgers */
#page-mobilization .wd-table { font-size: var(--c-fs-tbl); }
#page-mobilization .wd-table td { height: var(--c-row); padding: var(--c-s2) var(--c-s3); }
#page-mobilization .wd-hr th { font-weight: 600; padding: 6px var(--c-s3); }  /* bg stays the board's navy — the mined rule must not wash the header */
#page-mobilization .wd-table tbody tr:hover td { background: var(--cherry-bg); }
#page-mobilization .wd-cc b { font-family: 'Space Grotesk', sans-serif; font-size: 13px; }
/* compact fields + rows in the Establish modal */
#mo-establish .fs, #mo-establish .fi { min-height: var(--c-field); padding: 4px var(--c-s3); font-size: var(--c-fs-ui); }
#est-worker-list label { min-height: var(--c-row); padding: var(--c-s2) var(--c-s3); display: flex; align-items: center; }
#est-worker-list label:hover { background: var(--cherry-bg); }
.est-brow { min-height: var(--c-row); }
/* the action cards settle to the Carbon field height — denser, never larger */
.mob-actions .btn { padding: 7px 14px; font-size: var(--c-fs-ui); }
.mob-sec { margin: var(--c-s3) 0 var(--c-s2); }

/* ═══════════════════════════════════════════════════════════════════════════
   181 — ROUND THREE: THE WIDER MINE, additive to the Carbon block. Words
   untouched (the 181 revert restored the settled vocabulary). Sources:
   · BLUEPRINT (Apache-2.0, palantir/blueprint) — compact 30px control
     metrics and toolbar/filter-row grammar, born for dense desktop ops.
   · CARBON (Apache-2.0), mine extended — modal body rhythm, tag metrics,
     table grammar carried to batch (c).
   Patterns and metrics only, through OUR stylesheet — no imports, no
   palettes, no fonts, no frameworks. Identity stays white/navy/cherry.
   ═══════════════════════════════════════════════════════════════════════ */
/* Blueprint compact controls → filter rows on the pair */
#est-filter-bar .btn, #est-filter-bar .fs { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
#mo-establish .est-strip { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
/* Carbon tag metrics on the three surfaces' pills */
#page-mobilization .pill, #page-empdb .pill, #page-documents .pill {
  font-size: 11px; line-height: 18px; padding: 1px 8px; }
/* BATCH (c) — Employee Records: the Carbon compact table + Blueprint toolbar */
#empdb-table { font-size: 12px; }
#empdb-table tbody td { height: 32px; padding: 4px 8px; }
#empdb-table tbody tr:hover td { background: var(--cherry-bg); }
#empdb-table thead th { font-weight: 600; }
#page-empdb .tb { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
#page-empdb #emp-search, #page-empdb .fs { min-height: 30px; font-size: 13px; }
/* BATCH (c) — Workers Documents: same table grammar (the wd-table family) */
#page-documents .wd-table { font-size: 12px; }
#page-documents .wd-table td { height: 32px; padding: 4px 8px; }
#page-documents .wd-table tbody tr:hover td { background: var(--cherry-bg); }
#page-documents .wd-hr th { font-weight: 600; padding: 6px 8px; }
#page-documents .tb, #page-documents .fs { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }

/* ═══════════════════════════════════════════════════════════════════════════
   182 — ROUND FOUR: THE ACTION MODALS TAKE THE LANGUAGE. The four
   action-row flows (Establish · Trade Test builder · Demobilize · Shift
   Change assign) and their second-order dialogs settle to the approved
   grammar — Carbon table/tag metrics, Blueprint 30px controls, the
   white/navy/cherry identity. CSS only; vocabulary untouched; every
   picker, count, derivation and write path identical.
   ═══════════════════════════════════════════════════════════════════════ */
/* the est-* family is shared by Establish / Trade Test / Demobilize —
   the pane grammar goes class-wide (these classes live only in the
   action modals) */
.est-pane-h { font-size: 12.5px; font-weight: 700; color: var(--navy); }
.est-panels .est-pane:last-child { border-left: 3px solid var(--cherry); }
.est-panels .est-pane:last-child .est-pane-h { color: var(--cherry); }
.est-strip { padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
.est-strip-w b { color: var(--cherry); }
/* Blueprint 30px controls + Carbon field rhythm across the action and
   second-order dialogs (flat selectors — no CSS nesting for old WebViews) */
#mo-ttbulk .fs, #mo-ttbulk .fi, #mo-demob .fs, #mo-demob .fi,
#mo-shiftassign .fs, #mo-shiftassign .fi, #mo-setdate .fs, #mo-setdate .fi,
#mo-mobilize .fs, #mo-mobilize .fi, #mo-ttbres .fs, #mo-ttbres .fi,
#mo-ttpass .fs, #mo-ttpass .fi, #mo-ttdate .fs, #mo-ttdate .fi,
#mo-ttdoors .fs, #mo-ttdoors .fi, #mo-trainres .fs, #mo-trainres .fi,
#mo-activity .fs, #mo-activity .fi, #mo-actupd .fs, #mo-actupd .fi,
#mo-cancel .fs, #mo-cancel .fi {
  min-height: 30px; padding: 4px 8px; font-size: 13px; }
#mo-ttbulk .btn, #mo-demob .btn, #mo-shiftassign .btn, #mo-setdate .btn,
#mo-mobilize .btn, #mo-ttbres .btn, #mo-ttpass .btn, #mo-ttdate .btn,
#mo-ttdoors .btn, #mo-trainres .btn, #mo-activity .btn, #mo-actupd .btn,
#mo-cancel .btn { min-height: 30px; font-size: 12.5px; }
#mo-ttbulk .fl, #mo-demob .fl, #mo-shiftassign .fl, #mo-setdate .fl,
#mo-mobilize .fl, #mo-establish .fl { font-size: 11px; font-weight: 600; }
#mo-ttbulk .modal-title, #mo-demob .modal-title, #mo-establish .modal-title,
#mo-setdate .modal-title, #mo-mobilize .modal-title { font-size: 14.5px; font-weight: 700; color: var(--navy); }
/* picker rows in the shared pick panes: the 32px compact row + cherry hover */
.est-pick-body label { min-height: 32px; display: flex; align-items: center; padding: 4px 8px; }
.est-pick-body label:hover { background: var(--cherry-bg); }
/* tables inside any action dialog (shift transition cards etc.) */
#mo-shiftassign .wd-table, #mo-setdate .wd-table { font-size: 12px; }
#mo-shiftassign .wd-table td, #mo-setdate .wd-table td { height: 32px; padding: 4px 8px; }

/* 184 — THE MODAL LIST FIX: the dialog row-family census (est-pick-body
   labels · est-brow · the sheet abs-hrow) settles to the mined list scale —
   12px type, 32px rows, cherry hover. One grammar, no component left big. */
.est-pick-body label { font-size: 12px; }
.est-brow { font-size: 12px; }
.fld-sheet .abs-hrow { font-size: 12px; min-height: 30px; align-items: center; }

/* 186/P2 — the all-clear band + the Alerts page takes the batch-(d) language */
.dash-clear { font-size: 12.5px; color: var(--state-ok); background: var(--state-ok-bg);
  border: 1px solid var(--state-ok-line); border-radius: 8px; padding: 7px 12px; font-weight: 600; }
#page-flags .flg-item { padding: 8px 10px; font-size: 12.5px; min-height: 40px; }
#page-flags .flg-title { font-size: 12.5px; }
#page-flags .flg-desc, #page-flags .flg-time { font-size: 11px; }
#page-flags .tb, #page-flags .btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
#page-flags .flg-dec-row { font-size: 12.5px; padding: 6px 8px; }

/* 189/P5 — Employee Records: identity and actions never scroll away.
   Code + Name freeze left, the action cluster freezes right; only the
   middle slides. Sticky headers keep column names in view. */
#empdb-table th:nth-child(1), #empdb-table td:nth-child(1) {
  position: sticky; left: 0; background: #fff; z-index: 2; min-width: 86px; }
#empdb-table th:nth-child(2), #empdb-table td:nth-child(2) {
  position: sticky; left: 86px; background: #fff; z-index: 2; min-width: 140px;
  box-shadow: 2px 0 0 var(--gray1); }
#empdb-table th:last-child, #empdb-table td:last-child {
  position: sticky; right: 0; background: #fff; z-index: 2;
  box-shadow: -2px 0 0 var(--gray1); }
#empdb-table thead th:nth-child(1), #empdb-table thead th:nth-child(2),
#empdb-table thead th:last-child { z-index: 3; background: var(--navy); }
#empdb-table tbody tr:hover td:nth-child(1),
#empdb-table tbody tr:hover td:nth-child(2),
#empdb-table tbody tr:hover td:last-child { background: var(--cherry-bg); }

/* 190/P6 — the one-matrix toggle + Site Update density (batch d).
   The Deployed/On-Site segmented toggle sits beside the block title;
   the active segment carries the identity cherry. Matrix rows take the
   mined hover so the eye can track a site across 30+ columns. */
.su-mx-tog { display: inline-flex; border: 1px solid var(--gray3); border-radius: 6px; overflow: hidden; }
.su-mx-seg { border: 0; background: #fff; color: var(--ink-2); font: inherit;
  font-size: 11px; font-weight: 700; padding: 3px 10px; cursor: pointer; }
.su-mx-seg + .su-mx-seg { border-left: 1px solid var(--gray3); }
.su-mx-seg.on { background: var(--cherry); color: #fff; cursor: default; }
.su-table tbody tr:hover td:not(.rl) { background: var(--cherry-bg, #F7ECED); }

/* 192/P8 — Dashboard two-column at laptop. On phone the wrappers are
   display:contents inside a flex column and `order` keeps the ORIGINAL
   phone sequence (tiles → rates → site update → chart → movements) —
   the phone layout is untouched. At ≥1100px the wrappers become the two
   columns: strip + tiles + Site Update + movements left, the rates
   table + headcount chart right — no dead column. */
#dash-cols { display: flex; flex-direction: column; }
#dash-cols .dash-col { display: contents; }
#dash-cols .dash-col > * { min-width: 0; }
#dash-needs { order: 1; } #dash-cols .mgrid { order: 2; }
#dash-rates-card { order: 3; } #dash-siteupdate-card { order: 4; }
#dash-chart-card { order: 5; } #dash-moves-card { order: 6; }
@media (min-width: 1024px) {   /* LANE C (B1 §5.1 item 5): the two columns from the laptop width, not 1100 */
  #dash-cols { flex-direction: row; align-items: flex-start; }
  #dash-cols .dash-col { display: block; flex: 1 1 0; min-width: 0; }
  #dash-cols .dash-col + .dash-col { flex: 0 1 auto; max-width: 46%; }
}
@media (min-width: 1024px) and (max-width: 1399px) {   /* LANE C */
  #dash-cols .mgrid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   195 / BATCH (e) — THE RESTYLE CLOSES: Alerts (the batch-d debt) +
   Clients/Engagement + Timesheets + Revenue take the full mined language
   (Carbon table/tag metrics · Blueprint 30px controls · white/navy/cherry).
   Skin only — vocabulary and behavior untouched.
   ═══════════════════════════════════════════════════════════════════════ */
/* ── 1 · ALERTS ── */
#page-flags { font-size: 13px; }
#page-flags .flg-item { min-height: 32px; padding: 7px 10px; font-size: 12px; }
#page-flags .flg-item:hover { background: var(--cherry-bg); }
#page-flags .flg-title { font-size: 12.5px; }
#page-flags .flg-desc, #page-flags .flg-time { font-size: 11.5px; }
.flg-dec-row { padding: 7px 0; font-size: 12px; min-height: 32px; }
.flg-dec-row:hover { background: var(--cherry-bg); }
.flg-dec-row .btn-sm { min-height: 30px; padding: 4px 10px; font-size: 12px; }
.flg-dec-sect { font-size: 11px; }
#page-flags #flags-bulk-btn { min-height: 30px; }
/* ── 2 · CLIENTS / ENGAGEMENT ── */
#page-clients .sinp, #mo-registry .sinp, #mo-rate-editor .sinp, #mo-rate-editor .clf-sel {
  min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
#page-clients .btn-sm, #mo-registry .btn-sm, #mo-rate-editor .btn-sm {
  min-height: 30px; padding: 4px 10px; font-size: 12px; }
#mo-registry table td, #reg-certs td { font-size: 12px; }
#reg-certs table tr { min-height: 32px; }
#reg-certs table tr:hover td { background: var(--cherry-bg); }
.clr-t tbody tr:hover td { background: var(--cherry-bg); }
#mo-registry .btn-o, #mo-rate-editor .btn-o { border-color: var(--cherry); color: var(--cherry); }
#page-clients .clp-btn--solid { background: var(--cherry); border-color: var(--cherry); }
/* ── 3 · TIMESHEETS ── */
#page-timesheets .ts-title { font-size: 13px; font-weight: 800; color: var(--navy); }
#page-timesheets .sinp { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
#page-timesheets .btn { min-height: 30px; }
#page-timesheets .btn-o { border-color: var(--cherry); color: var(--cherry); }
/* ── 4 · REVENUE — financial care: dense, never below legible ── */
#page-revenue .sinp { min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.rv-row { padding: 7px 4px; font-size: 12.5px; min-height: 32px; }
.rv-row:hover { background: var(--cherry-bg); }
.rv-crumb:hover { color: var(--cherry); }
#page-revenue .btn-o { border-color: var(--cherry); color: var(--cherry); }

/* 198 — BATCH REMOVAL EVERYWHERE: the picked list is editable in-sheet.
   Chips carry a ✕ with a real tap target (24px); est-brow rows' ✕ kept
   at button size. Fat-finger care: the ✕ never sits flush to a control. */
.bk-picked { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 2px; }
.bk-pk { display: inline-flex; align-items: center; gap: 4px; background: var(--gray1);
  border: 1px solid var(--gray2); border-radius: 8px; padding: 2px 4px 2px 8px;
  font-size: 11.5px; white-space: nowrap; }
.bk-pk .bk-x, .est-brow .bk-x { border: 0; background: transparent; color: var(--gray5);
  cursor: pointer; font-size: 12px; min-width: 24px; min-height: 24px; line-height: 1;
  border-radius: 6px; padding: 0; }
.bk-pk .bk-x:hover, .est-brow .bk-x:hover { background: var(--cherry-bg); color: var(--cherry); }

/* 199/E3 — the set-date offer floats above the page, clear of the docked
   bar and below the modals; it survives every ledger re-mount. */
#sd-offer-float { position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 74px; z-index: 150; width: min(560px, calc(100vw - 20px)); }
@media (min-width: 768px) { #sd-offer-float { bottom: 18px; } }
#sd-offer-float .bt-birth { margin: 0; }

/* 202 — the permissions matrix toggles */
.perm-tg { min-width: 30px; min-height: 26px; border-radius: 6px; border: 1px solid var(--gray3);
  background: #fff; color: var(--gray4); cursor: pointer; font-size: 12px; font-weight: 700; }
.perm-tg.on { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.perm-tg.dead { background: var(--amber); border-color: var(--amber); color: #fff; }
/* 205 — the I/V/A cell chips */
.ch-chip { min-width: 24px; min-height: 24px; border-radius: 5px; border: 1px solid var(--gray3);
  background: #fff; color: var(--gray4); cursor: pointer; font-size: 10.5px; font-weight: 800; margin: 0 1px; padding: 0 3px; }
.ch-chip.on { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.ch-chip.off { opacity: .35; cursor: not-allowed; }
.ch-chip.st-initiate { background: var(--navy2, #274b6d); border-color: var(--navy2, #274b6d); color: #fff; }
.ch-chip.st-verify { background: var(--amber); border-color: var(--amber); color: #fff; }
.ch-chip.st-approve { background: var(--cherry); border-color: var(--cherry); color: #fff; }
.ch-lim { width: 64px; min-height: 26px; padding: 2px 6px; font-size: 11.5px; text-align: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   §177-A — THE COMPACT B COMMON PRESENTATION (owner-approved baseline,
   2026-09-11 · reference: docs/UI_STANDARD.md). The cc-* family is the
   reusable vocabulary for dense operational lists: a column header with
   filter funnels, a 30px row grid, identity/trade/state cells, a filter
   panel (bottom sheet on phone), the hidden-included warning, the selection
   summary with count-doors, and the shared-field stack. It is UNSCOPED but
   inert — nothing renders it until a reviewed screen carries the classes.
   Density comes from allocation and shorthand, never from smaller essential
   text: identity 12.5px, codes 11.5–12px Space Grotesk, headers 10.5px caps.
   ═══════════════════════════════════════════════════════════════════════ */
.cc-meta { font-size: 12px; color: var(--ink-2); margin: -6px 0 8px; }
/* the header — same column template as the rows (set --cc-cols on the wrapper) */
.cc-head { display: grid; grid-template-columns: var(--cc-cols); gap: 0 8px; align-items: center;
  padding: 5px 8px 5px 11px; background: var(--gray1); border: 1px solid var(--gray2); border-bottom: 0; border-radius: 8px 8px 0 0;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gray4); }
.cc-head > span { display: flex; align-items: center; gap: 4px; white-space: nowrap; min-width: 0; }
.cc-fnl { border: 1px solid var(--gray3); background: #fff; color: var(--gray4); border-radius: 6px; min-width: 20px; height: 18px;
  font-size: 10px; font-weight: 800; line-height: 1; padding: 0 4px; cursor: pointer; letter-spacing: 0; }
.cc-fnl.on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-t); }
/* the row — 30px, left edge carries the row's standing (inc = in the act, neg = negative, off = untouched) */
.cc-row { display: grid; grid-template-columns: var(--cc-cols); gap: 0 8px; align-items: center; min-height: 30px;
  padding: 0 8px; border-bottom: 1px solid var(--gray1); border-left: 3px solid transparent; font-size: 12.5px; }
.cc-row:last-child { border-bottom: 0; }
.cc-row:hover { background: var(--cherry-bg); }
.cc-row.inc { border-left-color: var(--green); }
.cc-row.neg { border-left-color: var(--red); background: var(--red-bg); }
.cc-no { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; color: var(--navy); white-space: nowrap; }
.cc-nm { display: flex; align-items: center; gap: 6px; min-width: 0; font-weight: 600; color: var(--text); }
.cc-nm-s, .cc-nm-f { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-nm-f { display: none; }                       /* the full name shows on phone rows; desktop reveals it on hover (title) */
.cc-nm > span[style] { margin-left: 0 !important; padding-left: 0 !important; }
.cc-tr { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--navy); white-space: nowrap; }
.cc-st { font-size: 12px; color: var(--gray4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-ctl { display: flex; gap: 4px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.cc-ctl .btn { min-height: 26px; padding: 3px 9px; font-size: 12px; white-space: nowrap; }
.cc-ctl .fi, .cc-ctl .fs { min-height: 26px; padding: 2px 6px; font-size: 12px; width: auto; max-width: 150px; }
.cc-exp .fi { min-height: 26px; padding: 2px 6px; font-size: 12px; width: 100%; max-width: 118px; }
/* tools: compact buttons; phone-only filter buttons; active = amber */
.cc-tools .btn { min-height: 28px; padding: 4px 11px; font-size: 12px; }
.cc-tools .btn.on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-t); }
.cc-phf { display: inline-flex; gap: 6px; margin-left: auto; }
.cc-hidnote { font-size: 12px; font-weight: 700; margin: 0 0 6px; display: flex; gap: 6px 14px; flex-wrap: wrap; }
.cc-hid { color: var(--amber-t); }
.cc-fon { color: var(--navy); font-weight: 600; }
/* the filter panel — under the header on desktop, a bottom sheet on phone */
.cc-fpanel { position: absolute; top: 30px; left: 0; z-index: 30; min-width: 240px; max-width: 320px; max-height: 320px; overflow-y: auto;
  background: #fff; border: 1.5px solid var(--gray2); border-radius: 10px; box-shadow: 0 8px 28px rgba(15,39,68,.2); padding: 8px; }
.cc-fpanel-t { font-family: 'Space Grotesk', sans-serif; font-size: 12px; font-weight: 700; margin-bottom: 4px; color: var(--navy); }
.cc-fpanel label { display: flex; align-items: center; gap: 8px; padding: 4px 4px; font-size: 12.5px; border-radius: 5px; cursor: pointer; }
.cc-fpanel label.on { background: var(--amber-bg); }
.cc-fpanel label > span:first-of-type { flex: 1; min-width: 0; }
.cc-fpanel .c { margin-left: auto; font-size: 11px; color: var(--ink-2); }
.cc-fpanel-x { display: flex; justify-content: space-between; margin-top: 6px; font-size: 12px; font-weight: 700; }
/* shared fields stack; a pair sits side by side; one helper line */
.cc-inp { display: flex; flex-direction: column; gap: 6px; }
.cc-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cc-help { font-size: 11px; color: var(--gray4); line-height: 1.4; }
/* the selection summary — every count a door (CLAUDE.md §2.15) */
.cc-sit { border: 1px solid var(--gray2); border-radius: 10px; padding: 8px 10px; margin-top: 8px; display: flex; gap: 6px 12px; flex-wrap: wrap; align-items: baseline; }
.cc-sit-h { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray4); }
.cc-sit-n b { font-family: 'Space Grotesk', sans-serif; font-size: 18px; color: var(--navy); }
.cc-sit-s { display: flex; gap: 10px; }
.cc-sit-shown { flex-basis: 100%; font-size: 11px; color: var(--gray4); }
.cc-door { color: var(--navy); text-decoration: none; font-weight: 700; font-size: 12.5px; border-radius: 6px; padding: 0 3px; }
.cc-door.g { color: var(--green-t); }
.cc-door.r { color: var(--red-t); }
.cc-door.on { background: var(--amber-bg); outline: 1px solid var(--amber); }
/* PHONE / TABLET: the row stacks — identity line, state line, controls line — the full name shows */
@media (max-width: 1023px) {
  .cc-head { display: none; }
  .cc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no nm tr" "st st st" "ctl ctl exp"; gap: 2px 8px; padding: 6px 9px; min-height: 0; }
  .cc-no { grid-area: no; } .cc-nm { grid-area: nm; } .cc-tr { grid-area: tr; text-align: right; }
  .cc-st { grid-area: st; white-space: normal; } .cc-ctl { grid-area: ctl; margin-top: 3px; } .cc-exp { grid-area: exp; margin-top: 3px; justify-self: end; }
  .cc-nm-s { display: none; } .cc-nm-f { display: inline; white-space: normal; }
  .cc-ctl .btn { min-height: 32px; padding: 5px 11px; }
  .cc-exp .fi { min-height: 32px; max-width: 130px; }
  .cc-fpanel { position: fixed; top: auto; left: 0; right: 0; bottom: 0; max-width: none; max-height: 70vh; z-index: 260;
    border-radius: 14px 14px 0 0; border-bottom: 0; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgba(15,39,68,.28); }
  .cc-fpanel::before { content: ''; display: block; width: 36px; height: 4px; border-radius: 2px; background: var(--gray2); margin: 0 auto 8px; }
  .cc-fpanel label { padding: 7px 4px; font-size: 14px; }
}
@media (min-width: 1024px) { .cc-phf { display: none !important; } }

/* ═══════════════════════════════════════════════════════════════════════════
   §177-B — THE BATCH-PROCESSING LAYOUT PATTERN, scoped to the batch gate
   window (#mo-establish on its single-list steps; corGateListRender sets
   .cor-compact). Rail (journey · shared fields · sitting summary, 250px from
   its content) + main (tools · hidden-included line · header + list that
   fills the height) + a static footer (preview → note → buttons). Phone:
   the modal scrolls whole under a sticky footer. Lift this block as a unit
   onto a later approved screen ONLY where that screen is a batch sitting.
   ═══════════════════════════════════════════════════════════════════════ */
#mo-establish .cor-body { display: block; }
#mo-establish #est-gatewrap { position: relative; }
#mo-establish .cor-compact #est-gatewrap { --cc-cols: 84px minmax(180px, 1.2fr) 74px minmax(120px, .8fr) minmax(220px, 1fr); }
#mo-establish .cor-compact #est-gatewrap.cor-gp { --cc-cols: 84px minmax(180px, 1.2fr) 74px minmax(120px, .8fr) 214px 118px; }   /* §C: Gate Pass carries the Expiry column */
#mo-establish .cor-compact #est-gatelist { border: 1px solid var(--gray2); border-radius: 0 0 8px 8px; padding: 0; margin: 0; overflow-y: auto; }
#mo-establish .cor-compact #est-gatebar { margin: 0 0 6px; }
#mo-establish .cor-compact #est-filter-row { overflow: visible; white-space: normal; margin: 0 0 6px; }
#mo-establish .cor-compact #est-worker-search { width: 220px; }
#mo-establish .est-strip #est-notes-w { margin: 0; flex: 1 1 180px; min-width: 160px; max-width: 320px; }
#mo-establish .est-strip #est-notes-w .fl { display: none; }
#mo-establish .est-strip #est-notes-w .fi { min-height: 30px; }
@media (min-width: 1024px) {
  #mo-establish .modal.cor-compact { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  #mo-establish .modal.cor-compact .cor-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 16px; flex: 1 1 auto; min-height: 0; }
  #mo-establish .modal.cor-compact .cor-rail { overflow-y: auto; min-height: 0; padding-right: 4px; border-right: 1px solid var(--gray2); }
  #mo-establish .modal.cor-compact .cor-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto minmax(0, 1fr) auto auto; min-height: 0; column-gap: 8px; }
  #mo-establish .modal.cor-compact #est-gatebar { grid-row: 1; grid-column: 1; }
  #mo-establish .modal.cor-compact #est-filter-row { grid-row: 1; grid-column: 2; justify-content: flex-end; }
  #mo-establish .modal.cor-compact #est-hidnote { grid-row: 2; grid-column: 1 / -1; }
  #mo-establish .modal.cor-compact #est-gatewrap { grid-row: 3; grid-column: 1 / -1; min-height: 0; display: flex; flex-direction: column; }
  #mo-establish .modal.cor-compact #est-gatelist { flex: 1 1 auto; min-height: 120px; }
  #mo-establish .modal.cor-compact #est-blocked { grid-row: 4; grid-column: 1 / -1; }
  #mo-establish .modal.cor-compact #est-cor-report { grid-row: 5; grid-column: 1 / -1; }
  #mo-establish .modal.cor-compact .est-panels { display: none !important; }
  #mo-establish .modal.cor-compact .est-strip { position: static; margin: 10px -20px 0; flex-wrap: nowrap; }
  #mo-establish .modal.cor-compact .est-strip-w { font-size: 12px; line-height: 1.4; }
  /* the journey stands as a column of chips in the rail */
  #mo-establish .modal.cor-compact #est-chainstrip::before, #mo-establish .modal.cor-compact #est-cor-inputs:not(:empty)::before {
    display: block; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray4); margin: 2px 0 6px; }
  #mo-establish .modal.cor-compact #est-chainstrip::before { content: "The batch’s journey"; }
  #mo-establish .modal.cor-compact #est-cor-inputs:not(:empty)::before { content: "Shared for this sitting"; }
  #mo-establish .modal.cor-compact #est-chainstrip > div:first-child { flex-direction: column !important; align-items: stretch !important; gap: 4px !important; border: 0 !important; padding: 0 !important; }
  #mo-establish .modal.cor-compact #est-chainstrip > div:first-child > span:not([class]) { display: none; }
  #mo-establish .modal.cor-compact #est-chainstrip > div:first-child > button { justify-content: space-between; border-radius: 8px !important; padding: 5px 10px !important; }
  #mo-establish .modal.cor-compact #est-chainstrip > div:first-child > .t-meta { padding: 2px 0; }
  #mo-establish .modal.cor-compact #est-cor-inputs .fl { font-size: 11px; }
}
@media (max-width: 1023px) {
  #mo-establish .modal.cor-compact #est-gatelist { max-height: none; border-radius: 8px; }
  #mo-establish .modal.cor-compact .cor-main { display: flex; flex-direction: column; }
  #mo-establish .modal.cor-compact #est-filter-row { order: -1; }
  #mo-establish .modal.cor-compact #est-worker-search { width: 100%; }
  #mo-establish .modal.cor-compact #est-gatebar { order: 0; }
  #mo-establish .modal.cor-compact .cc-sit { margin: 4px 0 8px; }
  #mo-establish .modal.cor-compact .est-strip { flex-direction: column; align-items: stretch; gap: 6px; }
  #mo-establish .modal.cor-compact .est-strip #est-notes-w { max-width: none; flex: none; }
  #mo-establish .modal.cor-compact .est-strip .est-strip-acts { display: grid; grid-template-columns: auto 1fr; gap: 6px; }
  #mo-establish .modal.cor-compact .est-strip .est-strip-acts .btn { min-height: 38px; }
}
/* §177-B (release check): on phone the title is a sticky white band, so the
   sticky close button sits over the band's own right padding — never over a
   scrolled row's trade or controls. */
@media (max-width: 1023px) {
  /* the scrollport's sticky edge sits 20px in (the modal padding) — the band
     starts at -20px so rows never show through the padding strip above it */
  #mo-establish .modal.cor-compact .modal-title { position: sticky; top: -20px; z-index: 59; background: #fff; margin: -20px -20px 4px; padding: 28px 64px 6px 20px; border-bottom: 1px solid var(--gray2); }
  #mo-establish .modal.cor-compact .mo-handle { display: none; }
  /* the sticky footer's overhang matches the modal padding — the last row's controls stay clear of it */
  #mo-establish .modal.cor-compact .est-strip { margin: 12px -20px -20px; }
  #mo-establish .modal.cor-compact #est-gatelist { margin-bottom: 6px; }
}
/* §177 final (MP, 2026-09-11): an existing batch shows its destination in the title —
   the locked project selector does not occupy visible space. The element stays for
   the handlers; the list takes the recovered height (the body already fills the modal). */
#mo-establish .modal.cor-bound #est-project-fg { display: none; }
#mo-establish .modal.cor-bound .cc-meta { margin-bottom: 10px; }

/* ═══════════════════════════════════════════════════════════════════════════
   §178 — PACKAGE 1: SITE UPDATE DETAIL LISTS (2026-09-11). Scoped to the
   three reporting windows: the office roster (#mo-site-personnel .sp-compact),
   the Site Update workers list (#mo-sulist .sul-compact) and the pipeline
   breakdown (#mo-supipe .spp-compact). The cc-* family (§177-A) carries the
   look; nothing here touches the batch window, W19 or any other caller.
   ═══════════════════════════════════════════════════════════════════════ */
/* widths: the §165 laptop rule (index.html, !important) opens every modal at 94vw; these three reporting
   windows take the width their columns need (declared !important so the scoped width wins) */
#mo-site-personnel .modal.sp-compact { max-width: min(1080px, 94vw) !important; }
#mo-sulist .modal.sul-compact { max-width: min(860px, 94vw) !important; }
#mo-site-personnel .modal.sp-compact .modal-title, #mo-sulist .modal.sul-compact .modal-title, #mo-supipe .modal.spp-compact .modal-title {
  font-size: 14.5px; font-weight: 700; color: var(--navy); padding-right: 44px; }
#mo-site-personnel .modal.sp-compact #sp-sub, #mo-sulist .modal.sul-compact #sul-sub { font-size: 12px; color: var(--ink-2); }
.sp-compact .sp-tools { margin: 8px 0 6px; }
.sp-compact .sp-phf, .sul-tools .cc-phf { flex-wrap: wrap; }
#mo-site-personnel .modal .sp-head { padding-right: 44px; }   /* the sticky ✕ (mo-x) is the close control for every W20 caller */
.sp-compact .sp-tools .sinp, .sul-tools .sinp { flex: 1 1 200px; min-width: 160px; min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.sul-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; }
.sul-count, .sp-compact #sp-count { font-size: 11.5px; color: var(--gray4); white-space: nowrap; }
.sp-compact #sp-count { margin-bottom: 4px; }
.sul-note { font-size: 11px; color: var(--gray4); font-style: italic; margin: -4px 0 6px; }
.sp-chips, .sul-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 11.5px; margin: 0 0 6px; }
.sp-chips:empty, .sul-chips:empty { display: none; }
.cc-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 12px; background: var(--amber-bg); color: var(--amber-t); border: 1px solid var(--amber); font-weight: 600; }
.cc-chip button { border: 0; background: none; color: inherit; font-weight: 800; cursor: pointer; padding: 0 2px; font-size: 12px; line-height: 1; }
.cc-chip-all { color: var(--navy); font-weight: 700; text-decoration: none; }
.cc-listwrap { position: relative; }
.cc-list { border: 1px solid var(--gray2); border-radius: 8px; overflow: auto; background: #fff; }
.cc-list > .cc-head { border: 0; border-bottom: 1px solid var(--gray2); border-radius: 8px 8px 0 0; }
.cc-list > .cc-row:last-child { border-bottom: 0; }
.cc-head.cc-stick { position: sticky; top: 0; z-index: 2; }
.sp-compact .cc-list, .sul-compact .cc-list { max-height: 56vh; }
.sul-compact #sul-body { max-height: none !important; overflow: visible !important; }   /* the list box scrolls; the panel overlays it */
.cc-c { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cc-c.abs { color: var(--red-t, #7B1E14); font-weight: 700; }
.sul-det { font-size: 12px; color: var(--text); min-width: 0; white-space: normal; line-height: 1.3; padding: 4px 0; }
.cc-empty { padding: 22px 12px; text-align: center; color: var(--gray4); font-size: 12.5px; border: 1px solid var(--gray2); border-top: 0; border-radius: 0 0 8px 8px; }
.cc-empty a { color: var(--navy); font-weight: 700; }
.cc-fpanel.sp-fpanel { position: fixed; top: auto; left: auto; }   /* the roster's panel sits on <body>, placed under its funnel by script */
.sp-compact .cc-ctl .btn, .sul-compact .cc-ctl .btn { min-height: 24px; padding: 2px 8px; font-size: 11.5px; }
/* the pipeline breakdown: same header, the matrix keeps its grammar */
#mo-supipe .modal.spp-compact .su-table { font-size: 12.5px; }
#mo-supipe .modal.spp-compact .su-table th { background: var(--gray1); color: var(--gray4); font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; border-color: var(--gray2); }
#mo-supipe .modal.spp-compact .su-table th.lh { background: var(--gray1); }
#mo-supipe .modal.spp-compact .su-table td { padding: 7px 8px; border-color: var(--gray2); height: 30px; }
#mo-supipe .modal.spp-compact .su-table td.rl { background: #fff; color: var(--navy); font-weight: 600; border-right-color: var(--gray2); }
#mo-supipe .modal.spp-compact .su-table { border-color: var(--gray2); }
@media (min-width: 1024px) {
  #mo-supipe .modal.spp-compact { max-width: min(900px, 94vw) !important; }
}
/* phone / tablet: rows stack, the modal scrolls whole under a sticky title band (§177-B's rule) */
@media (max-width: 1023px) {
  #mo-site-personnel .modal.sp-compact .cc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no nm tr" "nat mob sh" "sta sta ctl"; }
  .sp-compact .sp-nat { grid-area: nat; } .sp-compact .sp-mob { grid-area: mob; text-align: center; } .sp-compact .sp-sh { grid-area: sh; text-align: right; }
  .sp-compact .sp-sta { grid-area: sta; white-space: normal; } .sp-compact .cc-ctl { grid-area: ctl; justify-self: end; margin-top: 3px; }
  .sp-compact .sp-nat, .sp-compact .sp-mob, .sp-compact .sp-sh { font-size: 11.5px; color: var(--gray4); }
  #mo-sulist .modal.sul-compact .cc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no nm tr" "det det ctl"; }
  .sul-compact .sul-det { grid-area: det; padding: 0; } .sul-compact .cc-ctl { grid-area: ctl; justify-self: end; margin-top: 3px; }
  .sp-compact .cc-list, .sul-compact .cc-list { max-height: none; }
  .cc-fpanel.sp-fpanel { top: auto !important; left: 0 !important; right: 0; bottom: 0; }
  #mo-site-personnel .modal.sp-compact .sp-head, #mo-sulist .modal.sul-compact .modal-title, #mo-supipe .modal.spp-compact .modal-title {
    position: sticky; top: -18px; z-index: 59; background: #fff; margin: -18px -16px 4px; padding: 26px 56px 6px 16px; border-bottom: 1px solid var(--gray2); }
  #mo-site-personnel .modal.sp-compact .sp-head .modal-title { padding-right: 0; }
  .sp-compact .cc-ctl .btn, .sul-compact .cc-ctl .btn { min-height: 30px; padding: 4px 10px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   §179 — R1: THE COMBINED EMPLOYEE RECORDS DESTINATION (2026-09-12). Scoped to
   #page-empdb: the view switch + scope line, and the Status view's strip,
   tools and Compact B rows. The Records table keeps its own styles.
   ═══════════════════════════════════════════════════════════════════════ */
#page-empdb .edb-switch-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 0 16px 8px; }
#page-empdb .edb-seg { display: inline-flex; border: 1.5px solid var(--gray2); border-radius: 9px; overflow: hidden; background: #fff; }
#page-empdb .edb-seg-b { border: 0; background: transparent; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12.5px; padding: 6px 14px; color: var(--gray5); cursor: pointer; min-height: 30px; }
#page-empdb .edb-seg-b + .edb-seg-b { border-left: 1.5px solid var(--gray2); }
#page-empdb .edb-seg-b.on { background: var(--navy); color: #fff; }
#page-empdb .edb-scope { font-size: 12px; color: var(--ink-2); }
#page-empdb .edb-hidden { display: none !important; }
#page-empdb #edb-st-strip { padding-bottom: 8px; }
#page-empdb .edb-tb-n { font-family: 'Space Grotesk', sans-serif; font-size: 11px; opacity: .8; margin-left: 2px; }
#page-empdb .edb-st-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 16px 8px; }
#page-empdb .edb-st-tools .sinp { flex: 1 1 220px; min-width: 160px; min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
#page-empdb .edb-st-tools .fs { min-height: 30px; padding: 3px 8px; font-size: 12.5px; max-width: 260px; }
#page-empdb .edb-st-tools .btn.on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-t); }
#page-empdb .edb-st-count { font-size: 11.5px; color: var(--gray4); white-space: nowrap; margin-left: auto; }
#page-empdb .edb-st-list { padding: 0 16px 20px; }
#page-empdb .edb-st-cclist { max-height: calc(100vh - 300px); min-height: 200px; }
#page-empdb .edb-st-row { cursor: pointer; }
#page-empdb .edb-st-row:focus { outline: 2px solid var(--amber); outline-offset: -2px; }
#page-empdb .edb-st-st .pill { font-size: 11px; padding: 2px 8px; }
#page-empdb .edb-st-site { font-size: 12px; }
#page-empdb .edb-st-cclist .cc-ctl .btn { min-height: 24px; padding: 2px 8px; font-size: 11.5px; }
@media (min-width: 768px) { #page-empdb .edb-switch-row, #page-empdb .edb-st-tools, #page-empdb .edb-st-list { padding-left: 24px; padding-right: 24px; } #page-empdb #edb-st-strip { padding-left: 24px; } }
@media (max-width: 1023px) {
  #page-empdb .edb-st-cclist .cc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no nm tr" "site site st" "ctl ctl ctl"; }
  #page-empdb .edb-st-site { grid-area: site; white-space: normal; } #page-empdb .edb-st-st { grid-area: st; justify-self: end; }
  #page-empdb .edb-st-cclist .cc-ctl { grid-area: ctl; margin-top: 4px; flex-wrap: wrap; }
  #page-empdb .edb-st-cclist .cc-ctl .btn { min-height: 30px; padding: 4px 10px; }
  #page-empdb .edb-st-cclist { max-height: none; }
  #page-empdb .edb-st-count { margin-left: 0; flex-basis: 100%; }
}

/* ── §180 · R2 — History view host, exact-worker Documents context, History → Create a batch handoff ─────
   Scoped to their own hosts; nothing here restyles the History module's own tables (inline, its own). */
#page-empdb .edb-history { padding: 0 16px 20px; }
@media (min-width: 768px) { #page-empdb .edb-history { padding-left: 24px; padding-right: 24px; } }
.wh-selbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 8px; margin-bottom: 6px; border: 1px dashed var(--gray2); border-radius: 10px; font-size: 12px; color: var(--gray4); }
.wh-selbar.on { border-style: solid; border-color: var(--amber); background: var(--amber-bg); color: var(--amber-t); }
.wh-selbar .wh-selbar-n { margin-right: auto; }
.wh-selbar .btn.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }
.wh-selbar .btn[disabled] { opacity: .5; cursor: not-allowed; }
.wh-selbox { width: 15px; height: 15px; cursor: pointer; }
.wd-ctx { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; margin: 6px 0 8px; padding: 7px 10px; border: 1.5px solid var(--navy); border-radius: 10px; background: #fff; font-size: 12.5px; }
.wd-ctx .wd-ctx-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray4); font-weight: 700; }
.wd-ctx .btn.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }
.wd-ctx .btn.btn-sm:first-of-type { margin-left: auto; }
.wd-ctx.wd-ctx-off { border-style: dashed; border-color: var(--gray2); color: var(--gray4); }
.wd-ctx.wd-ctx-na { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-t); }
.nb-carried { border: 1.5px solid var(--navy); border-radius: 10px; padding: 8px 10px; margin: 0 0 8px; background: #fff; font-size: 12.5px; }
.nb-carried .nb-carried-h { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; }
.nb-carried .nb-carried-ok { color: var(--green, #137333); font-weight: 700; }
.nb-carried .nb-carried-no { color: var(--red); font-weight: 700; }
.nb-carried .nb-carried-sec { margin-top: 6px; font-size: 12px; }
.nb-carried ul { margin: 2px 0 0 18px; padding: 0; }
.nb-carried .btn.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }

/* ── §181 · R2.1 — the Workforce Decision Workspace: Records table, basket bar, Trends drawer, Payroll ── */
/* correction 1 (R2.1 pass 2): the table is content-sized (no forced 1500px), every column has a stated width
   (er-w-*), headers may wrap to two lines, the current-placement columns fit the initial view beside the fixed
   Code/Name and Actions/Trends regions at the laptop widths; the container is height-bounded so the horizontal
   scroll control and the sticky header are always within reach */
#empdb-table { table-layout: fixed; min-width: 0; width: 100%; }   /* fixed: each column is exactly its stated width; the table grows to their sum */
.empdb-desktop { max-height: calc(100vh - 100px); overflow: auto; }
#empdb-table thead th { white-space: normal; line-height: 1.15; vertical-align: middle; }
#empdb-table th.er-fz, #empdb-table td.er-fz { position: sticky; background: inherit; z-index: 2; }
#empdb-table th.er-fz { z-index: 4; }
#empdb-table th, #empdb-table td { padding-left: 6px; padding-right: 6px; }
#empdb-table .er-fz1 { left: 0; width: 84px; min-width: 84px; max-width: 84px; white-space: nowrap; }
#empdb-table .er-fz2 { left: 84px; width: 156px; min-width: 156px; max-width: 156px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#empdb-table th.er-w-state { width: 116px; } #empdb-table th.er-w-exp { width: 58px; }
#empdb-table th.er-w-cat { width: 76px; } #empdb-table th.er-w-cat2 { width: 92px; }
#empdb-table th.er-site { width: 200px; } #empdb-table th.er-w-date { width: 96px; }
#empdb-table th.er-w-est { width: 112px; } #empdb-table th.er-w-nat { width: 92px; }
#empdb-table th.er-w-age { width: 48px; } #empdb-table th.er-w-qid { width: 96px; }
#empdb-table th.er-w-acc { width: 112px; } #empdb-table th.er-cc { width: 76px; }
#empdb-table td.er-nw { white-space: nowrap; }
#empdb-table .er-nmw { display: flex; align-items: center; gap: 4px; min-width: 0; }   /* the name may shorten with an ellipsis; the missing-details door never disappears */
#empdb-table .er-nmt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
#empdb-table .er-nmw .miss-chip, #empdb-table .er-nmw > :not(.er-nmt) { flex: 0 0 auto; }
#empdb-table td .er-cat { white-space: normal; }   /* a category without a short code shows its full name and wraps — never clipped, never abbreviated */
#empdb-table td { overflow-wrap: anywhere; }
#empdb-table tbody td.er-fz { background: #fff; }
#empdb-table tbody tr:hover td.er-fz { background: var(--gray1); }
#empdb-table tbody tr.er-sel td { background: var(--amber-bg); }
#empdb-table tbody tr.er-sel td.er-fz { background: var(--amber-bg); }
#empdb-table th.er-selh, #empdb-table td.er-selc { width: 30px; min-width: 30px; max-width: 30px; padding-left: 8px; padding-right: 4px; position: sticky; left: 0; z-index: 3; background: inherit; }
#empdb-table th.er-selh { z-index: 5; }
#empdb-table tbody td.er-selc { background: #fff; }
#empdb-table th.er-selh ~ .er-fz1, #empdb-table td.er-selc ~ .er-fz1 { left: 30px; }
#empdb-table th.er-selh ~ .er-fz2, #empdb-table td.er-selc ~ .er-fz2 { left: 114px; }
#empdb-table th.er-selh { white-space: nowrap; }
#empdb-table th.er-sort { cursor: pointer; }
#empdb-table th.er-sort.on::after { content: ' ▲'; font-size: 9px; }
#empdb-table th.er-sort.on.desc::after { content: ' ▼'; }
#empdb-table th.er-act, #empdb-table td.er-act { position: sticky; right: 64px; background: inherit; z-index: 2; white-space: nowrap; width: 156px; min-width: 156px; }
#empdb-table th.er-tr, #empdb-table td.er-tr { position: sticky; right: 0; background: inherit; z-index: 2; }
#empdb-table th.er-tr { z-index: 4; }
#empdb-table tbody td.er-tr { background: #fff; }
#empdb-table tbody tr:hover td.er-tr { background: var(--gray1); }
#empdb-table tbody tr.er-sel td.er-tr { background: var(--amber-bg); }
#empdb-table th.er-act:not(:has(+ .er-tr)), #empdb-table td.er-act:last-child { right: 0; }
#empdb-table td.er-site { white-space: normal; width: 200px; max-width: 200px; line-height: 1.25; }
#empdb-table th.er-act { z-index: 4; }
#empdb-table tbody td.er-act { background: #fff; }
#empdb-table tbody tr:hover td.er-act, #empdb-table tbody tr:hover td.er-selc { background: var(--gray1); }
#empdb-table tbody tr.er-sel td.er-act, #empdb-table tbody tr.er-sel td.er-selc { background: var(--amber-bg); }
#empdb-table th.er-tr, #empdb-table td.er-tr { width: 64px; }
#empdb-table .er-actw { display: inline-flex; gap: 3px; }
#empdb-table .er-actw .btn, #empdb-table .er-trbtn { min-height: 22px; padding: 1px 5px; font-size: 11px; }
#empdb-table td.er-cc, #empdb-table th.er-cc { text-align: center; padding-left: 4px; padding-right: 4px; font-size: 11px; white-space: nowrap; }
.er-cat { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: .2px; }
.er-cat-ret { opacity: .7; text-decoration: underline dotted; }
.er-lwd { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 10.5px; font-weight: 700; background: var(--amber-bg); color: var(--amber-t); border: 1px solid var(--amber); white-space: nowrap; }
.er-lwd-over { background: #FCE8E6; color: #7B1E14; border-color: var(--red); }
.er-cok { color: var(--green, #137333); font-weight: 600; } .er-csoon { color: var(--amber-t, #7A4A08); font-weight: 700; } .er-cexp { color: var(--red); font-weight: 600; } .er-cmiss { color: var(--gray3); } .er-cq { color: var(--gray4); font-weight: 700; }
.er-cbk { display: inline-block; margin-left: 2px; padding: 0 4px; border-radius: 6px; font-size: 10px; font-weight: 700; background: #E8F0FE; color: #1A4FAA; }
.er-cchip { display: inline-block; padding: 0 5px; border-radius: 6px; font-size: 10.5px; font-weight: 700; border: 1px solid var(--gray2); }
.er-c-valid { color: var(--green, #137333); } .er-c-soon { color: var(--amber-t); border-color: var(--amber); } .er-c-expired { color: var(--red); border-color: var(--red); } .er-c-booked { color: #1A4FAA; } .er-c-missing { color: var(--gray3); }
.er-pop { display: inline-flex; border: 1.5px solid var(--gray2); border-radius: 8px; overflow: hidden; font-size: 12px; }
.er-pop.lock { padding: 5px 10px; color: var(--gray4); }
.er-popb { border: 0; background: #fff; padding: 5px 10px; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; cursor: pointer; color: var(--navy); }
.er-popb + .er-popb { border-left: 1.5px solid var(--gray2); }
.er-popb.on { background: var(--navy); color: #fff; }
.er-barhost { padding: 0 16px 8px; } @media (min-width: 768px) { .er-barhost { padding: 0 24px 8px; } }
.er-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 10px; border: 1px dashed var(--gray2); border-radius: 10px; font-size: 12px; color: var(--gray4); background: #fff; }
.er-bar.on { border-style: solid; border-color: var(--amber); background: var(--amber-bg); color: var(--amber-t); }
.er-bar.rev { border-color: var(--navy); }
.er-bar .er-bar-n { margin-right: auto; }
.er-bar .er-bar-all { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
.er-bar .btn.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }
.er-bar .btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.er-bar .btn[disabled] { opacity: .5; cursor: not-allowed; }
.er-selbox { width: 15px; height: 15px; cursor: pointer; }
.er-cardsel { display: flex; align-items: flex-start; padding: 4px 8px 0 0; }
.empdb-card.er-sel { outline: 2px solid var(--amber); }
.er-cardacts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.er-cardacts .btn { min-height: 28px; padding: 3px 10px; font-size: 12px; }
/* Trends drawer */
.wt-modal { max-width: 980px !important; width: 100%; }
.wt-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.wt-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 16px; color: var(--navy); flex: 1 1 260px; }
.wt-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.wt-nav .btn.btn-sm { min-height: 26px; padding: 2px 10px; font-size: 12px; }
.wt-basket { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; margin: 0 6px; }
.wt-period { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; font-size: 12px; }
.wt-chip { border: 1.5px solid var(--gray2); background: #fff; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-weight: 600; cursor: pointer; }
.wt-chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.wt-plbl { flex-basis: 100%; }
.wt-sec { margin-top: 8px; }
.wt-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wt-tile { border: 1px solid var(--gray2); border-radius: 10px; padding: 8px 10px; background: #fff; }
.wt-tl { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray4); }
.wt-tv { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 18px; color: var(--navy); }
.wt-ts { font-size: 10.5px; color: var(--gray4); margin-top: 2px; }
.wt-note { font-size: 12px; color: var(--gray4); margin: 8px 0; }
.wt-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--gray4); font-weight: 700; margin: 10px 0 4px; }
.wt-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.wt-tbl th { text-align: left; font-size: 10.5px; text-transform: uppercase; color: var(--gray4); border-bottom: 2px solid var(--gray2); padding: 6px 8px; white-space: nowrap; }
.wt-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--gray1); vertical-align: top; }
/* Payroll */
.edb-payroll { padding: 0 16px 20px; } @media (min-width: 768px) { .edb-payroll { padding: 0 24px 20px; } }
.pr-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; font-size: 12px; }
.pr-tools label { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.pr-tools .fi { width: auto; min-height: 30px; padding: 3px 8px; font-size: 12.5px; }
.pr-tools .sinp { flex: 1 1 200px; min-width: 160px; min-height: 30px; padding: 4px 10px; font-size: 12.5px; }
.pr-count { margin-bottom: 6px; }
/* correction 4: the Payroll grid is height-bounded so its headings stay visible while the rows scroll */
.pr-wrap { overflow: auto; max-height: calc(100vh - 100px); border: 1px solid var(--gray2); border-radius: 8px; background: #fff; }
.pr-tbl { width: 100%; min-width: 1500px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.pr-tbl thead th { background: var(--navy); color: #fff; padding: 8px 8px; text-align: left; white-space: nowrap; font-size: 11px; position: sticky; top: 0; z-index: 2; vertical-align: top; }
.pr-tbl thead th .pr-h2 { display: block; font-weight: 400; opacity: .8; font-size: 10px; white-space: normal; max-width: 150px; }
.pr-tbl thead th .pr-h2w { max-width: 250px; }
.pr-tbl .pr-auto { color: var(--gray4); font-style: italic; font-size: 11px; white-space: nowrap; }
.pr-tbl .pr-na { color: var(--amber-t, #7A4A08); font-size: 11px; white-space: nowrap; }
.pr-tbl td.pr-basis { white-space: normal; min-width: 150px; font-size: 11px; }
.pr-tbl td { padding: 6px 8px; border-bottom: 1px solid var(--gray2); vertical-align: top; white-space: nowrap; }
.pr-tbl td.pr-ob, .pr-tbl td.pr-disc { white-space: normal; min-width: 130px; font-size: 11.5px; }
.pr-thism { font-weight: 700; color: var(--amber-t); }
/* History lenses */
.wh-hz { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border: 1px solid #E5E5E5; border-radius: 10px; padding: 8px; margin-bottom: 8px; background: #fff; }
.wh-hz .wh-hzl { font-size: 11px; color: var(--gray4); text-transform: uppercase; font-weight: 700; }
.wh-hz .wh-hzb { border: 1.5px solid #DDD; background: #fff; color: #333; padding: 4px 11px; border-radius: 14px; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.wh-hz .wh-hzb.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.wh-hz .wh-hzsec { border-style: dashed; }
.wh-hz .wh-hzr { font-size: 11.5px; color: var(--gray4); flex-basis: 100%; }
.wh-lens table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.wh-lens th { padding: 8px 8px; text-align: left; border-bottom: 2px solid #E5E5E5; white-space: nowrap; font-size: 11px; color: var(--gray4); text-transform: uppercase; }
.wh-lens td { padding: 6px 8px; border-bottom: 1px solid #F0F0F0; vertical-align: top; }
/* correction 3: compact identity — the code never breaks, the name is the compact form, both stay in view
   while the evidence cells scroll; Trends is the LAST column (as in Records) */
#cohort-root th.wh-selc, #cohort-root td.wh-selc { width: 30px; min-width: 30px; max-width: 30px; padding-left: 10px; padding-right: 4px; position: sticky; left: 0; z-index: 3; background: #fff; }
#cohort-root th.wh-fz, #cohort-root td.wh-fz { position: sticky; background: #fff; z-index: 2; white-space: nowrap; }
#cohort-root .wh-fz1 { left: 0; width: 92px; min-width: 92px; max-width: 92px; }
#cohort-root .wh-fz2 { left: 92px; width: 150px; min-width: 150px; max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
#cohort-root th.wh-selc ~ .wh-fz1, #cohort-root td.wh-selc ~ .wh-fz1 { left: 30px; }
#cohort-root th.wh-selc ~ .wh-fz2, #cohort-root td.wh-selc ~ .wh-fz2 { left: 122px; }
#cohort-root th.wh-fz, #cohort-root th.wh-selc { z-index: 4; }
#cohort-root tr:hover td.wh-fz, #cohort-root tr:hover td.wh-selc { background: #F8F9FC; }
#cohort-root td.wh-orig { white-space: nowrap; }
#cohort-root th.wh-trh, #cohort-root td.wh-tr { white-space: nowrap; width: 64px; }
.wh-cell { display: inline-block; min-width: 112px; border: 1px solid var(--gray2); border-radius: 8px; padding: 3px 7px; font-size: 11.5px; line-height: 1.35; background: #fff; white-space: nowrap; }
.wh-cell b { font-family: 'Space Grotesk', sans-serif; }
.wh-cell .wh-cd { color: var(--navy); font-weight: 700; }
.wh-cell .wh-cs { color: var(--gray4); font-size: 10.5px; }
.wh-cell.pass { border-color: var(--green, #137333); } .wh-cell.fail { border-color: var(--red); } .wh-cell.pending { border-color: var(--amber); }
.wh-more { font-size: 10.5px; color: var(--gray4); white-space: nowrap; }
.wh-fixed { font-size: 10.5px; color: var(--gray4); margin: 2px 0 6px; }
.wh-tr .btn { min-height: 24px; padding: 2px 8px; font-size: 11.5px; }
@media (max-width: 767px) { #page-empdb .wh-lens table { font-size: 11px; } .wt-tiles { grid-template-columns: 1fr 1fr; } }

/* ── §182 checkpoint 2 · Action = workforce movement execution: cards as room selectors, the Mobilisation
   subviews, the pipeline ledger breadcrumb; no section numbers ── */
.mob-cards { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.mob-card { flex: 1; min-width: 200px; margin: 0; padding: 10px 12px; cursor: pointer; border: 2px solid transparent; }
.mob-card:hover { border-color: var(--gray2); }
.mob-card.on { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(31, 42, 68, .12); }
.mob-card-t { font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--navy); text-transform: uppercase; margin-bottom: 3px; }
.mob-card.on .mob-card-t::after { content: ' — selected'; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--gray4); }
.mob-subviews { padding: 0; margin: 10px 0 8px; gap: 6px; flex-wrap: wrap; }
.mob-h { font-size: 13.5px; }
.mob-fixed { margin: 2px 0 6px; }
.mob-door { cursor: pointer; }
.mob-door:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
@media (max-width: 767px) { .mob-card { min-width: 100%; } }

/* ── §182 FINAL · the Action command centre ── */
.mob-cmd { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }   /* one vertical centre line for every control in the command row */
.mob-cmd .mob-actions { margin: 0; padding: 0; position: static; background: transparent; flex: 0 0 auto; }   /* inside the command row the old pinned-bar wrapper (index.html: sticky, padding 8px 0) is neutralised — no wrapper-specific vertical positioning; the row itself centres every control */
.mob-find { position: relative; flex: 1 1 260px; min-width: 220px; }
.mob-find .fi { width: 100%; min-height: 38px; padding: 6px 12px; font-size: 13px; }
.mob-find-res { position: absolute; left: 0; right: 0; top: 100%; z-index: 40; background: #fff; border: 1px solid var(--gray2); border-radius: 10px; box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.mob-find-res:empty { display: none; }
.mob-find-row { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--gray1); padding: 7px 10px; font-size: 12.5px; cursor: pointer; }
.mob-find-row:hover, .mob-find-row:focus-visible { background: var(--gray1); }
.mob-find-card { padding: 10px 12px; font-size: 12.5px; }
.mob-find-h { display: flex; align-items: center; gap: 6px; font-size: 14px; margin-bottom: 6px; }
.mob-find-kv { display: flex; gap: 10px; padding: 2px 0; border-bottom: 1px solid var(--gray1); }
.mob-find-kv span { flex: 0 0 130px; color: var(--gray4); }
.mob-find-doors { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0 4px; }
.mob-cmd-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.mob-cmd-side .btn { min-height: 38px; padding: 7px 14px; font-size: var(--c-fs-ui); border-radius: 10px; }   /* the same control size as the neighbouring action buttons (.mob-actions .btn) — no offset patches */
.mob-cmd-side .btn.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.mob-fresh { font-size: 11.5px; display: inline-flex; align-items: center; gap: 6px; }
.mob-stale { color: var(--amber-t, #7A4A08); font-weight: 700; }
.mob-attn { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; padding: 6px 12px; border: 1px solid var(--gray2); border-radius: 10px; background: #fff; margin: 0 0 10px; }
.mob-attn-l { font-weight: 800; color: var(--navy); text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
.mob-attn-item { text-decoration: none; color: var(--red); font-weight: 600; }
.mob-attn-item b { font-size: 14px; }
.mob-card:focus-visible { outline: 3px dashed var(--amber); outline-offset: 3px; box-shadow: none; }
.mob-card.on:focus-visible { box-shadow: 0 0 0 2px rgba(31, 42, 68, .12); }
.mob-h-act { margin-left: auto; }
.mob-bt-tog { display: inline-flex; gap: 4px; margin-left: 10px; }
.mob-bt-tog .tb { font-size: 11px; padding: 2px 9px; min-height: 22px; }
.bt-card.bt-attn { border-left: 4px solid var(--red); }
.mob-total td { font-weight: 700; border-top: 2px solid var(--gray2); background: #FAFAFA; }
.dmb-tbl td, .dmb-tbl th { font-size: 12px; }
.dmb-over td { background: #FFF6F5; }
@media (max-width: 767px) { .mob-cmd { flex-direction: column; align-items: stretch; } .mob-find { flex-basis: auto; width: 100%; } .mob-cmd-side { margin-left: 0; } .mob-find-kv span { flex-basis: 110px; } }
/* §182 FINAL · Shift Change operating model */
.shc-cards { display: flex; gap: 8px; flex-wrap: wrap; }
.shc-card { flex: 1; min-width: 200px; background: #fff; border: 1px solid #E5E5E5; border-radius: 10px; padding: 10px 12px; }
.shc-card.r { border-color: var(--red); } .shc-card.a { border-color: var(--amber, #B06000); }
.shc-band { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-radius: 10px; padding: 10px 12px; margin-top: 8px; font-size: 12px; border: 2px solid var(--gray2); background: #fff; }
.shc-band.r { border-color: var(--red); background: #FCE8E6; } .shc-band.a { border-color: var(--amber, #B06000); background: #FEF7E0; }
.shc-band.g { border-color: var(--green, #137333); background: #E6F4EA; } .shc-band.b { border-color: #BBD6F0; background: #F0F7FF; }
.shc-grp { border: 1px solid var(--gray2); border-radius: 10px; margin-top: 6px; background: #fff; overflow: hidden; }
.shc-grp-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 10px; font-size: 12.5px; cursor: pointer; }
.shc-grp-h:focus-visible { outline: 3px dashed var(--amber); outline-offset: -3px; }
.shc-grp table td, .shc-grp table th { font-size: 12px; }
.shc-opts { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.shc-opt { text-align: left; background: #fff; border: 2px solid var(--gray2); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; }
.shc-opt b { font-size: 14px; color: var(--navy); } .shc-opt span { color: var(--gray4); }
.shc-opt:hover, .shc-opt:focus-visible { border-color: var(--navy); }
.shc-info { font-size: 12.5px; background: #F7F8FA; border: 1px solid var(--gray2); border-radius: 10px; padding: 10px 12px; line-height: 1.5; }
.ttc-grp { border: 1px solid var(--gray2); border-radius: 10px; padding: 8px 10px; margin: 6px 0; background: #fff; }
.ttc-grp-h { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: 12.5px; }
.shc-planbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--gray2); border-radius: 10px; background: #F7F8FA; }
.shc-planbar label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--gray4); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.shc-planbar label .fi { min-width: 170px; font-size: 13px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.shc-grp.bad { border-color: var(--red); }
.shc-hist-plan { font-size: 12.5px; padding: 4px 0; border-bottom: 1px solid var(--gray1); }
/* Shift Change planner — the operational workflow (change hours · change the shift setup · move workers) */
.shc-t { width: 118px; min-height: 30px; padding: 3px 6px; font-size: 12px; display: inline-block; }   /* wide enough for a 12-hour clock's AM/PM — a half-read time is a wrong time */
.shc-hours td { vertical-align: middle; font-size: 12px; }
.shc-hours tr.shc-on td { background: #F3FAF5; }
.shc-hours tr.shc-edit td { padding-top: 0; border-top: 0; }
.shc-edit-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 12px; padding: 2px 0 6px; }
.shc-edit-row label { display: inline-flex; gap: 4px; align-items: center; }
.shc-edit-h { margin-left: auto; }
.shc-ret td { color: var(--gray4); text-decoration: line-through; }
.shc-ret td:last-child { text-decoration: none; }
.shc-add { border: 1px solid #CFE3D6; background: #F8FCF9; border-radius: 10px; padding: 8px 10px; margin-top: 6px; font-size: 12px; }
.shc-ba { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; margin-top: 8px; }
.shc-ba > div { min-width: 0; }   /* a grid child must be allowed to shrink, or its table overruns its neighbour */
.shc-ba-t { overflow-x: auto; }
.shc-ba table { width: 100%; min-width: 0; table-layout: fixed; }   /* the shared table's 880px floor does not apply to a two-up summary; fixed widths keep the worker count in view */
.shc-ba td, .shc-ba th { white-space: normal; }
.shc-ba td, .shc-ba th { font-size: 12px; vertical-align: top; }
.shc-ba th:nth-child(2), .shc-ba td:nth-child(2) { width: 46%; }
.shc-ba th:last-child, .shc-ba td:last-child { width: 68px; text-align: right; }
.shc-men { max-height: 260px; overflow: auto; border: 1px solid var(--gray2); border-radius: 10px; padding: 6px 10px; background: #fff; }
.shc-chip { display: inline-flex; gap: 4px; align-items: center; border: 1px solid var(--gray2); border-radius: 12px; padding: 1px 8px; font-size: 11px; background: #fff; margin: 2px 0; }
.shc-chip a { color: var(--red); text-decoration: none; }
.shc-planbar span b { font-size: 11px; color: var(--gray4); text-transform: uppercase; letter-spacing: .3px; }
.shc-opt .t-meta { font-size: 11.5px; }
.shc-narrow { width: 100%; min-width: 0; table-layout: fixed; }
.shc-narrow td, .shc-narrow th { font-size: 12px; white-space: normal; vertical-align: top; }
.shc-narrow th:last-child, .shc-narrow td:last-child { text-align: right; }
.shc-nav { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.shc-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 8px 0 6px; }
.shc-filters .fs { width: auto; max-width: 210px; }
.shc-fchip { display: inline-flex; align-items: center; gap: 4px; background: var(--navy); color: #fff; border-radius: 14px; padding: 2px 8px; font-size: 11px; font-weight: 700; }
.shc-fchip a { color: #fff; text-decoration: none; }
.shc-man { display: flex; gap: 8px; align-items: center; padding: 2px 0; font-size: 12px; cursor: pointer; }
.shc-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.shc-two > div { min-width: 0; }
.shc-colh { font-size: 10px; color: var(--gray4); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.shc-srcbox { border: 1px solid #E5E5E5; border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #fff; }
.shc-srcbox.r { border-color: var(--red); }
.shc-tgtbox { border: 2px solid #CFE3D6; border-radius: 10px; padding: 10px; margin-bottom: 8px; background: #F8FCF9; }
.shc-tgtbox.on { border-color: var(--green, #137333); }
.shc-srchead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 4px; }
.shc-add-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.shc-add-row label { display: inline-flex; gap: 4px; align-items: center; font-size: 11px; color: var(--gray4); font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
.shc-add-row label .fi { font-size: 12px; text-transform: none; letter-spacing: 0; font-weight: 400; min-height: 30px; }
.shc-rr { display: inline-flex; gap: 4px; align-items: center; margin-right: 10px; }
.shc-ackl { display: flex; gap: 8px; align-items: center; font-size: 12px; margin-top: 4px; }

/* ═══ R3F · ACCOUNTS OVERVIEW — the executive cockpit ═════════════════════
   The band is the container: a tinted section, hairline dividers and numeral
   size carry the structure, and nothing is a bordered card. The existing
   language otherwise: navy accent, Inter / Space Grotesk, inline SVG, no
   dashboard library. Factual +/- and ▲/▼ colour only, never celebratory. */
.acc-tabs{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.acc-top{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.acc-asof{font-size:11px;color:var(--gray4)}
.acc-period-lbl{font-size:11.5px;color:var(--gray4);margin-left:8px}
.acc-period{margin-left:auto;display:flex;gap:4px}
.acc-pb{font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--gray2);background:#fff;color:var(--gray4);cursor:pointer}
.acc-pb.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* the three bands */
.acc-band{border-radius:12px;padding:8px 14px 12px;margin-bottom:10px}
.acc-bA{background:#fff;box-shadow:0 1px 0 rgba(15,39,68,.06)}
.acc-bB{background:#fbfcfe}
.acc-bC{background:#eef1f5}
.acc-sec{display:flex;align-items:baseline;gap:9px;margin:4px 0 8px;flex-wrap:wrap}
.acc-sn{width:19px;height:19px;border-radius:5px;background:var(--navy);color:#fff;font-size:10.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;position:relative;top:3px}
.acc-st{font-size:14px;font-weight:800;color:var(--navy)}
.acc-ss{font-size:11px;color:var(--gray4);line-height:1.4}
.acc-bC .acc-sn{background:#5a6b80}
.acc-bC .acc-st{color:#3b4a5e}

/* the grids: figures beside their one visual */
.acc-row1{display:grid;grid-template-columns:minmax(300px,1.05fr) minmax(230px,.85fr) minmax(380px,1.75fr);gap:0 18px;align-items:stretch}
.acc-col2{display:flex;flex-direction:column;min-width:0}
.acc-col2 .acc-kpi+.acc-kpi{border-top:1px solid var(--gray2)}
.acc-row2{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(190px,.8fr) minmax(190px,.8fr) minmax(360px,1.6fr);gap:0 18px;align-items:stretch}
.acc-row2-nov{grid-template-columns:minmax(190px,.8fr) minmax(280px,2fr)}
.acc-rowC{grid-template-columns:repeat(2,minmax(240px,1fr));max-width:820px}
.acc-row1>.acc-kpi+*,.acc-row1>.acc-col2+*,.acc-row2>.acc-kpi+.acc-kpi,.acc-row2>.acc-kpi+.acc-vsw,.acc-rowC>.acc-kpi+.acc-kpi{border-left:1px solid var(--gray2);padding-left:18px}

/* the figure: hierarchy by numeral size, never by box */
.acc-kpi{min-width:0;display:flex;flex-direction:column;padding:6px 0 4px;position:relative}
.acc-kpi.acc-locked{color:var(--gray4)}
.acc-kpi.acc-span{grid-column:2 / -1}
.acc-kt{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--gray4);display:flex;align-items:center;gap:5px;flex-wrap:wrap;line-height:1.5}
.acc-kv{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--navy);margin-top:2px;line-height:1.08;overflow-wrap:anywhere;letter-spacing:-.01em}
.acc-z-xl .acc-kv{font-size:38px}
.acc-z-lg .acc-kv{font-size:30px}
.acc-z-md .acc-kv{font-size:26px}
.acc-z-sm .acc-kv{font-size:22px}
.acc-quiet .acc-kt{color:var(--gray4)}
.acc-quiet .acc-kv{color:#2f3f55}
.acc-kd{font-size:12px;font-weight:700;margin-top:3px;overflow-wrap:anywhere}
.acc-z-xl .acc-kd{font-size:13px}
.acc-kdn{font-weight:500;color:var(--gray4);font-size:11px}
.acc-ks{font-size:11px;color:var(--gray4);margin-top:3px;line-height:1.45}
.acc-up,.acc-down{color:var(--navy)}
.acc-flat{color:var(--gray4)}
.acc-wait{font-size:13px;font-weight:500;color:var(--gray4);font-family:Inter,sans-serif}
.acc-unit{font-size:12px;font-weight:600;color:var(--gray4);font-family:Inter,sans-serif;letter-spacing:0}
.acc-chip{font-size:10px;font-weight:800;letter-spacing:.02em;background:#eef2f7;color:var(--navy);border-radius:999px;padding:2px 7px;text-transform:none;white-space:nowrap}
.acc-chip-warn{background:#fff6e0;color:#8a5a00}
.acc-chip-est{background:#eef2f7;color:var(--gray4)}
.acc-wmini{font-size:10.5px;font-weight:700;color:#8a5a00;margin-top:5px;line-height:1.35}
.acc-more{margin-top:6px;padding:3px 0;min-height:22px;line-height:16px;align-self:flex-start;background:none;border:0;border-radius:4px;color:var(--navy);
  font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px;font-family:Inter,sans-serif}
.acc-more:hover{color:#0d223d;text-decoration-thickness:2px}
.acc-more:focus-visible,.acc-sw2:focus-visible,.acc-door:focus-visible,.acc-i:focus-visible,.acc-pb:focus-visible,.acc-disc:focus-visible,.acc-mx:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.acc-mspark+.acc-more,.acc-tspark+.acc-more{margin-top:6px}
/* the figure's own small chart and composition */
.acc-tspark{margin-top:6px}
.acc-tsl{font-size:10px;color:var(--gray4);margin-top:1px}
.acc-spark{display:block;width:100%;height:44px;overflow:visible}
.acc-spark-empty{height:44px}
.acc-sp-bar{fill:#1F3A5F;opacity:.85}
.acc-sp-bar.part,.acc-sp-bar.est{opacity:.38}
.acc-sp-bar.unp{fill:#c98a1f}
.acc-sp-bar.on{fill:#0d223d;opacity:1}
.acc-sp-line{fill:none;stroke:#5a7d9a;stroke-width:1.6;vector-effect:non-scaling-stroke}
.acc-sp-dot{fill:#5a7d9a;cursor:pointer}
.acc-sp-dot.unp{fill:#c98a1f}
.acc-sp-dot.on{fill:#0d223d;r:3.4}
.acc-split{margin-top:7px}
.acc-sb{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--gray2)}
.acc-sd{background:#1F3A5F;display:block}
.acc-ss2{background:#7f9bb8;display:block}
.acc-sl{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 6px;font-size:10.5px;color:var(--gray4);margin-top:3px;font-weight:600}
.acc-sl span{white-space:nowrap}
.acc-slm{flex-basis:100%;text-align:center;font-weight:500;color:var(--gray4);font-size:10px}

/* the info door replaces the paragraph */
.acc-i{width:14px;height:14px;line-height:12px;border-radius:50%;border:1px solid var(--gray2);background:#fff;color:var(--gray4);font-size:9px;font-weight:800;cursor:pointer;padding:0;font-family:Inter,sans-serif}
.acc-i:hover{border-color:var(--navy);color:var(--navy)}
.acc-helpbox{font-size:11px;color:var(--gray4);line-height:1.5;background:#f7f9fb;border:1px solid var(--gray2);border-radius:7px;padding:7px 9px;margin:4px 0 6px;flex-basis:100%;text-transform:none;font-weight:400;letter-spacing:0}

/* the visual area: a title row and its chart, no box of its own */
.acc-p{min-width:0;padding:6px 0 2px;display:flex;flex-direction:column}
.acc-ph{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-bottom:4px}
.acc-pt{font-size:11.5px;font-weight:800;color:var(--navy);letter-spacing:.02em;text-transform:uppercase}
.acc-pr{margin-left:auto;font-size:11px;font-weight:700;color:var(--gray4);display:flex;align-items:center;gap:5px}
.acc-sw2{margin-left:4px;font-size:10.5px;font-weight:700;padding:2px 9px;border-radius:999px;border:1px solid var(--gray2);background:#fff;color:var(--gray4);cursor:pointer;font-family:Inter,sans-serif}
.acc-sw2:hover{border-color:var(--navy);color:var(--navy)}
.acc-note{font-size:10.5px;color:var(--gray4);margin-top:4px;line-height:1.4}
.acc-cw{overflow-x:auto;overflow-y:hidden;max-width:100%}
.acc-row1>.acc-p.acc-p-table,.acc-row2>.acc-vsw.acc-p-table{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--gray2);margin-top:6px;padding-top:6px}
.acc-chart{display:block;width:100%;min-width:300px;height:auto}
.acc-axis{margin-top:1px}
.acc-stripsvg{margin-top:4px;border-top:1px dashed var(--gray2)}
.acc-grid{stroke:#e6e9ef;stroke-width:1;vector-effect:non-scaling-stroke}
.acc-gl{font-size:11.5px;fill:var(--gray4)}
.acc-col{fill:#1F3A5F;cursor:pointer}
.acc-col.part,.acc-col.est{opacity:.4}
.acc-col.unp{fill:#c98a1f}
.acc-col.miss{fill:var(--gray2);opacity:.6;cursor:default}
.acc-col.on{fill:#0d223d;opacity:1}
.acc-col:hover{fill:#0d223d}
.acc-col.acc-s-rev{fill:#1F3A5F}
.acc-col.acc-s-pay{fill:#b8622a}
.acc-col.acc-s-pay:hover,.acc-col.acc-s-pay.on{fill:#8e4a1e}
.acc-col.acc-c-navy{fill:#1F3A5F}
.acc-col.acc-c-rust{fill:#b8622a}
.acc-col.acc-c-blue{fill:#7f9bb8}
.acc-zero{stroke:var(--navy);stroke-width:2;vector-effect:non-scaling-stroke}
.acc-zl{font-size:10.5px;fill:var(--navy);font-weight:700}
.acc-ln{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke}
.acc-ln.acc-s-ratio{stroke:#5a7d9a}
.acc-pt.acc-s-ratio{fill:#5a7d9a}
.acc-pt.acc-s-ratio.unp{fill:#c98a1f}
circle.acc-pt{cursor:pointer}
circle.acc-pt.on{r:4.6}
.acc-x{font-size:11.5px;fill:var(--gray4)}
.acc-x.on{fill:var(--navy);font-weight:700}
.acc-xt{font-size:9.5px;fill:#1F3A5F;font-weight:700}
.acc-xw{font-size:11.5px;fill:#c98a1f;font-weight:700}
.acc-gap circle{fill:#fff;stroke:#b9c4d0;stroke-width:1.3}
.acc-gapm{font-size:11px;fill:var(--gray4);font-weight:700}
.acc-empty{font-size:11px;color:var(--gray4);padding:22px 0;text-align:center}
/* the static legend */
.acc-leg{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.acc-lg{font-size:10.5px;font-weight:700;color:var(--gray4);display:flex;align-items:center;gap:4px}
.acc-sw{width:9px;height:9px;border-radius:2px;display:inline-block;background:#1F3A5F}
.acc-lg.acc-s-rev .acc-sw{background:#1F3A5F}
.acc-lg.acc-s-pay .acc-sw{background:#b8622a}
/* the phone's caption line: the tooltip's text, printed under the visual */
.acc-cap{display:none;font-size:10.5px;color:var(--gray4);line-height:1.45;white-space:pre-line;min-height:3.2em;margin-top:4px;border-top:1px solid var(--gray2);padding-top:4px}
.acc-cap.show{display:block}
@media(hover:none){.acc-cap{display:block}}
/* the phone disclosure for the comparison chart */
.acc-disc{display:none}

/* the shared hover tooltip */
.acc-tip{position:fixed;display:none;z-index:9999;max-width:340px;background:#12263f;color:#eef3f8;font-size:11.5px;line-height:1.55;
  padding:8px 10px;border-radius:7px;white-space:pre-line;pointer-events:none;box-shadow:0 6px 20px rgba(0,0,0,.28);font-family:Inter,sans-serif}

.acc-prog{background:#eef2f7;border-radius:8px;padding:6px 10px;margin-bottom:10px;font-size:11.5px;color:var(--navy);position:relative;overflow:hidden}
.acc-prog-bar{position:absolute;left:0;top:0;bottom:0;background:#dae4ef;transition:width .25s}
.acc-prog span{position:relative}
.acc-err{background:#fff3f3;border:1px solid #f0c0c0;color:#8a2020;border-radius:8px;padding:8px 11px;margin-bottom:10px;font-size:12px;line-height:1.5}
.acc-foot{font-size:10.5px;color:var(--gray4);line-height:1.5}

/* View more: where it sits · its history · the method */
.acc-ovl{position:fixed;inset:0;background:rgba(12,26,43,.45);z-index:9000}
.acc-modal{position:fixed;z-index:9001;top:50%;left:50%;transform:translate(-50%,-50%);width:min(720px,calc(100vw - 24px));
  max-height:min(88vh,760px);overflow:auto;background:#fff;border-radius:12px;box-shadow:0 18px 48px rgba(0,0,0,.3)}
.acc-mh2{display:flex;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid var(--gray2);
  font-size:14px;font-weight:800;color:var(--navy);position:sticky;top:0;background:#fff;border-radius:12px 12px 0 0;z-index:1}
.acc-mx{margin-left:auto;background:none;border:0;font-size:15px;color:var(--gray4);cursor:pointer;line-height:1;padding:2px 4px}
.acc-mb{padding:12px 16px 16px}
.acc-mdh{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--navy);margin:2px 0 6px;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.acc-mdw{font-weight:600;color:var(--gray4);text-transform:none;letter-spacing:0}
.acc-mnote{font-size:10.5px;color:var(--gray4);line-height:1.45;margin:4px 0 10px}
.acc-mspark{margin:4px 0 10px}
.acc-mspark .acc-spark{height:52px}
.acc-mspl{font-size:10px;color:var(--gray4);text-align:right;margin-top:2px}
.acc-ms{margin-bottom:11px}
.acc-msh{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--gray4);margin-bottom:4px}
.acc-bl{margin:0 0 6px;padding-left:16px}
.acc-bl li{font-size:12px;color:var(--navy);line-height:1.55;margin-bottom:2px}
.acc-mcav{font-size:11.5px;line-height:1.5;color:#8a5a00;background:#fff6e0;border:1px solid #f0d79a;border-radius:7px;padding:8px 10px}
.acc-mb .acc-cw{margin-bottom:2px}
.acc-mb .acc-t th{white-space:normal;line-height:1.25;vertical-align:bottom}
/* ranked bars: where does it sit */
.acc-rank{display:flex;flex-direction:column;gap:5px;margin:2px 0 6px}
.acc-rk{display:grid;grid-template-columns:minmax(90px,150px) 1fr minmax(96px,auto);gap:8px;align-items:center;font-size:11.5px}
.acc-rkl{font-family:'Space Grotesk',sans-serif;font-weight:700;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.acc-rkw{color:#c98a1f}
.acc-rkb{display:block;height:10px;background:var(--gray1);border-radius:3px;overflow:hidden}
.acc-rkf{display:block;height:100%;background:#1F3A5F;border-radius:3px}
.acc-rkf.op{background:#5a7d9a}
.acc-rkv{text-align:right;color:var(--navy);font-weight:700;white-space:nowrap}
.acc-rks{display:block;font-size:10px;color:var(--gray4);font-weight:500}
.acc-rk.nobar .acc-rkv{color:#8a5a00;font-weight:700;font-size:10.5px}
.acc-door{background:none;border:0;padding:0;margin:0 0 8px;color:var(--navy);font-size:11px;font-weight:700;cursor:pointer;text-decoration:underline;text-underline-offset:2px;font-family:Inter,sans-serif}
/* the split pair — two figures, never one bar */
.acc-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:2px 0 10px}
.acc-pr1{border-left:3px solid var(--gray2);padding:2px 0 2px 9px;display:flex;flex-direction:column;gap:1px}
.acc-pr1 b{font-family:'Space Grotesk',sans-serif;font-size:16px;color:var(--navy)}
.acc-prl{font-size:10.5px;font-weight:700;color:var(--gray4);text-transform:uppercase;letter-spacing:.02em}
.acc-prs{font-size:10.5px;color:var(--gray4)}
/* one composition bar for parts of one whole */
.acc-comp{margin:2px 0 8px}
.acc-cb{display:flex;height:12px;border-radius:4px;overflow:hidden;background:var(--gray2)}
.acc-cs{display:block;height:100%}
.acc-cl{display:flex;gap:10px;flex-wrap:wrap;margin-top:5px;font-size:10.5px;color:var(--gray4)}
.acc-ci{display:inline-flex;align-items:center;gap:4px}
.acc-ci b{color:var(--navy)}
.acc-cim{font-style:italic}
.acc-c-navy{background:#1F3A5F}
.acc-c-amber{background:#c98a1f}
.acc-c-rust{background:#b8622a}
.acc-c-blue{background:#7f9bb8}
.acc-c-gray{background:#b9c4d0}
.acc-c-gray2{background:#d3dae3}
.acc-c-gray3{background:#e6ebf1}
/* the exact table */
.acc-tw{overflow-x:auto;max-width:100%;margin:2px 0 8px}
.acc-t{width:100%;border-collapse:collapse;font-size:11.5px}
.acc-t th{text-align:left;font-size:9.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--gray4);padding:4px 7px;border-bottom:1px solid var(--gray2);white-space:normal;line-height:1.25;vertical-align:bottom}
.acc-t th.n,.acc-t td.n{text-align:right}
.acc-t td{padding:4px 7px;border-bottom:1px solid #f1f4f7;color:var(--navy);white-space:nowrap}
.acc-t tbody tr{cursor:pointer}
.acc-t tbody tr:hover{background:#f7f9fb}
.acc-t tbody tr.on{background:#eef2f7}
.acc-t tbody tr.on td{font-weight:700}
.acc-tn{font-size:10px;color:var(--gray4);margin-top:5px;line-height:1.4}
.acc-neg{color:#8a5a00;font-weight:700}

/* laptops narrower than the full grid: the visual takes the whole row */
@media(max-width:1330px){
  .acc-row1{grid-template-columns:minmax(260px,1fr) minmax(220px,1fr)}
  .acc-row1>.acc-p{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--gray2);margin-top:6px;padding-top:6px}
  .acc-row2{grid-template-columns:repeat(3,minmax(180px,1fr))}
  .acc-row2>.acc-vsw{grid-column:1 / -1;border-left:0;padding-left:0;border-top:1px solid var(--gray2);margin-top:6px;padding-top:6px}
  .acc-row2-nov{grid-template-columns:minmax(190px,.8fr) minmax(280px,2fr)}
}
@media(max-width:900px){
  .acc-row1{grid-template-columns:1fr 1fr}
  .acc-row2{grid-template-columns:repeat(2,minmax(150px,1fr))}
  .acc-row2>.acc-kpi:nth-child(3){border-left:0;padding-left:0;border-top:1px solid var(--gray2);margin-top:4px;padding-top:6px}
}
/* the phone is not a shrunk desktop: figures first, one visual, the rest behind doors */
@media(max-width:640px){
  .acc-band{padding:6px 10px 10px}
  .acc-row1,.acc-row2,.acc-rowC,.acc-row2-nov{grid-template-columns:1fr;gap:0}
  .acc-row1>*,.acc-row2>*,.acc-rowC>*{border-left:0!important;padding-left:0!important}
  .acc-row1>.acc-col2,.acc-row2>.acc-kpi+.acc-kpi,.acc-rowC>.acc-kpi+.acc-kpi,.acc-col2 .acc-kpi+.acc-kpi{border-top:1px solid var(--gray2)}
  .acc-row1>.acc-p,.acc-row2>.acc-vsw{border-top:1px solid var(--gray2);margin-top:4px;padding-top:6px}
  .acc-kpi.acc-span{grid-column:auto}
  .acc-z-xl .acc-kv{font-size:32px}
  .acc-z-lg .acc-kv{font-size:26px}
  .acc-z-md .acc-kv{font-size:22px}
  .acc-z-sm .acc-kv{font-size:20px}
  .acc-chart{min-width:0}
  .acc-disc{display:block;width:100%;text-align:left;background:none;border:0;padding:6px 0;font-size:11.5px;font-weight:700;color:var(--navy);cursor:pointer;font-family:Inter,sans-serif;line-height:1.45}
  .acc-vsw:not(.open) .acc-p{display:none}
  .acc-rk{grid-template-columns:minmax(52px,80px) 1fr minmax(84px,auto)}
  .acc-pair{grid-template-columns:1fr}
}

/* ═══ LANE C — design consolidation, sprint 2026-09-16 ═══════════════════════
   Presentation only. One block, appended; nothing above it changed except the
   rules marked "LANE C" inline. Sections: A the shared field shell (banked
   item 3) · B the page-neutral cockpit figure grammar (cx-*) · C the cockpit's
   two banked phone items · D scoped page corrections (Site Update, History,
   Timesheets, Workers Documents, Absence, Ledger).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── A · THE SHARED FIELD SHELL: a placeholder, a typed value or a chosen option
   is never cut mid-word — it ellipsises; a select never overruns its container;
   a two-column form row lets its fields shrink. Measured before the fix at 390:
   #dmb-reason, #nb-search, #sp-search clipped with text-overflow: clip. */
.fi, .fs, .fta, .sinp, .sbar input, .fld-input, .wd-ftxt, .wd-fsel, .abs-search { text-overflow: ellipsis; }
.fi::placeholder, .fta::placeholder, .sinp::placeholder, .sbar input::placeholder,
.fld-input::placeholder, .wd-ftxt::placeholder, .abs-search::placeholder { text-overflow: ellipsis; }
select.fs, select.sinp, select.fld-input, select.wd-fsel { max-width: 100%; overflow: hidden; white-space: nowrap; }
.frow > * { min-width: 0; }

/* ── B · THE COCKPIT FIGURE GRAMMAR, PAGE-NEUTRAL (cx-*): the metrics of the
   accepted Accounts cockpit (.acc-*, R3F) without the Accounts scoping. A band
   is the container (tint, hairline dividers, no card border); a figure is a
   caps title, a navy Space Grotesk numeral sized by hierarchy, one context
   line; method and meaning live behind an info door. Density comes from the
   allocation, never from smaller essential text. */
.cx-band { background: #fff; border-radius: 12px; padding: 8px 14px 12px; margin: 0 16px 10px; box-shadow: 0 1px 0 rgba(15,39,68,.06); }
.cx-band.cx-tint { background: #fbfcfe; }
@media (min-width: 768px) { .cx-band { margin: 0 24px 10px; } }
.cx-sec { display: flex; align-items: baseline; gap: 9px; margin: 4px 0 6px; flex-wrap: wrap; }
.cx-st { font-family: 'Space Grotesk', sans-serif; font-size: 14px; font-weight: 800; color: var(--navy); }
.cx-ss { font-size: 11px; color: var(--gray4); line-height: 1.4; }
.cx-grp { padding: 2px 0; }
.cx-grp + .cx-grp { border-top: 1px solid var(--gray2); margin-top: 6px; padding-top: 6px; }
.cx-gt { display: flex; align-items: center; gap: 6px; margin: 2px 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray4); }
.cx-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 18px; align-items: stretch; }
.cx-row > .cx-fig + .cx-fig { border-left: 1px solid var(--gray2); padding-left: 18px; }
.cx-fig { min-width: 0; display: flex; flex-direction: column; padding: 6px 0 4px; }
.cx-ft { font-size: 10.5px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; color: var(--gray4); line-height: 1.5; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.cx-fv { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--navy); margin-top: 2px; line-height: 1.08; letter-spacing: -.01em; overflow-wrap: anywhere; font-size: 26px; }
.cx-fv.xl { font-size: 38px; } .cx-fv.lg { font-size: 30px; } .cx-fv.sm { font-size: 22px; }
.cx-fv .cx-unit { font-size: 12px; font-weight: 600; color: var(--gray4); font-family: Inter, sans-serif; letter-spacing: 0; }
.cx-fv .cx-na { font-family: Inter, sans-serif; font-weight: 500; color: var(--gray4); font-size: 13px; }   /* a missing input is never rendered as 0 */
.cx-fs { font-size: 11px; color: var(--gray4); margin-top: 3px; line-height: 1.45; }
.cx-fd { font-size: 12px; font-weight: 700; color: var(--navy); margin-top: 3px; }
.cx-i { width: 14px; height: 14px; line-height: 12px; border-radius: 50%; border: 1px solid var(--gray2); background: #fff; color: var(--gray4); font-size: 9px; font-weight: 800; cursor: pointer; padding: 0; font-family: Inter, sans-serif; flex: 0 0 auto; }
.cx-i:hover, .cx-i:focus-visible { border-color: var(--navy); color: var(--navy); outline: none; }
.cx-i.on { background: var(--navy); border-color: var(--navy); color: #fff; }
.cx-help { font-size: 11px; color: var(--gray4); line-height: 1.5; background: #f7f9fb; border: 1px solid var(--gray2); border-radius: 7px; padding: 7px 9px; margin: 4px 0 6px; font-weight: 400; letter-spacing: 0; text-transform: none; }
.cx-door { background: none; border: 0; padding: 0; color: var(--navy); font-size: 11px; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; font-family: Inter, sans-serif; }
.cx-door:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cx-empty { font-size: 12px; color: var(--gray4); padding: 8px 0; line-height: 1.45; }
.cx-empty a, .cx-empty .cx-door { color: var(--navy); font-weight: 700; }
@media (max-width: 640px) {
  .cx-row { grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .cx-row > .cx-fig + .cx-fig { border-left: 0; padding-left: 0; }
  .cx-row > .cx-fig:nth-child(even) { border-left: 1px solid var(--gray2); padding-left: 12px; }
  .cx-fv { font-size: 22px; } .cx-fv.xl { font-size: 32px; } .cx-fv.lg { font-size: 26px; } .cx-fv.sm { font-size: 20px; }
}

/* ── C · THE COCKPIT'S TWO BANKED PHONE ITEMS ──
   (1) the caption reserves three lines and is CAPPED at six: a long tooltip
   scrolls inside the caption, so band B never moves past the cap and nothing
   is hidden; (2) a ranked row prints the full trade name as a quiet second
   line wherever hover does not exist (the desktop keeps the hover tooltip). */
.acc-cap { max-height: calc(1.45em * 6 + 10px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.acc-rkl { display: flex; flex-direction: column; min-width: 0; }
.acc-rkc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-rkfn { display: none; font-family: Inter, sans-serif; font-weight: 500; font-size: 10px; color: var(--gray4); line-height: 1.25; white-space: normal; }
@media (hover: none) { .acc-rkfn { display: block; } }
.acc-rk.acc-tap { cursor: pointer; }

/* ── D · SCOPED PAGE CORRECTIONS (B1 inventory §5 — the Lane C list) ── */
/* 5.1 Dashboard: a rate is a figure, not a badge; an exclusion is said in words; the needs-you strip and the
   all-clear share one chip metric; the site-headcount bars are doors; two columns from the laptop width */
#page-dashboard .dash-rates-t .dr-q { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
#page-dashboard .dash-rates-t .dr-q2 { color: var(--gray5); font-weight: 600; }
#page-dashboard .dash-rates-t .dr-na { font-size: 11px; color: var(--gray4); }
#page-dashboard .dash-rates-t .dr-note { font-size: 10.5px; font-weight: 700; color: var(--amber-t); margin-left: 6px; white-space: nowrap; }
#page-dashboard .dash-need { min-height: 30px; padding: 4px 12px; font-size: 12.5px; border-width: 1.5px; border-radius: 8px; }
#page-dashboard .dash-clear { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 12px; font-size: 12.5px; border-radius: 8px; }
#page-dashboard .dash-bar-door { cursor: pointer; border-radius: 6px; }
#page-dashboard .dash-bar-door:hover, #page-dashboard .dash-bar-door:focus-visible { background: var(--cherry-bg); outline: none; }
#page-dashboard .dash-bar-fill { background: var(--navy); }
#page-dashboard .cx-empty { padding: 4px 0 2px; }
#page-dashboard .cx-fs { margin-top: 6px; }
/* 5.2 Site Update: the six accordion headers take one quiet band (the inline category colours are neutralised);
   one compact empty-state grammar; the notes on a class */
#page-update .su-hdr { background: var(--gray1) !important; border: 1px solid var(--gray2); border-bottom: 0; padding: 8px 14px; }
#page-update .su-hdr .sec-title { color: var(--navy); }
#page-update .su-hdr .sec-count { color: var(--gray4); font-family: 'Space Grotesk', sans-serif; }
#page-update .su-hdr .sec-count::after { content: ' ▾'; color: var(--gray3); font-size: 11px; }
#page-update .su-body .empty { padding: 10px 14px; text-align: left; font-size: 12.5px; }
#page-update .su-note { font-size: 11px; color: var(--gray4); margin: 0 0 6px; line-height: 1.4; }
#page-update .su-note:first-child { padding-top: 4px; }
/* 5.3 Attendance v2 (office): the sync line loses its card chrome; filters and the date strip share one tools card */
#att-v2-outbox-indicator-host.card { box-shadow: none; border-radius: 0; padding: 4px 14px; margin-bottom: 4px; }
#page-attendance-v2 .att-v2-tools { padding: 10px 14px; }
/* 5.4 Clients: the view switch is a rule, not a cssText re-write (the markup's inline metric is kept in step) */
#page-clients .cl-vbtn { font-size: 11px; padding: 4px 10px; min-height: 28px; }
/* 5.5 Absence Tracker: the page takes the app's gutters (it had none); the meta line replaces the duplicated title band;
   one tools row; the Compact B list */
#page-absence { padding-left: 16px; padding-right: 16px; }
@media (min-width: 768px) { #page-absence { padding-left: 24px; padding-right: 24px; } }
.abs-head { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin: 8px 0 8px; font-size: 13px; color: var(--gray4); }
.abs-head b { font-family: 'Space Grotesk', sans-serif; color: var(--navy); font-size: 15px; }
#page-absence .abs-explain { margin-bottom: 8px; }
.abs-tools { align-items: center; }
.abs-tools .abs-lbl { margin: 0; }
.abs-tools .abs-div { width: 1px; height: 22px; background: var(--gray2); margin: 0 4px; }
.abs-tools .abs-search { flex: 1 1 220px; max-width: none; min-height: 34px; font-size: 14px; padding: 6px 10px; }
.abs-tools .abs-legend { flex-basis: 100%; }
.abs-cclist { max-height: none; }
.abs-cclist .cc-row { cursor: pointer; }
.abs-cclist .cc-row:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
.abs-cclist .cc-row.abs-amber { border-left-color: var(--state-pend); background: #FFFCF6; }
.abs-cclist .cc-row.abs-red { border-left-color: var(--state-err); background: #FFF7F6; }
.abs-cclist .cc-row.abs-amber:hover, .abs-cclist .cc-row.abs-red:hover { background: var(--cherry-bg); }
.abs-cclist .abs-vd { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abs-cclist .abs-verdict { display: inline; font-size: 12px; margin: 0; overflow: hidden; text-overflow: ellipsis; }
.abs-cclist .abs-stage { margin-left: 0; flex: 0 0 auto; }
.abs-cclist .abs-cell { flex-direction: row; align-items: baseline; gap: 2px; min-width: 0; justify-content: flex-start; }
.abs-cclist .abs-fig { font-size: 13px; line-height: 1.2; }
.abs-cclist .abs-used { border-left: 0; padding-left: 0; }
.abs-cclist .abs-pres { font-size: 12px; color: var(--gray4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.abs-cclist .abs-money { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 1023px) {
  .abs-cclist .cc-row { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "no nm tr" "vd vd vd" "c30 c90 used" "pres pres money"; }
  .abs-cclist .abs-vd { grid-area: vd; white-space: normal; flex-wrap: wrap; }
  .abs-cclist .abs-c30 { grid-area: c30; } .abs-cclist .abs-c90 { grid-area: c90; } .abs-cclist .abs-used { grid-area: used; }
  .abs-cclist .abs-pres { grid-area: pres; } .abs-cclist .abs-money { grid-area: money; text-align: right; }
  .abs-cclist .abs-cell::before { content: attr(data-l); font-size: 10px; color: var(--gray4); text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; }
}
/* 5.6 Workers Documents: the empty row of a wide table is readable without scrolling — the message starts at the visible left edge */
.wd-table td.wd-emptycell { text-align: left; }
.wd-table td.wd-emptycell .wd-emptymsg { display: inline-block; position: sticky; left: 16px; max-width: calc(100vw - 72px); white-space: normal; }
/* 5.8 Accounts › Ledger: the overview figures share the Overview's band grammar; the window bar wears its pills;
   the unpriced band speaks the cockpit's no-rate honesty */
#page-revenue .cx-band.rv-band { margin: 0 0 12px; }
#page-revenue .rv-bar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
#page-revenue .rv-sel { width: auto; flex: 0 0 auto; font-size: 12px; min-height: 26px; padding: 3px 8px; max-width: 100%; }
@media (max-width: 640px) {   /* the drill rows wrap on a phone: the name on its own line, the figures share the next — nothing overlaps */
  #page-revenue .rv-row, #page-revenue .rv-hdr { flex-wrap: wrap; gap: 4px 10px; }
  #page-revenue .rv-row > b, #page-revenue .rv-hdr > span:first-child { flex-basis: 100%; }
  #page-revenue .rv-row > span[style], #page-revenue .rv-hdr > span[style] { width: auto !important; flex: 0 1 auto; white-space: nowrap; }   /* the laptop's fixed column widths (inline) stand down */
}
#page-revenue .rv-custom { display: inline-flex; gap: 4px; align-items: center; font-size: 12px; flex-wrap: wrap; }
#page-revenue .rv-winlbl { margin-left: auto; font-size: 12.5px; font-family: 'Space Grotesk', sans-serif; color: var(--navy); }
#page-revenue .rv-upb { color: var(--red); }
#page-revenue .rv-ups { font-size: 12px; color: var(--gray4); }
/* 5.9 the unpriced window (mo-unpriced): its markup on classes */
.unp-lead { font-size: 12px; color: var(--gray4); margin-bottom: 8px; line-height: 1.45; }
.unp-proj { font-weight: 700; font-size: 13px; margin: 10px 0 2px; }
.unp-n { color: var(--gray4); font-weight: 400; }
.unp-row { display: flex; gap: 10px; align-items: center; padding: 6px 0; border-top: 1px solid var(--gray1); font-size: 13px; }
.unp-cat { flex: 1; min-width: 0; }
.unp-fat, .unp-no { color: var(--gray4); }
.unp-no { font-size: 11px; white-space: nowrap; }
/* ═══════════════════════════════════════════════════════════════════════════
   LANE E — §ADMIN: THE ADMINISTRATION HOME (file 270, 2026-09-16). One block,
   scoped to #page-admin. Compact B vocabulary (Space Grotesk caps captions,
   12px dense tables, sticky headers in bounded scroll boxes, amber = a filter
   is hiding rows, cherry = the primary action). No new dependency.
   ═══════════════════════════════════════════════════════════════════════════ */
#page-admin .adm-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin:0 16px 8px;padding:12px 14px;background:#fff;border-radius:var(--r);box-shadow:var(--sh)}
#page-admin .adm-title{font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:700;color:var(--navy)}
#page-admin .adm-meta{font-size:12px;color:var(--ink-2);margin-top:2px;max-width:760px;line-height:1.4}
#page-admin .adm-head-r{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
#page-admin .adm-chip{display:inline-block;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;padding:3px 8px;border-radius:999px;border:1px solid var(--gray2);background:var(--gray1);color:var(--gray5)}
#page-admin .adm-chip.ok{background:var(--green-bg);color:var(--green-t);border-color:var(--green)}
#page-admin .adm-chip.bad{background:var(--red-bg);color:var(--red-t);border-color:var(--red)}
#page-admin .adm-chip.warn{background:var(--amber-bg);color:var(--amber-t);border-color:var(--amber)}
#page-admin .adm-switch{padding:0 16px 8px}
#page-admin .adm-card{padding:12px 14px;margin:0 16px 10px}
#page-admin .adm-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap}
#page-admin .adm-h2{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;color:var(--navy)}
#page-admin .adm-sec{display:flex;justify-content:space-between;align-items:center;gap:8px;font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray4);margin:0 0 6px}
#page-admin .adm-note{font-size:11.5px;color:var(--ink-2);line-height:1.45;margin-top:4px}
#page-admin .adm-note code,#page-admin .adm-kv code{font-family:'Space Grotesk',monospace;font-size:11px;background:var(--gray1);padding:0 4px;border-radius:4px}
#page-admin .adm-ctl{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#page-admin .adm-lbl{font-size:11px;font-weight:700;color:var(--gray4);text-transform:uppercase;letter-spacing:.4px}
#page-admin .adm-date{width:auto;padding:5px 8px;font-size:12px;min-height:30px}
#page-admin .adm-search{width:auto;min-width:200px;padding:5px 8px;font-size:12px;min-height:30px}
#page-admin .adm-scroll{overflow:auto;max-height:calc(100vh - 260px);border:1px solid var(--gray2);border-radius:8px;margin-top:6px}
#page-admin .adm-scroll-tall{max-height:calc(100vh - 300px)}
#page-admin .adm-tbl{border-collapse:separate;border-spacing:0;font-size:12px;min-width:100%;white-space:nowrap}
#page-admin .adm-tbl th{position:sticky;top:0;z-index:2;background:var(--gray1);font-family:'Space Grotesk',sans-serif;font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gray4);text-align:left;padding:6px 8px;border-bottom:1px solid var(--gray2)}
#page-admin .adm-tbl td{padding:5px 8px;border-bottom:1px solid var(--gray1);vertical-align:top}
#page-admin .adm-tbl tr:hover td{background:var(--cherry-bg)}
#page-admin .adm-tbl td.num{font-family:'Space Grotesk',sans-serif;font-variant-numeric:tabular-nums}
#page-admin .adm-tbl tr.adm-inactive td{opacity:.55}
#page-admin .adm-lab{font-weight:600;color:var(--text)}
#page-admin .adm-mono{font-family:'Space Grotesk',monospace;font-size:10.5px;color:var(--gray4)}
#page-admin .adm-miss{color:var(--gray4);font-style:italic}
#page-admin .adm-mirror{font-size:9.5px;font-weight:700;color:var(--amber-t);background:var(--amber-bg);border-radius:4px;padding:0 4px;vertical-align:middle}
#page-admin .adm-bad{color:var(--red-t);font-weight:700}
#page-admin .adm-notecell{max-width:260px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
#page-admin .adm-cmd{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#page-admin .adm-acts{display:flex;gap:6px;align-items:center}
#page-admin .adm-door{background:none;border:1px solid var(--gray2);border-radius:6px;padding:2px 8px;font-family:'Space Grotesk',sans-serif;font-size:11.5px;font-weight:700;color:var(--navy);cursor:pointer;white-space:nowrap}
#page-admin .adm-door:hover{border-color:var(--navy)}
#page-admin .adm-link{font-size:11.5px;font-weight:700;color:var(--navy)}
#page-admin .adm-more{margin-top:6px}
#page-admin .adm-kv{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:4px 12px;font-size:12px;align-items:baseline}
#page-admin .adm-kv>div{display:contents}
#page-admin .adm-kv>div>span{color:var(--gray4);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.3px}
#page-admin .adm-kv>div>b{font-weight:500;color:var(--text);min-width:0;overflow-wrap:anywhere}
#page-admin .adm-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin:0 6px 0 0;vertical-align:middle;background:var(--gray3)}
#page-admin .adm-dot.ok{background:var(--green)} #page-admin .adm-dot.warn{background:var(--amber)} #page-admin .adm-dot.bad{background:var(--red)}
#page-admin .adm-grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#page-admin .adm-grid2>.card{margin-right:0}
#page-admin .adm-grid2>.card:first-child{margin-left:16px;margin-right:0} #page-admin .adm-grid2>.card:last-child{margin-left:0;margin-right:16px}
#page-admin .adm-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
#page-admin .adm-src{border:1px solid var(--gray2);background:#fff;border-radius:999px;padding:3px 10px;font-size:11.5px;font-weight:600;color:var(--gray5);cursor:pointer;font-family:'Inter',sans-serif}
#page-admin .adm-src.on{background:var(--navy);color:#fff;border-color:var(--navy)}
#page-admin .adm-src.off{opacity:.55}
#page-admin .adm-src b{font-family:'Space Grotesk',sans-serif}
#page-admin .adm-when{white-space:nowrap;color:var(--gray4)}
#page-admin .adm-what{max-width:320px;white-space:normal;overflow-wrap:anywhere}
#page-admin .adm-chg{max-width:360px;white-space:normal;overflow-wrap:anywhere}
#page-admin .adm-tabcap{align-self:center;font-family:'Space Grotesk',sans-serif;font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--gray4);padding:0 2px 0 6px;white-space:nowrap}
#page-admin .adm-tabcap:first-child{padding-left:0}
/* permissions: key hygiene markers + read-only cells */
#page-admin .perm-hyg{display:inline-block;margin-left:3px;font-size:9.5px;font-weight:800;color:var(--amber-t);background:var(--amber-bg);border-radius:4px;padding:0 4px;vertical-align:middle;cursor:help}
#page-admin .perm-hyg.no{color:var(--red-t);background:var(--red-bg)}
#page-admin .perm-tg.ro{cursor:default;opacity:.85}
#page-admin .perm-fam{font-size:9.5px;font-weight:700;color:var(--gray4);margin-left:3px}
#page-admin .adm-roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}
#page-admin .adm-role{border:1px solid var(--gray2);border-radius:10px;padding:8px 10px;background:#fff}
#page-admin .adm-role .adm-lab{font-family:'Space Grotesk',sans-serif}
@media (max-width:1023px){
  #page-admin .adm-grid2{grid-template-columns:1fr}
  #page-admin .adm-grid2>.card:first-child,#page-admin .adm-grid2>.card:last-child{margin:0 16px 10px}
  #page-admin .adm-kv{grid-template-columns:1fr}
  #page-admin .adm-kv>div>span{margin-top:6px}
  #page-admin .adm-scroll{max-height:70vh}
  #page-admin .adm-notecell,#page-admin .adm-cmd{max-width:160px}
}
/* LANE H3 (integration, 2026-09-16): the closing brace above ends Lane E's phone block, which the integrated file left open —
   harmless while it was last in the file, but it swallowed every block appended after it (Lane D's, then Lane B2's),
   scoping their rules to ≤1023px; the Reports & Downloads child panels showed all at once at 1400px (b2-harness M4). */
/* ═══════════════════════════════════════════════════════════════════════════
   LANE D — R4A HR ACTIVITIES (2026-09-16). Requests · Vacation Plan ·
   Resignations · Training · HR History on the §A vocabulary (cc-* rows,
   count-doors, chips); the list rows re-flow as wrapping cards on phone.
   Scope: #hra-root and the three hra modals only. No new palette.
   ═══════════════════════════════════════════════════════════════════════ */
#hra-root { padding: 0 16px 24px; }
.hra-rooms { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 0 8px; }
.hra-rooms .tb { min-height: 30px; padding: 6px 13px; font-size: 12.5px; border-radius: 10px; }
.hra-sum { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; background: #fff; border: 1px solid var(--gray2); border-radius: 10px; padding: 8px 10px; margin-bottom: 10px; }
.hra-sum-g { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.hra-sum-r { margin-left: auto; gap: 8px; }
.hra-sum-h { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray4); margin-right: 2px; }
.hra-door { border: 1px solid var(--gray2); background: #fff; color: var(--navy); border-radius: 14px; padding: 3px 9px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: Inter, sans-serif; line-height: 1.3; }
.hra-door b { font-family: 'Space Grotesk', sans-serif; font-size: 13px; }
.hra-door.on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-t); }
.hra-door.r { border-color: var(--red); color: var(--red-t); background: var(--red-bg); }
.hra-door.a { border-color: var(--amber); color: var(--amber-t); background: var(--amber-bg); }
.hra-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; }
.hra-tools .hra-q { flex: 1 1 200px; min-width: 160px; min-height: 30px; padding: 4px 10px; font-size: 12.5px; border: 1.5px solid var(--gray2); border-radius: 8px; }
.hra-tools .t-meta2 { flex-basis: 100%; }
.hra-hz { margin-bottom: 0; padding: 4px 6px; }
.hra-ctx { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 11.5px; margin: 0 0 6px; }
.hra-count { margin: 0 0 4px; }
.hra-bulk { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; background: var(--amber-bg); border: 1px solid var(--amber); border-radius: 10px; padding: 6px 10px; margin: 0 0 8px; font-size: 12.5px; }
.hra-list .cc-list { max-height: 62vh; }
.hra-list .cc-row { min-height: 34px; }
.hra-nm { color: var(--text); text-decoration: none; }
.hra-nm:hover { color: var(--navy); text-decoration: underline; }
.hra-st .pill { font-size: 10.5px; padding: 2px 8px; }
.hra-dates, .hra-actual, .hra-client { white-space: normal; line-height: 1.3; font-size: 12px; }
.hra-type { white-space: normal; line-height: 1.25; }
.hra-tag { display: inline-block; font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 800; letter-spacing: .3px; padding: 1px 6px; border-radius: 6px; vertical-align: middle; white-space: nowrap; }
.hra-tag.r { background: var(--red-bg); color: var(--red-t); border: 1px solid var(--red); }
.hra-tag.a { background: var(--amber-bg); color: var(--amber-t); border: 1px solid var(--amber); }
.hra-tag.g { background: var(--green-bg); color: var(--green-t); border: 1px solid var(--green); }
.hra-tag.n { background: var(--gray1); color: var(--navy); border: 1px solid var(--gray3); }
.hra-ctl { flex-wrap: wrap; gap: 3px; }
.hra-ctl .btn { min-height: 24px; padding: 2px 8px; font-size: 11.5px; }
.hra-foot { margin-top: 8px; }
.hra-card { margin: 0 0 10px; padding: 12px; }
.hra-plan td, .hra-hist td { font-size: 12px; padding: 5px 8px; vertical-align: top; }
.hra-plan .hra-m { font-weight: 700; color: var(--navy); white-space: nowrap; }
.hra-plan tr.hra-over td { background: var(--red-bg); }
.hra-hist .hra-note { max-width: 260px; white-space: normal; }
.hra-modal { max-width: 720px; }
.hra-modal-s { max-width: 560px; }
.hra-modal-l { max-width: 980px; }
.hra-req { color: var(--red); }
.hra-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.hra-seg .tb { min-height: 30px; border-radius: 10px; }
.hra-foot-btns { display: flex; gap: 10px; margin-top: 8px; position: sticky; bottom: -40px; background: #fff; padding: 8px 0; }
.hra-foot-btns .btn { flex: 1; }
.hra-plan { border: 1px dashed var(--gray3); border-radius: 10px; padding: 8px 10px; font-size: 12px; margin: 6px 0; line-height: 1.45; }
.hra-plan-h { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--amber-t); background: var(--amber-bg); padding: 1px 6px; border-radius: 6px; margin-right: 4px; }
.hra-cap { border-radius: 8px; padding: 6px 10px; font-size: 12px; margin: 6px 0; }
.hra-cap.g { background: var(--green-bg); color: var(--green-t); } .hra-cap.a { background: var(--amber-bg); color: var(--amber-t); } .hra-cap.r { background: var(--red-bg); color: var(--red-t); font-weight: 600; }
.hra-prev { background: var(--gray1); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; line-height: 1.45; margin: 4px 0 10px; }
.hra-chk { display: flex; align-items: center; gap: 8px; font-size: 12.5px; margin: 4px 0 10px; cursor: pointer; }
.hra-refusal { margin: 6px 0; }
.hra-skip { font-size: 12px; margin-top: 4px; }
.hra-dcase { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; justify-content: space-between; background: var(--gray1); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 10px; }
.hra-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hra-dsec { border: 1px solid var(--gray2); border-radius: 10px; padding: 8px 10px; font-size: 12.5px; }
.hra-dsec-h { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray4); margin-bottom: 4px; }
.hra-kv { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 12px; }
.hra-kv .k { color: var(--gray4); white-space: nowrap; } .hra-kv .v { min-width: 0; }
.hra-drow { padding: 3px 0; border-bottom: 1px solid var(--gray1); font-size: 12px; line-height: 1.35; }
.hra-drow:last-child { border-bottom: 0; } .hra-drow.on { background: var(--amber-bg); border-radius: 6px; padding: 3px 6px; }
.hra-tl { padding: 4px 0; border-left: 2px solid var(--gray2); padding-left: 10px; font-size: 12px; }
.hra-tl-t { font-family: 'Space Grotesk', sans-serif; font-size: 11px; color: var(--gray4); margin-right: 8px; }
.hra-tl-n { color: var(--gray5); }
@media (max-width: 1023px) {
  #hra-root { padding: 0 10px 90px; }
  .hra-sum-r { margin-left: 0; flex-basis: 100%; }
  .hra-list .cc-list { max-height: none; }
  .hra-list .cc-row { display: flex; flex-wrap: wrap; gap: 3px 8px; align-items: center; padding: 8px 9px; }
  .hra-list .cc-row > span { min-width: 0; }
  .hra-list .cc-row .cc-nm { flex: 1 1 auto; }
  .hra-list .cc-row .hra-type, .hra-list .cc-row .hra-st, .hra-list .cc-row .hra-dates, .hra-list .cc-row .hra-actual, .hra-list .cc-row .hra-client { flex: 0 1 auto; }
  .hra-list .cc-row .hra-ctl { flex-basis: 100%; margin-top: 4px; }
  .hra-list .cc-row .hra-ctl .btn { min-height: 32px; padding: 4px 10px; font-size: 12px; }
  .hra-bulk { position: fixed; top: auto; left: 8px; right: 8px; bottom: calc(64px + env(safe-area-inset-bottom)); z-index: 90; box-shadow: 0 6px 20px rgba(15,39,68,.22); }
  .hra-dgrid { grid-template-columns: 1fr; }
  .hra-foot-btns { bottom: -40px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   LANE UX — ROUND 2 (sprint 2026-09-16). Owner rulings C · E · F · T, GATE 3
   (no fabricated zero) and the remaining PAGE_INVENTORY §5 design work.
   PRESENTATION ONLY: no rule, date, amount, permission, query or writer here.
   Sections: UX-E salary sheet · UX-F project context · UX-W19 shared worker
   list · UX-R Reports & Downloads children · UX-D Daily Task · UX-A2
   Attendance at full scale · UX-T17 Workers Documents · UX-CL Clients forms.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── UX-E · THE SALARY SHEET (W22) — ruling E ───────────────────────────────
   Was: the Absence page's abs-hrow / abs-recform grammar borrowed wholesale —
   three-column rows whose amounts never lined up, and recorders that were a
   flat wrap of unlabelled placeholders. Now: one aligned money column, section
   bands, and labelled field groups (the §A shared-field idea, adapted to a
   record sheet). Every amount, date default, RPC and guard is untouched. */
.sal-id { border-bottom: 1px solid var(--gray2); padding-bottom: 8px; margin-bottom: 4px; }
.sal-id .sal-nm { line-height: 1.2; margin-bottom: 0; }
.sal-id .sal-meta { font-size: 11.5px; color: var(--ink-2); margin-top: 3px; }
.sal-sec { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .8px; text-transform: uppercase; color: var(--gray4);
  margin: 14px 0 2px; padding-top: 8px; border-top: 1px solid var(--gray1); }
/* ONE grid for every component / deduction / leave row: label · amount · basis */
.sal-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px;
  align-items: baseline; padding: 6px 2px; border-top: 1px solid var(--gray1); }
.sal-row:first-child { border-top: 0; }
.sal-row > .sal-lbl { font-size: 12.5px; font-weight: 600; min-width: 0; }
.sal-row > .sal-amt { font-family: 'Space Grotesk', sans-serif; font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; color: var(--navy); }
.sal-row > .sal-amt.sal-na { font-weight: 600; color: var(--gray4); }
.sal-row > .sal-basis { grid-column: 1 / -1; font-size: 11px; color: var(--ink-2); line-height: 1.45; }
.sal-row.sal-hi { background: var(--state-pend-bg); border-radius: 8px; padding-left: 8px; padding-right: 8px; }
.sal-empty { font-size: 11.5px; color: var(--ink-2); padding: 6px 2px; }
/* the recorders: a labelled group per field, the act last, full width on a phone */
.sal-rec { margin-top: 10px; padding: 10px; border: 1px solid var(--gray2); border-radius: 10px; background: #fbfcfe; }
.sal-rec-h { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--gray4); margin-bottom: 6px; }
.sal-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 10px; align-items: end; }
.sal-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sal-f > label { font-size: 10.5px; font-weight: 700; color: var(--gray4); letter-spacing: .3px; }
.sal-f > .fld-input, .sal-f > .fs, .sal-f > input, .sal-f > select { width: 100%; min-width: 0; font-size: 12.5px; }
.sal-act { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.sal-act .btn { min-height: 34px; }
.sal-note { font-size: 11px; color: var(--ink-2); margin-top: 6px; line-height: 1.5; }
.sal-choose { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sal-choose .btn { min-height: 32px; }
.fld-sheet .sal-row { min-height: 28px; }
@media (max-width: 520px) {
  .sal-fields { grid-template-columns: 1fr; }
  .sal-act .btn { flex: 1 1 100%; }
}

/* ── UX-F · PROJECT-CONTEXT NAVIGATION — ruling F ───────────────────────────
   A quiet row of destinations on a project block. A link renders only where the
   role already holds that destination's key; the router's own guard is unchanged
   and still refuses loudly when a link is forced. */
.pcx { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 6px 0 2px; }
.pcx-l { font-family: 'Space Grotesk', sans-serif; font-size: 9.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--gray4); margin-right: 2px; }
.pcx-b { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; font-weight: 700;
  color: var(--navy); background: #fff; border: 1px solid var(--gray2); border-radius: 8px;
  padding: 3px 9px; min-height: 26px; display: inline-flex; align-items: center; cursor: pointer; }
.pcx-b:hover { background: #fbfcfe; border-color: var(--navy); }
.pcx-b:focus-visible { outline: 2px dashed var(--amber); outline-offset: 1px; }
/* the destination says what it was handed */
.pcx-band { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap;
  background: var(--state-pend-bg); border: 1px solid var(--state-pend-line); border-radius: 9px;
  padding: 6px 10px; margin-bottom: 10px; font-size: 12px; }
.pcx-band .pcx-x { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--navy);
  cursor: pointer; background: none; border: 0; }

/* ── UX-W19 · THE SHARED WORKER-LIST WINDOW, OFFICE VARIANT ─────────────────
   §D's reporting-list presentation on the TABLE mode of mo-marshlist. The field
   callers pass {variant:'field'} and keep the previous presentation exactly. */
#mo-marshlist .modal.ml-office { max-width: min(1180px, 94vw); }
.ml-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 10px 0 6px; }
.ml-tools .sinp { flex: 1 1 200px; min-width: 0; margin: 0; }
.ml-count { font-size: 11.5px; color: var(--ink-2); margin: 0 0 6px; }
.ml-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 6px; font-size: 11.5px; }
.ml-chips .ml-clear { font-size: 11.5px; font-weight: 700; color: var(--navy); background: none;
  border: 0; cursor: pointer; }
/* §A: amber means "something is hiding rows" — so an UNPICKED value is quiet, a picked one is amber */
.ml-chips .cc-chip { background: #fff; color: var(--navy); border-color: var(--gray2); font-weight: 700;
  cursor: pointer; font-size: 11.5px; min-height: 24px; }
.ml-chips .cc-chip.on { background: var(--amber-bg); color: var(--amber-t); border-color: var(--amber); }
.ml-empty { font-size: 12.5px; color: var(--gray4); padding: 12px 2px; line-height: 1.5; }
.ml-box { max-height: 60vh; overflow: auto; border: 1px solid var(--gray2); border-radius: 10px; }
.ml-tbl { border-collapse: separate; border-spacing: 0; font-size: 12px; min-width: 100%; }
.ml-tbl th { position: sticky; top: 0; z-index: 2; background: var(--gray1); text-align: left;
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--gray5); padding: 6px 10px; white-space: nowrap;
  border-bottom: 1px solid var(--gray2); }
.ml-tbl td { padding: 5px 10px; border-bottom: 1px solid var(--gray1); vertical-align: middle;
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-tbl tbody tr:hover td { background: #fbfcfe; }
.ml-tbl td:first-child { font-family: 'Space Grotesk', sans-serif; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 767px) {
  .ml-box { max-height: 58vh; }
  .ml-tbl td { max-width: 180px; }
}

/* ── UX-R · REPORTS & DOWNLOADS CHILDREN ───────────────────────────────────
   The three consoles share ONE tools row and the page-neutral cx-* figure
   grammar (LANE C §2) instead of three card-in-card vocabularies. GATE 3:
   .cx-na carries "not available", never a computed 0. */
.rp-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rp-bar .rp-lbl { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase; color: var(--gray4); }
.rp-bar .rp-range { margin-left: auto; font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.rp-per { display: inline-flex; flex-wrap: wrap; border: 1.5px solid var(--gray2); border-radius: 9px;
  overflow: hidden; background: #fff; }
.rp-per > button { border: 0; border-radius: 0; background: transparent;
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px;
  padding: 6px 13px; min-height: 30px; color: var(--gray5); cursor: pointer; }
.rp-per > button + button { border-left: 1.5px solid var(--gray2); }
.rp-per > button.on { background: var(--navy); color: #fff; }
.rp-per > button:focus-visible { outline: 2px dashed var(--amber); outline-offset: -2px; }
.rp-cust { display: none; align-items: center; gap: 6px; }
.rp-cust.on { display: flex; }
.rp-cust .fi { width: auto; min-width: 0; font-size: 12px; }
#page-metrics .cx-band, #page-timesheets .cx-band { margin-left: 0; margin-right: 0; }
/* GATE 3: the figure ITSELF can be the unavailable state, not only a span inside it */
.cx-fv.cx-na { font-family: Inter, sans-serif; font-weight: 600; color: var(--gray4); font-size: 15px; }
.rp-gap { border: 1px solid var(--state-pend-line); background: var(--state-pend-bg); border-radius: 10px;
  padding: 10px 12px; margin-bottom: 10px; font-size: 12.5px; line-height: 1.5; }
.rp-gap b { font-family: 'Space Grotesk', sans-serif; letter-spacing: .3px; }
.ts-doc { border: 1px solid var(--gray2); border-radius: 12px; padding: 14px; background: #fff; margin-bottom: 12px; }
.ts-doc .ts-title { margin-bottom: 2px; }
.ts-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ts-row .sinp { width: auto; max-width: 100%; min-width: 0; font-size: 12.5px; }
.ts-row .btn { min-height: 34px; }
@media (max-width: 520px) { .ts-row > * { flex: 1 1 100%; } .ts-row .sinp { max-width: none; } }

/* ── UX-D · DAILY TASK ─────────────────────────────────────────────────────
   Ruling T: the thick navy/red unread border on the cards is KEPT exactly as
   approved and is written by the page, not here. Everything around it moves
   off inline styles. */
.dl-wrap { padding: 12px 16px; max-width: 980px; margin: 0 auto; }
.dl-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px;
  position: sticky; top: 0; z-index: 10; background: var(--gray1); padding: 8px 0; }
.dl-bar .btn { min-height: 34px; padding: 7px 14px; }
.dl-bar .fi { max-width: 160px; }
.dl-bar .dl-d { font-size: 14px; font-weight: 700; margin-left: auto; }
.dl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; margin-top: 6px; }
.dl-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dl-h > b { font-size: 13px; }
.dl-n { font-family: 'Space Grotesk', sans-serif; font-size: 12.5px; font-weight: 700; color: var(--navy);
  font-variant-numeric: tabular-nums; }
.dl-mx { overflow-x: auto; margin-top: 6px; }
.dl-tbl { border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; min-width: 100%; }
.dl-tbl th { background: var(--gray1); text-align: center; font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--gray5);
  padding: 4px 8px; border-bottom: 1px solid var(--gray2); }
.dl-tbl th.dl-lh { text-align: left; }
.dl-tbl td { padding: 4px 8px; text-align: center; border-bottom: 1px solid var(--gray1); }
.dl-tbl td.dl-rl { text-align: left; font-weight: 700; background: #fff; }
.dl-tbl tr.dl-totr td { font-weight: 700; border-top: 1.5px solid var(--gray2); }
.dl-tbl td.dl-tot { font-weight: 700; }
.dl-tbl a { font-weight: 700; }
.dl-z { color: var(--gray3); }

/* ── UX-A2 · ATTENDANCE V2 AT FULL SCALE ───────────────────────────────────
   The settled part of docs/ui-standard/ux-attendance-interaction-model.md §2:
   the running summary stays visible (CLAUDE.md §2.8) and the docked bulk bar
   clears the bottom navigation so the last of 2,000 rows stays reachable.
   No mark, reason, tier, filter or writer changes. */
.att-v2-section .av2-head { position: sticky; top: 0; z-index: 4; background: #fff;
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: -14px -14px 8px; padding: 10px 14px 8px; border-bottom: 1px solid var(--gray2); }
.att-v2-section .av2-head .av2-t { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; }
.att-v2-section .av2-sum { font-size: 12px; color: var(--gray5); display: flex; align-items: center;
  gap: 10px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
/* S4 — the mark window takes the §A modal shell (sticky ✕ inside the title band, a meta line, the
   laptop width rule). Its BODY, openers and writers are untouched. */
#mo-att-v2-mark .modal.av2-mark { max-width: min(680px, 94vw); }
#mo-att-v2-mark .cc-meta:empty { display: none; }
#att-v2-bulk-action-bar { bottom: 0; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
body.av2-bulk-on #page-attendance-v2 { padding-bottom: 96px; }
@media (max-width: 767px) {
  #att-v2-bulk-action-bar { bottom: calc(var(--bottombar-h, 65px) + env(safe-area-inset-bottom)); }
  body.av2-bulk-on #page-attendance-v2 { padding-bottom: calc(var(--bottombar-h, 65px) + 96px); }
}

/* ── UX-T17 · WORKERS DOCUMENTS — the filter marker's TOKEN ────────────────
   B1 §5.6 items 1 and 5: keep the meaning, align the tokens. The header-filter
   row already says "this control is narrowing the view" — it said it in GOLD
   (index.html's inline .wd-f-on). §A reserves AMBER for exactly that meaning
   ("something is hiding rows") everywhere else in the app, and gold is the
   brand accent, not a state. Same control, same behaviour, same handler — the
   colour now matches every other filter in the product. Two classes deep so it
   wins over the inline rule without !important.
   The docBadge colour law (EXPIRED solid · ≤30d amber tint · valid quiet · missing
   dashed) is DELIBERATELY unchanged — it already rides the state tokens. */
.wd-fsel.wd-f-on, .wd-ftxt.wd-f-on, input.wd-f-on, select.wd-f-on {
  border-color: var(--amber); background: var(--amber-bg); color: var(--amber-t);
  box-shadow: 0 0 0 1px var(--amber) inset;
}

/* ── UX-SHEET · THE INSPECTION SHEET ON A LAPTOP (fieldSheet) ──────────────
   fieldSheet() is the shell behind the Absence per-worker sheet (B1 §5.5 item 3)
   and, since ruling E, the salary sheet. On a phone it is a bottom sheet and
   STAYS one — the field surfaces are R7 and this rule never reaches them. From
   1024px it becomes a centred dialog, because a 12-row ladder plus the review
   record plus the whole absence history does not read in a 560px strip. */
@media (min-width: 1024px) {
  .fld-sheet-wrap { align-items: center; }
  .fld-sheet { max-width: min(760px, 92vw); max-height: 88vh; border-radius: 16px; padding: 22px 24px; }
}

/* ── UX-CL · CLIENTS & PROJECTS ────────────────────────────────────────────
   W12 / W13 long forms take the §A shared-field grouping; the Compare view's
   chips stay a SELECTION control (amber would misstate them as a filter — see
   the deviations log) and take a neutral picked state. */
.clf { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px 12px; align-items: end; }
.clf-1 { grid-template-columns: 1fr; }
.clf-f { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.clf-f > label { font-size: 10.5px; font-weight: 700; color: var(--gray4); letter-spacing: .3px; }
.clf-f > input, .clf-f > select, .clf-f > .fi, .clf-f > .fs { width: 100%; min-width: 0; font-size: 12.5px; }
.clf-h { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px;
  text-transform: uppercase; color: var(--gray4); margin: 12px 0 4px; padding-top: 8px;
  border-top: 1px solid var(--gray1); }
.clf-help { font-size: 11px; color: var(--ink-2); margin-top: 4px; line-height: 1.5; }
/* the rate editor's rows on one grid so the numbers line up */
.rte-l { max-height: 50vh; overflow-y: auto; border: 1px solid var(--gray2); border-radius: 10px; }
.rte-r { display: grid; grid-template-columns: minmax(0, 2fr) 84px 108px; gap: 8px; align-items: center;
  padding: 5px 10px; border-bottom: 1px solid var(--gray1); }
.rte-r > .rte-n { font-size: 12px; min-width: 0; }
.rte-r > .rte-c { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; color: var(--gray5);
  font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rte-r > input { width: 100%; min-width: 0; padding: 6px 8px; border: 1.5px solid var(--gray2);
  border-radius: 6px; font-size: 12px; font-variant-numeric: tabular-nums; }
.rte-r.rte-hot { background: var(--state-pend-bg); border-left: 4px solid var(--amber); padding-left: 6px; }
.rte-hd { position: sticky; top: 0; z-index: 2; background: var(--gray1); font-family: 'Space Grotesk', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--gray5);
  border-bottom: 1px solid var(--gray2); }
/* the Compare picker is a <button> now (keyboard + aria-pressed); the navy picked state is kept
   deliberately — amber would misstate a selection control as a filter (see the deviations log) */
.cmp-chip { cursor: pointer; font-family: inherit; min-height: 28px; }
.cmp-chip:focus-visible { outline: 2px dashed var(--amber); outline-offset: 1px; }
@media (max-width: 520px) { .rte-r { grid-template-columns: minmax(0, 1fr) 70px 92px; } }

/* ═══ LANE B2 — page mergers (2026-09-16) ═══
   M3 Decisions (host = #page-flags, route `decisions`) and M4 Reports & Downloads (#page-reports): the child strip
   REUSES the Employee Records view-switch classes (§179 — edb-switch-row / edb-seg / edb-seg-b / edb-scope), whose
   rules are scoped to #page-empdb; the host pages carry .b2-host so the same presentation applies there. A host's
   children are .b2-child panels shown one at a time (.on); .dec-sect = the small caps caption inside a Decisions
   child; .tabs.b2-inner = the existing pill tabs when they sit inside a card. Nothing else is restyled. */
.b2-host .edb-switch-row { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 0 16px 8px; }
.b2-host .edb-seg { display: inline-flex; border: 1.5px solid var(--gray2); border-radius: 9px; overflow: hidden; background: #fff; }
.b2-host .edb-seg-b { border: 0; background: transparent; font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12.5px; padding: 6px 14px; color: var(--gray5); cursor: pointer; min-height: 30px; }
.b2-host .edb-seg-b + .edb-seg-b { border-left: 1.5px solid var(--gray2); }
.b2-host .edb-seg-b.on { background: var(--navy); color: #fff; }
.b2-host .edb-seg-b:focus-visible { outline: 2px dashed var(--amber); outline-offset: -2px; }
.b2-host .edb-scope { font-size: 12px; color: var(--ink-2); }
.b2-host .b2-child { display: none; }
.b2-host .b2-child.on { display: block; }
.b2-host .dec-sect { font-family: 'Space Grotesk', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--gray4); margin: 2px 0 6px; }
.b2-host .tabs.b2-inner { padding: 0 0 8px; }
@media (min-width: 768px) { .b2-host .edb-switch-row { padding-left: 24px; padding-right: 24px; } }


/* === LANE ACCESS / GOVERNANCE (file 290 - MP root authority) =================
   The Managing Partner is the root human authority: its permissions are explicit
   rows in the matrix, held by default and protected server-side. These cells are
   drawn as HELD AND PROTECTED, never as a switch that would do nothing.
   Appended as ONE delimited block at end of file; UX owns everything above.    */
.perm-root { cursor: help; opacity: 1; }
.perm-root-key { box-shadow: inset 0 0 0 2px var(--navy); font-weight: 700; }
.perm-root-row > td.rl { background: rgba(16, 42, 82, .05); }
.perm-root-row > td.rl b { color: var(--navy); }
/* === /LANE ACCESS / GOVERNANCE ============================================= */

/* === LANE 7 — T17 WORKERS DOCUMENTS RESTYLE (2026-09-17) =====================
   The promised visual consolidation of Workers Documents onto the accepted UI
   standard (docs/UI_STANDARD.md §A). PRESENTATION ONLY.

   Everything here is scoped to #page-documents (and #wd-fpanel, the one element
   the panel script places inside the page) so that the OTHER surfaces which
   share the .wd-* family — Action's #act-table, the shift-change and set-date
   modals, the Vault admin window — are byte-for-byte unaffected. No existing
   cc-* rule is modified; this block only ADDS, and only inside this page.

   Sections: 1 page gutters · 2 the tools row · 3 the chips · 4 the Compact B
   identity list (incl. the phone stack) · 5 the two matrices' §A tokens ·
   6 the boards and bands · 7 the docked bulk bar's §A voice.
   ========================================================================= */

/* 1 — the page takes the app's gutters (it had none: at 390 the list ran under
   both edges and "N of M shown" was cut off the right of the screen) */
#page-documents { padding-left: 16px; padding-right: 16px; padding-bottom: 24px; }
@media (min-width: 768px) { #page-documents { padding-left: 24px; padding-right: 24px; } }
#page-documents .cc-meta { margin: 6px 0 8px; }

/* 2 — ONE tools row: the search, the date question in words, the phone funnel
   buttons and the shown count. Replaces the in-table Excel filter row, whose
   controls were unreachable on a phone (they sat 880px inside a sideways
   scroller). */
#page-documents .wd-tools { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0 0 8px; }
#page-documents .wd-tools .wd-q { flex: 1 1 260px; width: auto; min-width: 180px; max-width: 420px; min-height: 32px;
  padding: 5px 11px; font-size: 12.5px; border: 1px solid var(--gray2); border-radius: 8px; background: #fff; }
#page-documents .wd-tools .wd-q:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }
#page-documents .wd-dates { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--ink-2); flex-wrap: wrap; }
#page-documents .wd-dates label { font-size: 11.5px; color: var(--ink-2); }
#page-documents .wd-dates .fi { width: auto; min-width: 132px; min-height: 30px; padding: 3px 7px; font-size: 11.5px; }
#page-documents .wd-shown { margin-left: auto; font-size: 11.5px; color: var(--gray4); white-space: nowrap; }
#page-documents .wd-phf-btn { min-height: 30px; }
/* the phone's own select-all: the column header (and its box) is hidden below
   1024 by §A, and an operator must still be able to take every shown worker in
   one tap (§2.16). Desktop keeps the header box and hides this. */
#page-documents .wd-phsel { display: none; }
#page-documents .wd-phsel .btn { min-height: 32px; }
@media (max-width: 1023px) { #page-documents .wd-phsel { display: inline-flex; } }
#page-documents .wd-phf-btn.on { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-t); }

/* 3 — the active-filter chips (§A amber = "something is hiding rows") */
#page-documents .wd-chips { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; font-size: 11.5px; margin: 0 0 8px; }
#page-documents .wd-chips:empty { display: none; }
/* a filter panel opened from a column header sits inside the list wrapper */
#page-documents .cc-listwrap { position: relative; }
#page-documents #wd-panel { position: static; }
#page-documents #wd-fpanel { top: 34px; }

/* the status doors: §A reserves AMBER for an active narrowing (the gold ring was
   the brand accent doing a state's job) */
#page-documents .wd-summary { margin: 0 0 8px; }
#page-documents .wd-eyebrow { color: var(--gray4); }
#page-documents .wd-stat { min-height: 30px; }
#page-documents .wd-stat-on { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-t);
  box-shadow: 0 0 0 1px var(--amber) inset; }
#page-documents .wd-stat:focus-visible { outline: 2px solid var(--amber); outline-offset: 1px; }

/* the honest note a sideways grid owes a phone (§A: never a silent truncation).
   Declared before the phone block, which turns it on. */
#page-documents .wd-swipe { display: none; font-size: 11.5px; color: var(--amber-t);
  background: var(--amber-bg); border: 1px solid var(--amber); border-radius: var(--card-r);
  padding: 6px 10px; margin: 0 0 6px; line-height: 1.45; }

/* 4 — THE COMPACT B IDENTITY LIST (QID · Health Card · Passport).
   The three highest-volume tabs are §A rows, not a table: on a phone they stack,
   so a worker's number, expiry and status are readable without scrolling a
   table sideways. Header and rows share one --cc-cols template set by the
   renderer; every non-text column is a fixed width (§E). */
#page-documents .cc-list { max-height: 64vh; }
#page-documents .cc-row { font-variant-numeric: tabular-nums; }
/* the left edge carries the document's standing — the same law the frozen Code
   cell used to carry (EXPIRED red · ≤30d amber · missing a dashed hole) */
#page-documents .cc-row.wd-r-expired { border-left-color: var(--state-err); }
#page-documents .cc-row.wd-r-soon { border-left-color: var(--state-pend); }
#page-documents .cc-row.wd-r-missing { border-left-style: dashed; border-left-color: var(--gray3); }
#page-documents .cc-row.wd-picked { background: var(--cherry-bg); }
#page-documents .wdc-sel { display: flex; align-items: center; justify-content: center; cursor: pointer; }
#page-documents .wdc-sel input { width: 16px; height: 16px; }
#page-documents .wdc-site, #page-documents .wdc-nat, #page-documents .wdc-num, #page-documents .wdc-exp {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
#page-documents .wdc-num { font-family: 'Space Grotesk', sans-serif; font-size: 11.5px; color: var(--gray5, #3E4560); }
#page-documents .wdc-st { min-width: 0; }
#page-documents .cc-head input[type="checkbox"] { width: 15px; height: 15px; }
/* PHONE / TABLET: the row stacks. Identity line · site · the document's own
   three facts · the action — the full name prints (§A). */
@media (max-width: 1023px) {
  #page-documents .cc-list { max-height: none; }
  #page-documents .cc-row {
    grid-template-columns: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas:
      "sel no   nm   og  dp"
      "sel site site nat nat"
      "sel num  exp  st  st"
      "sel ctl  ctl  ctl ctl";
    gap: 2px 8px; padding: 7px 9px; min-height: 0; }
  #page-documents .wdc-sel { grid-area: sel; align-self: start; padding-top: 3px; padding-right: 2px; }
  #page-documents .cc-no { grid-area: no; }
  #page-documents .cc-nm { grid-area: nm; }
  #page-documents .wdc-og { grid-area: og; color: var(--gray4); }   /* own trade, quieter */
  #page-documents .wdc-dp { grid-area: dp; }                        /* deployed as, the operational one */
  #page-documents .wdc-site { grid-area: site; white-space: normal; color: var(--gray4); font-size: 12px; }
  #page-documents .wdc-nat { grid-area: nat; justify-self: end; color: var(--gray4); }
  #page-documents .wdc-num { grid-area: num; }
  #page-documents .wdc-exp { grid-area: exp; }
  #page-documents .wdc-st { grid-area: st; justify-self: end; }
  #page-documents .cc-ctl { grid-area: ctl; margin-top: 4px; }
  #page-documents .cc-ctl .btn { min-height: 32px; }
  #page-documents .wd-shown { margin-left: 0; flex-basis: 100%; }
  /* the date question reads as one question: its words on their own line, the
     two bounds side by side underneath (it wrapped mid-sentence before) */
  #page-documents .wd-dates { flex-basis: 100%; display: grid; width: 100%;
    grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px 6px; }
  #page-documents .wd-dates label { grid-column: 1 / -1; }
  #page-documents .wd-dates .fi { width: 100%; min-width: 0; }
  /* the two matrices KEEP their bounded scroll box on a phone — the sticky
     download strip belongs to the box, and an unbounded table would leave it
     stranded halfway down the page */
  #page-documents .wd-scroll { max-height: 56vh; }
  #page-documents .wd-swipe { display: block; }
}

/* 5 — THE TWO MATRICES (certifications · Vault). DEVIATION, logged in the
   standard: a worker × certificate (or × document) GRID is not a list — it
   keeps its table and scrolls inside its own box, like the Payroll grid and the
   History lenses. What it takes from §A: the gray header band with caps
   Space Grotesk labels, 30px rows, identity in Space Grotesk navy, trade CODES,
   shortened names with the full name on the title, and the same funnels. */
#page-documents .wd-scroll { max-height: 64vh; }
#page-documents .wd-table { font-size: 12px; font-variant-numeric: tabular-nums; }
#page-documents .wd-table td { height: 30px; padding: 3px 8px; }
#page-documents .wd-hr th {
  background: var(--gray1); color: var(--gray4); border-bottom: 1px solid var(--gray2);
  font-family: 'Space Grotesk', sans-serif; font-size: 10.5px; font-weight: 700;
  letter-spacing: .6px; padding: 5px 8px; height: 30px; }
#page-documents .wd-hr th.wd-colcode, #page-documents .wd-table .wd-hr th.wd-colsel { background: var(--gray1); }
#page-documents .wd-table td.wd-colcode {
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 12px; color: var(--navy); }
#page-documents .wd-nmcell { font-weight: 600; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
#page-documents .wd-trcell { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 11.5px; color: var(--navy); }
#page-documents .wd-thf { white-space: nowrap; }
#page-documents .wd-thf .cc-fnl, #page-documents .wd-cth .cc-fnl { margin-left: 4px; vertical-align: middle; }
#page-documents .wd-cth { font-size: 10.5px; }
#page-documents .wd-table tbody tr:hover td { background: var(--cherry-bg); }
#page-documents .wd-table tbody tr:hover td.wd-colcode, #page-documents .wd-table tbody tr:hover td.wd-colsel { background: var(--cherry-bg); }
#page-documents .wd-scopebar { align-items: center; gap: 8px 10px; }
#page-documents .wd-scopebanner { line-height: 1.5; }
/* the vault head: the caption and its one admin control on one line */
#page-documents .wd-vhead { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
#page-documents .wd-vhead .cc-meta { flex: 1 1 320px; margin-bottom: 6px; line-height: 1.5; }
#page-documents .wd-avail { font-size: 11.5px; color: var(--ink-2); line-height: 1.5; margin: 0 0 8px;
  background: var(--gray1); border: 1px solid var(--gray2); border-radius: var(--card-r); padding: 7px 10px; }
#page-documents .wd-avail a { color: var(--navy); font-weight: 700; }
#page-documents .wd-emptycell .wd-emptymsg a { color: var(--navy); font-weight: 700; }

/* 6 — the two collapsed boards read as one quiet band, and their open headings
   are real controls (they were a bare div with an inline cursor) */
#page-documents .wd-band { font-size: 12.5px; padding: 8px 12px; }
#page-documents .wd-bandh { cursor: pointer; margin: 8px 0 4px; }
#page-documents .wd-bandh:hover { color: var(--navy); }

/* 7 — the docked bulk bar keeps the app's bulk grammar (§148: it owns the
   content area and clears the bottom nav) and takes the §A voice: the count is
   named, and a selected worker the filters are HIDING says so rather than
   surfacing in the skip report. */
#idr-bulkbar .wd-hid, #cert-bulkbar .wd-hid {
  font-size: 11.5px; font-weight: 700; color: var(--amber); }
/* === /LANE 7 — T17 WORKERS DOCUMENTS RESTYLE ============================== */