/* ============================================================
   Northwind app shell — reskins the shared web UI to the tokens
   in theme.css. EVERY rule is scoped under body.app-ui, which the
   63 print/PDF documents never carry, so this file cannot reach
   them. It overrides only cosmetic properties (color, font, border,
   radius, shadow) of existing classes — never layout, display, or
   the class/id/data hooks the JS reads. See docs/THEME_EXECUTION_PLAN.md.
   ============================================================ */

/* ---- Base wiring (scoped — the global styles.css html,body stays frozen) ---- */
body.app-ui {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  background: var(--bg-app);
  color: var(--text-body);
}
body.app-ui h1 { font-size: var(--fs-h1); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); color: var(--text-strong); }
body.app-ui .sub { color: var(--text-muted); }

/* ---- Top app bar (52px) ---- */
.app-ui .app-bar { height: var(--h-header); flex: none; display: flex; align-items: center; gap: 14px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border-1); }
.app-bar__left { display: flex; align-items: center; gap: 10px; flex: none; }
.app-bar__logo { width: 26px; height: 26px; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-fg); font-weight: var(--fw-bold); font-size: 13px; display: flex; align-items: center; justify-content: center; letter-spacing: var(--ls-tight); }
.app-bar__logo img { width: 17px; height: 17px; object-fit: contain; display: block; }
.app-bar__brand { font-weight: var(--fw-semi); font-size: 14px; letter-spacing: var(--ls-tight); color: var(--text-body); }
.app-bar__divider { width: 1px; height: 18px; background: var(--border-1); margin: 0 2px; }
.app-bar__switcher { display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: var(--r-btn); border: 1px solid var(--border-1); background: var(--bg-app); color: var(--text-2); font-size: var(--fs-body); font-weight: var(--fw-med); cursor: pointer; }
/* switcher must out-specify the generic .app-ui button accent fill (0,1,1) */
.app-ui .app-bar__switcher       { background: var(--bg-app); color: var(--text-2); }
.app-ui .app-bar__switcher:hover { background: var(--appbar-switcher-hover); }
.app-bar__spacer { flex: 1; }
.app-bar__search { display: flex; align-items: center; gap: 9px; width: 100%; max-width: 380px; height: var(--h-search); padding: 0 11px; border-radius: var(--r-search); border: 1px solid var(--border-1); background: var(--bg-app); color: var(--text-light); font-size: var(--fs-body); }
.app-bar__search .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; font-weight: var(--fw-semi); color: var(--text-light); border: 1px solid var(--border-1); border-radius: var(--r-badge); padding: 1px 5px; background: var(--surface); }
/* magnifier glyph (pure pseudo-elements; content-box so the circle renders 11px outer) */
.app-ui .app-bar__search { position: relative; padding-left: 32px; }
.app-ui .app-bar__search::before {
  content: ""; position: absolute; left: 12px; top: calc(50% - 5.5px);
  width: 8px; height: 8px; border: 1.5px solid var(--appbar-icon-stroke); border-radius: 50%;
}
.app-ui .app-bar__search::after {
  content: ""; position: absolute; left: 17px; top: calc(50% + 2px);
  width: 5px; height: 1.5px; background: var(--appbar-icon-stroke);
  transform: rotate(45deg); transform-origin: right center;
}
.app-bar__right { display: flex; align-items: center; gap: 8px; flex: none; }
.app-bar__icon { width: 30px; height: 30px; border-radius: var(--r-search); border: 1px solid var(--border-1); background: var(--surface); color: var(--text-3); font-size: 14px; font-weight: var(--fw-semi); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.app-bar__avatar { width: 30px; height: 30px; border-radius: 50%; background: #e7ebf0; color: var(--text-2); font-size: 11.5px; font-weight: var(--fw-semi); display: flex; align-items: center; justify-content: center; }
.app-ui .app-bar__icon:hover { background: var(--border-5); }
.app-ui .app-bar__avatar { position: relative; }
.app-ui .app-bar__avatar::after {
  content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
}

/* ---- Layout: fill the viewport under the app bar ---- */
.app-ui .layout { min-height: calc(100vh - var(--h-header)); }
/* wider canvas for app-ui panes (comp-like); the frozen global .container stays 980px */
.app-ui .pane .container { max-width: 1400px; }
/* 240px sidebar track (legacy styles.css .layout is 220px); :not() guards single-column share pages.
   The widen rule must precede the media rule — both 0,3,0, media wins by source order. */
.app-ui .layout:not(.layout--single) { grid-template-columns: var(--w-sidebar) 1fr; }
@media (max-width: 800px) { .app-ui .layout:not(.layout--single) { grid-template-columns: 1fr; } }
.app-ui .content { background: var(--bg-app); }

/* ---- Breadcrumb band (Wave-0 IA fix; sits below the app bar) ---- */
.app-ui .breadcrumb { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 22px; background: var(--surface); border-bottom: 1px solid var(--border-1); font-size: var(--fs-body); color: var(--text-muted); white-space: nowrap; overflow-x: auto; }
.app-ui .breadcrumb a { color: var(--text-3); text-decoration: none; }
.app-ui .breadcrumb a:hover { color: var(--accent); }
.app-ui .breadcrumb__sep { color: var(--text-hint); }
.app-ui .breadcrumb__group { color: var(--text-3); }
.app-ui .breadcrumb__cur { color: var(--text-body); font-weight: var(--fw-med); }
/* the breadcrumb eats 34px, so the layout floor drops by that much too */
.app-ui .layout { min-height: calc(100vh - var(--h-header) - 34px); }

/* ---- Sidebar: dark -> light grouped ---- */
.app-ui .sidebar { background: var(--side-bg); color: var(--side-fg); border-right: 1px solid var(--side-border); }
.app-ui .sidebar .logo { color: var(--text-strong); }
.app-ui .tab-btn { border-color: transparent; color: var(--side-fg); border-radius: var(--r-btn); font-weight: var(--fw-med); }
.app-ui .tab-btn:hover { background: var(--side-hover); }
/* nav-item geometry — sidebar-anchored so it cannot leak onto .editor-sidebar tabs */
.app-ui .sidebar .tab-btn {
  height: var(--h-nav-item); padding: 0 10px; font-size: var(--fs-body);
  display: flex; align-items: center; justify-content: space-between;
}
.app-ui .tab-btn.active { background: var(--side-active); border-color: transparent; color: var(--side-active-fg); font-weight: var(--fw-semi); }
.app-ui .sb-acc { border-color: var(--side-border); }
.app-ui .sb-acc > summary { background: transparent; color: var(--side-muted); text-transform: uppercase; font-size: var(--fs-micro); letter-spacing: var(--ls-caps-nav); font-weight: var(--fw-semi); }
.app-ui .sb-acc > summary:hover { background: var(--accent-tint-07); }
.app-ui .sb-acc[open] > summary { background: transparent; color: var(--side-muted); border-bottom-color: var(--side-border); }
.app-ui .sb-acc-body { background: transparent; border-top-color: var(--side-border); }
.app-ui .seg-btn { background: var(--surface); color: var(--text-2); border-color: var(--border-1); border-radius: var(--r-btn); }
.app-ui .seg-btn:hover { background: var(--border-5); }
.app-ui .seg-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ---- Buttons ---- */
/* :not(.btn): the onboarding/upload .btn kits manage their own variant
   colors (secondary/ghost/danger) — the Phase-5 variant-safe blanket
   converges their base instead. */
.app-ui button:where(:not(.btn)), .app-ui .button { background: var(--accent); border-radius: var(--r-btn); font-family: var(--font-sans); }
.app-ui button:where(:not(.btn)):hover, .app-ui .button:hover { background: var(--accent-hover); }
.app-ui .button--secondary { background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1); }
.app-ui .button--secondary:hover { background: var(--border-5); }
.app-ui .action-btn-primary { background: var(--accent); }
.app-ui .action-btn-primary:hover { background: var(--accent-hover); }
.app-ui .action-btn-secondary { background: var(--surface); color: var(--text-2); border-color: var(--border-1); }

/* ---- Cards / panels / subpanels ---- */
.app-ui .card, .app-ui .subpanel { border-color: var(--border-1); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.app-ui .panel { border-left-color: var(--accent); border-color: var(--border-1); }
.app-ui .feature-card { border-color: var(--border-1); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }
.app-ui .feature-icon { background: var(--accent); }
.app-ui .feature-list li::before { color: var(--st-active-fg); }
.app-ui .stat-card { border-color: var(--border-1); border-radius: var(--r-card); box-shadow: var(--shadow-sm); }

/* ---- Tables ---- */
.app-ui .table th, .app-ui .table td { border-color: var(--border-2); }
.app-ui .table thead th { background: var(--surface-faint); color: var(--text-muted); text-transform: uppercase; font-size: var(--fs-th); letter-spacing: var(--ls-caps-table); }
.app-ui .table tr:hover td { background: var(--row-hover); }

/* ---- Forms ---- */
.app-ui .form input:focus, .app-ui .form select:focus, .app-ui .form textarea:focus,
.app-ui .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-22); }

