/* JobGoffer web (openspec/web-app phase W-A). Vanilla, no build step — served
   at /app like the admin console. Cool professional ground + the product's
   own accent (#185fa5) so it reads as the same product without the warm-cream
   look. Theme-aware. */
:root {
  --bg: #f6f7f9;
  --bg-elev: #ffffff;
  --bg-sink: #eef1f4;
  --text: #1c2733;
  --text-2: #5a6675;
  --text-3: #8a94a1;
  --border: #e2e6ec;
  --border-strong: #cfd5dd;
  --accent: #185fa5;
  --accent-hover: #124b83;
  --accent-bg: #e8f1fb;
  --accent-text: #0c447c;
  --warn-bg: #fbeed6; --warn-text: #6b4106;
  --ok-bg: #e5f2df; --ok-text: #2c5115;
  --violet-bg: #efe9f9; --violet-text: #4b2a82; --teal-bg: #e0f1ef; --teal-text: #085550;
  --orange-bg: #fdeee0; --orange-text: #8a4a0b;
  --danger-bg: #fbe6e6; --danger-text: #7c1f1f;
  --r-sm: 6px; --r-md: 9px; --r-lg: 14px;
  --shadow: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --topbar-h: 56px; --nav-w: 208px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161c; --bg-elev: #1a1f27; --bg-sink: #0d1116;
    --text: #e6eaf0; --text-2: #9aa5b3; --text-3: #6b7583;
    --border: #262d37; --border-strong: #333c48;
    --accent: #4b93e0; --accent-hover: #6aa7e8; --accent-bg: #16273a; --accent-text: #9cc4ef;
    --warn-bg: #33280f; --warn-text: #e6c48a; --ok-bg: #16240f; --ok-text: #a7d187;
    --violet-bg: #2a2140; --violet-text: #c9b6ef; --teal-bg: #0f2b28; --teal-text: #8fd0c9;
    --orange-bg: #33210f; --orange-text: #e8b184;
    --danger-bg: #331616; --danger-text: #e59a9a;
    --shadow: 0 1px 2px rgba(0,0,0,.3);
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.45; }
button { font-family: inherit; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
.hidden { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }

/* ── Landing (stealth: a name, a way in, nothing else) ─────────────────── */
.landing { min-height: 100%; display: flex; flex-direction: column; }
.landing-top { display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px; }
.wordmark { font-size: 19px; font-weight: 700; letter-spacing: -0.01em; display: flex;
  align-items: center; gap: 8px; }
.wordmark .dot { width: 9px; height: 9px; border-radius: 3px; background: var(--accent);
  display: inline-block; }
.btn { border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text);
  padding: 8px 16px; border-radius: var(--r-md); font-size: 14px; font-weight: 600; }
.btn:hover { border-color: var(--accent); }
.btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.landing-hero { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 0 24px 12vh; gap: 18px; }
.landing-hero .mark { font-size: 44px; font-weight: 800; letter-spacing: -0.02em; }
.landing-hero .tag { font-size: 16px; color: var(--text-2); max-width: 42ch; }

/* ── Login ─────────────────────────────────────────────────────────────── */
.login-wrap { min-height: 100%; display: flex; align-items: center; justify-content: center;
  padding: 24px; }
.login-card { width: 100%; max-width: 380px; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 30px 28px; }
.login-card .wordmark { justify-content: center; margin-bottom: 22px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2);
  margin-bottom: 5px; }
.field input { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--bg); color: var(--text); font-size: 14px; }
.field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }
.login-card .btn-primary { width: 100%; padding: 11px; margin-top: 4px; }
.login-err { background: var(--danger-bg); color: var(--danger-text); border-radius: var(--r-md);
  padding: 9px 12px; font-size: 13px; margin-bottom: 14px; }
.login-back { display: block; text-align: center; margin-top: 16px; font-size: 13px; color: var(--text-3); }

/* ── App shell ─────────────────────────────────────────────────────────── */
/* Fixed app frame: topbar + nav stay put; only the content region scrolls. */
.shell { height: 100vh; display: flex; flex-direction: column; }
.topbar { height: var(--topbar-h); flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; border-bottom: 1px solid var(--border); background: var(--bg-elev); position: relative; z-index: 10; }
/* Business name: centered on the header, bold, same size as the wordmark. */
.topbar-center { position: absolute; left: 50%; transform: translateX(-50%);
  font-size: 19px; font-weight: 700; letter-spacing: -0.01em; color: var(--text);
  max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  pointer-events: none; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.usermenu { font-size: 13px; color: var(--text-2); }
.usermenu b { color: var(--text); font-weight: 600; }
.link-btn { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600; padding: 0; }
.body { display: flex; flex: 1; min-height: 0; overflow: hidden; }
.nav { width: var(--nav-w); border-right: 1px solid var(--border); padding: 14px 10px; flex-shrink: 0; overflow-y: auto; }
.nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md);
  color: var(--text-2); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.nav a:hover { background: var(--bg-sink); color: var(--text); }
.nav a.active { background: var(--accent-bg); color: var(--accent-text); }
.nav a .ico { width: 18px; text-align: center; opacity: .8; }
/* Only the content region scrolls — the page-head + controls stay fixed. */
.main { flex: 1; padding: 24px 28px; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.main > .page-head, .main > .chips, .main > .searchbar, .main > .inline-form,
.main > .ask-form, .main > .pager-foot, .main > .mgmt-back { flex-shrink: 0; }
.main > .table-wrap, .main > .ask-log, .main > .settings-col,
.main > #home-body, .main > #inbox-body, .main > #ev-body, .main > #evg-body,
.main > #cat-body, .main > #ven-body, .main > #team-body, .main > #addr-body,
.main > #corpus-body, .main > #reb-body, .main > #reb-results {
  flex: 1; overflow-y: auto; min-height: 0; }
/* Rebates: the results scroll; the selection bar is a footer that never leaves
   the screen (owner 2026-09-14: "I can't see the buttons… I can't even scroll"). */
.main > #reb-selbar { flex-shrink: 0; }
.page-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 16px; }
.page-head h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.page-head .count { font-size: 13px; color: var(--text-3); }

/* ── Data tables (the reason for desktop) ─────────────────────────────── */
.table-wrap { border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden;
  background: var(--bg-elev); box-shadow: var(--shadow); }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th { text-align: left; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 11px 14px; border-bottom: 1px solid var(--border);
  white-space: nowrap; background: var(--bg-elev); position: sticky; top: 0; }
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border); white-space: nowrap; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg-sink); }
th.r { text-align: right; padding-right: 22px; } /* numeric titles right; extra right padding clears the resize divider (owner 2026-09-06) */
/* The resizer INJECTS `th.resizable { padding-right: 4px }` after this sheet
   and ties th.r on specificity — so it silently crushed the padding on every
   resizable header (owner saw no change in Jobs/Needs-You, 2026-09-06).
   Two classes outrank it whatever the order. */
th.resizable.r { padding-right: 22px; }
.li-table th.resizable.r { padding-right: 16px; }
td.r { text-align: right; font-variant-numeric: tabular-nums; } /* numeric CELLS stay right — amounts line up */
/* One weight, one colour per table (owner 2026-09-15: "they all should have the
   same weight. All cells."): amounts, the vendor / party / address cell, and the
   columns that used to read muted are all the text colour. The first web build
   (2026-07-30) had darkened the "primary" cell and greyed the rest with no
   decision behind it. Grey stays only for a sub-line under a name (.sub-cell)
   and for a missing value (.unnamed). The row's UNSEEN state is the one thing
   still bold. */
