/*
 * Rental account onboarding (docs/05-FLEETFORGE-INTEGRATION.md §5.9, decision #53): the "Open a rental account"
 * application, /sign/, /upload/ and the text readers. Built on theme.css §22 (forms: .mn-lead-form, .mn-form__*,
 * .mn-check) and the tokens; loaded only where an onboarding block prints (mainland-rentals' block map).
 *
 *  1. The frame and the paused notice   2. Progress   3. Steps and the field grid   4. Choice cards and options
 *  5. Files   6. The signature pad   7. The text reader   8. Summary, consents, privacy   9. Nav, banner, done
 * 10. The contract sheet (/onboarding/sign/)   11. The section tab bar   12. Reduced motion
 */

/* 1. The frame and the paused notice ------------------------------------------------------------------------------ */

.mn-ob { display: grid; gap: var(--wp--preset--spacing--50); max-inline-size: 52rem; margin-inline: auto; }
.mn-ob > * { margin: 0; min-inline-size: 0; }
.mn-ob .mn-lead-form { max-inline-size: none; }
.mn-ob [hidden] { display: none !important; }
.mn-ob-paused,
.mn-ob-noscript,
.mn-ob-state {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 12px 14px;
	padding: 18px 20px;
	border: 1px solid var(--mn-rule);
	border-inline-start: 3px solid var(--wp--preset--color--cyan);
	border-radius: var(--wp--custom--radius--md);
	background: var(--wp--preset--color--white);
	color: var(--mn-text-strong);
}
.mn-ob-paused p,
.mn-ob-state p { margin: 0; }
.mn-ob-paused__title { font-weight: 700; }
.mn-ob-paused__icon { flex: none; inline-size: 22px; block-size: 22px; color: var(--mn-link); }
.mn-ob-state__text { flex: 1 1 18rem; }

/* 2. Progress: numbered dots, the current step labelled; the row wraps on narrow screens (never a scroll box) ------ */

.mn-ob-progress {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	scroll-margin-block-start: calc(var(--mn-sticky-top) + 16px);
}
.mn-ob-progress__step { display: flex; flex: 0 0 auto; }
/* Each step is a button: an earlier step opens at once, a later one once every step before it checks out. The whole
   pill is the target, at least 44 × 44. */
.mn-ob-progress__btn {
	display: flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--wp--custom--target--min);
	min-inline-size: var(--wp--custom--target--min);
	margin: 0;
	padding: 0 10px 0 9px;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--mn-text-muted);
	font: inherit;
	font-size: var(--wp--custom--font-size--meta);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-ob-progress__btn:hover { background: rgba(255, 255, 255, 0.7); color: var(--mn-text-strong); }
.mn-ob-progress__btn:hover .mn-ob-progress__n { border-color: var(--mn-text-strong); }
.mn-ob-progress__btn:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-ob-progress__n {
	display: grid;
	place-items: center;
	inline-size: 26px;
	block-size: 26px;
	border: 1px solid var(--wp--preset--color--line-strong);
	border-radius: 50%;
	background: var(--wp--preset--color--white);
	font-variant-numeric: tabular-nums;
}
.mn-ob-progress__step.is-done .mn-ob-progress__btn { color: var(--mn-text); }
.mn-ob-progress__step.is-done .mn-ob-progress__n { border-color: var(--wp--preset--color--ink-1); background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--white); }
.mn-ob-progress__step[aria-current="step"] .mn-ob-progress__btn { background: var(--wp--preset--color--white); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line-strong); color: var(--mn-text-strong); cursor: default; }
.mn-ob-progress__step[aria-current="step"] .mn-ob-progress__n { border-color: var(--wp--preset--color--cyan-700); background: var(--wp--preset--color--cyan-700); color: var(--wp--preset--color--white); }
/* Nine steps don't fit as labels: dots for the rest, the label for the current step only (the rest stay readable to
   screen readers as the button's name). */
.mn-ob-progress__step:not([aria-current="step"]) .mn-ob-progress__label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mn-ob-progress__step:not([aria-current="step"]) .mn-ob-progress__btn { justify-content: center; padding: 0 9px; }

/* 3. Steps and the field grid: six columns from 600 px (half = 3, third = 2) -------------------------------------- */

