/* ═══════════════════════════════════════════════════════════════════════
audit-additions.css
Module CSS written during the MOBBIN-AUDIT redesign is concatenated into
this file. It is linked from index.html AFTER css/styles.css, so anything
here overrides the base design system rather than being overridden by it.
Rules:
- Use the shared tokens only. No hard-coded colours, ever.
--bg --surface --surface-2 --surface-3 --border --border-2
--text --text-2 --text-3
--accent --accent-ink --accent-bg --accent-br
--ink --on-ink
--ok --warn --danger and their -bg / -br tints
--radius (6px) --radius-lg (10px) --font
- Do not redefine a token here. Tokens live in css/styles.css :root and
[data-theme=dark] only.
- Do not rename or restyle a shared component (.ui-empty, .ui-meter,
.ui-diff, .ui-pill, .ui-period, .ui-asof, .ui-confirm, .ui-toast-undo,
.ui-icon). Extend with a modifier class instead.
- Nothing load-bearing below 11px, and 11px only for uppercase micro-labels.
- Both themes must work. Check every rule in dark before committing.
This file is intentionally empty until modules are appended below.
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: calendar (js/calendar.js — month grid + selected-day rail)
Audit sections 6 and 7, items 1 and 7 of the ten.
Tokens only. Both themes verified against the token definitions in
css/styles.css — every colour below is a token, so dark mode follows
automatically and no [data-theme=dark] block is needed.
═══════════════════════════════════════════════════════════════════════ */
/* ── grid frame ─────────────────────────────────────────────────────── */
/* minmax(0,1fr) instead of 1fr so a long fund code can never push the
seven columns wider than the card (the grid used to overflow silently). */
.cal-dow-row,.cal-grid{grid-template-columns:48px repeat(7,minmax(0,1fr))}
.cal-dow-quota{font-size:11px;letter-spacing:.04em}
/* ── day cell ───────────────────────────────────────────────────────── */
.cal-cell{display:flex;flex-direction:column;gap:2px;min-height:112px;padding:6px 7px}
.cal-cell-head{display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:22px}
.cal-cell-head .cal-day-num{margin-bottom:0}
.cal-cell-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:4px;min-height:18px}
.cal-cell-foot > :only-child{margin-left:auto}
/* the printed day comparison: posted in ink, guide muted, never colour alone */
.day-total-badge{position:static;display:inline-flex;align-items:baseline;gap:2px;
font-size:12px;font-weight:600;color:var(--text-3)}
.cal-tot-act{color:var(--text);font-weight:600}
.cal-tot-sep{color:var(--text-3);font-weight:400}
.cal-tot-guide{color:var(--text-3);font-weight:500}
/* a past workday with nothing logged: dashed top rule + a word, not a hue */
.cal-cell.cal-day-missing{border-top:2px dashed var(--warn);background:var(--warn-bg)}
.cal-cell.cal-day-missing:hover{background:var(--warn-bg)}
.cal-missing{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;
letter-spacing:.04em;text-transform:uppercase;color:var(--warn);white-space:nowrap}
.cal-missing svg{width:11px;height:11px;flex:none}
/* three-pixel stacked fund bar — fund colour used purely as a bar */
.cal-bar{display:flex;gap:1px;height:3px;border-radius:2px;overflow:hidden;margin:1px 0 2px}
.cal-bar i{display:block;height:100%;background:var(--border-2);min-width:2px}
/* entry chips stack one per line so the hours form a numeric column */
.cal-entries{display:flex;flex-direction:column;flex-wrap:nowrap;gap:2px;margin-top:0;min-width:0}
.cal-entry-pill{display:flex;align-items:center;gap:4px;width:100%;min-width:0;
padding:0 5px;border-radius:0 4px 4px 0;line-height:17px;color:var(--text-2)}
.cal-entry-pill.cal-pill-fund{border-left-width:3px;border-left-style:solid}
.cal-entry-pill .pill-fund{flex:1 1 auto;max-width:none;min-width:0;font-weight:700;color:var(--text)}
.cal-entry-pill .pill-hrs{flex:none;margin-left:auto;font-size:11px;font-weight:600;color:var(--text-2);
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cal-entry-pill.leave-pill .pill-fund,.cal-entry-pill.leave-pill .pill-hrs{color:inherit}
.cal-entry-pill.cal-pill-rejected .pill-hrs{color:var(--danger)!important;text-decoration:line-through}
/* "+N more" is a control, not a caption */
.cal-more-btn{align-self:flex-start;background:none;border:0;padding:1px 4px;margin:0;
font-family:var(--font);font-size:11px;font-weight:600;color:var(--text-3);cursor:pointer}
.cal-more-btn:hover{color:var(--text);text-decoration:underline}
/* add control: visible at rest (a hover-only control fails this audience),
full strength on hover, focus or when the day is selected */
.cal-add-btn{position:static;opacity:.45;width:18px;height:18px;display:inline-flex;
align-items:center;justify-content:center;border-radius:4px;font-size:15px}
.cal-cell:hover .cal-add-btn,.cal-cell.selected .cal-add-btn,.cal-add-btn:focus-visible{opacity:1;color:var(--text)}
/* ── week gutter: what the seven cells beside it actually add up to ──── */
.cal-week{gap:2px;padding:6px 3px}
.cal-week-posted{font-size:12px;font-weight:700;color:var(--text);line-height:1.1;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cal-week-quota{font-size:11px;font-weight:600;color:var(--text-3);letter-spacing:0}
.cal-week-set{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
color:var(--accent-ink);background:var(--accent-bg);border-radius:4px;padding:0 4px;line-height:15px}
.cal-week-gear{opacity:1;margin-top:2px}
/* ── month header: the month's own arithmetic ───────────────────────── */
.cal-title{display:flex;flex-direction:column;gap:5px;min-width:0}
.cal-title-main{font-size:20px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.cal-title-nums{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
font-size:12px;font-weight:500;color:var(--text-3);letter-spacing:0;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cal-title-total{font-size:14px;font-weight:700;color:var(--text)}
.cal-title-exp{color:var(--text-3)}
.cal-missing-btn{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;
border-radius:5px;border:1px solid var(--warn-br);background:var(--warn-bg);color:var(--warn);
font-family:var(--font);font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.cal-missing-btn:hover{filter:none;border-color:var(--warn)}
.cal-missing-btn svg{width:12px;height:12px;flex:none}
/* month with nothing logged, under the grid */
.cal-month-empty{padding:14px}
.cal-month-empty:empty{display:none}
/* ── selected-day rail ──────────────────────────────────────────────── */
.entries-panel-title{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}
.cal-day-step{width:24px;height:24px;flex:none;display:inline-flex;align-items:center;justify-content:center;
border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);
color:var(--text-2);font-family:var(--font);font-size:13px;line-height:1;cursor:pointer;padding:0}
.cal-day-step:hover{background:var(--surface-2);color:var(--text)}
.cal-day-name{font-size:15px;font-weight:600;color:var(--text)}
.cal-day-stat{display:inline-flex;align-items:baseline;gap:2px;font-size:13px;font-weight:600;
color:var(--text-3);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.cal-day-note{font-size:12px;font-weight:500;color:var(--text-3)}
/* entry rows */
.entry-row .ui-pill{flex:none}
.entry-row-main{flex:1 1 auto;min-width:0}
.entry-row-date{font-size:11px;color:var(--text-3);font-weight:500}
.entry-row-rejected .entry-activity,.entry-row-rejected .entry-dur{
text-decoration:line-through;text-decoration-thickness:1px;color:var(--text-3)}
.entry-fund-tag.cal-fund-tag{display:inline-flex;align-items:center;gap:5px;
background:var(--surface-3);color:var(--text-2);border:1px solid var(--border);font-weight:600}
.cal-swatch{width:8px;height:8px;border-radius:2px;flex:none;display:inline-block}
/* ── width rules (1024 is a stated must-survive width) ──────────────── */
@media (max-width:1180px){
.cal-dow-row,.cal-grid{grid-template-columns:44px repeat(7,minmax(0,1fr))}
.cal-cell{min-height:92px;padding:5px}
.cal-week{padding:6px 2px}
.cal-entry-pill{gap:3px;padding:0 3px}
.cal-entry-pill .pill-fund{letter-spacing:0}
}
@media (max-width:1024px){
.cal-title-main{font-size:17px}
.cal-cell{min-height:84px}
.cal-entry-pill .pill-fund{max-width:56px}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-approvals.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
mod-approvals.css — module CSS for js/approvals.js
Surfaces: Approvals / review queue (audit §10) and All Entries (§9).
Tokens only, never a hard-coded colour. Both themes come for free
because every value below resolves from :root / [data-theme=dark] in
css/styles.css. Nothing here redefines a token and nothing here
restyles a shared component (.ui-empty .ui-meter .ui-diff .ui-pill
.ui-period .ui-asof .ui-confirm .ui-toast-undo) — only their spacing
inside this module's own containers.
Load: index.html links css/audit-additions.css, the concatenation
target for module CSS. Until this file is appended there, approvals.js
adds a for it at first render — and detects the marker below so
it never double-links once the file IS concatenated.
═══════════════════════════════════════════════════════════════════════ */
.ap-css-probe{--ap-mod-css:1}
/* ── shared small parts ───────────────────────────────────────────── */
.ap-dim{color:var(--text-3)}
.ap-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.ap-card + .ap-card{margin-top:12px}
/* an approve action reads as a decision, not as the page's primary CTA */
.btn-sm.ap-ok{border-color:var(--ok-br);color:var(--ok);background:var(--surface)}
.btn-sm.ap-ok:hover{background:var(--ok-bg)}
.btn-sm.ap-ok:disabled{opacity:.45;cursor:not-allowed;background:var(--surface)}
.btn-sm:disabled{opacity:.45;cursor:not-allowed}
/* destructive variants of the two modal buttons, used only by this module */
.btn-save.ap-danger{background:var(--danger-bg);border-color:var(--danger-br);color:var(--danger)}
.btn-save.ap-danger:hover{opacity:1;background:var(--danger-bg);border-color:var(--danger)}
.btn-save.ap-danger:disabled{opacity:.45;cursor:not-allowed}
.btn-cancel.ap-danger{border-color:var(--danger-br);color:var(--danger)}
.btn-cancel.ap-danger:hover{background:var(--danger-bg);color:var(--danger)}
/* ═══ APPROVALS — page head ═══════════════════════════════════════ */
.ap-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.ap-head-l{display:flex;align-items:flex-start;gap:12px;min-width:0}
.ap-back{display:inline-flex;align-items:center;gap:6px;height:30px;flex-shrink:0}
.ap-back svg{transform:rotate(0deg)}
.ap-sub{font-size:12px;color:var(--text-3);line-height:1.5}
.ap-head-r{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ap-period{display:flex;align-items:center;gap:8px}
.ap-period-lbl{font-size:13px;font-weight:600;color:var(--text);min-width:170px;text-align:center;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ap-period .cal-nav-btn:disabled{opacity:.4;cursor:not-allowed}
/* ── KPI strip ─────────────────────────────────────────────────── */
.ap-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}
.ap-kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:12px 14px}
.ap-kpi-k{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:6px}
.ap-kpi-v{font-size:22px;font-weight:600;color:var(--text);letter-spacing:-.02em;line-height:1.1;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ap-kpi-pending{color:var(--warn)}
.ap-kpi-approved{color:var(--ok)}
.ap-kpi-rejected{color:var(--danger)}
.ap-kpi-s{font-size:12px;color:var(--text-3);margin-top:4px}
/* ── person chips + status segment ─────────────────────────────── */
.ap-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.ap-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:14px;
border:1px solid var(--border-2);background:var(--surface);color:var(--text-2);
font-size:12px;font-weight:500;font-family:var(--font);cursor:pointer;white-space:nowrap;
transition:background .15s,color .15s,border-color .15s}
.ap-chip:hover{background:var(--surface-2);color:var(--text)}
.ap-chip.active{background:var(--ink);color:var(--on-ink);border-color:var(--ink)}
.ap-chip-n{font-size:11px;font-weight:600;opacity:.85;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ap-seg{display:flex;gap:2px;margin-left:auto;background:var(--surface-2);border:1px solid var(--border-2);
border-radius:var(--radius);padding:2px}
.ap-seg-btn{padding:5px 10px;border:1px solid transparent;background:transparent;border-radius:5px;
font-size:12px;font-weight:500;font-family:var(--font);color:var(--text-2);cursor:pointer;white-space:nowrap;
transition:background .15s,color .15s}
.ap-seg-btn.active{background:var(--surface);color:var(--text);border-color:var(--border-2);font-weight:600}
/* ── the one bulk control: verb, count and scope in the label ──── */
.ap-bulkbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:10px 14px;margin-bottom:14px}
.ap-bulkbar-l{font-size:12px;color:var(--text-2)}
.ap-bulkbar-l .ui-period{font-weight:600;color:var(--text)}
.btn-sm.ap-bulk-btn{height:32px;padding:0 14px;font-weight:600}
/* ── per-person card ───────────────────────────────────────────── */
.ap-person{margin-bottom:12px}
.ap-person-head{display:flex;align-items:center;gap:10px;padding:11px 14px;background:var(--surface-2);
border-bottom:1px solid var(--border);flex-wrap:wrap}
.ap-person-id{min-width:0}
.ap-person-nm{font-size:13px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:8px}
.ap-role{font-size:11px;font-weight:600;color:var(--text-3);background:var(--surface-3);
border:1px solid var(--border);border-radius:5px;padding:1px 6px;text-transform:uppercase;letter-spacing:.05em}
.ap-person-em{font-size:11px;color:var(--text-3);margin-top:2px;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ap-person-right{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ap-count-pending,.ap-count-done,.ap-count-flag{display:inline-flex;align-items:center;gap:5px;
font-size:12px;font-weight:600;white-space:nowrap}
.ap-count-pending{color:var(--warn)}
.ap-count-done{color:var(--ok)}
.ap-count-flag{color:var(--danger)}
/* ── allocation strip: posted fill, target tick, difference chip ── */
.ap-alloc{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--border);
background:var(--surface)}
.ap-alloc-item{display:flex;align-items:center;gap:8px;min-width:190px;flex:1 1 190px}
.ap-alloc-item .ui-meter{flex:1;min-width:0}
/* ── selection bar: INLINE, above the rows. Never floating — a floating
bar covers rows at 1024, a stated must-survive width. ────────── */
.ap-selbar,.le-selbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
padding:9px 14px;background:var(--accent-bg);border-bottom:1px solid var(--accent-br)}
.ap-selbar-l,.le-selbar-l{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-2)}
.ap-selbar-l strong,.le-selbar-l strong{color:var(--text);font-weight:600}
.ap-selbar-r,.le-selbar-r{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.le-selbar-why{font-size:12px;color:var(--warn)}
.le-selbar-note{flex-basis:100%;font-size:11px;color:var(--text-3)}
.le-selbar{border:1px solid var(--accent-br);border-radius:var(--radius-lg);margin-bottom:12px}
/* ── review table ──────────────────────────────────────────────── */
.ap-tblw{overflow-x:auto}
.ap-tbl{width:100%;border-collapse:collapse;font-size:13px}
.ap-tbl th,.ap-tbl td{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.ap-tbl th{text-align:left;padding:8px 12px;font-size:11px;font-weight:600;text-transform:uppercase;
letter-spacing:.06em;color:var(--text-3);background:var(--surface);border-bottom:1px solid var(--border);white-space:nowrap}
.ap-tbl td{padding:9px 12px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:top}
.ap-tbl tbody tr:last-child td{border-bottom:none}
.ap-tbl .num{text-align:right}
.ap-tbl th.num{text-align:right}
.ap-row{cursor:pointer;transition:background .15s}
.ap-row:hover td{background:var(--surface-2)}
.ap-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ap-row-done td{color:var(--text-2)}
.ap-row-sel td{background:var(--accent-bg)}
.ap-td-chk,.le-td-chk{width:34px;padding-right:0!important}
.ap-chk,.le-chk{width:14px;height:14px;accent-color:var(--accent);cursor:pointer;margin:0}
.ap-td-date{white-space:nowrap}
.ap-td-act{white-space:nowrap}
.ap-td-desc{max-width:320px;color:var(--text-2)}
.ap-td-hrs{white-space:nowrap;font-weight:600}
.ap-td-do{white-space:nowrap}
.ap-row-btns{display:flex;gap:6px;justify-content:flex-end}
.ap-row-note{font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.45}
.ap-card-empty{padding:6px 0}
/* flags: glyph plus a word, never colour alone */
.ap-flags{display:flex;gap:4px;flex-wrap:wrap;margin-top:4px}
.ap-flag{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:600;
color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-br);
border-radius:5px;padding:1px 6px;white-space:nowrap}
/* ── send-back reason dialog ───────────────────────────────────── */
.ap-reason-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.ap-reason-chip{height:26px;padding:0 10px;border-radius:13px;border:1px solid var(--border-2);
background:var(--surface);color:var(--text-2);font-size:12px;font-family:var(--font);cursor:pointer;
transition:background .15s,color .15s}
.ap-reason-chip:hover{background:var(--surface-2);color:var(--text)}
.ap-reason-hint{font-size:11px;color:var(--text-3);margin-top:5px;line-height:1.45}
/* ── review decision block inside the entry detail modal ───────── */
.ap-decide{margin-top:16px;padding:14px;background:var(--surface-2);border:1px solid var(--border);
border-radius:var(--radius-lg)}
.ap-decide-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);margin-bottom:8px}
.ap-decide-btns{display:flex;gap:10px}
.ap-decide-next{margin-top:8px;display:flex;justify-content:flex-end}
/* ── per-entry history (the audit trail, read-only) ────────────── */
.ap-trail{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.ap-trail-row{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text-3);
padding-bottom:4px;border-bottom:1px solid var(--border)}
.ap-trail-row:last-child{border-bottom:none}
.ap-trail-act{font-weight:600;color:var(--text-2)}
.ap-trail-at{margin-left:auto;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* ═══ ALL ENTRIES ════════════════════════════════════════════════ */
.le-summary{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12px;color:var(--text-2)}
.le-summary .num{font-weight:600;color:var(--text)}
.le-dot{color:var(--text-3)}
.le-quiet{color:var(--text-3)}
.le-pending{display:inline-flex;align-items:center;gap:4px;color:var(--warn);font-weight:600}
.le-sentback{display:inline-flex;align-items:center;gap:4px;color:var(--danger);font-weight:600}
.le-note{font-size:11px;color:var(--text-3);margin-top:4px}
.le-search{min-width:200px}
.le-ms-panel{position:absolute;z-index:50;top:calc(100% + 4px);left:0;min-width:200px;max-width:280px;
background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);
box-shadow:var(--shadow-pop);padding:8px}
.le-ms-search{width:100%;box-sizing:border-box;padding:6px 9px;border:1px solid var(--border-2);
border-radius:var(--radius);font-size:12px;font-family:var(--font);color:var(--text);
background:var(--surface);outline:none;margin-bottom:6px}
.le-ms-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.le-ms-caret{width:0;height:0;flex-shrink:0;border-left:4px solid transparent;border-right:4px solid transparent;
border-top:4px solid var(--text-3)}
.dash-ms-opt:hover{background:var(--surface-2)}
/* NOT sticky: the wrapper's overflow-x makes it the scrollport, so a
sticky header would never detach. A real sticky header needs the card
wrapper in index.html to own the vertical scroll — reported, not faked. */
.le-tblw{overflow-x:auto}
.le-td-desc{max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
color:var(--text-3);font-size:12px}
.le-td-do{white-space:nowrap;text-align:right}
.le-hrs{text-align:right;font-weight:600;white-space:nowrap}
.all-entry-table th.num,.all-entry-table td.num{text-align:right}
.all-entry-table td.le-td-chk,.all-entry-table th.le-td-chk{text-align:left}
.le-row-sel td{background:var(--accent-bg)!important}
.le-fund{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.le-swatch{width:8px;height:8px;border-radius:2px;flex-shrink:0}
/* sortable headers: the resting table stays quiet, the active one shows */
.le-sort{display:inline-flex;align-items:center;gap:5px;background:none;border:none;padding:0;margin:0;
font:inherit;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);cursor:pointer}
.le-sort:hover{color:var(--text)}
.le-sort .le-sort-ic{opacity:0;transition:opacity .15s}
.le-sort:hover .le-sort-ic{opacity:.45}
.le-sort.active{color:var(--text)}
.le-sort.active .le-sort-ic{opacity:1}
.le-sort:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}
/* totals row */
.le-totals td{background:var(--surface-2);border-top:1px solid var(--border-2);border-bottom:none;
font-weight:600;color:var(--text)}
/* pager: fixed width whatever the row count */
.le-pager{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:10px 14px;border-top:1px solid var(--border);background:var(--surface)}
.le-pager-l,.le-pager-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.le-showing{font-size:12px;color:var(--text-2)}
.le-pageno{font-size:12px;color:var(--text-2);min-width:110px;text-align:center}
.le-pagesize{padding:5px 9px;cursor:pointer}
.btn-sm.le-pg{min-width:32px}
/* ═══ 1024px rule — the stated must-survive width ═════════════════ */
@media (max-width:1180px){
.ap-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1024px){
.ap-head{flex-direction:column;align-items:stretch}
.ap-head-r{align-items:flex-start}
.ap-period-lbl{min-width:0;text-align:left}
.ap-seg{margin-left:0;width:100%}
.ap-seg-btn{flex:1}
/* The decision controls must never end up behind a sideways scroll, so
the one wide, non-decisional column goes instead. Head, body and the
totals row all carry the class, so nothing shifts out of line. */
.ap-desc-col{display:none}
.le-desc-col{display:none}
.ap-alloc-item{min-width:100%;flex-basis:100%}
.ap-person-right{margin-left:0;width:100%}
.le-pager{justify-content:flex-start}
.ap-selbar-r,.le-selbar-r{margin-left:0;width:100%}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-dashboard.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
mod-dashboard.css — module CSS for js/dashboard.js (MOBBIN-AUDIT §5).
Loaded by dashboard.js itself (it appends a next to css/styles.css)
so index.html does not have to change. It must load AFTER css/styles.css.
Tokens only. Nothing here redefines a token, renames a shared component
(.ui-meter .ui-diff .ui-pill .ui-period .ui-asof .ui-empty) or restyles
one — every rule below is a dashboard-local class or a scoped modifier.
Both themes work: every colour resolves through a token that already has
a [data-theme=dark] value.
═══════════════════════════════════════════════════════════════════════ */
/* ── page header: title, provenance line, actions ───────────────────── */
/* the header gained a second line, so it aligns to the top rather than the
vertical centre of a now-taller left column */
.dash-header:has(.dash-head-main){align-items:flex-start}
.dash-head-main{display:flex;flex-direction:column;gap:6px;min-width:0;flex:1}
.dash-head-main .dash-title h2{margin:0}
.dash-sub{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px;
font-size:12px;color:var(--text-3);line-height:1.45}
.dash-sub .ui-period,.dash-sub .ui-asof{font-size:12px}
.dash-sub-scope{color:var(--text-2);font-weight:500}
.dash-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dash-actions .btn-sm{height:32px;display:inline-flex;align-items:center;gap:6px;padding:0 12px}
.dash-actions .btn-sm svg{width:14px;height:14px;flex:none}
/* "partial period" — a mid-period total must never read as a closed one */
.dash-partial{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;
border-radius:5px;border:1px solid var(--warn-br);background:var(--warn-bg);color:var(--warn);
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.dash-closed{display:inline-flex;align-items:center;gap:5px;height:20px;padding:0 7px;
border-radius:5px;border:1px solid var(--border);background:var(--surface-3);color:var(--text-2);
font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
/* ── period control: [prev] [resolved range] [next] ─────────────────── */
.dash-period-ctl{display:flex;align-items:stretch;gap:0;position:relative}
.dash-step-btn{width:30px;padding:0;display:flex;align-items:center;justify-content:center;
border:1px solid var(--border);background:var(--surface);color:var(--text-2);
font-family:var(--font);cursor:pointer;transition:background .15s,border-color .15s}
.dash-step-btn:first-child{border-radius:var(--radius) 0 0 var(--radius)}
.dash-step-btn:last-child{border-radius:0 var(--radius) var(--radius) 0}
.dash-step-btn:hover{background:var(--surface-2);border-color:var(--border-2)}
.dash-range-btn{flex:1;min-width:190px;display:flex;align-items:center;justify-content:space-between;
gap:8px;padding:7px 11px;border:1px solid var(--border);border-left:0;border-right:0;
background:var(--surface);color:var(--text);font-family:var(--font);font-size:12px;
cursor:pointer;text-align:left;transition:background .15s}
.dash-range-btn:hover{background:var(--surface-2)}
.dash-range-btn .ui-period{font-size:12px;color:var(--text)}
.dash-range-btn .ui-period b,.dash-range-btn .ui-period time{color:var(--text);font-weight:600}
/* preset panel */
.dash-pop{position:absolute;z-index:60;top:calc(100% + 5px);left:0;min-width:290px;
background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);
box-shadow:var(--shadow-pop);padding:10px}
.dash-pop-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);margin:2px 2px 8px}
.dash-preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.dash-preset{display:flex;flex-direction:column;gap:2px;align-items:flex-start;
padding:7px 9px;border:1px solid var(--border);border-radius:var(--radius);
background:var(--surface);color:var(--text);font-family:var(--font);font-size:12px;
font-weight:500;cursor:pointer;text-align:left;transition:background .15s,border-color .15s}
.dash-preset:hover{background:var(--surface-2);border-color:var(--border-2)}
.dash-preset.is-active{border-color:var(--accent-br);background:var(--accent-bg);color:var(--accent-ink)}
.dash-preset em{font-style:normal;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
.dash-preset.is-active em{color:var(--accent-ink)}
.dash-pop-dates{display:flex;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
.dash-pop-dates label{flex:1;display:flex;flex-direction:column;gap:4px;
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.dash-pop-foot{margin-top:9px;font-size:11px;color:var(--text-3);line-height:1.45}
/* ── filter bar extras ──────────────────────────────────────────────── */
.dash-filter-count{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 8px;
border-radius:11px;border:1px solid var(--accent-br);background:var(--accent-bg);
color:var(--accent-ink);font-size:11px;font-weight:600;white-space:nowrap}
.dash-filter-count.is-empty{border-color:var(--border);background:var(--surface-2);color:var(--text-3)}
.dash-reset-btn[disabled]{opacity:.45;cursor:default}
/* multi-select control (was inline styles) */
.dash-ms{position:relative}
.dash-ms-toggle{cursor:pointer;text-align:left;min-width:130px;display:flex;align-items:center;
justify-content:space-between;gap:8px}
.dash-ms-toggle .dash-ms-caret{flex-shrink:0;color:var(--text-3);display:flex}
.dash-ms-panel{position:absolute;z-index:50;top:calc(100% + 4px);left:0;min-width:210px;max-width:280px;
background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius-lg);
box-shadow:var(--shadow-pop);padding:8px}
.dash-ms-search{width:100%;box-sizing:border-box;padding:6px 9px;border:1px solid var(--border);
border-radius:var(--radius);font-size:12px;font-family:var(--font);color:var(--text);
background:var(--surface);outline:none;margin-bottom:6px}
.dash-ms-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dash-ms-acts{display:flex;gap:6px;margin-bottom:6px}
.dash-ms-act{flex:1;padding:4px 8px;border:1px solid var(--border);border-radius:var(--radius);
background:var(--surface);color:var(--text-2);font-size:11px;font-weight:600;
font-family:var(--font);cursor:pointer}
.dash-ms-act:hover{background:var(--surface-2)}
.dash-ms-list{max-height:190px;overflow-y:auto}
.dash-ms-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;font-size:12px;
color:var(--text);cursor:pointer;border-radius:var(--radius)}
.dash-ms-opt:hover{background:var(--surface-2)}
.dash-ms-opt input{accent-color:var(--accent);width:14px;height:14px;cursor:pointer}
.dash-ms-opt span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dash-ms-none{padding:8px 10px;font-size:12px;color:var(--text-3)}
/* ── comparison bar: both dated ranges, always printed in full ──────── */
.dash-cmp{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:10px 14px;margin-bottom:16px;font-size:12px;color:var(--text-3)}
.dash-cmp b{color:var(--text);font-weight:600}
.dash-cmp .ui-period{font-size:12px}
/* ── summary + fund cards ───────────────────────────────────────────── */
/* the fund strip carries a target line and a meter, so it needs more room
than the base 140px summary tile */
.dash-stats-row.dash-funds-row{margin-bottom:12px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.stat-card.dash-card{display:flex;flex-direction:column;gap:0}
.dash-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dash-card-head .stat-card-label{margin-bottom:0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.dash-card-den{font-size:12px;color:var(--text-3);margin-top:3px;font-variant-numeric:tabular-nums;
line-height:1.45}
.dash-card-den b{color:var(--text-2);font-weight:600}
.dash-card-target{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:5px;
font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.dash-card-target b{color:var(--text-2);font-weight:600}
.dash-card-meter{margin-top:9px}
.dash-swatch{width:9px;height:9px;border-radius:2px;flex-shrink:0;display:inline-block}
.dash-card-head .dash-swatch{margin-right:6px}
.dash-vunit{font-size:15px;font-weight:500;color:var(--text-3);margin-left:2px;letter-spacing:0}
/* queue cards (Pending review / Rejected) are real destinations */
button.stat-card.dash-queue{display:block;width:100%;text-align:left;font-family:var(--font);
cursor:pointer;position:relative;transition:background .15s,border-color .15s}
button.stat-card.dash-queue:hover{background:var(--surface-2);border-color:var(--border-2)}
button.stat-card.dash-queue:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dash-queue-go{position:absolute;top:12px;right:12px;color:var(--text-3);display:flex}
button.stat-card.dash-queue:hover .dash-queue-go{color:var(--text-2)}
.dash-age-warn{color:var(--warn);font-weight:600}
/* ── three-across chart row (the base row is 1fr 1fr) ───────────────── */
.dash-charts-row.dash-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
/* the donut stacks above its legend inside a narrow third of the row */
.dash-grid-3 .donut-wrap{flex-direction:column;align-items:flex-start;gap:14px}
.dash-grid-3 .donut-legend{width:100%;gap:7px}
/* card titles carry their denominator on the right */
.dash-chart-card .dash-chart-title{display:flex;align-items:baseline;justify-content:space-between;
gap:10px;flex-wrap:wrap}
/* donut legend: percentage carries its denominator in text */
.dash-donut-den{font-size:11px;color:var(--text-3);font-weight:500;text-transform:none;letter-spacing:0}
.donut-legend-item .dash-legend-val{margin-left:auto;color:var(--text-2);
font-variant-numeric:tabular-nums;white-space:nowrap}
.donut-legend-item .dash-legend-val b{color:var(--text);font-weight:600}
/* The legend name inherited its colour from body{color:var(--text)}, which
resolves the LIGHT token because the dark tokens are scoped to the
[data-theme=dark] element further down the tree. In dark mode the fund
names therefore rendered near-black on the dark card and were invisible.
Naming the token here re-resolves it inside the themed subtree. */
.dash-legend-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
color:var(--text)}
.donut-legend-item{width:100%}
/* breakdown bars */
.dash-bar{margin-bottom:11px}
.dash-bar-top{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:5px}
.dash-bar-name{color:var(--text);font-weight:500;min-width:0;overflow:hidden;text-overflow:ellipsis;
white-space:nowrap}
.dash-bar-val{color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.dash-bar-val b{color:var(--text);font-weight:600}
.dash-bar-track{height:6px;border-radius:3px;background:var(--surface-3);overflow:hidden}
.dash-bar-fill{height:100%;border-radius:3px;background:var(--accent)}
.dash-bar-fill.is-leave{background:var(--leave)}
.dash-note{font-size:11px;color:var(--text-3);line-height:1.5;margin-top:12px}
/* ── off-target (exceptions) card ───────────────────────────────────── */
.dash-off-list{display:flex;flex-direction:column}
.dash-off-row{display:flex;align-items:center;gap:10px;width:100%;padding:9px 4px;
border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text);
font-family:var(--font);font-size:13px;text-align:left;cursor:pointer;transition:background .15s}
.dash-off-row:last-child{border-bottom:0}
.dash-off-row:hover{background:var(--surface-2)}
.dash-off-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.dash-off-av{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;
justify-content:center;background:var(--surface-3);color:var(--text-2);
font-size:11px;font-weight:600;letter-spacing:.02em}
.dash-off-who{min-width:0;flex:1;display:flex;flex-direction:column;gap:2px}
.dash-off-name{font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-off-fund{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--text-3);min-width:0}
.dash-off-fund span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-off-num{text-align:right;flex-shrink:0;display:flex;flex-direction:column;gap:3px;
align-items:flex-end;font-variant-numeric:tabular-nums}
.dash-off-posted{font-size:13px;font-weight:600;color:var(--text)}
.dash-off-posted em{font-style:normal;font-weight:500;color:var(--text-3)}
/* ── entry log / tables ─────────────────────────────────────────────── */
.dash-num{font-variant-numeric:tabular-nums;text-align:right}
.dash-table-header .dash-hint{font-size:11px;font-weight:500;color:var(--text-3);
text-transform:none;letter-spacing:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dash-table-header .dash-hint .ui-period,.dash-table-header .dash-hint .ui-asof{font-size:11px}
.dash-fund-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;
color:var(--text);white-space:nowrap}
/* ── pager ──────────────────────────────────────────────────────────── */
.dash-pager{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;
padding:12px 0 4px}
.dash-pager-btn{min-width:32px;height:28px;padding:0 9px;border-radius:var(--radius);
display:inline-flex;align-items:center;justify-content:center;gap:3px;
font-size:12px;font-weight:500;font-family:var(--font);font-variant-numeric:tabular-nums;
border:1px solid var(--border);
background:var(--surface);color:var(--text);cursor:pointer;transition:background .15s}
.dash-pager-btn svg{width:13px;height:13px;flex:none}
.dash-pager-btn:hover:not([disabled]):not(.is-active){background:var(--surface-2)}
.dash-pager-btn.is-active{background:var(--ink);border-color:var(--ink);color:var(--on-ink);font-weight:600}
.dash-pager-btn[disabled]{color:var(--text-3);cursor:default;opacity:.5}
.dash-pager-gap{padding:0 4px;color:var(--text-3);font-size:12px}
/* ── empty state placement ──────────────────────────────────────────── */
.dash-empty-wrap{margin-bottom:20px}
/* ── print modal provenance block ───────────────────────────────────── */
.dash-pm-meta{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:11px 13px;margin-bottom:14px;font-size:12px;color:var(--text);line-height:1.7}
.dash-pm-meta .k{color:var(--text-3)}
.dash-pm-meta b{font-weight:600}
/* ── responsive: 1024 is a must-survive width ───────────────────────── */
@media (max-width:1180px){
.dash-charts-row.dash-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
.dash-charts-row.dash-grid-3{grid-template-columns:1fr}
.dash-range-btn{min-width:150px}
.dash-preset-grid{grid-template-columns:1fr}
}
/* nothing in this module prints — the print artifact is built separately */
@media print{
.dash-period-ctl,.dash-pop,.dash-pager,.dash-filter-count{display:none !important}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-entries.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
mod-entries.css — entry modal only (create / edit / duplicate /
locked view). Loaded by js/entries.js AFTER css/styles.css, so every
rule here may only extend the base system, never replace it.
Tokens only. No hard-coded colour anywhere in this file, so light and
dark both follow [data-theme=dark] on the root without a second set
of rules.
═══════════════════════════════════════════════════════════════════ */
/* ── date row on a new entry ───────────────────────────────────────── */
.ent-daterow{margin-bottom:14px}
.ent-daterow .ent-cap{margin-top:0}
.ent-date{width:auto;min-width:170px;font-variant-numeric:tabular-nums}
.ent-datesub{margin:6px 0 0;font-size:12px;color:var(--text-3)}
/* a quiet note under the title (duplicate provenance, etc.) */
.ent-note{font-size:12px;line-height:1.5;color:var(--text-2);background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--radius);padding:8px 11px;margin-bottom:14px}
.ent-cap-note{font-weight:600;text-transform:none;letter-spacing:0}
/* ── blocks ────────────────────────────────────────────────────────── */
.fund-block{position:relative}
.fund-block.has-error{border-color:var(--danger-br)}
.fb-head{display:flex;align-items:center;gap:10px;margin-bottom:4px}
.fb-label{font-size:11px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;
color:var(--text-3);white-space:nowrap}
.fb-head .blk-seg{flex:1;max-width:180px;margin-left:auto}
.fb-head .block-x{flex:0 0 auto}
/* ── field-level validation ────────────────────────────────────────── */
.ent-select.is-invalid,.ent-combo.is-invalid{border-color:var(--danger)}
.ent-select.is-invalid:focus,.ent-combo.is-invalid:focus{border-color:var(--danger);
box-shadow:0 0 0 3px var(--danger-bg)}
.ent-field-err{display:flex;align-items:flex-start;gap:5px;margin-top:5px;
font-size:12px;line-height:1.45;color:var(--danger)}
/* ── summary panels above the footer ───────────────────────────────── */
.ent-panel{border:1px solid var(--border);border-radius:var(--radius);
padding:10px 12px;margin:0 0 14px;font-size:12px;line-height:1.5}
.ent-panel-bad{border-color:var(--danger-br);background:var(--danger-bg);color:var(--text)}
.ent-panel-warn{border-color:var(--warn-br);background:var(--warn-bg);color:var(--text)}
.ent-panel-head{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--text)}
.ent-panel-bad .ent-panel-ic{color:var(--danger)}
.ent-panel-warn .ent-panel-ic{color:var(--warn)}
.ent-panel-list{margin:6px 0 0;padding-left:18px;color:var(--text-2)}
.ent-panel-list li{margin:3px 0}
/* ── hours: typed field + absolute quick chips (no slider) ─────────── */
.ent-chips{display:flex;flex-wrap:wrap;gap:5px;margin-top:2px}
.ent-chip{display:inline-flex;align-items:baseline;gap:4px;height:29px;padding:0 10px;
border-radius:var(--radius);border:1px solid var(--border-2);background:var(--surface);
color:var(--text-2);font-family:var(--font);font-size:12px;font-weight:500;
font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.ent-chip:hover{background:var(--surface-2);color:var(--text)}
.ent-chip.on{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.ent-chip-sub{font-size:10px;font-weight:600;letter-spacing:.3px;opacity:.75;text-transform:uppercase}
.hb-otline{justify-content:flex-start;margin-top:10px}
/* ── posted vs target, inside the fund picker ──────────────────────── */
.ent-alloc{margin:8px 0 2px;padding:9px 11px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--surface)}
.ent-alloc .ui-meter{margin:0}
.ent-alloc-line{margin-top:7px;font-size:12px;line-height:1.5;color:var(--text-2)}
.ent-alloc-line .ui-diff{margin-left:4px;vertical-align:-1px}
.ent-alloc-period{margin-top:4px;font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* ── footer: total left, primary right ─────────────────────────────── */
.ent-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.ent-foot .modal-actions{flex:1 1 240px;margin-top:0}
.ent-total{display:flex;flex-direction:column;gap:2px;min-width:0}
.ent-total-v{font-size:13px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.ent-total-hint{font-size:11px;color:var(--warn);font-variant-numeric:tabular-nums}
.ent-kbd{margin-left:7px;font-size:11px;font-weight:500;opacity:.65;letter-spacing:.2px}
.ent-footlink{padding:6px 10px;border:1px solid var(--border);border-radius:var(--radius);
background:transparent;color:var(--text-2);font-family:var(--font);font-size:12px;
font-weight:500;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.ent-footlink:hover{background:var(--surface-2);color:var(--text)}
/* ── locked entry view ─────────────────────────────────────────────── */
.ent-lock{border:1px solid var(--border-2);border-radius:var(--radius);
background:var(--surface-2);padding:12px 13px;margin-bottom:14px}
.ent-lock-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.ent-lock-title{font-size:13px;font-weight:600;color:var(--text)}
.ent-lock-body,.ent-lock-who{margin:7px 0 0;font-size:12px;line-height:1.55;color:var(--text-2)}
.ent-lock-who{color:var(--text-3)}
.ent-kvs{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.ent-kv{display:flex;gap:12px;padding:9px 12px;border-bottom:1px solid var(--border);font-size:12px}
.ent-kv:last-child{border-bottom:none}
.ent-kv .k{flex:0 0 118px;color:var(--text-3);font-weight:500}
.ent-kv .v{flex:1;min-width:0;color:var(--text);word-break:break-word}
.ent-kv-big{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.ent-linkbtn{display:block;width:100%;margin-top:10px;padding:9px 12px;text-align:left;
border:1px solid var(--border);border-radius:var(--radius);background:transparent;
color:var(--text-2);font-family:var(--font);font-size:12px;font-weight:500;cursor:pointer;
transition:background .15s,color .15s}
.ent-linkbtn:hover{background:var(--surface-2);color:var(--text)}
/* ── 1024 and narrower: the panel must stay usable ─────────────────── */
@media (max-width:1024px){
.ent-foot{align-items:stretch}
.ent-foot .modal-actions{flex:1 1 100%}
}
@media (max-width:520px){
.fb-head{flex-wrap:wrap}
.fb-head .blk-seg{max-width:none;margin-left:0}
.ent-kv{flex-direction:column;gap:3px}
.ent-kv .k{flex:none}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-manage.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
mod-manage.css — module CSS for js/manage.js (Users / My Team / Manage).
Linked at runtime by manage.js (index.html is shared and off limits), so
it lands AFTER css/styles.css and overrides the base system rather than
being overridden by it. Shared tokens only — no hard-coded colours here.
Every rule is checked in light and in dark ([data-theme=dark]).
Prefix: .mgx- (nothing here renames or restyles a shared component).
═══════════════════════════════════════════════════════════════════════ */
/* ── section heading with its own count, per audit 13 ("Funding sources 4") ── */
.mgx-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.mgx-h-count{font-size:12px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
/* ── fund short code badge — what the calendar chip prints ───────────── */
.mgx-code{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:5px;
border:1px solid var(--border-2);background:var(--surface-2);color:var(--text-2);
font-size:11px;font-weight:700;letter-spacing:.04em;font-variant-numeric:tabular-nums;white-space:nowrap}
.mgx-code.mgx-code-auto{border-style:dashed;color:var(--text-3)}
/* the usage line under a configuration row (entries / people allocated) */
.mgx-use{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:2px}
/* ── per-person allocation strip on a roster row (audit 12 "Keep") ───── */
.mgx-strip{display:flex;flex-direction:column;gap:4px;width:190px;flex-shrink:0}
.mgx-stack{display:flex;height:4px;border-radius:2px;overflow:hidden;background:var(--surface-3)}
.mgx-stack i{display:block;height:100%}
.mgx-strip-l{display:flex;gap:8px;flex-wrap:wrap;font-size:11px;color:var(--text-3);
font-variant-numeric:tabular-nums;line-height:1.3}
.mgx-strip-l b{color:var(--text-2);font-weight:700}
.mgx-strip-none{font-size:11px;color:var(--text-3)}
@media (max-width:1100px){ .mgx-strip{display:none} }
/* account state on the roster row's second line */
.mgx-state{display:inline-flex;align-items:center;gap:4px}
.mgx-state-warn{color:var(--warn)}
.mgx-attn{display:inline-flex;align-items:center;gap:4px;padding:1px 7px;border-radius:9px;
border:1px solid var(--warn-br);background:var(--warn-bg);color:var(--warn);
font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}
/* live count appended to a role filter chip */
.mgx-chip-n{font-variant-numeric:tabular-nums;opacity:.75;font-weight:700}
/* ── allocation total summary in the user editor ─────────────────────── */
.mgx-sum{border:1px solid var(--border);border-radius:var(--radius);padding:10px 12px;margin-top:8px;
background:var(--surface-2);display:flex;flex-direction:column;gap:7px}
.mgx-sum-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.mgx-sum-msg{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-2)}
.mgx-sum.is-bad .mgx-sum-msg{color:var(--danger)}
.mgx-sum.is-good .mgx-sum-msg{color:var(--ok)}
.mgx-sum-total{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums}
.mgx-sum-total b{color:var(--text);font-weight:700}
.mgx-sum-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* a blocking reason printed next to a disabled save button */
.mgx-block{font-size:11px;color:var(--danger);line-height:1.45;margin:0 0 8px}
.mgx-block:empty{display:none}
/* ── inline warning block (deactivate preview, contrast note) ────────── */
.mgx-warn{border:1px solid var(--warn-br);background:var(--warn-bg);color:var(--warn);
border-radius:var(--radius);padding:9px 11px;font-size:12px;line-height:1.5}
.mgx-warn ul{margin:6px 0 0;padding-left:18px}
.mgx-warn li{margin:2px 0}
/* consequence list inside my own dialogs (uiConfirm has its own) */
.mgx-cons{list-style:none;margin:4px 0 12px;padding:0;display:flex;flex-direction:column;gap:7px}
.mgx-cons li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;color:var(--text-2);line-height:1.5}
.mgx-cons li svg{flex-shrink:0;margin-top:2px;color:var(--warn)}
/* ── roles and permissions reference matrix ──────────────────────────── */
.mgx-matrix-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
.mgx-matrix{width:100%;min-width:640px;border-collapse:collapse;font-size:12.5px}
.mgx-matrix th,.mgx-matrix td{padding:9px 12px;text-align:left;border-bottom:1px solid var(--border)}
.mgx-matrix thead th{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);background:var(--surface-2);white-space:nowrap}
.mgx-matrix tbody tr:last-child td{border-bottom:none}
.mgx-matrix .mgx-area td{background:var(--surface-2);font-size:11px;font-weight:700;
text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.mgx-matrix .mgx-what{color:var(--text);font-weight:500}
.mgx-cell{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;white-space:nowrap}
.mgx-cell-full{color:var(--ok)}
.mgx-cell-scoped{color:var(--accent-ink)}
.mgx-cell-view{color:var(--text-2)}
.mgx-cell-none{color:var(--text-3)}
/* role description under the role picker */
.mgx-roledesc{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:6px}
.mgx-link{background:none;border:none;padding:0;font:inherit;font-size:11.5px;font-weight:600;
color:var(--accent-ink);cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.mgx-link:hover{color:var(--accent)}
/* ── fund colour preview: the artifacts the colour actually renders ──── */
.mgx-prev-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.mgx-prev{flex:1;min-width:150px;border:1px solid var(--border);border-radius:var(--radius);
padding:10px;background:var(--surface)}
.mgx-prev-lab{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);margin-bottom:7px}
.mgx-prev-chip{display:inline-flex;align-items:center;gap:4px;padding:1px 6px;border-radius:5px;
border:1px solid;font-size:11px;font-weight:800;letter-spacing:.03em;line-height:1.5;max-width:100%}
.mgx-prev-bar{height:4px;border-radius:2px;margin-top:8px}
.mgx-ratio{font-size:11px;color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:7px}
.mgx-ratio b{color:var(--text-2)}
/* ── person change history table ─────────────────────────────────────── */
.mgx-hist{width:100%;border-collapse:collapse;font-size:12px}
.mgx-hist th,.mgx-hist td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.mgx-hist thead th{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);background:var(--surface-2)}
.mgx-hist tbody tr:last-child td{border-bottom:none}
.mgx-hist .mgx-when{white-space:nowrap;color:var(--text-3);font-variant-numeric:tabular-nums}
.mgx-hist .mgx-what2{color:var(--text);font-weight:600}
.mgx-val{display:inline-block;padding:1px 6px;border-radius:5px;border:1px solid var(--border-2);
background:var(--surface-2);color:var(--text-2);font-size:11px;font-variant-numeric:tabular-nums}
.mgx-val-empty{border-style:dashed;color:var(--text-3)}
.mgx-hist-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:auto;max-height:260px}
/* allocated-to list inside the fund editor */
.mgx-alloclist{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden}
.mgx-alloclist>div{display:flex;align-items:center;gap:10px;padding:9px 12px;border-top:1px solid var(--border)}
.mgx-alloclist>div:first-child{border-top:none}
.mgx-alloclist .mgx-al-who{flex:1;min-width:0;font-size:12.5px;color:var(--text);font-weight:600}
.mgx-alloclist .mgx-al-sub{font-size:11px;color:var(--text-3);font-weight:400}
.mgx-alloclist .mgx-al-meter{width:120px;flex-shrink:0}
.mgx-alloclist .mgx-al-pct{width:46px;text-align:right;font-size:12px;font-weight:700;
color:var(--text);font-variant-numeric:tabular-nums;flex-shrink:0}
/* the reassignment picker inside the deactivate dialog */
.mgx-reassign{border:1px solid var(--border);border-radius:var(--radius);padding:11px 12px;
background:var(--surface-2);margin-bottom:12px}
.mgx-reassign .field{margin-bottom:0}
.mgx-keep{font-size:12px;color:var(--text-2);line-height:1.5;margin-bottom:12px}
/* 1024px rule: the roster toolbar wraps instead of clipping, and the
allocation strip is the first thing to go (it is already hidden above). */
@media (max-width:1024px){
.mgx-matrix{min-width:560px}
.mgx-prev{min-width:100%}
}
/* ── status glyphs now come from uiIcon(), so the wrapper centres an SVG
instead of a text character. Same class, same size, same colour. ─── */
.status-ico{display:inline-flex;align-items:center;justify-content:center}
.status-ico .status-ico-svg{display:block;width:12px;height:12px}
.cal-entry-pill .status-ico .status-ico-svg{width:11px;height:11px}
/* the shared empty state sits inside cards and modal panes here, so it must
not carry the full-page padding it uses on a whole screen */
.settings-section .ui-empty,
#um-pane-funds .ui-empty,
#um-pane-groups .ui-empty,
#um-pane-history .ui-empty{padding:20px 14px}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-quarterly.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
mod-quarterly.css — quarterly certification surface (MOBBIN-AUDIT §11)
Loaded at runtime by js/quarterly.js (index.html is not edited), AFTER
css/styles.css, so everything here layers on the base design system.
Rules honoured:
- shared tokens only, no hard-coded colours anywhere
- both themes work because every colour is a token
- nothing load-bearing below 11px; 11px only for uppercase micro-labels
- no shared component (.ui-*) is renamed or restyled, only extended
═══════════════════════════════════════════════════════════════════════ */
/* ── banners: one shape, four tones ───────────────────────────────── */
.q-banner{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;border-radius:var(--radius-lg);
border:1px solid var(--border);background:var(--surface-2);color:var(--text);
font-size:12.5px;line-height:1.55;margin-bottom:14px}
.q-banner svg{flex:none;margin-top:1px}
.q-banner strong{font-weight:600}
.q-banner.ok{background:var(--ok-bg);border-color:var(--ok-br);color:var(--text)}
.q-banner.ok>svg{color:var(--ok)}
.q-banner.warn{background:var(--warn-bg);border-color:var(--warn-br);color:var(--text)}
.q-banner.warn>svg{color:var(--warn)}
.q-banner.danger{background:var(--danger-bg);border-color:var(--danger-br);color:var(--text)}
.q-banner.danger>svg{color:var(--danger)}
.q-banner .q-banner-note{margin-top:5px;color:var(--text);font-weight:500}
/* ── submitted pill: extends .ui-pill, never replaces it ──────────── */
.ui-pill.q-pill-submitted{background:var(--accent-bg);color:var(--accent-ink);border-color:var(--accent-br)}
/* ── deadline block in a card header ──────────────────────────────── */
.q-deadline{text-align:right;line-height:1.35;flex:none}
.q-deadline .q-dl-close{font-size:12px;color:var(--text-2)}
.q-deadline .q-dl-left{font-size:15px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.q-deadline.warn .q-dl-left{color:var(--warn)}
.q-deadline.danger .q-dl-left{color:var(--danger)}
.countdown-card.warn{border-color:var(--warn-br);background:var(--warn-bg)}
.countdown-card.warn .cd-days{color:var(--warn)}
/* ── four-step tracker, derived from real work ────────────────────── */
.q-steps{display:flex;align-items:center;flex-wrap:wrap;gap:2px 0;padding:12px 0 2px;
font-size:12px;color:var(--text-3)}
.q-step{display:flex;align-items:center;gap:7px;white-space:nowrap}
.q-step .q-step-n{width:19px;height:19px;border-radius:50%;border:1px solid var(--border-2);
background:var(--surface);display:inline-flex;align-items:center;justify-content:center;
font-size:10px;font-weight:600;flex:none;font-variant-numeric:tabular-nums}
.q-step.done{color:var(--text-2)}
.q-step.done .q-step-n{background:var(--ok-bg);border-color:var(--ok-br);color:var(--ok)}
.q-step.cur{color:var(--text);font-weight:600}
.q-step.cur .q-step-n{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.q-step-count{font-variant-numeric:tabular-nums;font-weight:600}
.q-step-ln{width:26px;height:1px;background:var(--border-2);margin:0 9px;flex:none}
/* ── the "what is blocking submission" line ───────────────────────── */
.q-blocking{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;line-height:1.55;
color:var(--text);padding:9px 0 2px;border-top:1px dashed var(--border);margin-top:10px}
.q-blocking svg{flex:none;margin-top:2px;color:var(--warn)}
.q-blocking.ready svg{color:var(--ok)}
.q-blocking b{font-weight:600}
.q-name-link{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent-ink);
font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.q-name-link:hover{color:var(--text)}
/* the employee row a blocker name points at */
.q-emp-row.q-flash,.q-emp-list-row.q-flash{background:var(--warn-bg);border-color:var(--warn-br)}
/* ── per-row provenance + signed progress ─────────────────────────── */
.q-prov{font-size:11.5px;color:var(--text-3);line-height:1.5}
.q-prov b{color:var(--text-2);font-weight:600}
.q-rowbar{height:3px;border-radius:2px;background:var(--surface-3);overflow:hidden;margin-top:5px;max-width:220px}
.q-rowbar>span{display:block;height:100%;background:var(--accent);border-radius:2px}
.q-rowbar.full>span{background:var(--ok)}
/* ── admin roll-up band above the package list ────────────────────── */
.q-rollup{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:13px 15px;margin-bottom:14px}
.q-rollup-h{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}
.q-rollup-t{font-size:13px;font-weight:600;color:var(--text)}
.q-rollup-bar{display:flex;height:6px;border-radius:3px;overflow:hidden;background:var(--surface-3);margin:11px 0 9px}
.q-rollup-bar>span{display:block;height:100%}
.q-seg-blocked{background:var(--warn)}
.q-seg-review{background:var(--accent)}
.q-seg-done{background:var(--ok)}
.q-legend{display:flex;gap:8px;flex-wrap:wrap}
.q-legend button{display:inline-flex;align-items:center;gap:6px;padding:4px 9px;border-radius:var(--radius);
border:1px solid var(--border);background:var(--surface);color:var(--text-2);font:inherit;font-size:12px;cursor:pointer}
.q-legend button:hover{background:var(--surface-2);color:var(--text)}
.q-legend button[aria-pressed="true"]{border-color:var(--border-2);background:var(--surface-2);color:var(--text);font-weight:600}
.q-legend .q-dot{width:8px;height:8px;border-radius:2px;flex:none}
.q-legend .q-n{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
/* ── package group headings in the admin viewer ───────────────────── */
.q-group-h{display:flex;align-items:center;gap:8px;margin:16px 0 8px;font-size:11px;font-weight:600;
text-transform:uppercase;letter-spacing:.06em;color:var(--text-3)}
.q-group-h:first-child{margin-top:2px}
.q-group-h .q-n{font-variant-numeric:tabular-nums;color:var(--text-2)}
/* ── activity (append-only package history) ───────────────────────── */
.q-act-toggle{display:inline-flex;align-items:center;gap:7px;padding:7px 11px;border-radius:var(--radius);
border:1px solid var(--border);background:var(--surface);color:var(--text-2);
font:inherit;font-size:12.5px;cursor:pointer}
.q-act-toggle:hover{background:var(--surface-2);color:var(--text)}
.q-act-wrap{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);
margin-top:10px;overflow:hidden}
.q-act-note{padding:9px 13px;font-size:11.5px;color:var(--text-3);border-bottom:1px solid var(--border);
background:var(--surface-2);line-height:1.5}
.q-act-scroll{max-height:340px;overflow:auto}
table.q-act{width:100%;border-collapse:collapse;font-size:12.5px}
table.q-act th{position:sticky;top:0;background:var(--surface-2);text-align:left;
padding:8px 13px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap}
table.q-act td{padding:9px 13px;border-bottom:1px solid var(--border);color:var(--text-2);
vertical-align:top;line-height:1.5}
table.q-act tr:last-child td{border-bottom:0}
table.q-act td.q-act-time{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--text-3)}
table.q-act td.q-act-what{color:var(--text);font-weight:500;white-space:nowrap}
table.q-act td.q-act-detail{color:var(--text-2)}
table.q-act td.q-act-detail q{color:var(--text);font-style:normal}
.q-act-src{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;font-size:11px;
border:1px solid var(--border);color:var(--text-3);background:var(--surface-2);white-space:nowrap}
/* ── prior submissions / sent-back history on the card ────────────── */
.q-ver{font-size:12px;color:var(--text-2);margin-bottom:10px;line-height:1.55}
.q-ver b{color:var(--text);font-weight:600}
.q-hist{border:1px solid var(--border);border-left:2px solid var(--danger-br);
border-radius:var(--radius);background:var(--surface-2);padding:10px 12px;margin-bottom:8px;
font-size:12.5px;line-height:1.55;color:var(--text-2)}
.q-hist b{color:var(--text);font-weight:600}
.q-hist q{color:var(--text);font-style:normal}
.q-hist-files{margin-top:6px;display:flex;gap:6px;flex-wrap:wrap}
/* ── attestation dialog ───────────────────────────────────────────── */
.q-cons{list-style:none;margin:2px 0 14px;padding:0;display:flex;flex-direction:column;gap:7px}
.q-cons li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.q-cons li svg{flex:none;margin-top:2px;color:var(--warn)}
.q-attest{border:1px solid var(--border-2);border-radius:var(--radius-lg);background:var(--surface-2);
padding:13px 14px;margin-bottom:4px}
.q-attest-h{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
color:var(--text-3);margin-bottom:7px}
.q-attest-t{margin:0 0 11px;font-size:13px;font-weight:400;line-height:1.6;color:var(--text)}
.q-attest-ck{display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.55;
color:var(--text);cursor:pointer;border-top:1px solid var(--border);padding-top:11px}
.q-attest-ck input{margin:2px 0 0;flex:none;width:15px;height:15px;accent-color:var(--accent);cursor:pointer}
.q-attest-sig{font-size:11.5px;color:var(--text-3);margin-top:9px;line-height:1.5}
/* ── certified-by footer line ─────────────────────────────────────── */
.q-certline{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.55;
color:var(--text-2);border-top:1px solid var(--border);padding-top:11px;margin-top:12px}
.q-certline svg{flex:none;margin-top:2px;color:var(--ok)}
.q-certline b{color:var(--text);font-weight:600}
.q-certline .q-attested{display:block;margin-top:3px;color:var(--text-3)}
/* ── document preview (the artifact being certified) ──────────────── */
.q-doc{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-lg);
padding:12px;display:flex;justify-content:center}
.q-doc-frame{width:100%;max-width:660px;aspect-ratio:8.5/11;border:1px solid var(--border-2);
border-radius:var(--radius);background:#fff;display:block} /* #fff = paper, not a theme colour */
.q-doc-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
font-size:12px;color:var(--text-3);margin-bottom:9px}
.q-doc-h b{color:var(--text);font-weight:600}
/* ── misc ─────────────────────────────────────────────────────────── */
.q-card-head-r{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.q-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;
margin-top:14px;padding-top:13px;border-top:1px solid var(--border);flex-wrap:wrap}
.q-foot-l{font-size:12.5px;color:var(--text-2);line-height:1.5}
.q-foot-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.q-sub-count{font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.q-sub-count.ready{color:var(--ok)}
@media (max-width:1024px){
.q-steps{gap:8px 0}
.q-step-ln{width:14px;margin:0 6px}
.q-doc-frame{max-width:100%}
.q-emp-list{margin-left:0}
}
/* ── expanded admin package body ──────────────────────────────────── */
.q-pkg-body{margin:4px 0 10px 34px;border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface);padding:0 12px 12px}
/* .q-emp-list already carries its own 34px indent in styles.css; inside the
package body it is already indented, so remove the second indent. */
.q-pkg-body .q-emp-list{margin-left:0;margin-right:0}
@media (max-width:1024px){ .q-pkg-body{margin-left:0} }
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-settings.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
mod-settings.css — module CSS for js/settings.js (MOBBIN audit §13)
Loads AFTER css/styles.css. Either concatenated into audit-additions.css
by the build, or injected once by settingsEnsureCss() when it is not.
The marker below is how settings.js tells the two cases apart, so the
rules can never load twice.
Tokens only. The single exception is the theme-preview thumbnail, which
has to paint the LIGHT theme while the app is dark and the DARK theme
while the app is light — a token would resolve to the current theme and
show two identical cards. Those four literals are copied from the
:root / [data-theme=dark] surface + border tokens in styles.css and are
used for nothing else.
═══════════════════════════════════════════════════════════════════════ */
:root{ --mod-settings:1; }
/* ── shell: left sub-nav + one content column ───────────────────────── */
.stg-shell{display:grid;grid-template-columns:196px minmax(0,1fr);gap:26px;align-items:start}
.stg-nav{position:sticky;top:0;display:flex;flex-direction:column;gap:2px}
.stg-nav-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);padding:0 10px;margin:14px 0 6px}
.stg-nav-label:first-child{margin-top:0}
.stg-nav-item{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 10px;border:1px solid transparent;border-radius:var(--radius);background:transparent;color:var(--text-2);font:500 13px/1.2 var(--font);cursor:pointer;transition:background .15s,color .15s,border-color .15s}
.stg-nav-item:hover{background:var(--surface-2);color:var(--text)}
.stg-nav-item.on{background:var(--surface);border-color:var(--border);color:var(--text);font-weight:600}
.stg-nav-item .ui-ic{color:var(--text-3);flex-shrink:0}
.stg-nav-item.on .ui-ic{color:var(--text-2)}
.stg-main{max-width:720px;min-width:0}
.stg-head{margin-bottom:16px}
.stg-head h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;color:var(--text)}
.stg-head p{margin:3px 0 0;font-size:12px;color:var(--text-3);line-height:1.5}
/* ── generic pieces ─────────────────────────────────────────────────── */
.stg-note{font-size:12px;color:var(--text-3);line-height:1.55;margin-top:10px}
.stg-note strong{color:var(--text-2);font-weight:600}
.stg-val{font-size:13px;color:var(--text);font-weight:500;text-align:right;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stg-val-sub{font-size:11px;color:var(--text-3);font-weight:400;margin-top:2px;text-align:right}
.stg-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.stg-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stg-fixed{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-3);border:1px solid var(--border);background:var(--surface-2);border-radius:var(--radius);padding:3px 8px;white-space:nowrap}
.stg-fixed .ui-ic{color:var(--text-3)}
.stg-off{font-size:12px;color:var(--text-3);text-align:right}
/* ── theme picker: three cards with real miniature previews ─────────── */
.stg-themes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.stg-theme{border:1px solid var(--border-2);border-radius:var(--radius-lg);padding:8px;background:var(--surface);color:var(--text);text-align:left;cursor:pointer;font-family:var(--font);transition:border-color .15s,box-shadow .15s}
.stg-theme:hover{border-color:var(--text-3)}
.stg-theme.active,.stg-theme[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.stg-theme .stg-prev{height:54px;border-radius:5px;border:1px solid var(--border);display:flex;overflow:hidden;margin-bottom:8px}
.stg-theme .stg-prev i{display:block}
.stg-theme .stg-prev .a{width:28%;height:100%}
.stg-theme .stg-prev .b{flex:1;height:100%;position:relative}
.stg-theme .stg-prev .b::after{content:"";position:absolute;left:9px;top:10px;right:9px;height:6px;border-radius:2px;background:currentColor;opacity:.22}
.stg-theme .n{font-size:12px;font-weight:600}
.stg-theme .s{font-size:11px;color:var(--text-3);margin-top:1px}
/* literal theme surfaces — see the header note */
.stg-prev-l{color:#14171f}
.stg-prev-l .a{background:#ffffff;border-right:1px solid #e3e4e8}
.stg-prev-l .b{background:#f5f5f6}
.stg-prev-d{color:#e8eaee}
.stg-prev-d .a{background:#12151a;border-right:1px solid #252a33}
.stg-prev-d .b{background:#0b0d11}
.stg-prev-s{color:#8a919d}
.stg-prev-s .a{background:linear-gradient(135deg,#ffffff 50%,#12151a 50%)}
.stg-prev-s .b{background:linear-gradient(135deg,#f5f5f6 50%,#0b0d11 50%)}
/* ── notification inventory ─────────────────────────────────────────── */
.stg-table-wrap{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius)}
.stg-table{width:100%;border-collapse:collapse;font-size:13px}
.stg-table th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:9px 12px;border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap}
.stg-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--text-2);vertical-align:top;line-height:1.45}
.stg-table tr:last-child td{border-bottom:none}
.stg-table td.stg-c{text-align:center;white-space:nowrap}
.stg-table .stg-group td{background:var(--surface-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:7px 12px}
.stg-evt{color:var(--text);font-weight:500}
.stg-evt-sub{font-size:11px;color:var(--text-3);margin-top:2px}
/* ── audit log ──────────────────────────────────────────────────────── */
.stg-filters{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin-bottom:12px}
.stg-filters .field{margin-bottom:0}
.stg-filters .field.grow{flex:1;min-width:150px}
.stg-filters .field.date{width:140px}
.stg-when{white-space:nowrap;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;color:var(--text-2)}
.stg-ba{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:3px}
.stg-ba code{font-family:var(--font-mono);font-size:11px;border:1px solid var(--border);background:var(--surface-2);border-radius:4px;padding:1px 5px;color:var(--text-2);max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;vertical-align:middle}
.stg-ba .stg-arrow{color:var(--text-3);font-size:11px}
.stg-onbehalf{display:inline-flex;align-items:center;gap:4px;font-size:11px;color:var(--warn);margin-top:2px}
@media (max-width:1024px){
.stg-shell{grid-template-columns:170px minmax(0,1fr);gap:18px}
}
@media (max-width:820px){
.stg-shell{grid-template-columns:minmax(0,1fr)}
.stg-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.stg-nav-label{display:none}
.stg-nav-item{width:auto;border-color:var(--border)}
.stg-themes{grid-template-columns:repeat(2,minmax(0,1fr))}
.stg-grid2{grid-template-columns:minmax(0,1fr)}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/mod-setup.css
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
mod-setup.css — onboarding wizard + persistent setup checklist
Owner: js/setup.js. MOBBIN-AUDIT §3 and item 9 of the ten.
Tokens only. Both themes work because nothing here is a literal colour.
Meant to be concatenated into css/audit-additions.css; until then setup.js
loads it directly and uses the probe below to avoid double-loading.
═══════════════════════════════════════════════════════════════════════ */
.mod-setup-probe{--mod-setup:1}
/* ── the two-column wizard shell ─────────────────────────────────── */
.wizard-box.wiz-wide{
width:960px;max-width:94vw;padding:0;overflow:hidden;
display:grid;grid-template-columns:224px minmax(0,1fr);align-items:stretch;
}
.wiz-wide .wiz-rail{
background:var(--surface-2);border-right:1px solid var(--border);
padding:26px 20px;display:flex;flex-direction:column;gap:20px;min-width:0;
}
.wiz-wide .wiz-rail-logo{margin:0;text-align:left}
.wiz-wide .wiz-rail-logo .brand{font-size:16px}
.wiz-wide .wiz-rail-logo .sub{font-size:11px;color:var(--text-3);letter-spacing:.06em;text-transform:uppercase}
.wiz-prog{display:flex;flex-direction:column;gap:7px}
.wiz-prog-track{height:4px;border-radius:2px;background:var(--surface-3);overflow:hidden}
.wiz-prog-track > i{display:block;height:100%;background:var(--ink);transition:width .25s ease}
.wiz-prog-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);font-variant-numeric:tabular-nums}
.wiz-prog-label span{font-weight:500;color:var(--text-3)}
.wiz-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.wiz-step{
display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:var(--radius);
font-size:13px;color:var(--text-3);line-height:1.3;
}
.wiz-step.jump{cursor:pointer}
.wiz-step.jump:hover{background:var(--surface-3);color:var(--text)}
.wiz-step.jump:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wiz-step.current{color:var(--text);font-weight:600;background:var(--surface-3)}
.wiz-step.done{color:var(--text-2)}
.wiz-step.skipped{color:var(--text-3)}
.wiz-step-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wiz-step-note{font-size:11px;color:var(--text-3);flex:0 0 auto}
.wiz-mark{
flex:0 0 auto;width:16px;height:16px;border-radius:50%;
border:1px solid var(--border-2);display:inline-flex;align-items:center;justify-content:center;
color:var(--on-ink);background:transparent;
}
.wiz-mark.current{border-color:var(--ink);background:var(--ink)}
.wiz-mark.done{border-color:var(--ok);background:var(--ok)}
.wiz-mark.done svg{width:11px;height:11px;stroke:var(--on-ink)}
.wiz-mark.skipped{border-style:dashed;border-color:var(--warn)}
/* ── the step body column; the action row never scrolls away ─────── */
.wiz-wide .wiz-main{
display:flex;flex-direction:column;min-width:0;
max-height:92vh;padding:28px 30px 24px;
}
.wiz-wide .wiz-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding-right:2px}
.wiz-wide .wiz-compact{display:none}
.wiz-wide .wiz-actions{flex:0 0 auto}
.wiz-wide .wiz-reqs,.wiz-wide .wiz-err,.wiz-wide .wiz-skip{flex:0 0 auto}
.wiz-row-2{display:flex;gap:10px}
.wiz-row-2 .field{flex:1;min-width:0}
.wiz-help{font-size:11px;color:var(--text-3);margin-top:4px;line-height:1.5}
.wiz-sub-label{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin:14px 0 8px}
.wiz-card{border:1px solid var(--border);border-radius:var(--radius-lg);padding:11px 12px;margin-bottom:9px}
/* ── error + live requirements ───────────────────────────────────── */
.wiz-err{
font-size:12px;color:var(--danger);margin-top:12px;padding:9px 12px;
background:var(--danger-bg);border:1px solid var(--danger-br);border-radius:var(--radius);line-height:1.5;
}
.wiz-reqs{margin-top:12px}
.wiz-reqs:empty{display:none}
.wiz-reqs-title{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
.wiz-reqs ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px}
.wiz-reqs li{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3)}
.wiz-reqs li.ok{color:var(--text-2)}
.wiz-reqs li svg{width:12px;height:12px;stroke:var(--ok)}
.wiz-reqs li .ring{width:11px;height:11px;border-radius:50%;border:1px solid var(--border-2);display:inline-block}
/* ── skip for now ────────────────────────────────────────────────── */
.wiz-skip{text-align:center;margin-top:12px}
.wiz-skip-link{
background:none;border:none;padding:2px 6px;font-family:var(--font);font-size:12px;
color:var(--text-2);text-decoration:underline;text-underline-offset:2px;cursor:pointer;border-radius:var(--radius);
}
.wiz-skip-link:hover{color:var(--text)}
.wiz-skip-link:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wiz-skip-note{font-size:11px;color:var(--text-3);margin-top:3px}
/* ── pay-period step ─────────────────────────────────────────────── */
.wiz-callout{
display:flex;align-items:flex-start;gap:8px;font-size:12px;line-height:1.5;
padding:9px 11px;border-radius:var(--radius);margin-bottom:16px;
background:var(--surface-2);border:1px solid var(--border);color:var(--text-2);
}
.wiz-callout svg{flex:0 0 auto;margin-top:1px}
.wiz-callout.warn{background:var(--warn-bg);border-color:var(--warn-br);color:var(--warn)}
.wiz-callout.warn svg{stroke:var(--warn)}
.wiz-readonly{
display:flex;align-items:baseline;justify-content:space-between;gap:12px;
border:1px solid var(--border);border-radius:var(--radius);padding:9px 12px;margin-bottom:8px;background:var(--surface-2);
}
.wiz-readonly .k{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.wiz-readonly .v{font-size:13px;color:var(--text)}
.wiz-period-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.wiz-period-card{border:1px solid var(--border);border-radius:var(--radius);padding:9px 11px;min-width:0}
.wiz-period-card .n{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);margin-bottom:3px}
.wiz-period-card .r{font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}
.wiz-period-card .ui-period{font-size:12px}
/* ── funds step: colour / name / short code / remove ─────────────── */
.wiz-fund-head,.wiz-fund-row{
display:grid;grid-template-columns:34px minmax(0,1fr) 104px 32px;gap:8px;align-items:center;
}
.wiz-fund-head{padding:0 2px 5px}
.wiz-fund-head span{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.wiz-fund-head .c-code{text-align:left}
.wiz-fund-row{
border:1px solid var(--border);border-radius:var(--radius);padding:7px 8px;margin-bottom:6px;
}
.wiz-fund-color{
width:30px;height:30px;border:1px solid var(--border);border-radius:var(--radius);
background:var(--surface);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;
}
.wiz-fund-color:hover{border-color:var(--border-2)}
.wiz-fund-color:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.wiz-fund-color .sw{width:14px;height:14px;border-radius:50%;display:block}
.wiz-fund-code{text-transform:uppercase;letter-spacing:.04em;font-variant-numeric:tabular-nums}
.wiz-fund-palette{grid-column:1 / -1;margin-top:6px;padding-top:7px;border-top:1px solid var(--border)}
/* ── review step ─────────────────────────────────────────────────── */
.wiz-summary{border:1px solid var(--border);border-radius:var(--radius-lg);padding:4px 16px;margin-bottom:14px}
.wiz-summary-row .v{text-align:right;max-width:64%}
.wiz-summary-row .m{color:var(--text-3)}
.wiz-tagged{display:inline-block;margin-left:6px}
.wiz-tagged:first-child{margin-left:0}
.wiz-tagged b{font-variant-numeric:tabular-nums;letter-spacing:.04em}
.wiz-ghost-btn{
background:none;border:1px solid var(--border);border-radius:var(--radius);
font-family:var(--font);font-size:11px;font-weight:600;color:var(--text-2);
padding:2px 8px;cursor:pointer;margin-left:6px;
}
.wiz-ghost-btn:hover{border-color:var(--border-2);color:var(--text);background:var(--surface-2)}
.wiz-cert-edit{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
.wiz-cert-edit label{font-size:11px;color:var(--text-3);display:flex;flex-direction:column;gap:3px;text-align:left}
.wiz-cert-edit input{
font-family:var(--font);font-size:12px;padding:5px 8px;border:1px solid var(--border);
border-radius:var(--radius);background:var(--input-bg);color:var(--text);
}
.wiz-next-list{margin:0 0 2px 16px;padding:0;font-size:12px;color:var(--text-2);line-height:1.8}
/* ── narrow: single column, compact dot progress ─────────────────── */
@media (max-width:900px){
.wizard-box.wiz-wide{grid-template-columns:minmax(0,1fr);width:520px}
.wiz-wide .wiz-rail{display:none}
.wiz-wide .wiz-compact{display:block}
.wiz-wide .wiz-main{padding:28px 24px 22px}
.wiz-period-cards{grid-template-columns:minmax(0,1fr)}
.wiz-fund-head,.wiz-fund-row{grid-template-columns:30px minmax(0,1fr) 84px 28px}
}
/* ═══════════════════════════════════════════════════════════════════
PERSISTENT "FINISH SETTING UP" CHECKLIST (settings card + top-bar pill)
═══════════════════════════════════════════════════════════════════ */
.su-ck-card{
border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface);margin-bottom:16px;overflow:hidden;
}
.su-ck-head{display:flex;align-items:center;gap:10px;padding:12px 14px 10px}
.su-ck-title{flex:1 1 auto;font-size:13px;font-weight:600;color:var(--text)}
.su-ck-title span{font-weight:400;color:var(--text-3);font-variant-numeric:tabular-nums}
.su-ck-dismiss{
flex:0 0 auto;background:none;border:none;padding:4px;border-radius:var(--radius);
color:var(--text-3);cursor:pointer;line-height:0;
}
.su-ck-dismiss:hover{background:var(--surface-3);color:var(--text)}
.su-ck-dismiss:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.su-ck-track{height:4px;background:var(--surface-3)}
.su-ck-track > i{display:block;height:100%;background:var(--ink);transition:width .25s ease}
.su-ck-row{
display:grid;grid-template-columns:20px minmax(0,1fr) auto auto;gap:12px;align-items:center;
padding:11px 14px;border-top:1px solid var(--border);
}
.su-ck-row:first-child{border-top:none}
.su-ck-ic{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;line-height:0}
.su-ck-ic .ring{width:14px;height:14px;border-radius:50%;border:1px solid var(--border-2);display:block}
.su-ck-ic.done{border-radius:50%;background:var(--ok)}
.su-ck-ic.done svg{width:12px;height:12px;stroke:var(--on-ink)}
.su-ck-text{min-width:0}
.su-ck-text .t{font-size:13px;color:var(--text);font-weight:500}
.su-ck-text .d{font-size:12px;color:var(--text-3);margin-top:2px;line-height:1.45}
.su-ck-row.is-done .t{color:var(--text-3)}
.su-ck-est{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.su-ck-act{display:flex;gap:6px;align-items:center;white-space:nowrap}
.su-ck-done-word{font-size:12px;color:var(--text-3)}
.su-ck-btn{
font-family:var(--font);font-size:12px;font-weight:600;color:var(--text);
background:var(--surface);border:1px solid var(--border-2);border-radius:var(--radius);
padding:5px 10px;cursor:pointer;
}
.su-ck-btn:hover{background:var(--surface-2)}
.su-ck-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.su-ck-btn.ghost{border-color:var(--border);color:var(--text-3);font-weight:500}
.su-ck-pill{
font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-2);
background:var(--surface-2);border:1px solid var(--border);border-radius:999px;
padding:4px 10px;cursor:pointer;font-variant-numeric:tabular-nums;
}
.su-ck-pill:hover{color:var(--text);border-color:var(--border-2)}
.su-ck-pill:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:1024px){
.su-ck-row{grid-template-columns:20px minmax(0,1fr) auto;row-gap:8px}
.su-ck-est{grid-column:3}
.su-ck-act{grid-column:2 / -1;justify-content:flex-start}
}
/* remove-row buttons now carry an inline SVG instead of a glyph character */
.wiz-row-del svg{display:block}
.wiz-fund-row .wiz-row-del{padding:5px;display:flex;align-items:center;justify-content:center}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-calendar.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
p-calendar.css — Calendar View skin (design/DIRECTION.md v2)
Loaded AFTER css/styles.css and css/audit-additions.css, by
js/calendar.js, so it may override both and nothing else has to move.
EVERY rule is scoped to #view-calendar. The rail reuses shared class
names (.entry-row, .entry-fund-tag, .fund-chip) that approvals.js and
manage.js also render, so an unscoped rule here would silently restyle
two screens this module does not own.
Colour comes from tokens only. Light and dark both work because the
tokens themselves flip under [data-theme=dark]; the two explicit dark
rules at the bottom exist only where a value cannot be a token.
═══════════════════════════════════════════════════════════════════ */
/* ── 1. HEADER — a bare noun, nothing beneath it ────────────────────
The owner removed the month strap outright. calRenderHeader() no
longer emits .cal-title-nums; this rule is the belt to that braces. */
#view-calendar .cal-header{align-items:center;margin-bottom:16px;gap:12px}
#view-calendar .cal-title{flex-direction:row;align-items:center;gap:10px}
#view-calendar .cal-title-main{font-size:20px;line-height:1.3;font-weight:600;
letter-spacing:-.015em;color:var(--text)}
#view-calendar .cal-title-nums,
#view-calendar .cal-missing-btn,
#view-calendar .cal-title .ui-period,
#view-calendar .cal-title .ui-asof{display:none}
/* month NAVIGATION keeps the month name — this is the only place it belongs */
#view-calendar .cal-controls{gap:6px}
#view-calendar .month-nav-label{min-width:124px;font-size:13.5px;font-weight:600;
color:var(--text);letter-spacing:-.01em;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
#view-calendar .cal-nav-btn{width:30px;height:30px;border-radius:var(--radius);
border-color:var(--border);box-shadow:var(--shadow-1)}
#view-calendar .cal-nav-btn:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
#view-calendar .cal-today-btn{height:30px;font-weight:600;border-color:var(--border);
box-shadow:var(--shadow-1)}
#view-calendar .cal-today-btn:hover{background:var(--accent-bg);border-color:var(--accent-br);
color:var(--accent-ink)}
/* ── 2. THE GRID — e1 card, one hairline between cells ──────────────── */
#view-calendar .cal-grid-wrap{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}
#view-calendar .cal-dow-row{background:var(--surface-2);padding:9px 0;
border-bottom:1px solid var(--border)}
#view-calendar .cal-dow{font-size:11px;line-height:1;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-3)}
#view-calendar .cal-dow-quota{letter-spacing:.06em}
/* day cells: e0 — a hairline and a ground, never a shadow */
#view-calendar .cal-cell{background:var(--surface);
transition:background .15s var(--ease,ease)}
#view-calendar .cal-cell:hover{background:var(--surface-2)}
#view-calendar .cal-cell.weekend-cell{background:var(--surface-2)}
#view-calendar .cal-cell.weekend-cell:hover{background:var(--surface-3)}
/* Days outside the month recede by TINT, not by opacity: a .4 alpha
dropped their hours figure below any readable contrast, and the first
and last rows print a real number there. */
#view-calendar .cal-cell.other-month{opacity:1;background:var(--surface-2)}
#view-calendar .cal-cell.other-month .cal-day-num{color:var(--text-3);font-weight:500}
#view-calendar .cal-cell.other-month .cal-tot-act{color:var(--text-3);font-weight:500}
#view-calendar .cal-day-num{font-size:12.5px;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
/* today / selected — the green spine is the ONE active marker (§4.4) */
#view-calendar .cal-cell.today::before{background:var(--accent);border-radius:0 2px 2px 0}
#view-calendar .cal-cell.selected{background:var(--accent-bg);
box-shadow:inset 0 0 0 2px var(--accent)}
#view-calendar .cal-cell.today .cal-day-num,
#view-calendar .cal-cell.selected .cal-day-num{background:var(--ink);color:var(--on-ink);
border-radius:50%;width:22px;height:22px;display:flex;align-items:center;justify-content:center}
/* The per-day guide comparison. It stays a 2px rule because it is the
grid's only at-a-glance shape and the key below the grid names it —
see the report for why this one edge rule survives §4.4. */
#view-calendar .cal-cell.day-complete{border-top:2px solid var(--ok)}
#view-calendar .cal-cell.day-incomplete{border-top:2px solid var(--warn)}
#view-calendar .cal-cell.day-over{border-top:2px solid var(--danger)}
#view-calendar .cal-cell.cal-day-missing{border-top:2px dashed var(--warn);
background:var(--warn-bg)}
#view-calendar .cal-cell.cal-day-missing:hover{background:var(--warn-bg)}
/* the printed day total: posted in ink, the guide quiet beside it */
#view-calendar .day-total-badge{font-size:11.5px;line-height:1;
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
#view-calendar .cal-tot-act{color:var(--text);font-weight:600}
#view-calendar .cal-tot-sep,
#view-calendar .cal-tot-guide{color:var(--text-3);font-weight:450}
/* the 3px stacked fund bar: fund colour used purely as a bar (allowed) */
#view-calendar .cal-bar{height:3px;border-radius:2px;gap:2px;margin:2px 0 3px}
/* ── 3. ENTRY CHIPS — the fund chip carries the colour ───────────────
Not the pill's ground and not a coloured left rule: forty tinted pills
was the noise, and §4.4 reserves edge rules for the active thing. */
#view-calendar .cal-entries{gap:3px}
#view-calendar .cal-entry-pill{gap:5px;min-height:20px;padding:1px 5px;
border-radius:6px;background:var(--surface-2);border:1px solid var(--border)}
#view-calendar .cal-entry-pill.cal-pill-fund{border-left-width:1px;
border-left-style:solid;border-left-color:var(--border)}
#view-calendar .cal-entry-pill .fund-chip{width:15px;height:15px;font-size:9px;
border-radius:4px;letter-spacing:0}
#view-calendar .cal-entry-pill .pill-fund{flex:1 1 auto;min-width:0;font-size:11px;
font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#view-calendar .cal-entry-pill .pill-hrs{flex:none;font-size:11px;font-weight:600;
color:var(--text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
#view-calendar .cal-entry-pill.leave-pill{background:var(--leave-bg);
border-color:var(--leave-br)}
#view-calendar .cal-entry-pill.leave-pill .pill-fund{color:var(--leave)}
/* Pending is a dashed edge plus the existing glyph — never a .5 opacity,
which took the hours figure under 3:1 on its own ground. */
#view-calendar .cal-entry-pill.cal-pill-pending{opacity:1;border-style:dashed}
#view-calendar .cal-entry-pill.cal-pill-rejected{border-style:solid}
#view-calendar .cal-more-btn{font-size:11px;font-weight:600;color:var(--text-3)}
#view-calendar .cal-more-btn:hover{color:var(--accent-ink);text-decoration:none}
#view-calendar .cal-add-btn{border-radius:5px}
#view-calendar .cal-missing{font-size:10.5px;font-weight:600;letter-spacing:.02em}
/* ── 4. THE WEEK GUTTER ─────────────────────────────────────────────
A header always sits lighter than its content: the gutter is the row's
header, so it takes --surface-2 against the cells' --surface. */
#view-calendar .cal-week{background:var(--surface-2);position:relative;gap:1px}
#view-calendar .cal-week:hover{background:var(--surface-3)}
#view-calendar .cal-week.sel-week{background:var(--accent-bg)}
#view-calendar .cal-week.sel-week::before{content:'';position:absolute;left:0;top:0;bottom:0;
width:3px;background:var(--accent);border-radius:0 2px 2px 0}
#view-calendar .cal-week-posted{font-size:13px;font-weight:600;color:var(--text);
letter-spacing:-.01em}
#view-calendar .cal-week-quota{font-size:10.5px;font-weight:500;color:var(--text-3)}
#view-calendar .cal-week-set{font-size:9.5px;letter-spacing:.06em;
background:var(--accent-bg);color:var(--accent-ink);border-radius:4px}
#view-calendar .cal-week-gear{border-radius:5px;border-color:var(--border);
background:var(--surface);color:var(--text-3)}
#view-calendar .cal-week-gear:hover{color:var(--accent-ink);border-color:var(--accent-br);
background:var(--surface)}
/* ── 5. THE COLOUR KEY ──────────────────────────────────────────────
Three words, micro, --text-3. Rewritten by calRenderLegend(). */
#view-calendar .cal-legend{gap:14px;margin-top:10px;padding:0 2px}
#view-calendar .cal-key{font-size:11.5px;font-weight:450;color:var(--text-3);gap:6px}
#view-calendar .cal-key-dot{width:8px;height:8px;border-radius:3px;flex:none}
/* ── 6. THE SELECTED-DAY RAIL ───────────────────────────────────────── */
#view-calendar .entries-panel{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:16px 16px 8px}
#view-calendar .entries-panel-header{margin-bottom:12px;gap:12px}
#view-calendar .cal-day-name{font-size:17px;line-height:1.3;font-weight:600;
letter-spacing:-.015em;color:var(--text)}
#view-calendar .cal-day-step{width:26px;height:26px;border-color:var(--border);
border-radius:var(--radius);box-shadow:var(--shadow-1)}
#view-calendar .cal-day-step:hover{background:var(--surface-2);border-color:var(--border-2);color:var(--text)}
#view-calendar .cal-day-stat{font-size:13.5px;font-weight:600;color:var(--text-3);
padding-left:2px}
#view-calendar .cal-day-stat .cal-tot-act{color:var(--text)}
/* rows: the closed-row spec — one line of facts, a number, a pill */
#view-calendar .entry-row{min-height:52px;gap:10px;padding:8px 12px;
border:1px solid var(--border);border-radius:var(--radius);margin-bottom:8px;
background:var(--surface);transition:background .15s var(--ease,ease),box-shadow .15s var(--ease,ease)}
#view-calendar .entry-row:hover{background:var(--surface-2)}
#view-calendar .entry-row:focus-visible{box-shadow:inset 0 0 0 2px var(--brand)}
#view-calendar .entry-activity{font-size:15px;line-height:1.35;font-weight:600;
letter-spacing:-.01em;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-calendar .entry-desc{font-size:11.5px;line-height:1.4;color:var(--text-3);margin-top:1px;
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-calendar .entry-dur{font-size:15px;line-height:1;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
#view-calendar .entry-del{font-size:11.5px;font-weight:600;border-radius:var(--radius)}
/* the fund chip + name, the one way a fund is written (§4.1). The old
pill ground is dropped so the chip is the only coloured thing. */
#view-calendar .cal-fund-item{display:inline-flex;align-items:center;gap:8px;
min-width:0;max-width:210px;padding:0;background:transparent;border:0}
#view-calendar .cal-fund-item .cal-fund-name{font-size:13.5px;line-height:1.35;
font-weight:600;letter-spacing:-.01em;color:var(--text-2);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#view-calendar .cal-fund-item.leave-tag .cal-fund-name{color:var(--leave)}
/* ── 7. EMPTY STATES — glyph, one line, one button. No paragraph. ──── */
#view-calendar .ui-empty-body{display:none}
#view-calendar .cal-month-empty{padding:16px}
/* ── 8. WIDTH RULES (1024px is a stated must-survive width) ────────── */
@media (max-width:1180px){
#view-calendar .cal-entry-pill{gap:4px;padding:1px 4px}
#view-calendar .cal-entry-pill .pill-fund{font-size:10.5px}
#view-calendar .month-nav-label{min-width:104px;font-size:13px}
}
@media (max-width:1024px){
#view-calendar .cal-title-main{font-size:18px}
/* The name TRUNCATES, it is never display:none — the text has to stay
in the DOM for a screen reader browsing the cell. The chip carries
the fund identity once the name has ellipsed away. */
#view-calendar .cal-entry-pill .pill-fund{font-size:10.5px}
#view-calendar .cal-fund-item{max-width:150px}
#view-calendar .entry-activity{font-size:14px}
}
/* ── 9. DARK ───────────────────────────────────────────────────────
Only the two places a token cannot do the job on its own: a fund's
8%-alpha tint is nearly invisible on a dark ground, so the chip leans
on its border there, and the missing-day wash needs the dark warn bg. */
[data-theme=dark] #view-calendar .cal-entry-pill .fund-chip{
background:transparent;border-width:1px}
[data-theme=dark] #view-calendar .cal-fund-item .fund-chip{
background:transparent;border-width:1px}
[data-theme=dark] #view-calendar .cal-cell.cal-day-missing,
[data-theme=dark] #view-calendar .cal-cell.cal-day-missing:hover{background:var(--warn-bg)}
@media (prefers-reduced-motion:reduce){
#view-calendar .cal-cell,#view-calendar .entry-row{transition:none}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-entries.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
p-entries.css — the NEW ENTRY / EDIT ENTRY panel only.
Owned by js/entries.js. Loaded after css/styles.css and
css/audit-additions.css, so it wins on ties by order alone — nothing
here uses !important and nothing here redefines a shared component.
Every colour is a token from the DIRECTION palette, so light and dark
both work with no second block: [data-theme=dark] is handled once, in
css/styles.css, by the tokens themselves.
═══════════════════════════════════════════════════════════════════ */
/* ── the running total slab (DIRECTION §4.2) ───────────────────────── */
.ent-slabrow{align-items:center;margin-bottom:14px}
.ent-slab-note{font-size:11.5px;line-height:1.4;color:var(--warn);
font-variant-numeric:tabular-nums}
.ent-slab-note:empty{display:none}
/* ── who is this for (admin posting on someone else's sheet) ───────── */
.ent-ownerrow{margin-bottom:14px}
.ent-ownerrow .ent-cap{margin-top:0}
.ent-adminnote{display:flex;align-items:center;gap:7px;margin-top:7px;
font-size:11.5px;line-height:1.4;color:var(--text-3)}
.ent-admintag{flex:none;height:18px;padding:0 7px;border-radius:var(--radius);
display:inline-flex;align-items:center;
background:var(--accent-bg);border:1px solid var(--accent-br);color:var(--accent-ink);
font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
/* ── the time-block accordion (DIRECTION §5) ───────────────────────── */
/* exactly one block open; the shared .ui-acc supplies the look, this only
fits it into a 470px modal and strips the old boxed .fund-block frame. */
#fund-blocks{margin-bottom:12px}
#fund-blocks .ui-acc-value{flex:none;display:inline-flex;align-items:center}
#fund-blocks .ui-acc-body{padding:14px}
#fund-blocks .ui-acc-item.is-open{margin:10px}
#fund-blocks .fund-block{background:transparent;border:0;border-radius:0;
padding:0;margin:0}
#fund-blocks .fund-block .ent-cap:first-of-type{margin-top:0}
#fund-blocks .fb-head{margin:0 0 10px}
#fund-blocks .fb-head .blk-seg{flex:1;max-width:none;margin:0}
/* the row's leading fund chip sits in the accordion's 28px lead slot */
#fund-blocks .ui-acc-lead{width:24px}
#fund-blocks .ui-acc-lead .fund-chip{width:20px;height:20px}
/* remove-a-block: a text button in the body, never an X in the header
(the header IS a button — a button inside it would be invalid HTML) */
.blk-actions{display:flex;justify-content:flex-end;margin-top:12px}
.blk-remove{padding:6px 10px;border:0;border-radius:var(--radius);background:transparent;
color:var(--text-3);font-family:var(--font);font-size:12.5px;font-weight:500;cursor:pointer;
transition:background .15s,color .15s}
.blk-remove:hover{background:var(--danger-bg);color:var(--danger)}
.blk-remove:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* ── the hours drag track ──────────────────────────────────────────── */
/* .hb-range / .hb-track / .hb-bubble / .hb-scale are defined in
css/styles.css §5. This only reserves room for the bubble and lays the
two end labels out, because the pre-audit .hb-scale rule positioned its
spans absolutely and this markup has no left: on them. */
.hb{margin-top:16px}
.hb-track{margin-top:26px}
.hb-ends{position:static;display:flex;justify-content:space-between;
height:auto;margin-top:4px}
.hb-ends span{position:static;transform:none;font-variant-numeric:tabular-nums}
.hb-num{font-feature-settings:"tnum" 1}
.hb-otline{justify-content:flex-start;margin-top:12px}
/* ── soft warnings: one short line each, never a panel ─────────────── */
.ent-warns{margin:0 0 14px}
.ent-warn{font-size:11.5px;line-height:1.45;color:var(--warn);
font-variant-numeric:tabular-nums}
.ent-warn+.ent-warn{margin-top:3px}
/* ── errors (DIRECTION §6): inline, quiet, never a wall of red ─────── */
.ent-formerr{margin-right:auto;text-align:left;max-width:52%;
font-size:11.5px;line-height:1.35;color:var(--danger)}
.ent-formerr:empty{display:none}
.btn-save[disabled],.btn-save.is-blocked{opacity:.5;cursor:not-allowed}
/* a block holding an error is marked on its fields only — the row itself
gets one hairline, not a red fill */
.fund-block.has-error{border-color:transparent}
/* ── footer ────────────────────────────────────────────────────────── */
.ent-foot{margin-top:14px}
.ent-foot .modal-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* ── fallback when uiAccordion is unavailable: everything stacked ───── */
.ent-plainblk{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:14px;margin-bottom:10px}
.ent-plainblk-head{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.ent-plainblk-name{flex:1 1 auto;min-width:0;font-size:15px;font-weight:600;
letter-spacing:-.01em;color:var(--text);
overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ── narrow screens ────────────────────────────────────────────────── */
@media (max-width:480px){
#fund-blocks .ui-acc-item.is-open{margin:8px}
#fund-blocks .ui-acc-body{padding:12px}
.ent-formerr{max-width:100%;order:-1;width:100%;margin-bottom:4px}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-approvals.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
p-approvals.css — the Approvals queue and My / All Entries.
Owned by js/approvals.js, injected by apEnsureModCss(). It sits AFTER
styles.css and audit-additions.css, so it may only re-value the two
screens it owns. It renames nothing and removes nothing.
Follows design/DIRECTION.md: green identity, the depth ladder, the one
accordion, the fund chip, the hours slab, the capped bar.
═══════════════════════════════════════════════════════════════════════ */
/* the marker apEnsureModCss() probes, so the link is injected only once
and a build that concatenates this file makes the injection a no-op */
:root{--p-approvals:1}
/* ═══ SHARED-COMPONENT BRIDGE — TEMPORARY ═══════════════════════════════
js/ui.js and css/styles.css landed in this run with four class names
that do not agree. Neither file is mine to edit, and an approvals page
with an unstyled value column, an unstyled Simple/Advanced pill and
unstyled date inputs is a broken page, so these aliases carry the
ui.js spelling onto the styles.css rules. They are duplicates, never
overrides — delete this whole block the moment the two agree.
ui.js .ui-acc-value ← styles.css .ui-acc-num
ui.js .ui-vt-seg ← styles.css .ui-vt-btn
ui.js .ui-range-start/.ui-range-end ← styles.css .ui-range-date
ui.js .ui-range-to ← styles.css .ui-range-sep
ui.js .ui-range-dates ← styles.css .ui-range-label
ui.js .ui-acc-dense ← styles.css .ui-acc.is-dense
═════════════════════════════════════════════════════════════════════ */
.ui-acc-value{flex:none;font-size:15px;line-height:1;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;white-space:nowrap}
.ui-acc-dot{color:var(--text-3);margin:0 2px}
.ui-vt-seg{height:22px;padding:0 12px;border:0;border-radius:999px;background:transparent;
font-family:var(--font);font-size:12px;font-weight:600;line-height:1;color:var(--text-2);
cursor:pointer;white-space:nowrap;transition:background .15s,color .15s,box-shadow .15s}
.ui-vt-seg:hover{color:var(--text)}
.ui-vt-seg.is-active,.ui-vt-seg[aria-pressed=true]{
background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
.ui-vt-seg:focus-visible{outline:2px solid var(--brand)!important;outline-offset:1px!important}
.ui-range-start,.ui-range-end{height:28px;padding:0 8px;border:1px solid var(--border-2);
border-radius:var(--radius);background:var(--input-bg);color:var(--text);
font-family:var(--font);font-size:12.5px;font-variant-numeric:tabular-nums;outline:none;min-width:0}
.ui-range-start:focus,.ui-range-end:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.ui-range-to{font-size:11.5px;color:var(--text-3)}
.ui-range-dates{font-size:12.5px;font-weight:500;color:var(--text-3);margin-left:8px;
font-variant-numeric:tabular-nums;white-space:nowrap}
.ui-acc.ui-acc-dense .ui-acc-head{min-height:44px;padding:0 12px}
.ui-acc.ui-acc-dense .ui-acc-name{font-size:13.5px}
.ui-acc.ui-acc-dense .ui-acc-body{padding:12px}
/* ═══ end of the bridge ═══════════════════════════════════════════════ */
/* ── the toolbar both screens open with ───────────────────────────────
OWNER: "on the top dont over explain simply 'My Entries'". A bare noun,
the period control, the view switch. There is no room for a strap line
because there is no strap line. */
.ap-toolbar,.le-toolbar{margin-bottom:14px}
.ap-toolbar .ap-back{flex:none}
.ap-toolbar .ui-toolbar-title,.le-toolbar .ui-toolbar-title{margin-right:2px}
.ap-toolbar .ap-period{flex:none}
.le-toolbar .ui-range{flex:1 1 auto}
.le-toolbar .all-entries-actions{display:flex;align-items:center;gap:8px;flex:none}
/* the toggle is parked at the right end of the row */
.ap-toolbar>.ui-vt,.le-toolbar>.ui-vt{margin-left:auto}
/* Advanced animates the filter bar open; in Simple it stays in the DOM
(manage.js writes #entries-search into it) but is neither seen nor
reachable by the keyboard. */
.ui-adv:not(.is-open) .ui-adv-inner{visibility:hidden;margin-bottom:0;border-width:0}
.ui-adv-inner .dash-filters{margin:0;padding:0;background:none;border:0;box-shadow:none}
/* ── the hours slab row that carries each screen's one big number ───── */
.le-slab-row{align-items:center}
.le-facts{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
font-size:11.5px;line-height:1.4;color:var(--text-3)}
.le-facts .num{font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:600}
.le-fact{display:inline-flex;align-items:center;gap:4px;font-weight:600}
.le-fact.le-pending{color:var(--warn)}
.le-fact.le-sentback{color:var(--danger)}
/* ── APPROVALS: the accordion is the page ────────────────────────────── */
/* the group card wants air under the toolbar and the chips */
#approvals-wrap>.ui-acc{margin-top:4px}
/* nothing inside an open row may draw a second card edge */
#approvals-wrap .ui-acc-body .ap-card,
#approvals-wrap .ui-acc-body .ap-tblw{background:transparent;border:0;box-shadow:none}
/* body order: slab (+ capped bar), then the entries, then the actions */
.ap-body-top{display:flex;align-items:flex-start;gap:18px;flex-wrap:wrap;margin-bottom:14px}
.ap-body-top>.hours-slab{flex:none}
.ap-body-mix{flex:1 1 260px;min-width:220px}
.ap-body-mix .cap-legend{margin-top:10px}
.ap-body-mix .cap-legend-row{min-height:30px}
.ap-body-mix .cap-legend-name{font-size:13.5px}
/* the entries table inside a --surface-2 body steps back up to --surface */
.ui-acc-body .ap-tbl{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);overflow:hidden}
.ui-acc-body .ap-tbl th{background:var(--surface-2)}
.ui-acc-body .ap-tblw{border-radius:var(--radius);overflow:auto}
.ui-acc-body .ap-selbar{margin-bottom:10px}
/* ── the small permanent tags a row can carry ────────────────────────── */
/* "Admin" = typed by an administrator on someone else's timesheet.
Neutral, never green: green is reserved for approved / complete. */
.ap-tag-admin,.ap-tag-rework{display:inline-flex;align-items:center;height:18px;padding:0 7px;
margin-left:6px;border-radius:var(--radius);border:1px solid var(--border-2);
background:var(--surface-3);color:var(--text-2);
font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
white-space:nowrap;vertical-align:middle}
.ap-tag-rework{background:var(--warn-bg);border-color:var(--warn-br);color:var(--warn)}
/* ── quieter counters: the owner asked for fewer words, not fewer facts ── */
.ap-kpis{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.ap-kpi-s:empty{display:none}
.ap-bulkbar-l{font-size:11.5px;color:var(--text-3);font-variant-numeric:tabular-nums}
/* ── MY / ALL ENTRIES ────────────────────────────────────────────────── */
/* Simple has no checkbox column and no action column, so the remaining
columns must not stretch: the description absorbs the slack. */
.le-tbl .le-td-desc,.le-tbl th.le-desc-col{width:auto}
.le-tbl .fund-item-name{font-size:13.5px}
.le-totals td{font-weight:600;color:var(--text);background:var(--surface-2)}
/* the rework button never looks like the primary act on a locked record */
.le-td-do .btn-sm,.ap-td-do .btn-sm{white-space:nowrap}
/* ── the reason and rework dialogs ───────────────────────────────────── */
#rework-count{margin-top:5px;text-align:right;font-variant-numeric:tabular-nums}
/* ── 1100px, the stated must-survive width ───────────────────────────── */
@media (max-width:1100px){
.ap-body-top{gap:12px}
.ap-body-mix{flex-basis:100%}
.ap-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.le-slab-row{gap:10px}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-dashboard.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
p-dashboard.css — the Dashboard page only (js/dashboard.js).
Every rule is scoped to #dash-wrap, so nothing here can reach another
screen. Tokens only: no hard-coded colour except the two rgba tints
the fund chip needs, and those are computed from the fund's own colour
in JS and passed in as --fc / --fc-bg / --fc-bg-d.
Loaded after css/styles.css and css/audit-additions.css.
═══════════════════════════════════════════════════════════════════ */
/* ── header: a bare noun and the two controls ──────────────────────── */
#dash-wrap .dash-header{align-items:center;margin-bottom:14px}
#dash-wrap .dash-head-main{gap:0}
#dash-wrap .dash-actions{gap:10px}
#dash-wrap .print-btn{height:32px}
#dash-wrap .print-btn svg{width:15px;height:15px;flex:none}
/* the Simple / Advanced pill — ui.js renders .ui-vt-seg */
#dash-wrap .ui-vt{display:inline-flex;align-items:center;gap:2px;height:28px;padding:2px;flex:none;
background:var(--surface-3);border-radius:999px}
#dash-wrap .ui-vt-seg{height:22px;padding:0 12px;border:0;border-radius:999px;background:transparent;
font-family:var(--font);font-size:12px;font-weight:600;color:var(--text-3);cursor:pointer;
transition:background .15s,color .15s}
#dash-wrap .ui-vt-seg:hover{color:var(--text)}
#dash-wrap .ui-vt-seg.is-active,#dash-wrap .ui-vt-seg[aria-pressed=true]{
background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
#dash-wrap .ui-vt-seg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
/* ── SIMPLE: the period rail ───────────────────────────────────────── */
#dash-wrap .dash-rail{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;
padding:0 0 14px;margin-bottom:16px;border-bottom:1px solid var(--border)}
#dash-wrap .ui-range{display:flex;align-items:center;gap:2px;flex-wrap:wrap;min-width:0}
#dash-wrap .ui-range-rail{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
#dash-wrap .ui-range-seg{position:relative;height:28px;padding:0 10px;border:0;background:transparent;
font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text-3);cursor:pointer;
border-radius:var(--radius);transition:color .15s,background .15s}
#dash-wrap .ui-range-seg:hover{color:var(--text);background:var(--surface-2)}
#dash-wrap .ui-range-seg.is-active,#dash-wrap .ui-range-seg[aria-pressed=true]{color:var(--text)}
#dash-wrap .ui-range-seg.is-active::after,#dash-wrap .ui-range-seg[aria-pressed=true]::after{
content:"";position:absolute;left:9px;right:9px;bottom:1px;height:2px;border-radius:2px;
background:var(--accent)}
#dash-wrap .ui-range-seg:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
#dash-wrap .ui-range-custom{display:inline-flex;align-items:center;gap:6px;margin-left:6px}
#dash-wrap .ui-range-custom[hidden]{display:none!important}
#dash-wrap .ui-range-start,#dash-wrap .ui-range-end{height:28px;padding:0 8px;
border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface-2);
color:var(--text);font-family:var(--font);font-size:12px;font-variant-numeric:tabular-nums}
#dash-wrap .ui-range-start:focus,#dash-wrap .ui-range-end:focus{outline:none;
border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
#dash-wrap .ui-range-to{font-size:11.5px;color:var(--text-3)}
#dash-wrap .ui-range-dates{margin-left:auto;font-size:12.5px;color:var(--text-3);
font-variant-numeric:tabular-nums}
#dash-wrap .ui-range-dates .ui-period{font-size:12.5px;color:var(--text-3)}
/* ── SIMPLE: the primary card — TWO REAL COLUMNS ────────────────────
OWNER 2026-09-10: "the fund distribution should be a circle, and have
column since is too much dead space on dashboard". The card is one
e2 surface holding everything Simple has: the total and the donut in
the left column, the funds breakdown filling the right column. The
funds list no longer sits alone in a near-empty full-width block. */
#dash-wrap .dash-primary{display:grid;
grid-template-columns:minmax(210px,262px) minmax(0,1fr);
align-items:stretch;gap:20px 34px;background:var(--surface);
border-radius:var(--radius-xl);box-shadow:var(--shadow-2);
padding:22px 24px;margin-bottom:22px}
#dash-wrap .dash-primary-l{display:flex;flex-direction:column;align-items:flex-start;
gap:20px;min-width:0}
#dash-wrap .dash-primary-r{display:flex;flex-direction:column;min-width:0;
justify-content:center}
#dash-wrap .dash-slab{align-self:stretch}
#dash-wrap .dash-dist{min-width:0;width:100%}
/* the donut: the chart the printed report draws, scaled to the column */
#dash-wrap .dash-donut{margin-top:10px;width:100%;max-width:210px}
#dash-wrap .dash-donut svg{display:block;width:100%;height:auto}
/* the section label that replaces a sentence */
#dash-wrap .dash-eyebrow{display:block;font-size:11px;line-height:1;font-weight:600;
letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
#dash-wrap .dash-eyebrow-top{margin-bottom:8px}
/* ── SIMPLE: the funds list (chip · name · 12.0h · 24%) ──────────────
inside the primary card it is a bare list, never a card-in-a-card. */
#dash-wrap .dash-list-card{background:none;border:0;border-radius:0;
box-shadow:none;padding:0;margin:0}
#dash-wrap .dash-list-card{flex:1 1 auto;display:flex;flex-direction:column}
#dash-wrap .dash-list-card .cap-legend{margin-top:0;flex:1 1 auto}
/* the rows share out whatever height the donut column sets, so the right
column is filled top to bottom instead of floating in the middle */
#dash-wrap .dash-list-card .cap-legend-row{flex:1 1 auto;min-height:48px;max-height:74px;gap:11px}
#dash-wrap .dash-list-card .cap-legend-row:first-child{border-top:0}
/* the per-fund share track: fills the gap a wide column opens between the
fund name and its value, in the fund's own colour */
#dash-wrap .cap-legend-wide .cap-legend-name{flex:0 0 auto;width:222px;max-width:52%}
#dash-wrap .cap-legend-share{flex:1 1 auto;min-width:48px;max-width:300px;height:6px;
border-radius:3px;background:var(--surface-3);overflow:hidden;margin:0 4px}
#dash-wrap .cap-legend-share > i{display:block;height:100%;border-radius:3px;
background:var(--seg,var(--brand))}
@media (max-width:900px){
#dash-wrap .cap-legend-share{display:none}
}
/* ── SIMPLE: "View target" (owner, 2026-09-10) ──────────────────────
The toggle belongs to the FUNDS list, so it is parked at the right end
of that list's eyebrow row. Same metrics as the Simple/Advanced pill
(28px, 999px radius, 12px/600) so the two controls read as one family.
OFF is the default and the clean state. */
#dash-wrap .dash-funds-head{display:flex;align-items:center;justify-content:space-between;
gap:12px;min-height:28px;margin-bottom:8px}
#dash-wrap .dash-funds-head .dash-eyebrow-top{margin-bottom:0}
#dash-wrap .dash-tgt-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;
height:28px;padding:0 11px 0 8px;border:1px solid var(--border);border-radius:999px;
background:var(--surface-2);font-family:var(--font);font-size:12px;font-weight:600;
color:var(--text-3);cursor:pointer;white-space:nowrap;
transition:background .15s,color .15s,border-color .15s}
#dash-wrap .dash-tgt-toggle:hover{color:var(--text);border-color:var(--border-2)}
#dash-wrap .dash-tgt-toggle[aria-pressed=true]{background:var(--accent-bg);
border-color:var(--accent-br);color:var(--accent-ink)}
#dash-wrap .dash-tgt-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
#dash-wrap .dash-tgt-track{position:relative;flex:none;width:24px;height:14px;
border-radius:999px;background:var(--surface-3);border:1px solid var(--border-2);
transition:background .15s,border-color .15s}
#dash-wrap .dash-tgt-track > i{position:absolute;top:1px;left:1px;width:10px;height:10px;
border-radius:50%;background:var(--text-3);transition:transform .15s,background .15s}
#dash-wrap .dash-tgt-toggle[aria-pressed=true] .dash-tgt-track{background:var(--accent);
border-color:var(--accent)}
#dash-wrap .dash-tgt-toggle[aria-pressed=true] .dash-tgt-track > i{transform:translateX(10px);
background:var(--surface)}
/* the one caption allowed here: it states a fact the rows cannot — that the
aggregate does not cover everyone whose hours are in the denominator */
#dash-wrap .dash-tgt-note{display:block;font-size:11.5px;line-height:1.4;
color:var(--text-3);margin:-2px 0 8px}
/* target ON: the share track becomes the shared allocation meter, kept at
the same 6px height so switching the toggle does not move the rows. */
#dash-wrap .cap-legend-meter{flex:1 1 auto;min-width:48px;max-width:300px;margin:0 4px}
/* .ui-meter-track is a and the shared sheet never gives it a display,
so it lays out inline and collapses to nothing. Fixed here through the
modifier class rather than by restyling the shared component. */
#dash-wrap .cap-legend-meter .ui-meter-track{display:block;height:6px;border-radius:3px}
#dash-wrap .cap-legend-meter .ui-meter-fill{border-radius:3px}
#dash-wrap .cap-legend-meter .ui-meter-tick{top:-3px;height:12px;width:2px;
border-radius:1px;background:var(--text-2);opacity:.9}
/* posted value on top, the labelled target and the signed differential
beneath it, both right-aligned against the same edge */
#dash-wrap .cap-legend-vals{flex:none;display:flex;flex-direction:column;
align-items:flex-end;gap:3px;min-width:0}
#dash-wrap .cap-legend-tgt{display:inline-flex;align-items:center;gap:6px;
white-space:nowrap;font-size:11.5px;font-variant-numeric:tabular-nums}
#dash-wrap .cap-legend-tgt-cap{font-size:11px;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-3)}
#dash-wrap .cap-legend-tgt-val{font-weight:600;color:var(--text-2)}
#dash-wrap .cap-legend-tgt .ui-diff{font-size:11.5px}
/* the name column and the track keep the widths they have with the toggle
OFF, so turning targets on grows the row downward, never sideways */
@media (max-width:1024px){
#dash-wrap .cap-legend-tgt-on .cap-legend-name{width:150px;max-width:34%}
#dash-wrap .cap-legend-tgt-on .cap-legend-meter{max-width:140px;min-width:36px}
}
@media (max-width:900px){
#dash-wrap .cap-legend-meter{display:none}
#dash-wrap .cap-legend-tgt-on .cap-legend-name{width:auto;max-width:none;flex:1 1 auto}
}
#dash-wrap .dash-list-empty{padding:0}
#dash-wrap .dash-primary.is-bare{align-items:center}
/* ── the fund chip: legible on both grounds ────────────────────────── */
#dash-wrap .fund-chip{background:var(--fc-bg,var(--surface-3));color:var(--fc,var(--text-2));
border:1px solid var(--fc-br,transparent)}
[data-theme=dark] #dash-wrap .fund-chip{background:var(--fc-bg-d,var(--fc-bg));color:#fff;
border-color:transparent}
/* the capped bar segments must fit the track even with 2px gaps */
#dash-wrap .cap-bar-seg{flex:0 1 auto}
/* ── ADVANCED: cards ───────────────────────────────────────────────── */
#dash-wrap .stat-card{box-shadow:var(--shadow-1)}
#dash-wrap .dash-card-head{min-height:18px}
#dash-wrap .dash-card-head .dash-partial,#dash-wrap .dash-card-head .dash-closed{flex:none}
/* a 3px rule in the fund's own colour — the ONE coloured edge besides the
green spine (DIRECTION §2). Dashboard fund cards only. */
#dash-wrap .dash-fund-card{border-top:3px solid var(--fund,var(--brand));
border-top-left-radius:var(--radius-lg);border-top-right-radius:var(--radius-lg);padding-top:12px}
#dash-wrap .dash-fund-label{display:flex;align-items:center;gap:7px;min-width:0}
#dash-wrap .dash-fund-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#dash-wrap .dash-fund-tag{gap:7px}
/* ── ADVANCED: filter bar bits that used to carry inline styles ────── */
#dash-wrap .dash-leave-toggle{display:flex;align-items:center;gap:7px;cursor:pointer;min-width:100px}
#dash-wrap .dash-leave-toggle input{width:14px;height:14px;cursor:pointer;accent-color:var(--accent)}
#dash-wrap .dash-leave-toggle span{font-size:12px;color:var(--text)}
#dash-wrap .dash-cmp-sel{cursor:pointer;min-width:150px}
#dash-wrap .dash-filter-foot{display:flex;align-items:center;gap:8px;height:32px}
#dash-wrap .dash-reset-btn{padding:7px 14px}
/* ── ADVANCED: distribution block + off-target + log spacing ───────── */
#dash-wrap .dash-blocks .cap-bar{margin-top:4px}
#dash-wrap .dash-blocks .cap-legend-row{min-height:38px}
#dash-wrap .dash-blocks .cap-legend-name{font-size:13.5px}
#dash-wrap .dash-off-card{margin-bottom:20px}
#dash-wrap .dash-off-body{padding:6px 16px 12px}
#dash-wrap .dash-log{margin-bottom:20px}
/* an empty state here is a glyph, one line and one button — no paragraph */
#dash-wrap .ui-empty-body{display:none}
/* ── responsive ──────────────────────────────────────────────────────
1280 tightens the gutter, 1024 narrows the left column, below 900 the
two columns stack (the sidebar has already eaten the width by then). */
@media (max-width:1280px){
#dash-wrap .dash-primary{gap:18px 26px}
}
@media (max-width:1024px){
#dash-wrap .dash-primary{grid-template-columns:minmax(180px,220px) minmax(0,1fr);
gap:16px 22px;padding:18px 18px}
#dash-wrap .dash-donut{max-width:172px}
}
@media (max-width:900px){
#dash-wrap .dash-primary{grid-template-columns:minmax(0,1fr);gap:18px;padding:18px}
#dash-wrap .dash-primary-l{align-items:flex-start}
#dash-wrap .dash-slab{justify-self:start}
#dash-wrap .ui-range-dates{margin-left:0;width:100%}
}
@media (max-width:860px){
#dash-wrap .ui-range-dates{margin-left:0;width:100%}
}
@media (max-width:560px){
#dash-wrap .dash-header{align-items:flex-start}
#dash-wrap .dash-actions{width:100%;justify-content:space-between}
}
/* ── print: the on-screen page is never the artifact ───────────────── */
@media print{
#dash-wrap .dash-rail,#dash-wrap .ui-vt,#dash-wrap .dash-actions,
#dash-wrap .dash-tgt-toggle{display:none!important}
#dash-wrap .dash-primary{box-shadow:none;border:1px solid var(--border)}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-quarterly.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
p-quarterly.css — the Quarterly page (js/quarterly.js)
Loaded AFTER css/styles.css and css/audit-additions.css, so everything
here layers on the design system. Tokens only: no hard-coded colour, so
light and dark both work with no theme-specific block.
Covers what the paperless revision added: the report sheet (document →
required comment → PDF), the guided run footer, and the accordion body
for a package row. DIRECTION.md §3 (hierarchy replaces prose), §5 (one
list pattern) and §6 (a caption only when it states a fact).
═══════════════════════════════════════════════════════════════════════ */
/* ── shared micro type ────────────────────────────────────────────── */
.q-eyebrow{display:block;font-size:11px;line-height:1;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-3)}
.q-micro{font-size:11.5px;line-height:1.4;font-weight:450;color:var(--text-3);margin:-2px 0 14px}
/* ── admin viewer top bar ─────────────────────────────────────────── */
.q-topbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.q-topbar>.btn-mini{flex:none}
.q-rollup-s{font-size:12px;color:var(--text-3);font-variant-numeric:tabular-nums;white-space:nowrap}
/* ── the hours slab sits directly under the header ────────────────── */
.q-card>.hours-slab-row{margin-top:2px;align-items:center;justify-content:space-between}
/* ── accordion body: an employee inside a package ─────────────────── */
.q-emp-body{display:block}
.q-emp-cmt{margin-top:9px;padding-left:10px;border-left:2px solid var(--border-2)}
.q-emp-cmt p{margin:3px 0 0;font-size:12.5px;line-height:1.55;color:var(--text-2);white-space:pre-wrap}
/* action bar: one primary, the rest text buttons, pinned bottom-right */
.q-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-top:12px}
.q-acts .btn-save{flex:none;padding:9px 16px}
.q-acts .btn-io,.q-acts .btn-mini{flex:none}
/* the shared accordion body already carries its own ground + padding */
.ui-acc-body .q-emp-list{margin:6px 0 0}
.ui-acc-body .q-steps{padding-top:2px}
.ui-acc-body .q-act-wrap,.ui-acc-body .q-rollup{background:var(--surface)}
.ui-acc-body .q-emp-list-row{background:var(--surface)}
/* ── the report sheet ─────────────────────────────────────────────── */
/* the document is capped so the comment and the actions stay in view */
.modal .q-doc{padding:10px}
.modal .q-doc-frame{aspect-ratio:auto;height:min(46vh,520px);max-width:100%}
.q-cmt{margin-top:14px}
.q-cmt-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:6px}
.q-cmt-count{font-size:11.5px;font-weight:600;color:var(--text-3);font-variant-numeric:tabular-nums}
.q-cmt-count.is-max{color:var(--warn)}
.q-cmt-input{width:100%;min-height:76px;resize:vertical;padding:10px 12px;border-radius:var(--radius);
border:1px solid var(--border-2);background:var(--surface-2);color:var(--text);
font-family:var(--font);font-size:13px;line-height:1.55;transition:border-color .15s,box-shadow .15s}
.q-cmt-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.q-cmt-input.is-bad{border-color:var(--danger)}
.q-cmt-note{margin-top:5px;font-size:11.5px;line-height:1.4;color:var(--text-3)}
.q-cmt-note.is-bad{color:var(--danger)}
.q-cmt-locked{padding:10px 12px;border-radius:var(--radius);border:1px solid var(--border);
background:var(--surface-3);color:var(--text-2);font-size:13px;line-height:1.55;white-space:pre-wrap}
/* ── guided run footer: Back · 3 of 8 ………… Close · PDF ────────────── */
.q-sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
margin-top:16px;padding-top:13px;border-top:1px solid var(--border)}
.q-sheet-l,.q-sheet-r{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.q-sheet-l{min-height:1px}
.q-sheet-foot .btn-save,.q-sheet-foot .btn-cancel{flex:none;padding:9px 18px}
.q-sheet-foot .btn-mini{flex:none;padding:8px 13px}
.q-seq-n{font-size:12px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
@media (max-width:1024px){
.modal .q-doc-frame{height:min(40vh,420px)}
.q-sheet-foot{align-items:stretch}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-manage.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
p-manage.css — Manage / Users / My Team skin (design/DIRECTION.md v2)
Loaded AFTER css/styles.css and css/audit-additions.css, by
js/manage.js (mgEnsurePageCss), so it may override both.
Every class here is either NEW and mg- prefixed (owned by manage.js
and used nowhere else) or scoped to #view-manage / #view-users /
#view-team / .modal, because .seg-toggle, .search-input, .field and
.fund-chip are shared with screens this module does not own.
Colour comes from tokens only, so light and dark both work: the
tokens themselves flip under [data-theme=dark].
═══════════════════════════════════════════════════════════════════ */
/* the sentinel js/manage.js probes for before adding its own */
.mg-css-probe{--mg-page-css:1}
/* ── 1. PAGE FURNITURE ──────────────────────────────────────────────
A page title is a bare noun with nothing beneath it (DIRECTION §3).
My Team renders no title at all — the nav already names it. */
#view-manage .page-title,
#view-users .page-title{margin:0 0 14px}
.mg-page-head{display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;margin-bottom:14px}
.mg-page-head .page-title{margin:0}
/* tab rail + the one filter pill beside it */
.mg-toolbar{display:flex;align-items:center;justify-content:space-between;
gap:12px;flex-wrap:wrap;margin-bottom:18px}
/* the people filter row: search, status, role chips */
.mg-filterbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.mg-filterbar .search-input{flex:1 1 200px;min-width:160px}
.mg-seg{margin-bottom:0;flex:0 0 auto;width:auto}
.mg-seg .seg-btn{padding:7px 14px}
/* ── 2. SECTION: an eyebrow above the card, never a sentence ────────*/
.mg-sec{margin:0 0 20px}
.mg-sec-head{display:flex;align-items:baseline;justify-content:space-between;
gap:10px;margin:0 0 8px;padding:0 2px}
.mg-sec-count{font-size:11.5px;line-height:1.4;font-weight:450;color:var(--text-3);
font-variant-numeric:tabular-nums}
.mg-sec>.hint{margin-top:8px;padding:0 2px}
/* ── 3. THE CARD (e1) and THE LIST GROUP ────────────────────────────
One card, rows sharing a single 1px rule — never double lines. */
.mg-card{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-1);padding:16px}
.mg-list{background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius-lg);box-shadow:var(--shadow-1);overflow:hidden}
.mg-list>.mg-row+.mg-row{border-top:1px solid var(--border)}
/* a list nested inside an open accordion body sits on --surface, so it
still reads as a step lighter than the --surface-2 body around it */
.mg-list-sub{box-shadow:none}
/* ── 4. THE ROW — 52px, lead | name+meta | value | actions ──────────*/
.mg-row{display:flex;align-items:center;gap:12px;min-height:52px;padding:6px 16px;
background:var(--surface);transition:background .15s var(--ease,ease)}
.mg-row:hover{background:var(--surface-2)}
.mg-row>*{min-width:0}
.mg-row-lead{flex:none;display:inline-flex;align-items:center;justify-content:flex-start}
.mg-row-lead:empty,.mg-row-act:empty{display:none}
.mg-row-main{flex:1 1 auto;display:flex;align-items:baseline;gap:8px;min-width:0;
flex-wrap:nowrap;overflow:hidden}
.mg-row-name{font-size:15px;line-height:1.35;font-weight:600;letter-spacing:-.01em;
color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mg-row-meta{font-size:11.5px;line-height:1.4;font-weight:450;color:var(--text-3);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
font-variant-numeric:tabular-nums;flex:0 1 auto}
.mg-row-val{flex:none;font-size:13px;font-weight:600;color:var(--text);
font-variant-numeric:tabular-nums;white-space:nowrap}
.mg-row-act{display:inline-flex;align-items:center;gap:6px;flex:none}
.mg-row.is-inactive .mg-row-name{color:var(--text-3)}
.mg-row.is-inactive .fund-chip{opacity:.55}
/* nothing in the list yet, inside an open row */
.mg-none{font-size:13.5px;line-height:1.5;color:var(--text-3);padding:10px 2px}
/* ── 5. ACTION BAR — pinned right, one primary, the rest text ───────*/
.mg-actbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;
flex-wrap:wrap;margin-top:14px}
.mg-actbar .mg-inuse{margin-right:auto;height:28px;padding:0 10px}
/* ── 6. FORMS — placeholders instead of helper text ─────────────────*/
.mg-form-row{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}
.mg-form-row .field{flex:1 1 180px;min-width:150px;margin-bottom:0}
.mg-form .mg-w-code{flex:0 0 120px;min-width:120px}
.mg-form .mg-w-color{flex:0 0 auto;min-width:0}
.mg-form .color-palette{padding:6px 0;max-width:258px}
.mg-form .hint{margin-top:10px}
#mgx-addfund-prev{margin-top:12px}
/* the one green primary per surface — .btn-primary is full width by
default in the design system, which is wrong inside a row */
.mg-btn-add{width:auto;flex:none;padding:10px 18px;white-space:nowrap}
/* add-an-activity, inside an open group row */
.mg-add{display:flex;gap:8px;align-items:center;margin-top:12px}
.mg-add-inp{flex:1 1 auto;min-width:0;height:36px;padding:0 12px;
border:1px solid var(--border-2);border-radius:var(--radius);
background:var(--surface);color:var(--text);font-family:var(--font);font-size:13px}
.mg-add-inp:focus{outline:none;border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-bg)}
.mg-add .mg-btn-add{padding:9px 16px}
/* ── 7. GROUP SERVICES — featured-first ─────────────────────────────
The first group is a real card with its detail showing; every later
group is a plain row in one group card below it. The variant itself
lives in styles.css (.ui-acc.is-featured); these are the fit-ups. */
#view-manage .ui-acc.is-featured .ui-acc-body{padding:16px}
#view-manage .ui-acc .mg-list{border-radius:var(--radius)}
#view-manage .ui-acc-meta{font-variant-numeric:tabular-nums}
/* ── 8. ORGANIZATION ────────────────────────────────────────────────*/
.mg-narrow{max-width:560px}
.mg-logo-row{display:flex;align-items:center;gap:18px}
.mg-logo-btns{display:flex;flex-direction:column;gap:8px}
.mg-file{cursor:pointer;display:inline-block;text-align:center}
.mg-card .hint{margin-top:10px}
.mg-card .field:last-of-type{margin-bottom:0}
/* ── 9. USER EDITOR ─────────────────────────────────────────────────*/
.mg-role-note{margin:-8px 0 14px}
.modal .mg-list{box-shadow:none;border-radius:var(--radius)}
.modal .mg-actbar{margin-top:12px}
/* the fund preview: a compact fact, not a paragraph */
.mgx-ratio.is-low{color:var(--warn)}
/* ── 10. PEOPLE (Users / My Team) ───────────────────────────────────
The owner: "on users is alright", "my team is perfect". The roster is
NOT restructured — no outer card (its rows already carry their own),
only the e1 shadow so it sits on the same depth ladder as the rest. */
.mg-people{margin:0}
#view-users .tree-row,
#view-team .tree-row{box-shadow:var(--shadow-1)}
#view-users .tree-row.clickable:hover,
#view-team .tree-row.clickable:hover{box-shadow:var(--shadow-2);border-color:transparent}
/* ── 11. MOTION ─────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce){
.mg-row{transition:none}
}
/* ── 12. NARROW ─────────────────────────────────────────────────────*/
@media (max-width: 720px){
.mg-row{flex-wrap:wrap;row-gap:6px;padding:10px 12px}
.mg-form-row .field{flex:1 1 100%}
.mg-btn-add{width:100%}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-settings.css (merged into audit-additions.css)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
p-settings.css — the Settings page. Owner: js/settings.js
Follows design/DIRECTION.md. Tokens only: no literal colour appears
here, so light and dark both work from the one token block.
EVERY rule is scoped to .stg-shell. manage.js reuses .settings-section,
.settings-row, .sr-label and .sr-sub on the Manage screen, and nothing
in this file may reach it.
═══════════════════════════════════════════════════════════════════════ */
:root{--p-settings:1}
/* ── shell ─────────────────────────────────────────────────────────── */
.stg-shell{gap:24px}
/* ── left sub-nav: the active item carries the green spine (§4) ────── */
.stg-shell .stg-nav-item{position:relative;padding-left:13px}
.stg-shell .stg-nav-item.on{box-shadow:var(--shadow-1)}
.stg-shell .stg-nav-item.on::before{
content:"";position:absolute;left:0;top:6px;bottom:6px;width:3px;
border-radius:0 3px 3px 0;background:var(--accent);
}
.stg-shell .stg-nav-item.on .ui-ic{color:var(--accent)}
/* ── section head: a bare noun, nothing beneath it (§3, §6) ────────── */
.stg-shell .stg-head{margin-bottom:14px}
.stg-shell .stg-head h3{
margin:0;font-size:20px;line-height:1.3;font-weight:600;
letter-spacing:-.015em;color:var(--text);
}
.stg-shell .stg-head p{display:none}
/* ── card: e1 = 1px border + shadow-1, --radius-lg (§2) ────────────── */
.stg-shell .settings-section{
border-radius:var(--radius-lg);
box-shadow:var(--shadow-1);
padding:16px 18px;
margin-bottom:12px;
}
/* The eyebrow stays; the sentence under it is deleted outright, and this
rule makes sure a stale one from anywhere can never come back. */
.stg-shell .settings-section-desc{display:none}
.stg-shell .settings-section-title{margin-bottom:10px}
/* ── settings row: label left, current value right in --text-3 (§3) ── */
.stg-shell .settings-row{
display:flex;align-items:center;justify-content:space-between;
gap:16px;padding:10px 0;
}
.stg-shell .sr-label{font-size:13.5px;font-weight:500;color:var(--text);line-height:1.35}
.stg-shell .sr-sub{display:none}
.stg-shell .stg-val{
font-size:13px;font-weight:500;color:var(--text-3);text-align:right;
min-width:0;font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.stg-shell .stg-val-sub{font-size:11.5px;line-height:1.4;color:var(--text-3);font-weight:450;margin-top:2px;text-align:right}
/* ── the one quiet caption (ui.js uiHint) ──────────────────────────── */
.stg-shell .settings-section .hint{margin-top:10px}
.stg-shell .stg-grid2 + .hint{margin-top:8px}
/* ── inline control clusters ───────────────────────────────────────── */
.stg-shell .stg-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.stg-shell .stg-num{
width:86px;padding:8px 10px;border:1px solid var(--border-2);
border-radius:var(--radius);background:var(--surface);color:var(--text);
font-family:var(--font);font-size:13px;text-align:right;
font-variant-numeric:tabular-nums;
}
.stg-shell .stg-tz-input{
flex:1;min-width:220px;padding:9px 12px;border:1px solid var(--border-2);
border-radius:var(--radius);background:var(--surface);color:var(--text);
font-family:var(--font);font-size:13px;
}
.stg-shell .stg-num:focus,.stg-shell .stg-tz-input:focus{
outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg);
}
/* ── errors: a border on the field and one micro line, never a banner (§6) ── */
.stg-shell .stg-err{
font-size:11.5px;line-height:1.4;font-weight:450;color:var(--danger);margin-top:5px;
}
.stg-shell .stg-err:empty{display:none}
.stg-shell .stg-err.right{text-align:right}
.stg-shell .has-err .stg-num,
.stg-shell .has-err .stg-tz-input{border-color:var(--danger)}
/* form-level failure sits to the LEFT of the button it blocks */
.stg-shell .stg-actions{align-items:center}
.stg-shell .stg-actions .stg-err{margin-top:0;margin-right:auto;order:-1}
/* ── password strength: the readout is the label, so no caption ────── */
.stg-shell .pw-label:empty{display:none}
.stg-shell .pw-strength{margin-top:7px}
/* ── acting-as notice: one line, not a paragraph ───────────────────── */
.stg-shell .info-banner{padding:9px 12px;font-size:12px;line-height:1.4;border-radius:var(--radius)}
/* ── theme cards ───────────────────────────────────────────────────── */
.stg-shell .stg-themes{gap:10px}
.stg-shell .stg-theme{border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.stg-shell .stg-theme.active,
.stg-shell .stg-theme[aria-pressed="true"]{
border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent),var(--shadow-1);
}
.stg-shell .stg-theme .s:empty{display:none}
/* ── audit log table ───────────────────────────────────────────────── */
.stg-shell .stg-table-wrap{border-radius:var(--radius-lg)}
.stg-shell .stg-table td{font-size:12.5px}
.stg-shell .stg-note{font-size:11.5px;line-height:1.4;color:var(--text-3)}
@media (max-width:820px){
.stg-shell .stg-val{text-align:right}
.stg-shell .settings-row{align-items:flex-start}
}
/* ═══════════════════════════════════════════════════════════════════════
INTEGRATION FIXES (this pass)
═══════════════════════════════════════════════════════════════════════ */
/* OWNER: "My Entries" / "All Entries" is a bare noun with NO explanatory line
under it. index.html ships a hard-coded "Click any row to view full entry
details" strap between the filter bar and the list, and index.html is not
ours to edit, so it is removed here. The adjacent-sibling selector hits that
one element and nothing else. DIRECTION §6: a caption may exist only when it
states a fact the user cannot read off the control itself. */
#view-list > #list-filter-bar + div{ display:none !important; }
/* ═══════════════════════════════════════════════════════════════════════
OWNER PASS — 2026-09-10: THE HOURS FIGURE IS PLAIN, EVERYWHERE
═══════════════════════════════════════════════════════════════════════
He rejected the tinted slab ("dont like the new 'total hours' stuff") and
chose: a small uppercase muted label, the number large in --text with
tabular figures and a small "h", and the resolved period beneath it in the
quiet .hint style — sitting on the normal card surface. No --accent-bg
ground, no 3px --brand left rule, no border, no radius, no card inside a
card. This is deliberately applied to EVERY .hours-slab in the product —
Dashboard, My/All Entries, Approvals, Quarterly, the entry sheet — because
a figure that is green on one screen and plain on the next is exactly the
inconsistency he complained about. Class names are untouched so nothing
that references them breaks; only the look changes. */
.hours-slab,
.hours-slab.sm,
.hours-slab.is-over{
background:none;border:0;border-radius:0;padding:0;min-width:0;gap:4px;
}
/* the label, the unit and the period line sit on --surface now, so they go
back to the eyebrow / micro colour instead of the on-tint contrast fix. */
.hours-slab-cap,
.hours-slab-unit,
.hours-slab .hint{color:var(--text-3)}
.hours-slab .hint{margin-top:2px}
.hours-slab .hint .ui-period{font-size:inherit;line-height:inherit;color:inherit}
/* overtime is still readable without a rule to colour: the number carries it */
.hours-slab.is-over .hours-slab-val{color:var(--warn)}
/* the rows that used to be spaced by the slab's own padding need their own */
.hours-slab-row{gap:22px}
.ap-body-top{gap:24px}
@media (max-width:1100px){
.hours-slab-row{gap:16px}
.ap-body-top{gap:16px}
}
/* ── the setup checklist moved off the Dashboard ─────────────────────
OWNER 2026-09-10: "Drop the setup checklist" (from the Dashboard). The
feature stays: the card mounts at the bottom of SETTINGS and the only
entry point is the "Setup n/m" pill, injected into the top bar next to
the Settings button. The top bar is the navy plane, so the pill uses the
--nav tokens there instead of the light-surface ones. */
#view-settings > .su-ck-card{margin:18px 0 0}
.topbar .su-ck-pill{
height:26px;display:inline-flex;align-items:center;
background:transparent;border:1px solid var(--nav-2);color:var(--nav-fg-2);
}
.topbar .su-ck-pill:hover{background:var(--nav-2);color:var(--nav-fg);border-color:var(--nav-2)}
.topbar .su-ck-pill:focus-visible{outline:2px solid var(--brand);outline-offset:1px}
@media (max-width:720px){
.topbar .su-ck-pill{display:none}
}
/* the empty-state button is the one primary button on that surface: it takes
the --ink ground from .ui-empty-action but .btn-sm.accent (0,2,0) was still
winning the colour, printing --accent-ink on --ink — dark green on dark
green, ~1.4:1. Pre-existing; visible on the Dashboard's empty period, so it
is corrected here rather than left on screen. */
.ui-empty-action.btn-sm.accent,
.ui-empty > button.btn-sm.accent{color:var(--on-ink);border-color:var(--ink)}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-ui.css (merged into audit-additions.css, 2026-09-13 pass 2)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: ui (js/ui.js — shared components and the nav)
Tokens only. Both themes: every colour below is a token or a color-mix
of tokens, and the dark block only re-derives the one mix that must
move the other way on a dark ground.
═══════════════════════════════════════════════════════════════════════ */
/* ── uiDiffChip: the 'critical' band (|points| > 5) ─────────────────────
Bold, a darker red than --danger, and the warning glyph in front of the
arrow. Weight, colour and glyph together, so the band never rests on
colour alone. The plain var(--danger) line is the fallback for an engine
without color-mix; the mix that follows wins wherever it is understood.
Measured (WCAG relative luminance, on the --danger-bg tint the chip sits
on): light mix #842219 is 8.3:1 (plain --danger 6.3:1); dark mix #d0796f
is 5.5:1 (plain --danger 7.2:1). Both clear AA (4.5:1) for 12px text. */
.ui-diff.is-critical,.ui-diff.critical,.ui-diff-critical{
font-weight:700;
color:var(--danger);
color:color-mix(in srgb,var(--danger) 76%,var(--text));
background:var(--danger-bg);
border:1px solid var(--danger-br);
border-radius:5px;
padding:0 6px 0 4px;
gap:3px
}
[data-theme=dark] .ui-diff.is-critical,
[data-theme=dark] .ui-diff.critical,
[data-theme=dark] .ui-diff-critical{
color:var(--danger);
color:color-mix(in srgb,var(--danger) 86%,var(--bg))
}
.ui-diff .ui-diff-alert{width:12px;height:12px;flex-shrink:0;stroke-width:2.2}
/* the arrow keeps its job next to the glyph; a hair of extra weight so the
two icons read as one signal rather than two competing ones */
.ui-diff.is-critical .ui-diff-ic{stroke-width:2.2}
/* printed reports drop the tint but keep the weight and the glyph */
@media print{
.ui-diff.is-critical,.ui-diff.critical,.ui-diff-critical{background:none;border-color:transparent;padding:0}
}
/* ── nav: employee Quarterly Open / Closed badge (contract G) ───────────
Open reuses the existing .nav-badge.open-badge tint (ok, 7.0:1 light and
9.0:1 dark). Closed is neutral: it is a state, not a fault. --text-2 on
--surface-3 measures 7.3:1 light and 7.4:1 dark; --text-3 would have been
4.0:1 light, under AA for 10px text. Text, never colour alone. */
.nav-badge.nav-badge-q{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;height:18px;padding:0 6px}
.nav-badge.q-closed{background:var(--surface-3);color:var(--text-2);border-color:var(--border)}
.nav-item.active .nav-badge.q-closed{background:var(--surface);color:var(--text)}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-approvals.css (merged into audit-additions.css, 2026-09-13 pass 2)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: approvals (js/approvals.js — the review queue and All Entries)
Tokens only; both themes. The integrator concatenates this file into
css/audit-additions.css. Nothing is injected at runtime.
Everything else this module needs already lives in audit-additions.css
(.ap-* .le-* rules) and styles.css (.cap-bar .fund-chip .hours-slab).
═══════════════════════════════════════════════════════════════════════ */
/* ── period in progress (owner's rule) ───────────────────────────────────
While the pay period is still running there is no off-target verdict.
One quiet line under the toolbar says so. It is a .hint from uiHint,
so it inherits the shared caption style; this only places it. */
.ap-period-hint{margin:-6px 0 12px;display:flex;align-items:center;gap:6px}
.ap-period-hint .hint{margin:0}
/* ── the off-target flag ─────────────────────────────────────────────────
Only ever rendered once the pay period has ended (apPeriodMix leaves
'off' empty until Store.payPeriodComplete is true). It is a verdict past
the tolerance, so it carries the danger tone; the other flags (weekend,
over 12h, admin edit) stay warn-toned prompts. Glyph plus word, never
colour alone. */
.ap-flag.is-off{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-br)}
.ap-flag.is-off .ap-flag-ic{stroke-width:2.2}
/* ── variance chip in the capped-bar legend ──────────────────────────────
uiDiffChip (contract A bands: ok / warn / bad / critical) sits after the
percent on each fund that has a target, and only once the period has
fully elapsed. The chip's own colours come from styles.css and p-ui.css;
this only places it. */
.ap-body-mix .cap-legend-val .ui-diff{margin-left:8px;font-size:11.5px;vertical-align:-1px}
/* ── leave with no allocation to follow (contract D) ─────────────────────
Leave is split into funds by allocation and is never its own bucket. If
a person had no allocation on a leave day those minutes cannot be placed
in a fund; they are shown as "Unallocated leave" rather than dropped. */
.cap-legend-row.is-unalloc .cap-legend-name{color:var(--text-3);font-style:italic}
.cap-legend-row.is-unalloc .fund-chip{background:var(--surface-3);color:var(--text-3);
border:1px dashed var(--border-2)}
/* ── leave split in the entry detail modal (contract D) ──────────────────
"Charged by allocation": one row per fund, chip + name, then hours and
the allocation percent that produced them. */
.ap-leave-split{display:flex;flex-direction:column;gap:4px;margin-top:2px}
.ap-leave-split-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
min-height:24px;font-size:12.5px}
.ap-leave-split-row .num{font-weight:600;color:var(--text);white-space:nowrap}
.ap-leave-split-row .pct{font-weight:500;color:var(--text-3);margin-left:5px}
@media print{
.ap-period-hint{display:none}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-dashboard.css (merged into audit-additions.css, 2026-09-13 pass 2)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: dashboard (js/dashboard.js — dashboard view and printed reports)
On-screen rules use tokens only. The printed report is PAPER: its hex
values are deliberate and never follow the app theme, so a PDF saved in
dark mode is identical to one saved in light mode.
═══════════════════════════════════════════════════════════════════════ */
/* ── printed certification block (e-signature, contract E) ─────────── */
.print-month-section .rpt-esig{page-break-inside:avoid;break-inside:avoid}
.print-month-section .rpt-esig-box{background:#fcfdfe;color:#1a2a3a}
.print-month-section .rpt-esig-img{max-height:52px;max-width:220px;object-fit:contain;display:block;background:#fff}
.print-month-section .rpt-esig-typed{font-family:'Playfair Display',Georgia,serif;font-style:italic;line-height:1.2}
/* the critical band on paper: weight and glyph, never colour alone */
.print-month-section .rpt-diff-critical{font-weight:800}
/* the report is paper whatever the theme: a dark theme must not restyle it */
[data-theme=dark] .print-month-section .rpt-esig-box{background:#fcfdfe;color:#1a2a3a}
[data-theme=dark] .print-month-section .rpt-esig-typed{color:#0f2340}
@media print{
.print-month-section .rpt-esig{page-break-inside:avoid;break-inside:avoid}
.print-month-section .rpt-esig-img,
.print-month-section .rpt-esig-box{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-manage.css (merged into audit-additions.css, 2026-09-13 pass 2)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: manage (js/manage.js — the user editor's Funds tab)
Effective-dated target allocations: the split in force today, the
editor with its effective date, and the locked history list.
Tokens only; every colour is a token, so light and dark both hold
without a dark block.
═══════════════════════════════════════════════════════════════════════ */
/* ── the split in force today ("effective ") ─────────────────── */
.alloc-current{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface-2);
padding:10px 12px;margin-bottom:12px;display:flex;flex-direction:column;gap:8px}
.alloc-current-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.alloc-current-eff{font-size:12px;color:var(--text-2);font-variant-numeric:tabular-nums}
.alloc-current-next{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--warn);
line-height:1.4}
.alloc-current-next svg{flex-shrink:0}
/* ── the split, as chips: colour chip, share, code ──────────────────── */
.alloc-split{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.alloc-split-item{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2);
font-variant-numeric:tabular-nums;white-space:nowrap}
.alloc-split-item b{color:var(--text);font-weight:700}
.alloc-split-code{color:var(--text-3)}
.alloc-split-none{font-size:12px;color:var(--text-3)}
/* ── the editor: effective date above the fund table ────────────────── */
.alloc-editor{margin-bottom:14px}
.alloc-editor-head{margin-bottom:8px}
.alloc-date-field{max-width:220px}
#alloc-effective-date{font-variant-numeric:tabular-nums}
/* ── the locked history list ────────────────────────────────────────── */
.alloc-history-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:4px 0 8px}
.alloc-history{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.alloc-history-row{display:grid;grid-template-columns:132px minmax(0,1fr) auto;grid-template-areas:"date split rm" "date who rm";
column-gap:12px;row-gap:3px;align-items:center;padding:9px 12px}
.alloc-history-row+.alloc-history-row{border-top:1px solid var(--border)}
.alloc-history-row.is-past{color:var(--text-3)}
.alloc-history-date{grid-area:date;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
font-size:12px;font-variant-numeric:tabular-nums}
.alloc-history-date b{color:var(--text);font-weight:700}
.alloc-history-row.is-past .alloc-history-date b{color:var(--text-2);font-weight:600}
.alloc-history-status{display:inline-block;padding:1px 7px;border-radius:9px;font-size:10px;font-weight:700;
letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--border);background:var(--surface-3);color:var(--text-3)}
.alloc-history-row.is-active .alloc-history-status{border-color:var(--accent-br);background:var(--accent-bg);color:var(--accent)}
.alloc-history-row.is-upcoming .alloc-history-status{border-color:var(--warn-br);background:var(--warn-bg);color:var(--warn)}
.alloc-history-split{grid-area:split;min-width:0}
.alloc-history-row.is-past .alloc-split-item{color:var(--text-3)}
.alloc-history-row.is-past .alloc-split-item b{color:var(--text-2);font-weight:600}
.alloc-history-who{grid-area:who;font-size:11px;color:var(--text-3)}
.alloc-history-when{font-variant-numeric:tabular-nums}
.alloc-history-rm{grid-area:rm;align-self:center;padding:3px 9px;font-size:11px;flex-shrink:0}
/* the empty state sits inside the same card */
.alloc-history .ui-empty,.alloc-history .empty-state{border:none;margin:0}
@media (max-width:560px){
.alloc-history-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"date rm" "split rm" "who rm"}
.alloc-history-date{flex-direction:row;align-items:center;gap:8px}
}
@media print{
.alloc-editor,.alloc-history-rm{display:none}
.alloc-current,.alloc-history{background:none}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-quarterly.css (merged into audit-additions.css, 2026-09-13 pass 2)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
p-quarterly.css — the Quarterly page (js/quarterly.js), contracts E + G
NEW rules only. The earlier p-quarterly block (report sheet, comment
box, guided-run footer, accordion body) is already merged into
css/audit-additions.css under "SOURCE: css/p-quarterly.css" and is not
repeated here. The integrator concatenates this file after it.
Tokens only, so light and dark both work with no theme-specific block.
The two module tokens below are the ONE exception, and deliberate: a
signature is a document artefact. The pad is paper and the ink is ink,
in either theme, so the PNG that is stored reads the same on screen, in
the PDF and to an auditor. Nothing else here names a colour.
═══════════════════════════════════════════════════════════════════════ */
:root{--q-paper:#ffffff;--q-ink:#141a17}
/* ── report status pill: sent, awaiting signature ─────────────────── */
.ui-pill.q-pill-sent{background:var(--warn-bg);color:var(--text);border-color:var(--warn-br)}
.ui-pill.q-pill-sent svg{color:var(--warn)}
/* ── the person's own quarter list (employee view; supervisor's own) ─ */
.q-qtr-list{margin-bottom:14px}
.q-qtr-row{gap:12px}
.q-qtr-row.is-sel{border-color:var(--accent-br);background:var(--accent-bg)}
.q-qtr-row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-access-badge{flex:none;display:inline-flex;align-items:center;height:20px;padding:0 8px;border-radius:999px;
font-size:10.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border:1px solid var(--border)}
.q-access-badge.is-open{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.q-access-badge.is-closed{background:var(--surface-3);color:var(--text-2)}
/* the own-report card */
.q-own .q-blocking,.q-own .q-certline{margin-top:0}
.q-own .q-blocking.ready svg{color:var(--ok)}
.q-own>.q-rep{margin-top:12px}
/* ── the report, rendered in the app ──────────────────────────────── */
.q-rep{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--surface);padding:16px 18px}
.q-doc-app{padding:0;border:0;background:transparent}
.q-doc-app .q-rep{box-shadow:none}
.q-rep-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
padding-bottom:12px;border-bottom:1px solid var(--border)}
.q-rep-title{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text)}
.q-rep-sub{font-size:12px;color:var(--text-3);margin-top:2px}
.q-rep-total-n{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;line-height:1}
.q-rep-total-n span{font-size:13px;font-weight:600;color:var(--text-3);margin-left:3px}
.q-rep-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px 18px;margin:12px 0 0;padding:0}
.q-rep-m{display:block;min-width:0}
.q-rep-m dt{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
.q-rep-m dd{margin:3px 0 0;font-size:13px;font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis}
.q-rep-note{display:flex;align-items:flex-start;gap:7px;margin-top:12px;padding:8px 11px;border-radius:var(--radius);
background:var(--warn-bg);border:1px solid var(--warn-br);font-size:12px;line-height:1.5;color:var(--text)}
.q-rep-note svg{flex:none;margin-top:2px;color:var(--warn)}
.q-rep-note-plain{background:transparent;border-color:var(--border);color:var(--text-3)}
/* one section per allocation period, then the quarter total */
.q-rep-sec{margin-top:16px}
.q-rep-sec-total{padding-top:14px;border-top:2px solid var(--border-2)}
.q-rep-period-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px;font-size:13px;color:var(--text)}
.q-rep-period-h b{font-weight:700}
.q-rep-period-n{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);
background:var(--accent-bg);border:1px solid var(--accent-br);border-radius:999px;padding:2px 8px}
.q-rep-split{font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.q-rep-dim{color:var(--text-3);font-weight:450}
/* posted-vs-target table — scrolls inside its own box, never the page */
.q-rep-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius)}
.q-rep-table{width:100%;border-collapse:collapse;font-size:12.5px;min-width:520px}
.q-rep-table th,.q-rep-table td{padding:8px 10px;text-align:left;border-bottom:1px solid var(--border);vertical-align:middle;white-space:nowrap}
.q-rep-table th{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3);background:var(--surface-2)}
.q-rep-table th.num,.q-rep-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.q-rep-table tbody tr:last-child td{border-bottom:0}
.q-rep-table td b{font-weight:600;color:var(--text)}
.q-rep-fund{display:inline-flex;align-items:center;gap:7px;font-weight:600;color:var(--text)}
.q-rep-sw{width:9px;height:9px;border-radius:3px;flex:none}
.q-rep-unalloc td{color:var(--text-3)}
.q-rep-total td{background:var(--surface-2);font-weight:600;color:var(--text)}
.q-rep-two .q-rep-table{min-width:0}
.q-rep-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px}
@media (max-width:760px){.q-rep-two{grid-template-columns:1fr}}
/* the sender's comment travels with the report */
.q-rep-cmt{margin-top:16px;padding:12px 14px;border-left:3px solid var(--accent);background:var(--surface-2);border-radius:0 var(--radius) var(--radius) 0}
.q-rep-cmt p{margin:6px 0;font-size:13px;line-height:1.6;color:var(--text);white-space:pre-wrap}
/* awaiting a send or a signature */
.q-rep-await{display:flex;align-items:flex-start;gap:8px;margin-top:16px;padding:10px 12px;border-radius:var(--radius);
border:1px dashed var(--border-2);font-size:12.5px;line-height:1.55;color:var(--text-2)}
.q-rep-await svg{flex:none;margin-top:2px;color:var(--text-3)}
.q-rep-await b{color:var(--text);font-weight:600}
/* ── the recorded signature ───────────────────────────────────────── */
.q-sig-block{margin-top:16px;padding:12px 14px;border:1px solid var(--ok-br);border-radius:var(--radius);background:var(--ok-bg)}
.q-sig-block.is-compact{margin-top:10px;padding:9px 11px}
.q-sig-block.is-stale{border-color:var(--border);background:var(--surface-3)}
.q-sig-img{display:block;max-width:100%;width:320px;height:auto;margin:8px 0 0;border:1px solid var(--border);border-radius:var(--radius);background:var(--q-paper)}
.q-sig-block.is-compact .q-sig-img{width:220px}
.q-sig-typed-name{margin:8px 0 0;padding:8px 12px;display:inline-block;border:1px solid var(--border);border-radius:var(--radius);
background:var(--q-paper);color:var(--q-ink);font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;font-size:24px;line-height:1.2}
.q-sig-block.is-compact .q-sig-typed-name{font-size:19px;padding:5px 10px}
.q-sig-meta{display:flex;align-items:flex-start;gap:7px;margin-top:8px;font-size:12px;line-height:1.55;color:var(--text-2)}
.q-sig-meta svg{flex:none;margin-top:2px;color:var(--ok)}
.q-sig-meta b{color:var(--text);font-weight:600}
.q-sig-meta time{font-family:var(--font-mono);font-size:11px;color:var(--text)}
.q-sig-block.is-stale .q-sig-img,.q-sig-block.is-stale .q-sig-typed-name{opacity:.55}
.q-sig-block.is-stale .q-sig-meta svg{color:var(--text-3)}
.q-sig-stale{display:flex;align-items:flex-start;gap:6px;margin-top:8px;font-size:12px;line-height:1.5;color:var(--danger)}
.q-sig-stale svg{flex:none;margin-top:2px}
.q-sig-block.is-upload .q-sign-acts{margin-top:8px;justify-content:flex-start}
/* ── the e-sign panel: draw or type, attest, sign ─────────────────── */
.q-sign{margin-top:14px;padding:14px 16px;border:1px solid var(--accent-br);border-radius:var(--radius-lg);background:var(--surface)}
.q-sign-h{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.q-sign-tabs{display:inline-flex;padding:2px;border-radius:999px;background:var(--surface-3);border:1px solid var(--border)}
.q-sign-tabs button{appearance:none;border:0;background:transparent;color:var(--text-2);font-family:var(--font);font-size:12px;
font-weight:600;padding:5px 14px;border-radius:999px;cursor:pointer;transition:background .15s,color .15s}
.q-sign-tabs button[aria-selected="true"]{background:var(--surface);color:var(--text);box-shadow:var(--shadow-1)}
.q-sign-tabs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.q-sign-pane[hidden]{display:none}
.q-sign-canvas{display:block;width:100%;max-width:100%;height:160px;border:1px solid var(--border-2);border-radius:var(--radius);
background:var(--q-paper);cursor:crosshair;touch-action:none;user-select:none;-webkit-user-select:none}
.q-sign-canvas:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-sign-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.q-sign-hint{font-size:11.5px;line-height:1.45;color:var(--text-3)}
.q-sign-hint b{color:var(--text-2);font-weight:600}
.q-sign-typed{width:100%;height:40px;padding:0 12px;border:1px solid var(--border-2);border-radius:var(--radius);
background:var(--input-bg,var(--surface-2));color:var(--text);font-family:var(--font);font-size:14px}
.q-sign-typed:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-bg)}
.q-sign-preview{min-height:44px;margin-top:8px;padding:6px 12px;border:1px dashed var(--border-2);border-radius:var(--radius);
background:var(--q-paper);color:var(--q-ink);font-family:"Segoe Script","Brush Script MT","Snell Roundhand",cursive;font-size:26px;line-height:1.2}
.q-sign-preview:empty::before{content:"Your signature";color:var(--text-3);font-family:var(--font);font-size:12px;font-style:italic}
.q-sign .q-attest-ck{margin-top:12px}
.q-sign .q-attest-sig{margin-top:8px}
.q-sign-acts{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:12px}
.q-sign-acts .btn-save{flex:none;padding:10px 20px}
@media (max-width:640px){
.q-rep{padding:12px}
.q-rep-total-n{font-size:22px}
.q-sign{padding:12px}
.q-sig-img{width:100%}
}
/* ═══════════════════════════════════════════════════════════════════════
SOURCE: css/p-audit.css (merged into audit-additions.css, 2026-09-13 pass 2)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: audit (js/audit.js — the read-only Audit section, admin/pm)
Tokens only. Coverage labels are NEUTRAL by design: they say where a
record lives, never that it passes. Green stays the product's status
colour and is not used for coverage. Fund colours come from the fund
itself (FUND_PALETTE) via an inline swatch.
═══════════════════════════════════════════════════════════════════════ */
.audit{max-width:1360px;margin:0 auto;padding:4px 0 40px}
/* ── header ─────────────────────────────────────────────────────────── */
.audit-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:18px}
.audit-title{font-size:22px;font-weight:700;color:var(--text);margin:0 0 4px;letter-spacing:-.01em}
.audit-sub{font-size:13.5px;color:var(--text-2);max-width:640px;line-height:1.5}
.audit-asof{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:11.5px;color:var(--text-3);text-align:right}
.audit-asof-line{line-height:1.4}
/* ── two columns: checklist rail + main ─────────────────────────────── */
.audit-cols{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
.audit-side{position:sticky;top:12px}
.audit-main{min-width:0}
@media (max-width:1080px){
.audit-cols{grid-template-columns:1fr}
.audit-side{position:static}
}
/* ── panels and blocks ──────────────────────────────────────────────── */
.audit-panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-1)}
.audit-panel-title{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-3);margin-bottom:6px}
.audit-block{border-top:1px solid var(--border);padding-top:14px;margin-top:16px}
.audit-block-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.audit-block-title{font-size:14px;font-weight:600;color:var(--text)}
.audit-sub-title{font-size:12px;font-weight:600;color:var(--text-2);margin:14px 0 6px}
.audit-line{font-size:12.5px;color:var(--text-2);margin:6px 0 8px;line-height:1.5}
.audit-text{font-size:13px;line-height:1.65;color:var(--text-2);margin:6px 0 0;white-space:pre-line}
.audit-micro{font-size:11px;line-height:1.4;color:var(--text-3)}
.audit-flash{outline:2px solid var(--ring);outline-offset:3px;border-radius:var(--radius-lg);transition:outline-color .6s}
/* ── request checklist ──────────────────────────────────────────────── */
.audit-reqs{display:flex;flex-direction:column;margin-top:8px}
.audit-req{display:flex;gap:10px;padding:10px 0;border-top:1px solid var(--border)}
.audit-req:first-child{border-top:0}
.audit-req-id{flex:0 0 30px;font-family:var(--font-mono);font-size:11px;font-weight:600;color:var(--text-3);padding-top:2px}
.audit-req-body{flex:1;min-width:0}
.audit-req-text{font-size:12.5px;line-height:1.45;color:var(--text)}
.audit-req-cite{font-size:11px;color:var(--text-3);margin-top:3px;line-height:1.4}
.audit-req-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:7px}
.audit-cov{display:inline-flex;align-items:center;font-size:10.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:5px;border:1px solid var(--border-2);background:var(--surface-3);color:var(--text-2);white-space:nowrap}
.audit-cov.is-part{background:var(--surface-2);border-style:dashed}
.audit-cov.is-none{background:transparent;border-style:dotted;color:var(--text-3)}
/* ── lookup controls ────────────────────────────────────────────────── */
.audit-controls{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:10px 0 14px}
.audit-controls .field{margin-bottom:0;min-width:160px}
.audit-controls .field.grow{flex:1 1 220px}
.audit-step{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.audit-step .audit-ref{width:auto;padding:6px 10px;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:var(--font);font-size:13px}
.audit-step .btn-mini{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px}
.audit-rot{transform:rotate(-90deg)}
.audit-range-dates{font-size:12.5px;color:var(--text-2)}
.audit-scope{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:10px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2);margin-bottom:6px}
.audit-scope-name{font-size:14px;font-weight:600;color:var(--text)}
.audit-scope-meta{font-size:12px;color:var(--text-3)}
.audit-scope-period{margin-left:auto;font-size:12.5px;color:var(--text-2)}
/* ── tables (shape shared with the Settings audit log) ──────────────── */
.audit-table-wrap{margin-top:8px}
.audit-table td,.audit-table th{font-size:12.5px}
.audit-table td.audit-num,.audit-table th.audit-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.audit-nowrap{white-space:nowrap}
.audit-note{max-width:260px;color:var(--text-3);font-style:italic}
.audit-json{max-width:280px;font-family:var(--font-mono);font-size:11px;color:var(--text-3);word-break:break-word}
.audit-table code{font-family:var(--font-mono);font-size:11px;color:var(--text-2);background:var(--surface-3);padding:1px 5px;border-radius:4px}
.audit-table tr.audit-week td{background:var(--surface-2);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3);padding:7px 12px}
.audit-table tr.audit-subtotal td{font-weight:600;color:var(--text-2);background:var(--surface-2)}
.audit-table tfoot td{font-weight:600;color:var(--text);border-top:1px solid var(--border-2);background:var(--surface)}
.audit-flag{display:inline-block;font-size:10.5px;font-weight:600;padding:1px 6px;border-radius:4px;border:1px solid var(--warn-br);background:var(--warn-bg);color:var(--warn);margin:1px 4px 1px 0;white-space:nowrap}
.audit-src{display:inline-block;margin-left:6px;padding:0 5px;border-radius:4px;font-size:10.5px;color:var(--text-3);border:1px solid var(--border);background:var(--surface-2)}
/* ── fund identity: swatch + name, never a bare dot ─────────────────── */
.audit-fund{display:inline-flex;align-items:center;gap:6px;margin-right:10px;white-space:nowrap;color:var(--text)}
.audit-swatch{width:10px;height:10px;border-radius:3px;flex-shrink:0}
/* ── allocation history ─────────────────────────────────────────────── */
.audit-alloc-list{border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-top:6px}
.audit-alloc-row{padding:10px 12px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--text-2)}
.audit-alloc-row:first-child{border-top:0}
.audit-alloc-row.is-applied{background:var(--surface-2)}
.audit-alloc-when{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--text)}
.audit-applied{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--text-2)}
/* ── certification packages ─────────────────────────────────────────── */
.audit-kv{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--text-2);margin:6px 0 10px}
.audit-kv>div{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.audit-k{flex:0 0 110px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text-3)}
.audit-cert-line{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.5;color:var(--text-2);padding:6px 0}
.audit-cert-line .ui-ic{flex-shrink:0;margin-top:3px;color:var(--text-3)}
.audit-cert-line.is-back .ui-ic{color:var(--warn)}
.audit-cert-line q{quotes:"\201C" "\201D";font-style:italic}
.audit-attest{display:block;margin-top:3px;padding:6px 10px;border-left:2px solid var(--border-2);font-size:12px;font-style:italic;color:var(--text-2);background:var(--surface-2);border-radius:0 var(--radius) var(--radius) 0}
.audit-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.audit-comment{margin-bottom:6px}
.audit-pdf-note{margin-top:10px;padding-top:8px;border-top:1px dashed var(--border)}
.audit-sig{max-width:220px;max-height:70px;margin-top:4px;border:1px solid var(--border);border-radius:4px;background:#fff}
.audit-block .ui-acc{margin-top:8px}
/* ── exports ────────────────────────────────────────────────────────── */
.audit-exports{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:10px}
.audit-export{display:flex;flex-direction:column;gap:6px;padding:12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.audit-export-name{font-size:13px;font-weight:600;color:var(--text)}
.audit-export .btn-sm{align-self:flex-start;margin-top:auto}
.audit-export-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto}
.audit-export-btns .btn-sm{margin-top:0}
.audit-export .btn-sm:disabled{opacity:.5;cursor:not-allowed}
/* ── modals: notes and the report preview ───────────────────────────── */
.audit-modal-foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.audit-doc{margin-top:10px;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:var(--surface-3)}
.audit-doc-frame{display:block;width:100%;height:60vh;border:0;background:#fff}
/* ── dark: only what must move the other way on a dark ground ───────── */
[data-theme=dark] .audit-sig{background:#fff}
[data-theme=dark] .audit-flag{background:var(--warn-bg);color:var(--warn)}
/* ═══════════════════════════════════════════════════════════════════════
MERGED 2026-09-13 from css/p-dashboard.css (module CSS, integrated by the integrator)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
MODULE: dashboard (js/dashboard.js — dashboard view and printed reports)
Pass 3: the PAGED quarterly report (contract 3) and the People card
(contract 7). The integrator concatenates this file into
css/audit-additions.css; nothing is injected at runtime.
On-screen rules (the People card) use tokens only, so light and dark both
hold with no theme block. The report page is PAPER: a letter sheet that
must print identically whatever theme the app is in, so its colours are
module-scoped paper tokens (--qp-*) set once on .q-report and never
redefined under [data-theme=dark]. That is the same deliberate exception
css/styles.css makes for its own @media print rules.
═══════════════════════════════════════════════════════════════════════ */
/* ── the paged report: one .q-page = one US-letter sheet ──────────────
8.5 × 11 in = 816 × 1056 px at 96 dpi, padding 0.6 in. The height is a
hair (0.02 px, one layout unit) under 11 in ON PURPOSE: html2pdf's CSS
page-break pass pads AFTER a breaking element by
(pageHeight - bottom % pageHeight); a sheet that ends exactly on a page
boundary would get a full blank page appended. This keeps every sheet
on its own PDF page with no spacer, and it still measures 1056 px. */
.q-report{
--qp-paper:#ffffff;
--qp-ink:#1a2a3a;
--qp-ink-2:#33485f;
--qp-ink-3:#6b82a0;
--qp-ink-4:#9aabbf;
--qp-navy:#0f2340;
--qp-rule:#e1e8f0;
--qp-rule-2:#d6dde5;
--qp-box:#fcfdfe;
display:block;
width:8.5in;
max-width:100%;
margin:0;
padding:0;
font-family:'DM Sans',Arial,sans-serif;
color:var(--qp-ink);
}
.q-report .q-page{
box-sizing:border-box;
position:relative;
display:flex;
flex-direction:column;
width:8.5in;
height:calc(11in - .02px);
min-height:calc(11in - .02px);
max-height:calc(11in - .02px);
padding:.6in;
margin:0;
overflow:hidden;
background:var(--qp-paper);
color:var(--qp-ink);
font-family:'DM Sans',Arial,sans-serif;
font-size:11px;
line-height:1.35;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
/* the sheet is paper in both themes — no dark override, by design */
[data-theme=dark] .q-report .q-page{background:var(--qp-paper);color:var(--qp-ink)}
/* running header: organisation · report name · person and quarter */
.q-page-head{
flex:none;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
padding:0 0 6px;
margin:0 0 8px;
border-bottom:1px solid var(--qp-rule);
font-size:9px;
line-height:1.3;
color:var(--qp-ink-3);
letter-spacing:.02em;
white-space:nowrap;
}
.q-page-head-org{font-weight:700;color:var(--qp-navy);overflow:hidden;text-overflow:ellipsis}
.q-page-head-title{text-transform:uppercase;letter-spacing:.14em;font-weight:600}
.q-page-head-who{overflow:hidden;text-overflow:ellipsis;text-align:right}
/* the content area: everything the sheet says, clipped to the sheet */
.q-page-body{
flex:1 1 auto;
min-height:0;
display:flex;
flex-direction:column;
overflow:hidden;
color:var(--qp-ink);
}
.q-page-body>*{flex:none}
/* running footer: confidential · person / period / as-of · Page i of N */
.q-page-foot{
flex:none;
display:flex;
align-items:baseline;
justify-content:space-between;
gap:12px;
margin-top:auto;
padding-top:8px;
border-top:1px solid var(--qp-rule);
font-size:9px;
line-height:1.3;
color:var(--qp-ink-4);
white-space:nowrap;
}
.q-page-foot>span{overflow:hidden;text-overflow:ellipsis}
.q-page-no{font-variant-numeric:tabular-nums;color:var(--qp-ink-2);font-weight:600;flex:none}
/* ── the signature block (contract 3) ─────────────────────────────────
The on-screen quarterly card also owns a .q-sig-block (tokens, a green
tint). On the sheet the block is part of the paper, so the sheet-scoped
rule resets that tint and lets the paper hex inside it stand. */
.q-page .q-sig-block{
margin:8px 0 0;
padding:0;
border:0;
border-radius:0;
background:transparent;
page-break-inside:avoid;
break-inside:avoid;
}
.q-page .q-sig-box{
background:var(--qp-box);
color:var(--qp-ink);
border:1px solid var(--qp-rule-2);
}
/* the empty ruled box: a line to sign on, never a mark */
.q-page .q-sig-ruled{
display:block;
height:34px;
border-bottom:1px solid var(--qp-ink-2);
margin:4px 0 2px;
}
/* the system signature on paper is ink on the sheet, not the theme text */
.q-page .sig-cursive{
color:var(--qp-navy);
font-size:30px;
line-height:1.15;
display:block;
max-width:100%;
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
/* the uploaded signature: the stored copy, downscaled at capture time */
.q-page .sig-image{
display:block;
max-height:56px;
max-width:240px;
width:auto;
height:auto;
object-fit:contain;
background:var(--qp-paper);
}
.q-page .q-sig-line b{font-weight:700;color:var(--qp-navy)}
/* ── print: black ink on white, one sheet per printed page ────────────
@page in styles.css is letter with a 0.5 in margin, so the printable
box is 7.5 × 10 in: the sheet is resized to fill exactly that box. */
@media print{
.q-report{width:auto;max-width:none;color:#000}
.q-report .q-page{
width:7.5in;
height:10in;
min-height:10in;
max-height:10in;
padding:.35in .4in;
margin:0;
background:#fff;
color:#000;
box-shadow:none;
page-break-after:always;
break-after:page;
page-break-inside:avoid;
break-inside:avoid;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
.q-report .q-page:last-child{page-break-after:auto;break-after:auto}
.q-page-head,.q-page-foot,.q-page-body,.q-page .q-sig-line,.q-page .q-sig-state{color:#000}
.q-page .sig-cursive{color:#000}
.q-page .q-sig-box{background:#fff;border-color:#000}
.q-page .q-sig-ruled{border-bottom-color:#000}
}
/* ── People card (contract 7, Simple view) ────────────────────────────
Below the total/donut card. One row per person: initials, name (and
role when not an employee), posted hours against expected, and the
verdict — "In progress" until the pay period has fully elapsed, then
"On target" / "Off target" with the largest fund variance as the shared
difference chip. Rows are buttons: activating one focuses the dashboard
on that person. Tokens only. */
.dash-people{
margin-top:16px;
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-1);
padding:14px 16px 6px;
}
.dash-people-head{
display:flex;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin-bottom:6px;
}
.dash-people-head .dash-eyebrow{margin:0}
.dash-people-count{
display:inline-flex;
align-items:center;
height:18px;
padding:0 7px;
border-radius:9px;
border:1px solid var(--border);
background:var(--surface-2);
color:var(--text-3);
font-size:11px;
font-weight:600;
font-variant-numeric:tabular-nums;
}
.dash-people-search{
margin-left:auto;
width:220px;
max-width:100%;
height:30px;
padding:0 10px;
border:1px solid var(--border);
border-radius:var(--radius);
font-size:12px;
font-family:var(--font);
color:var(--text);
background:var(--input-bg);
outline:none;
transition:border-color .2s;
}
.dash-people-search:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}
.dash-people-list{display:flex;flex-direction:column}
.dash-people-row{
display:grid;
grid-template-columns:28px minmax(0,1fr) auto auto;
align-items:center;
gap:12px;
width:100%;
min-height:46px;
padding:7px 4px;
border:0;
border-bottom:1px solid var(--border);
background:transparent;
color:var(--text);
font-family:var(--font);
font-size:13px;
text-align:left;
cursor:pointer;
transition:background .15s;
}
.dash-people-row:last-child{border-bottom:0}
.dash-people-row:hover{background:var(--surface-2)}
.dash-people-row:focus-visible{outline:2px solid var(--ring);outline-offset:-2px;border-radius:var(--radius)}
.dash-people-av{
width:28px;height:28px;border-radius:50%;
display:flex;align-items:center;justify-content:center;
background:var(--surface-3);color:var(--text-2);
font-size:11px;font-weight:600;letter-spacing:.02em;
}
.dash-people-who{min-width:0;display:flex;flex-direction:column;gap:1px}
.dash-people-name{font-weight:500;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-people-role{font-size:11px;color:var(--text-3)}
.dash-people-hours{
font-variant-numeric:tabular-nums;white-space:nowrap;
font-size:12px;color:var(--text-3);text-align:right;
}
.dash-people-hours b{font-weight:600;color:var(--text)}
.dash-people-status{
display:flex;align-items:center;justify-content:flex-end;gap:8px;
flex-wrap:wrap;min-width:110px;
}
/* the verdict pill: the shared .ui-pill carries glyph + word; the wrapper
only supplies the tone, since these three words are not entry statuses */
.dash-people-pill .ui-pill{white-space:nowrap}
.dash-people-pill.is-progress .ui-pill{background:var(--surface-3);color:var(--text-2);border-color:var(--border-2)}
.dash-people-pill.is-on .ui-pill{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-br)}
.dash-people-pill.is-off .ui-pill{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-br)}
.dash-people-pill.is-none .ui-pill{background:var(--surface);color:var(--text-3);border-style:dashed;border-color:var(--border-2)}
.dash-people-var{display:inline-flex;align-items:center;gap:6px}
.dash-people .ui-empty{margin:4px 0 10px}
@media (max-width:640px){
.dash-people-row{grid-template-columns:28px minmax(0,1fr) auto;row-gap:4px}
.dash-people-status{grid-column:2 / -1;justify-content:flex-start;min-width:0}
.dash-people-search{margin-left:0;width:100%}
}
/* nothing in the People card prints — the report sheet is the print artifact */
@media print{
.dash-people{display:none}
}
/* ── density: many funds or activities on one sheet ───────────────────
The sheet clips, so a crowded page first tightens its table rows and,
past that, scales the whole body to fit. The inline row padding is the
legacy sheet's, hence the !important. Values never change, only size. */
.q-page-body.is-dense table td,
.q-page-body.is-dense table th,
.q-page-body.is-denser table td,
.q-page-body.is-denser table th{padding-top:1px!important;padding-bottom:1px!important}
.q-page-body.is-dense table,
.q-page-body.is-denser table{font-size:10px!important}
.q-page-body.is-denser{
transform:scale(.88);
transform-origin:0 0;
width:113.6364%;
}
/* ═══════════════════════════════════════════════════════════════════════
MERGED 2026-09-13 from css/p-quarterly.css (module CSS, integrated by the integrator)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════════
p-quarterly.css — the Quarterly page (js/quarterly.js): the PAPER VIEWER,
the paged report sheets, the Sign popup. Contract items 3 (PDF page
breaks), 4 and 5.
NEW rules only; the earlier p-quarterly blocks are already merged into
css/audit-additions.css. The integrator concatenates this file after
them. The old draw-canvas block there (.q-sign, .q-sign-tabs,
.q-sign-canvas, .q-sign-pane, .q-sign-typed, .q-sign-preview,
.q-sign-row) is no longer referenced by quarterly.js and may be dropped.
Tokens only. The ONE deliberate exception: a report sheet is PAPER — a
document artefact that must read identically on screen, in the PDF and
to an auditor in either theme — so the sheet itself is white with dark
ink, exactly as the PDF prints it. Everything around the sheet is theme.
═══════════════════════════════════════════════════════════════════════ */
/* ── the sheet: US letter, 8.5 × 11 in = 816 × 1056 px at 96 dpi ────── */
.q-report{display:block;margin:0;padding:0}
.q-page{display:block;box-sizing:border-box;width:816px;height:1056px;padding:.6in;margin:0;
overflow:hidden;position:relative;background:var(--q-paper,#ffffff);color:#131a17}
.q-page[hidden]{display:none!important}
.q-page-body{display:block;min-width:0}
/* an older builder's output, wrapped page by page: the sheet grows to fit */
.q-page-legacy{height:auto;min-height:1056px}
/* one sheet = one page, on paper and in the PDF */
.q-page{page-break-after:always;break-after:page}
.q-page:last-child{page-break-after:auto;break-after:auto}
/* Inside the PDF host (quarterly.js qReportPdfDoc) an EXACT sheet already
ends on a page boundary; html2pdf's 'css' mode would pad it to the next
boundary — a whole blank page — so the break is switched off there and
the slicing does the paging. An older builder's auto-height sheets keep
the CSS break, which is what pads them to a boundary. */
.q-pdf-host .q-page{page-break-after:auto;break-after:auto}
.q-pdf-host .q-page-legacy{page-break-after:always;break-after:page}
.q-pdf-host .q-page-legacy:last-child{page-break-after:auto;break-after:auto}
/* ── the paper viewer ─────────────────────────────────────────────── */
.q-paper-viewer{display:block;margin-top:12px;border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface-2);overflow:hidden;outline:none}
.q-paper-viewer:focus-visible{box-shadow:0 0 0 2px var(--accent)}
.q-own>.q-paper-viewer{margin-top:12px}
.q-doc-app>.q-paper-viewer{margin-top:0}
.q-pv-bar{display:flex;align-items:center;justify-content:center;gap:10px;padding:8px 10px;
border-bottom:1px solid var(--border);background:var(--surface)}
.q-pv-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);color:var(--text-2);
cursor:pointer;transition:background .15s,color .15s}
.q-pv-btn:hover{background:var(--surface-2);color:var(--text)}
.q-pv-btn:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.q-pv-btn:disabled{opacity:.4;cursor:not-allowed}
.q-pv-btn:disabled:hover{background:var(--surface);color:var(--text-2)}
.q-pv-count{min-width:92px;text-align:center;font-size:12.5px;font-weight:600;color:var(--text-2);font-variant-numeric:tabular-nums}
.q-pv-acts{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;padding:10px 12px;
border-bottom:1px solid var(--border);background:var(--surface)}
.q-pv-acts .btn-save{flex:none;padding:9px 20px}
.q-pv-acts .btn-io{flex:none}
/* the sheet is scaled to the stage width with transform; the stage height
is set by quarterly.js because a transform leaves layout size alone */
.q-pv-stage{position:relative;width:100%;overflow:hidden;padding:0}
.q-pv-scale{transform-origin:0 0;will-change:transform}
.q-pv-stage .q-page{box-shadow:var(--shadow-2);margin:0}
.q-pv-stage .q-report{padding:14px 0 18px}
.q-pv-stage .q-page{margin:0 auto}
/* ── the signature marks (shared with the report sheet) ─────────── */
.q-sig-block .sig-image,.q-sig-block .q-sig-img{display:block;max-width:100%;width:320px;height:auto;margin:8px 0 0;
border:1px solid var(--border);border-radius:var(--radius);background:var(--q-paper,#ffffff)}
.q-sig-block.is-compact .sig-image,.q-sig-block.is-compact .q-sig-img{width:220px}
.q-sig-block .q-sig-typed-name{font-family:var(--font);font-size:inherit}
.q-sig-block.is-compact .sig-cursive{font-size:24px}
.q-sig-entered{margin-top:4px;font-size:12px;line-height:1.5;color:var(--text-2)}
.q-sig-entered b{color:var(--text);font-weight:600}
/* ── the Sign popup: stacked above any open modal ───────────────── */
.q-sign-overlay{z-index:300}
.q-sign-modal{width:600px;max-width:95vw;max-height:88vh;overflow-y:auto}
.q-sign-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.q-sign-card{display:flex;flex-direction:column;gap:8px;min-width:0;padding:12px 14px;border:1px solid var(--border-2);
border-radius:var(--radius-lg);background:var(--surface-2);cursor:pointer;text-align:left;
transition:border-color .15s,background .15s,box-shadow .15s}
.q-sign-card:hover{border-color:var(--text-3)}
.q-sign-card:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-sign-card.is-on,.q-sign-card[aria-checked="true"]{border-color:var(--accent);background:var(--accent-bg);box-shadow:0 0 0 1px var(--accent) inset}
.q-sign-card-t{font-size:13px;font-weight:600;color:var(--text)}
.q-sign-card-prev{display:flex;align-items:center;justify-content:center;min-height:76px;padding:8px 10px;
border:1px dashed var(--border-2);border-radius:var(--radius);background:var(--q-paper,#ffffff);overflow:hidden}
.q-sign-card-prev .sig-cursive{color:#131a17;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis;font-size:30px}
.q-sign-card-img{display:block;max-width:100%;max-height:120px;height:auto;width:auto}
.q-sign-card-empty{font-size:12px;color:var(--text-3);font-style:italic}
.q-sign-card-s{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:11.5px;line-height:1.45;color:var(--text-3)}
.q-sign-card-s .btn-mini{flex:none}
.q-sign-modal .q-attest-ck{margin-top:14px}
.q-sign-modal .q-attest-sig{margin-top:8px}
.q-sign-modal .modal-actions .btn-save:disabled{opacity:.45;cursor:not-allowed}
/* ── phones: cards stack, the sheet scales down, nothing overflows ── */
@media (max-width:640px){
.q-sign-cards{grid-template-columns:1fr}
.q-sign-modal{width:100%;max-width:100vw;max-height:92vh;border-radius:var(--radius-lg) var(--radius-lg) 0 0}
.q-pv-acts{justify-content:stretch}
.q-pv-acts .btn-save,.q-pv-acts .btn-io{flex:1 1 auto;justify-content:center}
.q-pv-stage .q-report{padding:10px 0 12px}
}
/* ── print: the sheets only ────────────────────────────────────────── */
@media print{
.q-pv-bar,.q-pv-acts{display:none}
.q-paper-viewer{border:0;background:none}
.q-pv-stage{height:auto!important;overflow:visible}
.q-pv-scale{transform:none!important;margin-left:0!important;width:auto!important}
.q-pv-stage .q-page{box-shadow:none}
.q-page[hidden]{display:block!important}
.sig-cursive{color:#000}
}
/* ═══════════════════════════════════════════════════════════════════════
MERGED 2026-09-13 from css/p-ui.css (module CSS, integrated by the integrator)
═══════════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════
p-ui.css — shared UI additions (module: ui.js / index.html)
Merged into css/audit-additions.css by the integrator. Tokens only.
SIGNATURE TYPEFACE (contract item 6)
Dancing Script 600 is requested in the fonts in index.html and
vendored offline for the desktop build by _installer/vendor-fonts.js.
The stack falls back to the cursive faces Windows / macOS ship with, so
a "system signature" still reads as a signature when the web font is
unavailable. The token lives on :root so it resolves for elements
appended to (modals, the PDF capture wrapper) as well as inside
#root. It is a font, not a colour, so the dark block needs no override.
═══════════════════════════════════════════════ */
:root{
--font-signature:'Dancing Script','Segoe Script','Brush Script MT',cursive;
}
/* .sig-cursive — the rendered "system signature": the owner's full name as
shown on the report, set in the signature typeface. Used by the signature
block on the last report page (dashboard.js) and by the "Use system
signature" preview card in the sign popup (quarterly.js). It is text only:
nothing here may make it look like an image or a drawn stroke. */
.sig-cursive{
font-family:var(--font-signature);
font-weight:600;
font-size:34px;
line-height:1.1;
letter-spacing:.01em;
color:var(--text);
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
max-width:100%;
display:inline-block;
vertical-align:baseline;
}
/* Printed and PDF output is paper ink: black on white, regardless of the
screen theme (the same exception css/styles.css makes for its print rules). */
@media print{
.sig-cursive{color:#000;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
/* ═══════════════════════════════════════════════════════════════════
2026-09-13 — merged from css/p-quarterly.css (contract G visibility)
═══════════════════════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
p-quarterly.css — Quarterly, contract G visibility.
A report that has not been SENT by the supervisor is not its owner's
to see. The employee's Quarterly view renders a quiet row in its
place: the quarter label, "Not sent yet", and one explanatory line.
No report content, no paper viewer, no Download PDF, no Sign.
Tokens only — the row reads the same in light and dark.
The verifier merges this file into css/audit-additions.css.
═══════════════════════════════════════════════════════════════════ */
/* the quiet card that stands in for a not-yet-sent report */
.q-own-notsent{
background: var(--soft);
border-style: dashed;
}
.q-own-notsent .q-card-title{
color: var(--muted);
font-weight: 600;
}
/* the one line the card is allowed to show */
.q-notsent-line{
display: flex;
align-items: flex-start;
gap: 7px;
font-size: 12.5px;
line-height: 1.55;
color: var(--muted);
padding: 9px 0 2px;
border-top: 1px dashed var(--border);
margin-top: 10px;
}
.q-notsent-line svg{
flex: none;
margin-top: 2px;
color: var(--muted);
}
.q-notsent-line b{
color: var(--text);
font-weight: 600;
}
/* the same line standing in for a paper viewer inside another card */
.q-own > .q-notsent-line,
.q-doc .q-notsent-line{
margin-top: 12px;
}
/* ============================================================================
MERGED MODULE CSS - 2026-09-13
Appended by the integrator from the module stylesheets listed below.
Sources, in order:
- css/p-dashboard.css
- css/p-quarterly.css
- css/p-ui.css
The p-*.css files were deleted after this merge. New module CSS goes to a
fresh css/p-.css and is merged here the same way. Never inject a
at runtime.
============================================================================ */
/* ---------------------------------------------------------------------------
SOURCE: css/p-dashboard.css
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════
p-dashboard.css — module: js/dashboard.js and js/audit.js
The integrator merges this file into css/audit-additions.css; nothing
here is injected at runtime.
Two subjects only, both new with the two-signature contract:
1. THE SIGNATURE BLOCK ON THE REPORT PAGE (contract B).
.q-sig-block now holds TWO panes — "Employee certification" and
"Supervisor confirmation". The report sheet is PAPER: it must print
identically whatever theme the app is in, so the block keeps the
module-scoped paper tokens (--qp-*) that css/audit-additions.css
already sets on .q-report, and paper hex where it stands outside a
sheet. That is the same deliberate exception css/styles.css makes
for its own print rules — everything else here is tokens only and
holds in light and dark.
The panes carry an inline grid so a sheet still lays out correctly
before this file is merged; the rules that must beat that inline
style (the narrow-screen stack, print) say so explicitly.
2. THE AUDIT SECTION (contract E): the two signature columns in the
certification-reports table, and the Acting sessions block.
═══════════════════════════════════════════════════════════════════════ */
/* ── 1. the two-pane signature block ────────────────────────────────── */
.q-sig-block .q-sig-panes{
display:grid;
grid-template-columns:1fr 1fr;
gap:18px;
align-items:start;
}
.q-sig-block .q-sig-pane{
min-width:0;
page-break-inside:avoid;
break-inside:avoid;
}
.q-sig-block .q-sig-pane-title{
font-size:9px;
font-weight:700;
text-transform:uppercase;
letter-spacing:.06em;
line-height:1.3;
}
.q-sig-block .q-sig-cap{
font-size:9px;
font-weight:700;
letter-spacing:.04em;
line-height:1.35;
overflow:hidden;
text-overflow:ellipsis;
}
/* the attestation lines above the panes: one per party that HAS signed */
.q-sig-block .q-sig-attest{line-height:1.5}
/* "Unsigned" and who the pane waits on — never styled like a signature */
.q-sig-block .q-sig-await{font-style:normal}
.q-sig-block .q-sig-foot{line-height:1.5}
/* on the letter sheet the panes are paper: the paper tokens win over the
on-screen .q-sig-block tint that css/audit-additions.css sets */
.q-page .q-sig-pane-title,
.q-page .q-sig-cap,
.q-page .q-sig-await,
.q-page .q-sig-attest{color:var(--qp-ink-2)}
.q-page .q-sig-foot{color:var(--qp-ink-4)}
.q-page .q-sig-attest b,
.q-page .q-sig-foot b{color:var(--qp-navy);font-weight:700}
.q-page .q-sig-pane .sig-cursive{font-size:26px}
.q-page .q-sig-pane .sig-image{max-height:48px;max-width:210px}
/* the legacy single-sheet report (.print-month-section, buildReportHTML)
renders the same block. It is paper too, so the on-screen tint and the
theme text colour are reset here the way the sheet resets them. */
.print-month-section .q-sig-block{
margin:10px 0 0;
padding:0;
border:0;
border-radius:0;
background:transparent;
color:#1a2a3a;
page-break-inside:avoid;
break-inside:avoid;
}
.print-month-section .q-sig-block .sig-cursive{color:#0f2340;font-size:26px}
.print-month-section .q-sig-block .sig-image{
display:block;
max-height:48px;
max-width:210px;
width:auto;
height:auto;
object-fit:contain;
background:#ffffff;
}
.print-month-section .q-sig-block .q-sig-ruled{
display:block;
height:34px;
border-bottom:1px solid #33485f;
margin:4px 0 2px;
}
.print-month-section .q-sig-block .q-sig-line b{color:#0f2340;font-weight:700}
/* narrow screens: the two panes stack. The inline grid on the element is
what this has to beat, so the override is explicit. Screen only — a
printed sheet keeps the two panes side by side. */
@media screen and (max-width:640px){
.q-sig-block .q-sig-panes{grid-template-columns:1fr!important;gap:12px!important}
}
/* print: black ink on white, both panes on the same sheet */
@media print{
.q-sig-block .q-sig-panes{grid-template-columns:1fr 1fr!important}
.q-sig-block,
.q-sig-block .q-sig-pane{page-break-inside:avoid;break-inside:avoid}
.q-sig-block .q-sig-pane-title,
.q-sig-block .q-sig-cap,
.q-sig-block .q-sig-await,
.q-sig-block .q-sig-attest,
.q-sig-block .q-sig-foot,
.q-sig-block .q-sig-line,
.q-sig-block .q-sig-state{color:#000}
.q-sig-block .q-sig-attest b,
.q-sig-block .q-sig-foot b,
.q-sig-block .q-sig-line b{color:#000}
.q-sig-block .q-sig-box{background:#fff;border-color:#000}
.q-sig-block .q-sig-ruled{border-bottom-color:#000}
.q-sig-block .sig-cursive{color:#000}
.q-sig-block .sig-image{
background:#fff;
-webkit-print-color-adjust:exact;
print-color-adjust:exact;
}
}
/* ── 2. audit: both signatures per report, and acting sessions ───────── */
/* the certification-reports table gained two signature columns; it scrolls
inside its own wrapper (.stg-table-wrap) rather than widening the page */
.audit-sig-table{min-width:940px}
.audit-sig-table td{vertical-align:top}
.audit-sig-table td .audit-micro{margin-top:2px}
.audit-sig-who{
font-size:12.5px;
line-height:1.4;
color:var(--text);
}
.audit-sig-who strong{font-weight:600}
/* the Acting sessions panel reuses the audit table; only the email lines
under each name need holding to one line */
#audit-panel-acting .audit-table td{vertical-align:top}
#audit-panel-acting .audit-micro{word-break:break-all}
@media (max-width:720px){
.audit-sig-table{min-width:720px}
}
/* ---------------------------------------------------------------------------
SOURCE: css/p-quarterly.css
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════
p-quarterly.css — module CSS for js/quarterly.js (contract C).
Tokens only, light AND dark, no runtime injection: the integrator merges
this file into css/audit-additions.css, which index.html links in all
three ship targets. Every class here is NEW; the existing .q-* rules in
css/styles.css and css/audit-additions.css are untouched.
Blocks below:
1. the supervisor's sign-and-send sheet (.q-send-sign)
2. both signatures, in the app (.q-sig-block-two / .q-sig2*)
3. ready to pass up (.q-passup*)
4. the 'forwarded' pill (.q-pill-fwd)
═══════════════════════════════════════════════════════════════════════ */
/* ── 1. sign and send ─────────────────────────────────────────────────
The signature half of the report sheet: the same two cards the employee
signs with (.q-sign-cards, already styled), the attestation sentence and
the "signing as" line. It sits between the comment and the footer. */
.q-send-sign{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface-2)}
.q-send-sign .q-cmt-h{margin-bottom:8px}
.q-send-sign .q-sign-cards{margin-top:0}
.q-send-sign-req{font-size:11.5px;line-height:1.4;color:var(--text-3);text-align:right}
.q-send-sign-req.is-on{color:var(--ok)}
.q-send-attest{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:var(--text-2)}
.q-send-sign .q-attest-sig{margin-top:8px}
/* the slot already filled: no cards, just what is on the record */
#q-send-sign-done{margin-top:16px;padding:14px;border:1px solid var(--border);border-radius:var(--radius-lg);
background:var(--surface-2)}
#q-send-sign-done .q-sig2-pane{border:0;background:none;padding:0}
/* ── 2. both signatures, side by side ─────────────────────────────────
"Employee certification" and "Supervisor confirmation". A pane with no
signature shows a ruled empty box and the word Unsigned — it must never
look like a signature that was not given. */
/* the outer box stays neutral: green would read as "signed" before the
panes have said anything. Each pane carries its own state. */
.q-sig-block-two{display:block;background:var(--surface-2);border-color:var(--border)}
.q-sig2{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
.q-sig2-pane{min-width:0;padding:10px 12px;border:1px solid var(--ok-br);border-radius:var(--radius);
background:var(--surface)}
.q-sig2-pane.is-empty{border-style:dashed;border-color:var(--border-2);background:var(--surface-2)}
.q-sig2-pane.is-stale{border-color:var(--border);background:var(--surface-3)}
.q-sig2-pane .q-eyebrow{display:block;margin-bottom:6px}
.q-sig2-pane .sig-image,.q-sig2-pane .q-sig-img{width:240px;max-width:100%;margin:4px 0 0}
.q-sig2-pane .q-sig-typed-name{margin:2px 0 0}
.q-sig2-pane.is-stale .sig-image,.q-sig2-pane.is-stale .q-sig-img,
.q-sig2-pane.is-stale .q-sig-typed-name{opacity:.55}
/* the empty pane's ruled box — a signature LINE, plainly empty */
.q-sig2-box{display:flex;align-items:flex-end;height:58px;padding:0 4px 8px;
border-radius:var(--radius);background:var(--surface-3)}
.q-sig2-rule{display:block;width:100%;height:1px;background:var(--border-2)}
.q-sig2-meta{display:flex;align-items:flex-start;gap:6px;margin-top:7px;font-size:12px;line-height:1.5;
color:var(--text-2)}
.q-sig2-meta b{color:var(--text);font-weight:600}
.q-sig2-meta svg{flex:none;margin-top:2px;color:var(--ok)}
.q-sig2-pane.is-empty .q-sig2-meta{color:var(--text-3)}
.q-sig2-pane.is-empty .q-sig2-meta b{color:var(--text-2)}
.q-sig2-pane.is-stale .q-sig2-meta svg{color:var(--text-3)}
.q-sig2-upload{display:flex;align-items:center;gap:6px;font-size:12.5px;line-height:1.5;color:var(--text-2)}
.q-sig2-upload svg{flex:none;color:var(--ok)}
/* one line per party that has signed, above the panes */
.q-sig2-attest{margin:0 0 8px;font-size:11.5px;line-height:1.55;color:var(--text-3)}
.q-sig-block-two.is-compact .q-sig2{gap:10px}
.q-sig-block-two.is-compact .q-sig2-pane{padding:8px 10px}
.q-sig-block-two.is-compact .q-sig2-pane .sig-image,
.q-sig-block-two.is-compact .q-sig2-pane .q-sig-img{width:180px}
.q-sig-block-two.is-compact .q-sig2-box{height:44px}
/* ── 3. signed by the team, ready to pass up ──────────────────────────
One row per report with both timestamps, a send per row and a bulk send;
what has already gone up stays in a quiet list underneath. */
.q-passup .q-card-head-r{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.q-passup-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.q-passup-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:10px 12px;
border:1px solid var(--border);border-radius:var(--radius);background:var(--surface-2)}
.q-passup-row.is-done{background:transparent;border-style:dashed;opacity:.85}
.q-passup-main{min-width:180px;flex:1}
.q-passup-main .q-emp-name{font-size:13px;font-weight:600;color:var(--text)}
.q-passup-when{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px;
font-size:11.5px;line-height:1.45;color:var(--text-3);font-variant-numeric:tabular-nums}
.q-passup-when > span{display:inline-flex;align-items:center;gap:4px}
.q-passup-when > span + span::before{content:'';display:block;width:3px;height:3px;border-radius:50%;
background:var(--border-2);margin-right:6px}
.q-passup-miss{color:var(--warn)}
.q-passup-label{flex:none;font-size:11.5px;font-weight:600;color:var(--text-3);
padding:3px 8px;border-radius:999px;background:var(--surface-3)}
.q-passup-row .btn-mini{flex:none}
.q-passup-send{flex:none;padding:8px 14px}
.q-passup-empty{padding:12px;border:1px dashed var(--border-2);border-radius:var(--radius);
font-size:12.5px;line-height:1.5;color:var(--text-3);background:var(--surface-2)}
.q-passup-done{margin-top:14px;padding-top:12px;border-top:1px solid var(--border)}
.q-passup-done .q-eyebrow{display:block;margin-bottom:8px}
.q-passup-done .q-passup-row{margin-top:8px}
/* ── 4. the fourth report status ──────────────────────────────────────
Icon plus the word, like every other pill — never colour alone. */
.q-pill-fwd{background:var(--surface-3);color:var(--text-2);border:1px solid var(--border-2)}
.q-pill-fwd svg{color:var(--text-3)}
/* ── phones ───────────────────────────────────────────────────────── */
@media (max-width:640px){
.q-sig2{grid-template-columns:1fr}
.q-send-sign-req{text-align:left}
.q-send-sign .q-cmt-h{flex-direction:column;align-items:flex-start;gap:4px}
.q-passup-row{align-items:stretch}
.q-passup-label{align-self:flex-start}
.q-passup-row .btn-mini,.q-passup-send{flex:1 1 auto;justify-content:center}
.q-passup .q-card-head-r .btn-io{width:100%;justify-content:center}
}
/* ── print: the pass-up queue is a screen control, not a record ─────── */
@media print{
.q-passup,.q-send-sign,#q-send-sign-done{display:none}
}
/* ---------------------------------------------------------------------------
SOURCE: css/p-ui.css
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════
p-ui.css — shell module (js/ui.js + index.html)
Contract D: "Open as user" and the acting-as banner.
TOKENS ONLY. No hard-coded colour, no runtime — the
integrator concatenates this into css/audit-additions.css, which
loads after css/styles.css, so every rule here may override the
base system and nothing here needs !important.
Dark theme: the attribute lives on #root AND on
(applyTheme in js/ui.js), so [data-theme=dark] as a plain
attribute selector reaches both. Almost every rule below is
token-driven and therefore already correct in dark; only the
two places that need a different RELATIONSHIP are restated.
═══════════════════════════════════════════════════════════════ */
/* ── the acting-as banner ─────────────────────────────────────────
Directly under the top bar, full width, sticky, in the shell's
normal column flow so it pushes content down instead of covering
it. Unmissable but CALM: the accent tint, never the danger red —
acting as someone else is a legitimate, recorded act, not a fault.
───────────────────────────────────────────────────────────────── */
.imp-banner.ui-actas-bar{
position:sticky;
top:0;
z-index:22;
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap:wrap;
gap:10px;
width:100%;
flex-shrink:0;
padding:9px 20px;
background:var(--accent-bg);
color:var(--text);
border-bottom:1px solid var(--accent-br);
box-shadow:var(--shadow-1);
font-family:var(--font);
font-size:12.5px;
font-weight:500;
line-height:1.45;
}
.imp-banner.ui-actas-bar .ui-actas-mark{
display:inline-flex;
align-items:center;
justify-content:center;
width:22px;
height:22px;
flex-shrink:0;
border-radius:50%;
background:var(--surface);
border:1px solid var(--accent-br);
color:var(--accent-ink);
}
.imp-banner.ui-actas-bar .ui-actas-text{
flex:1 1 320px;
min-width:0;
color:var(--text-2);
}
.imp-banner.ui-actas-bar .ui-actas-text strong{
color:var(--text);
font-weight:700;
}
.imp-banner.ui-actas-bar .ui-actas-exit{
margin-left:auto;
flex-shrink:0;
height:26px;
padding:0 14px;
border-radius:var(--radius);
border:1px solid var(--border-2);
background:var(--surface);
color:var(--text);
font-family:var(--font);
font-size:12px;
font-weight:600;
cursor:pointer;
transition:background .15s var(--ease),border-color .15s var(--ease),color .15s var(--ease);
}
.imp-banner.ui-actas-bar .ui-actas-exit:hover{
background:var(--accent);
border-color:var(--accent);
color:var(--on-ink);
}
.imp-banner.ui-actas-bar .ui-actas-exit:focus-visible{
outline:2px solid var(--ring);
outline-offset:2px;
}
/* Dark: the accent tint is a deep green plane, so the mark's disc
reads better on the panel surface than on the banner's own tint. */
[data-theme=dark] .imp-banner.ui-actas-bar{
background:var(--accent-bg);
border-bottom-color:var(--accent-br);
box-shadow:none;
}
[data-theme=dark] .imp-banner.ui-actas-bar .ui-actas-mark{
background:var(--surface-2);
border-color:var(--accent-br);
color:var(--accent-ink);
}
[data-theme=dark] .imp-banner.ui-actas-bar .ui-actas-exit{
background:var(--surface-2);
border-color:var(--border-2);
color:var(--text);
}
[data-theme=dark] .imp-banner.ui-actas-bar .ui-actas-exit:hover{
background:var(--accent);
border-color:var(--accent);
color:var(--bg);
}
@media (max-width:640px){
.imp-banner.ui-actas-bar{padding:9px 14px;font-size:12px}
.imp-banner.ui-actas-bar .ui-actas-exit{margin-left:0}
}
/* ── the "Open as user" top-bar control ──────────────────────────
Sits on the dark nav plane and inherits .topbar .btn-sm, so only
the icon/label layout is added here.
───────────────────────────────────────────────────────────────── */
.ui-openas-wrap{position:relative;display:flex;align-items:center}
.ui-openas-btn{
display:inline-flex;
align-items:center;
gap:6px;
white-space:nowrap;
}
.ui-openas-btn .ui-openas-btn-ic{display:inline-flex;align-items:center}
.ui-openas-btn[aria-expanded="true"]{
background:var(--nav-2);
color:var(--nav-fg);
}
@media (max-width:760px){
.ui-openas-btn .ui-openas-btn-label{
position:absolute;
width:1px;height:1px;
margin:-1px;padding:0;border:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
}
/* ── the picker popover ──────────────────────────────────────────── */
.ui-openas-pop{
position:absolute;
top:38px;
right:0;
width:336px;
max-width:92vw;
background:var(--surface);
color:var(--text);
border:1px solid var(--border-2);
border-radius:var(--radius-lg);
box-shadow:var(--shadow-pop);
z-index:90;
overflow:hidden;
font-family:var(--font);
}
.ui-openas-head{
display:flex;
align-items:baseline;
justify-content:space-between;
gap:10px;
padding:12px 14px 8px;
}
.ui-openas-title{font-size:13px;font-weight:700;color:var(--text)}
.ui-openas-count{font-size:11px;color:var(--text-3)}
.ui-openas-searchwrap{padding:0 14px 10px}
.ui-openas-search{
width:100%;
height:32px;
padding:0 10px;
border-radius:var(--radius);
border:1px solid var(--border-2);
background:var(--input-bg);
color:var(--text);
font-family:var(--font);
font-size:12.5px;
}
.ui-openas-search::placeholder{color:var(--text-3)}
.ui-openas-search:focus{
outline:none;
border-color:var(--accent);
box-shadow:0 0 0 3px var(--accent-bg);
}
.ui-openas-list{
max-height:320px;
overflow-y:auto;
border-top:1px solid var(--border);
}
.ui-openas-list::-webkit-scrollbar{width:5px}
.ui-openas-list::-webkit-scrollbar-track{background:transparent}
.ui-openas-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}
.ui-openas-row{
display:flex;
align-items:center;
gap:10px;
width:100%;
padding:9px 14px;
border:0;
border-bottom:1px solid var(--border);
background:transparent;
color:var(--text);
font-family:var(--font);
text-align:left;
cursor:pointer;
transition:background .12s var(--ease);
}
.ui-openas-row:last-child{border-bottom:0}
.ui-openas-row:hover{background:var(--entry-hover)}
.ui-openas-row:focus-visible{
outline:2px solid var(--ring);
outline-offset:-2px;
background:var(--entry-hover);
}
.ui-openas-av{display:flex;align-items:center;flex-shrink:0}
.ui-openas-who{display:flex;flex-direction:column;min-width:0;gap:1px}
.ui-openas-name{
font-size:12.5px;
font-weight:600;
color:var(--text);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ui-openas-meta{
font-size:11px;
color:var(--text-3);
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
.ui-openas-none{
padding:18px 14px;
text-align:center;
font-size:12px;
color:var(--text-3);
}
.ui-openas-foot{
padding:9px 14px;
border-top:1px solid var(--border);
background:var(--surface-2);
font-size:11px;
line-height:1.45;
color:var(--text-3);
}
@media (prefers-reduced-motion:reduce){
.imp-banner.ui-actas-bar .ui-actas-exit,
.ui-openas-row{transition:none}
}
/* ============================================================================
MERGED MODULE CSS - 2026-09-13 (copy-and-defaults pass)
Appended by the integrator from the module stylesheets listed below.
Sources, in order:
- css/p-dashboard.css
- css/p-quarterly.css
The p-*.css files were deleted after this merge. New module CSS goes to a
fresh css/p-.css and is merged here the same way. Never inject a
at runtime.
============================================================================ */
/* ---------------------------------------------------------------------------
SOURCE: css/p-dashboard.css
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════════
p-dashboard.css — the signature block on the report page
Merged into css/audit-additions.css by the integrator; never linked at
runtime.
THE COMPRESSED PANE. The full attestation paragraphs that used to sit
above the two panes are gone. Each FILLED pane now ends with one short
certification line (.q-sig-cert) that still says plainly what that
party certified, in small muted type under the signature, the identity
line and the entered-by line. An UNSIGNED pane keeps its ruled box,
"Unsigned" and who it waits on, and carries no certification line.
The report sheet is PAPER: it must print identically whatever theme the
app is in, so these rules use the module-scoped paper tokens (--qp-*)
that css/audit-additions.css already sets on .q-report, and paper hex
where the block stands outside a sheet — the same deliberate exception
the rest of the report styling makes. The element also carries the hex
inline, so a sheet reads correctly before this file is merged; rules
that must beat that inline style say so explicitly.
═══════════════════════════════════════════════════════════════════════ */
/* the one short certification line inside a signed pane */
.q-sig-block .q-sig-cert{
font-size: 9px;
line-height: 1.45;
margin-top: 3px;
max-width: 42em;
text-wrap: pretty;
}
/* on the letter sheet it is paper ink, muted against the identity line */
.q-page .q-sig-cert{ color: var(--qp-ink-4); }
/* the legacy single-sheet report renders the same block, also as paper */
.print-month-section .q-sig-block .q-sig-cert{ color: #6b82a0; }
/* narrow screens: the panes stack (that rule lives with the panes); the
certification line just keeps its own measure */
@media screen and (max-width: 640px){
.q-sig-block .q-sig-cert{ max-width: none; }
}
/* print: black ink on white, and the line stays with its pane */
@media print{
.q-sig-block .q-sig-cert{ color: #000; }
.q-sig-block .q-sig-cert{ page-break-inside: avoid; break-inside: avoid; }
}
/* ---------------------------------------------------------------------------
SOURCE: css/p-quarterly.css
--------------------------------------------------------------------------- */
/* ═══════════════════════════════════════════════════════════════════
p-quarterly.css — Quarterly view (js/quarterly.js).
The copy-trim pass moved two explanations out of body copy and into the
shared quiet caption (ui.js uiHint → class "hint"). Everything the hint
needs for colour and size it already has from styles.css, and .hint reads
from --text-3, so both themes are covered with no second rule. These two
rules only place it.
The integrator merges this file into css/audit-additions.css; nothing is
linked at runtime.
═══════════════════════════════════════════════════════════════════ */
/* "Awaiting your supervisor" carries the state; the hint underneath says who
sends the report and when. It lines up with the label, not with the clock
icon in front of it (14px icon + 7px gap). */
.q-notsent-line + .hint{margin:3px 0 0 21px}
/* the send-back reason field: "required" is on the label, and the hint under
the box says where the reason ends up. */
.q-reject-hint{margin:-9px 0 2px}
/* ==================================================================
MERGED 2026-09-13 - email notifications and profile pictures
Sources, concatenated in this order:
css/p-manage.css
css/p-settings.css
These files were deleted after merging. Nothing is linked at runtime;
index.html links css/styles.css and css/audit-additions.css only.
================================================================== */
/* ------------------------------------------------------------------
SOURCE: css/p-manage.css
------------------------------------------------------------------ */
/* ═══════════════════════════════════════════════════════════════════
p-manage.css — the avatar (ui.js uiAvatar) and the user editor's
profile-photo control (manage.js).
MERGED, NEVER LINKED. index.html links css/styles.css and
css/audit-additions.css only; the integrator concatenates this file
into audit-additions.css. Nothing here is attached at runtime.
Tokens only, light AND dark. Dark uses the plain [data-theme=dark]
selector, exactly as styles.css requires.
═══════════════════════════════════════════════════════════════════ */
/* ── avatar tones ─────────────────────────────────────────────────────
Six restrained tints. uiAvatar() picks one from a stable hash of the
address, so a person keeps the same circle everywhere and two adjacent
rows rarely share one. They are deliberately NOT the fund identity
colours: a fund colour means a fund, and a person is not a fund. No
green either — green is the product's own identity.
Every ink sits at or above 6:1 on its own ground in both themes. */
:root{
--av-1-bg:#e3f0f2; --av-1-ink:#1d5c66; --av-1-br:#c4dfe4;
--av-2-bg:#e6eff8; --av-2-ink:#1b5c8a; --av-2-br:#c6dcec;
--av-3-bg:#f0eaf7; --av-3-ink:#58408c; --av-3-br:#ddd0ee;
--av-4-bg:#f9e9ef; --av-4-ink:#8c3157; --av-4-br:#edcbd8;
--av-5-bg:#f8efe2; --av-5-ink:#7c4a0f; --av-5-br:#ecd9ba;
--av-6-bg:#eceff2; --av-6-ink:#47535f; --av-6-br:#d7dde3;
}
[data-theme=dark]{
--av-1-bg:#10262a; --av-1-ink:#8fd0da; --av-1-br:#1d454c;
--av-2-bg:#0f2434; --av-2-ink:#6cb4e0; --av-2-br:#1d3c53;
--av-3-bg:#241d38; --av-3-ink:#a794db; --av-3-br:#3b3057;
--av-4-bg:#2f1522; --av-4-ink:#e089ae; --av-4-br:#4d2438;
--av-5-bg:#2b1e0d; --av-5-ink:#dda05a; --av-5-br:#4b3618;
--av-6-bg:#1b2027; --av-6-ink:#8d98a6; --av-6-br:#333b45;
}
/* ── the circle itself ────────────────────────────────────────────────
uiAvatar() carries the legacy .team-avatar / .avatar-img classes too,
so every list that already styled those keeps its exact layout. Size,
font size and the tone colours arrive inline from uiAvatar(). */
.ui-avatar{
display:inline-flex;align-items:center;justify-content:center;
flex-shrink:0;border-radius:50%;overflow:hidden;
border:1px solid var(--border);
font-family:var(--font);font-weight:600;line-height:1;letter-spacing:.02em;
text-transform:uppercase;
-webkit-user-select:none;user-select:none;
}
.ui-avatar-photo{background:var(--surface-3);object-fit:cover}
/* 'plain' drops the tint so a surface with its own ground colours it */
.ui-avatar.ui-avatar-plain{background:var(--surface-3);color:var(--text);border-color:var(--border)}
/* ── top bar: the signed-in (or acted-as) person ──────────────────────
The top bar is the one dark plane in the product, so the circle takes
the nav tokens rather than a tint. */
.topbar-user{display:inline-flex;align-items:center;gap:8px}
.topbar-av{display:inline-flex;align-items:center;flex:none}
.topbar-av .ui-avatar.ui-avatar-plain{
background:var(--nav-2);color:var(--nav-fg);border-color:rgba(255,255,255,.18);
}
.topbar-av .ui-avatar-photo{border-color:rgba(255,255,255,.22)}
/* ── user editor, Profile: the photo control ──────────────────────────
Preview, then Add photo / Replace and Remove, then ONE quiet line that
states what is accepted or what went wrong. No second paragraph. */
.mgx-photo{
display:flex;align-items:center;gap:14px;
margin:0 0 16px;padding:12px;
background:var(--surface-2);
border:1px solid var(--border);border-radius:var(--radius-lg);
}
.mgx-photo-prev{flex:none;display:flex;align-items:center}
.mgx-photo-prev .ui-avatar{box-shadow:var(--shadow-1)}
.mgx-photo-side{min-width:0;display:flex;flex-direction:column;gap:7px}
.mgx-photo-label{
font-size:11px;line-height:1;font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--text-3);
}
.mgx-photo-btns{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
/* the file input fills its label, so the whole control is the target and
the browser's own "No file chosen" text never appears */
.mgx-photo-pick{
position:relative;overflow:hidden;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;
}
.mgx-photo-pick input[type=file]{
position:absolute;top:0;left:0;right:0;bottom:0;inset:0;
width:100%;height:100%;opacity:0;cursor:pointer;
}
.mgx-photo-pick:focus-within{outline:2px solid var(--ring);outline-offset:1px}
.mgx-photo-note{font-size:11.5px;line-height:1.45;color:var(--text-3)}
.mgx-photo-note.is-ok{color:var(--ok)}
.mgx-photo-note.is-err{color:var(--danger)}
/* narrow window: the control stacks rather than squeezing the buttons */
@media (max-width:420px){
.mgx-photo{align-items:flex-start}
}
/* ------------------------------------------------------------------
SOURCE: css/p-settings.css
------------------------------------------------------------------ */
/* ═══════════════════════════════════════════════════════════════════════
p-settings.css — Settings, the Email notifications section only.
The rest of the Settings styling already shipped and lives inside
css/audit-additions.css; this file is what the integrator merges on top
of it. Nothing here is injected at runtime.
Tokens only: no literal colour appears in this file, so light and dark
both work from the one token block in styles.css.
EVERY rule is scoped to .stg-shell. manage.js reuses .settings-section
and .settings-row on the Manage screen, and nothing here may reach it.
═══════════════════════════════════════════════════════════════════════ */
/* ── the honest line on a build with no transport, and the same shape for
an empty catalogue: one sentence, no controls ────────────────────── */
.stg-shell .stg-em-none{
font-size:12.5px;line-height:1.5;color:var(--text-3);font-weight:450;
}
/* ── the list ───────────────────────────────────────────────────────── */
.stg-shell .stg-em-list{
border:1px solid var(--border);border-radius:var(--radius-lg);
overflow:hidden;background:var(--surface);
}
/* category eyebrow, same weight as the audit table's group row */
.stg-shell .stg-em-group{
font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
color:var(--text-3);background:var(--surface-2);
padding:7px 12px;border-bottom:1px solid var(--border);
}
.stg-shell .stg-em-group + .stg-em-group{border-top:none}
.stg-shell .stg-em-row{
display:flex;align-items:center;justify-content:space-between;gap:16px;
padding:11px 12px;border-bottom:1px solid var(--border);
}
.stg-shell .stg-em-row:last-child{border-bottom:none}
.stg-shell .stg-em-main{min-width:0}
.stg-shell .stg-em-label{
font-size:13.5px;font-weight:500;color:var(--text);line-height:1.35;
}
/* when the email arrives — the one line that carries the meaning */
.stg-shell .stg-em-when{
font-size:11.5px;line-height:1.45;font-weight:450;color:var(--text-3);margin-top:2px;
}
/* why a certification type has no switch */
.stg-shell .stg-em-req{
font-size:11.5px;line-height:1.45;font-weight:450;color:var(--warn);margin-top:3px;
}
.stg-shell .stg-em-ctl{display:flex;align-items:center;gap:8px;flex-shrink:0}
/* the switch itself is the shared .toggle from styles.css; only the
disabled state (acting as someone else) is added here */
.stg-shell .stg-em-ctl .toggle input:disabled + .toggle-slider{
opacity:.5;cursor:not-allowed;
}
.stg-shell .stg-em-ctl .toggle input:focus-visible + .toggle-slider{
outline:none;box-shadow:0 0 0 3px var(--accent-bg);
}
/* ── delivery counts: quiet, one line, the retry sits at the right ──── */
.stg-shell .stg-em-delivery{
display:flex;align-items:center;justify-content:space-between;gap:10px;
flex-wrap:wrap;margin-top:10px;
}
.stg-shell .stg-em-counts{
font-size:11.5px;line-height:1.4;font-weight:450;color:var(--text-3);
font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
}
.stg-shell .stg-em-counts.bad{color:var(--danger)}
.stg-shell .stg-em-list + .stg-err{margin-top:8px}
@media (max-width:820px){
.stg-shell .stg-em-row{align-items:flex-start}
.stg-shell .stg-em-ctl{padding-top:2px}
}
/* ------------------------------------------------------------------
INTEGRATION ADDENDUM 2026-09-13 — the quarter gear modal gained a
close/reopen action, and the one line above it that says what the
action will do. Tokens only; light and dark come from styles.css.
------------------------------------------------------------------ */
.q-win-state{
font-size:11.5px;line-height:1.5;font-weight:450;color:var(--text-3);
margin:-2px 0 12px;
}