/* ============================================================================
   THE MERCHANT'S CHECKOUT - /m/{token}

   WHY THIS IS A GLOBAL SHEET AND NOT SEVEN SCOPED ONES.
   The merchant lane is one shell plus six step bodies, each its own .razor
   file, and they share a class vocabulary (.oc-mf-card, .oc-mf-prose,
   .oc-mf-actions, .oc-mf-alert...). A scoped *.razor.css only matches elements
   carrying ITS component's scope attribute, so a shared class written in one
   component's scoped sheet silently misses on the other six - which is exactly
   the defect that moved .oc-pq-card out of QuoteView.razor.css into
   wwwroot/css/oc-public-quote.css. Shared vocabulary belongs in a global file.
   Anything that is genuinely one component's own can still be scoped.

   ⛔ COLOURS ARE --oc-* TOKENS ONLY. A raw hex does not flip for dark mode.
   There are deliberately NO [data-oc-theme="dark"] blocks below: every colour
   here is a token or a token PAIR (-bg with its -text), all of which already
   flip as a unit, so there is nothing left for an override to correct. If you
   add a rule that needs one, you have probably reached for the wrong token -
   check design-system/dark-mode.md before adding the override.

   ⛔ --oc-success IS NOT A GREEN. It is #1f2430 in both themes, a typographic
   token, and painting with it produces near-black. Success ink here is
   --oc-emerald-600 and success surfaces are the --oc-success-bg/-text pair.

   THE PHONE RULES AT THE BOTTOM ARE THE POINT, not a courtesy. This is a
   restaurant owner agreeing to spend money, from an email, on a phone. Same
   640px breakpoint as oc-public-quote.css so the merchant flow restacks in
   step with the quote document it is showing, and the same 44px touch floor.
   ========================================================================== */

/* ── Page head ──────────────────────────────────────────────────────────── */

.oc-mf-head {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-1);
}

.oc-mf-head-eyebrow {
    margin: 0;
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.oc-mf-head-title {
    margin: 0;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--oc-gray-900);
}

.oc-mf-head-who {
    margin: 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

/* ── Step head ──────────────────────────────────────────────────────────── */

.oc-mf-step-head { margin: 0 0 var(--oc-space-4); }

.oc-mf-step-title {
    margin: 0 0 var(--oc-space-1);
    font-size: 1.25rem;
    line-height: 1.3;
    color: var(--oc-gray-900);
}

.oc-mf-step-sub {
    margin: 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.oc-mf-card {
    margin: 0 0 var(--oc-space-4);
    padding: var(--oc-space-4);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
    box-shadow: var(--oc-shadow-xs);
}

.oc-mf-card:last-child { margin-bottom: 0; }

.oc-mf-group.is-nested {
    margin-left: var(--oc-space-4);
    background: var(--oc-surface-muted);
}

.oc-mf-group-head { margin: 0 0 var(--oc-space-3); }

.oc-mf-group-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--oc-gray-900);
}

