/* Geist is SELF-HOSTED (see public/fonts/). This sheet named Geist in font-family but never loaded it,
   so the admin SPA also fell back to system-ui. A remote @import would be blocked by our CSP anyway
   (style-src 'self' / font-src 'self' data:, server.py). */
@font-face{font-family:"Geist";font-style:normal;font-weight:400;font-display:swap;src:url("/fonts/geist-400-NO4YIYBR.woff2") format("woff2");}
@font-face{font-family:"Geist";font-style:normal;font-weight:500;font-display:swap;src:url("/fonts/geist-500-2HVW4JIN.woff2") format("woff2");}
@font-face{font-family:"Geist";font-style:normal;font-weight:600;font-display:swap;src:url("/fonts/geist-600-APUZVQ3K.woff2") format("woff2");}
@font-face{font-family:"Geist";font-style:normal;font-weight:700;font-display:swap;src:url("/fonts/geist-700-AR3FNWJ5.woff2") format("woff2");}

/* ⚠ THE `hidden` ATTRIBUTE ONLY WORKS IF NOTHING OUTRANKS IT. The UA sheet's `[hidden] { display: none }`
   loses to ANY author `display` rule -- author beats UA regardless of specificity -- so every component
   that sets its own `display` silently makes `el.hidden = true` a no-op. It has been patched one selector
   at a time FOURTEEN times across the two sheets (.tab-group/.tab/.tab-child/.ec-roster/.op-bar + four
   .access-* here; .dp-panel/.flow-sheet/.shelf-cam/.shelf-review/.shelf-toast in portal.css), and the
   next case still shipped broken: the event-roster search set `hidden` on each
   non-matching row while `.ec-roster-row { display: flex }` kept all of them on screen, so the staffing
   picker reported "1 of 9" above nine visible ambassadors and showed "No ambassador matches that search"
   over a full list. A per-selector patch only ever fixes the case someone noticed; this fixes the class.
   `!important` is deliberate and is what every CSS reset uses here -- an element marked `hidden` must
   never render, and no author rule has a legitimate reason to overrule that. */
[hidden] {
  display: none !important;
}

:root {
  color-scheme: light;

  /* Brand accent — PER TENANT. Default = Clarity indigo (matches the design); tenant branding overrides. Chrome is neutral. */
  --accent: #5b5bd6;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 32%, #fff);
  --accent-strong: color-mix(in srgb, var(--accent) 70%, #000);
  --primary: var(--accent);
  --primary-soft: var(--accent-soft);

  /* Ink / text (Clarity) */
  --ink: #15171c;
  --text: #3a3f52;
  --muted: #6b7080;
  --faint: #8a90a0;

  /* Surfaces & lines (Clarity light chrome) */
  --surface: #ffffff;
  --surface-sub: #fafbfc;
  --surface-strong: #f3f4f7;
  --panel: #ffffff;
  --soft: #fafbfc;
  --sidebar-bg: #fcfcfd;
  --sidebar-muted: #6b7080;
  --line: #ececf1;
  --line-strong: #e0e1e8;
  --border: #ececf1;

  /* Status (semantic, NOT themed) */
  --ok: #137a47;   --ok-bg: #e7f6ee;   --ok-dot: #1f9d57;
  --info: #3a55c9; --info-bg: #eaf0fe;
  --attn: #c2410c; --attn-bg: #fdeee7; --attn-dot: #ea7a2e;
  --warn: #9a6700; --warn-bg: #fff8e6; --warn-dot: #e0a325;
  --done: #4b6a66; --done-bg: #eef4f4;
  --prop: #7c3aed; --prop-bg: #f3edfd;
  /* legacy aliases */
  --success: var(--ok);
  --warning: var(--warn);
  --danger: #b42318;
  --danger-soft: #fff1f0;
  /* Completes the status tone family: every other tone above defines -bg (and most a -dot), but
     danger only ever had -soft, so anything reaching for --danger-bg silently rendered a
     transparent background with a red border and read as a styling bug. --danger-soft stays as the
     back-compat alias — both names resolve to the same tint. */
  --danger-bg: var(--danger-soft);
  --danger-dot: color-mix(in srgb, var(--danger) 78%, #fff);
  --warm: #f4c95d;
  --focus: #5b8def;

  /* Distributor workspace tier + accent literals (handoff §6 — fixed colors, tokenized so
     they pass the raw-hex-in-CSS gate; the four tiers stay distinguishable). */
  --dw-org: #5b5bd6; --dw-org-ink: #4b4bc4; --dw-org-soft: #eeeefc; --dw-org-line: #dcdcfa;
  --dw-chain: #7c3aed; --dw-chain-ink: #6d28d9; --dw-chain-soft: #f3eafe; --dw-chain-line: #e4d3fb;
  --dw-loc: #2a6fdb; --dw-loc-ink: #2260c4; --dw-loc-soft: #e8f0fe; --dw-loc-line: #d2e2fb;
  --dw-rep: #cdd2dc; --dw-rep-ink: #5b6070; --dw-rep-line: #e4e6ec; --dw-rep-swatch: #9aa0ae;
  --dw-attn: #b5530f; --dw-danger: #c0392b; --dw-sub2: #fcfcfd; --dw-rep-row: #fdfdfe; --dw-chipct-bg: #f0f1f4;

  /* Longboard platform palette (login + platform-owner chrome only — NOT tenant-themed) */
  --lb-navy: #16384a;
  --lb-sunrise: #ed7d24;
  --lb-teal: #2f9aa8;
  --lb-cream: #f6f0e5;

  /* Partner brand-mark palette — categorical, used by .bmark-i/.bmark-b/.bmark-g/.bmark-p */
  --mark-indigo: #5b5bd6; --mark-blue: #2a6fdb; --mark-green: #1f8a5b; --mark-plum: #b8336a;
  /* Geography map pins -- FIXED semantic colours, never --accent (a tenant's brand colour would repaint
     what "available for sampling" looks like). Solid fill = available, hollow ring = not. */
  --map-sampling-on: #b8336a;
  --map-sampling-off: #6b7080;
  --map-pin-halo: #ffffff;
  /* ...and the type-of-location colours, used only when "Color pins by" is Type of location: warm =
     on-premise, cool = off-premise, neutral grey = not yet classified (never mistaken for either). */
  --map-type-on: #d9622b;
  --map-type-off: #2463c7;
  --map-type-unknown: #8a90a0;
  /* ...and the Ambassador reach squares, light to dark purple (1-2 thin / 3-5 / 6 or more; an unshaded
     square is nobody). The canvas sits in Google's overlayLayer pane, ABOVE the tiles and the labels baked
     into them, so how it blends decides whether town names stay readable. Measured on real tiles
     (2026-09-26): mix-blend-mode on the CANVAS does nothing -- the pane is its own stacking context, so the
     canvas only ever blended with an empty pane and read as a plain white-ish wash. geography-map.js
     therefore sets multiply on the PANE (only this canvas lives there; the pins are in overlayMouseTarget),
     which composites with the tiles: water, roads and dark labels keep their own colour and the squares tint
     the land, so the tint can be strong (--map-reach-opacity) and 1-2 stays visible at a two-state view. If
     the pane blend cannot be applied the canvas keeps the plain wash (--map-reach-opacity-plain), light
     enough that a normal blend (label contrast x (1 - a)) leaves town names readable. The ramp is the
     prototype's, one step deeper, tuned on the same tiles; the legend uses the multiplied opacity (over the
     white panel that is what a square over bare land looks like). No dark theme here; if it ever gets one,
     these need dark variants (the prototype has them). */
  --map-reach-1: #ddd3fb;
  --map-reach-2: #b9a4f2;
  --map-reach-3: #8a6be3;
  --map-reach-opacity: 0.9;
  --map-reach-opacity-plain: 0.35;
  /* Operating-as dark banner — intentionally its own palette (see .op-bar comment) */
  --op-bg: #0e2f38; --op-accent: #7fd6db; --op-meta: #8fc4cb;
  /* View-as-account read-only banner — its own amber palette, distinct from the partner teal above */
  --op-view-bg: #7c2d12; --op-view-accent: #fed7aa; --op-view-frame: #b45309;
  /* State border tints (derive from the semantic base so they track it) */
  --ok-line: color-mix(in srgb, var(--ok) 40%, #fff);
  --danger-line: color-mix(in srgb, var(--danger) 45%, #fff);
  --warn-line: color-mix(in srgb, var(--warn) 34%, #fff);
  --attn-line: color-mix(in srgb, var(--attn) 34%, #fff);
  /* Warm gold accents (border-lefts, not covered by --lb-sunrise) */
  --gold: #d59d19; --gold-soft: #d7bd77;

  --radius-sm: 8px;
  --radius: 11px;
  --radius-lg: 13px;
  --shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
  --shadow-soft: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);

  /* The letterbox behind a video. Deliberately near-black rather than a surface token: it is the
     absence of picture, and a white letterbox around a phone-shot portrait video reads as a broken
     player. Kept dark in every theme for the same reason every video player does.
     video-recorder.css carries the same value as its own literal ON PURPOSE -- it is loaded by the
     public apply page, which never loads this stylesheet, so it cannot reference this token. */
  --video-letterbox: #0b0d10;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--surface);
  color: var(--ink);
  font-family:
    "Geist", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
}

button,
input,
select,
textarea,
a {
  outline-color: var(--focus);
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 50;
  transform: translateY(-140%);
  border-radius: var(--radius);
  background: var(--accent);
  color: #fff;
  font-weight: 800;
  padding: 9px 12px;
  text-decoration: none;
  transition: transform 0.14s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

/* --- Boot cloak: render the CORRECT console on the first visible paint --------------------------
   Until /api/platform returns the current user's roleKeys the SPA doesn't know whether to show the
   platform-owner console, a brand workspace, or the partner console. Rather than paint the brand
   workspace and flip it once roles land (the "brand console flashes, then flips" the owner reported),
   hold the shell hidden behind a neutral splash while `body.booting` is set, then revealShell() drops
   the class the instant the right console is on screen. */
body.booting .shell { visibility: hidden; }
.boot-splash {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--surface);
  z-index: 60;
}
body.booting .boot-splash { display: flex; }
.boot-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.shell {
  display: grid;
  grid-template-columns: 276px minmax(0, 1fr);
  min-height: 100vh;
}

/* Mobile nav chrome — hidden on desktop; the sidebar becomes an off-canvas drawer < 900px (see the
   responsive block). Per docs/RESPONSIVE_SPEC: desktop-primary, mobile drawer for on-the-go tasks. */
.mobile-topbar {
  display: none;
}
.drawer-scrim {
  display: none;
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
  background: var(--sidebar-bg);
  color: var(--text);
  border-right: 1px solid var(--line);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: #fff;
  border-radius: var(--radius);
  font-weight: 800;
  font-size: 20px;
  box-shadow: var(--shadow-soft);
}

/* Platform-owner console chrome (IA Phase 3): visually distinct from a tenant workspace so the
   operator always knows they are in the platform console, not a brand's workspace. */
body.platform-console .brand-mark {
  background: var(--ink);
}
body.platform-console .brand p {
  color: var(--accent-strong);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 11px;
}

.brand h1,
.brand p,
.topbar h2,
.topbar p,
.section-head h3,
.section-head p,
.field-card h4 {
  margin: 0;
}

.brand h1 {
  font-size: 17px;
  line-height: 1.15;
}

.brand p {
  color: var(--muted);
  font-size: 12px;
  margin-top: 2px;
}

.tabs {
  display: grid;
  gap: 10px;
}

.tab-group {
  display: grid;
  gap: 4px;
}

.nav-section-label,
.sidebar-footer-label {
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin: 2px 8px 1px;
  text-transform: uppercase;
}

.tab,
.sidebar-footer button {
  width: 100%;
  border-radius: var(--radius);
  padding: 10px 12px;
  text-align: left;
}

.tab {
  color: var(--sidebar-muted);
  background: transparent;
  font-weight: 720;
  transition:
    background 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

.tab-parent {
  position: relative;
  font-weight: 800;
  padding-right: 34px;
}

.tab-parent::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-60%) rotate(45deg);
  opacity: 0.78;
  transition: transform 0.16s ease;
}

.tab-group.is-collapsed .tab-parent::after {
  transform: translateY(-50%) rotate(-45deg);
}

/* THE RULE THAT COLLAPSES. Everything else about this feature already existed -- the persisted state,
   the auto-open of the active section, the chevron transform above -- but nothing ever hid the
   children, so a collapsed group still listed all of them. */
.tab-group.is-collapsed .tab-submenu {
  display: none;
}

/* The section header IS the control. Deliberately still a header: label size, weight and uppercase
   come from .nav-section-label, because turning these into full nav rows would add nine bold lines to
   a sidebar the owner already finds too long. This adds only what a button needs. */
.nav-section-toggle {
  position: relative;
  display: block;
  width: calc(100% - 16px);
  padding-right: 22px;
  background: none;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  /* No `color` here on purpose: .nav-section-label supplies var(--faint), and declaring
     `color: inherit` in this later rule silently darkened all nine headers. The hover below is
     the affordance instead, so the resting sidebar looks exactly as it did. */
}

.nav-section-toggle::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: 0.7;
  transition: transform 0.16s ease;
}

.tab-group.is-collapsed .nav-section-toggle::after {
  transform: translateY(-50%) rotate(-45deg);
}

.nav-section-toggle:hover {
  color: var(--ink);
}

.nav-section-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .nav-section-toggle::after {
    transition: none;
  }
}

.tab-group {
  margin-top: 10px;
}
.tab-group:first-child {
  margin-top: 0;
}

.tab-submenu {
  display: grid;
  gap: 2px;
}

.tab-child {
  min-height: 34px;
  padding: 8px 12px;
  font-size: 13.5px;
  color: var(--sidebar-muted, var(--muted));
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Leading nav icons (design polish) — 18px glyph anchoring each row; brightens on the active row. */
.nav-ic {
  flex: none;
  opacity: 0.8;
}
.tab-child.is-active .nav-ic {
  opacity: 1;
}
.tab-child .nav-badge {
  margin-left: auto;
}

/* Upsell: a tier-locked nav item stays visible but muted with a lock hint; clicking it shows an
   "upgrade to unlock" nudge (navItemUpgradeBlocked) rather than navigating into a feature the tier
   can't use. Signals the feature exists on a higher plan. */
.tab.nav-locked {
  color: var(--faint);
}
.tab.nav-locked::after {
  content: "🔒";
  margin-left: 6px;
  font-size: 11px;
  opacity: 0.7;
}

/* In-page entitlement lock: an unentitled section grays + locks in place with an upgrade banner (the
   affirmative half of the "gray + lock, never toast" directive). Grays every direct child except the
   injected banner, and blocks interaction so a control that would just 403 can't be used. */
.field-card.section-locked > :not(.section-lock-banner) {
  opacity: 0.5;
  pointer-events: none;
  filter: grayscale(0.35);
  user-select: none;
}
.section-lock-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  padding: 10px 14px;
  border: 1px solid var(--border, rgba(0, 0, 0, 0.12));
  border-radius: 10px;
  background: var(--surface-strong);
  color: var(--muted);
  font-size: 13px;
}
.section-lock-banner::before {
  content: "🔒";
  font-size: 14px;
}
.section-lock-banner strong {
  color: var(--ink);
}

.tab:hover {
  color: var(--ink);
  background: var(--surface-strong);
}

.tab.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
}

.tab-child.is-active {
  color: var(--accent-strong);
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

.sidebar-footer {
  margin-top: auto;
  display: grid;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
/* Workspace search + user menu (tenant / save-state / Security / Sign out) relocated out of the topbar. */
.sidebar-search { display: grid; gap: 3px; }
.sidebar-search input {
  width: 100%;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface, #fff);
  color: var(--ink);
  font-size: 12.5px;
}
.sidebar-user-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 2px 4px; }
.sidebar-footer .save-status { font-size: 11.5px; }

.workspace {
  padding: 24px;
  min-width: 0;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  margin: -24px -24px 18px;
  padding: 16px 24px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}
/* Design polish: the screen's primary create sits top-right in the page header. */
.topbar-actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
/* The in-screen primary create is hidden when promoted to the header CTA (its secondary stays in-toolbar). */
.moved-to-header {
  display: none !important;
}

/* Clarity PageHeader breadcrumb (replaces the uppercase "OPERATIONS WORKSPACE" eyebrow). */
.topbar-crumb {
  margin: 0 0 4px;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.topbar h2 {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.topbar p {
  color: var(--muted);
  margin-top: 4px;
}

.topbar-title {
  min-width: 0;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.button-row,
.filter-line {
  display: flex;
  align-items: center;
  gap: 10px;
}

.top-action-buttons {
  flex-wrap: nowrap;
}

.save-status {
  color: var(--muted);
  font-size: 13px;
  min-height: 16px;
}

.tenant-context-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  font-size: 12px;
  font-weight: 700;
  max-width: 260px;
  overflow: hidden;
  padding: 7px 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.inline-status {
  color: var(--muted);
  font-size: 13px;
  min-height: 18px;
}

.muted {
  color: var(--muted);
  font-size: 12px;
}

.primary,
.secondary,
.ghost,
.danger {
  border-radius: var(--radius);
  min-height: 38px;
  padding: 9px 13px;
  white-space: nowrap;
  font-weight: 780;
  transition:
    background 0.14s ease,
    border-color 0.14s ease,
    color 0.14s ease,
    transform 0.14s ease;
}

.file-button {
  display: inline-grid;
  place-items: center;
  color: var(--ink);
  font-size: 14px;
  cursor: pointer;
}

.file-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.primary {
  background: var(--accent);
  color: #fff;
  box-shadow: var(--shadow-soft);
}

.primary:hover {
  background: var(--accent-strong);
}

.secondary {
  border: 1px solid var(--line-strong);
  background: #fff;
  color: var(--ink);
}

.ghost {
  background: transparent;
  color: var(--ink);
}

.danger {
  border: 1px solid var(--danger);
  background: var(--danger-soft);
  color: var(--danger);
}

.icon-action {
  min-width: 38px;
  color: var(--muted);
}

.full {
  text-align: center;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(120px, 1fr));
  gap: 10px;
  margin-bottom: 18px;
}

.metric,
.panel,
.field-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.metric {
  padding: 20px;
}

.metric span {
  display: block;
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.metric strong {
  display: block;
  margin-top: 6px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}

.metric small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.3;
}

.panel {
  display: none;
  padding: 18px;
}

.panel.is-visible {
  display: block;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
  padding-bottom: 2px;
}

.section-head h3 {
  font-size: 20px;
}

.section-head p {
  color: var(--muted);
  margin-top: 4px;
}

.control-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}

.control-grid.compact {
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  margin-bottom: 14px;
}

/* Replacement Tools sits in a full-span card, so the default auto-fit grid
   sprawls into 5-6 cramped columns. Cap it at three, wrapping cleanly to two
   then one, so the dense reassignment form reads as a tidy card. */
.control-grid.distributor-replacement-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 899px) {
  .control-grid.distributor-replacement-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .control-grid.distributor-replacement-grid {
    grid-template-columns: 1fr;
  }
}

.schedule-target-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 14px;
  margin-bottom: 14px;
}

.target-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.target-panel-head h4 {
  font-size: 15px;
  margin: 0;
}

.target-panel-head p {
  color: var(--muted);
  margin: 4px 0 0;
}

.target-count {
  flex: 0 0 auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
  padding: 7px 10px;
}

.schedule-target-grid {
  align-items: start;
}

.wide-field {
  grid-column: span 2;
}

.field-label {
  color: var(--muted);
  font-size: 13px;
}

.schedule-location-target-field {
  display: grid;
  gap: 6px;
}

.schedule-location-checklist {
  display: grid;
  gap: 6px;
  max-height: 220px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}

.schedule-checklist-empty { padding: 6px 4px; font-size: 12.5px; }

.schedule-location-checklist.is-disabled {
  background: var(--surface-strong);
  opacity: 0.7;
}

.schedule-location-option {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--ink);
  cursor: pointer;
  padding: 8px;
}

.schedule-location-option:hover,
.schedule-location-option.is-selected {
  border-color: var(--line);
  background: var(--soft);
}

.schedule-location-option input {
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
}

.schedule-location-option strong,
.schedule-location-option small {
  display: block;
}

.schedule-location-option small {
  color: var(--muted);
  line-height: 1.35;
}

/* "3 ambassadors" on a targeting row: the Geography map's reach count for that store (90-day filter). It
   sits on the place line, not in a column of its own: the drawer is 420px, and a chip column squeezed the
   store name to ~150px, wrapping every long one. Right-aligned, so the chips read as a column; a long place
   line pushes the chip onto its own line, still at the right. Compact, and scoped under the row so it wins
   over .status (declared later in this file at the same specificity). */
.schedule-location-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px 8px;
}

.schedule-location-option .status.schedule-location-reach {
  margin-left: auto;
  min-height: 18px;
  padding: 0 7px;
  font-size: 11px;
  white-space: nowrap;
}

/* A row with a chip can be a line taller; keep about four rows in view in the drawer. */
.builder-drawer-body #scheduleLocationSelect { max-height: 300px; }

label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--ink);
  min-height: 38px;
  padding: 8px 10px;
}

/* Checkboxes must NOT inherit the full-width 38px text-input base above (that made raw checkboxes
   render as big bordered boxes — the "ugly checkboxes" on the Program/Notifications pages). One custom
   control styles every native checkbox in the app to the brand accent. NB: `.switch input` (visually
   hidden, defined later) still wins on width/height/opacity, so toggle switches are unaffected. */
input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 0;
  padding: 0;
  border: 1.5px solid var(--line-strong);
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  display: inline-grid;
  place-content: center;
  vertical-align: middle;
}
input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}
input[type="checkbox"]:checked::after {
  content: "";
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-top: -1px;
}
input[type="checkbox"]:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--accent-soft);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

textarea {
  resize: vertical;
}

.table-shell {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

/* ===== Schedule Builder — Clarity rebuild (templates/schedule-builder): targeting rail + candidate
   cards + sticky action bar + builder-rules slide-over. ===== */
.builder-grid {
  display: grid;
  grid-template-columns: 360px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
}
@media (max-width: 1180px) {
  .builder-grid { grid-template-columns: 1fr; }
  .builder-rail { position: static; top: auto; }
}
.builder-rail {
  position: sticky;
  top: 88px;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 17px;
  background: var(--surface, #fff);
  display: grid;
  gap: 14px;
  align-content: start;
}
.builder-rail-head { display: flex; align-items: center; gap: 10px; }
.builder-rail-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.builder-rules-btn {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 28px; padding: 0 10px;
  border: 1px solid var(--line); background: var(--surface, #fff);
  border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--muted); cursor: pointer;
}
.builder-rules-btn:hover { border-color: var(--accent-line); color: var(--accent-strong); }
.builder-rail-sub { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.45; }
.linklike { border: 0; background: none; padding: 0; color: var(--accent); font-weight: 600; font-size: inherit; cursor: pointer; }
.builder-rail .schedule-target-panel { margin: 0; padding: 0; border: 0; background: none; }
/* De-cluttered rail head: "Targeting" is the only heading; the target summary is a compact muted line. */
.builder-rail .target-panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.builder-target-summary { margin: 0; font-size: 12px; color: var(--muted); line-height: 1.4; }
/* The target grid is a fixed 4×150px row full-width; stack it to one column inside the rail. */
.builder-rail .schedule-target-grid { grid-template-columns: 1fr; min-width: 0; }
.builder-rail .schedule-target-grid .wide-field { grid-column: auto; }
/* Keep every control inside the rail's width so nothing spills / forces a horizontal scrollbar. */
.builder-rail .schedule-target-grid > *,
.builder-rail .schedule-target-grid label { min-width: 0; }
.builder-rail .schedule-target-grid select,
.builder-rail .schedule-target-grid input,
.builder-rail .schedule-target-grid .schedule-location-checklist { width: 100%; min-width: 0; box-sizing: border-box; }
.builder-rail-field { display: grid; gap: 6px; }
.builder-field-label-row { display: flex; align-items: center; }
.builder-days-summary { margin-left: auto; font-size: 11px; font-weight: 600; color: var(--accent); }
.builder-field-hint { margin: 0; font-size: 11px; color: var(--faint); }
/* minmax(0, …): a bare 1fr floors at a native date input's ~177px intrinsic width, which pushed the end date
   past a phone-width drawer's edge. */
.builder-date-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.builder-date-row input { width: 100%; min-width: 0; }
.builder-day-chips { display: flex; gap: 5px; }
.builder-day-chip {
  /* B6: firmer off-state (stronger line + faint text) so on/off reads clearly against the accent-soft on-state. */
  flex: 1; min-width: 0; padding: 7px 0; text-align: center;
  border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface, #fff);
  font-size: 12px; font-weight: 600; color: var(--faint); cursor: pointer;
}
.builder-day-chip.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.builder-inline-num { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); }
.builder-inline-num input { width: 100%; }
.builder-generate-btn { width: 100%; margin-top: 2px; }

.builder-candidates { min-width: 0; }
/* Wraps, with a floor on the title: at phone width the actions group squeezed the title to a 60-80px column,
   and with 4 buttons (~570px, scheduling_ai tenants) it ran past the right edge to x=691 at every phone width.
   Now the group drops below the title and its buttons wrap; a 1440 desktop still fits both on one line. */
.builder-candidates-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 14px; }
.builder-candidates-head > div:first-child { flex: 1 1 240px; min-width: 0; }
.builder-candidates-title { font-size: 15px; font-weight: 700; color: var(--ink); }
.builder-candidates-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.builder-selectall { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.builder-cand-list { display: flex; flex-direction: column; gap: 9px; }

.cand { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface, #fff); }
.cand-on { border-color: var(--accent-line); box-shadow: inset 0 0 0 1px var(--accent-line); }
.cand-conflict { border-color: var(--attn-bg); }
.cand-main { display: flex; align-items: center; gap: 13px; padding: 13px 15px; }
.cand-check { width: 18px; height: 18px; flex: none; cursor: pointer; }
.cand-body { flex: 1; min-width: 0; display: grid; gap: 3px; }
.cand-title { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.cand-title strong { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.cand-title .muted { font-size: 12px; }
.cand-sub { font-size: 12.5px; color: var(--muted); }
.cand-signals { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 2px; }
.cand-reason { display: flex; align-items: center; gap: 9px; padding: 9px 15px 11px 46px; border-top: 1px solid var(--attn-bg); color: var(--attn); font-size: 12px; line-height: 1.35; }
.cand-reason svg { flex: none; }
/* B5: warn-tone reason strip (soft-rule) vs the default attn (hard conflict), with an inline fix button. */
.cand-reason.cand-reason-warn { border-top-color: var(--warn-bg); color: var(--warn); }
.cand-reason-fix { margin-left: auto; flex: none; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 11.5px; font-weight: 600; padding: 3px 11px; border-radius: 999px; cursor: pointer; opacity: 0.9; }
.cand-reason-fix:hover { opacity: 1; background: rgba(0, 0, 0, 0.04); }

/* B9: coloured stat-card numerals (Selected -> accent, Ready -> ok, Needs review -> attn). */
.metric strong.metric-value-accent { color: var(--accent); }
.metric strong.metric-value-ok { color: var(--ok); }
.metric strong.metric-value-attn { color: var(--attn); }

/* B3: attn-tone inline alert + a row layout when the alert carries an action button. */
.inline-alert.attn { border-color: var(--attn-dot); background: var(--attn-bg); }
.inline-alert.inline-alert-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.inline-alert.inline-alert-row > div { display: grid; gap: 3px; }
.inline-alert.inline-alert-row button { flex: none; }

/* B11: real empty state for a zero-suggestion run. */
.builder-empty { text-align: center; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); padding: 28px 24px; color: var(--muted); display: grid; gap: 10px; justify-items: center; }
.builder-empty strong { font-size: 15px; color: var(--ink); }
.builder-empty ul { margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); display: grid; gap: 4px; }

/* B10: tint the native date picker glyph to the DS muted tone (Chromium/WebKit; the box is DS-styled already). */
input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0.55; cursor: pointer; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 0.8; }

.builder-action-bar {
  position: sticky; bottom: 0; z-index: 3;
  margin: 18px -24px -24px; padding: 14px 24px;
  background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.builder-action-count { font-size: 13px; color: var(--muted); }
.builder-action-count strong { color: var(--ink); font-variant-numeric: tabular-nums; }
.builder-action-buttons { margin-left: auto; display: flex; gap: 10px; }

/* B1/B2/B8 (Clarity handoff): run-summary bar + right-side targeting drawer; results take full width. */
.builder-run-summary { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.builder-run-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.builder-run-chip { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; background: var(--surface-sub); border: 1px solid var(--line); color: var(--muted); font-size: 12.5px; font-weight: 600; }
/* These two button groups wrap rather than run off the page. Nowrap, the run actions (366px) made the page
   410px wide below 410: Android Chrome then grew its layout viewport to 410, so the fixed targeting drawer
   (right: 0) opened up to 50px off-screen with its close and Apply buttons cut off. */
.builder-run-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 100%; }
.icon-btn-square { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--muted); cursor: pointer; }
.icon-btn-square:hover { border-color: var(--accent-line); color: var(--accent-strong); }
.builder-selectall-actions { margin-left: auto; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; max-width: 100%; }
/* Phone: Edit targeting + the rules gear share one row and Generate schedule gets its own full-width row; the
   select-all group sits left under its title instead of ragged right; the workbook alert stacks its button
   under the text rather than squeezing the text into a ~190px column. */
@media (max-width: 480px) {
  .builder-run-actions { flex: 1 1 100%; margin-left: 0; }
  .builder-run-actions #editTargetingBtn { flex: 1 1 auto; }
  .builder-run-actions #generateBtn { flex: 1 1 100%; }
  .builder-selectall-actions { margin-left: 0; justify-content: flex-start; }
  .inline-alert.inline-alert-row { flex-direction: column; align-items: flex-start; }
}
.builder-drawer-scrim { position: fixed; inset: 0; background: rgba(16, 24, 40, 0.28); z-index: 40; }
.builder-drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 420px; max-width: 92vw; z-index: 41; background: var(--surface); border-left: 1px solid var(--line); box-shadow: -12px 0 32px rgba(16, 24, 40, 0.14); display: flex; flex-direction: column; }
.builder-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.builder-drawer-title { font-size: 15px; font-weight: 700; color: var(--ink); }
/* One column pinned to the drawer's width. The implicit `auto` column grew to the widest child's min-content
   (the two date inputs, ~362px), so at phone width every field ran ~40px past the drawer's right edge and the
   body scrolled sideways. */
.builder-drawer-body { flex: 1; overflow-y: auto; padding: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.builder-drawer-body .schedule-target-grid { grid-template-columns: minmax(0, 1fr); }
.builder-drawer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 14px 18px; border-top: 1px solid var(--line); }
/* Phone: the app's 16px side gutters. */
@media (max-width: 480px) {
  .builder-drawer-head, .builder-drawer-body, .builder-drawer-foot { padding-left: 16px; padding-right: 16px; }
}


/* Integrations connections hub (templates/integrations): a card grid of each connection's live status;
   a card opens its existing Ecommerce/Accounting detail tab. */
.integrations-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; max-width: 880px; }
@media (max-width: 720px) { .integrations-hub-grid { grid-template-columns: 1fr; } }
.integration-card { border: 1px solid var(--line); border-radius: 13px; padding: 17px; background: var(--surface, #fff); transition: box-shadow 0.15s ease, border-color 0.15s ease; }
.integration-card[role="button"] { cursor: pointer; }
.integration-card[role="button"]:hover { border-color: var(--accent-line); box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08); }
.integration-card[role="button"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.integration-card.is-soon { opacity: 0.72; }
.integration-card-head { display: flex; align-items: center; gap: 12px; }
.integration-card-badge { width: 42px; height: 42px; flex: none; border-radius: 11px; color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.integration-card-titles { flex: 1; min-width: 0; }
.integration-card-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.integration-card-status { font-size: 12px; font-weight: 600; margin-top: 1px; }
.integration-card-status.status-ok { color: var(--ok); }
.integration-card-status.status-info { color: var(--info); }
.integration-card-status.status-muted { color: var(--faint); }
.integration-card-manage { flex: none; font-size: 12px; font-weight: 600; color: var(--accent); }
.integration-card-desc { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.45; }

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 1120px;
}

th,
td {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  font-size: 13px;
}

td {
  font-variant-numeric: tabular-nums;
}

.stacked-cell {
  display: grid;
  gap: 6px;
  min-width: 220px;
}

tr.is-selected td {
  background: var(--accent-soft);
}

th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-sub);
  color: var(--faint);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:hover td {
  background: var(--surface-sub);
}

.table-sort-button {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  text-transform: inherit;
  box-shadow: none;
}

.table-sort-button:hover,
.table-sort-button[aria-pressed="true"] {
  color: var(--accent-strong);
  background: transparent;
  box-shadow: none;
}

.export-col {
  width: 92px;
}

.export-all {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.export-cell input,
.export-all input {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  accent-color: var(--accent);
}

td input,
td select {
  min-width: 130px;
}

.row-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--ok-bg);
  color: var(--ok);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
}

/* Clarity semantic status set: Approved/Ready/Confirmed (ok) · Pending/Approved-req (info) ·
   Needs staffing/Conflict (attn) · Warning/Shipped (warn) · Reported/Delivered (done) · Proposed (prop) */
.status.ok { background: var(--ok-bg); color: var(--ok); }
.status.info { background: var(--info-bg); color: var(--info); }
.status.attn { background: var(--attn-bg); color: var(--attn); }
.status.warn { background: var(--warn-bg); color: var(--warn); }
.status.done { background: var(--done-bg); color: var(--done); }
.status.prop { background: var(--prop-bg); color: var(--prop); }