/* ---- Badges / pills / tabs ---- */
.app-ui .badge { background: var(--st-renewal-bg); color: var(--st-renewal-fg); border-color: var(--st-renewal-bd); border-radius: var(--r-pill); }
.app-ui .subtab-btn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }

/* ---- Misc chrome ---- */
.app-ui .toolbar .title { color: var(--text-strong); }
.app-ui .dropzone.dragover { border-color: var(--accent); }

/* ---- Chrome polish (paint-only; scrollbar stays scoped under body.app-ui — never the root) ---- */
body.app-ui { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body.app-ui ::selection { background: rgba(27, 73, 101, 0.16); }
body.app-ui *::-webkit-scrollbar { width: 10px; height: 10px; }
body.app-ui *::-webkit-scrollbar-thumb { background: #d4d8dd; border-radius: 999px; }
body.app-ui *::-webkit-scrollbar-track { background: transparent; }
.app-ui .content { padding: 18px 22px 28px; }

/* ============================================================
   Phase 2 — existing data screens reskinned to the investment look
   WITHOUT markup/JS changes. Wrapped in @media screen so the
   admin-with-print screens (rental_management, editors) keep their
   printed output byte-stable. Status colors are PRESERVED (only the
   pill shape is applied) — no semantic remap. Figures set in mono.
   ============================================================ */
@media screen {
  /* Status badges -> pill shape (radius/padding only; colors untouched) */
  .app-ui .status-badge, .app-ui .status-pill {
    border-radius: var(--r-pill); font-weight: var(--fw-semi); letter-spacing: 0;
  }
  /* Financial figures -> IBM Plex Mono, tabular */
  .app-ui .amount, .app-ui .amount-positive, .app-ui .amount-negative,
  .app-ui .summary-value, .app-ui .totals, .app-ui .totals-row td,
  .app-ui .total-row td, .app-ui .period-table .amount {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--ls-tight);
  }
  /* Specialised table headers -> uppercase micro-label on faint surface */
  .app-ui .period-table thead th, .app-ui .invoice-table thead th, .app-ui .fee-table thead th {
    background: var(--surface-faint); color: var(--text-muted);
    text-transform: uppercase; font-size: var(--fs-th); letter-spacing: var(--ls-caps-table);
  }

  /* Status chips -> Northwind status triples. CHIP-ANCHORED (.status-badge/.status-pill
     required on the same element) so the recolor structurally cannot fill .card/.task-card
     or reach <select> dropdowns. Semantics preserved: green stays go, amber stays warn,
     red stays stop, blue stays in-flight, grey stays dormant. Out-of-vocabulary states
     keep their per-template colors. (0,3,0 beats every per-template base.) */
  .app-ui .status-badge.active,      .app-ui .status-badge.status-active,
  .app-ui .status-pill.active,       .app-ui .status-pill.status-active,
  .app-ui .status-badge.paid,        .app-ui .status-badge.status-paid,
  .app-ui .status-pill.paid,         .app-ui .status-pill.status-paid,
  .app-ui .status-badge.completed,   .app-ui .status-badge.status-completed,
  .app-ui .status-pill.completed,    .app-ui .status-pill.status-completed {
    color: var(--st-active-fg); background: var(--st-active-bg); border: 1px solid var(--st-active-bd);
  }
  .app-ui .status-badge.pending,     .app-ui .status-badge.status-pending,
  .app-ui .status-pill.pending,      .app-ui .status-pill.status-pending,
  .app-ui .status-badge.partial,     .app-ui .status-badge.status-partial,
  .app-ui .status-pill.partial,      .app-ui .status-pill.status-partial {
    color: var(--st-pending-fg); background: var(--st-pending-bg); border: 1px solid var(--st-pending-bd);
  }
  .app-ui .status-badge.overdue,     .app-ui .status-badge.status-overdue,
  .app-ui .status-pill.overdue,      .app-ui .status-pill.status-overdue,
  .app-ui .status-badge.unpaid,      .app-ui .status-badge.status-unpaid,
  .app-ui .status-pill.unpaid,       .app-ui .status-pill.status-unpaid {
    color: var(--st-expiring-fg); background: var(--st-expiring-bg); border: 1px solid var(--st-expiring-bd);
  }
  .app-ui .status-badge.in_progress, .app-ui .status-badge.status-in_progress,
  .app-ui .status-pill.in_progress,  .app-ui .status-pill.status-in_progress,
  .app-ui .status-badge.complete,    .app-ui .status-badge.status-complete,
  .app-ui .status-pill.complete,     .app-ui .status-pill.status-complete {
    color: var(--st-renewal-fg); background: var(--st-renewal-bg); border: 1px solid var(--st-renewal-bd);
  }
  .app-ui .status-badge.inactive,    .app-ui .status-badge.status-inactive,
  .app-ui .status-pill.inactive,     .app-ui .status-pill.status-inactive {
    color: var(--st-draft-fg); background: var(--st-draft-bg); border: 1px solid var(--st-draft-bd);
  }
  .app-ui .status-badge.archived,    .app-ui .status-badge.status-archived,
  .app-ui .status-pill.archived,     .app-ui .status-pill.status-archived,
  .app-ui .status-badge.cancelled,   .app-ui .status-badge.status-cancelled,
  .app-ui .status-pill.cancelled,    .app-ui .status-pill.status-cancelled {
    color: var(--st-executed-fg); background: var(--st-executed-bg); border: 1px solid var(--st-executed-bd);
  }
}

/* ---- Phase 3 — filter-tab look on existing subtabs (screen UI; overrides P0 solid) ---- */
.app-ui .subtab-btn { background: transparent; border-color: transparent; color: var(--text-3); border-radius: var(--r-btn); }
.app-ui .subtab-btn:hover { background: var(--accent-tint-07); }
.app-ui .subtab-btn.active { background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); }