.oc-mf-group-sub {
    margin: var(--oc-space-1) 0 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

.oc-mf-prose {
    margin: 0 0 var(--oc-space-3);
    color: var(--oc-text);
    line-height: 1.55;
}

.oc-mf-prose:last-child { margin-bottom: 0; }

.oc-mf-prose-muted {
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

/* ── The quote document ─────────────────────────────────────────────────── */

.oc-mf-eyebrow {
    margin: 0 0 var(--oc-space-1);
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.oc-mf-quote-head { margin: 0 0 var(--oc-space-5); }

.oc-mf-quote-title {
    margin: 0 0 var(--oc-space-1);
    font-size: 1.375rem;
    color: var(--oc-gray-900);
}

.oc-mf-quote-sub {
    margin: 0;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

.oc-mf-quote-expires { white-space: nowrap; }

/* The rep's 60-character note. Quoted and set apart so it reads as something a
   person wrote, not as system copy - that is the whole job it does. */
.oc-mf-quote-sendnote {
    margin: var(--oc-space-3) 0 0;
    padding-left: var(--oc-space-3);
    border-left: 3px solid var(--oc-primary);
    font-size: var(--oc-fs-sm);
    font-style: italic;
    color: var(--oc-text-muted);
}

.oc-mf-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.oc-mf-line {
    display: flex;
    align-items: baseline;
    gap: var(--oc-space-3);
    padding: var(--oc-space-2) 0;
    border-top: 1px solid var(--oc-border-soft);
}

.oc-mf-line:first-child { border-top: 0; }

.oc-mf-line-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
}

.oc-mf-line-title {
    font-weight: 600;
    color: var(--oc-gray-900);
    overflow-wrap: anywhere;
}

.oc-mf-line-sub,
.oc-mf-line-paidby {
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
    overflow-wrap: anywhere;
}

.oc-mf-line-qty,
.oc-mf-line-amount {
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.oc-mf-line-qty { color: var(--oc-text-muted); }

.oc-mf-line-amount { color: var(--oc-gray-900); }

.oc-mf-group-subtotal {
    margin: var(--oc-space-3) 0 0;
    text-align: right;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--oc-gray-900);
}

/* Totals. A real <dl>, so the label and the figure are associated for a screen
   reader rather than being two columns that happen to line up. */
.oc-mf-totals-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--oc-space-2) var(--oc-space-4);
    margin: 0;
}

.oc-mf-totals-grid dt {
    margin: 0;
    color: var(--oc-text-muted);
}

.oc-mf-totals-grid dd {
    margin: 0;
    text-align: right;
    font-variant-numeric: tabular-nums;
    color: var(--oc-gray-900);
}

.oc-mf-total-due,
.oc-mf-total-monthly {
    font-weight: 700;
    color: var(--oc-gray-900);
}

.oc-mf-permo {
    margin-left: 2px;
    font-size: var(--oc-fs-xs);
    font-weight: 400;
    color: var(--oc-text-muted);
}

.oc-mf-notes,
.oc-mf-shipto-name,
.oc-mf-shipto-line {
    margin: 0 0 var(--oc-space-1);
    color: var(--oc-text);
}

.oc-mf-notes {
    margin-top: var(--oc-space-4);
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

/* ── THE CARD FEE ON THE QUOTE'S TOTALS BLOCK (W39, 2026-09-26) ──────────
   It shares oc-mf-notes' placement but NOT its muted colour. The quote step read
   "Due on acceptance $1,855.00" while the payment step charged $1,947.75, and the
   sentence that closes that gap is not a footnote - a merchant who skims past it
   is a merchant who meets the 5% at checkout. Full-strength text, and a rule above
   it so it reads as part of the totals rather than trailing prose. */
.oc-mf-cardfee-note {
    margin-top: var(--oc-space-3);
    padding-top: var(--oc-space-3);
    border-top: 1px solid var(--oc-border);
    color: var(--oc-text);
}

.oc-mf-shipto-name { font-weight: 600; }

/* ── Home or business (walk defect W11, 2026-09-25) ──────────────────────
   The one question that decides whether the shipment is priced at all. It sits
   with the address it is about, not down among the delivery speeds, because it
   is a fact ABOUT the address rather than a choice between services.

   ⛔ Two native radios, side by side, no default. Laid out in a row so the pair
   reads as one two-way question rather than two independent options - and wrapped
   so a narrow phone stacks them instead of squeezing them. */
.oc-mf-shipto-kind {
    margin: var(--oc-space-3) 0 0;
}

.oc-mf-shipto-kind-q {
    margin: 0 0 var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-text);
}

/* The whole chip is the label, so the tap target is the words and the box, not a
   22px dot - the same reason .oc-mf-ship-option is a full-width label. */
.oc-mf-shipto-kind-opt {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-2);
    min-height: 44px;
    padding: var(--oc-space-2) var(--oc-space-3);
    margin: 0 var(--oc-space-2) var(--oc-space-2) 0;
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
    color: var(--oc-text);
    font-size: var(--oc-fs-sm);
    cursor: pointer;
}

