/* The week card's own rules are in lanes.css (shared with /ops/quote/, 2026-10-12), linked by each page. */
/*
 * BroomShine team pages (/team/ and the sign-in pages).
 * Dark slate ground with the public site's gold accent and type: Calistoga over Poppins.
 * Self-hosted fonts (CSP font-src 'self'); no network beyond this origin.
 */
@font-face {
  font-family: 'Calistoga';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/calistoga-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/poppins-400-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/poppins-500-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/poppins-600-latin.woff2') format('woff2');
}

:root {
  color-scheme: dark;
  /* Dark slate ground (owner, 2026-10-02: "darker background like [Fast Marine's] but maybe
     50% lighter"). Token names keep their old jobs: --cream is the page, --paper a card,
     --ink the text. --bar is the header, --on-gold is text on a light or gold fill. */
  --gold: #BF9B30;
  --gold-deep: #D8B55A;
  --gold-wash: rgba(191, 155, 48, 0.16);
  /* Gold edge on every outlined button (owner, 2026-10-03: "more gold to the accents. Like around the
     buttons to make them stand out a little more"). */
  --gold-edge: rgba(216, 181, 90, 0.7);
  --green: #3FB96B;
  --danger: #F06A6A;
  --blue: #5B9BF0;
  --ink: #ECEEF1;
  --ink-2: #D5D9DF;
  --muted: #A0A8B4;
  --cream: #1E232A;
  --warm: #313843;
  --bone: #3A424E;
  --closed: #23282F;
  --paper: #272D36;
  --hover: #2C333D;
  --bar: #15191E;
  --on-gold: #15191E;
  --you: #FF9F9F;
  --you-wash: rgba(240, 106, 106, 0.15);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.18);
  --display: 'Calistoga', Georgia, serif;
  --sans: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --radius: 14px;
  --gutter: 48px;
}

/* A class rule with `display` beats the UA's [hidden] rule; this keeps `el.hidden` honest. */
[hidden] { display: none !important; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.45;
}
a { color: var(--gold-deep); }
a:hover { color: #EBCB78; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { margin: 0; }
.muted { color: var(--muted); }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Header + navigation ---------- */
.team-header {
  background: var(--bar);
  color: var(--ink);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 0 var(--gutter);
  min-height: 64px;
}
.team-brand { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 0 1 auto; color: var(--ink); text-decoration: none; }
.team-brand img { width: 36px; height: 36px; border-radius: 50%; }
/* The date and today's line under the brand (the Dashboard, owner's mockup 2026-10-03). */
.team-brand:has(.team-brand-sub:not(:empty)) { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-items: center; line-height: 1.2; }
.team-brand:has(.team-brand-sub:not(:empty)) img { grid-row: 1 / 3; }
.team-brand span { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-brand-sub { grid-column: 2; font-family: var(--sans); font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.team-brand-sub:empty { display: none; }
.team-brand span { font-family: var(--display); font-size: 20px; }
.team-nav { display: flex; gap: 4px; flex-grow: 1; }
.team-nav a {
  color: var(--muted);
  text-decoration: none;
  padding: 20px 14px 17px;
  border-bottom: 3px solid transparent;
  font-size: 15px;
}
.team-nav a:hover { color: var(--ink); }
.team-nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--gold); }
.team-user { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); margin-left: auto; flex-shrink: 0; }
/* A long display name must not push the brand or Sign out onto two lines next to the gear. */
.team-user .who { max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-ghost-dark {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--gold-edge);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 14px;
  min-height: 40px;
}
.btn-ghost-dark:hover { border-color: var(--gold); background: var(--gold-wash); }
/* The gear link to /team/settings/: labelled above 1180px, icon-only (label still read aloud) below. */
.team-settings {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0;
  min-height: 40px; padding: 8px 12px; border: 1px solid var(--gold-edge); border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: 14px;
}
.team-settings:hover { color: var(--ink); border-color: var(--gold); background: var(--gold-wash); }  /* beats global a:hover */
.team-settings[aria-current="page"] { border-color: var(--gold); background: var(--gold-wash); }

.tabbar { display: none; }