/* ============================================================
   Phase 5 — full convergence. Scoped overrides for the shared
   management kit (property_management.css), pm pill-tabs, the
   dashboard hero, and every per-template <style>-block rule that
   still carried the old brand. Template <style> blocks and print
   CSS stay byte-identical; all rules are .app-ui-scoped, so the
   63 print/PDF docs cannot see them.
   ============================================================ */

/* Everything below is wrapped in @media screen: admin_rental_management
   self-prints while carrying app-ui, so even var re-points must never
   reach printed output (frozen by the parity contract). */
@media screen {

/* management kit: re-point its primary-blue custom props at the accent.
   Print/QR pages never carry app-ui, so they keep the original blues. */
body.app-ui { --b: var(--accent); --bh: var(--accent-hover); }

/* pill-tab strip -> comp filter-tab row (also undoes the generic
   .app-ui button accent fill that painted inactive pm-tabs navy) */
.app-ui .pm-tabs { background: transparent; padding: 0; gap: 6px; }
.app-ui .pm-tab { background: transparent; color: var(--text-3); border: 1px solid transparent; border-radius: var(--r-btn); font-weight: var(--fw-med); height: var(--h-tab); padding: 0 11px; font-size: var(--fs-body); }
.app-ui .pm-tab:hover { background: var(--accent-tint-07); color: var(--text-2); }
.app-ui .pm-tab.active { background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); box-shadow: none; }
.app-ui .pm-tab .cnt { background: var(--border-5); color: var(--text-light); }
.app-ui .pm-tab.active .cnt { background: var(--accent-tint-11); color: var(--accent); }

/* toolbar buttons: green/amber CTAs -> the comp's accent/neutral pair */
.app-ui .b.su { background: var(--accent); color: var(--accent-fg); }
.app-ui .b.su:hover { background: var(--accent-hover); }
.app-ui .b.am { background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1); }
.app-ui .b.am:hover { background: var(--border-5); }
.app-ui .b.ol:hover { background: var(--accent-tint-07); }

/* emoji-free chrome: the feature-card icon tiles held emoji glyphs;
   the comp's cards have no icon tiles at all */
.app-ui .feature-icon { display: none; }
/* login key icon renders via content:attr(data-icon) — suppress the glyph
   (the data-icon attribute itself is fenced and stays untouched) */
.app-ui .input-icon::before { content: none; }

/* dashboard hero -> quiet page header (the comp has no hero band) */
.app-ui .dashboard-hero { background: var(--surface); color: var(--text-body); border-bottom: 1px solid var(--border-1); text-align: left; padding: 22px 0; margin-bottom: 24px; }
.app-ui .hero-title { font-size: var(--fs-h1); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); color: var(--text-strong); margin-bottom: 6px; }
.app-ui .hero-subtitle { font-size: var(--fs-base); color: var(--text-muted); opacity: 1; margin: 0; max-width: 640px; }

/* per-template <style>-block rules that still carried the old brand.
   Variant classes (e.g. .btn.secondary) keep winning by source order. */
/* Variant-safe blanket: secondary/ghost/danger/disabled keep their own
   colors regardless of stylesheet order; every plain .btn goes accent. */
.app-ui .btn:not(.secondary):not(.ghost):not(.danger):not(:disabled) { background: var(--accent); color: var(--accent-fg); }
.app-ui .btn:not(.secondary):not(.ghost):not(.danger):not(:disabled):hover { background: var(--accent-hover); }
.app-ui .btn-primary { background: var(--accent); }
.app-ui .btn-primary:hover { background: var(--accent-hover); }
.app-ui .lang-btn:hover { border-color: var(--accent); }
.app-ui .lang-btn.primary { background: var(--accent); border-color: var(--accent); }
.app-ui .lang-btn.primary:hover { background: var(--accent-hover); }
.app-ui .resident-name { color: var(--accent); }
.app-ui .active-lang { background: var(--accent) !important; border-color: var(--accent) !important; }
.app-ui .portal-avatar, .app-ui .profile-avatar { background: var(--accent); }
.app-ui .field-group input:focus, .app-ui .field-group textarea:focus { border-color: var(--accent); }
.app-ui .fg-table .fg-val input:focus, .app-ui .fg-table .fg-val textarea:focus,
.app-ui .fg-table .fg-val select:focus { border-color: var(--accent); }
.app-ui .drop-zone:hover, .app-ui .drop-zone.drag-over { border-color: var(--accent); }
.app-ui .doc-link { color: var(--accent); }
.app-ui .section-icon.identity, .app-ui .section-icon.timeline { color: var(--accent); }
.app-ui .app-pill:hover { border-color: var(--accent); }
.app-ui .app-pill .app-actions .btn-primary { background: var(--accent); border-color: var(--accent); }
.app-ui .app-pill .app-actions .btn-primary:hover { background: var(--accent-hover); }
.app-ui .grid-cell.selected, .app-ui .grid-row.weekend .grid-cell.selected { background: var(--accent); }
.app-ui .grid-cell.selected:hover { background: var(--accent-hover); }
.app-ui .platform-pill:hover { border-color: var(--accent); }
.app-ui .copy-btn { background: var(--accent); }
.app-ui .copy-btn:hover { background: var(--accent-hover); }
.app-ui .compact-form input:focus { border-color: var(--accent); }
.app-ui .grid-controls input:focus, .app-ui .grid-controls select:focus { border-color: var(--accent); }
.app-ui .grid-quick-btns button:hover { border-color: var(--accent); }
.app-ui .expand-btn { color: var(--accent); }
.app-ui .seg button.active { background: var(--accent); color: var(--accent-fg); }
.app-ui .status-complete { color: var(--st-renewal-fg); }
.app-ui .status-scheduled { background: var(--st-renewal-bg); color: var(--st-renewal-fg); }
/* property_management.css card-badge modifiers (shared sheet) -> Northwind status tints */
.app-ui .card-badge.green { background: var(--st-active-bg); color: var(--st-active-fg); }
.app-ui .card-badge.amber { background: var(--st-pending-bg); color: var(--st-pending-fg); }
.app-ui .card-badge.red { background: var(--st-expiring-bg); color: var(--st-expiring-fg); }
.app-ui .card-badge.gray { background: var(--st-draft-bg); color: var(--st-draft-fg); }
.app-ui .card.green::before { background: var(--st-active-fg); }
.app-ui .card.amber::before { background: var(--st-pending-fg); }
.app-ui .card.gray::before { background: var(--st-draft-fg); }

