/* ============================================================================
   ARES PHE — theme layer (visual refresh, v4.031)
   ============================================================================
   Loaded AFTER the inline <style> block in templates/index.html and BEFORE
   static/responsive.css. Rules here may recolour existing selectors; they may
   NOT move them — test_layout_freeze.py fails the build if a protected selector
   gains a geometry declaration in this file. Desktop-only chrome (the rail, the
   header) sits behind @media (min-width: 1025px) so phone and tablet keep the
   layout responsive.css gives them.

   Design: docs/plans/2026-09-09-visual-refresh-design.md
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    --ui-font: 'IBM Plex Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --ui-mono: 'IBM Plex Mono', Consolas, 'Courier New', monospace;
    --rail-w: 232px;

    --color-primary: #072d56;
    --color-primary-light: #0A3A6E;
    --color-primary-hover: #051e3a;
    --color-accent: #e94560;
    --color-accent-hover: #c62a42;
    --color-surface: #ffffff;
    --logo-plate: #ffffff;   /* the logo's white, in every theme */
    --color-surface-raised: #f8fafc;
    --color-bg: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-light: #eef2f6;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
    --color-btn-primary: #0A3A6E;
    --color-btn-primary-hover: #072d56;
    --color-btn-danger: #dc2626;
    --color-btn-danger-hover: #b91c1c;
    --color-btn-success: #059669;
    --color-btn-success-hover: #047857;
    --color-btn-warning: #d97706;
    --color-btn-warning-hover: #b45309;
    --color-success: #059669;
    --color-warning: #d97706;
    --color-warning-dark: #b45309;
    --color-error: #dc2626;
    --color-info: #0A3A6E;

    --ui-success: #047857;  --ui-success-bg: #ecfdf5;
    --ui-warning: #b45309;  --ui-warning-bg: #fffbeb;
    --ui-danger: #b91c1c;   --ui-danger-bg: #fef2f2;
    --ui-info: #0A3A6E;     --ui-info-bg: #eef4ff;
    --ui-focus: 0 0 0 2px rgba(10, 58, 110, .35);
    --ui-shadow-1: 0 1px 2px rgba(15, 23, 42, .06);
    --ui-shadow-2: 0 4px 12px rgba(15, 23, 42, .10);
    --ui-shadow-3: 0 12px 40px rgba(15, 23, 42, .18);
    --ui-r1: 4px;
    --ui-r2: 8px;
    --ui-on-primary: #ffffff;

    --rail-bg: #072d56;
    --rail-fg: rgba(255, 255, 255, .82);
    --rail-fg-on: #ffffff;
    --rail-hover: rgba(255, 255, 255, .08);
    --rail-on: rgba(255, 255, 255, .12);
    --rail-line: rgba(255, 255, 255, .08);
    --rail-guide: rgba(255, 255, 255, .16);    /* the line a group's entries hang from (2026-10-10 v2) */
    --rail-fg-muted: rgba(255, 255, 255, .6);  /* sub-headings and the Favorites line - 4.5:1 on the navy */
    --rail-star: #f5b942;                      /* a pinned page's star */
    --av-bg: #dbe4f0;
    --av-fg: #072d56;
}

/* html.theme-dark-pref is stamped by the <head> script before first paint from the saved
   preference; once applyTheme() has run (body.theme-resolved) only body.theme-dark counts. */
body.theme-dark, html.theme-dark-pref body:not(.theme-resolved) {
    --color-surface: #111a2b;
    --color-surface-raised: #16213a;
    --color-bg: #0b1220;
    --color-border: #233047;
    --color-border-light: #1b2536;
    --color-text: #e5eaf1;
    --color-text-muted: #9aa8bb;
    --color-text-light: #6b7a90;
    --color-btn-primary: #2f6fd0;
    --color-btn-primary-hover: #3b7ddd;
    --color-primary-hover: #3b7ddd;
    --color-info: #93c5fd;
    --ui-success: #6ee7b7;  --ui-success-bg: #0f2a22;
    --ui-warning: #fcd34d;  --ui-warning-bg: #2f230b;
    --ui-danger: #fca5a5;   --ui-danger-bg: #3a1618;
    --ui-info: #93c5fd;     --ui-info-bg: #1a2a45;
    --ui-focus: 0 0 0 2px rgba(147, 197, 253, .45);
    --ui-shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --ui-shadow-2: 0 4px 12px rgba(0, 0, 0, .5);
    --ui-shadow-3: 0 12px 40px rgba(0, 0, 0, .6);
    --av-bg: #243650;
    --av-fg: #dbe4f0;
    color-scheme: dark;
}
/* Documents To Include window colours (v4.266) - see the .dc-* rules further down */
body {
    --dc-head-bg: var(--color-primary);
    --dc-head-fg: var(--ui-on-primary);
    --dc-title: var(--color-primary);
    --dc-blue: #2563eb;
    --dc-blue-hover: #1d4ed8;
    --dc-on-fg: #ffffff;
    --dc-chip-bg: var(--color-surface);
    --dc-chip-border: #c9d3e6;
    --dc-grey-bg: var(--color-bg);
    --dc-grey-fg: var(--color-text-light);
    --dc-grey-border: var(--color-border);
    --dc-note-bg: #fff6e5;
    --dc-note-border: #f0d9a8;
    --dc-note-fg: #7a5a00;
    --dc-backdrop: rgba(15, 23, 42, .38);
}
body.theme-dark, html.theme-dark-pref body:not(.theme-resolved) {
    --dc-head-bg: #072d56;
    --dc-title: var(--color-text);
    --dc-blue: #2f6fd0;
    --dc-blue-hover: #3b7ddd;
    --dc-chip-border: var(--color-border);
    --dc-note-bg: var(--ui-warning-bg);
    --dc-note-border: #5a4513;
    --dc-note-fg: var(--ui-warning);
    --dc-backdrop: rgba(0, 0, 0, .55);
}

/* Paper stays paper: documents render on white in both themes. */
.datasheet-page, .drawing-container, .ds-table { color-scheme: light; }
body.theme-dark .datasheet-page, body.theme-dark .drawing-container {
    --color-surface: #ffffff;
    --color-surface-raised: #f8fafc;
    --color-bg: #f1f5f9;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-text: #1e293b;
    --color-text-muted: #64748b;
    --color-text-light: #94a3b8;
}

/* ── Type ────────────────────────────────────────────────────────────────
   Chrome and CRM/Admin/News/Manual/Login get the UI font. Engineering content
   keeps the exact system stack the template has always used: a different
   font's metrics would change control heights by a pixel. */
body { font-family: var(--ui-font); }
.input-panel, #results-content, .results-panel, .detail-panel, .log-panel,
.datasheet-container, .drawing-container, #fluids-container, #pricelist-container,
#correlations-container, #design-crm-context {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.nw-ref { font-family: var(--ui-mono); }

/* ── Component kit (additive; screens migrate onto it in PR2/PR3) ───────── */
.ui-btn {
    display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border-radius: var(--ui-r1); font: inherit; font-size: 13px; font-weight: 600;
    border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text);
    cursor: pointer; white-space: nowrap; transition: background .15s, border-color .15s;
}
.ui-btn:hover { background: var(--color-surface-raised); }
.ui-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-btn--primary { background: var(--color-btn-primary); border-color: var(--color-btn-primary); color: #fff; }
.ui-btn--primary:hover { background: var(--color-btn-primary-hover); }
.ui-btn--ghost { border-color: transparent; background: transparent; color: var(--color-text-muted); }
.ui-btn--ghost:hover { background: var(--color-bg); color: var(--color-text); }
.ui-btn--danger { background: var(--color-btn-danger); border-color: var(--color-btn-danger); color: #fff; }
.ui-btn--danger:hover { background: var(--color-btn-danger-hover); }
.ui-btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.ui-btn--icon { width: 32px; padding: 0; justify-content: center; }
.ui-btn--icon.ui-btn--sm { width: 28px; }
.ui-btn svg, .ui-chip svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

.ui-pill {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px;
    border-radius: 999px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
    background: var(--color-bg); color: var(--color-text-muted);
}
.ui-pill::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.ui-pill--won, .ui-pill--success { background: var(--ui-success-bg); color: var(--ui-success); }
.ui-pill--lost, .ui-pill--cancelled, .ui-pill--danger { background: var(--ui-danger-bg); color: var(--ui-danger); }
.ui-pill--unknown, .ui-pill--pending, .ui-pill--negotiation, .ui-pill--warning { background: var(--ui-warning-bg); color: var(--ui-warning); }
.ui-pill--sent, .ui-pill--finalised, .ui-pill--info { background: var(--ui-info-bg); color: var(--ui-info); }

.ui-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); }
.ui-card-h { display: flex; align-items: center; gap: 8px; padding: 11px 16px; border-bottom: 1px solid var(--color-border-light); }
.ui-card-h h2, .ui-card-h h3 { font-size: 14px; font-weight: 600; margin: 0; color: var(--color-text); }
.ui-card-h .sp { flex: 1; }
.ui-card-h .cnt { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 1px 8px; }

/* A floating panel on the page (v4.094: My Company drawing preview) - previews never open a new window. */
.ui-float { position: fixed; top: 72px; right: 24px; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 96px); z-index: 9000; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-3); display: flex; flex-direction: column; }
.ui-float[hidden] { display: none; }
.ui-float-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 13px; font-weight: 600; color: var(--color-text); }
.ui-float-head .sp { flex: 1; }
.ui-float-body { overflow: auto; background: var(--color-surface-raised); }
.ui-float-body img { display: block; width: 100%; height: auto; background: var(--logo-plate); }

/* The Models box's tick list (v4.214, 'Several models…' - index.html _openModelPicker): a panel under the box, on the
   page, never a new window. Placed by the script (left / top / width); a phone docks it (responsive.css). */
.model-picker { position: fixed; z-index: 9100; display: flex; flex-direction: column; max-height: min(70vh, 540px); background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-3); font-size: 13px; }
.model-picker .mp-head { padding: 8px 12px; border-bottom: 1px solid var(--color-border); font-weight: 600; }
.model-picker .mp-body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 4px 12px; }
.model-picker .mp-fam { padding: 6px 0; border-bottom: 1px solid var(--color-border-light); }
.model-picker .mp-fam:last-child { border-bottom: 0; }
.model-picker .mp-fam-name { display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-weight: 600; }
.model-picker .mp-models { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-left: 20px; }
.model-picker .mp-model { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.model-picker label { cursor: pointer; }
.model-picker input[type="checkbox"] { width: auto; height: auto; margin: 0; }
.model-picker .mp-hint { padding: 4px 12px; font-size: 12px; color: var(--color-text-muted); }
.model-picker .mp-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--color-border); }
.model-picker .mp-foot .ui-btn { min-width: 72px; justify-content: center; }
/* The Models box's own menu (v4.214, Sergen's second look - index.html _openModelMenu): All, a Series row that opens
   the series under it, the models one by one, 'Several models…'. It shares the tick list's panel and phone dock. */
.model-picker.model-menu { display: block; overflow-y: auto; padding: 4px 0; outline: none; }
.model-menu .mm-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 12px; cursor: pointer; white-space: nowrap; user-select: none; }
.model-menu .mm-row > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.model-menu .mm-row.is-active { background: var(--ui-info-bg); }
.model-menu .mm-row.is-selected { color: var(--ui-info); font-weight: 600; }
.model-menu .mm-toggle { font-weight: 600; }
.model-menu .mm-indent { padding-left: 26px; }
.model-menu .mm-pick { color: var(--ui-info); }
.model-menu .mm-chev { width: 14px; height: 14px; transition: transform .15s; }
.model-menu .mm-chev.is-open { transform: rotate(180deg); }
.model-menu .mm-sep { height: 1px; margin: 4px 0; background: var(--color-border-light); }

/* Competitor bank (v4.099): the warning under the results and the movable values panel (values only since v4.107) */
.cb-warn { margin: 0; padding: 8px 14px; background: var(--ui-info-bg); border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: 12px; line-height: 1.55; }
.cb-warn[hidden] { display: none; }
.cb-warn-title { font-weight: 600; color: var(--ui-info); }
.cb-warn-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--color-border-light); }
.cb-warn-text { flex: 1 1 320px; min-width: 0; }
.cb-float .ui-float-head { cursor: move; user-select: none; touch-action: none; }
.cb-float .ui-float-head button { cursor: pointer; }
.cb-float { width: min(560px, calc(100vw - 32px)); }
.cb-values { background: var(--color-surface); }
.cb-values-table { width: 100%; border-collapse: collapse; font-size: 12px; color: var(--color-text); }
.cb-values-table th, .cb-values-table td { padding: 4px 10px; border-bottom: 1px solid var(--color-border-light); text-align: left; vertical-align: top; }
.cb-values-table thead th { position: sticky; top: 0; background: var(--color-surface); color: var(--color-text); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; border-bottom: 1px solid var(--color-border); }
.cb-values-table tbody th { font-weight: 500; color: var(--color-text-muted); white-space: nowrap; }
.cb-values-table td { font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cb-values-notes { padding: 8px 10px; font-size: 12px; }
.cb-unit-line { font-size: 11px; line-height: 1.3; margin-top: 1px; overflow-wrap: anywhere; }   /* v4.132: the unit under the plate model */
/* v4.134: the region / country filter above the Competitors tabs */
.cb-geo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0 4px; }
.cb-geo-bar:empty { display: none; }
.cb-geo-label { font-size: 12px; font-weight: 600; color: var(--color-text-muted); margin-right: 2px; }
.cb-geo-chip { border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); border-radius: 999px;
               padding: 3px 10px; font-size: 12px; cursor: pointer; }
.cb-geo-chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--ui-on-primary); }
.cb-geo-chip .cnt { opacity: .75; margin-left: 2px; }
.cb-geo-country { font-size: 12px; margin-left: 8px; display: inline-flex; align-items: center; gap: 6px; }
.cb-geo-unknown { font-size: 11.5px; margin-left: 6px; }
.cb-geo-chip.cb-geo-none:not(.active) { border-color: var(--ui-warning); background: var(--ui-warning-bg); }
/* v4.137: Competitor analysis - the Design page's switch and its pop-up */
.ca-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); cursor: pointer;
             user-select: none; }
.ca-switch[hidden] { display: none; }
.ca-switch input { margin: 0; cursor: pointer; }
.save-crm-modal.cb-modal.ca-modal { width: min(920px, calc(100vw - 32px)); }
.ca-ours { margin-bottom: 10px; font-size: 12.5px; }
.ca-card { border: 1px solid var(--color-border); border-left-width: 4px; border-radius: 8px; padding: 10px 12px; margin-bottom: 10px;
           background: var(--color-surface); }
.ca-card.ca-theirs { border-left-color: var(--ui-warning); }
.ca-card.ca-close { border-left-color: var(--color-primary); }
.ca-card.ca-ours { border-left-color: var(--ui-success); }
.ca-card-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.ca-card-head .crm-btn { margin-left: auto; }
.ca-figs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px 14px; font-size: 12.5px; }
.ca-figs .cb-label { display: block; }
.ca-pct { color: var(--color-text-muted); }
.ca-text { margin: 8px 0 4px; font-size: 12.5px; line-height: 1.45; }
.ca-levers { margin: 0 0 0 18px; padding: 0; font-size: 12.5px; }
.ca-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--color-border); }
/* v4.201 (Sergen): Design Settings > Plate Type = Semi-Welded splits its cell in two - the plate type on the left,
   "Welded Side" and its select on the right, on the same two rows (label, control) as every other cell. The class is
   added at run time only (_syncWeldedSideField): the default cell is untouched (test_layout_freeze.py). Phones and
   tablets stack the pair (responsive.css). */
.field.pt-semi-welded { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto;
                        grid-auto-flow: column; column-gap: 6px; row-gap: 1px; }
#welded_side[hidden], #welded_side_label[hidden] { display: none; }
/* v4.203 (Sergen): Set as Own Default takes the slot of the removed "Enter all measurements" switch - under the
   heat-balance line, on the left, 4px below it, and exactly as tall as the switch's label was (15px), so on a desktop
   nothing on the Design sheet moves or changes size (measured at 1680 and 1920 px). Phones and tablets get a real tap
   target (responsive.css). */
