@layer reset, tokens, base, layout, components, modules, utilities, overrides;

@layer components {
  /* Generic line/token composition: palette, compact address-like rows and stable actions. */
  .app-token-layout { --control-height: 2rem; --control-height-compact: 2rem; --icon-button-size: max(2rem,var(--touch-target-min-size,0px)); display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--space-2) var(--space-3); min-inline-size: 0; container-type: inline-size; }
  .app-token-layout-palette, .app-token-layout-heading, .app-token-layout-rows, .app-token-layout > .app-field-error { grid-column: 1 / -1; }
  .app-token-layout > .is-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-token-layout-palette { display: flex; flex-wrap: wrap; gap: var(--space-1); padding-block-end: var(--space-1); }
  .app-token-layout.app-form-field .app-token-layout-choice { min-height: max(1.75rem,var(--touch-target-min-size,0px)); min-block-size: max(1.75rem,var(--touch-target-min-size,0px)); padding: .125rem var(--space-2); border-radius: 999px; border-color: color-mix(in srgb,var(--color-accent) 18%,var(--color-border)); background: color-mix(in srgb,var(--color-accent) 5%,var(--color-surface)); font-size: var(--font-size-caption); font-weight: 500; box-shadow: none; cursor: grab; }
  .app-token-layout .app-token-layout-choice:not(:disabled):hover { border-color: var(--color-accent); background: var(--color-info-soft); color: var(--color-accent); }
  .app-token-layout-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 600; }
  .app-token-layout-row-actions, .app-token-layout-toolbar { display: flex; align-items: center; gap: var(--space-1); }
  .app-token-layout-rows { display: grid; gap: calc(var(--space-1) / 2); padding-block-end: var(--space-1); border-block-end: 1px solid var(--color-border); }
  .app-token-layout-row { display: flex; gap: var(--space-2); align-items: stretch; min-inline-size: 0; min-block-size: max(2rem,var(--touch-target-min-size,0px)); border: 1px solid transparent; border-radius: var(--radius-control); background: var(--color-surface-muted); }
  .app-token-layout-row.is-active { border-color: color-mix(in srgb,var(--color-accent) 28%,var(--color-border)); background: color-mix(in srgb,var(--color-accent) 3%,var(--color-surface)); }
  .app-token-layout.app-form-field .app-token-layout-row-number { flex: 0 0 1.75rem; min-inline-size: 1.75rem; min-height: 0; min-block-size: 0; padding: var(--space-1); border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--color-text-muted); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; cursor: grab; }
  .app-token-layout-row-number::before { content: '⠿'; font-size: var(--font-size-caption); opacity: .45; margin-inline-end: .125rem; }
  .app-token-layout-line { display: flex; align-items: center; flex-wrap: wrap; gap: 0; min-inline-size: 0; flex: 1; padding: .125rem var(--space-1) .125rem 0; }
  .app-token-layout.app-form-field .app-token-layout-chip { min-inline-size: 0; min-height: max(1.625rem,var(--touch-target-min-size,0px)); min-block-size: max(1.625rem,var(--touch-target-min-size,0px)); padding: .125rem var(--space-2); margin: 0; border: 1px solid var(--color-info-soft-border); border-radius: 999px; background: var(--color-info-soft); box-shadow: none; color: var(--color-text); font-size: var(--font-size-caption); line-height: 1.2; white-space: pre-wrap; overflow-wrap: anywhere; cursor: grab; }
  .app-token-layout .app-token-layout-chip[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-contrast,#fff); }
  .app-token-layout .app-token-layout-chip.is-literal { border-color: transparent; background: transparent; color: var(--color-text-muted); }
  .app-token-layout .app-token-layout-chip.is-literal[aria-pressed="true"] { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-info-soft); }
  .app-token-layout.app-form-field .app-token-layout-chip.is-space { min-inline-size: .625rem; padding-inline: .125rem; color: color-mix(in srgb,var(--color-text-muted) 55%,transparent); }
  .app-token-layout .app-token-layout-chip:focus-visible, .app-token-layout .app-token-layout-row-number:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .app-token-layout-empty { padding-inline: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-token-layout-toolbar { align-self: center; }
  .app-token-layout-text { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; }
  .app-token-layout-text > .app-settings-field { min-inline-size: 4rem; flex: 1; gap: 0; margin: 0; }
  .app-token-layout-text .app-settings-field-meta:empty { display: none; }
  .app-token-layout .is-dragging { opacity: .45; }
  .app-token-layout-row.is-drop-target { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
  .app-token-layout[data-token-disabled="true"] .app-token-layout-row-number, .app-token-layout[data-token-disabled="true"] .app-token-layout-chip { cursor: default; }
  .app-settings-preview-layout.has-editor { grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); }
  @container (max-width: 29rem) { .app-token-layout-toolbar, .app-token-layout-text { grid-column: 1 / -1; } }
  @media (max-width: 60rem) { .app-settings-preview-layout.has-editor { grid-template-columns: minmax(0,1fr); } }
}

/* Production and resource workspaces share one restrained surface system. */
@layer tokens {
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace, .app-planning-surface),
  .app-overlay:is([id^="production-"], [id^="schedule-"], [id^="operation-assignment-"], [id^="production-availability-"], [id^="production-overtime-"], [id^="availability-detail-info-"], [id^="availability-capacity-editor-"], [id="personnel-capacity-info"], [id^="machine-availability-"], [id="machine-downtime-editor"], [id="machine-capability-editor"], [id="machine-capability-filter-picker"], [id="procedure-capacity-info"]) {
    --color-surface: #fff;
    --color-surface-muted: #f5f5f7;
    --color-text: #20242a;
    --color-text-muted: #68717d;
    --color-border: #e2e5e9;
    --color-accent: #006bd6;
    --color-info-soft: #edf5ff;
    --color-info-soft-border: #cddff6;
    --radius-control: .5rem;
    --radius-panel: .875rem;
    --workspace-muted-fill: #fafbfc;
    --workspace-segment-fill: #eef0f3;
  }
}

@layer components {
  /* Shared bounded Gantt and nonmodal background-work progress surface. */
  .app-view-switcher { display:inline-flex; flex-wrap:nowrap; gap:var(--space-1); padding:var(--space-1); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface-muted); }
  .app-planning-workspace>.app-workspace-section.app-section-stack { gap:var(--space-3); }
  .app-planning-board { --color-border:color-mix(in srgb,var(--color-text) 12%,var(--color-surface)); --color-text-muted:color-mix(in srgb,var(--color-text) 62%,var(--color-surface)); container:planning-board / inline-size; min-inline-size:0; border:1px solid var(--color-border); border-radius:var(--radius-panel); background:var(--color-surface); }
  .app-planning-commandbar { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:var(--space-4); padding-inline:var(--space-4); min-block-size:3.5rem; border-block-end:1px solid var(--color-border); }
  .app-planning-commandbar>.app-tabs { min-inline-size:0; padding:0; margin:0; border:0; border-radius:0; background:transparent; }
  .app-planning-commandbar .app-tab { display:flex; align-items:center; min-block-size:3.5rem; padding-inline:var(--space-3); font-size:var(--font-size-sm); }
  .app-planning-commandbar>.app-view-switcher { grid-column:3; justify-self:end; margin-block:var(--space-2); }
  .app-planning-commandbar>.app-planning-period { grid-column:2; justify-self:center; }
  .app-planning-board-body { min-inline-size:0; padding:var(--space-2) var(--space-4); }
  .app-planning-board-body>.app-workspace-actions:empty { display:none; }
  .app-planning-board-body>.app-disclosure { margin-block-start:var(--space-4); }
  .app-planning-board .app-data-table { font-size:var(--font-size-sm); }
  .app-planning-board .app-data-table thead th { padding-block:var(--space-3); background:var(--color-surface); color:var(--color-text-muted); font-weight:500; }
  .app-planning-board .app-data-table-wrap.has-sticky-actions .app-data-table th.is-actions { background:var(--color-surface); }
  .app-planning-board .app-data-table tbody td { padding-block:var(--space-3); border-block-end:1px solid var(--color-border); }
  .app-planning-board .app-data-table tbody tr:last-child td { border-block-end:0; }
  .app-planning-board .app-data-table tbody tr:hover td { background:color-mix(in srgb,var(--color-accent) 3%,var(--color-surface)); }
  .app-planning-board .app-data-table :is(th,td):first-child { text-align:start; }
  .app-planning-board .app-data-table :is(th,td).is-actions { text-align:end; }
  .app-planning-board .app-data-table .is-actions>.app-button { font-size:var(--font-size-control); }
  .app-planning-board .app-status-badge:not(.is-plain) { max-inline-size:100%; white-space:normal; line-height:1.35; text-align:start; }
  .app-planning-board .app-record-identity.is-compact>.app-record-identity-media { inline-size:auto; block-size:auto; align-self:center; }
  .app-planning-board .app-record-identity.is-compact { min-block-size:3.25rem; }
  .app-planning-board .app-record-identity-media>.app-pictogram { --pictogram-size:3.25rem; }
  .app-planning-procedure-summary { display:grid; gap:var(--space-1); min-block-size:3.25rem; align-content:center; }
  .app-planning-procedures { display:flex; align-items:center; gap:var(--space-2); margin:0; padding:0; list-style:none; }
  .app-planning-procedures>li { display:grid; place-items:center; position:relative; min-inline-size:1.75rem; min-block-size:1.75rem; }
  .app-planning-procedures .app-pictogram { --pictogram-size:1.75rem; }
  .app-planning-procedures .is-visually-hidden { position:absolute; inline-size:1px; block-size:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-planning-procedure-more { color:var(--color-text-muted); font-size:var(--font-size-caption); font-variant-numeric:tabular-nums; }
  .app-planning-priority { display:flex; align-items:center; gap:var(--space-1); margin-inline-end:var(--space-2); }
  .app-planning-priority .app-record-index { min-inline-size:1.75rem; min-block-size:1.75rem; color:var(--color-accent); background:color-mix(in srgb,var(--color-accent) 7%,var(--color-surface)); font-variant-numeric:tabular-nums; }
  .app-planning-record-meta { display:flex; align-items:flex-end; flex-direction:column; gap:var(--space-1); }
  .app-planning-board .app-planning-record-title strong { font-size:var(--font-size-md); font-weight:650; letter-spacing:-.01em; }
  .app-planning-board .app-planning-record-description { margin-block-start:var(--space-1); color:var(--color-text); font-size:var(--font-size-sm); }
  .app-planning-value { display:grid; gap:var(--space-1); font-size:var(--font-size-sm); font-variant-numeric:tabular-nums; }
  .app-planning-value>strong { font-weight:550; }
  .app-planning-value>span { color:var(--color-text-muted); font-size:var(--font-size-control); }
  .app-planning-value.is-muted { color:var(--color-text-muted); }
  .app-planning-list { --table-fixed-min-width:54rem; min-inline-size:0; }
  .app-view-switcher>.app-button { border-color:transparent; background:transparent; color:var(--color-text-muted); box-shadow:none; }
  .app-view-switcher>.app-button[aria-current="page"] { border-color:var(--color-border); background:var(--color-surface); color:var(--color-text); font-weight:600; box-shadow:0 1px 2px rgb(0 0 0 / .04); }
  .app-view-switcher.is-compact { gap:0; padding:3px; border:0; border-radius:calc(var(--radius-control) + 3px); background:color-mix(in srgb,var(--color-text) 6%,var(--color-surface)); }
  .app-view-switcher.is-compact>.app-button { min-block-size:1.875rem; padding:var(--space-1) var(--space-3); border:0; border-radius:var(--radius-control); background:transparent; box-shadow:none; font-size:var(--font-size-control); font-weight:500; }
  .app-view-switcher.is-compact>.app-button:hover { background:color-mix(in srgb,var(--color-text) 4%,var(--color-surface)); color:var(--color-text); }
  .app-view-switcher.is-compact>.app-button[aria-current="page"] { border:0; background:var(--color-surface); color:var(--color-text); box-shadow:0 1px 3px color-mix(in srgb,var(--color-text) 15%,transparent); }
  .app-planning-period { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--space-3); min-inline-size:0; }
  .app-planning-period>strong { font-size:var(--font-size-control); font-weight:500; white-space:nowrap; text-align:center; }
  .app-planning-date-navigation { display:inline-flex; align-items:center; }
  .app-planning-commandbar .app-planning-date-navigation>.app-button { min-block-size:2rem; padding:var(--space-1) var(--space-2); border-color:transparent; background:transparent; box-shadow:none; font-size:var(--font-size-control); }
  .app-planning-board .app-planning-timeline { border:0; border-radius:0; }
  .app-planning-board .app-planning-table thead th { background:var(--color-surface); padding-block:var(--space-3); }
  .app-planning-board .app-planning-table thead th:first-child { background:var(--color-surface); }
  .app-planning-summary { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4); padding:var(--space-3) var(--space-5); border-block-start:1px solid var(--color-border); color:var(--color-text-muted); font-size:var(--font-size-caption); }
  .app-planning-summary>span:last-child { margin-inline-start:auto; }
  .app-planning-summary strong { color:var(--color-text); font-weight:600; }
  .app-planning-automation { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-3); }
  .app-planning-automation>span+span { padding-inline-start:var(--space-3); border-inline-start:1px solid var(--color-border); }
  .app-planning-run { display:inline-flex; align-items:center; gap:var(--space-2); }
  .app-planning-run::before { content:''; inline-size:.4rem; block-size:.4rem; border-radius:50%; background:var(--color-text-muted); }
  .app-planning-run[data-status="succeeded"]::before { background:var(--color-success); }
  .app-planning-run:is([data-status="running"],[data-status="queued"])::before { background:var(--color-accent); }
  .app-planning-run[data-status="failed"]::before { background:var(--color-danger); }
  .app-planning-record-title { display:flex; align-items:baseline; gap:var(--space-2); min-inline-size:0; white-space:nowrap; }
  .app-planning-record-title>a { flex-shrink:0; text-decoration:none; }
  .app-planning-record-title>span { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; color:var(--color-text-muted); font-size:var(--font-size-caption); font-weight:400; }
  .app-planning-record-description { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-block-start:var(--space-1); font-size:var(--font-size-sm); font-weight:400; }
  .app-record-identity.is-compact { gap:var(--space-2); align-items:center; }
  .app-record-identity.is-compact.has-media { grid-template-columns:auto minmax(0,1fr); }
  .app-record-identity.is-compact.has-media:has(>.app-record-identity-notice:not(:empty)) { grid-template-columns:auto minmax(0,1fr) auto; }
  .app-record-identity.is-compact>.app-record-identity-media { inline-size:1.75rem; block-size:var(--control-height,2.5rem); }
  .app-record-identity.is-compact>.app-record-identity-notice { display:grid; gap:var(--space-1); align-content:center; justify-items:end; }
  .app-inline-action.app-button { min-block-size:1.5rem; padding:0; border:0; background:transparent; color:var(--color-accent); font-size:var(--font-size-caption); box-shadow:none; }
  .app-inline-action.app-button:hover { text-decoration:underline; background:transparent; }
  .app-planning-timeline { overflow:auto; max-inline-size:100%; border:1px solid var(--color-border); border-radius:var(--radius-control); }
  .app-planning-table { inline-size:100%; min-inline-size:56rem; border-collapse:collapse; table-layout:fixed; }
  .app-planning-table caption { position:absolute; clip-path:inset(50%); inline-size:1px; block-size:1px; overflow:hidden; }
  .app-planning-table :is(th,td) { padding:var(--space-4) var(--space-3); border-block-end:1px solid var(--color-border); vertical-align:middle; text-align:start; }
  .app-planning-table .is-identity { inline-size:21rem; text-align:start; position:sticky; inset-inline-start:0; z-index:2; background:var(--color-surface); }
  .app-planning-table .is-state { inline-size:10rem; }
  .app-planning-table .is-state>.app-status-badge { max-inline-size:100%; white-space:normal; line-height:1.35; text-align:start; }
  .app-planning-table .is-actions { inline-size:6rem; text-align:end; }
  .app-planning-timeline.is-resource .app-planning-table { min-inline-size:54rem; }
  .app-planning-timeline.is-resource .is-identity { inline-size:16rem; }
  .app-planning-timeline.is-resource .is-state { inline-size:11rem; }
  .app-planning-table .app-table-actions { justify-content:flex-end; }
  .app-planning-table thead th { position:sticky; inset-block-start:0; z-index:3; background:var(--color-surface-muted); font-weight:500; font-size:var(--font-size-caption); }
  .app-planning-table thead th:first-child { z-index:4; background:var(--color-surface-muted); }
  .app-planning-identity { display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-2); align-items:start; }
  .app-planning-table .app-table-meta { color:var(--color-text-muted); font-weight:400; }
  .app-planning-table tbody tr:hover { background:color-mix(in srgb,var(--color-accent) 3%,var(--color-surface)); }
  .app-planning-table .app-status-badge { margin-block:var(--space-1); }
  .app-planning-axis { position:relative; block-size:2.3rem; font-size:var(--font-size-caption); font-weight:500; color:var(--color-text-muted); }
  .app-planning-axis>span { position:absolute; inset-inline-start:var(--planning-left); inset-block-end:0; white-space:nowrap; }
  .app-planning-axis>.app-planning-now-label { inset-block-start:0; inset-block-end:auto; color:var(--color-accent); font-size:var(--font-size-caption); }
  .app-planning-lane { position:relative; min-block-size:calc(var(--planning-tracks,1)*2.4rem); }
  .app-planning-empty { display:block; padding:var(--space-2); color:var(--color-text-muted); font-size:var(--font-size-caption); }
  .app-planning-guides { position:absolute; inset:0; pointer-events:none; }
  .app-planning-guides>i { position:absolute; inset-block:0; inset-inline-start:var(--planning-left); border-inline-start:1px solid var(--color-border); opacity:.55; }
  .app-planning-guides>.app-planning-now { border-inline-start-color:var(--color-accent); opacity:.8; }
  .app-planning-position { container-type:inline-size; position:absolute; inset-inline-start:var(--planning-left); inline-size:var(--planning-width); inset-block-start:calc(var(--planning-track,0)*2.4rem + .2rem); block-size:2rem; z-index:1; }
  .app-planning-position.is-background { z-index:0; inset-block:0; block-size:auto; opacity:.35; }
  .app-planning-bar, .app-theme-focus .app-button.app-planning-bar { display:block; inline-size:100%; block-size:100%; min-inline-size:0; min-block-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; padding:var(--space-1) var(--space-2); border:1px solid color-mix(in srgb,var(--color-accent) 28%,var(--color-surface)); border-radius:var(--radius-control); background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)); color:var(--color-text); font-size:var(--font-size-caption); }
  .app-planning-bar.has-pictograms, .app-theme-focus .app-button.app-planning-bar.has-pictograms { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; gap:var(--space-2); }
  .app-planning-bar>.app-button-pictograms { --pictogram-size:1rem; }
  .app-planning-bar.has-pictograms>.app-button-label { display:block; flex:1; min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:start; }
  button.app-planning-bar { cursor:pointer; }
  button.app-planning-bar:hover { border-color:var(--color-accent); background:color-mix(in srgb,var(--color-accent) 14%,var(--color-surface)); }
  .app-planning-resource-artwork { --pictogram-size:1.5rem; display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--space-1); max-inline-size:6.75rem; }
  .app-planning-timeline.is-resource .app-planning-resource-artwork { max-inline-size:3.25rem; }
  .app-planning-gantt-meta { display:flex; align-items:center; flex-wrap:wrap; gap:var(--space-2); }
  .app-planning-timeline .app-planning-gantt-record>.app-record-identity.is-compact.has-media:has(>.app-record-identity-notice:not(:empty)) { grid-template-columns:auto minmax(0,1fr); }
  .app-planning-gantt-record>.app-record-identity>.app-record-identity-notice { grid-column:2; justify-self:stretch; justify-items:start; }
  .app-planning-gantt-record>.app-record-identity>.app-record-identity-media { grid-row:1 / span 2; }
  @container (max-width:2rem) {
    .app-planning-bar.has-pictograms, .app-theme-focus .app-button.app-planning-bar.has-pictograms { inline-size:1.5rem; block-size:1.5rem; min-inline-size:1.5rem; padding:0; margin-block-start:.25rem; border-radius:50%; justify-content:center; gap:0; }
    .app-planning-bar.has-pictograms>.app-button-label { position:absolute; inline-size:1px; block-size:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
    .app-planning-bar.has-pictograms>.app-button-pictograms:has(>img+img) { --pictogram-size:.625rem; display:grid; grid-template-columns:repeat(2,.625rem); gap:0; }
  }
  .app-planning-bar[data-planning-edit] { cursor:grab; touch-action:none; }
  .app-planning-bar[data-planning-edit]:active { cursor:grabbing; }
  .app-planning-bar:focus-visible { outline:2px solid var(--color-accent); outline-offset:2px; }
  .app-planning-bar.is-warning, .app-theme-focus .app-button.app-planning-bar.is-warning { color:var(--color-warning); border-color:var(--color-warning); background:var(--color-warning-soft); }
  .app-planning-bar.is-error { color:var(--color-danger); border-color:var(--color-danger); background:var(--color-danger-soft); }
  .app-planning-bar.is-blocked { color:var(--color-text-muted); border-color:var(--color-border); background:repeating-linear-gradient(135deg,var(--color-border) 0 4px,var(--color-surface) 4px 8px); }
  .app-background-progress { position:fixed; inset-inline-end:var(--space-5); inset-block-end:var(--space-5); z-index:80; inline-size:min(26rem,calc(100vw - 2rem)); padding:var(--space-4); border:1px solid var(--color-border); border-radius:var(--radius-control); background:var(--color-surface); box-shadow:0 .5rem 2rem rgb(0 0 0 / .14); }
  .app-background-progress>.app-workspace-actions { justify-content:space-between; }
  .app-background-progress [data-schedule-result] { margin-block-start:var(--space-3); color:var(--color-text-muted); font-size:var(--font-size-caption); }
  .app-background-progress[hidden] { display:none; }
  @container planning-board (max-width:58rem) {
    .app-planning-commandbar { grid-template-columns:minmax(0,1fr) auto; gap:0 var(--space-3); }
    .app-planning-commandbar>.app-view-switcher { grid-column:2; }
    .app-planning-commandbar>.app-planning-period { grid-column:1 / -1; grid-row:2; padding-block:var(--space-2) var(--space-3); }
  }
  @container planning-board (max-width:36rem) {
    .app-planning-commandbar { grid-template-columns:minmax(0,1fr); }
    .app-planning-commandbar>.app-view-switcher { grid-column:1; grid-row:2; justify-self:start; }
    .app-planning-commandbar>.app-planning-period { grid-row:3; justify-self:start; justify-content:flex-start; }
  }
  @media (max-width:48rem) {
    .app-planning-commandbar { padding-inline:var(--space-2); }
    .app-planning-board-body { padding:var(--space-2); }
    .app-planning-timeline .app-planning-table .is-identity { inline-size:14rem; }
    .app-planning-timeline.is-resource .app-planning-table .is-identity { inline-size:13rem; }
    .app-planning-summary>span:last-child { margin-inline-start:0; }
    .app-planning-record-title { gap:var(--space-1); }
  }
}

@layer base {
  /* Shared display typography; pinned font and original OFL notice live together. */
  @font-face {
    font-family: "Inter";
    src: url("../fonts/inter/InterVariable-4.1.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
  }
}

@layer components {
  /* Generic frozen/current value comparison, sharing the native table and controls. */
  .app-value-change-action { color: var(--color-warning); }
  .app-value-change-link { display: block; inline-size: fit-content; margin-block-start: var(--space-1); text-decoration: none; }
  .app-value-change-link:hover { text-decoration: underline; }
  .app-value-change-link.is-inline { display: inline-flex; margin: 0; }
  .app-record-identity { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 1fr); gap: var(--space-5); align-items: center; min-inline-size: 0; inline-size: 100%; }
  .app-record-identity-copy, .app-record-identity-notice { min-inline-size: 0; }
  .app-record-identity-notice { justify-self: start; }
  .app-record-identity-notice .app-status-badge { text-align: start; }
  .app-record-identity.has-trailing-notice { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: start; }
  .app-record-identity.has-trailing-notice > .app-record-identity-notice { justify-self: end; }
  @container record-list (max-width: 62rem) {
    .app-record-identity:not(.has-trailing-notice):not(.has-media) { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .app-record-identity-notice:empty { display: none; }
  }
  .app-comparison-image { display: block; inline-size: min(100%, 12rem); block-size: 8rem; object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
  /* RecordIdentity: stable optional media beside the identity copy. */
  .app-record-identity.has-media { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
  .app-record-identity.has-media:has(> .app-record-identity-notice:not(:empty)) { grid-template-columns: auto minmax(0, 1fr) auto; }
  .app-record-identity.has-media > .app-record-identity-notice:empty { display: none; }
  .app-record-identity-media { display: grid; place-items: center; inline-size: calc(var(--control-height, 2.5rem) * var(--thumbnail-landscape-ratio, 1.5)); block-size: var(--control-height, 2.5rem); }
  .app-record-identity-media .app-table-thumbnail { max-inline-size: 100%; max-block-size: 100%; }
  .app-comparison-value { white-space: normal; overflow-wrap: anywhere; }
  .app-comparison-actions { flex-wrap: wrap; }
  .app-comparison-selection { margin-inline-end: auto; }
  .app-value-comparison .app-checkbox { align-items: flex-start; }
  .app-value-comparison .app-data-table .app-form-field { margin: 0; }
  .app-form-field[role="group"] > .is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-bilingual-text { display:inline-grid; gap:.15em; max-inline-size:100%; vertical-align:baseline; line-height:1.2; }
  .app-bilingual-secondary { display:block; color:var(--color-text-muted); font-size:.72em; font-weight:400; letter-spacing:normal; }
  .app-navigation-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-4); }
}

@layer tokens {
  :root { --color-display-ink:#f6faff; --color-display-muted:#d7e5f3; --color-display-accent:#9bddff; --color-display-line:rgb(230 244 255 / .3); --color-display-glass:rgb(8 25 42 / .22); --color-display-day-off:rgb(222 240 255 / .09); --color-display-today:rgb(87 180 228 / .22); --color-display-scrim:rgb(5 16 28 / .4); }
}

/* Passive presentation surfaces, month calendars, agendas and rotating media. */
@layer components {
  .app-presentation-page { margin:0; color:var(--color-text); background:var(--color-surface); }
  .app-month-calendar { min-inline-size:0; overflow:auto; }
  .app-month-calendar table { inline-size:100%; border-collapse:collapse; table-layout:fixed; }
  .app-month-calendar caption { text-align:start; font-size:var(--font-size-lg); font-weight:600; padding-block:var(--space-3); }
  .app-month-calendar th { color:var(--color-text-muted); font-size:var(--font-size-caption); font-weight:600; padding:var(--space-3) var(--space-1); }
  .app-month-calendar th:first-child { inline-size:2.75rem; }
  .app-month-calendar td { vertical-align:top; border:1px solid var(--color-border); padding:var(--space-2); block-size:var(--calendar-day-block-size,7rem); }
  .app-presentation-page { --calendar-day-block-size:clamp(4.5rem,9dvh,7rem); }
  .app-month-calendar td:is(.is-weekend,.is-holiday) { background:var(--color-surface-muted); }
  .app-month-calendar td.is-outside { color:var(--color-text-muted); }
  .app-month-calendar td.is-today { background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)); box-shadow:inset 0 0 0 2px var(--color-accent); }
  .app-month-calendar time { display:inline-flex; align-items:center; justify-content:center; min-inline-size:1.7em; min-block-size:1.7em; font-size:var(--font-size-lg); font-weight:400; font-variant-numeric:tabular-nums; }
  .app-month-calendar td:is(.is-weekend,.is-holiday) time { font-weight:700; }
  .app-month-calendar td.is-today time { color:var(--color-surface); background:var(--color-accent); border-radius:var(--radius-control); }
  .app-month-calendar ul { padding:0; margin:var(--space-2) 0 0; list-style:none; }
  .app-month-calendar li { border-inline-start:3px solid var(--color-accent); padding-inline-start:var(--space-1); margin-block-start:var(--space-1); font-size:var(--font-size-caption); line-height:1.35; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-month-calendar li span { color:var(--color-text-muted); }
  .app-month-calendar .app-calendar-more { border:0; color:var(--color-text-muted); }
  /* Monitor variant: large date hierarchy and evenly filled six-week rows. */
  .app-month-calendar.is-display { min-block-size:0; overflow:clip; background:var(--color-surface); border:1px solid var(--color-border); border-radius:var(--radius-panel); box-shadow:var(--shadow-panel); }
  .app-month-calendar.is-display table { display:grid; grid-template-rows:auto auto minmax(0,1fr); min-inline-size:0; block-size:100%; border-collapse:separate; border-spacing:0; }
  .app-month-calendar.is-display caption { padding:clamp(.75rem,2dvh,1.5rem) var(--space-6); font-size:clamp(1.75rem,2.2vw,2.75rem); line-height:1.1; font-weight:650; letter-spacing:-.045em; }
  .app-month-calendar.is-display thead { display:block; }
  .app-month-calendar.is-display tbody { display:grid; grid-template-rows:repeat(6,minmax(0,1fr)); min-block-size:0; }
  .app-month-calendar.is-display tr { display:grid; grid-template-columns:clamp(2.5rem,3.2vw,4rem) repeat(7,minmax(0,1fr)); min-block-size:0; }
  .app-month-calendar.is-display th { min-inline-size:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-month-calendar.is-display thead th { padding:var(--space-3) var(--space-2); background:var(--color-surface-muted); color:var(--color-text); font-size:clamp(.75rem,.85vw,1rem); font-weight:500; }
  .app-month-calendar.is-display th:first-child { inline-size:clamp(2.75rem,3.2vw,4rem); }
  .app-month-calendar.is-display tbody th { display:grid; place-items:center; background:var(--color-surface-muted); font-size:clamp(.75rem,.9vw,1.125rem); }
  .app-month-calendar.is-display tbody th.is-current-week { color:var(--color-accent); font-weight:700; background:color-mix(in srgb,var(--color-accent) 10%,var(--color-surface)); }
  .app-month-calendar.is-display td { min-inline-size:0; min-block-size:0; overflow:hidden; block-size:auto; padding:clamp(.25rem,1dvh,.75rem); border:0; border-block-start:1px solid var(--color-border); border-inline-start:1px solid var(--color-border); background:var(--color-surface); }
  .app-month-calendar.is-display td:is(.is-weekend,.is-holiday) { background:var(--color-surface-muted); }
  .app-month-calendar.is-display td.is-today { background:color-mix(in srgb,var(--color-accent) 8%,var(--color-surface)); }
  .app-month-calendar.is-display time { font-size:clamp(.875rem,min(1.6vw,3dvh),2rem); min-inline-size:1.6em; min-block-size:1.6em; }
  .app-month-calendar.is-display td.is-today time { border-radius:50%; }
  .app-month-calendar.is-display td.is-outside time { opacity:.55; }
  .app-month-calendar.is-display .app-calendar-day-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-1); }
  .app-calendar-day-note { color:var(--color-accent); font-size:var(--font-size-caption); font-weight:650; }
  .app-calendar-holiday { display:block; padding:var(--space-1) var(--space-2); color:var(--color-text-muted); font-size:var(--font-size-caption); line-height:1.3; overflow-wrap:anywhere; }
  .app-month-calendar.is-display li { margin-block-start:var(--space-2); padding:var(--space-1) var(--space-2); border-radius:var(--radius-control); background:color-mix(in srgb,var(--color-accent) 7%,var(--color-surface)); font-size:clamp(.75rem,.8vw,1rem); }
  /* A transparent monitor surface over protected photos, reusable by display owners. */
  .app-scenic-display { --color-text:var(--color-display-ink); --color-text-muted:var(--color-display-muted); color:var(--color-display-ink); background:var(--color-display-scrim); }
  .app-scenic-display.is-active.has-image::after { background:linear-gradient(180deg,rgb(5 16 28 / .28),var(--color-display-scrim) 38%,rgb(5 16 28 / .64)); }
  .app-presentation-page[data-display-theme="dark"] .app-scenic-display { --color-display-glass:rgb(5 16 28 / .48); --color-display-scrim:rgb(5 16 28 / .58); }
  .app-scenic-display .app-display-heading h1 { font-weight:500; }
  .app-scenic-display .app-display-heading p { color:var(--color-display-muted); }
  .app-display-clock.is-portrait { text-align:start; }
  .app-display-clock.is-portrait strong { font-weight:300; letter-spacing:-.065em; }
  .app-display-clock.is-portrait .app-display-date-block { justify-self:start; grid-template-columns:auto auto; column-gap:var(--space-4); row-gap:var(--space-2); padding:0; margin-block-start:0; background:none; border:0; box-shadow:none; backdrop-filter:none; font-weight:400; }
  .app-display-clock.is-portrait .app-display-week-number { grid-column:1/-1; color:var(--color-display-muted); font-size:.6em; letter-spacing:.06em; }
  .app-display-clock.is-portrait .app-display-clock-analog { justify-content:start; }
  .app-display-clock.is-inline { grid-template-columns:auto minmax(0,1fr); column-gap:var(--space-5); align-items:center; }
  .app-display-clock.is-inline > strong,.app-display-clock.is-inline > .app-display-clock-analog { grid-column:1; grid-row:1; }
  .app-display-clock.is-inline .app-display-date-block { grid-column:2; grid-row:1; grid-template-columns:minmax(0,1fr); justify-self:end; text-align:end; }
  .app-month-calendar.is-display.is-scenic { background:var(--color-display-glass); border:0; border-radius:0; box-shadow:none; text-shadow:0 1px 3px rgb(0 0 0 / .5); color:var(--color-display-ink); }
  .app-month-calendar.is-display.is-scenic caption { padding:var(--space-5) var(--space-3); font-size:clamp(1.25rem,3.2cqw,2.5rem); font-weight:450; letter-spacing:-.02em; }
  .app-month-calendar.is-display.is-scenic tr { grid-template-columns:clamp(2rem,5cqw,4rem) repeat(7,minmax(0,1fr)); }
  .app-month-calendar.is-display.is-scenic th:first-child { inline-size:auto; padding-inline:var(--space-2); text-align:center; }
  .app-month-calendar.is-display.is-scenic thead th { color:var(--color-display-muted); background:transparent; font-size:clamp(.625rem,1.65cqw,1.375rem); padding:var(--space-3) var(--space-1); border-block-end:1px solid var(--color-display-line); }
  .app-month-calendar.is-display.is-scenic tbody th { background:transparent; color:var(--color-display-muted); font-size:clamp(.625rem,1.5cqw,1.125rem); border-block-start:1px solid var(--color-display-line); }
  .app-month-calendar.is-display.is-scenic tbody th.is-current-week { color:var(--color-display-accent); }
  .app-month-calendar.is-display.is-scenic td { background:transparent; border-inline-start:0; border-block-start-color:var(--color-display-line); padding:clamp(.125rem,.65cqw,.5rem); }
  .app-month-calendar.is-display.is-scenic td:is(.is-weekend,.is-holiday) { background:var(--color-display-day-off); }
  .app-month-calendar.is-display.is-scenic td.is-today { background:var(--color-display-today); box-shadow:inset 0 0 0 1px var(--color-display-accent); }
  .app-month-calendar.is-display.is-scenic time { color:var(--color-display-ink); font-size:clamp(.75rem,2.35cqw,1.875rem); }
  .app-month-calendar.is-display.is-scenic td.is-today time { color:var(--color-display-ink); background:var(--color-display-today); }
  .app-month-calendar.is-display.is-scenic .app-calendar-day-note { color:var(--color-display-accent); font-size:clamp(.5rem,1.2cqw,.875rem); }
  .app-month-calendar.is-display.is-scenic .app-calendar-holiday { color:var(--color-display-muted); font-size:clamp(.5rem,1.35cqw,1rem); padding:var(--space-1); }
  .app-month-calendar.is-display.is-scenic li { color:var(--color-display-accent); background:transparent; border-inline-start-color:var(--color-display-accent); font-size:clamp(.5rem,1.45cqw,1.125rem); line-height:1.2; white-space:nowrap; padding:0 var(--space-1); margin-block-start:var(--space-1); }
  .app-month-calendar.is-display.is-scenic li span { display:block; color:var(--color-display-muted); font-size:.8em; }
  .app-display-footer.is-scenic { border-color:var(--color-display-line); align-items:center; color:var(--color-display-muted); font-size:clamp(.75rem,1.65cqw,1.25rem); }
  .app-display-widget { background:var(--color-display-glass); padding:clamp(.5rem,1.7cqw,1.5rem); min-block-size:0; overflow:hidden; text-shadow:0 1px 3px rgb(0 0 0 / .5); }
  .app-display-widget-heading { display:flex; align-items:baseline; justify-content:space-between; gap:var(--space-3); color:var(--color-display-muted); font-size:clamp(.625rem,1.6cqw,1.25rem); }
  .app-display-widget-heading h2 { margin:0; font-size:inherit; font-weight:500; }
  .app-display-widget-heading span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .app-display-widget-empty,.app-display-widget-headline { margin:var(--space-2) 0 0; color:var(--color-display-ink); font-size:clamp(.75rem,2cqw,1.5rem); line-height:1.3; }
  .app-display-weather-reading { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
  .app-display-weather-reading strong { font-size:clamp(1.5rem,4cqw,3.5rem); font-weight:450; }
  .app-display-weather-reading > div { display:grid; gap:var(--space-1); font-size:clamp(.625rem,1.6cqw,1.25rem); }
  .app-display-weather-reading .app-display-weather-temperature { display:flex; align-items:center; gap:var(--space-3); }
  .app-weather-symbol { inline-size:clamp(1.5rem,6cqw,4rem); block-size:clamp(1.5rem,6cqw,4rem); flex:none; }
  .app-display-weather-meta { display:flex; justify-content:space-between; gap:var(--space-3); color:var(--color-display-muted); font-size:clamp(.625rem,1.4cqw,1rem); }
  /* Shared tracks keep location, conditions, wind and observation time aligned. */
  .app-display-widget.is-weather { display:grid; grid-template-columns:minmax(0,1fr) max-content; grid-template-rows:auto auto auto; align-content:start; column-gap:var(--space-4); row-gap:var(--space-1); }
  .app-display-widget.is-weather :is(.app-display-widget-heading,.app-display-weather-reading,.app-display-weather-meta) { display:contents; }
  .app-display-widget.is-weather .app-display-widget-heading h2 { grid-column:1; grid-row:1; }
  .app-display-widget.is-weather .app-display-widget-heading > span { grid-column:2; grid-row:1; justify-self:start; }
  .app-display-widget.is-weather .app-display-weather-temperature { grid-column:1; grid-row:2; }
  .app-display-widget.is-weather .app-display-weather-reading > div:not(.app-display-weather-temperature) { grid-column:2; grid-row:2; align-self:center; text-align:start; }
  .app-display-widget.is-weather .app-display-weather-meta > :first-child { grid-column:1; grid-row:3; }
  .app-display-widget.is-weather .app-display-weather-meta > :last-child { grid-column:2; grid-row:3; text-align:start; }
  .app-display-widget.is-weather .app-display-widget-empty { grid-column:1 / -1; grid-row:2; }
  .app-display-footer.is-scenic .app-brand-mark { block-size:clamp(1.5rem,5cqw,3rem); max-inline-size:8rem; }
  .app-month-calendar.is-scenic:not(.is-compact) ul { margin-block-start:var(--space-1); }
  .app-month-calendar.is-display.is-scenic:not(.is-compact) time { font-size:clamp(.75rem,1.9cqw,1.5rem); }
  .app-month-calendar.is-display.is-scenic:not(.is-compact) li { font-size:clamp(.5rem,1.25cqw,1rem); margin-block-start:0; }
  .app-month-calendar.is-display.is-scenic:not(.is-compact) li span { display:inline; font-size:inherit; }
  .app-month-calendar.is-compact { container-type:inline-size; }
  .app-month-calendar.is-display.is-scenic.is-compact caption { padding:var(--space-2); font-size:clamp(.75rem,4cqw,1.5rem); }
  .app-month-calendar.is-display.is-scenic.is-compact tr { grid-template-columns:clamp(2rem,9cqw,3rem) repeat(7,minmax(0,1fr)); }
  .app-month-calendar.is-display.is-scenic.is-compact th { font-size:clamp(.5rem,3cqw,1rem); }
  .app-month-calendar.is-display.is-scenic.is-compact thead th { padding:var(--space-1); text-align:center; }
  .app-month-calendar.is-display.is-scenic.is-compact thead th:first-child { padding-inline:var(--space-2); }
  .app-month-calendar.is-display.is-scenic.is-compact tbody th { display:block; padding:clamp(.0625rem,.35cqw,.25rem) var(--space-2); font-size:clamp(.625rem,4cqw,1.5rem); font-weight:400; font-variant-numeric:tabular-nums; line-height:1.25; text-align:center; }
  .app-month-calendar.is-display.is-scenic.is-compact td { position:relative; padding:clamp(.0625rem,.35cqw,.25rem); }
  .app-month-calendar.is-display.is-scenic.is-compact .app-calendar-day-heading { justify-content:center; }
  .app-month-calendar.is-display.is-scenic.is-compact time { font-size:clamp(.625rem,4cqw,1.5rem); line-height:1.25; min-block-size:1.25em; }
  .app-calendar-event-count { position:absolute; inset-inline-end:var(--space-1); inset-block-end:var(--space-1); font-size:var(--font-size-caption); color:var(--color-display-accent); }
  @container (max-width:40rem) {
    .app-month-calendar.is-display.is-scenic caption { padding:var(--space-3) var(--space-2); }
    .app-month-calendar.is-display.is-scenic thead th { padding-block:var(--space-2); }
    .app-month-calendar.is-display.is-scenic ul { margin-block-start:var(--space-1); }
    .app-month-calendar.is-display.is-scenic li { line-height:1.1; margin-block-start:0; }
    .app-month-calendar.is-display.is-scenic li span { display:inline; font-size:inherit; }
  }
  .app-event-agenda { list-style:none; padding:0; margin:0; }
  .app-event-agenda li { display:grid; grid-template-columns:7rem minmax(0,1fr) auto; gap:var(--space-4); align-items:center; padding:var(--space-4); border-block-end:1px solid var(--color-border); }
  .app-event-agenda li.is-active { background:var(--color-warning-soft); border-inline-start:4px solid var(--color-warning); }
  .app-event-agenda li > div { min-inline-size:0; display:flex; flex-direction:column; gap:var(--space-2); }
  .app-event-agenda strong,.app-event-time time { font-size:var(--font-size-lg); font-weight:600; overflow-wrap:anywhere; }
  .app-event-agenda span { color:var(--color-text-muted); font-size:var(--font-size-sm); }
  .app-event-time { font-variant-numeric:tabular-nums; }
  .app-rotating-image { position:relative; display:grid; place-items:center; margin:0; overflow:hidden; background:var(--color-surface-muted); border-radius:var(--radius-panel); }
  .app-rotating-image img { position:absolute; inset:0; inline-size:100%; block-size:100%; object-fit:cover; }
  .app-rotating-image img[hidden] { display:none; }
  .app-rotating-image img.is-loading { opacity:0; }
  .app-rotating-image img.is-fading { animation: app-image-fade 1.5s ease-in-out; }
  @media (prefers-reduced-motion: reduce) { .app-rotating-image img.is-fading { animation:none; } }
  @keyframes app-image-fade { from { opacity:0; } to { opacity:1; } }
  .app-display-image-panel.is-active { position:relative; isolation:isolate; overflow:hidden; }
  .app-display-image-panel.is-active > .app-rotating-image { position:absolute; inset:0; block-size:100%; border-radius:0; z-index:0; }
  .app-display-image-panel.is-active > :not(.app-rotating-image) { position:relative; z-index:2; }
  .app-display-image-panel.is-active.has-image { color:var(--color-text); --color-text-muted:#f2f6ff; text-shadow:0 1px 3px rgb(0 0 0 / .7); }
  .app-display-image-panel.is-active.has-image::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg,rgb(0 0 0 / .5),rgb(0 0 0 / .1) 60%,rgb(0 0 0 / .3)); }
  .app-rotating-image figcaption { padding:var(--space-4); color:var(--color-text-muted); font-size:var(--font-size-sm); }
  .app-rotating-image:has(img:not([hidden])) figcaption { position:absolute; inline-size:1px; block-size:1px; overflow:hidden; clip-path:inset(50%); }
  .app-news-panel { min-block-size:8rem; border-block-start:1px solid var(--color-border); padding-block-start:var(--space-4); }
  .app-news-panel h2 { font-size:var(--font-size-sm); font-weight:600; color:var(--color-accent); margin:0 0 var(--space-3); }
  .app-news-panel p { margin:0; font-size:var(--font-size-lg); line-height:1.45; overflow-wrap:anywhere; }
  @media(max-width:42rem) { .app-month-calendar table { min-inline-size:44rem; } .app-event-agenda li { grid-template-columns:5rem minmax(0,1fr); } .app-event-agenda .app-status-badge { grid-column:2; } }
}

/* A real display viewport, scaled to an administration overlay. */
@layer components {
  .app-screen-preview { min-inline-size: 0; }
  .app-screen-preview-toolbar { --control-height: var(--icon-button-size,2rem); --control-block-space: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); }
  .app-screen-preview .app-screen-preview-toolbar > .app-settings-field.is-row.is-compact { margin: 0; padding: 0; grid-template-columns: auto minmax(8rem,12rem); gap: var(--space-3); align-items: center; }
  .app-screen-preview-toolbar .app-settings-field-label > label { margin: 0; }
  .app-screen-preview .app-screen-preview-toolbar > .app-settings-field .app-settings-field-control > select { min-height: var(--icon-button-size,2rem); min-block-size: var(--icon-button-size,2rem); block-size: var(--icon-button-size,2rem); padding-block: 0; }
  .app-screen-preview-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-2); margin-inline-start: auto; }
  .app-screen-preview-toolbar .app-settings-field-meta:empty { display: none; }
  .app-screen-preview-stage { display: flex; align-items: center; justify-content: center; inline-size: 100%; block-size: min(62dvh, 50rem); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
  .app-screen-preview-stage:fullscreen { block-size: 100dvh; border: 0; border-radius: 0; }
  .app-screen-preview-screen { position: relative; flex: none; overflow: hidden; box-shadow: var(--shadow-panel); }
  .app-screen-preview-screen iframe { display: block; position: absolute; inset: 0; max-inline-size: none; border: 0; transform-origin: top left; background: var(--color-surface); }
  .app-overlay-content > .app-screen-preview { block-size: 100%; display: grid; grid-template-rows: auto minmax(0,1fr); gap: var(--space-3); padding: var(--space-4); }
  .app-overlay-content > .app-screen-preview .app-screen-preview-toolbar { margin-block-end: 0; }
  .app-overlay-content > .app-screen-preview .app-screen-preview-stage:not(:fullscreen) { block-size: 100%; min-block-size: 0; }
  .app-workspace-page[id], .app-workspace-content > [id],
  .app-workspace-page .app-workspace-section > .app-form-section[id] { scroll-margin-block-start: calc(var(--shell-header-height, 5.75rem) + var(--space-3)); }
  @media (max-width: 42rem) { .app-screen-preview-toolbar { flex-wrap: wrap; } }
}

@layer tokens {
  :root { --button-icon-size: 1.5rem; }
  /* Terminal controls can be calibrated upward without module-local skins. */
  .app-touch { --touch-target-min-size: 2.5cm; --icon-button-size: var(--touch-target-min-size); --icon-button-icon-size: 2rem; --button-icon-size: 2.75rem; --font-size-control: var(--font-size-md); }
}

@layer components {
  /* Shared clock artwork owns its approved finish; owners only choose its size. */
  .app-analog-clock { display: block; inline-size: var(--analog-clock-size, 8rem); block-size: var(--analog-clock-size, 8rem); flex: none; }
  .app-analog-clock-hand { transform-origin: 0 0; }
  .app-person-tile { --person-tile-accent: var(--color-border); display: grid; grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: auto auto; align-items: center; align-content: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); min-inline-size: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-inline-start: var(--space-1) solid var(--person-tile-accent); border-radius: var(--radius-panel); }
  .app-person-tile[data-tone="success"] { --person-tile-accent: var(--color-success-soft-border); }
  .app-person-tile[data-tone="warning"] { --person-tile-accent: var(--color-warning-soft-border); }
  .app-person-tile[data-tone="error"] { --person-tile-accent: var(--color-danger-soft-border); }
  .app-person-tile[data-tone="info"] { --person-tile-accent: var(--color-info-soft-border); }
  .app-person-tile-monogram { display: grid; place-items: center; grid-column: 1; grid-row: 1; inline-size: var(--control-height); block-size: var(--control-height); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
  .app-person-tile-avatar { display: grid; place-items: center; grid-column: 1; grid-row: 1; inline-size: var(--person-avatar-size,3rem); block-size: var(--person-avatar-size,3rem); overflow: hidden; border-radius: var(--radius-control); background: var(--color-surface-muted); }
  .app-person-tile-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .app-person-tile-avatar.is-placeholder img { inline-size: 65%; block-size: 65%; opacity: .65; object-fit: contain; }
  .app-person-tile-name { grid-column: 2 / -1; font-weight: 650; font-size: var(--person-name-size, var(--font-size-lg)); line-height: 1.25; overflow-wrap: anywhere; }
  .app-person-tile > .app-status-badge { grid-column: 1 / 3; grid-row: 2; }
  .app-person-tile-detail { grid-column: 3; grid-row: 2; color: var(--color-text-muted); font-size: var(--font-size-sm); text-align: end; }
  .app-person-tile.is-compact { padding: var(--space-3) var(--space-4); }
  .app-person-tile.is-compact .app-person-tile-monogram { grid-row: 1 / -1; }
  .app-person-tile.is-compact .app-person-tile-name { grid-column: 2; grid-row: 1 / -1; }
  .app-person-tile.is-compact > .app-status-badge { grid-column: 3; inline-size: var(--status-min-width); max-inline-size: none; grid-row: 1; }
  .app-person-tile.is-compact .app-person-tile-detail { grid-row: 2; }
  /* Wall displays keep stable roster sizing and a separate time/summary area. */
  .app-wall-display { --font-family-base: var(--font-family-display); --display-space: clamp(1rem,2.1vw,2.5rem); --status-font-size: var(--font-size-sm); --status-min-width: 8.5rem; --status-height: 1.75rem; --status-icon-size: 1rem; background: var(--color-surface); color: var(--color-text); }
  .app-display-heading h1 { margin: 0 0 var(--space-2); font-size: clamp(1.75rem,2.5vw,3rem); line-height: 1.15; font-weight: 650; letter-spacing: -.035em; overflow-wrap: anywhere; }
  .app-display-heading p { margin: 0; color: var(--color-text-muted); font-size: clamp(.875rem,1.1vw,1.25rem); overflow-wrap: anywhere; }
  .app-display-heading.is-inline { display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); }
  .app-display-heading.is-inline h1 { margin:0; font-size:clamp(1.375rem,1.65vw,2rem); }
  .app-display-heading.is-inline p { font-size:clamp(.875rem,.95vw,1.125rem); }
  .app-brand-identity.is-display .app-brand-mark { inline-size: auto; max-inline-size: 12rem; block-size: clamp(3.5rem,5vw,5.5rem); object-fit: contain; }
  .app-display-summary { display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-6); border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--display-space); }
  .app-display-clock { display: grid; text-align: center; white-space: nowrap; gap: var(--display-clock-gap,var(--space-1)); color: var(--color-text-muted); font-size: var(--display-clock-font-size,clamp(.875rem,1.1vw,1.25rem)); }
  .app-display-clock strong { color: var(--color-text); font-size: var(--display-clock-time-size,clamp(2.5rem,4.5vw,5.5rem)); line-height: 1.15; font-weight: 600; letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
  .app-display-clock-analog { display: grid; place-items: center; --analog-clock-size: var(--display-clock-face-size,clamp(7rem,12vw,12rem)); }
  .app-display-clock > [hidden] { display: none; }
  .app-display-date-block { display:grid; gap:var(--display-clock-gap,var(--space-1)); }
  .app-display-clock.is-scenic:not(.is-portrait) { text-align:center; }
  .app-display-clock.is-scenic:not(.is-portrait) .app-display-date-block { justify-self:center; margin-block-start:var(--space-3); padding:var(--space-4) var(--space-5); border-radius:var(--radius-panel); font-weight:500; line-height:1.3; }
  .app-display-image-panel.has-image .app-display-clock.is-scenic:not(.is-portrait) .app-display-date-block { background:rgb(15 28 46 / .3); border:1px solid rgb(255 255 255 / .24); backdrop-filter:blur(12px); text-shadow:none; box-shadow:0 .5rem 2rem rgb(0 0 0 / .12); }
  .app-display-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-4); border-block: 1px solid var(--color-border); }
  .app-display-section-heading h2 { display: grid; grid-template-columns: var(--person-avatar-size,3rem) auto; align-items: center; gap: var(--space-4); margin: 0; font-size: clamp(1rem,1.2vw,1.375rem); font-weight: 600; }
  .app-display-section-heading h2 > img { inline-size: 1.25em; block-size: 1.25em; flex: none; }
  .app-display-section-heading > span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-metric-ribbon.is-display { grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5) var(--space-4); margin: 0; padding: 0; border: 0; background: transparent; }
  .app-metric-ribbon.is-display .app-metric { grid-template-columns: minmax(0,1fr); border: 0; border-block-start: 2px solid var(--color-border); padding: var(--space-3) 0 0; }
  .app-metric-ribbon.is-display .app-metric[data-tone="success"] { border-color: var(--color-success-soft-border); }
  .app-metric-ribbon.is-display .app-metric[data-tone="warning"] { border-color: var(--color-warning-soft-border); }
  .app-metric-ribbon.is-display .app-metric[data-tone="error"] { border-color: var(--color-danger-soft-border); }
  .app-metric-ribbon.is-display .app-metric strong { grid-column: 1; font-size: clamp(1.75rem,2.5vw,3rem); line-height: 1.1; }
  .app-metric-ribbon.is-display .app-metric span { grid-column: 1; font-size: var(--font-size-sm); }
  .app-display-empty { display: flex; align-items: center; gap: var(--space-5); max-inline-size: 42rem; padding-block: var(--space-6); }
  .app-display-empty[hidden] { display: none; }
  .app-display-empty > img { inline-size: clamp(2.5rem,4vw,4rem); block-size: auto; opacity: .45; flex: none; }
  .app-display-empty strong { font-size: clamp(1.375rem,2vw,2rem); font-weight: 600; }
  .app-display-empty p { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: clamp(.875rem,1.2vw,1.125rem); line-height: 1.5; }
  .app-display-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-display-footer-brand { display: inline-flex; align-items: center; gap: var(--space-3); }
  .app-display-footer-brand > img { inline-size: var(--space-5); block-size: var(--space-5); object-fit: contain; flex: none; }
  .app-display-freshness { inline-size: min(24rem,100%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: end; }
  .app-display-freshness:not(:empty)::before { content: ''; display: inline-block; inline-size: .45rem; block-size: .45rem; margin-inline-end: var(--space-2); border-radius: 50%; background: var(--color-success-soft-border); }
  .app-display-freshness[data-tone="warning"]::before { background: var(--color-warning-soft-border); }
  .is-offline .app-display-freshness:not(:empty)::before { background: var(--color-warning-soft-border); }
  .app-person-tile.is-display { grid-template-columns: auto minmax(0,1fr) auto; grid-template-rows: minmax(0,1fr) auto; gap: var(--space-3); padding: var(--space-5); border-inline-start-width: 1px; border-block-start: 3px solid var(--person-tile-accent); }
  .app-person-tile.is-display .app-person-tile-name { grid-column: 2 / -1; grid-row: 1; align-self: center; }
  .app-person-tile.is-display > .app-status-badge { grid-column: 1 / 3; grid-row: 2; }
  .app-person-tile.is-display .app-person-tile-detail { grid-column: 3; grid-row: 2; }
  .app-person-tile.is-display.is-compact { grid-template-rows: auto auto; padding: var(--space-3) 0; gap: var(--space-1) var(--space-4); border: 0; border-block-end: 1px solid var(--color-border); border-radius: 0; background: transparent; }
  .app-person-tile.is-display.is-compact .app-person-tile-avatar { grid-row: 1 / 3; }
  .app-person-tile.is-display.is-compact .app-person-tile-name { grid-column: 2; grid-row: 1; }
  .app-person-tile.is-display.is-compact > .app-status-badge { grid-column: 3; grid-row: 1 / 3; }
  .app-person-tile.is-display.is-compact .app-person-tile-detail { grid-column: 2; grid-row: 2; text-align: start; }
  @media (orientation: portrait), (max-width: 48rem) {
    .app-display-summary { border-inline-start: 0; border-block: 1px solid var(--color-border); padding: var(--space-4) 0; }
    .app-display-clock { text-align: start; font-size: var(--display-clock-font-size,var(--font-size-sm)); }
    .app-display-clock strong { font-size: var(--display-clock-time-size,clamp(1.75rem,5vw,3.5rem)); }
    .app-display-section-heading { border-block-start: 0; }
  }
  @media (max-width: 35rem) {
    .app-metric-ribbon.is-display { gap: var(--space-3) var(--space-2); }
    .app-metric-ribbon.is-display .app-metric strong { font-size: var(--font-size-xl); }
    .app-metric-ribbon.is-display .app-metric span { font-size: var(--font-size-caption); }
    .app-display-section-heading > span { font-size: var(--font-size-caption); }
  }
  /* Shared civil-date timeline: presentation only; state meaning belongs to owners. */
  .app-timeline-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); }
  .app-timeline-navigation, .app-timeline-legend { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .app-timeline-navigation h2 { margin: 0; font-size: var(--font-size-sm); }
  .app-timeline-legend { font-size: var(--font-size-caption); color: var(--color-text-muted); }
  .app-timeline-legend-item { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
  .app-timeline-symbol { display: inline-flex; align-items: center; justify-content: center; gap: .2em; inline-size: 1.4rem; block-size: 1.4rem; border-radius: var(--radius-control); font-weight: 700; color: var(--color-text); background: var(--color-surface-muted); }
  .app-timeline { --timeline-label-width: 14.5rem; --timeline-day-width: 2.5rem; overflow-x: auto; max-block-size: none; inline-size: 100%; min-inline-size: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); overscroll-behavior-x: contain; overscroll-behavior-y: auto; }
  /* Fill the viewport evenly; colgroup widths keep overflowing periods readable. */
  .app-timeline table { border-collapse: separate; border-spacing: 0; table-layout: fixed; inline-size: max(100%, calc(var(--timeline-label-width) + var(--timeline-day-width) * var(--timeline-date-count))); min-inline-size: 0; color: var(--color-text); font-size: var(--font-size-control); }
  .app-timeline caption { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-timeline-label-column { inline-size: var(--timeline-label-width); }
  .app-timeline-date-column { inline-size: calc((100% - var(--timeline-label-width)) / var(--timeline-date-count)); }
  .app-timeline :is(th,td) { padding: 0; border-block-end: 1px solid var(--color-border); border-inline-end: 1px solid var(--color-border); }
  .app-timeline thead { position: sticky; inset-block-start: 0; z-index: 3; }
  .app-timeline thead th { background: var(--color-surface-muted); }
  .app-timeline-group { block-size: 1.8rem; text-align: center; font-size: var(--font-size-caption); font-weight: 600; }
  .app-timeline-group-label { display: block; padding-inline: var(--space-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-timeline-subgroup { block-size: 1.4rem; text-align: center; font-size: var(--font-size-detail); font-weight: 500; color: var(--color-text-muted); }
  .app-timeline-subgroup .app-timeline-group-label { padding-inline: var(--space-1); }
  .app-timeline-corner, .app-timeline-row-label { position: sticky; inset-inline-start: 0; z-index: 2; inline-size: var(--timeline-label-width); min-inline-size: var(--timeline-label-width); max-inline-size: var(--timeline-label-width); background: var(--color-surface); box-shadow: 2px 0 0 var(--color-border); text-align: start; }
  .app-timeline .app-timeline-corner { z-index: 4; padding-inline: var(--space-3); }
  .app-timeline-row-label a { display: grid; grid-template-columns: 2.8rem minmax(0,1fr); column-gap: var(--space-2); align-items: center; padding: var(--space-2) var(--space-3); text-decoration: none; color: inherit; }
  .app-timeline-row-label small { grid-row: span 2; font-size: var(--font-size-caption); font-weight: 500; color: var(--color-text-muted); font-variant-numeric: tabular-nums; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-timeline-row-label strong, .app-timeline-row-label span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .app-timeline-row-label strong { font-weight: 600; }
  .app-timeline-row-label span { font-size: var(--font-size-detail); font-weight: 400; color: var(--color-text-muted); }
  .app-timeline-date :is(a,.app-timeline-date-action) { display: grid; place-items: center; gap: .1rem; inline-size: 100%; padding-block: var(--space-1); padding-inline: 0; border: 0; background: transparent; font: inherit; color: inherit; text-decoration: none; cursor: pointer; }
  .app-timeline-date span { font-size: var(--font-size-detail); font-weight: 400; color: var(--color-text-muted); }
  .app-timeline-date strong { font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; }
  .app-timeline-cell { background: var(--color-surface); block-size: 3.3rem; }
  .app-timeline .is-weekend { background: var(--color-surface-muted); }
  /* The current-day guide is independent of the owner's selected reporting date. */
  .app-timeline .is-today { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); box-shadow: inset 1px 0 var(--color-accent), inset -1px 0 var(--color-accent); }
  .app-timeline-date.is-today :is(a,.app-timeline-date-action) { color: var(--color-accent); }
  .app-timeline-mark { display: flex; align-items: center; justify-content: center; gap: .2em; block-size: 1.65rem; margin-block: var(--space-2); color: var(--color-text-muted); text-decoration: none; font-size: var(--font-size-caption); font-weight: 600; }
  .app-timeline-indicator.is-error { color: var(--color-danger); font-weight: 800; }
  .app-timeline-mark.is-info, .app-timeline-symbol.is-info { background: color-mix(in srgb, var(--status-color-info) 28%, var(--color-surface)); color: var(--color-text); }
  .app-timeline-mark.is-success, .app-timeline-symbol.is-success { background: color-mix(in srgb, var(--status-color-success) 38%, var(--color-surface)); color: var(--color-text); }
  .app-timeline-mark.is-warning, .app-timeline-symbol.is-warning { background: color-mix(in srgb, var(--status-color-warning) 34%, var(--color-surface)); color: var(--color-text); }
  .app-timeline-mark.is-error, .app-timeline-symbol.is-error { background: var(--color-danger-soft); color: var(--color-danger); }
  .app-timeline-mark.is-range-start { margin-inline-start: var(--space-1); border-start-start-radius: var(--radius-control); border-end-start-radius: var(--radius-control); }
  .app-timeline-mark.is-range-end { margin-inline-end: var(--space-1); border-start-end-radius: var(--radius-control); border-end-end-radius: var(--radius-control); }
  .app-timeline tbody tr:hover :is(td,th) { background-color: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)); }
  .app-timeline :is(a,.app-timeline-mark,.app-timeline-date-action):focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .app-timeline.is-selecting { user-select: none; cursor: crosshair; }
  .app-timeline .app-timeline-cell.is-range-selected { background: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); box-shadow: inset 0 2px var(--color-accent), inset 0 -2px var(--color-accent); }
  .app-timeline .app-timeline-cell.is-selection-start { border-inline-start: 2px solid var(--color-accent); }
  .app-timeline .app-timeline-cell.is-selection-end { border-inline-end: 2px solid var(--color-accent); }
  @media (max-width: 48rem) { .app-timeline { --timeline-label-width: 11rem; --timeline-day-width: 2.375rem; } .app-timeline-row-label a { column-gap: var(--space-1); padding-inline: var(--space-2); grid-template-columns: 2.2rem minmax(0,1fr); } }
  /* NavigationCard: the complete card is one keyboard and touch destination. */
  .app-navigation-card {
    display: flex; flex-direction: column; justify-content: center; gap: var(--space-3);
    min-inline-size: 0; padding: var(--space-5); border: 1px solid var(--color-border);
    border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-text);
    text-decoration: none; overflow-wrap: anywhere;
  }
  .app-navigation-card strong { font-size: var(--font-size-lg); }
  .app-navigation-card span { color: var(--color-text-muted); }
  .app-navigation-card:hover { border-color: var(--color-accent); background: var(--color-surface-muted); }
  .app-navigation-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
}

@layer components {
  .app-table-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); white-space: nowrap; }
  /* One disclosure arrow for navigation menus and select controls. */
  .app-disclosure-arrow {
    display: block;
    flex: none;
    inline-size: var(--disclosure-arrow-size);
    block-size: var(--disclosure-arrow-size);
    border-block-end: var(--disclosure-arrow-stroke) solid currentcolor;
    border-inline-end: var(--disclosure-arrow-stroke) solid currentcolor;
    transform: rotate(45deg) translateY(-.1rem);
    transition: transform 160ms ease;
  }
  [open] > summary > .app-disclosure-arrow,
  [aria-expanded="true"] > .app-disclosure-arrow { transform: rotate(225deg) translate(-.1rem, -.1rem); }
  @media (prefers-reduced-motion: reduce) {
    .app-disclosure-arrow { transition: none; }
  }
  /* Brand mark: shared application identity in the shell and login. */
  .app-brand-mark {
    display: block;
    flex: none;
    inline-size: var(--app-brand-mark-size, 3rem);
    block-size: var(--app-brand-mark-size, 3rem);
    object-fit: contain;
  }

  /* StatusBadge: approved compact label with a filled symbol area and local SVGs. */
  .app-status-badge {
    display: inline-grid;
    grid-template-columns: var(--status-mark-size) minmax(0, 1fr);
    align-items: center;
    inline-size: max-content;
    min-inline-size: min(100%, var(--status-min-width));
    min-block-size: var(--status-height);
    gap: var(--status-gap);
    max-inline-size: 100%;
    padding-inline-end: var(--status-gap);
    border: var(--status-border-width) solid color-mix(in srgb, var(--status-accent, var(--status-color-neutral)) 28%, var(--status-background));
    border-radius: var(--status-radius);
    background: var(--status-background);
    color: var(--status-text-color);
    font-family: var(--font-family-base);
    font-size: var(--status-font-size);
    font-weight: var(--status-font-weight);
    line-height: var(--status-line-height);
    overflow-wrap: anywhere;
    overflow: hidden;
    text-align: center;
    vertical-align: middle;
  }
  .app-status-badge.is-info { --status-accent: var(--status-color-info); }
  .app-status-badge.is-success { --status-accent: var(--status-color-success); }
  .app-status-badge.is-warning { --status-accent: var(--status-color-warning); }
  .app-status-badge.is-error { --status-accent: var(--status-color-error); }
  .app-status-badge:is(.is-info, .is-success, .is-warning) { --status-icon-color: var(--status-bright-icon-color); }
  .app-status-badge.is-plain { --status-icon-color: color-mix(in srgb, var(--status-accent, var(--status-color-neutral)) 65%, var(--color-text)); --status-mark-size: var(--status-icon-size); display: inline-flex; min-inline-size: 0; min-block-size: 0; gap: var(--space-1); padding: 0; border: 0; border-radius: 0; background: transparent; text-align: start; white-space: nowrap; }
  .app-status-badge.is-plain > .app-status-mark { align-self: center; background: transparent; }
  .app-status-mark {
    display: grid;
    place-items: center;
    flex: none;
    align-self: stretch;
    inline-size: var(--status-mark-size);
    min-block-size: var(--status-mark-size);
    background: var(--status-accent, var(--status-color-neutral));
  }
  .app-status-mark::before {
    content: "";
    display: block;
    inline-size: var(--status-icon-size);
    block-size: var(--status-icon-size);
    background: var(--status-icon-color);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
  }
  .app-status-mark.is-pencil-line::before { mask-image: url("../icons/pencil-line.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-search::before { mask-image: url("../icons/search.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-check::before { mask-image: url("../icons/check.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-minus::before { mask-image: url("../icons/minus.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-info::before { mask-image: url("../icons/info.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-warning::before { mask-image: url("../icons/warning.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-alert-circle::before { mask-image: url("../icons/alert-circle.svg?v=lucide-1.17.0"); }
  .app-status-mark.is-coffee::before { mask-image: url("../icons/coffee.svg?v=lucide-1.17.0"); }
}

@layer reset {
  /* Reset */
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  body,
  h1,
  h2,
  h3,
  h4,
  p,
  figure {
    margin: 0;
  }

  button,
  input,
  select,
  textarea {
    font: inherit;
  }
}

@layer tokens {
  /* Colors */
  :root {
    --disclosure-arrow-size: .4rem;
    --disclosure-arrow-stroke: 1.5px;
    --shadow-popover: 0 .375rem 1.125rem color-mix(in srgb, var(--color-text) 15%, transparent);
    --z-popover: 1000;
    --color-surface: #ffffff;
    --color-surface-muted: #f6f7f9;
    --color-border: #d8dde4;
    --color-text: #1f2933;
    --color-text-muted: #5f6b7a;
    --color-accent: #1769aa;
    --color-favorite: #f2b600;
    --color-meter-comparison: #8755dc;
    --color-danger: #b42318;
    --color-warning: #9a6700;
    --color-success: #1a7f37;
    --color-success-soft: #f1f9f3;
    --color-success-soft-border: #9fd3aa;
    --color-danger-soft: #fff4f2;
    --color-danger-soft-border: #e8aaa3;
    --color-warning-soft: #fff9ea;
    --color-warning-soft-border: #e1c878;
    --color-info-soft: #f2f7fc;
    --color-info-soft-border: #a9c9e5;
    --color-tree-guide-blue: #8295ad;
    --color-tree-guide-teal: #78988f;
    --color-tree-guide-violet: #9b8aa8;
  }

  /* Spacing */
  :root {
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --radius-control: 0.25rem;
    --radius-panel: 0.5rem;
    --control-height: 2.5rem;
    --control-height-compact: 2.1rem;
    --thumbnail-landscape-ratio: 1.5;
    --icon-button-touch-size: 4rem;
    --icon-button-touch-icon-size: 2rem;
    --page-header-action-size: 2.5rem;
    --page-header-icon-size: 1.25rem;
    --overlay-content-width: 56rem;
    --overlay-form-width: 44rem;
  }

  /* Typography */
  :root {
    --font-family-base: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-family-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-size-sm: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-title: 1.75rem;
    --font-size-caption: .75rem;
    --font-size-detail: .6875rem;
    --font-size-control: .8125rem;
    --font-size-metric: 1.625rem;
    --font-size-metric-compact: 1.375rem;
    --status-font-size: var(--font-size-caption);
    --status-font-weight: 600;
    --status-line-height: 1.2;
    --status-min-width: 7rem;
    --status-height: 1.5rem;
    /* Keep the approved bright symbol fills identical in every appearance. */
    --status-text-color: #092441;
    --status-background: #ffffff;
    --status-gap: 0;
    --status-border-width: calc(var(--space-1) / 4);
    --status-radius: var(--radius-control);
    --status-mark-size: calc(var(--status-height) - 2 * var(--status-border-width));
    --status-icon-size: .875rem;
    --status-icon-color: #ffffff;
    --status-bright-icon-color: #152234;
    --status-color-neutral: #526984;
    --status-color-info: #82bdff;
    --status-color-success: #76cf9a;
    --status-color-warning: #f7bf5c;
    --status-color-error: var(--color-danger);
    --line-height-base: 1.45;
  }
}

/* Page headline commands have one size, independent of module or button variant. */
@layer overrides {
  .app-button[aria-busy="true"] { color: transparent; }
  /* Status labels beside commands share their target height and icon box. */
  :is(.app-form-section-tools, .app-panel-actions, .app-step-panel-navigation) .app-status-badge {
    --status-height: max(var(--icon-button-size, 2rem), var(--touch-target-min-size, 0px));
    --status-mark-size: calc(var(--status-height) - 2 * var(--status-border-width));
    --status-icon-size: var(--icon-button-icon-size, 1rem);
  }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) .app-status-badge {
    --status-height: var(--header-action-size);
    --status-mark-size: calc(var(--status-height) - 2 * var(--status-border-width));
    --status-icon-size: var(--header-icon-size);
  }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) {
    --header-action-size: max(var(--page-header-action-size), var(--control-height, 2.5rem), var(--touch-target-min-size, 0px));
    --header-icon-size: var(--page-header-icon-size);
  }
  .app-touch :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) { --header-icon-size: var(--icon-button-touch-icon-size, 2rem); }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) :is(.app-button, .app-icon-button) {
    --icon-button-size: var(--header-action-size);
    --icon-button-icon-size: var(--header-icon-size);
    --button-icon-size: var(--header-icon-size);
    box-sizing: border-box;
    block-size: var(--header-action-size);
    min-block-size: var(--header-action-size);
    max-block-size: var(--header-action-size);
    height: var(--header-action-size);
    min-height: var(--header-action-size);
    max-height: var(--header-action-size);
    flex-shrink: 0;
  }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) .app-button { min-inline-size: var(--header-action-size); max-inline-size: 100%; padding: 0 var(--space-3); font-size: var(--font-size-control, .8125rem); line-height: 1.2; }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) .app-icon-button {
    inline-size: var(--header-action-size);
    min-inline-size: var(--header-action-size);
    max-inline-size: var(--header-action-size);
    width: var(--header-action-size);
    min-width: var(--header-action-size);
    max-width: var(--header-action-size);
    flex-basis: var(--header-action-size);
    padding: 0;
  }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) .app-icon-button-slot { min-inline-size: var(--header-action-size); min-block-size: var(--header-action-size); }
  :is(.app-workspace-header, .module-page-header, .app-entry-header-inner, .worker-task-header, .app-viewer-heading, .app-list-panel > header:has(h1), .addresses-panel > header:has(h1), .app-page-heading) select {
    box-sizing: border-box;
    block-size: var(--header-action-size);
    min-block-size: var(--header-action-size);
    max-block-size: var(--header-action-size);
    padding-block: 0;
  }
}

@layer base {
  /* Document */
  html {
    color-scheme: light;
  }

  body {
    background: var(--color-surface-muted);
    color: var(--color-text);
    font-family: var(--font-family-base);
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
  }

  a {
    color: var(--color-accent);
  }
}

@layer components {
  /* Shared single-selection tree. The owning view supplies its container. */
  .app-tree-view { --tree-label-line-height: 1.35; overflow: auto; min-height: 0; overscroll-behavior: contain; }
  .app-tree-view ul { list-style: none; padding: 0; margin: 0; }
  .app-tree-view [role="group"] { margin-inline-start: var(--space-4); }
  .app-tree-view [role="group"][hidden] { display: none; }
  .app-tree-view [role="treeitem"] { outline: none; }
  .app-tree-view-row { display: flex; align-items: center; gap: var(--space-1); min-height: 1.8rem; padding: var(--space-1); border-radius: var(--radius-control); cursor: pointer; user-select: none; }
  .app-tree-view-row:hover { background: color-mix(in srgb, var(--color-accent) 9%, transparent); }
  .app-tree-view [aria-selected="true"] > .app-tree-view-row { background: color-mix(in srgb, var(--color-accent) 17%, transparent); color: var(--color-accent); }
  .app-tree-view [role="treeitem"]:focus-visible > .app-tree-view-row { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .app-tree-view-toggle { display: grid; place-items: center; width: 1rem; height: 1.2rem; flex: 0 0 1rem; }
  .app-tree-view [aria-expanded] > .app-tree-view-row > .app-tree-view-toggle::before { content: ""; width: .35rem; height: .35rem; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
  .app-tree-view [aria-expanded="true"] > .app-tree-view-row > .app-tree-view-toggle::before { transform: rotate(135deg); }
  .app-tree-view-icon { width: 1rem; height: 1rem; flex: 0 0 1rem; }
  .app-tree-view-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-tree-view-row:has(> .app-tree-view-detail) { min-block-size: var(--control-height); gap: var(--space-2); border-block-end: 1px solid var(--color-border); }
  .app-tree-view-row:has(> .app-tree-view-detail) > .app-tree-view-label { flex: 1; white-space: normal; overflow-wrap: anywhere; }
  .app-tree-view-row:has(> .app-tree-view-detail) > .app-tree-view-icon { inline-size: 1.5rem; block-size: 1.5rem; flex-basis: 1.5rem; }
  .app-tree-view-row:has(> .app-tree-view-detail) > .app-tree-view-icon[src$="/cad-part.svg"] { transform: scale(.6); transform-origin: bottom left; }
  .app-tree-view-detail { margin-inline-start: auto; max-inline-size: 40%; flex-shrink: 0; font-weight: 550; text-align: end; overflow-wrap: anywhere; }
  .app-tree-view-actions { display: flex; margin-inline-start: auto; flex-shrink: 0; }
  .app-tree-view[data-action-position="start"] .app-tree-view-actions { margin-inline-start: 0; }
  .app-tree-view-row:has(.app-tree-view-actions) { padding-block: 0; }
  .app-tree-view.has-guides { --tree-indent: var(--space-4); --tree-guide-width: 1.5px; --tree-guide-color: color-mix(in srgb, var(--color-text-muted) 25%, var(--color-border)); }
  .app-tree-view.has-guides [role="group"] { margin-inline-start: var(--tree-indent); }
  .app-tree-view.has-guides [data-tree-guide-tone="0"] { --tree-guide-color: var(--color-tree-guide-blue); }
  .app-tree-view.has-guides [data-tree-guide-tone="1"] { --tree-guide-color: var(--color-tree-guide-teal); }
  .app-tree-view.has-guides [data-tree-guide-tone="2"] { --tree-guide-color: var(--color-tree-guide-violet); }
  .app-tree-view.has-guides [role="group"] > [role="treeitem"],
  .app-tree-view.has-guides [role="group"] > [role="treeitem"] > .app-tree-view-row { position: relative; }
  .app-tree-view.has-guides [role="group"] > [role="treeitem"]:not(:last-child)::before,
  .app-tree-view.has-guides [role="group"] > [role="treeitem"]:last-child > .app-tree-view-row::after { content: ""; position: absolute; inset-inline-start: calc(var(--tree-indent) / -2); inset-block-start: 0; border-inline-start: var(--tree-guide-width) solid var(--tree-guide-color); pointer-events: none; }
  .app-tree-view.has-guides [role="group"] > [role="treeitem"]:not(:last-child)::before { inset-block-end: 0; }
  .app-tree-view.has-guides [role="group"] > [role="treeitem"]:last-child > .app-tree-view-row::after { block-size: 50%; }
  .app-tree-view.has-guides [role="group"] > [role="treeitem"] > .app-tree-view-row::before { content: ""; position: absolute; inset-inline-start: calc(var(--tree-indent) / -2); inset-block-start: 50%; inline-size: calc(var(--tree-indent) / 2 + var(--space-1)); border-block-start: var(--tree-guide-width) solid var(--tree-guide-color); pointer-events: none; }
  .app-tree-view.has-guides .app-tree-view-row { padding-block: var(--space-2); border-block-end: 0; border-radius: 0; }
  .app-tree-workspace { display: grid; grid-template-columns: minmax(15rem,19rem) minmax(0,1fr); align-items: start; gap: var(--space-5); min-inline-size: 0; }
  .app-tree-workspace-navigation { position: sticky; inset-block-start: var(--tree-workspace-top,6.5rem); min-inline-size: 0; border-inline-end: 1px solid var(--color-border); padding-inline-end: var(--space-4); }
  .app-tree-workspace-content { min-inline-size: 0; }
  .app-tree-workspace-navigation .app-tree-view { max-block-size: min(32rem,55dvh); overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .app-tree-workspace-navigation .app-tree-view-label { min-inline-size: 0; }
  .app-tree-workspace-navigation .app-tree-view-icon { flex-shrink: 0; }
  .app-tree-workspace-path { max-block-size: 9rem; overflow: auto; font-size: var(--font-size-caption); color: var(--color-text-muted); }
  .app-tree-workspace-path ol { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; padding: 0; margin: 0; }
  .app-tree-workspace-path li { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-tree-workspace-path li + li::before { content: '›'; margin-inline-end: var(--space-1); }
  .app-tree-workspace-path [aria-current="page"] { font-weight: 600; color: var(--color-text); }
  @media (max-width: 56rem) {
    .app-tree-workspace { grid-template-columns: minmax(0,1fr); }
    .app-tree-workspace-navigation { position: static; border-inline-end: 0; padding-inline-end: 0; border-block-end: 1px solid var(--color-border); padding-block-end: var(--space-3); }
    .app-tree-workspace-navigation .app-tree-view { max-block-size: 16rem; }
  }

  .app-tree-view-label.has-description { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: var(--space-2); line-height: var(--tree-label-line-height); white-space: normal; overflow-wrap: anywhere; }
  .app-tree-view-label.has-description:has(> .app-tree-view-prefix) { grid-template-columns: max-content minmax(0, 1fr); }
  .app-tree-view-prefix { grid-column: 1; grid-row: 1 / span 2; align-self: center; min-inline-size: 2ch; color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 400; font-variant-numeric: tabular-nums; }
  .app-tree-view-title { min-inline-size: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
  .app-tree-view-description { min-inline-size: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 400; }
  .app-tree-view-prefix ~ :is(.app-tree-view-title, .app-tree-view-description) { grid-column: 2; }
  .app-tree-view.has-guides :where([role="tree"] > [role="treeitem"]) > .app-tree-view-row { background: var(--color-surface-muted); }
  .app-tree-view.has-guides [aria-selected="true"] > .app-tree-view-row,
  .app-tree-view.has-guides .app-tree-view-row:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
  .app-tree-view.has-guides [aria-expanded] > .app-tree-view-row .app-tree-view-description { color: var(--color-text); }
  .app-tree-view.has-guides .app-tree-view-icon[src$="/cad-part.svg"] { transform-origin: center; }
  .app-tree-view.has-guides .app-tree-view-detail { font-weight: 500; }
  .app-tree-view-thumbnail { --tree-thumbnail-height: calc((1em + var(--font-size-sm)) * var(--tree-label-line-height, 1.35)); --tree-thumbnail-width: calc(var(--tree-thumbnail-height) * var(--thumbnail-landscape-ratio)); position: relative; display: inline-flex; align-items: center; justify-content: center; inline-size: var(--tree-thumbnail-width); block-size: var(--tree-thumbnail-height); flex: 0 0 var(--tree-thumbnail-width); }
  .app-tree-view-thumbnail > .app-tree-view-photo { inline-size: 100%; block-size: 100%; object-fit: contain; }
  .app-tree-view-thumbnail > .app-tree-view-icon { inline-size: 1.5rem; block-size: 1.5rem; flex-basis: 1.5rem; object-fit: contain; }
  .app-tree-view-thumbnail > .app-tree-view-icon[src$="/cad-part.svg"] { transform: scale(.6); }
  .app-tree-view-thumbnail.has-photo > .app-tree-view-icon { position: absolute; inset-block-end: 0; inset-inline-end: 0; inline-size: 1rem; block-size: 1rem; background: transparent; }
  .app-tree-view-thumbnail.has-photo > .app-tree-view-icon[src$="/cad-part.svg"] { transform-origin: bottom right; }
  /* Hierarchical DataTable: one real identity column with unchanged aligned value columns. */
  .app-tree-table { --tree-table-indent: 1.25rem; --tree-table-control: 1.5rem; --tree-table-guide: var(--color-tree-guide-blue); min-inline-size: 0; }
  .app-tree-table-tools { display: flex; justify-content: flex-end; gap: var(--space-1); padding-block-end: var(--space-2); }
  .app-tree-table-tools:has(> [hidden]):not(:has(> :not([hidden]))) { display: none; }
  .app-tree-table .app-data-table tbody td:first-child { position: relative; padding-block: 0; }
  .app-tree-table .app-data-table tbody tr[hidden] { display: none; }
  .app-tree-cell { display: flex; align-items: flex-start; gap: var(--space-1); min-block-size: var(--tree-table-control); padding-block: var(--space-2); }
  .app-tree-cell > .is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-tree-cell-indent { flex: 0 0 calc(var(--tree-depth) * var(--tree-table-indent)); inline-size: calc(var(--tree-depth) * var(--tree-table-indent)); }
  .app-tree-cell-toggle { display: flex; justify-content: center; flex: 0 0 var(--tree-table-control); inline-size: var(--tree-table-control); }
  .app-tree-cell-toggle > .app-icon-button { inline-size: var(--tree-table-control); block-size: var(--tree-table-control); min-block-size: 0; padding: var(--space-1); }
  .app-tree-cell-toggle [aria-expanded="false"] > .app-icon-button-icon { transform: rotate(-90deg); }
  .app-tree-cell-artwork { display: inline-flex; justify-content: center; align-items: center; flex: 0 0 1.5rem; inline-size: 1.5rem; block-size: 1.5rem; }
  .app-tree-cell-artwork > .app-pictogram { inline-size: 1.5rem; block-size: 1.5rem; object-fit: contain; }
  .app-tree-cell-artwork.is-cad-part > .app-pictogram { transform: scale(.65); }
  .app-tree-cell-position { flex: 0 0 4ch; inline-size: 4ch; overflow-wrap: anywhere; color: var(--color-text-muted); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; padding-block-start: .2rem; }
  .app-tree-cell-content { min-inline-size: 0; overflow-wrap: anywhere; padding-block-start: .1rem; }
  .app-tree-cell-guide { position: absolute; inset-inline-start: calc(var(--space-3) + (var(--tree-level) - 1) * var(--tree-table-indent) + var(--space-1) + var(--tree-table-control) / 2); inset-block: 0; border-inline-start: 1px solid var(--tree-table-guide); pointer-events: none; }
  .app-tree-cell-guide:is(.is-branch,.is-last)::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: calc(var(--space-2) + var(--tree-table-control) / 2); inline-size: var(--tree-table-indent); border-block-start: 1px solid var(--tree-table-guide); }
  .app-tree-cell-guide.is-last { block-size: calc(var(--space-2) + var(--tree-table-control) / 2); inset-block-end: auto; }
  .app-tree-cell-guide.is-last::after { inset-block-start: auto; inset-block-end: 0; }
  .app-tree-cell.is-continuation { padding-block: var(--space-1); }

  /* Loading indicator */
  .app-loading-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .app-loading-indicator[hidden] {
    display: none;
  }

  .app-loading-spinner,
  .app-button[aria-busy="true"]::before,
  .app-icon-button[aria-busy="true"]::after {
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    inline-size: 1rem;
    block-size: 1rem;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: app-loading-spin 700ms linear infinite;
  }

  .app-loading-spinner {
    inline-size: 1.25rem;
    block-size: 1.25rem;
    color: var(--color-accent);
  }

  .app-icon-button[aria-busy="true"] {
    position: relative;
  }

  /* Loading replaces the visual label without changing the control's geometry. */
  .app-button[aria-busy="true"] { position: relative; color: transparent; }
  .app-button[aria-busy="true"] > * { visibility: hidden; }
  .app-button[aria-busy="true"]::before {
    position: absolute;
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    color: var(--color-text);
  }
  .app-button.is-primary[aria-busy="true"]::before { color: var(--color-surface); }
  .app-button.is-danger[aria-busy="true"]::before { color: var(--color-danger); }
  .app-icon-button[aria-busy="true"] :is(.app-icon-button-icon, .app-pictogram) {
    visibility: hidden;
  }

  .app-icon-button[aria-busy="true"]::after {
    position: absolute;
    inline-size: var(--icon-button-icon-size, 1rem);
    block-size: var(--icon-button-icon-size, 1rem);
  }

  .app-overlay-body > .app-loading-indicator {
    position: absolute;
    inset: 0;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    z-index: 1;
    background: var(--color-surface);
  }

  .app-overlay-body > .app-loading-indicator .app-loading-spinner {
    inline-size: 3rem;
    block-size: 3rem;
    border-width: 3px;
  }

  /* Meter: green-to-blue capacity scale with an explicit current position. */
  .app-meter {
    position: relative;
    min-inline-size: 0;
    padding-block-start: 1.75rem;
    padding-inline: var(--space-1);
  }

  .app-meter-native {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
  }

  .app-meter-label {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: clamp(0px, calc(var(--meter-position) - 2.5rem), calc(100% - 5rem));
    inline-size: 5rem;
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 600;
    text-align: center;
    white-space: nowrap;
  }

  .app-meter-track {
    position: relative;
    display: block;
    block-size: .75rem;
    border-radius: var(--radius-control);
    background: linear-gradient(to right, var(--color-success-soft-border), var(--color-accent));
  }

  .app-meter-marker {
    position: absolute;
    inset-inline-start: var(--meter-position);
    inset-block-start: 50%;
    inline-size: .25rem;
    block-size: 1.25rem;
    border-radius: var(--radius-control);
    background: var(--color-text);
    outline: 2px solid var(--color-surface);
    transform: translate(-50%, -50%);
  }

  .app-meter.is-bar { padding: 0; }
  .app-meter.is-bar .app-meter-track { box-sizing: border-box; block-size: 1.375rem; padding: 3px; border: 1px solid var(--color-border); background: var(--workspace-muted-fill, var(--color-surface-muted)); }
  .app-meter.is-bar .app-meter-marker { position: static; display: block; inline-size: var(--meter-position); block-size: 100%; background: var(--color-accent); outline: 0; transform: none; }
  .app-meter.is-bar:not(.without-value) { padding-block-start: 1.75rem; }
  .app-meter-axis { display: flex; justify-content: space-between; gap: var(--space-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .app-meter.has-comparison:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-meter-comparison-fill { position: absolute; inset-inline-start: 3px; inset-block: 3px; inline-size: calc((100% - 6px) * var(--meter-comparison-ratio)); border-radius: var(--radius-control); background: var(--color-meter-comparison); }
  .app-meter.is-bar.has-comparison .app-meter-marker:hover,
  .app-meter.is-bar.has-comparison:focus-visible .app-meter-marker { box-shadow: 0 0 6px 2px color-mix(in srgb, var(--color-accent) 60%, transparent); }
  .app-meter-comparison-fill:hover,
  .app-meter.has-comparison:focus-visible .app-meter-comparison-fill { box-shadow: 0 0 6px 2px color-mix(in srgb, var(--color-meter-comparison) 60%, transparent); }
  .app-quantity-comparison { min-inline-size: 0; }
  .app-quantity-comparison .app-data-table { table-layout: fixed; }
  .app-quantity-comparison .app-data-table col:first-child { inline-size: 14rem; }
  .app-quantity-comparison .app-data-table col:last-child { inline-size: 7rem; }
  .app-quantity-comparison .app-data-table :is(th, td):last-child { text-align: end; }
  .app-quantity-comparison .app-data-table td:nth-child(2) > .app-data-table-cell-content { display: grid; align-items: center; min-block-size: 1.375rem; }
  .app-procedure-capacity-pool + .app-procedure-capacity-pool { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  .app-procedure-capacity-pool > .app-disclosure { margin-block-start: var(--space-3); border-radius: 0; }


  @media (forced-colors: active) {
    .app-meter-track { background: Canvas; border: 1px solid CanvasText; }
    .app-meter-marker { background: CanvasText; outline-color: Canvas; }
    .app-meter.is-bar .app-meter-track { background: Canvas; border-color: CanvasText; }
    .app-meter.is-bar .app-meter-marker { background: Highlight; }
    .app-meter-comparison-fill { background: CanvasText; outline: 1px solid Canvas; forced-color-adjust: none; }
  }

  /* Wizard progress */
  .app-button[hidden] {
    display: none;
  }

  .app-wizard-progress {
    display: flex;
    isolation: isolate;
    margin: 0;
    padding: var(--space-1);
    list-style: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-muted);
  }

  .app-wizard-step {
    --wizard-line-start: var(--color-border);
    --wizard-line-end: var(--color-border);
    position: relative;
    flex: 1 1 0;
    min-inline-size: 0;
  }

  .app-wizard-step:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 1;
    inset-block-start: calc(var(--space-3) + 1rem);
    inset-inline-start: 50%;
    inline-size: 100%;
    block-size: 3px;
    background: linear-gradient(to right, var(--wizard-line-start), var(--wizard-line-end));
    pointer-events: none;
  }

  .app-wizard-step[data-state="complete"] {
    --wizard-line-start: var(--color-success-soft-border);
  }

  .app-wizard-step[data-state="current"] {
    --wizard-line-start: var(--color-accent);
  }

  .app-wizard-step:has(+ .app-wizard-step[data-state="complete"]) {
    --wizard-line-end: var(--color-success-soft-border);
  }

  .app-wizard-step:has(+ .app-wizard-step[data-state="current"]) {
    --wizard-line-end: var(--color-accent);
  }

  .app-wizard-step-button,
  .app-wizard-step-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    inline-size: 100%;
    block-size: 100%;
    min-block-size: 6rem;
    margin: 0;
    padding: var(--space-3);
    border: 1px solid transparent;
    border-radius: var(--radius-control);
    background: transparent;
    color: var(--color-text-muted);
    text-align: center;
    font-size: var(--font-size-sm);
  }

  .app-wizard-step-button:not(:disabled) { cursor: pointer; }
  .app-wizard-step-button:not(:disabled):hover { background: var(--color-info-soft); }
  .app-wizard-step-button:disabled { cursor: default; }
  .app-wizard-step-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  .app-wizard-step-marker {
    position: relative;
    z-index: 2;
    display: grid;
    place-items: center;
    flex: 0 0 2rem;
    inline-size: 2rem;
    block-size: 2rem;
    border: 1px solid var(--color-border);
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: 0 0 0 var(--space-1) var(--color-surface-muted);
    font-weight: 600;
  }

  .app-wizard-step-label {
    overflow-wrap: anywhere;
    font-weight: 600;
  }

  .app-wizard-step-copy {
    position: relative;
    z-index: 2;
    display: grid;
    gap: var(--space-1);
    min-inline-size: 0;
  }

  .app-wizard-step-description {
    font-size: .75rem;
    color: var(--color-text-muted);
    line-height: 1.3;
  }

  .app-wizard-step[aria-current="step"] > :first-child {
    color: var(--color-accent);
    border-color: var(--color-info-soft-border);
    background: var(--color-surface);
  }

  .app-wizard-step[aria-current="step"] .app-wizard-step-marker {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-surface);
  }

  .app-wizard-step[data-state="complete"] .app-wizard-step-marker {
    color: var(--color-success);
    border-color: var(--color-success-soft-border);
    background: var(--color-success-soft);
  }

  .app-wizard-step[data-state="recheck"] .app-wizard-step-marker {
    color: var(--color-warning);
    border-color: var(--color-warning-soft-border);
    background: var(--color-warning-soft);
  }

  .app-wizard-step-status {
    color: var(--color-warning);
    font-size: .75rem;
  }

  .app-wizard-step-status[hidden] {
    display: none;
  }

  .app-wizard-progress.is-navigation :is(.app-wizard-step-button,.app-wizard-step-content) { min-block-size: 4.75rem; padding: var(--space-2); text-decoration: none; }
  .app-wizard-progress.is-navigation .app-wizard-step[aria-current="step"] > :first-child { border-color: transparent; background: transparent; }
  .app-wizard-progress.is-navigation .app-wizard-step[data-selected="true"] > :first-child { border-color: var(--color-info-soft-border); background: var(--color-surface); }
  .app-wizard-page-actions { position: sticky; inset-block-start: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2); min-block-size: 4rem; padding: var(--space-3) 0; border-block-end: 1px solid var(--color-border); background: var(--color-surface); }
  .app-wizard-page-actions > .app-form-section-actions:last-child { margin-inline-start: auto; }
  .app-wizard-page-counter { color: var(--color-text-muted); font-size: var(--font-size-sm); }
  @media(max-width:700px) {
    .app-wizard-progress.is-navigation { position: relative; padding-block-end: 2.25rem; }
    .app-wizard-progress.is-navigation :is(.app-wizard-step-button,.app-wizard-step-content) { position: static; min-block-size: 2.75rem; padding-inline: 0; border: 0; }
    .app-wizard-progress.is-navigation .app-wizard-step-copy { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
    .app-wizard-progress.is-navigation .app-wizard-step[data-selected="true"] .app-wizard-step-copy { inset-inline: var(--space-2); inset-block-end: var(--space-2); inline-size: auto; block-size: auto; clip-path: none; text-align: center; overflow: visible; }
    .app-wizard-progress.is-navigation .app-wizard-step { position: static; }
    .app-wizard-progress.is-navigation .app-wizard-step-marker { flex-basis: 1.75rem; inline-size: 1.75rem; block-size: 1.75rem; }
    .app-wizard-progress.is-navigation .app-wizard-step:not(:last-child)::after { display: none; }
    .app-wizard-progress.is-navigation .app-wizard-step[data-selected="true"] > :first-child { background: transparent; }
    .app-wizard-page-actions { gap: var(--space-2); }
    .app-wizard-page-counter { flex: 1 1 auto; text-align: end; }
    .app-wizard-page-actions > .app-form-section-actions { flex: 1 1 100%; }
    .app-wizard-page-actions > .app-form-section-actions > .app-button { flex: 1; }
  }

  @media (max-width: 700px) {
    .app-wizard-step-button,
    .app-wizard-step-content { padding-inline: var(--space-1); }
    .app-wizard-step-description { display: none; }
    .app-wizard-step-label { font-size: .75rem; }
    .app-wizard-progress.is-responsive { flex-direction: column; }
    .app-wizard-progress.is-responsive .app-wizard-step { flex: 0 0 auto; }
    .app-wizard-progress.is-responsive .app-wizard-step > :is(.app-wizard-step-content,.app-wizard-step-button) {
      flex-direction: row;
      justify-content: flex-start;
      gap: var(--space-3);
      min-block-size: 3.5rem;
      padding: var(--space-2) var(--space-3);
      text-align: start;
    }
    .app-wizard-progress.is-responsive .app-wizard-step:not(:last-child)::after {
      inset-block-start: calc(50% + 1rem);
      inset-inline-start: calc(var(--space-3) + 1rem);
      inline-size: 3px;
      block-size: calc(100% - 2rem);
      background: linear-gradient(to bottom, var(--wizard-line-start), var(--wizard-line-end));
    }
    .app-wizard-progress.is-responsive .app-wizard-step-label { font-size: var(--font-size-sm); overflow-wrap: normal; }
  }

  @keyframes app-loading-spin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    .app-loading-spinner,
    .app-button[aria-busy="true"]::before,
    .app-icon-button[aria-busy="true"]::after {
      animation: none;
    }
  }

  /* Image tooltip */
  .app-image-tooltip-trigger {
    display: inline-flex;
    flex: 0 0 1rem;
    inline-size: 1rem;
    block-size: 1rem;
    border-radius: var(--radius-control);
    cursor: default;
  }

  .app-image-tooltip-trigger > img:not(.app-table-thumbnail) {
    inline-size: 100%;
    block-size: 100%;
    object-fit: contain;
  }

  .app-image-tooltip-trigger:has(> .app-table-thumbnail) {
    position: relative;
    inline-size: auto;
    block-size: auto;
    flex-basis: auto;
  }

  .app-image-tooltip-trigger[data-app-image-toggle] {
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
  }
  .app-image-tooltip-trigger[data-app-image-toggle]:disabled { cursor: wait; }
  .app-image-tooltip-trigger.is-suppressed > .app-table-thumbnail { opacity: .35; }
  .app-image-tooltip-indicator { position: absolute; inset-inline-end: 0; inset-block-end: 0; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text-muted); pointer-events: none; }
  .app-image-tooltip-indicator[hidden] { display: none; }
  .app-image-tooltip-indicator::before { content: ""; inline-size: 1rem; block-size: 1rem; background: currentColor; mask: url("../icons/eye-off.svg") center / contain no-repeat; }

  .app-image-tooltip-trigger:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .app-image-tooltip {
    position: fixed;
    inset: auto;
    z-index: 10;
    margin: 0;
    padding: var(--space-1);
    inline-size: fit-content;
    max-inline-size: calc(100vw - 1rem);
    max-block-size: calc(100vh - 1rem);
    overflow: auto;
    color: var(--color-text);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    font-size: var(--font-size-sm);
    white-space: normal;
  }

  .app-image-tooltip > img {
    display: block;
    border-radius: var(--radius-panel);
    inline-size: min(16rem, calc(100vw - 2rem));
    block-size: auto;
    object-fit: contain;
    max-inline-size: min(16rem, calc(100vw - 2rem));
    max-block-size: min(16rem, calc(100vh - 2rem));
  }

  .app-image-tooltip [hidden] {
    display: none;
  }

  /* Button */
  .app-button {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    text-decoration: none;
    white-space: nowrap;
  }

  .app-button:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .app-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .app-button.is-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
  }

  .app-button.is-primary:hover:not(:disabled) {
    background: #125b95;
    border-color: #125b95;
    color: #fff;
  }

  .app-button.is-danger {
    border-color: var(--color-danger);
    color: var(--color-danger);
  }

  .app-button:disabled {
    cursor: default;
    opacity: 0.55;
  }
  .app-button.has-icon { gap: var(--space-2); }
  .app-button-pictograms { --pictogram-size:1.25rem; display:inline-flex; align-items:center; justify-content:center; gap:var(--space-1); flex:none; }
  .app-button.has-icon > span { white-space: normal; text-align: center; }
  .app-touch .app-button.has-icon { flex-direction: column; gap: var(--space-1); }
  .app-animated-icon { display: block; flex: none; inline-size: var(--button-icon-size); block-size: auto; }
  .app-static-icon { display: block; flex: none; inline-size: var(--button-icon-size, 1.5rem); block-size: var(--button-icon-size, 1.5rem); background-color: currentColor; -webkit-mask: var(--app-icon-source) center / contain no-repeat; mask: var(--app-icon-source) center / contain no-repeat; }
  .app-reference-link { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: 1.375rem; padding: .125rem var(--space-2); border: 1px solid color-mix(in srgb,var(--color-accent) 18%,transparent); border-radius: var(--radius-control); color: var(--color-accent); background: color-mix(in srgb,var(--color-accent) 6%,var(--color-surface)); font-size: var(--font-size-caption); font-weight: 550; line-height: 1.2; white-space: nowrap; text-decoration: none; }
  .app-reference-link > .app-static-icon { --button-icon-size: 1rem; }
  .app-reference-link:hover { border-color: color-mix(in srgb,var(--color-accent) 35%,transparent); background: color-mix(in srgb,var(--color-accent) 11%,var(--color-surface)); text-decoration: none; }
  .app-reference-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-reference-link.has-detail { display: inline-grid; grid-template-columns: 1.125rem max-content minmax(0, 1fr) .875rem; box-sizing: border-box; inline-size: min(100%, 16rem); min-inline-size: 0; max-inline-size: 100%; min-block-size: 2.75rem; gap: var(--space-2); padding: var(--space-3); border: 0; border-inline-start: 3px solid var(--color-accent); border-radius: 0; background: transparent; color: var(--color-text); white-space: normal; text-align: start; }
  .app-reference-link-artwork { --button-icon-size: 1.125rem; display: grid; place-items: center; inline-size: 1.125rem; block-size: 1.125rem; color: var(--color-text); }
  .app-reference-link-copy { display: contents; }
  .app-reference-link-label { color: var(--color-text); font-size: var(--font-size-caption); font-weight: 400; line-height: 1.25; }
  .app-reference-link-detail { justify-self: end; min-inline-size: 0; color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 600; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
  .app-reference-link-open { --icon-button-icon-size: .875rem; display: grid; place-items: center; inline-size: .875rem; color: var(--color-accent); }
  .app-reference-link.has-detail:hover { border-inline-start-color: var(--color-accent); background: transparent; }
  .app-reference-link.has-detail.is-compact { grid-template-columns: .875rem minmax(0, 1fr) .75rem; gap: var(--space-1); padding: var(--space-1); }
  .app-reference-link.has-detail.is-compact .app-reference-link-copy { display: grid; gap: calc(var(--space-1) / 2); min-inline-size: 0; }
  .app-reference-link.has-detail.is-compact .app-reference-link-detail { justify-self: start; }
  .app-reference-link.has-detail.is-compact .app-reference-link-artwork { --button-icon-size: .875rem; inline-size: .875rem; block-size: .875rem; }
  .app-reference-link.has-detail.is-compact .app-reference-link-open { --icon-button-icon-size: .75rem; inline-size: .75rem; }
  .app-table-reference { display: grid; gap: var(--space-1); justify-items: start; min-inline-size: 0; max-inline-size: 100%; }
  .app-table-reference-kind { color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.35; overflow-wrap: anywhere; }
  .app-table-reference > .app-record-identity { inline-size: 100%; }
  .app-table-reference > .app-record-identity:not(.has-media) { grid-template-columns: minmax(0, 1fr); }
  .app-table-reference .app-record-identity-notice:empty { display: none; }
  .app-table-reference .app-record-identity-copy { display: grid; gap: calc(var(--space-1) / 2); justify-items: start; }
  .app-table-reference .app-record-identity-media { color: var(--color-accent); }
  .app-table-reference .app-record-identity-media > .app-static-icon { --button-icon-size: 1.25rem; }
  .app-record-index { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 1.25rem; min-block-size: 1.25rem; padding-inline: var(--space-1); border-radius: var(--radius-control); color: var(--color-text-muted); background: var(--color-surface-muted); font-size: var(--font-size-caption); font-weight: 600; line-height: 1.2; }
  .app-record-index > .is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }

  /* Audit log */
  .app-audit-log-scroll {
    overflow-x: auto;
  }

  .app-audit-log-table {
    border-collapse: collapse;
    width: 100%;
  }

  .app-audit-log-table caption.is-visually-hidden {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .app-audit-log-table th,
  .app-audit-log-table td {
    border-block-end: 1px solid var(--color-border);
    padding: var(--space-3) var(--space-4);
    text-align: start;
  }

  .app-audit-log-table th {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .app-audit-log-table tbody tr {
    border-inline-start: 0.2rem solid transparent;
  }

  .app-audit-log-table tbody tr:last-child td {
    border-block-end: 0;
  }

  .app-audit-log-table tbody tr.is-success {
    background: var(--color-success-soft);
    border-inline-start-color: var(--color-success-soft-border);
  }

  .app-audit-log-table tbody tr.is-error {
    background: var(--color-danger-soft);
    border-inline-start-color: var(--color-danger-soft-border);
  }

  .app-audit-log-table tbody tr.is-warning {
    background: var(--color-warning-soft);
    border-inline-start-color: var(--color-warning-soft-border);
  }

  .app-audit-log-table tbody tr.is-info {
    background: var(--color-info-soft);
    border-inline-start-color: var(--color-info-soft-border);
  }

  .app-audit-log-table tbody tr.is-neutral {
    background: var(--color-surface);
  }

  .app-audit-log-table .is-time {
    width: 12rem;
  }

  .app-audit-log-table .is-source {
    width: 11rem;
  }

  .app-audit-log-table :is(th,td).is-actions { text-align: end; white-space: nowrap; }
  .app-audit-log.is-responsive { container: audit-log / inline-size; }
  @container audit-log (max-width: 42rem) {
    .app-audit-log-scroll { overflow: visible; }
    .app-audit-log-table, .app-audit-log-table tbody, .app-audit-log-table tr { display: block; inline-size: 100%; }
    .app-audit-log-table thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
    .app-audit-log-table tbody tr { padding: var(--space-3); border-block-end: 1px solid var(--color-border); }
    .app-audit-log-table td { display: grid; grid-template-columns: minmax(6.5rem,.6fr) minmax(0,1fr); gap: var(--space-2); inline-size: auto; padding: var(--space-1) 0; border: 0; overflow-wrap: anywhere; }
    .app-audit-log-table td::before { content: attr(data-label); color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 600; }
    .app-audit-log-table td.is-actions { display: flex; justify-content: flex-end; }
    .app-audit-log-table td.is-actions::before { display: none; }
  }

  .app-audit-log-empty {
    color: var(--color-text-muted);
    padding: var(--space-4);
  }

  /* Overlay and icon button */
  .app-icon-button[hidden] { display: none; }
  .app-icon-button {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex;
    flex: 0 0 var(--icon-button-size, 2rem);
    height: var(--icon-button-size, 2rem);
    justify-content: center;
    min-width: var(--icon-button-size, 2rem);
    padding: 0;
    text-decoration: none;
    width: var(--icon-button-size, 2rem);
  }

  .app-icon-button.is-large {
    --icon-button-size: max(var(--control-height, 2.5rem), var(--touch-target-min-size, 0px));
    --icon-button-icon-size: 2rem;
  }

  .app-icon-button:hover,
  .app-icon-button[aria-expanded="true"] {
    background: var(--color-surface-muted);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .app-icon-button.is-accent {
    color: var(--color-accent);
  }

  .app-icon-button.is-soft {
    background: var(--color-info-soft);
    border-color: var(--color-info-soft-border);
    color: var(--color-accent);
  }

  .app-icon-button.is-soft:hover:not(:disabled),
  .app-icon-button.is-soft[aria-expanded="true"] {
    background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
    border-color: var(--color-accent);
  }

  .app-icon-button.is-primary {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
  }

  .app-icon-button.is-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
    border-color: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
    color: #fff;
  }

  .app-icon-button.is-danger {
    background: var(--color-danger-soft);
    border-color: var(--color-danger-soft-border);
    color: var(--color-danger);
  }

  .app-icon-button.is-danger:hover:not(:disabled) {
    border-color: var(--color-danger);
    color: var(--color-danger);
  }

  .app-icon-button:disabled {
    cursor: default;
    opacity: 0.55;
  }

  .app-icon-button:not(.is-ghost)[aria-pressed="true"] {
    background: var(--color-info-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .app-icon-button.is-ghost {
    background: transparent;
    border-color: transparent;
  }

  .app-icon-button.is-ghost:hover {
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  }

  .app-icon-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .app-icon-button-icon {
    background: currentcolor;
    display: block;
    flex-shrink: 0;
    height: var(--icon-button-icon-size, 1rem);
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: var(--icon-button-icon-size, 1rem);
  }
  .app-icon-button > .app-pictogram { --pictogram-size: var(--icon-button-icon-size, 1rem); }
  .app-icon-button:has(> .app-icon-button-state) { position: relative; }
  .app-icon-button-state { --icon-button-icon-size: .625rem; position: absolute; inset-inline-end: 0; inset-block-start: 0; display: grid; place-items: center; inline-size: .75rem; block-size: .75rem; background: transparent; color: var(--color-text); pointer-events: none; }

  /* A centered icon box keeps disclosure buttons balanced in both states. */
  .app-icon-button > .app-disclosure-arrow,
  .app-disclosure.is-prominent > summary > .app-disclosure-arrow {
    inline-size: var(--icon-button-icon-size, 1rem);
    block-size: var(--icon-button-icon-size, 1rem);
    border: 0;
    background-color: currentcolor;
    -webkit-mask: url("../icons/chevron-down.svg") center / contain no-repeat;
    mask: url("../icons/chevron-down.svg") center / contain no-repeat;
    transform: rotate(0deg);
  }
  [open] > summary.app-icon-button > .app-disclosure-arrow,
  .app-icon-button[aria-expanded="true"] > .app-disclosure-arrow,
  .app-disclosure.is-prominent[open] > summary > .app-disclosure-arrow { transform: rotate(180deg); }

  .app-icon-button-icon.is-edit {
    mask-image: url("../icons/pencil-line.svg?v=lucide-1.17.0");
  }
  .app-icon-button-icon.is-child-add { mask-image: url("../icons/child-add.svg"); }
  .app-icon-button-icon.is-branch { mask-image: url("../icons/branch.svg"); }

  .app-icon-button-icon:is(.is-cad-part, .is-cad-assembly, .is-assembly-add, .is-operation-add, .is-inspection-add) {
    width: var(--icon-button-icon-size, 1rem);
    height: var(--icon-button-icon-size, 1rem);
    background: var(--icon-artwork) center / contain no-repeat;
    -webkit-mask: none;
    mask: none;
  }
  .app-icon-button-icon.is-cad-part { --icon-artwork: url("../icons/cad-part.svg"); }
  .app-icon-button-icon.is-cad-assembly { --icon-artwork: url("../icons/cad-assembly.svg"); }
  .app-icon-button-icon.is-assembly-add { --icon-artwork: url("../icons/cad-assembly-add.svg?v=b92b3953f436"); }
  .app-icon-button-icon.is-operation-add { --icon-artwork: url("../icons/operation-add.svg"); }
  .app-icon-button-icon.is-inspection-add { --icon-artwork: url("../icons/inspection-add.svg?v=857ca1f6a545"); }

  .app-icon-button-icon.is-save {
    mask-image: url("../icons/save.svg");
  }

  .app-icon-button-icon:is(.is-product-review, .is-product-release, .is-product-return-edit) {
    width: var(--icon-button-icon-size, 1rem);
    height: var(--icon-button-icon-size, 1rem);
  }
  .app-icon-button-icon.is-product-review { mask-image: url("../icons/product-review.svg"); }
  .app-icon-button-icon.is-product-release { mask-image: url("../icons/product-release.svg"); }
  .app-icon-button-icon.is-product-return-edit { mask-image: url("../icons/product-return-edit.svg"); }

  .app-icon-button-icon.is-settings {
    -webkit-mask-image: url("../icons/settings.svg");
    mask-image: url("../icons/settings.svg");
  }

  .app-icon-button-icon.is-ruler {
    mask-image: url("../icons/ruler.svg");
  }

  .app-icon-button-icon.is-camera {
    mask-image: url("../icons/camera.svg");
  }

  .app-icon-button-icon.is-expand {
    mask-image: url("../icons/expand.svg");
  }
  .app-icon-button-icon.is-chevron-down { mask-image: url("../icons/chevron-down.svg"); }

  .app-icon-button-icon.is-eye {
    mask-image: url("../icons/eye.svg");
  }
  .app-icon-button-icon.is-download { mask-image: url("../icons/download.svg"); }
  .app-icon-button-icon.is-file-pdf { mask-image: url("../icons/file-pdf.svg"); }
  .app-icon-button-icon.is-printer { mask-image: url("../icons/printer.svg"); }
  .app-icon-button-icon.is-file-text { mask-image: url("../icons/file-text.svg"); }
  .app-icon-button-icon.is-clipboard-list { mask-image: url("../icons/clipboard-list.svg"); }
  .app-icon-button-icon.is-procurement { mask-image: url("../icons/action-procurement.svg"); }
  .app-icon-button-icon.is-file-archive { mask-image: url("../icons/file-archive.svg"); }
  .app-icon-button-icon.is-paperclip { mask-image: url("../icons/paperclip.svg"); }
  .app-icon-button-icon.is-upload { mask-image: url("../icons/upload.svg?v=36d1b3f2dc9a"); }
  .app-icon-button-icon.is-clock { mask-image: url("../icons/clock.svg"); }
  .app-icon-button-icon.is-badge-check { mask-image: url("../icons/badge-check.svg"); }
  .app-icon-button-icon.is-chart-pie { mask-image: url("../icons/chart-pie.svg"); }
  .app-icon-button-icon.is-user { mask-image: url("../icons/user.svg"); }
  .app-icon-button-icon.is-home { mask-image: url("../icons/home.svg"); }
  .app-icon-button-icon.is-logout { mask-image: url("../icons/logout.svg"); }

  .app-icon-button-icon.is-eye-off {
    mask-image: url("../icons/eye-off.svg");
  }

  .app-icon-button-icon.is-model-tree {
    mask-image: url("../icons/model-tree.svg");
  }

  .app-icon-button-icon.is-fit-view {
    mask-image: url("../icons/fit-view.svg");
  }

  .app-icon-button-icon.is-reset-view {
    mask-image: url("../icons/reset-view.svg");
  }

  .app-icon-button-icon.is-model-edges {
    mask-image: url("../icons/model-edges.svg");
  }

  .app-icon-button-icon.is-expand-all {
    -webkit-mask-image: url("../icons/expand-all.svg");
    mask-image: url("../icons/expand-all.svg");
  }

  .app-icon-button-icon.is-collapse-all {
    -webkit-mask-image: url("../icons/collapse-all.svg");
    mask-image: url("../icons/collapse-all.svg");
  }

  .app-icon-button-icon.is-close {
    mask-image: url("../icons/close.svg");
  }

  .app-icon-button-icon.is-delete {
    mask-image: url("../icons/delete.svg");
  }

  .app-icon-button-icon.is-calendar {
    mask-image: url("../icons/calendar.svg");
  }

  .app-icon-button-icon.is-plus {
    -webkit-mask-image: url("../icons/plus.svg");
    mask-image: url("../icons/plus.svg");
  }
  .app-icon-button-icon.is-info {
    -webkit-mask-image: url("../icons/info.svg");
    mask-image: url("../icons/info.svg");
  }
  .app-icon-button-icon.is-globe { mask-image: url("../icons/globe.svg"); }

  .app-icon-button-icon.is-minus {
    -webkit-mask-image: url("../icons/minus.svg");
    mask-image: url("../icons/minus.svg");
  }

  .app-icon-button-icon.is-list {
    mask-image: url("../icons/list.svg");
  }

  .app-icon-button-icon.is-power {
    mask-image: url("../icons/power.svg");
  }

  .app-icon-button-icon.is-lock { mask-image: url("../icons/lock.svg"); }
  .app-icon-button-icon.is-unlock { mask-image: url("../icons/unlock.svg"); }
  .app-icon-button-icon.is-archive { mask-image: url("../icons/archive.svg"); }
  .app-icon-button-icon.is-alert-circle { mask-image: url("../icons/alert-circle.svg"); }

  .app-icon-button-icon.is-refresh {
    -webkit-mask-image: url("../icons/refresh.svg");
    mask-image: url("../icons/refresh.svg");
  }
  .app-icon-button-icon.is-search {
    -webkit-mask-image: url("../icons/search.svg");
    mask-image: url("../icons/search.svg");
  }

  .app-icon-button-icon.is-wizard {
    -webkit-mask-image: url("../icons/wizard.svg");
    mask-image: url("../icons/wizard.svg");
  }

  .app-icon-button-icon.is-translate {
    -webkit-mask-image: url("../icons/translate.svg");
    mask-image: url("../icons/translate.svg");
  }

  .app-icon-button-icon.is-sidebar-collapse {
    -webkit-mask-image: url("../icons/sidebar-collapse.svg");
    mask-image: url("../icons/sidebar-collapse.svg");
  }

  .app-icon-button-icon.is-sidebar-expand {
    -webkit-mask-image: url("../icons/sidebar-expand.svg");
    mask-image: url("../icons/sidebar-expand.svg");
  }

  html.app-overlay-scroll-locked,
  html.app-overlay-scroll-locked body {
    overflow: hidden;
  }

  html.app-overlay-scroll-locked {
    scrollbar-gutter: stable;
  }

  .app-overlay {
    position: fixed;
    inset: 0;
    background: transparent;
    border: 0;
    color: var(--color-text);
    height: min(48rem, calc(100vh - 2rem));
    margin: auto;
    max-height: none;
    max-width: none;
    padding: 0;
    overflow: hidden;
    width: min(76rem, calc(100vw - 2rem));
  }

  .app-overlay::backdrop {
    background: rgb(20 32 51 / 42%);
    backdrop-filter: blur(1px);
  }

  .app-overlay.is-compact {
    height: fit-content;
    max-height: calc(100dvh - 2rem);
    width: min(34rem, calc(100vw - 2rem));
  }

  .app-overlay.is-compact .app-overlay-frame {
    height: auto;
    max-block-size: calc(100dvh - 2rem);
  }
  .app-overlay.is-compact .app-overlay-content { height: auto; }

  /* Content-sized detail overlays retain a bounded, independently scrolling body. */
  .app-overlay:is(.is-content, .is-wide) {
    height: fit-content;
    max-height: calc(100dvh - 2 * var(--space-4));
    width: min(var(--overlay-content-width), calc(100vw - 2 * var(--space-4)));
  }

  .app-overlay.is-wide { width: min(72rem, calc(100vw - 2 * var(--space-4))); }

  .app-overlay:is(.is-content, .is-wide) .app-overlay-frame {
    height: auto;
    max-block-size: calc(100dvh - 2 * var(--space-4));
  }

  .app-overlay:is(.is-content, .is-wide) .app-overlay-content { height: auto; }

  /* Plain information uses readable spacing; embedded forms retain their own layout. */
  .app-overlay.has-prose-content .app-overlay-header {
    align-items: center;
    padding: var(--space-5);
  }
  .app-overlay.has-prose-content .app-overlay-header > div { min-inline-size: 0; }
  .app-overlay.has-prose-content .app-overlay-header h2 { overflow-wrap: anywhere; }
  .app-overlay.has-prose-content .app-overlay-header > .app-icon-button { flex-shrink: 0; }
  .app-overlay.has-prose-content .app-overlay-content {
    height: auto;
    padding: var(--space-5);
    font-size: var(--font-size-md);
    line-height: 1.6;
    overflow-wrap: anywhere;
  }
  .app-overlay.has-prose-content .app-overlay-content > section + section { margin-block-start: var(--space-5); }
  .app-overlay.has-prose-content .app-overlay-content h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--font-size-md);
    line-height: 1.4;
  }
  .app-overlay.has-prose-content .app-overlay-content p { margin: 0; color: var(--color-text-muted); }

  .app-confirm-dialog {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .app-confirm-dialog p {
    color: var(--color-text-muted);
  }

  .app-confirm-dialog-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  .app-overlay-frame {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    box-shadow: 0 1.5rem 4rem rgb(20 32 51 / 24%);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    height: 100%;
    overflow: hidden;
  }

  .app-overlay-header {
    grid-row: 1;
    align-items: flex-start;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4);
  }
  .app-overlay-header-actions { display: flex; align-items: center; gap: var(--space-2); margin-inline-start: auto; }

  .app-overlay-header h2 {
    font-size: var(--font-size-lg);
  }

  .app-icon-button-icon.is-grip { mask-image: url("../icons/grip.svg"); }
  .app-icon-button-icon.is-more-horizontal { mask-image: url("../icons/more-horizontal.svg"); }

  /* ActionMenu: native fallback, with unclipped top-layer placement when enhanced. */
  .app-action-menu { position: relative; display: inline-block; flex: none; }
  .app-action-menu[hidden] { display: none; }
  .app-action-menu > summary { list-style: none; }
  .app-action-menu > summary::-webkit-details-marker { display: none; }
  .app-action-menu-panel {
    position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-end: 0;
    box-sizing: border-box; inline-size: max-content; min-inline-size: min(14rem, calc(100vw - var(--space-4)));
    max-inline-size: calc(100vw - var(--space-4)); max-block-size: calc(100dvh - var(--space-4));
    margin: 0; padding: var(--space-1); overflow: auto; overscroll-behavior: contain;
    border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface);
    color: var(--color-text); box-shadow: var(--shadow-popover); z-index: var(--z-popover);
  }
  .app-action-menu-panel[popover] { position: fixed; inset: auto; }
  .app-action-menu[open] > .app-action-menu-panel:not([popover]), .app-action-menu-panel:popover-open,
  .app-action-menu-group { display: grid; gap: var(--space-1); }
  .app-action-menu-panel .app-button, .app-theme-focus .app-action-menu-panel .app-button {
    justify-content: flex-start; flex-direction: row; inline-size: 100%; border-color: transparent; background: transparent;
    color: var(--color-text); font-weight: 400; text-align: start; white-space: normal;
  }
  .app-action-menu-panel .app-button.is-danger, .app-theme-focus .app-action-menu-panel .app-button.is-danger { color: var(--color-danger); border-color: transparent; background: transparent; }
  .app-action-menu-panel .app-button:hover:not(:disabled) { border-color: transparent; background: var(--color-info-soft); }
  .app-action-menu-panel .app-button.is-danger:hover:not(:disabled) { background: var(--color-danger-soft); }
  .app-action-menu-panel .app-button:disabled { color: var(--color-text-muted); }
  .app-action-menu-panel hr { margin: var(--space-1) 0; border: 0; border-block-start: 1px solid var(--color-border); }
  .app-action-menu-group + .app-action-menu-group { padding-block-start: var(--space-1); border-block-start: 1px solid var(--color-border); }

  .app-overlay-title-with-image {
    --app-brand-mark-size: 1.5rem;
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .app-overlay-header p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-block-start: var(--space-1);
  }

  .app-overlay-body {
    position: relative;
    grid-row: 3;
    min-width: 0;
    min-height: 0;
    overscroll-behavior: contain;
    overflow: auto;
  }

  .app-overlay-content {
    height: 100%;
    display: flow-root;
  }

  .app-overlay-message {
    margin: 0;
    padding: var(--space-4);
    overflow-wrap: anywhere;
  }

  .app-overlay-message .app-status-badge {
    white-space: normal;
  }

  .app-overlay-body[aria-busy="true"] .app-overlay-message {
    min-block-size: calc(8 * var(--space-4));
  }

  .app-overlay.has-header-content .app-overlay-header {
    border-block-end: 0;
  }

  .app-overlay-header-content {
    grid-row: 2;
    min-inline-size: 0;
    padding: 0 var(--space-4) var(--space-4);
    border-block-end: 1px solid var(--color-border);
  }

  .app-overlay-footer {
    grid-row: 4;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--color-border);
    background: var(--color-surface);
  }

  .app-overlay-footer-message {
    flex: 1 1 16rem;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .app-icon-button-slot { display: inline-grid; min-inline-size: var(--icon-button-size, 2rem); min-block-size: var(--icon-button-size, 2rem); }
  .app-icon-button-slot > .app-icon-button { grid-area: 1 / 1; }

  .app-overlay-body[aria-busy="true"] {
    overflow: hidden;
  }

  .app-overlay-body[aria-busy="true"] .app-overlay-content {
    opacity: 0.58;
    pointer-events: none;
  }

  .app-overlay-page {
    display: flex;
    flex-direction: column;
    min-height: 100%;
  }

  .app-overlay-pagination {
    align-items: center;
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    margin-block-start: auto;
    min-height: 4rem;
    padding: var(--space-3) var(--space-4);
  }

  .app-overlay-pagination-status {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-inline-end: auto;
  }

  .app-overlay-pagination button {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    cursor: pointer;
    min-width: 6rem;
    padding: var(--space-2) var(--space-3);
  }

  .app-overlay-pagination button:hover:not(:disabled) {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .app-overlay-pagination button:disabled {
    color: var(--color-text-muted);
    cursor: default;
    opacity: 0.5;
  }

  @media (max-width: 40rem) {
    .app-overlay {
      height: calc(100vh - 1rem);
      width: calc(100vw - 1rem);
    }

    .app-overlay-pagination {
      flex-wrap: wrap;
    }

    .app-overlay-pagination-status {
      flex-basis: 100%;
    }
  }

  /* File links: shared format icons and wrapping filenames. */
  .app-file-link { display: inline-flex; align-items: center; gap: var(--space-2); min-inline-size: 0; }
  .app-file-link-name { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-file-link-icon { display: block; flex: none; inline-size: 1rem; block-size: 1rem; background: currentcolor; mask-position: center; mask-repeat: no-repeat; mask-size: contain; }
  .app-file-link-icon.is-file { mask-image: url("../icons/file.svg"); }
  .app-file-link-icon.is-pdf { mask-image: url("../icons/file-pdf.svg"); }
  .app-file-link-icon.is-dxf { mask-image: url("../icons/file-dxf.svg"); }
  .app-file-link-icon.is-word { mask-image: url("../icons/file-word.svg"); }
  .app-file-link-icon.is-excel { mask-image: url("../icons/file-excel.svg"); }
  .app-file-link-icon.is-powerpoint { mask-image: url("../icons/file-powerpoint.svg"); }
  .app-file-link-icon.is-outlook { mask-image: url("../icons/file-outlook.svg"); }
  .app-file-link-icon.is-access { mask-image: url("../icons/file-access.svg"); }
  .app-file-link-icon.is-onenote { mask-image: url("../icons/file-onenote.svg"); }
  .app-file-link-icon.is-visio { mask-image: url("../icons/file-visio.svg"); }
  .app-file-link-icon.is-project { mask-image: url("../icons/file-project.svg"); }
  .app-file-link-icon.is-publisher { mask-image: url("../icons/file-publisher.svg"); }
  .app-file-link-icon.is-illustrator { mask-image: url("../icons/file-illustrator.svg"); }
  .app-file-link-icon.is-photoshop { mask-image: url("../icons/file-photoshop.svg"); }
  .app-file-link-icon.is-indesign { mask-image: url("../icons/file-indesign.svg"); }
  .app-file-link-icon.is-xd { mask-image: url("../icons/file-xd.svg"); }
  .app-file-link-icon.is-premiere { mask-image: url("../icons/file-premiere.svg"); }
  .app-file-link-icon.is-after-effects { mask-image: url("../icons/file-after-effects.svg"); }
  .app-file-link-icon.is-audition { mask-image: url("../icons/file-audition.svg"); }
  .app-file-link-icon.is-animate { mask-image: url("../icons/file-animate.svg"); }
  .app-file-link-icon.is-lightroom { mask-image: url("../icons/file-lightroom.svg"); }
  .app-file-link-icon.is-postscript { mask-image: url("../icons/file-postscript.svg"); }
  .app-file-link-icon.is-dwg { mask-image: url("../icons/file-dwg.svg"); }
  .app-file-link-icon.is-step { mask-image: url("../icons/file-step.svg"); }
  .app-file-link-icon.is-iges { mask-image: url("../icons/file-iges.svg"); }
  .app-file-link-icon.is-stl { mask-image: url("../icons/file-stl.svg"); }
  .app-file-link-icon.is-mesh { mask-image: url("../icons/file-mesh.svg"); }
  .app-file-link-icon.is-cad-model { mask-image: url("../icons/file-cad-model.svg"); }
  .app-file-link-icon.is-bim { mask-image: url("../icons/file-bim.svg"); }
  .app-file-link-icon.is-vector { mask-image: url("../icons/file-vector.svg"); }
  .app-file-link-icon.is-spreadsheet { mask-image: url("../icons/file-spreadsheet.svg"); }
  .app-file-link-icon.is-text { mask-image: url("../icons/file-text.svg"); }
  .app-file-link-icon.is-presentation { mask-image: url("../icons/file-presentation.svg"); }
  .app-file-link-icon.is-cad-part { mask-image: url("../icons/file-cad-part.svg"); }
  .app-file-link-icon.is-cad-assembly { mask-image: url("../icons/file-cad-assembly.svg"); }
  .app-file-link-icon.is-cad-drawing { mask-image: url("../icons/file-cad-drawing.svg"); }
  .app-file-link-icon.is-image { mask-image: url("../icons/file-image.svg"); }
  .app-file-link-icon.is-archive { mask-image: url("../icons/file-archive.svg"); }

  /* Technical viewers: shared 2D/3D stage, controls and overlay layout. */
  .app-viewer { display: grid; gap: var(--space-4); min-inline-size: 0; }
  .app-viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .app-viewer-heading h1 { font-size: 1.5rem; }
  .app-viewer-heading p { color: var(--color-text-muted); margin-block-start: var(--space-1); overflow-wrap: anywhere; }
  .app-viewer-metadata { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-4); min-inline-size: 0; }
  .app-viewer-metadata > span { min-inline-size: 0; max-inline-size: 100%; }
  .app-viewer-stage { display: flex; flex-direction: column; min-inline-size: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
  .app-viewer-toolbar { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; background: var(--color-surface); padding: var(--space-3); border-block-end: 1px solid var(--color-border); }
  .app-viewer-viewport { block-size: clamp(24rem, 65vh, 52rem); min-block-size: 20rem; min-inline-size: 0; position: relative; }
  .app-viewer-viewport > :is(canvas, svg) { display: block; inline-size: 100%; block-size: 100%; touch-action: none; outline: none; }
  .app-viewer-viewport > :is(canvas, svg):focus-visible { outline: 2px solid var(--color-accent); outline-offset: -3px; }
  .app-viewer-viewport > .app-loading-indicator { position: absolute; inset: 0; flex-direction: column; justify-content: center; text-align: center; z-index: 2; gap: var(--space-4); }
  .app-viewer-viewport > .app-loading-indicator .app-loading-spinner { inline-size: 4rem; block-size: 4rem; border-width: 3px; }
  .app-viewer-footer { display: flex; align-items: center; gap: var(--space-3); min-block-size: 2.5rem; padding: var(--space-1) var(--space-3); }
  .app-viewer-status { min-inline-size: 0; overflow-wrap: anywhere; color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-viewer-status.is-error { color: var(--color-danger); background: var(--color-danger-soft); }
  .app-viewer-footer [hidden] { display: none; }
  .app-viewer-help { padding: var(--space-2) var(--space-3); border-block-start: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-overlay-content > .app-viewer { block-size: 100%; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-2); }
  .app-overlay-content > .app-viewer > .app-viewer-heading { padding-inline: var(--space-4); }
  .app-overlay-content > .app-viewer > .app-viewer-stage { min-block-size: 0; border: 0; border-radius: 0; }
  .app-overlay-content > .app-viewer .app-viewer-viewport { flex: 1; block-size: auto; min-block-size: 0; }
  .app-viewer-stage:fullscreen { inline-size: 100vw; block-size: 100vh; border: 0; border-radius: 0; }
  .app-viewer-stage:fullscreen .app-viewer-viewport { flex: 1; block-size: auto; min-block-size: 0; }
  .app-viewer-stage:fullscreen .app-viewer-toolbar { --icon-button-size: var(--icon-button-touch-size); --icon-button-icon-size: var(--icon-button-touch-icon-size); gap: var(--space-3); }
  @media (max-width: 480px) {
    .app-viewer-viewport { block-size: 55vh; min-block-size: 18rem; }
    .app-viewer-toolbar { gap: var(--space-1); }
  }

  /* List pager */
  .app-list-pager-size {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    margin-inline-start: auto;
  }

  .app-list-pager-size label {
    align-items: center;
    display: flex;
    gap: var(--space-2);
  }

  .app-list-pager-size label > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 600;
    white-space: nowrap;
  }

  .app-list-pager-size select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font: inherit;
    min-height: 2.5rem;
    min-width: 5rem;
    padding: var(--space-2) 2rem var(--space-2) var(--space-3);
  }

  .app-list-pager-size select:focus-visible,
  .app-list-pager-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .app-list-pager {
    align-items: center;
    background: var(--color-surface);
    border-block-start: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    min-height: 4rem;
    padding: var(--space-3) var(--space-4);
  }

  .app-list-pager-status {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .app-list-pager.is-compact { min-block-size: 2.5rem; padding: var(--space-1) 0; }

  .app-list-pager-pages {
    align-items: center;
    display: flex;
    gap: var(--space-1);
  }

  .app-list-pager-page-links {
    align-items: center;
    display: flex;
    gap: var(--space-1);
  }

  .app-list-pager-link {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    justify-content: center;
    min-height: 2.25rem;
    min-width: 2.25rem;
    padding: var(--space-1) var(--space-2);
    text-decoration: none;
  }

  .app-list-pager-link:hover:not(:disabled, [aria-disabled="true"], .is-current) {
    background: var(--color-surface-muted);
  }

  .app-list-pager-link.is-current {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
  }

  .app-list-pager-link:is(:disabled, [aria-disabled="true"]) {
    color: var(--color-text-muted);
    cursor: not-allowed;
    opacity: 0.55;
  }

  .app-list-pager-ellipsis {
    color: var(--color-text-muted);
    min-width: 1.5rem;
    text-align: center;
  }

  @media (max-width: 42rem) {
    .app-list-pager-size label > span {
      position: absolute;
      clip: rect(0 0 0 0);
      clip-path: inset(50%);
      height: 1px;
      overflow: hidden;
      white-space: nowrap;
      width: 1px;
    }

    .app-list-pager {
      align-items: flex-start;
      flex-direction: column;
    }

    .app-list-pager-pages {
      flex-wrap: wrap;
    }
  }

  /* Transfer list */
  .app-transfer-list {
    align-items: stretch;
    display: grid;
    gap: var(--space-3);
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    min-width: 0;
  }

  .app-transfer-list-column {
    display: grid;
    gap: var(--space-2);
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
  }

  .app-transfer-list-heading {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    min-height: 1.75rem;
  }

  .app-transfer-list-heading label {
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .app-transfer-list-count {
    background: var(--color-surface-muted);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    padding-inline: var(--space-2);
    white-space: nowrap;
  }

  .app-transfer-list.is-compact {
    --transfer-list-min-block-size: var(--transfer-list-compact-min-block-size, 10rem);
  }

  .app-transfer-list-select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font: inherit;
    min-height: var(--transfer-list-min-block-size, 16rem);
    padding: var(--space-1);
    width: 100%;
  }

  .app-transfer-list-select option {
    border-radius: var(--radius-control);
    padding: var(--space-2);
  }

  .app-transfer-list-select:focus-visible {
    border-color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  .app-transfer-list-select:disabled {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
  }

  .app-transfer-list-actions {
    align-self: center;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .app-button.app-transfer-list-button,
  .app-theme-focus .app-button.app-transfer-list-button {
    font-size: 0;
    min-width: 3rem;
    overflow: hidden;
    padding-inline: var(--space-2);
  }

  .app-transfer-list-button::before {
    background: currentcolor;
    content: "";
    display: block;
    height: 1.25rem;
    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;
    width: 1.25rem;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
  }

  .app-transfer-list-button[data-transfer-list-action="add-selected"]::before {
    mask-image: url("../icons/arrow-right.svg");
    -webkit-mask-image: url("../icons/arrow-right.svg");
  }

  .app-transfer-list-button[data-transfer-list-action="add-all"]::before {
    mask-image: url("../icons/arrow-right-all.svg");
    -webkit-mask-image: url("../icons/arrow-right-all.svg");
  }

  .app-transfer-list-button[data-transfer-list-action="remove-selected"]::before {
    mask-image: url("../icons/arrow-left.svg");
    -webkit-mask-image: url("../icons/arrow-left.svg");
  }

  .app-transfer-list-button[data-transfer-list-action="remove-all"]::before {
    mask-image: url("../icons/arrow-left-all.svg");
    -webkit-mask-image: url("../icons/arrow-left-all.svg");
  }

  .app-transfer-list-help {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    grid-column: 1 / -1;
  }

  @media (max-width: 48rem) {
    .app-transfer-list {
      grid-template-columns: minmax(0, 1fr);
    }

    .app-transfer-list-actions {
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: center;
    }

    .app-transfer-list-select {
      min-height: var(--transfer-list-min-block-size, 12rem);
    }
  }

  /* Transfer list: optional searchable record rows */
  .app-transfer-list.has-records { container: transfer-records / inline-size; }
  .app-transfer-list.has-records .app-transfer-list-column { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--color-border); border-radius: var(--radius-control); overflow: hidden; position: relative; }
  .app-transfer-list.has-records .app-transfer-list-heading { padding: var(--space-3); background: var(--color-surface-muted); border-block-end: 1px solid var(--color-border); }
  .app-transfer-list.has-records .app-transfer-list-count { background: transparent; border-radius: 0; padding: 0; font-size: .75rem; }
  .app-transfer-record-search { display: block; padding: var(--space-3); }
  .app-transfer-record-search input { inline-size: 100%; min-inline-size: 0; }
  .app-transfer-records { block-size: var(--transfer-list-record-block-size, 18rem); overflow: auto; overscroll-behavior: contain; }
  .app-transfer-list.has-records :is(.app-transfer-record,.app-transfer-record-empty)[hidden] { display: none; }
  .app-transfer-record { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3); border-block-end: 1px solid var(--color-border); min-inline-size: 0; }
  .app-transfer-record:last-child { border-block-end: 0; }
  .app-transfer-record:has(input:checked) { background: var(--color-accent-soft); }
  .app-transfer-record > label { display: flex; align-items: center; gap: var(--space-2); min-inline-size: 0; flex: 1; }
  .app-transfer-record input { flex: none; margin: 0; }
  .app-transfer-record-copy { display: grid; min-inline-size: 0; gap: var(--space-1); overflow-wrap: anywhere; }
  .app-transfer-record-copy strong { font-size: var(--font-size-sm); font-weight: 600; }
  .app-transfer-record-copy > span { color: var(--color-text-muted); font-size: .75rem; }
  .app-transfer-record-empty { position: absolute; inset: 7rem var(--space-3) var(--space-3); display: grid; place-items: center; text-align: center; color: var(--color-text-muted); font-size: var(--font-size-sm); pointer-events: none; }
  .app-transfer-list.has-records .app-button.app-transfer-list-button { font-size: .75rem; gap: var(--space-2); min-inline-size: 7rem; padding-inline: var(--space-3); }
  .app-transfer-list.has-records .app-transfer-list-button::before { inline-size: 1rem; block-size: 1rem; flex: none; }
  .app-transfer-list.has-records .app-transfer-list-help { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-pictogram { inline-size: var(--pictogram-size, 3.25rem); block-size: var(--pictogram-size, 3.25rem); object-fit: contain; flex: none; }
  .app-pictogram-label { display: inline-flex; align-items: center; gap: var(--space-3); min-inline-size: 0; }
  .app-pictogram-label > .is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-pictogram-label .app-pictogram { --pictogram-size: 2.5rem; }
  .app-pictogram-label.is-cad-part > .app-pictogram { transform: scale(.6); transform-origin: bottom left; }
  .app-pictogram-label.is-compact { gap: var(--space-1); }
  .app-pictogram-label.is-compact .app-pictogram { --pictogram-size: 1.125rem; }
  .app-reference-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
  @media (max-width: 48rem) {
    .app-transfer-list.has-records .app-transfer-list-button::before { transform: rotate(90deg); }
  }

  /* Filter bar */
  .app-filter-bar {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    min-width: 0;
    overflow: hidden;
  }

  .app-filter-bar > header {
    border-block-end: 1px solid var(--color-border);
    padding: var(--space-4);
  }

  .app-filter-bar-summary {
    align-items: center;
    cursor: pointer;
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    list-style: none;
    padding: var(--space-4);
  }
  .app-filter-bar-summary::-webkit-details-marker { display: none; }
  .app-filter-bar-summary h2 { font-size: var(--font-size-lg); }
  .app-filter-bar-summary p { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-block-start: var(--space-1); }
  .app-filter-bar-summary-action {
    border-block-end: 1.5px solid currentcolor;
    border-inline-end: 1.5px solid currentcolor;
    color: var(--color-accent);
    flex: 0 0 auto;
    height: 0.4rem;
    margin-inline-end: var(--space-1);
    transform: rotate(45deg) translateY(-0.1rem);
    transition: transform 160ms ease;
    width: 0.4rem;
  }
  .app-filter-bar[open] > .app-filter-bar-summary { border-block-end: 1px solid var(--color-border); }
  .app-filter-bar[open] .app-filter-bar-summary-action { transform: rotate(225deg) translate(-0.1rem, -0.1rem); }

  .app-filter-bar > header h2 { font-size: var(--font-size-lg); }
  .app-filter-bar > header p { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-block-start: var(--space-1); }
  .app-filter-bar-body { display: grid; gap: var(--space-3); padding: var(--space-4); }

  .app-filter-bar-form {
    align-items: end;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    min-width: 0;
  }

  .app-filter-bar-field { display: grid; flex: 0 1 13rem; gap: var(--space-1); min-width: 10rem; position: relative; }
  .app-filter-bar-field.is-search { flex: 1 1 26rem; }
  .app-filter-bar-advanced { flex: 0 0 100%; min-inline-size: 0; container: form-fields / inline-size; }
  .app-filter-bar-advanced .app-filter-bar-field { min-width: 0; }
  .app-filter-bar-field > label { font-size: var(--font-size-sm); font-weight: 600; }
  .app-filter-bar-field > label.is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; }

  .app-filter-bar-field > input,
  .app-filter-bar-select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font: inherit;
    height: 2.5rem;
    min-width: 0;
    padding-inline: var(--space-3);
  }

  .app-filter-bar-field > input { width: 100%; }
  .app-filter-bar-field input:focus-visible,
  .app-filter-bar-select:focus-visible { border-color: var(--color-accent); outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
  .app-filter-bar-field [aria-invalid="true"] { border-color: var(--color-danger); }
  .app-filter-bar-error { color: var(--color-danger); font-size: var(--font-size-sm); }

  .app-filter-bar-actions { display: flex; gap: var(--space-2); }
  .app-filter-bar-actions.is-icon-only { --icon-button-size: 2.5rem; --icon-button-icon-size: 1.25rem; align-items: center; min-block-size: 2.5rem; }
  .app-filter-bar-active { display: flex; flex-wrap: wrap; gap: var(--space-2); min-height: 2.125rem; }
  .app-filter-bar-active.is-empty { min-height: 0; }
  .app-filter-bar-chip-groups { display: grid; gap: var(--space-2); grid-template-columns: max-content minmax(0, 1fr); }
  .app-filter-bar-chip-group { display: contents; }
  .app-filter-bar-chip-label { align-items: center; color: var(--color-text-muted); display: inline-flex; font-size: var(--font-size-sm); font-weight: 600; }
  .app-filter-bar-chip-list { display: flex; flex-wrap: wrap; gap: var(--space-2); min-width: 0; }

  .app-filter-bar-chip,
  .app-filter-bar-select {
    align-items: center;
    display: inline-flex;
    font-size: var(--font-size-sm);
    font-weight: 600;
    gap: var(--space-2);
    justify-content: center;
    min-height: 2.125rem;
    text-decoration: none;
  }

  .app-filter-bar-chip {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    padding: var(--space-1) var(--space-3);
    white-space: nowrap;
  }
  .app-filter-bar-chip:hover { background: var(--color-info-soft); border-color: var(--color-info-soft-border); }
  .app-filter-bar-chip.is-active { background: var(--color-info-soft); border-color: var(--color-accent); color: var(--color-accent); }
  .app-filter-bar-chip.is-active-filter { background: var(--color-info-soft); border-color: var(--color-info-soft-border); }
  .app-filter-bar-chip.is-reset { background: var(--color-surface-muted); }
  .app-filter-bar-chip span { font-size: 1rem; line-height: 1; }
  .app-filter-bar-select-wrap { display: inline-flex; max-width: 18rem; }
  .app-filter-bar-select { max-width: 18rem; padding-inline: var(--space-3); width: 100%; }

  @media (max-width: 48rem) {
    .app-filter-bar-field,
    .app-filter-bar-field.is-search { flex-basis: 100%; }
    .app-filter-bar-actions { width: 100%; }
    .app-filter-bar-chip-groups { grid-template-columns: 1fr; }
  }


  /* Forms */
  .app-form {
    display: grid;
    gap: var(--space-4);
    width: 100%;
  }

  .app-form.is-overlay { padding: var(--space-4); }

  .app-form-field {
    display: grid;
    gap: var(--space-1);
    min-width: 0;
  }

  .app-form-field > span,
  .app-form-fieldset > legend {
    font-size: var(--font-size-sm);
    font-weight: 600;
  }

  .app-form-field > input:not([type="checkbox"]):not([type="radio"]),
  .app-form-field > select,
  .app-language-select > select,
  .app-form-field > textarea {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font: inherit;
    min-height: var(--control-height);
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    width: 100%;
  }

  .app-form-field > input[type="file"]::file-selector-button,
  .app-settings-field > input[type="file"]::file-selector-button,
  .app-settings-field-control > input[type="file"]::file-selector-button {
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    margin-inline-end: var(--space-3);
    padding: var(--space-1) var(--space-2);
  }

  .app-form-field > textarea {
    min-height: 6rem;
    resize: vertical;
  }

  .app-form-field > input:focus-visible,
  .app-form-field > select:focus-visible,
  .app-language-select > select:focus-visible,
  .app-form-field > textarea:focus-visible {
    border-color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .app-form-field > [aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .app-form-field > input[readonly],
  .app-form-field > textarea[readonly] {
    background: var(--color-surface-muted);
    color: var(--color-text-muted);
  }

  .app-form-field > small {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  /* Shared supplementary text for form controls and editor status. */
  .app-field-help { color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 400; line-height: 1.5; margin-block: var(--space-1) 0; }
  .app-save-state[data-save-state="error"] { color: var(--color-danger); }

  /* TextEditor: one field surface, quiet metadata and a clearly associated tool row. */
  .app-language-label, .app-icon-select-label { display: inline-flex; align-items: center; gap: var(--space-2); vertical-align: middle; }
  .app-language-label > img, .app-icon-select-label > img { display: block; flex: none; inline-size: 1rem; block-size: .75rem; object-fit: contain; }
  .app-language-select { --control-leading-space: calc(var(--space-3) + 1rem + var(--space-2)); display: block; position: relative; min-inline-size: 0; }
  .app-language-select > img { position: absolute; inset-inline-start: var(--space-3); inset-block-start: 50%; transform: translateY(-50%); inline-size: 1rem; block-size: .75rem; object-fit: contain; pointer-events: none; }
  .app-language-select > select { padding-inline-start: var(--control-leading-space); font-weight: 400; }
  /* IconSelect: fixed choices with local icons and select-only keyboard navigation. */
  .app-icon-select { display: block; min-inline-size: 0; }
  .app-icon-select-trigger {
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    inline-size: 100%; min-inline-size: 0; min-block-size: var(--control-height); padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface);
    color: var(--color-text); font: inherit; font-weight: 400; text-align: start; cursor: pointer;
  }
  .app-icon-select-trigger > .app-icon-select-label { min-inline-size: 0; }
  .app-icon-select-label > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-icon-select.is-square { --control-leading-space: calc(var(--space-3) + 1.5rem + var(--space-2)); }
  .app-icon-select.is-square img, .app-icon-select-list.is-square img { inline-size: 1.5rem; block-size: 1.5rem; }
  .app-icon-select-trigger:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-icon-select-trigger[aria-invalid="true"] { border-color: var(--color-danger); }
  .app-icon-select-trigger:disabled { color: var(--color-text-muted); background: var(--color-surface-muted); cursor: not-allowed; }
  .app-icon-select-arrow { flex: none; color: var(--color-text-muted); }
  .app-icon-select-list, .app-reference-suggestions {
    position: fixed; inset: auto; margin: 0; padding: var(--space-1); box-sizing: border-box;
    max-block-size: 18rem; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface);
    color: var(--color-text); font-size: var(--font-size-sm); box-shadow: var(--shadow-popover); z-index: var(--z-popover);
  }
  .app-icon-select-option, .app-reference-suggestion { display: flex; align-items: center; min-block-size: 2.25rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-control); cursor: pointer; }
  .app-icon-select-option:hover, .app-icon-select-option.is-active, .app-reference-suggestion.is-active { background: var(--color-info-soft); }
  .app-icon-select-option[aria-selected="true"] { color: var(--color-accent); font-weight: 600; }
  .app-icon-select-option.is-active, .app-reference-suggestion.is-active { outline: 1px solid var(--color-accent); outline-offset: -1px; }
  .app-icon-select [hidden], .app-icon-select-list[hidden], .app-reference-suggestions[hidden] { display: none; }
  .app-reference-suggestions { touch-action: pan-y; }
  .app-reference-suggestion { display: grid; grid-template-columns: minmax(4rem,.24fr) minmax(0,1fr); gap: var(--space-3); overflow-wrap: anywhere; }
  .app-reference-suggestion > * { min-inline-size: 0; }
  .app-theme-focus .app-icon-select-trigger { font-size: .8125rem; }
  .app-text-editor { display: grid; gap: var(--space-2); min-inline-size: 0; }
  .app-text-editor-heading { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); min-inline-size: 0; }
  .app-text-editor-heading > .app-field-help { margin: 0; white-space: nowrap; }
  .app-text-editor-surface { border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); overflow: hidden; }
  .app-text-editor-surface:has(> .app-form-field > textarea:focus-visible) { border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
  .app-text-editor-surface:has(> .app-form-field > textarea[aria-invalid="true"]) { border-color: var(--color-danger); }
  .app-text-editor-surface > .app-form-field > textarea { border: 0; border-radius: 0; background: var(--color-surface); min-block-size: var(--text-editor-height, clamp(14rem, 30dvh, 22rem)); padding: var(--space-4); line-height: 1.6; }
  .app-text-editor-surface > .app-form-field > textarea:focus-visible { outline: none; }
  .app-theme-focus .app-text-editor { font-size: var(--font-size-sm); }
  .app-text-editor-tools { --icon-button-size: var(--control-height); --icon-button-icon-size: 1.25rem; display: flex; align-items: end; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3); border-block-start: 1px solid var(--color-border); background: var(--color-surface-muted); }
  .app-text-comparison { padding: var(--space-5); display: grid; gap: var(--space-4); min-inline-size: 0; }
  .app-text-comparison-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); min-inline-size: 0; --text-editor-height: 14rem; }
  .app-field-comparison { display: grid; gap: var(--space-3); min-inline-size: 0; }
  .app-translation-editor { display: grid; gap: var(--space-4); min-inline-size: 0; }
  .app-translation-languages { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-2); }
  .app-translation-language { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .app-field-comparison-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-1) var(--space-4); align-items: start; }
  .app-field-comparison-label { grid-column: 1 / -1; }
  .app-field-comparison-value { min-inline-size: 0; min-block-size: var(--control-height-compact); max-block-size: 14rem; overflow: auto; padding: var(--space-2); border-radius: var(--radius-control); background: var(--color-surface-muted); white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text-muted); font-size: var(--font-size-control); }
  .app-field-comparison-control { min-inline-size: 0; }
  .app-field-comparison-control .app-settings-field { gap: 0; }
  .app-field-comparison .app-field-comparison-control :is(input,textarea):focus-visible { outline: none; border-color: var(--color-accent); box-shadow: inset 0 0 0 1px var(--color-accent); }
  .app-field-comparison-control textarea { min-block-size: 6rem; }
  @media (max-width: 42rem) { .app-field-comparison-row { grid-template-columns: minmax(0,1fr); gap: var(--space-2); } }
  .app-review-context { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
  .app-review-context > .app-field-help { margin: 0; }
  @media (max-width: 48rem) {
    .app-text-comparison { padding: var(--space-4); }
    .app-text-comparison-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); --text-editor-height: 10rem; }
  }

  .app-form-field.is-wide,
  .app-form-fieldset {
    grid-column: 1 / -1;
  }

  .app-form-fieldset {
    border: 0;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }
  :is(.app-form-fieldset, .app-settings-field)[hidden] { display: none !important; }

  .app-form-fieldset > legend {
    margin-block-end: var(--space-2);
    padding: 0;
  }

  .app-form-actions {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    bottom: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: flex-end;
    padding: var(--space-3) var(--space-4);
    position: sticky;
    z-index: 2;
  }

  .app-form-actions.is-inline { position: static; }

  /* Form section */
  .app-form-section {
    --app-form-section-columns: 1;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    margin: 0;
    min-inline-size: 0;
    overflow: hidden;
    padding: 0;
  }

  .app-form-section.has-2-columns { --app-form-section-columns: 2; }
  .app-form-section.has-3-columns { --app-form-section-columns: 3; }
  .app-form-section.has-4-columns { --app-form-section-columns: 4; }

  .app-form-section-header {
    align-items: flex-start;
    border-block-end: 1px solid var(--color-border);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    min-width: 0;
    padding: var(--space-4);
  }

  .app-form-section-heading {
    min-width: 0;
  }

  .app-form-section-heading h2,
  .app-form-section-legend {
    color: var(--color-text);
    font-size: var(--font-size-lg);
    font-weight: 700;
    line-height: 1.25;
  }

  .app-form-section-legend {
    background: var(--color-surface);
    border-block-end: 1px solid var(--color-border);
    display: block;
    float: inline-start;
    padding: var(--space-4);
    width: 100%;
  }

  .app-form-section-legend + .app-form-section-header {
    clear: both;
    padding-block-start: 0;
  }

  .app-form-section-heading p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-block-start: var(--space-1);
  }

  .app-form-section.has-hidden-title > .is-visually-hidden,
  .app-form-section.has-hidden-title :is(.app-panel-heading, .app-form-section-heading) > h2.is-visually-hidden {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    border: 0;
  }
  .app-form-section.has-hidden-title > :is(.app-panel-header, .app-form-section-header) > .app-form-section-tools { margin-inline-start: auto; }
  .app-form-section.has-hidden-title:not(.is-card) > .app-form-section-body { padding: 0; }

  .app-form-section-tools,
  .app-form-section-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .app-form-section-tools {
    flex: 0 0 auto;
    min-inline-size: 0;
    max-inline-size: 100%;
    justify-content: flex-end;
  }

  .app-form-section-status {
    display: inline-flex;
    min-inline-size: 0;
  }

  .app-form-section-message {
    background: var(--color-info-soft);
    border-block-end: 1px solid var(--color-info-soft-border);
    color: var(--color-text);
    padding: var(--space-3) var(--space-4);
  }

  .app-form-section.is-success .app-form-section-message {
    background: var(--color-success-soft);
    border-block-end-color: var(--color-success-soft-border);
  }

  .app-form-section.is-warning .app-form-section-message {
    background: var(--color-warning-soft);
    border-block-end-color: var(--color-warning-soft-border);
  }

  .app-form-section.is-error .app-form-section-message {
    background: var(--color-danger-soft);
    border-block-end-color: var(--color-danger-soft-border);
  }

  .app-form-section-body {
    min-width: 0;
    padding: var(--space-4);
  }

  .app-form-section-content {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(var(--app-form-section-columns), minmax(0, 1fr));
    min-width: 0;
  }

  @media (max-width: 64rem) {
    .app-form-section.has-3-columns,
    .app-form-section.has-4-columns {
      --app-form-section-columns: 2;
    }
  }

  @media (max-width: 42rem) {
    .app-form-section {
      --app-form-section-columns: 1;
    }

    .app-form-section-header {
      align-items: stretch;
      flex-direction: column;
    }

    .app-form-section-tools {
      justify-content: flex-start;
    }
  }

  /* Provider configuration and typed runtime settings */
  .provider-settings-page,
  .provider-settings-form {
    width: 100%;
  }

  .provider-settings-form {
    display: grid;
    gap: var(--space-4);
  }

  .provider-settings-boundary {
    align-items: center;
    background: var(--color-info-soft);
    border: 1px solid var(--color-info-soft-border);
    border-radius: var(--radius-panel);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-4);
  }

  .provider-settings-boundary p,
  .provider-settings-actions p,
  .provider-option p,
  .provider-option small {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .provider-settings-boundary p {
    margin-block-start: var(--space-1);
  }

  .provider-settings-boundary-badge {
    border-radius: 999px;
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    padding: 0.15rem 0.55rem;
  }

  .provider-settings-boundary-badge {
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }

  .app-settings-field {
    min-width: 0;
  }

  .app-settings-field.is-wide {
    grid-column: 1 / -1;
  }

  .app-settings-field > label,
  .app-settings-field-label > label {
    display: block;
    font-weight: 600;
    margin-block-end: var(--space-1);
  }

  .app-settings-field label.is-visually-hidden {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }

  .app-settings-field-help {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-block-end: var(--space-2);
  }

  .app-settings-field > :is(input, select, textarea),
  .app-settings-field-control > :is(input, select, textarea) {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    min-height: 2.5rem;
    padding: var(--space-2) var(--space-3);
    width: 100%;
  }

  .app-settings-field input:focus-visible,
  .app-settings-field select:focus-visible,
  .app-settings-field textarea:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
  }

  .app-settings-field :is(input, textarea)[readonly] {
    background: var(--color-surface-muted);
  }

  .app-settings-field [aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .app-settings-field.has-error {
    background: var(--color-danger-soft);
    border-radius: var(--radius-control);
    padding: var(--space-2);
  }

  .app-settings-field-meta {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
    margin-block-start: var(--space-2);
    min-height: 1.4rem;
  }

  .app-settings-field-source {
    background: var(--color-surface-muted);
    border-radius: 999px;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    padding: 0.1rem 0.45rem;
  }

  .app-settings-field-source.is-database {
    background: var(--color-success-soft);
    color: var(--color-success);
  }

  .app-settings-field-source.is-environment {
    background: var(--color-warning-soft);
    color: var(--color-warning);
  }

  .app-settings-field-error {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    min-inline-size: 0;
    max-inline-size: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .app-settings-field textarea { min-block-size: 5.5rem; resize: vertical; font: inherit; }

  /* Explicit entry fields and unit adornments share one accessible control surface. */
  .app-settings-field.is-entry { --entry-border-color: color-mix(in srgb, var(--color-text-muted) 70%, var(--color-surface)); }
  .app-settings-field.is-entry :is(input:not([type="hidden"]),select,textarea):where(:not(.app-date-input-picker)) { border-color: var(--entry-border-color); background: var(--color-surface); }
  .app-settings-field.is-entry > label { color: var(--color-text); }
  .app-settings-field.is-entry :is(input,select,textarea):disabled { background: var(--color-surface-muted); color: var(--color-text-muted); }
  .app-settings-field.is-entry [aria-invalid="true"] { border-color: var(--color-danger); }
  .app-settings-input-group { display: flex; align-items: stretch; min-inline-size: 0; block-size: var(--control-height,2.5rem); min-block-size: var(--control-height,2.5rem); box-sizing: border-box; border: 1px solid var(--entry-border-color,var(--color-border)); border-radius: var(--radius-control); background: var(--color-surface); }
  .app-settings-input-group > input { --control-border-width: 0px; flex: 1 1 0; min-inline-size: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control) 0 0 var(--radius-control); background: transparent; color: var(--color-text); }
  .app-settings-field.is-entry .app-settings-input-group > input { background: transparent; }
  .app-settings-input-group:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 1px var(--color-accent); }
  .app-settings-input-group:has([aria-invalid="true"]) { border-color: var(--color-danger); }
  .app-settings-field-suffix { display: flex; align-items: center; flex: 0 0 auto; padding: var(--space-2) var(--space-3); border-inline-start: 1px solid var(--color-border); border-radius: 0 var(--radius-control) var(--radius-control) 0; color: var(--color-text-muted); background: var(--color-surface-muted); font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; }
  .app-settings-input-group > select.app-settings-field-suffix-select { appearance: none; flex: 0 0 auto; inline-size: auto; min-inline-size: 2.5rem; max-inline-size: 6rem; min-block-size: 0; block-size: 100%; border: 0; border-inline-start: 1px solid var(--color-border); text-align: center; cursor: pointer; }
  .app-settings-field.is-numeric input { text-align: end; font-variant-numeric: tabular-nums; }
  .app-settings-field.is-result .app-settings-input-group { background: color-mix(in srgb,var(--color-accent) 7%,var(--color-surface)); border-color: color-mix(in srgb,var(--color-accent) 35%,var(--color-border)); }
  .app-settings-field.is-result :is(input,input:disabled) { text-align: end; font-variant-numeric: tabular-nums; font-weight: 700; color: var(--color-accent); background: transparent; opacity: 1; }
  .app-settings-field.is-result .app-settings-field-suffix { color: var(--color-accent); background: transparent; border-inline-start: 0; }
  .app-theme-focus .app-settings-input-group { order: 1; }

  /* Settings rows share the FormSection inset; never add a second inline inset. */
  .app-settings-list { min-inline-size: 0; container: settings-list / inline-size; }
  .app-settings-field.is-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: var(--space-5);
    padding-block: var(--space-4);
    padding-inline: 0;
    align-items: start;
  }
  .app-settings-field.is-row:first-of-type { padding-block-start: 0; }
  .app-settings-field.is-row:last-child { padding-block-end: 0; }
  .app-settings-field.is-row ~ .app-settings-field.is-row { border-block-start: 1px solid var(--color-border); }
  .app-settings-field-label, .app-settings-field-control { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-settings-field.is-row .app-settings-field-help { margin-block: var(--space-1) 0; }
  .app-settings-field.is-row .app-settings-field-meta { margin-block-start: var(--space-2); flex-wrap: wrap; }
  .app-settings-reference {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: var(--space-4); padding-block: var(--space-4);
    border-block-start: 1px solid var(--color-border);
  }
  .app-settings-reference > div { flex: 1 1 18rem; min-inline-size: 0; overflow-wrap: anywhere; }
  .app-settings-reference p { color: var(--color-text-muted); margin-block-start: var(--space-1); }
  .app-settings-reference:last-child { padding-block-end: 0; }
  @container settings-list (max-width: 48rem) {
    .app-settings-field.is-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  }
  /* Compact record editors retain label/control rows in half-width sections. */
  .app-settings-field.is-row.is-compact { grid-template-columns: minmax(8rem, 1fr) minmax(0, 1.8fr); gap: var(--space-3); padding-block: var(--space-2); align-items: center; }
  .app-settings-field.is-row.is-compact:first-of-type { padding-block-start: 0; }
  .app-settings-field.is-row.is-compact:last-child { padding-block-end: 0; }
  .app-settings-field.is-compact .app-settings-field-meta:empty { display: none; }
  @container settings-list (max-width: 32rem) {
    .app-settings-field.is-row.is-compact { grid-template-columns: minmax(0, 1fr); align-items: start; }
  }

  .provider-catalog {
    display: grid;
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  }

  .provider-option {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    display: grid;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--space-3);
  }

  .provider-option.is-selected {
    border-color: var(--color-success-soft-border);
  }

  .provider-option > header {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: space-between;
  }

  .provider-option code {
    overflow-wrap: anywhere;
  }

  .provider-diagnostic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
  }

  .provider-diagnostic-note {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-block-start: var(--space-3);
  }

  .provider-settings-details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    overflow: clip;
  }

  .provider-settings-details > summary {
    background: var(--color-surface);
    cursor: pointer;
    display: grid;
    font-weight: 600;
    gap: var(--space-1);
    padding: var(--space-4);
  }

  .provider-settings-details > summary small {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 400;
  }

  .provider-settings-details > summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  .provider-settings-details-content {
    background: var(--color-surface-muted);
    border-block-start: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-4);
    padding: var(--space-4);
  }

  .provider-settings-actions {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    bottom: var(--space-3);
    display: flex;
    gap: var(--space-4);
    justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    position: sticky;
    z-index: 2;
  }

  @media (max-width: 42rem) {
    .provider-settings-boundary,
    .provider-settings-actions {
      align-items: stretch;
      flex-direction: column;
    }
  }

  /* Date input */
  .app-date-input, .app-time-input {
    --icon-button-size: var(--control-height, 2.5rem);
    min-width: 0;
    position: relative;
    width: 100%;
  }

  .app-date-input-display,
  .app-date-input-picker {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font: inherit;
    height: 2.5rem;
    min-width: 0;
  }

  .app-date-input > .app-date-input-display, .app-time-input > [data-app-time-input] {
    padding: var(--space-2) calc(var(--icon-button-size,2rem) + var(--space-3)) var(--space-2) var(--space-3);
    width: 100%;
  }

  .app-date-input-display:focus-visible {
    border-color: var(--color-accent);
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  .app-date-input-display[aria-invalid="true"] {
    border-color: var(--color-danger);
  }

  .app-date-input-picker {
    block-size: 1px;
    inline-size: 1px;
    inset: auto 0 0 auto;
    opacity: 0;
    padding: 0;
    pointer-events: none;
    position: absolute;
  }

  .app-date-input > .app-icon-button, .app-time-input > .app-icon-button {
    inset-block: 0;
    inset-inline-end: 0;
    height: 100%;
    border: 0;
    border-inline-start: 1px solid var(--color-border);
    border-radius: 0 var(--radius-control) var(--radius-control) 0;
    background: transparent;
    position: absolute;
  }

  .app-overlay.has-form-content.is-compact:has([data-app-date-picker]) { height: fit-content; block-size: fit-content; max-height: calc(100dvh - 1rem); max-block-size: calc(100dvh - 1rem); width: min(36rem,calc(100vw - 1rem)); }
  .app-overlay.has-form-content.is-compact:has([data-app-time-picker]) { width: min(24rem,calc(100vw - 1rem)); height: auto; }
  [data-app-time-picker] > [hidden] { display: none; }
  .app-overlay.has-form-content.is-compact:has([data-app-date-picker]) .app-overlay-frame { height: auto; grid-template-columns: minmax(0,1fr) auto; grid-template-rows: auto auto auto; }
  .app-overlay:has([data-app-date-picker]) .app-overlay-header { grid-column: 2; grid-row: 1; padding-inline-start: 0; border-block-end: 0; }
  .app-overlay:has([data-app-date-picker]) .app-overlay-header > div { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .app-overlay:has([data-app-date-picker]) .app-overlay-header-content { grid-column: 1; grid-row: 1; padding: var(--space-2) var(--space-4); border-block-end: 0; }
  .app-overlay:has([data-app-date-picker]) .app-overlay-body { grid-column: 1 / -1; grid-row: 2; border-block-start: 1px solid var(--color-border); }
  .app-overlay:has([data-app-date-picker]) .app-overlay-footer { grid-column: 1 / -1; grid-row: 3; }
  .app-overlay.has-form-content:has([data-app-date-picker]) :is(.app-overlay-header,.app-overlay-footer) { padding: var(--space-2) var(--space-4); }
  .app-overlay.has-form-content:has([data-app-date-picker]) .app-overlay-content { height: auto; padding: var(--space-4); }
  .app-date-picker { --calendar-day-size: max(2.75rem,min(4rem,calc((100dvh - 22rem) / 6),calc((100vw - 3rem) / 7))); display: grid; gap: var(--space-2); }
  .app-date-picker-navigation { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: var(--space-2); }
  .app-date-picker-navigation h3 { font-size: var(--font-size-md); text-align: center; margin: 0; }
  .app-overlay:has(.app-date-picker.is-touch) { --calendar-control-size: var(--icon-button-touch-size); }
  .app-overlay:has(.app-date-picker.is-touch) :is(.app-icon-button,.app-overlay-footer .app-button) { --icon-button-size: var(--calendar-control-size); min-inline-size: var(--calendar-control-size); min-block-size: var(--calendar-control-size); block-size: var(--calendar-control-size); }
  .app-overlay:has(.app-date-picker.is-touch) .app-date-picker-navigation h3 { font-size: var(--font-size-xl); }
  .app-overlay.has-form-content .app-date-picker.is-touch .app-date-picker-day.app-button { font-size: var(--font-size-lg); }
  .app-date-picker-weekdays,.app-date-picker-days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: var(--space-1); }
  .app-date-picker.has-week-selection .app-date-picker-weekdays,.app-date-picker.has-week-selection .app-date-picker-days { grid-template-columns: repeat(8,minmax(0,1fr)); }
  .app-overlay.has-form-content.is-compact:has(.app-date-picker.is-desktop) { width: min(21rem,calc(100vw - 1rem)); }
  .app-overlay.has-form-content:has(.app-date-picker.is-desktop) .app-overlay-content { padding: var(--space-2) var(--space-3); }
  .app-date-picker.is-desktop { --calendar-day-size: 2rem; gap: var(--space-1); }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-day.app-button { border-color: transparent; background: transparent; font-size: var(--font-size-sm); }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-day.app-button:hover { background: var(--color-surface-muted); }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-day.app-button:is(.is-primary,[aria-pressed="true"]) { background: var(--color-accent); color: var(--color-surface); }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-day.is-today { border-color: var(--color-accent); }
  .app-date-picker.is-desktop .app-date-picker-days { gap: 2px; }
  .app-date-picker.is-desktop .app-date-picker-day { border-radius: var(--radius-control); transition: background-color 100ms ease,color 100ms ease; }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-week.app-button { color: var(--color-accent); background: var(--color-surface-muted); font-weight: 600; }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-day.app-button:is(.is-selected-week,.is-week-hover) { background: var(--color-info-soft); color: var(--color-text); }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-week.app-button[aria-pressed="true"] { background: var(--color-accent); color: var(--color-surface); }
  .app-overlay.has-form-content .app-date-picker.is-desktop .app-date-picker-day.app-button:disabled { opacity: .75; cursor: default; }
  .app-date-picker .app-date-picker-week { color: var(--color-text-muted); }
  .app-date-picker .app-date-picker-week[aria-pressed="true"] { background: var(--color-accent); color: var(--color-surface); }
  .app-date-picker-weekdays { text-align: center; font-size: var(--font-size-caption); color: var(--color-text-muted); }
  .app-overlay.has-form-content .app-date-picker .app-date-picker-day.app-button { min-inline-size: 0; min-block-size: var(--calendar-day-size); block-size: var(--calendar-day-size); padding: 0; font-size: var(--font-size-md); }
  .app-date-picker-day.is-other-month { color: var(--color-text-muted); background: var(--color-surface-muted); }
  .app-date-picker .app-date-picker-day.is-weekend { background: var(--color-info-soft); }
  .app-date-picker .app-date-picker-day.is-holiday { background: var(--color-warning-soft); }
  .app-date-picker .app-date-picker-day.is-primary { background: var(--color-accent); color: var(--color-surface); }
  .app-date-picker-day.is-today { border-color: var(--color-accent); border-width: 2px; }
  @media(max-width:30rem),(max-height:40rem) {
    .app-overlay.has-form-content:has([data-app-date-picker]) .app-overlay-content { padding: var(--space-2); }
    .app-date-picker-weekdays,.app-date-picker-days { gap: 2px; }
  }
  @media(max-width:30rem) {
    .app-overlay.has-form-content.is-compact:has(.app-date-picker.is-touch.has-week-selection) { width: calc(100vw - var(--space-2)); }
    .app-overlay.has-form-content:has(.app-date-picker.is-touch.has-week-selection) .app-overlay-content { padding: calc(var(--space-1) / 2); }
    .app-date-picker.is-touch.has-week-selection :is(.app-date-picker-weekdays,.app-date-picker-days) { gap: calc(var(--space-1) / 4); }
  }
  @media(max-height:36rem) {
    .app-overlay:has(.app-date-picker.is-touch) { --calendar-control-size: 2.75rem; }
  }

  /* Shared structured postal fields: rule order also drives keyboard order. */
  .app-postal-address { min-width: 0; container-type: inline-size; }
  .app-postal-address-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
  .app-postal-address-grid[hidden] { display: none; }
  .app-postal-address-field { grid-column: auto / span 6; min-width: 0; }
  .app-postal-address-field .app-settings-field { margin: 0; }
  .app-postal-address-field .app-settings-field > label { min-inline-size: 0; overflow-wrap: anywhere; white-space: normal; }
  .app-postal-address-field[data-required] label::after { content: ' *'; color: var(--color-accent); }
  .app-postal-address-field[data-app-postal-span="1"] { grid-column-end: span 1; }
  .app-postal-address-field[data-app-postal-span="2"] { grid-column-end: span 2; }
  .app-postal-address-field[data-app-postal-span="3"] { grid-column-end: span 3; }
  .app-postal-address-field[data-app-postal-span="4"] { grid-column-end: span 4; }
  .app-postal-address-field[data-app-postal-span="5"] { grid-column-end: span 5; }
  .app-postal-address-field[data-app-postal-span="6"] { grid-column-end: span 6; }
  .app-postal-address-field[data-app-postal-span="7"] { grid-column-end: span 7; }
  .app-postal-address-field[data-app-postal-span="8"] { grid-column-end: span 8; }
  .app-postal-address-field[data-app-postal-span="9"] { grid-column-end: span 9; }
  .app-postal-address-field[data-app-postal-span="10"] { grid-column-end: span 10; }
  .app-postal-address-field[data-app-postal-span="11"] { grid-column-end: span 11; }
  .app-postal-address-field[data-app-postal-span="12"] { grid-column-end: span 12; }
  .app-postal-address-field[data-app-postal-row-start] { grid-column-start: 1; }
  .app-postal-address-toggle { align-items: center; display: inline-flex; gap: var(--space-2); margin-block-end: var(--space-2); font-size: var(--font-size-sm); }
  .app-postal-address-toggle input[type="checkbox"] { width: 1rem; min-height: 1rem; height: 1rem; margin: 0; }
  @container (max-width: 36rem) {
    .app-postal-address-grid { column-gap: var(--space-2); }
  }
  @container (max-width: 24rem) {
    .app-postal-address-field[data-app-postal-cell="house_number"] { grid-column-end: span 4; }
    .app-postal-address-field[data-app-postal-cell="street"]:not([data-app-postal-span="12"]) { grid-column-end: span 8; }
    .app-postal-address-grid[data-locality-count="3"] > [data-app-postal-cell="city"] { grid-column: 1 / -1; }
    .app-postal-address-grid[data-locality-count="3"] > :is([data-app-postal-cell="region"], [data-app-postal-cell="postal_code"]) { grid-column-end: span 6; }
  }

  /* Address form */
    .addresses-master-pair { display: grid; gap: var(--space-4); grid-column: 1 / -1; grid-template-columns: minmax(0, 1.35fr) minmax(26rem, 0.85fr); min-width: 0; }
    .addresses-master-pair > * { min-width: 0; }
    .addresses-master-card,
    .addresses-usage-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); min-width: 0; overflow: hidden; }
    .addresses-master-card > header,
    .addresses-usage-card > header { align-items: center; background: var(--color-surface-muted); border-block-end: 1px solid var(--color-border); display: flex; justify-content: space-between; min-height: 2.25rem; padding: var(--space-2) var(--space-3); }
    .addresses-master-card > header h2,
    .addresses-usage-card > header h2 { font-size: var(--font-size-sm); font-weight: 700; }
    .addresses-master-card-body { display: grid; gap: var(--space-1); min-width: 0; padding: var(--space-3); }
    .addresses-master-row { align-items: center; display: grid; gap: var(--space-2); min-width: 0; }
    .addresses-master-label { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; white-space: nowrap; }
    .addresses-master-card .addresses-master-row input,
    .addresses-master-card .addresses-master-row select,
    .addresses-usage-row input,
    .addresses-usage-row select { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); color: var(--color-text); font: inherit; height: 2.5rem; min-height: 2.5rem; min-width: 0; padding: var(--space-2) var(--space-3); width: 100%; }
    .addresses-master-card .addresses-master-row input:focus-visible,
    .addresses-master-card .addresses-master-row select:focus-visible,
    .addresses-usage-row input:focus-visible,
    .addresses-usage-row select:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 0; }
    .addresses-master-card .addresses-master-row input[readonly],
    .addresses-usage-row input[readonly] { background: var(--color-surface); color: var(--color-text); }
    .addresses-master-card .addresses-master-row select:disabled,
    .addresses-usage-row select:disabled,
    .addresses-type-trigger:disabled { background: var(--color-surface); color: var(--color-text); cursor: default; opacity: 1; }
    .addresses-master-row.is-single { grid-template-columns: 7rem minmax(0, 1fr); }
    .addresses-master-row.is-name-lines,
    .addresses-master-row.is-street { grid-template-columns: 7rem minmax(0, 1fr) 7rem; }
    .addresses-master-row.is-name-lines { align-items: start; }
    .addresses-master-row.is-name-lines .addresses-master-label { padding-block-start: 0.45rem; }
    .addresses-master-name-inputs { display: grid; gap: 0.15rem; grid-column: 2 / -1; }
    .addresses-master-row.is-paired { grid-template-columns: 7rem minmax(8rem, 0.75fr) 6rem minmax(12rem, 1.25fr); }
    .addresses-usage-card-body { padding: var(--space-3); }
    .addresses-usage-details { display: grid; gap: var(--space-1); }
    .addresses-type-row,
    .addresses-usage-row { align-items: center; display: grid; gap: var(--space-2); grid-template-columns: 7rem minmax(0, 1fr); }
    .addresses-type-row > span,
    .addresses-usage-row label { color: var(--color-text-muted); font-size: var(--font-size-sm); font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
    .addresses-type-trigger { justify-content: flex-start; height: var(--control-height, 2.5rem); min-height: var(--control-height, 2.5rem); max-width: none; text-align: start; width: 100%; }
    .addresses-type-overlay-fields { display: grid; gap: var(--space-4); padding: var(--space-4); }
    .addresses-type-choice-group { border: 0; display: grid; gap: var(--space-2); margin: 0; min-width: 0; padding: 0; }
    .addresses-type-choice-group legend { font-size: var(--font-size-sm); font-weight: 700; margin-block-end: var(--space-2); }
    .addresses-type-choices { display: grid; gap: var(--space-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .addresses-type-choice-group.is-address-usage .addresses-type-choices { grid-template-columns: 1fr; }
    .addresses-type-overlay-fields .addresses-type-choices > label,
    .addresses-type-overlay-fields > .addresses-type-option { align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-control); cursor: pointer; display: grid; gap: var(--space-3); grid-template-columns: 1.125rem minmax(0, 1fr); min-height: 2.75rem; padding: var(--space-2) var(--space-3); }
    .addresses-type-overlay-fields .addresses-type-choices > label:has(input:checked),
    .addresses-type-overlay-fields > .addresses-type-option:has(input:checked) { background: var(--color-info-soft); border-color: var(--color-accent); }
    .addresses-type-overlay-fields input[type="radio"],
    .addresses-type-overlay-fields input[type="checkbox"] { accent-color: var(--color-accent); appearance: auto; background: transparent; border: initial; flex: 0 0 1.125rem; height: 1.125rem; margin: 0; min-height: 1.125rem; padding: 0; width: 1.125rem; }
    .addresses-type-overlay-actions { border-block-start: 1px solid var(--color-border); display: flex; justify-content: flex-end; padding-block-start: var(--space-3); }
    .addresses-card-header-actions { align-items: center; display: flex; gap: var(--space-1); }
    .addresses-card-header-actions > span { display: inline-flex; }
    .addresses-card-header-actions > span[hidden] { display: none; }

    @media (max-width: 64rem) {
      .addresses-master-pair,
      .addresses-master-row.is-paired { grid-template-columns: 1fr; }
    }

    @media (max-width: 42rem) {
      .addresses-master-row.is-name-lines,
      .addresses-master-row.is-street,
      .addresses-master-row.is-single,
      .addresses-type-row,
      .addresses-type-choices,
      .addresses-usage-row { grid-template-columns: 1fr; }
      .addresses-master-name-inputs { grid-column: 1; }
    }

  /* Communication summary */
  .app-communication-summary {
    display: grid;
    gap: var(--space-4);
    grid-column: 1 / -1;
    grid-template-columns: minmax(18rem, 0.7fr) minmax(30rem, 1.3fr);
    min-width: 0;
  }

  .app-communication-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    min-width: 0;
    overflow: hidden;
  }

  .app-communication-card > header {
    align-items: center;
    background: var(--color-surface-muted);
    border-block-end: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
  }

  .app-communication-card > header h3 {
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .app-communication-card-body {
    display: grid;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3);
  }

  .app-communication-card-body.is-salutation {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-communication-card-body.is-online {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .app-communication-card-body.is-online .app-communication-field {
    grid-template-columns: 8.5rem minmax(0, 1fr);
  }

  .app-communication-field {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: max-content minmax(0, 1fr);
    min-width: 0;
  }

  .app-communication-field.is-wide {
    grid-column: 1 / -1;
  }

  .app-communication-card-body.is-salutation .app-communication-field.is-wide {
    display: block;
  }

  .app-communication-card-body.is-salutation .app-communication-field.is-wide > span:first-child {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .app-communication-field > span:first-child {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    font-weight: 500;
    white-space: nowrap;
  }

  .app-communication-field input,
  .app-communication-field select {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-text);
    font: inherit;
    height: 2.5rem;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    width: 100%;
  }

  .app-communication-field input[readonly],
  .app-communication-field select:disabled {
    background: var(--color-surface);
    color: var(--color-text);
    opacity: 1;
  }

  .app-communication-linked-control {
    display: block;
    min-width: 0;
  }

  .app-communication-linked-control > a {
    align-items: center;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    color: var(--color-accent);
    display: flex;
    height: 2.5rem;
    min-width: 0;
    overflow: hidden;
    padding: var(--space-2) var(--space-3);
    text-decoration: underline;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .app-communication-linked-control > a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
  }

  .app-communication-linked-control > [hidden] {
    display: none;
  }

  .app-communication-value-unit {
    align-items: center;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(4rem, 0.35fr) max-content;
    min-width: 0;
  }

  .app-communication-value-unit > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  @media (max-width: 64rem) {
    .app-communication-summary {
      grid-template-columns: 1fr;
    }
  }

  @media (max-width: 42rem) {
    .app-communication-card-body.is-salutation,
    .app-communication-card-body.is-online {
      grid-template-columns: 1fr;
    }

    .app-communication-field.is-wide {
      grid-column: auto;
    }

    .app-communication-field {
      align-items: stretch;
      grid-template-columns: 1fr;
    }

    .app-communication-card-body.is-online .app-communication-field {
      grid-template-columns: 1fr;
    }
  }

  /* Panel */
  .app-panel {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel);
    min-width: 0;
    overflow: hidden;
  }

  .app-panel-header {
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-2);
    background: var(--color-surface-muted);
    border-block-end: 1px solid var(--color-border);
    display: flex;
    justify-content: space-between;
    min-height: 2.25rem;
    padding: var(--space-2) var(--space-3);
  }

  .app-panel-header h2 {
    color: var(--color-text);
    font-size: var(--font-size-sm);
    font-weight: 700;
  }

  .app-panel-heading {
    flex: 1 1 14rem;
    min-width: 0;
  }

  .app-panel-heading p {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
    margin-block-start: var(--space-1);
  }

  .app-panel-heading .is-visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    margin: 0;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .app-panel-actions {
    align-items: center;
    flex-wrap: wrap;
    max-inline-size: 100%;
    display: flex;
    gap: var(--space-1);
  }
  .app-panel-actions > .app-status-badge { min-inline-size: var(--status-min-width); }

  .app-panel.is-editing > .app-panel-header [data-app-panel-read-action],
  .app-form-section.is-edit > .app-panel-header [data-app-panel-read-action] {
    display: none;
  }

  .app-panel-body {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    min-width: 0;
    padding: var(--space-3);
  }

  .app-panel.has-1-columns > .app-panel-body { grid-template-columns: minmax(0, 1fr); }
  .app-panel.has-3-columns > .app-panel-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-panel.has-4-columns > .app-panel-body { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .app-panel-view {
    border: 0;
    grid-column: 1 / -1;
    margin: 0;
    min-inline-size: 0;
    padding: 0;
  }

  @media (hover: hover) and (pointer: fine) {
    .app-panel.has-revealed-actions > .app-panel-header > .app-panel-actions,
    .app-form-section.has-revealed-actions > :is(.app-panel-header, .app-form-section-header) > .app-form-section-tools > .app-form-section-actions {
      opacity: 0;
      pointer-events: none;
    }

    .app-panel.has-revealed-actions:hover > .app-panel-header > .app-panel-actions,
    .app-panel.has-revealed-actions:focus-within > .app-panel-header > .app-panel-actions,
    .app-panel.has-revealed-actions.is-editing > .app-panel-header > .app-panel-actions,
    .app-form-section.has-revealed-actions:is(:hover, :focus-within, .is-edit) > :is(.app-panel-header, .app-form-section-header) > .app-form-section-tools > .app-form-section-actions {
      opacity: 1;
      pointer-events: auto;
    }
  }

  @media (max-width: 64rem) {
    .app-panel.has-3-columns > .app-panel-body,
    .app-panel.has-4-columns > .app-panel-body,
    .app-panel-body {
      grid-template-columns: 1fr;
    }
  }

  /* Tabs */
  .app-tabs {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-panel) var(--radius-panel) 0 0;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .app-tabs-list {
    align-items: stretch;
    display: flex;
    min-width: max-content;
  }

  .app-tab {
    border-block-end: 0.2rem solid transparent;
    color: var(--color-text-muted);
    display: inline-flex;
    font-size: var(--font-size-sm);
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-4);
    text-decoration: none;
    white-space: nowrap;
  }

  .app-tab:hover:not(.is-disabled),
  .app-tab:focus-visible {
    background: var(--color-info-soft);
    color: var(--color-accent);
  }

  .app-tab:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
  }

  .app-tab.is-active {
    border-block-end-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 700;
  }

  .app-tab.is-disabled {
    cursor: default;
    opacity: 0.55;
  }

  /* Compact read data */
  .app-data-list {
    --app-data-list-columns: 1;
    display: grid;
    gap: var(--space-2) var(--space-4);
    grid-template-columns: repeat(var(--app-data-list-columns), minmax(0, 1fr));
    margin: 0;
    min-width: 0;
  }

  .app-data-list.has-2-columns { --app-data-list-columns: 2; }
  .app-data-list.has-3-columns { --app-data-list-columns: 3; }
  .app-data-list.has-4-columns { --app-data-list-columns: 4; }

  .app-data-list-item {
    align-items: baseline;
    border-block-end: 1px solid var(--color-border);
    display: grid;
    gap: var(--space-2);
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 1.2fr);
    padding-block: var(--space-2);
  }

  .app-data-list-item.has-action {
    align-items: center;
  }

  .app-data-list.is-compact > .app-data-list-item {
    align-items: center;
    min-block-size: var(--control-height-compact);
    padding-block: 0;
  }

  .app-data-list-item dt {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .app-data-list-item dt.is-visually-hidden {
    clip-path: inset(50%);
    block-size: 1px;
    inline-size: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
  }
  .app-data-list-item[hidden] { display: none; }

  .app-data-list-item dd {
    font-variant-numeric: tabular-nums;
    margin: 0;
    overflow-wrap: anywhere;
    text-align: end;
  }

  .app-data-list-item.is-muted dd { color: var(--color-text-muted); }
  .app-data-list-item.is-success dd { color: var(--color-success); }
  .app-data-list-item.is-warning dd { color: var(--color-warning); }
  .app-data-list-item.is-error dd { color: var(--color-danger); }
  .app-data-list.is-stacked > .app-data-list-item { grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-1); padding-block: var(--space-2); }
  .app-data-list.is-stacked > .app-data-list-item dd { text-align: start; white-space: pre-line; }

  .app-data-list-item dd.has-action {
    align-items: center;
    display: flex;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  .app-data-list-value {
    min-width: 0;
  }

  .app-data-list-action {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
    justify-content: flex-end;
  }

  /* Empty state */
  .app-empty-state {
    align-items: center;
    background: var(--color-surface-muted);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-panel);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    min-height: 10rem;
    padding: var(--space-6);
    text-align: center;
  }

  .app-empty-state.is-compact {
    min-height: 0;
    padding: var(--space-4);
  }

  .app-empty-state p {
    color: var(--color-text-muted);
    max-width: 48rem;
  }

  .app-empty-state-actions,
  .app-image-field-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    justify-content: center;
  }

  /* File selection/drop target; submission remains with the owning form. */
  .app-file-selection {
    display: grid;
    gap: var(--space-1);
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .app-file-selection[hidden] { display: none; }
  .app-file-selection > li {
    border-block-end: 1px solid var(--color-border);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
    padding-block: var(--space-2);
  }
  .app-file-selection > li:last-child { border-block-end: 0; }

  /* Invisible drop surfaces show feedback only while files are being dragged. */
  .app-file-drop-surface { position: relative; isolation: isolate; }
  .app-file-drop-surface.is-dragover::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
    background: color-mix(in srgb, var(--color-accent) 9%, transparent);
  }

  .app-file-drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-block-size: 8rem;
    padding: var(--space-4);
    border: 1px dashed var(--color-info-soft-border);
    border-radius: var(--radius-panel);
    background: var(--color-surface-muted);
    text-align: center;
    cursor: pointer;
  }
  .app-file-drop-zone:hover,
  .app-file-drop-zone.is-dragover {
    border-color: var(--color-accent);
    background: var(--color-info-soft);
  }
  .app-file-drop-zone:focus-within { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-file-drop-zone .app-button.app-file-drop-zone-trigger {
    min-block-size: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--color-accent);
    white-space: normal;
  }
  .app-file-drop-zone .app-file-drop-zone-trigger:focus-visible { outline: 0; }
  .app-file-drop-zone:has(button:disabled) { cursor: not-allowed; opacity: .6; }
  .app-file-drop-zone p { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-control); }
  .app-file-drop-zone-icon {
    display: block;
    inline-size: 1.5rem;
    block-size: 1.5rem;
    background: var(--color-accent);
    mask: url("../icons/upload.svg?v=36d1b3f2dc9a") center / contain no-repeat;
    -webkit-mask: url("../icons/upload.svg?v=36d1b3f2dc9a") center / contain no-repeat;
  }

  /* Image projection */
  .app-image-field {
    position: relative;
    display: grid;
    gap: var(--space-3);
    margin: 0;
    min-width: 0;
  }

  .app-image-field [hidden] {
    display: none;
  }

  .app-image-field-frame {
    align-items: center;
    aspect-ratio: 4 / 3;
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    display: flex;
    justify-content: center;
    overflow: hidden;
    position: relative;
    transition: border-color 140ms ease, background-color 140ms ease;
  }

  .app-image-field-frame.has-image {
    background: var(--color-surface);
  }

  .app-image-field-frame.is-dragover {
    background: var(--color-info-soft);
    border-color: var(--color-accent);
  }

  .app-icon-button-icon.is-arrow-left { mask-image: url("../icons/arrow-left.svg"); -webkit-mask-image: url("../icons/arrow-left.svg"); }
  .app-icon-button-icon.is-arrow-right { mask-image: url("../icons/arrow-right.svg"); -webkit-mask-image: url("../icons/arrow-right.svg"); }
  .app-icon-button-icon:is(.is-arrow-up,.is-arrow-down) { mask-image: url("../icons/arrow-right.svg"); -webkit-mask-image: url("../icons/arrow-right.svg"); }
  .app-icon-button-icon.is-arrow-up { transform: rotate(-90deg); }
  .app-icon-button-icon.is-arrow-down { transform: rotate(90deg); }

  .app-image-field-drop-hint {
    display: none;
    position: absolute;
    inset: var(--space-2);
    z-index: 4;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 2px dashed var(--color-accent);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    color: var(--color-accent);
    text-align: center;
    pointer-events: none;
  }
  .app-image-field-frame.is-dragover > .app-image-field-drop-hint { display: flex; }
  .app-image-gallery-actions {
    position: absolute;
    inset-block-start: var(--space-2);
    inset-inline-end: var(--space-2);
    z-index: 2;
    display: flex;
    gap: var(--space-2);
  }
  .app-image-gallery-navigation {
    position: absolute;
    inset-block-end: var(--space-2);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    z-index: 2;
    padding: var(--space-1);
    border-radius: var(--radius-control);
    background: color-mix(in srgb, var(--color-surface) 94%, transparent);
    white-space: nowrap;
  }
  .app-image-gallery-navigation > span { min-inline-size: 3.5rem; text-align: center; font-size: var(--font-size-sm); }
  .app-image-gallery-actions > .app-icon-button { background: var(--color-surface); }
  .app-icon-button-icon.is-star { mask-image: url("../icons/star.svg"); -webkit-mask-image: url("../icons/star.svg"); }
  .app-icon-button[aria-pressed="true"] > .app-icon-button-icon.is-star {
    position: relative;
    background-color: var(--color-favorite);
    mask-image: url("../icons/star-filled.svg");
    -webkit-mask-image: url("../icons/star-filled.svg");
  }
  .app-icon-button[aria-pressed="true"] > .app-icon-button-icon.is-star::after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: currentColor;
    mask: url("../icons/star.svg") center / contain no-repeat;
    -webkit-mask: url("../icons/star.svg") center / contain no-repeat;
  }
  .app-image-field-status.is-progress { color: var(--color-text-muted); }

  .app-image-field-frame img {
    height: 100%;
    object-fit: contain;
    width: 100%;
  }

  .app-image-field-document {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-inline-size: 0;
    padding: var(--space-4);
    text-align: center;
    inline-size: 100%;
  }
  .app-image-field-document > .app-file-link-icon { inline-size: 2.25rem; block-size: 2.25rem; }
  .app-image-field-document > strong { max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-control); }
  .app-image-field-document > a { font-size: var(--font-size-sm); }

  .app-image-field-empty {
    align-self: stretch;
    display: flex;
    flex: 1;
    min-height: 100%;
    width: 100%;
  }

  .app-image-field-dropzone,
  .app-image-field-empty-readonly {
    align-items: center;
    color: var(--color-text);
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: var(--space-2);
    justify-content: center;
    min-height: 10rem;
    padding: var(--space-4);
    text-align: center;
    width: 100%;
  }

  .app-image-field-dropzone {
    cursor: pointer;
  }

  .app-image-field-dropzone:hover .app-image-field-select,
  .app-image-field:focus-within .app-image-field-select {
    border-color: var(--color-accent);
    color: var(--color-accent);
  }

  .app-image-field-drop-icon {
    border: 2px solid var(--color-border);
    border-radius: 999px;
    display: block;
    height: 2.75rem;
    position: relative;
    width: 2.75rem;
  }

  .app-image-field-drop-icon::before {
    background: var(--color-text-muted);
    content: "";
    inset: 0.6rem;
    mask: url("../icons/upload.svg?v=36d1b3f2dc9a") center / contain no-repeat;
    position: absolute;
    -webkit-mask: url("../icons/upload.svg?v=36d1b3f2dc9a") center / contain no-repeat;
  }

  .app-image-field-help,
  .app-image-field-empty-readonly > span {
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
  }

  .app-image-field-select {
    margin-block-start: var(--space-1);
  }

  .app-image-field-input {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .app-image-field-frame > .app-icon-button {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    inset: var(--space-2) auto auto var(--space-2);
    opacity: 0;
    position: absolute;
    transition: opacity 140ms ease;
    z-index: 2;
  }

  .app-image-field-frame.is-empty > .app-icon-button {
    display: none;
  }

  .app-image-field-frame.has-image:hover > .app-icon-button,
  .app-image-field-frame.has-image:focus-within > .app-icon-button,
  .app-image-field-frame > .app-icon-button[aria-expanded="true"] {
    opacity: 1;
  }

  .app-image-field-editor {
    align-items: stretch;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-control);
    display: grid;
    gap: var(--space-2);
    inset: 3.25rem auto auto var(--space-2);
    min-width: 8.5rem;
    padding: var(--space-2);
    position: absolute;
    z-index: 3;
  }

  .app-image-field-editor[hidden] {
    display: none;
  }

  .app-image-field-frame-actions {
    position: absolute;
    inset: var(--space-2) auto auto var(--space-2);
    display: grid;
    gap: var(--space-2);
    z-index: 2;
    opacity: 0;
    transition: opacity 140ms ease;
  }
  .app-image-field-frame:has(> [data-app-image-field-edit]:not(:disabled)) > .app-image-field-frame-actions {
    inset-block-start: calc(var(--space-2) + 2rem + var(--space-2));
  }
  .app-image-field-frame-actions > .app-icon-button {
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  }
  .app-image-field-frame-actions > [hidden] { display: none; }
  .app-image-field-frame:hover > .app-image-field-frame-actions,
  .app-image-field-frame:focus-within > .app-image-field-frame-actions { opacity: 1; }
  @media (hover: none), (pointer: coarse) {
    .app-image-field-frame > .app-image-field-frame-actions { opacity: 1; }
  }

  .app-image-field.is-fallback-locked .app-image-field-frame > .app-icon-button,
  .app-image-field.is-fallback-locked .app-image-field-editor {
    display: none;
  }

  .app-image-field-editor > label {
    cursor: pointer;
  }

  .app-image-field-status {
    color: var(--color-danger);
    font-size: var(--font-size-sm);
    margin: 0;
  }

  @media (hover: none) {
    .app-image-field-frame.has-image > .app-icon-button {
      opacity: 1;
    }
  }

  @media (max-width: 48rem) {
    .app-data-list,
    .app-data-list.has-2-columns,
    .app-data-list.has-3-columns,
    .app-data-list.has-4-columns {
      --app-data-list-columns: 1;
    }
  }
}

@layer overrides {
  textarea {
    resize: none;
  }
  /* Data tables keep identity at the left and explicitly marked controls at the right. */
  table > :is(thead, tbody, tfoot) > tr > :is(th, td):first-child { text-align: left; }
  .app-month-calendar.is-display table > :is(thead, tbody) > tr > th:first-child { text-align: center; }
  table > :is(thead, tbody, tfoot) > tr > :is(th, td).is-actions { text-align: right; }
  table :is(th, td).is-actions .app-table-actions { justify-content: flex-end; }
}

/* DataTable: shared accessible read tables. */
@layer components {
  .app-data-table-wrap { position: relative; overflow-x: auto; max-inline-size: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
  .app-data-table { border-collapse: collapse; inline-size: 100%; font-size: .875rem; text-align: start; }
  .app-data-table caption, .app-data-table :is(th, td) .is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; margin: -1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-data-table th { background: var(--color-surface-muted); color: var(--color-text-muted); font-weight: 600; white-space: nowrap; }
  .app-data-table th, .app-data-table td { padding: var(--space-3); text-align: start; border-block-end: 1px solid var(--color-border); vertical-align: top; }
  .app-data-table tbody tr:last-child td { border-block-end: 0; }
  .app-data-table tbody tr:hover { background: var(--color-surface-muted); }
  /* One native link stretches over a read-only row, including its responsive record. */
  .app-data-table tbody tr.is-linked { position: relative; isolation: isolate; cursor: pointer; }
  .app-data-table tbody tr.is-linked > td,
  .app-data-table tbody tr.is-linked .app-data-table-cell-content { position: static; }
  .app-data-table .app-data-table-row-link { position: static; color: inherit; text-decoration: none; }
  .app-data-table [data-app-overlay-row] { cursor: pointer; }
  .app-data-table .app-overlay-row-link { color: inherit; text-decoration: none; }
  .app-data-table .app-overlay-row-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-data-table .app-data-table-row-link::after { content: ''; position: absolute; inset: 0; z-index: 1; }
  .app-data-table tbody tr.is-linked:is(:hover, :focus-within) { background: color-mix(in srgb, var(--color-accent) 7%, var(--color-surface)); }
  .app-data-table .app-data-table-row-link:focus-visible { outline: none; }
  .app-data-table .app-data-table-row-link:focus-visible::after { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .app-data-table tbody tr[data-app-row-id][hidden] { display: none; }
  .app-data-table tbody tr[data-app-row-parent]:not([data-app-row-parent=""]) { background: color-mix(in srgb, var(--color-accent) 4%, var(--color-surface)); }
  .app-data-table tr[data-app-row-parent]:not([data-app-row-parent=""]) td.is-primary > .app-data-table-cell-content { padding-inline-start: var(--space-3); border-inline-start: 2px solid var(--color-border); }
  .app-row-heading { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2); }
  .app-row-heading.is-single-line { flex-wrap: nowrap; gap: var(--space-1); }
  .app-row-disclosure { display: inline-flex; flex-shrink: 0; white-space: nowrap; }
  .app-row-disclosure[hidden], .app-row-child-label[hidden] { display: none; }
  .app-row-disclosure .app-row-disclosure-button.app-button { min-block-size: 0; block-size: auto; padding: 0 var(--space-1); border: 0; background: transparent; color: var(--color-accent); font-size: var(--font-size-caption); gap: var(--space-1); box-shadow: none; }
  .app-row-disclosure-button > .app-static-icon { inline-size: .75rem; block-size: .75rem; }
  .app-row-disclosure-button[aria-expanded="false"] > .app-static-icon { transform: rotate(-90deg); }
  .app-row-child-label { display: inline-flex; padding: 0 var(--space-1); border-radius: var(--radius-control); color: var(--color-text-muted); background: var(--color-surface-muted); font-size: var(--font-size-caption); font-weight: 600; }
  .app-data-table .is-numeric { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .app-data-table .is-actions { text-align: end; white-space: nowrap; }
  .app-data-table .is-actions .app-table-actions { justify-content: flex-end; }
  .app-data-table-wrap.has-fixed-columns .app-data-table { table-layout: fixed; min-inline-size: var(--table-fixed-min-width, 64rem); }
  .app-data-table-text { display: block; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-data-table-wrap.has-sticky-actions .app-data-table .is-actions { position: sticky; inset-inline-end: 0; z-index: 1; background: var(--color-surface); }
  .app-data-table-wrap.has-sticky-actions .app-data-table th.is-actions,
  .app-data-table-wrap.has-sticky-actions .app-data-table tr:hover td.is-actions { background: var(--color-surface-muted); }
  .app-data-table col.is-media, .app-data-table :is(th, td).is-media { inline-size: var(--table-media-column-width, 5rem); }

  /* Fit read tables to their available width; narrow sections present labelled records. */
  .app-data-table-wrap.is-responsive { --read-table-wide-breakpoint: default; container: read-table / inline-size; overflow: visible; min-inline-size: 0; inline-size: 100%; }
  .app-data-table-wrap.is-responsive.has-compact-breakpoint { --read-table-wide-breakpoint: compact; }
  .app-data-table-wrap.is-responsive.has-wide-breakpoint { --read-table-wide-breakpoint: wide; }
  .app-data-table-wrap.is-responsive.has-reference-breakpoint { --read-table-wide-breakpoint: reference; }
  .app-data-table-wrap.is-responsive .app-data-table { table-layout: fixed; }
  .app-data-table-wrap.is-responsive .app-data-table :is(th, td) { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
  .app-data-table-wrap .app-data-table td.is-align-top { vertical-align: top; }
  .app-data-table-wrap .app-data-table td.is-align-middle { vertical-align: middle; }
  .app-data-table-wrap .app-data-table td.is-align-bottom { vertical-align: bottom; }
  .app-data-table-wrap.is-responsive .app-data-table-cell-content { min-inline-size: 0; }
  .app-data-table-wrap.is-responsive td.is-actions { text-align: end; }
  .app-data-table-wrap.is-responsive td.is-actions .app-table-actions { flex-wrap: wrap; }
  .app-data-table th.is-selection .app-checkbox { display: inline-flex; align-items: center; gap: var(--space-2); }
  .app-data-table-cell-label { display: none; }
  .app-data-table-wrap .app-data-table :is(th, td, col)[hidden] { display: none; }
  .app-data-table-wrap.is-responsive .app-table-meta { margin-block-start: var(--space-1); }
  .app-data-table-wrap.is-responsive .app-status-badge { white-space: normal; }
  @container read-table ((max-width: 52rem) and style(--read-table-wide-breakpoint: default)) or ((max-width: 40rem) and style(--read-table-wide-breakpoint: compact)) or ((max-width: 60rem) and style(--read-table-wide-breakpoint: wide)) or ((max-width: 80rem) and style(--read-table-wide-breakpoint: reference)) {
    .app-data-table-wrap.is-responsive tbody tr > td:has(> .app-data-table-cell-content > [data-app-cell-omitted]) { display: none; }
    .app-data-table-wrap.is-responsive :is(.app-data-table, tbody) { display: block; }
    .app-data-table-wrap.is-responsive colgroup { display: none; }
    .app-data-table-wrap.is-responsive thead { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
    .app-data-table-wrap.is-responsive .app-data-table:has(> thead > tr > th.is-selection) > thead { position: static; display: block; clip-path: none; inline-size: auto; block-size: auto; overflow: visible; }
    .app-data-table-wrap.is-responsive .app-data-table:has(> thead > tr > th.is-selection) > thead > tr { display: block; }
    .app-data-table-wrap.is-responsive .app-data-table:has(> thead > tr > th.is-selection) > thead th:not(.is-selection) { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; }
    .app-data-table-wrap.is-responsive th.is-selection { display: block; }
    .app-data-table-wrap.is-responsive th.is-selection .is-visually-hidden { position: static; clip-path: none; inline-size: auto; block-size: auto; margin: 0; overflow: visible; white-space: normal; }
    .app-data-table-wrap.is-responsive tbody tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--color-border); }
    .app-disclosure.is-section > .app-disclosure-content > .app-data-table-wrap.is-responsive > .app-data-table > tbody > tr:first-child { padding-block-start: 0; }
    .app-data-table-wrap.is-responsive tbody tr:last-child { border-block-end: 0; }
    .app-data-table-wrap.is-responsive tbody tr > td { display: block; min-inline-size: 0; padding: 0; border: 0; text-align: start; }
    .app-data-table-wrap.is-responsive tbody tr > td.is-actions { grid-column: 1 / -1; }
    .app-data-table-wrap.is-responsive tbody tr > td.is-primary { grid-column: 1 / -1; }
    .app-data-table-wrap.is-responsive.has-reference-breakpoint:not(.has-media-records) tbody tr > td:has(.app-reference-link.has-detail) { grid-column: 1 / -1; }
    .app-data-table-wrap.is-responsive tbody tr > td.is-primary:has(> .app-data-table-cell-content > .is-visually-hidden:only-child),
    .app-data-table-wrap.is-responsive tbody tr > td.is-actions:has(> .app-data-table-cell-content:empty) { display: none; }
    .app-data-table-wrap.is-responsive tbody tr:has(> td:first-child.is-media) > td:first-child { grid-column: 1; grid-row: 1; align-self: start; }
    .app-data-table-wrap.is-responsive tbody tr:has(> td:first-child.is-media) > td:nth-child(2) { grid-column: 1 / -1; grid-row: 1; min-block-size: 2.25rem; padding-inline-start: calc(var(--table-media-column-width, 5rem) + var(--space-4)); }
    .app-data-table-wrap.is-responsive.has-media-records tbody tr { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .app-data-table-wrap.is-responsive.has-media-records tbody tr:has(> td:first-child.is-media) > td:nth-child(2) { grid-column: auto; grid-row: auto; min-block-size: 0; padding-inline-start: 0; }
    .app-data-table-wrap.is-responsive.has-media-records tbody tr:has(> td:first-child.is-media) > td.is-primary { grid-column: 1 / -1; grid-row: 1; padding-inline-start: calc(var(--table-media-column-width, 5rem) + var(--space-4)); }
    .app-data-table-wrap.is-responsive.has-media-records tbody tr > td.is-media:has(> .app-data-table-cell-content > [hidden]:only-child),
    .app-data-table-wrap.is-responsive.has-media-records tbody tr > td.is-actions:has(> .app-data-table-cell-content > [hidden]):not(:has(> .app-data-table-cell-content > :not([hidden]))) { display: none; }
    .app-data-table-wrap.is-responsive.has-media-records tbody tr:has(> td:first-child.is-media > .app-data-table-cell-content > [hidden]:only-child) > td.is-primary { padding-inline-start: 0; }
    .app-data-table-wrap.is-responsive .app-data-table-cell-label { display: block; margin-block-end: var(--space-1); font-size: var(--font-size-caption); font-weight: 600; color: var(--color-text-muted); }
  }
  @container read-table (max-width: 30rem) {
    .app-data-table-wrap.is-responsive tbody tr { grid-template-columns: repeat(var(--read-table-narrow-columns, 1), minmax(0, 1fr)); }
  }
  @container read-table (max-width: 40rem) {
    .app-data-table-wrap.is-responsive.has-media-records tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
}

/* SortableTable: pointer, touch and keyboard ordering on the shared DataTable. */
@layer components {
  .app-sortable-table { min-inline-size: 0; }
  .app-sortable-help { color: var(--color-text-muted); font-size: var(--font-size-sm); margin-block: 0 var(--space-2); }
  .app-sortable-table > .is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-sortable-position { display: inline-flex; align-items: center; vertical-align: middle; flex-wrap: nowrap; max-inline-size: 100%; gap: var(--space-1); font-variant-numeric: tabular-nums; }
  .app-sortable-position > .app-sortable-media:not([hidden]) { display: flex; align-items: center; min-inline-size: 0; }
  .app-sortable-handle-slot { display: inline-grid; flex: none; inline-size: var(--icon-button-size,2rem); block-size: var(--icon-button-size,2rem); }
  .app-sortable-handle-slot.is-compact { --icon-button-size: max(1.5rem,var(--touch-target-min-size,0px)); }
  .app-sortable-handle-slot.is-compact > .app-icon-button:is(:hover,[aria-pressed="true"]) { border-color: transparent; }
  .app-sortable-handle-slot.is-compact > .app-icon-button:focus-visible { outline-offset: -2px; }
  .app-record-list-field:has(> dd > .app-sortable-position) > dt { margin-inline-start: calc(var(--icon-button-size,2rem) + var(--space-1)); }
  [data-app-sort-handle] { cursor: grab; touch-action: none; user-select: none; }
  [data-app-sort-handle][aria-pressed="true"] { cursor: grabbing; background: var(--color-info-soft); color: var(--color-accent); }
  .app-sortable-table .is-sortable-source > td { background: var(--color-surface-muted); opacity: .55; }
  .app-sortable-table .is-sortable-before > td { box-shadow: inset 0 3px var(--color-accent); }
  .app-sortable-table .is-sortable-after > td { box-shadow: inset 0 -3px var(--color-accent); }
  .app-sortable-table.is-sorting { user-select: none; }
  .app-sortable-table[aria-busy="true"] [data-app-sort-handle] { cursor: progress; }
  .app-sortable-ghost, .app-sortable-controls {
    position: fixed; inset: auto; margin: 0; z-index: 1000; padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-accent); border-radius: var(--radius-control);
    color: var(--color-text); background: var(--color-surface);
    box-shadow: 0 4px 16px rgb(0 0 0 / .12); max-inline-size: calc(100vw - 16px);
  }
  .app-sortable-ghost { pointer-events: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); }
  .app-sortable-controls { display: flex; flex-wrap: nowrap; gap: var(--space-1); padding: var(--space-2); }
  .app-sortable-controls[hidden] { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .app-sortable-table [data-app-sort-id] > td { transition: background-color 120ms ease, opacity 120ms ease; }
  }
}

@layer components {
  /* FilterBar compact variant: one form, labelled native selects. */
  .app-filter-bar.is-compact { border: 0; border-radius: 0; background: transparent; }
  .app-filter-bar.is-compact > header { padding-inline: 0; }
  .app-filter-bar.is-compact .app-filter-bar-body { padding: var(--space-3) 0; }
  .app-filter-bar.is-compact .app-filter-bar-form { gap: var(--space-2); }
  .app-filter-bar.is-compact .app-filter-bar-field { flex: 1 1 8rem; min-width: 7rem; }
  .app-filter-bar.is-compact .app-filter-bar-field.is-search { flex: 2 1 16rem; }
  .app-filter-bar.is-compact .app-filter-bar-field > label { font-size: .75rem; font-weight: 400; color: var(--color-text-muted); }
  .app-filter-bar.is-compact .app-filter-bar-select { max-width: none; }
  .app-filter-bar.has-advanced-fields .app-filter-bar-form > .app-filter-bar-field:not(.is-search) { flex: 0 1 12rem; }
  .app-filter-bar-advanced > .app-disclosure { border: 1px solid var(--color-border); border-radius: var(--radius-control); }
  .app-filter-bar-advanced > .app-disclosure > summary { padding-inline: var(--space-3); }
  .app-filter-bar-advanced > .app-disclosure > .app-disclosure-content { padding-inline: var(--space-3); }
  .app-filter-bar.is-single-row .app-filter-bar-form { flex-wrap: nowrap; }
  .app-filter-bar.is-single-row .app-filter-bar-field { min-inline-size: 0; min-width: 0; }
  @media (max-width: 48rem) {
    .app-filter-bar.is-compact .app-filter-bar-field.is-search { flex-basis: 100%; }
    .app-filter-bar.is-compact .app-filter-bar-field:not(.is-search) { flex-basis: 12rem; }
    .app-filter-bar.is-compact .app-filter-bar-actions { width: auto; }
  }
  .app-filter-bar:has(> .app-filter-bar-body > .app-filter-bar-form.is-panel) { overflow: visible; }
  .app-filter-bar .app-filter-bar-form.is-panel { display: grid; align-items: start; gap: var(--space-3); container: filter-panel / inline-size; }
  .app-filter-bar-heading, .app-filter-bar-title { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .app-filter-bar-heading { justify-content: space-between; align-items: center; }
  .app-filter-bar-title { align-items: baseline; }
  .app-filter-bar-title > span:empty { display: none; }
  .app-filter-bar-title > h2 { font-size: var(--font-size-sm); }
  .app-filter-bar-title > p { flex-basis: 100%; color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-filter-bar-heading > .app-filter-bar-actions { width: auto; margin-inline-start: auto; flex-wrap: wrap; }
  .app-filter-bar-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-3); }
  .app-filter-bar .app-filter-bar-fields > .app-filter-bar-field { min-inline-size: 0; }
  .app-filter-bar .app-filter-bar-fields .app-filter-bar-select { max-inline-size: none; }
  .app-filter-bar .app-filter-bar-fields .app-filter-bar-field > :is(input, select) { min-block-size: var(--control-height, 2.5rem); }
  @container filter-panel (min-width: 70rem) {
    .app-filter-bar-fields.has-column-spans { grid-template-columns: repeat(12, minmax(0, 1fr)); }
    .app-filter-bar-fields.has-column-spans > .app-filter-bar-field { grid-column: span 3; }
    .app-filter-bar-fields.has-column-spans > .has-span-2 { grid-column: span 2; }
    .app-filter-bar-fields.has-column-spans > .has-span-4 { grid-column: span 4; }
    .app-filter-bar-fields.has-column-spans > .has-span-6 { grid-column: span 6; }
    .app-filter-bar-fields.has-column-spans > .has-span-12 { grid-column: span 12; }
  }
  /* Persistent detail panel, deliberately nonmodal. */
  .app-detail-panel { min-inline-size: 0; border-inline-start: 1px solid var(--color-border); background: var(--color-surface-muted); }
  .app-detail-panel[hidden] { display: none; }
  .app-detail-panel-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4); border-block-end: 1px solid var(--color-border); }
  .app-detail-panel-header h2 { font-size: 1rem; }
  .app-detail-panel-content { padding: var(--space-4); overflow: auto; max-block-size: 75vh; scrollbar-width: thin; }
  /* Compact scientific read projection; gaps in collection stay visible. */
  .app-sparkline { min-width: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-2); }
  .app-sparkline figcaption, .app-sparkline p { color: var(--color-text-muted); font-size: .75rem; }
  .app-sparkline svg, .app-sparkline p { grid-column: 1 / -1; }
  .app-sparkline svg { width: 100%; height: 3rem; overflow: visible; }
  .app-sparkline path { fill: none; stroke: var(--color-accent); stroke-width: 1.5; stroke-linecap: round; vector-effect: non-scaling-stroke; }
  /* Sparkline chart variant: area segments retain gaps; labels are localized by the caller. */
  .app-sparkline-plot { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-2); min-inline-size: 0; }
  .app-sparkline-scale { display: flex; flex-direction: column; justify-content: space-between; padding-block: .375rem; color: var(--color-text-muted); font-size: .6875rem; }
  .app-sparkline.is-chart svg { grid-column: 2; block-size: 5rem; background-image: linear-gradient(var(--color-border) 1px, transparent 1px), linear-gradient(90deg, var(--color-border) 1px, transparent 1px); background-size: 100% 25%, 20% 100%; }
  .app-sparkline.is-chart .app-sparkline-area { fill: var(--color-info-soft); stroke: none; fill-opacity: .7; }
  .app-sparkline-time { grid-column: 2; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); color: var(--color-text-muted); font-size: .6875rem; }
}

@layer components {
  /* Windowed DataTable: stable native table semantics and bounded viewport. */
  .app-data-table-wrap.is-windowed { max-block-size: var(--data-table-window-max-block-size, min(58vh, 36rem)); overflow: auto; overflow-anchor: none; }
  .app-data-table-wrap.has-sticky-first-column :is(th,td):first-child { position: sticky; inset-inline-start: 0; z-index: 2; min-inline-size: 10rem; max-inline-size: 14rem; background: var(--color-surface); box-shadow: 1px 0 var(--color-border); }
  .app-data-table-wrap.has-sticky-first-column th:first-child { background: var(--color-surface-muted); z-index: 3; }
  @media (max-width: 42rem) {
    .app-data-table-wrap.has-fixed-columns.has-sticky-first-column :is(th,td):first-child,
    .app-data-table-wrap.has-fixed-columns.has-sticky-actions .app-data-table .is-actions {
      position: static; inset-inline: auto; z-index: auto;
    }
  }
  .app-data-table-wrap.is-windowed thead { position: sticky; inset-block-start: 0; z-index: 1; }
  .app-data-table .app-table-spacer td { padding: 0; border: 0; }
}

/* Focus: shared light theme; opt in at the page boundary. */
@layer tokens {
  .app-theme-focus {
    --color-surface: #fff;
    --color-surface-muted: #f5f8fc;
    --color-text: #12213c;
    --color-text-muted: #566883;
    --color-border: #dce4ef;
    --color-accent: #105ee8;
    --color-info-soft: #eaf3ff;
    --color-info-soft-border: #cbdffa;
    --color-success: #23833c;
    --color-success-soft: #edf8ef;
    --color-success-soft-border: #cae9d0;
    --color-warning: #a56916;
    --color-warning-soft: #fff8eb;
    --color-warning-soft-border: #f0dfbc;
    --color-danger: #ba424b;
    --color-danger-soft: #fff1f2;
    --color-danger-soft-border: #efcfd3;
    --radius-panel: .375rem;
    --radius-control: .25rem;
    --font-size-sm: .875rem;
    --font-size-md: .9375rem;
    --font-size-lg: 1.125rem;
    --font-size-caption: .75rem;
    --font-size-detail: .6875rem;
    --font-size-control: .8125rem;
    --workspace-content-space: clamp(1rem, 1.8vw, 1.75rem);
  }
}
@layer tokens {
  /* Standalone displays opt into dark appearance without changing the ERP shell. */
  .app-presentation-page[data-display-theme="dark"], .app-display-image-panel.is-active.has-image {
    color-scheme: dark;
    --color-surface: #101b2c;
    --color-surface-muted: #18263a;
    --color-text: #edf3ff;
    --color-text-muted: #a8bad2;
    --color-border: #344760;
    --color-accent: #80b7ff;
    --color-info-soft: #182f4c;
    --color-info-soft-border: #3c658e;
    --color-success: #8cdaa5;
    --color-success-soft: #173829;
    --color-success-soft-border: #3b7651;
    --color-warning: #efc16d;
    --color-warning-soft: #3c301b;
    --color-warning-soft-border: #806337;
    --color-danger: #ff9ca5;
    --color-danger-soft: #40232e;
    --color-danger-soft-border: #83414e;
  }
}
@layer layout {
  /* Stable full-width workspaces; Shell removes its outer inset for this contract. */
  .app-workspace-page { display: grid; gap: 0; min-inline-size: 0; inline-size: 100%; max-inline-size: none; }
}
@layer components {
  .app-theme-focus { color: var(--color-text); background: var(--color-surface); font-family: var(--font-family-base); font-size: var(--font-size-sm); line-height: 1.5; font-variant-numeric: tabular-nums; }
  .app-theme-focus h3 { font-size: var(--font-size-md); }
  .app-workspace-header { display: flex; align-items: center; gap: var(--space-6); min-block-size: 5.25rem; padding: var(--space-4) var(--workspace-content-space); border-block-end: 1px solid var(--color-border); }
  .app-workspace-header > div { min-inline-size: 0; }
  .app-workspace-header.is-wrapping { flex-wrap: wrap; }
  .app-workspace-header.is-wrapping > h1 { flex-shrink: 0; }
  .app-workspace-header.is-wrapping > .app-workspace-identity { flex: 1 1 12rem; }
  .app-workspace-header.is-wrapping > .app-workspace-actions { flex: 1 1 24rem; }
  .app-workspace-header p { color: var(--color-text-muted); overflow-wrap: anywhere; }
  .app-workspace-header h1 { font-size: 1.875rem; line-height: 1; letter-spacing: -.035em; font-weight: 700; }
  .app-workspace-identity { display: grid; gap: .125rem; min-inline-size: 0; padding-inline-start: var(--space-5); border-inline-start: 1px solid var(--color-border); }
  .app-workspace-identity > span { color: var(--color-text-muted); font-size: .75rem; }
  .app-workspace-identity > .app-reference-link { justify-self: start; min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--space-6); margin-block-start: var(--space-1); white-space: normal; }
  .app-workspace-identity > .app-reference-link > .app-static-icon { flex-shrink: 0; }
  .app-workspace-identity > .app-reference-link > span { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-workspace-identity > strong, .app-workspace-identity-line > strong { font-size: var(--font-size-sm); font-weight: 600; overflow-wrap: anywhere; }
  .app-workspace-identity-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); min-inline-size: 0; }
  .app-workspace-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--space-4); margin-inline-start: auto; }
  .app-workspace-actions.is-start { inline-size: 100%; justify-content: flex-start; margin-inline-start: 0; }
  .app-workspace-actions > .is-trailing { margin-inline-start: auto; }
  .app-workspace-header > .app-workspace-actions { gap: var(--space-2); }
  .app-workspace-context { color: var(--color-text-muted); font-size: .8125rem; }
  .app-workspace { display: grid; min-inline-size: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; background: var(--color-surface); }
  .app-workspace.is-interactive { block-size: var(--workspace-height, clamp(34rem, calc(100dvh - 11rem), 85rem)); overflow: hidden; }
  .app-workspace-navigation { --workspace-tab-space: var(--space-4); display: flex; align-items: stretch; min-inline-size: 0; gap: var(--space-3); padding-inline: max(0px, calc(var(--workspace-content-space) - var(--workspace-tab-space))); border-block-end: 1px solid var(--color-border); }
  .app-workspace-navigation > .app-tabs { flex: 1; min-inline-size: 0; border: 0; border-radius: 0; padding: 0; background: transparent; }
  .app-workspace-navigation .app-tabs-list { gap: var(--space-3); overflow-x: auto; scrollbar-width: thin; }
  .app-workspace-navigation .app-tab { flex-shrink: 0; display: flex; align-items: center; min-block-size: 3.25rem; padding: .875rem 1rem; border: 0; border-block-end: 3px solid transparent; border-radius: 0; color: var(--color-text-muted); background: transparent; font-size: var(--font-size-sm); font-weight: 600; white-space: nowrap; }
  .app-workspace-navigation .app-tab:hover { color: var(--color-accent); background: var(--color-surface-muted); }
  .app-workspace-navigation .app-tab.is-active { border-block-end-color: var(--color-accent); color: var(--color-accent); background: transparent; font-weight: 600; box-shadow: none; }
  .app-workspace-navigation > .app-button { align-self: center; flex-shrink: 0; }
  .app-workspace-navigation > .app-button[hidden] { display: inline-flex; visibility: hidden; }
  .app-workspace-navigation > .app-workspace-actions { display: flex; gap: var(--space-2); align-self: center; margin-inline-start: auto; flex-shrink: 0; }
  .app-workspace-actions[hidden] { display: none; }
  .app-workspace-content { min-inline-size: 0; min-block-size: 0; }
  .is-interactive > .app-workspace-content { overflow-y: auto; overflow-anchor: none; scrollbar-gutter: stable; overscroll-behavior: contain; }
  .app-workspace-footer { display: flex; align-items: center; gap: var(--space-2); padding: .5rem var(--workspace-content-space); min-block-size: 2.75rem; border-block-start: 1px solid var(--color-border); background: var(--color-surface-muted); color: var(--color-text-muted); font-size: .75rem; }
  .app-workspace-footer > img { flex-shrink: 0; opacity: .8; }
  .app-workspace-footer > span { margin-inline-start: auto; }
  .app-theme-focus .app-workspace-footer .app-button.is-text { min-block-size: 1.5rem; padding: 0; background: transparent; border: 0; font-size: .75rem; font-weight: 400; color: var(--color-text-muted); text-align: start; }
  .app-theme-focus .app-button.is-text:hover { color: var(--color-accent); text-decoration: underline; }
  .app-theme-focus :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }
  .app-theme-focus .app-workspace-form { gap: 0; min-inline-size: 0; }
  .app-theme-focus .app-form-section { border: 0; border-radius: 0; background: transparent; overflow: visible; scroll-margin-block-start: var(--space-4); }
  .app-theme-focus .app-form-section-header { border: 0; padding: var(--workspace-content-space); padding-block-end: var(--space-4); flex-wrap: wrap; gap: var(--space-3); }
  .app-theme-focus .app-form-section-heading h2 { font-size: 1.5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; }
  .app-theme-focus .app-form-section-heading p { max-inline-size: 85ch; line-height: 1.5; }
  .app-theme-focus .app-form-section-message { margin-inline: var(--workspace-content-space); margin-block-end: var(--space-4); border: 0; border-radius: .25rem; padding: .625rem .875rem; font-size: .8125rem; }
  .app-theme-focus .app-form-section-body { padding: 0 var(--workspace-content-space) var(--workspace-content-space); }
  .app-theme-focus .app-form-section-content { gap: var(--space-5); }
  .app-theme-focus .app-form-section:not([hidden]) ~ .app-form-section:not([hidden]) { border-block-start: 1px solid var(--color-border); }
  .app-theme-focus .app-settings-field:not(.is-row) { display: flex; flex-direction: column; gap: .375rem; }
  .app-theme-focus .app-settings-field > label { margin: 0; font-size: .8125rem; font-weight: 600; }
  .app-theme-focus .app-settings-field > :is(input, select, textarea, .app-date-input) { order: 1; }
  .app-theme-focus .app-settings-field-help { order: 2; margin: 0; font-size: .75rem; line-height: 1.5; }
  .app-theme-focus .app-settings-field-meta { order: 3; flex-wrap: wrap; margin: 0; min-block-size: 0; }
  .app-theme-focus .app-settings-field-meta:empty { display: none; }
  .app-theme-focus .app-settings-field-source { background: transparent; border-radius: 0; color: var(--color-text-muted); padding: 0; font-size: .6875rem; }
  .app-theme-focus .app-settings-field-source.is-database { color: var(--color-success); }
  .app-theme-focus .app-settings-field.has-error:not(.is-row) { padding: 0; background: transparent; }
  .app-theme-focus .app-settings-field.is-row.has-error { background: transparent; }
  .app-theme-focus fieldset.app-form-section { padding: var(--space-4); margin-block-start: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
  .app-theme-focus fieldset.app-form-section .app-form-section-legend { float: none; width: auto; background: var(--color-surface); padding: 0 var(--space-2); border: 0; font-size: var(--font-size-sm); }
  .app-theme-focus fieldset.app-form-section .app-form-section-header { padding: 0 0 var(--space-4); }
  .app-theme-focus fieldset.app-form-section .app-form-section-body { padding: 0; }
  .app-workspace-note { margin: 0; padding: var(--space-4) var(--workspace-content-space); color: var(--color-text-muted); font-size: .75rem; border-block-start: 1px solid var(--color-border); }
  /* Full-width workspace surfaces own one inset, shared with section content. */
  .app-workspace-notice {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
    padding: var(--space-4) var(--workspace-content-space);
    background: var(--color-info-soft); border-block-end: 1px solid var(--color-info-soft-border);
  }
  .app-workspace-notice > div { flex: 1 1 24rem; min-inline-size: 0; overflow-wrap: anywhere; }
  .app-workspace-notice p { color: var(--color-text-muted); margin-block-start: var(--space-1); }
  .app-theme-focus .app-form-actions.is-workspace {
    margin: 0; border: 0; border-block-start: 1px solid var(--color-border); border-radius: 0;
    padding: var(--space-3) var(--workspace-content-space); bottom: 0;
  }
  .app-form-actions.is-workspace > p { flex: 1 1 24rem; min-inline-size: 0; color: var(--color-text-muted); overflow-wrap: anywhere; }
  .app-theme-focus .app-button { min-block-size: var(--touch-target-min-size, 2.375rem); padding: .5rem .875rem; border-radius: var(--radius-control); border-color: var(--color-border); font-size: var(--font-size-control); font-weight: 600; }
  :is(.app-button.is-compact, .app-theme-focus .app-button.is-compact) { --button-icon-size: var(--icon-button-icon-size,1rem); min-height: var(--icon-button-size, 2rem); min-block-size: var(--icon-button-size, 2rem); block-size: var(--icon-button-size, 2rem); padding: 0 var(--space-2); }
  .app-theme-focus .app-button.is-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
  .app-theme-focus .app-button.is-primary:hover:not(:disabled) { background: color-mix(in srgb, var(--color-accent) 90%, black); }
  .app-theme-focus .app-icon-button { border-radius: var(--radius-control); }
  /* Section commands use the same compact target for text and icon actions. */
  .app-form-section-actions .app-button {
    --button-icon-size: var(--icon-button-icon-size, 1rem);
    block-size: max(var(--icon-button-size, 2rem), var(--touch-target-min-size, 0px));
    min-block-size: max(var(--icon-button-size, 2rem), var(--touch-target-min-size, 0px));
    min-height: max(var(--icon-button-size, 2rem), var(--touch-target-min-size, 0px));
    padding-block: 0;
  }

  @media (max-width: 70rem) {
    .app-workspace-navigation .app-tabs-list { gap: 0; }
    .app-workspace-navigation { --workspace-tab-space: .875rem; }
    .app-workspace-header { gap: var(--space-4); }
  }
  @media (max-width: 42rem) {
    .app-workspace-header { flex-wrap: wrap; gap: var(--space-3); }
    .app-workspace-header h1 { font-size: 1.625rem; }
    .app-workspace-actions { inline-size: 100%; justify-content: flex-start; }
    .app-workspace-identity { padding-inline-start: var(--space-3); }
    .app-workspace-navigation { flex-wrap: wrap; gap: 0; }
    .app-workspace-navigation > .app-tabs { flex-basis: 100%; }
    .app-workspace-navigation > .app-workspace-selector { flex: 1; min-inline-size: 0; inline-size: auto; order: 0; }
    .app-workspace-navigation > .app-workspace-actions { inline-size: auto; order: 1; }
    .app-workspace-navigation > .app-button { margin: var(--space-2); margin-inline-start: auto; }
    .app-workspace-footer > span { display: none; }
    .app-theme-focus .app-form-section { --app-form-section-columns: 1; }
    .app-theme-focus fieldset.app-form-section { padding: var(--space-3); }
  }
  /* Standard visible fields; DateInput owns its hidden native picker in every state. */
  .app-theme-focus :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]), select, textarea):where(:not(.app-text-editor-surface textarea, .app-date-input-picker, .app-settings-input-group > input, .app-settings-input-group > select)) { min-inline-size: 0; max-inline-size: 100%; min-block-size: var(--control-height, 2.5rem); border: var(--control-border-width,1px) solid var(--entry-border-color,var(--color-border)); border-radius: var(--radius-control); padding: var(--space-2); padding-block: var(--control-block-space,var(--space-2)); padding-inline-start: var(--control-leading-space, var(--space-2)); color: var(--color-text); background: var(--color-surface); font-size: var(--font-size-sm); }
  .app-theme-focus :is(input, select, textarea):focus:where(:not(.app-date-input-picker)) { border-color: var(--color-accent); }
  .app-theme-focus :is(input, select, textarea):disabled:where(:not(.app-date-input-picker)) { opacity: .65; cursor: default; }
  .app-theme-focus :is(input:not([type="checkbox"], [type="radio"], [type="hidden"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="range"], [type="color"]), textarea):disabled:where(:not(.app-date-input-picker)) { cursor: text; }
  .app-theme-focus input[type="checkbox"] { accent-color: var(--color-accent); }
  .app-theme-focus .app-button.is-danger { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger-soft-border); }
  /* MetricRibbon and compact list/chart variants share one appearance. */
  .app-metric-ribbon { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; padding: var(--space-4) 0; margin-block-end: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface-muted); }
  .app-metric { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: var(--space-4); row-gap: .125rem; padding: .125rem var(--space-6); border-block: 0; border-inline-start: 0; border-inline-end: 1px solid var(--color-border); background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
  .app-metric:last-child { border-inline-end: 0; }
  .app-metric.is-readonly { cursor: default; }
  .app-metric.is-readonly:not(:has(.app-metric-icon)) { grid-template-columns: minmax(0,1fr); }
  .app-metric.is-readonly:not(:has(.app-metric-icon)) :is(strong,span) { grid-column: 1; }
  .app-metric.is-readonly:hover strong { color: inherit; }
  .app-metric-caption { grid-column: 1 / -1; color: var(--color-text-muted); font-size: var(--font-size-caption); line-height: 1.4; }
  .app-metric-meter { grid-column: 1 / -1; inline-size: 100%; block-size: .375rem; margin-block-start: var(--space-2); border: 0; border-radius: var(--radius-control); background: var(--color-border); appearance: none; }
  .app-metric-meter::-webkit-meter-bar { border: 0; border-radius: var(--radius-control); background: var(--color-border); }
  .app-metric-meter::-webkit-meter-optimum-value { border-radius: var(--radius-control); background: var(--color-accent); }
  .app-metric-meter::-moz-meter-bar { border-radius: var(--radius-control); background: var(--color-accent); }
  .app-metric-ribbon.is-compact { margin: 0; padding-block: var(--space-3); }
  .app-metric-ribbon.is-compact .app-metric { padding-inline: var(--space-4); align-content: start; }
  .app-metric-ribbon.is-compact .app-metric strong { font-size: var(--font-size-metric-compact); font-variant-numeric: tabular-nums; }
  .app-metric-icon { grid-column: 1; grid-row: 1 / -1; align-self: center; inline-size: 2rem; block-size: 2rem; opacity: .6; }
  .app-metric strong { grid-column: 2; font-family: inherit; font-size: var(--font-size-metric); font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
  .app-metric span { grid-column: 2; font-size: .8125rem; }
  .app-metric:hover strong { color: var(--color-accent); }
  .app-theme-focus .app-tabs { border: 0; border-block-end: 1px solid var(--color-border); border-radius: 0; padding: 0; background: transparent; }
  .app-theme-focus .app-tabs-list { gap: var(--space-2); }
  .app-theme-focus .app-tab { border: 0; border-block-end: 3px solid transparent; border-radius: 0; padding: .75rem 1rem; font-size: .8125rem; font-weight: 600; color: var(--color-text-muted); background: transparent; }
  .app-theme-focus .app-tab.is-active { border-block-end-color: var(--color-accent); color: var(--color-accent); font-weight: 600; box-shadow: none; }
  /* Tabs with adjacent actions share one continuous baseline. */
  .app-tabs-toolbar { display: flex; align-items: center; gap: var(--space-3); min-inline-size: 0; border-block-end: 1px solid var(--color-border); }
  .app-tabs-toolbar > .app-tabs { flex: 1; min-inline-size: 0; border: 0; border-radius: 0; padding: 0; background: transparent; }
  .app-tabs-actions { display: flex; align-items: center; flex: none; gap: var(--space-1); }
  .app-theme-focus .app-filter-bar-field > label { font-size: .6875rem; }
  .app-theme-focus .app-filter-bar :is(input, select):where(:not(.app-date-input-picker)) { background: var(--color-surface); border-radius: var(--radius-control); min-block-size: 2.25rem; font-size: .8125rem; }
  .app-theme-focus .app-filter-bar-field input:focus-visible,
  .app-theme-focus .app-filter-bar-select:focus-visible { outline: none; box-shadow: inset 0 0 0 1px var(--color-accent); }
  .app-theme-focus .app-data-table-wrap { border: 0; border-radius: var(--radius-control); }
  .app-theme-focus .app-data-table { font-size: .8125rem; line-height: 1.4; }
  .app-theme-focus .app-data-table th { background: var(--color-surface-muted); color: var(--color-text); font-size: .75rem; font-weight: 600; padding-block: .625rem; }
  .app-theme-focus .app-data-table td { vertical-align: middle; padding-block: .375rem; }
  .app-theme-focus .app-data-table td:has(> .app-icon-button) { min-inline-size: 3rem; inline-size: 3rem; text-align: center; }
  .app-theme-focus .app-data-table :is(td > a, .app-table-link) { color: var(--color-text); text-decoration: none; font-weight: 500; }
  .app-theme-focus .app-data-table :is(td > a, .app-table-link):hover { color: var(--color-accent); text-decoration: underline; }
  .app-data-table .app-table-meta { display: block; color: var(--color-text-muted); font-size: var(--font-size-caption); margin-block-start: var(--space-1); }
  .app-theme-focus .app-sparkline { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
  .app-theme-focus .app-sparkline figcaption { color: var(--color-text); font-weight: 600; }
  .app-theme-focus .app-sparkline strong { font-size: .8125rem; }
  @media (max-width: 48rem) {
    .app-metric { padding-inline: var(--space-4); column-gap: var(--space-2); }
    .app-metric-ribbon { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-4); }
    .app-metric:nth-child(even) { border-inline-end: 0; }
    .app-theme-focus .app-tab { padding-inline: .75rem; }
  }
  @media (max-width: 75rem) {
    .app-theme-focus .app-detail-panel { border-inline-start: 0; border-block-start: 1px solid var(--color-border); margin-block-start: var(--space-4); }
  }
  .app-metric { text-decoration: none; color: var(--color-text); }
  /* DurationProgress shares the central metric tokens and native progress semantics. */
  .app-duration-progress { display: grid; gap: var(--space-3); color: var(--color-text); }
  .app-receipt { display: flex; align-items: baseline; justify-content: center; flex-wrap: wrap; gap: var(--space-3); padding-block: var(--space-6); font-size: clamp(2rem, 5vw, 3rem); font-weight: 650; color: var(--color-text); }
  .app-receipt > span { font-variant-numeric: tabular-nums; }
  .app-clock-feedback { margin: auto; padding: var(--space-6); inline-size: min(32rem, calc(100vw - 2rem)); max-block-size: calc(100dvh - 2rem); overflow: auto; border: 0; border-radius: var(--radius-panel); background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-popover); text-align: center; }
  .app-clock-feedback::backdrop { background: rgb(8 26 46 / .35); }
  .app-clock-feedback-icon { inline-size: clamp(7rem, 20vw, 9rem); block-size: auto; display: block; margin-inline: auto; }
  /* Receipt icons reference shared SVG geometry and inherit the active theme. */
  .app-animated-icon[data-icon-motion="arrive"] { color: var(--color-success); }
  .app-animated-icon[data-icon-motion="leave"] { color: var(--color-danger); }
  .app-animated-icon[data-icon-motion="steam"] { color: var(--color-warning); }
  .app-animated-icon[data-icon-motion="resume"] { color: var(--color-accent); }
  .app-animated-icon[data-icon-motion="sunshine"] { color: var(--color-warning); }
  .app-animated-icon-body { color: var(--color-text-muted); }
  .app-animated-icon[data-icon-motion="none"] .app-animated-icon-body { color: inherit; }
  [data-icon-motion="steam"] .app-animated-icon-body { color: inherit; }
  .app-animated-icon[data-icon-motion="arrive"] .app-animated-icon-motion { animation: app-clock-arrive 2.8s cubic-bezier(.4,0,.2,1) infinite; }
  .app-animated-icon[data-icon-motion="leave"] .app-animated-icon-motion { animation: app-clock-leave 2.8s cubic-bezier(.4,0,.2,1) infinite; }
  .app-animated-icon[data-icon-motion="resume"] .app-animated-icon-motion { animation: app-clock-resume 2.8s ease-in-out infinite; }
  .app-animated-icon[data-icon-motion="steam"] :is(.app-animated-icon-motion, .app-animated-icon-secondary) { animation: app-clock-steam 2.8s ease-in-out infinite; }
  .app-animated-icon[data-icon-motion="steam"] .app-animated-icon-secondary { animation-delay: -.95s; }
  .app-animated-icon[data-icon-motion="sunshine"] .app-animated-icon-motion { transform-box: fill-box; transform-origin: center; animation: app-icon-sunshine 3s ease-in-out infinite; }
  .app-button:disabled .app-animated-icon { color: var(--color-text-muted); }
  .app-button:disabled :is(.app-animated-icon-motion, .app-animated-icon-secondary) { animation: none; }
  @keyframes app-clock-arrive { 0%,15%,100% { transform: translateX(-5px); } 48%,78% { transform: translateX(5px); } }
  @keyframes app-clock-leave { 0%,15% { transform: translateX(-3px); opacity: 1; } 65%,79% { transform: translateX(7px); opacity: 1; } 88% { transform: translateX(7px); opacity: 0; } 89% { transform: translateX(-3px); opacity: 0; } 100% { transform: translateX(-3px); opacity: 1; } }
  @keyframes app-clock-steam { 0% { transform: translateY(3px); opacity: .15; } 35% { opacity: .85; } 80%,100% { transform: translateY(-5px); opacity: 0; } }
  @keyframes app-clock-resume { 0%,20%,100% { transform: translateX(0); } 50%,70% { transform: translateX(3px); } }
  @keyframes app-icon-sunshine { 0%,100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-3px) rotate(8deg); } }
  @media (prefers-reduced-motion: reduce) {
    .app-animated-icon[data-icon-motion] :is(.app-animated-icon-motion, .app-animated-icon-secondary) { animation: none; }
  }
  .app-duration-clock { white-space: nowrap; font-variant-numeric: tabular-nums; }
  .app-duration-primary { display: flex; align-items: baseline; gap: var(--space-2); }
  .app-duration-primary > .app-duration-clock, .app-quantity-summary strong { font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 650; line-height: 1.15; letter-spacing: -.035em; }
  .app-duration-primary > span:last-child, .app-duration-caption { color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-summary-stack { display: grid; gap: var(--space-3); align-content: start; }
  .app-quantity-group { --quantity-columns: 1; display: grid; grid-template-columns: repeat(var(--quantity-columns),minmax(0,1fr)); grid-template-rows: auto auto; gap: var(--space-5) 0; }
  .app-quantity-group.has-2-columns { --quantity-columns: 2; }
  .app-quantity-group.has-3-columns { --quantity-columns: 3; }
  .app-quantity-group.has-4-columns { --quantity-columns: 4; }
  .app-quantity-group .app-quantity-summary { min-inline-size: 0; grid-row: span 2; grid-template-rows: subgrid; }
  .app-quantity-group .app-quantity-summary > dd { align-content: start; }
  .app-quantity-group .app-quantity-summary:not(:first-child) > :is(dt,dd) { padding-inline-start: var(--space-3); }
  .app-quantity-group .app-quantity-primary { flex-wrap: wrap; }
  .app-quantity-summary { display: grid; gap: var(--space-5); margin: 0; }
  .app-quantity-summary dt { display: flex; align-items: center; min-block-size: var(--status-height); color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-quantity-summary dd { display: grid; gap: var(--space-3); margin: 0; border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-4); }
  .app-quantity-primary { display: flex; align-items: baseline; gap: var(--space-2); }
  .app-quantity-summary strong { font-variant-numeric: tabular-nums; }
  .app-quantity-group.is-compact { gap: var(--space-3) 0; }
  .app-quantity-group.is-compact .app-quantity-summary { gap: var(--space-2); }
  .app-quantity-group.is-compact .app-quantity-summary dd { gap: var(--space-2); padding-block-start: var(--space-2); }
  .app-quantity-group.is-compact .app-quantity-summary strong { font-size: var(--font-size-title); }
  .app-quantity-primary > span, .app-quantity-caption { color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-summary-schedule { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); }
  .app-summary-schedule-title { margin: 0 0 var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 500; }
  .app-schedule-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .app-schedule-list > li { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); }
  .app-schedule-list > li > strong { font-size: var(--font-size-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
  .app-schedule-detail { color: var(--color-text-muted); font-size: var(--font-size-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .app-schedule-list > li > .app-status-badge { margin-inline-start: auto; }
  .app-duration-week { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--space-2); padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); font-size: var(--font-size-caption); }
  .app-duration-week > span { color: var(--color-text-muted); }
  .app-duration-week-label { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-1) var(--space-2); min-inline-size: 0; }
  .app-duration-overtime { display: inline-flex; align-items: baseline; flex-wrap: wrap; column-gap: var(--space-1); color: var(--interval-additional-color); font-weight: 600; }
  .app-duration-overtime > span:first-child { white-space: nowrap; }
  .app-duration-overtime.is-empty { visibility: hidden; }
  .app-duration-week strong { font-weight: 600; }
  .app-duration-bar { --duration-divider-width: 2px; --duration-divider-color: #fff; --duration-fill: linear-gradient(to left, var(--color-accent) var(--duration-regular-share, 100%), var(--interval-additional-color) var(--duration-regular-share, 100%)); appearance: none; inline-size: 100%; block-size: var(--space-2); overflow: hidden; border: 0; border-radius: var(--radius-control); background: var(--color-surface-muted); accent-color: var(--color-accent); }
  .app-duration-bar.has-divider { --duration-fill: linear-gradient(to left, var(--color-accent) max(0px, calc(var(--duration-regular-share) - var(--duration-divider-width))), var(--duration-divider-color) 0, var(--duration-divider-color) var(--duration-regular-share), var(--interval-additional-color) 0); }
  .app-duration-bar::-webkit-progress-bar { background: var(--color-surface-muted); }
  .app-duration-bar::-webkit-progress-value { background: var(--duration-fill); }
  .app-duration-bar::-moz-progress-bar { background: var(--duration-fill); }
  [data-duration-running="true"] .app-duration-colon.is-blinking { animation: app-duration-blink 1s steps(1,end) infinite; }
  @keyframes app-duration-blink { 50% { opacity: .15; } }
  @media (prefers-reduced-motion: reduce) { [data-duration-running="true"] .app-duration-colon.is-blinking { animation: none; } }
  .app-metric span { color: var(--color-text-muted); }
  .app-metric.is-critical strong { color: var(--color-danger); }
  .app-section-title { font-size: 1.75rem; font-weight: 650; line-height: 1.2; letter-spacing: -.035em; }
  .app-theme-focus .app-tab:hover { color: var(--color-accent); background: var(--color-surface-muted); }
  .app-workspace-navigation .app-tabs-list { gap: var(--space-3); }
  .app-workspace-navigation .app-tab { font-size: var(--font-size-sm); padding-inline: var(--workspace-tab-space); }
  .app-workspace-navigation > .app-tabs { border: 0; }
  @media (max-width: 70rem) { .app-workspace-navigation .app-tabs-list { gap: 0; } }
  @media (max-width: 48rem) { .app-workspace-navigation { --workspace-tab-space: var(--space-3); } }
}
@layer utilities {
  .app-workspace-content [hidden] { display: none; }
}

/* Focus standard record editors and read projections. */
@layer tokens {
  .app-record-editor { --control-height-compact: 2.5rem; }
  .app-theme-focus { --font-size-section: 1.125rem; --font-size-label: .8125rem; }
}
@layer components {
  .app-workspace-section { min-inline-size: 0; padding: var(--workspace-content-space, var(--space-4)); }
  .app-workspace-identity { max-inline-size: min(36rem, 45vw); }
  .app-workspace-header h1 { overflow-wrap: anywhere; }
  .app-workspace-actions > form { margin: 0; }
  .app-workspace-actions .app-button { white-space: normal; text-align: center; }
  .app-section-stack { display: grid; grid-template-columns: minmax(0, 1fr); min-inline-size: 0; gap: var(--space-5); align-content: start; }
  .app-section-stack > * + * { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-4); }
  .app-section-stack.is-continuous { gap: var(--space-3); }
  .app-section-stack.is-continuous > * + :not(.app-record-context) { border-block-start: 0; padding-block-start: 0; }
  .app-section-stack.is-continuous > .app-wizard-progress:not(.is-compact) { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-1); }
  .app-theme-focus .app-panel { border: 0; border-radius: 0; background: transparent; min-inline-size: 0; overflow: visible; }
  .app-theme-focus .app-panel-header { background: transparent; border: 0; padding: 0 0 var(--space-3); gap: var(--space-2); flex-wrap: wrap; }
  .app-theme-focus :is(.app-panel-actions, .app-form-section-actions) { gap: var(--space-2); }
  .app-theme-focus .app-panel-header h2 { font-size: var(--font-size-section); line-height: 1.3; font-weight: 650; letter-spacing: -.02em; }
  .app-theme-focus .app-panel-heading { min-inline-size: 0; }
  .app-aligned-headings .app-panel-header { min-block-size: calc(var(--icon-button-size, 2rem) + var(--space-3)); flex-wrap: nowrap; }
  .app-aligned-headings .app-panel-heading { flex: 1 1 0; }
  :is(.app-panel-header, .app-form-section-header).is-nowrap { flex-wrap: nowrap; }
  :is(.app-panel-header, .app-form-section-header).is-nowrap > :is(.app-panel-heading, .app-form-section-heading) { flex: 1 1 0; min-inline-size: 0; }
  :is(.app-panel-header, .app-form-section-header).is-nowrap h2 { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  :is(.app-panel-header, .app-form-section-header).is-nowrap > .app-form-section-tools { flex: none; }
  .app-theme-focus .app-panel-body { padding: 0; }
  .app-theme-focus .app-form-section:has(> .app-panel-header) > .app-form-section-body { padding: 0; }
  .app-theme-focus .app-form-section:has(> .app-panel-header) .app-form-section-content { gap: var(--space-3); }
  .app-theme-focus .app-form-section.is-compact .app-form-section-content { gap: var(--space-3); }
  .app-theme-focus .app-form-field > :is(span, label), .app-field-label { font-size: var(--font-size-label, var(--font-size-sm)); font-weight: 600; color: var(--color-text-muted); }
  .app-record-editor .app-filter-bar.is-compact .app-filter-bar-field > label { font-size: var(--font-size-label); font-weight: 600; }
  .app-theme-focus :is(input, select, textarea):disabled:where(:not(.app-date-input-picker)) { opacity: 1; background: var(--color-surface-muted); color: var(--color-text-muted); }
  .app-theme-focus .app-settings-field.is-plain :is(input, input:disabled, select, select:disabled, .app-settings-field-suffix) { background: var(--color-surface); }
  .app-readonly-value { display: flex; align-items: center; min-inline-size: 0; min-block-size: var(--control-height-compact); padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .app-readonly-value.is-price-value { background: var(--color-surface); color: var(--color-text); font-variant-numeric: tabular-nums; }
  a.app-readonly-value { color: var(--color-accent); text-underline-offset: .15em; }
  .app-field-error { display: block; color: var(--color-danger); font-size: var(--font-size-sm); }
  .app-form-message { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); }
  .app-form-message.is-error { color: var(--color-danger); background: var(--color-danger-soft); border-color: var(--color-danger-soft-border); }
  .app-theme-focus [aria-invalid="true"] { border-color: var(--color-danger); }
  .app-inline-editor .app-form-field, .app-inline-editor .app-check-field { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr); align-items: center; min-block-size: var(--control-height-compact); gap: var(--space-2); border-block-end: 1px solid var(--color-border); }
  .app-inline-editor .app-form-field > :is(span, label), .app-inline-editor .app-check-field strong { font-size: var(--font-size-sm); font-weight: 400; color: var(--color-text-muted); }
  .app-inline-editor .app-form-field > select { inline-size: 100%; min-block-size: var(--control-height-compact); }
  .app-check-field > label, label.app-check-field { display: flex; gap: var(--space-2); align-items: start; }
  .app-check-field input[type="checkbox"] { inline-size: 1rem; block-size: 1rem; flex-shrink: 0; accent-color: var(--color-accent); margin-block-start: .2rem; }
  .app-check-field span { display: grid; gap: var(--space-1); }
  .app-check-field small { color: var(--color-text-muted); }
  .app-choice-tile { display: grid; justify-items: center; align-content: center; gap: var(--space-2); position: relative; cursor: pointer; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-panel); color: var(--color-text); background: var(--color-surface); text-align: center; }
  .app-choice-tile:hover, .app-choice-tile:has(input:checked) { border-color: var(--color-accent); background: var(--color-info-soft); }
  .app-choice-tile:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-choice-tile > input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
  .app-choice-tile-icon { display: flex; inline-size: 2.75rem; block-size: 2.75rem; align-items: center; justify-content: center; }
  .app-choice-tile-icon img { max-inline-size: 100%; max-block-size: 100%; }
  .app-choice-tile small { color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-table-thumbnail { inline-size: 2.25rem; block-size: 2.25rem; aspect-ratio: 1; display: block; object-fit: cover; margin-inline: auto; border: 1px solid var(--color-border); border-radius: var(--radius-control); }
  .app-table-thumbnail.is-landscape { inline-size: calc(2.25rem * var(--thumbnail-landscape-ratio)); aspect-ratio: var(--thumbnail-landscape-ratio); object-fit: contain; }
  .app-table-thumbnail.is-compact { inline-size: var(--icon-button-size, 2rem); block-size: var(--icon-button-size, 2rem); }
  .app-table-thumbnail.is-large { inline-size: 3rem; block-size: 3rem; }
  .app-table-thumbnail.is-landscape.is-large { inline-size: calc(3rem * var(--thumbnail-landscape-ratio)); block-size: auto; max-inline-size: 100%; }
  .app-table-thumbnail.is-start { margin-inline: 0; }
  .app-table-thumbnail.is-text-height { --thumbnail-text-height: calc(3lh + 3 * var(--space-1)); inline-size: calc(var(--thumbnail-text-height) * var(--thumbnail-landscape-ratio)); block-size: var(--thumbnail-text-height); min-block-size: var(--thumbnail-text-height); max-inline-size: none; object-fit: contain; }
  .app-data-table-wrap.has-media-records .app-sortable-media:not([hidden]) { display: inline-flex; min-inline-size: 0; max-inline-size: 100%; }
  .app-data-table-wrap.has-media-records .app-image-tooltip-trigger:has(> .app-table-thumbnail.is-text-height) { min-inline-size: 0; max-inline-size: 100%; flex-shrink: 1; }
  .app-data-table-wrap.has-media-records .app-table-thumbnail.is-text-height { max-inline-size: 100%; block-size: auto; min-block-size: 0; aspect-ratio: var(--thumbnail-landscape-ratio); }
  .app-table-thumbnail.is-borderless { border: 0; border-radius: 0; }
  .app-table-thumbnail.is-derived { object-fit: contain; background: var(--color-surface-muted); padding: var(--space-1); }
  .app-data-table:has(.app-table-thumbnail, .app-tree-view-thumbnail) { border-collapse: separate; border-spacing: 0; }
  .app-data-table:has(.app-table-thumbnail.is-text-height) { --table-media-column-width: calc((3lh + 3 * var(--space-1)) * var(--thumbnail-landscape-ratio) + 2 * var(--space-3)); }
  .app-data-table .app-table-empty { padding: var(--space-6); text-align: center; color: var(--color-text-muted); }
  .app-theme-focus .app-image-field-frame { max-block-size: 20rem; }
  .app-theme-focus .app-image-field-frame.is-fallback .app-image-field-preview { padding: var(--space-6); }
  .app-theme-focus .app-form-actions { margin-block-start: var(--space-4); }
  @media (max-width: 42rem) {
    .app-workspace-identity { max-inline-size: 100%; }
  }
}

@layer components {
  .app-list-footer { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); flex-wrap: wrap; margin-block-start: var(--space-4); }
  .app-list-footer .app-list-pager { flex: 1; }
  .app-list-panel { min-inline-size: 0; background: var(--color-surface); }
  .app-list-panel > header { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4); flex-wrap: wrap; }
}

/* Field matrices: aligned controls and read values, stacked within narrow sections. */
@layer components {
  .app-field-matrix { min-inline-size: 0; container-type: inline-size; }
  .app-field-matrix.has-2-columns { --field-matrix-template: repeat(2, minmax(0, 1fr)); }
  .app-field-matrix.has-3-columns { --field-matrix-template: repeat(3, minmax(0, 1fr)); }
  .app-field-matrix.has-4-columns { --field-matrix-template: repeat(4, minmax(0, 1fr)); }
  .app-field-matrix.has-5-columns { --field-matrix-template: repeat(5, minmax(0, 1fr)); }
  .app-field-matrix.has-6-columns { --field-matrix-template: repeat(6, minmax(0, 1fr)); }
  .app-field-matrix.is-quantity { --field-matrix-template: minmax(0, 1fr) minmax(0, 2fr) minmax(0, .7fr); }
  .app-field-matrix.is-calculation { --field-matrix-template: minmax(0, .8fr) minmax(0, .5fr) minmax(0, .6fr) minmax(0, 2fr) minmax(0, .6fr); }
  .app-field-matrix.is-calculation.has-4-columns { --field-matrix-template: minmax(0, .8fr) minmax(0, .5fr) minmax(0, .6fr) minmax(0, 2fr); }
  .app-field-matrix.is-calculation.has-3-columns { --field-matrix-template: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 2fr); }
  .app-field-matrix-heading, .app-field-matrix-row { display: grid; grid-template-columns: var(--field-matrix-template); gap: var(--space-2); align-items: center; }
  .app-field-matrix-heading { padding-block-end: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-label); font-weight: 600; }
  .app-field-matrix-row + .app-field-matrix-row { margin-block-start: var(--space-2); }
  .app-field-matrix-cell { min-inline-size: 0; }
  .app-field-matrix-cell-label { display: none; }
  .app-field-matrix-cell > .app-readonly-value { font-variant-numeric: tabular-nums; }
  .app-field-matrix-cell > .app-form-field { margin: 0; }
  @container (max-width: 30rem) {
    .app-field-matrix-heading { display: none; }
    .app-field-matrix-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
    .app-field-matrix-row + .app-field-matrix-row { margin-block-start: var(--space-4); }
    .app-field-matrix-cell:not(.is-label) { display: grid; grid-template-columns: minmax(5rem, .7fr) minmax(0, 2fr); gap: var(--space-2); align-items: center; }
    .app-field-matrix-cell-label { display: block; color: var(--color-text-muted); font-size: var(--font-size-label); }
  }
}

/* Grouped navigation, document workspaces and aligned record sections. */
@layer components {
  .app-workspace.is-document { display: block; block-size: auto; min-block-size: var(--workspace-height, 0); overflow: visible; }
  .app-workspace.is-document > .app-workspace-content { overflow: visible; scrollbar-gutter: auto; }
  .app-workspace.is-document:has(> .app-workspace-content > [data-app-workspace-fit]:not([hidden])) { min-block-size: 0; }
  .app-workspace-selector { inline-size: 100%; padding: var(--space-2) var(--workspace-tab-space); }
  .app-workspace-navigation > .app-tabs[hidden], .app-workspace-selector[hidden] { display: none; }
  .app-tabs.is-grouped, .app-tabs.is-grouped .app-tabs-list { overflow: visible; min-inline-size: 0; }
  .app-tabs.is-grouped .app-tabs-list { flex-wrap: wrap; gap: 0; }
  .app-tab-group { display: flex; align-items: stretch; position: relative; border-block-end: 3px solid transparent; }
  .app-tab-group > .app-tab { border-block-end: 0; }
  .app-tab-group.is-active { border-block-end-color: var(--color-accent); }
  .app-tab-group.is-active > .app-tab { color: var(--color-accent); }
  .app-navigation-menu > summary { display: flex; align-items: center; justify-content: center; list-style: none; min-inline-size: var(--icon-button-size, 2rem); block-size: 100%; cursor: pointer; color: var(--color-text-muted); }
  .app-navigation-menu > summary::-webkit-details-marker { display: none; }
  .app-navigation-menu > summary:hover { color: var(--color-accent); background: var(--color-surface-muted); }
  .app-navigation-menu > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .app-navigation-menu-links { position: absolute; inset-block-start: 100%; inset-inline-start: 0; z-index: 30; display: grid; min-inline-size: 100%; inline-size: max-content; max-inline-size: 22rem; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: 0 .5rem 1.5rem rgb(18 33 60 / 12%); }
  .app-tab-group:last-child .app-navigation-menu-links { inset-inline-start: auto; inset-inline-end: 0; }
  .app-navigation-menu-links a { padding: var(--space-2) var(--space-3); color: var(--color-text); white-space: normal; overflow-wrap: anywhere; text-decoration: none; }
  .app-navigation-menu-links a:hover, .app-navigation-menu-links a[aria-current] { color: var(--color-accent); background: var(--color-info-soft); }
  .app-workspace-identity.is-prominent > strong, .app-workspace-identity.is-prominent > .app-workspace-identity-line > strong { font-size: 1.75rem; line-height: 1.2; font-weight: 700; letter-spacing: -.025em; }
  .app-aligned-sections { grid-template-rows: auto auto; }
  .app-aligned-sections > .app-section-column { grid-row: span 2; grid-template-rows: subgrid; gap: var(--space-5); }
  .app-aligned-sections > .app-section-column + .app-section-column { border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--workspace-content-space); }
  .app-aligned-sections .app-panel { display: flex; flex-direction: column; block-size: 100%; }
  .app-aligned-sections .app-panel-header { min-block-size: calc(var(--icon-button-size, 2rem) + var(--space-3)); flex-shrink: 0; flex-wrap: nowrap; align-items: start; }
  .app-aligned-sections .app-panel-heading { flex: 1 1 0; }
  .app-aligned-sections .app-panel-body { display: flex; flex-direction: column; flex: 1; }
  .app-aligned-sections .app-panel-view { flex: 1; }
  .app-aligned-sections .app-image-field { block-size: 100%; grid-template-rows: minmax(0, 1fr) auto; }
  .app-aligned-sections .app-image-field-frame { aspect-ratio: auto; min-block-size: 12rem; max-block-size: none; }
  .app-aligned-sections .app-image-field-preview { position: absolute; inset: 0; }
  .app-aligned-sections .app-data-table-wrap + .app-workspace-context { margin-block-start: var(--space-3); }
  @media (max-width: 42rem) {
    .app-tabs.is-grouped .app-tab-group { flex: 1 1 50%; min-inline-size: 0; }
    .app-tabs.is-grouped .app-tab { flex: 1; white-space: normal; padding-inline: var(--space-2); align-items: center; }
    .app-navigation-menu-links { max-inline-size: min(22rem, calc(100vw - 2rem)); }
    .app-tab-group:nth-child(even) .app-navigation-menu-links { inset-inline-start: auto; inset-inline-end: 0; }
  }
}

/* Related read sections adapt to the available width without a table scroll area. */
@layer components {
  .app-record-media-layout { container: record-media / inline-size; min-inline-size: 0; }
  .app-record-media-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,1fr); gap: var(--workspace-content-space); align-items: start; min-inline-size: 0; }
  .app-record-media-content, .app-record-media-panel { min-inline-size: 0; }
  .app-record-media-panel { border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--workspace-content-space); }
  .app-record-media-panel .app-panel { margin: 0; }
  .app-record-media-panel .app-image-field-frame { inline-size: 100%; min-inline-size: 0; min-block-size: 16rem; aspect-ratio: 4 / 3; }
  .app-image-preview { display: grid; place-items: center; min-inline-size: 0; }
  .app-image-preview img { display: block; inline-size: 100%; max-block-size: calc(100dvh - 10rem); object-fit: contain; }
  @container record-media (max-width: 44rem) {
    .app-record-media-grid { grid-template-columns: minmax(0,1fr); }
    .app-record-media-panel { border-inline-start: 0; padding-inline-start: 0; border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-4); }
  }
  .app-section-deck { --section-deck-min-width: 272; display: grid; gap: var(--space-4); min-inline-size: 0; }
  .app-section-deck-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) var(--workspace-content-space); align-items: start; }
  .app-section-deck-content.has-2-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-section-deck-content.has-3-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-section-deck-content.has-4-columns { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .app-section-deck-navigation { max-inline-size: 28rem; }
  .app-section-deck-content > .app-form-section { min-inline-size: 0; margin: 0; }
  .app-theme-focus .app-section-deck-content > .app-form-section:not([hidden]) ~ .app-form-section:not([hidden]) { border-block-start: 0; }
  .app-section-deck-content > .app-form-section + .app-form-section { border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--space-4); }
  .app-section-deck.is-paged > .app-section-deck-content { grid-template-columns: minmax(0, 1fr); }
  .app-section-deck.is-paged > .app-section-deck-content > .app-form-section { border-inline-start: 0; padding-inline-start: 0; }
  .app-section-deck.is-paged > .app-section-deck-content > .app-form-section > .app-panel-header { display: none; }
  .app-section-deck :is(dt, dd) { overflow-wrap: anywhere; }
  .app-section-deck .app-data-list-item { grid-template-columns: minmax(0, 1fr) fit-content(45%); }
  .app-section-deck .app-data-list.is-compact { --control-height-compact: 2rem; gap: var(--space-1) var(--space-4); }
  .app-theme-focus .app-section-deck .app-panel-header h2 { font-size: var(--font-size-sm); }
  @media (max-width: 65rem) {
    .app-section-deck-content.has-3-columns, .app-section-deck-content.has-4-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 42rem) {
    .app-section-deck-content.has-2-columns, .app-section-deck-content.has-3-columns, .app-section-deck-content.has-4-columns { grid-template-columns: minmax(0, 1fr); }
    .app-section-deck-content > .app-form-section + .app-form-section { border-inline-start: 0; padding-inline-start: 0; }
  }
}

/* Touch month selection uses the existing Button and Overlay surfaces. */
@layer components {
  .app-month-picker { display: grid; gap: var(--space-4); container-type: inline-size; }
  .app-month-picker-year { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-2); text-align: center; }
  .app-month-picker-year strong { font-size: var(--font-size-xl); }
  .app-month-picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); }
  .app-month-picker-grid .app-button { white-space: normal; overflow-wrap: anywhere; }
  @container (max-width: 22rem) { .app-month-picker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @container (max-width: 18rem) {
    .app-month-picker-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-month-picker-year strong { grid-column: 1 / -1; grid-row: 1; }
    .app-month-picker-year > :last-child { justify-self: end; }
  }
}

/* Touch controls follow all standard component variants, including Focus. */
@layer components {
  /* FormSection card surface is shared; ordinary Focus workspaces stay flat. */
  .app-form-section.is-card { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
  .app-touch :is(button, [role="button"], .app-button, .app-icon-button, .app-navigation-card) {
    min-inline-size: max(2.5cm, var(--touch-target-min-size));
    min-block-size: max(2.5cm, var(--touch-target-min-size));
    flex-shrink: 0;
  }
  .app-touch :is(input:not([type="hidden"]), select, textarea):where(:not(.app-date-input-picker)) { min-block-size: max(2.5cm, var(--touch-target-min-size)); }
  .app-touch .app-button { white-space: normal; text-align: center; overflow-wrap: anywhere; }
  /* Form content keeps desktop density; only touch entries enlarge controls. */
  .app-touch .app-overlay.has-form-content {
    --control-height: 4rem; --touch-target-min-size: 4rem;
    --icon-button-size: 4rem; --icon-button-icon-size: 1.5rem;
    --button-icon-size: 1.5rem;
  }
  .app-overlay:is(.has-form-content,.has-detail-content) .app-overlay-header { align-items: center; padding: var(--space-3) var(--space-4); }
  .app-touch .app-overlay.has-form-content:where(:not(:has([data-app-date-picker]))) .app-overlay-header { padding: var(--space-4) var(--space-5); }
  .app-overlay.has-form-content.is-content { width: min(var(--overlay-form-width),calc(100vw - 2 * var(--space-4))); }
  .app-touch .app-overlay.has-form-content.is-compact:where(:not(:has([data-app-date-picker]))) { height: min(38rem,calc(100dvh - 2rem)); }
  .app-touch .app-overlay.has-form-content.is-compact:where(:not(:has([data-app-date-picker]))) .app-overlay-frame { height: 100%; }
  .app-overlay:is(.has-form-content,.has-detail-content) .app-overlay-content { padding: var(--space-4); }
  .app-overlay.has-form-content .app-overlay-content:has(> .app-form-section.is-compact) { padding-block: var(--space-2); }
  .app-overlay:is(.has-form-content,.has-detail-content) .app-form-section.is-compact > .app-panel-header { padding: 0 0 var(--space-3); }
  .app-overlay:is(.has-form-content,.has-detail-content) .app-form-section.is-compact > .app-form-section-body { padding: 0; }
  @media (max-width: 42rem) {
    .app-overlay.has-detail-content .app-data-list.has-4-columns { --app-data-list-columns: 2; }
    .app-overlay.has-detail-content .app-quantity-group.is-compact:is(.has-3-columns,.has-4-columns) { --quantity-columns: 2; }
  }
  .app-overlay.has-form-content .app-form-section.is-compact :is(.app-form,.app-field-grid) { gap: var(--space-2); }
  .app-overlay.has-form-content .app-form-section.is-compact .app-settings-field > label { line-height: 1.35; }
  .app-overlay.has-form-content .app-form-section.is-compact .app-form-fieldset > legend { line-height: 1.4; margin-block-end: var(--space-1); }
  .app-overlay.has-form-content .app-form-section.is-compact .app-form-fieldset.is-divided { padding-block-start: var(--space-2); }
  .app-overlay.has-form-content .app-overlay-footer { padding: var(--space-4) var(--space-5); flex-wrap: nowrap; }
  .app-touch .app-overlay.has-form-content :is(button,[role="button"],.app-button,.app-icon-button) { min-inline-size: 4rem; min-block-size: 4rem; }
  .app-touch .app-overlay.has-form-content :is(input:not([type="hidden"]),select,textarea):where(:not(.app-date-input-picker)) { min-block-size: 4rem; }
  .app-form { container: form-fields / inline-size; }
  .app-field-grid { display: grid; gap: var(--space-4); grid-template-columns: minmax(0,1fr); }
  .app-field-grid.is-compact { gap: var(--space-2); }
  @container form-fields (min-width: 26rem) {
    .app-field-grid.has-2-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .app-field-grid.is-compact.has-3-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
  }
  @container form-fields (min-width: 36rem) {
    .app-field-grid.has-3-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .app-field-grid.has-3-columns > .app-field-span-2 { grid-column: span 2; min-inline-size: 0; }
  }
  .app-form-fieldset.is-divided { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); }
  .app-form-fieldset.is-divided > legend { padding-inline-end: var(--space-3); }
  .app-form-actions.is-flat { margin: 0; border: 0; border-block-start: 1px solid var(--color-border); border-radius: 0; padding: var(--space-3) 0 0; bottom: 0; }
  .app-form-actions-context { display: flex; align-items: center; margin-inline-end: auto; }
  .app-wizard-panel { display: grid; gap: var(--space-4); min-block-size: 0; align-content: start; }
  .app-wizard-panel[hidden] { display: none; }
  .app-wizard-panel > h3 { margin: 0; font-size: var(--font-size-lg); }
  /* Shared form wizard: fixed progress/actions with one independently scrolling step. */
  .app-wizard-layout-root { block-size: 100%; min-block-size: 0; }
  /* Guided preparation: one bounded workspace, quiet sections and stable actions. */
  .app-overlay.has-form-content:has(.app-wizard-layout-root.is-guided) { width: min(70rem, calc(100vw - 2 * var(--space-4))); height: min(38rem, calc(100dvh - 2 * var(--space-4))); }
  .app-overlay.has-form-content:has(.app-wizard-layout-root.is-guided) > .app-overlay-frame > .app-overlay-body { overflow: clip; }
  .app-wizard-layout-root.is-guided .app-wizard-layout-progress { padding: var(--space-2) var(--space-5) 0; background: var(--color-surface-muted); }
  .app-wizard-layout-root.is-guided .app-wizard-layout-content { padding: var(--space-4) var(--space-5); gap: var(--space-4); }
  .app-wizard-step-surface { min-inline-size: 0; display: grid; gap: var(--space-4); align-content: start; }
  .app-wizard-main { min-inline-size: 0; display: grid; gap: var(--space-4); align-content: start; }
  .app-wizard-summary { min-inline-size: 0; padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  @container form-fields (min-width: 46rem) {
    .app-wizard-step-surface.has-summary { grid-template-columns: minmax(0,2fr) minmax(14rem,1fr); gap: var(--space-6); }
    .app-wizard-summary { padding-block-start: 0; padding-inline-start: var(--space-5); border-block-start: 0; border-inline-start: 1px solid var(--color-border); }
  }
  .app-wizard-section-grid { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-5); align-items: start; }
  .app-wizard-section-grid > .app-form-section { min-inline-size: 0; margin: 0; }
  .app-wizard-section-grid > .app-form-section + .app-form-section { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-4); }
  .app-wizard-section-grid.has-3-columns > .app-form-section + .app-form-section { border-block-start: 0; padding-block-start: 0; }
  .app-theme-focus .app-wizard-section-grid > .app-form-section:not([hidden]) ~ .app-form-section:not([hidden]) { border-block-start: 0; }
  .app-wizard-section-grid > .app-form-section > .app-panel-header { min-block-size: 2.75rem; align-items: start; flex-wrap: nowrap; }
  .app-wizard-section-grid .app-form-section-content > .app-button { justify-self: start; }
  .app-wizard-detail-editor .app-postal-address-toggle { display: none; }
  .app-wizard-detail-editor .app-postal-address-grid { row-gap: var(--space-1); }
  .app-form-section h2.has-section-icon { display: flex; align-items: center; gap: var(--space-2); }
  .app-form-section-icon { display: grid; place-items: center; flex: 0 0 2rem; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius-control); background: var(--color-info-soft); }
  .app-form-section-icon > .app-pictogram { inline-size: 1.125rem; block-size: 1.125rem; }
  .app-wizard-layout-root.is-guided .app-wizard-layout-content > .app-record-context { margin: 0; padding: 0 0 var(--space-4); border-block-end: 1px solid var(--color-border); }
  .app-wizard-layout-root.is-guided .app-wizard-layout-actions { padding-inline: var(--space-5); }
  @container form-fields (min-width: 54rem) {
    .app-wizard-section-grid.has-3-columns { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; }
    .app-wizard-section-grid > .app-form-section { padding-inline: var(--space-5); }
    .app-wizard-section-grid > .app-form-section:first-child { padding-inline-start: 0; }
    .app-wizard-section-grid > .app-form-section:last-child { padding-inline-end: 0; }
    .app-wizard-section-grid > .app-form-section + .app-form-section { border-block-start: 0; border-inline-start: 1px solid var(--color-border); padding-block-start: 0; }
  }
  @media (max-width: 40rem) {
    .app-wizard-layout-root.is-guided .app-wizard-layout-content { padding: var(--space-3); }
    .app-wizard-layout-root.is-guided :is(.app-wizard-layout-progress,.app-wizard-layout-actions) { padding-inline: var(--space-3); }
  }
  :is(.app-form.app-wizard-layout, .app-wizard-layout-root > .app-wizard-layout) { display: grid; block-size: 100%; min-block-size: 0; grid-template-rows: auto minmax(0,1fr) auto; gap: 0; }
  .app-wizard-layout-progress { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-block-end: 1px solid var(--color-border); min-inline-size: 0; }
  .app-wizard-layout-progress > .app-wizard-progress { flex: 1 1 0; min-inline-size: 0; }
  .app-wizard-layout-content { min-block-size: 0; min-inline-size: 0; overflow: auto; overscroll-behavior: contain; padding: var(--space-4); display: grid; align-content: start; gap: var(--space-4); }
  .app-wizard-layout-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--color-border); background: var(--color-surface); }
  .app-wizard-layout-actions > .app-form-section-actions { justify-content: flex-end; }
  .app-overlay:has(.app-wizard-layout) > .app-overlay-frame > .app-overlay-body { overflow: hidden; }
  .app-overlay.has-form-content:has(.app-wizard-layout) > .app-overlay-frame > .app-overlay-body > .app-overlay-content { padding: 0; block-size: 100%; }
  .app-wizard-source-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-4); align-items: stretch; }
  .app-wizard-source-grid > * { min-inline-size: 0; }
  @media(max-width:42rem) { .app-wizard-source-grid { grid-template-columns: minmax(0,1fr); } }
  .app-overlay.has-form-content .app-wizard-progress { margin: 0; padding: 0; border: 0; background: transparent; }
  .app-overlay.has-form-content .app-form:has(.app-wizard-panel) { gap: var(--space-3); }
  .app-overlay.has-form-content .app-wizard-panel { gap: var(--space-3); }
  .app-overlay.has-form-content .app-wizard-step :is(.app-wizard-step-button,.app-wizard-step-content) { min-block-size: 4rem; padding: var(--space-2) var(--space-1); flex-direction: column; gap: var(--space-2); }
  .app-overlay.has-form-content .app-wizard-step-label { font-size: var(--font-size-caption); text-align: center; overflow-wrap: anywhere; }
  .app-overlay.has-form-content .app-wizard-step-marker { inline-size: 2rem; block-size: 2rem; min-inline-size: 2rem; min-block-size: 2rem; padding: 0; border-radius: 50%; aspect-ratio: 1; box-sizing: border-box; flex: 0 0 2rem; font-size: var(--font-size-caption); }
  .app-overlay.has-form-content .app-wizard-progress:not(.is-compact) .app-wizard-step:not(:last-child)::after { display: block; inset-block-start: calc(var(--space-2) + 1rem - .5px); }
  @media(max-width:40rem) {
    .app-overlay.has-form-content .app-wizard-layout-progress > .app-wizard-progress { position: relative; padding-block-end: calc(1.5em + var(--space-2)); }
    .app-wizard-layout-progress .app-wizard-step,
    .app-wizard-layout-progress .app-wizard-step :is(.app-wizard-step-button,.app-wizard-step-content) { position: static; }
    .app-overlay.has-form-content .app-wizard-layout-progress .app-wizard-step :is(.app-wizard-step-button,.app-wizard-step-content) { min-block-size: 3rem; block-size: auto; }
    .app-wizard-layout-progress .app-wizard-step::after,
    .app-overlay.has-form-content .app-wizard-progress:not(.is-compact) .app-wizard-step:not(:last-child)::after { display: none; }
    .app-wizard-layout-progress .app-wizard-step-copy { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; white-space: nowrap; }
    .app-wizard-layout-progress .app-wizard-step[aria-current="step"] .app-wizard-step-copy { clip-path: none; inset-inline: 0; inset-block-end: 0; inline-size: auto; block-size: auto; overflow: visible; white-space: normal; }
    .app-overlay.has-form-content .app-wizard-layout-progress .app-wizard-step-label { overflow-wrap: normal; }
  }
  .app-wizard-actions { display: flex; gap: var(--space-3); justify-content: flex-end; inline-size: 100%; }
  .app-wizard-actions > :first-child { margin-inline-end: auto; }
  .app-wizard-actions > [hidden] { display: none; }
  .app-action-signature { display: contents; }
  .app-theme-focus .app-signature-pad.has-error:not(.is-row) { padding: 0; background: transparent; }
  .app-signature-surface { inline-size: 100%; aspect-ratio: 10 / 3; min-block-size: 9rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); touch-action: none; cursor: crosshair; }
  .app-signature-surface polyline { fill: none; stroke: var(--color-text); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  .app-signature-actions { display: flex; justify-content: flex-end; }
  .app-signature-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
  .app-signature-heading label { flex: 1; }
  .app-overlay.has-form-content .app-data-list.has-2-columns { --app-data-list-columns: 2; gap: var(--space-1) var(--space-4); }
  .app-overlay.has-form-content .app-data-list.has-2-columns .app-data-list-item { grid-template-columns: minmax(0,1fr); gap: var(--space-1); align-content: start; padding-block: var(--space-1); }
  .app-overlay.has-form-content .app-data-list.has-2-columns .app-data-list-item dd { text-align: start; }
  .app-signature-preview { max-block-size: 3rem; inline-size: 100%; color: var(--color-text); }
  .app-signature-preview polyline { fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
  @media(max-width:30rem) {
    .app-overlay.has-form-content :is(.app-overlay-header,.app-overlay-footer,.app-overlay-content) { padding: var(--space-4); }
    .app-overlay.has-form-content .app-overlay-footer { flex-wrap: wrap; }
    .app-overlay.has-form-content .app-wizard-step-label { font-size: .6875rem; }
    .app-overlay.has-form-content .app-wizard-step::after { display: none; }
    .app-wizard-actions { gap: var(--space-2); }
    .app-wizard-actions > .app-button { flex: 1 1 0; min-inline-size: 4rem; margin-inline: 0; padding-inline: var(--space-2); }
  }
  @media(max-height:36rem) {
    .app-overlay.has-form-content:has([data-app-date-picker]) :is(.app-overlay-header,.app-overlay-footer) { padding: var(--space-2) var(--space-4); }
    .app-touch .app-overlay.has-form-content:has([data-app-date-picker]) :is(.app-icon-button,.app-overlay-footer .app-button) { --icon-button-size: 2.75rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; height: 2.75rem; }
    .app-touch .app-overlay.has-form-content .app-date-picker-navigation .app-icon-button { min-inline-size: 2.75rem; min-block-size: 2.75rem; block-size: 2.75rem; }
  }
}

/* Shared presentation for standalone module entries and touch terminals. */
@layer tokens {
  .app-theme-focus.app-touch {
    --control-height: var(--touch-target-min-size);
    --color-surface-muted: #f2f5f8;
    --color-text: #092441;
    --color-text-muted: #58718b;
    --color-border: #d5e1ef;
    --color-accent: #155fb8;
    --radius-panel: .75rem;
    --radius-control: .5rem;
    --font-size-control: var(--font-size-md);
    --entry-content-width: 80rem;
  }
}
@layer layout {
  .app-entry-page { min-block-size: 100svh; display: flex; flex-direction: column; background: var(--color-surface-muted); }
  .app-entry-header { background: var(--color-surface); border-block-end: 1px solid var(--color-border); }
  .app-entry-header-inner { max-inline-size: var(--entry-content-width, 80rem); margin-inline: auto; padding: var(--space-4) var(--workspace-content-space); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-5); }
  .app-entry-header-inner.is-compact { padding-block: var(--space-2); }
  .app-entry-main { flex: 1; inline-size: 100%; max-inline-size: var(--entry-content-width, 80rem); margin-inline: auto; padding: var(--entry-main-block-space, var(--space-6)) var(--workspace-content-space); }
  .app-entry-footer { border-block-start: 1px solid var(--color-border); background: var(--color-surface); }
  .app-entry-footer-inner { max-inline-size: var(--entry-content-width, 80rem); margin-inline: auto; padding: var(--entry-footer-block-space, var(--space-4)) var(--workspace-content-space); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-auth-layout { inline-size: 100%; max-inline-size: 70rem; margin: var(--space-5) auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
  .app-auth-introduction { min-inline-size: 0; }
  .app-auth-panel { min-inline-size: 0; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--color-border); border-block-start: 3px solid var(--color-accent); border-radius: var(--radius-panel); background: var(--color-surface); }
  .app-action-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
  .app-action-grid > :only-child { grid-column: 1 / -1; }
  @media (max-width: 46rem) {
    .app-auth-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-block: 0; }
    .app-auth-introduction { display: none; }
    .app-auth-panel { padding: var(--space-5); }
  }
  @media (max-width: 24rem) { .app-action-grid { grid-template-columns: minmax(0, 1fr); } }
}
@layer components {
  .app-theme-focus.app-entry-page { background: var(--color-surface-muted); }
  .app-brand-identity { display: flex; align-items: center; gap: var(--space-4); min-inline-size: 0; }
  .app-brand-identity .app-brand-mark { --app-brand-mark-size: 4rem; inline-size: auto; max-inline-size: 12rem; }
  .app-brand-identity-copy { min-inline-size: 0; display: grid; gap: var(--space-1); }
  .app-brand-identity-copy strong { font-size: 1.375rem; font-weight: 650; letter-spacing: -.04em; }
  .app-brand-identity-copy > span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-eyebrow { color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 500; letter-spacing: .13em; text-transform: uppercase; margin: 0 0 var(--space-3); }
  .app-page-heading { margin-block-end: var(--space-6); }
  .app-section-label { color: var(--color-text-muted); font-size: var(--font-size-md); font-weight: 500; margin: var(--space-5) 0 var(--space-3); }
  .app-section-label.is-compact { margin-block-start: var(--space-4); }
  .app-entry-sidebar { min-inline-size: 0; padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-panel); }
  .app-entry-sidebar > .app-eyebrow { padding: var(--space-3) var(--space-2); margin: 0 0 var(--space-3); }
  .app-page-heading h1, .app-auth-introduction h2 { font-size: clamp(1.625rem, 3vw, 2.125rem); line-height: 1.18; font-weight: 650; letter-spacing: -.04em; margin: 0 0 var(--space-3); overflow-wrap: anywhere; }
  .app-page-heading p:not(.app-eyebrow), .app-auth-introduction > p:not(.app-eyebrow) { color: var(--color-text-muted); font-size: var(--font-size-md); line-height: 1.6; margin: 0; max-inline-size: 42ch; }
  .app-page-heading.is-compact { margin-block-end: var(--space-4); }
  .app-page-heading.is-compact .app-eyebrow { margin-block-end: var(--space-1); }
  .app-page-heading.is-compact h1 { font-size: clamp(1.625rem, 2.5vw, 1.875rem); margin-block-end: var(--space-2); }
  .app-auth-features { list-style: none; padding: 0; margin: var(--space-6) 0 0; }
  .app-auth-features li { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-4); border-block-start: 1px solid var(--color-border); }
  .app-auth-features img { inline-size: 1.5rem; block-size: 1.5rem; opacity: .75; }
  .app-auth-features div { display: grid; gap: var(--space-1); }
  .app-auth-features strong { font-size: var(--font-size-md); font-weight: 600; }
  .app-auth-features span { color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-auth-heading { margin-block-end: var(--space-5); }
  .app-auth-heading :is(h1, h2) { font-size: 1.5rem; font-weight: 650; line-height: 1.25; letter-spacing: -.025em; margin: 0 0 var(--space-2); }
  .app-auth-heading p { margin: 0; color: var(--color-text-muted); }
  .app-auth-form { gap: var(--space-5); }
  .app-auth-form .app-form-field { gap: var(--space-2); }
  .app-auth-form label { font-weight: 600; font-size: var(--font-size-sm); }
  .app-auth-form > .app-button { inline-size: 100%; }
  .app-auth-alternative { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }
  .app-auth-alternative > span { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-caption); }
  .app-auth-alternative > span::before, .app-auth-alternative > span::after { content: ''; flex: 1; border-block-start: 1px solid var(--color-border); }
  .app-button.app-auth-reader { position: relative; isolation: isolate; }
  .app-auth-reader::after { content: ''; position: absolute; inset: 0; margin: auto; inline-size: 4.5rem; block-size: 4.5rem; background: currentColor; opacity: .12; z-index: -1; pointer-events: none; mask: var(--auth-reader-symbol) center / contain no-repeat; }
  .app-auth-reader.is-rfid { --auth-reader-symbol: url('../icons/rfid.svg'); }
  .app-password-control { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); }
  .app-password-control > input { inline-size: 100%; }
  .app-password-control [aria-pressed="true"] .is-eye { mask-image: url('../icons/eye-off.svg'); }
  .app-touch :is(input, select, textarea) { font-size: var(--font-size-control); }
  .app-touch :is(.app-icon-select-trigger, .app-icon-select-list) { font-size: var(--font-size-control); }
  .app-touch .app-icon-select-option { min-block-size: var(--touch-target-min-size); }
  .app-touch :is(.app-icon-select, .app-icon-select-list):not(.is-square) img { inline-size: 1.5rem; block-size: 1.125rem; }
  .app-form-section.is-card.has-accent { border-block-start: 3px solid var(--color-accent); }
  .app-form-section.is-card > .app-panel-header { padding: var(--space-5) var(--space-5) 0; }
  .app-form-section.is-card > .app-panel-header h2 { font-size: var(--font-size-md); color: var(--color-text-muted); font-weight: 600; letter-spacing: 0; }
  .app-form-section.is-card:has(> .app-panel-header) > .app-form-section-body { padding: var(--space-5); }
  .app-form-section.is-card:has(> .app-panel-header) .app-form-section-content { gap: var(--space-5); }
  .app-form-section.is-card.is-compact > .app-panel-header { padding: var(--space-4) var(--space-4) 0; }
  .app-form-section.is-card.is-compact:has(> .app-panel-header) > .app-form-section-body { padding: var(--space-3) var(--space-4) var(--space-4); }
  .app-form-section.is-card.is-compact:has(> .app-panel-header) .app-form-section-content { gap: var(--space-3); }
  /* Bounded record sections opt into a distinct, inset title/action bar. */
  .app-form-section.is-card.has-muted-header { padding: 0; }
  .app-form-section.is-card.has-muted-header:has(> .app-panel-header) > .app-panel-header { margin: 0; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); border-radius: var(--radius-panel) var(--radius-panel) 0 0; background: var(--color-surface-muted); }
  .app-form-section.is-card.has-muted-header > .app-panel-header h2 { color: var(--color-text); font-size: var(--font-size-section); font-weight: 650; }
  .app-form-section.is-card.has-muted-header:has(> .app-panel-header) > .app-form-section-body { padding: var(--space-4); }
  .app-panel.is-card > .app-form-section-body { grid-template-columns: minmax(0,1fr); }
  .app-disclosure { min-inline-size: 0; border-block-start: 1px solid var(--color-border); }
  .app-disclosure > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-block-size: var(--control-height,2.5rem); cursor: pointer; list-style: none; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
  .app-disclosure > summary::-webkit-details-marker { display: none; }
  .app-disclosure > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-disclosure > summary .app-disclosure-arrow { flex: none; margin-inline-end: var(--space-1); }
  .app-disclosure-content { padding-block: var(--space-2) var(--space-3); min-inline-size: 0; }
  .app-disclosure.is-section { border: 0; }
  .app-disclosure.is-section > .app-disclosure-content { padding: 0; }
  .app-disclosure-heading { display: flex; flex: 1; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); min-inline-size: 0; }
  .app-disclosure-title { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-disclosure-metadata { display: flex; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; }
  .app-disclosure-meta { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-2); border: 1px solid var(--color-info-soft-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-accent); font-size: var(--font-size-sm); font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
  .app-disclosure.is-prominent { border: 1px solid var(--color-info-soft-border); border-inline-start: 3px solid var(--color-accent); }
  .app-disclosure.is-prominent > summary { min-block-size: 3.5rem; padding: var(--space-3) var(--space-4); background: var(--color-info-soft); font-size: var(--font-size-md); font-weight: 650; }
  .app-disclosure.is-prominent > summary:hover { background: color-mix(in srgb,var(--color-accent) 10%,var(--color-surface)); }
  .app-disclosure.is-prominent > summary > .app-disclosure-arrow { margin: 0; color: var(--color-accent); }
  .app-disclosure.is-prominent > .app-disclosure-content { padding: var(--space-4); border-block-start: 1px solid var(--color-info-soft-border); }
  .app-disclosure.is-card { border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
  .app-disclosure.is-card > summary { padding: var(--space-3) var(--space-4); border-radius: var(--radius-panel); }
  .app-disclosure.is-card > summary:hover { background: var(--color-surface-muted); }
  .app-disclosure.is-card[open] > summary { border-block-end: 1px solid var(--color-border); border-end-start-radius: 0; border-end-end-radius: 0; }
  .app-disclosure.is-card > .app-disclosure-content { padding: var(--space-4); }
  .app-disclosure.is-card .app-disclosure-heading { justify-content: space-between; }
  .app-disclosure.is-card .app-disclosure-meta { border: 0; padding: 0; background: transparent; color: var(--color-text-muted); font-weight: 400; }
  /* A process step keeps its identity and navigation above the focused work area. */
  .app-step-panel { min-inline-size: 0; border: 1px solid var(--color-border); border-radius: var(--radius-panel); background: var(--color-surface); }
  .app-section-stack.is-continuous > :is(.app-step-panel, .app-planning-board) { border-block-start: 1px solid var(--color-border); }
  .app-step-panel-header { position: sticky; inset-block-start: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3) var(--space-4); min-inline-size: 0; padding: var(--space-4) var(--space-5); border-block-end: 1px solid var(--color-border); border-start-start-radius: var(--radius-panel); border-start-end-radius: var(--radius-panel); background: var(--color-surface); }
  .app-step-panel-heading { min-inline-size: 0; }
  .app-step-panel-position { display: block; margin-block-end: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 500; }
  .app-step-panel-heading > h2 { margin: 0; color: var(--color-text); font-size: var(--font-size-lg); font-weight: 650; line-height: 1.3; }
  .app-step-panel-navigation { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); min-inline-size: 0; margin-inline-start: auto; }
  .app-step-panel-body { display: grid; grid-template-columns: minmax(0,1fr); align-content: start; min-inline-size: 0; padding: var(--space-5); gap: var(--space-4); }
  .app-step-panel .app-metric { min-inline-size: 0; }
  .app-step-panel .app-metric strong { overflow-wrap: anywhere; line-height: 1.25; }
  .app-form-section-status > .app-status-badge + .app-status-badge { margin-inline-start: var(--space-2); }
  .app-metric-ribbon:has(> :first-child:last-child) { grid-template-columns: minmax(0,1fr); }
  .app-metric-ribbon:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2,minmax(0,1fr)); }
  @media(max-width:42rem) {
    .app-step-panel-header { padding: var(--space-2) var(--space-4); gap: var(--space-2); }
    .app-step-panel-heading { flex: 1 1 100%; }
    .app-step-panel-navigation { flex: 1 1 100%; justify-content: space-between; flex-wrap: wrap; }
    .app-step-panel-navigation.is-compact { flex: 0 1 auto; justify-content: flex-end; }
    .app-step-panel-navigation > .app-button { flex-shrink: 0; min-inline-size: 0; }
    .app-step-panel-navigation > .app-button.is-primary { margin-inline-start: auto; }
    .app-step-panel-body { padding: var(--space-4); }
    .app-disclosure.is-card .app-disclosure-heading { align-items: flex-start; gap: var(--space-1); }
  }
  /* Single-column summary sections fill available height while action rows keep their size. */
  .app-form-section.has-fill-height { display: flex; flex-direction: column; }
  .app-form-section.has-fill-height > .app-form-section-body { flex: 1; display: flex; flex-direction: column; }
  .app-form-section.has-fill-height .app-form-section-content { flex: 1; display: flex; flex-direction: column; }
  .app-form-section.has-fill-height .app-form-section-content > * { flex: 0 0 auto; }
  .app-form-section.has-fill-height .app-form-section-content > .app-empty-state { flex: 1 0 auto; }
  .app-empty-state.is-plain { background: transparent; border: 0; border-radius: 0; padding: var(--space-5) 0; gap: var(--space-4); }
  .app-empty-state.is-plain strong { font-size: var(--font-size-lg); font-weight: 500; line-height: 1.4; max-inline-size: 32ch; }
  .app-empty-state-symbol { display: grid; place-items: center; inline-size: 4rem; block-size: 4rem; background: var(--color-surface-muted); border-radius: var(--radius-panel); }
  .app-empty-state-symbol img { inline-size: 2rem; block-size: 2rem; opacity: .65; }
  .app-empty-state.is-plain.is-compact { padding: var(--space-2) 0; gap: var(--space-3); }
  .app-empty-state.is-plain.is-compact:has(> .app-empty-state-symbol):not(:has(> p, > .app-empty-state-actions)) { flex-direction: row; justify-content: start; text-align: start; }
  .app-empty-state.is-plain.is-compact .app-empty-state-symbol { inline-size: 3rem; block-size: 3rem; flex: 0 0 auto; }
  .app-empty-state.is-plain.is-compact .app-empty-state-symbol img { inline-size: 1.5rem; block-size: 1.5rem; }
  .app-empty-state.is-plain.is-compact strong { font-size: var(--font-size-md); }
  .app-navigation-card.is-destination { justify-content: start; min-block-size: 14rem; gap: var(--space-3); }
  .app-navigation-card-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-inline-size: 0; }
  .app-navigation-card-icon { display: block; inline-size: 1.5rem; block-size: 1.5rem; }
  .app-navigation-card-meta { font-size: var(--font-size-caption); text-align: end; }
  .app-navigation-card.is-destination > strong { margin-block-start: var(--space-4); font-size: 1.25rem; font-weight: 600; letter-spacing: -.02em; }
  .app-navigation-card-description { font-size: var(--font-size-sm); }
  .app-navigation-card-action { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-block-start: auto; padding-block-start: var(--space-4); color: var(--color-accent); font-size: var(--font-size-sm); }
  .app-navigation-card-arrow { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 auto; background: currentColor; mask: url('../icons/arrow-right.svg') center / contain no-repeat; }
  .app-navigation-card.is-destination.is-compact { min-block-size: 11rem; padding: var(--space-4); gap: var(--space-2); }
  .app-navigation-card.is-destination.is-compact > strong { margin-block-start: var(--space-1); font-size: var(--font-size-lg); }
  .app-navigation-card.is-destination.is-compact .app-navigation-card-action { padding-block-start: var(--space-1); }
  .app-navigation-card.is-action { min-block-size: var(--touch-target-min-size, 4rem); padding: var(--space-4) var(--space-5); gap: var(--space-1); }
  .app-navigation-card.is-action > strong { font-size: var(--font-size-md); font-weight: 600; }
  .app-navigation-card.is-action .app-navigation-card-description { font-size: var(--font-size-caption); }
  .app-navigation-card.is-primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-surface); }
  .app-navigation-card.is-primary .app-navigation-card-description { color: var(--color-surface); }
  .app-navigation-card.is-primary:hover { background: color-mix(in srgb, var(--color-accent) 90%, black); }
  .app-navigation-card.is-navigation { align-items: center; text-align: center; padding: var(--space-4); border-color: transparent; background: transparent; gap: var(--space-3); }
  .app-navigation-card.is-navigation strong { font-size: var(--font-size-md); font-weight: 500; }
  .app-navigation-card.is-navigation.is-active { background: var(--color-info-soft); color: var(--color-accent); }
  .app-navigation-card.is-navigation:hover { background: var(--color-surface-muted); }
  .app-navigation-card.is-navigation.is-active:hover { background: var(--color-info-soft); }
  .app-metric-ribbon:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .app-touch .app-metric { min-block-size: var(--touch-target-min-size); }
  .app-touch .app-metric-ribbon.is-compact .app-metric.is-readonly { min-block-size: 0; }
  /* Short desktop/terminal viewports retain full touch targets and compact the surrounding content. */
  @media (min-width: 46.001rem) and (max-height: 50rem) {
    .app-entry-page:has(.app-page-heading.is-compact) { --entry-main-block-space: var(--space-3); --entry-footer-block-space: var(--space-2); }
    .app-page-heading.is-compact { margin-block-end: var(--space-3); }
    .app-page-heading.is-compact > div { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
    .app-page-heading.is-compact h1 { margin: 0; }
    .app-section-label.is-compact { margin-block-end: var(--space-2); }
    .app-form-section.is-card.is-compact > .app-panel-header { padding-block-start: var(--space-3); }
    .app-form-section.is-card.is-compact:has(> .app-panel-header) > .app-form-section-body { padding-block: var(--space-2) var(--space-3); }
    .app-form-section.is-card.is-compact:has(> .app-panel-header) .app-form-section-content { gap: var(--space-2); }
    .app-empty-state.is-plain.is-compact { padding-block: var(--space-1); }
    .app-empty-state.is-plain.is-compact .app-empty-state-symbol { inline-size: 2.5rem; block-size: 2.5rem; }
    .app-navigation-card.is-destination.is-compact { min-block-size: 9rem; }
    .app-navigation-card.is-destination.is-compact .app-navigation-card-action { display: none; }
  }
  @media (max-width: 24rem) {
    .app-entry-header-inner { gap: var(--space-2); }
    .app-entry-header-inner .app-brand-mark { --app-brand-mark-size: 3rem; }
    .app-entry-header-inner .app-brand-identity-copy strong { font-size: var(--font-size-lg); }
    .app-entry-header-inner .app-brand-identity-copy > span { font-size: var(--font-size-caption); }
  }
  @media (max-width: 46rem) { .app-metric-ribbon:has(> :nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); } .app-metric-ribbon:has(> :nth-child(3):last-child) .app-metric { border-inline-end: 0; } }
}

/* Shared UTC interval bar: owners supply localized windows and state. */
@layer tokens {
  :root { --interval-gap-color: var(--status-color-warning); --interval-additional-color: #7c3aed; --interval-handle-width: .625rem; --interval-handle-height: 1.125rem; --interval-handle-target-size: 1.5rem; }
}
@layer components {
  .app-interval-bar { display: grid; gap: var(--space-2); margin: 0; min-inline-size: 0; color: var(--color-text); }
  .app-interval-bar-caption { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-interval-bar-plot { position: relative; min-inline-size: 0; }
  .app-interval-bar-track { position: relative; block-size: 1.375rem; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
  .app-interval-bar-track::before { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), var(--color-border) calc(25% - 1px), var(--color-border) 25%); opacity: .65; }
  .app-interval-bar-segment, .app-interval-bar-gap { position: absolute; inset-block: var(--space-1); inset-inline-start: var(--interval-start); inline-size: var(--interval-width); min-inline-size: 1px; border-radius: calc(var(--radius-control) / 2); }
  .app-interval-bar-segment { background: var(--color-accent); border: 1px solid var(--color-accent); }
  .app-interval-bar-gap { background: var(--interval-gap-color); border: 1px solid var(--interval-gap-color); }
  .app-interval-bar-segment.is-additional { background: var(--interval-additional-color); border-color: var(--interval-additional-color); }
  .app-interval-bar-segment.is-draft { opacity: .6; }
  .app-interval-bar-edge-controls { position: absolute; inset: 0; block-size: 1.375rem; pointer-events: none; }
  .app-interval-bar-handle { position: absolute; inset-block-start: 50%; inset-inline-start: clamp(1rem,var(--interval-start),calc(100% - 1rem)); transform: translate(-50%,-50%); opacity: 0; pointer-events: auto; }
  .app-interval-bar-handle .app-icon-button { --icon-button-size: var(--interval-handle-target-size); --icon-button-icon-size: var(--space-3); position: relative; background: transparent; border-color: transparent; cursor: ew-resize; touch-action: none; }
  .app-interval-bar-handle .app-icon-button::before { content: ''; position: absolute; inline-size: var(--interval-handle-width); block-size: var(--interval-handle-height); border: 1px solid var(--color-border); border-radius: calc(var(--radius-control) / 2); background: var(--color-surface); }
  .app-interval-bar-handle .app-icon-button-icon { position: relative; }
  .app-interval-bar-handle .app-icon-button:is(:hover,:focus-visible)::before { border-color: var(--color-accent); background: var(--color-info-soft); }
  .app-interval-bar:has(.app-interval-bar-edge-controls) .app-interval-bar-track { overflow: hidden; }
  .app-interval-timeline-row-plot:hover .app-interval-bar-handle, .app-interval-bar:hover .app-interval-bar-handle,
  .app-interval-bar:focus-within .app-interval-bar-handle { opacity: 1; }
  @media (hover: none) { .app-interval-bar-handle { opacity: 1; } }
  .app-interval-bar-axis { display: flex; justify-content: space-between; gap: var(--space-2); margin-block-start: var(--space-1); color: var(--color-text-muted); font-size: var(--font-size-detail); font-variant-numeric: tabular-nums; }
  .app-interval-bar-axis > span { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-interval-bar-axis > span:last-child { text-align: end; }
  .app-interval-bar-windows { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; }
  .app-interval-bar-windows > li { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-interval-bar-windows > li::before { content: ''; display: inline-block; inline-size: var(--space-1); block-size: var(--space-1); margin-inline-end: var(--space-1); vertical-align: middle; border-radius: 1px; background: var(--color-accent); }
  .app-interval-bar-windows > li.is-additional::before { background: var(--interval-additional-color); }
  .app-interval-bar-empty { color: var(--color-text-muted); font-size: var(--font-size-caption); overflow-wrap: anywhere; }
  .app-interval-bar.is-unknown .app-interval-bar-track { border-style: dashed; background: transparent; }
  .app-interval-bar.is-unknown .app-interval-bar-track::before { display: none; }
  @media (forced-colors: active) {
    .app-interval-bar-track { background: Canvas; border-color: CanvasText; }
    .app-interval-bar-track::before { display: none; }
    .app-interval-bar-segment { background: Highlight; border-color: CanvasText; forced-color-adjust: none; }
    .app-interval-bar-segment.is-additional { background: CanvasText; border-color: Highlight; }
    .app-interval-bar-gap { background: Canvas; border: 1px dashed CanvasText; forced-color-adjust: none; }
    .app-interval-bar-windows > li::before { background: CanvasText; }
  }
}

/* Compact interval bars and dense rows sharing one owner-supplied UTC axis. */
@layer components {
  .app-interval-bar.is-compact { position: relative; gap: 0; }
  .app-interval-bar.is-compact :is(.app-interval-bar-axis, .app-interval-bar-windows) { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-interval-bar.is-compact .app-interval-bar-empty { position: absolute; inset: 0; display: flex; align-items: center; padding-inline: var(--space-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; pointer-events: none; }
  .app-interval-timeline { --interval-actions-size: calc(var(--interval-action-count, 1) * var(--icon-button-size, 2rem) + (var(--interval-action-count, 1) - 1) * var(--space-1)); inline-size: 100%; table-layout: fixed; border-collapse: collapse; color: var(--color-text); font-size: var(--font-size-control); }
  .app-interval-timeline > caption, .app-interval-timeline-heading-label, .app-interval-timeline .is-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-interval-timeline-col-resource { inline-size: 12.5rem; }
  .app-interval-timeline-col-amount { inline-size: 4.375rem; }
  .app-interval-timeline-col-state { inline-size: calc(var(--status-min-width) + 2 * var(--space-2)); }
  .app-interval-timeline-col-actions { inline-size: calc(var(--interval-actions-size) + 2 * var(--space-2)); }
  .app-interval-timeline :is(th, td) { padding: var(--space-2); text-align: start; vertical-align: middle; border-block-end: 1px solid var(--color-border); }
  .app-interval-timeline-heading { block-size: 2.5rem; color: var(--color-text-muted); font-weight: 500; font-size: var(--font-size-caption); }
  .app-interval-timeline > tbody > tr { block-size: 3.75rem; }
  .app-interval-timeline > tbody > tr:hover { background: var(--color-surface-muted); }
  .app-interval-timeline-cell.is-resource { font-weight: 400; overflow-wrap: anywhere; }
  .app-interval-timeline-cell.is-resource :is(strong, small) { display: block; }
  .app-interval-timeline-cell.is-resource strong { font-weight: 600; line-height: 1.3; }
  .app-interval-timeline-cell.is-resource small { color: var(--color-text-muted); font-size: var(--font-size-detail); line-height: 1.4; }
  .app-interval-timeline :is(.is-amount, .is-state) { font-variant-numeric: tabular-nums; }
  .app-interval-timeline .is-amount { text-align: end; white-space: nowrap; }
  .app-interval-timeline-additional { display: block; color: var(--interval-additional-color); font-size: var(--font-size-detail); }
  .app-interval-timeline .is-actions { text-align: end; white-space: nowrap; }
  .app-interval-timeline-axis { position: relative; block-size: 1.25rem; min-inline-size: 0; color: var(--color-text-muted); font-size: var(--font-size-detail); font-weight: 400; font-variant-numeric: tabular-nums; }
  .app-interval-timeline-tick { position: absolute; inset-inline-start: var(--interval-tick); inset-block-end: 0; transform: translateX(-50%); white-space: nowrap; }
  .app-interval-timeline-tick::before { content: ''; position: absolute; inset-block-start: calc(-1 * var(--space-1)); inset-inline-start: 50%; block-size: var(--space-1); border-inline-start: 1px solid var(--color-border); }
  .app-interval-timeline-tick.is-start { transform: none; }
  .app-interval-timeline-tick.is-start::before { inset-inline-start: 0; }
  .app-interval-timeline-tick.is-end { transform: translateX(-100%); }
  .app-interval-timeline-tick.is-end::before { inset-inline-start: 100%; }
  .app-interval-timeline-mobile-axis { display: none; }
  @media (max-width: 48rem) {
    .app-interval-timeline, .app-interval-timeline > tbody { display: block; }
    .app-interval-timeline > colgroup { display: none; }
    .app-interval-timeline > thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .app-interval-timeline > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-2); block-size: auto; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); }
    .app-interval-timeline > tbody > tr > :is(th, td) { display: block; min-inline-size: 0; padding: 0; border: 0; align-self: center; }
    .app-interval-timeline-cell.is-resource { grid-column: 1; grid-row: 1; }
    .app-interval-timeline-cell.is-amount { grid-column: 2; grid-row: 1; }
    .app-interval-timeline-cell.is-state { grid-column: 3; grid-row: 1; max-inline-size: 7.5rem; }
    .app-interval-timeline-cell.is-actions { grid-column: 4; grid-row: 1; }
    .app-interval-timeline-cell.is-timeline { grid-column: 1 / -1; grid-row: 2; }
    .app-interval-timeline-mobile-axis { display: block; margin-block-start: var(--space-1); }
  }
}

/* Interval timeline guides follow actual UTC ticks; narrow containers retain the mobile composition. */
@layer components {
  .app-interval-timeline-wrap { inline-size: 100%; min-inline-size: 0; container-type: inline-size; }
  .app-interval-timeline-row-plot { position: relative; }
  .app-interval-timeline-row-plot .app-interval-bar-track::before { display: none; }
  .app-interval-timeline-guides { position: absolute; inset: 1px; pointer-events: none; overflow: hidden; }
  .app-interval-timeline-guides > span { position: absolute; inset-block: 0; inset-inline-start: var(--interval-tick); border-inline-start: 1px solid var(--color-border); opacity: .45; }
  @container (max-width: 48rem) {
    .app-interval-timeline, .app-interval-timeline > tbody { display: block; }
    .app-interval-timeline > colgroup { display: none; }
    .app-interval-timeline > thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
    .app-interval-timeline > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; gap: var(--space-2); block-size: auto; padding-block: var(--space-2); border-block-end: 1px solid var(--color-border); }
    .app-interval-timeline > tbody > tr > :is(th, td) { display: block; min-inline-size: 0; padding: 0; border: 0; align-self: center; }
    .app-interval-timeline-cell.is-resource { grid-column: 1; grid-row: 1; }
    .app-interval-timeline-cell.is-amount { grid-column: 2; grid-row: 1; }
    .app-interval-timeline-cell.is-state { grid-column: 3; grid-row: 1; max-inline-size: 7.5rem; }
    .app-interval-timeline-cell.is-actions { grid-column: 4; grid-row: 1; }
    .app-interval-timeline-cell.is-timeline { grid-column: 1 / -1; grid-row: 2; }
    .app-interval-timeline-mobile-axis { display: block; margin-block-start: var(--space-1); }
  }
}

/* Narrow interval timelines preserve readable identities and sparse real clock labels. */
@layer components {
  @media (max-width: 48rem) {
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:not(.is-start):not(.is-end):not(.is-mobile-label) { display: none; }
  }
  @container (max-width: 48rem) {
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:not(.is-start):not(.is-end):not(.is-mobile-label) { display: none; }
  }
  @media (max-width: 30rem) {
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:not(.is-start):not(.is-end) { display: none; }
    .app-interval-timeline-mobile-axis .app-interval-timeline-axis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); block-size: auto; min-block-size: 1.25rem; align-items: end; }
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:is(.is-start, .is-end) { position: relative; inset: auto; transform: none; white-space: normal; overflow-wrap: anywhere; }
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick.is-end { text-align: end; }
    .app-interval-timeline > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; }
    .app-interval-timeline > tbody > tr > .is-resource { grid-column: 1 / -1; grid-row: 1; padding-inline-end: calc(var(--icon-button-size, 2rem) + var(--space-2)); }
    .app-interval-timeline-cell.is-actions { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
    .app-interval-timeline-cell.is-amount { grid-column: 1; grid-row: 2; text-align: start; white-space: normal; overflow-wrap: anywhere; }
    .app-interval-timeline-cell.is-state { grid-column: 2; grid-row: 2; justify-self: end; }
    .app-interval-timeline-cell.is-timeline { grid-column: 1 / -1; grid-row: 3; }
    .app-interval-timeline.has-multiple-actions > tbody > tr > .is-resource { padding-inline-end: 0; }
    .app-interval-timeline.has-multiple-actions .is-actions { grid-column: 1 / -1; grid-row: 4; }
  }
  @container (max-width: 30rem) {
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:not(.is-start):not(.is-end) { display: none; }
    .app-interval-timeline-mobile-axis .app-interval-timeline-axis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); block-size: auto; min-block-size: 1.25rem; align-items: end; }
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:is(.is-start, .is-end) { position: relative; inset: auto; transform: none; white-space: normal; overflow-wrap: anywhere; }
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick.is-end { text-align: end; }
    .app-interval-timeline > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; }
    .app-interval-timeline > tbody > tr > .is-resource { grid-column: 1 / -1; grid-row: 1; padding-inline-end: calc(var(--icon-button-size, 2rem) + var(--space-2)); }
    .app-interval-timeline-cell.is-actions { grid-column: 2; grid-row: 1; justify-self: end; align-self: start; }
    .app-interval-timeline-cell.is-amount { grid-column: 1; grid-row: 2; text-align: start; white-space: normal; overflow-wrap: anywhere; }
    .app-interval-timeline-cell.is-state { grid-column: 2; grid-row: 2; justify-self: end; }
    .app-interval-timeline-cell.is-timeline { grid-column: 1 / -1; grid-row: 3; }
    .app-interval-timeline.has-multiple-actions > tbody > tr > .is-resource { padding-inline-end: 0; }
    .app-interval-timeline.has-multiple-actions .is-actions { grid-column: 1 / -1; grid-row: 4; }
  }
  @media (max-width: 20rem) {
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:not(.is-start):not(.is-end) { display: none; }
  }
  @container (max-width: 20rem) {
    .app-interval-timeline-mobile-axis .app-interval-timeline-tick:not(.is-start):not(.is-end) { display: none; }
  }
}

/* dependency-flow: read-only logical stages with explicit predecessor labels. */
@layer components {
  .app-dependency-flow { container-type: inline-size; min-inline-size: 0; max-inline-size: 100%; overflow-x: auto; padding-block: var(--space-2); }
  .app-dependency-flow:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
  .app-dependency-flow-stages { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(17rem, 1fr); gap: var(--space-4); min-inline-size: 100%; inline-size: max-content; margin: 0; padding: 0; list-style: none; }
  .app-dependency-flow-stage { min-inline-size: 0; max-inline-size: 22rem; }
  .app-dependency-flow-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-3); padding: var(--space-2) var(--space-3); border-block-end: 2px solid var(--color-accent); background: var(--color-surface-muted); }
  .app-dependency-flow-heading h3 { margin: 0; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-text); }
  .app-dependency-flow-connector { color: var(--color-accent); font-size: var(--font-size-lg); line-height: 1; }
  .app-dependency-flow-nodes { display: grid; align-content: start; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
  .app-dependency-flow-node { display: grid; gap: var(--space-2); min-inline-size: 0; padding: var(--space-3); border: 1px solid var(--color-border); border-inline-start: 3px solid var(--color-accent); border-radius: var(--radius-panel); background: var(--color-surface); overflow-wrap: anywhere; }
  .app-dependency-flow-node > strong { font-size: var(--font-size-sm); color: var(--color-text); }
  .app-dependency-flow-meta { font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .app-dependency-flow-node dl { display: grid; gap: var(--space-1); margin: 0; font-size: var(--font-size-sm); }
  .app-dependency-flow-node dt { color: var(--color-text-muted); }
  .app-dependency-flow-node dd { margin: 0; color: var(--color-text); }
  .app-dependency-flow-node dd ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  /* Quiet connected diagram. Card presentation remains the PDM default. */
  .app-dependency-flow.is-diagram { position:relative; isolation:isolate; padding-block:var(--space-2); }
  .app-dependency-flow.is-diagram .app-dependency-flow-stage>section>h3.is-visually-hidden { position:absolute; inline-size:1px; block-size:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-dependency-flow.is-diagram .app-dependency-flow-stages { position:relative; z-index:1; grid-auto-flow:column; grid-auto-columns:13rem; gap:var(--space-6); align-items:center; justify-content:center; inline-size:max-content; min-inline-size:100%; padding:var(--space-1) 0; }
  .app-dependency-flow.is-diagram .app-dependency-flow-stage { max-inline-size:none; }
  .app-dependency-flow.is-diagram .app-dependency-flow-nodes { gap:var(--space-3); }
  .app-dependency-flow.is-diagram .app-dependency-flow-node { position:relative; min-block-size:4.25rem; align-content:center; gap:var(--space-1); padding:var(--space-3); padding-inline-start:2.25rem; border:1px solid transparent; border-radius:var(--radius-panel); background:var(--color-surface-muted); }
  .app-dependency-flow.is-diagram .app-dependency-flow-node.is-selected { border-color:color-mix(in srgb,var(--color-accent) 25%,transparent); background:color-mix(in srgb,var(--color-accent) 5%,var(--color-surface)); }
  .app-dependency-flow.is-diagram .app-dependency-flow-node.has-artwork { padding-inline-start:3.5rem; }
  .app-dependency-flow-artwork { --pictogram-size:2rem; position:absolute; inset-inline-start:var(--space-3); inset-block-start:50%; transform:translateY(-50%); display:grid; place-items:center; }
  .app-dependency-flow-node.has-artwork>.app-dependency-flow-marker { inset-inline-start:2rem; inset-block-start:auto; inset-block-end:var(--space-3); inline-size:.875rem; block-size:.875rem; background:var(--color-surface); box-shadow:0 0 0 2px var(--color-surface-muted); }
  .app-dependency-flow-node.has-artwork>.app-dependency-flow-marker>.app-status-mark { --status-mark-size:.75rem; --status-icon-size:.75rem; inline-size:.75rem; block-size:.75rem; }
  .app-dependency-flow.is-diagram .app-dependency-flow-node>strong { font-size:var(--font-size-sm); font-weight:600; line-height:1.5; }
  .app-dependency-flow-link { color:inherit; text-decoration:none; }
  .app-dependency-flow-link:is(:hover,:focus-visible) { color:var(--color-accent); text-decoration:underline; text-underline-offset:3px; }
  .app-dependency-flow-selected { position:absolute; inline-size:1px; block-size:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-dependency-flow-marker { position:absolute; inset-inline-start:var(--space-3); inset-block-start:var(--space-3); display:grid; place-items:center; inline-size:1rem; block-size:1rem; border-radius:50%; color:var(--color-text-muted); }
  .app-dependency-flow-marker>.app-status-mark { --status-mark-size:1rem; --status-icon-size:1rem; --status-icon-color:currentColor; inline-size:1rem; block-size:1rem; min-block-size:0; align-self:center; justify-self:center; line-height:0; color:inherit; background:transparent; }
  .app-dependency-flow-dot { inline-size:.45rem; block-size:.45rem; border-radius:50%; background:currentColor; }
  .app-dependency-flow-node[data-tone="success"]>.app-dependency-flow-marker { color:var(--color-success); }
  .app-dependency-flow-node[data-tone="info"]>.app-dependency-flow-marker { color:var(--color-accent); }
  .app-dependency-flow-node[data-tone="warning"]>.app-dependency-flow-marker { color:var(--color-warning); }
  .app-dependency-flow-node[data-tone="error"]>.app-dependency-flow-marker { color:var(--color-danger); }
  .app-dependency-flow-lines { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:visible; }
  .app-dependency-flow-lines path { fill:none; stroke:var(--color-text-muted); stroke-width:1.25; stroke-linecap:round; stroke-linejoin:round; }
  .app-dependency-flow-lines path[data-tone="success"] { stroke:var(--color-success); }
  .app-dependency-flow-lines path[data-tone="info"] { stroke:var(--color-accent); }
  .app-dependency-flow.is-diagram[data-flow-ready="true"] .app-dependency-flow-fallback { position:absolute; inline-size:1px; block-size:1px; margin:0; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-operation-inspector { display:grid; gap:var(--space-4); min-inline-size:0; }
  .app-operation-inspector-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); }
  .app-operation-inspector-tools { display:flex; align-items:center; gap:var(--space-2); }
  .app-operation-inspector-identity { display:flex; align-items:center; gap:var(--space-3); min-inline-size:0; }
  .app-operation-inspector-identity>.app-pictogram { --pictogram-size:2.25rem; }
  .app-operation-inspector-identity>div>span { color:var(--color-text-muted); font-size:var(--font-size-caption); }
  .app-operation-inspector-heading h3 { margin:var(--space-1) 0 0; font-size:var(--font-size-lg); font-weight:600; line-height:1.3; }
  .app-operation-inspector-flow { min-inline-size:0; padding-block-start:var(--space-4); border-block-start:1px solid var(--color-border); }
  .app-operation-inspector-flow>header { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-3); margin-block-end:var(--space-2); }
  .app-operation-inspector-flow>header>h3, .app-operation-inspector-issues>h3 { margin:0; font-size:var(--font-size-sm); font-weight:600; }
  .app-operation-inspector-flow>header>span { color:var(--color-text-muted); font-size:var(--font-size-caption); font-variant-numeric:tabular-nums; }
  .app-operation-inspector-issues>ul { margin-block:var(--space-3) 0; padding-inline-start:var(--space-4); font-size:var(--font-size-sm); }
  .app-operation-inspector-procedures { display:grid; gap:var(--space-2); margin:0; padding:0; list-style:none; }
  .app-operation-inspector-procedures .app-record-identity-media>.app-pictogram { --pictogram-size:1.75rem; }
  .app-operation-inspector-procedures .app-record-identity-copy>strong { font-size:var(--font-size-sm); font-weight:500; }
  @media (max-width: 40rem) {
    .app-dependency-flow-stages { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); inline-size: auto; }
    .app-dependency-flow-stage { max-inline-size: none; }
    .app-dependency-flow-connector { transform: rotate(90deg); }
  }
  @container (max-width: 40rem) {
    .app-dependency-flow-stages { grid-auto-flow: row; grid-auto-columns: minmax(0, 1fr); inline-size: auto; }
    .app-dependency-flow-stage { max-inline-size: none; }
    .app-dependency-flow-connector { transform: rotate(90deg); }
  }
  @container (max-width:28rem) {
    .app-dependency-flow.is-diagram .app-dependency-flow-stages { grid-auto-flow:row; grid-auto-columns:minmax(0,1fr); justify-content:stretch; inline-size:100%; gap:var(--space-5); }
  }
}

/* ReferencePicker: native reference fields and one shared searchable dialog. */
@layer components {
  .app-reference-collection { gap: var(--space-3); }
  .app-reference-collection .app-data-table td:first-child { overflow-wrap: anywhere; }
  .app-reference-collection .app-data-table .is-actions { inline-size: 3rem; }
  .app-reference-picker { --reference-control-size: var(--control-height, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-2); row-gap: .375rem; min-inline-size: 0; }
  .app-reference-picker.has-no-search { grid-template-columns: minmax(0, 1fr); }
  .app-reference-picker.has-hidden-label { row-gap: 0; }
  .app-reference-picker > .app-settings-field:not(.is-row) { display: contents; }
  .app-reference-picker > .app-settings-field > label { grid-column: 1 / -1; grid-row: 1; }
  .app-reference-picker > .app-settings-field > :is(select, input[type="search"]) { grid-column: 1; grid-row: 2; min-inline-size: 0; inline-size: 100%; block-size: var(--reference-control-size); min-block-size: var(--reference-control-size); }
  .app-reference-picker > .app-settings-field > .app-icon-select { grid-column: 1; grid-row: 2; min-inline-size: 0; inline-size: 100%; }
  .app-reference-picker > .app-settings-field > .app-icon-select > .app-icon-select-trigger { block-size: var(--reference-control-size); min-block-size: var(--reference-control-size); }
  .app-reference-picker > .app-settings-field > .app-settings-field-meta { grid-column: 1 / -1; grid-row: 3; }
  .app-reference-picker > .app-icon-button { grid-column: 2; grid-row: 2; align-self: center; inline-size: var(--reference-control-size); min-inline-size: var(--reference-control-size); block-size: var(--reference-control-size); min-block-size: var(--reference-control-size); }
  .app-reference-search { display: grid; gap: var(--space-4); min-inline-size: 0; }
  .app-reference-search-form { --reference-control-size: var(--control-height, 2.5rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-2); align-items: end; min-inline-size: 0; }
  .app-reference-search-form > .app-form-field { display: contents; }
  .app-reference-search-form > .app-form-field > label { grid-column: 1 / -1; grid-row: 1; }
  .app-reference-search-form > .app-form-field > input[type="search"] { grid-column: 1; grid-row: 2; block-size: var(--reference-control-size); min-block-size: var(--reference-control-size); }
  .app-reference-search-form > .app-icon-button { grid-column: 2; grid-row: 2; inline-size: var(--reference-control-size); min-inline-size: var(--reference-control-size); block-size: var(--reference-control-size); min-block-size: var(--reference-control-size); }
  .app-reference-search-results { position: relative; min-block-size: 16rem; min-inline-size: 0; }
  .app-reference-search.is-compact { gap: var(--space-3); }
  .app-reference-search.is-compact .app-reference-search-results { min-block-size: 10rem; }
  .app-reference-search.is-compact [data-reference-start-state] { padding: var(--space-4); }
  .app-reference-search.is-compact .app-empty-state-symbol { background: var(--color-info-soft); border-radius: var(--radius-control); }
  .app-reference-search-results > .app-loading-indicator { position: absolute; inset: 0; justify-content: center; background: var(--color-surface); z-index: 1; }
  .app-reference-search-results .app-data-table td:first-child { white-space: normal; overflow-wrap: anywhere; }
  .app-reference-result-cell { display: block; min-inline-size: 0; white-space: pre-line; overflow-wrap: anywhere; }
  .app-reference-search-results .app-data-table-wrap:not(.is-responsive):not(.has-fixed-columns) td.is-actions { inline-size: 3rem; }
  .app-reference-search.has-result-columns .app-data-table-wrap { --table-fixed-min-width: 0; }
  .app-reference-search.has-result-columns .app-data-table { --table-media-column-width: 3rem; }
  .app-reference-search.has-result-columns .app-data-table :is(th, td).is-media { padding-inline: var(--space-1); }
  .app-reference-search.has-result-columns .app-tree-view-thumbnail { max-inline-size: 100%; block-size: auto; aspect-ratio: var(--thumbnail-landscape-ratio); }
  .app-reference-search.has-result-columns .app-data-table :is(th, td) { padding-inline: var(--space-2); line-height: 1.35; }
  .app-reference-search.has-result-columns .app-data-table th { white-space: normal; overflow-wrap: anywhere; }
  .app-reference-search.has-result-columns .app-data-table :is(th, td).is-actions { padding-inline: 0; }
  .app-reference-search-results [hidden] { display: none; }
  .app-reference-search [data-reference-pagination][hidden] { display: none; }
  .app-touch :is(.app-reference-picker, .app-reference-search-form) { --reference-control-size: var(--touch-target-min-size, 4rem); }
  .app-touch .app-reference-picker > .app-settings-field > :is(select, input[type="search"]),
  .app-touch .app-reference-search-form > .app-form-field > input[type="search"] { min-block-size: var(--reference-control-size); }

  /* Compact icon-action filters share one explicit field/action height. */
  .app-theme-focus .app-filter-bar.is-compact:has(.app-filter-bar-actions.is-icon-only) { --filter-control-size: var(--control-height, 2.5rem); }
  .app-theme-focus .app-filter-bar.is-compact:has(.app-filter-bar-actions.is-icon-only) :is(input, select):not(.app-date-input-picker) { block-size: var(--filter-control-size); min-block-size: var(--filter-control-size); }
  .app-theme-focus .app-filter-bar.is-compact .app-filter-bar-actions.is-icon-only { --icon-button-size: var(--filter-control-size, var(--control-height, 2.5rem)); min-block-size: var(--filter-control-size, var(--control-height, 2.5rem)); }

  .app-data-table td.is-numeric:not(:first-child) :is(input[type="text"]:not([data-app-date-input-display]), input[type="number"]),
  .app-data-table td:not(:first-child) input[inputmode="decimal"] { text-align: end; }
  .app-data-table td.is-actions:has(> .app-icon-button) { text-align: end; }
  /* Align static values and compact actions with the first input, not the full row. */
  .app-data-table td.is-control-aligned { vertical-align: top; }
  .app-data-table td.is-control-aligned > .app-data-table-cell-content { display: flex; align-items: center; min-block-size: var(--control-height, 2.5rem); min-inline-size: 0; gap: var(--space-1); }
  .app-data-table td.is-control-aligned:is(.is-numeric, .is-actions) > .app-data-table-cell-content { justify-content: flex-end; }
  .app-data-table td.is-actions > .app-data-table-cell-content { gap: var(--space-2); }
  .app-data-table td.is-control-aligned:first-child > .app-data-table-cell-content { justify-content: flex-start; }
  @container read-table ((max-width: 52rem) and style(--read-table-wide-breakpoint: default)) or ((max-width: 40rem) and style(--read-table-wide-breakpoint: compact)) or ((max-width: 60rem) and style(--read-table-wide-breakpoint: wide)) or ((max-width: 80rem) and style(--read-table-wide-breakpoint: reference)) {
    .app-data-table-wrap.is-responsive td.is-control-aligned > .app-data-table-cell-content { min-block-size: 0; justify-content: flex-start; }
    .app-data-table-wrap.is-responsive td.is-numeric { text-align: start; }
  }

  /* A result row emphasizes its value without implying a status colour. */
  .app-data-list-item:has(+ .has-primary-emphasis) { border-block-end: 0; }
  .app-data-list-item.has-primary-emphasis { border-block-start: 1px solid var(--color-border); border-block-end: 0; padding-block-start: var(--space-3); }
  .app-data-list-item.has-primary-emphasis > dt { color: var(--color-text); font-weight: 600; }
  .app-data-list-item.has-primary-emphasis > dd { color: var(--color-text); font-weight: 700; font-size: var(--font-size-md); }
  .app-data-list.is-dense { gap: 0 var(--space-4); line-height: 1.25; }
  .app-data-list.is-dense > .app-data-list-item { min-block-size: 0; padding-block: var(--space-1); }
  /* Short financial ledgers separate the total instead of ruling every reading row. */
  .app-data-list.is-ledger > .app-data-list-item { border-block-end: 0; grid-template-columns: minmax(0,1fr) max-content; }
  .app-data-list.is-ledger > .has-primary-emphasis { margin-block-start: var(--space-1); padding-block-start: var(--space-2); }
  /* Plain reading rows keep labels near their values without a ledger or card grid. */
  .app-data-list.is-plain > .app-data-list-item { border: 0; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); align-items: baseline; }
  .app-data-list.is-plain.is-stacked > .app-data-list-item { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .app-data-list.is-plain > .app-data-list-item > dd { text-align: start; white-space: pre-line; }
  .app-data-list.is-plain .app-data-list-value { flex: 1; }
  .app-data-list.is-plain > .app-data-list-item:has(> dt.is-visually-hidden) { grid-template-columns: minmax(0, 1fr); }
  /* Read projections share the normal field surface without becoming form controls. */
  .app-data-list.is-fields > .app-data-list-item { padding: 0; border: 0; gap: calc(1.5 * var(--space-1)); align-items: start; }
  .app-data-list.is-fields > .app-data-list-item > dt { font-size: var(--font-size-label, var(--font-size-sm)); font-weight: 600; }
  .app-data-list.is-fields > .app-data-list-item > dd { inline-size: 100%; }
  .app-data-list.is-fields .app-data-list-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-data-table-wrap.is-compact .app-data-table :is(th, td) { padding-block: var(--space-1); }
  .app-data-table .app-table-meta.is-inline { display: inline; margin: 0; }
  @container read-table ((max-width: 52rem) and style(--read-table-wide-breakpoint: default)) or ((max-width: 40rem) and style(--read-table-wide-breakpoint: compact)) or ((max-width: 60rem) and style(--read-table-wide-breakpoint: wide)) or ((max-width: 80rem) and style(--read-table-wide-breakpoint: reference)) {
    .app-data-table-wrap.is-responsive.is-compact tbody tr > td { padding: 0; }
  }
}

/* Opt-in compact record headers and small multiline fields. */
@layer components {
  /* Single-line Focus fields have one explicit size, including native selects. */
  .app-theme-focus .app-settings-field > :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], select),
  .app-theme-focus .app-settings-field-control > :is(input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="search"], select) { block-size: var(--control-height, 2.5rem); min-block-size: var(--control-height, 2.5rem); }
  .app-workspace-header.is-compact-actions { flex-wrap: wrap; }
  .app-workspace-header.is-compact-actions > h1 { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 100%; white-space: normal; }
  .app-workspace-header.is-compact-actions > .app-workspace-identity { flex: 1 1 12rem; min-inline-size: 0; }
  .app-workspace-header.is-compact-actions > .app-workspace-actions { flex: 0 0 auto; inline-size: auto; flex-wrap: nowrap; }
  .app-workspace-header.is-compact-actions > .app-workspace-actions > .app-status-badge {
    --status-height: var(--icon-button-size, 2rem);
    --status-mark-size: calc(var(--status-height) - 2 * var(--status-border-width));
    --status-icon-size: var(--icon-button-icon-size, 1rem);
    --status-font-size: var(--font-size-control);
  }
  .app-workspace-identity.has-truncated-detail > span { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Group identity and state independently from commands so neither drifts across the header. */
  .app-workspace-header.has-grouped-heading { gap: var(--space-3) var(--space-5); }
  .app-workspace-heading { display: flex; flex: 1 1 26rem; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-inline-size: 0; }
  .app-workspace-state { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
  .app-workspace-header.has-grouped-heading > .app-workspace-actions { flex-wrap: wrap; max-inline-size: 100%; min-inline-size: 0; }
  .app-workspace-command-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); max-inline-size: 100%; }
  .app-workspace-command-group:not(:has(> *)) { display: none; }
  .app-workspace-command-group + .app-workspace-command-group { border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--space-3); }
  .app-settings-field textarea:is([rows="1"], [rows="2"]) { min-block-size: var(--control-height, 2.5rem); }
  @media (max-width: 42rem) {
    .app-workspace-header.is-compact-actions { flex-wrap: wrap; }
    .app-workspace-header.is-compact-actions > .app-workspace-actions { flex: 1 1 100%; inline-size: 100%; flex-wrap: wrap; justify-content: flex-start; }
  }
}

@layer components {
  /* Flat Focus records follow the article workspace; actions remain last and right-aligned. */
  .app-record-list { container-type: inline-size; container-name: record-list; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
  .app-record-list-item { position: relative; min-inline-size: 0; border-block-end: 1px solid var(--color-border); background: var(--color-surface); --record-action-size: var(--icon-button-size, 2rem); --record-action-gap: var(--space-1); --record-inset: 0px; }
  .app-record-list-header { display: flex; gap: var(--space-4); align-items: center; min-block-size: 4rem; padding: .625rem var(--record-inset); }
  .app-record-list-fields { flex: 1; display: grid; grid-template-columns: var(--record-columns); gap: var(--space-4); align-items: center; min-inline-size: 0; margin: 0; }
  .app-record-list-field { min-inline-size: 0; }
  .app-record-list-field > dt { color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 400; line-height: 1.4; margin-block-end: .125rem; }
  .app-record-list-field > dt.is-visually-hidden { clip-path: inset(50%); block-size: 1px; inline-size: 1px; overflow: hidden; position: absolute; white-space: nowrap; }
  .app-record-list-field > dd { margin: 0; overflow-wrap: anywhere; font-size: .8125rem; }
  .app-record-list-field.is-numeric { text-align: end; font-variant-numeric: tabular-nums; }
  .app-record-list-field:first-child { text-align: start; }
  .app-record-list-field .app-table-link { color: var(--color-text-muted); font-size: .75rem; text-decoration: none; }
  .app-record-list-field .app-table-link:hover { color: var(--color-accent); text-decoration: underline; }
  .app-record-list-field .app-table-meta { color: var(--color-text-muted); font-size: .6875rem; }
  .app-record-list-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--record-action-gap); flex-shrink: 0; align-self: flex-start; margin-block-start: .5rem; }
  .app-record-list-toggle-slot { display: block; inline-size: var(--record-action-size); block-size: var(--record-action-size); }
  .app-record-list-details > summary { list-style: none; position: absolute; inset-block-start: calc(.625rem + .5rem); inset-inline-end: calc(var(--record-inset) + var(--record-action-count) * (var(--record-action-size) + var(--record-action-gap))); cursor: pointer; }
  .app-record-list-details > summary::-webkit-details-marker { display: none; }
  .app-record-list-content { border-block-start: 1px solid var(--color-border); padding-block: var(--space-4); }
  .app-record-list.has-leading-details { --record-leading-field-size: calc(3 * var(--icon-button-size, 2rem) + var(--space-2)); }
  .app-record-list.has-leading-details .app-record-list-field:first-child { padding-inline-end: calc(var(--record-action-size) + var(--space-2)); }
  .app-record-list.has-leading-details .app-record-list-actions:empty { display: none; }
  .app-record-list.has-leading-details .app-record-list-details > summary { inset-inline-start: calc(var(--record-inset) + var(--record-leading-field-size) - var(--record-action-size)); inset-inline-end: auto; }
  /* Related record facts remain close together at wide desktop sizes. */
  .app-detail-grid { container: detail-grid / inline-size; max-inline-size: 72rem; min-inline-size: 0; }
  .app-detail-grid.has-media { max-inline-size: none; }
  .app-detail-grid-layout { display: grid; grid-template-columns: 10rem minmax(0,1fr); gap: var(--space-5); align-items: start; }
  .app-detail-grid-media { inline-size: 10rem; block-size: 8rem; overflow: hidden; }
  .app-detail-grid-media > img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; }
  .app-detail-grid-media > img[hidden] { display: none; }
  .app-detail-grid-media > div { inline-size: 100%; block-size: 100%; }
  .app-image-field.is-compact .app-image-field-frame { block-size: 8rem; min-block-size: 0; aspect-ratio: auto; border: 0; background: transparent; }
  .app-image-field.is-compact:has([data-app-image-field-input]) .app-image-field-frame { border: 1px solid var(--color-border); background: var(--color-surface-muted); }
  .app-image-field.is-compact :is(.app-image-field-dropzone,.app-image-field-empty-readonly,.app-image-field-document) { min-block-size: 0; padding: var(--space-2); gap: var(--space-1); }
  .app-image-field.is-compact .app-image-field-dropzone > .app-image-field-drop-icon { display: none; }
  .app-image-field.is-invalid .app-image-field-frame,
  .app-image-field.is-compact.is-invalid .app-image-field-frame { border-color: var(--color-danger); }
  .app-detail-grid-content { display: grid; grid-template-columns: repeat(var(--detail-grid-columns),minmax(0,1fr)); gap: var(--space-5); align-items: start; }
  .app-detail-grid-section { min-inline-size: 0; }
  .app-detail-grid-section + .app-detail-grid-section { border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--space-5); }
  .app-detail-grid-section > h3 { margin: 0 0 var(--space-2); font-size: var(--font-size-control); font-weight: 650; line-height: 1.4; }
  .app-record-list-content:has(> .app-detail-grid) { padding-block: var(--space-3); }
  .app-detail-grid .app-data-list.is-plain > .app-data-list-item { grid-template-columns: minmax(0,8rem) minmax(0,1fr); align-items: start; gap: var(--space-2); }
  .app-detail-grid .app-data-list.is-dense > .app-data-list-item { padding-block: calc(var(--space-1) / 2); }
  .app-detail-grid .app-data-list dt { font-size: var(--font-size-caption); overflow-wrap: anywhere; }
  .app-detail-grid .app-data-list dd { font-size: var(--font-size-control); }
  @container detail-grid (max-width: 52rem) {
    .app-detail-grid-content:not(.has-1-columns) { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .app-detail-grid-section + .app-detail-grid-section { border-inline-start: 0; padding-inline-start: 0; }
  }
  @container detail-grid (max-width: 32rem) {
    .app-detail-grid-layout { grid-template-columns: minmax(0,1fr); }
    .app-detail-grid-content:not(.has-1-columns) { grid-template-columns: minmax(0,1fr); }
    .app-detail-grid-section + .app-detail-grid-section { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); }
  }
  .app-record-list-field .app-data-list { font-size: .75rem; }
  .app-record-list-field .app-data-list-item { border: 0; padding: 0; }
  .app-record-list-item.is-sortable-source { opacity: .55; }
  .app-record-list-item.is-sortable-before { box-shadow: 0 -3px 0 var(--color-accent); }
  .app-record-list-item.is-sortable-after { box-shadow: 0 3px 0 var(--color-accent); }
  @container record-list (max-width: 55rem) {
    .app-record-list-header { align-items: start; gap: var(--space-2); }
    .app-record-list-fields { grid-template-columns: minmax(2.5rem, .25fr) repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-3); }
    .app-record-list-field.is-primary { grid-column: span 2; }
    .app-record-list.has-leading-details .app-record-list-fields { grid-template-columns: var(--record-leading-field-size) repeat(2, minmax(0, 1fr)); }
  }
  @container record-list (max-width: 32rem) {
    .app-record-list-header { padding-block-start: 3rem; }
    .app-record-list-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-record-list.has-leading-details .app-record-list-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .app-record-list-field:first-child { grid-column: 1 / -1; }
    .app-record-list-field.is-primary { grid-column: 1 / -1; }
    .app-record-list-field.is-numeric { text-align: start; }
    .app-record-list-actions { position: absolute; inset-block-start: .625rem; inset-inline-end: var(--record-inset); margin: 0; }
    .app-record-list-details > summary { inset-block-start: .625rem; }
    .app-record-list.has-leading-details .app-record-list-details > summary { inset-block-start: 3rem; }
    .app-record-list.has-leading-details .app-record-list-item:has(.app-sortable-position) > .app-record-list-details > summary { inset-block-start: calc(3rem + .5rem); }
  }

  /* Local form tabs keep a fixed navigation position and preserve every input. */
  .app-form-tabs { display: grid; gap: var(--space-4); min-inline-size: 0; }
  .app-form-tabs.has-workspace-navigation { gap: 0; }
  .app-form-tabs-list { display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
  .app-form-tabs-navigation > .app-form-tabs-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
  .app-form-tabs .app-form-tabs-navigation .app-form-tab.is-active { background: transparent; }
  .app-form-tabs-navigation > .app-workspace-actions[hidden] { display: flex; visibility: hidden; }
  .app-form-tab { align-items: center; gap: var(--space-1); }
  .app-theme-focus .app-form-tab.is-active { background: var(--color-info-soft); }
  .app-form-tab-warning { --status-accent: var(--status-color-warning); --status-icon-color: var(--status-bright-icon-color); align-self: center; block-size: var(--status-mark-size); border-radius: var(--status-radius); }
  .app-form-tab.has-errors { color: var(--color-danger); }
  .app-form-tabs-panel { min-inline-size: 0; }
  /* Server-selected presentation is ready before deferred modules execute.
     A genuinely script-free browser retains every native section/control. */
  @media (scripting: enabled) {
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]) > .app-form-tabs-panel:not([data-form-tab-initial]) { display: none; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]) > .app-form-tabs-panel > .app-form-tabs-heading { display: none; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]) > .app-form-tabs-navigation > [data-app-form-tab-actions]:not([data-form-tab-initial]) { visibility: hidden; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]).has-stable-panels > .app-form-tabs-panel { grid-area: 2 / 1; align-self: start; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]).has-stable-panels > .app-form-tabs-panel:not([data-form-tab-initial]) { display: block; visibility: hidden; }
    /* Native anchors still reveal their destination if a module cannot load. */
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]) > .app-form-tabs-panel:target { display: block; visibility: visible; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]):has(> .app-form-tabs-panel:target) > .app-form-tabs-navigation > [data-app-form-tab-actions] { visibility: visible; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]):has(> .app-form-tabs-panel:target) > .app-form-tabs-panel[data-form-tab-initial]:not(:target) { display: none; }
    [data-app-form-tabs]:not([data-app-form-tabs-enhanced]).has-stable-panels:has(> .app-form-tabs-panel:target) > .app-form-tabs-panel[data-form-tab-initial]:not(:target) { display: block; visibility: hidden; }
  }
  [data-app-form-tabs-enhanced] .app-form-tabs-heading { display: none; }
  .app-form-tabs-panel[hidden] { display: none; }
  /* Reserve the tallest local panel before Overlay fixes its height. Hidden
     panels remain invisible and unfocusable; native fallback stays stacked. */
  [data-app-form-tabs-enhanced].has-stable-panels > .app-form-tabs-panel { grid-area: 2 / 1; align-self: start; }
  [data-app-form-tabs-enhanced].has-stable-panels > .app-form-tabs-panel[hidden] { display: block; visibility: hidden; }
}

/* Compact review steps and quiet, reusable record/selection surfaces. */
@layer components {
  .app-wizard-progress.is-compact { gap: var(--space-2); padding: 0; border: 0; border-radius: 0; background: transparent; }
  .app-wizard-progress.is-compact .app-wizard-step::after { display: none; }
  .app-wizard-progress.is-compact .app-wizard-step :is(.app-wizard-step-button,.app-wizard-step-content) { flex-direction: row; justify-content: center; gap: var(--space-2); min-block-size: 2.75rem; padding: var(--space-2); border: 0; border-block-end: 2px solid transparent; border-radius: 0; background: transparent; }
  .app-wizard-progress.is-compact .app-wizard-step[aria-current="step"] > :first-child { border-block-end-color: var(--color-accent); }
  .app-wizard-progress.is-compact .app-wizard-step-marker { inline-size: 1.375rem; block-size: 1.375rem; min-inline-size: 1.375rem; min-block-size: 1.375rem; flex: 0 0 1.375rem; font-size: .6875rem; box-shadow: none; }
  .app-wizard-progress.is-compact .app-wizard-step-label { font-size: var(--font-size-sm); font-weight: 500; }
  .app-wizard-progress.is-compact .app-wizard-step-description { display: none; }
  .app-record-context { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); min-inline-size: 0; }
  .app-record-context-identity { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .app-record-context.is-compact { padding: var(--space-2) var(--space-3); gap: var(--space-3); }
  .app-record-context.is-compact .app-record-context-identity strong { font-size: var(--font-size-control); }
  .app-record-context.is-plain { grid-template-columns:minmax(0,1fr); gap:var(--space-2); padding:0; border:0; border-radius:0; background:transparent; }
  .app-record-context.is-plain .app-record-context-metadata { flex-wrap:wrap; gap:var(--space-1) var(--space-3); min-inline-size:0; color:var(--color-text-muted); font-size:var(--font-size-caption); }
  .app-record-context.is-plain .app-record-context-metadata dt { position:absolute; inline-size:1px; block-size:1px; margin:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
  .app-record-context-link .app-record-context.is-plain .app-record-context-identity strong { color:var(--color-accent); }
  .app-record-context-identity strong { font-size: var(--font-size-lg); font-weight: 650; overflow-wrap: anywhere; }
  .app-record-context-identity > span { font-size: var(--font-size-sm); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .app-record-context-metadata { display: flex; gap: var(--space-5); margin: 0; min-inline-size: max-content; font-size: var(--font-size-sm); }
  .app-record-context-metadata > div { display: grid; flex: 0 0 auto; gap: var(--space-1); }
  .app-record-context-metadata dt { color: var(--color-text-muted); font-size: var(--font-size-caption); white-space: nowrap; }
  .app-record-context-metadata dd { margin: 0; font-variant-numeric: tabular-nums; }
  .app-record-context-metadata dd.is-truncated { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
  .app-record-context-tools { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); min-inline-size: max-content; }
  .app-record-context-tools > * { flex-shrink: 0; }
  .app-record-context:not(:has(> .app-record-context-metadata)) { grid-template-columns: minmax(0,1fr) auto; }
  .app-record-context-tools > .app-status-badge { min-inline-size: var(--status-min-width); max-inline-size: none; }
  .app-record-context-link { display: block; color: inherit; text-decoration: none; border-radius: var(--radius-control); }
  .app-record-context-link:is(:hover, :focus-visible) { color: inherit; text-decoration: none; }
  .app-record-context-link:is(:hover, :focus-visible) .app-record-context { border-color: var(--color-accent); }
  .app-record-context-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  /* Optional artwork retains the compact context and wraps within its own column. */
  .app-record-context-frame { container: record-context / inline-size; min-inline-size: 0; }
  .app-record-context.has-media { grid-template-columns: auto max-content minmax(0,1fr) auto; }
  .app-record-context.has-media:not(:has(> .app-record-context-metadata)) { grid-template-columns: auto minmax(0,1fr) auto; }
  .app-record-context-media { display: grid; place-items: center; --pictogram-size: 2.5rem; }
  .app-record-context.has-media .app-record-context-identity strong { white-space: nowrap; overflow-wrap: normal; }
  .app-record-context.has-media .app-record-context-metadata { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,9rem),1fr)); gap: var(--space-3); min-inline-size: 0; }
  .app-record-context.has-media .app-record-context-metadata > div { min-inline-size: 0; align-content: start; }
  .app-record-context.has-media .app-record-context-metadata dd { overflow-wrap: anywhere; }
  @container record-context (max-width: 36rem) {
    .app-record-context.has-media { grid-template-columns: auto minmax(0,1fr) auto; }
    .app-record-context.has-media .app-record-context-media { grid-column: 1; grid-row: 1; }
    .app-record-context.has-media .app-record-context-identity { grid-column: 2; grid-row: 1; }
    .app-record-context.has-media .app-record-context-metadata { grid-column: 2 / -1; grid-row: 2; }
    .app-record-context.has-media .app-record-context-tools { grid-column: 3; grid-row: 1; align-self: center; }
  }
  @container record-context (max-width: 24rem) {
    .app-record-context.has-media { grid-template-columns: auto minmax(0,1fr); }
    .app-record-context.has-media .app-record-context-tools { grid-column: 2; grid-row: 3; justify-content: flex-start; }
  }
  .app-button-group { display: inline-flex; flex-wrap: wrap; gap: .125rem; padding: .125rem; border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface-muted); }
  .app-button-group > .app-button { border-color: transparent; background: transparent; color: var(--color-text-muted); font-weight: 400; }
  .app-button-group > .app-button[aria-pressed="true"] { border-color: var(--color-border); background: var(--color-surface); color: var(--color-text); font-weight: 600; }
  .app-checkbox-list { display: grid; align-content: start; gap: 0; min-inline-size: 0; }
  .app-checkbox-badges > .app-checkbox { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
  .app-checkbox-dropdown-field { display: grid; gap: var(--space-1); min-inline-size: 0; }
  .app-checkbox-dropdown-label { color: var(--color-text-muted); font-size: var(--font-size-sm); }
  .app-checkbox-dropdown { position: relative; min-inline-size: 0; }
  .app-checkbox-dropdown > summary { display: flex; align-items: center; gap: var(--space-1); min-block-size: 2.5rem; padding-inline: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); color: var(--color-text); cursor: pointer; list-style: none; }
  .app-checkbox-dropdown > summary::-webkit-details-marker { display: none; }
  .app-checkbox-dropdown > summary::after { content: '▾'; margin-inline-start: auto; padding-inline-start: var(--space-2); }
  .app-checkbox-dropdown > summary:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
  .app-checkbox-dropdown-panel { position: absolute; inset-block-start: calc(100% + var(--space-1)); inset-inline-start: 0; z-index: var(--z-popover); min-inline-size: 100%; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); box-shadow: var(--shadow-popover); }
  .app-checkbox-dropdown-panel .app-checkbox-badges { display: grid; gap: var(--space-2); }
  .app-checkbox-dropdown-panel .app-checkbox-badges > .app-checkbox { margin: 0; white-space: nowrap; }
  .app-checkbox-list > [id$="-label"] { padding-block-end: var(--space-2); color: var(--color-text-muted); font-size: var(--font-size-caption); font-weight: 600; }
  .app-form-field.app-checkbox-list > .app-checkbox { display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.5rem; padding: var(--space-2); margin: 0; border-radius: var(--radius-control); color: var(--color-text); font-weight: 400; }
  .app-checkbox-list > .app-checkbox:has(input:not(:disabled)):hover { background: var(--color-surface-muted); }
  .app-checkbox-list > .app-checkbox:has(input:disabled) { color: var(--color-text-muted); }
  .app-checkbox-list-label { min-inline-size: 0; overflow-wrap: anywhere; }
  .app-checkbox-list-meta { margin-inline-start: auto; padding-inline-start: var(--space-3); color: var(--color-text-muted); font-size: var(--font-size-caption); font-variant-numeric: tabular-nums; white-space: nowrap; }
  .app-checkbox-grid { display: grid; gap: var(--space-1) var(--space-4); grid-template-columns: repeat(2,minmax(0,1fr)); }
  .app-checkbox-grid.has-3-columns { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .app-checkbox-grid.has-4-columns { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .app-checkbox-grid > :is([id$="-label"],.app-settings-field-error) { grid-column: 1 / -1; }
  .app-checkbox-grid > .app-checkbox { min-width: 0; }
  .app-settings-preview-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--space-6); align-items: start; }
  .app-theme-focus .app-settings-preview-layout > .app-form-section:not([hidden]) ~ .app-form-section:not([hidden]) { border-block-start: 0; }
  .app-settings-preview-layout > .app-form-section + .app-form-section { border-inline-start: 1px solid var(--color-border); padding-inline-start: var(--space-6); }
  .app-settings-preview-layout .app-panel-header { min-block-size: 2.75rem; }
  .app-document-sample { min-block-size: 16rem; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-control); background: var(--color-surface); }
  .app-document-sample > pre { margin: 0; font: inherit; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
  .app-document-sample-caption { display: flex; justify-content: space-between; gap: var(--space-3); margin-block-end: var(--space-5); color: var(--color-text-muted); font-size: var(--font-size-caption); }
  @media(max-width:60rem) { .app-settings-preview-layout { grid-template-columns: minmax(0,1fr); } .app-settings-preview-layout > .app-form-section + .app-form-section { border-inline-start: 0; padding-inline-start: 0; } }
  @media(max-width:36rem) { .app-checkbox-grid { grid-template-columns: minmax(0,1fr); } }
  .app-choice-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-5); min-inline-size: 0; }
  .app-review-layout { gap: var(--space-5); }
  .app-review-layout .app-panel-header h2 { font-size: var(--font-size-lg); }
  .app-review-layout .app-panel-actions { opacity: 1; visibility: visible; pointer-events: auto; }
  .app-review-options { padding-block-start: var(--space-3); border-block-start: 1px solid var(--color-border); }
  .app-review-summary { padding: var(--space-3) var(--space-4); border-radius: var(--radius-control); background: var(--color-surface-muted); }
  .app-review-summary .app-data-list { gap: var(--space-4); }
  .app-review-layout .app-review-summary .app-data-list .app-data-list-item { display: flex; align-items: baseline; gap: var(--space-3); min-block-size: 1.5rem; }
  .app-review-summary .app-data-list-item dd { font-weight: 600; }
  .app-overlay:has(.app-review-layout) { inline-size: min(64rem,calc(100vw - 2rem)); block-size: min(42rem,calc(100dvh - 2rem)); }
  @media (max-width: 42rem) {
    .app-record-context { grid-template-columns: minmax(0,1fr) auto; gap: var(--space-3); }
    .app-record-context-metadata { grid-column: 1 / -1; grid-row: 2; gap: var(--space-5); flex-wrap: wrap; min-inline-size: 0; }
    .app-record-context-tools { align-self: start; }
    .app-choice-columns { grid-template-columns: minmax(0,1fr); gap: var(--space-4); }
    .app-review-layout .app-form-section-tools { inline-size: 100%; }
    .app-review-summary .app-data-list.has-2-columns { --app-data-list-columns: 1; }
    .app-wizard-progress.is-compact { gap: var(--space-1); }
    .app-wizard-progress.is-compact .app-wizard-step :is(.app-wizard-step-button,.app-wizard-step-content) { flex-direction: column; padding-inline: var(--space-1); gap: var(--space-1); }
    .app-wizard-progress.is-compact .app-wizard-step-label { font-size: .6875rem; white-space: nowrap; overflow-wrap: normal; }
  }
}

@layer components {
  /* Deferred image selection: one bounded preview, independent of collection length. */
  .app-image-selection { display: grid; gap: var(--space-3); min-inline-size: 0; }
  .app-image-selection-toolbar, .app-image-selection-navigation, .app-image-selection-actions { display: flex; align-items: center; gap: var(--space-2); }
  .app-image-selection-toolbar { justify-content: space-between; flex-wrap: wrap; }
  .app-image-selection-toolbar > .app-field-error { flex-basis: 100%; }
  .app-image-selection-toolbar .app-form-field { margin: 0; }
  .app-image-selection-card { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--space-2); margin: 0; text-align: center; }
  .app-image-selection-card img { inline-size: 100%; block-size: 11rem; object-fit: contain; }
  .app-image-selection-card figcaption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-size-sm); color: var(--color-text-muted); }
  .app-image-selection-actions, .app-image-selection-navigation { justify-content: center; }
  .app-image-selection-navigation span { min-inline-size: 4rem; text-align: center; font-variant-numeric: tabular-nums; }
  .app-image-selection .is-selected { color: var(--color-accent); background: color-mix(in srgb, var(--color-accent) 12%, transparent); }
  .app-image-selection.is-dragging { outline: 2px dashed var(--color-accent); outline-offset: var(--space-1); }
}

@layer components {
  /* Reusable paper geometry editor; document semantics remain with the owner. */
  .app-layout-editor { min-inline-size: 0; inline-size: 100%; }
  .app-layout-sheet { position: relative; inline-size: 100%; aspect-ratio: 210 / 297; background: var(--color-surface); border: 1px solid var(--color-border); }
  .app-layout-node { position: absolute; min-inline-size: 0; border: 1px dashed var(--color-border); background: var(--color-surface-muted); }
  .app-layout-node[hidden] { display: none; }
  .app-layout-node.is-selected { z-index: 2; outline: 2px solid var(--color-accent); outline-offset: 1px; }
  .app-layout-node-body { display: flex; flex-direction: column; align-items: start; justify-content: start; inline-size: 100%; block-size: 100%; min-block-size: 0; padding: var(--space-1); border: 0; border-radius: 0; text-align: start; overflow: hidden; white-space: normal; touch-action: none; cursor: move; }
  .app-layout-node-title { font-size: var(--font-size-xs); font-weight: 600; line-height: 1.2; }
  .app-layout-node-preview { white-space: pre-line; font-size: var(--font-size-xs); line-height: 1.2; color: var(--color-text-muted); }
  .app-layout-node [data-layout-resize] { position: absolute; inset-inline-end: 0; inset-block-end: 0; cursor: nwse-resize; touch-action: none; }
  .app-layout-node:not(.is-selected) [data-layout-resize] { visibility: hidden; }
  .app-layout-node:focus-within [data-layout-resize] { visibility: visible; }
}

/* Calm planning surfaces share controls and hierarchy without changing other ERP workspaces. */
@layer components {
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) { background: var(--color-surface); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) > .app-workspace-section { padding: var(--workspace-content-space); margin: 0; }
  .app-theme-focus.app-resource-workspace > .app-workspace-section > :not(:first-child, .app-overlay) { margin-block-start: var(--space-4); }
  .app-theme-focus.app-resource-workspace > .app-workspace-section.app-section-stack > :not(.app-overlay) { margin-block-start: 0; }
  .app-theme-focus.app-planning-workspace > .app-workspace-section.app-section-stack { gap: var(--space-5); }
  .app-theme-focus.app-planning-workspace > .app-workspace-section > .app-form-section { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-filter-bar.is-compact { padding: 0; margin: 0; border: 0; background: transparent; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-filter-bar-field > label { font-weight: 500; color: var(--color-text-muted); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-filter-bar.is-compact :is(input, select):not(.app-date-input-picker) { background: var(--workspace-muted-fill); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-button:not(.is-primary, .is-danger, .is-text, .app-planning-bar) { box-shadow: 0 1px 2px rgb(24 32 48 / .025); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-icon-button:not(.is-primary, .is-danger, .is-ghost) { box-shadow: 0 1px 2px rgb(24 32 48 / .025); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-panel-header h2 { font-size: var(--font-size-lg); font-weight: 600; letter-spacing: -.025em; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-panel-header { margin-block-end: var(--space-3); }
  .app-theme-focus.app-resource-workspace .app-resource-navigation { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding-inline: var(--workspace-content-space); border-block-end: 1px solid var(--color-border); background: var(--color-surface); }
  .app-theme-focus.app-resource-workspace .app-resource-navigation > .app-tabs { flex: 1 1 auto; min-inline-size: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: transparent; }
  .app-theme-focus.app-resource-workspace .app-resource-navigation > .app-view-switcher { flex-wrap: wrap; max-inline-size: 100%; margin-block: var(--space-2); }
  .app-theme-focus.app-resource-workspace .app-resource-navigation .app-tabs-list { gap: var(--space-5); }
  .app-theme-focus.app-resource-workspace .app-resource-navigation .app-tab { min-block-size: 3.25rem; padding-inline: var(--space-1); border: 0; border-block-end: 2px solid transparent; border-radius: 0; font-weight: 600; color: var(--color-text-muted); background: transparent; }
  .app-theme-focus.app-resource-workspace .app-resource-navigation .app-tab.is-active { color: var(--color-accent); border-block-end-color: var(--color-accent); box-shadow: none; }
  .app-theme-focus.app-resource-workspace > .app-workspace-section > .app-tabs,
  .app-theme-focus.app-planning-workspace .app-planning-commandbar > .app-tabs { border: 0; background: transparent; padding: 0; }
  .app-theme-focus.app-resource-workspace > .app-workspace-section > .app-tabs .app-tabs-list,
  .app-theme-focus.app-planning-workspace .app-planning-commandbar > .app-tabs .app-tabs-list { display: inline-flex; flex-wrap: wrap; inline-size: fit-content; gap: var(--space-1); padding: var(--space-1); border-radius: calc(var(--radius-control) + var(--space-1)); background: var(--workspace-segment-fill); }
  .app-theme-focus.app-resource-workspace > .app-workspace-section > .app-tabs .app-tab,
  .app-theme-focus.app-planning-workspace .app-planning-commandbar > .app-tabs .app-tab { min-block-size: 2rem; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-control); color: var(--color-text-muted); background: transparent; font-size: var(--font-size-control); font-weight: 600; line-height: 1.3; }
  .app-theme-focus.app-resource-workspace > .app-workspace-section > .app-tabs .app-tab.is-active,
  .app-theme-focus.app-planning-workspace .app-planning-commandbar > .app-tabs .app-tab.is-active { background: var(--color-surface); color: var(--color-text); box-shadow: 0 1px 3px rgb(24 32 48 / .12); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace) .app-view-switcher.is-compact { border: 0; border-radius: calc(var(--radius-control) + var(--space-1)); background: var(--workspace-segment-fill); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace) .app-view-switcher.is-compact > .app-button { min-block-size: 2rem; border-radius: var(--radius-control); box-shadow: none; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace) .app-view-switcher.is-compact > .app-button.is-active { color: var(--color-text); background: var(--color-surface); box-shadow: 0 1px 3px rgb(24 32 48 / .12); }
  .app-theme-focus.app-planning-workspace .app-planning-board { border: 0; border-radius: 0; box-shadow: none; }
  .app-theme-focus.app-planning-workspace .app-planning-commandbar { min-block-size: 4.25rem; gap: var(--space-4); padding-block: var(--space-3); }
  .app-theme-focus.app-planning-workspace .app-planning-board-body { padding: var(--space-3) var(--space-4); }
  .app-theme-focus.app-planning-workspace .app-planning-period { gap: var(--space-3); font-size: var(--font-size-control); }
  .app-theme-focus.app-planning-workspace .app-planning-period > strong { font-weight: 500; }
  .app-theme-focus.app-planning-workspace .app-planning-summary { padding-block: var(--space-3); background: var(--workspace-muted-fill); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-data-table thead th { color: var(--color-text-muted); background: var(--workspace-muted-fill); font-size: var(--font-size-caption); font-weight: 500; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-data-table tbody td { padding-block: var(--space-3); border-block-end-color: var(--color-border); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-data-table :is(th, td):first-child { text-align: start; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-data-table :is(th, td).is-actions { text-align: end; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-data-table td.is-actions .app-table-actions { justify-content: flex-end; }
  .app-theme-focus.app-resource-workspace .app-pictogram-label.is-compact { gap: var(--space-2); }
  .app-theme-focus.app-resource-workspace .app-pictogram-label.is-compact .app-pictogram { --pictogram-size: 2.25rem; }
  .app-theme-focus.app-planning-workspace .app-planning-procedures .app-pictogram { --pictogram-size: 2rem; }
  .app-theme-focus.app-planning-workspace .app-planning-table thead th { background: var(--workspace-muted-fill); }
  .app-theme-focus.app-planning-workspace .app-planning-timeline { border-radius: var(--radius-control); }
  .app-theme-focus.app-planning-workspace .app-planning-bar { border-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-surface)); background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface)); }
  .app-theme-focus.app-resource-workspace .app-interval-timeline-heading { color: var(--color-text-muted); background: var(--workspace-muted-fill); }
  .app-theme-focus.app-resource-workspace .app-interval-timeline > tbody > tr { block-size: 4.25rem; }
  .app-theme-focus.app-resource-workspace .app-interval-timeline > tbody > tr:hover { background: var(--workspace-muted-fill); }
  .app-theme-focus.app-resource-workspace .app-interval-timeline-cell.is-resource strong { font-weight: 600; }
  .app-theme-focus.app-resource-workspace .app-interval-bar-track { border-color: var(--color-border); background: var(--workspace-muted-fill); }
  .app-theme-focus.app-resource-workspace .app-interval-timeline .app-interval-bar-segment { border-color: transparent; }
  .app-theme-focus.app-resource-workspace .app-list-footer { border-block-start: 1px solid var(--color-border); padding-block-start: var(--space-3); }
  @media (max-width: 48rem) {
    .app-theme-focus.app-planning-workspace .app-planning-commandbar { padding-inline: var(--space-3); gap: var(--space-2); }
    .app-theme-focus.app-planning-workspace .app-planning-board-body { padding-inline: var(--space-3); }
    .app-theme-focus.app-resource-workspace .app-resource-navigation .app-tabs-list { gap: var(--space-4); }
    .app-theme-focus.app-resource-workspace .app-interval-timeline > tbody > tr { block-size: auto; }
  }
}
@layer components {
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) .app-filter-bar.is-compact .app-filter-bar-body { padding-block: 0; }
  @media (max-width: 48rem) {
    .app-theme-focus.app-resource-workspace .app-interval-timeline > tbody > tr { gap: var(--space-1); padding-block: var(--space-1); }
  }
}

/* These named owner dialogs keep their appearance when Core moves them to the top layer. */
@layer components {
  .app-overlay:is([id^="production-"], [id^="schedule-"], [id^="operation-assignment-"], [id^="production-availability-"], [id^="production-overtime-"], [id^="availability-detail-info-"], [id^="availability-capacity-editor-"], [id="personnel-capacity-info"], [id^="machine-availability-"], [id="machine-downtime-editor"], [id="machine-capability-editor"], [id="machine-capability-filter-picker"], [id="procedure-capacity-info"]) .app-overlay-frame { border-radius: var(--radius-panel); box-shadow: 0 12px 36px rgb(24 32 48 / .16), 0 2px 6px rgb(24 32 48 / .06); }
  .app-overlay:is([id^="production-"], [id^="schedule-"], [id^="operation-assignment-"], [id^="production-availability-"], [id^="production-overtime-"], [id^="availability-detail-info-"], [id^="availability-capacity-editor-"], [id="personnel-capacity-info"], [id^="machine-availability-"], [id="machine-downtime-editor"], [id="machine-capability-editor"], [id="machine-capability-filter-picker"], [id="procedure-capacity-info"]) .app-overlay-header { align-items: center; background: var(--color-surface); }
  .app-overlay:is([id^="production-"], [id^="schedule-"], [id^="operation-assignment-"], [id^="production-availability-"], [id^="production-overtime-"], [id^="availability-detail-info-"], [id^="availability-capacity-editor-"], [id="personnel-capacity-info"], [id^="machine-availability-"], [id="machine-downtime-editor"], [id="machine-capability-editor"], [id="machine-capability-filter-picker"], [id="procedure-capacity-info"]) .app-overlay-header h2 { font-weight: 600; letter-spacing: -.02em; line-height: 1.35; }
  .app-overlay:is([id^="production-"], [id^="schedule-"], [id^="operation-assignment-"], [id^="production-availability-"], [id^="production-overtime-"], [id^="availability-detail-info-"], [id^="availability-capacity-editor-"], [id="personnel-capacity-info"], [id^="machine-availability-"], [id="machine-downtime-editor"], [id="machine-capability-editor"], [id="machine-capability-filter-picker"], [id="procedure-capacity-info"]) .app-overlay-footer { background: var(--workspace-muted-fill); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace, .app-planning-surface) :is(.app-icon-select-list, .app-reference-suggestions) { border-radius: var(--radius-control); box-shadow: 0 8px 20px rgb(24 32 48 / .12); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace, .app-planning-surface) .app-disclosure { border-color: var(--color-border); border-radius: var(--radius-control); }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace, .app-planning-surface) .app-disclosure > summary { font-weight: 500; }
}

/* IntervalTimeline optional columns retain native table geometry and compact records. */
@layer components {
  .app-interval-timeline.without-actions { --interval-actions-size: 0px; }
  .app-interval-timeline.without-state.without-actions .app-interval-timeline-col-resource { inline-size: 14rem; }
  .app-interval-timeline.without-state.without-actions .app-interval-timeline-col-amount { inline-size: 7rem; }
  .app-interval-timeline.without-state.without-actions :is(th, td).is-resource { text-align: start; }
  .app-interval-timeline.without-state.without-actions :is(th, td).is-amount { text-align: end; }
  .app-procedure-capacity-chart { min-inline-size: 0; }
  .app-theme-focus:is(.app-planning-workspace, .app-resource-workspace, .app-production-workspace) :is(.app-procedure-capacity-chart, .app-quantity-comparison) .app-pictogram-label.is-compact .app-pictogram { --pictogram-size: 2.25rem; }
  .app-procedure-capacity-pool-title { margin: 0 0 var(--space-3); font-size: var(--font-size-sm); font-weight: 600; letter-spacing: -.01em; }
  .app-procedure-capacity-chart + .app-procedure-capacity-chart { padding-block-start: var(--space-4); border-block-start: 1px solid var(--color-border); }
  @media (max-width: 48rem) {
    .app-interval-timeline.without-state.without-actions > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; block-size: auto; }
    .app-interval-timeline.without-state.without-actions > tbody > tr > .is-resource { grid-column: 1; grid-row: 1; padding-inline-end: 0; }
    .app-interval-timeline.without-state.without-actions > tbody > tr > .is-amount { grid-column: 2; grid-row: 1; text-align: end; justify-self: end; }
    .app-interval-timeline.without-state.without-actions > tbody > tr > .is-timeline { grid-column: 1 / -1; grid-row: 2; }
  }
  @container (max-width: 48rem) {
    .app-interval-timeline.without-state.without-actions > tbody > tr { grid-template-columns: minmax(0, 1fr) auto; block-size: auto; }
    .app-interval-timeline.without-state.without-actions > tbody > tr > .is-resource { grid-column: 1; grid-row: 1; padding-inline-end: 0; }
    .app-interval-timeline.without-state.without-actions > tbody > tr > .is-amount { grid-column: 2; grid-row: 1; text-align: end; justify-self: end; }
    .app-interval-timeline.without-state.without-actions > tbody > tr > .is-timeline { grid-column: 1 / -1; grid-row: 2; }
  }
}

/* Order workspaces use the same flat surfaces as planning and resource boards. */
@layer components {
  .app-theme-focus.app-production-workspace .app-step-panel { border: 0; border-radius: 0; box-shadow: none; }
  .app-theme-focus.app-production-workspace .app-step-panel-header { padding-inline: 0; border-start-start-radius: 0; border-start-end-radius: 0; }
  .app-theme-focus.app-production-workspace .app-step-panel-body { padding-inline: 0; }
  .app-theme-focus.app-production-workspace > .app-workspace-section > .app-disclosure.is-prominent { border: 0; border-radius: 0; }
  .app-theme-focus.app-production-workspace > .app-workspace-section > .app-disclosure.is-prominent > summary { padding-inline: 0; background: transparent; font-weight: 600; }
  .app-theme-focus.app-production-workspace > .app-workspace-section > .app-disclosure.is-prominent > .app-disclosure-content { padding-inline: 0; border-block-start-color: var(--color-border); }
  .app-theme-focus.app-production-workspace .app-wizard-progress { border: 0; border-radius: 0; background: transparent; }
  .app-theme-focus.app-production-workspace .app-data-table tbody tr:hover { background: var(--workspace-muted-fill); }
}

@layer components {
  [data-overtime-editor] .app-overtime-wide { grid-column: 1 / -1; min-inline-size: 0; }
  [data-overtime-review]:empty { display: none; }
  #production-overtime-editor [data-overtime-editor] { gap: var(--space-3); }
}

@layer components {
  @container read-table (max-width: 52rem) {
    .app-quantity-comparison .app-data-table-wrap.is-responsive tbody tr { grid-template-columns: minmax(0, 1fr) auto; }
    .app-quantity-comparison .app-data-table-wrap.is-responsive tbody td:first-child { grid-column: 1; grid-row: 1; }
    .app-quantity-comparison .app-data-table-wrap.is-responsive tbody td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
    .app-quantity-comparison .app-data-table-wrap.is-responsive tbody td:last-child { grid-column: 2; grid-row: 1; justify-self: end; text-align: end; }
    .app-quantity-comparison .app-data-table-wrap.is-responsive .app-data-table-cell-label { display: none; }
  }
}