/* V48 LAYOUT (agent "layout") -- the shared V48 layout primitives (docs/V48/IMPL/LAYOUT_SYSTEM_HE.md; package DATA/DESIGN_TOKENS.json,
   DATA/LAYOUT_BLUEPRINTS_24.json, 03_MOBILE_WEB_HE.html: "320-599 one column; 600-1023 adapt to the content width; 1024 and up a
   side column and a secondary summary when it fits. Layout decisions, not device detection. 200% zoom and enlarged text.").

   BREAKPOINT CONTRACT (coordination with the header):
   - The header keeps the V46 TN-D04 VIEWPORT contract (Content/v42/pb-v42-header.*: wide >= 1200 one row, tablet 768-1199,
     mobile < 768, compact when it does not fit). Nothing here touches .pb42*, .pb-sb*, _Layout or another screen.
   - Content uses CONTAINER QUERIES on the page content (.pb48-page = the query container; every column of .pb48-cols is a
     container too, so a list inside the main column follows the COLUMN width): < 600 one column, cards; >= 600 table rows;
     >= 1024 main + side summary, side-by-side comparison. There is NO viewport media query in this file (only @media print);
     Light / System / Dark come from the tokens, so these rules never fight the header or restyle another screen.
   - Fallback: a browser without container queries ignores every @container block = the single-column card layout (complete,
     readable, every action reachable).
   - Every selector starts with .pb48- or [data-pb48-...]. Colours = the EXISTING tokens of pb-tokens.css (Light / System / Dark
     resolved there; DESIGN_TOKENS.json surface/ink/muted/line/inputLine/accentText/soft/focus map to --pb-surface /
     --pb-text-primary / --pb-text-secondary / --pb-divider / --pb-control-border / --pb-action-text / --pb-action-soft-bg /
     --pb-focus); no new palette. Sizes: 16px body, 14px secondary, page title 26, section title 20, line height 1.55, card radius
     12, input radius 8, button radius 10, 48px targets, 16px card padding, spacing 4/8/12/16/24/32. Logical properties only
     (RTL / LTR mirror by themselves). No fixed height on anything that holds text (zoom 200% / enlarged text safe).
   - The ONE bottom region (.pb48-actionbar) becomes sticky only when pb-v48-layout.js set data-pb48-mode="sticky" AND the page
     content is narrower than 600px; it is in the flow, so its height is reserved where it stands and the form keeps its
     buttons (never moved out of the <form>). No script = a static row at the end of the task. */