.mn-ob-form { display: grid; gap: var(--wp--preset--spacing--60); }
.mn-ob-step { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.mn-ob-step__title { display: block; margin: 0 0 6px; padding: 0; color: var(--mn-text-strong); font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--xx-large); font-weight: 800; letter-spacing: var(--wp--custom--tracking--title); line-height: var(--wp--custom--line-height--title); }
.mn-ob-step__title:focus { outline: none; }
.mn-ob-step__count { display: block; margin-block-end: 6px; color: var(--mn-eyebrow); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
.mn-ob-step__lede { margin: 0 0 4px; color: var(--mn-text); }
.mn-ob-step__fields { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px var(--wp--preset--spacing--40); margin-block-start: var(--wp--preset--spacing--50); }
.mn-ob-step__fields > * { margin: 0; min-inline-size: 0; }
@media (min-width: 600px) {
	.mn-ob-step__fields,
	.mn-ob-signer,
	.mn-ob-sheet__group { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.mn-ob-step__fields > *,
	.mn-ob-signer > *,
	.mn-ob-sheet__group > * { grid-column: 1 / -1; }
	.mn-ob-field--half { grid-column: span 3 !important; }
	.mn-ob-field--third { grid-column: span 2 !important; }
}
.mn-ob-subhead { margin: var(--wp--preset--spacing--30) 0 0; padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid var(--mn-rule); color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--large); }
.mn-ob-step__fields > .mn-ob-subhead:first-child { margin-block-start: 0; padding-block-start: 0; border: 0; }
.mn-ob-note { display: flex; align-items: flex-start; gap: 10px; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); }
.mn-ob-note__icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; color: var(--mn-link); }
.mn-ob-signer { display: grid; gap: 20px var(--wp--preset--spacing--40); }
.mn-ob-signer > * { margin: 0; min-inline-size: 0; }
.mn-ob-field--check .mn-form__hint { padding-inline-start: 36px; }
.mn-ob-field--check .mn-form__hint a { color: var(--mn-link); font-weight: 600; }

/* 4. Choice cards (client type, applicant type, the certificate) and Yes/No options ------------------------------- */

.mn-ob-options { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.mn-ob-field--cards .mn-ob-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 10px; }
.mn-ob-card { position: relative; display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding: 12px 16px; border: 1px solid var(--mn-field-border); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); color: var(--mn-text-strong); font-weight: 600; cursor: pointer; transition: border-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), box-shadow var(--wp--custom--motion--micro) var(--wp--custom--motion--ease); }
.mn-ob-card input { appearance: none; flex: none; inline-size: 20px; block-size: 20px; margin: 0; border: 1px solid var(--mn-field-border); border-radius: 50%; background: var(--wp--preset--color--white); }
.mn-ob-card input:checked { border: 6px solid var(--wp--preset--color--ink-1); }
.mn-ob-card:hover { border-color: var(--mn-text-strong); }
.mn-ob-card:has(input:checked) { border-color: var(--wp--preset--color--ink-1); box-shadow: inset 0 0 0 1px var(--wp--preset--color--ink-1); }
.mn-ob-card:has(input:focus-visible) { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: var(--wp--custom--focus--offset); }
.mn-ob-field.is-invalid .mn-ob-card { border-color: var(--wp--preset--color--error); }

/* 5. Files: one slot per document, its files as rows with a progress bar while they upload ------------------------- */

