/* Out The Van — "Split" craft layer (v1, visual pass only).
   Loaded after brand.css + app.css + app-premium.css. Repaints the app to
   the black-band / amber-action / white-paper language from Louise's own
   mockups — logic underneath (worklist-core.js, docket, print) is untouched.
   NEVER add this file to quote.html — the docket stays as-is. */

/* An author rule that sets display beats the UA sheet's [hidden]{display:none}
   regardless of specificity, so .btn-ghost{display:inline-flex} quietly made
   every hidden ghost button visible — the AfP chase button, and the
   receptionist Share button long before it. One rule, every caller. */
[hidden]{display:none !important}

/* ---------- The four status colours ----------
   Always paired with a WORD on screen, never colour alone. Deeper than the
   old dark-shell status colours because they now sit on white paper. */
:root{
  --st-overdue:#B3261E;  /* red    — overdue                              */
  --st-needs:#C23B2E;    /* red (lighter than overdue) — needs you, urgent
                             but not yet late. Was amber — Louise wants
                             anything urgency-shaped read as red, not
                             orange; kept a shade lighter than --st-overdue
                             so "needs a look" still reads as one notch
                             less severe than "actually overdue".         */
  --st-with:#1F5FBF;     /* blue   — sent / with them                     */
  --st-paid:#186A3B;     /* green  — paid / money in                      */
}

/* ---------- Action red (10.09.26 ruling) ----------
   Louise: any LEAD TEXT that needs the user's attention or a decision goes
   red — amber stays for buttons, brand marks and rules only. --st-overdue/
   --st-needs above are tuned for PAPER (white) and fail AA the moment text
   sits directly on the dark shell (2.55:1 / 3.59:1 on --charcoal #1E1E1E —
   checked, not assumed). This is that missing dark-shell equivalent:
   5.07:1 on #1E1E1E, 5.29:1 on the lock-card's charcoal-2 (#191a1c). No
   paper-side twin added — --st-overdue/--st-needs already cover that job
   (6.53:1 / 5.30:1 on white) and reusing them beats a second token. */
