/**
 * CB HPR BRAND SKIN — the cockpit wears Coldwell Banker, not Lucky Duck.
 * ---------------------------------------------------------------------------
 * WHY THIS FILE EXISTS AND NOT AN EDIT UPSTREAM
 * `erpal_crm_ui` (theme) and `erpal_record` (module) are SHARED, composer-managed
 * packages served from the Lucky Duck satis registry. Baking one client's brand
 * into shared code is the exact defect punch-list D1a records. So the tenant skin
 * lives in a tenant-named module in the build source, loads after the shared CSS,
 * and is removed by uninstalling this module. Nothing upstream is edited.
 *
 * PALETTE SOURCE — the published demo site https://cbhpr.mydigitalfrontier.com,
 * :root of assets/site.css (itself built from Randy's published coldwellbankerhpr.com
 * header/footer colours). Extracted 2026-08-03:
 *   --navy #01216A  --navy-2 #0B2F7A  --ink #0A162F  --muted #5B6472
 *   --blue #408FDD  --blue-d #2F7AC6  --gold #B8963E
 *   --line #E3E6EC  --bg #FFFFFF      --soft #F5F7FA
 * Coldwell Banker's core is the dark blue + white; #408FDD is the site's lighter
 * action blue and #B8963E its accent gold.
 *
 * WHAT WAS REPLACED
 *   1. erpal_crm_ui design tokens — Google-blue #1a73e8 / #1559b8 / #e8f0fe chrome.
 *   2. erpal_record record.css — the LUCKY DUCK palette, in that file's own words:
 *      "deep green rgb(33,57,47), gold rgb(242,160,48), sand rgb(194,163,90)".
 *      That green header card is the largest thing on every record page.
 *   3. erpal_brokerage's primary record action button (#408fdd + white = 3.4:1).
 * Structure, layout and type are untouched: this is a re-colour, not a redesign.
 *
 * CONTRAST — every pair below was measured (WCAG 2.1 relative luminance) before
 * shipping; body pairs are >= 4.5:1 and UI/large pairs >= 3:1. Ratios are noted
 * inline where a value was chosen to clear the bar rather than to match the site.
 *
 * SPECIFICITY — `html:root` (0,1,1) beats `:root` (0,1,0); `body .rec-*` (0,1,1)
 * beats `.rec-*` (0,1,0). The skin therefore wins on specificity, not only on
 * load order.
 *
 * TOKENS, NOT LITERALS, for anything a surface/ink pair depends on. The record
 * and brokerage stylesheets upstream hardcode LIGHT backgrounds with no Night
 * variant, so a literal restated here would freeze that bug in place: measured
 * in Night, the record cards were #fff carrying #e8ecf4 text at 1.18:1. Every
 * rule below that touches a surface therefore reads the theme token and keeps
 * the literal only as a fallback. Literals survive only where the colour is
 * fixed in BOTH modes — the navy record header and the pipeline stage fills.
 */

/* =========================================================================
   1. DAY — cockpit design tokens
   ========================================================================= */
