/* Allocentra UI — one token system, shared components, responsive adaptations. */
:root {
  color-scheme: light;
  --canvas: #f2f5f7;
  --surface: #ffffff;
  --surface-subtle: #f7f9fa;
  --surface-selected: #e8f3f0;
  --ink: #182d39;
  --text-secondary: #425967;
  --text-muted: #5b6d7a;
  --border: #dce3e8;
  --control-border: #82949f;
  --primary: #09665b;
  --primary-hover: #075247;
  --on-primary: #ffffff;
  --focus: #087baf;
  --success: #17643f;
  --success-surface: #eaf5ee;
  --warning: #815019;
  --warning-surface: #fff5e5;
  --error: #a12b32;
  --error-surface: #fff0f0;
  --info: #245b84;
  --info-surface: #edf4fb;
  --disabled-surface: #edf0f2;
  --disabled-text: #536570;
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --radius-sm: .375rem;
  --radius-md: .625rem;
  --radius-lg: .875rem;
  --shadow: 0 3px 12px #182d390a;
  --shadow-overlay: 0 16px 48px #182d3926;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: ui-monospace, 'SFMono-Regular', Consolas, monospace;
  --text-xs: .75rem;
  --text-sm: .875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.5rem;
  --text-display: clamp(1.625rem, 2.25vw, 2.25rem);
  --control-height: 2.75rem;
  --content-width: 94rem;
}

* { box-sizing: border-box; }
html { scroll-padding-block-start: 6rem; }
body { margin: 0; background: var(--canvas); color: var(--ink); font: 400 var(--text-md)/1.55 var(--font); }
button, input, select, textarea { font: inherit; scroll-margin-block: 6rem; }
button, a, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; }
button, input, select, textarea, details, fieldset, section, article, main, nav { min-inline-size: 0; }
img, svg { max-inline-size: 100%; }
button, summary { touch-action: manipulation; }
a { color: var(--primary); text-underline-offset: .2em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.hidden { display: none !important; }
.skip-link:not(:focus) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link:focus { position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--surface); border-radius: var(--radius-sm); }
h1, h2, h3 { color: var(--ink); line-height: 1.3; overflow-wrap: anywhere; }
h1 { margin: var(--space-2) 0 var(--space-3); font-size: var(--text-display); font-weight: 650; letter-spacing: -.035em; }
h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: 650; letter-spacing: -.015em; }
h3 { margin: var(--space-5) 0 var(--space-3); font-size: var(--text-md); font-weight: 650; }
p { margin-block: var(--space-3); overflow-wrap: anywhere; }
strong { font-weight: 650; }
.small, .hint { color: var(--text-secondary); font-size: var(--text-sm); line-height: 1.6; overflow-wrap: anywhere; }
.hint { display: block; max-inline-size: 34ch; }
.eyebrow { display: block; color: var(--primary); font-size: var(--text-xs); font-weight: 700; letter-spacing: .11em; line-height: 1.5; }