.own-default-row { margin-top: 4px; display: flex; align-items: center; }
.own-default-row .crm-btn { height: 15px; padding: 0 10px; line-height: 13px; }
/* v4.136: tick datasheets - Set country (ARES admin) / Delete (super admin) */
.cb-bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 8px; font-size: 12.5px; }
.cb-bulk-count { color: var(--color-text-muted); margin-right: 4px; }
.cb-sel-col { width: 28px; text-align: center; }
.cb-del-list { margin: 0 0 8px 18px; padding: 0; }
.cb-doc-keep { margin: 0 0 4px; }
.cb-scope [hidden] { display: none !important; }
.cb-panel { margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--ui-r2); background: var(--color-surface-raised); font-size: 12px; }
.cb-panel-title { display: flex; align-items: center; gap: 8px; font-weight: 600; margin-bottom: 4px; }
.cb-panel .crm-table { margin-top: 8px; }
.cb-decide { white-space: nowrap; }
.cb-decide .crm-th-select { max-width: 160px; }
.cb-new { margin-top: 4px; padding: 8px 10px; border: 1px dashed var(--color-border); border-radius: var(--ui-r2); background: var(--color-surface-raised); }
.cb-new .cb-row input.form-input { flex: 1 1 200px; min-width: 0; }
.cb-pending-hint { color: var(--ui-warning); }
.cb-home-drafts { margin-bottom: 12px; }
.pkg-card { padding: 12px 14px; }
.pkg-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 8px; font-size: 13px; }
.pkg-group { margin: 10px 0 0; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--ui-r2); background: var(--color-surface-raised); font-size: 12px; }
.pkg-group-title { font-weight: 600; margin-bottom: 6px; }
.pkg-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 4px 0; }
.pkg-label { min-width: 120px; color: var(--color-text-muted); }
.pkg-check { display: inline-flex; align-items: center; gap: 4px; }
.pkg-num { display: inline-flex; align-items: center; gap: 6px; }
.pkg-num input.form-input { width: 90px; }
.pkg-models { min-width: 220px; }
.pkg-usage-row { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; margin: 4px 0 8px; }
.pkg-editor { margin-top: 12px; padding: 12px; border: 1px dashed var(--color-border); border-radius: var(--ui-r2); }
.pkg-home { margin-bottom: 12px; }
/* ── Package screens (v4.140, Admin design stage 2): the switch grid, the plan card and meters, the plan cards and
   comparison, the editor and Apply dialogs, the company's read-out. The five pinned selectors above stay as they are.
   No class may take one of the six data-hook names (pkg-tabs, pkg-design_standards, ... - pkgFormRead reads them). */
.pkg-group-h { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.pkg-group-h .ico { width: 16px; height: 16px; stroke: var(--color-text-muted); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.pkg-group-h .pkg-group-title { margin: 0; font-size: 13px; }
.pkg-group-h .sp { flex: 1; }
.pkg-count { font-size: 11px; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.pkg-group-note { margin: 0 0 8px; font-size: 11.5px; color: var(--color-text-muted); }
.pkg-row { display: grid; grid-template-columns: 152px minmax(0, 1fr); gap: 6px 14px; align-items: start; margin: 8px 0; }
.pkg-label { min-width: 0; padding-top: 5px; font-size: 12px; color: var(--color-text-muted); }
.pkg-cell { min-width: 0; }
.pkg-opts { display: flex; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.pkg-check { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-size: 12px; cursor: pointer; }
.pkg-check input { flex: none; width: 14px; height: 14px; margin: 0; accent-color: var(--color-btn-primary); }
.pkg-check:focus-within { box-shadow: var(--ui-focus); }
.pkg-check:has(input:checked) { background: var(--ui-info-bg); color: var(--ui-info); }
.pkg-num { display: inline-flex; align-items: center; gap: 6px; }
.pkg-num input.form-input { width: 92px; text-align: right; font-variant-numeric: tabular-nums; }
.pkg-unit, .pkg-hint { font-size: 11.5px; color: var(--color-text-muted); }
.pkg-hint { margin: 4px 0 0; }
.pkg-row.pkg-changed { border-left: 3px solid var(--ui-info); padding-left: 8px; margin-left: -11px; }
.pkg-row.pkg-changed > .pkg-label::after { content: ' \25CF'; color: var(--ui-info); font-size: 9px; vertical-align: 2px; }
.pkg-group--off { opacity: .55; }
.pkg-group--off .pkg-opts, .pkg-group--off .pkg-num, .pkg-group--off .pkg-models { pointer-events: none; }
.pkg-settings-h { font-size: 15px; font-weight: 600; margin: 16px 0 4px; }
.pkg-plan-card { border: 1px solid var(--color-border); border-radius: var(--ui-r2); padding: 12px 14px; background: var(--color-surface); }
.pkg-plan-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pkg-kicker { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.pkg-plan-name { font-size: 18px; font-weight: 700; }
.pkg-usage-cell { display: flex; flex-direction: column; gap: 5px; min-width: 160px; }
.pkg-usage { font-size: 12px; color: var(--color-text-muted); }
.pkg-usage strong { font-size: 15px; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; }
.pkg-meter { display: block; height: 5px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.pkg-meter i { display: block; height: 100%; border-radius: 999px; background: var(--ui-success); }
.pkg-usage-cell--warn .pkg-meter i { background: var(--ui-warning); }
.pkg-usage-cell--over .pkg-meter i { background: var(--ui-danger); }
.pkg-usage-cell--over .pkg-usage strong { color: var(--ui-danger); }
.pkg-usage-nolimit { font-size: 11px; color: var(--color-text-muted); }
.pkg-limit { margin: 8px 0 2px; padding: 8px 10px; border-radius: var(--ui-r1); background: var(--ui-danger-bg); color: var(--ui-danger); font-size: 12px; display: flex; flex-direction: column; gap: 4px; }
.pkg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--color-border-light); }
.pkg-change { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-muted); }
.pkg-select.form-input { width: auto; min-width: 220px; height: 30px; padding: 0 10px; font: inherit; font-size: 12.5px; }
.pkg-detach { color: var(--ui-danger); }
.pkg-diff { margin-top: 12px; }
.pkg-diff-row { display: grid; grid-template-columns: 152px 1fr; gap: 14px; padding: 6px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 12.5px; }
.pkg-diff-row:last-child { border-bottom: 0; }
.pkg-diff-label { color: var(--color-text-muted); }
.pkg-chip { font-weight: 600; }
.pkg-chip--add { color: var(--ui-success); }
.pkg-chip--rem { color: var(--ui-danger); }
.pkg-chip--chg { color: var(--color-text); }
.pkg-save-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; font-size: 12px; }
.pkg-read-note { margin: 12px 0 4px; font-size: 12.5px; }
.pkg-head .cnt { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 2px 9px; }
.pkg-head .cnt:empty { display: none; }
.pkg-head .sp { flex: 1; }
.pkg-title { font-size: 15px; }
.pkg-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin: 10px 0; }
.pkg-plan { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--color-border); border-radius: var(--ui-r2); padding: 12px 14px; background: var(--color-surface); text-align: left; }
.pkg-plan--retired { opacity: .7; background: var(--color-surface-raised); }
.pkg-plan--editing { box-shadow: var(--ui-focus); }
.pkg-plan--new { align-items: center; justify-content: center; border-style: dashed; color: var(--color-text-muted); cursor: pointer; font: inherit; font-size: 12.5px; }
.pkg-plan--new .ico { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; }
.pkg-plan-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; }
.pkg-plan-desc { font-size: 12px; color: var(--color-text-muted); min-height: 32px; }
.pkg-plan-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 12px; color: var(--color-text-muted); }
.pkg-plan-count { border: 0; background: transparent; padding: 0; font: inherit; font-weight: 600; color: var(--color-text); cursor: pointer; text-decoration: underline dotted; }
.pkg-plan-acts { display: flex; gap: 6px; margin-top: auto; padding-top: 6px; }
.pkg-compare summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 6px 0; }
.pkg-matrix { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.pkg-matrix th, .pkg-matrix td { padding: 6px 10px; border-bottom: 1px solid var(--color-border-light); text-align: left; }
.pkg-matrix thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); background: var(--color-surface-raised); }
.pkg-matrix thead th + th, .pkg-matrix td { text-align: center; }
.pkg-matrix tbody th { font-weight: 400; }
.pkg-matrix-sec th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); background: var(--color-surface-raised); text-align: left; }
.pkg-tick { width: 16px; height: 16px; stroke: var(--ui-success); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pkg-dash, .pkg-addon-cell { color: var(--color-text-light); }
.pkg-addon-cell { font-size: 11px; }
.pkg-addon { display: inline-block; margin-left: 6px; font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 1px 6px; vertical-align: 1px; }
.pkg-company-list { margin: 0 0 8px; padding-left: 18px; font-size: 13px; }
.admin-modal.pkg-editor { width: min(960px, 96vw); padding: 0; display: flex; flex-direction: column; max-height: 92vh; }
.pkg-editor-h { display: flex; align-items: center; gap: 10px; padding: 14px 20px 10px; border-bottom: 1px solid var(--color-border-light); }
.pkg-editor-h h3 { margin: 0; font-size: 16px; }
.pkg-editor-meta { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 12px 20px 0; }
.pkg-editor-meta .pkg-field { display: flex; flex-direction: column; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; color: var(--color-text-muted); min-width: 200px; }
.pkg-editor-meta .pkg-field--wide { flex: 1; min-width: 260px; }
.pkg-editor-meta .pkg-field .form-input { width: 100%; }
.pkg-editor-body { padding: 4px 20px 12px; overflow-y: auto; }
.pkg-editor-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 20px; border-top: 1px solid var(--color-border); background: var(--color-surface); position: sticky; bottom: 0; }
.pkg-foot-note { font-size: 11.5px; }
.admin-modal.pkg-editor label { margin: 0; }
.admin-modal.pkg-editor .pkg-check { display: inline-flex; font-weight: 400; color: var(--color-text); }
.admin-modal.pkg-editor .pkg-label { display: block; font-weight: 400; }
.admin-modal.pkg-editor .pkg-num input.form-input { width: 92px; }
.admin-modal.pkg-editor .pkg-row input.pkg-models { width: auto; min-width: 220px; }
.pkg-warn { margin: 12px 20px 0; padding: 8px 10px; border-radius: var(--ui-r1); background: var(--ui-warning-bg); color: var(--ui-warning); font-size: 12.5px; }
.pkg-apply-tools { display: flex; align-items: center; gap: 12px; padding: 10px 20px 4px; font-size: 12px; }
.pkg-apply-list { padding: 0 20px 8px; }
.pkg-apply-row { display: grid; grid-template-columns: 20px 1fr auto; gap: 6px 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--color-border-light); font-size: 12.5px; cursor: pointer; }
.pkg-apply-row input { margin: 0; width: 14px; }
.pkg-apply-name { font-weight: 600; }
.pkg-apply-plan { color: var(--color-text-muted); }
.pkg-apply-warn { grid-column: 2 / -1; color: var(--ui-warning); font-size: 11.5px; }
.admin-modal.pkg-editor .pkg-apply-row { display: grid; font-weight: 400; }     /* beats .admin-modal label's display: block */
#pl-package [hidden], .admin-modal.pkg-editor [hidden] { display: none !important; }   /* a pill's own display would beat the attribute */
.pkg-home .crm-section-card-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pkg-home .pkg-home-link { margin-left: auto; }
#pl-package.is-read .pkg-check { cursor: default; position: relative; }
#pl-package.is-read .pkg-check input { position: absolute; opacity: 0; width: 0; height: 0; }
#pl-package.is-read .pkg-check::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
#pl-package.is-read .pkg-check--on { background: var(--ui-success-bg); color: var(--ui-success); border-color: transparent; font-weight: 600; }
#pl-package.is-read .pkg-check--off { color: var(--color-text-muted); background: transparent; opacity: .75; }
#pl-package.is-read .pkg-check--off::before { width: 8px; height: 1.5px; border-radius: 1px; }
#pl-package.is-read .form-input:disabled { background: transparent; border-color: transparent; padding-left: 0; color: var(--color-text); font-weight: 600; }
#pl-package.is-read .form-input:disabled::placeholder { color: var(--color-text-muted); font-weight: 400; }
#pl-package.is-read .pkg-num input.form-input { text-align: left; width: 84px; }
.cb-master-editor { margin: 0; }
.cb-nos { display: inline-flex; align-items: center; gap: 4px; margin-top: 2px; font-size: 11px; color: var(--color-text-muted); }
.cb-field.cb-missing .form-input { border-color: var(--color-warning); }
.cb-unread { padding: 8px 10px; border-left: 3px solid var(--color-warning); background: var(--color-surface-raised); font-size: 12px; }
.cb-unread ul { margin: 4px 0 0; padding-left: 18px; columns: 2; }
.cb-unread li { margin: 1px 0; }
.cb-master-editor .cb-row label { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
.cb-panel-title .cnt, .cb-home-drafts .cnt { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 1px 8px; }
/* above the rail (z 1000) - the wide dialog reaches under it on a laptop; below the datasheet panel (z 9000) */
.save-crm-overlay.cb-scope { z-index: 1100; }
.cb-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--color-text-muted); }
.save-crm-modal.cb-modal { width: min(1180px, calc(100vw - 32px)); max-height: 92vh; }
.cb-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.cb-grid.cb-grid--form-only { grid-template-columns: minmax(0, 1fr); }
.cb-label { display: block; font-size: 12px; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
.cb-hint { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; }
.cb-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0; }
.cb-preview { position: relative; margin-top: 8px; border: 1px solid var(--color-border); background: var(--logo-plate); }
.cb-preview img { display: block; width: 100%; height: auto; pointer-events: none; }
.cb-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.cb-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.cb-field { min-width: 0; }
.cb-field > .form-input { width: 100%; box-sizing: border-box; }
.cb-field label { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); margin-bottom: 2px; }
.cb-field--wide { grid-column: 1 / -1; }
.cb-field.cb-read .form-input { border-color: var(--ui-info); }
.cb-num { display: flex; gap: 4px; }
.cb-num input.form-input { flex: 1 1 auto; min-width: 0; }
.cb-num select.form-input { flex: 0 1 auto; width: auto; max-width: 52%; }
.cb-unit { align-self: center; font-size: 12px; color: var(--color-text-muted); }
.cb-req { color: var(--ui-danger); }
.cb-save-msg { flex: 1; min-width: 0; align-self: center; font-size: 12px; color: var(--ui-danger); }

.ui-chip {
    display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface);
    font-size: 12px; font-weight: 500; color: var(--color-text); white-space: nowrap; cursor: pointer;
}
.ui-chip--on { background: var(--ui-info-bg); border-color: var(--color-primary-light); color: var(--ui-info); }

.ui-empty { padding: 20px 16px; text-align: center; color: var(--color-text-muted); font-size: 12.5px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ui-empty svg { width: 24px; height: 24px; stroke: var(--color-text-light); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ui-empty strong { color: var(--color-text); }

.ui-avatar { width: 24px; height: 24px; border-radius: 50%; background: var(--av-bg); color: var(--av-fg); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ico { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ── Private Label list + company page (v4.142, Admin design stage 4a) ────────────────────────────────────────
   The list: a count, a search box, .ui-pill states, an honest ellipsis; the company page: a .crm-hl record header
   with the logo on its white plate, the tab strip on the shared subnav, the Profile on the one field kit. The
   uppercase section headings keep class="t-h2 t-primary" (pinned) and take their rule from here, scoped to Admin. */
.ui-count { display: inline-block; min-width: 18px; padding: 1px 7px; border-radius: 999px; background: var(--ui-info-bg); color: var(--ui-info); font-size: 11.5px; font-weight: 600; line-height: 16px; text-align: center; vertical-align: 2px; }
.ui-count[hidden] { display: none; }
#sheet-admin .pl-list-search { margin-left: auto; width: 240px; max-width: 100%; }
#sheet-admin .admin-act-danger { color: var(--ui-danger); }
#sheet-admin .admin-act-danger:hover { background: var(--ui-danger-bg); border-color: var(--ui-danger); }
#sheet-documents .admin-act-danger { color: var(--ui-danger); }                                   /* 2026-10-02: the Documents Delete */
#sheet-documents .admin-act-danger:hover { background: var(--ui-danger-bg); border-color: var(--ui-danger); }
.pl-hl { margin-top: 4px; }
.pl-hl-logo { display: inline-flex; align-items: center; height: 40px; max-width: 160px; flex: none; }
.pl-hl-logo img { max-height: 34px; max-width: 148px; object-fit: contain; display: block; }
.pl-hl-logo[hidden], #pl-hl-link-wrap[hidden] { display: none; }
.pl-hl .crm-hl-sub code { font-size: 12px; }
.pl-subnav { gap: 2px; margin: 0 0 16px; border-bottom: 2px solid var(--color-border); padding-bottom: 0; }
#sheet-admin .t-primary { color: var(--ui-info); }
#sheet-admin .t-h2.t-primary { border-bottom: 2px solid currentColor; padding-bottom: 4px; margin: 0 0 10px; }
#sheet-admin .pl-tab-content > .t-h2.t-primary:not(:first-child), #sheet-admin .pl-tab-content .pl-policy-only > .t-h2.t-primary { margin-top: 20px; }
.pl-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px 18px; max-width: 900px; }
.pl-form-grid--4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }   /* four across in the 700px dialog */
.pl-form-grid > div { min-width: 0; }
/* FB-10: the Mix box's own choice (% or channels), inside its label: the cell does not grow */
#rating_mix_unit { all: unset; display: inline-block; font: inherit; line-height: 1; color: var(--ui-info);
    text-decoration: underline; cursor: pointer; }
#rating_mix_unit:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: 1px; }
.pl-form-grid label.form-label { display: block; margin-bottom: 4px; }
.pl-form-grid .form-input { width: 100%; box-sizing: border-box; }
.pl-form-max { max-width: 900px; }
.pl-logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.admin-modal.pl-new-dlg h3 { margin: 0 0 4px; }
.admin-modal.pl-new-dlg .pl-form-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }   /* three across at 700px */
.admin-modal.pl-new-dlg .pl-form-grid--4 { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }   /* the admin's four */
.admin-modal.pl-new-dlg .pl-dlg-h { font-size: 11px; font-weight: 700; color: var(--ui-info); text-transform: uppercase; letter-spacing: .5px; margin: 14px 0 8px; padding-bottom: 4px; border-bottom: 1px solid var(--color-border); }
.admin-modal.pl-new-dlg label.form-label { margin: 0 0 4px; font-weight: 400; }
.admin-modal.pl-new-dlg .form-hint { margin: 6px 0 0; }