:root{ --action-red:#FF4D3D; }

/* Shared utility for one-off dark-shell action text that has no status/tone
   class of its own (e.g. the install nudge's lead sentence). Anything that
   already carries a tone class (home-wl-card, doc-row, stage-badge,
   acct-plan-state) reuses --st-overdue/--st-needs directly instead. */
.action-text{color:var(--action-red)}

/* ---------- Paper views ----------
   The whole app shell is built on one dark ramp (--charcoal-0/-2/-3 for
   surfaces, --steel-* for text and rules). Flipping that ramp inside a
   `.paper` view repaints every component that reads it — which is why this
   is ten declarations instead of eighty overrides.

   --charcoal itself is deliberately NOT flipped: across app.css it is the
   TEXT colour on every amber control (btn-primary, tile-badge, current
   doc-tab, user bubble, stage-pill, diary count). Flipping it would turn
   nine amber buttons white-on-amber. The four surfaces that genuinely mix
   --charcoal in are flattened by hand below.

   ponytail: text alphas are pinned at 4.6:1+ on white, not eyeballed —
   .hint and the card labels are 12px and have to stay readable in a van. */
.view.paper{
  --charcoal-0:#FFFFFF;--charcoal-2:#FFFFFF;--charcoal-3:#F4F3F1;
  --steel-white:#1E1E1E;
  --steel-60:rgba(30,30,30,.78);   /* ≈#4F4F4F — 8.1:1 on white */
  --steel-40:rgba(30,30,30,.62);   /* ≈#737373 — 4.7:1 on white */
  --steel-14:rgba(30,30,30,.14);
  --steel-08:rgba(30,30,30,.05);
  --otv-hair:rgba(30,30,30,.14);
  /* Gap BETWEEN cards. Deliberately ~2x the 10px used between fields
     inside one, so a section boundary reads as a break rather than
     another row. Change it here, not per screen. */
  --section-gap:22px;
  background:var(--paper);color:var(--ink);min-height:100vh;
}

/* The black band: money, identity, brand. Tops every paper screen. The dark
   ramp is re-declared here so the header's own children stay white-on-black
   while the body underneath reads as paper. */
.view.paper .app-header{
  background:var(--charcoal);border-bottom:none;
  --charcoal-2:#191a1c;--charcoal-3:#141416;
  --steel-white:#FFFFFF;
  --steel-60:rgba(255,255,255,.62);--steel-40:rgba(255,255,255,.40);
  --steel-14:rgba(255,255,255,.14);--steel-08:rgba(255,255,255,.08);
}

/* A long client name in the band's title wrapped onto two lines and shoved
   the back link down with it. Title takes the slack and ellipses; the back
   link never wraps — it is the way out of the screen. */
.view.paper .app-header .brand-mark{flex:1;min-width:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.view.paper .app-header .link-btn{white-space:nowrap;flex:none}
/* Alerts is the one screen whose header IS an action-needed label, not just
   a title — red on the dark header bar, so the same --action-red as the
   rest of the dark-shell lead text. */
#view-alerts .app-header .brand-mark{color:var(--action-red)}
/* Each alert's title, on the paper body below the header. */
#view-alerts .doc-row-title{color:var(--st-needs)}

/* The four surfaces that blend --charcoal into a gradient — flattened to
   paper rather than flipping the token underneath them. */
.view.paper .tile,
.view.paper .gate-card,
.view.paper .worklist-card{background:var(--paper)}
.view.paper .cover-email{background:#F4F3F1}
.view.paper .cover-email-label{color:var(--ink-60);text-transform:none;letter-spacing:0;font-size:12.5px}
.view.paper .cover-email-body{color:var(--ink)}
/* The thread dock stays black — it is the TALK band, same as Home's. Zero
   padding so the composer's own black fills it edge to edge. */
.view.paper .thread-composer-slot{background:var(--charcoal);border-top:none;padding:0 0 env(safe-area-inset-bottom,0px)}

/* .gate-card centres its text — right for the login card, wrong for Your
   Account's settings rows, where a centred label sat above a left-aligned
   button. Rows read left. (The full "no dark patterns" account rebuild is
   Louise's v2 item — this is paint only.) */
#view-account .save-offer,
#view-account .voice-pick-row{text-align:left}

/* Amber is "tap this" — but --amber-soft is a light amber built for a dark
   shell and washes out on paper. Deep amber in the body, soft in the band. */
.view.paper .link-btn,
.view.paper .otv-eyebrow,
.view.paper .docket-jobassign .link-btn,
.view.paper .receipts-unfiled-note{color:var(--amber-deep)}
.view.paper .app-header .link-btn,
.view.paper .app-header .otv-eyebrow{color:var(--amber-soft)}
.view.paper .link-btn:hover{color:var(--st-needs)}

/* ---------- The money band ----------
   Sits directly under the black header, so header + band read as one black
   band carrying identity and money — exactly the mockup. Rendered by
   renderMoneyBand() in app.js; absent entirely when a screen has no figure. */
.view.paper .money-band{
  background:var(--charcoal);color:#FFFFFF;
  padding:2px 20px 20px;margin:0;
}
/* Status colour ON BLACK needs the light end of each hue — the paper-side
   values below would disappear into the band. Word always alongside. */
.money-band.band-overdue .money-band-sub{color:#FF9A8F;font-weight:600}
.money-band.band-paid .money-band-sub{color:#7FD6A0;font-weight:600}

/* The proportion bar: how the money owed actually splits. Segments are only
   ever drawn from real figures, so the bar can't imply a split that isn't
   in the documents. Words underneath carry the same numbers. */
.money-band-bar{display:flex;height:5px;border-radius:3px;overflow:hidden;margin-top:12px;background:rgba(255,255,255,.16)}
.band-seg{display:block;height:100%}
.band-seg-overdue{background:#FF6B5C}
.band-seg-with{background:#6AA6FF}
.band-seg-paid{background:#7FD6A0}
.band-seg-needs{background:var(--amber)}

/* The honesty line under the worklist. */
.view.paper .worklist-foot{font-size:12.5px;line-height:1.5;color:var(--steel-40);margin:14px 2px 0}

/* "Worth pricing the wait in" — a red-edged card on Numbers and on a client.
   Red because it costs money, with the number said in words beside it. */
.view.paper .slowest-card{
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--st-overdue);
  border-radius:0 10px 10px 0;padding:14px 16px;margin-top:16px;
}
.slowest-eyebrow{
  font-family:var(--font-mono,monospace);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--st-overdue);
}
.view.paper .slowest-name{font-family:var(--font-head);font-weight:700;font-size:21px;color:var(--ink);margin-top:4px}
.view.paper .slowest-sub{font-size:13px;line-height:1.5;color:var(--ink-60);margin:6px 0 0}

/* The month's clashes, said in words under the grid. */
.view.paper .diary-clash-line{font-size:13.5px;line-height:1.5;color:var(--st-overdue);font-weight:600;margin:0 0 4px}
.view.paper .diary-clash-note{font-size:12.5px;color:var(--steel-40);margin:2px 0 0}

/* Jobs tabs reuse the Documents tab chips; they wrap on a narrow phone. */
.view.paper #jobsTabs{margin-bottom:10px}

/* ---------- Status-coloured rows ----------
   One left edge, four meanings, always with the status word already in the
   row beside it. Applied to job rows now; doc rows keep their dots. */
.view.paper .job-row.tone-overdue,
.view.paper .job-row.tone-needs,
.view.paper .job-row.tone-with,
.view.paper .job-row.tone-paid{
  border-left:3px solid transparent;padding-left:12px;border-radius:0 8px 8px 0;
}
.view.paper .job-row.tone-overdue{border-left-color:var(--st-overdue)}
.view.paper .job-row.tone-needs{border-left-color:var(--st-needs)}
.view.paper .job-row.tone-with{border-left-color:var(--st-with)}
.view.paper .job-row.tone-paid{border-left-color:var(--st-paid)}
.view.paper .doc-row.tone-overdue,
.view.paper .doc-row.tone-needs,
.view.paper .doc-row.tone-with,
.view.paper .doc-row.tone-paid{
  border-left:3px solid transparent;padding-left:12px;border-radius:0 8px 8px 0;
}
.view.paper .doc-row.tone-overdue{border-left-color:var(--st-overdue)}
.view.paper .doc-row.tone-needs{border-left-color:var(--st-needs)}
.view.paper .doc-row.tone-with{border-left-color:var(--st-with)}
.view.paper .doc-row.tone-paid{border-left-color:var(--st-paid)}
/* The flag text is the word half of "never colour alone". */
.view.paper .job-flag{color:var(--st-needs);font-weight:600}
.view.paper .tone-overdue .job-flag{color:var(--st-overdue)}

/* Jobs list — the second, coloured line under a row's plain meta (19.08.26,
   matching the mockup's "£1,240 · 12 days late" / "2 loose ends to tick
   off"). Same tone colours as the row's own left edge, so the word and the
   edge can never disagree. */
.job-row-detail{font-size:12.5px;font-weight:600;margin-top:3px;color:var(--st-needs)}
.job-row-detail.tone-overdue{color:var(--st-overdue)}
.job-row-detail.tone-needs{color:var(--st-needs)}
.job-row-detail.tone-with{color:var(--st-with)}
.job-row-detail.tone-paid{color:var(--st-paid)}

/* The stage badge picks up the row's own tone as an outlined pill instead
   of one flat grey — a job with nothing to flag stays flat/neutral. */
.stage-badge.tone-overdue{background:rgba(179,38,30,.1);color:var(--st-overdue);border-color:rgba(179,38,30,.28)}
.stage-badge.tone-needs{background:rgba(181,101,24,.1);color:var(--st-needs);border-color:rgba(181,101,24,.28)}
.stage-badge.tone-with{background:rgba(31,95,191,.1);color:var(--st-with);border-color:rgba(31,95,191,.28)}
.stage-badge.tone-paid{background:rgba(24,106,59,.1);color:var(--st-paid);border-color:rgba(24,106,59,.28)}
.job-row.is-parked{opacity:.6}

/* Stage badges onto the same four colours. */
.view.paper .stage-won,
.view.paper .stage-in_progress{background:rgba(181,101,24,.10);color:var(--st-needs);border-color:rgba(181,101,24,.28)}
.view.paper .stage-invoiced{background:rgba(31,95,191,.10);color:var(--st-with);border-color:rgba(31,95,191,.28)}
.view.paper .stage-paid{background:rgba(24,106,59,.10);color:var(--st-paid);border-color:rgba(24,106,59,.28)}

/* The clash warning is a warning, not a block — red, but stated in words. */
.view.paper .clash-warn{color:var(--st-overdue);font-weight:600;font-size:13px}
.view.paper .clash-warn-card{margin:6px 0 0;padding:11px 12px;border:1px solid rgba(224,119,106,.3);border-radius:8px;background:rgba(224,119,106,.06);display:flex;flex-direction:column;gap:8px}
.view.paper .clash-warn-card .clash-warn{margin:0}
.view.paper .clash-slot-line{margin:0;font-size:13px;color:var(--ink-60)}
.view.paper .clash-move-btn{align-self:flex-start}

/* ---------- Diary (14.09.26, shared system) ----------
   The band keeps the summary ("Nothing booked" / "3 jobs booked" + free
   weekdays); the month itself moves down into the calendar toolbar between
   the arrows, so it isn't said twice. The grid reads as one calendar: a
   single rounded frame, hairline cell boundaries, no per-cell cards. */
#view-diary .money-band-eyebrow{display:none}
.view.paper .diary-wrap{padding:12px 16px 32px}
.view.paper .diary-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 10px}
.view.paper .diary-nav .btn-small{
  flex:none;width:44px;height:44px;min-height:44px;padding:0;border-radius:10px;font-size:22px;line-height:1;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);display:flex;align-items:center;justify-content:center;
}
.view.paper .diary-nav .btn-small:hover{border-color:var(--ink-60)}
.view.paper .diary-month{display:block;flex:1;min-width:0;text-align:center;font-family:var(--font-body);font-weight:600;font-size:16px;color:var(--ink)}
.view.paper .diary-dow{gap:0;margin-bottom:4px;grid-template-columns:repeat(7,minmax(0,1fr))}
.view.paper .diary-dow span{font-family:var(--font-body);font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
/* Overflow fix: 1fr columns default to min-width:auto and can't shrink below
   their content; minmax(0,1fr) lets seven columns share the row exactly. */
.view.paper .diary-grid{
  grid-template-columns:repeat(7,minmax(0,1fr));gap:0;
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--paper);
}
.view.paper .diary-cell{
  aspect-ratio:auto;min-height:54px;min-width:0;padding:6px 0 5px;gap:3px;border-radius:0;
  background:var(--paper);border:none;box-shadow:none;color:var(--ink);font-family:var(--font-body);
  border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:none;
}
/* Every 7th cell closes the row; the last row closes the frame. */
.view.paper .diary-cell:nth-child(7n){border-right:none}
.view.paper .diary-cell:nth-last-child(-n+7){border-bottom:none}
.view.paper .diary-blank{background:#FAFAF9;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);cursor:default}
.view.paper .diary-cell:hover{background:#F7F6F3;border-color:var(--rule);color:var(--ink)}
.view.paper .diary-cell:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:6px}
/* The date sits in a 28px marker so today / selected / both can be told
   apart without colouring the whole cell. */
.view.paper .diary-num{
  width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  font-size:14px;font-weight:500;color:var(--ink);box-sizing:border-box;
}
.view.paper .diary-cell.today{border-color:var(--rule);color:var(--ink)}
.view.paper .diary-cell.today .diary-num{border:1.5px solid var(--ink);color:var(--ink);font-weight:600}
.view.paper .diary-cell.selected{border-color:var(--rule);box-shadow:none}
.view.paper .diary-cell.selected .diary-num{background:var(--amber);color:var(--ink);font-weight:600}
.view.paper .diary-cell.today.selected .diary-num{box-shadow:0 0 0 2px var(--paper),0 0 0 3.5px var(--ink)}
.view.paper .diary-cell.has-jobs{color:var(--ink)}
.view.paper .diary-count{
  margin:0;min-width:18px;height:16px;padding:0 5px;font-family:var(--font-body);font-weight:600;font-size:10.5px;
  color:var(--ink);background:var(--amber);border-radius:8px;
}
/* A clash keeps its red count (existing meaning) — the cell no longer needs a red ring on top. */
.view.paper .diary-cell.clash{border-color:var(--rule);box-shadow:none}
.view.paper .diary-cell.clash .diary-count{background:#B3261E;color:#fff}
.view.paper .diary-clashes{margin-top:12px;padding-top:10px;border-top:1px solid var(--rule)}
/* Day details — 24px below the grid, flush with its left edge. */
.view.paper .diary-day{margin-top:24px;padding:0;border:none;background:none}
.view.paper .job-section h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink)}
.view.paper .diary-day h3{margin:0 0 4px;padding:0;border:none}
.view.paper .diary-day .hint{margin:0 0 10px}
.view.paper .diary-day .doc-row.job-row{margin-top:10px;flex-wrap:wrap;align-items:center;gap:8px 10px}
#view-diary #diaryDayRows .doc-row.job-row .doc-row-main{flex:1 1 100%;width:100%}
.view.paper .diary-day .stage-badge{margin-left:auto}
.view.paper .diary-day .doc-row-title{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;white-space:normal;overflow-wrap:break-word}
.view.paper .diary-day .doc-row-meta{font-size:13px;color:var(--ink-60);margin-top:2px}
.view.paper .diary-day .day-wo{min-height:44px;padding:0 12px;border-radius:10px;font-size:13px;font-weight:600;background:var(--paper);color:var(--ink);border:1px solid var(--rule);white-space:nowrap}
.view.paper .diary-day #diaryDayAdd{margin-top:12px}
.view.paper .clash-warn-card{margin-top:10px;padding:12px 14px;border:1px solid rgba(179,38,30,.3);border-left:3px solid var(--st-overdue);border-radius:12px;background:rgba(179,38,30,.05)}
.view.paper .clash-warn-card .clash-warn{margin:0;font-size:13.5px;font-weight:500;color:var(--st-overdue)}
.view.paper .clash-slot-line{font-size:13px;color:var(--ink);margin:6px 0 8px}

/* ---------- Your Numbers (14.09.26, shared system) ----------
   Off-white page, white cards with fine borders, one type scale. Metric
   cards: label / value / supporting line. Section cards: heading + rows with
   tabular figures, right-aligned amounts, single separators. */
#view-numbers{background:#F7F6F3}
#view-numbers .money-band-figure{font-size:32px}
.view.paper .numbers-wrap{padding:16px 16px 32px}
.view.paper .numbers-wrap > .hint{margin:0 0 16px;font-size:13px;line-height:1.5;color:var(--ink-60)}
.view.paper .numbers-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
@media (max-width:359px){ .view.paper .numbers-cards{grid-template-columns:minmax(0,1fr)} }
.view.paper .numbers-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;
  box-shadow:none;transition:none;
}
.view.paper .numbers-card:hover{border-color:var(--rule);box-shadow:none}
.view.paper .numbers-cards .numbers-card{display:flex;flex-direction:column;gap:4px;min-width:0}
/* Fifth metric — on-time finish rate — spans the row and sits shallower. */
.view.paper .numbers-cards .numbers-card:nth-child(5){
  grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:12px;row-gap:2px;padding:12px 16px;
}
.view.paper .numbers-cards .numbers-card:nth-child(5) .numbers-card-label{flex:1 1 auto}
.view.paper .numbers-cards .numbers-card:nth-child(5) .numbers-card-value{font-size:20px;margin:0}
.view.paper .numbers-cards .numbers-card:nth-child(5) .numbers-card-sub{flex:1 1 100%}
.view.paper .numbers-card-label{font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60);line-height:1.35}
.view.paper .numbers-cards .numbers-card-value{
  font-family:var(--font-body);font-weight:600;font-size:22px;line-height:1.15;color:var(--ink);margin:0;
  font-variant-numeric:tabular-nums;overflow-wrap:anywhere;
}
.view.paper .numbers-card-value.is-na{color:var(--ink-60);font-weight:500}
.view.paper .numbers-card-value.over{color:var(--st-overdue)}
.view.paper .numbers-card-sub{font-size:12.5px;line-height:1.4;color:var(--ink-60)}
.view.paper .numbers-card-sub:empty{display:none}
/* Section cards (money in/out, spend, chart, monthly) — heading, then rows. */
.view.paper .numbers-wrap > .numbers-card{margin-top:16px}
.view.paper .numbers-wrap > .numbers-card > .numbers-card-label,
.view.paper .num-chart-head .numbers-card-label{font-size:15px;font-weight:600;color:var(--ink)}
.view.paper .spend-cat-list{margin-top:6px}
.view.paper .spend-cat-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:8px 0;
  border-bottom:1px solid var(--rule);font-size:14px;color:var(--ink);
}
.view.paper .spend-cat-row span:first-child{min-width:0}
.view.paper .spend-cat-row span:last-child{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.view.paper .spend-cat-row:last-child{border-bottom:none}
/* Totals: one rule above the group, never a double line. */
.view.paper .spend-cat-row:has(+ .spend-cat-total){border-bottom:none}
.view.paper .spend-cat-total{border-top:1px solid var(--ink);margin-top:2px;padding-top:9px;font-weight:600}
.view.paper .spend-cat-total + .spend-cat-total{border-top:none;margin-top:0;padding-top:2px}
.view.paper .spend-cat-item{padding:8px 0;border-bottom:1px solid var(--rule)}
.view.paper .spend-cat-item:last-child{border-bottom:none}
.view.paper .spend-cat-item .spend-cat-row{padding:0 0 5px;border-bottom:none}
.view.paper .spend-cat-bar{background:#EDECE8}
/* Monthly breakdown — aligned columns, quiet head, tabular figures. */
.view.paper .month-head{
  grid-template-columns:1.15fr 1fr 1fr 1fr;gap:8px;font-family:var(--font-body);font-size:12px;font-weight:500;
  letter-spacing:0;text-transform:none;color:var(--ink-60);padding:10px 0 6px;border-bottom:1px solid var(--rule);
}
.view.paper .month-row{grid-template-columns:1.15fr 1fr 1fr 1fr;gap:8px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums}
.view.paper .month-row span:not(:first-child){text-align:right;white-space:nowrap;overflow-wrap:normal}
.view.paper .month-row span:first-child{font-weight:500}
.view.paper .month-row:last-child{border-bottom:none}
/* Chart — a real plotting area with a shared baseline, charcoal vs yellow. */
.view.paper .num-chart-head{display:flex;justify-content:space-between;gap:10px;margin-bottom:10px;align-items:center}
.view.paper .num-chart-range{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;color:var(--ink-60)}
.view.paper .num-chart-legend{display:flex;gap:16px;margin:0 0 10px;font-size:12.5px;color:var(--ink-60)}
.view.paper .num-chart-legend span{display:inline-flex;align-items:center;gap:6px}
.view.paper .num-chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.view.paper .num-chart-legend .is-invoiced{background:var(--charcoal)}
.view.paper .num-chart-legend .is-collected{background:var(--amber)}
.view.paper .num-chart-bars{display:flex;height:96px;gap:8px;border-bottom:1px solid var(--ink);align-items:flex-end;justify-content:center}
.view.paper .num-chart-col{display:flex;justify-content:center;height:96px;flex:0 1 72px;gap:4px;align-items:flex-end}
.view.paper .num-chart-bar{display:block;width:14px;border-radius:2px 2px 0 0}
.view.paper .num-chart-bar-invoiced{background:var(--charcoal)}
.view.paper .num-chart-bar-collected{background:var(--amber)}
.view.paper .num-chart-labels{display:flex;gap:8px;margin-top:6px;justify-content:center}
.view.paper .num-chart-labels span{flex:0 1 72px;text-align:center;font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
.view.paper .num-chart-foot{display:flex;justify-content:space-between;gap:10px;border-top:1px solid var(--rule);font-size:13.5px;color:var(--ink);padding-top:10px;margin-top:10px;align-items:baseline}
.view.paper .num-chart-foot span:first-child{color:var(--ink-60)}
.view.paper .num-chart-foot span:last-child{font-family:var(--font-body);font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
/* Slowest payer — same card, red status edge, sentence-case eyebrow. */
.view.paper .slowest-card{border-radius:12px;padding:14px 16px;margin-top:16px}
.view.paper .slowest-eyebrow{font-family:var(--font-body);font-size:12.5px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--st-overdue)}
.view.paper .slowest-name{font-family:var(--font-body);font-weight:600;font-size:18px;color:var(--ink);margin-top:2px}
/* Exports — stacked, full width, shared secondary button. */
.view.paper .numbers-exports{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.view.paper .numbers-exports .btn-ghost{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
.view.paper .numbers-exports .btn-ghost:hover{border-color:var(--ink-60);color:var(--ink)}
.view.paper .numbers-exports .hint{margin:0;font-size:12.5px}
.view.paper .numbers-exports .hint:empty{display:none}
/* Ask about your numbers. */
.view.paper .insights-ask{margin-top:24px;padding-top:20px;border-top:1px solid var(--rule)}
.view.paper .insights-ask h3{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 4px}
.view.paper .insights-ask > .hint{margin:0 0 12px;font-size:13px;line-height:1.5}
.view.paper .insights-ask-row{gap:8px;margin-top:0}
.view.paper .insights-ask-row input{background:var(--paper);border:1px solid var(--rule);border-radius:12px;color:var(--ink);font-size:15px;padding:10px 12px}
.view.paper .insights-ask-row input:focus{border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
.view.paper .insights-ask-row .btn-primary{min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
.view.paper .insights-ask-row .composer-mic{min-height:44px;border-radius:10px;background:var(--paper);color:var(--ink);border:1px solid var(--rule);font-size:13px;font-weight:600}
.view.paper .insights-answer{background:var(--paper);border:1px solid var(--rule);border-radius:12px;color:var(--ink);font-size:14.5px}

/* ---------- Work order: the on-site view ----------
   Money-free by design. Nothing here is amber except the tick, because on site
   the only "action" is ticking a line off — the two footer buttons are quiet
   outlines so neither one shouts at you while you're working. */
.view.paper .workorder-wrap{max-width:640px;margin:0 auto;padding:14px 16px 130px}
.view.paper .wo-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;margin-bottom:var(--section-gap);
}
.wo-card-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.view.paper .wo-card-title{
  font-family:var(--font-mono,monospace);font-weight:600;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--steel-40);
}
.view.paper .wo-count{font-size:12.5px;font-weight:600;color:var(--st-needs);white-space:nowrap}
/* Tick as you go: a big target, because this gets used with gloves on. */
.view.paper .wo-row{
  display:flex;align-items:center;gap:14px;padding:13px 0;min-height:48px;
  border-top:1px solid var(--rule);cursor:pointer;font-size:16px;color:var(--ink);
}
.view.paper .wo-row:first-child{border-top:none}
.view.paper .wo-row input[type=checkbox]{
  appearance:none;-webkit-appearance:none;flex:none;width:26px;height:26px;margin:0;
  border:2px solid var(--rule);border-radius:6px;background:var(--paper);cursor:pointer;
}
.view.paper .wo-row input[type=checkbox]:checked{background:var(--amber);border-color:var(--amber)}
.view.paper .wo-row input[type=checkbox]:checked::after{
  content:"";display:block;width:7px;height:13px;margin:2px auto 0;
  border:solid var(--charcoal);border-width:0 3px 3px 0;transform:rotate(45deg);
}
.view.paper .wo-row.wo-done span{text-decoration:line-through;color:var(--steel-40)}
.view.paper .wo-parts,.view.paper .wo-access{margin:0;font-size:15px;line-height:1.6;color:var(--ink)}

/* Footer: both buttons equal weight, neither shouting. */
.view.paper .wo-actions{
  position:fixed;left:0;right:0;bottom:0;z-index:24;
  background:var(--paper);border-top:1px solid var(--rule);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:8px;
}
.view.paper .wo-action{width:100%;min-height:48px;font-size:15px}

/* The run-sheet's own Work order button sits inline on the day row. */
.view.paper .day-wo{flex:none;white-space:nowrap}


/* The band eyebrow already says WORK ORDER · NO PRICES SHOWN; the header
   title underneath it was the same words twice. Band carries it, as in the
   mockup where the back arrow and the eyebrow share one line. */
.view.paper#view-workorder .app-header .brand-mark{display:none}

/* ---------- On-site sign-off: hand the phone over ----------
   The one amber thing is Save, because handing the phone to a customer is the
   one moment the screen should have exactly one obvious action on it. */
.view.paper .signoff-wrap{max-width:640px;margin:0 auto;padding:14px 16px 130px}
.view.paper .so-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;
  padding:14px 16px;margin-bottom:var(--section-gap);
}
/* What they are actually signing — the work order's own words, verbatim. It
   scrolls rather than truncating: a description you sign is never abridged. */
.view.paper .so-work{
  margin:0;max-height:32vh;overflow:auto;white-space:pre-wrap;
  font-size:15px;line-height:1.65;color:var(--ink);
}
/* Pad and the line under it are one box, as on paper: sign above the rule,
   name and date beneath it. */
.view.paper #soPad{
  display:block;width:100%;height:auto;background:var(--paper);touch-action:none;
  border:1px solid var(--rule);border-bottom:none;border-radius:8px 8px 0 0;cursor:crosshair;
}
.view.paper .so-who{
  display:flex;align-items:baseline;gap:10px;padding:8px 10px;
  border:1px solid var(--rule);border-top:1px solid var(--ink);border-radius:0 0 8px 8px;
}
.view.paper .so-name{
  flex:1 1 auto;min-width:0;border:none;background:transparent;padding:4px 0;
  font-size:15px;color:var(--ink);
}
.view.paper .so-name::placeholder{color:var(--steel-40)}
.view.paper .so-name:focus{outline:none;box-shadow:none}
.view.paper .so-date{flex:none;font-size:13px;color:var(--steel-40);white-space:nowrap}
.view.paper .so-card .hint{margin:10px 0 0}

/* Save is wide and amber, Clear is a quiet outline beside it — same footer
   shape as the mockup, and Save stays disabled until something is drawn. */
.view.paper .so-actions{
  position:fixed;left:0;right:0;bottom:0;z-index:24;
  background:var(--paper);border-top:1px solid var(--rule);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;gap:8px;
}
.view.paper .so-save{flex:2 1 0;min-height:48px}
.view.paper .so-clear{flex:1 1 0;min-height:48px}

/* Band eyebrow carries SIGN-OFF · <address>, same as the work order. */
.view.paper#view-signoff .app-header .brand-mark{display:none}

/* ---------- Job done pack: three asks, all readable before you tap ----------
   Design-system pass (14.09.26), replacing the earlier rules in place.
   Off-white page under its band; the three asks as white 14px cards, the
   review card leading with the one yellow edge and the one yellow button
   (the post and the referral are quiet outlines — the review is the one
   worth doing today); each draft quoted on a fine left rule; photo picker
   thumbs on 10px radii with a yellow pick ring; Not now in a white fixed
   footer. CSS only. */
#view-jobdonepack{background:#F7F6F3}
.view.paper .jdp-wrap{max-width:640px;margin:0 auto;padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px))}
.view.paper .jdp-card{
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;
  padding:16px;margin-bottom:var(--section-gap);box-shadow:0 1px 2px rgba(30,30,30,.05);
}
.view.paper .jdp-lead{border-left:3px solid var(--amber)}
.view.paper .jdp-title{
  margin:0 0 8px;font-family:var(--font-body);font-weight:600;letter-spacing:0;text-transform:none;
  font-size:16px;line-height:1.3;color:var(--ink);
}
/* The draft itself, set as the message it is — quoted, not styled as UI. */
.view.paper .jdp-draft{
  margin:0;white-space:pre-wrap;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ink);
  border-left:2px solid var(--rule);padding-left:12px;overflow-wrap:break-word;
}
.view.paper .jdp-why{margin:0 0 8px;font-size:13px;line-height:1.5;color:var(--ink-60)}
.view.paper .jdp-act{
  width:100%;min-height:44px;margin-top:12px;padding:0 16px;border-radius:10px;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
}
.view.paper .jdp-act.btn-primary{background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
.view.paper .jdp-act.btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
.view.paper .jdp-act.btn-ghost:hover{border-color:var(--ink-60);color:var(--ink)}
.view.paper .jdp-card .hint{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-60)}
.view.paper .jdp-foot{margin:4px 2px 0}
/* Idea 6b: the post card offers its own job's photos, already on file,
   instead of sending the user off to go find them. Tap-to-pick, capped at
   2 — same "two for the post" idea as the mockup. Never shows a photo from
   another job: the query itself is scoped by job_id. */
.view.paper .jdp-photo-picker{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px;margin-top:10px;
}
.view.paper .jdp-photo-thumb{
  position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;cursor:pointer;
  border:2px solid transparent;background:#EBEAE7;
}
.view.paper .jdp-photo-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.view.paper .jdp-photo-thumb.picked{border-color:var(--amber)}
.view.paper .jdp-photo-thumb.picked::after{
  content:"✓";position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:var(--amber);color:var(--charcoal);font-size:12px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.view.paper .jdp-actions{
  position:fixed;left:0;right:0;bottom:0;z-index:24;
  background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -1px 2px rgba(30,30,30,.04);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
}
.view.paper .jdp-action{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
.view.paper .jdp-action:hover{border-color:var(--ink-60);color:var(--ink)}

/* Band eyebrow carries JOB DONE · PAID. */
.view.paper#view-jobdonepack .app-header .brand-mark{display:none}

/* ---------- Annotate a photo ----------
   otv-photo-annotation-spec-24.08.26.md, phases 0+1+2 — a DOM overlay over
   the photo (labels are percent-positioned divs, dimension lines one inline
   SVG over the same box; no canvas on screen, no export in v1).
   touch-action:none on the stage is the same fix #soPad needed.
   Design-system pass (15.09.26), replacing the earlier rules in place:
   off-white page; Label / Dimension line as the shared segmented control
   (the current mode a white lifted segment, not amber text on white); the
   stage on a 12px rule with the photo on charcoal; marks stay dark pills
   with the yellow marking edge because on a photo that IS the annotation
   colour; the editing pill white on the shared input feel with a 36px
   delete; the two hints quiet. Placement, drag, edit, delete untouched. */
#view-photoannotate{background:#F7F6F3}
.view.paper .ann-wrap{max-width:640px;margin:0 auto;padding:14px 16px 28px}
.view.paper .ann-modebar{
  display:flex;gap:4px;margin-bottom:12px;padding:4px;
  background:#EBEAE6;border:1px solid var(--rule);border-radius:12px;
}
.view.paper .ann-mode-btn{
  flex:1 1 0;min-height:40px;padding:0 10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  border:1px solid transparent;border-radius:9px;background:transparent;color:var(--ink-60);cursor:pointer;
}
.view.paper .ann-mode-btn:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.view.paper .ann-mode-btn.current{background:var(--paper);color:var(--ink);box-shadow:0 1px 2px rgba(30,30,30,.08)}
.view.paper .ann-stage{
  position:relative;width:100%;line-height:0;touch-action:none;
  border:1px solid var(--rule);border-radius:12px;overflow:hidden;background:var(--charcoal-0,#1E1E1E);
  box-shadow:0 1px 2px rgba(30,30,30,.05);
}
.view.paper .ann-stage img{width:100%;height:auto;display:block;user-select:none;-webkit-user-drag:none}
.view.paper .ann-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.view.paper .ann-line{stroke:var(--amber);stroke-width:2.5;stroke-linecap:round}
.view.paper .ann-marks{position:absolute;inset:0}
.view.paper .ann-wrap > .hint{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}
.view.paper .ann-wrap > .hint + .hint{margin-top:4px}

/* A label pin / a line's length text — a dark pill on the yellow marking
   edge; 28px minimum so a one-character label is still a target. */
.view.paper .ann-mark{
  position:absolute;transform:translate(-50%,-50%);
  min-width:28px;min-height:28px;padding:5px 10px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(30,30,30,.92);color:#fff;font-family:var(--font-body);font-size:13px;font-weight:600;
  border:1px solid var(--amber);border-radius:14px;white-space:nowrap;
  cursor:grab;touch-action:none;
}
.view.paper .ann-mark-line{background:rgba(30,30,30,.92)}
.view.paper .ann-mark.editing{
  background:var(--paper);border-color:var(--amber);border-radius:12px;
  padding:2px 2px 2px 10px;gap:4px;cursor:default;box-shadow:0 2px 8px rgba(30,30,30,.18);
}
.view.paper .ann-input{
  font-family:var(--font-body);font-size:14px;color:var(--ink);
  background:transparent;border:none;outline:none;width:128px;min-height:36px;
}
.view.paper .ann-del{
  flex:none;width:44px;height:44px;min-width:44px;min-height:44px;
  border:none;border-radius:10px;background:#F1F0ED;
  color:var(--ink);font-size:18px;line-height:1;cursor:pointer;
}
.view.paper .ann-del:hover{background:#E4E2DD}
/* Endpoint drag handles — a fattened, mostly-invisible hit target so a line
   can be grabbed without landing on a 1px stroke. */
.view.paper .ann-handle{
  position:absolute;transform:translate(-50%,-50%);
  width:28px;height:28px;border-radius:50%;
  background:rgba(215,255,0,.28);border:2px solid var(--amber);
  cursor:grab;touch-action:none;
}
.view.paper .ann-pending-dot{
  position:absolute;transform:translate(-50%,-50%);
  width:14px;height:14px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 0 4px rgba(215,255,0,.3);pointer-events:none;
}
/* ---------- Priced tender schedule ----------
   Design-system pass (15.09.26), replacing the earlier rules in place.
   Off-white page under its band; each line a white 12px card — description
   semibold, the money right-aligned and tabular, provenance quiet beneath;
   the unpriced lines keep the one yellow edge and a 44px "Tell it your
   rate" ask because they are the only thing still needing the user; the
   brain's summary rows in a white card as written; the fixed footer white
   with Price the last N yellow and Send to Excel / Send the bid neutral. */
#view-schedule{background:#F7F6F3}
.view.paper .sched-wrap{max-width:640px;margin:0 auto;padding:14px 16px calc(160px + env(safe-area-inset-bottom,0px))}
.view.paper .sched-row{
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:12px 14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
.view.paper .sched-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.view.paper .sched-desc{font-family:var(--font-body);font-size:15px;line-height:1.35;color:var(--ink);font-weight:600;min-width:0;overflow-wrap:break-word}
.view.paper .sched-amount{
  flex:none;font-family:var(--font-body);font-size:16px;font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.view.paper .sched-meta{margin-top:4px;font-size:13px;line-height:1.45;color:var(--ink-60)}
/* Unpriced: the one yellow edge and a yellow ask, because this is the only
   thing on the screen that still needs the user. */
.view.paper .sched-unpriced{border-left:3px solid var(--amber);padding-left:13px}
.view.paper .sched-unpriced .sched-desc{font-weight:600}
.view.paper .sched-ask{
  display:inline-flex;align-items:center;margin:6px 0 -6px -6px;padding:0 6px;min-height:44px;
  font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--amber-deep);background:none;border:none;border-radius:8px;
}
.view.paper .sched-ask:hover{background:rgba(215,255,0,.12)}
/* The brain's own summary rows, shown as written. */
.view.paper .sched-summary{
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:6px 14px;margin:12px 0 10px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
.view.paper .sched-sum-row{
  display:flex;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--rule);
  font-family:var(--font-body);font-size:14.5px;color:var(--ink);font-variant-numeric:tabular-nums;
}
.view.paper .sched-sum-row:first-child{border-top:none}
.view.paper .sched-foot{margin:2px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}
.view.paper .sched-actions{
  position:fixed;left:0;right:0;bottom:0;z-index:24;
  background:var(--paper);border-top:1px solid var(--rule);box-shadow:0 -1px 2px rgba(30,30,30,.04);
  padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:8px;
}
.view.paper .sched-action-row{display:flex;gap:8px}
.view.paper .sched-action{
  width:100%;min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
.view.paper .sched-action.btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.view.paper .sched-action.btn-ghost:hover{border-color:var(--ink-60);color:var(--ink)}
.view.paper .sched-actions [hidden]{display:none}
.view.paper .sched-action-row .sched-action{flex:1 1 0}

/* Band eyebrow carries SCHEDULE · N LINES UNPRICED. */
.view.paper#view-schedule .app-header .brand-mark{display:none}

/* ---------- Application for payment: the money view ----------
   Design-system pass (15.09.26), replacing the earlier rules in place.
   Off-white page under its band; the pace insight as a white 12px card
   with the blue "with them" edge (an application is out once it is out)
   and the figure in blue; the never-restate note quiet beneath; Send to the
   QS yellow and Chase it neutral in a white fixed footer, both 44px. */
#view-afp{background:#F7F6F3}
.view.paper .afp-wrap{max-width:640px;margin:0 auto;padding:14px 16px calc(140px + env(safe-area-inset-bottom,0px))}
.view.paper .afp-insight{
  background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--st-with);
  border-radius:12px;padding:16px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
.view.paper .afp-insight p{margin:0;font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ink)}
.view.paper .afp-insight b{color:var(--st-with);font-weight:600}
.view.paper .afp-note{margin:12px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}
#view-afp .wo-actions{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;box-shadow:0 -1px 2px rgba(30,30,30,.04)}
#view-afp .wo-actions .wo-action{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-afp .wo-actions .btn-primary.wo-action{background:var(--amber);color:var(--ink);border-color:var(--amber)}
#view-afp .wo-actions .btn-ghost.wo-action:hover{border-color:var(--ink-60)}
#view-afp .wo-actions [hidden]{display:none}
/* ---------- Carried over from app-premium.css (unlinked 15.09.26) ----------
   Everything else that file painted is overridden screen by screen above
   and below; these four rules are what a full computed-style diff showed
   still depended on it — plus the Poppins @import, which now sits at the
   top of app.css. */
.otv-header-brand{display:flex;align-items:center}
.otv-mark{width:32px;height:32px;display:block;flex:none}
.biz-save-note{opacity:0;transition:opacity .2s}
.biz-save-note.show{opacity:1}
#view-home .hero-wrap{padding:38px 20px 16px}

/* ---------- Shared paper system (14.09.26) ----------
   Established with the Home refinement and the Jobs pass so every paper
   screen draws from one set: modest sentence-case page title, quiet back
   link, Poppins bands, filter chips vs a neutral segmented control, one
   search field, one compact primary button, one status badge. Screens still
   on the old look pick these up as they're refined — never a per-screen copy. */
.view.paper .app-header{padding:12px 18px}
.view.paper .app-header .brand-mark{font-family:var(--font-body);font-weight:600;font-size:17px;letter-spacing:0;text-transform:none}
.view.paper .app-header .brand-mark b{color:#fff}
/* Back link · title · spacer headers: a 3-column grid so the title centres on the
   SCREEN, not on the leftover space beside a wider back link. */
.view.paper .app-header:has(> .header-spacer){display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.view.paper .app-header:has(> .header-spacer) .link-btn:first-child{justify-self:start}
.view.paper .app-header:has(> .header-spacer) .brand-mark{max-width:100%}
.view.paper .app-header .link-btn{font-weight:500;font-size:13px;color:rgba(255,255,255,.72);padding:0 6px}
.view.paper .app-header .link-btn:hover{color:#fff}
/* Money band — Poppins, no tracking; the figure is the summary, the rest is quiet. */
.view.paper .money-band{padding:0 18px 16px}
.money-band-eyebrow{font-family:var(--font-body);font-weight:500;font-size:13px;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62)}
.money-band-figure{font-family:var(--font-body);font-weight:600;font-size:26px;line-height:1.15;letter-spacing:-.01em;margin-top:4px;color:#fff}
.money-band-sub{font-size:13px;line-height:1.45;margin-top:4px;color:rgba(255,255,255,.62)}
.money-band.band-compact{padding-bottom:14px}
.money-band.band-compact .money-band-figure{font-size:24px;margin-top:2px}
/* Filter chips — the one control that keeps a pill radius. Selected = charcoal, not yellow. */
.view.paper .doc-tabs{gap:6px;margin-bottom:12px}
.view.paper .doc-tab{
  font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:999px;padding:0 14px;min-height:44px;
}
.view.paper .doc-tab:hover{border-color:var(--ink-60);color:var(--ink)}
.view.paper .doc-tab.current{color:#fff;background:var(--charcoal);border-color:var(--charcoal);font-weight:600}
/* Segmented control — a neutral track, the chosen segment lifts to white. */
.view.paper .seg-control{
  display:inline-flex;flex-wrap:nowrap;gap:0;margin:0;padding:3px;border-radius:10px;
  background:#EBEAE7;border:1px solid var(--rule);
}
.view.paper .seg-control .doc-tab{
  flex:1 1 auto;border:none;border-radius:8px;background:transparent;color:var(--ink-60);
  font-size:13px;font-weight:500;min-height:40px;padding:0 12px;white-space:nowrap;
}
.view.paper .seg-control .doc-tab.current{background:#fff;color:var(--ink);font-weight:600;box-shadow:0 1px 2px rgba(30,30,30,.12)}
/* Search — Home's input language on paper, with a small magnifier. */
.view.paper .documents-search{
  font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:12px;padding:10px 12px;min-height:44px;margin-bottom:12px;
}
.view.paper .documents-search::placeholder{color:var(--ink-60)}
.view.paper .documents-search:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
.view.paper .search-field{
  padding-left:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:12px center;background-size:18px 18px;-webkit-appearance:none;appearance:none;
}
.view.paper .search-field::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
/* Select — the same 44px bordered input with a stroked chevron; label sits above. */
.view.paper .select-field{
  display:block;width:100%;min-height:44px;margin:0;padding:0 40px 0 12px;text-align:left;
  font-family:var(--font-body);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px 18px;
}
.view.paper .select-field:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
.view.paper .doc-select-wrap{display:block;margin-bottom:10px}
.view.paper .doc-select-label{display:block;font-size:13px;font-weight:500;color:var(--ink-60);margin-bottom:6px}
/* Compact primary — same yellow, same 44px, Poppins, no tracking. */
.view.paper .btn-primary.btn-small{
  font-family:var(--font-body);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;
  min-height:44px;padding:0 16px;border-radius:10px;background:var(--amber);color:var(--ink);border:1px solid var(--amber);white-space:nowrap;
}
/* Status badge — sentence case, wraps rather than overlapping. */
.view.paper .stage-badge{
  font-family:var(--font-body);font-weight:600;font-size:11.5px;letter-spacing:0;text-transform:none;line-height:1.35;
  padding:3px 8px;border-radius:6px;white-space:normal;text-align:center;max-width:9em;
  background:var(--steel-08);color:var(--ink-60);border:1px solid var(--rule);
}
.view.paper .stage-won,.view.paper .stage-in_progress{background:rgba(215,255,0,.16);color:#6B5300;border-color:rgba(215,255,0,.5)}
/* Group headings (Projects, Documents months) — sentence case, no tracking. */
.view.paper .doc-month{font-family:var(--font-body);font-weight:600;font-size:15px;letter-spacing:0;text-transform:none;color:var(--ink);margin:18px 0 4px;padding:0}
.view.paper .doc-month:first-child{margin-top:4px}
.view.paper .hint{font-size:13px;color:var(--ink-60);line-height:1.45}

/* ---------- Jobs ---------- */
.view.paper .jobs-wrap{padding:14px 16px 32px}
.view.paper #jobsTabs{margin-bottom:10px}
.jobs-viewrow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.jobs-viewrow .seg-control{flex:1 1 auto;min-width:0}
.jobs-viewrow #jobsNew{flex:0 0 auto}
.view.paper .jobs-toolbar{margin-bottom:12px}
.view.paper .jobs-toolbar .documents-search{margin-bottom:0}
#view-jobs .hint#jobsEmpty{padding:24px 0;text-align:center}
#view-jobs #jobsProjects .hint{margin:0 0 10px}

/* Rows (List + Projects) — the Home card system. */
.view.paper .job-row{
  display:flex;align-items:flex-start;gap:10px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:12px 12px 12px 14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(30,30,30,.05);cursor:pointer;
}
.view.paper .job-row:hover{background:var(--paper);border-color:var(--ink-60);box-shadow:0 1px 2px rgba(30,30,30,.05)}
.view.paper .job-row.tone-overdue,.view.paper .job-row.tone-needs,.view.paper .job-row.tone-with,.view.paper .job-row.tone-paid{
  border-left-width:3px;border-radius:12px;padding-left:13px;
}
.view.paper .job-row-title{font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word}
.view.paper .job-row-meta{font-size:13px;color:var(--ink-60);margin-top:2px;line-height:1.4}
.view.paper .job-row-detail{font-size:12.5px;font-weight:500;margin-top:4px}
.view.paper .job-row .stage-badge{margin-top:2px}
.view.paper .job-row-rm{color:var(--ink-60);font-size:20px;line-height:1;padding:0;min-width:44px;min-height:44px;margin:-8px -8px -8px -4px;display:flex;align-items:center;justify-content:center}
.view.paper .job-row-rm:hover{color:var(--st-overdue)}
.view.paper .job-row.is-parked{opacity:.6}

/* Board — pale neutral columns, white cards, the next column peeking in. */
.view.paper .kanban-board{gap:10px;padding:2px 0 12px;margin:0 -16px;padding-left:16px;padding-right:16px;scroll-padding-left:16px;scroll-snap-type:x proximity}
.view.paper .kanban-col{flex:0 0 250px;background:#F1F0ED;border:none;border-radius:12px;padding:10px}
@media(max-width:560px){ .view.paper .kanban-col{flex:0 0 78vw} }
.view.paper .kanban-col-parked{opacity:.65}
.view.paper .kanban-col-head{
  font-family:var(--font-body);font-weight:600;font-size:14px;letter-spacing:0;text-transform:none;color:var(--ink);
  padding:2px 4px 8px;margin-bottom:8px;border-bottom:none;
}
.view.paper .kanban-col-count{background:rgba(30,30,30,.08);color:var(--ink-60);border-radius:999px;padding:1px 8px;font-size:12px;font-weight:600}
.view.paper .kanban-cards{gap:8px}
.view.paper .kanban-card{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:12px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
.view.paper .kanban-card:hover{border-color:var(--ink-60)}
.view.paper .kanban-card-title{font-size:15px;font-weight:600;color:var(--ink);line-height:1.3;margin-bottom:2px;overflow-wrap:break-word}
.view.paper .kanban-card-meta{font-size:13px;color:var(--ink-60);line-height:1.4}
.view.paper .kanban-card-flag{margin-top:6px;font-size:12.5px;font-weight:500;line-height:1.4}
.view.paper .kanban-stage-sel{
  margin-top:10px;width:100%;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:10px;padding:0 36px 0 12px;min-height:44px;cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
}
.view.paper .kanban-stage-sel:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}

/* ---------- Home: black identity band ----------
   Header, greeting, the money figure and the three shortcuts sit on one
   continuous black band — money/identity on black, everything you read on
   paper. Louise's 19.08.26 ruling keeps the owed figure + worklist here.
   14.09.26 visual refinement (this block rewritten in place, not patched):
   one accent (yellow), red/amber only ever mean status, Poppins everywhere,
   the amount is the focus and "owed to you" is its caption. */
#view-home .home-band{background:var(--charcoal); padding-bottom:4px}
#view-home .app-header{padding:12px 18px; border-bottom:none}
#view-home .header-actions{gap:2px}
#view-home .header-actions .link-btn{
  font-size:13px; font-weight:500; color:rgba(255,255,255,.72); padding:0 8px; min-height:44px;
}
#view-home .header-actions .link-btn:hover{color:#fff}
/* The Alerts pill is a status count, so the pill keeps its status red; the
   word itself is as quiet as its neighbours. */
#view-home #navAlerts{color:rgba(255,255,255,.72)}
#view-home .home-greeting{
  margin:0; padding:4px 18px 0; font-family:var(--font-body); font-weight:600;
  font-size:18px; line-height:1.3; color:var(--amber); /* lime, Louise 15.09.26 */
}
#view-home .home-greeting-sub{margin:0; padding:2px 18px 0; font-size:13px; color:rgba(255,255,255,.62)}

/* The figure leads; its caption sits beside it a size down. On the dark
   band --st-overdue fails contrast (2.55:1), so the overdue line uses the
   light status red #FF9A8F (8.1:1) — that line IS status; the total isn't. */
#view-home .home-owed-figure{
  margin:14px 18px 0; font-family:var(--font-body); font-weight:600; font-size:40px;
  line-height:1; letter-spacing:-.02em; color:#fff; display:flex; align-items:baseline; flex-wrap:wrap; gap:0 10px;
  font-variant-numeric:tabular-nums;
}
#view-home .home-owed-caption{font-size:14px; font-weight:500; letter-spacing:0; color:rgba(255,255,255,.62)}
#view-home .home-owed-sub{margin:8px 18px 0; font-size:13px; line-height:1.4; color:#FF9A8F; font-weight:500}
#view-home .home-owed-bar{
  display:flex; height:4px; border-radius:2px; overflow:hidden; margin:10px 18px 0;
  background:rgba(255,255,255,.14);
}
#view-home .bar-seg{display:block; height:100%}
#view-home .bar-seg-overdue{background:#FF9A8F}
#view-home .bar-seg-rest{background:#6AA6FF}

/* Shortcuts — quiet outlined pills in the one accent. */
#view-home .home-quickstart{display:flex; flex-wrap:wrap; gap:8px; padding:16px 18px 14px}
#view-home .qs-chip{
  display:inline-flex; align-items:center; gap:8px; flex:none; background:rgba(215,255,0,.08);
  border:1px solid rgba(215,255,0,.45); border-radius:10px; padding:0 12px 0 10px; min-height:44px;
  font-family:var(--font-body); font-weight:500; font-size:14px; color:var(--amber); cursor:pointer;
}
#view-home .qs-chip:active{background:rgba(215,255,0,.18)}
#view-home .qs-chip svg{width:18px; height:18px; flex:none}

/* ---------- Home: the shortcut grid ----------
   Two columns, icon left in a yellow-tinted tile, label left-aligned, and a
   dedicated second line for status text (the row flag) so a card with a
   flag is the same shape as one without. */
#view-home .home-menu{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:4px 16px 8px}
#view-home .home-row{
  display:grid; grid-template-columns:32px 1fr; grid-template-rows:auto auto; column-gap:10px; row-gap:1px;
  align-items:center; text-align:left; padding:12px 10px; min-height:64px;
  border:1px solid var(--rule); border-radius:12px; background:var(--paper);
  box-shadow:0 1px 2px rgba(30,30,30,.05);
  font-family:var(--font-body); font-size:13.5px; font-weight:600; line-height:1.25; color:var(--ink);
  cursor:pointer; transition:transform .08s ease, box-shadow .08s ease;
}
#view-home .home-row:active{transform:scale(.98); box-shadow:none}
#view-home .row-icon{
  grid-row:1 / span 2; width:32px; height:32px; padding:7px; box-sizing:border-box; flex:none;
  border-radius:8px; background:rgba(215,255,0,.22); color:var(--ink);
}
#view-home .home-row .row-chev{display:none}
#view-home .row-label{grid-column:2; min-width:0; overflow-wrap:break-word}
/* Status line — the one place a shortcut may use a status colour. Keeps its
   row even when empty so every card lines up. */
#view-home .home-row .row-flag{grid-column:2; display:block; font-size:12px; font-weight:500; line-height:1.3; color:var(--ink-60); white-space:normal; min-height:15px}
#view-home .home-row .row-flag[hidden]{display:block !important; visibility:hidden}
#view-home .row-flag.flag-overdue{color:var(--st-overdue)}
#view-home .row-flag.flag-needs{color:var(--st-needs)}
#view-home .row-chev{color:var(--ink-40); font-weight:400}

/* ---------- Home: alerts + run-sheet ----------
   One card system: 1px rule, 12px radius, 12/14 padding, a 3px status edge
   on the left (the only colour that isn't ink or yellow), 44px actions. */
#view-home .home-section-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 18px 4px;
}
#view-home .home-section-eyebrow{font-family:var(--font-body); font-weight:600; font-size:13px; color:var(--ink); letter-spacing:0; text-transform:none}
#view-home .home-section-link{background:none; border:none; padding:0; min-height:44px; font-family:var(--font-body); font-size:13px; font-weight:500; color:var(--ink-60); cursor:pointer}
#view-home .home-worklist,
#view-home .home-runsheet{border-bottom:1px solid var(--rule)}
#view-home .home-worklist-cards{display:flex; flex-direction:column; gap:10px; padding:0 18px 14px}
#view-home .home-wl-card{
  border:1px solid var(--rule); border-left:3px solid var(--st-needs); border-radius:12px;
  padding:12px 14px 12px 13px; display:flex; flex-direction:column; gap:3px; background:var(--paper);
  box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-home .home-wl-card.tone-overdue{border-left-color:var(--st-overdue)}
/* Row 1: who and how much — both ink, both semibold. */
#view-home .home-wl-card-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
#view-home .home-wl-card-title{font-size:16px; font-weight:600; line-height:1.3; color:var(--ink); min-width:0; overflow-wrap:anywhere}
#view-home .home-wl-card-amount{font-size:16px; font-weight:600; color:var(--ink); white-space:nowrap; font-variant-numeric:tabular-nums}
/* Row 2: the compact status badge — a colour AND a word. */
#view-home .home-wl-card-badge{
  display:inline-block; align-self:flex-start; margin:2px 0 3px; padding:2px 8px; border-radius:6px;
  font-size:11.5px; font-weight:600; line-height:1.4; letter-spacing:0; white-space:nowrap;
  color:var(--st-needs); background:rgba(194,59,46,.10);
}
#view-home .home-wl-card.tone-overdue .home-wl-card-badge{color:var(--st-overdue); background:rgba(179,38,30,.10)}
/* Row 3: the document. Row 4: muted terms/pace. */
#view-home .home-wl-card-doc{font-size:14px; font-weight:500; line-height:1.35; color:var(--ink)}
#view-home .home-wl-card-sub{font-size:13px; color:var(--ink-60); line-height:1.4}
#view-home .home-wl-card-actions{display:flex; gap:8px; margin-top:10px}
#view-home .home-wl-card-actions .btn-small{
  flex:1; text-align:center; min-height:44px; padding:0 14px; border-radius:10px; font-size:14px; font-weight:600;
  background:var(--paper); color:var(--ink); border:1px solid var(--rule);
}
#view-home .home-wl-card-actions .btn-small.btn-primary{flex:1.6; background:var(--amber); border-color:var(--amber); color:var(--ink)}
#view-home .home-wl-card-actions .btn-small:not(.btn-primary){flex:1}

#view-home .home-runsheet-rows{display:flex; flex-direction:column; padding:0 18px 12px; gap:8px}
#view-home .home-rs-row{
  display:flex; gap:12px; align-items:center; padding:12px 14px; border:1px solid var(--rule); border-radius:12px;
  background:var(--paper); box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-home .home-rs-row:first-child{border-top:1px solid var(--rule)}
#view-home .home-rs-time{flex:0 0 3.6em; font-family:var(--font-body); font-size:14px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums}
#view-home .home-rs-time.is-clash{color:var(--st-overdue)}
#view-home .home-rs-body{flex:1; min-width:0}
#view-home .home-rs-title{display:block; font-size:15px; font-weight:600; line-height:1.3}
#view-home .home-rs-meta{display:block; font-size:13px; color:var(--ink-60); line-height:1.4}
#view-home .home-rs-clash{flex:1; min-width:0; font-size:13px; line-height:1.4; color:var(--ink)}
#view-home .home-rs-clash b{font-weight:600}
#view-home .home-rs-clash .clash-word{color:var(--st-overdue); font-weight:600}
#view-home .lock-card{border-radius:12px}

/* ---------- TALK: the composer dock ----------
   Attach/type/talk stay fully wired underneath — paint + layout only.
   There is only ever ONE composer element (#composer, moved by JS between
   the Home and Thread slots), so the paint is scoped to the element itself
   rather than to a view. `#composer.composer` not `#composer`:
   app-premium.css paints the Home dock through `#homeComposerSlot .composer`
   (0-1-1-0), which outranks a bare id; matching lets source order settle it.
   The text field gets its own bordered boundary; the row under it holds
   the controls at one height (44px) with the mic a 48px circle — a proper
   touch target without the old 64px medallion. */
#composer.composer{
  background:var(--charcoal);border:none;border-radius:0;padding:10px 16px;
  box-shadow:none;display:flex;flex-direction:column;align-items:stretch;gap:8px;
}
#view-home #composer{position:fixed;left:0;right:0;bottom:env(safe-area-inset-bottom,0px);z-index:25}
#view-home .composer-thumbs{position:fixed;left:16px;right:16px;bottom:calc(112px + var(--tabbar-h) + env(safe-area-inset-bottom,0px));z-index:26}
#composer .composer-text{
  width:100%;min-width:0;box-sizing:border-box;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);
  border-radius:12px;color:#fff;font-family:var(--font-body);font-size:15px;line-height:1.4;resize:none;
  height:auto;min-height:44px;max-height:88px;padding:10px 12px;field-sizing:content;
}
#composer .composer-text::placeholder{color:rgba(255,255,255,.62)}
#composer .composer-text:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#composer .composer-bar{margin-top:0;flex:none;gap:8px;align-items:center}
#composer .composer-hint{display:none}
#composer #attachBtn,#composer #speakBtn{
  background:none;border:1px solid rgba(255,255,255,.2);color:var(--amber); /* lime lettering only, no fill (Louise, 15.09.26) */
  min-height:44px;padding:0 12px;font-family:var(--font-body);font-size:13px;font-weight:500;border-radius:10px;
}
#composer #attachBtn:hover,#composer #speakBtn:hover{border-color:var(--amber);color:var(--amber)}
#composer #sendBtn{min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;text-transform:none;letter-spacing:0}
#composer #speakBtn.active{border-color:var(--amber);color:var(--amber)}
#composer #attachBtn{order:1}
#composer #speakBtn{order:2}
#composer #sendBtn{order:3;margin-left:auto}
#composer #micBtn{order:4}
#composer #micBtn{
  width:48px;height:48px;border-radius:50%;background:var(--amber);border:none;
  display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;
  color:var(--charcoal);transition:transform .1s;padding:0;
}
#composer #micBtn svg{width:22px;height:22px}
#composer #micBtn:active{transform:scale(.94)}
#composer #micBtn.listening{animation:talk-pulse 1.4s ease-in-out infinite}
@keyframes talk-pulse{0%,100%{box-shadow:0 0 0 0 rgba(215,255,0,.5)}50%{box-shadow:0 0 0 10px rgba(215,255,0,0)}}
/* Clear the fixed dock (~124px: 10 + 44 field + 8 + 48 mic + 10, plus room
   for a two-line draft) and the tab bar beneath it, with breathing room so
   the last card never sits under the dock. Measured after the change. */