/* Application frame. The navigation and all role-dependent hooks stay intact. */
body > header { position: sticky; inset-block-start: 0; z-index: 40; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); min-block-size: 5rem; padding: var(--space-4) max(var(--space-8), calc((100vw - var(--content-width)) / 2 + var(--space-8))); background: var(--surface); border-block-end: 1px solid var(--border); }
.brand { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
.brand strong { display: block; font-size: 1.25rem; letter-spacing: -.035em; }
.brand small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-block-start: .125rem; }
.mark { display: flex; flex: 0 0 2.5rem; inline-size: 2.5rem; block-size: 2.5rem; }
.mark img { display: block; inline-size: 100%; block-size: 100%; border-radius: var(--radius-md); }
.user { display: flex; align-items: center; gap: var(--space-2); }
.user #who { overflow-wrap: anywhere; }
.account-popover { position: relative; }
.account-popover > summary { display: flex; align-items: center; gap: var(--space-2); min-block-size: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 600; cursor: pointer; list-style: none; }
.account-popover > summary::after { content: '⌄'; color: var(--text-muted); }
.account-popover[open] > summary { border-color: var(--primary); background: var(--surface-selected); color: var(--primary); }
.account-popover > summary::-webkit-details-marker { display: none; }
.account-content { position: absolute; inset-block-start: calc(100% + var(--space-2)); inset-inline-end: 0; z-index: 45; inline-size: 16rem; max-inline-size: calc(100vw - var(--space-8)); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-overlay); }
.account-label { margin-block-end: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); }
main { inline-size: 100%; max-inline-size: var(--content-width); margin: var(--space-8) auto; padding-inline: var(--space-8); }
#app { display: grid; grid-template-columns: 14rem minmax(0, 1fr); column-gap: var(--space-8); row-gap: var(--space-6); align-items: start; }
#app > .heading { grid-column: 2; grid-row: 1; }
#app > .page { grid-column: 2; grid-row: 2; }
#app > footer { grid-column: 2; grid-row: 3; }
.heading { padding-block: var(--space-2) var(--space-1); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.heading p { margin: 0; color: var(--text-secondary); max-inline-size: 75ch; font-size: var(--text-sm); }
.heading .status { flex-shrink: 0; margin-block-start: var(--space-2); }
#tabs { grid-column: 1; grid-row: 1 / 4; position: sticky; inset-block-start: 7rem; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
#tabs::before { content: 'ALLOCENTRA WORKSPACE'; padding: var(--space-3) var(--space-3) var(--space-4); color: var(--text-muted); font-size: .6875rem; font-weight: 700; letter-spacing: .12em; }
.tab { display: flex; align-items: center; justify-content: flex-start; gap: var(--space-3); inline-size: 100%; padding: var(--space-3); border: 1px solid transparent; border-inline-start-width: 3px; background: transparent; color: var(--text-secondary); text-align: start; font-size: var(--text-sm); font-weight: 500; }
.tab svg { flex: 0 0 1.125rem; inline-size: 1.125rem; block-size: 1.125rem; stroke-width: 1.6; }
.tab.on, .tab[aria-current='page'] { border-color: #c6dfd7; border-inline-start-color: var(--primary); background: var(--surface-selected); color: var(--primary); font-weight: 650; }
.mobile-navigator { display: none; }
footer { padding-block: var(--space-4); color: var(--text-muted); font-size: var(--text-xs); text-align: start; }

/* Workspaces organize existing controls without parallel page implementations. */
.workspace-intro { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); margin-block-end: var(--space-6); padding-block: var(--space-4); }
.workspace-intro h2 { margin-block: var(--space-2); font-size: var(--text-xl); }
.workspace-intro p { max-inline-size: 58ch; margin-block: var(--space-2) 0; color: var(--text-secondary); font-size: var(--text-sm); }
.quick-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.process-strip { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); margin-block-end: var(--space-6); overflow: hidden; }
.process-strip > div { padding: var(--space-5); border-inline-end: 1px solid var(--border); }
.process-strip > div:last-child { border-inline-end: 0; }
.process-strip span { display: block; color: var(--primary); font-size: var(--text-xs); font-variant-numeric: tabular-nums; margin-block-end: var(--space-2); }
.process-strip strong { font-size: var(--text-sm); }
.process-strip p { margin-block: var(--space-2) 0; font-size: var(--text-xs); color: var(--text-muted); }
.section-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-block-end: var(--space-6); padding: var(--space-2); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.section-link { background: transparent; border-color: transparent; color: var(--text-secondary); font-weight: 500; padding-inline: var(--space-4); }
.section-link.selected { color: var(--primary); background: var(--surface-selected); border-color: #c6dfd7; font-weight: 650; }
.section-link:not(.selected):not(:disabled):hover { color: var(--primary); background: var(--surface-subtle); border-color: var(--border); }
.workspace-pane > :last-child { margin-block-end: 0; }
.workspace-pane > .task-group > summary { font-size: var(--text-md); padding-block: var(--space-5); }
.policy-form { gap: var(--space-5); margin-block: var(--space-6); }
.policy-form fieldset { margin: 0; min-inline-size: 0; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); }
.policy-form legend { padding-inline: var(--space-2); color: var(--ink); font-size: var(--text-sm); font-weight: 650; }
.policy-form fieldset > .hint { max-inline-size: 70ch; margin-block: 0 var(--space-4); }
.field-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: start; gap: var(--space-4); }
.field-grid > p, .field-grid > label:has(textarea), .field-grid > label:has(input[type="checkbox"]) { grid-column: 1 / -1; }
.field-grid > p { font-size: var(--text-sm); color: var(--text-muted); margin: 0; }
.field-grid > label:has(select[multiple]) { grid-column: 1 / -1; }
.policy-submit { justify-self: start; }
.technical-detail summary { cursor: pointer; color: var(--primary); font-weight: 500; padding-block: var(--space-2); }
.technical-detail pre { white-space: pre-wrap; overflow-wrap: anywhere; font: var(--text-xs)/1.7 var(--font-mono); max-inline-size: 40rem; }
.technical-detail code { font: var(--text-xs)/1.7 var(--font-mono); color: var(--text-muted); }
.status[data-mode="live"] { color: var(--primary); background: var(--surface-selected); border-color: #c6dfd7; }
.contextual-note h2 { font-size: var(--text-md); }

/* Authentication and fresh-install presentation share the same controls. */
#loginArea { display: grid; grid-template-columns: minmax(0, 1fr) minmax(22rem, 28rem); align-items: center; gap: clamp(2rem, 8vw, 8rem); max-inline-size: 78rem; min-block-size: calc(100svh - 10rem); margin-block: var(--space-8); }
.login-context { padding-block: var(--space-8); }
.login-context h2 { max-inline-size: 12ch; margin-block: var(--space-5) var(--space-6); font-size: clamp(2.5rem, 4.5vw, 4rem); font-weight: 600; line-height: 1.1; letter-spacing: -.05em; }
.login-context > p { max-inline-size: 45ch; color: var(--text-secondary); font-size: var(--text-lg); }
.login-context dl { margin-block: var(--space-10) 0; border-block-start: 1px solid var(--border); }
.login-context dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--border); font-size: var(--text-sm); }
.login-context dt { font-weight: 650; }
.login-context dd { margin: 0; color: var(--text-muted); }
.login { margin: 0; padding: var(--space-10); box-shadow: var(--shadow); }
.login h1 { margin-block: var(--space-3); font-size: 1.75rem; }
.login > p { color: var(--text-secondary); font-size: var(--text-sm); }
.login form { margin-block: var(--space-6); }
.user:has(#logout.hidden) { display: none; }
.login .small { margin-block-end: 0; padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); }
.install { max-inline-size: 45rem; padding-block: var(--space-8); }
.install > img { margin-block-end: var(--space-4); }
.install form { margin-block: var(--space-6); padding: var(--space-8); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.install hr { inline-size: 100%; border: 0; border-block-start: 1px solid var(--border); margin-block: var(--space-3); }
.install small { color: var(--text-secondary); }

/* Shared surfaces, metrics and groups. */
.panel { margin: 0 0 var(--space-6); padding: var(--space-6); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.panel > :last-child { margin-block-end: 0; }
.panel > .between + .small { margin-block: 0 var(--space-5); }
.between { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-4); }
.between h2 { margin-block-end: 0; }
.between > div { min-inline-size: 0; }
.between > label { flex: 1 1 13rem; }
.between + p { margin-block-start: var(--space-4); }
.metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin-block-end: var(--space-6); }
.metric { padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-inline-size: 0; }
.metric span { display: block; color: var(--text-secondary); font-size: var(--text-xs); font-weight: 500; }
.metric strong { display: block; margin-block-start: var(--space-3); font-size: clamp(1.25rem, 1.8vw, 1.75rem); font-weight: 600; letter-spacing: -.035em; font-variant-numeric: tabular-nums; line-height: 1.3; overflow-wrap: anywhere; }
.status-metric strong { font-size: var(--text-md); letter-spacing: 0; font-weight: 600; line-height: 1.6; }
.people { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-3); }
.person { min-inline-size: 0; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); }
.person strong { font-size: var(--text-sm); overflow-wrap: anywhere; }
.person small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-block: var(--space-2) var(--space-4); }
.rank { display: inline-block; padding: .125rem var(--space-2); margin-inline-end: var(--space-2); border-radius: var(--radius-sm); background: var(--surface-selected); color: var(--primary); font-size: var(--text-xs); font-weight: 650; font-variant-numeric: tabular-nums; }
.task-group { margin-block-end: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
.task-group > summary, .filter-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: 3.25rem; padding: var(--space-4) var(--space-5); color: var(--ink); font-size: var(--text-sm); font-weight: 600; cursor: pointer; list-style: none; }
.task-group > summary::-webkit-details-marker, .filter-disclosure > summary::-webkit-details-marker { display: none; }
.task-group > summary::after, .filter-disclosure > summary::after { content: '+'; color: var(--primary); font-size: var(--text-lg); font-weight: 500; }
.task-group[open] > summary::after, .filter-disclosure[open] > summary::after { content: '−'; }
.task-group > .panel { margin: 0; border: 0; border-block-start: 1px solid var(--border); border-radius: 0 0 var(--radius-lg) var(--radius-lg); }

