/* Bricks and Pixels Management Platform: the design system, DESIGN.md 2.0 (21 October 2026; UX-REFACTOR-2026-10-21, from
   the UX review in UX-REVIEW-2026-10-21\). One interface face (Manrope), the review's type scale, spacing and control sizes,
   the warm canvas with working panels on the lightest surface, brick red for the primary action and the current place,
   amber for attention, green only for a confirmed healthy state, neutral for unknown, red for errors and destructive actions.

   DESIGN.md's tokens are declared on :root (the complete light palette), redefined for dark twice: under the system
   preference, guarded so a user who chose light keeps it, and under the saved choice [data-bs-theme="dark"]. No colour is
   declared for the first time inside a media or theme block. The same blocks map the tokens onto Tabler's --tblr-*
   properties, so Tabler's components take the look without any of its classes being redefined: every class of our own
   here takes the app- prefix. Tabler 1.6.1 is vendored at /vendor/tabler/1.6.1/ and loads before this file. */

@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('/fonts/manrope-latin-wght.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/ibm-plex-mono-latin-600.woff2') format('woff2'); }

:root {
  color-scheme: light;
  /* Printed documents (invoices): always paper, whatever the theme. Not redefined in dark. DESIGN.md, Printed documents. */
  --paper: #FFFFFF;
  --paper-ink: #202124;
  --paper-muted: #5F5D57;
  --paper-rule: #E2D6C0;
  --paper-rule-strong: #D8BE91;
  --brand: #D95732;
  --brand-strong: #A8401F;
  /* brick as text (the current tab): brand-strong in light, the lifted brand in dark, where brand-strong is 3.40:1 on the canvas */
  --brand-text: #A8401F;
  --on-brand: #FFFFFF;
  --interactive: #27B9D1;
  --interactive-strong: #0C6371;
  --canvas: #F3EEE5;
  --surface-1: #FBF9F5;
  --surface-2: #EDE6DA;
  --surface-3: #E4DACA;
  --rail: #202124;
  --rail-surface: #2A2B2E;
  --rail-edge: #202124;
  --ink: #202124;
  --ink-muted: #55565A;
  --ink-subtle: #5F5D57;
  --on-rail: #F3EEE5;
  --on-rail-muted: #9B9A96;
  --hairline: #D8BE91;
  --hairline-soft: #E2D6C0;
  --hairline-strong: #B99F72;
  --control-border: #847D6F;
  --success: #29683F;
  --warning: #78561B;
  --critical: #A6231B;
  --info: #0C6371;
  --neutral: #55565A;
  --shadow-raised: 0 4px 16px rgba(32, 33, 36, 0.10);
  --shadow-modal: 0 12px 40px rgba(32, 33, 36, 0.20);
  --scrim: rgba(32, 33, 36, 0.45);
  --selected-wash: rgba(39, 185, 209, 0.08);
  --pill-alpha: 0.12;

  /* One interface face (DESIGN.md 2.0): Manrope for every word and figure; mono for technical identifiers and code only. */
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-body);
  --font-data: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', 'Consolas', monospace;

  /* The type scale (the review's, exactly): page title 28, section 18, body and table values 15, metadata 13, metric 32. */
  --text-title: 1.75rem;
  --text-section: 1.125rem;
  --text-body: 0.9375rem;
  --text-meta: 0.8125rem;
  --text-metric: 2rem;

  /* Spacing 4, 8, 12, 16, 24, 32, 48; nothing between them. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s6: 24px; --s8: 32px; --s12: 48px; --s16: 64px;
  --rail-width: 232px;
  --rail-folded: 56px;
  /* Controls 40px tall with an 8px radius; panels 10px; menus and dialogs 12px; table rows 44px. */
  --radius-control: 8px;
  --radius-panel: 10px;
  --radius-layer: 12px;
  --control-height: 40px;
  --row-height: 44px;
  --row-compact: 36px;
  --form-width: 720px;
  --reading-width: 68ch;
  --dur-control: 150ms;
  --dur-appear: 180ms;
  --ease: cubic-bezier(0.2, 0, 0, 1);

  /* ---- the tokens on Tabler's properties ---- */
  --tblr-font-sans-serif: var(--font-body);
  --tblr-font-monospace: var(--font-data);
  --tblr-body-font-family: var(--font-body);
  --tblr-body-font-size: var(--text-body);
  --tblr-body-line-height: 1.5;
  --tblr-body-color: var(--ink);
  --tblr-body-bg: var(--canvas);
  --tblr-emphasis-color: var(--ink);
  --tblr-heading-color: var(--ink);
  --tblr-secondary-color: var(--ink-muted);
  --tblr-tertiary-color: var(--ink-subtle);
  --tblr-secondary: var(--ink-muted);
  --tblr-muted: var(--ink-subtle);
  --tblr-secondary-bg: var(--surface-2);
  --tblr-tertiary-bg: var(--surface-3);
  --tblr-bg-surface: var(--surface-1);
  --tblr-bg-surface-primary: var(--surface-1);
  --tblr-bg-surface-secondary: var(--surface-2);
  --tblr-bg-surface-tertiary: var(--surface-2);
  --tblr-bg-forms: var(--surface-1);
  --tblr-border-color: var(--hairline-soft);
  --tblr-border-color-translucent: var(--hairline-soft);
  --tblr-primary: var(--brand-strong);
  --tblr-primary-fg: var(--on-brand);
  --tblr-link-color: var(--interactive-strong);
  --tblr-link-hover-color: var(--interactive-strong);
  --tblr-link-decoration: underline;
  --tblr-link-hover-decoration: underline;
  --tblr-success: var(--success);
  --tblr-warning: var(--warning);
  --tblr-danger: var(--critical);
  --tblr-info: var(--info);
  --tblr-code-color: var(--ink);
  --tblr-code-bg: var(--surface-2);
  --tblr-border-radius: var(--radius-control);
  --tblr-border-radius-sm: var(--radius-control);
  --tblr-border-radius-lg: var(--radius-panel);
  --tblr-border-radius-xl: var(--radius-layer);
  --tblr-shadow-card: none;
  --tblr-shadow-input: none;
  --tblr-focus-ring-color: var(--interactive-strong);
  --tblr-focus-ring-width: 2px;
  --tblr-focus-ring-offset: 2px;
  --tblr-active-bg: var(--selected-wash);
  --tblr-form-invalid-color: var(--critical);
  --tblr-form-invalid-border-color: var(--critical);
  --tblr-sidebar-width: var(--rail-width);
  --tblr-sidebar-folded-width: var(--rail-folded);
  --tblr-page-padding-y: var(--s6);
  --tblr-page-padding: var(--s8);
  --tblr-font-size-h1: var(--text-title);
  --tblr-line-height-h1: 1.2;
  --tblr-font-size-h2: var(--text-section);
  --tblr-line-height-h2: 1.35;
  --tblr-font-size-h3: var(--text-body);
  --tblr-font-weight-headings: 650;
}

/* The system preference, before the saved choice is known to be light: a no-script fallback, since theme.js resolves
   the system theme into the attribute before first paint. */
@media (prefers-color-scheme: dark) {
  :root:not([data-bs-theme="light"]) {
    color-scheme: dark;
    --brand: #E8683F;
    --brand-strong: #BC4A21;
    --brand-text: #E8683F;
    --interactive: #3FCDE3;
    --interactive-strong: #3FCDE3;
    --canvas: #1A1B1D;
    --surface-1: #242528;
    --surface-2: #2A2B2E;
    --surface-3: #313235;
    --rail-edge: #3B3A36;
    --ink: #F3EEE5;
    --ink-muted: #B9B7B1;
    --ink-subtle: #9C9A94;
    --hairline: #474640;
    --hairline-soft: #3C3B36;
    --hairline-strong: #4A473F;
    --control-border: #7B776F;
    --success: #5DB37E;
    --warning: #D9A24A;
    --critical: #E8756B;
    --info: #3FCDE3;
    --neutral: #B9B7B1;
    --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.40);
    --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.60);
    --scrim: rgba(0, 0, 0, 0.60);
    --selected-wash: rgba(63, 205, 227, 0.08);
  }
}

:root[data-bs-theme="dark"] {
  color-scheme: dark;
  --brand: #E8683F;
  --brand-strong: #BC4A21;
  --brand-text: #E8683F;
  --interactive: #3FCDE3;
  --interactive-strong: #3FCDE3;
  --canvas: #1A1B1D;
  --surface-1: #242528;
  --surface-2: #2A2B2E;
  --surface-3: #313235;
  --rail-edge: #3B3A36;
  --ink: #F3EEE5;
  --ink-muted: #B9B7B1;
  --ink-subtle: #9C9A94;
  --hairline: #474640;
  --hairline-soft: #3C3B36;
  --hairline-strong: #4A473F;
  --control-border: #7B776F;
  --success: #5DB37E;
  --warning: #D9A24A;
  --critical: #E8756B;
  --info: #3FCDE3;
  --neutral: #B9B7B1;
  --shadow-raised: 0 4px 16px rgba(0, 0, 0, 0.40);
  --shadow-modal: 0 12px 40px rgba(0, 0, 0, 0.60);
  --scrim: rgba(0, 0, 0, 0.60);
  --selected-wash: rgba(63, 205, 227, 0.08);
}

/* ---- base: one face, the scale, the figures ---- */
body { background: var(--canvas); color: var(--ink); font-family: var(--font-body); font-size: var(--text-body); line-height: 1.5; }
:focus-visible { outline: 2px solid var(--interactive-strong); outline-offset: 2px; }
/* Every link is interactive-strong, never brick (DESIGN.md 2.0, Colour roles): Tabler paints a .btn-link from --tblr-primary,
   which is brand-strong here and reachable by no variable of its own, so the one rule below brings it back to the link
   variables. Brick stays on the primary button and the current place. */
a.btn-link, button.btn-link { color: var(--tblr-link-color); }
a.btn-link:hover, a.btn-link:active, a.btn-link:focus-visible, button.btn-link:hover, button.btn-link:active, button.btn-link:focus-visible { color: var(--tblr-link-hover-color); }
/* Figures are tabular everywhere so columns line up; mono is for technical identifiers and code only (DESIGN.md 2.0):
   email addresses, URLs, money and dates are in the interface face. */
.app-mono, .app-id, .app-num, .app-num-inline, .app-tabular, code, kbd, time { font-variant-numeric: tabular-nums; }
.app-id, code, kbd, .app-mono { font-family: var(--font-data); font-size: 0.92em; }
.app-num { text-align: right; }
h1, h2, h3, h4 { font-family: var(--font-body); }
.app-figure { font-family: var(--font-body); font-size: var(--text-metric); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.app-h2 { font-family: var(--font-body); font-size: var(--text-section); font-weight: 650; line-height: 1.35; margin: 0; }
.app-h3 { font-family: var(--font-body); font-size: var(--text-body); font-weight: 650; line-height: 1.4; margin: 0; }
.app-page-header .page-title { font-family: var(--font-body); font-size: var(--text-title); font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; gap: var(--s3); flex-wrap: wrap; align-items: center; margin: 0; }
.app-count { font-family: var(--font-body); font-size: var(--text-meta); font-weight: 600; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.app-lead { margin: var(--s2) 0 0; max-width: var(--reading-width); color: var(--ink-muted); font-size: var(--text-body); }
.app-small { font-size: var(--text-meta); line-height: 1.45; }
.app-prose { max-width: var(--reading-width); }
.app-ink-muted { color: var(--ink-muted); }
.app-ink-subtle { color: var(--ink-subtle); }
/* a value that is not known is said in words, quietly, at body size (the review: never styled as a headline metric) */
.app-missing { color: var(--ink-muted); font-weight: 400; font-style: normal; }

/* ---- controls: 40px, an 8px radius, one filled brick button per working view ---- */
.app-body .btn, .app-auth .btn { --tblr-btn-padding-y: 0.5rem; --tblr-btn-padding-x: var(--s4); --tblr-btn-border-radius: var(--radius-control); --tblr-btn-font-weight: 600; --tblr-btn-font-size: var(--text-body); --tblr-btn-box-shadow: none; min-height: var(--control-height); gap: var(--s2); }
.app-body .btn:not(.btn-primary):not(.btn-link):not([class*="btn-ghost"]):not([class*="btn-outline"]):not(.btn-danger) { --tblr-btn-bg: var(--surface-1); --tblr-btn-border-color: var(--control-border); --tblr-btn-color: var(--ink); --tblr-btn-hover-bg: var(--surface-2); --tblr-btn-hover-border-color: var(--control-border); --tblr-btn-hover-color: var(--ink); }
.app-body .btn-sm { --tblr-btn-padding-y: 0.25rem; --tblr-btn-padding-x: var(--s3); --tblr-btn-font-size: var(--text-meta); min-height: 32px; }
.app-body .btn-lg { min-height: 44px; }
.app-body .form-control, .app-body .form-select, .app-auth .form-control { --tblr-border-color: var(--control-border); border-radius: var(--radius-control); min-height: var(--control-height); padding-top: 0.5rem; padding-bottom: 0.5rem; font-size: var(--text-body); }
.app-body .form-control-sm, .app-body .form-select-sm { min-height: 32px; padding-top: 0.25rem; padding-bottom: 0.25rem; font-size: var(--text-meta); }
.app-body textarea.form-control { line-height: 1.5; min-height: 5.5rem; resize: vertical; }
.app-body .form-label { font-weight: 600; font-size: var(--text-meta); margin-bottom: var(--s1); color: var(--ink); }
.app-body .form-hint { color: var(--ink-muted); font-size: var(--text-meta); margin-top: var(--s1); }
.app-body .invalid-feedback { color: var(--critical); font-size: var(--text-meta); }
.app-body .form-check-input { --tblr-border-color: var(--control-border); width: 1.125rem; height: 1.125rem; }
.app-body .form-check { min-height: 28px; display: flex; align-items: center; gap: var(--s2); padding-left: 0; }
.app-body .form-check .form-check-input { float: none; margin: 0; flex: none; }
.app-form { max-width: var(--form-width); }
.app-form-footer { display: flex; gap: var(--s3); align-items: center; flex-wrap: wrap; margin-top: var(--s6); }
/* the reason a form was refused, beside the button that was pressed: a full row of the footer, in the critical colour, never a toast */
.app-form-refusal { flex: 1 1 100%; margin: 0; color: var(--critical); font-size: var(--text-body); font-weight: 500; border-left: 3px solid var(--critical); padding-left: var(--s3); }
.app-form-refusal:focus { outline: 2px solid var(--critical); outline-offset: 2px; }
/* the one-press send in a record's header (FIX-ROUND-18 item 1): the button, then the one step it needs, then its reason, each under the last */
.app-send-form { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); }
.app-send-step { width: min(26rem, 100%); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); padding: var(--s3) var(--s4); text-align: left; }
.app-send-step .app-field { margin-bottom: var(--s3) !important; }
.app-send-step .app-form-footer { margin-top: 0; }
.app-send-form .app-form-refusal { width: min(26rem, 100%); text-align: left; }
.app-send-form .app-send-note { width: min(26rem, 100%); margin: 0; text-align: right; }
@media (max-width: 575.98px) { .app-send-form { align-items: stretch; } .app-send-step, .app-send-form .app-form-refusal, .app-send-form .app-send-note { width: 100%; } .app-send-form .app-send-note { text-align: left; } }

