/* @proexteriors/ds v1.0 — components. Uses only dist/tokens.css custom properties (rule K-01).
   Class prefix pe- (rule K-04). Rule ids in comments point to RULES.md. */

/* ── Base ─────────────────────────────────────────────────────────────── */
.pe-app, .pe-app * { box-sizing: border-box; }
.pe-app { margin: 0; background: var(--pe-page); color: var(--pe-text); font: var(--pe-font-weight-regular) var(--pe-font-size-body)/var(--pe-font-leading-body) var(--pe-font-family-sans); -webkit-font-smoothing: antialiased; }
.pe-app h1, .pe-h1 { margin: 0; font-size: var(--pe-font-size-h1); line-height: var(--pe-font-leading-tight); font-weight: var(--pe-font-weight-bold); color: var(--pe-text); text-wrap: balance; }
.pe-app h2, .pe-h2 { margin: 0; font-size: var(--pe-font-size-h2); line-height: var(--pe-font-leading-tight); font-weight: var(--pe-font-weight-bold); }
.pe-app h3, .pe-h3 { margin: 0; font-size: var(--pe-font-size-h3); line-height: var(--pe-font-leading-snug); font-weight: var(--pe-font-weight-semibold); }
.pe-eyebrow { margin: 0; font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-bold); letter-spacing: var(--pe-font-tracking-label); text-transform: uppercase; color: var(--pe-text-muted); }
/* A-03: links inside text are underlined, never colour alone (WCAG 1.4.1, the axe link-in-text-block failure). */
.pe-app a { color: var(--pe-link); text-decoration: underline; text-underline-offset: 2px; }
.pe-app a:hover { color: var(--pe-link-hover); }
/* A-02: one focus ring everywhere. */
.pe-app :focus-visible { outline: var(--pe-border-width-strong) solid var(--pe-focus); outline-offset: 2px; }
.pe-app [hidden] { display: none !important; }
.pe-num { font-variant-numeric: tabular-nums; }
.pe-muted { color: var(--pe-text-muted); }
.pe-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.pe-skip { position: fixed; top: var(--pe-space-2); left: var(--pe-space-2); z-index: var(--pe-z-toast); transform: translateY(-150%); padding: var(--pe-space-3); border-radius: var(--pe-radius-control); background: var(--pe-surface); color: var(--pe-structure); }
.pe-skip:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { .pe-app *, .pe-app *::before, .pe-app *::after { transition: none !important; animation: none !important; } }