/* ── Company page tabs (v4.143, Admin design stage 4b): Model Mapping, Pricing, Users, Drawings, Preview ────────
   One header idiom per tab, the field kit on every input, no nested scrollers (the page scrolls), sprite icons. */
.pl-tab-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.pl-tab-head .form-hint { max-width: 720px; }
.pl-tab-head-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.pl-tab-foot { margin-top: 12px; display: flex; justify-content: flex-end; }
#sheet-admin .pl-mm-table thead th { position: sticky; top: 0; z-index: 1; }
.pl-mm-default { font-weight: 400; color: var(--color-text-light); text-transform: none; letter-spacing: 0; }
.pl-mm-cell { position: relative; }
.pl-mm-input.form-input { width: 100%; box-sizing: border-box; min-width: 96px; padding-right: 58px; }
.pl-mm-input.is-custom { border-color: var(--ui-info); }
.pl-mm-yours { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.pl-mm-yours[hidden] { display: none; }
.pl-num.form-input { width: 64px; text-align: center; padding: 3px 4px; }
.pl-num--manual.form-input { background: var(--ui-warning-bg); }
/* every number box in a pricing table on the field kit - class="pl-fb-input" is pinned as it is, so by attribute */
#sheet-admin .pl-table input[type=number] { width: 64px; padding: 3px 4px; text-align: center; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 11px; }
#sheet-admin .pl-table input.pl-fb-input { width: 84px; }
#sheet-admin .pl-table input.pl-num--manual { background: var(--ui-warning-bg); }
.pl-bulk { padding: 10px 12px; margin-bottom: 12px; }
.pl-bulk-title { font-size: 12px; font-weight: 700; color: var(--ui-info); margin-bottom: 8px; }
.pl-bulk-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.pl-bulk-field { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--color-text-muted); }
#sheet-admin .pl-section { border: 1px solid var(--color-border); border-radius: var(--ui-r2); overflow: visible; }
#sheet-admin .pl-section-header { background: var(--color-surface-raised); color: var(--color-text); cursor: pointer; border-radius: var(--ui-r2) var(--ui-r2) 0 0; }
#sheet-admin .pl-section-header .pl-chev { width: 14px; height: 14px; transition: transform .15s; }
#sheet-admin .pl-section-header .pl-chev.is-open { transform: rotate(180deg); }
#sheet-admin .pl-table-wrap { max-height: none; overflow: visible; }
#sheet-admin .pl-table td.pl-top { vertical-align: top; }
.pl-user-form { padding: 12px; margin-bottom: 12px; }
.pl-dwg-head { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.pl-ico-btn { background: none; border: none; cursor: pointer; padding: 2px; color: var(--ui-info); display: inline-flex; vertical-align: middle; }
.pl-ico-btn .ico { width: 14px; height: 14px; }
.pl-ico-btn.admin-act-danger { color: var(--ui-danger); }
.pl-up { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 24px; border: 1px dashed var(--color-text-light); border-radius: 4px; color: var(--color-text-muted); vertical-align: middle; }
.pl-up .ico { width: 14px; height: 14px; }
.pl-up:hover { border-color: var(--ui-info); color: var(--ui-info); }
.pl-limit-note { margin-bottom: 12px; border: 1px dashed var(--color-border); border-radius: var(--ui-r2); }
.pl-preview-empty { padding: 40px 16px; }

/* ── Admin views (v4.144, Admin design stage 5a): Users, the user dialogs, Pending Approvals, the Organisation chart ──
   The users table pages and searches like the CRM lists; Edit User is two columns on the wide shell with a sticky
   footer; the org chart's cards are classes at 11px minimum (the phone rules in responsive.css keep targeting
   .org-card and the inline margin-left:22px indent). */
#sheet-admin .admin-search { margin-left: auto; width: 240px; max-width: 100%; }
/* Edit + Send invitation / Reset password + Delete: two lines, not four - a max-width on the flex box (never a min-width
   on the cell, which pushed the table past the card) */
#admin-view-users td:last-child .admin-actions { max-width: 280px; margin-left: auto; row-gap: 4px; }
#admin-view-users td:last-child .crm-btn-sm { padding: 3px 7px; font-size: 11.5px; }
#admin-view-users td, #admin-view-users th { padding-left: 8px; padding-right: 8px; }
#admin-view-users th .crm-th-select { max-width: 112px; }        /* the filter pills starved the Actions column */
#admin-view-users td:last-child { min-width: 176px; }            /* two compact buttons per line; fits at 1440 with the pills narrowed */
.admin-modal.adm-eu-wide { width: min(900px, 96vw); padding: 0; display: flex; flex-direction: column; max-height: 92vh; }
.admin-modal.adm-eu-wide > h3 { padding: 20px 24px 0; margin-bottom: 6px; }
.adm-eu-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; padding: 0 24px 8px; overflow: auto; }
.adm-eu-col { min-width: 0; }
.admin-modal .adm-eu-grid label.form-label { display: block; margin: 12px 0 4px; font-weight: 400; }
.admin-modal .adm-eu-grid .form-input { width: 100%; box-sizing: border-box; }
.adm-eu-box { border: 1px solid var(--color-border); border-radius: var(--ui-r2); padding: 8px 12px 10px; font-size: 12px; }
.adm-eu-box-h { font-weight: 600; margin: 6px 0 4px; }
.adm-eu-box-h:first-child { margin-top: 0; }
.admin-modal .adm-eu-check { display: inline-flex; align-items: center; gap: 4px; margin: 0 12px 4px 0; font-weight: 400; font-size: 12px; color: var(--color-text); }
.admin-modal .adm-eu-check input { width: auto; }
.admin-modal .modal-btns.adm-eu-foot { position: sticky; bottom: 0; margin: 0; padding: 12px 24px; background: var(--color-surface); border-top: 1px solid var(--color-border); }
.admin-modal.adm-eu-wide .modal-error { padding: 0 24px 12px; }
#admin-view-org .org-card { display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; margin: 2px 0; border: 1px solid var(--color-border); border-radius: 5px; background: var(--color-surface); cursor: grab; font-size: 12px; }
#admin-view-org .org-card--fixed { cursor: default; }
#admin-view-org .org-card-ico { display: inline-flex; color: var(--color-text-muted); }
#admin-view-org .org-card-name { font-size: 12px; font-weight: 600; }
#admin-view-org .org-card-sub { font-size: 11px; color: var(--color-text-muted); margin-left: 5px; }
#admin-view-org .org-inactive { color: var(--ui-warning); }
#admin-view-org .org-select { font-size: 11px; border: 1px solid var(--color-border); border-radius: 3px; padding: 1px 2px; background: var(--color-surface); color: var(--color-text); }
#admin-view-org .org-vis { font-size: 11px; border: 1px solid var(--color-text-light); border-radius: 3px; background: var(--color-surface-raised); color: var(--color-text-muted); cursor: pointer; padding: 1px 5px; }
#admin-view-org .org-vis.is-open { border-color: var(--ui-success); background: var(--ui-success-bg); color: var(--ui-success); }
#admin-view-org .ui-pill.org-region .ico { width: 11px; height: 11px; }
#admin-view-org .ui-pill.org-region::before { display: none; }
#admin-view-org .org-unassigned-hint { font-size: 11px; color: var(--ui-warning); margin-bottom: 8px; }
#admin-view-org .org-waiting { margin: 0 0 10px; }
#admin-view-org .org-waiting a { color: var(--ui-info); }

/* ── Admin views (v4.145, Admin design stage 5b): Audit Log, User Activity, News + Read Receipts, the Home package card ──
   Audit and Activity page like the CRM lists; the news rows are classes so they stack on a phone; the popup's PDF
   link and the thumbnail tile carry tokens instead of hexes from script. */
.act-since { font-size: 12px; color: var(--color-text-muted); margin: 6px 0 10px; }
.act-count { display: inline-block; margin-right: 14px; }
.act-h4 { margin: 18px 0 6px; font-size: 13px; display: flex; align-items: center; gap: 8px; }
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-row { display: flex; gap: 12px; align-items: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); padding: 12px; }
.news-row--hidden { background: var(--color-bg); }
.news-row-body { flex: 1; min-width: 0; }
.news-row-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.news-row-title { font-size: 14px; }
.news-row-desc { font-size: 12px; color: var(--color-text-muted); margin-bottom: 4px; white-space: pre-line; }
.news-row-meta { font-size: 11px; color: var(--color-text-muted); }
.news-row-actions { flex: none; }
.news-thumb { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--color-bg); border: 1px solid var(--color-border); color: var(--color-text-muted); }
.news-thumb .ico { width: 24px; height: 24px; }
.news-thumb-label { font-size: 10px; font-weight: 700; }
.news-thumb--missing { width: 100px; height: 70px; border-radius: 6px; }
.news-thumb-img { object-fit: cover; flex: none; background: var(--color-bg); }
.news-form { padding: 14px 16px; margin-bottom: 16px; }
.news-form .t-h2.t-primary { margin-bottom: 10px; }
.news-form .form-label { display: block; margin-bottom: 4px; }
.news-form .admin-input { width: 100%; box-sizing: border-box; }
.news-form textarea.admin-input { resize: vertical; font: inherit; font-size: 12px; }
.news-form-preview { margin-top: 6px; }
.news-form-thumb { max-height: 60px; border-radius: 4px; }
.news-pdf-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ui-info); font-weight: 600; }
.news-popup-pdf { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 20px; margin: 0 16px; border-radius: 8px; background: var(--ui-danger-bg); color: var(--ui-danger); font-weight: 600; font-size: 14px; text-decoration: none; }
.news-popup-pdf .ico { width: 24px; height: 24px; }
.pkg-home { padding: 8px 12px; }
.pkg-home .pkg-usage-row { margin: 4px 0 4px; }

/* ── Admin views (v4.146, Admin design stage 5c): Model Management, Agreement, Document Translations ─────────────
   The Model Management strip sits on the shared subnav (its flex-wrap lives here, so the phone rules' nowrap wins);
   the tables page and keep a sticky header; Control Data's boxes are cards; the seal is a pill; translation rows are
   classes that stack on a phone. */
.mm-subnav { flex-wrap: wrap; gap: 2px; margin: 0 0 16px; border-bottom: 2px solid var(--color-border); padding-bottom: 0; align-items: center; }
.mm-subnav > span { flex: 1; }
#sheet-admin .mm-search { width: 180px; }
/* F6 (2026-10-06): Frames > Check frames - pairs where a shorter frame holds as many plates as a longer one */
.mm-frames-check { margin: 0 0 12px; padding: 8px 10px; border-radius: var(--ui-r1); background: var(--ui-warning-bg); color: var(--ui-warning); font-size: 12.5px; }
.mm-frames-check.is-ok { background: var(--ui-success-bg); color: var(--ui-success); }
.mm-frames-check[hidden] { display: none; }
/* 2026-10-26: Model Management > Variants - a double wall's own 0.40 x 2 row, under its model's plates */
#sheet-admin tr.mm-dw-row td { background: var(--color-surface-raised); }
.mm-frames-check ul { margin: 6px 0 0 18px; padding: 0; }
#admin-view-models .admin-table thead th { position: sticky; top: 0; z-index: 1; }
.mm-cd-card { padding: 14px; }
.mm-cd-title { font-weight: 700; font-size: 13px; margin-bottom: 10px; }
#admin-view-models .mm-cd-num { width: 90px; padding: 4px 6px; text-align: right; }
#admin-view-models .mm-cd-num--wide { width: 100px; }
#sheet-admin .ui-pill.eula-seal::before { display: none; }
#admin-view-translations .tr-key { color: var(--color-text-muted); vertical-align: top; }
#admin-view-translations .tr-cell { padding-top: 4px; padding-bottom: 4px; }
#admin-view-translations .tr-input { width: 100%; box-sizing: border-box; }
#admin-view-translations .tr-input.is-edited { border-color: var(--ui-info); box-shadow: 0 0 0 1px var(--ui-info) inset; }
#admin-view-translations .tr-actions { white-space: nowrap; }

/* ── Header buttons (v4.147, Admin design stage 6): an icon that shows only when the label is dropped on a narrow phone ──── */
.header-btn .hb-ico { display: none; width: 14px; height: 14px; vertical-align: -2px; }