/* ---- the shell: the page head in one order on every page (DESIGN.md 2.0, The shell) ---- */
.app-container { max-width: 1440px; margin-inline-start: 0; }
@media (max-width: 991.98px) { :root { --tblr-page-padding: var(--s4); } }
.app-page-header { margin: 0; padding-top: var(--s6); }
/* the first line: where the page sits (the breadcrumb) on the left, the one search box on the right */
.app-topline { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); flex-wrap: wrap; min-height: var(--control-height); margin-bottom: var(--s4); }
.app-topline > .app-header-tools { margin-left: auto; }
/* the second: the title with its status, one line of summary beneath, the actions at the right (the primary last) */
.app-titleline { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4) var(--s6); flex-wrap: wrap; }
.app-title-block { min-width: 0; flex: 1 1 28rem; }
.app-header-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; justify-content: flex-end; }
.app-secondary-actions, .app-primary { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-primary .btn { white-space: nowrap; }
/* the header's Go to links (FIX-ROUND-21 S7): quiet, one line that wraps, never buttons */
.app-shortcuts { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: var(--s2); font-size: var(--text-meta); }
.app-shortcuts-label { color: var(--ink-muted); }
/* a button whose label names what it does in full (the card link storing a subscription's card) wraps, never pushes the page sideways (FIX-ROUND-21 S6) */
.app-body .btn.app-btn-wrap { white-space: normal; text-align: start; height: auto; max-width: 100%; overflow-wrap: anywhere; }
.app-header-tools { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.app-page-header-nav-only { padding-top: var(--s4); }
/* the one search box (WORKFLOWS.md rule 9): a button shaped like the field it opens */
.app-search-open { --tblr-btn-color: var(--ink-muted); --tblr-btn-border-color: var(--control-border); --tblr-btn-bg: var(--surface-1); --tblr-btn-hover-bg: var(--surface-2); --tblr-btn-hover-border-color: var(--control-border); --tblr-btn-hover-color: var(--ink); gap: var(--s2); font-weight: 400 !important; min-width: 18rem; justify-content: flex-start; }
.app-search-open kbd { margin-left: auto; font-size: 0.75rem; padding: 0 var(--s1); border: 1px solid var(--hairline); border-radius: 4px; background: var(--surface-2); color: var(--ink-muted); }
@media (max-width: 575.98px) { .app-search-open { min-width: 0; } .app-search-open-text { display: none; } .app-title-block { flex-basis: 100%; } .app-header-actions { justify-content: flex-start; } }
.app-palette { max-width: 640px; padding: 0; }
.app-palette-content { border: 0; box-shadow: none; background: transparent; }
.app-palette-form { padding: var(--s3); border-bottom: 1px solid var(--hairline-soft); }
.app-palette-results { max-height: 24rem; overflow-y: auto; }
.app-palette-hit { padding: 0; }
.app-palette-hit.active { --tblr-list-group-active-bg: var(--selected-wash); --tblr-list-group-active-color: var(--ink); --tblr-list-group-active-border-color: var(--hairline-soft); box-shadow: inset 3px 0 0 var(--interactive); }
.app-palette-link { display: flex; align-items: baseline; gap: var(--s3); padding: var(--s2) var(--s4); color: inherit; text-decoration: none; min-height: 40px; }
.app-palette-kind { flex: none; width: 5.5em; font-size: 0.75rem; color: var(--ink-subtle); }
.app-palette-detail { margin-left: auto; font-size: var(--text-meta); color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.app-palette-none { color: var(--ink-muted); }
.app-palette-hint { margin: 0; padding: var(--s2) var(--s4); }
/* the one tier of tabs under the title: the area's sub-areas, or a sub-area's local tabs; the current one in brick with its bar */
.app-subnav { margin-top: var(--s6); }
.app-subnav .nav-bordered { border-bottom: 1px solid var(--hairline); flex-wrap: wrap; gap: 0 var(--s6); }
.app-subnav .nav-item + .nav-item { margin-inline-start: 0; }
.app-subnav .nav-link { color: var(--ink-muted); font-weight: 600; font-size: var(--text-body); padding: var(--s2) 0; min-height: 44px; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color var(--dur-control) var(--ease), border-color var(--dur-control) var(--ease); }
.app-subnav .nav-link:hover { color: var(--ink); }
.app-subnav .nav-link.active { color: var(--brand-text); border-bottom-color: var(--brand-text); }
@media (max-width: 575.98px) { .app-subnav .nav-bordered { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } .app-subnav .nav-link { white-space: nowrap; } }
/* the breadcrumb: the page's parents as links, quiet, one line */
.app-crumbs { margin: 0; min-width: 0; }
.app-crumbs .breadcrumb { --tblr-breadcrumb-divider: '\203A'; --tblr-breadcrumb-item-padding-x: var(--s2); font-size: var(--text-meta); margin: 0; flex-wrap: wrap; }
.app-crumbs .breadcrumb-item a { color: var(--ink-muted); text-decoration: none; font-weight: 500; }
.app-crumbs .breadcrumb-item a:hover { color: var(--interactive-strong); text-decoration: underline; }
.app-crumbs .breadcrumb-item.active { color: var(--ink); }
.app-crumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--ink-subtle); }
.app-body .page-body { margin-top: var(--s6); margin-bottom: var(--s12); }

/* ---- the rail: soot in both themes, the six areas, Settings at the foot, the one brick bar on the current area ---- */
.app-rail {
  --tblr-navbar-bg: var(--rail);
  --tblr-navbar-color: var(--on-rail-muted);
  --tblr-navbar-hover-color: var(--on-rail);
  --tblr-navbar-active-color: var(--on-rail);
  --tblr-navbar-active-bg: var(--rail-surface);
  --tblr-navbar-border-color: var(--rail-edge);
  --tblr-navbar-brand-color: var(--on-rail);
  --tblr-navbar-brand-hover-color: var(--on-rail);
  --tblr-body-color: var(--on-rail);
  --tblr-border-color: var(--rail-edge);
  --tblr-active-bg: var(--rail-surface);
  --tblr-link-color: var(--on-rail);
  --tblr-link-hover-color: var(--on-rail);
  --tblr-focus-ring-color: var(--interactive);
  font-family: var(--font-body);
}
.app-rail .navbar-nav { --tblr-sidebar-nav-padding-y: 0.5rem; --tblr-sidebar-nav-padding-x: 0.75rem; --tblr-nav-link-icon-color: var(--on-rail-muted); gap: var(--s1); }
.app-rail .nav-link { position: relative; border-radius: var(--radius-control); min-height: 40px; font-size: var(--text-body); font-weight: 500; transition: background var(--dur-control) var(--ease), color var(--dur-control) var(--ease); }
.app-rail .nav-item.active > .nav-link { font-weight: 700; }
.app-rail .nav-item.active > .nav-link::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: #D95732; }
.app-rail .nav-link:focus-visible { outline-color: var(--interactive); }
@media (min-width: 992px) {
  .app-rail .navbar-collapse { display: flex !important; flex-direction: column; flex: 1 1 auto; }
  .app-rail-settings { margin-top: auto; }
}
.app-rail-brand { padding: var(--s4) var(--s3) var(--s2); }
.app-rail-brand a { display: inline-flex; align-items: center; gap: var(--s3); color: var(--on-rail); text-decoration: none; font-family: var(--font-body); font-weight: 700; font-size: 1rem; }
.app-mark { flex: none; }
.app-wordmark { white-space: nowrap; }
/* the running indicator beside the area that owns the running thing (WORKFLOWS.md rule 2) */
.app-rail-running { margin-left: auto; display: inline-flex; align-items: center; color: var(--interactive); }
.app-rail-running + .app-rail-count { margin-left: var(--s2); }
.app-rail-running .app-loader { width: 14px; height: 14px; }
.app-rail-count { margin-left: auto; min-width: 20px; padding: 0 6px; border-radius: 10px; background: #D95732; color: #FFFFFF; font-size: var(--text-meta); font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; }
.app-bond { display: flex; gap: var(--s2); padding: var(--s2) var(--s3); list-style: none; }
.app-bond i { display: block; height: 1px; background: var(--rail-surface); }
.app-bond i:first-child { flex: 1; }
.app-bond i:last-child { flex: 2; }
.app-bond-alt i:first-child { flex: 2; }
.app-bond-alt i:last-child { flex: 1; }
.app-rail-foot { padding: var(--s2) var(--s2) var(--s3); gap: var(--s1); }
.app-rail-user { display: flex; flex-direction: column; gap: 2px; padding: var(--s2) var(--s3); min-width: 0; }
.app-rail-user-label { font-size: var(--text-meta); color: var(--on-rail-muted); }
.app-rail-user-name { color: var(--on-rail); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-rail-signout { margin: 0; }
.app-rail-btn { --tblr-btn-color: var(--on-rail-muted); --tblr-btn-hover-color: var(--on-rail); --tblr-btn-hover-bg: var(--rail-surface); --tblr-btn-border-color: transparent; --tblr-btn-bg: transparent; justify-content: flex-start; width: 100%; gap: var(--s2); }
.app-rail-btn .icon { width: 1.25rem; height: 1.25rem; }
.app-rail-live { display: inline-flex; align-items: center; gap: var(--s2); margin: 0 0 var(--s2); padding: 0 var(--s3); font-size: var(--text-meta); color: var(--on-rail-muted); }
.app-rail-live-what { display: block; font-size: 0.75rem; }
.app-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 2px rgba(93, 179, 126, 0.25); flex: none; }
/* folded: the icons alone, as Tabler folds it; the word hides, the mark stays */
html[data-bs-sidebar^="folded"] .app-wordmark, html[data-bs-sidebar^="folded"] .app-rail-user, html[data-bs-sidebar^="folded"] .app-rail-btn-text, html[data-bs-sidebar^="folded"] .app-rail-live, html[data-bs-sidebar^="folded"] .app-bond { display: none; }
html[data-bs-sidebar^="folded"] .app-rail-btn { justify-content: center; }
@media (max-width: 991.98px) {
  .app-rail-brand { padding: var(--s2) var(--s3); }
  .app-rail-live { margin: 0; }
  .app-rail-user { display: none; }
  .app-rail-foot { flex-direction: row; align-items: center; }
  .app-rail-btn { width: auto; }
}

/* ---- environment marker (DECISIONS 71): text plus a striped edge, never colour alone ---- */
.app-env-marker {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap;
  padding: var(--s2) var(--s8);
  background: var(--surface-2); color: var(--ink);
  border-bottom: 1px solid var(--hairline);
  border-left: 8px solid var(--warning);
  background-image: repeating-linear-gradient(135deg, var(--surface-2) 0 12px, var(--surface-3) 12px 24px);
  position: sticky; top: 0; z-index: 20;
  font-size: var(--text-meta);
}
.app-env-marker-name { font-weight: 700; color: var(--warning); }
.app-auth .app-env-marker { position: static; margin-bottom: var(--s4); padding: var(--s2) var(--s4); }
@media (max-width: 991.98px) { .app-env-marker { padding: var(--s2) var(--s4); } }

/* ---- the signed-out shell: one card centred both ways, the brand above it (Tabler's single layout) ---- */
.app-auth-brand { display: flex; align-items: center; justify-content: center; gap: var(--s3); }
.app-auth-mark { display: inline-flex; width: 40px; height: 40px; flex: none; }
.app-auth-mark .app-mark { width: 40px; height: 40px; }
.app-auth-wordmark { font-family: var(--font-body); font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.app-auth-live { display: inline-flex; align-items: center; gap: var(--s2); margin-left: var(--s2); font-size: var(--text-meta); color: var(--ink-subtle); }
.app-auth-card { --tblr-card-bg: var(--surface-1); --tblr-card-border-color: var(--hairline-soft); border-radius: var(--radius-panel); }
.app-auth .app-form { max-width: none; }
.app-auth-title { font-family: var(--font-body); font-size: var(--text-section); font-weight: 700; margin: 0 0 var(--s4); }
.app-qr { width: 200px; height: 200px; background: #FFFFFF; padding: var(--s2); border: 1px solid var(--hairline); margin: 0 auto; }
.app-qr svg { width: 100%; height: 100%; display: block; }
.app-secret { font-family: var(--font-data); font-size: var(--text-body); letter-spacing: 0.08em; word-break: break-all; }

/* ---- panels, tables, metadata lists (DESIGN.md 2.0, Components) ---- */
/* a working panel: the lightest surface, a quiet 1px edge, a 10px radius, 24px inside; its title 18px */
.app-body .card { --tblr-card-bg: var(--surface-1); --tblr-card-border-color: var(--hairline-soft); --tblr-card-border-radius: var(--radius-panel); --tblr-card-inner-border-radius: calc(var(--radius-panel) - 1px); --tblr-card-spacer-y: var(--s6); --tblr-card-spacer-x: var(--s6); --tblr-card-cap-padding-y: var(--s4); --tblr-card-cap-padding-x: var(--s6); --tblr-card-cap-bg: transparent; --tblr-card-group-margin: var(--s6); margin-bottom: var(--s6); }
.app-body .card-header { border-bottom: 1px solid var(--hairline-soft); gap: var(--s3); flex-wrap: wrap; }
.app-body .card-title { font-family: var(--font-body); font-size: var(--text-section); font-weight: 650; margin: 0; }
.app-body .card-subtitle { color: var(--ink-muted); font-size: var(--text-meta); margin: 2px 0 0; }
/* tables: 15px values, 44px rows, the header row on surface-2 at 13px with a hairline beneath, nothing centred */
.app-table .table { --tblr-table-bg: transparent; font-size: var(--text-body); margin-bottom: 0; }
/* a hidden caption stays in the table's flow (Tabler keeps it out of position: absolute) with a -1px margin, which leaves
   the rows one pixel taller than the table's box, so every table in a .table-responsive scrolled by a pixel (the walk, fix 1).
   Without the margin the caption's one pixel sits inside the box, and a table scrolls only when it truly overflows. */
table > caption.visually-hidden { margin: 0 !important; }
.app-table .table > :not(caption) > * > * { padding: var(--s2) var(--s4); height: var(--row-height); vertical-align: middle; border-bottom: 1px solid var(--hairline-soft); }
.app-table .table thead th { height: 36px; font-size: var(--text-meta); font-weight: 600; text-transform: none; letter-spacing: 0; line-height: 1.4; color: var(--ink-muted); background: var(--surface-2); border-bottom: 1px solid var(--hairline); white-space: nowrap; }
.app-table .table tbody th { font-weight: 600; text-align: left; }
.app-table .table tbody tr:hover > * { background: var(--surface-2); }
.app-table .table td.app-num, .app-table .table th.app-num { text-align: right; }
.app-table .table tr.app-attention-critical > :first-child { box-shadow: inset 3px 0 0 var(--critical); }
.app-table .table tr.app-attention-warning > :first-child { box-shadow: inset 3px 0 0 var(--warning); }
.app-table .table tr.app-is-selected > * { background: var(--selected-wash); }
.app-table .table tr.app-is-selected > :first-child { box-shadow: inset 3px 0 0 var(--interactive); }
.app-table .table td.app-nowrap, .app-table .table td.app-mono, .app-table .table td time { white-space: nowrap; }
.app-table .table td.app-wrap { white-space: normal; }
.app-table-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: var(--s3) var(--s6); flex-wrap: wrap; font-size: var(--text-meta); color: var(--ink-muted); }
/* the settings index: a row a setting and its value; one Change link per group, at the heading's right */
.app-settings-table th { width: 32%; color: var(--ink-muted); font-weight: 500; }
.app-settings-table td.app-settings-value { font-weight: 500; overflow-wrap: anywhere; }
.app-settings-change { margin-left: auto; font-size: var(--text-meta); font-weight: 600; white-space: nowrap; }
.app-saved-mark + .app-settings-change { margin-left: var(--s3); }
/* a kept message in the mail sink: the text as it would have gone, wrapped, never rendered as markup */
.app-mail-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--ink); font-family: var(--font-data); font-size: var(--text-meta); line-height: 1.5; padding: var(--s3); background: var(--surface-2); border-radius: var(--radius-control); }
.app-settings-group:target { scroll-margin-top: var(--s12); }
.app-settings-group:target .card-header { box-shadow: inset 3px 0 0 var(--interactive); }
/* the group just saved (WORKFLOWS.md J6): its rows highlighted and the word beside its heading, where the eye already is */
.app-settings-group-saved .card-header { box-shadow: inset 3px 0 0 var(--success); }
.app-settings-group-saved .app-settings-table tbody > tr > * { background: var(--selected-wash); }
.app-saved-mark { margin-left: auto; font-size: var(--text-meta); font-weight: 600; color: var(--success); }
.app-settings-note { padding: var(--s3) var(--s6); margin: 0; font-size: var(--text-meta); color: var(--ink-muted); border-top: 1px solid var(--hairline-soft); max-width: none; }
/* a key and value list: the value is a figure, a short phrase or a status, never a sentence (DECISIONS 190) */
.app-kv { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--s2) var(--s6); margin: 0; }
.app-kv dt { color: var(--ink-muted); font-size: var(--text-meta); font-weight: 500; line-height: 1.8; }
.app-kv dd { margin: 0; min-width: 0; overflow-wrap: break-word; font-weight: 500; }
.app-kv dd.app-id, .app-kv dd.app-mono, .app-kv dd.id, .app-kv dd.data { overflow-wrap: anywhere; }
.app-logo-preview { display: block; max-width: 160px; max-height: 48px; width: auto; height: auto; background: var(--paper); padding: 8px; border: 1px solid var(--hairline-soft); }
.app-actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }
.app-actions form { margin: 0; }
/* the price list, edited in place: a row a product, its name and price in their own boxes, the figures right aligned */
.app-products-table td { white-space: nowrap; }
.app-products-table .app-actions { flex-wrap: nowrap; }
.app-inline-form { display: flex; flex-direction: column; gap: 2px; }
.app-product-name { min-width: 14em; }
.app-price { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--s1); }
.app-input-money { width: 7.5em; text-align: right; }
.app-input-short { width: 5em; text-align: right; }
.app-is-inactive td:not(:last-child) { color: var(--ink-muted); }
.app-jobs-table td.app-job-cell { min-width: 16em; max-width: 40em; vertical-align: top; }

/* ---- status badges: the word always, a shape per tone; green only for a confirmed healthy state, neutral for unknown ---- */
.app-pill { --tblr-status-height: 24px; --tblr-status-padding-x: var(--s2); --tblr-status-gap: var(--s1); font-size: var(--text-meta); font-weight: 600; border: 1px solid currentColor; border-radius: 999px; background: color-mix(in srgb, var(--tblr-status-color) 10%, transparent); white-space: nowrap; }
.app-pill .status-dot { --tblr-status-size: 6px; border-radius: 1px; }
.app-pill-success { --tblr-status-color: var(--success); }
.app-pill-warning { --tblr-status-color: var(--warning); }
.app-pill-warning .status-dot { border-radius: 50%; }
.app-pill-critical { --tblr-status-color: var(--critical); }
.app-pill-critical .status-dot { transform: rotate(45deg); }
.app-pill-neutral, .app-pill-info { --tblr-status-color: var(--neutral); border-style: dashed; }
.app-pill-neutral .status-dot, .app-pill-info .status-dot { background: transparent; border: 1px solid currentColor; }

/* ---- errors, empties, waiting ---- */
.app-error-summary { --tblr-alert-variant-color: var(--critical); border-left: 3px solid var(--critical); max-width: var(--form-width); border-radius: var(--radius-panel); }
.app-error-summary-title { font-family: var(--font-body); font-size: var(--text-body); font-weight: 700; margin: 0 0 var(--s2); }
.app-error-summary-list { margin: 0; padding-left: 1.2em; }
.app-error-summary-list a { color: inherit; font-weight: 500; }
.app-field-invalid .form-label { color: var(--critical); }
/* an empty state: one line saying what belongs here and the control that fills it; compact, never a tall panel */
.app-empty { --tblr-empty-padding-md: var(--s6); --tblr-empty-icon-margin-bottom: var(--s3); --tblr-empty-action-margin-top: var(--s3); height: auto; padding: var(--s6) var(--s4); }
.app-empty .empty-title { font-family: var(--font-body); font-size: var(--text-body); font-weight: 600; margin-bottom: var(--s1); }
.app-empty .empty-subtitle { font-size: var(--text-meta); margin-bottom: 0; }
.app-empty-page { padding: var(--s12) var(--s4); }
.app-empty-page .empty-header { font-family: var(--font-body); font-size: 3rem; font-weight: 700; color: var(--ink-subtle); margin-bottom: var(--s3); }
.app-empty-page .empty-title { font-family: var(--font-body); font-size: var(--text-section); font-weight: 700; }
.app-waiting { display: flex; align-items: center; gap: var(--s2); margin: 0; color: var(--ink-muted); font-size: var(--text-meta); }
.app-log details > summary { cursor: pointer; list-style: none; }
.app-log details > summary::-webkit-details-marker { display: none; }
.app-log details > summary::before { content: '+'; display: inline-block; width: 1em; color: var(--ink-subtle); font-family: var(--font-data); }
.app-log details[open] > summary::before { content: '-'; }
.app-log .app-log-detail { margin: var(--s2) 0 0; font-size: var(--text-meta); color: var(--ink-muted); white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---- the flash (INTERACTION 4.2), the shortcut overlay ---- */
.app-toast { position: fixed; right: var(--s6); bottom: var(--s6); z-index: 1090; max-width: 420px; padding: var(--s3) var(--s4); background: var(--surface-1); color: var(--ink); border: 1px solid var(--hairline); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised); border-left-width: 3px; animation: app-appear var(--dur-appear) var(--ease); }
.app-toast-ok { border-left-color: var(--success); }
.app-toast-warn { border-left-color: var(--warning); }
.app-toast-error { border-left-color: var(--critical); }
@keyframes app-appear { from { opacity: 0; transform: translateY(8px); } }
/* FIX-ROUND-19 N19: on a phone the toast is in the flow at the top of the content, so it never covers a button */
@media (max-width: 575.98px) { .app-toast { position: static; margin: 0 0 var(--s3); max-width: none; animation: none; } }
.app-dialog { background: var(--surface-1); color: var(--ink); border: 1px solid var(--hairline-strong); border-radius: var(--radius-layer); box-shadow: var(--shadow-modal); padding: var(--s6); max-width: 440px; width: calc(100% - 2 * var(--s4)); }
.app-dialog::backdrop { background: var(--scrim); }
.app-dialog-title { font-family: var(--font-body); font-size: var(--text-section); font-weight: 700; margin: 0; }
.app-shortcut-list { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) var(--s4); margin: var(--s4) 0 var(--s6); }
.app-shortcut-list dt, .app-shortcut-list dd { margin: 0; }
.app-shortcut-list kbd { display: inline-block; min-width: 1.6em; padding: 1px var(--s1); border: 1px solid var(--control-border); border-bottom-width: 2px; border-radius: 4px; font-size: var(--text-meta); text-align: center; background: var(--surface-2); color: var(--ink); }

/* ---- the trading disclosures under every page served without a session (DECISIONS 207) ---- */
.app-identity-foot { max-width: 720px; margin: var(--s8) auto var(--s6); padding: var(--s4) var(--s4) 0; border-top: 1px solid var(--hairline-soft); color: var(--ink-muted); font-size: 12px; text-align: center; }
.app-identity-foot p { margin: 0 0 4px; }

/* ---- motion: 150 to 180ms, ease-out, and none for a person who asked for none ---- */
@media (prefers-reduced-motion: reduce) {
  .app-toast { animation: none; }
  .app-body *, .app-body *::before, .app-body *::after, .app-auth *, .app-auth *::before, .app-auth *::after { transition-duration: 0ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ==== the shared components of DESIGN.md 2.0 (src/web/ui.ts) ==== */
/* a working panel */
.app-panel { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); margin: 0 0 var(--s6); min-width: 0; }
.app-panel-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s4) var(--s6) 0; }
.app-panel-title { font-size: var(--text-section); font-weight: 650; line-height: 1.35; margin: 0; display: inline-flex; align-items: baseline; gap: var(--s2); }
.app-panel-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-panel-body { padding: var(--s4) var(--s6) var(--s6); }
.app-panel-flush > .app-panel-body { padding: var(--s3) 0 0; }
.app-panel-foot { padding: var(--s3) var(--s6); border-top: 1px solid var(--hairline-soft); font-size: var(--text-meta); color: var(--ink-muted); }
.app-panel-warning { border-left: 4px solid var(--warning); }
.app-panel-critical { border-left: 4px solid var(--critical); }
.app-panel-success { border-left: 4px solid var(--success); }
.app-panels-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 0 var(--s6); align-items: start; }
.app-panels-main { display: grid; grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr); gap: 0 var(--s6); align-items: start; }
@media (max-width: 991.98px) { .app-panels-main { grid-template-columns: minmax(0, 1fr); } }
.app-section-title { font-size: var(--text-section); font-weight: 650; margin: var(--s8) 0 var(--s3); display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
.app-section-title:first-child { margin-top: 0; }
.app-section-title .app-section-meta { font-size: var(--text-meta); font-weight: 500; color: var(--ink-muted); }
/* metrics: four to six, the figure 32px with tabular numerals, a missing value in words at body size */
.app-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: var(--s4); margin: 0 0 var(--s6); }
.app-metric { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); padding: var(--s4) var(--s6); display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.app-metric-label { margin: 0; font-size: var(--text-meta); font-weight: 600; color: var(--ink-muted); }
.app-metric-value { margin: 0; font-size: var(--text-metric); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.app-metric-missing { margin: var(--s2) 0; font-size: var(--text-body); color: var(--ink-muted); }
.app-metric-foot { margin-top: auto; padding-top: var(--s2); font-size: var(--text-meta); }
.app-metric-success .app-metric-foot { color: var(--success); }
.app-metric-warning { border-left: 4px solid var(--warning); }
.app-metric-critical { border-left: 4px solid var(--critical); }
/* the healthy-state strip: short chips with a mark each */
.app-status-strip { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0 0 var(--s6); padding: 0; }
.app-status-chip { display: inline-flex; align-items: center; gap: var(--s2); min-height: 28px; padding: 0 var(--s3); border-radius: 999px; font-size: var(--text-meta); font-weight: 600; border: 1px solid currentColor; background: color-mix(in srgb, currentColor 8%, transparent); }
.app-status-chip a { color: inherit; }
.app-status-chip-success { color: var(--success); }
.app-status-chip-warning { color: var(--warning); }
.app-status-chip-critical { color: var(--critical); }
.app-status-chip-neutral { color: var(--neutral); border-style: dashed; }
.app-status-mark { font-weight: 800; }
/* a grouped issue: amber bar, the issue, its summary, what it affects, the actions, every alert behind a disclosure */
.app-issue { background: var(--surface-1); border: 1px solid var(--hairline-soft); border-left: 4px solid var(--warning); border-radius: var(--radius-panel); padding: var(--s4) var(--s6); margin: 0 0 var(--s3); }
.app-issue-critical { border-left-color: var(--critical); }
.app-issue-title { font-size: var(--text-section); font-weight: 700; margin: 0; display: flex; align-items: baseline; gap: var(--s3); }
.app-issue-mark { color: var(--warning); font-weight: 800; }
.app-issue-critical .app-issue-mark { color: var(--critical); }
.app-issue-summary { margin: var(--s2) 0 0; }
.app-issue-meta { margin: var(--s1) 0 0; font-size: var(--text-meta); color: var(--ink-muted); }
.app-issue-actions { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: var(--s4); }
.app-issue-actions form { margin: 0; }
.app-issue-items { margin-top: var(--s3); }
.app-issue-items > summary { cursor: pointer; font-size: var(--text-meta); font-weight: 600; color: var(--interactive-strong); }
.app-issue-items ul { margin: var(--s2) 0 0; padding-left: 1.2em; font-size: var(--text-meta); }
.app-issue-items li { margin-bottom: var(--s1); }
/* a metadata list: label above value on a phone, side by side from 576px; one or two columns */
.app-facts-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3) var(--s6); margin: 0; }
.app-facts-list.app-facts-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 575.98px) { .app-facts-list.app-facts-2 { grid-template-columns: minmax(0, 1fr); } }
.app-fact { display: grid; grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr); gap: var(--s4); align-items: baseline; min-width: 0; }
.app-fact dt { font-size: var(--text-meta); font-weight: 500; color: var(--ink-muted); }
.app-fact dd { margin: 0; min-width: 0; overflow-wrap: break-word; }
.app-fact dd.app-id { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .app-fact { grid-template-columns: minmax(0, 1fr); gap: 0; } }
/* help and evidence folded: the summary in the link colour with a mark, the body below */
.app-more { margin: 0 0 var(--s4); }
.app-more > summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: var(--s2); min-height: 32px; font-size: var(--text-meta); font-weight: 600; color: var(--interactive-strong); }
.app-more > summary::-webkit-details-marker { display: none; }
.app-more > summary::before { content: '\25B8'; font-size: 0.8em; transition: transform var(--dur-control) var(--ease); }
.app-more[open] > summary::before { transform: rotate(90deg); }
.app-more-body { margin-top: var(--s2); font-size: var(--text-body); }
.app-more-body > :last-child { margin-bottom: 0; }
/* the table toolbar: search first, then the filters, the apply button beside them */
.app-toolbar { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s4); }
.app-toolbar-search { flex: 2 1 16rem; max-width: 26rem; }
.app-toolbar-field { flex: 1 1 10rem; max-width: 16rem; display: flex; flex-direction: column; }
.app-toolbar-field .form-label { margin-bottom: var(--s1); }
.app-toolbar-actions { display: flex; gap: var(--s2); align-items: center; }
.app-result-count { margin: var(--s3) 0 0; font-size: var(--text-meta); color: var(--ink-muted); }
.app-panel .app-result-count { padding: 0 var(--s6) var(--s4); }
/* the bulk toolbar: shown only with a selection, the count first */
.app-bulk-bar { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin: var(--s3) 0; background: var(--selected-wash); border: 1px solid var(--interactive-strong); border-radius: var(--radius-panel); }
.app-bulk-bar[hidden] { display: none; }
.app-bulk-count { margin: 0; font-weight: 700; }
.app-bulk-bar form, .app-bulk-bar .app-inline { margin: 0; }
/* palette swatches with their exact hex */
.app-swatches { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s4); list-style: none; margin: 0; padding: 0; }
.app-swatch { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); width: 4.5rem; }
.app-swatch-chip { width: 44px; height: 44px; display: block; border-radius: 6px; box-shadow: 0 0 0 1px var(--hairline); }
.app-swatch-hex { font-size: 0.75rem; color: var(--ink-muted); }
.app-swatch-label { font-size: 0.75rem; color: var(--ink); line-height: 1.3; }
/* the 1 to 5 scale: each choice a full-width row with its figure and anchor */
.app-scale { border: 0; margin: 0 0 var(--s4); padding: 0; min-width: 0; }
.app-scale-legend { font-size: var(--text-section); font-weight: 650; margin-bottom: var(--s1); float: none; width: auto; padding: 0; }
.app-scale-hint { margin: 0 0 var(--s3); color: var(--ink-muted); }
.app-scale-options { display: flex; flex-direction: column; gap: var(--s2); }
.app-scale-option { display: grid; grid-template-columns: auto 1.5rem minmax(0, 1fr); align-items: center; gap: var(--s3); min-height: 48px; padding: var(--s2) var(--s4); border: 1px solid var(--hairline); border-radius: var(--radius-control); background: var(--surface-1); cursor: pointer; }
.app-scale-option:hover { border-color: var(--control-border); }
.app-scale-option:has(input:checked) { border-color: var(--brand-text); box-shadow: inset 3px 0 0 var(--brand-text); background: color-mix(in srgb, var(--brand-strong) 6%, var(--surface-1)); }
.app-scale-option:has(input:focus-visible) { outline: 2px solid var(--interactive-strong); outline-offset: 2px; }
.app-scale-option .form-check-input { margin: 0; }
.app-scale-figure { font-weight: 700; font-variant-numeric: tabular-nums; }
.app-scale-anchor { color: var(--ink); }
/* progress through steps */
.app-stepper { margin: 0 0 var(--s6); }
.app-stepper-title { margin: 0; font-weight: 700; font-size: var(--text-section); }
.app-stepper-count { margin: 0 0 var(--s2); font-size: var(--text-meta); color: var(--ink-muted); text-align: right; }
.app-stepper-title + .app-stepper-count { margin-top: calc(-1 * 1.5em); }
.app-stepper-bar { display: block; width: 100%; height: 6px; border: 0; border-radius: 999px; background: var(--surface-2); appearance: none; -webkit-appearance: none; overflow: hidden; }
.app-stepper-bar::-webkit-progress-bar { background: var(--surface-2); border-radius: 999px; }
.app-stepper-bar::-webkit-progress-value { background: var(--brand-strong); border-radius: 999px; }
.app-stepper-bar::-moz-progress-bar { background: var(--brand-strong); border-radius: 999px; }
/* a notice in place: the tone's bar and mark, the words, the actions at the right */
.app-callout { display: flex; align-items: center; justify-content: space-between; gap: var(--s3) var(--s6); flex-wrap: wrap; padding: var(--s4) var(--s6); margin: 0 0 var(--s6); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-left: 4px solid var(--neutral); border-radius: var(--radius-panel); }
.app-callout-warning { border-left-color: var(--warning); background: color-mix(in srgb, var(--warning) 7%, var(--surface-1)); }
.app-callout-critical { border-left-color: var(--critical); }
.app-callout-success { border-left-color: var(--success); }
.app-callout-text { min-width: 0; flex: 1 1 24rem; }
.app-callout-title { margin: 0; font-weight: 700; }
.app-callout-body { margin-top: var(--s1); color: var(--ink-muted); font-size: var(--text-body); }
.app-callout-body > :last-child { margin-bottom: 0; }
.app-callout-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.app-callout-actions form { margin: 0; }
/* a record's opening: the issue to act on first, then the key facts */
.app-record-summary { margin: 0 0 var(--s6); }
/* a completed step collapsed to one line */
.app-done-line { margin: 0 0 var(--s4); }
.app-done-line > summary { cursor: pointer; list-style: none; display: inline-flex; gap: var(--s3); align-items: center; }
.app-done-line > summary::-webkit-details-marker { display: none; }
.app-done-line > summary::after { content: 'Show'; font-size: var(--text-meta); font-weight: 600; color: var(--interactive-strong); }
.app-done-line[open] > summary::after { content: 'Hide'; }
.app-done-state { display: inline-flex; align-items: center; gap: var(--s2); color: var(--success); font-weight: 600; white-space: nowrap; }
.app-done-state::before { content: '\2713'; font-weight: 800; }