body.has-dock #view-home{padding-bottom:calc(140px + var(--tabbar-h) + env(safe-area-inset-bottom,0px))}


/* ---------- The bottom tab bar (Home/Jobs/Diary/Paperwork) ----------
   Removed 12.08.26 for the plain Home-menu list, reinstated 20.08.26 to
   match the mockup. Shown only on top-level screens (body.has-tabbar, set
   in showView's own TABBAR_MAP) — a detail screen keeps just its back
   button, never both, per the mockup's own consistency rule. */
:root{--tabbar-h:62px}

/* ---------- Section colours (Claude Design's own icon-colour spec) ----------
   One hue per section, a dark-band variant and a paper variant — "late/
   failed" red is reserved for the existing status system and never used
   here. Applied to: the tab bar's active-tab colour (dark), and the new
   Paperwork hub's row icons (paper, tinted background at 12%). */
:root{
  /* Home tracks the brand accent on the DARK band, so that half follows the
     token rather than restating the hex - the 09.09.26 amber->yellow swap
     moved it automatically.

     The PAPER half is charcoal, not a yellow derivative (ticket T2, decided
     09.09.26). After the yellow swap --amber-deep resolved to #8C6C00, a
     near-match for Paperwork's #8A6516 and Business's #8A6100 - three
     sections meant to be told apart at a glance, all the same mustard. Going
     a shade deeper (#7A5C00) only moves it a few levels along the same hue
     and still reads as that colour on a 20px row icon, so it is not a fix,
     and every other hue on the wheel is already taken.
     Charcoal is the right answer rather than a fallback: it is the other half
     of the brand pair, it is the one value here nothing else can be confused
     with, and Home is the root section - it never has to be picked out of a
     list of siblings, because you are already in it. 16.1:1 on white,
     comfortably past AA's 4.5:1 (the yellow derivative only just cleared it
     at 4.93:1). */
  --cat-home-dark:var(--amber);  --cat-home-paper:var(--charcoal, #1E1E1E);
  --cat-jobs-dark:#38C7B4;      --cat-jobs-paper:#0F766E;
  --cat-diary-dark:#7C9BFF;     --cat-diary-paper:#3746C9;
  --cat-paperwork-dark:#E3B23C; --cat-paperwork-paper:#8A6516;
  --cat-invoices-dark:#46C97A;  --cat-invoices-paper:#158030;
  --cat-quotes-dark:#4FC0E8;    --cat-quotes-paper:#0E6E8C;
  --cat-clients-dark:#C08CF0;   --cat-clients-paper:#6B3FA0;
  --cat-receipts-dark:#A8C93C;  --cat-receipts-paper:#55701A;
  --cat-numbers-dark:#E87BB0;   --cat-numbers-paper:#A63A73;
  --cat-photos-dark:#8FA3BE;    --cat-photos-paper:#3E5878;
  /* Not part of Claude Design's original spec (no colour given for these
     four) — chosen to fill the remaining open hues on the same wheel,
     avoiding every existing category and the reserved red. */
  --cat-business-dark:#E8C13C;      --cat-business-paper:#8A6100;
  --cat-marketing-dark:#5CC96B;     --cat-marketing-paper:#1F7A38;
  --cat-conversations-dark:#4DD9E8; --cat-conversations-paper:#0E7A8C;
  --cat-receptionist-dark:#B08CF0;  --cat-receptionist-paper:#5A2FA6;
  /* Not part of the original 10-category spec, added on request — a
     raspberry/crimson distinct from both the reserved status red (paler,
     more salmon) and Numbers' pink (more magenta). */
  --cat-alerts-dark:#FF5C7A; --cat-alerts-paper:#B3204A;
  /* Site & safety row on the Paperwork hub (15.09.26) — the one open hue
     left, a burnt orange: distinct from the yellow accent, Paperwork mustard
     and the status reds. 5.0:1 on white. */
  --cat-safety-paper:#B4531A;
}
/* Was the alerts category colour (a coral-pink, --cat-alerts-dark) — Louise
   wants alerts/urgency reading as unambiguous red, so this now shares the
   same red token as everything else that needs a look. */
#navAlerts{color:var(--st-needs)}
#alertsDot{background:var(--st-needs); color:#fff}

/* ---------- The Paperwork hub ----------
   Reached from the tab bar's Paperwork tab: four grouped panels of every
   paperwork destination on a soft off-white page, each under a quiet
   sentence-case group title. Shared system: charcoal icons on a pale
   neutral tile (no per-section colours), 1px dividers that start at the
   label edge, one muted chevron, 44px+ rows. */
#view-paperwork{background:#F7F6F3}
#view-paperwork .paperwork-groups{padding:6px 16px 32px}
/* <section> carries a global 64px padding elsewhere in app.css — not here. */
#view-paperwork .paperwork-group{padding:0;margin:0}
#view-paperwork .paperwork-group + .paperwork-group{margin-top:20px}
#view-paperwork .paperwork-group-title{
  font-family:var(--font-body); font-weight:600; font-size:13px; letter-spacing:0; text-transform:none;
  color:var(--ink-60); margin:0 0 8px 4px;
}
#view-paperwork .paperwork-menu{
  margin:0; background:var(--paper); border:1px solid var(--rule); border-radius:14px; overflow:hidden;
}
#view-paperwork .paperwork-row{
  display:flex; align-items:center; gap:14px; width:100%; min-height:60px; text-align:left;
  padding:10px 16px; border:none; background:var(--paper); position:relative;
  font-family:var(--font-body); font-size:16px; font-weight:600; color:var(--ink); cursor:pointer;
}
/* Divider begins at the label edge (16px pad + 38px tile + 14px gap). */
#view-paperwork .paperwork-row + .paperwork-row::before{
  content:''; position:absolute; left:68px; right:0; top:0; height:1px; background:var(--rule);
}
#view-paperwork .paperwork-row:hover{background:#FBFAF8}
#view-paperwork .paperwork-row:active{background:#F1F0ED}
#view-paperwork .paperwork-row:focus-visible{outline:2px solid var(--amber); outline-offset:-3px; border-radius:8px}
#view-paperwork .paperwork-row-icon{
  width:38px; height:38px; flex:none; border-radius:10px;
  color:var(--pw, var(--ink)); background:color-mix(in srgb, var(--pw, #1E1E1E) 12%, #fff);
  display:flex; align-items:center; justify-content:center;
}
/* One hue per row (15.09.26, Louise: "give all the icons different colours").
   Each row sets --pw from the section-colour spec above; the icon draws in
   that hue on a 12% tint of it. Rows with no section of their own borrow
   the nearest sibling hue (Tenders -> diary indigo, Chases -> the alerts
   raspberry, Certificates -> jobs teal, Other -> business mustard, Notes ->
   receptionist violet, All documents -> the charcoal root). */
#pwInvoices{--pw:var(--cat-invoices-paper)}
#pwQuotes{--pw:var(--cat-quotes-paper)}
#pwTenders{--pw:var(--cat-diary-paper)}
#pwChases{--pw:var(--cat-alerts-paper)}
#pwReceipts{--pw:var(--cat-receipts-paper)}
#pwClients{--pw:var(--cat-clients-paper)}
#pwNumbers{--pw:var(--cat-numbers-paper)}
#pwCertificates{--pw:var(--cat-jobs-paper)}
#pwSiteSafety{--pw:var(--cat-safety-paper)}
#pwMarketing{--pw:var(--cat-marketing-paper)}
#pwPhotos{--pw:var(--cat-photos-paper)}
#pwAll{--pw:var(--cat-home-paper)}
#pwOther{--pw:var(--cat-business-paper)}
#pwNotes{--pw:var(--cat-receptionist-paper)}
#view-paperwork .paperwork-row-icon svg{width:21px; height:21px; stroke-width:1.8}
#view-paperwork .paperwork-row-label{flex:1; min-width:0; line-height:1.3}
/* The chevron is an icon, not a glyph: the text stays for screen readers
   but is sized away and a stroked SVG draws in its place. */
#view-paperwork .paperwork-row-chev{
  flex:none; width:20px; height:20px; font-size:0; color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:center; background-size:20px 20px;
}

