/* F2b owns this file: Money (quotes, invoices, spend, statements), Properties, Team, Account, What's new.
   Built on the shared classes in portal.css; everything here is prefixed m- so it cannot collide with another slice. */

.m-page { padding-top: 12px; }

.m-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; margin-bottom: 20px; }
.m-h1 { margin: 0; font: 600 28px/34px var(--font); letter-spacing: -.005em; }
/* Below 1024 px the top bar names the screen (h-desk hides the h1): a heading with nothing beside it leaves no band. */
@media (max-width: 1023px) { .m-head:not(:has(.m-actions)) { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); } }
.m-head > .m-h1.h-desk + .m-actions { margin-left: auto; }
.m-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }

@media (min-width: 1024px) { .m-page { padding-top: 32px; } }

a.row[aria-current="true"] { background: var(--mist); }

/* The Quotes, Invoices, Spend switch on the phone: an iOS segmented control, a mist track and a white thumb. */
.m-seg { display: flex; gap: 2px; padding: 2px; margin: 0 0 20px; border-radius: 12px; background: var(--mist); }
.m-seg-i { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid transparent;
  border-radius: 10px; color: var(--steel); font-size: 15px; font-weight: 600; text-decoration: none;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); }
.m-seg-i.on { background: var(--white); border-color: var(--concrete); color: var(--ink); }
.m-seg-i:hover { text-decoration: none; color: var(--ink); }
/* A quote or an invoice open on a phone is one page under the top bar's back: no switch above it. */
@media (max-width: 1099px) { .has-detail > .m-seg { display: none; } }

/* List and detail: one pane at a time under 1100, the split above */
.m-split { display: grid; gap: var(--s5); grid-template-columns: minmax(0, 1fr); }
.m-list { min-width: 0; }
.m-detail { min-width: 0; }
@media (max-width: 1099px) {
  .m-split.has-detail .m-list { display: none; }
  .m-split:not(.has-detail) .m-detail { display: none; }
}
@media (min-width: 1100px) {
  .m-split { grid-template-columns: 420px minmax(0, 1fr); align-items: start; gap: 40px; }

  .m-detail { border: 1px solid var(--concrete); border-radius: var(--r-card); padding: 24px; }
  .m-detail > .empty { padding: var(--s5) 0; }
}
.m-list .ds-sec:first-child, .m-list .section:first-child { margin-top: 0; }

/* ------------------------------------------------------------------ rows of money: place, job, when, amount, who */
.mo-card { background: var(--white); border: 1px solid var(--concrete); border-radius: var(--r-card); overflow: hidden; }
.mo-row { display: flex; align-items: flex-start; gap: 12px; min-height: 64px; padding: 14px 16px; border-top: 1px solid var(--concrete);
  color: var(--ink); text-decoration: none; transition: background var(--t-fast) var(--ease); }
.mo-row:first-child { border-top: 0; }
a.mo-row:hover { background: var(--mist); text-decoration: none; }
.mo-row[aria-current="true"] { background: var(--mist); }
.mo-main { flex: 1; min-width: 0; }
.mo-1 { overflow-wrap: anywhere; font-size: 16px; line-height: 22px; font-weight: 600; }
.mo-2 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 20px; color: var(--steel); }
.mo-3 { margin-top: 4px; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }
.mo-3.you { color: var(--you); }
.mo-3.stop { color: var(--stop); }
.mo-side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.mo-amt { font: 700 24px/26px var(--num); letter-spacing: .005em; white-space: nowrap; }
/* The quote open beside its list on a wide screen. */
.need.mo-on { border-color: var(--ink); }