/* === section: money === */
/* The Money section (UX rebuild; WORKFLOWS.md J4, rules 1, 5, 6, 7, 10 and 11). Every class here takes the app- prefix; the
   invoice document's own classes (invoice-doc and its parts, shared with the print view and drawn the same way in the PDF)
   are scoped under the preview card, black ink on white whatever the theme, because it is a document, not interface. */
.app-cash-basis { max-width: 80ch; margin: 0 0 var(--s2); }
.app-breadcrumb { margin: 0 0 var(--s4); font-size: 0.8125rem; }
.app-breadcrumb .breadcrumb { margin: 0; }
.app-breadcrumb .breadcrumb-item.active { color: var(--ink-muted); }
/* what just happened, in words, where the eye already is (rule 1): inline, never only a toast */
.app-body .app-landed, .app-body .app-notice { --tblr-alert-bg: var(--surface-1); --tblr-alert-color: var(--ink); --tblr-alert-border-color: var(--hairline-soft); border-left-width: 3px; padding: var(--s3) var(--s4); margin-bottom: var(--s4); max-width: none; }
.app-body .app-landed.alert-success, .app-body .app-notice.alert-success { border-left-color: var(--success); }
.app-body .app-landed.alert-warning, .app-body .app-notice.alert-warning { border-left-color: var(--warning); }
.app-body .app-landed.alert-danger, .app-body .app-notice.alert-danger { border-left-color: var(--critical); }
.app-body .app-notice.alert-info { border-left-color: var(--info); }
/* a record's head: the status pill, the key facts (at most six), the print and PDF links */
.app-record-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s3) var(--s8); padding: var(--s4); margin-bottom: var(--s6); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-layer); }
.app-record-status { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; min-height: 22px; }
.app-facts { flex: 1 1 24rem; grid-template-columns: max-content minmax(0, 1fr); column-gap: var(--s6); }
.app-facts dt { line-height: 1.5; }
.app-num-inline { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.app-record-tools { display: flex; gap: var(--s2); margin-left: auto; align-self: flex-start; }
.app-advice { margin-bottom: var(--s4); padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-left: 3px solid var(--warning); border-radius: var(--radius-control); font-size: 0.8125rem; }
.app-advice > summary { cursor: pointer; }
.app-advice ul { margin: var(--s2) 0; padding-left: 1.2em; }
/* a disclosure for maintenance below the main job (rule 5): the destructive one at the bottom, named by its summary */
.app-disclosure > summary { cursor: pointer; font-weight: 500; padding: var(--s2) 0; }
.app-disclosure[open] > summary { margin-bottom: var(--s2); }
.app-disclosure.card > summary.card-body { padding: var(--s3) var(--s4); }
.app-destructive { --tblr-card-border-color: var(--hairline); }
.app-danger-zone > summary { color: var(--critical); }
.app-body .btn-outline-danger { --tblr-btn-color: var(--critical); --tblr-btn-border-color: var(--critical); --tblr-btn-hover-bg: var(--critical); --tblr-btn-hover-color: #FFFFFF; }
.app-body .btn-ghost-danger { --tblr-btn-color: var(--critical); --tblr-btn-hover-bg: color-mix(in srgb, var(--critical) 12%, transparent); --tblr-btn-hover-color: var(--critical); }
/* a list's filter row: the controls in a line, their labels above, the apply button beside them */
.app-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3); margin-bottom: var(--s4); }
.app-filters .app-filter { margin: 0; min-width: 12rem; }
.app-filter-actions { display: flex; gap: var(--s2); align-items: center; padding-bottom: 1px; }
/* two fields side by side on a form, one above the other on a phone */
.app-fields-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 0 var(--s3); }
/* a row that opens its record: the first cell's link stretches over the row; any other link in the row stays its own */
.app-table .table tr.app-row-link { position: relative; }
.app-table .table tr.app-row-link a:not(.stretched-link) { position: relative; z-index: 2; }
.app-table .table tr.app-row-link:hover > * { background: var(--selected-wash); }
.app-strong { font-weight: 600; }
/* a figures column's heading is right aligned with its figures, in the interface face, not the figures' */
.app-table .table thead th.app-num { font-family: var(--font-body); }
.app-table .table td.app-nowrap { white-space: nowrap; }
.app-pl-table th[scope="row"] { white-space: nowrap; }
.app-overdue-table td.app-small { font-size: 0.8125rem; min-width: 16em; }
/* a draft's lines, edited in place (the price list's pattern on Settings): a row a line, its figures right aligned */
.app-lines-table td { vertical-align: top; }
.app-table .app-lines-table > :not(caption) > * > * { padding: var(--s1) var(--s2); }
.app-table .app-lines-table > :not(caption) > * > :first-child { padding-left: var(--s4); }
.app-lines-table .app-inline-form { min-width: 8em; }
.app-lines-table .app-input-short { width: 4em; }
.app-lines-table .app-input-money { width: 6em; }
.app-lines-table .app-price { justify-content: flex-end; }
.app-lines-table .app-actions { flex-direction: column; align-items: stretch; gap: var(--s1); }
.app-add-line { max-width: none; }
.app-attention-item + .app-attention-item { border-top: 1px solid var(--hairline-soft); padding-top: var(--s3); margin-top: var(--s3); }
.app-attention-item p { margin: 0 0 var(--s2); }
.app-reminders { padding-left: 1.2em; margin: 0 0 var(--s3); }
.app-log-entry { padding: var(--s2) 0; border-top: 1px solid var(--hairline-soft); }
.app-log-entry > summary { cursor: pointer; }
.app-log-entry[open] > summary { margin-bottom: var(--s2); }
/* the queues on the overview (rule 11): the badge's rows first, the figures after */
.app-queue .card-title { font-size: 1.0625rem; }
.app-section-heading { margin: var(--s2) 0 var(--s3); }
/* the figures: a card each, the figure in the display face, the link at the foot */
.app-money-figures { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
/* a card's own table is never cut off: its cells take the small padding, and the card is wide enough for three columns of figures */
.app-figure-card .app-table .table > :not(caption) > * > * { padding: 0 var(--s2); }
.app-figure-card .app-table .table > :not(caption) > * > :first-child { padding-left: var(--s4); }
.app-figure-card .app-table .table > :not(caption) > * > :last-child { padding-right: var(--s4); }
.app-figure-card .app-table td.app-num, .app-figure-card .app-table td.app-nowrap { white-space: nowrap; }
.app-figure-card { margin-bottom: 0; display: flex; flex-direction: column; }
.app-figure-card .card-body { padding-bottom: var(--s3); }
.app-figure-label { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); margin: 0 0 var(--s1); }
.app-figure-card .app-figure { margin: 0 0 var(--s2); }
.app-figure-card .app-table { border-top: 1px solid var(--hairline-soft); }
.app-figure-card .app-empty { --tblr-empty-padding-md: var(--s4); }
.app-figure-foot { margin-top: auto; padding: var(--s2) var(--s4); font-size: 0.8125rem; background: transparent; border-top: 1px solid var(--hairline-soft); }
/* the invoice preview beside its record: the document on paper, scrolling inside its card on a narrow screen */
.app-record-columns > .col-lg-5 { position: sticky; top: var(--s4); align-self: flex-start; }
@media (max-width: 991.98px) { .app-record-columns > .col-lg-5 { position: static; } }
.app-invoice-preview .app-paper { overflow: auto; background: var(--surface-2); padding: var(--s4); }
.app-invoice-preview .invoice-doc { background: var(--paper); color: var(--paper-ink); padding: 32px; border: 1px solid var(--hairline); max-width: 760px; font-family: var(--font-body); font-size: 14px; line-height: 1.45; display: grid; gap: 20px; }
.app-invoice-preview .invoice-doc p, .app-invoice-preview .invoice-doc h1, .app-invoice-preview .invoice-doc dl { margin: 0; }
.app-invoice-preview .invoice-doc .label { color: var(--paper-muted); font-size: 11px; font-family: var(--font-data); }
.app-invoice-preview .invoice-muted { color: var(--paper-muted); }
.app-invoice-preview .invoice-head { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.app-invoice-preview .invoice-from { display: grid; gap: 2px; align-content: start; }
.app-invoice-preview .invoice-logo { display: block; max-width: 160px; max-height: 48px; width: auto; height: auto; margin-bottom: 12px; }
.app-invoice-preview .invoice-business { font-family: var(--font-display); font-weight: 600; font-size: 19px; line-height: 1.25; margin-bottom: 4px; }
.app-invoice-preview .invoice-meta { display: grid; gap: 8px; justify-items: end; align-content: start; }
.app-invoice-preview .invoice-stamp { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: 0.08em; color: #D95732; }
.app-invoice-preview .invoice-title { font-family: var(--font-display); font-weight: 600; font-size: 28px; line-height: 1.15; text-align: right; color: var(--paper-ink); }
.app-invoice-preview .invoice-kv { display: grid; grid-template-columns: max-content max-content; gap: 4px 16px; }
.app-invoice-preview .invoice-kv dt { font-family: var(--font-data); font-size: 11px; color: var(--paper-muted); align-self: baseline; }
.app-invoice-preview .invoice-kv dd { margin: 0; }
.app-invoice-preview .invoice-kv-meta { justify-content: end; }
.app-invoice-preview .invoice-kv-meta dt { text-align: left; }
.app-invoice-preview .invoice-kv-meta dd { text-align: right; }
.app-invoice-preview .invoice-kv-bank { grid-template-columns: 9em max-content; gap: 4px 24px; }
.app-invoice-preview .invoice-band { display: grid; gap: 4px; }
.app-invoice-preview .invoice-lines { width: 100%; border-collapse: collapse; }
.app-invoice-preview .invoice-lines th, .app-invoice-preview .invoice-lines td { padding: 8px 8px; border-bottom: 1px solid var(--paper-rule); text-align: left; vertical-align: top; }
.app-invoice-preview .invoice-lines th:first-child, .app-invoice-preview .invoice-lines td:first-child { padding-left: 0; }
.app-invoice-preview .invoice-lines th:last-child, .app-invoice-preview .invoice-lines td:last-child { padding-right: 0; }
.app-invoice-preview .invoice-lines thead th { font-family: var(--font-data); font-size: 11px; color: var(--paper-muted); border-bottom: 1px solid var(--paper-rule-strong); }
.app-invoice-preview .invoice-lines .num { text-align: right; white-space: nowrap; }
.app-invoice-preview .invoice-lines .data, .app-invoice-preview .invoice-kv .data, .app-invoice-preview .data-strong { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.app-invoice-preview .data-strong { font-weight: 600; }
.app-invoice-preview .invoice-total { gap: 12px; border-top: 1px solid var(--paper-rule-strong); padding-top: 16px; padding-bottom: 8px; }
.app-invoice-preview .invoice-total-row { display: flex; justify-content: flex-end; align-items: baseline; gap: 24px; }
.app-invoice-preview .invoice-total-label { font-weight: 600; }
.app-invoice-preview .invoice-total-amount { font-size: 16px; }
.app-invoice-preview .invoice-pay { display: flex; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; align-items: flex-start; }
.app-invoice-preview .invoice-pay-text { display: grid; gap: 12px; }
.app-invoice-preview .invoice-card { margin: 0; }
/* the link on the paper is the paper's ink, underlined: the document is white in both themes, so no theme token reads on it */
.app-invoice-preview .invoice-card a { color: var(--paper-ink); font-weight: 600; text-decoration: underline; }
.app-invoice-preview .invoice-foot { border-top: 1px solid var(--paper-rule); padding-top: 12px; text-align: center; }
.app-invoice-preview .invoice-foot p { margin: 0; }
.app-invoice-preview .invoice-qr { width: 112px; flex: 0 0 auto; display: grid; gap: 4px; justify-items: center; }
.app-invoice-preview .invoice-qr svg { width: 112px; height: 112px; display: block; }
.app-invoice-preview .invoice-qr-caption { font-family: var(--font-data); font-size: 11px; }
.app-invoice-preview .invoice-notes { gap: 4px; }
.app-invoice-preview .invoice-statutory { margin-top: 4px; font-size: 12px; }
@media (max-width: 575.98px) { .app-invoice-preview .invoice-doc { padding: 16px; font-size: 13px; } .app-record-head { padding: var(--s3); } .app-record-tools { margin-left: 0; } }
/* on a phone the header's tools (search and the primary action) go beneath the title instead of squeezing it into a column of
   one word a line; this is the shell's header, written here because the Money captures found it (it applies to every section) */
@media (max-width: 575.98px) { .app-page-header .row > .app-header-tools { width: 100%; margin-left: 0 !important; justify-content: space-between; } }
/* === section: pipeline === */
/* The Pipeline section (UX rebuild): the list, the prospect record, the scorecard, the strategy and the trades. Every rule
   here uses the tokens above and Tabler's own card, table and form classes; nothing of the legacy stylesheet is loaded. */
.app-card-lead { border-left: 3px solid var(--interactive); }
.app-card-lead > .card-header { background: var(--selected-wash); }
.app-head-filters { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; margin-left: auto; }
.app-head-filters .app-field { margin-bottom: 0; min-width: 10rem; }
.app-head-filters .form-select, .app-head-filters .form-control { min-height: 32px; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.app-breadcrumb { --tblr-breadcrumb-margin-bottom: var(--s3); font-size: 0.8125rem; }
.app-breadcrumb .breadcrumb-item.active { color: var(--ink); font-weight: 500; }
/* the prospect record's head has classes of its own: Money's record head is a box and Clients' facts run four across, neither meant here */
.app-prospect-head { margin-bottom: var(--s6); }
.app-record-line { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; margin: 0 0 var(--s3); }
.app-prospect-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); max-width: 72ch; }
.app-prospect-facts .app-figure { font-size: 1.5rem; }
.app-timeline { list-style: none; margin: 0; padding: 0; }
.app-timeline li { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--hairline-soft); align-items: baseline; overflow-wrap: anywhere; }
.app-timeline li:last-child { border-bottom: 0; }
.app-timeline-when { font-size: 0.8125rem; color: var(--ink-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.app-disclosure > summary { cursor: pointer; font-weight: 500; padding: var(--s2) 0; list-style: none; }
.app-disclosure > summary::-webkit-details-marker { display: none; }
.app-disclosure > summary::before { content: '+'; display: inline-block; width: 1.2em; color: var(--ink-subtle); font-family: var(--font-data); }
.app-disclosure[open] > summary::before { content: '-'; }
.app-disclosure-card > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3); }
.app-disclosure-card > summary::-webkit-details-marker { display: none; }
.app-disclosure-card > summary::after { content: 'Show'; margin-left: auto; font-size: 0.8125rem; font-weight: 500; color: var(--interactive-strong); }
.app-disclosure-card[open] > summary::after { content: 'Hide'; }
.app-proposals { display: flex; flex-direction: column; gap: var(--s4); }
.app-proposal { margin-bottom: 0; }
.app-proposal .card-title a { color: inherit; text-decoration: none; }
.app-proposal .card-title a:hover { text-decoration: underline; }
.app-proposal-diff th[scope="row"] { width: 28%; color: var(--ink-muted); font-weight: 500; }
.app-proposal-words p { max-width: 68ch; }
.app-proposal-controls { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-inline { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.app-reject .form-control { width: 16rem; max-width: 100%; }
.app-choice { max-width: var(--form-width); }
.app-choice-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--s1) var(--s4); max-height: 18rem; overflow-y: auto; padding: var(--s2) var(--s3); border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); background: var(--surface-1); }
.app-choice-list .form-check { margin: 0; }
.app-choice-list [data-filter-item][hidden] { display: none; }
.app-add-area { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; gap: var(--s3); align-items: end; }
.app-add-area .app-field { margin-bottom: 0; }
.app-add-area .btn { height: var(--control-height); }
.app-areas td.app-num { white-space: nowrap; }
.app-live-line { min-height: 1.5rem; }
.app-live-line p { margin: 0; }
.app-alias-list li { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-form-wide { max-width: none; }
.app-form-wide .app-field, .app-form-wide .app-form-footer { max-width: var(--form-width); }
.app-editor-table .form-control, .app-editor-table .form-select { min-width: 6rem; }
/* the scorecard editor in human terms: what a criterion reads, its figures as labelled boxes beneath it */
.app-editor-table td.app-wrap { min-width: 20rem; padding-top: var(--s2) !important; padding-bottom: var(--s2) !important; height: auto !important; }
.app-kind-fields { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); margin-top: var(--s1); }
.app-kind-fields:empty { display: none; }
.app-arg { display: inline-flex; align-items: center; gap: var(--s1); font-size: 0.8125rem; color: var(--ink-muted); white-space: nowrap; margin: 0; }
.app-editor-table .app-arg .form-control { min-width: 0; width: 5em; }
.app-scores { max-width: 32rem; }
.app-nearest td.app-wrap { min-width: 12rem; }
@media (max-width: 991.98px) { .col-drop { display: none; } }
@media (max-width: 575.98px) {
  .app-add-area { grid-template-columns: 1fr; }
  .app-timeline li { grid-template-columns: 1fr; gap: var(--s1); }
  .app-head-filters { margin-left: 0; width: 100%; }
  .app-head-filters .app-field { min-width: 0; flex: 1 1 8rem; }
}
.app-tabular { font-variant-numeric: tabular-nums; }
.app-inline .form-select { width: auto; }
.app-inline .btn { white-space: nowrap; flex: none; }
/* === section: home and clients === */
/* Home, a queue (WORKFLOWS.md rule 3): a row a decision, what it is on the left, how long it has waited beneath, the action on the right. */
.app-queue-list, .app-timeline, .app-running-list { margin: 0; padding: 0; }
.app-queue-item { display: flex; align-items: center; gap: var(--s4); padding: var(--s3) var(--s4); }
.app-queue-main { flex: 1 1 auto; min-width: 0; }
.app-queue-what { display: block; margin: 0; overflow-wrap: anywhere; }
.app-queue-meta { display: block; margin: var(--s1) 0 0; }
.app-queue-act { flex: none; }
.app-queue-form { margin: 0; }
.app-queue-costly { box-shadow: inset 3px 0 0 var(--critical); }
.app-queue-costly strong { color: var(--critical); }
.app-finding-overdue { box-shadow: inset 3px 0 0 var(--warning); }
/* FIX-ROUND-24 item 7: the findings as rows, the overdue marked at the row's edge */
.app-findings-table tr.app-finding-overdue > :first-child { box-shadow: inset 3px 0 0 var(--warning); }
.app-findings-table tr.app-finding-overdue { box-shadow: none; }
.app-running-item { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s4); min-height: 36px; }
.app-figures .card, .app-panels .card { margin-bottom: 0; height: 100%; }
.app-figures, .app-panels { margin-bottom: var(--s6); }
.app-figure-title { font-family: var(--font-body); font-size: 0.8125rem; font-weight: 400; color: var(--ink-muted); margin: 0 0 var(--s1); }
.app-figure-card .app-figure { margin: 0 0 var(--s1); }
.app-counts { margin: 0; }
@media (max-width: 575.98px) { .app-queue-item { flex-direction: column; align-items: flex-start; gap: var(--s2); } }

