/* Home (design round, design/DIRECTION.md "Home"). The shared pieces are in design.css; this file is only Home's
   layout: the two columns at 1024, the title, the help line, the buildings counts. */

.home.ds { padding-top: 20px; }

/* On a phone and up to 1199 one column: home.js puts the sections straight into the grid in reading order (Needs you,
   Finish, Happening now, Money, buildings, Recent, help) and moves them into the two columns from 1200. */
.home-grid { display: flex; flex-direction: column; }
.home-main, .home-side { min-width: 0; }

.home .finish-slot:not([hidden]) { margin: 0 0 var(--sec-gap); }

.sec-h a.sec-side { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: -10px; padding-bottom: 0; color: var(--ink); text-decoration: underline; text-decoration-color: rgba(14, 17, 22, .3); text-underline-offset: 3px; }

/* the help line: the emergency number, big enough to hit */
.home-help { display: flex; flex-direction: column; align-items: flex-start; padding: 4px 0 8px; }

.home-install { margin-top: 8px; }

@media (min-width: 1024px) { .home.ds { padding-top: 32px; } }
/* Two columns once the main column keeps at least 560 px beside the rail and the side column. */
@media (min-width: 1200px) {
  .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: 32px; align-items: start; }
  .home-grid > .home-main, .home-grid > .home-side { display: block; }
  .home-side { position: sticky; top: calc(var(--top) + 32px); }
  .home-new .home-side { padding-top: 8px; }
}
@media (min-width: 1360px) { .home-grid { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 40px; } }

/* ================================================================ look v2: Home (SPEC 7.7, D32, D36)
   The date line and the sentence, then Needs you, the live card (only while a visit is on site), Today and Also open;
   the side column (Balance, Buildings, Insight) under them, to the right from 1280. */
.v2.home-v2 { padding: 8px var(--v-gut) calc(var(--v-tabs) + 32px); max-width: var(--v-content); }
.v2.home-v2 .home-date { margin-top: 10px; }
.v2.home-v2 .home-lede { margin-top: 4px; }
.v2.home-v2 .home-sk-lede { height: 58px; margin-top: 16px; border-radius: 6px; background: var(--v-fill); }
.v2.home-v2 .home-side { margin-top: var(--v-sec); }
.v2.home-v2 .home-bal-fig { margin-top: 14px; }
.v2.home-v2 .home-bal-over { margin: 4px 0 6px; }
.v2.home-v2 .home-bal .v-kv:first-of-type { border-top: 1px solid var(--v-hair); margin-top: 12px; }
.v2.home-v2 .home-bldg-t { margin-top: 2px; }
.v2.home-v2 .home-bldg-t th { padding-top: 12px; }
.v2.home-v2 .home-bldg-a { display: inline-flex; align-items: center; min-height: 44px; margin: -11px 0; font-weight: 600; color: var(--v-ink); }
.v2.home-v2 .home-bldg-a:hover { text-decoration: underline; text-underline-offset: 3px; }
.v2.home-v2 .home-zero { color: var(--v-mute); }
.v2:is(.home-v2, .hm) .home-help { margin-top: var(--v-sec); }
.v2:is(.home-v2, .hm) .home-help a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--v-ink); white-space: nowrap; }
.v2:is(.home-v2, .hm) .home-install { margin-top: 24px; }
.v2.home-v2 .home-autopay { margin-top: 2px; }
/* the old Home's rules that would leak into v2 (Opus S2 2): one column to 1279, the help line on one row, no slot margin */
.v2.home-v2 .home-grid { display: block; }
.v2:is(.home-v2, .hm) .home-help { display: block; }
.v2:is(.home-v2, .hm) .finish-slot { margin: 0; }
.v2.home-v2 .home-bldg-t th[scope="row"] { padding-top: 12px; font-size: 15px; line-height: 21px; font-weight: 600; color: var(--v-ink); }
@media (min-width: 1024px) {
  .v2.home-v2 { padding: 28px 48px 80px; }
  .v2:is(.home-v2, .hm) .home-help { display: none; }       /* the rail's foot carries the 855 line at 1024 (say it once) */
}
@media (min-width: 1280px) and (max-width: 1439px) {
  /* the main column is narrow beside the side column: a row's actions take their own line */
  .v2.home-v2 .home-main .v-row-acts { grid-column: 2 / -1; grid-row: auto; margin: 10px 0 0; justify-content: flex-start; }
}
@media (min-width: 1280px) {
  .v2.home-v2 .home-grid { display: grid; grid-template-columns: minmax(0, 1fr) var(--v-side); gap: 56px; align-items: start; }
  .v2.home-v2 .home-side { margin-top: 0; position: sticky; top: 28px; }
}
.v2:is(.home-v2, .hm) .install { padding: 16px 0; border: 0; border-top: 1px solid var(--v-hair); border-bottom: 1px solid var(--v-hair); border-radius: 0; }
.v2:is(.home-v2, .hm) .install .btn-ink { min-height: 44px; border-radius: var(--v-r-ctl); }

