/* Curbaroo console. Direction B "Dispatch" (CONSOLE-SPEC.md, docs/console-mockup.html).
   Color is state: amber needs you, blue waiting, green done, purple booked. */

:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #12101a; --chrome: #0d0b14; --card: #1c1927; --raised: #221f2f; --raised-line: #3f3955;
  --ink: #f1eefa; --muted: #a39db3; --line: #332e44;
  --field-line: #757090;   /* a field's border, 3.2:1 or more on every dark surface (Build 21 item 7) */
  --brand: #7c4ddb; --brand-ink: #fff; --brand-soft: #b9a1ff; --brand-bg: #2a1f4d;   /* white on it: 5.33:1 (was #8b5cf6, 4.23) */
  --quote-stripe: #5a4f7a;
  --mark: #7c4ddb;   /* the mark in the dark theme (design notes 2026-10-05-mark, item 2) */
  --amber: #ffb224; --amber-bg: #3a2b08; --amber-ink: #ffb224;
  --green: #43d17a; --green-bg: #0f3321;
  --blue: #6ea8ff; --blue-bg: #122a4d;
  --red: #ff6b61; --red-bg: #3d1613; --red-fill: #c9363b;
  --shadow: 0 1px 0 rgba(255,255,255,.03), 0 10px 30px -14px rgba(0,0,0,.8);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f5f3ee; --chrome: #fffdf9; --card: #fffdf9; --raised: #fffdf9; --raised-line: #d6cfc3;
  --ink: #1d1a17; --muted: #6f6861; --line: #d6cfc3;
  --field-line: #8a8275;   /* a field's border, 3:1 or more on the cream and the purple tint (Build 21 item 7; was --line, 1.4:1) */
  --brand: #4a148c; --brand-ink: #fff; --brand-soft: #4a148c; --brand-bg: #ece3f7;
  --quote-stripe: #c9bda6;
  --mark: #4a148c;   /* the mark, purple, in light */
  --amber: #c77a00; --amber-bg: #fff4dc; --amber-ink: #945a00;   /* text in the yellow: 5.2:1 */
  --green: #1f7a3f; --green-bg: #e3f4e8;
  --blue: #1d5fb3; --blue-bg: #e4eefb;
  --red: #b3261e; --red-bg: #fbe7e5; --red-fill: #c9363b;
  --shadow: 0 1px 2px rgba(20,10,40,.06), 0 8px 24px -12px rgba(20,10,40,.25);
}
:root {
  /* Rounder and softer (design notes 2026-10-02): the phone's rounded system face first, Nunito where
     there is none, same sizes as before. */
  --ui: ui-rounded, "SF Pro Rounded", "Nunito", "Helvetica Neue", Arial, sans-serif;
  /* One typeface everywhere an owner reads (design notes 2026-10-04 second round, item 5): this rounded sans, for every word.
     Numbers that line up in a column keep their width with tabular figures. */
  --tabs-h: 62px;
}

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font: 400 15px/1.5 var(--ui); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
h1, p { margin: 0; }
button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.shell { min-height: 100dvh; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; }

/* Header: one thin line, the truck on the left (design notes 2026-10-02, item 1). The demo's
   new-request button folds into the same line; the strip (practice mode, or the demo's) is the only
   second line. */
.top { position: sticky; top: 0; z-index: 5; background: var(--chrome); border-bottom: 1px solid var(--line);
  padding: calc(var(--s-8) + env(safe-area-inset-top)) var(--s-16) var(--s-8); display: grid; gap: var(--s-8); }
.top { grid-template-columns: minmax(0, 1fr); }
.head-line { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); min-height: 30px; min-width: 0; }
.icon { width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid var(--line); background: var(--raised); color: var(--muted); font-size: 1rem; line-height: 1; cursor: pointer; display: grid; place-items: center; }
/* The truck's name is a button that opens Profile (build20, item 8): mixed case, ink, 1rem / 800, the Mailbox rows' small gray
   chevron after it, 44 points tall; one line that clips with an ellipsis, so it never pushes Start over or the toggle off the
   edge (item 4; it wrapped to two lines before, design notes 2026-10-03 evening, item 2). Not link purple, not underlined. */
.tenant-btn { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; min-height: 44px; margin: calc(-1 * var(--s-8)) 0;
  padding: 0; border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; text-decoration: none; }
.tenant { font: 800 1rem/1.2 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tenant-chev { flex: none; display: inline-grid; place-items: center; width: 12px; margin-left: var(--s-4); color: var(--muted); }
.tenant-chev svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.titles { min-width: 0; }
.count { font: 600 .8rem/1 var(--ui); color: var(--amber-ink); background: var(--amber-bg); padding: var(--s-8) var(--s-12); border-radius: 999px; white-space: nowrap; }
.count.clear { color: var(--green); background: var(--green-bg); }
.count.info { color: var(--ink); background: var(--raised); border: 1px solid var(--line); }
/* A page names itself in one line at its top: its name, its count, the magnifier on a list. */
.page-head { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-4) var(--s-4) 0; min-height: 40px; }
.page-head h1 { font: 700 1.3rem/1.15 var(--ui); margin: 0 auto 0 0; }
.mag { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--raised); color: var(--muted);
  display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; }
.mag[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-soft); }
.mag svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; }
.narrow { display: flex; padding: 0 var(--s-4); }
.narrow input { flex: 1; min-width: 0; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--brand); background: var(--raised); font-size: 16px; outline: none; }
.narrow input::placeholder { color: var(--muted); }

.view { flex: 1; padding: var(--s-12) var(--s-12) calc(var(--tabs-h) + var(--s-24) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-12); align-content: start; }

/* The card: three distinct surfaces (facts, what they wrote, the draft) and one row of buttons. */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--amber); }
.card.waiting::before { background: var(--blue); }
.card.done::before, .card.yes::before { background: var(--green); }
.card.booked::before { background: var(--brand); }

.head { padding: var(--s-16) var(--s-16) var(--s-12) var(--s-20); display: grid; gap: var(--s-4); }
/* The name-and-bubble rule, one component (design notes 2026-10-04-e, item 6): the name wraps, the Contact bubble stays
   on its line, pinned right. With a lead (an invoice's number) the name sits right, beside the bubble. */
.name-line { display: flex; align-items: center; gap: var(--s-12); }
.name-line > .nl-name { flex: 1 1 auto; min-width: 0; margin: 0; overflow-wrap: anywhere; }
.name-line > .contact-btn { flex: none; margin: 0 0 0 auto; }
.name-line.has-lead > .nl-lead { flex: none; }
.name-line.has-lead > .nl-name { text-align: right; }
.who { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-12); }
.who b { font: 700 18px/1.25 var(--ui); }
.state { font: 600 .72rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--amber-ink); white-space: nowrap; }
.card.waiting .state { color: var(--blue); }
.card.done .state, .card.yes .state { color: var(--green); }
.card.booked .state { color: var(--brand-soft); }
.sub { color: var(--muted); font-size: .9rem; }

.facts { margin: 0; padding: 0 var(--s-16) var(--s-12) var(--s-20); display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-16); font: 500 13px/1.4 var(--ui); }
.fact { display: grid; gap: var(--s-4); min-width: 0; }
.fact.full { grid-column: 1 / -1; }
.fact dt { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.fact dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.fact .drive { display: block; color: var(--muted); font-size: 12px; }
.fact a { color: inherit; text-decoration: underline; text-decoration-color: var(--quote-stripe); text-underline-offset: 3px; }
.avail { display: inline-flex; align-items: center; gap: var(--s-8); padding: var(--s-4) var(--s-8); border-radius: 6px; font-weight: 500; width: fit-content; }
.avail i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.avail.free { color: var(--green); background: var(--green-bg); }
.avail.busy { color: var(--red); background: var(--red-bg); }
.avail.unknown { color: var(--muted); background: var(--raised); }
.avail.mine { color: var(--brand-soft); background: var(--brand-bg); }
button.avail { border: 0; font: inherit; font-weight: 500; cursor: pointer; text-align: left; }

.quote { display: block; width: calc(100% - 34px); margin: 0 var(--s-16) var(--s-12) var(--s-20); padding: var(--s-8) var(--s-12); text-align: left; cursor: pointer;
  background: var(--bg); border: 0; border-left: 3px solid var(--quote-stripe); border-radius: 6px;
  font-size: 14px; line-height: 1.45; color: var(--muted); }
/* Five lines, then a soft fade into Read more (design notes, item 1). */
.quote .text.clamp { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent); mask-image: linear-gradient(to bottom, #000 55%, transparent); }
.read-more { display: inline-flex; align-items: center; gap: var(--s-4); margin-top: var(--s-4); font: 600 .82rem/1.3 var(--ui); color: var(--brand-soft); }
.quote .label { display: flex; justify-content: space-between; gap: var(--s-8); font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-8); }
.quote .label span { letter-spacing: .02em; text-transform: none; font-weight: 500; }
.quote .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.quote dl { margin: 0; display: grid; gap: var(--s-4); }
.quote dt { font-weight: 600; color: var(--ink); opacity: .8; }
.quote dd { margin: 0 0 var(--s-4); overflow-wrap: anywhere; }

.draft { margin: 0 var(--s-12) var(--s-12) var(--s-16); padding: var(--s-16) var(--s-16) var(--s-16); background: var(--raised); border: 1.5px solid var(--raised-line); border-radius: 10px; }
.draft .label { display: block; font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--s-8); }
.draft .text { font-size: 17px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }   /* the hero: what he will send */
.draft .signoff { margin-top: var(--s-12); font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }

.draft.editing { border-color: var(--brand); }
.draft textarea.edit { display: block; width: 100%; min-height: 9em; resize: none; border: 0; padding: 0; background: transparent;
  font-size: 17px; line-height: 1.5; outline: none; overflow: hidden; }
.draft { position: relative; }
.draft.busy .text, .draft.busy .signoff { opacity: .35; }
.draft .spin { position: absolute; right: 12px; top: 12px; font-size: .72rem; font-weight: 600; color: var(--muted); }
.draft .spin .linkish { font-size: inherit; margin-left: var(--s-8); }
mark.blank { background: var(--amber-bg); color: var(--amber-ink); border-radius: 3px; padding: 0 var(--s-4); }

.levers { display: flex; flex-wrap: wrap; gap: var(--s-8); padding: 0 var(--s-16) var(--s-12) var(--s-20); }
.lever { font: 600 .8rem/1 var(--ui); padding: var(--s-8) var(--s-12); border-radius: 999px; border: 1.5px solid var(--raised-line); background: var(--raised); cursor: pointer; display: inline-flex; align-items: center; gap: var(--s-8); min-height: 34px; }
.lever small { font-weight: 500; color: var(--muted); font-size: .9em; }
.lever.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }   /* purple = primary + booked only */

.ask { margin: 0 var(--s-12) var(--s-12) var(--s-16); display: grid; gap: var(--s-8); }
.ask form { display: flex; gap: var(--s-8); }
.ask input { flex: 1; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); }
.ask input::placeholder { color: var(--muted); }
.ask button { font-weight: 700; padding: 0 var(--s-16); border-radius: 10px; border: 1.5px solid var(--raised-line); background: var(--raised); cursor: pointer; }
.answer { font-size: .9rem; line-height: 1.45; padding: var(--s-8) var(--s-12); border-radius: 8px; background: var(--raised); border-left: 3px solid var(--brand); display: grid; gap: var(--s-4); }
.answer.muted { color: var(--muted); border-left-color: var(--line); }
.answer.error { border-left-color: var(--red); }
.answer .src { justify-self: start; padding: 0; border: 0; background: none; font: 600 .78rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; text-align: left; }
span.src { cursor: default; }

.actions { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: var(--s-8); padding: var(--s-4) var(--s-16) var(--s-16) var(--s-20); }
.btn[aria-pressed="true"] { border-color: var(--brand); }
.actions.book { grid-template-columns: 1.8fr 1fr 1fr; }
.card.yes .state { color: var(--green); }
.btn { font: 700 .92rem/1 var(--ui); padding: var(--s-16) var(--s-8); border-radius: 10px; border: 1.5px solid var(--raised-line); background: var(--raised); cursor: pointer; min-height: 44px; }
.btn.primary { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.btn.tool { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); font-weight: 600; color: var(--ink); }
.ico { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .75; }
.btn:disabled { opacity: .55; cursor: default; }
.card.held::before { background: var(--muted); }
.card.held .state { color: var(--muted); }
.card.line.opens { cursor: pointer; }
/* Practice mode (and the demo): one thin strip under the header line. The owner never reads "shadow". */
.mode-strip { margin: 0 calc(-1 * var(--s-16)) calc(-1 * var(--s-8)); padding: var(--s-4) var(--s-16); background: var(--blue-bg); color: var(--blue); font: 600 .72rem/1.25 var(--ui); text-align: center; text-wrap: balance; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.setting > span { font-weight: 600; font-size: .9rem; }
.toast { position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: calc(var(--tabs-h) + 14px + env(safe-area-inset-bottom));
  width: min(92vw, 420px); padding: var(--s-12) var(--s-16); border-radius: 10px; background: var(--ink); color: var(--bg);
  font: 600 .9rem/1.35 var(--ui); box-shadow: 0 10px 30px -10px rgba(0,0,0,.6); }

/* Done cards collapse to one line. */
.divider { font: 600 .7rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding: var(--s-12) var(--s-8) 0; }
.line { padding: var(--s-12) var(--s-16) var(--s-12) var(--s-20); display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); }
.line .l { display: grid; gap: var(--s-4); min-width: 0; }
.line b { font: 600 .95rem/1.25 var(--ui); }
.line .l span { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.line .state { font-size: .7rem; text-align: right; display: grid; gap: var(--s-4); }
.line .state small { font: 500 .75rem/1 var(--ui); letter-spacing: 0; text-transform: none; color: var(--muted); }

.empty { text-align: center; color: var(--muted); padding: 48px var(--s-16); display: grid; gap: var(--s-8); }
.empty b { color: var(--ink); font-size: 1.05rem; }
.empty .reload { justify-self: center; margin-top: var(--s-8); }
.pill-btn:disabled, .nav button:disabled { opacity: .45; cursor: default; }

/* The bar, in the thumb zone: five slots, Ask the raised dark circle in the middle, the one thing on
   the bar that sticks up. Only Inbox ever badges. */
.nav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
  background: var(--chrome); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); }
.nav button { position: relative; height: var(--tabs-h); border: 0; background: none; cursor: pointer; color: var(--muted);
  display: grid; justify-items: center; align-content: center; gap: var(--s-4); font: 600 .7rem/1 var(--ui); padding: 0; }
.nav button svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav button[aria-current="page"] { color: var(--brand-soft); }
.nav button[aria-current="page"]:not(.ask-slot)::after { content: ""; position: absolute; left: 30%; right: 30%; top: -1px; height: 3px;
  border-radius: 0 0 3px 3px; background: var(--brand); }
.badge-n { position: absolute; top: 7px; left: calc(50% + 6px); min-width: 19px; height: 19px; padding: 0 var(--s-4); border-radius: 999px;
  background: #d13a40; color: #fff; font: 700 .68rem/19px var(--ui); font-style: normal; text-align: center; box-shadow: 0 0 0 2px var(--chrome); }
.ask-slot { overflow: visible; }
/* The mark (design notes 2026-10-05-mark, item 2): app/public/brand/curbaroo-mark.svg as a mask, so it is the file's own shape in
   one color (--mark), never redrawn. The height of the text it sits before; its width the file's 718 by 628. */
.mark-inline { display: inline-block; flex: none; height: 1em; aspect-ratio: 718 / 628; background: var(--mark); vertical-align: -.12em;
  -webkit-mask: url(/brand/curbaroo-mark.svg) center / contain no-repeat; mask: url(/brand/curbaroo-mark.svg) center / contain no-repeat; }
.nav .ask-name { white-space: nowrap; }   /* "Ask Curbaroo", one line (2026-10-05-mark, item 12) */
/* "Ask Smokey" (Build 21 item 1): a long name clips with an ellipsis inside its slot. */
#nav .ask-name { max-width: 100%; min-width: 6.3em; overflow: hidden; text-overflow: ellipsis; }   /* the app's bar only; the deck's copy keeps its words. The
   min-width is "Ask Curbaroo" whole, so at 320 its slot still widens for it as before */
/* The mark is the middle button (design notes 2026-10-05-build15, item 3): the raised circle is the home-screen icon's colors,
   cream roo on purple, the roo the height of the other bar icons; "Ask Curbaroo" under it. */
/* Up a touch (design notes 2026-10-05-build18, item 1): the circle takes the other icons' 23 px of the slot (58 - 35), so its
   bottom edge sits where theirs do and "Ask Curbaroo" sits under it with their 4 px gap, on their line. */
/* Air under it (build20, item 7): the circle's ring and shadow ate those 4 px, so it stands 4 px higher with 4 px more under it
   (8 px box to box; 6 px seen past the 2 px ring when it is the page shown, as the other icons' strokes sit 6 to 10 px over their
   words); circle, mark and label keep their size, the label stays on the others' line. */
.ask-circle { width: 58px; height: 58px; margin-top: calc(var(--s-24) - 63px); margin-bottom: var(--s-4);   /* 23 - 58 - 4 */
  border-radius: 50%; display: grid; place-items: center;
  background: #4a148c; border: 1.5px solid #4a148c;
  box-shadow: 0 0 0 5px var(--chrome), 0 10px 22px -6px rgba(0,0,0,.6); }
/* The mark fills the circle (item 1): the window's frame about 80% of the circle's width (45 of 58 px), its corners just inside
   the round edge; the file's own vector as a mask, so it is crisp at 2x and 3x. */
.nav .ask-circle .ask-mark { height: 41px; background: #f5f3ee; vertical-align: 0; }
.ask-slot[aria-current="page"] .ask-circle { border-color: #f5f3ee; box-shadow: 0 0 0 2px #4a148c, 0 0 0 5px var(--chrome), 0 10px 22px -6px rgba(0,0,0,.6); }

/* Calendar sheet: a bottom sheet on the phone, a centered panel on desktop. */
.sheet.bottom { inset: auto 0 0 0; top: auto; max-height: 88dvh; border-radius: 16px 16px 0 0; border-top: 1px solid var(--line);
  box-shadow: 0 -20px 50px -20px rgba(0,0,0,.7); overflow-y: auto; z-index: 11; }
.cal-sheet { padding: var(--s-12) var(--s-16) calc(var(--s-20) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-8); }
.cal-top { display: grid; grid-template-columns: auto 1fr auto auto; gap: var(--s-8); align-items: center; }
.cal-top b { text-align: center; }
.axis, .wk-day { display: grid; grid-template-columns: 40px 1fr; gap: var(--s-8); }
.ticks { position: relative; height: 12px; font: 500 10px/1 var(--ui); color: var(--muted); }
.ticks i { position: absolute; top: 0; font-style: normal; transform: translateX(-2px); }
.wk { display: grid; gap: var(--s-4); }
.wk-day { padding: var(--s-4) var(--s-4); border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer; align-items: center; text-align: left; }
.wk-day.selected { border-color: var(--brand); background: var(--raised); }
.wk-day.suggest { box-shadow: inset 0 0 0 1.5px var(--green); }
.wk-label { display: grid; justify-items: center; line-height: 1.1; }
.wk-label small { font: 600 .62rem/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.wk-label b { font: 600 1rem/1.2 var(--ui); }
.wk-day.requested .wk-label b { color: var(--amber-ink); }
.lanes { position: relative; display: grid; gap: var(--s-4); }
.lane { position: relative; height: 12px; border-radius: 4px; background: var(--raised); }
.lane.over { background: var(--red-bg); }
.wk-day.selected .lane:not(.over) { background: var(--bg); }
.overlay { position: absolute; inset: 0; pointer-events: none; }
.blk { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--ev); }
.blk.block { background: repeating-linear-gradient(45deg, var(--muted) 0 4px, transparent 4px 8px); }
.blk.hollow { background: none; box-shadow: inset 0 0 0 1.5px var(--ev); opacity: .8; }
.want { position: absolute; top: -2px; bottom: -2px; border: 2px dotted var(--amber); border-radius: 5px; }
.legend { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); font-size: 12px; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: var(--s-8); }
.lg { width: 16px; height: 9px; border-radius: 3px; display: inline-block; }
.lg-want { border: 2px dotted var(--amber); }
.lg-solid { background: #9fe1e7; }
.lg-hollow { box-shadow: inset 0 0 0 1.5px #dc2127; }
.lg-sug { box-shadow: inset 0 0 0 1.5px var(--green); }
.cal-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--s-8); margin-top: var(--s-4); }
@media (min-width: 900px) {
  .sheet.bottom { inset: auto; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 560px; max-height: 86dvh; border-radius: 16px; border: 1px solid var(--line); }
}

.stop { margin: 0 var(--s-12) var(--s-12) var(--s-16); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--red-bg); border: 1px solid var(--red); display: grid; gap: var(--s-4); }
.stop b { font: 600 .72rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }
.stop p { font-size: .9rem; }
.stop-actions { display: grid; grid-template-columns: 1fr; gap: var(--s-8); margin-top: var(--s-8); }
.stop-why { font-size: .82rem; color: var(--muted); margin-top: var(--s-4); }
.stop-reasons { display: grid; gap: var(--s-8); }
.stop-reasons .btn { text-align: left; font-weight: 600; }

/* Connect page (public, one column, three steps as cards). */
.connect { max-width: 520px; margin: 0 auto; padding: calc(var(--s-24) + env(safe-area-inset-top)) var(--s-16) var(--s-40); display: grid; gap: var(--s-16); }
.connect h1 { font: 700 1.5rem/1.2 var(--ui); }
.connect .lead { color: var(--muted); }
.connect .lead b { color: var(--ink); }
.steps { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--s-12); counter-reset: step; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--s-16); display: grid; gap: var(--s-12); }
.steps .step b::before { counter-increment: step; content: counter(step) ". "; color: var(--muted); }
.connect .btn { text-decoration: none; text-align: center; display: block; }
.connect .wide { width: 100%; }
.pw { display: grid; grid-template-columns: 1fr auto; gap: var(--s-8); }
.pw input { font: 500 18px/1.2 var(--ui); padding: var(--s-12) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); min-width: 0; }
.connect form { display: grid; gap: var(--s-12); }
.connect .error { color: var(--red); font-weight: 600; }
.connect .working, .connect .foot { color: var(--muted); font-size: .88rem; }

/* Sign in. */
body.signed-out .nav, body.signed-out .tenant-btn, body.signed-out .mode-strip { display: none; }
.login { max-width: 420px; margin: var(--s-24) auto; display: grid; gap: var(--s-12); }
.login p { color: var(--muted); }
.login input { font-size: 16px; padding: var(--s-12) var(--s-16); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); }
.login .login-msg { color: var(--ink); background: var(--raised); border-radius: 10px; padding: var(--s-12) var(--s-12); }
/* The Sign in page dressed (build25, item 6): no empty header band; the landing page's cream (the light --bg) and type; the mark
   and the app's name over the heading, as the landing page's hero has them; one quiet line to the demo under the button. */
body.signed-out .top { display: none; }
body.signed-out { font-size: 17px; }
/* The mark centred over the name, as the landing's lockup (build26, item 7); the heading and the form under both. */
.login-brand { max-width: 420px; margin: var(--s-32) auto 0; padding: 0 var(--s-4); display: grid; justify-items: center; gap: var(--s-12); }
.login-mark { display: block; width: 64px; height: auto; }
.login-name { font: 800 2rem/1.1 var(--ui); letter-spacing: -.02em; color: var(--brand-soft); }
body.signed-out .page-head { max-width: 420px; margin: var(--s-16) auto 0; }
body.signed-out .login { margin-top: var(--s-12); }
.login .login-demo { margin: var(--s-4) 0 0; text-align: center; font-size: .94rem; }
.login-demo a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-8); color: var(--muted); text-decoration: none; }

/* Rules page. */
.pill-btn { height: 34px; padding: 0 var(--s-12); border-radius: 999px; border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); font-weight: 600; font-size: .82rem; cursor: pointer; }
.rule-add { display: grid; grid-template-columns: 1fr auto; gap: var(--s-8); align-items: end; }
.rule-add textarea { font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); resize: vertical; min-height: 3.2em; }
.rule-add textarea::placeholder { color: var(--muted); }
.rule-preview { background: var(--card); border: 1px solid var(--brand); border-radius: 12px; padding: var(--s-12) var(--s-16); display: grid; gap: var(--s-8); }
.rule-preview .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--brand-soft); }
.rule-preview .draft { margin: 0; }
.rule-text { font-size: 1.02rem; font-weight: 600; }
.clash { font-size: .88rem; padding: var(--s-8) var(--s-12); border-radius: 8px; background: var(--amber-bg); color: var(--ink); }
.rule-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--s-8); }
.rule { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.rule.waiting { border-color: var(--amber-ink); }
.rule-yesno { display: flex; gap: var(--s-8); }
.rule-yesno .btn { padding: var(--s-12) var(--s-16); }
.rule.off .rule-main p { color: var(--muted); }
.rule-main { flex: 1; min-width: 0; display: grid; gap: var(--s-4); }
.rule-main small { font-size: 12px; color: var(--muted); }
.switch { flex: none; width: 51px; height: 44px; padding: 0; border: 0; background: none; position: relative; cursor: pointer; }
/* The system's proportions (item 12.9): the track 51 x 31 drawn in a 44 tall box, the knob 27. */
.switch::before { content: ""; position: absolute; left: 0; right: 0; top: 6.5px; height: 31px; border-radius: 999px; background: var(--line);
  transition: background .15s; }
.switch i { position: absolute; top: 8.5px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.25); transition: left .15s; }
.switch[aria-checked="true"]::before { background: var(--green); }
.switch[aria-checked="true"] i { left: 22px; }