/* Controls and all interaction states. */
form { display: grid; gap: var(--space-4); }
label { display: grid; gap: var(--space-2); color: var(--text-secondary); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
input, select, textarea { inline-size: 100%; max-inline-size: 100%; min-block-size: var(--control-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--control-border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: var(--text-md); line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--text-muted); opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: var(--primary); }
input:focus, select:focus, textarea:focus { border-color: var(--focus); }
input:disabled, select:disabled, textarea:disabled, button:disabled { border-color: var(--border); background: var(--disabled-surface); color: var(--disabled-text); cursor: not-allowed; }
input[type='checkbox'], input[type='radio'] { inline-size: 1.125rem; block-size: 1.125rem; min-block-size: 0; margin: 0; accent-color: var(--primary); flex-shrink: 0; }
label:has(> input[type='checkbox']), label:has(> input[type='radio']) { display: flex; align-items: flex-start; gap: var(--space-3); min-block-size: var(--control-height); padding-block: var(--space-2); }
textarea { resize: vertical; min-block-size: 6rem; }
select[multiple] { min-block-size: 9rem; }
button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-block-size: var(--control-height); max-inline-size: 100%; padding: var(--space-2) var(--space-4); border: 1px solid var(--primary); border-radius: var(--radius-sm); background: var(--primary); color: var(--on-primary); font-size: var(--text-sm); font-weight: 600; line-height: 1.45; cursor: pointer; overflow-wrap: anywhere; transition: background-color 120ms ease, border-color 120ms ease; }
button:not(:disabled):where(:not(.tab, .section-link)):hover { background: var(--primary-hover); border-color: var(--primary-hover); color: var(--on-primary); }
button:not(:disabled):active { transform: translateY(1px); }
button.secondary, button.ghost, .ghost-close { border-color: var(--control-border); background: var(--surface); color: var(--text-secondary); }
button.secondary:not(:disabled):hover, button.ghost:not(:disabled):hover, .ghost-close:not(:disabled):hover { border-color: var(--primary); background: var(--surface-selected); color: var(--primary); }
button.danger { border-color: var(--error); background: var(--error-surface); color: var(--error); }
button.danger:not(:disabled):hover { border-color: var(--error); background: var(--error); color: var(--on-primary); }
button.tab:not(.on):not(:disabled):hover { border-color: var(--border); background: var(--surface-subtle); color: var(--ink); }
button.action { padding-inline: var(--space-3); font-size: var(--text-xs); }
button[aria-busy='true'] { cursor: wait; }
button[aria-busy='true']::before { content: ''; inline-size: .875rem; block-size: .875rem; flex: 0 0 .875rem; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; animation: ui-spin 800ms linear infinite; }
@keyframes ui-spin { to { transform: rotate(360deg); } }
.forms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: var(--space-4); }
.forms > * { min-inline-size: 0; }
.forms > button { align-self: end; }
.forms > label:has(textarea), .forms > p { grid-column: 1 / -1; align-self: stretch; }