/* ── Legacy classes recoloured onto the tokens (colour only) ─────────────── */
.crm-btn-outline { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.crm-outcome-badge.won { background: var(--ui-success-bg); color: var(--ui-success); }
.crm-outcome-badge.lost { background: var(--ui-danger-bg); color: var(--ui-danger); }
.crm-outcome-badge.unknown, .crm-outcome-badge.pending { background: var(--ui-warning-bg); color: var(--ui-warning); }
.crm-tier-badge.key_account { background: var(--ui-info-bg); color: var(--ui-info); }
.crm-tier-badge.regular { background: var(--color-bg); color: var(--color-text-muted); }
.crm-tier-badge.prospect { background: var(--ui-success-bg); color: var(--ui-success); }
/* audit 2026-09-20 (F78): the darker variants of the same tokens, so white text clears 4.5:1 */
.role-badge.superadmin { background: var(--color-accent-hover); }
.role-badge.admin { background: var(--color-btn-danger); }
.role-badge.engineer { background: var(--color-btn-primary); }
.role-badge.viewer { background: var(--color-btn-success-hover); }
.role-badge.sales { background: var(--color-btn-warning-hover); }
.role-badge.godmode { background: var(--color-error); }   /* v4.235: the God Mode account's badge (owner 2026-10-08) */
.crm-table th { background: var(--color-surface-raised); }
.crm-table tr:nth-child(even) td { background: transparent; }
.crm-table tr:hover td { background: var(--color-surface-raised); }
.crm-table-more td { text-align: center; padding: 10px 12px; font-size: 11px; color: var(--color-text-muted); }
.crm-table-more span { margin-left: 10px; }
.crm-table tr.crm-table-more:hover td { background: transparent; }
.crm-header-bar, .crm-split-left, .crm-split-right, .crm-stat-card, .crm-quick-actions, .crm-hero-stat,
.crm-win-rate-card, .crm-reminder-card, .crm-note-card, .crm-pipeline-card, .crm-pipeline-col {
    background: var(--color-surface); border-color: var(--color-border);
}
.crm-activity-item { border-bottom-color: var(--color-border-light); }
.crm-activity-item .activity-time { color: var(--color-text-light); }
.crm-activity-item .activity-text { color: var(--color-text); }
.crm-form-group input, .crm-form-group select, .crm-list-search input { background: var(--color-surface); }
.crm-subnav-btn { background: var(--color-bg); }
.crm-subnav-btn.active { background: var(--color-surface); border-bottom-color: var(--color-surface); }
.crm-subview .crm-section-title { border-bottom-color: var(--color-border); }

/* ── Rail + header (desktop only) ───────────────────────────────────────── */
@media screen and (min-width: 1025px) {
    body { padding-left: var(--rail-w); padding-bottom: 0; }
    body.rail-collapsed { --rail-w: 56px; }
    html.rail-collapsed-pref body { --rail-w: 56px; }

    .sheet-tabs-bar {
        position: fixed; top: 0; bottom: 0; left: 0; right: auto; width: var(--rail-w); height: auto;
        display: flex; flex-direction: column; align-items: stretch; gap: 1px; padding: 0 8px;
        background: var(--rail-bg); border-top: none; overflow: hidden; z-index: 1000;
        font-family: var(--ui-font);
    }
    /* The brand row and the user footer are STICKY inside the scrolling rail: on a short
       screen the entry list scrolls underneath them and the signed-in user + role never
       leave view (owner, 2026-09-10). Done without a wrapper element on purpose —
       responsive.css addresses the rail's direct children for the phone tab bar. */
    .rail-brand { display: flex; align-items: center; gap: 10px; height: 44px; margin: 0 -8px 4px; padding: 0 16px; border-bottom: 1px solid var(--rail-line); flex: none; position: sticky; top: 0; z-index: 2; background: #fff; }
    /* The brand row is a WHITE section at the top of the rail so the original colour logo
       is used as it is (owner, 2026-09-12: "use white background on the top section so the
       logo can be used as original"); v4.064's reverse mark is gone. */
    .rail-brand .rail-logo { display: flex; align-items: center; }
    .rail-brand img { height: 28px; display: block; }
    .rail-brand .rail-ver { margin-left: auto; font-family: var(--ui-mono); font-size: 10px; color: var(--color-text-muted); }
    .rail-sep { display: block; height: 1px; background: var(--rail-line); margin: 6px 4px; flex: none; }

    .sheet-tab {
        display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 12px; margin: 0; border: none;
        border-radius: 6px; background: transparent; color: var(--rail-fg); font-size: 12.5px; font-weight: 500;
        white-space: nowrap; overflow: hidden; position: relative; flex: none; cursor: pointer;
    }
    a.sheet-tab { text-decoration: none; }   /* the Application Manual entry is a link (v4.265) */
    .sheet-tab:hover { background: var(--rail-hover); color: var(--rail-fg-on); }
    .sheet-tab.active { background: var(--rail-on); color: var(--rail-fg-on); font-weight: 600; }
    .sheet-tab.active::before { content: ''; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent); }
    #tab-help { background: transparent; color: var(--rail-fg); font-weight: 500; border: none; }
    #tab-help.active { background: var(--rail-on); color: var(--rail-fg-on); font-weight: 600; }
    .sheet-tab .tab-badge { margin-left: auto; background: var(--color-accent); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

    .rail-foot { margin: auto -8px 0; padding: 8px 12px; border-top: 1px solid var(--rail-line); display: flex; align-items: center; gap: 8px; color: #fff; flex: none; position: sticky; bottom: 0; z-index: 2; background: var(--rail-bg); }
    .rail-foot .user-name { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; min-width: 0; color: #fff; }
    .rail-foot .role-badge { font-size: 9px; padding: 1px 6px; border-radius: 3px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; color: #fff; }
    /* Two rows (v4.055): the role pill and up to three icon buttons squeezed the name to "A..".
       The name owns the first row; the pill sits left and the buttons right on the second. */
    .rail-foot { flex-wrap: wrap; row-gap: 6px; }
    .rail-foot .user-name { flex: 1 1 100%; }
    .rail-foot .role-badge { margin-right: auto; }
    .rail-ib { width: 28px; height: 28px; border-radius: 6px; border: none; background: transparent; color: rgba(255, 255, 255, .7); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; padding: 0; }
    .rail-ib:hover { background: var(--rail-hover); color: #fff; }
    .rail-ib svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

    body.rail-collapsed .sheet-tab .tab-label,
    body.rail-collapsed .sheet-tab .tab-badge,
    body.rail-collapsed .rail-brand .rail-ver,
    body.rail-collapsed .rail-foot .user-name,
    body.rail-collapsed .rail-foot .role-badge { display: none; }
    body.rail-collapsed .rail-sep { display: block; }
    body.rail-collapsed .sheet-tabs-bar { padding: 0 6px; }
    body.rail-collapsed .sheet-tab { justify-content: center; padding: 0; width: 44px; margin: 0 auto; }
    body.rail-collapsed .sheet-tab.active::before { left: -6px; }
    body.rail-collapsed .rail-brand { padding: 0; justify-content: center; margin: 0 -6px 4px; }
    body.rail-collapsed .rail-brand img { height: 20px; }
    body.rail-collapsed .rail-foot { flex-direction: column; padding: 8px 0; margin: auto -6px 0; gap: 6px; }

    header {
        background: var(--color-surface); color: var(--color-text); box-shadow: none;
        border-bottom: 1px solid var(--color-border); padding: 0 20px; height: 48px; gap: 8px;
        font-family: var(--ui-font);
    }
    header > div:first-child, header h1 { display: none; }
    #page-title { font-size: 15px; font-weight: 600; color: var(--color-text); }
    .header-user-info { font-size: 13px; }
    .header-user-info .header-btn {
        background: transparent; border: 1px solid transparent; color: var(--color-text-muted);
        border-radius: var(--ui-r1); padding: 0 12px; height: 32px; font-size: 13px; font-family: inherit;
    }
    .header-user-info .header-btn:hover { background: var(--color-bg); color: var(--color-text); }
    .header-user-info .header-btn:last-child { border-color: var(--color-border); color: var(--color-text); }
    #doc-lang option { color: var(--color-text); background: var(--color-surface); }
}

/* ── CRM, Salesforce-style (visual refresh part 2, v4.032) ─────────────────
   Scoped to .crm-container so the Design sheet's buttons (.crm-btn-lg on Run
   Auto-Selection) keep their frozen geometry. */
.crm-container { font-size: 13px; }
.crm-header-bar { border-radius: var(--ui-r2); padding: 14px 20px; margin: 0 0 16px; border-bottom: 1px solid var(--color-border); box-shadow: var(--ui-shadow-1); }
.crm-header-bar h2 { font-size: 20px; font-weight: 600; letter-spacing: 0; }
.crm-header-bar h2 span { font-size: 13px; }
.crm-title-row { margin-bottom: 0; }
.crm-page-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.crm-page-h h1 { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.2; color: var(--color-text); }
.crm-page-h .cnt { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 2px 9px; }
.crm-page-h .cnt:empty, .ui-card-h .cnt:empty { display: none; }
.t-light { color: var(--color-text-light); }
.crm-page-h .sp { flex: 1; }
.crm-toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.crm-toolbar input:not([type=date]), .crm-toolbar select, .crm-search {
    height: 32px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--ui-r1);
    background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 13px;
}
.crm-toolbar input[type=date] { height: 32px; padding: 0 8px; border: 1px solid var(--color-border); border-radius: var(--ui-r1); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12px; }
.crm-toolbar .crm-search { width: 260px; }
.crm-toolbar label { font-size: 12px; color: var(--color-text-muted); }
.crm-container .crm-btn { height: 32px; padding: 0 12px; font-size: 13px; font-weight: 600; border-radius: var(--ui-r1); display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.crm-container .crm-btn-sm { height: 28px; padding: 0 10px; font-size: 12px; }
.crm-container .crm-btn-lg { height: 36px; padding: 0 18px; font-size: 13px; }
.crm-container .crm-btn-ghost { height: auto; padding: 4px 8px; }
.crm-container .crm-btn-outline:hover { background: var(--color-surface-raised); }
.crm-container .crm-table { font-size: 13px; }
.crm-container .crm-table th { font-size: 11px; padding: 9px 10px; background: var(--color-surface-raised); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--color-border); }
.crm-container .crm-table td { padding: 0 10px; height: 36px; border-bottom: 1px solid var(--color-border-light); }
.crm-container .crm-table tr:hover td { background: var(--color-surface-raised); }
.crm-container .crm-table td[style*="font-size:10px"], .crm-container .crm-table td[style*="font-size: 10px"] { font-size: 12px !important; }
/* Filter dropdowns that live in a table header (Items: Customer / Project). A <select>
   sizes itself to its LONGEST option, so an unstyled one grew the column to the longest
   project name and pushed the table past the window (owner, 2026-09-10). Capped, on the
   kit, and never wider than its column. */
.crm-container .crm-th-select { width: 100%; max-width: 180px; min-width: 0; height: 26px; padding: 0 4px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r1); cursor: pointer; text-overflow: ellipsis; }
.crm-container .crm-th-select:focus { outline: 2px solid var(--color-primary-light); outline-offset: 1px; }
/* Attention flash for a control the user was just sent to (Send Offer header shortcut). */
@keyframes ui-flash { 0%, 100% { box-shadow: none; } 50% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .35); } }
.ui-flash { animation: ui-flash .8s ease-in-out 2; }
.crm-container .crm-th-select { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); border-radius: 999px; font-size: 11px; padding: 3px 8px; text-transform: none; width: auto; font-weight: 600; }
.crm-outcome-badge, .crm-tier-badge {
    display: inline-flex; align-items: center; gap: 5px; height: 22px; padding: 0 9px; border-radius: 999px;
    font-size: 11.5px; font-weight: 600; text-transform: none; min-width: 0; line-height: 1; letter-spacing: 0;
}
.crm-outcome-badge::before, .crm-tier-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.crm-outcome-badge.unknown::after { content: 'Open'; }
.crm-outcome-badge.won::after { content: 'Won'; }
.crm-outcome-badge.lost::after { content: 'Lost'; }
.crm-outcome-badge.unknown, .crm-outcome-badge.won, .crm-outcome-badge.lost { font-size: 0; }
.crm-outcome-badge.unknown::after, .crm-outcome-badge.won::after, .crm-outcome-badge.lost::after { font-size: 11.5px; }
.crm-section-card, .crm-split-left, .crm-split-right { border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); }
.crm-section-card-title, .crm-section-title { font-size: 14px; font-weight: 600; }
.crm-list-header { background: var(--color-surface-raised); color: var(--color-text); font-size: 13px; border-bottom: 1px solid var(--color-border); padding: 10px 12px; }
.crm-list-item { font-size: 13px; padding: 9px 12px; }
.crm-list-item .item-sub { font-size: 11px; }
.crm-list-item.active { background: var(--ui-info-bg); border-left-color: var(--color-primary-light); }
.crm-list-more { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; font-size: 11px; color: var(--color-text-muted); border-top: 1px solid var(--color-border); }
.crm-list-search input { height: 30px; font-size: 12.5px; }
.crm-form-group label { font-size: 11px; }
.crm-form-group input, .crm-form-group select { height: 32px; font-size: 13px; padding: 0 10px; }
.crm-rev-card { border: 1px solid var(--color-border); border-radius: 6px; margin-bottom: 8px; overflow: hidden; background: var(--color-surface); }
.crm-rev-header { background: var(--color-surface-raised); padding: 8px 12px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; }
.crm-rev-body { padding: 10px 12px; font-size: 12.5px; }
/* Highlights panel + two-column record page */
.crm-hl { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); padding: 16px 20px; margin-bottom: 16px; display: flex; flex-direction: column; gap: 14px; }
.crm-hl-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.crm-hl-big { width: 40px; height: 40px; border-radius: 8px; background: var(--color-primary); color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; flex: none; }
/* The name keeps at least 320px (the whole row beside the avatar on a phone): with flex: 1 its
   basis was 0, so the Owner / Share / Edit controls stayed on the row and squeezed a company
   name into one word per line (owner report, 2026-09-14). Now the controls wrap first. */
.crm-hl-title { min-width: 0; flex: 1 1 min(320px, calc(100% - 54px)); }
.crm-hl-title h3 { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.2; color: var(--color-text); }
.crm-hl-sub { font-size: 12.5px; color: var(--color-text-muted); display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.crm-hl-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-left: auto; }
.crm-hl-facts { display: flex; flex-wrap: wrap; }
.crm-hl-facts .f { display: flex; flex-direction: column; gap: 2px; padding: 0 22px; border-left: 1px solid var(--color-border-light); min-width: 0; }
.crm-hl-facts .f:first-child { padding-left: 0; border-left: none; }
.crm-hl-facts .k { font-size: 11px; color: var(--color-text-muted); white-space: nowrap; }
.crm-hl-facts .v { font-size: 13.5px; font-weight: 600; white-space: nowrap; color: var(--color-text); }
.crm-rec { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
/* Stacked record page (owner, 2026-09-10): the related lists take the full width so a
   project or contact row never wraps into three lines, and the detail cards sit side by
   side BELOW them in a row that folds to one column when the window is narrow. */
.crm-rec--stack { grid-template-columns: minmax(0, 1fr); }
.crm-rec-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; min-width: 0; }
.crm-rec-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.crm-rec .ui-card { overflow: hidden; }
/* Settings → Email Template editor (owner request, 2026-09-10). The markup keeps the
   test-pinned source order (textarea, hint, insert row); `order` presents it as
   toolbar → editor → preview → legend, full width. */
.crm2-email-intro { font-size: 12.5px; color: var(--color-text-muted); margin: 0 0 10px; }
.crm2-email-editor { margin-bottom: 16px; }
.crm2-email-editor-main { display: flex; flex-direction: column; gap: 10px; }
.crm2-email-editor-main > label { order: 0; }
.crm2-email-editor-main > #crm2-email-template-insert { order: 1; margin: 0; }
.crm2-email-editor-main > textarea { order: 2; }
.crm2-email-editor-main > .crm2-email-preview { order: 3; }
.crm2-email-editor-main > #crm2-email-template-hint { order: 4; }
.crm2-email-ta { width: 100%; max-width: 860px; min-height: 220px; resize: vertical; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.55; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--ui-r2); background: var(--color-surface); color: var(--color-text); }
.crm2-email-ta:focus { outline: 2px solid var(--color-primary-light); outline-offset: 1px; }
.crm2-ph-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.crm2-ph-row .lbl { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-right: 4px; }
.crm2-ph-chip { font-family: var(--ui-font); font-size: 12px; font-weight: 600; line-height: 1; padding: 6px 11px; border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.crm2-ph-chip:hover { background: var(--ui-info-bg); border-color: var(--color-primary-light); color: var(--color-primary); }
.crm2-email-preview { max-width: 860px; border: 1px dashed var(--color-border); border-radius: var(--ui-r2); background: var(--color-surface-raised); padding: 10px 14px; }
.crm2-email-preview .pv-h { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); margin-bottom: 6px; }
.crm2-email-preview .pv-h span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.crm2-email-preview pre { margin: 0; white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 13px; line-height: 1.5; color: var(--color-text); }
.crm2-email-legend { font-size: 12px; color: var(--color-text-muted); line-height: 1.5; max-width: 860px; }
.crm2-email-legend .lg-title { display: block; font-weight: 600; color: var(--color-text); margin-bottom: 4px; }
/* v4.055: the legend is a folded <details> — the Insert chips are the everyday control;
   the explanation opens on demand instead of taking a screen under the template. */
.crm2-email-legend summary.lg-title { display: list-item; cursor: pointer; margin-bottom: 0; }
.crm2-email-legend[open] summary.lg-title { margin-bottom: 6px; }
.crm2-email-legend ul { list-style: none; margin: 0 0 6px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 3px 20px; }
.crm2-email-legend li { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.crm2-email-legend code { font-family: var(--ui-mono); font-size: 11px; color: var(--color-primary-light); white-space: nowrap; }
.crm2-email-legend .lg-note { display: block; font-style: italic; }
/* Card header actions wrap onto a second line instead of being clipped by the card. */
.ui-card-h { flex-wrap: wrap; row-gap: 6px; }
.ui-card-h .acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-left: auto; }
.crm-rec .crm-table td.nw-phone { white-space: nowrap; }
.crm-kv { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 7px 12px; font-size: 12.5px; padding: 12px 16px; }
.crm-kv .k { color: var(--color-text-muted); white-space: nowrap; }
.crm-kv .v { font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.crm-card-body { padding: 12px 16px; }
.crm-card-body > .crm-table { margin: -12px -16px; width: calc(100% + 32px); }
/* 2026-10-12: a customer's discount buckets (its Discounts card), the Edit discounts
   dialog's boxes, and Admin > Discount Tiers - tokens only, so dark mode follows. */
.disc-box .disc-notes, .disc-box > .form-hint { padding: 0 16px 4px; }
.disc-box .disc-notes .form-hint { margin: 0 0 4px; }
.disc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0 12px; }
#admin-view-tiers .tiers-hint { max-width: 820px; margin: 6px 0 10px; }
/* 2026-10-13 (owner's sample at 1440 px: the last column, Extra discount, was cut off): the rate headers wrap, the
   boxes and the cells' padding are narrow - the table fits beside the side menu; narrower, it scrolls in #tiers-box */