/* ── Shell (S-01..S-09): CRM AppShell is the reference ───────────────── */
.pe-shell { min-height: 100dvh; display: grid; grid-template-columns: var(--pe-size-rail) minmax(0, 1fr); overflow-x: clip; }
.pe-shell-body { min-width: 0; display: flex; flex-direction: column; }
.pe-main { flex: 1; min-width: 0; padding: var(--pe-space-4) var(--pe-space-8) var(--pe-space-12); overflow-x: clip; width: 100%; max-width: var(--pe-size-content-max); }
.pe-rail { position: sticky; top: 0; align-self: start; height: 100dvh; overflow-y: auto; overscroll-behavior: contain; padding: var(--pe-space-6) var(--pe-space-4); background: var(--pe-structure); color: var(--pe-on-structure); }
.pe-rail :focus-visible, .pe-rail-icons :focus-visible { outline-color: var(--pe-focus-on-structure); }
/* S-02: the full logo, on a white chip, at the top of the rail, linking home. Never a monogram tile, never a different mark. */
.pe-brand { display: block; margin-bottom: var(--pe-space-5); padding: var(--pe-space-2); border-radius: var(--pe-radius-control); background: var(--pe-gray-0); }
.pe-brand img { display: block; width: 100%; max-width: var(--pe-size-logo-rail-width); height: auto; margin-inline: auto; }
.pe-nav { display: grid; gap: 2px; }
.pe-nav-group > summary, .pe-nav-top { display: flex; align-items: center; gap: 10px; min-height: var(--pe-size-control-touch); padding: 0 var(--pe-space-2); border-radius: var(--pe-radius-control); list-style: none; cursor: pointer; color: var(--pe-on-structure) !important; font-size: 15px; font-weight: var(--pe-font-weight-bold); text-decoration: none !important; }
.pe-nav-group > summary::-webkit-details-marker { display: none; }
.pe-nav-group > summary::after { content: "›"; margin-left: auto; color: var(--pe-on-structure-muted); transition: transform var(--pe-motion-fast) var(--pe-motion-ease); }
.pe-nav-group[open] > summary::after { transform: rotate(90deg); }
.pe-nav-icon { display: grid; place-items: center; color: var(--pe-wayfinding); }
.pe-nav-list { display: grid; gap: 2px; margin: 0 0 var(--pe-space-2); padding: 0; list-style: none; }
.pe-nav-link { display: flex; align-items: center; justify-content: space-between; gap: var(--pe-space-2); min-height: 44px; padding: 6px var(--pe-space-3) 6px 36px; border-radius: var(--pe-radius-control); color: var(--pe-on-structure) !important; text-decoration: none !important; font-weight: var(--pe-font-weight-semibold); line-height: 1.3; }
.pe-nav-group > summary:hover, .pe-nav-top:hover, .pe-nav-link:hover { background: color-mix(in srgb, var(--pe-on-structure) 8%, transparent); }
/* S-03: the active item is the deep navy band with a 3px gold marker. Gold appears on navy only (C-03). */
.pe-nav-link[aria-current], .pe-nav-top[aria-current], .pe-rail-item[aria-current] { background: var(--pe-structure-deep); box-shadow: inset 3px 0 var(--pe-wayfinding); }
.pe-nav-link[data-planned] { opacity: .78; font-weight: var(--pe-font-weight-medium); }
.pe-count { min-width: 22px; height: 20px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: var(--pe-radius-pill); background: var(--pe-action); color: var(--pe-on-action); font: var(--pe-font-weight-bold) var(--pe-font-size-xs)/1 var(--pe-font-family-sans); font-variant-numeric: tabular-nums; }
.pe-rail-icons { display: none; }
.pe-rail-item { display: grid; place-items: center; width: var(--pe-size-control-touch); height: var(--pe-size-control-touch); border: 0; border-radius: var(--pe-radius-control); background: none; color: var(--pe-on-structure); cursor: pointer; }
/* S-04: one header on every viewport — eyebrow, h1, then actions in this order: Search, Help, Report a bug, Me. */
.pe-header { display: flex; align-items: center; gap: var(--pe-space-4); padding: var(--pe-space-5) var(--pe-space-8) var(--pe-space-2); }
.pe-header-logo { display: none; flex: none; }
.pe-header-logo img { display: block; height: var(--pe-size-logo-header-height); width: auto; }
.pe-header-title { flex: 1; min-width: 0; }
.pe-header-actions { display: flex; align-items: center; gap: var(--pe-space-2); flex: none; }
.pe-tabbar { display: none; }
@media (max-width: 1100px) {
  .pe-shell { grid-template-columns: var(--pe-size-rail-collapsed) minmax(0, 1fr); }
  .pe-rail { display: none; }
  .pe-rail-icons { display: flex; flex-direction: column; align-items: center; gap: 6px; position: sticky; top: 0; align-self: start; height: 100dvh; padding: var(--pe-space-4) var(--pe-space-3); background: var(--pe-structure); }
  .pe-header-logo { display: block; }
  .pe-header, .pe-main { padding-inline: var(--pe-space-6); }
  .pe-header-actions .pe-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 760px) {
  .pe-shell { display: block; }
  .pe-rail-icons { display: none; }
  .pe-header { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "logo actions" "title title"; gap: var(--pe-space-2); padding: calc(10px + env(safe-area-inset-top, 0px)) var(--pe-space-4) var(--pe-space-1); }
  .pe-header-logo { grid-area: logo; display: flex; align-items: center; min-height: var(--pe-size-control-touch); }
  .pe-header-actions { grid-area: actions; justify-self: end; gap: var(--pe-space-1); }
  .pe-header-title { grid-area: title; }
  .pe-header-title h1 { font-size: var(--pe-font-size-h2); }
  .pe-main { padding: var(--pe-space-2) var(--pe-space-4) calc(var(--pe-size-tabbar) + 32px + env(safe-area-inset-bottom, 0px)); }
  /* S-06: phones get a docked tab bar of at most five destinations. */
  .pe-tabbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; position: fixed; inset: auto 0 0; z-index: var(--pe-z-header); min-height: var(--pe-size-tabbar); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); background: var(--pe-surface); border-top: var(--pe-border-width) solid var(--pe-border); }
  .pe-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; color: var(--pe-text-muted) !important; text-decoration: none !important; font-size: 11px; font-weight: var(--pe-font-weight-semibold); }
  .pe-tab[aria-current] { color: var(--pe-structure) !important; }
}