td.amount { font-weight: 400; }
table td.muted { color: var(--text); }
.muted { color: var(--text-3); }
/* A named party is the row's title; a missing one is a STATE, so it reads
   quieter and lighter — present, but not pretending to be a name. */
.unnamed { color: var(--text-3); font-weight: 500; font-style: italic; }
.primary-cell { font-weight: 400; color: var(--text); }
.sub-cell { font-size: 12px; color: var(--text-3); margin-top: 1px; }

.pill { display: inline-block; font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.pill.neutral { background: var(--bg-sink); color: var(--text-2); }
.pill.accent { background: var(--accent-bg); color: var(--accent-text); }
.pill.ok { background: var(--ok-bg); color: var(--ok-text); }
.pill.warn { background: var(--warn-bg); color: var(--warn-text); }
.pill.danger { background: var(--danger-bg); color: var(--danger-text); }
.pill.violet { background: var(--violet-bg); color: var(--violet-text); }
.pill.teal { background: var(--teal-bg); color: var(--teal-text); }
.pill.orange { background: var(--orange-bg); color: var(--orange-text); }
.menu-row { display: block; width: 100%; text-align: left; background: none; border: none; font: inherit;
  font-size: 13px; padding: 9px 13px; color: var(--text-1, inherit); cursor: pointer; border-bottom: 1px solid var(--border); }
.menu-row:hover { background: var(--accent-bg); }

.state { padding: 48px 24px; text-align: center; color: var(--text-3); font-size: 14px; }
.spinner { width: 22px; height: 22px; border: 2.5px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
  display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

/* In-flight document row (owner 2026-08-22): a small spinner + the attachment
   file name / "Processing…", dimmed and not clickable. Parity with mobile. */
tr.processing { opacity: .68; cursor: default; }
tr.processing .primary-cell { color: var(--text-3); }
.row-spin { width: 13px; height: 13px; border: 2px solid var(--border-strong);
  border-top-color: var(--accent); border-radius: 50%; animation: spin .7s linear infinite;
  display: inline-block; vertical-align: -2px; margin-right: 7px; }

/* ── Filter chips (Documents type filter) ─────────────────────────────── */
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-2);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; }
.chip:hover { border-color: var(--border-strong); }
.chip.on { background: var(--accent-bg); color: var(--accent-text); border-color: var(--accent); }
.chip .n { opacity: .6; margin-left: 5px; font-variant-numeric: tabular-nums; }

/* ── Detail drawer (right slide-over — desktop pattern) ────────────────── */
.drawer-backdrop { position: fixed; inset: 0; background: rgba(16,24,40,.35); z-index: 40; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 94vw);
  background: var(--bg-elev); z-index: 41; box-shadow: -8px 0 30px rgba(16,24,40,.18);
  display: flex; flex-direction: column; animation: slidein .18s ease; }
@keyframes slidein { from { transform: translateX(24px); opacity: .6; } to { transform: none; opacity: 1; } }
.drawer-head { display: flex; align-items: flex-start; justify-content: space-between;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--border); }
.drawer-title { font-size: 18px; font-weight: 700; }
.drawer-sub { font-size: 13px; color: var(--text-3); margin-top: 3px; }
.drawer-close { background: none; border: none; font-size: 22px; color: var(--text-3); line-height: 1; padding: 0 4px; }
.drawer-body { padding: 18px 22px 40px; overflow-y: auto; flex: 1; }
.dsection { margin-bottom: 22px; }
.dsection h4 { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3);
  font-weight: 700; margin: 0 0 9px; }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 6px 14px; font-size: 13.5px; }
.kv .k { color: var(--text-3); }
.kv .v { color: var(--text); font-weight: 500; }
.amount-big { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.li-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 4px; }
.li-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-3); font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--border); }
.li-table td { padding: 7px 8px; border-bottom: 1px solid var(--border); }
/* Line items: titles left like every header, numeric cells right. */
.li-table th.r { text-align: right; padding-right: 16px; }
.li-table td.r { text-align: right; }
.actions-grid { display: flex; flex-direction: column; gap: 12px; }
.action-row label { display: block; font-size: 12px; font-weight: 600; color: var(--text-2); margin-bottom: 5px; }
.action-row select, .action-row input { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--bg); color: var(--text); font-size: 14px; font-family: inherit; }
.action-row select:focus { outline: none; border-color: var(--accent); }
.action-inline { display: flex; gap: 8px; }
.action-inline select { flex: 1; }
.btn-sm { padding: 9px 14px; font-size: 13px; border-radius: var(--r-md); border: 1px solid var(--border-strong);
  background: var(--bg-elev); color: var(--text); font-weight: 600; }
.btn-sm.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-sm.primary:hover { background: var(--accent-hover); }
.btn-sm:disabled { opacity: .5; }
/* Dialog control buttons are quiet, not bold (owner 2026-09-07): Select…,
   + Add line, + Add, Choose a file — labels, not calls to action. */
.btn-sm.quiet { font-weight: 400; }
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 50;
  background: var(--text); color: var(--bg-elev); padding: 10px 18px; border-radius: var(--r-md);
  font-size: 13.5px; font-weight: 600; box-shadow: var(--shadow); }

.searchbar { margin-bottom: 14px; }
.searchbar input { width: 320px; max-width: 100%; padding: 9px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); background: var(--bg-elev); color: var(--text); font-size: 14px; font-family: inherit; }
.searchbar input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* USPS panels inside the job drawer */
.usdiff { background: var(--accent-bg); border: 1px solid var(--accent); border-radius: var(--r-md);
  padding: 12px; color: var(--accent-text); font-size: 13px; }
.usnf { background: var(--warn-bg); border: 1px solid #e7cda4; border-radius: var(--r-md);
  padding: 12px; color: var(--warn-text); font-size: 13px; }
.page-head > div { display: flex; align-items: center; }

/* Needs you */
.nav-badge { background: var(--danger-bg); color: var(--danger-text); border-radius: 999px;
  font-size: 11px; font-weight: 700; padding: 1px 7px; margin-left: auto; }
.inbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.inbox-card { text-align: left; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 16px; box-shadow: var(--shadow); }
.inbox-card:hover { border-color: var(--accent); }
/* The muted shelves (REQ-NAV-9): visible, never urgent — parity with mobile. */
.inbox-card.shelf { border-style: dashed; }
.inbox-card.shelf .ic-count { color: var(--text-3); }
.inbox-card.active { background: var(--accent-bg); border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg), inset 0 0 0 1px var(--accent); }
.inbox-card .ic-count { font-size: 26px; font-weight: 800; color: var(--accent); letter-spacing: -.02em; }
.inbox-card .ic-title { font-size: 14.5px; font-weight: 700; margin-top: 4px; }
.inbox-card .ic-sub { font-size: 12.5px; color: var(--text-3); margin-top: 3px; }

/* Job drawer document lists */
.doc-group { margin-bottom: 12px; }
.doc-group-label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3);
  font-weight: 700; margin: 0 0 5px; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: var(--r-md); margin-bottom: 6px;
  cursor: pointer; background: var(--bg); }
