*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --blue:#1F4E78;--blue2:#4A9FD4;--blue2-rgb:74,159,212;--blue3:#1a3347;--blueHover:#2563a8;--blueText:#fff;
  --accent2b:#4A9FD4;/* secondary "dual" accent — defaults to --blue2; per-office override (Vanguard = red) */
  --blue2-fade:rgba(96,165,250,.13);--blue2-faint:rgba(96,165,250,.05);
  /* ⚠ --blue3 is WRITE-ONLY: applyOfficeTheme sets it from OFFICE_CONFIG.theme.dark
     (app.core.js:105) but no rule reads it. Kept because that `dark` field is part of
     the documented per-office theme contract (_private/OFFICE_ONBOARDING.md); dropping
     the var means dropping the field from all 7 offices too. Don't reach for it as an
     "existing dark tint" — it has never rendered anything. */
  --green:#27ae60;
  --yellow:#f0b429;
  --red:#e74c3c;
  --gray:#aaa;
  /* ⚠⚠ REMOVED 2026-08-03 as part of the light-mode pass: --green2/3 --yellow2/3
     --red2/3 --gray2. All seven were declared here and referenced ZERO times in any
     css/js/html in the repo. They looked like the ready-made "status tint" layer and
     a plan was written around tokenising them — which would have changed nothing at
     all. If you need a dark status tint, the live ones are the tint/rule pairs
     below; the per-status chips carry their own values with light counterparts
     next to the badge palette.
     ⚠⚠ NEVER write a glob like "--tint-<star>/--rule-<star>" in a CSS comment. That
     sequence CLOSES THE COMMENT EARLY; the rest is parsed as garbage and the parser
     recovers by skipping to the next semicolon — which silently ate --bg:#111111 on
     the line below and shipped a transparent body (white page) in dark mode. */
  --bg:#111111;--surface:#242424;--surface2:#2c2c2c;--sidebar-bg:#111827;
  --border:rgba(255,255,255,.10);
  --field-bg:#1e1e1e;--field-border:#3a3a3a;--control-bg:#2a2a2a;--inset-bg:#1a1a1a;--panel2-bg:#161b22;--panel2-border:#21262d;/* O2 semantic control surfaces (dark defaults; light theme overrides below) */
  --text:#e2e2e2;--text2:#b3b3b3;
  /* ── POLARITY-FLIPPING TINTS ──────────────────────────────────────────────
     A tint layered on the current surface, NOT a fixed color. In dark these
     LIGHTEN; in light they must DARKEN, or the element dissolves into the page
     (rgba(255,255,255,.06) over white is white). That inversion is the whole
     point — these are the only vars whose light values are not just "paler".
     tint-* fill a shape; rule-* draw a 1-2px separator, and run a touch
     stronger because a hairline needs more contrast than an area to register.
     ⚠ Dark values were chosen as the cluster centre of the 25 literals they
     replaced, so every dark delta is <= .02 alpha (imperceptible). Keep it that
     way: retuning one of these moves every consumer at once. */
  /* ── DIMENSIONAL SCALE ────────────────────────────────────────────────────
     Radius was 19 distinct values (2,3,4,5,6,7,8,9,10,12,13,14,20,999px), which is
     why three pills sitting inches apart could carry 3px, 10px and 999px. Four steps.
     ⚠ 50% is deliberately NOT in the scale — those are circles (avatars, status dots,
     icon buttons) whose radius must track the element size, not a fixed step. */
  --r-sm:4px; --r-md:8px; --r-lg:12px; --r-pill:999px;
  /* Elevation. Only ~14 of the file's box-shadows were ever elevation; the rest are
     Sales Support glows, inset rings and focus rings, and are left alone.
     These FLIP like the tints: a dark theme lifts with black, a light one with navy. */
  /* ⚠ The KPI tile keeps its OWN surface, separate from --surface. Folding the five
     tiles into one had moved .dr-kpi off the near-black --panel2-bg, which is what made
     dark mode visibly lighter. The SURFACE is the part that had to go back; the coloured
     top accent stays — the user asked for it explicitly ("i just want the coloured
     accents for them on the top"). Dark = deep panel + accent; light = white + accent.
     ⚠ --kpi-accent is set INLINE per card by app.lst.js:494/507 to colour-code the Live
     Sales KPIs, and .dr-kpi passes a per-metric colour as an inline border-top shorthand
     (app.reports.js:161) which beats this rule outright. Both must keep winning; the
     office accent is only the FALLBACK for tiles that name no colour of their own. */
  --kpi-bg:var(--panel2-bg); --kpi-rule:var(--kpi-accent,var(--blue2));
  --e-1:0 4px 16px rgba(0,0,0,.45);    /* cards, stat tiles          */
  --e-2:0 8px 24px rgba(0,0,0,.5);     /* dropdowns, popovers, menus */
  --e-3:0 24px 60px rgba(0,0,0,.55);   /* modals                     */
  --tint-1:rgba(255,255,255,.02);   /* faint wash — zebra rows, sub-rows, hatching */
  --tint-2:rgba(255,255,255,.06);   /* subtle fill — hover, bar tracks, small chips */
  --tint-3:rgba(255,255,255,.16);   /* visible chip — count badges */
  --rule-1:rgba(255,255,255,.05);   /* hairline separator between rows */
  --rule-2:rgba(255,255,255,.14);   /* emphasis rule — total rows, modal edge */
  --sidebar:240px;
}
/* ── LIGHT THEME (toggle; master-admin + activator always stay dark) ── */
/* First pass: flips the core surfaces + the common hardcoded dark elements.
   Sidebar intentionally stays dark navy (white content + dark rail). */
