/* The approved look, copied from docs/product/wireframes/wireframes.css on
 * 17 October 2026 and owned by the application from here on.
 *
 * Copied rather than shared, and the reason is the point: one of those two
 * files is a fixed specification and the other is a product that changes. A
 * shared file would make every change to either one a change to both.
 *
 * Two kinds of edit were made while copying, and no others:
 *   - the prototype chrome is gone -- the bar that announces it is a
 *     prototype, and the role switcher, which is a demonstration control
 *     rather than a product one;
 *   - rules for <progress> and <meter> are added at the end, because the
 *     prototype drew those seven bars with inline style attributes and this
 *     application serves a content security policy that refuses them.
 */
:root {
  --ink: #153a35;
  --muted: #68766f;
  --canvas: #f3f4ec;
  --panel: #ffffff;
  --line: #dfe4da;
  --green: #164b43;
  --green-soft: #e8f1e9;
  --orange: #de6d35;
  --orange-soft: #fff0e6;
  --blue: #2563a8;
  --blue-soft: #eaf2fb;
  --red: #a33a3a;
  --red-soft: #fbecec;
  --shadow: 0 18px 55px rgba(24, 56, 48, .08);
  --radius: 16px;
}

* { box-sizing: border-box; }
html { background: var(--canvas); scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--canvas); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { font: inherit; }
/* A control never reaches past the box it is in. `input[type="file"]` is the
   one that forced this: Chromium gives it an intrinsic width wide enough to
   hold the button and the filename, and it does not shrink — so the import
   screen's file field reached six pixels past a 320-pixel screen, inside a
   panel that clipped it. Found by DU9's acceptance suite, which is the first
   thing that measured every screen at every width. `max-width` rather than
   `width` so that a field free to be narrower still is. */