.doc-row:hover { border-color: var(--accent); background: var(--bg-sink); }
.dr-main { display: flex; flex-direction: column; font-weight: 600; font-size: 13.5px; min-width: 0; }
.dr-sub { font-weight: 400; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.dr-amt { font-weight: 600; font-size: 13.5px; flex-shrink: 0; }

/* Drawer resize handle (left edge) — applies to every drawer */
.drawer-resize { position: fixed; top: 0; height: 100%; width: 10px; z-index: 42; cursor: ew-resize; touch-action: none; }
.drawer-resize::after { content: ''; position: absolute; left: 4px; top: 0; width: 2px; height: 100%; background: transparent; transition: background .12s; }
.drawer-resize:hover::after, .drawer-resize:active::after { background: var(--accent); }

/* Drawer back button (from a document opened within a job, etc.) */
.drawer-head-main { min-width: 0; }
.drawer-back { background: none; border: none; color: var(--accent); font-size: 13px; font-weight: 600;
  padding: 0 0 6px; display: inline-block; }
.drawer-back:hover { text-decoration: underline; }

/* Header controls: count · updated · refresh */
.head-right { display: flex; align-items: center; gap: 12px; }
.updated { font-size: 12px; color: var(--text-3); }

/* ── Home ── */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.home-card { padding: 18px 20px; background: var(--bg-elev, #fff); border: 1px solid var(--border); border-radius: var(--r-lg); }
/* The web Home, mock-up B2 (owner 2026-09-15): Jobs right now beside the P&L; then
   Documents received · Top vendors · Spending by category. Bars say size; the ⓘ says the rule. */
.home-two { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; margin-bottom: 16px; }
/* Jobs right now (owner 2026-09-15, both asks): the P&L sets the row height; the jobs card
   grows INTO it (the table scrolls inside) and never past it, and with few rows it ends right
   under "See all jobs". The cell contributes no height of its own — the card is laid over it. */
.hjobs-cell { position: relative; min-height: 0; }
.hjobs-cell > .home-card { position: absolute; left: 0; right: 0; top: 0; max-height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.hjobs-cell .hscroll { flex: 1 1 auto; min-height: 0; max-height: none; }
@media (max-width: 1100px) { .hjobs-cell > .home-card { position: static; max-height: none; } .hjobs-cell .hscroll { max-height: 300px; } }
.home-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1100px) { .home-two, .home-three { grid-template-columns: 1fr; } }
.home-card h3 .info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--border-strong); color: var(--text-3); font-size: 10px; font-weight: 700; text-transform: none; letter-spacing: 0; margin-left: 6px; cursor: help; font-family: Georgia, serif; font-style: italic; vertical-align: 1px; }
.hscroll { max-height: 300px; overflow-y: auto; }
.htable { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.htable th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); padding: 2px 6px 8px 0; border-bottom: 1px solid var(--border); font-weight: 700; position: sticky; top: 0; background: var(--bg-elev, #fff); cursor: pointer; user-select: none; }
.htable th.sortable .th-inner { display: inline-flex; gap: 4px; align-items: baseline; }
.htable th.r .th-inner { justify-content: flex-end; width: 100%; }
.htable th .caret { font-size: 9px; color: var(--text-3); }
.htable th.sorted .caret { color: var(--accent); }
.htable td { padding: 7px 6px 7px 0; border-bottom: 1px solid var(--border); }
.htable td.r, .htable th.r { text-align: right; }
.htable tr.hjob { cursor: pointer; } .htable tr.hjob:hover td { background: var(--bg-sink); }
.hfoot { margin-top: 10px; font-size: 12.5px; text-align: right; }
.hbars { display: flex; flex-direction: column; gap: 7px; margin-top: 4px; }
.hbar { display: grid; grid-template-columns: minmax(90px, 40%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.hbar > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar i { display: block; height: 10px; border-radius: 5px; background: var(--accent-bg); position: relative; }
.hbar i b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: var(--accent); }
.hchart { height: 92px; display: flex; align-items: flex-end; gap: 8px; padding: 6px 2px 0; }
.hchart div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; font-size: 10.5px; color: var(--text-3); height: 100%; }
.hchart div i { display: block; width: 100%; background: var(--accent-bg); border-radius: 4px 4px 0 0; }
.hchart div.hot i { background: var(--accent); }
.home-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3);
  font-weight: 700; margin: 0 0 12px; }
.prow { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; font-size: 14px; }
.prow.strong { font-weight: 700; border-top: 1px solid var(--border); margin-top: 4px; padding-top: 9px; }
.prow.strong.big { font-size: 16px; border-top: 2px solid var(--border-strong); }
.prow .neg { color: var(--danger-text); }
.stat-big { font-size: 30px; font-weight: 800; letter-spacing: -.02em; }
.mini-stats { display: flex; gap: 18px; margin-top: 16px; font-size: 13px; color: var(--text-2); flex-wrap: wrap; }
.mini-stats b { color: var(--text); font-weight: 700; }
.card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-3); font-weight: 700; margin: 0 0 12px; }

/* ── Ask ── */
.ask-log { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; }
.ask-hint { color: var(--text-3); font-size: 14px; padding: 12px 0; }
.ask-q { align-self: flex-end; background: var(--accent); color: #fff; padding: 10px 14px; border-radius: 14px 14px 3px 14px; max-width: min(80%, 680px); font-size: 14px; }
.ask-a { align-self: flex-start; background: var(--bg-elev); border: 1px solid var(--border); padding: 12px 15px;
  border-radius: 14px 14px 14px 3px; max-width: min(85%, 860px); font-size: 14px; line-height: 1.5; box-shadow: var(--shadow); }
.ask-src { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.src-chip { background: var(--accent-bg); color: var(--accent-text); border: 1px solid var(--accent); border-radius: 999px;
  padding: 4px 11px; font-size: 12.5px; font-weight: 600; }
.ask-form { display: flex; gap: 8px; }
.ask-form input { flex: 1; padding: 11px 14px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-elev); color: var(--text); font-size: 14px; font-family: inherit; }
.ask-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* ── Settings ── */
.settings-col { max-width: 560px; display: flex; flex-direction: column; gap: 16px; }
.settings-col .card { padding: 18px 20px; }

/* ── Management rows ── */
.manage-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mrow-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mrow-head h3 { margin: 0; }
.mrow { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 0; border-top: 1px solid var(--border); }
.mrow.sub { padding-left: 14px; }
.mrow-name { font-weight: 600; font-size: 14px; display: flex; flex-direction: column; min-width: 0; }
.mrow-sub { font-weight: 400; font-size: 12px; color: var(--text-3); margin-top: 1px; }
.mrow-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mini { background: var(--bg); border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 4px 9px; font-size: 12px; font-weight: 600; color: var(--text-2); }
.mini:hover { border-color: var(--accent); color: var(--text); }
.mini.danger:hover { border-color: var(--danger-text); color: var(--danger-text); }
.ven-cat { padding: 6px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; max-width: 220px; }

/* Management back link sits above the title (no overlap) */
.mgmt-back { display: inline-block; margin: 0 0 8px; }

/* Inline add forms (business address, etc.) — real fields, not prompts */
.inline-form { border: 1px solid var(--border); border-radius: var(--r-md); padding: 14px; margin-bottom: 12px;
  background: var(--bg); display: flex; flex-direction: column; gap: 12px; }
.inline-form input { width: 100%; padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--r-md);
  background: var(--bg-elev); color: var(--text); font-size: 14px; font-family: inherit; }
