/* /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/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/ApprovalsControlsPage.razor.rz.scp.css */
/* "Posting a pay run" is as wide as the policies card above it, not capped at the shared editor's 960px
   (walkthrough 2026-10-01). */
.payroll-focused-editor[b-5dgtq3vqi7] { max-width: none; }
/* /Components/Pages/Payroll/CinsfRulesPage.razor.rz.scp.css */
/* Three short columns fit a phone once the cells use tighter side padding; the table still scrolls if they do not
   (walkthrough 2026-10-01). */
@media (max-width: 640px) {
    .rate-table th[b-oh8fkxfjxu],
    .rate-table td[b-oh8fkxfjxu] { padding-inline: 8px; }
}
/* /Components/Pages/Payroll/EmailsNotificationsPage.razor.rz.scp.css */
/* On a phone the four-column email table (600px wide) cut "Goes to" mid-sentence and hid Sending and "Edit wording"
   off the right edge. Each email becomes a stacked block instead, its cells labelled the way the column headings
   labelled them (walkthrough 2026-10-01). The table is the shared EmailWordingTable's, hence ::deep. */
@media (max-width: 640px) {
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table { min-width: 0; }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table,
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table tbody,
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table tr,
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table td { display: block; width: 100%; }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table thead {
        position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table tr { padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table tbody tr:last-child { border-bottom: 0; }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table td { padding: 4px 0; border: 0; text-align: left; }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table td:nth-child(2)::before,
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table td:nth-child(3)::before {
        display: block; margin-bottom: 2px;
        color: var(--ink-soft); font-size: var(--type-table-head); font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
    }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table td:nth-child(2)::before { content: "Goes to"; }
    .payroll-email-list[b-2h1oinohbh]  .email-wording-table td:nth-child(3)::before { content: "Sending"; }
}
/* /Components/Pages/Payroll/EmployeeAccessPage.razor.rz.scp.css */
/* The bank-change details: the browser's bare "▶" marker read as stray text beside the card's other lines, so the
   summary carries a chevron on the right like the record-checks strip on the employee page, turning when it opens
   (walkthrough 2026-10-01). */
.access-details > summary[b-r0bft6mry5] { display: flex; align-items: center; justify-content: space-between; gap: 12px; list-style: none; }
.access-details > summary[b-r0bft6mry5]::-webkit-details-marker { display: none; }
.access-details > summary:focus-visible[b-r0bft6mry5] { outline: 2px solid var(--brand-red); outline-offset: 2px; border-radius: 4px; }
.access-details-chevron[b-r0bft6mry5] { flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transition: transform .15s ease; }
.access-details[open] > summary .access-details-chevron[b-r0bft6mry5] { transform: rotate(-135deg); }
.access-details[open] > summary[b-r0bft6mry5] { margin-bottom: 12px; }
/* /Components/Pages/Payroll/EmployeeAccessRecordsPage.razor.rz.scp.css */
/* Every card on this page runs to the same right edge as the page heading and tab bar, not to the shared editor's
   960px cap (walkthrough 2026-10-01). */
.payroll-focused-editor[b-vx3t2wg709] { max-width: none; }
/* /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: 220px minmax(0, 680px); gap: 28px; align-items: start; }
/* The section menu sits in a box, like the Settings categories (SettingsDirectory), so the two read as one pattern. */
.employee-section-nav[b-6q0xa913bw] { display: flex; flex-direction: column; gap: 4px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); position: sticky; top: 16px; }
.employee-nav-group + .employee-nav-group[b-6q0xa913bw] { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.employee-nav-group h2[b-6q0xa913bw] { margin: 4px 12px 6px; 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: 40px; margin-bottom: 2px; padding: 9px 12px; text-align: left; border: 0; border-radius: var(--radius); 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-sunk); }
.employee-section-link.active[b-6q0xa913bw] { color: var(--brand-red); background: var(--brand-red-wash); font-weight: 650; }
.employee-section-link:focus-visible[b-6q0xa913bw] { outline: 2px solid var(--brand-red); outline-offset: -2px; }
.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); }
/* A section a new record doesn't have yet: greyed and inert, with the reason in its title. */
.employee-section-link.locked[b-6q0xa913bw], .employee-section-link.locked:hover[b-6q0xa913bw] { color: var(--ink-faint); background: transparent; cursor: not-allowed; opacity: .6; }
@media (max-width: 1100px) {
    /* 210px and tighter link padding keep "Self-service access" and "Leave & entitlements" on one line at tablet width
       (walkthrough 2026-10-01); the form column gives up the difference. */
    .employee-record-layout[b-6q0xa913bw] { grid-template-columns: 210px minmax(0, 1fr); gap: 16px; }
    .employee-section-link[b-6q0xa913bw] { gap: 8px; padding: 9px 10px; }
    .employee-nav-group h2[b-6q0xa913bw] { margin-left: 10px; margin-right: 10px; }
    .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-form-section > .section-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
.employee-record[b-6q0xa913bw]  .employee-form-section > .section-title-row h3 { margin: 0; font: inherit; }

.employee-record[b-6q0xa913bw]  .settings-preference-copy a { text-decoration: underline; text-underline-offset: 2px; }

/* Walkthrough 2026-10-01. */
/* Email takes the wider share of its row; a phone number is short. */
.employee-record[b-6q0xa913bw]  .employee-form-section > .employee-contact-row { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
/* A switch's box and its fixed label stay on one line; only the working-days group wraps. */
.employee-record[b-6q0xa913bw]  .employee-form-section .check-field.settings-preference-control { flex-wrap: nowrap; white-space: nowrap; flex: none; }
/* A two-digit hours figure needs no 300px box. */
.employee-record[b-6q0xa913bw]  .emp-hours-input { max-width: 140px; }
/* "Enters own timesheet": the select is not allowed to squeeze its description; below 1100px it goes under the text. */
.employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference .own-entry-select { flex: 0 0 auto; width: auto; }
/* The link to the employment records: normal width, and its label may wrap rather than run past the card. */
.employee-record[b-6q0xa913bw]  .documents-records-link { margin: 0 0 14px; }
.employee-record[b-6q0xa913bw]  .documents-records-link .btn { max-width: 100%; white-space: normal; text-align: left; height: auto; }
/* A required document reads as the document, then its status badge, rather than a bare "!" mark. */
.employee-record[b-6q0xa913bw]  .checklist li.documents-required { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
/* Six columns in a tablet-width form column: tighter cell padding lets Adjust show without scrolling at 1024px; the
   table still scrolls in its region when narrower. */
.employee-record[b-6q0xa913bw]  .leave-balance-table th, .employee-record[b-6q0xa913bw]  .leave-balance-table td { padding-left: 8px; padding-right: 8px; }
@media (max-width: 1100px) {
    .employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference:has(.own-entry-select) { flex-direction: column; align-items: stretch; gap: 10px; }
    .employee-record[b-6q0xa913bw]  .employee-form-section .settings-preference .own-entry-select { flex: none; width: 100%; max-width: 280px; align-self: flex-start; }
}
@media (max-width: 767px) {
    .employee-record[b-6q0xa913bw]  .employee-form-section > .employee-contact-row { grid-template-columns: minmax(0, 1fr); }
}

/* The fields a company work pattern fills in sit in one fieldset, disabled while a pattern is chosen; laid out like the section's own rows. */
.employee-record[b-6q0xa913bw]  .emp-pattern-fields { margin: 0; padding: 0; border: 0; min-width: 0; }
.employee-record[b-6q0xa913bw]  .emp-pattern-fields > .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-bottom: 18px; }
.employee-record[b-6q0xa913bw]  .emp-pattern-fields > .field-row > .field { min-width: 0; margin-bottom: 0; }
/* A fieldset does not collapse margins, so its last row drops its own and the next row's top margin makes the usual gap. */
.employee-record[b-6q0xa913bw]  .emp-pattern-fields > .settings-preference:last-child { margin-bottom: 0; }
@media (max-width: 767px) {
    .employee-record[b-6q0xa913bw]  .emp-pattern-fields > .field-row { grid-template-columns: minmax(0, 1fr); gap: 14px; }
}
/* /Components/Pages/Payroll/Employees.razor.rz.scp.css */
/* Walkthrough 2026-10-02: the Contact column holds an email or a phone number. A long address must not push the
   readiness and status badges off the card, so it keeps to one line and ellipsises; the full value is the cell's
   title. The cap follows the viewport so the whole table still fits a 1280 screen while a wide one shows the full
   address. Block-level so max-width applies inside the table cell. */
.employee-contact[b-xowsydboin] {
    display: block;
    max-width: clamp(140px, 13vw, 260px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* /Components/Pages/Payroll/EmployeeTabs/TaxTab.razor.rz.scp.css */
/* The Stop button sits at the foot of its row, level with the inputs beside it. */
.cinsf-vol-remove[b-c7xh4v8h2j] { flex: 0 0 auto; justify-content: flex-end; }
/* /Components/Pages/Payroll/LeaveBalanceManagement.razor.rz.scp.css */
/* The employee column is a row header (th), which the shared table's "no rule under the last row" does not reach, so the
   last row's line stopped at the end of the name column (walkthrough 2026-10-01). */
.leave-matrix tbody tr:last-child > th[b-bkgpexp3l6] { border-bottom: 0; }
/* The spelled-out line under each balance stays on one line; the table scrolls in its card when narrow. */
.leave-matrix-sub[b-bkgpexp3l6] { white-space: nowrap; }
/* /Components/Pages/Payroll/LeaveEntitlementRules.razor.rz.scp.css */
/* At tablet width the card is two columns and Edit/Delete fell into whichever cell was free: beside the figures on a
   leave type with no legal note, under the note on one with it. They now take the card's last row, side by side, on
   every leave type (walkthrough 2026-10-01). Above 1100px they keep their own column; below 600px the card is one
   column and the shared rule already lays them out in a row. */
@media (max-width: 1100px) and (min-width: 601px) {
    .payroll-leave-rules .rule-actions[b-s618hijo4y] {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
    }
}
/* /Components/Pages/Payroll/LeaveLiabilityPage.razor.rz.scp.css */
/* The blank label only lines "Run report" up with the fields beside it. On a phone the fields stack, so it would leave
   an empty line above the button: hide it there (walkthrough 2026-10-01). 680px is where .field-row stacks. */
@media (max-width: 680px) {
    .run-label-spacer[b-igmtb76z1d] { display: none; }
}
/* /Components/Pages/Payroll/LeaveRequestDetailPage.razor.rz.scp.css */
/* The request's details: an even 20px inset all round, and no column rules (the shared summary item draws a right
   border meant for a single-row strip, which left stray lines down the right-hand column here). Walkthrough 2026-10-01. */
.leave-request-card[b-vcfw95ihp2] { padding: 20px; margin-bottom: 16px; }
.leave-request-summary[b-vcfw95ihp2] { gap: 18px 24px; margin: 0; }
.leave-request-summary .record-summary-item[b-vcfw95ihp2] { padding: 0; border-right: 0; }
.leave-request-notes[b-vcfw95ihp2] { grid-column: 1 / -1; }
.leave-request-notes dd[b-vcfw95ihp2] { font-size: 13.5px; font-weight: 400; color: var(--ink-soft); white-space: pre-line; }
/* /Components/Pages/Payroll/LeaveRequestForm.razor.rz.scp.css */
/* The footer keeps natural-width buttons on the right at phone width, as the employee record's footer does; the shared
   rule stretched them, and a lone Cancel took the whole row (walkthrough 2026-10-01). */
@media (max-width: 640px) {
    .leave-request-actions[b-txhunm6868] { flex-wrap: wrap; }
    .leave-request-actions .btn[b-txhunm6868] { flex: none; }
}
/* /Components/Pages/Payroll/LeaveRequests.razor.rz.scp.css */
/* The status filter holds one short word; at phone width it no longer takes most of the row (walkthrough 2026-10-01). */
.leave-status-filter[b-ftmdk2t552] { width: 180px; max-width: 100%; }
.leave-status-filter select[b-ftmdk2t552] { width: 100%; }
/* /Components/Pages/Payroll/PayeRulesPage.razor.rz.scp.css */
/* Tighter side padding on a phone so more of the brackets show before the table scrolls (walkthrough 2026-10-01). */
@media (max-width: 640px) {
    .rate-table th[b-pe1tq7tscd],
    .rate-table td[b-pe1tq7tscd] { padding-inline: 8px; }
}
/* /Components/Pages/Payroll/PayeSchedulePage.razor.rz.scp.css */
/* The blank label only lines "Run report" up with the fields beside it. On a phone the fields stack, so it would leave
   an empty line above the button: hide it there (walkthrough 2026-10-01). 680px is where .field-row stacks. */
@media (max-width: 680px) {
    .run-label-spacer[b-gqsz1fc7vd] { display: none; }
}
/* /Components/Pages/Payroll/PayPeriods.razor.rz.scp.css */
/* Walkthrough 2026-10-02 (owner: "it just looks wide, i like wide if its necessary"). The page reads at the payroll
   settings width, the same 960px as the cards on Hours & overtime and Approval policies (.payroll-focused-editor): seven
   columns of the periods table fit in it, and nothing else on the page needs more. On a narrower screen it simply takes what there is. */
.pp-page[b-lt2licsk56] { max-width: 960px; }
/* A calendar with timesheet deadlines adds two date columns to the periods table, which then needs about 1010px; the page
   takes that width (and only then) so the row's action is never cut off at the card's edge. */
.pp-page--deadlines[b-lt2licsk56] { max-width: 1040px; }
/* With nine columns the cells give up 2px a side, which is what lets the table fit a 1280 screen without scrolling. */
.pp-page--deadlines .pp-period-table th[b-lt2licsk56],
.pp-page--deadlines .pp-period-table td[b-lt2licsk56] { padding-left: 12px; padding-right: 12px; }

/* The schedule card: one row per fact. Each row is the fact's name in a fixed column, what it says now, and its one
   button (or badge) at the row's end, so the label, value and action of every row line up with the rows around it. */
.pp-row[b-lt2licsk56] { padding: 16px 20px; border-bottom: 1px solid var(--line); }
.pp-row:last-child[b-lt2licsk56] { border-bottom: 0; }
.pp-row-line[b-lt2licsk56] {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr) auto;
    gap: 6px 24px;
    align-items: center;
}
.pp-row-line h2[b-lt2licsk56] { margin: 0; font-size: var(--type-section-title); font-weight: 600; }
.pp-row-value p[b-lt2licsk56] { margin: 0; font-size: var(--type-body); }
.pp-row-value p + p[b-lt2licsk56] { margin-top: 4px; }
.pp-row-action[b-lt2licsk56] { justify-self: end; }

/* An open editor, a result message or the health findings sit under the row's value, not under its name, so they read
   as part of that row. */
.pp-row-detail[b-lt2licsk56] { margin: 14px 0 0 224px; }

/* On a phone the name and its button share the first line and the value takes the whole second line, instead of three
   squeezed columns; the detail loses its indent. */
@media (max-width: 640px) {
    .pp-row[b-lt2licsk56] { padding: 14px 16px; }
    .pp-row-line[b-lt2licsk56] { grid-template-columns: minmax(0, 1fr) auto; }
    .pp-row-line h2[b-lt2licsk56] { grid-column: 1; grid-row: 1; }
    .pp-row-action[b-lt2licsk56] { grid-column: 2; grid-row: 1; }
    .pp-row-value[b-lt2licsk56] { grid-column: 1 / -1; grid-row: 2; }
    .pp-row-detail[b-lt2licsk56] { margin-left: 0; }
}

/* The "#" sequence takes the row's ordinary figures, as in the calendar wizard (a tabular "1" read as a typewriter font). */
.data-table td.num:first-child[b-lt2licsk56] { font-variant-numeric: proportional-nums; }
/* /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; }

/* Walkthrough 2026-10-01. The three frequencies sit in three equal columns (the automatic fit wrapped them two and one
   at tablet width), and in one column on a phone. */
.freq-choices[b-bkvfezmbdk] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
    .freq-choices[b-bkvfezmbdk] { grid-template-columns: minmax(0, 1fr); }
}

/* The "#" column is a sequence, not an amount to line up: the table's tabular figures (a "1" with a foot) made it read
   as a typewriter font, so it takes the ordinary figures of the rest of the row. */
.data-table td.num:first-child[b-bkvfezmbdk] { font-variant-numeric: proportional-nums; }
/* /Components/Pages/Payroll/PayrollAccountsPage.razor.rz.scp.css */
/* Walkthrough 2026-10-02: the payroll settings reading width, as the pay calendar (PayPeriods.razor.css). */
.pa-page[b-28hruooovm] { max-width: 960px; }
/* /Components/Pages/Payroll/PayrollAnalyticsDashboard.razor.rz.scp.css */
/* Walkthrough 2026-10-01. Four chart cards in a grid that never leaves one alone on a row: the two over-time charts
   (trend, earnings vs deductions) are wide and the two breakdowns narrow, so at full width the rows are wide + narrow
   and narrow + wide, at tablet width each wide chart takes a row and the breakdowns share one, and on a phone all stack. */
.dash-charts[b-h60h97irvo] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.analytics-chart-wide[b-h60h97irvo] { grid-column: span 2; }
@media (max-width: 1100px) {
    .dash-charts[b-h60h97irvo] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .dash-charts[b-h60h97irvo] { grid-template-columns: minmax(0, 1fr); }
    .analytics-chart-wide[b-h60h97irvo] { grid-column: auto; }
    .analytics-tick-minor[b-h60h97irvo] { visibility: hidden; }
    /* With every other date hidden, the dates left may spill past their own bar instead of being cut to "2…". */
    .analytics-chart-wide .chart-bar-label[b-h60h97irvo] { overflow: visible; text-overflow: clip; max-width: none; }
}
.chart-card[b-h60h97irvo] { min-width: 0; }

/* Payroll trend: a line with a point per pay run over a light area, its figures said above it. */
.analytics-trend-caption[b-h60h97irvo] { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; font-size: 11.5px; }
.analytics-trend[b-h60h97irvo] { display: block; width: 100%; height: auto; overflow: visible; }
.analytics-trend-grid[b-h60h97irvo] { stroke: var(--line); stroke-width: 1; }
.analytics-trend-area[b-h60h97irvo] { fill: var(--series-1); opacity: .1; }
.analytics-trend-line[b-h60h97irvo] { fill: none; stroke: var(--series-1); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.analytics-trend-point[b-h60h97irvo] { fill: var(--surface); stroke: var(--series-1); stroke-width: 2; }
.analytics-trend-point:hover[b-h60h97irvo] { fill: var(--series-1); }
.analytics-trend-axis[b-h60h97irvo] { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 6px; font-size: 10.5px; color: var(--ink-faint); }
.analytics-trend-axis > span[b-h60h97irvo] { justify-self: center; white-space: nowrap; }

/* Cost distribution: a department name may take two lines; every name keeps two lines' room so the bars still end on
   one baseline. */
.analytics-bar-name[b-h60h97irvo] { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; min-height: 2.5em; overflow-wrap: anywhere; }
/* /Components/Pages/Payroll/PayrollCinsfPayments.razor.rz.scp.css */
/* The month and its note stack, full width like the cards above and below (walkthrough 2026-10-01). */
.cinsf-month-bar[b-a0ih2rjtt2] {
    width: 100%;
    flex-direction: column;
    align-items: flex-start;
}

/* The shared payments table: a reversal link never breaks; who recorded it may wrap at a space, so the table fits a tablet
   without a sideways scroll (walkthrough 2026-10-01 final check). */
.cinsf-payments[b-a0ih2rjtt2]  .tax-remit-history td.table-actions {
    white-space: nowrap;
}
/* /Components/Pages/Payroll/PayrollHistory.razor.rz.scp.css */
/* Walkthrough 2026-10-01. The register's columns all hold values that must not wrap (dates, numbers, money), so at
   1280px their sum came to a few pixels more than the card and the last column sat against the card's edge. Only the
   long "Employer cost" heading may fold onto two lines when the table is that tight; its figures never do. */
.data-table th.th-wrap[b-4zqgqyyabw] { white-space: normal; }

/* On a phone the Type and Status filters share the row in two equal halves under the full-width search, instead of
   two narrow boxes that leave a gap on the right. */
@media (max-width: 640px) {
    .payroll-history-toolbar[b-4zqgqyyabw]  .list-toolbar-filters { flex: 1 1 100%; flex-wrap: nowrap; }
    .list-filter-field[b-4zqgqyyabw] { flex: 1 1 0; min-width: 0; }
    .list-filter-field select.field-input[b-4zqgqyyabw] { width: 100%; min-width: 0; }
}
/* /Components/Pages/Payroll/PayrollHome.razor.rz.scp.css */
/* Walkthrough 2026-10-01: the two cards of the lower row (recent pay runs, upcoming obligations) end on one line
   instead of the shorter one stopping part way down. The left column is a stack (needs attention, then recent runs),
   so its last card takes up whatever height the row has left. */
.payroll-lower[b-kz9jmw9t4j] { align-items: stretch; }
.payroll-work-list[b-kz9jmw9t4j] { display: flex; flex-direction: column; }
.payroll-work-list > .card:last-child[b-kz9jmw9t4j] { flex: 1 1 auto; }
/* /Components/Pages/Payroll/PayrollReconciliationPage.razor.rz.scp.css */
/* The tie-out's long first heading may wrap, so on a phone its two figure columns fit beside the descriptions instead
   of being pushed past the card's edge; the table still scrolls if a figure is wider (walkthrough 2026-10-01). */
.recon-tieout th:first-child[b-it5ytvois7] { white-space: normal; }

/* Eight figures across: a little less side padding lets the run table fit a tablet without scrolling (walkthrough 2026-10-01). */
.recon-runs th[b-it5ytvois7], .recon-runs td[b-it5ytvois7] { padding-left: 10px; padding-right: 10px; }
/* /Components/Pages/Payroll/PayrollSwitchGoPayrollPage.razor.rz.scp.css */
/* Step 1 reads top to bottom with even gaps: the cut-over date at a date's width, then each option on its own line,
   then the upload box (walkthrough 2026-10-01). */
.gp-cutover[b-y99xotxn0z] { max-width: 200px; margin-bottom: 14px; }
.gp-options[b-y99xotxn0z] { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 16px; }
/* A .check-field lines itself up at the end of a row of fields; in this stack it starts at the left. */
.gp-options > .check-field[b-y99xotxn0z] { align-self: flex-start; min-height: 32px; }
/* The summary keeps a readable width; a person's notes sit on their own full-width line beneath, joined to the row above. */
.gp-details[b-y99xotxn0z] { min-width: 220px; }
.gp-has-notes > td[b-y99xotxn0z] { border-bottom: 0; padding-bottom: 2px; }
.gp-notes > td[b-y99xotxn0z] { padding-top: 0; }

@media (max-width: 640px) {
    .gp-cutover[b-y99xotxn0z] { max-width: none; }
}
/* /Components/Pages/Payroll/PayrollUpgradePage.razor.rz.scp.css */
/* One width with the tab bar and "Run payroll" above: the shared 780px cap stopped these cards about 220px short of
   the header's right edge (walkthrough 2026-10-01). */
.payroll-setup-message[b-3lixffg7sw],
.payroll-setup-card[b-3lixffg7sw] { max-width: none; }
/* /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/PayslipRegisterPage.razor.rz.scp.css */
/* The count and Export travel together as one toolbar item (walkthrough 2026-10-01); the button keeps the toolbar's
   control height, which the toolbar only gives to a button that is its direct child. */
.payslip-export[b-qoligy5tjw] { gap: 10px; flex-wrap: nowrap; }
.payslip-export > .btn[b-qoligy5tjw] { min-height: var(--control-height); padding-block: 0; }
/* /Components/Pages/Payroll/PublicHolidaysPage.razor.rz.scp.css */
/* Section headers: title (and its count or rate) on the left, the buttons as one group on the right; the group wraps
   onto its own line when there is no room (walkthrough 2026-10-01). */
.ph-head[b-llkgjj45p9] { flex-wrap: wrap; gap: 8px 16px; }
.ph-title[b-llkgjj45p9] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }

/* A four-digit year needs no full-width box. */
.ph-year[b-llkgjj45p9] { width: auto; min-width: 96px; }

@media (max-width: 640px) {
    .ph-head[b-llkgjj45p9] { flex-direction: column; align-items: flex-start; }
    .ph-head > .head-actions[b-llkgjj45p9] { justify-content: flex-start; }
}
/* /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; }
/* A period and a date are short values: the fields keep a form's width instead of running across the card (owner, 2026-10-01). */
.pay-setup-body > .field[b-jes7ta5khw], .pay-setup-body > .field-row[b-jes7ta5khw], .pay-setup-body > .pay-employee-picks[b-jes7ta5khw] { max-width: 520px; }
.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/Payroll/TimesheetList.razor.rz.scp.css */
/* Walkthrough 2026-10-01. The timesheet itself is the shared TimesheetEditor; the rules that reach into it use ::deep
   from this page's board, so they apply to the editor only where it sits on this screen. */

/* The list filters stay on one row: shorter words, and the row scrolls sideways rather than wrapping when it must. */
.ts-filters[b-3wju079but] { flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding-inline: 6px; }
.ts-filter[b-3wju079but] { white-space: nowrap; flex: 0 0 auto; padding-inline: 7px; }

/* Walkthrough 2026-10-02. The person's head: the name with ‹ 2 of 5 › beside it, the status under them, and the person's
   own actions on the right. On a phone the actions drop below the name, still spaced. */
.ts-detail-who[b-3wju079but] { min-width: 0; }
.ts-detail-name[b-3wju079but] { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.ts-detail-name[b-3wju079but]  .person-stepper { margin-block: -4px; }

/* The whole-period group sits at the right of the period's dates and keeps its 8px gaps when it wraps. */
.ts-period-actions[b-3wju079but] { justify-content: flex-end; align-items: center; }
@media (max-width: 640px) {
    .ts-period-actions[b-3wju079but] { justify-content: flex-start; }
    /* The four totals do not fit one phone line; two by two reads cleanly, where wrapping left "Total" alone below. */
    .ts-detail[b-3wju079but]  .ts-hours-line { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 28px; }
}

/* Every calendar day writes its date the same way: the day number over the month ("28 / Sep" and "1 / Oct"), where
   before a narrow cell broke "28 Sep" in two and left "1 Oct" on one line. */
.ts-detail[b-3wju079but]  .ts-calendar-day > span { width: min-content; line-height: 1.25; }

/* The day editor's lone clear button (×) moves from the bottom right to the top right, beside the day's heading. */
.ts-detail[b-3wju079but]  .ts-day-editor { position: relative; }
.ts-detail[b-3wju079but]  .ts-day-fields > .cell-end { position: absolute; top: 12px; right: 12px; }
.ts-detail[b-3wju079but]  .ts-day-fields > .cell-end .icon-btn { padding: 6px 8px; font-size: 18px; line-height: 1; border-radius: var(--radius-sm); }
.ts-detail[b-3wju079but]  .ts-day-fields > .cell-end .icon-btn:hover:not(:disabled) { background: var(--surface-sunk); }

/* Four fields in a row at tablet width fold "Ordinary hours" onto two lines; the inputs sit on one line all the same. */
.ts-detail[b-3wju079but]  .ts-day-fields > div { display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }

/* On a phone the step bar shows each step's number and only the current step's words, instead of four cut-off labels. */
@media (max-width: 640px) {
    .ts-steps li:not(.current)[b-3wju079but] { flex: 0 0 auto; }
    .ts-steps li:not(.current) > div[b-3wju079but] { display: none; }
    .ts-steps li.current[b-3wju079but] { flex: 1 1 auto; }
    .ts-steps:not(:has(li.current)) li:last-child[b-3wju079but] { flex: 1 1 auto; }
    .ts-steps:not(:has(li.current)) li:last-child > div[b-3wju079but] { display: block; }
}
/* /Components/Pages/Payroll/WorkPatternsPage.razor.rz.scp.css */
/* Walkthrough 2026-10-02: the payroll settings reading width, as the pay calendar (PayPeriods.razor.css). */
.wp-page[b-fo1nwnl3sc] { max-width: 960px; }

/* The pattern editor: one field per row, each at its own natural width, with the house gap between them. */
.wp-editor-title[b-fo1nwnl3sc] { margin: 0 0 14px; font-size: 16px; }
.wp-editor[b-fo1nwnl3sc] { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.wp-editor > .field[b-fo1nwnl3sc] { margin: 0; }
.wp-days[b-fo1nwnl3sc] { border: 0; padding: 0; margin: 0; }
.wp-days > legend[b-fo1nwnl3sc] { padding: 0; margin-bottom: 8px; }
.wp-hours[b-fo1nwnl3sc] { max-width: 200px; }
.wp-hours > .faint[b-fo1nwnl3sc] { white-space: nowrap; }

/* The pattern cards run the page's width (960px), like the message above them and the "Add pattern" button's edge. */
.payroll-focused-editor[b-fo1nwnl3sc] { max-width: none; }
/* The timesheet switch starts at the left with the fields, not stretched across the column. */
.wp-editor > .check-field[b-fo1nwnl3sc] { align-self: flex-start; }
/* Edit and Delete stay one pair; on a phone they move under the pattern's description. */
.wp-actions[b-fo1nwnl3sc] { flex-wrap: nowrap; flex-shrink: 0; }
@media (max-width: 640px) {
    .payroll-settings-summary[b-fo1nwnl3sc] { flex-direction: column; gap: 12px; }
}
/* /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; }
/* A company's email-in address: long, copied by hand, so monospace, breakable, and one click selects it. */
.cd-email-in[b-n4xx2xys70] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12.5px; word-break: break-all; user-select: all; }
/* /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: 2fr 0.9fr 0.9fr 1.3fr 2.4fr; }
/* A company's email-in address: long, copied by hand, so monospace and allowed to break anywhere rather than widen the row. */
.cl-address[b-34ep19b5tz] { font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: 12px; word-break: break-all; user-select: all; }
/* 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 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; }
/* /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/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; }
/* A feature switch sits under its module, indented, so the page reads as each module and the parts of it that can go. */
.mods-feature[b-nn6dp1caqk] { padding-left: 36px; }
.mods-off .fw-600[b-nn6dp1caqk], .mods-off .fw-500[b-nn6dp1caqk] { color: var(--ink-soft); }
/* /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; }