.mn-ob-file { gap: 10px; padding: 16px; border: 1px dashed var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); }
.mn-ob-file.is-invalid { border-color: var(--wp--preset--color--error); }
.mn-ob-file__list { display: grid; gap: 6px; }
.mn-ob-file__list:empty { display: none; }
.mn-ob-file__item { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0; color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--small); overflow-wrap: anywhere; }
.mn-ob-file__item.is-done::before { content: ""; flex: none; inline-size: 18px; block-size: 18px; background: var(--wp--preset--color--ok); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.mn-ob-file__name { flex: 1 1 12rem; }
.mn-ob-file__item progress { flex: 1 1 8rem; block-size: 6px; accent-color: var(--wp--preset--color--cyan-700); }
.mn-ob-file__remove { min-block-size: var(--wp--custom--target--min); padding: 0 8px; border: 0; background: none; color: var(--mn-link); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mn-ob-file__pick { position: relative; display: inline-flex; align-items: center; justify-self: start; gap: 8px; min-block-size: var(--wp--custom--target--button); padding-block: 0; cursor: pointer; }
.mn-ob-file__pick input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
.mn-ob-file__pick:has(input:focus-visible) { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: var(--wp--custom--focus--offset); }
.mn-ob-file__icon { inline-size: 18px; block-size: 18px; }
.mn-ob-file__later { min-block-size: var(--wp--custom--target--min); }

/* 6. The signature pad ----------------------------------------------------------------------------------------- */

.mn-ob-sig { display: grid; gap: 10px; }
.mn-ob-sig__modes { display: inline-flex; justify-self: start; padding: 3px; border: 1px solid var(--wp--preset--color--line-strong); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--white); }
.mn-ob-sig__mode { position: relative; display: inline-flex; align-items: center; min-block-size: 40px; padding: 0 16px; border-radius: 4px; color: var(--mn-text); font-weight: 600; cursor: pointer; }
.mn-ob-sig__mode input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.mn-ob-sig__mode:has(input:checked) { background: var(--wp--preset--color--ink-1); color: var(--wp--preset--color--white); }
.mn-ob-sig__mode:has(input:focus-visible) { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-ob-sig__draw { position: relative; display: grid; gap: 8px; }
.mn-ob-sig__canvas { inline-size: 100%; block-size: 200px; border: 1px solid var(--mn-field-border); border-radius: var(--wp--custom--radius--sm); background: var(--wp--preset--color--white) linear-gradient(transparent calc(100% - 52px), var(--wp--preset--color--line) calc(100% - 52px), var(--wp--preset--color--line) calc(100% - 51px), transparent calc(100% - 51px)); touch-action: none; cursor: crosshair; }
.mn-ob-sig.is-invalid .mn-ob-sig__canvas { border-color: var(--wp--preset--color--error); }
.mn-ob-sig__clear { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; min-block-size: var(--wp--custom--target--min); padding: 0 12px; border: 0; border-radius: var(--wp--custom--radius--sm); background: rgba(255, 255, 255, 0.9); color: var(--mn-link); font: inherit; font-weight: 600; cursor: pointer; }
.mn-ob-sig__type { display: grid; gap: 8px; }
.mn-ob-sig__preview { min-block-size: 64px; margin: 0; padding: 4px 12px; border-block-end: 1px solid var(--wp--preset--color--line-strong); color: var(--wp--preset--color--ink-1); font-family: var(--wp--preset--font-family--accent, "Newsreader"), serif; font-size: 2.6rem; font-style: italic; line-height: 1.3; overflow-wrap: anywhere; }

/* 7. The text reader: in a form, a focusable scroll box; on its own page, plain prose -------------------------- */

.mn-ob-doc { display: grid; gap: 12px; }
.mn-ob-doc > * { margin: 0; }
.mn-ob-doc__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; }
.mn-ob-doc__title { margin: 0; font-size: var(--wp--preset--font-size--x-large); }
.mn-ob-doc__meta { margin: 0; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); font-variant-numeric: tabular-nums; }
.mn-ob-doc__body { color: var(--mn-text); line-height: var(--wp--custom--line-height--body); }
.mn-ob-doc__body > * { max-inline-size: 70ch; }
.mn-ob-doc__body :is(h3, h4, h5) { margin: 1.4em 0 0.4em; font-size: var(--wp--preset--font-size--large); }
.mn-ob-doc__body .mn-ob-doc__sub { margin: 1em 0 0.3em; font-size: var(--wp--preset--font-size--medium); }
.mn-ob-doc__body p,
.mn-ob-doc__body ul { margin: 0 0 0.8em; }
.mn-ob-doc--scroll .mn-ob-doc__body { max-block-size: min(26rem, 60vh); padding: 18px 20px; overflow-y: auto; border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); overscroll-behavior: contain; }
.mn-ob-doc--scroll .mn-ob-doc__body:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-ob-doc__lessor { margin-block-end: 1em; }
.mn-ob-doc__lessor p { margin: 0; }
.mn-ob-doc__label { color: var(--mn-eyebrow); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: var(--wp--custom--tracking--label); text-transform: uppercase; }
.mn-ob-doc__payment { display: grid; gap: 4px; margin: 0 0 1em; }
.mn-ob-doc__payment div { display: grid; grid-template-columns: minmax(0, 10rem) minmax(0, 1fr); gap: 12px; }
.mn-ob-doc__payment dt { color: var(--mn-text-strong); font-weight: 600; }
.mn-ob-doc__payment dd { margin: 0; }
.mn-ob-doc__terms { padding-inline-start: 1.4em; }
.mn-ob-draft { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--wp--preset--color--warn) 55%, transparent); border-radius: var(--wp--custom--radius--sm); background: color-mix(in srgb, var(--wp--preset--color--warn) 10%, var(--wp--preset--color--white)); color: var(--mn-text-strong); font-size: var(--wp--preset--font-size--small); }
.mn-ob-draft__icon { flex: none; inline-size: 18px; block-size: 18px; margin-block-start: 1px; }
.mn-ob-reader { max-inline-size: 46rem; }
/* The reader on its own page (S014): the text on a white paper card beside a sticky panel (status, version, the
   fingerprint, the phone). */