button, input, select, textarea { max-width: 100%; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid rgba(37, 99, 168, .28); outline-offset: 2px; }
#screen-title:focus-visible { outline: 3px solid rgba(37, 99, 168, .28); outline-offset: 5px; }
.table-wrap:focus-visible { outline: 3px solid rgba(37, 99, 168, .28); outline-offset: 3px; }
button { color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

.app-shell { min-height: calc(100vh - 36px); display: grid; grid-template-columns: 258px minmax(0, 1fr); }

.sidebar { position: sticky; top: 0; height: calc(100vh - 36px); padding: 26px 18px 18px; display: flex; flex-direction: column; gap: 20px; overflow-y: auto; background: #173a35; color: #eef5f1; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 7px; color: white; text-decoration: none; }
.brand-mark { width: 39px; height: 39px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.25); border-radius: 11px; color: #ffd7be; font: 700 17px Georgia, serif; }
.brand strong, .brand small, .sidebar-foot strong, .sidebar-foot small { display: block; }
.brand strong { font: 700 18px Georgia, serif; letter-spacing: -.02em; }
.brand small, .sidebar-foot small { margin-top: 2px; color: #aabeb8; font-size: 10px; }

.nav-group { display: flex; flex-direction: column; gap: 4px; }
.nav-label { margin: 10px 10px 5px; color: #87a39b; font-size: 9px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.nav-item { width: 100%; display: flex; align-items: center; gap: 10px; border: 0; border-radius: 10px; padding: 10px 11px; background: transparent; color: #cfddd8; text-align: left; font-size: 12px; cursor: pointer; }
.nav-item span { width: 21px; color: #88a69d; text-align: center; font-weight: 800; }
.nav-item:hover { background: rgba(255,255,255,.06); }
.nav-item.is-active { color: #153a35; background: #f5f4eb; font-weight: 750; }
.nav-item.is-active span { color: var(--orange); }
.sidebar-foot { margin-top: auto; padding: 14px 8px 2px; display: flex; align-items: center; gap: 10px; border-top: 1px solid rgba(255,255,255,.12); font-size: 11px; }
.avatar { width: 33px; height: 33px; display: grid; place-items: center; border-radius: 50%; color: var(--ink); background: #ffd8bf; font-size: 10px; font-weight: 850; }

.main { min-width: 0; padding: 32px clamp(22px, 4vw, 58px) 70px; }
.page-header { max-width: 1230px; margin: 0 auto 28px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.page-header h1 { margin: 5px 0 8px; font-family: Georgia, serif; font-size: clamp(31px, 4vw, 43px); line-height: 1; letter-spacing: -.04em; }
.page-header p { margin: 0; color: var(--muted); font-size: 13px; }
.eyebrow { margin: 0 !important; color: #70877f !important; font-size: 9px !important; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.header-actions, .toolbar-actions, .form-actions, .approval-actions { display: flex; align-items: center; gap: 9px; }
.screen { max-width: 1230px; margin: 0 auto; animation: enter .18s ease both; }
@keyframes enter { from { opacity: 0; transform: translateY(4px); } }

.button { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 9px; padding: 10px 15px; text-decoration: none; font-size: 11px; font-weight: 800; cursor: pointer; }
.button-primary { color: white; background: var(--green); box-shadow: 0 7px 16px rgba(22, 75, 67, .15); }
.button-primary:hover { background: #0f4038; }
.button-quiet { border-color: var(--line); color: var(--ink); background: white; }
.button-wide { width: 100%; }
.button:disabled { cursor: not-allowed; opacity: .48; box-shadow: none; }
.text-button { border: 0; padding: 5px; color: var(--blue); background: transparent; font-size: 11px; font-weight: 800; cursor: pointer; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); border-radius: 9px; background: white; cursor: pointer; }
.row-actions { display: flex; align-items: center; gap: 8px; }

.panel, .panel-flat, .state-card, .welcome-strip, .calculation-callout, .history-note { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.panel { padding: 22px; box-shadow: 0 8px 30px rgba(24, 56, 48, .035); }
.panel-flat { padding: 12px; }
.panel-head { margin-bottom: 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.panel-head h2, .welcome-strip h2, .auth-intro h2, .state-card h2, .guest-copy h2 { margin: 5px 0 6px; font-family: Georgia, serif; font-size: 24px; letter-spacing: -.025em; }
.panel-head p, .welcome-strip p, .tour-copy p, .guest-copy p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }

.status-chip { width: fit-content; display: inline-flex; align-items: center; gap: 5px; padding: 5px 8px; border-radius: 999px; font-size: 9px; font-weight: 850; letter-spacing: .02em; white-space: nowrap; }
.status-live { color: #215b40; background: var(--green-soft); }
.status-pending, .status-warning { color: #925020; background: var(--orange-soft); }
.status-blue { color: #245f98; background: var(--blue-soft); }
.status-muted { color: #62716a; background: #eff1ec; }
.status-danger { color: var(--red); background: var(--red-soft); }
.positive { color: #2c7a4b !important; }
.warning-text { color: #b25a23 !important; }
.danger-text { color: var(--red) !important; }

.welcome-strip { margin-bottom: 18px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 22px; background: linear-gradient(115deg, #fbfcf7 0%, #edf2e7 100%); }
.stat-grid { margin-bottom: 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.stat-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-card { min-height: 125px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.stat-card small, .money-row span, td small, .code-preview small, .code-preview span, .state-details small, .meta-row, .formula small, .payment-equation small, .import-source small, .summary-strip small { display: block; color: var(--muted); font-size: 10px; }
.stat-card strong { display: block; margin: 12px 0 7px; font: 700 28px Georgia, serif; letter-spacing: -.03em; }
.stat-card span { color: var(--muted); font-size: 10px; }
.accent-orange { border-top: 3px solid var(--orange); }
.accent-blue { border-top: 3px solid var(--blue); }
.accent-green { border-top: 3px solid #397b55; }
.content-grid { display: grid; gap: 16px; }
.content-grid.two-one { grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); }
.attention-list > div { padding: 13px 0; display: flex; align-items: center; gap: 12px; border-top: 1px solid #edf0e9; }
.attention-list > div:first-child { border-top: 0; }
.attention-list > div > div { flex: 1; }
.attention-list strong, .attention-list small { display: block; }
.attention-list strong { font-size: 12px; }
.attention-list small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.attention-icon { width: 31px; height: 31px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 9px; font-size: 11px; font-weight: 900; }
.attention-icon.amber { color: #9d5420; background: var(--orange-soft); }
.attention-icon.blue { color: #245f98; background: var(--blue-soft); }
.attention-icon.green { color: #267149; background: var(--green-soft); }
.income-mini .button { margin-top: 14px; }
.money-row { padding: 12px 0; display: flex; justify-content: space-between; border-bottom: 1px solid #edf0e9; }
.money-row strong { font: 700 18px Georgia, serif; }

.auth-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 50px; align-items: center; padding: 24px 4vw; }
.auth-layout > * { min-width: 0; }
.auth-intro h2 { max-width: 520px; margin-top: 18px; font-size: clamp(32px, 4vw, 50px); }
.auth-intro > p { max-width: 520px; color: var(--muted); line-height: 1.7; }
.progress-list { margin: 28px 0 0; padding: 0; list-style: none; }
.progress-list li { display: flex; align-items: center; gap: 11px; padding: 9px 0; color: var(--muted); }
.progress-list li > span { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 10px; }
.progress-list strong, .progress-list small { display: block; }
.progress-list strong { color: var(--ink); font-size: 11px; }
.progress-list small { margin-top: 2px; font-size: 10px; }
.progress-list .is-current > span { color: white; border-color: var(--green); background: var(--green); }
.form-panel { display: grid; gap: 15px; }
/* The contact card carries its own label layout rather than inheriting the
   registration form's. The rule was scoped to `.form-panel`, so the same
   component rendered on any other screen had its labels fall back to inline
   and its fields collide with their own help text. */
.form-panel label, .contact-card label { display: grid; gap: 7px; color: #304d46; font-size: 10px; font-weight: 800; }
.form-panel input, .form-panel select, .contact-card input, .toolbar select, .toolbar input { width: 100%; min-height: 43px; border: 1px solid #d7ddd4; border-radius: 9px; padding: 10px 12px; color: var(--ink); background: #fcfdf9; font-size: 12px; }
.form-panel label small, .contact-card label small { color: var(--muted); font-weight: 500; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.check { grid-template-columns: auto 1fr !important; align-items: start; line-height: 1.5; }
.check input { width: 16px; min-height: 16px; margin: 2px 0 0; }
.optional { color: var(--muted); font-weight: 500; }
.form-note, .privacy-note { color: var(--muted); font-size: 10px; line-height: 1.6; }

.registration-form { min-width: 0; }
.registration-status { margin: 0; }
.registration-status.is-blocked { color: #925020; font-weight: 750; }
.registration-status.is-ready { color: #215b40; font-weight: 750; }
.contacts-heading { margin-top: 4px; padding-top: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid #edf0e9; }
.contacts-heading > div { min-width: 0; }
.contacts-heading h3 { margin: 5px 0 4px; font: 700 18px Georgia, serif; letter-spacing: -.025em; }
.contacts-heading small { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; }
.contact-list { display: grid; gap: 12px; }
.contact-card { min-width: 0; min-inline-size: 0; margin: 0; padding: 15px; display: grid; gap: 12px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcf8; }
.contact-card[data-contact-role="primary"] { border-color: #bcccc0; background: #f6f9f4; }
.contact-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.contact-card-identity { min-width: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contact-card-identity strong { font-size: 11px; }
.contact-card-actions { display: flex; align-items: center; gap: 4px; }
.mobile-verification { display: grid; gap: 10px; }
.mobile-row, .otp-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10px; }
.mobile-row > .button, .otp-panel > .button { margin-top: 19px; }
.verification-line { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; color: var(--muted); font-size: 10px; line-height: 1.5; }
.verification-line > span:last-child { min-width: 0; }
.otp-panel { padding: 13px; border: 1px dashed #b4c3b6; border-radius: 11px; background: white; }
.otp-panel > small { grid-column: 1 / -1; color: var(--muted); font-size: 9px; line-height: 1.5; }
.otp-panel code { padding: 1px 5px; border-radius: 5px; background: #eef1ea; font-size: 9px; }

.sign-in-form { min-width: 0; }
.two-factor-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.two-factor-layout > * { min-width: 0; }
.two-factor-layout .qr-placeholder { margin-top: 4px; }
.two-factor-layout .plain-list { margin-bottom: 0; }
.recovery-panel { display: grid; gap: 11px; padding: 15px; border: 1px dashed #b4c3b6; border-radius: 12px; background: #f7faf5; }
.recovery-panel > strong { font-size: 12px; }
.recovery-panel .form-note { margin: 0; }
.recovery-codes { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; list-style: none; }
.recovery-panel .recovery-codes { margin: 0; }
.recovery-codes li { padding: 9px 8px; border: 1px solid var(--line); border-radius: 8px; background: white; font: 700 11px ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .03em; text-align: center; }
.recovery-codes li.is-used { color: var(--muted); background: #f2f4ef; text-decoration: line-through; }
.security-actions { margin-top: 16px; display: flex; gap: 9px; flex-wrap: wrap; }
.security-actions .button { flex: 1 1 auto; }
.two-factor-card { max-width: 480px; }
.two-factor-card .form-panel { margin-top: 22px; text-align: left; }
.challenge-form .text-button { justify-self: center; }
.state-card { max-width: 650px; margin: 40px auto; padding: 42px; text-align: center; box-shadow: var(--shadow); }
.state-icon { width: 58px; height: 58px; margin: 0 auto 18px; display: grid; place-items: center; border-radius: 18px; color: #9d5420; background: var(--orange-soft); font-size: 24px; }
.state-card .status-chip { margin: 0 auto; }
.state-card > p { max-width: 500px; margin: 10px auto 26px; color: var(--muted); line-height: 1.7; }
.state-details { margin-bottom: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.state-details > div { padding: 13px; border-radius: 10px; background: #f5f6f1; }
.state-details strong { display: block; margin-top: 5px; font-size: 11px; }
.unavailable-states { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.unavailable-states h2 { margin: 12px 0 5px; font: 700 18px Georgia, serif; }
.unavailable-states p { margin: 0 0 12px; color: var(--muted); font-size: 10px; line-height: 1.6; }

.toolbar { margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.search-field { min-width: min(360px, 100%); position: relative; }
.search-field span { position: absolute; left: 12px; top: 11px; color: var(--muted); }
.search-field input { padding-left: 34px; }
.toolbar select { min-width: 170px; }
.segmented { display: flex; gap: 3px; padding: 3px; border-radius: 9px; background: #ecefe8; }
.segmented button { border: 0; border-radius: 7px; padding: 9px 13px; color: var(--muted); background: transparent; font-size: 10px; font-weight: 800; }
.segmented button.is-active { color: var(--ink); background: white; box-shadow: 0 2px 8px rgba(24,56,48,.08); }
.table-wrap { max-width: 100%; padding: 0; overflow-x: auto; contain: inline-size; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th { padding: 13px 16px; color: #738079; background: #f6f7f3; text-align: left; font-size: 9px; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
td { padding: 15px 16px; border-top: 1px solid #edf0e9; vertical-align: middle; white-space: nowrap; }
td strong, td small { display: block; }
td small { margin-top: 4px; }
code { padding: 5px 7px; border-radius: 6px; color: #264d46; background: #edf2eb; font: 750 10px ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .04em; }
.readiness { width: 86px; height: 5px; display: block; margin-bottom: 7px; overflow: hidden; border-radius: 99px; background: #e9ece6; }
.readiness i { width: var(--value); height: 100%; display: block; border-radius: inherit; background: var(--green); }
.privacy-note { margin: 12px 2px; }

.address-control { min-width: 0; display: grid; gap: 7px; }
.address-search-row { position: relative; }
.address-search-row input { padding-right: 44px; }
.address-clear { width: 30px; height: 30px; position: absolute; top: 7px; right: 7px; border: 0; border-radius: 7px; color: var(--muted); background: #edf0e9; cursor: pointer; font-size: 18px; line-height: 1; }
.address-options { max-height: 245px; margin: 0; padding: 5px; overflow-y: auto; border: 1px solid #cfd8ce; border-radius: 11px; background: white; box-shadow: 0 14px 35px rgba(24, 56, 48, .12); list-style: none; }
.address-option { padding: 11px 12px; border-radius: 8px; cursor: pointer; }
.address-option + .address-option { border-top: 1px solid #edf0e9; }
.address-option:hover, .address-option.is-active, .address-option[aria-selected="true"] { background: #edf4ed; }
.address-option strong, .address-option small { display: block; }
.address-option strong { font-size: 11px; }
.address-option small { margin-top: 3px; color: var(--muted); font-size: 9px; font-weight: 500; }
.address-status { min-height: 16px; margin: 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.address-status.is-error { color: var(--red); font-weight: 700; }
/* A wait in progress. The dot is decorative — the state is carried by the text,
   because status is never communicated by colour or by motion alone. The
   stylesheet's global reduced-motion reset already stops the animation with
   `!important` on every pseudo-element, so only the resting opacity is set
   here; repeating `animation: none` would read as the authority and not be it. */
.address-status.is-searching { font-weight: 700; }
.address-status.is-searching::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--muted); vertical-align: middle; animation: searching-pulse 1s ease-in-out infinite; }
@keyframes searching-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .address-status.is-searching::before { opacity: .7; }
}
/* These blocks hold states the happy path cannot reach. The container is a
   two-column grid, so a group with one panel used to render half-width. */
.unavailable-states:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.address-choice { display: flex; align-items: center; gap: 11px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.address-choice.is-selected { border-color: #7aa092; background: #f3f8f4; }
.address-choice > div { flex: 1; }
.address-choice strong, .address-choice small { display: block; }
.address-choice small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.map-pin { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 10px; color: var(--green); background: white; }
.form-actions { justify-content: flex-end; padding-top: 4px; }
.explainer { align-self: start; }
.code-preview { margin: 15px 0; padding: 16px; border-radius: 12px; background: #f1f4ed; }
.code-preview strong { display: block; margin: 7px 0 4px; font: 700 18px Georgia, serif; }
.qr-placeholder { aspect-ratio: 1; max-width: 180px; margin: 18px auto; display: grid; place-items: center; align-content: center; gap: 6px; border: 1px dashed #9aa99f; border-radius: 15px; background: #fafbf7; }
.qr-placeholder span { font-size: 50px; }
.qr-placeholder small { color: var(--muted); font-size: 9px; }
.plain-list { padding-left: 18px; color: var(--muted); font-size: 11px; line-height: 1.8; }

.stepper { margin: 0 0 15px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; }
.stepper li { position: relative; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; font-weight: 750; }
.stepper li::after { content: ""; height: 1px; position: absolute; left: 33px; right: 8px; bottom: -7px; background: #d7ddd4; }
.stepper li span { width: 24px; height: 24px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; background: white; font-size: 9px; }
.stepper li.done span, .stepper li.active span { color: white; border-color: var(--green); background: var(--green); }
.stepper li.active { color: var(--ink); }
.summary-strip, .import-source { margin: 24px 0 14px; padding: 15px 18px; display: flex; align-items: center; gap: clamp(18px, 5vw, 65px); border: 1px solid var(--line); border-radius: 13px; background: white; }
.summary-strip strong, .import-source strong { display: block; margin-top: 5px; font-size: 12px; }
.commit-bar { padding: 15px 18px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); background: #fbfcf8; }
.commit-bar p { margin: 0; }
.commit-bar strong, .commit-bar small { display: block; }
.commit-bar small { margin-top: 3px; color: var(--muted); font-size: 10px; }

.template-banner { margin-bottom: 14px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #c6d3e2; border-radius: 11px; background: #f2f6fb; }
.template-banner > div { flex: 1; min-width: 0; }
.template-banner small { display: block; color: var(--muted); font-size: 10px; line-height: 1.5; }
.template-banner strong { display: block; margin: 2px 0 3px; font-size: 12px; }
.template-mark { width: 30px; height: 30px; flex: none; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: #dde8f4; font-size: 14px; }
@media (max-width: 600px) { .template-banner { flex-wrap: wrap; } .template-banner > .button { width: 100%; } }

.scope-banner { margin-bottom: 14px; padding: 12px 15px; display: flex; align-items: center; gap: 12px; border: 1px solid #c3d2c6; border-radius: 11px; background: #f2f7f2; }
.scope-banner > div { flex: 1; min-width: 0; }
.scope-banner small { display: block; color: var(--muted); font-size: 10px; }
.scope-banner strong { display: block; margin-top: 3px; font-size: 13px; }
.scope-mark { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 9px; color: var(--green); background: white; font-size: 12px; }
.grid-legend { margin: 0 0 13px; padding: 0; display: flex; gap: 15px; flex-wrap: wrap; list-style: none; color: var(--muted); font-size: 10px; }
.grid-legend li { display: flex; align-items: center; gap: 7px; }
.swatch { width: 12px; height: 12px; flex: 0 0 auto; border: 1px solid; border-radius: 3px; }
.swatch.green { border-color: #7aa092; background: #e6f1e7; }
.swatch.amber { border-color: #d9a441; background: #fdf4e3; }
.swatch.red { border-color: var(--red); background: #fdeeea; }
.swatch.blue { border-color: #8fb3d6; background: #f1f7fc; }
.grid-toolbar { margin-bottom: 13px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.filter-chips { display: flex; gap: 7px; flex-wrap: wrap; }
.filter-chip { border: 1px solid var(--line); border-radius: 999px; padding: 8px 13px; background: white; color: #4c5e52; font-size: 11px; font-weight: 750; cursor: pointer; }
.filter-chip[aria-pressed="true"] { color: white; border-color: var(--green); background: var(--green); }
.grid-progress { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; }
.progress-track { width: 104px; height: 6px; flex: 0 0 auto; overflow: hidden; border-radius: 99px; background: #e9ece6; }
.progress-track i { display: block; height: 100%; background: var(--green); }
table.review-grid { width: 100%; border-collapse: collapse; font-size: 11px; }
table.review-grid th { padding: 10px 11px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 9px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; text-align: left; white-space: nowrap; }
table.review-grid td { padding: 7px 11px; border-bottom: 1px solid #edf0e9; vertical-align: middle; }
table.review-grid tr.is-error { background: #fdf5f2; }
table.review-grid tr.is-suggestion { background: #fdfaf0; }
table.review-grid tr.is-review { background: #f4f8fc; }
.cell-input { width: 100%; min-width: 140px; min-height: 34px; border: 1px solid transparent; border-radius: 7px; padding: 7px 8px; background: transparent; color: var(--ink); font: inherit; }
.cell-input.postcode { min-width: 92px; }
.cell-input:hover { border-color: #d7ddd4; background: white; }
.cell-input:focus { outline: 3px solid rgba(37, 99, 168, .3); outline-offset: 1px; border-color: #b7c3b8; background: white; }
.cell-input.is-bad, #apartment-postcode.is-bad, #apartment-municipality.is-bad { border-color: var(--red); background: #fdeeea; color: #8d2f1b; font-weight: 700; }
.cell-input.is-suggestion { border-color: #d9a441; background: #fdf4e3; color: #8a5a15; font-weight: 700; }
.cell-input.is-review { border-color: #8fb3d6; background: #f1f7fc; }
.resolved-cell { min-width: 215px; max-width: 335px; line-height: 1.45; white-space: normal; }
.resolved-cell > span { display: block; }
.resolved-cell .reason, .resolved-cell .reason-suggestion, .resolved-cell .reason-review { margin-top: 3px; font-size: 10px; font-weight: 700; }
.resolved-cell .reason { color: var(--red); }
.resolved-cell .reason-suggestion { color: #a06b1b; }
.resolved-cell .reason-review { color: #245f98; }
.row-action { margin-top: 7px; padding: 0; border: 0; background: transparent; color: var(--blue); font-size: 10px; font-weight: 800; text-align: left; text-decoration: underline; cursor: pointer; }
.accept-action { min-height: 30px; margin-top: 7px; padding: 6px 11px; border: 1px solid #c9a24d; border-radius: 8px; background: #fff6e5; color: #7d5410; font-size: 10px; font-weight: 850; cursor: pointer; }
.accept-action:hover { background: #fdecd0; }
dialog.confirm-dialog { max-width: 470px; width: calc(100% - 32px); border: 0; border-radius: 16px; padding: 26px; color: var(--ink); background: var(--panel); box-shadow: 0 25px 90px rgba(0,0,0,.28); }
dialog.confirm-dialog::backdrop { background: rgba(20, 43, 39, .5); }
dialog.confirm-dialog h2 { margin: 10px 0 8px; font-family: Georgia, serif; font-size: 22px; letter-spacing: -.03em; }
dialog.confirm-dialog > p { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.6; }
dialog.confirm-dialog .check { display: grid; grid-template-columns: auto 1fr; gap: 9px; color: #304d46; font-size: 11px; font-weight: 800; line-height: 1.5; }
dialog.confirm-dialog .check input { width: 16px; min-height: 16px; margin: 2px 0 0; }
.confirm-counts { margin-bottom: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.confirm-counts > div { padding: 11px; border-radius: 10px; background: #f5f6f1; }
.confirm-counts small { display: block; color: var(--muted); font-size: 10px; }
.confirm-counts strong { display: block; margin-top: 4px; font-size: 14px; }

.recommendation-list { display: grid; gap: 11px; }
.tour-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 16px; }
.tour-art { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 14px; font: 700 26px Georgia, serif; }
.blue-art { color: #1e5b98; background: #dfeefa; }
.orange-art { color: #a95527; background: #ffeadb; }
.green-art { color: #326948; background: #e3efe5; }
.tour-copy > div { display: flex; align-items: center; gap: 10px; }
.tour-copy h2 { margin: 7px 0 3px; font: 700 18px Georgia, serif; }
.distance { color: var(--muted); font-size: 9px; }
.tour-actions { min-width: 115px; display: grid; justify-items: end; gap: 8px; }
.tour-actions small { color: var(--muted); font-size: 9px; }
.switch-control { width: 89px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 7px; border: 1px solid var(--line); border-radius: 999px; padding: 5px 8px 5px 5px; background: white; cursor: pointer; }
.switch-control span { width: 20px; height: 20px; border-radius: 50%; background: #9aa39e; }
.switch-control b { font-size: 9px; }
.switch-control[aria-checked="true"] span { background: var(--green); }
.is-hidden-tour { opacity: .76; }

.calculation-callout { margin-bottom: 14px; padding: 18px 20px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; background: #edf3ec; }
.formula-icon { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 10px; color: white; background: var(--green); font: italic 700 17px Georgia, serif; }
.calculation-callout p { margin: 4px 0 0; color: var(--muted); font-size: 10px; }
.formula { min-width: 120px; text-align: right; }
.formula span, .formula strong { display: block; }
.formula span { color: var(--muted); font-size: 10px; }
.formula strong { margin-top: 4px; font: 700 20px Georgia, serif; }

.guest-reference { min-height: 570px; display: grid; grid-template-columns: .8fr 1.2fr; align-items: center; gap: 60px; padding: 45px clamp(30px, 6vw, 80px); background: linear-gradient(130deg, white 0 60%, #e8eee2 60%); }
.phone-frame { width: 245px; margin: auto; padding: 9px; border: 7px solid #173a35; border-radius: 34px; background: white; box-shadow: var(--shadow); }
.phone-top { width: 80px; height: 11px; margin: 0 auto 8px; border-radius: 0 0 9px 9px; background: #173a35; }
.guest-mini { min-height: 430px; padding: 29px 17px; border-radius: 23px; color: white; background: linear-gradient(160deg, #173a35 0 44%, #f5f3e9 44%); }
.guest-mini > span { color: #bcd1ca; font-size: 8px; text-transform: uppercase; letter-spacing: .1em; }
.guest-mini h2 { margin: 9px 0 0; font: 700 28px Georgia, serif; }
.guest-mini > p { margin: 2px 0 70px; color: #ffd3b8; font: italic 21px Georgia, serif; }
.guest-mini article { padding: 10px; display: flex; gap: 10px; border-radius: 11px; color: var(--ink); background: white; box-shadow: 0 8px 25px rgba(0,0,0,.08); }
.mini-image { width: 62px; height: 70px; display: grid; place-items: center; border-radius: 8px; color: #1e5b98; background: #dfeefa; }
.guest-mini article small, .guest-mini article strong, .guest-mini article b { display: block; }
.guest-mini article small { color: var(--muted); font-size: 7px; }
.guest-mini article strong { margin: 6px 0; font: 700 11px Georgia, serif; }
.guest-mini article b { color: var(--orange); font-size: 8px; }
.mini-code { margin: 8px 2px 6px; padding: 7px 9px; display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; border-radius: 8px; color: var(--ink); background: #e9efe7; }
.mini-code small, .mini-code span { color: var(--muted); font-size: 7px; }
.mini-code span { grid-column: 1 / -1; }
.mini-code strong { font: 800 10px ui-monospace, monospace; }
.mini-book { width: 100%; min-height: 31px; border: 0; border-radius: 8px; color: white; background: var(--green); font-size: 8px; font-weight: 800; cursor: pointer; }
.guest-journey { margin: 18px 0 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
.guest-journey > div { padding: 10px 8px; border: 1px solid var(--line); border-radius: 10px; background: white; }
.guest-journey span { width: 20px; height: 20px; margin-bottom: 7px; display: grid; place-items: center; border-radius: 50%; color: white; background: var(--green); font-size: 8px; }
.guest-journey strong { font-size: 9px; line-height: 1.35; }
.handoff-note { padding: 11px 13px; border-left: 3px solid var(--orange); border-radius: 8px; background: #fff5ed; }
.handoff-note small, .handoff-note strong, .handoff-note span { display: block; }
.handoff-note small, .handoff-note span { color: var(--muted); font-size: 8px; line-height: 1.5; }
.handoff-note strong { margin: 3px 0; font-size: 10px; }
.guest-copy .button { margin-top: 12px; }

.approval-card { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 20px; border-left: 3px solid var(--orange); }
.approval-card h2 { margin: 8px 0 4px; font: 700 20px Georgia, serif; }
.approval-card p { margin: 0; color: var(--muted); font-size: 11px; }
.rate-version-card { margin-bottom: 14px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-left: 3px solid var(--green); }
.rate-version-card h2 { margin: 7px 0 4px; font: 700 22px Georgia, serif; }
.rate-version-card p, .rate-version-card small { color: var(--muted); font-size: 10px; }
.rate-version-card > div:last-child { display: grid; justify-items: end; gap: 6px; text-align: right; }
.rate-version-card .button { margin-top: 4px; }
.meta-row { margin-top: 11px; display: flex; gap: 18px; }
.tour-admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.tour-admin-card { display: flex; gap: 15px; }
.tour-admin-card .tour-art { width: 57px; height: 57px; flex: 0 0 auto; }
.tour-admin-card h2 { margin: 8px 0 4px; font: 700 16px Georgia, serif; }
.tour-admin-card p { margin: 0; color: var(--muted); font-size: 10px; }
.tour-admin-card dl { margin: 14px 0 0; display: grid; gap: 8px; }
.tour-admin-card dl div { display: flex; justify-content: space-between; gap: 12px; font-size: 9px; }
.tour-admin-card dt { color: var(--muted); }
.tour-admin-card dd { margin: 0; font-weight: 750; }
.history-note { margin-top: 13px; padding: 15px 18px; display: flex; gap: 12px; background: #f7f8f3; font-size: 10px; }
.history-note span { color: var(--muted); }
.import-source { justify-content: space-between; }
.payment-review { margin-bottom: 14px; }
.payment-total { font: 700 32px Georgia, serif; }
.payment-equation { margin: 17px 0; padding: 17px; display: flex; align-items: center; justify-content: center; gap: 22px; border-radius: 13px; background: #f5f7f1; }
.payment-equation div { min-width: 145px; text-align: center; }
.payment-equation strong { display: block; margin-top: 6px; font: 700 21px Georgia, serif; }
.anomaly { padding: 13px; display: flex; align-items: center; gap: 11px; border: 1px solid #f1d6c5; border-radius: 11px; background: #fff7f1; }
.anomaly > span { width: 29px; height: 29px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: white; background: var(--orange); font-weight: 900; }
.anomaly > div { flex: 1; }
.anomaly strong { font-size: 11px; }
.anomaly p { margin: 3px 0 0; color: var(--muted); font-size: 9px; }
.payment-review .form-actions { margin-top: 15px; }
.approval-reason { margin-top: 14px; display: grid; gap: 7px; color: #304d46; font-size: 10px; font-weight: 800; }
.approval-reason textarea { width: 100%; min-height: 64px; resize: vertical; border: 1px solid #d7ddd4; border-radius: 9px; padding: 10px 12px; color: var(--ink); background: #fcfdf9; font-size: 12px; line-height: 1.45; }
.approval-reason small { color: var(--muted); font-weight: 500; line-height: 1.5; }
.payment-entry { max-width: 760px; margin: 14px 0 0 auto; }
.payment-entry input[readonly] { color: var(--muted); background: #f3f5ef; }

.toast { position: fixed; z-index: 20; left: 50%; bottom: 22px; max-width: min(500px, calc(100% - 32px)); padding: 12px 18px; border-radius: 10px; color: white; background: #173a35; box-shadow: 0 15px 45px rgba(0,0,0,.2); font-size: 11px; text-align: center; transform: translate(-50%, 15px); opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 1050px) {
  .stat-grid, .stat-grid.four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tour-admin-grid { grid-template-columns: 1fr; }
  .content-grid.two-one { grid-template-columns: 1fr; }
  .explainer { display: grid; grid-template-columns: 1fr 180px; column-gap: 18px; }
  .explainer .plain-list { grid-column: 1 / -1; }
}

@media (max-width: 980px) {
  .app-shell { display: block; overflow-x: clip; }
  .sidebar { position: static; width: 100%; height: auto; padding: 16px 18px 10px; overflow: clip; }
  .brand { display: none; }
  .nav-group { width: 100%; max-width: calc(100vw - 36px); margin: 0; padding: 2px 0 8px; flex-direction: row; overflow-x: auto; scrollbar-width: thin; }
  .nav-label, .sidebar-foot { display: none; }
  .nav-item { width: auto; flex: 0 0 auto; padding: 9px 11px; white-space: nowrap; }
  .main { padding: 24px 18px 55px; }
  .page-header { align-items: center; }
  .header-actions .button-quiet { display: none; }
  .page-header h1 { font-size: 32px; }
  .auth-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; padding: 4px 0; }
  .auth-intro h2 { font-size: 37px; }
  .progress-list { display: none; }
  .two-factor-layout { grid-template-columns: 1fr; }
  .guest-reference { grid-template-columns: 1fr; background: white; }
  .guest-copy { order: -1; }
}

@media (max-width: 620px) {
  .page-header { align-items: flex-start; }
  .header-actions [data-role-scope="company"] { display: none !important; }
  .welcome-strip, .approval-card, .rate-version-card { align-items: flex-start; flex-direction: column; }
  .rate-version-card > div:last-child { justify-items: start; text-align: left; }
  .stat-grid, .stat-grid.three, .stat-grid.four { grid-template-columns: 1fr 1fr; }
  .stat-card { min-height: 112px; padding: 16px; }
  .stat-card strong { font-size: 23px; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { width: 100%; align-items: stretch; }
  .toolbar-actions > * { flex: 1; min-width: 0 !important; }
  .search-field { min-width: 0; }
  .field-row { grid-template-columns: 1fr; }
  .summary-strip, .import-source { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .tour-row { grid-template-columns: 52px 1fr; }
  .tour-row .tour-art { width: 52px; height: 52px; }
  .tour-actions { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
  .calculation-callout { grid-template-columns: auto 1fr; }
  .calculation-callout .formula { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid #dbe4d8; text-align: left; }
  .stepper li { font-size: 0; }
  .stepper li span { font-size: 9px; }
  .commit-bar { align-items: stretch; flex-direction: column; }
  .commit-bar .button { width: 100%; }
  .explainer { display: block; }
  .contacts-heading { align-items: stretch; flex-direction: column; }
  .grid-toolbar { align-items: stretch; flex-direction: column; }
  .grid-progress { justify-content: space-between; }
  .mobile-row, .otp-panel { grid-template-columns: 1fr; }
  .mobile-row > .button, .otp-panel > .button { margin-top: 0; }
  .payment-equation { align-items: stretch; flex-direction: column; gap: 8px; }
  .payment-equation div { min-width: 0; }
  .payment-equation > span { transform: rotate(90deg); }
  .anomaly { align-items: flex-start; flex-wrap: wrap; }
  .unavailable-states { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .sidebar { padding-inline: 14px; }
  .nav-group { max-width: calc(100vw - 28px); margin-inline: 0; padding-inline: 0; }
  .main { padding-inline: 14px; }
  .page-header { margin-bottom: 20px; }
  .page-header h1 { font-size: 29px; }
  .page-header #screen-subtitle { font-size: 11px; }
  .auth-intro h2 { font-size: 32px; overflow-wrap: anywhere; }
  .stat-grid, .stat-grid.three, .stat-grid.four { grid-template-columns: 1fr; }
  .stat-card { min-height: 0; }
  .panel { padding: 17px; }
  .contact-card { padding: 13px; }
  .recovery-codes { grid-template-columns: 1fr; }
  .confirm-counts { grid-template-columns: 1fr; }
  dialog.confirm-dialog { padding: 20px; }
  .contact-card-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .state-card { padding: 28px 18px; }
  .state-details { grid-template-columns: 1fr; }
  .toolbar-actions { flex-direction: column; }
  .segmented { width: 100%; }
  .segmented button { flex: 1; }
  .summary-strip, .import-source { grid-template-columns: 1fr; }
  .meta-row { flex-direction: column; gap: 5px; }
  .guest-reference { padding: 28px 16px; }
  .phone-frame { width: 230px; }
  .guest-journey { grid-template-columns: 1fr; }
  .history-note { flex-direction: column; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* U9: the manual add-apartment path's typed postcode and its created-code panel. */
.field-note { margin: -4px 0 0; font-size: 11px; color: var(--muted); min-height: 15px; }
.field-note.is-error { color: #8d2f1b; font-weight: 700; }
.field-note.is-ready { color: #215b40; font-weight: 700; }
#apartment-postcode { max-width: 180px; }
.created-code { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 12px; color: var(--muted); }
.created-code code { font-size: 15px; font-weight: 800; letter-spacing: .04em; color: var(--ink); }

/* U10: lifecycle dialogs. */
.lifecycle-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.button-danger { background: var(--red); color: white; border-color: var(--red); }
.button-danger:disabled { opacity: .45; }
.muted-note { font-size: 11px; color: var(--muted); }

/* The municipality cell: a chooser over all 308 municipalities, with the
   locality the company wrote in its file underneath it. The two are stacked
   because the choice is made by reading the file's text, and a company that has
   to look away from the chooser to find it will pick from memory instead. */
.municipality-cell { display: grid; gap: 4px; min-width: 160px; }
.municipality-select { width: 100%; }
.file-locality { color: var(--muted); font-size: 12px; line-height: 1.3; }
.registry-filter { display: grid; gap: 4px; font-size: 12px; color: var(--muted); font-weight: 700; }
.registry-filter input { min-width: 180px; min-height: 38px; border: 1px solid #d7ddd4; border-radius: 8px; padding: 8px 10px; background: white; color: var(--ink); font: inherit; font-weight: 400; }

/* The account-recovery panel. Operator-only; the role scope hides it. */
.recovery-introduced { display: grid; gap: 10px; }
.recovery-log-title { margin: 18px 0 8px; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.recovery-log { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.recovery-log li { display: grid; gap: 4px; justify-items: start; padding: 10px 12px; border: 1px solid #e2e6e0; border-radius: 9px; background: white; font-size: 13px; }
#account-recovery label, .recovery-introduced label { display: grid; gap: 4px; font-size: 13px; font-weight: 700; }
#account-recovery label select, #account-recovery label input, #account-recovery label textarea { min-height: 38px; border: 1px solid #d7ddd4; border-radius: 8px; padding: 8px 10px; background: white; color: var(--ink); font: inherit; font-weight: 400; }
#account-recovery label small { font-weight: 400; color: var(--muted); }
#account-recovery > label, #account-recovery #recovery-request > * { margin-bottom: 12px; }

/* ---- the seven inline styles the prototype used, as elements instead ---- */

/* The prototype wrote <i style=--value:67%> and <i style=width:86%>.
   Both are computed values, so a class per state cannot express them; these
   are the semantically correct elements and they bring an accessible name
   and a readable value with them. */
progress.progress-track, meter.readiness { -webkit-appearance: none; appearance: none; width: 100%; height: 7px; border: 0; border-radius: 999px; background: var(--line); }
progress.progress-track::-webkit-progress-bar { border-radius: 999px; background: var(--line); }
progress.progress-track::-webkit-progress-value { border-radius: 999px; background: var(--green); }
progress.progress-track::-moz-progress-bar { border-radius: 999px; background: var(--green); }
meter.readiness::-webkit-meter-bar { border: 0; border-radius: 999px; background: var(--line); }
meter.readiness::-webkit-meter-optimum-value { border-radius: 999px; background: var(--green); }
meter.readiness:-moz-meter-optimum::-moz-meter-bar { background: var(--green); }
.readiness-row { display: flex; align-items: center; gap: 8px; }
.readiness-row small { color: var(--muted); font-size: 11px; white-space: nowrap; }