/* /Components/Layout/AuthLayout.razor.rz.scp.css */
.auth-shell[b-k1g0r10bfx] {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(390px, 43%) 1fr;
    background: var(--surface);
}

.auth-panel[b-k1g0r10bfx] {
    position: relative;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    padding: 30px clamp(32px, 7vw, 112px) 30px;
    background: var(--surface);
    z-index: 1;
}

.auth-content[b-k1g0r10bfx] {
    display: flex;
    width: min(100%, 390px);
    flex: 1;
    align-items: center;
    margin-inline: auto;
    padding: 28px 0;
}

/* Every account page keeps the brand and form together. */
.auth-panel-featured .auth-content[b-k1g0r10bfx] {
    align-items: flex-start;
    padding-top: clamp(34px, 5vh, 56px);
}

.auth-footer[b-k1g0r10bfx] {
    margin: 0;
    color: var(--ink-faint);
    font-size: 12px;
    text-align: center;
}

.auth-footer-by[b-k1g0r10bfx] { display: block; }

/* The lagoon photo. Pinned to the viewport so that, when the form is taller than the screen (Register, short laptops),
   the page scrolls and the photo and its copy stay in view instead of stretching down the page. */
.auth-hero[b-k1g0r10bfx] {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(12, 23, 26, .32), rgba(12, 23, 26, .02) 50%), /* theme-exempt: shade over the photo, the same in both themes */
        url("/brand/auth/lagoon-hero.webp") center center / cover no-repeat;
}

.auth-hero[b-k1g0r10bfx]::after {
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 28, 31, .52), transparent 52%); /* theme-exempt: shade over the photo */
    content: "";
}

.auth-hero-copy[b-k1g0r10bfx] {
    position: absolute;
    z-index: 1;
    right: clamp(32px, 7vw, 112px);
    bottom: clamp(42px, 9vh, 96px);
    width: min(500px, calc(100% - 64px));
    color: #fff; /* theme-exempt: white type set on the photo */
    text-shadow: 0 2px 22px rgba(0, 0, 0, .22);
}

.auth-hero-kicker[b-k1g0r10bfx] {
    display: inline-flex;
    margin-bottom: 16px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.auth-hero-copy h2[b-k1g0r10bfx] {
    font-size: clamp(34px, 3.5vw, 56px);
    line-height: 1.06;
    letter-spacing: -.055em;
}

.auth-hero-copy p[b-k1g0r10bfx] {
    max-width: 390px;
    margin: 17px 0 0;
    font-size: 16px;
    line-height: 1.55;
}

@media (max-width: 800px) {
    .auth-shell[b-k1g0r10bfx] { display: flex; flex-direction: column; }
    .auth-panel[b-k1g0r10bfx] {
        min-height: calc(100vh - 470px);
        padding: 28px 28px 24px;
    }
    .auth-content[b-k1g0r10bfx] { margin: auto; padding: 24px 0; }
    .auth-panel-featured .auth-content[b-k1g0r10bfx] { margin: 0 auto; padding-top: 36px; }
    .auth-hero[b-k1g0r10bfx] {
        position: relative;
        top: auto;
        order: -1;
        align-self: stretch;
        flex: none;
        height: 470px;
    }
}

@media (max-width: 600px) and (orientation: portrait) {
    .auth-shell[b-k1g0r10bfx] { display: block; }
    .auth-panel[b-k1g0r10bfx] { min-height: 100vh; }
    .auth-hero[b-k1g0r10bfx] { display: none; }
}

@media (max-width: 800px) and (orientation: landscape) {
    .auth-shell[b-k1g0r10bfx] { display: grid; grid-template-columns: minmax(285px, 45%) minmax(0, 1fr); }
    .auth-panel[b-k1g0r10bfx] { min-height: 100vh; padding: 24px clamp(20px, 3.5vw, 28px); }
    .auth-panel-featured .auth-content[b-k1g0r10bfx] { padding-top: 24px; }
    .auth-hero[b-k1g0r10bfx] { position: sticky; top: 0; order: 0; align-self: start; height: 100vh; }
    .auth-hero-copy[b-k1g0r10bfx] { right: 24px; bottom: 24px; width: calc(100% - 48px); }
    .auth-hero-copy h2[b-k1g0r10bfx] { font-size: clamp(28px, 4vw, 36px); }
    .auth-hero-copy p[b-k1g0r10bfx] { font-size: 13px; line-height: 1.4; }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* app shell styling lives in wwwroot/app.css */
/* /Components/Pages/Account/AccountProfilePage.razor.rz.scp.css */
/* Each card's heading at the house section-title size (16px), with room before the first label. They were a one-off 18px
   with the label tight underneath. The Appearance card's heading sits beside the theme switch, so it keeps no bottom margin. */
.account-card-title[b-kw650dypws] { font-size: var(--type-section-title); margin: 0 0 12px; }
.theme-card .account-card-title[b-kw650dypws] { margin-bottom: 0; }

/* Recovery codes and the authenticator key are read character by character: monospace (were inline styles). */
.recovery-codes[b-kw650dypws] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 14px; line-height: 1.6; }
.mono-input[b-kw650dypws] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); }
/* /Components/Pages/Account/BillingPortalPage.razor.rz.scp.css */
/* The small uppercase label over the title, as it looks in the drawers and record dialogs (app.css styles .eyebrow only
   there, so here it was plain body text). */
.eyebrow[b-atw3yvo3ec] { font-size: 11px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .04em; }

/* A card's first section heading has no rule above it (were inline styles). */
.section-title-flush[b-atw3yvo3ec] { border-top: none; padding-top: 0; }

.seats-input[b-atw3yvo3ec] { width: 90px; }

/* How to pay an open invoice: a tinted box under the invoice, its options stacked (was an untinted inline-styled callout). */
.bill-pay-box[b-atw3yvo3ec] { margin-top: 8px; font-size: 12.5px; }
/* /Components/Pages/Accounting/GeneralLedger.razor.rz.scp.css */
/* A long account description stops at one line instead of widening the table (was an inline style). */
.gl-description[b-vbglwfmwnh] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* The totals row's "out of balance" figure. */
.gl-out[b-vbglwfmwnh] { color: var(--warn-ink); }
/* /Components/Pages/Accounting/JournalEntries.razor.rz.scp.css */
/* On a phone the list scrolls sideways inside its card rather than squeezing the narration and source into a word a line. */
.je-list-table[b-tzdbokhqi2] { min-width: 860px; }
/* /Components/Pages/Accounting/JournalEntryDetailPage.razor.rz.scp.css */
/* The journal's lines scroll sideways inside their card on a phone rather than breaking account names a word a line. */
.je-detail-lines[b-d7fmqwgh0m] { min-width: 620px; }
/* /Components/Pages/Accounting/JournalEntryPage.razor.rz.scp.css */
/* Each dimension on a journal line: its name beside its dropdown. The label is a wrapping row (.row-inline), so the first one
   broke onto two lines (name above, dropdown below) while the next sat beside it (Wave 3). */
.gj-dims label[b-f3gz3wvwqr] { flex-wrap: nowrap; }
/* /Components/Pages/Accounting/PeriodClosePage.razor.rz.scp.css */
.control-account-link[b-q2rotajm9w], .control-accounts a[b-q2rotajm9w] { text-decoration: underline; text-underline-offset: 3px; }
.control-accounts[b-q2rotajm9w] { margin-top: 6px; }
.control-accounts summary[b-q2rotajm9w] { color: var(--brand-red); cursor: pointer; width: fit-content; }
.control-accounts ul[b-q2rotajm9w] { margin: 8px 0 0; padding-left: 18px; }
.control-accounts li + li[b-q2rotajm9w] { margin-top: 8px; }

/* The column headings of the two control tables wrap onto a second line rather than being cut off ("CASH FLOW STATEM…",
   "BANK & CASH LEDGI…") in their fixed-width columns (Wave 3). */
.pc-controls-table th[b-q2rotajm9w] { white-space: normal; vertical-align: bottom; }
/* /Components/Pages/Accounting/SummaryPage.razor.rz.scp.css */
.summary-panes[b-g5xi2wqn5q] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.summary-pane[b-g5xi2wqn5q] { padding: 0; overflow: hidden; }

.summary-pane-head[b-g5xi2wqn5q] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: 1px solid var(--line);
}

.summary-pane-title[b-g5xi2wqn5q] { font-weight: 700; font-size: 13px; }
.summary-pane-link[b-g5xi2wqn5q] { font-size: 11.5px; font-weight: 600; }

.summary-subhead[b-g5xi2wqn5q] { background: var(--surface-sunk); }

.summary-header[b-g5xi2wqn5q] { background: var(--surface-sunk); }


@media (max-width: 1080px) {
    .summary-panes[b-g5xi2wqn5q] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Assets/AssetDetailPage.razor.rz.scp.css */
/* Cost, accumulated depreciation, written-down value and status stay one row at tablet width (the shared 200px minimum left
   the status card alone on a second row at 1024). Phones keep the shared two-a-row rule. */
@media (min-width: 621px) {
    .asset-kpis[b-fvzzok66wj] { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}
/* /Components/Pages/Assets/AssetRegister.razor.rz.scp.css */
/* The register keeps a readable width and scrolls inside its card (tablet and phone) instead of squeezing asset names to a
   word a line: the name column keeps room for a two-line name and the table grows past the card rather than shrink it. */
.asset-register-table[b-izl9zr88mb] { min-width: 900px; }
.asset-name-col[b-izl9zr88mb] { min-width: 200px; }
/* /Components/Pages/Assets/AssetReportsPage.razor.rz.scp.css */
/* On a phone the report tables keep a readable width and scroll in their card, as the other reports do, rather than breaking
   asset and account names a word a line. */
.asset-rpt-table[b-mx2a3qxycc] { min-width: 620px; }
.asset-rpt-name[b-mx2a3qxycc] { min-width: 200px; }
/* /Components/Pages/Audit/AuditCentrePage.razor.rz.scp.css */
/* When an event happened stays on one line: at 1024px it broke into three ("29 Sep / 2026 8:49 / PM"). */
.audit-when[b-3b0dz4wro6] { white-space: nowrap; }

/* The search box is wide enough for its example ("Summary or record (e.g. INV-2026-0142)"), which was cut off at the shared
   cashbook width; on a phone it takes the whole row, as app.css means a list search to (the cashbook width overrode that). */
.audit-centre[b-3b0dz4wro6]  .list-search { flex-basis: 330px; }
@media (max-width: 640px) {
    .audit-centre[b-3b0dz4wro6]  .list-search { flex-basis: 100%; }
}

/* On a phone the events scroll sideways inside their card rather than squeezing every column to a word a line. */
@media (max-width: 760px) {
    .audit-table[b-3b0dz4wro6] { min-width: 760px; }
}
/* /Components/Pages/Banking/BankAccounts.razor.rz.scp.css */
.bank-overview[b-6y9fznw403] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 0;
    margin: 18px 0 24px;
    padding: 15px 18px;
}
.bank-overview-item[b-6y9fznw403] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 3px 14px 3px 2px;
}
.bank-overview-item + .bank-overview-item[b-6y9fznw403] { padding-left: 18px; border-left: 1px solid var(--line-soft); }
.bank-overview-item:only-child[b-6y9fznw403] { grid-column: 1 / -1; }
.bank-overview-item strong[b-6y9fznw403] {
    font-size: 24px;
    line-height: 1.15;
    letter-spacing: -.025em;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.bank-section-heading[b-6y9fznw403] { margin: 25px 0 12px; }
.bank-section-heading h2[b-6y9fznw403] { margin: 0 0 3px; font-size: 17px; }
.bank-section-heading p[b-6y9fznw403] { margin: 0; color: var(--ink-faint); font-size: 12.5px; line-height: 1.45; }
.bank-section-note[b-6y9fznw403] { margin: 0 0 10px; font-size: 12.5px; }

/* All account types share one card measure; a lone account no longer stretches
   into an oversized banner. Two cards sit together when there is room. */
.bank-account-grid[b-6y9fznw403] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 370px), 440px));
    gap: 14px;
    align-items: stretch;
}
.bank-account-grid[b-6y9fznw403]  .bank-account-card {
    min-width: 0;
    min-height: 0;
    padding: 18px 19px 16px;
    container-type: inline-size;
}
.bank-account-grid[b-6y9fznw403]  .bank-account-header { flex-wrap: wrap; min-height: 0; }
.bank-account-grid[b-6y9fznw403]  .bank-account-identity { flex: 1 1 210px; align-items: flex-start; }
.bank-account-grid[b-6y9fznw403]  .bank-account-card--cash .bank-account-type-icon {
    background: color-mix(in srgb, var(--ink) 7%, transparent);
    color: var(--ink);
}
.bank-account-grid[b-6y9fznw403]  .bank-account-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.bank-account-grid[b-6y9fznw403]  .bank-account-meta { overflow-wrap: anywhere; }
.bank-account-grid[b-6y9fznw403]  .bank-account-main { margin-top: 18px; }
.bank-account-grid[b-6y9fznw403]  .bank-account-main .kpi-label { min-height: 0; }
.bank-account-grid[b-6y9fznw403]  .bank-balance-link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 100%;
    min-width: 0;
    margin-top: 5px;
    color: var(--brand-red);
    font-size: 22px;
    font-weight: 750;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
}
.bank-account-grid[b-6y9fznw403]  .bank-balance-link > span:first-child { overflow-wrap: anywhere; }
.bank-account-grid[b-6y9fznw403]  .bank-balance-link__hint { margin-top: 3px; font-size: 11px; font-weight: 650; }
.bank-account-grid[b-6y9fznw403]  .bank-balance-link:hover, .bank-account-grid[b-6y9fznw403]  .bank-balance-link:focus-visible { text-decoration: underline; }
.bank-account-grid[b-6y9fznw403]  .bank-account-detail {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-height: 64px;
    margin-top: 16px;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
}
.bank-account-grid[b-6y9fznw403]  .bank-account-detail span { color: var(--ink-faint); font-size: 11px; }
.bank-account-grid[b-6y9fznw403]  .bank-account-detail strong { font-size: 13px; font-weight: 700; }
.bank-account-grid[b-6y9fznw403]  .bank-account-detail small { color: var(--ink-faint); font-size: 11px; }
.bank-account-grid[b-6y9fznw403]  .bank-account-actions {
    display: flex;
    align-items: center;
    gap: 8px 13px;
    flex-wrap: wrap;
    margin-top: 15px;
    padding-top: 13px;
    border-top: 1px solid var(--line-soft);
}
.bank-account-grid[b-6y9fznw403]  .bank-account-actions .btn { max-width: 100%; white-space: normal; text-align: center; }
.bank-account-grid[b-6y9fznw403]  .bank-account-action-link { color: var(--brand-red); font-size: 11.5px; font-weight: 700; text-decoration: none; }
.bank-account-grid[b-6y9fznw403]  .bank-account-action-link:hover, .bank-account-grid[b-6y9fznw403]  .bank-account-action-link:focus-visible { text-decoration: underline; }
@media (max-width: 460px) {
    .bank-account-grid[b-6y9fznw403] { grid-template-columns: minmax(0, 1fr); }
    .bank-overview[b-6y9fznw403] { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 13px; }
    .bank-overview-item[b-6y9fznw403] { padding-right: 10px; }
    .bank-overview-item + .bank-overview-item[b-6y9fznw403] { padding-left: 12px; }
    .bank-overview-item strong[b-6y9fznw403] { font-size: 19px; }
}
/* /Components/Pages/Banking/BankImportPage.razor.rz.scp.css */
/* The CSV profile editor: a sunk panel inside the profile card (was an inline style). */
.import-profile-editor[b-hjrdn43m9r] {
    margin-top: 12px;
    padding: 16px;
    background: var(--surface-sunk);
}

