/* ==========================================================================
   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; }
.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; }
.setup__sub { margin:4px 0 0; font-size:0.9375rem; 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:0.9375rem; 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 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; }
.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; }