/* ---------- Your Business (Clients section first, 14.09.26) ----------
   Off-white page; the five sections as chips on a wide screen and one
   labelled select on a phone; every panel a white 14px card with 16px
   internal padding (a global brand.css section{padding:64px} used to leak
   in here — that was the blank space; the rule itself went on 15.09.26). Clients: a heading + one-line lede,
   one grouped list with fine dividers (name and actions on top, the four
   compliance fields beneath — same inputs, same binding), an empty state
   only when there is genuinely nothing saved, Add client as the yellow
   primary beside a neutral Import CSV with its column guidance directly
   under it, and Save details in a separated form footer. */
#view-business{background:#F7F6F3}
#view-business .business-wrap{padding:14px 16px 32px}
#view-business .business-lede{font-size:13px;line-height:1.5;color:var(--ink-60);margin:0 0 12px}
#view-business #bizTabs{margin-bottom:12px}
#view-business .biz-select-wrap{display:none}
@media(max-width:560px){
  #view-business #bizTabs{display:none}
  #view-business .biz-select-wrap{display:block;margin-bottom:12px}
}
#view-business .biz-panel{padding:0;margin:0 0 var(--section-gap);background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-business .biz-panel > .biz-fields{padding:16px}
#view-business .biz-panel-head{margin-bottom:4px}
#view-business .biz-panel-title{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0}
#view-business .biz-panel-lede{font-size:13px;line-height:1.45;color:var(--ink-60);margin:2px 0 0}
/* Rows — one list, dividers between, no per-row cards. */
#view-business .clients-list .row-clients{display:block;margin:0;padding:12px 0;border-top:1px solid var(--rule);background:none;border-radius:0}
#view-business .clients-list .row-clients:first-child{border-top:none;padding-top:4px}
#view-business .clients-list .row-clients:last-child{padding-bottom:4px}
#view-business .client-row-top{display:flex;align-items:center;gap:8px}
#view-business .client-row-top .client-name-input{flex:1 1 auto;min-width:0;font-weight:600;font-size:15px}
/* The tax fields that used to sit here moved onto the client's own screen;
   the row now carries who they are and how to reach them. */