/* The client list: a filter row, the current sort marked, every row clickable to its record (DESIGN-BRIEF section 5). */
.app-filters { display: flex; gap: var(--s3); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--s4); }
.app-filter { flex: 1 1 14rem; max-width: 20rem; }
.app-filter .form-label { margin-bottom: var(--s1); }
.app-filter-actions { flex: 0 0 auto; max-width: none; display: flex; gap: var(--s2); align-items: center; }
.app-table thead th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s1); }
.app-table thead th a:hover { color: var(--ink); }
.app-table thead th.app-sorted a { color: var(--interactive-strong); }
.app-sort-mark { color: var(--interactive); }
.app-table-rows tbody tr { position: relative; }
.app-table-rows tbody tr:hover > * { background: var(--selected-wash); }
.app-row-name { font-weight: 500; }
/* the row's own controls sit above its stretched link, so Edit and Remove are pressable */
.app-row-actions { position: relative; z-index: 2; }
.app-row-actions form { margin: 0; }
.app-pager { display: flex; gap: var(--s2); align-items: center; }
.app-skeleton { display: flex; flex-direction: column; gap: var(--s2); }
.app-skeleton-row { height: var(--row-height); background: var(--surface-2); position: relative; overflow: hidden; }
.app-skeleton-row::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--surface-1), transparent); animation: app-shimmer 1.4s infinite; }
@keyframes app-shimmer { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .app-skeleton-row::after { animation: none; } }
.app-region-error { border-left: 3px solid var(--critical); }

/* The client record: the breadcrumb below the second level, tabs under the title, the key facts, panels one subject each, the destructive action last. */
.app-crumbs { margin-bottom: var(--s3); font-size: 0.8125rem; }
/* a record's name on a phone: the search and the record's actions go beneath the title rather than squeezing it */
@media (max-width: 575.98px) { body[data-anatomy="record"] .app-page-header .row > .col-auto.app-header-tools { flex: 1 1 100%; margin-left: 0 !important; } }
.app-record-tabs { margin-bottom: var(--s6); }
.app-record-tabs .nav-tabs { border-bottom-color: var(--hairline); }
.app-record-tabs .nav-link { color: var(--ink-muted); font-weight: 500; min-height: 36px; gap: var(--s2); }
.app-record-tabs .nav-link:hover { color: var(--ink); }
.app-record-tabs .nav-link.active { color: var(--interactive-strong); border-color: var(--hairline) var(--hairline) var(--surface-1); background: var(--surface-1); }
.app-record-facts { column-gap: var(--s6); }
@media (min-width: 768px) { .app-record-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr); } }
.app-panel-row { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s4); min-height: 36px; }
.app-panel-main { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: baseline; }
.app-panel-detail { overflow-wrap: anywhere; }
.app-card-foot { margin: 0; padding: var(--s2) var(--s4) var(--s3); }
.app-tag { display: inline-block; padding: 0 var(--s2); border: 1px solid var(--hairline-strong); border-radius: var(--radius-control); font-size: 0.75rem; line-height: 18px; color: var(--ink-muted); vertical-align: middle; white-space: nowrap; }
.app-tag-success { color: var(--success); border-color: currentColor; }
.app-notes { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 68ch; }
.app-checklist .card-header { box-shadow: inset 3px 0 0 var(--warning); }
.app-danger { --tblr-card-border-color: var(--critical); }
.app-danger .card-title { color: var(--critical); }
.app-timeline-item { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s3); padding: var(--s2) var(--s4); align-items: baseline; }
.app-timeline-when { font-size: 0.8125rem; color: var(--ink-muted); white-space: nowrap; }
.app-timeline-what { overflow-wrap: anywhere; }
@media (max-width: 575.98px) { .app-timeline-item { grid-template-columns: 1fr; gap: 2px; } }
.app-fieldset { border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); padding: var(--s3) var(--s4) 0; margin: 0 0 var(--s4); }
.app-fieldset-title { float: none; width: auto; font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; padding: 0; margin-bottom: var(--s2); }
.app-revealed { font-family: var(--font-data); color: var(--critical); font-weight: 600; }
.app-erasure-counts { margin: 0; padding-left: 1.2em; }
.app-body .card-header .app-count { margin-left: var(--s1); }
/* === section: agents === */
/* the queue rows (Needs you, Running now, the team): the title as the link, who and when beneath, the actions at the right */
.app-card-item { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s2) var(--s4); padding: var(--s3) var(--s4); }
.app-card-head { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 24em; }
.app-card-title { font-weight: 500; color: var(--ink); overflow-wrap: anywhere; }
.app-card-head > .app-pill { align-self: flex-start; }
a.app-card-title { color: var(--interactive-strong); }
.app-card-actions { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-card-actions .app-pill, .app-card-head + .app-actions .app-pill { margin-right: var(--s1); }
.app-reject-form { display: inline-flex; align-items: center; gap: var(--s1); }
.app-reject-form .form-control-sm { width: 14em; }
.app-queue .card-header .card-title { font-size: 1.125rem; }
.app-queue .app-cards + .app-cards { border-top: 1px solid var(--hairline-soft); }
.app-empty-line { margin: 0; padding: var(--s4); }
/* a run in flight: the step it is on in words, the counts so far as figures, the waiting line beneath */
.app-run-step { margin: 0; font-size: 0.9375rem; }
.app-run-live .card-body > .app-run-step { font-size: 1.0625rem; font-weight: 500; margin-bottom: var(--s3); }
/* counts as label and figure pairs that wrap: one pair a row on a phone, three or four on a desktop */
.app-kv-counts { display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr) 4.5em); gap: var(--s2) var(--s4); margin-bottom: var(--s3); align-items: baseline; }
.app-kv-counts dt { font-size: 0.8125rem; }
.app-kv-counts dd { font-family: var(--font-data); font-variant-numeric: tabular-nums; text-align: right; padding-right: var(--s3); }
.app-run-live .card-header { align-items: center; }
.app-run-live .card-header .card-title { margin-right: var(--s2); }
.app-run-outcome { margin: 0 0 var(--s3); font-weight: 500; }
.app-run-result .app-h2 { margin-top: var(--s6); margin-bottom: var(--s2); }
.app-run-result .app-h2:first-child { margin-top: 0; }
.app-run-result .app-table { margin-bottom: var(--s3); }
.app-run-result .table-responsive { border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); }
.app-agree-form { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin: var(--s3) 0 var(--s6); }
.app-agree-form .app-small { max-width: 44em; }
.app-agreed { display: flex; align-items: center; gap: var(--s2); margin: var(--s3) 0 0; font-weight: 500; }
.app-reasons { margin: 0 0 var(--s3); padding-left: 1.2em; font-size: 0.875rem; }
.app-reasons li { margin-bottom: var(--s1); overflow-wrap: anywhere; }
.app-result-foot { margin: var(--s4) 0 0; }
.app-run-asked { margin-top: var(--s6); }
.app-run-note { margin: var(--s3) 0 0; font-size: 0.875rem; }
/* the step log, collapsed behind a disclosure: each step a row, the details beneath, the end set apart */
.app-disclosure > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3); }
.app-disclosure > summary::-webkit-details-marker { display: none; }
.app-disclosure > summary::before { content: '+'; display: inline-block; width: 1em; color: var(--ink-subtle); font-family: var(--font-data); }
.app-disclosure[open] > summary::before { content: '-'; }
.app-disclosure-plain { margin: 0 var(--s4) var(--s4); }
.app-disclosure-plain > summary { cursor: pointer; color: var(--interactive-strong); }
.app-disclosure-plain > pre { margin-top: var(--s2); }
.app-notes-log { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s1); font-size: 0.8125rem; overflow-wrap: anywhere; }
.app-notes-log .app-notes-head { color: var(--ink-subtle); font-weight: 500; margin-top: var(--s2); }
.app-notes-log .app-notes-step { font-weight: 500; padding-left: 1.4em; position: relative; }
.app-notes-log .app-notes-step::before { content: ''; position: absolute; left: 0.2em; top: 0.45em; width: 0.6em; height: 0.6em; border: 1px solid var(--ink-subtle); border-radius: 2px; }
.app-notes-log .app-notes-step.app-is-done::before { background: var(--success); border-color: var(--success); }
.app-notes-log .app-notes-detail { padding-left: 2.6em; color: var(--ink-muted); }
.app-notes-log .app-notes-answer { font-family: var(--font-data); white-space: pre-wrap; color: var(--ink-muted); padding-left: 1.4em; }
.app-notes-end { margin: var(--s3) 0 0; font-weight: 500; font-size: 0.875rem; }
.app-notes-end-done { color: var(--success); }
.app-notes-end-stopped { color: var(--critical); }
/* the conversation: your message right of the agent's, the working row with its spinner */
.app-messages { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s3); }
.app-msg { max-width: 68ch; padding: var(--s3) var(--s4); border-radius: var(--radius-layer); background: var(--surface-2); }
.app-msg-user { align-self: flex-end; background: var(--selected-wash); }
.app-msg-who { margin: 0 0 var(--s1); }
.app-msg-text p { margin: 0 0 var(--s2); }
.app-msg-text p:last-child { margin-bottom: 0; }
.app-msg-working { border: 1px dashed var(--hairline); background: transparent; }
.app-thread-row { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; }
/* the approval card: the before-and-after table, the one primary decision and the reason inline beside Reject */
.app-decide { align-items: flex-start; gap: var(--s4); }
.app-decide .app-reject-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s1); }
.app-decide .app-reject-form .app-actions { flex-wrap: nowrap; }
.app-decide .app-reject-form .form-control { width: 18em; }
.app-decide .app-reject-form .form-label { margin-bottom: 0; }
/* the figures row and the team on the Command Centre */
.app-figures .app-kv { grid-template-columns: minmax(0, 1fr) max-content; }
.app-form-wide { max-width: none; }
/* a control inside a row sits on the row's line: the shared inline form stacks its children, a row's controls do not */
.app-card-actions .app-inline-form, .app-run-live .card-header .app-inline-form, .app-agree-form { flex-direction: row; align-items: center; gap: var(--s2); }
.app-card-actions .app-reject-form { flex-wrap: nowrap; }
/* a result column keeps a readable measure; the table scrolls inside its wrapper on a phone rather than wrapping a word a line */
#latest td.app-wrap, .app-list-table td.app-wrap { min-width: 16em; }
@media (max-width: 575.98px) {
  .app-card-item { flex-direction: column; align-items: stretch; }
  .app-card-head { flex: 0 0 auto; }
  .app-card-actions .app-reject-form { flex-wrap: wrap; }
  .app-reject-form .form-control-sm, .app-decide .app-reject-form .form-control { width: 100%; }
  .app-decide .app-reject-form .app-actions { flex-wrap: wrap; }
}
/* === section: builds === */
/* The Builds section (UX rebuild): the breadcrumb trail below the second level, the tabs on a site record, a row that is
   entirely its record's link, a list's filter row and sort, the key facts of a record, the hours ledger, the live deploy
   row, the marks on the shelf, and the fields laid in a row or a grid on the wider forms. */
.app-crumbs { margin: 0 0 var(--s3); }
.app-crumbs .breadcrumb { --tblr-breadcrumb-divider: '\203A'; --tblr-breadcrumb-item-padding-x: var(--s2); font-size: 0.8125rem; margin: 0; }
.app-crumbs .breadcrumb-item a { color: var(--ink-muted); text-decoration: none; }
.app-crumbs .breadcrumb-item a:hover { color: var(--interactive-strong); text-decoration: underline; }
.app-crumbs .breadcrumb-item.active { color: var(--ink); }
.app-crumbs .breadcrumb-item + .breadcrumb-item::before { color: var(--ink-subtle); }
.app-tabs { margin: 0 0 var(--s6); }
.app-tabs .nav-tabs { border-bottom-color: var(--hairline); }
.app-tabs .nav-link { color: var(--ink-muted); font-weight: 500; min-height: 36px; padding-top: var(--s2); padding-bottom: var(--s2); border-radius: var(--radius-control) var(--radius-control) 0 0; }
.app-tabs .nav-link:hover { color: var(--ink); border-color: var(--hairline-soft) var(--hairline-soft) var(--hairline); }
.app-tabs .nav-link.active { color: var(--interactive-strong); background: var(--surface-1); border-color: var(--hairline) var(--hairline) var(--surface-1); }
.app-tabs .app-count { margin-left: var(--s1); }
/* a row that is its record's link: the name cell holds the link, the row stretches it, every other link sits above it */
.app-table .table tr.app-row { position: relative; }
.app-table .table tr.app-row:hover > * { background: var(--selected-wash); }
.app-row-link { font-weight: 500; color: var(--ink); text-decoration: none; }
.app-row-link::after { content: ''; position: absolute; inset: 0; }
.app-row-link:hover { color: var(--interactive-strong); text-decoration: underline; }
.app-table .table tr.app-row a:not(.app-row-link), .app-table .table tr.app-row form, .app-table .table tr.app-row button { position: relative; z-index: 1; }
/* the filter row of a list: the values as links with their counts, the sort beside them, a short form where text is typed */
.app-filter-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s3) var(--s6); flex-wrap: wrap; margin: 0 0 var(--s4); }
.app-filter .nav-pills { gap: var(--s1); }
.app-filter .nav-link { --tblr-nav-link-padding-y: 0.25rem; --tblr-nav-link-padding-x: var(--s3); color: var(--ink-muted); font-size: 0.8125rem; font-weight: 500; border: 1px solid transparent; border-radius: var(--radius-control); min-height: 32px; }
.app-filter .nav-link:hover { color: var(--ink); background: var(--surface-2); }
.app-filter .nav-link.active { color: var(--interactive-strong); background: var(--selected-wash); border-color: var(--interactive-strong); }
.app-filter .app-count { font-size: 0.75rem; }
.app-sort { display: flex; align-items: center; gap: var(--s2); font-size: 0.8125rem; color: var(--ink-muted); }
.app-sort-link { padding: 0 var(--s1); color: var(--ink-muted); text-decoration: none; min-height: 32px; display: inline-flex; align-items: center; border-bottom: 2px solid transparent; }
.app-sort-link:hover { color: var(--ink); }
.app-sort-link.active { color: var(--interactive-strong); border-bottom-color: var(--interactive-strong); }
.app-filter-form { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; }
.app-filter-form .app-field { margin-bottom: 0 !important; min-width: 12rem; }
.app-filter-form-actions { display: flex; gap: var(--s2); align-items: center; min-height: var(--control-height); }
/* a record's key facts: two columns on a wide screen, one on a phone */
.app-kv-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); column-gap: var(--s6); }
@media (min-width: 768px) { .app-kv-facts { grid-template-columns: minmax(0, max-content) minmax(0, 1fr) minmax(0, max-content) minmax(0, 1fr); } }
.app-num-inline { font-family: var(--font-data); font-variant-numeric: tabular-nums; }
.app-strong { font-weight: 600; }
.app-alert { border-radius: var(--radius-layer); font-size: 0.875rem; margin-bottom: var(--s4); }
.app-alert.alert-warning { --tblr-alert-color: var(--warning); border-left: 3px solid var(--warning); }
.app-alert.alert-danger { --tblr-alert-color: var(--critical); border-left: 3px solid var(--critical); }
.app-alert.alert-success { --tblr-alert-color: var(--success); border-left: 3px solid var(--success); }
.app-inline-action { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.app-record-foot { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--hairline-soft); }
.app-disclosure { margin-bottom: var(--s6); }
.app-disclosure > summary { cursor: pointer; font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); padding: var(--s2) 0; }
.app-disclosure > summary:hover { color: var(--ink); }
.app-disclosure-body { margin-top: var(--s3); }
.app-field-message { color: var(--critical); font-size: 0.8125rem; margin: 0 0 var(--s3); }
/* the hours ledger: the two-by-two summary, the form in one row, the stints */
.app-hours-summary th { width: 32%; color: var(--ink-muted); font-weight: 500; }
.app-fields-row { display: flex; gap: var(--s3); flex-wrap: wrap; }
.app-fields-row > .app-field { flex: 1 1 10rem; min-width: 0; }
.app-fields-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 0 var(--s3); }
.app-hours-table td.app-wrap { min-width: 9em; }
/* a build's cost so far (DECISIONS 228): the figure in the panel's header, right-aligned in the figure face, then the breakdowns, each table captioned above it */
.app-cost-figure { margin-left: auto; font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.app-cost-figure.app-ink-muted { font-family: var(--font-body); font-size: 0.875rem; font-weight: 500; }
.app-cost-caption { caption-side: top; padding: var(--s3) var(--s4) var(--s1); font-size: 0.8125rem; font-weight: 500; color: var(--ink-muted); }
.app-cost-table td:first-child { width: 70%; }
.app-build-cost-table th[scope="row"] { font-weight: 500; min-width: 16em; }
/* words in a figure's place ("not metered (Desktop)", "none given", "none yet") are read, not compared: the interface face, not the data face */
.app-table .table.app-builds-table td.app-num span, .app-table .table.app-build-cost-table td.app-num .app-ink-subtle { font-family: var(--font-body); }
/* the deploy running: the row is marked, the state is the waiting line, the expected one says so above the table */
.app-deploys-table tr[data-working] > td { background: color-mix(in srgb, var(--warning) 6%, transparent); }
.app-deploy-expected { padding: var(--s3) var(--s4); border-bottom: 1px solid var(--hairline-soft); }
.app-deploys-table td.app-wrap { min-width: 14em; }
/* the shelf: the proven count with its marks, the fingerprint and the scores as short runs of words */
.app-marks { display: flex; align-items: center; gap: var(--s3) var(--s4); flex-wrap: wrap; margin: 0 0 var(--s4); }
.app-marks-lead { margin: 0; }
.app-marks-list { display: flex; gap: var(--s2); flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.app-marks-list .app-mark { display: inline-flex; align-items: center; gap: var(--s1); font-size: 0.8125rem; color: var(--ink-muted); padding: 0 var(--s2); min-height: 22px; border: 1px solid var(--hairline); border-radius: var(--radius-control); }
.app-mark-count { font-family: var(--font-data); font-weight: 600; color: var(--ink); }
.app-marks-list .app-mark-met { color: var(--success); border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); }
.app-mark-met .app-mark-count { color: var(--success); }
.app-fingerprint { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.app-fingerprint strong { font-weight: 500; color: var(--ink-muted); }
.app-score { display: inline-block; margin-right: var(--s2); }
.app-register-table td.app-wrap { min-width: 14em; }
.app-shelf-table td.app-wrap { min-width: 12em; }
.app-rubric-table td.app-wrap { min-width: 10em; }
@media (max-width: 575.98px) { .app-filter-row { align-items: stretch; } .app-kv-facts { grid-template-columns: minmax(0, 1fr); } .app-kv-facts dt { line-height: 1.3; margin-top: var(--s2); } }
/* the page header on a phone: the title and its lead take the full width, the search and the primary action below them */
@media (max-width: 575.98px) { .app-page-header .row > .col { flex: 0 0 100%; max-width: 100%; } }
/* a numeric column's heading is a word, in the interface face; the hours summary only as wide as its figures */
.app-table .table thead th.app-num { font-family: var(--font-body); }
.app-table .table.app-hours-summary { width: auto; min-width: 24rem; }
/* the stints keep their columns on a phone and the table scrolls sideways, rather than wrapping a date over three lines */
.app-table .table.app-deploys-table, .app-table .table.app-register-table { min-width: 40rem; }
.app-table .table.app-hours-table td:first-child { white-space: nowrap; }
.app-table .table.app-hours-summary tbody tr:last-child > * { border-bottom: 0; }
.app-filter .app-count { margin-left: var(--s1); }
/* the shelf and the register at full width: a date, a key and a ceiling on one line, the trade column wide enough to read */
.app-shelf-table td:first-child { min-width: 11em; }
.app-shelf-table td.app-num, .app-builds-table td.app-num, .app-register-table td:first-child { white-space: nowrap; }
.app-register-table td:nth-child(2) { min-width: 12em; }
.app-register-table td:nth-child(3) { min-width: 10em; }
/* Scout v2, decision first (SCOUT-V2-SPEC 4.15): the week's list as rows to decide, the not-selected with why, the report behind a disclosure */
.app-decision-list, .app-not-selected-list { list-style: none; margin: 0 0 var(--s4); padding: 0; display: grid; gap: var(--s3); }
.app-decision-row, .app-not-selected-row { display: flex; gap: var(--s4); align-items: flex-start; justify-content: space-between; padding: var(--s3) var(--s4); border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); background: var(--surface-1); }
.app-decision-row[data-decision="agree"] { border-left: 4px solid var(--success); }
.app-decision-row[data-decision="reject"] { border-left: 4px solid var(--tblr-danger); opacity: 0.85; }
.app-decision-main { min-width: 0; flex: 1 1 auto; }
.app-decision-head { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); align-items: baseline; }
.app-decision-name { font-weight: 600; font-size: 1.0625rem; }
.app-decision-reason { margin: var(--s1) 0 0; }
.app-decision-warning { margin: var(--s1) 0 0; color: var(--warning); font-weight: 500; }
.app-warning-mark { display: inline-block; width: 1.1em; height: 1.1em; line-height: 1.1em; text-align: center; border-radius: 50%; background: var(--warning); color: var(--canvas); font-size: 0.75rem; font-weight: 700; }
.app-decision-score { margin: var(--s1) 0 0; font-size: 0.875rem; }
.app-score-label { color: var(--ink-muted); }
.app-score-figure { font-weight: 600; font-size: 1rem; }
.app-decision-actions { display: flex; flex-direction: column; align-items: flex-end; gap: var(--s2); flex: 0 0 auto; }
.app-decision-actions .app-inline-form { flex-direction: row; align-items: center; gap: var(--s2); }
.app-decision-actions .form-select-sm { min-width: 13em; }
.app-decision-progress { font-weight: 500; margin: 0 0 var(--s3); }
.app-not-selected-row { flex-direction: column; gap: var(--s1); }
.app-report-details > summary { display: flex; align-items: baseline; gap: var(--s3); cursor: pointer; list-style: none; }
.app-report-details > summary::-webkit-details-marker { display: none; }
.app-report-details > summary .app-h2 { margin: var(--s6) 0 var(--s2); }
.app-report-details[open] > summary .app-h2::after { content: ''; }
.app-prospect-notice { margin-bottom: var(--s4); }
.app-prospect-notice .app-actions { margin-top: var(--s2); }
.app-selection-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s2) var(--s4); }
.app-marks-progress { display: block; width: 100%; height: 0.5rem; margin: var(--s2) 0; appearance: none; border: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); accent-color: var(--brand); }
.app-marks-progress::-webkit-progress-bar { background: var(--surface-2); }
.app-marks-progress::-webkit-progress-value { background: var(--brand); }
.app-marks-progress::-moz-progress-bar { background: var(--brand); }
.app-mark-form { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }
/* phones (390 wide): one column, the controls under the words, the select full width */
@media (max-width: 575.98px) {
  .app-decision-row { flex-direction: column; gap: var(--s3); }
  .app-decision-actions { align-items: stretch; width: 100%; }
  .app-decision-actions .app-inline-form { flex-wrap: wrap; }
  .app-decision-actions .form-select-sm { flex: 1 1 100%; min-width: 0; }
  .app-decision-actions .btn { flex: 1 1 auto; }
  .app-prospect-facts { grid-template-columns: 1fr; }
  .app-prospect-facts dt { margin-top: var(--s2); }
  .app-surveys-table, .app-selections-table { min-width: 36rem; }
}