#admin-view-tiers .tier-in { width: 4em; min-width: 0; text-align: right; }
#admin-view-tiers .tier-name { width: 9em; min-width: 0; }
#admin-view-tiers .tiers-table td { padding: 0 6px; }
#admin-view-tiers .tiers-table th { padding: 9px 6px; vertical-align: bottom; }
#admin-view-tiers .tiers-table th.num { text-align: right; white-space: normal; line-height: 1.3; }
/* Home */
.crm-kpi { display: flex; align-items: center; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); min-height: 52px; padding: 0 6px; margin-bottom: 16px; flex-wrap: wrap; }
.crm-kpi .st { display: flex; align-items: baseline; gap: 8px; padding: 10px 18px; border-right: 1px solid var(--color-border-light); }
.crm-kpi .st:last-child { border-right: none; }
.crm-kpi .lb { font-size: 12px; color: var(--color-text-muted); }
.crm-kpi .vl { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; color: var(--color-text); }
.crm-kpi .dl { font-size: 11px; color: var(--color-text-light); }
.crm-att { margin-bottom: 16px; }
.crm-att-sec { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding: 10px 16px 4px; display: flex; align-items: center; gap: 8px; }
.crm-att-sec .n { background: var(--color-bg); color: var(--color-text); border-radius: 999px; padding: 0 7px; font-size: 11px; letter-spacing: 0; }
.crm-att-sec .n.red { background: var(--ui-danger-bg); color: var(--ui-danger); }
.crm-att-row { display: flex; align-items: center; gap: 12px; min-height: 36px; padding: 4px 16px; border-bottom: 1px solid var(--color-border-light); font-size: 13px; }
.crm-att-row:last-child { border-bottom: none; }
.crm-att-row .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.crm-att-row .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-att-row .meta { color: var(--color-text-muted); font-size: 12px; white-space: nowrap; }
.crm-att-row .amt { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.crm-att-quiet { padding: 8px 16px 12px; font-size: 12px; color: var(--color-text-light); display: flex; align-items: center; gap: 8px; }
.crm-att-quiet svg { width: 14px; height: 14px; stroke: var(--color-success); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Feedback FB-4 (2026-10-19): every Home card folds from the chevron in its header (.dash-head); a folded card keeps
   the header and its count only. The choice is per person on this device (dashApplyCollapse). */
.dash-fold { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: none; padding: 0; margin: -4px 0 -4px -6px; border: none; border-radius: var(--ui-r1); background: transparent; color: inherit; cursor: pointer; }
.dash-fold:hover { background: var(--color-bg); }
.crm-pipeline-col-header .dash-fold:hover { background: rgba(255,255,255,0.18); }
.dash-fold:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; }
.dash-fold .ico { width: 16px; height: 16px; transition: transform .15s; }
.dash-collapsed .dash-head .dash-fold .ico { transform: rotate(-90deg); }
[data-dash-card].dash-collapsed > :not(.dash-head) { display: none !important; }
[data-dash-card].dash-collapsed { align-self: start; }
.dash-collapsed > .crm-section-card-title { margin-bottom: 0; }
.dash-collapsed > .ui-card-h { border-bottom: none; }
.dash-collapsed .dash-switch { display: none; }
.dash-head-l { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.dash-accent { border-left: 4px solid var(--color-btn-warning); margin-bottom: 16px; }
.dash-more[hidden] { display: none !important; }
.dash-show-all { margin: 6px 16px 10px; }
.crm-section-card .dash-show-all, .crm-timeline .dash-show-all { margin: 6px 0 4px; }
.dash-switch { display: inline-flex; flex: none; border: 1px solid var(--color-border); border-radius: 999px; overflow: hidden; margin-left: 6px; }
.dash-switch-btn { border: none; background: transparent; color: var(--color-text-muted); font: inherit; font-size: 12px; padding: 3px 10px; cursor: pointer; white-space: nowrap; }
.dash-switch-btn + .dash-switch-btn { border-left: 1px solid var(--color-border); }
.dash-switch-btn.is-on { background: var(--ui-info-bg); color: var(--ui-info); font-weight: 600; }
.dash-switch-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.dash-switch.is-locked { opacity: .6; }
.dash-switch.is-locked .dash-switch-btn { cursor: not-allowed; }
.dash-all-hint { font-size: 11px; font-weight: 400; color: var(--color-text-light); white-space: nowrap; }
.dash-more > :first-child:focus { outline: 2px solid var(--color-primary); outline-offset: -2px; }
/* Owner, 2026-09-20: "Arben YABALI" broke onto a second row, which made the whole bar two
   lines tall. The greeting was the only thing in the row allowed to shrink, so every
   filter and button added squeezed it further. Same answer the record header reached in
   v4.091 (.crm-hl-head): the CONTROLS give way, the name does not. The greeting keeps its
   own width and the button row wraps under it when the window gets tight; responsive.css
   already wraps that row below 1025px, so this only states it for the desktop layer too.
   Kept as ONE rule per selector - test_crm_header_wrap reads the first block it finds. */
.crm-quick-actions { border-radius: var(--ui-r2); padding: 11px 18px; flex-wrap: wrap; gap: 8px 16px; }
.crm-quick-actions > :first-child { flex: 0 1 auto; min-width: 0; }
.crm-quick-actions .welcome-text { font-size: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crm-quick-actions .welcome-date { font-size: 12px; }
.crm-quick-actions .action-buttons { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
.crm-quick-actions .action-buttons button { height: 32px; padding: 0 12px; font-size: 13px; border-radius: var(--ui-r1); }
.crm-urgent-banner { display: none; }
.crm-pipeline-col-header { font-size: 12px; }
.crm-pipeline-card .pipe-ref { font-size: 13px; }
.crm-pipeline-card .pipe-customer { font-size: 12px; }
.crm-timeline-item, .crm-reminder-enhanced, .crm-note-card .note-text { font-size: 12.5px; }
/* rail sub-entries for the CRM objects */
.rail-sub { display: none; }
@media screen and (min-width: 1025px) {
    .crm-subnav { display: none; }
    /* The customer list is a panel BESIDE the record, never longer than the window: it
       sticks while the page scrolls and scrolls inside itself (.crm-list-body); Show more
       at its foot adds rows without stretching the page (owner, 2026-09-12). Phone and
       tablet stack the two and cap the list at 42dvh in responsive.css. */
    .crm-split-left { position: sticky; top: 12px; max-height: calc(100vh - 48px); }
    .rail-sub { display: flex; height: 26px; padding-left: 22px; font-size: 12px; }
    .rail-sub .ico { width: 16px; height: 16px; }
    body.rail-collapsed .rail-sub { padding-left: 0; }
    body.rail-collapsed .rail-sub .ico { width: 18px; height: 18px; }
    .sheet-tabs-bar { overflow-y: auto; scrollbar-width: none; }
    .sheet-tabs-bar::-webkit-scrollbar { display: none; }
    /* The legacy CRM title card ("CRM - Engineering Design Database" + the subnav) is
       redundant on desktop: the rail names the objects and the page header names the
       view. Only the partner "Working in" chip survives, top-right, when the JS shows
       it; with the chip hidden the bar has no height. Phone/tablet keep the card. */
    .crm-header-bar { padding: 0; margin: 0; border: 0; box-shadow: none; background: transparent; border-radius: 0; }
    .crm-header-bar h2 { display: none; }
    .crm-header-bar .crm-title-row { justify-content: flex-end; margin: 0; }
    .crm-header-bar .crm-title-row > #crm-partner-switch { margin-bottom: 10px; }
}
/* ── One menu (owner's choices 2026-10-10; docs/plans/2026-10-10-navigation-v2-plan.md) ──
   Favorites on top, then the groups Sales / Engineering / Help and Info / Admin. A group header is a button; its entries
   (data-rail-group) hang from a thin guide line under it, and only the group named by #sheet-tabs-bar[data-rail-open]
   is open - the others fold with a short slide (height + fade). A closed group shows the sum of its entries' counts on
   its header (.rail-group-count, written by the script). The icon rail shows the favorites and the four group icons;
   a group icon opens its pop-out list (#rail-flyout, beside the rail, never inside it). Below 1025px none of this
   exists: responsive.css hides every non-tab child and the strip is the tabs it always was (CRM ... Admin); the
   pop-out list is hidden. No wrapper element anywhere in the rail. */
.tab-label-desk, .rail-star { display: none; }
.rail-flyout { display: none; }
@media screen and (min-width: 1025px) {
    .rail-spacer { flex: 1 1 auto; min-height: 10px; }
    /* the Admin group replaces the Admin tab here; the phone strip keeps it */
    #sheet-tabs-bar > #tab-admin { display: none !important; }
    /* CRM's home is the Dashboard in the menu, CRM on the phone strip */
    #tab-crm .tab-label { display: none; }
    .sheet-tab .tab-label-desk { display: inline; }

    /* Favorites (the rows are the script's: .sheet-tab.rail-fav, one per pinned page) */
    .rail-favs-head { display: flex; align-items: center; gap: 6px; padding: 8px 12px 2px; flex: none; white-space: nowrap; overflow: hidden;
                      font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--rail-fg-muted); }
    .rail-favs-head .ico { width: 10px; height: 10px; fill: var(--rail-star); stroke: var(--rail-star); }
    .rail-favs-empty { padding: 2px 12px 8px; flex: none; white-space: normal; font-size: 11.5px; line-height: 1.4; color: var(--rail-fg-muted); }

    /* Group headers */
    .rail-group { display: flex; align-items: center; gap: 10px; width: 100%; height: 32px; padding: 0 8px 0 12px; margin: 0; flex: none;
                  border: 0; border-radius: 6px; background: transparent; color: var(--rail-fg); position: relative;
                  font: inherit; font-size: 13px; font-weight: 600; text-align: left; white-space: nowrap; cursor: pointer; }
    .rail-group:hover { background: var(--rail-hover); color: var(--rail-fg-on); }
    .rail-group:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rail-fg); }
    .rail-group.here { color: var(--rail-fg-on); }
    .rail-group-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .rail-group-count { margin-left: auto; flex: none; padding: 1px 7px; border-radius: 999px; background: var(--color-accent-hover); color: var(--ui-on-primary);
                        font-size: 10px; font-weight: 700; line-height: 1.4; }
    .rail-group-count[hidden] { display: none; }
    .rail-chev { width: 14px; height: 14px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
    .rail-group[aria-expanded="false"] .rail-chev { transform: rotate(-90deg); }

    /* A group's entries and the Admin sub-headings hang from the guide line */
    #sheet-tabs-bar > .sheet-tab[data-rail-group], #sheet-tabs-bar > .rail-subhead {
        margin-left: 19px; border-left: 1px solid var(--rail-guide); border-radius: 0 6px 6px 0; padding-left: 12px; }
    #sheet-tabs-bar > .sheet-tab[data-rail-group].active { border-left: 2px solid var(--color-accent); padding-left: 11px; }
    #sheet-tabs-bar > .sheet-tab[data-rail-group].active::before { display: none; }
    .rail-subhead { display: block; height: 26px; padding: 8px 12px 2px; flex: none; overflow: hidden; white-space: nowrap;
                    font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--rail-fg-muted); }

    /* The fold. Open: the entries' own heights (30px a page, 26px a sub-page or sub-heading) - explicit, so the slide
       animates. Closed: no height, faded, then hidden once the slide is over (visibility waits .2s), never clickable.
       margin-top: -1px cancels the rail's 1px gap, so a closed group leaves no gap behind. */
    #sheet-tabs-bar > [data-rail-group] { transition: height .2s ease, opacity .15s ease, visibility 0s linear 0s, margin .2s ease, padding .2s ease, background-color .15s, color .15s; }
    #sheet-tabs-bar:not([data-rail-open="sales"]) > [data-rail-group="sales"],
    #sheet-tabs-bar:not([data-rail-open="eng"]) > [data-rail-group="eng"],
    #sheet-tabs-bar:not([data-rail-open="help"]) > [data-rail-group="help"],
    #sheet-tabs-bar:not([data-rail-open="admin"]) > [data-rail-group="admin"] {
        height: 0; opacity: 0; visibility: hidden; pointer-events: none; margin-top: -1px; margin-bottom: 0; padding-top: 0; padding-bottom: 0;
        transition: height .2s ease, opacity .15s ease, visibility 0s linear .2s, margin .2s ease, padding .2s ease; }

    /* The pin star the script adds to every page of the menu: shown on the page's hover / focus, always when pinned */
    .rail-star { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin: 0 -6px 0 auto; padding: 0; flex: none;
                 border: 0; border-radius: var(--ui-r1); background: transparent; color: var(--rail-fg); cursor: pointer; opacity: 0; }
    .sheet-tab .tab-badge ~ .rail-star { margin-left: 6px; }
    .sheet-tab:hover .rail-star, .sheet-tab:focus-within .rail-star, .rail-star.pinned { opacity: 1; }
    .rail-star:hover { background: var(--rail-hover); color: var(--rail-fg-on); }
    .rail-star:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--rail-fg); }
    .rail-star svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
    .rail-star.pinned { color: var(--rail-star); }
    .rail-star.pinned svg { fill: var(--rail-star); }

    /* The icon rail: favorites as icons, then the four group icons (the current page's group marked like an active
       entry, a closed group's count as a bubble); no entries, sub-headings, Favorites lines, chevrons or stars */
    body.rail-collapsed #sheet-tabs-bar > [data-rail-group],
    body.rail-collapsed .rail-favs-head,
    body.rail-collapsed .rail-favs-empty,
    body.rail-collapsed .rail-group-label,
    body.rail-collapsed .rail-chev,
    body.rail-collapsed .rail-star,
    body.rail-collapsed .sheet-tab .tab-label-desk { display: none; }
    body.rail-collapsed .rail-group { justify-content: center; width: 44px; height: 36px; padding: 0; margin: 0 auto; }
    body.rail-collapsed .rail-group.here { background: var(--rail-on); color: var(--rail-fg-on); }
    body.rail-collapsed .rail-group.here::before { content: ''; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent); }
    body.rail-collapsed .rail-group-count { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; margin: 0;
                                            font-size: 9px; line-height: 16px; text-align: center; }
    body.rail-collapsed .rail-fav { width: 44px; height: 32px; }
    body.rail-collapsed .rail-fav::after { content: ''; position: absolute; top: 4px; right: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--rail-star); }

    /* The icon rail's pop-out list: placed by the script beside the group icon (left, top), over the page and its
       header (999) and the rail (1000), under every dialog (9000 and up). Its pages look like the full menu's. */
    .rail-flyout:not([hidden]) { display: flex; }
    .rail-flyout { position: fixed; z-index: 1100; width: 240px; max-height: calc(100vh - 16px); overflow-y: auto; flex-direction: column; gap: 1px;
                   padding: 6px; background: var(--rail-bg); border: 1px solid var(--rail-line); border-radius: 10px; box-shadow: var(--ui-shadow-3);
                   font-family: var(--ui-font); color: var(--rail-fg); scrollbar-width: none; }
    .rail-fly-title { padding: 6px 10px 6px; flex: none; font-size: 13px; font-weight: 600; color: var(--rail-fg-on); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rail-fly-sub { height: 26px; padding: 8px 10px 2px; flex: none; overflow: hidden; white-space: nowrap;
                    font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--rail-fg-muted); }
    .rail-fly-item { display: flex; align-items: center; gap: 10px; width: 100%; height: 30px; padding: 0 10px; margin: 0; flex: none; position: relative;
                     border: 0; border-radius: 6px; background: transparent; color: var(--rail-fg); font: inherit; font-size: 12.5px; font-weight: 500;
                     text-align: left; white-space: nowrap; cursor: pointer; }
    .rail-fly-item:hover { background: var(--rail-hover); color: var(--rail-fg-on); }
    .rail-fly-item:focus-visible { outline: none; background: var(--rail-hover); color: var(--rail-fg-on); box-shadow: inset 0 0 0 2px var(--rail-fg); }
    .rail-fly-item.active { background: var(--rail-on); color: var(--rail-fg-on); font-weight: 600; }
    .rail-fly-item.active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--color-accent); }
    .rail-fly-item .ico { width: 16px; height: 16px; }
    .rail-fly-item .tab-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .rail-fly-item .tab-badge { margin-left: auto; flex: none; padding: 1px 7px; border-radius: 999px; background: var(--color-accent-hover); color: var(--ui-on-primary);
                                font-size: 10px; font-weight: 700; }
}
@media screen and (min-width: 1025px) and (prefers-reduced-motion: reduce) {
    #sheet-tabs-bar > [data-rail-group], #sheet-tabs-bar .rail-chev { transition: none !important; }
}