/* ── Sign-in (S-10): one layout for every app's login screen ─────────── */
.pe-signin { margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: var(--pe-space-6) var(--pe-space-4); background: var(--pe-structure); color: var(--pe-text); font: var(--pe-font-weight-regular) var(--pe-font-size-body)/var(--pe-font-leading-body) var(--pe-font-family-sans); }
.pe-signin * { box-sizing: border-box; }
.pe-signin-card { width: min(100%, 420px); display: grid; gap: var(--pe-space-4); padding: var(--pe-space-8) var(--pe-space-6); background: var(--pe-surface); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); }
.pe-signin-logo { display: block; width: 100%; max-width: var(--pe-size-logo-rail-width); height: auto; margin-bottom: var(--pe-space-2); }
.pe-signin-app { margin: 0; font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-bold); letter-spacing: var(--pe-font-tracking-label); text-transform: uppercase; color: var(--pe-text-muted); }
.pe-signin h1 { margin: 0; font-size: var(--pe-font-size-h1); line-height: var(--pe-font-leading-tight); font-weight: var(--pe-font-weight-bold); color: var(--pe-text); }
.pe-signin p { margin: 0; color: var(--pe-text-secondary); }
.pe-signin .pe-signin-go { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: var(--pe-size-control-primary-touch); padding: 0 var(--pe-space-5); margin-top: var(--pe-space-2); border-radius: var(--pe-radius-control); background: var(--pe-action); color: var(--pe-on-action); font-weight: var(--pe-font-weight-bold); font-size: var(--pe-font-size-lg); text-decoration: none; }
.pe-signin .pe-signin-go:hover { background: var(--pe-action-hover); color: var(--pe-on-action); }
.pe-signin .pe-signin-go:active { background: var(--pe-action-pressed); }
.pe-signin .pe-signin-go:focus-visible { outline: var(--pe-border-width-strong) solid var(--pe-focus); outline-offset: 2px; }
.pe-signin-error { padding: var(--pe-space-3) var(--pe-space-4); border: var(--pe-border-width) solid var(--pe-danger); border-radius: var(--pe-radius-control); background: var(--pe-danger-soft); color: var(--pe-danger-text) !important; }
.pe-signin-note { font-size: var(--pe-font-size-xs); color: var(--pe-text-muted) !important; }
@media (prefers-reduced-motion: reduce) { .pe-signin * { transition: none !important; } }

/* ── Buttons (B-01..B-07) ──────────────────────────────────────────── */
.pe-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--pe-space-2); min-height: var(--pe-size-control); padding: 0 var(--pe-space-4); border: var(--pe-border-width) solid var(--pe-border-control); border-radius: var(--pe-radius-control); background: var(--pe-surface); color: var(--pe-text); font: var(--pe-font-weight-semibold) var(--pe-font-size-body)/1.2 var(--pe-font-family-sans); text-decoration: none !important; white-space: nowrap; cursor: pointer; transition: background var(--pe-motion-fast) var(--pe-motion-ease); }
.pe-btn:hover { background: var(--pe-surface-hover); }
/* B-01: one flag-red primary per view. A second high-emphasis action is .pe-btn--structure (navy). */
.pe-btn--primary { border-color: var(--pe-action); background: var(--pe-action); color: var(--pe-on-action) !important; }
.pe-btn--primary:hover { background: var(--pe-action-hover); border-color: var(--pe-action-hover); }
.pe-btn--primary:active { background: var(--pe-action-pressed); }
.pe-btn--structure { border-color: var(--pe-structure); background: var(--pe-structure); color: var(--pe-on-structure) !important; }
.pe-btn--structure:hover { background: var(--pe-structure-deep); }
.pe-btn--quiet { border-color: transparent; background: transparent; color: var(--pe-structure) !important; }
.pe-btn--quiet:hover { background: var(--pe-structure-tint); }
.pe-btn--danger { border-color: var(--pe-danger); color: var(--pe-danger-text) !important; background: var(--pe-danger-soft); }
.pe-btn--icon { width: var(--pe-size-control); padding: 0; }
/* B-05: an action the server would refuse stays in place, greyed, focusable, with its reason under it. Never hidden. */
.pe-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.pe-reason { display: block; margin-top: var(--pe-space-1); font-size: var(--pe-font-size-xs); color: var(--pe-text-muted); }
@media (max-width: 760px) { .pe-btn { min-height: var(--pe-size-control-touch); } .pe-btn--primary { min-height: var(--pe-size-control-primary-touch); } .pe-btn--icon { width: var(--pe-size-control-touch); } }