/* ------------------------------------------------------------------ a quote or an invoice: a checkout */
.mo-doc { display: flex; flex-direction: column; min-width: 0; }
.mo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; }
.mo-ref { font: 700 16px/18px var(--num); letter-spacing: .02em; color: var(--steel); }
.mo-cap { font-size: 14px; line-height: 20px; color: var(--steel); }
.mo-fig { margin-top: 4px; font: 700 44px/44px var(--num); letter-spacing: .005em; }
.mo-was { margin: 8px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }
.mo-valid { margin: 16px 0 0; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--steel); }
.mo-valid.you { color: var(--you); }
.mo-valid.stop { color: var(--stop); }
.mo-total + .mo-valid { margin-top: 8px; }
.mo-place { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--concrete); }
.mo-place .p1 { font-size: 17px; line-height: 22px; font-weight: 600; overflow-wrap: anywhere; }
.mo-place .p2 { display: inline-flex; align-items: center; min-height: 44px; margin-top: -6px; margin-bottom: -8px; font-size: 15px; line-height: 22px; color: var(--ink); text-decoration: underline;
  text-decoration-color: rgba(14, 17, 22, .3); text-underline-offset: 3px; }
.mo-place .p2:hover { text-decoration-color: var(--ink); }
.mo-lines { margin-top: 16px; }
.mo-lines td { padding: 13px 0; }
.mo-lines tr:first-child td { border-top: 0; }
.mo-lines td:first-child { overflow-wrap: anywhere; }
.mo-lines .mo-sub td { padding: 10px 0; font-size: 14px; line-height: 20px; }
/* Amounts are figures: DIN, right aligned, never wrapped (DIRECTION: DIN for figures). */
.mo-lines td:last-child { padding-left: 16px; text-align: right; white-space: nowrap; font: 700 20px/24px var(--num); letter-spacing: .01em; }
.mo-lines .mo-sub td:last-child { font-size: 18px; line-height: 20px; }
.mo-lines tr:last-child td { border-bottom: 1px solid var(--concrete); }
.mo-note { margin-top: 20px; }
.mo-note h3 { margin: 0 0 2px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--steel); }
.mo-note p { margin: 0; white-space: pre-wrap; font-size: 15px; line-height: 22px; }
.mo-state { margin: 16px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); }
.mo-bill { margin-top: 16px; padding: 14px 16px; border-radius: var(--r-ctl); background: var(--mist); }
.mo-bill-1 { font-weight: 600; overflow-wrap: anywhere; }
.mo-bill-2 { font-size: 14px; line-height: 20px; color: var(--steel); overflow-wrap: anywhere; }

/* The one orange button, then one line on what happens next. Pinned above the tab bar on a phone. */
.mo-act { margin-top: 24px; }
.mo-btns { display: flex; flex-direction: column; gap: 8px; }
.mo-btns .btn { min-height: 52px; border-radius: var(--r-ctl); font-size: 16px; }
.mo-next { margin: 12px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); text-align: center; }
.mo-pdf { align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; font-size: 15px; }
@media (max-width: 1023px) {
  .mo-act { position: sticky; z-index: 4; bottom: calc(var(--tabs) + env(safe-area-inset-bottom)); margin: 24px calc(-1 * var(--pad)) 0;
    padding: 12px var(--pad) 38px; background: rgba(255, 255, 255, .96); border-top: 1px solid var(--concrete); }
  /* The bottom 38 px clear the raised Order button (26 px over the tab bar plus its 5 px ring), so the line under the
     buttons is never cut through (Opus design 6); a toast drops from the top instead of landing on this bar. */
  .mo-act .mo-next { margin-top: 8px; }
  body:has(.mo-act) #toasts { top: calc(var(--top) + 8px + env(safe-area-inset-top)); bottom: auto; }
}
@media (min-width: 640px) {
  .mo-btns { flex-direction: row; }
  .mo-btns .btn-primary, .mo-btns .mo-main { flex: 1; }          /* the row's main button: Approve, or Pay in black */
  .mo-btns .btn:not(.btn-primary):not(.mo-main) { flex: 0 0 auto; min-width: 140px; }
}
@media (min-width: 1024px) { .mo-next { text-align: left; } }