/* Filters, pagination and source mapping. */
.filter-shell { display: grid; gap: var(--space-3); }
.filter-shell .search-help { margin: 0; max-inline-size: none; }
.filter-disclosure { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }
.filter-counter { margin-inline-start: auto; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); background: var(--surface-selected); color: var(--primary); font-size: var(--text-xs); }
.filters-extra { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: var(--space-4); padding: var(--space-4); border-block-start: 1px solid var(--border); }
.filters-extra > button { justify-self: start; }
.list-toolbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-block: var(--space-4); }
.pagination, .pager-bottom { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); flex-wrap: wrap; font-size: var(--text-sm); }
.pagination label { display: flex; align-items: center; gap: var(--space-2); }
.pagination select { inline-size: auto; }
.pagination > span, .pager-bottom > span { color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.pager-bottom { margin-block-start: var(--space-4); }
#mapping { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: var(--space-3); margin-block-start: var(--space-4); }
#mapping label { padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); }
#mappingSummary, .dialog-summary { margin-block: var(--space-4); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--info-surface); color: var(--info); }
#mappingSummary ul { margin: var(--space-2) 0; padding-inline-start: var(--space-5); }
#mappingProgress { font-weight: 600; }
#remap { margin-block-start: var(--space-6); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); }
#paymentMappingForm > #mappingCustomFields, #paymentMappingForm > #mappingPreviewStatus, #paymentMappingForm > .table-scroll { grid-column: 1 / -1; }
#mappingConditions > .forms { margin-block: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-subtle); }

/* Tables use one desktop grid and information-preserving mobile cards. */
.table-scroll { max-inline-size: 100%; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--border); border-radius: var(--radius-md); margin-block-start: var(--space-4); }
table { inline-size: 100%; min-inline-size: 50rem; border-collapse: collapse; background: var(--surface); font-size: var(--text-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
th, td { padding: var(--space-4); border-block-end: 1px solid var(--border); text-align: start; vertical-align: top; overflow-wrap: anywhere; }
th { background: var(--surface-subtle); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 650; }
tbody tr:last-child td { border-block-end: 0; }
tbody tr:hover { background: var(--surface-subtle); }
td .small { font-size: var(--text-xs); margin-block-start: var(--space-1); }
.empty-row { padding: var(--space-10) var(--space-5); color: var(--text-muted); text-align: center; }
.item-title { display: block; color: var(--ink); font-weight: 650; }
.ob-action, .sim-actions { display: flex; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; min-inline-size: 8rem; }
.ob-action .hint { inline-size: 100%; }
.pill, .status { display: inline-block; max-inline-size: 100%; padding: .25rem .5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-subtle); color: var(--text-secondary); font-size: var(--text-xs); font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.status[data-mode="test"], .pill.warn { border-color: #e9cda1; background: var(--warning-surface); color: var(--warning); }
.pill.good { border-color: #bedcc8; background: var(--success-surface); color: var(--success); }
.progress { display: block; inline-size: 7rem; block-size: .375rem; margin-block-start: var(--space-2); border: 0; border-radius: var(--radius-sm); appearance: none; background: var(--border); overflow: hidden; }
.progress::-webkit-progress-bar { background: var(--border); border-radius: var(--radius-sm); }
.progress::-webkit-progress-value { background: var(--primary); border-radius: var(--radius-sm); }
.progress::-moz-progress-bar { background: var(--primary); border-radius: var(--radius-sm); }
.mobile-ob-brief, .mobile-ob-money, .mobile-ob-details { display: none !important; }
#csvPreview { max-block-size: 18rem; overflow: auto; }
#csvPreview table { min-inline-size: 0; }
#csvPreview .csv-bad { background: var(--error-surface); color: var(--error); }
#providerCashSummary dl, .development-payout-review { display: grid; grid-template-columns: minmax(10rem, 1fr) minmax(0, 2fr); gap: 0 var(--space-6); margin-block: var(--space-4); font-size: var(--text-sm); }
#providerCashSummary dt, #providerCashSummary dd, .development-payout-review dt, .development-payout-review dd { margin: 0; padding-block: var(--space-3); border-block-end: 1px solid var(--border); overflow-wrap: anywhere; }
#providerCashSummary dt, .development-payout-review dt { color: var(--text-secondary); font-weight: 600; }

/* Feedback and modal layer. */
#flash { position: fixed; inset-block-start: 6rem; inset-inline-end: var(--space-6); z-index: 60; inline-size: min(38rem, calc(100vw - var(--space-12))); padding: var(--space-4) var(--space-5); border: 1px solid #bedcc8; border-radius: var(--radius-md); background: var(--success-surface); color: var(--success); box-shadow: var(--shadow-overlay); font-size: var(--text-sm); font-weight: 500; overflow-wrap: anywhere; }
#flash.error, .inline-error, .err, .form-message.error { background: var(--error-surface); color: var(--error); border-color: #e6bbc0; }
.inline-error, .err, .form-message { padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: var(--text-sm); overflow-wrap: anywhere; }
.form-message { margin: 0; }
.form-message.success { background: var(--success-surface); color: var(--success); border-color: #bedcc8; }
.dialog-warning { padding: var(--space-4); border: 1px solid #e9cda1; border-radius: var(--radius-md); background: var(--warning-surface); color: var(--warning); font-size: var(--text-sm); }
dialog { inline-size: min(38rem, calc(100vw - var(--space-8))); max-block-size: calc(100svh - var(--space-8)); overflow: auto; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); color: var(--ink); box-shadow: var(--shadow-overlay); }
dialog::backdrop { background: #142a3b8c; }
dialog form { padding: var(--space-6); gap: var(--space-5); }
.dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.dialog-head h2 { margin: var(--space-2) 0 0; font-size: var(--text-xl); }
.ghost-close { flex: 0 0 var(--control-height); inline-size: var(--control-height); padding: var(--space-2); }
.dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); padding-block-start: var(--space-5); border-block-start: 1px solid var(--border); }
.dialog-summary strong { display: block; }
#dialogBody { min-inline-size: 0; overflow-wrap: anywhere; }
#dialogBody > :first-child { margin-block-start: 0; }

/* Conditional operational and Development UI use the same component grammar. */
#page-payouts td, #page-payouts small { overflow-wrap: anywhere; }
.development-payout-panel { border-block-start: 3px solid var(--warning); }
.development-payout-tools { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-block-start: var(--space-4); }
.development-payout-digest { max-inline-size: 100%; font: var(--text-xs)/1.65 var(--font-mono); overflow-wrap: anywhere; }

/* Adapt layout once per breakpoint; component state is never redefined by patches. */
@media (max-width: 1099px) {
  #app { display: block; }
  .heading { margin-block-end: var(--space-6); }
  #tabs { position: static; flex-direction: row; overflow: auto; padding: var(--space-2); margin-block-end: var(--space-6); gap: var(--space-1); }
  #tabs::before { display: none; }
  .tab { flex: 0 0 auto; inline-size: auto; white-space: nowrap; }
  .login-context h2 { font-size: 2.75rem; }
  #loginArea { gap: var(--space-10); }
}
@media (max-width: 800px) {
  body > header { padding-inline: var(--space-5); }
  main { padding-inline: var(--space-5); }
  #loginArea { display: block; max-inline-size: 34rem; min-block-size: 0; }
  .login-context { padding: var(--space-3) 0 var(--space-6); }
  .login-context h2 { font-size: 2.5rem; max-inline-size: none; margin-block: var(--space-3); }
  .login-context > p { font-size: var(--text-md); }
  .login-context dl { display: none; }
  .heading { flex-wrap: wrap; gap: var(--space-3); }
  .heading .status { margin: 0; }
  .metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  html { scroll-padding-block-start: 5rem; }
  body > header { min-block-size: 4.5rem; padding: var(--space-3) var(--space-4); gap: var(--space-2); }
  .brand { gap: var(--space-2); }
  .brand strong { font-size: 1.125rem; }
  .brand small { display: none; }
  .mark { flex-basis: 2.25rem; inline-size: 2.25rem; block-size: 2.25rem; }
  .account-popover > summary, .user #logout { padding-inline: var(--space-3); font-size: var(--text-xs); }
  main { margin-block: var(--space-5); padding-inline: var(--space-4); }
  #tabs { display: none; }
  .mobile-navigator { display: grid; margin-block: var(--space-5); }
  .mobile-navigator select { border-color: var(--primary); background-color: var(--surface); color: var(--primary); font-weight: 600; }
  .heading { margin-block-end: 0; }
  .heading p { font-size: var(--text-sm); }
  .panel { padding: var(--space-5); margin-block-end: var(--space-4); }
  .metrics { gap: var(--space-3); margin-block-end: var(--space-4); }
  .metric { padding: var(--space-4); }
  .metric strong { font-size: 1.25rem; }
  .people { grid-template-columns: 1fr; }
  .person { padding: var(--space-4); }
  .forms, .field-grid, .filters-extra { grid-template-columns: minmax(0, 1fr); }
  .section-nav { gap: var(--space-1); margin-block-end: var(--space-4); }
  .section-link { flex: 1 1 7rem; padding-inline: var(--space-2); font-size: var(--text-xs); }
  .workspace-intro { padding-block: var(--space-2); }
  .workspace-intro h2 { font-size: 1.25rem; }
  .quick-actions { inline-size: 100%; }
  .quick-actions button { flex: 1 1 7rem; }
  .process-strip { grid-template-columns: 1fr; }
  .process-strip > div { border-inline-end: 0; border-block-end: 1px solid var(--border); padding: var(--space-4); }
  .process-strip > div:last-child { border-block-end: 0; }
  .policy-form fieldset { padding: var(--space-4); }
  .policy-submit { justify-self: stretch; }
  .filters-extra > button { justify-self: stretch; }
  .filter-disclosure > summary, .task-group > summary { padding-inline: var(--space-4); }
  .pagination { justify-content: flex-start; }
  .pagination > label { inline-size: 100%; }
  .pagination select { inline-size: 5rem; }
  .pager-bottom { justify-content: space-between; }
  .pager-bottom button { flex: 1 1 4rem; padding-inline: var(--space-2); }
  .table-scroll { border: 0; border-radius: 0; overflow: visible; }
  .table-scroll table { display: block; min-inline-size: 0; }
  .table-scroll thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-scroll tbody { display: grid; gap: var(--space-3); }
  .table-scroll tr { display: block; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); }
  .table-scroll td { display: block; padding: var(--space-3) 0; text-align: start; }
  .table-scroll td::before { content: attr(data-label); display: block; margin-block-end: var(--space-1); color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; }
  .table-scroll td:last-child { border-block-end: 0; }
  .table-scroll .empty-row { padding-block: var(--space-6); text-align: center; }
  .table-scroll .empty-row::before { display: none; }
  .table-scroll .obligation-row td { display: none; }
  .table-scroll .obligation-row td.ob-main-cell, .table-scroll .obligation-row td.ob-actions-cell { display: block; padding: 0; border: 0; }
  .table-scroll .obligation-row td.ob-actions-cell { margin-block-start: var(--space-4); padding-block-start: var(--space-4); border-block-start: 1px solid var(--border); }
  .ob-main-cell::before, .ob-actions-cell::before { display: none !important; }
  .obligation-row .desktop-id { display: none; }
  .obligation-row .mobile-ob-brief { display: flex !important; align-items: center; justify-content: space-between; gap: var(--space-2); flex-wrap: wrap; margin-block: var(--space-3); font-size: var(--text-sm); }
  .obligation-row .mobile-ob-money { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); margin-block: var(--space-3); }
  .mobile-ob-money > span { display: flex; flex-direction: column; gap: var(--space-1); min-inline-size: 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-subtle); }
  .mobile-ob-money small { color: var(--text-muted); font-size: var(--text-xs); }
  .mobile-ob-money strong { font-size: var(--text-sm); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
  .obligation-row .mobile-ob-details { display: block !important; }
  .mobile-ob-details summary { display: flex; align-items: center; min-block-size: var(--control-height); padding-block: var(--space-2); color: var(--primary); font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
  .mobile-ob-details summary::before { content: '+ '; margin-inline-end: var(--space-2); }
  .mobile-ob-details[open] summary::before { content: '− '; }
  .mobile-ob-details dl { display: grid; grid-template-columns: minmax(5rem, auto) minmax(0, 1fr); gap: var(--space-3); margin: var(--space-2) 0; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--surface-subtle); font-size: var(--text-xs); }
  .mobile-ob-details dt { color: var(--text-muted); }
  .mobile-ob-details dd { margin: 0; overflow-wrap: anywhere; }
  .ob-action > .hint { display: none; }
  #providerCashSummary dl, .development-payout-review { grid-template-columns: minmax(0, 1fr); }
  #providerCashSummary dt, .development-payout-review dt { padding-block-end: var(--space-1); border-block-end: 0; }
  #providerCashSummary dd, .development-payout-review dd { padding-block-start: var(--space-1); padding-block-end: var(--space-4); }
  .development-payout-tools { display: grid; grid-template-columns: minmax(0, 1fr); }
  #loginArea { margin-block: var(--space-5); }
  .login-context h2 { font-size: 2rem; }
  .login-context { padding-block-end: var(--space-4); }
  .login-context .eyebrow { font-size: .6875rem; }
  .login { padding: var(--space-6); }
  .login h1 { font-size: var(--text-xl); }
  .install form { padding: var(--space-5); }
  dialog { inline-size: calc(100vw - var(--space-6)); max-block-size: calc(100svh - var(--space-6)); }
  dialog form { padding: var(--space-5); }
  .dialog-head h2 { font-size: 1.25rem; }
  .dialog-actions > button { flex: 1; }
  #flash { inset-block-start: 5rem; inset-inline: var(--space-3); inline-size: auto; }
}
@media (max-width: 360px) {
  .metrics { grid-template-columns: minmax(0, 1fr); }
  .brand strong { font-size: var(--text-md); }
  .user { gap: var(--space-1); }
  .account-popover > summary, .user #logout { padding-inline: var(--space-2); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  button:not(:disabled):active { transform: none; }
}
@media (forced-colors: active) {
  .pill, .rank, .status, .progress, button, .tab.on { border: 1px solid CanvasText; }
  :focus-visible { outline-color: Highlight; }
}