/* App design contract 1. Geometry is supplied by the selected layout; colours by the palette. */
:where(:root) {
    --app-font: Arial, Helvetica, sans-serif;
    --app-font-size: 1rem;
    --app-line-height: 1.5;
    --app-space: 1rem;
    --app-space-small: .5rem;
    --app-radius: .65rem;
    --app-control-radius: .4rem;
    --app-control-height: 2.75rem;
    --app-control-padding: .65rem .9rem;
    --app-panel-padding: 1.25rem;
    --app-border-width: 1px;
    --app-shadow: 0 .2rem .9rem color-mix(in srgb, var(--app-color-text) 7%, transparent);
    --app-motion-duration: .14s;
    --app-heading-size: clamp(1.5rem, 2.5vw, 2.15rem);
    --app-header-padding: 1.65rem;
    --app-table-padding: .8rem 1rem;
}
:where([data-app-density="compact"]) {
    --app-space: .75rem;
    --app-panel-padding: 1rem;
    --app-table-padding: .55rem .75rem;
}
:where(body[data-app-layout]) { font: var(--app-font-size)/var(--app-line-height) var(--app-font); }
:where([data-app-component]) { box-sizing: border-box; min-width: 0; }
:where([data-app-component]) :where(button, input, select, textarea) { font: inherit; }
:where([data-app-component]) :where(a, button, input, select, textarea, summary):focus-visible,
:where([data-app-component]):focus-visible {
    outline: 3px solid var(--app-color-focus);
    outline-offset: 3px;
    scroll-margin-block: 5rem;
}
:where([data-app-component]) :where(input, textarea)::placeholder { color: var(--app-color-input-placeholder); opacity: 1; }
:where([data-app-component="app.button"], .app-button) {
    display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .5rem;
    min-height: var(--app-control-height); max-width: 100%; padding: var(--app-control-padding);
    border: var(--app-border-width) solid var(--app-color-secondary-border);
    border-radius: var(--app-control-radius); background: var(--app-color-secondary);
    color: var(--app-color-secondary-text); font-weight: 650; line-height: 1.35;
    text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color var(--app-motion-duration), border-color var(--app-motion-duration),
        box-shadow var(--app-motion-duration), transform var(--app-motion-duration);
}
:where([data-app-component="app.button"], .app-button):where(:hover, [data-app-state="hover"]):not(:disabled) {
    background: var(--app-color-secondary-hover); text-decoration: none;
}
:where([data-app-component="app.button"], .app-button):where(:active, [data-app-state="pressed"], [data-app-state="selected"], [aria-pressed="true"]) {
    background: var(--app-color-secondary-active);
}
:where([data-app-component="app.button"][data-app-variant="primary"], .app-button-primary) {
    background: var(--app-color-primary); color: var(--app-color-primary-text); border-color: var(--app-color-primary-border);
}
:where([data-app-component="app.button"][data-app-variant="primary"], .app-button-primary) :where(i, svg) { color: var(--app-color-primary-icon); }
:where([data-app-component="app.button"][data-app-variant="primary"], .app-button-primary):where(:hover, [data-app-state="hover"]):not(:disabled) { background: var(--app-color-primary-hover); }
:where([data-app-component="app.button"][data-app-variant="primary"], .app-button-primary):where(:active, [data-app-state="pressed"]) { background: var(--app-color-primary-active); }
:where([data-app-component="app.button"][data-app-variant="text"]) { border-color: transparent; background: transparent; color: var(--app-color-link); }
:where([data-app-component="app.button"][data-app-variant="icon"], .app-icon-button) { min-width: var(--app-control-height); padding: .65rem; }
:where([data-app-component][data-app-size="small"]) { font-size: .875rem; }
:where([data-app-component][data-app-size="large"]) { --app-control-height: 3.25rem; --app-control-padding: .85rem 1.15rem; }
:where([data-app-component]):where(:disabled, [aria-disabled="true"], [data-app-state="disabled"]) { cursor: not-allowed; opacity: .6; }
:where([data-app-component]):where([aria-busy="true"], [data-app-state="busy"]) { cursor: progress; }
:where([data-app-component][data-app-state="focus"]) { outline: 3px solid var(--app-color-focus); outline-offset: 3px; }
:where([data-app-component="app.input"], [data-app-component="app.select"], [data-app-component="app.textarea"], [data-app-component="app.quantity"], .app-input, .app-select, .app-textarea) {
    min-height: var(--app-control-height); max-width: 100%; min-width: 0;
    padding: var(--app-control-padding); border: var(--app-border-width) solid var(--app-color-input-border);
    border-radius: var(--app-control-radius); background: var(--app-color-input); color: var(--app-color-input-text);
    font-weight: 400; line-height: 1.4;
}
:where([data-app-component="app.textarea"], .app-textarea) { display: block; resize: vertical; min-height: 7rem; }
:where([data-app-component="app.input"], [data-app-component="app.select"], [data-app-component="app.textarea"], [data-app-component="app.quantity"]):where(:focus-visible, [data-app-state="focus"]) { border-color: var(--app-color-input-focus); }
:where([data-app-component]):where([aria-invalid="true"], [data-app-state="invalid"]) { border-color: var(--app-color-input-invalid); }
:where([data-app-component]):where([readonly], [data-app-state="readonly"]) { background: var(--app-color-input-readonly); }
:where([data-app-component]):where(:disabled, [data-app-state="disabled"]):where(input, select, textarea) { background: var(--app-color-input-disabled); }
:where([data-app-component="app.field"], .app-field) { display: grid; align-content: start; gap: .4rem; font-weight: 600; }
:where([data-app-component="app.field"], .app-field) > :where(input, select, textarea) { width: 100%; }
:where([data-app-component="app.field"], .app-field) > small { font-size: .85rem; font-weight: 400; color: var(--app-color-text-muted); }
:where([data-app-component="app.form"], .app-form) { display: grid; gap: var(--app-space); }
:where([data-app-component="app.fieldgroup"], [data-app-component="app.field-group"], .app-fieldgroup) { margin: 0; padding: var(--app-panel-padding); border: 1px solid var(--app-color-border); border-radius: var(--app-radius); }
:where([data-app-component="app.fieldgroup"], [data-app-component="app.field-group"], .app-fieldgroup) > legend { font-weight: 700; padding-inline: .35rem; }
:where([data-app-component="app.checkbox"], [data-app-component="app.radio"], [data-app-component="app.switch"], .app-check) { display: inline-flex; align-items: center; gap: .65rem; min-height: var(--app-control-height); font-weight: 500; }
:where([data-app-component="app.checkbox"], [data-app-component="app.radio"], [data-app-component="app.switch"], .app-check) input,
:where(input[data-app-component="app.checkbox"], input[data-app-component="app.radio"], input[data-app-component="app.switch"]) { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; min-height: 0; margin: 0; accent-color: var(--app-color-primary); }
:where([data-app-component="app.switch"]) input, :where(input[data-app-component="app.switch"]) { width: 2.6rem; height: 1.5rem; appearance: none; border: 1px solid var(--app-color-control-border); border-radius: 2rem; background: var(--app-color-input-readonly); position: relative; cursor: pointer; }
:where([data-app-component="app.switch"]) input::before, :where(input[data-app-component="app.switch"])::before { content: ''; display: block; position: absolute; inset: .2rem auto .2rem .2rem; width: 1rem; border-radius: 50%; background: var(--app-color-text-muted); transition: transform var(--app-motion-duration); }
:where([data-app-component="app.switch"]) input:checked, :where(input[data-app-component="app.switch"]):checked { background: var(--app-color-primary); border-color: var(--app-color-primary-border); }
:where([data-app-component="app.switch"]) input:checked::before, :where(input[data-app-component="app.switch"]):checked::before { transform: translateX(1.1rem); background: var(--app-color-primary-text); }
:where([data-app-component="app.actions"], .app-actions) { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
:where([data-app-component="app.toolbar"], .app-toolbar) { display: flex; flex-wrap: wrap; align-items: end; gap: .75rem; margin-block-end: var(--app-space); padding: var(--app-space); border: 1px solid var(--app-color-border); border-radius: var(--app-radius); background: var(--app-color-surface); }
:where([data-app-component="app.toolbar"], .app-toolbar) > :where(label, .app-field) { flex: 0 1 12rem; }
:where([data-app-component="app.toolbar"], .app-toolbar) > :where(.app-toolbar-search, [data-app-component="app.search"]) { flex: 1 1 16rem; }
:where([data-app-component="app.search"], .app-search-component) { display: grid; gap: .4rem; }
:where([data-app-component="app.search"]) > label { font-weight: 600; }
:where(.app-search-row) { display: flex; gap: .5rem; }
:where(.app-search-row) > input { min-width: 0; flex: 1; }
:where([data-app-component="app.chips"], [data-app-component="app.filter-chips"], .app-filter-chips) { display: flex; flex-wrap: wrap; gap: .5rem; }
:where([data-app-component="app.filterchip"], .app-filterchip) { display: inline-flex; align-items: center; gap: .75rem; min-height: 2.75rem; padding: .4rem .75rem; border: 1px solid var(--app-color-border); border-radius: 2rem; background: var(--app-color-selection); color: var(--app-color-selection-text); cursor: pointer; }
:where([data-app-component="app.filter-options"], .app-filter-options) { display: grid; gap: .45rem; }
:where([data-app-component="app.heading"], .app-page-header) { display: flex; flex-wrap: wrap; align-items: start; justify-content: space-between; gap: var(--app-space); margin-block-end: calc(var(--app-space) * 1.4); }
:where([data-app-component="app.heading"], .app-page-heading, .app-page-header) h1 { font-size: var(--app-heading-size); line-height: 1.2; font-weight: 750; letter-spacing: -.025em; margin: 0; overflow-wrap: anywhere; }
:where(.app-page-description) { max-width: 65ch; color: var(--app-color-text-muted); margin: .5rem 0 0; }
:where([data-app-component="app.text"], .app-text) { line-height: 1.7; overflow-wrap: anywhere; }
:where([data-app-component="app.text"], .app-text) > p { white-space: pre-line; }
:where([data-app-component="app.card"], [data-app-component="app.section"], [data-app-component="app.tile"], .app-card) { background: var(--app-color-card); color: var(--app-color-text); border: var(--app-border-width) solid var(--app-color-card-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); overflow-wrap: anywhere; }
:where(.app-card-heading) { padding: var(--app-panel-padding); padding-block-end: .65rem; }
:where(.app-card-heading) h2 { font-size: 1.1rem; margin: 0; }
:where(.app-card-content) { padding: var(--app-panel-padding); }
:where(.app-card-heading) + .app-card-content { padding-top: 0; }
:where(.app-card) > .app-actions { padding: 0 var(--app-panel-padding) var(--app-panel-padding); }
:where([data-app-component="app.notice"], .app-notice) { display: flex; align-items: start; gap: .75rem; padding: var(--app-space); border: 1px solid var(--app-color-border); border-inline-start-width: 4px; border-radius: var(--app-control-radius); color: var(--app-color-text); background: var(--app-color-surface-alternate); }
:where([data-app-component="app.notice"], .app-notice) p { margin: .25rem 0 0; }
:where([data-app-component="app.status"], .app-status) { display: inline-flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .25rem .55rem; font-size: .875rem; border-radius: var(--app-control-radius); color: var(--app-color-text); background: var(--app-color-surface-alternate); }
:where([data-app-component][data-app-tone="success"], .app-status-success) { color: var(--app-color-success-text); background: var(--app-color-success-surface); border-color: var(--app-color-success-border); }
:where([data-app-component][data-app-tone="error"], .app-status-danger) { color: var(--app-color-error-text); background: var(--app-color-error-surface); border-color: var(--app-color-error-border); }
:where([data-app-component][data-app-tone="warning"]) { color: var(--app-color-warning-text); background: var(--app-color-warning-surface); border-color: var(--app-color-warning-border); }
:where([data-app-component][data-app-tone="info"]) { color: var(--app-color-info-text); background: var(--app-color-info-surface); border-color: var(--app-color-info-border); }
:where([data-app-component="app.table-scroll"], [data-app-component="app.table-region"], .app-table-scroll) { position: relative; max-width: 100%; overflow: auto; overscroll-behavior-inline: contain; border: 1px solid var(--app-color-border); border-radius: var(--app-radius); }
:where([data-app-component="app.table"], .app-table) { width: 100%; border-collapse: collapse; color: var(--app-color-text); background: var(--app-color-table-row); font-size: .925rem; }
:where([data-app-component="app.table"], .app-table) :where(th, td) { padding: var(--app-table-padding); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--app-color-border); }
:where([data-app-component="app.table"], .app-table) thead th { background: var(--app-color-table-header); color: var(--app-color-table-header-text); font-weight: 650; }
:where([data-app-component="app.table"], .app-table) tbody tr:nth-child(even) { background: var(--app-color-table-alternate); }
:where([data-app-component="app.table"], .app-table) caption { padding: .75rem 1rem; text-align: start; font-weight: 600; color: var(--app-color-text-muted); }
:where([data-app-component="app.collection"], .app-grid-list) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,17rem),1fr)); gap: var(--app-space); }
:where([data-app-component="app.values"], .app-values) { display: grid; grid-template-columns: minmax(7rem,auto) minmax(0,1fr); gap: .5rem 1rem; }
:where([data-app-component="app.values"], .app-values) dt { color: var(--app-color-text-muted); }
:where([data-app-component="app.values"], .app-values) dd { margin: 0; overflow-wrap: anywhere; }
:where([data-app-component="app.list"], .app-list) { list-style: none; padding: 0; margin: 0; }
:where([data-app-component="app.list"], .app-list) > li { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; padding: .75rem 0; border-block-end: 1px solid var(--app-color-border); }
:where([data-app-component="app.identity"], .app-identity) { display: flex; align-items: center; gap: .75rem; min-width: 0; }
:where(.app-identity-media) { display: grid; place-items: center; flex: 0 0 3.5rem; width: 3.5rem; height: 3.5rem; overflow: hidden; border-radius: var(--app-control-radius); color: var(--app-color-text-muted); background: var(--app-color-surface-alternate); }
:where(.app-identity-media) img { width: 100%; height: 100%; object-fit: contain; }
:where(.app-identity-copy) { display: grid; gap: .2rem; min-width: 0; overflow-wrap: anywhere; }
:where(.app-identity-copy) small { color: var(--app-color-text-muted); }
:where([data-app-component="app.address"], .app-address) { font-style: normal; line-height: 1.7; }
:where([data-app-component="app.address"], .app-address) > :where(strong, span) { display: block; }
:where([data-app-component="app.amount"], .app-amount) { display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: end; gap: .35em; font-variant-numeric: tabular-nums; }
:where(.app-amount-unit) { font-size: .85em; color: var(--app-color-text-muted); }
:where([data-app-component="app.empty"], .app-empty, .app-empty-state) { display: grid; justify-items: center; gap: .7rem; padding: calc(var(--app-panel-padding) * 1.5); text-align: center; background: var(--app-color-surface); color: var(--app-color-text-muted); border: 1px solid var(--app-color-border); border-radius: var(--app-radius); }
:where([data-app-component="app.empty"]) p { max-width: 55ch; margin: 0; }
:where([data-app-component="app.media"], .app-media) { margin: 0; }
:where([data-app-component="app.media"], .app-media) img { display: block; max-width: 100%; height: auto; border-radius: var(--app-control-radius); }
:where(.app-media-placeholder) { display: grid; place-items: center; min-height: 8rem; background: var(--app-color-surface-alternate); color: var(--app-color-text-muted); border: 1px solid var(--app-color-border); border-radius: var(--app-radius); font-size: 2rem; }
:where([data-app-component="app.media"], .app-media) figcaption { padding-block: .4rem; font-size: .85rem; color: var(--app-color-text-muted); }
:where([data-app-component="app.gallery"], .app-gallery) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,12rem),1fr)); gap: var(--app-space); }
:where([data-app-component="app.metric"], .app-metric) { display: flex; align-items: center; gap: .8rem; padding: var(--app-panel-padding); background: var(--app-color-card); color: var(--app-color-text); border: 1px solid var(--app-color-card-border); border-radius: var(--app-radius); box-shadow: var(--app-shadow); text-decoration: none; }
:where(.app-metric-icon) { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; border-radius: var(--app-control-radius); background: var(--app-color-surface-alternate); color: var(--app-color-primary); }
:where(.app-metric-body) { display: grid; min-width: 0; }
:where(.app-metric-label) { color: var(--app-color-text-muted); font-size: .85rem; }
:where(.app-metric-value) { font-size: 1.8rem; font-variant-numeric: tabular-nums; line-height: 1.25; }
:where([data-app-component="app.disclosure"], [data-app-component="app.dropdown"], .app-disclosure) { border: 1px solid var(--app-color-border); border-radius: var(--app-radius); background: var(--app-color-surface); }
:where([data-app-component="app.disclosure"], [data-app-component="app.dropdown"], .app-disclosure) > summary { display: flex; align-items: center; justify-content: space-between; gap: .7rem; min-height: 2.75rem; padding: .75rem var(--app-space); list-style: none; cursor: pointer; font-weight: 650; }
:where([data-app-component="app.disclosure"], [data-app-component="app.dropdown"], .app-disclosure) > summary::after { content: '+'; font-size: 1.2rem; }
:where([data-app-component="app.disclosure"], [data-app-component="app.dropdown"], .app-disclosure)[open] > summary::after { content: '−'; }
:where([data-app-component="app.disclosure"], [data-app-component="app.dropdown"], .app-disclosure) > div { padding: var(--app-space); }
:where([data-app-component="app.dialog"], .app-dialog) { max-width: min(54rem,calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); margin: auto; padding: var(--app-panel-padding); border: 1px solid var(--app-color-border); border-radius: var(--app-radius); background: var(--app-color-surface); color: var(--app-color-text); box-shadow: var(--app-shadow); }
:where([data-app-component="app.dialog"], .app-dialog)::backdrop { background: var(--app-color-overlay); }
:where(.app-dialog-heading) { display: flex; align-items: start; justify-content: space-between; gap: 1rem; margin-bottom: var(--app-space); }
:where(.app-dialog-heading) h2 { margin: 0; }
:where(.app-dialog-content) { margin-block-end: var(--app-space); }
:where([data-app-component="app.popover"], .app-popover) { max-width: min(28rem,calc(100vw - 2rem)); padding: var(--app-space); border: 1px solid var(--app-color-border); border-radius: var(--app-radius); background: var(--app-color-surface); color: var(--app-color-text); box-shadow: var(--app-shadow); }
:where([data-app-component="app.navigation"], [data-app-component="app.tabs"], [data-app-component="app.pagination"], [data-app-component="app.breadcrumbs"], .app-navigation) ul { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0; margin: 0; list-style: none; }
:where([data-app-component="app.navigation"], [data-app-component="app.tabs"], [data-app-component="app.pagination"]) :where(a, [aria-current]) { display: inline-flex; align-items: center; min-height: 2.75rem; padding: .6rem .8rem; border-radius: var(--app-control-radius); color: var(--app-color-link); text-decoration: none; }
:where([data-app-component="app.navigation"], [data-app-component="app.tabs"], [data-app-component="app.pagination"]) [aria-current] { background: var(--app-color-selection); color: var(--app-color-selection-text); }
:where([data-design-gallery]) { display: grid; gap: calc(var(--app-space) * 1.5); padding: var(--app-panel-padding); color: var(--app-color-text); background: var(--app-color-background); }
:where(.app-design-samples, .app-design-columns) { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,19rem),1fr)); align-items: start; gap: var(--app-space); }
:where(.app-design-sample) { display: grid; gap: var(--app-space); }
:where([data-design-gallery]) :where(.app-header, .app-footer) { padding: var(--app-panel-padding); border-radius: var(--app-radius); background: var(--app-color-header); color: var(--app-color-header-text); }
:where([data-design-gallery]) .app-footer { background: var(--app-color-footer); color: var(--app-color-footer-text); }
:where([data-design-gallery]) [data-app-component="app.dialog"][open] { position: static; inset: auto; width: 100%; max-width: 100%; max-height: none; margin: 0; }
@media (max-width: 40rem) {
    :where(.app-search-row) { flex-wrap: wrap; }
    :where(.app-search-row) > input { flex-basis: 100%; }
    :where(.app-dialog) { padding: 1rem; }
    :where([data-app-component="app.values"], .app-values) { grid-template-columns: minmax(0,1fr); }
}
@media (prefers-reduced-motion: reduce) {
    :where([data-app-component]) { --app-motion-duration: 0s; scroll-behavior: auto; }
    :where([data-app-component]) :where(*, *::before, *::after) { transition-duration: 0s; animation: none; }
}
@media (forced-colors: active) {
    :where([data-app-component]) :where(a, button, input, select, textarea, summary):focus-visible,
    :where([data-app-component][data-app-state="focus"]) { outline: 3px solid Highlight; }
}