/* ── Dark treatments for surfaces whose colours were hard-coded in the template ── */
body.theme-dark .app-modal-btn-cancel { border-color: var(--color-border); color: var(--color-text-muted); }
body.theme-dark .app-modal-btn-cancel:hover { background: var(--color-bg); }
body.theme-dark .app-modal-body .cascade-warning { background: var(--ui-danger-bg); border-color: transparent; color: var(--ui-danger); }
body.theme-dark .news-popup-header span { color: var(--color-text-muted); }
body.theme-dark .save-crm-item-ref { color: var(--color-text); }
body.theme-dark .save-crm-item:hover, body.theme-dark .save-crm-item.selected { background: var(--ui-info-bg); }
body.theme-dark .save-crm-search, body.theme-dark .save-crm-item-label input { background: var(--color-surface-raised); color: var(--color-text); }
body.theme-dark .crm-list-item { color: var(--color-text); }
body.theme-dark .crm-list-item.active { background: var(--ui-info-bg); }
body.theme-dark .crm-activity-item { border-bottom-color: var(--color-border-light); }
body.theme-dark .crm-activity-item .activity-text strong { background: var(--color-bg); color: var(--color-text); }
body.theme-dark .crm-note-card .note-author { color: var(--ui-info); }
body.theme-dark .crm-reminder-card.overdue { background: var(--ui-danger-bg); }
body.theme-dark .crm-th-select { background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border); }
body.theme-dark .laminar-modal-msg span, body.theme-dark .laminar-badge { background: var(--ui-warning-bg); border-color: transparent; color: var(--ui-warning); }
body.theme-dark .gasket-warn-modal-msg .violation { background: var(--ui-danger-bg); border-color: transparent; color: var(--ui-danger); }
body.theme-dark .gasket-warn-btn-continue:hover { background: var(--color-bg); }
body.theme-dark .error-box { background: var(--ui-danger-bg); color: var(--ui-danger); }
body.theme-dark .results-stale-banner { background: var(--ui-warning-bg); border-color: transparent; color: var(--ui-warning); }
body.theme-dark .pw-change-box input, body.theme-dark .chpw-box input, body.theme-dark .login-box input, body.theme-dark .register-box input, body.theme-dark .register-box select {
    background: var(--color-surface-raised); color: var(--color-text); border-color: var(--color-border);
}
body.theme-dark .pw-requirements { color: var(--color-text-muted); }

/* ── Modal shell (visual refresh part 3, v4.033) ───────────────────────────
   Every dialog on one shape: the same radius, shadow and border; the same
   backdrop. Layout, ids and handlers of each dialog are untouched. */
.error-modal, .app-modal, .laminar-modal, .gasket-warn-modal, .news-popup, .fm-modal,
.save-crm-modal, .pw-change-box, .chpw-box, .admin-modal, .login-box, .register-box,
#inq-upload-modal .app-modal {
    border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-3); border: 1px solid var(--color-border);
    background: var(--color-surface); color: var(--color-text);
}
.save-crm-header { border-radius: var(--ui-r2) var(--ui-r2) 0 0; }
.error-modal-overlay, .app-modal-overlay, .laminar-modal-overlay, .gasket-warn-modal-overlay,
.save-crm-overlay, .pw-change-overlay, .chpw-overlay, .fm-modal-overlay, .admin-modal-overlay,
#inq-upload-modal { background: rgba(15, 23, 42, .5); }
.news-popup-overlay { background: rgba(7, 45, 86, .72); }
.error-modal-btn, .laminar-modal-btn, .gasket-warn-btn-cancel, .gasket-warn-btn-continue,
.app-modal-btn, .news-popup-btn, .fm-modal-btn, .login-box .login-btn, .register-box .login-btn,
.pw-change-box .pw-btn { border-radius: var(--ui-r1); font-family: inherit; font-weight: 600; }
.error-modal-btn { background: var(--color-btn-danger); }
.error-modal-btn:hover { background: var(--color-btn-danger-hover); }
.error-modal-icon { color: var(--color-btn-danger); }
.laminar-modal { border-top-color: var(--color-warning); }
.laminar-modal-btn { background: var(--color-warning); }
.laminar-modal-btn:hover { background: var(--color-warning-dark); }
.gasket-warn-modal { border-top-color: var(--color-error); }
.gasket-warn-modal-icon, .gasket-warn-modal-title { color: var(--color-error); }
.gasket-warn-btn-cancel { background: var(--color-error); }
.pw-change-box .pw-btn { background: var(--color-btn-primary); }
.pw-change-box h3 { color: var(--color-text); }
.login-error, .register-error, .pw-change-error { color: var(--color-error); }
.login-box input, .register-box input, .register-box select, .pw-change-box input, .chpw-box input {
    border-color: var(--color-border); border-radius: var(--ui-r1); font-family: inherit;
}
.login-box input:focus, .register-box input:focus, .register-box select:focus, .pw-change-box input:focus, .chpw-box input:focus {
    border-color: var(--color-primary-light); box-shadow: var(--ui-focus);
}
.login-box .new-user-link, .register-box .back-link { color: var(--color-primary-light); }
.login-box .new-user-link:hover, .register-box .back-link:hover { color: var(--color-primary); }
.login-box .logo-area .subtitle, .register-box .logo-area .subtitle { color: var(--color-text-muted); }

/* ── Other sheets on the kit: Admin, Price list, Fluids, Drawing library, News, Manual ── */
#sheet-admin, .pricelist-container, .fm-container, #sheet-drawinglib, #sheet-news, #sheet-help { font-family: var(--ui-font); font-size: 13px; }
#sheet-documents { font-family: var(--ui-font); font-size: 13px; }                                /* 2026-10-02: the Documents sheet, like News */
#sheet-feedback { font-family: var(--ui-font); font-size: 13px; }                                 /* 2026-10-08: the Feedback sheet, like Documents */
#sheet-admin .crm-subnav { display: flex; }   /* the Admin section tabs are not mirrored in the rail; they stay visible on desktop */
#sheet-help .crm-subnav { display: flex; }    /* the User Manual's section tabs (Overview/Design/Results/CRM/...) are not in the rail either (v4.049) */
#sheet-admin .crm-btn { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; border-radius: var(--ui-r1); display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
#sheet-admin .crm-btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }
#sheet-documents .crm-btn { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; border-radius: var(--ui-r1); display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
#sheet-documents .crm-btn-sm { height: 26px; padding: 0 9px; font-size: 12px; }                  /* 2026-10-02: Documents buttons as Admin's */
.admin-toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.admin-toolbar input, .admin-toolbar select, .admin-select { height: 30px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--ui-r1); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12.5px; }
.admin-table { font-size: 13px; border: 1px solid var(--color-border); border-radius: var(--ui-r2); overflow: hidden; }
.admin-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); background: var(--color-surface-raised); padding: 9px 12px; border-bottom: 1px solid var(--color-border); }
.admin-table td { padding: 0 12px; height: 36px; border-bottom: 1px solid var(--color-border-light); }
.admin-table tr:hover td { background: var(--color-surface-raised); }
.admin-content { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); }
/* ── Admin frame (v4.139, docs/plans/2026-09-19-admin-design.md stage 1): the card gutter, the page header, the
   scrolling section strip, the badges' shape, the filters, the field hints. Nothing here touches the Design sheet. */
#sheet-admin .admin-content { padding: 14px 20px 20px; }
#sheet-admin .admin-content > * { min-width: 0; }
#sheet-admin .admin-table { border: 0; border-radius: 0; box-shadow: none; }
#sheet-admin .admin-toolbar { gap: 12px; margin-bottom: 14px; }
#sheet-admin .admin-toolbar h3 { font-size: 20px; font-weight: 600; margin: 0; line-height: 1.2; color: var(--color-text); }
#sheet-admin .admin-toolbar .sp { flex: 1; }
#sheet-admin .admin-toolbar .cnt { font-size: 11px; color: var(--color-text-muted); background: var(--color-bg); border-radius: 999px; padding: 2px 9px; }
#sheet-admin .admin-toolbar .cnt:empty { display: none; }
/* ── Admin side menu (owner, 2026-10-10; docs/plans/2026-10-10-navigation-redesign-design.md) ──
   The views in four groups (it replaced the section strip that overflowed with 12 tabs). Since v2 the side menu is never
   shown: on the desktop its buttons are the source the rail's Admin entries mirror (gates, counts, the open view), and
   below 1025px responsive.css shows the one select above the content in its place. Tokens only: dark mode redefines them. */
.admin-section-pick { display: none; }
.admin-sidenav { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); padding: 6px; }
.admin-nav-group + .admin-nav-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--color-border-light); }
.admin-nav-heading { font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); padding: 8px 10px 4px; }
.admin-nav-list { display: flex; flex-direction: column; gap: 1px; }
.admin-nav-list [role="tab"] { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: var(--ui-r1);
                               background: transparent; color: var(--color-text); font: inherit; font-size: 13px; font-weight: 500; line-height: 1.3; text-align: left; cursor: pointer; position: relative; }
.admin-nav-list [role="tab"]:hover { background: var(--color-surface-raised); }
.admin-nav-list [role="tab"].active { background: var(--ui-info-bg); color: var(--ui-info); font-weight: 600; }
.admin-nav-list [role="tab"].active::before { content: ''; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ui-info); }
.admin-nav-list [role="tab"]:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.admin-nav-list .badge { margin-left: auto; }
.admin-nav-list .admin-nav-out { width: 14px; height: 14px; margin-left: auto; color: var(--color-text-muted); }
.nav-back-row { display: flex; align-items: center; gap: 12px; }
/* A table wider than the space beside the menu scrolls inside its own box, never past the window's edge: Users (nine
   columns, ~1110px and more with long e-mail addresses) on most laptop windows, Pending Approvals and Private Label
   with long values, Model Management's lists (Connections at 1280px), the two Segments tables. The last column of a table whose last column is its actions stays pinned
   at the box's right edge, so the buttons are always on screen while the other columns scroll under them (review
   2026-10-10). A clipping table (.admin-table { overflow: hidden }) would defeat sticky, hence overflow: visible. */
.admin-table-scroll { overflow-x: auto; }
#sheet-admin .admin-table-scroll > .admin-table { overflow: visible; }
#admin-view-users .admin-table th:last-child, #admin-view-users .admin-table td:last-child:not([colspan]),
#admin-pending-list .admin-table th:last-child, #admin-pending-list .admin-table td:last-child:not([colspan]),
#tenant-list .admin-table th:last-child, #tenant-list .admin-table td:last-child:not([colspan]),
#admin-view-models .admin-table-scroll .admin-table th:last-child, #admin-view-models .admin-table-scroll .admin-table td:last-child:not([colspan]) {
    position: sticky; right: 0; z-index: 1; background: var(--color-surface); box-shadow: inset 1px 0 0 var(--color-border-light); }
#admin-view-users .admin-table thead th:last-child, #admin-view-users .admin-table tr:hover td:last-child:not([colspan]),
#admin-pending-list .admin-table thead th:last-child, #admin-pending-list .admin-table tr:hover td:last-child:not([colspan]),
#tenant-list .admin-table thead th:last-child, #tenant-list .admin-table tr:hover td:last-child:not([colspan]),
#admin-view-models .admin-table-scroll .admin-table thead th:last-child,
#admin-view-models .admin-table-scroll .admin-table tr:hover td:last-child:not([colspan]) { background: var(--color-surface-raised); }
@media screen and (min-width: 1025px) {
    /* 2026-10-10 v2 (owner: the first build's second menu squeezed the page): Admin's sections are entries of the one
       menu on the left, so neither the side menu nor the select shows here - the content takes the container's full
       width again, one column */
    #sheet-admin .admin-shell { display: block; }
    #sheet-admin .admin-sidenav, #sheet-admin .admin-section-pick { display: none; }
}
#sheet-admin .role-badge, #admin-view-org .role-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; font-size: 11px; font-weight: 600; }
#sheet-admin .crm-th-select { width: auto; max-width: 180px; min-width: 0; height: 26px; padding: 3px 8px; font: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: none;
                              color: var(--color-text); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: 999px; cursor: pointer; text-overflow: ellipsis; }
#sheet-admin .crm-th-select:focus { outline: none; box-shadow: var(--ui-focus); }
.form-hint { font-size: 11.5px; line-height: 1.5; color: var(--color-text-muted); margin: 4px 0 0; }
.form-hint.is-error { color: var(--color-error); }
.form-hint.is-busy { color: var(--color-text-muted); }
#sheet-admin .admin-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
#sheet-admin .admin-actions .crm-btn { white-space: nowrap; }
.admin-table td.wrap { white-space: normal; }
.admin-table .nw-date { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-header, .fm-header { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); }
.pl-header h3, .fm-header-title { font-size: 20px; font-weight: 600; color: var(--color-text); }
.pl-ctrl-row select, .pl-ctrl-row input, .fm-filters select, .fm-search { height: 30px; border: 1px solid var(--color-border); border-radius: var(--ui-r1); background: var(--color-surface); color: var(--color-text); font: inherit; font-size: 12.5px; padding: 0 10px; }
.fm-search { padding-left: 28px; } /* room for the search icon that sits inside the field */
.fm-unit-btn, .pl-unit-btn { border-radius: var(--ui-r1); font-weight: 600; }
.fm-table { font-size: 13px; }
.fm-table th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-muted); background: var(--color-surface-raised); }
.fm-table td { height: 36px; border-bottom: 1px solid var(--color-border-light); }
.fm-table tr:hover td { background: var(--color-surface-raised); }
.fm-add-btn { background: var(--color-btn-primary); color: #fff; border-radius: var(--ui-r1); font-weight: 600; }
.fm-add-btn:hover { background: var(--color-btn-primary-hover); }
.fm-stats > div, .fm-detail { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-1); }
.fm-hazard { background: var(--ui-danger-bg); color: var(--ui-danger); border-radius: var(--ui-r1); }
.fm-note-box { background: var(--ui-warning-bg); color: var(--ui-warning); border-radius: var(--ui-r1); }
.fm-ped-badge.g1 { background: var(--ui-danger-bg); color: var(--ui-danger); }
.fm-ped-badge.g2 { background: var(--ui-success-bg); color: var(--ui-success); }
#sheet-drawinglib .crm-btn, #sheet-news .crm-btn { height: 30px; padding: 0 12px; font-size: 12.5px; border-radius: var(--ui-r1); display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
#sheet-help .manual-section h2 { font-size: 20px; font-weight: 600; }
#sheet-help .manual-tip { background: var(--ui-info-bg); border-radius: var(--ui-r2); color: var(--color-text); }
#sheet-help table th { background: var(--color-surface-raised); color: var(--color-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; }
.ico-inline { width: 14px; height: 14px; vertical-align: -2px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: inline-block; }

/* ── Sign-in intro (v4.078; floating since v4.079, owner: "a floating video with a transparent
   background instead of a window") ──────────────────────────────────────────────────────
   No card, no dimmed page, no button: the clip's edges dissolve into the page through an oval
   mask, it fades in once it is actually playing and fades out a second before its end. The page
   around it stays usable; only the clip itself takes the skip click (Esc skips too). */
.intro-overlay {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 500ms ease;
}
.intro-overlay.shown { opacity: 1; }
.intro-overlay.fading { opacity: 0; transition-duration: 600ms; }
.intro-float {
  width: min(760px, 94vw);
  aspect-ratio: 16 / 9;
  pointer-events: none;           /* invisible until playing: clicks reach the page underneath (audit F27) */
  cursor: pointer;
  transform: scale(0.96);
  transition: transform 700ms ease;
}
.intro-overlay.shown .intro-float { transform: scale(1); pointer-events: auto; }
.intro-overlay.fading .intro-float { pointer-events: none; }
.intro-float video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: transparent;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 58%, transparent 100%);
}

/* ── The ARES logo always sits on white (owner, 2026-09-13) ───────────────────────────────
   The artwork is transparent, so on a coloured dialog header (God Mode is red) or a dark-mode
   surface it disappears. .logo-plate cuts a white patch behind it; the header around it keeps
   its colour. Documents and the rail's white brand row are white already and carry no plate.
   --logo-plate is defined once on :root and never redefined for dark mode. */
.logo-plate { background: var(--logo-plate); border-radius: 4px; padding: 3px 6px; box-sizing: content-box; }
/* the dialog title on its coloured header: the template's var(--color-surface) turned dark with
   dark mode, leaving the title unreadable on navy/red */
.app-modal-header { color: var(--ui-on-primary); }