#view-business .client-type-badge{margin:6px 0 0;display:inline-block}
#view-business .client-type-domestic{background:color-mix(in srgb,var(--cat-diary) 12%,#fff);color:var(--cat-diary);border-color:color-mix(in srgb,var(--cat-diary) 30%,#fff)}
#view-business .client-type-commercial{background:color-mix(in srgb,var(--cat-jobs) 12%,#fff);color:var(--cat-jobs);border-color:color-mix(in srgb,var(--cat-jobs) 30%,#fff)}
#view-business .client-row-meta{margin:6px 0 0;font-size:13px;color:var(--ink-60);line-height:1.4;overflow-wrap:anywhere}
#view-business .clients-toolbar{display:flex;flex-direction:column;gap:8px;margin:0 0 4px}
#view-business .clients-filter{margin:0}
#view-business .row input,#view-business .row select{
  font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:10px;padding:0 12px;min-height:44px;width:100%;
}
#view-business .row select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
}
#view-business .row input::placeholder{color:var(--ink-60)}
#view-business .row input:focus,#view-business .row select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-business .client-open{
  flex:none;min-height:44px;padding:0 12px;border-radius:10px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);white-space:nowrap;
}
#view-business .client-open:hover:not(:disabled){border-color:var(--ink-60)}
#view-business .client-open:disabled{opacity:.45;color:var(--ink-60)}
#view-business .row-rm{
  flex:none;width:44px;height:44px;margin:0 -6px 0 -2px;padding:0;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:10px;background:none;color:var(--ink-60);font-size:0;
}
#view-business .row-rm svg{width:20px;height:20px}
#view-business .row-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#view-business .row-rm:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
/* Empty state — only rendered when the profile has genuinely no clients. */
#view-business .clients-empty{margin:0;padding:20px 8px;text-align:center;line-height:1.45}
#view-business .clients-empty strong{display:block;font-weight:600;font-size:15px;color:var(--ink)}
#view-business .clients-empty span{display:block;font-size:13px;color:var(--ink-60);margin-top:2px}
/* Actions — yellow primary, neutral secondary; they wrap to a stack when narrow. */
#view-business .clients-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
#view-business .clients-actions .btn-primary.btn-small,
#view-business .clients-actions .btn-secondary{flex:1 1 150px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;padding:0 16px;cursor:pointer}
#view-business .clients-actions .btn-secondary{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
#view-business .clients-actions .btn-secondary:hover{border-color:var(--ink-60)}
#view-business .clients-csv-hint{margin:8px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-60)}
/* Form footer — Save details, separated from the panel above by one rule. */
#view-business .biz-save-bar{position:static;z-index:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding:16px 0 0;background:none;border-top:1px solid var(--rule)}
#view-business #bizSave{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;min-height:44px;padding:0 18px;border-radius:10px;background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
#view-business .biz-save-note{font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-60)}
/* The other four panels (15.09.26) — Company details / Labour rates /
   Materials / Travel & expenditures — inside the same Business block:
   sentence-case labels over shared 44px inputs; group headings sentence-
   case with a fine divider between groups; the logo box a pale dashed tile;
   the trade picker's summary and options on the shared input shape with a
   charcoal check; review-platform rows with the name in ink; the materials
   rate card as label-less two-column rows with a 44px remove, Add item as
   the yellow primary beside a neutral Import CSV, CSV guidance beneath. */
#view-business .biz-fields{gap:12px}
#view-business .field{gap:5px}
#view-business .field > span{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#view-business .field-row{gap:10px 12px}
#view-business .field-row .field{flex:1 1 100%;min-width:0}
@media(min-width:600px){ #view-business .field-row .field{flex:1 1 220px} }
#view-business .field input,#view-business .field select,#view-business .field textarea,#view-business .review-platform-url,#view-business #tradeOther{
  font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:10px;padding:0 12px;min-height:44px;width:100%;box-sizing:border-box;
}
#view-business .field textarea{padding:10px 12px;min-height:88px;line-height:1.5;resize:vertical}
#view-business .field select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
}
#view-business .field input::placeholder,#view-business .field textarea::placeholder,#view-business .review-platform-url::placeholder{color:var(--ink-60)}
#view-business .field input:focus,#view-business .field select:focus,#view-business .field textarea:focus,#view-business .review-platform-url:focus,#view-business #tradeOther:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
/* Group headings */
#view-business .field-group{gap:10px}
#view-business .field-group + .field-group{padding-top:16px;border-top:1px solid var(--rule)}
#view-business .field-group-label.otv-eyebrow,#view-business .biz-fields > .field-group > .otv-eyebrow,#view-business .field-group > span.otv-eyebrow{
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink);
}
#view-business .field-group > span.otv-eyebrow{margin-top:8px !important}
#view-business .biz-fields .hint{margin:0;font-size:12.5px;line-height:1.45;color:var(--ink-60)}
/* Logo */
#view-business .logo-row{gap:14px;margin-bottom:2px}
#view-business .logo-box{width:72px;height:72px;border:1px dashed var(--ink-60);border-radius:10px;background:#F7F6F3}
#view-business .logo-box:hover{border-color:var(--ink)}
#view-business .logo-box span{font-family:var(--font-body);font-size:11.5px;color:var(--ink-60)}
#view-business .logo-actions{font-size:13px;color:var(--ink-60)}
#view-business .logo-actions .link-btn{min-height:44px;padding:0 4px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--amber-deep)}
/* Trade picker */
#view-business .trade-summary{padding:8px 40px 8px 12px;min-height:44px;background:var(--paper);border:1px solid var(--rule);border-radius:10px;justify-content:center}
#view-business .trade-summary:hover{border-color:var(--ink-60)}
#view-business .trade-field[open] > .trade-summary{border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-business .trade-summary-label{font-family:var(--font-body);font-size:12.5px;font-weight:500;color:var(--ink-60);letter-spacing:0;text-transform:none}
#view-business .trade-summary-value{font-family:var(--font-body);font-size:14.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink)}
#view-business .trade-summary::after{color:var(--ink-60);top:50%;transform:translateY(-50%)}
#view-business .trade-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:10px}
#view-business .trade-opt{background:var(--paper);border:1px solid var(--rule);border-radius:10px;min-height:44px;padding:0 12px}
#view-business .trade-opt:hover{border-color:var(--ink-60)}
#view-business .trade-opt input{width:20px;height:20px;accent-color:var(--charcoal)}
#view-business .trade-opt span{font-family:var(--font-body);font-size:14px;color:var(--ink)}
#view-business .trade-field #tradeOther{margin-top:8px}
/* Review platforms */
#view-business .review-platform-row{gap:10px;min-height:44px;flex-wrap:wrap}
#view-business .review-platform-name{font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink);flex:0 0 96px}
#view-business .review-platform-url{flex:1 1 160px}
#view-business .toggle-track{background:var(--rule)}
#view-business .toggle-switch input:checked + .toggle-track{background:var(--amber)}
#view-business .toggle-track::after{box-shadow:0 1px 2px rgba(0,0,0,.2)}
/* Materials rate card */
#view-business .rows-head{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60);padding:0;margin-bottom:4px}
#view-business .rows-head-materials,#view-business .row-materials{grid-template-columns:2fr 1fr 44px}
#view-business .row-materials{gap:8px;margin-bottom:8px}
/* The Clients pass sized .row-rm text to 0 for its SVG icon; materials rows still use the × glyph. */
#view-business .row-materials .row-rm{font-size:20px;color:var(--ink-60)}
#view-business .row-materials + .row-materials{padding-top:8px;border-top:1px solid var(--rule)}
#view-business .rows-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
#view-business .biz-panel[data-tab="materials"] .rows-actions .btn-ghost{
  flex:1 1 150px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;padding:0 16px;cursor:pointer;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-business .biz-panel[data-tab="materials"] .rows-actions .btn-ghost:hover{border-color:var(--ink-60)}
#view-business .biz-panel[data-tab="materials"] .rows-actions #addMaterialRow{background:var(--amber);color:var(--ink);border-color:var(--amber)}
#view-business .biz-panel[data-tab="materials"] .rows-actions + .hint{margin-top:8px}

/* ---------- Receipts ----------
   Off-white page; a compact three-cell summary panel (Numbers typography
   at a smaller scale); All / No job chips with the unfiled note beside
   them; Add receipt as the yellow primary above the list; each receipt a
   white card with labelled fields (Date + Amount paired, the rest full
   width), View photo + Remove receipt in its footer; the CSV export as the
   shared secondary below the list. Same inputs, same binding. */
#view-receipts{background:#F7F6F3}
#view-receipts .receipts-wrap{padding:14px 16px 32px}
#view-receipts .receipts-wrap > .hint{margin:0 0 14px}
#view-receipts .receipts-summary{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:14px 16px;margin-bottom:14px;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
@media(max-width:359px){ #view-receipts .receipts-summary{grid-template-columns:1fr} }
#view-receipts .rsum-cell{display:flex;flex-direction:column;justify-content:space-between;gap:2px;min-width:0}
#view-receipts .rsum-label{font-size:12px;font-weight:500;line-height:1.35;color:var(--ink-60)}
#view-receipts .rsum-value{font-size:17px;font-weight:600;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:break-word}
#view-receipts .receipts-filter{margin-bottom:12px}
#view-receipts #receiptsTabs{margin:0}
#view-receipts .receipts-unfiled-note{margin:10px 0 0;font-size:13px;line-height:1.45;color:var(--amber-deep)}
#view-receipts .receipts-add{margin:0 0 12px}
#view-receipts .receipts-add .btn-primary.btn-small{width:100%}
/* Cards */
#view-receipts .row-receipts{
  display:block;margin:0 0 10px;padding:16px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-receipts .receipt-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:359px){ #view-receipts .receipt-fields{grid-template-columns:1fr} #view-receipts .rc-wide{grid-column:auto} }
#view-receipts .rc-wide{grid-column:1 / -1}
#view-receipts .rc-field{display:flex;flex-direction:column;gap:4px;min-width:0}
#view-receipts .rc-field > span{font-size:12px;font-weight:500;line-height:1.3;color:var(--ink-60)}
#view-receipts .row input,#view-receipts .row select{
  font-family:var(--font-body);font-size:14px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:10px;padding:0 12px;min-height:44px;width:100%;
}
#view-receipts .row select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
}
#view-receipts .row input::placeholder{color:var(--ink-60)}
#view-receipts .row input:focus,#view-receipts .row select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-receipts .receipt-job-note{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-60)}
#view-receipts .receipt-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--rule)}
#view-receipts .receipt-foot .row-photo{
  min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  color:var(--ink);background:var(--paper);border:1px solid var(--rule);white-space:nowrap;
}
#view-receipts .receipt-foot .row-photo:hover{border-color:var(--ink-60);color:var(--ink)}
#view-receipts .receipt-foot .row-photo[hidden]{display:none}
#view-receipts .receipt-foot .row-rm{
  margin-left:auto;min-height:44px;padding:0 10px;border:none;border-radius:10px;background:none;
  font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--ink-60);white-space:nowrap;
}
#view-receipts .receipt-foot .row-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#view-receipts .receipt-foot .row-rm:focus-visible,#view-receipts .receipt-foot .row-photo:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
#view-receipts .hint#receiptsEmpty{padding:20px 0;text-align:center;margin:0}
/* Export — the shared secondary, full width, below the list. */
#view-receipts .receipts-exports{display:flex;flex-direction:column;gap:8px;margin-top:16px}
#view-receipts .receipts-exports .btn-ghost{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-receipts .receipts-exports .btn-ghost:hover{border-color:var(--ink-60);color:var(--ink)}
#view-receipts .receipts-exports .hint{margin:0;font-size:12.5px}
#view-receipts .receipts-exports .hint:empty{display:none}

/* ---------- Your photos ----------
   Off-white page; a one-line lede with the count beneath; a labelled Job
   select beside the yellow Add photos primary (stacking when narrow); a
   two-column gallery of white cards (three at 600px, four at 900px) —
   square cover-cropped previews, the job name as a caption below the
   image, a compact dark Annotated badge in one corner. The card shape is
   shared with the job screen's own photo strip via .photo-thumb. */
#view-photos{background:#F7F6F3}
#view-photos .photos-wrap{padding:14px 16px 32px}
#view-photos .photos-lede{margin:0 0 2px;font-size:14px;color:var(--ink)}
#view-photos .photos-summary{margin:0 0 14px;font-size:13px;color:var(--ink-60)}
#view-photos .photos-summary:empty{display:none}
#view-photos .photos-toolbar{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px 12px;margin-bottom:6px}
#view-photos .photos-job-wrap{flex:1 1 200px;min-width:0;margin:0}
#view-photos .photos-toolbar .btn-primary.btn-small{flex:1 1 140px}
#view-photos #photosUploadMsg{margin:6px 0 0}
#view-photos #photosUploadMsg:empty,#view-photos #photosErr:empty{display:none}
#view-photos .photos-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px;align-items:start}
@media(min-width:600px){ #view-photos .photos-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media(min-width:900px){ #view-photos .photos-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
#view-photos .hint#photosEmpty{padding:24px 0;text-align:center;margin:0}
/* The card — the square lives on the image box, not the card, so a caption fits under it. */
.view.paper .photo-thumb{
  aspect-ratio:auto;display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(30,30,30,.05);cursor:pointer;
}
.view.paper .photo-thumb:hover{border-color:var(--ink-60)}
.view.paper .photo-thumb:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
.view.paper .photo-thumb-img{position:relative;aspect-ratio:1;width:100%;background:#EBEAE7;overflow:hidden}
.view.paper .photo-thumb-img img{width:100%;height:100%;object-fit:cover;display:block}
.view.paper .photo-thumb-job{
  position:static;display:block;padding:8px 10px 9px;font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1.3;
  color:var(--ink);background:none;white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:break-word;
}
.view.paper .photo-thumb-ann{
  position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;
  font-family:var(--font-body);font-size:11px;font-weight:600;line-height:1.2;color:#fff;background:rgba(30,30,30,.72);
}
.view.paper .photo-thumb-ann svg{width:11px;height:11px}

/* ---------- Photo viewer (overlay) ----------
   Opened from Your photos and the job's photo strip. The overlay lives
   outside every .view.paper, so it inherited app.css's dark-shell button
   and chip defaults on a white panel. Settled onto the system: a white
   14px panel on the dark backdrop, the image on its own rounded box
   (contained, never cropped), the filed-under row as a plain sentence
   with a quiet Change link or a neutral Add to a job, the note on the
   shared 44px input, Save yellow, Annotate and Close neutral, Delete a
   quiet red text button. CSS only — open/close, save, delete, annotate
   and the job picker are untouched. */
#photoDetail .photo-detail-backdrop{background:rgba(30,30,30,.78)}
#photoDetail .photo-detail-panel{
  width:min(100vw - 32px,480px);max-height:calc(100vh - 32px);
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 8px 24px rgba(30,30,30,.18);
  padding:12px 12px 14px;gap:12px;font-family:var(--font-body);color:var(--ink);
}
#photoDetail .photo-detail-panel img{width:100%;max-height:52vh;object-fit:contain;border-radius:10px;background:#F1F0ED}
#photoDetail .docket-jobassign{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:12px;padding:0;background:none;border:none;font-family:var(--font-body);font-size:14px;line-height:1.5;color:var(--ink)}
#photoDetail .jobassign-label{flex:1 1 auto;min-width:0}
#photoDetail .docket-jobassign .link-btn{flex:none}
#photoDetail .jobassign-label{font-weight:500}
#photoDetail .docket-jobassign .link-btn{min-height:44px;padding:0 6px;font-size:14px;font-weight:600;color:var(--ink-60);text-decoration:underline;text-underline-offset:3px}
#photoDetail .docket-jobassign .link-btn:hover{color:var(--ink)}
#photoDetail .jobassign-hint{font-size:12.5px;color:var(--ink-60)}
#photoDetail .jobassign-chips .chip{min-height:44px;padding:0 14px;border-radius:999px;font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--rule)}
#photoDetail .jobassign-chips .chip:hover{border-color:var(--ink-60);background:var(--paper)}
#photoDetail input[type="text"]{min-height:44px;padding:0 12px;border:1px solid var(--rule);border-radius:10px;font-size:15px;color:var(--ink);background:var(--paper)}
#photoDetail input[type="text"]:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#photoDetail .btn-small{
  min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#photoDetail .btn-small:hover{border-color:var(--ink-60)}
#photoDetail .btn-small:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#photoDetail .btn-small.btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
#photoDetail .rows-actions{margin:0;gap:8px}
#photoDetail .rows-actions .btn-small{flex:1 1 auto}
#photoDetail #photoDetailDelete{flex:0 0 100%;order:9;background:none;border-color:transparent;color:#B3261E;font-weight:500}
#photoDetail #photoDetailDelete:hover{background:rgba(179,38,30,.06);border-color:transparent}

/* ---------- Thread (the conversation) ----------
   Off-white page under the brand header; your words in a charcoal bubble
   on the right, the brain's replies as white cards on the left — reading
   in semibold, the question in full ink, tap options as 44px pills, the
   save offer as a pale panel with the yellow Save; the docket keeps its
   own neutral paper (internals untouched) and only its shadow, radius and
   the app-chrome action row are settled here; the TALK dock stays black.
   Every handler, string and the docket's print rules are unchanged. */
#view-thread{background:#F7F6F3}
#view-thread .thread{padding:14px 16px 16px;gap:12px}
/* You */
#view-thread .bubble.user{
  max-width:86%;background:var(--charcoal);color:#fff;border-radius:16px 16px 4px 16px;padding:11px 14px;
  font-family:var(--font-body);font-size:15px;line-height:1.45;overflow-wrap:break-word;
}
#view-thread .bubble.user .u-thumbs img{border-radius:8px}
#view-thread .bubble.user .filebadge{background:rgba(255,255,255,.12);color:#fff}
#view-thread .edit-msg-btn{color:rgba(255,255,255,.72);font-family:var(--font-body);font-size:12.5px;min-height:44px;min-width:44px;margin:-4px -6px -10px auto;padding:0 6px;display:flex;align-items:center;justify-content:flex-end}
#view-thread .edit-msg-btn:hover{color:#fff}
/* The brain */
#view-thread .bubble.assistant{
  background:var(--paper);border:1px solid var(--rule);border-radius:16px 16px 16px 4px;padding:14px 16px;gap:10px;
  box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-thread .bubble.assistant.error{background:var(--paper);border-color:var(--rule);border-left:3px solid var(--st-overdue);color:var(--st-overdue);font-size:14.5px;line-height:1.45}
#view-thread .reading{font-family:var(--font-body);font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.4}
#view-thread .reading.records-answer{font-weight:400;font-size:14.5px;color:var(--ink);white-space:pre-line}
#view-thread .question{font-size:15px;color:var(--ink);line-height:1.5}
/* Tap options — pills, one height, ink text; the escape chip is quiet, not italic. */
#view-thread .chip-row{gap:8px}
#view-thread .chip{
  display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;
  font-family:var(--font-body);font-size:14px;font-weight:500;line-height:1.3;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);text-decoration:none;text-align:left;white-space:normal;
}
#view-thread .chip:hover{border-color:var(--ink-60);background:var(--paper)}
#view-thread .chip:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-thread .chip.escape-chip{align-self:flex-start;color:var(--ink-60);font-style:normal;border-color:transparent;background:#F1F0ED}
#view-thread .chip.escape-chip:hover{color:var(--ink);border-color:var(--rule)}
/* Save offer / client offer — a pale panel inside the reply. */
#view-thread .save-offer{background:#F7F6F3;border:1px solid var(--rule);border-radius:10px;padding:12px;gap:8px;font-size:14px}
#view-thread .save-offer-label{font-family:var(--font-body);font-weight:500;color:var(--ink);line-height:1.4}
#view-thread .save-offer .btn-small{
  min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-thread .save-offer .btn-small:hover:not(:disabled){border-color:var(--ink-60)}
#view-thread .save-offer .btn-small.btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
#view-thread .save-offer-confirm,#view-thread .save-offer-note{color:var(--ink-60);font-size:13px}
#view-thread .save-offer-confirm:empty{display:none}
/* Cover email */
#view-thread .cover-email{background:#F7F6F3;border:1px solid var(--rule);border-radius:10px;padding:12px}
#view-thread .cover-email-label{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60);margin-bottom:4px}
#view-thread .cover-email-body{font-size:14px;line-height:1.5;color:var(--ink)}
/* Working indicator */
#view-thread .working{color:var(--ink-60);font-family:var(--font-body);font-size:13.5px;padding:2px 4px}
#view-thread .working .dots span{background:var(--charcoal)}
/* The docket — internals are the customer's document and stay exactly as
   they are; only the card's edge and the app-chrome rows around it change. */
