:root {
  --bg: #f6f7f9;
  --panel: #ffffff;
  --ink: #1a2230;
  --muted: #667085;
  --line: #e4e7ec;
  --accent: #1f4e78;      /* matches the GAS pivot header blue */
  --accent-soft: #eaf1f8;
  --pos: #0f7a4d;
  --zero: #98a2b3;
  --subtotal: #eef3fb;
  --grand: #e4efe1;
  --shadow: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f141b; --panel: #161c25; --ink: #e7ecf3; --muted: #98a2b3;
    --line: #2a323d; --accent: #6ea8dc; --accent-soft: #1b2733;
    --pos: #4ade80; --zero: #6b7280; --subtotal: #1b2431; --grand: #1b2a22;
    --shadow: none;
  }
}

* { box-sizing: border-box; }
.hidden { display: none !important; }

/* access gate (Cloudflare deploy) */
.loginwrap { min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; }
.loginbox { width: 340px; max-width: 92vw; margin-top: 12vh; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 28px; box-shadow: var(--shadow); }
.loginbox h1 { font-size: 19px; margin: 0 0 4px; }
.loginbox p { font-size: 13px; color: var(--muted); margin: 0 0 18px; }
.loginbox input, select.loginuser { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; margin-bottom: 10px; background: var(--panel); color: var(--ink); }
.loginbox button { width: 100%; padding: 11px; border: none; border-radius: 8px; background: var(--accent); color: #fff; font-size: 15px; font-weight: 600; cursor: pointer; }
.loginbox button:hover { filter: brightness(1.05); }
.pwerr { color: #b3261e; font-size: 13px; min-height: 18px; margin-top: 6px; }
@media (prefers-color-scheme: dark) { .pwerr { color: #ff938b; } }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* top-level app bar: Payroll | Wheel | VPG */
.appbar {
  display: flex; align-items: center; gap: 20px;
  padding: 0 28px; background: var(--accent); color: #fff;
}
.appbar .brand { font-weight: 700; font-size: 15px; letter-spacing: -.01em; padding: 12px 0; }
.appbar-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.appbar .paydate { display: flex; align-items: center; gap: 8px; }
.appbar .paydate label { color: rgba(255,255,255,.8); font-size: 12px; }
.appbar .paydate select { padding: 6px 10px; border: 1px solid rgba(255,255,255,.35); border-radius: 8px; background: rgba(255,255,255,.12); color: #fff; font-size: 13px; }
.appbar .paydate select option { color: var(--ink); }
.appbar .badge { color: #fff; border-color: rgba(255,255,255,.4); }
.signout { font: inherit; font-size: 12px; color: rgba(255,255,255,.85); background: none;
  border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: 5px 11px; cursor: pointer; }
.signout:hover { background: rgba(255,255,255,.12); color: #fff; }
.appbar .badge.live { color: #fff; border-color: #fff; }
.topnav { display: flex; gap: 2px; }
.tnav {
  background: none; border: none; color: rgba(255,255,255,.72); cursor: pointer;
  font-size: 14px; font-weight: 600; padding: 15px 16px; border-bottom: 3px solid transparent;
}
.tnav:hover { color: #fff; }
.tnav.on { color: #fff; border-bottom-color: #fff; }

.topbar {
  display: flex; justify-content: flex-start; align-items: center; gap: 18px;
  padding: 18px 28px; background: var(--panel); border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.titles h1 { margin: 0; font-size: 20px; letter-spacing: -.01em; }
.titles .sub { margin: 4px 0 0; color: var(--muted); font-size: 13px; }
/* Payroll Date sits immediately beside the title, separated by a soft divider. */
.topbar .paydate { display: flex; align-items: center; gap: 9px; padding-left: 18px; border-left: 1px solid var(--line); }
.topbar .refreshbtn { margin-left: auto; }
/* Post FTB -> Manual Payroll Adjustments, and the one payroll PDF. Both sit on the SAME
   row as Refresh and look like it: the topbar is one row, and a filled/coloured block here
   put a second band of chrome above the pivot. Colour in this app means alert, never
   "this is a button". Labels are kept short for the same reason -- the full sentence
   lives in the title attribute. */
/* The weeks a YTD difference lives in, printed under its flag row. Indented and quiet so the
   flag reads first and the breakdown reads as its detail, not as more flags. */
.flagtable tr.flagsub td { background: var(--subtotal); color: var(--muted); font-size: 12px; border-top: 0; }
.flagtable tr.flagsub .flagsubwk { font-weight: 600; color: var(--ink); padding-left: 18px; }
/* The individual lines under a week: one more step in, and quieter again. */
.flagtable tr.flagline td { background: var(--panel); font-size: 11.5px; }
.flagtable tr.flagline td:nth-child(4) { padding-left: 34px; }
.topbar .ftbpostbtn, .topbar .payrollpdfbtn, .topbar .runbtn { margin-left: 8px; white-space: nowrap; }
.topbar .ftbpostbtn:disabled, .topbar .payrollpdfbtn:disabled, .topbar .runbtn:disabled { opacity: .6; }
/* Payroll ledger state: "Closed vN · when · who", plain text beside Reopen (Mia 09/18/2026). */
.topbar .runstate { margin-left: 10px; font-size: 12.5px; color: var(--muted); white-space: nowrap; }
/* VPG carries its own Refresh (the topbar one is Payroll-only), inside the filter row so
   it costs no height above the grid. */
.volfilters .refreshbtn { margin-left: 4px; }
.vpgage { font-size: 12px; color: var(--muted); align-self: center; white-space: nowrap; }
.topbar .paydate label { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 600; }
.topbar .paydate select {
  padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 600;
}
.fcind { font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #276738; background: #d9ead3; padding: 3px 10px; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .fcind { background: #16281a; color: #7fd694; } }
/* YPV: count badge on the nav tab + the "go pay attention to YPV" flag on the Payroll header.
   Plain text on a soft ground -- an attention cue, not an alarm (red is for money in trouble). */
.navbadge { display: inline-block; min-width: 18px; padding: 1px 6px; margin-left: 4px; border-radius: 999px; background: #fff; color: #1f3a5f; font-size: 11px; font-weight: 800; line-height: 16px; text-align: center; vertical-align: 1px; }
.navbadge.hidden { display: none; }
.ypvflag {
  font-size: 12px; font-weight: 700; color: #1f3a5f; background: #e3ecf7; border: 1px solid #b9cbe4;
  padding: 5px 12px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.ypvflag:hover { background: #d3e1f3; }
.ypvflag.warn { color: #9a3412; background: #fdebd8; border-color: #f0c39a; }
.ypvflag.hidden { display: none; }
@media (prefers-color-scheme: dark) { .ypvflag { background: #182740; border-color: #2c4468; color: #cfe0f8; } .ypvflag:hover { background: #1f3352; } .navbadge { background: #cfe0f8; } }
.ypvlede { margin: 4px 0 12px; }
.controls { display: flex; align-items: center; gap: 10px; }
.controls label { color: var(--muted); font-size: 13px; }
.controls select {
  padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel); color: var(--ink); font-size: 14px;
}
.badge {
  font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted);
}
.badge.live { color: var(--pos); border-color: var(--pos); }

main { padding: 24px 28px 60px; max-width: 1120px; margin: 0 auto; }
/* VPG has very wide grids -> let that section fill the screen; Payroll/Wheel stay centered. */
body.fullwidth main { max-width: none; margin: 0; }
.loading { color: var(--muted); }

/* Payroll header: two compact key/value boxes (Mia 09/18/2026). Box 1 money out, box 2 deals. */
/* Summary tab ONLY, and small (Mia 09/18/2026: "the boxes are huge"). */
.kvcards { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.card.kvcard { padding: 6px 12px; width: 296px; box-shadow: none; border-radius: 8px; }
.kv { width: 100%; border-collapse: collapse; }
.kv th, .kv td { border: 0; background: none; }
.kv th { text-align: left; font-weight: 500; color: var(--muted); font-size: 12px; padding: 1px 10px 1px 0; white-space: nowrap; text-transform: none; letter-spacing: 0; }
.kv td.num { text-align: right; font-weight: 600; font-size: 12.5px; padding: 1px 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kv tr.kvtotal th { color: var(--ink, inherit); font-weight: 700; font-size: 12.5px; }
.kv tr.kvtotal td.num { font-size: 14px; font-weight: 700; }
.kv tr.kvtotal th, .kv tr.kvtotal td { padding-bottom: 3px; border-bottom: 1px solid var(--line); }
.kv tr.kvtotal + tr th, .kv tr.kvtotal + tr td { padding-top: 3px; }
.kv tr.kvsub td { font-size: 10.5px; color: var(--muted); padding: 0 0 2px; text-align: right; white-space: normal; }
.kv tr.kvsub .paidsub { color: #155c39; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-bottom: 24px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.card .k { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.card .v { font-size: 22px; font-weight: 650; margin-top: 4px; letter-spacing: -.01em; }

section { margin-bottom: 30px; }
section > h2 { font-size: 15px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
section > h2 .count { color: var(--muted); font-weight: 400; font-size: 13px; }

.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.tablewrap { overflow-x: auto; }
/* a real grid: uniform cells, gridlines on all sides */
table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 13.5px; }
th, td { padding: 9px 13px; text-align: left; white-space: nowrap; border: 1px solid var(--line); }
thead th { background: var(--accent-soft); color: var(--muted); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
tbody tr:hover td { background: color-mix(in srgb, var(--accent) 7%, transparent); }
td.num, th.num { text-align: right; }
.money { font-weight: 600; }
.money.zero { color: var(--zero); font-weight: 400; }
td:first-child, td.rowhead { font-weight: 600; }

/* pivot */
.pivot tr.total td { background: var(--grand); font-weight: 700; }
.lvl { color: var(--accent); font-weight: 600; }
.dash { color: var(--zero); }

/* top pivot consumer drill-down */
.pivot-person { cursor: pointer; }
/* The person row is the summary row: shaded and ruled off so people do not blend together
   (Mia 10/09/2026). Every cell has its lines, across and down. */
.pivot-person td { background: #e8eef6; font-weight: 700; border-top: 2px solid #98a2b3; }
.pivot table th, .pivot table td, .inputgrid th, .inputgrid td { border: 1px solid #d0d5dd; }
/* Clawback column and the 2-3 word tag on a deal row (Mia approved the mockup 10/09/2026). */
th.claw, td.claw { color: #b42318; font-weight: 700; }
td.clawup { color: #b54708; font-weight: 700; }
/* Summary fits the page (Mia 10/09/2026: "no wrapping and shit cutting off at the end"): the name
   and the Paid column wrap, so a long adjustment label or "B of A Bank Transfer + ..." never pushes
   the grid past the edge. Money columns stay on one line. */
.pivot td.rowhead { white-space: normal; min-width: 160px; max-width: 320px; overflow-wrap: anywhere; }
.pivot td:last-child, .pivot th:last-child { white-space: normal; min-width: 120px; max-width: 220px; }
/* Stubs sub tab (10/09/2026). */
.stubsgrid { max-width: 1240px; }
.linkbtn { font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.dealtag { font-size: 11px; font-weight: 700; color: #b42318; margin-left: 8px; white-space: nowrap; }
.pivot-person .chev { display: inline-block; margin-right: 7px; color: var(--muted); transition: transform .15s; }
.pgroup.open .pivot-person .chev { transform: rotate(90deg); }
.pivot-consumer { display: none; }
.pgroup.open .pivot-consumer { display: table-row; }
.pivot-consumer .rowhead.sub { padding-left: 26px; font-weight: 400; color: var(--muted); }

/* Summary Weekly/Recurring sub-tabs (shown only when both runs land on one date) */
.sumtabs { display: flex; gap: 8px; margin: 2px 0 14px; flex-wrap: wrap; }
.sumtab {
  display: inline-flex; align-items: baseline; gap: 8px; cursor: pointer;
  border: 1px solid var(--border, #d7dce5); background: var(--card, #fff); color: var(--ink);
  border-radius: 8px; padding: 7px 13px; font: inherit; font-size: 13px; font-weight: 600;
}
.sumtab:hover { border-color: var(--accent, #4a7); }
.sumtab.on { background: var(--accent-soft, #eaf5ee); border-color: var(--accent, #4a7); }
.sumtab .sumtab-amt { font-size: 12px; font-weight: 700; color: var(--muted); }
.sumtab.on .sumtab-amt { color: var(--ink); }

/* late-submit stars + bar (Mia 08/07/2026) */
.lstar { font-size: 12px; vertical-align: middle; cursor: help; }
.lstar-late { color: #c0392b; }   /* red: submitted late, deferred out */
.lstar-carry { color: #2f6fb3; }  /* blue: carried in from a prior late submit */
/* A disapproved expense sits INLINE in the person's block, muted, with the approver's
   reason under the details. It is visibly not part of what is being paid. */
.exp-dis td { background: color-mix(in srgb, #c0392b 5%, transparent); color: var(--muted); }
.exp-dis td .dwhy { margin-top: 4px; color: #8f2a1f; white-space: normal; overflow-wrap: anywhere; line-height: 1.45; }
.exp-dis .expdetail { white-space: normal; max-width: 460px; }
@media (prefers-color-scheme: dark) { .exp-dis td .dwhy { color: #ff9a8f; } }
/* Disapproved expenses: the reason WRAPS and lives in the cell -- never a tooltip
   (same rule as VPG's What To Fix). Cells are nowrap by default, so this opts out. */
.grid td.dwhy { white-space: normal; overflow-wrap: anywhere; max-width: 420px; min-width: 220px; vertical-align: top; line-height: 1.45; }
.latebar { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.lchip {
  font-size: 12px; border-radius: 7px; padding: 5px 10px; line-height: 1.35;
  border: 1px solid transparent;
}
.lchip b { font-weight: 700; }
.lchip-late { background: color-mix(in srgb, #c0392b 9%, transparent); border-color: color-mix(in srgb, #c0392b 30%, transparent); color: #8f2a1f; }
.lchip-carry { background: color-mix(in srgb, #2f6fb3 9%, transparent); border-color: color-mix(in srgb, #2f6fb3 30%, transparent); color: #244f80; }

/* pay-stub late/carry rows */
.stubtable .carryrow td { background: color-mix(in srgb, #2f6fb3 6%, transparent); }
.stubtable .carrytag { color: #2f6fb3; font-size: 11px; font-style: italic; }
.stubtable .latehdr td { background: color-mix(in srgb, #c0392b 8%, transparent); color: #8f2a1f; font-weight: 700; font-size: 12px; }
.stubtable .laterow td { background: color-mix(in srgb, #c0392b 4%, transparent); color: #8f2a1f; }
.stubtable .laterow .money { text-decoration: line-through; opacity: .8; }

/* already-paid (Payroll Ledger advance) — flag + net out, never double-pay */
.lstar-paid { color: #1f7a4d; }                 /* green: already disbursed */
/* Role conflict: Manager TO == a Sales rep on the same deal (always wrong). Red = alert. */
.lstar-conflict { color: #c0392b; }
/* YTD vs Green: not this week's payroll, so hollow + amber, never alert red (Mia 09/28/2026). */
.lstar-ytd { color: #b7791f; }
/* Input tab: where each payment stands in Green (09/29/2026). Red only for a real failure. */
.greensync { font-size: 12px; color: var(--muted); white-space: normal; }
.greensync.gs-done { color: #1f7a4d; }
.greensync.gs-waiting, .greensync.gs-working { color: #b7791f; }
.greensync.gs-error { color: #c0392b; }
/* Stub column on Input (10/02/2026): a checkbox that emails the stub once Paid in Green. */
.stubpick { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.stubpick input:disabled { cursor: not-allowed; }
/* Zelle Note on Input (10/09/2026): the memo text plus a small Copy button, kept on one line. */
.zellenote { font-size: 12px; color: var(--muted); white-space: nowrap; align-self: center; margin-left: 6px; }
/* What bears on paying a person, under their name on Input (10/09/2026). Stop = the money is not
   really there (red row); a question is amber; an advance note is grey. */
tr.rowstop-tr td { background: #fef3f2; }
.rowstop, .rowask, .rownote { display: block; font-size: 12px; margin-top: 2px; font-weight: 600; }
.rowstop { color: #b42318; }
/* The same flags under the name on Summary (10/09/2026), wrapping inside the name column. */
.sumflag { white-space: normal; max-width: 420px; }
.rowask, .rowask a { color: #b54708; }
.rownote { color: var(--muted); font-weight: 400; }
/* An open payroll question, worked in the row: Resolution Comment, then Resolved (10/09/2026). */
.rowq { margin-top: 4px; }
.rowqact { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.qcomment { font: inherit; font-size: 12px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; width: 240px; }
.lchip-conflict { background: color-mix(in srgb, #c0392b 12%, transparent); border-color: color-mix(in srgb, #c0392b 45%, transparent); color: #8f2a1f; }
.conflicttag { color: #8f2a1f; font-weight: 600; }
.stubtable .conflictrow td { background: color-mix(in srgb, #c0392b 6%, transparent); }
.reviewgrid .conflictrow td { background: color-mix(in srgb, #c0392b 5%, transparent); }
.rvconflict { color: #8f2a1f; font-weight: 600; font-size: 12px; margin-top: 3px; white-space: normal; overflow-wrap: anywhere; }
.lchip-paid { background: color-mix(in srgb, #1f7a4d 9%, transparent); border-color: color-mix(in srgb, #1f7a4d 30%, transparent); color: #155c39; }
.card .csub .paidsub { color: #155c39; font-weight: 700; }
.sh-v.paidsub { color: #155c39; }
.stubtable .paidhdr td { background: color-mix(in srgb, #1f7a4d 8%, transparent); color: #155c39; font-weight: 700; font-size: 12px; }
.stubtable .paidrow td { background: color-mix(in srgb, #1f7a4d 4%, transparent); color: #155c39; }
.stubtable .paidrow .money { text-decoration: line-through; opacity: .8; }
.stubtable tfoot .nettopay td { color: #155c39; }

/* Owner Draws (Mia-only cashflow reminder) */
.odsec { margin-top: 24px; max-width: 520px; }
.odwrap { max-width: 520px; }
.odnote {
  font-size: 13px; line-height: 1.5; margin: 4px 0 16px; padding: 10px 14px;
  border-radius: 8px; background: color-mix(in srgb, #8a6d1f 8%, transparent);
  border: 1px solid color-mix(in srgb, #8a6d1f 28%, transparent); color: #6b551a;
}
.odlock { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.odlock input { font: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid #ccc; border-radius: 6px; min-width: 200px; }
.odlockbtn { margin-left: 8px; font: inherit; font-size: 11px; padding: 2px 9px; border: 1px solid color-mix(in srgb, #8a6d1f 40%, transparent); background: transparent; color: #6b551a; border-radius: 6px; cursor: pointer; }

/* pay-stub Notes save affordance */
.stubnote-bar { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.stubnote-status { font-size: 11px; color: var(--muted); }
.stubnote-status.dirty { color: #8a6d1f; }
.stubnote-status.ok { color: #155c39; font-weight: 600; }
.stubnote-status.err { color: #8f2a1f; font-weight: 600; }

/* forecast banner */
.forecast {
  background: var(--accent-soft); border: 1px solid var(--accent); color: var(--ink);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; font-size: 13px; font-weight: 500;
}
.rowhead.ftblvl { color: #c47f17; }

/* money check */
.moneybar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; padding: 10px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.moneybar strong { font-size: 13px; }
.moneybar .mmode { color: var(--muted); font-size: 12px; margin-right: 6px; }
.mpill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 2px 8px; border-radius: 999px; white-space: nowrap; cursor: default; }
.mpill.m-blackhole { background: #7a0d0d; color: #fff; box-shadow: 0 0 0 2px rgba(122,13,13,.25); }
.mpill.m-crit { background: #fde2e1; color: #b3261e; }
.mpill.m-credit { background: #ffe0b2; color: #9a4d00; }
.mpill.m-checkconf { background: #d7f0ea; color: #1f6b57; }
.mpill.m-err  { background: #f3e1fd; color: #6b21a8; }
.mpill.m-dac  { background: #e6eef0; color: #4f6b74; }
.mpill.m-warn { background: #fff2cc; color: #8a5a00; }
.mpill.m-clean{ background: #e3effa; color: #35648f; }
.mpill.m-cleared { background: #e8eef7; color: #4a6b9c; }
.mpill.m-unv  { background: #e9edf2; color: #667085; }
.mpill.m-ok   { background: #d9ead3; color: #276738; }
@media (prefers-color-scheme: dark) {
  .mpill.m-blackhole { background: #c62828; color: #fff; box-shadow: 0 0 0 2px rgba(198,40,40,.35); }
  .mpill.m-crit { background: #3a1513; color: #ff938b; }
  .mpill.m-credit { background: #33240f; color: #f0b968; }
  .mpill.m-checkconf { background: #10241f; color: #6fd0b8; }
  .mpill.m-err  { background: #2a1436; color: #d6a8f5; }
  .mpill.m-dac  { background: #1c2529; color: #9fb6bd; }
  .mpill.m-warn { background: #2a2412; color: #e6cf95; }
  .mpill.m-clean{ background: #182634; color: #8fb8dd; }
  .mpill.m-cleared { background: #1a222e; color: #93b3d9; }
  .mpill.m-unv  { background: #232a33; color: #9aa5b1; }
  .mpill.m-ok   { background: #16281a; color: #7fd694; }
}

/* Deal Review: filter + sortable headers */
.reviewctl { display: flex; align-items: center; gap: 14px; margin: 0 0 14px; flex-wrap: wrap; }
.reviewctl label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 8px; }
.reviewctl select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; }
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--accent); }

/* full-width grid tables that flow with the page (no inner scrollbar) */
table.grid { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow); background: var(--panel); }
table.grid td, table.grid th { white-space: normal; }
td.mcol { min-width: 320px; }

/* Deal Review money columns: status pill + Down Payment (Issue 1) + Subscription
   (Issue 2). Each issue cell shows the real finding text, colored by tier. */
/* Deal Review scrolls inside its own bounded box so the column header stays put
   while you scroll the deal list (sticky needs a scroll container; the wide grid
   still scrolls horizontally here too). */
/* ENDLESS SCROLL, NOT A FRAME (Mia, twice: "I want endless scroll not frame").
   The grid runs as long as it needs and the PAGE scrolls. No inner scroll box, no
   max-height, no second scrollbar. `overflow: visible` is load-bearing: any `overflow`
   other than visible (including overflow-x: auto) makes this a scroll container, and the
   header then sticks to the top of THAT box instead of the top of the window. */
.reviewwrap { overflow: visible; max-height: none; }
.reviewwrap table.grid.reviewgrid { overflow: visible; }
.reviewwrap thead th { position: sticky; top: 0; z-index: 5; box-shadow: inset 0 -1px 0 var(--line); background: var(--panel); }
.reviewgrid td.mstatuscell { white-space: nowrap; vertical-align: top; }
.reviewgrid td.icell { font-size: 12px; line-height: 1.45; white-space: normal; min-width: 150px; max-width: 260px; vertical-align: top; color: var(--muted); }
.reviewgrid td.icell.m-blackhole { color: #7a0d0d; font-weight: 600; }
.reviewgrid td.icell.m-crit { color: #b3261e; } .reviewgrid td.icell.m-credit { color: #9a4d00; } .reviewgrid td.icell.m-checkconf { color: #1f6b57; } .reviewgrid td.icell.m-err { color: #6b21a8; } .reviewgrid td.icell.m-warn { color: #8a5a00; }
.reviewgrid td.icell.m-clean { color: #35648f; } .reviewgrid td.icell.m-dac { color: #4f6b74; }
.reviewgrid td.icell.m-unv { color: #667085; } .reviewgrid td.icell.m-ok { color: #276738; } .reviewgrid td.icell.m-na { color: var(--zero); }
.mdash { color: var(--zero); }
.reviewgrid .paymeth { display: block; font-size: 11px; color: var(--muted); font-weight: 400; }
@media (prefers-color-scheme: dark) {
  .reviewgrid td.icell.m-blackhole { color: #ff8a80; font-weight: 600; }
  .reviewgrid td.icell.m-crit { color: #ff938b; } .reviewgrid td.icell.m-credit { color: #f0b968; } .reviewgrid td.icell.m-checkconf { color: #6fd0b8; } .reviewgrid td.icell.m-err { color: #d6a8f5; } .reviewgrid td.icell.m-warn { color: #e6cf95; }
  .reviewgrid td.icell.m-clean { color: #8fb8dd; } .reviewgrid td.icell.m-dac { color: #9fb6bd; }
  .reviewgrid td.icell.m-unv { color: #9aa5b1; } .reviewgrid td.icell.m-ok { color: #7fd694; }
}

/* money check detail cell (Deal Review) */
.mcell { border-left: 3px solid currentColor; padding-left: 8px; }
.mcell .mhead { display: block; font-weight: 700; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.mcell .mtext { display: block; color: var(--ink); font-size: 12px; margin-top: 2px; }
.mcell.m-blackhole { color: #7a0d0d; font-weight: 700; }
.mcell.m-crit { color: #b3261e; } .mcell.m-credit { color: #9a4d00; } .mcell.m-checkconf { color: #1f6b57; } .mcell.m-err { color: #6b21a8; } .mcell.m-warn { color: #8a5a00; }
.mcell.m-clean { color: #35648f; } .mcell.m-dac { color: #4f6b74; }
.mcell.m-unv { color: #667085; } .mcell.m-ok { color: #276738; }
@media (prefers-color-scheme: dark) {
  .mcell.m-crit { color: #ff938b; } .mcell.m-credit { color: #f0b968; } .mcell.m-checkconf { color: #6fd0b8; } .mcell.m-err { color: #d6a8f5; } .mcell.m-warn { color: #e6cf95; }
  .mcell.m-clean { color: #8fb8dd; } .mcell.m-dac { color: #9fb6bd; }
  .mcell.m-unv { color: #9aa5b1; } .mcell.m-ok { color: #7fd694; }
}

.placeholder { background: var(--panel); border: 1px dashed var(--line); border-radius: 12px; padding: 28px; text-align: center; }
.placeholder h3 { margin: 0 0 6px; }

/* auto-refresh toast (shown when polling detects new Airtable records) */
.toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(10px);
  background: var(--ink); color: var(--bg); padding: 9px 18px; border-radius: 999px;
  font-size: 13px; font-weight: 600; box-shadow: 0 6px 20px rgba(16,24,40,.28);
  opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; z-index: 60;
}
/* pointer-events must come BACK when shown, or the Undo button can't be clicked. */
.toast.show { opacity: .96; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.toastundo {
  margin-left: 12px; padding: 3px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bg); background: transparent; color: var(--bg);
  font: inherit; font-weight: 700;
}
.toastundo:hover { background: var(--bg); color: var(--ink); }

/* section header + controls (Wheel, etc.) */
.sechead { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.secctl { display: flex; align-items: center; gap: 12px; }
.secctl label { color: var(--muted); font-size: 13px; display: flex; align-items: center; gap: 6px; }
.secctl select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); color: var(--ink); font-size: 14px; }
.btn { padding: 7px 14px; border: 1px solid var(--accent); border-radius: 8px; background: var(--accent); color: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
.btn:hover { filter: brightness(1.05); }

/* Close / Reopen check, shown ON THE PAGE where the tab content goes (no popups, Mia 10/07/2026). */
.rc-card { max-width: 560px; padding: 0; margin: 12px 0; }
.cm-head { padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 15px; font-weight: 700; }
.cm-body { padding: 8px 16px; overflow: auto; }
.cm-head.cm-warn { color: #b3261e; }
.cm-label { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; margin: 2px 0 4px; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cm-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.cm-table td { padding: 5px 6px; border-bottom: 1px solid var(--line); }
.cm-table tr:last-child td { border-bottom: 0; }
.cm-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-input { width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--panel); color: var(--ink); }
.cm-input.cm-need { border-color: #b3261e; }

/* ---- Club Travelo Volume Report (Wheel) ---- */
.volhead { margin-bottom: 20px; }
.crumb { display: flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 700; margin-bottom: 16px; }
.crumb-dim { color: var(--muted); font-weight: 600; }
.crumb-sep { color: var(--zero); font-weight: 400; }
.crumb-cur { color: var(--ink); }
.volfilters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fpill {
  appearance: none; -webkit-appearance: none;
  padding: 8px 30px 8px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 11px center;
  color: var(--ink); font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: var(--shadow);
}
.fpill:hover { border-color: var(--accent); }
.freset { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer; padding: 8px 6px; }
.freset:hover { text-decoration: underline; }
.fsearch {
  padding: 8px 14px; border: 1px solid var(--line); border-radius: 999px; min-width: 240px;
  background: var(--panel); color: var(--ink); font-size: 13px; box-shadow: var(--shadow);
}
.fsearch:focus { outline: none; border-color: var(--accent); }
.fchk { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); font-weight: 600; cursor: pointer; }
.fchk input { cursor: pointer; }
.fdim { font-size: 12px; color: var(--muted); font-weight: 600; }
/* Issue type = TEXT, never a pill (Mia 07/16/2026: "i hate pills"). RED is reserved for
   a real alert -- a sale with no deal behind it, money missing -- and is NEVER attached
   to a company name ("red rule is for company names, not critical alerts"). */
.dtype { font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.dtype.crit { color: #b3261e; }
.dtype.muted { font-weight: 400; color: var(--muted); }
@media (prefers-color-scheme: dark) { .dtype.crit { color: #ff938b; } }
/* VPG scorecard: rows with data issues + a warning badge on the event name */
.reviewgrid tr.vpg-issue { background: #fff8ef; }
@media (prefers-color-scheme: dark) { .reviewgrid tr.vpg-issue { background: #221a10; } }
/* Text, not a badge-pill: a count of data issues you can click through to. */
.issue-badge { font-size: 11px; font-weight: 700; color: #b45309; cursor: pointer; margin-right: 2px; }
.issue-badge:hover { text-decoration: underline; }
/* Event / location names run long (purple experience names, red street addresses).
   Cap the column and ellipsis it; the full text stays on the cell's hover title. */
.reviewgrid td.vpg-loc { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* VPG scorecard: fixed layout so the colgroup decides widths. Date / Team / numbers
   take only what they need and the Event column absorbs everything left over. */
.vpggrid { table-layout: fixed; }
.vpggrid th, .vpggrid td { padding: 8px 9px; }
.vpggrid thead th { white-space: normal; line-height: 1.25; }
.vpggrid col.c-date { width: 96px; }
.vpggrid col.c-team { width: 66px; }
.vpggrid col.c-money { width: 88px; }
.vpggrid col.c-n { width: 54px; }
.vpggrid td.vpg-loc { max-width: none; }          /* the col sets the width in fixed layout */
.vpggrid td.vpg-dates { white-space: normal; }     /* a multi-day event wraps its dates */
.vpg-team { font-weight: 400; color: var(--muted); }
/* Discrepancy "resolved" tick (+ optional clear-note beneath it) */
.reviewgrid th.dres { width: 32px; text-align: center; padding-left: 6px; padding-right: 6px; }
.reviewgrid td.dres { width: 128px; text-align: center; padding-left: 6px; padding-right: 6px; }
.reviewgrid tr.dresolved td { opacity: .5; }
/* VPG clear-note: an optional reason, saved into KV with the tick (a VPG row has no green
   record to write to). Compact, so ticking without a note stays the instant one-click flow. */
input.dnote { display: block; width: 114px; margin: 4px auto 0; font: inherit; font-size: 11.5px;
  padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); }
input.dnote::placeholder { color: var(--muted); opacity: .7; }
input.dnote:focus { outline: none; border-color: var(--accent, #3b82f6); }
.dnoteshow { margin-top: 4px; font-size: 11px; color: var(--muted); line-height: 1.25; text-align: left; overflow-wrap: anywhere; }
.dnotewho { font-weight: 600; color: var(--ink); }
/* Inline resolution note, in place of the (not-applicable) Payroll Week column. Type a note,
   then tick Clear (Mia 08/03/2026: "i don't want a popup — just put an inline next to clear"). */
.reviewgrid th.rvnotehead, .reviewgrid td.rvnotecell { width: 200px; vertical-align: top; }
.reviewgrid td.rvnotecell input.rvnote { width: 100%; box-sizing: border-box; font: inherit; font-size: 12.5px;
  padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); }
.reviewgrid td.rvnotecell input.rvnote:focus { outline: none; border-color: var(--accent, #3b82f6); }
.reviewgrid td.rvnotecell input.rvnote:disabled { background: transparent; border-color: transparent; color: var(--muted); }
.reviewgrid td.rvnotecell input.rvnote::placeholder { color: var(--zero); }
input.rvinit { width: 46px; font: inherit; font-size: 12.5px; text-transform: uppercase; text-align: center;
  padding: 3px 4px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); margin-left: 4px; }
input.rvinit:focus { outline: none; border-color: var(--accent, #3b82f6); }
select.rvuser { font: inherit; font-size: 12.5px; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); margin-left: 4px; }
select.rvuser:focus { outline: none; border-color: var(--accent, #3b82f6); }
select.rvuser:disabled { color: var(--muted); opacity: .8; }
/* Inline Stripe Customer ID under the consumer name (add / fix without leaving the panel). */
td.rvcust { vertical-align: top; min-width: 150px; }
.rvsid { margin-top: 3px; display: flex; align-items: center; gap: 4px; }
.rvsid-has { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--muted); background: none; border: none; padding: 0; cursor: pointer; text-align: left; }
.rvsid-has:hover { color: var(--accent, #3b82f6); text-decoration: underline; }
input.rvsidin { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; width: 122px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--ink); }
input.rvsidin::placeholder { font-family: inherit; color: var(--zero); }
input.rvsidin:focus { outline: none; border-color: var(--accent, #3b82f6); }
.rvsidbtn { font: inherit; font-size: 10.5px; padding: 2px 7px; border: 1px solid var(--line); border-radius: 5px; background: var(--panel); color: var(--accent, #3b82f6); cursor: pointer; }
.rvsidbtn:hover { border-color: var(--accent, #3b82f6); filter: brightness(1.05); }
.drillchip { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink); background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; }
@media (prefers-color-scheme: dark) { .issue-badge { color: #f0b168; background: #2a1e12; } }
.card .csub { font-size: 11px; color: var(--muted); margin-top: 3px; }
/* How to CURE a location mismatch. Mia 07/21/2026: "I do not know how to 'cure' the
   issues -- DC EOL is the same as DC trip in purple." Ticking IS the cure when both
   names are right, so the page has to say so instead of leaving it in a tooltip. */
.dlegend { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; max-width: 900px; line-height: 1.45; }
/* Review tabs: the GRID is the point, so the numbers above it are a compact strip, not
   two full-height cards that push the grid off the fold (Mia 07/21/2026: "the top
   section is huge making it hard to get to the grid"). Each still names its population. */
.dstats { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; margin: 0 0 10px; }
.dstat { font-size: 12.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.dstat b { font-size: 17px; font-weight: 650; color: var(--ink); letter-spacing: -.01em; margin-right: 5px; text-transform: none; }
/* Each count names the population it counts, so two numbers can never be compared by
   accident (Mia 07\21\2026: the tab badge and the stat strip once disagreed). */
.dstat i { display: block; font-style: normal; font-size: 11px; text-transform: none; letter-spacing: 0; opacity: .75; }
/* Deal Review's own scope + filter selects, in the same nav row as its search box. */
.rvscope { font-size: 12.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.rvscope select { font: inherit; color: var(--ink); padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
/* "What to Fix" = a TLDR, one line. The full explanation is on hover, not in the grid
   (Mia 07/16/2026: "you use a lot of words, that's easy for you, not for humans"). */
/* THE FULL MESSAGE LIVES IN THE CELL. NOT IN A TOOLTIP.
   Mia, four times, finally: "I have to hover to read the full message - PUT THE CONTENT
   IN THE BLOCK AND WRAP". The cell used to render only the short `tldr` and hang the real
   explanation off a `title` attribute. Wrapping the tldr was never the fix -- the content
   simply wasn't in the DOM. There is now NO title attribute on this column at all:
   .dfix = the action, .dwhy = the full explanation, both always visible.
   This SUPERSEDES the old "tldr in the grid, detail on hover" rule. */
.reviewgrid td.dissue { font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; max-width: 430px; min-width: 260px; vertical-align: top; }
.reviewgrid td.dissue .dfix { font-weight: 600; color: var(--ink); line-height: 1.4; }
.reviewgrid td.dissue .dwhy { margin-top: 4px; color: var(--muted); line-height: 1.45; }
/* The two fact columns: what each base literally holds, side by side, so a human can
   judge instead of reading my guess (Mia: "____ shows ____ and ____ shows ____"). */
.reviewgrid td.dside { font-size: 12.5px; white-space: normal; overflow-wrap: anywhere; max-width: 340px; vertical-align: top; line-height: 1.4; }
/* Customer leads the row with Date -- it's how she finds the thing (Mia 07/16/2026:
   "i need date (and which date are you using), customer, then explanations"). */
.reviewgrid td.dcust { font-weight: 600; white-space: normal; overflow-wrap: anywhere; max-width: 180px; vertical-align: top; }
/* Issue Type and Team are short labels; keep them on one line but let them sit level
   with the wrapped text beside them rather than floating in the middle of a tall row. */
.reviewgrid td.dtype, .reviewgrid td.vpg-team, .reviewgrid td.dres { vertical-align: top; }
.fdate {
  padding: 7px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); font-size: 13px; font-weight: 600; box-shadow: var(--shadow);
}
.fdate:focus { outline: none; border-color: var(--accent); }

.volcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 22px; }
.volcard { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow); }
.vc-k { font-size: 15px; font-weight: 700; color: var(--ink); }
.vc-sub { font-size: 12px; color: var(--muted); margin-top: 1px; }
.vc-v { font-size: 34px; font-weight: 650; letter-spacing: -.02em; margin-top: 10px; font-variant-numeric: tabular-nums; }

.wpanel { padding: 0; margin-bottom: 24px; }
.wpanel-h { font-size: 15px; font-weight: 700; padding: 16px 20px 0; }
.wpanel .tablewrap { padding: 6px 12px 14px; }
/* The chart spans the panel (no inner scroll box -- it scales, it doesn't overflow). */
.wpanel .wchart { padding: 6px 20px 18px; }
.wpanel .wchart .wc { display: block; width: 100%; height: auto; }
.wc-grid { stroke: var(--line); stroke-width: 1; }
/* Sized for the 1200-wide viewBox, which renders at roughly 1:1 in a full-width panel. */
.wc-axis { font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.wc-val { font-size: 13px; fill: var(--muted); font-variant-numeric: tabular-nums; }
.wc-name { font-size: 14px; fill: var(--ink); }
.wc-bar { fill: var(--accent); }

.voldeth { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
.voltable tr.wrep-group td { background: var(--subtotal); font-weight: 700; }
.voltable tr.wrep-group .wr-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--accent-soft); border-radius: 999px; padding: 1px 9px; margin-left: 9px; }
.voldetail { padding: 0; }
.wrep { border-top: 1px solid var(--line); }
.wrep:first-child { border-top: none; }
.wrep > summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.wrep[open] > summary { background: var(--subtotal); }
.wrep > summary::-webkit-details-marker { display: none; }
.wrep .wr-name { font-weight: 700; font-size: 14px; }
.voltable .wr-off { font-size: 11px; font-weight: 700; color: var(--warn, #b26a00); margin-left: 6px; white-space: nowrap; }
.wrep .wr-badge { font-size: 11px; font-weight: 700; color: var(--muted); background: var(--accent-soft); border-radius: 999px; padding: 1px 9px; }
.wrep .wr-tot { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.voltable td.rpcell { display: flex; align-items: center; gap: 8px; }
.voltable .rep-in { font-weight: 600; }

/* Team pills removed -- a team is a company name and renders as plain text (.vpg-team). */

/* expenses */
/* Expenses and Per Diem use the SUMMARY pivot classes (.pgroup / .pivot-person /
   .pivot-consumer), so their person rows collapse and expand identically. Mia 09/10/2026:
   "why don't these drop down like summary ... WHY IS EVERY DAMN PAGE DIFFERENT". The only
   thing left here is the free-text Details column, which wraps and sits quiet. */
.expdetail { white-space: normal; min-width: 220px; color: var(--muted); font-size: 12.5px; }

/* Input tab -- mark folks paid. Weekly / Bonus / Expenses are SUB-TABS (one table on screen
   at a time, never stacked down the page), plus a grand-total strip under every tab. */
.inputlegend { font-size: 12.5px; color: var(--muted); margin: 2px 0 14px; line-height: 1.5; }
.inputtabs { max-width: none; margin-bottom: 12px; }
.inputgrid { margin: 8px 0 20px; max-width: 760px; }
/* With the Stub column (10/02/2026) the grid gets room for it instead of squeezing names. */
.inputgrid:has(th:nth-child(5)) { max-width: 1000px; }
/* The name cell carries the row's notes (Stop, questions, changes), so it wraps; the name itself
   stays on one line. A nowrap here pushed Laura's Stop into the next column (10/09/2026). */
.inputgrid td:first-child { white-space: normal; min-width: 220px; max-width: 380px; }
.inputgrid td:first-child > b { white-space: nowrap; }
.inputgrid th:nth-child(3), .inputgrid td:nth-child(3) { width: 270px; }
/* With the Clawback column (10/09/2026) Method Paid is the 4th column: it keeps the room, and
   Clawback stays as narrow as its figure. Rows that span (questions) are left alone. */
.inputgrid.pivotlike th:nth-child(3), .inputgrid.pivotlike td:nth-child(3):not([colspan]) { width: 110px; }
.inputgrid.pivotlike th:nth-child(4), .inputgrid.pivotlike td:nth-child(4) { width: 230px; }
.inputgrid.pivotlike { max-width: 1180px; }
.paidsel { width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--muted); font: inherit; }
.paidsel.paid { color: #155c39; font-weight: 600; border-color: #9ccbb0; background: #f1f8f3; }
/* Closed payroll week (Mia 09/18/2026): Method Paid shows as locked text, not a menu. */
.paidlocked { color: #155c39; font-weight: 600; }
.paidlocked.none { color: var(--muted); font-weight: 400; }
.paidgreen { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.inputlegend .warn, .inputlegend.warn { color: #b3261e; }
/* Deal Status = coloured text, not a pill. Red only for money lost/disputed -- a Cancel
   is a live deal that kicked, and a Pender reads via .penderrow. */
.stxt { font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.stxt.st-good { color: #276738; }
.stxt.st-bad { color: #b3261e; }
.stxt.st-neutral { color: var(--muted); font-weight: 400; }
@media (prefers-color-scheme: dark) {
  .stxt.st-good { color: #7fd694; }
  .stxt.st-bad { color: #ff938b; }
}
.penderrow td { background: color-mix(in srgb, #b3261e 6%, transparent); }
.pendsec { margin-top: 22px; }
.subh { font-size: 14px; margin: 0 0 10px; }
/* YPV block: paid by YPV, outside the Club total. Notes wrap under the Pay figure. */
.ypvsec { margin-top: 22px; }
.ypvsec td.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
.ypvnote { font-size: 11px; font-weight: 400; white-space: normal; max-width: 260px; margin-top: 2px; }
/* Half of Add Ons, printed under the Add Ons figure: Pay reads as $100 + this (Mia 08/21/2026). */
.ypvhalf { font-size: 11px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.ypvnote.warn { color: #9a3412; }

/* forecast chip + rules */
.fchip { margin-left: auto; align-self: center; font-size: 11px; font-weight: 700; letter-spacing: .03em; color: #276738; background: #d9ead3; padding: 3px 10px; border-radius: 999px; }
@media (prefers-color-scheme: dark) { .fchip { background: #16281a; color: #7fd694; } }
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.rulecard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; box-shadow: var(--shadow); }
.rulecard h4 { margin: 0 0 6px; font-size: 14px; }
.rulecard ul { margin: 6px 0 0; padding-left: 18px; }
.rulecard li { margin: 3px 0; }
.rules .note { grid-column: 1 / -1; }
.note { color: var(--muted); font-size: 12.5px; }
.note code { background: var(--accent-soft); padding: 1px 5px; border-radius: 4px; }

/* main tabs (Summary | Pay Stubs | Deal Review | Rules) */
.maintabs { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid var(--line); margin-bottom: 18px; }
.mtabs-list { display: flex; gap: 4px; }
.btn-send { background: var(--pos); border-color: var(--pos); margin-bottom: 6px; white-space: nowrap; }
.mtab {
  padding: 9px 18px; border: none; background: none; cursor: pointer; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.mtab:hover { color: var(--ink); }
.mtab.on { color: var(--accent); border-bottom-color: var(--accent); }
/* Flags tab count: red when there is anything to look at (the only red on the tab row). */
.mcount { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px; border-radius: 999px; font-size: 11px; line-height: 18px; text-align: center; background: var(--line); color: var(--muted); }
.mcount.hot { background: #c0392b; color: #fff; }
/* Flags table: one row per flag, columns from the engine. Red row = money withheld or deferred. */
.flagtable td { vertical-align: top; }
.flagtable .flagkind { white-space: nowrap; font-weight: 600; }
.flagtable .flagdetail { white-space: normal; overflow-wrap: anywhere; min-width: 200px; }
.flagrow-red td { color: #8f2a1f; }
.flagrow-red .flagkind { color: #c0392b; }

/* person sub-nav (left to right) */
.subnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; margin-bottom: 16px; }
.stab {
  white-space: nowrap; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); color: var(--ink); cursor: pointer; font-size: 13px; font-weight: 600;
}
.stab:hover { border-color: var(--accent); }
.stab.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.ftbdot { font-size: 9px; font-weight: 700; letter-spacing: .03em; color: #fff; background: #c47f17; padding: 1px 5px; border-radius: 4px; margin-left: 4px; }
.stab.on .ftbdot { background: rgba(255,255,255,.28); }
/* Source selector = the three VPGs (Combined / WWYT / Club). Reads as the top-level
   picker above the Scorecard/Discrepancies sub-tabs. */
.subnav.vsrc { margin-bottom: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.subnav.vsrc .stab { border-radius: 8px; padding: 8px 18px; }
/* VPG stacks three nav rows (source / tab / team) before the grid even starts, so they
   run tight. Everything is still full size and clickable, just not spaced like sections. */
#vpgbody .subnav { padding-bottom: 4px; margin-bottom: 6px; }
/* The merged nav: VPG picker | view picker, one row, divider between the two choices. */
#vpgbody .subnav.vnav { align-items: center; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.vnavsep { flex: 0 0 1px; align-self: stretch; background: var(--line); margin: 2px 8px; }
.subnav.vnav .vsrcbtn { border-radius: 8px; }
#vpgbody .drillchip { margin-bottom: 8px; padding: 6px 12px; }
/* The VPG title + search row sits above three nav rows, so it gives up some of its
   breathing room -- every pixel here is a row of the grid she can't see. */
body.fullwidth .volhead { margin-bottom: 10px; }

/* pay stub */
.stub { }
.stubhead {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 16px 20px; margin-bottom: 16px; box-shadow: var(--shadow);
}
.sh-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; border-bottom: 1px dashed var(--line); }
.sh-k { color: var(--muted); font-size: 13px; }
.sh-v { font-variant-numeric: tabular-nums; }
.sh-v.strong { font-weight: 700; font-size: 15px; }
.sh-v.muted { color: var(--muted); }
.sh-note { color: var(--muted); font-size: 12px; font-style: italic; margin-top: 6px; text-align: right; }
.sh-ftb { margin-top: 8px; font-size: 12.5px; color: #8a5a00; background: #fff7e6; border: 1px solid #f0d693; border-radius: 8px; padding: 6px 10px; }
@media (prefers-color-scheme: dark) { .sh-ftb { background: #2a2412; border-color: #5c4f22; color: #e6cf95; } }

.dh { font-weight: 700; margin: 4px 0 8px; }
.stubtable td.cmt { white-space: normal; min-width: 180px; color: var(--muted); font-size: 12.5px; }
.stubtable tfoot .total td { background: var(--grand); font-weight: 700; }
/* customer grouping cue: a soft divider where the consumer changes */
.stubtable tbody tr.grp td { border-top: 2px solid color-mix(in srgb, var(--accent) 22%, transparent); }

@media (max-width: 720px) { .stubhead { grid-template-columns: 1fr; } }

/* zero / skipped */
.muted-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }
details.zeros summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 4px 0; }
.pill { display: inline-block; padding: 1px 7px; border-radius: 999px; background: var(--accent-soft); color: var(--muted); font-size: 11px; }

.foot { color: var(--muted); font-size: 12px; padding: 16px 28px 30px; text-align: center; }

/* NEW HIRE tab: Command Central's event setup wizard, in this app's palette.
   Copied rule for rule off platform-mockup/style.css (.wizard-steps, .wizard-actions,
   .section, .form-grid, .req) so a Springboard/payroll wizard reads the same as a Command
   Central one. Mia 09/21/2026: "it most certainly doesn't match any UX we have anywhere for a
   wizard (look at event setup in command central)".
   Actions live at the TOP. No buttons at the bottom of a page, not one. */
.nw { max-width: 920px; }
.nw-steps { display: flex; gap: 6px; margin-bottom: 14px; align-items: center; flex-wrap: wrap; }
.nw-steps .step { padding: 6px 14px; border-radius: 999px; font-size: 12px; font-family: inherit;
  background: var(--bg); color: var(--muted); border: 1px solid var(--line); cursor: pointer; }
.nw-steps .step.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.nw-steps .step.done { background: #e8f4ee; color: var(--pos); border-color: #cfe8db; }
.nw-steps .arrow { color: var(--line); font-size: 15px; }
.nw-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; margin-bottom: 12px; }
.nw-actions .spacer { width: 1px; height: 22px; background: var(--line); margin: 0 4px; }
.nw-actions .status { margin-right: auto; font-size: 12px; color: var(--muted); }
.nw-actions .status.good { color: var(--pos); }
.nw-btn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: 12px; font-family: inherit;
  border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); cursor: pointer; }
.nw-btn:hover { background: var(--bg); }
.nw-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.nw-btn.danger { background: var(--panel); border-color: #c0392b; color: #c0392b; }
.nw-btn[disabled] { opacity: .45; pointer-events: none; }
.nw-section { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; margin-bottom: 16px; }
.nw-section-head { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; }
.nw-section-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.nw-section-head .muted { font-size: 12px; color: var(--muted); font-weight: 400; }
.nw-section-body { padding: 18px; }
/* THE label column: 200px, on the left, exactly as every Command Central form. */
.nw-form { display: grid; grid-template-columns: 200px 1fr; gap: 12px 18px; align-items: start; }
.nw-form > label { font-size: 12.5px; font-weight: 600; color: var(--ink); padding-top: 8px; }
.nw-form input[type=text], .nw-form input[type=email] { width: 100%; padding: 7px 10px; font-size: 13px;
  font-family: inherit; border: 1px solid var(--line); border-radius: 5px; background: var(--panel);
  color: var(--ink); box-sizing: border-box; }
.nw-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,78,120,.15); }
.req { color: #c0392b; margin-left: 2px; }
/* A value the wizard sets rather than asks for. Reads as a fact, not a control. */
.nw-fixed { padding-top: 8px; font-size: 13px; color: var(--ink); }
.nw-fixed .why { color: var(--muted); font-size: 12px; margin-left: 6px; }
.nw-seg { display: flex; gap: 8px; }
.nw-seg button { font: inherit; font-size: 13px; font-weight: 600; background: var(--panel); color: var(--ink);
  border: 1px solid var(--line); border-radius: 6px; padding: 7px 18px; cursor: pointer; }
.nw-seg button.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(31,78,120,.16); color: var(--accent); }
.nw-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.nw-tbl th, .nw-tbl td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.nw-tbl th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }
.nw-tbl td.num, .nw-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.nw-tbl tr:last-child td { border-bottom: 0; }
.nw-tbl .tick { width: 30px; }
.nw-linkrow { display: flex; gap: 8px; align-items: center; }
.nw-linkrow input { flex: 1; padding: 7px 10px; font-family: ui-monospace, Consolas, monospace; font-size: 12px;
  border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--ink); }
.nherr { display: none; margin: 16px 0 0; padding: 10px 13px; background: #fef2f2; border: 1px solid #fecaca;
  color: #b91c1c; border-radius: 6px; font-size: 13px; }
@media (max-width: 820px) { .nw-form { grid-template-columns: 1fr; } .nw-form > label { padding-top: 0; } }

/* Proposed Flags grid (/?flagsgrid=1, 10/02/2026): Spend Ledger's filter bar, copied from
   command-central/Platform/platform-mockup/style.css lines 82 and 156-158. */
.fg-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; margin-bottom: 12px; }
.fg-toolbar { padding: 12px 14px; display: flex; gap: 8px; align-items: center; background: #f8fafc; border-radius: 8px; flex-wrap: wrap; }
.fg-toolbar input[type=search] { flex: 1; min-width: 160px; padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 12.5px; }
.fg-toolbar select { padding: 6px 10px; border: 1px solid #cbd5e1; border-radius: 5px; font-size: 12.5px; background: #fff; }
/* Proposed Flags grid v2: numbers in columns, words muted, red only where money is wrong. */
.fg-table td { vertical-align: top; color: var(--ink); }
.fg-table td.fg-done, .fg-table th.fg-done { width: 44px; text-align: center; }
.fg-table td.fg-flag { white-space: nowrap; font-weight: 600; }
.fg-table td.fg-person { white-space: nowrap; font-weight: 600; }
.fg-table td.fg-note { white-space: normal; overflow-wrap: anywhere; min-width: 220px; font-size: 12px; color: var(--muted); }
.fg-table span.fg-note { font-size: 12px; color: var(--muted); }
.fg-table td.fg-line { padding-left: 28px; color: var(--muted); font-size: 12px; white-space: normal; }
.fg-table td.fg-crit { color: #b3261e; }
/* Heads-Up, the last column on Input (Mia 10/12/2026). Same red words as Summary's deal tags. */
.inputgrid td.headsup { white-space: normal; }
.inputgrid td.headsup .dealtag.hu { margin-left: 0; white-space: normal; }
.inputgrid td.headsup .hu-ok { font-size: 11px; color: #1f7a4d; white-space: normal; }
.inputgrid td.headsup { min-width: 120px; }

/* Questions sub tab on Input (Mia 10/12/2026): every question from every payroll date. */
.questionsgrid td { white-space: normal; vertical-align: top; }
.questionsgrid td.qtext { min-width: 220px; white-space: pre-wrap; }
.questionsgrid .qcomment { width: 100%; min-width: 180px; }
.qtabs { margin-bottom: 8px; }