/* ---- UX round 1: Home, proposals, Agents, phone, dark (UX-ROUND-1.md) ---- */
/* Needs you: the type word with its severity, never colour alone; the Urgent filter; the compact table past fifteen (2.1) */
.app-queue-type { display: inline-block; padding: 0 var(--s2); margin-right: var(--s1); border-radius: 3px; font-size: 0.75rem; font-weight: 600; line-height: 1.5; letter-spacing: 0.01em; border: 1px solid currentColor; vertical-align: 0.1em; }
.app-queue-type-info { color: var(--info); }
.app-queue-type-warning { color: var(--warning); }
.app-queue-type-critical { color: var(--critical); }
.app-queue-critical { box-shadow: inset 3px 0 0 var(--critical); }
.app-queue-filters { display: inline-flex; gap: var(--s3); }
.app-queue-filters a.active { font-weight: 600; text-decoration: underline; }
.app-queue-table td { vertical-align: top; }
/* Reject change: the one reason field opens on request (2.2) */
.app-reject-details { display: inline-block; }
.app-reject-details > summary { list-style: none; }
.app-reject-details > summary::-webkit-details-marker { display: none; }
.app-reject-details[open] > summary { margin-bottom: var(--s2); }
.app-reject-details .app-reject-form { display: block; padding: var(--s3); border: 1px solid var(--hairline-soft); border-radius: var(--radius, 6px); background: var(--surface-2); max-width: 36em; }
.app-reject-heading { font-weight: 600; margin-bottom: var(--s2); }
.app-proposal-compact .card-title { font-size: 1rem; }
/* the run result's tabs (2.8): the chosen tab is an attribute on the polled region, so a refresh keeps it; without the script every part shows */
.app-local-tabs { margin-bottom: var(--s3); }
.app-local-tabs .nav-link { cursor: pointer; }
.app-run-summary { margin: 0 0 var(--s2); font-weight: 500; }
#run-region[data-show="results"] [data-tab-panel]:not([data-tab-panel="results"]),
#run-region[data-show="reasons"] [data-tab-panel]:not([data-tab-panel="reasons"]),
#run-region[data-show="log"] [data-tab-panel]:not([data-tab-panel="log"]) { display: none; }
/* phone (2.10): one line, one line, an action */
@media (max-width: 575.98px) {
  /* the task itself wraps, so its count and area always show (UX fix 2, item 1); the meta line stays one line */
  .app-queue-meta { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
  .app-queue-what { overflow-wrap: anywhere; }
  .app-queue-item .app-queue-act { align-self: flex-end; }
}

/* UX round 1: settings and jobs */
/* The Settings index (UX-ROUND-1 2.5): a search box over the groups, two columns of compact cards from 992px, one below;
   the module's block is a disclosure spanning both columns, closed until a hash, a save or a search lands inside it. */
.app-settings-search { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s4); }
.app-settings-search .form-control { max-width: 24rem; }
.app-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s4); align-items: start; }
.app-settings-grid > [data-filter-item][hidden], .app-settings-module-body > [data-filter-item][hidden] { display: none; }
details.app-settings-module { grid-column: 1 / -1; margin-bottom: var(--s6); }
details.app-settings-module > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--s3); padding: var(--s3) 0; font-size: 0.875rem; font-weight: 600; color: var(--ink); }
details.app-settings-module > summary::-webkit-details-marker { display: none; }
details.app-settings-module > summary::before { content: '+'; display: inline-block; width: 1em; color: var(--ink-subtle); font-family: var(--font-data); }
details.app-settings-module[open] > summary::before { content: '-'; }
details.app-settings-module > summary .app-count { margin-left: 0; }
.app-settings-module-body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 var(--s4); align-items: start; margin-top: var(--s3); }
@media (min-width: 992px) {
  .app-settings-grid, .app-settings-module-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .app-settings-grid .app-settings-table th { width: 40%; }
}
/* the saved highlight fades (2.5): held for a moment where the eye already is, then plain after about three seconds; the
   class stays so the mark beside the heading stays. A person who asked for no motion gets the plain state at once. */
@keyframes app-saved-fade-header { 0%, 60% { box-shadow: inset 3px 0 0 var(--success); } 100% { box-shadow: none; } }
@keyframes app-saved-fade-wash { 0%, 60% { background-color: var(--selected-wash); } 100% { background-color: transparent; } }
.app-settings-group-saved .card-header { box-shadow: none; animation: app-saved-fade-header 3.2s ease-out both; }
.app-settings-group-saved .app-settings-table tbody > tr > * { background: transparent; animation: app-saved-fade-wash 3.2s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .app-settings-group-saved .card-header, .app-settings-group-saved .app-settings-table tbody > tr > * { animation: none; }
}
/* The Jobs page (2.6; tidied 20 October 2026, Adam: "no hierarchy at all"): one row a job, the title first, its schedule
   beneath in the quiet style, what it does folded under "What it does"; the last result is a pill with its time, linked to
   the run; a failing job's What to do holds Retry only where a second run is safe. */
.app-job-title { display: block; font-weight: 600; }
.app-job-when { display: block; margin-top: 2px; }
.app-job-about { margin-top: var(--s1); font-size: 0.8125rem; }
.app-job-about > summary { color: var(--ink-muted); }
.app-job-about p, .app-job-about ul { margin: var(--s1) 0 0; }
/* on a phone each job is a block: the title, the schedule, what it does, then the last result, the next run and Run now beneath, each named */
@media (max-width: 575.98px) {
  .app-jobs-table thead { display: none; }
  .app-jobs-table tbody tr { display: block; padding: var(--s3); border-top: 1px solid var(--hairline-soft); }
  .app-jobs-table.table > tbody > tr > td, .app-jobs-table tbody tr > td.app-job-cell { display: block; border: 0; padding: 0; height: auto; min-width: 0; max-width: none; }
  .app-jobs-table.table > tbody > tr > td + td { margin-top: var(--s2); font-size: 0.8125rem; }
  .app-jobs-table.table > tbody > tr > td form { margin: 0; }
  /* the failing table the same way: the job, when, why and what to do as a block */
  .app-failing-table thead { display: none; }
  .app-failing-table.table > tbody > tr { display: block; padding: var(--s3); }
  .app-failing-table.table > tbody > tr > td { display: block; border: 0; padding: 0; height: auto; white-space: normal; }
  .app-failing-table.table > tbody > tr > td + td { margin-top: var(--s2); }
  .app-failing-table td.app-failing-job { font-weight: 600; }
  .app-failing-table td.app-failing-when::before { content: 'Last failed: '; color: var(--ink-muted); }
  .app-failing-table td.app-failing-why::before { content: 'Why: '; color: var(--ink-muted); }
  .app-jobs-table td.app-job-next { white-space: normal; }
  .app-jobs-table td.app-job-result::before { content: 'Last result: '; color: var(--ink-muted); }
  .app-jobs-table td.app-job-next::before { content: 'Next run, London time: '; color: var(--ink-muted); }
}
.app-job-last { display: inline-flex; align-items: center; gap: var(--s2); text-decoration: none; color: inherit; }
.app-job-last:hover .app-small { text-decoration: underline; }
.app-job-todo { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.app-job-todo form { margin: 0; }
.app-jobs-table td.app-job-next { white-space: nowrap; }

/* quiet metadata (2.11): a time stamp is metadata unless it is the point */
time.app-when { color: var(--ink-muted); }
.app-queue-item time.app-when, .card-title time.app-when, h1 time.app-when { color: inherit; }
/* the prospect-to-sale record (2.9) */
.app-journey-steps { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); list-style: none; margin: 0; padding: var(--s3) var(--s4); counter-reset: step; }
.app-journey-step { display: flex; flex-direction: column; min-width: 9em; border-left: 2px solid var(--hairline); padding-left: var(--s3); }
.app-journey-step .app-journey-mark { font-weight: 700; }
.app-journey-done { border-left-color: var(--success); }
.app-journey-done .app-journey-mark { color: var(--success); }
.app-journey-lost { border-left-color: var(--critical); }
.app-journey-lost .app-journey-mark { color: var(--critical); }
.app-journey-pending .app-journey-label, .app-journey-pending .app-journey-mark { color: var(--ink-subtle); }
/* bulk park and saved filters (2.12) */
.app-select-col { width: 2.5em; }
.app-bulk-footer { align-items: end; }
.app-bulk-footer .mb-3 { margin-bottom: 0 !important; }
.app-saved-filters { display: flex; gap: var(--s3); align-items: baseline; flex-wrap: wrap; margin-right: var(--s4); }
.app-saved-filters a.active { font-weight: 600; text-decoration: underline; }
.app-undo { padding: 0 var(--s2); }
/* phone (2.10): Home, Needs you, search and running work always reachable from the rail's head */
.app-rail-quick { display: none; }
@media (max-width: 991.98px) {
  .app-rail-quick { display: flex; gap: var(--s3); align-items: center; padding: 0 var(--s3); margin-left: auto; }
  .app-rail-quick-link { color: var(--on-rail-muted); font-size: 0.8125rem; text-decoration: none; display: inline-flex; align-items: center; gap: var(--s1); padding: var(--s1) var(--s2); border-radius: 4px; }
  .app-rail-quick-link:hover, .app-rail-quick-link:focus-visible { color: #FFFFFF; }
  .app-rail .navbar-toggler { order: 3; }
}
/* dark separation (2.11): the card's edge takes the stronger hairline token in the dark, where the panel and the ground sit close */
@media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]) .app-body .card, :root:not([data-bs-theme="light"]) .app-record-head { --tblr-card-border-color: var(--hairline); border-color: var(--hairline); } }
:root[data-bs-theme="dark"] .app-body .card, :root[data-bs-theme="dark"] .app-record-head { --tblr-card-border-color: var(--hairline); border-color: var(--hairline); }
/* UX round 1: sites and deploys */
/* the live word beside "current" on the production deployment, and in the comparison panel: a word, never a pill */
.app-live-word { color: var(--success); font-weight: 600; }
.app-deploy-stage { white-space: nowrap; }
/* Raise a change: the five radios under "What needs changing?", the legend set like a label */
.app-radios legend.form-label { float: none; width: auto; margin-bottom: var(--s2); }
.app-radios .form-check { margin-bottom: var(--s1); }
/* the Deploys tab's comparison: three columns, each read from the top */
.app-compare-table td { vertical-align: top; }
/* the site's Details form folded away at the bottom of the record */
.app-site-details > summary.card-body { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.app-site-details > summary.card-body::before { content: '+'; width: 1.2em; color: var(--ink-subtle); font-family: var(--font-data); }
.app-site-details[open] > summary.card-body::before { content: '-'; }
/* UX round 1: money and clients */
/* a completed state in the primary place (an invoice paid in full, a checklist row done): a word in the success tone, never a button */
/* a finished step reads as done, in words with a tick, never as a bordered control (FIX-ROUND-18 item 9; TESTING 2.4) */
.app-done-state { display: inline-flex; align-items: center; gap: var(--s2); color: var(--success); font-weight: 500; white-space: nowrap; }
/* a detail added or changed where it sits on the record (FIX-ROUND-18 item 9) */
.app-detail-add { font-weight: 500; }
.app-detail-change { margin-left: var(--s2); }
.app-detail-form { max-width: 28rem; }
.app-detail-form .app-form-footer { margin-top: var(--s2); }
.app-detail-flag { color: var(--warning); margin-top: var(--s1); }
.app-done-state::before { content: '\2713'; font-weight: 700; }
.app-checklist-complete .card-header { box-shadow: inset 3px 0 0 var(--success); }
.app-checklist-done .app-panel-main strong { color: var(--ink-muted); }
/* the line just added on a draft: the row's selected wash from the table rules, the word for a reader who cannot see it */
.app-lines-table .app-saved-mark { margin-left: 0; }
/* the invoice preview opens separately on a phone */
.app-phone-preview { margin: 0 0 var(--s4); }
/* the phone's first screen of Money: three figures and three doors */
.app-phone-summary .card-body { padding-bottom: var(--s3); }
.app-phone-figures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin: 0; }
.app-phone-figure dt { font-size: 0.75rem; font-weight: 500; color: var(--ink-muted); }
.app-phone-figure dd { margin: 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.app-phone-links { display: flex; gap: var(--s2); padding: var(--s2) var(--s4) var(--s3); border-top: 1px solid var(--hairline-soft); }
.app-phone-links .btn { flex: 1 1 0; }
/* a related-record panel that collapses on a phone (the script closes it below 992px): the card header is the summary, unchanged in look */
details.card[data-phone-collapse] > summary.card-header { cursor: pointer; list-style: none; }
details.card[data-phone-collapse] > summary.card-header::-webkit-details-marker { display: none; }
details.card[data-phone-collapse] > summary.card-header::before { content: none; }
details.card[data-phone-collapse][open] > summary.card-header { margin-bottom: 0; }
/* renewals: the charges line up */
.app-renewals-table .app-num { font-variant-numeric: tabular-nums; }

/* fix round 5: quota and estimate */
/* the cost before a survey starts: the figures as a key-value list inside the form, the refusal as a warning in its place, the one-line version beside Survey this area */
.app-estimate { margin: 0 0 var(--s4); padding: var(--s3) var(--s4); border: 1px solid var(--hairline-soft); border-radius: var(--radius, 6px); }
.app-estimate .app-h2 { margin: 0 0 var(--s2); font-size: 1rem; }
.app-estimate .app-kv { margin: 0; }
.app-estimate .app-kv dd { font-variant-numeric: tabular-nums; }
.app-estimate-refused { margin: 0 0 var(--s4); }
.app-estimate-line { display: block; flex-basis: 100%; margin-top: var(--s2); font-variant-numeric: tabular-nums; }
/* fix round 5: search settings */
/* the versions table: the what-changed column wraps; the version in force uses the selected-row style above */
.app-versions td.app-wrap { max-width: 28rem; overflow-wrap: anywhere; }
/* a never-direct type on the unmatched list (DECISIONS 275): the row stays with its count; the words sit where the Map control would */
tr[data-never-direct] td { color: var(--ink-muted); }
.app-never-direct { display: inline-block; max-width: 22rem; }
/* the one line on a search settings card saying what approving applies */
.app-apply-note { border-top: 1px solid var(--hairline-soft); padding-top: var(--s2); }

/* fix round 5: lean */
/* the Scout's lean beside the buttons, never a button: muted, one line under the reason */
.app-decision-lean { margin: 0 0 var(--s2); color: var(--ink-muted); }
.app-lean { color: var(--ink-muted); }
/* the candidate the lean names, in the nearest-entries table */
.app-nearest tr.app-lean-candidate th, .app-nearest tr.app-lean-candidate td { box-shadow: inset 3px 0 0 var(--ink-muted); }
.app-leans-table .app-num { font-variant-numeric: tabular-nums; }
/* fix round 5: weekly pool */
.app-pool-table .app-num { font-variant-numeric: tabular-nums; }
.app-pool-empty td { color: var(--ink-muted); }
.app-pool-empty td .app-small { margin-left: var(--s2); }

/* Fix round 10: the two screenshots of a homepage on a record, a run page and a card; each scales to its column, the phone one narrow */
.app-screens { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: flex-start; margin-top: var(--s2); }
.app-screen { margin: 0; flex: 1 1 320px; max-width: 640px; }
.app-screen-phone { flex: 0 1 200px; max-width: 200px; }
.app-screen img { display: block; width: 100%; height: auto; border: 1px solid var(--hairline-soft); border-radius: 4px; background: #fff; }
.app-decision-visual { margin: .25rem 0 0; }

/* SLICE-SECOND-OPINION (21 October 2026): GPT's second opinion on a list row, on its own page and on a proposal card. Both
   verdicts side by side, stacked on a phone; a verdict that differs carries the word "differs", never colour alone. */
.app-decision-so { margin: var(--s2) 0 0; }
.app-decision-main > .app-callout { margin: var(--s2) 0 0; }
.app-decision-so-standing { margin: var(--s1) 0 0; }
.app-so-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--s3); margin: var(--s2) 0 var(--s3); }
.app-so-side { min-width: 0; padding: var(--s3); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); }
.app-so-who { margin: 0 0 var(--s1); font-size: var(--text-meta); font-weight: 650; color: var(--ink-muted); }
.app-so-verdict { margin: 0 0 var(--s1); }
.app-so-differs { display: inline-block; margin-left: var(--s1); padding: 0 var(--s2); font-size: var(--text-meta); font-weight: 600; color: var(--warning); border: 1px solid currentColor; border-radius: 999px; }
.app-so-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--s3); }
.app-so-form { margin: 0; min-width: 0; }
.app-so-form .app-actions { display: flex; gap: var(--s2); flex-wrap: wrap; }
.app-so-form .form-control, .app-so-form .form-select { flex: 1 1 12rem; min-width: 0; }
.app-proposal-so { margin: 0; }