/* The reader band follows its section head's mist band, whose gradient ends in paper: no second top padding. */
:is(.mn-band--mist, .is-style-band-mist) + .mn-ob-band.mn-band--paper { padding-block-start: 0; }
.mn-ob-reader--side { display: grid; gap: var(--wp--preset--spacing--50); max-inline-size: none; }
.mn-ob-paper { padding: clamp(22px, 1rem + 2.4vw, 48px); border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--white); box-shadow: var(--mn-shadow-card); }
.mn-ob-paper .mn-ob-doc__head { padding-block-end: 14px; border-block-end: 1px solid var(--mn-rule); }
.mn-ob-paper .mn-ob-doc__body { font-size: var(--wp--preset--font-size--medium); }
.mn-ob-reader__side { display: grid; align-content: start; gap: 14px; padding: 22px; border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--white); box-shadow: var(--mn-shadow-card); }
.mn-ob-reader__side > * { margin: 0; }
.mn-ob-reader__facts { display: grid; margin: 0; border-block-start: 1px solid var(--mn-rule); }
.mn-ob-reader__facts div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 44px; padding-block: 6px; border-block-end: 1px solid var(--mn-rule); }
.mn-ob-reader__facts dt { color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }
.mn-ob-reader__facts dd { margin: 0; color: var(--mn-text-strong); font-size: var(--wp--custom--font-size--ui); font-weight: 600; text-align: end; }
.mn-ob-reader__status.is-draft { border-color: color-mix(in srgb, var(--wp--preset--color--warn) 55%, transparent); background: color-mix(in srgb, var(--wp--preset--color--warn) 10%, var(--wp--preset--color--white)); color: var(--wp--preset--color--warn); }
.mn-ob-reader__ask { color: var(--mn-text); font-size: var(--wp--preset--font-size--small); line-height: 1.5; }
.mn-ob-reader__actions { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--20); }
.mn-ob-reader__actions .mn-btn { flex: 1 1 auto; }
@media (min-width: 960px) {
	.mn-ob-reader--side { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: start; column-gap: var(--wp--preset--spacing--60); }
	.mn-ob-reader__side { position: sticky; inset-block-start: calc(var(--mn-sticky-top) + 16px); }
}

/* 8. Summary, consents and the privacy panel ---------------------------------------------------------------------- */