html:root {
  --erpal-bg: #f5f7fa;              /* CB soft */
  --erpal-surface: #ffffff;
  --erpal-text: #0a162f;            /* CB ink        17.97:1 on white */
  --erpal-muted: #5b6472;           /* CB muted       5.98:1 on white */
  --erpal-border: #e3e6ec;          /* CB line */
  --erpal-accent: #01216a;          /* CB navy       14.72:1 on white */
  --erpal-accent-dark: #0b2f7a;     /* CB navy-2     12.34:1 under white */
  --erpal-accent-soft: #e7edf7;     /* navy on it =  12.51:1 */
  --erpal-accent-hover: #0b2f7a;    /* erpal_brokerage feedback pill reads this */
  --erpal-on-accent: #ffffff;

  /* Status hues are deliberately NOT re-branded: green/amber/red/purple have to
     stay tellable apart at a glance. Only the amber is nudged into CB's gold. */
  --erpal-warning: #b8963e;

  --erpal-hover: #edf1f7;
  --erpal-hover-soft: #f4f7fb;
  --erpal-thead-bg: #f7f9fc;
  --erpal-row-hover: #f2f6fc;
  --erpal-track: #e9eef6;
  --erpal-divider: #eef1f6;

  --erpal-sidebar-bg: #ffffff;
  --erpal-sidebar-ink: #33415a;     /* navy-tinted   10.27:1 on white */
  --erpal-sidebar-ink-dim: #6a7690; /* was #97a1b0 (2.7:1) — now 4.56:1 */
  --erpal-sidebar-active-bg: #e7edf7;
  --erpal-sidebar-active-ink: #01216a;

  --erpal-tag-blue-bg: #e7edf7;  --erpal-tag-blue-ink: #01216a;   /* 12.51:1 */
  --erpal-tag-amber-bg: #f7efdc; --erpal-tag-amber-ink: #7a6119;  /*  5.16:1 */
  /* Still unmistakably the green status hue, one step darker: the shipped
     #1b8a5a measured 3.81:1 on its own tag tint and 4.35:1 as the "+ Call"
     link, both under the body bar. #14704a is 5.34:1 and 6.09:1. */
  --erpal-tag-green-ink: #14704a;

  --erpal-shadow: 0 1px 3px rgba(1, 33, 106, .07), 0 1px 2px rgba(1, 33, 106, .05);
  --erpal-shadow-lg: 0 4px 16px rgba(1, 33, 106, .12);
}

/* =========================================================================
   2. NIGHT — same brand, lifted for a dark canvas.
   #01216A is unreadable on a dark surface, so the accent lifts to the site's
   lighter blue family instead of shipping an illegible navy (brief rule 3).
   ========================================================================= */
html:root[data-theme="dark"] {
  --erpal-bg: #0a162f;              /* CB deep */
  --erpal-surface: #132244;
  --erpal-text: #e8ecf4;            /* 15.18:1 on canvas */
  --erpal-muted: #9aa5b8;           /*  7.23:1 */
  --erpal-border: #26365a;
  --erpal-accent: #7fb3e8;          /*  8.14:1 on canvas, 7.10:1 on surface */
  --erpal-accent-dark: #5c9ad8;
  --erpal-accent-soft: #16305c;
  --erpal-accent-hover: #5c9ad8;
  --erpal-on-accent: #0a162f;       /*  8.14:1 against the lifted accent */
  --erpal-warning: #d9b65e;         /*  9.24:1 */

  --erpal-hover: #1b2c50;
  --erpal-hover-soft: #142347;
  --erpal-thead-bg: #0e1c3a;
  --erpal-row-hover: #17284c;
  --erpal-track: #1e2f55;
  --erpal-divider: #1a2a4c;
  --erpal-input-bg: #0a162f;

  --erpal-sidebar-bg: #0c1b38;
  --erpal-sidebar-ink: #c4cddd;     /* 10.67:1 */
  --erpal-sidebar-ink-dim: #8c99b2; /*  5.95:1 */
  --erpal-sidebar-active-bg: #16305c;
  --erpal-sidebar-active-ink: #9cc6f0;

  --erpal-tag-blue-bg: #16305c;  --erpal-tag-blue-ink: #9cc6f0;   /* 7.29:1 */
  /* MUST be restated here even though the values are the theme's own: this
     stylesheet's light block is `html:root` (0,1,1) and beats the theme's
     `[data-theme="dark"]` (0,1,0), so any token set only in the light block
     LEAKS into Night. Caught by the audit — the green status ink was rendering
     #14704a on the dark green tag (2.19:1). */
  --erpal-tag-green-bg: #14352a; --erpal-tag-green-ink: #3ecf8e;  /* 6.69:1 */
  --erpal-tag-amber-bg: #392c14; --erpal-tag-amber-ink: #e9b35c;
  --erpal-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
  --erpal-shadow-lg: 0 4px 18px rgba(0, 0, 0, .55);
}