.status.danger,
.status.bad {
  background: var(--danger-soft);
  color: var(--danger);
}

.status.muted-status,
.status.neutral {
  background: var(--surface-strong);
  color: var(--muted);
}

.status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.master-schedule-workspace {
  overflow: visible;
}

.master-schedule-summary-line {
  margin: -4px 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 650;
}

.master-schedule-tools {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(220px, 1.2fr) minmax(140px, 0.7fr) minmax(140px, 0.7fr);
  gap: 12px;
  margin-bottom: 14px;
}

/* List mode: full-width table, detail hidden. Detail mode (.is-detail-open): table hidden,
   the Event detail screen takes the full width (click a row to open, Back to return). */
.master-schedule-layout {
  display: block;
}

.master-schedule-layout .master-detail-panel {
  display: none;
}

.master-schedule-layout.is-detail-open .master-list-shell {
  display: none;
}

.master-schedule-layout.is-detail-open .master-detail-panel {
  display: block;
}

/* Detail mode is a clean, focused screen: hide the list-view chrome
   (metric strip, lifecycle chips, toolbar, summary, "+ New tasting" row). */
.master-schedule-workspace.is-event-detail .workspace-action-row,
.master-schedule-workspace.is-event-detail .master-schedule-tools,
.master-schedule-workspace.is-event-detail .master-schedule-summary-line,
.master-schedule-workspace.is-event-detail #eventLifecycleStrip,
.master-schedule-workspace.is-event-detail .status-filter-row {
  display: none !important;
}
body.event-detail-open #contextMetrics {
  display: none !important;
}

.master-list-shell {
  min-height: 280px;
}

.master-schedule-table {
  min-width: 0;
}

.master-schedule-table th,
.master-schedule-table td {
  height: 58px;
}

.master-schedule-table .selection-cell {
  width: 46px;
  min-width: 46px;
  padding-left: 14px;
  padding-right: 4px;
}

.master-empty-row {
  height: 112px;
  color: var(--muted);
  font-weight: 700;
  text-align: center;
}

.master-detail-panel {
  display: grid;
  gap: 16px;
  max-width: 920px;
}

/* Event detail header + contextual action bar (Clarity) */
.event-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: max-content;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text);
  font-size: 13px;
  font-weight: 600;
}
.event-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
}
.event-detail-header .event-detail-title {
  flex: 1;
  min-width: 0;
}
.event-detail-header h3 {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.event-detail-header .event-detail-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--faint);
}
.event-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.master-detail-panel h4 {
  margin: 0 0 4px;
}

/* Event detail card grid (Clarity) — 2-column grid of editable cards. */
.event-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.event-detail-grid .event-card.is-wide {
  grid-column: 1 / -1;
}
.event-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 11px);
  background: var(--surface, #fff);
  padding: 15px 17px 16px;
  display: grid;
  gap: 11px;
  align-content: start;
}
.event-card .ec-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.045em;
  text-transform: uppercase;
  color: var(--faint);
}
.event-card .ec-fields {
  display: grid;
  gap: 11px;
}
.event-card .ec-fields.ec-cols-2 {
  grid-template-columns: 1fr 1fr;
}
.event-card .ec-fields.ec-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
/* Phone: ONE column that can shrink. A bare `1fr` floors at its widest card's min-content -- the Date & time
   card's two native time inputs, ~299px -- so at 360-393px the two columns came to ~480px inside a ~300px body:
   the page was ~520px wide, and on a counter proposal "Decline and cancel" sat wholly off a 360px screen (Chrome
   mobile then widens the layout viewport to the content, dragging position:fixed UI with it). minmax(0, ...) on
   the grid AND inside each card (an untemplated grid floors at its content too), min-width:0 on the inputs, and
   overflow-wrap so an unbroken string (an email, a pasted note) wraps instead of widening the card. */
@media (max-width: 640px) {
  .event-detail-grid,
  .event-detail-grid .event-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .event-detail-grid > *,
  .event-detail-grid .event-card input,
  .event-detail-grid .event-card select {
    min-width: 0;
  }
  .event-detail-grid .event-card {
    overflow-wrap: anywhere;
  }
  /* Start / End share a row while each still has room for its time (~126px); narrower, they stack. */
  .event-detail-grid .event-card .ec-fields.ec-cols-2 {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 126px), 1fr));
  }
}

/* Location detail toggle rows (reuses .switch) */
.loc-toggle-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--line);
}
.loc-toggle-row:last-child {
  border-bottom: none;
}
.loc-toggle-copy {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.loc-toggle-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.event-card .ec-field {
  display: grid;
  gap: 5px;
}
.event-card .ec-field > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--faint);
}
.event-card input,
.event-card select,
.event-card textarea {
  width: 100%;
  font: inherit;
  font-size: 13.5px;
  color: var(--ink);
  background: var(--surface-sub, #fafbfc);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 8px);
  padding: 8px 10px;
}
.event-card textarea {
  min-height: 74px;
  resize: vertical;
}
.event-card input:focus,
.event-card select:focus,
.event-card textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Ambassador card */
.ec-amb {
  display: flex;
  align-items: center;
  gap: 11px;
}
.ec-amb .schedule-avatar,
.ec-amb .cell-avatar {
  width: 38px;
  height: 38px;
  font-size: 13px;
}
.ec-amb-body {
  display: grid;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.ec-amb-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
}
.ec-amb-name.is-empty {
  color: var(--attn);
}
.ec-coverage {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
}
.ec-coverage::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.ec-coverage.is-in {
  color: var(--ok, #3a8f5b);
}
.ec-coverage.is-in::before {
  background: var(--ok, #3a8f5b);
}
.ec-coverage.is-out {
  color: var(--warn, #b8702a);
}
.ec-coverage.is-out::before {
  background: var(--warn, #b8702a);
}
.ec-btn {
  width: max-content;
  min-height: 32px;
  padding: 6px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 8px);
  background: #fff;
  color: var(--text);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.ec-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.ec-amb-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* Roster picker (inline, opens under the Ambassador card) */
.ec-roster {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.ec-roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 8px 9px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-sub, #fafbfc);
  cursor: pointer;
}
.ec-roster-row:hover {
  border-color: var(--accent-line, var(--line-strong));
  background: var(--accent-soft, #f3f3fb);
}
.ec-roster-row.is-current {
  border-color: var(--accent);
}
.ec-roster-row .ec-roster-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  /* Truncate rather than wrap. The name used to wrap to two or three lines ("Faith Annalise Peyron")
     and collide with the coverage text beside it, because .ec-coverage had no flex-shrink and its
     ~48-character "Coverage unknown - add profile or store coordinates" string starved this box. The
     label is short now, but a long name must still degrade to an ellipsis instead of overlapping. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ec-roster-row .ec-coverage {
  font-size: 11.5px;
  /* Never grow, never shrink into the name; wrap as one unit if the row is genuinely too narrow. */
  flex: 0 0 auto;
  max-width: 45%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: right;
}
.ec-roster-search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
}
.ec-roster-input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line-strong, #d7dbe0);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface, #fff);
}
.ec-roster-input:focus {
  outline: none;
  border-color: var(--accent-line, var(--line-strong));
  box-shadow: 0 0 0 3px var(--accent-soft, #f3f3fb);
}
.ec-roster-count {
  flex: 0 0 auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
/* The repair button inside the roster banner: the fix sits at the point of pain, so it must read
   as part of the sentence rather than as a separate control. */
.ec-roster-fix {
  margin-left: 6px;
  padding: 3px 8px;
  font-size: 11.5px;
  vertical-align: baseline;
}
.ec-roster-note {
  margin: 0 0 8px;
  padding: 7px 9px;
  font-size: 12px;
  line-height: 1.4;
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-sub, #fafbfc);
  border: 1px solid var(--line, #e6e9ec);
}
.ec-roster-empty {
  padding: 8px 2px;
  font-size: 13px;
}

/* Templates & Data screen — section grouping */
.data-section {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 11px);
  background: var(--surface, #fff);
  padding: 16px 18px;
  margin-bottom: 16px;
  max-width: 1040px;
}
.data-section-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.data-section .helper-text {
  margin-top: 2px;
  margin-bottom: 12px;
}

/* Store & approval card actions (Open location + Send approval request) */
.ec-card-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ec-approval-send {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.ec-approval-send input[type="email"] {
  width: 220px;
  max-width: 100%;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  background: var(--surface-sub, #fafbfc);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm, 8px);
  padding: 7px 10px;
}

/* Publishing subsection (de-emphasized, below the cards) */
.event-publishing-panel {
  max-width: 920px;
}

/* Publish toggle (generic, replaces the old Shopify button row) */
.publish-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.publish-toggle-copy {
  display: grid;
  gap: 2px;
}
#masterEventPublishState.is-published {
  color: var(--ok, #137a47);
  font-weight: 600;
}
.switch {
  position: relative;
  display: inline-flex;
  flex: none;
  cursor: pointer;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch .switch-track {
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: 99px;
  background: var(--line-strong, #dfe1ea);
  transition: background 0.15s ease;
}
.switch .switch-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.25);
  transition: transform 0.15s ease;
}
.switch input:checked + .switch-track {
  background: var(--accent);
}
.switch input:checked + .switch-track .switch-knob {
  transform: translateX(18px);
}
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);
}
.switch input:disabled + .switch-track {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Posted-as-open-shift banner */
.ec-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 11px 14px;
  border: 1px solid var(--attn-dot, #ea7a2e);
  border-radius: var(--radius-md, 11px);
  background: var(--attn-bg, #fdeee7);
  color: var(--attn, #c2410c);
  font-size: 13px;
  font-weight: 600;
}

/* Store & approval card */
.ec-rows {
  display: grid;
  gap: 9px;
}
.ec-rows .ec-kv {
  display: grid;
  gap: 1px;
}
.ec-rows .ec-kv > span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--faint);
}
.ec-rows .ec-kv > strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.ec-link {
  width: max-content;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: none;
  border: none;
  padding: 2px 0;
  cursor: pointer;
}

/* Activity timeline card */
.ec-timeline {
  display: grid;
  gap: 0;
}
.ec-timeline .ec-event {
  position: relative;
  padding: 0 0 14px 19px;
  border-left: 2px solid var(--line);
}
.ec-timeline .ec-event:last-child {
  border-left-color: transparent;
  padding-bottom: 0;
}
.ec-timeline .ec-event::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
}
.ec-timeline .ec-event.is-current::before {
  background: var(--accent);
}
.ec-timeline .ec-event .ec-event-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.ec-timeline .ec-event .ec-event-meta {
  font-size: 12px;
  color: var(--faint);
  margin-top: 1px;
}

/* Functional action panels render as cards too, below the detail grid. */
.master-detail-panel .master-action-panel {
  border: 1px solid var(--line);
  border-radius: var(--radius-md, 11px);
  background: var(--surface, #fff);
  padding: 15px 17px 16px;
  margin-top: 0;
  border-top: 1px solid var(--line);
}

.detail-body {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.detail-row {
  display: grid;
  gap: 3px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.detail-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}

.detail-row strong,
.detail-row p {
  margin: 0;
  overflow-wrap: anywhere;
}

.counter-proposal-review {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.counter-proposal-review label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.counter-proposal-review .button-row {
  flex-wrap: wrap;
}

.master-action-panel {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  margin-top: 12px;
  border-top: 1px solid var(--line);
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(9, 28, 23, 0.48);
}

.modal-backdrop.is-hidden {
  display: none;
}

.modal-panel {
  width: min(820px, 100%);
  max-height: min(780px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  background: #fff;
  box-shadow: var(--shadow);
}

.event-modal-panel {
  width: min(860px, 100%);
}

/* Schedule Builder Settings modal — the single scheduler-settings surface (replaces the old tab + drawer). */
.schedule-settings-modal-panel {
  width: min(900px, 100%);
}
.schedule-settings-modal-panel .security-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.schedule-settings-modal-panel .settings-layout {
  margin-top: 0;
}

/* ============ Clarity confirm / prompt / decision modals ============ */
/* Shared layer replacing native confirm()/prompt()/alert(). Canon: design project
   "Luba Clarity Design System" → templates/confirm-modal/ConfirmModal.dc.html. */
.luba-modal-panel {
  padding: 0;
  overflow: hidden;
}
.confirm-modal-panel {
  width: min(440px, 100%);
}
.decision-modal-panel {
  width: min(460px, 100%);
}
.confirm-modal-head {
  padding: 18px 20px 4px;
}
.confirm-modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.confirm-modal-head p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
.confirm-modal-body {
  padding: 14px 20px 4px;
}
.confirm-modal-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 7px;
}
.confirm-modal-input {
  width: 100%;
  height: 42px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 0 12px;
  font-size: 0.9rem;
  font-family: inherit;
  color: var(--ink);
  background: var(--surface);
  outline: none;
}
.confirm-modal-input:focus {
  border-color: var(--accent);
}
.confirm-modal-input.is-error {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.confirm-modal-error {
  margin: 7px 0 0;
  font-size: 0.75rem;
  color: var(--danger);
}
.confirm-modal-actions,
.decision-modal-actions {
  display: flex;
  gap: 10px;
  padding: 18px 20px 20px;
  margin-top: 8px;
}
.confirm-modal-actions button,
.decision-modal-actions .ghost {
  flex: 1;
}

/* Decision picker */
.decision-modal-head {
  padding: 18px 20px 4px;
}
.decision-modal-head h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--ink);
}
.decision-modal-head p {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--muted);
}
.decision-modal-body {
  padding: 16px 20px 4px;
}
.decision-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--faint);
  margin-bottom: 9px;
}
.decision-seg {
  display: flex;
  gap: 9px;
}
.decision-opt {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 8px;
  border-radius: var(--radius);
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
}
.decision-opt:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
.decision-opt-icon {
  display: inline-flex;
  color: var(--faint);
}
.decision-opt-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink);
}
.decision-opt-sub {
  font-size: 0.68rem;
  color: var(--faint);
}
.decision-opt.is-ok.on {
  border-color: var(--ok);
  background: var(--ok-bg);
}
.decision-opt.is-ok .decision-opt-icon {
  color: var(--ok);
}
.decision-opt.is-warn.on {
  border-color: var(--warn);
  background: var(--warn-bg);
}
.decision-opt.is-warn .decision-opt-icon {
  color: var(--warn);
}
.decision-opt.is-rej.on {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.decision-opt.is-rej .decision-opt-icon {
  color: var(--danger);
}
.decision-notes-wrap {
  margin-top: 16px;
}
.decision-notes-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 7px;
}
.decision-notes-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted);
}
.decision-notes-tag {
  font-size: 0.72rem;
  font-weight: 700;
}
.decision-notes-tag.is-req {
  color: var(--danger);
}
.decision-notes-tag.is-opt {
  color: var(--faint);
}
.decision-notes {
  width: 100%;
  min-height: 84px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  padding: 11px 12px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--ink);
  line-height: 1.5;
  resize: vertical;
  outline: none;
  background: var(--surface);
}
.decision-notes:focus {
  border-color: var(--accent);
}
.decision-notes.is-error {
  border-color: var(--danger);
  background: var(--danger-soft);
}
.decision-notes-err {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--danger);
}
.decision-commit {
  flex: 1;
  height: 42px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.decision-commit.is-ok {
  background: var(--ok);
}
.decision-commit.is-warn {
  background: var(--warn);
}
.decision-commit.is-rej {
  background: var(--danger);
}

/* ============ Account security · two-factor (MFA) ============ */
.security-modal-panel {
  width: min(520px, 100%);
}
.security-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.security-modal-head h3 {
  margin: 2px 0 0;
}
.security-modal-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.security-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.security-block h4 {
  margin: 0;
}
.security-status {
  margin: 0;
  font-size: 1.02rem;
}
.security-status-on {
  color: var(--ok, #1b7a4b);
}
.security-secret {
  margin: 0;
}
.security-secret code {
  display: inline-block;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.15rem;
  letter-spacing: 0.12em;
  padding: 10px 14px;
  background: var(--surface-strong, #f3f5f4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
/* Authenticator enrollment: QR-first, with the text setup key collapsed as a fallback. */
.mfa-qr {
  width: 200px;
  max-width: 100%;
  align-self: flex-start;
}
.mfa-qr svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.mfa-key-fallback summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
}
.mfa-key-fallback > *:not(summary) {
  margin-top: 10px;
}
.security-field-label {
  font-size: 0.85rem;
  font-weight: 600;
}
.security-code-input {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  width: 100%;
  max-width: 280px;
}
.security-recovery-codes {
  list-style: none;
  margin: 0;
  padding: 14px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 20px;
  background: var(--surface-strong, #f3f5f4);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.98rem;
}
/* The recovery-code acknowledgement. Amber rather than neutral on purpose: this is the one screen
   in the product whose content cannot be recovered if the user moves past it without reading. */
.security-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 13px;
  padding: 13px 14px;
  background: var(--warn-bg);
  border: 1px solid color-mix(in srgb, var(--warn) 28%, #fff);
  border-radius: 13px;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1.45;
}
.security-ack input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--warn);
  cursor: pointer;
}
.security-error {
  margin: 0;
  color: var(--danger);
  font-size: 0.9rem;
}
@media (max-width: 480px) {
  .security-recovery-codes {
    grid-template-columns: 1fr;
  }
}

/* ============ Brand onboarding wizard (full-screen) ============ */
.onboarding-wizard {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  background: var(--surface-strong);
  color: var(--ink);
}
.onboarding-wizard.is-hidden { display: none; }
.wz-rail {
  width: 300px;
  flex: none;
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.wz-rail-head { padding: 22px 22px 16px; display: flex; align-items: center; gap: 11px; }
.wz-rail-logo {
  width: 36px; height: 36px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 17px;
  background: linear-gradient(140deg, var(--accent), color-mix(in srgb, var(--accent) 68%, #fff));
  box-shadow: 0 2px 7px color-mix(in srgb, var(--accent) 42%, transparent);
}
.wz-rail-brand { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.wz-rail-sub { font-size: 11.5px; color: var(--faint); }
.wz-rail-progress { padding: 0 22px 14px; }
.wz-rail-progress-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.wz-rail-progress-row span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.wz-rail-progress-row span:last-child { font-size: 11.5px; font-weight: 700; color: var(--accent); }
.wz-progress-track { height: 6px; border-radius: 99px; background: var(--surface-strong); overflow: hidden; }
.wz-progress-fill { height: 6px; border-radius: 99px; background: var(--accent); width: 0; transition: width .25s ease; }
.wz-rail-nav { flex: 1; overflow: auto; padding: 4px 12px; }
.wz-step { display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 11px; cursor: pointer; border: 0; background: none; width: 100%; text-align: left; }
.wz-step:hover { background: var(--surface-sub); }
.wz-step-current, .wz-step-current:hover { background: var(--accent-soft); }
.wz-num { width: 28px; height: 28px; border-radius: 99px; flex: none; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; }
.wz-num-todo { background: var(--surface-strong); color: var(--faint); }
.wz-num-current { background: var(--accent); color: #fff; box-shadow: 0 0 0 4px var(--accent-soft); }
.wz-num-done { background: var(--ok-bg); color: var(--ok); }
.wz-step-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.15; }
.wz-step-todo .wz-step-lbl { color: var(--muted); font-weight: 500; }
.wz-step-sub { font-size: 11.5px; color: var(--faint); }
.wz-rail-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; align-items: center; gap: 8px; }
.wz-rail-foot-note { font-size: 12px; color: var(--faint); }
.wz-exit { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; }
.wz-exit:hover { color: var(--ink); }
.wz-main { flex: 1; min-width: 0; display: flex; flex-direction: column; height: 100vh; }
.wz-scroll { flex: 1; overflow: auto; }
.wz-content { max-width: 760px; margin: 0 auto; padding: 54px 32px 40px; }
.wz-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.wz-title { margin: 8px 0 0; font-size: 28px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.wz-blurb { font-size: 14.5px; color: var(--text); line-height: 1.6; margin: 9px 0 28px; max-width: 620px; }
.wz-footer { border-top: 1px solid var(--line); background: var(--surface); padding: 14px 32px; }
.wz-footer-inner { max-width: 760px; margin: 0 auto; display: flex; align-items: center; gap: 12px; }
.wz-skip { font-size: 13px; font-weight: 600; color: var(--muted); background: none; border: 0; cursor: pointer; }
.wz-skip:hover { color: var(--ink); }
.wz-footer-primary { margin-left: auto; }
.wz-card { border: 1px solid var(--line); border-radius: 15px; padding: 20px; background: var(--surface); }
.wz-trial { display: flex; align-items: center; gap: 16px; }
.wz-trial-ico { width: 52px; height: 52px; border-radius: 13px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; font-size: 24px; }
.wz-trial-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.wz-trial-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }
.wz-trial-badge { margin-left: auto; flex: none; font-size: 12px; font-weight: 600; color: var(--ok); background: var(--ok-bg); border-radius: 99px; padding: 4px 11px; white-space: nowrap; }
.wz-subhead { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint); margin: 24px 0 13px; }
.wz-welcome-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.wz-welcome-item { display: flex; align-items: center; gap: 11px; border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; background: var(--surface); }
.wz-welcome-item .wz-welcome-ico { width: 32px; height: 32px; border-radius: 9px; background: var(--surface-strong); color: var(--muted); display: grid; place-items: center; flex: none; font-size: 16px; }
.wz-welcome-item .wz-welcome-lbl { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wz-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wz-field-card { border: 1px solid var(--line); border-radius: 14px; padding: 18px; background: var(--surface); }
.wz-field-title { font-size: 13.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.wz-field-hint { font-size: 12.5px; color: var(--faint); margin-bottom: 14px; }
.wz-input { width: 100%; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 14px; color: var(--ink); background: var(--surface); font-family: inherit; }
.wz-input:focus { outline: 2px solid var(--accent-line); outline-offset: 0; border-color: var(--accent); }
.wz-input-error { border-color: var(--danger); }
.wz-input-error:focus { outline-color: color-mix(in srgb, var(--danger) 32%, #fff); border-color: var(--danger); }
/* a11y: visually-hidden but screen-reader-available label text */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.wz-swatches { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wz-swatch { width: 36px; height: 36px; border-radius: 11px; border: 0; outline-offset: 3px; outline: 2px solid transparent; cursor: pointer; }
.wz-swatch.is-selected { outline-color: var(--ink); }
.wz-accent-row { display: flex; align-items: center; gap: 9px; margin-top: 13px; flex-wrap: wrap; }
.wz-accent-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line-strong); border-radius: 10px; padding: 8px 11px; }
.wz-accent-chip .wz-accent-dot { width: 18px; height: 18px; border-radius: 5px; background: var(--accent); }
.wz-hex-input { width: 110px; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 13px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--ink); font-family: inherit; }
.wz-note { display: flex; align-items: flex-start; gap: 8px; margin-top: 12px; padding: 10px 12px; background: var(--surface-sub); border-radius: 10px; font-size: 11.5px; color: var(--muted); line-height: 1.45; }
.wz-note.is-warn { background: var(--warn-bg); color: var(--warn); }
.wz-note.is-hidden { display: none; }
.wz-placeholder { border: 1px dashed var(--line-strong); border-radius: 14px; padding: 30px; text-align: center; background: var(--surface-sub); color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.wz-rc { border: 1px solid var(--line-strong); border-radius: 14px; padding: 18px; cursor: pointer; background: var(--surface); display: block; transition: border-color .15s, box-shadow .15s; }
.wz-rc:hover { border-color: var(--accent-line); }
.wz-rc.is-on { border: 1.5px solid var(--accent); background: var(--accent-soft); box-shadow: 0 6px 20px color-mix(in srgb, var(--accent) 18%, transparent); }
.wz-rc-head { display: flex; align-items: center; gap: 11px; }
.wz-rdot { width: 20px; height: 20px; border-radius: 99px; border: 1.5px solid var(--line-strong); flex: none; }
.wz-rc.is-on .wz-rdot { border: 6px solid var(--accent); }
.wz-rc-logo { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-weight: 700; flex: none; }
.wz-rc-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.wz-rc-badge { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--ok); background: var(--ok-bg); border-radius: 99px; padding: 3px 9px; }
.wz-rc-body { font-size: 13px; color: var(--text); line-height: 1.5; margin-top: 12px; }
.wz-info-card { border: 1px solid var(--line); border-radius: 15px; padding: 22px; background: var(--surface); }
.wz-info-head { display: flex; align-items: center; gap: 14px; }
.wz-info-ico { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-weight: 700; font-size: 20px; color: #fff; flex: none; }
.wz-unlocks { display: flex; flex-direction: column; gap: 10px; margin: 18px 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wz-unlock { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text); }
.wz-unlock-tick { color: var(--ok); font-weight: 700; }
.wz-add-row { display: flex; gap: 8px; align-items: center; }
.wz-add-row .wz-input { flex: 1; }
.wz-list { border: 1px solid var(--line); border-radius: 14px; margin-top: 16px; background: var(--surface); overflow: hidden; }
.wz-list-head { display: flex; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.wz-list-row { display: flex; align-items: center; gap: 13px; padding: 13px 16px; border-bottom: 1px solid var(--surface-sub); }
.wz-list-row:last-child { border-bottom: 0; }
.wz-list-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.wz-list-sub { font-size: 12px; color: var(--faint); }
.wz-list-empty { padding: 18px 16px; font-size: 13px; color: var(--faint); }
.wz-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.wz-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; border: 1px solid var(--line); border-radius: 13px; padding: 17px; cursor: pointer; background: var(--surface); text-align: left; transition: border-color .15s, box-shadow .15s; }
.wz-tile:hover { border-color: var(--accent-line); box-shadow: 0 6px 18px rgba(16,24,40,.07); }
.wz-tile-ico { width: 36px; height: 36px; border-radius: 10px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-size: 18px; margin-bottom: 9px; }
.wz-tile-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.wz-tile-sub { font-size: 12px; color: var(--faint); }
.wz-dropzone { display: block; border: 2px dashed var(--line-strong); border-radius: 14px; padding: 34px; text-align: center; background: var(--surface-sub); cursor: pointer; margin-top: 14px; }
.wz-dropzone:hover { border-color: var(--accent-line); }
.wz-dropzone-ico { width: 46px; height: 46px; margin: 0 auto; border-radius: 13px; background: var(--surface); color: var(--accent); display: grid; place-items: center; font-size: 22px; box-shadow: 0 2px 8px rgba(16,24,40,.06); }
.wz-dropzone-title { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-top: 14px; }
.wz-dropzone-sub { font-size: 12.5px; color: var(--faint); margin-top: 5px; }
.wz-link { color: var(--accent); font-weight: 600; cursor: pointer; }
.wz-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; margin: 16px 0; }
.wz-stat { border: 1px solid var(--line); border-radius: 13px; padding: 15px; background: var(--surface); }
.wz-stat-n { font-size: 23px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.wz-stat-lbl { font-size: 12px; color: var(--faint); margin-top: 1px; }
.wz-held { font-size: 11.5px; font-weight: 600; color: var(--muted); background: var(--surface-strong); border-radius: 99px; padding: 3px 9px; flex: none; }
.wz-check-row { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--surface-sub); }
.wz-check-row:last-child { border-bottom: 0; }
.wz-check { width: 24px; height: 24px; border-radius: 99px; flex: none; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: var(--surface-strong); color: var(--faint); }
.wz-check.is-on { background: var(--ok-bg); color: var(--ok); }
.wz-golive-toggle { display: flex; align-items: center; gap: 14px; margin-top: 16px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 14px; padding: 16px 18px; }
.wz-switch { width: 46px; height: 27px; border-radius: 99px; border: 0; background: var(--line-strong); cursor: pointer; flex: none; padding: 0; position: relative; transition: background .15s; }
.wz-switch.is-on { background: var(--accent); }
.wz-switch-knob { position: absolute; top: 3px; left: 3px; width: 21px; height: 21px; border-radius: 99px; background: #fff; box-shadow: 0 1px 2px rgba(16,24,40,.2); transition: transform .15s; }
.wz-switch.is-on .wz-switch-knob { transform: translateX(19px); }

.manual-event-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(130px, 1fr));
  gap: 12px;
}

.form-label {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.searchable-field {
  position: relative;
}

.search-picker {
  position: relative;
}

.search-picker-results {
  display: none;
  position: absolute;
  z-index: 120;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: min(320px, 45vh);
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.search-picker-results.is-open {
  display: grid;
}

.search-picker-option {
  display: grid;
  place-items: unset;
  width: 100%;
  min-height: 0;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: #fff;
  color: var(--ink);
  text-align: left;
  box-shadow: none;
}

.search-picker-option:hover,
.search-picker-option.is-selected {
  background: var(--surface-strong);
}

.search-picker-option strong,
.search-picker-option span {
  overflow-wrap: anywhere;
}

.search-picker-option span,
.search-picker-empty {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.search-picker-empty {
  padding: 12px;
}

.modal-actions {
  justify-content: flex-end;
  margin-top: 16px;
}

.master-schedule-row {
  cursor: pointer;
}

.master-schedule-row td {
  transition: background 0.12s ease, box-shadow 0.12s ease;
}

.master-schedule-row.is-selected,
.master-schedule-row.is-selected td {
  background: var(--accent-soft);
}

/* Clarity schedule-table cells (match the prototype) */
.master-schedule-table td {
  padding: 12px 16px;
  vertical-align: top;
}
.cell-store-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.cell-sub {
  font-size: 12px;
  color: var(--faint);
  margin-top: 2px;
}
.cell-unassigned {
  font-size: 13px;
  font-weight: 400;
  color: var(--faint);
}
.cell-muted-text {
  font-size: 13px;
  color: var(--text);
}
.master-row-actions-col {
  width: 44px;
  text-align: center;
}
.row-dots {
  color: var(--faint);
  font-size: 18px;
  line-height: 1;
}
.row-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  font-weight: 600;
}
.cell-amb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--ink);
}
.cell-avatar {
  width: 28px;
  height: 28px;
  flex: none;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: hsl(var(--avatar-hue, 250) 58% 93%);
  color: hsl(var(--avatar-hue, 250) 52% 38%);
}
.cell-avatar-photo {
  object-fit: cover;
  background: var(--surface-sub);
}
.metric small.metric-hint-attn {
  color: var(--attn);
  font-weight: 600;
}
.workspace-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 14px;
}

.master-event-summary {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.master-event-summary strong,
.master-event-summary span {
  overflow-wrap: anywhere;
}

.master-event-meta {
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 750;
}

.master-row-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.master-row-checkbox {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.master-row-select span {
  position: relative;
  width: 17px;
  height: 17px;
  border: 1.5px solid var(--line-strong);
  border-radius: 4px;
  background: #fff;
  box-shadow: inset 0 0 0 2px #fff;
}

.master-row-checkbox:checked + span {
  border-color: var(--primary);
  background: var(--primary);
}

.master-row-checkbox:checked + span::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.master-row-checkbox:focus-visible + span {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.master-select-visible {
  width: 24px;
  height: 24px;
}

.status-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 5px 12px;
  background: #fff;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}

.status-filter-chip:hover {
  border-color: var(--accent-line);
  background: var(--surface-sub);
  color: var(--ink);
}

.status-filter-chip.is-active {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}

.status-filter-chip.is-empty:not(.is-active) {
  color: var(--muted);
  opacity: 0.78;
}

.status-filter-chip strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  min-height: 20px;
  border-radius: 999px;
  padding: 1px 6px;
  background: #fff;
  color: inherit;
  font-size: 12px;
}

/* List full-width by default; selecting a chain replaces it with a full-width
   detail ("‹ All chains" back button returns) — same pattern as Locations. */
.retail-chain-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}
.retail-chain-layout .retail-chain-detail {
  display: none;
}
.retail-chain-layout.is-detail-open .retail-chain-list-shell {
  display: none;
}
.retail-chain-layout.is-detail-open .retail-chain-detail {
  display: block;
  position: static;
  border: none;
  padding: 0;
  background: transparent;
  max-width: 960px;
}

.retail-chain-layout tr.is-selected {
  background: var(--accent-soft, #f0f7f3);
}

.retail-chain-form {
  display: grid;
  gap: 12px;
}

.location-list-shell {
  max-height: calc(100vh - 285px);
}

.location-list-table {
  min-width: 680px;
}

/* ============================================================================
   Distributor Workspace (design_handoff_distributor_surface, 2026-08-23):
   master rail + detail pane with People / Locations / Settings tabs. All classes
   are `.dw-`-prefixed to avoid collision with the app's generic names (a bare
   .tab/.row would inherit unrelated rules). Tier colors are FIXED literals per
   the handoff §6 — they are how the four tiers stay distinguishable. Everything
   else uses the app's Clarity tokens (which the design was built against). */
.dw { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.dw-rail { flex: 0 0 250px; min-width: 220px; }
.dw-detail { flex: 1 1 640px; min-width: 0; }

/* Rail */
.dw-rail-search { position: relative; margin-bottom: 9px; }
.dw-rail-search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--faint); }
.dw-rail-search input { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px 0 33px; font: inherit; font-size: 13px; color: var(--ink); outline: none; }
.dw-rail-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.dw-railrow { display: flex; gap: 10px; align-items: flex-start; padding: 11px 12px; cursor: pointer; border-bottom: 1px solid var(--line); background: transparent; transition: background .12s ease; }
.dw-railrow:hover { background: var(--surface-sub); }
.dw-railrow.on { background: var(--accent-soft); }
.dw-rstripe { width: 8px; flex: none; align-self: stretch; border-radius: 99px; margin: 1px 0; background: transparent; }
.dw-railrow.on .dw-rstripe { background: var(--accent); }
.dw-railrow-body { min-width: 0; flex: 1; }
.dw-railrow-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-railrow-region { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.dw-railrow-counts { font-size: 11.5px; color: var(--faint); margin-top: 5px; font-variant-numeric: tabular-nums; }
.dw-pill-paused { font-size: 10.5px; font-weight: 700; color: var(--muted); background: var(--surface-strong); border-radius: 99px; padding: 1px 6px; flex: none; }
.dw-rail-add { padding: 10px 12px; }

/* Detail header card */
.dw-headcard { border: 1px solid var(--line); border-radius: 14px; padding: 16px 18px; transition: box-shadow .15s ease, border-color .15s ease; }
.dw-headcard:hover { border-color: var(--accent-line); box-shadow: 0 4px 14px rgba(16, 24, 40, .06); }
.dw-head-top { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.dw-head-icon { width: 40px; height: 40px; border-radius: 11px; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; flex: none; }
.dw-head-titles { min-width: 0; flex: 1 1 220px; }
.dw-head-name { font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -.01em; }
.dw-head-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.dw-head-actions { display: flex; gap: 8px; flex: none; }
.dw-stats { display: flex; flex-wrap: wrap; margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--line); }
.dw-stat { flex: 1 1 96px; text-align: center; }
.dw-stat + .dw-stat { border-left: 1px solid var(--line); }
.dw-stat.is-jump { cursor: pointer; }
.dw-stat-num { font-size: 20px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.dw-stat-lbl { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.dw-stat-cadence { font-size: 13.5px; font-weight: 600; color: var(--ink); margin-top: 4px; }

/* Tabs */
.dw-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 20px 0 16px; }
.dw-tab { display: inline-flex; align-items: center; gap: 7px; padding: 10px 14px; font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted); background: transparent; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.dw-tab:hover { color: var(--ink); }
.dw-tab.on { font-weight: 700; color: var(--accent); border-bottom-color: var(--accent); }
.dw-tab-pill { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; background: var(--dw-rep-line); color: var(--faint); }
.dw-tab.on .dw-tab-pill { background: var(--accent); color: var(--surface); }

/* Buttons (workspace-local so they don't inherit the app's .primary/.secondary sizing) */
.dw-btn { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--text); cursor: pointer; }
.dw-btn.primary { border: 0; background: var(--accent); color: var(--surface); padding: 0 13px; }
.dw-btn-icon { display: inline-grid; place-items: center; width: 34px; height: 34px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 8px; color: var(--muted); cursor: pointer; }
.dw-btn-dashed { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px dashed var(--line-strong); background: transparent; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted); cursor: pointer; }

/* People toolbar + filter chips */
.dw-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.dw-toolbar-actions { margin-left: auto; display: flex; gap: 8px; }
.dw-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: 99px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.dw-chip.on { border-color: var(--accent-line); background: var(--accent-soft); color: var(--accent); }
.dw-chip-ct { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 1px 7px; background: var(--dw-chipct-bg); color: var(--faint); }
.dw-chip.on .dw-chip-ct { background: var(--accent); color: var(--surface); }

/* Alert strips (Fix-access = warn/amber, Locations gap = attn/orange) */
.dw-strip { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; border-radius: 12px; padding: 13px 15px; margin-bottom: 14px; }
.dw-strip.warn { background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--surface)); }
.dw-strip.warn .dw-strip-icon { color: var(--warn); }
.dw-strip.attn { background: var(--attn-bg); border: 1px solid color-mix(in srgb, var(--dw-attn) 28%, var(--surface)); }
.dw-strip.attn .dw-strip-icon { color: var(--dw-attn); }
.dw-strip-icon { display: inline-flex; margin-top: 1px; flex: none; }
.dw-strip-body { font-size: 12.5px; color: var(--text); line-height: 1.5; flex: 1 1 300px; min-width: 0; }
.dw-strip-body strong { color: var(--ink); display: block; margin-bottom: 2px; }
.dw-strip-actions { display: flex; gap: 8px; flex: none; }
.dw-strip-btn { height: 32px; padding: 0 12px; border: 0; border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--surface); cursor: pointer; }
.dw-strip.warn .dw-strip-btn { background: var(--warn); }
.dw-strip.attn .dw-strip-btn { background: var(--dw-attn); }
.dw-strip-btn.ghost { background: transparent; }
.dw-strip.warn .dw-strip-btn.ghost { border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--surface)); color: var(--warn); }

/* Inline Add-contact panel */
.dw-addpanel { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 13px; padding: 16px; margin-bottom: 16px; }
.dw-addpanel-head { display: flex; align-items: center; gap: 8px; margin-bottom: 13px; }
.dw-addpanel-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dw-addpanel-hint { font-size: 11.5px; color: var(--muted); }
.dw-addpanel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.dw-addpanel label { display: block; }
.dw-addpanel-lbl { font-size: 11.5px; font-weight: 600; color: var(--faint); margin-bottom: 5px; }
.dw-addpanel input, .dw-addpanel select { width: 100%; height: 36px; border: 1px solid var(--line-strong); border-radius: 8px; padding: 0 11px; font: inherit; font-size: 13px; background: var(--surface); color: var(--ink); outline: none; }
.dw-addpanel-foot { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-top: 14px; }

/* People list + tier groups */
.dw-list { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.dw-group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 16px; background: var(--surface-sub); border-bottom: 1px solid var(--line); }
.dw-group-swatch { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.dw-group-label { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.dw-group-clause { font-size: 11.5px; color: var(--faint); }
.dw-group-count { margin-left: auto; font-size: 11.5px; font-weight: 600; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Person row (flex, wraps; fixed bases on status/actions keep true columns >~950px) */
.dw-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 16px 12px 13px; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; transition: background .12s ease; }
.dw-row:hover { background: var(--surface-sub); }
.dw-row.is-rep { background: var(--dw-rep-row); }
.dw-row-person { display: flex; align-items: center; gap: 10px; flex: 1 1 240px; min-width: 0; }
.dw-avatar { width: 32px; height: 32px; border-radius: 99px; flex: none; display: grid; place-items: center; font-size: 12px; font-weight: 700; }
.dw-row-id { min-width: 0; }
.dw-row-nameline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.dw-row-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.dw-row-email { font-size: 12px; color: var(--faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-row-cov { flex: 1 1 200px; min-width: 0; }
.dw-scope { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 2px 9px; }
.dw-receives { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.4; }
.dw-row-status { flex: 0 0 206px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.dw-pill { font-size: 11.5px; font-weight: 600; border-radius: 99px; padding: 2px 9px; }
.dw-pill.ok { color: var(--ok); background: var(--ok-bg); }
.dw-pill.warn { color: var(--warn); background: var(--warn-bg); }
.dw-pill.muted { color: var(--muted); background: var(--surface-strong); }
.dw-cadence { font-size: 11.5px; color: var(--faint); white-space: nowrap; margin-left: auto; }
.dw-row-actions { flex: 0 0 200px; display: flex; gap: 6px; justify-content: flex-end; opacity: .35; transition: opacity .12s ease; }
.dw-row:hover .dw-row-actions { opacity: 1; }
.dw-rowbtn { height: 29px; padding: 0 10px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 7px; font: inherit; font-size: 12px; font-weight: 600; color: var(--text); cursor: pointer; }
.dw-rowbtn.accent { color: var(--accent); }
.dw-rowbtn-icon { display: inline-grid; place-items: center; width: 29px; height: 29px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: 7px; color: var(--muted); cursor: pointer; }
.dw-readonly { font-size: 11.5px; color: var(--faint); align-self: center; }
.dw-bulkstrip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 11px 16px; background: var(--dw-sub2); border-bottom: 1px solid var(--line); }
.dw-bulkstrip span { font-size: 12px; color: var(--muted); }
.dw-bulkstrip button { margin-left: auto; height: 30px; padding: 0 12px; border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; }
/* Tier tints (fixed literals — handoff §6): org / chain / location / rep */
.dw-t-org  .dw-avatar, .dw-avatar.dw-t-org  { background: var(--dw-org-soft); color: var(--dw-org-ink); }
.dw-t-chain .dw-avatar, .dw-avatar.dw-t-chain { background: var(--dw-chain-soft); color: var(--dw-chain-ink); }
.dw-t-loc  .dw-avatar, .dw-avatar.dw-t-loc  { background: var(--dw-loc-soft); color: var(--dw-loc-ink); }
.dw-t-rep  .dw-avatar, .dw-avatar.dw-t-rep  { background: var(--surface-strong); color: var(--dw-rep-ink); }
.dw-row.dw-t-org   { border-left-color: var(--dw-org); }
.dw-row.dw-t-chain { border-left-color: var(--dw-chain); }
.dw-row.dw-t-loc   { border-left-color: var(--dw-loc); }
.dw-row.dw-t-rep   { border-left-color: var(--dw-rep); }
.dw-scope.dw-t-org   { color: var(--dw-org-ink); background: var(--dw-org-soft); border: 1px solid var(--dw-org-line); }
.dw-scope.dw-t-chain { color: var(--dw-chain-ink); background: var(--dw-chain-soft); border: 1px solid var(--dw-chain-line); }
.dw-scope.dw-t-loc   { color: var(--dw-loc-ink); background: var(--dw-loc-soft); border: 1px solid var(--dw-loc-line); }
.dw-scope.dw-t-rep   { color: var(--dw-rep-ink); background: var(--surface-strong); border: 1px solid var(--dw-rep-line); }
.dw-group-swatch.dw-t-org   { background: var(--dw-org); }
.dw-group-swatch.dw-t-chain { background: var(--dw-chain); }
.dw-group-swatch.dw-t-loc   { background: var(--dw-loc); }
.dw-group-swatch.dw-t-rep   { background: var(--dw-rep-swatch); }
.dw-group-label.dw-t-org   { color: var(--dw-org-ink); }
.dw-group-label.dw-t-chain { color: var(--dw-chain-ink); }
.dw-group-label.dw-t-loc   { color: var(--dw-loc-ink); }
.dw-group-label.dw-t-rep   { color: var(--dw-rep-ink); }
.dw-pill-primary { font-size: 10.5px; font-weight: 700; color: var(--dw-org-ink); background: var(--dw-org-soft); border-radius: 99px; padding: 1px 7px; }

/* Empty states */
/* Applicant review player. Portrait-biased because these are phone recordings, and capped in height
   so a tall video cannot push the Onboard button off the bottom of the pane. */
.dw-applicant-player { margin: 12px 0; border-radius: 13px; overflow: hidden; background: var(--video-letterbox); }
.dw-applicant-player video { display: block; width: 100%; max-height: 60vh; object-fit: contain; background: var(--video-letterbox); }
.dw-empty { border: 1px solid var(--line); border-radius: 13px; padding: 44px 20px; text-align: center; }
.dw-empty-icon { width: 56px; height: 56px; margin: 0 auto; border-radius: 15px; display: grid; place-items: center; }
.dw-empty-icon.accent { background: var(--accent-soft); color: var(--accent); }
.dw-empty-icon.neutral { background: var(--surface-strong); color: var(--dw-rep-ink); }
.dw-empty-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-top: 14px; }
.dw-empty-copy { font-size: 13px; color: var(--muted); line-height: 1.55; margin: 6px auto 0; max-width: 400px; }
.dw-empty-actions { display: flex; gap: 9px; justify-content: center; margin-top: 16px; }

/* Locations tab table */
.dw-loctable { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; }
.dw-loc-head { display: flex; flex-wrap: wrap; gap: 10px 16px; padding: 10px 16px; background: var(--surface-sub); border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint); }
.dw-loc-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dw-loc-row:hover { background: var(--surface-sub); }
.dw-loc-c1 { flex: 1 1 240px; min-width: 0; }
.dw-loc-c2 { flex: 1 1 170px; min-width: 0; }
.dw-loc-c3 { flex: 1 1 200px; min-width: 0; }
.dw-loc-c4 { flex: 0 0 120px; font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dw-loc-store { display: flex; align-items: center; gap: 9px; }
.dw-loc-tile { width: 28px; height: 28px; border-radius: 8px; flex: none; display: grid; place-items: center; background: var(--surface-strong); color: var(--dw-rep-ink); }
.dw-loc-name { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-loc-city { font-size: 11.5px; color: var(--faint); }
.dw-loc-repchip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dw-loc-repavatar { width: 24px; height: 24px; border-radius: 99px; flex: none; display: grid; place-items: center; background: var(--dw-loc-soft); color: var(--dw-loc-ink); font-size: 10.5px; font-weight: 700; }
.dw-loc-repname { font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dw-loc-repvia { font-size: 11px; color: var(--faint); }
.dw-loc-assign { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 10px; border: 1px dashed color-mix(in srgb, var(--dw-attn) 40%, var(--surface)); background: var(--attn-bg); border-radius: 99px; font: inherit; font-size: 12px; font-weight: 600; color: var(--dw-attn); cursor: pointer; }

/* Settings tab */
.dw-settings { max-width: 820px; }
.dw-settings-card { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.dw-settings-section { display: flex; flex-wrap: wrap; gap: 16px 32px; padding: 20px 22px; }
.dw-settings-section + .dw-settings-section { border-top: 1px solid var(--line); }
.dw-settings-section.alt { background: var(--dw-sub2); }
.dw-settings-side { flex: 0 0 210px; min-width: 180px; }
.dw-settings-side h4 { margin: 0; font-size: 13.5px; font-weight: 700; color: var(--ink); }
.dw-settings-side p { font-size: 12px; color: var(--faint); line-height: 1.5; margin: 3px 0 0; }
.dw-settings-fields { flex: 1 1 330px; min-width: 0; max-width: 420px; display: grid; gap: 14px; }
.dw-settings-fields label { display: block; }
.dw-settings-fields .lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.dw-settings-fields input, .dw-settings-fields select, .dw-settings-fields textarea { width: 100%; height: 38px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 11px; font: inherit; font-size: 13.5px; color: var(--ink); background: var(--surface); outline: none; }
.dw-settings-fields textarea { height: auto; min-height: 78px; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.dw-settings-hint { display: block; font-size: 11.5px; color: var(--faint); margin-top: 6px; line-height: 1.45; }
.dw-settings-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; padding: 14px 22px; border-top: 1px solid var(--line); background: var(--dw-sub2); }
.dw-settings-bar .grow { flex: 1 1 200px; min-width: 0; font-size: 11.5px; color: var(--faint); }
.dw-remove-block { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 14px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; }
.dw-remove-block .grow { flex: 1 1 300px; min-width: 0; }
.dw-remove-block h4 { margin: 0; font-size: 13px; font-weight: 700; color: var(--ink); }
.dw-remove-block p { font-size: 12px; color: var(--faint); line-height: 1.45; margin: 2px 0 0; }
.dw-btn-danger { height: 34px; padding: 0 13px; border: 1px solid color-mix(in srgb, var(--dw-danger) 35%, var(--surface)); background: var(--surface); border-radius: 8px; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--dw-danger); cursor: pointer; flex: none; }
@media (max-width: 720px) {
  .dw-row-actions { opacity: 1; }
}

/* Clarity DataTable look — uppercase headers, hover rows, slot cells (templates/locations, users, …) */
.data-table thead th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
}
.data-table th.dt-center,
.data-table td.dt-center {
  text-align: center;
}
.data-table-row {
  cursor: pointer;
}
.data-table-row:hover {
  background: var(--surface-sub);
}
.data-table .dt-primary {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.data-table .dt-sub {
  font-size: 12px;
  color: var(--faint);
}
.data-table td.dt-chevron {
  width: 36px;
  text-align: right;
  color: var(--faint);
}
/* Right-aligned numeric columns (templates/report-results signature) */
.data-table th.dt-num,
.data-table td.dt-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* (Report Results now uses the Clarity ReportResults list — see .rr-metric-strip / .rr-table
   further down; the report detail is the full-page .rrv layout.) */

/* Clarity card grid — Products only (SKU cards, templates/products). Distributors moved to the
   canonical DataTable pattern; Products keeps cards as the deliberate exception (swatch + toggle). */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}
.card-grid-empty {
  grid-column: 1 / -1;
  color: var(--faint);
  font-size: 13px;
  padding: 18px 4px;
}
.entity-card {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px;
  background: #fff;
  cursor: pointer;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.entity-card:hover {
  border-color: var(--accent-line);
  box-shadow: 0 6px 20px rgba(16, 24, 40, 0.08);
}
.entity-card:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
/* Dashed "Add product" tile that trails the Program grid (and stands alone as the empty state). */
.product-add-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 118px;
  border-style: dashed;
  border-color: var(--line-strong, var(--line));
  background: var(--surface-sub, #fafbfc);
  color: var(--muted);
  text-align: center;
}
.product-add-tile:hover {
  border-color: var(--accent);
  color: var(--accent-strong);
  box-shadow: none;
}
.product-add-glyph {
  font-size: 24px;
  font-weight: 400;
  line-height: 1;
}
.product-add-label {
  font-size: 13px;
  font-weight: 600;
}
.entity-card-head {
  display: flex;
  align-items: flex-start;
  gap: 13px;
}
.entity-card-titles {
  flex: 1;
  min-width: 0;
}
.entity-card-swatch {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  flex: none;
}
.entity-card-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  flex: none;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid;
  place-items: center;
}
.entity-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  overflow-wrap: anywhere;
}
.entity-card-sub {
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.entity-card-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.entity-card-spacer {
  margin-left: auto;
}
.entity-card-stat {
  font-size: 12.5px;
  color: var(--text);
}
.entity-card-stat strong {
  color: var(--ink);
}
.entity-card-contacts {
  color: var(--faint);
  text-align: right;
  overflow-wrap: anywhere;
}

.location-row.is-selected {
  background: var(--accent-soft);
}

.location-row td {
  vertical-align: middle;
}

.location-name-cell {
  display: grid;
  gap: 2px;
}

.location-name-cell strong,
.location-name-cell span {
  overflow-wrap: anywhere;
}

.location-editor-form {
  display: grid;
  gap: 12px;
}

.location-editor-form.is-hidden {
  display: none;
}

.location-form-section {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.location-form-section:first-of-type {
  padding-top: 0;
  border-top: 0;
}

.location-form-section h5 {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0;
}

.location-card-grid {
  display: grid;
  gap: 10px;
}

.location-card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.location-card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.location-score-summary {
  display: grid;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
  font-size: 13px;
  /* Bug fix: bound + let the identity header wrap so this info banner can't crush the New Location
     title to zero width (design: "banner overlaps/hides the title"). */
  flex: 1 1 240px;
  max-width: 360px;
}

.location-score-summary strong {
  font-size: 16px;
}

.location-score-summary p {
  margin: 0;
  color: var(--muted);
  line-height: 1.4;
}

/* Branding color control (design polish): native color wheel + a visible/editable hex box, plus an
   accent contrast warning. */
.color-control { display: flex; align-items: center; gap: 8px; }
.color-swatch { width: 46px; height: 38px; padding: 2px; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, #fff); cursor: pointer; }
.color-hex { width: 110px; flex: none; font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; text-transform: lowercase; }
.color-contrast-warn { margin: 6px 0 0; font-size: 12px; color: var(--attn); line-height: 1.4; }

/* Locations — Clarity list-screen + detail-screen (Round 4 rebuild). Detail cards reuse the .access-card
   family; only the screen chrome is location-specific. */
.loc-screen.is-hidden { display: none; }
.loc-list-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.loc-list-toolbar .status-strip { flex: 1 1 auto; margin: 0; }
.loc-toolbar-actions { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.loc-csv-button { display: inline-flex; align-items: center; gap: 7px; }
.loc-filter-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.geocode-status { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--warn-dot); background: var(--warn-bg); color: var(--ink); border-radius: var(--radius); font-size: 13.5px; }
.geocode-status__row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.geocode-status__msg { flex: 1 1 auto; min-width: 220px; }
.geocode-status__failed { margin-top: 8px; }
.geocode-status__failed summary { cursor: pointer; color: var(--warn); font-weight: 600; }
.geocode-status__failed ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 3px; }
.geocode-status__err { color: var(--danger); }
/* Name-based type-of-location suggestions: the admin review strip above the Locations list, and the
   editor's "Suggested: ..." line. Neutral info tone -- a suggestion is not a warning and not a value. */
.loc-suggestion-strip { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 9px 14px; border: 1px solid var(--line); background: var(--info-bg); color: var(--ink); border-radius: var(--radius); font-size: 13.5px; }
.loc-suggestion-strip__msg { flex: 1 1 220px; min-width: 0; }
.loc-editor-suggestion { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 10px; }
/* Type of location + channel: the settings card's third row, under the two toggles. */
.loc-type-row { padding: 13px 2px 2px; }
.loc-type-row .loc-editor-suggestion { margin: 10px 0 0; }
/* The editor header's RESOLVED type (server vocabulary). Unset is a neutral dashed outline so it never
   reads like a classified store. */
.loc-type-chip { display: inline-flex; align-items: center; max-width: 100%; margin-top: 8px; padding: 3px 10px; border: 1px solid transparent; border-radius: 999px; background: var(--accent-soft); color: var(--ink); font: inherit; font-size: 12.5px; font-weight: 600; line-height: 1.4; cursor: pointer; text-align: left; }
.loc-type-chip:hover { border-color: var(--line-strong, var(--line)); }
.loc-type-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.loc-type-chip.is-unset { background: transparent; border: 1px dashed var(--line-strong, var(--line)); color: var(--muted); font-weight: 500; }
.loc-search-field { flex: 1 1 240px; min-width: 200px; }
.loc-search-field input { width: 100%; }
.loc-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px; border: 1px solid var(--line-strong, var(--line)); background: var(--surface, #fff); border-radius: 8px; font: inherit; font-size: 13px; font-weight: 600; color: var(--text, var(--ink)); cursor: pointer; margin-bottom: 16px; }
.loc-identity-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; flex-wrap: wrap; }
.loc-identity-lines { flex: 1 1 240px; min-width: 0; }
.loc-identity-lines h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.loc-identity-lines .muted { font-size: 13px; margin-top: 2px; }
.loc-screen .location-editor-form { max-width: 720px; }
.loc-screen .location-list-shell { max-height: none; }
.sr-only-label > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* Chains — Clarity list-screen + detail-screen (Round 4 rebuild): reuses .loc-screen chrome + .access-card
   detail cards; only the cascade info banner + the form grid are chain-specific. */
.chain-info-banner { display: flex; align-items: flex-start; gap: 11px; background: var(--surface-sub); border: 1px solid var(--line); border-radius: 13px; padding: 13px 16px; margin-bottom: 16px; font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.chain-info-banner svg { color: var(--accent); flex: none; margin-top: 1px; }
.chain-info-banner strong { color: var(--ink); font-weight: 700; }
.retail-chain-form { display: grid; gap: 12px; max-width: 720px; margin-inline: auto; }

/* Clarity: center single-column editor/detail screens instead of stranding the form far-left with ~45%
   empty white. List screens (loc/access list) and true two-column layouts keep their full width. */
#locationDetailScreen,
#chainDetailScreen,
#productEditorScreen,
#accessDetailScreen {
  max-width: 760px;
  margin-inline: auto;
}
.loc-screen .retail-chain-list-shell { max-height: none; }
/* Chains list: let the 5-column table shrink to fit the content column instead of inheriting the
   global table{min-width:1120px}, which overflowed the shell and clipped the Primary contact + chevron
   columns. Mirrors the Locations .location-list-table override. */
.retail-chain-list-shell .data-table { min-width: 680px; }

/* Program (renamed Products) page: catalog grid + sampling levels + event products as stacked sections;
   the product editor is a .loc-screen detail swap reusing .access-card + .retail-chain-form. */
.program-section { margin-top: 18px; }
.program-usage-checks { display: flex; flex-wrap: wrap; gap: 10px; }
.check-pill.is-locked { opacity: 0.72; }
.program-lock-note { margin: 8px 0 0; font-size: 12px; color: var(--muted); }
.product-image-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.product-image-preview { max-height: 96px; max-width: 96px; border-radius: 8px; object-fit: contain; border: 1px solid var(--line); background: var(--surface); }
.product-image-actions { gap: 10px; align-items: center; }

/* Shelf Review (shelf-intelligence Gap C) — admin validates the AI's shadow reads */
.shelf-review-body { display: flex; flex-direction: column; gap: 16px; }
.sr-note { color: var(--muted); font-size: 13px; }
.sr-loading { padding: 24px 0; }
.sr-sub { color: var(--muted); font-size: 12px; }
.sr-gauge { display: flex; align-items: center; gap: 20px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sr-gauge-pct { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -1px; }
.sr-gauge-pct.sr-muted { font-size: 30px; color: var(--muted); }
.sr-gauge-unit { font-size: 20px; font-weight: 600; margin-left: 2px; color: var(--muted); }
.sr-gauge-lines { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.sr-gauge-title { font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sr-verdict-bar { display: flex; height: 8px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--muted) 18%, transparent); margin-top: 2px; }
.sr-seg.is-correct { background: var(--ok); }
.sr-seg.is-incorrect { background: var(--danger); }
.sr-seg.is-unsure { background: color-mix(in srgb, var(--muted) 55%, transparent); }
.sr-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.sr-card { display: flex; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.sr-card.is-setup { border-left: 4px solid var(--warn-dot); }
.sr-card.is-reviewed { background: color-mix(in srgb, var(--muted) 6%, var(--surface)); }
/* 132px (was 104) keeps ~166px of card body at the grid's 340px minimum — the stock selects need it.
   The REAL grading surface is the click-to-enlarge lightbox, not the thumb. */
.sr-photo { width: 132px; height: 132px; border-radius: 8px; object-fit: cover; border: 1px solid var(--line); flex-shrink: 0; background: color-mix(in srgb, var(--muted) 8%, transparent); }
.sr-photo-empty { display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; }
/* Grading needs the full shelf: the thumb opens the report lightbox on click. */
.sr-photo-zoomable { cursor: zoom-in; }
.sr-photo-zoomable:hover, .sr-photo-zoomable:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.sr-card-body { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.sr-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sr-tag { font-family: ui-monospace, monospace; font-size: 11px; color: var(--muted); background: color-mix(in srgb, var(--muted) 12%, transparent); padding: 1px 6px; border-radius: 4px; }
.sr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.sr-pill { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 2px 9px; border-radius: 999px; }
.sr-tone-ok { background: var(--ok-bg); color: var(--ok); }
.sr-tone-warn { background: var(--warn-bg); color: var(--warn); }
.sr-tone-danger { background: var(--danger-bg); color: var(--danger); }
.sr-tone-muted { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); }
.sr-skus { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.sr-skus li { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; }
.sr-skus li.is-absent > span:first-child { color: var(--muted); text-decoration: line-through; }
.sr-verdict-actions { display: flex; gap: 8px; margin-top: 2px; flex-wrap: wrap; }
.sr-verdict-actions .secondary { padding: 4px 10px; font-size: 13px; }
.sr-verdict-done { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.sr-change-btn { background: none; border: none; color: var(--accent); font-size: 13px; cursor: pointer; padding: 0; }
.sr-alerts-bar { display: flex; flex-direction: column; gap: 10px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); margin-bottom: 4px; }
.sr-alerts-head { display: flex; flex-direction: column; gap: 2px; }
.sr-alerts-title { display: flex; align-items: center; gap: 10px; }
.sr-seg { display: inline-flex; gap: 3px; padding: 3px; background: color-mix(in srgb, var(--muted) 12%, transparent); border-radius: 10px; align-self: flex-start; }
.sr-seg-btn { border: 0; background: transparent; font: inherit; font-size: 13px; font-weight: 600; color: var(--muted); padding: 6px 16px; border-radius: 7px; cursor: pointer; }
.sr-seg-btn.is-on { background: var(--surface); color: var(--text); box-shadow: 0 1px 2px color-mix(in srgb, var(--muted) 30%, transparent); }
.sr-alerts-hint { font-size: 12.5px; color: var(--muted); }
.sr-alerts-thr { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 22%, transparent); }
.sr-alerts-thr-row { font-size: 13px; color: var(--text); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sr-alerts-thr-row input { width: 58px; font: inherit; padding: 5px 7px; border: 1px solid var(--line); border-radius: 7px; background: var(--surface); color: var(--text); text-align: center; }
.sr-alerts-consequence { font-size: 12.5px; color: var(--text); line-height: 1.5; }
.sr-meta { margin-top: -2px; }
.sr-conf { font-size: 12px; color: var(--faint, var(--muted)); }
.sr-conf.is-attn { color: var(--warn); font-weight: 600; }
.sr-correct { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: color-mix(in srgb, var(--muted) 6%, var(--surface)); }
.sr-correct-title { font-weight: 600; font-size: 13px; }
.sr-correct-grid { display: flex; gap: 12px; flex-wrap: wrap; }
.sr-correct-row { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.sr-correct-row select { font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text); }
.sr-correct-skus { display: flex; flex-direction: column; gap: 5px; }
.sr-correct-sku { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; flex-wrap: wrap; }
/* min-width keeps "Not on shelf" / "Last unit(s)" readable; flex-wrap drops the select under the name
   when a narrow card can't fit both on one line. */
.sr-correct-sku select { min-width: 128px; max-width: 100%; }
.sr-correct-actions { display: flex; gap: 10px; align-items: center; }
.sr-empty { margin-top: 4px; }
@media (max-width: 640px) {
  .sr-list { grid-template-columns: 1fr; }
  .sr-gauge { flex-wrap: wrap; }
  /* Phone: stack the card — a fixed-width photo beside the body starves the verdict buttons and the
     correction selects (the owner graded the first pass from a phone-sized thumb; never again). */
  .sr-card { flex-direction: column; }
  .sr-photo { width: 100%; height: 200px; }
}

.location-geocode-row {
  align-items: center;
  justify-content: flex-start;
}

.location-detail-actions,
.product-detail-actions {
  justify-content: space-between;
}

/* Geography — Clarity coverage view (Round 4 rebuild): metric strip + state accordion with a coverage
   bar + Gap flag; city rows with inline manager pickers + coverage chips. */
.geography-intro { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 4px 0 16px; max-width: 860px; }

.geography-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 14px;
}

.geography-search-field { flex: 1 1 auto; }
.geography-search-field input { width: 100%; }

.geography-summary {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.geography-stat {
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 14px 16px;
  background: var(--surface, #fff);
}

.geography-stat span {
  display: block;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.geography-stat strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
}

.geography-state-list {
  display: grid;
  gap: 12px;
}

.geography-state-panel {
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--surface, #fff);
  overflow: clip;
}

.geography-state-panel summary {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}

.geography-state-panel summary::-webkit-details-marker { display: none; }
.geography-state-panel:hover summary { background: var(--surface-sub); }
.geography-state-panel[open] summary { background: transparent; border-bottom: 1px solid var(--surface-sub); }

.geography-coverage-bar {
  flex: 1;
  min-width: 60px;
  height: 12px;
  background: var(--surface-sub);
  border-radius: 6px;
  overflow: hidden;
}

.geography-coverage-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 6px;
}

/* ⚠ .geography-coverage-fill.is-gap IS GONE ON PURPOSE. It recoloured the ACTIVATION bar to report
   MANAGER coverage -- one atom carrying two unrelated facts, so the only thing that ever changed
   colour was a fact the bar was not measuring. Ownership lives in the badge beside it now. */
.geography-gap-badge { flex: none; }
.geography-footnote { margin: 12px 0 0; }

/* --- Ambassador supply ledger -------------------------------------------------------------------
   Sits above the state accordion. Reuses the coverage-bar vocabulary deliberately (same screen, same
   visual language) but every LABEL is distinct, because "coverage"/"Gap" already mean manager
   assignment here. Tokens only -- portal/styles forbid raw hex outside :root. */
.supply-panel { margin: 0 0 18px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; }
.supply-head { display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: flex-start; justify-content: space-between; margin-bottom: 12px; }
.supply-title { margin: 0 0 2px; font-size: 15px; }
.supply-sub { margin: 0; max-width: 62ch; color: var(--muted); font-size: 12.5px; line-height: 1.45; }
.supply-totals { display: flex; gap: 18px; flex: none; }
.supply-total { display: flex; flex-direction: column; }
.supply-total strong { font-size: 20px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.supply-total span { font-size: 11.5px; color: var(--muted); }
.supply-total.is-attn strong { color: var(--danger); }

.supply-rows { display: flex; flex-direction: column; gap: 2px; }
.supply-row { display: grid; grid-template-columns: minmax(150px, 1.4fr) minmax(120px, 1fr) minmax(120px, auto) auto; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 6px; }
.supply-row:nth-child(odd) { background: var(--surface-sub); }
.supply-place strong { display: block; font-size: 13.5px; }
.supply-counts { font-size: 11.5px; color: var(--muted); }
.supply-unknown { color: var(--warn); }
/* Key-person risk, shown alongside a louder headline signal rather than instead of it -- see the
   note at the soloRisk computation in public/app.js. Danger, not warn: 'Short' is a sizing problem
   you plan around, one ambassador away is a city at zero tomorrow. */
.supply-solo { color: var(--danger); cursor: help; }

.supply-meter { display: flex; align-items: center; gap: 8px; }
.supply-bar { flex: 1; min-width: 50px; height: 10px; background: var(--surface-sub); border: 1px solid var(--border); border-radius: 5px; overflow: hidden; }
.supply-fill { display: block; height: 100%; background: var(--ok-dot); border-radius: 5px; }
.supply-fill.is-short { background: var(--lb-sunrise); }
.supply-gap { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ok); min-width: 30px; text-align: right; }
.supply-gap.is-short { color: var(--danger); }

.supply-need { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* The measured pair. `supply-actual` is what actually happened and carries the weight; the
   qualifier beside it (no target set / target on 3 of 8) is deliberately quieter, because it
   describes configuration rather than performance. */
.supply-actual { display: block; color: var(--text); }
.supply-note-inline { display: block; font-size: 11px; color: var(--faint); cursor: help; }
.supply-est { color: var(--warn); cursor: help; }
.supply-signal { flex: none; white-space: nowrap; }
.supply-footnote { margin: 10px 0 0; }
/* Who is missing from the numbers and who can put them back. Rides the shared .inline-alert box --
   whose `display: grid` would otherwise stack this single paragraph oddly -- and sits between the
   totals and the rows, because it qualifies every number below it. */
.supply-gaps { display: block; margin: 0 0 12px; font-size: 12px; color: var(--muted); }

@media (max-width: 720px) {
  .supply-row { grid-template-columns: 1fr auto; row-gap: 6px; }
  .supply-meter, .supply-need { grid-column: 1 / -1; }
}
/* --- end Ambassador supply ledger --- */

.geography-state-chev {
  flex: none;
  color: var(--faint);
  font-size: 16px;
  transition: transform 0.18s ease;
}

.geography-state-panel[open] .geography-state-chev { transform: rotate(180deg); }

.geography-state-body { padding: 14px 16px 16px; }
.geography-state-coverage { margin-bottom: 12px; }

.geography-manager-inline {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.geography-manager-stack {
  display: grid;
  gap: 8px;
}

.geography-manager-picker {
  display: grid;
  gap: 4px;
}

.geography-manager-picker span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.geography-manager-picker select {
  min-width: 0;
}

.geography-state-title,
.geography-city-main {
  display: grid;
  gap: 3px;
}

.geography-state-title {
  flex: none;
  width: 150px;
}

.geography-state-title strong { font-size: 13.5px; color: var(--ink); }
.geography-state-counts { flex: none; }

.geography-state-title span,
.geography-city-main span,
.store-preview-list span {
  color: var(--muted);
  font-size: 12px;
}

.geography-state-counts {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.geography-city-header,
.geography-city-row {
  display: grid;
  grid-template-columns: minmax(180px, 0.9fr) minmax(220px, 1fr) minmax(220px, 0.8fr);
  gap: 14px;
  align-items: start;
}

.geography-city-header {
  padding: 8px 0;
  color: var(--faint);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--surface-sub);
}

.geography-city-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--surface-sub);
}

.geography-city-row:last-child {
  border-bottom: 0;
}

.coverage-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.coverage-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  max-width: 100%;
  min-height: 25px;
  border-radius: 999px;
  padding: 3px 8px;
  background: var(--line);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 700;
}

.coverage-chip strong {
  color: var(--ink);
}

.muted-chip {
  background: var(--line);
  color: var(--muted);
}

/* Coverage rolled up from a broader scope (state/market/territory/region) renders muted so a city's
   own directly-assigned manager reads as the full-color, authoritative chip. */
.coverage-chip.is-inherited {
  background: var(--surface-strong);
  color: var(--muted);
  font-weight: 600;
}

.coverage-chip.is-inherited strong {
  color: var(--muted);
}

.store-preview-list {
  display: grid;
  gap: 5px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.store-preview-list li {
  display: grid;
  gap: 1px;
}

.advanced-field-group {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.advanced-field-group summary {
  cursor: pointer;
  font-weight: 800;
}

.advanced-field-group label {
  margin-top: 10px;
}

.empty-state {
  display: grid;
  gap: 4px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--soft);
  color: var(--muted);
}

/* --- Clarity state primitives ---------------------------------------------------------------------
   Two things the Clarity hand-off assumes and public/ did not have: a Skeleton, and an EmptyState that
   can carry a TONE and an error reference. The React kit has both; this app has no bundler and cannot
   import it, so they are reproduced here against the same tokens.

   ⚠ THE BASE .empty-state ABOVE IS LEFT ALONE ON PURPOSE. Thirteen call sites already render it as the
   small dashed box, and re-shaping it to match the hand-off would silently restyle every one of them.
   The hand-off's larger centred treatment is a MODIFIER, so the two can coexist until every screen has
   been rebuilt. */

.empty-state.is-panel {
  justify-items: center;
  text-align: center;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 40px 20px;
  background: var(--surface);
}

/* The icon chip. Tone lives here and on the title, never on the body copy -- a whole panel tinted
   `attn` reads as an error even when it is only saying "nothing here yet". */
.empty-state-icon {
  width: 56px;
  height: 56px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--accent-soft);
  color: var(--accent);
}

.empty-state.is-panel > strong {
  margin-top: 15px;
  font-size: 15px;
  color: var(--ink);
}

.empty-state-desc {
  margin-top: 7px;
  max-width: 44ch;
  font-size: 13px;
  line-height: 1.55;
  color: var(--muted);
}

/* ⚠ A REFERENCE THE USER CAN READ BACK TO US, not a stack trace. Monospaced so a support call can
   spell it out, and muted so it never competes with the sentence telling them what happened. */
.empty-state-ref {
  margin-top: 9px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11px;
  color: var(--faint);
}

.empty-state.tone-attn .empty-state-icon { background: var(--attn-bg); color: var(--attn); }
.empty-state.tone-warn .empty-state-icon { background: var(--warn-bg); color: var(--warn); }
.empty-state.tone-neutral .empty-state-icon { background: var(--surface-strong); color: var(--muted); }

/* Skeleton. A shimmer over the two greys either side of a card edge, so a loading row reads as the
   shape of the row it will become rather than as a blank gap. */
.skeleton {
  display: block;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--surface-strong) 25%, var(--line) 37%, var(--surface-strong) 63%);
  background-size: 400% 100%;
  animation: lb-shimmer 1.4s ease infinite;
}

.skeleton-row {
  display: grid;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}

.skeleton-row:last-child { border-bottom: 0; }

@keyframes lb-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ⚠ A LOOPING SHIMMER IS EXACTLY WHAT THIS SETTING EXISTS FOR. It never stops on its own, so for a
   reader with vestibular sensitivity it is motion with no end and no way to dismiss it. The skeleton
   still has to read as "loading", so the animation goes and a flat fill stays. */
@media (prefers-reduced-motion: reduce) {
  .skeleton {
    animation: none;
    background: var(--surface-strong);
  }
}
/* --- end Clarity state primitives --- */

/* Store-locator preview (Branding & Portal) */
.locator-preview-count {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--muted);
}
.locator-preview-count strong {
  color: var(--ink);
}
.locator-preview-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.locator-preview-list li {
  font-size: 0.88rem;
  color: var(--ink);
}
.locator-preview-name {
  font-weight: 600;
}
.locator-preview-blocked {
  margin: 12px 0 6px;
  font-size: 0.92rem;
  color: var(--muted);
}
.locator-preview-blocked strong {
  color: var(--attn);
}
.locator-preview-reason {
  color: var(--muted);
}

.empty-state strong {
  color: var(--ink);
}

.is-hidden {
  display: none !important;
}

.filter-line {
  margin-bottom: 14px;
}

.filter-line input {
  max-width: 340px;
}

.settings-layout {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) minmax(320px, 1.1fr);
  gap: 16px;
}

.company-branding-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 16px;
  align-items: start;
}

.company-branding-form {
  display: grid;
  gap: 10px;
}

.branding-preview {
  --preview-accent: var(--accent);
  --preview-gold: var(--warm);
  display: grid;
  gap: 10px;
}

.branding-preview-visual {
  min-height: 220px;
  display: grid;
  align-content: end;
  gap: 12px;
  border-radius: 8px;
  padding: 18px;
  background:
    linear-gradient(160deg, rgba(16, 35, 31, 0.86), rgba(31, 122, 88, 0.7)),
    var(--lb-navy);
  background-size: cover;
  background-position: center;
  color: #fff;
}

.branding-preview-mark,
.branding-preview-logo {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: #fff;
  color: var(--preview-accent);
  font-weight: 900;
  object-fit: contain;
}

.branding-preview-logo {
  padding: 6px;
}

.branding-preview-visual strong,
.branding-preview-copy strong {
  display: block;
}

.branding-preview-visual span,
.branding-preview-copy span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  line-height: 1.4;
}

.branding-preview-visual span {
  color: rgba(255, 255, 255, 0.82);
}

.branding-preview-copy {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.report-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(320px, 1.2fr);
  gap: 16px;
  margin-bottom: 16px;
}

.report-workspace-panel {
  display: none;
}

.report-workspace-panel.is-active {
  display: block;
}

[data-platform-workspace-panel]:not(.is-active) {
  display: none !important;
}

[data-brand-settings-panel]:not(.is-active) {
  display: none !important;
}

.report-template-panel {
  margin-bottom: 16px;
}

.report-results-panel,
.report-impact-panel {
  margin-bottom: 16px;
}

.nested-card {
  border: 1px solid var(--line);
  background: #fff;
}

.compact-metrics {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.report-status-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.report-status-pills span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.metric-button {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-sub);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.metric-button:hover,
.metric-button:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(31, 122, 88, 0.12);
  outline: none;
}

.metric-button:active {
  transform: translateY(1px);
}

.metric-button span,
.metric-button strong {
  pointer-events: none;
}

.report-insight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.report-insight-grid div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-sub);
}

.report-insight-grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.report-insight-grid strong {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  overflow-wrap: anywhere;
}

.report-insight-grid small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  line-height: 1.35;
}

.report-analytics-panel {
  margin: 14px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-sub);
}

.report-analytics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.report-analytics-card {
  display: grid;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: #fff;
}

.report-analytics-card h5 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0;
}

.report-analytics-list {
  display: grid;
  gap: 6px;
}

.report-analytics-row {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(150px, 0.9fr);
  gap: 10px;
  align-items: start;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}

.report-analytics-row:first-child {
  border-top: 0;
  padding-top: 0;
}

.report-analytics-row strong,
.report-analytics-row span,
.report-analytics-row small {
  display: block;
  overflow-wrap: anywhere;
}

.report-analytics-row strong {
  font-size: 13px;
}

.report-analytics-row span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.report-analytics-row small {
  color: var(--ink);
  font-size: 12px;
  line-height: 1.35;
}

.report-detail-panel {
  margin-bottom: 14px;
}

.report-review-controls {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(170px, 0.55fr) minmax(190px, 0.55fr);
  gap: 10px;
  align-items: center;
}

.report-detail-empty,
.report-detail-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 14px;
}

/* Report approval (docs/RESPONSIVE_SPEC B3): on phone the review action moves from the header to a
   sticky bottom bar so it's always reachable. Desktop keeps the inline header action. */
.report-review-sticky {
  display: none;
}
@media (max-width: 599px) {
  .report-review-inline {
    display: none;
  }
  .report-review-sticky {
    display: flex;
    position: sticky;
    bottom: 0;
    z-index: 10;
    gap: 10px;
    margin: 12px -14px -14px;
    padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border-top: 1px solid var(--line);
    box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
  }
  .report-review-sticky .small-button {
    flex: 1;
  }
}
/* Mobile sticky action bar for long detail/edit forms (Location, Chain, Access user) — same canon as
   the report-approval bar so the primary Save/Remove actions stay reachable without scrolling to the
   bottom of a long form (any width, desktop included). Layout (flex/justify) is inherited from the form's own action row. */
.detail-actions-sticky {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-top: 12px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 10px rgba(16, 24, 40, 0.06);
}
/* Quick toggles (docs/RESPONSIVE_SPEC B5): stack the label above the switch on the narrowest phones. */
@media (max-width: 420px) {
  .loc-toggle-row,
  .publish-toggle-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}

.report-detail-empty {
  display: grid;
  gap: 4px;
  color: var(--muted);
}

.report-detail-empty strong {
  color: var(--ink);
}

.report-detail-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.report-detail-metrics div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--surface-sub);
}

.report-detail-metrics span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.report-detail-metrics strong {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}

.report-event-context {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.report-event-context div {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}

.report-event-context .wide {
  grid-column: 1 / -1;
}

.report-event-context span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.report-event-context strong {
  display: block;
  margin-top: 3px;
  overflow-wrap: anywhere;
}

.report-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 12px;
}

.report-detail-grid section,
.report-product-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-sub);
}

.report-detail-grid h5,
.report-product-detail-list h5 {
  margin: 0 0 8px;
}

.report-answer-list {
  display: grid;
  gap: 8px;
  margin: 0;
}

.report-answer-list div {
  display: grid;
  gap: 2px;
}

.report-answer-list dt {
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
}

.report-answer-list dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.report-answer-list.compact {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.report-photo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 8px;
}

.report-photo-link {
  position: relative;
  display: grid;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px;
  background: #fff;
  color: var(--accent);
  font-size: 12px;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.report-photo-thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--surface-strong);
  color: var(--muted);
  font-weight: 800;
}

.report-photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Report-photo lightbox: click a photo in Report Review to view it full-size in-app; the anchor stays a
   middle-/cmd-click "open in new tab" fallback. Chrome uses rgba + surface tokens only (no raw hex). */
.report-photo-link[href] { cursor: zoom-in; }
.report-lightbox-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
}
.report-lightbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  max-height: 100%;
  margin: 0;
}
.report-lightbox-img {
  max-width: 92vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
}
.report-lightbox-caption {
  color: rgba(255, 255, 255, 0.92);
  font-size: 13px;
  text-align: center;
  max-width: 82vw;
  overflow-wrap: anywhere;
}
.report-lightbox-count {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}
.report-lightbox-btn {
  position: absolute;
  background: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.95);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.report-lightbox-btn:hover { background: rgba(255, 255, 255, 0.26); }
.report-lightbox-close {
  top: 16px;
  right: 20px;
  width: 40px;
  height: 40px;
  font-size: 24px;
}
.report-lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  font-size: 28px;
}
.report-lightbox-prev { left: 16px; }
.report-lightbox-next { right: 16px; }

.report-product-detail-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.report-product-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.report-template-json textarea {
  min-height: 280px;
  font-family: Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.report-template-preview {
  display: grid;
  gap: 10px;
  margin: 10px 0 14px;
}

.report-template-builder {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

/* ===== Report Builder — Clarity rework (compact rows + single editor + live preview + publish bar).
   All tokens, no new hexes. ===== */
.inline-alert.rb-alert { border-color: var(--accent-line); background: var(--accent-soft); }
.inline-alert.rb-alert strong { color: var(--accent-strong); font-size: 13px; }
.rb-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.rb-tab { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 600; cursor: pointer; }
.rb-tab:hover { background: var(--surface-sub); }
.rb-tab.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rb-tab-count { font-variant-numeric: tabular-nums; opacity: 0.7; }
.rb-tab.is-active .rb-tab-count { opacity: 1; }

.rb-layout { display: grid; grid-template-columns: minmax(0, 1fr) 366px; gap: 20px; align-items: start; }
@media (max-width: 1080px) { .rb-layout { grid-template-columns: 1fr; } }
.rb-main { min-width: 0; }
.rb-reorder-hint { font-size: 12px; color: var(--faint); margin: 4px 0 8px; }
.rb-perm-note { font-size: 12px; margin: 12px 0 0; }
.rb-add { margin-top: 10px; }

.rb-list { display: grid; gap: 6px; }
.rb-row { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.rb-row:hover { border-color: var(--line-strong); }
.rb-row:hover .rb-drag, .rb-row:hover .rb-remove { opacity: 1; }
.rb-row.is-selected { border-color: var(--accent); background: var(--accent-soft); }
.rb-row.is-off { background: var(--surface-sub); }
.rb-row.is-off .rb-row-label { color: var(--faint); }
.rb-row.rb-dragging { opacity: 0.5; }
.rb-drag { opacity: 0; color: var(--faint); cursor: grab; font-size: 14px; letter-spacing: -3px; transition: opacity 0.12s ease; flex: none; }
.rb-row-main { flex: 1; min-width: 0; }
.rb-row-label { font-size: 13.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rb-row-meta { font-size: 11.5px; color: var(--faint); }
.rb-badge { flex: none; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px; background: var(--surface-sub); color: var(--muted); }
.rb-badge.is-required { background: var(--accent-soft); color: var(--accent); }
.rb-remove { opacity: 0; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border: 0; background: transparent; color: var(--faint); border-radius: 7px; cursor: pointer; transition: opacity 0.12s ease, background 0.12s ease, color 0.12s ease; }
.rb-remove:hover { background: var(--danger-bg); color: var(--danger); opacity: 1; }

.rb-switch { position: relative; width: 38px; height: 22px; border-radius: 999px; border: 0; background: var(--line-strong); cursor: pointer; padding: 0; flex: none; transition: background 0.15s ease; }
.rb-switch.is-on { background: var(--accent); }
.rb-switch-knob { position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2); transition: transform 0.15s ease; }
.rb-switch.is-on .rb-switch-knob { transform: translateX(16px); }
.rb-switch:disabled { opacity: 0.5; cursor: default; }

/* Location Leads reuses the report builder's row/editor vocabulary above, so the two question
   editors look and behave identically -- an admin learns one. It only adds a section group, because
   its questions are grouped by scope (the location / the contact) instead of by tab. */
.rb-section + .rb-section { margin-top: 18px; }
.rb-section .rb-preview-section { margin-bottom: 8px; }

.rb-editor { margin-top: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 16px; display: grid; gap: 14px; }
.rb-editor-head { display: flex; align-items: baseline; justify-content: space-between; }
.rb-editor-head strong { font-size: 13.5px; }
.rb-field { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--muted); }
.rb-field .rb-input, .rb-field .rb-select { font-weight: 400; }
.rb-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rb-field-grid .rb-options.is-hidden { display: none; }
.rb-toggle-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface-sub); }
.rb-toggle-row strong { font-size: 13px; display: block; }
.rb-toggle-row .muted { font-size: 12px; }
.rb-mapping { border: 1px solid var(--line); border-radius: 9px; padding: 12px; display: grid; gap: 8px; }
.rb-mapping-head { display: flex; align-items: center; gap: 10px; }
.rb-mapping-head strong { font-size: 13px; }
.rb-mapping-note { font-size: 12px; margin: 0; }
.rb-analyze { margin-top: 2px; }

.rb-preview { position: sticky; top: 88px; border: 1px solid var(--line); border-radius: 13px; background: var(--surface-sub); padding: 14px; }
@media (max-width: 1080px) { .rb-preview { position: static; } }
.rb-preview-head { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.rb-preview-head span { font-weight: 400; }
.rb-preview-card { background: var(--surface); border: 1px solid var(--line); border-radius: 11px; padding: 14px; display: grid; gap: 12px; }
.rb-preview-section { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--faint); text-transform: uppercase; }
.rb-pf { display: grid; gap: 5px; }
.rb-pf-label { font-size: 12.5px; font-weight: 600; color: var(--ink); }
.rb-req { color: var(--danger); }
.rb-pf-input { height: 34px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sub); }
.rb-pf-num { display: flex; align-items: center; padding: 0 10px; color: var(--faint); }
.rb-pf-textarea { height: 56px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sub); }
.rb-pf-photo { height: 50px; display: grid; place-items: center; border: 1px dashed var(--line-strong); border-radius: 8px; color: var(--faint); font-size: 12px; }
.rb-pf-select { height: 34px; display: flex; align-items: center; justify-content: space-between; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sub); color: var(--muted); font-size: 12.5px; }
.rb-pf-yesno { display: flex; gap: 8px; }
.rb-pf-yesno span { flex: 1; text-align: center; padding: 7px 0; border: 1px solid var(--line-strong); border-radius: 8px; font-size: 12.5px; color: var(--muted); }

.rb-empty { text-align: center; padding: 28px 20px; border: 1px dashed var(--line-strong); border-radius: 11px; display: grid; gap: 6px; }
.rb-empty strong { font-size: 14px; color: var(--ink); }

.report-builder-savebar { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 18px; padding: 14px 0 4px; background: var(--surface); border-top: 1px solid var(--line); }
.report-builder-dirty { font-size: 12px; font-weight: 600; }
.report-builder-dirty.status { padding: 3px 10px; border-radius: 999px; }
.report-builder-savebar-note { font-size: 12.5px; color: var(--muted); }
.report-builder-savebar-actions { margin-left: auto; display: flex; gap: 10px; }

.report-template-section {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--surface-sub);
}

.report-template-section-head,
.report-question-topline {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
}

.report-template-section-head h5 {
  margin: 0 0 4px;
}

.report-template-section-head p {
  margin: 0;
  color: var(--muted);
}

.report-template-question-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.report-template-question {
  display: grid;
  gap: 10px;
  padding: 7px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
}

.report-question-grid {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(160px, 0.6fr) minmax(220px, 0.8fr);
  gap: 10px;
  align-items: end;
}

.report-question-grid label {
  display: grid;
  gap: 4px;
}

.report-question-grid .checkbox-line {
  display: flex;
  align-items: center;
  min-height: 40px;
}

.report-question-options.is-hidden {
  display: none;
}

/* Report Builder — Clarity rebuild (Round 4): sections reuse .access-card; question rows are sub-cards;
   the label is a prominent input in the topline; required/active are check-pills. */
.report-template-intro { font-size: 13px; color: var(--muted); line-height: 1.5; margin: 4px 0 16px; max-width: 820px; }
.report-template-section { margin: 0; }
.report-template-section-head { margin-bottom: 2px; }
.report-template-question { padding: 14px; gap: 12px; font-size: 13px; }
.report-question-label-input { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; }
.report-question-grid { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; }
.report-question-flags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.report-template-empty { padding: 6px 2px; margin: 0; }

.sampling-analytics-dashboard {
  display: grid;
  gap: 14px;
}

.analytics-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
}

.analytics-hero h4 {
  margin: 0 0 4px;
  font-size: 22px;
}

.analytics-scope {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
  max-width: 520px;
}

.analytics-scope span {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  padding: 6px 9px;
}

.analytics-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 10px;
}

/* Today board date/context header — names the day (the view had no date at all) and shows a live
   "as of" time so the board reads as a live day-of surface. */
.today-dashboard-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 4px;
}
.today-dashboard-head h3 {
  margin: 0;
  font-size: 1.15rem;
  line-height: 1.2;
}
.today-dashboard-head .helper-text {
  margin: 0;
}

.analytics-metric-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.analytics-metric-card span,
.analytics-stat-line span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.analytics-metric-card strong {
  display: block;
  margin-top: 5px;
  color: var(--ink);
  font-size: 24px;
  line-height: 1.05;
}

.analytics-metric-card small,
.analytics-stat-line small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
  line-height: 1.35;
}

.analytics-grid {
  display: grid;
  gap: 14px;
  align-items: start;
}

.analytics-grid.two-column {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.analytics-grid.three-column {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.analytics-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}

.analytics-card-head h4 {
  margin: 0 0 4px;
}

.analytics-health-card.good {
  border-left: 4px solid var(--primary);
}

.analytics-health-card.watch {
  border-left: 4px solid var(--gold);
}

.analytics-health-card.attention {
  border-left: 4px solid var(--danger);
}

.analytics-story-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 18px;
  color: var(--ink);
}

.analytics-funnel {
  display: grid;
  gap: 9px;
}

.analytics-funnel-row {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 54px;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.analytics-funnel-row > span {
  color: var(--muted);
  font-weight: 800;
}

.analytics-funnel-row > div {
  height: 10px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.analytics-funnel-row i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
}

.analytics-funnel-row strong {
  text-align: right;
}

.analytics-stat-list {
  display: grid;
  gap: 8px;
}

.analytics-stat-line {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
}

.analytics-stat-line:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.analytics-stat-line small {
  grid-column: 1 / -1;
  margin-top: 0;
}

.analytics-stat-line strong {
  font-size: 18px;
}

.analytics-recommendation-list {
  display: grid;
  gap: 8px;
}

.analytics-recommendation {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 10px;
}

.analytics-recommendation p {
  margin: 4px 0 0;
  color: var(--muted);
  line-height: 1.4;
}

.analytics-table-card {
  min-width: 0;
}

.analytics-table-card td,
.analytics-table-card th {
  white-space: normal;
}

.report-template-question em,
.report-template-question small {
  color: var(--muted);
  font-style: normal;
}

.report-template-question.is-disabled {
  opacity: 0.55;
}

.message-controls {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(150px, 220px) minmax(140px, 190px);
  gap: 10px;
  margin-bottom: 14px;
}

.message-metrics {
  margin-bottom: 14px;
}

/* Messaging (Event Messages) — Clarity two-pane chat (Round 4 rebuild): one bordered container, a
   borderless thread list, conversation bubbles aligned left (ambassador) / right (internal), a docked
   composer. Test-pinned selectors (.messages-layout / .message-metrics / .message-thread-row /
   .message-bubble.from-ambassador) are preserved. */
.messages-layout {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--surface, #fff);
}

.message-thread-panel {
  width: 320px;
  flex: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.message-detail-panel {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 0;
}

.message-thread-panel > .compact-head,
.message-detail-panel > .compact-head {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  margin: 0;
}

.message-thread-list {
  max-height: calc(100vh - 330px);
  min-height: 300px;
  overflow: auto;
  display: block;
}

.message-thread-row {
  display: grid;
  gap: 4px;
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--surface-sub);
  border-radius: 0;
  padding: 13px 16px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.message-thread-row:hover {
  background: var(--surface-sub);
}

.message-thread-row.is-active {
  background: var(--accent-soft);
}

.message-thread-top,
.message-thread-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.message-thread-top strong {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-thread-foot > span:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.message-thread-meta,
.message-thread-preview,
.message-thread-foot {
  color: var(--muted);
  font-size: 12px;
}

.message-thread-meta {
  color: var(--accent);
}

.message-thread-preview {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.message-event-context {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--surface-sub);
  margin: 0;
}

.message-detail-body {
  max-height: 42vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
  background: var(--surface-sub);
}

.message-bubble {
  display: grid;
  gap: 5px;
  max-width: 78%;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px 13px;
  background: var(--surface, #fff);
}

.message-bubble.from-ambassador {
  align-self: flex-start;
  background: var(--surface, #fff);
}

.message-bubble.from-internal {
  align-self: flex-end;
  background: var(--accent-soft);
  border-color: var(--accent-line, var(--accent));
}

.message-bubble.internal-only {
  align-self: flex-end;
  background: var(--warn-bg, #fff7ed);
  border-color: color-mix(in srgb, var(--warn) 32%, #fff);
}

/* Where a message came from -- the tasting it concerns, or the broadcast it answers. Drawn from data
   the server has always sent (metadata.booking / source); nothing here is stored twice. Muted on
   purpose: it is provenance, not content, and must not compete with the message itself. */
.message-bubble-context,
.event-message-context {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 4px;
}

.message-bubble-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 11.5px;
}

.message-bubble-head strong {
  color: var(--ink);
  font-size: 12.5px;
}

.message-bubble p {
  margin: 0;
  overflow-wrap: anywhere;
  line-height: 1.45;
  font-size: 13.5px;
}

.message-reply-panel {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 13px 18px;
  border-top: 1px solid var(--line);
}

.message-reply-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.message-close-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px 18px;
  border-top: 1px solid var(--surface-sub);
}

.message-notification-panel {
  margin: 0;
  border-top: 1px solid var(--surface-sub);
  overflow: hidden;
}

.message-notification-panel > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 13px;
}

.message-notification-panel > summary::-webkit-details-marker { display: none; }
.message-notification-panel[open] .access-disc-chev { transform: rotate(180deg); }

.message-notification-body {
  display: grid;
  gap: 10px;
  padding: 0 18px 14px;
}

.message-reply-panel.is-disabled,
.message-close-panel.is-disabled {
  opacity: 0.76;
}

.platform-grid {
  display: grid;
  grid-template-columns: minmax(420px, 1.1fr) minmax(320px, 0.9fr);
  gap: 16px;
  margin-top: 16px;
}

.platform-grid.no-top {
  margin-top: 0;
}

.product-platform-grid {
  display: grid;
  grid-template-columns: minmax(520px, 1.25fr) minmax(280px, 0.75fr);
  gap: 16px;
  margin-bottom: 16px;
}

.platform-actions {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) repeat(4, max-content);
  align-items: end;
  gap: 10px;
  margin-bottom: 14px;
}

.user-admin-panel {
  margin-bottom: 16px;
}

.access-filter-line {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(150px, 0.55fr) minmax(150px, 0.55fr) max-content max-content;
  align-items: center;
  gap: 10px;
}

.access-list-shell {
  max-height: calc(100vh - 295px);
}

.access-list-table {
  min-width: 760px;
}

.access-row {
  cursor: pointer;
}

.access-row.is-selected {
  background: var(--accent-soft);
}

.access-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.access-user-lines {
  display: grid;
  gap: 2px;
  min-width: 140px;
}

.access-user-cell strong,
.access-user-cell span {
  /* break-word, NOT anywhere: `anywhere` collapses min-content to a single character, which — with
     the grid track's 0 minimum — let the User column shrink to ~1ch and stack every letter of the
     name/email on its own line. break-word only breaks genuinely unbreakable long tokens. */
  overflow-wrap: break-word;
}

.access-editor-form {
  display: grid;
  gap: 12px;
}

.access-editor-form.is-hidden {
  display: none;
}

.access-editor-form.is-invite-mode .access-full-section {
  display: none;
}

.access-editor-form:not(.is-invite-mode) .access-invite-section {
  display: none;
}

.access-state-stack {
  display: grid;
  gap: 5px;
  min-width: 130px;
}

/* ============================================================
   Users & Access — Clarity rebuild (Round 4): list-screen + detail-screen
   ============================================================ */
.access-screen.is-hidden { display: none; }

/* review banner (Q6) */
.access-review-banner {
  display: flex; align-items: center; gap: 13px;
  background: var(--accent-soft); border: 1px solid var(--accent-line, var(--accent));
  border-radius: 13px; padding: 13px 16px; margin-bottom: 16px;
}
.access-review-icon {
  width: 34px; height: 34px; border-radius: 9px; background: var(--accent); color: #fff;
  display: grid; place-items: center; flex: none;
}
.access-review-copy { flex: 1; min-width: 0; display: grid; gap: 2px; }
.access-review-copy strong { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.access-review-copy span { font-size: 12px; color: var(--muted); }
.access-review-cta { height: 34px; padding: 0 16px; }

/* list toolbar: segment + select toggle */
.access-list-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.access-select-toggle {
  margin-left: auto; height: 34px; padding: 0 14px; border: 1px solid var(--line-strong, var(--line));
  border-radius: 9px; background: var(--surface, #fff); font: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--muted); cursor: pointer;
}
.access-select-toggle.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }

/* filter row (Q2) */
.access-filter-row { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; flex-wrap: wrap; }
.access-search-field { flex: 1 1 220px; min-width: 180px; }
.access-search-field input { width: 100%; }
.access-filter-select { flex: 0 0 auto; min-width: 130px; }
.access-invite-cta { margin-left: auto; }

/* list row (clean: pill + scope + one status + inline resend + chevron) */
.access-role-pill {
  display: inline-block; padding: 3px 10px; border-radius: 99px; font-size: 12px; font-weight: 600;
  background: var(--surface-sub); color: var(--ink); border: 1px solid var(--line);
}
.access-status-cell { display: flex; align-items: center; gap: 9px; }
.access-row-resend { border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 0; }
.access-chevron-cell { color: var(--faint); text-align: right; font-size: 18px; }
.access-select-col { width: 38px; }
/* select column lives in the DOM always (keeps header/cell indices aligned for mobile stacking) but
   only shows in selection mode. */
.access-list-table:not(.is-selecting) .access-select-col { display: none; }

/* floating bulk action bar (Q3) */
.access-bulk-bar {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%); z-index: 40;
  display: flex; align-items: center; gap: 14px; background: var(--ink, #15171c); color: #fff;
  border-radius: 14px; padding: 12px 16px; box-shadow: 0 14px 40px rgba(16, 24, 40, .3);
}
.access-bulk-count { font-size: 13px; font-weight: 600; }
.access-bulk-divider { width: 1px; height: 20px; background: rgba(255, 255, 255, .2); }
.access-bulk-action { background: none; border: 0; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.access-bulk-action.danger { color: var(--danger); }

/* detail screen */
.access-back {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 8px;
  border: 1px solid var(--line-strong, var(--line)); background: var(--surface, #fff); border-radius: 8px;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--text, var(--ink)); cursor: pointer; margin-bottom: 16px;
}
.access-editor-form { max-width: 680px; }
.access-identity-header { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.access-identity-avatar { flex: none; }
.access-identity-lines { flex: 1; min-width: 0; }
.access-identity-lines h3 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.access-identity-lines p { margin: 2px 0 0; font-size: 13px; }
.access-identity-badges { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: flex-end; }

/* cards */
.access-card { border: 1px solid var(--line); border-radius: 13px; padding: 18px; background: var(--surface, #fff); }
.access-card-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.access-card-sub { font-size: 12.5px; color: var(--muted); margin: 3px 0 13px; }
/* Per-location ambassador documents on the location detail screen (V4 #3). */
.location-docs { display: grid; gap: 2px; margin-bottom: 11px; }
.location-doc-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  min-height: 38px; padding: 4px 0; font-size: 13px;
}
.location-doc-row + .location-doc-row { border-top: 1px solid var(--line); }
.access-card-head { display: flex; align-items: flex-start; gap: 12px; }
.access-card-head .access-card-sub { margin-bottom: 0; }

/* 3-up role (Q7) */
.access-role-3up { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.access-rolecard {
  display: grid; gap: 3px; text-align: left; border: 1.5px solid var(--line-strong, var(--line));
  border-radius: 12px; padding: 13px; background: var(--surface, #fff); cursor: pointer; font: inherit;
}
.access-rolecard.is-on { border-color: var(--accent); background: var(--accent-soft); }
.access-rolecard-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.access-rolecard-desc { font-size: 11.5px; color: var(--faint); }

/* Account type = the primary control of the Role & access card; the management 3-up + category note are
   state-aware off it. */
.access-account-type { display: grid; gap: 5px; font-size: 12px; font-weight: 600; color: var(--faint); margin-bottom: 16px; }
.access-account-type select { font-weight: 500; color: var(--ink); }
.access-subhead { font-size: 11.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 8px; }
.access-category-note { font-size: 12.5px; color: var(--muted); line-height: 1.5; background: var(--surface-sub); border-radius: 10px; padding: 11px 13px; margin: 4px 0 0; }
.access-category-note.is-hidden, #accessManagementRole.is-hidden { display: none; }

/* disclosures (Q8) */
.access-disc { border: 1px solid var(--line); border-radius: 13px; background: var(--surface, #fff); overflow: hidden; }
.access-disc > summary { list-style: none; cursor: pointer; padding: 15px 18px; display: flex; align-items: center; gap: 8px; }
.access-disc > summary::-webkit-details-marker { display: none; }
.access-disc-title { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.access-disc-note { font-size: 11.5px; color: var(--faint); }
.access-disc-chev { margin-left: auto; color: var(--faint); transition: transform .18s ease; }
.access-disc[open] > summary .access-disc-chev { transform: rotate(180deg); }
.access-disc-body { padding: 2px 18px 18px; }
.access-adv-note { font-size: 11.5px; color: var(--faint); line-height: 1.5; margin: 0 0 11px; }
.access-adv-roles { margin-top: 14px; }

/* scope card (Q9) */
.access-scope-edit {
  flex: none; height: 30px; padding: 0 12px; border: 1px solid var(--line-strong, var(--line));
  background: var(--surface, #fff); border-radius: 8px; font: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer;
}
.access-scope-editor { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--surface-sub); }
.access-scope-editor.is-hidden { display: none; }

/* account actions (Q5) */
.access-actrow {
  width: 100%; display: flex; align-items: center; gap: 12px; padding: 14px 0;
  border: 0; border-top: 1px solid var(--surface-sub); background: none; font: inherit; text-align: left; cursor: pointer;
}
.access-account-actions .access-card-title { margin-bottom: 6px; }
.access-actrow-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.access-actrow-title { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.access-actrow-sub { font-size: 12px; color: var(--faint); }
.access-actrow-chev { color: var(--faint); }
.access-actrow.danger .access-actrow-title { color: var(--danger); }

/* invite mode: show only the identity header + the invite card */
.access-editor-form.is-invite-mode details.access-disc,
.access-editor-form.is-invite-mode .access-account-actions,
.access-editor-form.is-invite-mode .detail-actions-sticky { display: none; }

/* Users list mobile stacking (docs/RESPONSIVE_SPEC): the generic DataTable stacking treats the FIRST
   cell as the card title, but our first cell is the (usually hidden) select column — so on phones hide
   select + chevron and promote the User cell to the card title. Matches the 760px stacking breakpoint. */
@media (max-width: 760px) {
  /* the list is full-width now; drop the desktop min-width so stacked cards don't overflow + scroll. */
  .access-list-shell .access-list-table,
  .access-list-table.data-table { min-width: 0; }
  /* tbody in the selector raises specificity above the generic `td:first-child { display:block }` card-title
     rule (equal-specificity, defined later in the file) so the select column truly hides on phones. */
  .data-table.access-list-table tbody td.access-select-col { display: none; }
  .data-table.access-list-table tbody td.access-chevron-cell { display: none; }
  .data-table.access-list-table tbody td.access-user-title {
    display: block;
    text-align: left;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .data-table.access-list-table tbody td.access-user-title::before { content: none; }
}

.access-card-grid {
  display: grid;
  gap: 10px;
}

.access-card-grid.two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.access-card-grid.three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.access-card-grid.four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.access-role-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  background: var(--soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.access-role-summary p {
  margin: 0 0 6px;
}

.access-role-summary p:last-child {
  margin-bottom: 0;
}

.role-badge {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 7px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 800;
}

.access-advanced-scopes summary {
  cursor: pointer;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
}

.access-detail-actions {
  justify-content: flex-end;
}

.acumatica-ops-panel {
  margin-bottom: 16px;
}

.integration-settings {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 14px;
  background: var(--surface-sub);
}

.integration-settings summary {
  cursor: pointer;
  font-weight: 700;
}

.service-connection-card h5 {
  margin: 0 0 4px;
  font-size: 16px;
}

.service-connection-head {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 10px;
}

.connection-summary {
  min-width: 190px;
  text-align: right;
}

.connection-action-strip {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  margin-bottom: 12px;
}

.connection-action-strip .helper-text {
  margin: 0;
}

.acumatica-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 10px;
  margin: 12px 0;
}

.primary-connection-fields {
  grid-template-columns: repeat(2, minmax(220px, 1fr));
}

.connection-advanced {
  margin-top: 6px;
}

.connection-group-title {
  margin: 14px 0 6px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

.connection-group-title:first-child {
  margin-top: 0;
}

.field-required-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--warn);
  background: var(--warn-bg);
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: middle;
}

.acumatica-missing-required:empty {
  display: none;
}

.acumatica-missing-required.has-gaps {
  margin: 8px 0 4px;
  padding: 9px 12px;
  border-radius: 8px;
  color: var(--warn);
  background: var(--warn-bg);
  border: 1px solid var(--warn-dot);
}

.connection-option-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
  margin: 8px 0 12px;
}

.compact-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

/* Store-locator custom pin editor (Ecommerce tab). */
.locator-pin-editor {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
  margin: 8px 0;
}

.locator-pin-preview {
  width: 72px;
  height: 72px;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-strong);
  overflow: hidden;
}

.locator-pin-preview img {
  max-width: 56px;
  max-height: 56px;
  object-fit: contain;
}

.locator-pin-preview .muted {
  font-size: 12px;
}

@media (max-width: 640px) {
  .locator-pin-editor {
    grid-template-columns: 1fr;
  }
}

.compact-list-item {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(180px, 1.2fr) minmax(120px, 0.8fr);
  gap: 10px;
  align-items: center;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  padding: 9px 10px;
  cursor: pointer;
}

.compact-list-item:hover,
.compact-list-item.is-selected {
  border-color: var(--accent);
  background: var(--surface-strong);
}

.connection-result {
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
}

.connection-result.is-ok {
  border-color: color-mix(in srgb, var(--ok) 34%, #fff);
  background: var(--ok-bg);
}

.connection-result.is-error {
  border-color: color-mix(in srgb, var(--danger) 30%, #fff);
  background: var(--danger-soft);
}

.compact-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.compact-status-row + .compact-status-row {
  border-top: 1px solid var(--line);
}

.compact-status-row span {
  color: var(--muted);
  text-align: right;
}

.acumatica-ops-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(240px, 1.2fr) minmax(130px, 0.55fr) minmax(220px, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.material-review-toolbar {
  display: grid;
  grid-template-columns: minmax(180px, 0.45fr) minmax(260px, 1fr);
  gap: 10px;
  margin-bottom: 12px;
}

.material-request-detail-card {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  background: #fff;
}

.material-request-detail-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}

.material-request-detail-head h4 {
  margin: 0 0 4px;
}

.detail-status-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.material-request-summary-grid {
  /* Accounting §1.5: two-column DetailRow grid (was a cramped 3-col) so the field pairs read cleanly. */
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 32px;
}

/* Accounting handoff §1.3/§1.7: quantity line-summary echo, reference copy affordance, faint utility. */
.faint { color: var(--faint); }
.material-request-line-summary { font-size: 12px; color: var(--muted); margin: 4px 0 8px; }
.copy-ref {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; background: transparent; cursor: pointer; padding: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; color: var(--muted);
}
.copy-ref:hover { color: var(--ink); }
.copy-ref code { font: inherit; }
.copy-ref .copy-ic { font-size: 13px; color: var(--faint); }
.copy-ref:hover .copy-ic { color: var(--accent); }
/* §1.6: the raw sales-order JSON is developer surface — sit it below a divider at the bottom. */
.material-request-dev-payload { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }

/* ===== Accounting — Clarity 3-tab restructure (health bar · Requests/Connection/Activity · rail).
   Tokens only, badges route through the shared .status set. ===== */
.acu-health-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acu-health-bar.is-down { border-color: var(--danger-line); background: var(--danger-bg); }
.acu-health-plug { font-size: 18px; line-height: 1; }
.acu-health-id { display: grid; gap: 2px; min-width: 0; }
.acu-health-id strong { font-size: 13.5px; color: var(--ink); }
.acu-health-meta { font-size: 12px; color: var(--muted); }
.acu-health-bar .status { margin-left: auto; }

.acu-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.acu-tab { border: 0; background: transparent; padding: 10px 14px; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.acu-tab:hover { color: var(--ink); }
.acu-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }
[data-accounting-panel] { display: none; }
[data-accounting-panel].is-active { display: block; }

.acu-filter-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.acu-filter-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.acu-search { margin-left: auto; min-width: 240px; }
.acu-search input { width: 100%; }

.acu-queue-layout { display: grid; grid-template-columns: 352px minmax(0, 1fr); gap: 16px; align-items: start; min-height: 520px; }
@media (max-width: 980px) { .acu-queue-layout { grid-template-columns: 1fr; } }
.acu-queue-rail { max-height: calc(100vh - 320px); min-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.acu-queue-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 11px 13px; cursor: pointer; }
.acu-queue-row:last-child { border-bottom: 0; }
.acu-queue-row:hover { background: var(--surface-sub); }
.acu-queue-row.is-selected { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.acu-queue-avatar { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; font-size: 11px; font-weight: 600; color: #fff; }
.acu-queue-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.acu-queue-name { font-size: 13px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acu-queue-sub { font-size: 11.5px; color: var(--faint); }
.acu-queue-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex: none; }
.acu-queue-age { font-size: 11px; color: var(--faint); }
.acu-rail-empty { padding: 28px 16px; text-align: center; color: var(--faint); font-size: 13px; }
.acu-queue-layout .material-request-detail-card { overflow-y: auto; max-height: calc(100vh - 320px); }

.acu-dev-tools { margin-top: 18px; }
.acu-dev-body { display: grid; gap: 14px; padding-top: 12px; }

.acu-radio-cards { display: grid; gap: 10px; margin: 10px 0; }
@media (min-width: 720px) { .acu-radio-cards { grid-template-columns: repeat(3, 1fr); } }
.radio-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--surface); cursor: pointer; }
.radio-card:hover { border-color: var(--accent-line); }
.radio-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
/* The global `input { width: 100% }` (for text fields) inflates the radio to the full card width and
   crushes the label text to one char per line — pin the radio's size, matching .cand-check. */
.radio-card input { width: 16px; height: 16px; margin-top: 2px; accent-color: var(--accent); flex: none; }
.radio-card strong { display: block; font-size: 13px; color: var(--ink); }
.radio-card p { margin: 3px 0 0; font-size: 12px; color: var(--muted); }

.acu-danger-zone { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 14px 16px; border: 1px solid var(--danger-line); border-radius: var(--radius); background: var(--danger-bg); }
.acu-danger-zone strong { display: block; font-size: 13.5px; color: var(--ink); }
.acu-danger-zone p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); max-width: 62ch; }

.acu-activity-controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.acu-activity-controls .segmented-control { margin-bottom: 0; }
.acu-worker-live { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--muted); }
.acu-worker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok-dot); flex: none; }
.acu-worker-live.is-down .acu-worker-dot { background: var(--danger); }

.acu-write-list { display: grid; gap: 0; margin-top: 6px; }
.acu-write-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.acu-write-row:last-child { border-bottom: 0; }
.acu-write-row strong { display: block; font-size: 13px; color: var(--ink); }
.acu-write-row .muted { font-size: 12px; }

/* §3.2/X.3: tinted Activity cells swap classes (never inline colors) so the table paints before data. */
.acu-jobs-table .num { color: var(--faint); font-variant-numeric: tabular-nums; }
.acu-jobs-table .num-hot { color: var(--attn); font-weight: 600; }
.acu-jobs-table .note { color: var(--faint); }
.acu-jobs-table .note-err { color: var(--danger); font-weight: 500; }
.acu-jobs-table td strong { font-size: 13px; color: var(--ink); }
.acu-job-group-note { color: var(--muted); font-size: 12px; margin: 8px 0 0; }
.acu-jobs-table tr.is-superseded { opacity: 0.55; }
.acu-job-outstanding-note { font-size: 12px; font-weight: 600; margin: 8px 0 0; color: var(--muted); }
.acu-job-outstanding-note.is-outstanding { color: var(--warn); }
.acu-job-outstanding-note.is-unconfirmed { color: var(--muted); font-weight: 500; }

/* §1.1: keep the detail pane's Approve/Reject header reachable through a long line-item table. */
.material-request-detail-head { position: sticky; top: 0; background: var(--surface); z-index: 1; }

/* §2.3: the posting-rules warning — these identifiers must match Acumatica exactly or fail silently. */
.acu-posting-intro { font-size: 12px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.acu-posting-intro code { font-size: 11px; }
.acumatica-settings-grid .field-hint { display: block; font-size: 11px; margin-top: 4px; }

.material-request-readiness {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: var(--soft);
}

.material-request-readiness.is-ready {
  border-color: color-mix(in srgb, var(--ok) 34%, #fff);
  background: var(--ok-bg);
}

.material-request-readiness.needs-review {
  border-color: color-mix(in srgb, var(--warn) 34%, #fff);
  background: var(--warn-bg);
}

.material-request-readiness ul {
  margin: 8px 0 0 18px;
  padding: 0;
}

.material-request-notes {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.material-request-notes p {
  margin: 4px 0 0;
}

.material-request-items-table table {
  min-width: 760px;
}

.material-request-payload-preview .payload-preview {
  margin-top: 8px;
  max-height: 360px;
}

.material-request-review-controls {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.manager-coverage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
  gap: 16px;
  align-items: start;
  margin-top: 12px;
}

.manager-coverage-row {
  cursor: pointer;
}

.manager-coverage-row.is-selected {
  background: var(--surface-strong);
}

/* Manager column = avatar + name/email identity cell (templates/manager-coverage DataTable). */
.manager-coverage-table { min-width: 480px; }
.mc-identity { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mc-identity-lines { min-width: 0; }

.manager-coverage-detail {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.manager-coverage-detail h5,
.manager-transfer-panel h5 {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
}

.manager-transfer-panel {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.compact-head {
  align-items: center;
  margin-bottom: 12px;
}

.user-admin-form {
  display: grid;
  grid-template-columns: 1.2fr 1.4fr repeat(2, minmax(130px, 0.7fr));
  gap: 10px;
  margin-bottom: 10px;
}

.ambassador-profile-form {
  display: grid;
  grid-template-columns: repeat(6, minmax(120px, 1fr));
  gap: 10px;
  margin: 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.align-bottom {
  align-self: end;
  min-height: 42px;
}

.full-span {
  grid-column: 1 / -1;
}

.product-assignment-list {
  display: grid;
  gap: 8px;
}

.product-check {
  align-items: flex-start;
  background: #fff;
}

.product-check span {
  display: grid;
  gap: 2px;
}

.product-check small {
  color: var(--muted);
  font-size: 12px;
}

/* Schedule Builder product assignment (Phase 2): run-default picker + per-suggestion override. */
.builder-default-products { display: grid; gap: 6px; margin-top: 12px; }
.builder-default-products .control-label { font-weight: 600; }
.schedule-product-checklist {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 200px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 8px;
}
.cand-products { margin-top: 6px; font-size: 12.5px; }
.cand-products > summary {
  cursor: pointer;
  color: var(--muted);
  list-style: none;
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
}
.cand-products > summary::-webkit-details-marker { display: none; }
.cand-products > summary::before { content: "▸"; font-size: 10px; color: var(--muted); }
.cand-products[open] > summary::before { content: "▾"; }
.cand-products .cand-products-names { color: var(--text); font-weight: 500; }
.cand-product-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-strong);
}
.cand-products-empty { margin-top: 6px; font-size: 12.5px; }

.role-checks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.scope-editor {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(220px, 1.5fr) minmax(130px, 0.8fr) max-content;
  align-items: end;
  gap: 10px;
  margin-bottom: 10px;
}

.scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
  margin-bottom: 12px;
}

.scope-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 8px;
  background: var(--soft);
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}

.scope-chip span {
  overflow-wrap: anywhere;
}

.scope-chip button {
  min-height: 0;
  padding: 0 4px;
  border: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
  font-size: 17px;
}

.wrap-text {
  overflow-wrap: anywhere;
}

.small-button {
  min-height: 32px;
  padding: 6px 10px;
  font-size: 13px;
}

.payload-preview {
  min-height: 270px;
  max-height: 420px;
  overflow: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 12px;
  background: var(--ink);
  color: var(--surface);
  font-size: 12px;
  white-space: pre-wrap;
}

.compact-table {
  max-height: 420px;
}

.field-card {
  box-shadow: none;
  padding: 16px;
}

.field-card h4 {
  margin-bottom: 14px;
  font-size: 16px;
}

/* Canonical MetricStrip — a responsive auto-fit strip of metric cards. Brings the legacy
   .mini-metrics readouts up to the same visual language as the owner KPI dashboard (.kpi-cards),
   so every metric strip across the app collapses gracefully on narrow viewports instead of the old
   fixed 4-column grid (UI_AUDIT: mini-metrics had no mobile collapse) and reads as one component. */
.mini-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

/* ⚠ ON A PHONE THAT 150px FLOOR YIELDS EXACTLY ONE COLUMN, and the strip ate the screen.
   Two columns need 150 + 12 + 150 = 312px; the container is 281px, so auto-fit drops to one. Measured
   on dev at 375px: five cards x 94px = 516px, 52% of the viewport height, all of it above the inbox.
   118px is the widest floor that still fits two (2 x 118 + 10 = 246 <= 281) and takes the strip to
   266px. Verified no label or value clips at that width -- including "Waiting internal", the longest. */
@media (max-width: 899px) {
  .mini-metrics {
    grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
    gap: 10px;
  }

  .mini-metrics div {
    padding: 12px 14px;
  }
}

.mini-metrics div {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px;
  background: var(--surface);
}

.mini-metrics span,
.helper-text {
  color: var(--muted);
  font-size: 12px;
}

.mini-metrics span {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--faint);
  font-size: 11px;
}

.mini-metrics strong {
  display: block;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--ink);
}

.mini-metrics .mini-metric-wide {
  grid-column: 1 / -1;
}

.mini-metrics .mini-metric-wide small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}

.progress-callout {
  display: flex;
  gap: 12px;
  align-items: center;
  margin: 12px 0 16px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  padding: 12px 14px;
  background: var(--surface-strong);
  color: var(--text);
}

.progress-callout.is-hidden {
  display: none;
}

.progress-callout p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.progress-callout.is-success {
  border-color: var(--ok-line);
  background: var(--ok-bg);
}

.progress-callout.is-error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.progress-spinner {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  border: 3px solid var(--line-strong);
  border-top-color: var(--accent);
  border-radius: 999px;
  animation: spin 0.8s linear infinite;
}

.progress-callout.is-success .progress-spinner,
.progress-callout.is-error .progress-spinner {
  animation: none;
  border-color: currentColor;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.stacked-alerts {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.approval-review-row td {
  background: var(--surface-sub);
}

.inline-review-card {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(180px, 320px) auto;
  gap: 12px;
  align-items: end;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  background: #fff;
}

.inline-review-card label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}

.inline-review-card input {
  color: var(--text);
}

@media (max-width: 860px) {
  .inline-review-card {
    grid-template-columns: 1fr;
    align-items: stretch;
  }
}

.inline-alert {
  display: grid;
  gap: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  background: var(--soft);
}

.inline-alert strong {
  font-size: 12px;
}

.inline-alert span {
  color: var(--muted);
  font-size: 12px;
}

.inline-alert.warn {
  border-color: var(--warn-dot);
  background: var(--warn-bg);
}

.inline-alert.danger {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.source-list {
  display: grid;
  gap: 8px;
}

.source-item {
  display: grid;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: var(--soft);
}

.source-item span {
  color: var(--muted);
  font-size: 12px;
}

.check-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

#tenantEntitlementsGrid {
  grid-template-columns: 1fr;
}

.check-pill {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  color: var(--ink);
}

.inline-check {
  min-height: 38px;
  background: #fff;
  font-size: 14px;
}

.check-pill input {
  width: 18px;
  min-height: 0;
  flex: none;
}

/* Onboarding-kit editor rows (Program page). These classes were referenced in markup but never had
   any CSS, so the checkbox + qty inputs fell through to the full-width 38px base rule and stacked as
   giant boxes inside an inline <label> — the worst of the "ugly checkboxes". */
.onboarding-kit-editor {
  display: grid;
  gap: 8px;
}
.onboarding-kit-row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 9px 10px;
  background: #fff;
}
.onboarding-kit-name {
  flex: 1;
}
.onboarding-kit-qty {
  width: 72px;
  flex: none;
}

.tenant-limit-input {
  width: 110px;
  min-height: 30px;
  padding: 5px 7px;
  font-size: 13px;
}

.import-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.import-review-summary {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.import-activity-queue {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.import-activity-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--shadow-soft);
}

.import-activity-card header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 10px;
}

.import-activity-card h4 {
  margin: 0 0 3px;
}

.import-activity-summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 6px;
}

.import-activity-list {
  display: grid;
  gap: 8px;
  max-height: 360px;
  overflow: auto;
  padding-right: 4px;
}

.import-activity-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 12px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
  padding: 10px;
}

.import-activity-item.is-active {
  border-color: var(--gold-soft);
  background: var(--warn-bg);
}

.import-activity-item.is-error {
  border-color: var(--danger-line);
  background: var(--danger-soft);
}

.import-activity-main {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.import-activity-main strong,
.import-activity-main span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.import-activity-main span {
  color: var(--muted);
  font-size: 12px;
}

.import-activity-progress {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--line);
}

.import-activity-progress span {
  display: block;
  height: 100%;
  min-width: 4px;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  transition: width 0.25s ease;
}

.import-review-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px;
}

.import-review-card header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}

.import-review-card h4 {
  margin: 0;
}

.import-review-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.import-review-metric {
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--soft);
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 700;
}

.import-review-warnings {
  margin: 8px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 13px;
}

/* Import type cards reuse the Clarity .wz-tile visual language; the native file input is visually
   hidden and click-to-open is preserved by the wrapping <label>. Replaces the old raw-input drop-cards. */
.import-grid .wz-tile { position: relative; }
.import-card-file {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
  white-space: nowrap;
}

.toast {
  position: fixed;
  right: 22px;
  bottom: 22px;
  /* Above in-page pinned chrome — notably the sticky detail action bars (z-index:10) whose opaque
     background otherwise paints over the lower half of a two-line toast — but below modals (100). */
  z-index: 90;
  max-width: 360px;
  padding: 12px 14px;
  background: var(--lb-navy);
  color: #fff;
  border-radius: 8px;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
  pointer-events: none;
  box-shadow: var(--shadow);
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 899px) {
  .shell {
    grid-template-columns: 1fr;
  }

  /* Sidebar becomes an off-canvas drawer opened by the mobile top bar's hamburger. */
  .mobile-topbar {
    display: flex;
    align-items: center;
    gap: 12px;
    position: sticky;
    top: 0;
    z-index: 30;
    margin: -14px -14px 14px;
    padding: 10px 14px;
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }
  .drawer-toggle {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--ink);
    cursor: pointer;
    flex: none;
  }
  .mobile-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--ink);
  }
  .mobile-brand .brand-mark {
    width: 28px;
    height: 28px;
    font-size: 15px;
  }
  .mobile-topbar-spacer {
    margin-left: auto;
    width: 40px;
  }
  .drawer-scrim.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 55;
    background: rgba(9, 28, 23, 0.42);
  }
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 60;
    height: 100vh;
    max-height: none;
    width: min(84vw, 300px);
    padding: 22px 16px;
    gap: 20px;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: var(--shadow);
  }
  .sidebar.is-open {
    transform: translateX(0);
  }

  .brand {
    min-width: 0;
  }

  .brand-mark {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }

  .brand h1 {
    font-size: 15px;
  }

  .brand p {
    font-size: 11px;
  }

  .tabs {
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-x: visible;
  }

  .tab-group {
    min-width: 0;
  }

  .tab {
    text-align: left;
    padding-inline: 10px;
  }

  .nav-section-label {
    margin-left: 4px;
  }

  .tab-parent::after {
    right: 10px;
  }

  .tab-submenu {
    padding-left: 0;
    margin-left: 0;
  }

  /* #23: keep the sidebar footer (Security + Sign out) reachable inside the mobile drawer -- it used to be
     display:none here, which left the mobile admin app with NO logout at all. The base rule pins it to the
     bottom of the scrollable drawer (margin-top:auto), and the Sign-out handler already clears BOTH the
     admin (Entra) session and the external ambassador cookie. */
  .sidebar-footer {
    display: grid;
  }

  .workspace {
    padding: 14px;
  }

  .topbar {
    position: static;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: -14px -14px 14px;
    padding: 14px;
  }

  .topbar h2 {
    font-size: 23px;
  }

  .top-action-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .section-head,
  .target-panel-head {
    display: grid;
  }

  .metrics,
  .analytics-hero,
  .analytics-kpi-grid,
  .analytics-grid.two-column,
  .analytics-grid.three-column,
  .analytics-card-head,
  .analytics-recommendation,
  .control-grid.compact,
  .settings-layout,
  .company-branding-grid,
  .report-grid,
  .report-analytics-grid,
  .report-analytics-row,
  .report-event-context,
  .report-review-controls,
  .message-controls,
  .messages-layout,
  .message-event-context,
  .material-review-toolbar,
  .material-request-summary-grid,
  .report-detail-grid,
  .geography-toolbar,
  .geography-summary,
  .geography-state-panel summary,
  .geography-manager-inline,
  .geography-city-header,
  .geography-city-row,
  .retail-chain-layout,
  .location-card-grid.two,
  .location-card-grid.four,
  .access-filter-line,
  .access-card-grid.two,
  .access-card-grid.three,
  .access-card-grid.four,
  .manager-coverage-layout,
  .platform-grid,
  .platform-actions,
  .acumatica-settings-grid,
  .report-question-grid,
  .user-admin-form,
  .acumatica-ops-form,
  .ambassador-profile-form,
  .scope-editor,
  .manual-event-form,
  .wide-field {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  /* ⚠ THE TWO FLEX CONTAINERS IN THE LIST ABOVE, which that grid rule cannot touch.
     `grid-template-columns` is inert on `display: flex`, so both kept their desktop ROW layout at
     phone width. Measured on dev at 375px before this: .messages-layout put a 320px-wide
     `.message-thread-panel` (width:320px; flex:none -- it cannot shrink) beside a
     `.message-detail-panel` that collapsed to 0px, leaving the reply box and the "Send reply" button
     off the right edge of the screen. Stack them instead. */
  .messages-layout {
    flex-direction: column;
  }

  .message-thread-panel {
    width: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  /* Stacked, the list sits ABOVE the conversation, so an unbounded list pushes the reply box a full
     screen down. The desktop rule is `calc(100vh - 330px)`, which assumes the list is beside the
     conversation rather than above it. */
  .message-thread-list {
    max-height: 42vh;
    min-height: 0;
  }

  .geography-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  /* ⚠ `display: grid` ALONE DOES NOT NARROW THIS. The breakpoint already gives .section-head
     `display: grid`, but a grid child defaults to `min-width: auto`, so the single column is sized to
     the widest child's INTRINSIC minimum. .button-row is `flex-wrap: nowrap` with three buttons
     (~460px together), so the column resolved to 479.9px inside a 317px container and "Refresh
     messages" rendered at x=333..509 on a 339px screen -- 170px of it off the right edge, which is
     exactly what the owner reported seeing. min-width:0 lets the column shrink; wrapping lets the
     buttons stack instead of overflowing. Verified: column 480 -> 317px, all three buttons fully on
     screen. (An earlier version of this comment claimed every remaining overflow inside `main` was
     gone. It was not -- .dw-tabs below still overflowed, and that claim was measured on a screen whose
     tab strip had not rendered. Fixed 2026-09-22; the claim is narrowed to what was actually checked.) */
  .section-head > *,
  .target-panel-head > * {
    min-width: 0;
  }

  .button-row {
    flex-wrap: wrap;
  }

  /* ⚠ A TAB YOU CANNOT REACH IS A FEATURE YOU DO NOT HAVE. `.dw-tabs` is `display: flex` with the
     default `flex-wrap: nowrap` and `overflow-x: visible`, so on a phone the strip simply ran past the
     screen with NO scroll affordance -- nothing to swipe, nothing to indicate more tabs existed.
     Measured on dev at 375px (Messages): container 317px, content 418px, and the four tabs sat at
     All 29..105, Tastings ..218, Direct ..315, Broadcasts 317..447 -- Broadcasts starting 2px past the
     container and ending 72px past the viewport. It also dragged the whole page into horizontal scroll
     (documentElement.scrollWidth 447 vs clientWidth 375). This is the owner's report that on mobile
     "the admins can't do anything with messaging ... new message, broadcast and one off screen".

     Wrapping rather than `overflow-x: auto` on purpose: a scrolling strip hides tabs behind a gesture
     nothing advertises, which is the same defect in a nicer coat. Wrapped, every tab is visible.
     `.dw-tab.on` draws its own accent underline, so an active tab on the first row still reads as
     active even though the container's bottom border sits under the last row.

     Shared by three screens -- #messageTypeTabs, #distributorTabs, #applicantTabs -- all of which had
     it. */
  .dw-tabs {
    flex-wrap: wrap;
    row-gap: 4px;
  }

  /* ⚠ SAME CLASS AGAIN, FOUND BY SWEEPING EVERY ADMIN SCREEN AT 375px RATHER THAN THE ONE THAT WAS
     REPORTED. `.loc-toolbar-actions` is a nowrap flex row; its PARENT `.loc-list-toolbar` already
     wraps, which hid the problem, because the un-wrappable group is what the parent wraps as a single
     unit. Measured on dev at 375px: the group was 563px wide inside a 317px parent -- Upload CSV ..161,
     CSV template ..308, Export CSV ..436, Purge archived 445..592. So BOTH "Export CSV" and the
     destructive "Purge archived" sat off the right edge, the latter by 217px, with no way to reach it. */
  .loc-toolbar-actions {
    flex-wrap: wrap;
  }

  /* ⚠ AND THIS ONE IS ALREADY LISTED IN THE `grid-template-columns: 1fr` RULE ABOVE, WHERE IT DOES
     NOTHING -- `.geography-state-panel summary` is `display: flex`, and grid-template-columns is inert
     on a flex container. Exactly the trap the .messages-layout comment above describes; the selector
     being in that list is what made it look handled. Measured on dev at 375px: the summary row needed
     530px (title 150 fixed + coverage bar + counts 119 + status pill 91 + chevron) and ran to x=451,
     76px past the viewport. The title's fixed 150px width is what stops it shrinking, so it has to go
     to auto for the wrap to actually recover the space. */
  .geography-state-panel summary {
    flex-wrap: wrap;
  }

  .geography-state-title {
    width: auto;
    min-width: 0;
  }

  .service-connection-head {
    display: grid;
  }

  .connection-summary {
    min-width: 0;
    text-align: left;
  }

  .modal-backdrop {
    padding: 12px;
    align-items: start;
  }

  .analytics-hero,
  .analytics-card-head,
  .analytics-recommendation {
    display: grid;
  }

  .analytics-scope {
    justify-content: flex-start;
    max-width: none;
  }

  .master-schedule-tools,
  .master-schedule-layout {
    grid-template-columns: 1fr;
  }

  .master-detail-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 760px) {
  .master-list-shell {
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
  }

  .master-schedule-table {
    display: block;
    min-width: 0;
  }

  .master-schedule-table thead {
    display: none;
  }

  .master-schedule-table tbody {
    display: grid;
    gap: 10px;
  }

  .master-schedule-table tr {
    position: relative;
    display: grid;
    gap: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 12px 12px;
    background: #fff;
    box-shadow: var(--shadow-soft);
  }

  .master-schedule-table tr.is-selected {
    border-color: var(--ok-line);
    background: var(--surface-sub);
  }

  .master-schedule-table td {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 8px;
    height: auto;
    padding: 4px 40px 4px 0;
    border: 0;
    font-size: 13px;
  }

  .master-schedule-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
  }

  .master-schedule-table td.selection-cell {
    position: absolute;
    top: 10px;
    right: 10px;
    display: block;
    width: 30px;
    min-width: 30px;
    padding: 0;
  }

  .master-schedule-table td.selection-cell::before {
    content: "";
  }

  .master-schedule-table td[data-label="Event"] {
    display: block;
    padding-right: 42px;
  }

  .master-schedule-table td[data-label="Event"]::before {
    content: "";
  }

  /* Generic DataTable → stacked cards (docs/RESPONSIVE_SPEC B2). Each row becomes a card: the first
     column is the title, the rest render as label:value pairs (labels from data-label, set in JS).
     master-schedule has its own bespoke card treatment above, so exclude it here. */
  .data-table:not(.master-schedule-table) thead {
    display: none;
  }
  .data-table:not(.master-schedule-table),
  .data-table:not(.master-schedule-table) tbody {
    display: block;
    width: 100%;
    /* Defeat the global table{min-width:980px} + per-table desktop min-widths so a
       stacked card table is truly full-width — no residual horizontal scroll (G6). */
    min-width: 0;
  }
  .data-table:not(.master-schedule-table) tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--surface);
    box-shadow: var(--shadow-soft);
  }
  .data-table:not(.master-schedule-table) td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 5px 0;
    border: 0;
    text-align: right;
  }
  .data-table:not(.master-schedule-table) td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    flex: none;
  }
  /* First cell = card title: full width, no label, divider under it. */
  .data-table:not(.master-schedule-table) td:first-child {
    display: block;
    text-align: left;
    padding: 0 0 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .data-table:not(.master-schedule-table) td:first-child::before {
    content: none;
  }
  /* Chevron is redundant on a tappable card; empty-state row spans full width. */
  .data-table:not(.master-schedule-table) td.dt-chevron {
    display: none;
  }
  .data-table:not(.master-schedule-table) td[colspan] {
    display: block;
    text-align: left;
  }
  .data-table:not(.master-schedule-table) td[colspan]::before {
    content: none;
  }
}

@media (max-width: 640px) {
  .sidebar {
    /* #23: was 58vh, which cut the drawer off before its bottom-pinned footer (Sign out) — let the
       open drawer use full height so the logout control is always reachable on small phones. */
    max-height: 100dvh;
  }

  .tabs {
    gap: 6px;
  }

  .tab-group {
    min-width: 154px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .analytics-funnel-row {
    grid-template-columns: 82px minmax(0, 1fr) 44px;
  }

  .metric {
    padding: 11px 12px;
  }

  .metric strong {
    font-size: 22px;
  }

  .panel {
    padding: 14px;
  }

  table {
    min-width: 980px;
  }

  th,
  td {
    padding: 8px 9px;
  }
}

/* Platform-owner KPI dashboard (overview tab) */
.owner-kpi-dashboard {
  margin-top: 18px;
}
/* Platform-owner console identity banner (Clarity platform-overview canon). */
.platform-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  background: linear-gradient(120deg, var(--lb-navy), var(--lb-teal));
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 20px;
  color: #fff;
}
.platform-banner-ico {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.14);
  display: grid;
  place-items: center;
  color: var(--lb-sunrise);
}
.platform-banner-title {
  font-size: 16px;
  font-weight: 700;
}
.platform-banner-sub {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.82);
  margin-top: 2px;
}
/* Canonical Clarity status pill (was undefined -> rendered as bare text on the Overview
   health + Stripe panels). Neutral accent chip matching the tenant-console .tc-* language. */
.live-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--line);
  white-space: nowrap;
}
/* The three platform-overview cards use the shared .report-grid (a rigid 2-col layout that
   dropped the 3rd card to a lopsided second row). Scope an auto-fit grid to this panel only. */
.report-grid[data-platform-workspace-panel="overview"] {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.owner-kpi-dashboard .kpi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin: 12px 0;
}
.owner-kpi-dashboard .kpi-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.owner-kpi-dashboard .kpi-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.owner-kpi-dashboard .kpi-value {
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}
.owner-kpi-dashboard .kpi-sub {
  font-size: 12px;
  color: var(--muted);
}
.owner-kpi-dashboard .kpi-breakdown,
.owner-kpi-dashboard .kpi-health {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.owner-kpi-dashboard .health-ok {
  color: var(--ok);
}
.owner-kpi-dashboard .health-warn {
  color: var(--warn);
}
.owner-kpi-dashboard .health-off {
  color: var(--faint);
}
.owner-kpi-dashboard .kpi-stripe {
  margin-top: 14px;
}
/* Finance panel: Stripe Connect-check action row + spacing for the read-only fee/holds cards. */
.finance-stripe-actions {
  margin-top: 12px;
}
.platform-finance .tc-card {
  margin-top: 14px;
}
.owner-kpi-dashboard .kpi-copy-field {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-sub);
}

/* Card on file (Stripe Elements) */
.card-on-file-status {
  margin: 4px 0 10px;
}
.card-on-file-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.card-on-file-badge.ok {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.card-on-file-badge.muted {
  color: var(--muted, #6b7c75);
}
.card-entry-form {
  margin: 10px 0;
}
/* Brand-facing trial status card (Sprint 2 trial gate, slice 3). */
.brand-trial-card {
  display: grid;
  gap: 8px;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 1px solid var(--warn-bg);
  border-left: 3px solid var(--warn-dot);
  border-radius: var(--radius);
  background: var(--warn-bg);
}
.brand-trial-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.brand-trial-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 11px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--warn);
  background: var(--surface);
  border: 1px solid var(--warn-dot);
}
.brand-trial-badge.ok {
  color: var(--ok);
  border-color: var(--ok);
}
.brand-trial-plan {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.brand-trial-detail {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--ink);
}
.brand-trial-detail strong {
  color: var(--ink);
}
.card-element {
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
}
.card-entry-error {
  color: var(--danger);
  font-size: 0.88rem;
  min-height: 1.1em;
  margin: 6px 0;
}
.card-entry-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

/* Payout mode + ambassador roster import (M1.5) */
.payout-mode-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 4px 0 8px;
}
.payout-mode-row label {
  font-weight: 600;
}
.payout-mode-row select {
  min-width: 280px;
  flex: 1 1 280px;
}
.card-divider {
  border: none;
  border-top: 1px solid var(--border);
  margin: 14px 0;
}
.ambassador-import textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  margin: 8px 0;
}
.ambassador-import input[type="file"] {
  margin: 4px 0;
}
.ambassador-import code {
  background: var(--surface-strong);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 0.82rem;
}
.import-result {
  margin-top: 10px;
  min-height: 1.2em;
}
.import-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.import-pill {
  display: inline-flex;
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
}
.import-pill.ok {
  color: var(--accent-strong);
  background: var(--accent-soft);
  border-color: var(--accent);
}
.import-pill.bad {
  color: var(--danger);
  background: var(--danger-soft);
  border-color: var(--danger);
}
.import-error-list {
  margin: 8px 0 0;
  padding-left: 18px;
  font-size: 0.85rem;
  color: var(--danger);
}

/* Agreement template editor (M1.5 / A1) */
#agreementTemplateCard textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.85rem;
  margin: 6px 0;
}
#agreementTemplateCard label {
  font-weight: 600;
  display: block;
  margin-top: 8px;
}
.agreement-version-list {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.agreement-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.9rem;
}

/* --- Platform-owner console accent (T2 fix) -------------------------------- */
/* The owner console must read as visually distinct from a tenant's (the owner/tenant chrome split).
   `body.platform-console` was applied but the orange accent it references was never declared, so the
   owner console looked identical to a tenant. Remap --accent to Longboard sunrise; the derived
   soft/line/strong tokens are redeclared so they recompute off the sunrise --accent. */
body.platform-console {
  --accent: var(--lb-sunrise);
  --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 32%, #fff);
  --accent-strong: color-mix(in srgb, var(--accent) 70%, #000);
  --primary-soft: var(--accent-soft);
}

/* --- Partner ("Outrigger") console (Sprint 3, slice A4) --------------------- */
/* Teal accent swap for the partner console shell (analog of the platform console's orange). The
   derived soft/line/strong tokens are redeclared here so they recompute off the teal --accent. */
body.partner-console {
  --accent: #0e7c86;
  --accent-soft: color-mix(in srgb, var(--accent) 12%, #fff);
  --accent-line: color-mix(in srgb, var(--accent) 32%, #fff);
  --accent-strong: color-mix(in srgb, var(--accent) 70%, #000);
  --primary-soft: var(--accent-soft);
}

.partner-portfolio { max-width: 1000px; }
.partner-portfolio-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.partner-portfolio-count { font-size: 13px; color: var(--faint); font-weight: 600; }
.partner-portfolio-sub { font-size: 13px; color: var(--muted); margin-top: 2px; }

.partner-brand-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 720px) { .partner-brand-grid { grid-template-columns: 1fr; } }

.partner-brand-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  padding: 18px;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.partner-brand-card:hover { border-color: var(--accent-line); box-shadow: var(--shadow); }
.partner-brand-head { display: flex; align-items: center; gap: 12px; }
.partner-brand-id { flex: 1; min-width: 0; }
.partner-brand-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.partner-brand-slug { font-size: 12px; color: var(--faint); }

.bmark { color: #fff; display: grid; place-items: center; font-weight: 700; flex: none; width: 44px; height: 44px; border-radius: 12px; font-size: 18px; }
.bmark-i { background: var(--mark-indigo); }
.bmark-p { background: var(--mark-plum); }
.bmark-g { background: var(--mark-green); }
.bmark-b { background: var(--mark-blue); }

/* Card "Active" pill uses the canonical Clarity StatusBadge atom (.status.ok) + the --ok-dot. */
.partner-brand-head .status { flex: none; }
.partner-brand-head .status-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--ok-dot); flex: none; }
.partner-brand-stats {
  display: flex; margin: 16px 0; padding: 13px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.partner-brand-stats > div { flex: 1; }
.pstat-val { font-size: 17px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.pstat-tier { font-size: 13px; font-weight: 600; color: var(--muted); margin-top: 3px; }
.pstat-lbl { font-size: 11.5px; color: var(--faint); }
.partner-enter-btn { width: 100%; justify-content: center; }

.partner-note {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 18px; padding: 13px 15px;
  background: var(--accent-soft); border: 1px solid var(--accent-line); border-radius: 12px;
  font-size: 12.5px; color: var(--text); line-height: 1.5;
}
.partner-note svg { color: var(--accent); flex: none; margin-top: 1px; }
.partner-note strong { color: var(--ink); }

.partner-empty { max-width: 460px; margin: 40px auto 0; text-align: center; }
.partner-empty-icon {
  width: 64px; height: 64px; margin: 0 auto; border-radius: 17px;
  background: var(--accent-soft); color: var(--accent); display: grid; place-items: center;
}
.partner-empty h3 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 18px 0 0; }
.partner-empty p { font-size: 13.5px; color: var(--muted); line-height: 1.55; margin-top: 8px; }
.partner-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }

/* --- Outrigger invites (slice A4-UI 2) ------------------------------------- */
.partner-invites { max-width: 720px; }

.partner-inv-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.partner-inv-head--sent { margin: 26px 0 12px; }
.partner-inv-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.partner-inv-count { font-size: 11px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 999px; padding: 1px 8px; }
.partner-inv-rule { flex: 1; height: 1px; background: var(--line); }

.partner-inv-incoming { display: flex; flex-direction: column; gap: 11px; }
.partner-inv-card { border: 1px solid var(--accent-line); border-radius: 14px; background: var(--surface); padding: 16px; }
.partner-inv-cardhead { display: flex; align-items: center; gap: 12px; }
.partner-inv-cardhead .bmark { width: 40px; height: 40px; border-radius: 11px; font-size: 16px; }
.partner-inv-id { flex: 1; min-width: 0; }
.partner-inv-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.partner-inv-name.sm { font-size: 13.5px; font-weight: 600; }
.partner-inv-sub { font-size: 12.5px; color: var(--faint); }
.partner-inv-actions { display: flex; gap: 9px; margin-top: 14px; }
.partner-inv-actions .primary, .partner-inv-actions .secondary { flex: 1; justify-content: center; }

.partner-inv-outgoing { border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); }
.partner-inv-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--surface-sub); }
.partner-inv-row:first-child { border-top: 0; }
.partner-inv-row .bmark { width: 34px; height: 34px; border-radius: 9px; font-size: 14px; }

.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 7px; padding: 0 5px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; }

/* --- Outrigger "operating as" banner + brand-switcher (slice A4-UI 3) ------- */
/* Dark banner pinned atop the brand admin workspace while a partner is entered (Support-Assist analog).
   Uses its own palette (not --accent) since the partner is in brand-admin mode here, not the console. */
.op-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px; background: var(--op-bg); color: #fff;
  font-size: 13px; font-weight: 500; position: sticky; top: 0; z-index: 40;
}
/* View-as-account banner: its own amber palette so a read-only support view reads as a distinct,
   deliberately conspicuous mode (never confused with the partner "operating as" teal). */
.op-bar-view-as { background: var(--op-view-bg); }
.op-bar-view-as .op-bar-icon { color: var(--op-view-accent); }
.op-bar-view-as .op-bar-meta { color: var(--op-view-accent); }
/* A subtle amber frame around the whole app while a read-only view-as session is active. */
body.view-as-active { box-shadow: inset 0 0 0 3px var(--op-view-frame); }
/* Support-assist reuses the teal op-bar palette (the partner "operating as" analog); a matching teal
   frame signals the operator is dropped into a brand. Reuses --op-accent so no new palette is introduced.
   The support-assist-active body class is already toggled in app.js (renderTenantWorkspace). */
body.support-assist-active:not(.view-as-active) { box-shadow: inset 0 0 0 3px var(--op-accent); }
.op-bar-icon { display: inline-flex; width: 22px; height: 22px; border-radius: 6px; background: rgba(255, 255, 255, 0.14); color: var(--op-accent); align-items: center; justify-content: center; flex: none; }
.op-bar-text strong { color: #fff; }
.op-bar-meta { font-size: 11.5px; color: var(--op-meta); }
.op-bar-actions { margin-left: auto; display: flex; align-items: center; gap: 9px; }
.op-exit-btn { display: inline-flex; align-items: center; gap: 6px; height: 29px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, 0.25); background: transparent; color: #fff; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.op-exit-btn:hover { background: rgba(255, 255, 255, 0.08); }

.op-switch-wrap { position: relative; }
.op-switch-trigger { display: inline-flex; align-items: center; height: 29px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: #fff; border-radius: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.op-switch-menu { position: absolute; top: 36px; right: 0; width: 250px; background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 36px rgba(16, 24, 40, 0.16); overflow: hidden; z-index: 30; }
.op-switch-head { padding: 9px 13px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); }
.op-switch-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 13px; cursor: pointer; border: 0; border-top: 1px solid var(--surface-sub); background: var(--surface); text-align: left; }
.op-switch-row:hover { background: var(--surface-sub); }
.op-switch-row .bmark { width: 26px; height: 26px; border-radius: 8px; font-size: 12px; }
.op-switch-name { flex: 1; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.op-switch-cur { font-size: 11px; font-weight: 700; color: var(--accent); }

/* --- Outrigger partner settings: members + portfolio management (slice A4-UI 4) --- */
.partner-settings { max-width: 900px; }

/* Canonical SegmentedControl — a single-select pill group (renderSegmentedControl). Reusable atom;
   first adopted by the partner-settings Members/Portfolio toggle (was the bespoke .pset-seg). */
.segmented-control { display: inline-flex; gap: 3px; padding: 3px; background: var(--surface-strong); border-radius: 9px; margin-bottom: 20px; }
.segmented-control__option { padding: 6px 14px; border: 0; background: transparent; border-radius: 7px; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--muted); cursor: pointer; }
.segmented-control__option.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }

.pset-head { display: flex; align-items: flex-end; gap: 14px; margin-bottom: 14px; }
.pset-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.pset-sub { font-size: 12.5px; color: var(--faint); margin-top: 2px; }
.pset-add { margin-left: auto; }

.pset-tablewrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pset-table { width: 100%; border-collapse: collapse; }
.pset-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); padding: 11px 16px; background: var(--surface-sub); }
.pset-row { border-top: 1px solid var(--line); }
.pset-row:hover { background: var(--surface-sub); }
.pset-cell { padding: 12px 16px; font-size: 13px; color: var(--muted); vertical-align: middle; }
.pset-member { display: flex; align-items: center; gap: 11px; }
.pset-avatar { width: 30px; height: 30px; border-radius: 999px; flex: none; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; }
.pset-member-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pset-member-email { font-size: 12px; color: var(--faint); }
.pset-actions { text-align: right; }
.pset-remove { height: 30px; padding: 0 12px; border: 1px solid var(--line-strong); background: var(--surface); border-radius: var(--radius-sm); font-size: 12.5px; font-weight: 600; color: var(--danger); cursor: pointer; }
.pset-remove:hover { background: color-mix(in srgb, var(--danger) 8%, #fff); border-color: color-mix(in srgb, var(--danger) 30%, #fff); }
.pset-empty { padding: 18px 16px; text-align: center; color: var(--faint); font-size: 13px; }

.pset-brandwrap { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--surface); }
.pset-brand-row { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 1px solid var(--line); }
.pset-brand-row:first-child { border-top: 0; }
.pset-brand-row:hover { background: var(--surface-sub); }
.pset-brand-row .bmark { width: 36px; height: 36px; border-radius: 10px; font-size: 15px; }
.pset-brand-id { flex: 1; min-width: 0; }
.pset-brand-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.pset-brand-sub { font-size: 12px; color: var(--faint); }
.pset-note { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 13px 15px; background: var(--surface-sub); border: 1px solid var(--line); border-radius: 12px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.pset-note svg { color: var(--muted); flex: none; margin-top: 1px; }

/* slice A4-UI 4 review fixes: self-row tag, retry link, disabled remove */
.pset-you { display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 1px 6px; vertical-align: middle; }
.pset-remove[disabled] { opacity: 0.5; cursor: not-allowed; color: var(--faint); }
.pset-link { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; }

/* --- Brand Settings → Partner card (slice A4-UI 5) ------------------------- */
.brand-partner { max-width: 640px; }
.bpc-intro { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 16px; }
.bpc-intro strong { color: var(--ink); }
.bpc-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); padding: 20px; }
.bpc-card--pending { border-color: var(--accent-line); }
.bpc-head { display: flex; align-items: center; gap: 12px; }
.bpc-mark { width: 46px; height: 46px; border-radius: var(--radius); flex: none; display: grid; place-items: center; background: var(--accent); color: #fff; font-weight: 700; font-size: 18px; }
.bpc-mark--none { background: var(--surface-strong); color: var(--muted); }
.bpc-id { flex: 1; min-width: 0; }
.bpc-name { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.bpc-sub { font-size: 12.5px; color: var(--faint); }
.bpc-facts { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--surface-sub); display: flex; flex-direction: column; gap: 10px; }
.bpc-fact { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text); }
.bpc-fact::before { content: "✓"; color: var(--ok); font-weight: 700; flex: none; }
.bpc-note { font-size: 12.5px; color: var(--text); line-height: 1.55; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--surface-sub); }
.bpc-actions { display: flex; gap: 10px; margin-top: 16px; }
.bpc-actions .primary, .bpc-actions .secondary { flex: 1; justify-content: center; }
.bpc-remove { margin-top: 16px; }
.bpc-invite { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--surface-sub); }
.bpc-invite-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 7px; }
.bpc-field { display: flex; }
.bpc-input { width: 100%; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 11px; padding: 12px 13px; font: inherit; font-size: 14px; color: var(--ink); }
.bpc-invite-btn { margin-top: 13px; }
.bpc-empty { padding: 18px 4px; color: var(--faint); font-size: 13px; }

/* ===== Tenant console redesign (Clarity) — sectioned detail + Advanced drawer ===== */
.tenant-console{display:flex;flex-direction:column;gap:14px;max-width:900px;}
.tenant-console .tc-card{border:1px solid var(--line);border-radius:15px;background:var(--surface);padding:18px 20px;}
.tc-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:14px;}
.tc-hint{font-size:12px;color:var(--faint);line-height:1.5;margin:6px 0 0;}
.tc-hint.tc-inline{display:inline;text-transform:none;letter-spacing:0;font-weight:500;}
.tc-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
.tc-field{display:flex;flex-direction:column;gap:5px;min-width:0;}
.tc-field>span{font-size:12px;color:var(--faint);}
.tc-field input,.tc-field select,.tc-field textarea{border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:13.5px;color:var(--ink);background:var(--surface);font-family:inherit;width:100%;}
.tc-field textarea{resize:vertical;}
/* Machine-managed references (the Stripe customer/subscription/price ids + current period end): shown
   for support, written server-side, so they read as inert. */
.tc-field input[readonly]{background:var(--surface-strong);color:var(--faint);cursor:default;}
.tc-span2{grid-column:1 / -1;}
.tc-check{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink);}
.tc-btn-sm{height:34px;padding:0 12px;font-size:12.5px;}
.tc-create-card{border-color:color-mix(in srgb,var(--accent) 30%,var(--line));}
.tc-create-row{display:flex;align-items:flex-end;gap:12px;}
.tc-create-row .tc-field{flex:1;}
.tc-create-plan{flex:0 0 210px;}
.tc-create-btn{height:44px;white-space:nowrap;}
.tc-optional{color:var(--faint);font-weight:400;}
.tc-detail{display:flex;flex-direction:column;gap:14px;}
.tc-detail-header{display:flex;align-items:center;gap:14px;}
.tc-detail-title{display:flex;align-items:center;gap:11px;flex:1;min-width:0;}
.tc-detail-mark{width:40px;height:40px;border-radius:11px;background:color-mix(in srgb,var(--accent) 14%,#fff);color:var(--accent);display:grid;place-items:center;font-weight:700;font-size:17px;flex:none;}
.tc-detail-name{font-size:20px;font-weight:700;letter-spacing:-.02em;color:var(--ink);}
.tc-detail-sub{font-size:13px;color:var(--faint);}
.tc-mini-context{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:12px;color:var(--faint);}
.tc-mini-context span{display:inline-flex;gap:6px;}
.tc-mini-context strong{color:var(--ink);font-weight:600;}
.tc-cap-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.tc-cap-head .tc-eyebrow{margin-bottom:0;}
.tc-drift{font-size:10.5px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;color:var(--warn);background:var(--warn-bg);border-radius:99px;padding:2px 8px;}
.tc-tier-summary{display:flex;align-items:flex-start;gap:12px;background:color-mix(in srgb,var(--accent) 7%,#fff);border:1px solid color-mix(in srgb,var(--accent) 20%,#fff);border-radius:13px;padding:14px 15px;}
.tc-tier-icon{width:34px;height:34px;border-radius:9px;background:var(--accent);color:#fff;display:grid;place-items:center;flex:none;font-weight:700;}
.tc-tier-title{font-size:13.5px;font-weight:700;color:var(--ink);}
.tc-tier-desc{font-size:12.5px;color:var(--muted);line-height:1.5;margin-top:3px;}
.tc-override-row{display:flex;align-items:center;gap:12px;margin-top:14px;padding-top:14px;border-top:1px solid var(--surface-sub);}
.tc-override-row>div{flex:1;min-width:0;}
.tc-override-title{font-size:13.5px;font-weight:600;color:var(--ink);}
.tc-cap-foot{display:flex;align-items:center;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid var(--surface-sub);}
.tc-cap-foot .tc-hint{flex:1;margin:0;}
.tc-switch{position:relative;display:inline-flex;flex:none;cursor:pointer;}
.tc-switch input{position:absolute;opacity:0;width:0;height:0;}
.tc-switch-track{width:44px;height:26px;border-radius:99px;background:var(--line);transition:background .15s;position:relative;display:inline-block;}
.tc-switch-track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.2);}
.tc-switch input:checked+.tc-switch-track{background:var(--accent);}
.tc-switch input:checked+.tc-switch-track::after{transform:translateX(18px);}
.tc-payment{margin-top:14px;padding-top:14px;border-top:1px solid var(--surface-sub);}
.tc-payment-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px;}
.tc-payment-head strong{font-size:13px;color:var(--ink);}
.tc-advanced{border:1px solid var(--line);border-radius:15px;background:var(--surface);overflow:hidden;}
.tc-advanced-summary{display:flex;align-items:center;gap:11px;padding:16px 20px;cursor:pointer;list-style:none;}
.tc-advanced-summary::-webkit-details-marker{display:none;}
.tc-advanced-icon{width:32px;height:32px;border-radius:9px;background:var(--surface-sub);color:var(--muted);display:grid;place-items:center;flex:none;}
.tc-advanced-label{flex:1;display:flex;flex-direction:column;gap:1px;}
.tc-advanced-label strong{font-size:13.5px;color:var(--ink);}
.tc-advanced-label .tc-hint{margin:0;}
.tc-advanced-chev{color:var(--faint);transition:transform .18s;}
.tc-advanced[open] .tc-advanced-chev{transform:rotate(180deg);}
.tc-advanced-body{padding:4px 20px 18px;}
.tc-adv-group{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px;}
.tc-adv-group:first-child{margin-top:6px;}
.tc-detail-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.tc-detail-actions .tc-hint{flex:1;margin:0;min-width:200px;}
.tc-detail-actions-btns{display:inline-flex;gap:9px;}
@media (max-width:760px){.tc-grid2{grid-template-columns:1fr;}.tc-create-row{flex-direction:column;align-items:stretch;}.tc-create-plan{flex:auto;}}
.tc-caprow{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--surface-sub);}
.tc-caprow:last-child{border-bottom:0;}
.tc-caprow-main{flex:1;min-width:0;}
.tc-caprow-label{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:600;color:var(--ink);}
.tc-caprow-meta{font-size:12px;color:var(--faint);margin-top:1px;}
.tc-caprow-limit{width:96px;flex:none;border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12.5px;color:var(--ink);background:var(--surface);}
.tc-caprow-reset{display:none;align-items:center;gap:4px;font-size:11.5px;font-weight:600;color:var(--accent);background:none;border:0;cursor:pointer;flex:none;padding:0;}
.tc-caprow-flag{display:none;}
.tc-caprow.drifted .tc-caprow-flag{display:inline-block;}
.tc-caprow.drifted .tc-caprow-reset{display:inline-flex;}
.tc-caprow.over-limit .tc-caprow-label{color:var(--danger);}

/* Shopify connection — publishing block + toggle + diagnostics (Phase 9c) */
.shopify-pub-head { margin-top: 20px; }
.shopify-pub-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.shopify-pub-row .segmented-control { margin-bottom: 0; }
.shopify-pub-label strong { font-size: 13px; color: var(--ink); }
.shopify-toggle-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 14px; }
.shopify-toggle-copy strong { display: block; font-size: 13px; color: var(--ink); }
.shopify-toggle-copy .helper-text { margin: 2px 0 0; }
.shopify-diagnostics { display: grid; gap: 10px; margin-top: 10px; }

/* ============================================================================================
   Location detail — guided approval flow (Section 3). Rebuilt from the design canon
   (LocationDetailRebuild.dc.html + LOCATION_DETAIL_REBUILD.md). Depth, not decoration: each
   answer opens a nested block one step in (radius 14 -> 11 -> 10) and one shade down. No accent
   rails, no step chrome — the nesting IS the dependency. Values are from the canon's table.
   ============================================================================================ */
.appr .appr-q { margin-top: 14px; }
.appr .appr-q:first-of-type { margin-top: 10px; }
.appr .appr-q-tight { margin-top: 0; }
.appr-q-label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink, #1b1c1f); margin-bottom: 7px; }

/* Segmented control (3a / 3c / scope) */
.appr-seg { display: inline-flex; gap: 0; background: var(--surface-strong); border-radius: 10px; padding: 3px; }
.appr-nest .appr-seg { background: var(--line); }
.appr-seg-btn {
  position: relative; appearance: none; border: 0; background: transparent; cursor: pointer;
  height: 34px; padding: 0 16px; border-radius: 8px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); transition: background .12s, color .12s, box-shadow .12s;
}
.appr-seg-btn::after { content: ""; position: absolute; inset: -5px 0; } /* 44px tap floor */
.appr-seg-btn:hover { color: var(--ink); }
.appr-seg-btn[aria-pressed="true"] { background: #fff; color: var(--accent-strong, var(--accent)); box-shadow: 0 1px 2px rgba(16,24,40,.09); }

/* Nested reveal block (3a = Yes) */
.appr-nest { margin-top: 14px; background: var(--surface-sub); border: 1px solid var(--line); border-radius: 11px; padding: 15px; }
/* Inner block (revealed by 3c) */
.appr-inner { margin-top: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: 14px; }

/* Radio cards (3b when / 3e store person) */
.appr-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.appr-card {
  display: flex; flex-direction: column; gap: 3px; text-align: left; cursor: pointer;
  border: 1px solid var(--line-strong); background: var(--surface); border-radius: 10px; padding: 12px 13px;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.appr-card:hover { border-color: color-mix(in srgb, var(--line-strong) 80%, var(--muted)); }
.appr-card[aria-pressed="true"] { border: 1.5px solid var(--accent); background: var(--accent-soft); padding: 11.5px 12.5px; }
.appr-card-t { font-size: 13.5px; font-weight: 600; color: var(--ink, #1b1c1f); }
.appr-card-d { font-size: 11.5px; line-height: 1.35; color: var(--muted); }

/* "No" confirmation line */
.appr-ok { margin: 12px 0 0; font-size: 12.5px; font-weight: 500; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-line); border-radius: 9px; padding: 10px 12px; }

/* Round 8 resolved-approver line: always-visible "who approves + from where" (green) or the
   "no one yet" gap (amber). Palette derives from the semantic --ok / --warn status tokens (text
   shades mixed toward --ink for readability, like --ok-line), so the line tracks the design system
   instead of hardcoding the prototype's literals. is-ok / is-none set the state; the dot = icon. */
.appr-resolved { margin: 14px 0 0; display: flex; align-items: flex-start; gap: 10px; border-radius: 11px; padding: 12px 14px; }
.appr-resolved.is-ok { background: var(--ok-bg); }
.appr-resolved.is-none { background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, #fff); }
.appr-resolved-icon { flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: 50%; }
.appr-resolved.is-ok .appr-resolved-icon { background: var(--ok); }
.appr-resolved.is-none .appr-resolved-icon { background: var(--warn); }
.appr-resolved-body { flex: 1; min-width: 0; }
.appr-resolved-text { display: block; font-size: 13px; line-height: 1.45; }
.appr-resolved.is-ok .appr-resolved-text { color: color-mix(in srgb, var(--ok) 70%, var(--ink, #1b1c1f) 30%); }
.appr-resolved.is-ok .appr-resolved-text strong { color: var(--ink, #1b1c1f); }
.appr-resolved.is-none .appr-resolved-text { font-weight: 700; color: color-mix(in srgb, var(--warn) 82%, var(--ink, #1b1c1f) 18%); }
.appr-resolved-note { display: block; margin-top: 2px; font-size: 12px; line-height: 1.45; }
.appr-resolved.is-ok .appr-resolved-note { color: color-mix(in srgb, var(--ok) 70%, var(--ink, #1b1c1f) 30%); }
.appr-resolved.is-none .appr-resolved-note { font-weight: 400; color: color-mix(in srgb, var(--warn) 82%, var(--ink, #1b1c1f) 18%); }

/* Field + hint inside the flow */
.appr-field { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink, #1b1c1f); }
.appr-field input[type="text"], .appr-field textarea, .appr-field select {
  display: block; width: 100%; margin-top: 6px; min-height: 38px; border-radius: 9px;
  border: 1px solid var(--line-strong); padding: 8px 11px; font: inherit; font-weight: 400; box-sizing: border-box;
}
.appr-field select { background: var(--panel); cursor: pointer; }
.appr-field textarea { min-height: 56px; resize: vertical; }
.appr-field input[type="text"]:focus, .appr-field textarea:focus, .appr-field select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.appr-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); }

/* Chain approver — read-only row (chain, approver set) */
.appr-readonly { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; background: var(--surface-strong); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.appr-ro-label { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.appr-ro-val { font-size: 13px; font-weight: 600; color: var(--ink, #1b1c1f); }
.appr-ro-src { font-size: 11.5px; color: var(--muted); }

/* Chain approver — missing (blocks save): red, not amber */
.appr-alert { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; background: var(--danger-soft); border: 1px solid var(--danger-line); border-radius: 10px; padding: 11px 13px; font-size: 12.5px; color: var(--danger); }
.appr-link { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; font-weight: 600; color: var(--danger); text-decoration: underline; padding: 0; }

/* Blocked-save reason (Section 5) — amber, names the fix */
.appr-blocked { margin: 14px 0 0; font-size: 12.5px; font-weight: 500; color: var(--warn); background: var(--warn-bg); border: 1px solid color-mix(in srgb, var(--warn) 30%, #fff); border-radius: 9px; padding: 10px 12px; }

/* Section 5 save bar: the blocked-approval reason mirrored above the Save button. Reuses .appr-blocked
   (amber) but drops its default top margin so it sits flush in the sticky action bar. */
.detail-actions-sticky .save-bar-reason { margin: 0 0 10px; }

/* ==============================================================================================
   Location detail — Clarity visual refresh (design hand-off: LocationDetailRefresh.dc.html).
   RESTYLE-ONLY: #locationDetailScreen markup + wiring are unchanged; these rules bring the screen
   to the Clarity component specs (exact px/weights from the hand-off README). Everything is scoped
   to #locationDetailScreen so no other screen is affected. Builds on PR 598 (color tokens) + PR 599
   (collapsible sections). This is the fields/labels/inputs/type-scale + layout pass; the additive
   identity-header chips + section status pills land in a follow-up commit.
   ============================================================================================== */
#locationDetailScreen { max-width: 880px; }
#locationDetailScreen .loc-identity-lines h3 { font-size: 23px; }

/* Field labels: small, semibold, faint, stacked above the control — the "cramped labels" fix.
   Scoped to the text-field grids (the toggle rows and the approval segmented controls keep their
   own treatment). Each label wraps its input, so flex-column stacks the caption above it. */
#locationDetailScreen .access-card-grid > label {
  display: flex; flex-direction: column; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--faint, #8a90a0);
}

/* Inputs / selects / textareas → the Clarity `.fld` rhythm (h40, radius 9, --line-strong border,
   13.5px --ink text, accent focus ring). */
#locationDetailScreen input[type="text"],
#locationDetailScreen input[type="email"],
#locationDetailScreen input[type="number"],
#locationDetailScreen select,
#locationDetailScreen textarea {
  width: 100%; min-height: 40px; box-sizing: border-box;
  border: 1px solid var(--line-strong, #e0e1e8); border-radius: 9px;
  background: var(--surface, #fff); padding: 8px 12px;
  font-size: 13.5px; font-weight: 400; color: var(--ink, #15171c);
}
#locationDetailScreen textarea { min-height: 80px; padding: 10px 12px; line-height: 1.5; }
#locationDetailScreen input[type="text"]:focus,
#locationDetailScreen input[type="email"]:focus,
#locationDetailScreen input[type="number"]:focus,
#locationDetailScreen select:focus,
#locationDetailScreen textarea:focus {
  border-color: var(--accent, #5b5bd6);
  box-shadow: 0 0 0 3px var(--accent-soft, #eeeefc); outline: none;
}

/* Section headers to the Clarity scale (14.5px / 700). */
#locationDetailScreen .access-card-title,
#locationDetailScreen .access-disc-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
#locationDetailScreen .access-disc > summary { padding: 16px 18px; }

/* Per-location booking windows editor (Location detail -> Availability). */
.loc-windows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.loc-windows-empty { padding: 4px 0; }
/* Sampling cadence sits in the same disclosure as the booking windows: both answer 'when and how
   often can this location be sampled'. Tokens only -- no raw hex outside :root. */
.loc-cadence-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.loc-cadence { display: flex; flex-direction: column; gap: 4px; max-width: 200px; flex: 1 1 150px; }
.loc-window-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.loc-window-row select, .loc-window-row input[type="time"] { height: 34px; border: 1px solid var(--line-strong, #e0e1e8); border-radius: 8px; padding: 0 8px; font-size: 13px; font-family: inherit; color: var(--ink, #15171c); background: var(--surface, #fff); }
.loc-window-row select { min-width: 130px; }
.loc-window-sep { font-size: 12.5px; color: var(--faint, #8a90a0); }
.loc-window-remove { margin-left: auto; font-size: 12.5px; }
/* A window the server would refuse is never sent; the row says so itself (renderLocationBookingWindowErrors). */
.loc-window-row select[aria-invalid="true"], .loc-window-row input[type="time"][aria-invalid="true"] { border-color: var(--danger); }
.loc-window-error { flex-basis: 100%; margin: 0; font-size: 12.5px; color: var(--danger); }
#locationAvailabilitySummary.is-unsaved { color: var(--danger); }

/* =========================================================================================
 * Smart Import Wizard (data-view="smart-import"). Token-driven; fallbacks keep it sane if a
 * soft/-bg token is absent. Cloned from the Clarity wizard vocabulary.
 * ========================================================================================= */
.smart-import-root { display: block; }
.si-wrap { max-width: 1180px; margin: 0 auto; width: 100%; }
.si-lead { font-size: 13.5px; color: var(--muted, #6b7080); line-height: 1.55; max-width: 660px; margin: 0 0 4px; }
.si-note { font-size: 13px; color: var(--muted, #6b7080); padding: 28px 4px; }
.si-error { margin: 12px 0; padding: 10px 14px; border-radius: 10px; background: var(--danger-bg, #fdecec); color: var(--danger, #c0392b); font-size: 12.5px; font-weight: 600; }

/* Stepper */
.si-stepper { display: flex; align-items: center; margin: 18px 0 22px; flex-wrap: wrap; gap: 4px 0; }
.si-step { display: flex; align-items: center; gap: 9px; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; }
.si-step-num { width: 28px; height: 28px; border-radius: 99px; display: grid; place-items: center; font-size: 12.5px; font-weight: 700; flex: none; background: var(--surface-strong, #f3f4f7); color: var(--faint, #8a90a0); }
.si-step.is-current .si-step-num { background: var(--surface, #fff); color: var(--accent); border: 2px solid var(--accent); box-shadow: 0 0 0 4px var(--accent-soft, #eeeefc); }
.si-step.is-done .si-step-num { background: var(--accent); color: #fff; }
.si-step-label { font-size: 13px; font-weight: 500; color: var(--muted, #6b7080); white-space: nowrap; }
.si-step.is-current .si-step-label { font-weight: 700; color: var(--ink, #15171c); }
.si-conn { width: 32px; height: 2px; background: var(--line, #ececf1); margin: 0 12px; flex: none; }
.si-conn.is-done { background: var(--accent); }

/* Step 1 — source */
.si-source { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.si-drop { border: 2px dashed var(--line-strong, #e0e1e8); border-radius: 16px; padding: 40px 24px; text-align: center; cursor: pointer; background: var(--surface-sub, #fafbfc); transition: border-color .15s, background .15s; }
.si-drop:hover { border-color: var(--accent); background: var(--accent-soft, #eeeefc); }
.si-drop-ico { width: 56px; height: 56px; border-radius: 15px; background: var(--accent-soft, #eeeefc); color: var(--accent); display: inline-grid; place-items: center; }
.si-drop-title { font-size: 16px; font-weight: 700; color: var(--ink, #15171c); margin-top: 15px; }
.si-drop-sub { font-size: 13px; color: var(--faint, #8a90a0); margin-top: 5px; }
.si-drop-actions { display: inline-flex; gap: 12px; margin-top: 17px; align-items: center; }
.si-drop-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; }
.si-drop-note { font-size: 11.5px; color: var(--faint, #8a90a0); margin-top: 14px; }
.si-link { background: none; border: 0; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; font-family: inherit; padding: 0; }
.si-or { display: flex; align-items: center; gap: 12px; color: var(--faint, #8a90a0); font-size: 12px; }
.si-or span { flex: 1; height: 1px; background: var(--line, #ececf1); }
.si-scratch { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line, #ececf1); border-radius: 14px; padding: 16px 18px; }
.si-scratch-meta { flex: 1; min-width: 0; }
.si-scratch-title { font-size: 14px; font-weight: 700; color: var(--ink, #15171c); }
.si-scratch-sub { font-size: 12.5px; color: var(--faint, #8a90a0); margin-top: 2px; }

.si-file-card { max-width: 720px; border: 1px solid var(--line, #ececf1); border-radius: 16px; overflow: hidden; }
.si-file-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background: var(--surface-sub, #fafbfc); border-bottom: 1px solid var(--line, #ececf1); }
.si-file-ico { width: 42px; height: 42px; border-radius: 11px; background: var(--accent-soft, #eeeefc); color: var(--accent); display: grid; place-items: center; flex: none; }
.si-file-meta { flex: 1; min-width: 0; }
.si-file-name { font-size: 14.5px; font-weight: 700; color: var(--ink, #15171c); }
.si-file-sub { font-size: 12px; color: var(--faint, #8a90a0); }
.si-file-body { padding: 18px 20px; }
.si-inline-fields { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-end; }
.si-inline-field { display: flex; flex-direction: column; gap: 6px; }
.si-inline-field > span { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint, #8a90a0); }
.si-inline-field select { height: 38px; border: 1px solid var(--line-strong, #e0e1e8); border-radius: 9px; padding: 0 11px; font-size: 13px; color: var(--ink, #15171c); background: var(--surface, #fff); font-family: inherit; cursor: pointer; }
.si-detected { margin-top: 17px; }
.si-detected-label { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint, #8a90a0); }
.si-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.si-chip-static { font-size: 12px; font-weight: 600; color: var(--muted, #6b7080); background: var(--surface-strong, #f3f4f7); border-radius: 7px; padding: 4px 9px; }
.si-badge { font-size: 11px; font-weight: 700; border-radius: 99px; padding: 3px 10px; background: var(--surface-strong, #f3f4f7); color: var(--muted, #6b7080); }
.si-badge.is-ok { background: var(--ok-bg, #e7f6ee); color: var(--ok, #137a47); }
.si-badge.is-warn { background: var(--warn-bg, #fff8e6); color: var(--warn, #9a6700); }

/* Step 2 — map & preview */
.si-map { display: flex; gap: 20px; align-items: flex-start; }
.si-map-left { width: 420px; flex: none; }
.si-map-right { flex: 1; min-width: 0; }
.si-map-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.si-map-title { font-size: 14px; font-weight: 700; color: var(--ink, #15171c); }
.si-map-count { margin-left: auto; font-size: 12px; color: var(--faint, #8a90a0); }
.si-scratch-banner { margin-bottom: 12px; padding: 11px 15px; border-radius: 11px; background: var(--accent-soft, #eeeefc); color: var(--accent); font-size: 12.5px; font-weight: 600; }
.si-cards { max-height: calc(100vh - 320px); overflow: auto; padding: 4px 6px 4px 1px; display: flex; flex-direction: column; gap: 11px; }
.si-group-label { font-size: 10.5px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--faint, #8a90a0); margin-top: 4px; }
.si-unused { font-size: 11.5px; color: var(--faint, #8a90a0); line-height: 1.45; margin-top: 2px; }
.si-card { position: relative; border: 1px solid var(--line, #ececf1); border-radius: 12px; padding: 13px 14px 14px; background: var(--surface, #fff); overflow: hidden; }
.si-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--line, #ececf1); }
.si-card.is-ok::before { background: var(--ok, #137a47); }
.si-card.is-warn::before { background: var(--warn, #9a6700); }
.si-card-head { display: flex; align-items: center; gap: 9px; }
.si-card-ico { width: 26px; height: 26px; border-radius: 7px; background: var(--surface-sub, #fafbfc); color: var(--muted, #6b7080); display: grid; place-items: center; flex: none; }
.si-card-label { font-size: 13.5px; font-weight: 700; color: var(--ink, #15171c); }
.si-card-req { font-size: 9.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--faint, #8a90a0); flex: none; }
.si-card-req.is-required { color: var(--muted, #6b7080); }
.si-card-badge { margin-left: auto; font-size: 11px; font-weight: 700; border-radius: 99px; padding: 2px 9px; color: var(--muted, #6b7080); background: var(--surface-strong, #f3f4f7); white-space: nowrap; }
.si-card-badge.is-ok { background: var(--ok-bg, #e7f6ee); color: var(--ok, #137a47); }
.si-card-badge.is-warn { background: var(--warn-bg, #fff8e6); color: var(--warn, #9a6700); }
.si-card-badge.is-done { background: var(--accent-soft, #eeeefc); color: var(--accent); }
.si-card-hint { font-size: 11.5px; color: var(--faint, #8a90a0); margin: 6px 0 11px; padding-left: 35px; line-height: 1.45; }
.si-card-control { padding-left: 35px; display: flex; flex-direction: column; gap: 11px; }
.si-seg { display: inline-flex; background: var(--surface-strong, #f3f4f7); border-radius: 9px; padding: 3px; gap: 2px; }
.si-seg-opt { flex: 1; height: 28px; border: 0; background: none; border-radius: 7px; font-size: 12px; font-weight: 600; color: var(--muted, #6b7080); cursor: pointer; font-family: inherit; white-space: nowrap; padding: 0 10px; }
.si-seg-opt.is-on { background: var(--surface, #fff); color: var(--ink, #15171c); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.si-select { width: 100%; height: 36px; border: 1px solid var(--line-strong, #e0e1e8); border-radius: 9px; padding: 0 10px; font-size: 13px; color: var(--ink, #15171c); background: var(--surface, #fff); font-family: inherit; cursor: pointer; }
.si-field-note { font-size: 11px; color: var(--faint, #8a90a0); }
.si-chips-pick { display: flex; flex-wrap: wrap; gap: 6px; }
.si-chip { display: inline-flex; align-items: center; gap: 5px; height: 30px; padding: 0 11px; border-radius: 8px; border: 1px dashed var(--line-strong, #e0e1e8); background: var(--surface, #fff); color: var(--muted, #6b7080); font-size: 12.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.si-chip.is-on { border: 1.5px solid var(--accent); background: var(--accent-soft, #eeeefc); color: var(--accent); font-weight: 700; }

/* Preview grid */
.si-preview-head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.si-grid-wrap { border: 1px solid var(--line, #ececf1); border-radius: 12px; overflow: auto; max-height: calc(100vh - 340px); }
.si-grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.si-grid th { text-align: left; padding: 9px 12px; font-size: 10.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; border-bottom: 1px solid var(--line, #ececf1); color: var(--faint, #8a90a0); background: var(--surface-sub, #fafbfc); position: sticky; top: 0; }
.si-grid th.is-gap { color: var(--warn, #9a6700); background: var(--warn-bg, #fff8e6); }
.si-grid td { padding: 9px 12px; font-size: 12.5px; white-space: nowrap; border-bottom: 1px solid var(--line, #ececf1); color: var(--ink, #15171c); }
.si-grid td.is-bad { color: var(--danger, #c0392b); background: var(--danger-bg, #fdecec); font-weight: 700; }
.si-grid td.is-lb { color: var(--accent); font-weight: 600; }
.si-grid td.is-empty { color: var(--faint, #8a90a0); }
.si-grid .si-rownum { width: 52px; color: var(--faint, #8a90a0); font-weight: 600; }
.si-cell-edit { padding: 4px 6px; }
.si-cell-edit input { width: 100%; min-width: 90px; height: 30px; border: 1px solid var(--line-strong, #e0e1e8); border-radius: 7px; padding: 0 8px; font-size: 12.5px; font-family: inherit; color: var(--ink, #15171c); background: var(--surface, #fff); }
.si-cell-edit.is-bad input { border-color: var(--danger, #c0392b); }
.si-grid-foot { padding: 10px 14px; font-size: 12px; color: var(--faint, #8a90a0); background: var(--surface-sub, #fafbfc); border-top: 1px solid var(--line, #ececf1); }
/* Per-row override editor (Step 2) */
.si-grid td.is-override { color: var(--accent); font-weight: 700; background: var(--accent-soft, #eeeefc); }
.si-grid th.si-editcol, .si-grid td.si-editcol { width: 96px; text-align: right; }
.si-rowedit-btn { height: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid var(--line-strong, #e0e1e8); background: var(--surface, #fff); color: var(--muted, #6b7080); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; white-space: nowrap; }
.si-rowedit-btn:hover, .si-rowedit-btn.is-open, .si-rowedit-btn.has-ov { border-color: var(--accent); color: var(--accent); }
.si-rowedit-btn.is-open { background: var(--accent-soft, #eeeefc); }
.si-grid tr.is-editing > td { background: var(--accent-soft, #eeeefc); }
.si-roweditor-tr > td { padding: 0 !important; white-space: normal; background: var(--surface-sub, #fafbfc); border-bottom: 1px solid var(--line, #ececf1); }
.si-roweditor { padding: 14px 16px; }
.si-roweditor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.si-roweditor-title { font-size: 13px; font-weight: 700; color: var(--ink, #15171c); }
.si-roweditor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.si-roweditor-field { display: flex; flex-direction: column; gap: 6px; }
.si-roweditor-label { font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--faint, #8a90a0); }
.si-roweditor-tag { font-size: 9.5px; color: var(--accent); background: var(--accent-soft, #eeeefc); border-radius: 5px; padding: 1px 5px; letter-spacing: 0; text-transform: none; font-weight: 700; }
.si-roweditor-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.si-norows { border: 1px dashed var(--line-strong, #e0e1e8); border-radius: 12px; padding: 44px 20px; text-align: center; }
.si-norows-title { font-size: 14px; font-weight: 700; color: var(--ink, #15171c); }
.si-norows-sub { font-size: 12.5px; color: var(--faint, #8a90a0); margin: 5px 0 14px; }

/* Step 3 — review */
.si-review { max-width: 840px; }
.si-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.si-stat { border: 1px solid var(--line, #ececf1); border-radius: 12px; padding: 14px 16px; background: var(--surface, #fff); }
.si-stat-n { font-size: 26px; font-weight: 800; letter-spacing: -.02em; color: var(--ink, #15171c); font-variant-numeric: tabular-nums; }
.si-stat-n.is-ok { color: var(--ok, #137a47); }
.si-stat-n.is-bad { color: var(--danger, #c0392b); }
.si-stat-l { font-size: 12px; color: var(--faint, #8a90a0); margin-top: 2px; }
.si-review-card { margin-top: 18px; border: 1px solid var(--line, #ececf1); border-radius: 14px; overflow: hidden; }
.si-review-head { display: flex; align-items: center; gap: 13px; padding: 15px 18px; border-bottom: 1px solid var(--line, #ececf1); }
.si-review-ico { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 800; }
.si-review-ico.is-ok { color: var(--ok, #137a47); background: var(--ok-bg, #e7f6ee); }
.si-review-ico.is-warn { color: var(--warn, #9a6700); background: var(--warn-bg, #fff8e6); }
.si-review-title { font-size: 14.5px; font-weight: 700; color: var(--ink, #15171c); }
.si-review-sub { font-size: 12.5px; color: var(--muted, #6b7080); margin-top: 1px; }
.si-review-modes { display: flex; gap: 11px; padding: 14px 18px; border-bottom: 1px solid var(--line, #ececf1); }
.si-rc { flex: 1; text-align: left; border: 1px solid var(--line-strong, #e0e1e8); border-radius: 11px; padding: 13px 15px; background: var(--surface, #fff); cursor: pointer; font-family: inherit; }
.si-rc.is-on { border: 1.5px solid var(--accent); background: var(--accent-soft, #eeeefc); }
.si-rc-title { font-size: 13px; font-weight: 700; color: var(--ink, #15171c); }
.si-rc-sub { font-size: 12px; color: var(--muted, #6b7080); margin-top: 3px; }
.si-err-list { padding: 4px 0 6px; }
.si-err-row { display: flex; align-items: center; gap: 12px; padding: 11px 18px; border-top: 1px solid var(--surface-sub, #fafbfc); }
.si-err-tag { font-size: 11.5px; font-weight: 700; color: var(--danger, #c0392b); background: var(--danger-bg, #fdecec); border-radius: 7px; padding: 3px 9px; flex: none; }
.si-err-body { flex: 1; min-width: 0; }
.si-err-loc { font-size: 13px; font-weight: 600; color: var(--ink, #15171c); }
.si-err-msg { font-size: 12px; color: var(--muted, #6b7080); }
.si-review-clear { padding: 26px 18px; text-align: center; font-size: 13.5px; color: var(--muted, #6b7080); }

/* Step 4 — commit */
.si-commit { max-width: 560px; margin: 8px auto 0; border: 1px solid var(--line, #ececf1); border-radius: 16px; padding: 32px 30px; text-align: center; }
.si-commit-ico { width: 60px; height: 60px; border-radius: 16px; background: var(--accent-soft, #eeeefc); color: var(--accent); display: inline-grid; place-items: center; font-size: 26px; font-weight: 800; }
.si-commit-ico.is-ok { background: var(--ok-bg, #e7f6ee); color: var(--ok, #137a47); }
.si-commit-title { font-size: 18px; font-weight: 800; letter-spacing: -.01em; color: var(--ink, #15171c); margin-top: 16px; }
.si-commit-btn { height: 46px; padding: 0 26px; margin-top: 20px; font-size: 14.5px; }
.si-commit-note { font-size: 11.5px; color: var(--faint, #8a90a0); margin-top: 13px; }
.si-commit-actions { display: flex; gap: 10px; justify-content: center; margin-top: 18px; }
.si-result-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 20px 0 4px; }
.si-progress { height: 8px; background: var(--surface-strong, #f3f4f7); border-radius: 99px; overflow: hidden; margin: 18px 0 9px; }
.si-progress-bar { height: 100%; background: var(--accent); border-radius: 99px; width: 15%; animation: siFill 1.4s ease forwards; }
@keyframes siFill { from { width: 8%; } to { width: 100%; } }

/* Footer */
.si-footer { position: sticky; bottom: 0; margin-top: 24px; padding: 15px 0; background: var(--surface, #fff); border-top: 1px solid var(--line, #ececf1); display: flex; align-items: center; gap: 14px; }
.si-footer-hint { font-size: 12.5px; color: var(--faint, #8a90a0); }
.si-footer-spacer { margin-left: auto; }
.si-footer-cont[disabled] { opacity: .5; cursor: default; }

@media (max-width: 900px) {
  .si-map { flex-direction: column; }
  .si-map-left { width: 100%; }
  .si-cards { max-height: none; }
}

/* ── Report Results list — matches templates/report-results/ReportResults.dc.html ──
   MetricStrip + All/This week/Flagged chips + DataTable. Tokens only, no new colors. */
.report-results-page { max-width: 1180px; }
.rr-metric-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 22px;
}
.rr-metric {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
}
.rr-metric-label { font-size: 12.5px; color: var(--faint); }
.rr-metric-value { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); margin-top: 4px; font-variant-numeric: tabular-nums; }
.rr-metric-hint { font-size: 12px; color: var(--faint); margin-top: 4px; }

.rr-toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.rr-filter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rr-filter-chip {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.rr-filter-chip:hover { background: var(--surface-sub); }
.rr-filter-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.rr-filter-chip .rr-chip-count { font-variant-numeric: tabular-nums; opacity: 0.7; }
.rr-filter-chip.is-active .rr-chip-count { opacity: 1; }
.rr-toolbar-meta { margin-left: auto; font-size: 12.5px; color: var(--faint); }

.rr-table-wrap {
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
}
.rr-table { width: 100%; border-collapse: collapse; }
.rr-table thead th {
  text-align: left;
  font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--faint);
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}
.rr-table th.rr-num, .rr-table td.rr-num { text-align: right; font-variant-numeric: tabular-nums; }
.rr-table tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid var(--surface-sub);
  font-size: 13.5px; color: var(--ink);
  vertical-align: middle;
}
.rr-table tbody tr:last-child td { border-bottom: none; }
.rr-table tbody tr { cursor: pointer; }
.rr-table tbody tr:hover td { background: var(--surface-sub); }
.rr-store-name { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rr-store-city { font-size: 12px; color: var(--faint); margin-top: 1px; }
.rr-amb { display: flex; align-items: center; gap: 10px; }
.rr-avatar {
  width: 28px; height: 28px; border-radius: 999px; flex: none;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: #fff;
}
.rr-date, .rr-product { color: var(--muted); }
.rr-sentiment {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.rr-sentiment.tone-ok { background: var(--ok-bg); color: var(--ok); }
.rr-sentiment.tone-warn { background: var(--warn-bg); color: var(--warn); }
.rr-sentiment.tone-danger { background: var(--danger-soft); color: var(--danger); }
/* Report Results Status column: review-status pill + optional lock chip. */
.rr-status-pill {
  display: inline-flex; align-items: center;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.rr-status-pill.tone-ok { background: var(--ok-bg); color: var(--ok); }
.rr-status-pill.tone-warn { background: var(--warn-bg); color: var(--warn); }
.rr-status-pill.tone-attn { background: var(--attn-bg); color: var(--attn); }
.rr-status-pill.tone-danger { background: var(--danger-soft); color: var(--danger); }
.rr-status-pill.tone-info { background: var(--info-bg); color: var(--info); }
.rr-status-pill.tone-done { background: var(--done-bg); color: var(--done); }
.rr-lock-chip {
  display: inline-flex; align-items: center; gap: 3px;
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  background: var(--done-bg); color: var(--done);
}
.rr-lock-chip.is-extended { background: var(--info-bg); color: var(--info); }

/* Reports (Clarity handoff A2/A4/A5/A7/A9/A10): scope line, compact date, conversion bar,
   row chevron, pager, dashed "more filters" chip, sidebar footer type scale. Tokens only. */
.rr-scope { margin: 0 0 12px; font-size: 12.5px; color: var(--faint); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rr-scope:empty { display: none; }
.rr-scope-strong { color: var(--muted); font-weight: 600; }
.rr-scope-chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; background: var(--surface-sub); border: 1px solid var(--line); color: var(--muted); font-weight: 600; }
.rr-table td.rr-date { white-space: nowrap; }
.rr-table.rr-hide-product th.rr-col-product,
.rr-table.rr-hide-product td.rr-product { display: none; }
.rr-conv { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rr-conv-track { width: 54px; height: 6px; border-radius: 999px; background: var(--surface-sub); overflow: hidden; flex: none; }
.rr-conv-fill { display: block; height: 100%; border-radius: 999px; }
.rr-conv-fill.tone-ok { background: var(--ok); }
.rr-conv-fill.tone-attn { background: var(--attn); }
.rr-conv-fill.tone-faint { background: transparent; }
.rr-conv-val { font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.rr-conv-val.tone-ok { color: var(--ok); }
.rr-conv-val.tone-attn { color: var(--attn); }
.rr-conv-val.tone-faint { color: var(--faint); }
.rr-num.is-zero { color: var(--faint); font-weight: 400; }
.rr-filter-chip.is-more { border-style: dashed; border-color: var(--line-strong); background: var(--surface); color: var(--faint); }
.rr-filter-chip.is-more:hover { background: var(--surface-sub); }
.rr-status-cell { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rr-row-chevron { opacity: 0; color: var(--faint); font-size: 16px; line-height: 1; transition: opacity .12s ease; }
.rr-table tbody tr:hover .rr-row-chevron { opacity: 1; }
.rr-sort-group { display: inline-flex; align-items: center; gap: 10px; }
.rr-daterange { font-size: 12.5px; color: var(--faint); }
.rr-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 4px 0; font-size: 12.5px; color: var(--muted); }
.rr-pager:empty { display: none; }
.rr-pager-info { font-variant-numeric: tabular-nums; }
.sidebar-footer button.icon-action,
.sidebar-footer a.icon-action { font-size: 13.5px; }
@media (max-width: 899px) {
  .rr-metric-strip { grid-template-columns: repeat(2, 1fr); }
}

/* ── Report Review detail — matches templates/report-review/ReportReview.dc.html ── */
.rr-detail-view { max-width: 1000px; }
.rrv-header { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.rrv-back {
  width: 36px; height: 36px; flex: none; margin-top: 2px;
  display: grid; place-items: center;
  border: 1px solid var(--line-strong); border-radius: 9px;
  background: var(--surface); color: var(--muted); font-size: 18px; cursor: pointer;
}
.rrv-back:hover { background: var(--surface-sub); }
.rrv-header-main { flex: 1; min-width: 0; }
.rrv-title-row { display: flex; align-items: center; gap: 10px; }
.rrv-store { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.rrv-subline { font-size: 13.5px; color: var(--faint); margin-top: 3px; }
.rrv-status-badge { flex: none; padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.rrv-status-badge.tone-ok { background: var(--ok-bg); color: var(--ok); }
.rrv-status-badge.tone-warn { background: var(--warn-bg); color: var(--warn); }
.rrv-status-badge.tone-attn { background: var(--attn-bg); color: var(--attn); }
.rrv-status-badge.tone-danger { background: var(--danger-soft); color: var(--danger); }
.rrv-status-badge.tone-info { background: var(--info-bg); color: var(--info); }
/* Report Review decide-rail lock note: red when actively locked, info-blue during an unlock window. */
.rrv-lock-note {
  margin-top: 10px; padding: 9px 11px; border-radius: 9px;
  font-size: 12px; line-height: 1.4;
  background: var(--danger-soft); color: var(--danger);
}
.rrv-lock-note.is-extended { background: var(--info-bg); color: var(--info); }

.rrv-grid { display: grid; grid-template-columns: 1fr 312px; gap: 16px; align-items: start; }
.rrv-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rrv-card { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; }
.rrv-card-head { display: flex; align-items: center; gap: 9px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.rrv-card-title { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.rrv-card-tag { margin-left: auto; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--faint); }
.rrv-card-body { padding: 6px 18px 16px; }
.rrv-kv { display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--surface-sub); font-size: 13px; color: var(--muted); }
.rrv-kv:last-child { border-bottom: none; }
.rrv-kv > span:first-child { color: var(--faint); }
.rrv-kv strong { margin-left: auto; font-size: 13.5px; font-weight: 600; color: var(--ink); }
.rrv-kv .rr-sentiment { margin-left: auto; }
.rrv-block { padding: 12px 0 4px; }
.rrv-block-label { font-size: 13px; color: var(--faint); margin-bottom: 6px; }
.rrv-block-text { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.rrv-photos { display: flex; gap: 10px; }
.rrv-photo { width: 84px; height: 84px; border-radius: 11px; border: 1px solid var(--line); background: var(--surface-strong); }

.rrv-section-label { display: flex; align-items: center; gap: 9px; margin-top: 2px; }
.rrv-section-label > span:first-child { font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--faint); white-space: nowrap; }
.rrv-rule { flex: 1; height: 1px; background: var(--line); }
.rrv-product { padding: 16px 18px; }
.rrv-product-head { display: flex; align-items: center; gap: 11px; }
.rrv-swatch { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.rrv-product-name { font-size: 15px; font-weight: 700; color: var(--ink); flex: 1; min-width: 0; }
.rrv-reaction { padding: 3px 10px; border-radius: 999px; background: var(--surface-strong); color: var(--muted); font-size: 12px; font-weight: 600; }
.rrv-tiles { display: flex; gap: 10px; margin-top: 14px; }
.rrv-tile { flex: 1; background: var(--surface-sub); border-radius: 11px; padding: 12px 14px; }
.rrv-tile-value { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rrv-tile-value.rrv-accent, .rrv-totals-value.rrv-accent { color: var(--accent); }
.rrv-tile-label { font-size: 11.5px; color: var(--faint); margin-top: 1px; }
.rrv-feedback { margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--surface-sub); }
.rrv-feedback-label { font-size: 12px; color: var(--faint); margin-bottom: 4px; }
.rrv-feedback-text { font-size: 13.5px; color: var(--ink); line-height: 1.5; }
.rrv-empty-note { padding: 16px 18px; font-size: 13.5px; color: var(--faint); }
.rrv-totals { border-color: var(--accent-soft); background: var(--accent-soft); padding: 16px 18px; }
.rrv-totals-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 13px; }
.rrv-totals-row { display: flex; gap: 18px; }
.rrv-totals-row > div { flex: 1; }
.rrv-totals-value { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.rrv-totals-label { font-size: 12px; color: var(--muted); margin-top: 1px; }

.rrv-rail { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 16px; }
.rrv-rail-card { padding: 17px; }
.rrv-rail-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.rrv-rail-sub { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 3px; }
.rrv-rail-sub-inline { font-size: 12px; color: var(--faint); }
.rrv-rail-actions { display: flex; flex-direction: column; gap: 9px; margin-top: 14px; }
.rrv-approve { height: 40px; border: 0; border-radius: 9px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rrv-secondary { height: 40px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.rrv-secondary:hover { background: var(--surface-sub); }
.rrv-rail-state { display: flex; align-items: center; gap: 10px; }
.rrv-state-icon { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; flex: none; font-weight: 700; }
.rrv-state-icon.tone-ok { background: var(--ok-bg); color: var(--ok); }
.rrv-state-icon.tone-attn { background: var(--warn-bg); color: var(--warn); }
.rrv-amb { display: flex; align-items: center; gap: 11px; }
.rrv-amb .rr-avatar { width: 38px; height: 38px; font-size: 13px; }
.rrv-amb-name { font-size: 14px; font-weight: 600; color: var(--ink); }
.rrv-amb-sub { font-size: 12px; color: var(--faint); }
.rrv-amb-facts { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--surface-sub); display: flex; flex-direction: column; gap: 10px; }
.rrv-fact { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--muted); }
.rrv-fact-ok { color: var(--ok); }
/* The check-in fact is no longer always a green tick: an unverified or missing check-in has to read
   as a caution, not as confirmation (see reportCheckInFactMarkup). */
.rrv-fact-warn { color: var(--warn); font-weight: 700; }
.rrv-meta { padding: 6px 17px; }
@media (max-width: 899px) { .rrv-grid { grid-template-columns: 1fr; } .rrv-rail { position: static; } }

/* AI insights (beta) — Schedule Builder advisory panel (additive; scheduling_ai entitlement).
   Colors come from the design tokens (:root) — no inline hex, per the UI conformance gate. */
.builder-ai-insights { margin: 12px 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--accent-soft); }
.ai-insights-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ai-beta-tag { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 6px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-strong); }
.ai-balance { margin-left: auto; font-weight: 600; font-size: 13px; color: var(--muted); }
.ai-refresh { padding: 3px 10px; font-size: 12px; }
.ai-insights-summary { margin: 8px 0 4px; font-size: 13px; line-height: 1.45; }
.ai-insights-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.ai-insights-error { color: var(--danger); }
.ai-block { margin-top: 10px; }
.ai-block-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.builder-ai-insights ul { margin: 0; padding-left: 18px; }
.builder-ai-insights li { font-size: 13px; line-height: 1.5; margin-bottom: 4px; }
.ai-advice-list { list-style: none; padding-left: 0; }
.ai-advice { border-left: 3px solid var(--border); padding: 4px 0 4px 10px; margin-bottom: 8px; }
.ai-advice-keep { border-left-color: var(--success); }
.ai-advice-move { border-left-color: var(--warning); }
.ai-advice-drop { border-left-color: var(--danger); }
.ai-advice-rec { display: inline-block; min-width: 42px; font-weight: 700; font-size: 11px; text-transform: uppercase; }
.ai-advice-slot { font-weight: 600; }
.ai-advice-suggest { color: var(--warn); font-weight: 600; }
.ai-advice-why { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.ai-insights-foot { margin: 10px 0 0; font-size: 11.5px; color: var(--muted); }

/* Local-event form — the "Packers problem" owner entry (Scheduler AI, Milestone C) */
.market-event-form { margin: 8px 0 12px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface-sub); }
.market-event-form-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.market-event-form-row:last-child { margin-bottom: 0; }
.market-event-form input, .market-event-form select { padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 8px; }
.market-event-form input[type="text"] { flex: 1 1 200px; }
.market-event-form .me-state { flex: 0 0 72px; text-transform: uppercase; }

/* Locations list: effective-approval pill (server-resolved mode + where the setting lives). Pre = amber
   (holds bookings back), Post = info-blue (review after claim), None = neutral. */
.appr-mode-pill { display: inline-flex; flex-direction: column; gap: 1px; padding: 3px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; line-height: 1.25; border: 1px solid var(--line-strong); background: var(--surface, #fff); color: var(--ink); }
.appr-mode-pill small { font-weight: 500; font-size: 10.5px; color: var(--muted); }
.appr-mode-pill.appr-mode-pre { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 30%, #fff); color: var(--warn); }
.appr-mode-pill.appr-mode-post { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 30%, #fff); color: var(--info); }
.appr-mode-pill.appr-mode-none { color: var(--muted); }

/* Event detail: pending ambassador cancellation request — amber attention card (mirrors the
   counter-proposal card's placement; tokens only, no raw hex). */
.release-request-card { border-left: 3px solid var(--warn-dot, var(--warn)); background: var(--warn-bg); }
.release-request-card .release-request-hint { margin: 6px 0 0; font-size: 12px; }

/* Shelf Review: v7 depth — a SKU visibly down to its last unit(s) gets the amber sub-line. */
.sr-skus li.is-thin .sr-sub { color: var(--warn); font-weight: 600; }

/* --- Apply funnel: the public application link + the brand's two videos ------------------- */
.apply-link-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.apply-link-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9rem;
}
.apply-video-slot {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.apply-video-preview {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 4px 0 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #000;
}
.apply-video-versions {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.apply-video-version-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.88rem;
  color: var(--muted, #6b7c75);
}

/* --- Applicants -> Settings: storefront careers page (#careersPageCard) ------------------------- */
.careers-min-stores { max-width: 120px; }
.careers-preview-title { margin: 16px 0 4px; }
.careers-add-label { display: block; margin-top: 14px; }
.careers-area-row { color: var(--text); }
.careers-area-row .careers-area-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.careers-area-row .careers-area-name { font-weight: 600; }
.careers-area-row .careers-area-meta { color: var(--muted); font-size: 0.82rem; }
.careers-area-row button { flex-shrink: 0; }

/* --- Message composer: searchable multi-select pickers for a scoped broadcast ------------------ */
.composer-panel { max-width: 560px; }
.composer-picker {
  display: grid;
  gap: 2px;
  max-height: 200px;
  overflow-y: auto;
  margin: 6px 0 10px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
}
.composer-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: 0.92rem;
  cursor: pointer;
}
.composer-picker-row input { flex: none; }

/* --- Geography tab bar ------------------------------------------------------------------------------
   Rides the Report Builder pill tabs (.rb-tabs/.rb-tab) rather than the sidebar's .tabs/.tab, which is
   the NAV and would inherit its active/hover treatment. Hidden entirely when fewer than two tabs are
   available -- a bar with nothing to choose is noise, not orientation. */
.geo-tabs { margin: 0 0 16px; }
.geo-tabs[hidden] { display: none; }

/* The shared load/failure slots. They sit above BOTH panels because a failed load makes both
   untrustworthy, and the failure copy says so in as many words. */
.geo-state { margin: 0 0 16px; }
.geo-state[hidden] { display: none; }

/* --- Geography coverage drawer -----------------------------------------------------------------------
   Rides .builder-drawer (Schedule Builder): scrim + fixed right panel + head/body/foot. Only the
   drawer's own content is styled here. */
.cov-eyebrow { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--faint); }
.cov-section { margin-top: 4px; }
.cov-section-head { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.cov-scopes { border: 1px solid var(--line); border-radius: 9px; overflow: hidden; }
.cov-scope-row { display: grid; grid-template-columns: 74px minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 9px 11px; border-bottom: 1px solid var(--line); font-size: 12.5px; }
.cov-scope-row:last-child { border-bottom: 0; }
/* The scope being edited, so the row the form acts on is findable without reading the select. */
.cov-scope-row.is-target { background: var(--accent-soft); }
.cov-scope-level { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.cov-scope-label { color: var(--ink); font-weight: 600; }
.cov-scope-holder { color: var(--muted); }
.cov-changing { flex: none; }
.cov-fields { display: grid; gap: 12px; margin-top: 4px; }
.cov-warning { margin: 0; }
/* Pushed left so Cancel and Save stay together on the right, where the footer's other actions sit. */
.cov-staged { margin-right: auto; font-size: 12px; color: var(--muted); }
/* --- end Geography coverage drawer --- */

/* The Assign control that replaced the inline dropdowns. */
.editcov { display: inline-flex; align-items: center; gap: 5px; height: 27px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; background: var(--surface); font-family: inherit; font-size: 12px; font-weight: 600; color: var(--accent); cursor: pointer; flex: none; }
.editcov:hover { background: var(--accent-soft); border-color: var(--accent-line); }
/* ⚠ TURNED OFF UP FRONT, NOT FAILED ON SAVE. Without the regional/territory-manager entitlement every
   coverage write is refused by the server, and this screen used to render working-looking controls that
   403'd on use -- the standing "lock, don't toast" rule. */
.editcov-off { color: var(--faint); cursor: not-allowed; }
.editcov-off:hover { background: var(--surface); border-color: var(--line-strong); }

/* The "no cadence set" group: cities nobody has configured, kept out of the ranked list so twenty
   unconfigured cities cannot read as twenty alarms. */
.supply-unset { margin-top: 14px; border-top: 1px solid var(--line); padding-top: 12px; }
.supply-unset[hidden] { display: none; }
.supply-unset-head { display: flex; align-items: flex-start; gap: 10px; }
.supply-unset-toggle { display: flex; align-items: flex-start; gap: 9px; flex: 1; padding: 0; border: 0; background: none; font-family: inherit; text-align: left; cursor: pointer; color: var(--ink); }
/* Title and subline STACK. Side by side the heading ends up narrower than its own subtitle. */
.supply-unset-titles { display: grid; gap: 2px; }
.supply-unset-titles strong { font-size: 13px; }
.supply-unset-sub { font-size: 12px; color: var(--muted); }
.supply-unset-chev { display: inline-block; margin-top: 2px; color: var(--faint); transition: transform .15s ease; }
.supply-unset.is-open .supply-unset-chev { transform: rotate(90deg); }
@media (prefers-reduced-motion: reduce) { .supply-unset-chev { transition: none; } }
.supply-unset-bulk { flex: none; height: 30px; padding: 0 12px; font-size: 12.5px; }
/* The per-city cadence action, inside the signal cell so it sits under the badge it relates to. */
.supply-row-cadence { margin-top: 6px; }
/* The row a map card's "See <City> in Ambassador supply" link scrolled to, so the eye lands on it. */
.supply-row.is-located { box-shadow: inset 0 0 0 2px var(--focus); }

/* --- Geography -> Map tab ----------------------------------------------------------------------------
   Driven by public/geography-map.js. Three columns on a wide screen (layers | map | in view); stacked
   below 1020px, where the page scrolls and the map switches to cooperative gestures. Pin colours come
   ONLY from the --map-* tokens in :root; the JS sets nothing but percentages (--geo-split, -a, -b).
   A pin's SHAPE is its type of location (circle on-premise, sharp square off-premise, diamond not yet
   classified), its FILL is sampling (solid / hollow), and its COLOUR follows #geographyMapBody's
   data-color-by ("sampling" | "type") -- one attribute, so switching it repaints nothing in JS. */
.geo-map { border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; }
.geo-map-toolbar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-sub); }
/* "Color pins by": a two-button segmented control (aria-pressed carries the state). */
.geo-map-colorby { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.geo-map-seg-label { font-size: 12px; color: var(--muted); }
.geo-map-seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); overflow: hidden; background: var(--surface); }
.geo-map-seg button { margin: 0; padding: 7px 12px; border: 0; border-radius: 0; background: none; font-size: 13px; font-weight: 500; color: var(--muted); box-shadow: none; }
.geo-map-seg button + button { border-left: 1px solid var(--line-strong); }
.geo-map-seg button:hover { color: var(--ink); background: var(--surface-sub); }
.geo-map-seg button[aria-pressed="true"] { background: var(--ink); color: var(--surface); }
.geo-map-seg button:focus-visible { position: relative; z-index: 1; outline: 2px solid var(--focus); outline-offset: -2px; }
.geo-map-search { position: relative; flex: 1 1 260px; max-width: 420px; }
.geo-map-search svg { position: absolute; left: 11px; top: 11px; width: 16px; height: 16px; color: var(--muted); pointer-events: none; }
.geo-map-search input { height: 38px; padding: 0 12px 0 34px; font-size: 14px; background: var(--surface); }
.geo-map-suggest { position: absolute; z-index: 30; left: 0; right: 0; top: 42px; margin: 0; padding: 4px; list-style: none; max-height: 320px; overflow: auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.geo-map-opt { display: flex; gap: 8px; align-items: baseline; padding: 7px 10px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--ink); }
.geo-map-opt:hover { background: var(--surface-strong); }
/* The keyboard cursor must read at a glance, not as a hover tint. */
.geo-map-opt.is-current { background: var(--info-bg); box-shadow: inset 3px 0 0 var(--info); }
.geo-map-opt-kind { flex: none; width: 38px; font-size: 11px; color: var(--muted); }
.geo-map-opt-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-map-opt-sub { margin-left: auto; flex: none; font-size: 12px; color: var(--muted); }
.geo-map-opt-empty { padding: 7px 10px; font-size: 13px; color: var(--muted); }

.geo-map-body { display: grid; grid-template-columns: 220px minmax(0, 1fr) 264px; }
/* No map (not switched on, or it failed): the layer column goes, and the map area keeps the width. */
.geo-map-body.is-nomap { grid-template-columns: minmax(0, 1fr) 264px; }
.geo-map-side { display: grid; align-content: start; gap: 16px; padding: 16px; }
.geo-map-layers { border-right: 1px solid var(--line); }
.geo-map-summary { border-left: 1px solid var(--line); background: var(--surface-sub); }
.geo-map-section { display: grid; gap: 6px; }
.geo-map-section-h { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.geo-map-note { font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; color: var(--muted); margin: 0; }
.geo-map-key-note { padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.geo-map-tick { display: grid; grid-template-columns: 18px 16px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--ink); }
.geo-map-tick:hover { background: var(--surface-sub); }
.geo-map-count { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Legend swatches: shape (is-premise-*) + fill (is-hollow) always; colour only for the rows whose answer
   the colour is carrying right now -- the other group's swatches, and the key, stay neutral. */
.geo-map-swatch { --sw-c: var(--muted); display: inline-block; justify-self: center; box-sizing: border-box; width: 14px; height: 14px; border-radius: 50%; background: var(--sw-c); }
.geo-map-swatch.is-premise-off { width: 12px; height: 12px; border-radius: 0; }
.geo-map-swatch.is-premise-unset { width: 10px; height: 10px; border-radius: 0; transform: rotate(45deg); }
.geo-map-swatch.is-hollow { background: var(--map-pin-halo); box-shadow: inset 0 0 0 2.5px var(--sw-c); }
.geo-map-body:not([data-color-by="type"]) .geo-map-swatch.is-c-samp-on { --sw-c: var(--map-sampling-on); }
.geo-map-body:not([data-color-by="type"]) .geo-map-swatch.is-c-samp-off { --sw-c: var(--map-sampling-off); }
.geo-map-body[data-color-by="type"] .geo-map-swatch.is-c-type-on { --sw-c: var(--map-type-on); }
.geo-map-body[data-color-by="type"] .geo-map-swatch.is-c-type-off { --sw-c: var(--map-type-off); }
.geo-map-body[data-color-by="type"] .geo-map-swatch.is-c-type-unset { --sw-c: var(--map-type-unknown); }
.geo-map-key { display: grid; gap: 6px; font-size: 12px; color: var(--text); }
.geo-map-key-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 8px; }
.geo-map-key-glyphs { display: inline-flex; align-items: center; gap: 6px; }

/* Ambassador reach: the tick, the ramp legend (None / 1-2 thin / 3-5 / 6+) and the lock. Locked = greyed
   in place with the reason beside the heading, the tick disabled (the script never fetches reach then). */
.geo-map-swatch.is-reach { width: 14px; height: 14px; border-radius: 3px; background: var(--map-reach-2); }
.geo-map-ramp { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; margin-top: 2px; }
.geo-map-ramp span { height: 12px; border: 1px solid var(--line); background: var(--surface); }
.geo-map-ramp .is-band-1 { background: var(--map-reach-1); }
.geo-map-ramp .is-band-2 { background: var(--map-reach-2); }
.geo-map-ramp .is-band-3 { background: var(--map-reach-3); }
.geo-map-ramp .is-band-1, .geo-map-ramp .is-band-2, .geo-map-ramp .is-band-3 { opacity: var(--map-reach-opacity); }
.geo-map-ramp-labels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; font-size: 11px; line-height: 1.25; color: var(--muted); }
.geo-map-lock { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; font-weight: 500; color: var(--text); }
.geo-map-lock svg { width: 13px; height: 13px; flex: none; color: var(--muted); }
.geo-map-reach[data-locked="true"] > :not(.geo-map-section-h):not(.geo-map-lock) { opacity: .5; filter: grayscale(.6); pointer-events: none; user-select: none; }
.geo-map-reach[data-locked="true"] .geo-map-tick { cursor: not-allowed; }
/* The 90-day tick sits under the layer's own tick, a step smaller. */
.geo-map-tick-sub { font-size: 13px; color: var(--text); }

/* The map fills the view beside its panels (the wheel zooms it, so it must not sit in a page that
   scrolls under it on this layout). */
.geo-map-wrap { position: relative; min-height: 420px; height: clamp(420px, calc(100vh - 250px), 900px); background: var(--surface-strong); overflow: hidden; }
.geo-map-canvas { position: absolute; inset: 0; }
.geo-map-state { position: absolute; z-index: 20; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 8px; width: min(360px, calc(100% - 32px)); padding: 18px 20px; text-align: center; background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: var(--shadow); }
.geo-map-state strong { font-size: 15px; color: var(--ink); }
.geo-map-state p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.geo-map-state[data-kind="loading"] strong { font-weight: 500; color: var(--muted); }

/* The reach squares' canvas lives in Google's overlayLayer pane, BELOW the pins' overlayMouseTarget pane;
   its fills are the --map-reach-* tokens, read by the script from the computed style. It never takes a
   pointer (the map and the pins keep every click, drag and wheel). */
.geo-map-reach-canvas { position: absolute; left: 0; top: 0; pointer-events: none; opacity: var(--map-reach-opacity-plain); }
/* Only once the pane really multiplies (geography-map.js checks the computed style) is the tint strong. */
.geo-map-reach-canvas.is-multiplied { opacity: var(--map-reach-opacity); }
/* The "zoom in" note sits ABOVE Google's logo (bottom-left, ~26px tall), which the Maps terms forbid
   covering; the zoom control is bottom-right. */
.geo-map-pill { position: absolute; z-index: 15; left: 12px; bottom: 36px; margin: 0; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); font-size: 12px; font-weight: 500; color: var(--text); pointer-events: none; }
.geo-map-tip { position: absolute; z-index: 16; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); box-shadow: var(--shadow); font-size: 12px; color: var(--ink); white-space: nowrap; pointer-events: none; }
.geo-map-tip p { margin: 0; }
/* Who is here: a name, then its reason and when they last worked (the tip, the card and the phone's sheet). */
.geo-map-who { display: grid; gap: 2px; margin: 4px 0 0; padding: 0; list-style: none; }
.geo-map-who li { line-height: 1.35; }
.geo-map-who b { font-weight: 600; color: var(--ink); }
.geo-map-who span { color: var(--muted); }
.geo-map-tip-who { max-width: 300px; white-space: normal; }
.geo-map-card-who { margin-top: 6px; font-size: 13px; }
.geo-map-who-more { margin: 2px 0 0; font-size: 12px; color: var(--muted); }

/* Pins live in Google's overlayMouseTarget pane, positioned by translate() in the overlay's draw(). */
.geo-map-pins { position: absolute; left: 0; top: 0; }
.geo-map-pin,
.geo-map-group { position: absolute; left: 0; top: 0; padding: 0; margin: 0; border-radius: 50%; cursor: pointer; font-family: inherit; }
/* The button is a transparent 16px target; ::after draws the shape inside it (so the diamond can rotate
   without touching the translate() draw() positions the button with). Sizes are optically matched: a
   16px circle, a 14px sharp square, a 13px diamond -- each with the same 2px halo and hairline. */
.geo-map-pin { --pin-c: var(--map-sampling-on); width: 16px; height: 16px; border: 0; background: none; box-shadow: none; }
.geo-map-pin::after { content: ""; position: absolute; left: 50%; top: 50%; box-sizing: border-box; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid var(--map-pin-halo); border-radius: 50%; background: var(--pin-c); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent); }
.geo-map-pin.is-premise-off::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 0; }
.geo-map-pin.is-premise-unset::after,
.geo-map-pin.is-premise-mixed::after { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 0; transform: rotate(45deg); }
.geo-map-pin.is-off::after { background: var(--map-pin-halo); box-shadow: inset 0 0 0 2.5px var(--pin-c), 0 0 0 1px color-mix(in srgb, var(--ink) 28%, transparent), 0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent); }
/* Colour: sampling by default; the type tokens when the switch says so. A mixed stack is neutral. */
.geo-map-pin.is-off { --pin-c: var(--map-sampling-off); }
.geo-map-body[data-color-by="type"] .geo-map-pin.is-premise-on { --pin-c: var(--map-type-on); }
.geo-map-body[data-color-by="type"] .geo-map-pin.is-premise-off { --pin-c: var(--map-type-off); }
.geo-map-body[data-color-by="type"] .geo-map-pin.is-premise-unset,
.geo-map-body[data-color-by="type"] .geo-map-pin.is-premise-mixed { --pin-c: var(--map-type-unknown); }
/* A 16px dot is a small target: the invisible ring around it takes the tap too. */
.geo-map-pin::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.geo-map-pin-badge { position: absolute; z-index: 1; top: -10px; right: -12px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--ink); color: var(--surface); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.geo-map-group { display: grid; place-items: center; border: 2px solid var(--map-pin-halo); background: conic-gradient(var(--map-sampling-on) 0 var(--geo-split, 0%), var(--map-sampling-off) var(--geo-split, 0%) 100%); box-shadow: 0 1px 4px color-mix(in srgb, var(--ink) 30%, transparent); }
/* Type split: on-premise to -a, off-premise to -b, the rest not yet classified (all among ticked rows). */
.geo-map-body[data-color-by="type"] .geo-map-group { background: conic-gradient(var(--map-type-on) 0 var(--geo-split-a, 0%), var(--map-type-off) var(--geo-split-a, 0%) var(--geo-split-b, 0%), var(--map-type-unknown) var(--geo-split-b, 0%) 100%); }
.geo-map-group span { display: grid; place-items: center; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.geo-map-group.is-s { width: 28px; height: 28px; }
.geo-map-group.is-m { width: 36px; height: 36px; }
.geo-map-group.is-l { width: 44px; height: 44px; }
.geo-map-group.is-l span { font-size: 10px; }
.geo-map-pin:hover, .geo-map-group:hover { z-index: 2; }
.geo-map-pin.is-selected { z-index: 3; outline: 2px solid var(--ink); outline-offset: 3px; }
.geo-map-pin:focus-visible, .geo-map-group:focus-visible { z-index: 3; outline: 2px solid var(--focus); outline-offset: 3px; }

/* The location card: a popover beside its pin, a bottom sheet on a phone. */
.geo-map-card { position: absolute; z-index: 25; left: 12px; top: 12px; width: 300px; max-width: calc(100% - 16px); max-height: calc(100% - 16px); overflow: auto; padding: 14px 14px 12px; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: var(--shadow); }
.geo-map-card.is-sheet { position: fixed; left: 0; right: 0; top: auto; bottom: 0; width: auto; max-width: none; max-height: 60vh; border-radius: 14px 14px 0 0; }
.geo-map-card-close { position: absolute; right: 6px; top: 4px; width: 32px; height: 32px; border-radius: 8px; background: none; font-size: 20px; line-height: 1; color: var(--muted); }
.geo-map-card-close:hover { background: var(--surface-sub); color: var(--ink); }
.geo-map-card-stack { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--muted); }
.geo-map-card-item + .geo-map-card-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.geo-map-card-name { margin: 0; padding-right: 28px; font-weight: 650; color: var(--ink); line-height: 1.3; }
.geo-map-card-meta { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.geo-map-chip { display: inline-block; margin-top: 10px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 500; border: 1px solid var(--line-strong); color: var(--muted); }
.geo-map-chip.is-on { border-color: transparent; background: color-mix(in srgb, var(--map-sampling-on) 13%, transparent); color: var(--map-sampling-on); }
.geo-map-card-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 10px; }
.geo-map-card-chips .geo-map-chip { margin-top: 0; }
.geo-map-chip.is-premise-on { border-color: var(--map-type-on); color: var(--ink); }
.geo-map-chip.is-premise-off { border-color: var(--map-type-off); color: var(--ink); }
.geo-map-chip.is-premise-unset { border-style: dashed; }
.geo-map-chip-note { font-size: 12px; color: var(--muted); }
.geo-map-card-links { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 10px; }
.geo-map-link { padding: 0; background: none; color: var(--info); font-size: 13px; font-weight: 500; text-align: left; }
.geo-map-link:hover { text-decoration: underline; }
/* The card's Ambassador reach line (counts only; never who). */
.geo-map-card-reach { margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--text); }
.geo-map-card-reach p { margin: 0; }
.geo-map-card-reach.is-none p:first-child { color: var(--attn); font-weight: 500; }
.geo-map-card-reach .geo-map-card-fine { margin-top: 2px; font-size: 12px; color: var(--muted); }

/* In view */
.geo-map-big { font-size: 32px; font-weight: 650; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.geo-map-scope-note { margin: 0; padding: 8px 10px; border-radius: 8px; font-size: 12px; background: var(--info-bg); color: var(--info); }
.geo-map-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; color: var(--text); }
.geo-map-row b { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.geo-map-reach-rows { display: grid; }
.geo-map-reach-rows .geo-map-row + .geo-map-row { border-top: 0; }
.geo-map-attn { color: var(--attn); }
.geo-map-towns { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.geo-map-town { display: grid; grid-template-columns: minmax(0, 1fr) 48px 28px; gap: 8px; align-items: center; width: 100%; padding: 5px 6px; border-radius: 6px; background: none; text-align: left; font-size: 13px; color: var(--ink); }
button.geo-map-town:hover { background: var(--surface); }
.geo-map-town.is-static { cursor: default; }
.geo-map-town-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.geo-map-town-bar { display: block; height: 8px; }
.geo-map-town-bar i { display: block; height: 8px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.geo-map-town-bar b { display: block; height: 8px; background: var(--muted); }
.geo-map-town-count { text-align: right; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.geo-map-towns-empty { padding: 4px 6px; font-size: 13px; color: var(--muted); }
.geo-map-disclose { display: grid; gap: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.geo-map-disclose b { font-weight: 600; color: var(--text); }

@media (max-width: 1020px) {
  .geo-map-body, .geo-map-body.is-nomap { grid-template-columns: minmax(0, 1fr); }
  /* One column: the map comes first, straight under the search and the colour switch, and the tick
     boxes follow it. Above it, the two layer sections pushed the whole map below a phone's first screen. */
  .geo-map-wrap { order: -1; height: 60vh; min-height: 360px; }
  .geo-map-layers { border-right: 0; border-top: 1px solid var(--line); }
  .geo-map-summary { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
  .geo-map-toolbar { padding: 10px 12px; }
  .geo-map-side { padding: 12px; }
  .geo-map-search { max-width: none; }
}
/* --- end Geography -> Map tab --- */
/* ==========================================================================================
 * Retail > Leads
 * Translated from design's hand-off (design-system/reference/Luba - Leads (Retail).dc.html).
 * Design owns these values; where a token already exists in this stylesheet it is used instead of
 * design's literal so the screen follows the app's theme rather than pinning a second palette.
 * ========================================================================================== */

.leads-lede { max-width: 740px; font-size: 13.5px; line-height: 1.55; color: var(--text, #3a3f52); margin: 0 0 16px; }

/* The three moments. Permanently visible -- promote and payment are far apart in time and nothing
   else on the screen makes that legible. */
.leads-steps { display: flex; align-items: stretch; border: 1px solid var(--line, #ececf1); border-radius: 13px; background: #fff; overflow: hidden; margin-bottom: 20px; }
.leads-step { flex: 1; min-width: 0; padding: 13px 16px; border-right: 1px solid var(--line, #ececf1); }
.leads-step:last-child { border-right: 0; }
.leads-step-n { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint, #8a90a0); }
.leads-step-t { font-size: 13px; font-weight: 600; color: var(--ink, #15171c); margin-top: 4px; }
.leads-step-d { font-size: 12px; line-height: 1.5; color: var(--muted, #6b7080); margin-top: 3px; }
/* The ONLY green on this screen. It is the money. */
.leads-step-pay { color: var(--ok, #1f9d62); }

.leads-locked { border: 1px solid var(--line, #ececf1); border-radius: 13px; background: var(--surface-sub, #fafbfc); padding: 28px 24px; text-align: center; }
.leads-locked-accent { border-color: var(--accent, #6d5efc); }
.leads-locked h3 { margin: 0 0 8px; font-size: 15px; color: var(--ink, #15171c); }
.leads-locked p { margin: 0 auto; max-width: 560px; font-size: 13px; line-height: 1.6; color: var(--muted, #6b7080); }

.leads-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.leads-pill { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px; border: 1px solid var(--line-strong, #e4e5ec); border-radius: 99px; background: #fff; font: inherit; font-size: 12.5px; font-weight: 600; color: var(--muted, #6b7080); cursor: pointer; }
.leads-pill:hover { background: var(--surface-sub, #fafbfc); }
.leads-pill.is-on { background: var(--ink, #15171c); border-color: var(--ink, #15171c); color: #fff; }
.leads-pill-n { font-variant-numeric: tabular-nums; opacity: .62; }

/* Neutral, NOT a warning: this banner reports a gap in our own data, not a finding about the leads. */

.leads-head,
.leads-row { display: grid; grid-template-columns: minmax(190px, 1.25fr) minmax(190px, 1.3fr) minmax(210px, 1.15fr) 92px 132px; gap: 16px; }
.leads-head { padding: 10px 18px; background: var(--surface-sub, #fafbfc); border-bottom: 1px solid var(--line, #ececf1); font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint, #8a90a0); }
.leads-row { align-items: start; padding: 15px 18px; border-bottom: 1px solid var(--surface-sub, #f4f5f8); background: #fff; }
.leads-row:hover { background: var(--surface-sub, #fafbfc); }
.leads-name { border: 0; background: transparent; padding: 0; font: inherit; text-align: left; font-size: 13.5px; font-weight: 600; color: var(--ink, #15171c); cursor: pointer; }
.leads-name:hover { color: var(--accent, #6d5efc); }
.leads-sub { font-size: 12px; line-height: 1.45; color: var(--faint, #8a90a0); margin-top: 3px; }
.leads-addr { font-size: 12.5px; line-height: 1.5; color: var(--muted, #6b7080); }
.leads-why { font-size: 12px; line-height: 1.45; color: var(--muted, #6b7080); margin-top: 5px; }
/* Inline, not behind a click: by review time the collision may already be stale, so the operator has
   to judge the match rather than trust it. */
.leads-matched { font-size: 12px; line-height: 1.45; color: var(--ink, #15171c); margin-top: 5px; padding: 6px 8px; border: 1px solid var(--line, #ececf1); border-radius: 7px; background: var(--surface-sub, #fafbfc); }
.leads-fee { font-size: 13px; font-weight: 600; color: var(--ink, #15171c); font-variant-numeric: tabular-nums; }
.leads-act { display: flex; justify-content: flex-end; }

/* In place under the row, never a toast: the operator watches the row leave. */
.leads-strip { padding: 13px 18px; border-bottom: 1px solid var(--surface-sub, #f4f5f8); font-size: 12.5px; line-height: 1.5; }
.leads-strip-ok { background: var(--ok-bg); color: var(--ok); }
.leads-strip-bad { background: var(--danger-bg); color: var(--danger); }

.leads-state { border: 1px solid var(--line, #ececf1); border-radius: 13px; background: #fff; padding: 28px 24px; text-align: center; }
.leads-state-t { font-size: 14px; font-weight: 600; color: var(--ink, #15171c); margin: 0 0 6px; }
.leads-state p { margin: 0 auto; max-width: 560px; font-size: 13px; line-height: 1.6; color: var(--muted, #6b7080); }
.leads-state-ref { margin-top: 10px !important; font-size: 11.5px !important; color: var(--faint, #8a90a0) !important; }

.leads-pager { display: flex; align-items: center; gap: 12px; padding: 12px 2px; }
.leads-pager-n { font-size: 12.5px; color: var(--muted, #6b7080); font-variant-numeric: tabular-nums; }
.leads-footnote { max-width: 760px; font-size: 12px; line-height: 1.6; color: var(--faint, #8a90a0); margin: 10px 0 0; }

.tab-count { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 99px; background: var(--accent, #6d5efc); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }

.lead-drawer-scrim { position: fixed; inset: 0; z-index: 55; background: rgba(16, 24, 40, .28); }
.lead-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 60; background: #fff; border-left: 1px solid var(--line, #ececf1); box-shadow: -18px 0 44px rgba(16, 24, 40, .14); display: flex; flex-direction: column; }
.lead-drawer-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--line, #ececf1); }
.lead-drawer-head h3 { margin: 4px 0 0; font-size: 16px; color: var(--ink, #15171c); }
.lead-drawer-body { flex: 1; overflow-y: auto; padding: 18px 20px; }
.lead-drawer-body section { margin-bottom: 20px; }
.lead-drawer-body h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint, #8a90a0); }
.lead-drawer-body p { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: var(--text, #3a3f52); }
.lead-drawer-foot { border-top: 1px solid var(--line, #ececf1); padding: 14px 20px; }
.lead-drawer-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.leads-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--faint, #8a90a0); }

.leads-alert { border-radius: 10px; padding: 13px 14px; margin-bottom: 18px; border: 1px solid var(--line, #ececf1); background: var(--surface-sub, #fafbfc); }
.leads-alert strong { display: block; font-size: 13px; color: var(--ink, #15171c); margin-bottom: 4px; }
.leads-alert p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted, #6b7080); }
/* Every tone in LEAD_REASONS needs a class here. `neutral` looks like the base alert on purpose --
   it reports a gap in OUR data, not a finding about the lead -- but it is declared rather than left to
   fall through, so `leads-alert-neutral` is not a class name pointing at nothing. */
.leads-alert-neutral { border-color: var(--line, #ececf1); background: var(--surface-sub, #fafbfc); }
.leads-alert-warn { border-color: var(--warn-line); background: var(--warn-bg); }
.leads-alert-attn { border-color: var(--attn-line); background: var(--attn-bg); }

/* The attestation, verbatim. It is the evidence if a fee is ever disputed, so it is rendered as a
   quoted panel rather than as ordinary body copy. */
.leads-attest { border: 1px solid var(--line, #ececf1); border-radius: 10px; background: var(--surface-sub, #fafbfc); padding: 13px 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink, #15171c); margin-bottom: 6px; }

.leads-answers { display: grid; grid-template-columns: minmax(120px, 1fr) 1.4fr; gap: 6px 14px; margin: 0; }
.leads-answers dt { font-size: 12.5px; color: var(--faint, #8a90a0); }
.leads-answers dd { margin: 0; font-size: 13px; color: var(--ink, #15171c); }
.leads-blank { color: var(--faint, #8a90a0); }

@media (max-width: 900px) {
  .leads-steps { flex-direction: column; }
  .leads-step { border-right: 0; border-bottom: 1px solid var(--line, #ececf1); }
  .leads-step:last-child { border-bottom: 0; }
  .leads-head { display: none; }
  .leads-row { grid-template-columns: 1fr; gap: 8px; }
  .leads-act { justify-content: flex-start; }
}

/* ==========================================================================================
 * Brand Settings > Leads: the coverage card
 * Tokens throughout, no literals -- the UI conformance ratchet counts raw hex outside var().
 * ========================================================================================== */

.lead-cov-head { border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 13px 14px; margin-bottom: 14px; }
/* The ONLY tinted state: the gate being open is the one fact worth colouring. */
.lead-cov-head-ok { border-color: var(--ok-line); background: var(--ok-bg); }
.lead-cov-head strong { display: block; font-size: 13.5px; color: var(--ink); margin-bottom: 4px; }
.lead-cov-head p { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--muted); }

.lead-cov-figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); gap: 10px; margin-bottom: 14px; }
.lead-cov-figures div { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; background: #fff; }
.lead-cov-figures span { color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.lead-cov-figures strong { font-size: 20px; line-height: 1.1; color: var(--ink); font-variant-numeric: tabular-nums; }
.lead-cov-attn { color: var(--attn); }

.lead-cov-reasons { margin: 0 0 14px; padding-left: 18px; }
.lead-cov-reasons li { font-size: 12.5px; line-height: 1.55; color: var(--muted); margin-bottom: 4px; }

.lead-cov-attested { margin: 0 0 14px !important; }

.lead-cov-samples { border-top: 1px solid var(--line); padding-top: 13px; margin-bottom: 4px; }
.lead-cov-samples h5 { margin: 0 0 4px; font-size: 12.5px; color: var(--ink); }
.lead-cov-sample { display: grid; gap: 2px; padding: 8px 0; border-bottom: 1px solid var(--soft); }
.lead-cov-sample:last-child { border-bottom: 0; }
.lead-cov-sample strong { font-size: 12.5px; color: var(--ink); font-weight: 600; }
.lead-cov-sample span { font-size: 12px; color: var(--muted); }
.lead-cov-sample em { font-style: normal; font-size: 11.5px; color: var(--attn); }

/* In place under the card, never a toast -- a refusal here names the operator's next task. */
.lead-cov-strip { border-radius: 8px; padding: 11px 13px; margin-bottom: 12px; font-size: 12.5px; line-height: 1.5; }
.lead-cov-strip-ok { background: var(--ok-bg); color: var(--ok); }
.lead-cov-strip-bad { background: var(--danger-bg); color: var(--danger); }

.lead-cov-note { border: 1px solid var(--line); border-radius: 10px; background: var(--soft); padding: 13px 14px; }
.lead-cov-note strong { display: block; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.lead-cov-note p { margin: 0 0 4px; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.lead-cov-ref { font-size: 11.5px !important; color: var(--faint) !important; }