.mn-ob-summary { display: grid; gap: var(--wp--preset--spacing--40); }
.mn-ob-summary > .mn-ob-subhead { margin: 0; padding: 0; border: 0; }
.mn-ob-summary__step { padding: 16px 18px; border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); }
.mn-ob-summary__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mn-ob-summary__head h4 { margin: 0; font-size: var(--wp--preset--font-size--medium); }
.mn-ob-summary__edit { min-block-size: var(--wp--custom--target--min); padding: 0 6px; border: 0; background: none; color: var(--mn-link); font: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mn-ob-summary dl,
.mn-ob-rows { display: grid; gap: 6px; margin: 8px 0 0; }
.mn-ob-summary dl div,
.mn-ob-rows div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 16px; }
.mn-ob-summary dt,
.mn-ob-rows dt { color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); }
.mn-ob-summary dd,
.mn-ob-rows dd { margin: 0; color: var(--mn-text-strong); overflow-wrap: anywhere; }
@media (min-width: 600px) {
	.mn-ob-summary dl div,
	.mn-ob-rows div { grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); }
	.mn-ob-summary dt,
	.mn-ob-rows dt { font-size: var(--wp--preset--font-size--small); }
}
.mn-ob-consents { display: grid; gap: 4px; }
.mn-ob-consents .mn-form__field { gap: 0; }
.mn-ob-consents .mn-check { align-items: flex-start; padding-block: 10px 0; line-height: 1.45; } /* the row keeps .mn-check's 44 px target */
.mn-ob-consents .mn-check input { margin-block-start: -2px; }
.mn-ob-pipa { border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); }
.mn-ob-pipa summary { display: flex; align-items: center; gap: 10px; min-block-size: var(--wp--custom--target--min); padding: 8px 16px; color: var(--mn-text-strong); font-weight: 600; cursor: pointer; }
.mn-ob-pipa summary:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-ob-pipa__icon { inline-size: 18px; block-size: 18px; color: var(--mn-link); }
.mn-ob-pipa ul { margin: 0; padding: 0 20px 16px 40px; color: var(--mn-text); font-size: var(--wp--preset--font-size--small); }
.mn-ob-pipa li + li { margin-block-start: 6px; }

/* 9. Nav, the banner and the done screen -------------------------------------------------------------------------- */

.mn-ob-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding-block-start: var(--wp--preset--spacing--40); border-block-start: 1px solid var(--mn-rule); }
.mn-ob-nav .mn-ob-next { margin-inline-start: auto; }
.mn-ob-saved { flex: 1 0 100%; order: 3; margin: 0; color: var(--mn-text-muted); font-size: var(--wp--custom--font-size--meta); text-align: end; }
.mn-ob-banner { display: grid; gap: 12px; justify-items: start; padding: 16px 18px; border: 1px solid var(--wp--preset--color--error); border-inline-start-width: 3px; border-radius: var(--wp--custom--radius--md); background: color-mix(in srgb, var(--wp--preset--color--error) 6%, var(--wp--preset--color--white)); color: var(--mn-text-strong); }
.mn-ob-banner p { margin: 0; }
.mn-ob-done { display: grid; justify-items: start; gap: 12px; padding: clamp(22px, 1rem + 2.4vw, 40px); border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--lg); background: var(--wp--preset--color--white); box-shadow: var(--mn-shadow-card); }
.mn-ob-done:focus { outline: none; }
.mn-ob-done > * { margin: 0; }
.mn-ob-done__icon { inline-size: 40px; block-size: 40px; color: var(--wp--preset--color--ok); }
.mn-ob-done__title { font-size: var(--wp--preset--font-size--xx-large); }
.mn-ob-done__ref { color: var(--mn-text-strong); font-weight: 700; font-variant-numeric: tabular-nums; }
.mn-ob-done__later { display: grid; justify-items: start; gap: 8px; padding: 16px 18px; border: 1px solid var(--mn-rule); border-inline-start: 3px solid var(--wp--preset--color--cyan); border-radius: var(--wp--custom--radius--md); }
.mn-ob-done__later > * { margin: 0; }
.mn-ob-done__next { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.3em; color: var(--mn-text); }
.mn-ob-done__links { display: flex; flex-wrap: wrap; gap: 12px; }
.mn-ob-done .mn-ob-subhead { justify-self: stretch; margin: 0; }

/* The quiet secondary button (Back, Choose a file, Try again, the done screen's second link): white, a 3:1 border. */
.mn-ob .wp-element-button.is-style-outline {
	border: 1px solid var(--wp--preset--color--line-strong);
	background: var(--wp--preset--color--white);
	box-shadow: none;
	color: var(--mn-text-strong);
}
.mn-ob .wp-element-button.is-style-outline:hover { border-color: var(--mn-text-strong); background: var(--wp--preset--color--white); color: var(--mn-text-strong); }

/* 10. The contract sheet on /sign/ -------------------------------------------------------------------------------- */