.inline-form input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); }

/* Header bell */
.bell-btn { position: relative; background: none; border: none; font-size: 18px; line-height: 1; padding: 4px; }
.bell-badge { position: absolute; top: -2px; right: -4px; background: var(--danger-bg); color: var(--danger-text);
  font-size: 10px; font-weight: 800; border-radius: 999px; padding: 1px 5px; }
/* Event rows */
.ev-list { display: flex; flex-direction: column; gap: 8px; }
.ev-row { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); padding: 12px 14px; box-shadow: var(--shadow); }
.ev-open { flex: 1; min-width: 0; cursor: pointer; }
.ev-msg { font-size: 13.5px; }
.ev-when { font-size: 11px; color: var(--text-3); margin-top: 2px; }

/* SSO buttons on the login card */
.sso-buttons { display: flex; flex-direction: column; gap: 10px; align-items: center; margin-bottom: 6px; }
.sso-apple { width: 322px; max-width: 100%; background: #000; color: #fff; border: none; font-weight: 600;
  padding: 10px; border-radius: var(--r-md); }
.sso-apple:hover { background: #1a1a1a; }
.or-divider { width: 100%; text-align: center; border-top: 1px solid var(--border); line-height: 0.1em; margin: 8px 0 4px; }
.or-divider span { background: var(--bg-elev); padding: 0 10px; color: var(--text-3); font-size: 12px; }

/* Two-column detail attributes (less vertical space) */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 22px; }
.detail-field { min-width: 0; }
.detail-field.full { grid-column: 1 / -1; }
.detail-field .fl { font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.detail-field .fv { font-size: 14px; font-weight: 500; margin-top: 3px; word-break: break-word; }
.detail-field .fv .job-link { font-weight: 600; }

/* Settings · Invoice inbox card */
.inbox-addr { font-weight: 600; font-size: 14px; word-break: break-all; }
.inbox-usage { font-size: 12.5px; margin-top: 6px; }

/* Ask · start-of-history marker (shown once older asks are exhausted) */
.ask-start { text-align: center; font-size: 11.5px; color: var(--text-3); letter-spacing: .04em; padding: 6px 0 14px; }

/* Price changes */
.pill.danger { background: var(--danger-bg); color: var(--danger-text); }
.dot-new { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-right: 7px; vertical-align: 1px; }
.unseen-row .primary-cell { font-weight: 700; }
.price-hero { display: flex; align-items: center; gap: 12px; font-size: 16px; margin-bottom: 4px; }
.price-hero b { font-size: 18px; }
.pa-card { display: block; width: 100%; text-align: left; background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px 12px; margin-bottom: 8px; cursor: pointer; font: inherit; color: inherit; }
.pa-card:hover { border-color: var(--border-strong); }
.pa-card.hot { border-color: var(--danger-text); }
.pa-head { display: flex; justify-content: space-between; font-weight: 600; font-size: 13px; }
.pa-li { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; margin-top: 4px; }
.pa-foot { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; font-size: 12.5px; }
.pa-unit { font-weight: 700; font-size: 14px; }
.pa-unit.up { color: var(--danger-text); }

/* Drawer: total + View original share a row (button right-justified) */
.amount-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

/* Edit & fix (the mobile Fix screen in drawer form) */
.fx-reason { background: var(--warn-bg); color: var(--warn-text); border-radius: var(--r-md);
  padding: 10px 12px; font-size: 13px; margin-bottom: 14px; }
.fx-in { width: 100%; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: var(--r-sm);
  background: var(--bg); color: var(--text); font-size: 13px; font-family: inherit; }
.fx-in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-bg); }
.fx-num { text-align: right; font-variant-numeric: tabular-nums; max-width: 90px; }
.detail-field .fx-in { margin-top: 3px; }
.li-table td .fx-in { min-width: 60px; }
.fx-del { background: none; border: none; color: var(--text-3); font-size: 13px; padding: 2px 4px; }
.fx-del:hover { color: var(--danger-text); }

/* Job money owed — two sides, never netted */
.owed-row { padding: 8px 0; border-bottom: 1px solid var(--border); }
.owed-row:last-of-type { border-bottom: none; }
.owed-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; font-weight: 600; }
.owed-sub { font-size: 12px; margin-top: 2px; }
.owed-in { color: var(--ok-text); }
.owed-out { color: var(--warn-text); }
.paid-full { color: var(--ok-text); font-size: 13px; }