.view.paper .docket{border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
.view.paper .docket-actions{gap:8px;padding:12px 16px 14px;background:#F7F6F3;border-top:1px solid var(--rule)}
.view.paper .docket-actions .btn-ghost,.view.paper .docket-actions .btn-primary{
  min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
.view.paper .docket-actions .btn-ghost:hover{border-color:var(--ink-60)}
.view.paper .docket-actions .btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
.view.paper .docket-jobassign,.view.paper .docket-status{font-family:var(--font-body)}

/* ---------- Job detail ----------
   Reached from the Jobs list; the list's band is hidden while a job is open
   so the job's own head card leads. Off-white page; every section a white
   14px card with 16px padding; sentence-case labels over shared 44px
   inputs; the stage track as pills (done = yellow tint, current = charcoal);
   checklist rows and document rows on fine dividers; measurement / take-off
   / cost rows as compact grids; a quiet red Delete beside the Save job
   footer. Every id, handler and calculation is untouched — CSS only. */
#view-jobs:has(#jobDetail:not([hidden])){background:#F7F6F3}
#view-jobs:has(#jobDetail:not([hidden])) .money-band{display:none}
#view-jobs:has(#jobDetail:not([hidden])) .app-header{padding-bottom:12px}
#jobDetail.jobs-wrap{padding:14px 16px 32px}
#jobDetail > .link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-6px 0 6px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink-60)}
#jobDetail > .link-btn:hover{color:var(--ink)}
/* Cards */
#jobDetail .job-head,#jobDetail .job-section{
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:16px;margin:0 0 var(--section-gap);
  box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#jobDetail .job-head{gap:12px}
#jobDetail .job-section h3{margin:0 0 10px;padding:0;border:none}
#jobDetail .job-section > .hint{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:var(--ink-60)}
/* Fields */
#jobDetail .field{gap:5px}
#jobDetail .field > span,#jobDetail .field-lab{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#jobDetail .field-row{gap:10px 12px}
#jobDetail .field-row .field{flex:1 1 100%;min-width:0}
@media(min-width:600px){ #jobDetail .field-row .field{flex:1 1 220px} }
#jobDetail input[type="text"],#jobDetail input[type="number"],#jobDetail input[type="date"],#jobDetail input[type="time"],#jobDetail select,#jobDetail textarea,#jobDetail .job-add-input{
  font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:10px;padding:0 12px;min-height:44px;width:100%;box-sizing:border-box;
}
#jobDetail textarea,#jobDetail #jobNotes{padding:10px 12px;min-height:96px;line-height:1.5;resize:vertical}
#jobDetail select{
  -webkit-appearance:none;appearance:none;padding-right:34px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:16px 16px;
}
#jobDetail input::placeholder,#jobDetail textarea::placeholder{color:var(--ink-60)}
#jobDetail input:focus,#jobDetail select:focus,#jobDetail textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#jobDetail .field-row .link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--amber-deep)}
#jobDetail .docket-jobassign{padding:0;background:none;border:none;font-family:var(--font-body);font-size:13.5px;color:var(--ink)}
#jobDetail .docket-jobassign:empty{display:none}
/* Stage */
#jobDetail .job-stage{margin-top:2px}
#jobDetail .job-stage-head{flex-wrap:wrap;gap:8px}
#jobDetail .job-stage-head .field-lab{flex:1 1 100%}
#jobDetail .job-stage-head .btn-small{
  flex:1 1 140px;min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#jobDetail .job-stage-head .btn-small:hover{border-color:var(--ink-60)}
#jobDetail #jobPark.active{background:rgba(215,255,0,.16);border-color:rgba(215,255,0,.5);color:#6B5300}
#jobDetail .stage-track{gap:8px;margin-top:4px}
#jobDetail .stage-pill{
  min-height:44px;padding:0 14px;border-radius:999px;font-family:var(--font-body);font-size:13.5px;font-weight:500;
  color:var(--ink-60);background:var(--paper);border:1px solid var(--rule);
}
#jobDetail .stage-pill:hover{border-color:var(--ink-60);color:var(--ink)}
#jobDetail .stage-pill.done{color:#6B5300;background:rgba(215,255,0,.16);border-color:rgba(215,255,0,.5)}
#jobDetail .stage-pill.current{color:#fff;background:var(--charcoal);border-color:var(--charcoal);font-weight:600}
#jobDetail .stage-track.parked .stage-pill{opacity:.45}
/* Documents in this job */
#jobDetail #jobDocsRows .doc-row{display:flex;align-items:center;gap:10px;padding:10px 0;margin:0;border:none;border-top:1px solid var(--rule);border-radius:0;background:none;box-shadow:none;cursor:pointer}
#jobDetail #jobDocsRows .doc-row:first-child{border-top:none;padding-top:0}
#jobDetail #jobDocsRows .doc-row-title{font-size:14.5px;font-weight:600;color:var(--ink);white-space:normal;overflow-wrap:break-word}
#jobDetail #jobDocsRows .doc-row-meta{font-size:12.5px;color:var(--ink-60)}
#jobDetail .job-doc-rm{min-height:44px;padding:0 8px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink-60);text-decoration:none;border-radius:8px}
#jobDetail .job-doc-rm:hover{color:var(--ink);background:#F1F0ED}
/* Outstanding checklist */
#jobDetail .out-row{min-height:44px;padding:6px 0;border-bottom:1px solid var(--rule);gap:12px}
#jobDetail .out-row:last-child{border-bottom:none}
#jobDetail .out-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--charcoal)}
#jobDetail .out-row span{font-size:14.5px;color:var(--ink);line-height:1.4}
#jobDetail .out-row span.out-done{color:var(--ink-60)}
#jobDetail .out-rm{font-family:var(--font-body);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-60);border-radius:8px;padding:0;margin-right:-8px}
#jobDetail .out-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#jobDetail .job-add-row{gap:8px;margin-top:10px;align-items:stretch}
#jobDetail .job-add-row .job-add-input{flex:1 1 160px}
#jobDetail .job-add-row .btn-small.btn-primary{min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
/* Row grids (measurements / take-offs / costs) — compact on a phone */
#jobDetail .rows-head{font-family:var(--font-body);font-size:12px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60);padding:0;margin-bottom:6px}
#jobDetail .row{gap:8px;margin-bottom:8px}
#jobDetail .row-rm{font-family:var(--font-body);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-60);border-radius:8px;padding:0}
#jobDetail .row-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#jobDetail .rows-actions{gap:8px;margin-top:8px}
#jobDetail .rows-actions .btn-ghost{
  min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#jobDetail .rows-actions .btn-ghost:hover{border-color:var(--ink-60)}
#jobDetail .rows-actions .link-btn{min-height:44px;display:inline-flex;align-items:center;padding:0 6px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--amber-deep)}
#jobDetail .unit-chips{gap:6px;margin:-2px 0 12px}
#jobDetail .unit-chips .unit-chip{min-height:44px;min-width:44px;padding:0 14px;font-size:12.5px;font-weight:500;border-radius:999px}
#jobDetail .unit-chips .unit-chip:hover{border-color:var(--ink-60);background:var(--paper)}
#jobDetail .measure-to-takeoff{
  grid-column:1 / -1;min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
@media(max-width:600px){
  #jobDetail .rows-head-measurements,#jobDetail .rows-head-takeoffs,#jobDetail .rows-head-expenses{display:none}
  #jobDetail .row-measurements{grid-template-columns:repeat(4,minmax(0,1fr));background:none;padding:0;border-radius:0}
  #jobDetail .row-measurements input[data-f="label"]{grid-column:1 / -1}
  #jobDetail .row-measurements input[data-f="notes"]{grid-column:1 / 4}
  #jobDetail .row-measurements .row-rm{grid-column:4}
  #jobDetail .row-takeoffs{grid-template-columns:1.6fr .8fr .8fr 44px;background:none;padding:0;border-radius:0}
  /* Cost row: date | amount / supplier / status | remove — rows placed explicitly so DOM order can't scatter them. */
  #jobDetail .row-expenses{grid-template-columns:1fr 1fr 44px;grid-template-rows:auto auto auto;background:none;padding:0;border-radius:0}
  #jobDetail .row-expenses input[data-f="date"]{grid-column:1;grid-row:1}
  #jobDetail .row-expenses input[data-f="amount"]{grid-column:2 / 4;grid-row:1}
  #jobDetail .row-expenses input[data-f="supplier"]{grid-column:1 / -1;grid-row:2}
  #jobDetail .row-expenses select[data-f="status"]{grid-column:1 / 3;grid-row:3}
  #jobDetail .row-expenses .row-rm{grid-column:3;grid-row:3}
}
#jobDetail .row-expenses + .row-expenses,#jobDetail .row-takeoffs + .unit-chips + .row-takeoffs{padding-top:8px;border-top:1px solid var(--rule)}
/* Job costs */
#jobDetail #jobCostsSection .field-lab{display:block;margin:16px 0 8px;font-size:14px;font-weight:600;color:var(--ink)}
#jobDetail #jobCostsSection .numbers-cards{margin-top:12px}
#jobDetail #jobCostsSection .numbers-card-value{font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums;overflow-wrap:normal}
#jobDetail #jobCostsSection .chip-row{gap:8px;margin-top:8px}
#jobDetail #jobCostsSection .chip{min-height:40px;padding:0 12px;border-radius:999px;font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink);background:var(--paper);border:1px solid var(--rule)}
#jobDetail #jobCostsSection .chip:hover{border-color:var(--ink-60)}
/* Take-offs → quote */
#jobDetail #jobTakeoffQuote{min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
/* Photos strip */
#jobDetail .job-photos-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 10px}
@media(min-width:600px){ #jobDetail .job-photos-grid{grid-template-columns:repeat(4,minmax(0,1fr))} }
/* Footer: delete on the left as a quiet red text button, Save job on its own rule */
#jobDetail .job-detail-actions{margin:4px 0 0;justify-content:flex-start}
#jobDetail .btn-danger{min-height:44px;padding:0 10px;border:none;border-radius:10px;background:none;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--st-overdue)}
#jobDetail .btn-danger:hover{background:rgba(179,38,30,.06);color:var(--st-overdue)}
#jobDetail .biz-save-bar{position:static;z-index:auto;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-top:8px;padding:16px 0 0;background:none;border-top:1px solid var(--rule)}
#jobDetail #jobSave{font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;min-height:44px;padding:0 18px;border-radius:10px;background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
#jobDetail .biz-save-note{font-family:var(--font-body);font-size:13px;letter-spacing:0;text-transform:none;color:var(--ink-60)}
/* Linked docket opened from the job */
#jobDocDetail.jobs-wrap{padding:14px 16px 32px}
#jobDocDetail > .link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-6px 0 6px;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink-60)}

/* ---------- Alerts ----------
   Off-white page; Today / This week / Earlier group headings from the
   shared .doc-month; each alert a white card — title (red, per the
   10.09.26 action-needed ruling), quiet timestamp, the body in ink. Unread
   = a red left edge (the old inline dot before the title is retired — one
   marker beside the red title, not two). A briefing row is tappable and
   gets a chevron; the footer's "See this morning" link is a 44px target.
   CSS only — the render, the grouping and the mark-as-read are untouched. */
#view-alerts{background:#F7F6F3}
#view-alerts .jobs-wrap{padding:14px 16px 32px}
#view-alerts #alertsRows .doc-month:first-child{margin-top:0}
#view-alerts #alertsRows .doc-row{
  display:block;margin:0 0 8px;padding:12px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 1px 2px rgba(30,30,30,.05);cursor:default;
}
#view-alerts #alertsRows .doc-row[role="button"]{cursor:pointer;position:relative;padding-right:40px}
#view-alerts #alertsRows .doc-row[role="button"]::after{
  content:'';position:absolute;right:12px;top:14px;width:20px;height:20px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-size:20px 20px;
}
#view-alerts #alertsRows .doc-row[role="button"]:hover{border-color:var(--ink-60)}
#view-alerts #alertsRows .doc-row[role="button"]:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-alerts #alertsRows .doc-row.alert-unread{border-left:3px solid var(--st-needs);padding-left:13px}
#view-alerts .alert-unread .doc-row-title::before{display:none}
#view-alerts .doc-row-title{font-size:15px;font-weight:600;line-height:1.35;white-space:normal;overflow-wrap:break-word}
#view-alerts .doc-row-meta{font-size:12.5px;color:var(--ink-60);margin-top:2px}
#view-alerts .alert-body{font-size:14px;line-height:1.5;color:var(--ink);margin-top:6px;white-space:pre-wrap;overflow-wrap:break-word}
#view-alerts .hint#alertsEmpty{padding:24px 0;text-align:center;margin:0;font-size:13.5px;line-height:1.5}
#view-alerts .gate-err:empty{display:none}
#view-alerts .alerts-foot{margin-top:16px;font-size:13px;line-height:1.5;color:var(--ink-60);display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
#view-alerts .alerts-foot .link-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--amber-deep)}

/* ---------- Client detail ----------
   Off-white page under the client's name; the pays-slowly card first when
   it applies, the compliance line quiet beneath; the three derived totals
   as Numbers cards (third full width); then white section cards —
   contact fields over shared 44px inputs with Ring / Text / Email as
   neutral secondaries, New job as the yellow primary beside Send a quote,
   sites as label / address rows, notes, and the linked documents and jobs
   on fine dividers. CSS only — bindings, derived totals and actions
   untouched. */
#view-client{background:#F7F6F3}
#view-client .jobs-wrap{padding:14px 16px 32px}
#view-client .slowest-card{margin:0 0 12px}
#view-client .client-cards{margin-bottom:12px}
#view-client .client-cards .numbers-card:nth-child(3){grid-column:1 / -1}
#view-client .client-cards .numbers-card-value{font-size:20px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
#view-client .job-section{
  background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:16px;margin:0 0 var(--section-gap);
  box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-client .job-section h3{margin:0 0 10px;padding:0;border:none}
#view-client .job-section > .hint{margin:0 0 10px;font-size:12.5px;line-height:1.45;color:var(--ink-60)}
#view-client .field{gap:5px;margin-bottom:10px}
#view-client .field > span{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#view-client input[type="text"],#view-client input[type="tel"],#view-client input[type="email"],#view-client textarea{
  font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:10px;padding:0 12px;min-height:44px;width:100%;box-sizing:border-box;
}
#view-client textarea{padding:10px 12px;min-height:96px;line-height:1.5;resize:vertical}
#view-client input::placeholder,#view-client textarea::placeholder{color:var(--ink-60)}
#view-client input:focus,#view-client textarea:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
/* Actions */
#view-client .rows-actions{gap:8px;margin-top:4px}
#view-client .client-contact-actions .btn-ghost,#view-client .rows-actions .btn-ghost,#view-client .client-job-actions .btn-small{
  flex:1 1 90px;min-height:44px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:600;text-decoration:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-client .client-contact-actions .btn-ghost[hidden]{display:none}
#view-client .client-contact-actions .btn-ghost:hover,#view-client .rows-actions .btn-ghost:hover,#view-client .client-job-actions .btn-small:hover{border-color:var(--ink-60)}
#view-client .client-job-actions .btn-small.btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
#view-client .client-job-actions{margin-top:0}
/* Sites: label | address | remove — address takes the full width on a phone */
#view-client .row{gap:8px;margin-bottom:8px}
#view-client .row-takeoffs{grid-template-columns:1fr 2fr 44px;background:none;padding:0;border-radius:0}
@media(max-width:600px){
  #view-client .row-takeoffs{grid-template-columns:1fr 44px;grid-template-rows:auto auto}
  #view-client .row-takeoffs input[data-f="label"]{grid-column:1;grid-row:1}
  #view-client .row-takeoffs .row-rm{grid-column:2;grid-row:1}
  #view-client .row-takeoffs input[data-f="address"]{grid-column:1 / -1;grid-row:2}
}
#view-client .row-rm{font-family:var(--font-body);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-60);border-radius:8px;padding:0}
#view-client .row-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#view-client .row + .row{padding-top:8px;border-top:1px solid var(--rule)}
/* Linked documents and jobs */
#view-client #clientDocsRows .doc-row,#view-client #clientJobsRows .doc-row{
  display:flex;align-items:center;gap:10px;padding:10px 0;margin:0;border:none;border-top:1px solid var(--rule);border-radius:0;background:none;box-shadow:none;cursor:pointer;
}
#view-client #clientDocsRows .doc-row:first-child,#view-client #clientJobsRows .doc-row:first-child{border-top:none;padding-top:0}
#view-client .doc-row-title{font-size:14.5px;font-weight:600;color:var(--ink);white-space:normal;overflow-wrap:break-word}
#view-client .doc-row-meta{font-size:12.5px;color:var(--ink-60)}
#view-client .hint#clientDocsEmpty,#view-client .hint#clientJobsEmpty{margin:0;font-size:13px;line-height:1.5;color:var(--ink-60)}

/* ---------- Your notes ----------
   Off-white page; a quiet one-line intro; the add row as a shared 44px
   input beside the yellow Add; the notes as one white grouped panel with
   fine dividers — 22px charcoal checkbox, 15px text, done notes struck
   through in ink-60, a 44px remove control. CSS + the title's case only. */
#view-notes{background:#F7F6F3}
#view-notes .notes-wrap{padding:14px 16px 32px}
#view-notes .notes-wrap > .hint{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-60)}
#view-notes .job-add-row{gap:8px;margin:0 0 12px;align-items:stretch}
#view-notes .job-add-input{
  flex:1 1 160px;min-width:0;font-family:var(--font-body);font-size:15px;color:var(--ink);background:var(--paper);
  border:1px solid var(--rule);border-radius:10px;padding:0 12px;min-height:44px;
}
#view-notes .job-add-input::placeholder{color:var(--ink-60)}
#view-notes .job-add-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-notes .job-add-row .btn-small.btn-primary{min-height:44px;padding:0 18px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
#view-notes #notesRows:not(:empty){background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:4px 16px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-notes .out-row{min-height:52px;padding:8px 0;gap:12px;border-bottom:1px solid var(--rule);cursor:pointer}
#view-notes .out-row:last-child{border-bottom:none}
#view-notes .out-row input[type=checkbox]{width:22px;height:22px;accent-color:var(--charcoal)}
#view-notes .out-row span{font-family:var(--font-body);font-size:15px;line-height:1.4;color:var(--ink);overflow-wrap:break-word}
#view-notes .out-row span.out-done{color:var(--ink-60);text-decoration:line-through}
#view-notes .out-rm{font-family:var(--font-body);min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--ink-60);border-radius:8px;padding:0;margin-right:-8px}
#view-notes .out-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#view-notes .hint#notesEmpty{padding:24px 0;text-align:center;margin:0}