.mn-ob-sign { gap: var(--wp--preset--spacing--50); }
.mn-ob-sign__title { margin: 0; font-size: var(--wp--preset--font-size--xx-large); }
.mn-ob-sign__ref { margin: -8px 0 0; color: var(--mn-text-muted); font-size: var(--wp--preset--font-size--small); }
.mn-ob-sign__sheet { display: grid; gap: var(--wp--preset--spacing--40); }
.mn-ob-sheet__group { display: grid; gap: 12px var(--wp--preset--spacing--40); }
.mn-ob-sheet__group > .mn-ob-subhead { margin: 0; }
.mn-ob-sheet__scroll { overflow-x: auto; border: 1px solid var(--mn-rule); border-radius: var(--wp--custom--radius--md); background: var(--wp--preset--color--white); }
.mn-ob-sheet__scroll:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-ob-sheet__table { inline-size: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--small); }
.mn-ob-sheet__table th,
.mn-ob-sheet__table td { padding: 10px 12px; border-block-end: 1px solid var(--mn-rule); text-align: start; vertical-align: top; }
.mn-ob-sheet__table th { color: var(--mn-text-muted); font-weight: 600; white-space: nowrap; }
.mn-ob-sheet__table tr:last-child td { border-block-end: 0; }
.mn-ob-sheet__table .is-num { font-variant-numeric: tabular-nums; text-align: end; white-space: nowrap; }
.mn-ob-sheet__totals .mn-ob-rows div:last-child dd { font-weight: 800; }
.mn-ob-sheet__notes { margin: 0; color: var(--mn-text); }
.mn-ob-upload { display: grid; gap: var(--wp--preset--spacing--40); }
.mn-ob-upload > * { margin: 0; }
.mn-ob-upload__slots { display: grid; gap: var(--wp--preset--spacing--40); }

/* 11. The section tab bar (mainland/onboarding-tabs, as on Northland): under the page hero, one row of pills that
   wraps on narrow screens (never a sideways scroll box); the current page is the white pill with the cyan rule. -- */

/* A full-width strip (a band without the band padding), so the page flow never narrows it to the reading width. */
.mn-band.mn-ob-tabs { position: relative; padding-block: 0; border-block-end: 1px solid var(--mn-rule); background: var(--wp--preset--color--paper); }
/* The band after the strip keeps its full top padding: theme.css's seam collapse (two light bands share one padding)
   would otherwise zero it, because the strip reads as a light band. */
.mn-flow > .mn-band.mn-ob-tabs + .mn-band.mn-band { padding-block-start: var(--wp--custom--section); border-block-start: 0; }
.mn-flow > .mn-band.mn-ob-tabs + .mn-band.mn-band--tight { padding-block-start: var(--wp--preset--spacing--70); }
.mn-ob-tabs__list { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 12px 0; list-style: none; }
.mn-ob-tabs__list li { margin: 0; }
.mn-ob-tabs__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-block-size: var(--wp--custom--target--min);
	padding: 0 14px;
	border-radius: var(--wp--custom--radius--pill);
	color: var(--mn-text);
	font-size: var(--wp--custom--font-size--ui);
	font-weight: 600;
	text-decoration: none;
	transition: background-color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease), color var(--wp--custom--motion--micro) var(--wp--custom--motion--ease);
}
.mn-ob-tabs__link:hover { background: var(--wp--preset--color--white); color: var(--mn-text-strong); }
.mn-ob-tabs__link:focus-visible { outline: var(--wp--custom--focus--width) solid var(--mn-focus); outline-offset: 2px; }
.mn-ob-tabs__link[aria-current="page"] { background: var(--wp--preset--color--white); box-shadow: inset 0 0 0 1px var(--wp--preset--color--line-strong), inset 0 -2px 0 var(--wp--preset--color--cyan); color: var(--mn-text-strong); }
.mn-ob-tabs__icon { flex: none; inline-size: 18px; block-size: 18px; color: var(--mn-link); }
@media (max-width: 599px) {
	.mn-ob-tabs__link { padding: 0 10px; font-size: var(--wp--custom--font-size--meta); }
	.mn-ob-tabs__icon { display: none; }
}

/* 12. Reduced motion: nothing animates ----------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.mn-ob-card,
	.mn-ob-progress__btn,
	.mn-ob-tabs__link { transition: none; }
}