/* The look lift (Nov 5). The owner on staging ba244a2: "the visual quality of the portal feels super low ... it just needs
   a full lift up". Read as intent: it should feel like a top consumer app (Airbnb, Uber, Stripe, Linear, Apple's own
   apps), not a competent internal tool. Direction and before and after: Ops/crm-reviews/2026-10-24-client-portal/
   lift-20261105/DIRECTION.md.

   This file loads last, so it wins over every screen's own file at the same weight. It changes the look only: no
   layout logic, no words. What it does, in order:
   1. Tokens: a soft canvas behind white surfaces, bigger radii, a two layer shadow, tighter headings.
   2. Surfaces: every section is a white card on the canvas, its rows grouped inside with inset hairlines (Apple's inset
      grouped lists); the black rule under each heading goes.
   3. Controls: 12 px radius buttons, compact row buttons, tinted status pills (Stripe), a segmented control for tabs,
      52 px fields, chips as capsules.
   4. Chrome: a frosted top bar and tab bar (iOS), the selected tab and rail link in their filled glyph, a white rail.
   5. Sign in and set up: one calm centred column on the soft canvas, no side panel, no photo.
   House rules held: one white and light theme (no dark mode), Avenir Next and DIN, orange only for Order and the
   tenant's new request, Approve green, a tenant never sees a price. */

/* ------------------------------------------------------------------ 1. tokens */
:root {
  --lf-canvas: #F3F4F6;          /* the app's floor, behind white cards (Apple's grouped background, a touch cooler) */
  --lf-card: #FFFFFF;
  --lf-sunk: #F6F7F8;            /* a pressed row, a quiet tile, the segmented control's track */
  --lf-line: #ECEEF1;            /* inset hairlines inside a card */
  --lf-r: 18px;                  /* cards */
  --lf-r-s: 14px;                /* tiles, small cards, sheets' inner blocks */
  --lf-r-c: 12px;                /* buttons and fields */
  --lf-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 2px 10px rgba(16, 24, 40, .05);
  --lf-shadow-up: 0 1px 2px rgba(16, 24, 40, .06), 0 10px 28px rgba(16, 24, 40, .10);
  --lf-glass: rgba(255, 255, 255, .82);
  --lf-press: cubic-bezier(.2, .8, .2, 1);
  --v-r-ctl: 12px; --v-r-surf: 18px; --v-r-sheet: 20px;
  --v-hair: #E8EAED;
  --v-lift: var(--lf-shadow);
}

/* ------------------------------------------------------------------ 2. the canvas */
/* Signed in screens sit on the canvas; sign in, set up and the order flow stay white (a task screen reads as one sheet). */
body:has(.frame .v-top), body:has(.frame .v-tabs) { background: var(--lf-canvas); }
.frame { background: var(--lf-canvas); }
@media (min-width: 1024px) { body:has(.v-rail) { background: var(--lf-canvas); } }

/* Headings: Avenir Next Demi Bold, set tight, as Apple and Airbnb set theirs. */
.v2 h1, .v2 .v-t-title, .v2 .ls-title, .v2 .m-h1 { letter-spacing: -.02em; }
.v2 .v-t-title { font-size: 28px; line-height: 34px; font-weight: 700; }
@media (min-width: 1024px) { .v2 .v-t-title { font-size: 32px; line-height: 38px; } }

/* ------------------------------------------------------------------ 3. section heads: a title, no rule */
.v2 .hm-head, .v2 .v-sec-h, .v2 .sec-h, .ds-sec > .sec-h, .v2.v-lists .sec-h, .v2.v-money .sec-h,
.v2:is(.home-v2, .hm) .ob-fin .sec-h { border-bottom: 0; padding-bottom: 0; margin: 0 0 10px; align-items: baseline; }
.v2 .hm-h, .v2 .hm-sec-t, .v2 .hm-now-h, .v2 .v-sec-h h2, .v2 .v-sec-h .v-t-lab, .v2 .sec-h h2, .ds-sec > .sec-h h2 {
  margin: 0; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.015em; color: var(--v-ink); }
.v2 .hm-n, .v2 .v-sec-h .v-n, .v2 .sec-side { font-size: 15px; font-weight: 600; color: var(--v-mute); }
.v2 .hm-sec-a { font-size: 15px; font-weight: 600; color: var(--v-ink); text-decoration: none; }
.v2 .hm-sec-a:hover { text-decoration: underline; }
.v2 .hm-sec-h { border-bottom: 0; padding-bottom: 0; margin-bottom: 10px; align-items: baseline; }
.v2 .hm-now-h { margin-bottom: 10px; }

/* ------------------------------------------------------------------ 4. cards */
/* One card look: white, 18 px, a soft two layer shadow, no border. */
.v2 .v-livec, .v2 .hm-list, .v2 .hm-orders, .v2 .hm-glance > .hm-g:first-of-type, .v2 .hm-insp,
.v2 .ds-card, .v2 .mo-list, .v2 .mo-open, .v2 .mo-balrow, .v2 .jp-cover, .v2 .ls-panel {
  background: var(--lf-card); border: 0; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }

/* Home's lists: rows grouped in their card, inset hairlines, the whole row the tap target. */
.v2 .hm-list, .v2 .hm-orders, .v2 .mo-list { padding: 0; margin: 0; list-style: none; overflow: hidden; }
.v2 .hm-row, .v2 .hm-orders > .v-row, .v2 .mo-list > .v-row {
  position: relative; padding: 16px 16px; border: 0; border-top: 0; margin: 0; }
.v2 .hm-row + .hm-row::before, .v2 .hm-orders > .v-row + .v-row::before, .v2 .mo-list > .v-row + .v-row::before {
  content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--lf-line); }