/* ---------- Your conversations ----------
   Off-white page; the list as white cards (title, then when + the first
   reply's opening words); the read-only detail reuses the Thread bubble
   language — your words charcoal on the right, replies as white cards —
   with a 44px "Open: document" link under a turn that made one and a quiet
   red Delete at the foot. CSS + the title's case only. */
#view-conversations{background:#F7F6F3}
#view-conversations .numbers-wrap{padding:14px 16px 32px}
#view-conversations #conversationsList > .hint:first-child{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-60)}
#view-conversations #conversationsRows .doc-row{
  display:block;margin:0 0 8px;padding:12px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 1px 2px rgba(30,30,30,.05);cursor:pointer;
}
#view-conversations #conversationsRows .doc-row:hover{border-color:var(--ink-60)}
#view-conversations #conversationsRows .doc-row:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-conversations .doc-row-title{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;white-space:normal;overflow-wrap:break-word}
#view-conversations .doc-row-meta{font-size:13px;color:var(--ink-60);line-height:1.45;margin-top:3px;white-space:normal;overflow-wrap:break-word}
#view-conversations .hint#conversationsEmpty{padding:24px 0;text-align:center;margin:0;font-size:13.5px;line-height:1.5}
#view-conversations #conversationsErr:empty{display:none}
/* Detail */
#view-conversations #conversationsDetailBack{display:inline-flex;align-items:center;min-height:44px;padding:0 4px;margin:-6px 0 0;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--ink-60)}
#view-conversations #conversationsDetailBack:hover{color:var(--ink)}
#view-conversations .thread{padding:0;gap:10px;min-height:0;max-width:none}
#view-conversations .bubble.user{
  max-width:86%;background:var(--charcoal);color:#fff;border-radius:16px 16px 4px 16px;padding:11px 14px;
  font-family:var(--font-body);font-size:15px;line-height:1.45;overflow-wrap:break-word;
}
#view-conversations .bubble.assistant{
  background:var(--paper);border:1px solid var(--rule);border-radius:16px 16px 16px 4px;padding:12px 14px;
  font-family:var(--font-body);font-size:15px;line-height:1.5;color:var(--ink);box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-conversations .thread > .link-btn{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;color:var(--ink);background:var(--paper);border:1px solid var(--rule)}
#view-conversations .thread > .link-btn:hover{border-color:var(--ink-60);color:var(--ink)}
#view-conversations #conversationsDeleteBtn{min-height:44px;padding:0 10px;border:none;border-radius:10px;background:none;font-family:var(--font-body);font-size:14px;font-weight:500;color:var(--st-overdue)}
#view-conversations #conversationsDeleteBtn:hover{background:rgba(179,38,30,.06)}

/* ---------- AI receptionist (missed-call rescue) ----------
   Off-white page; the log-a-call form as a white card (number beside the
   yellow Draft text-back, note beneath, both shared 44px inputs); the
   active rescue on the Thread bubble language — their words as white
   cards on the left, yours charcoal on the right — with an urgent note as
   a red-edged card, the draft in a white card with Text them / Approve &
   send as yellow primaries and Share / Copy as neutral secondaries, the
   reply box on the shared textarea; the missed-calls list as white cards,
   done ones faded. The violet category colour is retired here (one
   accent). CSS + the title's case only — every handler untouched. */
#view-receptionist{background:#F7F6F3}
#view-receptionist .numbers-wrap{padding:14px 16px 32px}
#view-receptionist .numbers-wrap > .hint:first-child{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-60)}
#view-receptionist .rescue-form{margin:0 0 var(--section-gap);padding:16px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-receptionist .insights-ask-row{display:flex;gap:8px;align-items:stretch;flex-wrap:wrap}
#view-receptionist .insights-ask-row input{flex:1 1 150px;min-width:0;min-height:44px;font-family:var(--font-body)}
#view-receptionist .insights-ask-row .btn-primary{flex:1 1 150px;background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
#view-receptionist .rescue-form #rescueNote{
  margin-top:8px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:0 12px;min-height:44px;
}
#view-receptionist .rescue-form #rescueNote::placeholder,#view-receptionist .insights-ask-row input::placeholder{color:var(--ink-60)}
#view-receptionist .rescue-form #rescueNote:focus{border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-receptionist #rescueMatchNote{margin:8px 0 0;font-size:13px;color:var(--ink-60)}
/* Active rescue */
#view-receptionist .rescue-thread{margin:0 0 12px;gap:8px}
#view-receptionist .rescue-thread-head{font-family:var(--font-body);font-size:13px;font-weight:500;color:var(--ink-60);margin-bottom:2px}
#view-receptionist .rescue-msg{
  max-width:86%;font-family:var(--font-body);font-size:15px;line-height:1.45;padding:11px 14px;overflow-wrap:break-word;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);border-radius:16px 16px 16px 4px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-receptionist .rescue-msg-owner{align-self:flex-end;background:var(--charcoal);color:#fff;border-color:var(--charcoal);border-radius:16px 16px 4px 16px}
#view-receptionist .rescue-urgent{margin:0 0 12px;padding:12px 14px;background:var(--paper);border:1px solid var(--rule);border-left:3px solid var(--st-overdue);border-radius:12px;font-family:var(--font-body);font-size:14.5px;font-weight:600;color:var(--st-overdue)}
#view-receptionist .rescue-draft-box{margin:0 0 var(--section-gap);padding:16px;background:var(--paper);border:1px solid var(--rule);border-radius:14px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-receptionist .rescue-draft-label{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60);margin-bottom:6px}
#view-receptionist .rescue-draft-text{font-size:15px;line-height:1.5;color:var(--ink)}
#view-receptionist .rescue-actions{gap:8px;margin-top:12px}
#view-receptionist .rescue-actions .btn-primary,#view-receptionist .rescue-actions .btn-ghost{
  flex:1 1 130px;min-height:44px;padding:0 14px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;
}
#view-receptionist .rescue-actions .btn-primary{background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
#view-receptionist .rescue-actions .btn-ghost{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
#view-receptionist .rescue-actions .btn-ghost:hover{border-color:var(--ink-60)}
#view-receptionist .rescue-actions [hidden]{display:none}
#view-receptionist .rescue-reply{margin:0 0 12px}
#view-receptionist .rescue-reply textarea{
  font-family:var(--font-body);font-size:14.5px;line-height:1.5;color:var(--ink);background:var(--paper);border:1px solid var(--rule);
  border-radius:12px;padding:10px 12px;min-height:72px;resize:vertical;
}
#view-receptionist .rescue-reply textarea::placeholder{color:var(--ink-60)}
#view-receptionist .rescue-reply textarea:focus{border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-receptionist #rescueAutoHint{margin:0 0 12px;font-size:13px;line-height:1.5;color:var(--ink-60)}
/* Missed-calls list */
#view-receptionist .rescue-list-wrap{margin-top:8px}
#view-receptionist #rescueListHeading{font-family:var(--font-body);font-weight:600;font-size:16px;letter-spacing:0;text-transform:none;color:var(--ink);margin:0 0 10px}
#view-receptionist .rescue-card{
  min-height:52px;display:flex;align-items:center;margin:0 0 8px;padding:12px 14px;font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(30,30,30,.05);
}
#view-receptionist .rescue-card:hover{border-color:var(--ink-60)}
#view-receptionist .rescue-card:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-receptionist .rescue-card-done{opacity:.6}

/* ---------- Search ----------
   Off-white page; the shared magnifier search field; results grouped
   under "Documents · N / Jobs · N / Clients · N" headings, each result a
   white card (title, quiet meta); the scope note quiet beneath. CSS + the
   input's type/class only — searchAcross and the result actions untouched. */
#view-search{background:#F7F6F3}
#view-search .jobs-wrap{padding:14px 16px 32px}
#view-search .documents-search{margin-bottom:12px}
#view-search #searchResults .doc-month:first-child{margin-top:0}
#view-search #searchResults .doc-row{
  display:block;margin:0 0 8px;padding:12px 14px;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  box-shadow:0 1px 2px rgba(30,30,30,.05);cursor:pointer;
}
#view-search #searchResults .doc-row:hover{border-color:var(--ink-60)}
#view-search #searchResults .doc-row:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-search .doc-row-title{font-size:15px;font-weight:600;color:var(--ink);line-height:1.35;white-space:normal;overflow-wrap:break-word}
#view-search .doc-row-meta{font-size:13px;color:var(--ink-60);line-height:1.45;margin-top:2px;white-space:normal;overflow-wrap:break-word}
#view-search .doc-row-meta:empty{display:none}
#view-search .hint#searchEmpty{padding:20px 0;text-align:center;margin:0;font-size:13.5px}
#view-search .hint#searchHint{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}

/* ---------- Work order (on-site) — design-system pass ----------
   The money-free on-site view. Off-white page under its band; The work /
   Parts / Getting in / Notes as white 14px cards with sentence-case
   labels (the mono uppercase title retired here — the shared .wo-card
   rules above still serve sign-off and the done pack until their turn);
   tick rows 48px with a charcoal-outlined box that fills yellow when
   ticked (the one action on site); the fixed footer white with four 44px
   neutral buttons. CSS only. */
#view-workorder{background:#F7F6F3}
#view-workorder .workorder-wrap{padding:14px 16px calc(230px + env(safe-area-inset-bottom,0px))}
#view-workorder .wo-card{border-radius:14px;padding:16px;margin-bottom:var(--section-gap);box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-workorder .wo-card-head{margin-bottom:6px}
#view-workorder .wo-card-title{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#view-workorder .wo-count{font-family:var(--font-body);font-size:12.5px;font-weight:600;color:var(--st-needs)}
#view-workorder .wo-row{min-height:48px;padding:11px 0;gap:12px;font-size:15.5px;line-height:1.4;color:var(--ink)}
#view-workorder .wo-row input[type=checkbox]{width:26px;height:26px;border:2px solid var(--ink-60);border-radius:7px}
#view-workorder .wo-row input[type=checkbox]:checked{background:var(--amber);border-color:var(--amber)}
#view-workorder .wo-row.wo-done span{color:var(--ink-60)}
#view-workorder .wo-parts,#view-workorder .wo-access{font-family:var(--font-body);font-size:15px;line-height:1.55;color:var(--ink)}
#view-workorder .hint#woWorkEmpty{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-60)}
#view-workorder .wo-actions{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;box-shadow:0 -1px 2px rgba(30,30,30,.04)}
#view-workorder .wo-actions .wo-action{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-workorder .wo-actions .wo-action:hover{border-color:var(--ink-60);color:var(--ink)}
#view-workorder .wo-actions [hidden]{display:none}

/* ---------- On-site sign-off — design-system pass ----------
   Off-white page under its band; the work-order words and the pad as
   white 14px cards with a sentence-case "Sign here" label; the pad keeps
   its paper-and-rule shape (sign above the line, name and date beneath);
   the fixed footer white with Save yellow and Clear neutral, both 44px.
   CSS only — the canvas, save and clear untouched. */
#view-signoff{background:#F7F6F3}
#view-signoff .signoff-wrap{padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px))}
#view-signoff .so-card{border-radius:14px;padding:16px;margin-bottom:var(--section-gap);box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-signoff .wo-card-head{margin-bottom:8px}
#view-signoff .wo-card-title{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#view-signoff .so-work{font-family:var(--font-body);font-size:15px;line-height:1.6;color:var(--ink)}
#view-signoff #soPad{border-radius:10px 10px 0 0;border-color:var(--rule)}
#view-signoff .so-who{border-color:var(--rule);border-top:1px solid var(--ink);border-radius:0 0 10px 10px;padding:6px 12px;min-height:44px;align-items:center}
#view-signoff .so-name{font-family:var(--font-body);font-size:15px;min-height:32px}
#view-signoff .so-name::placeholder{color:var(--ink-60)}
#view-signoff .so-date{font-family:var(--font-body);font-size:13px;color:var(--ink-60)}
#view-signoff .so-card .hint{margin:10px 0 0;font-size:13px;line-height:1.5;color:var(--ink-60)}
#view-signoff .so-actions{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;box-shadow:0 -1px 2px rgba(30,30,30,.04)}
#view-signoff .so-save,#view-signoff .so-clear{
  min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
}
#view-signoff .so-save{background:var(--amber);color:var(--ink);border:1px solid var(--amber)}
#view-signoff .so-save:disabled{opacity:.45}
#view-signoff .so-clear{background:var(--paper);color:var(--ink);border:1px solid var(--rule)}
#view-signoff .so-clear:hover{border-color:var(--ink-60)}

/* ---------- The gate (sign-in) — design-system pass ----------
   Deliberately the one full-black screen. The pass calms it onto the
   system rather than lightening it: a flat charcoal card with one
   hairline (the amber glow, drop shadows and the lit underline retired),
   the mark and wordmark as the brand moment, sentence-case Poppins for
   the eyebrow, title and lede, the email field as the same dark bordered
   44px field the TALK dock uses (left-aligned, no letter-spacing), Continue
   as the yellow 44px primary, the pilot-code link a 44px quiet target.
   (app-premium.css, which used to paint this screen, was unlinked 15.09.26 —
   the lockup/mark/rule declarations it carried live here now.) The sign-in
   flow, ids and copy are untouched. */
#view-gate.active{padding:24px 20px;background:var(--charcoal)}
#view-gate .gate-card.premium-gate{
  max-width:400px;background:var(--charcoal-2);border:1px solid rgba(255,255,255,.12);border-radius:16px;
  padding:32px 24px 28px;box-shadow:none;text-align:center;
}
#view-gate .gate-card .otv-eyebrow{display:block;margin:0 0 16px;font-family:var(--font-body);font-size:13px;font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.62)}
#view-gate .otv-logo-lockup{margin:0 auto 6px;position:relative}
/* The primary lockup (wordmark + roofline van), light lettering on the dark gate — the brand SVG itself, not a rebuilt text wordmark (15.09.26). */
#view-gate .otv-lockup{display:block;width:min(260px,80%);height:auto;margin:0 auto;filter:none}
#view-gate .otv-logo-lockup::after{content:"";display:block;width:48px;height:1px;margin:14px auto 0;background:rgba(255,255,255,.18);box-shadow:none}
#view-gate .gate-card h1{font-family:var(--font-body);font-size:22px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.25;color:#fff;margin:18px 0 6px}
#view-gate .gate-lede{font-family:var(--font-body);font-size:14px;line-height:1.5;color:rgba(255,255,255,.72);margin:0 0 18px}
#view-gate .gate-lede[hidden]{display:none}
#view-gate .gate-input{
  min-height:44px;padding:0 12px;text-align:left;letter-spacing:0;font-family:var(--font-body);font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);border-radius:12px;margin-bottom:10px;
}
#view-gate .gate-input::placeholder{color:rgba(255,255,255,.62)}
#view-gate .gate-input:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
#view-gate .gate-submit{
  margin-top:4px;min-height:44px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--amber);color:var(--ink);border:1px solid var(--amber);
}
#view-gate .gate-submit:hover{filter:none;background:#C2E600}
#view-gate .gate-submit:disabled{opacity:.6}
#view-gate .gate-err{font-family:var(--font-body);font-size:13px;line-height:1.45;color:#FF9A8F;margin-top:10px;min-height:0}
#view-gate .gate-err:empty{display:none}
#view-gate #authToggle{margin-top:10px !important;min-height:44px;font-family:var(--font-body);font-size:14px;font-weight:500;color:rgba(255,255,255,.72)}
#view-gate #authToggle:hover{color:#fff}

/* ---------- Chase tone ----------
   Every "Chase it" lands here first. Off-white page under the overdue band
   (the band already carries the red); the pace and what-has-worked notes
   as plain white cards with sentence-case labels (no second red edge —
   they are context, not a status); this invoice's chase history on fine
   dividers in a white card; Friendly / Firm / Formal as three equal 44px
   neutral choices, a tier already used marked "· used" on a pale tint;
   the explainer quiet beneath. CSS only — the tier mapping, history and
   send are untouched. */
#view-chase{background:#F7F6F3}
#view-chase .afp-wrap{padding:14px 16px 32px}
#view-chase .slowest-card{margin:0 0 12px;padding:14px 16px;background:var(--paper);border:1px solid var(--rule);border-left:1px solid var(--rule);border-radius:12px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-chase .slowest-card .otv-eyebrow{margin:0 0 4px;font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#view-chase .slowest-card .slowest-sub{margin:0;font-size:15px;line-height:1.5;color:var(--ink)}
#view-chase .job-section{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:16px;margin:0 0 var(--section-gap);box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-chase .job-section h3{margin:0 0 10px;padding:0;border:none}
#view-chase .spend-cat-list{margin:0}
#view-chase .spend-cat-row{padding:9px 0;font-family:var(--font-body);font-size:14.5px;color:var(--ink);border-bottom:1px solid var(--rule)}
#view-chase .spend-cat-row span:last-child{font-weight:500;color:var(--ink-60)}
#view-chase .chase-tone-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
#view-chase .chase-tone-actions .btn-ghost{
  flex:1 1 100px;min-height:44px;padding:0 12px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-chase .chase-tone-actions .btn-ghost:hover{border-color:var(--ink-60)}
#view-chase .chase-tone-actions .btn-ghost:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-chase .chase-tone-actions .chase-tone-used{background:#F1F0ED}
#view-chase .chase-tone-used::after{color:var(--ink-60);margin-left:4px}
#view-chase .spend-cat-row:last-child{border-bottom:none}
#view-chase .job-section > .hint{margin:12px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}

/* ---------- Documents (category views) ----------
   One screen, titled by the category it shows (Invoices, Certificates, All
   documents...). Off-white page; a labelled category select above one
   search field; month group headings; white document cards — title up to
   two lines, amount emphasised, client · job · date beneath, then a compact
   status word and a 44px delete control. The coloured left edge is the one
   marker kept beside the status word (the dot that doubled it is gone). */