/* Customer line under the name; the Customers tab. */
.cust { font-size: .82rem; color: var(--muted); }
button.cust.link { justify-self: start; padding: 0; border: 0; background: none; cursor: pointer; color: var(--muted); font-weight: 500; text-align: left; }
button.cust.link:hover, button.cust.link:active { color: var(--brand-soft); }
.chev { font-style: normal; font-weight: 700; color: var(--brand-soft); margin-left: var(--s-4); }
.avail .chev { color: inherit; }
.fact dd.phone { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.fact dd.phone .chip { font-family: var(--ui); }
.person { cursor: pointer; }
.card.person::before { background: var(--line); }
.card.person .state { color: var(--muted); }
.card.person.booked-before::before { background: var(--green); }
.card.person.booked-before .state { color: var(--green); }
.person-page { display: grid; gap: var(--s-12); }
.person-page .back { justify-self: start; }
.person-head h2 { margin: 0; font: 700 1.3rem/1.2 var(--ui); }
.person-head p { color: var(--muted); }
.person-head .cust { margin-top: var(--s-4); }
.hist { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-12) var(--s-12); display: grid; gap: var(--s-4); }
.hist-top { display: flex; justify-content: space-between; align-items: center; }
.mono { font: 500 12.5px/1.3 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-meta { font-size: .82rem; color: var(--muted); }
.hist p { margin: var(--s-4) 0 0; font-size: .88rem; }
.hist .src { justify-self: start; padding: 0; border: 0; background: none; font: 600 .78rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; margin-top: var(--s-4); }
.badge { font: 600 .66rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: var(--s-4) var(--s-8); border-radius: 5px; }
.badge.green { color: var(--green); background: var(--green-bg); }
.badge.red { color: var(--red); background: var(--red-bg); }
.badge.amber { color: var(--amber-ink); background: var(--amber-bg); }
.badge.muted { color: var(--muted); background: var(--raised); }

.feed { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--s-12) var(--s-16); display: grid; gap: var(--s-8); }
.feed p { color: var(--muted); font-size: .9rem; }
.feed .btn { text-align: center; text-decoration: none; }
.linkish { justify-self: start; border: 0; background: none; padding: 0; color: var(--muted); font-size: .82rem; text-decoration: underline; cursor: pointer; }

/* After a call. */
.call-out { margin: 0 var(--s-12) var(--s-12) var(--s-16); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--raised); border: 1px solid var(--raised-line); display: grid; gap: var(--s-8); }
.call-out b { font: 600 .72rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.call-opts { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.last-call { margin: 0 var(--s-16) var(--s-8) var(--s-20); font-size: .82rem; color: var(--muted); }

/* Day-one taps. */
.voice .lead { color: var(--muted); }
.voice .step { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--s-12) var(--s-16); display: grid; gap: var(--s-12); }
.v-row { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.v-opt { padding: var(--s-12) var(--s-16); border-radius: 999px; border: 1.5px solid var(--raised-line); background: var(--raised); font-weight: 600; cursor: pointer; min-height: 40px; }
.v-opt[aria-checked="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.voice .hint { color: var(--muted); font-size: .9rem; }
.handoff { margin: var(--s-8) 0 0; color: var(--amber-ink); font-weight: 600; font-size: .9rem; }
.voice textarea { font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); resize: vertical; }
.voice .wide { width: 100%; }
.voice [data-v-done] { margin-top: var(--s-24); }   /* air above Done (design notes, item 14) */

/* Invoices. */
/* An invoice's row (design notes 2026-10-04-e, item 3): the name and amount, "Sent Aug 14" under it, the tag at the right
   edge (Unpaid amber, Paid green, Not sent gray) and Remind under the tag on the unpaid ones. */
.inv { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: var(--s-12) var(--s-12);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.inv-l { display: grid; gap: var(--s-4); min-width: 0; }
.inv-l b { font: 600 1rem/1.3 var(--ui); overflow-wrap: anywhere; }
.inv-r { flex: none; display: grid; justify-items: end; gap: var(--s-4); }
.inv-amt { font-variant-numeric: tabular-nums; }
.inv-tag.unpaid { color: var(--amber-ink); background: var(--amber-bg); }
.inv-tag.paid { color: var(--green); background: var(--green-bg); }
.inv-tag.unsent, .inv-tag.closed { color: var(--muted); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.inv-r .inv-remind { min-height: 44px; padding: 0 var(--s-12); font-size: .85rem; }
/* The open invoice's top row (item 4): the number left, the name right in the link color, the bubble pinned right. */
.inv-who .nl-lead { font: 600 .9rem/1.3 var(--ui); color: var(--muted); }
.inv-who .nl-name.link { padding: 0; border: 0; background: none; font: 700 1.05rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; min-height: 44px; }
.inv-mark { display: flex; justify-content: flex-end; margin-top: calc(-1 * var(--s-4)); }
.inv-mark .btn { min-height: 44px; padding: 0 var(--s-16); }
.inv-sheet .mono, .inv-row .mono { font-variant-numeric: tabular-nums; }
.btn.quiet { background: none; border-color: var(--line); color: var(--muted); font-weight: 600; }
.inv-meta { font-size: .84rem; color: var(--muted); }

.fact dd.chase { color: var(--amber-ink); }
.crew.open, .t-crew.open { color: var(--amber-ink); }
.crew.set, .t-crew.set { color: var(--green); }
.crew a, .t-crew a { color: inherit; }
.t-crew { margin: 0; font-size: .85rem; }

/* Today strip: the day's gigs on top of the Inbox. */
.today { border: 1px solid var(--line); border-radius: 12px; background: var(--card); padding: var(--s-12) var(--s-16); display: grid; gap: var(--s-12); }
.today-head { display: flex; justify-content: space-between; align-items: baseline; }
.today-head b { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
.today-head span { font-size: 12px; color: var(--muted); }
.today-ev { display: grid; gap: var(--s-4); padding-left: var(--s-12); border-left: 3px solid var(--ev); }
.t-top { display: flex; justify-content: space-between; gap: var(--s-12); align-items: baseline; }
.t-top span { font: 500 12.5px/1.3 var(--ui); color: var(--muted); white-space: nowrap; }
.t-place { color: var(--ink); font-size: .9rem; text-decoration: underline; text-decoration-color: var(--quote-stripe); text-underline-offset: 3px; }
.t-phones { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.t-note { margin: 0; font-size: .85rem; color: var(--muted); white-space: pre-wrap; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* Events: the calendar, Google's colors kept. Passed-on events are hollow and muted. */
.events { display: grid; gap: var(--s-8); align-content: start; }
.ev-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); flex-wrap: wrap; }
.seg { display: inline-flex; padding: var(--s-4); border-radius: 10px; background: var(--raised); border: 1px solid var(--line); }
.seg button { border: 0; background: none; padding: var(--s-8) var(--s-16); border-radius: 7px; font-weight: 600; font-size: .85rem; color: var(--muted); cursor: pointer; }
.seg button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.sync { font-size: 12px; color: var(--muted); }
.ev { display: flex; gap: var(--s-12); align-items: flex-start; padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card);
  border: 1px solid var(--line); border-left: 4px solid var(--ev); cursor: pointer; }
.ev-date { flex: none; width: 34px; display: grid; justify-items: center; line-height: 1.1; }
.ev-date small { font: 600 .66rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev-date b { font: 600 1.15rem/1.2 var(--ui); }
.ev-main { flex: 1; min-width: 0; display: grid; gap: var(--s-4); }
.ev-main b { font-weight: 600; overflow-wrap: anywhere; }
.ev-main > span { font: 500 12.5px/1.4 var(--ui); color: var(--muted); overflow-wrap: anywhere; }
.ev-note { margin: var(--s-8) 0 var(--s-4); font-size: .88rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.ev .chip { justify-self: start; margin-top: var(--s-4); }
.ev.passed { border-left-style: dashed; color: var(--muted); }
.ev.passed .ev-main b { text-decoration: line-through; text-decoration-color: var(--muted); }
.ev-tag { flex: none; font: 600 .66rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--red); padding-top: var(--s-4); }
.more-btn { justify-self: center; margin-top: var(--s-8); padding: var(--s-12) var(--s-20); border-radius: 10px; border: 1.5px solid var(--raised-line); background: var(--raised); font-weight: 600; cursor: pointer; }
.empty.small { padding: var(--s-20) var(--s-16); }
.month { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: var(--s-12); }
.month-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s-4) var(--s-4) var(--s-8); }
.month-head b { font-size: 1rem; }
.dow, .grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--s-4); }
.dow span { text-align: center; font: 600 .68rem/1.8 var(--ui); color: var(--muted); }
.day { aspect-ratio: 1 / 1.05; border: 1px solid transparent; border-radius: 8px; background: none; display: grid; grid-template-rows: 1fr auto;
  justify-items: center; padding: var(--s-4) 0 var(--s-8); cursor: pointer; font: 500 .9rem/1 var(--ui); }
.day.outside { color: var(--muted); }
.day.today span:first-child { color: var(--brand-soft); font-weight: 700; }
.day.selected { border-color: var(--brand); background: var(--raised); }
.dots { display: flex; gap: var(--s-4); min-height: 7px; align-items: center; }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev); }
.dot.hollow { background: none; box-shadow: inset 0 0 0 1.5px var(--ev); }
.dot-more { font: 700 .6rem/1 var(--ui); color: var(--muted); font-style: normal; }
.dot.block { background: var(--muted); opacity: .6; }
/* The month as bars (design notes 2026-10-03 evening, item 9): a week is a grid row of seven days; a day's button fills
   its whole column (a tap anywhere in it opens the day) and the bars lie over it without taking the tap. */
.month { padding: var(--s-12) var(--s-8); }
.mgrid { display: grid; }
.mweek { position: relative; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 0; row-gap: var(--s-4);
  border-top: 1px solid var(--line); }
.mday { grid-row: 1 / -1; border: 0; border-left: 1px solid transparent; background: none; padding: var(--s-4) 0 0; cursor: pointer;
  display: flex; justify-content: center; align-items: flex-start; font: 500 .82rem/1 var(--ui); color: var(--ink); min-height: 48px; border-radius: 6px; }