/* ── Pills, tags, status (P-01..P-04) ──────────────────────────────── */
.pe-tag { display: inline-flex; align-items: center; gap: var(--pe-space-1); min-height: 22px; padding: 0 var(--pe-space-2); border-radius: var(--pe-radius-pill); background: var(--pe-structure-tint); color: var(--pe-text-secondary); font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-semibold); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pe-status { display: inline-flex; align-items: center; gap: 6px; min-height: 22px; padding: 0 var(--pe-space-2); border-radius: var(--pe-radius-pill); font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-bold); white-space: nowrap; }
.pe-status::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pe-status--good { background: var(--pe-good-soft); color: var(--pe-good); }
.pe-status--warning { background: var(--pe-warning-soft); color: var(--pe-warning); }
.pe-status--danger { background: var(--pe-danger-soft); color: var(--pe-danger-text); }
.pe-status--info { background: var(--pe-info-soft); color: var(--pe-info); }
.pe-status--neutral { background: var(--pe-surface-sunken); color: var(--pe-text-secondary); }
/* P-03: a KPI pill is a work queue with a count and one action; numbers that change nothing live in subtext. */
.pe-kpi { display: grid; gap: var(--pe-space-1); padding: var(--pe-space-3) var(--pe-space-4); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); }
.pe-kpi-value { font-size: var(--pe-font-size-h2); font-weight: var(--pe-font-weight-bold); font-variant-numeric: tabular-nums; }
.pe-kpi-sub { font-size: var(--pe-font-size-xs); color: var(--pe-text-muted); }

/* ── Panels (L-01..L-04): borders, not shadows ─────────────────────── */
.pe-panel { border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); }
.pe-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-2) var(--pe-space-4); padding: var(--pe-space-3) var(--pe-space-4); border-bottom: var(--pe-border-width) solid var(--pe-border); }
.pe-panel-body { padding: var(--pe-space-4); }
.pe-stack { display: grid; gap: var(--pe-space-4); }
.pe-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-2); }

/* ── Forms and the filter bar (F-01..F-10) ─────────────────────────── */
.pe-field { display: grid; gap: var(--pe-space-1); min-width: 0; }
.pe-label { font-size: var(--pe-font-size-sm); font-weight: var(--pe-font-weight-semibold); color: var(--pe-text-secondary); }
.pe-input, .pe-select { width: 100%; min-height: var(--pe-size-control); padding: 0 var(--pe-space-3); border: var(--pe-border-width) solid var(--pe-border-control); border-radius: var(--pe-radius-control); background: var(--pe-surface); color: var(--pe-text); font: var(--pe-font-size-body)/1.2 var(--pe-font-family-sans); }
@media (max-width: 760px) { .pe-input, .pe-select { min-height: var(--pe-size-control-touch); font-size: var(--pe-font-size-input); } }
.pe-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--pe-space-3); padding: var(--pe-space-4); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); }
.pe-filters > .pe-field { flex: 1 1 170px; }
.pe-filters > .pe-field--grow { flex: 2 1 280px; }
/* F-04: one scope control answers one question (To audit · Due now · All), never several checkboxes. */
.pe-seg { display: inline-flex; gap: var(--pe-space-1); padding: var(--pe-space-1); border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface-sunken); }
.pe-seg button { min-height: 32px; padding: 0 var(--pe-space-3); border: 0; border-radius: var(--pe-radius-control); background: transparent; color: var(--pe-text-secondary); font: var(--pe-font-weight-semibold) var(--pe-font-size-sm)/1 var(--pe-font-family-sans); cursor: pointer; }
.pe-seg button[aria-pressed="true"] { background: var(--pe-surface); color: var(--pe-structure); box-shadow: inset 0 0 0 var(--pe-border-width) var(--pe-border-strong); }
.pe-more-filters { flex: 1 1 100%; }
.pe-more-filters > summary { cursor: pointer; color: var(--pe-structure); font-weight: var(--pe-font-weight-semibold); }
.pe-filterline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-2) var(--pe-space-4); margin: var(--pe-space-3) 2px var(--pe-space-4); font-size: var(--pe-font-size-sm); color: var(--pe-text-secondary); }