/* Fix round 16 (FIX-ROUND-16-2026-10-16.md; DECISIONS 341): every Scout list sortable and filterable, the website up front, PageSpeed bands, the record page rebuilt */
/* a sortable column header is a link; the sorted one is marked */
.app-table .table thead th.app-sortable a { color: inherit; text-decoration: none; }
.app-table .table thead th.app-sortable a:hover, .app-table .table thead th.app-sortable a:focus-visible { text-decoration: underline; }
.app-table .table thead th.app-sorted a { color: var(--ink); font-weight: 600; }
.app-sort-links { margin: 0 0 var(--s2); }
.app-sort-links a.app-sorted { font-weight: 600; }
/* the filter form above a list: a row of small controls that wraps on a phone */
.app-list-filters { display: flex; align-items: flex-end; gap: var(--s3); flex-wrap: wrap; margin: 0 0 var(--s3); }
.app-list-filters .app-field { margin: 0; min-width: 9rem; flex: 1 1 9rem; }
.app-list-filters .form-select, .app-list-filters .form-control { min-height: 32px; padding-top: 0.25rem; padding-bottom: 0.25rem; }
.app-list-filters .app-list-filter-actions { flex: 0 0 auto; display: flex; gap: var(--s2); align-items: center; }
/* the website under a business name: the domain as a link, or "No website" in muted ink */
/* FIX-ROUND-17 item 3: a normal-weight link in the body face with an arrow, never broken mid-domain (the table scrolls sideways on a narrow screen instead) */
.app-site-link { font-family: inherit; font-size: 0.8125rem; font-weight: 400; white-space: nowrap; }
.app-site-arrow { font-size: 0.75em; margin-left: 0.1em; }
.app-business-table .app-business-cell { min-width: 14rem; }
.app-business-table .app-band { display: inline-grid; justify-items: start; white-space: normal; gap: 0; }
.app-business-table .app-band-word { display: block; font-size: 0.75rem; }
.app-business-table .table thead th { white-space: normal; } /* the band under its figure, so the score columns stay narrow and the table fits a desktop screen */
.app-business-table .app-registered-name { display: inline-block; line-height: 1.3; }
.app-business-table .app-status-short { display: inline; }
.app-business-table .app-status-cell { min-width: 11rem; } /* the short status stays on one or two lines, so the rows keep one height (FIX-ROUND-17 item 3) */
.app-business-table .app-site-state { white-space: nowrap; }
.app-business-table td.app-num, .app-business-table td { line-height: 1.35; }
.app-decision-site { display: block; font-size: 0.8125rem; }
/* a PageSpeed figure with its band as a word and a colour: good green, needs improvement amber, poor red, none muted */
.app-band { display: inline-flex; align-items: baseline; gap: 0.3em; white-space: nowrap; font-size: 0.8125rem; }
.app-band-figure { font-family: var(--font-data); font-weight: 600; }
.app-band-word { font-size: 0.75rem; }
.app-band-good .app-band-figure, .app-band-good .app-band-word { color: var(--success); }
.app-band-needs-improvement .app-band-figure, .app-band-needs-improvement .app-band-word { color: var(--warning); }
.app-band-poor .app-band-figure, .app-band-poor .app-band-word { color: var(--critical); }
.app-band-none { color: var(--ink-muted); }
.app-speed-tiles { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s4); }
.app-speed-tile { display: inline-flex; flex-direction: column; gap: 0; }
.app-speed-label { font-size: 0.6875rem; color: var(--ink-muted); text-transform: none; }
.app-decision-speed { margin: .25rem 0 0; }
.app-business-table td { vertical-align: top; }
.app-business-table .table > :not(caption) > * > * { height: auto; padding-top: var(--s2); padding-bottom: var(--s2); }
/* the record page (item 3b): the header with the website button, the score with its band tiles and the jump links */
.app-record-head { display: flex; flex-direction: column; gap: var(--s3); margin-bottom: var(--s5); }
/* FIX-ROUND-19 N22: in the column layout the facts list takes its own height, not the 24rem basis it has as a row (the invoice card's empty area between Client and Total) */
.app-record-head .app-facts { flex: 0 0 auto; }
/* FIX-ROUND-20 item 2: the card in one sentence, first on a subscription's page */
.app-card-line { margin: 0; font-size: 1rem; max-width: 60ch; }
/* FIX-ROUND-20 item 1: the card phrase beside a subscription, in the pills' colours but its own mark (it names an invoice, so it is no word of a vocabulary) */
.app-card-state { display: inline-flex; align-items: center; gap: var(--s1); font-size: 0.8125rem; font-weight: 500; white-space: nowrap; }
.app-card-dot { width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; flex: none; }
.app-card-state-success { color: var(--success); }
.app-card-state-warning { color: var(--warning); }
.app-card-state-info { color: var(--ink-muted); }
.app-card-state-critical { color: var(--critical); }
/* FIX-ROUND-20 item 2: the card in one sentence, first on a subscription's page */
.app-card-line { margin: 0; font-size: 1rem; max-width: 60ch; }
.app-record-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: 0; }
.app-record-site { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s4); }
.app-record-site .btn-lg { font-size: 1.0625rem; padding: 0.5rem 1rem; gap: 0.45em; max-width: 100%; white-space: normal; flex-wrap: wrap; justify-content: flex-start; text-align: left; }
.app-record-site .app-site-domain { font-family: var(--font-data); overflow-wrap: anywhere; }
.app-record-scores { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3) var(--s6); }
.app-record-score-main { display: flex; flex-direction: column; }
.app-record-score-main .app-figure { font-size: 2.25rem; }
.app-record-score-label { font-size: 0.75rem; color: var(--ink-muted); }
.app-record-tile { display: flex; flex-direction: column; min-width: 7rem; }
.app-record-tile .app-band-figure { font-size: 1.25rem; }
.app-jump-links { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s3); margin: 0; padding: 0; list-style: none; font-size: 0.875rem; }
.app-jump-links li + li::before { content: '·'; color: var(--ink-muted); margin-right: var(--s3); }
.app-record-section { scroll-margin-top: 4rem; }
.app-record-section > .card-header h2 { font-size: 1.0625rem; }
.app-record-section .app-h3 { font-size: 0.9375rem; font-weight: 600; margin: var(--s3) 0 var(--s2); }
/* the two screenshots as thumbnails side by side, each opening the full image */
/* FIX-ROUND-17 item 4: the desktop thumbnail at least 480 pixels wide on a desktop screen, the phone beside it at the same height */
.app-thumbs { display: flex; flex-wrap: wrap; gap: var(--s3); margin: var(--s2) 0; align-items: flex-start; }
.app-thumb { margin: 0; flex: 0 0 auto; max-width: 100%; }
.app-thumb img { display: block; height: 300px; width: auto; max-width: 100%; border: 1px solid var(--hairline-soft); border-radius: 4px; background: #fff; }
.app-look-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: var(--s2) var(--s5); margin-top: var(--s3); }
.app-look-split .app-h3 { margin-top: 0; }
.app-fine li { color: var(--ink-muted); }
@media (max-width: 760px) {
  .app-thumb img { height: auto; width: 100%; }
  .app-thumb { flex: 1 1 60%; }
  .app-thumb-phone { flex: 1 1 30%; }
}
.app-thumb figcaption { font-size: 0.75rem; color: var(--ink-muted); margin-top: var(--s1); }
.app-faults { margin: var(--s2) 0; padding-left: 1.25rem; }
.app-faults li { margin-bottom: 0.15rem; }
/* the PageSpeed table: numbers right-aligned, each with its band word */
.app-speed-table .app-num { font-variant-numeric: tabular-nums; }
.app-speed-table td .app-band { white-space: nowrap; }
/* the signal rows: three labelled rows */
.app-signal-rows { display: grid; grid-template-columns: minmax(0, max-content) minmax(0, 1fr); gap: var(--s2) var(--s4); margin: 0; }
.app-signal-rows dt { color: var(--ink-muted); font-size: 0.8125rem; }
.app-signal-rows dd { margin: 0; }
/* the register and how to reach them side by side on a desktop, stacked on a phone */
.app-record-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: var(--s4); }
.app-record-pair .app-kv { grid-template-columns: minmax(0, max-content) minmax(0, 1fr); }
.app-record-details { margin-bottom: var(--s3); }
.app-record-details > summary { cursor: pointer; }
.app-record-details > summary h2, .app-record-details > summary h3 { display: inline; font-size: 1rem; margin: 0; }
@media (max-width: 600px) {
  .app-record-scores { gap: var(--s3); }
  .app-record-score-main .app-figure { font-size: 1.75rem; }
  .app-signal-rows, .app-record-pair .app-kv { grid-template-columns: 1fr; }
  .app-business-table .table { min-width: 48rem; }
}

/* ==== DESIGN.md 2.0: the templates' own parts (UX refactor, phase 1) ==== */
/* List: the name is the strongest value in a row, its identifier quiet beneath */
.app-row-name { font-weight: 650; color: var(--ink); }
a.app-row-name { text-decoration: none; }
a.app-row-name:hover { text-decoration: underline; color: var(--interactive-strong); }
.app-row-meta { display: block; margin-top: 2px; font-size: var(--text-meta); color: var(--ink-muted); font-weight: 400; }
.app-panel-flush .app-table .table thead th:first-child, .app-panel-flush .app-table .table td:first-child { padding-left: var(--s6); }
.app-panel-flush .app-table .table thead th:last-child, .app-panel-flush .app-table .table td:last-child { padding-right: var(--s6); }
.app-panel-flush > .app-panel-body > .table-responsive:first-child, .app-panel-flush > .table-responsive { border-top-left-radius: var(--radius-panel); border-top-right-radius: var(--radius-panel); }
.app-panel-flush .app-table .table thead th { border-top: 0; }
.app-panel > .app-empty, .app-panel > .app-empty-filtered { margin: 0; }
/* Record: the checklist rows, a recent-activity list, the management area set apart at the foot */
.app-checklist-list { list-style: none; margin: 0; padding: 0; }
.app-checklist-list > li { padding: var(--s3) 0; border-bottom: 1px solid var(--hairline-soft); }
.app-checklist-list > li:last-child { border-bottom: 0; }
.app-checklist-list .app-panel-row { padding-left: 0; padding-right: 0; }
.app-record-facts { grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); }
.app-panel .app-timeline { margin: 0; }
.app-panel .app-timeline .list-group-item { padding-left: 0; padding-right: 0; background: transparent; }
.app-manage { margin-top: var(--s12); padding-top: var(--s6); border-top: 1px solid var(--hairline); }
.app-manage .app-panel { max-width: var(--form-width); }
.app-danger { border-color: color-mix(in srgb, var(--critical) 45%, var(--hairline-soft)); }
.app-danger .app-h3 { color: var(--critical); }
.app-billing-to { margin: 0 0 var(--s6); }
/* Settings: the index is categories of one-line groups, each with its current values and one Change at its right */
.app-settings-search { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s6); }
.app-settings-search .form-control { max-width: 26rem; }
.app-settings-index > [data-filter-item][hidden] { display: none; }
.app-settings-category { margin-bottom: var(--s8); }
.app-settings-list { padding: 0 var(--s6); }
.app-settings-group { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3) var(--s6); padding: var(--s4) 0; border-bottom: 1px solid var(--hairline-soft); scroll-margin-top: var(--s12); }
.app-settings-group:last-child { border-bottom: 0; }
.app-settings-group[hidden] { display: none; }
.app-settings-main { min-width: 0; flex: 1 1 auto; }
.app-settings-head { display: flex; align-items: baseline; gap: var(--s3); flex-wrap: wrap; }
.app-settings-title { font-size: var(--text-body); font-weight: 700; margin: 0; }
.app-settings-summary { margin: var(--s1) 0 0; color: var(--ink); overflow-wrap: anywhere; }
.app-settings-label { color: var(--ink-muted); font-size: var(--text-meta); }
.app-settings-value { font-weight: 500; }
.app-sep { color: var(--ink-subtle); }
.app-settings-flag { margin: var(--s2) 0 0; font-size: var(--text-meta); }
.app-settings-group .app-settings-note { margin: var(--s2) 0 0; padding: 0; border: 0; font-size: var(--text-meta); color: var(--ink-muted); }
.app-settings-group .app-more { margin: var(--s2) 0 0; }
.app-settings-change { margin-left: 0; flex: none; font-weight: 600; font-size: var(--text-body); min-height: 32px; display: inline-flex; align-items: center; }
.app-settings-group .app-saved-mark { margin-left: 0; }
.app-settings-group:target { box-shadow: inset 3px 0 0 var(--interactive); padding-left: var(--s3); }
.app-flag-warning { color: var(--warning); font-weight: 700; }
.app-flag-critical { color: var(--critical); font-weight: 700; }
@keyframes app-saved-fade-row { 0%, 60% { background-color: var(--selected-wash); } 100% { background-color: transparent; } }
.app-settings-group.app-settings-group-saved { animation: app-saved-fade-row 3.2s ease-out both; box-shadow: inset 3px 0 0 var(--success); padding-left: var(--s3); }
@media (prefers-reduced-motion: reduce) { .app-settings-group.app-settings-group-saved { animation: none; } }
@media (max-width: 575.98px) { .app-settings-list { padding: 0 var(--s4); } .app-settings-group { flex-direction: column; } }
/* the rail is the viewport's height on a desktop, so Settings sits at its foot whatever the page's length */
@media (min-width: 992px) {
  /* capped, so on a very tall window (and in the full-page captures, framed tall) Settings stays near the areas rather than a screen away */
  .app-rail { height: 100vh; overflow-y: auto; }
  .app-rail > .container-fluid { min-height: min(100%, 56rem); display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .app-rail .navbar-collapse { flex: 1 1 auto; }
}
.app-subnav .app-count { margin-left: 6px; }
/* facts in a narrow side panel: the label above its value */
.app-facts-stacked .app-fact { grid-template-columns: minmax(0, 1fr); gap: 2px; }
.app-facts-list dd a[href^="mailto:"], .app-fact dd { overflow-wrap: break-word; }

/* ==== phase 3: Search setup's trade picker and the edit foot (the review, Search settings) ==== */
.app-picker { border: 0; margin: 0; padding: 0; min-width: 0; }
.app-pick-chosen { display: flex; flex-direction: column; margin: 0 0 var(--s4); }
.app-pick-row { display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: var(--s2) 0; border-bottom: 1px solid var(--hairline-soft); cursor: pointer; }
.app-pick-row:last-child { border-bottom: 0; }
.app-pick-row[hidden] { display: none; }
.app-pick-row .form-check-input { margin: 0; flex: none; }
.app-pick-name { flex: 1 1 auto; font-size: var(--text-body); }
.app-pick-hint { font-size: var(--text-meta); color: var(--ink-muted); }
.app-pick-add { padding-top: var(--s3); border-top: 1px solid var(--hairline); }
.app-pick-add .form-control { max-width: 26rem; margin-bottom: var(--s2); }
.app-pick-rest { max-height: 18rem; overflow-y: auto; border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); padding: 0 var(--s3); background: var(--canvas); }
.app-edit-foot { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: var(--s3); flex-wrap: wrap; padding: var(--s3) var(--s4); margin: 0 0 var(--s6); background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius-panel); box-shadow: var(--shadow-raised); }
.app-edit-status { margin: 0; color: var(--ink-muted); font-size: var(--text-body); }
.app-form-wide .app-panel { max-width: none; }
/* the build review: the evidence beside the criterion, the full guidance as a numbered list */
.app-review-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 0 var(--s6); align-items: start; }
@media (max-width: 991.98px) { .app-review-grid { grid-template-columns: minmax(0, 1fr); } }
.app-guide { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr); gap: var(--s2) var(--s3); margin: 0 0 var(--s2); }
.app-guide dt { font-weight: 700; font-variant-numeric: tabular-nums; }
.app-guide dd { margin: 0; }
.app-rubric-list { list-style: none; margin: 0; padding: 0; }
.app-rubric-list > li { border-top: 1px solid var(--hairline-soft); padding: var(--s2) 0; }
.app-rubric-list .app-more { margin: 0; }
.app-rubric-list .app-more > summary { font-size: var(--text-body); color: var(--ink); }
/* a checkbox is square with a small radius; a radio stays round (the 8px control radius made both look round) */
.app-body .form-check-input[type="checkbox"], .app-auth .form-check-input[type="checkbox"] { border-radius: 4px; }

/* ==== phase 4: Today, Agents ==== */
.app-today-section { margin-bottom: var(--s8); }
.app-today-section .app-section-title { margin-top: 0; }
.app-queue-filters { display: inline-flex; gap: var(--s2); }
.app-queue-filters a { font-weight: 600; }
.app-findings > li { padding: var(--s2) 0; border-bottom: 1px solid var(--hairline-soft); }
/* a finding with an attention stripe keeps its words clear of the stripe (seen on Today at 390, 21 Oct 2026) */
.app-findings > li.app-finding-overdue { padding-left: var(--s3); }
.app-findings > li:last-child { border-bottom: 0; }
.app-running-list .app-running-item { padding: var(--s1) 0; min-height: 32px; }
.app-team-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: var(--s4); margin-bottom: var(--s6); }
.app-team-cards .app-panel { margin: 0; }
.app-panel .app-queue-list .list-group-item { background: transparent; }
/* a flow said as steps (Raise an invoice): the current one in brick text, the done ones ticked */
.app-steps { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s6); list-style: none; margin: 0 0 var(--s6); padding: 0; font-weight: 600; color: var(--ink-muted); }
.app-steps li { display: inline-flex; align-items: center; gap: var(--s2); }
.app-steps li > span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--control-border); font-size: var(--text-meta); font-variant-numeric: tabular-nums; }
.app-steps .app-step-current { color: var(--brand-text); }
.app-steps .app-step-current > span { border-color: var(--brand-text); }
.app-steps .app-step-done > span { background: var(--success); border-color: var(--success); color: #FFFFFF; }
/* the invoice: the record in one column; the document full width in its own tab, fitted to the width */
.app-invoice-main { max-width: 960px; }
.app-invoice-summary { padding: var(--s4) var(--s6); }
.app-invoice-full .app-paper { background: var(--surface-2); padding: var(--s6); border-radius: var(--radius-panel); overflow: auto; }
.app-invoice-full .invoice-doc { max-width: 900px; margin: 0 auto; }
@media (max-width: 575.98px) { .app-invoice-full .app-paper { padding: var(--s2); } }

/* ==== UX review rows 9 and 10: Run a survey and the Scorecard (src/web/routes/pipeline.ts) ==== */
.app-survey-what { margin-bottom: var(--s6); }
.app-estimate .app-metrics { margin-bottom: var(--s3); }
.app-estimate .app-callout { margin: var(--s3) 0; }
.app-estimate .app-more { margin-top: var(--s3); }
/* the scorecard's in-page view switch: under the Search setup tabs, so a quiet row of links, never a second tab strip */
.app-view-switch { margin: 0 0 var(--s4); }
.app-view-switch ul { display: flex; flex-wrap: wrap; gap: var(--s2); list-style: none; margin: 0; padding: 0; }
.app-view-switch a { display: inline-flex; align-items: center; gap: var(--s1); min-height: 32px; padding: var(--s1) var(--s3); border: 1px solid var(--hairline); border-radius: 999px; color: var(--ink-muted); font-weight: 600; text-decoration: none; }
.app-view-switch a:hover { color: var(--ink); border-color: var(--control-border); }
.app-view-switch a.active { color: var(--interactive-strong); border-color: var(--interactive); background: var(--selected-wash); }
.app-panel-lead { border-left: 3px solid var(--interactive); }
.app-rules-table .app-points { white-space: nowrap; }
.app-points-bar { display: block; width: 6rem; height: 6px; margin: var(--s1) 0 0 auto; accent-color: var(--interactive); }
.app-rules-table tfoot th, .app-rules-table tfoot td { border-top: 1px solid var(--hairline); font-weight: 600; }
.app-version-list { list-style: none; margin: 0; padding: 0; }
.app-version { border-top: 1px solid var(--hairline-soft); padding: var(--s4) 0; }
.app-version:first-child { border-top: 0; padding-top: 0; }
.app-version.app-is-selected { background: transparent; }
.app-version-title { font-size: var(--text-body); font-weight: 650; margin: 0 0 var(--s1); display: flex; align-items: center; gap: var(--s2); }
.app-version-badge { font-size: var(--text-meta); font-weight: 600; color: var(--interactive-strong); border: 1px solid var(--interactive); border-radius: 999px; padding: 0 var(--s2); }
.app-version-meta { margin: 0 0 var(--s2); }
.app-version-changes, .app-version-unchanged { list-style: none; margin: 0 0 var(--s2); padding: 0; }
.app-version-changes > li { padding: var(--s1) 0; }
.app-change-mark { display: inline-block; min-width: 5.5rem; font-size: var(--text-meta); font-weight: 600; color: var(--ink-muted); }
.app-change-added { color: var(--success); }
.app-change-removed { color: var(--critical); }
.app-change-changed { color: var(--interactive-strong); }

/* ==== UX redesign 2026-10-21: the mechanic shelf and All trades (shelf-routes.ts) ==== */
/* a trade's Details sit in a row of their own under it, read as part of the row above */
.app-trades-table .app-subrow > td { border-top: 0; padding-top: 0; padding-bottom: var(--s2); }
.app-trades-table tr.app-row > td { border-bottom: 0; }
.app-trades-table .app-subrow .app-more { margin: 0; }
.app-trades-table .app-subrow .app-more-body { padding: var(--s3) 0 var(--s2); max-width: 60rem; }
.app-panel-flush .app-trades-table .app-subrow > td:first-child { padding-left: var(--s6); }
/* the empty shelf: one line saying what belongs here, above the import that fills it */
.app-shelf-empty-lead { margin: 0 0 var(--s4); font-weight: 600; }
/* the readiness panel: the marks, then the Builder's own gate, each part spaced */
.app-shelf-readiness-part { margin: var(--s4) 0; }
.app-shelf-readiness-part .app-h3 { margin-bottom: var(--s2); }
.app-shelf-flush-note { padding: 0 var(--s6) var(--s4); margin: 0; }

/* ==== UX review rows 6, 16, 17: Builds list, build record, job ==== */
/* the list: one line per row in the name cells, the status cells carry their detail beneath */
.app-builds-table td { vertical-align: top; }
.app-builds-table td .app-pill { vertical-align: baseline; }
.app-site-unlinked { font-weight: 500; }
/* the build record: the Link site action lands on the linking form below the work */
#link-site { scroll-margin-top: var(--s8); }
#link-site:target { outline: 2px solid var(--interactive); outline-offset: var(--s2); border-radius: var(--radius-control); }
/* the job: the invoice action sits under the billing summary, set apart by a hairline */
.app-job-invoice { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline-soft); }
.app-job-invoice .app-actions { flex-wrap: wrap; gap: var(--s2); }
.app-job-invoice > p:first-child { margin-bottom: var(--s3); }

/* ==== phase 4: the run page's technical log and the agent profile (UX review rows 14 and 27) ==== */
/* the technical log opens on the counters above nought; the notes and the ledger inside the Report are plain parts, not nested disclosures */
.app-log-summary { margin-bottom: var(--s4); }
.app-log-summary .app-facts-list { margin-bottom: var(--s2); }
.app-report-part { margin-top: var(--s6); padding-top: var(--s4); border-top: 1px solid var(--hairline-soft); }
.app-report-part > .app-h2 { margin-top: 0; }
/* the capability rows: the action in words, its permission now, what stands in the way */
.app-capabilities td { vertical-align: top; }
.app-capabilities .app-row-meta { display: block; }

/* A landed message sits above a sticky edit foot, never over its Review changes button (the five-task check, 21 Oct 2026) */
body:has(.app-edit-foot) .app-toast { bottom: calc(var(--s6) + 5.5rem); }

/* A table that scrolls in its own box holds everything inside it, the visually hidden labels included: without a
   containing block of its own, a th's hidden label (position: absolute) escaped the box and widened the page (the
   width check, 21 Oct 2026) */
.app-body .table-responsive { position: relative; }

/* ---- DESIGN.md 2.1 (UX fix 1, 21 Oct 2026) ---------------------------------------------------------------------------- */

/* Rule 1: small screens show records, not wide tables. Below the tablet breakpoint every working table (marked app-stack
   by the layout, each cell labelled from its heading) reads as a stack of compact record cards: the first cell names the
   record, the rest are label and value, the action sits in the card where it can be pressed. */