.oc-mf-shipto-kind-opt.is-picked {
    border-color: var(--oc-primary);
    background: var(--oc-primary-soft);
}

.oc-mf-shipto-kind-opt input[type="radio"] {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--oc-primary);
}

.oc-mf-shipto-kind-opt input[type="radio"]:disabled { cursor: default; }
.oc-mf-shipto-kind-opt:has(input[type="radio"]:disabled) { cursor: default; opacity: 0.75; }

.oc-mf-shipto-kind-why {
    margin: 0;
}

/* ── Alerts. Every one is a -bg/-text PAIR so it flips as a unit. ───────── */

.oc-mf-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--oc-space-3);
    margin: 0 0 var(--oc-space-4);
    padding: var(--oc-space-3);
    border-radius: var(--oc-radius-md);
    font-size: var(--oc-fs-sm);
}

.oc-mf-alert-text,
.oc-mf-alert-detail { margin: 0; }

.oc-mf-alert-detail {
    margin-top: var(--oc-space-1);
    font-size: var(--oc-fs-xs);
    opacity: 0.85;
}

.oc-mf-alert-words { flex: 1 1 0; min-width: 0; }

.oc-mf-alert-error {
    background: var(--oc-danger-bg);
    color: var(--oc-danger-text);
}

.oc-mf-alert-warn {
    background: var(--oc-warning-bg);
    color: var(--oc-warning-text);
}

.oc-mf-alert-done {
    background: var(--oc-success-bg);
    color: var(--oc-success-text);
}

.oc-mf-alert-quiet {
    background: var(--oc-surface-muted);
    color: var(--oc-text-muted);
}

.oc-mf-alert-done .bi { color: var(--oc-emerald-600); }

/* ── The honest locked state ────────────────────────────────────────────── */

.oc-mf-notready { margin: 0 0 var(--oc-space-4); }

/* Warning-toned, not danger-toned: nothing is broken, it is unfinished. It has
   to be impossible to walk past in a demo, which is why it sits ABOVE the
   preview rather than as a footnote under it. */
.oc-mf-notready-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--oc-space-3);
    padding: var(--oc-space-4);
    border: 1px dashed var(--oc-warning-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-warning-bg);
    color: var(--oc-warning-text);
}

.oc-mf-notready-words { flex: 1 1 0; min-width: 0; }

.oc-mf-notready-heading {
    margin: 0 0 var(--oc-space-1);
    font-weight: 700;
}

.oc-mf-notready-body {
    margin: 0;
    font-size: var(--oc-fs-sm);
}

.oc-mf-notready-waiting {
    margin: var(--oc-space-2) 0 0;
    font-size: var(--oc-fs-sm);
}

.oc-mf-notready-waiting-label {
    font-weight: 700;
    text-transform: uppercase;
    font-size: var(--oc-fs-xs);
    letter-spacing: 0.04em;
}

/* The preview is dimmed and desaturated so it cannot be mistaken for a working
   screen at a glance, while still being readable enough to review the wording
   and the reading order - which is the only reason it is rendered at all. */
.oc-mf-notready-preview {
    margin-top: var(--oc-space-3);
    opacity: 0.6;
    filter: grayscale(0.4);
}

.oc-mf-steplist,
.oc-mf-fieldpreview,
.oc-mf-service-preview {
    margin: 0;
    padding: 0 0 0 var(--oc-space-5);
    color: var(--oc-text);
    line-height: 1.6;
}

.oc-mf-fieldpreview,
.oc-mf-service-preview {
    padding-left: 0;
    list-style: none;
}

.oc-mf-fieldpreview-row,
.oc-mf-service-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--oc-space-3);
    padding: var(--oc-space-2) 0;
    border-top: 1px solid var(--oc-border-soft);
}