#view-documents{background:#F7F6F3}
#view-documents .documents-wrap{max-width:640px;margin:0 auto;padding:14px 16px 32px}
#view-documents .documents-search{margin-bottom:4px}
#view-documents .doc-month{margin-top:16px}
#view-documents .doc-row{
  display:block;background:var(--paper);border:1px solid var(--rule);border-radius:12px;
  padding:12px 12px 8px 14px;margin-bottom:8px;box-shadow:0 1px 2px rgba(30,30,30,.05);cursor:pointer;
}
#view-documents .doc-row:hover{background:var(--paper);border-color:var(--ink-60)}
#view-documents .doc-row:focus-visible{outline:2px solid var(--amber);outline-offset:1px}
#view-documents .doc-row.tone-overdue,#view-documents .doc-row.tone-needs,
#view-documents .doc-row.tone-with,#view-documents .doc-row.tone-paid{border-left-width:3px;padding-left:13px;border-radius:12px}
/* The card border shorthand above outranks the shared tone-edge rule, so the four edge colours are restated here. */
#view-documents .doc-row.tone-overdue{border-left-color:var(--st-overdue)}
#view-documents .doc-row.tone-needs{border-left-color:var(--st-needs)}
#view-documents .doc-row.tone-with{border-left-color:var(--st-with)}
#view-documents .doc-row.tone-paid{border-left-color:var(--st-paid)}
#view-documents .doc-row-main{min-width:0}
#view-documents .doc-row-top{display:flex;align-items:flex-start;gap:10px}
#view-documents .doc-row-title{
  flex:1 1 auto;min-width:0;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;
  white-space:normal;overflow:hidden;text-overflow:ellipsis;overflow-wrap:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
#view-documents .doc-row-amount{flex:none;font-size:16px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.3}
#view-documents .doc-row-meta{font-size:13px;color:var(--ink-60);margin-top:3px;line-height:1.4;white-space:normal;overflow-wrap:break-word}
#view-documents .doc-row-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:2px;min-height:40px}
#view-documents .doc-row-status{
  display:inline-block;font-size:12px;font-weight:600;line-height:1.35;padding:3px 8px;border-radius:6px;
  color:var(--ink-60);background:var(--steel-08);border:1px solid var(--rule);white-space:normal;text-align:left;
}
#view-documents .tone-overdue .doc-row-status{color:var(--st-overdue);background:rgba(179,38,30,.08);border-color:rgba(179,38,30,.25)}
#view-documents .tone-needs .doc-row-status{color:var(--st-needs);background:rgba(194,59,46,.08);border-color:rgba(194,59,46,.25)}
#view-documents .tone-with .doc-row-status{color:var(--st-with);background:rgba(31,95,191,.08);border-color:rgba(31,95,191,.25)}
#view-documents .tone-paid .doc-row-status{color:var(--st-paid);background:rgba(24,106,59,.08);border-color:rgba(24,106,59,.25)}
/* Delete — an icon button at the card foot, 44px, quiet until hovered. */
#view-documents .doc-row-rm{
  flex:none;width:44px;height:44px;margin:-2px -8px -6px 0;padding:0;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:10px;background:none;color:var(--ink-60);cursor:pointer;
}
#view-documents .doc-row-rm svg{width:20px;height:20px}
#view-documents .doc-row-rm:hover{color:var(--st-overdue);background:rgba(179,38,30,.06)}
#view-documents .doc-row-rm:focus-visible{outline:2px solid var(--amber);outline-offset:-2px}
#view-documents .hint#documentsEmpty{padding:24px 0;text-align:center}
#view-documents #documentsDetailBack{margin-bottom:10px}

.global-tabbar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:var(--charcoal-3); border-top:1px solid rgba(255,255,255,.1);
  padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));
  grid-template-columns:repeat(4,1fr); gap:2px;
}
body.has-tabbar .global-tabbar{display:grid}
.tabbar-btn{
  display:flex; flex-direction:column; align-items:center; gap:4px;
  font-family:var(--font-body); font-size:11px; letter-spacing:0; text-transform:none; font-weight:500;
  color:rgba(255,255,255,.62); background:none; border:none; padding:4px 0;
}
.tabbar-btn svg{width:20px; height:20px; display:block}
.tabbar-btn.active{color:var(--amber)}
/* A top-level screen that isn't Home also needs to clear the fixed tab bar. */
body.has-tabbar .view.paper:not(#view-home){padding-bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px))}
/* Home's own fixed dock sits ABOVE the tab bar, not flush to the true
   bottom — the tab bar is always shown on Home (it's in TABBAR_MAP), so
   this offset is unconditional rather than a second class to track. */
#view-home #composer{bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)) !important}

/* The Jobs "N need a look" flag — now the first child of .home-menu itself
   (25.08.26: the old Paperwork/Jobs/Numbers strip above it, which duplicated
   the bottom tab bar, was removed entirely; Numbers moved into the menu
   grid as its own tile instead of a strip segment). .home-menu is a 3-col
   grid, so this spans the full row rather than sitting in one cell. */
#jobsFlag.row-flag{
  display:block; grid-column:1 / -1; width:100%; text-align:left; white-space:normal;
  padding:12px 14px; min-height:44px; font-family:var(--font-body);
  background:var(--paper); border:1px solid var(--rule); border-radius:12px;
  box-shadow:0 1px 2px rgba(30,30,30,.06);
  font-size:13px; font-weight:700;
  cursor:pointer;
}
/* .flag-needs/.flag-overdue (set by homeSetRowFlag's tone param) still
   supply the colour — not hardcoded here so it stays correct if this ever
   carries an overdue-tone message instead of a needs-tone one. */
#jobsFlag.row-flag:active{transform:scale(.99)}

/* Home-menu row icons: one accent — the yellow-tinted tile in the Home block above; the per-section colours stay on the Paperwork hub only (14.09.26). */

/* ---------- Your Account: no dark patterns ----------
   The price, the renewal date and the way out all sit on the same screen at
   the same weight. Nothing here is amber except a Subscribe the user hasn't
   got yet — cancelling is a quiet outline, deliberately no harder to find
   and no uglier to press than anything else. */
/* ---------- Your Account (14.09.26, shared system) ----------
   Off-white page, the Paperwork grouped panel for settings, the shared plan
   card, and every closing action in the normal page flow — nothing fixed to
   the bottom, nothing hidden. The way out stays in plain sight. */
#view-account{background:#F7F6F3}
#view-account .money-band-figure{font-size:24px;overflow-wrap:anywhere}
#view-account .money-band-sub{color:rgba(255,255,255,.72);overflow-wrap:anywhere}
.view.paper .account-wrap{max-width:640px;margin:0 auto;padding:16px 16px 32px}
#view-account .gate-err{margin:0;min-height:0;font-size:13px;color:var(--ink-60);text-align:left}
#view-account .gate-err:empty{display:none}
#view-account .gate-err:not(:empty){margin-bottom:12px}
/* Plan card */
.view.paper .acct-plan{background:var(--paper);border:1px solid var(--rule);border-radius:12px;padding:14px 16px;margin:0 0 16px}
.view.paper .acct-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.view.paper .acct-plan-price{font-family:var(--font-body);font-weight:600;font-size:24px;letter-spacing:0;color:var(--ink)}
.view.paper .acct-plan-state{
  display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:600;line-height:1.4;white-space:nowrap;
  background:var(--steel-08);color:var(--ink-60);
}
.view.paper .acct-plan-state:empty{display:none}
.view.paper .acct-state-paid{background:rgba(24,106,59,.12);color:var(--st-paid)}
.view.paper .acct-state-needs{background:rgba(194,59,46,.10);color:var(--st-needs)}
.view.paper .acct-state-overdue{background:rgba(179,38,30,.10);color:var(--st-overdue)}
.view.paper .acct-state-with{background:rgba(31,95,191,.10);color:var(--st-with)}
.view.paper .acct-plan-sub{margin:6px 0 0;font-size:13.5px;line-height:1.45;color:var(--ink-60)}
.view.paper .acct-plan-note{margin:2px 0 0;font-size:13.5px;font-weight:500;line-height:1.45;color:var(--ink-60)}
.view.paper .acct-plan-next{margin:12px 0 0;padding-top:12px;border-top:1px solid var(--rule);font-size:14px;line-height:1.5;color:var(--ink)}
.view.paper .acct-plan-btn{margin-top:12px;width:100%}
/* Grouped settings panels — the Paperwork panel. */
.view.paper .acct-group-title{font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-60);margin:16px 2px 6px}
.view.paper .acct-rows{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:0;margin:0;overflow:hidden}
.view.paper .acct-row{
  display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:60px;
  padding:12px 16px;margin:0;border:none;border-radius:0;background:var(--paper);position:relative;
  text-align:left;font-family:var(--font-body);font-size:16px;font-weight:500;line-height:1.3;color:var(--ink);cursor:pointer;
}
.view.paper .acct-row + .acct-row::before{content:'';position:absolute;left:16px;right:0;top:0;height:1px;background:var(--rule)}
.view.paper .acct-row:hover{background:#FBFAF8}
.view.paper .acct-row:active{background:#F1F0ED}
.view.paper .acct-row:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:8px}
.view.paper .acct-row-static{cursor:default;flex-wrap:wrap}
.view.paper .acct-row-static:hover,.view.paper .acct-row-static:active{background:var(--paper)}
.view.paper .acct-row-label{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:2px}
.view.paper .acct-row-value{display:block;font-size:13px;font-weight:400;color:var(--ink-60);line-height:1.4;overflow-wrap:anywhere}
.view.paper .acct-row-chev{
  flex:none;width:20px;height:20px;font-size:0;color:transparent;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6l6 6-6 6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;background-size:20px 20px;
}
.view.paper .acct-row .btn-small{
  flex:none;min-height:40px;padding:0 14px;border-radius:10px;font-family:var(--font-body);font-size:13.5px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);white-space:nowrap;
}
.view.paper .acct-row .btn-small:hover{border-color:var(--ink-60)}
/* Reading voice: label + note, then the select and Hear it on their own row. */
.view.paper .voice-pick-row{gap:8px 10px}
.view.paper .voice-pick-row .acct-row-label{flex:1 1 100%}
.view.paper .voice-pick-select{
  flex:1 1 0;min-width:0;margin:0;min-height:44px;padding:0 36px 0 12px;text-align:left;
  font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0;color:var(--ink);
  background:var(--paper);border:1px solid var(--rule);border-radius:10px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1E1E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px 16px;
}
.view.paper .voice-pick-select:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px rgba(215,255,0,.25)}
.view.paper .voice-pick-row .btn-small{min-height:44px}
.view.paper .voice-pick-note{flex:1 1 100%;margin:0;font-size:13px;line-height:1.45;color:var(--ink-60)}
/* Closing actions — in the page flow, not a fixed bar. */
.view.paper .acct-actions{
  position:static;background:none;border:none;padding:0;margin:24px 0 0;z-index:auto;
  display:flex;flex-direction:column;gap:8px;
}
.view.paper .acct-actions .wo-action,
.view.paper .acct-signout .btn-ghost{
  flex:none;width:100%;min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
.view.paper .acct-actions .wo-action:hover,.view.paper .acct-signout .btn-ghost:hover{border-color:var(--ink-60);color:var(--ink)}
.view.paper .acct-promise{margin:8px 2px 0;font-size:13px;line-height:1.5;color:var(--ink-60)}
.view.paper .acct-signout{margin:16px 0 0;text-align:left}
.view.paper .acct-foot{margin:24px 2px 0;font-size:12.5px;line-height:1.5;color:var(--ink-60);text-align:center}

/* ---------- Your morning (7am briefing) ----------
   Off-white page under the date band; Money / Today / Tomorrow as white
   14px cards with sentence-case labels; the money card keeps the red
   status edge (late looks identical wherever it appears); today's jobs as
   44px rows with the time in its own tabular column; the three actions in
   a white fixed footer — Write the chase yellow, Open the day / That'll do
   neutral — with the page padded clear of it. CSS only; briefingModel and
   the actions untouched. */
#view-briefing{background:#F7F6F3}
#view-briefing .jobs-wrap{padding:14px 16px calc(190px + env(safe-area-inset-bottom,0px))}
#view-briefing .wo-card{border-radius:14px;padding:16px;margin-bottom:var(--section-gap);box-shadow:0 1px 2px rgba(30,30,30,.05)}
#view-briefing .wo-card-head{margin-bottom:8px}
#view-briefing .otv-eyebrow{font-family:var(--font-body);font-size:12.5px;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-60)}
#view-briefing .wo-card.brief-money{border-left:3px solid var(--st-overdue)}
#view-briefing .brief-money .otv-eyebrow{color:var(--st-overdue)}
#view-briefing .brief-lead{font-family:var(--font-body);font-size:17px;font-weight:600;line-height:1.35;color:var(--ink);margin-bottom:4px}
#view-briefing .wo-card .hint{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink-60)}
#view-briefing .wo-row{min-height:44px;padding:10px 0;font-size:15px;cursor:default;gap:12px}
#view-briefing .brief-row{align-items:baseline}
#view-briefing .brief-time{flex:0 0 7.4em;white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
#view-briefing #briefingSent{margin:0;font-size:12.5px;line-height:1.5;color:var(--ink-60)}
#view-briefing .wo-actions{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));gap:8px;box-shadow:0 -1px 2px rgba(30,30,30,.04)}
#view-briefing .wo-actions .btn-primary,#view-briefing .wo-actions .btn-ghost{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;
  background:var(--paper);color:var(--ink);border:1px solid var(--rule);
}
#view-briefing .wo-actions .btn-ghost:hover{border-color:var(--ink-60)}
#view-briefing .wo-actions .btn-primary{background:var(--amber);color:var(--ink);border-color:var(--amber)}
#view-briefing .wo-actions [hidden]{display:none}
.alerts-foot{margin-top:18px}

/* ---------- Help screen — design-system pass (14.09.26, replacing the
   earlier rules in place) ----------
   Off-white page under its band; the two contact rows in one white grouped
   panel (charcoal icon on a pale tile, 44px+ rows, a divider from the label
   edge); the reassurance note quiet on a pale panel; "Asked most often" as
   a sentence-case heading over a white FAQ panel with 44px question rows;
   Email us as the yellow primary in a white fixed footer. */
#view-help{background:#F7F6F3}
.view.paper .help-wrap{max-width:640px;margin:0 auto;padding:14px 16px calc(96px + env(safe-area-inset-bottom,0px))}
.view.paper .help-contacts{padding:0;border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(30,30,30,.05)}
.view.paper .help-contact-row{
  display:flex;align-items:center;gap:14px;min-height:64px;padding:12px 16px;position:relative;
  border:none;border-radius:0;color:var(--ink);text-decoration:none;
}
.view.paper .help-contact-row + .help-contact-row{margin-top:0}
.view.paper .help-contact-row + .help-contact-row::before{content:'';position:absolute;left:68px;right:0;top:0;height:1px;background:var(--rule)}
.view.paper .help-contact-row:hover{background:#FBFAF8}
.view.paper .help-contact-row:focus-visible{outline:2px solid var(--amber);outline-offset:-3px;border-radius:8px}
.view.paper .help-contact-icon{
  flex:none;width:38px;height:38px;border-radius:10px;background:#F1F0ED;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:17px;
}
.view.paper .help-contact-body{flex:1;min-width:0}
.view.paper .help-contact-title{display:block;font-family:var(--font-body);font-size:15.5px;font-weight:600;line-height:1.3;color:var(--ink)}
.view.paper .help-contact-sub{display:block;font-size:13px;color:var(--ink-60);margin-top:2px;overflow-wrap:break-word}
.view.paper .help-contact-time{flex:none;font-size:12px;font-weight:500;color:var(--ink-60);text-align:right;line-height:1.35}
.view.paper .help-note{
  display:flex;align-items:flex-start;gap:9px;font-size:13px;line-height:1.5;color:var(--ink-60);
  background:#F1F0ED;border:1px solid var(--rule);border-radius:12px;padding:12px 14px;margin:12px 0 18px;
}
.view.paper .help-note::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--st-paid);flex:none;margin-top:6px}
.view.paper .help-faq-title{display:block;margin:0 0 8px 4px;font-family:var(--font-body);font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--ink-60)}
.view.paper .help-faq{background:var(--paper);border:1px solid var(--rule);border-radius:14px;padding:4px 16px;box-shadow:0 1px 2px rgba(30,30,30,.05)}
.view.paper .help-faq-row{
  display:block;width:100%;text-align:left;background:none;border:none;border-top:1px solid var(--rule);
  min-height:52px;padding:12px 0;cursor:pointer;font-family:var(--font-body);
}
.view.paper .help-faq-row:first-child{border-top:none}
.view.paper .help-faq-row:focus-visible{outline:2px solid var(--amber);outline-offset:-2px;border-radius:8px}
.view.paper .help-faq-q{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:15px;font-weight:600;line-height:1.35;color:var(--ink)}
.view.paper .help-faq-chev{flex:none;color:var(--ink-60);font-size:20px;transition:transform .15s}
.view.paper .help-faq-row.open .help-faq-chev{transform:rotate(90deg)}
.view.paper .help-faq-a{font-size:13.5px;line-height:1.5;color:var(--ink);margin-top:6px;max-width:94%}
#view-help .wo-actions{padding:10px 16px calc(10px + env(safe-area-inset-bottom,0px));box-shadow:0 -1px 2px rgba(30,30,30,.04)}
#view-help .wo-actions .wo-action{
  width:100%;min-height:44px;padding:0 16px;border-radius:10px;display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-body);font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;text-decoration:none;
  background:var(--amber);color:var(--ink);border:1px solid var(--amber);
}

/* Idea: clash days get a red ring, not just the red badge — the mockup
   wants the whole cell to read as a warning, not just its count. Overrides
   app-premium.css's has-jobs glow (same specificity, loads earlier). */

/* Numbers screen — the mockup's "Invoiced against collected" spark chart
   (Turn 7). Reuses monthlyBreakdown()'s own data (nothing new computed),
   just gives it a shape: a blue bar for invoiced, an amber bar for
   collected, per month, tallest bar in the window scaled to 30px so a
   quiet window never reads as a zero window. */
/* Idea 9 (scoped): a tone already tried on this invoice gets a quiet
   "· used" suffix on its own button, so the ladder is visible without a
   separate legend. Never disabled — chasing the same tone twice is a
   real, valid choice. */
.chase-tone-used::after{content:" · used";font-weight:400;color:var(--steel-40);font-size:.85em}

/* Idea 12 (scoped): the offline note sits where the greeting sub-line does,
   amber not red — this is a normal state, not an error. */
#view-home .home-offline-note{margin:0; padding:0 18px 6px; font-size:12.5px; color:var(--amber-soft); line-height:1.5}

/* Numbers screen: the mockup's 4 stat cards sit in a 2-column grid, not a
   vertical stack — much more of the screen readable without scrolling. */


/* The customer's own rescue number and the divert code they dial. Both are
   things read off a screen and typed into a phone keypad, so they are set
   large, spaced and tabular rather than sized like body copy. */
.rescue-num{font-size:1.5rem;font-weight:600;letter-spacing:.02em;font-variant-numeric:tabular-nums;margin:2px 0 14px}
.rescue-code{font-size:1.25rem;font-weight:600;font-variant-numeric:tabular-nums;background:var(--paper-2);border-radius:10px;padding:12px 14px;margin:6px 0 10px;word-break:break-all}