/* The floating feedback pill hardcodes white text (erpal_brokerage
   feedback.css); on Night's lifted accent that is 2.21:1, so it takes the
   on-accent ink instead. */
html:root[data-theme="dark"] body .erpal-fb__btn,
html:root[data-theme="dark"] body .erpal-fb__btn:hover,
html:root[data-theme="dark"] body .erpal-fb__btn:focus { color: #0a162f; }  /* 8.14:1 */

/* AUTO (no data-theme attribute) — mirror of the block above. */
@media (prefers-color-scheme: dark) {
  html:root:not([data-theme="light"]) {
    --erpal-bg: #0a162f;
    --erpal-surface: #132244;
    --erpal-text: #e8ecf4;
    --erpal-muted: #9aa5b8;
    --erpal-border: #26365a;
    --erpal-accent: #7fb3e8;
    --erpal-accent-dark: #5c9ad8;
    --erpal-accent-soft: #16305c;
    --erpal-accent-hover: #5c9ad8;
    --erpal-on-accent: #0a162f;
    --erpal-warning: #d9b65e;

    --erpal-hover: #1b2c50;
    --erpal-hover-soft: #142347;
    --erpal-thead-bg: #0e1c3a;
    --erpal-row-hover: #17284c;
    --erpal-track: #1e2f55;
    --erpal-divider: #1a2a4c;
    --erpal-input-bg: #0a162f;

    --erpal-sidebar-bg: #0c1b38;
    --erpal-sidebar-ink: #c4cddd;
    --erpal-sidebar-ink-dim: #8c99b2;
    --erpal-sidebar-active-bg: #16305c;
    --erpal-sidebar-active-ink: #9cc6f0;

    --erpal-tag-blue-bg: #16305c;  --erpal-tag-blue-ink: #9cc6f0;
    --erpal-tag-green-bg: #14352a; --erpal-tag-green-ink: #3ecf8e;
    --erpal-tag-amber-bg: #392c14; --erpal-tag-amber-ink: #e9b35c;
    --erpal-shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
    --erpal-shadow-lg: 0 4px 18px rgba(0, 0, 0, .55);
  }
  html:root:not([data-theme="light"]) body .erpal-fb__btn,
  html:root:not([data-theme="light"]) body .erpal-fb__btn:hover,
  html:root:not([data-theme="light"]) body .erpal-fb__btn:focus { color: #0a162f; }
}

/* Links that never went through a token. Found by scanning nine cockpit pages
   for any visible anchor still computing to Olivero's #1475ad or one of the old
   Lucky Duck blues; these three were the entire remainder. Kept narrow on
   purpose — a blanket `.erpal-content a` rule would also repaint the white
   action links sitting on the navy record header. */
body .erpal-breadcrumb .breadcrumb__link,
body .erpal-content a.erpal-kancard,
body .erpal-content a:not([class]):link,
body .erpal-content a:not([class]):visited { color: var(--erpal-accent, #01216a); }

/* =========================================================================
   3. RECORD PAGES — erpal_record's Lucky Duck green/gold/sand -> CB navy/gold.
   Only colour declarations are restated; every box model rule stays upstream's.
   ========================================================================= */
body .rec-header {
  background: linear-gradient(135deg, #01216a, #0b2f7a);
  border-bottom-color: #b8963e;                  /* CB gold rule under the card */
}
body .rec-avatar        { background: #b8963e; color: #01216a; }   /* 5.24:1 */
body .rec-header__sub   { color: #c9d3e8; }                        /* 9.79:1 */
body .rec-chip          { background: rgba(255, 255, 255, .16); color: #eaf0fb; }
body .rec-chip--kl      { background: #b8963e; color: #01216a; }
body .rec-chip--tier    { background: #2d76c0; color: #fff; }
body .rec-ai__score     { color: #01216a; }
body .rec-ai__score::before { color: #5b6472; }
body .rec-ai__next      { color: #dfe6f4; }
body .rec-act:hover     { background: rgba(184, 150, 62, .92); color: #01216a; }
body .rec-stat__v       { color: #d9bc73; }                        /* 7.98:1 on navy */
body .rec-stat__l       { color: #c3cddd; }                        /* 9.18:1 on navy */

body .rec-card            { background: var(--erpal-surface, #fff); border-color: var(--erpal-border, #e3e6ec); box-shadow: var(--erpal-shadow); }
body .rec-card__title     { background: var(--erpal-thead-bg, #f7f9fc); border-bottom-color: var(--erpal-border, #e3e6ec); color: var(--erpal-text, #0a162f); }
body details.rec-card > summary.rec-card__title::after { color: var(--erpal-muted, #6a7690); }
body .rec-row             { border-bottom-color: var(--erpal-divider, #eef1f6); }
body .rec-row__l          { color: var(--erpal-muted, #5b6472); }   /* 5.98:1 */
body .rec-row__v a        { color: var(--erpal-accent, #01216a); }  /* 14.72:1 */
body .rec-empty           { color: var(--erpal-muted, #5f6b7f); }   /* 5.39:1 */

body .layout__region--third .views-element-container { background: var(--erpal-surface, #fff); border-color: var(--erpal-border, #e3e6ec); box-shadow: var(--erpal-shadow); }
body .layout__region--third .views-element-container h2 { color: var(--erpal-text, #0a162f); text-transform: uppercase; letter-spacing: .5px; font-size: .78rem; }

/* Deal pipeline bar — the one place the colours carry meaning, so each state
   stays a distinct hue AND a distinct lightness. */
body .rec-stagebar            { background: var(--erpal-surface, #fff); border-color: var(--erpal-border, #e3e6ec); box-shadow: var(--erpal-shadow); }
body .rec-stage span          { background: var(--erpal-hover, #edf1f7); color: var(--erpal-muted, #5b6472); }  /* 5.28:1 */
body .rec-stage--done span    { background: #0b2f7a; color: #dbe9fb; }   /* 10.02:1 */
body .rec-stage--active span  { background: #b8963e; color: #01216a; }   /* 5.24:1 */
body .rec-stage--won span     { background: #01216a; color: #d9bc73; }   /* 7.98:1 */
body .rec-stage--lost span    { background: #8d2b2b; color: #fff; }      /* 8.36:1 */
body .rec-stage--hold span    { background: #5b6472; color: #fff; }      /* 5.98:1 */
body .rec-stage--end span     { background: var(--erpal-thead-bg, #f5f7fa); color: var(--erpal-muted, #5f6b7f); border-color: var(--erpal-border, #dfe5ef); } /* 5.02:1 */

body .rec-agent__fake input   { border-color: var(--erpal-border, #dfe5ef); background: var(--erpal-input-bg, #fff); }
body .rec-agent__fake button  { background: var(--erpal-accent, #01216a); color: var(--erpal-on-accent, #fff); }
body .rec-agent__stub         { color: var(--erpal-text, #33415a); }
body .rec-agent__note         { color: var(--erpal-muted, #5f6b7f); }
body .rec-pulse__dot          { background: #b8963e; }
body .rec-pulse__text         { color: var(--erpal-text, #1c2a44); }
body .rec-pulse__when         { color: var(--erpal-muted, #6a7690); }

body details.rec-addpanel               { background: var(--erpal-surface, #fff); border-color: var(--erpal-border, #e3e6ec); box-shadow: var(--erpal-shadow); }
body details.rec-addpanel > summary     { background: var(--erpal-thead-bg, #f5f7fa); color: var(--erpal-accent, #01216a); }
body details.rec-addpanel > summary::after { color: var(--erpal-muted, #6a7690); }
body details.rec-addpanel[open] > summary { border-bottom-color: var(--erpal-border, #e3e6ec); }

/* =========================================================================
   4. BROKERAGE SURFACES — erpal_brokerage/css/cockpit.css
   The primary record action shipped as #408fdd on white: 3.39:1, under the body
   bar. Same brand family, moved onto the navy so it also reads as the primary.
   ========================================================================= */
/* `.rec-addpanel` also carries `.erpal-record-actions`; it is a white disclosure
   card by design, so exclude it from the banner tint. */
body .erpal-record-actions:not(.rec-addpanel) { background: var(--erpal-hover-soft, #f4f7fb); border-color: var(--erpal-border, #dfe5ef); }
body .erpal-record-actions .erpal-action-btn        { background: var(--erpal-accent, #01216a); color: var(--erpal-on-accent, #fff); }  /* 14.72:1 */
body .erpal-record-actions .erpal-action-btn:hover  { background: var(--erpal-accent-dark, #0b2f7a); color: var(--erpal-on-accent, #fff); }  /* 12.34:1 */
body .erpal-record-actions .erpal-action-hint       { color: var(--erpal-muted, #5b6472); }  /*  5.57:1 */
body .erpal-note                              { border-left-color: var(--erpal-accent, #01216a); background: var(--erpal-hover-soft, #f4f7fb); }
body .erpal-note--quiet                       { background: var(--erpal-thead-bg, #fafbfd); }
body .erpal-note--warn                        { border-left-color: var(--erpal-warning, #b8963e); }
/* Olivero's pager keeps a white chip in Night, so the accent sat on white at
   2.21:1. Put the pager on the theme surface and it reads in both modes. */
body .erpal-content .pager__item a,
body .erpal-content a.pager__link {
  background: var(--erpal-surface, #fff);
  border-color: var(--erpal-border, #e3e6ec);
}
/* Hardcoded greys that land on the new app canvas below the body bar:
   #7b8794 measured 3.41:1 on #f5f7fa, and .erpal-kanempty inherited the
   sidebar's dim ink (tuned for white, 4.25:1 on the canvas). */
/* Olivero paints a radio/checkbox group's legend as dark text on a slate bar —
   on the feedback form "What kind of feedback is this?" measured 3.72:1. Same
   bar, brand tint, navy ink; the required asterisk stays legible on it too. */
body .erpal-content .fieldset__label--group {
  background: var(--erpal-accent-soft, #e7edf7);
  color: var(--erpal-accent, #01216a);            /* 12.51:1 */
}
body .erpal-chain__when                       { color: var(--erpal-muted, #5b6472); }  /* 5.57:1 */
body .erpal-kanempty                          { color: var(--erpal-muted, #5b6472); }

/* =========================================================================
   5. DASHBOARD STAT TILES — the money figure never wraps.
   Measured before: the four KPI tiles share the ~905px content column, so each
   is ~215px wide with ~175px of usable text width, while `.erpal-kpi__value`
   was a flat 2rem (32px). "$10,498,000" needs ~189px at that size, so the last
   two zeros dropped to a second line on Randy's dashboard.
   Fix: the tile becomes its own container, the value is sized from the TILE's
   width rather than the viewport, and it is nowrap + tabular so digits align
   and columns of figures line up. The plain declaration first is the fallback
   for a browser without container query units.
   ========================================================================= */
body .erpal-kpi { container-type: inline-size; }
body .erpal-kpi__value {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
}
/* 12.5cqi = 21.3px in the 171px-wide value box the dashboard actually renders.
   Measured there with the text substituted in the live page: a deliberately
   absurd "$1,234,567,890" is 162px, "$100,000,000" 154px, the real
   "$10,498,000" 135px — all inside 171px, all on one line. At 390px the box is
   316px so the value keeps the full 2rem (worst case 244px). */
body .erpal-kpi__value { font-size: clamp(1rem, 12.5cqi, 2rem); }

/* =========================================================================
   6. RECORD FULL VIEW — get the record above the fold.
   Before (measured, 1920x1080, /lead/22): breadcrumb 72px, then the page-title
   block 80+54px, then the View/Edit/Delete tabs 74+54px — 336px of chrome, the
   lead's NAME printed twice, and the first field at y=811.
   The record header card already carries the name, the avatar, the status chips
   and the actions, so the page-title block is the duplicate that goes; the tabs
   shrink to a quiet pill row at the top right, still one click from Edit/Delete.
   ========================================================================= */

/* The band above the content, on every cockpit page.
   `body ` prefixes are load-bearing: this stylesheet is emitted BEFORE the
   theme's own CSS (module `theme`-group assets precede the active theme's,
   whatever the library weight — measured, not assumed), so an equal-specificity
   rule would silently lose. One extra element selector settles it. */
body .erpal-content { padding-top: 14px; }
body .erpal-breadcrumb { margin-bottom: 6px; }
body .erpal-breadcrumb .breadcrumb,
body .erpal-breadcrumb .breadcrumb__content,
body .erpal-breadcrumb .breadcrumb__list,
body .erpal-breadcrumb .breadcrumb__item { margin: 0; padding: 0; }
body .erpal-breadcrumb .breadcrumb__link { font-size: .82rem; }
/* The breadcrumb itself is only 19px tall — the band under it was Olivero's
   `.block { margin-block-end: var(--sp3) }` (54px) on the breadcrumb block. */
body .erpal-breadcrumb .block { margin-bottom: 0; }
body .erpal-highlighted:empty { margin-bottom: 0; }
.erpal-content__inner .block-page-title-block { margin-bottom: 14px; }
.erpal-content__inner .block-local-tasks-block { margin-bottom: 14px; }

/* Record full views only — identified by the presence of the record header card,
   so entity EDIT and DELETE forms (no card) keep their normal page title. */
.erpal-content__inner:has(.rec-header) .block-page-title-block { display: none; }

.erpal-content__inner:has(.rec-header) .block-local-tasks-block { margin-bottom: 8px; }
.erpal-content__inner:has(.rec-header) .tabs-wrapper { margin: 0; padding: 0; border: 0; }
.erpal-content__inner:has(.rec-header) ul.tabs--primary {
  display: flex;
  /* Olivero stacks the tab list into a column below 700px; the compact pills
     belong on one row at every width. */
  flex-direction: row;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  box-shadow: none;
}
.erpal-content__inner:has(.rec-header) ul.tabs--primary .tabs__tab {
  /* Olivero hides every non-active tab below 700px and re-reveals them through
     `.tabs__trigger`. The trigger is gone here, so the tabs must be shown
     unconditionally — without this, Edit and Delete are unreachable on a phone.
     Caught by rendering the lead at 390px, not by reading the CSS. */
  display: inline-block;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.erpal-content__inner:has(.rec-header) ul.tabs--primary .tabs__tab::before,
.erpal-content__inner:has(.rec-header) ul.tabs--primary .tabs__tab::after,
.erpal-content__inner:has(.rec-header) ul.tabs--primary .tabs__link::before,
.erpal-content__inner:has(.rec-header) ul.tabs--primary .tabs__link::after { display: none; }
.erpal-content__inner:has(.rec-header) .tabs__trigger { display: none; }
.erpal-content__inner:has(.rec-header) .tabs__link {
  display: inline-block;
  padding: 3px 11px;
  /* Olivero pins `.tabs__link { height: var(--tabs-height) }` = 54px; that fixed
     height, not the padding, was what made the tab row a slab. */
  height: auto;
  min-height: 0;
  font-size: .78rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .2px;
  border: 1px solid var(--erpal-border, #e3e6ec);
  border-radius: 999px;
  background: var(--erpal-surface, #fff);
  color: var(--erpal-muted, #5b6472);          /* 5.98:1 on white */
  text-decoration: none;
  box-shadow: none;
}
.erpal-content__inner:has(.rec-header) .tabs__link:hover,
.erpal-content__inner:has(.rec-header) .tabs__link:focus {
  background: var(--erpal-accent-soft, #e7edf7);
  border-color: var(--erpal-accent, #01216a);
  color: var(--erpal-accent, #01216a);          /* 12.51:1 */
}
.erpal-content__inner:has(.rec-header) .tabs__link.is-active {
  background: var(--erpal-accent-soft, #e7edf7);
  border-color: var(--erpal-accent, #01216a);
  color: var(--erpal-accent, #01216a);
}

/* The convert/delegate banner sits between the tabs and the record; keep it,
   spend less height on it. */
.erpal-content__inner:has(.rec-header) .erpal-record-actions:not(.rec-addpanel) {
  padding: .5rem .8rem;
  margin-bottom: .55rem;
}

/* Phone: the tabs row stays at the top but goes full-width-left so it does not
   crowd the record name underneath it — and the two blocks that stand between
   the phone user and the record's fields give back their slack. Measured on
   /lead/22 at 390x844: the convert banner was 174px and the header card 310px,
   which put the first field at y=797, one line above the fold. */
@media (max-width: 800px) {
  .erpal-content__inner:has(.rec-header) ul.tabs--primary { justify-content: flex-start; }

  body .erpal-record-actions:not(.rec-addpanel) { padding: .45rem .6rem; gap: .45rem; }
  body .erpal-record-actions .erpal-action-btn  { padding: .4rem .7rem; }
  body .erpal-record-actions .erpal-action-hint { font-size: .82em; line-height: 1.35; }

  body .rec-header            { gap: .5rem; padding: .6rem .8rem; }
  body .rec-header__id        { gap: .6rem; }
  body .rec-avatar            { width: 42px; height: 42px; flex: 0 0 42px; font-size: 1.05rem; }
  body .rec-header__actions   { gap: .3rem; }
  body .rec-act               { padding: .25rem .55rem; font-size: .78rem; }
  /* Stacked stat blocks cost two rows of the header on a phone; inline
     value-then-label pairs say the same thing in one. */
  body .rec-header__stats     { gap: .3rem .9rem; flex-wrap: wrap; }
  body .rec-stat              { min-width: 0; display: flex; align-items: baseline; gap: .35rem; text-align: left; }
  body .rec-stat__v           { font-size: .92rem; }
  body .rec-stat__l           { font-size: .66rem; }
  body details.rec-addpanel   { margin-bottom: .45rem; }

  /* Pre-existing, and measured with this stylesheet DISABLED so it is not mine:
     at 390px `.erpal-topbar__right` pushes the document to 450px, so the
     dashboard and every list page scroll sideways. erpal_record already ships
     exactly this containment — but only on record pages, which is why /lead/22
     was clean and / was not. Same rule, cockpit-wide. The durable home is still
     erpal-appbar.css/erpal-topbar.css upstream (noted in the report). */
  body .erpal-topbar { max-width: 100vw; overflow-x: auto; box-sizing: border-box; }
  body nav.erpal-appbar { max-width: 100vw; left: 0; right: 0; width: auto; box-sizing: border-box; overflow-x: auto; }
}


/* ------------------------------------------------------------------ 2026-08-04
   The topbar tab strip vs. this tenant's 37-character brand name.

   The theme's own responsive ladder is "drop labels first, then tabs scroll":
   erpal-topbar.css hides .erpal-topbar__logotype below 1100px. That is the
   right behaviour and a sensible breakpoint for a short brand name. "Coldwell
   Banker Holman Premier Realty" is 37 characters and eats roughly 280px of the
   bar, so once the Assistant tab joined CRM and Calendar the strip no longer
   fit and the last label was clipped. Measured as Randy, before this rule:
   strip needs 235px — has 235 at 1600 (ok), 210 at 1440, 184 at 1366, 143 at
   1280.

   This moves the theme's OWN ladder one step earlier instead of inventing new
   behaviour: the logo mark stays, the sidebar still carries the full brand
   name at the top of every page, and the tabs get their 235px back. It lives
   in the tenant's brand module, so no other tenant's chrome moves. */
@media (max-width: 1560px) {
  .erpal-topbar__logotype { display: none; }
}