.oc-mf-fieldpreview-row:first-child,
.oc-mf-service-row:first-child { border-top: 0; }

.oc-mf-fieldpreview-name,
.oc-mf-service-name {
    font-weight: 600;
    color: var(--oc-gray-900);
}

.oc-mf-fieldpreview-detail,
.oc-mf-service-price {
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
    text-align: right;
}

/* ── Shipping ───────────────────────────────────────────────────────────── */

/* A real <fieldset>/<legend>: a screen reader announces what the radios belong
   to, and `disabled` on the fieldset takes every radio inside it with it, which
   is exactly what a partner-fixed delivery method needs. */
.oc-mf-ship-choice {
    margin: 0;
    padding: 0;
    border: 0;
}

.oc-mf-ship-legend {
    padding: 0;
    margin: 0 0 var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-text-muted);
}

/* The whole row is the label, so the entire 44px strip is the tap target rather
   than a 22px dot at one end of it. */
.oc-mf-ship-option {
    display: flex;
    align-items: flex-start;
    gap: var(--oc-space-3);
    width: 100%;
    min-height: 44px;
    padding: var(--oc-space-3);
    margin: 0 0 var(--oc-space-2);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
    cursor: pointer;
}

.oc-mf-ship-option:last-child { margin-bottom: 0; }

.oc-mf-ship-option.is-picked {
    border-color: var(--oc-primary);
    background: var(--oc-primary-soft);
}

.oc-mf-ship-choice[disabled] .oc-mf-ship-option { cursor: default; opacity: 0.75; }

/* A native radio, deliberately - the honest control for a single choice, and
   keyboard- and screen-reader-correct with no work. Only its size needed fixing. */
.oc-mf-ship-radio {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 2px 0 0;
    accent-color: var(--oc-primary);
}

.oc-mf-ship-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 0;
    min-width: 0;
}

.oc-mf-ship-name {
    font-weight: 600;
    color: var(--oc-gray-900);
    overflow-wrap: anywhere;
}

.oc-mf-ship-days {
    font-size: var(--oc-fs-sm);
    color: var(--oc-text-muted);
}

/* ── WHAT AN OPTION COSTS (W39, 2026-09-26) ──────────────────────────────
   The monthly chooser's card option adds a 5% fee to every bill for the life of
   the account and said nothing about it. The figure now sits on the option, and
   it is drawn DARKER and slightly heavier than the grey detail line above it:
   this is money the merchant is agreeing to, not a footnote about it. Still
   under the option's name, so the rail reads first and its price second. */
.oc-mf-ship-cost {
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-gray-900);
    font-variant-numeric: tabular-nums;
}

.oc-mf-ship-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--oc-gray-900);
    white-space: nowrap;
}

/* CEO decision 20's badge. Neutral, NOT a warning colour: this is a good-faith
   price that may move a little, and painting it amber would tell a merchant
   something is wrong when nothing is. It sits UNDER the price it qualifies so it
   cannot be read as part of the figure. */
.oc-mf-ship-estimate {
    font-size: var(--oc-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--oc-text-muted);
}

.oc-mf-estimate-note { align-items: flex-start; }

/* ── Payment ────────────────────────────────────────────────────────────── */

/* The "nothing is charged today" sentence. Given real weight on purpose: it is
   the one line standing between a merchant and the belief that a card form
   means a charge. */
.oc-mf-payment-intro { border-left: 4px solid var(--oc-primary); }

.oc-mf-payment-headline {
    font-weight: 600;
    color: var(--oc-gray-900);
}

/* ── WHAT THE BUTTON CHARGES, BESIDE THE BUTTON (W39, 2026-09-26) ────────
   On the add-on lane the amount and the fee lived only at the top of the screen,
   above the list of saved methods, and neither followed the selection: a merchant
   picked their bank account and pressed Charge this under the card's price. This
   block restates the figure for the SELECTED method immediately above the button.
   Boxed and ruled so it reads as belonging to the press rather than as more prose,
   and its own margin keeps it off the fieldset above. */
