/* ADP2 — the one stylesheet. Tokens first, then the component set (one of each), then the pages that have moved in.
   Brand = the logo's maroon, read from public/images/logo.png (#8c0c04). Warm neutrals. One success, one warning (a pink derived from
   the brand), one danger. White paper, dark text; brand for actions and the current thing only. Five type sizes; numbers tabular. */
:root {
  --brand:#8c0c04; --brand-dark:#6b0903; --brand-tint:#f7e9e7; --brand-ring:rgba(140,12,4,.25);
  --paper:#fff; --ink:#5e5873; --ink-2:#6e6b7b; --muted:#6e6b7b; --line:#ebe9f1; --line-2:#f1f0f5; --soft:#f8f8f8; --soft-2:#f3f2f7;   /* prod's Vuexy palette */
  --ok:#1f7a3f; --ok-bg:#e7f3ea; --warn:#b3395a; --warn-bg:#f9e5eb; --bad:#c2281b; --bad-bg:#fdecea; --night:#4b4a8a; --night-bg:#ebeaf7;
  --fs-1:13px; --fs-2:14px; --fs-3:16px; --fs-4:19px; --fs-5:26px;                      /* a phone; a desk steps up below */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --row:48px; --radius:6px; --shadow:0 8px 24px rgba(31,26,25,.10);
  /* the older names the pages still use */
  --bad-light:var(--bad-bg);
}
@media (min-width: 768px) { :root { --fs-1:14px; --fs-2:15px; --fs-3:17px; --fs-4:20px; --fs-5:28px; } }   /* reads at arm's length */
html { -webkit-text-size-adjust:100%; }
[hidden] { display:none !important; }   /* the hidden attribute beats every component's display rule — a .tag or .btns with hidden stays hidden */
h1, h2, h3, h4 { margin:0 0 var(--s-2); line-height:1.25; font-weight:650; }
h2 { font-size:var(--fs-4); } h1 { font-size:var(--fs-5); }
.muted { color:var(--muted); }
.num, .money, [data-num] { font-variant-numeric:tabular-nums; } .money { text-align:right; white-space:nowrap; }
.kbd { font:var(--fs-1)/1 ui-monospace, SFMono-Regular, Menlo, monospace; border:1px solid var(--line); border-bottom-width:2px; border-radius:3px; padding:1px 5px; background:var(--paper); color:var(--ink-2); }

/* ---- one of each */
.btns { display:flex; gap:var(--s-2); flex-wrap:wrap; align-items:center; margin:var(--s-3) 0; }
label.toggle { display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-size:var(--fs-2); user-select:none; }
label.toggle input[role=switch] { position:absolute; opacity:0; width:0; height:0; }
label.toggle .track { position:relative; width:44px; height:26px; border-radius:13px; background:#b9aea9; transition:background .15s; flex:0 0 40px; }
label.toggle .track:after { content:""; position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.25); transition:left .15s; }
label.toggle input[role=switch]:checked + .track { background:var(--brand); }
label.toggle input[role=switch]:checked + .track:after { left:21px; }
label.toggle input[role=switch]:focus-visible + .track { outline:2px solid var(--brand); outline-offset:2px; }
.tag { display:inline-block; font-size:var(--fs-1); line-height:1.5; padding:2px 8px; border-radius:.25rem; font-weight:500; background:var(--soft-2); color:var(--ink-2); margin-left:6px; vertical-align:middle; white-space:nowrap; font-weight:500; }
.tag.warn, .tag.reh, .tag.adv-warn { background:var(--warn-bg); color:var(--warn); }
.tag.bad { background:var(--bad-bg); color:var(--bad); }
.tag.ok, .tag.crew, .tag.adv, .tag.src { background:var(--ok-bg); color:var(--ok); }
.tag.night, .tag.peer, .tag.rule, .tag.cat, .tag.ns { background:var(--night-bg); color:var(--night); }
.tag.fam { background:var(--brand-tint); color:var(--brand); }
a.tag { text-decoration:none; border:1px solid transparent; } a.tag:hover { border-color:currentColor; }
tr.loud td { background:var(--bad-bg); } tr.loud td.hrs { color:var(--bad); font-weight:700; }
.err, .refusal { color:var(--bad); font-size:var(--fs-2); margin-top:var(--s-1); }
.err.gate { background:var(--bad-bg); padding:10px 12px; border-radius:var(--radius); font-size:var(--fs-2); }
.empty { padding:var(--s-6) var(--s-2); color:var(--muted); text-align:center; }
.derived, .hint { font-size:var(--fs-2); color:var(--muted); } .derived b { color:var(--ink); } .derived .ov { color:var(--warn); }
.status { font-size:var(--fs-2); color:var(--muted); margin-top:var(--s-3); line-height:1.6; } .status b { color:var(--ink); }
table.lines th { text-align:left; font-size:var(--fs-1); color:var(--muted); font-weight:700; padding:8px 12px; border-bottom:1px solid var(--line); letter-spacing:.02em; text-transform:uppercase; }
table.list td, table.lines td { vertical-align:middle; height:var(--row); }   /* the taller rows (operator); padding and rules are the theme's */
.card { padding:var(--s-4); }   /* the theme's card, with room inside */
table.list tr.rec { cursor:pointer; } table.list tr.rec:hover td { background:var(--soft); } table.list tr.rec.sel td { background:var(--brand-tint); }
table.list tr.off td { color:var(--muted); } table.list td.name { font-weight:600; } table.list td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
table.hist { font-size:var(--fs-2); margin-top:var(--s-2); } table.hist th { text-align:left; color:var(--muted); font-weight:600; padding:4px 6px; border-bottom:1px solid var(--line); font-size:var(--fs-1); text-transform:uppercase; letter-spacing:.02em; }
table.hist td { padding:6px; border-bottom:1px solid var(--line-2); } table.hist tr.now td { font-weight:600; } table.hist input { width:100%; padding:4px 6px; border:1px solid transparent; border-radius:3px; min-height:0; } table.hist input:focus { border-color:var(--brand); } table.hist tr.blank td { background:var(--soft); }
.f { display:flex; flex-direction:column; gap:4px; margin-bottom:var(--s-3); font-size:var(--fs-2); color:var(--muted); }
.f input, .f select, .f textarea { font-size:var(--fs-3); color:var(--ink); width:100%; min-width:0; } .f textarea { min-height:72px; }
.row2 { display:flex; gap:var(--s-3); align-items:flex-end; } .row2 .f { flex:1; }
.head { font-size:var(--fs-2); color:var(--muted); margin-bottom:var(--s-3); } .head b { color:var(--ink); } .head .bad { color:var(--bad); font-weight:600; } .head .warn { color:var(--warn); font-weight:600; }
.bar { display:flex; gap:var(--s-4); align-items:center; flex-wrap:wrap; margin-bottom:var(--s-3); font-size:var(--fs-2); } .bar .primary { margin-left:auto; }
.keys { margin-top:var(--s-5); font-size:var(--fs-1); color:var(--muted); display:flex; flex-wrap:wrap; gap:6px 18px; }

/* ---- the slide-in panel (the one panel style): a sheet from the right on a desk, the whole screen on a phone */
#panel, .panel { position:fixed; top:0; right:0; height:100%; width:500px; max-width:100%; background:var(--paper); border-left:1px solid var(--line); box-shadow:var(--shadow); transform:translateX(100%); transition:transform .18s; z-index:1110; overflow:auto; padding:var(--s-4); }   /* above the navbar (1080) and the menu (1100): the × was under the navbar */
#panel.open, .panel.open { transform:none; }
/* example text only where it can be typed over: a read-only or disabled field shows empty when it is empty (operator 2026-09-25 — a locked
   panel's fake phone and "Momo, Mo" read as real values; disabled text is the same grey) */