/* "Test records are showing." (shell.js): sticky under the header while an owner shows test rows. */
.test-banner { position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px var(--gutter); background: #4A3D14; border-bottom: 2px dashed var(--gold-deep); font-size: 14px; color: #F5E3A8; }
.test-banner strong { font-weight: 600; }
.test-banner button { background: var(--paper); border: 1px solid var(--line-strong); border-radius: 8px; padding: 6px 12px;
  min-height: 36px; font-size: 13px; font-weight: 600; color: var(--ink); }
/* Keep what gets focus or scrolls into view out from under the sticky bar (it wraps to 2 rows below 360px). */
html:has(.test-banner) { scroll-padding-top: 64px; }
@media (max-width: 359px) { html:has(.test-banner) { scroll-padding-top: 92px; } }

.team-main {
  padding: 32px var(--gutter) 56px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  max-width: 1600px;
}
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page-head h1 { font-family: var(--display); font-weight: 400; font-size: 38px; line-height: 1.1; }
.page-head p { margin: 4px 0 0; color: var(--muted); }

.gate-note { padding: 48px var(--gutter); color: var(--muted); }
/* The schedule's one line until it is there (data.js): loading, not connected, owners only, or an error with Try again. */
.schedule-note { margin: 0; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 15px; }
.source-line { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
/* Auto-refresh (refresh.js): "Updated 10:42 AM", or quietly that the last refresh failed. */
.team-main .updated-line { margin: 2px 0 0; font-size: 12px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
/* The Dashboard says only a failed refresh or a session that ended (owner: no "Updated" line). */
.team-main .dash-stale:not([data-stale]) { display: none; }
.team-main .dash-stale { margin: 0; color: var(--you); font-weight: 500; }
/* Dates the page did not load are said in words, never shown as empty (data.js notLoadedLine). */
.range-note { margin: 0 0 12px; font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.list-range .range-note { margin: 12px 0 0; }
.agenda .range-note { margin: 0; }

/* ---------- Building blocks ---------- */
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.card-head h2 { font-size: 18px; font-weight: 600; }
.card-head .muted { font-size: 13px; }
.eyebrow { font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }

.segmented {
  display: inline-flex;
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 4px;
  gap: 4px;
}
.segmented button {
  border: 0;
  border-radius: 7px;
  background: transparent;
  padding: 8px 16px;
  font-size: 14px;
  min-height: 36px;
}
.segmented button[aria-pressed="true"] { background: var(--gold); color: var(--on-gold); font-weight: 600; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid var(--gold-edge);
  background: var(--paper);
  color: var(--ink);
  font-size: 15px;
  text-decoration: none;
}
.btn:hover { border-color: var(--gold); background: var(--gold-wash); }
.btn-primary { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.btn-primary:hover { background: #CDA93D; border-color: #CDA93D; }
.btn-danger-text { background: transparent; border: 0; color: var(--danger); font-weight: 600; min-height: 44px; padding: 0 8px; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }
.icon-btn { width: 44px; height: 44px; padding: 0; font-size: 18px; }

.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); min-width: 0; }
.field input, .field select, .field textarea {
  min-height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  width: 100%;
}
.field textarea { resize: vertical; min-height: 72px; }
.field .hint { font-weight: 400; font-size: 12px; }
.field-error, .outcome-error, .deposit-error, .carpet-error, .done-error, .review-error { color: var(--danger); font-size: 13px; font-weight: 500; }

/* Status pills in Jobber's traffic-light form: a tinted pill with a coloured dot.
   red = needs you now, yellow = waiting on an action, green = on track, grey = finished or off. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 3px 10px 3px 8px;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #8B94A1; flex-shrink: 0; }
.status[data-tone="red"] { background: var(--you-wash); color: var(--you); }
.status[data-tone="red"]::before { background: var(--danger); }
.status[data-tone="yellow"] { background: rgba(229, 177, 46, 0.15); color: #F2C95C; }
.status[data-tone="yellow"]::before { background: #E5B12E; }
.status[data-tone="green"] { background: rgba(63, 185, 107, 0.15); color: #7DDC9C; }
.status[data-tone="green"]::before { background: var(--green); }
/* A test record's marker (Quotes, Applicants): amber and dashed like the test banner. */
.test-pill { font-size: 12px; font-weight: 600; color: #F5E3A8; background: #4A3D14; border: 1px dashed var(--gold-deep); border-radius: 999px; padding: 2px 8px; }
.applicants-table .test-pill { margin-left: 6px; }

.empty { color: var(--muted); font-size: 14px; padding: 8px 0; }

/* ---------- Dashboard ---------- */
.dash-row { display: grid; gap: 16px; }
.dash-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
/* The months, a card of their own beside (on a wide screen) or under the weeks and Today. */
.months-card { align-self: start; }
.months-card .revenue { padding-top: 0; border-top: 0; }

.page-head > div { min-width: 0; }
/* Today's and Tomorrow's cleans under the week, and a tapped day's: time, title, place (the row below). */
.today-list { display: flex; flex-direction: column; }
.today-sub { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-size: 14px; font-weight: 600; color: var(--muted); padding-top: 12px; border-top: 1px solid var(--line); }
.today-sub-date { font-weight: 400; }
/* Today and Tomorrow under the week on the Revenue card (owner, 2026-10-13, of three mockups: "I like b"). */
.today-box { display: flex; flex-direction: column; }
.today-box[hidden] { display: none; }
.today-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.today-head h3 { margin: 0; font-size: 16px; font-weight: 600; }
.today-head h3:focus { outline: none; }
.today-head .muted { font-size: 13px; }
/* A tapped day's head: its date, and Back to today. */
.lane-jobs-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.lane-jobs-top .link-btn { min-height: 44px; }
.today-item {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left; min-height: 44px;
  padding: 10px 4px; border: 0; border-bottom: 1px solid var(--line); background: none; overflow-wrap: anywhere;
}
.today-item:last-child { border-bottom: 0; }
.today-item:hover { background: var(--hover); }
.today-time { font-size: 13px; font-weight: 600; }
.today-what { font-size: 15px; font-weight: 600; display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.today-where { font-size: 13px; color: var(--muted); }
.today-item.done .today-time, .today-item.done .today-what { color: var(--muted); }
/* A clean an owner said didn't happen (docs/features/work-orders.md): struck through, with its "Didn't happen" pill. */
.today-item.missed .today-time, .today-item.missed .today-what { color: var(--muted); }
.today-item.missed .today-what { text-decoration: line-through; }
.card-sub { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
/* Cleaner lanes (2026-09-27): a row per cleaner, a square per day, shaded by hours. The page never
   scrolls sideways. One week shows at a time, the one picked by its button (owner, 2026-10-10: "I like
   the most compact version"). */
.lanes-weeks { display: grid; gap: 14px; min-width: 0; }
.week-last { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
/* The week's cleans with no price (2026-10-08); its estimated revenue is on its button. */
.lane-money { margin: 6px 0 4px; }
/* Last week, This week, Next week (2026-10-10): a button each with its money; the one shown is outlined in gold. */
.week-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; }
.week-tab {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px; min-width: 0; min-height: 44px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: transparent; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.week-tab:hover { background: var(--hover); }
.week-tab[aria-pressed="true"] { border-color: var(--gold-deep); background: var(--gold-wash); }
.week-tab:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.week-tab-name { font-size: 11px; color: var(--muted); }
.week-tab-sum { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.week-tab-what, .week-tab-unpriced { font-size: 11px; color: var(--muted); }
.week-tab .week-tab-unpriced { color: var(--you); }
.lane-jobs .range-note { margin: 4px 0 0; }
/* A week with a day not loaded says so at its top (2026-10-10). */
.lane-week > .range-note { margin: 0; }
.lanes-legend { gap: 6px 16px; font-size: 12px; }
.lanes-legend-note { flex-basis: 100%; }
.lanes-legend span { gap: 6px; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.sw { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

/* Revenue (docs/features/work-orders.md) */
.revenue { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.revenue-row { display: grid; grid-template-columns: minmax(0, 9rem) auto minmax(0, 1fr); align-items: baseline; gap: 4px 12px; }
.revenue-label { font-size: 14px; color: var(--muted); }
.revenue-sum { font-size: 16px; font-weight: 600; }
.revenue-note { font-size: 13px; color: var(--muted); }
.revenue-unpriced { color: var(--you); font-weight: 500; }
.revenue-missed { color: var(--ink); font-weight: 500; }
.revenue-week-note { margin: 0; font-size: 12px; color: var(--muted); }
/* The night-before status and a deposit owed (docs/features/work-orders.md): words first, colour second. */
.confirm-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--hover); color: var(--muted); white-space: nowrap; }
.confirm-pill[data-tone="ok"] { background: rgba(63, 185, 107, 0.16); color: var(--green); }
.confirm-pill[data-tone="wait"] { background: var(--gold-wash); color: var(--gold-deep); }
.confirm-pill[data-tone="bad"] { background: var(--you-wash); color: var(--you); }
.today-pills { display: flex; flex-wrap: wrap; gap: 4px; }
/* The Today card's row (owner, 2026-10-13, of the mockup: "ok, this design looks good"): the start over
   "to" the end on the left, the name with a grey line under it, the status on the right. */
.today-item.today-row { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto; gap: 2px 10px; align-items: start; overflow-wrap: break-word; }
/* "12:30 PM" on one line; another day's ("Tue, Sep 22, 10 PM", "to Wed, Sep 23, 1 AM") wraps between words. */
.today-row .today-time { line-height: 1.35; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.today-row .today-end { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.today-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.today-row .today-what { display: block; line-height: 1.3; }
.today-row .today-what .test-pill { margin-left: 8px; vertical-align: 1px; }
.today-meta { font-size: 13px; color: var(--muted); }
.today-row .today-pills { flex-direction: column; align-items: flex-end; max-width: 8rem; }
.today-row .confirm-pill { white-space: normal; text-align: right; }
.today-row .nowrap { white-space: nowrap; }
/* The smallest phones: the status goes under the name, so the name keeps its width. */
@media (max-width: 359px) {
  .today-item.today-row { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .today-row .today-pills { grid-column: 2; flex-direction: row; align-items: flex-start; max-width: none; }
  .today-row .confirm-pill { text-align: left; }
}
.deposit-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 520px) { .revenue-row { grid-template-columns: minmax(0, 1fr) auto; } .revenue-note { grid-column: 1 / -1; } }
.panel-order { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0.02em; }
.price-now { font-size: 17px; }
.price-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.price-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.price-form .field { flex: 1 1 140px; max-width: 200px; }
/* "Includes carpet cleaning" under the price (2026-10-08): a whole-row label, so the tap target is the line. */
.carpet-check { margin-top: 12px; }
.carpet-check label { display: flex; align-items: center; gap: 8px; min-height: 44px; font-size: 14px; cursor: pointer; }
.carpet-check input { width: 18px; height: 18px; margin: 0; flex: none; }
.carpet-check .panel-text, .carpet-error { margin: 0; font-size: 13px; }
/* Done at on the panel (learning loop v1, 2026-10-08): its own error class, so the price error stays the one .field-error. */
.done-error { margin: 0; }
.done-line { font-size: 15px; }
.row-link { background: none; border: 0; padding: 0; text-align: left; color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line-strong); }

/* ---------- Calendar ---------- */
.cal-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cal-toolbar h1 { font-family: var(--display); font-weight: 400; font-size: 30px; margin-right: 8px; min-width: 0; }
/* The nav buttons flow in the toolbar's row; hidden until the schedule is there. */
.cal-controls { display: contents; }

.week-wrap { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow-x: auto; }
.week { min-width: 760px; }
.week-head, .week-allday, .week-body { display: grid; grid-template-columns: 56px repeat(5, minmax(0, 1fr)) 64px 64px; }
.week-head { border-bottom: 1px solid var(--line); }
.week-head .wd { padding: 8px; display: flex; flex-direction: column; align-items: center; border-left: 1px solid rgba(255,255,255,0.07); }
.week-head .wd .dow { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.week-head .wd .num { font-size: 18px; font-weight: 600; }
.week-head .wd.today { background: var(--warm); }
.week-head .wd.today .num { color: var(--gold-deep); }
/* All-day events: a chip at the top of each day they cover, never a 24-hour block. */
.week-allday { border-bottom: 1px solid var(--line); }
.allday-label { font-size: 11px; color: var(--muted); text-align: right; padding: 6px 8px 0 0; }
.allday-cell { display: flex; flex-direction: column; gap: 3px; padding: 4px; min-width: 0; border-left: 1px solid rgba(255,255,255,0.07); }
.allday-cell.closed { background: var(--closed); }
.allday-cell.unloaded { background: repeating-linear-gradient(135deg, var(--closed) 0 6px, transparent 6px 12px); }
.allday-chip {
  display: block; width: 100%; min-height: 28px; text-align: left; border: 0; border-radius: 6px; padding: 4px 8px;
  font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.allday-chip.booked { background: var(--gold-wash); color: var(--ink); border-left: 4px solid var(--gold); }
.allday-chip.done { background: var(--bone); color: var(--muted); }
.allday-chip.missed { background: var(--closed); color: var(--muted); text-decoration: line-through; }
.allday-chips { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.allday-chips .allday-label { text-align: left; padding: 0; }
.allday-chips .allday-chip { min-height: 40px; font-size: 14px; }
/* A test event, shown only while "Show test records" is on: dashed like the test bar. */
.ev[data-test], .mchip[data-test], .allday-chip[data-test], .job-card[data-test] { outline: 2px dashed var(--gold-deep); outline-offset: -2px; }
.hours-col span { display: block; height: var(--hour); font-size: 11px; color: var(--muted); text-align: right; padding: 2px 8px 0 0; }
.day-col {
  position: relative;
  border-left: 1px solid rgba(255,255,255,0.07);
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--hour) - 1px), rgba(255,255,255,0.06) calc(var(--hour) - 1px), rgba(255,255,255,0.06) var(--hour));
}
.day-col.closed { background-color: var(--closed); }
.day-col.unloaded { background-image: repeating-linear-gradient(135deg, var(--closed) 0 6px, transparent 6px 12px); }
.day-col.today { background-color: var(--hover); }
.day-col .closed-label { position: absolute; top: 10px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--muted); }
/* Under the blocks (z-index 1), so it never strikes through an event's title. */
.now-line { position: absolute; left: 0; right: 0; border-top: 2px solid var(--danger); z-index: 0; pointer-events: none; }
.ev {
  position: absolute;
  border-radius: 8px;
  padding: 5px 8px;
  display: flex; flex-direction: column; gap: 1px;
  overflow: hidden;
  text-align: left;
  border: 0;
  font-size: 12px;
  line-height: 1.3;
  z-index: 1;
}
.ev b { font-size: 13px; overflow-wrap: anywhere; }
.ev .test-pill { align-self: flex-start; font-size: 11px; padding: 0 6px; }
.ev.booked { background: #3B5B8C; color: #F2F5FA; }
.ev.done { background: var(--bone); color: var(--muted); }
.ev.missed { background: var(--closed); color: var(--muted); border: 1px dashed var(--line-strong); text-decoration: line-through; }

.month { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.month-head, .month-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.month-head span { padding: 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; text-align: center; border-bottom: 1px solid var(--line); }
.month-cell { min-height: 116px; border-top: 1px solid var(--line); border-left: 1px solid rgba(255,255,255,0.06); padding: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.month-cell.other { background: var(--closed); color: var(--muted); }
.month-cell.closed { background: var(--closed); }
.month-cell.unloaded { background: repeating-linear-gradient(135deg, var(--closed) 0 6px, transparent 6px 12px); }
.month-cell .mnum { background: none; border: 0; padding: 2px 6px; align-self: flex-start; font-size: 13px; font-weight: 600; border-radius: 6px; min-height: 28px; }
.month-cell.today .mnum { background: var(--gold); color: var(--on-gold); }
.mchip { display: block; width: 100%; text-align: left; border: 0; border-radius: 6px; padding: 3px 6px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mchip.booked { background: #3B5B8C; color: #F2F5FA; }
.mchip.done { background: var(--bone); color: var(--muted); }
.mchip.missed { background: var(--closed); color: var(--muted); text-decoration: line-through; }
.mchip.allday.booked { background: var(--gold-wash); color: var(--ink); border-left: 4px solid var(--gold); }
.mmore { font-size: 12px; color: var(--muted); padding-left: 6px; }

.day-strip { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.day-strip button {
  min-height: 60px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
}
.day-strip .dow { font-size: 11px; color: var(--muted); }
.day-strip .num { font-size: 16px; font-weight: 600; }
.day-strip .dot { width: 6px; height: 6px; border-radius: 3px; background: transparent; }
.day-strip .has .dot { background: var(--gold); }
.day-strip [aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
.day-strip [aria-pressed="true"] .dow { color: var(--ink); }
.day-strip [aria-pressed="true"] .dot { background: var(--on-gold); }
.day-strip .closed-day .num { color: #7C8592; }
.agenda { display: flex; flex-direction: column; gap: 12px; }
.agenda-sum { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.job-card {
  display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px;
}
.job-card:hover { border-color: var(--line-strong); }
.job-card.done { background: var(--closed); }
.job-card.missed { background: var(--closed); border-style: dashed; }
.job-card.missed .time, .job-card.missed .who { color: var(--muted); }
.job-card.missed .who { text-decoration: line-through; }
.job-card .top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.job-card .time { font-size: 15px; font-weight: 600; }
.job-card .who { font-family: var(--display); font-size: 22px; overflow-wrap: anywhere; }
.job-card .what { font-size: 14px; color: var(--muted); overflow-wrap: anywhere; }
.job-card.done .time, .job-card.done .who { color: var(--muted); }

/* ---------- Calendar list view (the old Jobs page, folded in 2026-09-27); the table and chips serve Applicants too ---------- */
.list-tools { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.list-tools .field { flex: 1 1 260px; max-width: 420px; }
.list-count { margin: 0 0 8px; font-size: 14px; color: var(--muted); }
.filter-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.filter-chips button { min-height: 40px; border: 1px solid var(--gold-edge); background: var(--paper); border-radius: 999px; padding: 0 14px; font-size: 14px; }
.filter-chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); font-weight: 600; }
.jobs-table { width: 100%; border-collapse: collapse; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; font-size: 14px; }
.jobs-table th { text-align: left; font-size: 12px; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.jobs-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: middle; }
.jobs-table tr:first-child td { border-top: 0; }
.jobs-table tbody tr:hover { background: var(--hover); }
.jobs-table td { overflow-wrap: anywhere; }
.jobs-table .list-when { white-space: nowrap; }
.jobs-table .row-link + .test-pill { margin-left: 8px; }
.jobs-table tr.past .list-when { color: var(--muted); }

/* ---------- Applicants ---------- */
.applicants-scroll {
  overflow-x: auto;
  max-width: 100%;
  min-width: 0;
  -webkit-overflow-scrolling: touch;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.applicants-table {
  min-width: 920px;
  border: 0;
  border-radius: 0;
  font-size: 13px;
}
.applicants-table th,
.applicants-table td {
  padding: 6px 10px;
  white-space: nowrap;
}
.applicants-table th {
  font-size: 11px;
  background: var(--warm);
}
.applicant-photos-cell { display: inline-flex; align-items: center; gap: 8px; }
.applicant-thumb {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-strong);
  background: var(--closed);
}
.attest-ok { color: var(--green); font-weight: 700; }
.applicants-table td { overflow-wrap: anywhere; }
.applicants-table tbody tr.is-selected { background: var(--gold-wash); }
.applicants-table tbody tr { cursor: pointer; }
.applicant-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 24px;
  margin: 0;
}
.applicant-fields > div { display: grid; gap: 2px; min-width: 0; }
.applicant-fields dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.applicant-fields dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.applicant-fields .span-2 { grid-column: 1 / -1; }
.applicant-photos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
.applicant-photo { display: grid; gap: 6px; justify-items: start; min-width: 0; }
.applicant-photo p { margin: 0; font-weight: 600; font-size: 14px; }
.applicant-photo img {
  max-width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
}
.applicant-photo input[type="file"] { max-width: 100%; font-size: 14px; }
.applicant-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
#detail-notes { min-height: 120px; }
#applicants-app { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
#applicants-filters { align-self: flex-start; }

/* ---------- Job panel (a <dialog>) ---------- */
.panel {
  margin: 0 0 0 auto;
  width: min(460px, 100vw);
  max-width: 100vw;
  height: 100dvh;
  max-height: 100dvh;
  padding: 0;
  border: 0;
  border-left: 1px solid var(--line-strong);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.panel::backdrop { background: rgba(0, 0, 0, 0.55); }
.panel-inner { display: flex; flex-direction: column; height: 100%; }
.panel-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; }
.panel-head .row { display: flex; align-items: center; gap: 8px; }
.panel-head .row .close { margin-left: auto; }
.panel-head h2 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; overflow-wrap: anywhere; }
.panel-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 18px; overflow-y: auto; flex-grow: 1; }
.panel-section { display: flex; flex-direction: column; gap: 10px; }
.panel-section h3 { font-size: 14px; font-weight: 600; }
/* Read only: the event's words as typed (a description keeps its line breaks), and links out. */
.panel-text { margin: 0; font-size: 15px; overflow-wrap: anywhere; }
.panel-notes { white-space: pre-wrap; }
.panel-link, .panel-edit { align-self: flex-start; }
.schedule-line { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); }
/* The title as typed, under a heading that names them from their card. */
.panel-typed { font-size: 13px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border: 0; background: none; color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center; border-radius: 8px;
}
.pw-toggle:hover { color: var(--ink); }
.pw-toggle .eye-off { display: none; }
.pw-toggle[aria-pressed="true"] .eye-on { display: none; }
.pw-toggle[aria-pressed="true"] .eye-off { display: inline; }
.saved-flash { font-size: 13px; color: var(--green); font-weight: 600; }

/* ---------- Sign-in pages ---------- */
.auth-page { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 28px 20px 48px; gap: 24px; }
.auth-back { align-self: flex-start; font-size: 14px; text-decoration: none; padding: 8px 0; }
.auth-top { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.auth-top img { width: 72px; height: 72px; border-radius: 50%; }
.auth-top .eyebrow { color: var(--gold-deep); font-weight: 600; letter-spacing: 0.12em; }
.auth-top h1 { font-family: var(--display); font-weight: 400; font-size: 34px; }
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.auth-card .field { font-size: 14px; color: var(--ink); }
.auth-card .field input { min-height: 50px; font-size: 17px; }
.auth-card .btn { min-height: 52px; font-size: 17px; }
.auth-note { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--danger); }
.auth-note.ok { color: var(--green); }
.auth-foot { font-size: 13px; color: var(--muted); text-align: center; margin: 0; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--gold-deep); text-decoration: underline; font-size: 14px; align-self: center; }
.forgot-link { align-self: flex-start; padding: 6px 0 0; font-weight: 500; }

/* ---------- Settings (/team/settings/, 2026-09-26) ---------- */
/* A menu, one screen per setting (2026-09-28, docs/features/settings.md). Below 960px the page shows
   the menu, or one screen under "‹ Settings"; from 960px the menu is a left column beside the screen. */
.settings-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.settings-menu ul {
  list-style: none; margin: 0; padding: 0; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
}
.settings-menu li + li { border-top: 1px solid var(--line); }
.settings-menu a {
  display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 14px 12px 18px;
  color: var(--ink); text-decoration: none;
}
.settings-menu a:hover { color: var(--ink); background: var(--hover); }  /* beats global a:hover */
/* The list clips its corners, so the keyboard ring sits just inside each item. */
.settings-menu a:focus-visible { outline-offset: -3px; }
.settings-menu a[aria-current="page"] { background: var(--gold-wash); box-shadow: inset 4px 0 0 var(--gold); }
.settings-menu-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.settings-menu-title { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 16px; font-weight: 600; }
.settings-menu-desc { font-size: 13px; line-height: 1.4; color: var(--muted); overflow-wrap: anywhere; }
.settings-menu-go { flex-shrink: 0; color: var(--muted); }
.settings-screens, .settings-screen { display: grid; gap: 16px; align-content: start; min-width: 0; }
/* A screen is a size container: the Text log picks table or blocks by the room its screen has. */
.settings-screen { container-type: inline-size; }
.settings-screen h2 { font-family: var(--display); font-weight: 400; font-size: 26px; line-height: 1.15; }
.settings-screen > p { margin: 0; }
.settings-screen-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 4px 12px; }
.settings-screen-head .muted { font-size: 13px; }
.settings-back { display: none; }
@media (max-width: 959px) {
  .team-main[data-screen-open] > .page-head, .team-main[data-screen-open] .settings-menu { display: none; }
  .team-main:not([data-screen-open]) .settings-screens { display: none; }
  .settings-back { display: inline-flex; align-items: center; gap: 6px; justify-self: start; min-height: 44px; font-weight: 600; text-decoration: none; }
  .settings-back span { font-size: 24px; line-height: 1; }
}
@media (min-width: 960px) {
  .settings-layout { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; align-items: start; }
}

.settings-card { max-width: 560px; display: grid; gap: 10px; }
.settings-card p { margin: 0; }
.settings-switch { display: flex; align-items: center; gap: 12px; min-height: 44px; font-weight: 600; cursor: pointer; }
.settings-switch input[role="switch"] {
  appearance: none; -webkit-appearance: none; flex-shrink: 0; position: relative; margin: 0;
  width: 44px; height: 26px; border-radius: 999px; background: var(--line-strong); cursor: pointer;
}
.settings-switch input[role="switch"]::before {
  content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.settings-switch input[role="switch"]:checked { background: var(--gold); }
.settings-switch input[role="switch"]:checked::before { background: var(--on-gold); }
.settings-switch input[role="switch"]:checked::before { left: 21px; }
.settings-switch input[role="switch"]:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1180px) {
  .team-header { gap: 16px; }
  .team-nav a { padding: 20px 8px 17px; font-size: 14px; }
  .team-settings { width: 40px; padding: 0; }
  .team-settings-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .team-user .who { display: none; }
  .dash-row.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-row.three .span-2 { grid-column: span 2; }
  .dash-row.three .months-card { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  :root { --gutter: 16px; }
  body { font-size: 15px; }
  .team-header { gap: 12px; min-height: 56px; }
  .team-brand span { font-size: 18px; }
  .team-nav { display: none; }
  .team-user { gap: 6px; }
  .team-user [data-sign-out] { padding: 8px 12px; white-space: nowrap; min-height: 44px; }
  .team-settings { min-height: 44px; min-width: 44px; }
  .tabbar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    min-height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--bar);
    border-top: 1px solid var(--line);
  }
  .tabbar a {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    text-decoration: none; color: var(--muted); font-size: 11px; line-height: 1.15; text-align: center;
    padding: 0 2px; min-height: 60px;
  }
  .tabbar a[aria-current="page"] { color: var(--gold-deep); font-weight: 600; }
  .team-main { padding: 18px var(--gutter) calc(96px + env(safe-area-inset-bottom)); gap: 16px; }
  .dash-main { padding-top: 12px; gap: 10px; }
  .dash-main .card { padding: 12px; gap: 8px; }
  .team-brand img { width: 32px; height: 32px; }
  .page-head h1 { font-size: 28px; }
  .dash-row.three { grid-template-columns: minmax(0, 1fr); }
  .dash-row.three .span-2, .span-2 { grid-column: auto; }
  .card { padding: 16px; }
  .cal-toolbar h1 { font-size: 24px; width: 100%; }
  /* The week grid needs 760px: a phone has Day, Month and List (calendar.js opens ?view=week as day). */
  .cal-controls [data-view="week"] { display: none; }
  .test-banner { font-size: 13px; padding-top: 6px; padding-bottom: 6px; }
  .jobs-table thead { display: none; }
  .jobs-table, .jobs-table tbody, .jobs-table tr, .jobs-table td { display: block; }
  .jobs-table tr { border-top: 1px solid var(--line); padding: 10px 14px; }
  .jobs-table tr:first-child { border-top: 0; }
  .jobs-table td { border: 0; padding: 2px 0; }
  .jobs-table .list-when { white-space: normal; font-weight: 600; }
  .applicants-table { display: table; min-width: 920px; }
  .applicants-table thead { display: table-header-group; }
  .applicants-table tbody { display: table-row-group; }
  .applicants-table tr { display: table-row; padding: 0; border-top: 0; }
  .applicants-table th,
  .applicants-table td {
    display: table-cell;
    padding: 6px 10px;
    white-space: nowrap;
  }
  .applicants-table td { border-top: 1px solid var(--line); }
  .applicants-table td[data-label]::before { content: none; }
  .applicant-fields, .applicant-photos { grid-template-columns: minmax(0, 1fr); }
  .applicant-fields .span-2 { grid-column: auto; }
  .panel { width: 100vw; border-left: 0; }
  .month-cell { min-height: 64px; padding: 4px; }
  .mchip { font-size: 0; height: 8px; padding: 0; border-radius: 4px; }
  .mmore { font-size: 11px; padding: 0; }
}

@media (max-width: 400px) {
  .team-brand span { font-size: 16px; }
}

/* ---------- Quotes (/team/quotes/, 2026-09-25) ---------- */
.quotes-section { margin-top: 28px; }
.quotes-section h2 { font-size: 20px; font-weight: 600; margin-bottom: 4px; }
/* Names, cities and texts come from customers: one long unbroken word must wrap, not widen the page. */
.quote-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; margin-top: 12px; }
.quote-card { background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; min-width: 0; overflow-wrap: anywhere; }
.quote-card[data-test] { border: 1px dashed var(--gold-deep); }
.quote-card[data-stage="missing"], .quote-card[data-stage="replied"], .quote-card[data-stage="change_requested"] { border-left: 4px solid var(--danger); }
.quote-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.quote-head h3 { font-size: 18px; font-weight: 600; margin: 0; }
.quote-head h3 { min-width: 0; }
.card-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.card-chev { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); transition: transform 0.15s; flex-shrink: 0; }
.quote-card.is-open .card-chev { transform: rotate(-135deg) translateX(-2px); }
.quote-card[data-key] { cursor: pointer; }
.quote-card.is-open { cursor: default; border-color: var(--line-strong); }
.quote-card.is-open > .quote-head, .quote-card.is-open > .journey-line, .quote-card.is-open > .journey-latest, .quote-card.is-open > .journey-need { cursor: pointer; }
.card-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); cursor: default; }
.quote-pill { font-size: 12px; font-weight: 600; color: var(--ink); background: var(--gold-wash); border-radius: 999px; padding: 2px 8px; min-width: 0; }
.quote-missing { margin: 10px 0 0; }
.quote-optout { margin: 10px 0 0; color: var(--danger); font-weight: 600; }
.quotes-calls-note { margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--gold-wash); font-weight: 600; }
.quote-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.quote-close { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 10px; }
.quote-close select { min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--paper); font: inherit; }
.quote-close[hidden] { display: none; }
.quote-note { margin: 8px 0 0; font-size: 14px; color: var(--muted); min-height: 1em; }
.quote-draft, .quote-more { margin-top: 12px; }
.quote-draft summary, .quote-more summary { cursor: pointer; font-weight: 600; min-height: 32px; }
.quote-draft-text { background: var(--gold-wash); border-radius: 10px; padding: 10px 12px; user-select: all; }
.quote-more h4 { margin: 16px 0 8px; font-size: 15px; }
.quote-booking .book-review-dl { display: grid; gap: 8px; margin: 10px 0 0; }
.quote-booking .book-review-dl div { display: grid; grid-template-columns: 140px 1fr; gap: 12px; }
.quote-booking .book-review-dl dt { color: var(--muted); font-size: 14px; }
.quote-booking .book-review-dl dd { margin: 0; overflow-wrap: anywhere; }
/* History (2026-09-27): last contact, what was asked, and every event and text on record. */
.quote-asked { margin: 6px 0 0; font-size: 14px; }
.quote-replied { font-weight: 600; color: var(--danger); }
.history-add { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin-top: 10px; padding: 12px; background: var(--warm); border-radius: 10px; }
.history-add h4 { margin: 0; font-size: 15px; }
/* Folded behind "+ Add a note" (2026-10-08). */
.history-add-wrap { margin-top: 10px; }
.history-add-wrap > .history-add { margin-top: 0; }
.history-add-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.history-add .field-error { margin: 0; }
.history-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 10px; }
.history-item { display: grid; gap: 2px; min-width: 0; }
.history-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.history-channel { font-weight: 600; color: var(--ink); background: var(--gold-wash); border-radius: 999px; padding: 0 8px; }
.history-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.history-item[data-kind="texts_capped"] .history-text,
.history-item[data-kind="calls_capped"] .history-text { color: var(--muted); font-style: italic; }
.history-body { display: flex; flex-direction: column; min-width: 0; }
/* Linked numbers (2026-09-28): a History line from one names it; "Also:" lines and the link panel. */
.history-via { font-weight: 600; color: var(--ink); border: 1px solid var(--line-strong); border-radius: 999px; padding: 0 8px; }
/* The lead sorter's tag on a line (2026-10-05): the bucket and Urgent in red; an owner holds it to fix it (2026-10-13). */
.history-tag { font-weight: 600; color: #9CC3F7; background: rgba(91, 155, 240, 0.12); border-radius: 999px; padding: 0 8px; }
.history-tag[data-bucket="problem"], .history-tag[data-urgent] { color: var(--you); background: var(--you-wash); }
.history-tag[data-bucket="needs_you"] { color: #F2C95C; background: rgba(229, 177, 46, 0.15); }
.history-tag[data-hold] { cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; }
.history-tag[data-hold]:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.history-tag[aria-expanded="true"] { box-shadow: 0 0 0 1px currentColor; }
/* Nothing under an uncorrected line until the form opens or something is said (found by review). */
.tag-fix:has(> .tag-fix-said:only-child:empty) { display: none; }
.tag-fix { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--muted); }
.tag-fix .link-text { font-size: 12px; padding: 4px 2px; min-height: 28px; }
.tag-fix-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tag-fix-form select { min-height: 32px; font-size: 13px; }
.tag-fix-urgent { display: inline-flex; align-items: center; gap: 4px; }
.tag-fix-said { color: var(--ink); }
.quote-also { margin: 6px 0 0; font-size: 14px; }
.link-text { background: none; border: 0; padding: 6px 4px; min-height: 32px; font: inherit; font-weight: 600; color: var(--gold-deep); text-decoration: underline; cursor: pointer; }
.link-text[disabled] { opacity: 0.55; cursor: not-allowed; }
.link-panel { display: grid; gap: 12px; margin-top: 10px; padding: 12px; background: var(--warm); border-radius: 10px; min-width: 0; }
.link-panel[hidden] { display: none; }
.link-panel .muted, .link-panel .field-error { margin: 0; }
/* Said yes (2026-09-29, cut back 2026-09-30): the time saved on a job scheduled before the cut. */
.quote-card[data-stage="ready_to_schedule"] { border-left: 4px solid #E5B12E; }
.link-choices { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.link-choices legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.link-choice {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); cursor: pointer; min-width: 0;
}
.link-choice input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.link-choice > span { display: grid; gap: 2px; min-width: 0; }
.link-choice:has(input:checked) { border-color: var(--ink); background: var(--gold-wash); }
.link-choice-name { font-weight: 600; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.link-choice-meta, .link-reason { font-size: 13px; color: var(--muted); }
.link-actions { display: flex; flex-wrap: wrap; gap: 8px; }
/* The confirm button names the number and the customer: it wraps rather than widen the page. */
.link-actions .btn { white-space: normal; text-align: center; padding-top: 8px; padding-bottom: 8px; max-width: 100%; }
@media (max-width: 680px) {
  .quote-booking .book-review-dl div { grid-template-columns: 1fr; gap: 2px; }
}

/* ---------- Client notifications (Settings, 2026-09-27, built Off; docs/features/client-notifications.md) ---------- */
.notify-setup { padding: 10px 12px; border-radius: 10px; background: rgba(229, 177, 46, 0.15); color: #F2C95C; font-weight: 500; }
.notify-modes { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; min-width: 0; }
.notify-modes legend { padding: 0; margin-bottom: 6px; font-weight: 600; }
.notify-mode {
  display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--line-strong); border-radius: 10px; cursor: pointer;
}
.notify-mode input { width: 20px; height: 20px; margin: 2px 0 0; flex-shrink: 0; accent-color: var(--ink); }
.notify-mode > span { display: grid; gap: 2px; min-width: 0; }
.notify-mode:has(input:checked) { border-color: var(--ink); background: var(--gold-wash); }
.notify-mode:has(input:disabled) { opacity: 0.55; cursor: not-allowed; }
.notify-phone { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; }
.notify-phone .field { flex: 1 1 200px; }
.notify-texts summary { min-height: 32px; font-weight: 600; cursor: pointer; }
.notify-texts dl { display: grid; gap: 8px; margin: 8px 0 0; }
.notify-texts dt { font-size: 12px; font-weight: 600; color: var(--muted); }
.notify-texts dd { margin: 0; overflow-wrap: anywhere; }
/* Each automatic text's switch (booking texts, the missed-call text; 2026-09-28): its own block inside the card. */
.notify-booking, .notify-missed { display: grid; gap: 6px; padding-top: 14px; border-top: 1px solid var(--line); }
.notify-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.notify-more { align-self: flex-start; }
.notify-log-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.notify-log-table th,
.notify-log-table td { padding: 8px 10px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.notify-log-table th { border-top: 0; background: var(--warm); font-size: 11px; white-space: nowrap; }
.notify-log-table .notify-msg { min-width: 200px; white-space: pre-wrap; }
/* Long unbroken text (a name, a message) may break anywhere; labels like "Reminder" never split. */
.notify-log-table .notify-msg, .notify-log-table .notify-client { overflow-wrap: anywhere; }
.notify-log-table .test-pill { margin-left: 6px; }
/* The table needs its screen 900px wide (on a computer the Settings menu takes a column, 2026-09-28):
   with less room (a phone, a tablet, a laptop up to about 1340px) the log is one block per row, each
   value labelled. With room, the time, the appointment date and the phone number stay on one line. */
@container (min-width: 900px) {
  .notify-log-table td:is([data-label="Time"], [data-label="Appointment"], [data-label="To"]) { white-space: nowrap; }
}
@container (max-width: 899px) {
  .notify-log-table thead { display: none; }
  .notify-log-table, .notify-log-table tbody, .notify-log-table tr, .notify-log-table td { display: block; }
  .notify-log-table tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .notify-log-table tr:first-child { padding-top: 0; border-top: 0; }
  .notify-log-table td { padding: 2px 0; border: 0; }
  .notify-log-table td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--muted); }
  .notify-log-table .notify-msg { min-width: 0; }
}


/* ---------- Where each customer is (2026-10-02, docs/features/customer-stages.md) ---------- */
/* The line's colors: done green, needs you red, waiting on them gold, not yet grey. */
.journey-line { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; font-size: 11px; text-align: center; color: var(--muted); }
.journey-line li { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.journey-line .seg { display: block; height: 6px; border-radius: 3px; background: #4A525E; }
.journey-line [data-tone="done"] .seg { background: var(--green); }
.journey-line [data-tone="you"] .seg { background: var(--danger); }
.journey-line [data-tone="them"] .seg { background: var(--gold); }
.journey-line [data-tone="closed"] .seg { background: #7C8592; }
.journey-line [data-tone="done"] { color: var(--ink); }
.journey-line [data-tone="you"] { color: var(--you); font-weight: 600; }
.journey-line .seg-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 0; font-size: 12px; color: var(--muted); }
.journey-legend span { display: inline-flex; align-items: center; gap: 6px; }
.journey-legend i { width: 14px; height: 6px; border-radius: 3px; background: #4A525E; }
.journey-legend i[data-tone="you"] { background: var(--danger); }
.journey-legend i[data-tone="them"] { background: var(--gold); }
.journey-legend i[data-tone="done"] { background: var(--green); }
.journey-legend i[data-tone="closed"] { background: #7C8592; }
.journey-latest { margin: 8px 0 0; font-size: 14px; }
.journey-latest b { font-weight: 500; }
/* The Timeline's top step is the latest step: while it is open the line above would say it twice
   (owner, 2026-10-03). A closed card keeps the line, its glance. */
.quote-card.is-open:has(> .card-body > .journey-more[open]) > .journey-latest { display: none; }
/* Closed, a card's glance is the latest step and "Your call" in red; opened, the line and the Your call
   box say it, so the glance hides (owner, 2026-10-05/06, the mockup). */
.quote-card > .journey-need { padding: 0; border: 0; background: none; color: var(--you); font-size: 14px; }
.quote-card.is-open > .journey-latest, .quote-card.is-open > .journey-need { display: none; }
/* The stage in small words on a card's second row: "Quoted · Standard clean". */
.card-stage { color: var(--ink-2); font-weight: 500; }
/* A Needs you card has a red edge. */
.quote-card[data-needs] { border-color: rgba(240, 106, 106, 0.45); }
.quote-card .card-body > .journey-line:first-child { margin-top: 14px; }
/* The open card's "Your call" box: the words, and the rebook or win-back text with Send text. */
.journey-callbox { margin: 12px 0 0; padding: 12px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); display: grid; gap: 10px; }
.journey-callbox[data-tone="you"] { background: rgba(240, 106, 106, 0.12); border-color: rgba(240, 106, 106, 0.35); }
/* How long they have waited, and the card's main button, in the box (2026-10-09, card reorder). */
.callbox-meta { margin: -6px 0 0; font-size: 13px; color: var(--muted); }
.journey-callbox > .btn-primary { width: 100%; min-height: 44px; justify-content: center; text-align: center; }
.callbox-need { margin: 0; color: #FFD3D3; font-size: 14px; }
.callbox-need b { font-weight: 600; color: var(--you); }
.outreach { display: grid; gap: 10px; }
.outreach-text { margin: 0; padding: 10px; border-radius: 8px; background: var(--cream); color: var(--ink-2); font-size: 14px; overflow-wrap: anywhere; }
.outreach-send { display: grid; gap: 6px; justify-items: start; }
.outreach-send .btn { min-height: 44px; }
.outreach-hint { margin: 0; font-size: 12px; color: var(--muted); }
/* No reply needed (2026-10-08): the button in the red Your call box, and Undo on its Timeline step. */
.callbox-noreply { display: grid; gap: 6px; justify-items: start; }
.callbox-noreply .btn { min-height: 44px; }
.timeline-undo { min-height: 44px; padding: 0 6px; }
.outreach-sent { margin: 0; font-size: 13px; color: #7DDC9C; }
.outreach-sent[data-status="failed"] { color: var(--gold-deep); }
.outreach-sent[data-status="unconfirmed"] { color: var(--gold-deep); }
/* "Your call" in red (2026-10-02, after Fast Marine; was a gold wash). */
.journey-need { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(240, 106, 106, 0.12); border: 1px solid rgba(240, 106, 106, 0.35); color: #FFD3D3; font-size: 14px; }
.journey-need b { font-weight: 600; color: var(--you); }
.journey-undo { margin: 8px 0 0; font-size: 14px; }
.journey-more { margin: 8px 0 0; position: relative; }
/* "+ Add a note" at the right of the Timeline's heading; the form opens at the top (2026-10-09, card reorder). */
.journey-more .history-add-open { position: absolute; top: 0; right: 0; }
/* Folded, the wrap holds only that link: no gap above the list (found by review). */
.journey-more .history-add-wrap { margin-top: 0; }
.journey-more .history-add-wrap > .history-add { margin-top: 8px; }
.journey-more > summary { cursor: pointer; font-weight: 500; color: var(--gold-deep); min-height: 32px; display: flex; align-items: center; }
/* Theirs on the left, ours on the right, the app's own steps in the middle (2026-10-03). */
.timeline-list > li { max-width: 85%; padding: 8px 12px; border-radius: 14px; }
.timeline-list > [data-side="them"] { justify-self: start; background: var(--warm); border-bottom-left-radius: 4px; }
.timeline-list > [data-side="us"] { justify-self: end; background: var(--gold-wash); border-bottom-right-radius: 4px; }
.timeline-list > [data-side="app"] { justify-self: center; padding: 2px 8px; font-size: 13px; }
.timeline-list > [data-side="app"] .history-meta { justify-content: center; }
.timeline-list > [data-side="us"] .history-channel { background: var(--paper); }
/* A step: its icon and name over what was said ("Quoted." over "You texted: It is $180."), or on its own. */
.timeline-mark { display: flex; gap: 6px; align-items: flex-start; }
.timeline-mark b { font-weight: 600; }
.timeline-step .timeline-mark b { font-weight: 500; }
.timeline-list .step-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: var(--green); }
.timeline-list [data-tone="stop"] .timeline-mark { color: var(--you); }
.timeline-list [data-tone="stop"] .step-icon { color: var(--danger); }
.timeline-list [data-tone="wait"] .step-icon { color: var(--gold); }
.timeline-list [data-tone="next"] .step-icon { color: var(--gold-deep); }
.quote-card[data-turn="you"] { border-left: 4px solid var(--danger); }
.quote-card[data-turn="them"] { border-left: 4px solid var(--gold); }
.quote-card[data-turn="done"] { border-left: 4px solid var(--green); }
.quote-card[data-turn="closed"] { border-left: 4px solid #7C8592; }

/* The Dashboard's first view: the stages. */
.stages-card { margin-top: 0; }
.dash-main { gap: 12px; }
.dash-main .card { gap: 10px; }
.dash-main .card-head h2 { font-size: 17px; }
.card-head-right { display: inline-flex; align-items: center; gap: 2px; }
/* Compact (owner, 2026-10-03: "Maybe try to make it a little more compact", then "I like compact one"):
   less air in the stages card on a phone, and its colour key on one line as round dots. */
@media (max-width: 760px) {
  .dash-main .stages-card { padding: 10px; gap: 6px; }
  /* The "?" was sized for 12px of padding: with 10px it stood 1px past the card's edge (review,
     2026-10-03). */
  .dash-main .stages-card .help-btn { margin-right: -10px; }
}
/* The "?" overhangs the tighter gap: keep its whole box above the Needs you row (review, 2026-10-03). */
.stages-card .help-btn { position: relative; z-index: 1; }
.stages-card .journey-legend { margin: 0; gap: 4px 10px; }
.stages-card .journey-legend span { gap: 4px; white-space: nowrap; }
.stages-card .journey-legend i { width: 8px; height: 8px; border-radius: 50%; }
/* One line down to a 360px phone ("On track" is longer than "Done" was, 2026-10-03); narrower than
   that it wraps. */
@media (max-width: 419px) { .stages-card .journey-legend { font-size: 11px; gap: 4px 8px; } }
@media (max-width: 379px) { .stages-card .journey-legend { gap: 4px 5px; } .stages-card .journey-legend span { gap: 3px; } }
/* The "?" that shows a colour key (the stages', the lanes'). */
.help-btn { width: 40px; height: 40px; margin: -10px -12px -10px 0; border: 0; border-radius: 10px; background: transparent; color: var(--muted); display: inline-flex; align-items: center; justify-content: center; }
.help-btn:hover, .help-btn[aria-expanded="true"] { color: var(--gold-deep); background: var(--gold-wash); }
/* Next up: the next clean on one tappable line. */
.next-up { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--gold-edge); border-radius: 12px; background: var(--paper); color: var(--ink); text-align: left; font-size: 14px; }
.next-up[disabled] { cursor: default; border-color: var(--line); }
.next-up-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-deep); flex-shrink: 0; }
.next-up-text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-up-text b { font-weight: 600; }
.next-up-go { color: var(--muted); font-size: 18px; }
/* Needs you: one slim row, red-tinted while somebody does. 40px to the eye; ::after keeps 44px to a thumb. */
.needs-row { position: relative; display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; }
.needs-row:not([data-count="0"]) { background: var(--you-wash); border-color: rgba(240, 106, 106, 0.4); }
.needs-dot { width: 10px; height: 10px; border-radius: 50%; background: #7C8592; flex-shrink: 0; }
.needs-row:not([data-count="0"]) .needs-dot { background: var(--danger); }
.needs-text { flex: 1; }
.needs-go { color: var(--muted); font-size: 18px; line-height: 1; }
.needs-row::after { content: ''; position: absolute; inset: -3px -1px; }
.stage-tile-label { display: inline-flex; align-items: center; gap: 4px; }
.stage-dot { width: 6px; height: 6px; border-radius: 50%; background: #4A525E; }
.stage-dot[data-tone="you"] { background: var(--danger); }
.stage-dot[data-tone="them"] { background: var(--gold); }
.stage-dot[data-tone="done"] { background: var(--green); }
.stage-dot[data-tone="closed"] { background: #7C8592; }
.stages-empty { margin: 0; grid-column: 1 / -1; }
.stage-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 0; }
.stage-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); text-decoration: none; font-size: 12px; min-width: 0; }
.stage-tile b { font-size: 20px; font-weight: 600; line-height: 1.1; }
.stage-tile[data-tone="you"] { background: var(--you-wash); border-color: rgba(240, 106, 106, 0.4); color: var(--you); }
a.stage-tile:hover { border-color: var(--ink); }
@media (max-width: 359px) { .stage-tile { font-size: 11px; padding: 10px 2px; } }
.stages-note { margin: 10px 0 0; font-size: 13px; color: var(--you); }
.stages-watch { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.stages-watch[data-problem] { color: var(--you); font-weight: 600; }

/*
 * The Customers page (owner, 2026-10-05/06, on the mockup: "I like"): the search box, the filter chips,
 * and one list grouped by whose move it is, each group's heading with its dot. No stage tabs.
 */
.customer-search { margin: 16px 0 0; }
.search-box { position: relative; display: flex; align-items: center; color: var(--muted); }
.search-box > svg { position: absolute; left: 14px; pointer-events: none; }
.search-box input { width: 100%; height: 48px; box-sizing: border-box; padding: 0 46px 0 42px; border-radius: 12px; border: 1px solid var(--bone); background: var(--paper); color: var(--ink); font: inherit; font-size: 16px; }
.search-box input::placeholder { color: var(--muted); }
.search-box input:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 1px; }
.search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
#customer-search-clear { position: absolute; right: 2px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 10px; background: transparent; color: var(--muted); cursor: pointer; }
.customer-chips { display: flex; gap: 8px; overflow-x: auto; margin: 12px calc(-1 * var(--gutter)) 0; padding: 4px var(--gutter); scrollbar-width: none; }
.customer-chips::-webkit-scrollbar { display: none; }
.customer-chips button { flex-shrink: 0; min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--bone); background: var(--paper); color: var(--ink-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.customer-chips button[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
.chip-count { min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 10px; background: var(--danger); color: var(--on-gold); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.search-note { margin: 12px 0 0; font-size: 13px; }
/* "N test records hidden" while Show test records is off (the summary line is gone, 2026-10-05). */
.quotes-hidden { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.turn-group h2 { display: flex; align-items: center; gap: 8px; margin: 20px 0 10px; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.turn-group h2 .dot { width: 8px; height: 8px; border-radius: 50%; background: #7C8592; flex-shrink: 0; }
.turn-group[data-turn="you"] h2 .dot { background: var(--danger); }
.turn-group[data-turn="them"] h2 .dot, .turn-group[data-results="list"] h2 .dot { background: var(--gold-deep); }
.turn-group[data-turn="done"] h2 .dot { background: var(--green); }
.group-count { font-weight: 400; }
.list-empty { margin: 16px 0 0; }
.earlier-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.earlier-link { display: grid; gap: 2px; min-height: 44px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
.earlier-link:hover { background: var(--hover); }
.earlier-top { display: flex; align-items: baseline; gap: 8px; }
.earlier-name { font-weight: 600; font-size: 15px; min-width: 0; }
.earlier-status { margin-left: auto; flex-shrink: 0; font-size: 13px; color: var(--muted); white-space: nowrap; }
.earlier-sub { font-size: 13px; color: var(--muted); }
.search-wait:empty { display: none; }
.search-wait { margin: 0 0 8px; font-size: 13px; }
.search-empty { margin: 24px 0 0; padding: 16px 8px; text-align: center; color: var(--muted); display: grid; justify-items: center; gap: 12px; }
.search-empty p { margin: 0; overflow-wrap: anywhere; }

/* Archive: the list at the bottom of the Customers page, and the bar offering Undo. */
.archived-section { margin-top: 24px; }
.archived-section summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; }
.archived-section summary h2 { margin: 0; font-size: 18px; }
.archived-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.archived-item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); }
.archived-text { flex: 1 1 200px; min-width: 0; display: grid; gap: 2px; font-size: 14px; overflow-wrap: anywhere; }
.archived-what, .archived-when, .archived-latest { color: var(--muted); font-size: 13px; }
.archived-item .quote-note { flex-basis: 100%; margin: 0; }
.archived-item .quote-note:empty { display: none; }
.undo-bar { position: fixed; left: 16px; right: 16px; bottom: 24px; z-index: 30; width: fit-content; max-width: min(560px, calc(100% - 32px)); margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: var(--on-gold); font-size: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); overflow-wrap: anywhere; }
.undo-bar .link-text { color: var(--on-gold); }
/* While the bar shows, the page ends below it: the last button is never under it (found by review). */
body.undo-open .team-main { padding-bottom: calc(var(--undo-h, 48px) + 56px); }
/* A page shorter than the screen can still be scrolled clear of the bar. */
body.undo-open { min-height: calc(100vh + var(--undo-h, 48px) + 56px); }
@media (max-width: 760px) {
  /* Above the tab bar. */
  .undo-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  body.undo-open .team-main { padding-bottom: calc(96px + var(--undo-h, 48px) + 24px + env(safe-area-inset-bottom)); }
  body.undo-open { min-height: calc(100vh + 96px + var(--undo-h, 48px) + 24px + env(safe-area-inset-bottom)); }
}

/*
 * Gloss (owner, 2026-10-03: the dark ground is "a little matt in finish. Maybe 40% more gloss?"; then "Maybe 20% more"):
 * a soft light from the top of the page, a sheen across the top of each card with a lit top edge and
 * a shadow under it, and a glaze on the buttons. Last in the file so it layers over the flat fills;
 * a rule that sets the whole `background` (a hover, a selected tab) drops the sheen on purpose.
 */
:root {
  --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.072) 0%, rgba(255, 255, 255, 0.022) 40%, rgba(255, 255, 255, 0) 65%);
  --lift: inset 0 1px 0 rgba(255, 255, 255, 0.096), 0 1px 2px rgba(0, 0, 0, 0.42), 0 12px 28px -14px rgba(0, 0, 0, 0.72);
}
body { background: radial-gradient(130% 55% at 50% -8%, #2E3540 0%, rgba(30, 35, 42, 0) 72%) no-repeat, var(--cream); }
.team-header { background: linear-gradient(180deg, #1F242C 0%, var(--bar) 100%); }
.card, .quote-card, .job-card, .stage-tile, .archived-item, .week-wrap, .month, .settings-menu ul, .auth-card {
  background-image: var(--sheen);
  box-shadow: var(--lift);
}
.btn, .btn-ghost-dark, .team-settings, .filter-chips button { background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.085) 0%, rgba(255, 255, 255, 0) 70%); }
.btn-primary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.29) 0%, rgba(255, 255, 255, 0.05) 55%, rgba(0, 0, 0, 0.05) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 4px 12px -4px rgba(191, 155, 48, 0.66);
}

/* Customer cards after Fast Marine (2026-10-02, docs/features/customer-stages.md "Card layout"). */
/* Owner: "Look at the fast marine cards"; on the mock: "I like all". The parts come from cardparts.js. */
.quote-card .quote-head { display: block; }
.card-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 10px; }
.card-top h3 { min-width: 0; }
/* A pill keeps its words whole: on a narrow phone the row wraps instead (found by review). */
.card-top .test-pill, .card-top .quote-pill { flex-shrink: 0; white-space: nowrap; }
/* The turn word keeps to the right, with a Test pill after it when there is one. */
.card-top > .card-turn { margin-left: auto; }
.card-turn { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.card-turn[data-turn="you"] { color: var(--you); }
.card-turn[data-turn="them"] { color: var(--gold-deep); }
.card-turn[data-turn="done"] { color: #7DDC9C; }
.card-turn[data-turn="closed"] { color: var(--muted); }
.card-sub-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 4px; }
/* .card-sub is also the Dashboard's card subtitle (a <p> with a top margin); in this row it sits level. */
.card-sub-row .card-sub { margin: 0; font-size: 13px; color: var(--muted); min-width: 0; }
.card-price {
  flex-shrink: 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; color: #F2D27A;
  background: rgba(191, 155, 48, 0.12); border: 1px solid rgba(216, 181, 90, 0.45); border-radius: 999px; padding: 3px 11px;
}
.card-price[data-none] { color: var(--muted); background: transparent; border: 1px dashed rgba(255, 255, 255, 0.25); font-weight: 500; }
/* Tappable: the pill opens the card's Price section (2026-10-14). */
button.card-price { font-family: inherit; line-height: inherit; cursor: pointer; min-height: 32px; }
button.card-price:hover { border-color: rgba(216, 181, 90, 0.8); }
button.card-price:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 2px; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.card-tag {
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px;
  border: 1px solid rgba(91, 155, 240, 0.35); background: rgba(91, 155, 240, 0.08); color: #9CC3F7;
}
.card-tag[data-kind="returning"] { border-color: rgba(63, 185, 107, 0.35); background: rgba(63, 185, 107, 0.08); color: #7DDC9C; }
/* The lead sorter's red "Urgent" on a card while it is Needs you (docs/features/lead-sorter.md). */
.card-tag[data-kind="urgent"] { border-color: rgba(240, 106, 106, 0.5); background: rgba(240, 106, 106, 0.12); color: var(--you); }

/* The open card: labeled sections, each in an inset box. */
.card-sec { margin-top: 16px; }
/* The body's 8px row gap plus this: 12px between sections (was 16px; tighter edges, 2026-10-09). */
.card-body > .card-sec { margin-top: 4px; }
.card-sec-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* Request is one toggle holding its section's title, with its own arrow, spaced like the other
   sections (2026-10-03); "Cleaning & how often" folds the same way (2026-10-09). */
.card-request > .quote-more, .card-fold > .quote-more { margin: 0; }
.card-request > .quote-more > summary, .card-fold > .quote-more > summary { display: flex; align-items: center; gap: 8px; min-height: 32px; margin: 0 0 8px; list-style: none; color: var(--muted); }
.card-request > .quote-more > summary::-webkit-details-marker, .card-fold > .quote-more > summary::-webkit-details-marker { display: none; }
.card-request > .quote-more > summary::before, .card-fold > .quote-more > summary::before { content: '▸'; font-size: 14px; }
.card-request > .quote-more[open] > summary::before, .card-fold > .quote-more[open] > summary::before { content: '▾'; }
.card-request > .quote-more > summary > .card-sec-title, .card-fold > .quote-more > summary > .card-sec-title { margin: 0; font-size: 12px; }
/* The two toggles side by side over the buttons; an open one takes the whole row. */
.card-toggles { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0 18px; }
.card-toggles > .card-sec { margin: 0; min-width: 0; }
.card-toggles > .card-sec:has(> details[open]) { flex-basis: 100%; }
.card-fold .card-sec { margin-top: 8px; }
/* Contact: the label over the value, Copy on the right, so a phone and an email fit one line each (2026-10-09). */
.card-contact .card-kv-row { flex-direction: column; align-items: stretch; gap: 2px; min-height: 0; }
.card-contact .card-kv dt { font-size: 12px; }
.card-contact .card-kv dd { text-align: left; }
.card-contact .card-kv dd > .card-phone { display: flex; justify-content: space-between; width: 100%; }
.card-count { font-size: 12px; font-weight: 600; letter-spacing: 0; color: #9CC3F7; background: rgba(91, 155, 240, 0.15); border-radius: 999px; padding: 1px 8px; }
.card-box { margin: 0; background: #20252C; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.card-kv-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 46px; padding: 8px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}
.card-kv-row:first-child { border-top: 0; }
.card-kv dt { font-size: 13px; color: var(--muted); flex-shrink: 0; }
.card-kv dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
/* The value beside Copy: it may break; Copy keeps its size and its word (found by review at 320-360px). */
.card-value { min-width: 0; }
/* A phone number never breaks in two; under 360px the row gives up some padding to fit it. */
.card-oneline { white-space: nowrap; }
.card-phone { display: inline-flex; align-items: center; gap: 10px; min-width: 0; font-variant-numeric: tabular-nums; }
/* Copy keeps its size and its word; a long address breaks before it does (found by review at 320-360px). */
.card-copy-wrap { flex-shrink: 0; }
/* Under 360px the rows give up some padding so a number and its Copy fit on one line. After the
   base rules above, so it applies (found by review, 2026-10-03). */
@media (max-width: 359px) {
  .card-kv-row, .card-past li { padding-inline: 10px; }
  .card-kv-row { gap: 8px; }
  .card-phone { gap: 4px; }
}
.card-copy {
  position: relative; min-height: 32px; padding: 0 10px; border-radius: 8px; white-space: nowrap;
  border: 1px solid var(--gold-edge); background: transparent; color: var(--gold-deep); font-size: 12px; font-weight: 600;
}
.card-copy:hover { background: var(--gold-wash); }
/* 32px to see, 44px to tap: the hit area reaches 6px above and below (its row is 46px tall). */
.card-copy::after { content: ''; position: absolute; inset: -6px 0; }
.card-past { list-style: none; padding: 0; }
/* Track record (2026-10-05): the hint above the list, in the card's "you" colour. */
.card-record { display: flex; flex-direction: column; gap: 8px; }
.card-record-hint { margin: 0; padding: 8px 10px; border-radius: 10px; background: var(--you-wash); color: var(--you); font-weight: 600; font-size: 14px; }
/* The policy text under it (2026-10-13): the words, Send text and its hint, or the sent line. */
.callbox-policy { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 0; }
.callbox-policy > p { margin: 0; font-size: 14px; overflow-wrap: anywhere; }
.callbox-policy > .btn { align-self: flex-start; min-height: 44px; }
.card-past li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); font-size: 14px;
}
.card-past li:first-child { border-top: 0; }
/* Each part keeps its column when another is missing (a cleaning with no price). */
.card-past-date { grid-column: 1; color: var(--muted); font-variant-numeric: tabular-nums; }
.card-past-what { grid-column: 2; min-width: 0; overflow-wrap: break-word; }
.card-past-amount { grid-column: 3; font-weight: 600; font-variant-numeric: tabular-nums; }
.card-done {
  grid-column: 4; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 9px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: #7DDC9C; background: rgba(63, 185, 107, 0.10); border: 1px solid rgba(63, 185, 107, 0.35);
}
.card-done::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; }
/* Under 380px the date and what take the row; the amount and Done go on a line under the what. */
@media (max-width: 379px) {
  .card-past li { grid-template-columns: auto minmax(0, 1fr) auto; row-gap: 4px; }
  .card-past-what { grid-column: 2 / -1; }
  .card-past-amount { grid-column: 2; grid-row: 2; }
  .card-done { grid-column: 3; grid-row: 2; justify-self: end; }
}

/* One row of equal buttons: 1 full width, 2 or 3 across, 4 or more 2 across. A label may wrap to two lines. */
.quote-card .quote-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.quote-card .quote-actions:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.quote-card .quote-actions:has(> :nth-child(2):last-child),
.quote-card .quote-actions:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quote-card .quote-actions > .btn { min-height: 44px; padding: 6px 8px; text-align: center; line-height: 1.2; white-space: normal; width: 100%; }
/* Two across, an odd last button takes the whole row (four or more; three on a narrow phone). */
.quote-card .quote-actions:has(> :nth-child(4)) > :last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 359px) {
  /* Three across is under 90px a button here: two across, the third on a row of its own. */
  .quote-card .quote-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quote-card .quote-actions > :last-child:nth-child(odd):not(:only-child) { grid-column: 1 / -1; }
}

/* Needs a manager's approval (owner, 2026-10-04): the booking watch's readings at the top of the Dashboard, with Approve. */
.approvals { display: grid; gap: 8px; }
.approval { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--you); border-radius: 12px; background: var(--you-wash); color: var(--ink); font-size: 14px; }
/* At least 14rem wide: on a phone the text takes the whole first line and the cleaners choice and
   Approve wrap under it, instead of squeezing the text to a few words a line (owner, 2026-10-07). */
.approval-text { flex: 1 1 14rem; min-width: 0; }
.approval-text b { font-weight: 600; }
.approval .btn { flex-shrink: 0; }
.approval { flex-wrap: wrap; }
.approval-crew { flex-shrink: 0; min-height: 44px; border: 1px solid var(--line); border-radius: 10px; padding: 0 10px; background: var(--paper); font: inherit; }
.approval[data-done] { border-color: var(--line); background: var(--paper); color: var(--muted); }

/* Cleanings marked by hand (post-clean flow v1, PR 2a, 2026-10-04): the card's "Cleaning" section. */
.card-marksec p { margin: 0 0 6px; }
/* Yes, it's hers (2026-10-06): an entry that may be theirs, and its two buttons. */
.card-calsec p { margin: 0 0 6px; }
.cal-choice { display: grid; gap: 8px; padding: 10px 0; border-top: 1px solid var(--line); }
.cal-choice:first-of-type { border-top: 0; }
.cal-choice-what { margin: 0; overflow-wrap: anywhere; }
.cal-choice-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cal-choice-buttons .btn { min-height: 44px; }
/* Undo on a link is a full-size target (review, 2026-10-06: it was under 44px). */
.card-calsec .link-text { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
.cal-match { overflow-wrap: anywhere; }
/* The Dashboard's Calendar check (2026-10-06): entries ahead tied to no customer. */
.calcheck { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.calcheck h3 { margin: 0 0 4px; font-size: 15px; }
.calcheck-say { margin: 0 0 8px; font-size: 14px; }
.calcheck-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.calcheck-row { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 14px; }
/* A row opens where it is settled (2026-10-06): the whole row is the target. */
.calcheck-row:has(.calcheck-link) { padding: 0; }
.calcheck-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 0; color: inherit; text-decoration: none; }
.calcheck-link:hover .calcheck-text b, .calcheck-link:focus-visible .calcheck-text b { text-decoration: underline; }
.calcheck-text { flex: 1; min-width: 0; }
.calcheck-go { flex-shrink: 0; color: var(--muted); font-size: 18px; }
.calcheck-row:first-child { border-top: 0; }
.calcheck-more { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; }
.calcheck-more summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
.calcheck-asked { font-weight: 600; }
.card-mark summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; color: var(--gold); font-weight: 600; }
.mark-form { display: grid; gap: 10px; margin-top: 6px; }
.mark-form .btn { justify-self: start; }
.mark-reasons { border: 0; margin: 0; padding: 0; display: grid; gap: 6px; min-width: 0; }
.mark-reasons legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.mark-reason { display: flex; align-items: center; gap: 8px; min-height: 32px; }
.card-mark-say:empty { display: none; }

/* How often, and the rebook prompt (post-clean flow v1, PR 2b, 2026-10-04): the card's "How often" section. */
.card-freqsec p { margin: 0 0 6px; }
.card-pause { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
.card-pause p { margin: 0 0 6px; }

/* The agreed price (2026-10-04): the card's "Agreed price" section. */
.card-agreedsec p { margin: 0; overflow-wrap: anywhere; }
/* A name learned later (docs/features/customer-stages.md, "Names", 2026-10-04): Add name / Edit beside the
   name with a 44px tap target; editing, the row stacks and the field is 16px so an iPhone does not zoom. */
.name-cell { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 2px 6px; }
.name-edit { min-height: 44px; min-width: 44px; padding: 10px 6px; }
/* The name they gave on a call or in a text (2026-10-09): "Albert, from the call. Save name", on its own line. */
.name-offer { flex-basis: 100%; text-align: right; color: var(--muted); }
.name-offer .link-text { min-height: 44px; padding: 10px 6px; }
.name-by-app { flex-basis: 100%; text-align: right; font-size: 13px; }
.card-kv-row.is-editing { flex-direction: column; align-items: stretch; }
.card-kv-row.is-editing dd { text-align: left; }
.card-kv-row.is-editing .name-cell { display: block; }
.name-form { display: grid; gap: 8px; margin: 0; }
.name-form .field input { font-size: 16px; }
.name-form .name-hint { margin: 0; font-size: 13px; }
.name-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/*
 * The customer profile (/team/customer/, owner 2026-10-05/06, on the mockup: "I like";
 * docs/features/customer-profile.md): the top, the Quo buttons, the red Your call box, the four numbers
 * (2 across under 360px), the cleaning history, home details, contact and the Timeline (plain dated
 * lines, no list numbers).
 */
.profile-main { gap: 16px; }
.back-link { align-self: flex-start; min-height: 44px; display: inline-flex; align-items: center; gap: 4px; color: var(--gold-deep); text-decoration: none; font-weight: 500; }
.profile { display: grid; gap: 16px; min-width: 0; }
.profile-head { display: grid; gap: 6px; min-width: 0; }
.profile-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.profile-top h1 { margin: 0; font-family: var(--display); font-weight: 400; font-size: 28px; line-height: 1.15; min-width: 0; overflow-wrap: anywhere; }
#profile-status { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.card-turn[data-turn="earlier"] { color: var(--muted); }
.profile-sub { margin: 0; font-size: 13px; color: var(--muted); }
#profile-tags .card-tags { margin: 4px 0 0; }
.profile-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.profile-action { min-height: 56px; border-radius: 12px; border: 1px solid var(--warm); background: var(--paper); color: var(--gold-deep); font: inherit; font-size: 12px; font-weight: 500; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; text-align: center; padding: 6px 4px; }
.profile-action:disabled { color: var(--muted); cursor: not-allowed; opacity: .7; }
.profile-say:empty, .callbox-say:empty, .home-say:empty { display: none; }
.profile-say, .home-say { margin: 0; font-size: 13px; }
.callbox-say { margin: 0; font-size: 13px; color: var(--ink-2); }
#profile-callbox .journey-callbox { margin: 0; }
.profile-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 760px) { .profile-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.stat-tile { background: var(--paper); border-radius: 12px; padding: 12px 14px; display: grid; gap: 2px; min-width: 0; }
.stat-value { font-family: var(--display); font-size: 22px; color: var(--ink); overflow-wrap: anywhere; }
.stat-tile[data-none] .stat-value { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.stat-label { font-size: 12px; color: var(--muted); }
.stat-note { font-size: 12px; color: var(--gold-deep); }
.profile-sec { display: grid; gap: 8px; min-width: 0; }
.profile-sec h2 { margin: 0; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.profile-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile-sec-head .btn { min-height: 44px; }
.profile-box { margin: 0; padding: 0; list-style: none; background: var(--paper); border-radius: 12px; overflow: hidden; }
.profile-box > * + * { border-top: 1px solid var(--warm); }
.profile-none { margin: 0; }
.history-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; }
.history-left, .history-right { display: grid; gap: 1px; min-width: 0; }
.history-right { flex-shrink: 0; justify-items: end; text-align: right; }
.history-what { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.history-row[data-status="not_done"] .history-what { color: var(--muted); }
.history-note { font-size: 12px; color: var(--muted); }
.history-price { font-size: 14px; color: var(--ink); }
.history-price[data-none] { color: var(--muted); font-size: 12px; }
.history-status { font-size: 12px; }
.history-status[data-status="done"], .history-status[data-status="booked"] { color: var(--green); }
.history-status[data-status="not_done"] { color: var(--gold-deep); }
.home-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; padding: 10px 14px; }
.home-row dt { font-size: 13px; color: var(--muted); }
.home-row dd { margin: 0; font-size: 14px; color: var(--ink); display: grid; gap: 2px; overflow-wrap: anywhere; }
.home-from { font-size: 12px; color: var(--muted); }
.home-form { display: grid; gap: 10px; padding: 12px 14px; }
.home-form > * + * { border-top: 0; }
.home-field input { font-size: 16px; }
.home-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.contact-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 6px 6px 14px; min-height: 44px; }
.contact-text { display: grid; min-width: 0; }
.contact-value { font-size: 14px; color: var(--ink); overflow-wrap: anywhere; }
.contact-kind { font-size: 12px; color: var(--muted); }
.profile-timeline { list-style: none; padding: 12px 14px; display: grid; gap: 6px; font-size: 13px; color: var(--ink-2); }
.profile-timeline > * + * { border-top: 0; }
.profile-timeline li { overflow-wrap: anywhere; }
.timeline-all { justify-self: start; min-height: 44px; color: var(--gold-deep); font-weight: 500; }

/* More cleaners needed (2026-10-06, docs/features/cleaners.md): above the week buttons, one tappable line
   per stretch, in the "needs you" red so it reads as a warning. */
.shortages { margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--you); border-radius: 12px; background: var(--you-wash); }
.shortages h3 { margin: 0; font-size: 14px; color: var(--you); }
.shortage-list { list-style: none; margin: 0; padding: 0; }
.shortage-row { border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 14px; }
.shortage-row:first-child { border-top: 0; }
.shortage-link { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 0; color: inherit; text-decoration: none; }
.shortage-link:hover .shortage-text, .shortage-link:focus-visible .shortage-text { text-decoration: underline; }
.shortage-text { flex: 1; min-width: 0; }
.shortage-go { flex-shrink: 0; color: var(--muted); font-size: 18px; }

/* Settings › Cleaners (2026-10-06): the list in order, Add a cleaner, and the form. */
.cleaner-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cleaner-row { border-bottom: 1px solid var(--line); }
.cleaner-open { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 52px; padding: 8px 0; border: 0; background: none; text-align: left; cursor: pointer; }
.cleaner-open:hover .cleaner-name, .cleaner-open:focus-visible .cleaner-name { text-decoration: underline; }
.cleaner-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; overflow-wrap: anywhere; }
.cleaner-hours { flex-basis: 100%; color: var(--muted); font-size: 14px; }
.cleaner-go { flex-shrink: 0; color: var(--muted); font-size: 18px; }
.cleaner-row.off .cleaner-text { opacity: 0.6; }
.cleaner-roster { display: grid; gap: 10px; }
.cleaner-form { display: grid; gap: 12px; }
.cleaner-form h3 { margin: 0; font-size: 16px; }
.cleaner-days { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.cleaner-days legend { padding: 0; margin-bottom: 6px; font-size: 12px; font-weight: 600; color: var(--muted); }
.cleaner-day { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 6px; }
.cleaner-day-name { font-weight: 600; font-size: 14px; }
.cleaner-to { color: var(--muted); font-size: 13px; }
.cleaner-time { min-height: 44px; min-width: 0; width: 100%; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 6px; background: var(--paper); font-size: 14px; }
.cleaner-back { justify-self: start; display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border: 0; background: none; color: var(--gold-deep); font-weight: 600; cursor: pointer; }

/* Settings › How the app is doing (learning loop v1, 2026-10-08): one row per guess, each miss a link to its clean. */
.learning-rows { display: grid; border-top: 1px solid var(--line); }
.learning-row { display: grid; gap: 6px; padding: 12px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.learning-row:last-child { border-bottom: 0; padding-bottom: 0; }
.learning-row h3 { margin: 0; font-size: 15px; }
.learning-score { font-weight: 600; }
.learning-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; }
.learning-list li { overflow-wrap: anywhere; }
.learning-list a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--line-strong); }

/* Google review text on a clean's panel (docs/features/client-notifications.md, "Google review text"). */
.review-text { white-space: pre-line; overflow-wrap: anywhere; }
.review-error { margin: 8px 0 0; }