html[data-theme="light"]{
  /* ⚠⚠ GREY DESK, WHITE PAPER. Every light surface used to sit above L=0.75 — page,
     card, fields, controls, panels — so a card had NOTHING to float on and the whole
     screen read as one white expanse. Measured: page-to-card separation was 1.10:1,
     against dark's 1.22:1. The page is now a real grey and the cards are the paper,
     which takes separation to 1.30:1.
     🔑 The fix is the PAGE, not the cards. Lightening the cards further would have made
     the wall of white worse; the canvas underneath is what was missing. */
  --bg:#dde2ea; --surface:#ffffff; --surface2:#f2f5f9;
  --border:rgba(15,23,42,.16);
  --text:#1b2433; --text2:#5b6675;
  --field-bg:#ffffff; --field-border:#cfd6e0; --control-bg:#eef1f6; --inset-bg:#eef2f7; --panel2-bg:#f7f9fc; --panel2-border:#c4cedb;
  /* The polarity flip: white-alpha -> navy-alpha. Alphas are NOT mirrored 1:1 —
     dark ink on a light surface reads stronger than light ink on a dark one at
     the same alpha, so these sit slightly higher only where a hairline has to
     hold up (rule-*), and in line with the .045 zebra the light patches below
     already use (tint-1). */
  --tint-1:rgba(15,23,42,.04); --tint-2:rgba(15,23,42,.07); --tint-3:rgba(15,23,42,.11);
  --rule-1:rgba(15,23,42,.13); --rule-2:rgba(15,23,42,.24);
  /* Elevation on light: a black shadow over a white page reads as grey mud, so these
     are navy-tinted and use a two-layer contact+ambient pair instead of one soft blur. */
  --kpi-bg:#ffffff; --kpi-rule:var(--kpi-accent,var(--blue2));
  --e-1:0 1px 3px rgba(15,23,42,.08),0 1px 2px rgba(15,23,42,.04);
  --e-2:0 6px 18px rgba(15,23,42,.10),0 2px 5px rgba(15,23,42,.06);
  --e-3:0 16px 48px rgba(15,23,42,.18),0 4px 12px rgba(15,23,42,.08);
}
/* ── STAR WARS "console" skin — Pass 1: panels + readout headers ── */
html[data-office="salessupport"] .ss-card{
  position:relative; padding:22px; border:1px solid rgba(79,168,255,.22); border-radius:var(--r-md);
  background:linear-gradient(180deg, rgba(23,32,58,.5), var(--surface));
  box-shadow:0 10px 34px rgba(0,0,0,.5), inset 0 1px 0 rgba(79,168,255,.08);
}
/* glowing top accent bar, bled to the panel edges */
html[data-office="salessupport"] .ss-rule{
  height:2px; border-radius:0; margin:-22px -22px 18px;
  background:linear-gradient(90deg, transparent, var(--blue2) 8%, var(--ss-green) 50%, var(--ss-gold) 92%, transparent);
  box-shadow:0 0 10px rgba(79,168,255,.4);
}
/* HUD corner brackets (blue top-left, gold bottom-right) */
html[data-office="salessupport"] .ss-card::before,
html[data-office="salessupport"] .ss-card::after{ content:''; position:absolute; width:12px; height:12px; pointer-events:none }
html[data-office="salessupport"] .ss-card::before{ top:8px; left:8px; border-top:2px solid var(--blue2); border-left:2px solid var(--blue2); opacity:.75 }
html[data-office="salessupport"] .ss-card::after{ bottom:8px; right:8px; border-bottom:2px solid var(--ss-gold); border-right:2px solid var(--ss-gold); opacity:.55 }
/* readout headers — geometric Orbitron caps with a blue glow */
html[data-office="salessupport"] .ss-h2{
  font-family:Orbitron,'Arial Black',sans-serif; font-weight:900; text-transform:uppercase;
  letter-spacing:2.5px; font-size:16px; color:#eaf3ff; text-shadow:0 0 14px rgba(79,168,255,.35);
}
/* angular glowing buttons */
html[data-office="salessupport"] .ps-btn{ border-radius:var(--r-sm); background:linear-gradient(180deg,#3f80ec,#1c55d4); color:#fff; text-transform:uppercase; letter-spacing:1px; box-shadow:0 0 0 1px rgba(79,168,255,.45), 0 4px 16px rgba(28,85,212,.35); transition:box-shadow .15s, filter .15s }
html[data-office="salessupport"] .ps-btn:hover{ filter:brightness(1.08); box-shadow:0 0 0 1px var(--blue2), 0 0 20px rgba(79,168,255,.5) }
html[data-office="salessupport"] .ps-btn.secondary{ background:transparent; color:var(--text2); box-shadow:inset 0 0 0 1px var(--field-border) }
html[data-office="salessupport"] .ps-btn.secondary:hover{ background:transparent; box-shadow:inset 0 0 0 1px var(--blue2); color:#eaf3ff }
/* ── STAR WARS console skin — Pass 3: fields / inputs / rows / notes / scrollbars ── */
/* form fields glow on focus */
html[data-office="salessupport"] .ps-input,
html[data-office="salessupport"] .ps-select,
html[data-office="salessupport"] .ps-textarea{ border-radius:var(--r-sm); transition:border-color .15s, box-shadow .15s }
html[data-office="salessupport"] .ps-input:focus,
html[data-office="salessupport"] .ps-select:focus,
html[data-office="salessupport"] .ps-textarea:focus,
html[data-office="salessupport"] #login-email:focus{ outline:none; border-color:var(--blue2); box-shadow:0 0 0 1px var(--blue2), 0 0 14px rgba(79,168,255,.22) }
/* combobox menu — holographic frame */
html[data-office="salessupport"] .ss-combo-menu{ border-color:rgba(79,168,255,.3); box-shadow:0 0 0 1px rgba(79,168,255,.12), 0 14px 34px rgba(0,0,0,.6) }
@keyframes ss-scan{ 0%{ background-position:-40% 0 } 100%{ background-position:140% 0 } }
/* frosted-glass panels floating over the orbs (rim-light top edge) */
html[data-office="salessupport"] .ss-card{
  background:rgba(18,25,46,.6);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border:1px solid rgba(140,180,255,.16);
  box-shadow:0 10px 34px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
@keyframes ss-stardrift{ from{ background-position:0 0 } to{ background-position:-240px -240px } }
@keyframes ss-stardrift2{ from{ background-position:0 0 } to{ background-position:170px 255px } }
@keyframes ss-twinkleA{ from{ opacity:.45 } to{ opacity:.9 } }
@keyframes ss-twinkleB{ from{ opacity:.25 } to{ opacity:.6 } }
@keyframes ss-topscan{ from{ background-position:250% 0 } to{ background-position:-50% 0 } }
/* ── SALES SUPPORT — ticket UI (Slice 3+) ── */
.ss-card{ margin-bottom:18px }
.ss-rule{ height:3px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--blue2),var(--ss-gold,var(--accent2b)));margin:-2px 0 16px }
.ss-h2{ color:var(--blue2);margin:0 0 4px;font-size:20px }
.ss-fld{ display:flex;flex-direction:column;gap:5px }
.ss-fld--full{ grid-column:1 / -1 }
.ss-lbl{ font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--text2) }
.ss-actions{ display:flex;align-items:center;gap:16px;margin-top:18px }
.ss-status{ font-size:13px }   /* let the dropdown escape the card */
.ss-combo{ position:relative }
.ss-combo-input{ padding-right:28px }
.ss-combo::after{ content:'';position:absolute;right:12px;top:50%;margin-top:-5px;width:7px;height:7px;border-right:2px solid var(--text2);border-bottom:2px solid var(--text2);transform:rotate(45deg);pointer-events:none;opacity:.7 }
.ss-combo-menu{ position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:50;display:none;background:var(--surface2);border:1px solid var(--field-border);border-radius:var(--r-md);box-shadow:var(--e-2);max-height:240px;overflow-y:auto;padding:4px }
.ss-combo-menu.open{ display:block }
.ss-combo-opt{ padding:8px 10px;border-radius:var(--r-md);font-size:14px;color:var(--text);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis }
.ss-combo-opt:hover,.ss-combo-opt.hi{ background:var(--blue2-fade) }
.ss-combo-create{ color:var(--accent2b);font-weight:600 }
.ss-combo-empty{ padding:8px 10px;font-size:13px;color:var(--text2) }
.ss-combo-add{ padding:9px 10px;border-radius:var(--r-md);font-size:14px;font-weight:700;color:var(--ss-green,#38E08A);cursor:pointer;border-bottom:1px solid var(--field-border);margin-bottom:4px }
.ss-combo-add:hover,.ss-combo-add.hi{ background:rgba(56,224,138,.14) }
.ss-combo-addhint{ padding:9px 10px;font-size:12px;color:var(--text2);border-top:1px solid var(--field-border);margin-top:4px;opacity:.85 }
/* add-new popup */
.ss-addpop-bg{ position:fixed;inset:0;background:rgba(3,6,14,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:200;display:flex;align-items:center;justify-content:center;padding:20px }
.ss-addpop{ width:100%;max-width:380px }
.ss-addpop-fields{ display:flex;flex-direction:column;gap:12px;margin-bottom:6px }


/* ═══════════════════ POWERSHIFT — DARK-MODE LIFT (2026-09-17, user: "the dark mode is to dark
   could we increase the contrast ?" → option L from a rendered A/B) ═══════════════════
   Cosmetic branding gated on office id, which R-005 allows; the feature set is untouched.
   🔑 SCOPE IS THE WHOLE SELECTOR, AND EVERY PART OF IT MATTERS:
     · [data-office="powershift"] — no other office can match.
     · [data-theme="dark"]        — light mode is left exactly as it was (it was not the complaint).
     · body                       — NOT html. applyOfficeTheme writes --sidebar-bg as an INLINE style
       on <html>, and an inline style beats any rule on the same element. Declaring these on <body>
       lets them inherit down to everything inside, sidebar included.
   ⚠ --kpi-bg is restated on purpose. :root defines it as var(--panel2-bg), and that reference is
   RESOLVED AT :root, so overriding --panel2-bg further down does not reach it. Without this line the
   stat tiles stay navy-black while every surface around them lifts. Seen in the preview render.
   ⚠ The sidebar is their #606060 swatch, so its text can no longer be low-alpha white: on #606060 the
   stock values measured 1.6:1 (group label), 2.3:1 (office) and 2.7:1 (user line). Raised below.
   ⚠ Status chips (.sp-*, .rp-*, .badge-*, .pill-*) keep their own dark tints by design — they are
   semantic, not surfaces, and they still read on the lifted card.
   Measured after the lift: card vs page 1.32 · text on card 9.70:1 · secondary 6.97:1 ·
   button #E5E5E5 on card 8.62:1 · white nav on the #606060 sidebar 6.29:1.
   Rebuild the comparison with _private/preview/powershift_dark_preview.js. */
html[data-office="powershift"][data-theme="dark"] body{
  --bg:#2A2A2A; --surface:#3D3D3D; --surface2:#474747; --sidebar-bg:#0A0A0A;   /* 09-29: black, not #606060 (gold rebrand) */
  --border:rgba(255,255,255,.16);
  --field-bg:#333333; --field-border:#5A5A5A; --control-bg:#454545; --inset-bg:#303030;
  --panel2-bg:#333333; --panel2-border:#4F4F4F; --kpi-bg:#333333;
  --text:#F2F2F2; --text2:#CFCFCF;
}
/* Sidebar text on the mid-grey: alpha whites, raised to clear 4.5:1 (label 4.34, office/user 5.3+). */
html[data-office="powershift"][data-theme="dark"] .nav-item{ color:rgba(255,255,255,.88) }
html[data-office="powershift"][data-theme="dark"] .nav-group-label{ color:rgba(255,255,255,.75) }
html[data-office="powershift"][data-theme="dark"] .sidebar-office{ color:rgba(255,255,255,.78) }
html[data-office="powershift"][data-theme="dark"] .sidebar-user{ color:rgba(255,255,255,.85) }
html[data-office="powershift"][data-theme="dark"] .sign-out{ color:rgba(255,255,255,.8) }
/* The header/footer hairlines are 8% white, which vanishes on #606060. */
html[data-office="powershift"][data-theme="dark"] .sidebar-header,
html[data-office="powershift"][data-theme="dark"] .sidebar-footer{ border-color:rgba(255,255,255,.22) }
/* ── POWERSHIFT GOLD REBRAND (2026-09-29) — the owner's own mockup of their Master Tracker, rebuilt as design "C" (user's pick
   from rendered side-by-sides, _private/preview/powershift_gold.html; generator powershift_gold_preview.js). The PALETTE is
   OFFICE_CONFIG.powershift.theme; the gold LOGO is OFFICE_CONFIG.powershift.logos. Every rule is scoped to this office, so the
   other offices cannot change (theme_noop_check).
   · black sidebar, gold nav icons + gold active item, gold edge glow · big title + metallic silver/navy/gold stripe (an SVG, so
     its edges are anti-aliased — the first CSS-gradient version looked jagged, user 09-29) · big moon button + gold Refresh
   · navy card band with a gold list icon + gold count · gold Clear · filled pastel chips (navy Orders) · navy table head with
     sort hints · bigger rows / pills / NOTES · at-risk row: amber tint + gold bars (as their mockup draws it) · hover = gold bar
   ⚠ Status pill COLOURS are unchanged on purpose — they mean the same thing in every office; only their shape follows the mockup. */
html[data-office="powershift"] .card-header.dark{background:linear-gradient(90deg,#0A223E,#18324D);color:#fff;border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0}
html[data-office="powershift"] .card-header.dark span{color:#D4AF5A;opacity:1!important;font-weight:700!important}
html[data-office="powershift"] .refresh-btn:not(#theme-toggle),
html[data-office="powershift"] .clear-filters-btn{background:linear-gradient(180deg,#E0BD66,#C79E48);color:#0A223E;border:1px solid #B8923F;font-weight:700}
html[data-office="powershift"] .refresh-btn:not(#theme-toggle):hover,
html[data-office="powershift"] .clear-filters-btn:hover{background:linear-gradient(180deg,#EACB7A,#D4AB52);border-color:#9C7A30;color:#0A223E}
html[data-office="powershift"] .nav-item.active{background:linear-gradient(90deg,#C79E48,#E0BD66);color:#0A0A0A;border-left-color:#E6C56D;border-radius:var(--r-md)}
html[data-theme="light"][data-office="powershift"] .ct-chip.ct-chip-active{background:#17304C;border-color:#17304C;color:#fff}
html[data-theme="light"][data-office="powershift"] .ct-chip.ct-chip-active b{color:#fff}
html[data-theme="light"][data-office="powershift"] .call-table tbody tr.ct-row-atrisk td{background:#FAF2DE}
html[data-office="powershift"] .nav-item{font-size:.95rem;padding:8px 18px;color:rgba(255,255,255,.92)}
html[data-office="powershift"] .nav-item .nav-icon{color:#D4AF5A}
html[data-office="powershift"] .nav-item .nav-icon svg{width:21px;height:21px}
html[data-office="powershift"] .nav-item.active{margin:2px 8px;padding:8px 12px}
html[data-office="powershift"] .nav-item.active .nav-icon{color:#0A0A0A}
html[data-office="powershift"] .nav-group-label{letter-spacing:.14em;color:rgba(255,255,255,.72)}
html[data-office="powershift"] .sidebar{box-shadow:inset -2px 0 0 rgba(204,164,75,.45),inset -46px 0 50px -44px rgba(204,164,75,.28)}
html[data-office="powershift"] .topbar{background-image:none;position:relative;overflow:hidden;padding-top:12px;padding-bottom:12px}
html[data-theme="light"][data-office="powershift"] .topbar{background:linear-gradient(180deg,#F8F9FA,#ECEEF1)}
html[data-office="powershift"] .topbar > *{position:relative;z-index:1}
html[data-office="powershift"] .topbar::before{content:'';position:absolute;top:0;bottom:0;left:57.5%;width:280px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 190 72' preserveAspectRatio='xMinYMid meet'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23D9DBDF'/%3E%3Cstop offset='.55' stop-color='%23AEB0B5'/%3E%3Cstop offset='1' stop-color='%238A8C92'/%3E%3C/linearGradient%3E%3ClinearGradient id='n' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230E1A2C'/%3E%3Cstop offset='.7' stop-color='%231B2C47'/%3E%3Cstop offset='.92' stop-color='%233A3A2E'/%3E%3Cstop offset='1' stop-color='%238A7440'/%3E%3C/linearGradient%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%23F3D78A'/%3E%3Cstop offset='.15' stop-color='%23D9B45A'/%3E%3Cstop offset='.55' stop-color='%23B98F3C'/%3E%3Cstop offset='.8' stop-color='%23D8B660'/%3E%3Cstop offset='1' stop-color='%23A07A2C'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpolygon points='0,72 31,72 100,0 69,0' fill='url(%23s)'/%3E%3Cpolygon points='31,72 73,72 142,0 100,0' fill='url(%23n)'/%3E%3Cpolygon points='73,72 120,72 189,0 142,0' fill='url(%23g)'/%3E%3C/svg%3E") left center/auto 100% no-repeat}
html[data-office="powershift"] .topbar h2{font-size:1.5rem;font-weight:700;letter-spacing:-.01em}
html[data-theme="light"][data-office="powershift"] .topbar h2{color:#151A23}
html[data-office="powershift"] #page-subtitle{font-size:.92rem!important}
html[data-office="powershift"] #last-updated{font-size:.92rem!important}
html[data-office="powershift"] #last-updated::after{content:'';display:inline-block;width:19px;height:19px;margin-left:12px;vertical-align:-4px;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-office="powershift"] #theme-toggle{width:44px;height:44px;padding:0;border-radius:var(--r-md);box-shadow:var(--e-1)}
html[data-theme="light"][data-office="powershift"] #theme-toggle{border:1px solid #C8CED7;border-color:#C8CED7;color:#17304C}
html[data-office="powershift"] #theme-toggle .ico svg{width:22px;height:22px}
html[data-office="powershift"] .refresh-btn:not(#theme-toggle){height:44px;padding:0 22px;font-size:1.02rem;border-radius:var(--r-md);box-shadow:0 2px 6px rgba(150,110,30,.28)}
html[data-office="powershift"] .refresh-btn:not(#theme-toggle) .ico svg{width:20px;height:20px;margin-right:4px}
html[data-office="powershift"] .card{box-shadow:var(--e-2)}
html[data-office="powershift"] .card:has(.call-table) > .card-header.dark{padding:17px 22px 17px 64px;font-size:1.3rem;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4AF5A' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M9 6h12M9 12h12M9 18h12'/%3E%3Ccircle cx='4' cy='6' r='1.3' fill='%23D4AF5A'/%3E%3Ccircle cx='4' cy='12' r='1.3' fill='%23D4AF5A'/%3E%3Ccircle cx='4' cy='18' r='1.3' fill='%23D4AF5A'/%3E%3C/svg%3E") 22px center/30px no-repeat,linear-gradient(90deg,#0A223E,#18324D)}
html[data-office="powershift"] .card:has(.call-table) > .card-header.dark span{font-size:1.15rem!important}
html[data-office="powershift"] .filter-row{padding:14px 16px;border-radius:var(--r-lg)}
html[data-office="powershift"] .filter-row input,
html[data-office="powershift"] .dd-btn,
html[data-office="powershift"] .date-filter-wrap input[type=date]{height:40px;border-radius:var(--r-md);font-size:.95rem}
html[data-office="powershift"] .dd-btn{font-weight:700;padding:0 16px}
html[data-office="powershift"] .date-filter-wrap{font-size:.86rem}
html[data-office="powershift"] .clear-filters-btn{height:40px;padding:0 20px;font-size:.95rem;border-radius:var(--r-md)}
html[data-office="powershift"] .ct-chip{padding:7px 16px;font-size:.9rem;border-radius:var(--r-pill);gap:7px}
html[data-office="powershift"] .ct-chip b{margin-left:4px}
html[data-theme="light"][data-office="powershift"] .ct-chip-atrisk{background:#F6DFA2;border-color:#E3BE62;color:#7F4506}
html[data-theme="light"][data-office="powershift"] .ct-chip-rotting{background:#FAD1D5;border-color:#EFA3AB;color:#A81D2A}
html[data-theme="light"][data-office="powershift"] .ct-chip-booked{background:#CDE1FA;border-color:#9DC1EE;color:#17529B}
html[data-office="powershift"] .tbl-count{font-size:.86rem;font-weight:700}
html[data-office="powershift"] .ct-risk-filter{height:38px;border-radius:var(--r-md);font-size:.92rem}
html[data-office="powershift"] .call-table{font-size:.97rem}
html[data-office="powershift"] .call-table th{font-size:.8rem;font-weight:800;letter-spacing:.06em;padding:13px 16px}
html[data-theme="light"][data-office="powershift"] .call-table th{background:#D9DDE4;color:#17304C;border-color:#C3C9D2}
html[data-office="powershift"] .call-table th:first-child{border-top-left-radius:var(--r-md)}
html[data-office="powershift"] .call-table th:last-child{border-top-right-radius:var(--r-md)}
html[data-office="powershift"] .call-table th.sort-th::after{content:'\21D5';margin-left:8px;opacity:.55}
html[data-office="powershift"] .call-table td{padding:7px 16px}
html[data-office="powershift"] .rep-name{font-weight:700}
html[data-theme="light"][data-office="powershift"] .rep-name{color:#0F1B35}
html[data-office="powershift"] .dsi-link{font-weight:400}
html[data-theme="light"][data-office="powershift"] .dsi-link{color:#2A2F3A}
html[data-office="powershift"] .prod-pill,
html[data-office="powershift"] .sp{font-size:.86rem;padding:4px 13px;border-radius:var(--r-pill)}
html[data-theme="light"][data-office="powershift"] .prod-pill{background:#D3E5FC;color:#1F5FA8;box-shadow:inset 0 0 0 1px #A9C8F0}
html[data-office="powershift"] .notes-btn{height:34px;padding:0 18px;font-size:.88rem;font-weight:700;border-radius:var(--r-md)}
html[data-theme="light"][data-office="powershift"] .notes-btn{border-color:#C3C9D2;color:#0F1B35}
html[data-office="powershift"] .call-table tbody tr.ct-row-atrisk td{box-shadow:inset 3px 0 0 #D6A951}
html[data-theme="light"][data-office="powershift"] .call-table tbody tr.ct-row-atrisk .notes-btn{border-color:#E2C27C;background:#FFF8E6}
html[data-office="powershift"] .ct-flag-atrisk{font-size:.78rem;padding:3px 10px;border-radius:var(--r-pill)}
html[data-theme="light"][data-office="powershift"] .ct-flag-atrisk{background:#F6DFA2;color:#7F4506;box-shadow:inset 0 0 0 1px #E3BE62}
html[data-office="powershift"] .call-table tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 #D6A951}

/* ═══════════════════ MILLENNIUM FALCON COCKPIT — dashboard reskin (login frozen) ═══════════════════
   Sales Support DASHBOARD only. Scoped to #app + the two body-level overlays (#ticket-modal, .ss-addpop-bg)
   that live OUTSIDE #app, so #login-screen keeps the original Jedi look untouched. Palette vars are redefined
   here (nearest-ancestor wins over the JS-injected inline vars on <html>), which auto-recolors every var-based
   .ss-* rule; the rules below then override the blue "console" passes with warm GUNMETAL panels + AMBER/RED
   indicator lighting. Pass 1 = palette + windscreen + recolor. (Greebles/LEDs/toggles land in Pass 2.) */
html[data-office="salessupport"] #app,
html[data-office="salessupport"] #ticket-modal,
html[data-office="salessupport"] .ss-addpop-bg{
  --bg:#0a0a0c; --surface:#242a31; --surface2:#2c333b; --sidebar-bg:#191d22;
  --border:rgba(212,200,178,.12);
  --field-bg:#15181c; --field-border:#3a424c; --control-bg:#20252c; --inset-bg:#131619; --panel2-bg:#1b2026; --panel2-border:#333b45;
  --text:#eae4d8; --text2:#a79f92;
  --blue2:#f2a83a; --accent2b:#4ea8ff;                 /* amber PRIMARY + blue console-LED secondary */
  --blue2-rgb:242,168,58; --blue2-fade:rgba(242,168,58,.14); --blue2-faint:rgba(242,168,58,.06);
  --ss-gold:#f4c21b; --ss-green:#37e0a0;
  --fx-amber:#f2a83a; --fx-red:#e7532a; --fx-blue:#4ea8ff; --fx-green:#37e0a0;   /* indicator-LED palette */
  --metal-hi:#5a636e; --metal-lo:#12151a; --steel:#3a424c;
}
@keyframes ss-stardrift{ from{ background-position:0 0 } to{ background-position:400px 400px } }
@keyframes ss-startwinkle{ from{ opacity:.84 } to{ opacity:1 } }
/* MOBILE Sales Support: the cockpit windscreen (metal canopy + planet) is far too busy on a phone —
   drop the canopy + planet + nebula and leave just the drifting starfield (like the login) on deep space. */
@media (max-width:768px){
  html[data-office="salessupport"] #app .content::after{ display:none }          /* no metal canopy */
  html[data-office="salessupport"] #app .content{ background-image:none }         /* no planet/nebula — starfield (::before) + deep space only */
  /* ⚠ iOS Safari bug: backdrop-filter + overflow:auto on the SAME element kills scrolling. Drop the blur
     on mobile panels so the tall detail modal scrolls freely. */
  html[data-office="salessupport"] #app .ss-card,
  html[data-office="salessupport"] #ticket-modal .modal{ -webkit-backdrop-filter:none; backdrop-filter:none }
  /* wide data tables (queue + follow-ups) → STACKED CARDS on mobile: no sideways scroll, every field shown
     as a label:value row with long values wrapping (nested horizontal touch-scroll is unreliable on phones). */
  html[data-office="salessupport"] #app .ss-tablewrap{ overflow:visible }
  html[data-office="salessupport"] #app .ss-table,
  html[data-office="salessupport"] #app .ss-table tbody{ display:block }
  html[data-office="salessupport"] #app .ss-table tr:not(.ss-row){ display:none }        /* hide the header row */
  html[data-office="salessupport"] #app .ss-table tr.ss-row{ display:block; margin:0 0 12px; padding:11px 14px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--inset-bg) }
  html[data-office="salessupport"] #app .ss-table tr.ss-row:last-child{ margin-bottom:0 }
  html[data-office="salessupport"] #app .ss-table tr.ss-row:hover td{ background:transparent }
  html[data-office="salessupport"] #app .ss-table td{ display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:5px 0 !important; border:none !important; white-space:normal !important; text-align:right; overflow-wrap:anywhere; min-width:0 }
  html[data-office="salessupport"] #app .ss-table td::before{ content:attr(data-label); flex:0 0 auto; color:var(--text2); font-size:11px; text-transform:uppercase; letter-spacing:.5px; font-weight:600; text-align:left; padding-top:1px }
  /* ticket detail modal (lives OUTSIDE #app, so scope to #ticket-modal): wrap the header status badge,
     force the 2-col properties grid to a single column, and clip so it never causes horizontal page scroll */
  html[data-office="salessupport"] #ticket-modal .modal{ overflow-x:hidden }
  html[data-office="salessupport"] #ticket-modal .ss-td-head{ flex-wrap:wrap; gap:8px }
  html[data-office="salessupport"] #ticket-modal .ss-td-grid{ grid-template-columns:minmax(0,1fr) }
  html[data-office="salessupport"] #ticket-modal .ss-note-body{ overflow-wrap:anywhere }
}

/* ── console panels: brushed gunmetal instead of blue frosted glass ── */
html[data-office="salessupport"] #app .ss-card,
html[data-office="salessupport"] .ss-addpop{
  background:linear-gradient(180deg,#2a313a 0%,#232a32 48%,#1d232b 100%);
  -webkit-backdrop-filter:none; backdrop-filter:none;
  border:1px solid rgba(210,196,172,.14); border-radius:var(--r-md);
  box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,220,170,.10), inset 0 0 0 1px rgba(0,0,0,.28);
}
/* the panel top-rule becomes a warm amber/red indicator strip */
html[data-office="salessupport"] #app .ss-rule,
html[data-office="salessupport"] .ss-addpop .ss-rule{
  background:linear-gradient(90deg, transparent, var(--fx-red) 10%, var(--fx-amber) 42%, var(--ss-gold) 70%, var(--fx-amber) 90%, transparent);
  box-shadow:0 0 10px rgba(242,140,40,.45);
}
/* corner accents → amber (top-left) / steel (bottom-right) */
html[data-office="salessupport"] #app .ss-card::before{ border-top-color:var(--fx-amber); border-left-color:var(--fx-amber); opacity:.7 }
html[data-office="salessupport"] #app .ss-card::after{ border-bottom-color:var(--steel); border-right-color:var(--steel); opacity:.65 }
/* readout headers glow amber */
html[data-office="salessupport"] #app .ss-h2{ color:#f6efe1; text-shadow:0 0 14px rgba(242,168,58,.3) }

/* ── console buttons: gunmetal body, warm top-light, amber glow on press/hover ── */
html[data-office="salessupport"] #app .ps-btn,
html[data-office="salessupport"] #ticket-modal .ps-btn,
html[data-office="salessupport"] .ss-addpop .ps-btn{
  background:linear-gradient(180deg,#3a424c,#232830); color:#fbe6c8; border-radius:var(--r-sm);
  text-transform:uppercase; letter-spacing:1px;
  box-shadow:0 0 0 1px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,220,160,.18), 0 4px 14px rgba(0,0,0,.5);
}
html[data-office="salessupport"] #app .ps-btn:hover,
html[data-office="salessupport"] #ticket-modal .ps-btn:hover,
html[data-office="salessupport"] .ss-addpop .ps-btn:hover{ filter:brightness(1.06); color:#fff; box-shadow:0 0 0 1px var(--fx-amber), inset 0 1px 0 rgba(255,220,160,.22), 0 0 18px rgba(242,168,58,.45) }
html[data-office="salessupport"] #app .ps-btn.secondary{ background:transparent; color:var(--text2); box-shadow:inset 0 0 0 1px var(--field-border) }
html[data-office="salessupport"] #app .ps-btn.secondary:hover{ background:transparent; color:#fdf3e2; box-shadow:inset 0 0 0 1px var(--fx-amber) }

/* ── recessed metal inputs; amber focus (NB: #login-email deliberately untouched) ── */
html[data-office="salessupport"] #app .ps-input:focus,
html[data-office="salessupport"] #app .ps-select:focus,
html[data-office="salessupport"] #app .ps-textarea:focus,
html[data-office="salessupport"] #ticket-modal .ps-input:focus,
html[data-office="salessupport"] #ticket-modal .ps-select:focus,
html[data-office="salessupport"] #ticket-modal .ps-textarea:focus,
html[data-office="salessupport"] .ss-addpop .ps-input:focus,
html[data-office="salessupport"] .ss-addpop .ps-select:focus,
html[data-office="salessupport"] .ss-addpop .ps-textarea:focus{ border-color:var(--fx-amber); box-shadow:0 0 0 1px var(--fx-amber), 0 0 14px rgba(242,168,58,.25) }
html[data-office="salessupport"] #app .ss-combo-menu,
html[data-office="salessupport"] #ticket-modal .ss-combo-menu{ border-color:rgba(210,196,172,.28); box-shadow:0 0 0 1px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.6) }
/* ═══════════════════ END MILLENNIUM FALCON COCKPIT — Pass 1 ═══════════════════ */

/* ═══════════════════ MILLENNIUM FALCON COCKPIT — Pass 2: greebles (glows are STATIC; no blinking) ═══════════════════ */
/* native radios/checkboxes → amber (Submission Type, etc.) */
html[data-office="salessupport"] #app input[type=radio],
html[data-office="salessupport"] #app input[type=checkbox],
html[data-office="salessupport"] #ticket-modal input[type=radio],
html[data-office="salessupport"] #ticket-modal input[type=checkbox],
html[data-office="salessupport"] .ss-addpop input[type=radio],
html[data-office="salessupport"] .ss-addpop input[type=checkbox]{ accent-color:var(--fx-amber) }

/* console panels: fine brushed-metal grain + corner RIVETS (bolts); the Jedi HUD brackets retire */
html[data-office="salessupport"] #app .ss-card,
html[data-office="salessupport"] .ss-addpop{
  background:
    radial-gradient(circle at 13px 13px, rgba(0,0,0,.5) 0 1.8px, rgba(255,222,170,.13) 2.2px 2.9px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 13px) 13px, rgba(0,0,0,.5) 0 1.8px, rgba(255,222,170,.13) 2.2px 2.9px, transparent 3.4px),
    radial-gradient(circle at 13px calc(100% - 13px), rgba(0,0,0,.5) 0 1.8px, rgba(255,222,170,.13) 2.2px 2.9px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px), rgba(0,0,0,.5) 0 1.8px, rgba(255,222,170,.13) 2.2px 2.9px, transparent 3.4px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.014) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, rgba(40,47,56,.84) 0%, rgba(33,40,49,.87) 48%, rgba(26,32,40,.9) 100%);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);   /* translucent glass — the jump reads faintly through */
}
html[data-office="salessupport"] #app .ss-card::before,
html[data-office="salessupport"] #app .ss-card::after{ display:none }

/* (the central arched PORT is now part of the full windscreen frame in .content::after above) */
/* ═══════════════════ END MILLENNIUM FALCON COCKPIT — Pass 2 ═══════════════════ */

/* ps-* inputs keep a pure-white fill in light mode (they pop off the off-white page);
   all other form controls now auto-theme via --field-bg/--field-border. */
html[data-theme="light"] .ps-input, html[data-theme="light"] .ps-textarea,
html[data-theme="light"] .ps-select, html[data-theme="light"] .ps-qty-input,
html[data-theme="light"] .pse-notes-ro{
  background:#ffffff; border-color:#cfd6e0;
}
/* office switcher, refresh, hamburger + abm-seg now auto-theme
   via --control-bg/--field-border/--inset-bg — per-selector light patches removed. */
html[data-theme="light"] .dr-kpi-val, html[data-theme="light"] .lst-kpi-val{ color:#0f172a; }
html[data-theme="light"] .dr-stat-pill{ background:#d5dbe2; border-color:#a8b0bb; color:#475569; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
/* Light mode: lift the near-white DR panels off the white page (clearer fills + visible
   borders) and repair the at-a-glance line, which otherwise keeps dark-mode text colors. */
html[data-theme="light"] .dr-sc-total{ background:#e8f0fb; border-color:#b6c2d0; }
html[data-theme="light"] .dr-sec-hdr{ background:rgba(var(--blue2-rgb),.14); }
html[data-theme="light"] .dr-glance{ background:rgba(var(--blue2-rgb),.10); border-color:rgba(var(--blue2-rgb),.30); color:#1b2433; }
html[data-theme="light"] .dr-glance b{ color:#0f172a; }
/* 🔴 Appointments / Calls-Worked GROUP HEADERS were INVISIBLE in light mode: near-white
   text (#e6edf3 / #c2cbd6 / #d6dee8) on a rgba(255,255,255,.045) fill — a dark-theme
   LIGHTENER, so both the label and its count chip went white-on-white. Owners default to
   light (_applyTheme) and the Daily Report is theirs, so this was the default view.
   Same inversion the rest of the light patches use: darkener fill + saturated dark ink. */
html[data-theme="light"] .dr-appt-ghdr,
html[data-theme="light"] .dr-cw-group-hdr{ background:rgba(15,23,42,.055); color:#1b2433; }
html[data-theme="light"] .dr-appt-gcnt,
html[data-theme="light"] .dr-cw-cnt{ background:rgba(15,23,42,.10); color:#475569; }
html[data-theme="light"] .dr-cw-da, html[data-theme="light"] .dr-cw-dna,
html[data-theme="light"] .dr-cw-oi, html[data-theme="light"] .dr-cw-other{ color:#1b2433; }
/* Off-window (unbookable) calendar cells carry color:#2c2c2c — a near-black ink meant
   to sit almost invisibly on the dark hatch. On light that inverts into the LOUDEST
   text on the grid, so unbookable hours out-shout the bookable ones. Matched to the
   dark intent (~1.5:1, present but recessive) rather than made merely paler.
   ⚠ Not fixable with opacity on the cell — that would fade the hatch as well. */
html[data-theme="light"] .appt-cell-offwindow{ color:#ccd3dc; }
html[data-theme="light"] .modal{ box-shadow:var(--e-3); }
html[data-theme="light"] .call-table thead tr{ border-bottom-color:#b6c2d0; }
html[data-theme="light"] .call-table tbody tr:nth-child(even) td{ background:rgba(15,23,42,.045); }
html[data-theme="light"] .call-table tbody tr:hover td{ background:rgba(var(--blue2-rgb),.10); }
/* clear row separators between order rows (white-alpha borders vanish on white) */
html[data-theme="light"] .call-table td{ border-bottom:1px solid #cbd5e1; }
html[data-theme="light"] td{ border-bottom-color:#cbd5e1; }
html[data-theme="light"] .lst-tbl td{ border-bottom-color:#cbd5e1; }
html[data-theme="light"] .call-table th{ box-shadow:inset 0 -1px 0 #b6c2d0; }
html[data-theme="light"] .dr-table tbody tr:nth-child(even):not(.dr-total-row) td{ background:rgba(15,23,42,.03); }
html[data-theme="light"] .dr-table tbody tr:hover td{ background:rgba(15,23,42,.05); }
/* .card and .modal now take --e-1 / --e-3, which flip by theme on their own — the two
   per-selector light shadow patches that used to live here are redundant and removed. */
/* ── Status badges / pills / rating chips ── dark uses a deep tint + light text;
   light mode needs the inverse: a soft tint fill + saturated dark text of the same
   hue. Grouped by hue (the 1-5 rating scale reads red→yellow→green). Dark untouched. */
html[data-theme="light"] .badge-red,
html[data-theme="light"] .rp-1, html[data-theme="light"] .rp-2,
html[data-theme="light"] .nm-r-btn.active-1, html[data-theme="light"] .nm-r-btn.active-2,
html[data-theme="light"] .pill-31-60, html[data-theme="light"] .dr-na-badge{ background:#f2cac5; color:#ac241d; border-color:#dc958f; box-shadow:inset 0 0 0 1px #dc958f,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
/* ⚠ These two inks were PRE-EXISTING and sat just under AA at this size (4.10:1 and
   4.41:1 — these pills are .75rem bold = WCAG NORMAL text, so 4.5:1 applies, the
   same trap as the outcome glyphs). Nudged the ink only; the tints are unchanged. */
html[data-theme="light"] .pill-15-30{ background:#f2d4be; color:#974615; box-shadow:inset 0 0 0 1px #d5a788,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .badge-yellow,
html[data-theme="light"] .rp-3, html[data-theme="light"] .nm-r-btn.active-3,
html[data-theme="light"] .pill-8-14{ background:#e7dbab; color:#785a00; border-color:#c3b274; box-shadow:inset 0 0 0 1px #c3b274,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .badge-green,
html[data-theme="light"] .rp-4, html[data-theme="light"] .rp-5,
html[data-theme="light"] .nm-r-btn.active-4, html[data-theme="light"] .nm-r-btn.active-5,
html[data-theme="light"] .pill-0-7{ background:#bfe1cb; color:#166b3c; border-color:#89bb9d; box-shadow:inset 0 0 0 1px #89bb9d,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .badge-blue{ background:#c5d8eb; color:#1a4e78; box-shadow:inset 0 0 0 1px #8eacc6,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .badge-gray,
html[data-theme="light"] .rp-na, html[data-theme="light"] .nm-r-btn.active-na{ background:#d4d8df; color:#535d6a; border-color:#abb1ba; box-shadow:inset 0 0 0 1px #abb1ba,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}

/* ── ORDER-STATUS PILLS in light mode ─────────────────────────────────────────
   The dark pills are a near-black wash (#0a2010…#2a2000) carrying a bright ink,
   so on white they read as eleven black holes down the status column. Same
   inversion as the badge palette above: soft tint of the SAME HUE + saturated
   dark ink of that hue.
   🔑 The eleven must stay TELLABLE APART. In dark almost all the signal is in the
   INK (the backgrounds are eleven shades of nearly-black), so the ink is what
   carries the distinction here too — each hue family keeps its bright/mid/deep
   ordering rather than collapsing onto one shared green/red/orange. */
html[data-theme="light"] .sp-active       {background:#c1e1ce;color:#116c3c; box-shadow:inset 0 0 0 1px #89bc9f,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-posted       {background:#b1d8c1;color:#0d5c32; box-shadow:inset 0 0 0 1px #7db093,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-canceled     {background:#f2c8c4;color:#aa241d; box-shadow:inset 0 0 0 1px #db948f,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-disconnected {background:#e8b7b2;color:#8c1d13; box-shadow:inset 0 0 0 1px #cb867f,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-orange-bright{background:#f3d3ba;color:#96470d; box-shadow:inset 0 0 0 1px #d5a683,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-orange       {background:#efc9ac;color:#8e430c; box-shadow:inset 0 0 0 1px #d09e79,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-dark-orange  {background:#e9be9e;color:#803a08; box-shadow:inset 0 0 0 1px #c7946e,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-purple       {background:#dcc6f0;color:#6b21a8; box-shadow:inset 0 0 0 1px #b891d9,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-yellow-bright{background:#eadca7;color:#795b00; box-shadow:inset 0 0 0 1px #c6b372,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-yellow       {background:#e4d394;color:#6b5000; box-shadow:inset 0 0 0 1px #bda965,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .sp-pale-yellow  {background:#ded5bc;color:#63542b; box-shadow:inset 0 0 0 1px #b7ac8e,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
/* .sp-default keeps var(--control-bg), which already themes — but its #999 ink is
   only ~2.4:1 on the light control surface. */
html[data-theme="light"] .sp-default      {color:#5b6675}

/* ── the remaining dark chips ────────────────────────────────────────────────
   ⚠ Only the chips that read as HOLES are converted. The saturated fills are
   deliberately LEFT ALONE — .ar-* badges, the coloured .appt-path-step chevrons,
   .nm-cx-add-btn / .nm-rep-add-btn, the blue :hover states, .dr-copy-btn and
   #dsi-toast are all saturated colour + white ink, which is a legitimate look in
   either theme. Recolouring them would be restyling, not repairing. */
html[data-theme="light"] .prod-pill{ background:#c5d8eb; color:#1a4e78; box-shadow:inset 0 0 0 1px #8eacc6,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .pill-product{ background:#d6dbe2; color:#475569; border-color:#a8b0bb; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .dr-esc-badge{ background:#f2cac5; color:#ac241d; box-shadow:inset 0 0 0 1px #dc958f,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}   /* its twin .dr-na-badge was already patched; this one was missed */
html[data-theme="light"] .dr-table td{ border-bottom-color:#dde3ea; }
html[data-theme="light"] .tm-btn-del{ background:#f2cac5; color:#ac241d; border-color:#dc958f; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .tm-btn-del:hover{ background:#e8b7b2; color:#8c1d13; border-color:#cb867f; box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
/* The two NEUTRAL path steps only — the coloured chevrons keep their saturated fills.
   ⚠⚠ THE :not() CHAIN IS LOAD-BEARING, NOT DEFENSIVE PADDING. `html[data-theme=
   "light"] .appt-path-step` scores (0,2,1) and so BEATS every `.appt-path-step.st-*`
   modifier at (0,2,0) — a plain base override silently repaints COMPLETED, NO SHOW
   and CANCELED pale grey too. It has to exclude every modifier by name.
   🔑 Add a new .st-* variant and you MUST add it here; lightmode_harness.js diffs the
   two lists and fails, because this failure is invisible in dark mode. */
html[data-theme="light"] .appt-path-step:not(.st-done):not(.st-active):not(.st-pending):not(.st-done-green):not(.st-done-red):not(.st-done-amber):not(.st-done-canc){ background:#c2c8d2; color:#4a535f; }
html[data-theme="light"] .appt-path-step.st-pending{ background:#cbcfd7; color:#505762; }
html[data-theme="light"] #appt-booking-modal input[type=checkbox]{ border-color:var(--field-border); }
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5;height:100vh;overflow:hidden}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;background:radial-gradient(ellipse at center,#1a3a5c 0%,#111 65%);display:flex;align-items:center;justify-content:center;z-index:100}
.login-card{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--login-accent);border-radius:var(--r-lg);padding:40px 36px;width:100%;max-width:380px;box-shadow:0 8px 32px rgba(0,0,0,.6);text-align:center}
.login-card .field input{text-align:left}
.login-card h1{font-size:1.7rem;color:var(--login-accent);margin-bottom:24px}
.login-card p{font-size:.85rem;color:var(--text2);margin-bottom:28px}
#login-office-name{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text2);margin-bottom:6px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:6px}
.field input{width:100%;padding:10px 12px;border:1.5px solid var(--field-border);border-radius:var(--r-md);font-size:.95rem;outline:none;transition:border .15s;background:var(--field-bg);color:var(--text)}
.field input:focus{border-color:var(--blue2)}
.btn{width:100%;padding:11px;background:var(--blue);color:var(--blueText);border:none;border-radius:var(--r-md);font-size:.95rem;font-weight:700;cursor:pointer;transition:background .15s}
/* ⚠ #2563a8 used to be hard-coded on .nm-add-btn / .add-note-row button / .appt-book-btn hovers.
   It is :root's ORIGINAL --blueHover — the pre-office default — so every office's note and Book
   buttons flashed the old portal blue while THIS rule already used the office's own. 2026-09-17. */
.btn:hover{background:var(--blueHover);color:var(--blueHoverText,var(--blueText))}
.btn:disabled{opacity:.45;cursor:not-allowed}
#login-error{color:#e74c3c;font-size:.82rem;margin-top:10px;display:none}
.login-who{font-size:.88rem;color:var(--login-accent);font-weight:600;margin-bottom:14px;word-break:break-all}
.login-set-intro{font-size:.82rem;color:var(--text2);margin-bottom:14px}
.pw-req{list-style:none;margin:-4px 0 14px;padding:0;font-size:.76rem}
.pw-req li{color:var(--text2);opacity:.7;padding:2px 0 2px 20px;position:relative;transition:color .15s,opacity .15s}
.pw-req li::before{content:"○";position:absolute;left:2px;color:var(--text2)}
.pw-req li.ok{color:#38b26a;opacity:1}
.pw-req li.ok::before{content:"✓";color:#38b26a}
.login-back{font-size:.8rem;color:var(--text2);text-align:center;margin-top:12px;cursor:pointer}
.login-back:hover{color:var(--blue2)}

/* ── APP SHELL ── */
#app{display:none;height:100vh;overflow:hidden}
.shell{display:flex;height:100vh}

/* ── SIDEBAR ── */
.sidebar{width:var(--sidebar);background:var(--sidebar-bg);color:#fff;display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto}
.sidebar-header{padding:20px 16px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar-office{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:rgba(255,255,255,.4);margin-bottom:2px}
.sidebar-name{font-size:1rem;font-weight:700;color:#fff}
.sidebar-user{font-size:.75rem;color:rgba(255,255,255,.5);margin-top:2px}
nav{flex:1;padding:10px 0}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 16px;font-size:.87rem;cursor:pointer;color:rgba(255,255,255,.6);border-left:3px solid transparent;transition:all .15s;user-select:none}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:rgba(var(--nav-accent-rgb,var(--blue2-rgb)),.08);color:var(--nav-accent,var(--blue2));border-left-color:var(--nav-accent,var(--blue2));font-weight:600}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.nav-icon svg{width:18px;height:18px}
/* Reusable inline SVG icon (sprite refs). Sizes to 1em so it tracks the text it sits
   in; inherits color via currentColor (auto-themes with the surrounding text). */
.ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.125em;flex-shrink:0}
.ico svg{width:1em;height:1em}
.nav-icon svg,.ico svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Filled variant (Unicons glyphs like fire/snowflake are solid, not stroked). */
.ico-fill{display:inline-flex;align-items:center;justify-content:center;vertical-align:-.125em;flex-shrink:0}
.ico-fill svg{width:1em;height:1em;fill:currentColor;stroke:none}
.nav-group-label{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,255,255,.25);padding:14px 16px 4px;user-select:none}
.sidebar-footer{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08)}
.sign-out{font-size:.78rem;color:rgba(255,255,255,.4);cursor:pointer;display:flex;align-items:center;gap:6px;transition:color .15s}
.sign-out:hover{color:#fff}
.dev-wrap{display:none;margin-bottom:10px;padding:8px;background:rgba(255,200,0,.06);border:1px solid rgba(255,200,0,.18);border-radius:var(--r-md)}
.dev-label{font-size:.63rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:rgba(255,200,0,.55);margin-bottom:6px}
.dev-pills{display:flex;flex-wrap:wrap;gap:4px}
.dev-pill{font-size:.68rem;padding:3px 7px;border-radius:var(--r-pill);border:1px solid rgba(255,200,0,.3);background:transparent;color:rgba(255,200,0,.6);cursor:pointer;transition:all .15s;line-height:1.4}
.dev-pill:hover{background:rgba(255,200,0,.12);color:#ffe082}
.dev-pill.active{background:rgba(255,200,0,.22);border-color:#fbbf24;color:#fbbf24;font-weight:700}

/* ── OFFICE DROPDOWN (topbar) ── */
.office-dd-wrap{position:relative;display:inline-block}
.office-dd-btn{display:flex;align-items:center;gap:6px;padding:6px 14px;background:var(--control-bg);color:var(--blue2);border:1.5px solid var(--field-border);border-radius:var(--r-pill);font-size:.85rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:border .15s}
.office-dd-btn:hover{border-color:var(--blue2)}
.office-dd-arrow{font-size:.7rem;opacity:.6}
.office-dd-panel{position:absolute;top:calc(100% + 8px);right:0;background:var(--field-bg);border:1px solid var(--field-border);border-radius:var(--r-lg);box-shadow:var(--e-2);min-width:210px;padding:6px 0;z-index:500;display:none}
.office-dd-panel.open{display:block}
.office-dd-item{display:flex;align-items:center;gap:10px;padding:10px 16px;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text);transition:background .15s}
.office-dd-item:hover{background:var(--control-bg)}
.office-dd-icon{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:800;color:#fff;flex-shrink:0}
.office-dd-current{font-size:.68rem;font-weight:700;color:var(--text2);margin-left:auto;padding:2px 8px;background:var(--control-bg);border-radius:var(--r-md)}

/* ── MAIN ── */
.main{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.topbar{background:var(--surface);padding:18px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.topbar h2{font-size:1.05rem;font-weight:700;color:var(--accent2b)}
.topbar-actions{display:flex;gap:8px;align-items:center}
.refresh-btn{padding:6px 14px;background:var(--control-bg);color:var(--blue2);border:1px solid var(--field-border);border-radius:var(--r-md);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s}
.refresh-btn:hover{border-color:var(--blue2)}
.content{padding:20px 24px;flex:1}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--e-1);margin-bottom:16px;overflow:hidden;animation:cardFadeIn .18s ease}
.card-header{background:transparent;color:var(--text);padding:14px 16px;font-size:.88rem;font-weight:700;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border)}
.card-header.dark{background:transparent}
.card-body{padding:20px}

/* ── STAT ROW ── */

/* ── TABLE ── */
.tbl-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 260px)}
table{width:100%;border-collapse:collapse;font-size:.85rem}
th{text-align:left;background:var(--surface2);color:var(--text2);font-weight:700;padding:9px 12px;white-space:nowrap;position:sticky;top:0;z-index:2;box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
td{padding:11px 12px;border-bottom:1px solid rgba(255,255,255,.05);vertical-align:top;color:var(--text)}
tr:last-child td{border-bottom:none}
tr:nth-child(even) td{background:var(--tint-1)}
tr:hover td{background:rgba(var(--blue2-rgb),.07)}

/* ── BADGES ── */
.badge{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:var(--r-lg);white-space:nowrap}
.badge-blue{background:#1a3a5c;color:var(--blue2)}
.badge-green{background:#1a4a2a;color:#4caf7d}
.badge-yellow{background:#3a2c00;color:#f0b429}
.badge-red{background:#3d0d0d;color:#e87070}
.badge-gray{background:#2e2e2e;color:var(--gray)}

/* ── SEARCH/FILTER ── */
.filter-row{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center;background:var(--surface2);padding:12px 14px;border-radius:var(--r-md)}
.filter-row input,.filter-row select{padding:7px 10px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:.84rem;outline:none;background:var(--surface);color:var(--text)}
.filter-row input:focus,.filter-row select:focus{border-color:var(--blue2)}
.filter-row input{flex:1;min-width:180px}
#f-ct{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23b3b3b3' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;padding-left:32px}
.tbl-count{font-size:.74rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-bottom:10px}

/* ── LOADING / EMPTY ── */
.spinner{text-align:center;padding:48px;color:var(--text2);font-size:.9rem}
@keyframes shimmer{0%{background-position:-600px 0}100%{background-position:600px 0}}
.skel{background:linear-gradient(90deg,var(--surface) 25%,var(--surface2) 50%,var(--surface) 75%);background-size:1200px 100%;animation:shimmer 1.5s infinite linear;border-radius:var(--r-sm)}
.skel-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;margin-bottom:16px}
.skel-hdr{height:12px;width:160px;margin-bottom:20px}
.skel-line{height:11px;margin-bottom:12px}
/* The skeleton never changes, so it says nothing about whether a load is slow or dead — which
   is what makes a rep hard-refresh. This is the admission. Muted on purpose: it informs, it
   does not alarm, and it is not an error state.
   ⚠ --tint-2 / --rule-1 / --text2 FLIP POLARITY between themes, so this tracks light and dark
   with no theme-specific rule (same pattern as .empty-code). */
.skel-note{font-size:.85rem;color:var(--text2);margin:0 0 14px;padding:10px 14px;background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1);border-radius:var(--r-sm)}
/* Sibling of .skel-note, one step LOUDER on purpose: .skel-note informs, this one asks the rep
   to DO something before they send, and a muted note gets skimmed.
   🔑 LOUDER VIA INK WEIGHT, NOT COLOUR — --text instead of --text2. An accent fill would have to
   clear contrast against EVERY office's accent including viridian's gold (1.18:1 at login, D-001),
   so a colour-led version needs a per-office answer and this does not.
   ⚠ Same --tint-2 / --rule-1 pair as .skel-note and .empty-code: both FLIP POLARITY between
   themes, so this tracks light and dark with no theme-specific rule. */
.rh-groupnote{font-size:.85rem;color:var(--text);margin:0 0 18px;padding:12px 14px;background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1);border-radius:var(--r-sm);line-height:1.5}
/* Sub-tabs inside the Rehash Text card. Same shape as .lst-view-btn — including the
   --blue2/--on-accent active pair, which is what keeps a gold office legible in light mode
   (applyOfficeTheme swaps in lightInk + white on-accent). Kept as its own class rather than
   reusing .lst-* so restyling the Live Sales Tracker cannot silently restyle this tab.
   ⚠ NOT .ps-toggle: those are form fields that change the message, these change the screen. */
.rh-tabs{display:flex;gap:4px;margin:0 0 18px;flex-wrap:wrap}
.rh-tab{display:flex;align-items:center;gap:7px;padding:6px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.06em;text-transform:uppercase;user-select:none}
.rh-tab.active{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
/* currentColor, so the badge inverts with the tab instead of needing an active-state rule. */
.rh-tab-badge{font-size:9px;letter-spacing:.08em;padding:1px 5px;border-radius:var(--r-sm);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1);color:currentColor;opacity:.85}
.rh-op{font-size:.85rem;color:var(--text);line-height:1.55;max-width:720px}
.rh-op-hd{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:10px}
.rh-op-p{margin:0 0 14px;color:var(--text2)}
.rh-op-files{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
/* Clickable — opens the article in Issue Resolution. Hover/focus lift the ring to the office
   accent so it reads as a control rather than a label. */
.rh-op-file{display:flex;align-items:center;gap:9px;padding:10px 14px;border-radius:var(--r-sm);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1);min-width:200px;cursor:pointer}
.rh-op-file:hover{box-shadow:inset 0 0 0 1px var(--blue2)}
.rh-op-file b{display:block;font-size:.85rem}
.rh-op-file span{display:block;font-size:.72rem;color:var(--text2)}
.rh-op-note{margin:0 0 14px;padding:10px 14px;border-radius:var(--r-sm);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1);color:var(--text2)}
/* Reflects the Account Type set on the Message tab — the flag is a MIRROR, never a control. */
.rh-op-flag{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r-sm);color:var(--text2);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1)}
.rh-op-flag.on{color:var(--text);box-shadow:inset 0 0 0 1px var(--blue2)}
.rh-groupnote-hd{display:flex;align-items:center;gap:8px;font-weight:600;margin-bottom:6px}
/* user-select:all — the rep taps once to grab the number for the group thread. */
.rh-groupnum{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;user-select:all;white-space:nowrap}
.empty{text-align:center;padding:40px;color:var(--text2);font-size:.88rem}
/* Shared empty-state (icon in a soft accent circle + message + optional sub/action). */
.empty-state{text-align:center;padding:46px 24px;color:var(--text2)}
.empty-ico{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%;background:rgba(var(--blue2-rgb),.10);color:var(--blue2);margin-bottom:14px;font-size:1.55rem}
.empty-msg{font-size:.95rem;font-weight:600;color:var(--text)}
.empty-sub{font-size:.82rem;color:var(--text2);margin-top:5px;line-height:1.45;max-width:340px;margin-left:auto;margin-right:auto}
.empty-action{margin-top:16px}
/* The stable error code from app.errors.js, e.g. DATA-03. Monospaced on purpose: it reads
   as a machine identifier rather than prose, which is what stops a rep transposing it when
   they read it down a phone. tabular figures keep the digits aligned. Option C, chosen
   2026-08-05 over a quiet line, a chip and a corner tag.
   ⚠ Uses --tint-2 + --rule-1, NOT a fixed rgba(--blue2-rgb) wash. Those two vars FLIP
   POLARITY (white-alpha in dark, navy-alpha in light), so the tag matches the surrounding
   surfaces in both themes for free. The first version hardcoded a blue wash tuned for
   dark; in light it sat at 10% blue on a white card and read as a washed-out smudge that
   belonged to no theme. Light is the OWNER's default view, so that is not cosmetic.
   Measured: ink 7.03:1 dark / 5.06:1 light (AA normal needs 4.5 — this is ~11.5px and NOT
   bold, so it is normal text, not large).
   ⚠ The ring is `inset 0 0 0 1px`, never a real border: a border adds 2px regardless of
   box-sizing and shifts the cards it sits in. It is there because the chip clears only
   ~1.15:1 against the card, which is the threshold where a chip stops reading as a chip
   and starts reading as a hole -- contrast-on-ink is only half the check. */
.empty-code{display:inline-block;margin-top:10px;padding:2px 8px;border-radius:var(--r-sm,6px);background:var(--tint-2);box-shadow:inset 0 0 0 1px var(--rule-1);color:var(--text2);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;letter-spacing:.04em;font-variant-numeric:tabular-nums;user-select:all}
/* A11y (V2): a visible keyboard-focus ring (office-accent) — shows only on keyboard
   focus via :focus-visible, so mouse/touch interaction is visually unchanged.
   ⚠⚠ THIS RULE EXISTED BUT NEVER FIRED WHERE IT MATTERED. 19 declarations across the
   file set `outline:none` to swap the browser ring for a border-colour change. That is
   right for MOUSE focus, but it erases the KEYBOARD ring too, and they outrank a bare
   :focus-visible — `.field input` is (0,1,1), `.ar-select:focus` is (0,2,0), and even
   the (0,1,0) ties win by coming later in the file. So every text input, select and
   textarea in the portal was keyboard-focusable with NO visible focus indicator.
   Confirmed in a real browser both ways: 5 of 6 sample controls computed
   outline-style:none while matching :focus-visible; all 6 now compute solid/2px.
   `!important` is deliberate and is the point: a focus ring is the one thing a local
   style must not be able to suppress.
   ⚠ NO border-radius here. Outline follows the element's own radius in every modern
   browser, so forcing one made pills and circles visibly square off when focused. */
:focus-visible{outline:2px solid var(--blue2)!important;outline-offset:2px}
/* Keep the mouse experience unchanged: a click must never leave a ring behind. */
:focus:not(:focus-visible){outline:none}
/* Respect reduced-motion: neutralize the shimmer/fade/slide animations + transitions. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}

/* ── CALL TABLE ── */
.call-table-wrap{overflow-x:auto;overflow-y:auto;max-height:calc(100vh - 260px)}
.call-table{width:100%;border-collapse:collapse;font-size:.875rem}
.call-table thead tr{border-bottom:1px solid rgba(255,255,255,.08)}
.call-table th{text-align:left;padding:10px 14px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text2);white-space:nowrap;position:sticky;top:0;z-index:2;background:var(--surface2);box-shadow:inset 0 -1px 0 rgba(255,255,255,.08)}
.sort-th{cursor:pointer;user-select:none}
.sort-th:hover{color:var(--text)}
/* ── ACTIVATION RATES ── */
.ar-cell{text-align:center;padding:4px 8px;vertical-align:middle}
.ar-badge{display:inline-block;padding:5px 10px;border-radius:var(--r-sm);font-weight:700;font-size:.82rem;line-height:1.4;min-width:64px;text-align:center}
.ar-green{background:#1b5e20;color:#a5d6a7}
.ar-yellow{background:#946a00;color:#ffe6a3}
.ar-red{background:#b71c1c;color:#ffcdd2}
.ar-blue{background:#0d47a1;color:#90caf9}
/* NO DATA IN THIS BUCKET — deliberately neutral, and deliberately NOT ar-blue.
   A filled blue tile reads as a measurement; an empty cell reads as a rendering failure. This is
   the third thing: visibly present, visibly not a value. Used by Activation Rates (empty bucket)
   AND Churn (missing bucket) so the two stop disagreeing where they sit side by side.
   ⚠ ar-blue is left alone on purpose — churnFixedCls still returns it as a real fallback colour
   for a Grand Total bucket with no coloured rows, which is a different meaning. */
.ar-none{background:transparent;color:var(--text2);border:1px dashed var(--border);font-weight:600}
.ar-rep{padding:10px 14px;font-size:.875rem;color:var(--text);vertical-align:middle}
.ar-grand-row{border-top:2px solid var(--rule-2);border-bottom:2px solid var(--rule-2)}
#ar-table-wrap th+th,#churn-table-wrap th+th,.dr-section .call-table th+th,.tm-rate-wrap th+th{text-align:center}
.ar-grand-rep{font-weight:700;color:var(--blue2)}
/* .call-table td sets color:var(--text) which beats .ar-grand-rep — keep the grand-total
   row its accent color inside call-tables too (so AR + Churn totals match). */
.call-table .ar-grand-rep{color:var(--blue2)}
.ar-select{padding:7px 10px;border:1.5px solid var(--field-border);border-radius:var(--r-md);font-size:.84rem;background:var(--field-bg);color:var(--text);cursor:pointer;margin-right:8px}
.ar-select:focus{outline:none;border-color:var(--blue2)}
.dd-filter{position:relative;display:inline-block}
.dd-btn{padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:.84rem;background:var(--surface);color:var(--text);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.dd-btn:hover{border-color:var(--blue2);color:var(--blue2)}
.dd-panel{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:200;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);min-width:190px;padding:0 0 4px;max-height:260px;overflow-y:auto;box-shadow:var(--e-2)}
.dd-panel.open{display:block}
.dd-panel-hdr{font-size:.65rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text2);padding:10px 14px 6px;border-bottom:1px solid var(--rule-1);margin-bottom:2px;position:sticky;top:0;background:var(--surface2);z-index:1}
.dd-panel label{display:block;padding:8px 14px;font-size:.84rem;color:var(--text);cursor:pointer;transition:background .1s,color .1s;line-height:1.5}
.dd-panel label:hover{background:rgba(var(--blue2-rgb),.08)}
.dd-panel label:has(input:checked){background:rgba(var(--blue2-rgb),.13);color:var(--blue2)}
.dd-panel input[type=checkbox]{appearance:none;-webkit-appearance:none;width:15px;height:15px;border:1.5px solid var(--field-border);border-radius:var(--r-sm);background:transparent;cursor:pointer;vertical-align:middle;margin-right:10px;position:relative;transition:background .15s,border-color .15s;top:-1px}
.dd-panel input[type=checkbox]:checked{background:var(--blue2);border-color:var(--blue2)}
.dd-panel input[type=checkbox]:checked::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:10px;line-height:1;font-weight:700}
.dd-panel-actions{display:flex;gap:12px;padding:6px 14px 8px;border-top:1px solid var(--border);margin-top:2px;position:sticky;bottom:0;background:var(--surface2);z-index:1}
.dd-panel-actions span{font-size:.72rem;font-weight:600;color:var(--text2);cursor:pointer;transition:color .1s}
.dd-panel-actions span:hover{color:var(--blue2)}
.date-filter-wrap{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);white-space:nowrap}
.date-filter-wrap input[type=date]{padding:7px 8px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:.84rem;background:var(--surface);color:var(--text);cursor:pointer;outline:none;font-weight:400;text-transform:none;letter-spacing:0}
.date-filter-wrap input[type=date]:focus{border-color:var(--blue2)}
.clear-filters-btn{padding:7px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:.84rem;background:var(--surface);color:var(--text2);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s}
.clear-filters-btn:hover{border-color:#e87070;color:#e87070}
.clear-filters-btn.active{border-color:var(--blue2);color:var(--blue2)}
.clear-filters-btn.active:hover{border-color:#e87070;color:#e87070}
.filter-active-badge{font-size:.72rem;font-weight:700;color:var(--blue2);white-space:nowrap}
.call-table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;color:var(--text)}
.call-table tbody tr:last-child td{border-bottom:none}
.call-table tbody tr:nth-child(even) td{background:rgba(255,255,255,.03)}
.call-table tbody tr:hover td{background:rgba(var(--blue2-rgb),.07)}
.rep-name{font-weight:600;color:var(--text)}
.dsi-link{color:var(--blue2);font-weight:600;cursor:pointer;text-decoration:none;transition:color .15s}
.dsi-link:hover{color:#fff;text-decoration:underline}
/* Phase 1: at-risk / rotting row tint + booked indicator on call-log rows */
.call-table tbody tr.ct-row-rotting td{background:rgba(231,76,60,.07);box-shadow:inset 3px 0 0 #e74c3c}
.call-table tbody tr.ct-row-rotting:hover td{background:rgba(231,76,60,.12)}
.call-table tbody tr.ct-row-atrisk td{background:rgba(237,125,49,.06);box-shadow:inset 3px 0 0 #ed7d31}
.call-table tbody tr.ct-row-atrisk:hover td{background:rgba(237,125,49,.11)}
.ct-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.ct-flag{display:inline-block;padding:1px 7px;border-radius:var(--r-md);font-size:.66rem;font-weight:700;white-space:nowrap;letter-spacing:.2px}
.call-table tbody tr.ct-row-cancel td{background:rgba(207,107,98,.12);box-shadow:inset 3px 0 0 #cf6b62}
.call-table tbody tr.ct-row-cancel:hover td{background:rgba(207,107,98,.18)}
.ct-flag-cancel{background:rgba(207,107,98,.24);color:#f08b80}
.ct-flag-rotting{background:rgba(231,76,60,.16);color:#e9756a}
.ct-flag-atrisk{background:rgba(237,125,49,.16);color:#f0995a}
.ct-flag-booked{background:rgba(var(--blue2-rgb),.16);color:#6cb6e8}
.ct-appt-cell{white-space:nowrap;color:var(--text2)}
.ct-risk-filter{height:32px;padding:0 8px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface2);color:var(--text);font-size:.82rem;cursor:pointer}
/* Phase 1: column summary chips + hover-highlight dim-the-rest */
.ct-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.ct-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-lg);font-size:.76rem;font-weight:600;cursor:pointer;background:var(--surface2);border:1px solid var(--border);color:var(--text2);transition:all .12s}
.ct-chip b{color:var(--text);font-weight:800}
.ct-chip:hover{border-color:var(--blue2)}
.ct-chip.ct-chip-active{border-color:var(--blue2);background:rgba(var(--blue2-rgb),.14)}
.ct-chip-atrisk{color:#f0995a}
.ct-chip-rotting{color:#e9756a}
.ct-chip-booked{color:#6cb6e8}
/* Phase 2 #3: active-filter chip bar + click-to-filter pills */
.ct-active-filters{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-bottom:10px}
.ct-active-filters:empty{display:none;margin:0}
.ct-af-lbl{font-size:.74rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text2);margin-right:2px}
.ct-af-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 5px 3px 10px;border-radius:var(--r-lg);font-size:.76rem;font-weight:600;background:rgba(var(--blue2-rgb),.14);border:1px solid var(--blue2);color:var(--text)}
.ct-af-x{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:.9rem;line-height:1;cursor:pointer;color:var(--text2);background:var(--tint-2)}
.ct-af-x:hover{background:rgba(233,117,106,.3);color:#fff}
.ct-af-clear{font-size:.74rem;font-weight:700;cursor:pointer;color:var(--text2);text-decoration:underline;text-underline-offset:2px;margin-left:4px}
.ct-af-clear:hover{color:var(--text)}
.ct-clk{cursor:pointer}
.ct-clk:hover{outline:1.5px solid var(--blue2);outline-offset:1px}
.call-table tbody tr{transition:opacity .12s}
.call-table tbody:hover tr:not(:hover){opacity:.45}

/* status pills */
.sp{display:inline-block;font-size:.75rem;font-weight:700;padding:2px 9px;border-radius:var(--r-lg);white-space:nowrap;margin-right:3px}
.sp-active       {background:#0d2e1a;color:#4ade80}
.sp-posted       {background:#0a2010;color:#22c55e}
.sp-canceled     {background:#2a0a0a;color:#ef4444}
.sp-disconnected {background:#1a0505;color:#b91c1c}
.sp-orange-bright{background:#2a1400;color:#fb923c}
.sp-orange       {background:#251200;color:#f97316}
.sp-dark-orange  {background:#1a0c00;color:#ea580c}
.sp-purple       {background:#1e0a35;color:#a855f7}
.sp-yellow-bright{background:#2a2000;color:#facc15}
.sp-yellow       {background:#2a1e00;color:#eab308}
.sp-pale-yellow  {background:#252000;color:#c9a855}
.sp-default      {background:var(--control-bg);color:#999}
/* housing cells */
.dr-housing-cell{border-radius:var(--r-md);margin-bottom:6px}
.dr-housing-hdr{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;border:1px solid;border-radius:var(--r-md);transition:filter .15s;user-select:none}
.dr-housing-hdr:hover{filter:brightness(1.12)}
.dr-housing-hdr.open{border-bottom-left-radius:0;border-bottom-right-radius:0}
.dr-housing-label{font-size:.88rem;font-weight:700;flex:1}
.dr-housing-counts{display:flex;gap:14px;font-size:.78rem;opacity:.8}
.dr-housing-arrow{font-size:.72rem;opacity:.7;transition:transform .2s}
.dr-housing-hdr.open .dr-housing-arrow{transform:rotate(180deg)}
.dr-housing-body{padding:8px;border:1px solid;border-top:none;border-bottom-left-radius:9px;border-bottom-right-radius:9px;display:none}
.dr-housing-hdr-green {background:rgba(22,163,74,.1); border-color:rgba(22,163,74,.28); color:#22c55e}
.dr-housing-hdr-orange{background:rgba(249,115,22,.1);border-color:rgba(249,115,22,.28);color:#f97316}
.dr-housing-hdr-purple{background:rgba(147,51,234,.1);border-color:rgba(147,51,234,.28);color:#a855f7}
.dr-housing-hdr-yellow{background:rgba(234,179,8,.1); border-color:rgba(234,179,8,.28); color:#eab308}
.dr-housing-body-green {border-color:rgba(22,163,74,.2)}
.dr-housing-body-orange{border-color:rgba(249,115,22,.2)}
.dr-housing-body-purple{border-color:rgba(147,51,234,.2)}
.dr-housing-body-yellow{border-color:rgba(234,179,8,.2)}


/* rating pill */
.rating-pill{display:inline-block;font-size:.72rem;font-weight:700;padding:2px 9px;border-radius:var(--r-lg);white-space:nowrap}
.rp-na{background:#2e2e2e;color:#aaa}
.rp-1{background:#3d1010;color:#e87070}
.rp-2{background:#3d1a1a;color:#e87070}
.rp-3{background:#3a2c00;color:#f0b429}
.rp-4{background:#1a3a1a;color:#6abf7a}
.rp-5{background:#1a4a2a;color:#4caf7d}

/* NOTES button */
.notes-btn{padding:6px 16px;border:1.5px solid var(--border);background:transparent;border-radius:var(--r-md);font-size:.78rem;font-weight:700;cursor:pointer;color:var(--text2);transition:all .15s;white-space:nowrap}
.notes-btn:hover{border-color:var(--blue2);color:var(--blue2);background:rgba(var(--blue2-rgb),.06)}
.notes-btn.has-notes{border-color:rgba(var(--blue2-rgb),.35);color:var(--blue2);background:rgba(var(--blue2-rgb),.08)}
.notes-btn.has-notes:hover{border-color:var(--blue2);background:rgba(var(--blue2-rgb),.15)}
.notes-count{display:inline-block;background:var(--blue2);color:var(--on-accent);border-radius:var(--r-md);padding:1px 7px;font-size:.68rem;margin-left:7px;font-weight:700;vertical-align:middle}
/* Notes have not arrived yet. Deliberately distinct from BOTH real answers: a filled blue
   count means notes exist, no pill at all means none do, and this muted outlined pill means
   we do not know yet. Muted so it never competes with a real count for attention. */
.notes-btn.notes-pending{border-style:dashed}
.notes-count-pending{background:transparent;color:var(--text2);border:1px solid var(--border);padding:0 6px;letter-spacing:.08em;font-weight:600}
/* Training & Tracking tab */
.tr-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.tr-search{flex:1;min-width:220px;padding:9px 12px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:.85rem}
.tr-search:focus{border-color:var(--blue2);outline:none}
.tr-hidepaid{display:flex;align-items:center;gap:6px;font-size:.82rem;color:var(--text2);white-space:nowrap;cursor:pointer}
.tr-wrap{overflow-x:auto}
.tr-table{width:100%;border-collapse:collapse;font-size:.85rem}
.tr-table th{text-align:left;padding:10px 12px;font-size:.7rem;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);border-bottom:1px solid var(--border);white-space:nowrap}
.tr-table td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
.tr-rep{font-weight:700;color:var(--text)}
.tr-trainee{color:var(--blue2);font-weight:600}
.tr-badge{display:inline-block;margin-top:5px;margin-right:5px;padding:2px 9px;border-radius:var(--r-lg);font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px}
.tr-badge-split{background:rgba(var(--blue2-rgb),.15);color:var(--blue2)}
.tr-badge-transfer{background:rgba(34,197,94,.15);color:#22c55e}
.tr-badge-sunday{background:rgba(234,179,8,.15);color:#eab308}
.tr-paid label{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text2);margin-bottom:3px;cursor:pointer;white-space:nowrap}
.tr-paid input{cursor:pointer;margin:0}
.tr-paid .tr-all{font-weight:800;color:var(--text)}
.tr-note{color:var(--text2);max-width:240px;font-size:.8rem;white-space:pre-wrap}

/* ── NOTES MODAL ── */
.nm-dsi{font-size:1.1rem;font-weight:700;color:var(--blue2);margin-bottom:2px}
.nm-sub{font-size:.82rem;color:var(--text2);margin-bottom:16px}
.nm-section-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text2);margin-bottom:8px}
.nm-history{min-height:60px;max-height:200px;overflow-y:auto;background:var(--field-bg);border-radius:var(--r-md);padding:10px 12px;margin-bottom:16px}
.nm-empty{font-size:.82rem;color:var(--text2);font-style:italic}
.nm-note{padding:6px 0;border-bottom:1px solid var(--rule-1);font-size:.83rem}
.nm-note:last-child{border-bottom:none}
.nm-note-meta{font-size:.72rem;color:var(--text2);margin-bottom:2px}
.nm-note-text{color:var(--text)}
.nm-rating-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.nm-r-btn{padding:5px 12px;border-radius:var(--r-lg);border:1.5px solid var(--field-border);background:var(--control-bg);font-size:.78rem;font-weight:700;cursor:pointer;color:var(--text2);transition:all .15s}
.nm-r-btn:hover{border-color:var(--blue2)}
.nm-r-btn.active-na{background:#2e2e2e;color:#aaa;border-color:#555}
.nm-r-btn.active-1{background:#3d1010;color:#e87070;border-color:#7a3030}
.nm-r-btn.active-2{background:#3d1a1a;color:#e87070;border-color:#7a3030}
.nm-r-btn.active-3{background:#3a2c00;color:#f0b429;border-color:#7a6000}
.nm-r-btn.active-4{background:#1a3a1a;color:#6abf7a;border-color:#2a6a2a}
.nm-r-btn.active-5{background:#1a4a2a;color:#4caf7d;border-color:#2a7a4a}
.nm-textarea{width:100%;padding:9px 12px;border:1.5px solid var(--field-border);border-radius:var(--r-md);font-size:.86rem;font-family:inherit;resize:vertical;min-height:80px;outline:none;margin-bottom:12px;background:var(--field-bg);color:var(--text)}
.nm-textarea:focus{border-color:var(--blue2)}
.nm-actions{display:flex;gap:8px}
.nm-act-label{color:var(--blue2)}
.nm-rep-label{color:#4caf7d}
.nm-appt-label{color:var(--text2)}
.nm-archive-tag{margin-left:7px;padding:1px 6px;border-radius:var(--r-md);background:var(--control-bg);border:1px solid var(--field-border);color:var(--text2);font-size:.62rem;font-weight:700;letter-spacing:.04em;text-transform:none}
/* ── KNOWLEDGE BASE ─────────────────────────────────────────────────────── */
.kb-count{margin-left:10px;padding:2px 9px;border-radius:var(--r-lg);background:var(--tint-3);font-size:.72rem;font-weight:700}
.kb-toolbar{display:flex;gap:9px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.kb-search{flex:1;min-width:220px;padding:9px 13px;border:1.5px solid var(--field-border);border-radius:var(--r-md);background:var(--field-bg);color:var(--text);font-size:.88rem;font-family:inherit;outline:none}
.kb-search:focus{border-color:var(--blue2)}
.kb-expand{padding:9px 15px;border:1.5px solid var(--field-border);border-radius:var(--r-md);background:var(--control-bg);color:var(--text2);font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap}
.kb-expand:hover{border-color:var(--blue2);color:var(--blue2)}
.kb-sec-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.9px;color:var(--text2);margin:16px 0 8px}
.kb-sec-label:first-child{margin-top:0}
.kb-art{border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:8px;overflow:hidden;background:var(--field-bg)}
.kb-art-hd{display:flex;align-items:center;gap:9px;width:100%;padding:11px 13px;background:none;border:none;cursor:pointer;text-align:left;color:var(--text);font-family:inherit}
.kb-art-hd:hover{background:rgba(var(--blue2-rgb),.06)}
.kb-chev{display:inline-flex;transition:transform .15s;color:var(--text2);flex-shrink:0}
.kb-art.open .kb-chev{transform:rotate(90deg)}
.kb-art-title{font-size:.92rem;font-weight:700;flex:1;min-width:0}
.kb-art-tag{padding:2px 9px;border-radius:var(--r-lg);background:rgba(var(--blue2-rgb),.14);color:var(--blue2);font-size:.68rem;font-weight:700;white-space:nowrap;flex-shrink:0}
.kb-art-body{display:none;padding:2px 15px 15px;border-top:1px solid var(--border);font-size:.87rem;line-height:1.55}
.kb-art.open .kb-art-body{display:block}
.kb-art-body p{margin:9px 0}
.kb-h{font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--blue2);margin:14px 0 5px}
.kb-ul,.kb-ol{margin:8px 0 8px 4px;padding-left:18px}
.kb-ul li,.kb-ol li{margin-bottom:5px}
.kb-ul{list-style:none;padding-left:4px}
.kb-ul li{position:relative;padding-left:15px}
.kb-ul li:before{content:'';position:absolute;left:2px;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--blue2)}
.kb-ol li::marker{color:var(--blue2);font-weight:700}
.kb-script{background:rgba(var(--blue2-rgb),.07);border-left:3px solid var(--blue2);border-radius:0 var(--r-md) var(--r-md) 0;padding:9px 13px;margin:10px 0}
.kb-script p{margin:0 0 6px;font-style:italic;color:var(--text)}
.kb-script p:last-child{margin-bottom:0}
.kb-alert{border-left:3px solid #d9922e;background:rgba(217,146,46,.1);border-radius:0 var(--r-md) var(--r-md) 0;padding:8px 13px;margin:10px 0;color:var(--text)}
.kb-alert-h{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:#d9922e;margin-bottom:2px}
.kb-link{color:var(--blue2);text-decoration:underline;text-underline-offset:2px}
.kb-link:hover{color:var(--text)}
.kb-table{width:100%;border-collapse:collapse;margin:10px 0}
.kb-table td{padding:7px 11px;border-bottom:1px solid var(--border);vertical-align:top}
.kb-table tr:last-child td{border-bottom:none}
.kb-td-k{width:32%;font-weight:700;color:var(--text);background:var(--tint-1)}
.kb-noresult,.kb-err{padding:22px;text-align:center;color:var(--text2);font-size:.88rem}
.kb-retry{margin-left:10px;padding:6px 14px;border-radius:var(--r-md);border:1.5px solid var(--field-border);background:var(--control-bg);color:var(--text);font-weight:700;font-size:.8rem;cursor:pointer}
@media (max-width:768px){ .kb-td-k{width:40%} .kb-art-tag{display:none} }

/* Daily Report — Cx cancel requests section. */
.dr-glance-cx{color:#e9756a}
.dr-sec-hdr-cx{color:#e9756a}
.dr-section-cx{border:1px solid rgba(207,107,98,.35);border-radius:var(--r-md);padding:2px 10px 10px;background:rgba(207,107,98,.05)}
.dr-cx-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.dr-cx-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:var(--r-lg);background:rgba(207,107,98,.14);border:1px solid rgba(207,107,98,.3);color:var(--text);font-size:.76rem}
.dr-cx-chip b{color:#e9756a}
.dr-cx-reason{display:inline-block;padding:2px 8px;border-radius:var(--r-lg);background:rgba(207,107,98,.18);color:#e9756a;font-size:.74rem;font-weight:700;white-space:nowrap}
/* Cx INQUIRY requests — the cancel block’s amber sibling. Amber, not red, on purpose:
   a customer asking a question is not a customer leaving, and giving both the same colour
   teaches the eye to skim both. No chip/reason rules — an inquiry has no reason list. */
.dr-glance-iq{color:#d99a4e}
.dr-sec-hdr-iq{color:#d99a4e}
.dr-section-iq{border:1px solid rgba(217,154,78,.35);border-radius:var(--r-md);padding:2px 10px 10px;background:rgba(217,154,78,.05)}

/* Cx request to cancel — the one thing in this modal that must read as urgent. */
.nm-cx-block{background:rgba(207,107,98,.12);border:1.5px solid rgba(207,107,98,.5);border-left-width:4px;border-radius:var(--r-md);padding:10px 12px;margin-bottom:14px}
.nm-cx-hdr{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#e9756a;margin-bottom:7px}
.nm-cx-count{margin-left:auto;padding:1px 7px;border-radius:var(--r-md);background:#cf6b62;color:#fff;font-size:.68rem;font-weight:700}
.nm-cx-item{padding:6px 0;border-bottom:1px solid rgba(207,107,98,.22)}
.nm-cx-item:last-child{border-bottom:none}
.nm-cx-reason{font-size:.88rem;font-weight:700;color:var(--text)}
.nm-cx-detail{font-size:.83rem;color:var(--text);margin-top:2px;white-space:pre-wrap}
.nm-cx-meta{font-size:.72rem;color:var(--text2);margin-top:3px}
.nm-cx-label{color:#e9756a}
/* The button under the rating row + the panel it reveals. */
.nm-cx-open-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:0 0 14px;padding:9px 14px;border:1.5px solid rgba(207,107,98,.45);border-radius:var(--r-md);background:rgba(207,107,98,.08);color:#e9756a;font-size:.8rem;font-weight:700;letter-spacing:.02em;cursor:pointer;transition:all .15s}
.nm-cx-open-btn:hover{background:rgba(207,107,98,.16);border-color:rgba(207,107,98,.7)}
.nm-cx-open-btn.active{background:rgba(207,107,98,.18);border-color:#cf6b62}
.nm-cx-form{border:1.5px solid rgba(207,107,98,.4);border-radius:var(--r-md);padding:11px 12px;margin:-6px 0 14px}

/* ── Cx INQUIRY requests + in-place note editing (2026-09-11) ──────────────────
   AMBER, not the cancel block’s red. A customer asking a question is not a customer
   leaving, and giving both the same colour trains the eye to skim both. There is no
   .nm-iq-reason rule on purpose — an inquiry has no reason list. */
.nm-iq-block{background:rgba(217,154,78,.12);border:1.5px solid rgba(217,154,78,.5);border-left-width:4px;border-radius:var(--r-md);padding:10px 12px;margin-bottom:14px}
.nm-iq-hdr{display:flex;align-items:center;gap:6px;font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#d99a4e;margin-bottom:7px}
.nm-iq-count{margin-left:auto;padding:1px 7px;border-radius:var(--r-md);background:#d99a4e;color:#1b1205;font-size:.68rem;font-weight:700}
.nm-iq-item{padding:6px 0;border-bottom:1px solid rgba(217,154,78,.22)}
.nm-iq-item:last-child{border-bottom:none}
.nm-iq-detail{font-size:.88rem;color:var(--text);white-space:pre-wrap}
.nm-iq-meta{font-size:.72rem;color:var(--text2);margin-top:3px}
.nm-iq-open-btn{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin:0 0 14px;padding:9px 14px;border:1.5px solid rgba(217,154,78,.45);border-radius:var(--r-md);background:rgba(217,154,78,.10);color:#d99a4e;font-size:.78rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
.nm-iq-open-btn:hover{background:rgba(217,154,78,.16);border-color:rgba(217,154,78,.7)}
.nm-iq-form{border:1.5px solid rgba(217,154,78,.4);border-radius:var(--r-md);padding:11px 12px;margin:-6px 0 14px}
.nm-iq-add-btn{background:#d99a4e;color:#1b1205}

/* The pencil rides in the note’s meta line, pushed right. Low-contrast until hover so a
   list of notes still reads as notes rather than as a row of buttons. */
.nm-note-edit{margin-left:auto;background:none;border:none;padding:0 2px;cursor:pointer;color:var(--text2);opacity:.55;line-height:1}
.nm-note-edit:hover{opacity:1;color:var(--accent)}
.nm-note .nm-note-meta{display:flex;align-items:center;gap:6px}
.nm-note-edit-box{margin-top:4px}
.nm-note-edit-ta{min-height:64px}
.nm-note-edit-lines{margin-top:7px}

.nm-cx-form .ss-combo-input,.nm-cx-form select.ps-input{width:100%}
.nm-cx-form-label{font-size:.78rem;font-weight:700;color:#e9756a;margin-bottom:7px}
.nm-cx-req{margin-left:5px;padding:1px 6px;border-radius:var(--r-md);background:rgba(207,107,98,.18);font-size:.64rem;letter-spacing:.04em;text-transform:uppercase}
.nm-cx-form-actions{display:flex;gap:8px;margin-top:10px}
.nm-cx-err{display:none;margin:8px 0 0;padding:6px 9px;border-radius:var(--r-md);background:rgba(207,107,98,.14);color:#e9756a;font-size:.78rem;font-weight:600}
.nm-cx-add-btn{background:#a33c34!important;flex:1}
.nm-cx-add-btn:hover{background:#8d322b!important}
.nm-custnote{background:rgba(var(--blue2-rgb),.1);border:1px solid rgba(var(--blue2-rgb),.25);border-radius:var(--r-md);padding:10px 12px;margin-bottom:14px}
.nm-custnote-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);margin-bottom:3px}
.nm-custnote-text{white-space:pre-wrap;color:var(--text);font-size:.86rem;line-height:1.45}
.nm-rep-add-btn{background:#1e5631!important}
.nm-lines-row{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;padding:9px 11px;background:rgba(var(--blue2-rgb),.06);border:1px solid rgba(var(--blue2-rgb),.22);border-radius:var(--r-md)}
.nm-lines-label{font-size:.78rem;font-weight:700;color:var(--blue2);letter-spacing:.01em}
.nm-lines-btns{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.nm-lines-btn{min-width:34px;padding:6px 0;background:var(--field-bg);border:1.5px solid var(--field-border);border-radius:var(--r-md);color:var(--text2);font-size:.86rem;font-weight:700;cursor:pointer;transition:all .12s}
.nm-lines-btn:hover{border-color:var(--blue2)}
.nm-lines-btn.active{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
.nm-lines-input{width:64px;padding:6px 8px;background:var(--field-bg);border:1.5px solid var(--field-border);border-radius:var(--r-md);color:var(--text);font-size:.86rem;font-weight:700;outline:none;margin-left:4px}
.nm-lines-input:focus{border-color:var(--blue2)}
.nm-lines-badge{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-lg);background:rgba(82,199,133,.16);color:#52c785;font-size:.7rem;font-weight:700}
.ao-label{display:block;font-size:.75rem;font-weight:700;color:var(--text2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.nm-add-btn{flex:1;padding:10px;background:var(--blue);color:var(--blueText);border:none;border-radius:var(--r-md);font-size:.88rem;font-weight:700;cursor:pointer;transition:background .15s}
.nm-add-btn:hover{background:var(--blueHover);color:var(--blueHoverText,var(--blueText))}
.nm-close-btn{padding:10px 20px;border:1.5px solid var(--field-border);background:var(--control-bg);border-radius:var(--r-md);font-size:.88rem;font-weight:600;cursor:pointer;color:var(--text2);transition:border-color .15s,color .15s}
.nm-close-btn:hover{border-color:#666;color:var(--text)}
.add-note-row input:focus{border-color:var(--blue2)}
.add-note-row button{padding:7px 14px;background:var(--blue);color:var(--blueText);border:none;border-radius:var(--r-md);font-size:.82rem;font-weight:700;cursor:pointer;white-space:nowrap}
.add-note-row button:hover{background:var(--blueHover);color:var(--blueHoverText,var(--blueText))}

/* ── DSI TOAST ── */
#dsi-toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%);background:#1e3a5f;color:#fff;padding:10px 22px;border-radius:var(--r-md);font-size:.85rem;font-weight:600;opacity:0;transition:opacity .2s;pointer-events:none;z-index:400;white-space:nowrap}
#dsi-toast.show{opacity:1}
/* Save messages that do not stop the work (2026-10-02) — replaces the browser's blocking alert() for a note / rating
   whose save could not be confirmed. A stack in the corner, above the modal, that never takes focus. Colours are the
   existing surface + status variables, so both themes and every office follow without a rule of their own. */
#save-banners{position:fixed;right:18px;bottom:18px;z-index:650;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;width:360px;max-width:calc(100vw - 24px);max-height:calc(100vh - 36px);overflow:hidden;pointer-events:none}
.save-banner{pointer-events:auto;display:flex;align-items:flex-start;gap:10px;padding:11px 10px 11px 14px;border-radius:var(--r-md);background:var(--surface2);border:1px solid var(--border);border-left:4px solid var(--gray);box-shadow:0 10px 28px rgba(0,0,0,.35);color:var(--text);font-size:.82rem;line-height:1.4}
.save-banner.sb-checking{border-left-color:var(--yellow)}
.save-banner.sb-ok{border-left-color:var(--green)}
.save-banner.sb-bad{border-left-color:var(--red)}
.save-banner{flex:0 0 auto}
.save-banner .sb-body{flex:1;min-width:0;max-height:9.5em;overflow-y:auto}
.save-banner .sb-msg{font-weight:600}
.save-banner .sb-meta{margin-top:3px;color:var(--text2);font-size:.76rem;overflow-wrap:anywhere}
.save-banner .sb-x{flex:0 0 auto;width:26px;height:26px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text2);font-size:1.15rem;line-height:1;cursor:pointer}
.save-banner .sb-x:hover{background:var(--border);color:var(--text)}
@media (max-width:768px){#save-banners{right:12px;left:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:auto;max-width:none}.save-banner .sb-body{max-height:6.5em}}

/* ── PRODUCT PILLS ── */
.prod-pill{display:inline-block;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:var(--r-lg);background:#0d2a4a;color:#5ba3e8;white-space:nowrap;margin-right:3px}

/* ── PILLS for activation bucket ── */
.pill-0-7{background:#1a4a2a;color:#4caf7d;padding:2px 7px;border-radius:var(--r-md);font-size:.72rem;font-weight:700}
.pill-8-14{background:#3a2c00;color:#f0b429;padding:2px 7px;border-radius:var(--r-md);font-size:.72rem;font-weight:700}
.pill-15-30{background:#3d1a0a;color:#e89060;padding:2px 7px;border-radius:var(--r-md);font-size:.72rem;font-weight:700}
.pill-31-60{background:#3d0d0d;color:#e87070;padding:2px 7px;border-radius:var(--r-md);font-size:.72rem;font-weight:700}

/* ── MODAL ── */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.7);display:none;align-items:center;justify-content:center;z-index:200}
.modal-bg.open{display:flex}
.modal-bg.open .modal{animation:modalIn .15s ease}
/* ⚠ The dark modal has NO shadow ON PURPOSE — it leans on the .modal-bg scrim, which is
   how it has always looked. An earlier pass gave it --e-3 in BOTH themes; the user asked
   for dark to go back to how it was, so the elevation is light-only now. */
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:28px;max-width:520px;width:90%;max-height:80vh;overflow-y:auto}
.modal h3{font-size:1rem;color:var(--blue2);margin-bottom:16px;font-weight:700}
.modal-close{float:right;cursor:pointer;color:var(--text2);font-size:1.2rem;margin-top:-4px;transition:color .15s}
.modal-close:hover{color:var(--text)}
.detail-row{display:flex;gap:8px;padding:7px 0;border-bottom:1px solid var(--rule-1);font-size:.85rem}
.detail-row:last-child{border-bottom:none}
.detail-label{font-weight:600;color:var(--text2);min-width:140px;flex-shrink:0}
.detail-val{color:var(--text)}

/* ── DAILY REPORT ── */
.dr-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.dr-titlewrap{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem}
.dr-logo{max-width:150px;object-fit:contain;vertical-align:middle}
/* ── Daily Report logo on LIGHT surfaces ──────────────────────────────────────
   .card-header.dark is background:transparent despite its name, so this header
   inherits .card's var(--surface) — #ffffff in light theme. Every light-inked office
   logo (vanguard, leadsphere, viridian, evolution, revamped) therefore rendered
   white-on-white here. It went unnoticed because every role now defaults to dark;
   see the note in _applyTheme.
   These are gated on html[data-theme="light"] and so cannot touch dark theme. */
html[data-theme="light"] .dr-logo{
  filter:drop-shadow(0 0 1px rgba(0,0,0,.95))
         drop-shadow(0 0 1px rgba(0,0,0,.75))
         drop-shadow(0 0 3px rgba(0,0,0,.45));
}
/* An office may ship a light-ink twin (OFFICE_CONFIG logos.fullLight) instead of
   taking the outline. Revamped does: its wordmark is a thin high-contrast serif, and
   an outline thickens the hairlines into mush rather than defining them.
   BOTH images are in the DOM and CSS picks between them, so a theme toggle swaps
   them instantly — app.reports.js emits the pair, and _toggleTheme never re-renders
   the card, which is exactly why this is CSS and not JS.
   ⚠ .dr-logo-light must come AFTER the outline rule: same specificity, source order
   decides, and filter:none is what keeps the twin clean. */
.dr-logo-light{ display:none; }
html[data-theme="light"] .dr-logo-dark{ display:none; }
html[data-theme="light"] .dr-logo-light{ display:inline-block; filter:none; }
.dr-office{font-weight:800;font-size:1.02rem;letter-spacing:.01em;color:#fff;padding-right:.55rem;margin-right:.1rem;border-right:2px solid var(--blue2)}
.dr-title{font-weight:700;font-size:.95rem;letter-spacing:.02em}
.dr-daylabel{font-size:.86rem;font-weight:600;color:#9fb4c7}
.dr-controls{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.dr-date-sel{background:var(--field-bg);color:var(--text);border:1.5px solid var(--field-border);border-radius:var(--r-md);padding:.3rem .55rem;font-size:.82rem;cursor:pointer}
.dr-date-sel:focus{outline:none;border-color:var(--blue2)}
.dr-refresh-btn{padding:.3rem .75rem;background:var(--blue2);color:var(--on-accent);border:none;border-radius:var(--r-md);font-size:.82rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.dr-refresh-btn:hover{opacity:.85}
.dr-copy-btn{padding:.3rem .75rem;background:#334155;color:#fff;border:none;border-radius:var(--r-md);font-size:.82rem;font-weight:600;cursor:pointer;transition:opacity .15s}
.dr-copy-btn:hover{opacity:.85}
.dr-gents{font-size:.73rem;color:#8a94a0;font-style:italic}
/* ── WEEKLY REPORT (2026-08-20) ──
   Reuses .card-header.dark / .dr-header / .dr-date-sel so the two Reporting tabs read as one
   family. Only the tile grid is new — the daily's .dr-kpi-row is tuned for its own 8 metrics
   and coupling them would make either tab unable to change without the other.
   ⚠ Theme-token colours only (var(--text)/var(--muted)), never a hardcoded hex like the older
   rules just above — those predate the token set and are why light theme needed a fix pass. */
.wr-note{font-size:.82rem;color:var(--muted);margin:0 0 .25rem}
.wr-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
.wr-tile{background:var(--surface-2,rgba(127,127,127,.06));border:1px solid var(--field-border);border-radius:var(--r-md);padding:12px 14px}
.wr-tile-v{font-size:1.5rem;font-weight:800;line-height:1.1;color:var(--text)}
.wr-tile-l{font-size:.8rem;font-weight:600;color:var(--text);margin-top:2px}
/* The sub-line is optional and often a cancel REASON, which can be long — clamp rather than
   let one tile grow taller than the rest of the row. */
.wr-tile-s{font-size:.72rem;color:var(--muted);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-section{margin-top:.4rem}
.wr-h{font-size:.86rem;font-weight:700;color:var(--text);margin:0 0 .45rem}
.wr-pills{display:flex;flex-wrap:wrap;gap:6px}
.wr-pill{font-size:.78rem;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface-2,rgba(127,127,127,.08));border:1px solid var(--field-border);color:var(--text)}
.wr-pill b{font-weight:800}
.wr-foot{font-size:.72rem;color:var(--muted);margin:.6rem 0 0;line-height:1.5}
/* ── Week-over-week trend (2026-09-01). Mirrors the email's trend sections; see D-033.
   ⚠⚠ `good`/`bad` are NOT `up`/`down`. Escalations, no-answers, cancels and churn are scored
   so a FALL is good — colouring every rise green congratulates an office on more cancellations. */
.wr-delta{display:inline-block;font-size:.74rem;font-weight:700;padding:2px 8px;border-radius:var(--r-pill);white-space:nowrap}
.wr-delta.good{background:rgba(34,197,94,.16);color:#16a34a}
.wr-delta.bad{background:rgba(239,68,68,.16);color:#dc2626}
.wr-delta.flat{background:var(--surface-2,rgba(127,127,127,.08));color:var(--muted)}
.wr-delta.none{background:transparent;color:var(--muted);font-weight:400}
html[data-theme="dark"] .wr-delta.good{color:#4ade80}
html[data-theme="dark"] .wr-delta.bad{color:#f87171}
.wr-num{text-align:right;font-variant-numeric:tabular-nums}
.wr-numb{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
.wr-prev{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
.wr-sub{font-size:.72rem;color:var(--muted);font-weight:400}
.wr-thsub{font-weight:400;color:var(--muted);font-size:.78rem}
.wr-lead{border:1px solid var(--field-border);border-radius:var(--r-md);padding:12px 15px;margin:0 0 12px;line-height:1.7;font-weight:700;color:var(--text)}
.wr-lead.up{background:rgba(34,197,94,.10);border-color:rgba(34,197,94,.35)}
.wr-lead.down{background:rgba(239,68,68,.10);border-color:rgba(239,68,68,.35)}
.wr-lead-k{font-size:.7rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:800;display:block;margin-bottom:3px}
.wr-lead-w{color:var(--muted);font-weight:400}
.wr-gap{font-size:.72rem;color:var(--muted);margin:.45rem 0 0;line-height:1.5}
/* The "compare against" picker sits inline in the Week-over-week heading. */
.wr-cmp{margin-left:10px;vertical-align:middle;font-weight:400}
.wr-wk{color:var(--blue2);text-decoration:none}
.wr-wk:hover{text-decoration:underline}
.dr-body{display:flex;flex-direction:column;gap:1.05rem;padding-top:.6rem}
/* at-a-glance summary */
.dr-glance{font-size:.92rem;line-height:1.55;color:#cdd6e0;background:rgba(var(--blue2-rgb),.07);border:1px solid rgba(var(--blue2-rgb),.2);border-left:3px solid var(--blue2);border-radius:0 var(--r-md) var(--r-md) 0;padding:11px 15px;margin-bottom:.3rem}
.dr-glance b{color:#fff;font-weight:800}
/* KPI summary row */
.dr-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px;margin-bottom:1.1rem}
/* ⚠ REMOVED 2026-08-03: .stat-row / .stat / .stat-val / .stat-label. Zero uses in any
   js or html in the repo — a whole tile style nobody rendered. It surfaced because a
   preview fixture referenced it and made it look live. Grep js+html, not just css.*/
/* ── SHARED KPI TILE ──────────────────────────────────────────────────────────
   One tile for every tab. There used to be FIVE: .dr-kpi (24px/800, left, panel2),
   .lst-kpi-card (30px/700, left, accent rule), .tm-stat-pill (21px/800, centred),
   .rp-stat (28px/700, centred, value in the accent colour) and .wb-kpi. Five value
   sizes, two weights, two alignments, three surfaces, four label sizes.
   (.wb-kpi was the fullscreen TV wallboard's tile, sized in vw and deliberately excluded
   from this consolidation; the wallboard was removed 2026-08-10 and that rule went with it.)
   🔑 The old class names are kept and grouped rather than replaced, so not one line of
   JS changes and no bundle needs a ?v bump — only app.css moves.
   ⚠⚠ .dr-kpi / .tm-stat-pill / .rp-stat emit the VALUE BEFORE THE LABEL; only
   .lst-kpi-card emits label first. `order:-1` on the label puts it on top in all four
   without touching the markup, and unlike flex-direction:column-reverse it stays
   correct for the 3-child case (.dr-kpi also has a .dr-kpi-sub).
   ⚠ Ad-hoc child margins are zeroed here because the container now owns the rhythm
   via `gap` — leaving them in would double the spacing. */
.dr-kpi,.lst-kpi-card,.tm-stat-pill,.rp-stat{
  background:var(--kpi-bg);border:1px solid var(--border);
  border-top:2px solid var(--kpi-rule);
  border-radius:var(--r-lg);padding:13px 14px 12px;box-shadow:var(--e-1);
  display:flex;flex-direction:column;gap:4px;text-align:left}
.dr-kpi-lbl,.lst-kpi-lbl,.tm-stat-lbl,.rp-stat-lbl{
  order:-1;margin:0;font-size:10px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text2)}
/* ⚠ PROPORTIONAL figures, not tabular. .dr-kpi-val used tabular-nums, which gives every
   digit the width of a '0' — that reads loose at display size. Tabular belongs in
   COLUMNS of numbers that must align vertically, not on a standalone headline. */
.dr-kpi-val,.lst-kpi-val,.tm-stat-val,.rp-stat-num{
  margin:0;font-size:28px;font-weight:650;line-height:1.05;color:var(--text);
  font-variant-numeric:proportional-nums}
.dr-kpi-sub{font-size:.69rem;color:var(--text2)}
.dr-section{}
.dr-sec-hdr{font-size:.84rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--blue2);padding:.5rem .8rem;background:var(--blue2-fade);border-left:4px solid var(--blue2);margin-bottom:.65rem;border-radius:0 var(--r-md) var(--r-md) 0;display:flex;align-items:center;gap:.5rem}
.dr-subhdr{font-size:.71rem;font-weight:400;letter-spacing:0;text-transform:none;color:#8a94a0}
.dr-table{width:100%;border-collapse:collapse;font-size:.81rem}
.dr-table th{padding:.28rem .5rem;text-align:left;color:#888;font-weight:600;font-size:.71rem;text-transform:uppercase;letter-spacing:.05em;border-bottom:1.5px solid var(--field-border)}
.dr-table td{padding:.42rem .55rem;border-bottom:1px solid #262d38;vertical-align:top}
.dr-table tbody tr:nth-child(even):not(.dr-total-row) td{background:rgba(255,255,255,.032)}
.dr-table tbody tr:hover td{background:rgba(255,255,255,.055)}
.dr-total-row td{font-weight:700;background:var(--tint-2);border-top:1.5px solid var(--field-border)}
/* status cards */
.dr-status-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;padding:.1rem 0}
.dr-status-card{background:var(--panel2-bg);border:1px solid var(--panel2-border);border-radius:var(--r-md);padding:8px 10px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:3px}
.dr-sc-metrics{display:flex;align-items:stretch;width:100%;margin-top:4px}
.dr-sc-metric{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:3px 2px}
.dr-sc-divider{width:1px;background:var(--tint-2);margin:2px 4px;align-self:stretch}
.dr-sc-num{font-size:1.2rem;font-weight:700;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.dr-sc-lbl{font-size:.6rem;color:#666;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.dr-sc-total{grid-column:1/-1;background:var(--blue2-faint);border-color:#2a3a4a;flex-direction:row;justify-content:space-between;align-items:center;padding:7px 14px;gap:0}
.dr-sc-total-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--blue2)}
.dr-sc-total-nums{display:flex;gap:1.5rem;align-items:baseline}
.dr-sc-total-big{font-size:1.15rem;font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}
.dr-sc-total-sub{font-size:.72rem;color:#555}
.dr-num{text-align:right;font-variant-numeric:tabular-nums}
.dr-muted{color:#7a8493;font-size:.79rem}
.dr-nw{white-space:nowrap}
/* appointment groups — clean, consistent zones */
.dr-appt-group{margin-bottom:1rem}
.dr-appt-group:last-child{margin-bottom:0}
.dr-appt-ghdr{display:flex;align-items:center;gap:.5rem;font-size:.81rem;font-weight:700;color:#e6edf3;padding:.4rem .6rem;margin:.55rem 0 .5rem;background:rgba(255,255,255,.045);border-left:3px solid #45526a;border-radius:var(--r-sm)}
.dr-appt-gcnt{font-size:.7rem;font-weight:700;background:rgba(255,255,255,.08);color:#c2cbd6;border-radius:var(--r-lg);padding:.05rem .45rem;font-variant-numeric:tabular-nums}
.dr-appt-gbd{font-size:.73rem;font-weight:400;color:#8a94a0;margin-left:auto}
.dr-note-item{margin-bottom:.3rem;font-size:.81rem;line-height:1.45;color:var(--text)}
.dr-note-who{font-weight:600;color:var(--blue2)}
.dr-note-time{color:#555;font-size:.76rem;margin-left:.25rem}
.dr-notes-cell{max-width:400px;min-width:160px}
.dr-no-report{text-align:center;padding:2.5rem 1rem;color:#555}
.dr-no-report p{margin-bottom:1rem;font-size:.9rem}
.pill-product{display:inline-block;background:#1e293b;color:#94a3b8;border:1px solid #334155;border-radius:var(--r-sm);padding:.1rem .35rem;font-size:.73rem;margin:0 .1rem .1rem 0;white-space:nowrap}
/* stat bar */
.dr-stat-bar{display:flex;flex-wrap:wrap;gap:.45rem;margin-bottom:.85rem}
.dr-stat-pill{display:flex;align-items:center;gap:.3rem;background:var(--inset-bg);border:1px solid var(--field-border);border-radius:var(--r-md);padding:.22rem .6rem;font-size:.79rem;color:#aaa}
.dr-stat-pill strong{color:var(--text);font-variant-numeric:tabular-nums}
/* calls worked */
.dr-cw-group{margin-bottom:.9rem}
.dr-cw-group-hdr{display:flex;align-items:center;gap:.5rem;font-size:.81rem;font-weight:700;color:#e6edf3;padding:.4rem .6rem;margin:.55rem 0 .5rem;background:rgba(255,255,255,.045);border-left:3px solid #45526a;border-radius:var(--r-sm)}
/* sub-group color classes neutralized — unified muted underline header for parity with Appointments + email */
.dr-cw-da,.dr-cw-dna,.dr-cw-oi,.dr-cw-other{background:none;color:#d6dee8}
.dr-cw-cnt{font-size:.7rem;font-weight:700;background:rgba(255,255,255,.08);color:#c2cbd6;border-radius:var(--r-lg);padding:.05rem .45rem;font-variant-numeric:tabular-nums}
.dr-cw-detail{font-size:.72rem;color:var(--text2);margin-top:2px}
/* badges */
.dr-na-badge{background:#3d1a1a;color:#f87171;border-radius:var(--r-sm);padding:.1rem .4rem;font-size:.71rem;font-weight:700}
.dr-esc-badge{background:#4a1414;color:#fca5a5;border-radius:var(--r-sm);padding:.1rem .4rem;font-size:.71rem;font-weight:700}
/* ── ANIMATIONS ── */
@keyframes cardFadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@keyframes modalIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}
/* ── RESPONSIVE SHELL (hamburger drawer) ── */
.hamburger{display:none;background:var(--control-bg);color:var(--blue2);border:1.5px solid var(--field-border);border-radius:var(--r-md);width:40px;height:40px;font-size:1.25rem;line-height:1;cursor:pointer;flex-shrink:0;align-items:center;justify-content:center;padding:0;transition:border .15s}
.hamburger:hover{border-color:var(--blue2)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:600;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s}
.scrim.show{opacity:1;visibility:visible}
@media(max-width:768px){
  .hamburger{display:inline-flex}
  .sidebar{position:fixed;top:0;left:0;bottom:0;width:264px;max-width:84vw;z-index:700;transform:translateX(-100%);transition:transform .24s ease;box-shadow:2px 0 28px rgba(0,0,0,.55)}
  .sidebar.open{transform:translateX(0)}
  .topbar{padding:12px 14px;gap:10px}
  .topbar h2{font-size:.98rem}
  .topbar-title{min-width:0}
  .topbar-title h2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .topbar-actions{margin-left:auto;gap:6px}
  .content{padding:14px}
  #last-updated{display:none}
  /* Post Sale form — phone-friendly: 16px stops iOS zoom-on-tap, bigger tap targets */
  .ps-wrap{padding:18px 14px}
  .ps-input,.ps-textarea,.ps-select{font-size:16px;padding:14px}
  .ps-toggle{font-size:15px;padding:0 12px;min-height:48px;display:flex;align-items:center;justify-content:center}
  .ps-product-card{padding:18px}
  .ps-product-icon{font-size:32px}
  .ps-product-label{font-size:15px}
  .ps-qty-row{flex-direction:column;gap:14px}
  .ps-qty-input{font-size:18px}
  .ps-step-btn{min-height:50px}
  .ps-btn-row{gap:10px}
  .ps-btn{flex:1;font-size:16px;padding:15px 20px;min-height:50px}
  .ps-btn.secondary{margin-right:0}
}
/* ── POST SALE ── */
.ps-wrap{max-width:520px;margin:0 auto;padding:24px 16px}
.ps-header h2{font-size:24px;font-weight:700;color:var(--text);margin:0 0 2px}
.ps-sub{font-size:13px;color:var(--blue2);margin:0 0 24px}
.ps-steps{display:flex;align-items:center;justify-content:center;gap:0;margin-bottom:32px}
.ps-step-dot{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;border:2px solid var(--border);background:var(--surface);color:var(--text2);position:relative;z-index:1;flex-shrink:0}
.ps-step-dot.active{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
.ps-step-dot.done{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
.ps-step-line{flex:1;height:2px;background:var(--border);max-width:60px}
.ps-step-line.done{background:var(--blue2)}
.ps-label{font-size:11px;font-weight:600;letter-spacing:.07em;color:var(--text2);text-transform:uppercase;margin-bottom:8px;margin-top:20px}
.ps-input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:14px;padding:12px 14px;box-sizing:border-box;outline:none}
.ps-input:focus{border-color:var(--blue2)}
.ps-char-count{font-size:11px;color:var(--text2);margin-top:4px}
.ps-char-count.warn{color:#f97316}
.ps-toggle-row{display:flex;gap:8px}
.ps-toggle{flex:1;padding:10px;border-radius:var(--r-md);background:var(--surface);border:1px solid var(--border);color:var(--text2);font-size:13px;font-weight:600;cursor:pointer;text-align:center;transition:all .15s;user-select:none}
.ps-toggle.active{background:rgba(var(--blue2-rgb),.12);border-color:var(--blue2);color:var(--blue2)}
.ps-sub-field{margin-top:10px}
.ps-textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:14px;padding:12px 14px;box-sizing:border-box;outline:none;resize:vertical;min-height:80px;font-family:inherit}
.ps-textarea:focus{border-color:var(--blue2)}
.ps-btn-row{display:flex;justify-content:flex-end;margin-top:28px}
.ps-btn{padding:10px 28px;border-radius:var(--r-md);border:none;background:var(--blue2);color:var(--on-accent);font-size:14px;font-weight:700;cursor:pointer;letter-spacing:.03em}
.ps-btn:disabled{opacity:.4;cursor:not-allowed}
.ps-btn.secondary{background:var(--surface2);color:var(--text2);margin-right:8px}
.ps-products{display:flex;flex-direction:column;gap:8px}
.ps-product-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;cursor:pointer;position:relative;transition:border-color .15s}
.ps-product-card.selected{border-color:var(--blue2);background:rgba(var(--blue2-rgb),.06)}
.ps-check{position:absolute;top:12px;right:12px;width:18px;height:18px;border-radius:50%;background:var(--blue2);display:none;align-items:center;justify-content:center}
.ps-product-card.selected .ps-check{display:flex}
.ps-check::after{content:'✓';font-size:11px;color:#fff;font-weight:700}
.ps-product-icon{font-size:28px;text-align:center;margin-bottom:4px}
.ps-product-label{font-size:13px;font-weight:600;text-align:center;color:var(--text)}
.ps-product-detail{margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ps-qty-row{display:flex;gap:22px;flex-wrap:wrap}
.ps-qty-col{flex:0 0 auto;min-width:0}
.ps-qty-label{font-size:11px;font-weight:600;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px}
.ps-qty-input{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:15px;font-weight:600;padding:8px 10px;box-sizing:border-box;text-align:center;outline:none}
.ps-qty-input:focus{border-color:var(--blue2)}
.ps-total-lines{font-size:11px;color:var(--text2);margin-top:6px}
.ps-stepper{display:flex;align-items:stretch;gap:8px;max-width:172px}
.ps-step-btn{width:44px;flex-shrink:0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--blue2);font-size:20px;font-weight:700;line-height:1;cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center;padding:0;transition:border-color .15s,background .15s}
.ps-step-btn:hover{border-color:var(--blue2)}
.ps-step-btn:active{background:var(--blue2);color:var(--on-accent);border-color:var(--blue2)}
.ps-step-input{flex:1;min-width:0;width:auto}
.ps-select{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:13px;padding:9px 10px;box-sizing:border-box;outline:none;-webkit-appearance:auto}
.ps-select:focus{border-color:var(--blue2)}
.ps-review-section{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:16px;margin-bottom:12px}
.ps-review-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.ps-review-title{font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--text2);text-transform:uppercase}
.ps-edit-btn{font-size:12px;color:var(--blue2);cursor:pointer;font-weight:600}
.ps-review-row{display:flex;justify-content:space-between;padding:5px 0;font-size:13px;border-bottom:1px solid var(--rule-1)}
.ps-review-row .ps-rl{color:var(--text2)}
.ps-review-row .ps-rv{color:var(--text);font-weight:600;text-align:right;max-width:60%;word-break:break-all}
.ps-product-line{font-size:13px;color:var(--text);padding:5px 0}
.ps-product-line::before{content:'✓ ';color:var(--blue2)}
.ps-success{text-align:center;padding:60px 20px}
.ps-success-icon{font-size:56px;margin-bottom:16px}
.ps-success-title{font-size:22px;font-weight:700;color:var(--text);margin-bottom:8px}
.ps-success-units{font-size:15px;color:var(--text2);margin-bottom:28px}
.ps-success-units span{color:var(--blue2);font-weight:700;font-size:20px}
/* Post Sale self-check (2026-09-28): colours are the existing .nm-cx-err red and .ps-char-count.warn orange */
.ps-verify{margin:16px 0 0;padding:12px 14px;border-radius:var(--r-md);font-size:13px;line-height:1.5;font-weight:600}
.ps-verify.info{background:var(--surface2);color:var(--text);border:1px solid var(--border)}
.ps-verify.bad{background:rgba(207,107,98,.14);color:#e9756a}
.ps-verify.warn{background:rgba(249,115,22,.12);color:#f97316}
/* Light: the dark inks above are ~2.7:1 on a light tint — too faint for "did NOT save". Reuses the AA-checked
   light badge inks (.badge-red / .pill-15-30 above). */
html[data-theme="light"] .ps-verify.bad{background:#f2cac5;color:#ac241d;box-shadow:inset 0 0 0 1px #dc958f}
html[data-theme="light"] .ps-verify.warn{background:#f2d4be;color:#974615;box-shadow:inset 0 0 0 1px #d5a788}
/* ── POSTED SALES (view + correct) ── */
.psv-show-voided{font-size:12px;color:var(--text2);display:flex;align-items:center;gap:6px;cursor:pointer;user-select:none;white-space:nowrap}
.psv-actions{white-space:nowrap;text-align:right}
.psv-btn{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:12px;font-weight:600;padding:5px 11px;cursor:pointer;margin-left:6px}
.psv-btn:hover{border-color:var(--blue2)}
.psv-void:hover{border-color:#e0564f;color:#e0564f}
.psv-unvoid:hover{border-color:#4caf7d;color:#4caf7d}
.psv-voided td{opacity:.5}
.psv-badge{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.06em;color:#e0564f;border:1px solid #e0564f;border-radius:var(--r-sm);padding:1px 5px;vertical-align:middle;margin-left:4px}
.psv-note{cursor:help}
/* Posted Sales — edit modal */
.pse-form .ps-label:first-child{margin-top:0}
.pse-prods{display:flex;flex-direction:column;gap:8px}
.pse-pc{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px}
.pse-pc.selected{border-color:var(--blue2);background:rgba(var(--blue2-rgb),.06)}
.pse-pc-row{display:flex;align-items:center;gap:10px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text);user-select:none}
.pse-pc-check{width:18px;height:18px;border-radius:var(--r-sm);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--on-accent);flex-shrink:0}
.pse-pc.selected .pse-pc-check{background:var(--blue2);border-color:var(--blue2)}
.pse-detail{margin-top:10px;padding-top:10px;border-top:1px solid var(--border)}
/* keep the edit-modal quantity boxes a tidy size (not full-width for a single digit) */
.pse-detail .ps-qty-input{max-width:140px}
.pse-notes-ro{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 12px;font-size:13px;color:var(--text);white-space:pre-wrap;word-break:break-word;min-height:20px}
.pse-btn-row{display:flex;gap:10px;margin-top:20px}
.pse-btn-row .ps-btn{flex:1}
/* ── LIVE SALES TRACKER ── */
.lst-wrap{padding:0 0 48px}
.lst-week-bar{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:28px;overflow:hidden}
.lst-week-stat{flex:1;text-align:center;padding:22px 16px}
.lst-week-div{width:1px;background:var(--border);margin:16px 0}
.lst-wk-lbl{font-size:11px;font-weight:600;letter-spacing:.1em;color:var(--blue2);text-transform:uppercase;margin-bottom:8px}
.lst-wk-num{font-size:44px;font-weight:700;color:var(--text);line-height:1}
.lst-wk-num.blue{color:var(--blue2)}
.lst-top-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.lst-sec-lbl{font-size:16px;font-weight:700;color:var(--text);letter-spacing:.04em;text-transform:uppercase}
.lst-wk-tag{font-size:13px;color:var(--text2)}
.lst-sub-lbl{font-size:11px;font-weight:600;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin:20px 0 10px}
.lst-podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:4px}
.lst-pod{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px 12px;text-align:center;position:relative;overflow:hidden;min-height:60px}
.lst-pod::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
.lst-pod.gold::before{background:#F59E0B}
.lst-pod.silver::before{background:#9CA3AF}
.lst-pod.bronze::before{background:#CD7F32}
.lst-pod-medal{font-size:34px;margin-bottom:6px}
.medal{display:inline-flex;vertical-align:-0.18em;line-height:1}
.medal svg{width:1em;height:1em;overflow:visible}
.lst-pod-emoji{font-size:22px;margin:4px 0}
.lst-pod-name{font-size:14px;font-weight:700;color:var(--text);margin-bottom:2px;line-height:1.25}
.lst-pod-role{font-size:10px;color:var(--text2);letter-spacing:.08em;text-transform:uppercase;margin-bottom:14px}
.lst-pod-stats{display:flex;justify-content:center;gap:16px}
.lst-pod-stat{text-align:center}
.lst-pod-num{font-size:26px;font-weight:700;color:var(--blue2);line-height:1}
.lst-pod-num.sm{font-size:20px;color:var(--text2)}
.lst-pod-lbl{font-size:9px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;margin-top:2px}
.lst-board-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin:28px 0 12px}
.lst-board-title{font-size:16px;font-weight:700;color:var(--text);letter-spacing:.04em;text-transform:uppercase}
.lst-board-cnt{font-size:12px;color:var(--text2);margin-top:2px}
.lst-view-toggle{display:flex;gap:4px}
.lst-view-btn{padding:6px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.06em;user-select:none}
.lst-view-btn.active{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
/* ── KPI SUMMARY CARDS ── */
.lst-kpi-head{display:flex;justify-content:space-between;align-items:baseline;margin:4px 0 12px}
.lst-kpi-hint{font-size:11px;color:var(--text2)}
.lst-kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:12px;margin-bottom:28px}
/* chrome comes from the shared tile above; these are the bits only this card needs
   (the sparkline is absolutely-positioned-adjacent, hence overflow/position) */
.lst-kpi-card{position:relative;overflow:hidden}
/* Phase 2 #4: clickable KPI cards → drill to composing sales */
.lst-kpi-clickable{cursor:pointer;transition:border-color .12s,transform .08s}
.lst-kpi-clickable:hover{border-color:var(--kpi-accent,var(--blue2))}
.lst-kpi-clickable:active{transform:translateY(1px)}
.lst-kpi-drill-hint{float:right;font-size:11px;color:var(--text2);opacity:.5}
.lst-kpi-clickable:hover .lst-kpi-drill-hint{opacity:1;color:var(--kpi-accent,var(--blue2))}
.lst-drill-sum{font-size:.82rem;font-weight:600;color:var(--text2);margin-bottom:10px}
.lst-drill-wrap{max-height:56vh;overflow:auto}
.lst-drill-tbl{width:100%}
.lst-drill-tbl th{position:sticky;top:0;background:var(--surface);z-index:1}
.lst-kpi-delta{font-size:11px;font-weight:600;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.lst-kpi-delta.up{color:#4ade80}
.lst-kpi-delta.down{color:#f87171}
.lst-kpi-delta.flat{color:var(--text2)}
.lst-kpi-arrow{font-size:9px}
.lst-kpi-vs{color:var(--text2);font-weight:500}
.lst-kpi-spark-wrap{margin-top:2px;height:34px}
.lst-spark{width:100%;height:34px;display:block}
.lst-kpi-card-top{display:flex;flex-direction:column}
.lst-kpi-top-name{font-size:18px;font-weight:700;color:var(--text);margin-top:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lst-kpi-top-empty{color:var(--text2);font-weight:600;font-size:15px}
.lst-kpi-top-stats{font-size:12px;color:var(--blue2);font-weight:600;margin-top:4px}
.lst-kpi-top-period{font-size:10px;color:var(--text2);text-transform:uppercase;letter-spacing:.06em;margin-top:auto;padding-top:8px}
.lst-tbl-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
.lst-tbl{width:100%;border-collapse:collapse;font-size:12px;white-space:nowrap}
.lst-tbl th{padding:8px 10px;color:var(--text2);font-size:10px;font-weight:600;letter-spacing:.06em;border-bottom:1px solid var(--border);background:var(--surface2);text-align:center}
.lst-tbl th.ll{text-align:left}
/* click-to-sort column headers (LST days/weeks boards) */
.lst-sort-th{cursor:pointer;user-select:none;transition:color .12s,background .12s}
.lst-sort-th:hover{color:var(--text);background:var(--surface)}
.lst-sort-active{color:var(--blue2);font-weight:700}
.lst-sort-arw{margin-left:3px;font-size:9px;vertical-align:baseline}
.lst-wk-date{display:block;font-size:9px;font-weight:500;color:var(--text2);opacity:.7;margin-top:3px;letter-spacing:.02em}
.lst-tbl td{padding:9px 10px;border-bottom:1px solid rgba(255,255,255,.04);vertical-align:middle;text-align:center}
.lst-tbl td.ll{text-align:left}
.lst-tbl tr:last-child td{border-bottom:none}
.lst-rep-name{font-weight:600;color:var(--text);font-size:13px}
.lst-rep-role{font-size:10px;color:var(--text2)}
/* Phase 2 #5: per-rep relative-baseline flag (hot/cold vs own 4-wk avg) */
.lst-base-flag{font-size:11px;cursor:help;vertical-align:middle}
.lst-u-green{background:rgba(34,197,94,.18);color:#4ade80;font-weight:700}
.lst-u-yellow{background:rgba(234,179,8,.18);color:#fbbf24;font-weight:700}
.lst-u-orange{background:rgba(249,115,22,.18);color:#fb923c;font-weight:700}
.lst-u-red{background:rgba(239,68,68,.18);color:#f87171;font-weight:700}
.lst-dash{color:rgba(255,255,255,.2)}
.lst-total-row td{background:rgba(var(--blue2-rgb),.07);color:var(--blue2);font-weight:700}
.lst-grand-row td{background:rgba(var(--blue2-rgb),.13)!important}
/* ── Right-hand TOTAL column (Days = week-to-date · Weeks = across the weeks shown) ──
   PINNED to the right edge: the days view is 18 columns and .lst-tbl-wrap scrolls
   horizontally, so an unpinned total is the first thing to leave the screen — which is
   the opposite of what it's for.
   ⚠⚠ Sticky cells MUST be opaque or the scrolling columns show straight through them.
   The base is var(--bg) because neither .lst-tbl nor .lst-tbl-wrap sets a background,
   so an ordinary row's cells already show var(--bg) — matching it means the pinned
   column doesn't read as a lighter stripe. Row tints (hover / total / grand) are then
   re-applied ON TOP as a gradient layer, since a flat rgba() would let the scrolled
   cells through again.
   ⚠ The `right` offsets must equal the widths, so both are fixed here. Widths are set
   for a 4-digit figure — an office 5-week unit total is the largest number shown. */
.lst-tbl .lst-tot-u{right:0;width:58px;min-width:58px}
.lst-tbl .lst-tot-o{right:58px;width:54px;min-width:54px;border-left:2px solid var(--border)}
.lst-tbl .lst-tot-hdr{position:sticky;right:0;width:112px;min-width:112px;z-index:3;
  background:var(--surface2);border-left:2px solid var(--border)}
.lst-tbl th.lst-tot-o,.lst-tbl th.lst-tot-u{position:sticky;z-index:3;background:var(--surface2)}
.lst-tbl td.lst-tot-o,.lst-tbl td.lst-tot-u{position:sticky;z-index:1;background:var(--bg);font-weight:700}
.lst-tbl td.lst-tot-o{color:var(--text2)}
.lst-tbl td.lst-tot-u{color:var(--blue2)}
.lst-tbl td.lst-sep-tot{background:var(--surface2)}
/* 🗑 The `tr.lst-row-click` hover pair that sat here is gone with the row handler (2026-08-31).
   A hover highlight on a row that no longer does anything is a promise the board cannot keep. */
.lst-tbl .lst-total-row td.lst-tot-o,.lst-tbl .lst-total-row td.lst-tot-u{
  background:linear-gradient(rgba(var(--blue2-rgb),.07),rgba(var(--blue2-rgb),.07)),var(--bg)}
.lst-tbl .lst-grand-row td.lst-tot-o,.lst-tbl .lst-grand-row td.lst-tot-u{
  background:linear-gradient(rgba(var(--blue2-rgb),.13),rgba(var(--blue2-rgb),.13)),var(--bg)!important}
.lst-section-sep td{padding:4px 10px;font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text2);background:var(--surface2)}
.lst-team-rankings{margin-top:32px}
.lst-team-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-top:12px}
.lst-team-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px}
.lst-team-card.first{border-color:#F59E0B;background:rgba(245,158,11,.06)}
.lst-team-rnk{font-size:11px;color:var(--text2);font-weight:600;margin-bottom:6px}
.lst-team-emo{font-size:20px;margin-bottom:4px}
.lst-team-nm{font-size:14px;font-weight:700;color:var(--text);margin-bottom:10px}
.lst-team-u{font-size:22px;font-weight:700;color:var(--blue2)}
.lst-team-o{font-size:13px;color:var(--text2);margin-left:6px}
.lst-team-sub{font-size:9px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;margin-top:4px}
.lst-refresh-btn{font-size:11px;color:var(--blue2);cursor:pointer;font-weight:600;margin-left:12px;user-select:none}
@media(max-width:640px){.lst-podium{grid-template-columns:1fr}}
/* A rep name and a team name are the only two things on this board that open anything
   (user, 2026-08-31), so they share one affordance — if they looked different, one of them
   would read as not clickable. */
.lst-rep-link,.lst-team-link{cursor:pointer}
.lst-rep-link:hover,.lst-team-link:hover{color:var(--blue2);text-decoration:underline;text-underline-offset:2px}
/* ── REP PROFILE ── */
.rp-wrap{max-width:640px;margin:0 auto;padding:0 0 40px}
.rp-back{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--blue2);cursor:pointer;letter-spacing:.06em;text-transform:uppercase;margin-bottom:20px;user-select:none}
.rp-back:hover{opacity:.8}
.rp-name{font-size:26px;font-weight:700;color:var(--text);margin-bottom:8px}
.rp-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:24px}
.rp-badge{font-size:11px;font-weight:600;padding:3px 10px;border-radius:var(--r-pill);background:var(--surface2);color:var(--text2);letter-spacing:.05em}
.rp-badge.blue{background:rgba(var(--blue2-rgb),.15);color:var(--blue2)}
.rp-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;margin-bottom:14px}
.rp-card-title{font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--text2);text-transform:uppercase;margin-bottom:14px}
.rp-stats-row{display:flex;gap:12px;flex-wrap:wrap}
.rp-stat{flex:1;min-width:96px}
.rp-pct-list{display:flex;flex-direction:column;gap:12px}
.rp-pct-item{display:flex;flex-direction:column;gap:4px}
.rp-pct-header{display:flex;justify-content:space-between;align-items:center;font-size:13px}
.rp-pct-lbl{color:var(--text2)}
.rp-pct-val{font-weight:700}
.rp-pct-val.green{color:#4ade80}
.rp-pct-val.orange{color:#fb923c}
.rp-pct-val.yellow{color:#fbbf24}
.rp-pct-val.red{color:#f87171}
/* Disconnected — terminal like Canceled but a different outcome, so its own hue rather than
   sharing red. The BAR is true maroon (#800000); this text tone is a lightened maroon because
   #800000 on the dark theme fails contrast, and this card is dark-first like the rest. */
.rp-pct-val.maroon{color:#cf6f7d}
.rp-bar{height:5px;border-radius:var(--r-sm);background:var(--tint-2);overflow:hidden}
.rp-bar-fill{height:100%;border-radius:var(--r-sm);transition:width .3s}
.rp-tbl-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rp-tbl-sel{flex:1;min-width:0;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);color:var(--text);font-size:13px;padding:9px 10px;outline:none}
.rp-tbl-sel:focus{border-color:var(--blue2)}
.rp-save-btn{padding:9px 18px;border-radius:var(--r-md);border:none;background:var(--blue2);color:var(--on-accent);font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0}
.rp-save-btn:disabled{opacity:.4;cursor:not-allowed}
.rp-no-data{font-size:13px;color:var(--text2);font-style:italic}
/* A clarifier under a card title, for when the COLUMN HEADINGS are ambiguous and the data is
   not. Used by the rep-profile Churn card, whose buckets are tenure rather than recency.
   ⚠ Deliberately quiet — muted, small, no border, no icon. It explains a heading; it is not a
   warning and must not compete with the numbers underneath it. Uses --text2 like .rp-no-data
   so both theme polarities are inherited rather than re-specified. */
.rp-hint{font-size:12px;color:var(--text2);line-height:1.5;margin:-2px 0 10px;max-width:68ch}
.rp-hint strong{color:var(--text);font-weight:600}
/* Sales Breakdown — a CARD on the rep's dashboard (2026-08-31). It was a modal opened by
   clicking a rep's ROW on the LST board; the row handler and its two cursor/hover rules went
   with it, as did `.modal:has(.rp-bd-body){max-width:820px}`, which widened the shared 520px
   modal for this table and now has no modal to widen.
   ⚠ The table lives inside `.tbl-wrap`, so at the profile's 640px it scrolls horizontally
   rather than crushing six columns — which is what `.rp-bd-tbl` was already tuned for. */
.rp-bd-body{padding-top:2px}
.rp-bd-toggle{display:flex;gap:6px;margin-bottom:14px}
.rp-bd-btn{padding:6px 14px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.06em;user-select:none}
.rp-bd-btn.active{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
.rp-bd-per{margin-bottom:16px}
.rp-bd-per:last-child{margin-bottom:0}
.rp-bd-hdr{display:flex;align-items:baseline;gap:10px;padding:7px 2px;border-bottom:1px solid var(--border);margin-bottom:8px;flex-wrap:wrap}
.rp-bd-ttl{font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--text);text-transform:uppercase}
.rp-bd-sub{font-size:11px;color:var(--text2)}
.rp-bd-tot{margin-left:auto;font-size:11px;color:var(--text2);white-space:nowrap}
.rp-bd-tot b{color:var(--blue2);font-size:13px}
.rp-bd-none{font-size:12px;color:var(--text2);font-style:italic;padding:2px 2px 6px}
/* the rep profile column is 640px — tighten this table so cells don't wrap */
.rp-bd-tbl{font-size:.78rem}
.rp-bd-tbl th{padding:8px 9px;font-size:.66rem}
.rp-bd-tbl td{padding:9px}
.rp-bd-tbl td.nw{white-space:nowrap}
.rp-rate-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.rp-rate-cell{text-align:center;padding:12px 8px;background:var(--surface2);border-radius:var(--r-md)}
.rp-rate-bkt{font-size:9px;color:var(--text2);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.rp-rate-val{font-size:18px;font-weight:700;line-height:1}
.rp-rate-sub{font-size:10px;color:var(--text2);margin-top:3px}
@media(max-width:480px){.rp-rate-row{grid-template-columns:repeat(2,1fr)}}
/* Rep-profile data tables (Activation Rates / Churn / Order Log): center headers
   over the centered badge cells, keep columns even, and drop the inner scrollbox
   so the page scrolls cleanly instead of nesting a scrollbar inside the card. */
.rp-card .call-table th,.rp-card table th{text-align:center}
.rp-card .call-table td,.rp-card table td{text-align:center;vertical-align:middle}
.rp-card .tbl-wrap{max-height:none;overflow-y:visible}
.rp-card .call-table th{position:static}
/* ── TEAMS TAB ── */
.tm-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}
.tm-title{font-size:1.6rem;font-weight:800;color:var(--text);line-height:1.2}
.tm-count{font-size:.8rem;color:var(--text2);margin-top:2px}
.tm-hr{border:none;border-top:1px solid var(--border);margin:14px 0}
.tm-table{width:100%;border-collapse:collapse}
.tm-table th{font-size:.72rem;letter-spacing:.8px;font-weight:700;color:var(--text2);padding:8px 12px;text-align:left;border-bottom:1px solid var(--border)}
.tm-table th.tm-num-hdr{text-align:center}
.tm-table th.tm-act-hdr{text-align:right}
.tm-table td{padding:10px 12px;border-bottom:1px solid var(--rule-1);vertical-align:middle}
.tm-name-cell{min-width:160px}
.tm-emoji-col{font-size:1.2rem;margin-right:8px;vertical-align:middle}
.tm-name-link{background:none;border:none;color:var(--blue2);font-size:.92rem;font-weight:600;cursor:pointer;padding:0}
.tm-name-link:hover{text-decoration:underline}
.tm-parent-tag{font-size:.68rem;color:var(--text2);margin-left:6px}
.tm-leader-cell{min-width:160px;font-size:.88rem;color:var(--text)}
.tm-role-tag{color:var(--text2);font-size:.75rem}
.tm-num-cell{text-align:center;font-size:.9rem;min-width:80px}
.tm-act-cell{text-align:right;white-space:nowrap}
.tm-btn-edit{background:var(--surface2);border:1px solid var(--blue2);color:var(--blue2);font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;letter-spacing:.5px;transition:all .15s}
.tm-btn-edit:hover{background:var(--blue2-fade)}
.tm-btn-del{background:#3a1a1a;border:1px solid rgba(248,113,113,.4);color:#f87171;font-size:.72rem;font-weight:700;padding:4px 10px;border-radius:var(--r-sm);cursor:pointer;letter-spacing:.5px;margin-left:4px;transition:all .15s}
.tm-btn-del:hover{background:#4a2a2a}
.tm-back{color:var(--text2);font-size:.82rem;cursor:pointer;margin-bottom:12px;display:inline-block}
.tm-back:hover{color:var(--text)}
.tm-detail-hdr{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.tm-detail-em{font-size:2rem}
.tm-detail-nm{font-size:1.6rem;font-weight:800;color:var(--text)}
.tm-section-label{font-size:.65rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text2);margin-bottom:10px;border-bottom:1px solid var(--border);padding-bottom:6px}
.tm-breakdown-row{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:10px;margin-bottom:20px}
@media(max-width:760px){.tm-breakdown-row{grid-template-columns:repeat(2,1fr)}}
@media(max-width:440px){.tm-breakdown-row{grid-template-columns:1fr}}
.tm-remarks-card{padding:14px 12px;border-radius:var(--r-md);border:1.5px solid var(--border);background:var(--surface2);text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:84px}
.tm-remarks-label{font-size:.6rem;font-weight:700;letter-spacing:.8px;color:var(--text2);text-transform:uppercase;margin-bottom:4px}
.tm-remarks-trend{font-size:.95rem;font-weight:700;margin-bottom:6px}
.tm-remarks-sub{font-size:.72rem;color:var(--text2)}
.tm-trend-up .tm-remarks-trend{color:#4ade80}
.tm-trend-down .tm-remarks-trend{color:#f87171}
.tm-trend-flat .tm-remarks-trend{color:#94a3b8}
.tm-stat-pill{min-height:84px;justify-content:center}
.tm-ldr-table{width:100%;border-collapse:collapse;font-size:.82rem}
.tm-ldr-table th{font-size:.65rem;letter-spacing:.5px;font-weight:700;color:var(--text2);padding:6px 8px;text-align:center;border-bottom:1px solid var(--border)}
.tm-ldr-table td{padding:6px 8px;border-bottom:1px solid var(--rule-1);text-align:center;vertical-align:middle}
.tm-ldr-rank{width:28px;color:var(--text2);font-weight:600}
.tm-ldr-name-cell{text-align:left!important;min-width:140px}
.tm-ldr-name{color:var(--blue2);cursor:pointer;font-weight:600;font-size:.88rem}
.tm-ldr-name:hover{text-decoration:underline}
.tm-day-hdr{text-align:center;padding:6px 4px!important}
.tm-sub-hdr{font-size:.6rem!important;color:var(--text2)!important;padding:3px 4px!important}
.tm-day-cell{min-width:32px;font-size:.8rem;padding:5px 4px!important}
.tm-unit-cell{font-weight:700}
.tm-total-row{border-top:1.5px solid var(--border)!important;background:var(--surface2)}
.tm-total-row td{font-weight:700}
/* Sub-team rollup — a child team's production counts toward its parent. */
.tm-roll-tag{display:inline-flex;align-items:center;gap:4px;font-size:.7rem;font-weight:700;letter-spacing:.3px;color:var(--blue2);background:var(--blue2-fade);border:1px solid rgba(var(--blue2-rgb),.35);padding:3px 9px;border-radius:var(--r-pill);white-space:nowrap}
.tm-roll-tag svg{width:13px;height:13px}
.tm-roll-tag-sm{display:inline-flex;align-items:center;gap:3px;font-size:.62rem;font-weight:700;color:var(--blue2);background:var(--blue2-fade);border:1px solid rgba(var(--blue2-rgb),.3);padding:1px 6px;border-radius:var(--r-pill);margin-left:8px;vertical-align:middle;white-space:nowrap}
.tm-roll-tag-sm svg{width:11px;height:11px}
.tm-sub-row{background:var(--tint-1)}
.tm-branch{display:inline-flex;align-items:center;color:var(--text2);margin-right:2px}
.tm-branch svg{width:14px;height:14px;opacity:.6}
.tm-sub-table .tm-sub-name{text-align:left;min-width:180px;font-size:.9rem;color:var(--text)}
.tm-sub-self td{background:var(--blue2-fade)}
.tm-sub-self .tm-sub-name{font-weight:600}
/* My Team's Orders — grouped-by-team sections (parent leader). */
.mto-team{border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px;background:var(--surface)}
.mto-team-hdr{display:flex;align-items:center;gap:9px;padding:11px 14px;cursor:pointer;list-style:none;background:var(--surface2);font-weight:700;font-size:.95rem;color:var(--text);user-select:none}
.mto-team-hdr::-webkit-details-marker{display:none}
.mto-team-hdr.mto-self{background:var(--blue2-fade);border-bottom:1px solid rgba(var(--blue2-rgb),.3)}
.mto-caret{display:inline-flex;color:var(--text2);transition:transform .15s}
.mto-caret svg{width:14px;height:14px}
.mto-team[open] .mto-caret{transform:rotate(90deg)}
.mto-emoji{font-size:1.2rem}
.mto-name{font-weight:800}
.mto-count{margin-left:auto;font-weight:600;font-size:.8rem;color:var(--text2)}
.mto-body{padding:4px 12px 12px}
.mto-body .call-table-wrap{max-height:none}
.mto-filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:8px 0 10px}
/* Team detail: stack the four tables flush with even spacing. Drop the per-table
   inner scrollbox (max-height) and the sticky header — on one long page those make
   opaque headers float over the section above, which reads as overlapping tables.
   Horizontal scroll (overflow-x) is preserved for the wide leaderboard/orders tables. */
.tm-detail-body .tbl-wrap{max-height:none;margin-bottom:24px}
.tm-detail-body .call-table th{position:static}

/* ── APPOINTMENTS ── */
.appt-wrap{}
.appt-controls{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:10px}
.appt-tz-note{font-size:.78rem;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:8px 12px;margin-bottom:16px}
.appt-tz-note strong{color:var(--text)}
.appt-nav{display:flex;align-items:center;gap:10px}
.appt-nav-btn{padding:6px 12px;background:var(--control-bg);color:var(--blue2);border:1px solid var(--field-border);border-radius:var(--r-md);font-size:.88rem;font-weight:700;cursor:pointer;transition:all .15s}
.appt-nav-btn:hover{border-color:var(--blue2)}
.appt-week-label{font-size:.92rem;font-weight:700;color:var(--text);min-width:200px;text-align:center}
.appt-filter-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.appt-select{padding:7px 12px;background:var(--field-bg);color:var(--text);border:1.5px solid var(--field-border);border-radius:var(--r-md);font-size:.85rem;cursor:pointer}
.appt-select:focus{border-color:var(--blue2);outline:none}
.appt-book-btn{padding:8px 16px;background:var(--blue);color:var(--blueText);border:none;border-radius:var(--r-md);font-size:.85rem;font-weight:700;cursor:pointer;transition:background .15s;white-space:nowrap}
.appt-book-btn:hover{background:var(--blueHover);color:var(--blueHoverText,var(--blueText))}
.appt-book-btn:disabled{opacity:.45;cursor:not-allowed}
.appt-manage-btn{padding:7px 14px;background:var(--control-bg);color:var(--text2);border:1px solid var(--field-border);border-radius:var(--r-md);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .15s}
.appt-manage-btn:hover{border-color:var(--blue2);color:var(--blue2)}
.appt-do-cancel-btn{padding:5px 10px;background:transparent;color:var(--red);border:1px solid var(--red);border-radius:var(--r-sm);font-size:.75rem;cursor:pointer;transition:all .15s}
.appt-do-cancel-btn:hover{background:rgba(231,76,60,.1)}
.appt-del-btn{padding:5px 9px;margin-left:6px;background:transparent;color:#b3392c;border:1px solid #7f2620;border-radius:var(--r-sm);font-size:.78rem;cursor:pointer;transition:all .15s}
.appt-del-btn:hover{background:rgba(179,57,44,.16);color:#e25b4d}
.appt-cal-outer{overflow-x:auto;margin-bottom:16px}
.appt-cal-grid{display:grid;grid-template-columns:72px repeat(7,1fr);min-width:560px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.appt-cal-th{background:var(--surface2);padding:10px 6px;text-align:center;border-bottom:1px solid var(--border)}
.appt-cal-th.appt-today-hdr{background:rgba(var(--blue2-rgb),.13)}
.appt-cal-time-hdr{background:var(--surface2);border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.appt-cal-dayname{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2)}
.appt-cal-daynum{font-size:.88rem;font-weight:700;color:var(--text);margin-top:2px}
.appt-cal-time{display:flex;align-items:center;justify-content:flex-end;padding:0 8px;font-size:.68rem;color:var(--text2);border-right:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--surface2);min-height:54px}
.appt-cal-cell{min-height:54px;padding:4px 5px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-direction:column;justify-content:center;align-items:center;font-size:.73rem;transition:background .12s;text-align:center}
.appt-cell-booked{background:rgba(31,78,120,.38);cursor:default}
.appt-cell-avail{background:rgba(39,174,96,.08);color:var(--green);cursor:pointer;font-weight:600}
.appt-cell-avail:hover{background:rgba(39,174,96,.2)}
.appt-avail-plus{font-size:.95rem;margin-right:2px}
.appt-cell-avail-light{background:transparent;cursor:pointer}
.appt-cell-avail-light:hover{background:rgba(var(--blue2-rgb),.07)}
.appt-avail-dot{font-size:1.3rem;color:#404040}
.appt-avail-freecount{display:block;font-size:.62rem;font-weight:700;color:var(--green);opacity:.85;margin-top:1px;font-variant-numeric:tabular-nums}
.appt-cell-booked-multi{background:rgba(31,78,120,.22);flex-direction:column;gap:2px;cursor:default}
.appt-cell-closed{background:var(--bg);color:#303030;cursor:default;font-size:1rem}
/* "Booked elsewhere" — the slot is held by ANOTHER office, which is not the same fact as
   the office being closed. Reuses the inset-3px office-colour bar the per-activator
   .appt-cell-blocked already uses, so this is the existing cross-office language rather
   than a new one. --wv and the tinted background are set inline per cell from the
   blocking office's bookTint (app.appts.js).
   ⚠ Deliberately QUIET: the cell is NOT actionable, so it must not compete with the green
   "+ Book" cells beside it. The office name lives in the title, not the cell. */
.appt-cell-elsewhere{box-shadow:inset 3px 0 0 var(--wv);color:var(--text2);cursor:default;
  font-size:.62rem;line-height:1.25;gap:0}
.appt-elsewhere-lbl{font-weight:700;font-size:.66rem;color:var(--wv);filter:brightness(1.25)}
.appt-elsewhere-sub{opacity:.7}
/* On light the office colours are already dark enough to read; brightening washes them. */
html[data-theme="light"] .appt-elsewhere-lbl{filter:none}
/* Cross-office conflict check still in flight. availAt() fails CLOSED, so the slot is not
   offered yet — this says "not known yet", NOT "closed" (which is what "—" would imply).
   Deliberately theme-token based (--control-bg/--text2), not a hardcoded dark literal. */
.appt-cell-checking{background:var(--control-bg);color:var(--text2);cursor:progress;font-size:1rem;letter-spacing:1px;opacity:.75}
@media (prefers-reduced-motion:no-preference){
  .appt-cell-checking{animation:apptCheckPulse 1.2s ease-in-out infinite}
}
@keyframes apptCheckPulse{0%,100%{opacity:.45}50%{opacity:.9}}
.appt-cell-name{font-weight:700;color:var(--text);font-size:.75rem;line-height:1.2}
/* Item 3 — dual-time (customer/office time over the activator call time) on cross-tz bookings */
.appt-dtime{display:flex;flex-direction:column;gap:2px;line-height:1.25}
.appt-dtime-cust{font-weight:600}
.appt-dtime-act{color:var(--text2);font-size:.82em}
.appt-dtime-tag{display:inline-block;font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;color:var(--text2);background:var(--inset-bg,rgba(127,127,127,.14));border-radius:var(--r-sm);padding:0 5px;margin-right:6px;vertical-align:middle}
.appt-dtime-act .appt-dtime-tag{color:var(--blue2,#4FB0FF)}
.appt-cell-svc{font-size:.65rem;color:var(--text2);line-height:1.2;margin-top:2px}
.appt-cell-act-tag{font-size:.68rem;background:rgba(var(--blue2-rgb),.15);color:var(--blue2);padding:1px 5px;border-radius:var(--r-md);font-weight:600}
.appt-cell-more{font-size:.65rem;color:var(--text2)}
.appt-status-confirmed{color:var(--green);font-weight:700;font-size:.75rem}
.appt-status-cancelled{color:var(--red);font-weight:600;font-size:.75rem;text-decoration:line-through}
/* Phase 1: out-of-window (un-bookable) calendar cells — tonal, not interactive */
.appt-cell-offwindow{background:repeating-linear-gradient(45deg,var(--bg),var(--bg) 6px,var(--tint-1) 6px,var(--tint-1) 12px);color:#2c2c2c;cursor:default;font-size:.9rem}
/* Calendar/manual-block conflict — slot exists but is unavailable (greyed + hatched + 🔒) */
.appt-cell-blocked{background:repeating-linear-gradient(45deg,rgba(200,70,50,.06),rgba(200,70,50,.06) 6px,rgba(200,70,50,.14) 6px,rgba(200,70,50,.14) 12px);color:#8a8a8a;cursor:not-allowed;font-size:.82rem;display:flex;align-items:center;justify-content:center}
.appt-xoffice-logo{width:24px;height:24px;object-fit:contain;pointer-events:none}
/* Customer booking link panel (top of the Appointments tab) */
.appt-booklink{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:10px 13px;margin-bottom:14px}
.appt-booklink-label{font-weight:700;font-size:.82rem;color:var(--blue2);white-space:nowrap}
.appt-booklink-url{flex:1;min-width:180px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:7px 9px;color:var(--text2);font-size:.76rem;font-family:ui-monospace,Menlo,Consolas,monospace}
.appt-booklink-btn{background:var(--blue2);color:var(--on-accent,#fff);border:none;border-radius:var(--r-md);padding:7px 15px;font-size:.8rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;white-space:nowrap}
.appt-booklink-btn:hover{filter:brightness(1.08)}
.appt-booklink-btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text2)}
/* Phase 1: appointment outcome badges + controls */
.appt-outcome{display:inline-block;padding:2px 8px;border-radius:var(--r-lg);font-size:.7rem;font-weight:700;text-transform:capitalize}
.appt-outcome-completed{background:rgba(39,174,96,.16);color:#52c785}
.appt-outcome-rescheduled{background:rgba(237,125,49,.16);color:#f0995a}
.appt-outcome-noshow{background:rgba(231,76,60,.16);color:#e9756a}
.appt-outcome-canceled{background:rgba(231,76,60,.12);color:#cf6b62;text-decoration:line-through}
.appt-outcome-sel{padding:4px 6px;background:var(--field-bg);color:var(--text);border:1.5px solid var(--field-border);border-radius:var(--r-sm);font-size:.74rem;cursor:pointer}
.appt-outcome-sel:focus{border-color:var(--blue2);outline:none}
.appt-resched-btn{padding:5px 10px;background:transparent;color:var(--blue2);border:1px solid var(--blue2);border-radius:var(--r-sm);font-size:.75rem;cursor:pointer;transition:all .15s;margin-right:6px}
.appt-resched-btn:hover{background:rgba(var(--blue2-rgb),.12)}
.appt-dsi-link{color:var(--blue2);cursor:pointer;font-weight:600;text-decoration:none}
.appt-dsi-link:hover{text-decoration:underline}
.appt-row-needsoutcome{background:rgba(237,125,49,.05)}
/* Phase 1: appointment grid — available-slot pill, in-cell glyphs, per-activator legend */
.appt-avail-pill{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:var(--r-md);font-size:.6rem;font-weight:700;background:rgba(39,174,96,.16);color:#52c785;letter-spacing:.2px}
.appt-cell-glyphs{display:flex;align-items:center;justify-content:center;gap:3px;margin-top:3px;flex-wrap:wrap}
.appt-svc-glyph{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:var(--r-sm);font-size:.6rem;font-weight:800;line-height:1}
.appt-svc-glyph.svc-w{background:rgba(91,155,213,.22);color:#7db4e6}
.appt-svc-glyph.svc-a{background:rgba(112,173,71,.22);color:#8fce63}
.appt-svc-glyph.svc-f{background:rgba(237,125,49,.22);color:#f0995a}
.appt-dev-badge{font-size:.6rem;font-weight:800;color:var(--text2);background:rgba(255,255,255,.07);padding:0 4px;border-radius:var(--r-sm)}
.appt-src-badge{font-size:.66rem;margin-left:5px;vertical-align:1px;cursor:default;opacity:.92}
.appt-oc-glyph{font-weight:800;font-size:.72rem}
.appt-oc-glyph.oc-done{color:#52c785}
.appt-oc-glyph.oc-noshow{color:#e9756a}
.appt-oc-glyph.oc-resched{color:#f0995a}
.appt-oc-glyph.oc-canc{color:#cf6b62}
.appt-legend{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px;padding:10px 12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md)}
.appt-leg-item{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text);cursor:pointer;padding:2px 8px;border-radius:var(--r-lg);transition:background .12s}
.appt-leg-item:hover{background:var(--tint-2)}
.appt-leg-item.appt-leg-dim{opacity:.4}
.appt-leg-dot{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.appt-leg-count{font-weight:800;font-size:.72rem;color:var(--text2);background:var(--tint-2);min-width:18px;text-align:center;padding:0 5px;border-radius:var(--r-md)}
/* ── Appointment type: Activation vs Order Issue (2026-07-31) ──────────────────
   Option 2C: the activator's colour bar STAYS (it's how people are told apart on the
   all-activators view), and an order issue adds an amber wash + an ISSUE badge on top.
   Amber is reused from the existing rotting/at-risk vocabulary elsewhere in the portal —
   "needs attention", not "error". Every rule below is additive: an activation renders
   exactly as it did before. */
.appt-cell-booked.appt-cell-issue{background:rgba(217,150,60,.30)}
.appt-agenda-row.appt-cell-issue{background:rgba(217,150,60,.10)}
.appt-issue-chip{display:inline-flex;align-items:center;gap:4px;font-size:.6rem;font-weight:800;
  color:#e0a951;background:rgba(217,150,60,.18);padding:0 5px;border-radius:var(--r-sm);line-height:1.5;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appt-issue-chip svg{width:9px;height:9px;flex-shrink:0}
.appt-type-badge{display:inline-flex;align-items:center;gap:3px;font-size:.58rem;font-weight:800;
  letter-spacing:.04em;color:#e0a951;background:rgba(217,150,60,.18);border:1px solid rgba(217,150,60,.35);
  padding:0 5px;border-radius:var(--r-sm);margin-left:5px;vertical-align:1px}
.appt-type-badge svg{width:9px;height:9px}
/* Table pill — both types get one here: in a long sortable column, "no badge" reads as
   missing data rather than as "activation". */
.appt-type-pill{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;
  padding:2px 8px;border-radius:var(--r-lg);white-space:nowrap}
.appt-type-pill svg{width:10px;height:10px}
.appt-type-act{color:var(--text2);background:var(--inset-bg,rgba(127,127,127,.14))}
.appt-type-issue{color:#e0a951;background:rgba(217,150,60,.16);border:1px solid rgba(217,150,60,.32)}
.appt-issue-cat{border-bottom:1px dotted var(--text2);cursor:help}
/* Booking modal: the Order Issue half of the type toggle, and an amber accent on the whole
   modal once that type is selected, so you can't fill the form thinking it's an activation. */
/* Not scoped to #appt-booking-modal: .abm-type-seg .abm-seg-issue.active (0,3,0) already
   outranks the generic .abm-seg-btn.active (0,2,0), and keeping it id-free means the
   offline preview renders the real colour. */
.abm-type-seg .abm-seg-issue.active{background:#c8892e;color:#fff}
#appt-booking-modal.abm-issue .modal{border-color:rgba(217,150,60,.45)}
.abm-opt-hint{font-weight:400;color:var(--text2);font-size:.78em}
/* "Booked By" column — who created the appointment. */
.appt-booker{font-size:.8rem;color:var(--text2);white-space:nowrap}
.appt-booker-self{display:inline-flex;align-items:center;gap:4px;color:#7db4e6}
.appt-booker-self svg{width:11px;height:11px}
/* Outcome modal: which type you're marking. */
.ao-type-line{display:flex;align-items:center;gap:6px;margin-bottom:12px;padding:7px 11px;font-size:.8rem;
  color:#e0a951;background:rgba(217,150,60,.12);border:1px solid rgba(217,150,60,.28);border-radius:var(--r-md)}
.ao-type-line svg{width:13px;height:13px}
/* Light mode: the amber fills above are tuned for the dark surface and turn muddy on white. */
html[data-theme="light"] .appt-cell-booked.appt-cell-issue{background:rgba(217,150,60,.22)}
html[data-theme="light"] .appt-agenda-row.appt-cell-issue{background:rgba(217,150,60,.08)}
html[data-theme="light"] .appt-issue-chip,
html[data-theme="light"] .appt-type-badge,
html[data-theme="light"] .appt-type-issue,
html[data-theme="light"] .ao-type-line{color:#8a5a12;background:rgba(217,150,60,.20)}
/* Light mode: the W/A/F service glyphs. Dark uses a pale letter on a 22% tint — over the
   light-mode booked cell (rgba(31,78,120,.38) on white ≈ #aabccc) that pale letter lands
   within a few points of its own chip and disappears. Same inversion as the status badges
   above: OPAQUE soft tint + saturated dark text of the same hue. The greens/oranges run a
   shade darker than the .badge-* equivalents because the glyph is 9.6px — WCAG normal-text
   size, so it needs 4.5:1, which the house #1a7a44/#b5541a miss by a hair at this scale. */
html[data-theme="light"] .appt-svc-glyph.svc-w{background:#c5d8eb;color:#1a4e78; box-shadow:inset 0 0 0 1px #8eacc6,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .appt-svc-glyph.svc-a{background:#bfe0ca;color:#146a3b; box-shadow:inset 0 0 0 1px #88ba9c,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
html[data-theme="light"] .appt-svc-glyph.svc-f{background:#f0d3be;color:#974514; box-shadow:inset 0 0 0 1px #d4a688,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
/* The ×N device badge sits in the same glyph row; its rgba(255,255,255,.07) fill is a
   dark-theme lightener and renders as nothing on light, leaving a bare number next to
   three solid chips. */
html[data-theme="light"] .appt-dev-badge{background:rgba(15,23,42,.08);color:#475569}
/* The "N open" slot pill in the day header — a chip, so it takes the same tint + dark
   text treatment as the glyphs above (its green matches .svc-a). */
html[data-theme="light"] .appt-avail-pill{background:#bfe0ca;color:#146a3b; box-shadow:inset 0 0 0 1px #88ba9c,inset 0 1px 0 rgba(255,255,255,.6),0 1px 1.5px rgba(15,23,42,.09);}
/* Outcome marks (✓ completed · ✗ no-show · ↻ rescheduled · ⊘ canceled). These are bare
   inline glyphs with no chip behind them, so they're read straight against the booked
   cell — rgba(31,78,120,.38) over --surface, about #a4b6c8. That's a MID tone, not a
   light one, so these run darker than the light-theme badge palette: #b3261e-on-#a4b6c8
   is only 3.3:1. The values below clear 4.5:1 there, and gain contrast rather than lose
   it on the lighter amber issue-cell wash. */
html[data-theme="light"] .appt-oc-glyph.oc-done{color:#0f4d2a}
html[data-theme="light"] .appt-oc-glyph.oc-noshow{color:#8c1d13}
html[data-theme="light"] .appt-oc-glyph.oc-resched{color:#6f3405}
html[data-theme="light"] .appt-oc-glyph.oc-canc{color:#7a2118}
/* Phase 2 #1a: Booking Performance panel */
.appt-metrics-wrap{margin-bottom:16px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:14px 16px}
.appt-metrics-summary{font-size:.92rem;font-weight:800;cursor:pointer;color:var(--text);list-style:none;margin-bottom:12px}
.appt-metrics-summary::-webkit-details-marker{display:none}
.appt-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.appt-metric{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-md);padding:12px 14px;text-align:center}
.appt-metric-val{font-size:1.9rem;font-weight:800;line-height:1.1}
.appt-metric-lbl{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-top:4px}
.appt-metric-sub{font-size:.68rem;color:var(--text2);margin-top:3px;opacity:.85}
.appt-metric-acts{margin-top:14px;border-top:1px solid var(--border);padding-top:10px}
.appt-metric-acts-hdr{font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--text2);margin-bottom:8px}
.appt-metric-act-row{display:flex;align-items:center;gap:14px;padding:5px 0;font-size:.82rem;border-bottom:1px solid var(--rule-1)}
.appt-metric-act-name{flex:1;font-weight:600;color:var(--text)}
.appt-metric-act-stat{font-weight:700;color:var(--text2);min-width:62px;text-align:right;font-variant-numeric:tabular-nums}
/* Phase 2 #6: Week | Day | All-Activators switcher */
.appt-view-toggle{display:flex;gap:6px}
.appt-view-btn{padding:6px 13px;border-radius:var(--r-md);border:1px solid var(--border);background:var(--surface);color:var(--text2);font-size:11px;font-weight:700;cursor:pointer;letter-spacing:.04em;user-select:none;white-space:nowrap}
.appt-view-btn:hover{border-color:var(--blue2)}
.appt-view-btn.active{background:var(--blue2);border-color:var(--blue2);color:var(--on-accent)}
/* Phase 2 #6: All-Activators side-by-side day grid */
.appt-allact-grid{display:grid;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.appt-allact-name{font-size:.74rem;font-weight:800;line-height:1.1}
.appt-allact-load{font-size:.66rem;font-weight:700;color:var(--text2);margin-top:3px;font-variant-numeric:tabular-nums}
/* Phase 2 #6: Day agenda */
.appt-agenda{margin-bottom:16px;display:flex;flex-direction:column;gap:8px}
.appt-agenda-row{display:flex;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:10px 14px}
.appt-agenda-time{font-size:.86rem;font-weight:800;color:var(--text);min-width:74px;font-variant-numeric:tabular-nums}
.appt-agenda-main{flex:1;min-width:0}
.appt-agenda-cust{font-size:.9rem;font-weight:700;color:var(--text)}
.appt-agenda-sub{font-size:.74rem;color:var(--text2);margin-top:3px;display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.appt-agenda-status{text-align:right;white-space:nowrap}
/* Phase 3 #4: lifecycle Path chevron */
.appt-path{display:flex;align-items:center;flex-wrap:wrap;margin-top:9px}
.appt-path-step{position:relative;font-size:.62rem;font-weight:800;text-transform:uppercase;letter-spacing:.3px;padding:4px 11px 4px 15px;margin-left:-6px;background:#262626;color:#585858;white-space:nowrap;clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%, 7px 50%)}
.appt-path-step:first-child{margin-left:0;padding-left:11px;clip-path:polygon(0 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 0 100%)}
.appt-path-step.st-done{background:#33445a;color:#c3d0dd}
.appt-path-step.st-active{background:var(--blue2);color:var(--on-accent)}
.appt-path-step.st-pending{background:#212121;color:#4f4f4f}
.appt-path-step.st-done-green{background:#2f7d52;color:#eafff2}
.appt-path-step.st-done-red{background:#9e4039;color:#ffeceb}
.appt-path-step.st-done-amber{background:#b5702f;color:#fff5ea}
.appt-path-step.st-done-canc{background:#6e3a36;color:#f0d7d4}
/* Phase 2 #6: Booking-utilization strip */
.appt-util{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:12px 16px;margin-bottom:16px}
.appt-util-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.appt-util-title{font-size:.86rem;font-weight:800;color:var(--text)}
.appt-util-summary{font-size:.84rem;color:var(--text2);font-variant-numeric:tabular-nums}
.appt-util-note{font-size:.78rem;color:var(--text2);font-style:italic}
.appt-util-bar{height:9px;border-radius:var(--r-md);background:var(--tint-2);overflow:hidden;margin-top:9px}
.appt-util-bar-fill{height:100%;border-radius:var(--r-md);transition:width .3s}
.appt-util-acts-wrap{margin-top:10px}
.appt-util-acts-sum{font-size:.74rem;font-weight:700;color:var(--text2);cursor:pointer;list-style:none}
.appt-util-acts-sum::-webkit-details-marker{display:none}
.appt-util-acts-sum:before{content:'▸ ';font-size:.7rem}
.appt-util-acts-wrap[open] .appt-util-acts-sum:before{content:'▾ '}
.appt-util-act{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:.8rem}
.appt-util-act-name{flex:0 0 130px;color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.appt-util-actbar{flex:1;height:7px;border-radius:var(--r-sm);background:var(--tint-2);overflow:hidden}
.appt-util-actbar-fill{height:100%;border-radius:var(--r-sm)}
.appt-util-act-num{flex:0 0 auto;color:var(--text2);font-weight:700;font-variant-numeric:tabular-nums;min-width:46px;text-align:right}
.appt-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.appt-form-input{width:100%;padding:9px 12px;background:var(--field-bg);color:var(--text);border:1.5px solid var(--field-border);border-radius:var(--r-md);font-size:.88rem}
.appt-form-input:focus{border-color:var(--blue2);outline:none}
.appt-checkbox-row{display:flex;gap:16px;flex-wrap:wrap;margin-top:6px}
.appt-chk{display:flex;align-items:center;gap:6px;font-size:.85rem;color:var(--text);cursor:pointer}
.appt-chk input{accent-color:var(--blue2)}
/* Phase 3 #1: booking-modal redesign — sections, When segmented control,
   soonest-available chip, balance + same-day inline toggles */
.appt-nextmode-hint{font-size:.72rem;color:var(--text2);font-weight:400}
.abm-section{margin-bottom:4px}
.abm-section-title{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.7px;color:var(--blue2);margin-bottom:12px}
.abm-divider{height:1px;background:var(--border);margin:20px 0}
.abm-inline-chk{display:flex;align-items:center;gap:7px;margin-top:10px;font-size:.82rem;color:var(--text)}
.abm-inline-chk input{accent-color:var(--blue2)}
.abm-sameday-chk input{accent-color:#ED7D31}
.abm-seg{display:flex;gap:6px;background:var(--inset-bg);border:1px solid var(--field-border);border-radius:var(--r-md);padding:4px}
.abm-seg-btn{flex:1;padding:9px 14px;border:none;border-radius:var(--r-md);background:transparent;color:var(--text2);font-size:.84rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap}
.abm-seg-btn:hover{color:var(--text)}
.abm-seg-btn.active{background:var(--blue2);color:var(--on-accent)}
.abm-soonest-chip{padding:16px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-lg);font-size:.92rem;text-align:center}
.abm-chip-muted{color:var(--text2)}
.abm-chip-ok{color:var(--text)}
.abm-chip-ok b{color:#52c785}
/* Phase 3 #1: booking-modal visual pass (scoped to #appt-booking-modal) */
#appt-booking-modal .modal{padding:26px 28px 24px;border-radius:var(--r-lg);border-color:var(--rule-2);box-shadow:var(--e-3)}
#appt-booking-modal h3{font-size:1.18rem;font-weight:800;margin-bottom:20px;letter-spacing:.2px}
#appt-booking-modal .modal-close{font-size:1.15rem}
#appt-booking-modal .appt-form-grid{gap:14px 16px}
#appt-booking-modal .field{margin-bottom:0}
#appt-booking-modal .appt-form-input{padding:11px 13px;border-radius:var(--r-md);background:var(--field-bg);border-color:var(--field-border);font-size:.9rem;transition:border-color .15s,box-shadow .15s}
#appt-booking-modal .appt-form-input:focus{border-color:var(--blue2);box-shadow:0 0 0 3px rgba(var(--blue2-rgb),.16)}
#appt-booking-modal select.appt-form-input{cursor:pointer}
/* custom checkboxes — replace the raw white browser boxes */
#appt-booking-modal input[type=checkbox]{appearance:none;-webkit-appearance:none;width:19px;height:19px;border:1.5px solid #4a4a4a;border-radius:var(--r-md);background:var(--field-bg);cursor:pointer;position:relative;flex-shrink:0;margin:0;transition:all .15s}
#appt-booking-modal input[type=checkbox]:hover{border-color:var(--blue2)}
#appt-booking-modal input[type=checkbox]:checked{background:var(--blue2);border-color:var(--blue2)}
#appt-booking-modal input[type=checkbox]:checked::after{content:'';position:absolute;left:5.5px;top:2px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* checkbox labels: undo the global .field label block/uppercase bleed */
#appt-booking-modal .appt-chk{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;font-weight:500;text-transform:none;letter-spacing:normal;color:var(--text);margin-bottom:0;cursor:pointer}
#appt-booking-modal .abm-inline-chk{margin-top:12px}
#appt-booking-modal .abm-act-hint{align-items:center;gap:7px;margin-top:10px;padding:8px 12px;font-size:.8rem;font-weight:600;color:#7db4e6;background:rgba(var(--blue2-rgb),.1);border:1px solid rgba(var(--blue2-rgb),.25);border-radius:var(--r-md)}
/* service options as selectable pills */
#appt-booking-modal .appt-checkbox-row{gap:10px}
#appt-booking-modal .appt-checkbox-row .appt-chk{padding:9px 14px;border:1.5px solid var(--field-border);border-radius:var(--r-md);background:var(--field-bg);transition:all .15s}
#appt-booking-modal .appt-checkbox-row .appt-chk:hover{border-color:var(--blue2)}
#appt-booking-modal .appt-checkbox-row .appt-chk:has(input:checked){border-color:var(--blue2);background:rgba(var(--blue2-rgb),.12)}
/* per-product quantity picker (mirrors the customer booking page) */
#appt-booking-modal .abm-prod-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
#appt-booking-modal .abm-prod{display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--field-bg);border:1.5px solid var(--field-border);border-radius:var(--r-md);padding:10px 13px;transition:all .15s}
#appt-booking-modal .abm-prod.on{border-color:var(--blue2);background:rgba(var(--blue2-rgb),.12)}
#appt-booking-modal .abm-prod-tap{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;flex:1;min-width:0}
#appt-booking-modal .abm-prod-box{width:19px;height:19px;border-radius:var(--r-sm);border:1.5px solid var(--text2);flex:0 0 auto;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;transition:.12s}
#appt-booking-modal .abm-prod.on .abm-prod-box{background:var(--blue2);border-color:var(--blue2)}
#appt-booking-modal .abm-prod-name{font-size:.86rem;font-weight:500}
#appt-booking-modal .abm-prod.on .abm-prod-name{color:var(--blue2)}
#appt-booking-modal .abm-qty{display:flex;align-items:center;gap:0;flex:0 0 auto}
#appt-booking-modal .abm-qty.hidden{display:none}
#appt-booking-modal .abm-qty button{width:30px;height:30px;border-radius:var(--r-md);border:1px solid var(--field-border);background:var(--inset-bg);color:var(--text);font-size:17px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
#appt-booking-modal .abm-qty button:hover{border-color:var(--blue2)}
#appt-booking-modal .abm-qty .abm-n{min-width:32px;text-align:center;font-size:.92rem;font-weight:700}
/* same-day override: subtle amber callout box */
#appt-booking-modal .abm-sameday-chk{margin-top:12px;padding:10px 13px;border:1px solid rgba(237,125,49,.32);background:rgba(237,125,49,.07);border-radius:var(--r-md)}
#appt-booking-modal .abm-sameday-chk input[type=checkbox]{border-color:#ED7D31}
#appt-booking-modal .abm-sameday-chk input[type=checkbox]:checked{background:#ED7D31;border-color:#ED7D31}
#appt-booking-modal .abm-section-title{margin-bottom:14px}
#appt-booking-modal .abm-divider{margin:22px 0}
#appt-booking-modal .abm-seg{padding:5px}
#appt-booking-modal .abm-seg-btn{padding:10px 14px}
/* ── MOBILE (≤768px): full-screen modals + phone-friendly Appointments controls (slice 3) ── */
@media(max-width:768px){
  /* Every popup shares .modal — go edge-to-edge on phones so forms have room.
     !important beats the inline width/max-width styles on the booking/sched/resched
     modal divs AND the higher-specificity #appt-booking-modal .modal rule above. */
  .modal{max-width:none!important;width:100%!important;height:100%!important;max-height:100%!important;
    border-radius:0!important;border:none!important;box-shadow:none!important;
    padding:18px 16px calc(22px + env(safe-area-inset-bottom))!important;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .modal h3{font-size:1.12rem}
  .modal-close{font-size:1.5rem;padding:2px 8px;margin-top:-2px}
  /* 16px inputs stop iOS zoom-on-tap (beats #appt-booking-modal .appt-form-input above) */
  .modal input,.modal select,.modal textarea,.modal .appt-form-input,
  #appt-booking-modal .appt-form-input,#appt-booking-modal select.appt-form-input{font-size:16px!important}
  /* Appointments controls — stack cleanly, full-width Book, bigger toggle/nav */
  .appt-controls{flex-direction:column;align-items:stretch;gap:12px}
  .appt-nav{justify-content:space-between}
  .appt-nav-btn{padding:9px 16px;font-size:1rem}
  .appt-week-label{min-width:0;flex:1}
  .appt-view-toggle{width:100%}
  .appt-view-btn{flex:1;padding:11px 6px;font-size:12px;text-align:center}
  .appt-filter-row{width:100%;flex-direction:column;align-items:stretch}
  .appt-select{width:100%;font-size:16px;padding:11px 12px}
  .appt-book-btn{width:100%;padding:14px 16px;font-size:1rem}
  /* Week grid stays default — momentum side-scroll on iOS */
  .appt-cal-outer{-webkit-overflow-scrolling:touch}
  /* ── Slice 4: wide data tables — pin the FIRST column (rep Name / Rep) so the
     row's identifier stays visible while the rest of the row side-scrolls.
     Covers Master Tracker + all 5 call tables (table.call-table) and Training
     (table.tr-table). The wrappers already scroll (overflow-x:auto); here we add
     momentum scroll + an opaque pinned column, z-index-layered against the
     existing sticky header row (th is position:sticky;top:0;z-index:2). */
  .tbl-wrap,.call-table-wrap,.tr-wrap{-webkit-overflow-scrolling:touch}
  .call-table td:first-child,.tr-table td:first-child{
    position:sticky;left:0;z-index:1;background:var(--surface);
    box-shadow:inset -1px 0 0 rgba(255,255,255,.08)}
  .call-table th:first-child,.tr-table th:first-child{
    position:sticky;left:0;z-index:3;background:var(--surface2);
    box-shadow:inset -1px 0 0 rgba(255,255,255,.08),inset 0 -1px 0 rgba(255,255,255,.08)}
}
/* Phase 3: booking-availability toggle in Manage My Schedule */
#appt-sched-modal .sc-bookable-box{padding:13px 15px;background:rgba(var(--blue2-rgb),.08);border:1px solid rgba(var(--blue2-rgb),.28);border-radius:var(--r-lg);margin-bottom:18px}
#appt-sched-modal .sc-bookable-box .appt-chk{font-size:.92rem;color:var(--text)}
#appt-sched-modal .sc-bookable-box input[type=checkbox]{accent-color:var(--blue2);width:17px;height:17px}
#appt-sched-modal .sc-bookable-hint{font-size:.76rem;color:var(--text2);margin-top:7px;line-height:1.45}
.appt-sched-row{display:flex;align-items:center;gap:12px;margin-bottom:10px;flex-wrap:wrap}
.appt-day-toggle{display:flex;align-items:center;gap:7px;min-width:110px;font-size:.85rem;cursor:pointer}
.appt-day-times{display:flex;align-items:center;gap:8px}
.appt-time-inp{padding:6px 10px;background:var(--field-bg);color:var(--text);border:1.5px solid var(--field-border);border-radius:var(--r-md);font-size:.85rem;width:100px}
.appt-time-inp:focus{border-color:var(--blue2);outline:none}
.appt-block-add-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;padding:10px;background:var(--surface2);border-radius:var(--r-md)}
.appt-block-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:1px solid var(--border);font-size:.82rem}
.appt-block-date{color:var(--text);font-weight:600;min-width:80px}
.appt-block-time{color:var(--text2);min-width:90px}
.appt-block-reason{color:var(--text2);flex:1}
.ss-contact-save .ps-btn{padding:8px 18px;font-size:12px;white-space:nowrap}
@media(max-width:768px){.ss-contact-save{width:100%;margin-left:0}.ss-contact-save .ps-btn{flex:1}}

/* ── FIBER INSTALL CALENDAR ─────────────────────────────────────────────────
   Month grid keyed on the Tableau scheduled install date. Colors are applied
   inline per-status from FIB_STATUS in app.fiber.js, so the rules here only
   handle layout/structure. */
.fib-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.fib-nav{display:flex;align-items:center;gap:6px}
.fib-navbtn{background:var(--surface2);border:1px solid var(--border);color:var(--text);border-radius:var(--r-md);padding:5px 9px;cursor:pointer;display:flex;align-items:center}
.fib-navbtn:hover{background:var(--surface3,var(--surface2));border-color:var(--blue2)}
.fib-month{font-size:1.05rem;font-weight:700;min-width:172px;text-align:center}
.fib-todaybtn{background:transparent;border:1px solid var(--border);color:var(--text2);border-radius:var(--r-md);padding:5px 11px;font-size:.78rem;cursor:pointer;margin-left:4px}
.fib-todaybtn:hover{color:var(--text);border-color:var(--blue2)}
.fib-counts{display:flex;gap:8px;flex-wrap:wrap}
.fib-count{font-size:.78rem;color:var(--text2);background:var(--surface2);border:1px solid var(--border);border-radius:var(--r-pill);padding:3px 11px}
.fib-count-warn{background:#fb923c;color:#7c2d12;border-color:#fb923c;font-weight:700}

.fib-filter{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.fib-fbtn{display:inline-flex;align-items:center;gap:6px;background:var(--surface2);border:1px solid var(--border);color:var(--text2);border-radius:var(--r-pill);padding:5px 12px;font-size:.78rem;font-weight:600;cursor:pointer}
.fib-fbtn:hover{color:var(--text);border-color:var(--blue2)}
.fib-fbtn.active{background:var(--blue2);color:var(--on-accent,#fff);border-color:var(--blue2)}
.fib-fcount{font-size:.68rem;font-weight:800;background:rgba(0,0,0,.16);border-radius:var(--r-pill);padding:0 6px;min-width:16px;text-align:center}
.fib-fbtn.active .fib-fcount{background:rgba(255,255,255,.25)}
.fib-legend{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.fib-legend-item{display:flex;align-items:center;gap:5px;font-size:.72rem;color:var(--text2)}
.fib-swatch{width:11px;height:11px;border-radius:var(--r-sm);display:inline-block;border:1px solid rgba(0,0,0,.15)}

.fib-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.fib-dow{background:var(--surface2);color:var(--text2);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;text-align:center;padding:7px 2px}
.fib-cell{background:var(--surface);min-height:96px;padding:5px 5px 7px;display:flex;flex-direction:column;gap:3px}
.fib-cell-blank{background:var(--surface2);opacity:.45}
.fib-cell-today{box-shadow:inset 0 0 0 2px var(--blue2), inset 0 0 0 999px var(--blue2-faint)}
.fib-daynum{font-size:.75rem;color:var(--text2);font-weight:700;align-self:flex-start;padding:1px 5px;border-radius:var(--r-sm);min-width:20px;text-align:center}
.fib-cell-has .fib-daynum{cursor:pointer}
.fib-cell-has .fib-daynum:hover{background:var(--surface2);color:var(--text)}
.fib-cell-today .fib-daynum{background:var(--blue2);color:var(--on-accent,#0b1220);border-radius:var(--r-pill)}
.fib-cell-has.fib-cell-today .fib-daynum:hover{background:var(--blue2);color:var(--on-accent,#0b1220)}
.fib-chip{font-size:.68rem;font-weight:700;border-radius:var(--r-sm);padding:2px 6px;cursor:pointer;letter-spacing:.02em;display:flex;align-items:center;gap:4px}
.fib-chip:hover{filter:brightness(.94)}
.fib-chip-l{display:inline-flex;align-items:center;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* CRU/IRU marker — pinned to the far right of the chip. */
.fib-cru{margin-left:auto;flex:none;font-size:.56rem;font-weight:800;letter-spacing:.03em;border-radius:var(--r-sm);padding:0 3px;vertical-align:1px}
.fib-cru-c{background:rgba(0,0,0,.42);color:#fff}
.fib-cru-i{background:rgba(255,255,255,.55);color:#1e293b;border:1px solid rgba(0,0,0,.2)}
.fib-cru-o{background:rgba(0,0,0,.28);color:#fff}
.fib-more{font-size:.66rem;color:var(--text2);cursor:pointer;padding:1px 6px}
.fib-more:hover{color:var(--blue2);text-decoration:underline}

.fib-pill{display:inline-block;font-size:.68rem;font-weight:700;border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap}
/* Upgrade marker on a calendar chip — a compact dark tag before the DSI. */
.fib-upg{display:inline-block;font-size:.56rem;font-weight:800;letter-spacing:.03em;background:rgba(0,0,0,.32);color:#fff;border-radius:var(--r-sm);padding:0 3px;margin-right:4px;vertical-align:1px}
/* New Internet vs Upgrade tag (detail modal + N/A table). */
.fib-type{display:inline-block;font-size:.66rem;font-weight:700;border-radius:var(--r-pill);padding:2px 9px;white-space:nowrap;border:1px solid transparent}
.fib-type-new{background:rgba(37,99,235,.14);color:#2563eb;border-color:rgba(37,99,235,.3)}
.fib-type-upg{background:rgba(124,58,237,.16);color:#7c3aed;border-color:rgba(124,58,237,.32)}
/* VoIP marker on a calendar chip — small headset glyph + count, right-aligned. */
.fib-voip{display:inline-flex;align-items:center;gap:2px;font-size:.58rem;font-weight:800;opacity:.85;margin-left:4px;vertical-align:1px}
.fib-voip .ico{width:9px;height:9px}
.fib-nacount{background:var(--tint-3);border-radius:var(--r-pill);padding:1px 9px;font-size:.72rem;margin-left:7px}
.fib-na-wrap{overflow-x:auto}
.fib-na-table{width:100%;border-collapse:collapse;font-size:.82rem}
.fib-na-table th{text-align:left;font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--text2);padding:7px 9px;border-bottom:2px solid var(--border);white-space:nowrap}
.fib-na-table td{padding:8px 9px;border-bottom:1px solid var(--border);color:var(--text)}
.fib-na-table tbody tr{cursor:pointer}
.fib-na-table tbody tr:hover{background:var(--surface2)}
.fib-na-dsi{font-family:Consolas,'Courier New',monospace;font-weight:700;color:var(--accent2b)}

.fib-daylist{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.fib-dayrow{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--border);border-radius:var(--r-md);cursor:pointer}
.fib-dayrow:hover{background:var(--surface2);border-color:var(--blue2)}
.fib-dayrow-cust{flex:1;font-size:.85rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fib-detail{margin-top:10px;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.fib-drow{display:flex;justify-content:space-between;gap:12px;padding:8px 11px;border-bottom:1px solid var(--border);font-size:.85rem}
.fib-drow:last-child{border-bottom:none}
.fib-dlabel{color:var(--text2);text-transform:uppercase;font-size:.68rem;letter-spacing:.05em;font-weight:700;padding-top:2px}
.fib-dval{text-align:right}
.fib-moved{display:inline-block;font-size:.6rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;background:#fb923c;color:#7c2d12;border-radius:var(--r-sm);padding:1px 5px;vertical-align:1px}
.fib-tnote{border:1px solid var(--border);border-radius:var(--r-md);padding:9px 11px;font-size:.85rem;line-height:1.5;white-space:pre-wrap;background:var(--surface2)}
.fib-muted{color:var(--text2);font-style:italic}

@media (max-width:768px){
  .fib-cell{min-height:72px;padding:3px}
  .fib-chip{font-size:.6rem;padding:1px 4px}
  .fib-month{min-width:132px;font-size:.92rem}
  .fib-dow{font-size:.6rem}
}

/* ── PERF: data painted from the previous session, not yet reconfirmed ───────────
   Set on #main-content by _markDataStale() when loadData() instant-paints a cached
   blob, cleared by _markDataFresh() the moment the live fetch lands (usually 2-4s).
   Deliberately QUIET: this is REAL data the rep can start reading, not an error --
   it must not shout, and it must not shift layout (no borders, no size changes).
   Honours prefers-reduced-motion: the pulse is decoration, the dimming is the signal. */
#main-content.data-unconfirmed{opacity:.72;transition:opacity .25s ease}
#main-content.data-unconfirmed::before{content:'Showing your last session\2019 s data \2014  updating\2026 ';
  display:block;margin:0 0 10px;padding:6px 11px;border-radius:var(--r-sm,6px);
  background:var(--tint-1);color:var(--text2);font-size:.74rem;letter-spacing:.02em;
  animation:dataUnconfirmedPulse 1.6s ease-in-out infinite}
@keyframes dataUnconfirmedPulse{0%,100%{opacity:.75}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){
  #main-content.data-unconfirmed::before{animation:none}
  #main-content.data-unconfirmed{transition:none}
}
/* ── LOADING / ERROR variants of the shared empty state ─────────────────────────
   A tab has three ways to show no content: empty, loading, failed. They now share one
   shape so the view does not jump when data lands. Only the icon treatment differs —
   the message and layout are identical, which is the whole point.
   ⚠ The error icon is tinted, NOT the message: text never wears the data colour. */
.empty-state.is-loading .empty-ico{opacity:.65;animation:emptyPulse 1.5s ease-in-out infinite}
.empty-state.is-error .empty-ico{color:var(--red,#e0685f);background:rgba(224,104,95,.10)}
.empty-state.is-error .empty-msg{color:var(--text)}
@keyframes emptyPulse{0%,100%{opacity:.45}50%{opacity:.9}}
@media (prefers-reduced-motion: reduce){
  .empty-state.is-loading .empty-ico{animation:none}
}

/* ── ADMIN PORTAL · ERROR LOG (2026-08-05) ───────────────────────────────────
   ⚠ Uses the tint, rule and text2 vars throughout rather than fixed rgba, because those
   FLIP POLARITY between themes (white-alpha in dark, navy-alpha in light). A master-admin
   ⚠⚠ NEVER write a glob like "tint-star-slash-rule" inside a CSS comment — the star-slash
   sequence CLOSES the comment, the rest parses as garbage, and CSS error recovery silently
   eats the next declaration. That is exactly how a white page shipped once; css_parse_check
   caught the identical mistake being made again here.
   defaults to dark today, but owners default to light and the theme is user-switchable, so
   a dark-tuned literal here would be the .empty-code mistake again. */
.ae-bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ae-f{min-width:0}
.ae-f-q{flex:1 1 260px}
.ae-stamp{font-size:.76rem;color:var(--text2);margin-left:auto}
.ae-table{width:100%}
.ae-table th{white-space:nowrap}
.ae-row{cursor:pointer}
.ae-row:hover td{background:var(--tint-1)}
.ae-row.is-open td{background:var(--tint-2)}
.ae-when{white-space:nowrap;color:var(--text2);font-size:.8rem;font-variant-numeric:tabular-nums}
/* The code is the thing you scan for, so it gets the monospace treatment the error card
   uses — one visual vocabulary for a code wherever it appears. */
.ae-code{display:inline-block;padding:2px 8px;border-radius:var(--r-sm,6px);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.72rem;
  font-weight:700;letter-spacing:.04em;white-space:nowrap;font-variant-numeric:tabular-nums}
/* Colour carries the CLASS of failure so a wall of rows is triageable at a glance:
   red = our bug or a lost write · amber = auth · blue = transport/data. */
.ae-c-red{background:rgba(224,104,95,.14);color:var(--red,#e0685f)}
.ae-c-amber{background:rgba(224,168,56,.14);color:#e0a838}
.ae-c-blue{background:rgba(var(--blue2-rgb),.14);color:var(--blue2)}
/* ⚠ var(--r-pill), not a literal 999px — the radius scale exists and scale_harness enforces
   it (only 50% and 0 may be literals, because a circle must track its element's size). */
.ae-ent{display:inline-block;padding:1px 7px;border-radius:var(--r-pill);font-size:.68rem;font-weight:700;
  letter-spacing:.03em;white-space:nowrap;box-shadow:inset 0 0 0 1px var(--rule-1);color:var(--text2)}
.ae-ent-salessupport{color:#e0a838;box-shadow:inset 0 0 0 1px rgba(224,168,56,.35)}
.ae-msg{font-size:.78rem;color:var(--text2);margin-top:3px;line-height:1.4}
.ae-count{font-size:.8rem;color:var(--text2);margin:10px 14px 12px}
.ae-drow td{background:var(--tint-1);padding:0}
.ae-detail{padding:14px 16px;display:grid;gap:12px}
.ae-d-blk{min-width:0}
.ae-d-lbl{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text2);
  font-weight:700;margin-bottom:4px}
.ae-d-hint{text-transform:none;letter-spacing:0;font-weight:400;opacity:.8}
.ae-d-val{font-size:.82rem;color:var(--text);white-space:pre-wrap;word-break:break-word}
.ae-d-mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.74rem;
  background:var(--tint-1);border-radius:var(--r-sm,6px);padding:8px 10px;max-height:220px;overflow:auto}
/* ⚠ The snapshot is offered as COPYABLE TEXT, never rendered inline — injecting captured
   markup into the live page would let a captured style or an unclosed tag bleed into the
   portal's own layout. error_replay.html renders it in an isolated document. */
.ae-d-snap{width:100%;min-height:90px;max-height:200px;background:var(--tint-1);color:var(--text2);
  border:1px solid var(--rule-1);border-radius:var(--r-sm,6px);padding:8px 10px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;line-height:1.45}
/* ── the "already worked on" mark ───────────────────────────────────────────
   ⚠⚠ Every colour here is a token or an alpha wash over the surface, never a flat
   literal tuned against one theme. The .empty-code blue was hardcoded rgba tuned by
   eye in dark and read as a washed-out smudge in light; the tint and rule tokens
   flip polarity (white-alpha dark, navy-alpha light) and track the portal in both.
   ⚠ Ring is inset box-shadow, never border — a real border adds 2px regardless of
   box-sizing and shifts the table columns beside it. */
.ae-fx{display:inline-block;margin-left:6px;padding:1px 7px;border-radius:var(--r-pill);
  font-size:.66rem;font-weight:700;letter-spacing:.03em;white-space:nowrap;vertical-align:middle;
  box-shadow:inset 0 0 0 1px var(--rule-1);color:var(--text2);background:var(--tint-1)}
.ae-fx-working{color:#e0a838;background:rgba(224,168,56,.12);box-shadow:inset 0 0 0 1px rgba(224,168,56,.34)}
.ae-fx-fixed{color:var(--green,#5aab6e);background:rgba(90,171,110,.12);box-shadow:inset 0 0 0 1px rgba(90,171,110,.34)}
/* A regression is the one state that must never be quiet: it means a mark that says
   "handled" has just been proven wrong. */
.ae-fx-regress{color:var(--red,#e0685f);background:rgba(224,104,95,.16);
  box-shadow:inset 0 0 0 1px rgba(224,104,95,.42)}

/* Handled rows are DIMMED, not hidden — the filter is for hiding. ⚠ Applied to the
   cells, not the row: a <tr> opacity would fade the hover background with it. */
.ae-row.ae-r-done td{opacity:.55}
.ae-row.ae-r-done:hover td{opacity:1}
.ae-row.ae-r-regress td{box-shadow:inset 3px 0 0 -1px transparent}
.ae-row.ae-r-regress td:first-child{box-shadow:inset 3px 0 0 0 var(--red,#e0685f)}

.ae-fx-panel{background:var(--tint-1);border-radius:var(--r-sm,6px);padding:12px 14px;
  box-shadow:inset 0 0 0 1px var(--rule-1)}
.ae-fx-scope{font-size:.78rem;color:var(--text2);margin:2px 0 9px;line-height:1.45}
.ae-fx-known{font-size:.8rem;color:var(--text);margin-bottom:8px;line-height:1.5}
.ae-fx-note-read{font-size:.78rem;color:var(--text2);margin-top:3px}
.ae-fx-warn{font-size:.78rem;line-height:1.5;color:var(--red,#e0685f);
  background:rgba(224,104,95,.10);box-shadow:inset 0 0 0 1px rgba(224,104,95,.3);
  border-radius:var(--r-sm,6px);padding:8px 10px;margin-bottom:9px}
.ae-fx-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:8px}
.ae-fx-btn{font-size:.78rem}
.ae-fx-ver{flex:0 1 200px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.76rem}
.ae-fx-note{flex:1 1 280px;font-size:.8rem}
.ae-fx-saving{font-size:.78rem;color:var(--text2);margin-top:8px}
.ae-fx-panel code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--tint-2);padding:1px 5px;border-radius:var(--r-sm);font-size:.9em}

@media (max-width:768px){
  .ae-stamp{margin-left:0;width:100%}
  .ae-detail{padding:12px}
  .ae-fx-ver,.ae-fx-note{flex:1 1 100%}
}