/* recurring page-kit controls (tenants / management / accounting / uploads) */
.app-ui .count-badge { background: var(--accent); }
.app-ui .search-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-22); }
.app-ui details.form-edit summary { color: var(--accent); }
.app-ui details.form-edit summary:hover, .app-ui details.form-edit[open] summary { color: var(--accent-hover); }
.app-ui .form input:focus, .app-ui .form select:focus, .app-ui .form textarea:focus { border-color: var(--accent); }
.app-ui .form button { background: var(--accent); }
.app-ui .form button:hover { background: var(--accent-hover); }
.app-ui .form-input:focus, .app-ui .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-22); }
.app-ui .edit-input:focus, .app-ui .edit-select:focus, .app-ui .edit-textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-tint-22); }
.app-ui .file-upload.drag-over { border-color: var(--accent); background: var(--accent-tint-07); }
.app-ui .unavailable-container { background: var(--accent); }

/* rental-management report chrome — screen only; its self-printed
   output keeps the original blues (parity contract) */
.app-ui .print-header { border-bottom-color: var(--accent); }
.app-ui .period-header { background: var(--accent); }
.app-ui .period-table tfoot { border-top-color: var(--accent); }
.app-ui .summary-value.neutral { color: var(--st-renewal-fg); }
.app-ui .print-footer-logo { color: var(--accent); }

} /* end @media screen (Phase 5) */