/* ------------------------------------------------------------------ 0. page wrapper */
.pb48-page {
    container: pb48page / inline-size;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: var(--pb44-content-max, 1280px);
    margin-inline: auto;
    padding-inline: 0;                 /* the shell gutter (--pb-gutter: 16 below 768) already gives the 16px inset */
    font-size: var(--pb-text-body, 1rem);
    line-height: 1.55;
    color: var(--pb-text-primary, #171A1F);
    overflow-wrap: anywhere;
}
.pb48-page--inset { padding-inline: 16px; }      /* a page rendered outside the standard shell gutter */
.pb48-page--form { max-inline-size: var(--pb44-form-max, 640px); }
.pb48-page--doc { max-inline-size: var(--pb44-document-max, 760px); }
.pb48-page *, .pb48-page *::before, .pb48-page *::after { box-sizing: border-box; }

.pb48-title { margin: 0 0 8px; font-size: 1.625rem; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.pb48-section-title { margin: 24px 0 12px; font-size: 1.25rem; line-height: 1.35; font-weight: 700; }
.pb48-lead { margin: 0 0 16px; max-inline-size: 65ch; color: var(--pb-text-secondary, #667085); }
.pb48-secondary { font-size: var(--pb-text-compact, .875rem); line-height: 1.55; color: var(--pb-text-secondary, #667085); }
.pb48-stack { display: flex; flex-direction: column; gap: 16px; }
.pb48-stack > * { margin-block: 0; }

.pb48-card {
    padding: 16px;
    border: 1px solid var(--pb-divider, #D9DEE7);
    border-radius: 12px;
    background: var(--pb-surface, #FFFFFF);
    color: var(--pb-text-primary, #171A1F);
}

/* controls inside a V48 page: input radius 8, button radius 10, 48px targets, 16px text (no iOS zoom on focus) */
.pb48-page input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=color]),
.pb48-page select, .pb48-page textarea {
    border-radius: 8px;
    min-block-size: var(--pb44-target, 48px);
    font-size: max(1rem, 16px);
    max-inline-size: 100%;
}
.pb48-page textarea { min-block-size: 112px; }
.pb48-page .pb-btn, .pb48-page button:not(.pb48-link), .pb48-page input[type=submit], .pb48-page input[type=button] {
    border-radius: 10px;
    min-block-size: var(--pb44-target, 48px);
    min-inline-size: var(--pb44-target, 48px);
}
.pb48-page [aria-invalid="true"], .pb48-page .input-validation-error {
    border-color: var(--pb-danger-text, #B42318);
    border-inline-start-width: 3px;
}
.pb48-page :focus-visible { outline: var(--pb44-ring, 3px) solid var(--pb-focus, #026AA2); outline-offset: 2px; }

/* ------------------------------------------------------------------ 1. main + side column */
.pb48-cols { display: flex; flex-direction: column; gap: 16px; min-inline-size: 0; }
.pb48-cols > * { container-type: inline-size; min-inline-size: 0; }   /* a list in a column follows the column width */
.pb48-aside { display: flex; flex-direction: column; gap: 16px; }     /* below 1024: AFTER main, in the flow, never sticky */
.pb48-aside > * { margin-block: 0; }

@container (min-width: 1024px) {
    .pb48-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) clamp(320px, 30%, 360px);
        gap: 24px;
        align-items: start;
    }
    .pb48-cols--wide-aside { grid-template-columns: minmax(0, 1fr) 360px; }
    .pb48-aside { position: sticky; inset-block-start: 16px; }
    /* the script marks an aside taller than the visual viewport: it scrolls with the page (zoom 200%, enlarged text) */
    .pb48-aside[data-pb48-unstick="1"] { position: static; }
}

/* ------------------------------------------------------------------ 2. responsive record list (cards < 600, table rows >= 600) */
.pb48-list { display: flex; flex-direction: column; gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.pb48-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    border: 1px solid var(--pb-divider, #D9DEE7);
    border-radius: 12px;
    background: var(--pb-surface, #FFFFFF);
    color: var(--pb-text-primary, #171A1F);
}
.pb48-row--head { display: none; }
.pb48-row[aria-current="true"], .pb48-row[data-pb48-current="1"] { border-color: var(--pb-selection-border, #BD006E); background: var(--pb-surface-selected, #FFF0F7); }
.pb48-cell { display: block; min-inline-size: 0; overflow-wrap: anywhere; }
.pb48-cell[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 2px;
    font-size: var(--pb-text-compact, .875rem);
    line-height: 1.4;
    font-weight: 600;
    color: var(--pb-text-secondary, #667085);
}
.pb48-cell--title { font-weight: 700; }
.pb48-cell--title[data-label]::before, .pb48-cell--actions[data-label]::before { content: none; }
.pb48-cell--num { font-variant-numeric: tabular-nums; }
.pb48-cell--actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pb48-cell--actions > a, .pb48-cell--actions > button, .pb48-cell--actions > .pb-btn { min-block-size: var(--pb44-target, 48px); }

@container (min-width: 600px) {
    .pb48-list {
        display: table;
        inline-size: 100%;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--pb-divider, #D9DEE7);
        border-radius: 12px;
        background: var(--pb-surface, #FFFFFF);
    }
    .pb48-row { display: table-row; padding: 0; border: 0; border-radius: 0; background: transparent; }
    .pb48-row--head { display: table-row; }
    .pb48-cell {
        display: table-cell;
        padding: 12px 16px;
        vertical-align: middle;
        text-align: start;
        border-block-start: 1px solid var(--pb-divider, #D9DEE7);
    }
    .pb48-row:first-child > .pb48-cell { border-block-start: 0; }
    .pb48-row:first-child > .pb48-cell:first-child { border-start-start-radius: 11px; }
    .pb48-row:first-child > .pb48-cell:last-child { border-start-end-radius: 11px; }
    .pb48-row:last-child > .pb48-cell:first-child { border-end-start-radius: 11px; }
    .pb48-row:last-child > .pb48-cell:last-child { border-end-end-radius: 11px; }
    .pb48-row--head > .pb48-cell {
        font-size: var(--pb-text-compact, .875rem);
        font-weight: 700;
        color: var(--pb-text-secondary, #667085);
        background: var(--pb-surface-raised, #F7F7F7);
    }
    .pb48-cell[data-label]::before { content: none; }
    .pb48-cell--num { text-align: end; }
    .pb48-cell--actions { display: table-cell; white-space: nowrap; }
    .pb48-cell--actions > * + * { margin-inline-start: 8px; }
    .pb48-row[aria-current="true"] > .pb48-cell, .pb48-row[data-pb48-current="1"] > .pb48-cell { background: var(--pb-surface-selected, #FFF0F7); }
}

/* ------------------------------------------------------------------ 3. comparison (stacked < 1024, side by side >= 1024, max 3 per row) */
.pb48-compare { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; }
.pb48-compare__col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-inline-size: 0;
    padding: 16px;
    border: 1px solid var(--pb-divider, #D9DEE7);
    border-radius: 12px;
    background: var(--pb-surface, #FFFFFF);
}
.pb48-compare__col[aria-current="true"], .pb48-compare__col[data-pb48-current="1"] { border-color: var(--pb-selection-border, #BD006E); box-shadow: inset 0 0 0 1px var(--pb-selection-border, #BD006E); }
.pb48-compare__head { margin: 0; font-size: 1.25rem; line-height: 1.35; font-weight: 700; }
.pb48-compare__action { margin-block-start: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.pb48-compare__action > * { min-block-size: var(--pb44-target, 48px); }
@container (min-width: 1024px) {
    .pb48-compare { grid-template-columns: repeat(auto-fit, minmax(max(280px, calc((100% - 32px) / 3)), 1fr)); }
}

/* ------------------------------------------------------------------ 4. THE single bottom action region */
.pb48-actionbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin-block: 24px 0;
    padding-block: 8px;
}
.pb48-actionbar > .pb-btn, .pb48-actionbar > button, .pb48-actionbar > a, .pb48-actionbar > input[type=submit] {
    min-block-size: var(--pb44-target, 48px);
    border-radius: 10px;
}
.pb48-actionbar__status { flex: 1 1 100%; margin: 0; font-size: var(--pb-text-compact, .875rem); color: var(--pb-text-secondary, #667085); }
/* empty = no space, but it stays in the accessibility tree so the first message is announced */
.pb48-actionbar__status:empty { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
@container (max-width: 599.98px) {
    .pb48-actionbar > .pb-btn, .pb48-actionbar > button, .pb48-actionbar > a, .pb48-actionbar > input[type=submit] { flex: 1 1 auto; justify-content: center; text-align: center; }
    .pb48-actionbar[data-pb48-mode="sticky"] {
        position: sticky;
        inset-block-end: 0;
        z-index: 40;                              /* under the V47 printer nav (900), dialogs and menus */
        margin-block-start: 16px;
        padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--pb-surface, #FFFFFF);
        border-block-start: 1px solid var(--pb-divider, #D9DEE7);
        box-shadow: 0 -6px 12px -10px rgba(0, 0, 0, .35);
    }
}
/* a page that shows the V47 printer bottom nav keeps ONE bottom region: the bar stays in the flow */
[data-pb48-bottomnav="1"] .pb48-actionbar, .pb48-actionbar[data-pb48-inline="1"] { position: static; box-shadow: none; }

/* ------------------------------------------------------------------ 5. error summary */
.pb48-errsum {
    margin: 0 0 24px;
    padding: 16px;
    border: 1px solid var(--pb-danger-text, #B42318);
    border-inline-start-width: 4px;
    border-radius: 12px;
    background: var(--pb-danger-surface, #FEF3F2);
    color: var(--pb-text-primary, #171A1F);
    line-height: 1.55;
}
.pb48-errsum:focus { outline: var(--pb44-ring, 3px) solid var(--pb-focus, #026AA2); outline-offset: 2px; }
.pb48-errsum__title, .pb48-errsum > p:first-child { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.35; font-weight: 700; color: var(--pb-text-primary, #171A1F); }
.pb48-errsum__title::before { content: "\26A0\00A0"; color: var(--pb-danger-text, #B42318); }
.pb48-errsum__hint { margin: 0 0 4px; font-size: var(--pb-text-compact, .875rem); color: var(--pb-text-secondary, #667085); }
.pb48-errsum ul { margin: 0; padding-inline-start: 20px; }
.pb48-errsum li { margin: 0; }
.pb48-errsum a { display: inline-block; padding-block: 12px; line-height: 1.5; color: var(--pb-danger-text, #B42318); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.pb48-errsum a:focus-visible { outline: var(--pb44-ring, 3px) solid var(--pb-focus, #026AA2); outline-offset: 2px; }

/* ------------------------------------------------------------------ 6. shared screen states (loading / empty / error / denied / unavailable) */
.pb48-state {
    margin: 16px 0;
    padding: 16px;
    border: 1px solid var(--pb-divider, #D9DEE7);
    border-inline-start-width: 4px;
    border-radius: 12px;
    line-height: 1.55;
    text-align: start;
    max-inline-size: 100%;
}
.pb48-state .pb-state-title, .pb48-state .pb-empty-title, .pb48-state__title { margin: 0 0 4px; font-size: 1.25rem; line-height: 1.35; font-weight: 700; }
.pb48-state .pb-state-body, .pb48-state .pb-empty-body { margin: 0; font-size: 1rem; }
.pb48-state .pb-state-note { font-size: var(--pb-text-compact, .875rem); }
.pb48-state .pb-state-actions, .pb48-state .pb-empty-state-actions { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-block-start: 12px; justify-content: flex-start; }
.pb48-state .pb-btn { min-block-size: var(--pb44-target, 48px); border-radius: 10px; }
.pb48-state[data-pb-state="error_retry"], .pb48-state[data-pb-state="unknown_reconcile"], .pb48-state[data-pb-state="stale_version"] {
    border-color: var(--pb-danger-text, #B42318);
    background: var(--pb-danger-surface, #FEF3F2);
    color: var(--pb-text-primary, #171A1F);
}
.pb48-state[data-pb-state="permission_denied"], .pb48-state[data-pb-state="gate_blocked"] {
    border-color: var(--pb-warning-text, #93370D);
    background: var(--pb-warning-surface, #FFFAEB);
    color: var(--pb-text-primary, #171A1F);
}
.pb48-state--empty {
    max-inline-size: 560px;
    border-inline-start-width: 1px;
    background: var(--pb-surface-raised, #F7F7F7);
    color: var(--pb-text-primary, #171A1F);
    text-align: center;
    margin-inline: auto;
}
.pb48-state--empty .pb-empty-state-actions { justify-content: center; }
.pb48-state--loading { border-style: dashed; border-inline-start-width: 1px; background: var(--pb-surface, #FFFFFF); }
.pb48-state--loading .pb-skeleton-row { min-block-size: 56px; block-size: auto; border-radius: 12px; }

/* a whole page that is one state (403 / 404 / 413 / 500 / 503 / module off / gate closed) */
.pb48-statepage { padding-block: 8px 24px; }
.pb48-statepage > h1 { margin: 0 0 12px; font-size: 1.625rem; line-height: 1.3; font-weight: 700; text-wrap: balance; }
.pb48-statepage > p { line-height: 1.55; }
.pb48-statepage .pb-btn { min-block-size: var(--pb44-target, 48px); border-radius: 10px; display: inline-flex; align-items: center; }
.pb48-statepage > p > a:not(.pb-btn) { display: inline-block; padding-block: 12px; }

/* ------------------------------------------------------------------ 7. live region + utilities */
.pb48-sr {
    position: absolute !important;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap;
}

@media print {
    .pb48-actionbar[data-pb48-mode="sticky"] { position: static; box-shadow: none; border: 0; }
    .pb48-aside { position: static; }
}