/* Public controls do not depend on the ADM boolean knob emitted by shared domain templates. */
:where(.app-frontend, .app-workspace, body[data-page]) input[data-app-component="app.switch"] + .knob { display: none; }
:where(label):has(> input[data-app-component="app.switch"], > input[data-app-component="app.checkbox"], > input[data-app-component="app.radio"]) { min-height: 2.75rem; }
:where(.app-search[data-app-component="app.form"]) { display: flex; gap: 0; }
:where(.app-page-heading[data-app-component="app.heading"]) { display: block; }
:where(.app-search-result-group) { padding: var(--app-panel-padding); margin-top: var(--app-space); }
:where(.app-search-result) { display: block; padding-block: var(--app-space); border-bottom: 1px solid var(--app-color-border); }
:where(.app-search-result) h3 { margin: 0 0 .4rem; }
:where(.app-search-result) p { color: var(--app-color-text-muted); margin: 0; }

:where([data-app-component="app.notice"], [data-app-component="app.status"]):empty { display: none; }

/* Provider-neutral disclosure menus retain native buttons and links in a floating layer. */
.app-popup-panel { z-index: 1200; box-sizing: border-box; padding: .4rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--app-color-border); border-radius: var(--app-radius); background: var(--app-color-surface); color: var(--app-color-text); box-shadow: 0 14px 40px color-mix(in srgb, var(--app-color-text) 16%, transparent); }
.app-popup-panel > :is(a, button) { display: flex; align-items: center; gap: .7rem; width: 100%; min-height: var(--app-control-height); margin: 0; padding: .55rem .7rem; text-align: start; text-decoration: none; border: 0; border-radius: calc(var(--app-radius) * .7); background: transparent; color: inherit; font: inherit; font-size: .85rem; cursor: pointer; }
.app-popup-panel > :is(a, button):is(:hover, :focus-visible), .app-popup-panel > [aria-current] { background: var(--app-color-selection); color: var(--app-color-selection-text); }
.app-popup-panel > :is(a, button) .fa { width: 1.1rem; text-align: center; flex: none; }
[data-app-popup] > summary::-webkit-details-marker { display: none; }
[data-app-popup] > summary { list-style: none; }