/* ---- Phase 4 — visible focus rings (a11y; keyboard-only via :focus-visible) ---- */
.app-ui a:focus-visible, .app-ui button:focus-visible, .app-ui .button:focus-visible,
.app-ui .tab-btn:focus-visible, .app-ui .subtab-btn:focus-visible, .app-ui .filter-tab:focus-visible,
.app-ui .seg-btn:focus-visible, .app-ui input:focus-visible, .app-ui select:focus-visible,
.app-ui textarea:focus-visible, .app-ui summary:focus-visible, .app-ui [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* ============================================================
   Phase 6 — cross-page compositional harmonization (screen only).
   Each screen shipped with its own header + card system (.pm-hdr vs
   .toolbar vs .page-header vs .cfg-hdr vs a bare <h1>+.sub; two .card
   defs; .panel with a heavy accent left-bar), so value-level
   recoloring still left them reading as different products. This
   layer normalizes the shared structural primitives to ONE Northwind
   rhythm — one page-header band, one card surface, one type scale —
   without touching any markup. Every rule is .app-ui-scoped (>= 0,2,x)
   so it out-specifies the per-page bases, and the whole block is
   @media screen so the one self-printing admin page (admin_rental_
   management) keeps byte-stable print output.
   ============================================================ */
@media screen {
  /* --- One page-header band: same title, descriptor, spacing, divider --- */
  .app-ui .pm-hdr, .app-ui .page-header, .app-ui .cfg-hdr {
    align-items: flex-start; gap: 12px;
    margin: 0 0 20px; padding: 0 0 14px;
    border-bottom: 1px solid var(--border-2);
  }
  .app-ui .pm-hdr h1, .app-ui .toolbar .title, .app-ui .page-header h1,
  .app-ui .cfg-hdr h1, .app-ui .section-title {
    font-size: var(--fs-h1); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight);
    color: var(--text-strong); margin: 0; line-height: 1.3;
  }
  .app-ui .pm-hdr .addr, .app-ui .toolbar .subtitle, .app-ui .page-header .sub,
  .app-ui .cfg-hdr .sub {
    font-size: var(--fs-base); font-weight: var(--fw-reg); color: var(--text-muted); margin: 4px 0 0;
  }
  /* bare <h1> + .sub pages (onboarding / offboarding): same title type
     and a matching divider so they open like the .pm-hdr pages */
  .app-ui .content .container > h1,
  .app-ui .onboard-container > .page-header h1 {
    font-size: var(--fs-h1); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight);
    color: var(--text-strong); margin: 0 0 4px; line-height: 1.3;
  }
  .app-ui .content .container > .sub {
    font-size: var(--fs-base); color: var(--text-muted); margin: 0 0 20px;
    padding: 0 0 14px; border-bottom: 1px solid var(--border-2);
  }

  /* --- One card / panel surface (flat bordered; drop the panel accent bar) --- */
  .app-ui .panel {
    background: var(--surface); border: 1px solid var(--border-1); border-left: 1px solid var(--border-1);
    border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 16px;
  }
  .app-ui .subpanel { border: 1px solid var(--border-1); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 14px; }
  .app-ui .card h3, .app-ui .panel h3, .app-ui .subpanel h3 {
    font-size: var(--fs-base); font-weight: var(--fw-semi); color: var(--text-strong); margin: 0 0 10px;
  }
  .app-ui .panel .meta, .app-ui .card .meta, .app-ui .subpanel .meta { color: var(--text-muted); }

  /* document-upload partials: the toggle/upload buttons carry inline bg on
     id= lines (fence-blocked) + a JS color toggle — !important is the only
     scoped way to theme them; the button reads navy in every state. */
  .app-ui #toggleUploadSection { background: var(--accent) !important; }
  .app-ui #uploadBtn { background: var(--st-active-fg) !important; }

  /* --- Phase 7: reduce lucide icon clutter to a clean professional density.
     Hide DECORATIVE content icons repeated on every data label / heading /
     section title / table cell (lucide replaces <i data-lucide> with
     <svg class="lucide">, so target both). KEEP structural icons: sidebar
     nav, app bar, primary-action buttons, tabs, and the KPI/stat tiles. --- */
  .app-ui .card-meta i[data-lucide], .app-ui .card-meta svg.lucide,
  .app-ui .card-body i[data-lucide], .app-ui .card-body svg.lucide,
  .app-ui .card-title i[data-lucide], .app-ui .card-title svg.lucide,
  .app-ui h1 i[data-lucide], .app-ui h1 svg.lucide,
  .app-ui .pm-hdr h1 i[data-lucide], .app-ui .pm-hdr h1 svg.lucide,
  .app-ui .section-title i[data-lucide], .app-ui .section-title svg.lucide,
  .app-ui .stog > summary i[data-lucide], .app-ui .stog > summary svg.lucide,
  .app-ui .form-name i[data-lucide], .app-ui .form-name svg.lucide,
  .app-ui td i[data-lucide], .app-ui td svg.lucide {
    display: none !important;
  }
  /* ...but NEVER hide icons that ARE the content of a button or link — those
     are functional (esp. icon-only action buttons in table cells), not
     decorative. Re-show them (higher type-count than the td hide above). */
  .app-ui td button i[data-lucide], .app-ui td button svg.lucide,
  .app-ui td a i[data-lucide], .app-ui td a svg.lucide,
  .app-ui .form-name a i[data-lucide], .app-ui .form-name a svg.lucide,
  .app-ui button i[data-lucide], .app-ui button svg.lucide,
  .app-ui .b i[data-lucide], .app-ui .b svg.lucide {
    display: inline-block !important;
  }
  /* icon-only action rows (applications/viewings tables) were a 6-colour
     rainbow of .b.pr/.bl/.gr/.am/.su/.dn — unify to subtle ghost icon
     buttons (accent on hover), keeping the destructive one (.dn) reddish.
     Scoped to .action-btns so other .b variants are untouched. */
  .app-ui .action-btns .b { background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1); }
  .app-ui .action-btns .b:hover { background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); }
  .app-ui .action-btns .b.dn { color: var(--st-expiring-fg); }
  .app-ui .action-btns .b.dn:hover { background: var(--st-expiring-bg); border-color: var(--st-expiring-bd); color: var(--st-expiring-fg); }

  /* ============================================================
     Phase 8 — component normalization. The screens were each built
     with their own button kit (.b vs .button vs .btn vs .action-btn,
     different sizes/radii) and table style (.data-table card vs .table
     grid vs unclassed vs .viewings-table), so controls still looked
     page-specific. These rules give every button and every DATA table
     one Northwind look, scoped to the content pane.
     ============================================================ */

  /* -- One table look: borderless card rows, uppercase micro headers.
     Applies to any table inside a content pane (data tables carry a
     thead); layout tables without a thead are unaffected by the header
     rule and keep their cells readable via the light row divider. -- */
  .app-ui .content table thead th, .app-ui .pane table thead th {
    background: var(--surface-faint); color: var(--text-muted);
    text-transform: uppercase; font-size: var(--fs-th); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps-table); text-align: left;
    border: 0; border-bottom: 1px solid var(--border-2); padding: 8px 12px; white-space: nowrap;
  }
  .app-ui .content table tbody td, .app-ui .pane table tbody td {
    border: 0; border-bottom: 1px solid var(--border-4);
    font-size: var(--fs-body); color: var(--text-cell); padding: 8px 12px;
  }
  .app-ui .content table tbody tr:hover td, .app-ui .pane table tbody tr:hover td { background: var(--row-hover); }

  /* -- One button geometry (color logic already set above). Exclude the
     purpose-built tab/pill classes with their own sizing. -- */
  .app-ui .b, .app-ui .button, .app-ui .btn:not(.btn-tb), .app-ui .action-btn {
    border-radius: var(--r-btn); font-weight: var(--fw-semi); font-family: var(--font-sans);
  }
  .app-ui .button, .app-ui .action-btn { padding: 7px 14px; font-size: var(--fs-body); }

  /* -- One input look -- */
  .app-ui .content input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]),
  .app-ui .content select, .app-ui .content textarea { border-radius: var(--r-btn); }

  /* -- .mstats mini-stat filter tiles -> Northwind KPI aesthetic. They stay
     clickable filters (hover/active kept), but drop the colored icon square,
     set mono figures + muted micro labels, and use accent tint for active,
     so they match the dashboard .kpi-strip look across pages. -- */
  .app-ui .ms { border: 1px solid var(--border-1); border-radius: var(--r-card); box-shadow: var(--shadow-sm); padding: 11px 16px; }
  .app-ui .ms .ic { display: none; }
  .app-ui .ms .v { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 18px; font-weight: var(--fw-semi); color: var(--text-strong); letter-spacing: var(--ls-tight); }
  .app-ui .ms .l { font-size: var(--fs-th); color: var(--text-light); letter-spacing: 0.05em; margin-top: 4px; }
  .app-ui .ms:hover { border-color: var(--accent-tint-22); box-shadow: var(--shadow-md); }
  .app-ui .ms.active { border-color: var(--accent); background: var(--accent-tint-07); }
}

/* -- Wave-1 (2026-07-13): button legibility + sidebar fixes (PLATFORM_AUDIT D17/D21/D26) -- */
@media screen {
  /* The :99 blanket paints backgrounds but sets no color — pair legible text
     at the same cascade position so blanket-painted buttons can never go
     navy-on-navy (later page rules that re-style color still win their ties). */
  .app-ui button:where(:not(.btn)), .app-ui .button { color: var(--accent-fg); }
  /* .button--secondary (:101) sits earlier in this file, so it loses that
     color tie and went white-on-white (surface bg + accent-fg text) — restore
     its neutral text here; its surface bg and border already survive. */
  .app-ui .button--secondary { color: var(--text-2); }
  /* Slot-grid quick buttons: restore the template's intended neutral look
     (its rule loses the source-order tie against app.css). */
  .app-ui .grid-quick-btns button { background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1); }
  /* Property-mgmt row Edit: the neutral-secondary fix set color+border in the
     template but never background — complete it. */
  .app-ui .inline-actions .edit-unit-btn { background: var(--surface); }
  .app-ui .inline-actions .edit-unit-btn:hover { background: var(--border-5); }
  /* Listings "Create Slots": old success-green -> accent. */
  .app-ui .btn-sm.primary { background: var(--accent); color: var(--accent-fg); }
  .app-ui .btn-sm.primary:hover { background: var(--accent-hover); }
  /* Sidebar rows that carry a secondary line (current session name) grow into
     two lines instead of colliding inside the fixed nav-item height. */
  .app-ui .sidebar .tab-btn:has(> span) { height: auto; min-height: var(--h-nav-item); flex-direction: column; align-items: flex-start; justify-content: center; padding-top: 6px; padding-bottom: 6px; gap: 2px; }
  .app-ui .sidebar .tab-btn > span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* Link-styled submit button for prose (create-actions moved from GET links
     to POST forms; audit D5). Escapes the :99 blanket by specificity. */
  .app-ui button.linklike { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
  .app-ui button.linklike:hover { background: none; color: var(--accent-hover); }
}