.oc-mf-charge-summary {
    margin-top: var(--oc-space-3);
    padding: var(--oc-space-3);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm, 6px);
    background: var(--oc-surface-alt, var(--oc-surface));
}

.oc-mf-charge-summary > :last-child { margin-bottom: 0; }

/* A real anchor, styled to look like the primary button, NOT an OcButton. The
   payment page must be reached by a link the browser understands: it survives a
   popup blocker, it can be opened in a new tab deliberately, and it can never
   turn into a form post. */
.oc-mf-paylink,
.oc-mf-pdf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--oc-space-2);
    min-height: 44px;
    padding: var(--oc-space-2) var(--oc-space-5);
    border-radius: var(--oc-radius-sm);
    font-weight: 600;
    text-decoration: none;
}

.oc-mf-paylink {
    border: 1px solid var(--oc-primary);
    background: var(--oc-primary);
    color: var(--oc-surface);
}

.oc-mf-paylink:hover,
.oc-mf-paylink:focus-visible { background: var(--oc-primary-dark); }

.oc-mf-pdf {
    border: 1px solid var(--oc-border);
    background: var(--oc-surface);
    color: var(--oc-text);
}

.oc-mf-pdf:hover,
.oc-mf-pdf:focus-visible { background: var(--oc-surface-hover); }

/* ── Signing ────────────────────────────────────────────────────────────── */

.oc-mf-building {
    display: flex;
    align-items: center;
    gap: var(--oc-space-3);
    padding: var(--oc-space-5);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-md);
    background: var(--oc-surface);
}

.oc-mf-building .oc-mf-prose { margin: 0; }

/* ── Actions ────────────────────────────────────────────────────────────── */

.oc-mf-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--oc-space-3);
    margin-top: var(--oc-space-5);
}

/* ── Phone. Same 640px breakpoint as the quote document above it. ───────── */

/* ==================================================================
   THE BUSINESS-INFORMATION FORM (package P11)

   The merchant's onboarding set, asked for inside a checkout. Every colour
   here is an --oc-* token: a raw hex does not flip for dark mode, and this
   form is twenty fields of text on a surface, which is exactly where an
   unflipped colour turns into invisible text.
   ================================================================== */

.oc-mf-field {
    display: flex;
    flex-direction: column;
    gap: var(--oc-space-1);
    margin-bottom: var(--oc-space-3);
}

.oc-mf-label {
    display: flex;
    align-items: baseline;
    gap: var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-text);
}

/* The marker on a field we filled in from what we already knew. CEO decision
   16 is that this set is PREFILLED - which only helps if the merchant can see
   which answers are ours, so they know what to CHECK rather than what to type. */
.oc-mf-prefilled {
    font-size: var(--oc-fs-xs);
    font-weight: 500;
    color: var(--oc-text-muted);
}

.oc-mf-input {
    width: 100%;
    padding: var(--oc-space-2) var(--oc-space-3);
    font: inherit;
    font-size: var(--oc-fs-sm);
    color: var(--oc-text);
    background: var(--oc-surface);
    border: 1px solid var(--oc-border);
    border-radius: var(--oc-radius-sm);
}

.oc-mf-input:focus {
    outline: 2px solid var(--oc-primary);
    outline-offset: 1px;
    border-color: var(--oc-primary);
}

.oc-mf-input:disabled {
    background: var(--oc-surface-muted);
    color: var(--oc-text-muted);
}

.oc-mf-fieldrow {
    display: flex;
    gap: var(--oc-space-3);
}

.oc-mf-fieldrow > .oc-mf-field {
    flex: 1 1 0;
}

.oc-mf-field-narrow {
    flex: 0 1 8rem;
}

.oc-mf-checkline {
    display: flex;
    align-items: center;
    gap: var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    color: var(--oc-text);
}