.v2 .hm-row:active, .v2 .hm-orders > .v-row:active, .v2 .mo-list > .v-row:active, .v2 .hm-g:active { background: var(--lf-sunk); }
.v2 .hm-k, .v2 .v-row-k { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--v-mute); margin-bottom: 2px; }
.v2 .hm-t, .v2 .v-row-t { font-size: 16px; line-height: 22px; font-weight: 600; letter-spacing: -.005em; color: var(--v-ink); }
.v2 .hm-s, .v2 .v-row-s { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2 .hm-s .v-amount, .v2 .v-row-s .v-amount { color: var(--v-ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.v2 .hm-act { align-self: center; }
.v2 .v-row-note { font-size: 13px; color: var(--v-mute); font-variant-numeric: tabular-nums; }

/* At a glance: one grouped card of rows with a count and a chevron. */
.v2 .hm-glance { display: block; }
.v2 .hm-glance .hm-g { position: relative; display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 16px;
  background: var(--lf-card); border: 0; box-shadow: none; border-radius: 0; }
.v2 .hm-glance { --g-r: var(--lf-r); }
.v2 .hm-glance .hm-g:first-of-type { border-radius: var(--g-r) var(--g-r) 0 0; box-shadow: none; }
.v2 .hm-glance .hm-g:last-of-type { border-radius: 0 0 var(--g-r) var(--g-r); }
.v2 .hm-glance .hm-g:only-of-type { border-radius: var(--g-r); }
.v2 .hm-glance:has(.hm-g) { border-radius: var(--lf-r); }
.v2 .hm-glance .hm-g + .hm-g::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--lf-line); }
.v2 .hm-glance .hm-g { filter: none; }
.v2 .hm-glance { filter: drop-shadow(0 1px 1px rgba(16, 24, 40, .05)) drop-shadow(0 2px 8px rgba(16, 24, 40, .04)); }
.v2 .hm-g-t { font-size: 16px; font-weight: 600; }
.v2 .hm-g-n { min-width: 26px; height: 26px; padding: 0 8px; border-radius: 13px; font-size: 13px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center; background: var(--lf-sunk); color: var(--v-ink); }
.v2 .hm-g-n.on { background: var(--v-ink); color: #fff; }

/* Spacing between Home's blocks: one rhythm. */
.v2.hm > section, .v2.hm > nav { margin-top: 28px; }
.v2.hm > section:first-of-type { margin-top: 8px; }
@media (min-width: 1024px) { .v2.hm > section, .v2.hm > nav { margin-top: 36px; } }

/* The inspection: a product card with its own mark in graphite (Wallet's pass tile), price in ink. */
.v2 .hm-insp { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 16px; }
.v2 .hm-insp-ic { width: 48px; height: 48px; border-radius: 14px; background: #14171B; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; }
.v2 .hm-insp-ic svg { width: 26px; height: 26px; }
.v2 .hm-insp-t { font-size: 16px; line-height: 22px; font-weight: 700; margin: 0; }
.v2 .hm-insp-p { margin: 1px 0 0; font-size: 15px; font-weight: 600; color: var(--v-ink); }
.v2 .hm-insp-s { margin: 2px 0 0; font-size: 13px; line-height: 18px; color: var(--v-mute); }
@media (max-width: 599px) { .v2 .hm-insp { gap: 12px; padding: 14px; } .v2 .hm-insp-ic { width: 44px; height: 44px; border-radius: 12px; } }

/* ------------------------------------------------------------------ 5. the live card */
.v2 .v-livec { padding: 18px 18px 16px; margin: 0; }
.v2 .v-lc-t { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -.02em; }
.v2 .v-trk-bar { height: 6px; border-radius: 3px; background: var(--lf-line); box-shadow: none; }
.v2 .v-trk-fill { height: 6px; border-radius: 3px; background: var(--v-ink); }
.v2 .v-trk-gap { display: none; }
.v2 .v-trk-now { width: 16px; height: 16px; border-radius: 50%; background: var(--v-orange); box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(242, 90, 30, .2); }
.v2 .v-lc-f { border-top: 1px solid var(--lf-line); }

/* ------------------------------------------------------------------ 6. status pills */
.v2 .v-st { gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; line-height: 18px; font-weight: 600;
  background: var(--lf-sunk); color: var(--v-ink); }
.v2 .v-st > i { width: 7px; height: 7px; }
.v2 .v-st-go { background: #E7F4EC; color: #17663A; }
.v2 .v-st-stop { background: #FDECEA; color: #A41F15; }
.v2 .v-st-wait { background: #FBF1DC; color: #7A5000; }
.v2 .v-st-live, .v2 .v-st-you { background: #FFEFE7; color: #9A3A10; }
.v2 .v-row-k .v-st { font-size: 12px; line-height: 16px; padding: 2px 9px 2px 7px; }
.v2 .v-row-k:has(.v-st) { margin-bottom: 6px; }

/* ------------------------------------------------------------------ 7. buttons */
.v2 .v-btn, .v2 .btn, .btn { border-radius: var(--lf-r-c); font-weight: 600; letter-spacing: -.005em;
  transition: transform 120ms var(--lf-press), background var(--v-fast), box-shadow var(--v-fast); }
.v2 .v-btn:active, .v2 .btn:active, .btn:active { transform: scale(.97); }
.v2 .v-btn-full, .v2 .v-btn-l { min-height: 52px; font-size: 16px; }
.v2 .v-btn-o { box-shadow: 0 1px 2px rgba(242, 90, 30, .25), 0 6px 16px rgba(242, 90, 30, .22); }
.v2 .v-btn-w { box-shadow: inset 0 0 0 1px #DADDE2; }
.v2 .v-btn-line { box-shadow: inset 0 0 0 1.5px var(--v-ink); }
/* a row's own button: compact, the row stays the tap target around it (44 px hit kept by its padding box) */
.v2 .hm-act .v-btn, .v2 .v-row-acts .v-btn, .v2 .v-row-acts .btn, .v2 .mo-row-btn, .v2 .hm-insp-act .v-btn {
  min-height: 40px; padding: 0 18px; font-size: 15px; border-radius: 999px; }
.btn-ink, .v2 .btn-ink { background: var(--v-ink); border-color: var(--v-ink); color: #fff; }

/* ------------------------------------------------------------------ 8. fields */
.input, .select, .textarea, .v2 .input, .v2 .select, .v2 .textarea {
  min-height: 52px; padding: 14px 16px; border: 1px solid var(--v-field); border-radius: var(--lf-r-c); background: #fff;
  font-size: 16px; transition: border-color var(--v-fast), box-shadow var(--v-fast); }
.textarea, .v2 .textarea { min-height: 96px; }
.input:focus, .select:focus, .textarea:focus { outline: 0; border-color: var(--v-ink); box-shadow: 0 0 0 4px rgba(14, 17, 22, .08); }
.v2 .field label, .field label { font-size: 14px; font-weight: 600; color: var(--v-ink); margin-bottom: 6px; }

/* ------------------------------------------------------------------ 9. the property filter: a quiet pill and capsules */
.v2.fb { background: transparent; border: 0; box-shadow: none; }
.v2 .fb-pick { min-height: 48px; border: 0; border-radius: 14px; background: #fff; box-shadow: var(--lf-shadow); }
.v2 .fb-chip { min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E1E4E8;
  font-size: 14px; font-weight: 600; }
.v2 .fb-chip.on { background: var(--v-ink); color: #fff; box-shadow: none; }
.v2 .fb-chip.on em { color: rgba(255, 255, 255, .7); }

/* ------------------------------------------------------------------ 10. tabs inside a screen: a segmented control (iOS) */
.v2.v-money .m-seg, .v2 .m-seg { display: flex; gap: 2px; padding: 3px; margin: 4px 0 18px; border: 0; border-radius: 12px;
  background: #E7E9EC; overflow-x: auto; scrollbar-width: none; }
.v2.v-money .m-seg::-webkit-scrollbar { display: none; }
.v2.v-money .m-seg-i, .v2 .m-seg-i { flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 36px;
  padding: 0 12px; border: 0; border-radius: 9px; background: none; box-shadow: none; font-size: 14px; font-weight: 600; color: #4A525C;
  text-decoration: none; white-space: nowrap; }
.v2.v-money .m-seg-i.on, .v2 .m-seg-i.on { background: #fff; color: var(--v-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06); }

/* Money's open balance and Pay the balance: one summary card, then one action card. */
.v2.v-money .mo-open { padding: 16px; margin: 0 0 12px; }
.v2.v-money .mo-open-t { margin: 0; font-size: 15px; line-height: 22px; color: var(--v-mute); }
.v2.v-money .mo-open-t .v-amount:first-child { font-size: 22px; line-height: 28px; font-weight: 700;
  color: var(--v-ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-right: 2px; }
.v2.v-money .mo-balrow { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; margin: 0 0 22px; text-align: left;
  border: 0; border-radius: var(--lf-r); background: #fff; box-shadow: var(--lf-shadow); }
.v2.v-money .mo-balrow-m { flex: 1; }
.v2.v-money .mo-balrow-t { font-weight: 700; }

/* ------------------------------------------------------------------ 11. the top bar and tab bar: frosted, as on iOS */
.v2.v-top { background: var(--lf-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid rgba(16, 24, 40, .06); box-shadow: none; }
.v2 .v-top-t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.v2 .v-icon-btn { border-radius: 50%; }
.v2 .v-icon-btn:active { background: var(--lf-sunk); }
.v2 .v-av-i { background: #E9EBEE; font-weight: 700; }

.v2.v-tabs { background: var(--lf-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(16, 24, 40, .06); box-shadow: none; }
.v2 .v-tab { color: #7B838D; }
.v2 .v-tab.on { color: var(--v-ink); }
.v2 .v-tab .v-t-xs { font-size: 11px; line-height: 14px; font-weight: 600; color: inherit; letter-spacing: .01em; }
.v2 .v-tab .icon { width: 26px; height: 26px; }
.v2 .v-tab .ic-f, .v2 .v-rail-a .ic-f { display: none; }
.v2 .v-tab.on .ic-r, .v2 .v-rail-a.on .ic-r { display: none; }
.v2 .v-tab.on .ic-f, .v2 .v-rail-a.on .ic-f { display: inline-block; }
.v2 .v-tab-ord { width: 52px; height: 52px; margin-top: -18px; border-radius: 50%; background: var(--v-orange); color: var(--v-on-orange);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 16px rgba(242, 90, 30, .35); display: inline-flex; align-items: center; justify-content: center; }
.v2 .v-tab-ord .icon { width: 26px; height: 26px; }
.v2 .v-tab-order:active .v-tab-ord { transform: scale(.94); }

/* ------------------------------------------------------------------ 12. the rail (1024 and up): white, glyph led links */
@media (min-width: 1024px) {
  .v2.v-rail { background: #fff; border-right: 1px solid #E8EAED; box-shadow: none; }
  .v2 .v-rail-sw { border-radius: 12px; padding: 8px; }
  .v2 .v-rail-sw:hover, .v2 .v-rail-me:hover, .v2 .v-rail-call:hover { background: var(--lf-sunk); }
  .v2 .v-rail-av { background: #14171B; color: #fff; font-weight: 700; }
  .v2.v-rail .v-btn-full { min-height: 44px; font-size: 15px; }
  .v2 .v-rail-search { border-radius: 10px; background: var(--lf-sunk); border: 0; min-height: 38px; }
  .v2 .v-rail-a { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 0 10px; border-radius: 10px;
    font-size: 15px; font-weight: 600; color: #3D444D; border: 0; box-shadow: none; background: transparent; }
  .v2 .v-rail-a:hover { background: var(--lf-sunk); color: var(--v-ink); }
  .v2 .v-rail-a.on { background: #F0F1F3; color: var(--v-ink); box-shadow: none; border: 0; }
  .v2 .v-rail-gl { display: inline-flex; width: 20px; height: 20px; flex: none; }
  .v2 .v-rail-w { flex: 1; }
  .v2 .v-rail-n { font-size: 12px; font-weight: 700; color: var(--v-mute); }
  .v2 .v-rail-foot { border-top: 1px solid #EEF0F2; }
  .v2 .v-rail-ic { border-radius: 50%; background: var(--lf-sunk); border: 0; }
}
.v2 .v-rail-gl { display: none; }
@media (min-width: 1024px) { .v2 .v-rail-gl { display: inline-flex; } }

/* ------------------------------------------------------------------ 13. the job page */
/* The cover is one card; every section under it is a card with its title inside (Airbnb's trip, Uber's ride detail),
   except the photos, which sit on the canvas. A card inside a section card loses its own card. */
.v2 .jp-cover { padding: 18px; margin-bottom: 14px; }
.v2 .jp-title { font-size: 26px; line-height: 32px; font-weight: 700; letter-spacing: -.02em; }
.v2 .jp-sentence { font-size: 19px; line-height: 26px; font-weight: 600; letter-spacing: -.01em; }
.v2 .jobpage .v-sec { margin-top: 14px; }
.v2 .jobpage .v-sec:not(.s-photos) { padding: 16px 16px 6px; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .jobpage .v-sec:not(.s-photos) .v-sec-h h2, .v2 .jobpage .v-sec:not(.s-photos) .v-sec-h .v-t-lab { font-size: 17px; line-height: 22px; }
.v2 .jobpage .v-sec .v-facts, .v2 .jobpage .v-sec .jp-hist, .v2 .jobpage .v-sec .ds-card, .v2 .jobpage .v-sec > .v-row {
  background: transparent; box-shadow: none; border-radius: 0; padding-left: 0; padding-right: 0; }
.v2 .jobpage .v-sec > .v-row { padding-top: 8px; padding-bottom: 12px; border: 0; }
.v2 .jobpage .s-photos .v-sec-h { margin-bottom: 10px; }
.v2 .v-facts .v-fr { border-top: 1px solid var(--lf-line); }
.v2 .v-facts .v-fr:first-child { border-top: 0; }
.v2 .v-act-day { margin-top: 12px; font-weight: 700; color: var(--v-ink); }
.v2 .v-act-list, .v2 .v-ev { border: 0; }
.v2 .v-ev + .v-ev { border-top: 1px solid var(--lf-line); }
.v2 .v-pair-f img, .v2 .v-strip-b img { border-radius: 14px; }
.v2 .jp-msgs { padding: 0; }
.v2 .msg-cam { display: inline-flex; align-items: center; justify-content: center; width: 48px; min-height: 48px; border-radius: 50%; }
.v2 .msg-cam svg { width: 22px; height: 22px; }
.v2 .jp-composer .msg-in { border-radius: 24px; min-height: 48px; padding: 12px 16px; }
.v2 .jp-composer .msg-send { border-radius: 999px; min-height: 48px; padding: 0 18px; }
.v2 .qa .v-btn-w, .v2 .s-qa .v-btn-w { background: #fff; box-shadow: var(--lf-shadow); }

/* ------------------------------------------------------------------ 14. lists and settings (Account): grouped cards, iOS Settings */
.v2 .ds-sec { margin-top: 28px; }
.v2.v-lists .sec-h { margin: 0 0 8px; padding: 0 4px; }
.v2.v-lists .sec-h h2, .ds-sec > .sec-h h2 { font: 700 20px/26px var(--v-sans); letter-spacing: -.015em; color: var(--v-ink); }
.v2.v-lists .ds-card, .v2.v-lists .ls-panel, .v2.v-lists .ins-sw, .v2.v-lists .pay-list, .v2 .ins-sw, .v2 .pay-list {
  padding: 16px; background: #fff; border: 0; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.v-lists .ds-card:has(> .jrows) { padding: 0 16px; }
.v2.v-lists .ls-panel { padding-top: 16px; }
.v2 .jrows .jrow { border-top: 1px solid var(--lf-line); }
.v2 .jrows .jrow:first-child { border-top: 0; }
.v2 .ls-panel .btn, .v2 .ls-panel .v-btn { min-height: 48px; padding: 0 22px; }
.v2 .pay-add { border-radius: 12px; }

/* ------------------------------------------------------------------ 15. order: the category tiles */
.v2 .o-cat { border: 0; border-radius: var(--lf-r-s); background: #fff; box-shadow: inset 0 0 0 1px #E6E8EC, 0 1px 2px rgba(16, 24, 40, .04);
  transition: transform 120ms var(--lf-press), box-shadow var(--v-fast); }
.v2 .o-cat:hover { box-shadow: inset 0 0 0 1px #C9CDD3, 0 4px 12px rgba(16, 24, 40, .06); }
.v2 .o-cat:active { transform: scale(.97); }
.v2 .o-cat svg { width: 26px; height: 26px; padding: 9px; box-sizing: content-box; border-radius: 12px; background: var(--lf-sunk); }
.v2 .o-cat-t { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; }

/* ------------------------------------------------------------------ 16. empty, loading, error */
.v2 .v-empty { padding: 28px 20px; text-align: center; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .v-error { padding: 16px; border-radius: var(--lf-r-s); background: #FDECEA; color: #7A1A12; }
.v2 .v-sk-card { border-radius: var(--lf-r); background: #fff; box-shadow: var(--lf-shadow); animation: lf-breathe 1.4s ease-in-out infinite; }
@keyframes lf-breathe { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .v2 .v-sk-card { animation: none; } .v2 .v-btn:active, .btn:active { transform: none; } }

/* ------------------------------------------------------------------ 18. Home's empty states: a calm card, the one action under it */
.v2 .hm-empty { margin: 0; padding: 18px 16px; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow);
  font-size: 15px; line-height: 22px; color: var(--v-mute); }
.v2 .hm-empty-act { margin-top: 12px; }
.v2 .hm-empty-act .v-btn { width: 100%; min-height: 52px; font-size: 16px; }
@media (min-width: 1024px) { .v2 .hm-empty-act .v-btn { width: auto; padding: 0 28px; } }

/* ------------------------------------------------------------------ 19. the tenant's own screens: the same canvas and cards */
.v2.tn, .tn { background: var(--lf-canvas); }
.tn-top { background: var(--lf-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); }
.tn-name { font-weight: 700; letter-spacing: -.01em; }
.tn-av { background: #E9EBEE; }
.tn-head { letter-spacing: -.02em; }
.tn-card { margin-top: 18px; padding: 16px; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.tn-card:active { transform: scale(.99); }
.tn-card-t { padding-bottom: 0; border-bottom: 0; font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.tn-card-s { margin-top: 4px; color: var(--v-mute); }
.tn-dot { width: 14px; height: 14px; margin-top: 3px; border-width: 2px; }
.tn-now .tn-dot { border-width: 4px; box-shadow: 0 0 0 4px rgba(242, 90, 30, .18); }
.tn-emerg { margin-top: 18px; padding: 16px; border-radius: var(--lf-r); background: #fff; box-shadow: var(--lf-shadow); color: var(--v-mute); }
.tn-emerg-911 { color: #A41F15; }
.tn-tabs { background: var(--lf-glass); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid rgba(16, 24, 40, .06); }
.tn-tab { color: #7B838D; }
.tn-tab.on { color: var(--v-ink); }
.tn-tab .v-t-xs { font-size: 11px; font-weight: 600; color: inherit; }
.tn-tab-plus { width: 52px; height: 52px; margin-top: -18px; border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .9), 0 6px 16px rgba(242, 90, 30, .35); }

/* ------------------------------------------------------------------ 20. a task sheet's lists (order, booking): grouped, with a filled pick */
.order-sheet .o-sub-h, .v2.insp-sheet .o-sub-h, .v2 .o-sub-h { margin: 0 0 10px; padding: 0; border: 0; font: 700 17px/22px var(--v-sans); letter-spacing: -.01em; }
.order-sheet .o-sub-h::after, .v2 .o-sub-h::after { content: none; }
.choices, .order-sheet .choices, .v2.insp-sheet .choices { border: 1px solid #E3E6EA; border-radius: var(--lf-r-s); background: #fff; overflow: hidden; }
.choice, .order-sheet .choice { min-height: 56px; border-top-color: #EEF0F2; transition: background var(--v-fast); }
.choice:active { background: var(--lf-sunk); }
.choice[aria-checked="true"], .choice[aria-pressed="true"], .order-sheet .choice[aria-checked="true"] { background: #F4F5F7; }
.order-sheet .choice .dot, .choice .dot { width: 22px; height: 22px; border-width: 2px; border-color: #B9BFC6; }
.order-sheet .choice[aria-checked="true"] .dot, .choice[aria-checked="true"] .dot { border: 7px solid var(--v-ink); }
.v2 .phases .phase.now i, .phases .phase.now i { background: var(--v-ink); }

/* ------------------------------------------------------------------ 21. a quote or invoice: one document card (Stripe's invoice) */
.v2 .mo-doc, .v2.v-money .mo-doc, .v2.v-money .m-detail .mo-doc { padding: 20px; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
@media (min-width: 1024px) { .v2 .mo-doc, .v2.v-money .mo-doc { padding: 28px; } }
/* money stays quiet (the design pass's rule): the total is the document's one large figure, in the text face, not DIN */
.v2 .mo-total .v-amount-total, .v2 .mo-fig .v-amount-total { font-family: var(--v-sans); font-size: 28px; line-height: 34px; font-weight: 700;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.v2 .mo-cap { font-size: 13px; font-weight: 600; color: var(--v-mute); }
.v2 .mo-lines td { font-variant-numeric: tabular-nums; }
.v2 .m-detail .sbar, .v2.v-money .sbar { background: var(--lf-glass); -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(16, 24, 40, .06); box-shadow: none; }
.choices > .choice, .order-sheet .choices > .choice, .v2.insp-sheet .choices > .choice { padding-left: 16px; padding-right: 16px; }

/* ================================================================== ROUND TWO (Nov 5, "push it further")
   The first round polished; this one changes class. Type with presence (bigger, tighter, DIN for figures), Home led by
   its first item, the desktop's width used (a wider column, a list beside its record), motion with purpose, a brand
   band on a phone's sign in, solid enough bars. Same rules: one light theme, no gradient, orange only for Order. */

/* ------------------------------------------------------------------ R1. type with presence */
:root { --lf-ink: #0B0D10; --lf-sub: #6A7380; --lf-din: "DIN Condensed", "DIN Alternate", "Bahnschrift", "Avenir Next Condensed", sans-serif; }
.v2 .hm-t, .v2 .v-row-t, .v2 .hm-g-t, .v2 .choice-t, .v2 .jrow-1, .v2 .hm-insp-t { color: var(--lf-ink); }
.v2 .hm-t, .v2 .v-row-t { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.012em; }
.v2 .hm-s, .v2 .v-row-s, .v2 .hm-g-s, .v2 .hm-insp-s, .v2 .v-lc-p { color: var(--lf-sub); font-size: 15px; line-height: 21px; }
.v2 .hm-k, .v2 .v-row-k { font-size: 12.5px; letter-spacing: .01em; color: var(--lf-sub); }
/* the page's first head is a title; the rest step down, so the eye reads the page top to bottom */
.v2 .hm-todo .hm-h { font-size: 28px; line-height: 34px; letter-spacing: -.025em; }
.v2 .hm-sec-t, .v2 .hm-now-h { font-size: 21px; line-height: 26px; letter-spacing: -.02em; }
.v2 .hm-glance .hm-sec-t { font-size: 17px; line-height: 22px; color: var(--lf-sub); font-weight: 600; letter-spacing: -.005em; }
.v2 .ls-title, .v2 .m-h1 { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.03em; }
/* figures in DIN Condensed: counts, the live time, refs, totals */
.v2 .hm-n, .v2 .v-sec-h .v-n, .v2 .sec-side, .v2 .hm-g-n, .v2 .v-rail-n, .v2 .v-n-ref, .v2 .mo-ref, .v2 .v-row-note {
  font-family: var(--lf-din); font-weight: 700; letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.v2 .hm-n { font-size: 28px; line-height: 34px; color: var(--lf-sub); margin-left: 8px; }
.v2 .hm-g-n { font-size: 16px; padding-top: 2px; }
.v2 .v-row-note { font-size: 15px; color: var(--lf-sub); }
.v2 .mo-total .v-amount-total, .v2 .mo-fig .v-amount-total { font-family: var(--lf-din); font-size: 44px; line-height: 46px; letter-spacing: 0; }
.v2.v-money .mo-open-t .v-amount:first-child { font-family: var(--lf-din); font-size: 36px; line-height: 40px; letter-spacing: 0;
  display: block; margin: 0 0 2px; }

/* ------------------------------------------------------------------ R2. Home leads with what matters */
/* A visit under way is the hero: Roundhouse graphite, the time in DIN, the track in orange (the approved cover card). */
.v2 .hm-live .v-livec { overflow: hidden; background: #14171B; color: #fff; box-shadow: 0 2px 4px rgba(16, 24, 40, .10), 0 16px 36px rgba(16, 24, 40, .18);
  padding: 20px 20px 18px; border-radius: 22px; }
.v2 .hm-live .v-lc-a, .v2 .hm-live .v-lc-t { color: #fff; }
.v2 .hm-live .v-lc-t { font-size: 26px; line-height: 31px; }
.v2 .hm-live .v-lc-p, .v2 .hm-live .v-lc-f .v-t-sub, .v2 .hm-live .v-trk-end { color: #A8B0B9; }
.v2 .hm-live .v-lc-line { color: #E6E9EC; font-weight: 600; }
.v2 .hm-live .v-n-ref { color: #8C949D; }
.v2 .hm-live .v-st-live { background: rgba(242, 90, 30, .18); color: #FFB08A; }
.v2 .hm-live .v-trk-bar { background: rgba(255, 255, 255, .14); }
.v2 .hm-live .v-trk-fill { background: #F25A1E; }
.v2 .hm-live .v-trk-now { box-shadow: 0 0 0 3px #14171B, 0 0 0 7px rgba(242, 90, 30, .35); }
.v2 .hm-live .v-trk-lab { font-family: var(--lf-din); font-size: 22px; line-height: 24px; color: #fff; letter-spacing: .01em; top: -8px; }
.v2 .hm-live .v-lc-f { border-top-color: rgba(255, 255, 255, .10); }
.v2 .hm-live .v-btn-w { background: #fff; color: var(--lf-ink); box-shadow: none; }
/* With no visit under way, the first thing waiting leads: a larger row, its button full size. */
.v2 .hm-todo .hm-row:first-child { padding: 20px 18px; }
.v2 .hm-todo .hm-row:first-child .hm-t { font-size: 20px; line-height: 26px; letter-spacing: -.02em; }
.v2 .hm-todo .hm-row:first-child .hm-act .v-btn { min-height: 46px; padding: 0 22px; font-size: 16px; }
/* the quieter tail: At a glance reads as reference, not as work */
.v2 .hm-glance .hm-g { padding: 12px 16px; }
.v2 .hm-glance .hm-g-t { font-size: 15px; }
.v2 .hm-glance .hm-g-s { font-size: 13px; }
.v2.hm > .hm-todo { margin-top: 28px; }

/* ------------------------------------------------------------------ R3. the desktop uses its width */
@media (min-width: 1280px) {
  #main > .view > .v2.hm:not(.v-si):not(.v-ob), .v2.fb { max-width: 920px; }
  #main > .view > .v2.hm:not(.v-si):not(.v-ob) { padding-top: 12px; }
  .v2 .hm-live .v-livec { padding: 26px 28px 22px; }
  .v2 .hm-live .v-lc-t { font-size: 30px; line-height: 36px; }
  .v2 .hm-row, .v2 .hm-orders > .v-row, .v2 .mo-list > .v-row { padding: 18px 22px; }
  .v2 .hm-row + .hm-row::before, .v2 .hm-orders > .v-row + .v-row::before, .v2 .mo-list > .v-row + .v-row::before { left: 22px; }
  .v2 .hm-glance .hm-g { padding: 14px 22px; }
  /* a list beside its record: Money's open quote or invoice, and a job beside the jobs list (jobs.js splitHost) */
  #main > .view > .v2.v-money.has-detail:not(.v-si):not(.v-ob), #main > .view > .v2.jx-split:not(.v-si):not(.v-ob) { max-width: 1240px; }
  /* in the narrow list pane a row keeps the phone's shape: status over title, ref on the right */
  .v2 .jx-list .v-row, .v2.v-money.has-detail .m-list .v-row { grid-template-columns: minmax(0, 1fr) auto; }
  .v2 .jx-list .v-row-k, .v2.v-money.has-detail .m-list .v-row-k { grid-column: 1 / -1; grid-row: auto; margin: 0 0 6px; padding: 0; }
  .v2 .jx-list .v-row-m, .v2.v-money.has-detail .m-list .v-row-m { grid-column: 1; }
  .v2 .jx-list .v-row-e, .v2.v-money.has-detail .m-list .v-row-e { grid-column: 2; grid-row: 2; }
  .v2 .jx-list .v-row-acts, .v2.v-money.has-detail .m-list .v-row-acts { grid-column: 2; grid-row: 2 / 4; margin: 0 0 0 12px; align-self: center; }
  .v2 .jx-list .v-st, .v2.v-money.has-detail .m-list .v-st { white-space: nowrap; }
  .v2 .jx-list .jl-bar { margin-bottom: 4px; }
  .v2.v-money.has-detail .m-split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; align-items: start; }
  .v2.v-money.has-detail .m-list { display: block; }
  .v2.v-money.has-detail .m-detail { display: block; position: sticky; top: 20px; }
  .v2.v-money.has-detail .mo-open, .v2.v-money.has-detail .mo-balrow { display: none; }
  .v2.jx-split { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; align-items: start; }
  .v2 .jx-list { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow: auto; padding: 2px 4px 24px 2px;
    scrollbar-width: thin; }
  .v2 .jx-list .ls-title { font-size: 24px; line-height: 30px; margin-bottom: 8px; }
  .v2 .jx-list .v-row { padding: 14px 16px; }
  .v2 .jx-list .jl-rows, .v2 .jx-list .v-sec > .jl-rows { background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); overflow: hidden; }
  .v2 .jx-on, .v2.v-money .mo-row[aria-current="true"], .v2.v-money .v-row[aria-current="true"] { background: #EEF0F3; box-shadow: inset 3px 0 0 var(--lf-ink); }
  .v2 .jx-detail { min-width: 0; }
  .v2 .jx-detail .jp-back { display: none; }
}

/* ------------------------------------------------------------------ R4. motion with purpose (none for reduced motion) */
:root { --lf-spring: cubic-bezier(.32, .72, 0, 1); }
.view { animation: lf-in 320ms var(--lf-spring) both; }
@keyframes lf-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
/* Home's blocks arrive one after another, 40 ms apart, the way an app settles */
.v2.hm > section, .v2.hm > nav { animation: lf-in 420ms var(--lf-spring) both; }
.v2.hm > :nth-child(2) { animation-delay: 30ms; } .v2.hm > :nth-child(3) { animation-delay: 70ms; }
.v2.hm > :nth-child(4) { animation-delay: 110ms; } .v2.hm > :nth-child(5) { animation-delay: 150ms; }
.v2.hm > :nth-child(n+6) { animation-delay: 190ms; }
/* sheets rise on iOS's curve; the backdrop fades */
.v2 .v-sheet { transition: transform 420ms var(--lf-spring); }
.sheet { animation-duration: 380ms; animation-timing-function: var(--lf-spring); }
/* the selected tab's glyph pops in */
.v2 .v-tab.on .ic-f, .tn-tab.on .icon { animation: lf-pop 300ms var(--lf-spring); }
@keyframes lf-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: none; } }
/* the live dot breathes a ring outward, smoothly */
.v2 .v-st-live > i { position: relative; animation: none; box-shadow: none; }
.v2 .v-st-live > i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid currentColor; opacity: 0;
  animation: lf-ring 2s ease-out infinite; }
.v2 .v-trk-now::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid #F25A1E; opacity: 0;
  animation: lf-ring 2s ease-out infinite; }
.v2 .v-trk-now { position: absolute; }
@keyframes lf-ring { 0% { transform: scale(.6); opacity: .7; } 80%, 100% { transform: scale(1.8); opacity: 0; } }
/* rows answer a press */
.v2 .hm-row, .v2 .v-row, .v2 .hm-g, .v2 .jrow, .v2 .choice { transition: background 160ms ease; }
@media (prefers-reduced-motion: reduce) {
  .view, .v2.hm > section, .v2.hm > nav, .v2 .v-tab.on .ic-f, .tn-tab.on .icon { animation: none; }
  .v2 .v-st-live > i::after, .v2 .v-trk-now::after { animation: none; display: none; }
  .v2 .v-sheet { transition: none; }
}

/* ------------------------------------------------------------------ R5. loading: the shape of what is coming, never blank */
.skeleton, .v2 .v-sk { display: grid; gap: 0; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); overflow: hidden; }
.skeleton .sk-row, .v2 .v-sk .v-sk-row { position: relative; height: 72px; margin: 0; background: none; border: 0; animation: lf-breathe 1.4s ease-in-out infinite; }
.skeleton .sk-row + .sk-row, .v2 .v-sk .v-sk-row + .v-sk-row { border-top: 1px solid var(--lf-line); }
.skeleton .sk-row::before, .v2 .v-sk .v-sk-row::before { content: ""; position: absolute; left: 16px; top: 18px; width: 58%; height: 14px; border-radius: 7px; background: #E9EBEE; }
.skeleton .sk-row::after, .v2 .v-sk .v-sk-row::after { content: ""; position: absolute; left: 16px; top: 42px; width: 36%; height: 11px; border-radius: 6px; background: #F0F1F3; }
.v2 .v-sk-card { min-height: 160px; }
@media (prefers-reduced-motion: reduce) { .skeleton .sk-row, .v2 .v-sk .v-sk-row { animation: none; } }

/* ------------------------------------------------------------------ R6. bars solid enough to read over anything */
.v2.v-top, .v2.v-tabs, .tn-tabs, .tn-top, .v2.v-money .sbar, .v2 .m-detail .sbar {
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); }
.v2.v-tabs, .tn-tabs { border-top: 1px solid rgba(16, 24, 40, .08); box-shadow: 0 -1px 12px rgba(16, 24, 40, .04); }


/* ------------------------------------------------------------------ R8. the review pass (own checks before Codex) */
/* Jobs: rows grouped in a card at every width, and Open, Done, All as the same segmented control as Money's */
.v2.jl-v2 .jl-rows { background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); overflow: hidden; }
.v2.jl-v2 .jl-rows > .v-row { padding: 14px 16px; border: 0; }
.v2.jl-v2 .jl-rows > .v-row + .v-row { box-shadow: inset 0 1px 0 var(--lf-line); }
.v2.jl-v2 .jl-picks { display: flex; gap: 2px; padding: 3px; border-radius: 12px; background: #E7E9EC; flex: 1; min-width: 0; }
.v2.jl-v2 .pick { flex: 1 0 auto; min-height: 36px; padding: 0 12px; border-radius: 9px; box-shadow: none; font-size: 14px; font-weight: 600;
  color: #4A525C; background: none; }
.v2.jl-v2 .pick[aria-pressed="true"] { background: #fff; color: var(--lf-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06); }
.v2.jl-v2 .pick .n { font-family: var(--lf-din); }
.v2.jl-v2 .jl-bar { gap: 8px; align-items: center; border-bottom: 0; }
.v2.jl-v2 .jl-toggle { width: 44px; height: 44px; border-radius: 12px; background: #fff; box-shadow: var(--lf-shadow); flex: none; }
/* the old skeleton rows reset inside the new card */
.jobs-list .skeleton { padding: 0; }
.jobs-list .skeleton .sk-row, .skeleton > .sk-row, .v2 .view > .skeleton > .sk-row { height: 72px; margin: 0; border-radius: 0; background: none; }
.v2 .view > .skeleton { padding: 0; margin: 12px var(--v-gut); }
/* a sheet's sub head without the old black rule */
.v2 .ll-sh-h { margin: 22px 0 10px; padding: 0; border: 0; font: 700 17px/22px var(--v-sans); letter-spacing: -.01em; }
/* keyboard focus follows the card's shape */
html.kbd .v2 .v-row-a:focus-visible::after { outline: 2px solid var(--lf-ink); outline-offset: -2px; border-radius: 12px; }
html.kbd .v2 .v-btn:focus-visible, html.kbd .v2 .btn:focus-visible { outline: 2px solid var(--lf-ink); outline-offset: 2px; }
/* a screen that did not load: a card with the one way forward */
.v2 .empty.failed, .v2 .view > .failed { margin: 16px var(--v-gut); padding: 28px 20px; max-width: 560px; text-align: center;
  background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
@media (min-width: 1024px) { .v2 .empty.failed, .v2 .view > .failed { margin: 32px auto; } }
.v2 .empty.failed .btn { border-radius: 12px; padding: 0 22px; }
.v2 .skeleton .sk-row, .v2 .v-sk .v-sk-row { height: 72px; border-bottom: 0; }
.v2 .skeleton .sk-row::before, .v2 .v-sk .v-sk-row::before { left: 16px; top: 18px; width: 58%; height: 14px; border-radius: 7px; background: #E9EBEE; }
.v2 .skeleton .sk-row::after, .v2 .v-sk .v-sk-row::after { content: ""; position: absolute; left: 16px; top: 42px; width: 36%; height: 11px; border-radius: 6px; background: #F0F1F3; }

/* ------------------------------------------------------------------ R9. the same system on Requests, Listings and every radio switch */
/* every v-seg (radio based) reads as the segmented control */
.v2 .v-seg { gap: 2px; padding: 3px; border-radius: 12px; background: #E7E9EC; }
.v2 .v-seg-o { min-height: 40px; margin: 0; border: 0; border-radius: 9px; box-shadow: none; background: none; color: #4A525C; font-size: 14px; font-weight: 600; }
.v2 .v-seg-o + .v-seg-o { margin-left: 0; }
.v2 .v-seg-o:first-child, .v2 .v-seg-o:last-child { border-radius: 9px; }
.v2 .v-seg-o:has(> input:checked) { background: #fff; color: var(--lf-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06); }
html.kbd .v2 .v-seg-o:has(> input:focus-visible) { outline: 2px solid var(--lf-ink); outline-offset: 2px; }
/* a landlord's tenant requests: one card of rows */
.v2 .ll-reqs, .ll-reqs { gap: 0; margin-top: 16px; border: 0; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); overflow: hidden; }
.v2 .ll-req, .ll-req { position: relative; padding: 16px; border: 0; }
.v2 .ll-req + .ll-req::before { content: ""; position: absolute; top: 0; left: 84px; right: 0; height: 1px; background: var(--lf-line); }
.v2 .ll-req-tap:active { background: var(--lf-sunk); }
.v2 .ll-thumb { border-radius: 12px; }
.v2 .ll-req-t { font-size: 17px; line-height: 23px; font-weight: 600; letter-spacing: -.012em; color: var(--lf-ink); }
.v2 .ll-req-k, .v2 .ll-req-s { color: var(--lf-sub); }
.v2 .ll-req .v-btn { min-height: 40px; padding: 0 18px; border-radius: 999px; font-size: 15px; margin-top: 10px; }
@media (min-width: 1024px) { .v2 .ll-reqs, .ll-reqs { grid-template-columns: 1fr; } }
/* a realtor's listings: a section card, its title inside */
.v2 .rt-list { padding: 16px 16px 4px; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .rt-list > .v-row { padding: 14px 0; border: 0; box-shadow: inset 0 1px 0 var(--lf-line); }
.v2 .rt-list > .v-sec-h + .v-row { box-shadow: none; }

/* ================================================================== CODEX DESIGN REVIEW, round 1 fixes (Nov 5) */
/* D1 contrast: secondary text and idle tabs at #5C6570 (5.37 to 1 on the canvas, 5.9 on white) */
:root { --lf-sub: #5C6570; }
.v2 .v-tab, .tn-tab { color: #5C6570; }
/* D2 tap targets: 44 px, by size or by an invisible hit area where 44 would look heavy */
.v2 .hm-act .v-btn, .v2 .v-row-acts .v-btn, .v2 .v-row-acts .btn, .v2 .mo-row-btn, .v2 .hm-insp-act .v-btn, .v2 .ll-req .v-btn { min-height: 44px; }
.v2 .fb-chip, .v2 .m-seg-i, .v2.v-money .m-seg-i, .v2.jl-v2 .pick, .v2 .v-seg-o { position: relative; }
.v2 .fb-chip::after, .v2 .m-seg-i::after, .v2.v-money .m-seg-i::after, .v2.jl-v2 .pick::after { content: ""; display: block; position: absolute;
  left: 0; right: 0; top: -4px; bottom: -4px; }
.v2 .m-seg-i::after, .v2.v-money .m-seg-i::after { top: -3px; bottom: -5px; }
@media (min-width: 1024px) {
  .v2 .v-rail-a { min-height: 44px; }
  .v2 .v-rail-search { min-height: 44px; }
}
/* D3 a realtor's listings on a desktop: the address gets the room; one primary action, the links under it */
@media (min-width: 1280px) {
  #main > .view > .v2.rt-page:has(.rt-list):not(.v-si):not(.v-ob) { max-width: 1040px; }
}
@media (min-width: 1024px) {
  .v2 .rt-list .v-row { grid-template-columns: 168px minmax(260px, 1fr) auto; }
  .v2 .rt-list .v-row-acts { grid-column: 3; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
  .v2 .rt-list .v-row-acts .v-btn-link { min-height: 44px; font-size: 14px; }
}
/* D4 the failed screen, drawn straight into the view */
#main > .view > .empty.failed { margin: 16px var(--v-gut); padding: 28px 20px; max-width: 560px; text-align: center;
  background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
@media (min-width: 1024px) { #main > .view > .empty.failed { margin: 40px auto; } }
/* D6 Home's insights: each note its own card, as Apple Health's highlights (Codex phone 5) */
.v2 .o-insights .ins-list { display: grid; gap: 12px; max-width: none; border: 0; }
.v2 .o-insights .ins-row { padding: 16px; background: #fff; border: 0; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.v-money .m-list .need { background: #fff; }
/* D7 Home loading keeps Home's shape: a hero block, then rows grouped */
.v2.hm[aria-busy] .v-sk { background: transparent; box-shadow: none; gap: 14px; overflow: visible; }
.v2.hm[aria-busy] .v-sk .v-sk-row { background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); border: 0; }
.v2.hm[aria-busy] .v-sk .v-sk-row + .v-sk-row { border-top: 0; }
.v2.hm[aria-busy] .v-sk .v-sk-row:first-child { height: 168px; background: #E9EBEE; box-shadow: none; }
.v2.hm[aria-busy] .v-sk .v-sk-row:first-child::before, .v2.hm[aria-busy] .v-sk .v-sk-row:first-child::after { background: #DCDFE3; }
/* D8 motion: one restrained view rise, no per-block stagger, and reduced motion stops every transition and transform */
.view { animation-duration: 200ms; }
.v2.hm > section, .v2.hm > nav { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .sheet, .v2 .v-sheet, .v2 .o-cat, .tn-card, .v2 .hm-row, .v2 .v-row, .v2 .hm-g, .v2 .jrow, .v2 .choice, .choice,
  .v2 .v-btn, .v2 .btn, .btn, .v2 .v-tab-ord { animation: none; transition: none; }
  .v2 .v-btn:active, .v2 .btn:active, .btn:active, .v2 .o-cat:active, .tn-card:active, .v2 .v-tab-order:active .v-tab-ord { transform: none; }
}
/* Codex phone 3: the bars more solid still */
.v2.v-top, .v2.v-tabs, .tn-tabs, .tn-top { background: rgba(255, 255, 255, .97); }
/* Codex phone 1, in part: the tenant's send stays docked (slice 7, always in reach) but reads as a frosted bar that the
   form scrolls under, with a hairline, not a white slab over the last field */
.tn-send { margin: 24px -16px 0; padding: 12px 16px; background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(180%) blur(28px); backdrop-filter: saturate(180%) blur(28px); border-top: 1px solid rgba(16, 24, 40, .08); }
.tn-form { padding-bottom: 8px; }
/* the tenant's form in the same system: sub heads without the black rule, category picks as tiles */
.tn-h2 { margin: 24px 0 10px; padding: 0; border: 0; font: 700 17px/22px var(--v-sans); letter-spacing: -.01em; }
.tn-cat { min-height: 52px; border: 1px solid #E3E6EA; border-radius: var(--lf-r-s); background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); font-weight: 600; }
.tn-cat:has(.tn-cat-in:checked) { border: 2px solid var(--lf-ink); background: #F4F5F7; }
/* Codex phone 8, in part: refs stay in DIN (the brand's figure face) but step back */
.v2 .v-n-ref, .v2 .v-row-note, .v2 .mo-ref { font-size: 14px; letter-spacing: .02em; color: #5C6570; }
@media (min-width: 1024px) { .v2 .rt-list .v-row-e { grid-column: 1; grid-row: 2; text-align: left; margin-top: 6px; } }

/* ------------------------------------------------------------------ R10. Rentals and Rewards in the system */
.v2 .ll-home { border: 0; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .ll-table { margin-top: 20px; padding: 4px 16px; border: 0; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .ll-tr { border-bottom: 1px solid var(--lf-line); }
.v2 .ll-tr:last-child { border-bottom: 0; }
.v2 .ll-th { border-bottom: 1px solid var(--lf-line); color: var(--lf-sub); }
.v2.rt-page > section.v-sec { padding: 16px 16px 12px; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.rt-page > section.v-sec .v-sec-h h2, .v2.rt-page > section.v-sec .v-sec-h .v-t-lab { font-size: 17px; line-height: 22px; }
.v2 .rt-disc { border: 0; background: var(--lf-sunk); border-radius: var(--lf-r-s); }

/* ================================================================== CODEX DESIGN REVIEW, pass 2 fixes */
/* P2-1 tap targets: radio segments at 44 px on a phone; a stand alone text button gets a 44 px box */
@media (max-width: 1023px) { .v2 .v-seg-o { min-height: 44px; } }
.v2 button.link, .tn button.link, .v2 button.v-btn-link { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; }
/* P2-6 a quote waiting in Money's list: the same card as every other record */
.v2.v-money .m-list .ds-sec > .need { padding: 16px; border: 0; border-radius: var(--lf-r); background: var(--lf-card); box-shadow: var(--lf-shadow); }
.v2.v-money .m-list .ds-sec > .need + .need { margin-top: 12px; }
/* P2 desktop 1: the radio segments' hit area reaches 44 at every width */
.v2 .v-seg-o::after { content: ""; position: absolute; left: 0; right: 0; top: -2px; bottom: -2px; }
/* P2 desktop 2: every waiting quote in Money's list is a card */
.v2.v-money .m-list .need { padding: 16px; border: 0; border-radius: var(--lf-r); background: var(--lf-card); box-shadow: var(--lf-shadow); }
.v2.v-money .m-list .need + .need { margin-top: 12px; }
/* P2 desktop 4: loading keeps the page's frame. The firm's building bar holds its place while its buildings load (an
   empty bar is the loading one), and Home's skeleton starts with a heading bar, so nothing jumps when the data lands. */
.v2.fb:empty:not([hidden]) { position: relative; min-height: 110px; }
.v2.fb:empty:not([hidden])::before { content: ""; position: absolute; left: var(--v-gut); right: var(--v-gut); top: 12px; max-width: 480px; height: 48px;
  border-radius: 14px; background: #fff; box-shadow: var(--lf-shadow); animation: lf-breathe 1.4s ease-in-out infinite; }
.v2.fb:empty:not([hidden])::after { content: ""; position: absolute; left: var(--v-gut); top: 72px; width: 220px; height: 38px; border-radius: 999px;
  background: #E9EBEE; animation: lf-breathe 1.4s ease-in-out infinite; }
/* measured on the loaded bar (Codex pass 3): from 1024 the selector sits 48 px in and 24 px down, 480 by 48, the chips
   under it at 84 px, 36 tall; the bar is 120 px */
@media (min-width: 1024px) {
  .v2.fb:empty:not([hidden]) { min-height: 120px; }
  .v2.fb:empty:not([hidden])::before { left: 48px; right: auto; top: 24px; width: 480px; max-width: calc(100% - 96px); }
  .v2.fb:empty:not([hidden])::after { left: 48px; top: 84px; height: 36px; }
}
.v2.hm[aria-busy]::before { content: ""; display: block; width: 168px; height: 24px; margin: 10px 0 14px; border-radius: 8px; background: #E3E6EA; }
@media (prefers-reduced-motion: reduce) { .v2.fb:empty:not([hidden])::before, .v2.fb:empty:not([hidden])::after { animation: none; } }

/* ================================================================== CODEX DESIGN REVIEW, pass 3 fixes */
/* P3-1 a desktop's buttons keep the 44 px target (base.css set 36 from 1024) */
@media (min-width: 1024px) {
  .v2 .v-btn { min-width: 44px; min-height: 44px; }
  .v2 .v-icon-btn { width: 44px; height: 44px; }
}
/* P3-2 the rail's Book an inspection holds its slot while the account's options load */
.v2 .v-rail-wait { color: transparent; background: var(--lf-sunk); box-shadow: none; pointer-events: none; animation: lf-breathe 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .v2 .v-rail-wait { animation: none; } }

/* ================================================================== SIGN IN, option A (Nov 5): no side panel
   The owner turned down the street photo, then the graphite panel. Sign in is one calm centred column on the soft
   canvas at every width, the logo above a white card that holds the form, the foot links under it: Stripe's, Linear's
   and Uber's sign in. Desktop matches the phone (Nov 1). Still one screen with no scroll. */
.v2.v-si { display: block; background: var(--lf-canvas); }
.v2.v-si .si-main { width: 100%; max-width: 460px; min-height: 100vh; min-height: 100dvh; margin: 0 auto;
  padding: calc(16px + env(safe-area-inset-top)) 16px calc(12px + env(safe-area-inset-bottom)); }
.v2.v-si .si-top { position: relative; justify-content: center; min-height: 44px; }
.v2.v-si .si-top .si-logo { height: 30px; }
.v2.v-si .si-top .v-call-btn { position: absolute; right: -6px; top: 0; margin: 0; }
.v2.v-si .si-col { max-width: none; }
.v2.v-si .si-body { margin: clamp(18px, 7vh, 64px) 0 0; padding: 26px 22px 22px; background: #fff; border-radius: 20px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 8px 28px rgba(16, 24, 40, .07); }
.v2.v-si .si-end { margin-top: auto; padding-top: 16px; }
@media (min-width: 1024px) {
  .v2.v-si .si-main { max-width: 500px; padding: 40px 24px 24px; }
  .v2.v-si .si-col { flex: 1; }
  .v2.v-si .si-body { margin: auto 0; padding: 36px 36px 30px; }
}
/* set up: the step alone, centred, at every width */
@media (min-width: 1024px) {
  .v2.v-ob.ob-split { grid-template-columns: minmax(0, 1fr); }
  .v2.v-ob.ob-split .ob-card { width: min(520px, 100% - 2 * var(--v-gut)); }
}

/* ================================================================== THE BUTTON AUDIT (Nov 5): every tap answers at once
   The owner: "some button clicks are not good enough". Every tappable thing: no tap delay and no grey tap flash (our
   own pressed states replace it), a pointer on a desktop, a pressed state the moment it is held (under 100 ms: the
   change starts on press), a hover on a desktop, a spinner inside a button that waits on the server and no second
   submit while it waits (ui.js btn() and the screens' busy helpers set aria-busy and disabled), and the focus ring only
   for the keyboard (core.js's kbd mode; shell.js ends it on touch). */
a, button, [role=button], [role=tab], [role=switch], [role=radio], label, summary, select, .v-row, .hm-row, .hm-g, .jrow {
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button:not(:disabled), [role=button], [role=tab], [role=switch], [role=radio], summary, select, label:has(> input:not(:disabled)),
.v2 .ll-req-tap, .v2 .v-row:has(.v-row-a), .v2 .hm-row:has(.hm-a) { cursor: pointer; }
button:disabled, .v-btn[aria-disabled="true"] { cursor: not-allowed; }
:focus:not(:focus-visible) { outline: none; }
html:not(.kbd) .v2 :focus { outline: none; }

/* pressed: buttons scale (above), and everything else answers too */
.v2 .v-icon-btn:active, .v2 .v-av:active .v-av-i, .v2 .v-call-btn:active { background: #E6E8EB; transform: scale(.94); }
.v2 .v-icon-btn, .v2 .v-av-i { transition: transform 100ms var(--lf-press), background 100ms ease; }
.v2 .v-tab:active .icon, .tn-tab:active .icon { transform: scale(.88); }
.v2 .v-tab .icon, .tn-tab .icon { transition: transform 100ms var(--lf-press); }
.v2 .v-tab-order:active .v-tab-ord, .tn-tab:active .tn-tab-plus { transform: scale(.92); }
.v2 .fb-chip:active, .v2 .fb-pick:active, .v2 .pick:active, .v2 .m-seg-i:active, .v2 .v-seg-o:active { transform: scale(.97); }
.v2 .fb-chip, .v2 .fb-pick, .v2 .pick, .v2 .m-seg-i, .v2 .v-seg-o { transition: transform 100ms var(--lf-press), background 120ms ease; }
.v2 .v-rail-a:active, .v2 .v-rail-sw:active, .v2 .v-rail-me:active, .v2 .v-rail-call:active, .v2 .v-rail-search:active { background: #E9EBEE; }
.v2 .hm-row:active, .v2 .v-row:has(.v-row-a):active, .v2 .hm-g:active, .v2 .jrow:active, .v2 .ll-req-tap:active, .v2 .choice:active,
.v2 .v-choice:active, .tn-card:active, .v2 .mo-balrow:active, .v2 .o-cat:active, .tn-cat:active, .v2 .pay-add:active { background: #EEF0F2; }
.v2 a:not(.v-btn):not(.v-row-a):not(.hm-a):not(.v-tab):not(.v-rail-a):active, .v2 button.link:active, .v2 .v-btn-link:active { opacity: .55; }
.v2 .v-switch:active .v-switch-k { transform: scale(.9); }
/* hover, a desktop only */
@media (hover: hover) and (pointer: fine) {
  .v2 .hm-row:has(.hm-a):hover, .v2 .v-row:has(.v-row-a):hover, .v2 .hm-g:hover, .v2 .jrow:hover, .v2 .ll-req-tap:hover,
  .v2 .mo-balrow:hover, .v2 .choice:hover, .v2 .v-choice:hover, .tn-card:hover { background: #FAFAFB; }
  .v2 .v-icon-btn:hover, .v2 .v-av:hover .v-av-i { background: #EEF0F2; }
  .v2 .fb-chip:hover { box-shadow: inset 0 0 0 1px #C9CDD3; }
  .v2 .fb-chip.on:hover { box-shadow: none; background: #23272E; }
  .v2 .m-seg-i:not(.on):hover, .v2 .pick:not([aria-pressed="true"]):hover, .v2 .v-seg-o:not(:has(> input:checked)):hover { color: var(--lf-ink); }
  .v2 .v-btn-w:hover { box-shadow: inset 0 0 0 1px #B9BFC6; background: #FAFAFB; }
  .v2 .v-btn-line:hover { background: #F4F5F7; }
}
/* waiting on the server: the label steps aside for a spinner, the button holds its size and takes no second press */
.v2 .v-btn[aria-busy="true"], .v2 .btn[aria-busy="true"], .btn[aria-busy="true"] { position: relative; color: transparent !important; opacity: 1; pointer-events: none; }
.v2 .v-btn[aria-busy="true"]::after, .v2 .btn[aria-busy="true"]::after, .btn[aria-busy="true"]::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; animation: lf-spin 700ms linear infinite; }
.v2 :is(.v-btn-w, .v-btn-line, .v-btn-link)[aria-busy="true"]::after, .btn:not(.btn-ink):not(.btn-primary)[aria-busy="true"]::after {
  border-color: rgba(14, 17, 22, .18); border-top-color: var(--lf-ink); }
.v2 .v-btn-o[aria-busy="true"]::after { border-color: rgba(14, 17, 22, .25); border-top-color: var(--lf-ink); }
@keyframes lf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .v2 .v-btn[aria-busy="true"]::after, .btn[aria-busy="true"]::after { animation-duration: 1.6s; } }
.v2 .v-btn:disabled:not([aria-busy="true"]), .v2 .btn:disabled:not([aria-busy="true"]) { opacity: .55; }
@media (prefers-reduced-motion: reduce) {
  .v2 .v-icon-btn:active, .v2 .v-tab:active .icon, .tn-tab:active .icon, .v2 .v-tab-order:active .v-tab-ord, .v2 .fb-chip:active,
  .v2 .fb-pick:active, .v2 .pick:active, .v2 .m-seg-i:active, .v2 .v-seg-o:active, .v2 .v-switch:active .v-switch-k { transform: none; }
}

/* ---- audit fixes: hit areas the probe found short */
/* a scrolling row clips anything outside its padding box, so the 44 px hit areas live inside 4 px of padding */
.v2.v-money .m-seg, .v2 .m-seg, .v2.jl-v2 .jl-picks, .v2 .v-seg { padding: 4px; }
.v2 .m-seg-i::after, .v2.v-money .m-seg-i::after, .v2.jl-v2 .pick::after, .v2 .v-seg-o::after { top: -4px; bottom: -4px; }
.v2 .fb-chips { padding-top: 4px; padding-bottom: 4px; margin-top: 8px; margin-bottom: -4px; }
/* small links that stand on their own */
.v2 .si-end a, .v2 .v-credit a, .v2 .v-sec-link, .v2 .ins-job, .v2.v-money table a, .v2 .v-rail-logo {
  display: inline-flex; align-items: center; min-height: 44px; }
.v2 .v-sec-link { min-width: 44px; justify-content: center; }
.v2 .ins-tab { min-height: 44px; }
/* a press shows on every button and link, even those with no style of their own: a short dim, as iOS does */
:where(.v2, .tn) :where(a[href], button:not(:disabled), [role=button], [role=tab], label:has(> input)):active { opacity: .72; }
:where(.v2, .tn) :where(a[href], button, [role=button], [role=tab], label) { transition: opacity 90ms ease; }
/* busy and disabled on the quieter controls too: a text button or a row's link shows a small spinner beside its words */
.v2 :is(button.link, .pay-link, .jrow, .set-row, .ps-row)[aria-busy="true"] { position: relative; pointer-events: none; opacity: .7; }
.v2 :is(button.link, .pay-link)[aria-busy="true"]::after, .v2 :is(.jrow, .set-row, .ps-row)[aria-busy="true"]::after {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 8px; vertical-align: -2px; border-radius: 50%;
  border: 2px solid rgba(14, 17, 22, .18); border-top-color: var(--lf-ink); animation: lf-spin 700ms linear infinite; }
.v2 :is(.jrow, .set-row, .ps-row)[aria-busy="true"]::after { position: absolute; right: 16px; top: 50%; margin: -7px 0 0; }
.v2 :is(button.link, .pay-link):disabled { opacity: .45; cursor: not-allowed; }
.tn button[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; }
.tn button[aria-busy="true"]::after { content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; border: 2px solid rgba(14, 17, 22, .25); border-top-color: var(--lf-ink); animation: lf-spin 700ms linear infinite; }
/* any other button that waits (a menu item, a More row): it dims and takes no press until the answer lands */
.v2 button[aria-busy="true"]:not(.v-btn):not(.btn):not(.link):not(.pay-link), .v2 [role=menuitem][aria-busy="true"] { opacity: .55; pointer-events: none; }
/* audit, second run: the last short targets */
.v2 .fb-chip { min-height: 44px; }
.v2.v-si .si-links a, .v2.v-si .si-links .v-credit a, .v2.v-more-credit .v-credit a, .v2 .v-nf-credit .v-credit a { min-height: 44px; }
.v2 .ins-job, .v2 .v-sec-link { position: relative; z-index: 1; }
.v2 summary.ins-cap, .v2 .ins-cap { display: flex; align-items: center; min-height: 44px; cursor: pointer; }
.v2 summary:active, .v2 .ins-job:active, .v2 .jp-sum:active { background: #EEF0F2; }
/* pressing a row's own button answers on the button only, not the whole row (as an iOS cell's accessory) */
.v2 .hm-row:has(.hm-act :active), .v2 .v-row:has(.v-row-acts :active), .v2 .ll-req-tap:has(.v-btn:active) { background: transparent; }
/* reduced motion (Codex pass 5): every busy mark stops turning and holds as a still ring, the control stays dimmed and
   takes no press, so the wait still shows without movement */
@media (prefers-reduced-motion: reduce) {
  .v2 .v-btn[aria-busy="true"]::after, .v2 .btn[aria-busy="true"]::after, .btn[aria-busy="true"]::after,
  .v2 :is(button.link, .pay-link, .jrow, .set-row, .ps-row)[aria-busy="true"]::after, .tn button[aria-busy="true"]::after,
  .v2 .v-rail-wait, .v2.fb:empty:not([hidden])::before, .v2.fb:empty:not([hidden])::after { animation: none; }
}

/* ================================================================== ROLLOUT (Nov 5): the system carried to the screens it had
   not reached. Same tokens, cards, controls and states as above, nothing new; one block per screen, one line each. */

/* ---- shared: a white button that sits on the canvas beside a section's title (Export CSV, Add unit, Invite) */
.v2 .sec-h .btn, .v2.v-lists .sec-h .btn, .v2.v-lists .ls-actions .btn {
  min-height: 44px; padding: 0 16px; border: 0; border-radius: var(--lf-r-c); background: var(--lf-card); color: var(--lf-ink);
  box-shadow: var(--lf-shadow); font-size: 15px; font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
  .v2 .sec-h .btn:hover, .v2.v-lists .sec-h .btn:hover, .v2.v-lists .ls-actions .btn:hover { background: #FAFAFB; box-shadow: var(--lf-shadow); } }

/* ---- Money's other lists (Statements, the earlier quotes, Spend's tables): rows grouped in one card, inset hairlines */
.v2.v-money .mo-card { padding: 0; border: 0; border-radius: var(--lf-r); background: var(--lf-card); box-shadow: var(--lf-shadow); overflow: hidden; }
.v2.v-money .mo-card > .mo-row { position: relative; padding: 14px 16px; border: 0; border-radius: 0; }
.v2.v-money .mo-card > .mo-row + .mo-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 1px; background: var(--lf-line); }
.v2.v-money .mo-card > a.mo-row:active { background: #EEF0F2; }
@media (hover: hover) and (pointer: fine) { .v2.v-money .mo-card > a.mo-row:hover { background: #FAFAFB; } }
.v2.v-money .mo-1 { color: var(--lf-ink); letter-spacing: -.005em; }
.v2.v-money .mo-2, .v2.v-money .mo-3 { color: var(--lf-sub); }
/* an empty money list (no statements yet): the calm card, its one way forward in black */
.v2.v-money > .empty { margin: 4px 0 0; padding: 22px 18px; background: var(--lf-card); border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.v-money > .empty h2 { margin: 0; font-size: 19px; line-height: 25px; font-weight: 700; letter-spacing: -.015em; }
.v2.v-money > .empty p { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--lf-sub); }
.v2.v-money > .empty .btn { margin-top: 14px; min-height: 48px; padding: 0 20px; border: 0; border-radius: var(--lf-r-c); background: var(--lf-ink); color: #fff; }

/* ---- Spend: the month in a card; This year, Last 12 months, 2025 and By property as the segmented control; the chart a card */
.v2.v-money .mstrip.mo-lead { margin: 0 0 16px; padding: 18px 18px 16px; border: 0; border-radius: var(--lf-r); background: var(--lf-card); box-shadow: var(--lf-shadow); }
.v2.v-money .mstrip.mo-lead .mstrip-row { border-top-color: var(--lf-line); }
.v2.v-money .mstrip-cap { font-size: 13px; font-weight: 600; color: var(--lf-sub); }
.v2.v-money .chips.m-picker, .v2.v-money .chips.m-by { display: flex; flex-wrap: nowrap; gap: 2px; padding: 4px; border: 0; border-radius: 12px; background: #E7E9EC; }
.v2.v-money .chips.m-picker { margin: 0 0 22px; }
.v2.v-money .chips.m-by { margin: 0 0 12px; }
.v2.v-money .chips .pick { position: relative; flex: 1 0 auto; min-height: 36px; padding: 0 12px; border: 0; border-radius: 9px; background: none;
  box-shadow: none; color: #4A525C; font-size: 14px; font-weight: 600; transition: transform 100ms var(--lf-press), background 120ms ease; }
.v2.v-money .chips .pick::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.v2.v-money .chips .pick[aria-pressed="true"] { background: #fff; color: var(--lf-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06); }
.v2.v-money .chips .pick:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .v2.v-money .chips .pick:not([aria-pressed="true"]):hover { color: var(--lf-ink); } }
.v2.v-money .mo-card.mo-chartcard { padding: 16px 12px 10px 8px; }
.v2.v-money .mo-card .m-table-wrap { padding: 4px 16px; }
.v2.v-money .mo-card .m-table th, .v2.v-money .mo-card .m-table td { border-color: var(--lf-line); }
.v2.v-money .mo-card .m-table tr:last-child td { border-bottom: 0; }

/* ---- a statement and a building (firm): every section a card with its title inside, as the job page; the pay line a card */
.v2.fx .v-sec { margin-top: 14px; padding: 16px 16px 4px; background: var(--lf-card); border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.fx .v-sec .v-sec-h { margin-bottom: 2px; }
.v2.fx .v-sec .v-sec-h h2, .v2.fx .v-sec .v-sec-h .v-t-lab { font-size: 17px; line-height: 22px; }
.v2.fx .v-sec > .v-kv, .v2.fx .v-sec > .v-row, .v2.fx .v-sec .v-tbl th, .v2.fx .v-sec .v-tbl td { border-bottom: 1px solid var(--lf-line); }
.v2.fx .v-sec > .v-kv:last-child, .v2.fx .v-sec > .v-row:last-child, .v2.fx .v-sec .v-tbl tbody tr:last-child > * { border-bottom: 0; }
.v2.fx .v-sec .v-empty { padding: 4px 0 14px; background: none; border-radius: 0; box-shadow: none; text-align: left; }
.v2.fx .v-sec .v-tbl { margin-top: 6px; }
.v2 .fx-pay { padding: 14px 14px 14px 16px; border: 0; border-radius: var(--lf-r); background: var(--lf-card); box-shadow: var(--lf-shadow); }
.v2 .fx-acts .v-btn-w { background: var(--lf-card); box-shadow: var(--lf-shadow); }
@media (min-width: 1024px) {
  .v2 .fx-grid { gap: 28px; }
  .v2 .fx-side > .v-sec:first-child { margin-top: 14px; }
}

/* ---- Insights (the page and a property's): All, Follow up, Plan ahead as the segmented control; each note its own card */
.v2.v-ins .ins-h1 { font-size: 34px; line-height: 40px; font-weight: 700; letter-spacing: -.03em; }
.v2 .ins-tabs { gap: 2px; padding: 4px; margin: 4px 0 18px; border: 0; border-radius: 12px; background: #E7E9EC; overflow-x: auto; scrollbar-width: none; }
.v2 .ins-tabs .ins-tab { position: relative; flex: 1 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 36px; padding: 0 12px; border-radius: 9px; box-shadow: none; color: #4A525C; font-size: 14px;
  transition: transform 100ms var(--lf-press), background 120ms ease; }
.v2 .ins-tabs .ins-tab::after { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
.v2 .ins-tabs .ins-tab[aria-pressed="true"] { background: #fff; color: var(--lf-ink); box-shadow: 0 1px 2px rgba(16, 24, 40, .08), 0 2px 6px rgba(16, 24, 40, .06); }
.v2 .ins-tabs .ins-tab:active { transform: scale(.97); }
.v2 .ins-tabs .ins-n { font-family: var(--lf-din); font-weight: 700; color: var(--lf-sub); }
.v2.v-ins .ins-list, .v2 .ins-slot .ins-list { display: grid; gap: 12px; border: 0; }
.v2.v-ins .ins-row, .v2 .ins-slot .ins-row { padding: 16px; border: 0; background: var(--lf-card); border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .ins-title { color: var(--lf-ink); letter-spacing: -.01em; }
.v2 .ins-body, .v2 .ins-place { color: var(--lf-sub); }
/* the quiet insights block under a rental: a card */
.v2 .ins-slot .ins-quiet { margin: 14px 0 0; padding: 16px 16px 6px; border: 0; background: var(--lf-card); border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2 .ins-quiet-h h2 { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: -.01em; }
.v2 .ins-quiet-rows a { border-color: var(--lf-line); }

/* ---- a rental (landlord, /rentals/:id): each section a card with its title inside; the units on hairlines inside */
.v2.ll > .ds-sec { margin-top: 14px; padding: 16px 16px 8px; background: var(--lf-card); border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.ll > .ds-sec > .sec-h { margin: 0 0 2px; padding: 0; border: 0; }
.v2.ll > .ds-sec > .sec-h h2 { font-size: 17px; line-height: 22px; }
.v2.ll .ll-unit { border-bottom: 1px solid var(--lf-line); }
.v2.ll .ll-unit-h strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.v2.ll .ll-head { letter-spacing: -.02em; }
.v2.ll .ll-acts .v-btn-w { background: var(--lf-card); box-shadow: var(--lf-shadow); }

/* ---- a property (landlord, realtor, homeowner): the jobs grouped in a card, the header's second action white */
.v2.v-lists .ls-jobs { padding: 0 16px; background: var(--lf-card); border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.v2.v-lists .ls-jobs > .v-row { border: 0; box-shadow: inset 0 -1px 0 var(--lf-line); }
.v2.v-lists .ls-jobs > .v-row:last-child { box-shadow: none; }
.v2.v-lists .ls-phead-acts .btn:not(.btn-primary):not(.btn-ink) { box-shadow: var(--lf-shadow); }

/* ---- messages (a landlord's thread with a tenant, the tenant's Messages): the other side's bubble white on the canvas */
.tn-msg-b { border-radius: 18px 18px 18px 6px; }
.tn-msg:not(.tn-msg-me) .tn-msg-b { background: #fff; color: var(--lf-ink); box-shadow: var(--lf-shadow); }
.tn-msg-me .tn-msg-b { border-radius: 18px 18px 6px 18px; background: var(--lf-ink); }
.tn-msg-t { font-size: 12.5px; color: var(--lf-sub); }
.v2.ll .ll-reply, .tn-msg-form { margin-top: 8px; }

/* ---- a tenant's request (/t/requests/:id): the steps in a card, photos rounded as the job page's */
.tn-body > .tn-steps { margin-top: 18px; padding: 18px 16px 0; background: #fff; border-radius: var(--lf-r); box-shadow: var(--lf-shadow); }
.tn-photo { border-radius: 14px; }

/* ---- every radio list (the Decide sheet, set up's type and size): grouped in a card, the pick filled */
.v2 .v-choices { border: 1px solid #E3E6EA; border-radius: var(--lf-r-s); background: #fff; overflow: hidden; }
.v2 .v-choice { padding: 15px 16px; border: 0; border-top: 1px solid #EEF0F2; }
.v2 .v-choice:first-child { border-top: 0; }
.v2 .v-choice:has(> input:checked) { background: #F4F5F7; }
.v2 .v-radio { width: 22px; height: 22px; margin-top: 0; box-shadow: inset 0 0 0 2px #B9BFC6; }
.v2 .v-choice > input:checked + .v-radio { box-shadow: inset 0 0 0 7px var(--lf-ink); }
.v2 .v-choice-t { color: var(--lf-ink); }
.v2 .v-choice-s { color: var(--lf-sub); }
.v2.v-ob .su-more .v-choices { border: 0; border-radius: 0; background: none; }
/* the Decide sheet's photos and its sub head */
.v2 .ll-ph img, .v2 .ll-ph { border-radius: 12px; }

/* ---- the order flow, the booking and set up: lists grouped in a card (as the booking's first step), heads without the rule */
.v2:is(.v-order, .v-ob) .choices { border: 1px solid #E3E6EA; border-radius: var(--lf-r-s); background: #fff; overflow: hidden; }
.v2.v-order .o-sub-h + .choices { border-top: 1px solid #E3E6EA; }
.v2:is(.v-order, .v-ob) .choice { min-height: 56px; padding: 14px 16px; border: 0; border-top: 1px solid #EEF0F2; border-radius: 0; }
.v2:is(.v-order, .v-ob) .choices > .choice:first-child { border-top: 0; }
.v2:is(.v-order, .v-ob) .choice[aria-checked="true"], .v2:is(.v-order, .v-ob) .choice[aria-pressed="true"] { background: #F4F5F7; }
.v2:is(.v-order, .v-ob) .choice:active { background: #EEF0F2; }
@media (hover: hover) and (pointer: fine) { .v2:is(.v-order, .v-ob) .choice:not([aria-checked="true"]):hover { background: #FAFAFB; } }
.v2:is(.v-order, .v-ob) .choice .dot { width: 22px; height: 22px; box-shadow: inset 0 0 0 2px #B9BFC6; }
.v2:is(.v-order, .v-ob) .choice[aria-checked="true"] .dot, .v2:is(.v-order, .v-ob) .choice[aria-pressed="true"] .dot { box-shadow: inset 0 0 0 7px var(--lf-ink); }
html.kbd .v2:is(.v-order, .v-ob) .choice:focus-visible { outline: 2px solid var(--lf-ink); outline-offset: -3px; }
.v2.v-order .choice-open { padding: 14px 16px 16px; border-top: 1px solid #EEF0F2; background: #FAFAFB; }
.v2.v-order .o-sub-h { margin: 0 0 10px; padding: 0; border: 0; font: 700 17px/22px var(--v-sans); letter-spacing: -.01em; color: var(--lf-ink); }
.v2.v-order .step-h, .v2.v-order .o-h { font-weight: 700; letter-spacing: -.02em; }
.v2.v-ob .ob-body h1 { font-weight: 700; letter-spacing: -.02em; }
/* Getting in: one row in a card, its Change a compact capsule */
.v2.v-order .o-row { padding: 10px 10px 10px 16px; border: 1px solid #E3E6EA; border-radius: var(--lf-r-s); background: #fff; }
.v2.v-order .o-sub-h + .o-row { border-top: 1px solid #E3E6EA; }
.v2.v-order .o-row .btn { min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 15px; }
/* review: the summary as one card of sections */
.v2.v-order .card.sums, .v2.v-order .sums { padding: 0 16px; border: 1px solid #E3E6EA; border-radius: var(--lf-r-s); background: #fff; }
.v2.v-order .sum { padding: 12px 0; border: 0; border-bottom: 1px solid #EEF0F2; }
.v2.v-order .sum:last-child { border-bottom: 0; }
/* chips (When works, Which units, Part of the day) as capsules, the pick filled in ink; a day a tile with a ring */
.v2.v-order .chips > button, .v2.v-order .chips > .chip, .v2.v-order .o-chip, .v2 .in-chip { min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: #fff; color: var(--lf-ink); box-shadow: inset 0 0 0 1px #DADDE2; font-size: 15px; font-weight: 600;
  transition: transform 100ms var(--lf-press), background 120ms ease; }
.v2.v-order .chips > [aria-pressed="true"], .v2.v-order .chips > [aria-checked="true"], .v2.v-order .o-chip[aria-pressed="true"], .v2 .in-chip[aria-pressed="true"] {
  background: var(--lf-ink); color: #fff; box-shadow: none; }
.v2.v-order .chips > button:active, .v2.v-order .o-chip:active, .v2 .in-chip:active, .v2 .in-day:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .v2.v-order .chips > button:not([aria-pressed="true"]):hover, .v2.v-order .o-chip:not([aria-pressed="true"]):hover, .v2 .in-chip:not([aria-pressed="true"]):hover {
    background: #FAFAFB; box-shadow: inset 0 0 0 1px #B9BFC6; } }
.v2 .in-day { border-radius: var(--lf-r-s); box-shadow: inset 0 0 0 1px #DADDE2; }
.v2 .in-day[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--lf-ink); }
.v2.v-order .select { min-height: 52px; border-radius: var(--lf-r-c); }
@media (prefers-reduced-motion: reduce) {
  .v2.v-money .chips .pick, .v2 .ins-tabs .ins-tab, .v2.v-order .chips > button, .v2.v-order .o-chip, .v2 .in-chip { transition: none; }
  .v2.v-money .chips .pick:active, .v2 .ins-tabs .ins-tab:active, .v2.v-order .chips > button:active, .v2.v-order .o-chip:active,
  .v2 .in-chip:active, .v2 .in-day:active { transform: none; }
}

/* ---- the account switcher menu: a floating card, rows as 12 px pills, an inset hairline between groups */
.v2.v-menu { padding: 6px; border: 0; border-radius: var(--lf-r); box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 12px 32px rgba(16, 24, 40, .16); }
.v2 .v-menu-i { border-radius: 12px; }
.v2 .v-menu-i:active { background: #E9EBEE; }
.v2 .v-menu-1 { color: var(--lf-ink); letter-spacing: -.005em; }
.v2 .v-menu-2 { color: var(--lf-sub); }
.v2 .v-menu-sep { position: relative; margin-top: 13px; border-top: 0; border-radius: 12px; }
.v2 .v-menu-sep::before { content: ""; position: absolute; left: 12px; right: 12px; top: -7px; height: 1px; background: var(--lf-line); }

/* ---- the Cmd K search palette: a floating card on a desktop, an iOS search field on a phone; the picked row a soft pill */
.v2 .v-pal { border-radius: var(--lf-r); box-shadow: 0 2px 6px rgba(16, 24, 40, .08), 0 24px 56px rgba(16, 24, 40, .22); }
.v2 .v-pal-top { border-bottom-color: var(--lf-line); }
.v2 .v-pal-in { font-size: 17px; color: var(--lf-ink); }
.v2 .v-pal-o { border-radius: 12px; }
.v2 .v-pal-o[aria-selected="true"] { background: #EEF0F3; box-shadow: none; }
.v2 .v-pal-o:active { background: #E9EBEE; }
.v2 .v-pal-ic { width: 32px; height: 32px; align-items: center; justify-content: center; border-radius: 10px; background: #EFF0F2; color: #4A525C; }
.v2 .v-pal-o[aria-selected="true"] .v-pal-ic { background: #fff; }
.v2 .v-pal-1 { color: var(--lf-ink); letter-spacing: -.005em; }
.v2 .v-pal-2, .v2 .v-pal-soft, .v2 .v-pal-h { color: var(--lf-sub); }
.v2 .v-pal-hint { border-top-color: var(--lf-line); color: var(--lf-sub); }
@media (max-width: 1023px) {
  .v2 .v-pal-top { gap: 4px; padding: 8px 6px 8px 16px; border-bottom: 0; }
  .v2 .v-pal-lens { position: relative; z-index: 1; margin-right: -34px; padding-left: 12px; color: #6B737D; }
  .v2 .v-pal-in { min-height: 44px; padding: 0 12px 0 38px; border-radius: 12px; background: #EEF0F2; font-size: 16px; }
  .v2 .v-pal-x { font-weight: 600; }
}

/* ---- the pay and payment method sheets: the method list a card, the balance figure in the document's DIN */
.v2.v-msheet .mo-sheet-foot { border-top-color: var(--lf-line); }
.v2 .v-sheet-t { font-weight: 700; letter-spacing: -.01em; }
.v2 .v-sheet .v-error { border-radius: var(--lf-r-s); }

/* ---- not found: the words and the one way home, set as the rest (a title, a quiet line) */
.v2.v-nf h1 { letter-spacing: -.02em; }
.v2.v-nf .v-t-body { color: var(--lf-sub); }
/* ---- a section head's link (See all): the text face at the head's side, not the DIN of a count */
.v2 a.sec-side { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--v-sans); font-size: 15px; font-weight: 600;
  letter-spacing: 0; color: var(--lf-ink); text-decoration: none; }
.v2 a.sec-side:hover { text-decoration: underline; text-underline-offset: 3px; }
/* ---- Emergencies (landlord): the choice card keeps its distance from the field under it */
.v2 .ll-emerg > .v-choices { margin-bottom: 18px; }
/* ---- a typed address standing alone (a homeowner's first booking): plain fields, no panel */
.v2.v-order .o-form .choice-open { padding: 0; border-top: 0; background: none; }

/* ================================================================== MERGE GATE fixes (Opus and Codex, Nov 5) */
/* O1 the view's rise holds no transform once it ends (fill backwards, not both), so a position: fixed child (the
   tenant's tab bar) stays fixed to the screen; the tenant's frame and the list beside a job only fade */
.view { animation-fill-mode: backwards; }
.view:has(.tn), .view:has(.jx-split) { animation-name: ds-fade; }
.view:has(.jx-split) .jx-detail { animation: lf-in 200ms var(--lf-spring) backwards; }
@media (prefers-reduced-motion: reduce) { .view:has(.jx-split) .jx-detail { animation: none; } }
/* O7 under 1280 the list beside a job is not drawn (a window narrowed on a job page, an iPad turned) */
@media (max-width: 1279.98px) { .v2.jx-split > .jx-list { display: none; } .v2.jx-split { display: block; } }
/* O8 WCAG 1.4.11: a ring or field edge a person has to find reads at 3 to 1, and the picked segment carries an ink edge */
.choice .dot, .order-sheet .choice .dot, .v2 .v-radio { border-color: var(--v-field); }
.v2 .v-radio { box-shadow: inset 0 0 0 2px var(--v-field); }
.v2 .m-seg-i.on, .v2.v-money .m-seg-i.on, .v2.jl-v2 .pick[aria-pressed="true"], .v2 .v-seg-o:has(> input:checked), .v2 .ins-tab[aria-pressed="true"],
.v2 .ins-tab.on { box-shadow: inset 0 0 0 1.5px var(--lf-ink), 0 1px 2px rgba(16, 24, 40, .08); }
/* O12 orange stays a dot: the client's move and a visit on site read in a neutral pill (rule 3) */
.v2 .v-st-live, .v2 .v-st-you { background: var(--lf-sunk); color: var(--lf-ink); }
.v2 .hm-live .v-st-live { background: rgba(255, 255, 255, .12); color: #fff; }

/* ================================================================== THE CANDIDATE'S NEW SCREENS (cdb58a9, Nov 6)
   The one time AI question (aiask.js) and Close account (settings.js) in the same system; styling only. */
/* the AI question: a firm title, the words in a soft panel, and two equal white buttons (a consent screen never leans
   toward yes, coordinator Nov 5) */
:is(.ai-ask, .ai-ask .v-sheet) .v-sheet-t { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.015em; }
.ai-ask .v-t-body { margin: 0; padding: 14px 16px; background: var(--lf-sunk); border-radius: var(--lf-r-s); font-size: 15px; line-height: 22px; color: #343A42; }
.ai-ask .v-t-body a { color: var(--lf-ink); font-weight: 600; }
.ai-ask .v-btn + .v-btn { margin-top: 10px; }
/* Close account (a v-sheet holding Account's row classes): the title firm, what is still open as one grouped list with
   inset hairlines, each way to fix it a 44 px capsule; the same holds for any sheet that lists rows */
.v2.v-layer .v-sheet .v-sheet-t { font-weight: 700; letter-spacing: -.015em; }
.v2.v-layer .v-sheet .jrows { margin: 10px 0 14px; border: 1px solid #E6E8EC; border-radius: var(--lf-r-s); background: #fff; overflow: hidden; }
.v2.v-layer .v-sheet .jrows .jrow { padding: 14px 16px; border-top: 1px solid var(--lf-line); }
.v2.v-layer .v-sheet .jrows .jrow:first-child { border-top: 0; }
.v2.v-layer .v-sheet .jrow-1 { font-weight: 600; color: var(--lf-ink); }
.v2.v-layer .v-sheet .jrow-side .link { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px;
  background: var(--lf-sunk); color: var(--lf-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.v2.v-layer .v-sheet .jrow-side .link:active { background: #E6E8EB; }
.v2.v-layer .v-sheet .ls-line { font-size: 15px; line-height: 22px; }
.v2.v-layer .v-sheet label { font-weight: 600; }
.v2.v-layer .v-sheet .btn { min-height: 52px; border-radius: var(--lf-r-c); font-size: 16px; }

/* ================================================================== BUTTONS, SMOOTHER (Nov 6)
   The owner on staging 70126f6: "the buttons need to have a smoother look" (the rail's and Home's orange Order a repair
   with their heavy shadow, the black outlined Book an inspection, the black Book pill, the draft sheet's Keep and
   Discard). Read as Linear's, Stripe's and Airbnb's buttons: flat fills with only a hairline of shadow, gentle hairline
   borders on the white ones, one 12 px radius and one weight everywhere (row buttons too; pills stay for chips and
   status only), and a press that eases in rather than flashing grey. Colours, words and sizes otherwise unchanged. */
:root {
  --bt-r: 12px;
  --bt-ink: #16191E; --bt-ink-hover: #262A31; --bt-ink-press: #0B0D10;
  --bt-or: #F25A1E; --bt-or-hover: #F36A32; --bt-or-press: #DC4C15;
  --bt-gr: #1F7A3F; --bt-gr-hover: #278348; --bt-gr-press: #176231;
  --bt-red: #B42318; --bt-red-hover: #C2382D; --bt-red-press: #9A1E14;
  --bt-edge: #DCDFE4; --bt-edge-hover: #C9CED4;
  --bt-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  --bt-ease: cubic-bezier(.25, .8, .25, 1);
}
/* one shape, one weight, one motion */
.v2 .v-btn, .v2 .btn, .btn, .v2 .hm-act .v-btn, .v2 .v-row-acts .v-btn, .v2 .v-row-acts .btn, .v2 .mo-row-btn, .v2 .hm-insp-act .v-btn,
.v2 .ll-req .v-btn, .v2 .ls-panel .btn, .v2 .ls-panel .v-btn, .v2.v-layer .v-sheet .btn {
  border-radius: var(--bt-r); font-weight: 600; letter-spacing: -.005em; box-shadow: none;
  transition: background-color 160ms var(--bt-ease), border-color 160ms var(--bt-ease), box-shadow 160ms var(--bt-ease),
    color 160ms var(--bt-ease), transform 160ms var(--bt-ease); }
.v2 .v-btn:active, .v2 .btn:active, .btn:active { transform: scale(.985); }
/* filled: flat, a hairline of shadow, a slightly lighter hover and a deeper press */
.v2 .v-btn-k, .v2 .btn-ink, .btn-ink { background: var(--bt-ink); border-color: var(--bt-ink); color: #fff; box-shadow: var(--bt-shadow); }
.v2 .v-btn-o, .v2.v-rail .v-btn-o, .v2 .hm-empty-act .v-btn-o { background: var(--bt-or); color: var(--v-on-orange); box-shadow: var(--bt-shadow); }
.v2 .v-btn-g { background: var(--bt-gr); color: #fff; box-shadow: var(--bt-shadow); }
@media (hover: hover) and (pointer: fine) {
  .v2 .v-btn-k:hover, .v2 .btn-ink:hover, .btn-ink:hover { background: var(--bt-ink-hover); border-color: var(--bt-ink-hover); }
  .v2 .v-btn-o:hover { background: var(--bt-or-hover); }
  .v2 .v-btn-g:hover { background: var(--bt-gr-hover); }
}
.v2 .v-btn-k:active, .v2 .btn-ink:active, .btn-ink:active { background: var(--bt-ink-press); border-color: var(--bt-ink-press); }
.v2 .v-btn-o:active { background: var(--bt-or-press); }
.v2 .v-btn-g:active { background: var(--bt-gr-press); }
/* white and outlined: one quiet button, a hairline edge, no black outline */
.v2 .v-btn-w, .v2 .v-btn-line, .v2.v-rail .v-btn-line, .v2 .btn:not(.btn-ink):not(.btn-primary):not(.btn-stop):not(.v-approve), .btn:not(.btn-ink):not(.btn-primary):not(.btn-stop):not(.v-approve) {
  background: #fff; color: var(--lf-ink); border: 1px solid var(--bt-edge); box-shadow: var(--bt-shadow); }
@media (hover: hover) and (pointer: fine) {
  .v2 .v-btn-w:hover, .v2 .v-btn-line:hover, .v2 .btn:not(.btn-ink):not(.btn-primary):not(.btn-stop):not(.v-approve):hover, .btn:not(.btn-ink):not(.btn-primary):not(.btn-stop):not(.v-approve):hover {
    background: #F8F9FA; border-color: var(--bt-edge-hover); }
}
.v2 .v-btn-w:active, .v2 .v-btn-line:active, .v2 .btn:not(.btn-ink):not(.btn-primary):not(.btn-stop):not(.v-approve):active, .btn:not(.btn-ink):not(.btn-primary):not(.btn-stop):not(.v-approve):active {
  background: #F0F2F4; border-color: var(--bt-edge-hover); }
/* the order flow's own Continue (btn-primary, orange): the same flat orange */
.v2 .btn-primary, .btn-primary { background: var(--bt-or); border-color: var(--bt-or); color: var(--v-on-orange); box-shadow: var(--bt-shadow); border-radius: var(--bt-r); }
.v2 .btn-primary:active, .btn-primary:active { background: var(--bt-or-press); border-color: var(--bt-or-press); }
/* red stays for a remove, flat like the rest */
.v2 .v-btn-r { box-shadow: var(--bt-shadow); }
/* a press no longer dims a filled or white button grey: the dim stays for text links only */
:where(.v2, .tn) :where(.v-btn, .btn):active { opacity: 1; }
/* off: calm grey, no edge */
.v2 .v-btn:disabled:not([aria-busy="true"]), .v2 .btn:disabled:not([aria-busy="true"]), .btn:disabled:not([aria-busy="true"]) {
  background: #EEF0F2; border-color: #EEF0F2; color: #8A929B; box-shadow: none; opacity: 1; }
/* the tab bar's Order: the same flat orange, a soft lift, no glow */
.v2 .v-tab-ord, .tn-tab-plus { box-shadow: 0 0 0 4px rgba(255, 255, 255, .95), 0 2px 6px rgba(16, 24, 40, .12); }
/* the rail's two actions sit as a pair of the same height */
@media (min-width: 1024px) { .v2.v-rail .v-btn-full { min-height: 44px; font-size: 15px; } }
@media (prefers-reduced-motion: reduce) { .v2 .v-btn, .v2 .btn, .btn { transition: none; } .v2 .v-btn:active, .v2 .btn:active, .btn:active { transform: none; } }
/* the same button on sign in's Google, Microsoft and Apple, and the tenant's Add photos or a video */
.v2.v-si .pbtn { border-radius: var(--bt-r); box-shadow: inset 0 0 0 1px var(--bt-edge), var(--bt-shadow);
  transition: background-color 160ms var(--bt-ease), box-shadow 160ms var(--bt-ease), transform 160ms var(--bt-ease); }
@media (hover: hover) and (pointer: fine) { .v2.v-si .pbtn:hover { background: #F8F9FA; box-shadow: inset 0 0 0 1px var(--bt-edge-hover), var(--bt-shadow); } }
.v2.v-si .pbtn:active { background: #F0F2F4; transform: scale(.985); }
.tn-add { border-radius: var(--bt-r); border: 1px solid var(--bt-edge); background: #fff; box-shadow: var(--bt-shadow);
  transition: background-color 160ms var(--bt-ease), transform 160ms var(--bt-ease); }
.tn-add:active { background: #F0F2F4; transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .v2.v-si .pbtn, .tn-add { transition: none; } .v2.v-si .pbtn:active, .tn-add:active { transform: none; } }

/* Codex button pass (Nov 6) */
/* a filled button keeps its own colour while it waits, with its white spinner (it never greys out as if off) */
.v2 .btn.btn-ink[aria-busy="true"], .v2 .btn.btn-ink[aria-busy="true"]:hover, .v2 .v-btn-k[aria-busy="true"], .btn-ink[aria-busy="true"] {
  background: var(--bt-ink); border-color: var(--bt-ink); color: transparent; }
.v2 .v-btn-g[aria-busy="true"], .v2 .v-approve[aria-busy="true"], .v-approve[aria-busy="true"] { background: var(--bt-gr); border-color: var(--bt-gr); color: transparent; }
.v2 .v-btn-o[aria-busy="true"], .v2 .btn-primary[aria-busy="true"], .btn-primary[aria-busy="true"] { background: var(--bt-or); border-color: var(--bt-or); color: transparent; }
.v2 :is(.btn-stop, .v-btn-r)[aria-busy="true"], .btn-stop[aria-busy="true"] { background: var(--bt-red); border-color: var(--bt-red); color: transparent; }
.v2 :is(.btn-stop, .v-btn-r)[aria-busy="true"]::after, .btn-stop[aria-busy="true"]::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
/* the red remove: flat, its own lighter hover and deeper press (payment method, member, leave, cancel an inspection) */
.v2 .btn-stop, .btn-stop, .v2 .v-btn-r { background: var(--bt-red); border: 1px solid var(--bt-red); color: #fff; box-shadow: var(--bt-shadow); border-radius: var(--bt-r); }
.v2 .v-approve, .v-approve { background: var(--bt-gr); border-color: var(--bt-gr); color: #fff; box-shadow: var(--bt-shadow); border-radius: var(--bt-r); }
@media (hover: hover) and (pointer: fine) {
  .v2 .btn-stop:hover, .btn-stop:hover, .v2 .v-btn-r:hover { background: var(--bt-red-hover); border-color: var(--bt-red-hover); }
  .v2 .v-approve:hover, .v-approve:hover { background: var(--bt-gr-hover); border-color: var(--bt-gr-hover); }
  .v2 .btn-primary:hover, .btn-primary:hover { background: var(--bt-or-hover); border-color: var(--bt-or-hover); }
}
.v2 .btn-stop:active, .btn-stop:active, .v2 .v-btn-r:active { background: var(--bt-red-press); border-color: var(--bt-red-press); }
.v2 .v-approve:active, .v-approve:active { background: var(--bt-gr-press); border-color: var(--bt-gr-press); }
/* sign in's providers and the tenant's Add photos: no grey dim on press; Add photos at the shared weight with a hover */
:where(.v2, .tn) :where(.pbtn, .tn-add):active { opacity: 1; }
.tn-add { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { .tn-add:hover { background: #F8F9FA; border-color: var(--bt-edge-hover); } }
/* the order flow's Getting in Change: the shared shape, not a pill */
.v2.v-order .o-row .btn, .order-sheet .o-row .btn { border-radius: var(--bt-r); }

/* Codex confirmation pass (Nov 6). Each screen's own sheet (order, money and the quote sheets, sign in, onboarding, the quote
   page's Approve) sets its hover, press and waiting colours at a higher weight than the shared rules above, so those screens
   kept the older darker hover and a grey button while waiting. The :not() guards below raise these rules over each screen's
   sheet (`:not(.lf-x)` matches every button and only adds that weight). Approve carries btn-primary too, so the orange rules skip it and the green ones come last. A photo still uploading
   (o-waiting) and an off button keep their own look. */
@media (hover: hover) and (pointer: fine) {
  .v2 .btn-primary:not(.v-approve):not(.o-waiting):not(:disabled):not([aria-busy="true"]):hover {
    background: var(--bt-or-hover); border-color: var(--bt-or-hover); color: var(--v-on-orange); box-shadow: var(--bt-shadow); }
  .v2 .btn-ink:not(.v-approve):not(.o-waiting):not(:disabled):not([aria-busy="true"]):hover {
    background: var(--bt-ink-hover); border-color: var(--bt-ink-hover); color: #fff; box-shadow: var(--bt-shadow); }
}
.v2 .btn-primary:not(.v-approve):not(.o-waiting):not(:disabled):not([aria-busy="true"]):active { background: var(--bt-or-press); border-color: var(--bt-or-press); }
.v2 .btn-ink:not(.v-approve):not(.o-waiting):not(:disabled):not([aria-busy="true"]):active { background: var(--bt-ink-press); border-color: var(--bt-ink-press); }
.v2 .btn-primary:not(.v-approve):not(.o-waiting)[aria-busy="true"] { background: var(--bt-or); border-color: var(--bt-or); color: transparent; }
.v2 .btn-primary:not(.v-approve):not(.o-waiting)[aria-busy="true"]::after { border-color: rgba(14, 17, 22, .25); border-top-color: var(--lf-ink); }
/* green Approve: its own hover and press, and green with a white spinner while it waits */
.v2 .v-approve:not(.o-waiting):not(:disabled) { background: var(--bt-gr); border-color: var(--bt-gr); color: #fff; box-shadow: var(--bt-shadow); }
@media (hover: hover) and (pointer: fine) {
  .v2 .v-approve:not(.o-waiting):not(:disabled):not([aria-busy="true"]):hover { background: var(--bt-gr-hover); border-color: var(--bt-gr-hover); color: #fff; }
}
.v2 .v-approve:not(.o-waiting):not(:disabled):not([aria-busy="true"]):active { background: var(--bt-gr-press); border-color: var(--bt-gr-press); }
.v2 .v-approve:not(.o-waiting)[aria-busy="true"]:not(.lf-x), .v2 .v-approve:not(.o-waiting)[aria-busy="true"]:hover {
  background: var(--bt-gr); border-color: var(--bt-gr); color: transparent; opacity: 1; }
/* the red remove and green Approve keep a white spinner (the ink spinner for light buttons outranked them) */
.v2 :is(.v-approve, .btn-stop, .v-btn-r):not(.o-waiting):not(.lf-x)[aria-busy="true"]::after,
.btn-stop:not(.o-waiting):not(.lf-x)[aria-busy="true"]::after { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }
/* the red remove stays red on every screen (order, money, sign in, onboarding and the lists drew it white with ink words),
   and the black button is the same black everywhere */
.v2 .btn-stop:not(.o-waiting):not(:disabled) { background: var(--bt-red); border-color: var(--bt-red); color: #fff; box-shadow: var(--bt-shadow); }
@media (hover: hover) and (pointer: fine) {
  .v2 .btn-stop:not(.o-waiting):not(:disabled):not([aria-busy="true"]):hover { background: var(--bt-red-hover); border-color: var(--bt-red-hover); color: #fff; }
}
.v2 .btn-stop:not(.o-waiting):not(:disabled):not([aria-busy="true"]):active { background: var(--bt-red-press); border-color: var(--bt-red-press); }
.v2 .btn-ink:not(.v-approve):not(.o-waiting):not(:disabled) { background: var(--bt-ink); border-color: var(--bt-ink); color: #fff; }