.mday span { display: grid; place-items: center; width: 22px; height: 18px; border-radius: 999px; }
.mday.outside { color: var(--muted); }
.mday.today span { background: var(--brand); color: var(--brand-ink); font-weight: 700; }
.mday.selected { background: var(--raised); }
.mbar { position: relative; z-index: 1; pointer-events: none; margin: 0 var(--s-4); padding: 0 var(--s-4); border-radius: 4px; font: 600 10.5px/17px var(--ui);
  font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: clip; background: var(--ev); color: #0d1a1c; letter-spacing: -.01em; }
.mbar.cont { margin-left: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mbar.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mbar.passed { background: none; box-shadow: inset 0 0 0 1.5px var(--ev); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--ev); }
.mbar.block { background: repeating-linear-gradient(135deg, var(--raised) 0 5px, var(--line) 5px 7px); box-shadow: inset 0 0 0 1px var(--line);
  color: var(--muted); }   /* a blocked bar with its reason (third round, item 6) */
.mmore { position: relative; z-index: 1; pointer-events: none; font: 700 10px/17px var(--ui); font-style: normal; color: var(--muted);
  text-align: center; white-space: nowrap; overflow: hidden; }
.lg-bar { display: inline-block; width: 18px; height: 9px; border-radius: 3px; background: var(--ev); }
.lg-bar.passed { background: none; box-shadow: inset 0 0 0 1.5px var(--ev); }
.lg-bar.block { background: repeating-linear-gradient(135deg, var(--raised) 0 3px, var(--muted) 3px 4px); box-shadow: inset 0 0 0 1px var(--muted); }
/* The month's key (design notes, item 8). */
.month-legend { justify-content: center; padding: var(--s-8) var(--s-4) var(--s-4); border-top: 1px solid var(--line); margin-top: var(--s-8); }
.month-legend .dot-more { font-size: .8rem; }
.empty.small .linkish { justify-self: center; margin-top: var(--s-4); color: var(--brand-soft); }
.sync.stale { color: var(--amber-ink); }

/* Thread view: full screen, theirs left in the quote tone, ours right in brand color. */
@media (max-width: 899px) { body.locked { overflow: hidden; } }
.sheet { position: fixed; inset: 0; z-index: 10; background: var(--bg); display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
.sheet-top { display: flex; align-items: center; gap: var(--s-12); padding: calc(var(--s-12) + env(safe-area-inset-top)) var(--s-12) var(--s-12); background: var(--chrome); border-bottom: 1px solid var(--line); }
.sheet-top .titles { min-width: 0; }
.sheet-top h2 { margin: 0; font: 700 1.05rem/1.2 var(--ui); }
.sheet-top p { color: var(--muted); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Back (design notes 2026-10-04 third round, item 12.10): one rule, 44 tall, the chevron and the word. */
.back { flex: none; min-height: 44px; display: inline-flex; align-items: center; gap: var(--s-4); padding: 0 var(--s-12) 0 var(--s-8); border-radius: 10px;
  border: 1.5px solid var(--raised-line); background: var(--raised); font-weight: 700; cursor: pointer; }
.msgs { flex: 1; overflow-y: auto; padding: var(--s-16) var(--s-12) calc(var(--s-24) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: var(--s-16); }
.msg { display: grid; gap: var(--s-4); max-width: 88%; }
.msg.in { align-self: flex-start; }
.msg.out { align-self: flex-end; justify-items: end; }
.msg .meta { font-size: 12px; color: var(--muted); padding: 0 var(--s-4); }
.msg .bubble { padding: var(--s-12) var(--s-12); border-radius: 12px; font-size: .95rem; line-height: 1.45; overflow-wrap: anywhere; }
.msg.in .bubble { background: var(--raised); border-left: 3px solid var(--quote-stripe); color: var(--ink); }
.msg.out .bubble { background: var(--brand-bg); border: 1px solid var(--brand); }
.msg .text { white-space: pre-wrap; }
.msg dl { margin: 0; display: grid; gap: var(--s-4); }
.msg dt { font-weight: 600; font-size: .82rem; color: var(--muted); }
.msg dd { margin: 0 0 var(--s-4); }
.files { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-8); }
.chip.file::before { content: '\1F4CE  '; }
.chip { display: inline-block; max-width: 100%; margin: var(--s-4) 0; padding: var(--s-4) var(--s-8); border-radius: 999px; border: 1px solid var(--raised-line);
  background: var(--card); color: var(--ink); font-size: .82rem; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* Desktop: two panes, conversation as a third column. Phone stays the design target. */
@media (min-width: 900px) {
  :root { --top-h: 72px; }
  .shell { max-width: none; height: 100dvh; }
  /* The bar moves into the header line: the truck left, the five slots in the middle, the demo's
     button right; Ask is an ordinary slot there. */
  .top { height: var(--top-h); padding: 0 var(--s-20); grid-template-columns: minmax(160px, 1fr) auto minmax(160px, 1fr); grid-template-rows: 72px auto;
    align-items: center; gap: 0 var(--s-20); }
  .head-line { display: contents; }
  .tenant { grid-column: 1; grid-row: 1; }
  .top .demo-pills { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav { position: static; grid-column: 2; grid-row: 1; display: inline-flex; gap: var(--s-4); max-width: none; margin: 0;
    background: none; border: 0; padding: 0; }
  .nav button { height: 40px; padding: 0 var(--s-16); border-radius: 8px; grid-auto-flow: column; gap: var(--s-8); font-size: .85rem; }
  .nav button svg { width: 19px; height: 19px; }
  .nav button[aria-current="page"] { background: var(--raised); }
  .nav button[aria-current="page"]::after { display: none; }
  .ask-circle, .ask-slot[aria-current="page"] .ask-circle { width: auto; height: auto; margin: 0; border: 0; box-shadow: none; background: none; }
  .nav .ask-circle .ask-mark { height: 19px; background: var(--mark); }
  .badge-n { position: static; box-shadow: none; }
  body.practice, body.demo { --top-h: 96px; }
  .mode-strip { grid-column: 1 / -1; grid-row: 2; margin: 0 calc(-1 * var(--s-20)); height: 24px; }
  .view { padding: 0; display: block; height: calc(100dvh - var(--top-h)); }
  .view > .empty { padding-top: 96px; }
  .events { max-width: 760px; margin: 0 auto; padding: var(--s-20) var(--s-16) var(--s-40); height: 100%; overflow-y: auto; }
  .split { display: grid; grid-template-columns: 420px minmax(0, 1fr); height: 100%; }
  .list { overflow-y: auto; border-right: 1px solid var(--line); padding: var(--s-12); display: grid; gap: var(--s-8); align-content: start;
    grid-auto-rows: max-content; }   /* rows keep their height and the list scrolls (a .card clips, so it could shrink) */
  .row { cursor: pointer; }
  .row.selected { border-color: var(--brand); background: var(--raised); }
  .detail { overflow-y: auto; padding: var(--s-24); }
  .detail .card { max-width: 720px; margin: 0 auto; }   /* centered in the pane (design notes, item 15) */
  .row .l .preview { color: var(--muted); opacity: .8; font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet { top: var(--top-h); left: auto; right: 0; width: min(440px, 34vw); max-width: none; margin: 0; z-index: 4; border-left: 1px solid var(--line); }
  .sheet-top { padding-top: var(--s-12); }
  .shell.thread-open .detail { margin-right: min(440px, 34vw); }
  .toast { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Inbox Done (Chris's list, item 1): a line opens in place to what it said. */
.inbox-bar { padding: var(--s-4) var(--s-4) var(--s-12); }
/* Four tabs and the magnifier on one line at phone width (Booked is back: build16, item 10). */
.inbox-bar { flex-wrap: nowrap; gap: var(--s-8); }
.inbox-bar .seg { min-width: 0; }
.inbox-bar .seg button { padding: var(--s-8) var(--s-8); white-space: nowrap; }
.inbox-bar .mag { flex: none; }
@media (max-width: 370px) { .inbox-bar .seg button { padding: var(--s-8) var(--s-4); font-size: .8rem; } .inbox-bar .mag { width: 36px; height: 36px; } }
.done-line { cursor: pointer; flex-wrap: wrap; }
.done-line .said { flex-basis: 100%; display: grid; gap: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
.done-line .said .text { white-space: pre-wrap; font-size: .9rem; line-height: 1.45; }
.done-line .said .src { justify-self: start; padding: 0; border: 0; background: none; font: 600 .82rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; }
.pill-btn.toggle[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-soft); }
.done-line .said .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev-left { display: flex; align-items: center; gap: var(--s-8); }
/* Show original (Chris's list, item 2): quiet link; the bot's version greyed. */
.draft .show-orig { display: block; margin-top: var(--s-8); }
.draft.original .text { opacity: .55; }
.orig-actions { display: flex; gap: var(--s-8); margin-top: var(--s-12); }
.orig-actions .btn { padding: var(--s-8) var(--s-16); min-height: 38px; }
/* Event sheet (Chris's list, item 3). */
.ev-sheet { display: grid; gap: var(--s-12); margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px solid var(--line); cursor: default; }
.ev-sheet .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev-sheet .hint { font-size: .82rem; color: var(--muted); }
.ev-person { display: grid; gap: var(--s-8); }
.ev-sheet .src { justify-self: start; padding: 0; border: 0; background: none; font: 600 .85rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; }
.ev-sheet .facts { margin: 0; padding: 0; }
.ev-link, .ev-notes { display: grid; gap: var(--s-8); }
.ev-link input, .ev-notes textarea { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.ev-notes .btn { justify-self: start; padding: var(--s-8) var(--s-16); min-height: 38px; }
.picks { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.pick { display: grid; text-align: left; gap: 0; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); cursor: pointer; }
.pick span { font-size: .78rem; color: var(--muted); }
.ev-person .cust b { color: var(--ink); }
/* Invoice preview and sheet (Chris's list, items 4 to 6): one layout, used twice. */
.inv-sheet { display: grid; gap: var(--s-12); }
.inv-doc { display: grid; gap: var(--s-12); padding: var(--s-16); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.inv-title { display: grid; gap: var(--s-4); }
.inv-title b { font-size: 1.05rem; }
.inv-title span, .inv-to, .inv-due { font-size: .85rem; color: var(--muted); }
.inv-to b { color: var(--ink); font-weight: 600; }
.inv-row { display: flex; justify-content: space-between; gap: var(--s-12); font-size: .9rem; }
.inv-row.total { border-top: 1px solid var(--line); padding-top: var(--s-8); font-size: 1rem; }
.inv-lines, .inv-totals { display: grid; gap: var(--s-8); }
.inv-line.edit { display: grid; grid-template-columns: 1fr 1fr 36px; gap: var(--s-8); align-items: end; padding-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
.inv-line.edit .li-name { grid-column: 1 / -1; }
.li-f { display: grid; gap: var(--s-4); }
.li-f span { font: 600 .66rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inv-sheet .cal-top { display: flex; align-items: center; gap: var(--s-8); }
.inv-sheet .cal-top b { margin-right: auto; }
.inv-sheet .cal-top .badge { margin: 0; }
.inv-sheet .cal-top .back { width: auto; flex: none; }
.inv-doc input { width: 100%; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-8); border-radius: 8px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.inv-title .li-title { font-weight: 600; }
.inv-due input { width: auto; margin-left: var(--s-8); }
.inv-links { display: grid; gap: var(--s-8); justify-items: start; }
.inv-links .src { padding: 0; border: 0; background: none; font: 600 .88rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; }
.inv-links .btn { padding: var(--s-8) var(--s-16); min-height: 38px; text-decoration: none; }
.inv-chip { justify-self: start; border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); border-radius: 999px; padding: var(--s-8) var(--s-16); font: 600 .85rem/1.2 var(--ui); cursor: pointer; text-align: left; }
.inv-chip.unpaid, .inv-chip.chase { border-color: var(--amber-ink); color: var(--amber-ink); }
.inv-chip.paid { border-color: var(--green); color: var(--green); }
.inv[data-inv-open] { cursor: pointer; }
.owner-sends { align-self: center; font-size: .82rem; color: var(--muted); }
.done-line .said .btn { justify-self: start; padding: var(--s-8) var(--s-16); min-height: 38px; }
.inv-stop { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--amber-bg); color: var(--ink); font-size: .9rem; }
.inv-stop .btn { justify-self: start; padding: var(--s-8) var(--s-16); min-height: 38px; }
.inv-chip.checking { border-style: dashed; color: var(--muted); }

/* Everywhere (design notes, item 17): a pressed state you can feel on a phone, a focus ring you
   can see on desktop. */
.btn, .lever, .pill-btn, .seg button, .v-opt, .nav button, .chip, .inv-chip, .pick, .avail, .icon, .back, .quote,
.card.line, .ev, .inv, .day, .wk-day, .switch, .m-row, .mag, .chat-chip, .role-opt, .act {
  transition: transform 60ms ease-out;
}
.btn:active, .lever:active, .pill-btn:active, .seg button:active, .v-opt:active, .nav button:active, .chip:active,
.inv-chip:active, .pick:active, .avail:active, .icon:active, .back:active, .switch:active, .m-row:active, .mag:active,
.card.line:active, .ev:active, .inv:active, .day:active, .wk-day:active, .quote:active {
  transform: scale(.98);
}
:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; box-shadow: 0 0 0 4px var(--brand-bg); }

/* One chip (item 18): one pill shape and size; the color carries the meaning (amber needs you or
   owes, green done or paid, blue waiting, purple booked, grey quiet). */
.count, .head .state, .badge, .inv-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 var(--s-12); border-radius: 999px;
  font: 600 .76rem/1 var(--ui); letter-spacing: .01em; text-transform: none; white-space: nowrap;
}
.who { align-items: center; }
.head .state { color: var(--amber-ink); background: var(--amber-bg); }
.card.waiting .head .state { color: var(--blue); background: var(--blue-bg); }
.card.yes .head .state, .card.done .head .state { color: var(--green); background: var(--green-bg); }
.card.booked .head .state { color: var(--brand-soft); background: var(--brand-bg); }
.card.held .head .state { color: var(--muted); background: var(--raised); }
.inv-chip { border-width: 1.5px; }

/* Rules page: the truck's levers, read-only (DEMO-SPEC "Rules page: the levers above"). */
.levers-note { margin: 0 var(--s-4) var(--s-8); color: var(--muted); font-size: .82rem; }
.lever-info { display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.lever-info small { font-size: 12px; color: var(--muted); }
.lever-info + .lever-info { margin-top: var(--s-8); }
.done-line .inv-chip { margin-top: var(--s-4); font-size: .78rem; padding: var(--s-4) var(--s-12); }

/* The public demo (DEMO-SPEC.md): the welcome card over the inbox and the four hint dots. */
.welcome { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; padding: var(--s-16);
  background: color-mix(in srgb, var(--chrome) 72%, transparent); backdrop-filter: blur(2px); }
.welcome-card { width: 100%; max-width: 420px; display: grid; gap: var(--s-16); padding: var(--s-24) var(--s-20) var(--s-20); border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.welcome-kicker { font: 500 .74rem/1.2 var(--ui); letter-spacing: .05em; text-transform: uppercase; color: var(--brand-soft); }
.welcome-text { font-size: 1.05rem; line-height: 1.55; }
/* Centered, all of it, and two buttons the same width (design notes 2026-10-03 evening, item 1). */
.welcome-card { text-align: center; justify-items: center; }
.welcome-title { margin: 0; font: 800 1.35rem/1.2 var(--ui); text-wrap: balance; }
.welcome-text { text-wrap: pretty; }
/* The tagline under the app's name (design notes 2026-10-04 third round, item 2), on the welcome and the Tour's top. */
.welcome-tagline, .guide-tagline { margin: calc(-1 * var(--s-8)) 0 0; font: 700 1.05rem/1.3 var(--ui); color: var(--muted); }
.guide-tagline { margin: calc(-1 * var(--s-4)) 0 var(--s-4); }
.welcome-btns { display: grid; gap: var(--s-8); width: min(100%, 280px); margin-top: var(--s-4); }
.welcome-btns .btn { width: 100%; }
/* The deck (design notes 2026-10-04-e, item 1): the cards across, a swipe snapping card to card, the dots under it (with a chevron
   each side since build22, item 3; Next until then);
   each card a live close-up with its line (build16, item 6: deck.css), the last the mark and the truck's name. The track
   scrolls sideways with no scrollbar showing. */
.welcome-card.deck { gap: var(--s-12); padding: var(--s-20) 0 var(--s-16); overflow: hidden; }
.deck-track { width: 100%; display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; outline: none; }
.deck-track::-webkit-scrollbar { display: none; }
.deck-card { flex: 0 0 100%; margin: 0; padding: var(--s-4) var(--s-20); scroll-snap-align: center; scroll-snap-stop: always;
  display: grid; justify-items: center; align-content: start; gap: var(--s-12); }
.deck-card figcaption { max-width: 320px; min-height: 2.8em; font: 600 1.05rem/1.4 var(--ui); text-wrap: balance; }
.deck-card.deck-end { align-content: center; }
/* The welcome card (build20, item 1): the deck's first, its own top. The mark over the title, then the tagline, the paragraph and
   the demo line, centered in the card; nothing moves (no animation), so reduce motion shows it as it is. */
.deck-card.deck-welcome { align-content: center; gap: var(--s-12); }
.deck-welcome .welcome-mark { display: block; height: 56px; margin: 0; }
.deck-welcome .welcome-title { max-width: 320px; font: 800 1.5rem/1.2 var(--ui); color: var(--ink); }
.deck-welcome .welcome-tagline { max-width: 320px; margin: 0; font: 700 1.1rem/1.35 var(--ui); color: var(--brand-soft); text-wrap: balance; }
.deck-welcome .welcome-text { max-width: 320px; margin: 0; font: 500 1rem/1.5 var(--ui); color: var(--ink); text-wrap: pretty; }
.deck-welcome .welcome-demo { max-width: 320px; margin: 0; font: 500 .9rem/1.45 var(--ui); color: var(--muted); text-wrap: pretty; }
/* Name your truck (design notes 2026-10-05-build15, item 2; build16 item 1): one box on the last card, prefilled. */
.deck-name { display: grid; gap: var(--s-8); width: 100%; max-width: 320px; margin-top: var(--s-8); text-align: left; }
.deck-name span { font: 600 .9rem/1.3 var(--ui); color: var(--muted); }
.deck-name input { min-height: 48px; padding: 0 var(--s-12); border: 1.5px solid var(--field-line); border-radius: 12px; background: var(--card, #fff);
  color: var(--ink); font: 600 1.05rem/1 var(--ui); }
.deck-name input:focus { outline: none; border-color: var(--brand); }
/* Two boxes (design notes 2026-10-05-build18, item 9; the line under them moved above them in build22, item 5). */
.deck-names { display: grid; gap: var(--s-8); width: 100%; max-width: 320px; justify-items: stretch; }
.deck-names .deck-name { margin-top: 0; max-width: none; }
/* The name card, top to bottom (build20, item 6; build22, item 5): the mark bigger, the heading, one line a size up, the boxes,
   Get started right under them in the card's flow (not the deck's foot), clear of the home bar (the welcome pads by the safe area). */
.deck-card.deck-end { gap: var(--s-8); }
.deck-end .deck-heading { margin: var(--s-4) 0 0; font: 800 1.35rem/1.2 var(--ui); color: var(--ink); }
.deck-end .deck-lead { min-height: 0; font: 600 1.15rem/1.4 var(--ui); }
.deck-end .deck-names { margin-top: var(--s-4); }
.deck-end .deck-go { width: 100%; min-height: 48px; margin-top: var(--s-4); scroll-margin: var(--s-16); }
/* Name them both for me (build25, item 7): a plain button under Let's go, the same width, 44 tall, outlined in the field line, ink words. */
.deck-end .deck-name-me { width: 100%; min-height: 44px; padding: 0 var(--s-12); background: transparent; border-color: var(--field-line); color: var(--ink); }
/* The chevrons beside the dots (build22, item 3; Next until then): 44 pt, full ink; a hidden one keeps its room, unseen, so the
   dots never shift as the first or the last card lands. */
.deck-chev { flex: none; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 22px; background: none; color: var(--ink);
  cursor: pointer; display: grid; place-items: center; }
.deck-chev[hidden] { display: grid !important; visibility: hidden; }
.deck-chev svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.deck-chev:active { transform: scale(.92); }
.welcome [data-welcome-go]:disabled { opacity: .45; cursor: default; }
.deck-card .deck-mark { display: block; height: 112px; width: 112px; aspect-ratio: 1; border: 0; border-radius: 26px; }   /* bigger (build20, 6) */
.deck-dots { display: flex; justify-content: center; align-items: center; margin: calc(-1 * var(--s-8)) 0; }
.deck-dot { width: 44px; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.deck-dot i { width: 8px; height: 8px; border-radius: 4px; background: var(--muted); opacity: .45; transition: width .2s ease, opacity .2s ease; }
.deck-dot[aria-current] i { width: 18px; background: var(--brand); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .deck-dot i { transition: none; } }
/* The demo's one pill (design notes 2026-10-04, item 3): the Tour with the compass (second round, item 17), in the "Needs you" amber, the only colored
   thing in the header; the truck's name has the rest of the line and wraps to a second before anything trails off. Full size
   again (third round, item 3): a 44 px button, the pill drawn 36 tall inside it. */
.demo-guide { flex: none; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.demo-guide .dg-pill { height: 36px; padding: 0 var(--s-16) 0 var(--s-12); border-radius: 999px; background: var(--amber); color: #1d1405;
  font: 800 .92rem/1 var(--ui); white-space: nowrap; display: inline-flex; align-items: center; gap: var(--s-8); }
:root[data-theme="light"] .demo-guide .dg-pill { background: #ffb224; color: #1d1405; }
.demo-guide svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.demo-pills { flex: none; display: flex; align-items: center; gap: var(--s-4); }
/* The theme slider (third round, item 3; the moon until then), the demo only: small, left-right, a sun at the left end and a
   moon at the right, the knob over the theme showing. A 44 px hit box around a 44 x 26 track. */
.demo-theme { flex: none; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer;
  display: inline-grid; place-items: center; }
.ts-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: var(--raised); border: 1px solid var(--raised-line); }
.ts-end, .ts-knob { position: absolute; top: 50%; display: grid; place-items: center; font-style: normal; }
.ts-end { width: 22px; height: 22px; margin-top: calc(-1 * var(--s-12)); opacity: .7; }
.ts-sun { left: 1px; }
.ts-moon { right: 1px; }
.ts-knob { left: 1px; width: 22px; height: 22px; margin-top: calc(-1 * var(--s-12)); border-radius: 50%; background: var(--chrome); color: var(--amber-ink);
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s ease; }
.demo-theme.dark .ts-knob { transform: translateX(18px); color: var(--brand-soft); }
.ts-track svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: reduce) { .ts-knob { transition: none; } }
.demo-pills:not(:has(:not([hidden]))) { display: none; }
/* Restart demo in the header (build20, item 4; a pill since design notes 2026-10-06-build23, item 5): outlined, not amber, the
   Tour pill's height (a 44 px button, the pill drawn 36 tall inside it) and its text size. It and the slider never shrink: the
   rig's name gives way first, with its ellipsis. */
.demo-start-over { flex: none; height: 44px; padding: 0; border: 0; background: none; cursor: pointer; display: inline-flex; align-items: center; }
.demo-start-over .ro-pill { height: 36px; padding: 0 var(--s-8);   /* 8, not 12: "Demo Rig" stays whole at 390 */ border-radius: 999px; border: 1.5px solid var(--field-line); background: transparent;
  color: var(--ink); font: 800 .92rem/1 var(--ui); white-space: nowrap; display: inline-flex; align-items: center; }
.demo-start-over:disabled { opacity: .45; }
/* The Guide, full screen (design notes 2026-10-04, item 2): "Guide" and the book in the pill's amber, the sections, and
   Continue to app pinned to the bottom while the guide scrolls behind it. Over the header and the bar. */
.guide-page { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; background: var(--bg); }
.guide-page[hidden] { display: none; }
body.guide-open { overflow: hidden; }
.gp-top { flex: none; padding: calc(var(--s-16) + env(safe-area-inset-top)) var(--s-16) var(--s-12); background: var(--chrome); border-bottom: 1px solid var(--line); }
.gp-title { margin: 0; display: flex; align-items: center; gap: var(--s-8); font: 800 1.2rem/1.2 var(--ui); color: var(--amber-ink); }
.gp-title svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
/* The end of the Tour clears the pinned bar: its height (12 + the chevron's 24 + 50 + 16) and a little more, so the last
   line reads above the button (review of the 2026-10-04 second round; the chevron since 2026-10-04-e, item 1). */
.gp-body.guide-body { width: 100%; max-width: 640px; margin: 0 auto; padding-bottom: calc(102px + var(--s-32) + env(safe-area-inset-bottom)); }
.gp-body .guide-sec:first-child h3 { font-size: 24px; }
.gp-foot { position: absolute; left: 0; right: 0; bottom: 0; padding: var(--s-12) var(--s-16) calc(var(--s-16) + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--bg) 40%); display: flex; justify-content: center; pointer-events: none; }
.gp-foot .btn { width: min(100%, 420px); min-height: 50px; font-size: 1.02rem; pointer-events: auto; box-shadow: var(--shadow); }
/* The Tour scrolls with no visible scrollbar; a small chevron over Continue bounces gently until the first scroll
   (design notes 2026-10-04-e, item 1). */
.gp-body { scrollbar-width: none; }
.gp-body::-webkit-scrollbar { display: none; }
.gp-foot { flex-direction: column; align-items: center; gap: var(--s-4); }
.gp-more { display: grid; place-items: center; width: 28px; height: 20px; color: var(--muted); animation: gp-bounce 1.8s ease-in-out infinite; }
.gp-more svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.guide-page.scrolled .gp-more { display: none; }
@keyframes gp-bounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .gp-more { animation: none; } }
/* The inbox's rows before it answers (design notes 2026-10-04, item 0): the page shows at once and fills in. */
.sk-rows { display: grid; gap: var(--s-8); }
.sk-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); height: 58px; padding: 0 var(--s-16);
  border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.sk-row > div { display: grid; gap: var(--s-8); flex: 1; }
.sk-row i { display: block; height: 10px; border-radius: 5px; background: var(--raised-line); opacity: .55; animation: sk-pulse 1.4s ease-in-out infinite; }
.sk-row > div i:first-child { width: 46%; height: 12px; }
.sk-row > div i:last-child { width: 68%; }
.sk-row > i { width: 64px; }
@keyframes sk-pulse { 50% { opacity: .25; } }
/* The sample message (design notes 2026-10-04, item 4), a slim row since the third round (item 4): right under the header,
   above Open / Done / Set aside, the height of the demo bar, not a card. The headline in the normal small text, the demo line
   in the lightest under it, the button on the right. It never moves. */
.demo-sample { container-type: inline-size; display: flex; align-items: center; justify-content: space-between; gap: var(--s-12);
  margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) 0; padding: var(--s-4) var(--s-16); min-height: 52px; background: var(--chrome); border-bottom: 1px solid var(--line); }
.ds-words { min-width: 0; display: grid; gap: 0; }
.demo-sample b { font: 600 14px/1.25 var(--ui); color: var(--ink); }
.demo-sample .btn { flex: none; min-height: 44px; padding: 0 var(--s-16); font-size: 14px; white-space: nowrap; }
/* The demo line only when it fits on its one line under the headline; else dropped (a phone drops it). */
.demo-sample p { display: none; font-size: 12px; line-height: 1.3; color: var(--muted); white-space: nowrap; }
@container (min-width: 470px) { .demo-sample p { display: block; } }
.split .demo-sample { margin: 0 0 var(--s-8); }
.btn.sending, .btn.sending:disabled { opacity: .55; cursor: default; }
/* The banner (design notes 2026-10-04, item 5): slides down from the top over everything; fades after a few seconds. */
.banner { position: fixed; z-index: 60; top: calc(8px + env(safe-area-inset-top)); left: 50%; width: min(calc(100% - 20px), 460px);
  display: flex; align-items: stretch; overflow: hidden; border-radius: 14px; background: var(--raised); border: 1px solid var(--raised-line);
  box-shadow: var(--shadow); transform: translate(-50%, calc(-100% - 24px)); transition: transform .3s ease-out, opacity .35s ease; }
.banner::before { content: ""; flex: none; width: 4px; background: var(--amber); }
.banner.in { transform: translate(-50%, 0); }
.banner.out { opacity: 0; }
.bn-body { flex: 1; min-width: 0; display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-4) var(--s-12) var(--s-12); border: 0; background: none; color: var(--ink);
  text-align: left; font: inherit; cursor: pointer; }
.bn-body b { font: 800 .95rem/1.25 var(--ui); }
.bn-body span { color: var(--muted); font-size: .9rem; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.bn-x { flex: none; width: 44px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; line-height: 1; cursor: pointer; }
.card.incoming { animation: incoming-in .25s ease-out; }
.card.incoming::before { background: var(--brand); }
@keyframes incoming-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .card.incoming { animation: none; } }
/* The Guide (demo only): one column over the screen, in the cards' type (name line, draft text). */
.guide-body { flex: 1; overflow-y: auto; padding: var(--s-20) var(--s-16) calc(var(--s-32) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-24); align-content: start; }
.guide-sec { display: grid; gap: var(--s-8); }
.guide-sec h3 { margin: 0; font: 700 18px/1.25 var(--ui); }
.guide-sec p { font-size: 17px; line-height: 1.5; overflow-wrap: anywhere; }
/* The demo's closing lines and its three buttons, the menu's three (design notes 2026-10-03 evening, item 2). */
.guide-close { padding-top: var(--s-16); border-top: 1px solid var(--line); }
.guide-close p { font-size: 15.5px; color: var(--muted); }
.guide-close .guide-end { gap: var(--s-8); padding-top: var(--s-8); }



/* ── The menu (the three lines): a page list sliding in from the side over the screen; tapping
   outside it, or a row, closes it (design notes 2026-10-02, item 1). ── */
.scrim { position: fixed; inset: 0; z-index: 40; background: rgba(4, 3, 8, .62); opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.scrim.open { opacity: 1; pointer-events: auto; }
.menu { position: fixed; z-index: 41; top: 0; bottom: 0; right: 0; width: 86%; max-width: 420px; background: var(--bg);
  border-left: 1px solid var(--line); box-shadow: -18px 0 40px -18px rgba(0,0,0,.9);
  transform: translateX(104%); visibility: hidden; transition: transform .28s cubic-bezier(.2,.8,.2,1), visibility 0s linear .28s;
  overflow-y: auto; padding: calc(var(--s-16) + env(safe-area-inset-top)) var(--s-12) calc(var(--s-24) + env(safe-area-inset-bottom)); display: grid; gap: var(--s-4); align-content: start; }
.menu.open { transform: none; visibility: visible; transition: transform .28s cubic-bezier(.2,.8,.2,1); }
.m-row { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; column-gap: var(--s-12); width: 100%; border: 0;
  background: none; text-align: left; padding: var(--s-8); border-radius: 10px; cursor: pointer; color: var(--ink); font: 600 1rem/1.25 var(--ui); text-decoration: none; }
.m-row[aria-current="page"] { background: var(--raised); }
.m-row .chev { color: var(--muted); font-size: 1.1rem; }
/* The short line under Add to your home screen, the browser named (design notes 2026-10-04 second round, item 13). */
.m-row .m-sub { display: block; margin-top: var(--s-4); font: 500 .8rem/1.3 var(--ui); color: var(--muted); }
.m-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--c);
  background: color-mix(in srgb, var(--c) 17%, transparent); }
.m-tile svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.m-label { margin: var(--s-20) var(--s-16) var(--s-8); font: 600 .66rem/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
/* Inset grouped cards (design notes 2026-10-04 third round, item 8): a group's rows in one rounded card, hairlines between
   them from the text's edge, a gap between cards; Coming next the last card, a shade lighter. Settings and Profile too. */
.m-card { display: grid; min-height: max-content; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.menu { grid-auto-rows: max-content; }
.m-card .m-row { border-radius: 0; padding: var(--s-12) var(--s-12); min-height: 52px; }
.m-card .m-row, .m-card .m-row-pair { position: relative; }
.m-card .m-row::before, .m-card .m-row-pair::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--line); }
.m-card .m-row-pair .m-row::before, .m-card > :first-child::before, .m-card > .m-demo:first-child > .m-row:first-child::before { display: none; }
.m-card .m-demo { display: grid; gap: 0; padding: 0; margin: 0; border: 0; }
.m-card .m-row-pair { padding-right: var(--s-8); }
.m-card-works { background: color-mix(in srgb, var(--card) 55%, var(--bg)); }
.m-card-works .m-row { padding-block: var(--s-12); }
.m-works { cursor: default; align-items: start; color: var(--muted); grid-template-columns: 34px 1fr; }
.m-works .m-tile { color: var(--muted); background: var(--raised); opacity: .8; margin-top: 0; }
.m-works b { font: 600 1rem/1.25 var(--ui); display: block; }
.m-works span { display: block; margin-top: var(--s-4); font: 400 .82rem/1.4 var(--ui); color: var(--muted); }
.works-note { position: absolute; right: 8px; top: 8px; padding: var(--s-4) var(--s-12); border-radius: 999px; background: var(--ink); color: var(--bg);
  font: 700 .72rem/1 var(--ui); animation: works-note 1s ease forwards; }
@keyframes works-note { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* ── Ask (over the screen, the bar stays) and Help (a page): between the header and the bar ── */
/* Under the header (z 5), so the raised Ask circle stays on top of them. */
.chat-screen, .chat-page { position: fixed; z-index: 4; left: 0; right: 0; max-width: 560px; margin: 0 auto; top: var(--head-h, 48px);
  bottom: calc(var(--tabs-h) + env(safe-area-inset-bottom)); background: var(--bg); display: flex; flex-direction: column; }
.chat-screen:not([hidden]) { animation: ask-up .26s cubic-bezier(.2,.8,.2,1); }
@keyframes ask-up { from { transform: translateY(40px); opacity: 0; } }
.chat-thread { flex: 1; overflow-y: auto; padding: var(--s-12) var(--s-16) var(--s-16); display: flex; flex-direction: column; gap: var(--s-12); }
.clear-hist { align-self: center; border: 0; background: none; color: var(--muted); font: 600 .74rem/1 var(--ui); text-decoration: underline; cursor: pointer; padding: var(--s-4); }
.chat-day { align-self: center; font: 600 .66rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: var(--s-8) 0 var(--s-4); }
.chat-thread .me { align-self: flex-end; max-width: 82%; padding: var(--s-8) var(--s-12); border-radius: 16px 16px 4px 16px; background: var(--brand); color: var(--brand-ink);
  font-size: .95rem; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-thread .bot { align-self: flex-start; max-width: 88%; padding: var(--s-12) var(--s-12); border-radius: 16px 16px 16px 4px; background: var(--card); border: 1px solid var(--line);
  font-size: .95rem; line-height: 1.45; display: grid; gap: var(--s-8); overflow-wrap: anywhere; }
.chat-thread .bot.k-thinking, .chat-thread .bot.k-nothing, .chat-thread .bot.k-off_topic { color: var(--muted); }
.chat-thread .bot.k-error, .chat-thread .bot.k-spent { border-color: var(--amber-ink); }
.chat-thread .src, .chat-chip { justify-self: start; display: inline-flex; align-items: baseline; gap: var(--s-8); padding: var(--s-4) var(--s-12); border-radius: 999px;
  border: 1px solid var(--raised-line); background: var(--raised); color: var(--brand-soft); font: 600 .8rem/1.2 var(--ui); cursor: pointer; text-align: left; }
.chat-thread .src small { font: 500 .66rem/1 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.chat-chip { border-color: var(--brand); }
.compose { display: flex; align-items: flex-end; gap: var(--s-8); padding: var(--s-12) var(--s-12) var(--s-40); background: var(--chrome); border-top: 1px solid var(--line); }
/* The raised Ask circle pokes ~30px above the bar: the compose line keeps clear of it. */
.compose textarea { flex: 1; min-width: 0; resize: none; min-height: 46px; max-height: 140px; padding: var(--s-8) var(--s-12); border-radius: 14px; border: 1.5px solid var(--brand);
  background: var(--raised); font-size: 16px; line-height: 1.35; caret-color: var(--brand-soft); outline: none; }
.compose textarea::placeholder { color: var(--muted); }
.compose textarea:focus-visible, .narrow input:focus-visible { outline: none; }
.send-btn { flex: none; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--brand); color: #fff; display: grid; place-items: center; cursor: pointer; }
.send-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.help-page .compose { padding-bottom: var(--s-12); }
.help-page .compose:last-child { padding-bottom: var(--s-40); }
.help-top { padding: var(--s-12) var(--s-16) var(--s-12); display: grid; gap: var(--s-12); border-bottom: 1px solid var(--line); }
.help-top .page-head { padding: 0; min-height: 0; }
.help-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.help-btns .btn { min-height: 40px; padding: var(--s-8) var(--s-8); font-size: .86rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); }
.help-btns .btn[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-soft); }
.help-btns svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.fb-box { display: grid; gap: var(--s-8); }
.fb-box textarea { width: 100%; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--brand); background: var(--raised); font-size: 16px; resize: vertical; }
.fb-actions, .tf-actions { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.fb-actions .btn, .tf-actions .btn { padding: var(--s-8) var(--s-16); min-height: 40px; }
.guide-line { display: flex; justify-content: center; padding: 0 var(--s-12) var(--s-40); background: var(--chrome); }
.guide-line .linkish { color: var(--brand-soft); font-weight: 600; font-size: .86rem; }

/* ── Settings ── */
.settings-page { display: grid; gap: var(--s-12); align-content: start; }
.group { display: grid; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.group-title { font: 600 .7rem/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: var(--s-8) var(--s-4) calc(-1 * var(--s-4)); }
.group-title small { font: inherit; opacity: .7; margin-left: var(--s-4); }
.set { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-4) var(--s-12); padding: var(--s-12) var(--s-16); border: 0; border-top: 1px solid var(--line);
  min-height: 52px; background: none; text-align: left; width: 100%; color: var(--ink); }
.group > .set:first-child { border-top: 0; }
.set b { font: 600 .95rem/1.3 var(--ui); }
.set b small { font-weight: 500; color: var(--muted); }
.set > span { grid-column: 1; color: var(--muted); font-size: .84rem; line-height: 1.35; overflow-wrap: anywhere; }
.set .role, .set .act { grid-column: 2; grid-row: 1 / span 2; }
.set .role { font: 600 .7rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: var(--s-8) var(--s-8); }
.set.member[role="button"] { cursor: pointer; }
/* A person is a row that opens (design notes 2026-10-05-build18, item 4): the head is one button (name; position and rate;
   their hours in the period), the chevron at its right; open, the facts or the owner's form unfold under it in place. */
.set.trow { display: block; padding: 0; }
.trow-head { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-12); width: 100%; min-height: 52px; padding: var(--s-12) var(--s-16);
  border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.trow-l { display: grid; gap: var(--s-4); min-width: 0; }
.trow-l b { font: 600 .95rem/1.3 var(--ui); }
.trow-l b small { font-weight: 500; color: var(--muted); }
.trow-pos { color: var(--ink); font-size: .86rem; }
.trow-hours { color: var(--muted); font-size: .82rem; }
.trow-chev { width: 22px; height: 22px; color: var(--muted); }
.trow-chev svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.trow.open { background: var(--raised); }
.trow .team-form { border-top: 1px solid var(--line); }
.trow .team-form textarea { padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--card); font: 400 16px/1.4 var(--ui);
  color: var(--ink); resize: vertical; }
.tf-login { color: var(--muted); font-size: .86rem; margin: 0; overflow-wrap: anywhere; }
.tm-open { display: grid; gap: var(--s-8); padding: var(--s-4) var(--s-16) var(--s-16); border-top: 1px solid var(--line); }
.tm-facts { margin: var(--s-8) 0 0; padding: 0; font-size: .9rem; }
.tm-hours { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: 600 .92rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; }
.tm-page { justify-self: start; min-height: 44px; padding: 0; border: 0; background: none; font: 500 .86rem/1.3 var(--ui); color: var(--muted); cursor: pointer; }
.set.confirm { grid-template-columns: 1fr; gap: var(--s-12); background: var(--raised); }
.set.confirm > span { color: var(--ink); }
.act { border: 1.5px solid var(--raised-line); background: var(--raised); border-radius: 999px; padding: var(--s-8) var(--s-16); font: 600 .84rem/1 var(--ui);
  color: var(--ink); cursor: pointer; white-space: nowrap; }
.set > .act:only-child { grid-column: 1 / -1; grid-row: auto; justify-self: start; }
.act.go { background: var(--brand); border-color: var(--brand); color: #fff; }
.act.quiet { color: var(--red); }
.mode { display: inline-flex; align-items: center; gap: var(--s-8); }
.mode::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.mode.live::before { background: var(--green); }
.truckhead { display: grid; grid-template-columns: 48px 1fr auto; gap: var(--s-4) var(--s-12); align-items: center; padding: var(--s-16); }
.truckhead .avatar { grid-column: 1; grid-row: 1 / span 2; font-style: normal; width: 48px; height: 48px; border-radius: 12px; background: var(--brand-bg); color: var(--brand-soft);
  display: grid; place-items: center; font: 700 1.05rem/1 var(--ui); }
.truckhead b { font: 700 1.1rem/1.2 var(--ui); }
.truckhead > span { grid-column: 2; color: var(--muted); font-size: .86rem; }
.truckhead b { grid-column: 2; }
.truckhead .act { grid-column: 3; grid-row: 1 / span 2; }
.pick-truck[aria-current="true"] b { color: var(--brand-soft); }
.team-form { display: grid; gap: var(--s-12); padding: var(--s-16); border-top: 1px solid var(--line); background: var(--raised); }
.team-form label { display: grid; gap: var(--s-4); font: 600 .78rem/1.2 var(--ui); color: var(--muted); }
.team-form input { padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--card); font-size: 16px; color: var(--ink); }
.team-form .rate { display: flex; align-items: center; gap: var(--s-8); color: var(--ink); font-weight: 500; }
.team-form .rate input { width: 110px; }
.tf-who { font: 700 1rem/1.2 var(--ui); }
.roles { display: grid; gap: var(--s-8); }
.role-opt { display: grid; gap: var(--s-4); text-align: left; padding: var(--s-12) var(--s-12); border-radius: 10px; border: 1.5px solid var(--line); background: var(--card); cursor: pointer; color: var(--ink); }
.role-opt b { font: 600 .92rem/1.2 var(--ui); display: flex; align-items: center; gap: var(--s-8); }
.role-opt span { font-size: .8rem; color: var(--muted); }
.role-opt[aria-checked="true"] { border-color: var(--brand); background: var(--brand-bg); }
.role-opt:disabled { opacity: .55; cursor: default; }
.soon { font: 600 .6rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; padding: var(--s-4) var(--s-8); border-radius: 999px; border: 1px solid var(--line); color: var(--muted); }
.team-note { font-size: .88rem; color: var(--amber-ink); }
.btn.danger { color: var(--red); }

@media (min-width: 900px) {
  .chat-screen { top: var(--top-h); bottom: 0; left: auto; right: 0; width: min(440px, 34vw); max-width: none; margin: 0; border-left: 1px solid var(--line); z-index: 6; }
  .chat-page { top: var(--top-h); bottom: 0; max-width: 760px; }
  .compose, .help-page .compose:last-child, .guide-line { padding-bottom: var(--s-16); }
  .settings-page, .help-page { height: auto; }
}

/* The demo's top of the menu (item 4): Request early access, Help us make it better, the share line. */
.m-top { display: grid; gap: var(--s-12); padding: var(--s-4) var(--s-4) var(--s-16); margin-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
.m-top-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.m-top-btns .btn { min-height: 46px; padding: var(--s-8) var(--s-8); font-size: .84rem; line-height: 1.2; }
.m-share { display: flex; align-items: center; gap: var(--s-8); border: 0; background: none; padding: var(--s-4); color: var(--brand-soft);
  font: 600 .9rem/1.2 var(--ui); cursor: pointer; justify-self: start; }
.m-share svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.access-page { display: grid; gap: var(--s-16); align-content: start; }
.access-page .lead { color: var(--muted); font-size: .95rem; line-height: 1.5; padding: 0 var(--s-4); }
.access-form { display: grid; gap: var(--s-12); padding: var(--s-16); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.access-form label { display: grid; gap: var(--s-4); font: 600 .78rem/1.2 var(--ui); color: var(--muted); }
.access-form input { padding: var(--s-12) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); font-size: 16px; color: var(--ink); }
.access-form .btn { min-height: 46px; }
/* Terms and Privacy (design notes 2026-10-05, item 4): one small line under the early access form and the demo's Help. */
.legal-links { display: flex; justify-content: center; align-items: center; gap: var(--s-12); margin: var(--s-12) 0 0; font-size: .9rem; color: var(--muted); }
.legal-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); color: var(--muted); }
.access-done { padding: var(--s-24) var(--s-16); border-radius: 12px; background: var(--green-bg); color: var(--green); text-align: center; font-size: 1rem; }
.access-done span { display: block; margin-top: var(--s-8); color: var(--ink); font-size: 15px; }
.guide-end { display: grid; padding-top: var(--s-4); }
.guide-end .btn { min-height: 46px; }

/* Contact (item 5): one button, a short menu under it. */
.contact-btn { display: inline-flex; align-items: center; gap: var(--s-8); padding: var(--s-4) var(--s-12); border-radius: 999px; border: 1.5px solid var(--raised-line);
  background: var(--raised); color: var(--ink); font: 600 .84rem/1.2 var(--ui); cursor: pointer; margin-left: var(--s-12); vertical-align: middle; }
.contact-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.contact-btn[aria-expanded="true"] { border-color: var(--brand); color: var(--brand-soft); }
.contact-line .contact-btn, .t-phones .contact-btn { margin-left: 0; }
.contact-line { padding-top: var(--s-8); }
.contact-menu { position: absolute; z-index: 25; min-width: 236px; max-width: calc(100vw - 24px); padding: var(--s-8); border-radius: 14px; background: var(--raised);
  border: 1px solid var(--raised-line); box-shadow: 0 18px 40px -12px rgba(0,0,0,.9); display: grid; }
.contact-menu a, .contact-menu button { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 0 var(--s-12); border: 0; background: none; text-align: left;
  padding: var(--s-12); border-radius: 9px; color: var(--ink); font: 600 .95rem/1.2 var(--ui); cursor: pointer; text-decoration: none; }
.contact-menu small { grid-column: 2; color: var(--muted); font: 400 .78rem/1.3 var(--ui); overflow-wrap: anywhere; }
.contact-menu > * + * { border-top: 1px solid var(--line); border-radius: 0; }
.contact-menu svg { grid-row: 1 / span 2; width: 19px; height: 19px; fill: none; stroke: var(--brand-soft); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
/* Where you stand, first in the menu (design notes 2026-10-03 evening, item 10). */
.contact-menu .cm-head { margin: 0; padding: var(--s-8) var(--s-12) var(--s-8); font: 600 .8rem/1.3 var(--ui); color: var(--muted); letter-spacing: .01em; }
.cust-reach { color: var(--muted); font-size: .88rem; overflow-wrap: anywhere; }
.person-page .t-phones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-8) var(--s-12); }

/* Rigs (item 2): the page, the tag on an event, the rig on the event sheet. */
.rigs-page { display: grid; gap: var(--s-12); align-content: start; }
.rigs-page .lead { color: var(--muted); font-size: .92rem; line-height: 1.45; padding: 0 var(--s-4); }
.rig-row { grid-template-columns: 1fr auto; }
.rig-row .rig-name { grid-row: 1 / span 2; min-width: 0; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--line); background: var(--raised);
  font: 600 1rem/1.2 var(--ui); color: var(--ink); }
.rig-acts { display: flex; align-items: center; gap: var(--s-8); grid-row: 1 / span 2; }
.rig-acts .icon:disabled, .rig-acts .act:disabled { opacity: .35; cursor: default; }
.rig-add { grid-template-columns: 1fr auto; }
.rig-add input { min-width: 0; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px dashed var(--field-line); background: none; font-size: 16px; color: var(--ink); }
.rig-tag { font: 600 .7rem/1 var(--ui); letter-spacing: .04em; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: var(--s-4) var(--s-8); margin-left: var(--s-8); vertical-align: middle; }
.ev-rig { display: grid; gap: var(--s-8); }
.ev-rig .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rig-opts { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.rig-opts .pick.on { border-color: var(--brand); color: var(--brand-soft); background: var(--brand-bg); }

/* The inbox as rows that open in place (design notes 2026-10-02 evening, item 5): one row per request,
   more air between them than the cards had; tap one and it drops open where it is, one at a time. */
.rows { display: grid; gap: var(--s-12); align-content: start; }
.rows > .divider { padding-top: var(--s-16); }
.card.fold { padding-top: var(--s-16); padding-bottom: var(--s-16); cursor: pointer; }
.card.fold b { font-size: 1rem; }
.card.fold .state { font-size: .74rem; }
.card.open .head[data-fold] { cursor: pointer; }
/* A hard one (item 3): a safe holding reply, and this flag instead of a blank. */
.careful { margin: var(--s-8) 0 0; padding: var(--s-8) var(--s-12); border-radius: 9px; background: var(--amber-bg); color: var(--ink); font-size: .86rem; line-height: 1.35; }
.careful b { color: var(--amber-ink); }
/* The facts as one quiet line (item 2); the calendar line, the invoice and the crew stay tappable rows. */
.facts-line { padding: 0 var(--s-16) var(--s-12) var(--s-20); display: grid; gap: var(--s-8); }
.fl-line { color: var(--muted); font-size: .84rem; line-height: 1.45; overflow-wrap: anywhere; }
.fl-line .fl { color: var(--ink); opacity: .85; }
.fl-line .fl small { color: var(--muted); }
.fl-line a { color: inherit; text-decoration: underline; text-decoration-color: var(--quote-stripe); text-underline-offset: 3px; }
.fl-line .sep { font-style: normal; color: var(--muted); }
.fact-row { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; font-size: .86rem; }
.fact-row .crew.open { color: var(--amber-ink); }
.fact-row .crew.set { color: var(--green); }
.fact-row .chase { color: var(--amber-ink); }
/* Rules: the sign-off, the name and the truck under it (evening item 4). */
.sign-card { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); width: 100%; text-align: left; padding: var(--s-12) var(--s-12);
  border-radius: 10px; background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.sign-lines { white-space: pre-line; font-weight: 600; }
.sign-card .chev { color: var(--muted); font-size: .85rem; white-space: nowrap; }
.voice input#v-name, .setup input#s-home, .setup input#s-assist { width: 100%; font-size: 16px; padding: var(--s-12) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); }

/* The event sheet (evening items 7 and 9): the event's color down its side, its facts, its actions. A
   conversation opened from it reads over it. */
#thread { z-index: 12; }
.ev-full { border-left: 4px solid var(--ev, var(--brand)); }
.ev-top { grid-template-columns: 1fr auto auto; }
.ev-top .ev-title { text-align: left; font-size: 1.1rem; line-height: 1.25; overflow-wrap: anywhere; }
.ev-top .contact-btn { margin: 0; }
.ev-facts { padding: 0; }
.ev-full .src { justify-self: start; padding: 0; border: 0; background: none; font: 600 .88rem/1.3 var(--ui); color: var(--brand-soft); cursor: pointer; }
.ev-full .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ev-full .hint { font-size: .82rem; color: var(--muted); }
.ev-acts { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.ev-acts:empty { display: none; }
.ev-acts .btn { padding: var(--s-12) var(--s-16); min-height: 40px; }
.ev-full .ev-tag { justify-self: start; }

/* The day view (evening item 7): the day takes the screen, hours down the side, events as blocks. */
.day-page { gap: var(--s-12); }
.dayview { display: grid; gap: var(--s-12); }
.dv-head { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "back nav" "title title"; gap: var(--s-8) var(--s-8); align-items: center;
  position: sticky; top: var(--head-h, 48px); z-index: 2; background: var(--bg); padding: var(--s-4) 0 var(--s-8); }
.dv-head .back { grid-area: back; justify-self: start; }
.dv-head .dv-nav { grid-area: nav; justify-self: end; }
.dv-head b { grid-area: title; font-size: 1.25rem; line-height: 1.2; padding-left: var(--s-4); }
.dv-nav { display: flex; gap: var(--s-4); }
.dv-allday { display: flex; flex-wrap: wrap; gap: var(--s-8); padding-left: 52px; }
.dv-chip { border: 0; border-left: 4px solid var(--ev); border-radius: 8px; background: var(--card); padding: var(--s-8) var(--s-12); font: 600 .85rem/1.2 var(--ui); cursor: pointer; text-align: left; }
.dv-chip.block { border-left-color: var(--muted); color: var(--muted); }
.dv-chip.passed { color: var(--muted); text-decoration: line-through; }
.dv-grid { position: relative; margin-top: var(--s-8); }
.dv-hour { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--line); }
.dv-hour span { position: absolute; left: 0; top: -8px; width: 46px; padding-right: var(--s-8); text-align: right; background: var(--bg);
  font: 500 11px/16px var(--ui); color: var(--muted); }
.dv-lanes { position: absolute; top: 0; bottom: 0; left: 52px; right: 0; }
.dv-ev { position: absolute; display: grid; align-content: start; gap: var(--s-4); padding: var(--s-4) var(--s-8); overflow: hidden; text-align: left; cursor: pointer;
  border: 0; border-left: 4px solid var(--ev); border-radius: 8px; background: color-mix(in srgb, var(--ev) 22%, var(--card)); color: var(--ink); }
.dv-ev b { font: 600 .86rem/1.2 var(--ui); overflow-wrap: anywhere; }
.dv-ev small { font: 500 11.5px/1.3 var(--ui); color: var(--muted); overflow-wrap: anywhere; }
.dv-ev.passed { background: var(--card); border-left-style: dashed; }
.dv-ev.passed b { text-decoration: line-through; }
.dv-now { position: absolute; left: -6px; right: 0; height: 2px; background: var(--red); border-radius: 2px; }
.month-hint { text-align: center; color: var(--muted); font-size: .82rem; }
/* The day runs 24 hours in its own scroll under the day's head, opened on the morning (third round, item 7): the head, the
   all-day row and Block this day stay put while the hours scroll. */
.day-page { display: flex; flex-direction: column; height: calc(100dvh - var(--head-h, 60px) - var(--tabs-h) - env(safe-area-inset-bottom) - 24px); }
.day-page .dayview { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--s-12); }
.dv-head { position: static; }
.dv-scroll { flex: 1; min-height: 200px; overflow-y: auto; overscroll-behavior: contain; padding: var(--s-8) 0 var(--s-12); }
.dv-scroll .dv-grid { margin-top: 0; }
/* Block this day (item 6): an optional reason and one tap, under what's on the day; a blocked day says so with Remove. */
.dv-block { display: flex; gap: var(--s-8); align-items: center; }
.dv-block input { flex: 1; min-width: 0; min-height: 44px; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); }
.dv-block .btn { flex: none; min-height: 44px; }
.dv-block.on { justify-content: space-between; padding: var(--s-8) var(--s-8) var(--s-8) var(--s-12); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.dv-block.on span { font: 600 15px/1.3 var(--ui); color: var(--muted); }
/* The plus (item 5): bottom right above the bar, the way a calendar app has one. */
.fab { position: fixed; z-index: 6; right: max(16px, calc(50vw - 280px + 16px)); bottom: calc(var(--tabs-h) + 16px + env(safe-area-inset-bottom));
  width: 56px; height: 56px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink); cursor: pointer;
  display: grid; place-items: center; box-shadow: 0 6px 18px -6px rgba(20, 10, 40, .5); }
.fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@media (min-width: 900px) { .fab { bottom: 24px; right: 24px; } }
/* New event: a short sheet (item 5). */
.ne-form { gap: var(--s-12); }
.ne-form input, .ne-form textarea { min-height: 44px; }
.ne-when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12) var(--s-12); align-items: end; }
.ne-allday { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); min-height: 44px; }
.ne-allday .sw-label { font: 600 15px/1.2 var(--ui); }
.ne-kinds { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.ne-kinds .pick { min-height: 44px; padding: 0 var(--s-16); display: inline-flex; align-items: center; }
.ne-kinds .pick.on { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-soft); font-weight: 700; }
.ne-picks .pick { min-height: 44px; }
.ne-add b { color: var(--brand-soft); }
.ne-picked { display: flex; align-items: center; gap: var(--s-8); min-height: 44px; padding: 0 var(--s-4) 0 var(--s-12); border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--raised); }
.ne-picked b { font-weight: 700; }
.ne-picked small { color: var(--muted); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.ne-x { margin-left: auto; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; }
.ne-new { margin: 0; padding: var(--s-12) var(--s-12) var(--s-12); border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; gap: var(--s-12); }
.ne-new legend { padding: 0 var(--s-4); font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ne-form .tf-actions .btn { width: 100%; min-height: 50px; }
/* The event sheet of an event added by hand: in the conversation's place. */
.ev-hand { color: var(--muted); font-size: 15px; }
/* The customer page: every event on it opens the event sheet (evening item 9). */
.hist.opens { cursor: pointer; }
.person-page .ev .inv-chip { justify-self: start; margin-top: var(--s-4); height: 22px; font-size: .72rem; }
.person-page .ev .chev { align-self: center; color: var(--muted); }
/* Ask over the keyboard (evening item 8): while the keyboard is up, Ask fills what the keyboard leaves and
   its box sits right on top of the keys; the bar hides behind them anyway. */
body.kb-open .chat-screen, body.kb-open .chat-page { top: var(--ask-top, var(--head-h, 48px)); bottom: auto;
  height: var(--ask-h, calc(100dvh - var(--head-h, 48px))); }
body.kb-open.asking .nav { visibility: hidden; }
body.kb-open .compose, body.kb-open .help-page .compose:last-child { padding-bottom: var(--s-12); }
.chat-empty { margin: auto var(--s-8); text-align: center; color: var(--muted); font-size: 1rem; line-height: 1.45; text-wrap: balance; }
/* Three questions to tap under it (Build 21 item 11). */
.chat-empty:has(+ .ask-chips) { margin-bottom: 0; }   /* the line and the three sit together, centered as one */
.ask-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-8); margin: var(--s-16) var(--s-8) auto; }
.ask-chip { min-height: 44px; padding: var(--s-8) var(--s-16); border-radius: 999px; border: 1.5px solid var(--brand-soft); background: var(--card);
  color: var(--brand-soft); font: 700 .95rem/1.2 var(--ui); cursor: pointer; }

/* The invoice sheet (evening items 11 to 13): the email around it, the invoice, the three switches. */
.inv-lead { margin-top: calc(-1 * var(--s-4)); }
.inv-mail { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.mail-row { display: flex; align-items: baseline; gap: var(--s-8); flex-wrap: wrap; font-size: .9rem; }
.mail-row > span { width: 58px; flex: none; color: var(--muted); font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
.mail-row small { color: var(--muted); }
.mail-note { width: 100%; font: inherit; font-size: 15px; line-height: 1.4; padding: var(--s-8) var(--s-12); border-radius: 9px; border: 1.5px solid var(--line);
  background: var(--raised); color: var(--ink); white-space: pre-wrap; resize: vertical; }
p.mail-note { border-style: dashed; }
.inv-from { font: 700 .78rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inv-switches { display: grid; gap: var(--s-8); padding: var(--s-8) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inv-switch { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; min-height: 36px; }
.inv-switch .sw-label { font-weight: 600; }
.sw-in { display: inline-flex; align-items: center; gap: var(--s-4); }
.sw-in input { width: 74px; font-size: 16px; padding: var(--s-4) var(--s-8); border-radius: 8px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.sw-note { color: var(--muted); font-size: .8rem; }
.seg.mini button { padding: var(--s-4) var(--s-12); min-height: 30px; }
.inv-real { justify-self: stretch; text-align: center; text-decoration: none; }
.inv-doors, .doors { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.doors { padding: 0 var(--s-16) var(--s-12) var(--s-20); }
.btn.door { padding: var(--s-8) var(--s-16); min-height: 38px; }
.inv-chip.draft { color: var(--brand-soft); border-color: var(--brand); background: var(--brand-bg); }
.pick-q { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); }
.pick-ev { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-12); text-align: left; padding: var(--s-12) var(--s-12); border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.pick-ev .mono { grid-row: span 2; align-self: center; font-size: .8rem; color: var(--muted); }
.pick-ev small { color: var(--muted); }
.pick-ev[data-not-ready] small { color: var(--amber-ink); }
/* Agreements (evening item 15). */
.attach { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; padding: 0 var(--s-16) var(--s-12) var(--s-20); }
.attach .chip.file { display: inline-flex; align-items: center; gap: var(--s-8); }
.attach .chip.file svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attach small { color: var(--muted); }
.attach.returned b { color: var(--green); }
.ev-agree { font-size: .9rem; color: var(--ink); }
.ev-agree.returned, .ev-agree.signed { color: var(--green); }
.door-note { align-self: center; font-size: .85rem; color: var(--muted); }
.file-act { cursor: pointer; }

/* Ask with hands: the chip that opens what Ask set up (evening item 16). */
.chat-chip.act { background: var(--brand); color: var(--brand-ink); border-color: var(--brand); }

/* The menu's demo rows (item 20), and the share sheet. */
.m-demo { display: grid; gap: var(--s-4); padding-bottom: var(--s-12); margin-bottom: var(--s-8); border-bottom: 1px solid var(--line); }
.share-body p { font-size: .98rem; line-height: 1.45; }
.share-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.share-btns .btn:only-child { grid-column: 1 / -1; }
/* The ask (item 18): in the sent card's place for a few seconds, and quiet at the bottom of the inbox. */
.demo-ask { position: relative; display: grid; gap: var(--s-12); padding: var(--s-16) var(--s-16) var(--s-16); border-radius: 12px; background: var(--brand-bg);
  border: 1.5px solid var(--brand); animation: incoming-in .25s ease-out; }
.demo-ask p { font: 800 1.08rem/1.3 var(--ui); padding-right: var(--s-24); }
.da-btns { display: grid; grid-template-columns: 1.45fr 1fr 1fr; gap: var(--s-8); }   /* three in one row (build16, item 8) */
.da-btns .btn { min-height: 44px; padding: var(--s-8) var(--s-8); font-size: .88rem; line-height: 1.15; }
.da-x { position: absolute; top: 8px; right: 10px; border: 0; background: none; color: var(--muted); font-size: 1.4rem; cursor: pointer; line-height: 1; }
.demo-ask.quiet { background: var(--card); border: 1px dashed var(--raised-line); animation: none; margin-top: var(--s-12); }
.demo-ask.quiet p { font-size: .95rem; font-weight: 700; color: var(--muted); }
/* The truck profile (item 22) and the Subscription row (item 25). */
.profile-form { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-12) var(--s-12); }
.pf { display: grid; gap: var(--s-4); }
.pf > span { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pf input, .pf textarea { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 9px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.pf input[readonly] { border-style: dashed; }
.pf-hint { font: 500 .8rem/1.35 var(--ui); color: var(--muted); }   /* a field's one hint under its box (build20, items 10, 11) */
.pf .rate { display: inline-flex; align-items: center; gap: var(--s-4); }
.pf .rate input { width: 120px; }
.profile-form .btn { justify-self: start; padding: var(--s-12) var(--s-20); min-height: 42px; }
img.avatar.logo { object-fit: cover; }
.rigs-link { display: flex; align-items: center; gap: var(--s-12); width: 100%; text-align: left; cursor: pointer; border: 0; background: none; }
.rigs-link span:not(.chev) { color: var(--muted); }
.rigs-link .chev { margin-left: auto; color: var(--muted); }
.sub-row b { font-weight: 700; }
/* The levers' editor on Rules (item 24). */
button.lever-info { width: 100%; text-align: left; cursor: pointer; color: inherit; position: relative; padding-right: var(--s-32); }
button.lever-info .chev { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--muted); }
/* On the card (build25, item 4): the add-on's row with its second switch beside it, "On the card" over the switch. */
.lever-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-8); }
.lever-row + .lever-row, .lever-row + .lever-edit, .lever-edit + .lever-row { margin-top: var(--s-8); }
.le-card { display: grid; justify-items: center; gap: 0; }
.le-card small { font: 600 12px/1.1 var(--ui); color: var(--muted); white-space: nowrap; }
.le-card-line span { font-weight: 600; }
.lever-info.off { opacity: .6; }
.lever-edit { display: grid; gap: var(--s-12); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card); border: 1.5px solid var(--brand); }
.lever-edit + .lever-info, .lever-info + .lever-edit { margin-top: var(--s-8); }
.le-top { display: flex; justify-content: space-between; align-items: center; }
.set .set-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--s-8); flex-wrap: wrap; justify-content: flex-end; }
.set .set-acts:empty { display: none; }

/* ── Design notes 2026-10-03 ── */
/* The header (item 5): the truck's logo or initials, a 28 px circle, left of its name; a tap opens its profile. */
.brand { display: flex; align-items: center; gap: var(--s-8); min-width: 0; flex: 1 1 auto; }
.avatar-btn { flex: none; width: 28px; height: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--raised-line); overflow: hidden;
  background: var(--brand-bg); color: var(--brand-soft); display: grid; place-items: center; cursor: pointer; }
.avatar-btn span { font: 800 .7rem/1 var(--ui); letter-spacing: .02em; }
.avatar-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (min-width: 900px) { .brand { grid-column: 1; grid-row: 1; } }

/* Contact on the name's line (item 3): the name, Contact beside it, the status pill on the right edge. A long
   name wraps to a second line before anything shrinks. */
/* A chevron on every row that opens in place (item 4): down under the closed row's text, up at the foot of the
   open one. The whole row stays the target; the chevron is what people aim for. */
.card.fold, .done-line { padding-bottom: var(--s-24); }
.row-chev { position: absolute; left: 50%; bottom: 3px; transform: translateX(-50%); width: 22px; height: 18px; color: var(--muted);
  display: grid; place-items: center; pointer-events: none; }
.row-chev svg, .fold-chev svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.fold-chev { display: grid; place-items: center; width: 100%; height: 26px; margin: calc(-1 * var(--s-8)) 0 0; padding: 0 0 var(--s-4); border: 0; background: none;
  color: var(--muted); cursor: pointer; }

/* One Back (item 8): a left chevron and the word, top left, on every screen that sits over another. */
.back svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.sheet-head { display: flex; align-items: center; gap: var(--s-12); min-height: 40px; }
.sheet-head-title { flex: 1; min-width: 0; font: 700 1rem/1.25 var(--ui); overflow-wrap: anywhere; }
.sheet-head .badge { flex: none; }
.sheet-head .contact-btn { margin: 0 0 0 auto; }
.sheet-title { margin: var(--s-4) 0 0; font: 700 1.15rem/1.3 var(--ui); }
.ev-full h2.ev-title { margin: 0; font: 700 1.2rem/1.25 var(--ui); overflow-wrap: anywhere; }
.wk-nav { display: flex; gap: var(--s-4); flex: none; }
.dv-head .back { grid-area: back; }
/* Between the header and the bar (items 8 and 16): nothing underneath shows or takes a tap, and the bar stays. */
@media (max-width: 899px) {
  .sheet, .sheet.bottom { inset: var(--head-h, 48px) 0 calc(var(--tabs-h) + env(safe-area-inset-bottom)) 0; max-width: 560px; margin: 0 auto;
    max-height: none; border-radius: 0; border-top: 0; box-shadow: none; overflow-y: auto; }
  .sheet .sheet-top { padding-top: var(--s-12); }
  .sheet.bottom .cal-sheet { padding-bottom: var(--s-40); }   /* the last control clears the raised Assistant circle */
  .sheet.bottom .sheet-head { position: sticky; top: 0; z-index: 2; margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-16)) 0; padding: var(--s-12) var(--s-16) var(--s-8); background: var(--bg);
    border-bottom: 1px solid var(--line); }
}
.sheet.bottom { background: var(--bg); }
.sheet.bottom > .cal-sheet { flex: none; min-height: 100%; align-content: start; }   /* never shrunk under its content: its end scrolls into view */
/* The bar lives in the header's stacking context: the header sits above the screens over the page, so the raised
   Ask circle is never cut by one (they start under the header and end at the bar). */
.top { z-index: 20; }
/* The bar still ducks under the keyboard (item 16). */
body.kb-open .nav { visibility: hidden; }

/* Unfinished (item 16): kept, and said at the top of its page until finished or discarded. */
.unfinished { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); flex-wrap: wrap; padding: var(--s-12) var(--s-12);
  border-radius: 10px; background: var(--amber-bg); border: 1px solid var(--amber); font-size: .9rem; }
.unfinished b { color: var(--amber-ink); }
.unf-acts { color: var(--muted); font-size: .86rem; }
.unf-acts .linkish { font-size: .9rem; }
.linkish.strong { color: var(--ink); font-weight: 700; }

/* Settings as closed rows (item 6): the inbox's chevron; the open one's form drops out under it. */
.srows { display: grid; gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
/* Settings and Profile as one inset grouped card (third round, item 8): the rows inside, hairlines between them. */
.srows > .srow { border: 0; border-radius: 0; box-shadow: none; }
.srows > .srow + .srow { border-top: 1px solid var(--line); }
.srow { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); }
.srow.open { border-color: var(--raised-line); }
.srow-head { position: relative; display: flex; align-items: baseline; gap: var(--s-8); width: 100%; padding: var(--s-16) var(--s-16) var(--s-24); border: 0; background: none;
  text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.srow.open .srow-head { padding-bottom: var(--s-12); }
.srow-head b { flex: none; font: 700 1rem/1.3 var(--ui); }
.srow-fact { min-width: 0; color: var(--muted); font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.srow-body { display: grid; gap: var(--s-12); padding: 0 var(--s-12) var(--s-4); }
.srow-body .group { border-radius: 10px; box-shadow: none; }
.srow-body .truckhead { padding: var(--s-4) var(--s-4) 0; }
.srow-body .profile-form { padding: 0 var(--s-4) var(--s-4); }
.srow-body .fold-chev { margin: calc(-1 * var(--s-4)) 0 0; }
.truckhead .avatar { overflow: hidden; }
.truckhead .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rigs-lead { color: var(--muted); font-size: .92rem; line-height: 1.45; padding: 0 var(--s-4); }
/* A row with a question mark beside it on the menu (Rules). */
.m-row-pair { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--s-8); }
.m-row-pair .m-row .chev { display: none; }

/* Invoices (items 9 to 15): lines that say their kind, every switch, the message under the total, View invoice. */
.inv-line.edit { grid-template-columns: 1fr 1fr; }
.li-kinds { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; }
.li-kind { border: 1.5px solid var(--line); background: var(--raised); color: var(--muted); border-radius: 999px; padding: var(--s-4) var(--s-12);
  font: 600 .8rem/1.1 var(--ui); cursor: pointer; }
.li-kind[aria-checked="true"] { border-color: var(--brand); color: var(--brand-soft); background: var(--brand-bg); }
.li-kinds .li-del { margin-left: auto; width: 30px; height: 30px; }
.li-f.wide { grid-column: 1 / -1; }
.inv-row .li-how { display: block; color: var(--muted); font: 500 .78rem/1.3 var(--ui); }
.inv-switch.missing .sw-label { color: var(--muted); }
.inv-switch.missing .switch { opacity: .45; cursor: default; }
.inv-msg-edit { display: grid; gap: var(--s-8); border-top: 1px solid var(--line); padding-top: var(--s-12); }
.msg-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; }
.msg-chip { border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); border-radius: 999px; padding: var(--s-8) var(--s-12);
  font: 600 .82rem/1.1 var(--ui); cursor: pointer; }
.msg-chip[aria-pressed="true"] { border-color: var(--brand); color: var(--brand-soft); background: var(--brand-bg); }
.msg-chips .linkish { color: var(--brand-soft); font-weight: 600; }
.msg-save { display: flex; gap: var(--s-8); align-items: center; flex-wrap: wrap; }
.msg-save input { flex: 1; min-width: 160px; font-size: 16px; padding: var(--s-8) var(--s-8); border-radius: 8px; border: 1.5px solid var(--brand);
  background: var(--raised); color: var(--ink); }
.msg-save .btn { min-height: 38px; padding: var(--s-8) var(--s-16); }
.inv-msg { white-space: pre-wrap; font-size: .92rem; line-height: 1.45; border-top: 1px solid var(--line); padding-top: var(--s-12); }
.inv-send-btns { display: grid; gap: var(--s-8); }
.inv-send-btns .btn { min-height: 46px; }
/* The invoice as a picture (design notes 2026-10-04 second round, items 7 to 11): white paper in the rail's style, the
   Pay button there as the customer sees it, dimmed and inert; the status strip above it. */
/* .inv-paper: the paper the customer gets, white in dark mode on purpose (design notes 2026-10-04 third round, item 12.8). Not a theme bug: leave it light. */
.inv-paper { display: grid; gap: var(--s-16); padding: var(--s-24) var(--s-20) var(--s-20); border-radius: 12px; background: #fff; color: #1d1a17;
  border: 1px solid var(--line); box-shadow: var(--shadow); font-variant-numeric: tabular-nums; }
.inv-paper small { font: 600 .68rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #7a736b; }
.ip-head { display: grid; justify-items: center; gap: var(--s-4); text-align: center; }
.ip-logo { width: 52px; height: 52px; border-radius: 50%; object-fit: cover; margin-bottom: var(--s-4); }
.ip-truck { font: 800 1.1rem/1.25 var(--ui); overflow-wrap: anywhere; }
.ip-amount { display: grid; justify-items: center; gap: var(--s-4); }
.ip-amount b { font: 800 2rem/1.1 var(--ui); letter-spacing: -.01em; }
.ip-amount span { color: #6f6861; font-size: .9rem; }
.ip-meta { display: flex; justify-content: space-between; gap: var(--s-12); padding-top: var(--s-12); border-top: 1px solid #ece6dc; }
.ip-meta > div { display: grid; gap: var(--s-4); min-width: 0; font-size: .88rem; color: #6f6861; overflow-wrap: anywhere; }
.ip-meta b { color: #1d1a17; font-size: .98rem; }
.ip-meta .r { text-align: right; justify-items: end; }
.ip-meta .ip-dom { display: inline-block; max-width: 100%; }   /* the address wraps at the "@", then at a dot (build26, item 2) */
.ip-lines, .ip-totals { width: 100%; border-collapse: collapse; font-size: .92rem; }
.ip-lines th { text-align: left; padding: var(--s-8) 0; border-bottom: 1.5px solid #e4ded3; }
.ip-lines th small, .ip-lines th { font: 600 .68rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: #7a736b; }
.ip-lines td { padding: var(--s-12) 0; border-bottom: 1px solid #f0ebe3; vertical-align: top; }
.ip-lines td small { display: block; margin-top: var(--s-4); font: 500 .8rem/1.3 var(--ui); letter-spacing: 0; text-transform: none; color: #7a736b; }
.ip-lines .r, .ip-totals .r { text-align: right; white-space: nowrap; padding-left: var(--s-12); }
.ip-totals td { padding: var(--s-4) 0; color: #4b4540; }
.ip-totals .ip-total td { padding-top: var(--s-8); border-top: 1.5px solid #1d1a17; font-weight: 800; font-size: 1.05rem; color: #1d1a17; }
.ip-memo { display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-16); border-radius: 8px; background: #f6f3ee; }
.ip-memo p { white-space: pre-wrap; font-size: .92rem; line-height: 1.45; }
.ip-from { display: grid; gap: 0; justify-items: center; text-align: center; font-size: .8rem; color: #7a736b; padding-top: var(--s-12);
  border-top: 1px solid #ece6dc; overflow-wrap: anywhere; }
.ip-from b { color: #4b4540; }
/* The status strip, the first thing on an invoice page (item 7): what happened and when, Remind beside it. */
.inv-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-12); border-radius: 10px;
  background: var(--raised); font: 700 .92rem/1.3 var(--ui); }
.inv-strip span { min-width: 0; }
/* No email conversation (Build 21 item 6): Contact beside a disabled Remind, the two kept together. */
.inv-strip:has(.inv-strip-acts) { flex-wrap: wrap; }
.inv-strip-acts { flex: none; display: flex; align-items: center; gap: var(--s-8); margin-left: auto; }
.inv-strip-acts .btn:disabled { opacity: .45; cursor: default; }
.inv-strip .btn { flex: none; min-height: 38px; padding: var(--s-8) var(--s-16); }
.inv-strip.paid { background: var(--green-bg); color: var(--green); }
.inv-strip.unpaid.chase, .inv-strip.reminded.chase { background: var(--amber-bg); color: var(--amber-ink); }
.inv-strip.unsent { color: var(--muted); }
.notice { padding: var(--s-8) var(--s-12); border-radius: 10px; background: var(--amber-bg); color: var(--ink); font-size: .86rem; line-height: 1.4; }
.add-row { color: var(--brand-soft); font-weight: 600; margin: var(--s-4) var(--s-4) 0; text-decoration: none; }

/* The company beside the name (item 19), and Companies (item 20). */
.co { font-weight: 500; color: var(--muted); font-size: .92em; }
.card.fold .l b .co, .row .l b .co { font-size: .9em; }
.ev-bar .seg + .seg { margin-left: auto; }
.co-up { margin-top: var(--s-4); font-size: .9rem; }
.company-page .person-head { display: grid; gap: var(--s-4); }
.company-page .person-head .linkish { justify-self: start; }
.co-person { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.co-person .l { display: grid; gap: 0; min-width: 0; cursor: pointer; }
.co-person .l span, .co-person .l small { color: var(--muted); font-size: .82rem; overflow-wrap: anywhere; }
.co-acts { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.co-line { font-weight: 600; color: var(--ink); opacity: .8; font-size: .95rem; margin-top: calc(-1 * var(--s-4)); }
.ev.still { cursor: default; opacity: .85; }
.co-acts .contact-btn { margin: 0; }
.co-confirm { grid-column: 1 / -1; display: grid; gap: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); font-size: .88rem; }
.co-adds { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.co-adds .btn { min-height: 40px; padding: var(--s-8) var(--s-16); }
.co-form { display: grid; gap: var(--s-8); padding: var(--s-12); border-radius: 10px; background: var(--card); border: 1px solid var(--line); }
.co-rename { display: flex; gap: var(--s-8); }
.co-rename input { flex: 1; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 9px; border: 1.5px solid var(--brand); background: var(--raised); color: var(--ink); }

/* Help (item 26): three equal buttons pinned under the header, the conversation (or the Guide) under them, the box at
   the bottom on the keyboard. */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.help-btns.three { grid-template-columns: repeat(3, 1fr); }
.help-btns.three .btn { flex-direction: column; gap: var(--s-4); min-height: 64px; padding: var(--s-8) var(--s-4); font-size: .8rem; line-height: 1.15; }
.help-btns.three svg { width: 20px; height: 20px; }
.help-guide { flex: 1; overflow-y: auto; }
.rule-label { grid-column: 1 / -1; font: 700 .95rem/1.2 var(--ui); padding: 0 var(--s-4); }

/* Add to your home screen (item 31): the menu row's two taps, and the inbox card. */
.m-home-how { margin: 0 var(--s-8) var(--s-8) 54px; font-size: .86rem; line-height: 1.4; color: var(--muted); }
.home-card { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-12); align-items: start; padding: var(--s-12) var(--s-16); border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.home-card b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: var(--s-4); }
.home-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #ffb224; background: color-mix(in srgb, #ffb224 17%, transparent); }
.home-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
@media (min-width: 900px) { .top .demo-pills { grid-column: 3; grid-row: 1; justify-self: end; } }
/* Desktop: the centered panel stays under the header, which now sits above the screens over the page. */
@media (min-width: 900px) {
  .sheet.bottom { top: calc(50% + var(--top-h) / 2); max-height: calc(100dvh - var(--top-h) - 32px); }
}

/* ── Design notes 2026-10-03 evening, items 10, 11 and 32 ── */
/* Reach out: one row, closed until tapped, on a customer, a company and an event. */
.reach { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.reach-head { width: 100%; display: grid; grid-template-columns: 34px 1fr; column-gap: var(--s-12); align-items: center; padding: var(--s-12) var(--s-12) var(--s-8);
  border: 0; background: none; text-align: left; cursor: pointer; color: inherit; position: relative; }
.reach-head .row-chev { grid-column: 1 / -1; }
.reach.open .reach-head { padding-bottom: var(--s-12); }
.rh-tile { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: #a3e635; background: color-mix(in srgb, #a3e635 15%, transparent); }
.rh-tile svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.rh-text { display: grid; gap: var(--s-4); min-width: 0; }
.rh-text b { font: 600 .95rem/1.25 var(--ui); }
.rh-text small { color: var(--muted); font-size: .82rem; line-height: 1.35; overflow-wrap: anywhere; }
.reach-form { display: grid; gap: var(--s-12); padding: 0 var(--s-12) var(--s-12); }
.reach-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.reach-form input, .reach-form textarea, .cust-form input { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px;
  border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.reach-note { margin: 0 var(--s-12) var(--s-12) var(--s-16); padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--raised); border: 1px dashed var(--raised-line); display: grid; gap: var(--s-8); }
.reach-note .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.reach-note p { font-size: .92rem; line-height: 1.45; }
.reach-note .chip { justify-self: start; }
.reach-ask { margin: 0 var(--s-16) var(--s-12) var(--s-20); padding: var(--s-8) var(--s-12); border-radius: 10px; background: var(--brand-bg); color: var(--ink);
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); font-weight: 600; font-size: .9rem; }
.ra-btns { display: flex; gap: var(--s-8); }
/* The quiet card and its list. */
.notice-card { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-12); align-items: start; padding: var(--s-12) var(--s-16); border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); font-size: .86rem; color: var(--muted); }
.notice-card b { display: block; color: var(--ink); font-size: .95rem; line-height: 1.35; }
.notice-card .home-icon { color: #a3e635; background: color-mix(in srgb, #a3e635 15%, transparent); }
.notice-card .nc-btns { display: flex; gap: var(--s-8); margin-top: var(--s-8); }
.notice-card .nc-btns .btn { min-height: 38px; padding: var(--s-8) var(--s-16); font-size: .86rem; }
.quiet-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-12); border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); }
.quiet-row .l { display: grid; gap: var(--s-4); min-width: 0; border: 0; background: none; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.quiet-row .l span { color: var(--muted); font-size: .82rem; }
.quiet-row .btn { min-height: 38px; padding: var(--s-8) var(--s-16); font-size: .86rem; }
/* Edit and Add customer. */
.ph-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.cust-form { display: grid; gap: var(--s-12); padding: var(--s-12); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.add-cust { justify-self: start; min-height: 40px; padding: var(--s-8) var(--s-16); }
.inline-n span { display: block; line-height: 2.2; }
.inline-n input { width: 3.2em; text-align: center; font-size: 16px; padding: var(--s-4) var(--s-4); border-radius: 8px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
/* The lock on each invoice switch (design notes 2026-10-03 evening, item 12), at the row's right edge, and + Add a fee (13). */
.inv-switch { position: relative; padding-right: var(--s-40); }
.sw-lock { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px;
  background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; }
.sw-lock svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.sw-lock[aria-pressed="true"] { color: var(--brand-soft); background: var(--brand-bg); }
.inv-switches .add-fee { justify-self: start; margin: var(--s-4) 0 0; color: var(--brand-soft); font-weight: 600; text-decoration: none; }
.inv-add-fee { display: grid; grid-template-columns: 1fr auto 86px; gap: var(--s-8); align-items: center; padding: var(--s-8) 0 var(--s-4); }
.inv-add-fee input { min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-8); border-radius: 8px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.inv-add-fee .tf-actions { grid-column: 1 / -1; }

/* ── Income (design notes 2026-10-03 evening, items 14 and 15) ── */
.month-line { margin: 0; padding: 0 var(--s-4); font: 700 .95rem/1.3 var(--ui); color: var(--ink); }
.dv-income, .ev-income { font: 600 .78rem/1 var(--ui); color: var(--green); white-space: nowrap; }
.dv-ev .dv-income { color: inherit; opacity: .85; }
.inc-ask { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-16); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.inc-ask b { font: 700 1rem/1.25 var(--ui); }
.inc-ask small { color: var(--muted); font-size: .82rem; }
.inc-ring { color: var(--muted); font-size: .85rem; padding: 0 var(--s-4); }
.inc-bar { flex-wrap: nowrap; }
.inc-nav { display: inline-flex; align-items: center; gap: var(--s-8); min-width: 0; }
.inc-label { font: 700 .92rem/1.2 var(--ui); white-space: nowrap; }
.inc-nav .icon:disabled { opacity: .35; cursor: default; }
.inc-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: var(--s-8); }
.inc-tile { display: grid; gap: var(--s-4); padding: var(--s-12); border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.inc-tile small { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inc-tile b { font: 700 1.15rem/1.15 var(--ui); overflow-wrap: anywhere; }
.inc-tile.diff b { color: var(--green); }
.inc-costs { color: var(--muted); font-size: .84rem; padding: 0 var(--s-4); }
.inc-reports { justify-self: start; }
.inc-rows { display: grid; gap: var(--s-8); }
.inc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); width: 100%; padding: var(--s-12) var(--s-12); border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: inherit; text-align: left; cursor: pointer; }
.inc-l { display: grid; gap: var(--s-4); min-width: 0; }
.inc-l b { font: 600 .95rem/1.25 var(--ui); overflow-wrap: anywhere; }
.inc-l small { color: var(--muted); font-size: .8rem; }
.inc-need { justify-self: start; margin-top: var(--s-4); font: 600 .72rem/1 var(--ui); color: var(--amber-ink); background: var(--amber-bg); border-radius: 999px; padding: var(--s-4) var(--s-12); }
.inc-num { display: grid; justify-items: end; gap: var(--s-4); flex: none; }
.inc-num b { font: 700 .98rem/1.1 var(--ui); }
.inc-num small { color: var(--muted); font-size: .74rem; white-space: nowrap; }
.inc-out { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.inc-mile { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-16); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.inc-mile p { color: var(--muted); font-size: .86rem; }
/* Enter your sales, the gas price and each rig's miles per gallon. */
.sales-form { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-8) var(--s-12); padding: var(--s-12) 0; border-top: 1px solid var(--line); }
.sales-form .label { grid-column: 1 / -1; font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sales-form .rate { grid-column: 1 / 3; display: inline-flex; align-items: center; gap: var(--s-4); font-weight: 600; }
.sales-form input, .gas-row input, .rig-mpg input { width: 100%; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); }
.sales-form .btn { min-height: 40px; padding: var(--s-8) var(--s-16); }
.sales-form .hint { grid-column: 1 / -1; font-size: .8rem; }
.sales-form.inline { margin: var(--s-8) 0 0; padding: var(--s-8) 0 0; width: 100%; }
.gas-row { display: flex; align-items: center; gap: var(--s-12); }
.gas-row .rate { display: inline-flex; align-items: center; gap: var(--s-4); flex: 1; }
.gas-row input { width: 6em; flex: none; }
.rig-mpg { display: inline-flex; align-items: center; gap: var(--s-8); grid-column: 1 / -1; color: var(--muted); font-size: .82rem; }
.rig-mpg input { width: 5em; flex: none; padding: var(--s-4) var(--s-8); }
.setup-mpg { display: grid; grid-template-columns: 1fr 6em; gap: var(--s-12); color: var(--ink); font-size: .95rem; }
.rig-row { grid-template-areas: "name acts" "mpg mpg"; row-gap: var(--s-8); }
.rig-row .rig-name { grid-area: name; grid-row: auto; }
.rig-row .rig-acts { grid-area: acts; grid-row: auto; }
.rig-row .rig-mpg { grid-area: mpg; }

/* ── Team, Who worked it, Documents (design notes 2026-10-03 evening, items 16 to 18) ── */
.srow.jump .srow-head .chev { margin-left: auto; color: var(--muted); font-size: 1.1rem; }
.team-page .lead, .docs-page .lead { color: var(--muted); font-size: .9rem; padding: 0 var(--s-4); }
.labor { display: grid; gap: var(--s-8); padding: var(--s-12) 0; border-top: 1px solid var(--line); }
.labor .label { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
/* Who worked it, one shape (design notes 2026-10-04-e, item 7): the picker and a small Remove on the first line; the rate,
   the hours and the pay at the right on the second; the total line under two or more rows. */
.labor-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "who who x" "rate hours pay";
  align-items: center; gap: var(--s-8) var(--s-12); padding-bottom: var(--s-8); border-bottom: 1px solid var(--line); font-size: .92rem; }
.labor-row [data-l-who] { grid-area: who; }
.labor-row .l-x { grid-area: x; font-size: .85rem; color: var(--muted); }
.labor-row .l-rate { grid-area: rate; }
.labor-row .l-hours { grid-area: hours; }
.labor-row .l-pay { grid-area: pay; justify-self: end; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: right; }
.l-rate, .l-hours { display: inline-flex; align-items: center; gap: var(--s-4); color: var(--muted); }
.l-rate input, .l-hours input { width: 4.5em; }
.labor-row select, .labor-row input, .doc-form select { min-width: 0; min-height: 44px; font-size: 16px; padding: var(--s-8) var(--s-8); border-radius: 10px;
  border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.labor-total { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--s-12); align-items: center; font-weight: 600; }
.labor-total b { min-width: 4.5em; text-align: right; font-variant-numeric: tabular-nums; }
.labor .l-add { justify-self: start; font-weight: 600; color: var(--brand-soft); }
.add-doc { justify-self: start; }
.doc-form input[type="date"], .doc-form input[name="name"] { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px;
  border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.doc-file { justify-self: start; }
.doc-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-12); border-radius: 10px;
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); }
.doc-row.due { border-left-color: var(--amber-ink); }
.doc-row.lapsed { border-left-color: var(--red); }
.doc-row.none { border-left-color: var(--line); }
.doc-row .l { display: grid; gap: var(--s-4); min-width: 0; border: 0; background: none; padding: 0; text-align: left; color: inherit; cursor: pointer; }
.doc-row .l span { color: var(--muted); font-size: .8rem; }
.doc-row .l small { font-size: .82rem; font-weight: 600; }
.doc-row.due .l small { color: var(--amber-ink); }
.doc-row.lapsed .l small { color: var(--red); }
/* The wallet (design notes 2026-10-05-build18, item 7): one row per slot in a grouped card; empty reads "Add yours." and is the
   upload itself, filled shows the file, the day it was added and its expiry, with Open and Replace. */
.wallet .slot { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: var(--s-12) var(--s-16); min-height: 60px;
  border-top: 1px solid var(--line); color: var(--ink); text-align: left; }
.wallet .slot:first-child { border-top: 0; }
.slot-l { display: grid; gap: var(--s-4); min-width: 0; }
.slot-l b { font: 600 .95rem/1.3 var(--ui); }
.slot-l span { color: var(--muted); font-size: .84rem; overflow-wrap: anywhere; }
.slot-l small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.slot.filled.due .slot-l small { color: var(--amber-ink); }
.slot.filled.lapsed .slot-l small { color: var(--red); }
.slot.empty { cursor: pointer; }
.slot.empty .slot-add { color: var(--brand-soft); font-weight: 600; }
.slot-plus { width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed var(--line); display: grid; place-items: center; color: var(--muted);
  font: 600 1.1rem/1 var(--ui); flex: none; }
.slot-btns { display: flex; gap: var(--s-8); flex: none; }
.slot-btns .btn { min-height: 40px; padding: 0 var(--s-12); }
/* Profile (design notes 2026-10-03 evening, items 19 to 21): Terms and Privacy as rows, Delete my account set apart. */
.set.link-row { text-decoration: none; color: inherit; grid-template-columns: 1fr auto; }
.set.link-row .chev { color: var(--muted); font-size: 1.1rem; }
.set.link-row > .chev { grid-column: 2; }   /* the chevron at the right, not under the name (.set > span is column 1) */
.danger-zone { border-left: 3px solid var(--red); }
.danger-zone input, form[data-email-form] input { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); }
.access-consent { text-align: center; font-size: .82rem; }
.access-consent a { color: var(--brand-soft); }

/* Help (design notes 2026-10-03 evening, item 22): the three buttons, then the box, then the answer under it, then the
   Common questions. A page in the flow, not on the keyboard. */
.help-page { display: grid; gap: var(--s-12); }
.help-page .compose.help-box { padding: 0; background: none; border-top: 0; }
.help-page .compose.help-box:last-child { padding-bottom: 0; }
.help-answer:empty { display: none; }
.help-answer .chat-thread { padding: 0; overflow: visible; }
.help-common { display: grid; gap: var(--s-8); }
.help-q { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); width: 100%; padding: var(--s-12) var(--s-16); border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 600 .95rem/1.3 var(--ui); text-align: left; cursor: pointer; }
.help-q .chev { color: var(--muted); font-size: 1.1rem; }
.help-page .help-guide { overflow: visible; padding: var(--s-4) var(--s-4) var(--s-12); }
/* The early access form's chips and its heading over the three online boxes (design notes 2026-10-03 evening, item 34). */
.access-chips { display: grid; gap: var(--s-8); }
.access-chips > span { font-weight: 600; font-size: .9rem; }
.access-online { margin: var(--s-8) 0 calc(-1 * var(--s-4)); font: 700 .95rem/1.3 var(--ui); }
/* Revise (design notes 2026-10-03 evening, item 33): the changed words lit for a second, then plain. */
mark.just-changed { color: inherit; border-radius: 3px; animation: just-changed 1.6s ease-out forwards; }
@keyframes just-changed { 0%, 35% { background: color-mix(in srgb, var(--amber) 45%, transparent); } 100% { background: transparent; } }
@media (prefers-reduced-motion: reduce) { mark.just-changed { animation: none; background: color-mix(in srgb, var(--amber) 25%, transparent); } }
.actions { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
.actions .btn.tool { padding-left: var(--s-4); padding-right: var(--s-4); font-size: .86rem; gap: var(--s-4); }

/* The question marks (design notes 2026-10-03 night, item 3): a small round "?" beside a word, and its two lines dropped
   under the row, quiet, until the next tap folds them. */
.q-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; margin: 0 0 0 var(--s-4); padding: 0; vertical-align: 1px;
  border-radius: 50%; border: 1.3px solid currentColor; background: none; color: var(--muted); cursor: pointer;
  font: 700 .66rem/1 var(--ui); letter-spacing: 0; text-transform: none; }
.q-btn[aria-expanded="true"] { color: var(--brand-soft); opacity: 1; }
.explain { margin: var(--s-4) var(--s-4) var(--s-8); padding: var(--s-8) var(--s-12); border-radius: 10px; background: var(--brand-bg); color: var(--ink);
  font: 500 .82rem/1.4 var(--ui); letter-spacing: 0; text-transform: none; }
.reach-row { display: flex; align-items: center; }
.reach-row > .reach-head { flex: 1; min-width: 0; }
.reach-row > .q-btn { margin: 0 var(--s-12) 0 var(--s-4); }
.inv-switch > .q-btn { margin-left: var(--s-4); }
/* Export the customer list (night item 4): Income's two buttons, under People and Companies. */
.cust-out { margin: var(--s-8) 0 var(--s-8); }

/* The survey (night item 7): the demo ask's card, quieter; one question at a time, the choices as chips. */
.survey { display: grid; gap: var(--s-12); padding: var(--s-16) var(--s-16) var(--s-12); border-radius: 12px; background: var(--brand-bg); margin: var(--s-4) 0 var(--s-8); }
.survey .sv-ask { font: 800 1.02rem/1.3 var(--ui); }
.survey .sv-step { font: 600 .7rem/1 var(--ui); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.survey .sv-q { font: 700 1rem/1.3 var(--ui); }
.survey .sv-btns { display: flex; gap: var(--s-8); justify-content: flex-end; }
.survey .sv-box { display: grid; gap: var(--s-8); }
.survey textarea { width: 100%; border-radius: 10px; border: 1px solid var(--field-line); background: var(--card); color: var(--ink);
  padding: var(--s-8) var(--s-12); font: 500 .95rem/1.4 var(--ui); resize: vertical; }
.survey.done { background: var(--card); border: 1px solid var(--line); }
.help-survey { margin-top: var(--s-12); }

/* The admin page (night item 8): one row each, Done on the left, the kind as a small badge. */
.adm-counts { margin: 0 var(--s-4) var(--s-12); font: 700 .9rem/1.4 var(--ui); color: var(--muted); }
.adm-note { margin: 0 var(--s-4) var(--s-12); font-size: .85rem; color: var(--amber-ink); }
.adm-row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-12); padding: var(--s-12); margin-bottom: var(--s-8); border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); }
.adm-row.done { opacity: .55; }
.adm-done { display: grid; justify-items: center; gap: var(--s-4); font: 600 .65rem/1 var(--ui); color: var(--muted); }
.adm-done input { width: 20px; height: 20px; accent-color: var(--brand); }
.adm-main { display: grid; gap: var(--s-4); min-width: 0; }
.adm-top { display: flex; gap: var(--s-8); align-items: center; min-width: 0; }
.adm-top b { overflow-wrap: anywhere; }
.adm-kind { flex: none; padding: var(--s-4) var(--s-8); border-radius: 999px; font: 700 .66rem/1.4 var(--ui); letter-spacing: .04em;
  text-transform: uppercase; background: var(--raised); color: var(--muted); }
.adm-kind.k-lead { background: var(--green-bg); color: var(--green); }
.adm-kind.k-problem { background: var(--red-bg); color: var(--red); }
.adm-kind.k-idea { background: var(--amber-bg); color: var(--amber-ink); }
.adm-kind.k-survey { background: var(--blue-bg); color: var(--blue); }
.adm-meta { color: var(--muted); font-size: .78rem; }
.adm-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.adm-err { font: 500 .75rem/1.3 var(--ui); color: var(--muted); overflow-wrap: anywhere; }
.adm-fields { display: grid; grid-template-columns: auto 1fr; gap: var(--s-4) var(--s-12); margin: var(--s-4) 0 0; font-size: .85rem; }
.adm-fields dt { color: var(--muted); }
.adm-fields dd { margin: 0; overflow-wrap: anywhere; }
.adm-fields.qa { grid-template-columns: 1fr; gap: 0; }   /* a survey's question, its answer under it */
.adm-fields.qa dd { margin: 0 0 var(--s-8); font-weight: 600; }

/* Set aside (night item 9): each skipped message with its one line of why, Make it a card, and "Found in spam". */
.card.line.aside-line { display: grid; grid-template-columns: 1fr auto; align-items: start; }
.aside-line .aside-why { color: var(--muted); font-size: .8rem; }
.aside-line .aside-acts { grid-column: 1 / -1; display: flex; gap: var(--s-12); align-items: center; margin-top: var(--s-8); }
.spam-pill { justify-self: start; display: inline-block; width: max-content; padding: 0 var(--s-8); border-radius: 999px;
  background: var(--amber-bg); color: var(--amber-ink); font: 700 .68rem/1.5 var(--ui); letter-spacing: .03em; }
.not-booking { margin: var(--s-8) 0 0; }

/* ── Design notes 2026-10-04 afternoon ── */
/* A Help answer's link (item 3): the words in link color, inline, a tap opens that screen. */
.help-link { display: inline; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: var(--brand-soft); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
/* "‹ Back" on every screen that isn't a bar tab (item 5): top left, in the page's own head line, before its name. */
.page-head .back { margin: 0 var(--s-4) 0 calc(-1 * var(--s-4)); }
.gp-top { display: flex; align-items: center; gap: var(--s-12); }
.gp-top .gp-title { flex: 1; min-width: 0; }
/* The truck in the header and on the guide (item 8): 44 px, its logo or initials; the name still wraps to two lines. */
.avatar-btn { width: 44px; height: 44px; }
.avatar-btn span { font-size: .9rem; }
.head-line { min-height: 44px; }
.gp-avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; border: 1px solid var(--raised-line);
  background: var(--brand-bg); color: var(--brand-soft); display: grid; place-items: center; font: 800 .9rem/1 var(--ui); }
.gp-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Add to home screen (item 9): the two glyphs drawn inline, the size of the words, so the reader matches pictures. */
.glyph { display: inline-grid; place-items: center; width: 1.45em; height: 1.45em; vertical-align: -.38em; margin: 0 0; border-radius: 6px;
  background: var(--raised); border: 1px solid var(--raised-line); color: var(--blue); font-style: normal; }
.glyph svg { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.m-home-how .install-btn, .home-how .install-btn { margin-top: var(--s-4); }
.home-how { display: block; line-height: 1.6; }
/* Customers (items 10 to 12): + Add contact as a row under the people, the notes box at the foot of a page, the export rows. */
.add-contact { display: flex; align-items: center; width: 100%; min-height: 46px; padding: 0 var(--s-16); border-radius: 12px;
  border: 1.5px dashed var(--raised-line); background: none; color: var(--brand-soft); font: 700 .95rem/1.2 var(--ui); cursor: pointer; }
.co-move { justify-self: start; margin: calc(-1 * var(--s-4)) var(--s-4) 0; }
.co-role { font-weight: 600; color: var(--muted); font-size: .8rem; }
.notes-box { display: grid; gap: var(--s-8); margin-top: var(--s-8); }
.notes-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-12); }
.notes-said { color: var(--muted); font-size: .8rem; }
.notes-box textarea { width: 100%; box-sizing: border-box; min-height: 84px; padding: var(--s-12) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--card); font-size: 16px; line-height: 1.45; resize: vertical; }
.notes-box textarea:focus { border-color: var(--brand); outline: none; }
.exports { display: grid; gap: var(--s-8); }
.export-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-12); align-items: center; padding: var(--s-12) var(--s-12); border-radius: 12px;
  background: var(--card); border: 1px solid var(--line); }
.export-row .er-l { display: grid; gap: var(--s-4); min-width: 0; }
.export-row .er-l small { color: var(--muted); font-size: .8rem; line-height: 1.35; }
.export-row .er-btns { display: flex; gap: var(--s-8); }
.export-row .btn { min-height: 36px; padding: 0 var(--s-12); font-size: .86rem; }
/* Receipts (item 14): the add button, the months with their totals, a row each, one open with its photo over the fields. */
.rc-add { display: flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 48px; cursor: pointer; }
.rc-add svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rc-month { display: flex; justify-content: space-between; align-items: baseline; margin: var(--s-12) var(--s-4) var(--s-4); font: 700 .82rem/1.2 var(--ui);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.rc-month b { color: var(--ink); letter-spacing: 0; font-size: .95rem; text-transform: none; }
.rc-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s-12); width: 100%; text-align: left; padding: var(--s-12) var(--s-12);
  border-radius: 12px; border: 1px solid var(--line); background: var(--card); cursor: pointer; }
.rc-row .rc-l { display: grid; gap: var(--s-4); min-width: 0; }
.rc-row .rc-l small { color: var(--muted); font-size: .82rem; }
.rc-amt { font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-photo { border-radius: 12px; overflow: hidden; background: var(--raised); border: 1px solid var(--line); display: grid; place-items: center;
  max-height: 46vh; }
.rc-photo img { display: block; width: 100%; max-height: 46vh; object-fit: contain; background: #fff; }
.rc-reading { text-align: center; color: var(--muted); margin: var(--s-8) 0; }
.rc-note { margin: 0; padding: var(--s-12) var(--s-12); border-radius: 10px; background: var(--amber-bg); color: var(--ink); font-size: .9rem; }
.rc-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.rc-kept { color: var(--green); font-weight: 600; margin-left: var(--s-8); }
.rc-year select, .rc-form select { width: 100%; }
.inc-rc { color: inherit; font-size: inherit; }
.rc-form select, .rc-year select { font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 9px; border: 1.5px solid var(--field-line); background: var(--raised);
  color: var(--ink); }
.receipt-page > .back { justify-self: start; }

/* Rules' Reviews row and the thank-you's review ask (design notes 2026-10-04 second round, item 20). */
.reviews-row { display: flex; gap: var(--s-8); }
.reviews-row input { flex: 1; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); }
.review-switch { margin-top: var(--s-4); }
.review-ask { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); padding: 0 var(--s-16) var(--s-12) var(--s-20);
  font-size: .86rem; color: var(--muted); }
.review-ask .linkish { color: var(--brand-soft); font-weight: 700; }

/* The Assistant's chats (design notes 2026-10-04 second round, item 12): the plus, the list under it, swipe to delete; and the
   answer streaming in (item 6c). */
.chat-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); padding: var(--s-8) var(--s-16) var(--s-8); border-bottom: 1px solid var(--line); }
.chat-title { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: center; justify-content: center; gap: var(--s-8);
  font: 800 1rem/1.2 var(--ui); color: var(--ink); white-space: nowrap; overflow: hidden; }
.chat-title .chat-name { overflow: hidden; text-overflow: ellipsis; }
.chats-toggle { border: 0; background: none; color: var(--ink); font: 700 .95rem/1 var(--ui); padding: var(--s-8) var(--s-4); cursor: pointer; }
.chats-toggle::after { content: ' ▾'; color: var(--muted); }
.chats-toggle[aria-expanded="true"]::after { content: ' ▴'; }
.chat-new { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--brand); color: var(--brand-ink);
  font: 700 1.3rem/1 var(--ui); cursor: pointer; display: grid; place-items: center; }
.chat-list { max-height: 42%; overflow-y: auto; border-bottom: 1px solid var(--line); background: var(--chrome); }
.cl-row { position: relative; overflow: hidden; border-bottom: 1px solid var(--line); touch-action: pan-y; }
.cl-open { position: relative; z-index: 1; display: grid; gap: var(--s-4); width: 100%; padding: var(--s-12) var(--s-16); border: 0; background: var(--chrome);
  color: var(--ink); text-align: left; cursor: pointer; font: inherit; transition: transform .18s ease; }
.cl-open b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cl-open small { color: var(--muted); font-size: .8rem; }
.cl-open[aria-current="true"] b { color: var(--brand-soft); }
.cl-row.swiped .cl-open { transform: translateX(-96px); }
.cl-del { position: absolute; top: 0; right: 0; bottom: 0; width: 96px; border: 0; background: var(--red); color: #fff; font: 700 .9rem/1 var(--ui); cursor: pointer; }
.cl-empty { padding: var(--s-12) var(--s-16); color: var(--muted); font-size: .9rem; }
.chat-thread .bot.streaming span::after { content: ''; display: inline-block; width: .5em; height: 1em; margin-left: var(--s-4); vertical-align: -2px;
  background: currentColor; opacity: .35; animation: sk-pulse 1s ease-in-out infinite; }
/* The admin page's filters (item 6d). */
.adm-filters { margin: var(--s-4) 0 var(--s-12); flex-wrap: wrap; }

/* Receipts' lines and search (design notes 2026-10-04 second round, item 14). */
.rc-search input { width: 100%; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); margin: var(--s-4) 0 var(--s-8); }
.rc-hits { display: grid; gap: 0; margin-top: var(--s-4); font-size: .84rem; color: var(--muted); }
.rc-hits b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.rc-lines { display: grid; gap: var(--s-8); }
.rc-line { display: grid; grid-template-columns: 1fr 58px 96px 30px; gap: var(--s-8); align-items: center; }
.rc-line input { min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-8); border-radius: 8px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); font-variant-numeric: tabular-nums; }
.rc-line .rate { display: flex; align-items: center; gap: var(--s-4); }
.rc-line .rate input { width: 100%; }
.rcl-del { width: 30px; height: 30px; }

/* An export's preview (design notes 2026-10-04 second round, item 15): the report as it comes out, CSV or PDF, Share at the
   bottom. The PDF's preview is white paper with the truck on top, like the file. */
.out-sheet { display: grid; gap: var(--s-12); }
.out-fmt { justify-self: start; }
.out-one { color: var(--muted); font-size: .9rem; }
.out-scroll { overflow-x: auto; }
.out-table { border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.out-table th { text-align: left; padding: var(--s-8) var(--s-12) var(--s-8) var(--s-8); border-bottom: 1.5px solid var(--line); color: var(--muted); font-weight: 700; }
.out-table td { padding: var(--s-4) var(--s-12) var(--s-4) var(--s-8); border-bottom: 1px solid var(--line); max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.out-table tr.out-total td { font-weight: 800; border-top: 1.5px solid var(--ink); }
.out-more { color: var(--muted); font-size: .82rem; margin-top: var(--s-8); }
/* .out-paper: the paper the customer gets, white in dark mode on purpose (design notes 2026-10-04 third round, item 12.8). Not a theme bug: leave it light. */
.out-paper { display: grid; gap: var(--s-8); padding: var(--s-20) var(--s-16); border-radius: 10px; background: #fff; color: #1d1a17; box-shadow: var(--shadow); }
.out-paper .op-top { display: flex; align-items: center; gap: var(--s-12); margin-bottom: var(--s-8); }
.out-paper .op-top img { width: 40px; height: 40px; border-radius: 50%; }
.out-paper .op-top div { display: grid; }
.out-paper .op-top b { font: 800 1.05rem/1.2 var(--ui); }
.out-paper .op-top small, .out-paper .op-line { color: #6f6861; font-size: .8rem; }
.out-paper h3 { margin: var(--s-4) 0 0; font: 800 .98rem/1.25 var(--ui); }
.out-paper .out-table th { color: #4b4540; border-color: #e4ded3; background: #f1eee9; }
.out-paper .out-table td { border-color: #f0ebe3; }
.out-paper .out-table tr.out-total td { border-top-color: #1d1a17; }
.out-paper .out-more { color: #6f6861; }
.out-foot { position: sticky; bottom: 0; padding: var(--s-12) 0 var(--s-4); background: linear-gradient(to bottom, transparent, var(--bg) 35%); }
.out-foot .btn { width: 100%; min-height: 48px; }

/* Lists (design notes 2026-10-04 second round, item 23): Shopping by store, Reminders by day; swipe a row left to clear it. */
.lists-tabs { justify-self: start; margin-bottom: var(--s-4); }
.li-add { display: flex; gap: var(--s-8); flex-wrap: wrap; }
.li-add input { flex: 1 1 160px; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); }
.li-add.rem input[type="date"], .li-add.rem input[type="time"] { flex: 0 1 140px; }
.li-stores { display: flex; flex-wrap: wrap; gap: var(--s-8); align-items: center; margin: var(--s-4) 0; }
.li-stores .chip small { color: var(--muted); }
.li-run { font-weight: 800; }
.li-group { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }
.li-group-head { text-align: left; padding: var(--s-8) var(--s-16); border: 0; background: var(--raised); color: var(--ink); font: 800 .9rem/1.2 var(--ui);
  cursor: pointer; }
.li-row { position: relative; overflow: hidden; border-top: 1px solid var(--line); touch-action: pan-y; }
.li-group .li-row:first-of-type { border-top: 0; }
.lists-page > .li-row { border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.li-main { position: relative; z-index: 1; display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-16); background: var(--card); transition: transform .18s ease; }
.li-row.swiped .li-main { transform: translateX(-88px); }
.li-check { display: flex; align-items: center; gap: var(--s-12); cursor: pointer; }
.li-check input { width: 20px; height: 20px; accent-color: var(--brand); flex: none; }
.li-row.done .li-check span { text-decoration: line-through; color: var(--muted); }
.li-usual, .li-when { margin-left: var(--s-32); font-size: .8rem; color: var(--muted); justify-self: start; }
.li-store { margin-left: var(--s-32); font-size: 16px; padding: var(--s-4) var(--s-8); border-radius: 8px; border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); }
.li-clear { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; border: 0; background: var(--red-fill); color: #fff; font: 700 .9rem/1 var(--ui); cursor: pointer; }
.li-clear-done { justify-self: start; color: var(--brand-soft); font-weight: 700; }
/* Today's reminders at the top of the inbox. */
.today-rem { display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-16); margin-bottom: var(--s-8); border-radius: 12px; background: var(--amber-bg);
  border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); }
.today-rem > b { font: 800 .8rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--amber-ink); }
.tr-row { display: flex; align-items: center; gap: var(--s-12); cursor: pointer; }
.tr-row input { width: 18px; height: 18px; accent-color: var(--amber-ink); }
.tr-row small { margin-left: auto; color: var(--muted); }
.li-said { display: grid; gap: var(--s-4); padding: var(--s-12) var(--s-12); border-radius: 16px 16px 16px 4px; background: var(--card); border: 1px solid var(--line);
  font-size: .92rem; }
.li-said b { font: 700 .7rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--brand-soft); }

/* The menu in groups (design notes 2026-10-04 second round, item 27), Request early access the one button on top; Rules
   explained (item 26). */
.m-access-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); margin: var(--s-4) 0 var(--s-8); }
.m-access, .m-feedback { width: 100%; min-height: 46px; margin: 0; padding-left: var(--s-8); padding-right: var(--s-8); display: inline-flex;
  align-items: center; justify-content: center; gap: var(--s-8); white-space: nowrap; font-size: .9rem; }
.m-access { font-weight: 800; }
.m-feedback { background: transparent; border: 1.5px solid var(--brand); color: var(--brand-soft); font-weight: 700; }
.feedback-page .survey { margin-top: var(--s-8); }
.m-q .q-btn { align-self: center; margin-right: var(--s-8); }
.menu .explain { margin: calc(-1 * var(--s-4)) var(--s-8) var(--s-8) 54px; }
.rules-intro { color: var(--muted); font-size: .92rem; line-height: 1.45; }
/* A small phone (third round, item 3): the slider and the full-size Tour pill take more of the line, so a long truck name
   tightens its tracking a little and may take a third line, all three inside the 44 px line, never cut. */

/* ── The Apple pass (design notes 2026-10-04 third round, item 12, from the HIG audit; measured by scripts/hig_1004c.py) ── */

/* 7. Type roles, named on purpose: body (reading text: a draft, a message, the Assistant, invoice and receipt rows) is 17;
   subhead (secondary data) 15; footnote 13. Nothing in between by accident. */
:root { --t-body: 17px; --t-sub: 15px; --t-foot: 13px; }
.draft .text, .draft textarea.edit, .msgs .body, .msg .body, .chat-thread .bubble, .chat-thread .me, .chat-thread .bot, .bot-text,
.inv-lines .line, .il-row, .rc-line, .receipt-lines .rl, .help-answer, .guide-sec p, .explain { font-size: var(--t-body); }

/* 5. One section-header spec: small, gray, uppercase, one tracking, everywhere a header labels a group. */
.m-label, .group-title, .chat-day, .divider, .pf > span, .ne-new legend, .draft .label, .quote .label, .done-line .said .label,
.ev-sheet .label, .ev-full .label, .ev-rig .label, .reach-note .label, .sales-form .label, .labor .label, .rule-preview .label {
  font: 600 var(--t-foot)/1.2 var(--ui); letter-spacing: .06em; text-transform: uppercase; }
.m-label, .group-title, .chat-day, .divider, .pf > span, .ne-new legend, .draft .label, .done-line .said .label, .ev-sheet .label,
.ev-full .label, .ev-rig .label, .reach-note .label, .sales-form .label, .labor .label { color: var(--muted); }

/* 1, 10, 11. A 44-point floor on every control. Where the look should stay small, padding or an invisible ring supplies the box. */
button, [role="button"], [role="switch"], [role="tab"], [role="radio"], select, label.file-act, .act, .btn, .seg button, .pill-btn, .lever,
.msg-chip, .chip, .pick, .avail, .contact-btn, .chats-toggle, .fold-chev, .li-group-head, .linkish, .li-check, .tr-row, .m-row,
input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea { min-height: 44px !important; }
.icon, .mag, .send-btn, .chat-new, .da-x, .bn-x, .ne-x { min-width: 44px !important; min-height: 44px !important; }
.icon, .mag, .chat-new { width: 44px; height: 44px; }
.send-btn { width: 44px; height: 44px; }
.msg-chip, .chip, .act, label.file-act, .contact-btn, .chats-toggle, .linkish, .pill-btn, .lever { display: inline-flex; align-items: center;
  gap: var(--s-4); }   /* a flex row drops the space between a name and its count: the gap puts it back */
.li-usual { margin-block: calc(-1 * var(--s-8)); }   /* 44 to tap, without pushing the rows apart */
.li-check, .tr-row { display: flex; align-items: center; }
.da-x { width: 44px; height: 44px; top: 0; right: 0; display: grid; place-items: center; padding: 0; }
.fold-chev { height: 44px; margin: calc(-1 * var(--s-12)) 0 0; padding: 0; }
/* Text that reads as a link in a line (a customer's name, Read the conversation): 44 tall by its padding, the line unchanged. */
button.cust.link, .src { min-height: 44px !important; display: inline-block; padding-block: var(--s-12) !important; }
/* The "?" stays an 18 px ring inside a 44 px box; the box overhangs the line instead of pushing it apart. */
.q-btn { position: relative; width: 44px; height: 44px; margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) calc(-1 * var(--s-8)); border: 0; vertical-align: middle; }
.q-btn::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; border: 1.3px solid currentColor; }

/* 6. Sheets: a grabber on top, swipe down to dismiss (app.js), Back stays; the top safe area as well as the bottom. */
.sheet.bottom { max-height: min(88dvh, calc(100dvh - env(safe-area-inset-top) - 8px)); }
.sheet.bottom::before { content: ""; position: sticky; top: 0; z-index: 3; display: block; flex: none; width: 36px; height: 5px;
  margin: var(--s-8) auto calc(-1 * var(--s-12)); border-radius: 3px; background: var(--raised-line); }
.sheet.bottom.dragging { transition: none; }
.sheet.bottom.letting-go { transition: transform .2s ease; }

/* 3. One spacing scale: every padding, margin and gap in this file is one of these (scripts/hig_1004c.py checks). */
:root { --s-4: 4px; --s-8: 8px; --s-12: 12px; --s-16: 16px; --s-20: 20px; --s-24: 24px; --s-32: 32px; --s-40: 40px; }
/* A short word that is a link ("Edit", "New ›"): 44 wide too, the word centered in it. */
.linkish { min-width: 44px; justify-content: center; }
button.cust.link { min-width: 44px; }

/* ── The inbox, fourth round (design notes 2026-10-04-d) ── */
/* 1. The colored bar on the left edge, twice as thick: the state reads from across the room. No tints on rows. */
.card::before { width: 8px; }
.card.line, .card.open .head, .card.open .cblk, .card.open .facts-line { padding-left: var(--s-24); }
/* The closed row: the name and company, then the first line of what they wrote; the right edge stacked: the tag, the
   event's day with a small calendar glyph, how long a ready reply has waited in the lightest text. */
.card.line .l .said { color: var(--muted); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card.line .r { display: grid; justify-items: end; gap: var(--s-4); flex: none; text-align: right; }
.r-date { display: inline-flex; align-items: center; gap: var(--s-4); font: 500 .78rem/1.2 var(--ui); color: var(--ink); white-space: nowrap; }
.r-date .glyph svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; opacity: .7; }
.r-wait { font: 500 .75rem/1 var(--ui); color: var(--muted); }
.tag { display: inline-flex; align-items: center; height: 24px; padding: 0 var(--s-8); border-radius: 999px; font: 600 .74rem/1 var(--ui);
  white-space: nowrap; color: var(--amber-ink); background: var(--amber-bg); }
.card.waiting .tag { color: var(--blue); background: var(--blue-bg); }
.card.yes .tag, .card.done .tag { color: var(--green); background: var(--green-bg); }
.card.booked .tag { color: var(--brand-soft); background: var(--brand-bg); }
.card.held .tag { color: var(--muted); background: var(--raised); }
/* 2. The open card: its head (the tag and the day), then three blocks. */
.card.open .head { padding-bottom: var(--s-8); }
.tag-line { display: flex; align-items: center; gap: var(--s-12); flex-wrap: wrap; min-height: 26px; }
.card.open .cblk.wrote { display: grid; gap: var(--s-4); padding: 0 var(--s-16) var(--s-12) var(--s-24); }
.card.open .cblk.wrote .co-line { margin: 0; }
.card.open .cblk.wrote .facts-line { padding: 0; }
.card.open .cblk.wrote .quote { width: 100%; margin: 0; }
/* What they wrote, three lines and "more". */
.quote .text.clamp { -webkit-line-clamp: 3; line-clamp: 3; }
/* The reply in its box: one small gray word in the corner, "Draft", until it's sent. */
.draft .label.corner { position: absolute; top: var(--s-8); right: var(--s-12); margin: 0; font: 600 13px/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.draft { padding-top: var(--s-24); }
/* Add-ons as bubbles under the Send row (design notes 2026-10-05-build16, item 11): outlined when off, filled when on. Since
   build25, item 2: the ones On the card in a row that wraps (no cap, no columns), then "+ Add", dashed, always last. What's on is a
   small chip with an x inside the draft. A label longer than the row (an owner's own words) stays inside the card: the chip
   stops at the row's width and its words wrap inside it (build26, item 6); one that fits keeps its one line. */
.levers { display: flex; flex-wrap: wrap; align-items: stretch; gap: var(--s-8); padding: 0 var(--s-16) var(--s-16) var(--s-20); }
.levers .lever { flex: none; max-width: 100%; justify-content: center; text-align: center; padding: var(--s-8) var(--s-12); min-height: 40px; line-height: 1.15;
  background: transparent; font-size: .78rem; white-space: normal; overflow-wrap: anywhere; }
.levers .lever.on { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.levers .lever.add { border-style: dashed; border-color: var(--field-line); color: var(--ink); }
.levers .lever:disabled { opacity: .55; }
.addon-chips { display: flex; flex-wrap: wrap; gap: var(--s-8); margin-top: var(--s-12); }
.addon-chip { display: inline-flex; align-items: center; gap: 0; min-height: 34px; padding: 0 0 0 var(--s-12); border-radius: 999px;
  font: 600 .8rem/1 var(--ui); background: var(--ink); color: var(--bg); }
.addon-x { width: 44px; min-height: 44px; margin: calc(-1 * var(--s-4)) 0; padding: 0; border: 0; background: none; color: inherit; font-size: 1.1rem; cursor: pointer; }
.addons-menu { margin: 0 var(--s-16) var(--s-12) var(--s-24); padding: var(--s-8) var(--s-12); border-radius: 12px; background: var(--raised);
  border: 1.5px solid var(--raised-line); display: grid; gap: 0; }
.addon-row { display: flex; align-items: center; gap: var(--s-12); min-height: 44px; border-bottom: 1px solid var(--line); cursor: pointer; }
.addon-row input { width: 22px; height: 22px; margin: 0; accent-color: var(--brand); flex: none; }
.addon-name { flex: 1; font-weight: 600; }
.addon-name small { font-weight: 500; color: var(--muted); }
.addon-amt { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.addons-done { margin-top: var(--s-12); }
.card.open .cblk.wrote .facts-line, .card.open .cblk.wrote .quote { margin-top: var(--s-4); }
.draft.busy { padding-top: calc(var(--s-40) + var(--s-12)); }
.draft.busy .spin { top: var(--s-4); }
/* 3. Three tags, one color each, nothing else: Reply ready amber, Waiting gray, Booked green. The bar is the tag's color. */
.card.ready::before, .card.needs::before { background: var(--amber); }
.card.waiting::before, .card.held::before { background: var(--muted); }
.card.booked::before, .card.yes::before { background: var(--green); }
.card.ready .tag { color: var(--amber-ink); background: var(--amber-bg); }
.card.waiting .tag, .card.held .tag { color: var(--muted); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
.card.booked .tag, .card.yes .tag { color: var(--green); background: var(--green-bg); }
.card.waiting .state, .card.held .state { color: var(--muted); }
.card.booked .state { color: var(--green); }
/* Could be a booking? (build16, item 9): one small gray card under the drafts, two taps. */
.card.unsure { background: var(--raised); border-style: dashed; box-shadow: none; display: grid; gap: var(--s-8); padding-top: var(--s-12); padding-bottom: var(--s-12); min-height: 0; }
.card.unsure::before { background: var(--line); }
.card.unsure .l { display: grid; gap: var(--s-4); min-width: 0; }
.card.unsure .unsure-ask { font: 700 .72rem/1.2 var(--ui); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.card.unsure .aside-acts { display: flex; gap: var(--s-16); align-items: center; }
.card.unsure .said { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quiet-place { margin: var(--s-8) 0 0; color: var(--ink); font-size: .95rem; }   /* Booked's place (build16, item 10) */
.quiet-next { margin-top: var(--s-4); color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
/* 5. Three buttons: Send or Book, Edit, Later. A small Book by the event's date for the ones confirmed by phone. */
.actions, .actions.book { grid-template-columns: 1.6fr 1fr 1fr; }
/* Edit: "or tell it what to change", at the bottom of the box. */
.tell { display: grid; gap: var(--s-4); margin-top: var(--s-12); padding-top: var(--s-12); border-top: 1px solid var(--line); }
.tell label { font-size: 13px; color: var(--muted); }
.tell-row { display: flex; gap: var(--s-8); }
.tell-row input { flex: 1; min-width: 0; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--card); }
.tell-row button { min-width: 44px; font-weight: 700; border-radius: 10px; border: 1.5px solid var(--raised-line); background: var(--card); cursor: pointer; }
.draft .answer { margin-top: var(--s-8); }
/* Later's picker. */
.remind-pick { display: flex; align-items: center; gap: var(--s-12); margin-top: var(--s-8); font-size: .9rem; color: var(--muted); }
.remind-pick input { font-size: 16px; padding: var(--s-4) var(--s-8); border-radius: 8px; border: 1.5px solid var(--field-line); background: var(--card); }
/* 6. The learning line under the edit box. */
.learn { margin: 0 var(--s-16) var(--s-12) var(--s-24); color: var(--muted); font-size: .9rem; line-height: 1.4; }
.learn .linkish { display: inline-flex; vertical-align: middle; }
/* 7. Other mail (Not bookings until 2026-10-05-mark), one line each. 8. A closing message: one gray line, "No reply needed", and a small Reply. */
.aside-line .l b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aside-line { flex-wrap: wrap; }
.aside-line .aside-acts { display: flex; gap: var(--s-4); margin-left: auto; }
.no-reply { margin-top: var(--s-4); color: var(--muted); font-size: .9rem; display: flex; align-items: center; gap: var(--s-8); }
.aside-meta { display: flex; align-items: center; gap: var(--s-8); flex-wrap: wrap; color: var(--muted); }
.aside-meta small { color: var(--muted); }
/* 10. Start over, the demo menu's last card, apart from Coming next. */
.m-card-start { margin-top: var(--s-24); }

/* Customers' Events tab (design notes 2026-10-04-e, item 8): the event, its date and who, what it brought in at the right. */
.cust-ev .ce-in { flex: none; font: 600 .95rem/1.2 var(--ui); font-variant-numeric: tabular-nums; }
.cust-ev .ce-up { flex: none; font-size: .82rem; color: var(--muted); }
.cust-ev { align-items: center; }
.cust-ev .ev-main { flex: 1; min-width: 0; }
/* A team member's page (design notes 2026-10-04-e, item 9): the facts, the month with Share at the right, the events worked. */
.member-facts { margin: 0; }
.divider.mw-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); }
.mw-head .btn { min-height: 44px; padding: 0 var(--s-16); text-transform: none; letter-spacing: 0; font-size: .9rem; }
.mw-line { color: var(--muted); font-size: .92rem; margin: 0 var(--s-4); }
.mw-row { align-items: center; }
.mw-row .ev-main { flex: 1; min-width: 0; }
.member-page .person-head .name-line .linkish { flex: none; }

/* Rules, rethought (design notes 2026-10-04-e, item 10): the box, "Make that a rule?", the sentences (switch, swipe to
   delete), the four cards. */
.rule-add.tell { grid-template-columns: 1fr; }
.rule-add.tell input { font-size: 16px; padding: var(--s-12) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.rule-add.tell input::placeholder { color: var(--muted); }
.make-rule { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-12); border-radius: 12px; background: var(--card); border: 1.5px solid var(--amber-ink); }
.mr-head { font: 700 .95rem/1.2 var(--ui); }
.mr-row { display: grid; gap: var(--s-8); }
.mr-row + .mr-row { border-top: 1px solid var(--line); padding-top: var(--s-8); }
.mr-text { display: grid; gap: var(--s-4); }
.mr-text small { font-size: 12px; color: var(--muted); }
.rule-list { display: grid; gap: var(--s-8); }
.rule-row { position: relative; overflow: hidden; border-radius: 10px; touch-action: pan-y; }
.rule-row .rule-slide { position: relative; z-index: 1; transition: transform .18s ease; }
.rule-row.swiped .rule-slide { transform: translateX(-88px); }
.rule-sentence { flex: 1; min-width: 0; margin: 0; }
.rule-row.off .rule-sentence { color: var(--muted); }
.rule-del { position: absolute; top: 0; right: 0; bottom: 0; width: 88px; border: 0; background: var(--red-fill); color: #fff; font: 700 .9rem/1 var(--ui); cursor: pointer; }
.rcards { display: grid; gap: var(--s-12); margin-top: var(--s-8); }
.rcard { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.rcard.open { border-color: var(--raised-line); }
.rcard-top { display: flex; align-items: flex-start; gap: var(--s-8); padding-right: var(--s-12); }
.rcard-head { flex: 1; min-width: 0; display: grid; gap: var(--s-4); padding: var(--s-16) var(--s-16); border: 0; background: none; text-align: left; color: var(--ink); cursor: pointer; font: inherit; }
.rcard-head b { font: 700 1rem/1.3 var(--ui); }
.rcard-fact { color: var(--muted); font-size: .9rem; }
.rcard-top .q-btn { margin-top: var(--s-16); }
.rcard > .explain { margin: 0 var(--s-16) var(--s-12); }
.rcard-body { display: grid; gap: var(--s-8); padding: 0 var(--s-12) var(--s-16); }
.rcard-body .group { border-radius: 10px; box-shadow: none; }
.thanks-switch { margin-top: var(--s-4); }

/* Settings' Connections (item 11): each one's state, Connect and Test, and what Test found. */
.conn-row .conn-state { color: var(--muted); }
.conn-row .conn-state.on { color: var(--green); }
.conn-row .set-acts { grid-column: 2; grid-row: 1 / span 2; display: flex; gap: var(--s-8); align-items: center; }
.conn-test { grid-column: 1 / -1; font-size: .84rem; }
.conn-test.ok { color: var(--green); }
.conn-test.bad { color: var(--red); }
.mail-form .seg { flex-wrap: wrap; }
.seg.appearance { justify-self: start; }

/* Rigs: a row opens the rig's page (design notes 2026-10-04-e, item 13). */
button.set.rig-row { width: 100%; text-align: left; background: none; color: inherit; font: inherit; cursor: pointer; grid-template-columns: 1fr auto; }
button.set.rig-row .chev { grid-column: 2; grid-row: 1 / span 2; color: var(--muted); font-size: 1.1rem; }
.rig-page { display: grid; gap: var(--s-12); }
.rig-photo { position: relative; display: grid; place-items: center; min-height: 160px; border-radius: 12px; overflow: hidden; background: var(--raised); border: 1px solid var(--line); }
.rig-photo img { width: 100%; max-height: 260px; object-fit: cover; display: block; }
.rig-photo .rig-ph svg { width: 64px; height: 64px; stroke: var(--muted); fill: none; stroke-width: 1.4; }
.rig-photo .file-act { position: absolute; right: var(--s-8); bottom: var(--s-8); background: var(--card); }
.pf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-12); }
.rig-retire { justify-self: start; }

/* A document, open in the app (design notes 2026-10-04-e, item 14): full screen, Back top left, Share top right. */
.docv-top { justify-content: space-between; }
.docv-title { flex: 1; min-width: 0; font: 700 1rem/1.25 var(--ui); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.docv-body { flex: 1; min-height: 0; display: grid; place-items: center; overflow: auto; background: var(--raised); }
.docv-img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.docv-pdf { width: 100%; height: 100%; border: 0; background: #fff; }

/* Share, top right (item 17): the same button everywhere it is. */
.share-top { display: inline-flex; align-items: center; gap: var(--s-4); flex: none; margin-left: auto; height: 36px; padding: 0 var(--s-12);
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--raised); color: var(--ink); font: 600 .85rem/1 var(--ui); cursor: pointer; }
.share-top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Reminders on the day view (design notes 2026-10-04-e, item 15): one line each with a bell, never a block. */
.dv-rems { display: grid; gap: var(--s-4); padding: 0 var(--s-4); }
.dv-rem { display: flex; align-items: center; gap: var(--s-8); width: 100%; min-height: 32px; padding: 0 var(--s-8); }
/* Checked from the day too (design notes 2026-10-05-mark, item 11): the circle, then the line that opens its list. */
.dv-rem .dv-tick { margin: calc(-1 * var(--s-8)) calc(-1 * var(--s-8)) calc(-1 * var(--s-8)) calc(-1 * var(--s-12)); }
.dv-rem-open { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--s-8); min-height: 32px; padding: var(--s-4) 0; border: 0;
  border-radius: 8px; background: none; color: var(--ink); font: 500 .9rem/1.3 var(--ui); text-align: left; cursor: pointer; }
.dv-rem .glyph svg { width: 16px; height: 16px; fill: none; stroke: var(--amber-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.dv-rem small { flex: none; color: var(--muted); font-size: .8rem; }
.dv-rem span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rem-when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.li-pick { position: relative; display: block; }
.li-pick input { width: 100%; min-height: 44px; font-size: 16px; padding: var(--s-8) var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--raised); color: var(--ink); }
.li-pick > span { position: absolute; left: var(--s-12); top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; display: none; }
.li-pick[data-empty="true"] > span { display: block; }
.li-pick[data-empty="true"] input { color: transparent; }
.li-pick[data-empty="true"] input::-webkit-datetime-edit { color: transparent; }
.li-add.rem .rem-when { flex: 1 1 100%; }
/* Full screen, over the header and the bar: the one screen that takes all of it. */
.sheet.docv { position: fixed; inset: 0; width: auto; max-width: none; margin: 0; border: 0; z-index: 40 !important; overflow: hidden; }
.sheet.docv .docv-top { padding-top: calc(var(--s-12) + env(safe-area-inset-top)); }

/* Shopping, rethought (design notes 2026-10-04-e, item 16): a circle and a word, the store a small gray word with its site,
   a gray Checked section at the bottom, "Group by store" a small switch at the top. */
.li-row.shop .li-main { display: flex; align-items: center; gap: var(--s-12); }
/* A 44 px box (the floor on every control) with the 24 px circle drawn inside it, so the circle stays round. */
.li-circle { flex: none; width: 44px; height: 44px; margin: calc(-1 * var(--s-8)); padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; position: relative; }
.li-circle::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 2px solid var(--muted); }
.li-circle[aria-checked="true"]::after { background: var(--muted); }
.li-circle[aria-checked="true"]::before { content: ""; position: absolute; z-index: 1; left: 19px; top: 15px; width: 5px; height: 10px; border: solid var(--card); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.li-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.li-store-box { flex: none; display: inline-flex; align-items: center; gap: var(--s-4); max-width: 45%; }
.li-store-word { min-height: 32px; padding: 0 var(--s-4); border: 0; background: none; color: var(--muted); font: 500 .8rem/1.2 var(--ui); cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.li-site { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--muted); text-decoration: none; font-size: .85rem; }
.li-row.shop .li-store { margin-left: 0; max-width: 100%; }
.li-checked .li-row .li-text { color: var(--muted); text-decoration: line-through; }
.li-checked-head { color: var(--muted); }
.li-group-switch { display: flex; align-items: center; justify-content: flex-end; gap: var(--s-8); color: var(--muted); font-size: .85rem; }
.page-top { display: flex; align-items: center; gap: var(--s-12); }
.dv-head { grid-template-columns: auto 1fr auto auto; grid-template-areas: "back . nav share" "title title title title"; }
.dv-head .share-top { grid-area: share; margin-left: 0; }
.sheet-head .share-top { margin-left: auto; }

/* The week's count (design notes 2026-10-04-e, item 18) moved to the first line of the Other mail pile (2026-10-05-mark, item 8):
   one gray line, no x. The x below stays for the mailed document's card. */
.other-week { margin: 0; padding: var(--s-4) var(--s-4) var(--s-8); font: 600 .88rem/1.35 var(--ui); color: var(--muted); }
.wl-x { flex: none; width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.3rem; line-height: 1; cursor: pointer; }

/* The event's money (design notes 2026-10-04-f, item 3): folded to three lines, Income, Costs and Profit; open, two cards and
   the number. Gray is filled in for you, with a tiny source word under it; black is typed. */
.money { padding: var(--s-12) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-12); }
.em-sum { display: grid; grid-template-columns: 1fr auto; gap: var(--s-4) var(--s-12); width: 100%; min-height: 44px; padding: 0;
  border: 0; background: none; text-align: left; cursor: pointer; position: relative; padding-right: var(--s-32); }
.em-sum .em-row { display: contents; }
.em-sum .em-row > span { color: var(--muted); font-weight: 600; }
.em-sum .em-row > b { font-variant-numeric: tabular-nums; text-align: right; }
.em-sum .em-profit-row > span, .em-sum .em-profit-row > b { color: var(--ink); font-weight: 800; }
.em-sum .chev { position: absolute; right: 4px; top: 50%; transform: translateY(-50%) rotate(90deg); color: var(--muted); font-size: 1.2rem; }
.em-sum[aria-expanded="true"] .chev { transform: translateY(-50%) rotate(-90deg); }
.em-card { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-16); border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.em-head { font: 700 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.em-line { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--s-12); min-height: 44px; }
.em-label { font-weight: 600; }
.em-box { display: grid; justify-items: end; gap: var(--s-4); }
.em-box .rate { display: inline-flex; align-items: center; gap: var(--s-4); font-weight: 600; }
.em-box input, .em-other-label { width: 7.5em; min-height: 44px; font-size: 16px; padding: var(--s-8) var(--s-8); border-radius: 10px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.em-box.auto input { color: var(--muted); border-style: dashed; }
.em-src { font-size: .7rem; line-height: 1; color: var(--muted); }
.em-split { font-size: .82rem; color: var(--muted); }
.em-tax { display: flex; justify-content: flex-end; align-items: center; gap: var(--s-8); font-size: .85rem; color: var(--muted); }
.em-tax:not(.auto) { color: var(--ink); }
.em-tax .em-box input { width: 6em; padding: var(--s-4) var(--s-8); }
.em-total { border-top: 1px solid var(--line); padding-top: var(--s-8); }
.em-total b, .em-fixed { font-variant-numeric: tabular-nums; }
.em-other .em-other-label { width: 100%; text-align: left; }
.em-add { justify-self: start; min-height: 44px; }
.em-profit { display: flex; justify-content: space-between; align-items: baseline; padding: var(--s-4) var(--s-4) 0; }
.em-profit span { font-weight: 700; }
.em-profit b { font: 800 2rem/1.1 var(--ui); font-variant-numeric: tabular-nums; }
.em-served .em-box input { width: 5.5em; }
.em-ticket { min-height: 0; }
.from-square { display: block; font-size: .72rem; line-height: 1.3; color: var(--muted); font-weight: 500; }
.em-ticket .em-label, .em-ticket .em-gray { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }

/* Income, rethought (design notes 2026-10-04-f, item 4): the period, Profit big with Income and Costs small under it and the
   sales tax under Income, then three tabs of plain lists. No charts. */
.inc-square { color: var(--muted); font-size: .86rem; padding: 0 var(--s-4); }
.inc-period { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); flex-wrap: wrap; }
.inc-period .icon { width: 44px; height: 44px; }
.inc-profit { display: grid; gap: var(--s-4); padding: var(--s-16); border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.inc-profit > small { font: 600 .68rem/1 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.inc-profit > b { font: 800 2.4rem/1.1 var(--ui); font-variant-numeric: tabular-nums; }
.inc-two { display: flex; gap: var(--s-16); color: var(--muted); font-size: .9rem; }
.inc-two b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.inc-tax { color: var(--muted); font-size: .8rem; }
.inc-tabs { justify-self: stretch; }
.inc-tabs button { flex: 1; }
.inc-row.static { cursor: default; }
.inc-total { border-top: 1px solid var(--line); border-radius: 0; }

/* Attach on a reply (design notes 2026-10-04-f, item 6): four in the row now, Attach beside Edit. */
.actions, .actions.book { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
.attach.files .chip.file { min-height: 44px; padding-right: 0; }
.attach .chip.file small { color: var(--muted); }
/* Tap a file to see it (design notes 2026-10-05-build15, item 8): the chip's name is a button, the x stays beside it. */
.chip-open { border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; text-align: left;
  min-height: 44px; display: inline-flex; align-items: center; gap: var(--s-4); }
.chip-open:hover b, .chip-open:hover { text-decoration: underline; text-underline-offset: 2px; }
button.chip.file.chip-open { min-height: 0; border: 1px solid var(--raised-line); padding: var(--s-4) var(--s-8); }
.attach .chip-x { width: 44px; height: 44px; border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.attach .chip.offer { display: inline-flex; align-items: center; gap: var(--s-8); min-height: 44px; cursor: pointer; border: 1.5px dashed var(--brand-soft);
  color: var(--brand-soft); background: none; font-weight: 600; }
.attach .ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.attach-pick .file-act { display: inline-flex; align-items: center; justify-content: center; }
.doc-picks { display: grid; gap: var(--s-8); }
.doc-pick { justify-content: flex-start; text-align: left; }

/* The mailbox files documents (item 7): one card at the top of Open. */
  margin: 0 var(--s-16) var(--s-12); padding: var(--s-12); border-radius: 12px; background: var(--card); border: 1px solid var(--line); }

/* Add document, two buttons (item 8): Take a photo and Upload a file, each the phone's own picker. */
.doc-adds { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.doc-adds .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); min-height: 48px; }
.doc-adds .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.docs-page.dropping { outline: 2px dashed var(--brand-soft); outline-offset: 4px; border-radius: 12px; }

/* Send them a link (design notes 2026-10-04-f, item 10). */
.team-adds { display: flex; flex-wrap: wrap; gap: var(--s-8) var(--s-16); }
.team-link .tl-url { width: 100%; font-size: 15px; padding: var(--s-8) var(--s-12); min-height: 44px; border-radius: 10px; border: 1.5px solid var(--line);
  background: var(--raised); color: var(--ink); }
/* How you price (design notes 2026-10-04-f, item 2): the amount's words in reading case beside the box. */
.pricing-form .pf > .rate { font: 400 1rem/1.2 var(--ui); letter-spacing: 0; text-transform: none; color: var(--ink); }
.pricing-form .divider { margin-top: 0; }

/* ── Design notes 2026-10-05-mark (Build 14) ── */
/* 4. The mark above the name, small: the deck's title and the Tour's heading. */
.welcome-mark { display: block; height: 30px; margin: 0 auto calc(-1 * var(--s-4)); }
.guide-mark { display: block; height: 34px; margin: 0 0 var(--s-8); }
/* 11. To do: Shopping's row; the words are the day's picker (a date box laid over them), a dated one shows its day with a bell. */
.li-todo { position: relative; flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--s-8); cursor: pointer; }
.li-todo .li-text { min-width: 0; }
.li-due { display: inline-flex; align-items: center; gap: var(--s-4); color: var(--muted); font: 500 .8rem/1.2 var(--ui); white-space: nowrap; }
.li-due .glyph svg { width: 13px; height: 13px; fill: none; stroke: var(--amber-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; display: block; }
.li-date { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  -webkit-appearance: none; appearance: none; background: none; color: transparent; }
.li-date::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; cursor: pointer; }
/* A paper the mailbox filed (design notes 2026-10-05-build15, item 4): one gray line in Other mail, the whole sentence shown. */
.aside-line.filed::before { background: var(--line); }
.aside-line.filed .l b { white-space: normal; font-weight: 600; }
.aside-line.filed .aside-acts { margin-top: 0; }
.aside-line.filed .aside-meta, .aside-line.filed .aside-why { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
.aside-line.filed .l { min-width: 0; }
/* The Mailbox (design notes 2026-10-05-build15, item 5): Ready's count on its tab, the bar's red; Sent's Nudge? line. */
.seg-n { display: inline-block; min-width: 18px; height: 18px; margin-left: var(--s-4); padding: 0 var(--s-4); border-radius: 999px;
  background: #d13a40; color: #fff; font: 700 .68rem/18px var(--ui); font-style: normal; text-align: center; vertical-align: 1px; }
.nudge-line { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-8);
  margin: 0 0 var(--s-8); padding: 0 0 var(--s-8); border-bottom: 1px solid var(--line); color: var(--muted); font-size: .85rem; }
.card.line.nudgeable { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-12); }
.card.open .nudge-line { margin: var(--s-8) var(--s-16) 0 var(--s-24); }
/* Income's Custom dates (design notes 2026-10-05-build16, item 3): the range as the heading (a tap changes it), and its small
   sheet: four quick picks, then From and To, the phone's own date pickers. */
.inc-label.inc-range { border: 0; background: none; padding: var(--s-4) 0; font: inherit; font-weight: 800; color: var(--ink); cursor: pointer;
  text-decoration: underline dotted var(--muted); text-underline-offset: 4px; }
.inc-dates { display: grid; gap: var(--s-12); }
.inc-quick { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.inc-quick .btn { min-height: 44px; }
.inc-range-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-8) var(--s-12); align-items: end; }
.inc-range-form label { display: grid; gap: var(--s-4); }
.inc-range-form label span { font: 600 .72rem/1 var(--ui); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.inc-range-form input { width: 100%; min-height: 44px; font-size: 16px; padding: var(--s-8); border-radius: 9px; border: 1.5px solid var(--field-line);
  background: var(--raised); color: var(--ink); }
.inc-range-form .btn { grid-column: 1 / -1; min-height: 46px; }
.inc-period .seg { flex-wrap: nowrap; }
.inc-period .seg button { white-space: nowrap; padding-left: var(--s-12); padding-right: var(--s-12); }

/* ── Build 17 (docs/design-notes-2026-10-05-build17.md): the card in the Mailbox ── */
/* 2. "Reply ready" a size up, the first thing the eye lands on. Since item 8 the open card's head is the folded row, so the
   tag is one size in both, a size up from before (24 px, .74rem). */
.card.mrow .mh1 .tag { height: 28px; padding: 0 var(--s-12); font-size: .84rem; margin-left: auto; flex: none; }
/* 3. No date in the open card's head: the facts under it say the date, and its calendar glyph opens that day. */
.cal-glyph { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) calc(-1 * var(--s-12)) 0; padding: 0;
  border: 0; background: none; color: var(--ink); cursor: pointer; vertical-align: middle; }
.cal-glyph .glyph svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; opacity: .75; }
/* 7. The facts, bigger: one per line, the value a size up in the ink color (at least the size of what they wrote), the label
   small and gray beside it. */
.facts-list { display: grid; gap: var(--s-4); }
.fact-l { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: var(--s-12); align-items: baseline; }
.fact-l .fk { font: 500 .78rem/1.3 var(--ui); color: var(--muted); }
.fact-l .fv { font: 500 16px/1.35 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.fact-l .fv a { color: inherit; text-decoration: underline; text-decoration-color: var(--quote-stripe); text-underline-offset: 3px; }
.fact-l .fv small { color: var(--muted); font-size: .8em; }
.card.open .cblk.wrote .facts-line { margin-top: var(--s-8); }
/* 9. The card is the conversation: no boxes. What the calendar says about a request's day is a fact in its color. */
.avail.bare { background: none; padding: 0; min-height: 44px; margin: calc(-1 * var(--s-12)) 0; border-radius: 0; font: 500 16px/1.35 var(--ui); gap: var(--s-4); }
.avail.bare i { display: none; }
/* 8. The row is the head: one template for the folded row and the open card's head, in every tab, so nothing moves when a
   card opens. Since build19 item 7, three lines (below); the same padding, type and heights open or folded. */
.card.mrow { display: block; padding: 0; }
.card.mrow .contact-btn.bubble { flex: none; width: 44px; min-height: 44px; margin: calc(-1 * var(--s-8)) 0; padding: 0; border: 0; justify-content: center;
  color: var(--ink); background: radial-gradient(circle, var(--raised) 14px, var(--raised-line) 14.5px, var(--raised-line) 15.5px, transparent 16px); }
.card.mrow .contact-btn.bubble svg { width: 16px; height: 16px; }
.card.mrow .contact-btn.bubble[aria-expanded="true"] { color: var(--brand-soft); background: radial-gradient(circle, var(--brand-bg) 14px, var(--brand) 14.5px, var(--brand) 15.5px, transparent 16px); }
/* The body unfolds under the three lines. */
.card.open.mrow > .cblk.wrote { padding-top: 0; }
/* Sent's Nudge? line rides on top of the two lines, open or folded. */
.card.mrow.nudgeable { display: block; }
.card.mrow > .nudge-line { margin: 0; padding: var(--s-12) var(--s-16) var(--s-8) var(--s-24); }
/* Other mail: the same two lines, why it's here on the second (two lines at most), what to do with it under them. */
.card.mrow.aside-line { display: block; }
.card.mrow.aside-line .aside-acts { display: flex; justify-content: flex-end; gap: var(--s-16); margin: calc(-1 * var(--s-8)) 0 0; padding: 0 var(--s-16) var(--s-8) var(--s-24); }
.card.mrow.aside-line .tag, .card.mrow.held .tag { color: var(--muted); background: var(--raised); box-shadow: inset 0 0 0 1px var(--line); }
/* 5. One Book, in the Send row: Send and Book on top (the two that answer), Edit, Attach and Later under them. Book is the
   green outline with the calendar glyph; it opens a two-line sheet. */
.card.open .actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.card.open .actions > .send-split, .card.open .actions > .owner-sends { grid-column: 1 / -1; }
.card.open .actions.with-book > .send-split { grid-column: 1 / 3; }
.card.open .actions > .btn.book { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-8); font-weight: 700;
  color: var(--green); border-color: var(--green); }
.card.open .actions > .btn.book .ico { width: 17px; height: 17px; }
.pick-sheet .pick-lines { display: grid; gap: var(--s-12); margin-top: var(--s-8); }
.pick-sheet .pick-lines .btn { min-height: 52px; font-size: 1rem; }
.pick-sheet .pick-lines .btn.quiet { background: none; font-weight: 600; color: var(--ink); }
.ev-acts .ev-start-inv { justify-content: flex-start; padding: 0; }
/* 6. Schedule the send: a small arrow on Send (its own 44 point tap, the same purple), the sheet's lines, and Sent's line with
   Stop. */
.send-split { display: flex; min-width: 0; gap: 0; }
.send-split .send-main { flex: 1 1 auto; min-width: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.send-split .send-more { flex: none; width: 44px; min-height: 44px; display: grid; place-items: center; padding: 0; cursor: pointer;
  border: 0; border-left: 1px solid color-mix(in srgb, var(--brand-ink) 35%, transparent); border-radius: 0 10px 10px 0; background: var(--brand); color: var(--brand-ink); }
.send-split .send-more svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.pick-time { display: grid; gap: var(--s-12); margin-top: var(--s-4); }
.pick-day { display: flex; gap: var(--s-8); }
.pick-day label { flex: 1; position: relative; }
.pick-day input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pick-day span { display: grid; place-items: center; min-height: 44px; border-radius: 999px; border: 1.5px solid var(--line); font-weight: 600; color: var(--ink); }
.pick-day input:checked + span { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-soft); }
.pick-day input:focus-visible + span { outline: 2px solid var(--brand-soft); outline-offset: 2px; }
.pick-clock { display: grid; gap: var(--s-4); }
.pick-clock span { font-size: .85rem; color: var(--muted); }
.pick-clock input { min-height: 44px; font-size: 16px; padding: 0 var(--s-12); border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--card); color: var(--ink); }
.card.mrow > .sched-line { color: var(--ink); }

/* ── Build 19a (docs/design-notes-2026-10-05-build19.md) ── */
/* 7. The row carries everything: three snug lines, each a size up and clipped before it wraps, the head tight to the top.
   Line 1 the name (the biggest thing on the row; a tap to the customer's page, ink with a tiny gray chevron), the org in the
   smaller gray, the bubble, the tag; line 2 the glyph and the full date, "Received 12:45pm" at its right end; line 3 the place
   and the event, and, open, the fold chevron at its right end (a folded row keeps its room). Whole-pixel sizes, so the lines sit
   on the same pixels open or folded. The name never gives up room to the org. */
.card.mrow > .head.mhead { display: grid; gap: 0; padding: var(--s-8) var(--s-12) var(--s-12) var(--s-20); }
.card.mrow .mh1 { display: flex; align-items: center; gap: var(--s-8); min-height: 34px; min-width: 0; }
.card.mrow .mh-who { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.card.mrow .mh-name { flex: 0 0 auto; max-width: 100%; display: inline-flex; align-items: center; font: 700 18px/24px var(--ui); color: var(--ink);
  white-space: nowrap; overflow: hidden; }
.card.mrow .mh-name .mh-n { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.card.mrow button.mh-name { min-height: 44px; margin: calc(-1 * var(--s-4)) 0; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.card.mrow .mh-chev { flex: none; display: inline-grid; place-items: center; width: 12px; margin-left: var(--s-4); color: var(--muted); }
.card.mrow .mh-chev svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.card.mrow .mh-who .co { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; font: 400 14px/20px var(--ui); color: var(--muted); }
.card.mrow .mh1 .tag { height: 30px; padding: 0 var(--s-12); font-size: 15px; margin-left: auto; flex: none; }
.card.mrow .mh2, .card.mrow .mh3 { display: flex; align-items: center; min-width: 0; min-height: 24px; font: 500 16px/22px var(--ui); color: var(--ink);
  overflow: hidden; white-space: nowrap; }
.card.mrow .mh2 .mf-t, .card.mrow .mh3 .mf-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card.mrow .mh3 { padding-right: var(--s-32); position: relative; }
.card.mrow .mh3 .sep { font-style: normal; color: var(--muted); }
.card.mrow .mh3.mf-else { color: var(--muted); font-weight: 400; }
.card.mrow .mh2 .cal-glyph { flex: none; min-width: 44px; min-height: 44px; justify-content: center; margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-8)) calc(-1 * var(--s-12)) calc(-1 * var(--s-12)); }
.card.mrow .mh2 .cal-glyph .glyph svg { width: 18px; height: 18px; }
.card.mrow .mh-at { flex: none; margin-left: auto; padding-left: var(--s-8); font: 500 13px/20px var(--ui); color: var(--muted); white-space: nowrap; }
.card.mrow .mh-fold { position: absolute; right: -12px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; }
.card.mrow .mh-fold svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.card.mrow.aside-line .mh3.mf-else { align-items: flex-start; white-space: normal; }
.card.mrow.aside-line .mh3.mf-else .mf-t { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; }
/* 15. The event sheet in two tenses: each row one line, its label small and gray at the left, its action in it. */
.ev-rows { display: grid; gap: 0; margin: var(--s-8) 0 0; border-top: 1px solid var(--line); }
.ev-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--s-12); align-items: center; min-height: 52px;
  padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.ev-row-k { font: 500 .84rem/1.3 var(--ui); color: var(--muted); }
.ev-row-v { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4) var(--s-16); min-width: 0; font: 500 1rem/1.35 var(--ui); color: var(--ink); }
.ev-row-v .ev-row-open { color: var(--ink); text-align: left; min-height: 44px; padding: 0; text-decoration: none; font-weight: 500; }
.ev-row-v .ev-row-act { min-height: 44px; padding: 0; }
.ev-row-v .ev-row-note { color: var(--muted); font-size: .9rem; }
.ev-worked { line-height: 1.45; padding-block: var(--s-8) !important; }
.ev-rows .labor { border: 0; margin: 0; padding: var(--s-8) 0 var(--s-12); border-bottom: 1px solid var(--line); }
.ev-made { padding: var(--s-12) 0; border-bottom: 1px solid var(--line); }
.ev-made > .label { display: block; margin-bottom: var(--s-8); }
.ev-checkin { margin: var(--s-12) 0 0; color: var(--ink); font-size: .95rem; }
/* 13. The address keeps its underline, a map pin after it; either opens the choice sheet (Apple Maps / Google Maps). */
.ev-where { display: inline; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: left;
  text-decoration: underline; text-decoration-color: var(--quote-stripe); text-underline-offset: 3px; }
.ev-pin { display: inline-grid; place-items: center; width: 44px; height: 44px; margin: calc(-1 * var(--s-12)) calc(-1 * var(--s-8)) calc(-1 * var(--s-12)) calc(-1 * var(--s-4)); padding: 0; border: 0; background: none;
  color: var(--brand-soft); cursor: pointer; vertical-align: middle; }
.ev-pin svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pick-sheet .pick-lines a.btn { display: grid; place-items: center; text-decoration: none; }
/* + Add's sheet (build25, item 3): the add-ons behind the row, one a line with its amount, a check on one already on this booking;
   "Set up add-ons in Rules ›" at the foot. */
.addon-list { display: grid; gap: var(--s-8); margin-top: var(--s-12); }
.addon-pick { display: flex; align-items: center; gap: var(--s-12); width: 100%; min-height: 56px; padding: var(--s-8) var(--s-16); text-align: left;
  border: 1.5px solid var(--raised-line); border-radius: 12px; background: var(--raised); color: var(--ink); cursor: pointer; }
.addon-pick[aria-checked="true"] { border-color: var(--ink); }
.addon-pick .ap-l { display: grid; gap: var(--s-4); flex: 1; min-width: 0; }
.addon-pick b { font: 700 1rem/1.2 var(--ui); }
.addon-pick small { font: 500 .9rem/1.2 var(--ui); color: var(--muted); }
.addon-pick .ap-check { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--field-line); display: grid; place-items: center;
  font: 800 .95rem/1 var(--ui); font-style: normal; }
.addon-pick[aria-checked="true"] .ap-check { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.addon-none { margin: var(--s-12) 0 0; color: var(--muted); }
.addon-sheet .addon-rules { margin-top: var(--s-16); min-height: 44px; padding: 0 var(--s-4); font-weight: 600; color: var(--brand-soft); text-decoration: none; }
/* 6. Contact us: one row, Email and the address, Open and Copy small at its right. */
.contact-us .cu-row { display: flex; align-items: center; gap: var(--s-12); padding: var(--s-12) 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.contact-us .cu-what { flex: 1 1 auto; min-width: 0; display: grid; gap: 0; }
.contact-us .cu-k { font: 500 .84rem/1.3 var(--ui); color: var(--muted); }
.contact-us .cu-v { font: 600 1rem/1.35 var(--ui); color: var(--ink); overflow-wrap: anywhere; }
.contact-us .cu-btns { flex: none; display: flex; gap: var(--s-8); }
.contact-us .cu-btns .btn { min-height: 44px; min-width: 64px; padding: 0 var(--s-12); display: inline-grid; place-items: center; text-decoration: none; color: var(--ink); }
/* 5. Notes: New note on top, then each note its title, its day and its first line; open, the title and the body edit in place. */
.lists-page .note-new { width: 100%; min-height: 48px; margin-bottom: var(--s-12); }
.lists-page .note-q { width: 100%; min-height: 44px; margin-bottom: var(--s-12); padding: 0 var(--s-12); font-size: 16px; border-radius: 10px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); }
.li-row.note .note-open { display: grid; gap: 0; width: 100%; min-height: 56px; padding: var(--s-8) 0; border: 0; background: none; text-align: left;
  color: var(--ink); cursor: pointer; font: inherit; }
.li-row.note .note-head { display: flex; align-items: baseline; gap: var(--s-8); min-width: 0; }
.li-row.note .note-head .li-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.li-row.note .note-when { flex: none; color: var(--muted); font-size: .8rem; }
.li-row.note .note-peek { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.li-row.note.open { display: grid; gap: var(--s-8); padding: var(--s-12); }
.li-row.note.open .note-title { min-height: 44px; font: 600 17px/1.3 var(--ui); padding: 0 var(--s-8); border-radius: 8px; border: 1.5px solid var(--line);
  background: var(--card); color: var(--ink); }
.li-row.note.open .note-body { width: 100%; min-height: 180px; font: 400 16px/1.45 var(--ui); padding: var(--s-8); border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); resize: vertical; }
.li-row.note.open .note-acts { display: flex; gap: var(--s-8); }
.li-row.note.open .note-acts .btn { flex: 1; min-height: 44px; }
/* 2. Name your Curbaroo: the box the row's full width minus Save, Save on the same line at its right end, the same height. */
.assist-name { display: grid; gap: var(--s-4); margin-top: var(--s-16); }
.assist-name .an-label { font: 500 .85rem/1.3 var(--ui); color: var(--muted); }
.assist-name .an-row { display: flex; align-items: stretch; gap: var(--s-8); }
.assist-name .an-row input { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; box-sizing: border-box; font-size: 16px; padding: 0 var(--s-12);
  border-radius: 10px; border: 1.5px solid var(--field-line); background: var(--card); color: var(--ink); }
.assist-name .an-row .btn { flex: none; height: 46px; min-height: 46px; box-sizing: border-box; padding: 0 var(--s-16); }

/* ── Design notes 2026-10-05-build19, item 14: nothing under Safari's bars ── On iPhone Safari the URL bar and the toolbar stay
   up on a screen that doesn't scroll, and the layout viewport (100vh, inset 0) runs under the toolbar. The welcome, the deck and
   the app's bottom bar size themselves to the dynamic viewport (100dvh, 100vh first for a browser without it) and pad the bottom
   with the safe area, so Get started and the bar's buttons sit above the toolbar. A home-screen launch (standalone) has no bars
   and the same rules hold. The welcome scrolls rather than hide its button when a card is taller than the screen, and its card
   centers with auto margins so its top is never out of reach. */
.shell { min-height: 100vh; min-height: 100dvh; }
.welcome { inset: 0 0 auto 0; height: 100vh; height: 100dvh; display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding-bottom: calc(var(--s-16) + env(safe-area-inset-bottom)); }
.welcome > .welcome-card { margin: auto; flex: none; }
/* The bar (.nav) is fixed to the bottom with the safe area under its buttons, and the page (.view) pads by the bar and the safe
   area, as they have since the bar came (above); tests/test_e2e_b19b.py holds them at 390 by 664. */

/* Design notes 2026-10-05-build19, item 1: the Rules page under four headers, each title with one gray line under it, and room
   between the sections. */
.rules-page .rsec { display: grid; gap: var(--s-12); }
.rules-page .rsec { margin-top: var(--s-8); }
.rules-page .rsec + .rsec { margin-top: var(--s-24); }
.rules-page .rsec-head { display: grid; gap: 0; }
.rules-page .rsec-head h3 { margin: 0; font: 700 1.1rem/1.25 var(--ui); color: var(--ink); }
.rules-page .rsec-sub { margin: 0; font: 400 .88rem/1.3 var(--ui); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rules-page .rsec .rcards { margin-top: 0; }

/* Design notes 2026-10-05-build19, item 3: Terms and Privacy at the foot of the menu, one quiet gray line in the smallest text,
   a footer and not a row: its own breath of space above, and room under it so nothing ever sits on it. */
.menu .m-foot { margin: var(--s-32) 0 calc(var(--s-16) + env(safe-area-inset-bottom)); padding: 0 var(--s-8); text-align: center;
  font: 400 .72rem/1.4 var(--ui); color: var(--muted); }
.menu .m-foot a { color: var(--muted); text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 var(--s-4); vertical-align: middle; }   /* 44 points to tap */
.menu .m-foot .m-ver { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); vertical-align: middle; }

/* ── Reports, under Income (design notes 2026-10-06-reports): the list, then one report a phone screen: the number big, the
   period row with Columns and Report at its right end, the table. ── */
.rp-door { display: flex; align-items: center; justify-content: space-between; gap: var(--s-12); width: 100%; min-height: 48px; padding: var(--s-12);
  border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: inherit; text-align: left; cursor: pointer; }
.rp-door .chev, .rp-open .chev { color: var(--muted); font-size: 1.15rem; }
.rp-taxtime { color: var(--muted); font-size: .86rem; padding: 0 var(--s-4); }
.rp-list { display: grid; gap: var(--s-8); }
.rp-plain { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 0; background: none;
  font: 600 .95rem/1.2 var(--ui); color: var(--ink); cursor: pointer; }
.rp-plain .chev { color: var(--muted); }
.rp-big { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-16); padding: var(--s-16); border-radius: 14px;
  background: var(--card); border: 1px solid var(--line); }
.rp-big-l { display: grid; gap: var(--s-4); min-width: 0; }
.rp-big small, .rp-beside small { font: 600 .68rem/1.2 var(--ui); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rp-big-l b { font: 800 2.4rem/1.1 var(--ui); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rp-beside { display: grid; gap: var(--s-4); justify-items: end; text-align: right; }
.rp-beside b { font: 700 1.3rem/1.1 var(--ui); color: var(--muted); font-variant-numeric: tabular-nums; }
.rp-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s-8); width: 100%; min-width: 0; }
.rp-end { display: inline-flex; align-items: center; gap: var(--s-8); flex: none; }
.rp-cols { min-height: 36px; padding: 0 var(--s-12); border-radius: 999px; border: 1px solid var(--raised-line); background: var(--raised);
  color: var(--ink); font: 600 .82rem/1 var(--ui); cursor: pointer; }
.rp-go { min-height: 36px; padding: 0 var(--s-12); font-size: .86rem; }
.rp-note { color: var(--muted); font-size: .84rem; padding: 0 var(--s-4); }
.rp-scroll { overflow-x: auto; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.rp-table { width: 100%; border-collapse: collapse; font-size: .84rem; font-variant-numeric: tabular-nums; }
.rp-table th { text-align: left; padding: var(--s-8) var(--s-8); border-bottom: 1.5px solid var(--line); color: var(--muted); font-weight: 700;
  font-size: .74rem; white-space: nowrap; }
.rp-table td { padding: var(--s-8) var(--s-8); border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: break-word; }
.rp-table td.short { white-space: nowrap; }
.rp-table .num { text-align: right; white-space: nowrap; }
.rp-table tr.rp-total td { font-weight: 800; border-top: 1.5px solid var(--ink); border-bottom: 0; }
.rp-checks { display: grid; gap: var(--s-4); }
.rp-check { display: flex; align-items: center; gap: var(--s-12); min-height: 44px; padding: 0 var(--s-4); font-size: 1rem; cursor: pointer; }
.rp-check input { width: 22px; height: 22px; accent-color: var(--brand); }
.rp-line { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-4); border: 0; background: none;
  font: 500 .84rem/1.2 var(--ui); color: var(--muted); cursor: pointer; }
.page-head .rp-line { margin-left: auto; flex: none; }

/* Skip to content (Build 21 item 5): the first Tab stop, off screen until it has focus. */
.skip-link { position: fixed; z-index: 100; top: calc(8px + env(safe-area-inset-top)); left: 8px; padding: var(--s-8) var(--s-16);
  min-height: 44px; display: inline-flex; align-items: center; border-radius: 10px; background: var(--brand); color: var(--brand-ink);
  font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* 200% zoom (Build 21 item 8): at 320 CSS px nothing scrolls sideways (the page's one column never grows past the screen for a
   wide row); under 320 (a 390 phone at 200%) the header wraps, the bar keeps its icons with the words read but not shown, and
   Menu stays on screen. */
.view, .rows { grid-template-columns: minmax(0, 1fr); }
.demo-sample { flex-wrap: wrap; }
.demo-sample .ds-words { flex: 1 1 8em; }
@media (max-width: 319px) {
  .head-line { flex-wrap: wrap; row-gap: 0; }
  .demo-pills { flex: 1 1 100%; min-width: 0; flex-wrap: wrap; }
  .card.mrow .mh1, .card.mrow .mh2 { flex-wrap: wrap; }
  .demo-ask { min-width: 0; }
  .da-btns { grid-template-columns: minmax(0, 1fr); }
  .nav { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .nav button > span:last-of-type, #nav .ask-name { position: absolute; width: 1px; min-width: 0; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .inbox-bar .seg { overflow-x: auto; }
}

/* No sideways scroll on any page at 320 or 195 (design notes 2026-10-06-build22, item 7; Build 21 item 8 fixed the Mailbox): a page's
   one column never grows past the screen for a wide row (a grid track sizes to its widest child otherwise), and the rows that
   wouldn't wrap (the page's head, the period control, the Calendar's bar) wrap or shrink. Nothing is clipped. */
.events { grid-template-columns: minmax(0, 1fr); }
.events > * { min-width: 0; }
.page-head { flex-wrap: wrap; row-gap: var(--s-4); }
.seg { max-width: 100%; }
.ev-left { flex-wrap: wrap; min-width: 0; }
.rules-page .rsec, .rules-page .rsec-head { min-width: 0; }
.rules-page .rsec-head { grid-template-columns: minmax(0, 1fr); }
.inc-profit { min-width: 0; }
.inc-profit > * { min-width: 0; overflow-wrap: anywhere; }
/* A money amount never breaks mid-number (design notes 2026-10-06-build23, item 1): the profit figure stays on one line and its
   font shrinks with the card when the column is narrow (2.4rem from about 260 px of card; 195 wide reads it whole). Income and
   Costs keep their amounts whole and wrap between the two. */
.inc-profit { container-type: inline-size; }
.inc-profit > b { overflow-wrap: normal; white-space: nowrap; font-size: min(2.4rem, 15cqi); }
.inc-two { flex-wrap: wrap; row-gap: var(--s-4); }
.inc-two b { white-space: nowrap; }
.wallet .slot { flex-wrap: wrap; }
.slot-btns { flex-wrap: wrap; }
@media (max-width: 359px) {
  /* Equal columns only under 360; above it the two buttons keep their old widths (design notes 2026-10-06-build23, item 2). */
  .m-access-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .m-access, .m-feedback { white-space: normal; text-align: center; line-height: 1.2; }   /* one line each above 360 */
  .seg { flex-wrap: wrap; }
  .inc-period .seg { flex-wrap: wrap; }
  .seg button { padding-left: var(--s-12); padding-right: var(--s-12); }
}
@media (max-width: 319px) {
  .m-access-row { grid-template-columns: minmax(0, 1fr); }
  .rules-page .rsec-sub { white-space: normal; }
}
.rules-page .rsec { grid-template-columns: minmax(0, 1fr); }
.rules-page .rsec > * { min-width: 0; }
.rule-add, .rule-add.tell { min-width: 0; }
.rule-add.tell { grid-template-columns: minmax(0, 1fr); }
.rule-add.tell > * { min-width: 0; }
.m-row { grid-template-columns: 34px minmax(0, 1fr) auto; }
.m-row .m-name { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 319px) {
  .card.line:not(.nudgeable):not(.aside-line) { flex-wrap: wrap; }   /* a person's row: the name and mail, then the count and date */
  .card.line .l { flex: 1 1 100%; min-width: 0; }
  .li-todo .li-text { flex: 1 1 100%; }                              /* a to-do's words on their own line, the due date under */
}
/* Below about 240 px the raised Ask circle shrinks to its slot (it overlapped the Calendar and Invoices icons at 195): 34 px, the
   mark scaled with it, centered over the slot, still raised the same way (its bottom edge where the other icons' sit). */
@media (max-width: 239px) {
  .ask-slot { justify-items: center; }
  .ask-circle { width: 34px; height: 34px; margin-top: calc(-1 * var(--s-16)); margin-left: auto; margin-right: auto;
    box-shadow: 0 0 0 3px var(--chrome), 0 6px 14px -6px rgba(0,0,0,.6); }
  .ask-slot[aria-current="page"] .ask-circle { box-shadow: 0 0 0 2px #4a148c, 0 0 0 3px var(--chrome), 0 6px 14px -6px rgba(0,0,0,.6); }
  .nav .ask-circle .ask-mark { height: 24px; }
}
.ask-chip { max-width: 100%; min-width: 0; white-space: normal; text-align: center; height: auto; }   /* Ask's three wrap, never cut (item 7) */
.ask-chips { min-width: 0; }

/* A row stays put when it opens (design notes 2026-10-06-build25, item 8): an invoice opened from the list unfolds in place under
   its row, the same sheet drawn in the list's flow instead of over the page. */
#inv.sheet.inline { position: static; inset: auto; z-index: auto; width: auto; max-width: none; max-height: none; margin: calc(-1 * var(--s-4)) 0 var(--s-8);
  overflow: visible; border: 1px solid var(--line); border-radius: 12px; box-shadow: none; }
#inv.sheet.inline .cal-sheet { padding-bottom: var(--s-16); }
#inv.sheet.inline::before { content: none; }   /* no grabber: it isn't a sheet to pull down */
/* Scheduling (design notes 2026-10-06-build24, item 1). The assign sheet over a coming event: who's on it with their two times
   and the hours they make, then pick someone and a start and an end; See the schedule at its foot. */
.asg-sheet { gap: var(--s-12); }
.asg-event { margin: 0; display: grid; gap: var(--s-4); }
.asg-event span { font: 500 .9rem/1.3 var(--ui); color: var(--muted); }
.asg-rows { display: grid; gap: var(--s-12); }
.asg-row { display: grid; gap: var(--s-8); padding: var(--s-12); border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.asg-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); }
.asg-times { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--s-8); align-items: end; }
.asg-times input { min-height: 44px; }
.asg-hours { font: 600 .9rem/1 var(--ui); color: var(--muted); padding-bottom: var(--s-12); white-space: nowrap; }
.asg-x { justify-self: start; min-height: 44px; }
.asg-add { display: grid; gap: var(--s-12); }
.asg-people { display: flex; flex-wrap: wrap; gap: var(--s-8); }
.asg-pick { min-height: 44px; align-content: center; }
.asg-pick.on { border-color: var(--brand); background: var(--brand-bg); color: var(--brand-soft); }
.asg-pick.off { opacity: .55; border-style: dashed; }
.asg-pick.off.on { opacity: 1; }
.asg-week { justify-self: start; min-height: 44px; color: var(--muted); font-weight: 600; }
/* The small word beside each name (items 1b and 1f): not sent until the week goes out, then sent, seen, confirmed or can't
   make it (flagged). */
.ev-crew { display: grid; gap: var(--s-4); text-align: left; }
.crew-name { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); }
.crew-st { font: 600 .74rem/1.2 var(--ui); color: var(--muted); }
.crew-st.st-confirmed { color: var(--green); }
.crew-st.st-changed { color: var(--amber-ink); }
.crew-st.st-declined { color: var(--red); }
.crew-st.st-declined::before { content: "\2691"; margin-right: var(--s-4); }
/* The Team page's row (item 1f): their next event, and a day off coming, under the hours line. */
.trow-next, .trow-off { font: 500 .8rem/1.3 var(--ui); color: var(--muted); }
.trow-off { color: var(--amber-ink); }
/* The Calendar's Crew view (item 1c): Events / Crew at the top; the week by person under one Send button. */
.cal-mode { justify-self: start; }
.crew-week { display: grid; gap: var(--s-12); }
.crew-send { min-height: 48px; }
.crew-line { margin: 0; }
.crew-people { display: grid; gap: var(--s-12); }
.crew-person { display: grid; gap: var(--s-8); padding: var(--s-12) var(--s-16); border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.crew-person.due { border-color: var(--amber-ink); }
.cp-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); }
.cp-events { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-8); }
.cp-ev { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4) var(--s-8); cursor: pointer; font: 500 .95rem/1.35 var(--ui); }
.cp-day { font-weight: 700; min-width: 5.6em; }
.cp-time { color: var(--muted); }
.cp-title { min-width: 0; overflow-wrap: anywhere; }
.cp-gone { cursor: default; color: var(--muted); }
.cp-off { margin: 0; font: 600 .85rem/1.3 var(--ui); color: var(--amber-ink); }
.cp-none { margin: 0; font: 500 .9rem/1.3 var(--ui); color: var(--muted); }
/* A crew member's day off on the day (item 1e): one quiet line, "Jess off", and their note. */
.dv-offs { display: grid; gap: var(--s-4); padding: 0 var(--s-16); }
.dv-off { margin: 0; font: 600 .9rem/1.3 var(--ui); color: var(--muted); }
.dv-off small { font-weight: 500; }