/* ============================================================
   Phase 9 — pattern unification (2026-07-13). A 40-agent audit
   found 14 conflicting presentation patterns across the 93 app-ui
   screens (bespoke tables vs kit tables, 12+ button kits, 4 status
   dialects, 7 header systems, 5 form systems, ad-hoc stat tiles,
   shadowed/tinted/floating card variants, per-page callouts and
   empty states). This block converges every css-reachable variant
   onto the kit, and authors the three primitives pages kept
   reinventing: .callout (tinted notice), the kit empty state, and
   one modal surface spec. All rules .app-ui-scoped and @media
   screen (admin_rental_management self-prints; print bytes frozen).
   ============================================================ */
@media screen {

  /* -- C1: tables that escape the Phase-8 restyle. Phase-8 anchors on
     .content/.pane ancestors; share/portal pages nest tables in
     .tab-content and the applications embed uses .apps-table on a bare
     body — give them the identical kit cells. -- */
  .app-ui .tab-content table thead th, .app-ui .apps-table thead th {
    background: var(--surface-faint); color: var(--text-muted);
    text-transform: uppercase; font-size: var(--fs-th); font-weight: var(--fw-semi);
    letter-spacing: var(--ls-caps-table); text-align: left;
    border: 0; border-bottom: 1px solid var(--border-2); padding: 8px 12px; white-space: nowrap;
  }
  .app-ui .tab-content table tbody td, .app-ui .apps-table tbody td {
    border: 0; border-bottom: 1px solid var(--border-4);
    font-size: var(--fs-body); color: var(--text-cell); padding: 8px 12px;
  }
  .app-ui .tab-content table tbody tr:hover td, .app-ui .apps-table tbody tr:hover td { background: var(--row-hover); }
  /* named card-tables keep kit cells via Phase-8; flatten their leftover
     element chrome (white card shadow) to the .data-table wrapper look */
  .app-ui .sessions-table, .app-ui .forms-table, .app-ui .unit-table, .app-ui .tenant-table {
    background: var(--surface); border: 1px solid var(--border-1); box-shadow: none;
  }

  /* -- C2: one button pair everywhere. Row actions inside table cells go
     quiet-ghost (extends the Phase-7 .action-btns treatment to every data
     row — fixes e.g. the letters list's navy Delete with red text). -- */
  .app-ui td .b, .app-ui td .button, .app-ui td button:where(:not(.btn)):not(.linklike) {
    background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1);
    padding: 4px 10px; font-size: var(--fs-body); font-weight: var(--fw-med);
  }
  .app-ui td .b:hover, .app-ui td .button:hover, .app-ui td button:where(:not(.btn)):not(.linklike):hover {
    background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent);
  }
  /* header action clusters: exactly one primary CTA; back-links and
     siblings render neutral instead of competing navy */
  .app-ui .pm-hdr .button:not(.primary), .app-ui .section-header .button:not(.primary),
  .app-ui .container > .toolbar .button:not(.primary) {
    background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1);
  }
  .app-ui .pm-hdr .button:not(.primary):hover, .app-ui .section-header .button:not(.primary):hover,
  .app-ui .container > .toolbar .button:not(.primary):hover { background: var(--border-5); }
  /* remaining named kits -> the same geometry/colors */
  .app-ui .btn-small { border-radius: var(--r-btn); font-weight: var(--fw-semi); font-family: var(--font-sans); }
  .app-ui .btn-small.btn-primary { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .app-ui .btn-small.btn-primary:hover { background: var(--accent-hover); }
  .app-ui .btn-small.btn-secondary { background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1); }
  .app-ui .btn-small.btn-secondary:hover { background: var(--border-5); }
  .app-ui .btn-success { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
  .app-ui .btn-success:hover { background: var(--accent-hover); }
  /* td button.button-remove ties the (0,2,2) row-action neutral rule above —
     listed here (later in file) so danger keeps its tone inside table rows */
  .app-ui .btn-danger, .app-ui .btn-small.btn-danger, .app-ui .button-remove, .app-ui td button.button-remove {
    background: var(--surface); color: var(--st-expiring-fg); border: 1px solid var(--st-expiring-bd);
  }
  .app-ui .btn-danger:hover, .app-ui .btn-small.btn-danger:hover, .app-ui .button-remove:hover, .app-ui td button.button-remove:hover { background: var(--st-expiring-bg); }
  .app-ui .button-add { background: var(--accent); color: var(--accent-fg); border-color: var(--accent); }
  .app-ui .button-add:hover { background: var(--accent-hover); }
  .app-ui .login-button { background: var(--accent); border-radius: var(--r-btn); box-shadow: none; }
  .app-ui .login-button:hover { background: var(--accent-hover); transform: none; }
  .app-ui .lang-btn { background: var(--surface); color: var(--text-2); border: 1px solid var(--border-1); border-radius: var(--r-btn); }
  /* motion off: buttons never lift (dashboard action/help tiles) */
  .app-ui .action-btn:hover, .app-ui .action-btn-primary:hover, .app-ui .action-btn-secondary:hover,
  .app-ui .actions button:hover, .app-ui .actions .button:hover { transform: none; }

  /* -- C3: status chips -> one pill dialect (kit geometry; colors stay
     tokenized where the pages already used --st-* triples) -- */
  .app-ui .status-chip, .app-ui .draft-status {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: var(--fw-semi); line-height: 17px;
    text-transform: capitalize; letter-spacing: 0;
  }
  /* priority/urgency: bare colored text -> the same pill with its triple */
  .app-ui [class^="prio-"], .app-ui [class^="urg-"] {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-pill);
    font-size: 11px; font-weight: var(--fw-semi); line-height: 17px; border: 1px solid transparent;
  }
  .app-ui .prio-urgent, .app-ui .urg-urgent { color: var(--st-expiring-fg); background: var(--st-expiring-bg); border-color: var(--st-expiring-bd); }
  .app-ui .prio-high,   .app-ui .urg-high   { color: var(--st-pending-fg);  background: var(--st-pending-bg);  border-color: var(--st-pending-bd); }
  .app-ui .prio-normal, .app-ui .urg-normal { color: var(--st-executed-fg); background: var(--st-executed-bg); border-color: var(--st-executed-bd); }
  .app-ui .prio-low,    .app-ui .urg-low    { color: var(--st-draft-fg);    background: var(--st-draft-bg);    border-color: var(--st-draft-bd); }
  /* state lives in the pill, never in the row/card surface */
  .app-ui .resident-card.status-active, .app-ui .resident-card.status-inactive { background: var(--surface); border-color: var(--border-1); }
  .app-ui .payment-card.paid, .app-ui .payment-card.overdue, .app-ui .payment-card.partial {
    background: var(--surface); border: 1px solid var(--border-1);
  }
  .app-ui .payment-card.paid    { box-shadow: inset 3px 0 0 var(--st-active-fg); }
  .app-ui .payment-card.overdue { box-shadow: inset 3px 0 0 var(--st-expiring-fg); }
  .app-ui .payment-card.partial { box-shadow: inset 3px 0 0 var(--st-pending-fg); }
  .app-ui .card-badge.archived { background: var(--st-executed-bg); color: var(--st-executed-fg); }

  /* -- C4: the one page-header band on the remaining header systems -- */
  .app-ui .container > .toolbar { border-bottom: 1px solid var(--border-2); padding-bottom: 14px; margin-bottom: 20px; }
  .app-ui .container > .toolbar .subtitle { font-size: var(--fs-base); color: var(--text-muted); }
  .app-ui .container > .section-title { margin: 0 0 20px; padding: 0 0 14px; border-bottom: 1px solid var(--border-2); }
  .app-ui .container > .section-title h1 { font-size: var(--fs-h1); font-weight: var(--fw-semi); letter-spacing: var(--ls-tight); color: var(--text-strong); }
  .app-ui .container > .section-title .muted { font-size: var(--fs-base); color: var(--text-muted); margin-top: 4px; }
  .app-ui .container > .section-header { border-bottom: 1px solid var(--border-2); padding-bottom: 14px; margin-bottom: 20px; }
  /* boxed white-card headers (onboarding family) -> flat band */
  .app-ui .page-header, .app-ui .onboard-header {
    background: transparent; border: 0; border-bottom: 1px solid var(--border-2);
    box-shadow: none; border-radius: 0; padding: 0 0 14px;
  }
  .app-ui .header-card { box-shadow: none; border: 1px solid var(--border-1); }

  /* -- C5: one form voice. Panels flat, labels one type spec; the legacy
     styles.css .form cohort converges via typography (markup untouched). -- */
  .app-ui .form-panel, .app-ui .add-panel, .app-ui .cfg-panel, .app-ui .app-section, .app-ui .content-card {
    background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card); box-shadow: none;
  }
  .app-ui .form label, .app-ui .form-group label, .app-ui .field-group label,
  .app-ui .cfg-grid label, .app-ui .sf-grid label, .app-ui .fg-table .fg-lbl {
    font-size: var(--fs-sm); font-weight: var(--fw-semi); color: var(--text-2);
  }
  .app-ui .form input, .app-ui .form select, .app-ui .form textarea { font-size: var(--fs-base); font-family: var(--font-sans); }

  /* -- C6: one in-page tab dialect (filter-tab pills) for the remaining
     switchers: .seg segmented controls + the cleaning embed's rectangles -- */
  .app-ui .seg button {
    background: transparent; border: 1px solid transparent; color: var(--text-3);
    border-radius: var(--r-btn); font-weight: var(--fw-med); height: var(--h-tab); padding: 0 11px; font-size: var(--fs-body);
  }
  .app-ui .seg button:hover { background: var(--accent-tint-07); color: var(--text-2); }
  .app-ui .seg button.active { background: var(--accent-tint-07); color: var(--accent); border-color: var(--accent-tint-22); font-weight: var(--fw-semi); }
  .app-ui .subtabs .subtab-btn { background: transparent; border: 1px solid transparent; color: var(--text-3); border-radius: var(--r-btn); }
  .app-ui .subtabs .subtab-btn:hover { background: var(--accent-tint-07); }
  .app-ui .subtabs .subtab-btn.active { background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); }
  /* offboarding suite cross-page switcher (markup adds .page-switcher +
     a pg-* body class; active state selected by href, no anchor edits) */
  .app-ui .page-switcher { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--border-2); padding-bottom: 12px; margin: 8px 0 16px; }
  .app-ui .page-switcher .button {
    background: transparent; border: 1px solid transparent; color: var(--text-3);
    border-radius: var(--r-btn); font-weight: var(--fw-med); padding: 6px 11px; font-size: var(--fs-body);
  }
  .app-ui .page-switcher .button:hover { background: var(--accent-tint-07); color: var(--text-2); }
  body.pg-checkout .page-switcher .button[href="/admin/checkout"],
  body.pg-rental-termination .page-switcher .button[href="/admin/rental-termination"],
  body.pg-precheckout-request .page-switcher .button[href="/admin/pre-checkout-request"],
  body.pg-precheckout-inspection .page-switcher .button[href="/admin/pre-checkout-inspection"] {
    background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); font-weight: var(--fw-semi);
  }

  /* -- C7: stat tiles -> the mstats/KPI aesthetic on the ad-hoc kits -- */
  .app-ui .stat-card { padding: 11px 16px; box-shadow: none; }
  .app-ui .stat-value, .app-ui .stat-num, .app-ui .doc-stat .number {
    font-family: var(--font-mono); font-variant-numeric: tabular-nums;
    font-size: 18px; font-weight: var(--fw-semi); color: var(--text-strong); letter-spacing: var(--ls-tight);
  }
  .app-ui .stat-label, .app-ui .doc-stat .label {
    font-size: var(--fs-th); color: var(--text-light); text-transform: uppercase; letter-spacing: 0.05em;
  }
  .app-ui .doc-stat { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card); box-shadow: none; }
  .app-ui .stats-bar, .app-ui .summary-bar { background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card); }
  /* semantic value tones for stat tiles (replaces the old conditional inline colors) */
  .app-ui .ms .v.v-ok   { color: var(--st-active-fg); }
  .app-ui .ms .v.v-warn { color: var(--st-expiring-fg); }

  /* -- C8: ONE flat surface — no shadows, no hover lift, no floating cards -- */
  .app-ui .panel, .app-ui .card, .app-ui .subpanel, .app-ui .feature-card, .app-ui .ms { box-shadow: none; }
  .app-ui .panel:hover, .app-ui .card:hover, .app-ui .feature-card:hover, .app-ui .help-contact:hover {
    transform: none; box-shadow: none;
  }
  body.app-ui .container { max-width: 980px; box-shadow: none; text-align: left; }
  .app-ui .layout--single { max-width: none; }
  .app-ui .cfg-wrap { max-width: none; }
  .app-ui .success-card { max-width: none; box-shadow: none; border: 1px solid var(--border-1); border-radius: var(--r-card); text-align: left; }

  /* -- C9: one modal surface spec (JS toggles untouched) -- */
  .app-ui .modal-bg, .app-ui .confirm-bg { background: rgba(20, 26, 33, 0.45); }
  .app-ui .modal-bg .modal, .app-ui .modal .modal-content, .app-ui .confirm-box, .app-ui .doc-modal-dialog {
    background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card); box-shadow: var(--shadow-md);
  }

  /* -- C10: the kit callout — the tinted-notice primitive every page was
     reinventing. Tone modifiers are standalone so they can also sit on
     .panel ("panel callout--info"). -- */
  .app-ui .callout { background: var(--accent-tint-07); border: 1px solid var(--accent-tint-22); border-radius: var(--r-card); padding: 12px 14px; font-size: var(--fs-base); color: var(--text-body); }
  .app-ui .callout--info     { background: var(--accent-tint-07);   border-color: var(--accent-tint-22); }
  .app-ui .callout--pending  { background: var(--st-pending-bg);    border-color: var(--st-pending-bd); }
  .app-ui .callout--active   { background: var(--st-active-bg);     border-color: var(--st-active-bd); }
  .app-ui .callout--expiring { background: var(--st-expiring-bg);   border-color: var(--st-expiring-bd); }
  .app-ui .callout--danger   { background: var(--st-expiring-bg);   border-color: var(--st-expiring-fg); }
  /* existing dialects -> the same voice (class names stay; JS-safe) */
  .app-ui .info-box { background: var(--accent-tint-07); border: 1px solid var(--accent-tint-22); border-radius: var(--r-card); color: var(--text-body); }
  .app-ui .info-box-title { color: var(--accent); }
  .app-ui .info-box-text { color: var(--text-2); }
  .app-ui .prefill-info, .app-ui .property-info { background: var(--accent-tint-07); border: 1px solid var(--accent-tint-22); border-radius: var(--r-card); }
  .app-ui .container > .info    { background: var(--accent-tint-07); border: 1px solid var(--accent-tint-22); border-radius: var(--r-card); }
  .app-ui .container > .success { background: var(--st-active-bg);  border: 1px solid var(--st-active-bd);  border-radius: var(--r-card); }
  .app-ui .container > .warning { background: var(--st-pending-bg); border: 1px solid var(--st-pending-bd); border-radius: var(--r-card); }

  /* -- C11: filter rows -> the kit pill (idle/active), search input metrics -- */
  .app-ui .filter-pill { background: transparent; border: 1px solid transparent; color: var(--text-3); border-radius: var(--r-btn); font-weight: var(--fw-med); }
  .app-ui .filter-pill:hover { background: var(--accent-tint-07); color: var(--text-2); }
  .app-ui .filter-pill.active { background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); font-weight: var(--fw-semi); }
  .app-ui .filter-row .fpill[data-tfilter] { background: transparent; border: 1px solid transparent; color: var(--text-3); border-radius: var(--r-btn); font-weight: var(--fw-med); }
  .app-ui .filter-row .fpill[data-tfilter]:hover { background: var(--accent-tint-07); opacity: 1; color: var(--text-2); }
  .app-ui .filter-row .fpill[data-tfilter].active { background: var(--accent-tint-07); border-color: var(--accent-tint-22); color: var(--accent); font-weight: var(--fw-semi); }
  .app-ui .search-box .search-input { height: var(--h-search); border: 1px solid var(--border-1); border-radius: var(--r-search); font-size: var(--fs-body); background: var(--surface); }

  /* -- C13: one left-aligned actions row + share-link helper row -- */
  .app-ui .actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
  .app-ui .input-group { display: flex; gap: 8px; align-items: center; }
  .app-ui .input-group input { flex: 1; }

  /* -- C14: ONE empty state (aliases the per-page inventions) -- */
  .app-ui .empty-msg, .app-ui .empty-state, .app-ui .empty-hint, .app-ui .no-files-message, .app-ui .empty-pills {
    display: block; text-align: center; color: var(--text-light); font-size: var(--fs-base);
    background: var(--surface); border: 1px solid var(--border-1); border-radius: var(--r-card);
    padding: 28px 16px; box-shadow: none;
  }

  /* -- Phase 9d (owner, 2026-07-15): page-top mini-stat strips retired.
     Only strips sitting directly on the page canvas go (property-mgmt
     occupancy row, maintenance/submissions/onboarding counters); stat rows
     nested inside panes/cards (accounting totals, share + portal tiles)
     keep rendering. -- */
  .app-ui .pane > .container > .mstats { display: none; }
  /* ...and the property-mgmt Quick Actions row — pure sidebar duplication
     (Contracts/Maintenance/Accounting are one click away in the nav + ⌘K).
     The other "quick action" blocks stay: accounting's is a functional
     modal row, applications-detail's are contextual per-record launchers. */
  .app-ui .qactions { display: none; }

  /* -- Phase 9e (owner, 2026-07-17): compact page header. The band STAYS as
     the page anchor — tenant/shared pages have no breadcrumb, so it is their
     only title, and dropping it admin-side would re-fragment the two
     surfaces — but it slims to a quiet row: 16px title, 12px meta line,
     roughly half the vertical bulk. Covers every header system Phase 6
     normalized, so all pages shrink together. -- */
  body.app-ui h1,
  .app-ui .pm-hdr h1, .app-ui .toolbar .title, .app-ui .page-header h1,
  .app-ui .cfg-hdr h1, .app-ui .section-title,
  .app-ui .content .container > h1,
  .app-ui .onboard-container > .page-header h1,
  .app-ui .container > .section-title h1,
  .app-ui .hero-title { font-size: var(--fs-page-title, 16px); }
  .app-ui .pm-hdr, .app-ui .page-header, .app-ui .cfg-hdr { margin: 0 0 14px; padding: 0 0 8px; }
  .app-ui .pm-hdr .addr, .app-ui .toolbar .subtitle, .app-ui .page-header .sub,
  .app-ui .cfg-hdr .sub, .app-ui .hero-subtitle { font-size: var(--fs-sm); margin-top: 2px; }
  .app-ui .content .container > .sub { font-size: var(--fs-sm); margin: 0 0 14px; padding: 0 0 8px; }

  /* -- Phase 9b (tranche 2) -- */
  /* Value-less stat tiles read as a phantom tab row (admin_maintenance) —
     hide them until the backend populates .v (C7 follow-up). */
  .app-ui .mstats .ms:has(.v:empty) { display: none; }
  /* 'scheduled' rendered renewal-blue on schedule_readonly but pending-amber on
     viewings — chip-anchored remap so both use the pending triple (bare
     .status-scheduled at :292 keeps serving its original non-chip consumers). */
  .app-ui .status-badge.status-scheduled { background: var(--st-pending-bg); color: var(--st-pending-fg); border-color: var(--st-pending-bd); }
  /* applicant-documents dashed .file rows -> kit row dividers */
  .app-ui .file { border-bottom: 1px solid var(--border-1); padding: 8px 0; }
}