input:disabled::placeholder, textarea:disabled::placeholder, input[readonly]::placeholder, textarea[readonly]::placeholder { color:transparent !important; opacity:0 !important; }
.state-line { display:flex; align-items:center; gap:8px; margin:0 0 2px; font-size:var(--fs-3); } .state-line[hidden] { display:none; }   /* "Active · Deactivate" at the top of a sheet */
.state-line .st { font-weight:700; } .state-line .st.on { color:var(--ok); } .state-line .st.off { color:var(--bad); } .state-line .sep { color:var(--muted); }
.state-fact { margin:0 0 var(--s-3); } .state-fact:empty { display:none; }
.sheet-backdrop { position:fixed; inset:0; z-index:1105; background:rgba(22,26,34,.34); } .sheet-backdrop[hidden] { display:none; }
/* shadow mode: write controls inert, the reason on hover */
.ro-fields { display:contents; }   /* a fieldset only to disable its fields: no box of its own */
.ro-tip { display:inline-block; cursor:not-allowed; } .ro-tip > [disabled] { pointer-events:none; }
[data-ro][hidden] { display:none !important; }   /* data-write="hide" beats any display rule (the phone's floating Add) */
.ro-note { margin:0 0 var(--s-3); padding:8px 12px; border-radius:var(--radius); background:var(--warn-bg, #fff7e6); color:var(--warn, #8a5a00); font-size:var(--fs-2); }
#panel h3 { margin:0 0 var(--s-3); font-size:var(--fs-4); display:flex; align-items:center; } #panel h3 button { margin-left:auto; background:none; border:0; font-size:22px; cursor:pointer; color:var(--muted); min-height:0; padding:4px 8px; }
#panel h4 { margin:var(--s-4) 0 var(--s-1); font-size:var(--fs-2); border-top:1px solid var(--line); padding-top:var(--s-3); }
.types { display:flex; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; margin-bottom:var(--s-3); }
.types label { flex:1; text-align:center; padding:9px 4px; font-size:var(--fs-2); cursor:pointer; border-right:1px solid var(--line); } .types label:last-child { border-right:0; }
.types input { display:none; } .types input:checked + span { display:block; margin:-9px -4px; padding:9px 4px; background:var(--brand); color:#fff; font-weight:600; }
.confirm { border:1px solid var(--warn); background:var(--warn-bg); border-radius:var(--radius); padding:10px 12px; font-size:var(--fs-2); margin-top:var(--s-3); } .confirm button { margin:6px 6px 0 0; }

/* ---- page: entry (the keyer's grid — every key and focus unchanged) */
form.hdr { display:flex; flex-wrap:wrap; gap:14px 24px; align-items:end; padding:var(--s-3) var(--s-4); border:1px solid var(--line); border-radius:var(--radius); background:var(--soft); margin-bottom:var(--s-4); }
form.hdr label { display:grid; gap:4px; font-size:var(--fs-2); color:var(--muted); } form.hdr select, form.hdr input { font-size:var(--fs-3); color:var(--ink); }
form.hdr .hint { font-size:var(--fs-2); color:var(--muted); padding-bottom:9px; } form.hdr .rehearsal { font-size:var(--fs-1); color:var(--warn); font-weight:600; margin-left:auto; }
.datebox { position:relative; display:flex; gap:6px; align-items:center; } .datebox .field { position:relative; display:inline-block; }
.datebox input { width:10.5em; padding-right:2.2em; font-variant-numeric:tabular-nums; } .datebox .wd { font-size:var(--fs-2); color:var(--ink); min-width:2.2em; }
.datebox button.cal { position:absolute; right:6px; top:50%; height:24px; width:24px; margin-top:-12px; transform:none !important; display:flex; align-items:center; justify-content:center; border:0; background:none; padding:0; cursor:pointer; color:var(--muted); line-height:0; min-height:0; }   /* centred by a margin: the theme's .btn overrides transform (it set the 39 px button at the field's midpoint, crossing its bottom edge — operator 2026-09-25) */ .datebox button.cal:hover { color:var(--brand); }
.calpop { position:absolute; top:100%; left:0; z-index:6; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:var(--s-2); width:19em; }
.calpop .dnav { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; font-weight:600; } .calpop .dnav button { border:0; background:none; cursor:pointer; font-size:16px; padding:2px 8px; min-height:0; }
.calpop table { width:100%; border-collapse:collapse; } .calpop th { font-size:var(--fs-1); color:var(--muted); font-weight:600; padding:2px; } .calpop td { text-align:center; padding:0; }
.calpop td button { width:100%; border:0; background:none; padding:6px 0; cursor:pointer; border-radius:4px; font-variant-numeric:tabular-nums; min-height:0; } .calpop td button:hover { background:var(--brand-tint); }
.calpop td button.sel { background:var(--brand); color:#fff; } .calpop td button.today { outline:1px solid var(--brand); } .calpop td button.other { color:#b8aeaa; }
.page-entry .search { position:relative; margin-bottom:var(--s-3); } .page-entry .search input { width:100%; padding:12px 14px; font-size:var(--fs-4); }
.page-entry .search ul { position:absolute; z-index:5; left:0; right:0; margin:0; padding:4px 0; list-style:none; background:var(--paper); border:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); box-shadow:var(--shadow); max-height:22em; overflow:auto; }
.page-entry .search li { padding:10px 14px; cursor:pointer; display:flex; gap:10px; align-items:center; min-height:48px; font-size:var(--fs-3); } .page-entry .search li.hi { background:var(--brand-tint); } .page-entry .search li .k { margin-left:auto; }
.page-entry table.lines td.n { width:2.2em; color:var(--muted); font-size:var(--fs-2); } .page-entry table.lines td.name { min-width:220px; }
.page-entry table.lines td.hrs { width:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.page-entry table.lines input.t { width:6.2em; padding:8px; text-align:center; font-variant-numeric:tabular-nums; min-height:42px; }
.page-entry tr.line td.name { cursor:grab; } .page-entry tr.line.dragging { opacity:.4; } .page-entry tr.line.over td { border-top:2px solid var(--brand); }
.page-entry tr.line.cursor td.n { color:var(--brand); font-weight:700; } .page-entry tr.existing td { color:var(--muted); background:var(--soft); }
.page-entry tr.bad td.name .nm { color:var(--bad); } .page-entry tr.loud td.hrs .tag { font-weight:400; } .page-entry input.t.bad { border-color:var(--bad); }
.page-entry button.fix { border:1px solid var(--warn); background:var(--warn-bg); color:var(--warn); border-radius:10px; font-size:var(--fs-1); padding:1px 8px; margin-left:6px; cursor:pointer; min-height:0; }
.page-entry .foot { display:flex; align-items:center; gap:var(--s-4); margin-top:var(--s-4); flex-wrap:wrap; } .page-entry .foot .total { font-variant-numeric:tabular-nums; font-weight:600; }

/* ---- page: calendar (mobile-first: the list on a phone, the month on a desk; the modal is the whole screen on a phone) */
.page-calendar .wrap { position:relative; }   /* the calendar fills the card edge to edge; the filter dropdown is positioned in here */
.page-calendar #calendar { width:100%; min-width:0; }
.page-calendar .wrap > .status { margin-top:var(--s-3); }
.page-calendar .filter-menu { position:absolute; z-index:30; min-width:220px; max-width:min(320px, 100%); max-height:60vh; overflow:auto; padding:8px 12px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); font-size:var(--fs-2); }
.page-calendar .filter-menu[hidden] { display:none; }
.page-calendar .filter-menu label { display:flex; gap:8px; align-items:center; margin:2px 0; cursor:pointer; min-height:28px; } .page-calendar .filter-menu .sw { width:10px; height:10px; border-radius:2px; display:inline-block; }
.page-calendar .filter-menu label:first-child { border-bottom:1px solid var(--line-2); padding-bottom:6px; margin-bottom:4px; font-weight:600; }
.page-calendar .fc .fc-filter-button.narrowed { border-color:var(--brand); color:var(--brand); font-weight:600; }
/* "Today" (operator 2026-09-28): the outlined brand button — white fill, 1 px maroon border, maroon text; maroon with white text on hover.
   Today already in view: the same colour, just inert (no grey-out, as agreed). The arrows and the view buttons keep the neutral look. */
.page-calendar .fc .fc-today-button, .page-calendar .fc .fc-today-button:disabled { background:#fff; border:1px solid var(--brand); color:var(--brand); font-weight:600; opacity:1; }
.page-calendar .fc .fc-today-button:disabled { cursor:default; }   /* today already in view: inert, not a grey block */
.page-calendar .fc .fc-today-button:not(:disabled):hover, .page-calendar .fc .fc-today-button:not(:disabled):focus-visible { background:var(--brand); border-color:var(--brand); color:#fff; }
/* TODAY in the grid (operator 2026-09-28): it looked like a holiday (a pale pink wash beside the holidays' pale orange). Now: the date number is a
   maroon circle with white bold text and the cell carries a 1 px maroon ring on the inside; no wash. A holiday that is today shows both — the
   orange wash and its label stay (the bg-event layer, z 2) and the circle and the ring sit above it (z 3). Same in month, week and day views;
   the list view's day header for today takes the ring and its date as the maroon pill. */
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-top { position:relative; z-index:3; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number { display:inline-flex; align-items:center; justify-content:center; min-width:28px; height:28px; padding:0 7px; margin:3px 3px 0 0; border-radius:14px; background:var(--brand); color:#fff !important; font-weight:700; }
.fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-frame::after, .fc .fc-timegrid-col.fc-day-today .fc-timegrid-col-frame::after { content:""; position:absolute; inset:0; box-shadow:inset 0 0 0 1px var(--brand); pointer-events:none; z-index:3; }   /* the ring above the wash */
.fc .fc-col-header-cell.fc-day-today { box-shadow:inset 0 0 0 1px var(--brand); }
.fc .fc-col-header-cell.fc-day-today .fc-col-header-cell-cushion { display:inline-block; margin:4px 0; padding:3px 10px; border-radius:14px; background:var(--brand); color:#fff !important; font-weight:700; }   /* week + day headers: "Mon 9/28" / "Monday" */
.fc .fc-list-day.fc-day-today .fc-list-day-cushion { box-shadow:inset 0 0 0 1px var(--brand); }
.fc .fc-list-day.fc-day-today .fc-list-day-text { display:inline-block; padding:2px 10px; border-radius:14px; background:var(--brand); color:#fff !important; font-weight:700; }
.page-calendar .fc .fc-add-button.btn { margin-left:var(--s-3) !important; font-weight:600; }   /* the app's primary button, at the toolbar's right end */
.page-calendar .fc .fc-add-button.btn-primary { background:var(--brand); border-color:var(--brand); color:#fff; }   /* .fc .fc-button resets the background: say it here */
.page-calendar .fc .fc-add-button.btn-primary:hover, .page-calendar .fc .fc-add-button.btn-primary:focus-visible { background:var(--brand-dark); border-color:var(--brand-dark); color:#fff; box-shadow:0 0 0 2px var(--brand-ring); }
.page-calendar button#add.fab { display:none; }   /* the phone's floating Add; the desk uses the toolbar's */
.fc { font-size:var(--fs-2); --fc-border-color:var(--line-2); --fc-page-bg-color:var(--paper); --fc-neutral-bg-color:var(--soft); --fc-today-bg-color:transparent; --fc-event-border-color:transparent; }   /* no wash on today (operator 2026-09-28): the circle and the ring below say it */
.fc .fc-toolbar-title { font-size:var(--fs-4); font-weight:650; } .fc .fc-toolbar.fc-header-toolbar { margin-bottom:var(--s-3); gap:var(--s-2); }
.fc .fc-button { font-size:var(--fs-2); padding:6px 10px; border-radius:var(--radius); text-transform:none; }
.fc .fc-button-primary { background:var(--paper); border-color:var(--line); color:var(--ink-2); } .fc .fc-button-primary:hover { background:var(--soft); color:var(--ink); }
.fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active { background:var(--brand); border-color:var(--brand); color:#fff; }
.fc .fc-button-primary:focus, .fc .fc-button-primary:not(:disabled).fc-button-active:focus { box-shadow:0 0 0 2px var(--brand-ring); }
.fc .fc-col-header-cell-cushion, .fc .fc-daygrid-day-number { color:var(--ink-2); text-decoration:none; padding:6px; }
.fc .fc-daygrid-day-frame { min-height:6em; } .fc .fc-daygrid-event { border-radius:4px; padding:2px 4px; font-weight:500; } .fc .fc-list-event td { padding:10px 12px; }
/* the three event kinds from the token set: VIP rides = brand, recurring majors = brand tint, standard = neutral; the wire colour is ignored */
.fc .fc-event.vip { background:linear-gradient(135deg, #f6c90e, #e0a800) !important; border-color:#c49000 !important; color:#1a1a1a !important; font-weight:700; box-shadow:0 2px 8px rgba(198,155,0,.35); }   /* prod's VIP Airport gold */
.fc .fc-event.vip .fc-event-title, .fc .fc-event.vip .fc-event-time { color:#1a1a1a; font-weight:700; }
.fc .fc-event.recurring, .fc .fc-event.standard { background:#fff !important; border:1px solid #3788d8 !important; color:#5e5873 !important; font-weight:600; }   /* prod: every other location is white */
.fc .fc-event.recurring .fc-event-title, .fc .fc-event.standard .fc-event-title, .fc .fc-event.recurring .fc-event-time, .fc .fc-event.standard .fc-event-time { color:#5e5873; }
.page-calendar .fc-daygrid-block-event .fc-event-time { flex:none; overflow:visible; }   /* a timed ride shows its WHOLE pickup time in a month cell; the title takes the cut */
.page-calendar .fc-daygrid-block-event .fc-event-title { overflow:hidden; text-overflow:ellipsis; }
.fc .fc-list-event-dot { display:none; }
.page-calendar .filter-menu .sw { background:var(--soft-2); } .page-calendar .filter-menu .sw.vip { background:linear-gradient(135deg, #f6c90e, #e0a800); border:1px solid #c49000; } .page-calendar .filter-menu .sw.rec, .page-calendar .filter-menu .sw.std { background:#fff; border:1px solid #3788d8; }
/* HIGH IMPORTANCE = prod's: red 2 px border, red shadow, bold title, ⚠ — in month, week, day and list. The selectors carry the kind classes so
   they outrank .fc .fc-event.vip/.recurring/.standard (a flagged VIP ride keeps its gold fill and takes the red border) */
.fc .fc-event.hi, .fc .fc-event.hi.vip, .fc .fc-event.hi.recurring, .fc .fc-event.hi.standard { border:2px solid #ea5455 !important; box-shadow:0 2px 8px rgba(234,84,85,.45) !important; }
.fc .fc-event.hi .fc-event-title, .fc .fc-event.hi .fc-event-time, .fc .fc-list-event.hi .fc-list-event-title, .fc .fc-list-event.hi .fc-list-event-time { font-weight:800 !important; }
.fc .fc-event.hi .fc-event-title:before, .fc .fc-list-event.hi .fc-list-event-title a:before { content:"⚠ "; }
.fc .fc-list-event.hi { outline:2px solid #ea5455; outline-offset:-2px; box-shadow:none !important; }   /* a table row takes no border of its own: outline + the cells' glow */
.fc .fc-list-event.hi > td { box-shadow:inset 0 0 12px rgba(234,84,85,.22); }
.fc-event.acked .fc-event-title:after { content:" ✓"; } .fc-event.escalated .fc-event-title:after { content:" ‼"; color:var(--bad); }
.fc .fc-list-day-cushion { background:var(--soft); }

/* ---- per-line actions (review: change employee, delete; entry: remove): icons only, at the far RIGHT, quiet until the row is
   hovered or focused — the eye stays on name · in · out · hours · advance (UI pass item 5) */
table.lines td.acts { width:1%; white-space:nowrap; text-align:right; padding-right:4px; }
table.lines td.acts button { border:0; background:none; color:var(--muted); cursor:pointer; padding:4px; min-height:0; opacity:.22; display:inline-flex; align-items:center; vertical-align:middle; border-radius:4px; transition:opacity .12s; }
table.lines td.acts button svg { width:18px; height:18px; }
table.lines tr:hover td.acts button, table.lines tr:focus-within td.acts button, table.lines tr.gone td.acts button { opacity:1; }
table.lines td.acts button.x:hover { color:var(--bad); background:var(--soft); }
table.lines td.acts button.chg:hover { color:var(--brand); background:var(--brand-tint); }
table.lines tr.gone td.acts { width:auto; } table.lines td.acts input.reason { width:14em; margin-right:6px; }
.page-locations .bar .filters { margin-right:12px; } .page-locations .bar .filters label { margin-right:10px; cursor:pointer; }
.page-month-end section#step6 .body { padding:12px; }

/* ---- phone: calendar and the reports list are designed for it; everything else must not break */
@media (max-width: 767px) {
  #panel, .panel { width:100%; border-left:0; padding:var(--s-4) var(--s-4) 96px; }
  .sheet, .page-analytics .scroll { overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%; }   /* a grid scrolls in its box, the page does not (operator 2026-09-25: every grid) */
  .page-calendar button#add.fab { display:inline-flex; position:fixed; right:var(--s-4); bottom:72px; z-index:41; width:auto; margin:0; box-shadow:var(--shadow); border-radius:22px; padding:10px 18px; }
  .page-calendar .filter-menu { left:0 !important; right:0; max-width:none; }
  .page-calendar .fc .fc-toolbar.fc-header-toolbar { flex-wrap:wrap; } .page-calendar .fc .fc-toolbar-title { font-size:var(--fs-3); }
  .row2 { flex-direction:column; align-items:stretch; }
  .page-entry table.lines td.name { min-width:0; } .page-entry .keys { display:none; }
  table.list td, table.lines td { padding:8px 6px; }
}

/* ---- print: one family for the sheet, the payroll card and the month-end cards */
@page { margin:14mm 12mm 16mm; @bottom-right { content:"Page " counter(page); font:10px -apple-system, "Segoe UI", Roboto, sans-serif; color:#666; } }
@media print {
  .layout-menu, .layout-navbar, .menu, .print-hide, nav, .tag, .badge, .btns, .btn, button, .keys, .banner, .flash, #panel, .panel, aside.side, .search, .no-print { display:none !important; }
  body { display:block; font-size:11px; color:#000; background:#fff; }
  .layout-wrapper, .layout-container, .layout-page, .content-wrapper, .container-xxl { display:block !important; padding:0 !important; margin:0 !important; max-width:none !important; }
  .print-head { display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid #000; padding-bottom:4px; margin-bottom:10px; font-size:12px; }
  .print-head b { font-size:14px; } .print-foot { position:fixed; bottom:0; left:0; right:0; font-size:9px; color:#666; text-align:right; }
  table { page-break-inside:auto; } tr { page-break-inside:avoid; } .card { border:0; padding:0; page-break-inside:auto; }
  .num, .money, td { font-variant-numeric:tabular-nums; }
  /* the Vuexy rebase broke print on every page (found 2026-09-24): the theme sizes .layout-page by flex (inline-size:0 + flex-basis:100%),
     so once the wrappers are display:block it collapses to ZERO width; the navbar also carries .container-xxl, whose display:block above
     overrode its display:none; the theme's padding-top:56px !important on .layout-page outranks the padding:0 above */
  body .layout-content-navbar .layout-page { inline-size:auto !important; width:auto !important; min-inline-size:0 !important; padding-top:0 !important; }
  body nav.layout-navbar, body .layout-navbar.container-xxl { display:none !important; }
  body .layout-page::before, body .content-backdrop { display:none !important; }
  /* the blank last page (found 2026-09-24): the theme's .layout-container has min-height:100vh, so under print the document is EXACTLY one
     page tall whatever the content — a pixel of rounding in the dialog (scale, header/footer space) spills an empty page. Nothing on paper
     takes a viewport height: every wrapper is as tall as its content; the theme's full-height fixed drag-target and overlay are gone */
  html, body { height:auto !important; min-height:0 !important; }
  body .layout-wrapper, body .layout-container, body .layout-page, body .content-wrapper { min-height:0 !important; height:auto !important; }
  body .drag-target, body .layout-overlay, body .layout-menu-toggle { display:none !important; }   /* the sticky navbar's fixed backdrop would wash out the top of every printed page */
  .page-analytics details.an-sec > summary b, .page-analytics details.an-sec > summary span { color:#000 !important; }
}
@media screen { .print-head, .print-foot { display:none; } }

/* ---- shared by the list pages: the scope form (location · month), the tabs, the keys line, the new-report link */
form.scope { display:flex; gap:var(--s-3) var(--s-4); align-items:end; flex-wrap:wrap; margin-bottom:var(--s-3); }
form.scope label { display:flex; flex-direction:column; gap:4px; font-size:var(--fs-2); color:var(--muted); } form.scope select { min-width:12em; }

.tabs { display:flex; gap:var(--s-4); font-size:var(--fs-2); margin-bottom:var(--s-3); border-bottom:1px solid var(--line); }
.tabs a { padding:8px 2px; color:var(--muted); text-decoration:none; border-bottom:2px solid transparent; } .tabs a.on { color:var(--brand); border-bottom-color:var(--brand); font-weight:650; }
details.keys summary { cursor:pointer; list-style:none; display:inline-flex; gap:8px; align-items:center; color:var(--muted); } details.keys summary::-webkit-details-marker { display:none; }
details.keys[open] summary { margin-bottom:8px; } details.keys > span { display:block; margin:2px 0; }

/* ---- page: reports (moved in from the blade) */
.page-reports table.list tr.day th { background:var(--soft); color:var(--ink); font-size:var(--fs-2); padding:6px 8px; border-bottom:1px solid var(--line); }
.page-reports table.list td.loc a { color:var(--brand); text-decoration:none; font-weight:600; }


/* ---- page: report (moved in from the blade) */
.page-report h2 { margin:0 0 4px; font-size:var(--fs-4); }
.page-report .meta { font-size:var(--fs-2); color:var(--muted); margin-bottom:10px; display:flex; gap:18px; flex-wrap:wrap; }
.page-report .actions { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:var(--fs-2); margin:0 0 12px; }
.page-report .actions a { color:var(--brand); text-decoration:none; }
.page-report .actions span.off { color:var(--muted); }
.page-report .actions a.btn, .page-report .actions button { border:1px solid var(--line); border-radius:4px; padding:5px 12px; cursor:pointer; color:var(--ink); background:#fff; font-size:var(--fs-2); }
.page-report .actions a.btn.primary, .page-report .actions button.primary { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }
.page-report table.lines { width:100%; border-collapse:collapse; }
.page-report table.lines th { text-align:left; font-size:var(--fs-1); color:var(--muted); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line); }
.page-report table.lines td { padding:5px 8px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.page-report table.lines td.n { width:2.2em; color:var(--muted); font-size:var(--fs-2); }
.page-report table.lines td.t, .page-report table.lines td.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-report table.lines td.num { text-align:right; }
.page-report table.lines tr.loud td { background:var(--bad-bg); }
.page-report table.lines tr.loud td.hrs { color:var(--bad); font-weight:700; }
.page-report table.lines tr.total td { font-weight:700; border-top:2px solid var(--line); }
.page-report form.hdr { margin:6px 0 10px; } .page-report form.hdr .hint:empty { display:none; }   /* the pickers under the title: one way to move */
.page-report .datebox .arrow { font-size:22px; line-height:1; padding:0 6px; color:var(--brand); text-decoration:none; } .page-report .datebox .arrow.off { color:var(--line); cursor:default; }
.page-report h2.none { color:var(--muted); } .page-report p.empty a { color:var(--brand); }
.page-report .foot details.del { margin-left:auto; } .page-report .delform { display:inline-flex; gap:8px; align-items:center; margin-top:6px; }
.page-report details.del { font-size:var(--fs-2); }
.page-report details.del summary { cursor:pointer; color:var(--bad); }
.page-report details.del form { display:flex; gap:8px; align-items:center; margin-top:6px; }
.page-report details.del input { padding:4px 8px; border:1px solid var(--line); border-radius:4px; width:22em; }
.page-report details.del button { background:var(--bad); color:#fff; border:0; border-radius:4px; padding:5px 10px; cursor:pointer; }
@media print {
.page-report header.top, .page-report .actions, .page-report .keys, .page-report .flash, .page-report .banner, .page-report details.del, .page-report form.hdr,
  .page-report .foot, .page-report .ro-note, .page-report td.acts, .page-report th:last-child:empty, .page-report .cur, .page-report input.reason, .page-report button.fix, .page-report .tag.norate { display:none !important; }   /* the sheet only, never the controls */
  .page-report table.lines input.t, .page-report table.lines input.adv { border:0 !important; background:none !important; padding:0 !important; width:auto; box-shadow:none !important; color:#000; font-size:inherit !important; }   /* a value prints as text, at the sheet's size */
  .page-report table.lines input::placeholder { color:transparent !important; }   /* an empty advance prints empty, not its "—" */
  .page-report tr.line.edited td, .page-report tr.line.gone td { background:none !important; }
  .sheet { overflow:visible !important; }
.page-report main { padding:0; max-width:none; }
.page-report body { font-size:var(--fs-1); }
.page-report table.lines { page-break-inside:avoid; }
.page-report table.lines td, .page-report table.lines th { padding:3px 6px; }
.page-report tr.loud td { background:none !important; }
}

/* ---- page: review (moved in from the blade) */
.page-report table.lines { width:100%; border-collapse:collapse; }
.page-report table.lines th { text-align:left; font-size:var(--fs-1); color:var(--muted); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line); }
.page-report table.lines td { padding:4px 8px; border-bottom:1px solid var(--line-2); vertical-align:middle; }
.page-report table.lines td.n { width:2.2em; color:var(--muted); font-size:var(--fs-2); }
.page-report table.lines td.name { min-width:220px; }
.page-report table.lines td.hrs { white-space:nowrap; font-variant-numeric:tabular-nums; }
.page-report table.lines input.t { width:6.2em; padding:6px 8px; text-align:center; font-variant-numeric:tabular-nums; }
.page-report table.lines input.adv { width:6.5em; padding:6px 8px; text-align:right; font-variant-numeric:tabular-nums; }
.page-report table.lines td .cur { color:var(--muted); font-size:var(--fs-1); margin-right:2px; }
.page-report table.lines input.reason { width:18em; padding:6px 8px; }
.page-report tr.line:not(.edited) input.t, .page-report tr.line:not(.edited) input.adv { border-color:transparent; background:transparent; }
.page-report tr.line:not(.edited) input.t:focus, .page-report tr.line:not(.edited) input.adv:focus { border-color:var(--brand); background:#fff; }
.page-report tr.line.edited td { background:var(--warn-bg); }
.page-report tr.line.gone td { background:var(--bad-bg); color:var(--muted); }
.page-report tr.line.gone input.t, .page-report tr.line.gone input.adv { text-decoration:line-through; }
.page-report tr.loud td { background:var(--bad-bg); }
.page-report tr.loud td.hrs { color:var(--bad); font-weight:700; }
.page-report tr.loud td.hrs .tag { font-weight:400; }
.page-report tr.bad td.name .nm { color:var(--bad); }
.page-report input.t.bad, .page-report input.adv.bad, .page-report input.reason.bad { border-color:var(--bad); }
.page-report button.fix { border:1px solid var(--warn); background:var(--warn-bg); color:var(--warn); border-radius:10px; font-size:var(--fs-1); padding:1px 8px; margin-left:6px; cursor:pointer; }
.page-report .pick { position:relative; display:inline-block; }
.page-report .pick input { width:16em; padding:5px 8px; }
.page-report .pick ul { position:absolute; z-index:5; left:0; margin:0; padding:4px 0; list-style:none; background:#fff; border:1px solid var(--line); border-radius:0 0 6px 6px; box-shadow:0 6px 16px rgba(0,0,0,.08); min-width:16em; }
.page-report .pick li { padding:5px 10px; cursor:pointer; }
.page-report .pick li.hi { background:var(--brand-tint); }
.page-report .foot { display:flex; align-items:center; gap:16px; margin-top:12px; flex-wrap:wrap; }
.page-report .foot .total { font-variant-numeric:tabular-nums; }
.page-report .dnav { display:flex; gap:10px; font-size:var(--fs-2); align-items:center; padding-bottom:7px; }
.page-report .dnav a { color:var(--brand); text-decoration:none; }
.page-report .dnav span.off { color:var(--muted); }
.page-report .dnav .kbd { margin-left:2px; }

/* ---- page: payroll (moved in from the blade) */
.page-payroll .before { border:1px solid var(--line); border-left:4px solid var(--warn); background:var(--soft); padding:8px 12px; margin-bottom:14px; }
.page-payroll .before h3 { margin:0 0 4px; font-size:var(--fs-2); }
.page-payroll .before ul { margin:0; padding-left:18px; font-size:var(--fs-2); }
.page-payroll .before a { color:var(--brand); }
.page-payroll .periods { display:inline-flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.page-payroll .periods a { padding:6px 10px; font-size:var(--fs-2); color:var(--ink); text-decoration:none; border-right:1px solid var(--line); }
.page-payroll .periods a:last-child { border-right:0; }
.page-payroll .periods a.on { background:var(--brand); color:#fff; }
.page-payroll .hint a { color:var(--brand); }
.page-payroll table.pay { width:100%; border-collapse:collapse; }
.page-payroll table.pay th { text-align:left; font-size:var(--fs-1); color:var(--muted); font-weight:600; padding:4px 8px; border-bottom:1px solid var(--line); }
.page-payroll table.pay td { padding:6px 8px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.page-payroll table.pay td.n { width:2.2em; color:var(--muted); font-size:var(--fs-2); }
.page-payroll table.pay td.tick { width:2em; }
.page-payroll table.pay td.tick input { width:16px; height:16px; cursor:pointer; }
.page-payroll table.pay td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-payroll table.pay td.hours { font-weight:700; font-size:var(--fs-3); }
.page-payroll table.pay td.gross { color:var(--muted); }
.page-payroll table.pay button.nm { background:none; border:0; padding:0; font:inherit; font-weight:600; color:var(--brand); cursor:pointer; text-align:left; }
.page-payroll table.pay tr.rec.done td { color:var(--muted); }
.page-payroll table.pay tr.rec.done td.hours { font-weight:400; }
.page-payroll table.pay tr.rec.done button.nm { color:var(--muted); }
.page-payroll .hint a.sel { margin-left:4px; }
.page-payroll tr.card { display:none; }
.page-payroll .wk { display:block; font-size:var(--fs-1); color:var(--ink); white-space:nowrap; }
.page-payroll .wk b { font-variant-numeric:tabular-nums; }
.page-payroll .wk .ext { color:var(--muted); }
.page-payroll tr.detail td { background:var(--soft); padding:6px 12px 10px; }
.page-payroll table.det { border-collapse:collapse; font-size:var(--fs-1); }
.page-payroll table.det td, .page-payroll table.det th { padding:2px 8px; text-align:left; }
.page-payroll table.det td.num { text-align:right; font-variant-numeric:tabular-nums; }
.page-payroll table.det tr.nightrow td.hrs:after { content:" · overnight"; color:var(--muted); }
.page-payroll table.pay tr.total td { font-weight:700; border-top:2px solid var(--line); }
.page-payroll .actions { display:flex; gap:14px; align-items:center; font-size:var(--fs-2); margin:12px 0; }
.page-payroll .actions button { border:1px solid var(--line); border-radius:4px; padding:5px 12px; cursor:pointer; background:#fff; font-size:var(--fs-2); }
.page-payroll .actions button.primary { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }
@media print {
.page-payroll header.top, .page-payroll .before, .page-payroll form.scope, .page-payroll .actions, .page-payroll .banner, .page-payroll .flash, .page-payroll td.tick, .page-payroll th.tick, .page-payroll .hint a, .page-payroll td.rvlinks, .page-payroll th.rvlinks { display:none !important; }
.page-payroll main { padding:0; max-width:none; }
.page-payroll body { font-size:var(--fs-1); }
.page-payroll tr.detail { display:none; }
.page-payroll table.pay tr.rec.done td { color:inherit; }
.page-payroll table.pay tr.rec.done td.hours { font-weight:700; }
.page-payroll table.pay { page-break-inside:auto; }
.page-payroll table.pay tr { page-break-inside:avoid; }
.page-payroll table.pay.sel > thead, .page-payroll table.pay.sel tr.rec, .page-payroll table.pay.sel tr.detail, .page-payroll table.pay.sel tr.total, .page-payroll #progress { display:none !important; }
.page-payroll table.pay.sel tr.card.done { display:table-row; page-break-inside:auto; }
.page-payroll table.pay.sel tr.card.done ~ tr.card.done { page-break-before:always; }
.page-payroll table.det tr { page-break-inside:avoid; }
.page-payroll tr.card td { padding:0 0 12px; }
.page-payroll tr.detail.open { display:table-row; }
.page-payroll tr.detail td { background:none; }
/* the record's name is a button on screen (it opens the lines); the print family hides every button, which left the NAME COLUMN EMPTY on
   paper (found 2026-09-24) — on paper it is the name, plain */
.page-payroll table.pay button.nm { display:inline !important; color:#000 !important; font-weight:600; }
}

/* ---- page: month-end (moved in from the blade) */
.page-month-end section.step { border:1px solid var(--line); border-radius:6px; margin:0 0 14px; }
.page-month-end section.step > h2 { margin:0; font-size:var(--fs-3); padding:8px 12px; background:var(--soft); border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:baseline; }
.page-month-end section.step > h2 .n { font-size:var(--fs-1); color:var(--muted); font-weight:400; }
.page-month-end section.step > h2 .cnt { margin-left:auto; font-size:var(--fs-2); font-weight:400; color:var(--muted); }
.page-month-end section.step > h2 .cnt.zero { color:var(--ok); }
.page-month-end section.step > h2 .cnt.some { color:var(--bad); }
.page-month-end section.step .body { padding:8px 12px; font-size:var(--fs-2); }
.page-month-end section.step .rule { color:var(--muted); font-size:var(--fs-1); margin-bottom:6px; }
.page-month-end table.t { border-collapse:collapse; width:100%; font-size:var(--fs-2); }
.page-month-end table.t th { text-align:left; font-size:var(--fs-1); color:var(--muted); font-weight:600; padding:3px 8px; border-bottom:1px solid var(--line); }
.page-month-end table.t td { padding:3px 8px; border-bottom:1px solid var(--line-2); vertical-align:top; }
.page-month-end table.t td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-month-end table.t a { color:var(--brand); text-decoration:none; }
.page-month-end .fixlink { display:inline-block; margin:1px 6px 1px 0; padding:1px 7px; border:1px solid var(--line); border-radius:10px; font-size:var(--fs-1); color:var(--brand); text-decoration:none; }
.page-month-end .fixlink:hover { border-color:var(--brand); }
.page-month-end .fixlink[data-state="missed"] { color:var(--muted); border-style:dashed; }
.page-month-end .fixlink[data-state="stale"] { color:var(--warn); border-color:var(--warn); }
/* step 1's working days are SET (operator 2026-09-25): the days read as a link; click → Mon–Sun toggles (pills) → Save */
.page-month-end #step1 tr[id] { scroll-margin-top:96px; }
.page-month-end details.wd > summary { list-style:none; cursor:pointer; display:inline-block; border-bottom:1px dashed var(--line); }
.page-month-end details.wd > summary::-webkit-details-marker { display:none; }
.page-month-end details.wd > summary::after { content:" ✎"; color:var(--muted); font-size:.85em; }
.page-month-end details.wd[open] > summary { color:var(--brand); border-bottom-color:var(--brand); }
.page-month-end form.wdf { display:flex; flex-wrap:wrap; gap:6px 8px; align-items:center; margin:6px 0 2px; }
.page-month-end form.wdf .tg { display:flex; flex-wrap:wrap; gap:4px; }
.page-month-end form.wdf .tg label { margin:0; cursor:pointer; }
.page-month-end form.wdf .tg input { -webkit-appearance:none; appearance:none; width:0; height:0; margin:0; border:0; }   /* the pill is the toggle */
.page-month-end form.wdf .tg span { display:inline-block; min-width:2.7em; text-align:center; padding:2px 6px; border:1px solid var(--line); border-radius:12px; font-size:var(--fs-1); color:var(--muted); background:#fff; }
.page-month-end form.wdf .tg input:checked + span { background:var(--brand); border-color:var(--brand); color:#fff; }
.page-month-end form.wdf .tg input:focus-visible + span { outline:2px solid var(--brand); outline-offset:1px; }
.page-month-end form.wdf .hint { flex-basis:100%; font-size:var(--fs-1); color:var(--muted); }
.page-month-end form.unmark { display:inline; margin-right:8px; } .page-month-end form.unmark button { padding:0 4px; font-size:var(--fs-1); color:var(--muted); border:0; background:none; }
/* step 1's listed days (operator 2026-09-25): a missing or not-yet-keyed day is a chip that opens a small prompt — an optional note and
   "Missed" mark it on the spot, or key its report; the chip then reads "… · missed — <note>" with unmark */
.page-month-end details.chip { display:inline-block; vertical-align:top; }
.page-month-end details.chip > summary { list-style:none; cursor:pointer; }
.page-month-end details.chip > summary::-webkit-details-marker { display:none; }
.page-month-end details.chip[open] > summary { border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand); }
.page-month-end form.mark { display:flex; flex-wrap:wrap; gap:6px; align-items:center; width:290px; max-width:100%; margin:2px 8px 6px 0; padding:8px; border:1px solid var(--line); border-radius:6px; background:#fff; box-shadow:0 2px 8px rgba(0,0,0,.08); }
.page-month-end form.mark input[name=note] { flex:1 1 150px; min-width:0; font-size:var(--fs-2); padding:4px 8px; height:auto; }
.page-month-end form.mark a { flex-basis:100%; font-size:var(--fs-1); color:var(--brand); }
.page-month-end form.mark .msg { flex-basis:100%; margin-left:0; }
.page-month-end #step1 tr.just > td { background:var(--ok-bg); }
/* DSO headcount (operator 2026-09-25): a report whose lines differ from the calendar's title — shown quietly, never counted */
.page-month-end .hc { display:inline-block; margin:1px 6px 1px 0; padding:1px 7px; font-size:var(--fs-1); color:var(--muted); border:1px dotted var(--line); border-radius:10px; }
.page-month-end .ok { color:var(--ok); }
.page-month-end tr.hi td { background:var(--bad-bg); }
.page-month-end .himark { color:var(--bad); }
/* step 5's clients (operator 2026-10-07): each client a card — a full-width band in a light brand tint with the brand's left rule, the name in
   the brand at 600 at heading size, "via <entity> · tax" under it, "N invoices · $total" right-aligned; space between the cards so four blocks read */
.page-month-end .client { border:1px solid var(--line); border-radius:6px; margin:0 0 24px; background:#fff; overflow:hidden; }
.page-month-end .client > h3 { margin:0; padding:12px 16px; background:#f4e9e8; border-left:4px solid var(--brand); border-bottom:1px solid var(--line); display:flex; gap:12px; align-items:center; font-size:var(--fs-4); }
.page-month-end .client > h3 .who { display:flex; flex-direction:column; gap:2px; min-width:0; }
.page-month-end .client > h3 .nm { color:var(--brand); font-weight:600; font-size:var(--fs-4); line-height:1.25; }
.page-month-end .client > h3 small { font-weight:400; color:var(--muted); font-size:var(--fs-2); }
.page-month-end .client > h3 .tot { margin-left:auto; font-weight:700; font-size:var(--fs-3); color:var(--ink); text-align:right; white-space:nowrap; }
.page-month-end .client .body { padding:8px 12px; font-size:var(--fs-2); }
.page-month-end .inv { margin:6px 0 10px; }
.page-month-end .inv h4 { margin:0 0 4px; font-size:var(--fs-2); }
.page-month-end .inv table.t td.raw { color:var(--muted); font-size:var(--fs-1); }
.page-month-end .needs { border-left:4px solid var(--warn); background:var(--warn-bg); padding:6px 10px; margin:8px 0; }
.page-month-end .needs b { color:var(--warn); }
.page-month-end .keyed { border-left:4px solid var(--ok); background:var(--ok-bg); padding:6px 10px; margin:8px 0; }
.page-month-end details.inp { margin:6px 0; border:1px solid var(--line); border-radius:4px; padding:4px 10px; }
.page-month-end details.inp summary { cursor:pointer; font-weight:600; font-size:var(--fs-2); }
.page-month-end details.inp form { display:flex; gap:8px; flex-wrap:wrap; align-items:end; margin:6px 0; }
.page-month-end details.inp label { display:flex; flex-direction:column; gap:2px; font-size:var(--fs-1); color:var(--muted); }
.page-month-end details.inp input, .page-month-end details.inp select { padding:4px 6px; border:1px solid var(--line); border-radius:4px; font-size:var(--fs-2); }
.page-month-end details.inp input.short { width:7em; }
.page-month-end details.inp input.mid { width:12em; }
.page-month-end details.inp input.wide { width:20em; }
.page-month-end details.inp button { background:var(--brand); color:#fff; border:0; border-radius:4px; padding:5px 10px; cursor:pointer; font-size:var(--fs-2); }
.page-month-end details.inp button.quiet { background:none; color:var(--bad); border:1px solid var(--line); }
.page-month-end .margin { font-size:var(--fs-2); color:var(--muted); margin-top:6px; }
.page-month-end .cover { font-size:var(--fs-2); color:var(--muted); margin-top:2px; }
.page-month-end .cover b { color:var(--warn); }
.page-month-end .actions { display:flex; gap:14px; align-items:center; font-size:var(--fs-2); margin:10px 0; }
.page-month-end .actions button { border:1px solid var(--line); border-radius:4px; padding:5px 12px; cursor:pointer; background:#fff; font-size:var(--fs-2); }
.page-month-end .actions button.primary { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }
.page-month-end .msg { font-size:var(--fs-1); color:var(--ok); margin-left:8px; }
.page-month-end .msg.bad { color:var(--bad); }
@media print {
.page-month-end header.top, .page-month-end form.scope, .page-month-end .actions, .page-month-end .banner, .page-month-end .flash, .page-month-end section.step, .page-month-end details.inp, .page-month-end .needs, .page-month-end .keyed, .page-month-end .fixlink { display:none !important; }
.page-month-end main { padding:0; max-width:none; }
.page-month-end body { font-size:var(--fs-1); }
.page-month-end .client { border:0; page-break-inside:auto; margin:0; }
.page-month-end .client ~ .client { page-break-before:always; }
.page-month-end .client > h3 { background:none !important; border-bottom:1px solid #000; padding:6px 10px; }
.page-month-end .client > h3 .nm { font-weight:700; }
.page-month-end .inv { page-break-inside:avoid; }
}

/* ---- page: employees (moved in from the blade) */
.page-employees .bar .filters label { margin-right:10px; cursor:pointer; }
.page-employees .bar input[type=search] { padding:6px 8px; border:1px solid var(--line); border-radius:4px; min-width:16em; }
.page-employees .bar a { color:var(--brand); text-decoration:none; }
.page-employees table.list td:nth-child(3), .page-employees table.list td:nth-child(6), .page-employees table.list td:nth-child(7) { white-space:nowrap; }
@media (max-width: 767px) {
.page-employees table.list th:nth-child(2), .page-employees table.list td:nth-child(2), .page-employees table.list th:nth-child(4), .page-employees table.list td:nth-child(4), .page-employees table.list th:nth-child(6), .page-employees table.list td:nth-child(6), .page-employees table.list th:nth-child(7), .page-employees table.list td:nth-child(7) { display:none; }
}

/* ---- page: locations (moved in from the blade) */
.page-locations .feed { font-size:var(--fs-1); color:var(--muted); }
.page-locations .feed b { color:var(--ink); }
.page-locations .note { font-size:var(--fs-1); color:var(--muted); background:var(--soft); border-radius:4px; padding:6px 8px; margin-top:6px; }
.page-locations .note a { color:var(--brand); }

/* ---- page: billing (moved in from the blade) */
.page-billing .wrap { display:flex; gap:16px; align-items:flex-start; }
.page-billing aside.rail { width:230px; flex:0 0 230px; font-size:var(--fs-2); }
.page-billing aside.rail a.client { display:block; padding:8px 10px; border:1px solid var(--line); border-radius:6px; margin-bottom:6px; color:var(--ink); text-decoration:none; }
.page-billing aside.rail a.client.sel { border-color:var(--brand); background:var(--soft); }
.page-billing aside.rail a.client b { display:block; }
.page-billing aside.rail a.client span { color:var(--muted); font-size:var(--fs-1); }
.page-billing aside.rail button { width:100%; margin-top:6px; }
.page-billing .chead { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:8px; }
.page-billing .chead h2 { margin:0; font-size:var(--fs-4); }
.page-billing .chead .facts { color:var(--muted); font-size:var(--fs-2); }
.page-billing .chead a { color:var(--brand); font-size:var(--fs-2); }
.page-billing .btns button, .page-billing button.b { padding:7px 12px; border-radius:4px; border:1px solid var(--line); background:#fff; cursor:pointer; font-size:var(--fs-2); }
.page-billing button.primary, .page-billing .btns button.primary { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:600; }
.page-billing .preview { border:1px solid var(--line); border-radius:6px; padding:8px 12px; font-size:var(--fs-2); margin-top:12px; }
.page-billing .preview h4 { margin:0 0 6px; font-size:var(--fs-2); }
.page-billing .preview table { border-collapse:collapse; width:100%; font-size:var(--fs-1); }
.page-billing .preview td { padding:2px 4px; border-bottom:1px solid #ddd9e6; color:#3b3846; }
.page-billing .preview td.num { text-align:right; white-space:nowrap; }
.page-billing .row3 .f { flex:1; }
@media (max-width: 767px) {
.page-billing .wrap { flex-direction:column; }
.page-billing aside.rail { width:100%; flex:none; }
}

/* ---- page: audit (moved in from the blade) */
.page-audit table.list td.when { white-space:nowrap; color:var(--muted); }
.page-audit table.list td.who { white-space:nowrap; font-weight:600; }
.page-audit table.list td.what a { color:var(--brand); text-decoration:none; }
.page-audit .diff { font-size:var(--fs-1); color:var(--muted); margin-top:3px; }
.page-audit .diff div { white-space:pre-wrap; }
.page-audit .diff b { color:var(--ink); font-weight:600; }
.page-audit .diff .arrow { color:var(--muted); }
.page-audit .pager { display:flex; gap:12px; margin-top:12px; font-size:var(--fs-2); }
.page-audit .pager a { color:var(--brand); }

/* ---- page: settings (moved in from the blade) */
.page-settings table.list td a { color:var(--brand); text-decoration:none; }
.page-settings .f input, .page-settings .f select { padding:6px 8px; border:1px solid var(--line); border-radius:4px; font: inherit; font-size:var(--fs-2); color:var(--ink); }
.page-settings .temp { border:1px solid var(--warn); background:var(--warn-bg); border-radius:4px; padding:10px 12px; margin-top:8px; font-size:var(--fs-2); }
.page-settings .temp code { font: 16px ui-monospace, monospace; background:#fff; padding:2px 6px; border:1px solid var(--line); border-radius:3px; }

/* ---- analytics (the old app's first tab, restored): cards for the month, the year by client and by location with the prior year beside */
.page-analytics form.scope { display:flex; gap:var(--s-4); align-items:flex-end; flex-wrap:wrap; margin-bottom:var(--s-3); }
.page-analytics form.scope .muted { font-size:var(--fs-1); flex-basis:100%; }
.page-analytics table.grid td.neg b { color:var(--bad); }
.page-analytics .py { display:block; color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums; white-space:nowrap; font-weight:400; }
.page-analytics h2 { font-size:var(--fs-3); margin:var(--s-5) 0 var(--s-2); }
.page-analytics .scroll { overflow-x:auto; }
.page-analytics table.grid { border-collapse:collapse; width:100%; font-size:12px; }
.page-analytics table.grid th { text-align:right; font-weight:600; color:var(--muted); padding:6px 5px; border-bottom:1px solid var(--line); white-space:nowrap; text-transform:uppercase; letter-spacing:.03em; font-size:12px; }
.page-analytics table.grid th:first-child, .page-analytics table.grid td:first-child { text-align:left; white-space:normal; max-width:170px; }
.page-analytics table.grid td { text-align:right; padding:5px 4px; border-bottom:1px solid var(--line-2); font-variant-numeric:tabular-nums; vertical-align:top; white-space:nowrap; }
.page-analytics table.grid td.nr b { color:var(--muted); font-weight:500; font-style:italic; }
.page-analytics table.grid td.prior { color:var(--muted); }
.page-analytics table.grid td.empty { color:var(--line); }
.page-analytics table.grid tr.total td { font-weight:700; border-top:2px solid var(--line); }
.page-analytics table.grid tr.unattr td { color:var(--muted); font-style:italic; }
.page-analytics table.grid td .held { display:block; color:var(--warn); font-size:11px; }
.page-analytics table.grid.emp th, .page-analytics table.grid.emp td { font-size:var(--fs-2); }
.page-analytics table.grid td.py { vertical-align:top; }
.page-analytics .note { color:var(--muted); font-size:var(--fs-1); margin:6px 0 0; }
@media print {
  .page-analytics form.scope, .page-analytics .banner { display:none !important; }
  .page-analytics .kpi-card .kpi-held { display:block; }
  .page-analytics table.grid { font-size:9px; } .page-analytics table.grid th, .page-analytics table.grid td { padding:3px 2px; }
  .page-analytics section { page-break-inside:avoid; }
}

/* ---- on the theme: a few widths the theme's full-width controls would otherwise take */
.bar .form-control, .bar .form-select, form.scope .form-control, form.scope .form-select, form.hdr .form-select, form.hdr .form-control { width:auto; display:inline-block; }
.page-report input.adv, .page-entry input.t, .page-report input.t, .page-report input.reason { display:inline-block; }
.page-report input.adv { width:7em; } .page-report input.reason { width:14em; }
.page-reports form.scope { margin-bottom:var(--s-3); }
.btn .icon-base { vertical-align:-3px; }
/* ---- the page card (prod: one card per page, a titled header) */
.card.sv-page { padding:0; } .card.sv-page > .card-header.sv-head { border-bottom:1px solid var(--line); padding:14px 24px; } .card.sv-page > .card-header .icon-base { font-size:1.25rem; }
.card.sv-page > .card-body { padding:20px 24px 24px; }
.card.sv-page .alert:first-child { margin-top:0; }
@media print { .card.sv-page { box-shadow:none !important; border:0 !important; } .card.sv-page > .card-header.sv-head { display:none !important; } .card.sv-page > .card-body { padding:0 !important; } }
/* ---- prod's holidays (display only): the orange federal tint, the red cultural tint, readable labels */
.page-calendar .fc .fc-bg-event { opacity:1 !important; }
.page-calendar .fc .fc-bg-event .fc-event-title { padding-left:24px !important; font-size:.92rem !important; font-weight:600 !important; opacity:.85 !important; font-style:italic; white-space:nowrap !important; overflow:hidden !important; text-overflow:ellipsis !important; max-width:100% !important; }
.page-calendar .fc .fc-bg-event.us-holiday .fc-event-title { color:rgb(140, 60, 15) !important; }
.page-calendar .fc .fc-bg-event.business-holiday .fc-event-title { color:rgb(140, 20, 20) !important; }

/* ---- shadow (Phase E): the morning report + the banner on every page ---- */
.shadow-banner { margin-bottom:var(--s-3); }
.page-shadow h5 { margin:var(--s-5) 0 var(--s-2); }
.page-shadow table.kv th { width:9rem; white-space:nowrap; color:var(--muted); font-weight:600; }
.page-shadow table.list th.num, .page-shadow table.list td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-shadow details summary { cursor:pointer; color:var(--brand); margin:var(--s-2) 0; }

/* ---- analytics DASHBOARD (numbers only, operator 2026-09-24): prod's statistics cards — the grey uppercase label, the heavy number,
   the tinted icon tile per figure (billed cyan, labor red, margin green, margin % orange, hours purple, workforce the brand) ---- */
.page-analytics .an-sub { color:var(--muted); font-size:var(--fs-1); margin:0 0 var(--s-3); }
.page-analytics .kpi-card, .page-analytics .client-card, .page-analytics #ranking, .page-analytics #ytd, .page-analytics #monthly-summary { padding:0; }   /* the site's .card padding would double the kit's card-body gutter */
.page-analytics .kpi-card .card-body { padding:14px 16px; }
.page-analytics .client-card .card-body, .page-analytics #ranking > .card-body, .page-analytics #ytd > .card-body { padding:16px 20px; }
.page-analytics .kpi-top { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; margin-bottom:8px; }
.page-analytics .kpi-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--muted); margin:0 0 4px; }
.page-analytics .kpi-val { font-weight:800; font-size:1.35rem; color:#5e5873; margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
.page-analytics .kpi-val.neg, .page-analytics .ytd-val.neg, .page-analytics td.v.neg, .page-analytics .rank .v.neg { color:var(--bad); }
.page-analytics .kpi-val .nr, .page-analytics .ytd-val .nr, .page-analytics td.v .nr { font-size:.95rem; font-weight:600; font-style:italic; color:var(--muted); }
.page-analytics .kpi-of { font-size:.75rem; color:var(--muted); margin:2px 0 0; }
.page-analytics .kpi-tile { width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.page-analytics .kpi-tile .ti { font-size:20px; width:20px; height:20px; }
.page-analytics .t-billed { background:rgba(0,207,232,.12); color:#00a5ba; }
.page-analytics .t-labor { background:rgba(234,84,85,.10); color:#ea5455; }
.page-analytics .t-margin { background:rgba(40,199,111,.12); color:#1f9d57; }
.page-analytics .t-margin_pct { background:rgba(255,159,67,.14); color:#e0801f; }
.page-analytics .t-hours { background:rgba(115,103,240,.12); color:#7367f0; }
.page-analytics .t-workforce { background:rgba(140,12,4,.08); color:var(--brand); }
.page-analytics .kpi-cmp { font-size:.78rem; color:var(--muted); margin:2px 0 0; white-space:nowrap; }
.page-analytics .chg { font-weight:700; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-analytics .chg.up { color:var(--ok); } .page-analytics .chg.down { color:var(--bad); } .page-analytics .chg.flat, .page-analytics .chg.none { color:var(--muted); font-weight:600; }
.page-analytics .kpi-held { font-size:.72rem; color:var(--warn); margin:6px 0 0; font-weight:600; }
.page-analytics .an-note { margin:-6px 0 var(--s-4); }
.page-analytics h5.an-h { font-size:1rem; font-weight:700; margin:0 0 10px; } .page-analytics h5.an-h span { font-weight:500; color:var(--muted); font-size:.85rem; }
.page-analytics .client-name { font-weight:700; color:#5e5873; margin:0 0 8px; }
.page-analytics table.client-figs { width:100%; border-collapse:collapse; }
.page-analytics table.client-figs th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; padding:5px 0; width:34%; }
.page-analytics table.client-figs td { padding:5px 0; border-top:1px solid var(--line-2); font-variant-numeric:tabular-nums; }
.page-analytics table.client-figs th { border-top:1px solid var(--line-2); } .page-analytics table.client-figs tr:first-child > * { border-top:0; }
.page-analytics table.client-figs td.v { font-weight:700; color:#5e5873; text-align:right; padding-right:12px; white-space:nowrap; }
.page-analytics table.client-figs td.c { text-align:right; font-size:.8rem; width:24%; }
.page-analytics ol.rank { list-style:none; padding:0; margin:0; }
.page-analytics ol.rank li { display:grid; grid-template-columns:28px 1fr auto auto 76px; gap:12px; align-items:center; padding:7px 0; border-top:1px solid var(--line-2); }
.page-analytics ol.rank li:first-child { border-top:0; }
.page-analytics ol.rank .n { width:24px; height:24px; border-radius:6px; background:var(--soft); color:var(--muted); font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.page-analytics ol.rank .name { font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.page-analytics ol.rank li.unattr .name { font-style:italic; color:var(--muted); font-weight:500; }
.page-analytics ol.rank .v { font-weight:700; color:#5e5873; text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-analytics ol.rank .share { color:var(--muted); font-size:.78rem; text-align:right; white-space:nowrap; }
.page-analytics ol.rank .c { text-align:right; font-size:.8rem; }
.page-analytics .show-all { margin-top:8px; }
.page-analytics .ytd-strip { display:grid; grid-template-columns:repeat(3, 1fr); border:1px solid var(--line-2); border-radius:8px; overflow:hidden; }
.page-analytics .ytd-cell { padding:12px 14px; border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); }
.page-analytics .ytd-cell:nth-child(3n) { border-right:0; } .page-analytics .ytd-cell:nth-last-child(-n+3) { border-bottom:0; }
.page-analytics .ytd-val { font-weight:800; font-size:1.15rem; color:#5e5873; margin:0; white-space:nowrap; font-variant-numeric:tabular-nums; }
@media (max-width: 767.98px) {
  .page-analytics .kpi-val { font-size:1.2rem; }
  .page-analytics .kpi-tile { width:34px; height:34px; } .page-analytics .kpi-tile .ti { font-size:17px; }
  .page-analytics ol.rank li { grid-template-columns:24px 1fr auto 64px; } .page-analytics ol.rank .share { display:none; }
  .page-analytics ol.rank .name { white-space:normal; overflow:visible; line-height:1.25; }
  .page-analytics .ytd-strip { grid-template-columns:repeat(2, 1fr); }
  .page-analytics .ytd-cell:nth-child(3n) { border-right:1px solid var(--line-2); } .page-analytics .ytd-cell:nth-child(2n) { border-right:0; }
  .page-analytics .ytd-cell:nth-last-child(-n+3) { border-bottom:1px solid var(--line-2); } .page-analytics .ytd-cell:nth-last-child(-n+2) { border-bottom:0; }
}

/* ---- analytics, round 2 (operator 2026-09-24): prod's five cards + the monthly summary first; everything else collapsed; print = the screen ---- */
.page-analytics .an-print { margin-left:auto; align-self:flex-end; }
.page-analytics .an-head { display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 var(--s-3); }
.page-analytics .an-period { margin:0; font-size:.95rem; color:#5e5873; } .page-analytics .an-period span { color:var(--muted); font-size:.85rem; }
.page-analytics .an-wf { margin:0; font-size:.9rem; color:#6e6b7b; white-space:nowrap; }
.page-analytics .an-wf .ti { color:#ea5455; vertical-align:-2px; } .page-analytics .an-wf b { color:#5e5873; } .page-analytics .an-wf b.a { color:#ea5455; } .page-analytics .an-wf .sep { color:#b0b8c1; margin:0 2px; }
.page-analytics details.an-sec { background:var(--bs-paper-bg, #fff); border-radius:8px; box-shadow:0 2px 6px rgba(47,43,61,.08); margin-bottom:10px; }
.page-analytics details.an-sec > summary { list-style:none; cursor:pointer; padding:12px 18px; display:flex; gap:10px; align-items:baseline; }
.page-analytics details.an-sec > summary::-webkit-details-marker { display:none; }
.page-analytics details.an-sec > summary::before { content:'▸'; color:var(--brand); font-size:.95rem; transition:transform .15s; display:inline-block; }
.page-analytics details.an-sec[open] > summary::before { transform:rotate(90deg); }
.page-analytics details.an-sec > summary b { color:#5e5873; } .page-analytics details.an-sec > summary span { color:var(--muted); font-size:.85rem; }
.page-analytics details.an-sec > :not(summary) { padding:0 12px 12px; }
.page-analytics details.an-sec #ranking, .page-analytics details.an-sec #ytd { box-shadow:none; border:1px solid var(--line-2); }
@media print {
  .page-analytics .an-print, .page-analytics .btn-group, .page-analytics .show-all, .page-analytics #details form.scope { display:none !important; }
  .page-analytics details.an-sec:not([open]) { display:none !important; }                     /* print = what is on screen: closed sections stay out */
  .page-analytics details.an-sec { box-shadow:none; page-break-inside:avoid; }
  .page-analytics details.an-sec > summary::before { content:none; }
  .page-analytics details.an-sec > summary { padding:8px 0; } .page-analytics details.an-sec > :not(summary) { padding:0; }
  .page-analytics .kpi-card, .page-analytics #monthly-summary { box-shadow:none !important; border:1px solid #ddd !important; }
  .page-analytics #kpis { display:flex !important; flex-wrap:nowrap !important; } .page-analytics #kpis > div { flex:1 1 0 !important; width:auto !important; max-width:none !important; }
  .page-analytics .kpi-val { font-size:1.05rem; } .page-analytics .kpi-tile { display:none; } .page-analytics .kpi-card .card-body { padding:8px 10px; }
  .page-analytics table.sv-prod-summary thead th, .page-analytics table.sv-prod-summary tfoot th { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page-analytics table.sv-prod-summary > :not(caption) > * > * { padding:6px 12px; }
  .page-analytics .kpi-tile { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ---- analytics round 3: PROD's Monthly Summary table, measured from prod's own stylesheets (2026-09-24): header 12px uppercase .5px on #4b4b4b,
   cells 14px, padding 10.08px 28px (prod's .72rem 2rem at its 14px base), rows 41.5px, left-aligned, widths by content,
   the location a bold underlined link in the brand, % Profit bold by band, "Grand Total" on #343a40. Ink #3b3846 and row rule #ddd9e6 since
   2026-10-07 (the operator's data-table rules, below) ---- */
.page-analytics table.sv-prod-summary, .page-month-end table.sv-prod-t { margin:0; color:#3b3846; border-color:#ddd9e6; --bs-table-border-color:#ddd9e6; --bs-table-hover-bg:#efedf3; }
.page-analytics table.sv-prod-summary > :not(caption) > * > *, .page-month-end table.sv-prod-t > :not(caption) > * > * { padding:10.08px 28px; border-bottom:1px solid #ddd9e6; text-align:left; vertical-align:middle; }
.page-analytics table.sv-prod-summary thead th, .page-analytics table.sv-prod-summary tfoot th, .page-month-end table.sv-prod-t thead th, .page-month-end table.sv-prod-t tfoot th { font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; line-height:17.4px; color:#fff; }
.page-analytics table.sv-prod-summary thead.table-dark, .page-month-end table.sv-prod-t thead.table-dark { --bs-table-bg:#4b4b4b; --bs-table-color:#fff; }   /* prod's .table-dark; the kit's is #343a40 */
.page-analytics table.sv-prod-summary thead th, .page-month-end table.sv-prod-t thead th { background-color:#4b4b4b !important; }
.page-analytics table.sv-prod-summary tfoot tr.grand-total-row th, .page-month-end table.sv-prod-t tfoot tr.grand-total-row th { background-color:#343a40 !important; color:#fff !important; }
.page-analytics table.sv-prod-summary tbody td, .page-month-end table.sv-prod-t tbody td { font-size:14px; line-height:20.3px; letter-spacing:.14px; font-variant-numeric:tabular-nums; white-space:nowrap; color:#3b3846; }
.page-analytics table.sv-prod-summary a.loc { font-weight:700; color:var(--brand); text-decoration:underline; }
.page-analytics table.sv-prod-summary td.pct { font-weight:700; }
.page-analytics table.sv-prod-summary td.nr, .page-analytics table.sv-prod-summary tr.unattr td { color:var(--muted); font-style:italic; }

/* ---- the data tables read like Payroll's (operator 2026-10-07, "the rows blend into the white background"): the first column — location, date,
   line name — in the brand maroon at the weight of Payroll's employee names (button.nm: 600); light grey zebra on alternate rows, set as the
   row's --bs-table-bg so the theme's cells paint it and a tinted row's own background (tr.hi, tr.just) still wins; the row rule one shade darker
   (#ddd9e6 for #ebe9f1) and the ink one step darker (#3b3846 for #504d5d — the theme's own `.table tbody td` rule set that, so the ink goes on
   the pages' tbody td rules). Month-end's tables, analytics' Monthly Summary and the shadow sheet's tables take the same rules, so the pages
   match; his second block the same day added step 6's billing editor (`.page-billing`: month-end's step 6 section and /billing — the lines list,
   the rate history, the preview tables, which carry no .table class and take the paint directly; a deactivated line stays muted) and the hover
   a step darker (#efedf3) so it shows on a striped row. The first-column selector is pinned at (0,2,4) with :where — above the ink rule, below a
   row-state rule (tr.unattr, td.nr, tr.off) — and an empty-state cell spanning the row is left plain. Print: the striping is off, the maroon
   stays (a text colour prints as it is) ---- */
.page-shadow table.list, .page-billing table.list, .page-billing table.hist { border-color:#ddd9e6; --bs-table-border-color:#ddd9e6; --bs-table-hover-bg:#efedf3; }
.page-shadow table.list tbody td, .page-billing table.list tbody td, .page-billing table.hist tbody td { color:#3b3846; }
.page-billing table.hist td { border-bottom-color:#ddd9e6; }
.page-billing table.list tr.off td { color:var(--muted); }
.page-month-end table.sv-prod-t > tbody > tr:nth-child(even), .page-analytics table.sv-prod-summary > tbody > tr:nth-child(even), .page-shadow table.list > tbody > tr:nth-child(even), .page-billing table.list > tbody > tr:nth-child(even), .page-billing table.hist > tbody > tr:nth-child(even) { --bs-table-bg:#f7f6fa; }
.page-month-end table.sv-prod-t > tbody > tr > td:where(:first-child):where(:not([colspan])), .page-analytics table.sv-prod-summary > tbody > tr > td:where(:first-child):where(:not([colspan])), .page-shadow table.list > tbody > tr > td:where(:first-child):where(:not([colspan])), .page-billing table.list > tbody > tr > td:where(:first-child):where(:not([colspan])), .page-billing table.hist > tbody > tr > td:where(:first-child):where(:not([colspan])) { color:var(--brand); font-weight:600; }
.page-billing .preview table > tbody > tr:nth-child(even) > td { background:#f7f6fa; }
.page-billing .preview table > tbody > tr > td:where(:first-child):where(:not([colspan])) { color:var(--brand); font-weight:600; }
@media print {
  .page-month-end table.sv-prod-t > tbody > tr:nth-child(even), .page-analytics table.sv-prod-summary > tbody > tr:nth-child(even), .page-shadow table.list > tbody > tr:nth-child(even), .page-billing table.list > tbody > tr:nth-child(even), .page-billing table.hist > tbody > tr:nth-child(even) { --bs-table-bg:transparent; }
  .page-billing .preview table > tbody > tr:nth-child(even) > td { background:transparent; }
}
.page-analytics #monthly-summary .an-sum-period { color:var(--muted); font-size:.9rem; }
.page-analytics #monthly-summary .an-sum-note { padding:10px 20px 14px; margin:0; }

/* ---- analytics: the KPI cards expand (operator 2026-09-24) — a detail panel under the card row, one at a time ---- */
.page-analytics .kpi-open { cursor:pointer; }
.page-analytics .kpi-card.kpi-open:hover, .page-analytics .kpi-card.kpi-open:focus-visible { box-shadow:0 0 0 2px rgba(140,12,4,.25), var(--bs-card-box-shadow, 0 2px 6px rgba(47,43,61,.12)); outline:none; }
.page-analytics .kpi-card.on { box-shadow:0 0 0 2px var(--brand) !important; }
.page-analytics .an-wf.kpi-open { text-decoration:underline dotted; text-underline-offset:3px; } .page-analytics .an-wf.on { color:var(--brand); }
.page-analytics .kpi-panel { padding:0; border-top:3px solid var(--brand); }
.page-analytics .kpi-panel > .card-body { padding:16px 20px; }
.page-analytics .kp-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.page-analytics table.kp { margin-bottom:14px; font-variant-numeric:tabular-nums; }
.page-analytics table.kp th { font-size:.72rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.page-analytics table.kp td.num, .page-analytics table.kp th.num { text-align:right; white-space:nowrap; }
.page-analytics table.kp td.c, .page-analytics table.kp th.c { text-align:right; white-space:nowrap; width:9.5rem; font-size:.8rem; }
.page-analytics table.kp tr.loss td { color:var(--bad); font-weight:600; }
.page-analytics table.kp tr.unattr td { color:var(--muted); font-style:italic; }
.page-analytics table.kp td.neg { color:var(--bad); }
.page-analytics table.kp-billing tr.client td { font-weight:700; color:#5e5873; background:var(--soft); border-top:2px solid var(--line); }
.page-analytics table.kp-billing td.ln { padding-left:24px; }
.page-analytics .kp-sub { font-size:.9rem; font-weight:700; color:#5e5873; margin:6px 0 8px; } .page-analytics .kp-sub span { font-weight:500; color:var(--muted); font-size:.8rem; }
.page-analytics ul.kp-names { columns:2; column-gap:24px; padding-left:18px; margin:0 0 8px; font-size:.9rem; } .page-analytics ul.kp-names li span { color:var(--muted); font-size:.8rem; }
@media (max-width: 767.98px) { .page-analytics ul.kp-names { columns:1; } .page-analytics table.kp td.c, .page-analytics table.kp th.c { width:auto; } }
@media print { .page-analytics .kpi-panel[hidden] { display:none !important; } .page-analytics .kp-close { display:none !important; } .page-analytics .kpi-panel { border:1px solid #ddd !important; page-break-inside:auto; } .page-analytics .kpi-card.on { box-shadow:none !important; } }

/* ---- analytics PRINT = the Monthly Summary table ONLY (operator, 2026-09-24): the print head (business · period) and the table with its
   Grand Total — no KPI cards, no open panel, no expanded section, no notes, whatever is open on screen ---- */
@media print {
  .page-analytics .an-head, .page-analytics #kpis, .page-analytics #kpi-panels, .page-analytics .an-note, .page-analytics details.an-sec,
  .page-analytics #monthly-summary .an-sum-note, .page-analytics form.scope { display:none !important; }
  .page-analytics #monthly-summary { border:0 !important; box-shadow:none !important; margin:0 !important; }
  .page-analytics #monthly-summary .table-responsive { overflow:visible !important; }                      /* no scrollbar on paper */
  .page-analytics #monthly-summary table.sv-prod-summary > :not(caption) > * > * { padding:7px 10px !important; white-space:nowrap; }
  .page-analytics #monthly-summary table.sv-prod-summary tbody td { font-size:12px; }
}

/* ---- the page actions slot (the app-wide Print rule): top right of the page card's header; a header-only card on pages without one ---- */
.card.sv-page > .card-header.sv-head .sv-actions .btn { white-space:nowrap; }
.card.sv-headonly { padding:0; } .card.sv-headonly > .card-header.sv-head { border-bottom:0; }
@media print { .card.sv-headonly { display:none !important; } }

/* ---- payroll: the Mon–Sun weeks as COLUMNS (operator 2026-09-24) — one line per record; a straddling week says "(N of 7 days)" once, in its
   header; its cells carry the in-period hours with the whole week's small and grey in brackets; an empty week is blank. No colour, no flag
   on the numbers (ch4 decision 1) ---- */
.page-payroll table.pay th.wkc, .page-payroll table.pay td.wkc { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }
.page-payroll table.pay th.wkc small { display:block; font-weight:500; text-transform:none; letter-spacing:0; opacity:.8; font-size:.7rem; }
.page-payroll table.pay td.wkc small.full { color:var(--muted); font-size:.75rem; }
.page-payroll table.pay td.wkc.over { color:var(--bad); font-weight:700; }
/* a record on its own workweek (operator 2026-10-01: Windrose housekeeping, Saturday–Friday from Sat Oct 3 2026): the tag by the name, its week
   cells naming their own days, and the changeover week both ways under the name with the higher marked */
.tag.wk-tag { background:var(--night-bg); color:var(--night); }
.page-payroll table.pay td.wkc small.wkl { color:var(--muted); font-size:.7rem; font-weight:500; margin-right:4px; }
.page-payroll .wk-trans { margin-top:2px; font-size:var(--fs-1); color:var(--muted); } .page-payroll .wk-trans b { color:var(--ink); }   /* it wraps: unbroken, it pushed the week columns off the paper */
.page-payroll .wk-trans b.hi, .page-payroll .ts-trans b.hi { color:var(--warn); }
.page-payroll .ts-trans { margin-top:4px; font-size:12px; color:#000; }
@media print { .page-payroll table.pay td.wkc small.wkl { color:#555 !important; display:inline-block; text-decoration:none; } .page-payroll .wk-trans { font-size:9.5px; line-height:1.3; font-weight:400; }
  .page-payroll .wk-trans, .page-payroll .wk-trans b, .page-payroll .ts-trans b.hi { color:#000 !important; } }
.page-payroll #hint { margin:var(--s-2) 0; color:var(--ink-2); }
.page-payroll details.keys#howto { margin:0 0 var(--s-3); }
@media print { .page-payroll #hint .hint-tail, .page-payroll details.keys#howto { display:none !important; } }
@media print { .page-payroll table.pay td.wkc { color:#000 !important; } .page-payroll table.pay td.wkc small.full { color:#777 !important; font-size:.8em !important; } .page-payroll table.pay td.wkc.over { font-weight:700; text-decoration:underline; } }

/* ---- the header row carries the page's selectors (operator 2026-09-24): title · selectors inline · Print at the far right; no field labels,
   compact controls; the tables start sooner. On a phone: title + Print on the first line, the selectors on the second ---- */
.card.sv-page > .card-header.sv-head { flex-wrap:wrap; row-gap:8px; }
.sv-controls { display:flex; align-items:center; gap:8px; margin-left:12px; }
.sv-controls form.sv-hdr-form { display:flex; align-items:center; gap:8px; margin:0; flex-wrap:nowrap; }
.sv-controls .form-select-sm { width:auto; min-width:0; min-height:31px; height:31px; padding-top:3px; padding-bottom:3px; }
.page-payroll .sv-controls .periods a { padding:4px 10px; line-height:21px; white-space:nowrap; }
.page-payroll .sv-controls .periods { display:inline-flex; }
.sv-subline { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 18px; margin:0 0 10px; }
.sv-subline .hint { margin:0 !important; } .sv-subline details.keys { margin:0 !important; }
.sv-subline details.keys[open] { flex-basis:100%; }
@media (max-width: 767.98px) {
  .card.sv-page > .card-header.sv-head .sv-actions { order:2; }
  .card.sv-page > .card-header.sv-head .sv-controls { order:3; flex-basis:100%; margin-left:0; }
  .sv-controls form.sv-hdr-form { flex-wrap:nowrap; gap:6px; }
  .page-payroll .sv-controls .periods a { padding:4px 6px; font-size:.8rem; white-space:nowrap; }   /* the selectors fit one phone line */
  .sv-controls .form-select-sm { padding-left:8px; padding-right:26px; background-position:right 6px center; font-size:.8rem; }
}
@media print { .sv-controls, .sv-subline details.keys { display:none !important; } }

/* ---- payroll: the printed card is a TIMESHEET (operator 2026-09-24; prod's Timesheets card as the model) ---- */
.page-payroll .hint-sel { display:none; }
.page-payroll .ts-head, .page-timesheets .ts-head { display:flex; justify-content:space-between; align-items:flex-end; gap:16px; border-bottom:2px solid #000; padding-bottom:8px; margin-bottom:10px; }
.page-payroll .ts-kicker, .page-timesheets .ts-kicker { font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:#666; }
.page-payroll .ts-name, .page-timesheets .ts-name { font-size:22px; font-weight:800; line-height:1.15; color:#000; }
.page-payroll .ts-period, .page-timesheets .ts-period { font-size:13px; color:#333; margin-top:2px; }
.page-payroll .ts-nums, .page-timesheets .ts-nums { display:flex; gap:18px; font-size:13px; color:#333; white-space:nowrap; }
.page-payroll .ts-nums b, .page-timesheets .ts-nums b { font-size:16px; color:#000; margin-left:4px; font-variant-numeric:tabular-nums; }
.page-payroll table.ts, .page-timesheets table.ts { width:100%; border-collapse:collapse; font-size:12px; font-variant-numeric:tabular-nums; }
.page-payroll table.ts th, .page-payroll table.ts td, .page-timesheets table.ts th, .page-timesheets table.ts td { border:1px solid #bbb; padding:4px 8px; text-align:left; }
.page-payroll table.ts thead th, .page-timesheets table.ts thead th { background:#343a40; color:#fff; font-size:10px; text-transform:uppercase; letter-spacing:.04em; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.page-payroll table.ts .num, .page-timesheets table.ts .num { text-align:right; }
.page-payroll table.ts tr.ts-total th, .page-timesheets table.ts tr.ts-total th { background:#343a40; color:#fff; font-weight:700; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.page-payroll table.ts tr.ts-total th:first-child, .page-timesheets table.ts tr.ts-total th:first-child { text-align:center; }
.page-payroll .ts-weeks, .page-timesheets .ts-weeks { margin-top:10px; font-size:13px; color:#000; }
.page-payroll .ts-weeks .ext, .page-timesheets .ts-weeks .ext { color:#777; font-size:.85em; }
.page-payroll .ts-legend, .page-timesheets .ts-legend { margin-top:4px; font-size:11px; color:#555; }
@media print {
  /* a SELECTION prints (some records ticked): the status line counts the selection, never the whole period; the table-wide legend
     goes — a card that carries a bracket prints its own */
  .page-payroll:has(table.pay.sel) #hint .hint-all { display:none !important; }
  .page-payroll:has(table.pay.sel) #hint .hint-sel { display:inline !important; }
  .page-payroll table.pay.sel ~ #legend { display:none !important; }
}
/* the card row is a <tr class="card">: the theme's .card look (shadow, border, radius) must not reach paper or the timesheet's own head */
.page-payroll table.pay tr.card { box-shadow:none !important; border:0 !important; background:none !important; border-radius:0 !important; }

/* ---- month-end (operator 2026-09-24): each step opens with a bar — a large maroon number badge, the title at heading size, the status at the
   right (red with the count / green "nothing to fix"), the explanation muted under it; every table is analytics' (prod's) table ---- */
.page-month-end section.step { background:#fff; overflow:hidden; }
.page-month-end .me-bar { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line); }
.page-month-end .me-n { flex:none; width:36px; height:36px; border-radius:50%; background:var(--brand); color:#fff; font-size:18px; font-weight:700; line-height:36px; text-align:center; }
.page-month-end .me-bar h2 { margin:0; font-size:var(--fs-4); font-weight:700; line-height:1.25; }
.page-month-end .me-bar .cnt { margin-left:auto; font-size:var(--fs-2); font-weight:600; color:var(--muted); white-space:nowrap; }
.page-month-end .me-bar .cnt.some { color:var(--bad); } .page-month-end .me-bar .cnt.zero { color:var(--ok); }
.page-month-end .me-count { margin:0; padding:8px 16px 10px; color:var(--muted); font-size:var(--fs-1); }   /* step 3's counts; the steps' explanations are behind the "?" */
.page-month-end .me-none { margin:0; padding:4px 16px 14px; }
.page-month-end .me-hold { display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:12px 16px; }
.page-month-end details.me-covered { padding:10px 16px; border-top:1px solid var(--line); }
.page-month-end details.me-covered[open] summary { margin-bottom:8px; }
.page-month-end table.sv-prod-t td.wrap { white-space:normal; }
.page-month-end table.sv-prod-t .st-bad { color:var(--bad); font-weight:700; }
.page-month-end .fixlink.quiet { color:var(--muted); background:var(--soft); }                     /* not yet keyed / a weekdays-only holiday: listed, not counted */
.page-month-end .me-bar .cnt .cnt-wait { color:var(--muted); font-weight:400; }
.page-month-end table.sv-prod-t tfoot .tf-sub { font-weight:400; text-transform:none; letter-spacing:0; margin-left:10px; opacity:.85; }
.page-month-end .inv .table-responsive { border:1px solid #ebe9f1; border-radius:4px; }
/* step 3's scan has seven columns since the Overlap column (operator 2026-10-01). At prod's 28px cell sides the table is 1505px in a card that
   stops at 1390px, so the review links slid out of view at every window width (measured in headless Chrome; six columns were 1317px). The inner
   cell sides take 14px and the outer edges keep 28px, in line with the other steps' tables: September 2026's eleven rows, Republic's night
   lines among them, are 1371px. The Kind cell may wrap, so a month with longer lines narrows that column before the links leave the card */
@media (min-width: 768px) {
  .page-month-end #step3 table.sv-prod-t > :not(caption) > * > * { padding-left:14px; padding-right:14px; }
  .page-month-end #step3 table.sv-prod-t td.muted { white-space:normal; }
  .page-month-end #step3 table.sv-prod-t > :not(caption) > * > :first-child { padding-left:28px; }
  .page-month-end #step3 table.sv-prod-t > :not(caption) > * > :last-child { padding-right:28px; }
}
/* the overlap's hours are the figure he reads (operator 2026-10-01): bold in the warning colour, in the Overlap column and on the summary line's
   total; the window beside it stays plain. Step 3 is never on paper (the print rule hides every step), so print is untouched */
.page-month-end .ov-h { color:var(--warn); font-weight:700; }
@media (max-width: 767.98px) {
  .page-month-end .me-bar { flex-wrap:wrap; } .page-month-end .me-bar .cnt { margin-left:48px; flex-basis:100%; white-space:normal; }
  .page-month-end table.sv-prod-t > :not(caption) > * > * { padding:8px 12px; }        /* the table scrolls sideways; a wrapping cell keeps a readable width */
  .page-month-end table.sv-prod-t td.wrap { min-width:240px; }
  .page-month-end details.chip[open] { display:block; } .page-month-end form.mark { width:auto; }   /* the open prompt takes the cell's width: "Missed" stays on screen */
  .page-month-end table.sv-prod-t td.wd { white-space:normal; } .page-month-end form.wdf { max-width:230px; } .page-month-end details.wd[open] { min-width:200px; }   /* the Mon–Sun toggles wrap in the cell, two rows */
}
@media print {
  .page-month-end .sv-subline { display:none !important; }
  .page-month-end table.sv-prod-t thead th, .page-month-end table.sv-prod-t tfoot th { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .page-month-end table.sv-prod-t > :not(caption) > * > * { padding:6px 10px !important; }
  .page-month-end table.sv-prod-t tbody td { font-size:12px; }
  .page-month-end .table-responsive { overflow:visible !important; }
}

/* ---- phone: the report page's grid — after the base width rules above, so these win (the early phone block sits before them) */
@media (max-width: 767px) {
  .page-report table.lines td, .page-report table.lines th { padding:4px 4px; font-size:var(--fs-2); }
  .page-report table.lines td.name { min-width:0; white-space:normal; }
  .page-report table.lines input.t, .page-report table.lines input.adv { width:4.6em; padding:5px 2px; }
  .page-report table.lines td .cur { display:none; } .page-report .pick input { width:10em; }
}

/* ---- phone: every grid that overflowed (entry, payroll, the lists, audit, shadow, billing) — tighter columns; the .sheet box scrolls */
@media (max-width: 767px) {
  .page-entry table.lines input.t { width:4.6em; padding:6px 2px; min-height:40px; } .page-entry table.lines td { padding:6px 4px; }
  .page-payroll table.pay td, .page-payroll table.pay th { padding:5px 4px; } .page-payroll .wk { white-space:normal; } .page-payroll table.pay td.hours { font-size:var(--fs-2); }
  table.list td, table.list th { padding:7px 5px; }
  .page-billing #card { min-width:0; max-width:100%; } .page-billing .chead .facts, .page-billing .banner { white-space:normal; overflow-wrap:anywhere; }
  .page-shadow table.kv th { width:auto; white-space:normal; }
  .page-report form.hdr { gap:10px 14px; } .page-report .datebox input { width:8.2em; } .page-report .datebox .arrow { padding:0 3px; }   /* ‹ date › and the weekday fit the card */
}
@media print { .sheet, .page-analytics .scroll { overflow:visible !important; } }

/* ---- /timesheets (operator 2026-09-27, review 3.2): the payroll page's timesheet card for a manager too — hours only. The card's
        own rules (.ts-head … .ts-legend above) are shared with .page-payroll; here: the screen list, and on paper the cards alone ---- */
.page-timesheets table.list td.n { width:2.2em; color:var(--muted); font-size:var(--fs-2); }
.page-timesheets table.list td.name { font-weight:600; }
.page-timesheets table.list th.num, .page-timesheets table.list td.num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.page-timesheets table.list td.hours { font-weight:700; font-size:var(--fs-3); }
.page-timesheets table.list td.weeks span { display:inline-block; margin-right:12px; white-space:nowrap; font-size:var(--fs-1); }
.page-timesheets table.list td.weeks b { font-variant-numeric:tabular-nums; }
.page-timesheets table.list td.one { text-align:right; font-size:var(--fs-1); } .page-timesheets table.list td.one a { color:var(--brand); }
.page-timesheets table.list tr.total td { font-weight:700; border-top:2px solid var(--line); }
.page-timesheets #hint { margin:var(--s-2) 0; color:var(--ink-2); } .page-timesheets #hint a { color:var(--brand); }
.page-timesheets details.keys#howto { margin:0 0 var(--s-3); }
.page-timesheets .ts-cards { display:none; }
@media print {
  .page-timesheets .ts-list, .page-timesheets .sv-subline, .page-timesheets form.scope, .page-timesheets .banner, .page-timesheets .flash { display:none !important; }
  .page-timesheets .ts-cards { display:block; }
  .page-timesheets .ts-card { page-break-inside:auto; padding:0 0 12px; }                    /* never page-break-after (rehearsal 5: a long card left page 1 empty) */
  .page-timesheets .ts-card + .ts-card { page-break-before:always; break-before:page; }   /* one card per page, the payroll page's way */
}

/* ---- the sheet: a supervisor's own-line delete (operator 2026-09-27) ---- */
.page-report .own-delete { margin:12px 0; }
.page-report .own-delete summary { cursor:pointer; color:var(--bad); font-weight:600; }
.page-report .own-line { display:flex; gap:8px; align-items:center; margin:8px 0; flex-wrap:wrap; }
.page-report .own-line .own-what { min-width:220px; }
.page-report .own-line input { max-width:320px; }
@media print { .page-report .own-delete { display:none !important; } }

/* ---- CANCELLED events (operator 2026-09-28): the event stays, greyed and struck through, the reason beside the title in every view; a cancelled
   high-importance event loses its red and its ⚠ (it asks nothing of anyone). The selectors carry the kind classes so they outrank the kind fills. */
.fc .fc-event.cancelled, .fc .fc-event.cancelled.vip, .fc .fc-event.cancelled.recurring, .fc .fc-event.cancelled.standard, .fc .fc-event.cancelled.hi, .fc .fc-event.cancelled.hi.vip, .fc .fc-event.cancelled.hi.recurring, .fc .fc-event.cancelled.hi.standard {
  background:var(--soft, #f3f4f6) !important; border:1px dashed var(--muted, #9aa0a6) !important; color:var(--muted, #6b7280) !important; box-shadow:none !important; font-weight:500 !important; opacity:.85; }
.fc .fc-event.cancelled .fc-event-title, .fc .fc-event.cancelled .fc-event-time, .fc .fc-list-event.cancelled .fc-list-event-title, .fc .fc-list-event.cancelled .fc-list-event-title a, .fc .fc-list-event.cancelled .fc-list-event-time { color:var(--muted, #6b7280) !important; font-weight:500 !important; text-decoration:line-through; }   /* the list's title is an <a>: struck itself, not by propagation */
.fc .fc-event.cancelled.hi .fc-event-title:before, .fc .fc-list-event.cancelled.hi .fc-list-event-title a:before { content:""; }
.fc .fc-list-event.cancelled.hi { outline:0; } .fc .fc-list-event.cancelled.hi > td { box-shadow:none; }
.fc .fc-event.cancelled.acked .fc-event-title:after, .fc .fc-event.cancelled.escalated .fc-event-title:after { content:""; }
.fc .fc-event.cancelled .why, .fc .fc-list-event.cancelled .why { display:inline-block; text-decoration:none; font-style:italic; font-weight:500; margin-left:4px; }   /* an inline-block takes no strike from its parent */
.fc .fc-list-event.cancelled .fc-list-event-title a { color:var(--muted, #6b7280); }
#panel .cancel-box { border-color:var(--bad, #b91c1c); background:var(--bad-bg, #fef2f2); }
/* the date trap (operator 2026-09-29): Duplicate's "to which date?" is a plain question — neutral; the past-date question keeps .confirm's warning look */
#panel .dup-box { border-color:var(--muted, #6e6b7b); background:var(--soft, #f8f8f8); }
/* stage 1 of the calendar test (operator 2026-10-01): the driver + flag block on a ride's sheet in the parallel month — live, so it reads as a
   plain part of the sheet, not as a warning; under it the ride's list of what would have been sent */
.page-calendar .confirm.assign-box { border-color:var(--line); background:var(--soft); }
.page-calendar #sends table.hist { width:100%; } .page-calendar #sends table.hist td:first-child, .page-calendar #sends table.hist td:last-child { white-space:nowrap; }   /* the sheet is a side panel: the step and the name wrap, the two times do not */
#panel .dup-box .f { margin-bottom:0; }
#panel .status .cx, #panel .cx-line .cx { color:var(--muted, #6b7280); font-weight:800; letter-spacing:.02em; }
#panel .cx-line { margin:0 0 var(--s-3); padding:10px 12px; border-radius:var(--radius); background:var(--soft, #f3f4f6); border:1px dashed var(--muted, #9aa0a6); color:var(--ink-2); font-size:var(--fs-2); }
#panel .cx-line[hidden] { display:none; } #panel .cx-line .why { font-style:italic; }

/* THE "?" (operator 2026-09-30): a page's explanations sit behind a small round button at the right of its title; the panel it opens is
   compact, scrolls inside itself and never prints. Nothing of it shows by default (the panel carries `hidden`). */
.card-header.sv-head { position:relative; }
.sv-help-btn { flex:none; width:22px; height:22px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--muted); font:700 13px/1 inherit; padding:0; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.sv-help-btn:hover, .sv-help-btn:focus-visible, .sv-help-btn[aria-expanded="true"] { color:#fff; background:var(--brand); border-color:var(--brand); outline:0; }
.sv-help { position:absolute; z-index:40; top:calc(100% - 6px); left:24px; width:min(480px, calc(100vw - 32px)); max-height:min(70vh, 560px); overflow:auto; background:#fff; border:1px solid var(--line);
  border-radius:8px; box-shadow:0 8px 24px rgba(23,18,17,.18); padding:12px 16px; font-size:var(--fs-1); font-weight:400; line-height:1.5; color:var(--ink-2); text-align:left; white-space:normal; }
.sv-help p { margin:0 0 6px; } .sv-help > :last-child { margin-bottom:0; }
.sv-help h5 { font-size:var(--fs-1); font-weight:700; color:var(--ink); margin:10px 0 4px; } .sv-help h5:first-child { margin-top:0; }
.sv-help .kbd { font-size:.85em; }
@media (max-width: 767px) { .sv-help { left:8px; right:8px; width:auto; max-height:60vh; } }
@media print { .sv-help, .sv-help-btn { display:none !important; } }
/* the bell's page (operator 2026-10-03): a reply since this user last looked */
.page-bell .tag.new { background:var(--brand); color:#fff; }