.mo-sheet-total .mo-fig { margin-top: 2px; }
.mo-sheet-for { margin-top: 6px; font-size: 14px; line-height: 20px; color: var(--steel); overflow-wrap: anywhere; }
.mo-sheet-gap { margin-top: 20px; }
.mo-sheet-foot { margin-top: 24px; }
.mo-sheet-foot .btn { min-height: 52px; font-size: 16px; }

/* ------------------------------------------------------------------ quote actions: Revise, Price match, the request and the changes */
/* On a phone Approve takes the row and Revise and Decline share the next, so the pinned bar stays short. */
@media (max-width: 639px) {
  .mo-btns { display: grid; grid-template-columns: 1fr 1fr; }
  .mo-btns .btn-primary, .mo-btns .mo-main { grid-column: 1 / -1; }
  .mo-btns > :nth-child(2):last-child { grid-column: 1 / -1; }
}
.qa-pm, .qa-status, .qa-changes { margin-top: 24px; padding: 16px; border: 1px solid var(--concrete); border-radius: var(--r-card); }
.qa-pm h3, .qa-changes h3, .qa-status-h h3 { margin: 0; font-size: 16px; line-height: 22px; font-weight: 600; }
.qa-terms { margin: 8px 0 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.qa-ours { margin: 12px 0 20px; font-size: 15px; line-height: 22px; font-weight: 600; }
.qa-btn { width: 100%; min-height: 48px; margin-top: 12px; font-size: 16px; border-radius: var(--r-ctl); }
.qa-email { overflow-wrap: anywhere; }
.qa-email .link { display: inline-block; min-height: 24px; }
@media (min-width: 640px) { .qa-btn { width: auto; min-width: 240px; } }
.qa-short { margin-top: 12px; }
.qa-short .qa-pm { margin-top: 0; background: var(--mist); }

.qa-status-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qa-line { margin: 10px 0 0; white-space: pre-wrap; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; }
.qa-sent { margin: 10px 0 0; font-size: 14px; line-height: 20px; color: var(--steel); overflow-wrap: anywhere; white-space: pre-wrap; }

.qa-add { min-height: 44px; }
.qa-pick .help { margin-top: 8px; }
.qa-thumbs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.qa-thumbs:empty { display: none; }
.qa-thumb { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 96px; }
.qa-face { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; overflow: hidden; border: 1px solid var(--concrete);
  border-radius: var(--r-ctl); background: var(--mist); }
.qa-face img { width: 100%; height: 100%; object-fit: cover; }
.qa-open { min-width: 44px; min-height: 44px; }
.qa-shown .qa-face { width: 72px; height: 72px; }
.qa-doc { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; max-width: 100%; }
.qa-doc-n { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; line-height: 18px; }
.qa-x { min-height: 44px; padding: 0 8px; font-size: 14px; }
.qa-dnote:empty, .qa-pick .help:empty { display: none; }

.qa-table { width: 100%; margin-top: 12px; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.qa-table th, .qa-table td { padding: 10px 0 10px 12px; border-top: 1px solid var(--concrete); text-align: left; vertical-align: top; }
.qa-table th:first-child, .qa-table td:first-child { padding-left: 0; overflow-wrap: anywhere; }
.qa-table thead th { border-top: 0; font-size: 14px; font-weight: 600; color: var(--steel); }
.qa-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.qa-chg { display: block; font-size: 14px; line-height: 20px; color: var(--steel); }
.qa-total { margin: 12px 0 0; font-size: 15px; line-height: 22px; font-weight: 600; }

/* ------------------------------------------------------------------ invoices: the balance as the hero */
.mo-hero { margin-bottom: var(--sec-gap); }
.mo-hero-btn { width: 100%; min-height: 52px; margin-top: 16px; font-size: 16px; }
@media (min-width: 640px) { .mo-hero-btn { width: auto; min-width: 240px; } }

/* ------------------------------------------------------------------ spend */
.mo-lead { margin-bottom: 20px; }
.mo-say { margin: 10px 0 0; font-size: 15px; line-height: 22px; color: var(--ink); }
.mo-stat { color: inherit; text-decoration: none; }
.mo-stat:hover { text-decoration: none; }
.mo-stat:hover .n { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.mstrip-row .c.stop { color: var(--stop); }
.m-picker { margin: 0 0 var(--sec-gap); }
.m-by { margin: 0 0 12px; }
.mo-chartcard { padding: 16px 12px 8px 8px; }
.mo-chartcap { margin: 4px 0 8px 8px; font-size: 14px; line-height: 20px; color: var(--steel); }

.m-chart { position: relative; width: 100%; }
.m-chart-in { width: 100%; min-height: 212px; }
.m-chart-svg { overflow: visible; }
.m-rule { stroke: var(--concrete); stroke-width: 1; }
.m-base { stroke: var(--steel); stroke-width: 1; }
.m-tick { fill: var(--steel); font-size: 14px; font-family: var(--font); }
.m-tick.now { fill: var(--ink); font-weight: 600; }
.m-bar { fill: var(--ink); }
.m-bar.now { fill: var(--orange); }
.m-hit { fill: transparent; }
.m-bar-g { cursor: default; }
.m-bar-g:hover .m-bar, .m-bar-g:focus .m-bar { opacity: .8; }
.m-bar-g:focus { outline: none; }
html.kbd .m-bar-g:focus .m-hit { stroke: var(--orange-text); stroke-width: 2; }
.m-tip { position: absolute; z-index: 5; pointer-events: none; background: var(--ink); color: var(--white); font-size: 14px; line-height: 20px;
  padding: 6px 10px; border-radius: var(--r-ctl); white-space: nowrap; max-width: 100%; }
.m-table-wrap { overflow-x: auto; }
.m-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.m-table th, .m-table td { padding: 0 0 0 12px; border-top: 1px solid var(--concrete); text-align: left; vertical-align: middle; height: 56px; }
.m-table th:first-child, .m-table td:first-child { padding-left: 16px; }
.m-table th:last-child, .m-table td:last-child { padding-right: 16px; }
.m-table thead th { height: 44px; border-top: 0; border-bottom: 1px solid var(--concrete); font-size: 14px; font-weight: 600; white-space: nowrap; }
.m-table .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.m-table td.name { overflow-wrap: anywhere; font-weight: 600; padding-top: 10px; padding-bottom: 10px; }
.m-table td.name a { color: var(--ink); }
.m-table td.m-spendcell { font: 700 20px/22px var(--num); }
.m-jobs-sub { display: block; font-size: 14px; line-height: 20px; font-weight: 400; color: var(--steel); }
.m-table thead th .m-th { justify-content: flex-start; }
.m-table thead th.num .m-th { justify-content: flex-end; }
@media (min-width: 560px) { .m-jobs-sub { display: none; } }
@media (max-width: 559px) { .m-wide { display: none; } }
.m-th { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border: 0; background: none; font-size: 14px; font-weight: 600; color: var(--ink); cursor: pointer; }
.m-th:hover { text-decoration: underline; }

/* The profile's two name fields sit above the phone field with the same gap the other fields have. */

/* ================================================================ look v2 (SPEC 7.12, 7.13): Money, quotes, invoices, spend
   The pages are .v2.v-money and money's own sheets .v2.v-msheet. Their old classes take the v2 look here: rows on
   hairlines (no cards, rule 1), the status as a dot and a word (rule 4), the one big figure in DIN (rule 5), the
   decision's buttons as 8 px rectangles, orange only for Approve and Pay (rule 3). */
.v2.v-money { padding: 8px var(--v-gut) calc(var(--v-tabs) + 32px); max-width: var(--v-content); }
@media (min-width: 1024px) { .v2.v-money { padding: 28px 48px 80px; } }
.v2.v-money .m-h1 { font-size: 28px; line-height: 34px; font-weight: 600; letter-spacing: -.3px; }
.v2.v-money .m-seg { display: flex; gap: 22px; padding: 0; margin: 4px 0 0; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none; }
.v2.v-money .m-seg-i { display: inline-flex; align-items: center; min-height: 44px; padding: 0; border-radius: 0; background: none;
  box-shadow: inset 0 -2px 0 transparent; font-size: 15px; font-weight: 600; color: var(--v-mute); }
.v2.v-money .m-seg-i.on { color: var(--v-ink); background: none; box-shadow: inset 0 -2px 0 var(--v-ink); }
/* the switch shows at every width since slice BA: the rail has one Money link, so Quotes, Invoices, Spend and Statements live here (Opus BA H1) */

/* sections and lists: the label, the ink rule, rows on hairlines */
.v2.v-money .ds-sec { margin-top: var(--v-sec); }
.v2.v-money .sec-h { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 10px; border-bottom: 1px solid var(--v-ink); }
.v2.v-money .sec-h h2 { margin: 0; font: 600 15px/20px var(--v-sans); letter-spacing: 0; text-transform: none; color: var(--v-ink); }
.v2.v-money .sec-h h2::after, .v2.v-money .sec-h::after { display: none; }
.v2.v-money .sec-side { font-size: 14px; color: var(--v-mute); }
.v2.v-money .ds-card, .v2.v-money .mo-card, .v2.v-money .m-list { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.v2.v-money .mo-row { min-height: 56px; padding: 14px 0 15px; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none; color: var(--v-ink); }
.v2.v-money .mo-row:hover { background: none; }
.v2.v-money .mo-row[aria-current="page"], .v2.v-money .mo-row.on { background: var(--v-fill); box-shadow: inset 2px 0 0 var(--v-ink); }
.v2.v-money .mo-1 { font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-money .mo-2, .v2.v-money .mo-3, .v2.v-money .mo-sub { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-money .mo-amt { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.v2.v-money .mo-3.you, .v2.v-money .mo-valid.you { color: var(--v-ink); }
.v2.v-money .stop { color: var(--v-red); }

/* the document: status and ref, the big figure, the lines, the decision */
.v2.v-money .mo-doc { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.v2.v-money .mo-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.v2.v-money .mo-ref { font-family: var(--v-din); font-size: 16px; font-weight: 700; letter-spacing: .4px; color: var(--v-mute); }
.v2.v-money .mo-fig { margin-top: 14px; font-family: var(--v-din); font-size: 52px; line-height: 50px; font-weight: 700; letter-spacing: -.2px; color: var(--v-ink); }
.v2.v-money .mo-cap { font-size: 14px; color: var(--v-mute); }
.v2.v-money .mo-place { margin-top: 14px; }
.v2.v-money .mo-lines { width: 100%; margin-top: 18px; border-top: 1px solid var(--v-ink); border-collapse: collapse; }
.v2.v-money .mo-lines td, .v2.v-money .mo-lines th { padding: 11px 0 12px; border-bottom: 1px solid var(--v-hair); font-size: 15px; line-height: 21px; text-align: left; }
.v2.v-money .mo-lines td:last-child, .v2.v-money .mo-lines th:last-child { text-align: right; white-space: nowrap; padding-left: 16px; font-weight: 600; }
.v2.v-money .mo-valid, .v2.v-money .mo-state, .v2.v-money .mo-note, .v2.v-money .mo-next { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--v-ink-2); }
.v2.v-money .mo-btns { display: grid; gap: 8px; margin-top: 18px; }
.v2.v-money .btn, .v2.v-msheet .btn { min-height: 48px; padding: 0 18px; border: 0; border-radius: var(--v-r-ctl); background: var(--v-white); color: var(--v-ink);
  box-shadow: inset 0 0 0 1px var(--v-hair-2); font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-money .btn:hover, .v2.v-msheet .btn:hover { background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); }
.v2.v-money .btn-primary, .v2.v-msheet .btn-primary { background: var(--v-orange); color: var(--v-on-orange); box-shadow: none; }
.v2.v-money .btn-primary:hover, .v2.v-msheet .btn-primary:hover { background: #DE4F17; box-shadow: none; }
.v2.v-money .btn-ink, .v2.v-msheet .btn-ink { background: var(--v-ink); color: var(--v-white); box-shadow: none; }
/* slice 3: the white hover above left an ink button's white words on white (Send in the quote sheets) */
.v2.v-money .btn-ink:hover, .v2.v-msheet .btn-ink:hover { background: #262B33; box-shadow: none; }
html.kbd .v2.v-money .btn-primary:focus-visible, html.kbd .v2.v-msheet .btn-primary:focus-visible { box-shadow: inset 0 0 0 2px var(--v-white); }
.v2.v-money .link, .v2.v-msheet .link { color: var(--v-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
@media (max-width: 1023px) {
  .v2.v-money .mo-act { bottom: var(--v-tabs); margin: 20px calc(-1 * var(--v-gut)) 0; padding: 12px var(--v-gut); border-top: 1px solid var(--v-hair);
    background: var(--v-white); box-shadow: none; }
}
@media (min-width: 1280px) {
  .v2.v-money .mo-doc { max-width: 720px; }
}

/* the sheets: approve, decline, revise, price match, pay, bill to */
.v2.v-msheet { font-family: var(--v-sans); color: var(--v-ink); }
.v2.v-msheet .field > label, .v2.v-msheet .label { display: block; margin-bottom: 6px; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--v-ink); }
.v2.v-msheet .input, .v2.v-msheet .textarea, .v2.v-msheet .select { width: 100%; min-height: 48px; padding: 0 14px; border: 0; border-radius: var(--v-r-ctl);
  background: var(--v-white); box-shadow: inset 0 0 0 1px var(--v-field); font-size: 16px; line-height: 22px; color: var(--v-ink); }
.v2.v-msheet .textarea { padding: 12px 14px; }
.v2.v-msheet .input:focus, .v2.v-msheet .textarea:focus { box-shadow: inset 0 0 0 2px var(--v-ink); }
.v2.v-msheet .help, .v2.v-msheet .steel { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-msheet .choices { border: 0; border-top: 1px solid var(--v-hair); border-radius: 0; box-shadow: none; background: none; overflow: visible; }
.v2.v-msheet .choice { min-height: 56px; padding: 14px 0; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none; box-shadow: none; }
.v2.v-msheet .choice .dot { border: 0; background: none; box-shadow: inset 0 0 0 1.5px var(--v-field); }
.v2.v-msheet .choice[aria-checked="true"] .dot { box-shadow: inset 0 0 0 6px var(--v-ink); }
.v2.v-msheet .mo-sheet-foot { border-top: 1px solid var(--v-hair); }
/* no cards: the detail column and the waiting item are on hairlines; amounts on rows in Avenir Demi (rule 5); a date is
   never orange (rule 3) */
.v2.v-money .m-detail { padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
@media (min-width: 1024px) { .v2.v-money .m-detail { padding-left: 0; } }
.v2.v-money .need { padding: 14px 0 15px; border: 0; border-bottom: 1px solid var(--v-hair); border-radius: 0; box-shadow: none; background: none; }
.v2.v-money .need-what { font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-money .need-where { font-size: 14px; line-height: 20px; color: var(--v-mute); }
.v2.v-money .need-amt, .v2.v-money .num, .v2.v-money .mo-amt { font: 600 16px/22px var(--v-sans); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.v2.v-money .mo-lines .num { font-size: 15px; line-height: 21px; }
.v2.v-money .need-due, .v2.v-money .need-due.you, .v2.v-money .mo-valid { color: var(--v-ink-2); }
.v2.v-money .need-due.stop { color: var(--v-red); font-weight: 600; }
.v2.v-money .need .btn { margin-top: 12px; }
.v2.v-money .m-seg { gap: clamp(14px, 4vw, 22px); overflow-x: auto; scrollbar-width: none; }      /* four words fit at 320 (Codex BA 7) */
.v2.v-money .m-seg::-webkit-scrollbar { display: none; }
.v2.v-money .m-seg-i { flex: none; border: 0; white-space: nowrap; }
.v2.v-money .mo-lines td, .v2.v-money .mo-lines th, .v2.v-money .mo-lines td * { font-family: var(--v-sans); letter-spacing: 0; }
/* review fixes (Codex S5): one column with the decision docked until 1280; disabled commitments look disabled; every
   month bar in ink; section heads and waiting rows without the old spacing */
@media all {      /* one column at every width (UX_RULES 5, slice BA): was up to 1279 */
  .v2.v-money .m-split { display: block; }
  .v2.v-money .mo-act { position: sticky; z-index: 5; bottom: var(--v-dock); margin: 20px calc(-1 * var(--v-gut)) 0; padding: 12px var(--v-gut);
    border-top: 1px solid var(--v-hair); background: var(--v-white); box-shadow: none; }
}
.v2.v-money .btn-primary:disabled, .v2.v-money .btn-primary[aria-busy="true"], .v2.v-msheet .btn-primary:disabled, .v2.v-msheet .btn-primary[aria-busy="true"],
.v2.v-msheet .btn-ink:disabled { background: var(--v-hair); color: var(--v-soft); opacity: 1; }
.v2.v-money .m-bar, .v2.v-money .m-bar.now { background: var(--v-ink); }
.v2.v-money .sec-h { margin: 0; gap: 12px; }
.v2.v-money .sec-h h2, .v2.v-money .sec-h .sec-side { padding-bottom: 0; }
.v2.v-money .need + .need { margin-top: 0; }
/* review fixes (Opus S5) */
@media all {      /* one column at every width (UX_RULES 5, slice BA): was up to 1279 */
  .v2.v-money.has-detail .m-list { display: none; }
  .v2.v-money:not(.has-detail) .m-detail { display: none; }
}
/* the switch stays over an open quote or invoice on a desktop, the one way between Quotes, Invoices, Spend and Statements
   once the rail has one Money link; a phone has the top bar's back instead (Codex BA 3) */
@media (max-width: 1023px) { .v2.v-money.has-detail > .m-seg { display: none; } }
.v2.v-money .m-bar, .v2.v-money .m-bar.now { fill: var(--v-ink); }
html.kbd .v2.v-money .m-bar-g:focus .m-hit { stroke: var(--v-ink); }
.v2.v-money .mo-row[aria-current="true"], .v2.v-money .need.mo-on { background: var(--v-fill); box-shadow: inset 2px 0 0 var(--v-ink); }
.v2.v-money .mstrip, .v2.v-money .qa-status, .v2.v-money .qa-changes, .v2.v-money .mo-bill { padding: 12px 0; border: 0; border-top: 1px solid var(--v-hair);
  border-bottom: 1px solid var(--v-hair); border-radius: 0; background: none; box-shadow: none; }
.v2.v-money .mstrip-fig { font-family: var(--v-din); }
.v2.v-money .mstrip-row .n { font: 600 16px/22px var(--v-sans); }
.v2.v-money .m-table td, .v2.v-money .m-table th { padding-left: 0; }
.v2.v-money .pick { min-height: 44px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: inset 0 -2px 0 transparent; color: var(--v-mute); font-weight: 600; }
.v2.v-money .pick[aria-pressed="true"] { background: none; color: var(--v-ink); box-shadow: inset 0 -2px 0 var(--v-ink); }
.v2.v-money.has-detail .mo-hero-btn { display: none; }      /* the open invoice carries its own Pay */
.v2.v-money .mo-valid.stop, .v2.v-money .mo-3.stop { color: var(--v-red); }
.v2.v-money .mo-decline { min-height: 44px; justify-self: center; }
.v2.v-msheet .mo-fig, .v2.v-msheet .mo-sheet-total { font-family: var(--v-din); }
.v2.v-money .mo-stat { min-height: 44px; }
.v2.v-money .pick { min-width: 44px; }
/* S10 (Opus): ui.sheet's title bar already draws the rule a choice list under it opened with */
.v2.v-msheet .v-sheet-body > div > .choices:first-child { border-top: 0; }

/* quiet money (slice 6, base.css): a quote's or an invoice's total and the open balance at body size, exact; the rows'
   amounts at the weight of their words. The DIN display figure stays on Spend's history only. */
.mo-fig, .v2.v-money .mo-fig, .v2.v-msheet .mo-fig { margin-top: 6px; font: inherit; letter-spacing: 0; }
.v2.v-msheet .mo-sheet-total { font-family: var(--v-sans); }
.v2.v-money .mstrip-fig.v-amount-total { font-family: var(--v-sans); font-size: 20px; line-height: 26px; font-weight: 600; letter-spacing: -.1px; }
.v2.v-money .mo-amt { font-weight: 500; color: var(--v-ink-2); }
.v2.v-money .mo-valid.v-flag, .v2.v-money .mo-3.v-flag, .v2.v-money .mstrip-due.v-flag { color: var(--v-mute); font-weight: 500; }
.v2 .mo-total .mo-fig.v-amount-total { font: 600 20px/26px var(--v-sans); letter-spacing: -.1px; }      /* the inspection approve sheet's total */

/* Invoices (design pass board 6b): the open amount in a sentence at the size of its words, a quiet Pay the balance row with
   a chevron, then one row per invoice ("Invoice", the title, the place and the amount in one line) with one black Pay beside
   it; a paid row says how and when, with its Receipt and Invoice PDF links. Never a display figure. */
.v2.v-money .mo-open { margin: 16px 0 8px; }
.v2.v-money .mo-open-t { margin: 0; font-size: 15px; line-height: 22px; font-weight: 500; color: var(--v-ink-2); }
.v2.v-money .mo-open-t + .mo-open-t { margin-top: 4px; color: var(--v-mute); }
.v2.v-money .mo-open-t .v-amount { color: var(--v-ink); font-weight: 600; }
.v2.v-money .mo-balrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--v-hair);
  background: none; font: inherit; color: var(--v-ink); text-align: left; cursor: pointer; }
.v2.v-money .mo-balrow-m { flex: 1; min-width: 0; }
.v2.v-money .mo-balrow-t { display: block; font-size: 16px; line-height: 22px; font-weight: 600; }
.v2.v-money .mo-balrow-s { display: block; font-size: 14px; line-height: 20px; font-weight: 500; color: var(--v-mute); }
.v2.v-money .mo-balrow-i { flex: none; display: inline-flex; color: var(--v-mute); }
.v2.v-money .mo-balrow:hover .mo-balrow-t { text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
html.kbd .v2.v-money .mo-balrow:focus-visible { outline: 2px solid var(--v-ink); outline-offset: -2px; border-radius: 4px; }
.v2.v-money .mo-irow .v-row-s .v-amount { color: var(--v-ink-2); }
.v2.v-money .mo-irow .v-row-s .v-flag { color: var(--v-mute); }
.v2.v-money .mo-row-flag { display: block; margin-top: 2px; }
.v2.v-money .mo-irow.on { background: var(--v-fill); box-shadow: inset 2px 0 0 var(--v-ink); }
.v2.v-money .mo-row-btn { min-height: 44px; padding: 0 18px; border: 0; border-radius: var(--v-r-ctl); font-size: 15px; font-weight: 600; }
.v2.v-money .mo-row-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.v2.v-money .mo-row-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; color: var(--v-ink);
  text-decoration: underline; text-decoration-color: var(--v-hair-2); text-underline-offset: 3px; }
.v2.v-money .mo-row-link:hover { text-decoration-color: var(--v-ink); }
/* a phone keeps the row's one button beside its words, as the boards draw it */
@media (max-width: 1023px) {
  .v2.v-money .mo-irow .v-row-acts { grid-column: 2; grid-row: 2 / span 2; align-self: center; margin: 0; }
  .v2.v-money .mo-irow .v-row-m { grid-row: 2; }
  .v2.v-money .mo-irow .v-row-x { grid-row: 3; }
}