/* ── Nest tree (N-01..N-14): Invoice Audit and CRM Jobs are the reference ─ */
.pe-nest { display: grid; gap: var(--pe-space-2); min-width: 0; }
.pe-node { border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); min-width: 0; }
.pe-node .pe-node { border-radius: var(--pe-radius-control); }
.pe-node > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-2) var(--pe-space-3); min-height: var(--pe-size-control-touch); padding: var(--pe-space-2) var(--pe-space-4); list-style: none; cursor: pointer; }
.pe-node > summary::-webkit-details-marker { display: none; }
.pe-node > summary::before { content: "›"; display: inline-grid; place-items: center; width: 16px; color: var(--pe-text-muted); transition: transform var(--pe-motion-fast) var(--pe-motion-ease); }
.pe-node[open] > summary::before { transform: rotate(90deg); }
.pe-node[open] > summary { border-bottom: var(--pe-border-width) solid var(--pe-border); }
.pe-node-name { font-weight: var(--pe-font-weight-bold); color: var(--pe-text); min-width: 0; overflow-wrap: anywhere; }
.pe-node[data-level="0"] > summary { background: var(--pe-structure); color: var(--pe-on-structure); border-radius: calc(var(--pe-radius-card) - 1px); }
.pe-node[data-level="0"][open] > summary { border-radius: calc(var(--pe-radius-card) - 1px) calc(var(--pe-radius-card) - 1px) 0 0; }
.pe-node[data-level="0"] > summary .pe-node-name, .pe-node[data-level="0"] > summary::before { color: var(--pe-on-structure); }
.pe-node[data-level="0"] > summary .pe-tag { background: color-mix(in srgb, var(--pe-on-structure) 14%, transparent); color: var(--pe-on-structure); }
.pe-node-children { display: grid; gap: var(--pe-space-2); padding: var(--pe-space-2) var(--pe-space-2) var(--pe-space-2) var(--pe-size-nest-indent); }
.pe-node-meta { display: flex; flex-wrap: wrap; gap: var(--pe-space-1) var(--pe-space-2); margin-left: auto; }
/* N-09: a progress bar at every level, rolled up from the deepest line. */
.pe-progress { flex: 0 0 120px; height: 6px; border-radius: var(--pe-radius-pill); background: var(--pe-surface-sunken); overflow: hidden; }
.pe-progress > span { display: block; height: 100%; background: var(--pe-good); }
.pe-node[data-level="0"] .pe-progress { background: color-mix(in srgb, var(--pe-on-structure) 20%, transparent); }
.pe-node[hidden] { display: none; }
/* N-07: interactive controls inside a summary stop propagation (ds.js) and never toggle the node. */
.pe-node-action { margin-left: var(--pe-space-2); }

