/* QUOTES, INVOICES AND PAYMENTS IN THE STUDIO (phase C; assets/money.js). On top of app.css, with its tokens: the
   Quotes and Invoices folds on a job's page, the Invoices and Quotes lists, one quote and one invoice (the editor while a draft, with
   its product and template pickers), and Settings' Money places: Payments, Payment plans, Reminders, Products, Quote
   templates and Booking terms. Prefix .mn-, never .ad- (an ad blocker hides that).

   Money lines up in tabular figures, in the page's own proportional face. Every press is at least 44px on a touch
   screen.

   THE CALCULATOR'S LOOK (2 Nov 2026, the operator: "redesign the entire studio to match the website/calculator style",
   then of five options "go A"). Light and dark both from the app's own roles (app.css, THE STUDIO'S LOOK: CALCULATOR
   CARDS): a line is --pn-line, a small word under a figure --pn-muted, a wash --pn-hover, a picked card --pn-sh-sel,
   every corner --pn-r (square), so one rule answers both themes. A colour a role cannot carry (the part paid blue)
   keeps its light answer at the foot. */

/* ---------- the Quotes and Invoices folds on a job's page (assets/app.js JB_FOLDS), a card each ---------- */
.mn-rows li { align-items: flex-start; }
.mn-rows .pn-badge { margin-left: 4px; vertical-align: 1px; }
.mn-amt { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mn-alllink { font-size: 12.5px; }
.mn-gbtn .pn-gl, .mn-card .wa-gl .pn-gl, .mn-acts .wa-gl .pn-gl, .mn-setcard .wa-gl .pn-gl { width: 16px; height: 16px; }
.mn-gbtn { gap: 7px; }

/* what must be set before anything can be sent, each with its way there */
.mn-missing { display: grid; gap: 8px; margin: 12px 0 0; padding: 10px 12px; list-style: none; border-radius: var(--pn-r);
  background: var(--st-warn-bg); border: 1px solid var(--st-warn-line); color: var(--st-warn); font-size: 13px; line-height: 1.5; }
.mn-missing li { display: flex; align-items: flex-start; gap: 8px; }
.mn-missing .pn-gl { flex: none; width: 16px; height: 16px; margin-top: 2px; }
.mn-missing a { color: inherit; font-weight: 600; white-space: nowrap; }

/* ---------- A JOB'S PROFIT OR LOSS, the Profit fold (roadmap L1, 13 Oct 2026; assets/money.js S.jobProfit) ----------
   Two figures, each reading plain (a Loss chip beside one that is), then the table: a row a figure, its name a button
   44px tall at least that opens its lines under it, the money right-aligned in tabular figures, a total's row bold.
   The figures sit side by side down to 360px and one over the other below it, so a figure never breaks; a chip that
   runs long wraps inside itself. */
.mn-plsays { margin: 0 0 12px; }
.mn-plfigs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mn-plfig { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 12px 14px 13px; border-radius: var(--pn-r);
  border: 1px solid var(--pn-line); background: var(--pn-hover); }
.mn-plfig .mn-fig-n { margin-top: 4px; font-size: 30px; }
.mn-plsub { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
.mn-plsubw { font-size: 12px; line-height: 1.4; color: var(--pn-muted); overflow-wrap: anywhere; }
.mn-pltab { width: 100%; margin-top: 16px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.mn-pltab thead th { padding: 0 0 6px 10px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pn-muted); text-align: right; }
.mn-pltab thead th:first-child { padding-left: 0; text-align: left; }
.mn-plrow > th, .mn-plrow > td { border-top: 1px solid var(--pn-line); }
.mn-plrow > th { padding: 0; text-align: left; font-weight: 400; vertical-align: middle; }
.mn-plbtn { display: flex; align-items: center; gap: 6px; width: 100%; min-height: 44px; padding: 6px 4px 6px 0; border: 0; border-radius: var(--pn-r);
  background: none; color: inherit; font: inherit; font-size: 14px; line-height: 1.3; text-align: left; cursor: pointer; }
.mn-plbtn:focus-visible { outline: 2px solid var(--pn-t-ink); outline-offset: 2px; }
@media (hover: hover) { .mn-plbtn:hover span { text-decoration: underline; text-underline-offset: 3px; } }
.mn-plchev { flex: none; width: 16px; height: 16px; transition: transform .15s ease; }
.mn-plbtn[aria-expanded="true"] .mn-plchev { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .mn-plchev { transition: none; } }
/* the amounts sit on the line of the row's name, a chip under one */
.mn-plnum { padding: 0 0 0 10px; text-align: right; vertical-align: middle; }
/* on a computer the figures' columns sit together on the right, the names taking the rest */
@media (min-width: 640px) { .mn-pltab thead th:not(:first-child) { width: 15em; } }
/* a difference in a figure's cell may wrap on a phone, its chip under the amount */
.mn-plnum .mn-plchip { margin-top: 4px; }
.mn-plamt { display: block; font-weight: 500; white-space: nowrap; }
.mn-plunk { font-weight: 400; color: var(--pn-muted); }
.mn-fig-s.pn-bad { color: var(--st-bad); }
.mn-fig-s.pn-warn { color: var(--st-warn); }
.mn-fig-s.pn-good { color: var(--st-good); }
.mn-pltotal .mn-plbtn, .mn-pltotal .mn-plnum .mn-plamt { font-weight: 600; }
.mn-plmore > td { padding: 0 0 14px 22px; }
.mn-plpart + .mn-plpart { margin-top: 12px; }
.mn-plh { margin: 0 0 2px; font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--pn-t-kick); }
.mn-plfrom { margin: 0; font-size: 13px; line-height: 1.5; color: var(--pn-ink); }
.mn-pllines { display: grid; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.mn-pllines li { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; }
.mn-plw { display: grid; gap: 1px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.mn-pls { font-size: 12px; color: var(--pn-muted); }
.mn-pllines .mn-plamt { flex: none; text-align: right; }
.mn-plnote { margin-top: 14px; }
@media (max-width: 520px) {
  .mn-plfigs { gap: 8px; }
  .mn-plfig { padding: 10px 10px 11px; }
  .mn-plfig .mn-fig-n { font-size: 22px; }
  .mn-plfig .mn-fig-k { font-size: 9.5px; letter-spacing: .1em; }
  .mn-plbtn { font-size: 13.5px; }
  .mn-plnum { padding-left: 6px; font-size: 13px; }
  .mn-pltab thead th { padding-left: 6px; letter-spacing: .1em; }
  .mn-plmore > td { padding-left: 0; }
}
/* on the narrowest phones a four-figure loss in both columns keeps room between them */
@media (max-width: 359px) { .mn-plfigs { grid-template-columns: minmax(0, 1fr); } .mn-plnum { padding-left: 8px; font-size: 12px; } }

/* ---------- the statuses: a pill each, the colour saying what it is ---------- */
.pn-badge.mn-st { white-space: nowrap; }
:root[data-app][data-theme] .pn-badge:is(.mn-st-draft, .mn-st-declined, .mn-st-withdrawn, .mn-st-void, .mn-st-upcoming, .mn-st-closed) {
  background: var(--pn-p-hover); color: var(--pn-muted); border-color: var(--pn-line); }
:root[data-app][data-theme] .pn-badge:is(.mn-st-accepted, .mn-st-paid) { background: var(--st-good-bg); color: var(--st-good); border-color: var(--st-good-line); }
.pn-badge.mn-st-part { background: rgba(79,167,232,.14); color: #9fd0f5; border-color: rgba(79,167,232,.35); }
:root[data-app][data-theme] .pn-badge:is(.mn-st-expired, .mn-st-due) { background: var(--st-warn-bg); color: var(--st-warn); border-color: var(--st-warn-line); }
:root[data-app][data-theme] .pn-badge.mn-st-overdue { background: var(--st-bad-bg); color: var(--st-bad); border-color: var(--st-bad-line); }

/* ---------- the lists: Invoices and Quotes, one place with a switch between them ---------- */
/* the switch is the Studio's pills (THE STUDIO'S ORDER, level 3; 15 Oct 2026, ONE SIZE A CONTROL): Invoices or Quotes,
   the open one aria-current */
.mn-kinds { margin-top: 12px; }
.mn-kind .pn-gl { width: 16px; height: 16px; }
/* on a phone the switch spans the page in two equal halves, as the Jobs switch does (UI audit, 30 Sep 2026) */
@media (max-width: 640px) { .mn-kinds.pn-pills { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } .mn-kinds .pn-pill { min-width: 0; justify-content: center; } }

/* the three figures, as the desk's are drawn: a kicker with its glyph, the figure large, a line under it */
.mn-figs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.mn-fig { display: grid; align-content: start; gap: 3px; min-width: 0; padding: 14px 16px 15px; text-align: left; color: inherit; font: inherit; }
button.mn-fig { cursor: pointer; transition: transform .12s ease, border-color .2s ease; }
/* under the mouse a figure lifts and edges; the one pressed as the list's filter is the picked card, a 1.5px ink ring
   over the calculator's shadow (2 Nov 2026, go A), named under :root[data-app] to beat the card's own shadow */
@media (hover: hover) { :root[data-app] button.mn-fig:hover { transform: translateY(-2px); border-color: var(--pn-edge); } }
:root[data-app] button.mn-fig[aria-pressed="true"] { border-color: transparent; box-shadow: var(--pn-sh-sel); }
@media (prefers-reduced-motion: reduce) { button.mn-fig { transition: none; } :root[data-app] button.mn-fig:hover { transform: none; } }
.mn-fig-k { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 11px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--pn-t-kick); }
.mn-fig-k .pn-gl { width: 17px; height: 17px; flex: none; }
.mn-fig-n { margin-top: 6px; font-family: var(--font-display); font-weight: 300; font-size: 34px; line-height: 1.1; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.mn-fig-s { font-size: 12px; line-height: 1.4; color: var(--pn-muted); overflow-wrap: anywhere; }
/* A FIGURE READS PLAIN (1 Oct 2026, the overnight audit's F17, as the desk's do): Overdue's state is the bad chip under
   its number (money.js figuresHtml), never a red number */
.mn-fig-chip { justify-self: start; max-width: 100%; }
@media (max-width: 620px) {
  .mn-figs { gap: 6px; }
  .mn-fig { padding: 10px 8px 11px; gap: 2px; }
  .mn-fig-k { font-size: 9px; letter-spacing: .08em; gap: 4px; }
  .mn-fig-k .pn-gl { width: 13px; height: 13px; }
  .mn-fig-n { margin-top: 4px; font-size: 19px; }
  .mn-fig-s { font-size: 10.5px; line-height: 1.3; }
}

.mn-tab .mn-numh, .mn-tab .mn-num { text-align: right; }
.mn-tab td.mn-num { font-weight: 500; font-variant-numeric: tabular-nums; }
.pn-gltab.mn-tab .pn-glname .pn-jbnarrow .pn-badge { margin-left: 0; }
.mn-inl { display: inline !important; margin-left: 8px; white-space: nowrap; }
/* THE PAID COLUMN FROM 1200PX (report 189, 15 Oct 2026: "need a paid date column"): eight columns of dates and money do not
   fit narrower, so from 721 to 1199px the column folds away and its day goes under the client, "Paid <day>"; on a phone
   the line under the client says it with the state, as every optional column's words are */
.pn-gltab.mn-tab .pn-glname .mn-paidw { display: none; }
@media (min-width: 721px) and (max-width: 1199px) {
  .pn-gltab.mn-tab .mn-paidc { display: none; }
  .pn-gltab.mn-tab .pn-glname .mn-paidw { display: block; }
}
@media (max-width: 720px) {
  .mn-tab th.pn-glnum, .mn-tab td.pn-glnum:first-child { width: 64px; }
  .mn-tab td.pn-glnum.mn-num { width: auto; }
  /* an invoice's number is never broken at its hyphen ("SMP26-" over "1043", the UX pass, 3 Nov 2026): the cell takes
     the number's width, the name the rest */
  .mn-tab td.pn-glnum:first-child { white-space: nowrap; }
}
/* A PHONE'S LIST (9 Nov 2026: a reference column starved the name, and "Next due Mon 9 / Nov 2026" broke): a row is the reference
   small with the money at its right, the name across, the client, then the state and its day */
@media (max-width: 559.98px) {
  .mn-tab thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .mn-tab, .mn-tab tbody { display: block; }
  .mn-tab tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 12px; border-bottom: 1px solid var(--pn-line); }
  .mn-tab tbody tr:last-child { border-bottom: 0; }
  .mn-tab tbody td:not(.pn-glopt) { display: block; width: auto; padding: 0; border: 0; }
  .mn-tab td.pn-glnum:first-child { grid-column: 1; grid-row: 1; width: auto; font-size: 12px; color: var(--pn-muted); }
  .mn-tab td.mn-num { grid-column: 2; grid-row: 1; justify-self: end; }
  .mn-tab td.pn-glname { grid-column: 1 / -1; grid-row: 2; }
  .pn-gltab.mn-tab .pn-glname .pn-jbnarrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; }
  .mn-tab .mn-inl { margin-left: 0; }
}
.mn-filters [data-mnclear][hidden] { display: none; }
@media (max-width: 639.98px) {
  .mn-filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .mn-filters > .pn-glfilter:first-child, .mn-filters > [data-mnclear], .mn-filters > .pn-glfilter:has(input[type="search"]) { grid-column: 1 / -1; }
}

/* ---------- one quote, one invoice ---------- */
.mn-doc .pn-card h2, .mn-setcard h2, .mn-card h2 { display: flex; align-items: flex-start; gap: 8px; }
.mn-doc .pn-card h2 .pn-gl, .mn-setcard h2 .pn-gl, .mn-card h2 .pn-gl { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.mn-doc .pn-jbtop .pn-jbwhen { flex: 1 1 100%; }
/* the first row under a card's heading has no line over it, as a gallery setting's first row has none (UI audit,
   30 Sep 2026); and a document's figures line up */
.mn-card h2 + .pn-srow, .mn-doc .pn-card h2 + .pn-srow { border-top: 0; padding-top: 4px; }
.mn-doc .pn-jbfact b { font-variant-numeric: tabular-nums; }
.mn-grid > div > .pn-card:first-child { margin-top: 0; }
.mn-grid { align-items: start; }
.mn-lead { margin-top: 12px; }
/* its look is level 2 of THE STUDIO'S ORDER (app.css, report 30) */
.mn-h3 { margin: 18px 0 4px; }
/* inside a card, the card's own heading rule (.pn-card > h3, margin 0) took its room away, so Optional add-ons sat on
   the Add a line buttons above it (the UX pass, 3 Nov 2026); after a divider it stays at 0, the divider being the room */
.pn-card > :not(.pn-sep) + h3.mn-h3 { margin-top: 18px; }
/* an empty status line takes no room at a card's foot until it has something to say (as a client's card does) */
:is(.mn-card, .mn-setcard) .pn-msg:empty { min-height: 0; margin: 0; }
.mn-pre { white-space: pre-wrap; overflow-wrap: anywhere; }
.mn-right { text-align: right; }
.mn-field { max-width: none; }
.mn-field[hidden] { display: none; }
.mn-field + .mn-field { margin-top: 10px; }
textarea.wa-pwin.mn-ta { min-height: 84px; }
textarea.wa-pwin.mn-ldetail { min-height: 64px; margin-top: 6px; font-size: 13px; }
.mn-read li, .mn-plan li, .mn-inst li, .mn-pays li { align-items: flex-start; }
.mn-read .pn-badge, .mn-inst .pn-badge, .mn-pays .pn-badge { vertical-align: 1px; }
/* a payment's state chip is clear of its name (it touched it, the UX pass, 3 Nov 2026), as a quote's row has it */
.mn-inst .pn-m > b + .pn-badge { margin-left: 4px; }
/* each payment's Due box holds the longest day ("Wednesday 30 September 2026") beside its calendar glyph at the touch
   screen's 16px (28 Oct 2026, of a 1440px window cutting it at "202"); in a row too narrow for that and its amount, the
   amount goes under it, and on a phone narrower still the box is the card's width, never past it */
/* the amount at the row's top right, as Payment plan has it; Due beside its date, the width of the date */
.mn-inst .pn-m { flex: 1 1 0; min-width: 0; }
.mn-inst .pn-m > .pn-t:not(.mn-duek) { display: block; }
.mn-due { display: inline-block; width: 252px; max-width: calc(100% - 36px); margin-top: 6px; vertical-align: middle; }
.mn-duek { display: inline-block; margin: 6px 8px 0 0; vertical-align: middle; }
.mn-due .pn-datein { font-size: 14px; font-weight: 400; }
@media (pointer: coarse) { .mn-due { width: 280px; } .mn-due .pn-datein { font-size: 16px; } }
/* ON A PHONE the Due box has the row's whole width, under the name and the amount, so the longest day is whole in it (9 Nov 2026: "Saturday 31 October" and a clipped letter) */
@media (max-width: 559.98px) {
  .mn-inst li:has(.mn-due) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: center; }
  .mn-inst li:has(.mn-due) > .pn-m { display: contents; }
  .mn-inst li:has(.mn-due) > .pn-m > br { display: none; }
  .mn-inst li:has(.mn-due) > .pn-m > .pn-t:not(.mn-duek) { grid-column: 1 / -1; grid-row: 2; }
  .mn-inst li:has(.mn-due) > .mn-amt { grid-column: 3; grid-row: 1; }
  .mn-inst li:has(.mn-due) > .pn-m > .pn-badge { justify-self: start; }
  .mn-inst li:has(.mn-due) .mn-duek { grid-column: 1; grid-row: 3; margin: 6px 0 0; }
  .mn-inst li:has(.mn-due) .mn-due { grid-column: 1 / -1; grid-row: 3; width: auto; max-width: none; margin-left: 36px; }
  :root[data-app] .mn-inst .mn-due .pn-datein { padding-left: 10px; padding-right: 34px; text-overflow: ellipsis; }
}
/* a payment's Refund and Remove in words, small, at the right under its amount (9 Nov 2026: a lone arrow read as Undo) */
.mn-pays li { flex-wrap: wrap; }
.mn-pays .pn-m { flex: 1 1 0; min-width: 0; }
.mn-payacts { display: flex; flex: 1 1 100%; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-top: 2px; }
/* THE MAIN PAIR (9 Nov 2026): the page's main action filled and its partner beside it, one size, two equal columns on a phone; the
   rest small on the row under them, Void at the far end */
.mn-mainpair { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mn-secs { gap: 8px; }
.mn-secs > .pn-jbdel { margin-left: auto; }
@media (max-width: 559.98px) {
  .mn-mainpair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mn-mainpair > * { min-width: 0; justify-content: center; }
  .mn-mainpair > :only-child { grid-column: 1 / -1; }
  .mn-mainpair > .mn-split { display: flex; }
  .mn-mainpair > .mn-split > .mn-splitmain { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 8px; }
  .mn-mainpair > .mn-split > .mn-splitmain .pn-gl { flex: none; }
  /* Open invoice and its download are wider than Mark paid: the split is as wide as its words, and the partner has the rest, so its glyph is never crushed at 375 */
  .mn-mainpair:has(> .mn-split:last-child) { grid-template-columns: minmax(0, 1fr) auto; }
}
/* a switch here is pressed by a 44px band round it on a touch screen, the switch itself drawn the app's size */
@media (pointer: coarse) { .mn-doc .pn-switch::before, .mn-setcard .pn-switch::before { content: ""; position: absolute; inset: -10px -2px; } }
.mn-due .pn-datein { width: 100%; }
.mn-pays .mn-lx { margin-left: 4px; }
/* REFUND TO CARD (7 Oct 2026): the refund PIN's masked box, six digits wide and spaced, its figures in line */
.mn-pinin { max-width: 200px; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
/* its two buttons side by side, and on a phone, where "Refund A$1,005.00 to card" can't sit beside Cancel, one above the
   other, each the full width, so the two still match */
@media (max-width: 480px) {
  .mn-crrow { flex-direction: column; align-items: stretch; }
  .mn-crrow > .pn-spacer { display: none; }
  .mn-crrow > button { width: 100%; justify-content: center; }
}

/* a line of the editor: its words, then quantity, price, amount and Remove; one under another on a phone */
.mn-lines { display: grid; gap: 0; }
.mn-lhead, .mn-line { display: grid; grid-template-columns: minmax(0, 1fr) 84px 136px 112px 40px; gap: 8px; align-items: start; }
.mn-lhead { padding: 0 0 6px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .6; }
.mn-lhead span:nth-child(n+2):nth-child(-n+4) { text-align: right; }
.mn-line { padding: 10px 0; border-top: 1px solid var(--pn-line); }
.mn-ldesc { min-width: 0; }
.mn-lk { display: none; }
.mn-lamt { display: flex; align-items: center; justify-content: flex-end; min-height: 40px; font-variant-numeric: tabular-nums; }
.mn-lamt b { font-weight: 500; }
.mn-lqty, .mn-lprice { display: block; min-width: 0; }
:root[data-app][data-theme] .mn-lx { align-self: center; border-color: transparent; background: none; }
/* a line's Remove stands level with its boxes: at their top on a computer, at their foot under the Qty and Price labels on a phone */
:root[data-app][data-theme] .mn-line > .mn-lx.pn-glicon { align-self: start; border-color: transparent; background: none; }
@media (hover: hover) { :root[data-app][data-theme] .mn-lx:hover { background: var(--pn-hover); } }
.mn-textbtn { display: inline-flex; align-items: center; min-height: 32px; margin-top: 4px; padding: 0 2px; border: 0; background: none; color: inherit; font: inherit;
  font-size: 12.5px; text-decoration: underline; text-underline-offset: 3px; opacity: .75; cursor: pointer; }
@media (hover: hover) { .mn-textbtn:hover { opacity: 1; } }
@media (pointer: coarse) { .mn-textbtn { min-height: 44px; } }
/* ON A PHONE (the UX pass, 3 Nov 2026: at 375px four columns left the price 31px of room, and 111.25 showed as
   "111."): the words across the top; then the quantity, the price, which takes the room, and Remove; then the amount
   on a line of its own, its name at the left and the figure at the right, so no box is ever narrower than its figure */
@media (max-width: 640px) {
  .mn-lhead { display: none; }
  .mn-line { grid-template-columns: 72px minmax(0, 1fr) var(--pn-h-act); row-gap: 6px; }
  .mn-ldesc { grid-column: 1 / -1; }
  .mn-lqty { grid-row: 2; grid-column: 1; }
  .mn-lprice { grid-row: 2; grid-column: 2; }
  .mn-lx { grid-row: 2; grid-column: 3; }
  :root[data-app][data-theme] .mn-line > .mn-lx.pn-glicon { align-self: end; }
  .mn-lk { display: block; margin-bottom: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
  .mn-lamt { grid-row: 3; grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; }
  .mn-lamt .mn-lk { margin: 0; }
  .mn-lamt b { display: block; }
  .mn-lamt:has(> b:empty) { display: none; }
}

/* a box with its unit in it: A$ before, % or days after */
.mn-cur { position: relative; display: block; min-width: 0; }
.mn-cur > i { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; color: var(--pn-t-soft); pointer-events: none; }
.mn-cur > i[hidden] { display: none; }
.mn-cur > i:first-child { left: 16px; }
.mn-cur > input + i { right: 16px; }
.mn-cur > i:first-child:not([hidden]) ~ input { padding-left: 40px; }
.mn-cur.mn-pct > input, .mn-cur.mn-km > input { padding-right: 40px; }
.mn-cur.mn-days > input, .mn-cur.mn-hours > input { padding-right: 60px; }
.mn-cur .mn-numin[data-mndval] { padding-right: 40px; }
.mn-numin { text-align: right; font-variant-numeric: tabular-nums; }
.mn-small { width: 76px; }
.mn-mid { max-width: 200px; text-align: left; }
.mn-cur .mn-small { width: 96px; }
.mn-inline { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin: 10px 0 14px; font-size: 14px; line-height: 1.5; }
.mn-inline > span:last-child:not(.mn-cur) { flex: 1 1 auto; min-width: 0; }
.mn-inline > .mn-cur { display: inline-block; }
.mn-ingrp { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }

/* the total, the add-ons with every one ticked, the GST inside it, and what Stripe would keep */
.mn-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--pn-edge); font-size: 14px; }
/* the figure big and light, as the calculator's total */
.mn-total b { font-family: var(--font-display); font-size: 24px; font-weight: 300; font-variant-numeric: tabular-nums; }
.mn-helper:empty, [data-mnaddons]:empty, [data-mngst]:empty { display: none; }

/* a payment plan's steps */
.mn-steps { display: grid; gap: 0; margin-top: 6px; }
.mn-step { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 0; border-top: 1px solid var(--pn-line); }
.mn-step:first-child { border-top: 0; }
.mn-stepn { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; border-radius: var(--pn-r); background: var(--pn-p-hover);
  font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* on a computer, one line a payment: its number, name, how much, when, and Remove. A select is dressed as the app's own
   dropdown (frame.js), a button that takes the select's classes, so .mn-stepsel sizes the button the owner sees */
.mn-step > .mn-steplabel { flex: 1 1 150px; width: auto; min-width: 0; }
.mn-step > .mn-stepsel { flex: 0 1 200px; width: auto; min-width: 150px; }
.mn-step > .mn-cur { flex: 0 1 120px; }
.mn-step > .mn-cur.mn-days { flex: 0 1 112px; }
.mn-step > .mn-lx { margin-left: auto; }
.mn-preview { margin-top: 10px; }
.mn-plan { margin-top: 6px; }
/* on a phone: the number, the name and Remove on the first line; how much, then when, each a line of two halves */
@media (max-width: 640px) {
  .mn-step > .mn-stepn { order: 1; }
  .mn-step > .mn-steplabel { order: 2; flex: 1 1 calc(100% - 96px); }
  .mn-step > .mn-lx { order: 3; margin-left: 0; }
  .mn-step > .mn-stepsel { order: 4; flex: 1 1 calc(50% - 6px); min-width: 0; }
  .mn-step > .mn-cur:not(.mn-days) { order: 5; flex: 1 1 calc(50% - 6px); min-width: 0; }
  /* When has the row across; its days a box 96px wide */
  .mn-step > :is(button, select).mn-stepsel ~ :is(button, select).mn-stepsel { order: 6; flex: 1 1 100%; }
  .mn-step > .mn-cur.mn-days { order: 7; flex: 0 0 96px; }
}
/* Add a plan's sheet is narrow at every width, so its steps are laid out as a phone's there too: on a computer the name,
   how much and when wrapped wherever they ran out of room and no two steps lined up (UI audit, 30 Sep 2026) */
.mn-plansheet .mn-step > .mn-stepn { order: 1; }
.mn-plansheet .mn-step > .mn-steplabel { order: 2; flex: 1 1 calc(100% - 96px); }
.mn-plansheet .mn-step > .mn-lx { order: 3; margin-left: 0; }
.mn-plansheet .mn-step > .mn-stepsel { order: 4; flex: 1 1 calc(50% - 6px); min-width: 0; }
.mn-plansheet .mn-step > .mn-cur:not(.mn-days) { order: 5; flex: 1 1 calc(50% - 6px); min-width: 0; }
.mn-plansheet .mn-step > :is(button, select).mn-stepsel ~ :is(button, select).mn-stepsel { order: 6; flex: 1 1 100%; }
.mn-plansheet .mn-step > .mn-cur.mn-days { order: 7; flex: 0 0 96px; }

/* the buttons under a document; they wrap, and Delete sits at the far end */
.mn-acts { align-items: center; }
/* a draft's Save and Send stay side by side on a phone, each half the row, with Delete draft under them at the left
   (the UX pass, 3 Nov 2026: at 375px Send wrapped alone under Delete draft, away from Save) */
@media (max-width: 480px) {
  .mn-acts:has(> [data-mnsend]) > .pn-spacer { display: none; }
  .mn-acts:has(> [data-mnsend]) > :is([data-mnsend], .pn-savebtn) { flex: 1 1 0; justify-content: center; }
  .mn-acts:has(> [data-mnsend]) > [data-mndel] { order: 1; }
}
.mn-acts > a.wa-gl { text-decoration: none; }
/* OPEN AND DOWNLOAD IN ONE PILL (Problem report 100, 3 Oct 2026; money.js pdfPill): two links joined, their outer
   corners the pill's and their inner ones square, a thin divider between them, each with its own hover and focus
   ring. The pill is as tall as the row's buttons (40px, 44px on a touch screen), and each part is 44px wide at least,
   the download a glyph alone.
   ONE PILL, NO GAP (Problem report 137, 7 Oct 2026, an invoice on an iPhone: "Fix gap"). The inner corners are named
   under :root[data-app], as smp.css names every button's corners (STUDIO'S CORNERS, `:root[data-app] .wa-gl`): by
   `.mn-split > ...` alone that rule won, every corner stayed round, and the two parts showed as two pills with a notch
   between them. */
.mn-split { display: inline-flex; align-items: stretch; flex: none; max-width: 100%; }
.mn-split > a.wa-gl { position: relative; text-decoration: none; }
:root[data-app] .mn-split > .mn-splitmain { min-width: 44px; border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-width: 0; }
:root[data-app] .mn-split > .mn-splitdl { width: var(--pn-h-main); min-width: 0; padding: 0; border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-width: 0; }
.mn-split > .mn-splitdl .pn-gl { width: 16px; height: 16px; }
.mn-split > .mn-splitdl::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background: currentColor; opacity: .28; }
.mn-split > a.wa-gl:focus-visible { z-index: 1; outline-offset: 2px; }
@media (pointer: coarse) { .mn-split > a.wa-gl { min-height: 44px; } }

/* ---------- the sheets: send, discount, Mark accepted, Mark paid, a plan ---------- */
.pn-sheet > .wa-card.pn-covsheet.mn-sheet { max-width: 720px; }
.mn-mail .pn-jbfacts { margin-top: 4px; }
/* the send sheet's email, drawn as an email (the lead to money audit, 28 Oct 2026; frame.js S.mailPreview) */
.mn-mailprev { margin-top: 12px; }
.mn-mailtext { margin-top: 12px; padding: 12px 14px; border-radius: var(--pn-r); background: var(--pn-hover); color: var(--pn-ink); font-size: 14px; line-height: 1.55;
  white-space: pre-wrap; overflow-wrap: anywhere; max-height: 42vh; overflow-y: auto; }
.mn-golink { font-weight: 600; }
.mn-radios { gap: 16px; }
.mn-ticks { display: grid; gap: 0; margin-top: 6px; }
/* the Studio's own 17px tick (UI audit, 30 Sep 2026) */
.mn-tick { display: flex; align-items: center; gap: 9px; min-height: 36px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.mn-tick input { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--pn-ink); }
@media (pointer: coarse) { .mn-tick { min-height: 44px; } }
.mn-linkin { font-size: 13px; }
/* WHEN A QUOTE CLOSES (14 Oct 2026): its business days or a day it is open until, each a row with its own radio, and the
   small Change beside a sent quote's closing day */
.mn-closes { display: grid; gap: 4px; margin-top: 6px; }
.mn-closerow { display: grid; grid-template-columns: auto auto 64px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 36px; font-size: 14px; line-height: 1.4; }
.mn-closerow > input.mn-small { width: 100%; padding-inline: 8px; }
.mn-closerow > .mn-closeday { grid-column: 3 / -1; }
/* a setting a row: its label at the left, a box 96px wide at the right with its unit inside */
.mn-setrows { display: grid; gap: 8px; max-width: 420px; }
.mn-setrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 14px; }
.mn-setrow > .mn-cur { flex: 0 0 96px; }
.mn-setrow .mn-numin { width: 100%; }
.mn-closerow > input[type="radio"] { flex: none; width: 17px; height: 17px; margin: 0; accent-color: var(--pn-ink); }
.mn-closerow > label { cursor: pointer; }
.mn-closeday { display: inline-block; width: 200px; max-width: 100%; }
.mn-closeday .pn-datein { width: 100%; }
.mn-chg { position: relative; display: inline-flex; align-items: center; min-height: 0; margin-left: 8px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit;
  font-weight: 500; cursor: pointer;
  text-decoration: underline 1px; text-underline-offset: 3px; text-decoration-color: currentColor; }
.mn-chg:disabled { opacity: .5; cursor: default; }
@media (pointer: coarse) { .mn-closerow { min-height: 44px; } .mn-chg::after { content: ""; position: absolute; inset: -12px -6px; } }

/* ---------- Settings, Payments and Booking terms ---------- */
.mn-setcard + .mn-setcard { margin-top: 14px; }
#mn-set > .mn-setcard:first-child { margin-top: 0; }
.mn-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.mn-two > .mn-field + .mn-field { margin-top: 0; }
.mn-law { padding: 10px 12px; border-radius: var(--pn-r); background: var(--pn-hover); color: var(--pn-ink); font-size: 14px; }
.mn-linktext { margin-top: 8px; }
.mn-calcsays { font-variant-numeric: tabular-nums; }
.mn-plans li { align-items: center; }
.mn-planacts { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
/* the glyph buttons are the app's M (app.css .pn-glicon, 40px), as tall as Edit beside them; 44px on a touch screen */
.mn-plansheet .pn-form { max-width: none; }
textarea.wa-pwin.mn-ta.mn-terms { min-height: 520px; font-size: 14px; }
@media (max-width: 700px) { textarea.wa-pwin.mn-ta.mn-terms { font-size: 16px; min-height: 420px; } }
.mn-termsfield { display: block; }
/* THE BOOKING TERMS' SETS (report 170, 12 Oct 2026; money.js termsCard): the set on screen and its buttons above its
   words, under a line, the buttons wrapping under the picker on a phone and beside it from 760px; Add a set's Start from
   as two choices */
.mn-tsets { display: grid; gap: 10px; margin: 0 0 14px; padding: 0 0 14px; border-bottom: 1px solid var(--pn-line); }
.mn-tsets .mn-tsetpick { margin: 0; }
.mn-tsets .mn-tsetacts { flex-wrap: wrap; gap: 8px; margin: 0; }
@media (min-width: 560px) { .mn-tsets { grid-template-columns: minmax(220px, 360px) minmax(0, 1fr); align-items: end; } }
.mn-tsetfrom { display: grid; gap: 4px; margin: 0; padding: 0; border: 0; min-width: 0; }
.mn-tsetfrom legend { padding: 0; margin: 0 0 4px; }
/* Booking terms' parts to fill in (report 90, 2 Oct 2026): a box a part, its words as its label, Leave out beside it as
   tall as the box (stretched to it, its own height let go), a Business details offer and Fill each place on its own under
   it; a part filled a place at a time, a box a place under a thin rule, each labelled with the words around it; Undo on
   the line under the panel; on a phone the box takes the line and Leave out keeps its size */
.mn-tparts:empty { display: none; }
.mn-tparts { margin-top: 14px; padding: 12px 14px 14px; border: 1px solid var(--pn-line); border-radius: var(--pn-r); }
.mn-tparts .mn-tph { margin-top: 0; }
.mn-tplist { display: grid; gap: 12px; margin-top: 10px; }
.mn-tprow { min-width: 0; }
.mn-tplabel { display: block; margin-bottom: 4px; font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.mn-tpline { display: flex; gap: 8px; align-items: stretch; }
.mn-tpline > .mn-tpin { flex: 1 1 auto; min-width: 0; }
.mn-tpline > .wa-gl { flex: 0 0 auto; height: auto; }
.mn-tpacts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.mn-tpwhere { margin: 4px 0 0; }
.mn-tpplaces { display: grid; gap: 10px; margin-top: 8px; padding-left: 12px; border-left: 1px solid var(--pn-line); }
.mn-tpname { margin: 0 0 4px; }
.mn-tpctx { font-size: 12.5px; opacity: .85; }
.mn-tpundo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 12px 0 0; }
.mn-tplist + .mn-tpundo { padding-top: 10px; border-top: 1px solid var(--pn-line); }
.mn-tpundo:first-child { margin-top: 0; }
@media (pointer: coarse) { .mn-tpline > .wa-gl, .mn-tpacts > .wa-gl, .mn-tpundo > .wa-gl { min-height: 44px; } }
@media (max-width: 700px) { .mn-tpin { font-size: 16px; } }
.mn-setcard .pn-srow { padding-top: 4px; border-top: 0; }
@media (max-width: 420px) { .mn-two { grid-template-columns: minmax(0, 1fr); } }
/* A SAVED KEY SAYS SO, AND REPLACING IT ASKS FIRST (Problem report 129, 6 Oct 2026, Settings, Payments: "make it clearer
   that a key has already been entered into and editing it should prompt warning"; money.js keyField): the key's name
   with its Saved chip, a filled box that can't be typed in, as wide as a field, and Replace beside it, as tall as the
   box; while it is replaced, the box to paste into and Keep the saved one in Replace's place. Beside the box on a
   phone too; only a card narrower than about 300px puts the button under it. */
.mn-keylab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.mn-keyrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.mn-keyrow > .wa-pwin { flex: 1 1 140px; min-width: 0; max-width: 480px; }
.mn-keyrow > .wa-gl { flex: none; }
.mn-keybox { display: flex; align-items: center; overflow: hidden; cursor: default; }
.mn-keybox.mn-keydots { letter-spacing: .14em; }
.mn-keytext { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Settings, Reminders, Products and Quote templates, and the editor's pickers (28 Sep 2026) ---------- */
.mn-remsel { max-width: 260px; }
.mn-remsays { font-size: 14px; }
.mn-prods li, .mn-tpls li, .mn-picklist li { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.mn-prods .pn-badge, .mn-picklist .pn-badge, .mn-tplprod .pn-badge { margin-left: 4px; vertical-align: 1px; }
.mn-tplprod .pn-badge { margin-left: 0; }
/* a product's description under its name, two lines at most in a list */
.mn-clip { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: pre-line; overflow-wrap: anywhere; }
.mn-prods .pn-m, .mn-tpls .pn-m, .mn-picklist .pn-m { flex: 1 1 220px; min-width: 0; }
/* archived products, folded away */
.mn-fold { margin-top: 16px; border-top: 1px solid var(--pn-line); }
/* a list item, so the browser's own open and shut marker stays beside the words */
.mn-fold > summary { display: list-item; min-height: 44px; line-height: 44px; font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
  color: var(--pn-ink); opacity: .8; cursor: pointer; list-style-position: inside; }
@media (hover: hover) { .mn-fold > summary:hover { opacity: 1; } }
.mn-fold > .pn-note { margin-top: 0; }
/* the product sheet's price box is as wide as a price needs */
.mn-pricebox { max-width: 220px; }
/* the pickers: each row's buttons at the end, as tall as each other, wrapping under the words on a phone */
/* the list scrolls inside the sheet, clear of its own scroll bar */
.mn-picklist { max-height: 56vh; overflow-y: auto; margin-top: 10px; padding-right: 10px; scrollbar-width: thin; scrollbar-gutter: stable; }
.mn-picklist li[hidden] { display: none; }
.mn-pickacts { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.mn-pickbtn { min-height: 36px; white-space: nowrap; }
@media (pointer: coarse) { .mn-pickbtn, .mn-planacts > .wa-gl { min-height: 44px; } .mn-planacts > .pn-glicon { min-width: 44px; } }
/* a template's lines: a product's line has its name, its tags and a price that is the product's */
.mn-tplprod { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 40px; overflow-wrap: anywhere; }
.mn-lfixed { display: flex; align-items: center; justify-content: flex-end; min-height: 40px; font-variant-numeric: tabular-nums; }
.mn-lfixed b { font-weight: 500; }
.mn-tpladds { align-items: center; gap: 8px; }
.mn-tpladds .mn-tplpick { width: auto; min-width: 200px; max-width: 100%; }
@media (max-width: 640px) {
  .mn-lfixed { display: grid; align-content: start; justify-items: end; min-height: 0; }
  .mn-lfixed b { display: flex; align-items: center; min-height: 44px; }
  .mn-pickacts { margin-left: 0; width: 100%; }
  .mn-pickacts > .mn-pickbtn { flex: 1 1 0; }
}

/* ═══════════════════════════════ LIGHT: what a role cannot carry (2 Nov 2026, go A) ═══════════════════════════════ */
/* the part paid chip's blue, its own on paper */
:root[data-app][data-theme="light"] .pn-badge.mn-st-part { background: rgba(40,110,170,.1); color: #1f5687; border-color: rgba(40,110,170,.28); }
/* a button whose words are longer than a phone is wide wraps inside it, never pushing the page sideways (Register our
   domains for Apple Pay and Google Pay ran 375px off the side, 7 Oct 2026) */
.wa-gl.mn-wrapgl { height: auto; min-height: 40px; max-width: 100%; padding-block: 8px; white-space: normal; text-align: left; }
@media (pointer: coarse) { .wa-gl.mn-wrapgl { min-height: 44px; } }