@media (max-width: 991.98px) {
  .app-body .table.app-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .app-body .table.app-stack, .app-body .table.app-stack > tbody, .app-body .table.app-stack > tfoot, .app-body .table.app-stack tr { display: block; width: 100%; min-width: 0; max-width: 100%; }
  .app-body .table.app-stack > tbody, .app-body .table.app-stack > tfoot { padding: var(--s2) var(--s3); }
  .app-body .table.app-stack tr { position: relative; margin: 0 0 var(--s2); padding: var(--s3); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); }
  .app-body .table.app-stack tr:last-child { margin-bottom: 0; }
  .app-body .table.app-stack > :not(caption) > tr > * { display: grid; grid-template-columns: minmax(6.5rem, 38%) minmax(0, 1fr); gap: var(--s1) var(--s3); align-items: start; padding: 2px 0; border: 0; text-align: left; white-space: normal; height: auto; min-width: 0; max-width: none; background: transparent; box-shadow: none; }
  .app-body .table.app-stack > :not(caption) > tr > *::before { content: attr(data-label); font-size: var(--text-meta); font-weight: 500; color: var(--ink-muted); }
  /* the record's name: the first cell (after a selection box), full width and strong */
  .app-body .table.app-stack > :not(caption) > tr > :first-child:not(.app-select-col), .app-body .table.app-stack > :not(caption) > tr > .app-select-col + * { grid-template-columns: minmax(0, 1fr); font-weight: 600; padding-bottom: var(--s1); }
  .app-body .table.app-stack > :not(caption) > tr > :first-child:not(.app-select-col)::before, .app-body .table.app-stack > :not(caption) > tr > .app-select-col + *::before { content: none; }
  /* a cell under a hidden heading (the action) or an empty one: the content alone, its buttons where a thumb reaches them */
  .app-body .table.app-stack > :not(caption) > tr > [data-label=""] { grid-template-columns: minmax(0, 1fr); padding-top: var(--s2); }
  .app-body .table.app-stack > :not(caption) > tr > [data-label=""]::before { content: none; }
  .app-body .table.app-stack > :not(caption) > tr > .app-select-col { position: absolute; top: var(--s3); right: var(--s3); display: block; padding: 0; }
  .app-body .table.app-stack > :not(caption) > tr > .app-select-col::before { content: none; }
  .app-body .table.app-stack .app-num { text-align: left; }
  .app-body .table.app-stack .app-cell { display: block; min-width: 0; overflow-wrap: anywhere; }
  .app-body .table.app-stack .app-cell * { white-space: normal; max-width: 100%; }
  .app-body .table.app-stack .app-row-meta { display: block; }
  .app-body .table.app-stack tr:has(.stretched-link) { cursor: pointer; }
  .app-body .table-responsive:has(> .table.app-stack) { overflow: visible; }
}

/* Rule 1: a comparative table stays a table, with a visible cue and its first column held in place while the rest scrolls */
.app-scroll-cue { display: none; }
.app-cell { display: contents; }
@media (max-width: 991.98px) {
  .app-body .app-scroll-cue { display: block; position: sticky; left: 0; margin: 0; padding: var(--s1) var(--s3); font-size: var(--text-meta); color: var(--ink-muted); }
  .app-body .app-scroll-cue::after { content: " \2192"; }
  .app-body .table-responsive:has(> .table.app-compare) { background: linear-gradient(to left, var(--surface-1) 30%, transparent) right center / 2.5rem 100% no-repeat local, linear-gradient(to left, rgba(32, 33, 36, 0.14), transparent) right center / 1rem 100% no-repeat scroll; }
  .app-body .table.app-compare > :not(caption) > tr > :first-child { position: sticky; left: 0; z-index: 1; background: var(--surface-1); box-shadow: inset -1px 0 0 var(--hairline-soft); }
}

/* Rule 7: one secondary switcher, the same everywhere a page switches its own views: a segmented control, never pills
   that read as statuses, never a second strip of tabs */
.app-switch { display: inline-flex; flex-wrap: wrap; gap: 2px; margin: 0 0 var(--s4); padding: 2px; background: var(--surface-2); border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); max-width: 100%; }
.app-switch-item { display: inline-flex; align-items: center; gap: var(--s1); min-height: 36px; padding: var(--s1) var(--s3); border: 0; border-radius: calc(var(--radius-control) - 2px); background: transparent; color: var(--ink-muted); font: inherit; font-size: var(--text-body); font-weight: 600; text-decoration: none; cursor: pointer; }
.app-switch-item:hover { color: var(--ink); }
.app-switch-item[aria-current="page"], .app-switch-item[aria-selected="true"], .app-switch-item.active { background: var(--surface-1); color: var(--ink); box-shadow: 0 1px 2px rgba(32, 33, 36, 0.12), inset 0 -2px 0 var(--brand-text); }
.app-switch-count { font-size: var(--text-meta); font-weight: 500; color: var(--ink-muted); }
@media (max-width: 575.98px) { .app-switch { display: flex; } .app-switch-item { flex: 1 1 auto; justify-content: center; } }

/* Rule 9: three or more figures read as a compact list on a phone; one or two stay as large cards */
@media (max-width: 575.98px) {
  .app-metrics.app-metrics-many { display: block; background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); padding: var(--s1) var(--s4); }
  .app-metrics.app-metrics-many > .app-metric { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 var(--s3); padding: var(--s3) 0; background: none; border: 0; border-bottom: 1px solid var(--hairline-soft); border-radius: 0; }
  .app-metrics.app-metrics-many > .app-metric:last-child { border-bottom: 0; }
  .app-metrics.app-metrics-many .app-metric-label { margin: 0; }
  .app-metrics.app-metrics-many .app-metric-value { font-size: 1.125rem; text-align: right; }
  .app-metrics.app-metrics-many .app-metric > :nth-child(n + 3) { grid-column: 1 / -1; }
}

/* Rule 10: the small-screen header. The top bar holds Search below the tablet breakpoint, so the page header does not
   repeat it, and the title sits close under the bar */
@media (max-width: 991.98px) {
  .app-page-header { padding-top: var(--s4); }
  .app-topline > .app-header-tools { display: none; }
  .app-topline { min-height: 0; margin-bottom: var(--s2); }
  .app-topline:not(:has(.app-crumbs)) { display: none; }
}

/* UX fix 1, Pipeline pages (pipeline.ts, pipeline-qualified.ts): the prospect card's explicit Open, the scorecard's criteria
   as stacked blocks with the allocation prominent, the record's score summary over its folded calculation, the register's
   nearest entries as a list that fits the half-width panel, and the hand lead's one line in place of unrun score tiles. */
@media (min-width: 992px) { .app-body .app-open-col { display: none; } }
@media (max-width: 991.98px) {
  .app-body .table.app-stack > :not(caption) > tr > .app-open-col { display: block; padding-top: var(--s2); }
  .app-body .table.app-stack > :not(caption) > tr > .app-open-col .btn { width: 100%; }
  .app-body .table.app-prospects-table.app-stack > :not(caption) > tr > .col-drop { display: none; }
  .app-body .table.app-rules-table.app-stack > :not(caption) > tr > .app-points .app-tabular { font-size: var(--text-section); font-weight: 700; color: var(--ink); }
  .app-body .table.app-rules-table.app-stack > :not(caption) > tr > .app-points .app-points-bar { margin-left: 0; }
  .app-body .table.app-rules-table.app-stack > :not(caption) > tr > .app-wrap { grid-template-columns: minmax(0, 1fr); }
}
.app-score-outcome { margin: 0 0 var(--s3); }
.app-score-calculation { margin: 0 var(--s4) var(--s3); }
.app-nearest-list { list-style: none; margin: 0 0 var(--s3); padding: 0; }
.app-nearest-entry { padding: var(--s3) 0; border-top: 1px solid var(--hairline-soft); }
.app-nearest-entry:last-child { border-bottom: 1px solid var(--hairline-soft); }
.app-nearest-name { margin: 0 0 var(--s1); font-weight: 600; overflow-wrap: anywhere; }
.app-record-unresearched { margin: var(--s3) 0; }

/* ---- UX fix 1, the Agents pages (21 Oct 2026): pages 07, 12, 13, 14, 22, 25 and the shelf ---------------------------- */

/* Rule 5: a short word whose explanation is one tap or one key away (whyHtml, scout/list-html.ts), never a title alone */
.app-why { display: inline; }
.app-why > summary { display: inline; cursor: pointer; list-style: none; text-decoration: underline dotted var(--ink-subtle); text-underline-offset: 3px; }
.app-why > summary::-webkit-details-marker { display: none; }
.app-why > summary:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; border-radius: 2px; }
.app-why[open] > .app-why-text { display: block; margin-top: var(--s1); max-width: 28rem; white-space: normal; color: var(--ink-muted); }

/* Page 13: Look at one page, stacked: the label, the address full width, the button beneath */
.app-stacked-form { display: block; max-width: 36rem; }
.app-stacked-form .form-label { display: block; margin-bottom: var(--s1); }
.app-stacked-form .form-control { width: 100%; }
.app-stacked-form .btn { margin-top: var(--s2); }

/* Page 14: the re-check, a tool of its own after the decisions */
.app-recheck-tool > summary .app-small { font-weight: 400; margin-left: var(--s2); }
.app-recheck-tool .app-recheck-control { max-width: 40rem; }

/* Page 25: long profile names wrap; the completeness and its action read as one line */
.app-register-table .app-register-name { min-width: 12rem; }
.app-register-table .app-register-next { min-width: 14rem; }
.app-register-table .app-register-next .app-flag-warning, .app-register-table .app-register-next .app-done-state { display: block; }
.app-register-table .app-register-action { display: block; margin-top: var(--s1); }

@media (max-width: 991.98px) {
  /* Page 12: an unmatched term's map control under its label, the full width of the card */
  .app-body .table.app-unmatched-table.app-stack > tbody > tr > :last-child { grid-template-columns: minmax(0, 1fr); }
  .app-body .table.app-unmatched-table .app-inline { display: flex; flex-wrap: wrap; gap: var(--s2); }
  .app-body .table.app-unmatched-table .app-inline .form-select { flex: 1 1 10rem; width: auto; }
  /* Page 12: a trade's Details row belongs to its trade's card, not a card of its own */
  .app-body .table.app-stack > tbody > tr:has(+ tr.app-subrow) { margin-bottom: 0; border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; padding-bottom: var(--s1); }
  .app-body .table.app-stack > tbody > tr.app-subrow { border-top: 0; border-top-left-radius: 0; border-top-right-radius: 0; padding-top: 0; }
  .app-body .table.app-stack > tbody > tr.app-subrow > td { font-weight: 400; padding-bottom: 0; }
}

/* UX fix 1, Money (pages 05, 19, 20, 21): the overview's folds, the paid invoice's compact empty line, and the document fitted to the width */
.app-money-fold { margin: var(--s4) 0; padding: var(--s3) var(--s4); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); }
.app-money-fold > summary { font-size: var(--text-body); flex-wrap: wrap; }
.app-money-fold > summary .app-fold-note { font-weight: 400; }
@media (max-width: 575.98px) { .app-money-fold > summary .app-fold-note { flex-basis: 100%; padding-left: var(--s4); font-size: var(--text-meta); } }
.app-money-fold > .app-more-body { margin-top: var(--s4); }
.app-money-fold .app-section-title { margin-top: 0; }
.app-mrr-sum { margin: 0; padding: var(--s3) var(--s4) 0; }
.app-mrr-more { margin: var(--s2) var(--s4) var(--s4); }
.app-emails-none { margin: 0 0 var(--s4); padding: var(--s2) 0; border-top: 1px solid var(--hairline-soft); }
.app-subscriptions-table td.app-num > .app-nowrap { white-space: nowrap; }
.app-subscriptions-table td .app-pill + .app-row-meta, .app-invoices-table td .app-pill + .app-row-meta { margin-top: var(--s1); }
/* Page 21: the paper keeps its printed layout and is scaled down to the width it has (fit to width, never a sideways scroll); a browser
   without the ratio functions keeps the reflowing paper below 760px */
.app-invoice-full .app-paper { container-type: inline-size; overflow: hidden; }
@supports (zoom: tan(atan2(1px, 1px))) {
  .app-invoice-full .app-paper .invoice-doc { box-sizing: border-box; width: 760px; max-width: none; padding: 32px; font-size: 14px; zoom: min(1, tan(atan2(100cqw, 760px))); }
}
@media (max-width: 575.98px) {
  .app-invoice-full .app-paper { padding: var(--s2); }
  .app-money-fold { padding: var(--s3); }
  .app-mrr-sum { padding: var(--s3) var(--s3) 0; }
  .app-mrr-more { margin: var(--s2) var(--s3) var(--s3); }
}

/* UX fix 1: Today, Settings, Builds and Clients (DESIGN.md 2.1). The Settings index summarises (rule 6): on a phone a group
   keeps its Change or Open link beside its facts instead of on a line of its own. A build's site-linking form is folded
   inside Site management, opened by the Link site action (page 16). A job's billing is a short calculation (page 17). */
@media (max-width: 575.98px) {
  .app-settings-group { flex-direction: row; gap: var(--s3); }
  .app-settings-change { min-height: 24px; }
}
.app-link-site > summary { font-weight: 600; }
.app-calc { margin: 0 0 var(--s3); }
.app-calc-sum { font-variant-numeric: tabular-nums; }
.app-calc-sum strong { font-weight: 700; }

/* Record cards (2.1, rule 1): a row needing attention carries its stripe on the card's edge, not over the record's name; a
   foot row's empty cells (a total's unused columns) take no space */
@media (max-width: 991.98px) {
  .app-table .table.app-stack tr.app-attention-critical, .app-table .table.app-stack tr.app-attention-warning { border-left-width: 4px; }
  .app-table .table.app-stack tr.app-attention-critical { border-left-color: var(--critical); }
  .app-table .table.app-stack tr.app-attention-warning { border-left-color: var(--warning); }
  .app-table .table.app-stack tr.app-attention-critical > :first-child, .app-table .table.app-stack tr.app-attention-warning > :first-child { box-shadow: none; }
  .app-body .table.app-stack > :not(caption) > tr > :empty, .app-body .table.app-stack > :not(caption) > tr > :has(> .app-cell:empty) { display: none; }
}
@media (max-width: 991.98px) {
  /* Page 14: the run's businesses compare across columns; the held name column stays narrow so the figures beside it show */
  .app-body .table.app-business-table.app-compare > :not(caption) > tr > :first-child { width: 11rem; min-width: 11rem; max-width: 11rem; white-space: normal; overflow-wrap: anywhere; }
}
/* Page 14 at the desktop: the businesses' columns fit their panel, the headings wrapping rather than pushing Status out */
.app-table .table.app-business-table thead th { white-space: normal; vertical-align: bottom; }
.app-table .table.app-business-table .app-business-cell { min-width: 10rem; max-width: 14rem; }
.app-table .table.app-business-table .app-status-cell { min-width: 8.5rem; }
.app-table .table.app-business-table > :not(caption) > * > * { padding-left: var(--s2); padding-right: var(--s2); }
/* UX fix 1, pages 04, 06 and 15: in a flush panel the table's first and last cells keep the desktop gutter (24px), which on a
   record card indented the record's name and narrowed the last row's label column, so its value sat out of line */
@media (max-width: 991.98px) {
  .app-body .app-panel-flush .app-table .table.app-stack > :not(caption) > tr > td:first-child,
  .app-body .app-panel-flush .app-table .table.app-stack > :not(caption) > tr > td:last-child { padding-left: 0; padding-right: 0; }
}

/* Long descriptions are never clipped inside their box (the review, row 26; DESIGN.md acceptance 1): a text area grows with
   what it holds, from a few lines, in the browsers that size fields to their content */
.app-body textarea.form-control { field-sizing: content; min-height: 5.5rem; }
/* UX fix 1, page 16: a cost table's caption on a record card is a heading across the card, not a narrow column */
@media (max-width: 991.98px) { .app-body .table.app-stack.app-cost-table > caption { display: block; width: 100%; } }

/* A fold whose summary holds a heading keeps its marker beside the words when the heading wraps (UX fix 1, Money) */
.app-body details > summary > :is(h2, h3, .app-panel-title) { display: inline; }
/* Run a survey: the one-line cost and Start sit above the figures in full (FIX-ROUND-21 N3), which keep their own space */
.app-survey-form .app-form-footer + .app-estimate { margin-top: var(--s5); }
.app-survey-summary { margin: var(--s4) 0 0; }

/* Scout v3 (SCOUT-V3-SPEC section 6): the three labels and the coverage on the record, each its own item, wrapping on the phone */
.app-v3-labels { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
.app-v3-label { white-space: nowrap; max-width: 100%; }
/* FIX-ROUND-22 item 7: a confidence said with its reason ("medium, incomplete: ...") wraps inside its label at 390 */
.app-v3-label strong { white-space: normal; }

/* FIX-ROUND-23 items 9 to 12 (GPT's layout instruction; DESIGN 2.2): the run page's layers. Key facts as labels and values, Needs attention as problem, consequence, action; a row's facts inline, the verdict as four labelled lines, a caution as a mark, the rest behind Details. */
.app-key-facts { margin: 0 0 var(--s6); }
.app-attention { margin: 0 0 var(--s6); padding: var(--s4) var(--s6); background: color-mix(in srgb, var(--warning) 7%, var(--surface-1)); border: 1px solid var(--hairline-soft); border-left: 4px solid var(--warning); border-radius: var(--radius-panel); }
.app-attention .app-h3 { margin: 0 0 var(--s3); }
/* FIX-ROUND-24 item 5: one grid for the whole list, so the three columns share their edges on every row. Each row was its own grid, and its action column (max-content) was a different width on each row, so the middle column began at a different place on every row and read as centred */
.app-attention-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr) max-content; gap: var(--s2) var(--s4); align-items: baseline; }
.app-attention-list li { display: contents; }
.app-attention-list li > * { text-align: left; justify-self: start; }
.app-attention-problem { font-weight: 700; }
.app-attention-consequence { color: var(--ink-muted); }
.app-attention-action { font-weight: 600; white-space: nowrap; }
/* FIX-ROUND-24 item 4: the Decision summary's labelled lines and the marks legend, the words of a mark on hover or tap */
.app-decision-summary { margin: 0 0 var(--s3); }
.app-marks-legend { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s2); align-items: center; margin: 0 0 var(--s3); }
.app-legend-mark { display: inline-flex; align-items: center; gap: var(--s1); }
.app-legend-mark .app-chip { cursor: help; }
.app-legend-words { display: none; }
.app-legend-mark:hover .app-legend-words, .app-legend-mark:focus-within .app-legend-words { display: inline; }
.app-decision-facts { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); margin: var(--s2) 0 0; font-size: var(--text-meta); }
.app-decision-facts > div { display: inline; }
.app-decision-facts dt { display: inline; color: var(--ink-muted); font-weight: 500; }
.app-decision-facts dd { display: inline; margin: 0 0 0 var(--s1); font-weight: 600; }
.app-verdict { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s4); margin: var(--s3) 0 0; }
.app-verdict dt { color: var(--ink-muted); font-size: var(--text-meta); font-weight: 500; line-height: 1.6; }
.app-verdict dd { margin: 0; }
.app-verdict .app-verdict-lean { font-weight: 700; }
/* FIX-ROUND-25 item 1: where the verdict came from and when, quiet under the four lines */
.app-verdict .app-verdict-source { color: var(--ink-muted); font-size: var(--text-meta); }
.app-chip { display: inline-block; padding: 0 var(--s2); border-radius: 999px; font-size: var(--text-meta); font-weight: 600; line-height: 1.6; border: 1px solid var(--hairline-strong); color: var(--ink-muted); }
.app-chip-warning { color: var(--warning); border-color: var(--warning); }
.app-chip-priority { color: var(--brand-text); border-color: var(--brand-text); }
.app-decision-details { margin-top: var(--s2); }
.app-decision-details > :not(summary) { margin-top: var(--s2); }
.app-marks-note { margin: 0 0 var(--s3); }
.app-waiting-table .app-group-row th { background: var(--surface-2); font-weight: 650; }
.app-waiting-table details { margin-top: var(--s1); }
@media (max-width: 991.98px) {
  .app-attention-list { grid-template-columns: minmax(0, 1fr); }
  .app-attention-list li { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
  .app-attention-action { white-space: normal; }
  /* FIX-ROUND-25 item 3: the verdict keeps its label and value side by side on a phone (rule 7: a row's facts stay facts), half the height of ten stacked lines */
  .app-verdict { grid-template-columns: max-content minmax(0, 1fr); gap: var(--s1) var(--s3); }
}
/* FIX-ROUND-24 item 7 (DESIGN 2.2, layer 5): a page's supporting sections behind one disclosure each, the heading as the summary */
.app-section-disclosure { margin: 0 0 var(--s4); border-top: 1px solid var(--hairline-soft); }
.app-section-disclosure > summary { cursor: pointer; padding: var(--s3) 0; list-style-position: inside; }
.app-section-disclosure > summary .app-h3 { display: inline; margin: 0; }
.app-section-disclosure[open] > summary { padding-bottom: var(--s2); }
/* FIX-ROUND-25 item 2: the marks beside the record's decision heading, as a row carries them */
.app-decision-marks { font-weight: 400; margin-left: var(--s1); }
/* FIX-ROUND-25 item 4: a register task on Today: the business as the heading line, one labelled line under it, the detail behind a disclosure */
.app-queue-fact { display: block; font-size: var(--text-meta); color: var(--ink-muted); margin-top: 2px; }
.app-queue-fact-label { font-weight: 600; margin-right: var(--s1); }
.app-queue-more { margin-top: var(--s1); }
.app-queue-more > summary { color: var(--ink-muted); }
/* FIX-ROUND-25 item 9: counts as labelled counts in one line, wrapping on a phone */
.app-facts-list.app-counts-inline { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s6); margin: 0 0 var(--s3); }
.app-counts-inline .app-fact { display: flex; gap: var(--s2); align-items: baseline; grid-template-columns: none; }
.app-counts-inline .app-fact dd { font-weight: 600; }
.app-table-foot .app-counts-inline { margin: 0; }
/* the final layout fix: the survey's own counts, folded below the rows */
.app-survey-details { margin: var(--s4) 0 0; }
.app-survey-details > summary { color: var(--ink-muted); }
/* FIX-ROUND-25 item 3: the link to the one table, quiet under the Decision heading */
.app-decision-table-link { margin: 0 0 var(--s2); }