/* Finish setting up on Home (onboarding.js finishCard) in look v2 at every width, as the sections around it: the label
   over an ink rule, rows on hairlines, white Add buttons; the old card, DIN heading and orange tick stay off Home
   (slice 6, carried from slice 1). */
.v2:is(.home-v2, .hm) .ob-fin.ds-sec { margin-top: var(--v-sec); }
.v2:is(.home-v2, .hm) .ob-fin .sec-h { align-items: baseline; margin: 0; padding-bottom: 10px; border-bottom: 1px solid var(--v-ink); }
.v2:is(.home-v2, .hm) .ob-fin .sec-h h2 { padding: 0; font: 600 15px/20px var(--font); letter-spacing: 0; text-transform: none; color: var(--v-ink); }
.v2:is(.home-v2, .hm) .ob-fin .sec-h h2::after { content: none; }
.v2:is(.home-v2, .hm) .ob-fin .sec-h .sec-side { padding: 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-card { padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-row { min-height: 56px; padding: 14px 0 15px; border-top: 0; border-bottom: 1px solid var(--v-hair); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-1 { font: 600 16px/22px var(--font); color: var(--v-ink); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-2 { margin-top: 1px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-row .btn { min-width: 64px; min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--v-r-ctl);
  background: var(--v-white); color: var(--v-ink); box-shadow: inset 0 0 0 1px var(--v-hair-2); font: 600 15px/20px var(--font); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-row .btn:hover { box-shadow: inset 0 0 0 1px var(--v-field); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-foot { padding: 0; border-top: 0; }
/* a set up left part way: its line and Continue setup sit flush with the rows under it, on a hairline (re-check 3) */
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-say { padding: 16px 0; border-bottom: 1px solid var(--v-hair); }
.v2:is(.home-v2, .hm) .ob-fin .ob-fin-link { font-size: 14px; font-weight: 500; color: var(--v-mute); text-decoration-color: var(--v-hair-2); }
@media (min-width: 1024px) { .v2:is(.home-v2, .hm) .ob-fin .ob-fin-row .btn { min-height: 36px; } }

/* quiet money on Home (base.css): figures at body weight */
.v2.home-v2 .v-kv-v { font-weight: 500; }
.v2.home-v2 .home-bldg-t td.v-r { font-weight: 500; color: var(--v-ink-2); }
.v2.home-v2 .home-bldg-t td.home-zero { color: var(--v-mute); }

/* Home, direction B (slice 6): more air, the action first, the amount in the quiet line */
.v2.home-v2.home-firm { --v-sec: 44px; }
.v2.home-v2.home-firm .v-row { padding: 18px 0 19px; }
.v2.home-v2 .v-row-acts { align-items: center; column-gap: 10px; }
.v2.home-v2 .home-jobs-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-size: 15px; font-weight: 600;
  color: var(--v-ink); text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
.v2.home-v2 .home-spend { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--v-mute);
  text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
.v2.home-v2 .home-bal .v-kv:first-of-type { margin-top: 2px; border-top: 0; }
.v2.home-v2 .home-bal .v-kv-v { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v2.home-v2 .home-bal > .v-amount-total { margin-top: 12px; }

/* ================================================================ Home, one for every account type (slice BA, Nov 2)
   home.js: what is happening now, To do, Your orders, At a glance; one column at every width (UX_RULES.md). */
.v2.hm { padding: 16px var(--v-gut) calc(var(--v-tabs) + 32px); }
@media (min-width: 1024px) { .v2.hm { padding: 36px 48px 80px; } }

/* what is happening now: the live card, or the next visit as one card that opens its job */
.v2 .hm-now { margin-bottom: 32px; }
.v2 .hm-now-h { margin: 0 0 10px; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--v-ink-2); }
.v2 .hm-next { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border-radius: var(--v-r-surf); box-shadow: inset 0 0 0 1px var(--v-hair);
  text-decoration: none; color: var(--v-ink); }
.v2 .hm-next:hover { box-shadow: inset 0 0 0 1px var(--v-hair-2); }
.v2 .hm-next-t { font-size: 18px; line-height: 24px; font-weight: 600; }
.v2 .hm-next-s { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }

/* To do: the one strong heading on the page, one row style, one black button */
.v2 .hm-head { display: flex; align-items: baseline; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--v-ink); }
.v2 .hm-h { margin: 0; font-size: 24px; line-height: 30px; font-weight: 600; letter-spacing: -.3px; color: var(--v-ink); }
.v2 .hm-n { margin-left: 8px; font-size: 15px; line-height: 20px; font-weight: 500; color: var(--v-mute); letter-spacing: 0; }
.v2 .hm-list { margin: 0; padding: 0; list-style: none; }
.v2 .hm-row { position: relative; display: flex; align-items: center; gap: 16px; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--v-hair); }
.v2 .hm-row:hover { background: var(--v-fill); }
.v2 .hm-m { flex: 1; min-width: 0; }
.v2 .hm-k { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2 .hm-urgent .hm-k { color: var(--v-ink); font-weight: 600; }
.v2 .hm-urgent .hm-k::before { content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 7px 1px 0; border-radius: 50%; background: var(--v-red); vertical-align: middle; }
.v2 .hm-t { margin-top: 2px; font-size: 16px; line-height: 22px; font-weight: 600; color: var(--v-ink); overflow-wrap: anywhere; }
.v2 a.hm-a { text-decoration: none; }
/* the whole row is the target: the title covers it; the button sits above */
.v2 .hm-a::after { content: ""; position: absolute; inset: 0; }
.v2 .hm-tb { display: block; padding: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; }   /* keeps .hm-t's size and weight */
html.kbd .v2 .hm-a:focus-visible { outline: none; }
html.kbd .v2 .hm-a:focus-visible::after { outline: 2px solid var(--v-ink); outline-offset: -2px; border-radius: 8px; }
.v2 .hm-s { margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); overflow-wrap: anywhere; }
.v2 .hm-s .v-amount { color: var(--v-ink-2); }
.v2 p.hm-s { margin: 2px 0 0; }
.v2 .hm-act { position: relative; z-index: 1; flex: none; }
.v2 .hm-act .v-btn { min-width: 88px; }
.v2 .hm-empty { margin: 16px 0 0; font-size: 15px; line-height: 22px; color: var(--v-mute); }
.v2.hm .finish-slot:not([hidden]) { margin-top: 32px; }

/* the secondary sections: lighter heads */
.v2 .hm-sec { margin-top: 40px; }
.v2 .hm-sec-h { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--v-hair-2); }
.v2 .hm-sec-t { margin: 0; font-size: 15px; line-height: 20px; font-weight: 600; color: var(--v-ink-2); }
.v2 .hm-sec-a { display: inline-flex; align-items: center; min-height: 44px; margin: -12px 0; font-size: 14px; font-weight: 500; color: var(--v-mute);
  text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }

/* At a glance: one row a thing, its count, the row opens it */
.v2 .hm-g { position: relative; display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 10px 0; border-bottom: 1px solid var(--v-hair);
  text-decoration: none; color: var(--v-ink); }
.v2 .hm-g:hover { background: var(--v-fill); }
.v2 .hm-g-m { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.v2 .hm-g-t { font-size: 16px; line-height: 22px; font-weight: 600; }
.v2 .hm-g-s { font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2 .hm-g-n { flex: none; min-width: 28px; height: 28px; padding: 0 9px; border-radius: 14px; background: var(--v-fill); font-size: 14px; line-height: 28px;
  font-weight: 600; text-align: center; color: var(--v-ink); }
.v2 .hm-g-n.on { background: var(--v-ink); color: var(--v-white); }
.v2 .hm-g .icon { flex: none; color: var(--v-mute); }
.v2.hm .home-help { margin-top: 32px; }
@media (min-width: 1024px) { .v2.hm .home-help { display: none; } }   /* the rail's foot says it at 1024 and up */

/* ================================================================ the design pass (Nov 3, board 2)
   The inspection's own card under To do: the mark in a soft square, its name, the price in the server's words, one line,
   a black Book; the whole card opens the booking (its name's link covers it), Book sits above. And an empty Your orders
   with nothing waiting carries the one orange Order a repair. */
.v2 .hm-insp { position: relative; display: flex; align-items: center; gap: 14px; margin-top: 24px; padding: 16px;
  border-radius: var(--v-r-surf); box-shadow: inset 0 0 0 1px var(--v-hair-2); background: var(--v-white); }
.v2 .hm-insp:hover { box-shadow: inset 0 0 0 1px var(--v-field); }
.v2 .hm-insp-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--v-r-surf);
  background: var(--v-fill); color: var(--v-ink); }
.v2 .hm-insp-m { flex: 1; min-width: 0; }
.v2 .hm-insp-t { font-size: 16px; line-height: 22px; font-weight: 700; color: var(--v-ink); }
.v2 a.hm-insp-a { color: inherit; text-decoration: none; }
.v2 .hm-insp-a::after { content: ""; position: absolute; inset: 0; border-radius: var(--v-r-surf); }
html.kbd .v2 .hm-insp-a:focus-visible { outline: none; }
html.kbd .v2 .hm-insp-a:focus-visible::after { outline: 2px solid var(--v-ink); outline-offset: 2px; }
/* quiet money (UX_RULES 6): the price at the size of its words */
.v2 .hm-insp-p { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2 .hm-insp-s { margin-top: 2px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2 .hm-insp-act { position: relative; z-index: 1; flex: none; }
.v2 .hm-insp-act .v-btn { min-width: 64px; }
.v2 .hm-start + .hm-insp { margin-top: 24px; }
.v2 .hm-empty-act { margin-top: 14px; }
.v2 .hm-empty-act .v-btn { min-width: 160px; }
@media (min-width: 1024px) { .v2 .hm-insp { padding: 16px 18px; } }