/* ── Tables and long lists (T-01..T-11) ────────────────────────────── */
/* T-04: a wide table scrolls its own wrapper on both axes; never pair overflow-x:auto with overflow-y:visible. */
.pe-table-wrap { overflow: auto; max-width: 100%; border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); }
.pe-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--pe-font-size-body); }
.pe-table th, .pe-table td { padding: 0 var(--pe-space-3); height: var(--pe-size-row-compact); border-bottom: var(--pe-border-width) solid var(--pe-border); text-align: left; vertical-align: middle; background: var(--pe-surface); white-space: nowrap; }
.pe-table thead th { position: sticky; top: 0; z-index: var(--pe-z-sticky); height: var(--pe-size-row); background: var(--pe-surface-sunken); color: var(--pe-text-secondary); font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-bold); letter-spacing: var(--pe-font-tracking-label); text-transform: uppercase; }
/* T-06: numbers right-aligned in tabular figures; labels left. */
.pe-table .pe-n, .pe-table td.pe-n, .pe-table th.pe-n { text-align: right; font-variant-numeric: tabular-nums; }
/* T-05: zebra and hover are painted on td, so frozen cells stay opaque. */
.pe-table tbody tr:nth-child(even) td { background: var(--pe-page); }
.pe-table tbody tr:hover td { background: var(--pe-surface-selected); }
.pe-table .pe-freeze { position: sticky; left: 0; z-index: 1; box-shadow: inset -1px 0 var(--pe-border); }
.pe-table thead .pe-freeze { z-index: calc(var(--pe-z-sticky) + 1); }
.pe-table--wrap th, .pe-table--wrap td { white-space: normal; height: auto; padding-block: var(--pe-space-2); }
.pe-table td.pe-clip { max-width: 28ch; overflow: hidden; text-overflow: ellipsis; }
/* T-10: on phones a table becomes one card per row: label and value pairs, headline columns first. */
@media (max-width: 760px) {
  .pe-table--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pe-table--stack, .pe-table--stack tbody, .pe-table--stack tr, .pe-table--stack td { display: block; width: 100%; }
  .pe-table--stack tr { padding: var(--pe-space-3) var(--pe-space-4); border-bottom: var(--pe-border-width) solid var(--pe-border); }
  .pe-table--stack td { display: flex; justify-content: space-between; gap: var(--pe-space-3); height: auto; min-height: 28px; padding: 2px 0; border: 0; white-space: normal; background: transparent !important; }
  .pe-table--stack td::before { content: attr(data-label); color: var(--pe-text-muted); font-size: var(--pe-font-size-xs); font-weight: var(--pe-font-weight-semibold); }
  .pe-table--stack td[data-headline] { font-weight: var(--pe-font-weight-bold); font-size: var(--pe-font-size-lg); }
  .pe-table--stack td[data-headline]::before { content: none; }
  .pe-table--stack .pe-freeze { position: static; box-shadow: none; }
}
/* T-01: an unbounded list opens at 10 rows; the pane is the same height collapsed and expanded (ds.js measures it). */
.pe-list-pane { overflow: auto; }
.pe-show-all { display: flex; justify-content: center; padding: var(--pe-space-2); border-top: var(--pe-border-width) solid var(--pe-border); }
.pe-show-all button { border: 0; background: none; color: var(--pe-link); font: var(--pe-font-weight-semibold) var(--pe-font-size-sm)/1 var(--pe-font-family-sans); text-decoration: underline; cursor: pointer; }

/* ── Feedback (E-01..E-06) ─────────────────────────────────────────── */
/* E-01: every filtered list has an empty state that names the way out. */
.pe-empty { display: grid; justify-items: start; gap: var(--pe-space-2); padding: var(--pe-space-6); border: var(--pe-border-width) dashed var(--pe-border-strong); border-radius: var(--pe-radius-card); background: var(--pe-surface); color: var(--pe-text-secondary); }
.pe-notice { padding: var(--pe-space-3) var(--pe-space-4); border: var(--pe-border-width) solid var(--pe-border); border-left: 4px solid var(--pe-info); border-radius: var(--pe-radius-control); background: var(--pe-surface); }
.pe-notice--warning { border-left-color: var(--pe-warning-fill); }
.pe-notice--danger { border-left-color: var(--pe-danger); }
.pe-notice--good { border-left-color: var(--pe-good); }
.pe-toast { position: fixed; right: var(--pe-space-4); bottom: calc(var(--pe-space-4) + env(safe-area-inset-bottom, 0px)); z-index: var(--pe-z-toast); max-width: min(420px, calc(100vw - 32px)); padding: var(--pe-space-3) var(--pe-space-4); border-radius: var(--pe-radius-control); background: var(--pe-gray-900); color: var(--pe-gray-0); box-shadow: var(--pe-elevation-overlay); }
.pe-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: var(--pe-border-width) solid var(--pe-border); border-radius: var(--pe-radius-card); background: var(--pe-surface); color: var(--pe-text); box-shadow: var(--pe-elevation-overlay); }
.pe-dialog::backdrop { background: var(--pe-overlay); }
.pe-dialog-body { padding: var(--pe-space-5); display: grid; gap: var(--pe-space-3); }
.pe-dialog-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--pe-space-2); padding: var(--pe-space-3) var(--pe-space-5); border-top: var(--pe-border-width) solid var(--pe-border); }