/* Competitor prediction (v4.110): the super admin's Competitors Results window */
.cbr-bar { float: right; margin: 2px 0 0 12px; }
.cbr-bar[hidden] { display: none; }
.cbr-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 10px; }
.cbr-bench { font-size: 12.5px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--ui-r2); background: var(--color-surface-raised); }
.cbr-bench b { font-size: 14px; }
.cbr-manual-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cbr-manual-row label { font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.cbr-manual-row input.form-input { width: 100%; box-sizing: border-box; margin-top: 2px; }
.cbr-row { cursor: pointer; }
.cbr-sources td { background: var(--color-surface-raised); font-size: 11.5px; }
.cbr-graph { margin-top: 12px; }
.cbr-graph svg { width: 100%; height: auto; display: block; }
.cbr-axis { stroke: var(--color-border); stroke-width: 1; }
.cbr-grid { stroke: var(--color-border-light); stroke-width: 1; }
.cbr-tick { fill: var(--color-text-muted); font-size: 10px; }
.cbr-label { fill: var(--color-text); font-size: 11px; }
.cbr-range { stroke: var(--color-primary); stroke-width: 1.5; opacity: 0.7; }
.cbr-pt { fill: var(--color-primary); }
.cbr-ours { fill: var(--color-warning); }
.cbr-ours-label { fill: var(--color-warning-dark); font-size: 11px; font-weight: 600; }

/* The header's Back button stands out (owner 2026-11-01): solid green in both themes, on every screen width. Its own
   colours, not --ui-success: that token turns pale in dark mode, where white text on it would not read. */
#global-back-btn {
    --back-bg: #059669;
    --back-bg-hover: #047857;
    color: #fff;
    background: var(--back-bg);
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 600;
    box-shadow: 0 1px 2px rgba(4, 120, 87, 0.25), 0 2px 8px rgba(5, 150, 105, 0.25);
    transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
@media (min-width: 1025px) { #global-back-btn { padding-left: 14px; padding-right: 14px; } }
#global-back-btn:hover {
    color: #fff;
    background: var(--back-bg-hover);
    box-shadow: 0 2px 4px rgba(4, 120, 87, 0.3), 0 4px 12px rgba(5, 150, 105, 0.3);
    transform: translateY(-1px);
}
#global-back-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(4, 120, 87, 0.3); }
#global-back-btn:focus-visible { outline: 2px solid #fff; outline-offset: 1px; box-shadow: 0 0 0 4px var(--back-bg); }
#global-back-btn .ico { color: #fff; }

/* Competitor firm view (v4.122): the chart points shared by the firm window and the Competitors Results graph */
.cb-an-pt { opacity: 0.9; }
.cb-pt-ahri, .cb-pt-std { fill: var(--color-primary); }
.cb-pt-ring { fill: var(--color-surface); stroke: var(--color-primary); stroke-width: 1.6; }
.cb-pt-review.cb-pt-ring { stroke: var(--color-text-muted); }
.cb-pt-cross { fill: none; stroke: var(--ui-danger); stroke-width: 1.6; }
.cb-pt-est { fill: var(--color-warning); stroke: var(--color-warning-dark); stroke-width: 1; }
.cbr-far { color: var(--ui-danger); font-weight: 600; }
.cb-firm-controls { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: flex-end; margin-bottom: 10px; }
.cb-firm-controls label { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.cb-firm-controls .form-input { display: block; margin-top: 2px; width: 96px; box-sizing: border-box; }
.cb-firm-controls select.form-input { width: auto; max-width: 240px; }
.cb-firm-controls .cb-tabs { margin: 2px 0 0; }
.cb-firm-title { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cb-firm-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--color-text-muted); margin: 4px 0 6px; }
.cb-lg { display: inline-block; width: 10px; height: 10px; vertical-align: -1px; border-radius: 50%; background: var(--color-primary); }
.cb-lg-ring { background: var(--color-surface); border: 1.6px solid var(--color-primary); box-sizing: border-box; }
.cb-lg-cross { background: none; border-radius: 0; color: var(--ui-danger); width: auto; height: auto; }
.cb-lg-cross::before { content: '\00d7'; font-weight: 700; }
.cb-lg-est { background: var(--color-warning); border-radius: 0; transform: rotate(45deg); width: 8px; height: 8px; }
.cb-firm-chart svg { width: 100%; height: auto; display: block; }
.cb-firm-summary { font-size: 12.5px; margin: 8px 0 10px; }
.cb-used td { background: var(--ui-warning-bg); }
.cb-page-tabs { display: flex; align-items: center; gap: 4px; margin: 0 0 12px; border-bottom: 1px solid var(--color-border); }
.cb-page-tabs > button:not(.crm-btn) { appearance: none; border: 0; background: none; padding: 8px 12px; font: inherit; font-size: 13px; color: var(--color-text-muted); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.cb-page-tabs > button.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 600; }
.cb-page-tabs > #cb-upload-btn { margin-left: auto; }
.cb-quick { padding: 12px 14px; margin-bottom: 14px; }
.cb-quick-sub { font-weight: 400; color: var(--color-text-muted); }
.cb-quick-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px 12px; align-items: end; margin-top: 6px; }
.cb-quick-form label { display: block; font-size: 11.5px; font-weight: 600; color: var(--color-text-muted); }
.cb-quick-form .form-input { display: block; width: 100%; box-sizing: border-box; margin-top: 2px; }
.cb-q-head { margin: 10px 0 6px; }
.cb-q-table td { vertical-align: top; }
.cb-q-none { color: var(--color-text-muted); font-size: 12px; }
.cb-q-u b { font-size: 14px; }
.cb-q-area { font-size: 12.5px; margin-top: 2px; }
.cb-q-meta { font-size: 11.5px; color: var(--color-text-muted); margin-top: 3px; }
.cb-link { appearance: none; border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--color-primary); cursor: pointer; text-align: left; }
.cb-firms { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cb-firm-card { appearance: none; text-align: left; padding: 12px 14px; cursor: pointer; font: inherit; color: var(--color-text); }
.cb-firm-card:hover, .cb-firm-card:focus-visible { border-color: var(--color-primary); }
.cb-firm-name { font-size: 15px; font-weight: 600; }
.cb-firm-n { font-size: 12px; margin: 2px 0 8px; }
.cb-firm-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; margin: 0; font-size: 12px; }
.cb-firm-stats dt { color: var(--color-text-muted); }
.cb-firm-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.cbr-primary { font-weight: 600; }

/* Competitor bank guide (v4.121): the rule everyone reads before uploading */
.cb-rule { border-left: 3px solid var(--color-warning); background: var(--color-surface); padding: 8px 10px; margin: 0 0 10px; font-size: 12px; line-height: 1.45; }
.cb-guide { margin: 0 0 12px; font-size: 12px; }
.cb-guide summary { cursor: pointer; padding: 6px 0; }
.cb-guide ol { margin: 6px 0 4px; padding-left: 20px; line-height: 1.45; }
.cb-guide li { margin-bottom: 4px; }

/* Activity feed (v4.120): a project's and a customer's timeline - notes people type and events the app writes */
.crm-activity { display: flex; flex-direction: column; gap: 6px; max-height: 520px; overflow-y: auto; }
.crm-activity-row { padding: 6px 8px; border-left: 2px solid var(--color-border); font-size: 12px; }
.crm-activity-row.is-note { border-left-color: var(--color-primary); background: var(--ui-surface-2, var(--color-surface)); border-radius: 0 4px 4px 0; }
.crm-activity-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; margin-bottom: 2px; }
.crm-activity-text { white-space: pre-wrap; word-break: break-word; line-height: 1.4; }

/* v4.182: a private-label company with no logo uploaded shows its NAME where the logo goes (header plate and
   the rail brand row - both white by construction), never the ARES logo (_applyCompanyBrand). */