/* Below 680px the field row stacks (app.css), and .self-end (which lines "Header row" up with the inputs on a
   desktop row) then pushed it to the right edge, away from the fields it belongs with. The utility is !important. */
@media (max-width: 680px) {
    .import-header-row[b-hjrdn43m9r] { align-self: flex-start !important; }
}
/* /Components/Pages/Banking/BankingReports.razor.rz.scp.css */
/* The four report cards on the Banking reports hub: as many across as fit, each at least 240px. */
.bank-report-cards[b-5yjdhbkj42] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-bottom: 16px;
}
/* /Components/Pages/Banking/BankReconcilePage.razor.rz.scp.css */
/* app.css switches the reconcile layouts at a 900px VIEWPORT, but from 900px up the left rail takes 232px, so between
   900 and 1180px the page itself is only ~620-900px wide: six balances in a row ran into each other ("+ $31,127.41"
   against the next column) and the two-column start form squeezed its dates to "29/09/". Here the switch follows the
   page's own width instead. Phones (620px and below) keep app.css's two-column balance grid. */
@media (min-width: 621px) and (max-width: 1180px) {
    .recon-balance-grid[b-rolx9pftkm] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .recon-balance-grid > div[b-rolx9pftkm] { border-right: 1px solid var(--line-soft); }
    .recon-balance-grid > div:nth-child(3n)[b-rolx9pftkm] { border-right: 0; }
    .recon-balance-grid > div:nth-child(n+4)[b-rolx9pftkm] { border-top: 1px solid var(--line-soft); }
    .recon-start-layout[b-rolx9pftkm] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Pages/Banking/BankRuleForm.razor.rz.scp.css */
/* "Would match N lines": the rule tried against recent statement lines while it is edited. */
.bank-rule-test[b-kl027iswya] {
    padding: 12px 14px;
    border: 1px solid var(--line-soft);
    border-radius: var(--radius-sm);
    background: var(--surface-sunk);
    font-size: 12.5px;
}
.bank-rule-test-examples[b-kl027iswya] {
    margin: 8px 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 3px;
}
.bank-rule-test-examples li[b-kl027iswya] {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 8px;
    overflow-wrap: anywhere;
}
/* /Components/Pages/Banking/EftSetupPage.razor.rz.scp.css */
/* The chosen format's one-line summary runs the full card width under the format box (was an inline style). */
.eft-format-summary[b-px4h1atdze] { margin-top: 8px; max-width: none; }

/* A format's own setup fields: a plain field keeps the width its value needs; one with a note is widened for the
   sentence, not the box (the control inside keeps its own width). Below 680px .field-row stacks and lifts both caps. */
.eft-setup-field[b-px4h1atdze] { max-width: 220px; }
.eft-setup-field--hinted[b-px4h1atdze] { max-width: 400px; }
/* /Components/Pages/Banking/LoanRepaymentPage.razor.rz.scp.css */
.loan-repayment-layout[b-0zgp21xidu] { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, .8fr); gap: 16px; align-items: start; }
.loan-repayment-form[b-0zgp21xidu], .loan-repayment-summary[b-0zgp21xidu] { padding: 20px; }
.loan-repayment-form h2[b-0zgp21xidu], .loan-repayment-summary h2[b-0zgp21xidu] { font-size: 17px; margin: 0 0 14px; }
.loan-repayment-step[b-0zgp21xidu] { display: flex; align-items: center; gap: 9px; color: var(--brand-red); font-size: 12px; font-weight: 750; }
.loan-repayment-step[b-0zgp21xidu]::first-letter { font-variant-numeric: tabular-nums; }
.loan-repayment-step:not(:first-child)[b-0zgp21xidu] { margin-top: 28px; padding-top: 21px; border-top: 1px solid var(--line-soft); }
.loan-repayment-step + h2[b-0zgp21xidu] { margin-top: 9px; }
.loan-repayment-source[b-0zgp21xidu] { margin-bottom: 16px; }
.loan-repayment-actions[b-0zgp21xidu] { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.loan-repayment-summary > strong[b-0zgp21xidu] { display: block; font-size: 28px; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.loan-repayment-summary p[b-0zgp21xidu] { color: var(--ink-faint); font-size: 12px; line-height: 1.5; }
.loan-repayment-summary .loan-repayment-mismatch[b-0zgp21xidu] { color: var(--danger-ink); font-weight: 700; }
.loan-repayment-breakdown[b-0zgp21xidu] { display: grid; grid-template-columns: 1fr auto; gap: 8px; border-top: 1px solid var(--line-soft); padding-top: 14px; margin-top: 16px; font-size: 12px; }
.loan-repayment-breakdown span[b-0zgp21xidu] { color: var(--ink-soft); }
.loan-repayment-breakdown strong[b-0zgp21xidu] { font-variant-numeric: tabular-nums; }
.loan-repayment-tieout[b-0zgp21xidu] { display: grid; grid-template-columns: 1fr auto; gap: 10px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: 14px 0; margin-top: 16px; font-size: 12px; }
.loan-repayment-tieout strong[b-0zgp21xidu] { font-variant-numeric: tabular-nums; }
@media (max-width: 850px) { .loan-repayment-layout[b-0zgp21xidu] { grid-template-columns: minmax(0, 1fr); } }
/* /Components/Pages/Banking/Reconcile/CashCodingTab.razor.rz.scp.css */
/* On a phone (stack-sm) each line to code becomes a small card: description across the full width, date beside the
   amount, account beside the tax code. As a table it ran past the card, which cannot scroll (it lets the account
   pickers open outside it), so the account and tax columns were cut off. */
@media (max-width: 900px) {
    .recon-coding-table .recon-line-desc[b-rt3kckfsjm] { order: -1; }
    .recon-coding-table td.minw-220[b-rt3kckfsjm] { min-width: 0 !important; }   /* the utility is !important */
}
/* /Components/Pages/Banking/Reconcile/StatementLinesTab.razor.rz.scp.css */
/* "To clear / Cleared / Ignored" is one control: at 1024px it wrapped "Ignored" onto a line of its own beside the
   panel's description. It keeps its width and the description wraps instead (on a phone the toolbar stacks). */
.recon-filter-tabs[b-07hm06yrnr] { flex-wrap: nowrap; flex-shrink: 0; }

/* On a phone (stack-sm) each statement line becomes a small card: the description first across the full width, then
   the date and amount side by side, then the clear tools across the full width. As a table it ran past the card,
   which cannot scroll (it lets the account pickers open outside it), so "Ignore", "Undo" and "Post & clear" were
   cut off and out of reach. */
@media (max-width: 900px) {
    .recon-lines-table .recon-line-desc[b-07hm06yrnr] { order: -1; }
    .recon-lines-table .recon-lines-clear[b-07hm06yrnr] { width: auto; min-width: 0; }
}
/* /Components/Pages/Home.razor.rz.scp.css */
/* A dashboard figure opens the page behind it (DashboardLinks). The figure keeps its ink, not the red of a link: in the
   hero it is the one big number on the page, and red would read as money owed. A dotted underline when pointed at says it
   can be opened, as a linked figure does in a report (app.css, .rpt-table td.num a). */
.dashboard-figure-drill[b-hdy90ut2ad] { color: inherit; text-decoration: none; }
.dashboard-figure-drill:hover[b-hdy90ut2ad] { color: inherit; text-decoration: underline dotted var(--ink-faint); text-underline-offset: 4px; }

/* Side by side (wider than 900px), the balance column takes at least the width of the balance and the chart gives way. With
   the chart at its full 420px the column was squeezed on a 1024px screen until "$63,920.37" broke onto two lines after the
   point (app.css lets the figure wrap anywhere, which a phone needs). */
@media (min-width: 901px) {
    .dashboard-hero[b-hdy90ut2ad] { grid-template-columns: minmax(max-content, 1fr) minmax(0, 420px); }
}

/* The dashboard's message boxes: the controls reminder (Layout/ControlsReminder) and the suspense alert. app.css lists
   .callout (margin 12px 0) after .dashboard-alert, so the box lost its own spacing and gained a gap above it. */
.dashboard-home[b-hdy90ut2ad]  .dashboard-alert { margin: 0 0 14px; }

/* On a phone app.css lets the alert wrap and indents its link under the message, but the message's flex-basis of 0 never
   let it wrap: the link stayed beside it and squeezed the message into a narrow column. The message now takes the row
   (beside the icon, or beside the reminder's close button) and the link goes under it. */
@media (max-width: 620px) {
    .dashboard-home[b-hdy90ut2ad]  .dashboard-alert-copy { flex-basis: calc(100% - 40px); }
    .dashboard-home[b-hdy90ut2ad]  .dashboard-alert:not(:has(.dashboard-alert-icon)) .setup-nudge-dismiss { order: 1; }
    .dashboard-home[b-hdy90ut2ad]  .dashboard-alert:not(:has(.dashboard-alert-icon)) .dashboard-alert-link { order: 2; margin-left: 0; }
}
/* /Components/Pages/Jobs/JobEditorPage.razor.rz.scp.css */
/* The action row and a message end where the form card ends (.job-editor-card is 640px wide), not at the far edge of the page. */
.job-editor-foot[b-q5puanlfcw], .job-editor-message[b-q5puanlfcw] { max-width: 640px; }

/* The summary above the fields repeats each field's own message; keep it a tight list inside the card, not an indented block. */
.job-editor-card[b-q5puanlfcw]  .validation-errors { margin: 0; padding-left: 18px; }
/* /Components/Pages/Jobs/JobPage.razor.rz.scp.css */
/* When and by whom (created, updated, completed…) are the long values of the summary: each takes two columns and reads at body
   size, so "29 Sep 2026 8:50 PM · system: demo-data" sits on one or two lines instead of four, broken mid-word. */
.record-summary-item.job-stamp[b-gvjy1c0m7h] { grid-column: span 2; }
.record-summary-item.job-stamp dd[b-gvjy1c0m7h] { font-size: 13px; font-weight: 600; overflow-wrap: normal; }

/* Phones show two to a row; a two-column stamp is the whole row, so it needs no divider on its right. */
@media (max-width: 720px) {
    .record-summary-item.job-stamp[b-gvjy1c0m7h] { border-right: 0; }
}
/* /Components/Pages/MailSections/RoutingSection.razor.rz.scp.css */
/* "Manage assignments": the request picker and its Reassign button on one row, the button level with the box, a gap under
   the summary line. It used .list-toolbar, which only sets a bottom margin, so the label touched the summary, the box ran
   the full width and the button dropped onto a line of its own. */
.work-inbox-routing > summary[b-jzxbhqsqds] { cursor: pointer; font-weight: 600; }
.routing-row[b-jzxbhqsqds] { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.routing-row > .field[b-jzxbhqsqds] { flex: 0 1 520px; min-width: 0; }
/* /Components/Pages/Payroll/EmployeeEditPage.razor.rz.scp.css */
/* A record owns its section navigation; company-wide setup remains in Payroll settings.
   Bound the form column independently of the viewport so short values stay easy to scan. */
.employee-record[b-6q0xa913bw] { max-width: 1100px; }
.employee-record-layout[b-6q0xa913bw] { display: grid; grid-template-columns: 190px minmax(0, 680px); gap: 28px; align-items: start; }
.employee-section-nav[b-6q0xa913bw] { padding-top: 4px; }
.employee-nav-group + .employee-nav-group[b-6q0xa913bw] { margin-top: 24px; }
.employee-nav-group h2[b-6q0xa913bw] { margin: 0 10px 8px; color: var(--ink-soft); font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.employee-section-link[b-6q0xa913bw] { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; margin-bottom: 3px; padding: 10px 12px; text-align: left; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink-soft); font: inherit; font-size: var(--type-body); cursor: pointer; }
.employee-section-link:hover[b-6q0xa913bw] { color: var(--ink); background: var(--surface); }
.employee-section-link.active[b-6q0xa913bw] { color: var(--ink); background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--brand-red); font-weight: 650; }
.employee-nav-icon[b-6q0xa913bw] { display: inline-flex; flex: 0 0 17px; }
.employee-nav-icon[b-6q0xa913bw]  svg { width: 17px; height: 17px; }
.employee-section-content[b-6q0xa913bw] { min-width: 0; }
.employee-section-heading[b-6q0xa913bw] { margin-bottom: 18px; }
.employee-section-heading h2[b-6q0xa913bw] { margin: 0 0 4px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.employee-section-heading p[b-6q0xa913bw] { margin: 0; color: var(--ink-soft); font-size: 12.5px; }
.payroll-record-fields[b-6q0xa913bw] { margin: 0; }
.employee-record[b-6q0xa913bw]  .tab-content { padding: 0; min-width: 0; gap: 0; }
.employee-record[b-6q0xa913bw]  .employee-form-section { min-width: 0; padding: 20px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.employee-record[b-6q0xa913bw]  .employee-form-section > .section-title { margin: 0 -20px 18px; padding: 0 20px 14px; border-top: 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row > .field { min-width: 0; max-width: none !important; width: auto; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row > .field:only-child { max-width: 300px !important; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row > .flex-2:only-child { max-width: none !important; grid-column: 1 / -1; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row:last-child { margin-bottom: 0; }
.employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference:last-child { margin-bottom: 0; }
.employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference { grid-template-columns: minmax(0, 1fr) minmax(130px, 210px); }
.employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference-control { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.employee-record[b-6q0xa913bw]  .employee-form-section .table-scroll { max-width: 100%; }
.employee-record[b-6q0xa913bw]  .employee-form-section .field-input { min-width: 0; }
.employee-save-bar[b-6q0xa913bw] { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 16px; }
.employee-save-bar > .faint[b-6q0xa913bw] { font-size: 11.5px; }
.employee-record-checks[b-6q0xa913bw] { margin: 0 0 24px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.employee-record-checks summary[b-6q0xa913bw] { display: flex; align-items: center; gap: 10px; padding: 12px 16px; cursor: pointer; font-size: 12.5px; }
.employee-record-checks summary > .faint[b-6q0xa913bw] { margin-left: auto; white-space: nowrap; }
.employee-check-links[b-6q0xa913bw] { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 14px; }
.employee-check-links button[b-6q0xa913bw] { border: 1px solid var(--line); cursor: pointer; }
.employee-facts[b-6q0xa913bw] { background: transparent; border: 0; border-radius: 0; padding: 0 0 16px; gap: 12px 32px; }
.employee-avatar[b-6q0xa913bw] { width: 46px; height: 46px; flex-basis: 46px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
@media (max-width: 1100px) {
    .employee-record-layout[b-6q0xa913bw] { grid-template-columns: 170px minmax(0, 680px); gap: 20px; }
    .employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
    .employee-record-layout[b-6q0xa913bw] { display: block; }
    .employee-section-nav[b-6q0xa913bw] { display: none; }
    .employee-section-select[b-6q0xa913bw] { display: block; padding: 0; margin-bottom: 20px; border: 0; }
    .employee-record-checks summary[b-6q0xa913bw] { flex-wrap: wrap; }
    .employee-record-checks summary > .faint[b-6q0xa913bw] { margin-left: 27px; }
    .employee-record[b-6q0xa913bw]  .employee-form-section > .field-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
    .employee-record[b-6q0xa913bw]  .employee-form-section > .field-row > .field:only-child { max-width: none !important; }
    .employee-save-bar .row-inline[b-6q0xa913bw] { flex-wrap: wrap; }
}
/* Recurring allowances and deductions are forms too: their old seven-column table
   squeezed the account picker and required sideways scrolling inside a narrow record. */
.employee-record[b-6q0xa913bw]  .employee-pay-item { padding: 18px 0; border-top: 1px solid var(--line); margin-top: 16px; }
.employee-record[b-6q0xa913bw]  .employee-pay-item:last-child { padding-bottom: 0; }
.employee-record[b-6q0xa913bw]  .employee-pay-item-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; }
.employee-record[b-6q0xa913bw]  .employee-pay-item-fields .field { margin: 0; min-width: 0; }
.employee-record[b-6q0xa913bw]  .employee-pay-item-fields + .employee-pay-item-fields { margin-top: 14px; }
.employee-record[b-6q0xa913bw]  .employee-pay-item-remove { grid-column: 1 / -1; text-align: right; }
.employee-record[b-6q0xa913bw]  .employee-payee { grid-column: 1 / -1; }
@media (max-width: 767px) {
    .employee-record[b-6q0xa913bw]  .employee-pay-item-fields { grid-template-columns: minmax(0, 1fr); }
}
.employee-record[b-6q0xa913bw]  .employee-form-section .section-title { text-transform: none; letter-spacing: normal; color: var(--ink); border-top: 0; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row { margin-bottom: 18px; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .field-row > .field { margin-bottom: 0; }
.employee-record[b-6q0xa913bw]  .employee-pay-items .section-title { padding-top: 0; }

.employee-record[b-6q0xa913bw]  .settings-preference-copy a { text-decoration: underline; text-underline-offset: 2px; }
/* /Components/Pages/Payroll/PayPeriodSetupWizard.razor.rz.scp.css */
/* A setup form and short preview table do not need the width of a payroll register. */
.page-head[b-bkvfezmbdk], .worksheet[b-bkvfezmbdk] { max-width: 1100px; }
/* /Components/Pages/Payroll/PayRunReviewPage.razor.rz.scp.css */
/* Setup has a form-sized heading; an existing run keeps room for its worksheet. */
.pay-setup-heading[b-39f2pzzjf2] { max-width: 980px; }

/* The "Why" column of the employee pay review: the money columns do not wrap, so without a floor the note was squeezed to
   one word per line beside the run panel (browser check 2026-09-30). The table already scrolls inside its card. */
.review-rows td:nth-child(2)[b-39f2pzzjf2] { min-width: 12rem; }
/* /Components/Pages/Payroll/Review/PayRunSetup.razor.rz.scp.css */
/* Keep the type choices, steps and active form together inside one bounded card. */
.pay-setup[b-jes7ta5khw] { width: 100%; max-width: 980px; padding: 20px; }
.pay-setup-body[b-jes7ta5khw] { max-width: none; min-width: 0; }
.pay-setup > p:last-child[b-jes7ta5khw] { margin: 0; }
.pay-setup .callout a[b-jes7ta5khw] { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 640px) {
    .pay-setup[b-jes7ta5khw] { padding: 16px; }
    .pay-process-rail button[b-jes7ta5khw] { padding: 10px 6px; gap: 6px; align-items: flex-start; }
    .pay-process-rail strong[b-jes7ta5khw], .pay-process-rail small[b-jes7ta5khw] { white-space: normal; }
}
/* /Components/Pages/Planning/BudgetPage.razor.rz.scp.css */
/* Budget header card: name, year and scope on one row with the two outputs at its end (the scope select used to grow to its
   longest option and push "Print report" onto a line of its own). */
.budget-name-field[b-aygjzjt5ov] { min-width: 200px; }
.budget-scope-field[b-aygjzjt5ov] { max-width: 260px; }
.budget-outputs[b-aygjzjt5ov] { margin-left: auto; }

/* Reforecast: the reason box and its button side by side under the message. */
.budget-reforecast > .field-input[b-aygjzjt5ov] { flex: 1 1 240px; width: auto; max-width: 420px; }

/* A draft's one action sits at the end of its message. */
.budget-draft-callout > .btn[b-aygjzjt5ov] { margin-left: auto; flex-shrink: 0; }

@media (max-width: 720px) {
    /* Phone: each field of the header and filter cards takes the full width, as the scope select already did. */
    .planning-toolbar > .field[b-aygjzjt5ov] { flex: 1 1 100%; max-width: none; min-width: 0; }
    .budget-outputs[b-aygjzjt5ov] { margin-left: 0; }
    .budget-draft-callout[b-aygjzjt5ov] { flex-wrap: wrap; }
    .budget-draft-callout > .btn[b-aygjzjt5ov] { margin-left: 0; }
    /* The grid fits a phone: a narrower account column leaves room for the amount and the row's toggle. */
    .budget-grid th:first-child[b-aygjzjt5ov] { min-width: 120px; }
}
/* /Components/Pages/Planning/CashFlowForecast.razor.rz.scp.css */
/* A manual movement (date, label, amount, Remove) and the save-scenario controls (name, type, Save) are each one row. The
   shared .field-input is width: 100%, which put the label and the scenario name on lines of their own; fixed bases keep the
   row together and let the label take what is left. On a phone the label wraps to its own line and fills it. */
.fc-row[b-935h9ehuxi]  .planning-field-narrow { flex: 0 0 170px; }
.fc-row[b-935h9ehuxi]  .planning-field-medium,
.fc-row[b-935h9ehuxi]  .planning-field-name { flex: 1 1 200px; max-width: 420px; }
.fc-row[b-935h9ehuxi]  .planning-field-amount { flex: 0 0 150px; max-width: none; }

/* Phone: a movement takes three lines (date, label, amount and Remove); a rule under each shows where one ends. */
@media (max-width: 620px) {
    .fc-movement[b-935h9ehuxi] { padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--line-soft); }
    .fc-row[b-935h9ehuxi]  .planning-field-narrow { flex: 1 1 170px; }
}
/* /Components/Pages/Planning/Dashboard.razor.rz.scp.css */
/* A figure that opens where it comes from (the profit and loss, the forecast). Ink, not the link red: a red figure reads as a
   loss. The dotted underline says it can be opened, as on a report (.rpt-table td.num a); the brand colour comes on hover. */
.planning-figure-link[b-mte4kouod0] {
    color: inherit;
    text-decoration: underline dotted var(--ink-faint);
    text-underline-offset: 4px;
}

.planning-figure-link:hover[b-mte4kouod0],
.planning-figure-link:focus-visible[b-mte4kouod0] {
    color: var(--brand-red);
    text-decoration-style: solid;
}
/* /Components/Pages/Platform/PlatformAiUsagePage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pc-table .tr.ai-cols[b-500ed83rq5] { grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr 1.4fr; }
/* /Components/Pages/Platform/PlatformClientDetailPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.cd-facts[b-n4xx2xys70] { border: 1px solid var(--pc-line-soft); border-radius: 8px; }
.pc-table .tr.cd-kv[b-n4xx2xys70] { grid-template-columns: 1fr 1fr; }
.cd-purge[b-n4xx2xys70] { margin-top: 14px; border: 1px solid var(--pc-danger); border-radius: 8px; padding: 14px; background: var(--pc-danger-wash); }
.pc-table .tr.cd-modules[b-n4xx2xys70] { grid-template-columns: 1.3fr .7fr .7fr .8fr 1.3fr; }
.pc-table .tr.cd-state[b-n4xx2xys70] { grid-template-columns: 1fr auto; align-items: center; }
.pc-table .tr.cd-members[b-n4xx2xys70] { grid-template-columns: 2fr 1fr 1fr; }
.pc-table .tr.cd-grants[b-n4xx2xys70] { grid-template-columns: 1fr 1fr 1.4fr 1fr; }
.pc-table .tr.cd-activity[b-n4xx2xys70] { grid-template-columns: 150px 1fr; align-items: start; }
.pc-table .tr.cd-top[b-n4xx2xys70] { align-items: start; }
/* The extra-document blocks a company bought: five columns, like every other table here (it had none, so each row
   stacked its cells as one column). */
.pc-table .tr.cd-blocks[b-n4xx2xys70] { grid-template-columns: 1fr .8fr .8fr 1.6fr 1fr; }
/* A reason field that is meant to take the rest of its row (fill-220) fills it, instead of stopping at .pc-filter's
   320px cap and leaving the row's button stranded at the far end (multi-currency, Easy's AI, support access). */
.fill-220 > .pc-filter[b-n4xx2xys70] { max-width: none; }
/* /Components/Pages/Platform/PlatformClientImportPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.im-facts[b-roa37b0tnp] { border: 1px solid var(--pc-line-soft); border-radius: 8px; margin-top: 14px; }
.pc-table .tr.im-kv[b-roa37b0tnp] { grid-template-columns: 1fr 2fr; }
/* /Components/Pages/Platform/PlatformClientsPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pc-table .tr.cl-cols[b-34ep19b5tz] { grid-template-columns: 2.2fr 1fr 1fr 1.4fr; }
/* The two filter selects size to their options, so the name filter, status and sort sit on one line (each took
   .pc-filter's full 320px and the sort wrapped under the others even at desktop width). */
.pc-inline-form > select.pc-filter[b-34ep19b5tz] { width: auto; }
@media (max-width: 640px) { .pc-inline-form > select.pc-filter[b-34ep19b5tz] { width: 100%; } }
/* /Components/Pages/Platform/PlatformConsolePage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pc-table .tr.ov-cols[b-7b6i0jfe27] { grid-template-columns: 2fr 1fr 1fr; }
/* /Components/Pages/Platform/PlatformOperationsPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pc-table .tr.op-health[b-o9j9hsjy2y] { grid-template-columns: 1.6fr .9fr .9fr .9fr .9fr 2fr; }
.pc-table .tr.op-check[b-o9j9hsjy2y] { grid-template-columns: 1.4fr 1fr 2fr; }
.op-danger[b-o9j9hsjy2y] { color: var(--pc-danger); }
.op-span[b-o9j9hsjy2y] { grid-column: 1 / -1; }
.op-gap[b-o9j9hsjy2y] { width: 14px; }
.op-subsection[b-o9j9hsjy2y] { border-top: 1px solid var(--pc-line); margin-top: 22px; padding-top: 18px; }
.pc-table .tr.op-storage[b-o9j9hsjy2y] { grid-template-columns: 2fr 1fr; }
.pc-table .tr.op-jobs[b-o9j9hsjy2y] { grid-template-columns: 1.4fr .8fr 1fr 1fr .8fr; }
.pc-table .tr.op-failed[b-o9j9hsjy2y] { grid-template-columns: 1.6fr .8fr 2fr .5fr; }
.pc-table .tr.op-activity[b-o9j9hsjy2y] { grid-template-columns: 1fr 1.5fr 1.5fr 2.2fr; }
.pc-field label.op-check-label[b-o9j9hsjy2y] {
    display: flex; align-items: center; gap: 8px; font-size: 13px; text-transform: none; letter-spacing: 0;
    font-weight: 500; color: var(--pc-ink); padding-top: 6px;
}
/* /Components/Pages/Platform/PlatformPipelinePage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pl-group-head[b-049tizqzsu] { border-top: 1px solid var(--pc-line); }
.pc-table .tr.pl-cols[b-049tizqzsu] { grid-template-columns: 2fr 1.6fr 1.2fr 1.4fr .8fr; }
.pc-table .tr.pl-claim[b-049tizqzsu] { text-align: left; width: 100%; background: none; border: 0; font: inherit; cursor: pointer; }
/* The stage filter sizes to its options (as on Clients), so the filter bar keeps "Needs chasing only" on its line. */
.pc-inline-form > select.pc-filter[b-049tizqzsu] { width: auto; }
@media (max-width: 640px) { .pc-inline-form > select.pc-filter[b-049tizqzsu] { width: 100%; } }
/* In the add-prospect form the two selects fill their column like the text fields beside them (they stopped at
   .pc-filter's 320px cap, so their right edges did not line up with the inputs). */
.pc-form-grid select.pc-filter[b-049tizqzsu] { max-width: none; }
/* /Components/Pages/Platform/PlatformProspectDetailPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pr-more-actions[b-eop9apgb61] { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; border-top: 1px solid var(--pc-line); padding-top: 14px; }
.pc-table .tr.pr-log[b-eop9apgb61] { grid-template-columns: 1fr 1fr 4fr 1.4fr; }
/* The contact form's two selects fill their column like the text fields beside them (as on the Pipeline add form). */
.pc-form-grid select.pc-filter[b-eop9apgb61] { max-width: none; }
/* The contact-history kind select sizes to its options, so kind, date, summary and "Log it" share one line. */
.pc-inline-form > select.pc-filter[b-eop9apgb61] { width: auto; }
@media (max-width: 640px) { .pc-inline-form > select.pc-filter[b-eop9apgb61] { width: 100%; } }
/* /Components/Pages/Platform/PlatformReleasesPage.razor.rz.scp.css */
/* The status box above the panels keeps the same gap below it as between panels (the first panel touched it). */
.rel-status[b-96v87vce20] { margin: 0 0 18px; }
.rel-neutral[b-96v87vce20] { background: var(--pc-wash); border: 1px solid var(--pc-line-soft); color: var(--pc-ink-soft); }
/* /Components/Pages/Platform/PlatformSubscriptionPaymentsPage.razor.rz.scp.css */
/* The status line above the panels: it had no tone when card payments are not live, so its text floated on the page
   background, indented by the callout's padding, and the first panel touched it. Now it is a quiet box with the same
   gap below it as between panels. */
.cp-status[b-4qcv33gr46] { margin: 0 0 18px; }
.cp-neutral[b-4qcv33gr46] { background: var(--pc-wash); border: 1px solid var(--pc-line-soft); color: var(--pc-ink-soft); }
/* /Components/Pages/Platform/PlatformSubscriptionsPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.sb-plan[b-aj0y0wa018] { border-bottom: 1px solid var(--pc-line-soft); }
.pc-table .tr.sb-modules[b-aj0y0wa018] { grid-template-columns: 1.4fr 1fr 160px; }
.sb-drafts[b-aj0y0wa018] { margin-top: 16px; border-top: 1px solid var(--pc-line-soft); padding-top: 14px; }
.pc-table .tr.sb-history[b-aj0y0wa018] { grid-template-columns: 1fr 1fr 1fr .8fr 1.8fr auto; align-items: center; }
.sb-box[b-aj0y0wa018] { border: 1px solid var(--pc-line-soft); border-radius: 8px; }
.pc-table .tr.sb-modules[b-aj0y0wa018] { align-items: center; }
/* A plan's price-change draft: the five fields on an even grid (they were a flex row of mixed widths that went ragged
   on a phone and pushed "Draft & preview" onto a line of its own), the buttons on the action row below. */
.sb-draft-grid[b-aj0y0wa018] { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; }
.sb-draft-grid .pc-filter[b-aj0y0wa018] { max-width: none; }
.sb-draft-reason[b-aj0y0wa018] { grid-column: span 2; }
@media (max-width: 640px) { .sb-draft-reason[b-aj0y0wa018] { grid-column: 1 / -1; } }

/* The plan line-up: plans are columns and modules are rows, so moving a module between plans (Easy Core, Easy Plus,
   Enterprise, …) is one cell. It scrolls sideways inside its own box when there are more plans than the screen fits,
   with the row labels pinned, so the page itself never scrolls sideways. */
.sb-lineup-wrap[b-aj0y0wa018] { overflow-x: auto; border-top: 1px solid var(--pc-line-soft); }
.sb-lineup[b-aj0y0wa018] { border-collapse: collapse; width: 100%; font-size: 13px; }
.sb-lineup th[b-aj0y0wa018], .sb-lineup td[b-aj0y0wa018] { padding: 9px 12px; border-bottom: 1px solid var(--pc-line-soft); text-align: left; vertical-align: top; }
.sb-lineup thead th[b-aj0y0wa018] { background: var(--pc-th); vertical-align: bottom; min-width: 180px; }
.sb-lineup .sb-rowhead[b-aj0y0wa018] { position: sticky; left: 0; z-index: 1; background: var(--pc-panel); min-width: 190px; max-width: 240px; font-weight: 600; }
.sb-lineup thead .sb-rowhead[b-aj0y0wa018] { background: var(--pc-th); }
.sb-lineup .sb-rowhead small[b-aj0y0wa018] { display: block; font-weight: 400; color: var(--pc-ink-faint); font-size: 11px; margin-top: 2px; }
.sb-lineup .pc-filter[b-aj0y0wa018] { width: 100%; max-width: none; }
.sb-lineup .sb-name[b-aj0y0wa018] { font-weight: 700; }
.sb-lineup .sb-currency[b-aj0y0wa018] { max-width: 80px; }
.sb-lineup tr.sb-section th[b-aj0y0wa018], .sb-lineup tr.sb-section td[b-aj0y0wa018] { background: var(--pc-th); }
.sb-lineup th.sb-retired[b-aj0y0wa018] { opacity: .7; }
/* A bundled module reads as "in the plan" at a glance; not offered is quiet. */
.sb-lineup td.sb-included[b-aj0y0wa018] { box-shadow: inset 3px 0 0 var(--pc-accent); }
.sb-lineup td.sb-off select[b-aj0y0wa018] { color: var(--pc-ink-faint); }
.sb-newplan[b-aj0y0wa018] { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; align-items: end; }
.sb-newplan .pc-filter[b-aj0y0wa018] { max-width: none; }
/* /Components/Pages/Platform/PlatformSupportAccessPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pc-table .tr.sa-cols[b-7hdrd1bx3m] { grid-template-columns: 1.4fr 1.2fr 1fr 1.4fr 1.4fr .8fr; }
.sa-event[b-7hdrd1bx3m] { font-size: 12.5px; padding: 8px 10px; background: var(--pc-wash); border: 1px solid var(--pc-line-soft); border-radius: 8px; }
/* /Components/Pages/Platform/PlatformTeamPage.razor.rz.scp.css */
/* Operator Console: the layouts this page used to carry as inline styles (UI-13). */
.pc-table .tr.tm-cols[b-ciodlkakpt] { grid-template-columns: 2fr 1fr .9fr 2.2fr; }
.tm-email-note[b-ciodlkakpt] { margin-top: 6px; font-size: 12px; opacity: .75; }
/* /Components/Pages/Purchases/BillEditPage.razor.rz.scp.css */
/* "Line items" sits in a row beside the item picker, so it is not the card's first child and the shared .section-title
   drew its separator rule and top padding above it: a short stray line, and the title lower than the picker's label. */
.lines-head > .section-title[b-wh0xyha614] { border-top: none; padding-top: 0; }

/* "+ New supplier" under the supplier field: a link-sized pill at the start of the field, not a full-width button with its
   text centred (the field is a flex column, which stretched it). */
.field > .pill[b-wh0xyha614] { align-self: flex-start; }
/* /Components/Pages/Purchases/CaptureReviewPage.razor.rz.scp.css */
/* The bill form sits in a fieldset (locked while the document is read), so "Bill" is not the card's first child and the
   shared .section-title drew its separator rule above it, with the "Supplier" label pressed against it below. */
.capture-fieldset > .section-title:first-child[b-pl2upztou6] { border-top: none; padding-top: 0; margin-top: 0; margin-bottom: 12px; }
.capture-lines-title[b-pl2upztou6] { margin-bottom: 10px; }

/* "+ New supplier" under the supplier field: a link-sized pill at the start of the field, not a full-width button with its
   text centred (the field is a flex column, which stretched it). */
.field > .pill[b-pl2upztou6] { align-self: flex-start; }
/* /Components/Pages/Purchases/ExpenseClaimDetailPage.razor.rz.scp.css */
/* The page's messages (approved, declined, a refusal) are as wide as the cards below them, not the whole page. */
.callout[b-ah1q0h51ry] { max-width: 920px; }

/* The cards stack in a one-column grid; minmax(0, 1fr) keeps a wide coding table scrolling inside its card on a phone
   instead of widening the column and pushing every card past the right edge. */
.claim-stack[b-ah1q0h51ry] { grid-template-columns: minmax(0, 1fr); }

/* Approve for the next payslip: "Confirm" lines up with the account select, not with its label. */
.claim-payslip-row[b-ah1q0h51ry] { align-items: flex-end; }

/* Decline: the reason box takes the row and the button sits beside it (the box was full width, so the button wrapped). */
.claim-decline-row > .field-input[b-ah1q0h51ry] { flex: 1 1 180px; width: auto; min-width: 0; }

/* Coding the lines for a bill: the account and tax selects keep a usable width; on a phone the table scrolls inside its card
   rather than squeezing them to a letter each. */
.claim-stack td > select.field-input[b-ah1q0h51ry] { min-width: 110px; }
/* /Components/Pages/Purchases/ExpenseClaimEditPage.razor.rz.scp.css */
/* A claim line: the remove (×) button sits level with its inputs, not at their top edge. */
.claim-line[b-21ko0gpd0j] { align-items: center; }
/* /Components/Pages/Purchases/LandedCostNewPage.razor.rz.scp.css */
/* The spread table has up to eight figure columns, whose long headings ("Freight · BILL-2026-0049", "Unit cost with costs")
   left the item name one word per line. The item keeps a readable width, and the headings may wrap onto two lines so the
   table still fits a desktop card without scrolling. */
.lc-item-cell[b-s2zrcfp5hi] { min-width: 130px; }
.lc-spread th[b-s2zrcfp5hi] { white-space: normal; }
/* /Components/Pages/Purchases/OverduePayablesPage.razor.rz.scp.css */
/* The two groups of "Supplier bills due" (owner decision P5) each open with a heading. */
.bills-due-heading[b-3jo705q4cz] {
    margin: 18px 0 8px;
    font-size: var(--type-section-title);
    font-weight: 600;
}

/* The supplier filter sits beside the date as a filter, not as a full-width field on a line of its own. */
.due-supplier-filter[b-3jo705q4cz] { width: auto; flex: 0 1 280px; }
/* /Components/Pages/Purchases/PaymentRunPage.razor.rz.scp.css */
/* The "Cancel this payment run?" and "Reverse this run?" confirmations: a red-edged card, the same shape as a purchase
   order's close confirmation (was an inline style). */
.run-confirm-card[b-d4jw4dqwmf] {
    padding: 18px 20px;
    margin-bottom: 14px;
    border-color: var(--brand-red);
    max-width: 560px;
}
.run-confirm-card-wide[b-d4jw4dqwmf] { max-width: 620px; }

/* The run summary: a figure and a status never break mid-way ("$1,769.1" / "6", "Ready to" / "post"). */
.payment-run-summary-card dd.num[b-d4jw4dqwmf] { overflow-wrap: normal; white-space: nowrap; }
.payment-run-summary-card[b-d4jw4dqwmf]  .badge { white-space: nowrap; }
.run-audit-meta[b-d4jw4dqwmf] { display: flex; flex-wrap: wrap; column-gap: 20px; row-gap: 2px; }

/* Step 1: the supplier's reference sits a space away from the bill number. */
.run-bill-ref[b-d4jw4dqwmf] { margin-left: 4px; }
/* /Components/Pages/Purchases/PurchaseOrderDetailPage.razor.rz.scp.css */
/* "Close order" confirmation (owner decision P4): the same shape as a payment run's cancel card. */
.po-close-confirm[b-6m5flkayab] {
    padding: 18px 20px;
    margin-bottom: 14px;
    border-color: var(--brand-red);
    max-width: 560px;
}

/* The approval card: its buttons sit clear of the text or help line above them. */
.po-approval-actions[b-6m5flkayab] { margin-top: 10px; }
/* /Components/Pages/Purchases/PurchaseOrderEditPage.razor.rz.scp.css */
/* "Line items" sits in a row beside the item picker, so it is not the card's first child and the shared .section-title
   drew its separator rule and top padding above it: a short stray line, and the title lower than the picker's label. */
.lines-head > .section-title[b-y9ee7un9sm] { border-top: none; padding-top: 0; }
/* /Components/Pages/Purchases/SupplierEditPage.razor.rz.scp.css */
/* The page's messages (new supplier to confirm, bank change to confirm, the tax-office note) are as wide as the form cards
   below them, not the whole page. */
.callout[b-37pq49v3kv] { max-width: 920px; }

/* "Confirm supplier": right-aligned under the reason, a little clear of the help line, as "Confirm my change" is below. */
.confirm-actions[b-37pq49v3kv] { justify-content: flex-end; margin-top: 10px; }
/* /Components/Pages/Purchases/SupplierStatementPage.razor.rz.scp.css */
/* A date or document number in the statement never wraps: a column of figures reads down the page. */
.stmt-nowrap[b-diboie2voo] { white-space: nowrap; }
/* /Components/Pages/Reports/BalanceSheetReportPage.razor.rz.scp.css */
/* The columns editor lines up with the card's other rows ("Columns —", "+ Add column", the dimension): its first cell had the
   table's cell padding, which set the date inputs and their headings 14px in from everything else (Wave 3). */
.rpt-columns th:first-child[b-m9fy458lg8], .rpt-columns td:first-child[b-m9fy458lg8] { padding-left: 0; }
.rpt-columns th:last-child[b-m9fy458lg8], .rpt-columns td:last-child[b-m9fy458lg8] { padding-right: 0; }
/* /Components/Pages/Reports/CompanyTaxReturnPage.razor.rz.scp.css */
/* The RM6 page lays its boxes out with the RM205 sheet's classes; scoped CSS only reaches its own component, so the page
   carries the same rules (they were missing, and the RM6 boxes rendered unstyled). Keep in step with VatPayeReturnPage.razor.css. */
.rm205-sheet[b-6uw1l1dqpo] {
    max-width: 1060px;
    margin-inline: auto;
    overflow: hidden;
    color: var(--ink);
    background: var(--surface);
}

.rm205-ministry-head[b-6uw1l1dqpo],
.rm205-title-row[b-6uw1l1dqpo] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.rm205-ministry-head[b-6uw1l1dqpo] {
    padding: 18px 20px 14px;
    border-bottom: 3px solid var(--ink);
}

.rm205-ministry-head div[b-6uw1l1dqpo] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rm205-ministry-head strong[b-6uw1l1dqpo] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    letter-spacing: .01em;
}

.rm205-ministry-head span[b-6uw1l1dqpo] {
    font-size: 11.5px;
}

.rm205-ministry-head b[b-6uw1l1dqpo] {
    font-size: 16px;
}

.rm205-title-row[b-6uw1l1dqpo] {
    padding: 10px 20px;
    border-bottom: 2px solid var(--ink);
}

.rm205-title-row h2[b-6uw1l1dqpo] {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    letter-spacing: .02em;
}

.rm205-title-row strong[b-6uw1l1dqpo] {
    font-size: 13px;
}

.rm205-identity[b-6uw1l1dqpo] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 24px;
    padding: 14px 20px;
    border-bottom: 3px solid var(--ink);
}

.rm205-identity-business[b-6uw1l1dqpo] {
    display: grid;
    gap: 10px;
}

.rm205-identity-business > div[b-6uw1l1dqpo] {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: start;
    min-height: 34px;
}

/* The RM6 address has no box number (the RM205's has box 3), so its value takes the whole second column: the three-column
   layout copied from the RM205 put it in the 32px box-number slot, a word a line spilling out of its border (Wave 3). */
.rm205-identity-business > .rm205-address-line[b-6uw1l1dqpo] {
    grid-template-columns: 70px 1fr;
}

.rm205-identity-business span[b-6uw1l1dqpo],
.rm205-sheet[b-6uw1l1dqpo]  .rm205-meta-label {
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

.rm205-identity-business strong[b-6uw1l1dqpo],
.rm205-sheet[b-6uw1l1dqpo]  .rm205-meta-value {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--ink);
    font-size: 12px;
    line-height: 1.45;
}

.rm205-identity-fields[b-6uw1l1dqpo] {
    display: grid;
    align-content: start;
}

.rm205-identity-fields[b-6uw1l1dqpo]  .rm205-identity-line {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 32px minmax(140px, 1.2fr);
    align-items: stretch;
}

.rm205-identity-fields[b-6uw1l1dqpo]  .rm205-identity-line:has(.rm205-meta-label + .rm205-meta-value) {
    grid-template-columns: minmax(132px, 1fr) minmax(140px, 1.2fr);
}

.rm205-sheet[b-6uw1l1dqpo]  .rm205-meta-label {
    padding-right: 8px;
}

.rm205-sheet[b-6uw1l1dqpo]  .rm205-box-no {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid var(--ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.rm205-sheet[b-6uw1l1dqpo]  .rm205-box-no-empty {
    border-color: transparent;
}

.rm205-sheet[b-6uw1l1dqpo]  .rm205-meta-value {
    display: flex;
    align-items: center;
    border-left: 0;
    font-weight: 600;
}

.rm205-section[b-6uw1l1dqpo] {
    display: grid;
    grid-template-columns: 175px minmax(0, 1fr);
    border-bottom: 3px solid var(--ink);
}

.rm205-section-title[b-6uw1l1dqpo] {
    padding: 14px 14px 16px 20px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.rm205-lines[b-6uw1l1dqpo] {
    min-width: 0;
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px 170px;
    align-items: stretch;
    min-height: 38px;
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-line-label {
    align-self: center;
    padding: 7px 12px;
    font-size: 12.5px;
    line-height: 1.35;
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-line .rm205-box-no {
    min-height: 38px;
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 7px 10px;
    border-top: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-line:last-child .rm205-amount {
    border-bottom: 1px solid var(--ink);
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-emphasis .rm205-line-label,
.rm205-lines[b-6uw1l1dqpo]  .rm205-emphasis .rm205-amount {
    font-weight: 800;
    background: var(--surface-sunk);
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-edit-line .rm205-line-label,
.rm205-lines[b-6uw1l1dqpo]  .rm205-edit-line .rm205-amount {
    background: var(--brand-red-wash);
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-edit-amount {
    padding: 3px 5px;
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-number-input {
    width: 100%;
    height: var(--control-height-sm);
    padding: 3px 7px;
    border-color: var(--line-strong);   /* amount fields you type into keep a visible border, even on the tinted edit rows */
    background: var(--surface);
    text-align: right;
}

.rm205-vat-result[b-6uw1l1dqpo] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 3px solid var(--ink);
    font-size: 13px;
}

.rm205-vat-result span[b-6uw1l1dqpo] {
    min-width: 170px;
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

.rm205-paye-title[b-6uw1l1dqpo] {
    padding-block: 9px;
}

.rm205-paye-section[b-6uw1l1dqpo] {
    grid-template-columns: minmax(175px, 1fr) minmax(460px, 1.25fr);
}

.rm205-lines[b-6uw1l1dqpo]  .rm205-meta-line .rm205-line-label {
    font-weight: 650;
}

.rm205-declaration[b-6uw1l1dqpo] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(220px, .65fr);
    gap: 14px;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 3px solid var(--ink);
    font-size: 12.5px;
}

.rm205-declaration > span[b-6uw1l1dqpo] {
    font-style: italic;
    font-weight: 650;
}

.rm205-signature-line[b-6uw1l1dqpo] {
    padding: 18px 4px 3px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink-faint);
    font-size: 10.5px;
    text-align: center;
}

.rm205-payment[b-6uw1l1dqpo] {
    display: grid;
    grid-template-columns: minmax(230px, .75fr) minmax(460px, 1.25fr);
    gap: 24px;
    padding: 16px 20px 20px;
}

.rm205-payment > div:first-child[b-6uw1l1dqpo] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
}

.rm205-payment small[b-6uw1l1dqpo] {
    margin-top: 12px;
    color: var(--ink-faint);
    line-height: 1.45;
}

@media (max-width: 900px) {
    .rm205-sheet[b-6uw1l1dqpo] {
        overflow-x: auto;
    }

    .rm205-ministry-head[b-6uw1l1dqpo],
    .rm205-title-row[b-6uw1l1dqpo],
    .rm205-identity[b-6uw1l1dqpo],
    .rm205-section[b-6uw1l1dqpo],
    .rm205-vat-result[b-6uw1l1dqpo],
    .rm205-declaration[b-6uw1l1dqpo],
    .rm205-payment[b-6uw1l1dqpo] {
        min-width: 760px;
    }
}

/* The small capitals above each fact in the period card (was an inline style). */
.rm6-kicker[b-6uw1l1dqpo] { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }

/* Box 12 opens the year's profit and loss: ink with a dotted underline, as a figure on a report (§2.1). */
.rm6-drill[b-6uw1l1dqpo] { color: inherit; text-decoration: underline dotted var(--ink-faint); text-underline-offset: 3px; }
.rm6-drill:hover[b-6uw1l1dqpo], .rm6-drill:focus-visible[b-6uw1l1dqpo] { color: var(--brand-red); text-decoration-style: solid; }

/* Beside the year box: the balance date the chosen year ends on (owner decision A3), so "2026" is never read as a calendar year. */
.rm6-balance-date[b-6uw1l1dqpo] {
    align-self: flex-end;
    display: flex;
    align-items: center;
    min-height: var(--control-height);
    font-size: 13px;
}
/* /Components/Pages/Reports/ComplianceHome.razor.rz.scp.css */
/* Wave 3. The status strip's facts line up along their top edge (the one-line "VAT registration" sat lower than its
   neighbours), and a card's status pill never breaks inside ("To / prepare"). */
.compliance-status-strip[b-fahv9y564u] { align-items: flex-start; }
.compliance-card-meta[b-fahv9y564u] { flex-wrap: wrap; }
.compliance-card-meta .badge[b-fahv9y564u] { white-space: nowrap; }

/* On a phone the facts stack, one under the other with a rule between, instead of wrapping into indented half-columns with
   their side rules left standing. */
@media (max-width: 767px) {
    .compliance-status-strip[b-fahv9y564u] { flex-direction: column; align-items: stretch; row-gap: 0; }
    .compliance-status-strip .compliance-status-item[b-fahv9y564u] { padding: 10px 0; border-right: 0; }
    .compliance-status-strip .compliance-status-item:first-child[b-fahv9y564u] { padding-top: 0; }
    .compliance-status-strip .compliance-status-item:last-child[b-fahv9y564u] { padding-bottom: 0; }
    .compliance-status-strip .compliance-status-item + .compliance-status-item[b-fahv9y564u] { border-top: 1px solid var(--line-soft); }
}
/* /Components/Pages/Reports/IndividualTaxReturnPage.razor.rz.scp.css */
/* The RM5 worksheet (docs/PLAN-RM5-RM6-SCHEDULES.md §6): step panels, row tables like the RM6 schedules, and the box lines
   the RM6 sheet uses (box number in a square, amount right-aligned). Tokens only, so dark mode follows app.css. */

.rm5-heading[b-4aidh9r63r] {
    margin: 0 0 12px;
    font-size: 16px;
}

.rm5-subheading[b-4aidh9r63r] {
    margin: 18px 0 8px;
    font-size: 14px;
}

.rm5-grid[b-4aidh9r63r] {
    width: 100%;
}

.rm5-grid td[b-4aidh9r63r] {
    padding: 6px 6px;
    vertical-align: top;
}

.rm5-grid th[b-4aidh9r63r] {
    padding: 8px 6px;
    white-space: normal;
}

.rm5-grid[b-4aidh9r63r]  .field-input {
    width: 100%;
    min-width: 90px;
}

.rm5-grid td.num[b-4aidh9r63r]  .field-input {
    min-width: 100px;
}

.rm5-grid tr.rm5-total td[b-4aidh9r63r] {
    font-weight: 700;
    background: var(--surface-sunk);
}

/* A certificate brought in from Easy payroll: a quiet wash, like an RM6 row filled from the books. */
.rm5-grid tr.rm5-imported td[b-4aidh9r63r] {
    background: var(--info-wash);
}

.rm5-add[b-4aidh9r63r] {
    margin-top: 8px;
}

.rm5-check[b-4aidh9r63r] {
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 12.5px;
    white-space: nowrap;
}

.rm5-import[b-4aidh9r63r] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.rm5-yesno-grid[b-4aidh9r63r] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 8px 16px;
}

.rm5-lines[b-4aidh9r63r] {
    display: grid;
    margin-top: 14px;
    border-top: 1px solid var(--line);
}

.rm5-line[b-4aidh9r63r] {
    display: grid;
    grid-template-columns: 1fr 52px 140px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--line-soft);
}

.rm5-line.rm5-emphasis[b-4aidh9r63r] {
    font-weight: 700;
    background: var(--surface-sunk);
}

.rm5-line-label[b-4aidh9r63r] {
    padding-left: 4px;
}

.rm5-box-no[b-4aidh9r63r] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    font-size: 12px;
}

.rm5-box-no-empty[b-4aidh9r63r] {
    border-color: transparent;
}

.rm5-amount[b-4aidh9r63r] {
    padding-right: 6px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.rm5-verify[b-4aidh9r63r] {
    margin-top: 12px;
    padding: 8px 12px;
    border: 1px dashed var(--warn-line);
    border-radius: var(--radius-sm);
    background: var(--warn-wash);
    color: var(--warn-ink);
    font-weight: 700;
    font-size: 13px;
}

/* Row tables scroll inside the panel on a narrow window instead of pushing the worksheet sideways. */
.rm5-panel[b-4aidh9r63r] {
    min-width: 0;
}

.rm5-scroll[b-4aidh9r63r] {
    max-width: 100%;
    overflow-x: auto;
}

.rm5-yesno-grid[b-4aidh9r63r] {
    align-items: end;
}

@media (max-width: 640px) {
    .rm5-line[b-4aidh9r63r] {
        grid-template-columns: 1fr 40px 110px;
        gap: 6px;
        font-size: 13px;
    }
}
/* /Components/Pages/Reports/MonthlyReturnsPage.razor.rz.scp.css */
/* The return-to-prepare card's small capitals and month (were inline styles). */
.return-current-kicker[b-b7c5sc7orw] { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.return-current-month[b-b7c5sc7orw] { font-size: 22px; font-weight: 700; letter-spacing: -.02em; margin-top: 3px; }

/* Wave 3. On a phone the card stacks: its figures above, the button below at full width, instead of squeezing the figures into
   a column a word wide beside the button. */
@media (max-width: 640px) {
    .return-current[b-b7c5sc7orw] { flex-direction: column; align-items: stretch; }
    .return-current > .btn[b-b7c5sc7orw] { justify-content: center; }
}

/* The filed months: a month and a "Paid 18 Sep 2026" pill stay on one line; the table scrolls inside its box on a phone. */
.return-filed-table[b-b7c5sc7orw] { min-width: 560px; }
.return-filed-table td:first-child[b-b7c5sc7orw], .return-filed-table .badge[b-b7c5sc7orw] { white-space: nowrap; }
/* /Components/Pages/Reports/OwnerMoneyReportPage.razor.rz.scp.css */
.owner-report-filters[b-g6nd0zoary] { padding: 12px 16px; margin-bottom: 14px; display: flex; gap: 12px; align-items: end; flex-wrap: wrap; }
.owner-report-card[b-g6nd0zoary] { margin-bottom: 18px; }
.owner-report-summary[b-g6nd0zoary] { min-width: 720px; }
.owner-report-movements[b-g6nd0zoary] { min-width: 820px; }
.owner-report-description[b-g6nd0zoary] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owner-report-heading[b-g6nd0zoary] { font-size: 15px; margin: 4px 0 10px; }
/* /Components/Pages/Reports/ProfitLossReportPage.razor.rz.scp.css */
/* The columns editor lines up with the card's other rows ("Columns —", "+ Add column", the dimension): its first cell had the
   table's cell padding, which set the date inputs and their headings 14px in from everything else (Wave 3). */
.rpt-columns th:first-child[b-iitxuls0zs], .rpt-columns td:first-child[b-iitxuls0zs] { padding-left: 0; }
.rpt-columns th:last-child[b-iitxuls0zs], .rpt-columns td:last-child[b-iitxuls0zs] { padding-right: 0; }
/* /Components/Pages/Reports/RealisedFxReportPage.razor.rz.scp.css */
/* The two wide tables keep the minimum widths they had (they scroll sideways on a phone rather than squeeze). */
.rfx-by-currency[b-7pqi8n3pbq] { min-width: 640px; }
.rfx-lines[b-7pqi8n3pbq] { min-width: 980px; }
/* /Components/Pages/Reports/ReportsHome.razor.rz.scp.css */
/* The hub sits on the page's own gutter and opens with the house page head (title, one line, guide link), as every other page
   does; it had its own padded header with the guide link above the description (Wave 3). */
.reports-home[b-vpd0g9xrqc] { padding: 0 0 24px; }
.reports-home .reports-group-heading:first-of-type[b-vpd0g9xrqc] { margin-top: 8px; }

/* Every group keeps the same column width: a group of two (Planning) no longer stretches its cards to half the page each. */
.reports-grid[b-vpd0g9xrqc] { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }
/* /Components/Pages/Reports/Rm6SchedulesEditor.razor.rz.scp.css */
.rm6-schedules[b-eakop906c3] {
    margin-top: 14px;
    padding: 0;
    overflow: hidden;
}

.rm6-schedules-head[b-eakop906c3] {
    padding: 16px 18px 10px;
}

.rm6-schedules-head h2[b-eakop906c3] {
    margin: 0 0 8px;
    font-size: 16px;
}

.rm6-schedules-sub[b-eakop906c3] {
    margin: 8px 0 0;
    font-size: 12.5px;
}

/* The accountant's check: the same sentence every printed schedule page carries. */
.rm6-verify[b-eakop906c3] {
    padding: 8px 12px;
    border: 1px dashed var(--warn-line);
    border-radius: var(--radius-sm);
    background: var(--warn-wash);
    color: var(--warn-ink);
    font-weight: 700;
    font-size: 13px;
}

.rm6-tab-body[b-eakop906c3] {
    padding: 14px 18px 18px;
    overflow-x: auto;
}

.rm6-count[b-eakop906c3] {
    margin-left: 6px;
}

.rm6-grid td[b-eakop906c3] {
    padding: 6px 6px;
    vertical-align: top;
}

.rm6-grid th[b-eakop906c3] {
    padding: 8px 6px;
    white-space: normal;
}

.rm6-grid[b-eakop906c3]  .field-input {
    width: 100%;
    min-width: 90px;
}

.rm6-grid td.num[b-eakop906c3]  .field-input {
    min-width: 100px;
}

.rm6-grid tr.rm6-total td[b-eakop906c3] {
    font-weight: 700;
    background: var(--surface-sunk);
}

.rm6-check[b-eakop906c3] {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-bottom: 4px;
    font-size: 12.5px;
    white-space: nowrap;
}

.rm6-add[b-eakop906c3] {
    margin-top: 10px;
}

.rm6-yesno[b-eakop906c3] {
    max-width: 220px;
}

/* "Fill from the books" (docs/PLAN-RM5-RM6-SCHEDULES.md §2): the choices, the button and what it did. */
.rm6-books-all[b-eakop906c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-top: 10px;
}

.rm6-books[b-eakop906c3] {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid var(--info-line);
    border-radius: var(--radius-sm);
    background: var(--info-wash);
}

.rm6-books-actions[b-eakop906c3] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.rm6-source summary[b-eakop906c3] {
    cursor: pointer;
    font-weight: 600;
    font-size: 13px;
}

.rm6-choice-list[b-eakop906c3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 2px 16px;
    max-height: 220px;
    margin-top: 6px;
    overflow-y: auto;
}

.rm6-choice-list .rm6-check[b-eakop906c3] {
    white-space: normal;
}

.rm6-choice-list .num[b-eakop906c3] {
    margin-left: auto;
}

/* A row "Fill from the books" made: a quiet wash, so typed rows stand apart. */
.rm6-grid tr.rm6-book-row td[b-eakop906c3] {
    background: var(--info-wash);
}
/* /Components/Pages/Reports/TaxAuditPage.razor.rz.scp.css */
.tax-audit-page-head[b-q7in264rw0] {
    align-items: center;
}

.tax-audit-actions[b-q7in264rw0] {
    flex: none;
}

.tax-audit-toolbar[b-q7in264rw0] {
    display: grid;
    grid-template-columns: minmax(170px, 210px) minmax(220px, 1fr) minmax(180px, 220px) minmax(120px, auto);
    gap: 16px;
    align-items: end;
    padding: 14px 16px;
    margin-bottom: 14px;
}

.tax-audit-control[b-q7in264rw0],
.tax-audit-period[b-q7in264rw0],
.tax-audit-basis[b-q7in264rw0] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 6px;
}

.tax-audit-control .field-label[b-q7in264rw0],
.tax-audit-period .field-label[b-q7in264rw0],
.tax-audit-basis .field-label[b-q7in264rw0] {
    margin: 0;
}

.tax-audit-control .field-input[b-q7in264rw0] {
    width: 100%;
    height: var(--control-height);
    padding: 0 10px;
}

.tax-audit-period strong[b-q7in264rw0],
.tax-audit-basis strong[b-q7in264rw0] {
    min-height: var(--control-height);
    display: flex;
    align-items: center;
    font-size: 12.5px;
    line-height: 1.35;
}

.tax-audit-basis strong[b-q7in264rw0] {
    width: fit-content;
    min-height: 26px;
    /* Centred on the row of controls, so its label lines up with the other labels (Wave 3). */
    margin-block: calc((var(--control-height) - 26px) / 2);
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--surface-sunk);
    color: var(--ink-soft);
    font-size: 11.5px;
}

.tax-audit-group[b-q7in264rw0] {
    margin-bottom: 14px;
}

.tax-audit-group-head[b-q7in264rw0],
.tax-audit-tie-head[b-q7in264rw0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
}

.tax-audit-group-head h2[b-q7in264rw0],
.tax-audit-tie-head h2[b-q7in264rw0],
.tax-audit-net h2[b-q7in264rw0] {
    margin: 0;
    font-size: 15px;
    line-height: 1.35;
}

.tax-audit-group-head p[b-q7in264rw0],
.tax-audit-tie-head p[b-q7in264rw0],
.tax-audit-net p[b-q7in264rw0] {
    margin: 3px 0 0;
    color: var(--ink-faint);
    font-size: 11.5px;
    line-height: 1.45;
}

.tax-audit-group-metrics[b-q7in264rw0] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: none;
    min-height: 24px;
}

.tax-audit-group-metrics span[b-q7in264rw0] {
    color: var(--ink-faint);
    font-size: 11.5px;
}

.tax-audit-group-metrics strong[b-q7in264rw0] {
    font-size: 13px;
    white-space: nowrap;
}

.tax-audit-group-empty[b-q7in264rw0] {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 20px 16px;
}

.tax-audit-empty-mark[b-q7in264rw0] {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--surface-sunk);
    color: var(--ink-faint);
    font-size: 12px;
    font-weight: 800;
}

.tax-audit-group-empty div[b-q7in264rw0] {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 2px;
}

.tax-audit-group-empty strong[b-q7in264rw0] {
    font-size: 12.5px;
}

.tax-audit-group-empty div > span[b-q7in264rw0] {
    color: var(--ink-faint);
    font-size: 11.5px;
}

.tax-audit-table-scroll[b-q7in264rw0] {
    width: 100%;
    overflow-x: auto;
}

.tax-audit-table-scroll:focus-visible[b-q7in264rw0] {
    outline: 3px solid var(--brand-red-wash);
    outline-offset: -3px;
}

.tax-audit-grid[b-q7in264rw0] {
    min-width: 980px;
}

/* A line's date stays on one line ("1 Aug 2026", not "1 Aug / 2026"). */
.tax-audit-grid td:first-child[b-q7in264rw0] {
    white-space: nowrap;
}

.tax-audit-code-summary[b-q7in264rw0] {
    border-top: 1px solid var(--line);
}

.tax-audit-code-summary > summary[b-q7in264rw0] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: var(--surface-sunk);
    cursor: pointer;
    list-style: none;
    font-size: 12px;
    font-weight: 650;
}

.tax-audit-code-summary > summary[b-q7in264rw0]::-webkit-details-marker {
    display: none;
}

.tax-audit-code-summary > summary[b-q7in264rw0]::before {
    color: var(--ink-faint);
    content: "▸";
}

.tax-audit-code-summary[open] > summary[b-q7in264rw0]::before {
    content: "▾";
}

.tax-audit-code-summary > summary .faint[b-q7in264rw0] {
    margin-left: auto;
    font-weight: 500;
}

.tax-audit-net[b-q7in264rw0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 16px 18px;
    margin-bottom: 14px;
    border-left: 3px solid var(--brand-red);
}

.tax-audit-kicker[b-q7in264rw0] {
    display: block;
    margin-bottom: 3px;
    color: var(--brand-red);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tax-audit-net-value[b-q7in264rw0] {
    flex: none;
    font-size: 22px;
    letter-spacing: -.02em;
    white-space: nowrap;
}

.tax-audit-tie[b-q7in264rw0] {
    margin-bottom: 14px;
}

.tax-audit-tie-head[b-q7in264rw0] {
    align-items: center;
}

.tax-audit-recon[b-q7in264rw0] {
    min-width: 700px;
}

.tax-audit-recon th[b-q7in264rw0] {
    padding: 9px 12px;
    border-bottom: 1px solid var(--line);
    color: var(--ink-faint);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .03em;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.tax-audit-recon th:nth-child(n + 2):nth-child(-n + 4)[b-q7in264rw0] {
    text-align: right;
}

.tax-audit-tie-note[b-q7in264rw0] {
    margin: 0;
    padding: 12px 16px;
    border-top: 1px solid var(--line-soft);
    color: var(--ink-soft);
    font-size: 11.5px;
    line-height: 1.5;
}

@media (max-width: 900px) {
    .tax-audit-toolbar[b-q7in264rw0] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .tax-audit-page-head[b-q7in264rw0],
    .tax-audit-group-head[b-q7in264rw0],
    .tax-audit-tie-head[b-q7in264rw0],
    .tax-audit-net[b-q7in264rw0] {
        align-items: stretch;
        flex-direction: column;
    }

    .tax-audit-actions[b-q7in264rw0] {
        align-items: stretch;
    }

    .tax-audit-actions .btn[b-q7in264rw0] {
        justify-content: center;
    }

    .tax-audit-toolbar[b-q7in264rw0] {
        grid-template-columns: 1fr;
    }

    .tax-audit-group-metrics[b-q7in264rw0] {
        justify-content: space-between;
    }

    .tax-audit-net-value[b-q7in264rw0] {
        align-self: flex-start;
    }
}
/* /Components/Pages/Reports/TrialBalanceReportPage.razor.rz.scp.css */
/* The columns editor lines up with the card's other rows ("Columns —", "+ Add column", the dimension): its first cell had the
   table's cell padding, which set the date inputs and their headings 14px in from everything else (Wave 3). */
.rpt-columns th:first-child[b-0ayc3hbfjs], .rpt-columns td:first-child[b-0ayc3hbfjs] { padding-left: 0; }
.rpt-columns th:last-child[b-0ayc3hbfjs], .rpt-columns td:last-child[b-0ayc3hbfjs] { padding-right: 0; }
/* /Components/Pages/Reports/VatPayeReturnPage.razor.rz.scp.css */
.rm205-sheet[b-va890s7n1m] {
    max-width: 1060px;
    margin-inline: auto;
    overflow: hidden;
    color: var(--ink);
    background: var(--surface);
}

.rm205-ministry-head[b-va890s7n1m],
.rm205-title-row[b-va890s7n1m] {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.rm205-ministry-head[b-va890s7n1m] {
    padding: 18px 20px 14px;
    border-bottom: 3px solid var(--ink);
}

.rm205-ministry-head div[b-va890s7n1m] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rm205-ministry-head strong[b-va890s7n1m] {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 18px;
    letter-spacing: .01em;
}

.rm205-ministry-head span[b-va890s7n1m] {
    font-size: 11.5px;
}

.rm205-ministry-head b[b-va890s7n1m] {
    font-size: 16px;
}

.rm205-title-row[b-va890s7n1m] {
    padding: 10px 20px;
    border-bottom: 2px solid var(--ink);
}

.rm205-title-row h2[b-va890s7n1m] {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    letter-spacing: .02em;
}

.rm205-title-row strong[b-va890s7n1m] {
    font-size: 13px;
}

.rm205-identity[b-va890s7n1m] {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
    gap: 24px;
    padding: 14px 20px;
    border-bottom: 3px solid var(--ink);
}

.rm205-identity-business[b-va890s7n1m] {
    display: grid;
    gap: 10px;
}

.rm205-identity-business > div[b-va890s7n1m] {
    display: grid;
    grid-template-columns: 70px 1fr;
    align-items: start;
    min-height: 34px;
}

.rm205-identity-business > .rm205-address-line[b-va890s7n1m] {
    grid-template-columns: 70px 32px 1fr;
}

.rm205-address-line strong[b-va890s7n1m] {
    border-left: 0;
}

.rm205-identity-business span[b-va890s7n1m],
.rm205-sheet[b-va890s7n1m]  .rm205-meta-label {
    padding-top: 8px;
    font-size: 12px;
    font-weight: 700;
}

.rm205-identity-business strong[b-va890s7n1m],
.rm205-sheet[b-va890s7n1m]  .rm205-meta-value {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid var(--ink);
    font-size: 12px;
    line-height: 1.45;
}

.rm205-identity-fields[b-va890s7n1m] {
    display: grid;
    align-content: start;
}

.rm205-identity-fields[b-va890s7n1m]  .rm205-identity-line {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) 32px minmax(140px, 1.2fr);
    align-items: stretch;
}

.rm205-identity-fields[b-va890s7n1m]  .rm205-identity-line:has(.rm205-meta-label + .rm205-meta-value) {
    grid-template-columns: minmax(132px, 1fr) minmax(140px, 1.2fr);
}

.rm205-sheet[b-va890s7n1m]  .rm205-meta-label {
    padding-right: 8px;
}

.rm205-sheet[b-va890s7n1m]  .rm205-box-no {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border: 1px solid var(--ink);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

.rm205-sheet[b-va890s7n1m]  .rm205-box-no-empty {
    border-color: transparent;
}

.rm205-sheet[b-va890s7n1m]  .rm205-meta-value {
    display: flex;
    align-items: center;
    border-left: 0;
    font-weight: 600;
}

.rm205-section[b-va890s7n1m] {
    display: grid;
    grid-template-columns: 175px minmax(0, 1fr);
    border-bottom: 3px solid var(--ink);
}

.rm205-section-title[b-va890s7n1m] {
    padding: 14px 14px 16px 20px;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.rm205-lines[b-va890s7n1m] {
    min-width: 0;
}

.rm205-lines[b-va890s7n1m]  .rm205-line {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 38px 170px;
    align-items: stretch;
    min-height: 38px;
}

.rm205-lines[b-va890s7n1m]  .rm205-line-label {
    align-self: center;
    padding: 7px 12px;
    font-size: 12.5px;
    line-height: 1.35;
}

.rm205-lines[b-va890s7n1m]  .rm205-line .rm205-box-no {
    min-height: 38px;
}

.rm205-lines[b-va890s7n1m]  .rm205-amount {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-width: 0;
    padding: 7px 10px;
    border-top: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rm205-lines[b-va890s7n1m]  .rm205-line:last-child .rm205-amount {
    border-bottom: 1px solid var(--ink);
}

.rm205-lines[b-va890s7n1m]  .rm205-emphasis .rm205-line-label,
.rm205-lines[b-va890s7n1m]  .rm205-emphasis .rm205-amount {
    font-weight: 800;
    background: var(--surface-sunk);
}

.rm205-lines[b-va890s7n1m]  .rm205-edit-line .rm205-line-label,
.rm205-lines[b-va890s7n1m]  .rm205-edit-line .rm205-amount {
    background: var(--brand-red-wash);
}

.rm205-lines[b-va890s7n1m]  .rm205-edit-amount {
    padding: 3px 5px;
}

.rm205-lines[b-va890s7n1m]  .rm205-number-input {
    width: 100%;
    height: var(--control-height-sm);
    padding: 3px 7px;
    border-color: var(--line-strong);   /* amount fields you type into keep a visible border, even on the tinted edit rows */
    background: var(--surface);
    text-align: right;
}

.rm205-vat-result[b-va890s7n1m] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 10px 20px;
    border-bottom: 3px solid var(--ink);
    font-size: 13px;
}

.rm205-vat-result span[b-va890s7n1m] {
    min-width: 170px;
    font-size: 15px;
    font-weight: 800;
    text-align: right;
}

.rm205-paye-title[b-va890s7n1m] {
    padding-block: 9px;
}

.rm205-paye-section[b-va890s7n1m] {
    grid-template-columns: minmax(175px, 1fr) minmax(460px, 1.25fr);
}

.rm205-lines[b-va890s7n1m]  .rm205-meta-line .rm205-line-label {
    font-weight: 650;
}

.rm205-declaration[b-va890s7n1m] {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr) minmax(220px, .65fr);
    gap: 14px;
    align-items: center;
    padding: 13px 20px;
    border-bottom: 3px solid var(--ink);
    font-size: 12.5px;
}

.rm205-declaration > span[b-va890s7n1m] {
    font-style: italic;
    font-weight: 650;
}

.rm205-signature-line[b-va890s7n1m] {
    padding: 18px 4px 3px;
    border-bottom: 1px solid var(--ink);
    color: var(--ink-faint);
    font-size: 10.5px;
    text-align: center;
}

.rm205-payment[b-va890s7n1m] {
    display: grid;
    grid-template-columns: minmax(230px, .75fr) minmax(460px, 1.25fr);
    gap: 24px;
    padding: 16px 20px 20px;
}

.rm205-payment > div:first-child[b-va890s7n1m] {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12.5px;
}

.rm205-payment small[b-va890s7n1m] {
    margin-top: 12px;
    color: var(--ink-faint);
    line-height: 1.45;
}

@media (max-width: 900px) {
    .rm205-sheet[b-va890s7n1m] {
        overflow-x: auto;
    }

    .rm205-ministry-head[b-va890s7n1m],
    .rm205-title-row[b-va890s7n1m],
    .rm205-identity[b-va890s7n1m],
    .rm205-section[b-va890s7n1m],
    .rm205-vat-result[b-va890s7n1m],
    .rm205-declaration[b-va890s7n1m],
    .rm205-payment[b-va890s7n1m] {
        min-width: 760px;
    }
}

/* The small capitals above each fact in the period card (was an inline style). */
.rm205-kicker[b-va890s7n1m] { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; }

/* A box figure that opens the lines behind it on the tax audit: ink with a dotted underline, as a figure on a report (§2.1). */
.rm205-drill[b-va890s7n1m] { color: inherit; text-decoration: underline dotted var(--ink-faint); text-underline-offset: 3px; }
.rm205-drill:hover[b-va890s7n1m], .rm205-drill:focus-visible[b-va890s7n1m] { color: var(--brand-red); text-decoration-style: solid; }

/* Wave 3: the reconciliation lines keep their width and scroll inside the card on a phone, rather than squeezing each label
   into a column a word wide and cutting off the "Agrees" pills. */
.vat-recon-table[b-va890s7n1m] { min-width: 620px; }
/* /Components/Pages/Sales/InvoiceDetailPage.razor.rz.scp.css */
/* The summary strip (status, totals, exchange rate, reference, quote, journal) holds seven or eight facts; app.css squeezes
   them into one row at 128px each, so on a 1280 screen "Awaiting payment", "QUO-2026-0001" and "View journal entry" broke
   over two lines and a foreign-currency invoice left "Source journal" alone on a second row with no line above it. Here each
   fact gets room for its longest value and the rows that wrap are ruled like the phone layout (the -1px margins tuck the
   last row's and the last column's rules under the card's own border). */
.invoice-summary-grid[b-hgw8lwla73] { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 0 -1px -1px 0; }
.invoice-summary-grid[b-hgw8lwla73]  .invoice-summary-item { padding: 16px; border-bottom: 1px solid var(--line-soft); border-right: 1px solid var(--line-soft); }

/* A tablet: the heading gave way to the buttons and the number broke at its hyphens ("INV-2026-" / "0034"). The buttons
   now go under the heading when both do not fit. */
.invoice-page-head[b-hgw8lwla73] { flex-wrap: wrap; }
/* /Components/Pages/Sales/InvoiceEditPage.razor.rz.scp.css */
/* "+ New customer" sits under the customer field, at its start. As a child of the column-flex .field it stretched to the
   field's full width and its words were centred in the gap between the customer and the date. */
.quick-add[b-2rgdts7vwu] { align-self: flex-start; }
/* /Components/Pages/Sales/Items.razor.rz.scp.css */
/* The item form's Code field is narrow beside Name. It was an inline flex-basis, which on a phone (where .field-row stacks
   into a column) became a 130px HEIGHT and left a gap under the field. */
.field-row > .item-code-field[b-fkzur19k79] { flex: 0 0 130px; }
@media (max-width: 680px) {
    .field-row > .item-code-field[b-fkzur19k79] { flex: 0 0 auto; }
}
/* /Components/Pages/Sales/QuoteEditPage.razor.rz.scp.css */
/* "Valid for [15] days — expires 14 Oct 2026" is one nowrap line, wider than a phone's card: let the expiry date drop to its
   own line instead of running over the card's edge. */
.expiry-row[b-hy81eizhdd] { flex-wrap: wrap; }
/* /Components/Pages/Settings/CaptureSettingsPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. The model names are long ("Claude Sonnet 5.5 — recommended: accurate"), so the model
   picker takes the wider share of the provider/model row instead of being cut at half width. */
.capture-model-field[b-vxcuv5qock] { flex-grow: 2; }

/* A checkbox inside a .field (a column) would otherwise sit at the right-hand end (.check-field is align-self: flex-end,
   meant for a checkbox beside fields in a row). */
.capture-remove-key[b-vxcuv5qock] { align-self: flex-start; }

/* The connection test's steps each start with their own ✓ or ✗, so the list drops its bullets (it showed both). */
.capture-test-result ul[b-vxcuv5qock] { list-style: none; padding-left: 0; }
/* /Components/Pages/Settings/ChartOfAccounts.razor.rz.scp.css */
.coa-edit-link[b-aslcqfwsg0] {
    color: inherit;
    text-decoration: none;
}

.coa-edit-link:hover[b-aslcqfwsg0],
.coa-edit-link:focus-visible[b-aslcqfwsg0] {
    color: var(--brand-red);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.coa-balance-link[b-aslcqfwsg0] {
    color: var(--brand-red);
    font-weight: 650;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.coa-balance-link:hover[b-aslcqfwsg0],
.coa-balance-link:focus-visible[b-aslcqfwsg0] {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.coa-row-action[b-aslcqfwsg0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    color: var(--ink-faint);
    font-size: 18px;
    line-height: 1;
    text-decoration: none;
}

.coa-row-action:hover[b-aslcqfwsg0],
.coa-row-action:focus-visible[b-aslcqfwsg0] {
    color: var(--brand-red);
    background: var(--brand-red-wash);
}

/* A child account's indent under its header (was an inline padding per row). */
.coa-depth-1[b-aslcqfwsg0] { padding-left: 20px; }
.coa-depth-2[b-aslcqfwsg0] { padding-left: 40px; }
.coa-depth-3[b-aslcqfwsg0] { padding-left: 60px; }
.coa-depth-4[b-aslcqfwsg0] { padding-left: 80px; }
.coa-depth-5[b-aslcqfwsg0] { padding-left: 100px; }
.coa-depth-6[b-aslcqfwsg0] { padding-left: 120px; }
/* /Components/Pages/Settings/CoaAccountEditPage.razor.rz.scp.css */
.coa-editor[b-fxysspmo05] {
    width: min(100%, 980px);
    margin: 0 auto;
    padding-bottom: 24px;
}

.coa-page-head[b-fxysspmo05] {
    align-items: flex-end;
}

.coa-title-row[b-fxysspmo05] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.coa-title-row h1[b-fxysspmo05] {
    margin-right: 3px;
}

.coa-control-callout[b-fxysspmo05] {
    margin: 0 0 14px;
}

.coa-form-stack[b-fxysspmo05] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.coa-section[b-fxysspmo05] {
    padding: 20px 22px 22px;
}

.coa-section-heading[b-fxysspmo05] {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 13px;
    border-bottom: 1px solid var(--line-soft);
}

.coa-section-heading h2[b-fxysspmo05] {
    margin: 0 0 4px;
    font-size: 15px;
}

.coa-section-heading p[b-fxysspmo05] {
    margin: 0;
    color: var(--ink-faint);
    font-size: 12px;
    line-height: 1.45;
}

.coa-identity-grid[b-fxysspmo05],
.coa-two-column[b-fxysspmo05] {
    display: grid;
    grid-template-columns: minmax(160px, 210px) minmax(280px, 1fr);
    gap: 16px;
}

.coa-two-column[b-fxysspmo05] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.coa-full-field[b-fxysspmo05] {
    grid-column: 1 / -1;
}

.coa-optional[b-fxysspmo05] {
    color: var(--ink-faint);
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.coa-field-help[b-fxysspmo05] {
    color: var(--ink-faint);
    font-size: 11px;
    line-height: 1.35;
}

.coa-role-options[b-fxysspmo05] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.coa-role-option[b-fxysspmo05] {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    min-height: 82px;
    padding: 15px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
}

.coa-role-option:hover:not(.disabled)[b-fxysspmo05] {
    border-color: var(--brand-red);
}

.coa-role-option.selected[b-fxysspmo05] {
    border-color: var(--brand-red);
    box-shadow: 0 0 0 2px var(--brand-red-wash);
}

.coa-role-option.disabled[b-fxysspmo05] {
    cursor: not-allowed;
    opacity: .72;
}

.coa-role-option input[b-fxysspmo05] {
    margin-top: 2px;
    accent-color: var(--brand-red);
}

.coa-role-option span[b-fxysspmo05] {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.coa-role-option strong[b-fxysspmo05] {
    font-size: 13px;
}

.coa-role-option small[b-fxysspmo05] {
    color: var(--ink-faint);
    font-size: 11.5px;
    line-height: 1.45;
}

.coa-parent-field[b-fxysspmo05] {
    margin-top: 16px;
    max-width: 620px;
}

.coa-field-disabled[b-fxysspmo05] {
    opacity: .65;
}

.coa-status-heading[b-fxysspmo05] {
    align-items: center;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.coa-switch-row[b-fxysspmo05] {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 650;
    cursor: pointer;
}

.coa-switch-row.disabled[b-fxysspmo05] {
    cursor: not-allowed;
    opacity: .72;
}

.coa-error[b-fxysspmo05] {
    margin: 14px 0 0;
}

.coa-action-bar[b-fxysspmo05] {
    position: sticky;
    z-index: 10;
    bottom: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 66px;
    margin-top: 16px;
    padding: 10px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--surface) 96%, transparent);
    box-shadow: 0 -5px 18px rgba(20, 24, 29, .06);
    backdrop-filter: blur(8px);
}

.coa-action-summary[b-fxysspmo05] {
    flex: 1;
    color: var(--ink-faint);
    font-size: 12px;
}

input:disabled[b-fxysspmo05],
select:disabled[b-fxysspmo05],
textarea:disabled[b-fxysspmo05] {
    cursor: not-allowed;
    background: var(--surface-sunk);
    color: var(--ink-faint);
}

@media (max-width: 720px) {
    .coa-editor[b-fxysspmo05] {
        width: 100%;
    }

    .coa-page-head[b-fxysspmo05] {
        align-items: flex-start;
    }

    .coa-identity-grid[b-fxysspmo05],
    .coa-two-column[b-fxysspmo05],
    .coa-role-options[b-fxysspmo05] {
        grid-template-columns: 1fr;
    }

    .coa-full-field[b-fxysspmo05] {
        grid-column: auto;
    }

    .coa-section[b-fxysspmo05] {
        padding: 17px;
    }

    .coa-status-heading[b-fxysspmo05] {
        align-items: flex-start;
        flex-direction: column;
    }

    .coa-action-summary[b-fxysspmo05] {
        display: none;
    }

    .coa-action-bar[b-fxysspmo05] {
        justify-content: flex-end;
    }
}
/* /Components/Pages/Settings/ControlsOverviewPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. */

/* The two preset buttons sit side by side at the end of the box. They were in a .settings-actions, whose top rule and
   padding (a card's closing action row) drew a stray line above them and stacked them in two ragged widths. */
.ctl-preset-actions[b-jc1oqga3ya] { flex: 0 0 auto; justify-content: flex-end; }

/* One table per area (Purchases, Sales, Accounting, Payroll, Company-wide). With automatic layout each table sized its
   own columns, so "Now" started at a different place in every card. The same three column widths in every table
   line them up down the page. */
.ctl-table[b-jc1oqga3ya] { table-layout: fixed; }
.ctl-table th:nth-child(1)[b-jc1oqga3ya] { width: 50%; }
.ctl-table th:nth-child(2)[b-jc1oqga3ya] { width: 34%; }
@media (max-width: 680px) {
    .ctl-table th:nth-child(1)[b-jc1oqga3ya] { width: 46%; }
    .ctl-table th:nth-child(2)[b-jc1oqga3ya] { width: 34%; }
}
/* /Components/Pages/Settings/DimensionsPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. The values table is fixed-layout with a 124px code column and two 104px columns; on a
   phone that left the Value column 0px wide, so each name was drawn under the Active checkbox. Narrower side columns
   on a small screen, and a floor on the table's width so the Value column keeps room (the table scrolls inside its
   .table-scroll box below that). */
@media (max-width: 680px) {
    .dim-values .dim-col-code[b-915x8px5dt] { width: 96px; }
    .dim-values .dim-col-narrow[b-915x8px5dt] { width: 64px; }
    .dim-values[b-915x8px5dt] { min-width: 380px; }
}
/* /Components/Pages/Settings/EmailInSettingsPage.razor.rz.scp.css */
/* The address is something people copy or read out: monospace, wraps on a phone, and one click selects all of it. */
.email-in-address[b-1ui0nt4ber] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 15px; margin: 4px 0 0;
    word-break: break-all; user-select: all; }

/* One line per attachment under the result badge. */
.email-in-detail[b-1ui0nt4ber] { margin: 4px 0 0; padding-left: 16px; }
/* /Components/Pages/Settings/EmailSettingsPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. Reply-to and signature fields sit two to a row (.es-two-col-grid); on a phone the
   placeholders were cut ("Defaults to the busi") and the signature box was half the screen. One column there. */
@media (max-width: 680px) {
    .es-two-col-grid[b-7r9swday8k] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Settings/ExchangeRatesPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. On a phone the six columns were squeezed to the screen, so each date and rate wrapped
   over three or four lines and every row stood about 60px tall. The date, currency and rate now stay on one line
   and the table keeps a working width, scrolling sideways inside its card (.table-scroll) instead. */
.fxr-table td:nth-child(-n+3)[b-u8n9157v9q] { white-space: nowrap; }
@media (max-width: 680px) {
    .fxr-table[b-u8n9157v9q] { min-width: 560px; }
}
/* /Components/Pages/Settings/ModulesSettingsPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. A module row is its name and note on the left and one button on the right. The shared
   .row-inline wraps, so on a phone a long note (Planning's) pushed the button onto a line of its own under the text,
   out of line with every other row's button. The text shrinks instead and the button stays at the end. */
.mods-row[b-nn6dp1caqk] { flex-wrap: nowrap; }
.mods-row > div[b-nn6dp1caqk] { min-width: 0; }
.mods-row > .btn[b-nn6dp1caqk], .mods-row > .badge[b-nn6dp1caqk] { flex: 0 0 auto; }
/* /Components/Pages/Settings/OnlinePaymentsPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. The bank-transfer and merchant-login fields sit two to a row (.op-two-col-grid); on a
   phone that cut the account name, account number and API username to a few letters each. One column there. */
@media (max-width: 680px) {
    .op-two-col-grid[b-afl244l99u] { grid-template-columns: 1fr; }
}
/* /Components/Pages/Settings/OpeningBalances.razor.rz.scp.css */
/* Wave 3 visual walkthrough. The assets step's heading row left its gap to the table below to the intro paragraph's
   own margin, so on a phone, where the buttons wrap under the intro, the buttons sat on the table's top edge. The
   row now owns the gap at every width. */
.ob-assets-head[b-62sdp313m6] { margin-bottom: 12px; }
.ob-assets-head p[b-62sdp313m6] { margin-bottom: 0; }
/* /Components/Pages/Settings/SettingsHubPage.razor.rz.scp.css */
.page-head .sub a[b-3q8wp8wrrr] { text-decoration: underline; text-underline-offset: 3px; }
/* /Components/Pages/Settings/WebhooksPage.razor.rz.scp.css */
/* Wave 3 visual walkthrough. The events are a real fieldset (one legend for the group), but a bare fieldset draws the
   browser's grey box and indents; the house form has neither. The boxes now sit in one wrapping row under the label
   (.check-grid) instead of stacked at the right-hand edge. */
.wh-events[b-kv540km5e7] { border: 0; padding: 0; margin: 0; min-width: 0; }
.wh-events > legend[b-kv540km5e7] { padding: 0; margin-bottom: 6px; }
/* /Components/Shared/CashEntryForm.razor.rz.scp.css */
.cash-entry-purpose[b-bnch33dwp4] { max-width: 340px; margin-bottom: 20px; }

/* Each dimension is one field: its label stays above its control, including when the row wraps. */
.cash-lines .cash-dimensions-row[b-bnch33dwp4] { grid-template-columns: minmax(0, 1fr); padding: 8px 14px 12px; }
.cash-dimension-fields[b-bnch33dwp4] { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 190px)); gap: 12px; align-items: start; }
.cash-dimension-field[b-bnch33dwp4] { display: flex; flex-direction: column; gap: 5px; min-width: 0; font-size: 11px; }
.cash-dimension-field select[b-bnch33dwp4] { width: 100%; min-width: 0; font-size: 11.5px; }
@media (max-width: 600px) {
    .cash-dimension-fields[b-bnch33dwp4] { grid-template-columns: minmax(0, 1fr); }
}
/* /Components/Shared/ModuleOverviewCard.razor.rz.scp.css */
/* Each figure is a link to the report behind it. The card's head is stretched over the whole card (app.css,
   .dashboard-module-head::after), so the figures sit above it, like the chart does, to take their own clicks. They read as
   figures, not as red links: ink, with a dotted underline when pointed at, as a linked figure in a report does. */
.dashboard-module-figure[b-rvz3ftieep] { position: relative; z-index: 1; color: inherit; text-decoration: none; border-radius: 4px; }
.dashboard-module-figure:hover strong[b-rvz3ftieep],
.dashboard-module-figure:focus-visible strong[b-rvz3ftieep] { text-decoration: underline dotted; text-underline-offset: 3px; }
.dashboard-module-figure:focus-visible[b-rvz3ftieep] { outline: 2px solid var(--brand-red); outline-offset: 2px; }
/* /Components/Shared/OwnerCashEntry.razor.rz.scp.css */
.owner-entry-heading[b-ggciruo9hg], .owner-entry-setup[b-ggciruo9hg] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.owner-entry-heading .badge[b-ggciruo9hg] { color: var(--ink-soft); }
.owner-entry-balance[b-ggciruo9hg] { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 14px 0; margin: 16px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.owner-entry-balance span[b-ggciruo9hg] { display: flex; flex-direction: column; gap: 4px; color: var(--ink-soft); }
.owner-entry-balance strong[b-ggciruo9hg] { color: var(--ink); font-variant-numeric: tabular-nums; }
.owner-entry-setup[b-ggciruo9hg] { margin-top: 18px; font-size: 13px; }
.owner-entry-actions[b-ggciruo9hg] { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.owner-entry .field-row[b-ggciruo9hg] { margin-bottom: 14px; }
.owner-entry .field[b-ggciruo9hg] { min-width: 0; }
@media (max-width: 600px) { .owner-entry .field-row[b-ggciruo9hg] { flex-direction: column; } .owner-entry .field-row[b-ggciruo9hg] { margin-bottom: 14px; }
.owner-entry .field[b-ggciruo9hg] { width: 100%; } }
/* /Components/Shared/SettingsDirectory.razor.rz.scp.css */
/* Company and Payroll settings share these scoped styles, including the caller-rendered rows. */
.settings-directory[b-zx6q95wcg9]  .settings-search-field {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 780px;
    margin-bottom: 24px;
    padding: 0 12px;
    background: var(--surface);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
}
.settings-directory[b-zx6q95wcg9]  .settings-search-field:focus-within { outline: 2px solid var(--brand-red); outline-offset: 2px; }
.settings-directory[b-zx6q95wcg9]  .settings-search-field input.field-input { border: 0; box-shadow: none; outline: none; min-width: 0; padding: 11px 0; background: transparent; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-icon { display: inline-flex; flex: 0 0 18px; width: 18px; height: 18px; color: var(--ink-soft); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-icon svg { width: 100%; height: 100%; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-layout { display: grid; grid-template-columns: 220px minmax(0, 780px); gap: 28px; align-items: start; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-layout:not(:has(.settings-hub-categories)) { grid-template-columns: minmax(0, 780px); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-categories {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.settings-directory[b-zx6q95wcg9]  .settings-hub-category {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 11px 12px;
    border: 0;
    border-radius: var(--radius);
    background: transparent;
    color: var(--ink-soft);
    text-align: left;
    font: inherit;
    font-size: var(--type-body);
    cursor: pointer;
}
.settings-directory[b-zx6q95wcg9]  .settings-hub-category:hover { background: var(--surface-sunk); color: var(--ink); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-category[aria-pressed="true"] { background: var(--brand-red-wash); color: var(--brand-red); font-weight: 650; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-category[aria-pressed="true"] .settings-hub-icon { color: inherit; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-category:focus-visible, .settings-directory[b-zx6q95wcg9]  .settings-hub-row:focus-visible { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-content { min-width: 0; display: grid; gap: 16px; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-section { padding: 0; overflow: hidden; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-section h2 { margin: 0; padding: 19px 22px; font-size: 16px; border-bottom: 1px solid var(--line); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-list li, .settings-directory[b-zx6q95wcg9]  .settings-hub-list li:first-child { padding: 0; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-row { display: flex; align-items: center; gap: 20px; min-height: 80px; padding: 17px 22px; color: var(--ink); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-row:hover { background: var(--surface-sunk); color: var(--ink); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-row-copy { min-width: 0; flex: 1; overflow-wrap: anywhere; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-label { color: var(--ink); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-row:hover .settings-hub-label { color: var(--brand-red); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-summary { margin-top: 4px; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-status { display: inline-block; margin-top: 7px; padding: 2px 7px; border-radius: var(--radius-sm); background: var(--surface-sunk); color: var(--ink-soft); font-size: 12px; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-label--greyed { color: var(--ink-soft); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-row--greyed:hover { background: transparent; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-row--greyed:hover .settings-hub-label { color: var(--ink-soft); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-mobile-category { display: none; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-results { margin: 0; color: var(--ink-soft); font-size: 13px; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-empty { padding: 24px; }
.settings-directory[b-zx6q95wcg9]  .settings-hub-empty h2 { font-size: 16px; margin: 0 0 8px; }
@media (max-width: 900px) {
    .settings-directory[b-zx6q95wcg9]  .settings-hub-layout { grid-template-columns: 195px minmax(0, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
    .settings-directory[b-zx6q95wcg9]  .settings-hub-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .settings-directory[b-zx6q95wcg9]  .settings-hub-categories { display: none; }
    .settings-directory[b-zx6q95wcg9]  .settings-hub-mobile-category { display: grid; gap: 6px; }
    .settings-directory[b-zx6q95wcg9]  .settings-hub-mobile-category select { width: 100%; min-height: 44px; }
    .settings-directory[b-zx6q95wcg9]  .settings-hub-row { padding: 16px; gap: 12px; }
    .settings-directory[b-zx6q95wcg9]  .settings-hub-section h2 { padding: 17px 16px; }
    .settings-directory[b-zx6q95wcg9]  .settings-search-field input.field-input { font-size: 16px; }
}

.settings-directory[b-zx6q95wcg9]  .settings-hub-section-intro { padding: 0 22px 18px; border-bottom: 1px solid var(--line); }
.settings-directory[b-zx6q95wcg9]  .settings-hub-section:has(.settings-hub-section-intro) h2 { padding-bottom: 6px; border-bottom: 0; }
@media (max-width: 640px) {
    .settings-directory[b-zx6q95wcg9]  .settings-hub-section-intro { padding: 0 16px 16px; }
}
/* /Components/Shared/SettingsShell.razor.rz.scp.css */
.settings-breadcrumb[b-8sfeunv3hj] { margin-bottom: 14px; font-size: 13px; }
.settings-breadcrumb ol[b-8sfeunv3hj] { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0; }
.settings-breadcrumb li[b-8sfeunv3hj] { display: inline-flex; align-items: center; gap: 8px; }
.settings-breadcrumb li + li[b-8sfeunv3hj]::before { content: "›"; color: var(--ink-faint); }
.settings-breadcrumb li[aria-current][b-8sfeunv3hj] { font-weight: 600; }
.settings-breadcrumb a[b-8sfeunv3hj] { text-decoration: underline; text-underline-offset: 3px; }