.oc-mf-field-check {
    margin-bottom: var(--oc-space-3);
}

.oc-mf-subgroup-title {
    margin: var(--oc-space-4) 0 var(--oc-space-2);
    font-size: var(--oc-fs-sm);
    font-weight: 600;
    color: var(--oc-text-muted);
}

.oc-mf-ownerrow {
    display: flex;
    align-items: flex-end;
    gap: var(--oc-space-3);
    padding-bottom: var(--oc-space-2);
    border-bottom: 1px solid var(--oc-border-soft);
    margin-bottom: var(--oc-space-3);
}

.oc-mf-ownerrow > .oc-mf-field {
    flex: 1 1 0;
    margin-bottom: 0;
}

.oc-mf-ownerrow-action {
    flex: 0 0 auto;
    padding-bottom: var(--oc-space-1);
}

.oc-mf-actions-inline {
    display: flex;
    align-items: center;
    gap: var(--oc-space-3);
}

/* Confirmation that an authority matched the address. It keeps its hue in both
   themes - status colour is meaning, not decoration. */
.oc-mf-verified {
    display: inline-flex;
    align-items: center;
    gap: var(--oc-space-1);
    font-size: var(--oc-fs-sm);
    color: var(--oc-emerald-600);
}

.oc-mf-address,
.oc-mf-person {
    margin-bottom: var(--oc-space-2);
}

@media (max-width: 640px) {

    .oc-mf-head-title { font-size: 1.25rem; }

    .oc-mf-card { padding: var(--oc-space-3); }

    .oc-mf-group.is-nested { margin-left: var(--oc-space-2); }

    /* The line's amount drops onto its own line rather than being squeezed into
       a column three characters wide. Indented so it reads as belonging to the
       title above it. */
    .oc-mf-line { flex-wrap: wrap; row-gap: var(--oc-space-1); }

    .oc-mf-line-qty,
    .oc-mf-line-amount { flex: 0 0 auto; }

    .oc-mf-totals-grid { gap: var(--oc-space-2); }

    .oc-mf-fieldpreview-row,
    .oc-mf-service-row { flex-wrap: wrap; row-gap: 2px; }

    .oc-mf-fieldpreview-detail,
    .oc-mf-service-price { text-align: left; }

    /* flex-basis 0, not auto. With `auto` the body's hypothetical size is its
       max-content width, which at 390px exceeds the row and pushes it BELOW the
       radio - leaving the radio alone on a line above the method it selects. A
       zero basis lets it shrink instead, so the radio stays beside its name. */
    .oc-mf-ship-option { flex-wrap: wrap; row-gap: var(--oc-space-1); }

    .oc-mf-ship-body { flex: 1 1 0; }

    /* Every action is full width and at least 44px tall. OcButton's md is 36px,
       and .oc-btn is its own component-scoped class, so a descendant selector
       from this GLOBAL sheet reaches it without ::deep (which is a scoped-CSS
       construct and would do nothing here). */
    .oc-mf-actions { display: block; }

    .oc-mf-actions .oc-btn,
    .oc-mf-actions .oc-mf-paylink,
    .oc-mf-actions .oc-mf-pdf {
        display: flex;
        width: 100%;
        min-height: 44px;
        margin-bottom: var(--oc-space-2);
    }

    /* The form collapses to one field per line. Three-across City/State/ZIP at
       390px gives a two-character ZIP box, which is unusable rather than merely
       tight - and an owner row with a Remove button beside three inputs is
       worse. */
    .oc-mf-fieldrow,
    .oc-mf-ownerrow { flex-wrap: wrap; }

    .oc-mf-fieldrow > .oc-mf-field,
    .oc-mf-ownerrow > .oc-mf-field,
    .oc-mf-field-narrow { flex: 1 1 100%; }

    .oc-mf-ownerrow-action { width: 100%; }

    .oc-mf-actions-inline { display: block; }
}