.brand-text { font-weight: 700; font-size: 14px; line-height: 30px; color: var(--color-primary);
              white-space: nowrap; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
#sheet-tabs-bar .rail-brand .brand-text { line-height: 1.2; font-size: 13px; }

/* v4.188 Model Management > Correlation Adjustment (owner, 2026-09-22) */
.mm-corradj-hint { max-width: 880px; margin: 0 0 12px; }
.mm-corradj-table { max-width: 880px; }
.mm-corradj-cell { display: inline-flex; align-items: center; gap: 6px; }
.mm-corradj-input { width: 96px; text-align: right; }
/* Calculation segments (2026-10-01): Model Management > Segments, the same cells as the adjustment */
.mm-seg-title { margin: 18px 0 6px; }
.mm-seg-name { width: 200px; }
.mm-seg-limits { width: 150px; }
.mm-seg-actions { white-space: nowrap; }
.mm-seg-actions .crm-btn + .crm-btn { margin-left: 6px; }

/* Documents (owner, 2026-10-02): the library's rows grouped by category, the super admin's space line and upload dialog.
   Tokens only; the rows stack on a phone (responsive.css). */
.docs-search { flex: 1 1 220px; max-width: 360px; }
.docs-usage { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; font-size: 12px; color: var(--color-text-muted); }
.docs-usage--low { color: var(--ui-warning); font-weight: 600; }
.docs-group { margin-bottom: 18px; }
.docs-group-h { margin: 0 0 8px; }
.docs-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); }
.docs-row--hidden { background: var(--color-bg); }
.docs-main { flex: 1; min-width: 0; }
.docs-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--color-text); }
.docs-meta { margin-top: 2px; font-size: 11.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.docs-desc { margin-top: 4px; font-size: 12px; color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.docs-actions { flex: none; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
#sheet-documents a.crm-btn { text-decoration: none; }
.docs-form-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 12px; }
.docs-f-text { width: 100%; box-sizing: border-box; resize: vertical; }
.docs-f-companies { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.admin-modal .docs-f-co { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; color: var(--color-text); }
.admin-modal .docs-f-shrink { margin-top: 10px; }
.docs-f-status { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* v4.265 Reference Documents (owner, 2026-10-26): a small button at the right end of the Design page's DESIGN PARAMETERS
   heading and its list (the engineering sheet's own font). Absolutely positioned inside the heading (position: relative inline), so it takes no space in
   the flow - the Design input layout never changes (test_layout_freeze, test_design_reference_docs). Tokens only. */
.design-refdocs { position: absolute; right: 0; top: 50%; transform: translateY(-60%); z-index: 20; text-align: left; }
.refdocs-btn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.5;
    letter-spacing: normal; text-transform: none; color: var(--ui-on-primary); background: var(--color-btn-primary);
    border: 1px solid var(--color-btn-primary); border-radius: var(--ui-r1); cursor: pointer; white-space: nowrap; }
.refdocs-btn:hover { filter: brightness(1.12); }
.refdocs-btn:focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 1px; }
.refdocs-menu { position: absolute; right: 0; top: calc(100% + 4px); display: block; min-width: 260px; max-width: 360px;
    max-height: 320px; overflow-y: auto; padding: 4px; background: var(--color-surface); border: 1px solid var(--color-border);
    border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-3); }
.refdocs-menu[hidden] { display: none; }
.refdocs-item { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: var(--ui-r1);
    text-decoration: none; color: var(--color-text); }
.refdocs-item:hover, .refdocs-item:focus-visible { background: var(--ui-info-bg); outline: none; }
.refdocs-title { font-size: 12px; font-weight: 600; line-height: 1.35; letter-spacing: normal; text-transform: none; color: var(--color-primary); }
.refdocs-meta { font-size: 11px; font-weight: 400; line-height: 1.3; letter-spacing: normal; text-transform: none; color: var(--color-text-muted); }

/* The strips under the header - masquerade, God Mode, the AHRI declaration (2026-10-09, audit F4): one shape, which used to be
   inline on each and so beat responsive.css's phone size. Each strip keeps its own colours; the AHRI strip's rule below
   adds its flex row and its own padding. Never printed (index.html's print hide list). */
.status-strip { text-align: center; padding: 4px 12px; font-size: 12px; font-weight: 600; }

/* Feedback (owner, 2026-10-08): the person's requests, one request with its conversation, the super admin's list and
   note. Tokens only (the navy is --ui-info: --color-primary is not redefined in dark mode); the rows stack on a phone. */
#sheet-feedback .crm-btn { height: 30px; padding: 0 12px; font-size: 12.5px; font-weight: 600; border-radius: var(--ui-r1); display: inline-flex; align-items: center; gap: 6px; line-height: 1; }
.fb-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; padding: 10px 12px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--ui-r2); cursor: pointer; }
.fb-row:hover, .fb-row:focus-visible { border-color: var(--ui-info); }
.fb-main { flex: 1; min-width: 0; }
.fb-title { font-size: 14px; color: var(--color-text); overflow-wrap: anywhere; }
.fb-meta { margin-top: 2px; font-size: 11.5px; color: var(--color-text-muted); overflow-wrap: anywhere; }
.fb-dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.fb-body { white-space: pre-wrap; overflow-wrap: anywhere; color: var(--color-text); }
.fb-shot { display: block; max-width: 100%; max-height: 320px; margin: 8px 0; border: 1px solid var(--color-border); border-radius: var(--ui-r2); cursor: zoom-in; }
.fb-shot--full { max-height: none; cursor: zoom-out; }
.fb-reason { margin: 8px 0; padding: 8px 10px; border-left: 3px solid var(--ui-danger); background: var(--ui-danger-bg); color: var(--color-text); border-radius: var(--ui-r1); overflow-wrap: anywhere; }
.fb-thread { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.fb-msg { padding: 8px 10px; background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--ui-r2); color: var(--color-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.fb-msg--support { background: var(--color-surface); border-left: 3px solid var(--ui-info); }
.fb-msg-who { display: block; margin-bottom: 2px; font-size: 11.5px; color: var(--color-text-muted); white-space: normal; }
.fb-note { margin: 8px 0; padding: 8px 10px; border: 1px dashed var(--color-border); border-radius: var(--ui-r2); color: var(--color-text); }
.fb-text { width: 100%; box-sizing: border-box; resize: vertical; }
.fb-popup-list { margin: 6px 0 0; padding-left: 18px; max-height: 40vh; overflow-y: auto; }   /* the buttons stay on screen */
.fb-adm-row { cursor: pointer; }
/* the decision buttons (up to five) go onto a second line on a phone instead of squeezing or scrolling sideways */
.admin-modal .modal-btns.fb-adm-btns { flex-wrap: wrap; }
.admin-modal .modal-btns.fb-adm-btns button { flex: 1 1 auto; white-space: nowrap; }

/* AHRI monthly declaration (part B, 2026-10-02): the company admin's strip under the header (the masquerade / God Mode
   strips' shape), My Company > AHRI declaration, Admin > Private Label > AHRI declarations. Colours are the theme's. */
.ahri-decl-banner { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 12px;
                    font-size: 12px; font-weight: 600; background: var(--ui-warning-bg); color: var(--ui-warning); }   /* due: the warning pill's pair, readable in both themes */
.ahri-decl-banner.is-paused { background: var(--color-error); color: var(--ui-on-primary); }   /* not --ui-danger: a pale red text colour in dark mode */
.ahri-decl-banner-text { line-height: 1.4; }
.ahri-decl-banner .crm-btn { color: var(--color-primary); background: var(--color-surface); border-color: var(--color-primary); }   /* a white pill with dark text on either strip */
.ahri-decl-month { margin: 0 0 14px; }
.ahri-decl-scroll { overflow-x: auto; }
.ahri-decl-table { width: 100%; }

/* Access periods (owner, 2026-10-15): the small trial line under the name in the menu's user block (the rail is navy in
   both themes; hidden with the name when the menu is icons), the company's end-date notice strip (the AHRI strip's shape
   and warning pair), My Company's notice line, the date rows of the dialogs and the notice settings. Tokens only. */
.rail-foot .rail-trial { flex: 1 1 100%; margin-top: -4px; font-size: 11px; font-weight: 500; color: rgba(255, 255, 255, .72); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.rail-collapsed .rail-foot .rail-trial { flex: none; margin: 0; font-size: 0; text-align: center; }   /* the menu as icons: the days only, the tooltip says the rest (review 2026-10-15) */
body.rail-collapsed .rail-foot .rail-trial::after { content: attr(data-short); font-size: 10px; font-weight: 700; color: rgba(255, 255, 255, .9); }
.trial-strip { display: none; background: var(--ui-info-bg); color: var(--ui-info); }   /* the desktop reads the line in the menu; responsive.css shows the strip on phones and tablets */
.access-notice-banner { display: flex; justify-content: center; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 12px;
                        font-size: 12px; font-weight: 600; background: var(--ui-warning-bg); color: var(--ui-warning); }
.access-notice-text { line-height: 1.4; }
.access-notice-banner .crm-btn { color: var(--color-primary); background: var(--color-surface); border-color: var(--color-primary); }
.pl-access-notice { margin: 10px 0 0; padding: 8px 10px; border-left: 3px solid var(--ui-warning); background: var(--ui-warning-bg); color: var(--color-text); border-radius: var(--ui-r1); font-size: 13px; }
.adm-trial-row { align-items: center; flex-wrap: nowrap; }
.adm-trial-row .adm-trial-date { flex: 1 1 auto; min-width: 0; }
.pl-an-row { align-items: center; flex-wrap: wrap; gap: 8px; }
.pl-an-row .form-label { margin: 0; }
.pl-an-num { width: 76px; }
.ahri-decl-table .t-right { text-align: right; white-space: nowrap; }
.ahri-decl-send { display: flex; flex-direction: column; gap: 8px; padding: 12px 16px 16px; }
.ahri-decl-note { max-width: 720px; }
.ahri-decl-tick { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; cursor: pointer; }
.ahri-decl-send .crm-btn { align-self: flex-start; }
.ahri-decl-past-h { margin: 18px 0 8px; }
.ahri-decl-past { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; background: var(--color-surface); }
.ahri-decl-past summary { cursor: pointer; font-size: 13px; }
.ahri-decl-empty { padding: 10px 16px; }
.ahri-adm-month-label { margin: 0; }
.ahri-adm-hint { margin: 0 16px 8px; }
.ahri-adm-card { margin-top: 12px; }
.ahri-adm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 0 16px 16px; }
.ahri-adm-cols .t-h2 { margin: 8px 0 6px; }
.ahri-adm-quiet { margin: 0 0 6px; }
.ahri-adm-note { display: flex; align-items: flex-start; gap: 10px; padding: 0 16px 8px; }   /* label and note in one row under the header */
.ahri-adm-note .form-label { margin: 6px 0 0; white-space: nowrap; }
.ahri-adm-note .form-input { flex: 1; max-width: 720px; }
.ahri-adm-runs { margin-top: 8px; }                       /* B.2: the raw calculation records, folded under the recorded list */
.ahri-adm-runs summary { cursor: pointer; font-size: 13px; }
.crm-att-row .dot.is-warning { background: var(--color-warning); }
.crm-att-row .dot.is-danger { background: var(--color-error); }
@media (max-width: 820px) { .ahri-adm-cols { grid-template-columns: 1fr; } }

/* Projects lists (owner, 2026-10-05: "make a single line on projects - when its too long it pushes to the below lines"):
   the Project, Customer and Owner cells keep one line, cut with an ellipsis; the full text is the cell's title (hover).
   Code review 2026-10-08: the cut is on a block INSIDE the cell (.crm-clip-text) - max-width on a table cell itself is
   not reliable in Firefox and Safari; the block's cap is the column's (260 / 180 / 150 px) less the cell's 2 x 10px
   padding. Desktop only: a phone cannot hover the title, so below 1025px a long name wraps as before. */
@media screen and (min-width: 1025px) {
    .crm-container .crm-table td.crm-cell-clip > .crm-clip-text { display: block; max-width: 240px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .crm-container .crm-table td.crm-cell-clip-sm > .crm-clip-text { max-width: 160px; }
    .crm-container .crm-table td.crm-cell-clip-xs > .crm-clip-text { max-width: 130px; }    /* Owner (v4.231) */
    .crm-container .crm-table td.crm-cell-nw { white-space: nowrap; }   /* Country: "United Kingdom" wrapped and grew the row */
    /* v4.231: the Projects header filters narrow with their columns (the column less the header cell's 8px padding);
       the open list still shows whole names */
    #crm2-filter-proj-customer { max-width: 172px; }
    #crm2-filter-proj-owner { max-width: 142px; }
}

/* CRM lists scroll INSIDE the window (owner report 2026-10-07: "the window is cut I can not move it right to see further"):
   every CRM list table sits in .crm-table-scroll. Its box ends at the window's foot - the height is measured from the
   box's top by crmFitListScroll() (index.html) into --crm-scroll-h - so the sideways scrollbar is always on screen and
   the header row sticks at the top of the box, on the raised-surface token (dark mode follows the tokens). The
   collapsed table border scrolls away under a sticky cell, so its line is an inset shadow. Desktop only: below 1025px
   the table itself is the scroller (responsive.css 4.3) and a finger moves it. */
@media screen and (min-width: 1025px) {
    .crm-table-scroll { max-height: var(--crm-scroll-h, none); overflow: auto; }
    .crm-table-scroll > .crm-table > thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface-raised); box-shadow: inset 0 -1px 0 var(--color-border); }
}
/* Code review 2026-10-08: the page fits the window and only the list's box scrolls, so the box takes the keyboard focus
   (tabindex="0", a named region - PageDown, Space and the arrows move the list). Its ring is the theme's focus colour,
   drawn inside the box (the box ends at the window's foot: a ring outside it would be cut there), at every width - a
   tablet with a keyboard tabs into it too. */
.crm-table-scroll:focus-visible { outline: 2px solid var(--color-primary-light); outline-offset: -2px; }

/* ── The AHRI Auditor's page (docs/plans/2026-10-06-ahri-auditor.md, PR C Task C8) ─────────────────────────────────────
   applyRoleVisibility sets body.ahri-auditor for AHRI's login, both ways. The menu keeps Design, Datasheet, Unit Drawing,
   the guide and the Projects / Items lists; English only (no Docs language), performance rating only, no price column, no
   Favorites, no own default; the Projects list without Owner / Value / Last Offer / Outcome, the Items list without the
   Plate Arrangement and Delete columns. The server refuses everything else regardless (ahri_auditor_access.py). */
body.ahri-auditor #sheet-tabs-bar > .sheet-tab:not(#tab-design):not(#tab-datasheet):not(#tab-drawing):not(#tab-help):not(#rail-crm-all-projects):not(#rail-crm-all-designs),
body.ahri-auditor #sheet-tabs-bar > .rail-favs-head,
body.ahri-auditor #sheet-tabs-bar > .rail-favs-empty,
body.ahri-auditor #crm-subnav .crm-subnav-btn:not([onclick*="'all-projects'"]):not([onclick*="'all-designs'"]),
body.ahri-auditor #manual-subnav,
body.ahri-auditor #sheet-help .manual-section,
body.ahri-auditor #doc-lang,
body.ahri-auditor #rst-rating,
body.ahri-auditor #rst-performance,
body.ahri-auditor #own-default-btn,
body.ahri-auditor #ca-switch-label,
body.ahri-auditor #crm2-pfe-btn,
body.ahri-auditor #results-table-wrap th:nth-child(3),
body.ahri-auditor #results-table-wrap td:nth-child(3),
body.ahri-auditor #crm2-projects-table th:nth-child(6),
body.ahri-auditor #crm2-projects-table td:nth-child(6),
body.ahri-auditor #crm2-projects-table th:nth-child(8),
body.ahri-auditor #crm2-projects-table td:nth-child(8),
body.ahri-auditor #crm2-projects-table th:nth-child(9),
body.ahri-auditor #crm2-projects-table td:nth-child(9),
body.ahri-auditor #crm2-projects-table th:nth-child(10),
body.ahri-auditor #crm2-projects-table td:nth-child(10),
body.ahri-auditor #crm2-designs-table th:nth-child(11),
body.ahri-auditor #crm2-designs-table td:nth-child(11),
body.ahri-auditor #crm2-designs-table th:nth-child(12),
body.ahri-auditor #crm2-designs-table td:nth-child(12) { display: none !important; }
body.ahri-auditor #manual-auditor-intro { display: block !important; }

/* Item Tag (v4.244, owner 2026-10-12): the tag number of a unit from the project specification.
   - The Design page's box sits in the item's header bar (#design-crm-context: Project / Customer / Item Tag), OUTSIDE
     the input panel - the Design sheet's cells never move (test_layout_freeze). Its state text says Saved / Not saved.
   - The CRM cells (Items list Tag column, the project page's item header): the tag as text; for someone who may write
     it, a button that turns into a small input (.item-tag-input) - Enter / leaving the box saves, Escape cancels; an
     empty one reads "+ Tag" in the quiet colour.
   - The offer editor names a unit's tag under its description (.offer-item-tag).
   Tokens only: dark mode follows them. */
.design-item-tag { display: inline-flex; align-items: center; gap: 6px; }
.design-item-tag label { font-weight: 600; color: var(--color-text-muted); cursor: pointer; }
.design-item-tag input { width: 160px; height: 24px; padding: 2px 8px; font: inherit; font-size: 12px;
    border: 1px solid var(--color-border); border-radius: 4px; background: var(--color-surface); color: var(--color-text); }
.design-item-tag input::placeholder { color: var(--color-text-light); }
.design-item-tag input:focus { outline: none; border-color: var(--color-btn-primary); box-shadow: var(--ui-focus); }
.design-item-tag input[readonly] { background: var(--color-surface-raised); color: var(--color-text-muted); cursor: default; }
.design-item-tag-state { font-size: 11px; color: var(--color-text-muted); }
.design-item-tag-state.is-saved { color: var(--ui-success); }
.design-item-tag-state.is-failed { color: var(--ui-danger); }
/* Review (v4.244): on a desktop the item header bar keeps the height it has without the box (one 12px text line) - the
   wrapper is one text line high and the 22px box overflows it evenly, so the Design sheet below never moves. Phones and
   tablets (responsive.css) give the box a line of its own instead. */
@media (min-width: 1025px) {
    .design-item-tag { height: 16px; }
    .design-item-tag input { height: 22px; margin: -3px 0; }
}
.item-tag-chip { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle; font-size: 12px; font-weight: 600; color: var(--color-text); }
.item-tag-edit { display: inline-block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: middle; padding: 1px 6px; font: inherit; font-size: 12px; font-weight: 600; color: var(--color-text);
    background: transparent; border: 1px dashed transparent; border-radius: 4px; cursor: text; }
.item-tag-edit:hover, .item-tag-edit:focus-visible { border-color: var(--color-border); background: var(--color-surface-raised); outline: none; }
.item-tag-edit.is-empty { color: var(--color-text-light); font-weight: 500; }
.item-tag-edit.is-empty:hover { color: var(--ui-info); }
.item-tag-input { width: 150px; height: 24px; padding: 2px 6px; font: inherit; font-size: 12px; border: 1px solid var(--color-btn-primary);
    border-radius: 4px; background: var(--color-surface); color: var(--color-text); box-shadow: var(--ui-focus); }
.item-tag-input:focus { outline: none; }
.crm-rev-header .item-tag-chip, .crm-rev-header .item-tag-edit, .crm-rev-header .item-tag-input { margin-left: 8px; }
.offer-item-tag { font-size: 10px; color: var(--color-text-muted); margin-top: 1px; }

/* ── Program search (Feedback FB-1, owner 2026-10-18) ──────────────────────────────────────────────────────────────
   The header's search button opens #gs-panel: a box and the results grouped by kind (gsRender). Above the header and the
   rail (z 9000), below the app's own dialogs and toasts. Phones: full screen (responsive.css). */
.gs-trigger { display: inline-flex; align-items: center; gap: 6px; }
.gs-trigger .gs-ico { width: 15px; height: 15px; }
.gs-trigger .gs-kbd { font: 11px var(--ui-mono); padding: 0 5px; border: 1px solid var(--color-border); border-radius: 3px; color: var(--color-text-muted); background: var(--color-surface); }
.gs-panel { position: fixed; inset: 0; z-index: 9000; font-family: var(--ui-font); }
.gs-panel[hidden] { display: none; }
.gs-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .38); }
.gs-dialog { position: relative; margin: 64px auto 0; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 128px);
    display: flex; flex-direction: column; background: var(--color-surface); color: var(--color-text);
    border: 1px solid var(--color-border); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-3); overflow: hidden; }
.gs-box { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--color-border); flex: none; }
.gs-box > .ico { color: var(--color-text-muted); }
.gs-box .gs-input { flex: 1 1 auto; min-width: 0; height: 36px; border: none; outline: none; background: transparent;
    color: var(--color-text); font: inherit; font-size: 16px; }
.gs-box .gs-input::-webkit-search-cancel-button { display: none; }
.gs-close { flex: none; width: 32px; height: 32px; border: none; border-radius: var(--ui-r1); background: transparent;
    color: var(--color-text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.gs-close:hover { background: var(--color-bg); color: var(--color-text); }
.gs-results { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 0 8px; }
.gs-group-h { padding: 10px 16px 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--color-text-muted); }
.gs-row { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding: 7px 16px 7px 13px; border-left: 3px solid transparent; cursor: pointer; }
.gs-row.is-active { background: var(--ui-info-bg); border-left-color: var(--ui-info); }
.gs-label { font-size: 14px; font-weight: 600; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-sub { font-size: 12px; color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gs-more { padding: 4px 16px 6px; font-size: 12px; color: var(--color-text-muted); font-style: italic; }
.gs-empty { padding: 18px 16px; text-align: center; font-size: 13px; color: var(--color-text-muted); }
.gs-empty.is-error { color: var(--ui-danger); }
.gs-foot { flex: none; padding: 7px 16px; border-top: 1px solid var(--color-border); font-size: 11px; color: var(--color-text-muted); background: var(--color-surface-raised); }
body.gs-open { overflow: hidden; }
@media (min-width: 1025px) {
    /* the desktop header: the button looks like a search field */
    .header-user-info .header-btn.gs-trigger { min-width: 240px; justify-content: flex-start; gap: 8px; background: var(--color-bg);
        border-color: var(--color-border); color: var(--color-text-muted); cursor: text; margin-right: 6px; }
    .header-user-info .header-btn.gs-trigger:hover { border-color: var(--color-text-light); color: var(--color-text); }
    .header-user-info .header-btn.gs-trigger .gs-kbd { margin-left: auto; }
}

/* ── Documents To Include (v4.263, owner-approved sketch v7) ─────────────────────────────────────────────────────
   static/documents_choice.js draws the window: a navy header bar, navy bold uppercase section titles with a blue left
   marker, chips (blue = included, white = not included, grey = not available), a yellow note of the missing items and a
   footer with Cancel and the blue Create Documents. Colours come from the --dc-* tokens with the other theme tokens near the top of this file (both themes); they are set on
   body, not :root, so the ones made of the app's colours follow its dark theme (body.theme-dark). */
.dc-overlay { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center;
    padding: 16px; background: var(--dc-backdrop); font-family: var(--ui-font); }
.dc-window { width: min(460px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; overflow: hidden;
    background: var(--color-surface); color: var(--color-text); border: 1px solid var(--dc-chip-border);
    border-radius: 10px; box-shadow: var(--ui-shadow-3); font-size: 13px; }
.dc-head { flex: none; padding: 12px 16px; background: var(--dc-head-bg); color: var(--dc-head-fg); font-weight: 700;
    font-size: 15px; letter-spacing: .02em; }
.dc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 14px 16px; }
.dc-sec { margin-bottom: 14px; }
.dc-title { font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--dc-title);
    border-left: 3px solid var(--dc-blue); padding-left: 8px; margin-bottom: 8px; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.dc-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--dc-chip-border); border-radius: 999px;
    padding: 5px 12px; background: var(--dc-chip-bg); color: var(--color-text); font: inherit; font-weight: 600; cursor: pointer; }
.dc-chip:hover { border-color: var(--dc-blue); }
.dc-chip:focus-visible, .dc-btn:focus-visible, .dc-zip-link:focus-visible, .dc-zip-close:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.dc-chip .dc-tick { display: none; }
.dc-chip.is-on { background: var(--dc-blue); border-color: var(--dc-blue); color: var(--dc-on-fg); }
.dc-chip.is-on .dc-tick { display: inline; }
.dc-chip.is-grey { background: var(--dc-grey-bg); border-color: var(--dc-grey-border); color: var(--dc-grey-fg);
    font-weight: 500; cursor: not-allowed; }
.dc-chip.is-grey:hover { border-color: var(--dc-grey-border); }
.dc-note { background: var(--dc-note-bg); border: 1px solid var(--dc-note-border); border-radius: 6px; padding: 7px 9px;
    color: var(--dc-note-fg); margin-bottom: 12px; display: flex; flex-direction: column; gap: 3px; }
.dc-note[hidden], .dc-error[hidden] { display: none; }
.dc-error { color: var(--ui-danger); background: var(--ui-danger-bg); border-radius: 6px; padding: 7px 9px; margin-bottom: 12px; }
.dc-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px;
    border-top: 1px solid var(--color-border); background: var(--color-surface-raised); }
.dc-btn { border-radius: 6px; padding: 7px 16px; font: inherit; font-weight: 700; border: 1px solid var(--dc-chip-border);
    background: var(--color-surface); color: var(--color-text); cursor: pointer; }
.dc-btn-primary { background: var(--dc-blue); border-color: var(--dc-blue); color: var(--dc-on-fg); }
.dc-btn-primary:hover { background: var(--dc-blue-hover); border-color: var(--dc-blue-hover); }
.dc-btn:disabled { opacity: .6; cursor: default; }
.dc-change { font-size: 11px; color: var(--dc-blue); text-decoration: underline; cursor: pointer; white-space: nowrap; }
.dc-zip { position: fixed; top: 20px; right: 20px; z-index: 99990; display: flex; align-items: center; gap: 10px;
    padding: 10px 12px 10px 16px; background: var(--color-surface); color: var(--color-text); border: 1px solid var(--dc-blue);
    border-left: 4px solid var(--dc-blue); border-radius: var(--ui-r2); box-shadow: var(--ui-shadow-2); font-family: var(--ui-font); font-size: 13px; }
.dc-zip-link { color: var(--dc-blue); font-weight: 700; text-decoration: underline; }
.dc-zip-close { border: none; background: transparent; color: var(--color-text-muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 4px; }