/* ==== SCREEN-PROSPECT-RECORD-2026-10-27.md (28 October 2026): the prospect record, Decide first ==== */
/* the one warning line, no explanation in view; the four buttons in one bar, sticky at the foot of a phone screen */
.app-decide-warning { margin: 0 0 var(--s3); font-size: 1rem; }
.app-decide-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); margin: var(--s3) 0; }
.app-decide-bar .app-inline-form { display: flex; flex-direction: row; align-items: center; gap: var(--s2); }
.app-decided { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin: var(--s3) 0; font-weight: 500; }
.app-decide .app-record-decision + .app-record-decision { margin-top: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--hairline-soft); }
@media (max-width: 575.98px) {
  .app-decide-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; margin: 0; padding: var(--s3) var(--s4); background: var(--surface-1); border-top: 1px solid var(--hairline); box-shadow: var(--shadow-raised); }
  .app-decide-bar .btn { flex: 1 1 auto; }
  .app-decide-bar .form-select-sm { flex: 1 1 100%; min-width: 0; }
  .app-body:has(.app-decide-bar) { padding-bottom: 7rem; }
}
/* SCREEN-PROSPECT-RECORD sections 8 and 9: History's four buttons, each opening its own list below the row; More actions as visible buttons, a form opening in place */
.app-fold-button { cursor: pointer; list-style: none; display: inline-flex; }
.app-fold-button::-webkit-details-marker { display: none; }
.app-fold-button::before { content: none; }
.app-history { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.app-history > details { margin: 0; border: 0; background: transparent; box-shadow: none; }
.app-history > details[open] { flex: 1 1 100%; order: 1; border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); background: var(--surface-1); }
.app-history > details[open] > summary { margin: var(--s3); }
.app-history-actions, .app-more-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--s2) var(--s3); }
.app-history-actions > details, .app-more-actions > details { flex: 0 1 auto; }
.app-history-actions > details[open], .app-more-actions > details[open] { flex: 1 1 100%; order: 1; }
.app-history-actions > details > form, .app-more-actions > details > form { max-width: var(--form-width); }
.app-more-actions-section { margin-top: var(--s8); padding-top: var(--s4); border-top: 1px solid var(--hairline-soft); }

/* Outreach (SCREEN-OUTREACH-2026-10-29.md): the email exactly as it will go, the go-live checklist, the More links */
.app-email { white-space: pre-wrap; font: inherit; padding: var(--s4); margin: 0 0 var(--s4); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-panel); max-width: 72ch; }
.app-email-edit { font: inherit; white-space: pre-wrap; }
.app-reject-form { display: flex; align-items: center; gap: var(--s2); }
.app-reject-form .form-select { width: auto; max-width: 18em; }
.app-golive { list-style: none; padding: 0; margin: 0; }
.app-golive > li { padding: var(--s3) 0; border-top: 1px solid var(--hairline-soft); }
.app-checklist-row { display: flex; align-items: flex-start; gap: var(--s3); }
.app-checklist-key { font-weight: 600; min-width: 2.2em; }
.app-checklist-row > span:nth-child(2) { flex: 1 1 auto; }
.app-input-note { width: 16em; display: inline-block; margin-right: var(--s2); }
.app-link-list { list-style: none; padding: 0; margin: 0; }
.app-link-list > li { padding: var(--s2) 0; border-top: 1px solid var(--hairline-soft); }
.app-link-list > li:first-child { border-top: 0; }

/* Code boxes (UX batch, 2 November 2026, item 1): one box per character over the one real input, which sits invisibly on
   top so every tap, key and paste reaches it; the active box carries the focus ring. Wrong: critical and a 300 ms shake
   (colour only under reduced motion). Right: success for 400 ms before the page moves on. */
.app-code-stack { position: relative; max-width: 336px; }
.app-code-boxes { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s2); }
.app-code-box { display: flex; align-items: center; justify-content: center; height: 56px; min-width: 0; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--surface-1); color: var(--ink); font-size: 1.5rem; font-weight: 650; font-variant-numeric: tabular-nums; transition: border-color 120ms ease, background-color 120ms ease, color 120ms ease; }
.app-code-box.is-active { border-color: var(--interactive-strong); box-shadow: 0 0 0 2px var(--interactive); }
.app-code-field .app-code-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: transparent; color: transparent; caret-color: transparent; opacity: 0.01; font-size: 16px; }
.app-code-field[data-code-state="wrong"] .app-code-box { border-color: var(--critical); color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); }
.app-code-field[data-code-state="right"] .app-code-box { border-color: var(--success); color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface-1)); }
.app-code-field[data-code-state="checking"] .app-code-box { color: var(--ink-muted); }
/* the refusal words sit after the stack, not beside the input, so they are shown by the field's own state */
.app-code-field.app-field-invalid .invalid-feedback { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .app-code-field[data-code-state="wrong"] .app-code-boxes { animation: app-code-shake 300ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both; }
  @keyframes app-code-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
}

/* The payment success mark (UX batch, 2 November 2026, item 2): a card shape that gives one soft green glow (about 900 ms)
   while the tick draws itself in semantic-success. CSS and SVG only; under reduced motion the tick is shown, still. */
.app-pay-mark { display: flex; justify-content: center; margin: 0 0 var(--s4); }
.app-pay-card { overflow: visible; }
.app-pay-card-shape { fill: var(--surface-1); stroke: var(--hairline-strong); stroke-width: 2; }
.app-pay-card-band { fill: var(--surface-3); }
.app-pay-tick { fill: none; stroke: var(--success); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .app-pay-card { animation: app-pay-glow 900ms ease-out 1 both; border-radius: 12px; }
  .app-pay-tick { stroke-dasharray: 100; stroke-dashoffset: 100; animation: app-pay-draw 600ms ease-out 250ms 1 forwards; }
  @keyframes app-pay-draw { to { stroke-dashoffset: 0; } }
  @keyframes app-pay-glow { 0% { filter: drop-shadow(0 0 0 rgba(41, 104, 63, 0)); } 45% { filter: drop-shadow(0 0 14px rgba(41, 104, 63, 0.55)); } 100% { filter: drop-shadow(0 0 0 rgba(41, 104, 63, 0)); } }
}

/* The B&P loader (UX batch, 2 November 2026, item 3): three bricks in brand red drop in and stack, two side by side and one
   on top; the top brick breaks into four Pixel Blue squares that fade. One 1.4 s loop; decorative, the words beside it carry
   the status. Under reduced motion the three bricks stand stacked and still. */
.app-loader { display: inline-block; flex: none; vertical-align: -0.125em; overflow: visible; }
.app-loader-sm { width: 16px; height: 16px; }
.app-loader-md { width: 24px; height: 24px; }
.app-loader-brick { fill: var(--brand); transform-box: fill-box; transform-origin: center; }
.app-loader-bit { fill: var(--interactive); opacity: 0; transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .app-loader-brick-1 { animation: app-loader-drop-1 1400ms ease-out infinite; }
  .app-loader-brick-2 { animation: app-loader-drop-2 1400ms ease-out infinite; }
  .app-loader-brick-3 { animation: app-loader-drop-3 1400ms ease-out infinite; }
  .app-loader-bit { animation: app-loader-bits 1400ms ease-out infinite; }
  .app-loader-bit-1 { --bit-x: -3px; --bit-y: -3px; }
  .app-loader-bit-2 { --bit-x: 3px; --bit-y: -3px; }
  .app-loader-bit-3 { --bit-x: -3px; --bit-y: 2px; }
  .app-loader-bit-4 { --bit-x: 3px; --bit-y: 2px; }
  @keyframes app-loader-drop-1 { 0% { opacity: 0; transform: translateY(-9px); } 14% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 1; transform: translateY(0); } }
  @keyframes app-loader-drop-2 { 0%, 14% { opacity: 0; transform: translateY(-9px); } 28% { opacity: 1; transform: translateY(0); } 92%, 100% { opacity: 1; transform: translateY(0); } }
  @keyframes app-loader-drop-3 { 0%, 28% { opacity: 0; transform: translateY(-9px); } 42% { opacity: 1; transform: translateY(0); } 58% { opacity: 1; transform: translateY(0); } 62%, 100% { opacity: 0; transform: translateY(0); } }
  @keyframes app-loader-bits { 0%, 60% { opacity: 0; transform: translate(0, 0); } 64% { opacity: 1; transform: translate(0, 0); } 88%, 100% { opacity: 0; transform: translate(var(--bit-x), var(--bit-y)); } }
}

/* The Agents floor (SCREEN-AGENTS-FLOOR-2026-11-02.md; UX batch item 4): the scene with its tags over it, the card docked
   right, the keyboard list under the scene (visually hidden on a wide screen, the view on a phone). The scene's own colours
   live in floor.js; everything around it takes the tokens. */
.app-floor-switch { margin-bottom: var(--s4); }
.app-floor-stage { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s4); margin-bottom: var(--s6); }
.app-floor-scene { position: relative; min-height: 560px; border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); overflow: hidden; background: linear-gradient(180deg, var(--canvas), var(--surface-2)); }
.app-floor-scene canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.app-floor-labels { position: absolute; inset: 0; pointer-events: none; }
.app-floor-tag { position: absolute; transform: translate(-50%, -100%); display: flex; align-items: center; gap: 6px; padding: 3px 9px 3px 6px; background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: 999px; box-shadow: var(--shadow-raised); font-size: 11.5px; white-space: nowrap; color: var(--ink); pointer-events: auto; cursor: pointer; }
.app-floor-tag b { font-weight: 700; }
.app-floor-tag .app-floor-fig { color: var(--ink-muted); }
.app-floor-tag .app-floor-badge { padding: 0 6px; background: var(--brand); color: var(--on-brand); border-radius: 999px; font-weight: 700; font-size: 10.5px; }
.app-floor-tag .app-floor-strike { color: var(--critical); font-weight: 700; }
.app-floor-tag.is-dim { opacity: 0.85; background: var(--surface-2); }
.app-floor-tag.is-dim b { font-weight: 500; color: var(--ink-muted); }
.app-floor-bubble { position: absolute; transform: translate(-50%, -100%); max-width: 240px; padding: 6px 9px; background: var(--ink); color: var(--canvas); border-radius: 9px; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-floor-bubble::after { content: ''; position: absolute; left: 50%; bottom: -5px; margin-left: -5px; border: 5px solid transparent; border-bottom: 0; border-top-color: var(--ink); }
.app-floor-wall { position: absolute; transform: translate(-50%, -50%); display: flex; gap: 14px; padding: 8px 12px; background: var(--rail); color: var(--on-rail); border-radius: 6px; font-size: 11px; box-shadow: var(--shadow-raised); }
.app-floor-wall div { display: flex; flex-direction: column; align-items: center; }
.app-floor-wall b { font-size: 18px; color: #FFFFFF; font-variant-numeric: tabular-nums; }
.app-floor-wall .app-floor-wall-title { align-self: center; font-size: 10px; letter-spacing: 0.08em; color: var(--on-rail-muted); writing-mode: vertical-rl; transform: rotate(180deg); }
.app-floor-roomlabel { position: absolute; transform: translate(-50%, -50%); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-muted); }
.app-floor-legend { position: absolute; left: var(--s3); bottom: var(--s3); display: flex; flex-wrap: wrap; gap: var(--s3); padding: 6px 10px; background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); font-size: var(--text-meta); color: var(--ink-muted); }
.app-floor-legend span { display: inline-flex; align-items: center; gap: 5px; }
.app-floor-zoom { position: absolute; right: var(--s3); bottom: var(--s3); display: flex; flex-direction: column; gap: var(--s1); }
.app-floor-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.app-floor-dot-work { background: var(--interactive); }
.app-floor-dot-wait { background: var(--brand); }
.app-floor-dot-idle { background: var(--on-rail-muted); }
.app-floor-dot-off { background: var(--ink-subtle); }
.app-floor-dot-none { background: var(--surface-3); border: 1px solid var(--hairline); }
.app-floor-dot-light-green { background: var(--success); }
.app-floor-dot-light-amber { background: var(--warning); }
.app-floor-dot-light-red { background: var(--critical); }
.app-floor-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--surface-2); color: var(--ink-muted); }
.app-floor-chip-work { background: color-mix(in srgb, var(--interactive) 16%, var(--surface-1)); color: var(--interactive-strong); }
.app-floor-chip-wait { background: color-mix(in srgb, var(--brand) 14%, var(--surface-1)); color: var(--brand-text); }
.app-floor-chip-off { background: var(--surface-3); }
.app-floor-light-red { color: var(--critical); }
.app-floor-light-amber { color: var(--warning); }
.app-floor-light-green { color: var(--success); }
.app-floor-card { min-width: 0; max-height: 640px; overflow: auto; padding: var(--s6); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); display: flex; flex-direction: column; gap: var(--s3); }
.app-floor-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.app-floor-card-title { margin: 0; font-size: var(--text-section); font-weight: 650; }
.app-floor-kv { margin: 0; }
.app-floor-meter { height: 6px; margin-top: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.app-floor-meter i { display: block; height: 100%; width: 0; background: var(--interactive); }
.app-floor-meter i[data-pct="100"], .app-floor-meter .app-floor-meter-full { background: var(--critical); }
.app-floor-meter .app-floor-meter-high { background: var(--warning); }
.app-floor-actions { display: flex; flex-wrap: wrap; gap: var(--s2); }
.app-floor-talk { width: 100%; }
.app-floor-composer { display: flex; gap: var(--s2); }
.app-floor-composer .form-control { min-width: 0; }
.app-floor-picklist { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--s3); }
.app-floor-pick { display: flex; align-items: center; gap: var(--s2); padding: 6px 8px; border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); }
.app-floor-pick.is-disabled { opacity: 0.55; }
.app-floor-report { padding-top: var(--s2); border-top: 1px solid var(--hairline-soft); font-size: 13.5px; line-height: 1.5; }
.app-floor-compact { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.app-floor-compact:focus-within { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.app-floor-rows { margin: 0; padding: 0; }
.app-floor-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); padding: var(--s2) 0; border-bottom: 1px solid var(--hairline-soft); }
.app-floor-rowbtn { display: inline-flex; align-items: center; gap: var(--s2); padding: 0; border: 0; background: none; font: inherit; color: var(--ink); cursor: pointer; }
.app-floor-rowbtn:focus-visible { outline: 2px solid var(--interactive); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 900px) {
  .app-floor-stage { grid-template-columns: 1fr; }
  .app-floor-scene { display: none; }
  .app-floor-card { max-height: none; }
  .app-floor-compact { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* Today's greeting line (UX batch, 2 November 2026, item 5): one line, only the non-zero counts, each a link. */
.app-greeting { margin: 0 0 var(--s6); font-size: var(--text-section); font-weight: 500; line-height: 1.4; }
.app-greeting a { color: var(--interactive-strong); }
.app-greeting-sep { color: var(--ink-muted); }

/* The Pipeline board (UX batch, 2 November 2026, item 6): a column per stage in a row that scrolls inside its box, never the
   page; cards; the side panel for Won and Lost; at a phone's width one stage at a time, chosen with the picker. */
.app-board-switch { margin-bottom: var(--s4); }
.app-board-picker { display: none; }
.app-board { display: flex; gap: var(--s3); overflow-x: auto; padding-bottom: var(--s3); align-items: flex-start; }
.app-board-column { flex: 0 0 248px; min-width: 248px; background: var(--surface-2); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); padding: var(--s3); min-height: 120px; }
.app-board-column.is-over { outline: 2px solid var(--interactive); outline-offset: -2px; }
.app-board-column-title { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s2); margin: 0 0 var(--s3); font-size: var(--text-meta); font-weight: 650; color: var(--ink); }
.app-board-count { font-weight: 500; color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.app-board-cards { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: 0; min-height: 40px; }
.app-board-card { position: relative; display: flex; flex-direction: column; gap: var(--s1); padding: var(--s3); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-control); }
.app-board-card[draggable="true"] { cursor: grab; }
.app-board-card.is-dragging { opacity: 0.5; }
.app-board-card-name { font-weight: 650; color: var(--ink); }
.app-board-card-meta, .app-board-card-score { font-size: var(--text-meta); color: var(--ink-muted); }
.app-board-menu { margin-top: var(--s1); }
.app-board-menu > summary { list-style: none; display: inline-flex; }
.app-board-menu > summary::-webkit-details-marker { display: none; }
.app-board-menu-list { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.app-board-refusal { font-size: var(--text-meta); }
.app-board-refusal[hidden] { display: none; }
.app-board-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100%); padding: var(--s6); background: var(--surface-1); border-left: 1px solid var(--hairline-soft); box-shadow: var(--shadow-modal); overflow: auto; z-index: 1040; }
.app-board-panel[hidden] { display: none; }
@media (max-width: 640px) {
  .app-board-picker { display: block; margin-bottom: var(--s3); }
  .app-board { display: block; overflow: visible; }
  .app-board-column { min-width: 0; margin-bottom: var(--s3); }
  .app-board-column:not(.is-current) { display: none; }
  .app-board:not(:has(.is-current)) .app-board-column { display: block; }
}

/* The Social planner (SCREEN-SOCIAL-PLANNER-2026-11-02.md; UX batch item 7): the month grid Monday to Sunday with a chip per
   post coloured by its state (draft outlined, approved Pixel Blue, posted green with a tick, failed or missed red), the week
   as seven columns, the unscheduled tray at the right edge; at a phone's width the month becomes a day list. */
.app-social-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); margin-bottom: var(--s4); }
.app-social-nav { display: flex; align-items: center; gap: var(--s2); }
.app-social-month { font-size: var(--text-section); font-weight: 650; min-width: 11ch; text-align: center; }
.app-social-layout { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--s4); align-items: start; }
.app-social-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); overflow: hidden; }
.app-social-weekdays { display: contents; }
.app-social-weekdays span { padding: var(--s2) var(--s3); background: var(--surface-2); font-size: var(--text-meta); font-weight: 600; color: var(--ink-muted); }
.app-social-day { min-height: 104px; padding: var(--s2); background: var(--surface-1); }
.app-social-grid-week .app-social-day { min-height: 320px; }
.app-social-day.is-outside { background: var(--canvas); color: var(--ink-muted); }
.app-social-day.is-today .app-social-day-number { background: var(--brand); color: var(--on-brand); }
.app-social-day.is-over { outline: 2px solid var(--interactive); outline-offset: -2px; }
.app-social-day-head { display: flex; justify-content: flex-end; }
.app-social-day-number { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 28px; padding: 0 var(--s1); border-radius: 999px; font-size: var(--text-meta); font-weight: 650; color: var(--ink); text-decoration: none; }
a.app-social-day-number:hover { background: var(--surface-2); }
.app-social-day-posts { display: flex; flex-direction: column; gap: var(--s1); margin-top: var(--s1); }
.app-social-chip { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 3px 8px 3px 3px; border: 1px solid var(--hairline); border-radius: 999px; background: var(--surface-1); color: var(--ink); font-size: var(--text-meta); text-decoration: none; }
.app-social-chip.is-dragging, .app-social-tray-card.is-dragging { opacity: 0.5; }
.app-social-chip-draft { border-style: dashed; }
.app-social-chip-scheduled, .app-social-chip-waiting { border-color: var(--interactive); background: color-mix(in srgb, var(--interactive) 14%, var(--surface-1)); }
.app-social-chip-posted { border-color: var(--success); background: color-mix(in srgb, var(--success) 12%, var(--surface-1)); color: var(--success); }
.app-social-chip-failed, .app-social-chip-missed { border-color: var(--critical); background: color-mix(in srgb, var(--critical) 10%, var(--surface-1)); color: var(--critical); }
.app-social-chip-time { font-variant-numeric: tabular-nums; font-weight: 600; }
.app-social-icon { width: 16px; height: 16px; flex: none; }
.app-social-tick { width: 16px; height: 16px; flex: none; }
.app-social-thumb { width: 28px; height: 28px; flex: none; border-radius: 6px; object-fit: cover; background: var(--surface-3); }
.app-social-thumb-none { display: inline-block; }
.app-social-tray { padding: var(--s4); background: var(--surface-1); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); }
.app-social-tray-list { display: flex; flex-direction: column; gap: var(--s2); margin: 0; padding: 0; }
.app-social-tray-card { display: flex; align-items: center; gap: var(--s2); padding: var(--s2); border: 1px dashed var(--hairline); border-radius: var(--radius-control); background: var(--surface-1); cursor: grab; }
.app-social-tray-card .app-social-thumb { width: 40px; height: 40px; }
.app-social-state { font-weight: 650; margin: 0 0 var(--s3); }
.app-social-when { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); max-width: 420px; }
.app-social-where { margin-bottom: var(--s4); }
.app-social-images { display: flex; flex-wrap: wrap; gap: var(--s3); margin: 0 0 var(--s3); padding: 0; }
.app-social-image { display: flex; flex-direction: column; gap: var(--s1); }
.app-social-image img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-control); border: 1px solid var(--hairline-soft); }
.app-social-caption-tabs { display: inline-flex; gap: 2px; padding: 2px; margin-bottom: var(--s3); background: var(--surface-2); border-radius: var(--radius-control); }
.app-social-preview { display: flex; gap: var(--s3); max-width: 520px; padding: var(--s3); border: 1px solid var(--hairline-soft); border-radius: var(--radius-panel); background: var(--surface-1); }
.app-social-preview img { width: 240px; height: 240px; object-fit: cover; border-radius: var(--radius-control); flex: none; }
.app-social-preview-none { width: 120px; height: 120px; border-radius: var(--radius-control); }
.app-social-preview-text { margin: 0; white-space: pre-wrap; font-size: var(--text-meta); }
@media (max-width: 991.98px) {
  .app-social-layout { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .app-social-grid { display: flex; flex-direction: column; gap: 0; background: var(--surface-1); }
  .app-social-weekdays { display: none; }
  .app-social-day { display: flex; gap: var(--s3); min-height: 0; border-bottom: 1px solid var(--hairline-soft); }
  .app-social-grid-month .app-social-day.is-outside { display: none; }
  .app-social-day-head { justify-content: flex-start; }
  .app-social-day-posts { flex: 1; margin-top: 0; }
  .app-social-when { grid-template-columns: 1fr; }
}