/* Spotted-jobs bulk review: the created/attached confirmation */
.panel.ok { background: #eaf3de; color: #27500a; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }

/* Spotted bulk create: the in-flight working card (mock-up stage 4) */
.panel.working { background: #e6f1fb; color: #0c447c; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }
.panel.working b { display: block; font-size: 15px; margin-bottom: 3px; }
.pbar { height: 6px; background: rgba(12,68,124,.15); border-radius: 3px; margin-top: 10px; overflow: hidden; }
.pbar i { display: block; height: 100%; width: 40%; background: #185fa5; border-radius: 3px;
  animation: pbar-slide 1.2s ease-in-out infinite; }
@keyframes pbar-slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
/* A determinate fill (rebates: originals read, emails sent) — `i` above is the indeterminate sweep. */
.pbar b { display: block; height: 100%; background: #185fa5; border-radius: 3px; transition: width .35s ease; }
.reb-progress { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.reb-progress .rp-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.reb-progress .rp-head span { font-variant-numeric: tabular-nums; white-space: nowrap; }
.reb-progress .pbar { margin-top: 4px; }
.reb-progress .rp-sub { font-size: 12.5px; opacity: .8; }
.tdlg-wait .reb-progress { text-align: left; }
.panel.warn { background: #faeeda; color: #633806; border-radius: 10px; padding: 12px 14px; font-size: 13.5px; }

/* Spotted answer controls (owner, 2026-08-08): "Pick a town…" and "Other
   town…" are ONE control family — white ground, accent text, #b8d4f0
   border — so neither reads as disabled. Mirrors the app's .sp-select. */
.spot-townsel, .spot-other { border: 1.5px solid #b8d4f0; border-radius: 10px;
  padding: 8px 12px; font-size: 13px; font-weight: 600; background: #fff;
  color: var(--accent-text, #0c447c); max-width: 280px; }

/* Other-town dialog: town + state combo (owner, 2026-08-08 — the web was
   missing the state selection entirely on the button path) */
.tdlg-overlay { position: fixed; inset: 0; background: rgba(20, 25, 32, .38); z-index: 60;
  display: flex; align-items: center; justify-content: center; }
.tdlg { position: relative; background: var(--card, #fff); border-radius: var(--r-lg); padding: 18px;
  width: min(340px, calc(100vw - 40px)); box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.tdlg h3 { font-size: 15px; margin: 0 0 12px; }
/* The "please wait" card that covers a dialog while its work runs (rebates export). */
.tdlg-wait { position: absolute; inset: 0; border-radius: inherit; background: color-mix(in srgb, var(--card, #fff) 92%, transparent);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; font-size: 14px; text-align: center; padding: 18px; }
.tdlg-wait .row-spin { width: 22px; height: 22px; border-width: 3px; margin-bottom: 4px; }
.tdlg-wait .muted { font-size: 12.5px; }
.tdlg label { display: block; font-size: 12px; color: var(--muted-text, #5f5e5a); margin: 10px 0 4px; }
.tdlg input, .tdlg select { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong);
  border-radius: var(--r-md); padding: 8px 10px; font-size: 14px; background: #fff; color: inherit; }
.tdlg .tdlg-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* Repair sheet (spotted-repair): wide dialog + the City suggest list */
.tdlg-wide { width: min(420px, calc(100vw - 40px)); }
.rp-suggest { position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
  background: var(--card, #fff); border: 1px solid var(--border-strong);
  border-radius: var(--r-md); box-shadow: 0 6px 18px rgba(0,0,0,.14);
  max-height: 200px; overflow-y: auto; }
.rp-sglabel { font-size: 10px; letter-spacing: .08em; color: #888780; font-weight: 600; padding: 8px 12px 2px; }
.rp-sgrow { padding: 8px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer;
  border-bottom: 1px solid rgba(0,0,0,.06); }
.rp-sgrow:last-child { border-bottom: 0; }
.rp-sgrow:hover { background: var(--accent-bg); color: var(--accent-text); }
.rp-sgrow small { font-weight: 400; color: #888780; }

/* Job money (profit-money REQ-MONEY-1..5): the % column and the cash lines */
.pctcol { display: inline-block; width: 44px; text-align: right; font-size: 11.5px;
  color: #888780; font-weight: 400; }
.cashlines { border-top: 1px solid var(--border, rgba(0,0,0,.1)); margin-top: 8px; padding-top: 6px; }
.cashlines .prow, .prow.cashrow { display: flex; justify-content: space-between; padding: 4px 0; font-size: 13.5px; }
.cashlines .prow > span:first-child { color: var(--text2, #5f5e5a); }

/* Provenance line (openspec/provenance REQ-PROV-1): subject shrinks, time never */
.prov-line { display: flex; align-items: baseline; gap: 5px; font-size: 12px;
  color: #5f5e5a; margin-top: 4px; font-variant-numeric: tabular-nums; }
.prov-line .prov-subj { font-weight: 600; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 0 1 auto; min-width: 0; }
.prov-line .prov-when { color: #888780; flex-shrink: 0; margin-left: auto; }
/* The file the email carried, under subject + time (owner, 2026-08-16);
   body-only documents say so instead. */
.prov-file { font-size: 11px; color: #888780; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Audits (openspec/document-review, REQ-AUD-1..22) ───────────────────── */
.nav-sep { border-top: 1px solid var(--border, rgba(0,0,0,.10)); margin: 10px 6px 8px; }
.nav-group { font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text3, #888780); padding: 0 10px 5px; font-weight: 700; }

.aud-metric { display: flex; gap: 28px; background: #fff; border-radius: 14px;
  padding: 15px 18px; margin-bottom: 16px; align-items: center; box-shadow: 0 1px 2px rgba(0,0,0,.07); }
.aud-metric .big { font-size: 31px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aud-metric .lbl { font-size: 11.5px; color: #888780; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.aud-metric .sub { font-size: 12px; color: #5f5e5a; margin-top: 3px; }

.aud-row { display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 10px;
  padding: 12px 14px; margin-bottom: 8px; font-size: 13px; cursor: pointer; }
.aud-row:hover { box-shadow: 0 2px 8px rgba(0,0,0,.10); }
.aud-row .date { width: 104px; font-weight: 650; }
.aud-row .what { flex: 1; color: #5f5e5a; }
.aud-row .who { font-size: 11.5px; color: #888780; width: 96px; }
.aud-row .st { font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.aud-row .st.todo { background: #e6f1fb; color: #0c447c; }
.aud-row .st.done { background: #eaf3de; color: #27500a; }
.aud-row .st.flag { background: #faeeda; color: #633806; }

.aud-doclist { background: #fff; border-radius: 10px; overflow: hidden; }
.aud-doc { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12.5px;
  border-bottom: 1px solid rgba(0,0,0,.08); }
.aud-doc:last-child { border-bottom: 0; }
.aud-doc .mark { width: 20px; text-align: center; font-weight: 700; }
.aud-doc .v { width: 190px; font-weight: 600; }
.aud-doc .amt { width: 96px; text-align: right; font-variant-numeric: tabular-nums; }
.aud-doc .jb { flex: 1; color: #5f5e5a; }
.aud-doc .tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: #f1efe8; color: #5f5e5a; }
.aud-doc .tag.rand { background: #e6f1fb; color: #0c447c; }
.aud-doc .tag.risk { background: #faeeda; color: #633806; }

/* the review: original left, everything we recorded right (REQ-AUD-8) */
.aud-review { display: flex; gap: 0; height: calc(100vh - 190px); min-height: 520px;
  border-radius: 12px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.aud-orig { flex: 1.1; background: #cfccc4; padding: 14px; overflow: auto; }
.aud-orig iframe, .aud-orig img { width: 100%; height: 100%; border: 0; background: #fff; border-radius: 3px; }
.aud-orig .fallback { background: #fff; border-radius: 3px; padding: 18px 20px; height: 100%;
  box-sizing: border-box; overflow: auto; font-family: ui-monospace, monospace; font-size: 11.5px;
  white-space: pre-wrap; color: #444; }
.aud-side { width: 392px; background: #f5f4ef; padding: 16px; box-sizing: border-box;
  display: flex; flex-direction: column; overflow: hidden; }
/* The middle scrolls; the verdict buttons never leave the screen. Without
   min-height:0 a flex column COMPRESSES its children to fit instead of letting
   this region overflow — which is how six line items showed as three
   (owner, 2026-08-15). */
.aud-scroll { flex: 1; min-height: 0; overflow-y: auto; padding-right: 3px; }
.aud-sentence { font-size: 14.5px; line-height: 1.5; margin: 2px 0 11px; }
.aud-rec { background: #fff; border-radius: 10px; padding: 11px 12px; }
.aud-claim { display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 4.5px 0; border-bottom: 1px solid rgba(0,0,0,.08); font-size: 12.5px; }
.aud-claim:last-child { border-bottom: 0; }
.aud-claim .k { color: #888780; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.aud-claim .v { text-align: right; font-weight: 600; }
.aud-why { background: #e6f1fb; color: #0c447c; border-radius: 10px; padding: 8px 10px;
  font-size: 11.5px; line-height: 1.5; margin-top: 10px; }
.aud-acts { padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08); margin-top: 12px; }
.aud-btn { display: block; width: 100%; box-sizing: border-box; text-align: center; font-size: 14px;
  font-weight: 650; padding: 12px; border-radius: 10px; border: 0; cursor: pointer; color: #fff;
  background: #185fa5; margin-bottom: 8px; }
.aud-btn.ok { background: #27500a; }
.aud-btn.warn { background: #633806; }
.aud-btn.ghost { background: #f1efe8; color: #5f5e5a; font-weight: 600; font-size: 13px; padding: 10px; }
.aud-btnrow { display: flex; gap: 8px; }
.aud-btnrow .aud-btn { flex: 1; }
.aud-kbd { display: inline-block; min-width: 14px; padding: 1px 5px; border-radius: 4px; font-size: 11px;
  background: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.4); margin-left: 6px;
  font-family: ui-monospace, monospace; }
.aud-note { width: 100%; box-sizing: border-box; border: 1px solid rgba(0,0,0,.18); border-radius: 10px;
  padding: 10px 11px; font-size: 12.5px; line-height: 1.5; min-height: 78px; font-family: inherit; resize: vertical; }
.aud-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.aud-chip { font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 999px;
  background: #f1efe8; color: #5f5e5a; border: 0; cursor: pointer; }
.aud-chip.on { background: #fcebeb; color: #791f1f; }
.aud-pips { display: flex; gap: 4px; margin-bottom: 12px; }
.aud-pip { height: 4px; flex: 1; background: #f1efe8; border-radius: 2px; }
.aud-pip.done { background: #27500a; }
.aud-pip.now { background: #185fa5; }

/* Line items get their own rows — a labor sheet carries one row per payment,
   and jamming six of them into a sentence is unreadable exactly where the
   reviewer needs to read carefully (owner, 2026-08-15). */
.aud-lines { margin-top: 10px; background: #fff; border-radius: 10px; overflow: hidden; }
.aud-lines .hd { display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px 6px; border-bottom: 1px solid rgba(0,0,0,.08); }
.aud-lines .hd .k { font-size: 10.5px; color: #888780; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; }
.aud-lines .hd .n { font-size: 11px; color: #888780; }
.aud-lines .li { display: flex; justify-content: space-between; gap: 10px; padding: 6px 12px;
  font-size: 12.5px; border-bottom: 1px solid rgba(0,0,0,.05); }
.aud-lines .li:last-of-type { border-bottom: 0; }
.aud-lines .li .d { color: #2c2c2a; flex: 1; }
.aud-lines .li .a { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.aud-lines .sum { display: flex; justify-content: space-between; padding: 7px 12px;
  border-top: 1px solid rgba(0,0,0,.12); background: #faf9f5; font-size: 12.5px; font-weight: 700; }
.aud-lines .sum .a { font-variant-numeric: tabular-nums; }
.aud-lines .sum.off { background: #faeeda; color: #633806; }

/* ── Corpus (founder scorecard, REQ-QS-7) ───────────────────────────────── */
.corpus-hero { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.corpus-hero .label { font-size: 10.5px; letter-spacing: .06em; font-weight: 700; color: var(--text-3); }
.corpus-hero .big { font-size: 30px; font-weight: 750; margin: 2px 0 0; }
.corpus-hero .big small { font-size: 13px; font-weight: 600; color: var(--ok-text); margin-left: 8px; }
.corpus-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px; margin-bottom: 12px; }
.corpus-mini { background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 9px 11px 7px; box-shadow: var(--shadow); cursor: pointer; }
.corpus-mini .k { font-size: 11px; color: var(--text-2); font-weight: 650; display: flex; justify-content: space-between; }
.corpus-mini .k b { font-variant-numeric: tabular-nums; color: var(--text); }
.corpus-mini.sel { outline: 2px solid var(--accent); outline-offset: -1px; }
.corpus-drillhead { display: flex; justify-content: space-between; align-items: baseline; margin: 2px 2px 8px; }
.corpus-drillhead .t { font-size: 13px; font-weight: 700; }
.corpus-drillhead a { font-size: 12px; font-weight: 600; }
.corpus-runnote { background: var(--accent-bg); color: var(--accent-text); border-radius: var(--r-md);
  padding: 7px 10px; font-size: 12px; margin-bottom: 10px; }
.fail { color: var(--danger-text); font-size: 12px; }
.up { color: var(--ok-text); font-weight: 650; }
.down { color: var(--danger-text); font-weight: 650; }

/* Bulk confirm UI for Needs You table */
.checkbox-col { width: 44px; padding: 8px 4px; text-align: center; }
.checkbox-col input { cursor: pointer; accent-color: #2563eb; }
.checkbox-col input:disabled { opacity: 0.4; cursor: not-allowed; }
.bulk-action-bar { 
  position: sticky; 
  bottom: 0; 
  padding: 12px 20px; 
  border-top: 1px solid #e0e0e0; 
  text-align: center; 
  background: #fafafa;
  z-index: 10;
  box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);
}
.bulk-action-bar .btn { padding: 10px 20px; background: #2563eb; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: 600; font-size: 13px; transition: background 0.2s; }
.bulk-action-bar .btn:disabled { background: #ccc; cursor: not-allowed; }
.bulk-action-bar .btn:hover:not(:disabled) { background: #1d4ed8; }
.address-compare { font-size: 12px; line-height: 1.5; display: flex; flex-direction: column; gap: 4px; }
.address-compare .extracted { color: #666; }
.address-compare .arrow { text-align: center; color: #2563eb; font-weight: bold; font-size: 14px; }
.address-compare .suggested { color: #2563eb; font-weight: 500; }
.address-compare .customer { color: #666; font-size: 11px; font-weight: normal; }
.address-compare .no-sugg { color: #999; font-style: italic; }
.doc-inbox-checkbox { cursor: pointer; }
.doc-inbox-checkbox:disabled { opacity: 0.4; cursor: not-allowed; }
tr.no-suggestion { opacity: 0.7; }

/* ── Activity feedback (owner 2026-08-23) ──────────────────────────────────
   A click is never a mystery: a thin top progress bar while any request is in
   flight, and a spinner on the exact button pressed (api() drives both). */
@keyframes app-spin { to { transform: rotate(360deg); } }
@keyframes app-progress { 0% { background-position: -40% 0; } 100% { background-position: 140% 0; } }
.is-busy { pointer-events: none !important; position: relative; }
.is-busy::after {
  content: ''; position: absolute; top: 50%; right: 8px; width: 12px; height: 12px; margin-top: -6px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: app-spin .6s linear infinite; opacity: .8;
}
html.app-busy::after {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 99999; pointer-events: none;
  background: linear-gradient(90deg, transparent, var(--accent, #185fa5), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: app-progress 1.1s ease-in-out infinite;
}

/* ── Document preview thumbnail in the drawer (owner 2026-08-23) ─────────────
   A stored WebP of the original; click opens the full-resolution original. */
.doc-preview{padding:2px 0 6px}
.thumb-btn{display:block;position:relative;width:100%;max-width:210px;padding:0;
  border:1px solid var(--border);border-radius:10px;overflow:hidden;background:var(--bg-elev);
  cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.12);transition:transform .15s ease,box-shadow .15s ease}
.thumb-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.20);border-color:var(--accent)}
.thumb-btn img{display:block;width:100%;height:auto}
.thumb-badge{position:absolute;right:8px;bottom:8px;background:rgba(15,25,40,.74);color:#fff;
  font-size:11px;font-weight:600;padding:4px 8px;border-radius:6px}

/* ── Documents table: sortable headers + row thumbnails (owner 2026-08-23) ── */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap}
/* !important so the pinned caret survives the resizable-column child rule. */
th.sortable .th-inner{display:inline-flex !important;align-items:center;gap:4px;width:calc(100% - 6px) !important;max-width:100%;vertical-align:middle}
/* Column titles all left-justified (owner 2026-08-30) — cells keep their own alignment. */
th.sortable .th-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* A right-aligned sortable header: the inner flex box spans the cell, so
   text-align alone moves the BOX, not the label — pack the content to the
   right edge instead (owner 2026-09-06: Amount header looked untouched). */
th.sortable.r .th-inner{justify-content:flex-end}
/* The resizer wraps th content in a full-width inline-block; make right
   alignment reach INSIDE it for plain-text headers too (owner 2026-09-06:
   the Jobs/Needs-You headers looked untouched by the alignment change). */
th.r > *:not(.resize-handle){text-align:right}
th.sortable:hover{color:var(--accent)}
th.sorted{color:var(--accent)}
.caret{font-size:9px;opacity:.32;flex:none}
th.sortable:hover .caret{opacity:.65}
th.sorted .caret{opacity:1;color:var(--accent)}
.thumb-col{width:46px}
td.thumb-cell{width:46px;padding-top:5px;padding-bottom:5px}
.row-thumb-img{width:30px;height:40px;object-fit:cover;object-position:top;border-radius:4px;
  border:1px solid var(--border);background:var(--bg-elev);display:block}
.row-thumb-img:not(.loaded){border-style:dashed;opacity:.45}

/* ── Document chassis (owner 2026-08-25, openspec/document-details) ── */
.dhdr { display: flex; gap: 14px; align-items: flex-start; margin-top: 4px; }
.dhdr-thumb { position: relative; flex: 0 0 150px; width: 150px; min-height: 180px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-sink); padding: 0; cursor: pointer; overflow: hidden; display: block; }
.dhdr-thumb img { width: 100%; display: block; }
.dhdr-thumb .dhdr-noprev { display: block; padding: 76px 4px; font-size: 10.5px; color: var(--text-3); text-align: center; }
/* display:block above beats the hidden ATTRIBUTE the loader sets — without
   this, the grey "Original" placeholder kept rendering under every loaded
   preview (owner screenshot, 2026-08-29). */
.dhdr-thumb .dhdr-noprev[hidden] { display: none; }
.dhdr-thumb .thumb-badge { position: absolute; right: 4px; bottom: 4px; }
.dhdr-info { flex: 1; min-width: 0; }
.dhdr-party { font-size: 17px; font-weight: 700; margin: 4px 0 2px; overflow-wrap: anywhere; }
.state-banner { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
.state-banner.warn { background: var(--warn-bg); color: var(--warn-text); }
.state-banner.danger { background: var(--danger-bg); color: var(--danger-text); }
.state-banner.neutral { background: var(--bg-sink); color: var(--text-2); }
.job-acts { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.jpk-list { max-height: 300px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; }
.jpk-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.jpk-row:hover { background: var(--bg-sink); }
.jpk-row.create { color: var(--accent); }
.ed-eq { font-size: 12px; margin-top: 8px; color: var(--text-2); }
.ed-eq.bad { color: var(--danger-text); background: var(--danger-bg); border-radius: 8px; padding: 8px 10px; }

/* ── Filter chips + sheets (mobile parity, REQ-FLT-1/2/4; owner 2026-08-30) ── */
.fchip { border: 1px solid var(--border); background: var(--bg-elev); border-radius: 20px; padding: 6px 13px; font-size: 12.5px; font-weight: 650; cursor: pointer; }
.fchip.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); }
.sheet-pop { position: absolute; top: 34px; left: 0; z-index: 30; background: var(--bg-elev); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 10px; min-width: 250px; }
.preset-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; font-size: 10px; letter-spacing: .07em; text-transform: uppercase; color: var(--text-3); font-weight: 800; padding: 0 2px 4px; }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.preset-btn { border: 1px solid var(--border); background: none; border-radius: 8px; padding: 7px 8px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.preset-btn.on { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-text); font-weight: 700; }
.range-inputs { display: flex; gap: 8px; align-items: flex-end; margin-top: 10px; flex-wrap: wrap; }
.range-inputs label { font-size: 11px; color: var(--text-3); display: flex; flex-direction: column; gap: 3px; }
.type-row { display: flex; justify-content: space-between; gap: 18px; width: 100%; background: none; border: none; border-bottom: 1px solid var(--border); padding: 8px 4px; font-size: 13px; cursor: pointer; text-align: left; }
.type-row:last-child { border-bottom: none; }
.type-row span.on { font-weight: 800; color: var(--accent-text); }
.type-row .tr-count { color: var(--text-3); font-variant-numeric: tabular-nums; }

/* The resolver drawer reuses the .tdlg field styles; flatten the card chrome inside the drawer. */
.drawer-body.tdlg { border-radius: 0; width: auto; }

/* ── Settings, Option B2 (openspec/settings, owner 2026-09-01): tabs + cards ── */
.settabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-strong); margin: 4px 0 16px; }
.settab { background: none; border: none; padding: 9px 14px; font-size: 13.5px; font-weight: 600; color: var(--text-2); border-bottom: 2px solid transparent; }
.settab.on { color: var(--accent-text); border-bottom-color: var(--accent); font-weight: 700; }
.set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; max-width: 980px; }
.card .chd { font-size: 11.5px; color: var(--text-2); margin: 2px 0 10px; }
.card .kv { display: flex; gap: 10px; padding: 5px 0; font-size: 13px; }
.card .kv .k { width: 120px; color: var(--text-2); flex: none; }
.card .kv .v { min-width: 0; }
.chan { display: flex; gap: 10px; align-items: flex-start; border-top: 1px solid var(--border); padding: 12px 0; }
.chan:first-of-type { border-top: none; }
.chan .cic { flex: none; width: 30px; height: 30px; border-radius: 8px; background: var(--bg-sink); text-align: center; line-height: 30px; font-size: 15px; }
.mrow { display: flex; gap: 10px; align-items: center; width: 100%; text-align: left; background: none; border: none; border-top: 1px solid var(--border); padding: 11px 4px; font-size: 13.5px; cursor: pointer; }
.mrow:first-of-type { border-top: none; }
.mrow:hover { background: var(--bg-sink); }
.mrow .md { color: var(--text-2); font-size: 12px; }
.mrow .chev { margin-left: auto; color: var(--text-3); }

/* Job state chip (REQ-JOB-33b): the status IS the control — a select wearing the pill face. */
.state-chip { appearance: none; -webkit-appearance: none; border: none; border-radius: 999px;
  font: inherit; font-size: 12px; font-weight: 700; padding: 3px 22px 3px 11px; cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='6'><path d='M0 0l4 6 4-6z' fill='%23555'/></svg>");
  background-repeat: no-repeat; background-position: right 8px center; }
.state-chip.open { background-color: var(--accent-bg); color: var(--accent-text); }
.state-chip.done { background-color: var(--neutral-bg, #e6eaee); color: var(--text-2, #5b6673); }

/* ── Rebates (openspec/rebates, release 1) ─────────────────────────────── */
.reb-n { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 9px; background: var(--bg-sink); color: var(--text-2); font-size: 11px; font-weight: 700; }
.settab.on .reb-n { background: var(--accent-bg); color: var(--accent-text); }
.reb-crumb { font-size: 12.5px; color: var(--text-3); margin-bottom: 6px; }
.reb-crumb a { color: var(--accent); text-decoration: none; }
.reb-fbar { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; }
.reb-fctl { display: flex; flex-direction: column; gap: 4px; position: relative; }
.reb-fctl.grow { flex: 1 1 320px; }
.reb-fctl label { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.reb-fctl label .opt { text-transform: none; letter-spacing: 0; font-weight: 400; }
.reb-fctl label .req { color: var(--danger-text); }
/* Required fields in the email setup (Send now and Schedule share it): a red asterisk; a missing one gets the red edge (owner 2026-09-15). */
.frow .k .req { color: var(--danger-text); margin-left: 2px; }
.frow .k .opt { font-weight: 400; color: var(--text-3); }
.frow input.invalid, .frow textarea.invalid { border-color: var(--danger-text); }
.reb-picker { border: 1px solid var(--border-strong); background: var(--bg-elev); color: var(--text); border-radius: var(--r-md); padding: 8px 12px; font: inherit; font-size: 13.5px; min-width: 170px; text-align: left; cursor: pointer; }
.reb-picker.invalid { border-color: var(--danger-text); }
.reb-window { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; }
.reb-window .numbox { width: 64px; }
.reb-picker .caret { float: right; color: var(--text-3); }
.reb-tokens { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; padding: 4px 8px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-elev); cursor: text; }
.reb-tokens:focus-within { border-color: var(--accent); }
.reb-tokens input { flex: 1 1 160px; border: none; background: none; font: inherit; font-size: 13.5px; color: var(--text); padding: 4px; min-width: 120px; outline: none; }
.reb-tok { display: inline-flex; align-items: center; gap: 4px; background: var(--accent-bg); color: var(--accent-text); border-radius: 999px; padding: 3px 6px 3px 11px; font-size: 13px; font-weight: 600; }
.reb-tok.sm { padding: 1px 10px; font-size: 12px; }
.reb-tok .x { background: none; border: none; color: inherit; opacity: .6; cursor: pointer; font-size: 11px; padding: 2px 4px; }
.reb-tok .x:hover { opacity: 1; }
.reb-addbtn { border: 1px solid var(--accent); background: var(--bg-elev); color: var(--accent); border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.reb-pop { position: absolute; top: 100%; left: 0; z-index: 30; margin-top: 4px; min-width: 300px; max-width: 420px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: 0 12px 28px rgba(16,24,40,.16); padding: 6px 0; font-size: 13.5px; }
.reb-pop-search { display: block; width: calc(100% - 20px); margin: 4px 10px 6px; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 7px 9px; font: inherit; font-size: 13px; background: var(--bg-elev); color: var(--text); }
.reb-it { display: flex; align-items: center; gap: 9px; padding: 7px 12px; cursor: pointer; }
.reb-it:hover { background: var(--accent-bg); }
.reb-it.all { border-bottom: 1px solid var(--border); margin-bottom: 4px; }
.reb-it .n { margin-left: auto; color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 12px; }
.reb-pop-foot { display: flex; justify-content: space-between; padding: 8px 12px 4px; border-top: 1px solid var(--border); margin-top: 4px; font-size: 12px; color: var(--text-3); }
.reb-pop-foot a { color: var(--accent); text-decoration: none; }
.reb-mi { padding: 8px 12px; cursor: pointer; }
.reb-mi:hover { background: var(--accent-bg); }
.reb-mi.on { font-weight: 700; color: var(--accent-text); }
.reb-schedtag { font-size: 11px; color: var(--text-3); margin-left: 6px; }
.reb-sep { height: 1px; background: var(--border); margin: 4px 0; }
/* Job foreman: initials beside the first name (mock-ups §4), the same face as the phone. */
.whoc { display: inline-flex; align-items: center; gap: 6px; }
.ini { width: 18px; height: 18px; border-radius: 999px; background: var(--accent-bg); color: var(--accent-text); font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; letter-spacing: .2px; }
.reb-caret { display: inline-block; width: 12px; color: var(--text-3); font-size: 11px; }
.reb-run.open td { background: var(--bg-sink); }
.cbx { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border: 1.5px solid var(--border-strong); border-radius: 4px; font-size: 11px; color: #fff; background: var(--bg-elev); flex: none; }
.cbx.on { background: var(--accent); border-color: var(--accent); }
.reb-summary { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-2); margin: 0 2px 10px; }
.reb-selectors a { color: var(--accent); text-decoration: none; margin-left: 14px; font-weight: 600; }
.reb-results td { vertical-align: top; }
.reb-results th.r, .reb-results td.r { text-align: right; font-variant-numeric: tabular-nums; }
.reb-row { cursor: pointer; }
.reb-row.reb-dim td:not(.checkbox-col) { opacity: .55; }
.reb-hits { display: flex; flex-direction: column; gap: 3px; }
.reb-hit { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; font-size: 12.5px; align-items: baseline; }
.reb-hit > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.reb-results td { white-space: normal; }
.reb-hit code { font-size: 11px; color: var(--text-3); margin-right: 6px; }
.reb-hit .q { color: var(--text-3); }
.reb-hit .a { font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.reb-hit mark { background: #fff2a8; color: inherit; border-radius: 2px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { .reb-hit mark { background: #6b5a00; } }
.reb-stack { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.reb-selbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; padding: 10px 14px; background: var(--bg-elev); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 -6px 18px rgba(16,24,40,.06); }
.reb-selbar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
.reb-note { background: var(--accent-bg); color: var(--accent-text); border-radius: 10px; padding: 10px 12px; font-size: 13px; line-height: 1.5; margin: 12px 0; }
.reb-hint { font-size: 12.5px; color: var(--text-3); line-height: 1.5; margin-top: 6px; }
.frow { display: grid; grid-template-columns: 150px 1fr; gap: 6px 12px; align-items: center; margin-bottom: 10px; font-size: 13.5px; }
.frow .k { color: var(--text-3); font-size: 12.5px; }
.frow input, .frow textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 7px 9px; font: inherit; font-size: 13px; background: var(--bg-elev); color: var(--text); }
/* wide: an hour with AM/PM, or a day with "(or last day)" — 82px cropped them (owner 2026-09-15). */
.numbox.wide { width: 150px !important; }
.numbox { width: 82px !important; box-sizing: border-box; border: 1px solid var(--border-strong); border-radius: var(--r-sm); padding: 6px 8px; font: inherit; font-size: 13px; background: var(--bg-elev); color: var(--text); }
.reb-batches { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.reb-batches span { background: var(--bg-elev); border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; font-size: 12px; font-variant-numeric: tabular-nums; }
.reb-drawer-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 12px 22px; border-top: 1px solid var(--border); background: var(--bg-elev); }
.reb-optrow { display: flex; gap: 18px; margin: 12px 0; font-size: 13.5px; }
.reb-optrow label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; white-space: nowrap; margin: 0; font-size: 13.5px; color: var(--text); }
/* The dialog's inputs are 100% wide by default — a radio must not be (it squeezed "Separate files" into a column; owner 2026-09-15). */
.reb-optrow input[type="radio"] { width: auto; margin: 0; }
.reb-mailbody { white-space: pre-wrap; font: inherit; font-size: 13px; line-height: 1.55; background: var(--bg-sink); border-radius: 8px; padding: 12px; margin: 0; }
.reb-att { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.reb-att .pdf { font-size: 10px; font-weight: 700; letter-spacing: .04em; background: var(--danger-bg); color: var(--danger-text); border-radius: 4px; padding: 2px 5px; }
.reb-att a { margin-left: auto; color: var(--accent); text-decoration: none; font-weight: 600; }
.state-banner.ok { background: var(--ok-bg); color: var(--ok-text); }

/* Two pills in one cell (the WHY pill under the type pill, owner 2026-09-14): stacked, never clipped. */
.pill-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; white-space: normal; }
.pill-stack .pill { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }