/* ==========================================================================
   HOME — one design at three widths (WOW V1, 2026-09-23)

   views/dashboard.js (desk), views/mobile-home.js (phone), and the parts both
   draw from, views/home-parts.js. benchmark.md §1 (Home/Today) and §10 (first
   sign-in). Built on design system v2 (app.css, bottom): surfaces with one
   hairline and no shadow, ui.hero for the one big number, ui.summary for the
   quiet figures, a dot for status and never a lit box.

   The gap between Home's blocks is ONE number, set on the joins below, not on
   any one block — which blocks appear depends on the person and the day.
   ========================================================================== */

/* ---- The greeting line -------------------------------------------------- */
.homehello { margin:-4px 0 26px; font-size:1.1875rem; line-height:1.4; color:var(--steel); }
.homehello b { color:var(--ink); font-weight:600; }
.homehello__n { color:var(--ink2); }

/* ---- The money that came in: two hero figures, no boxes ------------------ */
.homemoney { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px 26px; }
.homemoney > .herofig { margin:0; padding:2px 0; min-width:0; }
.homemoney > .herofig + .herofig { border-left:1px solid var(--surface-line); padding-left:26px; }
@container view (max-width:560px) {
  .homemoney { grid-template-columns:1fr; }
  .homemoney > .herofig + .herofig { border-left:0; padding-left:0; }
}
.homenote { margin:10px 0 0; font-size:0.9375rem; color:var(--steel); max-width:72ch; }

/* ---- The desk's gaps: two numbers and one exception ---------------------
   26px between SECTIONS (greeting · Get set up · the money · Needs you and
   Today · what is owed), 14px between SURFACES stacked inside one section
   (the owed line, the 30-day strip, the navy card — the house rule), and the
   one sentence under the money sits 10px under its figures because it
   belongs to them. Measured with the harness, 2026-09-23. */
.homehello + .setup { margin:0; }
.homenote + .homegrid, .homemoney + .homegrid { margin-top:26px; }
.homegrid + .sumline, .homegrid + .volrow { margin-top:14px; }
.homeowed { margin:14px 0 0; }
.homeowed + .volrow { margin-top:14px; }

/* ---- Needs you | Today ---------------------------------------------------- */
.homegrid { align-items:start; gap:14px; }
.homegrid > .homecard { align-self:start; padding:20px 20px 12px; }
.homecard .card__head { min-height:44px; margin-bottom:6px; }
.homecard__meta { font-size:0.9375rem; color:var(--steel); font-variant-numeric:tabular-nums; }
.homecard__go { margin-left:auto; }
/* When the head wraps (HVAC's longer "Today's service calls"), the button that
   drops to its own line keeps to the right edge under the one above it,
   rather than jumping to the left under the title (owner/office walk, M3).
   The .card__head a.button ~ a.button rule would otherwise zero it. */
.homecard .card__head a.button.homecard__go ~ a.button.homecard__go { margin-left:auto; }
.homecard .empty { padding:22px 8px 18px; }

/* A Needs-you row: the thing (the whole left part is a link) and one verb. */
.needlist { list-style:none; margin:0; padding:0; }
.needrow { display:flex; align-items:center; gap:12px; min-height:64px;
           border-top:1px solid var(--surface-line); }
.needrow:first-child { border-top:0; }
.needrow__m { flex:1; min-width:0; display:flex; align-items:center; gap:12px;
              align-self:stretch; padding:10px 8px; margin-left:-8px; border-radius:10px;
              color:var(--ink); text-decoration:none;
              transition:background var(--t-quick) var(--ease-out); }
.needrow__m:hover { background:var(--band); }
.needrow__m:focus-visible { outline:3px solid var(--accent-bright); outline-offset:-3px; }
.needrow__w { display:flex; flex-direction:column; min-width:0; }
.needrow__w b { font-size:1.0625rem; font-weight:600; line-height:1.3; }
.needrow__s { font-size:0.9375rem; color:var(--steel); line-height:1.35;
              overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.needrow .dot { margin-top:1px; }
/* A row with nothing to warn about keeps the dot's room, so the words of every
   row line up — but draws nothing. */
.dot--none { background:transparent; }
.needrow__go { flex:none; min-height:44px; white-space:nowrap; }

/* Today's jobs */
.homejobs { gap:0; }
.homejobs > li + li { border-top:1px solid var(--surface-line); }
.homejob { min-height:64px; margin:0 -8px; padding:8px; border-radius:10px;
           transition:background var(--t-quick) var(--ease-out); }
.homejob__t { color:var(--ink); min-width:5.2em; }
.homejob.is-done .homejob__m b { color:var(--steel); }
.homejob.is-done .homejob__t { color:var(--mute); }
.homejob__st { flex:none; font-size:0.9375rem; color:var(--steel); }
.homejob__st--on { color:var(--accent-dark, #1F5A85); font-weight:600; }

/* ---- The quieter money ---------------------------------------------------- */
/* The 30-day strip (Greg, 2026-09-16: four figures, one period) reads as one
   surface with hairlines between, like the summary line above it — not four
   more boxes. */
.homegrid ~ .volrow, .homeowed ~ .volrow {
  gap:0; background:var(--surface); border:1px solid var(--surface-line);
  border-radius:var(--r-surface); overflow:hidden;
}
.homegrid ~ .volrow .volcard, .homeowed ~ .volrow .volcard {
  border:0; border-left:1px solid var(--surface-line); border-radius:0;
  box-shadow:none; transform:none; min-height:92px; padding:16px 20px;
}
.homegrid ~ .volrow .volcard:first-child, .homeowed ~ .volrow .volcard:first-child { border-left:0; }
.homegrid ~ .volrow .volcard:hover, .homeowed ~ .volrow .volcard:hover { background:var(--band); transform:none; }
.homegrid ~ .volrow .volcard__n, .homeowed ~ .volrow .volcard__n {
  font-size:1.5rem; font-weight:600; color:var(--ink);
}
.homegrid ~ .volrow .volcard__lab, .homeowed ~ .volrow .volcard__lab { font-weight:500; color:var(--steel); font-size:0.9375rem; }
@container view (max-width:720px) {
  .homegrid ~ .volrow .volcard:nth-child(3) { border-left:0; }
  .homegrid ~ .volrow .volcard:nth-child(n+3) { border-top:1px solid var(--surface-line); }
}

/* ==== Get set up ============================================================
   Benchmark §10. A card at the top of Home for a business still setting up:
   five rows, each ticked by the data, each opening the real screen. */
.setup { padding:20px 20px 8px; }
.setup__head { display:flex; align-items:flex-start; gap:14px; }
.setup__head > div { flex:1; min-width:0; }
.setup__head h2 { margin:0; font-size:1.375rem; }
/* 17px throughout (apple-ease; onboarding S2): the owner reads this card
   first, often with reading glasses. */
.setup__sub { margin:4px 0 0; font-size:1.0625rem; color:var(--steel); }
.setup__hide { flex:none; min-height:44px; }
.setup__bar { height:6px; border-radius:3px; background:var(--band); margin:16px 0 6px; overflow:hidden; }
.setup__fill { display:block; height:100%; border-radius:3px; background:var(--accent-bright);
               transition:width var(--t-slow) var(--ease-out); }
.setup__rows { list-style:none; margin:0; padding:0; counter-reset:none; }
.setup__rows > li + li { border-top:1px solid var(--surface-line); }
.setup__row { display:flex; align-items:center; gap:14px; width:100%; min-height:64px;
              margin:0 -8px; padding:8px; box-sizing:content-box; border-radius:10px;
              background:none; border:0; text-align:left; cursor:pointer; color:var(--ink);
              font:inherit; text-decoration:none;
              transition:background var(--t-quick) var(--ease-out); }
button.setup__row { width:100%; }
.setup__row:hover { background:var(--band); }
.setup__row:focus-visible { outline:3px solid var(--accent-bright); outline-offset:-3px; }
.setup__m { flex:1; min-width:0; display:flex; flex-direction:column; }
.setup__m b { font-size:1.0625rem; font-weight:600; }
.setup__s { font-size:1.0625rem; color:var(--steel); }
.setup__row.is-done .setup__m b { color:var(--steel); font-weight:500; }
/* The tick: an empty ring until the data says it is done, then a green check
   that draws itself (320ms) the first time it is seen done. */
.setup__tick { flex:none; width:28px; height:28px; border-radius:50%;
               border:2px solid var(--hair-strong, rgba(19,41,75,.34)); box-sizing:border-box;
               display:inline-flex; align-items:center; justify-content:center; color:var(--green); }
.setup__tick.is-done { border:0; }
.setup__svg { width:28px; height:28px; display:block; }
.setup__c { fill:var(--green); stroke:none; }
.setup__p { fill:none; stroke:#fff; stroke-width:5; stroke-linecap:round; stroke-linejoin:round; }
.setup__tick.is-new .setup__c { transform-origin:26px 26px; animation:setup-pop var(--t-slow) var(--ease-out) both; }
.setup__tick.is-new .setup__p { stroke-dasharray:40; stroke-dashoffset:40;
  animation:v2-draw var(--t-slow) var(--ease-out) calc(var(--t-slow) * .5) forwards; }
@keyframes setup-pop { from { transform:scale(.4); opacity:0; } to { transform:scale(1); opacity:1; } }
.setup .rowchev { color:var(--mute); }
.setup--done { display:flex; align-items:center; gap:14px; padding:18px 20px; }
.setup--done h2 { margin:0; font-size:1.25rem; }
/* The setup registry's rows (onboarding S2). A row and its ⋯ sit side by
   side: the whole row opens the step, ⋯ holds "Not needed". */
.setup__rows > li { display:flex; align-items:center; gap:8px; }
.setup__rows > li > .setup__row { flex:1; min-width:0; width:auto; }
.setup__rows > li > .rowmenu__btn { flex:none; }
/* A row with no ⋯ keeps the ⋯'s place, so the minutes and the chevrons of
   every row line up in one column (Get set up, desk shot 2026-09-24). */
.setup__rows > li:not(:has(> .rowmenu__btn))::after { content:''; flex:none; width:var(--setup-more-w, 92px); }
.setup__rows > li > .rowmenu__btn { width:var(--setup-more-w, 92px); justify-content:center; }
.setup__minline { display:none; font-size:1.0625rem; color:var(--steel); font-variant-numeric:tabular-nums; }
@media (max-width: 600px) {
  .setup__min { display:none; }
  .setup__minline { display:block; }
  .setup__rows > li:not(:has(> .rowmenu__btn))::after { display:none; }
}
.setup__min { flex:none; font-size:1.0625rem; color:var(--steel); font-variant-numeric:tabular-nums; }
.setup__row.is-aside .setup__m b { color:var(--steel); font-weight:500; }
/* The ISO's steps: under a rule, nothing to press, not counted. */
.setup__waits { list-style:none; margin:8px 0 0; padding:14px 0 6px; border-top:1px solid var(--surface-line); }
.setup__wait { display:flex; align-items:center; gap:14px; min-height:44px; }
.setup__wait + .setup__wait { margin-top:14px; }
.setup__tick.is-wait { border-style:dashed; }
/* Everything of theirs done: the grow steps, folded. */
.setup--grow { padding:0 20px; }
.setup__grow { display:flex; flex-direction:column; justify-content:center; min-height:64px;
               cursor:pointer; list-style:none; }
.setup__grow::-webkit-details-marker { display:none; }
.setup__grow b { font-size:1.0625rem; }
.setup--grow[open] .setup__rows { padding-bottom:8px; }

/* ==== The phone ============================================================= */
/* Everything on the phone sits 16px in from the edge; .mh cancels the view's
   own padding so the ground can run edge to edge. */
.mh > .setup, .mh > .mh__money, .mh > .mh__needs { margin-left:16px; margin-right:16px; }
.mh > .setup { padding:16px 16px 4px; }
.mh .setup__head h2 { font-size:1.25rem; }
.mh .setup__row { min-height:60px; }
.mh__money > .herofig { margin:0 0 12px; }
.mh__money > .sumline { margin:0; }
.mh__needs .mh__dayhead { margin-bottom:10px; }
/* Needs you on the phone: Reminders' count tiles (benchmark §9, the one
   thing to copy exactly) — two across, the number big, the words under it,
   a red dot when it warns. Each is a button to the list it counts. */
.mh .mh__needs .mh__chips { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr));
                            gap:12px; justify-content:stretch; }
.mh .mhchip { display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
              gap:4px; min-height:84px; padding:12px 14px; border-radius:var(--r-surface);
              text-align:left; letter-spacing:0; font:inherit;
              background:var(--surface); color:var(--ink); border:1px solid var(--surface-line);
              transition:background var(--t-quick) var(--ease-out); }
.mh .mhchip--no, .mh .mhchip--go { background:var(--surface); color:var(--ink); border-color:var(--surface-line); }
.mh .mhchip:active { background:var(--band); }
.mhchip__n { font-size:1.75rem; line-height:1.1; font-weight:600; font-variant-numeric:tabular-nums; }
.mhchip__l { display:flex; align-items:center; gap:7px; font-size:1.0625rem; line-height:1.3;
             font-weight:500; color:var(--ink2); }
.mhchip__l .dot { flex:none; }
/* ⚠ THE GLOBAL BUTTON RULE SAYS white-space:nowrap. A chip is a button, so
   "Phone follow-ups overdue" stayed on one line and pushed the phone's page to
   434px (platform walk 2, M1, 2026-09-25). The words wrap inside the tile. */
.mh .mhchip, .mhchip__l { white-space:normal; overflow-wrap:anywhere; }
.mhchip__l { min-width:0; }
.mhnow__k { display:block; font-size:0.875rem; font-weight:700; color:var(--accent-dark, #1F5A85); }
.mh__day .empty { padding:22px 8px; }

/* ⚠ ONE GAP BETWEEN THE PHONE'S BLOCKS: 14px, the house rule, and it is on
   the BLOCK, not on a join. The blocks present vary by role, by site mode
   and by the day, and a hidden sibling sits between the head and the first
   of them (the offline pill, display:none on a good connection) — a
   `.mh__head + .mh__money` join silently never matched and the money sat
   flush under the greeting (measured 0px, 2026-09-23). The head is always
   first, so every block after it can simply carry the gap. */
.mh > :is(.setup, .mh__money, .mh__needs, .mh__day, .volrow) { margin-top:14px; }
.mh > .mh__head { padding-bottom:4px; }

/* Site mode keeps its navy field: the chips there stay solid and bold. */
body.is-site .mh .mhchip { background:#fff; color:#000; border-color:#fff; }
body.is-site .mh .mhchip__l { color:#000; font-weight:700; }

/* A large phone on its side: two columns, every child placed. */
@media (min-width:701px) and (orientation:landscape) {
  .mh > .setup, .mh > .mh__money, .mh > .mh__needs, .mh > .volrow { grid-column:1; }
  .mh__day { grid-row:1 / span 6; }
  .mh > .mh__day { margin-top:0; }
}

/* The setup card's gap to whatever follows it on the desk. */
.setup + .homemoney, .setup + .homegrid { margin-top:26px; }

/* The 30-day strip reads number first, like every other figure on Home. */
.homegrid ~ .volrow .volcard__n, .homeowed ~ .volrow .volcard__n, .mh > .volrow .volcard__n { order:-1; margin-top:0; }
.homegrid ~ .volrow .volcard, .homeowed ~ .volrow .volcard, .mh > .volrow .volcard { gap:3px; }

/* On the phone the same strip is one surface, two by two, hairlines between. */
.mh > .volrow { gap:0; background:var(--surface); border:1px solid var(--surface-line);
                border-radius:var(--r-surface); overflow:hidden; }
.mh > .volrow .volcard { min-height:84px; padding:14px 16px; border:0; border-radius:0;
                         box-shadow:none; border-left:1px solid var(--surface-line); }
.mh > .volrow .volcard:nth-child(odd) { border-left:0; }
.mh > .volrow .volcard:nth-child(n+3) { border-top:1px solid var(--surface-line); }
.mh > .volrow .volcard__n { font-size:1.375rem; font-weight:600; color:var(--ink); }
.mh > .volrow .volcard__lab { font-weight:500; color:var(--steel); font-size:0.9375rem; }
.mh > .volrow .volcard:active { background:var(--band); }

/* Needs you and Today are one pair: the same height in a row. */
.homegrid > .homecard { align-self:stretch; }

/* The greeting line owns the gap under it, whatever comes first. */
.homehello + * { margin-top:0; }

/* ⚠ minmax(0,…), not 1fr. A grid track's floor is its content's min-content,
   and a job's one-line address (nowrap, ellipsis) made the Today column as
   wide as the address — at 1024 the card ran off the right edge
   (measured 2026-09-23). The ellipsis only works inside a track that may
   shrink. */
.homegrid { grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); }
.homegrid > .homecard { min-width:0; }
@media (max-width:900px) { .homegrid { grid-template-columns:minmax(0, 1fr); } }
/* An iPad (and a narrow desk window) stacks the pair, Needs you on top —
   benchmark §1 — rather than squeezing two lists into 430px each. */
@container view (max-width:1000px) { .homegrid { grid-template-columns:minmax(0, 1fr); } }
.homecard .card__head h2 { white-space:nowrap; }

/* The navy encouragement card (Greg, 2026-09-03) keeps its place on Home,
   after the work and compact: the day comes first. */
.qcard.homequote { min-height:0; margin-top:14px; padding:22px 28px; }
.qcard.homequote .qcard__q { font-size:1.25rem; }

/* The More links are 44px targets (apple-ease), measured at 26px on the
   first WOW V1 render. The row keeps its hairline and its left edge. */
.dashmore__l { display:inline-flex; align-items:center; min-height:44px; }

/* ==== Review round 1 (2026-09-23) ========================================== */

/* Hide / Undo act on the card in place. `hidden` loses to any author
   display rule, and .setup--done is a flex row — so say it outright. */
.setup[hidden] { display:none; }

/* The words under a row's title are what an owner actually reads ("3
   invoices past their due date"), so they are body size, not fine print. */
.needrow__s, .setup__s { font-size:1.0625rem; }

/* An odd number of Needs-you tiles: the last one takes the whole row rather
   than leaving a hole beside it. */
.mh .mh__needs .mh__chips > .mhchip:nth-child(odd):not(:has(~ .mhchip, ~ .mhrental:not(:empty))) { grid-column:1 / -1; }
/* (The rental chips arrive later inside .mhrental, display:contents — so the
   "last tile" is the last button with nothing after it, not :last-child.) */

/* The Today heading opens the calendar, like the ring: a 44px link that
   still looks like the heading it is. */
a.mh__dayhead--link { display:flex; align-items:center; min-height:44px;
                      color:inherit; text-decoration:none; }
a.mh__dayhead--link .rowchev { color:var(--mute); }
/* Where's my crew under the day (walk fix 7): a full-width secondary button,
   44px, with the house 14px above it. */
.mh .mh__crew { display:flex; align-items:center; justify-content:center; width:100%;
                min-height:44px; margin-top:14px; }

/* The phone's money: Taken today, then the three quieter figures as ONE
   grouped list (Settings-style rows, label left, number right) — a line of
   three links does not fit 390px and wrapped into a ragged column. */
.mh__moneyline { margin:10px 0 0; background:var(--surface); border:1px solid var(--surface-line);
                 border-radius:var(--r-surface); overflow:hidden; }
.mh__mpart { display:flex; align-items:center; gap:10px; min-height:52px; padding:0 14px;
             font-size:1.0625rem; color:var(--steel); text-decoration:none; }
.mh__mpart + .mh__mpart { border-top:1px solid var(--surface-line); }
.mh__mpart b { margin-left:auto; color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums; }
.mh__mpart .rowchev { color:var(--mute); }
.mh__mpart:active { background:var(--band); }
.mh__mpart .rowchev { margin-left:0; }
/* A button row does not wrap its words by default; the customer row is a
   button (it opens the form), and its sentence ran off a 390px screen. */
.setup__row { white-space:normal; }

/* The next stop's buttons wrap rather than run off a 390px screen — the
   label "Directions" (was "Navigate") pushed "Open" past the edge. A link
   dressed as a button is not underlined. */
.mhnow__do { flex-wrap:wrap; }
a.mhbtn { text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }

/* ==== Walk part 2, R5 (2026-09-24) =========================================
   A finished stop stays on today's list, ticked, instead of vanishing. The
   tick is green, the word says it too (never color alone), and the count in
   the card head never wraps under itself ("0 of 4 / done" at 1440). */
.homecard__meta { white-space:nowrap; }
.homejob__st--done { display:inline-flex; align-items:center; gap:4px; color:var(--green); font-weight:600; }
.homejob__tick { font-weight:700; color:var(--green); }
.mhstop.is-done { grid-template-columns:52px minmax(0, 1fr) auto; opacity:.72; }
.mhstop__done { display:inline-flex; align-items:center; gap:4px; font-size:0.9375rem;
                font-weight:600; color:var(--green); white-space:nowrap; }

/* ==== Walk part 2, Spacing (2026-09-24) ====================================
   The walk measured Home's stacked blocks at 6 / 14 / 16 / 26px at 1440 and
   1024. Every other list screen (Stops, Customers, Invoices, Estimates, the
   price book, the stop page) is 14px, so Home takes the same one number:
   14px between every block on the page and between a card's head and its
   list. The rules above that said 26px are overridden here, in one place,
   rather than edited in five. */
.homehello { margin-bottom:14px; }
.setup + .homemoney, .setup + .homegrid,
.homenote + .homegrid, .homemoney + .homegrid { margin-top:14px; }
.homecard .card__head { margin-bottom:14px; }
.homegrid ~ .dashmore, .homeowed ~ .dashmore, .volrow + .dashmore,
.qcard.homequote + .dashmore { margin-top:14px; }

/* ⚠ THE TECH'S TYPE FLOOR (W6-FIELD, D44; apple-ease). The field walk
   measured 40–73% of the text on the tech's Home, My stops and the job page
   under 17px — read in a truck, in daylight, often by somebody in reading
   glasses. Body text on the tech's screens is 17px; labels, times and the
   day's meta line are 15px (the apple-ease floor for anything read), never
   14. Set here, once, rather than on the screen. */
.mhnow__s, .mhnow__a, .mhstop__c { font-size:1.0625rem; }
.mhbtn { font-size:1.0625rem; min-height:48px; }
.mh__daylabel, .mh__daymeta, .mhstop__t, .mhnow__k { font-size:0.9375rem; }
.mhsite { font-size:1.0625rem; }

/* ==== WOW audit #2/#3 (2026-09-26): Get set up is ONE line ================
   "5 of 9 set up · Next: Your logo ›" — the count opens the list in place,
   "Next" goes straight to the step. The list and its bar are inside the
   <details>, so they are one tap away and never the first screen. */
.setup--fold { padding:0 20px; }
.setup--fold[open] { padding-bottom:14px; }
.setup__line { display:flex; align-items:center; gap:14px; flex-wrap:wrap; min-height:60px;
               padding:8px 0; list-style:none; cursor:pointer; }
.setup__line::-webkit-details-marker { display:none; }
.setup__line:focus-visible { outline:3px solid var(--accent-bright); outline-offset:2px; border-radius:10px; }
.setup__sum { font-size:1.0625rem; color:var(--steel); }
.setup__sum b { color:var(--ink); font-weight:600; }
.setup__next { display:inline-flex; align-items:center; gap:6px; min-height:44px;
               font-size:1.0625rem; font-weight:600; color:var(--accent-dark, #1F5A85);
               text-decoration:none; }
button.link.setup__next { padding:0; background:none; border:0; }
.setup__next:hover { text-decoration:underline; }
.setup__next .rowchev { color:inherit; }
.setup__all { margin-left:auto; display:inline-flex; align-items:center; gap:6px; min-height:44px;
              font-size:1.0625rem; color:var(--steel); }
.setup__caret { display:inline-block; transform:rotate(90deg); transition:transform var(--t-quick) var(--ease-out); }
.setup--fold[open] .setup__caret { transform:rotate(-90deg); }
.setup__allw--open, .setup--fold[open] .setup__allw { display:none; }
.setup--fold[open] .setup__allw--open { display:inline; }
.setup--fold .setup__bar { margin:4px 0 14px; }
.setup__acts { justify-content:flex-end; }
/* The phone: the line is the whole card, 16px in from the edge. */
.mh > .setup--fold { padding:0 16px; }
.mh .setup__left { display:none; }
/* A phone keeps it to ONE line: the count and its caret open the list; the
   words "See all" give way to the caret, and Next takes the right. */
@media (max-width:600px) {
  .setup__left { display:none; }
  .setup__line { gap:4px 8px; flex-wrap:nowrap; }
  .setup__sum { order:1; white-space:nowrap; }
  .setup__all { order:2; margin-left:0; min-width:28px; }
  .setup__allw, .setup--fold[open] .setup__allw--open { display:none; }
  .setup__next { order:3; margin-left:auto; min-width:0; }
  .setup__next { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}

/* ==== Nothing booked today — here's the next day (WOW audit #2/#3) ======== */
.homenext__none { margin:0 0 4px; font-size:1.0625rem; color:var(--steel); }
.homenext__h { margin:0 0 6px; font-size:1.0625rem; color:var(--steel); }
.homenext__h b { color:var(--ink); font-weight:600; }
.homenext__all { display:inline-flex; align-items:center; gap:6px; min-height:44px; margin-top:6px;
                 font-size:1.0625rem; font-weight:600; color:var(--accent-dark, #1F5A85); text-decoration:none; }
.homenext__all:hover { text-decoration:underline; }
.homenext__all .rowchev { color:inherit; }
.mh__day .homenext { margin-top:4px; }

/* ==== Today beside the money (WOW audit #3, 2026-09-26) ====================
   The day and the money lead Home. Today takes the wider column; the money
   card stacks its two heroes. One gap everywhere: 14px (the house rule). */
.homelead { display:grid; grid-template-columns:minmax(0, 1.7fr) minmax(0, 1fr); gap:14px; align-items:stretch; }
.homelead--one { grid-template-columns:minmax(0, 1fr); }
.homelead > .homecard { min-width:0; padding:20px 20px 12px; }
@container view (max-width:1000px) { .homelead { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:900px) { .homelead { grid-template-columns:minmax(0, 1fr); } }
.homemoney--stack { grid-template-columns:minmax(0, 1fr); gap:14px; }
.homemoney--stack > .herofig + .herofig { border-left:0; padding-left:0; padding-top:14px;
                                           border-top:1px solid var(--surface-line); }
.homemoneycard .homenote { margin-top:14px; }
.homehello + .homelead { margin-top:0; }
.homelead + *, .setup--fold + *, .homequiet { margin-top:14px; }
/* Needs you stands alone now: a card after a card is spaced by the house rule. */
.homeempty > .empty { border:0; background:none; }
/* The quiet line is ui.summary({ quiet:true }) — its look is app.css's .sumquiet. */
.homequiet { margin:14px 0 0; }
.homequiet + .dashmore { margin-top:14px; }
/* Grid children carry no margins of their own (the dashcard's 22px and the
   house .card + .card 14px both applied here and set the pair 8px apart at
   the top, measured 2026-09-26). The grid's gap is the spacing. */
.homelead > .card { margin:0; }
/* Two buttons in Today's head sit together at the right, 10px apart, not
   spread across a narrower column. */
.homelead .card__head a.button.homecard__go ~ a.button.homecard__go { margin-left:0; }
.homelead .card__head { flex-wrap:wrap; gap:10px; }
.setup--fold .setup__waits { margin-top:14px; }

/* ==== The navy card beside the day (Greg, 2026-09-03; kept 2026-09-27) =====
   #241 took the card off as a stray banner under the More links. It stays,
   and sits under Money in in the right-hand column, so the top of Home is
   the day, the money and one kind word. One gap: 14px, the grid's own. */
.homeside { display:flex; flex-direction:column; gap:14px; min-width:0; }
.homeside > .card, .homeside > .qcard { margin:0; }
.homeside > .qcard.homequote { padding:22px 24px; }
.homeside > .qcard.homequote .qcard__q { font-size:1.1875rem; }
/* Alone beside Today (a seat without payments) or alone on the row, it
   still takes only the height its words need. */
.homeside > .qcard.homequote:only-child { align-self:start; }

/* ==== This month so far (2026-09-27) ========================================
   One card of rows, not a strip of boxes (WOW #17): each row is the label,
   one figure and one plain sentence, 60px and up, and opens the list that
   adds up to it. Two columns of rows when the card is wide, one on a phone
   or an iPad. The rows are separated by hairlines, never by boxes. */
.homemonth .card__head { flex-wrap:wrap; gap:4px 14px; margin-bottom:6px; }
.homemonth__vs { font-size:1.0625rem; color:var(--steel); }
.homemonth__rows { list-style:none; margin:0; padding:0; display:grid;
                   grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:28px; }
@container view (max-width:760px) { .homemonth__rows { grid-template-columns:minmax(0, 1fr); } }
@media (max-width:760px) { .homemonth__rows { grid-template-columns:minmax(0, 1fr); } }
.homemonth__rows > li { border-top:1px solid var(--surface-line); min-width:0; }
.hmrow { display:grid; grid-template-columns:minmax(0, 1fr) auto auto; grid-template-areas:
           "l v c" "d d c"; align-items:center; column-gap:12px; row-gap:2px;
         min-height:60px; padding:10px 0; color:var(--ink); text-decoration:none; }
.hmrow--money { grid-template-columns:minmax(0, 1fr) auto auto auto; grid-template-areas:
                  "l s v c" "d d d c"; }
a.hmrow:hover .hmrow__l { text-decoration:underline; }
a.hmrow:focus-visible { outline:3px solid var(--accent); outline-offset:2px; border-radius:8px; }
.hmrow__l { grid-area:l; font-size:1.0625rem; font-weight:500; color:var(--ink); }
.hmrow__v { grid-area:v; justify-self:end; font-size:1.25rem; font-weight:600;
            font-variant-numeric:tabular-nums; color:var(--ink); }
.hmrow__d { grid-area:d; font-size:1.0625rem; color:var(--steel); }
.hmrow__d--up { color:var(--green); }
/* Behind is said in words and an arrow, in the same gray as the rest: a
   fact, not an alarm (house rule: true on a bad day). */
.hmrow__d--down { color:var(--steel); }
.hmrow__d--warn { color:var(--amber); }
.hmrow > .rowchev { grid-area:c; color:var(--mute); width:18px; text-align:center; }
.hmrow__nochev { visibility:hidden; }
.hmrow__l { white-space:nowrap; }
/* Six months of money in, as six small bars; this month's is solid. */
.hmspark { grid-area:s; display:inline-flex; align-items:flex-end; gap:4px; height:48px; padding-right:6px; }
.hmspark__c { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:2px; height:100%; }
.hmspark__b { display:block; width:14px; border-radius:3px 3px 0 0; background:var(--hair-strong, var(--surface-line-hover)); }
.hmspark__b--now { background:var(--accent); }
.hmspark__m { font-size:0.8125rem; line-height:1; color:var(--mute); }
.homemonth__foot { display:flex; flex-wrap:wrap; align-items:center; gap:0 14px; margin:0;
                   padding-top:4px; border-top:1px solid var(--surface-line);
                   font-size:1.0625rem; color:var(--steel); }
.homemonth__more { display:inline-flex; align-items:center; gap:6px; min-height:44px;
                   font-weight:600; color:var(--accent-dark, #1F5A85); text-decoration:none; }
.homemonth__more:hover { text-decoration:underline; }
.homemonth__more .rowchev { color:inherit; }
/* The first-days card: its head and one sentence, no rows. */
.homemonth--empty .card__head { margin-bottom:6px; }
.homemonth__empty { margin:0; font-size:1.0625rem; line-height:1.5; color:var(--steel); max-width:62ch; }
/* On the desk it follows Needs you (a card after a card: the house 14px);
   the More links after it get the same. */
.homemonth + .dashmore { margin-top:14px; }
/* The navy card on the phone (Greg 2026-09-27): 16px in from the edge and
   14px above, like every phone block; the phone type size from app.css's
   max-width:680px rule (21px). */
.mh > .qcard.homequote { margin:14px 16px 0; padding:20px 20px 20px 22px; min-height:0; }
.mh > .qcard.homequote .qcard__q { font-size:1.25rem; }
.mh > .qcard.homequote .qcard__by { font-size:0.9375rem; }
/* On the phone: 16px in from the edge like every block, 14px above. */
.mh > .homemonth { margin:14px 16px 0; padding:16px; }
/* The Site mode button now follows the month panel: measured 16px above and
   14px in from the edge (app.css .mhsite) against every other phone block's
   14px above and 16px in, so it read wider than the cards over it (home v2
   spacing check, 2026-09-27). Same rhythm as the blocks above it. */
.mh > .mhsite { margin:14px 16px 4px; width:calc(100% - 32px); }
/* The phone has no room for six bars beside the figure: the trend is the
   desk's; the sentence under Money in says the same thing in words. */
.mh .hmspark { display:none; }
.mh .hmrow--money { grid-template-columns:minmax(0, 1fr) auto auto; grid-template-areas:"l v c" "d d c"; }

/* An empty Today beside a tall Money in column (the navy card made it taller):
   the empty state sits in the middle of the card, not at its top with a
   blank half under it (home-v2 shots, 2026-09-27). */
.homelead > .homecard[data-card="jobs"] { display:flex; flex-direction:column; }
.homelead > .homecard[data-card="jobs"] > .homeempty { flex:1; display:flex; flex-direction:column; justify-content:center; }