/* ════════════════════════════════════════════════════════════════════
   tandoco HQ v2 — design system + shell
   ────────────────────────────────────────────────────────────────────
   Linear-flavored: dense, keyboard-first, soft surfaces, gold accents
   that nod at the brand without shouting. Light theme with a deep navy
   chrome (sidebar, top bar) so the chrome feels premium SaaS while
   the content area stays warm + branded.

   All rules scoped under `body.hq2-app` so this file can never bleed
   into the existing /hq, the public site, or the customer account
   page. Old HQ + new HQ live side-by-side cleanly.
   ════════════════════════════════════════════════════════════════════ */

body.hq2-app {

/* ─── tokens ─────────────────────────────────────────────────────── */
  /* Brand */
  --tc-navy:       #1B1A6B;
  --tc-navy-deep:  #0F0E47;
  --tc-navy-soft:  #2D2FA8;
  --tc-gold:       #C8A96E;
  --tc-gold-light: #E8C87A;
  --tc-gold-dark:  #8A6F3F;
  --tc-cream:      #FAF8F3;
  --tc-cream-2:    #F2EEE5;

  /* Functional palette — light theme */
  --bg:            #F7F6F2;          /* page background */
  --surface:       #FFFFFF;          /* card / panel */
  --surface-2:     #FAF9F4;          /* subtle nested surface */
  --rule:          rgba(15, 12, 32, .07);
  --rule-strong:   rgba(15, 12, 32, .14);

  /* INK SCALE — second pass for AAA-leaning contrast everywhere.
     Old values shipped at AA but tested as "faded" at small sizes.
     New scale (against #FFFFFF surface):
       --ink     #17182A  ~16:1   primary reading text  (unchanged)
       --ink-2   #2C2D45  ~12:1   secondary             (was #3D3E5C ~9:1)
       --ink-3   #4D4E70  ~ 9:1   tertiary / labels     (was #6B6B85 ~5.4:1)
       --ink-4   #6B6B85  ~ 5.4:1 helper / "loading"    (was #9E9DB3 ~3.6:1)
       --ink-5   #9E9DB3  ~ 3.6:1 decorative ONLY       (NEW — placeholders/dots)
     Every consumer of --ink-3/4 now reads materially darker without
     us touching 145 individual rules. */
  --ink:           #17182A;
  --ink-2:         #2C2D45;
  --ink-3:         #4D4E70;
  --ink-4:         #6B6B85;
  --ink-5:         #9E9DB3;          /* decorative / non-reading only */

  /* Chrome — deep navy on dark for premium SaaS feel */
  /* Contrast tokens tuned for AAA on the chrome-bg base. The earlier
     pass bumped these once; this pass goes brighter still because the
     active-vs-inactive nav contrast was reading as "active is alive,
     inactive is dimmed" — when both should read as fully active text,
     with hierarchy carried by font-weight + the gold left-border. */
  --chrome-bg:        #0E0D2F;        /* sidebar + top bar */
  --chrome-bg-hover:  #1A1850;
  --chrome-fg:        #FFFFFF;        /* primary nav-item text — pure white */
  --chrome-fg-section:#D8DAEC;        /* section labels (uppercase, 11px) */
  --chrome-fg-muted:  #CCD0E8;        /* shortcuts, role label, secondary */
  --chrome-fg-faint:  #8C8DAE;        /* very-tertiary only — avoid for any reading text */
  --chrome-rule:      rgba(255, 255, 255, .06);
  --chrome-active:    #2D2FA8;

  /* Status */
  --success:       #2E8657;
  --success-bg:    #E6F4EC;
  --warning:       #B8860B;
  --warning-bg:    #FBF4DC;
  --danger:        #B33A1A;
  --danger-bg:     #FBECEC;
  --info:          #1B5DD8;
  --info-bg:       #E6EEFB;

  /* Type stack — Inter for UI density (Linear-style), Plus Jakarta
     for content headings, Fraunces (variable serif) for the brand
     mark + a few editorial moments. Fraunces feels young + warm
     without losing the credible food-pub serif voice. */
  --font-ui:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display:  'Plus Jakarta Sans', var(--font-ui);
  --font-brand:    'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-mono:     ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* Type scale (1.2 ratio, dense — Linear-style) */
  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-28: 28px;
  --t-32: 32px;

  /* Line heights */
  --lh-tight:  1.15;
  --lh-snug:   1.35;
  --lh-base:   1.5;

  /* Weights */
  --w-regular:  400;
  --w-medium:   500;
  --w-semibold: 600;
  --w-bold:     700;
  --w-black:    900;

  /* Spacing (4px base) */
  --s-1:   4px;
  --s-2:   8px;
  --s-3:   12px;
  --s-4:   16px;
  --s-5:   20px;
  --s-6:   24px;
  --s-7:   32px;
  --s-8:   40px;
  --s-9:   56px;
  --s-10:  72px;

  /* Radii */
  --r-sm:  6px;
  --r-md:  8px;
  --r-lg:  12px;
  --r-xl:  16px;
  --r-pill: 999px;

  /* Shadows — barely-there, lots of softness (Linear/Notion blend) */
  --shadow-1: 0 1px 2px rgba(15, 12, 32, .04), 0 1px 3px rgba(15, 12, 32, .03);
  --shadow-2: 0 4px 12px -4px rgba(15, 12, 32, .08), 0 2px 4px rgba(15, 12, 32, .04);
  --shadow-3: 0 12px 32px -10px rgba(15, 12, 32, .14), 0 4px 12px rgba(15, 12, 32, .06);
  --shadow-pop: 0 24px 60px -16px rgba(15, 12, 32, .22);

  /* Layout dimensions */
  --sidebar-w:  240px;
  --topbar-h:   48px;

  /* Motion */
  --ease:      cubic-bezier(.22, .8, .36, 1);
  --t-fast:    120ms;
  --t-base:    180ms;
  --t-slow:    280ms;

  /* Now apply baseline */
  font-family: var(--font-ui);
  font-size:   var(--t-14);
  line-height: var(--lh-base);
  color:       var(--ink);
  background:  var(--bg);
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body.hq2-app * { box-sizing: border-box; }
body.hq2-app *::before, body.hq2-app *::after { box-sizing: border-box; }

/* ═══ Reset (only what we need; light touch) ══════════════════════════ */
body.hq2-app h1, body.hq2-app h2, body.hq2-app h3,
body.hq2-app h4, body.hq2-app h5 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  letter-spacing: -.018em;
  color: var(--ink);
  line-height: var(--lh-tight);
}
body.hq2-app h1 { font-size: var(--t-28); }
body.hq2-app h2 { font-size: var(--t-20); }
body.hq2-app h3 { font-size: var(--t-16); font-weight: var(--w-semibold); }
body.hq2-app h4 { font-size: var(--t-14); font-weight: var(--w-semibold); }
body.hq2-app p  { margin: 0; }
body.hq2-app a  { color: var(--tc-navy); text-decoration: none; }
body.hq2-app a:hover { text-decoration: underline; }
body.hq2-app img { display: block; max-width: 100%; height: auto; }
body.hq2-app button { font: inherit; cursor: pointer; }
body.hq2-app input, body.hq2-app textarea, body.hq2-app select { font: inherit; color: inherit; }

/* ════════════════════════════════════════════════════════════════════
   Layout shell — "The Pass" port from mise-v2-preview.html.
   Architecture: thin icon rail (left, fixed) + masthead row + status
   line + scrolling main column. The old wide sidebar is gone — primary
   nav is now icon-only with tooltips, and Cmd+K is the power-user path.
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Rail width must fit the longest single-word label without clipping.
     Longest is "ingredients" (~57px text at 9.5px Inter 600); plus
     8px button padding and 12px rail padding gives a 77px floor.
     100px lands comfortably and leaves room for future longer labels. */
  --rail-w: 100px;
  --mh-h:   56px;
  --sl-h:   44px;
}
.hq2-shell {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: var(--bg);
  position: relative;
}

/* ─── Thin icon rail ───
   Contrast notes: the rail sits on `--ink` (near-black). Icons render
   in pure white with a subtle white-bg pill so they read at-a-glance
   against the dark surface. Active = gold left-border + gold glyph.
   These values are AAA against #0F1216 ink. */
.hq2-rail {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--rail-w);
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: var(--s-4) 0;
  gap: 4px;
  z-index: 12;
  /* faint inner shadow on the right edge anchors it to the canvas */
  box-shadow: inset -1px 0 0 rgba(255, 255, 255, .06);
}
.hq2-rail-brand-dot {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--tc-gold);
  display: grid; place-items: center;
  font-family: var(--font-ui);
  font-weight: 700; font-size: 12px;
  letter-spacing: -.02em;
  color: var(--ink);
  margin-bottom: var(--s-3);
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease;
}
.hq2-rail-brand-dot:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px rgba(200, 169, 110, .18);
}
.hq2-rail-icons { display: flex; flex-direction: column; gap: 4px; align-items: stretch; padding: 0 6px; }
/* Rail icons — scoped to body.hq2-app to win specificity against the
   global `body.hq2-app a { color: var(--tc-navy) }` rule. Without this
   scope, anchor rail items render navy and read as "dark/blue"
   against the ink background. We force WHITE (or GOLD when active)
   on every state. Each item is a vertical stack: glyph on top, label
   underneath, so the rail reads at-a-glance without hover tooltips. */
body.hq2-app .hq2-rail .hq2-rail-icon,
body.hq2-app .hq2-rail .hq2-rail-icon:link,
body.hq2-app .hq2-rail .hq2-rail-icon:visited {
  width: 100%;
  min-height: 56px;
  padding: 7px 4px 6px;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #FFFFFF !important;            /* explicit white — never navy */
  background: rgba(255, 255, 255, .06);
  font-size: 16px;
  cursor: pointer;
  text-decoration: none;
  border: none;
  position: relative;
  transition: color .15s ease, background .15s ease, transform .12s ease;
}
body.hq2-app .hq2-rail .hq2-rail-icon svg { display: block; stroke: #FFFFFF; width: 18px; height: 18px; }
body.hq2-app .hq2-rail .hq2-rail-icon:hover {
  color: var(--tc-gold) !important;
  background: rgba(200, 169, 110, .18);
  transform: none;
}
body.hq2-app .hq2-rail .hq2-rail-icon:hover svg { stroke: var(--tc-gold); }
body.hq2-app .hq2-rail .hq2-rail-icon:focus-visible {
  outline: 2px solid var(--tc-gold);
  outline-offset: 2px;
}
body.hq2-app .hq2-rail .hq2-rail-icon.is-active {
  color: var(--ink) !important;
  background: var(--tc-gold);
}
body.hq2-app .hq2-rail .hq2-rail-icon.is-active svg { stroke: var(--ink); }
body.hq2-app .hq2-rail .hq2-rail-icon.is-active::before {
  content: '';
  position: absolute; left: -6px; top: 8px; bottom: 8px;
  width: 3px; background: var(--tc-gold);
  border-radius: 2px;
}
.hq2-rail-label {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.1;
  text-align: center;
  text-transform: lowercase;
  white-space: normal;
  word-break: keep-all;
  hyphens: none;
  max-width: 100%;
  padding: 0 1px;
  color: inherit;
  pointer-events: none;
}
.hq2-rail-glyph-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
/* Native-style badge dot for items with a count */
.hq2-rail-badge {
  position: absolute;
  top: -4px; right: -8px;
  min-width: 14px; height: 14px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--tc-gold);
  color: var(--ink);
  font-size: 9px; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 1.5px var(--ink);
}
.hq2-rail-icon.is-active .hq2-rail-badge {
  background: var(--ink); color: var(--tc-gold);
  box-shadow: 0 0 0 1.5px var(--tc-gold);
}
/* Tone variants — Recipe Lab badge uses these to signal doctor health.
   .is-warn     → amber, "warnings only" (soft issues)
   .is-critical → coral, "errors present" (will block checkout) */
.hq2-rail-badge.is-warn {
  background: #D9A200;
  color: #ffffff;
  box-shadow: 0 0 0 1.5px var(--ink);
}
.hq2-rail-badge.is-critical {
  background: #C8442C;
  color: #ffffff;
  box-shadow: 0 0 0 1.5px var(--ink);
}
.hq2-rail-icon.is-active .hq2-rail-badge.is-warn,
.hq2-rail-icon.is-active .hq2-rail-badge.is-critical {
  /* Active rail icon is dark navy — keep tone color, flip text. */
  background: var(--ink);
  box-shadow: 0 0 0 1.5px currentColor;
}
.hq2-rail-icon.is-active .hq2-rail-badge.is-warn     { color: #FFD24A; }
.hq2-rail-icon.is-active .hq2-rail-badge.is-critical { color: #FF8870; }

.hq2-rail-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  padding: 0 6px;
  width: 100%;
}

/* ─── Masthead ─── */
.hq2-masthead {
  position: sticky;
  top: 0;
  height: var(--mh-h);
  margin-left: var(--rail-w);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 0 var(--s-5);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  z-index: 10;
}
.hq2-mh-brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-shrink: 0;
  cursor: pointer;
  user-select: none;
}
/* Top-left wordmark — young serif (Fraunces) in gold with a slow
   shimmer sweep. We use a horizontal gold gradient and animate
   background-position so a brighter highlight band travels across
   the letters every ~5s. background-clip: text masks the gradient
   onto the glyphs only. */
.hq2-mh-brand .hq2-brand-mark {
  font-family: var(--font-brand);                  /* Fraunces */
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.015em;
  font-variation-settings: "opsz" 96, "SOFT" 80;
  line-height: 1;
  background: linear-gradient(
    100deg,
    #C8A96E 0%,
    #C8A96E 30%,
    #F4E2B4 45%,         /* shimmer highlight */
    #FFFFFF 50%,
    #F4E2B4 55%,
    #C8A96E 70%,
    #C8A96E 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hq2-brand-shimmer 5.5s ease-in-out infinite;
}
.hq2-mh-brand .hq2-brand-sub {
  font-family: var(--font-brand);
  font-weight: 500;
  font-style: italic;
  font-size: 16px;
  color: var(--tc-gold);
  letter-spacing: -.005em;
  font-variation-settings: "opsz" 60;
  line-height: 1;
  opacity: .85;
}
@keyframes hq2-brand-shimmer {
  0%   { background-position: 100% 0; }
  50%  { background-position: 0%   0; }
  100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hq2-mh-brand .hq2-brand-mark { animation: none; background-position: 50% 0; }
}
.hq2-mh-divider {
  width: 1px;
  height: 24px;
  background: var(--rule);
}
.hq2-mh-crumb {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.hq2-mh-crumb b {
  font-weight: 600;
  color: var(--ink);
}
.hq2-mh-crumb .sep { color: var(--ink-5); }
.hq2-mh-tools {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

/* Range pills (live on opt-in modules: overview, financials, cohorts) */
.hq2-range-pills {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.hq2-range-pills button {
  background: transparent;
  border: none;
  padding: 4px 10px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  letter-spacing: .02em;
  transition: background .15s ease, color .15s ease;
}
.hq2-range-pills button.is-active {
  background: var(--ink);
  color: #fff;
}
.hq2-range-pills button:hover:not(.is-active) { color: var(--ink); }

/* Cmd+K trigger — overrides the older wide variant */
.hq2-cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 500;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.hq2-cmdk-trigger:hover { border-color: var(--ink-3); color: var(--ink); }
.hq2-cmdk-trigger .kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink-3);
}

.hq2-mh-profile {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--tc-navy);
  color: #fff;
  display: grid; place-items: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 12px;
  cursor: pointer;
  letter-spacing: -.01em;
}

/* Notification bell — masthead button between tandoco.com link + the
   profile chip. Gold dot indicator when there are unread items. */
.hq2-mh-bell {
  position: relative;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  display: grid; place-items: center;
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.hq2-mh-bell:hover { color: var(--ink); border-color: var(--ink); background: var(--surface-2); }
.hq2-mh-bell.is-open { color: var(--ink); border-color: var(--ink); background: var(--surface-2); }

/* Paco bell — same dimensions, but the icon is a tiny cat. The .is-twitch
   class plays a 0.5s ear-twitch animation when a new notification arrives;
   set + cleared by JS in markNotifNew(). */
.hq2-mh-bell-paco {
  background: rgba(255, 230, 220, .35);
  border-color: rgba(200, 169, 110, .35);
  /* The button acts as a circular clip-mask for paco — see the
     scaled-up sprite below. overflow:hidden + border-radius:50% on
     .hq2-mh-bell already mask anything outside the circle. */
  overflow: hidden;
}
.hq2-mh-bell-paco:hover {
  background: rgba(255, 230, 220, .6);
  border-color: rgba(200, 169, 110, .6);
}
.hq2-mh-bell-paco .mise-cat {
  /* Sprite scaled to ~1.9× natural and positioned so the head fills
     the round button's clip circle. The cat's head is at sprite
     y=4–13 (mid y=8.5) — at scale 1.9, head-mid lands ~16px from the
     SVG's top edge. Anchoring the SVG's top at -1px in the button
     puts that head-mid at button-y=15 (center). overflow:hidden on
     the button hides the body/tail. */
  position: absolute;
  width: 41px; height: 60px;
  top: -1px;
  left: 50%;
  /* Custom keyframe replaces the base .mise-cat miseCatIdle bob so
     translateX(-50%) horizontal-centering survives the animation. */
  animation: paco-bell-idle 2.4s ease-in-out infinite;
  display: block;
  image-rendering: pixelated;
}
@keyframes paco-bell-idle {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%      { transform: translateX(-50%) translateY(-2px); }
}
/* Re-target the twitch animation to preserve the position transform. */
.hq2-mh-bell-paco.is-twitch .mise-cat {
  animation: paco-bell-twitch-clipped .55s ease-in-out;
}
@keyframes paco-bell-twitch-clipped {
  0%   { transform: translateX(-50%) rotate(0); }
  20%  { transform: translateX(-50%) rotate(-12deg); }
  40%  { transform: translateX(-50%) rotate(8deg); }
  60%  { transform: translateX(-50%) rotate(-4deg); }
  100% { transform: translateX(-50%) rotate(0); }
}
.hq2-mh-bell-paco .hq2-mh-bell-dot {
  top: -2px; right: -2px;
  background: var(--tc-gold-dark, #8B6914);
  box-shadow: 0 0 0 2px #ffffff, 0 1px 4px rgba(20, 16, 68, .25);
}
@media (prefers-reduced-motion: reduce){
  .hq2-mh-bell-paco.is-twitch .mise-cat { animation: none !important; }
}
.hq2-mh-bell-dot {
  position: absolute;
  top: 4px; right: 4px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tc-gold);
  box-shadow: 0 0 0 2px var(--surface);
}

/* Notification panel — anchored fixed-position to top-right under
   masthead. Slides + fades in. The `[hidden]` rule below makes
   sure the panel stays hidden by default until openNotifPanel()
   removes the attribute — without it, `display: flex` overrides the
   user-agent default `display: none` for [hidden] and the panel
   floats permanently in the top-right corner. */
.hq2-notif-panel[hidden] { display: none !important; }
.hq2-notif-panel {
  position: fixed;
  top: calc(var(--mh-h) + 6px);
  right: 14px;
  width: 360px;
  max-width: calc(100vw - 28px);
  max-height: 70vh;
  z-index: 70;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  box-shadow: 0 18px 40px -16px rgba(20, 16, 68, .28);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: hq2NotifIn .18s ease-out;
}
@keyframes hq2NotifIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-notif-clear {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
}
.hq2-notif-clear:hover { color: var(--ink); background: var(--surface-2); }
.hq2-notif-list {
  flex: 1;
  overflow-y: auto;
}
.hq2-notif-empty {
  padding: 36px 18px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  font-style: italic;
}
/* Paco-sleeping empty state — bigger, centered cat sprite + two lines
   of copy. Replaces the flat italic line when the notif list is empty. */
.hq2-notif-empty.hq2-notif-empty-paco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 24px 36px;
  font-style: normal;
}
.hq2-notif-empty-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hq2-notif-empty-cat {
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 4px 8px rgba(20, 16, 68, .12));
}
.hq2-notif-empty-cat .mise-cat {
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
/* zzzz speech bubble — sits to the upper-right of sleeping paco with
   a small tail pointing back at him. Same vocabulary as pacoSay()
   bubbles for consistency. Floats gently. */
.hq2-notif-empty-bubble {
  position: absolute;
  left: calc(100% + 8px);
  top: 6px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 12px;
  padding: 6px 12px;
  font-family: var(--font-ui, inherit);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink-2, #3D3E5C);
  box-shadow: 0 4px 12px -4px rgba(20, 16, 68, .15);
  white-space: nowrap;
  animation: hq2-zzz-float 2.4s ease-in-out infinite;
}
.hq2-notif-empty-bubble::before {
  content: '';
  position: absolute;
  top: 12px; left: -5px;
  width: 9px; height: 9px;
  background: #fff;
  border-left: 1px solid rgba(20, 16, 68, .08);
  border-bottom: 1px solid rgba(20, 16, 68, .08);
  transform: rotate(45deg);
}
@keyframes hq2-zzz-float {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50%      { transform: translateY(-3px); opacity: .85; }
}
@media (prefers-reduced-motion: reduce){
  .hq2-notif-empty-bubble { animation: none !important; }
}
.hq2-notif-empty-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
}
.hq2-notif-empty-msg b {
  font-family: var(--font-ui, inherit);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink, #141044);
}
.hq2-notif-empty-msg span {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  font-style: normal;
  max-width: 24ch;
  line-height: 1.4;
}
.hq2-notif-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background .12s ease;
  text-decoration: none;
  color: inherit;
}
.hq2-notif-row:hover { background: var(--surface-2); }
.hq2-notif-row:last-child { border-bottom: 0; }
.hq2-notif-row.is-unread { background: rgba(200, 169, 110, .07); }
.hq2-notif-row.is-unread:hover { background: rgba(200, 169, 110, .12); }
.hq2-notif-icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: var(--surface-2);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 12px;
  flex-shrink: 0;
}
.hq2-notif-row.is-order .hq2-notif-icon { background: rgba(46, 134, 87, .14); color: #1F7A3F; }
.hq2-notif-row.is-mention .hq2-notif-icon { background: rgba(200, 169, 110, .2); color: #8B6914; }
.hq2-notif-row.is-alert .hq2-notif-icon { background: rgba(192, 57, 43, .12); color: #B8351F; }
.hq2-notif-body { min-width: 0; }
.hq2-notif-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-notif-msg {
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hq2-notif-ago {
  font-size: 10.5px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
  padding-top: 2px;
}

/* ─── Status line ─── */
.hq2-statusline {
  position: sticky;
  top: var(--mh-h);
  height: var(--sl-h);
  margin-left: var(--rail-w);
  display: flex;
  align-items: center;
  gap: var(--s-5);
  padding: 0 var(--s-5);
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  z-index: 9;
}
.hq2-sl-pulse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--success);
}
.hq2-sl-pulse .dot {
  width: 8px; height: 8px;
  background: var(--success);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(46, 134, 87, .5);
  animation: hq2SlPulse 2.6s ease-out infinite;
}
@keyframes hq2SlPulse {
  0%   { box-shadow: 0 0 0 0 rgba(46, 134, 87, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(46, 134, 87, 0); }
  100% { box-shadow: 0 0 0 0 rgba(46, 134, 87, 0); }
}
.hq2-sl-pulse.is-warn { color: var(--warning); }
.hq2-sl-pulse.is-warn .dot { background: var(--warning); animation-name: hq2SlPulseWarn; }
@keyframes hq2SlPulseWarn {
  0%   { box-shadow: 0 0 0 0 rgba(184, 134, 11, .5); }
  70%  { box-shadow: 0 0 0 8px rgba(184, 134, 11, 0); }
  100% { box-shadow: 0 0 0 0 rgba(184, 134, 11, 0); }
}
.hq2-sl-tally {
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-sl-tally b {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-sl-time {
  margin-left: auto;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

/* ─── Main column ─── */
.hq2-main {
  margin-left: var(--rail-w);
  height: calc(100vh - var(--mh-h) - var(--sl-h));
  height: calc(100dvh - var(--mh-h) - var(--sl-h));
  overflow-y: auto;
  background: var(--bg);
}

/* When a module needs the full bleed (CRM, pipeline, chat — they manage
   their own layout), .hq2-page--crm zeroes padding + locks height to
   the main column. Pre-existing rule, kept for compat. */

/* ═══ Main area ════════════════════════════════════════════════════════ */
.hq2-page {
  padding: var(--s-5) var(--s-5) var(--s-7);
  max-width: 1280px;
  margin: 0 auto;
  /* Page-load fade-in — kept from earlier work, now subtler. */
  animation: hq2PageFade .22s cubic-bezier(.32, .72, 0, 1);
}
.hq2-page-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: var(--s-5);
  margin-bottom: var(--s-6);
}
.hq2-page-head .eye {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  color: var(--tc-gold-dark);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: var(--s-2);
}
.hq2-page-head h1 + p { margin-top: var(--s-2); color: var(--ink-3); font-size: var(--t-14); }

/* ═══ Cards ═══ */
.hq2-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s-5);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hq2-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-4);
}
.hq2-mod-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.hq2-mod-card:hover {
  border-color: var(--tc-gold);
  box-shadow: var(--shadow-2);
  transform: translateY(-1px);
  text-decoration: none;
}
.hq2-mod-card .icon {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--surface-2), var(--bg));
  border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.hq2-mod-card.is-built .icon {
  background: linear-gradient(135deg, var(--tc-navy), var(--tc-navy-soft));
  color: var(--tc-gold-light);
  border-color: var(--tc-navy);
}
.hq2-mod-card .label {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-15);
  color: var(--ink);
  letter-spacing: -.005em;
}
.hq2-mod-card .desc {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: var(--lh-snug);
}
.hq2-mod-card .status {
  position: absolute; top: var(--s-3); right: var(--s-3);
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
.hq2-mod-card.is-built .status { background: var(--success-bg); color: var(--success); border-color: rgba(46, 134, 87, .25); }
.hq2-mod-card.is-coming .status { background: var(--warning-bg); color: var(--warning); border-color: rgba(184, 134, 11, .25); }

/* ═══ Buttons ══════════════════════════════════════════════════════════ */
.hq2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  padding: 7px 14px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: var(--w-semibold);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast), transform var(--t-fast);
  white-space: nowrap;
  user-select: none;
}
.hq2-btn:active { transform: scale(.97); }
.hq2-btn-primary { background: var(--tc-navy); color: #fff; }
.hq2-btn-primary:hover { background: var(--tc-navy-soft); }
/* Green "go" variant — used for high-positive-stakes actions like
   "start route" that fire a one-way effect (SMS to customers + live
   status updates). Visually distinct from the navy primary so the
   dispatcher's eye lands on it as the kickoff action. */
.hq2-btn-go { background: #1F8E5C; color: #fff; border-color: #1F8E5C; }
.hq2-btn-go:hover { background: #1A7A4F; border-color: #1A7A4F; }
.hq2-btn-go[disabled] { background: #BDD9CC; border-color: #BDD9CC; color: #fff; cursor: not-allowed; }
.hq2-btn-secondary { background: var(--surface); border-color: var(--rule-strong); color: var(--ink); }
.hq2-btn-secondary:hover { background: var(--surface-2); border-color: var(--ink-4); }
.hq2-btn-ghost { background: transparent; color: var(--ink-2); }
.hq2-btn-ghost:hover { background: var(--surface-2); color: var(--ink); }
.hq2-btn-danger { background: var(--danger); color: #fff; }
.hq2-btn-danger:hover { background: #95301A; }
.hq2-btn-gold { background: var(--tc-gold); color: var(--tc-navy-deep); }
.hq2-btn-gold:hover { background: var(--tc-gold-light); }
.hq2-btn-sm { padding: 4px 10px; font-size: var(--t-12); }
.hq2-btn-lg { padding: 10px 20px; font-size: var(--t-14); }
.hq2-btn:disabled { opacity: .5; cursor: not-allowed; }

/* When .hq2-btn is used on an <a>, browser default link styling
   (a:link / a:visited) wins over class-only color rules because
   :link is a pseudo-class adding +0,1,0 specificity. Tommy's report:
   "the text for in bundles to create bundles is blue and cant be
   read against button" — that was the "+ new bundle" anchor on
   /commerce/bundles. The rules below force the right text color
   regardless of link state, and strip the underline. */
a.hq2-btn,
a.hq2-btn:link,
a.hq2-btn:visited,
a.hq2-btn:hover,
a.hq2-btn:active {
  text-decoration: none;
}
a.hq2-btn-primary:link,
a.hq2-btn-primary:visited,
a.hq2-btn-primary:hover,
a.hq2-btn-primary:active,
a.hq2-btn-danger:link,
a.hq2-btn-danger:visited,
a.hq2-btn-danger:hover,
a.hq2-btn-danger:active {
  color: #fff;
}
a.hq2-btn-secondary:link,
a.hq2-btn-secondary:visited {
  color: var(--ink);
}
a.hq2-btn-ghost:link,
a.hq2-btn-ghost:visited {
  color: var(--ink-2);
}
a.hq2-btn-gold:link,
a.hq2-btn-gold:visited {
  color: var(--tc-navy-deep);
}

/* ═══ Inputs ═══════════════════════════════════════════════════════════ */
.hq2-input,
.hq2-textarea,
.hq2-select {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font: inherit;
  color: var(--ink);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hq2-input:focus,
.hq2-textarea:focus,
.hq2-select:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .12);
}
.hq2-input::placeholder, .hq2-textarea::placeholder { color: var(--ink-4); }
.hq2-textarea { resize: vertical; min-height: 96px; line-height: var(--lh-snug); }
.hq2-label { display: block; font-size: var(--t-12); font-weight: var(--w-semibold); color: var(--ink-2); margin-bottom: var(--s-1); }
.hq2-help  { font-size: var(--t-11); color: var(--ink-4); margin-top: var(--s-1); }

/* ═══ Toast system ═════════════════════════════════════════════════════ */
.hq2-toasts {
  position: fixed; bottom: var(--s-5); right: var(--s-5);
  display: flex; flex-direction: column-reverse; gap: var(--s-2);
  z-index: 1000; pointer-events: none;
}
.hq2-toast {
  background: var(--ink);
  color: #fff;
  font-size: var(--t-13);
  font-weight: var(--w-medium);
  padding: 10px 14px;
  border-radius: var(--r-md);
  box-shadow: var(--shadow-3);
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--s-2);
  min-width: 240px;
  animation: hq2ToastIn 240ms var(--ease);
}
.hq2-toast.is-success { background: #14523A; }
.hq2-toast.is-warn    { background: #6B4F0A; }
.hq2-toast.is-danger  { background: #7A2611; }
@keyframes hq2ToastIn {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* Undo toast — same surface as a regular toast plus an inline undo
   button + a thin countdown bar across the bottom. Default 5-sec
   window before the destructive op finalizes. */
.hq2-toast-undo {
  position: relative;
  padding-right: 8px;
  min-width: 280px;
  overflow: hidden;
}
.hq2-toast-undo .hq2-toast-msg {
  flex: 1;
  min-width: 0;
}
.hq2-toast-undo-btn {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 6px;
  color: #fff;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  padding: 4px 10px;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
  flex-shrink: 0;
}
.hq2-toast-undo-btn:hover {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .42);
}
.hq2-toast-undo .hq2-toast-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.hq2-toast-undo .hq2-toast-bar-fill {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, .55);
  transform: scaleX(1);
  transform-origin: left center;
}
@media (prefers-reduced-motion: reduce){
  .hq2-toast-undo .hq2-toast-bar-fill { transition: none !important; }
}

/* ═══ Command palette ═════════════════════════════════════════════════ */
.hq2-cmdk-mask {
  position: fixed; inset: 0;
  background: rgba(15, 12, 32, .35);
  backdrop-filter: blur(4px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  z-index: 900;
}
.hq2-cmdk-mask.is-open { display: flex; animation: hq2CmdkFadeIn 160ms var(--ease); }
@keyframes hq2CmdkFadeIn { from { opacity: 0; } to { opacity: 1; } }

.hq2-cmdk {
  width: min(640px, calc(100% - 32px));
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: 70vh;
}
.hq2-cmdk-input {
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-15);
  color: var(--ink);
  background: transparent;
  outline: none;
}
.hq2-cmdk-input::placeholder { color: var(--ink-4); }
.hq2-cmdk-list {
  flex: 1; overflow-y: auto;
  padding: var(--s-2);
}
.hq2-cmdk-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: 10px 14px;
  border-radius: var(--r-md);
  cursor: pointer;
  font-size: var(--t-13);
  color: var(--ink);
}
.hq2-cmdk-item:hover, .hq2-cmdk-item.is-cursor { background: var(--surface-2); }
.hq2-cmdk-item .icon { width: 18px; height: 18px; opacity: .65; }
.hq2-cmdk-item .desc { color: var(--ink-3); font-size: var(--t-11); margin-left: auto; }
.hq2-cmdk-empty { padding: var(--s-7); text-align: center; color: var(--ink-3); font-size: var(--t-13); }

/* ═══ Auth / login screen ═════════════════════════════════════════════ */
.hq2-auth-screen {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--tc-navy-deep) 0%, var(--tc-navy) 60%, var(--tc-navy-soft) 100%);
  padding: var(--s-5);
}
.hq2-auth-card {
  width: 100%; max-width: 380px;
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-pop);
  padding: var(--s-7);
}
/* Cat sits above the brand on the sign-in card — small + blinking */
.hq2-auth-cat {
  display: flex;
  justify-content: center;
  margin-bottom: var(--s-3);
}
.hq2-auth-cat .mise-cat { height: 132px; }
.hq2-auth-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: var(--s-3);
}
.hq2-auth-brand .hq2-brand-mark {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 32px;
  color: var(--tc-navy);
  letter-spacing: -.02em;
  font-variation-settings: "opsz" 96, "SOFT" 80;
  line-height: 1;
}
.hq2-auth-brand .hq2-brand-sub {
  font-family: var(--font-brand);
  font-weight: 500;
  font-style: italic;
  font-size: 20px;
  color: var(--tc-gold-dark);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 60;
  line-height: 1;
}
.hq2-auth-card h1 { font-size: var(--t-24); margin-bottom: var(--s-2); }
.hq2-auth-card .sub { color: var(--ink-3); font-size: var(--t-13); margin-bottom: var(--s-6); }
.hq2-auth-form { display: flex; flex-direction: column; gap: var(--s-3); }
.hq2-auth-err {
  background: var(--danger-bg);
  border: 1px solid rgba(179, 58, 26, .20);
  color: var(--danger);
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  display: none;
}
.hq2-auth-err.is-on { display: block; }
.hq2-auth-foot {
  margin-top: var(--s-5);
  font-size: var(--t-11);
  color: var(--ink-4);
  text-align: center;
  line-height: var(--lh-snug);
}
.hq2-auth-foot a { color: var(--ink-3); text-decoration: underline; }

/* ═══ Global button system (.tb-btn / .tb-btn-primary) ═════════════════
   Polished defaults so any callsite — not just inside toolbars — gets
   a properly styled button without re-declaring the rules. The
   toolbar-scoped overrides earlier in the file still apply where they
   exist; this is the catch-all for everywhere else (Financials
   "Export CSV", Workflows "install" / "arm engine", Drawer actions). */
body.hq2-app .tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  letter-spacing: .01em;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform .1s var(--ease), box-shadow var(--t-fast) var(--ease);
  white-space: nowrap;
  user-select: none;
}
body.hq2-app .tb-btn:hover {
  background: var(--surface-2);
  border-color: var(--rule-strong);
  color: var(--ink);
}
body.hq2-app .tb-btn:active { transform: scale(.97); }
body.hq2-app .tb-btn:disabled { opacity: .5; cursor: not-allowed; }
body.hq2-app .tb-btn-primary {
  background: var(--tc-navy);
  border-color: var(--tc-navy);
  color: #fff;
  box-shadow: 0 1px 2px rgba(15, 12, 32, .12);
}
body.hq2-app .tb-btn-primary:hover {
  background: var(--tc-navy-soft);
  border-color: var(--tc-navy-soft);
  color: #fff;
  box-shadow: 0 4px 12px -2px rgba(27, 26, 107, .35);
}
body.hq2-app .tb-btn-danger {
  background: var(--surface);
  border-color: rgba(179, 58, 26, .25);
  color: var(--danger);
}
body.hq2-app .tb-btn-danger:hover {
  background: var(--danger-bg);
  border-color: var(--danger);
}

/* ═══ Loading state — full-screen brand splash ═══════════════════════
   Visible until Firebase auth resolves. Renders entirely from CSS so
   the user sees the brand mark immediately (no waiting on JS). The
   wordmark is in Fraunces serif; below it a thin gold loading bar
   slides side-to-side as a non-spinny progress indicator. The bar
   uses a continuous animation so even a slow auth call doesn't read
   as "stuck". */
.hq2-loading {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
  background: var(--chrome-bg);
  z-index: 50;
  transition: opacity .35s ease;
}
.hq2-loading.is-out {
  opacity: 0;
  pointer-events: none;
}
.hq2-loading-mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hq2-loading-wordmark {
  font-family: var(--font-brand);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: -.025em;
  font-variation-settings: "opsz" 144, "SOFT" 80;
  line-height: 1;
  /* Same gold + shimmer as the masthead wordmark — keeps the brand
     identity consistent across loading/auth/shell. */
  background: linear-gradient(
    100deg,
    #C8A96E 0%, #C8A96E 30%,
    #F4E2B4 45%, #FFFFFF 50%, #F4E2B4 55%,
    #C8A96E 70%, #C8A96E 100%
  );
  background-size: 250% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: hq2LoadFade .9s cubic-bezier(.32,.72,0,1), hq2-brand-shimmer 5.5s ease-in-out infinite;
}
.hq2-loading-sub {
  font-family: var(--font-brand);
  font-weight: 500;
  font-style: italic;
  font-size: 26px;
  color: var(--tc-gold);
  letter-spacing: -.01em;
  font-variation-settings: "opsz" 60;
  line-height: 1;
  animation: hq2LoadFade 1.1s cubic-bezier(.32,.72,0,1);
}
@keyframes hq2LoadFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-loading-bar {
  width: 200px;
  height: 2px;
  background: rgba(255, 255, 255, .12);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.hq2-loading-bar-fill {
  position: absolute;
  top: 0; left: -40%;
  height: 100%;
  width: 40%;
  background: linear-gradient(90deg, transparent 0%, var(--tc-gold) 50%, transparent 100%);
  animation: hq2LoadSlide 1.4s ease-in-out infinite;
}
@keyframes hq2LoadSlide {
  0%   { left: -40%; }
  100% { left: 100%; }
}

/* Reduced-motion: kill the slide animation, just show a steady fill */
@media (prefers-reduced-motion: reduce){
  .hq2-loading-wordmark,
  .hq2-loading-sub { animation: none; }
  .hq2-loading-bar-fill {
    left: 30%;
    background: var(--tc-gold);
    animation: none;
  }
}

/* Legacy spinner kept for any non-loading uses (none today, but the
   selector hangs around so a stray reference doesn't go un-styled). */
.hq2-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid var(--rule-strong);
  border-top-color: var(--tc-navy);
  border-radius: 50%;
  animation: hq2Spin 800ms linear infinite;
}
@keyframes hq2Spin { to { transform: rotate(360deg); } }

/* ═══ Welcome banner (Phase 0 marker) ═══════════════════════════════════ */
.hq2-welcome {
  background: linear-gradient(135deg, rgba(232, 200, 122, .14), rgba(255, 255, 255, .8));
  border: 1px solid rgba(232, 200, 122, .35);
  border-radius: var(--r-xl);
  padding: var(--s-5) var(--s-6);
  margin-bottom: var(--s-6);
  display: flex; align-items: flex-start; gap: var(--s-5);
}
.hq2-welcome .glyph {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--tc-gold), var(--tc-gold-dark));
  color: var(--tc-navy-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}
.hq2-welcome h2 { font-size: var(--t-16); margin-bottom: var(--s-1); }
.hq2-welcome p  { font-size: var(--t-13); color: var(--ink-2); line-height: var(--lh-snug); }
.hq2-welcome p + p { margin-top: var(--s-2); }
.hq2-welcome .meta {
  display: inline-flex; align-items: center; gap: var(--s-2);
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-dark);
  margin-top: var(--s-3);
}

/* ═══ Section heads ═══ */
.hq2-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s-3);
  margin: var(--s-7) 0 var(--s-3);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--rule);
}
.hq2-section-head h2 { font-size: var(--t-15); font-weight: var(--w-semibold); }
.hq2-section-head .count {
  font-size: var(--t-11);
  color: var(--ink-3);
  font-family: var(--font-mono);
}

/* ═══ Empty / placeholder pages (per-module shells) ═══ */
.hq2-coming-soon {
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-xl);
  padding: var(--s-9) var(--s-6);
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.hq2-coming-soon .glyph {
  width: 56px; height: 56px;
  border-radius: var(--r-lg);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 28px;
}
.hq2-coming-soon h2 { font-size: var(--t-18); }
.hq2-coming-soon p  { color: var(--ink-3); font-size: var(--t-13); max-width: 440px; }

/* ═══ Sidebar count badges ════════════════════════════════════════════ */
/* Replaces the grey-shortcut text — live numbers from Firestore make the
   sidebar feel alive instead of decorative. */
.hq2-nav-item .badge {
  margin-left: auto;
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  letter-spacing: .02em;
  line-height: 1.6;
  font-variant-numeric: tabular-nums;
}
.hq2-nav-item .badge.is-default { background: rgba(255,255,255,.08); color: var(--chrome-fg-muted); }
.hq2-nav-item .badge.is-active  { background: var(--tc-gold); color: var(--tc-navy-deep); }
.hq2-nav-item .badge.is-warn    { background: var(--warning); color: #fff; }
.hq2-nav-item .badge.is-danger  { background: var(--danger); color: #fff; }
.hq2-nav-item.is-active .badge.is-default { background: rgba(255,255,255,.14); color: #fff; }

/* ═══ Dashboard — stat cards ══════════════════════════════════════════ */
.hq2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.hq2-stat {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
  overflow: hidden;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.hq2-stat:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-2); }
.hq2-stat .stat-lbl {
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hq2-stat .stat-val {
  display: flex; align-items: baseline; gap: var(--s-2);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-28);
  letter-spacing: -.018em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-stat .stat-val .unit { font-size: var(--t-15); font-weight: var(--w-semibold); color: var(--ink-3); }
.hq2-stat .stat-delta {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
}
.hq2-stat .stat-delta.is-up   { color: var(--success); }
.hq2-stat .stat-delta.is-down { color: var(--danger); }
.hq2-stat .stat-delta.is-flat { color: var(--ink-4); }
.hq2-stat .stat-spark { margin-top: var(--s-1); height: 32px; width: 100%; }
.hq2-stat .stat-spark path.fill { fill: rgba(27,26,107,.06); }
.hq2-stat .stat-spark path.line { fill: none; stroke: var(--tc-navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hq2-stat.is-loading .stat-val,
.hq2-stat.is-loading .stat-delta { color: transparent; background: linear-gradient(90deg, var(--rule), var(--rule-strong), var(--rule)); background-size: 200% 100%; border-radius: var(--r-sm); animation: hq2Skel 1.4s linear infinite; }
@keyframes hq2Skel { 0% { background-position: 0% 0; } 100% { background-position: -200% 0; } }

/* ═══ Dashboard — main content grid ═══════════════════════════════════ */
.hq2-dash {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--s-5);
}
@media (max-width: 1100px) { .hq2-dash { grid-template-columns: 1fr; } }

/* ═══ Trend chart card ═══════════════════════════════════════════════ */
.hq2-chart {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-5);
}
.hq2-chart-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-chart-head .title { font-size: var(--t-13); font-weight: var(--w-semibold); color: var(--ink); }
.hq2-chart-head .meta  { font-size: var(--t-11); color: var(--ink-3); }
.hq2-chart-svg { width: 100%; height: 200px; display: block; }
.hq2-chart-svg .grid line { stroke: var(--rule); stroke-width: 1; }
.hq2-chart-svg .axis text { fill: var(--ink-4); font-size: 10px; font-family: var(--font-mono); }
.hq2-chart-svg path.area { fill: rgba(27,26,107,.08); }
.hq2-chart-svg path.line { fill: none; stroke: var(--tc-navy); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.hq2-chart-svg circle.dot { fill: var(--tc-gold); stroke: var(--surface); stroke-width: 2; }

/* ═══ Alerts panel ════════════════════════════════════════════════════ */
.hq2-alerts {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.hq2-alerts-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.hq2-alert {
  display: flex; align-items: flex-start; gap: var(--s-3);
  padding: var(--s-3) var(--s-2);
  border-radius: var(--r-md);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background var(--t-fast);
}
.hq2-alert:hover { background: var(--surface-2); text-decoration: none; }
.hq2-alert + .hq2-alert { border-top: 1px solid var(--rule); border-radius: 0; }
.hq2-alert:first-child + .hq2-alert,
.hq2-alert:hover + .hq2-alert { border-top-color: transparent; }
.hq2-alert .dot {
  width: 8px; height: 8px; border-radius: 50%;
  flex-shrink: 0; margin-top: 6px;
}
.hq2-alert.is-info   .dot { background: var(--info); }
.hq2-alert.is-warn   .dot { background: var(--warning); box-shadow: 0 0 0 0 rgba(184,134,11,.6); animation: hq2Pulse 2s ease-out infinite; }
.hq2-alert.is-danger .dot { background: var(--danger); box-shadow: 0 0 0 0 rgba(179,58,26,.6); animation: hq2Pulse 1.5s ease-out infinite; }
@keyframes hq2Pulse {
  0%   { box-shadow: 0 0 0 0 rgba(184,134,11,.45); }
  70%  { box-shadow: 0 0 0 8px rgba(184,134,11,0); }
  100% { box-shadow: 0 0 0 0 rgba(184,134,11,0); }
}
.hq2-alert .body { flex: 1; min-width: 0; }
.hq2-alert .title { font-size: var(--t-13); font-weight: var(--w-semibold); color: var(--ink); margin-bottom: 2px; }
.hq2-alert .sub   { font-size: var(--t-11); color: var(--ink-3); line-height: var(--lh-snug); }
.hq2-alert .arrow { color: var(--ink-4); font-size: 12px; flex-shrink: 0; align-self: center; }
.hq2-alert.is-empty {
  padding: var(--s-5) var(--s-3);
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
}
.hq2-alert.is-empty:hover { background: transparent; }
.hq2-alert.is-empty .check { font-size: 24px; color: var(--success); margin-bottom: var(--s-1); }

/* ═══ Activity feed ══════════════════════════════════════════════════ */
.hq2-activity {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  margin-top: var(--s-5);
}
.hq2-activity-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: var(--s-3);
}
.hq2-activity-row {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) 0;
  font-size: var(--t-13);
  border-bottom: 1px solid var(--rule);
}
.hq2-activity-row:last-child { border-bottom: none; }
.hq2-activity-row .glyph {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  flex-shrink: 0;
}
.hq2-activity-row .text  { flex: 1; min-width: 0; color: var(--ink); }
.hq2-activity-row .text b { font-weight: var(--w-semibold); color: var(--ink); }
.hq2-activity-row .text .who { color: var(--ink-2); }
.hq2-activity-row .when  { font-size: var(--t-11); color: var(--ink-4); font-variant-numeric: tabular-nums; flex-shrink: 0; }

/* ═══ Section heads in dashboard ═══════════════════════════════════════ */
.hq2-dash-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: var(--s-7) 0 var(--s-3);
}
.hq2-dash-section-head h2 { font-size: var(--t-15); font-weight: var(--w-semibold); }
.hq2-dash-section-head .meta { font-size: var(--t-11); color: var(--ink-3); }

/* ═══ Mobile fallback (hq2 is desktop-first; mobile gets a heads-up) ═══ */
@media (max-width: 880px) {
  .hq2-shell {
    grid-template-columns: 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "topbar" "main";
  }
  .hq2-sidebar { display: none; }
  .hq2-page { padding: var(--s-5) var(--s-4) var(--s-7); }
  .hq2-mobile-warning {
    background: var(--warning-bg);
    border: 1px solid rgba(184, 134, 11, .25);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    color: var(--warning);
    font-size: var(--t-12);
    font-weight: var(--w-semibold);
    margin-bottom: var(--s-4);
    display: block;
  }
}
@media (min-width: 881px) {
  .hq2-mobile-warning { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CRM MODULE  (HQ v2 phase 1 — customers)
   ─────────────────────────────────────────────────────────────────────────
   Three-pane layout: segments rail · customer table · detail drawer.
   The drawer is positioned absolute over the right side of the table and
   slides in/out via transform — no layout reflow when opening / closing.
   ═════════════════════════════════════════════════════════════════════════ */

/* Page modifier — CRM (and chat / pipeline) take over the full main
   area, no standard padding, each pane scrolls independently. The
   parent .hq2-main is height: calc(100vh - mh - sl), so 100% works. */
.hq2-page--crm {
  padding: 0 !important;
  max-width: none !important;
  height: 100%;
  overflow: hidden;
  animation: none;
}

/* Combined modifier for full-bleed list pages that ALSO want natural
   page scroll (so the giant pastel hero scrolls out of view rather
   than pinning forever). Used by ingredients — and any future list
   page that wants the same hero-scroll behavior. Releases the
   height:100% / overflow:hidden lock from .hq2-page--crm so the parent
   .hq2-main scroll context can take over. Inner sticky toolbars then
   stick to .hq2-main's scroll viewport top. */
.hq2-page--crm.hq2-page--scroll {
  height: auto;
  overflow: visible;
}

.hq2-crm {
  display: grid;
  grid-template-columns: 240px 1fr;
  height: 100%;
  position: relative;
  background: var(--bg);
}

/* ─── segments rail (left) ─── */
.hq2-crm-rail {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.hq2-crm-rail .rail-head {
  padding: var(--s-4) var(--s-4) var(--s-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--t-11);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-crm-rail .rail-new {
  width: 22px; height: 22px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  background: transparent;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1;
  display: grid;
  place-items: center;
}
.hq2-crm-rail .rail-new:disabled { opacity: .45; cursor: not-allowed; }
.hq2-crm-rail .rail-body { padding: 0 var(--s-2) var(--s-4); }

.hq2-crm-rail .seg-group { margin-bottom: var(--s-3); }
.hq2-crm-rail .seg-group-head {
  padding: var(--s-3) var(--s-3) var(--s-1);
  font-size: var(--t-10);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--w-bold);
}

.hq2-crm-rail .seg-row {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  color: var(--ink-2);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  text-align: left;
}
.hq2-crm-rail .seg-row { transition: background .12s, color .12s; cursor: pointer; }
.hq2-crm-rail .seg-row:hover { background: var(--surface-2); color: var(--ink); }
.hq2-crm-rail .seg-row.is-active {
  background: var(--tc-navy);
  color: #fff;
  font-weight: var(--w-semibold);
}
/* Colored bullet per segment (customers-preview.html treatment). */
.hq2-crm-rail .seg-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  flex: 0 0 auto;
  box-shadow: 0 0 0 1px rgba(15, 12, 32, .05) inset;
}
.hq2-crm-rail .seg-row.is-active .seg-dot { box-shadow: 0 0 0 2px rgba(255, 255, 255, .55); }
/* Legacy glyph icon — still used by the transient cohort row. */
.hq2-crm-rail .seg-icon {
  width: 18px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.hq2-crm-rail .seg-row.is-active .seg-icon { color: #fff; }
.hq2-crm-rail .seg-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-crm-rail .seg-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-10);
  color: var(--ink-4);
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  min-width: 22px;
  text-align: center;
}
.hq2-crm-rail .seg-row.is-active .seg-count { background: rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .9); }

/* ─── main pane (middle) ─── */
.hq2-crm-main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0; /* so the table can shrink rather than punching the grid */
}

/* ─── main-view toggle (List | Who's new) — a small segmented pill row
   at the very top of the CRM main column, same style as the table/pipeline
   toggle. ─── */
.hq2-crm-mainviews {
  flex: 0 0 auto;
  display: inline-flex;
  gap: 2px;
  align-self: flex-start;
  margin: var(--s-3) var(--s-5) 0;
  padding: 2px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.hq2-crm-mainviews .mv-tab {
  border: 0;
  background: transparent;
  border-radius: var(--r-pill);
  padding: 5px 14px;
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  color: var(--ink-3);
  cursor: pointer;
  white-space: nowrap;
}
.hq2-crm-mainviews .mv-tab:hover { color: var(--ink); }
.hq2-crm-mainviews .mv-tab.is-active {
  background: var(--surface);
  color: var(--tc-navy);
  font-weight: var(--w-semibold);
  box-shadow: var(--shadow-1);
}

/* The two main-view containers each fill the remaining column height.
   Only one is shown at a time (the other carries [hidden]). */
.hq2-crm-listview,
.hq2-crm-newview,
.hq2-crm-refview {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hq2-crm-listview[hidden],
.hq2-crm-newview[hidden],
.hq2-crm-refview[hidden] { display: none; }
.hq2-crm-newview { overflow-y: auto; }
/* Referrals sub-tab: the referral dashboard (page-head + stats + grid)
   lives inside the CRM main column, so give it the page padding it would
   otherwise get from .hq2-page and let it scroll on its own. */
.hq2-crm-refview {
  overflow-y: auto;
  padding: var(--s-4) var(--s-5) var(--s-5);
}

/* ─── "who's new" acquisition panel (now on its own sub-tab) ─── */
.hq2-crm-new {
  flex: 0 0 auto;
  background: var(--surface-2);
  padding: var(--s-4) var(--s-5) var(--s-5);
}
.hq2-crm-new-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.hq2-crm-new-title .eye {
  font-size: var(--t-11); font-weight: var(--w-semibold);
  color: var(--ink-4); letter-spacing: .06em; text-transform: uppercase;
}
.hq2-crm-new-title h2 { font-size: var(--t-16); font-weight: var(--w-bold); letter-spacing: -.01em; }
.hq2-crm-new-seg { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--rule); border-radius: 999px; padding: 2px; }
.hq2-crm-new-seg .cn-seg {
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--t-12); font-weight: var(--w-medium); color: var(--ink-3);
  padding: 4px 12px; border-radius: 999px; white-space: nowrap;
}
.hq2-crm-new-seg .cn-seg.is-active { background: var(--tc-navy); color: #fff; }

.hq2-crm-new-body {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) minmax(240px, 3fr);
  gap: var(--s-4);
  align-items: stretch;
}
@media (max-width: 820px){ .hq2-crm-new-body { grid-template-columns: 1fr; } }

.hq2-crm-new-kpis { display: flex; flex-direction: column; gap: var(--s-2); }
.cn-kpi {
  display: grid; grid-template-columns: 1fr auto auto; align-items: baseline;
  gap: var(--s-2); background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-2) var(--s-3);
}
.cn-kpi-lbl { font-size: var(--t-11); font-weight: var(--w-semibold); color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em; }
.cn-kpi-val { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-20); color: var(--ink); font-variant-numeric: tabular-nums; }
.cn-kpi-delta { font-size: var(--t-11); font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; }
.cn-kpi-delta.is-up { color: var(--success); }
.cn-kpi-delta.is-down { color: var(--danger); }
.cn-kpi-delta.is-flat { color: var(--ink-4); }

.hq2-crm-new-chart {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-md); padding: var(--s-3); display: flex; flex-direction: column;
}
.hq2-crm-new-chart svg { width: 100%; height: 96px; display: block; }
.hq2-crm-new-chart .cn-bar { fill: rgba(45, 47, 168, .28); }
.hq2-crm-new-chart .cn-bar.is-peak { fill: var(--tc-navy); }
.hq2-crm-new-chart-meta { font-size: var(--t-11); color: var(--ink-4); margin-top: var(--s-1); text-align: right; }

.hq2-crm-new-roster {
  margin-top: var(--s-3);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-1);
}
.hq2-crm-new-roster-empty { grid-column: 1 / -1; color: var(--ink-4); font-size: var(--t-12); padding: var(--s-2); }
.cn-row {
  display: grid;
  grid-template-columns: 26px minmax(0,1fr) auto auto auto;
  align-items: center; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-md);
  padding: 6px var(--s-3); cursor: pointer; text-align: left; font: inherit;
}
.cn-row:hover { border-color: var(--rule-strong); background: var(--surface); box-shadow: var(--shadow-1); }
.cn-row .ct-avatar { width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: var(--w-bold); color: #fff; }
.cn-row-id { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.cn-row-id b { font-size: var(--t-12); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-row-em { font-size: var(--t-11); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-chan-pill { font-size: 10px; font-weight: var(--w-semibold); color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--rule); border-radius: 999px; padding: 1px 7px; white-space: nowrap; }
.cn-row-ord { font-size: var(--t-11); font-weight: var(--w-semibold); }
.cn-ord-yes { color: var(--success); }
.cn-ord-no { color: var(--ink-4); }
.cn-row-when { font-size: var(--t-11); color: var(--ink-4); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ─── toolbar ─── */
.hq2-crm-toolbar {
  height: 52px;
  flex: 0 0 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  gap: var(--s-3);
}
.hq2-crm-toolbar .tb-left,
.hq2-crm-toolbar .tb-right { display: flex; align-items: center; gap: var(--s-2); }

/* ════════════════════════════════════════════════════════════════════
   SEARCH BAR — canonical shared control
   ────────────────────────────────────────────────────────────────────
   One pill-shaped input for every search-by-text surface in mise:
   pipeline, comms inbox, CRM toolbar, items list (recipes/products),
   etc. Soft white, subtle gold focus ring, gold-tinted icon on focus,
   optional <kbd>/</kbd> hint chip on the right.

   Class names cover both the new canonical (.hq2-search) and the
   legacy aliases the existing markup already uses (.tb-search,
   .hq2-items-search) so we don't have to churn HTML across the app.
   ──────────────────────────────────────────────────────────────────── */
.hq2-search,
.tb-search,
.hq2-items-search {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  color: var(--ink, #1A1A4D);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  min-width: 0;
}
.hq2-search:hover,
.tb-search:hover,
.hq2-items-search:hover {
  border-color: rgba(0, 0, 0, 0.16);
}
.hq2-search:focus-within,
.tb-search:focus-within,
.hq2-items-search:focus-within {
  border-color: rgba(200, 169, 110, 0.55);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, 0.14);
}
.hq2-search > svg,
.tb-search > svg,
.hq2-items-search > svg {
  color: var(--ink-3, #6E7088);
  flex-shrink: 0;
  transition: color 0.15s ease;
}
.hq2-search:focus-within > svg,
.tb-search:focus-within > svg,
.hq2-items-search:focus-within > svg {
  color: var(--tc-gold-deep, #8E6C2E);
}
.hq2-search > input,
.tb-search > input,
.hq2-items-search > input,
.hq2-items-search .hq2-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1A1A4D);
  letter-spacing: -0.005em;
}
.hq2-search > input::placeholder,
.tb-search > input::placeholder,
.hq2-items-search > input::placeholder,
.hq2-items-search .hq2-input::placeholder {
  color: var(--ink-3, #6E7088);
  font-weight: 500;
}
.hq2-search-kbd,
.tb-search-kbd {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.06);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.hq2-crm-toolbar .tb-divider { width: 1px; height: 22px; background: var(--rule); margin: 0 var(--s-1); }

.hq2-crm-toolbar .tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 10px;
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  transition: background .15s, border-color .15s, color .15s;
}
.hq2-crm-toolbar .tb-btn:hover { background: var(--surface-2); border-color: var(--rule-strong); color: var(--ink); }
.hq2-crm-toolbar .tb-btn b { font-weight: var(--w-semibold); color: var(--ink); }
.hq2-crm-toolbar .tb-btn-primary {
  background: var(--tc-navy);
  border-color: var(--tc-navy);
  color: #fff;
}
.hq2-crm-toolbar .tb-btn-primary:hover { background: var(--tc-navy-soft); border-color: var(--tc-navy-soft); color: #fff; }
.hq2-crm-toolbar .tb-btn-primary b { color: #fff; }

.hq2-crm-toolbar .tb-view-toggle {
  display: flex;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
}
.hq2-crm-toolbar .tb-view-toggle .tv {
  width: 30px;
  height: 30px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  font-size: 14px;
  display: grid;
  place-items: center;
}
.hq2-crm-toolbar .tb-view-toggle .tv:hover { background: var(--surface-2); color: var(--ink); }
.hq2-crm-toolbar .tb-view-toggle .tv.is-active {
  background: var(--tc-navy);
  color: #fff;
}

.hq2-crm-toolbar .tb-count {
  font-size: var(--t-12);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  margin-right: var(--s-1);
}

/* ── "same treatment" pill polish — scoped to the CRM toolbar so the
   shared search/button controls elsewhere are untouched (customers-
   preview.html). Rounds the search box, sort/export/+New buttons, and
   turns the view toggle into a soft segmented pill. ── */
.hq2-crm-toolbar .tb-search { height: 34px; border-radius: var(--r-pill); background: var(--surface-2); padding: 0 12px; }
.hq2-crm-toolbar .tb-btn { height: 32px; border-radius: var(--r-pill); padding: 0 13px; }
.hq2-crm-toolbar .tb-view-toggle {
  gap: 2px;
  padding: 2px;
  background: var(--surface-2);
  border-color: var(--rule);
  border-radius: var(--r-pill);
}
.hq2-crm-toolbar .tb-view-toggle .tv { width: auto; height: 26px; padding: 0 11px; border-radius: var(--r-pill); }
.hq2-crm-toolbar .tb-view-toggle .tv.is-active {
  background: var(--surface);
  color: var(--tc-navy);
  box-shadow: var(--shadow-1);
}

/* ─── bulk action bar ─── */
.hq2-crm-bulkbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  height: 42px;
  padding: 0 var(--s-5);
  background: var(--tc-navy);
  color: #fff;
  border-bottom: 1px solid var(--tc-navy-deep);
  animation: bbSlideIn .18s ease-out;
}
/* A plain `display:flex` above out-specifies the UA `[hidden]{display:none}`
   rule, so the bar leaked visible ("0 selected …") at zero selection even
   though JS sets `.hidden = true`. Restore the attribute's authority. */
.hq2-crm-bulkbar[hidden] { display: none; }
@keyframes bbSlideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.hq2-crm-bulkbar .bb-count { font-size: var(--t-12); font-weight: var(--w-medium); }
.hq2-crm-bulkbar .bb-count b { font-weight: var(--w-bold); margin-right: 4px; }
.hq2-crm-bulkbar .bb-actions { display: flex; gap: 6px; flex: 1; }
.hq2-crm-bulkbar .bb-btn {
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #fff;
  border-radius: var(--r-md);
  height: 28px;
  padding: 0 10px;
  font-size: var(--t-12);
  font-weight: var(--w-medium);
}
.hq2-crm-bulkbar .bb-btn:hover:not(:disabled) { background: rgba(255, 255, 255, .22); }
.hq2-crm-bulkbar .bb-btn:disabled { opacity: .45; cursor: not-allowed; }
.hq2-crm-bulkbar .bb-btn-danger:not(:disabled) { background: rgba(179, 58, 26, .85); border-color: rgba(255, 255, 255, .28); }
.hq2-crm-bulkbar .bb-clear {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  opacity: .7;
}
.hq2-crm-bulkbar .bb-clear:hover { opacity: 1; background: rgba(255, 255, 255, .1); }

/* ─── body (table or pipeline) ─── */
.hq2-crm-body {
  flex: 1;
  overflow-y: auto;
  background: var(--bg);
}

/* ─── customer table ─── */
.hq2-crm-table {
  background: var(--surface);
  font-size: var(--t-13);
}
.hq2-crm-table .ct-head,
.hq2-crm-table .ct-row {
  display: grid;
  grid-template-columns: 36px 1.6fr 110px 100px 80px 110px 1fr;
  align-items: center;
}
.hq2-crm-table .ct-head {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  height: 36px;
  font-size: var(--t-11);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-crm-table .ct-head .ct-cell { padding: 0 var(--s-3); }
.hq2-crm-table .ct-head .is-sortable { cursor: pointer; user-select: none; }
.hq2-crm-table .ct-head .is-sortable:hover { color: var(--ink); }

.hq2-crm-table .ct-row {
  border-bottom: 1px solid var(--rule);
  height: 52px;
  background: var(--surface);
  cursor: pointer;
  transition: background .12s;
}
.hq2-crm-table .ct-row:hover { background: var(--surface-2); }
.hq2-crm-table .ct-row.is-selected { background: rgba(27, 26, 107, .04); }
.hq2-crm-table .ct-row.is-open { background: rgba(27, 26, 107, .07); box-shadow: inset 3px 0 0 var(--tc-navy); }

.hq2-crm-table .ct-cell {
  padding: 0 var(--s-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-crm-table .ct-cell.is-right { text-align: right; }

/* per-cell tweaks */
.hq2-crm-table .ct-cell-check { padding: 0 var(--s-2); }
.hq2-crm-table .ct-cell-check input { cursor: pointer; }
.hq2-crm-table .ct-cell-name { display: flex; align-items: center; gap: var(--s-2); min-width: 0; }
.hq2-crm-table .ct-namebox { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.hq2-crm-table .ct-nm { color: var(--ink); font-weight: var(--w-semibold); font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-crm-table .ct-em { color: var(--ink-3); font-size: var(--t-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-crm-table .ct-mute { color: var(--ink-4); }
/* Last-order recency (customers-preview.html): calm grey recent, amber
   slipping (~21d+), red lapsed (~60d+). */
.hq2-crm-table .ct-cell-last { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hq2-crm-table .ct-cell.is-warn   { color: var(--warning); }
.hq2-crm-table .ct-cell.is-danger { color: var(--danger); }

.hq2-crm-table .ct-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: var(--w-black);
  flex-shrink: 0;
}

.hq2-crm-table .ct-cell-tags { display: flex; justify-content: flex-end; }
.hq2-crm-table .ct-tags { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.hq2-crm-table .ct-tag {
  font-size: var(--t-10);
  font-weight: var(--w-semibold);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.hq2-crm-table .ct-tag.is-sub { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
.hq2-crm-table .ct-tag.is-pt  { background: var(--success-bg); color: var(--success); border-color: rgba(46, 134, 87, .25); }
.hq2-crm-table .ct-tag-empty { color: var(--ink-4); font-size: var(--t-12); }

/* tnum cells use tabular figures */
.tnum, .hq2-crm-table .tnum { font-variant-numeric: tabular-nums; }

/* skeleton rows */
.hq2-crm-table .ct-row.is-skel { cursor: default; pointer-events: none; }
.hq2-crm-table .skel {
  background: linear-gradient(90deg, var(--surface-2) 0%, rgba(15,12,32,.06) 50%, var(--surface-2) 100%);
  background-size: 200% 100%;
  animation: skelShimmer 1.4s linear infinite;
  border-radius: 4px;
}
.hq2-crm-table .skel-box    { width: 14px; height: 14px; }
.hq2-crm-table .skel-circle { width: 28px; height: 28px; border-radius: 50%; }
.hq2-crm-table .skel-text   { height: 11px; }
.hq2-crm-table .skel-pill   { width: 60px; height: 16px; border-radius: 99px; }
@keyframes skelShimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

/* ─── stage pills (used in table + drawer) ─── */
.stage-pill {
  display: inline-block;
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .03em;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  white-space: nowrap;
  text-transform: lowercase;
}
.stage-lead       { background: rgba(155, 155, 175, .14); color: #6B6B85; }
.stage-new        { background: var(--info-bg); color: var(--info); }
.stage-active     { background: var(--info-bg); color: var(--info); }
.stage-repeat     { background: var(--info-bg); color: var(--info); }
.stage-loyal      { background: var(--success-bg); color: var(--success); }
.stage-vip        { background: rgba(200, 169, 110, .18); color: var(--tc-gold-dark); }
.stage-subscriber { background: #EDE9FE; color: #5B21B6; }
.stage-pt         { background: var(--success-bg); color: var(--success); }
.stage-atRisk     { background: var(--warning-bg); color: var(--warning); }
.stage-lapsed     { background: var(--danger-bg); color: var(--danger); }
.stage-archived   { background: var(--surface-2); color: var(--ink-4); border: 1px solid var(--rule); }

/* ─── pipeline (kanban) view ─── */
.hq2-crm-pipeline {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 280px;
  gap: var(--s-3);
  padding: var(--s-4);
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.pl-lane {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.pl-lane > header {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--ink);
  border-bottom: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
}
.pl-lane > header span {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-11);
  color: var(--ink-3);
  font-weight: var(--w-medium);
}
.pl-lane.stage-vip > header     { box-shadow: inset 3px 0 0 var(--tc-gold-dark); }
.pl-lane.stage-loyal > header   { box-shadow: inset 3px 0 0 var(--success); }
.pl-lane.stage-atRisk > header  { box-shadow: inset 3px 0 0 var(--warning); }
.pl-lane.stage-lapsed > header  { box-shadow: inset 3px 0 0 var(--danger); }
.pl-cards {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pl-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  cursor: pointer;
  transition: border-color .15s, transform .1s;
}
.pl-card:hover { border-color: var(--tc-navy); transform: translateY(-1px); }
.pl-name { display: flex; align-items: center; gap: 8px; font-size: var(--t-12); font-weight: var(--w-semibold); color: var(--ink); margin-bottom: 4px; }
.pl-name .ct-avatar { width: 22px; height: 22px; font-size: 10px; }
.pl-meta { font-size: var(--t-10); color: var(--ink-3); display: flex; gap: 4px; padding-left: 30px; }
.pl-empty { color: var(--ink-4); font-size: var(--t-11); padding: var(--s-3); text-align: center; }
.pl-more  { color: var(--ink-4); font-size: var(--t-11); padding: var(--s-2); text-align: center; }

/* ─── empty state ─── */
.hq2-crm-empty {
  padding: 60px var(--s-5);
  text-align: center;
  color: var(--ink-3);
}
.hq2-crm-empty .big { font-size: 38px; color: var(--ink-4); margin-bottom: var(--s-3); }
.hq2-crm-empty h3 { font-family: var(--font-display); font-size: var(--t-16); font-weight: var(--w-bold); color: var(--ink); margin-bottom: 4px; }
.hq2-crm-empty p { font-size: var(--t-13); margin-bottom: var(--s-4); }

/* ─── detail drawer (right) ─── */
.hq2-crm-drawer {
  position: absolute;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 90vw;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: var(--shadow-3);
  transform: translateX(100%);
  transition: transform .25s cubic-bezier(.32, .72, 0, 1);
  z-index: 20;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
}
.hq2-crm.drawer-open .hq2-crm-drawer { transform: translateX(0); }
.hq2-crm-drawer .drawer-empty {
  padding: 40px var(--s-5);
  text-align: center;
  color: var(--ink-4);
  font-size: var(--t-13);
}

.dr-head {
  position: relative;
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.dr-close {
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  font-size: 13px;
  display: grid;
  place-items: center;
}
.dr-close:hover { background: var(--rule); color: var(--ink); }

.dr-id { display: flex; align-items: center; gap: var(--s-3); }
.dr-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 16px;
  flex-shrink: 0;
}
.dr-id-text h2 {
  font-family: var(--font-display);
  font-size: var(--t-18);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin: 0;
  line-height: 1.2;
}
.dr-id-sub { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.dr-contact {
  display: flex;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin-top: var(--s-3);
  font-size: var(--t-12);
}
.dr-contact a {
  color: var(--ink-2);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dr-contact a:hover { color: var(--tc-navy); }
.dr-contact span { color: var(--ink-4); font-size: 11px; }

/* drawer stats row */
.dr-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dr-stat {
  background: var(--surface);
  padding: var(--s-3) var(--s-3);
  text-align: center;
}
.dr-stat-lbl {
  font-size: var(--t-10);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
  margin-bottom: 2px;
}
.dr-stat-val {
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: var(--w-bold);
  color: var(--ink);
}

/* drawer predictive row (LTV projection + churn meter + cadence) */
.dr-predict {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border-bottom: 1px solid var(--rule);
}
.dr-predict-cell {
  background: var(--surface-2);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.dr-predict-lbl {
  font-size: var(--t-10);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.dr-predict-val {
  font-family: var(--font-display);
  font-size: var(--t-15);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.dr-churn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.dr-churn-track {
  flex: 1;
  height: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  overflow: hidden;
}
.dr-churn-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .3s ease;
}
.dr-churn.is-ok     .dr-churn-fill { background: var(--success); }
.dr-churn.is-warn   .dr-churn-fill { background: var(--warning); }
.dr-churn.is-danger .dr-churn-fill { background: var(--danger);  }
.dr-churn-pct {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: var(--w-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* saved segments group on the rail */
.hq2-crm-rail .seg-group-saved .seg-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding-right: var(--s-3);
}
.hq2-crm-rail .seg-saved-count {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  color: var(--ink-4);
  background: var(--surface-2);
  padding: 1px 6px;
  border-radius: var(--r-pill);
  text-transform: none;
  letter-spacing: 0;
}
.hq2-crm-rail .rail-new:not(:disabled) {
  color: var(--ink);
  cursor: pointer;
}
.hq2-crm-rail .rail-new:not(:disabled):hover {
  background: var(--surface-2);
  border-color: var(--rule-strong);
}

/* drawer actions */
.dr-actions {
  display: flex;
  gap: 6px;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.dr-act {
  font-size: var(--t-12);
  color: var(--ink-2);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--surface);
  font-weight: var(--w-medium);
}
.dr-act:hover { background: var(--surface-2); color: var(--ink); border-color: var(--rule-strong); }

/* drawer tabs */
.dr-tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.dr-tab {
  padding: var(--s-3) var(--s-3);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dr-tab:hover { color: var(--ink); }
.dr-tab.is-active { color: var(--tc-navy); border-bottom-color: var(--tc-navy); font-weight: var(--w-semibold); }
.dr-tab-n {
  background: var(--surface-2);
  color: var(--ink-3);
  padding: 0 6px;
  border-radius: var(--r-pill);
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.dr-tab.is-active .dr-tab-n { background: rgba(27, 26, 107, .14); color: var(--tc-navy); }

/* drawer tab body */
.dr-tab-body {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.dr-fact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
}
.dr-fact-grid > div { display: flex; flex-direction: column; gap: 2px; }
.dr-fact-grid > div b { font-size: var(--t-10); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-bold); }
.dr-fact-grid > div span { font-size: var(--t-13); color: var(--ink); font-weight: var(--w-medium); }

.dr-card {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dr-card-lbl { font-size: var(--t-10); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-bold); }
.dr-pills { display: flex; flex-wrap: wrap; gap: 4px; }
.dr-pill {
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: var(--surface);
  color: var(--ink-2);
  border: 1px solid var(--rule);
}

.dr-sub-card { background: #EDE9FE; border-color: #DDD6FE; }
.dr-sub-card .dr-card-lbl { color: #5B21B6; }
.dr-sub-plan { font-family: var(--font-display); font-size: var(--t-15); font-weight: var(--w-bold); color: #2E1065; }
.dr-sub-meta { font-size: var(--t-11); color: #5B21B6; }

/* ═══ enriched CRM drawer cards (drawer-preview.html) ═══
   Loyalty · Referrals · Reviews · Acquisition — layered on the existing
   .dr-card frame; the "hot" variant gets a warm gold hairline. */
.dr-card.dr-card-hot { border-color: rgba(200, 169, 110, .35); background: var(--surface); }
.dr-card .dr-card-lbl { display: flex; align-items: center; justify-content: space-between; }
.dr-card .dr-card-body { display: flex; flex-direction: column; gap: 4px; }

/* Loyalty */
.dr-loy { display: flex; align-items: baseline; gap: 10px; }
.dr-loy-coins { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-24); color: var(--tc-gold-dark); font-variant-numeric: tabular-nums; }
.dr-loy-coins .u { font-size: var(--t-12); color: var(--ink-4); font-weight: var(--w-semibold); }
.dr-loy-sub { font-size: var(--t-11); color: var(--ink-4); margin-left: auto; text-align: right; line-height: 1.35; }
.dr-loy-ledger { margin-top: 8px; border-top: 1px dashed var(--rule); padding-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.dr-loy-ledger-loading, .dr-loy-ledger-empty { font-size: var(--t-11); color: var(--ink-4); }
.dr-loy-ev { display: flex; justify-content: space-between; gap: 8px; font-size: var(--t-11); color: var(--ink-3); }
.dr-loy-ev span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-loy-ev b { font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.dr-loy-ev b.pos { color: var(--success); }
.dr-loy-ev b.neg { color: var(--danger); }

/* Referrals + Acquisition key/value rows */
.dr-refrow { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: var(--t-12); padding: 3px 0; }
.dr-refrow + .dr-refrow { border-top: 1px dashed var(--rule); }
.dr-refrow .k { color: var(--ink-4); }
.dr-refrow .v { font-weight: var(--w-semibold); font-variant-numeric: tabular-nums; text-align: right; }
.dr-refrow .v.dr-ref-good { color: var(--success); }
.dr-refrow .v.dr-ref-gold { color: var(--tc-gold-dark); }
.dr-refrow .v.dr-mut { color: var(--ink-4); font-weight: var(--w-medium); }
.dr-ref-code { font-family: ui-monospace, Menlo, monospace; background: var(--surface-2); border: 1px solid var(--rule); border-radius: 6px; padding: 1px 7px; font-size: var(--t-11); color: var(--ink-2); }

/* Reviews */
.dr-rv { display: flex; align-items: center; gap: 10px; }
.dr-rv-avg { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--t-18); }
.dr-rv-stars { color: var(--tc-gold); font-size: 15px; letter-spacing: 1px; }
.dr-rv-n { font-size: var(--t-11); color: var(--ink-4); }
.dr-rv-quote { margin-top: 8px; font-size: var(--t-12); color: var(--ink-2); font-style: italic; border-left: 3px solid rgba(200, 169, 110, .4); padding-left: 9px; }
.dr-rv-loading, .dr-rv-empty { font-size: var(--t-12); color: var(--ink-4); }

/* Header source + SMS pills (drawer-preview.html .pill.src / .pill.sms-ok).
   These sit next to the existing stage-pill; reuse a lightweight .pill base
   scoped to the CRM drawer + detail hero so they don't collide globally. */
.dr-id-sub .pill, .hq2-cust-hero-pills .pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--t-11); font-weight: var(--w-semibold);
  padding: 2px 9px; border-radius: var(--r-pill);
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink-3);
}
.dr-id-sub .pill.src, .hq2-cust-hero-pills .pill.src { background: var(--info-bg); color: var(--info); border-color: rgba(27, 93, 216, .2); }
.dr-id-sub .pill.sms-ok, .hq2-cust-hero-pills .pill.sms-ok { background: var(--success-bg); color: var(--success); border-color: rgba(46, 134, 87, .22); }

.dr-empty-row { font-size: var(--t-12); color: var(--ink-4); padding: var(--s-2) 0; }

/* drawer order rows */
.dr-order {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-2);
  align-items: center;
  font-size: var(--t-12);
  padding: 6px 0;
  border-top: 1px solid var(--rule);
}
.dr-order:first-of-type { border-top: none; }
.dr-order-when { color: var(--ink-2); }
.dr-order-status { font-size: var(--t-10); }
.dr-order-total { color: var(--ink); font-weight: var(--w-semibold); }

/* drawer AI signal card (phase 1B-2) */
.dr-ai-card {
  position: relative;
  background: linear-gradient(180deg, rgba(45, 47, 168, .04), rgba(45, 47, 168, .01));
  border-color: rgba(45, 47, 168, .18);
}
.dr-ai-card .dr-card-lbl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--tc-navy);
}
.dr-ai-score-btn {
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: var(--r-sm);
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 4px 10px;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.dr-ai-score-btn:hover  { background: var(--tc-navy-soft); transform: translateY(-1px); }
.dr-ai-score-btn:active { transform: translateY(0); }
.dr-ai-empty {
  font-size: var(--t-12);
  color: var(--ink-3);
  padding: 6px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.dr-ai-empty.dr-ai-err { color: var(--danger); }
.dr-ai-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid var(--rule-strong);
  border-top-color: var(--tc-navy);
  border-radius: 50%;
  animation: drAiSpin .8s linear infinite;
}
@keyframes drAiSpin { to { transform: rotate(360deg); } }
.dr-ai-action {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: var(--t-13);
  color: var(--ink);
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.dr-ai-action b {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
}
.dr-ai-pri {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.dr-ai-pri-high   { background: var(--danger-bg);  color: var(--danger); }
.dr-ai-pri-medium { background: var(--warning-bg); color: var(--warning); }
.dr-ai-pri-low    { background: var(--success-bg); color: var(--success); }
.dr-ai-reason {
  font-size: var(--t-12);
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 8px;
}
.dr-ai-draft {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-2) var(--s-3);
  position: relative;
  margin-top: 6px;
}
.dr-ai-draft-lbl {
  font-size: var(--t-10);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
  margin-bottom: 4px;
}
.dr-ai-draft-body {
  font-size: var(--t-12);
  color: var(--ink);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.dr-ai-copy {
  position: absolute;
  top: 6px;
  right: 6px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  font-size: var(--t-10);
  color: var(--ink-2);
  padding: 2px 8px;
  cursor: pointer;
}
.dr-ai-copy:hover { background: var(--rule); color: var(--ink); }
.dr-ai-foot {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
.dr-ai-meta {
  font-size: var(--t-10);
  color: var(--ink-4);
  letter-spacing: .03em;
}

/* drawer activity timeline */
.dr-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.dr-tline { display: flex; gap: var(--s-3); align-items: flex-start; }
.dr-tline-glyph {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-size: 13px;
  flex-shrink: 0;
  margin-top: 2px;
}
.dr-tline-body { flex: 1; min-width: 0; }
.dr-tline-when { font-size: var(--t-10); letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); font-weight: var(--w-bold); }
.dr-tline-label { font-size: var(--t-12); color: var(--ink); margin-top: 2px; font-weight: var(--w-medium); }

/* drawer notes */
#hq2CrmDrNotes {
  width: 100%;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  padding: var(--s-3);
  font-size: var(--t-13);
  color: var(--ink);
  resize: vertical;
  min-height: 100px;
}
#hq2CrmDrNotes:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
.dr-notes-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.dr-notes-status { font-size: var(--t-11); color: var(--ink-3); }

/* ─── responsive: collapse rail under 1100px, drawer to full-width under 720px ─── */
@media (max-width: 1100px){
  .hq2-crm { grid-template-columns: 64px 1fr; }
  .hq2-crm-rail .seg-label,
  .hq2-crm-rail .seg-count,
  .hq2-crm-rail .seg-group-head,
  .hq2-crm-rail .rail-head span { display: none; }
  .hq2-crm-rail .seg-row { justify-content: center; }
  .hq2-crm-rail .seg-row .seg-icon { width: auto; font-size: 16px; }
  .hq2-crm-rail .rail-head { padding: var(--s-3); justify-content: center; }
  .hq2-crm-table .ct-head,
  .hq2-crm-table .ct-row { grid-template-columns: 36px 1.6fr 100px 90px 70px 100px 1fr; }
}
@media (max-width: 880px){
  .hq2-crm { grid-template-columns: 1fr; }
  .hq2-crm-rail { display: none; }
  .hq2-crm-toolbar .tb-search { width: 200px; }
  .hq2-crm-toolbar .tb-divider,
  .hq2-crm-toolbar .tb-view-toggle { display: none; }
  .hq2-crm-table .ct-head,
  .hq2-crm-table .ct-row { grid-template-columns: 32px 2fr 80px 80px 90px; }
  .hq2-crm-table .ct-cell-orders,
  .hq2-crm-table .ct-cell-tags { display: none; }
  .hq2-crm-drawer { width: 100%; max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WORKFLOWS MODULE  (HQ v2 phase 1B-3a)
   ═════════════════════════════════════════════════════════════════════════ */

/* engine status banner — red when disabled to make it obvious that
   no drips are firing; green when armed. */
.wf-engine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  border: 1px solid;
  transition: background .2s, border-color .2s;
}
.wf-engine.is-off {
  background: var(--danger-bg);
  border-color: rgba(179, 58, 26, .25);
  color: var(--danger);
}
.wf-engine.is-on {
  background: var(--success-bg);
  border-color: rgba(46, 134, 87, .25);
  color: var(--success);
}
.wf-engine-skel {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.wf-engine-state {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
}
.wf-engine-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.wf-engine.is-off .wf-engine-dot { background: var(--danger); }
.wf-engine.is-on  .wf-engine-dot { background: var(--success); animation: wfPulse 2s ease-out infinite; }
@keyframes wfPulse {
  0% { box-shadow: 0 0 0 0 currentColor; }
  70% { box-shadow: 0 0 0 8px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.wf-engine-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wf-engine-text b {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-14);
}
.wf-engine-text span {
  color: inherit;
  opacity: .8;
  font-size: var(--t-12);
}
.wf-engine-toggle {
  background: var(--surface);
  border: 1.5px solid currentColor;
  color: inherit;
  border-radius: var(--r-md);
  padding: 8px 16px;
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  text-transform: lowercase;
  cursor: pointer;
  transition: background .15s, transform .1s;
  flex-shrink: 0;
}
.wf-engine-toggle:hover { background: rgba(15, 12, 32, .04); transform: translateY(-1px); }
.wf-engine.is-on .wf-engine-toggle { background: var(--surface); }

/* templates strip */
.wf-templates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-6);
}
.wf-tpl {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  transition: border-color .15s, box-shadow .15s;
}
.wf-tpl:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-1); }
.wf-tpl.is-installed { background: var(--surface-2); }
.wf-tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}
.wf-tpl-name {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-14);
  color: var(--ink);
}
.wf-tpl-pill {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--success);
  background: var(--success-bg);
  padding: 2px 8px;
  border-radius: var(--r-pill);
}
.wf-tpl-desc {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}
.wf-tpl-meta {
  font-size: var(--t-10);
  color: var(--ink-4);
  letter-spacing: .03em;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.wf-tpl-btn {
  margin-top: auto;
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  cursor: pointer;
  align-self: flex-start;
  transition: background .15s;
}
.wf-tpl-btn:hover    { background: var(--tc-navy-soft); }
.wf-tpl-btn:disabled { opacity: .5; cursor: not-allowed; }

/* installed list */
.wf-installed {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.wf-row {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-4);
  align-items: center;
}
.wf-row.is-active {
  border-color: var(--success);
  box-shadow: inset 3px 0 0 var(--success);
}
.wf-row-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.wf-row-head b {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: var(--t-14);
  color: var(--ink);
}
.wf-row-trigger {
  font-size: var(--t-10);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-4);
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  font-weight: var(--w-bold);
}
.wf-row-desc {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.4;
  margin: 4px 0 6px 0;
}
.wf-row-steps {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  font-size: var(--t-11);
}
.wf-row-glyphs {
  font-family: var(--font-mono);
  letter-spacing: 6px;
  color: var(--ink-3);
}
.wf-row-stepcount {
  color: var(--ink-4);
}
.wf-row-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--t-11);
  color: var(--ink-3);
}
.wf-row-stats .wf-stat b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-bold);
  margin-right: 4px;
}
.wf-row-stats .wf-stat.is-danger b { color: var(--danger); }

.wf-toggle {
  border: 1.5px solid;
  border-radius: var(--r-md);
  padding: 6px 14px;
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  text-transform: lowercase;
  cursor: pointer;
  background: var(--surface);
  transition: background .15s, transform .1s;
}
.wf-toggle.is-off { border-color: var(--rule-strong); color: var(--ink-3); }
.wf-toggle.is-off:hover { background: var(--surface-2); }
.wf-toggle.is-on { border-color: var(--success); color: var(--success); background: var(--success-bg); }
.wf-toggle.is-on:hover { background: var(--surface); }

.wf-empty {
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-4);
  text-align: center;
  font-size: var(--t-12);
  color: var(--ink-3);
}
.wf-empty.wf-err { color: var(--danger); border-color: rgba(179, 58, 26, .35); }

@media (max-width: 880px){
  .wf-engine { flex-direction: column; align-items: stretch; }
  .wf-row { grid-template-columns: 1fr; gap: var(--s-2); }
  .wf-row-actions { align-self: flex-end; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIPELINE MODULE  (HQ v2 phase 1B-5)
   ─────────────────────────────────────────────────────────────────────────
   Catering kanban — full-bleed inside .hq2-page--crm so columns scroll
   independently and the toolbar/summary sticks to the top.
   ═════════════════════════════════════════════════════════════════════════ */

/* Hero — search docks on the right side of the friendly pastel hero. */
.hq2-pl-search {
  width: 280px;
  max-width: 100%;
}

/* KPI strip — counts per stage + total revenue. Same shape as the
   stage column tone-pills below so the hero, KPIs, and columns share
   a visual vocabulary. */
.hq2-pl-kpis {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  margin-bottom: var(--s-4);
}
@media (max-width: 1080px){ .hq2-pl-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hq2-pl-kpis { grid-template-columns: repeat(2, 1fr); } }
.hq2-pl-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  border-left: 3px solid transparent;
}
.hq2-pl-kpi-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-pl-kpi-val {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-pl-kpi.pl-tone-warn { border-left-color: var(--warning); }
.hq2-pl-kpi.pl-tone-info { border-left-color: var(--info); }
.hq2-pl-kpi.pl-tone-sub  { border-left-color: #5B21B6; }
.hq2-pl-kpi.pl-tone-ok   { border-left-color: var(--success); }
.hq2-pl-kpi.pl-tone-mute { border-left-color: var(--ink-3); }
.hq2-pl-kpi.pl-tone-bad  { border-left-color: var(--danger); }
.hq2-pl-kpi.pl-tone-gold { border-left-color: var(--tc-gold-dark); }
.hq2-pl-kpi.pl-tone-gold .hq2-pl-kpi-val { color: var(--tc-gold-dark); }

/* board — flows in normal page padding now (no longer full-bleed) */
.hq2-pl-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s-3);
  overflow-x: auto;
}
@media (max-width: 1080px){
  .hq2-pl-board {
    grid-template-columns: repeat(6, minmax(240px, 1fr));
  }
}
.pl-col {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  min-height: 320px;
  max-height: calc(100vh - 360px);
  overflow: hidden;
}
.pl-col > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.pl-col > header b {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: .02em;
}
.pl-col-count {
  font-variant-numeric: tabular-nums;
  font-size: var(--t-10);
  color: var(--ink-3);
  background: var(--surface);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-weight: var(--w-bold);
}
.pl-col.pl-tone-warn > header { box-shadow: inset 3px 0 0 var(--warning); }
.pl-col.pl-tone-info > header { box-shadow: inset 3px 0 0 var(--info); }
.pl-col.pl-tone-sub  > header { box-shadow: inset 3px 0 0 #5B21B6; }
.pl-col.pl-tone-ok   > header { box-shadow: inset 3px 0 0 var(--success); }
.pl-col.pl-tone-mute > header { box-shadow: inset 3px 0 0 var(--ink-3); }
.pl-col.pl-tone-bad  > header { box-shadow: inset 3px 0 0 var(--danger); }

.pl-col-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: background .15s;
}
.pl-col-body.is-over {
  background: rgba(45, 47, 168, .06);
  outline: 2px dashed var(--tc-navy);
  outline-offset: -4px;
}
.pl-empty {
  font-size: var(--t-11);
  color: var(--ink-4);
  text-align: center;
  padding: var(--s-4) var(--s-2);
  border: 1px dashed var(--rule);
  border-radius: var(--r-md);
}

/* card */
.pl-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  cursor: grab;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s, box-shadow .15s, transform .1s, opacity .15s;
}
.pl-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow-1); }
.pl-card:active { cursor: grabbing; }
.pl-card.is-dragging { opacity: .35; transform: scale(.97); }
.pl-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}
.pl-card-head b {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: var(--w-bold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.pl-card-quote {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--tc-gold-dark);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.pl-card-co {
  font-size: var(--t-11);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pl-card-meta {
  font-size: var(--t-11);
  color: var(--ink-3);
  display: flex;
  gap: 4px;
  align-items: center;
}
.pl-card-svc {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  background: var(--surface-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  border: 1px solid var(--rule);
}
.pl-card-date {
  font-size: var(--t-11);
  color: var(--ink-2);
  font-weight: var(--w-medium);
}
.pl-card-date.is-imminent { color: var(--danger); font-weight: var(--w-bold); }
.pl-card-date.is-soon     { color: var(--warning); font-weight: var(--w-bold); }
.pl-card-date.is-past     { color: var(--ink-4); text-decoration: line-through; }

.pl-card-foot {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.pl-card-foot a {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-3);
  text-decoration: none;
  font-size: 13px;
  transition: background .15s, color .15s;
}
.pl-card-foot a:hover {
  background: var(--surface);
  color: var(--tc-navy);
  border-color: var(--tc-navy);
}

/* responsive — collapse columns to a horizontal scroll under 1100px */
@media (max-width: 1100px){
  .hq2-pl-board {
    grid-template-columns: repeat(6, 280px);
    grid-auto-flow: column;
    grid-auto-columns: 280px;
  }
  .hq2-pl-summary { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px){
  .hq2-pl-board { grid-template-columns: repeat(6, 240px); grid-auto-columns: 240px; }
  .hq2-pl-search { width: 180px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   COHORTS MODULE  (HQ v2 phase 1B-6)
   ─────────────────────────────────────────────────────────────────────────
   Triangular retention heatmap.
   ═════════════════════════════════════════════════════════════════════════ */

.hq2-ch-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 0;
  overflow: hidden;
}
.hq2-ch-empty {
  padding: var(--s-7) var(--s-5);
  text-align: center;
  color: var(--ink-3);
  font-size: var(--t-13);
}
.hq2-ch-empty.hq2-ch-err { color: var(--danger); }

.hq2-ch-table-scroll {
  overflow-x: auto;
  max-width: 100%;
}
.hq2-ch-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
  table-layout: fixed;
  min-width: 720px;
}
.hq2-ch-table thead th {
  position: sticky;
  top: 0;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  padding: var(--s-2) var(--s-2);
  font-size: var(--t-10);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
  text-align: center;
  z-index: 1;
}
.hq2-ch-table th.ch-cohort-h { text-align: left; padding-left: var(--s-3); width: 110px; }
.hq2-ch-table th.ch-size-h   { width: 64px; }
.hq2-ch-table th.ch-off-h    { min-width: 56px; }

.hq2-ch-table tbody tr { border-bottom: 1px solid var(--rule); }
.hq2-ch-table tbody tr:last-child { border-bottom: none; }

.hq2-ch-table td {
  padding: 6px 4px;
  text-align: center;
  font-weight: var(--w-medium);
  color: var(--ink);
  border-right: 1px solid rgba(15,12,32,.04);
}
.hq2-ch-table td.ch-cohort {
  text-align: left;
  padding-left: var(--s-3);
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  color: var(--ink);
  font-size: var(--t-12);
}
.hq2-ch-table td.ch-size {
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-ch-table td.ch-cell-na {
  background: repeating-linear-gradient(45deg, var(--surface) 0 4px, var(--surface-2) 4px 8px);
}
/* heat tones — low to high */
.hq2-ch-table td.ch-tone-zero   { color: var(--ink-4); }
.hq2-ch-table td.ch-tone-low    { background: rgba(45, 47, 168, .08); color: var(--tc-navy); }
.hq2-ch-table td.ch-tone-mid    { background: rgba(45, 47, 168, .22); color: var(--tc-navy-deep); }
.hq2-ch-table td.ch-tone-high   { background: rgba(45, 47, 168, .42); color: #fff; font-weight: var(--w-bold); }
.hq2-ch-table td.ch-tone-origin { background: var(--tc-navy); color: var(--tc-gold-light); font-weight: var(--w-bold); }

.hq2-ch-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: var(--t-10);
  color: var(--ink-3);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: var(--w-bold);
}
.hq2-ch-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hq2-ch-legend .lg {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}
.hq2-ch-legend .lg.ch-tone-origin { background: var(--tc-navy); }
.hq2-ch-legend .lg.ch-tone-high   { background: rgba(45, 47, 168, .42); }
.hq2-ch-legend .lg.ch-tone-mid    { background: rgba(45, 47, 168, .22); }
.hq2-ch-legend .lg.ch-tone-low    { background: rgba(45, 47, 168, .08); border: 1px solid var(--rule); }
.hq2-ch-legend .lg.ch-tone-zero   { background: var(--surface); border: 1px solid var(--rule); }

/* ═══════════════════════════════════════════════════════════════════════════
   REFERRALS MODULE — status strip + top referrers + pairs table
   ═══════════════════════════════════════════════════════════════════════════ */
.hq2-rf-status-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  margin: calc(-1 * var(--s-3)) 0 var(--s-5);
}
.hq2-rf-schip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: var(--t-12);
  font-weight: var(--w-medium);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface);
  color: var(--ink-2);
}
.hq2-rf-schip b { font-variant-numeric: tabular-nums; }
.hq2-rf-schip.is-wait   { background: var(--warning-bg); color: var(--warning); border-color: rgba(184,134,11,.25); }
.hq2-rf-schip.is-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(179,58,26,.25); }
.hq2-rf-schip.is-good   { background: rgba(46,134,87,.10); color: var(--success); border-color: rgba(46,134,87,.22); }
.hq2-rf-schip.is-muted  { color: var(--ink-4); }

.hq2-rf-grid {
  display: grid;
  grid-template-columns: minmax(280px, 5fr) minmax(340px, 7fr);
  gap: var(--s-5);
  align-items: start;
}
@media (max-width: 900px){ .hq2-rf-grid { grid-template-columns: 1fr; } }
.hq2-rf-panel { min-width: 0; }

.hq2-rf-top {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hq2-rf-toprow {
  display: grid;
  grid-template-columns: 28px minmax(0,1fr) 64px auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.hq2-rf-toprow:last-child { border-bottom: 0; }
.hq2-rf-toprow[data-cid] { cursor: pointer; }
.hq2-rf-toprow[data-cid]:hover { background: var(--surface-2); }
.hq2-rf-toprow .ct-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: var(--w-bold); color: #fff;
}
.hq2-rf-topname { min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.hq2-rf-topname b { font-size: var(--t-13); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-rf-topsub { font-size: var(--t-11); color: var(--ink-4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-rf-topbar { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.hq2-rf-topbar-fill { display: block; height: 100%; border-radius: 3px; background: var(--tc-navy); }
.hq2-rf-topnums { font-size: var(--t-12); color: var(--ink-3); white-space: nowrap; text-align: right; }
.hq2-rf-topnums b { color: var(--ink); }

.hq2-rf-pairs {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow-x: auto;
}
.hq2-rf-pair {
  display: grid;
  grid-template-columns: minmax(0,1.3fr) minmax(0,1.3fr) 88px 96px 72px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-12);
  min-width: 560px;
}
.hq2-rf-pair:last-child { border-bottom: 0; }
.hq2-rf-pair[data-cid] { cursor: pointer; }
.hq2-rf-pair[data-cid]:hover { background: var(--surface-2); }
.hq2-rf-pair .is-right { text-align: right; }
.hq2-rf-pair-head {
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--surface-2);
  position: sticky; top: 0;
}
.hq2-rf-pair-head:hover { background: var(--surface-2); }
.hq2-rf-pairref { min-width: 0; display: flex; flex-direction: column; line-height: 1.25; overflow: hidden; }
.hq2-rf-pairref b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-rf-badge {
  display: inline-block;
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
.hq2-rf-badge.is-good   { background: rgba(46,134,87,.10); color: var(--success); border-color: rgba(46,134,87,.22); }
.hq2-rf-badge.is-wait   { background: var(--warning-bg); color: var(--warning); border-color: rgba(184,134,11,.25); }
.hq2-rf-badge.is-danger { background: var(--danger-bg); color: var(--danger); border-color: rgba(179,58,26,.25); }
.hq2-rf-badge.is-muted  { color: var(--ink-4); }

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW v2 — branded hero + range toggle + watch panels + signals
   ─────────────────────────────────────────────────────────────────────────
   Public-site visual language: Plus Jakarta heading + soft navy gradient
   with subtle gold radial overlays. Density stays Linear-tight inside;
   the hero is the only section that breathes a little.
   ═════════════════════════════════════════════════════════════════════════ */

/* Welcome hero */
.hq2-hero {
  position: relative;
  border-radius: var(--r-xl);
  padding: var(--s-7) var(--s-7) var(--s-6);
  margin-bottom: var(--s-5);
  color: #fff;
  background: linear-gradient(135deg, var(--tc-navy-deep) 0%, var(--tc-navy) 60%, var(--tc-navy-soft) 100%);
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 12px 36px -12px rgba(15, 12, 32, .3);
}
.hq2-hero .hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 60% 70% at 100% 0%, rgba(200, 169, 110, .25) 0%, transparent 60%),
    radial-gradient(ellipse 80% 50% at 0% 100%, rgba(79, 81, 212, .35) 0%, transparent 65%),
    radial-gradient(ellipse 30% 40% at 70% 50%, rgba(232, 200, 122, .12) 0%, transparent 70%);
}
.hq2-hero .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--s-7);
  align-items: end;
}
.hq2-hero .hero-text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.hq2-hero .hero-eye {
  font-family: var(--font-display);
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  color: rgba(232, 200, 122, .8);
  letter-spacing: .14em;
  text-transform: uppercase;
}
.hq2-hero h1 {
  font-family: var(--font-display);
  font-size: 38px;
  font-weight: var(--w-black);
  letter-spacing: -.02em;
  line-height: 1.05;
  color: #fff;
  margin: 0;
}
.hq2-hero .hero-sub {
  font-size: var(--t-14);
  color: rgba(255, 255, 255, .72);
  max-width: 480px;
  margin: 0;
}
.hq2-hero .hero-snap {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .12);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-width: 480px;
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hq2-hero .snap {
  background: linear-gradient(180deg, rgba(255, 255, 255, .08) 0%, rgba(255, 255, 255, .03) 100%);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.hq2-hero .snap-val {
  font-family: var(--font-display);
  font-size: var(--t-24);
  font-weight: var(--w-black);
  letter-spacing: -.01em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-hero .snap-lbl {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(232, 200, 122, .9);
  margin-top: 4px;
}

/* Range toggle */
.hq2-range {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
  width: max-content;
  margin-bottom: var(--s-5);
  position: relative;
}
.hq2-range .r {
  background: transparent;
  border: none;
  padding: 6px 18px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  letter-spacing: .02em;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.hq2-range .r:hover { color: var(--ink); }
.hq2-range .r.is-active {
  background: var(--tc-navy);
  color: #fff;
  box-shadow: 0 2px 8px rgba(27, 26, 107, .25);
}
.hq2-range .r-meta {
  font-size: var(--t-11);
  color: var(--ink-4);
  margin-left: var(--s-3);
  padding-right: var(--s-3);
}

/* Charts row — two charts side-by-side */
.hq2-charts {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-2);
}
@media (max-width: 1100px) { .hq2-charts { grid-template-columns: 1fr; } }
.hq2-chart-body {
  height: 220px;
  display: block;
  position: relative;
}
.hq2-chart-body .hq2-chart-empty,
.hq2-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--ink-4);
  font-size: var(--t-12);
}
.hq2-chart-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hq2-chart-svg .grid-line { stroke: var(--rule); stroke-width: 1; stroke-dasharray: 2 4; }
.hq2-chart-svg .axis-line { stroke: var(--rule-strong); stroke-width: 1; }
.hq2-chart-svg circle.dot-halo { fill: rgba(200, 169, 110, .3); }
.hq2-chart-svg circle.dot      { fill: var(--tc-gold-dark); stroke: var(--surface); stroke-width: 2; }
.hq2-bars-svg .bar             { fill: rgba(27, 26, 107, .65); transition: fill .15s; }
.hq2-bars-svg .bar:hover       { fill: var(--tc-navy); }
.hq2-bars-svg .bar.is-peak     { fill: var(--tc-gold-dark); }

/* Operational watch — 3-column */
.hq2-watch {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-3);
}
.hq2-signals {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1100px) {
  .hq2-watch { grid-template-columns: 1fr; }
  .hq2-signals { grid-template-columns: 1fr; }
}

.hq2-watch-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hq2-watch-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  color: var(--ink-2);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hq2-watch-head .watch-more {
  font-size: var(--t-10);
  color: var(--ink-4);
  text-decoration: none;
  text-transform: lowercase;
  letter-spacing: 0;
  font-weight: var(--w-medium);
}
.hq2-watch-head .watch-more:hover { color: var(--tc-navy); }
.hq2-watch-body {
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  flex: 1;
  min-height: 0;
}
.watch-loading {
  font-size: var(--t-11);
  color: var(--ink-4);
}
.watch-empty {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-12);
  color: var(--ink-3);
  padding: var(--s-2) 0;
}
.watch-empty-glyph {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--success-bg);
  color: var(--success);
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: var(--w-bold);
  flex-shrink: 0;
}

/* fulfillment row — label + bar + count */
.watch-row {
  display: grid;
  grid-template-columns: 130px 1fr 38px;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--t-12);
}
.watch-row .watch-label { color: var(--ink-2); }
.watch-row .watch-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.watch-row .watch-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink-3);
  transition: width .25s ease-out;
}
.watch-row .watch-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-bold);
  color: var(--ink);
}
.watch-row.tone-info  .watch-bar i { background: var(--info); }
.watch-row.tone-warn  .watch-bar i { background: var(--warning); }
.watch-row.tone-ok    .watch-bar i { background: var(--success); }
.watch-row.tone-mute  .watch-bar i { background: var(--ink-4); }

/* alert-style watch entry (stock + inbox) */
.watch-alert {
  border-left: 3px solid;
  padding: 6px var(--s-3);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.watch-alert.tone-warn   { border-left-color: var(--warning); background: var(--warning-bg); }
.watch-alert.tone-danger { border-left-color: var(--danger);  background: var(--danger-bg); }
.watch-alert.tone-info   { border-left-color: var(--info);    background: var(--info-bg); }
.watch-alert .watch-alert-title {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--ink);
}
.watch-alert.tone-warn   .watch-alert-title { color: var(--warning); }
.watch-alert.tone-danger .watch-alert-title { color: var(--danger); }
.watch-alert.tone-info   .watch-alert-title { color: var(--info); }
.watch-alert .watch-alert-sub {
  font-size: var(--t-11);
  color: var(--ink-2);
  line-height: 1.4;
  margin-top: 2px;
}

/* Customer signals */
.signal-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: var(--s-2);
  padding: 6px 0;
  font-size: var(--t-12);
}
.signal-row + .signal-row { border-top: 1px solid var(--rule); }
.signal-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 11px;
}
.signal-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 1px;
}
.signal-text b {
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-size: var(--t-12);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signal-text span {
  font-size: var(--t-10);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.signal-amt {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: var(--w-bold);
  color: var(--tc-gold-dark);
  font-variant-numeric: tabular-nums;
}
.signal-pill {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--warning);
  background: var(--warning-bg);
  padding: 1px 8px;
  border-radius: var(--r-pill);
}
.signal-row.signal-row-risk .signal-text span { color: var(--warning); }

/* Catering pipeline mini */
.hq2-pipe-mini {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-3);
}
@media (max-width: 1100px) { .hq2-pipe-mini { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px)  { .hq2-pipe-mini { grid-template-columns: 1fr; } }

.pipe-mini-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .15s, transform .1s, box-shadow .15s;
  position: relative;
  border-left-width: 3px;
}
.pipe-mini-card:hover { border-color: var(--rule-strong); transform: translateY(-1px); box-shadow: var(--shadow-1); }
.pipe-mini-card.pipe-tone-warn { border-left-color: var(--warning); }
.pipe-mini-card.pipe-tone-info { border-left-color: var(--info); }
.pipe-mini-card.pipe-tone-sub  { border-left-color: #5B21B6; }
.pipe-mini-card.pipe-tone-ok   { border-left-color: var(--success); }
.pipe-mini-card.pipe-tone-mute { border-left-color: var(--ink-4); }

.pipe-mini-stage {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 2px;
}
.pipe-mini-name {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: var(--w-bold);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipe-mini-co {
  font-size: var(--t-11);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pipe-mini-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: var(--s-1);
}
.pipe-mini-date {
  font-size: var(--t-11);
  color: var(--ink-2);
  font-weight: var(--w-medium);
}
.pipe-mini-date.is-imminent { color: var(--danger); font-weight: var(--w-bold); }
.pipe-mini-date.is-soon     { color: var(--warning); font-weight: var(--w-bold); }
.pipe-mini-date.is-past     { color: var(--ink-4); text-decoration: line-through; }
.pipe-mini-quote {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--tc-gold-dark);
  font-variant-numeric: tabular-nums;
}

/* Activity stream — richer row with status pill + tone */
body.hq2-app .hq2-activity { padding: 0; }
body.hq2-app .hq2-activity .hq2-activity-row {
  display: grid;
  grid-template-columns: 8px 1fr 80px 100px 60px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  border-top: 1px solid var(--rule);
  border-bottom: none;
}
body.hq2-app .hq2-activity .hq2-activity-row:first-child { border-top: none; }
.hq2-activity-glyph {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
}
.hq2-activity-row.tone-info  .hq2-activity-glyph { background: var(--info); }
.hq2-activity-row.tone-ok    .hq2-activity-glyph { background: var(--success); }
.hq2-activity-row.tone-warn  .hq2-activity-glyph { background: var(--warning); }
.hq2-activity-row.tone-mute  .hq2-activity-glyph { background: var(--ink-4); }
.hq2-activity-who {
  color: var(--ink);
  font-weight: var(--w-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-activity-total {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-bold);
  color: var(--ink);
  font-size: var(--t-13);
}
.hq2-activity-status {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: var(--surface-2);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  text-align: center;
}
.hq2-activity-row.tone-info  .hq2-activity-status { color: var(--info);    background: var(--info-bg); }
.hq2-activity-row.tone-ok    .hq2-activity-status { color: var(--success); background: var(--success-bg); }
.hq2-activity-row.tone-warn  .hq2-activity-status { color: var(--warning); background: var(--warning-bg); }
.hq2-activity-when {
  text-align: right;
  font-size: var(--t-11);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}

/* Hero responsive — stack snap below text on narrow screens */
@media (max-width: 1100px) {
  .hq2-hero { padding: var(--s-6) var(--s-5); }
  .hq2-hero h1 { font-size: 30px; }
  .hq2-hero .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .hq2-hero .hero-snap { min-width: 0; grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 720px) {
  .hq2-hero { padding: var(--s-5) var(--s-4); border-radius: var(--r-lg); }
  .hq2-hero h1 { font-size: 24px; }
  .hq2-hero .hero-snap { grid-template-columns: repeat(2, 1fr); }
  .hq2-hero .snap-val { font-size: var(--t-18); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1C-a — Segment builder modal · tag editor · bulk states
   ═════════════════════════════════════════════════════════════════════════ */

/* ── Segment builder modal ── */
.hq2-crm-builder-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .55);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 8vh var(--s-4);
  overflow-y: auto;
  animation: bldrFadeIn .15s ease-out;
}
.hq2-crm-builder-mask.is-on { display: flex; }
@keyframes bldrFadeIn { from { opacity: 0; } to { opacity: 1; } }

.hq2-crm-builder {
  background: var(--surface);
  border-radius: var(--r-xl);
  width: 100%;
  max-width: 680px;
  box-shadow: var(--shadow-pop);
  display: flex;
  flex-direction: column;
  max-height: 84vh;
  overflow: hidden;
  animation: bldrSlideIn .2s cubic-bezier(.32,.72,0,1);
}
@keyframes bldrSlideIn {
  from { transform: translateY(12px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.hq2-crm-builder .bldr-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.hq2-crm-builder .bldr-head h2 {
  font-family: var(--font-display);
  font-size: var(--t-18);
  font-weight: var(--w-bold);
  color: var(--ink);
  letter-spacing: -.01em;
}
.hq2-crm-builder .bldr-close {
  width: 28px;
  height: 28px;
  border: none;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-size: 13px;
}
.hq2-crm-builder .bldr-close:hover { background: var(--rule); color: var(--ink); }

.hq2-crm-builder .bldr-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-crm-builder .bldr-meta label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--t-10);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-crm-builder .bldr-meta input {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: var(--t-13);
  font-family: var(--font-ui);
  font-weight: var(--w-medium);
  color: var(--ink);
  background: var(--surface);
  letter-spacing: 0;
  text-transform: none;
}
.hq2-crm-builder .bldr-meta input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}

.hq2-crm-builder .bldr-conditions {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-crm-builder .bldr-conds-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-12);
  color: var(--ink-3);
}
.hq2-crm-builder .bldr-conds-head b { color: var(--ink); font-weight: var(--w-bold); }
.hq2-crm-builder .bldr-conds-meta {
  font-size: var(--t-11);
  color: var(--tc-navy);
  background: rgba(27, 26, 107, .08);
  padding: 1px 8px;
  border-radius: var(--r-pill);
  font-weight: var(--w-bold);
}

.hq2-crm-builder .bldr-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-crm-builder .bldr-row {
  display: grid;
  grid-template-columns: 2fr 1fr 2fr 28px;
  gap: 6px;
  align-items: center;
}
.hq2-crm-builder .bldr-row select,
.hq2-crm-builder .bldr-row input {
  height: 34px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: var(--t-13);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--w-medium);
}
.hq2-crm-builder .bldr-row select:focus,
.hq2-crm-builder .bldr-row input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
.hq2-crm-builder .bldr-value-bool {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  background: var(--success-bg);
  color: var(--success);
  border-radius: var(--r-md);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  border: 1px solid rgba(46, 134, 87, .25);
}
.hq2-crm-builder .bldr-row-x {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-size: 12px;
}
.hq2-crm-builder .bldr-row-x:hover { background: var(--danger-bg); color: var(--danger); border-color: rgba(179, 58, 26, .3); }

.hq2-crm-builder .bldr-add {
  align-self: flex-start;
  background: transparent;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-md);
  padding: 8px 14px;
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--tc-navy);
  letter-spacing: .03em;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.hq2-crm-builder .bldr-add:hover { background: rgba(27, 26, 107, .06); border-color: var(--tc-navy); }

.hq2-crm-builder .bldr-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-crm-builder .bldr-delete {
  background: transparent;
  border: none;
  color: var(--danger);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: .03em;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(179, 58, 26, .3);
}
.hq2-crm-builder .bldr-delete:hover { text-decoration-color: var(--danger); }
.hq2-crm-builder .bldr-foot-actions { display: flex; gap: var(--s-2); }

@media (max-width: 720px){
  .hq2-crm-builder { max-width: none; max-height: 92vh; border-radius: var(--r-lg); }
  .hq2-crm-builder .bldr-meta { grid-template-columns: 1fr; }
  .hq2-crm-builder .bldr-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hq2-crm-builder .bldr-row-x { grid-column: 2; justify-self: end; }
}

/* ── Drawer tag editor ── */
.dr-tag-editor .dr-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.dr-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  padding: 2px 4px 2px 10px;
  border-radius: var(--r-pill);
  background: rgba(27, 26, 107, .08);
  color: var(--tc-navy);
  border: 1px solid rgba(27, 26, 107, .12);
}
.dr-tag-x {
  width: 16px;
  height: 16px;
  border: none;
  background: rgba(27, 26, 107, .1);
  color: var(--tc-navy);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: var(--w-bold);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dr-tag-x:hover { background: var(--danger); color: #fff; }

.dr-tag-form {
  display: inline-flex;
  margin-left: 4px;
}
.dr-tag-form input {
  width: 110px;
  height: 24px;
  border: 1px dashed var(--rule-strong);
  border-radius: var(--r-pill);
  padding: 0 12px;
  font-size: var(--t-11);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  font-weight: var(--w-medium);
  transition: border-color .15s, background .15s, width .15s;
}
.dr-tag-form input:focus {
  outline: none;
  border-style: solid;
  border-color: var(--tc-navy);
  background: rgba(27, 26, 107, .04);
  width: 160px;
}

/* ── Saved segment hover (edit hint) ── */
.hq2-crm-rail .seg-group-saved .seg-row {
  position: relative;
}
.hq2-crm-rail .seg-group-saved .seg-row::after {
  content: 'alt-click to edit';
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--t-10);
  color: var(--ink-4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s;
  background: var(--surface);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.hq2-crm-rail .seg-group-saved .seg-row:hover::after {
  opacity: 1;
}
.hq2-crm-rail .seg-group-saved .seg-row:hover .seg-count { opacity: 0; }
.hq2-crm-rail .seg-group-saved .seg-count { transition: opacity .15s; }

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1C-b — Tasks · Communications · Drawer Tasks tab
   ═════════════════════════════════════════════════════════════════════════ */

/* Filter pills (used by Tasks + Communications) */
.tk-filters {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-pill);
}
.tk-filter {
  background: transparent;
  border: none;
  padding: 5px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.tk-filter:hover { color: var(--ink); }
.tk-filter.is-active {
  background: var(--tc-navy);
  color: #fff;
  box-shadow: 0 2px 6px rgba(27, 26, 107, .2);
}

/* Tasks toolbar */
.hq2-tk-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.tk-quick {
  display: flex;
  gap: 6px;
  align-items: center;
  flex: 1;
  min-width: 280px;
  max-width: 720px;
}
.tk-quick input[type="text"] {
  flex: 1 1 auto;
  min-width: 100px;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: var(--t-12);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface-2);
}
.tk-quick input[type="date"] {
  flex: 0 0 auto;
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: var(--t-12);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface-2);
}
.tk-quick input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}

/* Tasks rows */
.hq2-tk-rows {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.tk-row {
  display: grid;
  grid-template-columns: 28px 1fr 200px 80px 70px 28px;
  gap: var(--s-3);
  align-items: center;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-13);
  transition: background .12s;
}
.tk-row:last-child { border-bottom: none; }
.tk-row:hover { background: var(--surface-2); }
.tk-row.is-done { opacity: .58; }
.tk-row.is-done .tk-title { text-decoration: line-through; }

.tk-check {
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--rule-strong);
  background: var(--surface);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: var(--w-bold);
  color: var(--success);
  transition: background .12s, border-color .12s;
}
.tk-check:hover { border-color: var(--tc-navy); }
.tk-row.is-done .tk-check { background: var(--success-bg); border-color: var(--success); }

.tk-title {
  font-weight: var(--w-medium);
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-cust-wrap {
  font-size: var(--t-12);
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tk-cust {
  color: var(--tc-navy);
  text-decoration: none;
  font-weight: var(--w-semibold);
}
.tk-cust:hover { text-decoration: underline; }
.tk-cust-none { color: var(--ink-4); font-weight: var(--w-regular); }

.tk-due {
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  font-variant-numeric: tabular-nums;
  text-align: right;
  color: var(--ink-3);
}
.tk-row.tone-danger .tk-due { color: var(--danger); }
.tk-row.tone-warn   .tk-due { color: var(--warning); }
.tk-row.tone-info   .tk-due { color: var(--info); }
.tk-row.tone-mute   .tk-due { color: var(--ink-4); }

.tk-src {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  text-align: center;
  padding: 1px 8px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-4);
  border: 1px solid var(--rule);
}
.tk-src.tk-src-wf {
  background: rgba(45, 47, 168, .08);
  color: var(--tc-navy);
  border-color: rgba(45, 47, 168, .18);
}

.tk-del {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--ink-4);
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.tk-row:hover .tk-del { opacity: 1; }
.tk-del:hover { background: var(--danger-bg); color: var(--danger); }

@media (max-width: 880px){
  .hq2-tk-toolbar { flex-direction: column; align-items: stretch; }
  .tk-quick { max-width: none; min-width: 0; flex-wrap: wrap; }
  .tk-row {
    grid-template-columns: 28px 1fr auto auto;
    grid-template-areas: "check title title del" "check cust cust cust" "check due src src";
    row-gap: 4px;
  }
  .tk-check { grid-area: check; }
  .tk-title { grid-area: title; }
  .tk-cust-wrap { grid-area: cust; }
  .tk-due { grid-area: due; text-align: left; }
  .tk-src { grid-area: src; justify-self: end; }
  .tk-del { grid-area: del; opacity: 1; }
}

/* ── Drawer Tasks tab ── */
.dr-tk-quick {
  display: flex;
  gap: 6px;
  margin-bottom: var(--s-2);
}
.dr-tk-quick input[type="text"] {
  flex: 1;
  height: 30px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: var(--t-12);
  background: var(--surface);
}
.dr-tk-quick input[type="date"] {
  flex: 0 0 auto;
  width: 130px;
  height: 30px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 8px;
  font-size: var(--t-11);
  background: var(--surface);
}
.dr-tk-quick input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
.dr-tk-list { display: flex; flex-direction: column; }
.dr-tk-row {
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  font-size: var(--t-12);
  border-top: 1px solid var(--rule);
}
.dr-tk-row:first-of-type { border-top: none; }
.dr-tk-row.is-done { opacity: .55; }
.dr-tk-row.is-done .dr-tk-text b { text-decoration: line-through; }
.dr-tk-row .tk-check { width: 18px; height: 18px; font-size: 11px; }
.dr-tk-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.dr-tk-text b {
  font-weight: var(--w-semibold);
  color: var(--ink);
  font-size: var(--t-12);
}
.dr-tk-due {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.dr-tk-row.tone-danger .dr-tk-due { color: var(--danger); }
.dr-tk-row.tone-warn   .dr-tk-due { color: var(--warning); }
.dr-tk-row.tone-info   .dr-tk-due { color: var(--info); }

/* ── Communications page ── */
.hq2-co-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.hq2-co-toolbar .tb-search { width: 320px; max-width: 100%; }
.hq2-co-toolbar .tb-count { font-size: var(--t-12); color: var(--ink-3); margin-left: auto; }

.hq2-co-rows {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.co-row {
  display: grid;
  /* 5 columns: channel · dir · text · delivery (auto—0 if absent) · when */
  grid-template-columns: 32px 14px 1fr auto 70px;
  gap: var(--s-3);
  align-items: center;
  padding: 10px var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-12);
  cursor: pointer;
  transition: background .12s;
}
.co-row:last-child { border-bottom: none; }
.co-row:hover { background: var(--surface-2); }
.co-channel {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 14px;
  background: var(--surface-2);
  color: var(--ink-3);
}
.co-channel.co-channel-email { background: var(--info-bg); color: var(--info); }
.co-channel.co-channel-sms   { background: var(--success-bg); color: var(--success); }
.co-dir {
  font-family: var(--font-mono);
  color: var(--ink-3);
  font-weight: var(--w-bold);
  font-size: 13px;
  text-align: center;
}
.co-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.co-text b {
  color: var(--ink);
  font-weight: var(--w-semibold);
  font-size: var(--t-13);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-text span {
  color: var(--ink-3);
  font-size: var(--t-11);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.co-when {
  font-size: var(--t-11);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

/* Delivery-status pill on SMS rows. Inserted between .co-text and
   .co-when. The parent .co-row grid auto-flows so this slots into
   column 4 (between text + when); on narrow viewports it stacks
   below the row text. Keeps the layout intact on email rows where
   no delivery pill is rendered (no badge = no extra cell). */
.co-deliv {
  font-size: 10px;
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  background: var(--surface-2);
  color: var(--ink-3);
}
.co-deliv.co-deliv-sent        { background: #DBEAFE; color: #1D4ED8; } /* blue   */
.co-deliv.co-deliv-delivered   { background: #DCFCE7; color: #166534; } /* green  */
.co-deliv.co-deliv-undelivered { background: #FEF3C7; color: #92400E; } /* amber  */
.co-deliv.co-deliv-failed      { background: #FEE2E2; color: #B91C1C; } /* red    */
.co-deliv.co-deliv-skipped     { background: #E5E7EB; color: #4B5563; } /* grey   */

/* ═══════════════════════════════════════════════════════════════════════════
   FINANCIALS MODULE  (HQ v2 phase 1D)
   ═════════════════════════════════════════════════════════════════════════ */

.hq2-fi-row {
  display: grid;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-fi-row-2up { grid-template-columns: 1fr 1fr; }
@media (max-width: 1100px) { .hq2-fi-row-2up { grid-template-columns: 1fr; } }

.hq2-fi-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hq2-fi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  font-family: var(--font-display);
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  color: var(--ink-2);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.hq2-fi-head .hq2-fi-meta {
  font-size: var(--t-10);
  color: var(--ink-4);
  letter-spacing: .03em;
  text-transform: lowercase;
  font-weight: var(--w-medium);
}
.hq2-fi-body { padding: var(--s-3) var(--s-4); }

/* P&L table */
.hq2-fi-pl {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-13);
}
.hq2-fi-pl th, .hq2-fi-pl td {
  padding: 6px var(--s-2);
  text-align: left;
}
.hq2-fi-pl th {
  font-weight: var(--w-medium);
  color: var(--ink-2);
}
.hq2-fi-pl td { text-align: right; color: var(--ink); font-variant-numeric: tabular-nums; }
.hq2-fi-pl tr.pl-rev th  { color: var(--ink); font-weight: var(--w-bold); }
.hq2-fi-pl tr.pl-neg td  { color: var(--danger); }
.hq2-fi-pl tr.pl-sub th, .hq2-fi-pl tr.pl-sub td {
  border-top: 1px solid var(--rule);
  border-bottom: 1px dashed var(--rule);
  padding-top: 8px;
  padding-bottom: 8px;
  color: var(--ink);
  font-weight: var(--w-bold);
}
.hq2-fi-pl tr.pl-total {
  background: var(--surface-2);
}
.hq2-fi-pl tr.pl-total th, .hq2-fi-pl tr.pl-total td {
  font-family: var(--font-display);
  font-size: var(--t-15);
  font-weight: var(--w-black);
  padding-top: 10px;
  padding-bottom: 10px;
  border-top: 1px solid var(--rule);
}
.hq2-fi-pl tr.pl-total.tone-ok td     { color: var(--success); }
.hq2-fi-pl tr.pl-total.tone-danger td { color: var(--danger); }
.hq2-fi-pl tr.pl-margin th, .hq2-fi-pl tr.pl-margin td {
  font-size: var(--t-12);
  color: var(--ink-3);
}

/* Subscription metrics grid */
.hq2-fi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  margin: calc(var(--s-3) * -1) calc(var(--s-4) * -1);
}
.hq2-fi-cell {
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-fi-cell.hq2-fi-cell-wide { grid-column: span 3; background: var(--surface-2); }
.hq2-fi-cell .lbl {
  font-size: var(--t-10);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-fi-cell .val {
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: var(--w-bold);
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-fi-cell .val.tone-ok    { color: var(--success); }
.hq2-fi-cell .val.tone-warn  { color: var(--warning); }

/* Revenue mix legend */
.hq2-fi-leg {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-bottom: var(--s-3);
}
.hq2-fi-leg-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hq2-fi-leg-item i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  display: inline-block;
}
.hq2-fi-leg-item b {
  color: var(--ink);
  font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}

/* Top revenue sources */
.hq2-fi-src {
  margin-bottom: var(--s-3);
}
.hq2-fi-src:last-child { margin-bottom: 0; }
.hq2-fi-src-head {
  display: flex;
  justify-content: space-between;
  font-size: var(--t-12);
  color: var(--ink-2);
  margin-bottom: 4px;
}
.hq2-fi-src-head b { color: var(--ink); font-family: var(--font-display); font-weight: var(--w-bold); text-transform: lowercase; }
.hq2-fi-src-head span { font-variant-numeric: tabular-nums; }
.hq2-fi-src-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.hq2-fi-src-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tc-navy), var(--tc-gold-dark));
  border-radius: 999px;
}

/* Refunds */
.hq2-fi-ref {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-12);
}
.hq2-fi-ref:first-of-type { border-top: none; }
.hq2-fi-ref-who { color: var(--ink-2); }
.hq2-fi-ref-amt { color: var(--danger); font-weight: var(--w-bold); }
.hq2-fi-ref-when { color: var(--ink-4); font-size: var(--t-11); }

/* Promos snapshot rows on the Money hub. Mirrors the data authored
   on /commerce/promos so the two surfaces stay in sync. */
.hq2-fi-section-link {
  margin-left: auto;
  font-size: var(--t-11);
  font-weight: var(--w-semibold);
  color: var(--ink-3);
  text-decoration: none;
  transition: color 0.12s ease;
}
.hq2-fi-section-link:hover { color: var(--ink); }
.hq2-fi-promo-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto minmax(80px, 1fr);
  gap: var(--s-3);
  align-items: baseline;
  padding: 6px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
}
.hq2-fi-promo-row:first-of-type { border-top: none; }
.hq2-fi-promo-code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--t-11);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  justify-self: start;
}
.hq2-fi-promo-name {
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.hq2-fi-promo-discount {
  font-weight: var(--w-bold);
  color: var(--ink, #1B1A6B);
  text-align: center;
}
.hq2-fi-promo-uses,
.hq2-fi-promo-applies {
  color: var(--ink-3);
  font-size: var(--t-11);
  text-align: right;
}

/* Expenses quick-add form */
.hq2-fi-exp-form {
  display: grid;
  grid-template-columns: 2fr 100px 130px 130px auto;
  gap: 6px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-fi-exp-form input,
.hq2-fi-exp-form select {
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: var(--t-12);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
}
.hq2-fi-exp-form input:focus,
.hq2-fi-exp-form select:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
@media (max-width: 880px){
  .hq2-fi-exp-form { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hq2-fi-exp-form button { grid-column: span 2; }
}

.hq2-fi-exp-list { padding: 0; }
.hq2-fi-exp {
  display: grid;
  grid-template-columns: 90px 90px 1fr 90px 28px;
  gap: var(--s-3);
  align-items: center;
  padding: 8px var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-12);
}
.hq2-fi-exp:last-child { border-bottom: none; }
.hq2-fi-exp:hover { background: var(--surface-2); }
.hq2-fi-exp-date { color: var(--ink-3); font-variant-numeric: tabular-nums; }
.hq2-fi-exp-cat {
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  color: var(--ink-2);
  padding: 1px 7px;
  border-radius: var(--r-pill);
  text-align: center;
}
.hq2-fi-exp-desc {
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-fi-exp-amt { color: var(--danger); font-weight: var(--w-bold); text-align: right; }
.hq2-fi-exp .tk-del { opacity: 0; }
.hq2-fi-exp:hover .tk-del { opacity: 1; }

@media (max-width: 880px){
  .hq2-fi-exp { grid-template-columns: 1fr 1fr 28px; grid-template-areas: "date cat del" "desc desc desc" "amt amt amt"; row-gap: 4px; }
  .hq2-fi-exp-date { grid-area: date; }
  .hq2-fi-exp-cat  { grid-area: cat; justify-self: end; }
  .hq2-fi-exp .tk-del { grid-area: del; opacity: 1; }
  .hq2-fi-exp-desc { grid-area: desc; }
  .hq2-fi-exp-amt  { grid-area: amt; text-align: left; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PHASE 1D — Friendly hero fact + Needs-attention rollup
   ═════════════════════════════════════════════════════════════════════════ */

/* Daily fact line inside the hero — small, gold-accented, never shouts */
.hq2-hero .hero-fact {
  margin-top: var(--s-3);
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md);
  padding: 10px 14px;
  max-width: 520px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.hero-fact-tag {
  font-family: var(--font-display);
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(232, 200, 122, .9);
  flex-shrink: 0;
  padding-top: 1px;
}
.hero-fact-text {
  font-size: var(--t-12);
  color: rgba(255, 255, 255, .85);
  line-height: 1.45;
}

/* Needs-attention rollup card */
.hq2-attn {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-5);
  overflow: hidden;
}
.hq2-attn-head {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-attn-head b {
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: 1;
}
.hq2-attn-meta {
  font-size: var(--t-11);
  color: var(--ink-3);
  font-weight: var(--w-medium);
}
.hq2-attn-pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--warning);
  flex-shrink: 0;
  animation: hq2Pulse 2s ease-out infinite;
}
.hq2-attn:has(.hq2-attn-clear) .hq2-attn-pulse {
  background: var(--success);
  animation: none;
}

.hq2-attn-body {
  display: flex;
  flex-direction: column;
}
.hq2-attn-item {
  display: grid;
  grid-template-columns: 16px 1fr 16px;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: inherit;
  transition: background .12s;
}
.hq2-attn-item:first-child { border-top: none; }
.hq2-attn-item:hover { background: var(--surface-2); text-decoration: none; }
.hq2-attn-glyph {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.hq2-attn-item.tone-danger .hq2-attn-glyph { background: var(--danger); animation: hq2Pulse 1.6s ease-out infinite; }
.hq2-attn-item.tone-warn   .hq2-attn-glyph { background: var(--warning); }
.hq2-attn-item.tone-info   .hq2-attn-glyph { background: var(--info); }
.hq2-attn-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-attn-text b {
  font-size: var(--t-13);
  font-weight: var(--w-semibold);
  color: var(--ink);
}
.hq2-attn-item.tone-danger .hq2-attn-text b { color: var(--danger); }
.hq2-attn-item.tone-warn   .hq2-attn-text b { color: var(--warning); }
.hq2-attn-text span {
  font-size: var(--t-11);
  color: var(--ink-3);
  line-height: 1.45;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-attn-arrow {
  color: var(--ink-4);
  font-size: 13px;
  text-align: right;
}

.hq2-attn-clear {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--success-bg);
}
.hq2-attn-clear-glyph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* SVG sized at 14×14 inside a 32px circle for proper visual weight.
     `place-items: center` on the grid container centers the inline SVG
     reliably across browsers — the unicode ✓ glyph rendered low-and-
     left because of font baseline asymmetry. */
}
.hq2-attn-clear-glyph svg { display: block; }
.hq2-attn-clear b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--t-14);
  font-weight: var(--w-bold);
  color: var(--success);
}
.hq2-attn-clear span {
  font-size: var(--t-12);
  color: var(--ink-2);
  display: block;
  margin-top: 2px;
}

@media (max-width: 720px){
  .hq2-hero .hero-fact { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL HQ ANIMATIONS  (phase 1E)
   ─────────────────────────────────────────────────────────────────────────
   Subtle motion that makes HQ feel alive without becoming distracting.
   Honors prefers-reduced-motion. All transitions use the existing
   --t-fast / --ease tokens or the cubic-bezier(.32,.72,0,1) Linear curve.
   ═════════════════════════════════════════════════════════════════════════ */

/* Page transition — fades in the .hq2-page on every route change */
@keyframes hq2PageFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.hq2-app .hq2-page {
  animation: hq2PageFade .22s cubic-bezier(.32,.72,0,1);
}

/* Sidebar nav-item — softer hover with a subtle slide on the gold accent */
.hq2-nav-item .icon { transition: transform var(--t-fast) var(--ease); }
.hq2-nav-item:hover .icon { transform: translateX(1px); }
.hq2-nav-item.is-active .icon { transform: translateX(2px); }

/* Stat card numbers — fade up when populated */
@keyframes hq2StatPop {
  from { opacity: 0; transform: translateY(2px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-stat:not(.is-loading) .stat-val,
.hq2-stat:not(.is-loading) .stat-delta {
  animation: hq2StatPop .25s cubic-bezier(.32,.72,0,1);
}

/* Buttons — micro-feedback on press */
.tb-btn:active,
.hq2-btn:active,
.hq2-tk-quick button:active,
.wf-engine-toggle:active,
.wf-tpl-btn:active { transform: scale(.97); }

/* Hero pulse on the "today" eye line — barely-there breath */
@keyframes hq2HeroEye {
  0%, 100% { opacity: .8; }
  50%      { opacity: 1; }
}
.hq2-hero .hero-eye { animation: hq2HeroEye 4s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce){
  body.hq2-app *,
  body.hq2-app *::before,
  body.hq2-app *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEAM CHAT  (phase 1E)
   ═════════════════════════════════════════════════════════════════════════ */

.hq2-chat {
  display: grid;
  grid-template-columns: 260px 1fr;
  height: 100%;
  background: var(--bg);
}
.hq2-chat-rail {
  background: var(--surface);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.hq2-chat-rail .rail-head {
  padding: var(--s-4) var(--s-4) var(--s-2);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: var(--t-11);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-chat-rail .rail-new {
  width: 24px; height: 24px;
  border-radius: var(--r-sm);
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hq2-chat-rail .rail-new:hover { background: var(--surface-2); color: var(--tc-navy); border-color: var(--tc-navy); }

.hq2-chat-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 var(--s-3) var(--s-3);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 8px;
  height: 32px;
}
.hq2-chat-search:focus-within {
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
.hq2-chat-search svg { color: var(--ink-3); flex-shrink: 0; }
.hq2-chat-search input {
  border: none; background: transparent; outline: none;
  flex: 1; font-size: var(--t-12); color: var(--ink);
}

.hq2-chat-rail-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 var(--s-2) var(--s-3);
}
.hq2-chat-group { margin-bottom: var(--s-3); }
.hq2-chat-group-head {
  font-size: var(--t-10);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-4);
  font-weight: var(--w-bold);
  padding: var(--s-2) var(--s-3) 4px;
}

.hq2-chat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: var(--r-sm);
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background .12s;
}
.hq2-chat-row:hover { background: var(--surface-2); }
.hq2-chat-row.is-active {
  background: rgba(27, 26, 107, .08);
}
.hq2-chat-row.is-active::before {
  content: '';
  position: absolute; left: -2px; top: 8px; bottom: 8px; width: 3px;
  background: var(--tc-gold);
  border-radius: 999px;
}
.hq2-chat-row-glyph {
  width: 22px;
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: var(--w-bold);
  color: var(--ink-3);
  text-align: center;
  flex-shrink: 0;
}
.hq2-chat-row.is-active .hq2-chat-row-glyph { color: var(--tc-navy); }
.hq2-chat-row.has-unread .hq2-chat-row-text b { color: var(--ink); font-weight: var(--w-bold); }
.hq2-chat-row-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.hq2-chat-row-text b {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: var(--w-semibold);
  color: var(--ink);
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-chat-row-text span {
  font-size: var(--t-11);
  color: var(--ink-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-chat-row-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--tc-gold);
  flex-shrink: 0;
  box-shadow: 0 0 0 0 rgba(200, 169, 110, .6);
  animation: hq2Pulse 2s ease-out infinite;
}

/* ─── Active conversation ─── */
.hq2-chat-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--surface);
}
.hq2-chat-main .hq2-chat-empty {
  margin: auto;
  text-align: center;
  padding: var(--s-7);
  color: var(--ink-3);
}
.hq2-chat-empty-glyph {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--tc-gold-dark);
  display: grid;
  place-items: center;
  font-size: 24px;
  margin: 0 auto var(--s-3);
}
.hq2-chat-empty h3 {
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: var(--w-bold);
  color: var(--ink);
  margin-bottom: 4px;
}
.hq2-chat-empty p { font-size: var(--t-13); }

.hq2-chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  flex: 0 0 auto;
}
.hq2-chat-head-id b {
  font-family: var(--font-display);
  font-size: var(--t-16);
  font-weight: var(--w-bold);
  color: var(--ink);
  display: block;
}
.hq2-chat-head-id span {
  font-size: var(--t-11);
  color: var(--ink-3);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: var(--w-bold);
}

/* messages stream */
.hq2-chat-msgs {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  scroll-behavior: smooth;
}
.hq2-chat-msgs-empty {
  margin: auto;
  color: var(--ink-4);
  font-size: var(--t-12);
}

@keyframes hq2MsgIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-chat-msg {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--s-3);
  align-items: flex-start;
  animation: hq2MsgIn .22s cubic-bezier(.32,.72,0,1);
}
/* Grouped messages omit the avatar in the markup. The original CSS
   kept the same `32px 1fr` grid which slotted the lone body child into
   the 32px column — that produced one-word-per-line text wrap (Tommy's
   screenshot). Switch to block layout for grouped so the body fills
   the full width, then indent to line up with non-grouped bodies. */
.hq2-chat-msg.is-grouped {
  display: block;
  grid-template-columns: none;
  gap: 0;
  margin-top: -6px;
  padding-left: calc(32px + var(--s-3));
}
.hq2-chat-msg.is-grouped .hq2-chat-msg-body { padding-left: 0; }
.hq2-chat-msg-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: 12px;
  flex-shrink: 0;
}
/* Paco-bot avatar — the actual cat sprite, on a soft gold halo */
.hq2-chat-msg-avatar.is-paco {
  background: rgba(255, 230, 220, .7);
  border: 1px solid rgba(200, 169, 110, .35);
  padding: 2px;
}
.hq2-chat-msg-avatar.is-paco .mise-cat {
  width: 26px; height: 26px;
  image-rendering: pixelated;
}

/* Paco-bot message body — gold left-border accent + a subtle peach
   wash so update posts feel "from the system" without screaming. */
.hq2-chat-msg.is-paco {
  background: linear-gradient(135deg, rgba(255, 230, 220, .25), rgba(255, 246, 240, .15));
  border-left: 3px solid var(--tc-gold-dark, #8B6914);
  border-radius: 12px;
  padding: 8px 12px 10px 9px;
  margin-left: -12px;
}
.hq2-chat-msg.is-paco.is-grouped {
  border-radius: 0 12px 12px 0;
}

/* Tiny BOT pill next to paco's name — uppercase gold-on-cream */
.hq2-chat-bot-pill {
  display: inline-block;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tc-gold-dark, #8B6914);
  background: rgba(200, 169, 110, .15);
  border: 1px solid rgba(200, 169, 110, .3);
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
  vertical-align: middle;
}

.hq2-chat-msg-body { min-width: 0; }
.hq2-chat-msg-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 2px;
}
.hq2-chat-msg-head b {
  font-family: var(--font-display);
  font-size: var(--t-13);
  font-weight: var(--w-bold);
  color: var(--ink);
  letter-spacing: -.01em;
}
.hq2-chat-msg-head span {
  font-size: var(--t-10);
  color: var(--ink-4);
  letter-spacing: .03em;
}
.hq2-chat-msg-text {
  font-size: var(--t-13);
  color: var(--ink);
  line-height: 1.5;
  word-wrap: break-word;
  white-space: pre-wrap;
}
.hq2-chat-msg-text a { color: var(--tc-navy); text-decoration: underline; text-decoration-color: rgba(27, 26, 107, .35); }
.hq2-chat-msg-text a:hover { text-decoration-color: var(--tc-navy); }
.hq2-chat-msg.is-mine .hq2-chat-msg-head b { color: var(--tc-navy); }

/* composer */
.hq2-chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: var(--s-3) var(--s-5) var(--s-4);
  border-top: 1px solid var(--rule);
  background: var(--surface);
}
.hq2-chat-composer textarea {
  flex: 1;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 10px 14px;
  font-size: var(--t-13);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface-2);
  resize: none;
  height: 40px;
  max-height: 140px;
  line-height: 1.45;
  transition: border-color .15s, box-shadow .15s;
}
.hq2-chat-composer textarea:focus {
  outline: none;
  border-color: var(--tc-navy);
  background: var(--surface);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
.hq2-chat-send {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: none;
  background: var(--tc-navy);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, transform .1s;
}
.hq2-chat-send:hover:not(:disabled) { background: var(--tc-navy-soft); transform: translateY(-1px); }
.hq2-chat-send:active:not(:disabled) { transform: scale(.95); }
.hq2-chat-send:disabled { opacity: .5; cursor: not-allowed; }
.hq2-chat-send svg { transform: rotate(0deg); transition: transform .2s ease; }
.hq2-chat-send:hover svg { transform: rotate(-15deg); }

/* New-channel modal */
.hq2-chat-new .hq2-chat-new-tabs {
  display: flex;
  gap: 4px;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-chat-new-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: var(--font-display);
  font-size: var(--t-12);
  font-weight: var(--w-semibold);
  letter-spacing: .04em;
  text-transform: lowercase;
  color: var(--ink-3);
  cursor: pointer;
  transition: background .15s;
}
.hq2-chat-new-tab:hover { background: var(--surface); color: var(--ink); }
.hq2-chat-new-tab.is-active {
  background: var(--tc-navy);
  color: #fff;
  border-color: var(--tc-navy);
}
.hq2-chat-new-body {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
}
.hq2-chat-new-hint {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.bldr-meta-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-10);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.bldr-meta-row input {
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 8px 10px;
  font-size: var(--t-13);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
  letter-spacing: 0;
  text-transform: none;
  font-weight: var(--w-medium);
}
.bldr-meta-row input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
.hq2-chat-new-people {
  padding: var(--s-3) var(--s-5);
  flex: 1;
  overflow-y: auto;
  max-height: 280px;
}
.hq2-chat-new-people-head {
  font-size: var(--t-10);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
  margin-bottom: var(--s-2);
}
.hq2-chat-pick {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--t-13);
  color: var(--ink);
  transition: background .12s;
}
.hq2-chat-pick:hover { background: var(--surface-2); }
.hq2-chat-pick input { cursor: pointer; }

@media (max-width: 880px){
  .hq2-chat { grid-template-columns: 1fr; }
  .hq2-chat-rail { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FINANCIALS — full ledger (phase 1D extension)
   ═════════════════════════════════════════════════════════════════════════ */

.hq2-fi-lg-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
  flex-wrap: wrap;
}
.hq2-fi-lg-search { width: 280px; max-width: 100%; }

/* Manual entry form — same row layout as the toolbar above */
.hq2-fi-lg-form {
  display: grid;
  grid-template-columns: 130px 110px 1fr 110px 1.5fr auto auto;
  gap: 6px;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  align-items: center;
}
.hq2-fi-lg-form input,
.hq2-fi-lg-form select {
  height: 32px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 0 10px;
  font-size: var(--t-12);
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface);
}
.hq2-fi-lg-form input:focus,
.hq2-fi-lg-form select:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .1);
}
@media (max-width: 1100px){
  .hq2-fi-lg-form { grid-template-columns: 1fr 1fr 1fr; }
  .hq2-fi-lg-form button { grid-column: span 3; }
  .hq2-fi-lg-form button + button { grid-column: span 3; }
}

/* Ledger table */
.hq2-fi-lg-body { padding: 0; }
.hq2-fi-lg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
}
.hq2-fi-lg-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  padding: 8px var(--s-3);
  text-align: left;
  font-size: var(--t-10);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: var(--w-bold);
}
.hq2-fi-lg-table th.lg-h-amt,
.hq2-fi-lg-table th.lg-h-bal { text-align: right; }
.hq2-fi-lg-table th.lg-h-date  { width: 96px; white-space: nowrap; }
.hq2-fi-lg-table th.lg-h-kind  { width: 78px; }
.hq2-fi-lg-table th.lg-h-account { width: 160px; }
.hq2-fi-lg-table th.lg-h-amt   { width: 110px; }
.hq2-fi-lg-table th.lg-h-bal   { width: 110px; }
.hq2-fi-lg-table th.lg-h-act   { width: 28px; }

.hq2-fi-lg-table tbody tr.lg-row {
  border-bottom: 1px solid var(--rule);
  transition: background .12s;
}
.hq2-fi-lg-table tbody tr.lg-row:hover { background: var(--surface-2); }
.hq2-fi-lg-table tbody tr.lg-row td {
  padding: 8px var(--s-3);
  vertical-align: middle;
  color: var(--ink);
}

.lg-date    { color: var(--ink-2); white-space: nowrap; }
.lg-account { color: var(--ink-2); font-weight: var(--w-medium); }
.lg-desc    { color: var(--ink); }
.lg-amt     { text-align: right; }
.lg-amt b   { font-weight: var(--w-bold); }
.lg-row.is-income .lg-amt b   { color: var(--success); }
.lg-row.is-expense .lg-amt b  { color: var(--danger); }
.lg-bal     { text-align: right; color: var(--ink-3); font-weight: var(--w-medium); }
.lg-act     { text-align: right; }
.lg-row .tk-del { opacity: 0; transition: opacity .12s; }
.lg-row:hover .tk-del { opacity: 1; }

.lg-srctag {
  display: inline-block;
  font-size: var(--t-10);
  font-weight: var(--w-bold);
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 1px 7px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--rule);
}
.lg-srctag-order    { background: var(--info-bg);    color: var(--info);    border-color: rgba(27, 93, 216, .2); }
.lg-srctag-catering { background: rgba(45, 47, 168, .08); color: var(--tc-navy); border-color: rgba(45, 47, 168, .18); }
.lg-srctag-refund   { background: var(--danger-bg);  color: var(--danger);  border-color: rgba(179, 58, 26, .2); }
.lg-srctag-expense  { background: var(--warning-bg); color: var(--warning); border-color: rgba(184, 134, 11, .25); }
.lg-srctag-manual   { background: rgba(200, 169, 110, .15); color: var(--tc-gold-dark); border-color: rgba(200, 169, 110, .3); }

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW v3 — "The Pass" port from mise-v2-preview.html
   ─────────────────────────────────────────────────────────────────────────
   New overview surface. KPI strip (clickable → drill-down) + on-the-pass
   list + activity stream w/ command-bar filter + departments + charts +
   cohort heatmap + stations atlas.

   These rules live BELOW the older overview-v2 CSS so they take precedence
   wherever names collide. The old overview-v2 markup (.hq2-hero, .hq2-attn,
   etc) is no longer rendered by the JS — its rules sit as dead code that
   we'll remove in a follow-up cleanup pass.
   ═════════════════════════════════════════════════════════════════════════ */

/* Greeting band — warm hello + rotating "today's note".
   Sits at the very top of the overview, above the KPI strip. Tone:
   personal but quiet — matches the analytics density that follows. */
.hq2-greet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  margin: 0 0 var(--s-3);
  flex-wrap: wrap;
}
.hq2-greet-line {
  display: flex; align-items: baseline; gap: var(--s-3);
  flex-wrap: wrap;
}
.hq2-greet-hi {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 26px);
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1.1;
}
.hq2-greet-date {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3);
  letter-spacing: .02em;
  text-transform: lowercase;
}
/* "Today in tandoco" anniversary banner — appears on the Pass only on
   dates that match a real tandoco milestone (first order, etc). The
   [hidden] guard is required because display: inline-flex below
   overrides the HTML hidden attribute's default display: none. */
.hq2-greet-history[hidden] { display: none; }
.hq2-greet-history {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-radius: 12px;
  background:
    radial-gradient(280px 120px at 0% 0%, rgba(255, 230, 220, .65), transparent 60%),
    rgba(255, 246, 240, .9);
  border: 1px solid rgba(200, 169, 110, .45);
  margin-bottom: 12px;
  max-width: 60ch;
  animation: hq2HistoryIn .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes hq2HistoryIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-greet-history-tag {
  font-family: var(--font-ui);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: var(--tc-gold-deep, #8B6914);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hq2-greet-history-text {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2, #3D3E5C);
  line-height: 1.45;
}
@media (prefers-reduced-motion: reduce){
  .hq2-greet-history { animation: none; }
}
.hq2-greet-fact {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  max-width: 60%;
  background: linear-gradient(180deg, rgba(200, 169, 110, .10), rgba(200, 169, 110, .04));
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 999px;
  padding: 6px 14px 6px 10px;
}
.hq2-greet-fact-tag {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  background: var(--tc-gold);
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.hq2-greet-fact-text {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  line-height: 1.4;
}
@media (max-width: 900px){
  .hq2-greet { flex-direction: column; align-items: flex-start; }
  .hq2-greet-fact { max-width: 100%; }
}

/* KPI strip — 6 tiles, sparkline, delta vs prior period */
.hq2-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  background: var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin: var(--s-3) 0 var(--s-4);
  border: 1px solid var(--rule);
}
.hq2-kpi {
  background: var(--surface);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background .14s ease, transform .12s ease;
  border: none;
  text-align: left;
  font-family: inherit;
  position: relative;
}
.hq2-kpi:hover { background: var(--surface-2); }
.hq2-kpi:active { transform: scale(.99); }
.hq2-kpi.is-open { background: var(--surface-2); }
.hq2-kpi.is-open::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--tc-gold);
}
.hq2-kpi-lbl {
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-kpi-val {
  font-family: var(--font-ui);
  font-size: var(--t-28);
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.hq2-kpi-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-11);
  margin-top: 2px;
}
.hq2-kpi-delta {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hq2-kpi-delta.is-up   { color: var(--success); }
.hq2-kpi-delta.is-down { color: var(--danger); }
.hq2-kpi-delta.is-flat { color: var(--ink-4); }
.hq2-kpi-prior { color: var(--ink-4); font-weight: 500; }
.hq2-kpi-spark {
  margin-top: var(--s-2);
  height: 28px;
  width: 100%;
  display: block;
}
.hq2-kpi-spark path.fill { fill: rgba(27, 26, 107, .08); transition: fill .25s ease; }
.hq2-kpi-spark path.line {
  fill: none;
  stroke: var(--tc-navy);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .25s ease;
}
.hq2-kpi-spark.is-good path.line { stroke: var(--success); }
.hq2-kpi-spark.is-good path.fill { fill: rgba(46, 134, 87, .12); }
.hq2-kpi-spark.is-down path.line { stroke: var(--danger); }
.hq2-kpi-spark.is-down path.fill { fill: rgba(179, 58, 26, .10); }

/* Today row: pass + activity */
.hq2-today-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.hq2-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hq2-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.hq2-panel-head h3 {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0;
}
.hq2-panel-head .meta {
  font-size: var(--t-11);
  color: var(--ink-4);
  font-weight: 500;
}

/* Pass list */
.hq2-pass-list { display: flex; flex-direction: column; }
.hq2-pass-row {
  display: grid;
  grid-template-columns: 8px 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-13);
  cursor: pointer;
  transition: background .12s ease;
  text-decoration: none;
  color: inherit;
}
.hq2-pass-row:first-child { border-top: none; }
.hq2-pass-row:hover { background: var(--surface-2); text-decoration: none; }
.hq2-pass-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-4); }
.hq2-pass-dot.is-warn   { background: var(--warning); }
.hq2-pass-dot.is-info   { background: var(--info); }
.hq2-pass-dot.is-good   { background: var(--success); }
.hq2-pass-dot.is-danger { background: var(--danger); animation: hq2PassPulseSm 1.6s ease-out infinite; }
@keyframes hq2PassPulseSm {
  0%   { box-shadow: 0 0 0 0 rgba(179, 58, 26, .5); }
  70%  { box-shadow: 0 0 0 6px rgba(179, 58, 26, 0); }
  100% { box-shadow: 0 0 0 0 rgba(179, 58, 26, 0); }
}
.hq2-pass-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-pass-text b { font-weight: 600; color: var(--ink); font-size: var(--t-13); }
.hq2-pass-text span { font-size: var(--t-11); color: var(--ink-4); }
.hq2-pass-amt {
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-pass-cta {
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--ink-4);
  letter-spacing: .02em;
}
.hq2-pass-row:hover .hq2-pass-cta { color: var(--ink); }
.hq2-pass-empty {
  padding: var(--s-5) var(--s-4);
  text-align: center;
  color: var(--ink-4);
  font-size: var(--t-12);
}

/* Command-bar filter on the activity panel */
.hq2-cmdbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-cmdbar-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink);
  padding: 4px 6px;
}
.hq2-cmdbar-input::placeholder { color: var(--ink-4); }
.hq2-cmdbar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--surface);
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 600;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
  white-space: nowrap;
}
.hq2-cmdbar-chip:hover { color: var(--ink); border-color: var(--rule-strong); }
.hq2-cmdbar-chip.is-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.hq2-cmdbar-count {
  margin-left: auto;
  font-size: var(--t-11);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* Activity rows */
.hq2-act-list { display: flex; flex-direction: column; }
.hq2-act-row {
  display: grid;
  grid-template-columns: 6px 1fr auto auto;
  align-items: center;
  gap: var(--s-3);
  padding: 8px var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-12);
  cursor: pointer;
  transition: background .12s ease;
}
.hq2-act-row:first-child { border-top: none; }
.hq2-act-row:hover { background: var(--surface-2); }
.hq2-act-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-5); }
.hq2-act-row.is-info   .hq2-act-dot { background: var(--info); }
.hq2-act-row.is-good   .hq2-act-dot { background: var(--success); }
.hq2-act-row.is-warn   .hq2-act-dot { background: var(--warning); }
.hq2-act-row.is-danger .hq2-act-dot { background: var(--danger); }
.hq2-act-name {
  font-weight: 500;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-act-amt {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.hq2-act-row.is-warn .hq2-act-amt,
.hq2-act-row.is-danger .hq2-act-amt { color: var(--danger); }
.hq2-act-when {
  font-size: var(--t-11);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.hq2-act-empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-4);
  font-size: var(--t-12);
}

/* Departments */
.hq2-dept-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.hq2-dept {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.hq2-dept-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hq2-dept-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-dept-name .glyph {
  width: 18px; height: 18px;
  border-radius: 5px;
  background: var(--surface-2);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
}
.hq2-dept-name .glyph.is-fro  { background: rgba(27, 93, 216, .12); color: var(--info); }
.hq2-dept-name .glyph.is-back { background: rgba(184, 134, 11, .12); color: var(--warning); }
.hq2-dept-name .glyph.is-bks  { background: rgba(46, 134, 87, .12); color: var(--success); }
.hq2-dept-head .more {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 500;
  color: var(--ink-4);
  text-decoration: none;
  letter-spacing: .02em;
}
.hq2-dept-head .more:hover { color: var(--ink); }
.hq2-dept-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 8px var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-13);
}
.hq2-dept-row-lbl { color: var(--ink-2); font-weight: 500; }
.hq2-dept-row-val {
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  letter-spacing: -.005em;
}
.hq2-dept-row-val.is-warn   { color: var(--warning); }
.hq2-dept-row-val.is-good   { color: var(--success); }
.hq2-dept-row-val.is-danger { color: var(--danger); }
.hq2-dept-row-val .delta {
  font-size: var(--t-11);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0;
}
.hq2-dept-row-val .delta.is-up   { color: var(--success); }
.hq2-dept-row-val .delta.is-down { color: var(--danger); }

/* Charts row — line + bars */
.hq2-charts-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.hq2-overview-chart-body {
  padding: var(--s-3) var(--s-4) var(--s-4);
  height: 200px;
  position: relative;
}
.hq2-ovc-svg {
  width: 100%;
  height: 100%;
  display: block;
}
.hq2-ovc-svg .grid-line { stroke: var(--rule); stroke-dasharray: 2 4; }
.hq2-ovc-svg .axis-line { stroke: var(--rule-strong); }
.hq2-ovc-svg path.line  { fill: none; stroke: var(--tc-navy); stroke-width: 2; }
.hq2-ovc-svg path.area  { fill: url(#hq2OvAreaGrad); }
.hq2-ovc-svg .dot       { fill: var(--tc-gold-dark); stroke: var(--surface); stroke-width: 2; }
.hq2-ovc-svg .bar       { fill: rgba(27, 26, 107, .65); transition: y .2s ease, height .2s ease; }
.hq2-ovc-svg .bar.is-peak { fill: var(--tc-gold-dark); }

/* Cohort retention heatmap */
.hq2-cohort-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.hq2-cohort-card .hq2-panel-head { background: var(--surface); }
.hq2-cohort-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-12);
  font-variant-numeric: tabular-nums;
}
.hq2-cohort-table thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  padding: 8px 6px;
  font-size: var(--t-10);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-4);
  text-align: center;
}
.hq2-cohort-table thead th.cohort-h-month { text-align: left; padding-left: var(--s-4); width: 110px; }
.hq2-cohort-table thead th.cohort-h-size  { width: 60px; }
.hq2-cohort-table tbody tr { border-bottom: 1px solid var(--rule); }
.hq2-cohort-table tbody tr:last-child { border-bottom: none; }
.hq2-cohort-table td {
  padding: 6px 4px;
  text-align: center;
  font-weight: 600;
  color: var(--ink);
}
.hq2-cohort-table td.cohort-month {
  text-align: left;
  padding-left: var(--s-4);
  font-weight: 600;
  color: var(--ink);
}
.hq2-cohort-table td.cohort-size {
  color: var(--ink-3);
  font-weight: 600;
}
.hq2-cohort-table td.cohort-cell-na {
  background: repeating-linear-gradient(45deg,
    var(--surface) 0 4px, var(--surface-2) 4px 8px);
  color: var(--ink-5);
}
.hq2-cohort-table td.cohort-cell-tone-origin { background: var(--tc-navy); color: var(--tc-gold); font-weight: 700; }
.hq2-cohort-table td.cohort-cell-tone-high   { background: rgba(45, 47, 168, .42); color: #fff; font-weight: 700; }
.hq2-cohort-table td.cohort-cell-tone-mid    { background: rgba(45, 47, 168, .22); color: var(--tc-navy-deep); }
.hq2-cohort-table td.cohort-cell-tone-low    { background: rgba(45, 47, 168, .08); color: var(--tc-navy); }
.hq2-cohort-table td.cohort-cell-tone-zero   { color: var(--ink-5); }
.hq2-cohort-legend {
  display: flex;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
  font-size: var(--t-10);
  color: var(--ink-3);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 700;
}
.hq2-cohort-legend span { display: inline-flex; align-items: center; gap: 6px; }
.hq2-cohort-legend i { width: 14px; height: 10px; border-radius: 2px; display: inline-block; }
.hq2-cohort-legend i.tone-origin { background: var(--tc-navy); }
.hq2-cohort-legend i.tone-high   { background: rgba(45, 47, 168, .42); }
.hq2-cohort-legend i.tone-mid    { background: rgba(45, 47, 168, .22); }
.hq2-cohort-legend i.tone-low    { background: rgba(45, 47, 168, .08); border: 1px solid var(--rule); }
.hq2-cohort-legend i.tone-zero   { background: var(--surface); border: 1px solid var(--rule); }

/* Stations atlas */
.hq2-atlas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: var(--s-5) 0 var(--s-3);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
}
.hq2-atlas-head h2 {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-15);
  letter-spacing: -.005em;
  color: var(--ink);
  margin: 0;
}
.hq2-atlas-head p { font-size: var(--t-12); color: var(--ink-4); margin: 0; }
.hq2-stations {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-3);
  padding-bottom: var(--s-7);
}
.hq2-station {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 110px;
  transition: transform .2s cubic-bezier(.32, .72, 0, 1),
              border-color .15s ease,
              box-shadow .2s ease;
}
.hq2-station:hover {
  transform: translateY(-1px);
  border-color: var(--rule-strong);
  box-shadow: 0 8px 24px -8px rgba(15, 12, 32, .14);
  text-decoration: none;
}
.hq2-station-eye {
  font-family: var(--font-ui);
  font-size: var(--t-10);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-4);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hq2-station-eye .glyph {
  width: 18px; height: 18px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 5px;
  color: var(--ink-3);
}
.hq2-station-name {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: var(--t-15);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.hq2-station-num {
  margin-top: auto;
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.hq2-station-num .lbl {
  font-weight: 500;
  color: var(--ink-4);
  font-size: var(--t-10);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.hq2-station-num b {
  font-size: var(--t-22);
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--ink);
}
.hq2-station-1 {
  background: linear-gradient(135deg, var(--ink) 0%, var(--tc-navy) 100%);
  border: none;
  color: #fff;
}
.hq2-station-1 .hq2-station-eye { color: var(--tc-gold); }
.hq2-station-1 .hq2-station-eye .glyph {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .14);
  color: var(--tc-gold);
}
.hq2-station-1 .hq2-station-name  { color: #fff; }
.hq2-station-1 .hq2-station-num   { color: rgba(255, 255, 255, .65); }
.hq2-station-1 .hq2-station-num b { color: #fff; }
.hq2-station-1 .hq2-station-num .lbl { color: rgba(255, 255, 255, .55); }

/* KPI drill-down panel — global, mounted in hq2.html */
.hq2-detail-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 80;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.hq2-detail-mask.is-on { opacity: 1; pointer-events: auto; }

.hq2-detail-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 480px;
  max-width: 92vw;
  background: var(--surface);
  border-left: 1px solid var(--rule);
  box-shadow: -24px 0 60px -16px rgba(15, 12, 32, .22);
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(.32, .72, 0, 1);
  z-index: 90;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hq2-detail-panel.is-on { transform: translateX(0); }
.hq2-detail-head {
  padding: var(--s-4) var(--s-5);
  border-bottom: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-detail-head .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.hq2-detail-eye {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-detail-close {
  width: 28px; height: 28px;
  border: none;
  background: var(--surface-2);
  border-radius: var(--r-sm);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-size: 14px;
  cursor: pointer;
  transition: background .12s ease;
}
.hq2-detail-close:hover { background: var(--surface-3, var(--rule-strong)); color: var(--ink); }
.hq2-detail-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-22);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 4px 0 0;
}
.hq2-detail-val {
  font-family: var(--font-ui);
  font-size: var(--t-36);
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
  margin: 4px 0 8px;
}
.hq2-detail-delta {
  font-size: var(--t-13);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.hq2-detail-delta.is-up   { color: var(--success); }
.hq2-detail-delta.is-down { color: var(--danger); }
.hq2-detail-delta.is-flat { color: var(--ink-4); }
.hq2-detail-prior { color: var(--ink-4); margin-left: 6px; font-weight: 500; }
.hq2-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--s-4) var(--s-5);
}
.hq2-detail-section { margin-bottom: var(--s-5); }
.hq2-detail-section h4 {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
}
.hq2-detail-chart {
  background: var(--surface-2);
  border-radius: var(--r-md);
  padding: var(--s-3);
  height: 160px;
}
.hq2-detail-chart svg { width: 100%; height: 100%; display: block; }
.hq2-detail-chart svg path.line { fill: none; stroke: var(--tc-navy); stroke-width: 2; }
.hq2-detail-chart svg path.fill { fill: rgba(27, 26, 107, .12); }
.hq2-detail-chart svg .axis-line { stroke: var(--rule-strong); }
.hq2-detail-rows { display: flex; flex-direction: column; }
.hq2-detail-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-3);
  padding: 10px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-13);
}
.hq2-detail-row:first-child { border-top: none; }
.hq2-detail-row-lbl-wrap { display: flex; flex-direction: column; gap: 4px; }
.hq2-detail-row-lbl { font-weight: 600; color: var(--ink); }
.hq2-detail-row-bar {
  height: 6px;
  background: var(--surface-2);
  border-radius: 99px;
  overflow: hidden;
}
.hq2-detail-row-bar i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--tc-navy), var(--tc-gold-dark));
  border-radius: 99px;
}
.hq2-detail-row-val {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hq2-detail-row-pct {
  margin-left: 6px;
  color: var(--ink-4);
  font-weight: 500;
  font-size: var(--t-11);
}
.hq2-detail-nav {
  display: flex;
  gap: 6px;
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--rule);
  background: var(--surface-2);
}
.hq2-detail-nav button {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .14s ease, border-color .14s ease;
}
.hq2-detail-nav button:hover {
  background: var(--surface-2);
  border-color: var(--rule-strong);
}
.hq2-detail-nav .kbd {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--ink-4);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Page-fade keyframe used by .hq2-page */
@keyframes hq2PageFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Responsive */
@media (max-width: 1100px) {
  .hq2-kpis { grid-template-columns: repeat(3, 1fr); }
  .hq2-today-row { grid-template-columns: 1fr; }
  .hq2-charts-row { grid-template-columns: 1fr; }
  .hq2-dept-grid { grid-template-columns: 1fr; }
  .hq2-stations { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  /* Hide rail at PHONE size only — tablets (641-960) keep the rail
     because there's room and it's the primary navigation. Below 640px
     the rail is replaced by a bottom tab bar (Phase 2 of the mobile
     rollout — see the MOBILE FOUNDATION block at the end of this file). */
  .hq2-rail { display: none; }
  .hq2-masthead, .hq2-statusline, .hq2-main { margin-left: 0; }
  .hq2-mh-divider, .hq2-mh-crumb { display: none; }
  .hq2-kpis { grid-template-columns: repeat(2, 1fr); }
  .hq2-stations { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   RAIL — group styling
   The rail's RAIL_GROUPS render thin captions between layer clusters.
   Captions read like vertical chapter markers — small, lowercase, gold.
   ════════════════════════════════════════════════════════════════════ */
.hq2-rail-group { display: flex; flex-direction: column; align-items: stretch; gap: 4px; width: 100%; }
.hq2-rail-group + .hq2-rail-group {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.hq2-rail-cap {
  font-family: var(--font-ui);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .42);
  padding: 4px 0 2px;
  text-align: center;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   ARCHITECTURE PAGE — the visual stack diagram.
   Mirrors Salesforce Agentic Enterprise architecture but recast for
   tandoco. Four layered cards + Trust foundation. Each tile is a
   clickable route. Tone: editorial-meets-ops. Heading is Inter (per
   the brand-only-Fraunces rule), but heavier and a touch larger.
   ════════════════════════════════════════════════════════════════════ */

.hq2-arch-hero {
  margin: 0 0 var(--s-5);
}
.hq2-arch-h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(28px, 3.5vw, 40px);
  letter-spacing: -.025em;
  color: var(--ink);
  margin: 0 0 var(--s-2);
  line-height: 1.05;
}
.hq2-arch-h1::after {
  content: '';
  display: block;
  width: 64px;
  height: 3px;
  background: var(--tc-gold);
  margin-top: var(--s-3);
  border-radius: 2px;
}
.hq2-arch-sub {
  font-family: var(--font-ui);
  font-size: var(--t-15);
  color: var(--ink-3);
  max-width: 680px;
  line-height: 1.55;
  margin: 0;
}

.hq2-arch-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.hq2-arch-stack::before {
  /* connecting spine on the left so the stack reads as one system */
  content: '';
  position: absolute;
  left: -2px; top: 24px; bottom: 24px;
  width: 2px;
  background: linear-gradient(180deg,
    rgba(60, 130, 246, .3),
    rgba(200, 169, 110, .3),
    rgba(15, 18, 22, .3),
    rgba(120, 90, 200, .3));
  border-radius: 2px;
}

.hq2-arch-layer {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4) var(--s-5);
  position: relative;
}
.hq2-arch-layer.is-engagement { background: linear-gradient(180deg, #F4F8FE, var(--surface) 50%); }
.hq2-arch-layer.is-agency     { background: linear-gradient(180deg, #FCF6E9, var(--surface) 50%); }
.hq2-arch-layer.is-work       { background: linear-gradient(180deg, #F2F4F7, var(--surface) 50%); }
.hq2-arch-layer.is-context    { background: linear-gradient(180deg, #F4F1FB, var(--surface) 50%); }

.hq2-arch-layer-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-arch-layer-title { display: flex; flex-direction: column; gap: 2px; }
.hq2-arch-layer-tag {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-18);
  letter-spacing: -.015em;
  color: var(--ink);
}
.hq2-arch-layer-sub {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
  letter-spacing: .01em;
  text-transform: lowercase;
}
.hq2-arch-layer-side {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(15, 18, 22, .04);
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.hq2-arch-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--s-2);
}
.hq2-arch-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease;
  cursor: pointer;
  min-height: 44px;
}
.hq2-arch-tile:hover {
  transform: translateY(-1px);
  border-color: var(--tc-gold);
  box-shadow: 0 6px 16px rgba(15, 18, 22, .08);
}
.hq2-arch-tile.is-soon {
  opacity: .72;
}
.hq2-arch-tile.is-soon::after {
  content: 'soon';
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  background: rgba(15, 18, 22, .06);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: auto;
}
.hq2-arch-tile-icon {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  flex-shrink: 0;
}
.hq2-arch-tile-icon svg { display: block; }
.hq2-arch-tile.is-soon .hq2-arch-tile-icon { background: var(--ink-4); }
.hq2-arch-tile-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* tandoco 360 wrapper inside the Work layer — visually inset to read
   as a "platform inside the platform" the way Customer 360 does */
.hq2-arch-360 {
  background: rgba(255, 255, 255, .65);
  border: 1px dashed rgba(15, 18, 22, .12);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-arch-360-mark {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-14);
  letter-spacing: -.01em;
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
}
.hq2-arch-360-mark::before {
  content: '';
  width: 14px; height: 14px;
  border-radius: 50%;
  background: conic-gradient(var(--tc-gold), #3C82F6, #6F4DC7, var(--tc-gold));
}
.hq2-arch-360-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
}
.hq2-arch-360-row-alt {
  grid-template-columns: repeat(5, 1fr);
}
.hq2-arch-360-row .hq2-arch-tile {
  padding: 8px;
  flex-direction: column;
  text-align: center;
  align-items: center;
  gap: 6px;
  font-size: var(--t-11);
  min-height: 76px;
  justify-content: center;
}
.hq2-arch-360-row .hq2-arch-tile.is-soon::after { display: none; }
.hq2-arch-360-row .hq2-arch-tile-label { white-space: normal; line-height: 1.2; }

/* Trust layer at the foot — reads as foundation/bedrock */
.hq2-arch-trust {
  margin-top: var(--s-5);
}
.hq2-arch-trust-rule {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-2);
}
.hq2-arch-trust-rule::before,
.hq2-arch-trust-rule::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rule);
}
.hq2-arch-trust-rule span {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 0 var(--s-2);
}
.hq2-arch-trust-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--s-2);
  background: linear-gradient(180deg, #F0EFFB, #F8F8FC);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.hq2-arch-trust-tile {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}
.hq2-arch-trust-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-14);
  color: var(--ink);
}
.hq2-arch-trust-sub {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
  letter-spacing: .01em;
}

@media (max-width: 1100px) {
  .hq2-arch-360-row { grid-template-columns: repeat(5, 1fr); }
  .hq2-arch-360-row-alt { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .hq2-arch-360-row,
  .hq2-arch-360-row-alt { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   HUB PAGES — the 15 Customer 360-style cloud surfaces.
   Hero + KPI strip + two-panel grid (feeders · roadmap).
   ════════════════════════════════════════════════════════════════════ */

.hq2-hub-hero {
  margin: 0 0 var(--s-4);
  padding: var(--s-5);
  background: linear-gradient(180deg, var(--surface), rgba(255,255,255,0));
  border-radius: var(--r-lg);
  border: 1px solid var(--rule);
}
.hq2-hub-eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 8px;
}
.hq2-hub-h1 {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1.05;
}
.hq2-hub-mission {
  font-family: var(--font-ui);
  font-size: var(--t-15);
  color: var(--ink-2);
  max-width: 720px;
  margin: 0;
  line-height: 1.5;
}

.hq2-hub-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-4);
}
.hq2-hub-kpi {
  background: var(--surface);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-hub-kpi-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-hub-kpi-val {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-22);
  letter-spacing: -.02em;
  color: var(--ink);
}
.hq2-hub-kpi-meta {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
}

.hq2-hub-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
}
.hq2-hub-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-4);
}
.hq2-hub-panel h3 {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 var(--s-3);
}

.hq2-hub-feeders { display: flex; flex-direction: column; gap: 8px; }
.hq2-hub-feeder {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, transform .12s ease;
}
.hq2-hub-feeder:hover { border-color: var(--tc-gold); transform: translateX(2px); }
.hq2-hub-feeder-icon {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  border-radius: 8px;
  flex-shrink: 0;
}
.hq2-hub-feeder-body { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-hub-feeder-name {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-14);
  color: var(--ink);
}
.hq2-hub-feeder-desc {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-hub-feeder-tag {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.hq2-hub-feeder-tag.is-live { background: #E8F5EE; color: #1F7A3F; }
.hq2-hub-feeder-tag.is-soon { background: rgba(15, 18, 22, .06); color: var(--ink-3); }

.hq2-hub-roadmap { display: flex; flex-direction: column; gap: var(--s-3); }
.hq2-hub-stage {
  border-left: 3px solid var(--rule);
  padding-left: var(--s-3);
}
.hq2-hub-stage.is-live    { border-left-color: var(--tc-gold); }
.hq2-hub-stage.is-next    { border-left-color: #3C82F6; }
.hq2-hub-stage.is-horizon { border-left-color: #6F4DC7; }
.hq2-hub-stage-head {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hq2-hub-stage ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-hub-stage li {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  line-height: 1.5;
  padding-left: 14px;
  position: relative;
}
.hq2-hub-stage li::before {
  content: '·';
  position: absolute; left: 0; top: 0;
  color: var(--ink-4);
  font-weight: 700;
}
.hq2-hub-empty {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3);
  margin: 0;
}

@media (max-width: 880px) {
  .hq2-hub-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   AGENT PAGES — Agency layer surfaces (Concierge, etc.)
   Two-pane: queue on the left, draft pane on the right. Shares look
   with the chat module but tighter — the agent IS the workflow.
   ════════════════════════════════════════════════════════════════════ */

/* ── Friendly hero — pastel gradient + glassmorphic card + spring entry
   Inspired by the onboarding tool's warm, welcoming feel. The agent
   pages were reading too "enterprise-tool" — this brings them in line
   with the hospitable vibe of the customer-facing flows. */
.hq2-agent-hero {
  margin: 0 0 var(--s-4);
  padding: clamp(20px, 3vw, 36px);
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(20, 16, 68, .06);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(560px 320px at -8% 100%, rgba(220, 238, 255, .55) 0%, transparent 60%),
    radial-gradient(480px 360px at 50% 50%,  rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 24px 60px -22px rgba(20, 16, 68, .14);
  /* Spring-y card entry — same ease + overshoot as onboarding cards */
  animation: hq2-friendly-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
@keyframes hq2-friendly-in {
  0%   { opacity: 0; transform: translateY(20px) scale(.96); }
  60%  { opacity: 1; transform: translateY(-4px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .hq2-agent-hero { animation: none; }
}

/* Soft stars decorating the top-right — the onboarding crew uses
   bobbing stars; we use a single subtle bobbing gold dot to evoke
   the same energy without drawing too much attention. */
.hq2-agent-hero::before {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@keyframes hq2-friendly-bob {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-6px, 4px) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  .hq2-agent-hero::before { animation: none; }
}

.hq2-agent-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Tiny gold dot before the eyebrow, mirrors the onboarding wordmark dot */
.hq2-agent-eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B6914, #F0DDB3);
  display: inline-block;
}

.hq2-agent-h1 {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(30px, 3.6vw, 44px);
  letter-spacing: -.035em;
  color: #141044;
  margin: 0 0 12px;
  line-height: .98;
}
/* Em emphasis on a key word in the headline — onboarding uses gold
   span emphasis to make the title feel warm + colorful. Match here. */
.hq2-agent-h1 em {
  font-style: normal;
  color: #8B6914;
  font-weight: 900;
}

.hq2-agent-mission {
  font-family: var(--font-ui);
  font-size: clamp(15px, 1.4vw, 17px);
  color: #3D3E5C;
  max-width: 56ch;
  margin: 0 0 var(--s-4);
  line-height: 1.55;
  font-weight: 500;
}

/* Stats row → sticker-tilt chips, like the onboarding sticker chips.
   Each stat sits on a glassy white pill with a subtle hand-placed
   rotation. Hover lifts + un-rotates. */
.hq2-agent-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 4px;
}
.hq2-agent-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .8);
  border: 1.5px solid rgba(20, 16, 68, .08);
  box-shadow: 0 2px 6px rgba(20, 16, 68, .04);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, border-color .2s;
}
.hq2-agent-stats .hq2-agent-stat:nth-child(odd)  { transform: rotate(-1.2deg); }
.hq2-agent-stats .hq2-agent-stat:nth-child(even) { transform: rotate(1deg); }
.hq2-agent-stats .hq2-agent-stat:nth-child(3n)   { transform: rotate(.5deg); }
.hq2-agent-stat:hover {
  transform: translateY(-2px) rotate(0) !important;
  border-color: rgba(20, 16, 68, .18);
  box-shadow: 0 8px 20px -6px rgba(20, 16, 68, .18);
}
.hq2-agent-stat .lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #7A7892;
}
.hq2-agent-stat b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-14);
  color: #141044;
  letter-spacing: -.01em;
}

.hq2-agent-grid {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: var(--s-3);
  align-items: stretch;
  height: calc(100vh - 320px);
  min-height: 540px;
}
.hq2-agent-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.hq2-agent-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.hq2-agent-panel-head h3 {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.hq2-agent-panel-head .meta {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
}

.hq2-agent-list {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-agent-thread {
  text-align: left;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: 10px 12px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background .15s ease, border-color .15s ease;
  font-family: var(--font-ui);
}
.hq2-agent-thread:hover { background: var(--surface-2); }
.hq2-agent-thread.is-active {
  background: var(--surface-2);
  border-color: var(--tc-gold);
}
.hq2-agent-thread-head {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-13);
}
.hq2-agent-thread-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--ink-4);
  flex-shrink: 0;
}
.hq2-agent-thread-dot.is-email { background: #3C82F6; }
.hq2-agent-thread-dot.is-sms { background: #1F7A3F; }
.hq2-agent-thread-dot.is-ticket { background: var(--tc-gold); }
.hq2-agent-thread-who {
  font-weight: 700;
  color: var(--ink);
  flex: 1;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-agent-thread-ago {
  font-size: var(--t-11);
  color: var(--ink-3);
  flex-shrink: 0;
}
.hq2-agent-thread-subject {
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-agent-thread-snippet {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hq2-agent-empty {
  padding: var(--s-4);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: var(--t-12);
}
.hq2-agent-empty-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--s-7) var(--s-4);
  gap: var(--s-2);
  flex: 1;
}
.hq2-agent-empty-large p { margin: 0; }
.hq2-agent-empty-large p.muted { color: var(--ink-4); font-size: var(--t-12); }
/* Friendlier greeting line in empty states — bigger, warmer, two-line */
.hq2-agent-empty-greet {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(16px, 1.7vw, 20px);
  letter-spacing: -.018em;
  color: #141044;
  line-height: 1.35;
  text-align: center;
  margin: 0 0 6px !important;
  max-width: 30ch;
}
.hq2-agent-empty-icon {
  font-size: 28px;
  color: var(--tc-gold);
  margin-bottom: var(--s-2);
}

.hq2-agent-draft-body {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-agent-thread-context {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-agent-thread-context-head {
  display: flex; justify-content: space-between; gap: var(--s-3);
  font-family: var(--font-ui); font-size: var(--t-13);
  color: var(--ink);
}
.hq2-agent-thread-context-head .muted {
  color: var(--ink-3); font-weight: 400;
}
.hq2-agent-thread-context-subject {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: var(--t-14);
  color: var(--ink);
}
.hq2-agent-thread-context-body {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
}

.hq2-agent-draft-actions {
  display: flex; gap: var(--s-2);
  align-items: center;
}
.hq2-agent-draft-output[hidden] { display: none; }
.hq2-agent-draft-pending {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3);
  font-style: italic;
}
.hq2-agent-draft-error {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: #C62F2F;
  background: #FBE9E9;
  border: 1px solid #F0C2C2;
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.hq2-agent-draft-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 6px;
}
.hq2-agent-draft-textarea {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  line-height: 1.55;
  resize: vertical;
  min-height: 200px;
}
.hq2-agent-draft-textarea:focus {
  outline: 2px solid var(--tc-gold);
  outline-offset: 1px;
}
.hq2-agent-draft-tools {
  display: flex; gap: var(--s-2); align-items: center;
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.hq2-agent-draft-note {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-left: auto;
}

/* spinner used inside the "drafting…" button */
.hq2-spinner {
  display: inline-block;
  width: 12px; height: 12px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: hq2-spin 0.8s linear infinite;
  vertical-align: -1px;
}
@keyframes hq2-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce){
  .hq2-spinner { animation: none; }
}

@media (max-width: 980px) {
  .hq2-agent-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .hq2-agent-panel { min-height: 360px; }
}

/* ════════════════════════════════════════════════════════════════════
   SALES HUB — funnel + recent orders + pipeline value
   ════════════════════════════════════════════════════════════════════ */

.hq2-sales-funnel {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin-bottom: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hq2-sales-stage {
  flex: 1;
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
  border-right: 1px solid var(--rule);
}
.hq2-sales-stage:last-child { border-right: 0; }
.hq2-sales-stage .lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-sales-stage b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-30);
  letter-spacing: -.02em;
  color: var(--ink);
  line-height: 1;
}
.hq2-sales-stage .hint {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-4);
}
.hq2-sales-arrow {
  width: 0;
  align-self: center;
  flex-shrink: 0;
  border-style: solid;
  border-width: 12px 0 12px 10px;
  border-color: transparent transparent transparent var(--rule);
  margin: 0 -5px;
  position: relative;
  z-index: 1;
}

.hq2-sales-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-sales-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hq2-sales-panel .hq2-panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}

.hq2-sales-orders { display: flex; flex-direction: column; }
.hq2-sales-order {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.hq2-sales-order:last-child { border-bottom: 0; }
.hq2-sales-order-who {
  font-weight: 700;
  font-size: var(--t-14);
  color: var(--ink);
}
.hq2-sales-order-when {
  font-size: var(--t-11);
  color: var(--ink-3);
}
.hq2-sales-order-amt {
  font-weight: 800;
  font-size: var(--t-15);
  color: var(--ink);
  letter-spacing: -.01em;
}

.hq2-sales-pipeline { padding: var(--s-3); display: flex; flex-direction: column; gap: 6px; }
.hq2-sales-pipe-stage {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: var(--r-md);
  font-family: var(--font-ui);
}
.hq2-sales-pipe-stage-name {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
  text-transform: capitalize;
}
.hq2-sales-pipe-stage-count {
  font-size: var(--t-11);
  color: var(--ink-3);
}
.hq2-sales-pipe-stage-r {
  font-weight: 800;
  font-size: var(--t-14);
  color: var(--ink);
}
.hq2-sales-empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: var(--t-12);
}

.hq2-sales-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-2);
}
.hq2-sales-deep {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  transition: border-color .15s ease, transform .12s ease;
}
.hq2-sales-deep:hover { border-color: var(--tc-gold); transform: translateX(2px); }
.hq2-sales-deep-arrow {
  color: var(--ink-3);
  font-size: var(--t-15);
}

@media (max-width: 980px) {
  .hq2-sales-grid { grid-template-columns: 1fr; }
  .hq2-sales-row  { grid-template-columns: 1fr; }
  .hq2-sales-funnel { flex-direction: column; }
  .hq2-sales-stage { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hq2-sales-stage:last-child { border-bottom: 0; }
  .hq2-sales-arrow { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   MARKETING HUB — Claude blast composer + recent blasts list
   ════════════════════════════════════════════════════════════════════ */

.hq2-mkt-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-3);
}
.hq2-mkt-kpi {
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-mkt-kpi .lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-mkt-kpi b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-22);
  color: var(--ink);
  letter-spacing: -.02em;
}

.hq2-mkt-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--s-3);
}
.hq2-mkt-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
}
.hq2-mkt-panel .hq2-panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}

.hq2-mkt-composer-body {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hq2-mkt-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.hq2-mkt-audience {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hq2-mkt-aud-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .12s ease, background .12s ease;
}
.hq2-mkt-aud-chip:hover { border-color: var(--tc-gold); }
.hq2-mkt-aud-chip.is-active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.hq2-mkt-aud-count {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  background: rgba(255, 255, 255, .14);
  color: inherit;
  padding: 2px 6px;
  border-radius: 999px;
}
.hq2-mkt-aud-chip:not(.is-active) .hq2-mkt-aud-count {
  background: rgba(15, 18, 22, .07);
}

.hq2-mkt-goal {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  line-height: 1.5;
  resize: vertical;
}
.hq2-mkt-goal:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }

.hq2-mkt-actions { display: flex; gap: var(--s-2); }

.hq2-mkt-output[hidden] { display: none; }
.hq2-mkt-pending {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3);
  font-style: italic;
}
.hq2-mkt-error {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: #C62F2F;
  background: #FBE9E9;
  border: 1px solid #F0C2C2;
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.hq2-mkt-draft-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 6px;
}
.hq2-mkt-subject {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-16);
  font-weight: 700;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 10px 12px;
}
.hq2-mkt-subject:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }
.hq2-mkt-body {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-3);
  line-height: 1.55;
  resize: vertical;
  min-height: 220px;
}
.hq2-mkt-body:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }
.hq2-mkt-tools {
  display: flex; gap: var(--s-2); align-items: center;
  margin-top: var(--s-2);
  flex-wrap: wrap;
}
.hq2-mkt-note {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-left: auto;
}

.hq2-mkt-blasts {
  display: flex; flex-direction: column;
  max-height: 600px;
  overflow-y: auto;
}
.hq2-mkt-blast {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.hq2-mkt-blast:last-child { border-bottom: 0; }
.hq2-mkt-blast-l { min-width: 0; flex: 1; }
.hq2-mkt-blast-subj {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-mkt-blast-meta {
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-top: 2px;
}
.hq2-mkt-blast-tag {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.hq2-mkt-blast-tag.is-draft { background: rgba(15, 18, 22, .06); color: var(--ink-3); }
.hq2-mkt-blast-tag.is-sent  { background: #E8F5EE; color: #1F7A3F; }
.hq2-mkt-blast-tag.is-scheduled { background: rgba(60, 130, 246, .12); color: #2A5BB8; }
.hq2-mkt-blast-tag.is-sending { background: rgba(200, 169, 110, .18); color: #8E6C2E; }
/* Tighter blast row right-side: send button + tag side by side */
.hq2-mkt-blast-r { display: flex; align-items: center; gap: 8px; }

.hq2-mkt-empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: var(--t-12);
}

@media (max-width: 980px) {
  .hq2-mkt-grid { grid-template-columns: 1fr; }
  .hq2-mkt-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   PILLS → ROUNDED RECTANGLES (per Tommy 2026-05-07)
   Every chip/tag/badge that previously used border-radius: 999px (a
   "pill") now uses 6px (a soft rectangle). Progress bars stay pill-
   shaped because they're functional shapes, not labels. Dots inside
   chips are removed.
   ════════════════════════════════════════════════════════════════════ */
.hq2-greet-fact,
.hq2-greet-fact-tag,
.hq2-arch-layer-side,
.hq2-arch-tile.is-soon::after,
.hq2-hub-feeder-tag,
.hq2-hub-feeder-tag.is-live,
.hq2-hub-feeder-tag.is-soon,
.hq2-mkt-aud-chip,
.hq2-mkt-aud-count,
.hq2-mkt-blast-tag,
.hq2-mkt-blast-tag.is-draft,
.hq2-mkt-blast-tag.is-sent,
.hq2-mkt-blast-tag.is-scheduled {
  border-radius: 6px !important;
}

/* No dots. Hide the various decorative colored-dot indicators that
   sat next to/inside pill-shaped UI. The information is in the
   text/colored stripes already; the dot was visual redundancy. */
.hq2-agent-thread-dot,
.hq2-sl-pulse .dot,
.hq2-chat-empty-glyph,
.hq2-chat-row-glyph,
.hq2-chat-row-dot,
.watch-empty-glyph {
  display: none !important;
}

/* ════════════════════════════════════════════════════════════════════
   LOADING SCREEN — polished. Adds a slow ambient bg glow, the
   shimmering Fraunces gold wordmark, a tagline, the existing fill
   bar, and a tiny footer. Minimum dwell time is enforced in JS so
   this actually shows.
   ════════════════════════════════════════════════════════════════════ */

.hq2-loading {
  background: radial-gradient(ellipse at center top, #1A1F26, var(--chrome-bg) 60%);
}
.hq2-loading-glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 720px; height: 720px;
  background: radial-gradient(circle, rgba(200, 169, 110, .14), transparent 60%);
  pointer-events: none;
  filter: blur(40px);
  animation: hq2-load-pulse 4s ease-in-out infinite;
}
@keyframes hq2-load-pulse {
  0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 1;  transform: translate(-50%, -50%) scale(1.08); }
}
.hq2-loading-tagline {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-top: -4px;
}
.hq2-loading-foot {
  position: absolute;
  bottom: 28px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .28);
}
@media (prefers-reduced-motion: reduce) {
  .hq2-loading-glow { animation: none; opacity: .8; }
}

/* ════════════════════════════════════════════════════════════════════
   MASTHEAD "tandoco.com" link — quiet but accessible
   ════════════════════════════════════════════════════════════════════ */
body.hq2-app .hq2-mh-site,
body.hq2-app .hq2-mh-site:link,
body.hq2-app .hq2-mh-site:visited {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink) !important;
  text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
body.hq2-app .hq2-mh-site:hover {
  border-color: var(--tc-gold);
  background: var(--surface-2);
}

/* ════════════════════════════════════════════════════════════════════
   CHAT — channel header delete button (admin / creator only)
   ════════════════════════════════════════════════════════════════════ */
.hq2-chat-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hq2-chat-head-del {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.hq2-chat-head-del:hover {
  color: #C62F2F;
  border-color: #F0C2C2;
  background: #FBE9E9;
}
.hq2-chat-head-del svg { display: block; }

/* ════════════════════════════════════════════════════════════════════
   SUPPLY CHAIN HUB — low-stock board + Claude PO drafter
   ════════════════════════════════════════════════════════════════════ */

.hq2-supply-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-bottom: var(--s-3);
  min-width: 0;
  max-width: 100%;
}
.hq2-supply-kpi {
  background: var(--surface);
  padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
  /* min-width:0 + truncate children — see note on .hq2-ovr-tile for
     why this is required so the 1fr grid columns don't get blown out
     by a wide value on narrow viewports. */
  min-width: 0;
  overflow: hidden;
}
.hq2-supply-kpi .lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  min-width: 0;
  /* Wrap, don't truncate — labels like "VENDORS AFFECTED" must be
     readable in full on a phone. The 1-col stack at ≤480px gives them
     the room. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hq2-supply-kpi b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-22);
  color: var(--ink);
  letter-spacing: -.02em;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* KPI tiles are now tappable links → keep them looking like tiles. */
.hq2-supply-kpi { text-decoration: none; color: inherit; transition: background .15s; }
a.hq2-supply-kpi:hover { background: var(--surface-2, #f6f5f1); }
.hq2-supply-kpi .hint {
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-4, #8a8780);
  overflow-wrap: anywhere; word-break: break-word;
}

/* Primary action cards — Count / Shopping / Activity. */
.hq2-supply-actions {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.hq2-supply-act {
  display: flex; align-items: center; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .05s;
}
.hq2-supply-act:hover { border-color: var(--ink-3); }
.hq2-supply-act:active { transform: scale(.99); }
.hq2-supply-act.is-primary { border-color: color-mix(in srgb, var(--accent, #1B1A6B) 35%, var(--rule)); }
.hq2-supply-act .ico { font-size: 22px; line-height: 1; flex: none; }
.hq2-supply-act .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-supply-act .t b { font-family: var(--font-ui); font-weight: 800; font-size: var(--t-16, 16px); color: var(--ink); }
.hq2-supply-act .t small { font-family: var(--font-ui); font-size: 11px; color: var(--ink-3); overflow-wrap: anywhere; }
@media (max-width: 720px){ .hq2-supply-actions { grid-template-columns: 1fr; } }

.hq2-supply-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s-3);
}
.hq2-supply-panel {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 480px;
}
.hq2-supply-panel .hq2-panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}

.hq2-supply-vendors {
  padding: var(--s-3);
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto;
}
.hq2-supply-vendor {
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-ui);
}
.hq2-supply-vendor:hover { border-color: var(--tc-gold); transform: translateX(2px); }
.hq2-supply-vendor.is-active {
  border-color: var(--tc-gold);
  background: var(--surface-2);
}
.hq2-supply-vendor-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hq2-supply-vendor-name {
  font-weight: 800;
  font-size: var(--t-15);
  color: var(--ink);
}
.hq2-supply-vendor-count {
  font-size: var(--t-11);
  color: var(--ink-3);
  font-weight: 600;
  background: rgba(15, 18, 22, .06);
  padding: 3px 8px;
  border-radius: 6px;
}
.hq2-supply-vendor-items {
  display: flex; flex-direction: column; gap: 3px;
}
.hq2-supply-item {
  display: flex; justify-content: space-between;
  font-size: var(--t-12);
  color: var(--ink-2);
}
.hq2-supply-item .muted { color: var(--ink-3); }

.hq2-supply-draft-body {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  overflow-y: auto;
}
.hq2-supply-context {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
}
.hq2-supply-context-head {
  display: flex; justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-ui);
}
.hq2-supply-context-head .muted { color: var(--ink-3); font-weight: 400; }
.hq2-supply-context-list {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-2);
}
.hq2-supply-context-item {
  display: flex; justify-content: space-between;
}
.hq2-supply-context-item .muted { color: var(--ink-3); }

.hq2-supply-empty {
  padding: var(--s-5);
  text-align: center;
  color: var(--ink-3);
  font-family: var(--font-ui);
  font-size: var(--t-12);
}

@media (max-width: 980px) {
  .hq2-supply-grid { grid-template-columns: 1fr; }
  .hq2-supply-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ── Phone-targeted polish for the Supply chain hub ─────────────
   At ≤640px the hub's grids, KPIs, tiles, and 11-tab subnav need
   to fit a 360-430px viewport without horizontal overflow. The
   subnav becomes a horizontally scrollable strip (no wrap), the
   panels lose their min-height, and the hub hero / KPI labels
   tighten one notch. */
@media (max-width: 640px) {
  body.hq2-app .hq2-supply-panel { min-height: 0; }
  body.hq2-app .hq2-supply-panel .hq2-panel-head { padding: 10px 12px; }
  body.hq2-app .hq2-supply-vendors { padding: 10px; }
  body.hq2-app .hq2-supply-draft-body { padding: 12px; }
  body.hq2-app .hq2-supply-kpi { padding: 10px 12px; }
  body.hq2-app .hq2-supply-kpi b { font-size: 18px; }
  body.hq2-app .hq2-supply-kpi .lbl { font-size: 9px; }

  /* Overview tiles — keep 2-col on small phones, tighten typography. */
  body.hq2-app .hq2-ovr-tiles { gap: 8px; margin: 8px 0 4px; }
  body.hq2-app .hq2-ovr-tile { padding: 10px 12px; border-radius: 10px; }
  body.hq2-app .hq2-ovr-tile b { font-size: 20px; }
  body.hq2-app .hq2-ovr-tile .lbl { font-size: 10px; }
  body.hq2-app .hq2-ovr-tile .hint { font-size: 10px; }

  /* Supply-chain subnav (11 tabs) — horizontal scroll instead of
     wrapping to 3-4 rows on a phone. Matches .hq2-mkt-tabs pattern. */
  body.hq2-app .hq2-hub-hero .hq2-fs-subnav,
  body.hq2-app .hq2-fs-hero-with-tabs .hq2-fs-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin-left: -14px;
    margin-right: -14px;
    padding-left: 14px;
    padding-right: 14px;
    gap: 4px;
  }
  body.hq2-app .hq2-fs-subnav::-webkit-scrollbar { display: none; }
  body.hq2-app .hq2-fs-subnav .hq2-mkt-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 10px;
    font-size: 12px;
  }

  /* Supply-chain hub hero — drop oversized intro text on phones. */
  body.hq2-app .hq2-hub-hero .hq2-hub-mission { font-size: 13px; line-height: 1.45; }
}

/* ════════════════════════════════════════════════════════════════════
   RAIL SCROLL FIX — the icon rail was cutting off when the rail
   contents (4 layer groups · 13 icons · captions · brand · foot)
   exceeded viewport height. Now the icon area scrolls while the
   brand dot stays pinned at top and the foot stays at the bottom.
   ════════════════════════════════════════════════════════════════════ */

.hq2-rail {
  /* Allow internal scroll without breaking the fixed-position layout */
  overflow: hidden;
}
.hq2-rail-icons {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  align-items: center;
  /* Hide native scrollbar visually but keep scrollability */
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, .14) transparent;
  padding-bottom: 4px;
}
.hq2-rail-icons::-webkit-scrollbar { width: 4px; }
.hq2-rail-icons::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); border-radius: 4px; }
.hq2-rail-icons::-webkit-scrollbar-track { background: transparent; }
.hq2-rail-foot {
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   SEARCH BOXES — give the magnifying-glass icon proper breathing
   room. Was sitting flush against the input box edge; now there's
   8-12px of padding plus the icon sits in a slim trailing block.
   ════════════════════════════════════════════════════════════════════ */

.hq2-cmdk-trigger {
  /* Masthead Cmd+K trigger — 14px between icon, label, kbd */
  gap: 12px !important;
  padding: 6px 12px 6px 14px !important;
}
.hq2-cmdk-trigger svg { margin-right: 2px; }

.hq2-cmdk { /* Cmd+K palette */ }
.hq2-cmdk-input {
  /* Don't let the magnifier visually crowd the typed query */
  padding-left: 44px !important;
}
.hq2-cmdk::before {
  /* Render the magnifier as a positioned pseudo so we control spacing */
  /* No-op when the existing palette markup doesn't have ::before — kept
     as defensive override for future palette redesigns. */
}

.hq2-chat-search,
.hq2-cmdbar {
  /* Already use display:flex with a leading svg + input. Bump the gap
     so the icon doesn't sit on the input box edge. */
  gap: 12px !important;
  padding-left: 14px !important;
}

/* ════════════════════════════════════════════════════════════════════
   CONTENT AGENT — mode picker · brief form · recent drafts
   ════════════════════════════════════════════════════════════════════ */

.hq2-content-modes {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-3);
}
.hq2-content-mode {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-ui);
}
.hq2-content-mode:hover { border-color: var(--tc-gold); transform: translateY(-1px); }
.hq2-content-mode.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.hq2-content-mode-name {
  font-weight: 800;
  font-size: var(--t-14);
  letter-spacing: -.01em;
}
.hq2-content-mode-desc {
  font-size: var(--t-11);
  color: var(--ink-3);
}
.hq2-content-mode.is-active .hq2-content-mode-desc { color: rgba(255,255,255,.65); }

.hq2-content-grid {
  height: auto;
  min-height: 0;
}
.hq2-content-form {
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
  flex: 1;
  overflow-y: auto;
}
.hq2-content-input {
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-content-input-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-content-input .hq2-input {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
}
.hq2-content-input .hq2-input:focus {
  outline: 2px solid var(--tc-gold);
  outline-offset: 1px;
}
.hq2-content-actions {
  padding: 0 var(--s-4) var(--s-4);
  display: flex; gap: var(--s-2);
  flex-shrink: 0;
}

.hq2-content-recent {
  margin-top: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.hq2-content-recent .hq2-panel-head {
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
}
.hq2-content-recent-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 8px;
  padding: var(--s-3);
}
.hq2-content-recent-row {
  text-align: left;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-ui);
  min-height: 100px;
}
.hq2-content-recent-row:hover { border-color: var(--tc-gold); transform: translateY(-1px); }
.hq2-content-recent-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hq2-content-recent-mode {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
}
.hq2-content-recent-ago {
  font-size: 10px;
  color: var(--ink-3);
}
.hq2-content-recent-title {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-content-recent-preview {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 980px) {
  .hq2-content-modes { grid-template-columns: repeat(2, 1fr); }
  .hq2-content-recent-list { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   PROJECTS — Jira-style PM module
   List + kanban toggle, project detail, tasks, comments, links,
   assignees, share-to-chat.
   ════════════════════════════════════════════════════════════════════ */

.hq2-page--crm .hq2-proj,
.hq2-page--crm .hq2-proj-detail {
  /* Full-bleed layout; uses --crm class hook */
  height: 100%;
  display: flex;
  flex-direction: column;
}
.hq2-proj-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.hq2-proj-head-l { display: flex; align-items: baseline; gap: var(--s-3); }
.hq2-proj-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-22);
  color: var(--ink);
  margin: 0;
  letter-spacing: -.01em;
}
.hq2-proj-meta { font-family: var(--font-ui); font-size: var(--t-12); color: var(--ink-3); }
.hq2-proj-head-r { display: flex; gap: var(--s-2); align-items: center; }

.hq2-proj-views {
  display: flex; gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px;
}
.hq2-proj-views button {
  font-family: var(--font-ui); font-size: var(--t-12); font-weight: 600;
  background: transparent; border: 0;
  color: var(--ink-3);
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}
.hq2-proj-views button.is-active {
  background: var(--ink); color: #fff;
}

.hq2-proj-body { flex: 1; min-height: 0; overflow: auto; padding: var(--s-4) var(--s-5); }
.hq2-proj-empty {
  text-align: center;
  padding: var(--s-7) var(--s-4);
  color: var(--ink-3);
  font-family: var(--font-ui);
}
.hq2-proj-empty h3 { font-size: var(--t-18); color: var(--ink); margin: 0 0 8px; }

/* ── Kanban ── */
.hq2-proj-kanban {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: var(--s-3);
  align-items: start;
}
.hq2-proj-col {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 200px;
}
.hq2-proj-col-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.hq2-proj-col-head b {
  font-size: var(--t-13);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.hq2-proj-col-head span {
  font-size: var(--t-11);
  color: var(--ink-3);
  background: rgba(15,18,22,.06);
  padding: 2px 8px;
  border-radius: 6px;
}
.hq2-proj-col-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
}
.hq2-proj-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  transition: border-color .12s ease, transform .12s ease;
  display: flex; flex-direction: column; gap: 8px;
  font-family: var(--font-ui);
}
.hq2-proj-card:hover { border-color: var(--tc-gold); transform: translateY(-1px); }
.hq2-proj-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hq2-proj-card-pri {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 7px;
  border-radius: 4px;
}
.hq2-proj-card-pri.is-pri-low    { background: #EEF1F5; color: #6B7280; }
.hq2-proj-card-pri.is-pri-medium { background: #E8F0FB; color: #2A5BB8; }
.hq2-proj-card-pri.is-pri-high   { background: #FCEBC0; color: #8E6C2E; }
.hq2-proj-card-pri.is-pri-urgent { background: #FBE9E9; color: #C62F2F; }
.hq2-proj-card-next {
  background: transparent; border: 1px solid var(--rule);
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 13px;
  transition: color .12s, border-color .12s, background .12s;
}
.hq2-proj-card-next:hover {
  color: var(--ink); border-color: var(--tc-gold); background: var(--surface-2);
}
.hq2-proj-card-title {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
  line-height: 1.35;
}
.hq2-proj-card-desc {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.4;
}
.hq2-proj-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 2px;
}
.hq2-proj-card-avs { display: flex; gap: -4px; }
.hq2-proj-av {
  /* Lock the dimensions so flex containers don't squash the circle
     into an ellipse — flex items shrink by default. */
  width: 22px;
  min-width: 22px;
  max-width: 22px;
  height: 22px;
  min-height: 22px;
  flex: 0 0 22px;
  border-radius: 50%;
  display: inline-grid;
  place-items: center;
  box-sizing: border-box;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  font-family: var(--font-ui);
  border: 2px solid #fff;
  margin-left: -6px;
  /* Avoid sub-pixel rendering anomalies that round-trip through
     transform calculations and look stretched */
  aspect-ratio: 1 / 1;
}
.hq2-proj-card-avs .hq2-proj-av:first-child { margin-left: 0; }
.hq2-proj-card-due {
  font-size: var(--t-11);
  color: var(--ink-3);
}

/* ── List view ── */
.hq2-proj-list {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.hq2-proj-list-head,
.hq2-proj-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) 120px 100px 1fr 100px;
  gap: var(--s-3);
  padding: 10px 14px;
  align-items: center;
  font-family: var(--font-ui);
  font-size: var(--t-13);
}
.hq2-proj-list-head {
  background: var(--surface-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.hq2-proj-row {
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  color: var(--ink);
  transition: background .12s;
}
.hq2-proj-row:last-child { border-bottom: 0; }
.hq2-proj-row:hover { background: var(--surface-2); }
.hq2-proj-row-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq2-proj-row-tag {
  display: inline-flex;
  font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
}
.hq2-proj-row-tag.is-backlog     { background: rgba(15,18,22,.06); color: var(--ink-3); }
.hq2-proj-row-tag.is-in_progress { background: #E8F0FB; color: #2A5BB8; }
.hq2-proj-row-tag.is-review      { background: #FCEBC0; color: #8E6C2E; }
.hq2-proj-row-tag.is-done        { background: #E8F5EE; color: #1F7A3F; }
.hq2-proj-row-tag.is-pri-low,
.hq2-proj-row-tag.is-pri-medium,
.hq2-proj-row-tag.is-pri-high,
.hq2-proj-row-tag.is-pri-urgent { background: rgba(15,18,22,.04); color: var(--ink-3); }
.hq2-proj-row-tag.is-pri-urgent { background: #FBE9E9; color: #C62F2F; }
.hq2-proj-row-tag.is-pri-high   { background: #FCEBC0; color: #8E6C2E; }
.hq2-proj-row-assignees, .hq2-proj-row-due {
  font-size: var(--t-12);
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ── Detail page ── */
.hq2-proj-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.hq2-proj-back {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3);
  text-decoration: none;
}
.hq2-proj-back:hover { color: var(--ink); }
.hq2-proj-detail-actions { display: flex; gap: var(--s-2); }
.hq2-proj-detail-body { flex: 1; min-height: 0; overflow: auto; }

.hq2-proj-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
}

.hq2-proj-title-edit {
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(22px, 2.5vw, 30px);
  letter-spacing: -.02em;
  color: var(--ink);
  background: transparent;
  border: 0;
  padding: 4px 0;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid transparent;
}
.hq2-proj-title-edit:focus {
  outline: none;
  border-bottom-color: var(--tc-gold);
}
.hq2-proj-prop-row {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
  margin-bottom: var(--s-4);
}
.hq2-proj-prop {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-ui);
}
.hq2-proj-prop .lbl {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-proj-prop select,
.hq2-proj-prop input {
  font-family: var(--font-ui); font-size: var(--t-13);
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  cursor: pointer;
}
.hq2-proj-prop select:focus,
.hq2-proj-prop input:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }

.hq2-proj-section {
  margin-bottom: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
}
.hq2-proj-section h4 {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}
.hq2-proj-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px;
}
.hq2-proj-section-head h4 { margin: 0; }
.hq2-proj-desc {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 12px;
  resize: vertical;
  line-height: 1.55;
}
.hq2-proj-desc:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }

.hq2-proj-tasks { display: flex; flex-direction: column; }
.hq2-proj-task {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-13);
}
.hq2-proj-task:last-child { border-bottom: 0; }
.hq2-proj-task.is-done .hq2-proj-task-title {
  text-decoration: line-through;
  color: var(--ink-3);
}
.hq2-proj-task-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--rule);
  background: #fff;
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
  color: #fff;
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .12s, border-color .12s;
}
.hq2-proj-task.is-done .hq2-proj-task-check {
  background: #1F7A3F;
  border-color: #1F7A3F;
}
.hq2-proj-task-title { color: var(--ink); }
.hq2-proj-task-add { margin-top: 8px; }
.hq2-proj-task-add .hq2-input { padding: 8px 10px; font-size: var(--t-12); }

.hq2-proj-comments { display: flex; flex-direction: column; gap: 12px; margin-bottom: 8px; }
.hq2-proj-comment { display: flex; gap: 10px; }
.hq2-proj-comment .hq2-proj-av {
  width: 28px; min-width: 28px; max-width: 28px;
  height: 28px; min-height: 28px;
  flex: 0 0 28px;
  font-size: 11px;
  border: 0;
  margin: 0;
}
.hq2-proj-comment-body { flex: 1; min-width: 0; }
.hq2-proj-comment-head {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--font-ui); font-size: var(--t-12);
  margin-bottom: 2px;
}
.hq2-proj-comment-head b { color: var(--ink); }
.hq2-proj-comment-head span { color: var(--ink-3); }
.hq2-proj-comment-text {
  font-family: var(--font-ui); font-size: var(--t-13);
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
}
.hq2-proj-comment-add .hq2-input { padding: 8px 10px; font-size: var(--t-13); width: 100%; }

.hq2-proj-side .hq2-proj-section { background: var(--surface); }
.hq2-proj-assignees { display: flex; flex-direction: column; gap: 6px; }
.hq2-proj-assignee {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 6px;
  font-family: var(--font-ui); font-size: var(--t-13);
}
.hq2-proj-assignee .hq2-proj-av {
  width: 24px; min-width: 24px; max-width: 24px;
  height: 24px; min-height: 24px;
  flex: 0 0 24px;
  font-size: 10px; border: 0; margin: 0;
}
.hq2-proj-assignee span { flex: 1; color: var(--ink); }
.hq2-proj-rm {
  background: transparent; border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 12px;
  padding: 0 4px;
}
.hq2-proj-rm:hover { color: #C62F2F; }
.hq2-proj-add-assignee {
  width: 100%;
  padding: 8px 10px;
  margin-top: 8px;
  font-size: var(--t-12);
}

.hq2-proj-links { display: flex; flex-direction: column; gap: 6px; }
.hq2-proj-link-chip {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  transition: border-color .12s, transform .12s;
}
.hq2-proj-link-chip:hover { border-color: var(--tc-gold); transform: translateX(2px); }
.hq2-proj-link-chip-kind {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
}
.hq2-proj-link-chip-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hq2-proj-link-rm {
  background: transparent; border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
}
.hq2-proj-link-rm:hover { color: #C62F2F; }
.hq2-proj-link-add { margin-top: 8px; }
.hq2-proj-link-add .hq2-input { padding: 8px 10px; font-size: var(--t-12); width: 100%; }

.hq2-proj-meta-card {
  background: var(--surface-2);
  border-radius: 6px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-2);
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-proj-meta-card span { color: var(--ink-3); }

/* ── Chat chip — for /hq2 hash links pasted in chat ── */
.hq2-chat-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  background: rgba(200, 169, 110, .14);
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  text-decoration: none;
  color: var(--ink) !important;
  vertical-align: middle;
}
.hq2-chat-chip:hover { background: rgba(200, 169, 110, .22); }
.hq2-chat-chip-kind {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
}

@media (max-width: 1100px) {
  .hq2-proj-detail-grid { grid-template-columns: 1fr; }
  .hq2-proj-kanban { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hq2-proj-kanban { grid-template-columns: 1fr; }
  .hq2-proj-list-head, .hq2-proj-row {
    grid-template-columns: 1fr 100px;
  }
  .hq2-proj-list-head span:nth-child(n+3), .hq2-proj-row > *:nth-child(n+3) { display: none; }
}

/* ════════════════════════════════════════════════════════════════════
   NO-EMOJI SUPPORT — adjustments after replacing every emoji glyph
   (the unicode-codepoint equivalents) with inline SVGs.
   ════════════════════════════════════════════════════════════════════ */
.dr-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  margin-right: 6px;
  color: var(--ink-3);
  vertical-align: -3px;
}
.dr-ico svg { display: block; }
.hq2-fatal-rule {
  width: 48px; height: 3px;
  background: var(--tc-gold);
  border-radius: 2px;
  margin: 0 auto var(--s-3);
}
.hq2-kitchen-card-r svg,
.hq2-kitchen-check-box svg,
.hq2-proj-task-check svg { display: block; }
.hq2-detail-close {
  display: inline-flex; align-items: center; justify-content: center;
}

/* ════════════════════════════════════════════════════════════════════
   PROJECT-MGMT ENHANCEMENTS
   - Drag-and-drop kanban visuals
   - Generic HQ2 modal
   - "New project" tabs + Claude brief preview
   - Resource picker (link picker) styling
   - Channel picker rows
   ════════════════════════════════════════════════════════════════════ */

/* ── Drag-and-drop visuals ── */
.hq2-proj-card { cursor: grab; }
.hq2-proj-card.is-dragging {
  opacity: .4;
  cursor: grabbing;
  box-shadow: 0 12px 28px rgba(15, 18, 22, .14);
}
.hq2-proj-col-body.is-drop-target {
  background: rgba(200, 169, 110, .12);
  outline: 2px dashed rgba(200, 169, 110, .55);
  outline-offset: -4px;
  border-radius: 8px;
}

/* ── Generic HQ2 modal ── */
/* z-index needs to sit ABOVE .hq2-modal-overlay (z:200) so confirm/
   prompt dialogs render on top of full-page modal surfaces that
   spawned them — e.g. the /hq2#/coaches detail popup's reject button
   opens hq2Prompt(...) which previously rendered behind the detail
   at z:60 vs 200. Above 200, below toasts at 1000. */
.hq2-modal-mask {
  position: fixed; inset: 0;
  background: rgba(15, 18, 22, .42);
  backdrop-filter: blur(4px);
  z-index: 300;
  display: grid; place-items: center;
  padding: var(--s-4);
  opacity: 0;
  transition: opacity .15s ease;
}
.hq2-modal-mask.is-on { opacity: 1; }
.hq2-modal-mask.is-out { opacity: 0; pointer-events: none; }

/* ──────────────────────────────────────────────────────────────────────
   Modal overlay (alternate class used across mise — shift editor,
   ticket editor, editorial post, QA log, ingredient import, etc.)
   ────────────────────────────────────────────────────────────────────
   This class had no CSS rules at all, so every modal that used
   `<div class="hq2-modal-overlay">` rendered as an unstyled block
   appended to <body>, flowing at the BOTTOM of the page rather than
   floating centered over the viewport. Tommy: "click add shift the
   menu is super glitchy and loads in the blank space at the bottom
   of the page. This is an issue with buttons throughout mise."

   Same positioning + centering as .hq2-modal-mask above. Slightly
   higher z-index than the rail so it's on top of every UI surface,
   and uses overscroll-behavior: contain so scrolling inside the
   modal doesn't bleed into the page underneath.
   ──────────────────────────────────────────────────────────────────── */
.hq2-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(15, 18, 22, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-family: var(--font-ui);
  animation: hq2-modal-fade 0.15s ease-out;
}
@keyframes hq2-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.hq2-modal-overlay > .hq2-modal {
  background: var(--surface, #ffffff);
  border: 1px solid var(--rule, rgba(0, 0, 0, 0.08));
  border-radius: 14px;
  width: 100%;
  max-width: 600px;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 80px rgba(15, 18, 22, 0.32);
  overflow: hidden;
  animation: hq2-modal-pop 0.18s cubic-bezier(.32, .72, 0, 1);
}
@keyframes hq2-modal-pop {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
/* Modal head/body/foot — used by every overlay that opens via this
   pattern. .hq2-modal-head holds the title + close X; .hq2-modal-body
   is the scrollable content area; .hq2-modal-foot is the action bar. */
.hq2-modal-overlay .hq2-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule, rgba(0, 0, 0, 0.06));
  flex-shrink: 0;
}
.hq2-modal-overlay .hq2-modal-head h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
}
.hq2-modal-overlay .hq2-modal-close {
  background: transparent;
  border: none;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.hq2-modal-overlay .hq2-modal-close:hover {
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink, #1B1A6B);
}
.hq2-modal-overlay .hq2-modal-body {
  padding: 18px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.hq2-modal-overlay .hq2-modal-foot {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.06));
  padding: 12px 18px;
  background: rgba(0, 0, 0, 0.015);
  /* Default action-bar layout: actions hugged to the right. Modals
     that need a left-side delete button override with their own
     justify-content: space-between inline. */
  justify-content: flex-end;
}
/* Body class lock — when a modal is open the page scroll is frozen so
   the overlay doesn't fight with body scroll. */
body.hq2-modal-open {
  overflow: hidden;
}
@media (max-width: 640px) {
  .hq2-modal-overlay { padding: 12px; align-items: flex-start; padding-top: 28px; }
  .hq2-modal-overlay > .hq2-modal { max-height: calc(100vh - 56px); }
}
.hq2-modal {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  width: 100%;
  max-width: 600px;
  max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 30px 80px rgba(15, 18, 22, .28);
  transform: translateY(8px);
  transition: transform .15s ease;
  overflow: hidden;
}
.hq2-modal-mask.is-on .hq2-modal { transform: translateY(0); }
.hq2-modal-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-4);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.hq2-modal-head h3 {
  font-family: var(--font-ui); font-weight: 800;
  font-size: var(--t-15); letter-spacing: -.01em;
  color: var(--ink); margin: 0;
}
.hq2-modal-x {
  background: transparent; border: 0;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
}
.hq2-modal-x:hover { background: var(--surface-2); color: var(--ink); }
.hq2-modal-content {
  padding: var(--s-4);
  overflow-y: auto;
  flex: 1; min-height: 0;
}
.hq2-modal-actions {
  display: flex; gap: var(--s-2); justify-content: flex-end;
  margin-top: var(--s-3);
  flex-wrap: wrap;
}

/* ── Branded confirm + prompt (replaces window.confirm / prompt) ── */
.hq2-confirm-mask {
  z-index: 80;
}
.hq2-modal.hq2-confirm {
  max-width: 420px;
  width: 100%;
  border-radius: 16px;
  background:
    radial-gradient(540px 280px at 0% 0%, rgba(237, 230, 255, .55), transparent 60%),
    radial-gradient(420px 240px at 100% 100%, rgba(255, 230, 220, .55), transparent 60%),
    var(--surface);
  border: 1px solid rgba(20, 16, 68, .08);
  box-shadow: 0 28px 80px -28px rgba(20, 16, 68, .35), 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: visible;
}
.hq2-confirm-body {
  padding: 22px 22px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-confirm-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 17px;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}
.hq2-confirm-message {
  font-size: 14px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.5;
}
.hq2-confirm-detail {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  line-height: 1.5;
  background: rgba(20, 16, 68, .05);
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 4px;
}
.hq2-confirm-input {
  margin-top: 6px;
  width: 100%;
}
.hq2-confirm-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding: 12px 18px 18px;
  border-top: 1px solid rgba(20, 16, 68, .06);
  background: rgba(255, 255, 255, .55);
}
.hq2-confirm-actions .hq2-btn { min-width: 96px; justify-content: center; }
.hq2-confirm-cancel {
  background: rgba(20, 16, 68, .04);
  color: var(--ink-2, #3D3E5C);
  border: 1px solid rgba(20, 16, 68, .08);
}
.hq2-confirm-cancel:hover {
  background: rgba(20, 16, 68, .07);
  color: var(--ink);
}
.hq2-confirm-ok.hq2-confirm-danger {
  background: #C0392B;
  color: #fff;
  border: 1px solid #A53121;
  box-shadow: 0 6px 14px -6px rgba(192, 57, 43, .55);
}
.hq2-confirm-ok.hq2-confirm-danger:hover { background: #A53121; }
.hq2-confirm-ok.hq2-confirm-warn {
  background: #B86E14;
  color: #fff;
  border: 1px solid #8B5210;
  box-shadow: 0 6px 14px -6px rgba(184, 110, 20, .5);
}
.hq2-confirm-ok.hq2-confirm-warn:hover { background: #8B5210; }
.hq2-confirm-ok.hq2-confirm-primary {
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
}
.hq2-confirm-ok.hq2-confirm-primary:hover { background: #000; }

/* ── New project modal (tabs · blank vs Claude brief) ── */
.hq2-modal-tabs {
  display: flex; gap: 4px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px;
  margin-bottom: var(--s-3);
}
.hq2-modal-tabs button {
  flex: 1;
  font-family: var(--font-ui); font-size: var(--t-12); font-weight: 600;
  background: transparent; border: 0;
  color: var(--ink-3);
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.hq2-modal-tabs button.is-active { background: var(--ink); color: #fff; }

.hq2-np-preview { margin-top: var(--s-3); }
.hq2-np-brief {
  background: linear-gradient(180deg, rgba(200, 169, 110, .10), rgba(200, 169, 110, .02));
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 8px;
  padding: var(--s-4);
}
.hq2-np-brief-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 8px;
}
.hq2-np-brief-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-18);
  color: var(--ink);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}
.hq2-np-brief-desc {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  line-height: 1.55;
  margin-bottom: 12px;
  white-space: pre-wrap;
}
.hq2-np-brief-tasks-head {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hq2-np-brief-tasks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-np-brief-tasks li {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  padding-left: 16px;
  position: relative;
}
.hq2-np-brief-tasks li::before {
  content: '○';
  position: absolute; left: 0; top: 0;
  color: var(--ink-4);
}

/* ── Resource picker / channel picker shared rows ── */
.hq2-modal-search {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  margin-bottom: var(--s-3);
  color: var(--ink-3);
}
.hq2-modal-search .hq2-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: var(--t-14);
}
.hq2-modal-search .hq2-input:focus { outline: 0; }

.hq2-modal-list {
  display: flex; flex-direction: column;
  gap: 2px;
  max-height: 50vh;
  overflow-y: auto;
}
.hq2-modal-group {
  margin-bottom: 8px;
}
.hq2-modal-group-head {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 6px 10px 4px;
}
.hq2-modal-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: var(--font-ui);
  transition: background .12s, border-color .12s;
}
.hq2-modal-row:hover {
  background: var(--surface-2);
  border-color: var(--rule);
}
.hq2-modal-row-glyph {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-size: 13px;
  flex-shrink: 0;
}
.hq2-modal-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq2-modal-row-name {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-modal-row-sub {
  font-size: var(--t-11);
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-modal-empty {
  padding: var(--s-5);
  text-align: center;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
}
/* Already-linked ingredient — still selectable so staff can deliberately
   add a second line of the same ingredient (dough + topping, etc.). The
   "+" glyph + "in recipe" badge flag that it's already on the recipe. */
.hq2-modal-row.is-dupe .hq2-modal-row-glyph { background: var(--brand, #c46a1a); }
.hq2-modal-row-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fff5dc;
  color: #8a6500;
  font-size: 10px;
  font-weight: 700;
  vertical-align: middle;
}

.hq2-modal-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.hq2-modal-hint {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
  flex-shrink: 0;
}
.hq2-modal-paste {
  flex: 1;
  min-width: 200px;
  padding: 6px 10px;
  font-size: var(--t-12);
}

@media (max-width: 600px) {
  .hq2-modal { max-height: 92vh; }
  .hq2-modal-foot { flex-direction: column; align-items: stretch; }
  .hq2-modal-paste { width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   REVENUE MANAGEMENT HUB — KPIs · cash-flow forecast · churn radar
   ════════════════════════════════════════════════════════════════════ */
.hq2-rev-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-3);
}
.hq2-rev-kpi {
  background: var(--surface); padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-rev-kpi .lbl {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-rev-kpi b {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--t-22);
  letter-spacing: -.02em; color: var(--ink);
}
.hq2-rev-kpi .hint { font-size: var(--t-11); color: var(--ink-4); }

.hq2-rev-grid {
  display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--s-3); margin-bottom: var(--s-3);
}
.hq2-rev-panel {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column; min-height: 480px;
}
.hq2-rev-panel .hq2-panel-head {
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center;
}
.hq2-rev-forecast-body { padding: var(--s-3) var(--s-4); display: flex; flex-direction: column; gap: var(--s-3); }
.hq2-rev-chart { width: 100%; height: 140px; }
.hq2-rev-fc-axis {
  display: grid; grid-template-columns: repeat(8, 1fr);
  font-family: var(--font-ui); font-size: 10px;
  color: var(--ink-3); letter-spacing: .04em; text-align: center;
}
.hq2-rev-fc-table {
  font-family: var(--font-ui); font-size: var(--t-12);
  color: var(--ink-2); margin-top: var(--s-3);
  background: var(--surface-2); border-radius: 6px; overflow: hidden;
}
.hq2-rev-fc-table-head, .hq2-rev-fc-table-row {
  display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr;
  gap: var(--s-2); padding: 8px 12px; align-items: center;
}
.hq2-rev-fc-table-head {
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); background: rgba(15,18,22,.04);
}
.hq2-rev-fc-table-row { border-top: 1px solid var(--rule); }
.hq2-rev-fc-table-row .is-total { font-weight: 800; color: var(--ink); }
.hq2-rev-fc-legend {
  display: flex; gap: var(--s-3);
  font-family: var(--font-ui); font-size: var(--t-11);
  color: var(--ink-3); margin-top: var(--s-2);
}
.hq2-rev-fc-legend .is-line { display: inline-flex; align-items: center; gap: 6px; }
.hq2-rev-fc-legend .dot { width: 8px; height: 2px; border-radius: 0; }

.hq2-rev-radar-body {
  flex: 1; overflow-y: auto; padding: var(--s-3);
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-rev-radar-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); padding: 12px 14px;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  cursor: pointer; text-align: left;
  font-family: var(--font-ui);
  transition: border-color .12s, transform .12s;
}
.hq2-rev-radar-row:hover { border-color: var(--tc-gold); transform: translateX(2px); }
.hq2-rev-radar-row-l { min-width: 0; flex: 1; }
.hq2-rev-radar-name {
  font-weight: 700; font-size: var(--t-13); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-rev-radar-reasons { font-size: var(--t-11); color: var(--ink-3); margin-top: 2px; }
.hq2-rev-radar-row-r {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0;
}
.hq2-rev-risk {
  font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 4px;
}
.hq2-rev-risk-medium { background: #FCEBC0; color: #8E6C2E; }
.hq2-rev-risk-high   { background: #FBE9E9; color: #C62F2F; }
.hq2-rev-risk-urgent { background: #C62F2F; color: #fff; }
.hq2-rev-score { font-size: var(--t-11); color: var(--ink-3); font-family: ui-monospace, monospace; }
.hq2-rev-empty {
  padding: var(--s-5); text-align: center;
  color: var(--ink-3); font-family: var(--font-ui); font-size: var(--t-12);
}
.hq2-rev-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-2);
}
@media (max-width: 980px) {
  .hq2-rev-kpis { grid-template-columns: repeat(2, 1fr); }
  .hq2-rev-grid { grid-template-columns: 1fr; }
  .hq2-rev-row  { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   FIELD SERVICE · DELIVERY PARTNERS — /hq2#/fieldService/partners

   Cards mirror .hq2-fi-card visually but get their own scoped class
   so the comparison layout + hover actions don't bleed into other
   financials cards.
   ════════════════════════════════════════════════════════════════════ */
.hq2-dp-route {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3);
}
.hq2-dp-route-head {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.hq2-dp-route-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
}
@media (max-width: 720px) { .hq2-dp-route-row { grid-template-columns: 1fr; } }

.hq2-dp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
  margin-bottom: var(--s-3);
}
@media (max-width: 880px) { .hq2-dp-grid { grid-template-columns: 1fr; } }

.hq2-dp-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-4) var(--s-4);
}
.hq2-dp-card-head {
  font-family: var(--font-ui); font-size: 15px; font-weight: 800;
  color: var(--ink); margin: 0 0 var(--s-3);
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: var(--s-2);
}
.hq2-dp-actions {
  margin-left: auto; display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.hq2-dp-card:hover .hq2-dp-actions { opacity: 1; }
@media (hover: none) { .hq2-dp-actions { opacity: 1; } }
.hq2-dp-action {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: rgba(15,12,32,.06); color: var(--ink-3);
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 0; line-height: 1;
}
.hq2-dp-action:hover { background: var(--tc-gold); color: #1a1a1a; }
.hq2-dp-action-del:hover { background: rgba(179,33,26,.12); color: var(--danger, #B3211A); }

.hq2-dp-winner {
  font-family: var(--font-ui); font-size: 9px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px;
  background: var(--tc-gold); color: #1a1a1a;
}

.hq2-dp-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 0; font-family: var(--font-ui); font-size: 13px;
  border-bottom: 1px dashed var(--rule);
}
.hq2-dp-row:last-child { border-bottom: none; }
.hq2-dp-row-lbl { color: var(--ink-3); }
.hq2-dp-row-val { font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.hq2-dp-row.is-total {
  background: rgba(27,26,107,.04);
  margin: 0 calc(var(--s-4) * -1); padding-left: var(--s-4); padding-right: var(--s-4);
  margin-top: var(--s-1);
}
.hq2-dp-row.is-total .hq2-dp-row-val { color: var(--tc-navy); font-size: 15px; }

.hq2-dp-add-card {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 160px;
  background: transparent; border: 1.5px dashed var(--rule-strong, rgba(15,12,32,.16));
  border-radius: var(--r-lg); padding: var(--s-4);
  font-family: var(--font-ui); cursor: pointer;
  color: var(--ink-3); transition: border-color .15s, background .15s, color .15s;
}
.hq2-dp-add-card:hover {
  border-color: var(--tc-gold); background: rgba(200,169,110,.04); color: var(--tc-gold-dark, #8A6F3F);
}
.hq2-dp-add-glyph { font-size: 28px; font-weight: 700; line-height: 1; }
.hq2-dp-add-lbl   { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.hq2-dp-form {
  grid-column: 1 / -1;
  background: var(--surface); border: 1.5px solid var(--tc-gold);
  border-radius: var(--r-lg); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hq2-dp-form-head {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--tc-gold-dark, #8A6F3F);
  margin: 0;
}
.hq2-dp-form-row { display: grid; gap: var(--s-3); }
.hq2-dp-form-row-2 { grid-template-columns: 1fr 1fr; }
.hq2-dp-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .hq2-dp-form-row-2, .hq2-dp-form-row-3 { grid-template-columns: 1fr; }
}
.hq2-dp-form-actions { display: flex; gap: var(--s-2); }

.hq2-dp-readout-card .hq2-fi-meta { font-style: italic; color: var(--ink-2); }

/* ════════════════════════════════════════════════════════════════════
   FIELD SERVICE HUB — delivery board
   ════════════════════════════════════════════════════════════════════ */
.hq2-fs-kpis {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-3);
}
.hq2-fs-kpi {
  background: var(--surface); padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-fs-kpi .lbl {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-fs-kpi b {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--t-22);
  letter-spacing: -.02em; color: var(--ink);
}
.hq2-fs-kpi .hint { font-size: var(--t-11); color: var(--ink-4); }

.hq2-fs-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(220px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
  align-items: start;
}
.hq2-fs-lane {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  display: flex; flex-direction: column;
  min-height: 220px;
}
.hq2-fs-lane.is-late {
  background: linear-gradient(180deg, #FBE9E9, var(--surface) 30%);
  border-color: #F0C2C2;
}
.hq2-fs-lane.is-delivered {
  background: linear-gradient(180deg, #E8F5EE, var(--surface) 30%);
  border-color: #C8E0CF;
}
.hq2-fs-lane-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.hq2-fs-lane-head b {
  font-size: var(--t-13); font-weight: 800;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink-2);
}
.hq2-fs-lane-head span {
  font-size: var(--t-11); color: var(--ink-3);
  background: rgba(15,18,22,.06);
  padding: 2px 8px; border-radius: 4px;
}
.hq2-fs-lane-body {
  display: flex; flex-direction: column; gap: 6px;
  padding: 8px;
  flex: 1;
}

.hq2-fs-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 10px 12px;
  font-family: var(--font-ui);
  display: flex; flex-direction: column; gap: 6px;
  transition: border-color .12s, transform .12s;
}
.hq2-fs-card.is-late {
  border-color: #F0C2C2;
  background: #FFF8F8;
}
.hq2-fs-card.is-done {
  opacity: .72;
}
.hq2-fs-card-head {
  display: flex; justify-content: space-between; align-items: center;
}
.hq2-fs-card-name {
  background: transparent; border: 0;
  text-align: left;
  font-family: var(--font-ui);
  font-weight: 700; font-size: var(--t-13);
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1; min-width: 0;
}
.hq2-fs-card-name:hover { color: var(--tc-gold-deep, #8E6C2E); }
.hq2-fs-card-due {
  font-size: var(--t-11);
  color: var(--ink-3);
  white-space: nowrap;
  margin-left: 8px;
}
.hq2-fs-card.is-late .hq2-fs-card-due { color: #C62F2F; font-weight: 700; }
.hq2-fs-card-addr {
  font-size: var(--t-12);
  color: var(--ink-2);
  line-height: 1.4;
}
.hq2-fs-card-meta {
  display: flex; justify-content: space-between;
  font-size: var(--t-11); color: var(--ink-3);
}
.hq2-fs-card-actions {
  display: flex; gap: 6px;
  margin-top: 4px;
}
.hq2-fs-driver {
  flex: 1;
  font-family: var(--font-ui); font-size: var(--t-11);
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 4px 8px;
  color: var(--ink);
  cursor: pointer;
}
.hq2-fs-driver:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }

.hq2-fs-empty {
  padding: var(--s-4);
  text-align: center;
  font-family: var(--font-ui); font-size: var(--t-12);
  color: var(--ink-3);
}

@media (max-width: 1100px) {
  .hq2-fs-board { grid-template-columns: repeat(2, 1fr); }
  .hq2-fs-kpis  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .hq2-fs-board { grid-template-columns: 1fr; }
  .hq2-fs-kpis  { grid-template-columns: repeat(2, 1fr); }
}

/* ════════════════════════════════════════════════════════════════════
   DELIVERY MANIFEST — dispatch · driver · printable
   /hq2#/fieldService/manifest (or #/deliveryManifest)
   ════════════════════════════════════════════════════════════════════ */

.hq2-btn-mini {
  padding: 4px 8px;
  font-size: var(--t-11, 11px);
  line-height: 1.4;
  border-radius: 5px;
}

.hq2-dm-viewtabs {
  display: flex; gap: var(--s-1, 6px);
  margin: var(--s-3) 0;
  flex-wrap: wrap;
}
.hq2-dm-viewtabs .hq2-mkt-tab {
  font-size: var(--t-12);
  padding: 6px 12px;
}

.hq2-dm-kpis { margin-bottom: var(--s-3); }

.hq2-dm-daystrip {
  display: flex;
  gap: 6px;
  margin: 0 0 var(--s-3);
  overflow-x: auto;
  scrollbar-width: thin;
  padding-bottom: 4px;
}
.hq2-dm-daystrip::-webkit-scrollbar       { height: 4px; }
.hq2-dm-daystrip::-webkit-scrollbar-thumb { background: var(--border, #E5E3DA); border-radius: 2px; }

.hq2-dm-daypill {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  gap: 2px;
  min-width: 54px;
  padding: 8px 10px;
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 8px;
  background: #fff;
  font-family: var(--font-ui);
  cursor: pointer;
  position: relative;
  transition: border-color .12s, background .12s, color .12s;
}
.hq2-dm-daypill:hover { border-color: var(--tc-gold); }
.hq2-dm-daypill-dow {
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.hq2-dm-daypill-num {
  font-size: 18px;
  font-weight: 700;
  color: var(--tc-navy);
  line-height: 1.1;
}
.hq2-dm-daypill-ct {
  font-size: var(--t-11, 11px);
  font-weight: 600;
  color: var(--tc-gold-dark);
  background: rgba(200,169,110,.16);
  padding: 1px 6px;
  border-radius: 999px;
  margin-top: 2px;
}
.hq2-dm-daypill.is-today .hq2-dm-daypill-dow {
  color: var(--tc-navy);
  font-weight: 700;
}
.hq2-dm-daypill.is-today::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--tc-gold);
}
.hq2-dm-daypill.is-empty .hq2-dm-daypill-num { color: var(--ink-3); }
.hq2-dm-daypill.is-empty .hq2-dm-daypill-dow { opacity: .6; }
.hq2-dm-daypill.is-active {
  background: var(--tc-navy);
  border-color: var(--tc-navy);
}
.hq2-dm-daypill.is-active .hq2-dm-daypill-dow,
.hq2-dm-daypill.is-active .hq2-dm-daypill-num { color: #fff; }
.hq2-dm-daypill.is-active .hq2-dm-daypill-ct {
  background: rgba(255,255,255,.18);
  color: var(--tc-gold-light);
}
.hq2-dm-daypill.is-active.is-today::before { background: var(--tc-gold-light); }

/* Delivery-day emphasis — the kitchen only cooks on certain weekdays
   (Sun by default, configurable via /settings/fulfillment). Days that
   match get bigger pills, a gold accent ring, and a stronger date
   number; non-delivery days ghost back so the strip reads as
   "Sundays are the days" at a glance. Active + today states still
   override these (active is solid navy, today gets the gold dot). */
.hq2-dm-daypill.is-deliveryday {
  min-width: 64px;
  padding: 10px 12px;
  border-color: var(--tc-gold);
  background: linear-gradient(180deg, rgba(200,169,110,.06), rgba(200,169,110,.02));
  box-shadow: 0 1px 0 rgba(200,169,110,.18), 0 0 0 1px rgba(200,169,110,.18) inset;
}
.hq2-dm-daypill.is-deliveryday .hq2-dm-daypill-dow {
  color: var(--tc-gold-dark);
  font-weight: 700;
}
.hq2-dm-daypill.is-deliveryday .hq2-dm-daypill-num {
  font-size: 22px;
  color: var(--tc-navy);
}
.hq2-dm-daypill:not(.is-deliveryday):not(.is-active) {
  opacity: .55;
}
.hq2-dm-daypill:not(.is-deliveryday):not(.is-active):hover {
  opacity: .85;
}
/* Active state still wins — emphasized delivery day that's been
   tapped goes full navy like any other selected pill, but keeps the
   bumped size so it doesn't shrink on tap. The dow/num color
   overrides have to live on the combined selector too, otherwise the
   .is-deliveryday gold/navy rules above (same specificity, later in
   file) beat the .is-active white rule and the date number renders
   navy-on-navy (invisible). */
.hq2-dm-daypill.is-deliveryday.is-active {
  border-color: var(--tc-navy);
  background: var(--tc-navy);
  box-shadow: 0 2px 8px rgba(27,26,107,.18);
}
.hq2-dm-daypill.is-deliveryday.is-active .hq2-dm-daypill-dow,
.hq2-dm-daypill.is-deliveryday.is-active .hq2-dm-daypill-num {
  color: #fff;
}

/* Past days — browsable history (strip reaches 30 days back). Ghosted
   further than empty future days so the strip still reads forward-first;
   the gold delivery-day ring is muted to grey on past pills. Active
   state (solid navy) wins as usual so a selected past day is obvious. */
.hq2-dm-daypill.is-past:not(.is-active) {
  opacity: .45;
  background: var(--paper-2, #FAF9F4);
}
.hq2-dm-daypill.is-past:not(.is-active).is-deliveryday {
  border-color: var(--border, #E5E3DA);
  background: var(--paper-2, #FAF9F4);
  box-shadow: none;
}
.hq2-dm-daypill.is-past:not(.is-active).is-deliveryday .hq2-dm-daypill-dow { color: var(--ink-3); }
.hq2-dm-daypill.is-past:not(.is-active):hover { opacity: .9; border-color: var(--tc-gold); }

/* Thin vertical rule between the past and today. */
.hq2-dm-daystrip-now {
  flex: 0 0 auto;
  width: 2px;
  align-self: stretch;
  margin: 4px 3px;
  border-radius: 2px;
  background: var(--tc-gold);
  opacity: .6;
}

/* Slim month tag at month boundaries so scrolling back stays orientable. */
.hq2-dm-daystrip-mo {
  flex: 0 0 auto;
  align-self: flex-end;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-ui);
  font-size: var(--t-11, 11px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  padding: 4px 0;
}

.hq2-dm-actions {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.hq2-dm-actions-hint {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
}

/* Run stamps — "🔥 kitchen started 9:12 AM · ▶ route started 11:04 AM"
   line under the action buttons; audit times for the selected day. */
.hq2-dm-runstamps {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--tc-navy);
  background: rgba(200,169,110,.10);
  border: 1px solid rgba(200,169,110,.35);
  border-radius: 8px;
  padding: 6px 12px;
  margin: calc(-1 * var(--s-2)) 0 var(--s-3);
  display: inline-block;
}
.hq2-dm-runstamps[hidden] { display: none; }

.hq2-dm-routes {
  display: flex; flex-direction: column; gap: var(--s-2);
  margin-bottom: var(--s-4);
}

.hq2-dm-empty-card {
  padding: var(--s-4);
  border: 1px dashed var(--border, #E5E3DA);
  border-radius: 10px;
  background: var(--surface-2);
  font-family: var(--font-ui); font-size: var(--t-13);
  color: var(--ink-2);
}
.hq2-dm-empty-card b { color: var(--tc-navy); }
.hq2-dm-empty-card i { font-style: normal; color: var(--tc-gold-dark); }

.hq2-dm-route {
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.hq2-dm-route.is-open { box-shadow: 0 1px 3px rgba(27,26,107,.06); }

.hq2-dm-route-head {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: transparent;
  border: 0;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
}
.hq2-dm-route-head:hover { background: var(--surface-2); }
.hq2-dm-route-title {
  display: flex; align-items: baseline; gap: 8px;
  min-width: 0;
}
.hq2-dm-route-title b {
  font-size: var(--t-14, 14px);
  color: var(--tc-navy);
  font-weight: 600;
}
.hq2-dm-route-tag {
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .06em;
  padding: 2px 6px;
  border-radius: 4px;
}
.hq2-dm-route-tag.is-opt    { background: rgba(200,169,110,.18); color: var(--tc-gold-dark); }
.hq2-dm-route-tag.is-manual { background: rgba(27,26,107,.08); color: var(--tc-navy); }
.hq2-dm-route-meta {
  font-size: var(--t-12);
  color: var(--ink-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-dm-route-prog {
  font-weight: 600;
  color: var(--ink-2);
  font-size: var(--t-12);
}
.hq2-dm-route-chev {
  color: var(--ink-3);
  font-size: var(--t-12);
  width: 1em;
}

.hq2-dm-route-body {
  border-top: 1px solid var(--border, #E5E3DA);
  background: var(--surface-2);
}

.hq2-dm-stops {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: var(--t-12);
}
.hq2-dm-stops th {
  text-align: left;
  padding: 8px var(--s-3);
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--border, #E5E3DA);
}
.hq2-dm-stops td {
  padding: 10px var(--s-3);
  border-bottom: 1px solid rgba(27,26,107,.05);
  vertical-align: top;
}
.hq2-dm-stops tr:last-child td { border-bottom: 0; }

.hq2-dm-stop.is-delivered td { color: var(--ink-3); }
.hq2-dm-stop.is-delivered .hq2-dm-stop-name { text-decoration: line-through; }

.hq2-dm-stop-idx {
  font-weight: 600;
  color: var(--tc-navy);
  width: 32px;
}
.hq2-dm-stop-name {
  color: var(--tc-navy);
  font-weight: 600;
  text-decoration: none;
}
.hq2-dm-stop-name:hover { color: var(--tc-gold-dark); }
.hq2-dm-stop-addr {
  color: var(--ink-2);
  font-size: var(--t-12);
}
.hq2-dm-stop-actions {
  text-align: right;
  white-space: nowrap;
}

.hq2-dm-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
}
.hq2-dm-pill.is-delivered { background: rgba(76,143,93,.14);  color: #356040; }
.hq2-dm-pill.is-attempted { background: rgba(196,75,75,.14);  color: #8C2A2A; }
.hq2-dm-pill.is-enroute   { background: rgba(200,169,110,.20); color: var(--tc-gold-dark); }
.hq2-dm-pill.is-ready     { background: rgba(27,26,107,.10);  color: var(--tc-navy); }
.hq2-dm-pill.is-pending   { background: rgba(110,112,136,.14); color: var(--ink-3); }

/* Pre-delivery confirmation chip — the customer's answer to the
   evening-before "will you be home? reply YES or NO" text. Rendered by
   _dmConfirmChipHtml next to the stop-status pill; hover shows the
   day-of note (gate code etc.). 'no reply' is drop-ready-unconfirmed,
   so it stays quiet grey; 'check reply' is the one that wants a human. */
.hq2-dm-confirm {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 600;
  border: 1px dashed transparent;
}
.hq2-dm-confirm.is-home         { background: rgba(76,143,93,.14);   color: #356040; }
.hq2-dm-confirm.is-drop-ok      { background: rgba(27,26,107,.10);   color: var(--tc-navy); }
.hq2-dm-confirm.is-no-response  { background: rgba(110,112,136,.10); color: var(--ink-3); border-color: rgba(110,112,136,.35); }
.hq2-dm-confirm.is-unclassified { background: rgba(200,140,50,.16);  color: #8A5A18; }

.hq2-dm-unassigned {
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  margin-top: var(--s-3);
}
.hq2-dm-unassigned-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 2fr auto auto;
  gap: var(--s-3);
  align-items: center;
  padding: 10px var(--s-3);
  border-bottom: 1px solid rgba(27,26,107,.05);
  font-family: var(--font-ui); font-size: var(--t-12);
}
.hq2-dm-unassigned-row:last-child { border-bottom: 0; }

/* ── Driver mobile view ────────────────────────────────────────────── */

.hq2-dm-phone-wrap {
  display: flex; justify-content: center;
  padding: var(--s-2) 0;
}
.hq2-dm-phone {
  width: 100%;
  max-width: 420px;
  background: #fff;
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 16px;
  padding: var(--s-4);
  font-family: var(--font-ui);
}
.hq2-dm-driver-head {
  border-bottom: 1px solid var(--border, #E5E3DA);
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-3);
}
.hq2-dm-driver-route {
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--tc-navy);
}
.hq2-dm-driver-prog {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.hq2-dm-driver-name {
  font-size: var(--t-11, 11px);
  color: var(--ink-3);
  margin-top: 2px;
}
.hq2-dm-driver-gas,
.hq2-dm-driver-time {
  font-size: var(--t-11, 11px);
  color: var(--ink-3);
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
/* Editable pump price in the dispatch actions row — drives the per-route
   gas-cost band shown here and in the driver popout. */
.hq2-dm-gas-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: var(--t-12, 12px);
  color: var(--ink-3);
  white-space: nowrap;
}
.hq2-dm-gas-ctrl input {
  width: 4.6em;
  margin: 0 3px;
  padding: 3px 5px;
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 6px;
  font: inherit;
  font-variant-numeric: tabular-nums;
}
/* Cars 1|2 toggle — picks how many cars "suggest routes" splits the day
   across. The active button (override or stop-count suggestion) is
   filled; the other reads as a plain pill. */
.hq2-dm-cars-ctrl {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--t-12, 12px);
  color: var(--ink-3);
  white-space: nowrap;
}
.hq2-dm-carbtn {
  min-width: 26px;
  padding: 3px 8px;
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--ink-2, #555);
  font: inherit;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.hq2-dm-carbtn:hover { border-color: var(--ink-4, #b9b6ab); }
.hq2-dm-carbtn.is-active {
  background: var(--accent, #1B1A6B);
  border-color: var(--accent, #1B1A6B);
  color: #fff;
  font-weight: 600;
}
/* Pre-departure banner — shows above the driver-view route card when
   the route exists but hasn't been started yet. Driver taps the green
   button as they pull out of the kitchen to send the kickoff SMS to
   every customer + flip every order to "out for delivery." Banner
   disappears on next paint once the route's startedAt is set. */
.hq2-dm-driver-startbanner {
  background: linear-gradient(135deg, rgba(31,142,92,.08), rgba(31,142,92,.02));
  border: 1px solid rgba(31,142,92,.30);
  border-radius: 12px;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
  display: flex; flex-direction: column; gap: var(--s-2);
}
.hq2-dm-driver-startbanner-body {
  display: flex; flex-direction: column; gap: 4px;
  font-family: var(--font-ui);
}
.hq2-dm-driver-startbanner-body b {
  font-size: var(--t-14, 14px);
  font-weight: 700;
  color: #1A7A4F;
}
.hq2-dm-driver-startbanner-body span {
  font-size: var(--t-12);
  color: var(--ink-2);
  line-height: 1.45;
}
.hq2-dm-driver-startbanner .hq2-btn {
  width: 100%;
}

.hq2-dm-driver-current {
  background: rgba(200,169,110,.10);
  border: 1px solid rgba(200,169,110,.40);
  border-radius: 12px;
  padding: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-dm-driver-current.is-done {
  background: rgba(76,143,93,.10);
  border-color: rgba(76,143,93,.30);
  text-align: center;
}
.hq2-dm-driver-cur-eyebrow {
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tc-gold-dark);
  font-weight: 600;
}
.hq2-dm-driver-cur-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--tc-navy);
  margin: 4px 0;
}
.hq2-dm-driver-cur-addr {
  font-size: var(--t-13);
  color: var(--ink-2);
}
.hq2-dm-driver-cur-notes {
  font-size: var(--t-12);
  color: var(--ink-3);
  font-style: italic;
  margin-top: 4px;
}
.hq2-dm-driver-cur-eta {
  font-size: var(--t-12);
  color: var(--ink-2);
  margin-top: 8px;
  font-weight: 600;
}
.hq2-dm-driver-actions {
  display: flex; gap: var(--s-2);
  flex-wrap: wrap;
  margin-top: var(--s-3);
}
.hq2-dm-driver-actions .hq2-btn { flex: 1 1 auto; justify-content: center; }
.hq2-dm-driver-list h4 {
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin: 0 0 var(--s-2);
}
.hq2-dm-driver-stop {
  display: grid;
  grid-template-columns: 24px 1fr auto;
  gap: var(--s-2);
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(27,26,107,.05);
  font-size: var(--t-12);
}
.hq2-dm-driver-stop:last-child { border-bottom: 0; }
.hq2-dm-driver-stop-idx {
  font-weight: 600;
  color: var(--tc-navy);
  text-align: center;
}
.hq2-dm-driver-stop-body b {
  display: block;
  color: var(--tc-navy);
  font-weight: 600;
}
.hq2-dm-driver-stop-body span {
  color: var(--ink-3);
}
.hq2-dm-driver-stop.is-current {
  background: rgba(200,169,110,.10);
  border-radius: 6px;
  padding: 8px;
  margin: 0 -8px;
}
.hq2-dm-driver-stop.is-delivered .hq2-dm-driver-stop-body b {
  text-decoration: line-through;
  color: var(--ink-3);
}
/* ── Order contents ("our customer view" of each stop) ─────────────── */

/* Compact one-line summary used on dense surfaces — dispatch rows +
   the driver's up-next list. Sits under the customer name / address. */
.hq2-dm-stop-items {
  display: block;
  margin-top: 2px;
  font-size: var(--t-11, 11px);
  color: var(--ink-3);
  line-height: 1.35;
}

/* What the customer paid for delivery on this order (delivery.feeCents),
   rendered next to the stop name by _dmStopFeeChipHtml. */
.hq2-dm-stop-fee {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: var(--t-11, 11px);
  font-weight: 600;
  vertical-align: middle;
  background: rgba(76,143,93,.14);
  color: #356040;
}
.hq2-dm-stop-fee.is-free {
  background: rgba(110,112,136,.14);
  color: var(--ink-3);
}

/* Full bag list — the driver's current stop, for checking at the door. */
.hq2-dm-bag-wrap {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(27,26,107,.08);
}
.hq2-dm-bag-label {
  font-size: var(--t-11, 11px);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.hq2-dm-bag {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-dm-bag-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--t-13);
}
.hq2-dm-bag-qty {
  min-width: 26px;
  font-weight: 700;
  color: var(--tc-gold-dark, var(--tc-navy));
}
.hq2-dm-bag-name {
  color: var(--tc-navy);
  font-weight: 500;
}
.hq2-dm-bag-empty {
  font-size: var(--t-12);
  color: var(--ink-3);
  font-style: italic;
}

.hq2-dm-phone-empty {
  text-align: center;
  padding: var(--s-5, 24px);
  color: var(--ink-3);
}
.hq2-dm-phone-empty h3 { color: var(--tc-navy); margin: 0 0 var(--s-2); }

/* ── Print sheet ───────────────────────────────────────────────────── */

.hq2-dm-print-controls {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

.hq2-dm-printable {
  background: #fff;
  border: 1px solid var(--border, #E5E3DA);
  border-radius: 10px;
  padding: var(--s-5, 24px);
}

.hq2-dm-sheet { font-family: 'Inter', system-ui, sans-serif; color: #1B1A6B; }
.hq2-dm-sheet + .hq2-dm-sheet { margin-top: 32px; page-break-before: always; }
.hq2-dm-sheet-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 2px solid #1B1A6B;
  padding-bottom: 8px;
  margin-bottom: 16px;
}
.hq2-dm-sheet-brand {
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 14px;
}
.hq2-dm-sheet-date {
  font-size: 13px;
  color: #2C2D45;
}
.hq2-dm-sheet-driver {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  font-size: 12px;
  margin-bottom: 16px;
}
.hq2-dm-sheet-driver b {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  color: #6E7088;
  display: block;
  font-weight: 600;
}
.hq2-dm-sheet-checklist {
  border: 1px solid #E5E3DA;
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12px;
}
.hq2-dm-sheet-checklist b {
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 10px;
  color: #6E7088;
}
.hq2-dm-sheet-checklist ul {
  list-style: none;
  padding: 4px 0 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px 12px;
}
.hq2-dm-sheet-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.hq2-dm-sheet-tbl th {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1.5px solid #1B1A6B;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 10px;
}
.hq2-dm-sheet-tbl td {
  padding: 10px 8px;
  border-bottom: 1px solid #E5E3DA;
  vertical-align: top;
}
.hq2-dm-sheet-sig {
  width: 28%;
  border-left: 1px solid #E5E3DA;
}

/* ════════════════════════════════════════════════════════════════════
   DRIVER POPOUT MODE — when ?popout=1 is on the URL, hq2.js adds the
   hq2-driver-popout class to <body>. We strip every piece of HQ
   chrome (rail, masthead, statusline, hero, subnav, tabs) so the
   driver's phone-home-screen bookmark shows just the route content.
   Loading splash + auth screen are still allowed to render (auth
   still has to resolve before the route shows up). The shell's grid
   layout reserves a rail column even when the rail is hidden, so we
   reset it to block here so the manifest claims the full viewport.
   ════════════════════════════════════════════════════════════════════ */
body.hq2-driver-popout .hq2-rail,
body.hq2-driver-popout .hq2-masthead,
body.hq2-driver-popout .hq2-statusline,
body.hq2-driver-popout .hq2-hub-hero,
body.hq2-driver-popout .hq2-fs-subnav,
body.hq2-driver-popout .hq2-dm-viewtabs {
  display: none !important;
}
/* Kill the iOS Safari rubber-band bounce in popout. With a fixed cart
   pinned to the bottom and sticky chip + tabs at the top, the bounce
   was causing the cart to detach from the bottom and the chip to
   wobble at the top mid-scroll — looked like a scroll glitch. */
body.hq2-driver-popout {
  overscroll-behavior-y: contain;
}
body.hq2-driver-popout .hq2-shell {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  /* The base .hq2-shell rule sets height:100vh + overflow:hidden so
     the dispatcher's chrome (rail, masthead) never overlaps the
     scrolling page area. In the popout there IS no chrome, and the
     fixed viewport clips long "up next" lists (reported May 22 —
     mobile users saw only the first stop with empty space below).
     Let the popout grow with its content. */
  height: auto !important;
  min-height: 100vh !important;
  overflow: visible !important;
}
body.hq2-driver-popout .hq2-page {
  padding: 12px !important;
  margin: 0 !important;
  max-width: none !important;
  /* Same reason as .hq2-shell — let the page content extend as
     long as the route list needs. */
  height: auto !important;
  overflow: visible !important;
}
body.hq2-driver-popout .hq2-dm-phone-wrap {
  padding: 0;
}
body.hq2-driver-popout .hq2-dm-phone {
  max-width: 100%;
  border: 0;
  padding: var(--s-3);
}
body.hq2-driver-popout .hq2-dm-driver-launch {
  display: none !important;
}

/* "‹ Mise" chip — only injected when the driver popout is opened from
   inside the Mise app (shell=mise). The plain bookmarked popout never
   gets it, so that surface is byte-for-byte unchanged. Fixed top-left,
   clear of the route header, with safe-area padding for notch phones. */
.hq2-mise-back {
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 10px);
  left: 12px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--tc-navy, #1B1A6B);
  color: #fff;
  font: 600 14px/1 var(--font-ui, -apple-system, BlinkMacSystemFont, sans-serif);
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(0,0,0,.18);
}
.hq2-mise-back:active { opacity: .8; }

/* Combined field-service popout (opened from the Mise More menu, shell=mise).
   The plain popout hides the Dispatch/Driver tab row; here we bring it BACK so
   both manifest views live in one screen and you can flip between them. Print +
   Schedule stay hidden — they're dispatcher-desk tasks, not in-field. The page
   gets extra top room so the fixed "‹ Mise" chip never sits on top of the tabs. */
body.hq2-driver-popout.hq2-shell-mise .hq2-dm-viewtabs {
  display: flex !important;
  gap: 6px;
  margin-bottom: var(--s-3);
}
body.hq2-driver-popout.hq2-shell-mise .hq2-dm-viewtabs a[href$="/print"],
body.hq2-driver-popout.hq2-shell-mise .hq2-dm-viewtabs a[href$="/schedule"] {
  display: none !important;
}
body.hq2-driver-popout.hq2-shell-mise .hq2-page {
  padding-top: calc(env(safe-area-inset-top, 0px) + 52px) !important;
}

/* Launch row that sits above the driver-view phone mockup, giving the
   dispatcher a one-click way to open the popout URL for the driver
   (and a brief hint about what it does). */
.hq2-dm-driver-launch {
  display: flex; align-items: center; gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-3);
}

/* @media print — only the sheet survives onto paper.
   We hide every piece of HQ chrome (the side rail, masthead, status
   line, range pills, hero block, tabs, controls) plus the splash + auth
   overlays so the manifest renders edge-to-edge on letter paper. The
   `.hq2-topbar` selector below is a legacy holdover — kept for safety
   in case it ever resurfaces — but `.hq2-masthead` is what the live
   shell actually renders. */
@media print {
  body { background: #fff !important; }
  .hq2-rail, .hq2-topbar, .hq2-masthead, .hq2-statusline, .hq2-range-pills,
  .hq2-hub-hero, .hq2-fs-subnav, .hq2-dm-viewtabs,
  .hq2-dm-print-controls, .hq2-rev-row,
  .hq2-loading, .hq2-auth-screen {
    display: none !important;
  }
  /* Shell uses CSS grid to lay out rail + main column; remove the
     grid-template so the main column claims the full page width when
     the rail is hidden. Without this the manifest stays in its
     narrow grid track and prints centered with huge left margin. */
  .hq2-shell {
    display: block !important;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
  }
  .hq2-page {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
  }
  .hq2-dm-printable {
    border: 0 !important;
    padding: 0 !important;
  }
  .hq2-dm-sheet {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  @page { size: letter; margin: 0.5in; }
}

@media (max-width: 1100px) {
  .hq2-dm-kpis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .hq2-dm-kpis { grid-template-columns: repeat(2, 1fr); }
  .hq2-dm-route-head { grid-template-columns: 1fr auto; }
  .hq2-dm-route-meta { grid-column: 1 / -1; }
  .hq2-dm-stops thead { display: none; }
  .hq2-dm-stops, .hq2-dm-stops tbody, .hq2-dm-stops tr, .hq2-dm-stops td {
    display: block; width: 100%;
  }
  .hq2-dm-stops tr {
    padding: 10px var(--s-3);
    border-bottom: 1px solid rgba(27,26,107,.08);
  }
  .hq2-dm-stops td { padding: 2px 0; border: 0; }
  .hq2-dm-unassigned-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   BRIEFINGS — list cards · detail editor · context strip · share
   ════════════════════════════════════════════════════════════════════ */

.hq2-brief-actions {
  display: flex; align-items: center; gap: var(--s-2);
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.hq2-brief-actions-meta {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
  margin-left: auto;
}

.hq2-brief-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-2);
}
.hq2-brief-card {
  text-align: left;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: var(--s-3) var(--s-4);
  cursor: pointer;
  font-family: var(--font-ui);
  display: flex; flex-direction: column; gap: 8px;
  transition: border-color .12s, transform .12s;
  min-height: 140px;
}
.hq2-brief-card:hover { border-color: var(--tc-gold); transform: translateY(-1px); }
.hq2-brief-card-head {
  display: flex; align-items: center; gap: 6px;
}
.hq2-brief-card-tag {
  font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  background: rgba(200, 169, 110, .14);
  padding: 2px 8px;
  border-radius: 4px;
}
.hq2-brief-card-status {
  font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
}
.hq2-brief-card-status.is-draft { background: rgba(15, 18, 22, .06); color: var(--ink-3); }
.hq2-brief-card-status.is-published { background: #E8F5EE; color: #1F7A3F; }
.hq2-brief-card-ago {
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-left: auto;
}
.hq2-brief-card-title {
  font-weight: 800; font-size: var(--t-15);
  letter-spacing: -.01em;
  color: var(--ink);
  line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-brief-card-preview {
  font-size: var(--t-12);
  color: var(--ink-3);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hq2-brief-empty {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-7) var(--s-4);
  text-align: center;
  font-family: var(--font-ui);
  color: var(--ink-3);
  grid-column: 1 / -1;
}
.hq2-brief-empty h3 {
  font-size: var(--t-18);
  color: var(--ink);
  margin: 0 0 8px;
}

/* Detail */
.hq2-brief-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: var(--s-4);
}
.hq2-brief-detail-actions { display: flex; gap: var(--s-2); }
.hq2-brief-meta {
  display: flex; gap: 8px; align-items: center;
  margin-bottom: var(--s-3);
  flex-wrap: wrap;
}
.hq2-brief-meta-when { font-size: var(--t-11); color: var(--ink-3); }

.hq2-brief-title-edit {
  width: 100%;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.02em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
  margin-bottom: var(--s-3);
}
.hq2-brief-title-edit:focus { outline: none; border-bottom-color: var(--tc-gold); }

.hq2-brief-body-edit {
  width: 100%;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  color: var(--ink-2);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: var(--s-4);
  resize: vertical;
  line-height: 1.7;
  min-height: 320px;
  white-space: pre-wrap;
}
.hq2-brief-body-edit:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }

.hq2-brief-context {
  margin-top: var(--s-4);
  background: linear-gradient(180deg, rgba(200, 169, 110, .10), rgba(200, 169, 110, .02));
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 8px;
  padding: var(--s-4);
}
.hq2-brief-context-head {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 8px;
}
.hq2-brief-context-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: var(--s-2);
}
.hq2-brief-context-grid > div {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--font-ui);
}
.hq2-brief-context-grid span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-brief-context-grid b {
  font-weight: 800;
  font-size: var(--t-15);
  color: var(--ink);
}

.hq2-brief-saved {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-top: 8px;
  text-align: right;
  height: 16px;
}

/* ════════════════════════════════════════════════════════════════════
   CHAT POWER-UPS
   - threaded replies (right-side panel)
   - @mentions (gold chip in messages, mention-highlight on the message)
   - pinned messages (header strip + pin badge + pinned-state styling)
   - saved messages (bookmark button on hover, on-state)
   - mute channel (icon in header, dimmed rail row)
   - slash commands hint
   - polls (vote bars + tally)
   - per-message action row (reply/pin/save) on hover
   ════════════════════════════════════════════════════════════════════ */

/* Header — multiple right-side controls beyond the old delete */
.hq2-chat-head-acts { display: flex; gap: 6px; align-items: center; }
.hq2-chat-head-act {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .12s, border-color .12s, background .12s;
}
.hq2-chat-head-act:hover {
  color: var(--ink); background: var(--surface-2); border-color: var(--rule);
}
.hq2-chat-head-act.is-on {
  color: var(--tc-gold-deep, #8E6C2E);
  background: rgba(200, 169, 110, .12);
  border-color: rgba(200, 169, 110, .35);
}

/* Pinned strip — narrow row across the top of the active channel */
.hq2-chat-pinned {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: linear-gradient(180deg, rgba(200, 169, 110, .14), rgba(200, 169, 110, .04));
  border-bottom: 1px solid rgba(200, 169, 110, .25);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}
.hq2-chat-pinned-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  white-space: nowrap;
}
.hq2-chat-pinned-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .12s, transform .12s;
}
.hq2-chat-pinned-chip:hover { border-color: var(--tc-gold); transform: translateY(-1px); }
.hq2-chat-pinned-who { font-weight: 700; color: var(--ink); }
.hq2-chat-pinned-text {
  color: var(--ink-3);
  max-width: 220px;
  overflow: hidden; text-overflow: ellipsis;
}

/* Content (msgs + thread side panel) */
.hq2-chat-content {
  flex: 1; min-height: 0;
  display: flex;
}
.hq2-chat-msgs { flex: 1; min-width: 0; }
.hq2-chat-content--threaded .hq2-chat-msgs { flex: 1.4; }
.hq2-chat-thread {
  flex: 1; min-width: 0;
  border-left: 1px solid var(--rule);
  background: var(--surface);
  display: flex; flex-direction: column;
}
.hq2-chat-thread[hidden] { display: none; }
.hq2-chat-thread-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-13);
  flex-shrink: 0;
}
.hq2-chat-thread-close {
  background: transparent; border: 1px solid var(--rule);
  border-radius: 6px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  cursor: pointer;
  color: var(--ink-3);
}
.hq2-chat-thread-close:hover { color: var(--ink); background: var(--surface-2); }
.hq2-chat-thread-parent {
  display: flex; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}
.hq2-chat-thread-msgs {
  flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 12px 14px;
}
.hq2-chat-thread-empty {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
  text-align: center;
  padding: var(--s-5);
}
.hq2-chat-composer--thread {
  border-top: 1px solid var(--rule);
  flex-shrink: 0;
}

/* Per-message action row */
.hq2-chat-msg { position: relative; }
.hq2-chat-msg-acts {
  position: absolute;
  top: -10px; right: 8px;
  display: flex; gap: 2px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 2px;
  box-shadow: 0 4px 12px rgba(15, 18, 22, .08);
  opacity: 0;
  transition: opacity .12s;
  pointer-events: none;
}
.hq2-chat-msg:hover .hq2-chat-msg-acts {
  opacity: 1;
  pointer-events: auto;
}
.hq2-chat-msg-act {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--ink-3);
  cursor: pointer;
  transition: color .12s, background .12s;
}
.hq2-chat-msg-act:hover { color: var(--ink); background: var(--surface-2); }
.hq2-chat-msg-act.is-on { color: var(--tc-gold-deep, #8E6C2E); }
.hq2-chat-msg-act:disabled,
.hq2-chat-msg-act[data-busy="1"] {
  opacity: .5;
  cursor: progress;
  pointer-events: none;
}
.hq2-chat-msg-act[data-busy="1"]::after {
  content: '';
  position: absolute;
  inset: 50% auto auto 50%;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: hq2ChatSpin .65s linear infinite;
}
.hq2-chat-msg-act[data-busy="1"] svg { opacity: 0; }
.hq2-chat-msg-act { position: relative; }
@keyframes hq2ChatSpin { to { transform: rotate(360deg); } }

/* Pinned message styling on the main feed */
.hq2-chat-msg.is-pinned { background: rgba(200, 169, 110, .06); }
.hq2-chat-pin-badge {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  background: rgba(200, 169, 110, .18);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}

/* @mention chip */
.hq2-chat-mention {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(200, 169, 110, .18);
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 4px;
  color: var(--tc-gold-deep, #8E6C2E);
  font-weight: 700;
  font-family: var(--font-ui);
}
.hq2-chat-mention.is-me {
  background: rgba(200, 169, 110, .35);
  color: var(--ink);
}
.hq2-chat-msg.is-mention { background: rgba(200, 169, 110, .07); }
.hq2-chat-msg.is-mention.is-pinned { background: rgba(200, 169, 110, .12); }

/* Thread chip — shown on parent messages with replies */
.hq2-chat-thread-chip {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 6px;
  padding: 4px 10px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.hq2-chat-thread-chip:hover { border-color: var(--tc-gold); color: var(--ink); }

/* Polls */
.hq2-chat-poll {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-ui);
}
.hq2-chat-poll-q {
  font-weight: 800;
  font-size: var(--t-14);
  color: var(--ink);
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.hq2-chat-poll-opt {
  position: relative;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 8px 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink);
  display: flex; align-items: center; gap: 8px;
  overflow: hidden;
  transition: border-color .12s;
}
.hq2-chat-poll-opt:hover { border-color: var(--tc-gold); }
.hq2-chat-poll-opt.is-mine { border-color: var(--tc-gold); background: rgba(200, 169, 110, .12); }
.hq2-chat-poll-opt-bar {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(200, 169, 110, .18);
  border-radius: 6px 0 0 6px;
  transition: width .25s ease;
  z-index: 0;
}
.hq2-chat-poll-opt-label {
  position: relative; z-index: 1;
  flex: 1;
  font-weight: 600;
}
.hq2-chat-poll-opt-tally {
  position: relative; z-index: 1;
  font-size: var(--t-11);
  color: var(--ink-3);
  white-space: nowrap;
}
.hq2-chat-poll-total {
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-top: 4px;
}

/* Muted channel row in the rail */
.hq2-chat-row.is-muted {
  opacity: .55;
}
.hq2-chat-row.is-muted b {
  font-weight: 500;
}

/* Summary modal output */
.hq2-chat-summary {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: var(--s-3) var(--s-4);
  max-height: 50vh;
  overflow-y: auto;
}

@media (max-width: 980px) {
  .hq2-chat-content--threaded { flex-direction: column; }
  .hq2-chat-content--threaded .hq2-chat-thread {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* ════════════════════════════════════════════════════════════════════
   CHAT AI POWER-UPS — tags · translation · suggested replies ·
   vibe check · decisions · @concierge bot styling
   ════════════════════════════════════════════════════════════════════ */

/* Auto-tag pill — sits inline next to the message text */
.hq2-chat-tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-radius: 4px;
  vertical-align: 1px;
}
.hq2-chat-tag.is-urgent   { background: #FBE9E9; color: #C62F2F; }
.hq2-chat-tag.is-question { background: #E8F0FB; color: #2A5BB8; }
.hq2-chat-tag.is-kudos    { background: #E8F5EE; color: #1F7A3F; }
.hq2-chat-tag.is-decision { background: rgba(200, 169, 110, .18); color: var(--tc-gold-deep, #8E6C2E); }
.hq2-chat-tag.is-fyi      { background: rgba(15,18,22,.06); color: var(--ink-3); }

/* Translation slot — sits below the original, dimmed + small */
.hq2-chat-translation {
  margin-top: 4px;
  padding: 6px 10px;
  background: rgba(60, 130, 246, .06);
  border-left: 2px solid #3C82F6;
  border-radius: 0 6px 6px 0;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-2);
  line-height: 1.5;
}
.hq2-chat-translation-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2A5BB8;
  margin-right: 8px;
}

/* Suggested reply rows in the modal */
.hq2-chat-suggest-row {
  display: flex; flex-direction: column; gap: 3px;
  width: 100%;
  padding: 12px 14px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  transition: border-color .12s, transform .12s;
}
.hq2-chat-suggest-row:hover { border-color: var(--tc-gold); transform: translateY(-1px); }
.hq2-chat-suggest-tone {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
}
.hq2-chat-suggest-text {
  font-size: var(--t-13);
  color: var(--ink);
  line-height: 1.45;
}

/* Decisions modal rows */
.hq2-chat-decision {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  margin-bottom: 6px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-ui);
}
.hq2-chat-decision-text {
  flex: 1;
  font-size: var(--t-13);
  color: var(--ink);
  line-height: 1.45;
}

/* Concierge bot avatar — gold so it's clear in the thread */
.hq2-chat-msg[data-mid] .hq2-chat-msg-avatar {
  /* default avatar color is computed per-uid; concierge bot uid is a
     fixed string so its computed color happens to land on a tone we
     want to make distinct. We override here via attribute selector
     elsewhere if needed; for now defer to computed color. */
}

/* ════════════════════════════════════════════════════════════════════
   CHAT BRIDGES — linked projects · channel templates · sales pulse btn
   ════════════════════════════════════════════════════════════════════ */

/* Linked projects strip — sits below the channel header */
.hq2-chat-linked {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 14px;
  background: rgba(60, 130, 246, .06);
  border-bottom: 1px solid rgba(60, 130, 246, .18);
  overflow-x: auto;
  scrollbar-width: thin;
  flex-shrink: 0;
}
.hq2-chat-linked-label {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #2A5BB8;
  white-space: nowrap;
}
.hq2-chat-linked-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(60, 130, 246, .25);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color .12s, transform .12s;
}
.hq2-chat-linked-chip:hover { border-color: #3C82F6; transform: translateY(-1px); }
.hq2-chat-linked-chip-status {
  font-size: 9px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase;
  padding: 1px 6px; border-radius: 4px;
}
.hq2-chat-linked-chip-status.is-backlog     { background: rgba(15,18,22,.06); color: var(--ink-3); }
.hq2-chat-linked-chip-status.is-in_progress { background: #E8F0FB; color: #2A5BB8; }
.hq2-chat-linked-chip-status.is-review      { background: #FCEBC0; color: #8E6C2E; }
.hq2-chat-linked-chip-status.is-done        { background: #E8F5EE; color: #1F7A3F; }
.hq2-chat-linked-chip-name { font-weight: 600; }
.hq2-chat-linked-add {
  width: 26px; height: 26px;
  background: transparent;
  border: 1px dashed rgba(60, 130, 246, .35);
  border-radius: 6px;
  color: #2A5BB8;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
  margin-left: auto;
  flex-shrink: 0;
}
.hq2-chat-linked-add:hover { background: rgba(60, 130, 246, .08); }

/* Channel template picker in the new-channel modal */
.hq2-chat-new-tpls {
  margin: 12px 0;
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.hq2-chat-new-tpls-head {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 8px;
}
.hq2-chat-new-tpls-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 6px;
}
.hq2-chat-new-tpl {
  text-align: left;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font-family: var(--font-ui);
  display: flex; flex-direction: column; gap: 2px;
  transition: border-color .12s, background .12s;
}
.hq2-chat-new-tpl:hover { border-color: var(--tc-gold); }
.hq2-chat-new-tpl.is-active {
  background: var(--ink); border-color: var(--ink); color: #fff;
}
.hq2-chat-new-tpl-name {
  font-weight: 800;
  font-size: var(--t-12);
  letter-spacing: -.01em;
  color: var(--ink);
}
.hq2-chat-new-tpl.is-active .hq2-chat-new-tpl-name { color: #fff; }
.hq2-chat-new-tpl-desc {
  font-size: var(--t-11);
  color: var(--ink-3);
}
.hq2-chat-new-tpl.is-active .hq2-chat-new-tpl-desc { color: rgba(255,255,255,.6); }

/* Sales pulse button — same row as deep-link cards but is a button */
button.hq2-sales-deep {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  cursor: pointer;
  text-align: left;
  width: 100%;
}

/* ════════════════════════════════════════════════════════════════════
   CHAT MEDIA + POLISH
   - composer attach + voice buttons
   - attached file/image staging chip
   - inline attachments (image grid + file chips + audio player)
   - typing strip + recording indicator
   - read-receipt micro-line
   - Cmd+K group label
   ════════════════════════════════════════════════════════════════════ */

/* Composer additions */
.hq2-chat-attach {
  display: inline-flex;
  align-items: center; justify-content: center;
  width: 32px; height: 32px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .12s, background .12s;
}
.hq2-chat-attach:hover { color: var(--ink); background: var(--surface-2); }
.hq2-chat-attach.is-recording {
  color: #C62F2F;
  animation: hq2-chat-rec-pulse 1.2s ease-in-out infinite;
}
@keyframes hq2-chat-rec-pulse {
  0%, 100% { background: rgba(198, 47, 47, 0); }
  50%      { background: rgba(198, 47, 47, .14); }
}

/* Attached file/image chip on composer (before send) */
.hq2-chat-attach-staging {
  padding: 6px 12px;
  border-top: 1px dashed var(--rule);
  background: var(--surface-2);
}
.hq2-chat-attach-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
}
.hq2-chat-attach-chip img {
  width: 32px; height: 32px;
  object-fit: cover;
  border-radius: 4px;
}
.hq2-chat-attach-icon { color: var(--ink-3); display: inline-flex; }
.hq2-chat-attach-name {
  font-weight: 700;
  color: var(--ink);
  max-width: 200px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-chat-attach-size { color: var(--ink-3); }
.hq2-chat-attach-rm {
  background: transparent; border: 0;
  color: var(--ink-3);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 4px;
}
.hq2-chat-attach-rm:hover { color: #C62F2F; background: #FBE9E9; }
.hq2-chat-attach-chip.is-uploading { opacity: .7; }

/* Rendered attachments inside a message */
.hq2-chat-attachments {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 6px;
}
.hq2-chat-image {
  display: block;
  max-width: 280px;
  max-height: 220px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--rule);
  transition: border-color .12s;
}
.hq2-chat-image:hover { border-color: var(--tc-gold); }
.hq2-chat-image img {
  display: block;
  width: 100%; height: auto;
  max-height: 220px;
  object-fit: cover;
}
.hq2-chat-file {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink);
  text-decoration: none;
  transition: border-color .12s, background .12s;
}
.hq2-chat-file:hover { border-color: var(--tc-gold); background: #fff; }
.hq2-chat-file-name { font-weight: 700; }
.hq2-chat-file-meta { color: var(--ink-3); }
.hq2-chat-audio {
  display: block;
  max-width: 320px;
  margin-top: 6px;
  border-radius: 6px;
}

/* Typing strip / recording indicator */
.hq2-chat-typing {
  padding: 6px 14px;
  background: var(--surface-2);
  border-top: 1px solid var(--rule);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-style: italic;
  color: var(--ink-3);
}
.hq2-chat-typing.is-recording {
  background: #FBE9E9;
  color: #C62F2F;
  font-style: normal;
  font-weight: 700;
}

/* Read receipt micro-line */
.hq2-chat-receipt {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
  text-align: right;
  opacity: .7;
}

/* Cmd+K group label */
.hq2-cmdk-group {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding: 8px 14px 4px;
}

/* ════════════════════════════════════════════════════════════════════
   CHAT BUG FIXES (2026-05-07)
   - Scope the entry animation to truly-new messages only (was firing
     on every paint → flash on every send/receive)
   - Lock chip line-height + give the message body word-break safety so
     long URLs / wide chips don't push the line tall
   - Tighten chip metrics for inline placement
   ════════════════════════════════════════════════════════════════════ */

/* Override: only animate the FRESH message, not the whole feed */
.hq2-chat-msg                 { animation: none; }
.hq2-chat-msg.is-fresh        { animation: hq2MsgIn .22s cubic-bezier(.32,.72,0,1); }
@media (prefers-reduced-motion: reduce){
  .hq2-chat-msg.is-fresh      { animation: none; }
}

/* Message text — friendly wrap behavior.
   PREVIOUS BUG: `overflow-wrap: anywhere` broke text mid-character,
   shredding normal messages into many lines. Now we use the standard
   `break-word` which only breaks long unbreakable strings (URLs,
   continuous tokens), leaving regular prose alone.
   `pre-wrap` is preserved so user-typed line breaks render correctly. */
.hq2-chat-msg-text {
  overflow-wrap: break-word;
  word-break: normal;
  word-wrap: break-word;          /* legacy alias for older Chromium / Safari */
  white-space: pre-wrap;
  hyphens: none;
  line-height: 1.55;
  max-width: 100%;
}
/* Defensive: same rule for the body container (some browsers pick up
   the box from here vs the inner span). */
.hq2-chat-msg-body {
  max-width: 100%;
  min-width: 0;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Chip — line-height locked, padding tight, so it sits inline with
   the surrounding text. max-width + ellipsis ensure a chip with a
   long label can't push the message body wider than the column. */
.hq2-chat-chip {
  line-height: 1;
  padding: 4px 10px;
  vertical-align: -1px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-chat-chip-kind,
.hq2-chat-chip-label {
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   FRIENDLY UI ROLLOUT — apply the warm gradient + glassmorphic feel
   to every hero across HQ2, not just agent pages.
   The base treatment was scoped to .hq2-agent-hero in PR #1268. We
   now apply the same look to:
     - .hq2-hub-hero        (every Customer 360 hub: Sales, CS, Field,
                             IT&HR, Contact, Marketing, Commerce, Supply,
                             Revenue, Platform, Financial, Manufacturing,
                             Consumer Goods, Comms, Media)
     - .hq2-greet           (overview greeting band)
     - .hq2-arch-hero       (architecture map)
     - .hq2-brief-detail-head (briefings detail header — softer)
     - .hq2-items-head      (recipes + products list header)
   ════════════════════════════════════════════════════════════════════ */

/* Hub hero — same pastel multi-radial as the onboarding tool. The
   existing .hq2-hub-hero was a plain surface; we replace its bg with
   a warm gradient, add the spring entry, and bump headline weight. */
.hq2-hub-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(20, 16, 68, .06);
  padding: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(560px 320px at -8% 100%, rgba(220, 238, 255, .55) 0%, transparent 60%),
    radial-gradient(480px 360px at 50% 50%,  rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 24px 60px -22px rgba(20, 16, 68, .14);
  animation: hq2-friendly-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-hub-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-hub-hero,
  .hq2-hub-hero::after { animation: none; }
}
.hq2-hub-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  color: #8B6914;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-hub-eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B6914, #F0DDB3);
}
.hq2-hub-h1 {
  font-weight: 900;
  font-size: clamp(28px, 3.4vw, 40px);
  letter-spacing: -.03em;
  color: #141044;
  line-height: 1;
}
.hq2-hub-h1 em {
  font-style: normal;
  color: #8B6914;
  font-weight: 900;
}
.hq2-hub-mission {
  color: #3D3E5C;
  font-size: clamp(15px, 1.4vw, 17px);
  max-width: 56ch;
  line-height: 1.55;
  font-weight: 500;
}

/* Greet band on the overview — warmer, glassmorphic. The existing
   .hq2-greet rule had a plain gold-tinted surface; replace with the
   same pastel multi-radial so it matches every other hero.
   Override display to a vertical column — the original rule used
   `display: flex; justify-content: space-between` which crammed the
   greeting / fortune / fact / history into one horizontal row. The
   intended layout stacks them: greeting line on top, fortune below
   it, anniversary banner (if present) below that, fact pill at the
   bottom. */
.hq2-greet {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(20, 16, 68, .06);
  padding: clamp(16px, 2.4vw, 24px) clamp(18px, 2.6vw, 28px);
  background:
    radial-gradient(540px 280px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(520px 260px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(420px 260px at 110% 110%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 16px 40px -22px rgba(20, 16, 68, .12);
  animation: hq2-friendly-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
  /* Stack children vertically — overrides the earlier flex-row rule.
     Consistent gap between greeting line / fortune / history / fact
     so each stacks cleanly without relying on per-child margins. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}
/* The new column-gap layout on .hq2-greet means the anniversary
   banner doesn't need its own bottom margin — parent gap is the
   single source of truth. */
.hq2-greet-history { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce){
  .hq2-greet { animation: none; }
}
.hq2-greet-hi {
  font-weight: 900;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -.025em;
  color: #141044;
  line-height: 1;
}
.hq2-greet-fact-tag {
  background: linear-gradient(135deg, var(--tc-gold), #F0DDB3);
}

/* Architecture hero — soft + ambient like the others */
.hq2-arch-hero {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(20, 16, 68, .06);
  padding: clamp(20px, 3vw, 36px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(560px 320px at -8% 100%, rgba(220, 238, 255, .55) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 24px 60px -22px rgba(20, 16, 68, .14);
  animation: hq2-friendly-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
  margin-bottom: var(--s-5);
}
.hq2-arch-h1 {
  font-weight: 900;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -.035em;
  color: #141044;
}

/* List headers (recipes/products) — pick up the same warmth so the
   transition into the editor doesn't feel like crossing a border. */
.hq2-items-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(540px 220px at 92% -10%, rgba(255, 230, 220, .65) 0%, transparent 55%),
    radial-gradient(420px 220px at -10% 8%,  rgba(237, 230, 255, .65) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFFFFF 100%);
}
.hq2-items-title {
  font-weight: 900;
  letter-spacing: -.02em;
  color: #141044;
}

/* Project list/detail header — same warmth */
.hq2-proj-head,
.hq2-proj-detail-head,
.hq2-brief-detail-head {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(540px 220px at 92% -10%, rgba(255, 230, 220, .55) 0%, transparent 55%),
    radial-gradient(420px 220px at -10% 8%,  rgba(237, 230, 255, .55) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFFFFF 100%);
}
.hq2-proj-title {
  font-weight: 900;
  letter-spacing: -.02em;
  color: #141044;
}

/* Briefings + Item list common: hero card warmth where applicable */
.hq2-brief-list .hq2-brief-empty,
.hq2-items-empty {
  background: linear-gradient(180deg, rgba(255, 246, 240, .7), rgba(251, 247, 255, .4));
  border-radius: 16px;
  border: 1px dashed rgba(20, 16, 68, .08);
}

/* ════════════════════════════════════════════════════════════════════
   RECIPES + PRODUCTS EDITOR
   List + tabbed-detail layout, full-bleed (.hq2-page--crm).
   ════════════════════════════════════════════════════════════════════ */

/* Editor (detail view) keeps the full-bleed flex column — its split
   panes need the explicit height. */
.hq2-page--crm .hq2-item-detail {
  height: 100%;
  display: flex;
  flex-direction: column;
}
/* List view flows naturally so the giant pastel hero scrolls away
   when the user starts browsing recipes (was a sticky waste of
   screen real estate). The items grid no longer needs internal
   scroll — page scroll handles it. */
.hq2-page--crm .hq2-items {
  display: flex;
  flex-direction: column;
}

/* List header */
.hq2-items-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.hq2-items-head-l { display: flex; align-items: baseline; gap: var(--s-3); }
.hq2-items-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: var(--t-22);
  letter-spacing: -.01em;
  color: var(--ink);
  margin: 0;
}
.hq2-items-meta {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
}

/* Toolbar — sticks to the top of the scroll viewport while the hero
   above scrolls away, so search + filter chips stay reachable as
   the user browses long catalogs. z-index keeps it above grid cards. */
.hq2-items-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex; gap: var(--s-3); align-items: center;
  padding: 12px var(--s-5);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  box-shadow: 0 4px 12px -8px rgba(20, 16, 68, .08);
}
/* Items list (recipes/products) search width — visual styling now
   inherited from the shared .hq2-search rule earlier in the file. */
.hq2-items-search { flex: 1; max-width: 420px; display: flex; }

.hq2-items-filters {
  display: flex; gap: 0;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 2px;
}
.hq2-items-filters button {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  padding: 6px 12px;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  border-radius: 6px;
  cursor: pointer;
}
.hq2-items-filters button.is-active { background: var(--ink); color: #fff; }

/* Items grid — flex-column container of collection sections. Each
   section has its own internal card grid. Lets the page scroll
   naturally so the hero above can scroll out of view. */
.hq2-items-grid {
  padding: var(--s-4) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.hq2-items-loading,
.hq2-items-empty {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3);
  text-align: center;
  padding: var(--s-7) var(--s-4);
}

/* Item card */
.hq2-item-card {
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--font-ui);
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  cursor: pointer;
}
.hq2-item-card:hover {
  border-color: var(--tc-gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15,18,22,.08);
}
/* Drag-to-reorder. The grip handle only appears when the list is shown
   unfiltered (paintItemsGrid adds .is-reorderable); it's the only
   draggable part so plain clicks still open the item. */
.hq2-item-drag {
  display: none;
  position: absolute; top: 6px; left: 6px; z-index: 3;
  width: 26px; height: 26px;
  align-items: center; justify-content: center;
  border-radius: 8px;
  background: rgba(15,18,22,.55);
  color: #fff; font-size: 13px; line-height: 1;
  cursor: grab; user-select: none;
  -webkit-user-select: none;
}
.hq2-item-drag:active { cursor: grabbing; }
.hq2-items-grid.is-reorderable .hq2-item-drag { display: grid; }
/* While reordering, don't let cards lift on hover (it fights the drag). */
.hq2-items-grid.is-reorderable .hq2-item-card:hover { transform: none; }
.hq2-item-card.is-dragging { opacity: .4; }
.hq2-item-card.is-drop-before { box-shadow: inset 3px 0 0 0 var(--tc-gold); }
.hq2-item-card.is-drop-after  { box-shadow: inset -3px 0 0 0 var(--tc-gold); }
/* "rearrange" toggle — a mode button, gold when active. */
.hq2-items-reorder-btn.is-active {
  background: var(--tc-gold);
  border-color: var(--tc-gold);
  color: #1a1206;
}
/* Search + filter pills dim and lock while rearranging. */
.hq2-items-filters.is-locked { opacity: .45; pointer-events: none; }
.hq2-item-card-photo {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--surface-2);
  display: grid; place-items: center;
  overflow: hidden;
}
.hq2-item-card-photo img {
  width: 100%; height: 100%; object-fit: cover;
}
.hq2-item-card-photo-empty {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-4);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hq2-item-card-status {
  position: absolute; top: 8px; left: 8px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
}
.hq2-item-card-status.is-published { background: #E8F5EE; color: #1F7A3F; }
.hq2-item-card-status.is-draft     { background: rgba(15,18,22,.55); color: #fff; }
.hq2-item-card-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; }
.hq2-item-card-name {
  font-weight: 800;
  font-size: var(--t-14);
  letter-spacing: -.01em;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-item-card-cat {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
}
.hq2-item-card-macros {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.hq2-item-card-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.hq2-item-card-flags span {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  background: rgba(200, 169, 110, .18);
  color: var(--tc-gold-deep, #8E6C2E);
  padding: 2px 6px;
  border-radius: 4px;
}

/* ── Detail editor ── */

.hq2-item-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--s-3) var(--s-5);
  border-bottom: 1px solid var(--rule);
  background: var(--surface);
}
.hq2-item-detail-actions { display: flex; gap: var(--s-2); align-items: center; }
.hq2-item-detail-saved {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
  margin-right: 8px;
  min-width: 50px;
}
.hq2-item-detail-body {
  flex: 1; overflow-y: auto;
  background: var(--bg);
}

.hq2-item-edit {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--s-4) var(--s-5);
}

/* Hero — photo + name + publish toggle */
.hq2-item-edit-hero {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: var(--s-4);
  margin-bottom: var(--s-4);
}
.hq2-item-photo {
  position: relative;
  aspect-ratio: 4/3;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid; place-items: center;
}
.hq2-item-photo img { width: 100%; height: 100%; object-fit: cover; }
.hq2-item-photo-empty {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-4);
}
.hq2-item-photo-btn {
  position: absolute; bottom: 10px; right: 10px;
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(15, 18, 22, .85);
  color: #fff;
  border: 0;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .12s;
}
.hq2-item-photo-btn:hover { background: var(--ink); }
.hq2-item-photo-rm {
  position: absolute; top: 10px; right: 10px;
  background: rgba(15, 18, 22, .85);
  color: #fff;
  border: 0;
  width: 28px; height: 28px;
  border-radius: 6px;
  cursor: pointer;
  display: grid; place-items: center;
}
.hq2-item-photo-rm:hover { background: #C62F2F; }

/* ─── Multi-photo gallery (extras) ────────────────────────────────────
   Wrapper around the primary photo card, the extras strip, and the
   helper text. Lays out as a vertical stack so the gallery sits
   directly below the cover and always reads "this is the cover, then
   the extras." Mirrors what the customer site already understands —
   /recipes/{id}.photos[] — so adding here lights up hover-swap on
   menu cards and slideshow dots in the modal automatically. */
.hq2-item-photo-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-item-photo-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}
.hq2-item-photo-thumb {
  position: relative;
  width: 72px;
  height: 72px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  flex-shrink: 0;
}
.hq2-item-photo-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.hq2-item-photo-thumb-rm {
  position: absolute;
  top: 4px; right: 4px;
  width: 20px; height: 20px;
  background: rgba(15, 18, 22, .82);
  color: #fff;
  border: 0;
  border-radius: 5px;
  cursor: pointer;
  display: grid;
  place-items: center;
  opacity: 0;
  transition: opacity .12s, background .12s;
  padding: 0;
}
.hq2-item-photo-thumb-rm svg { width: 11px; height: 11px; }
.hq2-item-photo-thumb:hover .hq2-item-photo-thumb-rm { opacity: 1; }
.hq2-item-photo-thumb-rm:hover { background: #C62F2F; }
.hq2-item-photo-add {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: transparent;
  border: 1.5px dashed rgba(20, 16, 68, .22);
  color: var(--ink-3, #6E7088);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 0;
  transition: border-color .12s, background .12s, color .12s;
  font-family: var(--font-ui);
}
.hq2-item-photo-add:hover:not([disabled]) {
  border-color: var(--ink, #141044);
  color: var(--ink, #141044);
  background: rgba(20, 16, 68, .03);
}
.hq2-item-photo-add[disabled] {
  opacity: .45;
  cursor: not-allowed;
}
.hq2-item-photo-add-plus {
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
}
.hq2-item-photo-add-label {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hq2-item-photo-help {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3, #6E7088);
  margin: 0;
  line-height: 1.45;
}

.hq2-item-edit-hero-fields {
  display: flex; flex-direction: column; gap: var(--s-3);
  justify-content: center;
}
.hq2-item-edit-name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 32px);
  letter-spacing: -.02em;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid transparent;
  padding: 4px 0;
}
.hq2-item-edit-name:focus {
  outline: none;
  border-bottom-color: var(--tc-gold);
}
.hq2-item-edit-quick {
  display: flex; gap: var(--s-3); flex-wrap: wrap;
}
.hq2-item-publish {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
}
.hq2-item-publish input { margin: 0; }

/* Tabs */
.hq2-item-tabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--rule);
  overflow-x: auto;
}
.hq2-item-tabs button {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  padding: 12px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.hq2-item-tabs button:hover { color: var(--ink); }
.hq2-item-tabs button.is-active {
  color: var(--ink);
  border-bottom-color: var(--tc-gold);
  font-weight: 700;
}

/* Tab body */
.hq2-item-tab-body {
  padding: var(--s-3) 0;
}
.hq2-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-item-field {
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-item-field span {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-item-field .hq2-input {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  padding: 8px 12px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: #fff;
  color: var(--ink);
  width: 100%;
}
.hq2-item-field textarea.hq2-input { line-height: 1.55; resize: vertical; }
.hq2-item-field .hq2-input:focus { outline: 2px solid var(--tc-gold); outline-offset: 1px; }
.hq2-item-field--full { grid-column: 1 / -1; margin-bottom: var(--s-3); }

.hq2-item-section {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-3);
}
.hq2-item-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 10px;
}
.hq2-item-section-head h4 {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0;
}
.hq2-item-section-head .meta { font-size: var(--t-11); color: var(--ink-3); }

.hq2-item-tagrow {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.hq2-item-tagchip {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  padding: 6px 12px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all .12s;
}
.hq2-item-tagchip:hover { border-color: var(--tc-gold); }
.hq2-item-tagchip.is-on {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Allergen-disclosure modifier — borrows the base chip styles but
   colors itself via --allergen-color (set inline per chip in the
   render). Using a CSS variable instead of inline border/background
   lets the base :hover rule still win for unselected chips. */
.hq2-item-tagchip--allergen {
  background: transparent;
  border-color: var(--allergen-color, var(--rule));
  color: var(--allergen-color, var(--ink-2));
}
.hq2-item-tagchip--allergen.is-on {
  background: var(--allergen-color);
  border-color: var(--allergen-color);
  color: #fff;
}

/* ─── Tier ladder picker (Menu tab section) ───────────────────────────
   Section renders inside the Menu tab. Dropdown sits at the top; per-
   tier rows appear below when a ladder is picked. Each row is a 3-
   column grid: offered checkbox · name+key+label-override · price input.
   Mirrors the legacy HQ tier rows but in mise's quieter, paper-card
   visual language. */
.hq2-item-section-tiers {
  background: var(--surface, #fff);
}
.hq2-item-tier-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--s-3);
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 10px);
  background: var(--surface-2, #FAF7F2);
  padding: 10px;
}
.hq2-item-tier-row {
  display: grid;
  grid-template-columns: 28px 1fr 130px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.hq2-item-tier-row:has([data-tier-offered]:checked) {
  border-color: rgba(20, 16, 68, .25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 2px 6px -2px rgba(20, 16, 68, .08);
}
.hq2-item-tier-toggle {
  display: grid;
  place-items: center;
  cursor: pointer;
}
.hq2-item-tier-toggle input {
  width: 16px; height: 16px;
  cursor: pointer;
  accent-color: var(--ink, #141044);
}
.hq2-item-tier-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-item-tier-label {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
}
.hq2-item-tier-key {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-10);
  color: var(--ink-3, #6E7088);
  letter-spacing: .04em;
}
.hq2-item-tier-override {
  margin-top: 4px;
  width: 100%;
  padding: 5px 8px !important;
  font-size: var(--t-12) !important;
  border: 1px dashed var(--rule) !important;
  border-radius: 6px !important;
  background: var(--surface-2, #FAF7F2);
}
.hq2-item-tier-override:focus {
  border-style: solid !important;
  background: #fff;
}
.hq2-item-tier-price {
  position: relative;
  display: flex;
  align-items: center;
}
.hq2-item-tier-price-mark {
  position: absolute;
  left: 10px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-3, #6E7088);
  pointer-events: none;
}
.hq2-item-tier-price input {
  padding-left: 22px !important;
  width: 100%;
  font-variant-numeric: tabular-nums;
}
.hq2-item-tier-help {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3, #6E7088);
  margin: 6px 0 0;
  line-height: 1.45;
}
@media (max-width: 720px){
  .hq2-item-tier-row { grid-template-columns: 24px 1fr 110px; gap: 8px; }
}

/* ─── Custom tier rows ─────────────────────────────────────────────
   Custom-mode rows have a different shape than predefined-ladder rows:
   no toggle (custom rows are always offered), a qty column, and an
   inline remove button. The optional customer-facing "note" hint
   wraps onto its own line below the main row so the price grid
   stays clean. */
.hq2-item-tier-row--custom {
  display: block;          /* overrides the predefined grid */
  padding: 8px 10px;
}
.hq2-item-tier-row-main {
  display: grid;
  grid-template-columns: 1fr 70px 110px 28px;
  gap: 10px;
  align-items: center;
}
.hq2-item-tier-row--custom .hq2-item-tier-rm {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1px solid var(--rule);
  background: #fff;
  color: var(--ink-3, #6E7088);
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  padding: 0;
}
.hq2-item-tier-row--custom .hq2-item-tier-rm:hover {
  color: #b54848;
  border-color: rgba(181, 72, 72, .35);
  background: #fff8f8;
}
.hq2-item-tier-note-row {
  margin-top: 6px;
}
.hq2-item-tier-note {
  width: 100%;
  font-size: var(--t-12) !important;
  padding: 5px 9px !important;
  border: 1px dashed var(--rule) !important;
  border-radius: 6px !important;
  background: var(--surface-2, #FAF7F2);
  color: var(--ink-2);
  font-style: italic;
}
.hq2-item-tier-note::placeholder {
  font-style: italic;
  color: var(--ink-3, #8a8ca1);
  opacity: .8;
}
.hq2-item-tier-note:focus {
  border-style: solid !important;
  background: #fff;
  font-style: normal;
}
@media (max-width: 720px){
  .hq2-item-tier-row-main { grid-template-columns: 1fr 60px 100px 24px; gap: 8px; }
}

.hq2-item-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: var(--s-3);
}

/* ── Substitutions tab (ported from legacy /hq, restyled to Mise tokens).
   Each group is a card; each option is a row with: default-radio, name
   input, signed-delta input ([+/-] $ amount), delete. Validation banner
   sits above the groups and turns amber when defaults aren't cheapest. */
.hq2-item-sub-lede {
  font-size: var(--t-12); color: var(--ink-3); margin: 0 0 12px;
  line-height: 1.5;
}
.hq2-item-sub-banner {
  display: flex; gap: 8px; padding: 10px 14px;
  border-radius: var(--r-md); font-size: var(--t-12);
  line-height: 1.4; align-items: flex-start; margin-bottom: 14px;
  border: 1px solid transparent;
}
.hq2-item-sub-banner .ico { font-size: 14px; flex-shrink: 0; line-height: 1.2; }
.hq2-item-sub-banner.is-ok {
  background: var(--success-bg); color: #1A5C3A;
  border-color: rgba(46, 134, 87, .25);
}
.hq2-item-sub-banner.is-warn {
  background: var(--warning-bg); color: #7E5E03;
  border-color: rgba(184, 134, 11, .25);
}
.hq2-item-sub-banner.is-danger {
  background: rgba(252, 165, 165, .15); color: #B91C1C;
  border-color: rgba(220, 38, 38, .3);
}
/* Dietary-tag conflict banner (menu tab) — list of claims the
   ingredient list contradicts. */
.hq2-item-tagwarn-list {
  margin: 4px 0 0; padding-left: 16px;
}
.hq2-item-tagwarn-list li { margin-bottom: 2px; }
.hq2-item-sub-empty {
  font-size: var(--t-12); color: var(--ink-4); font-style: italic;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px dashed var(--rule); border-radius: var(--r-sm);
}
.hq2-item-sub-group {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); margin-bottom: 12px; overflow: hidden;
}
.hq2-item-sub-group-head {
  display: grid; grid-template-columns: 1fr auto auto;
  gap: 10px; align-items: center; padding: 10px 14px;
  background: var(--surface-2); border-bottom: 1px solid var(--rule);
}
.hq2-item-sub-group-label {
  font-weight: 700; font-size: var(--t-13);
}
.hq2-item-sub-req {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: var(--t-11); font-weight: 700;
  color: var(--ink-3); background: #fff;
  border: 1px solid var(--rule); border-radius: var(--r-pill);
  padding: 5px 11px; cursor: pointer;
}
.hq2-item-sub-req .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--rule-strong); display: block;
}
.hq2-item-sub-req.is-on {
  color: var(--danger); background: var(--danger-bg);
  border-color: rgba(179, 58, 26, .35);
}
.hq2-item-sub-req.is-on .dot { background: var(--danger); }
.hq2-item-sub-group-rm {
  width: 28px; height: 28px; border: 0; background: transparent;
  color: var(--ink-4); cursor: pointer; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.hq2-item-sub-group-rm:hover { color: var(--danger); background: var(--surface-2); }
.hq2-item-sub-options {
  padding: 8px 10px;
}
.hq2-item-sub-option {
  display: grid;
  grid-template-columns: 28px 1fr 150px 28px;
  gap: 8px; align-items: center;
  padding: 6px 6px; border-radius: var(--r-sm);
}
.hq2-item-sub-option:hover { background: var(--surface-2); }
.hq2-item-sub-option.is-default { background: rgba(200, 169, 110, .07); }
.hq2-item-sub-default-rad {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--rule-strong); background: #fff;
  cursor: pointer; display: grid; place-items: center; padding: 0;
}
.hq2-item-sub-default-rad.is-on {
  border-color: var(--tc-gold-dark);
  background: linear-gradient(135deg, var(--tc-gold), var(--tc-gold-light));
}
.hq2-item-sub-default-rad .inner {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fff; display: block;
}
.hq2-item-sub-option-name {
  font-weight: 600; font-size: var(--t-13);
}
.hq2-item-sub-delta {
  display: inline-flex; align-items: center; gap: 4px;
  background: #fff; border: 1px solid var(--rule);
  border-radius: var(--r-sm); padding: 4px 8px;
}
.hq2-item-sub-delta-sign {
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--t-12); font-weight: 800; color: var(--ink-2);
  outline: none; padding: 0 2px;
}
.hq2-item-sub-delta-$ {
  font-size: var(--t-12); font-weight: 700; color: var(--ink-4);
}
.hq2-item-sub-delta-amt {
  border: 0; background: transparent;
  width: 60px; padding: 2px 4px;
  font-size: var(--t-13); font-weight: 700;
  text-align: right; color: var(--ink); outline: none;
  font-variant-numeric: tabular-nums;
}
.hq2-item-sub-delta-amt:focus { outline: 1px solid var(--tc-gold); border-radius: 2px; }
.hq2-item-sub-option-rm {
  width: 24px; height: 24px; border: 0; background: transparent;
  color: var(--ink-5); cursor: pointer; border-radius: var(--r-sm);
  display: grid; place-items: center;
}
.hq2-item-sub-option-rm:hover { color: var(--danger); background: var(--surface-2); }
.hq2-item-sub-add-option {
  width: 100%; margin: 6px 0 4px;
  padding: 7px 10px; background: transparent;
  border: 1px dashed var(--rule-strong); border-radius: var(--r-sm);
  font-size: var(--t-12); font-weight: 600; color: var(--ink-3);
  cursor: pointer;
}
.hq2-item-sub-add-option:hover { border-color: var(--tc-gold); color: var(--ink); }
.hq2-item-sub-add-group {
  width: 100%; margin-top: 6px;
  padding: 14px; background: transparent;
  border: 1.5px dashed var(--rule-strong); border-radius: var(--r-lg);
  font-family: var(--font-ui);
  font-size: var(--t-13); font-weight: 700; color: var(--ink-3);
  cursor: pointer; text-align: center; letter-spacing: .02em;
}
.hq2-item-sub-add-group:hover { border-color: var(--tc-gold); color: var(--ink); }

/* Customer preview strip — mirrors the cart-drawer chip styling using
   the existing .hq2-item-tagchip + .delta classes. Lives in its own
   .hq2-item-section so the eyebrow rule stays consistent. */
.hq2-item-sub-preview-empty {
  font-size: var(--t-12); color: var(--ink-4); font-style: italic;
}
.hq2-item-sub-preview-group { margin-bottom: 12px; }
.hq2-item-sub-preview-group:last-child { margin-bottom: 0; }
.hq2-item-sub-preview-lab {
  font-size: var(--t-11); font-weight: 800;
  color: var(--ink-2); margin-bottom: 6px;
  display: flex; align-items: baseline; gap: 8px;
}
.hq2-item-sub-preview-lab .req {
  font-size: 9px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--ink-4);
}
.hq2-item-sub-preview-group .hq2-item-tagchip .delta {
  font-size: 10px; font-weight: 800; color: var(--tc-navy);
  margin-left: 6px;
}
.hq2-item-sub-preview-group .hq2-item-tagchip.is-on .delta { color: #fff; }

.hq2-item-linked {
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-item-linked-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 90px 90px 120px 30px;
  gap: 8px;
  align-items: center;
}
.hq2-item-linked-section {
  padding: 6px 8px;
  font-size: var(--t-12);
}
.hq2-item-linked-sechint {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  color: var(--ink-3);
  margin: 2px 0 10px;
}
.hq2-item-linked-group { display: flex; flex-direction: column; gap: 6px; }
.hq2-item-linked-group + .hq2-item-linked-group { margin-top: 10px; }
.hq2-item-linked-grouphead {
  font-family: var(--font-ui);
  font-size: var(--t-11);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: center; gap: 8px;
}
.hq2-item-linked-groupcount {
  font-weight: 600;
  color: var(--ink-3);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 0 7px;
  font-size: var(--t-10);
}
.hq2-item-linked-name {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-item-linked-qty,
.hq2-item-linked-unit {
  padding: 6px 10px;
  font-size: var(--t-12);
}
.hq2-item-linked-rm {
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 6px;
  width: 30px; height: 30px;
  color: var(--ink-3);
  cursor: pointer;
  display: grid; place-items: center;
}
.hq2-item-linked-rm:hover { color: #C62F2F; border-color: #F0C2C2; background: #FBE9E9; }

.hq2-item-empty {
  text-align: center;
  padding: var(--s-4);
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3);
}

.hq2-item-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-2);
}
.hq2-item-flag {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 8px;
  font-family: var(--font-ui);
  cursor: pointer;
  transition: border-color .12s;
}
.hq2-item-flag:hover { border-color: var(--tc-gold); }
.hq2-item-flag input { margin-top: 2px; flex-shrink: 0; }
.hq2-item-flag-body { display: flex; flex-direction: column; gap: 2px; }
.hq2-item-flag-name {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
}
.hq2-item-flag-desc {
  font-size: var(--t-11);
  color: var(--ink-3);
}

@media (max-width: 760px) {
  .hq2-item-edit-hero { grid-template-columns: 1fr; }
  .hq2-item-linked-row { grid-template-columns: 1fr 62px 62px 104px 30px; }
  .hq2-items-toolbar { flex-direction: column; align-items: stretch; }
  .hq2-items-search { max-width: none; }
}

/* ════════════════════════════════════════════════════════════════════
   NUTRITION MAPPING TAB (.hq2-nutmap-*)
   ──────────────────────────────────────────────────────────────────── */

.hq2-nutmap-sub {
  font-size: var(--t-12);
  color: var(--ink-3);
  margin-top: 4px;
  max-width: 64ch;
  line-height: 1.5;
}
.hq2-nutmap-note {
  font-size: var(--t-12);
  color: var(--ink-4);
  padding: 8px 0;
}
.hq2-nutmap-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0 18px;
}
.hq2-nutmap-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hq2-nutmap-stat.is-warn {
  border-color: rgba(200, 169, 110, .35);
  background: rgba(232, 200, 122, .08);
}
.hq2-nutmap-stat-val {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--tc-navy);
}
.hq2-nutmap-stat-lbl {
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.hq2-nutmap-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.hq2-nutmap-head,
.hq2-nutmap-row {
  display: grid;
  /* Edamam column removed (switched off for cost) — 2 columns now. */
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr);
  gap: 10px;
  padding: 10px 14px;
  align-items: center;
}
.hq2-nutmap-head {
  background: var(--surface-2);
  font-size: var(--t-11);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.hq2-nutmap-row {
  border-bottom: 1px solid var(--rule);
}
.hq2-nutmap-row:last-child { border-bottom: 0; }
.hq2-nutmap-ing-name {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
}
.hq2-nutmap-ing-qty {
  font-size: var(--t-11);
  color: var(--ink-4);
  margin-top: 2px;
}
/* Conversion source — small line under the qty showing how the
   rollup is converting the unit. Four visual states:
     default    → type-density (close-enough working-baker estimate)
     is-precise → USDA portion / Edamam measure (exact for THIS food)
     is-approx  → generic fallback (water-density estimate)
     is-warn    → unconvertible unit (row skipped in rollup) */
.hq2-nutmap-ing-conv {
  font-size: var(--t-11);
  color: var(--ink-4);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.hq2-nutmap-ing-conv.is-precise {
  color: #2A5E3A;
}
.hq2-nutmap-ing-conv.is-approx {
  color: #8A6F3F;
}
.hq2-nutmap-ing-conv.is-warn {
  color: #B3211A;
  font-weight: 600;
}
/* Per-ingredient macros line — what THIS ingredient contributes to
   the recipe at its actual gram weight (kcal · protein · carbs · fat).
   Bold-on-numbers gives the at-a-glance read; small src tag at the
   end says which dataset (USDA / Edamam) the numbers came from. */
.hq2-nutmap-ing-macros {
  margin-top: 4px;
  font-size: var(--t-11);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
.hq2-nutmap-ing-macros b {
  font-weight: 700;
  color: var(--ink);
}
.hq2-nutmap-ing-macros-src {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--surface-2);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-4);
  vertical-align: middle;
}
.hq2-nutmap-ing-macros.is-hint {
  color: var(--ink-4);
  font-style: italic;
}
/* Per-serving variant — appears immediately under the batch line on
   multi-serving recipes. Slightly lighter + indented so it reads as
   "derived from the line above", matching the FDA label's per-serving
   numbers. */
.hq2-nutmap-ing-macros.is-serving {
  margin-top: 1px;
  color: var(--ink-4);
  padding-left: 12px;
  position: relative;
}
.hq2-nutmap-ing-macros.is-serving::before {
  content: '└';
  position: absolute;
  left: 2px;
  top: -2px;
  color: var(--ink-5);
  font-size: 11px;
}
.hq2-nutmap-ing-macros.is-serving b {
  color: var(--ink-2);
}
.hq2-nutmap-ing-macros-src.is-serving-tag {
  background: rgba(63, 143, 91, .08);
  color: #2A5E3A;
}
.hq2-nutmap-pill {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--rule);
  background: var(--surface);
  cursor: default;
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.hq2-nutmap-pill.is-mapped {
  background: rgba(63, 143, 91, .07);
  border-color: rgba(63, 143, 91, .25);
  flex-direction: row;
  align-items: center;
  gap: 8px;
}
/* Manual override — a staff-entered per-100g. Gold tint (matches the
   "auto"/FDA pills) so it reads as a deliberate human value distinct from
   the green database mapping. */
.hq2-nutmap-pill.is-manual {
  background: rgba(200, 169, 110, .12);
  border-color: rgba(200, 169, 110, .38);
  flex-direction: row;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.hq2-nutmap-pill.is-manual .hq2-nutmap-pill-val { color: #8A6A2E; }
.hq2-nutmap-pill-edit {
  flex-shrink: 0;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #8A6A2E;
  font-size: 13px;
  line-height: 1;
}
.hq2-nutmap-pill-edit:hover { background: rgba(200, 169, 110, .2); }
.hq2-nutmap-manual-btn {
  margin-top: 6px;
  width: 100%;
  border: 1px dashed rgba(200, 169, 110, .5);
  background: transparent;
  color: #8A6A2E;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.hq2-nutmap-manual-btn:hover { background: rgba(200, 169, 110, .1); }
.hq2-nutmap-pill-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.hq2-nutmap-pill-x {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-4);
  transition: background .12s, color .12s;
}
.hq2-nutmap-pill-x:hover {
  background: rgba(179, 33, 26, .12);
  color: #B3211A;
}
.hq2-nutmap-pill-x svg { width: 11px; height: 11px; }
.hq2-nutmap-bulkbar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}
.hq2-nutmap-result-nutr {
  font-size: var(--t-11);
  color: var(--ink-3);
  margin-top: 4px;
}
.hq2-nutmap-result-nutr b {
  font-weight: 700;
  color: var(--ink);
}
.hq2-nutmap-result-nutr em {
  font-style: normal;
  color: var(--ink-4);
}
.hq2-nutmap-pill.is-unmapped {
  background: var(--surface-2);
  cursor: pointer;
  color: var(--tc-navy);
  font-weight: 700;
  transition: border-color .12s, background .12s;
}
.hq2-nutmap-pill.is-unmapped:hover {
  border-color: var(--tc-navy);
  background: var(--surface);
}
.hq2-nutmap-pill-val {
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--ink);
}
.hq2-nutmap-pill.is-mapped .hq2-nutmap-pill-val { color: #2A5E3A; }
.hq2-nutmap-pill-sub {
  font-size: var(--t-11);
  color: var(--ink-4);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Search modal (USDA / Edamam picker) */
.hq2-nutmap-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .52);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.hq2-nutmap-modal {
  background: var(--surface);
  border-radius: 16px;
  width: 560px;
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(15, 12, 32, .28);
}
.hq2-nutmap-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--rule);
}
.hq2-nutmap-modal-head h3 {
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: 18px;
  font-weight: 800;
  color: var(--tc-navy);
  margin: 0 0 4px;
}
.hq2-nutmap-modal-sub {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.hq2-nutmap-modal-close {
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--ink-3);
  padding: 4px;
  display: flex;
}
.hq2-nutmap-modal-body {
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.hq2-nutmap-search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.hq2-nutmap-search-input { flex: 1; }
.hq2-nutmap-search-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-nutmap-result {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color .12s, background .12s;
}
.hq2-nutmap-result:hover {
  border-color: var(--tc-navy);
  background: var(--surface);
}
.hq2-nutmap-result-label {
  font-weight: 700;
  font-size: var(--t-13);
  color: var(--ink);
}
.hq2-nutmap-result-sub {
  font-size: var(--t-11);
  color: var(--ink-4);
}
.hq2-nutmap-search-loading,
.hq2-nutmap-search-empty,
.hq2-nutmap-search-error {
  padding: 24px 8px;
  text-align: center;
  font-size: var(--t-12);
  color: var(--ink-3);
}
.hq2-nutmap-search-error { color: #B3211A; }

/* ════════════════════════════════════════════════════════════════════
   FDA LABEL TAB (.hq2-nflabel-*)
   ──────────────────────────────────────────────────────────────────── */

.hq2-nflabel-cols {
  display: grid;
  /* Right column hugs the 140-wide label panel + a little breathing
     room — the SVG renders at its native 140×260 (FDA spec) and the
     preview pane lets it sit at that exact pixel size instead of
     stretching. */
  grid-template-columns: minmax(0, 1.3fr) minmax(180px, 200px);
  gap: 24px;
  margin-top: 16px;
}
.hq2-nflabel-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-nflabel-mode {
  display: inline-flex;
  background: var(--surface-2);
  border-radius: 99px;
  padding: 3px;
  align-self: flex-start;
  border: 1px solid var(--rule);
}
.hq2-nflabel-mode-btn {
  background: transparent;
  border: 0;
  padding: 6px 14px;
  border-radius: 99px;
  font-family: inherit;
  font-size: var(--t-12);
  font-weight: 700;
  color: var(--ink-3);
  cursor: pointer;
}
.hq2-nflabel-mode-btn.is-active {
  background: var(--tc-navy);
  color: #fff;
}
/* Secondary source toggle (Auto / USDA / Edamam) — same pill style as
   the primary mode toggle but smaller + tinted gold so the visual
   hierarchy reads "this is the inner control, mode is the outer". */
.hq2-nflabel-source {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.hq2-nflabel-source-lbl {
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.hq2-nflabel-mode--source .hq2-nflabel-mode-btn {
  padding: 4px 11px;
  font-size: var(--t-11);
}
.hq2-nflabel-mode--source .hq2-nflabel-mode-btn.is-active {
  background: var(--tc-gold);
  color: #1F1A0D;
}
.hq2-nflabel-sum {
  font-size: var(--t-12);
  color: var(--ink-3);
}
.hq2-nflabel-warns {
  margin: 0;
  padding: 10px 14px 10px 30px;
  background: rgba(232, 200, 122, .12);
  border: 1px solid rgba(200, 169, 110, .3);
  border-radius: 10px;
  font-size: var(--t-11);
  color: var(--ink-2);
}
.hq2-nflabel-warns li { margin-bottom: 2px; }
.hq2-nflabel-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.hq2-nflabel-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-nflabel-field--full { grid-column: 1 / -1; }
.hq2-nflabel-field span {
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
}
/* Inline hint inside a field label — "(optional · overrides recipe)"
   etc. Lighter + non-uppercase so it reads as a parenthetical aside,
   not part of the field name. */
.hq2-nflabel-hint {
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  font-style: normal;
  color: var(--ink-4);
}
.hq2-nflabel-field.is-readonly output {
  display: block;
  background: var(--surface-2);
  border: 1px dashed var(--rule);
  border-radius: 8px;
  padding: 8px 10px;
  font-family: var(--font-ui, 'Plus Jakarta Sans', sans-serif);
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--ink);
}
.hq2-nflabel-preview {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
}
.hq2-nflabel-preview-wrap {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  justify-content: center;
}
.hq2-nflabel-preview-wrap svg {
  /* The SVG declares its own intrinsic 140×260 pixel size. Leave it
     alone — no scaling — so the on-screen preview is a true 1:1
     match of the exported file. */
  display: block;
}
.hq2-nflabel-dl { width: 100%; }
/* "Send to product modal" — the headline action: pushes this label onto
   the recipe so the customer modal + Macros tab pick it up. Full-width,
   sits above the (now secondary) Download SVG button. */
.hq2-nflabel-send { width: 100%; }
.hq2-nflabel-foot {
  font-size: var(--t-11);
  color: var(--ink-4);
  text-align: center;
  line-height: 1.5;
}
/* Auto-detected allergens + dietary tags panel — read-only summary
   below the SVG download. Two stacked blocks (Contains / Dietary).
   Allergen pills get a coral-amber tint to flag them; dietary tags
   get a green tint. "No detected" empty state stays italic + muted. */
.hq2-nflabel-detected {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-nflabel-detected-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-nflabel-detected-head {
  font-size: var(--t-11);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
}
.hq2-nflabel-detected-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hq2-nflabel-pill {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: var(--t-11);
  font-weight: 700;
  background: var(--surface-2);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  white-space: nowrap;
}
.hq2-nflabel-pill.is-allergen {
  background: rgba(200, 88, 50, .08);
  color: #8A3F1F;
  border-color: rgba(200, 88, 50, .22);
}
.hq2-nflabel-pill.is-tag {
  background: rgba(63, 143, 91, .07);
  color: #2A5E3A;
  border-color: rgba(63, 143, 91, .22);
}
.hq2-nflabel-detected-empty {
  font-size: var(--t-11);
  font-style: italic;
  color: var(--ink-4);
}
.hq2-nflabel-detected-note {
  font-size: 10.5px;
  color: var(--ink-4);
  line-height: 1.5;
  margin-top: 2px;
}

/* ── Cottage food label tab ───────────────────────────────────────── */
.hq2-cfl-enable {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; background: var(--surface-2);
  border: 1px solid var(--rule); border-radius: 12px; cursor: pointer;
}
.hq2-cfl-enable.is-on { border-color: var(--tc-navy); background: var(--tc-navy-tint, rgba(27,26,107,.06)); }
.hq2-cfl-enable input { margin-top: 3px; }
.hq2-cfl-enable-txt { display: flex; flex-direction: column; gap: 2px; }
.hq2-cfl-enable-txt b { font-size: var(--t-14); color: var(--ink); }
.hq2-cfl-enable-txt em { font-style: normal; font-size: var(--t-12); color: var(--ink-4); }
.hq2-cfl-seclbl {
  font-size: var(--t-11); font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--ink-3); margin: 14px 0 2px;
}
.hq2-cfl-seclbl em { font-weight: 400; text-transform: none; letter-spacing: 0; }
.hq2-cfl-check { display: flex; align-items: center; gap: 8px; font-size: var(--t-13); color: var(--ink-3); margin-top: 10px; cursor: pointer; }
.hq2-cfl-link { background: none; border: 0; padding: 0; color: var(--tc-navy); font-family: inherit; font-size: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; }
.hq2-cfl-printlink { display: inline-flex; align-items: center; justify-content: center; gap: 8px; margin-top: 8px; text-decoration: none; }
.hq2-cfl-warn {
  background: var(--warning-bg, #fbf4dc); color: var(--warning, #8a6d10);
  border: 1px solid var(--warning, #d8b24a); border-radius: 10px;
  padding: 9px 12px; font-size: var(--t-12); font-weight: 600; margin-bottom: 10px;
}
/* the label "blueprint" preview itself */
.hq2-cfl {
  background: #FAF6EA; border: 1px solid #EAE3CF; border-radius: 18px;
  padding: 28px 30px 22px; color: #2A2A40; line-height: 1.34;
  font-family: 'Inter', Helvetica, Arial, sans-serif;
}
.hq2-cfl-grid { display: flex; gap: 16px; justify-content: space-between; align-items: flex-start; }
.hq2-cfl-main { min-width: 0; flex: 1; }
.hq2-cfl-hl { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 54px; line-height: .88; letter-spacing: -.01em; color: var(--tc-navy); word-break: break-word; min-height: 95px; display: flex; flex-direction: column; justify-content: flex-end; }
.hq2-cfl-protein { font-size: 16px; font-weight: 600; color: var(--tc-navy); margin-top: 16px; }
.hq2-cfl-serv { font-size: 12px; color: #73738C; margin-top: 2px; }
.hq2-cfl-brand { font-family: 'Young Serif', Georgia, serif; font-size: 30px; line-height: 1; color: var(--tc-navy); margin-top: 26px; }
.hq2-cfl-brand::after { content: ''; display: block; width: 84px; height: 3px; border-radius: 2px; background: var(--tc-gold); margin-top: 8px; }
.hq2-cfl-maker { font-style: italic; font-weight: 500; font-size: 14px; color: var(--tc-navy); margin-top: 12px; }
.hq2-cfl-city { font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #73738C; margin-top: 3px; }
.hq2-cfl-city i { font-weight: 400; letter-spacing: 0; font-style: italic; text-transform: none; }
.hq2-cfl-side { width: 140px; flex-shrink: 0; text-align: center; }
.hq2-cfl-slot { height: 96px; border: 1.5px dashed var(--tc-gold); border-radius: 12px; display: grid; place-items: center; font-size: 11px; color: #9a8f6f; line-height: 1.15; }
.hq2-cfl-slot.has-img { border: none; padding: 0; }
.hq2-cfl-slot.has-img img { max-width: 100%; max-height: 96px; object-fit: contain; }
.hq2-cfl-mascot { display: flex; align-items: center; gap: 12px; }
.hq2-cfl-mascot-thumb { width: 64px; height: 64px; flex-shrink: 0; border: 1.5px dashed var(--rule-strong); border-radius: 10px; display: grid; place-items: center; font-size: 10px; color: var(--ink-4); background: #fff; overflow: hidden; }
.hq2-cfl-mascot-thumb.has-img { border-style: solid; }
.hq2-cfl-mascot-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.hq2-cfl-mascot-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hq2-cfl-scan { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 15px; color: var(--tc-navy); margin: 14px 0 7px; }
.hq2-cfl-qr { width: 134px; height: 134px; }
.hq2-cfl-h { font-size: 10px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tc-navy); margin-bottom: 3px; }
.hq2-cfl-ings { font-size: 13.5px; line-height: 1.46; margin-top: 22px; }
.hq2-cfl-contains { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: var(--tc-navy); margin-top: 8px; }
.hq2-cfl-legal { font-size: 10.5px; color: #73738C; line-height: 1.42; margin-top: 10px; }
.hq2-cfl-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--tc-gold); margin-top: 16px; padding-top: 12px; }
.hq2-cfl-handle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tc-navy); flex-shrink: 0; }
.hq2-cfl-handle svg { width: 14px; height: 14px; }
.hq2-cfl-tag { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 12px; color: #a7a7bd; text-align: center; }
.hq2-cfl-site { font-size: 12px; color: #73738C; flex-shrink: 0; }

@media (max-width: 880px) {
  .hq2-nflabel-cols { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .hq2-nutmap-stats { grid-template-columns: 1fr; }
  .hq2-nutmap-head,
  .hq2-nutmap-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hq2-nutmap-head { display: none; }
  .hq2-nflabel-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   ITEM COLLECTIONS — recipes/products grouped by category
   Section header (collapsible) + inner card grid per collection.
   ════════════════════════════════════════════════════════════════════ */

.hq2-items-collection {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-items-collection-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  cursor: pointer;
  font-family: var(--font-ui);
  text-align: left;
  transition: border-color .12s ease, background .12s ease;
}
.hq2-items-collection-head:hover {
  background: var(--surface-2);
  border-color: rgba(200, 169, 110, .35);
}
.hq2-items-collection-caret {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--ink-3);
  transform: rotate(90deg);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.hq2-items-collection.is-collapsed .hq2-items-collection-caret {
  transform: rotate(0deg);
}
.hq2-items-collection-name {
  font-weight: 800;
  font-size: var(--t-15);
  letter-spacing: -.012em;
  color: #141044;
  flex: 1;
}
.hq2-items-collection-count {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--tc-gold-deep, #8E6C2E);
  background: rgba(200, 169, 110, .18);
  padding: 3px 10px;
  border-radius: 6px;
  white-space: nowrap;
}
.hq2-items-collection-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--s-3);
  padding: 0 4px 4px;
  transition: opacity .15s ease;
}
.hq2-items-collection.is-collapsed .hq2-items-collection-body {
  display: none;
}

/* ════════════════════════════════════════════════════════════════════
   TEAM HUDDLE — guided L10-style meeting runner
   ────────────────────────────────────────────────────────────────────
   The hero gets the same pastel multi-radial treatment as the onboarding
   tool (warm + glassmorphic). The runner itself is a 3-column grid:
   timeline (left) · segment surface (center) · capture bar (right).
   Timer is an SVG ring that animates as the segment elapses. Friendly
   spring entry on the segment card so each phase feels like a step.
   ════════════════════════════════════════════════════════════════════ */

.hq2-huddle-hero { /* inherits .hq2-hub-hero */ }
.hq2-huddle-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 18px 0 8px;
  flex-wrap: wrap;
}
.hq2-huddle-start-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  margin-right: 10px;
  font-size: 11px;
  transform: translateX(-2px);
}
.hq2-huddle-streak {
  flex: 1;
  min-width: 220px;
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
}
.hq2-huddle-streak-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-huddle-streak-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .08);
  font-size: 12px;
  font-weight: 600;
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}
.hq2-huddle-streak-meta {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
}

.hq2-huddle-list-wrap {
  margin-top: 28px;
}
.hq2-huddle-list-head {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-bottom: 14px;
}
.hq2-huddle-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.hq2-huddle-card {
  display: block;
  text-align: left;
  padding: 16px 18px;
  border-radius: 14px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(380px 200px at 110% -20%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .55), transparent 60%),
    #FFFCF8;
  cursor: pointer;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  color: inherit;
}
.hq2-huddle-card:hover {
  border-color: rgba(200, 169, 110, .55);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px -8px rgba(20, 16, 68, .15);
}
.hq2-huddle-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.hq2-huddle-card-date {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
}
.hq2-huddle-card-status {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 700;
}
.hq2-huddle-card-status.is-in_progress { background: #FFF1E0; color: #B86E14; }
.hq2-huddle-card-status.is-completed   { background: #E8F5EE; color: #1F7A3F; }
.hq2-huddle-card-status.is-draft       { background: rgba(15, 18, 22, .06); color: var(--ink-3, #6E7088); }
.hq2-huddle-card-title {
  font-size: 16px;
  font-weight: 700;
  color: #141044;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}
.hq2-huddle-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-3, #6E7088);
}
.hq2-huddle-card-meta span { display: inline-flex; align-items: center; gap: 4px; }

/* ── Active runner ── */
.hq2-huddle-active {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq2-huddle-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 4px;
}
.hq2-huddle-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-huddle-stage {
  flex: 1;
}
.hq2-huddle-grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 300px;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 1240px){
  .hq2-huddle-grid { grid-template-columns: 200px minmax(0, 1fr); }
  .hq2-huddle-capture { grid-column: 1 / span 2; }
}
@media (max-width: 760px){
  .hq2-huddle-grid { grid-template-columns: 1fr; }
  .hq2-huddle-capture { grid-column: auto; }
}

/* Timeline */
.hq2-huddle-timeline {
  border-radius: 16px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(380px 240px at 0% 0%, rgba(237, 230, 255, .6), transparent 60%),
    #FFFEFB;
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .12);
}
.hq2-huddle-timeline-head {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin: 4px 4px 4px;
}
.hq2-huddle-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0;
  margin: 0;
  list-style: none;
}
.hq2-huddle-tl-row {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 8px;
  border-radius: 9px;
  cursor: pointer;
  transition: background .15s ease;
}
.hq2-huddle-tl-row:hover { background: rgba(20, 16, 68, .04); }
.hq2-huddle-tl-row.is-active {
  background: linear-gradient(135deg, rgba(255, 230, 220, .6), rgba(237, 230, 255, .6));
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-huddle-tl-row.is-done { opacity: .55; }
.hq2-huddle-tl-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(20, 16, 68, .08);
  color: #141044;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hq2-huddle-tl-row.is-active .hq2-huddle-tl-dot {
  background: #141044;
  color: #fff;
  box-shadow: 0 0 0 4px rgba(20, 16, 68, .1);
}
.hq2-huddle-tl-row.is-done .hq2-huddle-tl-dot {
  background: #1F7A3F;
  color: #fff;
}
.hq2-huddle-tl-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-huddle-tl-label {
  font-size: 13px;
  font-weight: 600;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-huddle-tl-mins { font-size: 11px; color: var(--ink-3, #6E7088); }
.hq2-huddle-overall {
  margin-top: auto;
  padding: 10px 4px 2px;
}
.hq2-huddle-overall-lbl {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  margin-bottom: 6px;
}
.hq2-huddle-overall-bar {
  height: 5px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .07);
  overflow: hidden;
  position: relative;
}
.hq2-huddle-overall-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #C8A96E 0%, #8B6914 100%);
  transition: width .4s ease;
}

/* Segment center surface */
.hq2-huddle-segment {
  position: relative;
  border-radius: 18px;
  border: 1px solid rgba(20, 16, 68, .06);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .65) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .65) 0%, transparent 60%),
    radial-gradient(480px 360px at 50% 110%, rgba(220, 245, 232, .45) 0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  padding: clamp(18px, 2vw, 26px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.hq2-huddle-fade-in {
  animation: hq2-huddle-seg-in .35s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes hq2-huddle-seg-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-huddle-seg-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 700;
}
.hq2-huddle-seg-h1 {
  font-weight: 900;
  font-size: clamp(24px, 2.7vw, 32px);
  color: #141044;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 2px 0 0;
}
.hq2-huddle-seg-prompt {
  color: #3D3E5C;
  font-size: clamp(14px, 1.3vw, 16px);
  line-height: 1.55;
  margin: 0;
  max-width: 60ch;
}
.hq2-huddle-seg-tip {
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 10px;
  padding: 9px 12px;
  line-height: 1.5;
}
.hq2-huddle-seg-tip b {
  display: inline-block;
  margin-right: 6px;
  color: #8B6914;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 700;
}

/* Timer ring */
.hq2-huddle-timer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  min-width: 0;
}
.hq2-huddle-timer-row .hq2-huddle-timer-actions {
  min-width: 0;
}
.hq2-huddle-timer-row .hq2-btn {
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-huddle-timer {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.hq2-huddle-timer-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.hq2-huddle-timer-bg {
  fill: rgba(255, 255, 255, .55);
  stroke: rgba(20, 16, 68, .08);
  stroke-width: 6;
}
.hq2-huddle-timer-fg {
  fill: none;
  stroke: #141044;
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset .9s linear, stroke .3s ease;
}
.hq2-huddle-timer.is-running .hq2-huddle-timer-fg { stroke: #8B6914; }
.hq2-huddle-timer.is-low .hq2-huddle-timer-fg { stroke: #B86E14; }
.hq2-huddle-timer.is-over .hq2-huddle-timer-fg { stroke: #C0392B; }
.hq2-huddle-timer-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
}
.hq2-huddle-timer-clock {
  font-variant-numeric: tabular-nums;
  font-weight: 800;
  font-size: 19px;
  color: #141044;
  letter-spacing: -.02em;
}
.hq2-huddle-timer-sub {
  font-size: 10px;
  color: var(--ink-3, #6E7088);
  letter-spacing: .04em;
}
.hq2-huddle-timer.is-over .hq2-huddle-timer-clock { color: #C0392B; }
.hq2-huddle-timer-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Per-segment block (carried todos / issue list / cascade) */
.hq2-huddle-seg-block {
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 12px;
  padding: 12px 14px;
}
.hq2-huddle-seg-block-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-bottom: 8px;
  font-weight: 700;
}
.hq2-huddle-empty-mini {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* Todo lists in segment surface */
.hq2-huddle-todo-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-huddle-todo {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 7px 8px;
  border-radius: 8px;
  font-size: 14px;
  color: #141044;
  transition: background .15s ease, opacity .2s ease;
}
.hq2-huddle-todo:hover { background: rgba(20, 16, 68, .04); }
.hq2-huddle-todo.is-done {
  opacity: .55;
}
.hq2-huddle-todo.is-done .hq2-huddle-todo-text {
  text-decoration: line-through;
}
.hq2-huddle-todo-check {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(20, 16, 68, .25);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #1F7A3F;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.hq2-huddle-todo-check.is-static {
  border-color: transparent;
  background: transparent;
  cursor: default;
  color: var(--ink-3, #6E7088);
}
.hq2-huddle-todo.is-done .hq2-huddle-todo-check {
  background: #1F7A3F;
  color: #fff;
  border-color: #1F7A3F;
}
.hq2-huddle-todo-text { min-width: 0; word-break: break-word; }
.hq2-huddle-todo-owner {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  border-radius: 4px;
  background: rgba(200, 169, 110, .18);
  color: #8B6914;
  font-weight: 700;
}
.hq2-huddle-todo-assign {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  background: transparent;
  border: 1px dashed rgba(20, 16, 68, .15);
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  font-family: inherit;
}
.hq2-huddle-todo-assign:hover {
  border-color: rgba(20, 16, 68, .35);
  color: #141044;
}

/* Issues block */
.hq2-huddle-issue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-huddle-issue {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border-radius: 9px;
  border: 1px solid rgba(20, 16, 68, .06);
  font-size: 14px;
  color: #141044;
}
.hq2-huddle-issue-text { flex: 1; min-width: 0; word-break: break-word; }
.hq2-huddle-issue-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.hq2-btn.hq2-btn-sm {
  font-size: 11px;
  padding: 4px 9px;
  letter-spacing: 0;
  text-transform: none;
}

/* Cascade textarea */
.hq2-huddle-cascade {
  width: 100%;
  min-height: 60px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.5;
  font-family: inherit;
}

/* Notes pad */
.hq2-huddle-seg-notes {
  background: rgba(255, 255, 255, .68);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 12px;
  padding: 10px 12px;
}
.hq2-huddle-notes-lbl {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-bottom: 6px;
  font-weight: 700;
}
.hq2-huddle-notes {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  font-size: 14px;
  line-height: 1.55;
  font-family: inherit;
  background: rgba(255, 255, 255, .85);
}

/* Rate */
.hq2-huddle-rate-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-bottom: 10px;
  font-weight: 700;
}
.hq2-huddle-rate-row {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.hq2-huddle-rate-btn {
  height: 44px;
  border-radius: 9px;
  border: 1px solid rgba(20, 16, 68, .1);
  background: #fff;
  color: #141044;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: transform .12s ease, border-color .12s ease, background .12s ease, box-shadow .12s ease;
  font-family: inherit;
}
.hq2-huddle-rate-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(20, 16, 68, .35);
  box-shadow: 0 4px 10px -6px rgba(20, 16, 68, .2);
}
.hq2-huddle-rate-btn.is-low.is-active   { background: #FCEAE7; border-color: #C0392B; color: #C0392B; }
.hq2-huddle-rate-btn.is-mid.is-active   { background: #FFF1E0; border-color: #B86E14; color: #B86E14; }
.hq2-huddle-rate-btn.is-good.is-active  { background: #E8F5EE; border-color: #1F7A3F; color: #1F7A3F; }
.hq2-huddle-rate-btn.is-active {
  box-shadow: 0 4px 14px -6px rgba(20, 16, 68, .25);
  transform: translateY(-1px);
}
.hq2-huddle-rate-others {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.hq2-huddle-rate-chip {
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(20, 16, 68, .08);
  color: var(--ink-2, #3D3E5C);
}
.hq2-huddle-rate-chip b { color: #141044; margin-left: 4px; }

/* Capture bar (right column) */
.hq2-huddle-capture {
  border-radius: 16px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(380px 240px at 100% 0%, rgba(255, 230, 220, .55), transparent 60%),
    #FFFEFB;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .12);
  min-width: 0;
}
.hq2-huddle-capture-head {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-huddle-capture-tabs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px;
  padding: 3px;
  border-radius: 10px;
  background: rgba(20, 16, 68, .05);
}
.hq2-huddle-cap-tab {
  min-width: 0;
  padding: 7px 8px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: var(--ink-2, #3D3E5C);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background .15s ease, color .15s ease;
  font-family: inherit;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1;
}
.hq2-huddle-cap-tab .hq2-huddle-cap-tab-lbl {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  font-size: inherit;
  font-weight: inherit;
}
.hq2-huddle-cap-tab > span:not(.hq2-huddle-cap-tab-lbl) {
  flex-shrink: 0;
  background: rgba(20, 16, 68, .1);
  color: #141044;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 18px;
  text-align: center;
  line-height: 1.4;
}
.hq2-huddle-cap-tab.is-active {
  background: #fff;
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 10px -6px rgba(20, 16, 68, .15);
}
.hq2-huddle-cap-tab.is-active span {
  background: rgba(200, 169, 110, .25);
  color: #8B6914;
}
.hq2-huddle-capture-add {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
}
.hq2-huddle-capture-add .hq2-input {
  height: 36px;
}
.hq2-huddle-capture-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 50vh;
  overflow-y: auto;
  padding-right: 2px;
}
.hq2-huddle-cap-empty {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  text-align: center;
  padding: 18px 8px;
  font-style: italic;
}
.hq2-huddle-cap-row {
  display: grid;
  grid-template-columns: 22px 1fr auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 8px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .05);
  font-size: 13px;
  color: #141044;
  transition: opacity .2s ease;
}
.hq2-huddle-cap-row.is-done { opacity: .5; }
.hq2-huddle-cap-row.is-done .hq2-huddle-cap-text { text-decoration: line-through; }
.hq2-huddle-cap-bullet {
  width: 18px; height: 18px;
  border-radius: 5px;
  border: 1.5px solid rgba(20, 16, 68, .25);
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #1F7A3F;
  font-weight: 800;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.hq2-huddle-cap-bullet.is-static {
  border-color: rgba(20, 16, 68, .12);
  background: rgba(20, 16, 68, .04);
  cursor: default;
  color: var(--ink-3, #6E7088);
}
.hq2-huddle-cap-row.is-done .hq2-huddle-cap-bullet {
  background: #1F7A3F;
  color: #fff;
  border-color: #1F7A3F;
}
.hq2-huddle-cap-text { min-width: 0; word-break: break-word; }
.hq2-huddle-cap-owner {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(200, 169, 110, .18);
  color: #8B6914;
  font-weight: 700;
}
.hq2-huddle-cap-x {
  width: 22px; height: 22px;
  border-radius: 5px;
  border: 0;
  background: transparent;
  color: var(--ink-3, #6E7088);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.hq2-huddle-cap-x:hover { background: rgba(192, 57, 43, .08); color: #C0392B; }

/* Completed-meeting summary view */
.hq2-huddle-summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hq2-huddle-summary-head {
  border-radius: 18px;
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .65) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .65) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  border: 1px solid rgba(20, 16, 68, .06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
}
.hq2-huddle-summary-title {
  font-weight: 900;
  font-size: clamp(24px, 2.7vw, 32px);
  color: #141044;
  letter-spacing: -.025em;
  line-height: 1.05;
  margin: 4px 0;
}
.hq2-huddle-summary-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
}
.hq2-huddle-summary-cascade {
  background: linear-gradient(135deg, rgba(255, 230, 220, .65), rgba(237, 230, 255, .55));
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 18px;
}
.hq2-huddle-summary-cascade p {
  font-size: 16px;
  color: #141044;
  font-weight: 600;
  margin: 4px 0 0;
  line-height: 1.45;
}
.hq2-huddle-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
}
.hq2-huddle-summary-block {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 14px;
  padding: 14px 16px;
}
.hq2-huddle-summary-block-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-bottom: 10px;
  font-weight: 700;
}
.hq2-huddle-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-huddle-summary-list li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 13px;
  color: #141044;
  padding: 6px 0;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
}
.hq2-huddle-summary-list li:last-child { border-bottom: 0; }
.hq2-huddle-summary-list li.is-done { opacity: .55; text-decoration: line-through; }
.hq2-huddle-summary-list em {
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .1em;
  flex-shrink: 0;
}
.hq2-huddle-summary-ratings {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-huddle-summary-ratings li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: baseline;
  font-size: 13px;
  color: #141044;
}
.hq2-huddle-summary-ratings li b {
  font-size: 18px;
  font-weight: 800;
  color: #8B6914;
  font-variant-numeric: tabular-nums;
}
.hq2-huddle-summary-ratings li em {
  grid-column: 1 / -1;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.hq2-huddle-summary-notes {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 14px;
  padding: 14px 16px;
}
.hq2-huddle-summary-note {
  padding: 8px 0;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
}
.hq2-huddle-summary-note:last-child { border-bottom: 0; }
.hq2-huddle-summary-note-h {
  font-size: 12px;
  font-weight: 700;
  color: #141044;
  margin-bottom: 4px;
}
.hq2-huddle-summary-note-b {
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  white-space: pre-wrap;
  line-height: 1.55;
}
.hq2-huddle-summary-foot {
  display: flex;
  gap: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   RECIPES LIST — friendly UI rollout
   ────────────────────────────────────────────────────────────────────
   The legacy list head was a one-line bar (title + meta + new). The
   new shape is a hero card: eyebrow + h1 + tagline + meta-row, plus
   the doctor button on the right. Same pastel multi-radial as every
   other hero so the catalog feels like it belongs to mise.
   ════════════════════════════════════════════════════════════════════ */

.hq2-items-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px) clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  border-radius: 0 0 18px 18px;
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(560px 320px at -8% 100%, rgba(220, 238, 255, .55) 0%, transparent 60%),
    radial-gradient(480px 360px at 50% 50%,  rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  position: relative;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-items-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-items-hero,
  .hq2-items-hero::after { animation: none; }
}

/* ════════════════════════════════════════════════════════════════════
   CRM 1D — friendly UI rollout + new-customer modal +
   /hq2#/customers/<id> detail page
   ──────────────────────────────────────────────────────────────────── */

/* ── Rail: warm pastel column ── */
.hq2-crm-rail {
  background:
    radial-gradient(360px 220px at 0% 0%, rgba(237, 230, 255, .65) 0%, transparent 60%),
    radial-gradient(280px 200px at 0% 100%, rgba(255, 230, 220, .5) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFFEFB 100%);
  border-right-color: rgba(20, 16, 68, .07);
}
.hq2-crm-rail .rail-head {
  color: var(--ink-2, #3D3E5C);
}
.hq2-crm-rail .rail-new {
  border-color: rgba(20, 16, 68, .12);
  color: var(--ink, #141044);
  background: rgba(255, 255, 255, .85);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.hq2-crm-rail .rail-new:hover {
  border-color: rgba(200, 169, 110, .55);
  background: #fff;
  transform: translateY(-1px);
}
.hq2-crm-rail .seg-row.is-active {
  background: linear-gradient(135deg, rgba(255, 230, 220, .75), rgba(237, 230, 255, .75));
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-crm-rail .seg-row.is-active .seg-icon { color: #8B6914; }
.hq2-crm-rail .seg-row:hover {
  background: rgba(255, 255, 255, .55);
}

/* Transient cohort segment — gold accent */
.hq2-crm-rail .seg-group-transient {
  position: relative;
  margin-bottom: var(--s-3);
  padding: 6px 6px 8px;
  border-radius: 10px;
  background:
    radial-gradient(280px 160px at 100% 0%, rgba(200, 169, 110, .25), transparent 60%),
    rgba(255, 246, 240, .65);
  border: 1px solid rgba(200, 169, 110, .35);
}
.hq2-crm-rail .seg-row.is-transient {
  color: #8B6914;
}
.hq2-crm-rail .seg-row.is-transient .seg-icon { color: #8B6914; }
.hq2-crm-rail .seg-row.is-transient.is-active {
  background: linear-gradient(135deg, rgba(255, 230, 200, .9), rgba(255, 240, 220, .9));
  color: #141044;
  border: 1px solid rgba(200, 169, 110, .55);
}
.hq2-crm-rail .seg-row-clear {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 5px 10px;
  background: transparent;
  border: 1px dashed rgba(200, 169, 110, .45);
  border-radius: 6px;
  color: #8B6914;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, border-color .15s ease;
}
.hq2-crm-rail .seg-row-clear:hover {
  background: rgba(200, 169, 110, .12);
  border-color: rgba(200, 169, 110, .8);
}

/* ── Toolbar: glassy band ── */
.hq2-crm-toolbar {
  background:
    radial-gradient(540px 200px at 100% 0%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(420px 200px at 0% 100%, rgba(237, 230, 255, .55), transparent 60%),
    rgba(255, 255, 255, .85);
  border-bottom-color: rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
}
.hq2-crm-toolbar .tb-search {
  background: #fff;
  border-color: rgba(20, 16, 68, .08);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-crm-toolbar .tb-btn {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .08);
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.hq2-crm-toolbar .tb-btn:hover {
  border-color: rgba(200, 169, 110, .5);
  transform: translateY(-1px);
}

/* ── Drawer: glass backdrop + warm seam ── */
.hq2-crm-drawer {
  background:
    radial-gradient(540px 220px at 100% 0%, rgba(255, 230, 220, .35), transparent 60%),
    radial-gradient(420px 220px at 0% 100%, rgba(237, 230, 255, .35), transparent 60%),
    #FFFEFB;
  border-left: 1px solid rgba(20, 16, 68, .07);
  box-shadow: -22px 0 56px -28px rgba(20, 16, 68, .14);
}
.hq2-crm-drawer .dr-head {
  background:
    radial-gradient(540px 200px at 100% 0%, rgba(255, 230, 220, .65), transparent 60%),
    rgba(255, 255, 255, .85);
}

/* "Open as page" link in drawer actions */
.dr-act.dr-act-page {
  color: #8B6914;
  border-color: rgba(200, 169, 110, .45);
}
.dr-act.dr-act-page:hover {
  background: rgba(200, 169, 110, .1);
  border-color: rgba(200, 169, 110, .7);
}

/* ════════════════════════════════════════════════════════════════════
   New customer modal
   ════════════════════════════════════════════════════════════════════ */
.hq2-newcust {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-newcust-row { display: flex; flex-direction: column; gap: 4px; }
.hq2-newcust-row-2 {
  flex-direction: row;
  gap: 12px;
}
.hq2-newcust-row-2 .hq2-content-input { flex: 1; min-width: 0; }
.hq2-newcust-notes {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.hq2-newcust-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 9px;
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.45;
  cursor: pointer;
}
.hq2-newcust-check input {
  margin-top: 2px;
  flex-shrink: 0;
}
.hq2-newcust-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 16, 68, .07);
}
@media (max-width: 540px){
  .hq2-newcust-row-2 { flex-direction: column; }
}

/* ════════════════════════════════════════════════════════════════════
   /hq2#/customers/<id> detail page
   ════════════════════════════════════════════════════════════════════ */
.hq2-cust-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2vw, 24px);
  height: 100%;
  overflow-y: auto;
}
.hq2-cust-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hq2-cust-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Hero — pastel multi-radial like every other module hero */
.hq2-cust-hero {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 68, .07);
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(480px 360px at 50% 110%, rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-cust-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-items-hero,
  .hq2-items-hero::after { animation: none; }
}
.hq2-items-hero .hq2-items-head-l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  min-width: 0;
  flex: 1;
}
.hq2-items-hero .hq2-items-head-r {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  z-index: 1;
}
.hq2-items-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  color: #8B6914;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  text-transform: uppercase;
}
.hq2-items-eyebrow::before {
  .hq2-cust-hero,
  .hq2-cust-hero::after { animation: none; }
}
.hq2-cust-hero-id {
  display: flex;
  align-items: center;
  gap: 16px;
  z-index: 1;
}
.hq2-cust-hero-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  color: #fff;
  letter-spacing: .02em;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 18px -8px rgba(20, 16, 68, .25);
  flex-shrink: 0;
}
.hq2-cust-hero-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hq2-cust-hero-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-cust-hero-eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B6914, #F0DDB3);
}
.hq2-items-hero .hq2-items-title {
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -.03em;
  color: #141044;
  line-height: 1;
  margin: 2px 0 0;
}
.hq2-items-mission {
  color: #3D3E5C;
  font-size: clamp(14px, 1.3vw, 16px);
  max-width: 60ch;
  line-height: 1.55;
  font-weight: 500;
  margin: 4px 0 0;
}
.hq2-items-meta-row {
  margin-top: 6px;
}
.hq2-items-hero .hq2-items-meta {
  display: inline-flex;
  align-items: center;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  font-size: 12px;
  font-weight: 600;
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}

.hq2-cust-hero-name {
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.025em;
  color: #141044;
  line-height: 1;
  margin: 0;
}
.hq2-cust-hero-pills {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.stage-pill.stage-manual {
  background: rgba(200, 169, 110, .18);
  color: #8B6914;
}

/* Hero stats grid */
.hq2-cust-hero-stats {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.hq2-cust-stat {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-cust-stat b {
  font-size: 22px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-cust-stat span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-cust-stat.is-predict {
  background: linear-gradient(135deg, rgba(255, 230, 220, .55), rgba(237, 230, 255, .55));
  border-color: rgba(200, 169, 110, .25);
}
.hq2-cust-stat.is-predict b { color: #8B6914; }
@media (max-width: 1100px){
  .hq2-cust-hero-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px){
  .hq2-cust-hero-stats { grid-template-columns: repeat(2, 1fr); }
}

/* Tabs */
.hq2-cust-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(20, 16, 68, .05);
  align-self: flex-start;
  flex-wrap: wrap;
}
.hq2-cust-tab {
  padding: 7px 14px;
  border: 0;
  background: transparent;
  color: var(--ink-2, #3D3E5C);
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  letter-spacing: 0;
  transition: background .15s ease, color .15s ease;
}
.hq2-cust-tab:hover { color: #141044; }
.hq2-cust-tab.is-active {
  background: #fff;
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}

/* Collection headers — softer card look */
.hq2-items-collection-head {
  background:
    radial-gradient(380px 200px at 100% -20%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .55), transparent 60%),
    #FFFEFB;
  border-color: rgba(20, 16, 68, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -10px rgba(20, 16, 68, .12);
}
.hq2-items-collection-head:hover {
  border-color: rgba(200, 169, 110, .55);
  background:
    radial-gradient(380px 200px at 100% -20%, rgba(255, 230, 220, .8), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .8), transparent 60%),
    #FFFEFB;
}

/* Toolbar: card-like surface that matches the warm hero */
.hq2-items-toolbar {
  background: rgba(255, 255, 255, .85);
  border-bottom-color: rgba(20, 16, 68, .07);
}

/* ════════════════════════════════════════════════════════════════════
   RECIPE DOCTOR — checkout-blocker scanner UI
   ────────────────────────────────────────────────────────────────────
   Doctor button sits in the items-hero next to the "+ new recipe"
   primary. When there are issues, a red/amber count badge appears.
   The modal itself shares the friendly pastel feel; rows are color-
   coded by severity (red border for critical, amber for warning) and
   click-through to the recipe editor.
   ════════════════════════════════════════════════════════════════════ */

/* Doctor trigger button (in the recipes hero) */
.hq2-btn.hq2-btn-doctor {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .1);
  color: #141044;
  font-weight: 700;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.hq2-btn.hq2-btn-doctor:hover {
  border-color: rgba(200, 169, 110, .55);
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 8px 18px -10px rgba(20, 16, 68, .25);
}
.hq2-doctor-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8B6914;
}
.hq2-doctor-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: #DC2626;
  color: #fff;
  margin-left: 4px;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, .15);
}
.hq2-doctor-badge.is-warning {
  background: #D97706;
  box-shadow: 0 0 0 2px rgba(217, 119, 6, .18);
}
.hq2-doctor-badge[hidden] { display: none; }

/* Doctor modal body */
.hq2-doctor {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hq2-doctor-hero {
  position: relative;
  border-radius: 14px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(540px 240px at 92% -10%, rgba(255, 230, 220, .8) 0%, transparent 55%),
    radial-gradient(420px 220px at -10% 8%,  rgba(237, 230, 255, .8) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
}
.hq2-doctor-hero-eyebrow {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 700;
}
.hq2-doctor-hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.hq2-doctor-stat {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 10px;
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-doctor-stat b {
  font-size: 24px;
  font-weight: 900;
  color: #141044;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.hq2-doctor-stat span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-doctor-stat.is-critical b { color: #DC2626; }
.hq2-doctor-stat.is-critical { border-color: rgba(220, 38, 38, .25); background: rgba(252, 165, 165, .12); }
.hq2-doctor-stat.is-warning b  { color: #D97706; }
.hq2-doctor-stat.is-warning  { border-color: rgba(217, 119, 6, .25); background: rgba(253, 230, 138, .15); }
.hq2-doctor-stat.is-kitchen b { color: #0E7490; }
.hq2-doctor-stat.is-kitchen  { border-color: rgba(14, 116, 144, .25); background: rgba(103, 232, 249, .12); }
.hq2-doctor-stat.is-clean b    { color: #1F7A3F; }
.hq2-doctor-stat.is-clean    { border-color: rgba(31, 122, 63, .2); background: rgba(31, 122, 63, .06); }

.hq2-doctor-hero-tally {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hq2-doctor-tally {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .08);
  color: var(--ink-2, #3D3E5C);
}
.hq2-doctor-tally.is-critical { color: #DC2626; border-color: rgba(220, 38, 38, .25); background: rgba(252, 165, 165, .12); }
.hq2-doctor-tally.is-warning  { color: #D97706; border-color: rgba(217, 119, 6, .25); background: rgba(253, 230, 138, .15); }
.hq2-doctor-tally.is-kitchen  { color: #0E7490; border-color: rgba(14, 116, 144, .25); background: rgba(103, 232, 249, .12); }

/* Bulk AI pass bar (kitchen gaps) */
.hq2-doctor-bulkbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}
.hq2-doctor-bulknote {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}

/* Doctor list */
.hq2-doctor-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow-y: auto;
  padding-right: 4px;
}
.hq2-doctor-section-head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  margin: 8px 0 2px;
}
.hq2-doctor-section-head.is-critical { color: #DC2626; }
.hq2-doctor-section-head.is-warning  { color: #D97706; }
.hq2-doctor-section-head.is-kitchen  { color: #0E7490; }
.hq2-doctor-section-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .85), 0 0 0 4px currentColor inset;
  opacity: .85;
}
.hq2-doctor-section-sub {
  color: var(--ink-3, #6E7088);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  font-size: 11px;
}

.hq2-doctor-row {
  display: block;
  text-align: left;
  width: 100%;
  border-radius: 11px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  transition: transform .12s ease, box-shadow .15s ease;
}
.hq2-doctor-row.is-critical {
  background: rgba(252, 165, 165, .08);
  border: 1px solid #FCA5A5;
}
.hq2-doctor-row.is-warning {
  background: rgba(253, 230, 138, .12);
  border: 1px solid #FDE68A;
}
.hq2-doctor-row.is-kitchen {
  background: rgba(103, 232, 249, .08);
  border: 1px solid #A5F3FC;
}
.hq2-doctor-row:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(20, 16, 68, .2);
}
.hq2-doctor-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hq2-doctor-row-tag {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding: 2px 8px;
  border-radius: 999px;
}
.hq2-doctor-row-tag.is-critical { background: rgba(220, 38, 38, .12); color: #DC2626; }
.hq2-doctor-row-tag.is-warning  { background: rgba(217, 119, 6, .14); color: #D97706; }
.hq2-doctor-row-tag.is-kitchen  { background: rgba(14, 116, 144, .12); color: #0E7490; }
.hq2-doctor-row-name {
  font-size: 14.5px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.01em;
}
.hq2-doctor-row-id {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.hq2-doctor-row-issues {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hq2-doctor-row-issues li {
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.55;
}

/* All-clear state */
.hq2-doctor-allclear {
  text-align: center;
  padding: 50px 20px;
  border-radius: 14px;
  background:
    radial-gradient(540px 240px at 50% 30%, rgba(220, 245, 232, .6) 0%, transparent 65%),
    linear-gradient(180deg, #FBF7FF 0%, #FFFEFB 100%);
  border: 1px solid rgba(31, 122, 63, .12);
}
.hq2-doctor-allclear-glyph {
  font-size: 44px;
  margin-bottom: 8px;
  animation: hq2-friendly-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-doctor-allclear h3 {
  font-size: 18px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  margin: 4px 0;
}
.hq2-doctor-allclear p {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  margin: 0;
}

@media (max-width: 680px){
  .hq2-doctor-hero-stats { grid-template-columns: repeat(2, 1fr); }
  .hq2-items-hero { flex-direction: column; align-items: stretch; }
  .hq2-items-hero .hq2-items-head-r { justify-content: flex-start; }
}

/* Tab body panel */
.hq2-cust-tab-body {
  flex: 1;
  min-height: 0;
}
.hq2-cust-tab-panel {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 16px;
  padding: clamp(16px, 2vw, 24px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .12);
  /* The drawer-* renderers expect their own card backgrounds — give
     them a parent that isn't fighting them */
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-cust-tab-panel .dr-card {
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(20, 16, 68, .06);
}

/* ════════════════════════════════════════════════════════════════════
   Cohort heatmap — cohort label is now a button that jumps into CRM
   ════════════════════════════════════════════════════════════════════ */
.ch-cohort-jump {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-align: left;
  border-radius: 4px;
  transition: color .15s ease;
}
.ch-cohort-jump:hover { color: #8B6914; }
.ch-cohort-jump-glyph {
  font-size: 11px;
  opacity: 0;
  transform: translateX(-3px);
  transition: opacity .15s ease, transform .15s ease;
  color: #8B6914;
}
.ch-cohort-jump:hover .ch-cohort-jump-glyph {
  opacity: 1;
  transform: translateX(0);
}
.ch-legend-hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   KITCHEN MODE — weekend cook-along · /hq2#/kitchenMode
   ────────────────────────────────────────────────────────────────────
   List page: hero + "start cook session" + pre-cook briefing
   (orders aggregated by recipe, grouped into 4 stations) + past
   sessions list. Active page: progress bar, station lanes (each
   with its own warm tone), per-recipe rows with check + ±qty
   tally, notes textarea, elapsed timer in the hero.
   ════════════════════════════════════════════════════════════════════ */

.hq2-cook {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* Hero */
.hq2-cook-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(480px 360px at 50% 50%,  rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-cook-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-cook-hero,
  .hq2-cook-hero::after { animation: none; }
}
.hq2-cook-hero-l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
  z-index: 1;
}
.hq2-cook-hero-r {
  z-index: 1;
  flex-shrink: 0;
}
.hq2-cook-start-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .25);
  margin-right: 10px;
  font-size: 11px;
  transform: translateX(-2px);
}

/* Body */
.hq2-cook-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 18px;
}
@media (max-width: 920px){ .hq2-cook-body { grid-template-columns: 1fr; } }

.hq2-cook-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(20, 16, 68, .07);
}
.hq2-cook-card-head b {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-cook-card-head span {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
}

/* Briefing (left column) */
.hq2-cook-briefing,
.hq2-cook-past {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-cook-brief-station {
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.hq2-cook-brief-station.is-cold  { background: linear-gradient(180deg, rgba(220, 238, 255, .4) 0%, rgba(255, 255, 255, .65) 100%); }
.hq2-cook-brief-station.is-hot   { background: linear-gradient(180deg, rgba(255, 230, 220, .55) 0%, rgba(255, 255, 255, .65) 100%); }
.hq2-cook-brief-station.is-oven  { background: linear-gradient(180deg, rgba(253, 230, 138, .4) 0%, rgba(255, 255, 255, .65) 100%); }
.hq2-cook-brief-station.is-pack  { background: linear-gradient(180deg, rgba(220, 245, 232, .45) 0%, rgba(255, 255, 255, .65) 100%); }
.hq2-cook-brief-station-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.hq2-cook-brief-station-head b {
  font-size: 14px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.01em;
}
.hq2-cook-brief-station-head span {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
}
.hq2-cook-brief-items {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-cook-brief-item {
  display: grid;
  grid-template-columns: 44px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 8px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(20, 16, 68, .04);
  border-radius: 7px;
}
.hq2-cook-brief-qty {
  font-size: 13px;
  font-weight: 800;
  color: #8B6914;
  text-align: center;
  background: rgba(200, 169, 110, .15);
  padding: 2px 6px;
  border-radius: 5px;
  font-variant-numeric: tabular-nums;
}
.hq2-cook-brief-name {
  font-size: 13px;
  color: #141044;
  font-weight: 600;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-cook-brief-allergens {
  font-size: 10px;
  font-weight: 700;
  color: #B86E14;
  background: rgba(217, 119, 6, .12);
  padding: 2px 6px;
  border-radius: 5px;
}
.hq2-cook-empty,
.hq2-cook-empty-mini {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  text-align: center;
  padding: 14px 8px;
  font-style: italic;
}

/* Past sessions */
.hq2-cook-past-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-cook-past-card {
  display: block;
  text-align: left;
  width: 100%;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 11px;
  padding: 10px 12px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  color: inherit;
}
.hq2-cook-past-card:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  box-shadow: 0 6px 14px -8px rgba(20, 16, 68, .15);
}
.hq2-cook-past-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hq2-cook-past-date {
  font-size: 13px;
  font-weight: 700;
  color: #141044;
}
.hq2-cook-past-status {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
}
.hq2-cook-past-status.is-completed   { background: rgba(31, 122, 63, .12); color: #1F7A3F; }
.hq2-cook-past-status.is-in_progress { background: rgba(217, 119, 6, .12); color: #B86E14; }
.hq2-cook-past-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}

/* ── Active session ── */

.hq2-cook-active {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2vw, 24px);
  height: 100%;
  overflow-y: auto;
}
.hq2-cook-active-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hq2-cook-active-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hq2-cook-active-hero {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 68, .07);
  padding: clamp(20px, 3vw, 32px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-cook-active-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-cook-active-hero,
  .hq2-cook-active-hero::after { animation: none; }
}
.hq2-cook-active-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1; }
.hq2-cook-active-hero-r { z-index: 1; flex-shrink: 0; }
.hq2-cook-active-title {
  font-weight: 900;
  font-size: clamp(24px, 2.7vw, 34px);
  letter-spacing: -.025em;
  color: #141044;
  line-height: 1;
  margin: 4px 0;
}
.hq2-cook-active-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  flex-wrap: wrap;
}

.hq2-cook-timer-wrap {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-cook-timer {
  font-size: 30px;
  font-weight: 900;
  color: #8B6914;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.hq2-cook-timer-lbl {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}

@media (max-width: 720px){
  .hq2-cook-active-hero { flex-direction: column; align-items: flex-start; }
}

/* Progress bar */
.hq2-cook-progress {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-cook-progress-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}
.hq2-cook-progress-head span {
  font-size: 12px;
  color: var(--ink-2, #3D3E5C);
}
.hq2-cook-progress-head b {
  font-size: 18px;
  font-weight: 900;
  color: #8B6914;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.hq2-cook-progress-bar {
  height: 8px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .07);
  overflow: hidden;
}
.hq2-cook-progress-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8B6914 0%, #C8A96E 100%);
  transition: width .4s ease;
}

/* Stations */
.hq2-cook-stations {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq2-cook-station {
  border-radius: 16px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(380px 220px at 100% -20%, rgba(255, 255, 255, .55), transparent 65%),
    #FFFEFB;
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-cook-station.is-cold {
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(220, 238, 255, .65), transparent 65%),
    #FFFEFB;
  border-color: rgba(46, 117, 200, .18);
}
.hq2-cook-station.is-hot {
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(255, 230, 220, .65), transparent 65%),
    #FFFEFB;
  border-color: rgba(217, 119, 6, .18);
}
.hq2-cook-station.is-oven {
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(253, 230, 138, .55), transparent 65%),
    #FFFEFB;
  border-color: rgba(200, 169, 110, .3);
}
.hq2-cook-station.is-pack {
  background:
    radial-gradient(420px 240px at 0% 0%, rgba(220, 245, 232, .55), transparent 65%),
    #FFFEFB;
  border-color: rgba(31, 122, 63, .18);
}
.hq2-cook-station-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20, 16, 68, .06);
  flex-wrap: wrap;
}
.hq2-cook-station-id b {
  display: block;
  font-size: 16px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.015em;
}
.hq2-cook-station-id span {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
}
.hq2-cook-station-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.hq2-cook-station-meta > span {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2, #3D3E5C);
  font-variant-numeric: tabular-nums;
}
.hq2-cook-station-bar {
  width: 100px;
  height: 6px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .08);
  overflow: hidden;
}
.hq2-cook-station-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8B6914, #C8A96E);
  transition: width .35s ease;
}

.hq2-cook-station-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-cook-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 11px;
  transition: opacity .2s ease;
}
.hq2-cook-row.is-done {
  opacity: .55;
  background: rgba(220, 245, 232, .35);
}
.hq2-cook-check {
  width: 26px;
  height: 26px;
  border-radius: 7px;
  border: 1.5px solid rgba(20, 16, 68, .2);
  background: #fff;
  font-size: 13px;
  font-weight: 800;
  color: #1F7A3F;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  padding: 0;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.hq2-cook-check:hover { transform: scale(1.05); border-color: rgba(31, 122, 63, .55); }
.hq2-cook-row.is-done .hq2-cook-check {
  background: #1F7A3F;
  border-color: #1F7A3F;
  color: #fff;
}
.hq2-cook-row-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hq2-cook-row-text b {
  font-size: 14px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-cook-row-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
.hq2-cook-row-meta em {
  font-style: normal;
  background: rgba(20, 16, 68, .05);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
}
.hq2-cook-row-meta em.is-warn {
  background: rgba(217, 119, 6, .12);
  color: #B86E14;
  font-weight: 700;
}
.hq2-cook-row-link {
  color: #8B6914;
  text-decoration: none;
  font-weight: 600;
}
.hq2-cook-row-link:hover { text-decoration: underline; }

.hq2-cook-row-tally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(20, 16, 68, .05);
  padding: 3px;
  border-radius: 9px;
}
.hq2-cook-tally-btn {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  border: 0;
  background: transparent;
  color: #141044;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease;
}
.hq2-cook-tally-btn:hover:not(:disabled) { background: #fff; }
.hq2-cook-tally-btn:disabled { opacity: .35; cursor: not-allowed; }
.hq2-cook-tally-val {
  min-width: 56px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: #141044;
  font-variant-numeric: tabular-nums;
  padding: 0 4px;
}

@media (max-width: 540px){
  .hq2-cook-row { grid-template-columns: 28px 1fr; }
  .hq2-cook-row-tally { grid-column: 1 / -1; justify-self: end; }
}

/* Notes card */
.hq2-cook-notes-card {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-cook-notes {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
}

/* Cook session · lot codes used (traceability layer) */
.hq2-cook-lots {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-cook-lots-meta {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hq2-cook-lots-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hq2-cook-lots-input-row .hq2-input { flex: 1; min-width: 220px; }
.hq2-cook-lots-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hq2-cook-lot-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px 4px 10px;
  background: #F4F8FE;
  border: 1px solid rgba(27, 93, 176, .15);
  border-radius: 999px;
  font-size: 12px;
}
.hq2-cook-lot-code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  color: #1B5DB0;
  text-decoration: none;
  font-weight: 600;
}
.hq2-cook-lot-code:hover { text-decoration: underline; }
.hq2-cook-lot-meta {
  color: var(--ink-3, #6E7088);
  font-size: 11.5px;
}
.hq2-cook-lot-x {
  border: none;
  background: rgba(0,0,0,.05);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-3, #6E7088);
}
.hq2-cook-lot-x:hover { background: rgba(180, 30, 30, .1); color: #B41E1E; }
.hq2-cook-lots-empty {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   ORDERS — daily ops board · /hq2#/orders
   ────────────────────────────────────────────────────────────────────
   Full-bleed list with pastel hero + KPI strip on the right, a
   filter toolbar, and a kanban (default) or table view. Detail
   page mirrors the customer-detail hero shape: warm gradient hero,
   status flow track, two-column main with items on the left and
   fulfillment / customer / notes cards on the right.
   ════════════════════════════════════════════════════════════════════ */

.hq2-orders {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

/* Hero — same multi-radial as every other module */
.hq2-orders-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px) clamp(18px, 2.4vw, 26px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(560px 320px at -8% 100%, rgba(220, 238, 255, .55) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-orders-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-orders-hero,
  .hq2-orders-hero::after { animation: none; }
}
.hq2-orders-hero-l {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  flex: 1;
  z-index: 1;
}
.hq2-orders-hero-r {
  z-index: 1;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

/* KPI strip — 5 mini cards on the hero right */
.hq2-orders-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(76px, 1fr));
  gap: 8px;
}
.hq2-orders-kpi {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 11px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  min-width: 0;
}
.hq2-orders-kpi b {
  font-size: 18px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-orders-kpi span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-orders-kpi.is-late { background: rgba(252, 165, 165, .12); border-color: rgba(220, 38, 38, .25); }
.hq2-orders-kpi.is-late b { color: #DC2626; }
.hq2-orders-kpi.is-rev { background: linear-gradient(135deg, rgba(255, 230, 220, .65), rgba(237, 230, 255, .65)); border-color: rgba(200, 169, 110, .3); }
.hq2-orders-kpi.is-rev b { color: #8B6914; }

@media (max-width: 980px){
  .hq2-orders-hero { flex-direction: column; align-items: stretch; }
  .hq2-orders-kpis { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 600px){
  .hq2-orders-kpis { grid-template-columns: repeat(3, 1fr); }
}

/* Toolbar */
.hq2-orders-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  flex-wrap: wrap;
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
}
.hq2-orders-tb-l, .hq2-orders-tb-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.hq2-orders-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 9px;
  color: var(--ink-3, #6E7088);
  min-width: 240px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-orders-search .hq2-input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 13px;
  min-width: 0;
}
.hq2-orders-search .hq2-input:focus { outline: 0; }

.hq2-orders-pillrow {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 3px;
  background: rgba(20, 16, 68, .05);
  border-radius: 10px;
}
.hq2-orders-pill {
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--ink-2, #3D3E5C);
  padding: 6px 11px;
  border-radius: 7px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.hq2-orders-pill:hover { color: #141044; }
.hq2-orders-pill.is-active {
  background: #fff;
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 10px -6px rgba(20, 16, 68, .15);
}
.hq2-orders-pillrow.is-status .hq2-orders-pill.is-active {
  background: linear-gradient(135deg, rgba(255, 230, 220, .9), rgba(237, 230, 255, .9));
}
.hq2-orders-pillrow.is-fulfillment .hq2-orders-pill.is-active {
  background: linear-gradient(135deg, rgba(220, 240, 255, .9), rgba(230, 247, 235, .9));
}

.hq2-orders-view-toggle {
  display: inline-flex;
  align-items: center;
  background: rgba(20, 16, 68, .05);
  border-radius: 9px;
  padding: 3px;
}
.hq2-orders-view-btn {
  width: 30px;
  height: 28px;
  border: 0;
  background: transparent;
  color: var(--ink-3, #6E7088);
  font-size: 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
}
.hq2-orders-view-btn.is-active {
  background: #fff;
  color: #141044;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 10px -6px rgba(20, 16, 68, .15);
}

/* Body */
.hq2-orders-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 20px) clamp(20px, 3vw, 36px);
}
.hq2-orders-loading,
.hq2-orders-empty {
  text-align: center;
  padding: 50px 20px;
  color: var(--ink-3, #6E7088);
  font-size: 14px;
}
.hq2-orders-empty {
  background: linear-gradient(180deg, rgba(255, 246, 240, .7), rgba(251, 247, 255, .4));
  border: 1px dashed rgba(20, 16, 68, .08);
  border-radius: 18px;
}
.hq2-orders-empty h3 {
  font-size: 17px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.02em;
  margin: 0 0 6px;
}
.hq2-orders-empty p { margin: 0; font-size: 13px; }

/* Lanes (kanban) */
.hq2-orders-lanes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 1100px){ .hq2-orders-lanes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px){  .hq2-orders-lanes { grid-template-columns: 1fr; } }
.hq2-orders-lane {
  background:
    radial-gradient(380px 240px at 0% 0%, rgba(237, 230, 255, .55), transparent 60%),
    #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 16px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 240px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-orders-lane[data-lane="ready"]     { background: radial-gradient(380px 240px at 0% 0%, rgba(255, 230, 200, .65), transparent 60%), #FFFEFB; }
.hq2-orders-lane[data-lane="transit"]   { background: radial-gradient(380px 240px at 0% 0%, rgba(220, 238, 255, .65), transparent 60%), #FFFEFB; }
.hq2-orders-lane[data-lane="delivered"] { background: radial-gradient(380px 240px at 0% 0%, rgba(220, 245, 232, .65), transparent 60%), #FFFEFB; }
.hq2-orders-lane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 6px 8px;
  border-bottom: 1px solid rgba(20, 16, 68, .07);
}
.hq2-orders-lane-head b {
  font-size: 13px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-orders-lane-head span {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  background: rgba(255, 255, 255, .9);
  padding: 2px 8px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}
.hq2-orders-lane-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-orders-lane-empty {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  text-align: center;
  padding: 14px 8px;
  font-style: italic;
}
.hq2-orders-card {
  display: block;
  text-align: left;
  width: 100%;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 10px;
  padding: 9px 11px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  color: inherit;
}
.hq2-orders-card:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  box-shadow: 0 6px 14px -8px rgba(20, 16, 68, .15);
}
.hq2-orders-card.is-overdue {
  border-color: rgba(220, 38, 38, .35);
  background: rgba(252, 165, 165, .1);
}
.hq2-orders-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}
.hq2-orders-card-customer {
  font-size: 13px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.hq2-orders-card-total {
  font-size: 12px;
  font-weight: 700;
  color: #8B6914;
}
.hq2-orders-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
.hq2-orders-card.is-overdue .hq2-orders-card-due { color: #DC2626; font-weight: 700; }
/* line-item preview ("2× harissa chicken · 1× lamb bowl · +1 more") */
.hq2-orders-card-items {
  margin-top: 6px;
  font-size: 11.5px;
  color: var(--ink-2, #3D3E5C);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* delivery destination + driver line */
.hq2-orders-card-where {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #245C9A;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* one-tap advance button on the card */
.hq2-orders-card-adv {
  margin-top: 8px;
  width: 100%;
  border: 1px solid rgba(200, 169, 110, .5);
  background: rgba(200, 169, 110, .12);
  color: #8B6914;
  border-radius: 8px;
  padding: 5px 8px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease;
}
.hq2-orders-card-adv:hover { background: rgba(200, 169, 110, .28); border-color: rgba(200, 169, 110, .8); }
.hq2-orders-card-adv:disabled { opacity: .45; cursor: default; }
/* live count badge inside the status filter pills */
.hq2-orders-pill-n {
  display: inline-block;
  margin-left: 5px;
  min-width: 16px;
  padding: 1px 5px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .08);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hq2-orders-pill-n:empty { display: none; }
.hq2-orders-pill.is-active .hq2-orders-pill-n { background: rgba(255, 255, 255, .4); }
/* the standalone hide-test toggle (lives outside a pillrow) */
.hq2-orders-pill.is-hidetest {
  border: 1px dashed rgba(20, 16, 68, .25);
  border-radius: 999px;
}
.hq2-orders-pill.is-hidetest.is-active {
  border: 1px solid rgba(200, 169, 110, .6);
  color: #8B6914;
}

/* Table view */
.hq2-orders-table {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-orders-table-head,
.hq2-orders-table-row {
  display: grid;
  grid-template-columns: 2fr 1fr 0.7fr 0.6fr 0.7fr 1fr 0.7fr;
  gap: 12px;
  align-items: center;
  padding: 10px 14px;
}
.hq2-orders-table-head {
  background: rgba(20, 16, 68, .03);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-orders-table-row {
  border: 0;
  background: transparent;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
  transition: background .12s ease;
  width: 100%;
  font-size: 13px;
}
.hq2-orders-table-row:hover { background: rgba(255, 230, 220, .25); }
.hq2-orders-table-row.is-overdue { background: rgba(252, 165, 165, .1); }
.hq2-orders-table-row.is-overdue:hover { background: rgba(252, 165, 165, .18); }
.hq2-orders-table .ord-cell { min-width: 0; overflow: hidden; }
.hq2-orders-table .ord-cell.is-right { text-align: right; }
.hq2-orders-table .ord-cell-customer b {
  display: block;
  font-weight: 700;
  color: #141044;
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-orders-table .ord-cell-customer span {
  display: block;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-orders-table .ord-cell-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
.hq2-orders-table .ord-cell em {
  font-style: normal;
  font-size: 10px;
  color: #DC2626;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-left: 4px;
}

/* Status pill */
.ord-status-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.ord-status-pill.is-lg { font-size: 12px; padding: 5px 12px; }
.ord-status-pill.is-pending  { background: rgba(20, 16, 68, .08);   color: var(--ink-2, #3D3E5C); }
.ord-status-pill.is-paid     { background: rgba(31, 122, 63, .12);  color: #1F7A3F; }
.ord-status-pill.is-progress { background: rgba(217, 119, 6, .14);  color: #B86E14; }
.ord-status-pill.is-ready    { background: rgba(200, 169, 110, .25); color: #8B6914; }
.ord-status-pill.is-transit  { background: rgba(46, 117, 200, .15); color: #245C9A; }
.ord-status-pill.is-done     { background: rgba(31, 122, 63, .15);  color: #1F7A3F; }
.ord-status-pill.is-cancelled{ background: rgba(220, 38, 38, .12);  color: #C0392B; }

/* TEST badge — shown next to any order/ticket that is a test (testMode /
   isTestOnly). Deliberately loud (amber, dashed outline) so staff never
   confuse a practice order for a real one. Test orders are excluded from
   revenue and from cook/production quantities; this is the visual tell. */
.ord-test-pill {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: repeating-linear-gradient(45deg, rgba(217,119,6,.16), rgba(217,119,6,.16) 5px, rgba(217,119,6,.07) 5px, rgba(217,119,6,.07) 10px);
  color: #9A5B0B;
  border: 1px dashed rgba(217, 119, 6, .55);
  vertical-align: middle;
  white-space: nowrap;
}

/* Fulfillment pill — pickup vs delivery on order cards + table rows.
   Pickup keeps the warm tandoco tone; delivery picks a cool blue so
   ops can scan the lane at a glance. */
.ord-fulf-pill {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
}
.ord-fulf-pill.is-pickup   { background: rgba(200, 169, 110, .22); color: #8B6914; }
.ord-fulf-pill.is-delivery { background: rgba(46, 117, 200, .15);  color: #245C9A; }

/* ── Order detail page ── */

.hq2-order-detail {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(14px, 2vw, 24px);
  height: 100%;
  overflow-y: auto;
}
.hq2-order-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hq2-order-detail-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.hq2-order-hero {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 68, .07);
  padding: clamp(18px, 2.5vw, 28px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(480px 360px at 50% 110%, rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 18px;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-order-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-order-hero,
  .hq2-order-hero::after { animation: none; }
}
.hq2-order-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1; }
.hq2-order-hero-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  z-index: 1;
}
.hq2-order-hero-name {
  font-weight: 900;
  font-size: clamp(24px, 2.7vw, 34px);
  color: #141044;
  letter-spacing: -.025em;
  line-height: 1;
  margin: 4px 0 4px;
}
.hq2-order-hero-pills {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.hq2-order-hero-link {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  color: var(--ink-2, #3D3E5C);
  font-weight: 600;
  text-decoration: none;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(20, 16, 68, .12);
  background: rgba(255, 255, 255, .65);
  transition: border-color .15s ease, background .15s ease;
}
.hq2-order-hero-link:hover { border-color: rgba(200, 169, 110, .55); background: #fff; }

.hq2-order-stat {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
  min-width: 76px;
}
.hq2-order-stat b {
  font-size: 18px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-order-stat span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}

@media (max-width: 720px){
  .hq2-order-hero { flex-direction: column; }
}

/* Status flow */
.hq2-order-flow {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-order-flow-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
  margin-bottom: 10px;
}
.hq2-order-flow-track {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  position: relative;
}
.hq2-order-flow-step {
  border: 0;
  background: transparent;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 6px 4px;
  cursor: pointer;
  position: relative;
  color: var(--ink-3, #6E7088);
  transition: color .15s ease;
}
.hq2-order-flow-step::after {
  content: '';
  position: absolute;
  top: 16px;
  left: 50%;
  width: 100%;
  height: 2px;
  background: rgba(20, 16, 68, .08);
  z-index: 0;
}
.hq2-order-flow-step:last-child::after { display: none; }
.hq2-order-flow-step.is-reached::after { background: linear-gradient(90deg, #8B6914, #C8A96E); }
.hq2-order-flow-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(20, 16, 68, .15);
  z-index: 1;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.hq2-order-flow-step.is-reached .hq2-order-flow-dot {
  background: #8B6914;
  border-color: #8B6914;
}
.hq2-order-flow-step.is-current .hq2-order-flow-dot {
  background: linear-gradient(135deg, #8B6914, #C8A96E);
  border-color: #8B6914;
  box-shadow: 0 0 0 4px rgba(200, 169, 110, .25);
  transform: scale(1.15);
}
.hq2-order-flow-step.is-current { color: #141044; }
.hq2-order-flow-step.is-reached { color: #8B6914; }
.hq2-order-flow-lbl {
  font-size: 11px;
  font-weight: 600;
  text-align: center;
}
.hq2-order-flow-step:hover .hq2-order-flow-dot { transform: scale(1.1); border-color: rgba(200, 169, 110, .8); }

/* Order grid */
.hq2-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 14px;
}
@media (max-width: 920px){
  .hq2-order-grid { grid-template-columns: 1fr; }
}
.hq2-order-side { display: flex; flex-direction: column; gap: 14px; }

.hq2-order-card {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-order-card-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
  margin-bottom: 10px;
}
.hq2-order-empty-mini {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* Items list */
.hq2-order-items {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-order-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(20, 16, 68, .05);
  border-radius: 9px;
}
.hq2-order-item-qty {
  font-size: 13px;
  font-weight: 700;
  color: #8B6914;
  text-align: center;
  background: rgba(200, 169, 110, .12);
  padding: 2px 6px;
  border-radius: 6px;
}
.hq2-order-item-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hq2-order-item-text b {
  font-size: 13px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-order-item-text span {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
/* The customer's substitution pick ("⇄ green beans") — emphasized so
   the kitchen can't miss which swap was chosen (Jul 2026). */
.hq2-order-item-text .hq2-order-item-swap {
  color: #8B6914;
  font-weight: 700;
}
.hq2-order-item-price {
  font-size: 13px;
  font-weight: 700;
  color: #141044;
}

.hq2-order-totals {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid rgba(20, 16, 68, .07);
  font-size: 13px;
}
.hq2-order-totals > div {
  display: flex;
  justify-content: space-between;
  color: var(--ink-2, #3D3E5C);
}
.hq2-order-totals-grand {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid rgba(20, 16, 68, .07);
  color: #141044!important;
}
.hq2-order-totals-grand b { font-size: 16px; font-weight: 900; color: #8B6914; }

/* Fact list (fulfillment + customer) */
.hq2-order-fact-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
}
.hq2-order-fact-list > div {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 12px;
  align-items: baseline;
}
.hq2-order-fact-list b {
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-order-fact-list span {
  color: #141044;
  word-break: break-word;
}
.hq2-order-fact-list a {
  color: #8B6914;
  text-decoration: none;
  font-weight: 600;
}
.hq2-order-fact-list a:hover { text-decoration: underline; }

/* Notes */
.hq2-order-notes {
  width: 100%;
  min-height: 90px;
  resize: vertical;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.55;
  background: rgba(255, 255, 255, .85);
}
.hq2-order-notes-foot {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}
.hq2-order-notes-status {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
}
/* ── Automated-messages card (skip scheduled comms, Jul 2026) ──────────
   Lists the automated messages for an order and lets staff switch the
   still-to-come ones off. Locked rows (receipt, cancellation, payment
   problem) are shown rather than hidden so it's clear they exist and are
   deliberately not switchable. See functions/src/comms/commSkip.js. */
.hq2-ordcomms-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-ordcomms-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(23, 24, 42, .06);
}
.hq2-ordcomms-row:last-child { border-bottom: 0; }
.hq2-ordcomms-row b {
  font-weight: 600;
  color: var(--ink-2, #2C2D45);
}
.hq2-ordcomms-row.is-off b {
  color: var(--ink-4, #6B6B85);
  text-decoration: line-through;
}
.hq2-ordcomms-sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12px;
  color: var(--ink-3, #4D4E70);
  user-select: none;
}
.hq2-ordcomms-sw input { cursor: pointer; }
.hq2-ordcomms-locked {
  font-size: 11.5px;
  color: var(--ink-4, #6B6B85);
  white-space: nowrap;
  cursor: help;
}
.hq2-ordcomms-meta {
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--warning-bg, #FBF4DC);
  border: 1px solid rgba(184, 134, 11, .28);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2, #2C2D45);
}
.hq2-ordcomms-meta i { color: var(--ink-3, #4D4E70); }

/* ── Customer comms hold (CRM drawer + detail page) ─────────────────── */
.dr-comms-hold-body {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3, #4D4E70);
  margin-bottom: 8px;
}
.dr-comms-hold-fine {
  font-size: 11.5px;
  color: var(--ink-4, #6B6B85);
}
.dr-comms-hold-ctl {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dr-comms-hold-ctl [data-comms-days] { flex: 0 0 auto; width: auto; }
.dr-comms-hold-ctl [data-comms-note] { flex: 1 1 150px; min-width: 0; }
.dr-comms-hold.is-on {
  background: var(--warning-bg, #FBF4DC);
  border: 1px solid rgba(184, 134, 11, .3);
}
.dr-comms-hold.is-on .dr-comms-hold-body { color: var(--ink-2, #2C2D45); }
.pill.comms-hold {
  background: var(--warning-bg, #FBF4DC);
  color: #8B6914;
  border: 1px solid rgba(184, 134, 11, .35);
}

/* Customer-typed kitchen note (Jul 2026) — read-only card above the
   staff notes editor. Warm tint so it reads as the CUSTOMER's voice,
   not an internal annotation. */
.hq2-order-custnote {
  background: rgba(255, 243, 214, .55);
  border: 1px solid rgba(200, 158, 60, .35);
}
.hq2-order-custnote-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: #141044;
  font-style: italic;
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════════════════
   FRIENDLY TEAM CHAT
   Apply the warm pastel + glassmorphic feel to every chat surface
   so it matches the rest of HQ2. Soften corners, lift hover states,
   bigger empty-state moment.
   ════════════════════════════════════════════════════════════════════ */

/* Chat shell — base bg gets a faint pastel tint */
.hq2-chat {
  background:
    radial-gradient(900px 500px at 100% 0%, rgba(255, 230, 220, .35) 0%, transparent 55%),
    radial-gradient(800px 500px at 0% 100%, rgba(220, 238, 255, .25) 0%, transparent 60%),
    var(--bg);
}

/* Channel rail — cleaner header + softer surface */
.hq2-chat-rail {
  background: rgba(255, 255, 255, .68);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hq2-chat-rail .rail-head {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 10px;
  letter-spacing: .14em;
  color: #8B6914;
}
.hq2-chat-rail .rail-new {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  border-radius: 8px;
  width: 26px; height: 26px;
  font-weight: 700;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-chat-rail .rail-new:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--tc-gold);
  transform: scale(1.08);
}

/* Channel rows — pillier, softer */
.hq2-chat-row {
  border-radius: 10px;
  padding: 10px 12px;
  transition: background .15s ease, transform .12s ease;
}
.hq2-chat-row:hover {
  background: rgba(200, 169, 110, .12);
  transform: translateX(2px);
}
.hq2-chat-row.is-active {
  background: linear-gradient(180deg, rgba(200, 169, 110, .22), rgba(200, 169, 110, .12));
}
.hq2-chat-row.is-active::before {
  background: var(--tc-gold);
}

/* Channel header — pastel-tinted strip with glassmorphic feel */
.hq2-chat-head {
  background:
    radial-gradient(420px 180px at 92% 0%, rgba(255, 230, 220, .45) 0%, transparent 60%),
    radial-gradient(360px 180px at -10% 0%, rgba(237, 230, 255, .45) 0%, transparent 65%),
    rgba(255, 255, 255, .85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hq2-chat-head-id b {
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: -.012em;
  color: #141044;
}

/* Empty state — big, warm, cinematic. Replaces the small disc + tiny
   text with a centered card on a pastel canvas. */
.hq2-chat-main .hq2-chat-empty {
  margin: auto;
  text-align: center;
  padding: clamp(40px, 8vh, 80px) var(--s-5);
  max-width: 540px;
  font-family: var(--font-ui);
  background:
    radial-gradient(420px 220px at 92% 0%, rgba(255, 230, 220, .65) 0%, transparent 60%),
    radial-gradient(380px 220px at -10% 100%, rgba(237, 230, 255, .65) 0%, transparent 65%),
    rgba(255, 255, 255, .8);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 24px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 24px 60px -22px rgba(20, 16, 68, .14);
  animation: hq2-friendly-in .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-chat-main .hq2-chat-empty h3 {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -.025em;
  color: #141044;
  margin-bottom: 12px;
  line-height: 1.1;
}
.hq2-chat-main .hq2-chat-empty h3 em {
  font-style: normal;
  color: #8B6914;
}
.hq2-chat-main .hq2-chat-empty p {
  font-size: var(--t-14);
  color: #3D3E5C;
  font-weight: 500;
  line-height: 1.55;
}
@media (prefers-reduced-motion: reduce){
  .hq2-chat-main .hq2-chat-empty { animation: none; }
}

/* Message stream empty (no messages in a channel yet) */
.hq2-chat-msgs-empty {
  margin: auto;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-style: italic;
  color: var(--ink-3);
  background: linear-gradient(180deg, rgba(255, 246, 240, .7), rgba(251, 247, 255, .4));
  padding: 14px 22px;
  border-radius: 12px;
  border: 1px dashed rgba(20, 16, 68, .08);
}

/* Composer — softer corners, pastel tint when focused */
.hq2-chat-composer {
  border-top: 1px solid var(--rule);
  background: rgba(255, 255, 255, .9);
  backdrop-filter: blur(10px);
}
.hq2-chat-composer textarea {
  border-radius: 10px;
  transition: border-color .12s, box-shadow .12s;
}
.hq2-chat-composer textarea:focus {
  border-color: var(--tc-gold);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .18);
}

/* Pinned strip — already gold-tinted; warm it slightly more */
.hq2-chat-pinned {
  background: linear-gradient(180deg, rgba(200, 169, 110, .20), rgba(200, 169, 110, .06));
}

/* Linked-projects strip — same softening */
.hq2-chat-linked {
  background: linear-gradient(180deg, rgba(60, 130, 246, .10), rgba(60, 130, 246, .03));
}

/* Avatar — soft inner ring so it doesn't hard-edge against pastel */
.hq2-chat-msg-avatar {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 4px 10px -2px rgba(15, 18, 22, .12);
}

/* @mention chip — slightly softer */
.hq2-chat-mention {
  border-radius: 6px;
}

/* Typing strip — friendlier */
.hq2-chat-typing {
  font-family: var(--font-ui);
  font-style: italic;
  color: #8B6914;
  background: linear-gradient(180deg, rgba(255, 246, 240, .65), rgba(251, 247, 255, .4));
  border-top: 1px solid rgba(200, 169, 110, .25);
}
/* ════════════════════════════════════════════════════════════════════
   INGREDIENTS — pantry library · /hq2#/ingredients
   ────────────────────────────────────────────────────────────────────
   Hero with KPI strip + "+ ingredient" button. Toolbar = search +
   filter pills (all / low / out / no par). Body groups rows by
   vendor (collapsible), each row shows par bar with tone (ok / low
   / out / no-par) and inline number inputs for currentQty + par.
   ════════════════════════════════════════════════════════════════════ */

/* List view flows naturally so the giant pastel hero scrolls away
   when the user starts browsing ingredients (was a sticky waste of
   screen real estate, mirroring the recipes/products list fix). The
   body no longer needs internal scroll — page scroll handles it. */
.hq2-ing {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

.hq2-ing-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(220, 245, 232, .55) 0%, transparent 55%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-ing-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-ing-hero, .hq2-ing-hero::after { animation: none; }
}
.hq2-ing-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1; }
.hq2-ing-hero-r {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
  flex-shrink: 0;
}
.hq2-ing-hero-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
}
.hq2-ing-hero-actions .hq2-btn { white-space: nowrap; }
@media (max-width: 980px){
  .hq2-ing-hero-actions { flex-direction: row; }
}

.hq2-ing-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(70px, 1fr));
  gap: 8px;
}
.hq2-ing-kpi {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 11px;
  padding: 10px 12px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 70px;
}
.hq2-ing-kpi b {
  font-size: 18px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-ing-kpi span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-ing-kpi.is-warn b   { color: #B86E14; }
.hq2-ing-kpi.is-warn     { background: rgba(253, 230, 138, .25); border-color: rgba(217, 119, 6, .25); }
.hq2-ing-kpi.is-danger b { color: #DC2626; }
.hq2-ing-kpi.is-danger   { background: rgba(252, 165, 165, .15); border-color: rgba(220, 38, 38, .25); }

@media (max-width: 980px){
  .hq2-ing-hero { flex-direction: column; align-items: stretch; }
  .hq2-ing-hero-r { justify-content: space-between; }
}

/* Toolbar — sticks to the top of the scroll viewport while the hero
   above scrolls away, so search + filter chips stay reachable as
   the user browses long ingredient lists. z-index keeps it above
   vendor cards. Mirrors the recipes-list toolbar treatment. */
.hq2-ing-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  box-shadow: 0 4px 12px -8px rgba(20, 16, 68, .08);
  flex-wrap: wrap;
}
.hq2-ing-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 9px;
  color: var(--ink-3, #6E7088);
  flex: 1;
  max-width: 380px;
  min-width: 220px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-ing-search .hq2-input { flex: 1; border: 0; background: transparent; padding: 4px 0; font-size: 13px; }
.hq2-ing-search .hq2-input:focus { outline: 0; }

/* Body — natural-flow flex column. Page scroll (parent .hq2-page--crm
   chain) handles scrolling so the hero above can scroll out of view
   instead of permanently eating ~280px of screen real estate. */
.hq2-ing-body {
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.hq2-ing-vendor {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-ing-vendor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  text-align: left;
  background:
    radial-gradient(380px 200px at 100% -20%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .55), transparent 60%),
    #FFFEFB;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  transition: background .15s ease;
}
.hq2-ing-vendor-head:hover { background:
    radial-gradient(380px 200px at 100% -20%, rgba(255, 230, 220, .8), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .8), transparent 60%),
    #FFFEFB;
}
.hq2-ing-vendor-caret {
  width: 0; height: 0;
  border-style: solid;
  border-width: 5px 0 5px 7px;
  border-color: transparent transparent transparent var(--ink-3, #6E7088);
  transform: rotate(90deg);
  transition: transform .15s ease;
  flex-shrink: 0;
}
.hq2-ing-vendor.is-collapsed .hq2-ing-vendor-caret { transform: rotate(0deg); }
.hq2-ing-vendor.is-collapsed .hq2-ing-rows { display: none; }
.hq2-ing-vendor-name {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.01em;
}
.hq2-ing-vendor-count {
  font-size: 11px;
  font-weight: 700;
  color: #8B6914;
  background: rgba(200, 169, 110, .18);
  padding: 3px 10px;
  border-radius: 6px;
  font-variant-numeric: tabular-nums;
}

.hq2-ing-rows {
  display: flex;
  flex-direction: column;
}

.hq2-ing-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.6fr) minmax(140px, 2fr) minmax(140px, 0.8fr) 70px 36px;
  gap: 14px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
  transition: background .15s ease;
}
.hq2-ing-row:last-child { border-bottom: 0; }
.hq2-ing-row:hover { background: rgba(255, 230, 220, .15); }
.hq2-ing-row.is-out  { background: rgba(252, 165, 165, .08); }
.hq2-ing-row.is-out:hover { background: rgba(252, 165, 165, .15); }

.hq2-ing-row-name b {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-ing-row-name span {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}

.hq2-ing-row-bar {
  min-width: 0;
}
.hq2-ing-bar-track {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .07);
  overflow: hidden;
}
.hq2-ing-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  transition: width .35s ease;
}
.hq2-ing-bar-fill.is-ok    { background: linear-gradient(90deg, #1F7A3F, #4FB678); }
.hq2-ing-bar-fill.is-low   { background: linear-gradient(90deg, #B86E14, #F0B65A); }
.hq2-ing-bar-fill.is-out   { background: linear-gradient(90deg, #C0392B, #E07560); }
.hq2-ing-no-par {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
  text-align: center;
  padding: 4px 0;
}

.hq2-ing-row-qty {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.hq2-ing-qty-in,
.hq2-ing-par-in {
  width: 64px;
  height: 32px;
  padding: 4px 8px;
  font-size: 13px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(20, 16, 68, .1);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
}
.hq2-ing-qty-in:focus,
.hq2-ing-par-in:focus {
  border-color: rgba(200, 169, 110, .8);
  outline: 0;
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .15);
}
.hq2-ing-row-slash {
  font-size: 14px;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
}

.hq2-ing-row-status { display: flex; justify-content: flex-end; }
.hq2-ing-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
}
.hq2-ing-pill.is-ok     { background: rgba(31, 122, 63, .12);  color: #1F7A3F; }
.hq2-ing-pill.is-low    { background: rgba(217, 119, 6, .14);  color: #B86E14; }
.hq2-ing-pill.is-out    { background: rgba(220, 38, 38, .14);  color: #DC2626; }
.hq2-ing-pill.is-no-par { background: rgba(20, 16, 68, .07);   color: var(--ink-3, #6E7088); }

.hq2-ing-row-actions { display: flex; justify-content: flex-end; }
.hq2-ing-row-x {
  width: 28px;
  height: 28px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3, #6E7088);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
}
.hq2-ing-row-x:hover { background: rgba(192, 57, 43, .1); color: #C0392B; }

@media (max-width: 800px){
  .hq2-ing-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
  .hq2-ing-row-bar { order: 2; }
  .hq2-ing-row-qty { order: 3; justify-content: flex-start; }
  .hq2-ing-row-status { order: 4; justify-content: flex-start; }
  .hq2-ing-row-actions { position: absolute; right: 16px; top: 10px; }
  .hq2-ing-row { position: relative; }
}

/* ════════════════════════════════════════════════════════════════════
   CONCIERGE AGENT — refund triage upgrade
   ────────────────────────────────────────────────────────────────────
   Existing CS auto-reply UI gets a refund-detection badge + a
   triage panel with 4 stance presets that re-prompt the Claude
   draft with stance-specific guidance. Recent-orders mini list
   for context.
   ════════════════════════════════════════════════════════════════════ */

.hq2-agent-thread.is-refund {
  border-left: 3px solid #DC2626;
}
.hq2-agent-thread-refund {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #DC2626;
  background: rgba(220, 38, 38, .12);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: auto;
  margin-right: 6px;
}

.hq2-agent-thread-context.is-refund {
  border: 1px solid rgba(220, 38, 38, .25);
  background: rgba(252, 165, 165, .08);
}
.hq2-cnq-refund-badge {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #DC2626;
  background: rgba(220, 38, 38, .12);
  padding: 3px 9px;
  border-radius: 999px;
  margin-left: 8px;
}

.hq2-cnq-triage {
  background: linear-gradient(135deg, rgba(252, 165, 165, .08), rgba(255, 230, 220, .35));
  border: 1px solid rgba(220, 38, 38, .15);
  border-radius: 14px;
  padding: 16px;
  margin: 12px 0;
}
.hq2-cnq-triage-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: #DC2626;
  margin-bottom: 10px;
}
.hq2-cnq-triage-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
@media (max-width: 900px){ .hq2-cnq-triage-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px){ .hq2-cnq-triage-row { grid-template-columns: 1fr; } }

.hq2-btn.hq2-btn-triage {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  padding: 11px 13px;
  height: auto;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .08);
  text-align: left;
  letter-spacing: 0;
  text-transform: none;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  color: inherit;
}
.hq2-btn.hq2-btn-triage:hover {
  transform: translateY(-1px);
  border-color: rgba(220, 38, 38, .45);
  box-shadow: 0 6px 14px -8px rgba(20, 16, 68, .15);
}
.hq2-btn.hq2-btn-triage.is-active {
  background: linear-gradient(135deg, rgba(252, 165, 165, .25), rgba(255, 230, 220, .35));
  border-color: rgba(220, 38, 38, .55);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .12);
}
.hq2-btn.hq2-btn-triage b {
  font-size: 13px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-btn.hq2-btn-triage span {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-weight: 500;
}

.hq2-cnq-triage-customer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed rgba(220, 38, 38, .2);
}
.hq2-cnq-recent-head {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  margin-bottom: 6px;
}
.hq2-cnq-recent-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-cnq-recent-row {
  display: grid;
  grid-template-columns: 60px 70px 1fr 70px;
  gap: 10px;
  align-items: center;
  padding: 6px 10px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 7px;
  text-decoration: none;
  font-size: 12px;
  color: #141044;
  transition: border-color .15s ease;
}
.hq2-cnq-recent-row:hover {
  border-color: rgba(200, 169, 110, .55);
  background: #fff;
}
.hq2-cnq-recent-ago { color: var(--ink-3, #6E7088); }
.hq2-cnq-recent-total { font-weight: 700; color: #8B6914; }
.hq2-cnq-recent-status {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ink-3, #6E7088);
}
.hq2-cnq-recent-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: var(--ink-3, #6E7088);
  text-align: right;
}

/* ════════════════════════════════════════════════════════════════════
   KITCHEN AGENT — Agency layer · /hq2#/agentOps
   ────────────────────────────────────────────────────────────────────
   Reuses the .hq2-agent-hero base (already pastel multi-radial) and
   the .hq2-cook-brief-station blocks from Kitchen Mode. Adds a
   2-column grid: prep list (left) + blockers panel + briefing
   panel (right column).
   ════════════════════════════════════════════════════════════════════ */

.hq2-ka-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
  padding: 0 4px;
}
@media (max-width: 980px){ .hq2-ka-grid { grid-template-columns: 1fr; } }

.hq2-ka-panel {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-ka-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20, 16, 68, .06);
}
.hq2-ka-panel-head h3 {
  font-size: 14px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.01em;
  margin: 0;
}
.hq2-ka-panel-head .meta {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}

.hq2-ka-prep,
.hq2-ka-blockers,
.hq2-ka-brief {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-ka-prep .hq2-cook-brief-station {
  margin-bottom: 8px;
}

.hq2-ka-side {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Blockers list */
.hq2-ka-block-list { display: flex; flex-direction: column; gap: 5px; }
.hq2-ka-block-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 9px;
  text-decoration: none;
  color: #141044;
  transition: border-color .15s ease, transform .12s ease;
}
.hq2-ka-block-row:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
}
.hq2-ka-block-row.is-out { background: rgba(252, 165, 165, .1); border-color: rgba(220, 38, 38, .25); }
.hq2-ka-block-row.is-hot {
  border-left: 3px solid #DC2626;
}
.hq2-ka-block-name {
  font-size: 13px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}
.hq2-ka-block-hot {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  color: #DC2626;
  background: rgba(220, 38, 38, .12);
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 6px;
}
.hq2-ka-block-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.hq2-ka-block-qty {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-variant-numeric: tabular-nums;
}

.hq2-ka-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.hq2-agent-stat.is-warn b { color: #DC2626; }

/* ════════════════════════════════════════════════════════════════════
   BUILDER — Agency layer · /hq2#/agentBuilder
   ────────────────────────────────────────────────────────────────────
   Reuses .hq2-agent-hero. Adds a compose textarea + cards list + a
   detail editor with hero icon, autosaving fields, and a test-run
   panel that hits claudeProxy live.
   ════════════════════════════════════════════════════════════════════ */

.hq2-bld-compose {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 16px;
  padding: 16px 18px;
  margin: 18px 0 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-bld-compose-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
  margin-bottom: 10px;
}
.hq2-bld-textarea {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 14px;
  line-height: 1.55;
  background: rgba(255, 255, 255, .85);
}
.hq2-bld-compose-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.hq2-bld-compose-hint {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  flex: 1;
  min-width: 200px;
}

.hq2-bld-list-wrap { margin-top: 24px; }
.hq2-bld-list-head {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-bottom: 14px;
  font-weight: 700;
}
.hq2-bld-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.hq2-bld-empty {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
  text-align: center;
  padding: 28px 12px;
  background: linear-gradient(180deg, rgba(255, 246, 240, .6), rgba(251, 247, 255, .4));
  border: 1px dashed rgba(20, 16, 68, .08);
  border-radius: 14px;
}
.hq2-bld-card {
  display: block;
  text-align: left;
  width: 100%;
  background:
    radial-gradient(380px 200px at 110% -20%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .55), transparent 60%),
    #FFFCF8;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 16px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  color: inherit;
}
.hq2-bld-card:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  box-shadow: 0 6px 16px -8px rgba(20, 16, 68, .15);
}
.hq2-bld-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.hq2-bld-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(200, 169, 110, .25), rgba(255, 230, 220, .35));
  color: #8B6914;
  font-size: 18px;
  flex-shrink: 0;
}
.hq2-bld-card-name {
  flex: 1;
  font-size: 14px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.hq2-bld-card-status {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(20, 16, 68, .08);
  color: var(--ink-3, #6E7088);
  flex-shrink: 0;
}
.hq2-bld-card-status.is-deployed { background: rgba(31, 122, 63, .12); color: #1F7A3F; }
.hq2-bld-card-tagline {
  font-size: 12px;
  color: #8B6914;
  font-weight: 600;
  margin-bottom: 6px;
}
.hq2-bld-card-mission {
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Editor */
.hq2-bld-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hq2-bld-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hq2-bld-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hq2-bld-editor-hero {
  position: relative;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 68, .07);
  padding: clamp(20px, 3vw, 28px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-bld-editor-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-bld-editor-hero,
  .hq2-bld-editor-hero::after { animation: none; }
}
.hq2-bld-editor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(200, 169, 110, .3), rgba(255, 230, 220, .55));
  color: #8B6914;
  font-size: 38px;
  z-index: 1;
  flex-shrink: 0;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 18px -8px rgba(20, 16, 68, .15);
}
.hq2-bld-editor-id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 1;
}
.hq2-bld-editor-name {
  width: 100%;
  font-family: inherit;
  font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 900;
  letter-spacing: -.025em;
  color: #141044;
  background: transparent;
  border: 0;
  border-bottom: 2px dashed rgba(20, 16, 68, .12);
  padding: 4px 0;
  margin: 2px 0;
  outline: 0;
  transition: border-color .15s ease;
}
.hq2-bld-editor-name:focus { border-bottom-color: rgba(200, 169, 110, .8); }
.hq2-bld-editor-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hq2-bld-editor-slug {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--ink-3, #6E7088);
}

.hq2-bld-editor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.hq2-bld-editor-grid > .hq2-bld-system,
.hq2-bld-editor-grid > .hq2-order-card.hq2-bld-system { grid-column: 1 / -1; }
@media (max-width: 800px){
  .hq2-bld-editor-grid { grid-template-columns: 1fr; }
}

.hq2-bld-system-ta {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  background: rgba(20, 16, 68, .03);
}

.hq2-bld-test-actions {
  display: flex;
  justify-content: flex-end;
  margin: 8px 0;
}
.hq2-bld-test-out:empty { display: none; }
.hq2-bld-test-output {
  background: rgba(220, 245, 232, .35);
  border: 1px solid rgba(31, 122, 63, .15);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  color: #141044;
}

/* ════════════════════════════════════════════════════════════════════
   EMAIL BLASTS — focused tab · /hq2#/emailAlerts
   ────────────────────────────────────────────────────────────────────
   Pastel hero + KPI strip, a templates row (cards), then the blast
   log. Composing routes to /hq2#/marketing where the audience picker
   + Claude draft live; templates pre-fill the composer via session.
   ════════════════════════════════════════════════════════════════════ */

.hq2-eb {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.hq2-eb-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-eb-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-eb-hero, .hq2-eb-hero::after { animation: none; }
}
.hq2-eb-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1; }
.hq2-eb-hero-r {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
  flex-shrink: 0;
}
.hq2-eb-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(78px, 1fr));
  gap: 8px;
}
.hq2-eb-kpi {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 11px;
  padding: 10px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-eb-kpi b {
  font-size: 18px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-eb-kpi span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-eb-kpi.is-rev   { background: linear-gradient(135deg, rgba(255, 230, 220, .65), rgba(237, 230, 255, .65)); border-color: rgba(200, 169, 110, .3); }
.hq2-eb-kpi.is-rev b { color: #8B6914; }

@media (max-width: 980px){
  .hq2-eb-hero { flex-direction: column; align-items: stretch; }
  .hq2-eb-hero-r { justify-content: space-between; }
}

/* Templates */
.hq2-eb-templates {
  padding: 18px clamp(20px, 3vw, 36px) 0;
}
.hq2-eb-templates-head {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
  margin-bottom: 10px;
}
.hq2-eb-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 10px;
}
.hq2-eb-tpl {
  display: block;
  text-align: left;
  width: 100%;
  background:
    radial-gradient(380px 200px at 110% -20%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(360px 200px at -10% 130%, rgba(237, 230, 255, .55), transparent 60%),
    #FFFCF8;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  font-family: inherit;
  color: inherit;
}
.hq2-eb-tpl:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  box-shadow: 0 6px 14px -8px rgba(20, 16, 68, .15);
}
.hq2-eb-tpl b {
  display: block;
  font-size: 13.5px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.hq2-eb-tpl span {
  display: block;
  font-size: 12px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.5;
  margin-bottom: 6px;
}
.hq2-eb-tpl em {
  font-style: normal;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 700;
  background: rgba(200, 169, 110, .12);
  padding: 2px 7px;
  border-radius: 4px;
}

/* Toolbar */
.hq2-eb-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
}
.hq2-eb-search {
  flex: 1;
  max-width: 380px;
  min-width: 220px;
}

/* List */
.hq2-eb-body {
  flex: 1;
  overflow-y: auto;
  padding: 0 clamp(20px, 3vw, 36px) clamp(14px, 2vw, 22px);
}
.hq2-eb-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-eb-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-eb-row-l { flex: 1; min-width: 0; }
.hq2-eb-row-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.hq2-eb-status {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
}
.hq2-eb-status.is-draft   { background: rgba(20, 16, 68, .07); color: var(--ink-3, #6E7088); }
.hq2-eb-status.is-queued  { background: rgba(217, 119, 6, .14); color: #B86E14; }
.hq2-eb-status.is-sending { background: rgba(46, 117, 200, .14); color: #245C9A; }
.hq2-eb-status.is-sent    { background: rgba(31, 122, 63, .14); color: #1F7A3F; }
.hq2-eb-status.is-failed  { background: rgba(220, 38, 38, .14); color: #C0392B; }
.hq2-eb-row-date {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
.hq2-eb-row-audience {
  font-size: 11px;
  font-weight: 700;
  color: #8B6914;
  background: rgba(200, 169, 110, .14);
  padding: 2px 8px;
  border-radius: 999px;
}
.hq2-eb-row-subject {
  font-size: 14.5px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.01em;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-eb-row-snippet {
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.hq2-eb-row-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hq2-eb-row-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  background: rgba(20, 16, 68, .03);
  padding: 8px 14px;
  border-radius: 9px;
  min-width: 70px;
}
.hq2-eb-row-stat b {
  font-size: 16px;
  font-weight: 900;
  color: #141044;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  line-height: 1;
}
.hq2-eb-row-stat span {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   SITE CONTENT — /hq2#/siteContent
   ────────────────────────────────────────────────────────────────────
   Reuses .hq2-eb-* helpers (hero KPIs, status pills) for the list.
   List rows include a thumbnail when heroImage is set. Editor uses
   the .hq2-bld-editor-* shapes from Builder for autosaving fields.
   Adds a seed-status block per post showing the expected
   scripts/seed-blog-<slug>.js path.
   ════════════════════════════════════════════════════════════════════ */

.hq2-site {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.hq2-site-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 320px at 50% 110%, rgba(220, 245, 232, .55) 0%, transparent 65%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-site-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-site-hero, .hq2-site-hero::after { animation: none; }
}
.hq2-site-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1; }
.hq2-site-hero-r {
  display: flex;
  align-items: center;
  gap: 14px;
  z-index: 1;
  flex-shrink: 0;
}
.hq2-site-hero-l code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(20, 16, 68, .07);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: .92em;
}

@media (max-width: 980px){
  .hq2-site-hero { flex-direction: column; align-items: stretch; }
  .hq2-site-hero-r { justify-content: space-between; }
}

.hq2-site-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px clamp(20px, 3vw, 36px);
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
}
.hq2-site-count {
  background: rgba(20, 16, 68, .12);
  color: #141044;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

.hq2-site-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
}
.hq2-site-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-site-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
  text-align: left;
  width: 100%;
  transition: transform .12s ease, border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-site-row:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  box-shadow: 0 8px 18px -10px rgba(20, 16, 68, .15);
}
.hq2-site-row-thumb {
  width: 80px;
  height: 80px;
  flex-shrink: 0;
  border-radius: 11px;
  object-fit: cover;
  background: rgba(20, 16, 68, .05);
}
.hq2-site-row-thumb.is-empty {
  background: linear-gradient(135deg, rgba(255, 230, 220, .5), rgba(237, 230, 255, .5));
  border: 1px dashed rgba(20, 16, 68, .12);
}
.hq2-site-row-l { flex: 1; min-width: 0; }
.hq2-site-row-head {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.hq2-site-row-slug {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
  color: #8B6914;
  text-decoration: none;
  font-weight: 600;
}
.hq2-site-row-slug:hover { text-decoration: underline; }
.hq2-site-row-title {
  font-size: 16px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.012em;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-site-row-snippet {
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Editor */
.hq2-site-editor {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: clamp(14px, 2vw, 24px);
  height: 100%;
  overflow-y: auto;
}
.hq2-site-editor-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hq2-site-editor-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.hq2-site-editor-hero {
  position: relative;
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 68, .07);
  padding: clamp(18px, 2.5vw, 28px);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}

.hq2-site-seed {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.5;
}
.hq2-site-seed code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(20, 16, 68, .07);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #141044;
  align-self: flex-start;
}
.hq2-site-seed-meta {
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
}
.hq2-site-seed-meta code {
  background: transparent;
  padding: 0;
  color: #8B6914;
}

.hq2-site-editor-foot {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  text-align: right;
  padding: 4px 6px;
  min-height: 18px;
}

/* ════════════════════════════════════════════════════════════════════
   ANALYTICS — /hq2#/analytics
   ────────────────────────────────────────────────────────────────────
   Traffic + revenue funnels off Firestore. Pastel hero + range pills,
   6-stat KPI strip, conversion funnel block, daily activity chart,
   and 2 "top N" bar lists (sources · landing pages).
   ════════════════════════════════════════════════════════════════════ */

.hq2-an {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.hq2-an-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 320px at 50% 110%, rgba(220, 245, 232, .55) 0%, transparent 65%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-an-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-an-hero, .hq2-an-hero::after { animation: none; }
}
.hq2-an-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1; }
.hq2-an-hero-r { z-index: 1; flex-shrink: 0; }
.hq2-an-hero-l a { color: #8B6914; font-weight: 600; }

.hq2-an-body {
  flex: 1;
  overflow-y: auto;
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* KPIs */
.hq2-an-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}
.hq2-an-kpi {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-an-kpi b {
  font-size: 22px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-an-kpi span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-an-kpi.is-rev {
  background: linear-gradient(135deg, rgba(255, 230, 220, .55), rgba(237, 230, 255, .55));
  border-color: rgba(200, 169, 110, .25);
}
.hq2-an-kpi.is-rev b { color: #8B6914; }
@media (max-width: 1100px){ .hq2-an-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){  .hq2-an-kpis { grid-template-columns: repeat(2, 1fr); } }

/* Funnel */
.hq2-an-funnel {}
.hq2-an-funnel-bars { display: flex; flex-direction: column; gap: 12px; }
.hq2-an-funnel-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: center;
}
.hq2-an-funnel-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-an-funnel-label b {
  font-size: 14px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-an-funnel-label .tnum {
  font-size: 16px;
  font-weight: 900;
  color: #8B6914;
  font-variant-numeric: tabular-nums;
}
.hq2-an-funnel-label em {
  font-style: normal;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
}
.hq2-an-funnel-bar {
  height: 14px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .06);
  overflow: hidden;
}
.hq2-an-funnel-bar span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #8B6914 0%, #C8A96E 100%);
  border-radius: inherit;
  transition: width .4s ease;
}
@media (max-width: 720px){
  .hq2-an-funnel-row { grid-template-columns: 1fr; }
}

/* Daily activity chart */
.hq2-an-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 14px;
}
.hq2-an-grid > .hq2-order-card:first-child { grid-row: span 2; }
@media (max-width: 980px){
  .hq2-an-grid { grid-template-columns: 1fr; }
  .hq2-an-grid > .hq2-order-card:first-child { grid-row: auto; }
}

.hq2-an-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-an-chart-grid {
  display: grid;
  gap: 2px;
  height: 180px;
  align-items: end;
  padding: 4px 0;
}
.hq2-an-chart-col {
  display: flex;
  align-items: end;
  height: 100%;
  cursor: default;
}
.hq2-an-chart-bars {
  display: flex;
  align-items: end;
  width: 100%;
  height: 100%;
  gap: 1px;
}
.hq2-an-chart-bar {
  flex: 1;
  min-height: 2px;
  border-radius: 2px 2px 0 0;
  transition: background .15s ease, transform .12s ease;
}
.hq2-an-chart-bar.is-views {
  background: rgba(46, 117, 200, .55);
}
.hq2-an-chart-bar.is-orders {
  background: linear-gradient(180deg, #8B6914 0%, #C8A96E 100%);
}
.hq2-an-chart-col:hover .hq2-an-chart-bar {
  transform: scaleY(1.04);
  transform-origin: bottom;
}
.hq2-an-chart-col:hover .hq2-an-chart-bar.is-views { background: rgba(46, 117, 200, .8); }

.hq2-an-chart-legend {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 4px 0;
  border-top: 1px dashed rgba(20, 16, 68, .08);
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  flex-wrap: wrap;
}
.hq2-an-chart-legend > span { display: inline-flex; align-items: center; gap: 6px; }
.hq2-an-chart-legend .dot { width: 10px; height: 10px; border-radius: 3px; }
.hq2-an-chart-legend .dot.is-views { background: rgba(46, 117, 200, .55); }
.hq2-an-chart-legend .dot.is-orders { background: linear-gradient(180deg, #8B6914 0%, #C8A96E 100%); }
.hq2-an-chart-meta {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}

/* Top-N bar lists */
.hq2-an-bar-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-an-bar-row {
  display: grid;
  grid-template-columns: minmax(60px, 140px) 1fr 50px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.hq2-an-bar-label {
  font-size: 12px;
  font-weight: 600;
  color: #141044;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-an-bar-label-path {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: var(--ink-2, #3D3E5C);
}
.hq2-an-bar-track {
  height: 7px;
  border-radius: 999px;
  background: rgba(20, 16, 68, .06);
  overflow: hidden;
}
.hq2-an-bar-fill {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, rgba(46, 117, 200, .55), rgba(46, 117, 200, .85));
  border-radius: inherit;
  transition: width .35s ease;
}
.hq2-an-bar-fill.is-page {
  background: linear-gradient(90deg, #8B6914, #C8A96E);
}
.hq2-an-bar-val {
  font-size: 12px;
  font-weight: 700;
  color: #141044;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────────────────────────────
   GA4 verified totals strip — sits between the firestore funnel and
   the daily activity grid. Different visual weight (cool indigo tint)
   so it reads as a separate source of truth and doesn't get confused
   with the live firestore numbers above it.
   ──────────────────────────────────────────────────────────────────── */
.hq2-an-ga4 {
  background: linear-gradient(135deg, rgba(231, 233, 255, .55), rgba(245, 240, 255, .55));
  border-color: rgba(70, 60, 165, .14);
}
.hq2-an-ga4 .hq2-order-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}
.hq2-an-ga4-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hq2-an-ga4-stamp {
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.hq2-an-ga4-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 6px;
}
.hq2-an-ga4-kpis {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.hq2-an-ga4-kpi {
  background: #FFFEFB;
  border: 1px solid rgba(70, 60, 165, .12);
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
}
.hq2-an-ga4-kpi b {
  font-size: 20px;
  font-weight: 900;
  color: #2A2178;
  letter-spacing: -.02em;
  line-height: 1;
}
.hq2-an-ga4-kpi span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-an-ga4-delta {
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  margin-left: 4px;
  letter-spacing: 0;
  text-transform: none;
}
.hq2-an-ga4-delta.is-up   { color: #2D7A4A; }
.hq2-an-ga4-delta.is-down { color: #B14B3A; }
.hq2-an-ga4-sub {
  border-top: 1px dashed rgba(70, 60, 165, .14);
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-an-ga4-sub-h {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #4B3FA3;
}
.hq2-an-ga4-devs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 8px;
}
.hq2-an-ga4-dev {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 8px;
  background: #FFFEFB;
  border: 1px solid rgba(70, 60, 165, .1);
  border-radius: 10px;
  padding: 10px 12px;
  align-items: center;
}
.hq2-an-ga4-dev .lab {
  font-size: 12px;
  font-weight: 700;
  color: #2A2178;
  text-transform: capitalize;
}
.hq2-an-ga4-dev .val {
  font-size: 13px;
  font-weight: 800;
  color: #4B3FA3;
}
.hq2-an-ga4-dev .hq2-an-bar-track {
  grid-column: 1 / -1;
}
@media (max-width: 1100px){ .hq2-an-ga4-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){  .hq2-an-ga4-kpis { grid-template-columns: repeat(2, 1fr); } }

/* ════════════════════════════════════════════════════════════════════
   ITEM EDITOR (recipes + products) — friendly UI rollout
   ────────────────────────────────────────────────────────────────────
   The list page already had the pastel hero; the detail/editor was
   still on the original flat-surface look. This brings every surface
   in: glassmorphic head bar, pastel multi-radial hero with editable
   name + photo + warm publish toggles, pill-row tabs to match the
   rest of mise, and section cards with the same soft-shadow palette
   used everywhere else.

   Selectors override the legacy rules above (CSS source order wins).
   No JS changes besides a small eyebrow line in the hero.
   ════════════════════════════════════════════════════════════════════ */

/* Detail head — glassmorphic bar */
.hq2-item-detail-head {
  background:
    radial-gradient(540px 200px at 100% 0%, rgba(255, 230, 220, .55), transparent 60%),
    radial-gradient(420px 200px at 0% 100%, rgba(237, 230, 255, .55), transparent 60%),
    rgba(255, 255, 255, .85);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
}
.hq2-item-detail-saved {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
  font-style: italic;
}
.hq2-item-detail-head .hq2-btn {
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .08);
  transition: border-color .15s ease, transform .12s ease;
}
.hq2-item-detail-head .hq2-btn:hover {
  border-color: rgba(200, 169, 110, .55);
  transform: translateY(-1px);
}

.hq2-item-detail-body {
  background:
    radial-gradient(900px 480px at 100% -10%, rgba(255, 230, 220, .25) 0%, transparent 55%),
    radial-gradient(800px 460px at -10% 8%,  rgba(237, 230, 255, .25) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFFEFB 100%);
}

/* Editor inner wrap — wider, more breathing room */
.hq2-item-edit {
  max-width: 1080px;
  margin: 0 auto;
  padding: clamp(16px, 2vw, 28px) clamp(20px, 3vw, 36px);
}

/* ── HERO — pastel multi-radial card with photo + name + toggles ── */
.hq2-item-edit-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-bottom: clamp(16px, 2vw, 24px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 22px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(480px 360px at 50% 110%, rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-item-edit-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-item-edit-hero,
  .hq2-item-edit-hero::after { animation: none; }
}

/* Photo card — soften, tone with cream gradient when empty */
.hq2-item-photo {
  position: relative;
  aspect-ratio: 4/3;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(380px 240px at 0% 0%, rgba(255, 230, 220, .55), transparent 65%),
    radial-gradient(360px 220px at 100% 100%, rgba(237, 230, 255, .55), transparent 65%),
    #FFFEFB;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -14px rgba(20, 16, 68, .15);
  z-index: 1;
}
.hq2-item-photo.is-empty {
  background:
    radial-gradient(380px 240px at 0% 0%, rgba(255, 230, 220, .65), transparent 65%),
    radial-gradient(360px 220px at 100% 100%, rgba(237, 230, 255, .65), transparent 65%),
    #FFFCF7;
  border: 1.5px dashed rgba(200, 169, 110, .35);
}
.hq2-item-photo-empty {
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-item-photo-empty::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B6914, #F0DDB3);
}
.hq2-item-photo-btn {
  position: absolute; bottom: 12px; right: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .92);
  color: #141044;
  border: 1px solid rgba(20, 16, 68, .12);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 4px 12px -6px rgba(20, 16, 68, .2);
  text-transform: lowercase;
}
.hq2-item-photo-btn:hover {
  background: #fff;
  border-color: rgba(200, 169, 110, .8);
  transform: translateY(-1px);
}
.hq2-item-photo-rm {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255, 255, 255, .92);
  color: #C0392B;
  border: 1px solid rgba(192, 57, 43, .25);
  width: 30px; height: 30px;
  border-radius: 8px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease;
}
.hq2-item-photo-rm:hover { background: #C0392B; color: #fff; border-color: #C0392B; }

/* Hero text fields */
.hq2-item-edit-hero-fields {
  display: flex; flex-direction: column; gap: 10px;
  justify-content: center;
  z-index: 1;
  min-width: 0;
}
.hq2-item-edit-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 700;
  margin: 0;
}
.hq2-item-edit-eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B6914, #F0DDB3);
}
.hq2-item-edit-eyebrow-live {
  background: rgba(31, 122, 63, .15);
  color: #1F7A3F;
  padding: 1px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
}
.hq2-item-edit-name {
  font-family: var(--font-ui);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -.025em;
  color: #141044;
  background: transparent;
  border: 0;
  border-bottom: 2px dashed rgba(20, 16, 68, .12);
  padding: 4px 0;
  width: 100%;
  outline: 0;
  transition: border-color .15s ease;
}
.hq2-item-edit-name:focus {
  border-bottom-color: rgba(200, 169, 110, .8);
}
.hq2-item-edit-name::placeholder {
  color: rgba(20, 16, 68, .25);
}

/* Publish/this-week toggles — warm pills, gold/green when on */
.hq2-item-edit-quick {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 4px;
}
.hq2-item-publish {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .1);
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-item-publish:hover {
  border-color: rgba(200, 169, 110, .55);
  transform: translateY(-1px);
}
.hq2-item-publish.is-on.is-publish {
  background: linear-gradient(135deg, rgba(220, 245, 232, .9), rgba(255, 255, 255, .9));
  border-color: rgba(31, 122, 63, .35);
  color: #1F7A3F;
}
.hq2-item-publish.is-on.is-week {
  background: linear-gradient(135deg, rgba(255, 230, 200, .9), rgba(255, 240, 220, .9));
  border-color: rgba(200, 169, 110, .55);
  color: #8B6914;
}
.hq2-item-publish.is-on.is-market {
  background: linear-gradient(135deg, rgba(213, 230, 255, .9), rgba(232, 240, 255, .9));
  border-color: rgba(63, 107, 230, .45);
  color: #2548BE;
}
.hq2-item-publish input { margin: 0; cursor: pointer; }

/* ── TABS — pill-row style matching the customer detail page ── */
.hq2-item-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(20, 16, 68, .05);
  border: 0;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  overflow-x: auto;
  flex-wrap: wrap;
}
.hq2-item-tabs button {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  border: 0;
  border-bottom: 0;
  color: var(--ink-2, #3D3E5C);
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, color .15s ease;
  letter-spacing: 0;
}
.hq2-item-tabs button:hover { color: #141044; }
.hq2-item-tabs button.is-active {
  background: #fff;
  color: #141044;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
  border-bottom: 0;
}

/* ── Tab body ── */
.hq2-item-tab-body { padding: 0; }
.hq2-item-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

/* Field — softer borders, gold focus ring */
.hq2-item-field {
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-item-field span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
}
.hq2-item-field .hq2-input {
  font-family: inherit;
  font-size: 13.5px;
  padding: 9px 12px;
  border: 1px solid rgba(20, 16, 68, .1);
  border-radius: 9px;
  background: #fff;
  color: #141044;
  width: 100%;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-item-field textarea.hq2-input { line-height: 1.55; resize: vertical; min-height: 70px; }
.hq2-item-field .hq2-input:focus {
  outline: 0;
  border-color: rgba(200, 169, 110, .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 0 0 3px rgba(200, 169, 110, .15);
}
.hq2-item-field--full { grid-column: 1 / -1; margin-bottom: 14px; }

/* Derived menu-price field — packOptions drives the value. Field is
   disabled with a dimmed value + "auto · from packs" pill so staff
   sees the computed "from $X" without being able to edit it here. */
.hq2-item-field-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.hq2-item-field-pill {
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8A6A2E;
  background: rgba(200, 169, 110, .14);
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 999px;
  padding: 2px 8px;
  line-height: 1.4;
  white-space: nowrap;
}
.hq2-item-field.is-derived .hq2-input {
  background: rgba(20, 16, 68, .035);
  color: rgba(20, 16, 68, .55);
  cursor: not-allowed;
  border-style: dashed;
}
/* "Auto-populated from FDA label" — Macros-tab badge + banner. The badge
   sits next to each field label; the banner runs across the top of the
   grid. Gold tint to match the existing "auto" field pill. Fields stay
   fully editable (no is-derived treatment) — this is provenance, not a
   lock. */
.hq2-item-field-fda {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #8A6A2E;
  background: rgba(200, 169, 110, .14);
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 999px;
  padding: 1px 6px;
  margin-left: 6px;
  cursor: help;
  white-space: nowrap;
}
.hq2-item-fda-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  padding: 9px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: #6E5A2E;
  background: rgba(200, 169, 110, .12);
  border: 1px solid rgba(200, 169, 110, .32);
  border-radius: 10px;
}
.hq2-item-fda-banner strong { color: #141044; font-weight: 700; }
.hq2-item-fda-banner-ico { color: #B08A3E; font-size: 13px; }
/* Premium-anchor pill — navy on cream, distinct from the gold "auto"
   pill so staff can read at a glance whether menuPrice is driving the
   price (premium anchor) or being driven by it (auto · base price). */
.hq2-item-field-pill--premium {
  color: #FFFEFB;
  background: linear-gradient(180deg, #2A256F 0%, #1B1A6B 100%);
  border-color: rgba(20, 16, 68, .25);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset;
}
.hq2-item-field.is-premium-anchor .hq2-input {
  border-color: rgba(27, 26, 107, .45);
  background: #fff;
}
.hq2-item-field.is-premium-anchor .hq2-input:focus {
  border-color: rgba(27, 26, 107, .8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 0 0 3px rgba(27, 26, 107, .15);
}
.hq2-item-field-hint {
  font-size: 11px;
  line-height: 1.45;
  color: var(--ink-3, #6E7088);
  letter-spacing: .01em;
  text-transform: none;
  font-weight: 400;
  margin-top: 2px;
}
.hq2-item-field-hint strong {
  color: #141044;
  font-weight: 700;
}

/* Section card — warm glass surface */
.hq2-item-section {
  background:
    radial-gradient(380px 200px at 100% 0%, rgba(255, 230, 220, .35), transparent 60%),
    #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 16px clamp(16px, 2vw, 22px);
  margin-bottom: 14px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-item-section-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(20, 16, 68, .06);
}
.hq2-item-section-head h4 {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin: 0;
}
.hq2-item-section-head .meta {
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
}

/* Tag chips — gold-tinted active state */
.hq2-item-tagrow { display: flex; flex-wrap: wrap; gap: 6px; }
.hq2-item-tagchip {
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 999px;
  color: var(--ink-2, #3D3E5C);
  cursor: pointer;
  transition: all .15s ease;
  letter-spacing: 0;
  text-transform: lowercase;
}
.hq2-item-tagchip:hover {
  border-color: rgba(200, 169, 110, .55);
  transform: translateY(-1px);
}
.hq2-item-tagchip.is-on {
  background: linear-gradient(135deg, rgba(255, 230, 220, .9), rgba(237, 230, 255, .9));
  color: #141044;
  border-color: rgba(200, 169, 110, .55);
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}

/* Inline checkboxes */
.hq2-item-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: inherit;
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  cursor: pointer;
  margin-bottom: 12px;
}

/* Linked-item rows (ingredients, packaging) */
.hq2-item-linked { display: flex; flex-direction: column; gap: 6px; }
.hq2-item-linked-row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 90px 90px 128px 32px;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 9px;
  transition: border-color .15s ease;
}
.hq2-item-linked-row:hover {
  border-color: rgba(200, 169, 110, .35);
  background: #fff;
}
.hq2-item-linked-name {
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: #141044;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  letter-spacing: -.005em;
}
/* Packaging rows carry TWO extra controls (per-pack select + pack
   sizes) — five columns, not the shared four, or the fifth cell wraps
   under the row and the × lands on its own line. */
#hq2ItemLinkedPack .hq2-item-linked-row {
  grid-template-columns: minmax(0, 1.6fr) 64px 108px 92px 32px;
}
@media (max-width: 760px) {
  #hq2ItemLinkedPack .hq2-item-linked-row {
    grid-template-columns: minmax(0, 1fr) 50px 92px 74px 30px;
  }
}
.hq2-item-linked-qty,
.hq2-item-linked-unit {
  padding: 7px 10px;
  font-size: 12.5px;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  text-align: right;
}
.hq2-item-linked-qty:focus,
.hq2-item-linked-unit:focus {
  outline: 0;
  border-color: rgba(200, 169, 110, .8);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .15);
}
.hq2-item-linked-rm {
  background: transparent;
  border: 1px solid rgba(20, 16, 68, .12);
  border-radius: 7px;
  width: 32px; height: 32px;
  color: var(--ink-3, #6E7088);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.hq2-item-linked-rm:hover {
  color: #C0392B;
  border-color: rgba(192, 57, 43, .35);
  background: rgba(252, 165, 165, .12);
}

/* Section dropdown — owner tags each line dough/filling/frosting/… */
.hq2-item-linked-section {
  padding: 7px 8px;
  font-size: 12px;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 7px;
  background: #fff;
  font-family: inherit;
  color: #141044;
}
.hq2-item-linked-section:focus {
  outline: 0;
  border-color: rgba(200, 169, 110, .8);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .15);
}
.hq2-item-linked-sechint {
  font-family: inherit;
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
  margin: 0 0 12px;
}
.hq2-item-linked-group { display: flex; flex-direction: column; gap: 6px; }
.hq2-item-linked-group + .hq2-item-linked-group { margin-top: 12px; }
.hq2-item-linked-grouphead {
  font-family: inherit;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  color: var(--ink-3, #6E7088);
  padding: 2px 0 6px;
  margin-top: 2px;
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  display: flex; align-items: center; gap: 8px;
}
.hq2-item-linked-groupcount {
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  background: rgba(20, 16, 68, .04);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 10px;
  letter-spacing: 0;
}

/* Empty state */
.hq2-item-empty {
  text-align: center;
  padding: 28px 16px;
  background: linear-gradient(180deg, rgba(255, 246, 240, .6), rgba(251, 247, 255, .4));
  border: 1px dashed rgba(20, 16, 68, .08);
  border-radius: 12px;
  font-size: 12.5px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* Flag cards (allergens / dietary) — gold ring on hover, on-state */
.hq2-item-flags {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 8px;
}
.hq2-item-flag {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 11px;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .12s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-item-flag:hover {
  border-color: rgba(200, 169, 110, .55);
  transform: translateY(-1px);
}
.hq2-item-flag:has(input:checked) {
  background: linear-gradient(135deg, rgba(255, 230, 220, .55), rgba(237, 230, 255, .55));
  border-color: rgba(200, 169, 110, .65);
}
.hq2-item-flag input { margin-top: 2px; flex-shrink: 0; cursor: pointer; }
.hq2-item-flag-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-item-flag-name {
  font-weight: 700;
  font-size: 13px;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-item-flag-desc {
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
  line-height: 1.45;
}

@media (max-width: 760px) {
  .hq2-item-edit-hero { grid-template-columns: 1fr; padding: 18px; }
  .hq2-item-photo { aspect-ratio: 4/3; }
  .hq2-item-linked-row { grid-template-columns: 1fr 62px 62px 104px 30px; }
}

/* ════════════════════════════════════════════════════════════════════
   MARKETING COMMAND CENTER · /hq2#/marketing
   ────────────────────────────────────────────────────────────────────
   One hub, six tabs. Phase 1 ships overview + campaigns + local (GBP).
   Phase 2 + 3 surface as "coming soon" stubs with what's planned.
   ════════════════════════════════════════════════════════════════════ */

/* Shell hero — owns title + tabs */
.hq2-mkt-shell {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hq2-mkt-shell-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-radius: 24px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(480px 360px at 50% 110%, rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-mkt-shell-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-mkt-shell-hero,
  .hq2-mkt-shell-hero::after { animation: none; }
}
.hq2-mkt-shell-hero-l { z-index: 1; min-width: 0; }

/* Tabs (pill-row) */
.hq2-mkt-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  align-self: flex-start;
  flex-wrap: wrap;
  z-index: 1;
}
.hq2-mkt-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.hq2-mkt-tab:hover { color: #141044; }
.hq2-mkt-tab.is-active {
  background: #fff;
  color: #141044;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}

/* ════════════════════════════════════════════════════════════════════
   POLISH LAYER — friendly UI consistency + animations
   ────────────────────────────────────────────────────────────────────
   Sits at the end of the file so its overrides win without touching
   the module CSS above. Three goals:
     1. Canonical type + button + input shapes everywhere
     2. Stagger animations on list rows (cards, recipes, blasts, etc.)
     3. Tasteful hover/focus motion across the whole app

   The animations are gated by prefers-reduced-motion + only run on
   first paint (animation-fill-mode: both).
   ════════════════════════════════════════════════════════════════════ */

/* ── Canonical type scale on every hero h1 ── */
.hq2-hub-h1,
.hq2-cust-hero-name,
.hq2-order-hero-name,
.hq2-items-title,
.hq2-cook-active-title,
.hq2-bld-editor-name,
.hq2-item-edit-name {
  font-family: var(--font-ui);
  font-weight: 900;
  letter-spacing: -.035em;
  color: #141044;
  line-height: .98;
}

/* Eyebrows everywhere — gold dot prefix, same scale, always lowercase */
.hq2-hub-eyebrow,
.hq2-items-eyebrow,
.hq2-cust-hero-eyebrow,
.hq2-mkt-shell-hero .hq2-hub-eyebrow,
.hq2-orders-hero .hq2-hub-eyebrow {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8B6914;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-hub-eyebrow::before,
.hq2-items-eyebrow::before,
.hq2-cust-hero-eyebrow::before,
.hq2-mkt-shell-hero .hq2-hub-eyebrow::before,
.hq2-orders-hero .hq2-hub-eyebrow::before {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, #8B6914, #F0DDB3);
  display: inline-block;
}
.hq2-hub-eyebrow a { color: inherit; text-decoration: none; }
.hq2-hub-eyebrow a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Canonical button shape ── */
.hq2-btn {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: lowercase;
  padding: 9px 16px;
  border-radius: 10px;
  border: 1px solid rgba(20, 16, 68, .1);
  background: rgba(255, 255, 255, .9);
  color: #141044;
  cursor: pointer;
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), border-color .15s ease, box-shadow .15s ease, background .15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}
.hq2-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  background: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 6px 14px -8px rgba(20, 16, 68, .18);
}
.hq2-btn:active:not(:disabled) {
  transform: translateY(0);
}
.hq2-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.hq2-btn-primary {
  background: linear-gradient(135deg, #141044 0%, #2B2569 100%);
  color: #fff;
  border-color: #141044;
}
.hq2-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #1B1654 0%, #3B3479 100%);
  border-color: #1B1654;
  box-shadow: 0 6px 14px -6px rgba(20, 16, 68, .35);
  color: #fff;
}
.hq2-btn-lg { padding: 11px 22px; font-size: 14px; border-radius: 11px; }
.hq2-btn-sm { padding: 5px 11px; font-size: 11.5px; border-radius: 7px; }

/* ── Canonical input focus ring (gold halo) ── */
.hq2-input:focus,
input.hq2-input:focus,
textarea.hq2-input:focus,
select.hq2-input:focus {
  outline: 0;
  border-color: rgba(200, 169, 110, .8);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .15);
}

/* ── Stagger animations on list rows ── */
@keyframes hq2-stagger-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Apply stagger to common list row patterns. Use nth-child delays
   that cap at ~10 — beyond that, the rest pop in instantly. */
.hq2-orders-card,
.hq2-orders-table-row,
.hq2-huddle-card,
.hq2-bld-card,
.hq2-eb-row,
.hq2-site-row,
.hq2-cook-past-card,
.hq2-doctor-row,
.hq2-mkt-tl-row,
.hq2-mkt-quick-action,
.hq2-cnq-recent-row,
.hq2-gbp-review,
.hq2-gbp-post,
.hq2-cust-stat,
.hq2-mkt-kpi-card,
.hq2-orders-kpi,
.hq2-eb-kpi,
.hq2-an-kpi,
.hq2-ing-kpi {
  animation: hq2-stagger-in .35s cubic-bezier(.32, .72, 0, 1) both;
}
.hq2-orders-card:nth-child(1),
.hq2-orders-table-row:nth-child(1),
.hq2-huddle-card:nth-child(1),
.hq2-bld-card:nth-child(1),
.hq2-eb-row:nth-child(1),
.hq2-site-row:nth-child(1),
.hq2-cook-past-card:nth-child(1),
.hq2-doctor-row:nth-child(1),
.hq2-mkt-tl-row:nth-child(1),
.hq2-cnq-recent-row:nth-child(1),
.hq2-gbp-review:nth-child(1),
.hq2-gbp-post:nth-child(1) { animation-delay: 0ms; }
.hq2-orders-card:nth-child(2),
.hq2-orders-table-row:nth-child(2),
.hq2-huddle-card:nth-child(2),
.hq2-bld-card:nth-child(2),
.hq2-eb-row:nth-child(2),
.hq2-site-row:nth-child(2),
.hq2-cook-past-card:nth-child(2),
.hq2-doctor-row:nth-child(2),
.hq2-mkt-tl-row:nth-child(2),
.hq2-cnq-recent-row:nth-child(2),
.hq2-gbp-review:nth-child(2),
.hq2-gbp-post:nth-child(2) { animation-delay: 30ms; }
.hq2-orders-card:nth-child(3),
.hq2-orders-table-row:nth-child(3),
.hq2-huddle-card:nth-child(3),
.hq2-bld-card:nth-child(3),
.hq2-eb-row:nth-child(3),
.hq2-site-row:nth-child(3),
.hq2-cook-past-card:nth-child(3),
.hq2-doctor-row:nth-child(3),
.hq2-mkt-tl-row:nth-child(3),
.hq2-cnq-recent-row:nth-child(3),
.hq2-gbp-review:nth-child(3),
.hq2-gbp-post:nth-child(3) { animation-delay: 60ms; }
.hq2-orders-card:nth-child(4),
.hq2-orders-table-row:nth-child(4),
.hq2-huddle-card:nth-child(4),
.hq2-bld-card:nth-child(4),
.hq2-eb-row:nth-child(4),
.hq2-site-row:nth-child(4),
.hq2-cook-past-card:nth-child(4),
.hq2-doctor-row:nth-child(4),
.hq2-mkt-tl-row:nth-child(4),
.hq2-cnq-recent-row:nth-child(4),
.hq2-gbp-review:nth-child(4),
.hq2-gbp-post:nth-child(4) { animation-delay: 90ms; }
.hq2-orders-card:nth-child(5),
.hq2-orders-table-row:nth-child(5),
.hq2-huddle-card:nth-child(5),
.hq2-bld-card:nth-child(5),
.hq2-eb-row:nth-child(5),
.hq2-site-row:nth-child(5),
.hq2-cook-past-card:nth-child(5),
.hq2-doctor-row:nth-child(5),
.hq2-mkt-tl-row:nth-child(5),
.hq2-gbp-review:nth-child(5),
.hq2-gbp-post:nth-child(5) { animation-delay: 120ms; }
.hq2-orders-card:nth-child(6),
.hq2-huddle-card:nth-child(6),
.hq2-bld-card:nth-child(6),
.hq2-eb-row:nth-child(6),
.hq2-site-row:nth-child(6),
.hq2-cook-past-card:nth-child(6),
.hq2-doctor-row:nth-child(6),
.hq2-mkt-tl-row:nth-child(6),
.hq2-gbp-review:nth-child(6),
.hq2-gbp-post:nth-child(6) { animation-delay: 150ms; }
.hq2-orders-card:nth-child(7),
.hq2-huddle-card:nth-child(7),
.hq2-bld-card:nth-child(7),
.hq2-eb-row:nth-child(7),
.hq2-site-row:nth-child(7),
.hq2-doctor-row:nth-child(7),
.hq2-mkt-tl-row:nth-child(7),
.hq2-gbp-review:nth-child(7) { animation-delay: 180ms; }
.hq2-orders-card:nth-child(8),
.hq2-huddle-card:nth-child(8),
.hq2-bld-card:nth-child(8),
.hq2-eb-row:nth-child(8),
.hq2-site-row:nth-child(8),
.hq2-doctor-row:nth-child(8),
.hq2-gbp-review:nth-child(8) { animation-delay: 210ms; }

/* KPI strip stagger — left to right */
.hq2-mkt-kpi-card:nth-child(1),
.hq2-orders-kpi:nth-child(1),
.hq2-eb-kpi:nth-child(1),
.hq2-an-kpi:nth-child(1),
.hq2-ing-kpi:nth-child(1) { animation-delay: 0ms; }
.hq2-mkt-kpi-card:nth-child(2),
.hq2-orders-kpi:nth-child(2),
.hq2-eb-kpi:nth-child(2),
.hq2-an-kpi:nth-child(2),
.hq2-ing-kpi:nth-child(2) { animation-delay: 60ms; }
.hq2-mkt-kpi-card:nth-child(3),
.hq2-orders-kpi:nth-child(3),
.hq2-eb-kpi:nth-child(3),
.hq2-an-kpi:nth-child(3),
.hq2-ing-kpi:nth-child(3) { animation-delay: 120ms; }
.hq2-mkt-kpi-card:nth-child(4),
.hq2-orders-kpi:nth-child(4),
.hq2-eb-kpi:nth-child(4),
.hq2-an-kpi:nth-child(4),
.hq2-ing-kpi:nth-child(4) { animation-delay: 180ms; }
.hq2-mkt-kpi-card:nth-child(5),
.hq2-orders-kpi:nth-child(5),
.hq2-an-kpi:nth-child(5) { animation-delay: 240ms; }

/* ── Hover micro-motion on every interactive card ── */
.hq2-orders-card,
.hq2-huddle-card,
.hq2-bld-card,
.hq2-eb-row,
.hq2-site-row,
.hq2-cook-past-card,
.hq2-cust-tab-panel,
.hq2-mkt-quick-action,
.hq2-mkt-tl-row,
.hq2-cnq-recent-row,
.hq2-doctor-row {
  transition: transform .15s cubic-bezier(.34, 1.56, .64, 1), border-color .15s ease, box-shadow .15s ease, background .15s ease;
}

/* ── Tab pill canonical (unify with concierge / customer) ── */
.hq2-orders-pillrow,
.hq2-mkt-tabs,
.hq2-cust-tabs,
.hq2-item-tabs {
  background: rgba(20, 16, 68, .05);
  border-radius: 12px;
  padding: 4px;
}
.hq2-orders-pill,
.hq2-mkt-tab,
.hq2-cust-tab,
.hq2-item-tabs button,
.hq2-item-tab {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  text-transform: lowercase;
  letter-spacing: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2, #3D3E5C);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.hq2-orders-pill:hover,
.hq2-mkt-tab:hover,
.hq2-cust-tab:hover,
.hq2-item-tabs button:hover,
.hq2-item-tab:hover {
  color: #141044;
}
.hq2-orders-pill.is-active,
.hq2-mkt-tab.is-active,
.hq2-cust-tab.is-active,
.hq2-item-tabs button.is-active,
.hq2-item-tab.is-active {
  background: #fff;
  color: #141044;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}
.hq2-mkt-tab.is-soon { color: var(--ink-3, #6E7088); }
.hq2-mkt-tab-soon {
  font-size: 9px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(200, 169, 110, .18);
  color: #8B6914;
  font-weight: 800;
}

.hq2-mkt-shell-body {
  flex: 1;
}

/* ── Overview tab ── */

.hq2-mkt-overview {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.hq2-mkt-kpi-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
@media (max-width: 980px){ .hq2-mkt-kpi-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px){ .hq2-mkt-kpi-row { grid-template-columns: repeat(2, 1fr); } }
.hq2-mkt-kpi-card {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-mkt-kpi-card b {
  font-size: 22px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-mkt-kpi-card span {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-mkt-kpi-card.is-rev {
  background: linear-gradient(135deg, rgba(255, 230, 220, .55), rgba(237, 230, 255, .55));
  border-color: rgba(200, 169, 110, .25);
}
.hq2-mkt-kpi-card.is-rev b { color: #8B6914; }
.hq2-mkt-kpi-card.is-warn b { color: #B86E14; }
.hq2-mkt-kpi-card.is-warn { background: rgba(253, 230, 138, .15); border-color: rgba(217, 119, 6, .2); }

.hq2-mkt-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 980px){ .hq2-mkt-overview-grid { grid-template-columns: 1fr; } }

.hq2-mkt-overview-side {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Timeline */
.hq2-mkt-timeline-card { display: flex; flex-direction: column; }
.hq2-mkt-tl-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-mkt-tl-row {
  display: grid;
  grid-template-columns: 28px 70px 1fr 70px;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 10px;
  text-decoration: none;
  color: #141044;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.hq2-mkt-tl-row:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  background: #fff;
}
.hq2-mkt-tl-glyph {
  font-size: 16px;
  color: #8B6914;
  background: rgba(200, 169, 110, .14);
  width: 28px; height: 28px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hq2-mkt-tl-date {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--ink-3, #6E7088);
}
.hq2-mkt-tl-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-mkt-tl-status {
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 800;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(20, 16, 68, .07);
  color: var(--ink-3, #6E7088);
  text-align: center;
}
.hq2-mkt-tl-row.is-live .hq2-mkt-tl-status   { background: rgba(31, 122, 63, .12); color: #1F7A3F; }
.hq2-mkt-tl-row.is-draft .hq2-mkt-tl-status  { background: rgba(20, 16, 68, .07); color: var(--ink-3, #6E7088); }
.hq2-mkt-tl-row.is-queued .hq2-mkt-tl-status { background: rgba(217, 119, 6, .14); color: #B86E14; }

/* Quick actions */
.hq2-mkt-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-mkt-quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, .8);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s ease, transform .12s ease, background .15s ease;
}
.hq2-mkt-quick-action:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
  background: #fff;
}
.hq2-mkt-quick-action-glyph {
  width: 36px; height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(255, 230, 220, .65), rgba(237, 230, 255, .65));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #8B6914;
  flex-shrink: 0;
}
.hq2-mkt-quick-action-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-mkt-quick-action-text b {
  font-size: 13.5px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-mkt-quick-action-text em {
  font-size: 11.5px;
  font-style: normal;
  color: var(--ink-3, #6E7088);
}

.hq2-mkt-attribution { padding: 4px 0; }

/* Empty state */
.hq2-mkt-empty {
  font-size: 12.5px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
  text-align: center;
  padding: 20px 12px;
}

/* ── Local · GBP tab ── */

.hq2-gbp { display: flex; flex-direction: column; gap: 16px; }
.hq2-gbp-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 980px){ .hq2-gbp-grid { grid-template-columns: 1fr; } }

.hq2-gbp-reviews { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.hq2-gbp-review {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  transition: border-color .15s ease;
}
.hq2-gbp-review:hover { border-color: rgba(200, 169, 110, .3); }
.hq2-gbp-review.is-low { border-left: 3px solid #DC2626; }
.hq2-gbp-review.is-mid { border-left: 3px solid #B86E14; }
.hq2-gbp-review.is-good { border-left: 3px solid #1F7A3F; }
.hq2-gbp-review-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hq2-gbp-stars {
  font-size: 14px;
  letter-spacing: 1px;
  color: #C8A96E;
  font-weight: 800;
}
.hq2-gbp-stars-empty { color: rgba(20, 16, 68, .15); }
.hq2-gbp-reviewer {
  font-size: 13.5px;
  font-weight: 700;
  color: #141044;
  letter-spacing: -.005em;
}
.hq2-gbp-ago {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
}
.hq2-gbp-review-text {
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.55;
  word-break: break-word;
}
.hq2-gbp-review-text.muted { color: var(--ink-3, #6E7088); font-style: italic; }
.hq2-gbp-reply {
  background: rgba(220, 245, 232, .35);
  border: 1px solid rgba(31, 122, 63, .18);
  border-radius: 9px;
  padding: 8px 12px;
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.55;
}
.hq2-gbp-reply b {
  display: block;
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1F7A3F;
  margin-bottom: 4px;
  font-weight: 800;
}
.hq2-gbp-no-reply {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding-top: 4px;
  flex-wrap: wrap;
}
.hq2-gbp-draft {
  background: linear-gradient(135deg, rgba(255, 230, 220, .35), rgba(237, 230, 255, .25));
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-gbp-draft-label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B6914;
  font-weight: 800;
}
.hq2-gbp-draft-text {
  width: 100%;
  resize: vertical;
  font-family: inherit;
  font-size: 13px;
  line-height: 1.55;
  background: rgba(255, 255, 255, .92);
}
.hq2-gbp-draft-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hq2-gbp-draft-tools a { color: #8B6914; font-weight: 600; }

/* Posts column */
.hq2-gbp-posts { display: flex; flex-direction: column; gap: 10px; max-height: 70vh; overflow-y: auto; padding-right: 4px; }
.hq2-gbp-post {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hq2-gbp-post-img {
  width: 100%;
  height: 140px;
  object-fit: cover;
}
.hq2-gbp-post-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-gbp-post-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-gbp-post-type {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 800;
  color: #8B6914;
  background: rgba(200, 169, 110, .14);
  padding: 2px 8px;
  border-radius: 4px;
}
.hq2-gbp-post-date {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
.hq2-gbp-post-text {
  font-size: 12.5px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.55;
}

/* ── Coming-soon stub ── */

.hq2-mkt-soon {
  text-align: center;
  padding: 60px 30px;
  background:
    radial-gradient(540px 240px at 50% 30%, rgba(237, 230, 255, .55) 0%, transparent 65%),
    linear-gradient(180deg, #FBF7FF 0%, #FFFEFB 100%);
  border: 1px dashed rgba(20, 16, 68, .1);
  border-radius: 18px;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-mkt-soon-glyph {
  font-size: 38px;
  margin-bottom: 8px;
}
.hq2-mkt-soon h3 {
  font-size: 20px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  margin: 6px 0;
}
.hq2-mkt-soon p {
  font-size: 13.5px;
  color: var(--ink-2, #3D3E5C);
  max-width: 56ch;
  margin: 0 auto;
  line-height: 1.6;
}
.hq2-mkt-soon-roadmap {
  margin-top: 20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 12px;
  text-align: left;
  max-width: 60ch;
  margin: 20px auto 0;
}
.hq2-mkt-soon-roadmap p {
  font-size: 12.5px;
  margin: 0;
}
.hq2-mkt-soon-roadmap b {
  color: #8B6914;
  border-bottom: 0;
}

/* ── Reduced motion: turn off all the new animations ── */
@media (prefers-reduced-motion: reduce){
  .hq2-orders-card,
  .hq2-orders-table-row,
  .hq2-huddle-card,
  .hq2-bld-card,
  .hq2-eb-row,
  .hq2-site-row,
  .hq2-cook-past-card,
  .hq2-doctor-row,
  .hq2-mkt-tl-row,
  .hq2-mkt-quick-action,
  .hq2-cnq-recent-row,
  .hq2-gbp-review,
  .hq2-gbp-post,
  .hq2-cust-stat,
  .hq2-mkt-kpi-card,
  .hq2-orders-kpi,
  .hq2-eb-kpi,
  .hq2-an-kpi,
  .hq2-ing-kpi {
    animation: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MISE CAT — orange tabby mascot · sits in empty states + the
   sign-in screen. SVG sprite is defined once in hq2.html as <symbol>;
   these styles control sizing + animations.

   Default mood is "idle" (gentle bob). Add a mood class to swap:
     .mise-cat--blink     eyes squish closed every 4s
     .mise-cat--tail-wag  tail rotates side-to-side
     .mise-cat--alert     hops with optional "!" sibling
     .mise-cat--sleep     use #miseCatSleep + adds floating zzz's

   Sizes:
     .mise-cat                  default 96px tall, auto width
     .mise-cat--md              140px tall (empty states)
     .mise-cat--lg              200px tall (auth screen, hero)
     .mise-cat--sm              64px (toast badges)
   ════════════════════════════════════════════════════════════════════ */

.mise-cat {
  display: block;
  width: auto;
  height: 96px;
  flex-shrink: 0;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  shape-rendering: crispEdges;
  animation: miseCatIdle 2.4s ease-in-out infinite;
}
.mise-cat--sm { height: 64px; }
.mise-cat--md { height: 140px; }
.mise-cat--lg { height: 200px; }

@keyframes miseCatIdle {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

.mise-cat--blink .mise-cat-eye {
  transform-origin: center;
  animation: miseCatBlink 4s infinite;
}
@keyframes miseCatBlink {
  0%, 92%, 100% { transform: scaleY(1); }
  95%, 98%       { transform: scaleY(.05); }
}

.mise-cat--tail-wag .mise-cat-tail {
  /* anchor at the tail base (col 16, row 22) — the point where the
     tail exits the body so wagging rotates the whole sweep cleanly */
  transform-origin: 16px 22px;
  animation: miseCatTailWag 1s ease-in-out infinite;
}
@keyframes miseCatTailWag {
  0%, 100% { transform: rotate(-10deg); }
  50%      { transform: rotate(12deg); }
}

.mise-cat--alert {
  animation: miseCatAlertHop 1.4s cubic-bezier(.34, 1.56, .64, 1) infinite;
}
@keyframes miseCatAlertHop {
  0%, 60%, 100% { transform: translateY(0); }
  20%           { transform: translateY(-12px); }
  40%           { transform: translateY(0); }
}

/* Sleep — the .mise-cat--sleep parent reveals + animates the zzz's
   that ship inside the miseCatSleep <symbol>. By default zzz's are
   invisible (opacity 0), so loaf + dream — which use the same
   eyes-closed sprite — don't show z's. */
.mise-cat-zzz { opacity: 0; }
.mise-cat--sleep .mise-cat-zzz {
  animation: miseCatZFloat 3s ease-in-out infinite;
  transform-origin: center;
}
.mise-cat--sleep .mise-cat-zzz--2 { animation-delay: 1s; }
.mise-cat--sleep .mise-cat-zzz--3 { animation-delay: 2s; }
@keyframes miseCatZFloat {
  0%   { opacity: 0; transform: translate(0, 0); }
  20%  { opacity: 1; }
  100% { opacity: 0; transform: translate(2px, -4px); }
}
/* Sleep also pairs with a slow body breath — chest rises + falls */
.mise-cat--sleep {
  animation: miseCatBreathe 3.6s ease-in-out infinite;
}
@keyframes miseCatBreathe {
  0%, 100% { transform: scaleY(1) translateY(0); }
  50%      { transform: scaleY(1.015) translateY(-1px); }
}

/* Loaf — tucked-tight pose. Cat's drifting in a content half-asleep
   state, body bobs gently, no z's. Great for "team's quiet, ready
   when you are." */
.mise-cat--loaf {
  animation: miseCatLoaf 4s ease-in-out infinite;
}
@keyframes miseCatLoaf {
  0%, 100% { transform: translateY(0) scaleY(1); }
  50%      { transform: translateY(-2px) scaleY(.99); }
}

/* Dream — sleeping body + tail twitches every couple seconds, like
   chasing something in a dream. Pairs with the eyes-closed sprite. */
.mise-cat--dream {
  animation: miseCatBreathe 3.6s ease-in-out infinite;
}
.mise-cat--dream .mise-cat-tail {
  transform-origin: 16px 22px;
  animation: miseCatDreamTwitch 2.4s ease-in-out infinite;
}
@keyframes miseCatDreamTwitch {
  0%, 60%, 100% { transform: rotate(0); }
  68%           { transform: rotate(-9deg); }
  78%           { transform: rotate(7deg); }
  88%           { transform: rotate(-3deg); }
}

/* Head tilt — whole sprite leans side to side · "looked, didn't find" */
.mise-cat--head-tilt {
  transform-origin: 11px 28px;
  animation: miseCatHeadTilt 3.4s ease-in-out infinite;
}
@keyframes miseCatHeadTilt {
  0%, 100% { transform: rotate(0); }
  20%      { transform: rotate(-7deg); }
  50%      { transform: rotate(0); }
  75%      { transform: rotate(7deg); }
}

/* Peek — eyes shift left then right · scanning for matches */
.mise-cat--peek .mise-cat-eye {
  animation: miseCatPeek 4s ease-in-out infinite;
}
@keyframes miseCatPeek {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-1.2px); }
  40%      { transform: translateX(0); }
  60%      { transform: translateX(1.2px); }
  80%      { transform: translateX(0); }
}

/* Stretch — body briefly grows tall every 5s · "just woke up, ready
   to chat." Subtle squash-and-stretch evokes a cat's morning yawn. */
.mise-cat--stretch {
  transform-origin: 11px 28px;
  animation: miseCatStretch 5s ease-in-out infinite;
}
@keyframes miseCatStretch {
  0%, 70%, 100% { transform: scaleY(1) scaleX(1); }
  82%           { transform: scaleY(1.06) scaleX(.96); }
  92%           { transform: scaleY(1) scaleX(1); }
}

/* ── Pet-the-cat — every cat in the app reacts to hover + click ──
   Hover lifts + scales the cat just enough to feel alive. Click fires
   .is-booped (added by JS) which tail-flicks + does a quick eye squish
   for 0.7s. Cursor becomes a pointer so users know it's interactive. */
.mise-cat {
  cursor: pointer;
  transition: transform .2s ease;
}
.mise-cat:hover {
  transform: translateY(-3px) scale(1.04);
}
.mise-cat.is-booped {
  animation: miseCatBoop .7s ease-out !important;
}
.mise-cat.is-booped .mise-cat-tail {
  transform-origin: 16px 22px;
  animation: miseCatBoopTail .7s ease-out !important;
}
.mise-cat.is-booped .mise-cat-eye {
  transform-origin: center;
  animation: miseCatBoopEye .7s ease-out !important;
}
@keyframes miseCatBoop {
  0%   { transform: translateY(-3px) scale(1.04); }
  30%  { transform: translateY(-7px) scale(1.05); }
  60%  { transform: translateY(-3px) scale(1.04); }
  100% { transform: translateY(-3px) scale(1.04); }
}
@keyframes miseCatBoopTail {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-14deg); }
  50%      { transform: rotate(16deg); }
  75%      { transform: rotate(-6deg); }
}
@keyframes miseCatBoopEye {
  0%, 100% { transform: scaleY(1); }
  30%, 50% { transform: scaleY(.05); }
}

/* ── Idle sleeper — fixed-position bottom-right cat that fades in
   after 60s of no input. Anchored above the rail-foot when present.
   Mouse / keyboard activity dismisses it. */
.hq2-idle-cat {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}
.hq2-idle-cat.is-on {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.hq2-idle-cat .mise-cat { height: 88px; }
/* The corner sleeper has its own little cushion — soft pastel disc. */
.hq2-idle-cat::before {
  content: '';
  position: absolute;
  inset: auto -10px -8px -10px;
  height: 18px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(20, 16, 68, .12), transparent 70%);
  filter: blur(2px);
  z-index: -1;
}

/* ── Holiday cat overlay — rendered as an extra <svg> child of the
   cat sprite via the JS helper. Matches the pixel-art crispness. */
.mise-cat-hat {
  pointer-events: none;
}

/* ── Corner walker — a small cat walking left → right across the
   bottom of the page during a long Firestore read. Disappears when
   the load resolves. */
.hq2-walker {
  position: fixed;
  bottom: 12px;
  left: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.hq2-walker.is-on { opacity: 1; }
.hq2-walker .mise-cat {
  height: 56px;
  animation: miseCatWalkBob .35s steps(2) infinite, miseCatWalkPath 12s linear infinite;
}
@keyframes miseCatWalkBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
@keyframes miseCatWalkPath {
  0%   { margin-left: -80px; }
  50%  { margin-left: calc(100vw + 0px); }
  /* once across, hide via low opacity in the second half */
  50.001%, 100% { margin-left: -80px; opacity: 0; }
}

/* ── Celebration card — corner pop-up for streak trophies + revenue
   milestones. Slides in from bottom-right, holds, fades out. */
.hq2-celebrate {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px 14px 14px;
  border-radius: 16px;
  background:
    radial-gradient(280px 160px at 0% 0%, rgba(237, 230, 255, .65), transparent 60%),
    radial-gradient(220px 140px at 100% 100%, rgba(255, 230, 220, .65), transparent 60%),
    linear-gradient(180deg, #FFFEFB 0%, #FFF6F0 100%);
  border: 1px solid rgba(200, 169, 110, .45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 18px 36px -16px rgba(20, 16, 68, .28);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transition: opacity .35s ease, transform .35s cubic-bezier(.34, 1.56, .64, 1);
  max-width: 320px;
  overflow: visible;
  pointer-events: none;
}
.hq2-celebrate.is-on {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.hq2-celebrate-icon {
  flex-shrink: 0;
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, rgba(200, 169, 110, .45), rgba(200, 169, 110, .15));
  color: #8B6914;
}
.hq2-celebrate-body {
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.hq2-celebrate-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: -.005em;
  color: var(--ink, #141044);
  line-height: 1.3;
}
.hq2-celebrate-sub {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  line-height: 1.4;
}
.hq2-celebrate-confetti {
  position: absolute;
  inset: -12px;
  pointer-events: none;
  overflow: hidden;
  border-radius: 28px;
}
.hq2-celebrate-bit {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 1px;
  top: 50%; left: 50%;
  --x: calc((var(--n) - 9) * 18px);
  --y: calc((var(--n) % 4) * -14px - 18px);
  background: #C8A96E;
  opacity: 0;
  animation: hq2CelebrateConfetti 1.5s ease-out forwards;
  animation-delay: calc(var(--n) * 18ms);
}
.hq2-celebrate.is-on .hq2-celebrate-bit { opacity: 1; }
.hq2-celebrate-bit--0 { background: #C8A96E; }
.hq2-celebrate-bit--1 { background: #FF8C42; }
.hq2-celebrate-bit--2 { background: #2E8657; }
.hq2-celebrate-bit--3 { background: #E07AB0; }
.hq2-celebrate-bit--4 { background: #8B5CF6; }
.hq2-celebrate-bit--5 { background: #FFD96E; }
@keyframes hq2CelebrateConfetti {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(540deg); opacity: 0; }
}

@media (prefers-reduced-motion: reduce){
  .mise-cat,
  .mise-cat:hover,
  .mise-cat--blink .mise-cat-eye,
  .mise-cat--tail-wag .mise-cat-tail,
  .mise-cat--alert,
  .mise-cat--sleep,
  .mise-cat--sleep .mise-cat-zzz,
  .mise-cat--loaf,
  .mise-cat--dream,
  .mise-cat--dream .mise-cat-tail,
  .mise-cat--head-tilt,
  .mise-cat--peek .mise-cat-eye,
  .mise-cat--stretch,
  .mise-cat.is-booped,
  .mise-cat.is-booped .mise-cat-tail,
  .mise-cat.is-booped .mise-cat-eye,
  .hq2-walker .mise-cat,
  .hq2-celebrate-bit { animation: none; transform: none; }
}

/* Empty-state-with-cat layout — the cat sits centered above the
   existing message. Used by the JS miseCat() helper. Existing empty-
   state classes (.hq2-brief-empty, .hq2-orders-empty, etc.) get this
   class added to opt in. */
.hq2-empty-with-cat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 16px 28px;
}
.hq2-empty-with-cat .mise-cat {
  margin-bottom: 4px;
}
.hq2-empty-with-cat h3 {
  margin: 0;
  text-align: center;
}
.hq2-empty-with-cat p {
  margin: 0;
  max-width: 42ch;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════════════
   FINANCIALS — friendly UI rollover · /hq2#/financials
   ────────────────────────────────────────────────────────────────────
   Brings the financials surface (heritage layout from the early CRM
   work) onto the same pastel multi-radial palette as every other
   module. Hero, KPI cards, section cards, range pills, expense + ledger
   forms — all leveled to the canon. Same approach as the recipe-editor
   rollover: minimal HTML restructure (just the hero), CSS does the
   rest via class-name overrides.
   ════════════════════════════════════════════════════════════════════ */

/* Friendly hero — same shape as Orders, Marketing, Email blasts */
.hq2-fi-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  margin-bottom: clamp(14px, 2vw, 22px);
  border-radius: 24px;
  border: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(700px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(255, 224, 236, .55) 0%, transparent 55%),
    radial-gradient(480px 360px at 50% 110%, rgba(220, 245, 232, .5)  0%, transparent 70%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 22px 56px -28px rgba(20, 16, 68, .14);
  overflow: hidden;
  animation: hq2-friendly-in .55s cubic-bezier(.34, 1.56, .64, 1) both;
}
.hq2-fi-hero::after {
  content: '';
  position: absolute;
  right: -64px; top: -64px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(200, 169, 110, .35), transparent 62%);
  pointer-events: none;
  filter: blur(2px);
  animation: hq2-friendly-bob 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .hq2-fi-hero,
  .hq2-fi-hero::after { animation: none; }
}
.hq2-fi-hero-l {
  display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; z-index: 1;
}
.hq2-fi-hero-r {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0; z-index: 1; flex-wrap: wrap;
}
.hq2-fi-range-meta {
  margin-bottom: 12px;
}
.hq2-fi-range-meta .r-meta {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}
@media (max-width: 880px){
  .hq2-fi-hero { flex-direction: column; align-items: stretch; }
  .hq2-fi-hero-r { justify-content: flex-start; }
}

/* KPI strip — match the canonical orders/marketing card palette.
   Uses the existing .hq2-stats grid but redresses .stat-card. */
.hq2-fi-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
@media (max-width: 880px){
  .hq2-fi-stats { grid-template-columns: repeat(2, 1fr); }
}
.hq2-fi-stats .stat-card,
.hq2-fi-stats > div {
  background: #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  padding: 14px 18px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
  transition: transform .15s ease, box-shadow .15s ease;
}
.hq2-fi-stats .stat-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .95) inset, 0 12px 28px -18px rgba(20, 16, 68, .18);
}
.hq2-fi-stats .stat-label,
.hq2-fi-stats .stat-card .lbl {
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}
.hq2-fi-stats .stat-value,
.hq2-fi-stats .stat-card b {
  font-size: 24px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.025em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-fi-stats .stat-delta,
.hq2-fi-stats .stat-card .delta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, #6E7088);
}
.hq2-fi-stats .stat-card.tone-ok .stat-value,
.hq2-fi-stats .stat-card.tone-ok b   { color: #1F7A3F; }
.hq2-fi-stats .stat-card.tone-warn .stat-value,
.hq2-fi-stats .stat-card.tone-warn b { color: #B86E14; }
.hq2-fi-stats .stat-card.tone-danger .stat-value,
.hq2-fi-stats .stat-card.tone-danger b { color: #DC2626; }

/* Section cards — warm glass surface */
.hq2-fi-card {
  background:
    radial-gradient(380px 200px at 100% -20%, rgba(255, 230, 220, .35), transparent 60%),
    #FFFEFB;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 16px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
  margin-bottom: 14px;
  overflow: hidden;
  transition: border-color .15s ease;
}
.hq2-fi-card:hover {
  border-color: rgba(200, 169, 110, .35);
}
.hq2-fi-head {
  background: rgba(255, 255, 255, .65);
  border-bottom: 1px solid rgba(20, 16, 68, .06);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.hq2-fi-head > span:first-child {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
}
.hq2-fi-head .hq2-fi-meta {
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
}
.hq2-fi-body { padding: 16px 18px; }

/* Two-column row */
.hq2-fi-row {
  display: grid;
  gap: 14px;
  margin-bottom: 14px;
}
.hq2-fi-row-2up { grid-template-columns: 1fr 1fr; }
@media (max-width: 880px){
  .hq2-fi-row-2up { grid-template-columns: 1fr; }
}

/* Section sub-headers — friendlier */
.hq2-dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 22px 4px 12px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(20, 16, 68, .08);
}
.hq2-dash-section-head h2 {
  font-size: 14px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -.005em;
  margin: 0;
  text-transform: lowercase;
}
.hq2-dash-section-head .meta {
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* P&L table — softer */
.hq2-fi-pl {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-fi-pl th, .hq2-fi-pl td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
}
.hq2-fi-pl th {
  text-align: left;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
  font-size: 12.5px;
}
.hq2-fi-pl td { text-align: right; color: #141044; font-variant-numeric: tabular-nums; }
.hq2-fi-pl tr.pl-rev th  { color: #141044; font-weight: 700; }
.hq2-fi-pl tr.pl-neg td  { color: #C0392B; }
.hq2-fi-pl tr.pl-sub th, .hq2-fi-pl tr.pl-sub td {
  color: var(--ink-3, #6E7088);
  font-size: 12px;
  padding-left: 24px;
}
.hq2-fi-pl tr.pl-total {
  background: linear-gradient(135deg, rgba(255, 230, 220, .35), rgba(237, 230, 255, .35));
  border-top: 2px solid rgba(20, 16, 68, .1);
}
.hq2-fi-pl tr.pl-total th, .hq2-fi-pl tr.pl-total td {
  font-weight: 800;
  color: #141044;
  font-size: 14px;
  padding: 12px;
}
.hq2-fi-pl tr.pl-total.tone-ok td      { color: #1F7A3F; }
.hq2-fi-pl tr.pl-total.tone-danger td  { color: #C0392B; }

/* Expense + ledger forms — soften inputs, friendly buttons */
.hq2-fi-exp-form,
.hq2-fi-lg-form {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 1fr 0.7fr auto;
  gap: 8px;
  padding: 11px 16px;
  background: rgba(255, 255, 255, .6);
  border-bottom: 1px solid rgba(20, 16, 68, .06);
}
.hq2-fi-lg-form { grid-template-columns: 0.8fr 0.7fr 1.2fr 0.8fr 1.6fr auto auto; }
@media (max-width: 880px){
  .hq2-fi-exp-form,
  .hq2-fi-lg-form { grid-template-columns: 1fr; }
}
.hq2-fi-exp-form input,
.hq2-fi-exp-form select,
.hq2-fi-lg-form input,
.hq2-fi-lg-form select {
  font-family: inherit;
  font-size: 12.5px;
  padding: 7px 11px;
  border: 1px solid rgba(20, 16, 68, .1);
  border-radius: 8px;
  background: #fff;
  color: #141044;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.hq2-fi-exp-form input:focus,
.hq2-fi-exp-form select:focus,
.hq2-fi-lg-form input:focus,
.hq2-fi-lg-form select:focus {
  outline: 0;
  border-color: rgba(200, 169, 110, .8);
  box-shadow: 0 0 0 3px rgba(200, 169, 110, .15);
}

/* Ledger toolbar */
.hq2-fi-lg-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-bottom: 1px solid rgba(20, 16, 68, .06);
  flex-wrap: wrap;
  background: rgba(255, 255, 255, .65);
}
.hq2-fi-lg-search {
  flex: 1;
  min-width: 200px;
  max-width: 360px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 8px;
  color: var(--ink-3, #6E7088);
}
.hq2-fi-lg-search input {
  flex: 1;
  border: 0;
  background: transparent;
  padding: 4px 0;
  font-size: 13px;
  color: #141044;
}
.hq2-fi-lg-search input:focus { outline: 0; }

/* Legacy .tb-btn / .tk-filter inside financials → friendly look */
.hq2-fi-card .tb-btn,
.hq2-fi-lg-toolbar .tb-btn {
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(20, 16, 68, .1);
  background: #fff;
  color: #141044;
  cursor: pointer;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
  text-transform: lowercase;
}
.hq2-fi-card .tb-btn:hover,
.hq2-fi-lg-toolbar .tb-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .55);
}
.hq2-fi-card .tb-btn-primary,
.hq2-fi-lg-toolbar .tb-btn-primary {
  background: linear-gradient(135deg, #141044 0%, #2B2569 100%);
  color: #fff;
  border-color: #141044;
}
.hq2-fi-card .tb-btn-primary:hover,
.hq2-fi-lg-toolbar .tb-btn-primary:hover {
  background: linear-gradient(135deg, #1B1654 0%, #3B3479 100%);
  color: #fff;
}

.hq2-fi-card .tk-filters {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px;
  background: rgba(20, 16, 68, .05);
  border-radius: 8px;
}
.hq2-fi-card .tk-filter {
  padding: 4px 11px;
  border: 0;
  background: transparent;
  color: var(--ink-2, #3D3E5C);
  font-size: 11.5px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s ease, color .15s ease;
  text-transform: lowercase;
  letter-spacing: 0;
}
.hq2-fi-card .tk-filter:hover { color: #141044; }
.hq2-fi-card .tk-filter.is-active {
  background: #fff;
  color: #141044;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 10px -6px rgba(20, 16, 68, .15);
}

/* Ledger body rows */
.hq2-fi-lg-body {
  padding: 0;
}
.hq2-fi-lg-body table {
  width: 100%;
  border-collapse: collapse;
}
.hq2-fi-lg-body th,
.hq2-fi-lg-body td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
  font-size: 13px;
}
.hq2-fi-lg-body th {
  text-align: left;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  background: rgba(20, 16, 68, .03);
}
.hq2-fi-lg-body tr:hover td { background: rgba(255, 230, 220, .25); }
.hq2-fi-lg-body td.lg-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.hq2-fi-lg-body td.lg-amt.income { color: #1F7A3F; }
.hq2-fi-lg-body td.lg-amt.expense { color: #C0392B; }

/* Expense list rows */
.hq2-fi-exp-list {
  padding: 0;
  max-height: 340px;
  overflow-y: auto;
}
.hq2-fi-exp-list .exp-row {
  display: grid;
  grid-template-columns: 1.6fr 0.6fr 1fr auto auto;
  gap: 10px;
  padding: 10px 18px;
  align-items: center;
  border-bottom: 1px solid rgba(20, 16, 68, .04);
  font-size: 13px;
}
.hq2-fi-exp-list .exp-row:hover { background: rgba(255, 230, 220, .25); }
.hq2-fi-exp-list .exp-amt { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; color: #141044; }
.hq2-fi-exp-list .exp-cat {
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #8B6914;
  background: rgba(200, 169, 110, .14);
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 700;
  display: inline-block;
  width: fit-content;
}

/* ════════════════════════════════════════════════════════════════════
   CUSTOMER SERVICE HUB — /hq2#/customerService
   ────────────────────────────────────────────────────────────────────
   The hub render in renderCsHubPage was scaffolded with .hq2-cs-* class
   names but never had styles written, so the page was rendering as
   default unstyled HTML — flat raw text. These rules give it the same
   pastel hero + metric tiles + queue card pattern as the other hubs.
   ════════════════════════════════════════════════════════════════════ */

/* ── KPI tile strip ── */
.hq2-cs-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 var(--s-5);
}
@media (max-width: 880px){
  .hq2-cs-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hq2-cs-metric {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px -14px rgba(20, 16, 68, .14);
}
.hq2-cs-metric .lbl {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
}
.hq2-cs-metric b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -.02em;
  color: var(--ink, #141044);
  font-variant-numeric: tabular-nums;
  line-height: 1.05;
}
.hq2-cs-metric .hint {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  line-height: 1.45;
}

/* ── Concierge CTA card ── */
.hq2-cs-row {
  margin: 0 0 var(--s-5);
}
.hq2-cs-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 22px;
  border-radius: 16px;
  background:
    radial-gradient(540px 200px at 0% 0%, rgba(237, 230, 255, .65), transparent 60%),
    radial-gradient(420px 200px at 100% 100%, rgba(255, 230, 220, .55), transparent 60%),
    linear-gradient(180deg, #FFFEFB 0%, #FFF7F0 100%);
  border: 1px solid rgba(20, 16, 68, .07);
  text-decoration: none;
  color: inherit;
  transition: transform .15s ease, border-color .15s ease, box-shadow .2s ease;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .12);
}
.hq2-cs-cta:hover {
  transform: translateY(-1px);
  border-color: rgba(200, 169, 110, .45);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 14px 32px -18px rgba(20, 16, 68, .18);
}
.hq2-cs-cta-l {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.hq2-cs-cta-eye {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #8B6914;
}
.hq2-cs-cta-title {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -.01em;
  color: var(--ink, #141044);
}
.hq2-cs-cta-sub {
  font-size: 13px;
  color: var(--ink-2, #3D3E5C);
  line-height: 1.45;
}
.hq2-cs-cta-r {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 700;
  color: #8B6914;
  flex-shrink: 0;
  transition: transform .15s ease;
}
.hq2-cs-cta:hover .hq2-cs-cta-r {
  transform: translateX(3px);
}

/* ── Open queue list ── */
.hq2-cs-list-wrap {
  border-radius: 16px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px -14px rgba(20, 16, 68, .12);
  overflow: hidden;
}
.hq2-cs-list-wrap .hq2-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px 10px;
  border-bottom: 1px solid rgba(20, 16, 68, .06);
}
.hq2-cs-list-wrap .hq2-panel-head h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -.005em;
  color: var(--ink, #141044);
}
.hq2-cs-list-wrap .hq2-panel-head .meta {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
}
.hq2-cs-list {
  display: flex;
  flex-direction: column;
}
.hq2-cs-empty {
  padding: 36px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* ── Thread row ── */
.hq2-cs-thread {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(20, 16, 68, .05);
  transition: background .15s ease;
}
.hq2-cs-thread:last-child { border-bottom: 0; }
.hq2-cs-thread:hover { background: rgba(20, 16, 68, .02); }
@media (max-width: 720px){
  .hq2-cs-thread {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .hq2-cs-thread-l { display: flex; }
  .hq2-cs-thread-r { justify-content: flex-start !important; }
}

.hq2-cs-thread-l {
  padding-top: 2px;
}
.hq2-cs-thread-channel {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  background: rgba(20, 16, 68, .06);
  color: var(--ink-2, #3D3E5C);
}
/* Channel-specific tints — keeps the row scan-able at a glance */
.hq2-cs-thread.is-email .hq2-cs-thread-channel {
  background: rgba(27, 26, 107, .1); color: #1B1A6B;
}
.hq2-cs-thread.is-sms .hq2-cs-thread-channel {
  background: rgba(46, 134, 87, .14); color: #1F7A3F;
}
.hq2-cs-thread.is-ticket .hq2-cs-thread-channel,
.hq2-cs-thread.is-support .hq2-cs-thread-channel {
  background: rgba(192, 57, 43, .12); color: #B8351F;
}
.hq2-cs-thread.is-chat .hq2-cs-thread-channel {
  background: rgba(200, 169, 110, .2); color: #8B6914;
}

.hq2-cs-thread-c {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.hq2-cs-thread-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hq2-cs-thread-who {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
}
.hq2-cs-thread-ago {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-variant-numeric: tabular-nums;
}
.hq2-cs-thread-subject {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
  letter-spacing: -.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-cs-thread-snippet {
  font-size: 12.5px;
  color: var(--ink-3, #6E7088);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hq2-cs-thread-r {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-end;
  flex-shrink: 0;
}
.hq2-cs-thread-r .hq2-btn {
  white-space: nowrap;
}

/* ── Issue refund modal ─────────────────────────────────────────── */
.hq2-refund-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: rgba(255, 248, 234, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}
.hq2-refund-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.hq2-refund-summary-row span {
  color: var(--hq2-ink-soft, rgba(0, 0, 0, 0.55));
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.hq2-refund-summary-row b {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.hq2-refund-warn {
  margin: 12px 0 4px;
  padding: 10px 12px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--hq2-ink-soft, rgba(0, 0, 0, 0.6));
  background: rgba(255, 240, 210, 0.6);
  border: 1px solid rgba(180, 120, 30, 0.18);
  border-radius: 10px;
}

/* ── Architecture page · live health monitor ───────────────────── */
.hq2-arch-health {
  margin: 0 0 var(--s-5);
  padding: var(--s-4);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.7), rgba(255, 248, 232, 0.55));
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
.hq2-arch-health-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.hq2-arch-health-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-arch-health-tag {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-arch-health-tag::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20a76b;
  box-shadow: 0 0 0 3px rgba(32, 167, 107, 0.18);
  animation: hq2-arch-pulse 2.4s ease-in-out infinite;
}
@keyframes hq2-arch-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(0.85); opacity: 0.65; }
}
.hq2-arch-health-sub {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-arch-health-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-3);
}
.hq2-arch-health-loading {
  grid-column: 1 / -1;
  padding: 24px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  font-family: var(--font-ui);
}
.hq2-arch-health-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-arch-health-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-arch-health-card.is-warn {
  background: linear-gradient(180deg, #fff8e6, #ffffff 60%);
  border-color: rgba(200, 140, 0, 0.18);
}
.hq2-arch-health-card.is-stale {
  background: linear-gradient(180deg, #ffece9, #ffffff 60%);
  border-color: rgba(180, 50, 30, 0.18);
}
.hq2-arch-health-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hq2-arch-health-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #20a76b;
}
.hq2-arch-health-dot.is-warn  { background: #d9a200; }
.hq2-arch-health-dot.is-stale { background: #c8442c; }
.hq2-arch-health-card-name {
  flex: 1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  text-transform: lowercase;
  color: var(--ink);
}
.hq2-arch-health-pill {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(32, 167, 107, 0.12);
  color: #157d51;
}
.hq2-arch-health-pill.is-warn  { background: rgba(217, 162, 0, 0.15);  color: #8a6500; }
.hq2-arch-health-pill.is-stale { background: rgba(200, 68, 44, 0.12);  color: #a8331f; }
.hq2-arch-health-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
.hq2-arch-health-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
  min-width: 0;
}
.hq2-arch-health-stat b {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.hq2-arch-health-stat span {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.hq2-arch-health-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-arch-health-card-foot b {
  color: var(--ink);
  font-weight: 600;
}
.hq2-arch-health-action {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 4px 10px;
  cursor: pointer;
  color: var(--ink);
  transition: background 0.15s ease, border-color 0.15s ease;
}
.hq2-arch-health-action:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.2);
}
.hq2-arch-health-action:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.hq2-arch-health-note {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  padding-top: 6px;
}

/* ── Live dot — small pulsing chip used in module heroes that
   auto-refresh from /aggregates or shared streams. Roadmap #8. ─── */
.hq2-live-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #157d51;
  background: rgba(32, 167, 107, 0.10);
  padding: 2px 7px;
  border-radius: 999px;
  vertical-align: middle;
  margin-left: 6px;
  line-height: 1.3;
}
.hq2-live-dot::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #20a76b;
  box-shadow: 0 0 0 2px rgba(32, 167, 107, 0.18);
  animation: hq2-arch-pulse 2.4s ease-in-out infinite;
}

/* ── Money hub · Overhead tab ─────────────────────────────────── */
.hq2-fi-shell {
  display: block;
}
/* ── Sub-section header (inside a 360 hub shell) ──────────────────────
   The shell's outer hero (.hq2-mkt-shell-hero) carries the hub identity —
   "Money", "Marketing", "IT & HR". This modifier demotes the inner
   sub-tab header so it doesn't visually compete with the parent. No
   pastel gradient, no bobbing accent, no animation, smaller type, less
   padding. The active tab in the shell's tab strip already tells the
   user where they are; this header just gives the sub-tab its own
   tagline + a place to dock filters/actions on the right.

   Apply to ANY sub-tab hero rendered inside a 360 hub shell. Top-level
   page heroes (Data map, Settings, Calendar, etc.) keep the full
   .hq2-fi-hero treatment — they're the page hero, not a sub-section.
   ──────────────────────────────────────────────────────────────────── */
.hq2-fi-hero-sub {
  margin-top: 0;
  margin-bottom: var(--s-3);
  padding: 14px 18px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: none;
  animation: none;
}
.hq2-fi-hero-sub::after { display: none; }
.hq2-fi-hero-sub .hq2-fi-hero-l { gap: 2px; }
.hq2-fi-hero-sub .hq2-hub-eyebrow {
  font-size: 10px;
  margin-bottom: 2px;
}
.hq2-fi-hero-sub .hq2-hub-h1 {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin: 0;
}
.hq2-fi-hero-sub .hq2-hub-mission {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 4px;
  max-width: 640px;
}
.hq2-oh-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.hq2-oh-out, .hq2-oh-vol, .hq2-oh-card-wide {
  grid-column: 1 / -1;
}
@media (max-width: 880px) {
  .hq2-oh-grid { grid-template-columns: 1fr; }
}
.hq2-oh-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.hq2-oh-modes {
  display: inline-flex;
  gap: 6px;
  margin-bottom: 4px;
}
.hq2-oh-mode-pane {
  display: none;
  flex-direction: column;
  gap: 12px;
}
.hq2-oh-mode-pane.is-active {
  display: flex;
}
.hq2-oh-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hq2-oh-row-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 720px) {
  .hq2-oh-row-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .hq2-oh-row { grid-template-columns: 1fr; }
  .hq2-oh-row-3 { grid-template-columns: 1fr; }
}
.hq2-oh-hint {
  margin: 4px 0 0 0;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-oh-hint code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink-2, var(--ink));
}
.hq2-oh-out-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  padding: 16px;
}
@media (max-width: 1100px) {
  .hq2-oh-out-row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .hq2-oh-out-row { grid-template-columns: repeat(2, 1fr); }
}
.hq2-oh-out-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: rgba(255, 252, 244, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  text-align: center;
}
.hq2-oh-out-stat b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 22px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-oh-out-stat span {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.hq2-oh-out-stat.is-total {
  background: linear-gradient(180deg, #fff8e6, #fffaef 70%);
  border-color: rgba(200, 140, 0, 0.18);
}
.hq2-oh-out-stat.is-total b {
  color: #8a6500;
  font-size: 26px;
}
.hq2-oh-out-monthly {
  padding: 0 16px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-3);
}
.hq2-oh-out-monthly b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-oh-out-delivery {
  margin: 0 16px 16px;
  padding: 12px 14px;
  background: rgba(46, 117, 200, .06);
  border: 1px solid rgba(46, 117, 200, .14);
  border-radius: 10px;
}
.hq2-oh-out-delivery-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: #245C9A;
  margin-bottom: 8px;
}
.hq2-oh-out-delivery-cells {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px){
  .hq2-oh-out-delivery-cells { grid-template-columns: repeat(2, 1fr); }
}
.hq2-oh-out-delivery .hq2-oh-out-stat b.is-negative { color: #C0392B; }

/* Delivery fold-in control — toggle + share slider that fold the
   per-order delivery margin into breakeven + planning. Sits under the
   cost/fee/margin cells, separated by a hairline. */
.hq2-oh-out-delivery-fold {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(46, 117, 200, .14);
}
.hq2-oh-fold-toggle {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-ui);
  font-size: 13px; color: #245C9A; font-weight: 600;
  cursor: pointer; user-select: none;
}
.hq2-oh-fold-toggle input { width: 15px; height: 15px; cursor: pointer; accent-color: #245C9A; }
.hq2-oh-fold-share { margin-top: 10px; }
.hq2-oh-fold-share-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}
.hq2-oh-fold-share-lbl {
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-2, #555);
}
.hq2-oh-fold-share-pct {
  font-size: 12px; color: #245C9A;
  font-variant-numeric: tabular-nums;
}
.hq2-oh-fold-share-note {
  margin-top: 6px;
  font-family: var(--font-ui); font-size: 11px; color: #8a5a00;
  font-variant-numeric: tabular-nums;
}
/* Delivery-folded columns on the breakeven + planning tables — tinted
   so the eye reads them as the "what-if delivery" view, distinct from
   the base pickup columns. */
.hq2-oh-be-table .hq2-oh-be-deliv,
.hq2-oh-pm-table .hq2-oh-be-deliv {
  background: rgba(46, 117, 200, .06);
  color: #245C9A;
}
.hq2-oh-be-deliv-pill {
  display: inline-block; margin-left: 4px;
  background: rgba(46,117,200,.14); color: #245C9A;
  font-size: 10px; font-weight: var(--w-bold);
  padding: 2px 7px; border-radius: 99px; letter-spacing: .02em;
  vertical-align: middle; cursor: help;
}
.hq2-oh-vol-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-oh-vol-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hq2-oh-vol-table th:not(:first-child),
.hq2-oh-vol-table td:not(:first-child) {
  text-align: right;
}
.hq2-oh-vol-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-oh-vol-table tr.is-current {
  background: rgba(200, 140, 0, 0.06);
}
.hq2-oh-vol-table tr.is-current td {
  font-weight: 700;
}
.hq2-oh-cur {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a6500;
  background: rgba(200, 140, 0, 0.14);
  border-radius: 999px;
}
.hq2-oh-vol-foot {
  padding: 12px 16px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-oh-vol-foot b {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* Coming-soon panel for placeholder tabs */
.hq2-mkt-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 60px 24px;
  text-align: center;
  font-family: var(--font-ui);
}
.hq2-mkt-coming-glyph {
  font-size: 42px;
  opacity: 0.7;
}
.hq2-mkt-coming-soon h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 800;
  color: var(--ink);
}
.hq2-mkt-coming-soon p {
  margin: 0;
  max-width: 560px;
  color: var(--ink-3);
  line-height: 1.5;
}
.hq2-mkt-coming-soon code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ── Money hub · Pricing tab ──────────────────────────────────── */
.hq2-pr-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
  margin-top: var(--s-4);
}
.hq2-pr-preview {
  grid-column: 1 / -1;
}
@media (max-width: 880px) {
  .hq2-pr-grid { grid-template-columns: 1fr; }
}
.hq2-pr-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
}
.hq2-pr-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .hq2-pr-row { grid-template-columns: 1fr; }
}
.hq2-pr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-pr-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-pr-table th.ar, .hq2-pr-table td.ar {
  text-align: right;
}
.hq2-pr-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-variant-numeric: tabular-nums;
}
.hq2-pr-table td b {
  color: var(--ink);
  font-weight: 700;
}
.hq2-pr-table tr.is-breakpoint {
  background: rgba(200, 140, 0, 0.05);
}
/* Pickup/delivery row pair — drop the border between the two rows so
   they read as a single cart-size group. The delivery row keeps its
   normal bottom border to separate from the next pair. */
.hq2-pr-table tr.hq2-pr-pair-top td {
  border-bottom: none;
  padding-bottom: 4px;
}
.hq2-pr-table tr.hq2-pr-pair-bot td {
  padding-top: 4px;
}
/* Max-swap columns — visually grouped with a subtle navy tint so the
   eye reads "default vs. worst-case" without a separate sub-header. */
.hq2-pr-table th.hq2-pr-maxcol,
.hq2-pr-table td.hq2-pr-maxcol {
  background: rgba(27, 26, 107, .035);
}
.hq2-pr-table th.hq2-pr-maxcol {
  color: var(--tc-navy);
}
.hq2-pr-table td.hq2-pr-maxcol b {
  color: var(--tc-navy);
}
/* Inline help block in the pricing form — used by the max-swap input. */
.hq2-pr-help {
  display: flex; flex-direction: column; gap: 4px;
  padding: 6px 0;
}
.hq2-pr-help-txt {
  font-size: var(--t-11); color: var(--ink-3); line-height: 1.4;
}
.hq2-pr-help-txt b { color: var(--ink); font-weight: 700; }
/* "edit →" link next to the packaging cost label — taps through to
   /hq2#/packaging/build, the source of truth for that number. */
.hq2-pr-edit-link {
  margin-left: 6px;
  font-size: var(--t-11);
  font-weight: 600;
  color: var(--brand, #c46a1a);
  text-decoration: none;
  letter-spacing: 0;
  text-transform: none;
}
.hq2-pr-edit-link:hover { text-decoration: underline; }
/* Readonly inputs — dim them so they're clearly not editable in place. */
#hq2PrPack[readonly],
#hq2PrDelFee[readonly],
#hq2PrDelCost[readonly] {
  background: var(--bg-2, #f5f1ea);
  color: var(--ink-2, #6b5d4a);
  cursor: not-allowed;
}
/* Plan tiers card — read-only summary list, one row per active tier. */
.hq2-pr-tiers-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border, #ece6da);
}
.hq2-pr-tiers-row:last-child { border-bottom: none; }
.hq2-pr-tiers-l, .hq2-pr-tiers-r { display: flex; flex-direction: column; }
.hq2-pr-tiers-r { align-items: flex-end; }
.hq2-pr-tiers-l b, .hq2-pr-tiers-r b {
  font-size: var(--t-14, 14px);
  color: var(--ink);
  font-weight: 700;
}
.hq2-pr-tiers-sub {
  font-size: var(--t-11, 11px);
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
}
.hq2-pr-tiers-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fff5dc;
  color: #8a6500;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-pr-tiers-empty {
  padding: 14px 12px;
  font-size: var(--t-12, 12px);
  color: var(--ink-3);
}
/* Header actions — "+ new tier" + "open in /hq →" sit on the right of
   the card head, replacing the old read-only "edit at /hq" link. */
.hq2-pr-tiers-head-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Edit button sits to the right of the price column. The flex row above
   uses justify-content:space-between, so this nudges the button to align
   with the right edge as a third column. */
.hq2-pr-tier-edit-btn {
  flex-shrink: 0;
}
.hq2-pr-tiers-pill-flat {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
}
.hq2-pr-tiers-pill-muted {
  background: rgba(107, 114, 128, 0.12);
  color: #6b7280;
}
/* Inline editor — slides in below the tier rows when an edit is open.
   Visually nested inside the card so the tier list above stays as the
   index back into the editor. */
.hq2-pr-tier-editor {
  margin-top: 6px;
  padding: 14px;
  background: var(--surface-2, #f5f1ea);
  border: 1px solid var(--rule, #ece6da);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-pr-tier-editor-head {
  font-size: var(--t-13, 13px);
  font-weight: 800;
  color: var(--ink, #1b1a6b);
  letter-spacing: 0.02em;
}
.hq2-pr-tier-editor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.hq2-pr-tier-editor-mode {
  padding: 12px;
  background: #fff;
  border: 1px solid var(--rule, #ece6da);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-pr-tier-editor-mode-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-pr-tier-editor-mode-radios {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hq2-pr-tier-editor-mode-radios label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12, 12px);
  font-weight: 700;
  color: var(--ink, #1b1a6b);
  cursor: pointer;
}
.hq2-pr-tier-editor-hint {
  align-self: center;
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.4;
}
.hq2-pr-tier-editor-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 8px 0;
}
.hq2-pr-tier-editor-flags label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--t-12, 12px);
  font-weight: 700;
  color: var(--ink, #1b1a6b);
  cursor: pointer;
}
.hq2-pr-tier-editor-flags input[disabled] + * {
  opacity: 0.5;
}
.hq2-pr-tier-editor-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hq2-pr-tier-editor-status {
  font-size: var(--t-12, 12px);
  color: var(--ink-3);
}
.hq2-pr-tier-editor-status[data-tone="bad"] {
  color: #b3211a;
  font-weight: 700;
}
.hq2-pr-table tr.is-breakpoint td b {
  color: #8a6500;
}
.hq2-pr-table tr.hq2-pr-section td {
  padding: 14px 12px 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a6500;
  background: transparent;
  border-bottom: none;
}
.hq2-pr-sub {
  display: block;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 500;
  margin-top: 2px;
  letter-spacing: 0;
  text-transform: lowercase;
}
.hq2-pr-save {
  font-size: 11px;
  font-weight: 700;
  color: #8a6500;
}
.hq2-pr-tone {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}
.hq2-pr-tone.is-good {
  color: #157d51;
  background: rgba(32, 167, 107, 0.12);
}
.hq2-pr-tone.is-warn {
  color: #8a6500;
  background: rgba(217, 162, 0, 0.15);
}
.hq2-pr-tone.is-bad {
  color: #a8331f;
  background: rgba(200, 68, 44, 0.14);
}

/* ── Live-preview card · v2 redesign ─────────────────────────────────
   Pickup/delivery fulfillment toggle in the card head + three
   cost-build banners (per-meal, per-order processing, per-order
   delivery) above the single-row-per-cart-size table. Replaces the
   older paired-row layout. */
.hq2-pr-head-l {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hq2-pr-fulfill-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(20, 16, 68, .05);
  border-radius: 999px;
  padding: 3px;
}
.hq2-pr-fulfill-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.hq2-pr-fulfill-toggle button.is-active {
  background: #fff;
  color: var(--ink, #141044);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Banners — three flavors share base structure, accent color varies. */
.hq2-pr-cb {
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 16px 10px;
}
.hq2-pr-cb-meal {
  background: linear-gradient(180deg, rgba(27, 26, 107, .035), rgba(27, 26, 107, .02));
  border: 1px solid rgba(27, 26, 107, .08);
}
.hq2-pr-cb-stripe {
  background: linear-gradient(180deg, rgba(98, 84, 160, .05), rgba(98, 84, 160, .025));
  border: 1px solid rgba(98, 84, 160, .18);
}
.hq2-pr-cb-del {
  background: linear-gradient(180deg, rgba(200, 140, 0, .06), rgba(200, 140, 0, .03));
  border: 1px solid rgba(200, 140, 0, .20);
}
.hq2-pr-cb-lbl {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, #6E7088);
  font-weight: 800;
  margin-bottom: 8px;
}
.hq2-pr-cb-stripe .hq2-pr-cb-lbl > span:first-child { color: #6254a0; }
.hq2-pr-cb-del .hq2-pr-cb-lbl > span:first-child    { color: #8a6500; }
.hq2-pr-cb-ctx {
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-3, #6E7088);
  font-size: 11px;
}
.hq2-pr-cb-stack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--ink-2, #3b3766);
  font-variant-numeric: tabular-nums;
}
.hq2-pr-cb-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 11px 7px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .06);
  min-width: 90px;
}
.hq2-pr-cb-chip .v {
  font-weight: 800;
  color: var(--ink, #141044);
  font-size: 13.5px;
}
.hq2-pr-cb-chip .t {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  text-transform: lowercase;
}
.hq2-pr-cb-op { font-size: 14px; font-weight: 600; color: var(--ink-3, #6E7088); }
.hq2-pr-cb-eq { font-size: 14px; font-weight: 800; color: var(--ink-3, #6E7088); margin: 0 4px; }
.hq2-pr-cb-total {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 14px 7px;
  border-radius: 10px;
  background: var(--ink, #141044);
  color: #fff;
  min-width: 90px;
}
.hq2-pr-cb-total .v { font-weight: 800; font-size: 13.5px; }
.hq2-pr-cb-total .t { font-size: 11px; opacity: .7; text-transform: lowercase; }
.hq2-pr-cb-stripe .hq2-pr-cb-total { background: #6254a0; }
.hq2-pr-cb-del .hq2-pr-cb-total    { background: #8a6500; }
.hq2-pr-cb-del .hq2-pr-cb-total.is-bad  { background: #a8331f; }
.hq2-pr-cb-del .hq2-pr-cb-total.is-good { background: #157d51; }
.hq2-pr-cb-sub {
  margin-top: 10px;
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
  line-height: 1.55;
}
.hq2-pr-cb-sub b { color: var(--ink, #141044); font-weight: 700; }
.hq2-pr-cb-sub code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  background: rgba(0, 0, 0, .05);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink-2, #3b3766);
}

/* Margin-board ingredient cost source badge — shows whether the
   number was computed live from linkedIngredients or stored as a
   manual override. Helps Tommy see at a glance whether his
   ingredient entries are flowing through. */
.hq2-cg-cost-src {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-ui);
  vertical-align: middle;
  background: rgba(31, 51, 96, 0.08);
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  cursor: help;
}
.hq2-cg-cost-src.is-warn {
  background: rgba(217, 162, 0, 0.18);
  color: #8a6500;
}
.hq2-cg-cost-src.is-stored {
  background: rgba(31, 51, 96, 0.04);
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   ASK PACO — natural-language assistant page
   Chat-like surface · pastel hero on top · big cat next to the
   conversation · suggestion chips below the composer.
   ════════════════════════════════════════════════════════════════════ */

.hq2-paco-hero { margin-bottom: var(--s-5); }

.hq2-paco-stage {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 24px;
  margin-bottom: var(--s-4);
  align-items: start;
}
@media (max-width: 720px){
  .hq2-paco-stage { grid-template-columns: 1fr; }
  .hq2-paco-cat { display: none; }
}
.hq2-paco-cat {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12px;
}
.hq2-paco-conv {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 16px;
  padding: 18px 20px;
  min-height: 180px;
  max-height: 60vh;
  overflow-y: auto;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 6px 18px -14px rgba(20, 16, 68, .12);
}
.hq2-paco-empty {
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  padding: 32px 16px;
  font-style: italic;
}
.hq2-paco-turn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}
.hq2-paco-turn:last-child { border-bottom: 0; }
.hq2-paco-turn-who {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-paco-turn.is-user .hq2-paco-turn-who { color: var(--tc-navy); }
.hq2-paco-turn.is-assistant .hq2-paco-turn-who { color: #8B6914; }
.hq2-paco-turn-body {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  white-space: pre-wrap;
  overflow-wrap: break-word;
}

/* Thinking dots — three dots that pulse while Paco is composing */
.hq2-paco-dots {
  display: inline-flex;
  gap: 4px;
  padding: 4px 0;
}
.hq2-paco-dots span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #8B6914;
  animation: pacoDotPulse 1.4s ease-in-out infinite;
}
.hq2-paco-dots span:nth-child(2) { animation-delay: .15s; }
.hq2-paco-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes pacoDotPulse {
  0%, 80%, 100% { opacity: .3; transform: translateY(0); }
  40%           { opacity: 1;  transform: translateY(-2px); }
}

.hq2-paco-composer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin-bottom: var(--s-4);
}
.hq2-paco-input {
  font-size: 14px !important;
  padding: 12px 14px !important;
}

.hq2-paco-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: var(--s-5);
}
.hq2-paco-suggestions-head {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-paco-suggestions-list {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-paco-suggestion {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 7px 14px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.hq2-paco-suggestion:hover {
  background: rgba(200, 169, 110, .12);
  border-color: rgba(200, 169, 110, .55);
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce){
  .hq2-paco-dots span { animation: none; }
}

/* ── Context layer · Data map ─────────────────────────────────── */
.hq2-dm-domains {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: var(--s-3) 0 var(--s-4);
}
.hq2-dm-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.hq2-dm-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-dm-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-dm-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-dm-coll {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.hq2-dm-domain-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-3);
}
.hq2-dm-domain-pill.is-gold   { color: #8a6500; background: rgba(217, 162, 0, 0.13); }
.hq2-dm-domain-pill.is-navy   { color: #1b1a6b; background: rgba(27, 26, 107, 0.10); }
.hq2-dm-domain-pill.is-green  { color: #157d51; background: rgba(32, 167, 107, 0.12); }
.hq2-dm-domain-pill.is-orange { color: #a14a1c; background: rgba(220, 100, 30, 0.12); }
.hq2-dm-domain-pill.is-purple { color: #5b3a8c; background: rgba(120, 80, 200, 0.13); }
.hq2-dm-purpose {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}
.hq2-dm-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
.hq2-dm-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hq2-dm-stat b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 16px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-dm-stat span {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
}
.hq2-dm-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-dm-block-lbl {
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-dm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hq2-dm-consumer,
.hq2-dm-trigger {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  text-decoration: none;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-3);
  border: 1px solid transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.hq2-dm-consumer:hover {
  background: rgba(200, 140, 0, 0.10);
  border-color: rgba(200, 140, 0, 0.20);
  color: #8a6500;
}
.hq2-dm-trigger {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  background: rgba(32, 167, 107, 0.08);
  color: #157d51;
}

/* ── Context layer · Integrations ─────────────────────────────── */
.hq2-int-section {
  margin-bottom: var(--s-4);
}
.hq2-int-section-head {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: var(--s-2);
}
.hq2-int-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
}
.hq2-int-tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-int-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-int-tile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-int-name {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.hq2-int-purpose {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  margin: 0;
}
.hq2-int-note {
  font-family: var(--font-ui);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-3);
  margin: 0;
  padding: 8px 10px;
  background: rgba(217, 162, 0, 0.07);
  border-left: 2px solid rgba(217, 162, 0, 0.4);
  border-radius: 6px;
}
.hq2-int-surfaces {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hq2-int-surface {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-3);
}
.hq2-int-docs {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.hq2-int-docs:hover {
  color: #8a6500;
}

/* ── Settings hub ─────────────────────────────────────────────── */
.hq2-set-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-4);
}
.hq2-set-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-set-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-set-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-set-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hq2-set-desc {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
  margin: 0;
}
.hq2-set-meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
}
.hq2-set-meta b {
  color: var(--ink);
  font-weight: 700;
  margin-right: 4px;
}
.hq2-set-meta em {
  font-style: normal;
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.hq2-set-meta code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}
.hq2-set-impact {
  padding: 8px 10px;
  background: rgba(255, 252, 244, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-set-team {
  margin-top: var(--s-5);
  padding: var(--s-4);
  background: linear-gradient(180deg, #fffaef, #fffdf6);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
}
.hq2-set-team-head {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.hq2-set-team-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.hq2-set-team-row {
  display: flex;
  gap: 12px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-3);
}
.hq2-set-team-row span {
  min-width: 80px;
}
.hq2-set-team-row b, .hq2-set-team-row code {
  color: var(--ink);
  font-weight: 600;
}
.hq2-set-team-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
}

/* ── Calendar ─────────────────────────────────────────────────── */
.hq2-cal-title {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  padding: 0 12px;
  color: var(--ink);
  min-width: 140px;
  justify-content: center;
}
.hq2-cal-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s-3) 0 var(--s-2);
}
.hq2-cal-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}
.hq2-cal-shell {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  padding: var(--s-3);
}
.hq2-cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 8px;
}
.hq2-cal-weekday {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding: 6px 0;
}
.hq2-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(100px, 1fr);
  gap: 4px;
}
.hq2-cal-cell {
  background: rgba(255, 252, 244, 0.45);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 100px;
  overflow: hidden;
}
.hq2-cal-cell.is-out {
  background: rgba(0, 0, 0, 0.02);
  opacity: 0.45;
}
.hq2-cal-cell.is-today {
  background: linear-gradient(180deg, #fff8e6, #fffdf6);
  border-color: rgba(200, 140, 0, 0.30);
}
.hq2-cal-day {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
  line-height: 1;
}
.hq2-cal-cell.is-today .hq2-cal-day {
  color: #8a6500;
  font-weight: 800;
}
.hq2-cal-event {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-decoration: none;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--cal, #999);
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: filter 0.12s ease;
}
.hq2-cal-event:hover {
  filter: brightness(1.1);
}
.hq2-cal-event-glyph {
  flex-shrink: 0;
}
.hq2-cal-event-label {
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-cal-more {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  padding-top: 2px;
}

/* ── Documents ────────────────────────────────────────────────── */
.hq2-docs-shell {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  margin-top: var(--s-4);
  overflow: hidden;
}
.hq2-docs-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-docs-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-docs-table th.ar, .hq2-docs-table td.ar {
  text-align: right;
}
.hq2-docs-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-docs-table td b {
  color: var(--ink);
  font-weight: 600;
}
.hq2-docs-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  font-weight: 700;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-3);
}
.hq2-docs-kind.is-img  { background: rgba(120, 80, 200, 0.13); color: #5b3a8c; }
.hq2-docs-kind.is-vid  { background: rgba(200, 60, 30, 0.12); color: #a8331f; }
.hq2-docs-kind.is-pdf  { background: rgba(217, 162, 0, 0.15); color: #8a6500; }
.hq2-docs-kind.is-csv  { background: rgba(32, 167, 107, 0.12); color: #157d51; }
.hq2-docs-kind.is-json { background: rgba(27, 26, 107, 0.10); color: #1b1a6b; }

/* ── Packaging ───────────────────────────────────────────────── */
.hq2-pkg-filters {
  display: flex;
  gap: 6px;
  margin: var(--s-3) 0;
  flex-wrap: wrap;
}
.hq2-pkg-shell {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
  margin-top: var(--s-2);
}
.hq2-pkg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-pkg-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-pkg-table th.ar, .hq2-pkg-table td.ar { text-align: right; }
.hq2-pkg-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-pkg-table td b { color: var(--ink); font-weight: 600; }
.hq2-pkg-desc {
  color: var(--ink-3);
  font-size: 12px;
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-pkg-stock { font-weight: 700; }
.hq2-pkg-stock.is-low { color: #a8331f; }
.hq2-pkg-stock.is-ok  { color: #157d51; }
.hq2-pkg-low-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a8331f;
  background: rgba(200, 68, 44, 0.12);
  border-radius: 999px;
}
.hq2-pkg-linked {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(32, 167, 107, 0.10);
  color: #157d51;
  font-size: 11px;
  font-weight: 600;
}

/* Row click-to-edit affordance (paired with openPackagingEditor). */
.hq2-pkg-row.is-clickable {
  cursor: pointer;
  transition: background-color 0.12s ease;
}
.hq2-pkg-row.is-clickable:hover {
  background: rgba(27, 26, 107, 0.03);
}
.hq2-pkg-row.is-clickable:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
}

/* Packaging editor modal — fields stack on narrow widths, 2-up on
   wider widths. Action row pushes delete to the left and the
   cancel/save pair to the right. */
.hq2-pkg-edit-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-pkg-edit-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.hq2-pkg-edit-grid .hq2-content-input { min-width: 0; }
@media (max-width: 520px) {
  .hq2-pkg-edit-grid { grid-template-columns: 1fr; }
}
.hq2-pkg-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.hq2-pkg-edit-actions-r {
  display: flex;
  gap: 8px;
}

/* ── Ads manager ─────────────────────────────────────────────── */
.hq2-ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  margin-top: var(--s-2);
}
.hq2-ads-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  border-left: 4px solid var(--platcolor, #6B7B7B);
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-ads-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-ads-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hq2-ads-platform {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--platcolor, #6B7B7B);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  flex-shrink: 0;
}
.hq2-ads-name {
  flex: 1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-ads-extid {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.hq2-ads-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 4px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
.hq2-ads-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.hq2-ads-stat b {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-ads-stat span {
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  color: var(--ink-3);
}

/* ── PT manage ───────────────────────────────────────────────── */
.hq2-pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  margin-top: var(--s-4);
}
@media (max-width: 880px) {
  .hq2-pt-grid { grid-template-columns: 1fr; }
}
.hq2-pt-week {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
}
.hq2-pt-day {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.02);
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-pt-day.is-on {
  background: rgba(32, 167, 107, 0.07);
  border: 1px solid rgba(32, 167, 107, 0.20);
}
.hq2-pt-day.is-off { color: var(--ink-3); }
.hq2-pt-day-name { font-weight: 700; color: var(--ink); }
.hq2-pt-day-range {
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}
.hq2-pt-day.is-off .hq2-pt-day-range { font-style: italic; opacity: 0.6; }
.hq2-pt-appt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.hq2-pt-appt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-pt-appt:last-child { border-bottom: none; }
.hq2-pt-appt-when {
  font-weight: 700;
  color: var(--ink);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.hq2-pt-appt-client { color: var(--ink); }
.hq2-pt-appt-note {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}

/* ── IT & HR Service · Directory + Onboarding ────────────────── */
.hq2-ithr-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-ithr-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-ithr-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.hq2-ithr-table td b {
  color: var(--ink);
  font-weight: 700;
}
.hq2-ithr-onboard {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hq2-ithr-onboard span {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hq2-ithr-bar {
  flex: 1;
  height: 6px;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 3px;
  overflow: hidden;
  min-width: 80px;
}
.hq2-ithr-bar-fill {
  height: 100%;
  background: #20a76b;
  transition: width 0.3s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-ithr-bar-fill.is-good  { background: #20a76b; }
.hq2-ithr-bar-fill.is-warn  { background: #d9a200; }
.hq2-ithr-bar-fill.is-stale { background: rgba(0, 0, 0, 0.12); }
.hq2-ithr-onb-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
}
.hq2-ithr-onb-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  cursor: pointer;
  font-family: var(--font-ui);
  list-style: none;
}
.hq2-ithr-onb-head::-webkit-details-marker { display: none; }
.hq2-ithr-onb-head-l { display: flex; align-items: center; gap: 10px; }
.hq2-ithr-onb-head-l b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.hq2-ithr-onb-role {
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: lowercase;
}
.hq2-ithr-onb-head-r {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
}
.hq2-ithr-onb-pct {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  min-width: 38px;
  text-align: right;
}
.hq2-ithr-onb-steps {
  padding: 4px 16px 14px 32px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-ithr-onb-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
}
.hq2-ithr-onb-step:hover {
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
}
.hq2-ithr-onb-step input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #20a76b;
  flex-shrink: 0;
}
.hq2-ithr-onb-step span { color: var(--ink); }
.hq2-ithr-onb-step input:checked + span {
  color: var(--ink-3);
  text-decoration: line-through;
}

/* ════════════════════════════════════════════════════════════════════
   SOPs MODULE — Library + runnable Checklists (Work · IT & HR)
   Self-contained card design: category pill, section headers, bulleted
   notes, numbered step badges. Runnable checklists still borrow the
   .hq2-ithr-onb-* progress bar + checkbox steps.
   ──────────────────────────────────────────────────────────────────── */

.hq2-sops-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
  margin: 0 0 var(--s-3);
}
.hq2-sops-toolbar-r { display: flex; align-items: center; gap: 8px; }

/* Section header per category group + tab section labels */
.hq2-sops-cat-head {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 22px 0 10px;
  padding-bottom: 5px;
  border-bottom: 1px solid var(--rule);
}
.hq2-sops-cat-head:first-child { margin-top: 0; }

/* ── The card ── */
.hq2-sops-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  margin-bottom: 10px;
  overflow: hidden;
  transition: box-shadow .16s ease, border-color .16s ease;
}
.hq2-sops-card[open] {
  border-color: var(--rule-strong);
  box-shadow: 0 4px 18px rgba(20, 24, 40, .07);
}
.hq2-sops-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  cursor: pointer;
  list-style: none;
}
.hq2-sops-card-head::-webkit-details-marker { display: none; }
.hq2-sops-card-head:hover { background: rgba(0, 0, 0, .015); }
.hq2-sops-card-head-main { min-width: 0; }
.hq2-sops-card-titlerow {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
}
.hq2-sops-card-title {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 650;
  color: var(--ink);
  letter-spacing: -.01em;
}
.hq2-sops-card-head-r {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.hq2-sops-chev { color: var(--ink-4); font-size: 15px; line-height: 1; transition: transform .2s ease; }
.hq2-sops-card[open] .hq2-sops-chev { transform: rotate(180deg); }

/* Category pill */
.hq2-sops-cat-pill {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.hq2-sops-cat-pill.is-navy   { background: rgba(31, 45, 74, .10);  color: #23324f; }
.hq2-sops-cat-pill.is-gold   { background: rgba(200, 162, 74, .16); color: #8a6a1e; }
.hq2-sops-cat-pill.is-orange { background: rgba(214, 122, 42, .13); color: #b35e1c; }
.hq2-sops-cat-pill.is-green  { background: rgba(32, 167, 107, .13); color: #1a7d51; }
.hq2-sops-cat-pill.is-purple { background: rgba(124, 92, 196, .14); color: #6a4bb0; }
.hq2-sops-cat-pill.is-blue   { background: rgba(52, 120, 210, .13); color: #2c67b8; }
.hq2-sops-cat-pill.is-gray   { background: rgba(0, 0, 0, .06);      color: var(--ink-3); }

.hq2-sops-summary {
  display: block;
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 5px;
  line-height: 1.45;
}
.hq2-sops-stepcount {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-4);
  white-space: nowrap;
}

/* ── Expanded body ── */
.hq2-sops-body { padding: 6px 18px 16px; border-top: 1px solid rgba(0, 0, 0, .05); }

.hq2-sops-prose { margin: 12px 0 4px; }
.hq2-sops-h {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 18px 0 8px;
}
.hq2-sops-prose > .hq2-sops-h:first-child { margin-top: 2px; }
.hq2-sops-p {
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2);
  margin: 8px 0;
}
.hq2-sops-ul {
  margin: 8px 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-sops-ul li {
  position: relative;
  padding-left: 17px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.hq2-sops-ul li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--tc-gold, #c8a24a);
}

/* Numbered checklist preview in the library */
.hq2-sops-block-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 16px 0 10px;
}
.hq2-sops-steps-wrap { margin-top: 6px; }
.hq2-sops-steps {
  list-style: none;
  counter-reset: sopstep;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.hq2-sops-steps li {
  counter-increment: sopstep;
  position: relative;
  padding-left: 30px;
  min-height: 21px;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}
.hq2-sops-steps li::before {
  content: counter(sopstep);
  position: absolute;
  left: 0;
  top: 0;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--tc-navy, #23324f);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hq2-sops-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-4);
  margin: 14px 0 2px;
}
.hq2-sops-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, .05);
}
.hq2-sops-done-tag {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: #20a76b;
  margin-right: auto;
}

/* Editor */
.hq2-sops-editor { margin-bottom: 10px; }
.hq2-sops-editor .hq2-label { margin-top: 12px; }
.hq2-sops-editor .hq2-label:first-child { margin-top: 0; }
.hq2-sops-ed-row { display: flex; gap: var(--s-3); flex-wrap: wrap; }
.hq2-sops-ed-actions { display: flex; gap: 8px; margin-top: 16px; }

.hq2-sops-start-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Runnable checklist card borrows the onboarding progress bar; give its
   title row the same pill treatment as the library card. */
.hq2-sops-run .hq2-ithr-onb-head-l { min-width: 0; }

/* ════════════════════════════════════════════════════════════════════
   RECIPES MODULE TABS — Catalog · Tier Ladders
   ──────────────────────────────────────────────────────────────────── */

.hq2-recipes-tabs {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .55);
  margin: 0 0 var(--s-3);
}
.hq2-recipes-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.hq2-recipes-tab:hover { color: #141044; }
.hq2-recipes-tab.is-active {
  background: #ffffff;
  color: #141044;
  font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 4px 12px -8px rgba(20, 16, 68, .15);
}

/* ── Tier Ladders read-only view ──────────────────────────────────── */

.hq2-lad-readonly {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.hq2-lad-source {
  margin: 0 0 var(--s-4);
  padding: 10px 14px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-lad-source code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}

.hq2-lad-group { margin-bottom: var(--s-5); }
.hq2-lad-group-head { margin: 0 0 var(--s-3); }
.hq2-lad-group-title {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.hq2-lad-group-sub {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
}

/* ── Ladder table ────────────────────────────────────────────────────
   Each ladder is a row with three rigid columns:
     1. ID + label  (220px) — eye scans down a single column for "what's
        the sweets ladder?"
     2. Tier strip (1fr)    — labels joined by chevrons so the smallest →
        largest progression is visually obvious
     3. Product count (90px, right-aligned) — numerical column lines up
   The note (reference ladders only) spans the full row width below.
   ──────────────────────────────────────────────────────────────────── */

.hq2-lad-table {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
}

.hq2-lad-thead,
.hq2-lad-row {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 90px;
  align-items: center;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-lad-row:last-child { border-bottom: 0; }

.hq2-lad-thead {
  background: rgba(0, 0, 0, 0.02);
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-lad-th {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-lad-th-r { text-align: right; }

.hq2-lad-row {
  position: relative;
  transition: background 0.12s ease;
}
.hq2-lad-row:hover { background: rgba(0, 0, 0, 0.02); }
.hq2-lad-row.is-ref { background: rgba(0, 0, 0, 0.015); }
.hq2-lad-row.is-ref:hover { background: rgba(0, 0, 0, 0.03); }

/* Column 1 — id + label */
.hq2-lad-cell-id {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-lad-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-lad-label {
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.3;
}

/* Column 2 — tier strip with chevron arrows */
.hq2-lad-strip {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 6px;
}
.hq2-lad-step {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 99px;
  font-size: 12px;
  white-space: nowrap;
}
.hq2-lad-row.is-ref .hq2-lad-step {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.06);
}
.hq2-lad-step-label {
  font-weight: 700;
  color: var(--ink);
}
.hq2-lad-step-qty {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 600;
}
.hq2-lad-arrow {
  flex-shrink: 0;
  color: var(--ink-3);
  opacity: 0.7;
}

/* Column 3 — product count, right-aligned numerical column */
.hq2-lad-cell-count {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hq2-lad-count-n {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.hq2-lad-cell-count.is-empty .hq2-lad-count-n { color: var(--ink-3); opacity: 0.5; }
.hq2-lad-count-l {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}

/* Reference-only note — full-width row beneath the columns */
.hq2-lad-row-note {
  grid-column: 1 / -1;
  margin-top: 6px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 8px;
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}

/* ── Field service · Sub-tabs + Cold Chain ───────────────────── */
.hq2-fs-hero-with-tabs {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-fs-subnav {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-cc-entry {
  margin-top: var(--s-2);
}
.hq2-cc-entry-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 2fr auto;
  gap: 12px;
  padding: 16px;
  align-items: end;
}
@media (max-width: 880px) {
  .hq2-cc-entry-form {
    grid-template-columns: 1fr 1fr;
  }
  .hq2-cc-entry-form button {
    grid-column: 1 / -1;
  }
}
.hq2-cc-entry-form button {
  height: 38px;
  white-space: nowrap;
}
.hq2-cc-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: var(--s-3) 0;
  align-items: center;
}
/* Sortable headers on the margin board — clickable, with an arrow on
   the active column. */
.hq2-cg-sort-h {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.hq2-cg-sort-h:hover { color: var(--ink); }
.hq2-cg-sort-h.is-active { color: var(--ink); }
.hq2-cg-sort-arrow {
  display: inline-block;
  margin-left: 2px;
  font-size: 10px;
  color: var(--brand, #c46a1a);
}
/* Filterable header — label clickable for sort, chevron button next to
   it opens a popover menu with the filter options. */
.hq2-cg-filterable {
  position: relative;
  white-space: nowrap;
}
.hq2-cg-th-label { cursor: pointer; }
.hq2-cg-filter-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: #fff5dc;
  color: #8a6500;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: middle;
}
.hq2-cg-filter-btn {
  margin-left: 4px;
  padding: 6px 8px;       /* ≥44px tap area when combined with header line-height */
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  font-size: 13px;
  color: var(--ink-3);
  cursor: pointer;
  vertical-align: middle;
  line-height: 1;
  -webkit-tap-highlight-color: rgba(196,106,26,0.2);
  touch-action: manipulation;  /* removes the 300ms tap delay on iOS */
}
.hq2-cg-filter-btn:hover {
  background: rgba(0,0,0,0.05);
  color: var(--ink);
}
.hq2-cg-filter-btn.is-on {
  color: var(--brand, #c46a1a);
  border-color: rgba(196,106,26,0.35);
  background: rgba(196,106,26,0.08);
}
/* Filter menu is fixed-positioned so it escapes .hq2-fi-card's
   overflow:hidden clipping and any horizontal table scroll. JS sets
   top/left from the chevron's getBoundingClientRect() when opening. */
.hq2-cg-filter-menu {
  position: fixed;
  z-index: 1000;
  min-width: 200px;
  max-width: calc(100vw - 16px);
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--border, #ece6da);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.hq2-cg-filter-menu[hidden] { display: none; }
.hq2-cg-filter-item {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  align-items: center;
  width: 100%;
  gap: 8px;
  padding: 6px 8px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.hq2-cg-filter-item:hover { background: rgba(0,0,0,0.05); }
.hq2-cg-filter-item.is-active { background: #fff5dc; color: #8a6500; font-weight: 700; }
.hq2-cg-filter-item.is-disabled { opacity: 0.4; cursor: not-allowed; }
.hq2-cg-filter-item-check { color: var(--brand, #c46a1a); font-weight: 700; }
.hq2-cg-filter-item-lbl { white-space: nowrap; }
.hq2-cg-filter-item-n {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
/* Separates the sort options (top) from the filter options (bottom)
   inside a column's dropdown menu. */
.hq2-cg-filter-divider {
  height: 1px;
  margin: 4px 6px;
  background: var(--border, #ece6da);
}
/* Let header cells overflow so the dropdown isn't clipped. */
.hq2-cg-table thead th { overflow: visible; }
.hq2-cc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-cc-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-cc-table th.ar, .hq2-cc-table td.ar { text-align: right; }
.hq2-cc-table td {
  padding: 10px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.hq2-cc-temp { font-weight: 800; font-variant-numeric: tabular-nums; }
.hq2-cc-temp.is-good  { color: #157d51; }
.hq2-cc-temp.is-warn  { color: #8a6500; }
.hq2-cc-temp.is-bad   { color: #a8331f; }
.hq2-cc-temp.is-stale { color: var(--ink-3); }
.hq2-cc-notes {
  color: var(--ink-3);
  font-size: 12px;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive — collapse Tier Ladders rows on narrow widths. The product
   count drops below the tier strip; the id column stays on the left. */
@media (max-width: 880px){
  .hq2-lad-thead { display: none; }
  .hq2-lad-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 14px 16px;
  }
  .hq2-lad-cell-count {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    margin-top: -4px;
  }
  .hq2-lad-count-l { margin-top: 0; }
}

/* ── Sales · 90-day forecast ─────────────────────────────────── */
.hq2-fc-chart-wrap {
  padding: 12px 16px 0;
  width: 100%;
}
.hq2-fc-chart {
  width: 100%;
  height: 280px;
  display: block;
}
.hq2-fc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  padding: 12px 16px 16px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  align-items: center;
}
.hq2-fc-legend-swatch {
  display: inline-block;
  width: 14px;
  height: 3px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
.hq2-fc-legend-swatch.is-hist { background: #1B1A6B; }
.hq2-fc-legend-swatch.is-proj {
  background: linear-gradient(to right, #8a6500 50%, transparent 50%);
  background-size: 6px 3px;
}
.hq2-fc-legend-swatch.is-band {
  background: rgba(200, 140, 0, 0.20);
  height: 8px;
  border-radius: 3px;
}
.hq2-fc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  padding: 16px;
  align-items: end;
  height: 160px;
}
.hq2-fc-wd {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  height: 100%;
  justify-content: flex-end;
}
.hq2-fc-wd-bar {
  width: 100%;
  background: linear-gradient(180deg, #c8a96e, #1B1A6B);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-fc-wd-lbl {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}
.hq2-fc-wd-val {
  font-family: var(--font-ui);
  font-size: 10px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-fc-wd-foot {
  padding: 0 16px 16px;
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}

/* ── Manufacturing · Production schedule ─────────────────────── */
.hq2-mfg-subnav {
  margin-top: var(--s-3);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: var(--s-3);
}
.hq2-prod-stations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--s-3);
  padding: 16px;
}
.hq2-prod-station {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  background: rgba(255, 252, 244, 0.7);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}
.hq2-prod-station-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.hq2-prod-station-name {
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.hq2-prod-station-total {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-prod-station-total b {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hq2-prod-station-bar {
  height: 6px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 3px;
  overflow: hidden;
}
.hq2-prod-station-fill {
  height: 100%;
  background: linear-gradient(90deg, #c8a96e, #1B1A6B);
  transition: width 0.4s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-prod-station-hint {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-prod-station-recipes {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}
.hq2-prod-station-recipe {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
}
.hq2-prod-station-recipe b {
  font-variant-numeric: tabular-nums;
  color: #8a6500;
  margin-left: 3px;
}
.hq2-prod-station-recipe.is-more {
  background: rgba(0, 0, 0, 0.02);
  color: var(--ink-3);
  font-style: italic;
}

/* Recipe table */
.hq2-prod-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-prod-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-prod-table th.ar, .hq2-prod-table td.ar { text-align: right; }
.hq2-prod-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-prod-table td b { color: var(--ink); font-weight: 700; }
.hq2-prod-day-th {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
}
.hq2-prod-day-num {
  font-size: 9px;
  font-weight: 600;
  color: var(--ink-3);
  text-transform: lowercase;
}
.hq2-prod-zero {
  color: rgba(0, 0, 0, 0.18);
}
.hq2-prod-total-row td {
  border-top: 2px solid rgba(0, 0, 0, 0.10);
  border-bottom: none;
  background: rgba(255, 252, 244, 0.6);
  padding-top: 12px;
}
.hq2-prod-peak {
  color: #8a6500;
  background: rgba(217, 162, 0, 0.12);
  padding: 2px 6px;
  border-radius: 6px;
}

/* ════════════════════════════════════════════════════════════════════
   COMMUNICATIONS HUB — Inbox · Templates · Compose · Analytics
   ──────────────────────────────────────────────────────────────────── */

.hq2-co-shell { display: block; }

/* ── Templates tab ──────────────────────────────────────────────────── */
.hq2-co-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-3);
}
.hq2-co-tpl-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-co-tpl-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-co-tpl-head { display: flex; align-items: center; gap: 12px; }
.hq2-co-tpl-emoji { font-size: 22px; flex-shrink: 0; }
.hq2-co-tpl-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-co-tpl-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-co-tpl-key {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
.hq2-co-tpl-blurb { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.hq2-co-tpl-vars { font-size: 11px; color: var(--ink-3); }
.hq2-co-tpl-vars code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 5px;
  border-radius: 4px;
  margin-right: 4px;
  color: var(--ink-2);
}
.hq2-co-tpl-actions { display: flex; gap: 8px; margin-top: 4px; }
.hq2-co-tpl-actions .hq2-btn { font-size: 12px; }
.hq2-co-tpl-preview {
  margin-top: 4px;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-co-tpl-pv-loading,
.hq2-co-tpl-pv-err {
  padding: 20px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-co-tpl-pv-err { color: #a8331f; }
.hq2-co-tpl-pv-frame { width: 100%; height: 360px; border: 0; display: block; }

/* ── Compose tab ────────────────────────────────────────────────────── */
.hq2-co-compose {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 480px);
  gap: var(--s-4);
  align-items: start;
}
@media (max-width: 1080px){ .hq2-co-compose { grid-template-columns: 1fr; } }

.hq2-co-compose-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: 22px 24px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
}
.hq2-co-cz-section { display: flex; flex-direction: column; gap: 6px; }
.hq2-co-cz-section[hidden] { display: none; }
.hq2-co-cz-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-co-cz-sublbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--ink-3);
  opacity: 0.8;
  margin-left: 6px;
}
.hq2-co-cz-hint {
  font-size: 12px;
  color: var(--ink-2);
  background: rgba(200, 169, 110, 0.10);
  border: 1px solid rgba(200, 169, 110, 0.35);
  padding: 8px 12px;
  border-radius: 8px;
}
.hq2-co-cz-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}
.hq2-co-cz-body { resize: vertical; min-height: 120px; font-family: var(--font-ui); line-height: 1.5; }

.hq2-co-aud-grid { display: flex; flex-direction: column; gap: 12px; }
.hq2-co-aud-group { display: flex; flex-direction: column; gap: 4px; }
.hq2-co-aud-group-head {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.hq2-co-aud-check {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.hq2-co-aud-check:hover { background: rgba(0, 0, 0, 0.04); }
.hq2-co-aud-check input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; cursor: pointer; }
.hq2-co-aud-label { flex: 1; color: var(--ink); font-weight: 600; }
.hq2-co-aud-count {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.hq2-co-cz-single {
  padding: 12px 14px;
  background: #FAF8F3;
  border: 1px dashed rgba(200, 169, 110, 0.45);
  border-radius: 10px;
}
.hq2-co-cz-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  flex-wrap: wrap;
}
.hq2-co-cz-recip { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.hq2-co-cz-recip.is-warn { color: #8a6500; }
/* Email pre-send confirm — the send button after a preview snapshot. */
.hq2-btn.is-confirm { background: var(--success, #2E8657); border-color: var(--success, #2E8657); color: #fff; }
.hq2-btn.is-confirm:hover { filter: brightness(1.05); }

.hq2-co-cz-preview {
  position: sticky;
  top: 16px;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 16px;
  overflow: hidden;
  max-height: calc(100vh - 100px);
}
.hq2-co-cz-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: rgba(0, 0, 0, 0.02);
}
.hq2-co-cz-preview-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-co-cz-preview-meta {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
}
.hq2-co-cz-preview-body { flex: 1; min-height: 380px; overflow: auto; }
.hq2-co-cz-pv-empty,
.hq2-co-cz-pv-loading,
.hq2-co-cz-pv-err { padding: 40px 24px; text-align: center; font-size: 12px; color: var(--ink-3); }
.hq2-co-cz-pv-err { color: #a8331f; }
.hq2-co-cz-pv-frame { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* ── Analytics tab ──────────────────────────────────────────────────── */
.hq2-co-an-kpis {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin-bottom: var(--s-4);
}
@media (max-width: 1080px){ .hq2-co-an-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hq2-co-an-kpis { grid-template-columns: repeat(2, 1fr); } }
.hq2-co-an-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}
.hq2-co-an-kpi-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-co-an-kpi-val {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-co-an-kpi-meta {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0.02em;
}

.hq2-co-an-blasts {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
.hq2-co-an-blasts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: rgba(0, 0, 0, 0.02);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-co-an-blasts-head h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-co-an-blasts-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-co-an-blasts-list { display: flex; flex-direction: column; }
.hq2-co-an-blast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.12s ease;
}
.hq2-co-an-blast:last-child { border-bottom: 0; }
.hq2-co-an-blast:hover { background: rgba(0, 0, 0, 0.02); }
.hq2-co-an-blast-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq2-co-an-blast-tpl code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink);
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
}
.hq2-co-an-blast-subj {
  font-size: 13px;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-co-an-blast-aud { font-size: 11px; color: var(--ink-3); }
.hq2-co-an-blast-r { display: flex; flex-direction: column; align-items: flex-end; gap: 0; flex-shrink: 0; }
.hq2-co-an-blast-cnt {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-co-an-blast-when { font-size: 10px; color: var(--ink-3); margin-top: 4px; }

/* ── Contact center · Macros ─────────────────────────────────── */
.hq2-cc-roadmap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
}
.hq2-cc-roadmap-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.hq2-cc-roadmap-tag {
  flex-shrink: 0;
  width: 64px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  text-align: center;
}
.hq2-cc-roadmap-row.is-live    .hq2-cc-roadmap-tag { background: rgba(32, 167, 107, 0.15); color: #157d51; }
.hq2-cc-roadmap-row.is-next    .hq2-cc-roadmap-tag { background: rgba(217, 162, 0, 0.15);  color: #8a6500; }
.hq2-cc-roadmap-row.is-horizon .hq2-cc-roadmap-tag { background: rgba(0, 0, 0, 0.06);      color: var(--ink-3); }
.hq2-cc-roadmap-row ul {
  margin: 0;
  padding-left: 18px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2, var(--ink));
}
.hq2-cc-roadmap-row ul li { margin-bottom: 2px; }

.hq2-mac-cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: var(--s-3) 0;
}
.hq2-mac-shell { margin-top: var(--s-2); }
.hq2-mac-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-3);
}
.hq2-mac-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-mac-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-mac-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-mac-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-mac-shortcut code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(27, 26, 107, 0.06);
  color: #1b1a6b;
  padding: 2px 8px;
  border-radius: 6px;
}
.hq2-mac-body {
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.02);
  padding: 10px 12px;
  border-radius: 8px;
  max-height: 80px;
  overflow: hidden;
  position: relative;
  white-space: pre-wrap;
}
.hq2-mac-var {
  display: inline-block;
  background: rgba(217, 162, 0, 0.18);
  color: #8a6500;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  padding: 0 4px;
  border-radius: 4px;
}
.hq2-mac-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-mac-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
}
.hq2-mac-actions {
  display: flex;
  gap: 4px;
}
.hq2-mac-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .hq2-mac-row { grid-template-columns: 1fr; }
}
.hq2-mac-body-edit {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Customer service · SLA queue ───────────────────────────── */
.hq2-sla-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-sla-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-sla-table th.ar, .hq2-sla-table td.ar { text-align: right; }
.hq2-sla-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.hq2-sla-table td b {
  color: var(--ink);
  font-weight: 700;
}
.hq2-sla-row {
  transition: background 0.12s ease;
}
.hq2-sla-row:hover {
  background: rgba(0, 0, 0, 0.015);
}
.hq2-sla-row.hq2-sla-bucket-near {
  background: rgba(217, 162, 0, 0.04);
}
.hq2-sla-row.hq2-sla-bucket-near:hover {
  background: rgba(217, 162, 0, 0.08);
}
.hq2-sla-row.hq2-sla-bucket-breach {
  background: rgba(200, 68, 44, 0.05);
  position: relative;
}
.hq2-sla-row.hq2-sla-bucket-breach::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: #c8442c;
}
.hq2-sla-row.hq2-sla-bucket-breach:hover {
  background: rgba(200, 68, 44, 0.10);
}
.hq2-sla-subj {
  color: var(--ink-2, var(--ink));
  font-size: 12px;
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-sla-remaining {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hq2-sla-remaining.is-good { color: #157d51; background: rgba(32, 167, 107, 0.10); }
.hq2-sla-remaining.is-warn { color: #8a6500; background: rgba(217, 162, 0, 0.13); }
.hq2-sla-remaining.is-bad  { color: #a8331f; background: rgba(200, 68, 44, 0.13); }

/* ── Marketing · Campaign calendar ───────────────────────────── */
.hq2-mkt-cal {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.hq2-mkt-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}
.hq2-mkt-cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}
.hq2-mkt-cal-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════════════════════
   PIPELINE DETAIL DRAWER — slide-in from right with inline edit form
   ──────────────────────────────────────────────────────────────────── */

.hq2-pl-drawer-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 16, 68, 0.32);
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 49;
  pointer-events: none;
}
.hq2-pl-drawer-scrim.is-open {
  opacity: 1;
  pointer-events: auto;
}

.hq2-pl-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(540px, 100vw);
  background: #ffffff;
  border-left: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: -8px 0 32px -16px rgba(20, 16, 68, 0.18);
  z-index: 50;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-pl-drawer.is-open { transform: translateX(0); }

.hq2-pl-dr-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background:
    radial-gradient(420px 220px at 100% 0%, rgba(255, 230, 220, .65), transparent 60%),
    radial-gradient(380px 200px at 0% 0%,  rgba(237, 230, 255, .55), transparent 65%),
    #ffffff;
  flex-shrink: 0;
}
.hq2-pl-dr-head-l { min-width: 0; }
.hq2-pl-dr-eyebrow {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 4px;
}
.hq2-pl-dr-name {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 800;
  color: #141044;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.hq2-pl-dr-co {
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-3);
}
.hq2-pl-dr-close {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.hq2-pl-dr-close:hover {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.16);
  color: var(--ink);
}

.hq2-pl-dr-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Sections must never squish when the window is short — the body scrolls
   instead. Without this, the contact strip (the one overflow:hidden child)
   absorbs ALL the compression and clips its email/phone text. */
.hq2-pl-dr-body > * { flex-shrink: 0; }

.hq2-pl-dr-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  overflow: hidden;
}
.hq2-pl-dr-contact-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: #ffffff;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s ease;
}
.hq2-pl-dr-contact-row:hover { background: #fafafb; }
.hq2-pl-dr-contact-empty:hover { background: #ffffff; cursor: default; }
.hq2-pl-dr-contact-row span {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-pl-dr-contact-row b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hq2-pl-dr-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-pl-dr-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-pl-dr-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 480px){ .hq2-pl-dr-grid2 { grid-template-columns: 1fr; } }

.hq2-pl-dr-stage {
  font-weight: 700;
  border-left: 3px solid transparent;
}
.hq2-pl-dr-stage.pl-tone-warn { border-left-color: var(--warning); }
.hq2-pl-dr-stage.pl-tone-info { border-left-color: var(--info); }
.hq2-pl-dr-stage.pl-tone-sub  { border-left-color: #5B21B6; }
.hq2-pl-dr-stage.pl-tone-ok   { border-left-color: var(--success); }
.hq2-pl-dr-stage.pl-tone-mute { border-left-color: var(--ink-3); }
.hq2-pl-dr-stage.pl-tone-bad  { border-left-color: var(--danger); }

.hq2-pl-dr-hint {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-pl-dr-hint b { font-weight: 700; color: var(--ink-2); font-style: normal; }

.hq2-pl-dr-notes {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-ui);
  line-height: 1.5;
}

.hq2-pl-dr-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafb;
  flex-shrink: 0;
}
.hq2-pl-dr-foot-meta {
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-pl-dr-foot-r { display: flex; gap: 8px; }

/* ── Commerce · Promos + Coupons ─────────────────────────────── */
.hq2-com-quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 720px) {
  .hq2-com-quick { grid-template-columns: 1fr; }
}
.hq2-com-quick-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: rgba(255, 252, 244, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-com-quick-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-com-quick-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, #c8a96e, #f0ddb3);
  color: #fff;
  display: grid;
  place-items: center;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 20px;
  flex-shrink: 0;
}
.hq2-com-quick-card b {
  display: block;
  font-family: var(--font-ui);
  font-weight: 700;
  color: var(--ink);
}
.hq2-com-quick-card span {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}

.hq2-com-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-com-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-com-table th.ar, .hq2-com-table td.ar { text-align: right; }
.hq2-com-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.hq2-com-table td b { color: var(--ink); font-weight: 700; }
.hq2-com-window {
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-com-window span { display: inline; }
.hq2-com-code {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.04em;
  background: rgba(27, 26, 107, 0.06);
  color: #1b1a6b;
  padding: 4px 10px;
  border-radius: 6px;
}

/* ── Commerce · TandoCoin Rewards editor ─────────────────────── */
.hq2-rwd-version {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding: 6px 10px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--cream);
}
.hq2-rwd-rows {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq2-rwd-row {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
}
.hq2-rwd-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hq2-rwd-field-wide { grid-column: 1 / -1; }
.hq2-rwd-lbl {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.hq2-rwd-id { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.hq2-rwd-pair {
  display: flex;
  gap: 8px;
}
.hq2-rwd-pair > input:first-child { flex: 1; }
.hq2-rwd-pair > input:last-child { width: 110px; }
.hq2-rwd-foot {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--rule);
}
.hq2-rwd-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--tc-navy);
  cursor: pointer;
}
.hq2-rwd-foot .hq2-btn { margin-left: auto; }
.hq2-rwd-statusbar {
  display: flex;
  justify-content: flex-end;
  padding-top: 14px;
}
.hq2-rwd-status {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-rwd-status.is-good { color: var(--leaf); }
.hq2-rwd-status.is-bad  { color: var(--danger); }
@media (max-width: 560px){
  .hq2-rwd-row { grid-template-columns: 1fr; padding: 14px; }
}

/* ── Consumer goods · Margin board ───────────────────────────── */
.hq2-cg-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-cg-table th {
  padding: 10px 14px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-cg-table th.ar, .hq2-cg-table td.ar { text-align: right; }
.hq2-cg-table td {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.hq2-cg-table td b { color: var(--ink); font-weight: 700; }
.hq2-cg-foot-note {
  margin-top: var(--s-3);
  padding: 12px 14px;
  background: rgba(255, 252, 244, 0.55);
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.55;
}
.hq2-cg-foot-note code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* ── Financial services · Cash flow ──────────────────────────── */
.hq2-cf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
  margin-top: var(--s-3);
}
@media (max-width: 880px) {
  .hq2-cf-row { grid-template-columns: 1fr; }
}
.hq2-cf-month-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-cf-month-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-cf-month-table th.ar, .hq2-cf-month-table td.ar { text-align: right; }
.hq2-cf-month-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.hq2-cf-month-table td b { color: var(--ink); font-weight: 700; }
.hq2-cf-net.is-good { color: #157d51; }
.hq2-cf-net.is-bad  { color: #a8331f; }

/* ── Revenue Management · Churn save queue ───────────────────── */
.hq2-csav-filter-group {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hq2-csav-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.hq2-csav-row:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.hq2-csav-row-l {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-csav-row-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-csav-row-name b {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hq2-csav-row-email {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
  text-decoration: none;
}
.hq2-csav-row-email:hover { color: var(--ink); text-decoration: underline; }
.hq2-csav-row-signals {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-csav-row-signals span b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-right: 3px;
}
.hq2-csav-row-c {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  min-width: 160px;
}
.hq2-csav-churn-badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px;
  border-radius: 12px;
  font-family: var(--font-ui);
  background: rgba(0, 0, 0, 0.04);
}
.hq2-csav-churn-badge b {
  font-weight: 800;
  font-size: 18px;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-csav-churn-badge span {
  font-size: 9px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 2px;
}
.hq2-csav-churn-badge.is-good { background: rgba(32, 167, 107, 0.10); }
.hq2-csav-churn-badge.is-good b { color: #157d51; }
.hq2-csav-churn-badge.is-warn { background: rgba(217, 162, 0, 0.13); }
.hq2-csav-churn-badge.is-warn b { color: #8a6500; }
.hq2-csav-churn-badge.is-bad  { background: rgba(200, 68, 44, 0.13); }
.hq2-csav-churn-badge.is-bad b  { color: #a8331f; }
.hq2-csav-attempt-meta {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-csav-row-r {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.hq2-csav-modal-cust {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  padding: 10px 14px;
  background: rgba(255, 252, 244, 0.6);
  border-radius: 8px;
  margin-bottom: 12px;
}

/* ── Comms · Template library ────────────────────────────────── */
.hq2-ct-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: box-shadow 0.18s ease;
}
.hq2-ct-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04); }
.hq2-ct-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hq2-ct-card-head-l {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-ct-card-head-l b {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hq2-ct-card-head-r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hq2-ct-event {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 8px;
  border-radius: 6px;
}
.hq2-ct-subject {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink);
  padding: 8px 12px;
  background: rgba(255, 252, 244, 0.55);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 6px;
}
.hq2-ct-subject span {
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 8px;
}
.hq2-ct-body {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.02);
  padding: 10px 12px;
  border-radius: 6px;
  white-space: pre-wrap;
  max-height: 70px;
  overflow: hidden;
}
.hq2-ct-foot {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════════
   WORKFLOWS — engine + KPI strip + templates grid + installed list
   ──────────────────────────────────────────────────────────────────── */

/* ── Engine state chip in the hero (live indicator) ─────────────── */
.hq2-wf-engine-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.05);
  color: var(--ink-2);
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-wf-engine-chip.is-on {
  background: rgba(32, 167, 107, 0.12);
  color: #157d51;
  border-color: rgba(32, 167, 107, 0.30);
}
.hq2-wf-engine-chip.is-off {
  background: rgba(200, 68, 44, 0.10);
  color: #a8331f;
  border-color: rgba(200, 68, 44, 0.25);
}
.hq2-wf-engine-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.hq2-wf-engine-chip.is-on .hq2-wf-engine-dot {
  animation: hq2-wf-pulse 2s ease-out infinite;
}
@keyframes hq2-wf-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(32, 167, 107, 0.45); }
  70%  { box-shadow: 0 0 0 6px rgba(32, 167, 107, 0); }
  100% { box-shadow: 0 0 0 0 rgba(32, 167, 107, 0); }
}

/* ── KPI strip ───────────────────────────────────────────────────── */
.hq2-wf-kpis {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin-bottom: var(--s-4);
}
@media (max-width: 1080px){ .hq2-wf-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .hq2-wf-kpis { grid-template-columns: repeat(2, 1fr); } }
.hq2-wf-kpi {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
}
.hq2-wf-kpi-lbl {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-wf-kpi-val {
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-wf-kpi.is-danger.is-active {
  border-color: rgba(200, 68, 44, 0.35);
  background: rgba(200, 68, 44, 0.04);
}
.hq2-wf-kpi.is-danger.is-active .hq2-wf-kpi-val { color: #a8331f; }

/* ── Engine action card (separate from chip — high-stakes toggle) ─ */
.hq2-wf-engine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}
.hq2-wf-engine.is-on  { border-left: 4px solid #20A76B; }
.hq2-wf-engine.is-off { border-left: 4px solid rgba(0, 0, 0, 0.12); }
.hq2-wf-engine-skel {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-wf-engine-state {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
  min-width: 240px;
}
.hq2-wf-engine .hq2-wf-engine-dot { width: 10px; height: 10px; }
.hq2-wf-engine.is-on  .hq2-wf-engine-dot { background: #20A76B; }
.hq2-wf-engine.is-off .hq2-wf-engine-dot { background: rgba(0, 0, 0, 0.25); }
.hq2-wf-engine-text { display: flex; flex-direction: column; gap: 2px; }
.hq2-wf-engine-text b {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-wf-engine-text span { font-size: 12px; color: var(--ink-3); }

/* ── Section wrappers (Templates, Installed) ─────────────────────── */
.hq2-wf-section { margin-bottom: var(--s-5); }
.hq2-wf-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: var(--s-3);
}
.hq2-wf-section-head h3 {
  margin: 0 0 2px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-wf-section-head p { margin: 0; font-size: 12px; color: var(--ink-3); }

.hq2-wf-empty {
  padding: 28px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  background: #ffffff;
  border: 1px dashed rgba(0, 0, 0, 0.10);
  border-radius: 12px;
}

/* ── Templates grid ──────────────────────────────────────────────── */
.hq2-wf-tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--s-3);
}
.hq2-wf-tpl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 20px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-wf-tpl:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-wf-tpl.is-installed { background: #fafafb; }
.hq2-wf-tpl-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}
.hq2-wf-tpl-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hq2-wf-tpl-name {
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-wf-tpl-trigger {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  align-self: flex-start;
}
.hq2-wf-tpl-pill {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 99px;
  color: #157d51;
  background: rgba(32, 167, 107, 0.12);
  flex-shrink: 0;
}
.hq2-wf-tpl-desc { margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.hq2-wf-tpl-meta { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.hq2-wf-tpl-actions { margin-top: 4px; }
.hq2-wf-tpl-actions .hq2-btn { font-size: 12px; }

/* ── Installed workflow rows ─────────────────────────────────────── */
.hq2-wf-list {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 14px;
  overflow: hidden;
}
.hq2-wf-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 20px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.12s ease;
}
.hq2-wf-row:last-child { border-bottom: 0; }
.hq2-wf-row:hover { background: rgba(0, 0, 0, 0.015); }
.hq2-wf-row.is-active {
  border-left: 3px solid #20A76B;
  padding-left: 17px;
}
@media (max-width: 880px){
  .hq2-wf-row { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}

.hq2-wf-row-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hq2-wf-row-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.hq2-wf-row-head b {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.hq2-wf-row-trigger {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}
.hq2-wf-row-desc { margin: 0; font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.hq2-wf-row-steps {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3);
}
.hq2-wf-row-glyphs { display: inline-flex; align-items: center; gap: 4px; }
.hq2-wf-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px; height: 20px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.05);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}
.hq2-wf-row-stepcount { font-size: 11px; color: var(--ink-3); }

.hq2-wf-row-stats { display: flex; gap: 16px; flex-shrink: 0; }
.hq2-wf-stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  min-width: 56px;
}
.hq2-wf-stat b {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 800;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.02em;
}
.hq2-wf-stat span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 4px;
}
.hq2-wf-stat.is-danger b { color: #a8331f; }

/* ── Active toggle (true switch — replaces the legacy text pill) ─── */
.hq2-wf-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 6px 8px;
  cursor: pointer;
  font-family: inherit;
  border-radius: 8px;
  transition: background 0.12s ease;
}
.hq2-wf-toggle:hover { background: rgba(0, 0, 0, 0.04); }
.hq2-wf-toggle:disabled { opacity: 0.5; cursor: wait; }
.hq2-wf-toggle-track {
  position: relative;
  width: 32px; height: 18px;
  border-radius: 99px;
  background: rgba(0, 0, 0, 0.18);
  transition: background 0.18s ease;
  flex-shrink: 0;
}
.hq2-wf-toggle-knob {
  position: absolute;
  top: 2px; left: 2px;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: left 0.18s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-wf-toggle.is-on .hq2-wf-toggle-track { background: #20A76B; }
.hq2-wf-toggle.is-on .hq2-wf-toggle-knob  { left: 16px; }
.hq2-wf-toggle-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-wf-toggle.is-on .hq2-wf-toggle-label { color: #157d51; }

/* ── Platform · Integration health board ────────────────────── */
.hq2-phb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s-3);
  padding: 16px;
}
.hq2-phb-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
}
.hq2-phb-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
}
.hq2-phb-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hq2-phb-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.18);
  flex-shrink: 0;
}
.hq2-phb-dot.is-good { background: #20a76b; box-shadow: 0 0 0 3px rgba(32, 167, 107, 0.18); }
.hq2-phb-dot.is-warn { background: #d9a200; box-shadow: 0 0 0 3px rgba(217, 162, 0, 0.18); }
.hq2-phb-dot.is-bad  { background: #c8442c; box-shadow: 0 0 0 3px rgba(200, 68, 44, 0.18); }
.hq2-phb-name {
  flex: 1;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hq2-phb-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}
.hq2-phb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.hq2-phb-row-lbl {
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
.hq2-phb-row b {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hq2-phb-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.04);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--ink-3);
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-phb-error {
  font-size: 11px;
  color: #a8331f;
  padding: 6px 8px;
  background: rgba(200, 68, 44, 0.08);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.hq2-phb-foot {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  padding-top: 8px;
}

/* ── Media · Brand kit ────────────────────────────────────────── */
.hq2-bk-lockup {
  text-align: center;
  margin-bottom: 16px;
}
.hq2-bk-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(48px, 6vw, 72px);
  letter-spacing: -0.025em;
  color: var(--tc-navy);
  line-height: 1;
}
.hq2-bk-mark-sub {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: italic;
  font-size: clamp(20px, 2.5vw, 28px);
  letter-spacing: 0.02em;
  color: var(--tc-gold-dark);
  margin-top: 4px;
}
.hq2-bk-rule {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  max-width: 560px;
  margin: 16px auto 0;
  line-height: 1.55;
  font-style: italic;
}
.hq2-bk-rule code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  font-style: normal;
}

.hq2-bk-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
}
.hq2-bk-swatch {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 0;
  cursor: pointer;
  transition: transform 0.18s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.18s ease;
  overflow: hidden;
  text-align: left;
}
.hq2-bk-swatch:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.hq2-bk-swatch-chip {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-bk-swatch-meta {
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-bk-swatch-meta b {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  color: var(--ink);
}
.hq2-bk-swatch-hex code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-bk-swatch-use {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

.hq2-bk-type-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-bk-type {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: rgba(255, 252, 244, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  flex-wrap: wrap;
}
.hq2-bk-type-sample {
  font-size: 32px;
  font-weight: 700;
  color: var(--ink);
  flex-shrink: 0;
  min-width: 200px;
}
.hq2-bk-type-meta {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-bk-type-meta b {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hq2-bk-type-meta span {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
}

.hq2-bk-voice-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-bk-voice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 720px) {
  .hq2-bk-voice-row { grid-template-columns: 1fr; }
}
.hq2-bk-voice-cell {
  padding: 12px 14px;
  border-radius: 10px;
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-bk-voice-do   { background: rgba(32, 167, 107, 0.06); border: 1px solid rgba(32, 167, 107, 0.18); }
.hq2-bk-voice-dont { background: rgba(200, 68, 44, 0.05);  border: 1px solid rgba(200, 68, 44, 0.18); }
.hq2-bk-voice-tag {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 999px;
  align-self: flex-start;
}
.hq2-bk-voice-tag.is-do   { background: #20a76b; color: #fff; }
.hq2-bk-voice-tag.is-dont { background: #c8442c; color: #fff; }
.hq2-bk-voice-rule {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.hq2-bk-voice-ex {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  line-height: 1.5;
}

.hq2-bk-list {
  margin: 0;
  padding-left: 20px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-2, var(--ink));
  line-height: 1.7;
}
.hq2-bk-list li { margin-bottom: 4px; }
.hq2-bk-donts-card {
  background: linear-gradient(180deg, rgba(200, 68, 44, 0.04), #ffffff);
}
.hq2-bk-donts li {
  color: #a8331f;
}

/* ════════════════════════════════════════════════════════════════════
   Sales · Revenue Waterfall — /hq2#/sales/waterfall
   ──────────────────────────────────────────────────────────────────── */

.hq2-wf-period {
  display: flex;
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
}
.hq2-wf-period-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #ffffff;
  color: var(--ink-2, var(--ink));
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hq2-wf-period-btn:hover {
  background: rgba(0, 0, 0, 0.03);
  border-color: rgba(0, 0, 0, 0.18);
}
.hq2-wf-period-btn.is-active {
  background: var(--ink, #1B1A6B);
  border-color: var(--ink, #1B1A6B);
  color: #ffffff;
}

.hq2-wf-chart-wrap {
  width: 100%;
  margin: 4px 0 12px;
}
.hq2-wf-chart {
  width: 100%;
  height: auto;
  display: block;
}
.hq2-wf-chart .wf-bar {
  transition: fill-opacity 0.15s ease;
}
.hq2-wf-chart .wf-bar:hover {
  fill-opacity: 1;
}

.hq2-wf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-wf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-wf-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #1B1A6B;
}
.hq2-wf-swatch.is-add { background: #1B1A6B; }
.hq2-wf-swatch.is-sub { background: #b3211a; }
.hq2-wf-swatch.is-net { background: #0f5132; }

.hq2-wf-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-ui);
}
.hq2-wf-bd-row {
  display: grid;
  grid-template-columns: 130px 1fr 100px 56px;
  gap: 12px;
  align-items: center;
  font-size: 13px;
}
.hq2-wf-bd-lbl {
  color: var(--ink-2, var(--ink));
  font-weight: 600;
}
.hq2-wf-bd-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.06);
  overflow: hidden;
}
.hq2-wf-bd-bar > span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #1B1A6B, #4744a0);
  border-radius: 999px;
}
.hq2-wf-bd-val {
  text-align: right;
  color: var(--ink-2, var(--ink));
  font-weight: 600;
}
.hq2-wf-bd-pct {
  text-align: right;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 12px;
}
@media (max-width: 600px) {
  .hq2-wf-bd-row {
    grid-template-columns: 110px 1fr 80px 44px;
    gap: 8px;
    font-size: 12px;
  }
}

/* ── Time-of-day cat moods (applied to masthead cat by JS) ──────────
   late-night = sleepy sprite swap (eyes closed)
   evening    = warmer color tint, slower blink
   morning    = brighter, slight upward bob
   weekend    = subtle relaxed sway, no-rush body language */
.mise-cat--mood-late-night {
  animation: mise-cat-late-night 8s ease-in-out infinite !important;
  filter: brightness(.92) saturate(.85);
}
@keyframes mise-cat-late-night {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(2px); }
}
.mise-cat--mood-evening { filter: hue-rotate(-6deg) saturate(1.05); }
.mise-cat--mood-morning { filter: brightness(1.05) saturate(1.08); }
.mise-cat--mood-weekend {
  animation: mise-cat-weekend 5s ease-in-out infinite;
}
@keyframes mise-cat-weekend {
  0%,100% { transform: rotate(0); }
  25%     { transform: rotate(-2deg); }
  75%     { transform: rotate(2deg); }
}
@media (prefers-reduced-motion: reduce){
  .mise-cat--mood-late-night,
  .mise-cat--mood-weekend { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   PACO BUBBLE SYSTEM — reusable cat + speech-bubble surfaces

   Used by pacoSay() / pacoFirstTime() / pacoCelebrate() in hq2.js.
   Same animation vocabulary as the staff onboarding modal so any new
   "paco does a thing" surface can pick a mood by name.
   ──────────────────────────────────────────────────────────────────── */

.paco-bubble-host {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  max-width: min(360px, 92vw);
}
.paco-bubble-host--bottom-right { bottom: 24px; right: 24px; align-items: flex-end; }
.paco-bubble-host--bottom-left  { bottom: 24px; left: 24px;  align-items: flex-start; }
.paco-bubble-host--top-right    { top: 96px;    right: 24px; align-items: flex-end; }
.paco-bubble-host--top-left     { top: 96px;    left: 24px;  align-items: flex-start; }

.paco-bubble {
  pointer-events: auto;
  display: inline-flex;
  align-items: flex-start;            /* was: center — bottoms aligned weirdly when message wraps */
  gap: 10px;
  padding: 10px 36px 10px 10px;       /* extra right padding leaves room for the × dismiss button */
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 16px;                /* was: 999px (pill) — soft rect now that messages wrap */
  box-shadow: 0 12px 32px -10px rgba(20, 16, 68, .25);
  opacity: 0;
  transform: translateY(8px) scale(.92);
  transition: opacity .26s ease, transform .26s cubic-bezier(.34, 1.56, .64, 1), box-shadow .15s ease;
  max-width: min(360px, 92vw);        /* cap so long messages don't run edge-to-edge */
  cursor: pointer;                    /* every bubble is dismissable on click */
  position: relative;
}
.paco-bubble.is-open    { opacity: 1; transform: translateY(0) scale(1); }
.paco-bubble.is-leaving { opacity: 0; transform: translateY(4px) scale(.96); }
.paco-bubble.is-clickable { cursor: pointer; }
.paco-bubble.is-clickable:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 16px 36px -10px rgba(20, 16, 68, .3); }
.paco-bubble.is-good { border-color: rgba(32, 167, 107, .35); }
.paco-bubble.is-warn { border-color: rgba(217, 162, 0, .4); }
.paco-bubble.is-bad  { border-color: rgba(200, 68, 44, .4); }

.paco-bubble-cat {
  width: 36px; height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transform-origin: center bottom;
}
.paco-bubble-cat svg { width: 32px; height: 32px; image-rendering: pixelated; }

.paco-bubble-msg {
  font-family: var(--font-ui, inherit);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--ink, #141044);
  /* Wrap to multiple lines instead of ellipsis-truncating — Tommy
     reported tips were getting cut off and unreadable. The bubble's
     max-width cap keeps wrapped text from going edge-to-edge. */
  white-space: normal;
  overflow: visible;
  line-height: 1.4;
  word-break: break-word;
  flex: 1 1 auto;
  min-width: 0;
}

/* Dismiss button — small × in the top-right corner so the user can
   keep the bubble around for as long as they want without losing
   it to the auto-dismiss timer. Bubbles ALSO close on click anywhere
   (the cursor:pointer on the bubble itself), so this is the explicit
   affordance. */
.paco-bubble-close {
  position: absolute;
  top: 6px; right: 6px;
  width: 24px; height: 24px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  color: var(--ink-3, #6E7088);
  font-size: 16px;
  line-height: 1;
  font-family: -apple-system, system-ui, sans-serif;
  transition: background .12s, color .12s;
  padding: 0;
}
.paco-bubble-close:hover {
  background: rgba(20, 16, 68, .08);
  color: var(--ink, #141044);
}

.paco-bubble.is-celebrate::before,
.paco-bubble.is-celebrate::after {
  content: '';
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  pointer-events: none;
  animation: paco-confetti 1.6s ease-in-out infinite;
}
.paco-bubble.is-celebrate::before { background: #FFD24A; top: -4px; left: 12px; animation-delay: 0s; }
.paco-bubble.is-celebrate::after  { background: #FF8870; top: -2px; left: 32px; animation-delay: .2s; }
@keyframes paco-confetti {
  0%   { opacity: 0; transform: translateY(0) scale(.4); }
  20%  { opacity: 1; transform: translateY(-12px) scale(1); }
  100% { opacity: 0; transform: translateY(-24px) scale(.6); }
}

/* Mood animations — same 10 variants as the onboarding modal */
.paco-bubble-cat.is-bob    { animation: paco-bob    2.4s ease-in-out infinite; }
.paco-bubble-cat.is-pulse  { animation: paco-pulse  1.4s ease-in-out infinite; }
.paco-bubble-cat.is-tilt   { animation: paco-tilt   2.6s ease-in-out infinite; }
.paco-bubble-cat.is-bounce { animation: paco-bounce 1.0s cubic-bezier(.32, 1.6, .58, 1) infinite; }
.paco-bubble-cat.is-nod    { animation: paco-nod    1.8s ease-in-out infinite; }
.paco-bubble-cat.is-wiggle { animation: paco-wiggle 1.2s ease-in-out infinite; }
.paco-bubble-cat.is-twirl  { animation: paco-twirl  3.6s ease-in-out infinite; }
.paco-bubble-cat.is-shake  { animation: paco-shake  .55s ease-in-out infinite; }
.paco-bubble-cat.is-strut  { animation: paco-strut  1.2s ease-in-out infinite; }
.paco-bubble-cat.is-bow    { animation: paco-bow    2.4s ease-in-out infinite; }
.paco-bubble-cat.is-sleep  { animation: none; }

@keyframes paco-bob    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes paco-pulse  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@keyframes paco-tilt   { 0%,100% { transform: rotate(0); } 35% { transform: rotate(-8deg); } 65% { transform: rotate(6deg); } }
@keyframes paco-bounce { 0%,100% { transform: translateY(0) scaleY(1); } 30% { transform: translateY(-8px) scaleY(1.05); } 60% { transform: translateY(0) scaleY(.92); } 80% { transform: translateY(-3px) scaleY(1.01); } }
@keyframes paco-nod    { 0%,100% { transform: rotate(0); } 30% { transform: rotate(8deg); } 60% { transform: rotate(-4deg); } }
@keyframes paco-wiggle { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } }
@keyframes paco-twirl  { 0% { transform: rotate(0); } 45% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } }
@keyframes paco-shake  { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-3px) rotate(-3deg); } 75% { transform: translateX(3px) rotate(3deg); } }
@keyframes paco-strut  { 0%,100% { transform: translateX(0) translateY(0); } 25% { transform: translateX(-3px) translateY(-2px); } 75% { transform: translateX(3px) translateY(-2px); } }
@keyframes paco-bow    { 0%,100% { transform: rotate(0) translateY(0); } 50% { transform: rotate(-12deg) translateY(2px); } }

@media (prefers-reduced-motion: reduce){
  .paco-bubble-cat { animation: none !important; }
  .paco-bubble.is-celebrate::before,
  .paco-bubble.is-celebrate::after { animation: none !important; opacity: 0; }
}

/* ── Cmd+K paco tip footer ── */
.hq2-cmdk-paco-tip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin: 8px 0 0;
  border-top: 1px dashed rgba(20, 16, 68, .12);
  background: rgba(255, 248, 235, .55);
}
.hq2-cmdk-paco-tip-cat {
  width: 32px; height: 32px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  animation: paco-bob 2.4s ease-in-out infinite;
  transform-origin: center bottom;
}
.hq2-cmdk-paco-tip-cat .mise-cat { width: 28px; height: 28px; image-rendering: pixelated; }
.hq2-cmdk-paco-tip-msg { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-cmdk-paco-tip-msg span {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-dk, #8B6914);
}
.hq2-cmdk-paco-tip-msg b {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2, #3D3E5C);
  letter-spacing: -.005em;
}
@media (prefers-reduced-motion: reduce){
  .hq2-cmdk-paco-tip-cat { animation: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   ONBOARDING MODAL — staff welcome walkthrough (14 screens)
   Mirrors the customer post-order welcome card: pastel-bg page,
   white-glassy modal card, navy text, gold-dk eyebrows, navy CTA.
   Same paco animation vocabulary as .paco-bubble-cat above.
   ──────────────────────────────────────────────────────────────────── */

.hq2-ob-mask[hidden],
.hq2-ob-modal[hidden] { display: none !important; }

.hq2-ob-mask {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .35);
  backdrop-filter: blur(8px) saturate(140%);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.hq2-ob-mask.is-open { opacity: 1; pointer-events: auto; }

.hq2-ob-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(40px) saturate(180%);
  -webkit-backdrop-filter: blur(40px) saturate(180%);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 32px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 30px 80px -20px rgba(20, 16, 68, .25);
  z-index: 101;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.96);
  transition: opacity 0.3s ease, transform 0.32s cubic-bezier(.34, 1.56, .64, 1);
}
.hq2-ob-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%) scale(1);
}

.hq2-ob-close {
  position: absolute;
  top: 18px; right: 18px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(20, 16, 68, .08);
  color: var(--ink-3, #6E7088);
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 2;
  font-family: inherit;
  line-height: 1;
  transition: background 0.12s ease, color 0.12s ease;
}
.hq2-ob-close:hover { background: #fff; color: var(--ink, #141044); }

.hq2-ob-cat-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 36px 8px;
}
.hq2-ob-cat-stage {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.hq2-ob-cat {
  width: 96px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 6px 12px rgba(20, 16, 68, .15));
  transform-origin: center bottom;
}
.hq2-ob-cat svg { width: 100%; height: 100%; image-rendering: pixelated; }

/* Reuse the same mood animations defined for .paco-bubble-cat above */
.hq2-ob-cat.is-bob    { animation: paco-bob    2.4s ease-in-out infinite; }
.hq2-ob-cat.is-pulse  { animation: paco-pulse  1.4s ease-in-out infinite; }
.hq2-ob-cat.is-tilt   { animation: paco-tilt   2.6s ease-in-out infinite; }
.hq2-ob-cat.is-bounce { animation: paco-bounce 1.0s cubic-bezier(.32, 1.6, .58, 1) infinite; }
.hq2-ob-cat.is-nod    { animation: paco-nod    1.8s ease-in-out infinite; }
.hq2-ob-cat.is-wiggle { animation: paco-wiggle 1.2s ease-in-out infinite; }
.hq2-ob-cat.is-twirl  { animation: paco-twirl  3.6s ease-in-out infinite; }
.hq2-ob-cat.is-shake  { animation: paco-shake  .55s ease-in-out infinite; }
.hq2-ob-cat.is-strut  { animation: paco-strut  1.2s ease-in-out infinite; }
.hq2-ob-cat.is-bow    { animation: paco-bow    2.4s ease-in-out infinite; }
.hq2-ob-cat.is-sleep  { animation: none; }

.hq2-ob-bubble {
  position: absolute;
  left: calc(100% + 14px);
  top: 18px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 14px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.005em;
  color: var(--navy, #141044);
  box-shadow: 0 6px 14px -6px rgba(20, 16, 68, .2);
  white-space: nowrap;
  animation: hq2-ob-bubble-in .55s cubic-bezier(.34, 1.56, .64, 1) backwards;
}
.hq2-ob-bubble::before {
  content: '';
  position: absolute;
  top: 14px; left: -5px;
  width: 10px; height: 10px;
  background: #fff;
  border-left: 1px solid rgba(20, 16, 68, .08);
  border-bottom: 1px solid rgba(20, 16, 68, .08);
  transform: rotate(45deg);
}
@keyframes hq2-ob-bubble-in {
  0%   { opacity: 0; transform: translateX(-12px) scale(.7); }
  60%  { opacity: 1; transform: translateX(2px) scale(1.04); }
  100% { opacity: 1; transform: translateX(0) scale(1); }
}

.hq2-ob-cat-name {
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-dk, #8B6914);
  display: flex;
  align-items: center;
  gap: 6px;
}
.hq2-ob-cat-name::before {
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold-dk, #8B6914);
}

.hq2-ob-body {
  padding: 18px 48px 8px;
  overflow-y: auto;
  flex: 1;
}
.hq2-ob-eye {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--gold-dk, #8B6914);
  text-transform: uppercase;
  letter-spacing: .16em;
  text-align: center;
  margin-bottom: 12px;
}
.hq2-ob-title {
  font-family: inherit;
  font-size: 28px;
  font-weight: 900;
  color: var(--navy, #141044);
  letter-spacing: -0.025em;
  line-height: 1.05;
  text-align: center;
  margin: 0 0 24px;
}
.hq2-ob-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-2, #3D3E5C);
  text-align: left;
  max-width: 52ch;
  margin: 0 auto;
  font-weight: 500;
}
.hq2-ob-text p { margin: 0 0 16px; }
.hq2-ob-text p:last-child { margin-bottom: 0; }
.hq2-ob-text b, .hq2-ob-text strong { color: var(--navy, #141044); font-weight: 800; }
.hq2-ob-text em { font-style: italic; color: var(--ink-2, #3D3E5C); }
.hq2-ob-text code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  background: rgba(20, 16, 68, .06);
  padding: 1px 8px;
  border-radius: 6px;
  color: var(--navy, #141044);
  font-weight: 700;
}

.hq2-ob-list {
  list-style: none;
  padding: 0;
  margin: 0 auto 8px;
  max-width: 52ch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-ob-list li {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: start;
  gap: 14px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(20, 16, 68, .04);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2, #3D3E5C);
}
.hq2-ob-list li > b { color: var(--navy, #141044); font-weight: 800; font-size: 13.5px; }
.hq2-ob-list li.is-peach { background: linear-gradient(135deg, rgba(255, 230, 220, .55), rgba(255, 230, 220, .25)); }
.hq2-ob-list li.is-lav   { background: linear-gradient(135deg, rgba(237, 230, 255, .55), rgba(237, 230, 255, .25)); }
.hq2-ob-list li.is-sky   { background: linear-gradient(135deg, rgba(220, 238, 255, .55), rgba(220, 238, 255, .25)); }
.hq2-ob-list li.is-mint  { background: linear-gradient(135deg, rgba(220, 245, 232, .55), rgba(220, 245, 232, .25)); }

.hq2-ob-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px 36px 26px;
  margin-top: 22px;
  border-top: 1px dashed rgba(20, 16, 68, .1);
  flex-shrink: 0;
}
.hq2-ob-dots { display: inline-flex; align-items: center; gap: 6px; }
.hq2-ob-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(20, 16, 68, .12);
  transition: background 0.18s ease, transform 0.18s ease;
}
.hq2-ob-dot.is-active { background: var(--navy, #141044); transform: scale(1.4); }
.hq2-ob-dot.is-done   { background: rgba(20, 16, 68, .35); }
.hq2-ob-actions { display: inline-flex; gap: 8px; align-items: center; }
.hq2-ob-btn {
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.012em;
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(.34, 1.56, .64, 1), box-shadow 0.2s, background 0.2s, color 0.2s;
  border-radius: 99px;
  border: 0;
  white-space: nowrap;
}
.hq2-ob-btn:active { transform: scale(.97); }
.hq2-ob-btn-ghost {
  height: 38px;
  padding: 0 16px;
  background: transparent;
  color: var(--ink-2, #3D3E5C);
  font-weight: 600;
  font-size: 13.5px;
}
.hq2-ob-btn-ghost:hover { background: rgba(20, 16, 68, .04); color: var(--ink, #141044); }
.hq2-ob-btn-ghost:disabled { opacity: 0.3; cursor: default; }
.hq2-ob-btn-ghost:disabled:hover { background: transparent; color: var(--ink-2, #3D3E5C); }
.hq2-ob-btn-primary {
  height: 44px;
  padding: 0 20px;
  background: var(--navy, #141044);
  color: #fff;
  box-shadow: 0 6px 18px -4px rgba(20, 16, 68, .4);
}
.hq2-ob-btn-primary:hover {
  background: var(--navy-2, #2A2670);
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 10px 24px -4px rgba(20, 16, 68, .45);
}

@media (prefers-reduced-motion: reduce){
  .hq2-ob-cat,
  .hq2-ob-bubble { animation: none !important; }
  .hq2-ob-modal { transition: opacity 0.2s ease; }
}

/* ════════════════════════════════════════════════════════════════════
   Financial Services · Monthly Close — /hq2#/financialServices/close
   ──────────────────────────────────────────────────────────────────── */

.hq2-fsc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-ui);
}
.hq2-fsc-month-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hq2-fsc-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-fsc-select {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 32px 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.hq2-fsc-doc {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 36px 44px;
  font-family: var(--font-ui);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.hq2-fsc-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.hq2-fsc-letterhead {
  display: flex;
  flex-direction: column;
}
.hq2-fsc-letterhead b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  line-height: 1;
}
.hq2-fsc-letterhead span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  font-weight: 600;
}
.hq2-fsc-period {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-fsc-period-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-fsc-period b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
}

.hq2-fsc-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
}
.hq2-fsc-col {
  display: flex;
  flex-direction: column;
}
.hq2-fsc-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hq2-fsc-rows {
  display: flex;
  flex-direction: column;
}
.hq2-fsc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
}
.hq2-fsc-row:last-child {
  border-bottom: none;
}
.hq2-fsc-row-lbl {
  color: var(--ink-2, var(--ink));
}
.hq2-fsc-row-amt {
  color: var(--ink, #1B1A6B);
  font-weight: 500;
}
.hq2-fsc-row-h {
  margin-top: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}
.hq2-fsc-row-h:first-child { margin-top: 0; }
.hq2-fsc-row-h .hq2-fsc-row-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-subtotal {
  border-top: 1px solid rgba(0, 0, 0, 0.20);
  margin-top: 4px;
  padding-top: 8px;
}
.hq2-fsc-row-subtotal .hq2-fsc-row-lbl {
  font-style: italic;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-fsc-row-sum {
  border-top: 1px solid rgba(0, 0, 0, 0.20);
  border-bottom: none;
  padding-top: 10px;
  margin-top: 6px;
}
.hq2-fsc-row-sum .hq2-fsc-row-lbl {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.hq2-fsc-row-sum .hq2-fsc-row-amt {
  font-weight: 700;
  font-size: 14px;
}
.hq2-fsc-row-gross {
  border-top: 2px solid var(--ink, #1B1A6B);
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding: 10px 0;
  margin: 12px 0;
}
.hq2-fsc-row-gross .hq2-fsc-row-lbl {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-gross .hq2-fsc-row-amt {
  font-weight: 700;
  font-size: 16px;
}
.hq2-fsc-row-final {
  border-top: 3px double var(--ink, #1B1A6B);
  border-bottom: 3px double var(--ink, #1B1A6B);
  padding: 14px 0;
  margin-top: 16px;
}
.hq2-fsc-row-final .hq2-fsc-row-lbl {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-final .hq2-fsc-row-amt {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-final .hq2-fsc-row-amt.is-negative {
  color: #b3211a;
}
.hq2-fsc-empty {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  padding: 6px 0;
  font-style: italic;
}

.hq2-fsc-trend-h {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-bottom: 10px;
}
.hq2-fsc-trend-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-fsc-trend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.025);
  font-size: 12px;
}
.hq2-fsc-trend-row.is-current {
  background: rgba(27, 26, 107, 0.08);
  font-weight: 600;
}
.hq2-fsc-trend-row.is-neg .hq2-fsc-trend-amt {
  color: #b3211a;
}
.hq2-fsc-trend-lbl {
  color: var(--ink-2, var(--ink));
}
.hq2-fsc-trend-amt {
  color: var(--ink, #1B1A6B);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hq2-fsc-ratios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
  padding-top: 16px;
}
.hq2-fsc-ratio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.hq2-fsc-ratio span {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
}
.hq2-fsc-ratio b {
  color: var(--ink, #1B1A6B);
  font-size: 14px;
  font-weight: 600;
}

.hq2-fsc-foot {
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
  padding-top: 14px;
}

.hq2-fsc-sign {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.hq2-fsc-sign-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.hq2-fsc-sign-line span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  flex-shrink: 0;
  width: 70px;
}
.hq2-fsc-sign-line i {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.30);
}

@media (max-width: 800px) {
  .hq2-fsc-doc { padding: 24px 22px; }
  .hq2-fsc-grid { grid-template-columns: 1fr; gap: 24px; }
  .hq2-fsc-aside { order: -1; }
  .hq2-fsc-letterhead b { font-size: 22px; }
  .hq2-fsc-period b { font-size: 18px; }
}

@media print {
  body.hq2-fsc-printing * { visibility: hidden; }
  body.hq2-fsc-printing .hq2-fsc-doc,
  body.hq2-fsc-printing .hq2-fsc-doc * { visibility: visible; }
  body.hq2-fsc-printing .hq2-fsc-doc {
    position: absolute;
    left: 0; top: 0; right: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 28px 36px;
  }
  body.hq2-fsc-printing .hq2-fsc-grid {
    grid-template-columns: 1fr 240px;
    gap: 24px;
  }
  body.hq2-fsc-printing .hq2-fsc-doc-head { border-bottom: 2px solid #000; }
  body.hq2-fsc-printing .hq2-fsc-row-final {
    border-top-color: #000;
    border-bottom-color: #000;
  }
  body.hq2-fsc-printing .hq2-fsc-row-gross {
    border-top-color: #000;
    border-bottom-color: #000;
  }
  body.hq2-fsc-printing { background: #ffffff !important; }
  @page { margin: 0.5in; }
}

/* ════════════════════════════════════════════════════════════════════
   Manufacturing · Yield + Portion Analytics — /hq2#/manufacturing/yield
   ──────────────────────────────────────────────────────────────────── */

.hq2-yld-host {
  width: 100%;
  font-family: var(--font-ui);
}
.hq2-yld-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-yld-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-yld-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-yld-th.hq2-yld-num {
  text-align: right;
}
.hq2-yld-cell {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  color: var(--ink-2, var(--ink));
}
.hq2-yld-cell.hq2-yld-num {
  text-align: right;
  white-space: nowrap;
}
.hq2-yld-cell-name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  max-width: 280px;
}
.hq2-yld-cell-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.hq2-yld-cell-name a:hover {
  color: #4744a0;
  text-decoration: underline;
}
.hq2-yld-table tbody tr:last-child .hq2-yld-cell {
  border-bottom: none;
}
.hq2-yld-table tbody tr:hover .hq2-yld-cell {
  background: rgba(27, 26, 107, 0.02);
}
.hq2-yld-cell-empty {
  color: rgba(0, 0, 0, 0.28);
}
.hq2-yld-sub {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-weight: 500;
  margin-left: 4px;
}

/* portion bar — tiny inline bar showing relative volume */
.hq2-yld-portion-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  min-width: 90px;
  justify-content: flex-end;
}
.hq2-yld-portion-bar-fill {
  display: block;
  position: absolute;
  right: 30px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(27, 26, 107, 0.16), rgba(27, 26, 107, 0.42));
  max-width: 90px;
}
.hq2-yld-portion-bar b {
  position: relative;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  z-index: 1;
}

/* margin pill — colored by margin % tier */
.hq2-yld-margin-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hq2-yld-margin-strong { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-yld-margin-ok     { background: rgba(27, 26, 107, 0.10); color: #1B1A6B; }
.hq2-yld-margin-thin   { background: rgba(200, 140, 0, 0.14); color: #8a6500; }
.hq2-yld-margin-bad    { background: rgba(179, 33, 26, 0.12); color: #b3211a; }
.hq2-yld-margin-pill.hq2-yld-cell-empty { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.32); }

/* Uncosted callout */
.hq2-yld-uncosted {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-yld-uncosted-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(200, 140, 0, 0.06);
  border: 1px solid rgba(200, 140, 0, 0.18);
  text-decoration: none;
  font-family: var(--font-ui);
  transition: background 0.15s ease;
}
.hq2-yld-uncosted-row:hover {
  background: rgba(200, 140, 0, 0.10);
}
.hq2-yld-uncosted-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-yld-uncosted-portions {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-yld-uncosted-arrow {
  font-size: 14px;
  color: #c88c00;
  font-weight: 700;
}
.hq2-yld-uncosted-more {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 6px 4px;
  font-style: italic;
}

@media (max-width: 600px) {
  .hq2-yld-table { font-size: 11px; }
  .hq2-yld-cell { padding: 8px 8px; }
  .hq2-yld-cell-name { max-width: 160px; }
  .hq2-yld-portion-bar-fill { right: 24px; max-width: 60px; }
}

/* ════════════════════════════════════════════════════════════════════
   Financial Services · Monthly Close — /hq2#/financialServices/close
   ──────────────────────────────────────────────────────────────────── */

.hq2-fsc-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-ui);
}
.hq2-fsc-month-picker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hq2-fsc-lbl {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-fsc-select {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 32px 8px 14px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B1A6B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
}

.hq2-fsc-doc {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 36px 44px;
  font-family: var(--font-ui);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.hq2-fsc-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.hq2-fsc-letterhead {
  display: flex;
  flex-direction: column;
}
.hq2-fsc-letterhead b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  line-height: 1;
}
.hq2-fsc-letterhead span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  font-weight: 600;
}
.hq2-fsc-period {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-fsc-period-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-fsc-period b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
}

.hq2-fsc-grid {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
}
.hq2-fsc-col {
  display: flex;
  flex-direction: column;
}
.hq2-fsc-aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hq2-fsc-rows {
  display: flex;
  flex-direction: column;
}
.hq2-fsc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.08);
}
.hq2-fsc-row:last-child {
  border-bottom: none;
}
.hq2-fsc-row-lbl {
  color: var(--ink-2, var(--ink));
}
.hq2-fsc-row-amt {
  color: var(--ink, #1B1A6B);
  font-weight: 500;
}
.hq2-fsc-row-h {
  margin-top: 16px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.20);
}
.hq2-fsc-row-h:first-child { margin-top: 0; }
.hq2-fsc-row-h .hq2-fsc-row-lbl {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-subtotal {
  border-top: 1px solid rgba(0, 0, 0, 0.20);
  margin-top: 4px;
  padding-top: 8px;
}
.hq2-fsc-row-subtotal .hq2-fsc-row-lbl {
  font-style: italic;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-fsc-row-sum {
  border-top: 1px solid rgba(0, 0, 0, 0.20);
  border-bottom: none;
  padding-top: 10px;
  margin-top: 6px;
}
.hq2-fsc-row-sum .hq2-fsc-row-lbl {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 11px;
}
.hq2-fsc-row-sum .hq2-fsc-row-amt {
  font-weight: 700;
  font-size: 14px;
}
.hq2-fsc-row-gross {
  border-top: 2px solid var(--ink, #1B1A6B);
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding: 10px 0;
  margin: 12px 0;
}
.hq2-fsc-row-gross .hq2-fsc-row-lbl {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-gross .hq2-fsc-row-amt {
  font-weight: 700;
  font-size: 16px;
}
.hq2-fsc-row-final {
  border-top: 3px double var(--ink, #1B1A6B);
  border-bottom: 3px double var(--ink, #1B1A6B);
  padding: 14px 0;
  margin-top: 16px;
}
.hq2-fsc-row-final .hq2-fsc-row-lbl {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-final .hq2-fsc-row-amt {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-fsc-row-final .hq2-fsc-row-amt.is-negative {
  color: #b3211a;
}
.hq2-fsc-empty {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  padding: 6px 0;
  font-style: italic;
}

.hq2-fsc-trend-h {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-bottom: 10px;
}
.hq2-fsc-trend-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-fsc-trend-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.025);
  font-size: 12px;
}
.hq2-fsc-trend-row.is-current {
  background: rgba(27, 26, 107, 0.08);
  font-weight: 600;
}
.hq2-fsc-trend-row.is-neg .hq2-fsc-trend-amt {
  color: #b3211a;
}
.hq2-fsc-trend-lbl {
  color: var(--ink-2, var(--ink));
}
.hq2-fsc-trend-amt {
  color: var(--ink, #1B1A6B);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.hq2-fsc-ratios {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
  padding-top: 16px;
}
.hq2-fsc-ratio {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
}
.hq2-fsc-ratio span {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
  font-weight: 600;
}
.hq2-fsc-ratio b {
  color: var(--ink, #1B1A6B);
  font-size: 14px;
  font-weight: 600;
}

.hq2-fsc-foot {
  font-size: 10px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
  padding-top: 14px;
}

.hq2-fsc-sign {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 8px;
}
.hq2-fsc-sign-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.hq2-fsc-sign-line span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  flex-shrink: 0;
  width: 70px;
}
.hq2-fsc-sign-line i {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.30);
}

@media (max-width: 800px) {
  .hq2-fsc-doc { padding: 24px 22px; }
  .hq2-fsc-grid { grid-template-columns: 1fr; gap: 24px; }
  .hq2-fsc-aside { order: -1; }
  .hq2-fsc-letterhead b { font-size: 22px; }
  .hq2-fsc-period b { font-size: 18px; }
}

@media print {
  body.hq2-fsc-printing * { visibility: hidden; }
  body.hq2-fsc-printing .hq2-fsc-doc,
  body.hq2-fsc-printing .hq2-fsc-doc * { visibility: visible; }
  body.hq2-fsc-printing .hq2-fsc-doc {
    position: absolute;
    left: 0; top: 0; right: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 28px 36px;
  }
  body.hq2-fsc-printing .hq2-fsc-grid {
    grid-template-columns: 1fr 240px;
    gap: 24px;
  }
  body.hq2-fsc-printing .hq2-fsc-doc-head { border-bottom: 2px solid #000; }
  body.hq2-fsc-printing .hq2-fsc-row-final {
    border-top-color: #000;
    border-bottom-color: #000;
  }
  body.hq2-fsc-printing .hq2-fsc-row-gross {
    border-top-color: #000;
    border-bottom-color: #000;
  }
  body.hq2-fsc-printing { background: #ffffff !important; }
  @page { margin: 0.5in; }
}

/* ════════════════════════════════════════════════════════════════════
   Manufacturing · Yield + Portion Analytics — /hq2#/manufacturing/yield
   ──────────────────────────────────────────────────────────────────── */

.hq2-yld-host {
  width: 100%;
  font-family: var(--font-ui);
}
.hq2-yld-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-yld-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-yld-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-yld-th.hq2-yld-num {
  text-align: right;
}
.hq2-yld-cell {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  color: var(--ink-2, var(--ink));
}
.hq2-yld-cell.hq2-yld-num {
  text-align: right;
  white-space: nowrap;
}
.hq2-yld-cell-name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  max-width: 280px;
}
.hq2-yld-cell-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.hq2-yld-cell-name a:hover {
  color: #4744a0;
  text-decoration: underline;
}
.hq2-yld-table tbody tr:last-child .hq2-yld-cell {
  border-bottom: none;
}
.hq2-yld-table tbody tr:hover .hq2-yld-cell {
  background: rgba(27, 26, 107, 0.02);
}
.hq2-yld-cell-empty {
  color: rgba(0, 0, 0, 0.28);
}
.hq2-yld-sub {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-weight: 500;
  margin-left: 4px;
}

/* portion bar — tiny inline bar showing relative volume */
.hq2-yld-portion-bar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  min-width: 90px;
  justify-content: flex-end;
}
.hq2-yld-portion-bar-fill {
  display: block;
  position: absolute;
  right: 30px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(27, 26, 107, 0.16), rgba(27, 26, 107, 0.42));
  max-width: 90px;
}
.hq2-yld-portion-bar b {
  position: relative;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  z-index: 1;
}

/* margin pill — colored by margin % tier */
.hq2-yld-margin-pill {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hq2-yld-margin-strong { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-yld-margin-ok     { background: rgba(27, 26, 107, 0.10); color: #1B1A6B; }
.hq2-yld-margin-thin   { background: rgba(200, 140, 0, 0.14); color: #8a6500; }
.hq2-yld-margin-bad    { background: rgba(179, 33, 26, 0.12); color: #b3211a; }
.hq2-yld-margin-pill.hq2-yld-cell-empty { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.32); }

/* Uncosted callout */
.hq2-yld-uncosted {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-yld-uncosted-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  background: rgba(200, 140, 0, 0.06);
  border: 1px solid rgba(200, 140, 0, 0.18);
  text-decoration: none;
  font-family: var(--font-ui);
  transition: background 0.15s ease;
}
.hq2-yld-uncosted-row:hover {
  background: rgba(200, 140, 0, 0.10);
}
.hq2-yld-uncosted-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-yld-uncosted-portions {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-yld-uncosted-arrow {
  font-size: 14px;
  color: #c88c00;
  font-weight: 700;
}
.hq2-yld-uncosted-more {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 6px 4px;
  font-style: italic;
}

@media (max-width: 600px) {
  .hq2-yld-table { font-size: 11px; }
  .hq2-yld-cell { padding: 8px 8px; }
  .hq2-yld-cell-name { max-width: 160px; }
  .hq2-yld-portion-bar-fill { right: 24px; max-width: 60px; }
}

/* ════════════════════════════════════════════════════════════════════
   Revenue Management · Cohort LTV — /hq2#/revenueManagement/cohorts
   ──────────────────────────────────────────────────────────────────── */

.hq2-clt-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
}
.hq2-clt-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.hq2-clt-btn {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hq2-clt-btn:hover {
  color: var(--ink, #1B1A6B);
}
.hq2-clt-btn.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hq2-clt-host {
  width: 100%;
  margin: 4px 0;
}

/* ── Heatmap table ── */
.hq2-clt-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-clt-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.hq2-clt-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 6px;
  text-align: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
  position: sticky;
  top: 0;
  z-index: 1;
}
.hq2-clt-table .hq2-clt-cell-cohort {
  background: #fafafa;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0;
  padding: 8px 12px;
  text-align: left;
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-clt-table thead .hq2-clt-cell-cohort {
  z-index: 3;
}
.hq2-clt-cell-size {
  text-align: center !important;
  color: var(--ink-3, rgba(0, 0, 0, 0.55)) !important;
  font-weight: 500 !important;
  min-width: 44px;
}
.hq2-clt-cell {
  padding: 8px 6px;
  text-align: center;
  font-weight: 500;
  font-size: 11px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  border-right: 1px solid rgba(0, 0, 0, 0.04);
  min-width: 64px;
  transition: filter 0.15s ease;
}
.hq2-clt-cell:hover {
  filter: brightness(1.06);
}
.hq2-clt-cell-empty {
  background: #ffffff !important;
  color: rgba(0, 0, 0, 0.18) !important;
}
.hq2-clt-cell-h {
  min-width: 64px;
}

/* ── Stacked bars ── */
.hq2-clt-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-ui);
}
.hq2-clt-stack-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
}
.hq2-clt-stack-lbl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.2;
}
.hq2-clt-stack-lbl b {
  font-size: 13px;
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}
.hq2-clt-stack-lbl span {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-clt-stack-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.hq2-clt-stack-bar {
  display: flex;
  height: 22px;
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
  min-width: 4px;
}
.hq2-clt-seg {
  display: block;
  height: 100%;
  transition: filter 0.15s ease;
}
.hq2-clt-seg:hover {
  filter: brightness(1.08);
}
.hq2-clt-seg.is-sub { background: #1B1A6B; }
.hq2-clt-seg.is-one { background: #4744a0; }
.hq2-clt-seg.is-cat { background: #c88c00; }
.hq2-clt-stack-total {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, var(--ink));
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

/* ── Legend ── */
.hq2-clt-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 14px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-clt-key {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-clt-sw {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background: #1B1A6B;
}
.hq2-clt-sw.is-sub { background: #1B1A6B; }
.hq2-clt-sw.is-one { background: #4744a0; }
.hq2-clt-sw.is-cat { background: #c88c00; }
.hq2-clt-scale {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-clt-scale-bar {
  display: inline-block;
  width: 200px;
  height: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(27, 26, 107, 0.04), rgba(27, 26, 107, 0.82));
}
.hq2-clt-foot {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 4px;
}

@media (max-width: 600px) {
  .hq2-clt-stack-row {
    grid-template-columns: 92px 1fr;
    gap: 10px;
  }
  .hq2-clt-stack-lbl b { font-size: 12px; }
  .hq2-clt-stack-lbl span { font-size: 10px; }
  .hq2-clt-table { font-size: 10px; }
  .hq2-clt-cell { min-width: 52px; padding: 6px 4px; }
}

/* ════════════════════════════════════════════════════════════════════
   Marketing · Audiences (lookalike seed builder) — /hq2#/marketing/audiences
   ──────────────────────────────────────────────────────────────────── */

.hq2-mkt-audiences {
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.hq2-mkt-aud-intro {
  background: linear-gradient(180deg, rgba(27, 26, 107, 0.04), #ffffff);
  border: 1px solid rgba(27, 26, 107, 0.10);
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 4px;
}
.hq2-mkt-aud-intro h2 {
  margin: 0 0 6px 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
}
.hq2-mkt-aud-intro p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
}
.hq2-mkt-aud-intro b {
  color: var(--ink, #1B1A6B);
}

.hq2-mkt-aud-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}
.hq2-mkt-aud-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 12px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.hq2-mkt-aud-toggle-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-right: 4px;
}
.hq2-mkt-aud-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hq2-mkt-aud-btn:hover {
  color: var(--ink, #1B1A6B);
}
.hq2-mkt-aud-btn.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

#hq2MktAudExport {
  margin-left: auto;
}

.hq2-mkt-aud-table-host {
  width: 100%;
  overflow-x: auto;
}
.hq2-mkt-aud-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-mkt-aud-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-mkt-aud-table thead .hq2-mkt-aud-num {
  text-align: right;
}
.hq2-mkt-aud-cell {
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  vertical-align: middle;
}
.hq2-mkt-aud-cell.hq2-mkt-aud-num {
  text-align: right;
  white-space: nowrap;
}
.hq2-mkt-aud-name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-mkt-aud-email {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 11px;
}
.hq2-mkt-aud-table tbody tr:hover .hq2-mkt-aud-cell {
  background: rgba(27, 26, 107, 0.02);
}
.hq2-mkt-aud-table-foot {
  padding: 10px 14px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  border-top: 1px dotted rgba(0, 0, 0, 0.08);
}

.hq2-mkt-aud-howto .hq2-fi-body {
  padding: 20px 24px !important;
}
.hq2-mkt-aud-steps {
  margin: 0 0 12px 0;
  padding-left: 22px;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink-2, var(--ink));
}
.hq2-mkt-aud-steps li { margin-bottom: 8px; }
.hq2-mkt-aud-steps b {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}
.hq2-mkt-aud-steps i {
  font-style: italic;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-mkt-aud-foot {
  margin: 0;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-top: 1px dotted rgba(0, 0, 0, 0.08);
  padding-top: 12px;
  line-height: 1.6;
}

@media (max-width: 600px) {
  .hq2-mkt-aud-controls { flex-direction: column; align-items: stretch; }
  #hq2MktAudExport { margin-left: 0; }
  .hq2-mkt-aud-table { font-size: 11px; }
  .hq2-mkt-aud-cell, .hq2-mkt-aud-table thead th { padding: 8px 10px; }
}

/* ════════════════════════════════════════════════════════════════════
   Supply Chain · Demand Forecast — /hq2#/supplyChain/demand
   ──────────────────────────────────────────────────────────────────── */

.hq2-sd-shop-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-sd-shop-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-sd-shop-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-sd-shop-table thead .hq2-sd-num {
  text-align: right;
}
.hq2-sd-cell {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
  color: var(--ink-2, var(--ink));
}
.hq2-sd-cell.hq2-sd-num {
  text-align: right;
  white-space: nowrap;
}
.hq2-sd-cell-name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-sd-shop-table tbody tr:hover .hq2-sd-cell {
  background: rgba(27, 26, 107, 0.02);
}
.hq2-sd-unit {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-weight: 500;
  margin-left: 4px;
  text-transform: lowercase;
}
.hq2-sd-untracked {
  color: rgba(0, 0, 0, 0.32);
  font-style: italic;
  font-weight: 500;
  font-size: 11px;
}

.hq2-sd-gap-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 220px;
}
.hq2-sd-gap-bar {
  display: block;
  flex: 1;
  height: 8px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  overflow: hidden;
  min-width: 80px;
}
.hq2-sd-gap-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  transition: width 0.2s ease;
}
.hq2-sd-gap-bar > span.is-urgent { background: #b3211a; }
.hq2-sd-gap-bar > span.is-warn   { background: #c88c00; }
.hq2-sd-gap-bar > span.is-ok     { background: #0f5132; }
.hq2-sd-gap-val {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  white-space: nowrap;
  min-width: 80px;
  text-align: right;
}
.hq2-sd-ok {
  font-size: 11px;
  color: #0f5132;
  font-weight: 600;
}

.hq2-sd-shop-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: var(--font-ui);
  line-height: 1.6;
}
.hq2-sd-link {
  color: var(--ink, #1B1A6B);
  text-decoration: none;
  font-weight: 600;
  margin-left: 6px;
}
.hq2-sd-link:hover { text-decoration: underline; }

.hq2-sd-recipe-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-ui);
}
.hq2-sd-recipe-row {
  display: grid;
  grid-template-columns: minmax(180px, 36%) 1fr;
  gap: 14px;
  align-items: center;
}
.hq2-sd-recipe-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  line-height: 1.3;
}
.hq2-sd-recipe-name a {
  color: inherit;
  text-decoration: none;
}
.hq2-sd-recipe-name a:hover {
  color: #4744a0;
  text-decoration: underline;
}
.hq2-sd-recipe-rate {
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
}
.hq2-sd-recipe-bar-wrap {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hq2-sd-recipe-bar {
  display: block;
  height: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(27, 26, 107, 0.18), rgba(27, 26, 107, 0.55));
  min-width: 4px;
  /* shrink: 1 (not 0) — the widest bar is width:100% of the wrap, and
     with shrink disabled it pushed its "N portions" label off-screen.
     Letting it flex down keeps bar + label inside the row. */
  flex-shrink: 1;
}
.hq2-sd-recipe-bar-wrap b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, var(--ink));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hq2-sd-recipe-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  font-family: var(--font-ui);
}

@media (max-width: 600px) {
  .hq2-sd-shop-table { font-size: 11px; }
  .hq2-sd-cell { padding: 8px 8px; }
  .hq2-sd-gap-cell { min-width: 140px; gap: 8px; }
  .hq2-sd-recipe-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ════════════════════════════════════════════════════════════════════
   CHANNEL SETTINGS MODAL — rename / description / members
   ──────────────────────────────────────────────────────────────────── */

#hq2ChatChannelSettings { display: contents; }

.hq2-chsett-scrim {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 89;
  opacity: 0;
  transition: opacity .22s ease;
}
#hq2ChatChannelSettings.is-open .hq2-chsett-scrim { opacity: 1; }

.hq2-chsett-panel {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 64px);
  background: #ffffff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 18px;
  box-shadow: 0 30px 80px -20px rgba(20, 16, 68, .35);
  z-index: 90;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.96);
  transition: opacity .22s ease, transform .22s cubic-bezier(.34, 1.56, .64, 1);
}
#hq2ChatChannelSettings.is-open .hq2-chsett-panel {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.hq2-chsett-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 22px 24px 16px;
  border-bottom: 1px solid rgba(20, 16, 68, .06);
  flex-shrink: 0;
}
.hq2-chsett-eye {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tc-gold-deep, #8E6C2E);
  margin-bottom: 4px;
}
.hq2-chsett-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 22px;
  font-weight: 800;
  color: var(--ink, #141044);
  letter-spacing: -0.02em;
}
.hq2-chsett-close {
  background: transparent;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 8px;
  width: 32px; height: 32px;
  cursor: pointer;
  color: var(--ink-2);
  font-family: inherit;
  font-size: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background .12s ease, border-color .12s ease;
}
.hq2-chsett-close:hover { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .16); color: var(--ink); }

.hq2-chsett-body {
  padding: 18px 24px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}
.hq2-chsett-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-chsett-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
}
.hq2-chsett-sublbl {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--ink-3);
  margin-left: 6px;
  text-transform: none;
}
.hq2-chsett-readonly {
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
  padding: 8px 12px;
  background: rgba(0, 0, 0, .03);
  border-radius: 8px;
}
.hq2-chsett-desc {
  resize: vertical;
  min-height: 64px;
  font-family: var(--font-ui);
  line-height: 1.5;
}

.hq2-chsett-mem-search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 8px;
  padding: 0 10px;
  height: 34px;
}
.hq2-chsett-mem-search svg { color: var(--ink-3); flex-shrink: 0; }
.hq2-chsett-mem-search input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 13px;
  color: var(--ink);
  padding: 0;
}

.hq2-chsett-mems {
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(0, 0, 0, .06);
  border-radius: 10px;
  padding: 4px;
}
.hq2-chsett-mem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .12s ease;
}
.hq2-chsett-mem:hover { background: rgba(0, 0, 0, .03); }
.hq2-chsett-mem input[type="checkbox"] {
  width: 16px; height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}
.hq2-chsett-mem-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-ui);
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.hq2-chsett-mem-name {
  flex-shrink: 0;
  color: var(--ink);
  font-weight: 600;
}
.hq2-chsett-mem-email {
  color: var(--ink-3);
  font-size: 11px;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hq2-chsett-empty {
  padding: 16px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  font-style: italic;
}

.hq2-chsett-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  border-top: 1px solid rgba(20, 16, 68, .06);
  background: #fafafb;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Manufacturing · HACCP Audit Trail — /hq2#/manufacturing/haccp
   ──────────────────────────────────────────────────────────────────── */

.hq2-hac-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-ui);
}
.hq2-hac-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.hq2-hac-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hq2-hac-btn:hover {
  color: var(--ink, #1B1A6B);
}
.hq2-hac-btn.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hq2-hac-doc {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 36px 44px;
  font-family: var(--font-ui);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.hq2-hac-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.hq2-hac-letterhead {
  display: flex;
  flex-direction: column;
}
.hq2-hac-letterhead b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  line-height: 1;
}
.hq2-hac-letterhead span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  font-weight: 600;
}
.hq2-hac-period {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-hac-period-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-hac-period b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
}

.hq2-hac-stats {
  margin-bottom: 24px !important;
}
.hq2-hac-stats .hq2-stat-card-val.is-warn {
  color: #b3211a;
}

.hq2-hac-section {
  margin-bottom: 24px;
}
.hq2-hac-section-h {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  margin: 0 0 4px 0;
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  padding-bottom: 6px;
}
.hq2-hac-section-sub {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  line-height: 1.5;
  margin: 0 0 12px 0;
  font-style: italic;
}

.hq2-hac-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.hq2-hac-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.hq2-hac-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  white-space: nowrap;
}
.hq2-hac-table tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  vertical-align: middle;
}
.hq2-hac-table tbody td.tnum {
  text-align: right;
  white-space: nowrap;
}
.hq2-hac-table tbody tr:last-child td {
  border-bottom: none;
}
.hq2-hac-table tbody tr:hover td {
  background: rgba(27, 26, 107, 0.02);
}
.hq2-hac-table a {
  color: var(--ink, #1B1A6B);
  text-decoration: none;
  font-weight: 600;
}
.hq2-hac-table a:hover {
  text-decoration: underline;
}

.hq2-hac-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-hac-pill.is-ok   { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-hac-pill.is-fail { background: rgba(179, 33, 26, 0.14); color: #b3211a; }
.hq2-hac-pill.is-na   { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.45); }

.hq2-hac-clean {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 20px;
  background: rgba(15, 81, 50, 0.06);
  border: 1px solid rgba(15, 81, 50, 0.18);
  border-radius: 8px;
  font-family: var(--font-ui);
}
.hq2-hac-clean b {
  font-size: 13px;
  color: #0f5132;
}
.hq2-hac-clean span {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}

.hq2-hac-foot-note {
  padding: 8px 10px;
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-style: italic;
}

.hq2-hac-foot {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
}
.hq2-hac-foot p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin: 0 0 16px 0;
}
.hq2-hac-sign {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}
.hq2-hac-sign-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.hq2-hac-sign-line span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  flex-shrink: 0;
  width: 110px;
}
.hq2-hac-sign-line i {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.30);
}

@media (max-width: 800px) {
  .hq2-hac-doc { padding: 24px 22px; }
  .hq2-hac-letterhead b { font-size: 22px; }
  .hq2-hac-period b { font-size: 14px; }
  .hq2-hac-section-h { font-size: 14px; }
  .hq2-hac-table { font-size: 10px; }
}

@media print {
  body.hq2-hac-printing * { visibility: hidden; }
  body.hq2-hac-printing .hq2-hac-doc,
  body.hq2-hac-printing .hq2-hac-doc * { visibility: visible; }
  body.hq2-hac-printing .hq2-hac-doc {
    position: absolute;
    left: 0; top: 0; right: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 28px 36px;
  }
  body.hq2-hac-printing .hq2-hac-doc-head { border-bottom: 2px solid #000; }
  body.hq2-hac-printing { background: #ffffff !important; }
  @page { margin: 0.5in; }
}

/* ════════════════════════════════════════════════════════════════════
   Platform · Compliance Posture Audit — /hq2#/platform/audit
   ──────────────────────────────────────────────────────────────────── */

.hq2-pa-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-ui);
}
.hq2-pa-toggle {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.hq2-pa-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.hq2-pa-btn:hover { color: var(--ink, #1B1A6B); }
.hq2-pa-btn.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hq2-pa-doc {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 36px 44px;
  font-family: var(--font-ui);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.hq2-pa-doc-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding-bottom: 16px;
  margin-bottom: 24px;
}
.hq2-pa-letterhead { display: flex; flex-direction: column; }
.hq2-pa-letterhead b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  line-height: 1;
}
.hq2-pa-letterhead span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  font-weight: 600;
}
.hq2-pa-period {
  text-align: right;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-pa-period-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-pa-period b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
}
.hq2-pa-period-sub {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}

.hq2-pa-section { margin-bottom: 28px; }
.hq2-pa-section-h {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  margin: 0 0 4px 0;
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  padding-bottom: 6px;
}
.hq2-pa-section-sub {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  line-height: 1.5;
  margin: 0 0 12px 0;
  font-style: italic;
}

.hq2-pa-stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.hq2-pa-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 8px;
  border: 1px solid rgba(27, 26, 107, 0.08);
}
.hq2-pa-stat b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
  line-height: 1;
}
.hq2-pa-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}

.hq2-pa-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.hq2-pa-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-pa-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  white-space: nowrap;
}
.hq2-pa-table thead .tnum { text-align: right; }
.hq2-pa-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  vertical-align: middle;
}
.hq2-pa-table tbody td.tnum { text-align: right; white-space: nowrap; }
.hq2-pa-table tbody tr:last-child td { border-bottom: none; }

.hq2-pa-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-pa-pill.is-ok   { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-pa-pill.is-warn { background: rgba(200, 140, 0, 0.16); color: #8a6500; }
.hq2-pa-pill.is-fail { background: rgba(179, 33, 26, 0.14); color: #b3211a; }
.hq2-pa-pill.is-na   { background: rgba(0, 0, 0, 0.05); color: rgba(0, 0, 0, 0.45); }

.hq2-pa-empty {
  padding: 16px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}
.hq2-pa-empty a {
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}

.hq2-pa-foot {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
}
.hq2-pa-foot p {
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin: 0 0 16px 0;
}
.hq2-pa-sign { display: flex; flex-wrap: wrap; gap: 24px; }
.hq2-pa-sign-line {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  flex: 1;
  min-width: 200px;
}
.hq2-pa-sign-line span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  flex-shrink: 0;
  width: 100px;
}
.hq2-pa-sign-line i {
  display: block;
  flex: 1;
  height: 1px;
  background: rgba(0, 0, 0, 0.30);
}

@media (max-width: 800px) {
  .hq2-pa-doc { padding: 24px 22px; }
  .hq2-pa-letterhead b { font-size: 22px; }
  .hq2-pa-period b { font-size: 14px; }
  .hq2-pa-section-h { font-size: 14px; }
  .hq2-pa-table { font-size: 11px; }
  .hq2-pa-stat b { font-size: 18px; }
}

@media print {
  body.hq2-pa-printing * { visibility: hidden; }
  body.hq2-pa-printing .hq2-pa-doc,
  body.hq2-pa-printing .hq2-pa-doc * { visibility: visible; }
  body.hq2-pa-printing .hq2-pa-doc {
    position: absolute;
    left: 0; top: 0; right: 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    padding: 28px 36px;
  }
  body.hq2-pa-printing .hq2-pa-doc-head { border-bottom: 2px solid #000; }
  body.hq2-pa-printing { background: #ffffff !important; }
  @page { margin: 0.5in; }
}

/* ════════════════════════════════════════════════════════════════════
   Comms · Branded gallery — /hq2#/comms/branded
   ──────────────────────────────────────────────────────────────────── */

.hq2-cb-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 20px;
  font-family: var(--font-ui);
}
.hq2-cb-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hq2-cb-card-head {
  padding: 16px 18px 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-cb-card-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
}
.hq2-cb-card-channel {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hq2-cb-card-channel.is-email { background: rgba(27, 26, 107, 0.10); color: #1B1A6B; }
.hq2-cb-card-channel.is-sms   { background: rgba(15, 81, 50, 0.10); color: #0f5132; }
.hq2-cb-card-source {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-cb-card-source.is-default    { background: rgba(0, 0, 0, 0.04); color: rgba(0, 0, 0, 0.50); }
.hq2-cb-card-source.is-overridden { background: rgba(200, 140, 0, 0.14); color: #8a6500; }
.hq2-cb-card-h {
  margin: 0 0 4px 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
}
.hq2-cb-card-subject {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  line-height: 1.4;
}

.hq2-cb-card-preview {
  background: #FBF7EE;
  max-height: 460px;
  overflow: auto;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  /* Visual scale-down for the embedded email so 600px fits the
     360px-min card. Use transform-origin top-left so it doesn't drift. */
  position: relative;
}
.hq2-cb-card-preview > div {
  /* The email itself */
  transform-origin: top left;
}
.hq2-cb-card-preview {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.18) transparent;
}
.hq2-cb-card-preview::-webkit-scrollbar { width: 8px; height: 8px; }
.hq2-cb-card-preview::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.14); border-radius: 999px; }

.hq2-cb-card-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 14px;
  background: #fafafa;
}
.hq2-cb-card-foot .hq2-btn {
  font-size: 11px;
  padding: 6px 10px;
}

.hq2-cb-sms-preview {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 32px 20px;
  background: #FBF7EE;
  min-height: 240px;
}
.hq2-cb-sms-bubble {
  background: #1B1A6B;
  color: #ffffff;
  padding: 12px 16px;
  border-radius: 18px 18px 18px 4px;
  font-size: 14px;
  line-height: 1.5;
  max-width: 84%;
  font-family: -apple-system, BlinkMacSystemFont, 'Inter', sans-serif;
}
.hq2-cb-sms-meta {
  font-size: 10px;
  color: rgba(0, 0, 0, 0.45);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

@media (max-width: 600px) {
  .hq2-cb-gallery { grid-template-columns: 1fr; }
  .hq2-cb-card-preview { max-height: 380px; }
}

/* ════════════════════════════════════════════════════════════════════
   Revenue forecast w/ bands — /hq2#/revenueManagement/forecast
   ──────────────────────────────────────────────────────────────────── */

.hq2-rf-chart-wrap {
  width: 100%;
  margin: 4px 0 12px;
}
.hq2-rf-chart {
  width: 100%;
  height: auto;
  display: block;
}

.hq2-rf-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-rf-legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.hq2-rf-sw {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
}
.hq2-rf-sw.is-sub  { background: rgba(27, 26, 107, 0.42); }
.hq2-rf-sw.is-one  { background: rgba(71, 68, 160, 0.42); }
.hq2-rf-sw.is-cat  { background: rgba(200, 140, 0, 0.42); }
.hq2-rf-sw.is-band { background: rgba(27, 26, 107, 0.10); border: 1px solid rgba(27, 26, 107, 0.20); }

/* Per-source breakdown table */
.hq2-rf-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-rf-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-rf-table thead th.ar { text-align: right; }
.hq2-rf-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  vertical-align: middle;
}
.hq2-rf-table tbody td.ar { text-align: right; white-space: nowrap; }
.hq2-rf-table tbody tr:last-child td { border-bottom: none; }

.hq2-rf-tag {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  margin-right: 8px;
  vertical-align: middle;
}
.hq2-rf-tag.is-sub { background: #1B1A6B; }
.hq2-rf-tag.is-one { background: #4744a0; }
.hq2-rf-tag.is-cat { background: #c88c00; }

.hq2-rf-trend {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

.hq2-rf-band-pct {
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

.hq2-rf-foot {
  margin-top: 12px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  line-height: 1.6;
  font-family: var(--font-ui);
}

/* ════════════════════════════════════════════════════════════════════
   Manufacturing · Lot tracking — /hq2#/manufacturing/lots
   ──────────────────────────────────────────────────────────────────── */

.hq2-lots-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-ui);
}

.hq2-stat-card-val.is-warn { color: #c88c00; }

.hq2-lots-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-lots-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-lots-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-lots-table thead th.ar { text-align: right; }
.hq2-lots-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  vertical-align: middle;
}
.hq2-lots-table tbody td.ar { text-align: right; white-space: nowrap; }
.hq2-lots-table tbody tr:last-child td { border-bottom: none; }
.hq2-lots-table tbody tr:hover td { background: rgba(27, 26, 107, 0.02); }

.hq2-lots-cell-code code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: rgba(27, 26, 107, 0.08);
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 4px;
}

.hq2-lots-pill {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 6px;
}
.hq2-lots-pill.is-ok   { background: rgba(15, 81, 50, 0.10); color: #0f5132; }
.hq2-lots-pill.is-warn { background: rgba(200, 140, 0, 0.16); color: #8a6500; }
.hq2-lots-pill.is-fail { background: rgba(179, 33, 26, 0.14); color: #b3211a; }

.hq2-lots-allergen {
  display: inline-block;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
  background: rgba(200, 140, 0, 0.10);
  color: #8a6500;
  margin: 1px 3px 1px 0;
}
.hq2-lots-allergen-more {
  display: inline-block;
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-left: 4px;
}
.hq2-lots-empty {
  color: rgba(0, 0, 0, 0.28);
  font-style: italic;
  font-size: 11px;
}

/* ── Add modal ── */
.hq2-lots-modal { max-width: 520px; width: 100%; }
.hq2-lots-modal-preview {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  margin-bottom: 18px;
  background: rgba(27, 26, 107, 0.06);
  border: 1px solid rgba(27, 26, 107, 0.10);
  border-radius: 8px;
}
.hq2-lots-modal-preview span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-lots-modal-preview code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  letter-spacing: 0.02em;
}
.hq2-lots-modal-preview small {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}
.hq2-lots-modal-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hq2-lots-allergen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 6px;
  margin-top: 4px;
}
.hq2-lots-allergen-check {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.025);
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}
.hq2-lots-allergen-check input { margin: 0; }
.hq2-lots-allergen-check span {
  font-size: 11px;
  color: var(--ink-2, var(--ink));
  text-transform: lowercase;
}
.hq2-input-hint {
  display: block;
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  margin-top: 4px;
}

/* ── Print tag ── */
.hq2-lots-tag-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.hq2-lots-tag-modal {
  background: #ffffff;
  border-radius: 12px;
  width: min(420px, 92vw);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
}
.hq2-lots-tag-modalhead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hq2-lots-tag-modalhead h3 {
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-lots-tag-actions {
  display: flex;
  gap: 8px;
}
.hq2-lots-tag-doc {
  padding: 24px;
  background: rgba(0, 0, 0, 0.02);
  display: flex;
  justify-content: center;
}
.hq2-lots-tag {
  /* 4×3 inch sticker — preview at 4× = 384×288 px */
  width: 384px;
  min-height: 288px;
  background: #ffffff;
  border: 2px solid #1B1A6B;
  border-radius: 6px;
  padding: 16px 18px;
  font-family: var(--font-ui);
  color: var(--ink, #1B1A6B);
  display: flex;
  flex-direction: column;
}
.hq2-lots-tag-brand {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  padding-bottom: 6px;
  margin-bottom: 10px;
}
.hq2-lots-tag-brand b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.hq2-lots-tag-brand span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-lots-tag-recipe {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink, #1B1A6B);
  margin-bottom: 8px;
  line-height: 1.2;
}
.hq2-lots-tag-code code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  background: var(--ink, #1B1A6B);
  padding: 4px 10px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.hq2-lots-tag-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 12px;
  margin-top: 12px;
}
.hq2-lots-tag-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hq2-lots-tag-cell span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-lots-tag-cell b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
}
.hq2-lots-tag-allergens {
  margin-top: 12px;
  padding: 6px 10px;
  background: rgba(200, 140, 0, 0.10);
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #8a6500;
  border-left: 3px solid #c88c00;
}
.hq2-lots-tag-allergens.hq2-lots-tag-noallergens {
  background: rgba(15, 81, 50, 0.06);
  color: #0f5132;
  border-left-color: #0f5132;
  font-weight: 500;
}
.hq2-lots-tag-foot {
  margin-top: auto;
  padding-top: 8px;
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
}

/* Print: shrink everything except the tag */
@media print {
  body.hq2-lots-tag-printing * { visibility: hidden; }
  body.hq2-lots-tag-printing .hq2-lots-tag,
  body.hq2-lots-tag-printing .hq2-lots-tag * { visibility: visible; }
  body.hq2-lots-tag-printing .hq2-lots-tag {
    position: absolute;
    left: 0; top: 0;
    width: 4in;
    min-height: 3in;
    border: 2px solid #000;
    box-shadow: none;
  }
  body.hq2-lots-tag-printing .hq2-lots-tag-code code {
    background: #000 !important;
    color: #fff !important;
  }
  @page { size: 4in 3in; margin: 0.1in; }
}

@media (max-width: 600px) {
  .hq2-lots-table { font-size: 11px; }
  .hq2-lots-table tbody td, .hq2-lots-table thead th { padding: 8px 8px; }
  .hq2-lots-modal-grid2 { grid-template-columns: 1fr; }
  .hq2-lots-tag { width: 320px; }
}

/* ════════════════════════════════════════════════════════════════════
   Wave 3 finale CSS — 11 surfaces, shared/lightweight styling
   ──────────────────────────────────────────────────────────────────── */

/* Lifecycle journey flow grid */
.hq2-life-flow {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
  font-family: var(--font-ui);
}
.hq2-life-stage {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-life-stage-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-life-stage-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-life-stage h4 {
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
}
.hq2-life-stage-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-life-stage-list li {
  background: rgba(27, 26, 107, 0.04);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
}
.hq2-life-stage-list b { color: var(--ink, #1B1A6B); font-weight: 600; }
.hq2-life-stage-list small {
  flex-basis: 100%;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}
.hq2-life-stage-channel {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(27, 26, 107, 0.10);
  color: #1B1A6B;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.hq2-life-stage-empty {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.32);
  font-style: italic;
  padding: 8px 4px;
}

/* ─── Marketing · Audience builder (segments) ─────────────────── */
.hq2-seg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 12px;
  padding: 12px 0;
}
.hq2-seg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border: 1px solid rgba(27, 26, 107, 0.10);
  border-radius: 12px;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.hq2-seg-card:hover {
  border-color: rgba(27, 26, 107, 0.22);
  box-shadow: 0 4px 14px rgba(27, 26, 107, 0.05);
}
.hq2-seg-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.hq2-seg-card-head h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  line-height: 1.2;
}
.hq2-seg-card-count {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
}
.hq2-seg-card-desc {
  margin: 0;
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  line-height: 1.4;
}
.hq2-seg-card-rules {
  font-size: 12px;
  line-height: 1.6;
  color: rgba(0, 0, 0, 0.7);
  padding: 8px 10px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 8px;
}
.hq2-seg-card-rules code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  background: rgba(27, 26, 107, 0.08);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--ink, #1B1A6B);
}
.hq2-seg-op {
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  margin: 0 2px;
}
.hq2-seg-and {
  display: inline-block;
  margin: 0 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: rgba(0, 0, 0, 0.32);
  text-transform: uppercase;
}
.hq2-seg-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 4px;
}
.hq2-seg-card-meta {
  font-size: 11px;
  color: rgba(0, 0, 0, 0.4);
}
.hq2-seg-card-actions {
  display: flex;
  gap: 6px;
}
.hq2-seg-rules {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0;
}
.hq2-seg-rule-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 1fr auto;
  gap: 8px;
  align-items: center;
}
.hq2-seg-rule-x {
  width: 32px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.hq2-seg-rules-foot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0 4px;
  border-top: 1px dashed rgba(27, 26, 107, 0.12);
  margin-top: 4px;
}
.hq2-seg-compute-out {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.55);
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

/* ─── Marketing · Attribution tab ─────────────────────────────── */
.hq2-attr-subj {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  font-size: 13px;
}
.hq2-attr-aud {
  font-size: 11px;
  margin-top: 2px;
}

/* ─── Comms Compose · saved audiences group ───────────────────── */
.hq2-co-aud-saved-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ─── Comms Analytics · attribution columns on blast row ──────── */
.hq2-co-an-blast-open,
.hq2-co-an-blast-rev,
.hq2-co-an-blast-rpr {
  font-size: 11px;
  color: var(--ink-2, #4B4A75);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-top: 2px;
}
.hq2-co-an-blast-rev {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}
.hq2-co-an-blast-rev .muted {
  color: rgba(0, 0, 0, 0.5);
  font-weight: 400;
}

/* API docs page */
.hq2-api-dl {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 24px 0;
  font-family: var(--font-ui);
}
.hq2-api-dl dt {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 13px;
  color: var(--ink, #1B1A6B);
}
.hq2-api-dl dt code {
  background: rgba(27, 26, 107, 0.08);
  padding: 3px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.hq2-api-dl dt i {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  font-family: var(--font-ui);
  font-size: 11px;
  margin-left: 6px;
  font-weight: 500;
}
.hq2-api-dl dd {
  margin: 0;
  padding-left: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
}
.hq2-api-dl dd code {
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.hq2-api-h {
  margin: 24px 0 8px 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  padding-bottom: 4px;
}
.hq2-api-p {
  margin: 0 0 12px 0;
  font-family: var(--font-ui);
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
}

/* Vendor pricing grid */
.hq2-vp-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-ui);
}
.hq2-vp-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
}
.hq2-vp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafa;
}
.hq2-vp-card-head h4 {
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-vp-card-stats {
  display: flex;
  gap: 14px;
  align-items: baseline;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-vp-card-stats b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}
.hq2-vp-spread {
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(200, 140, 0, 0.14);
  color: #8a6500;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 10px;
}
.hq2-vp-cheapest td {
  background: rgba(15, 81, 50, 0.06) !important;
  font-weight: 500;
}

/* Trust center doc */
.hq2-trust-doc {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 36px 44px;
  font-family: var(--font-ui);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.04);
}
.hq2-trust-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 2px solid var(--ink, #1B1A6B);
  padding-bottom: 16px;
  margin-bottom: 28px;
}
.hq2-trust-letterhead { display: flex; flex-direction: column; }
.hq2-trust-letterhead b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  line-height: 1;
}
.hq2-trust-letterhead span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  font-weight: 600;
}
.hq2-trust-meta { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.hq2-trust-meta-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-trust-meta b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 500;
}

.hq2-trust-section {
  margin-bottom: 28px;
}
.hq2-trust-section h3 {
  margin: 0 0 12px 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  padding-bottom: 6px;
}
.hq2-trust-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.hq2-trust-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 10px;
  border: 1px solid rgba(27, 26, 107, 0.08);
}
.hq2-trust-stat b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink, #1B1A6B);
  line-height: 1;
}
.hq2-trust-stat span {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 500;
}
.hq2-trust-pledges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hq2-trust-pledges li {
  padding: 12px 16px;
  background: #fafafa;
  border-left: 3px solid var(--ink, #1B1A6B);
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
}
.hq2-trust-pledges b {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}
.hq2-trust-proof {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-trust-pill {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 14px;
  background: rgba(15, 81, 50, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(15, 81, 50, 0.14);
}
.hq2-trust-pill b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: #0f5132;
  font-variant-numeric: tabular-nums;
}
.hq2-trust-pill span {
  font-size: 13px;
  color: var(--ink-2, var(--ink));
}
.hq2-trust-foot {
  margin-top: 28px;
  padding-top: 12px;
  border-top: 1px dotted rgba(0, 0, 0, 0.12);
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}
.hq2-trust-foot b { color: var(--ink-2, var(--ink)); }

@media (max-width: 800px) {
  .hq2-trust-doc { padding: 24px 22px; }
  .hq2-trust-letterhead b { font-size: 22px; }
  .hq2-trust-stat b { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   Commerce · Cross-sell engine — /hq2#/commerce/crosssell
   ──────────────────────────────────────────────────────────────────── */

.hq2-cx-table tbody tr {
  cursor: pointer;
}
.hq2-cx-pair-cell {
  max-width: 360px;
}
.hq2-cx-pair {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-cx-prod-a, .hq2-cx-prod-b {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  background: rgba(27, 26, 107, 0.06);
  padding: 3px 9px;
  border-radius: 6px;
  font-size: 12px;
}
.hq2-cx-prod-b {
  background: rgba(15, 81, 50, 0.08);
  color: #0f5132;
}
.hq2-cx-arrow {
  font-weight: 700;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 12px;
}
.hq2-cx-action {
  font-size: 11px;
  font-style: italic;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

.hq2-cx-rail-head {
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--ink-2, var(--ink));
  line-height: 1.5;
  font-family: var(--font-ui);
}
.hq2-cx-rail-head b {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   Manufacturing · Recall workflow — /hq2#/manufacturing/recall
   ──────────────────────────────────────────────────────────────────── */

.hq2-recall-wizard-card .hq2-fi-body {
  padding: 24px 28px !important;
}

/* Step indicator */
.hq2-recall-steps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding-bottom: 18px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.10);
  font-family: var(--font-ui);
  flex-wrap: wrap;
}
.hq2-recall-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-recall-step.is-pending { color: rgba(0, 0, 0, 0.30); }
.hq2-recall-step.is-active {
  background: rgba(27, 26, 107, 0.08);
  color: var(--ink, #1B1A6B);
}
.hq2-recall-step.is-done { color: #0f5132; }
.hq2-recall-step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.08);
  font-size: 11px;
  font-weight: 700;
}
.hq2-recall-step.is-active .hq2-recall-step-n {
  background: var(--ink, #1B1A6B);
  color: #ffffff;
}
.hq2-recall-step.is-done .hq2-recall-step-n {
  background: #0f5132;
  color: #ffffff;
}

/* Step body */
.hq2-recall-step-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-ui);
}

/* Summary card (step 2) */
.hq2-recall-summary {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 8px;
}
.hq2-recall-summary-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-size: 12px;
}
.hq2-recall-summary-row .lbl {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  width: 70px;
  flex-shrink: 0;
}
.hq2-recall-summary-row b {
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}
.hq2-recall-summary-row code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: rgba(27, 26, 107, 0.08);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

/* Affected customers list */
.hq2-recall-affected h4 {
  margin: 0 0 10px 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
}
.hq2-recall-cust-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 6px;
  max-height: 260px;
  overflow-y: auto;
}
.hq2-recall-cust-list li {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 10px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 4px;
  font-size: 12px;
}
.hq2-recall-cust-list li b { color: var(--ink, #1B1A6B); font-weight: 600; }
.hq2-recall-cust-list li span {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.hq2-recall-more {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}

/* Severity buttons (step 3) */
.hq2-recall-sev-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hq2-recall-sev-btn {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #ffffff;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hq2-recall-sev-btn:hover {
  border-color: rgba(0, 0, 0, 0.24);
  color: var(--ink-2, var(--ink));
}
.hq2-recall-sev-btn.is-active {
  background: var(--ink, #1B1A6B);
  border-color: var(--ink, #1B1A6B);
  color: #ffffff;
}

/* Email preview */
.hq2-recall-preview {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 14px 18px;
}
.hq2-recall-preview-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  margin-bottom: 8px;
}
.hq2-recall-preview-subject {
  font-size: 13px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dotted rgba(0, 0, 0, 0.12);
  color: var(--ink-2, var(--ink));
}
.hq2-recall-preview-subject b {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  margin-right: 6px;
}
.hq2-recall-preview-body {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2, var(--ink));
  white-space: pre-wrap;
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
}

/* Confirm card (step 4) */
.hq2-recall-confirm {
  padding: 16px 18px;
  background: rgba(200, 140, 0, 0.04);
  border: 1px solid rgba(200, 140, 0, 0.18);
  border-radius: 8px;
}
.hq2-recall-confirm h4 {
  margin: 0 0 6px 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: #8a6500;
}
.hq2-recall-confirm p {
  margin: 0 0 12px 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2, var(--ink));
}
.hq2-recall-confirm-dl {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 12px;
}
.hq2-recall-confirm-dl dt {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.hq2-recall-confirm-dl dd {
  margin: 0;
  color: var(--ink, #1B1A6B);
  font-weight: 500;
}
.hq2-recall-confirm-dl dd code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 11px;
}

/* Action row */
.hq2-recall-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  flex-wrap: wrap;
}

/* Clean history */
.hq2-recall-clean {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  background: rgba(15, 81, 50, 0.06);
  border: 1px solid rgba(15, 81, 50, 0.18);
  border-radius: 8px;
  font-family: var(--font-ui);
}
.hq2-recall-clean b {
  font-size: 14px;
  color: #0f5132;
}
.hq2-recall-clean span {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   @-MENTION AUTOCOMPLETE POPUP
   ────────────────────────────────────────────────────────────────────
   Floats above the chat composer when the user types `@`. One global
   element (#hq2MentionPop), positioned in JS via getBoundingClientRect.
   Anchored to the composer's top-left so wraps + scrolls don't move
   it. Each row shows a small avatar + display name + @handle.
   ════════════════════════════════════════════════════════════════════ */
.hq2-mention-pop {
  position: fixed;
  z-index: 1200;
  min-width: 240px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 12px;
  box-shadow: 0 18px 48px -16px rgba(20, 16, 68, .25),
              0 4px 14px -8px rgba(20, 16, 68, .15);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 320px;
  overflow-y: auto;
  animation: hq2-mention-pop-in .12s cubic-bezier(.32, .72, 0, 1);
}
@keyframes hq2-mention-pop-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-mention-pop[hidden] { display: none; }

.hq2-mention-pop-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 0;
  background: transparent;
  color: var(--ink, #141044);
  font: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.hq2-mention-pop-row:hover,
.hq2-mention-pop-row.is-active {
  background: rgba(200, 169, 110, .14);
}
.hq2-mention-pop-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.hq2-mention-pop-name {
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-mention-pop-handle {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════════════════
   Wave 4 finale CSS — shared callouts for in-place enhancements
   ──────────────────────────────────────────────────────────────────── */

.hq2-hike-callout {
  margin: 0 0 16px;
  padding: 14px 18px;
  background: rgba(200, 140, 0, 0.06);
  border: 1px solid rgba(200, 140, 0, 0.20);
  border-left: 3px solid #c88c00;
  border-radius: 8px;
  font-family: var(--font-ui);
}
.hq2-hike-callout header {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.hq2-hike-callout header b {
  font-size: 13px;
  font-weight: 700;
  color: #8a6500;
}
.hq2-hike-callout header span {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}
.hq2-hike-callout ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-hike-callout li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  flex-wrap: wrap;
}
.hq2-hike-callout li b {
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}
.hq2-hike-callout li span:not(.hq2-pa-pill) {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

/* ════════════════════════════════════════════════════════════════════
   Financials hub · Mix + Perks — /hq2#/financials/{mix,perks}
   ──────────────────────────────────────────────────────────────────── */

.hq2-mix-bars {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--font-ui);
}
.hq2-mix-bar {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 14px;
  align-items: center;
}
.hq2-mix-bar-l {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1.2;
}
.hq2-mix-bar-l b {
  font-size: 13px;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  text-transform: capitalize;
}
.hq2-mix-bar-l span {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-mix-bar-r {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hq2-mix-bar-fill {
  display: block;
  height: 14px;
  border-radius: 4px;
  min-width: 4px;
}
.hq2-mix-bar-r b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, var(--ink));
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.hq2-perk-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-ui);
}
.hq2-perk-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 6px;
  border-left: 3px solid var(--ink, #1B1A6B);
}
.hq2-perk-list b {
  font-size: 13px;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  text-transform: capitalize;
}
.hq2-perk-list span {
  font-size: 12px;
  color: var(--ink-2, var(--ink));
}

.hq2-perk-econ {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 6px 16px;
  margin: 0;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-perk-econ dt {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.hq2-perk-econ dd {
  margin: 0;
  color: var(--ink-2, var(--ink));
  font-variant-numeric: tabular-nums;
}
.hq2-perk-econ dd b {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}

/* ════════════════════════════════════════════════════════════════════
   PRINT RUN — packing slips + shipping labels staging surface
   ────────────────────────────────────────────────────────────────────
   List view + sticky toolbar + per-row checkbox. Print buttons in the
   hero are disabled until at least one row is checked. Same paper-
   card aesthetic as the rest of mise; status pills mirror the order
   status enum (paid / processing / packed / shipped / delivered).
   ════════════════════════════════════════════════════════════════════ */
.hq2-pr {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.hq2-pr-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(720px 380px at 92% -10%, rgba(220, 245, 232, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .75) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
}
.hq2-pr-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hq2-pr-hero-r { display: flex; gap: 10px; flex-shrink: 0; align-items: center; }

.hq2-pr-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  flex-wrap: wrap;
  box-shadow: 0 4px 12px -8px rgba(20, 16, 68, .08);
}
.hq2-pr-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 9px;
  color: var(--ink-3, #6E7088);
  flex: 1;
  max-width: 360px;
  min-width: 220px;
}
.hq2-pr-search .hq2-input { flex: 1; border: 0; background: transparent; padding: 4px 0; font-size: 13px; }
.hq2-pr-search .hq2-input:focus { outline: 0; }
.hq2-pr-selectall {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3, #6E7088);
  cursor: pointer;
  font-weight: 600;
  padding: 6px 10px;
  border: 1px solid rgba(20, 16, 68, .08);
  border-radius: 8px;
  background: #fff;
}
.hq2-pr-selectall input { width: 14px; height: 14px; cursor: pointer; accent-color: var(--ink, #141044); }

.hq2-pr-body {
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
}
.hq2-pr-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-3, #6E7088);
  font-family: var(--font-ui);
  font-size: var(--t-13);
}

.hq2-pr-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--t-13);
}
.hq2-pr-table thead th {
  text-align: left;
  font-size: var(--t-10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  padding: 10px 14px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2, #FAF7F2);
}
.hq2-pr-table .col-check { width: 36px; padding-right: 0; }
.hq2-pr-table .col-due, .hq2-pr-table .col-items, .hq2-pr-table .col-total, .hq2-pr-table .col-status, .hq2-pr-table .col-id { white-space: nowrap; }
.hq2-pr-table .col-items, .hq2-pr-table .col-total { text-align: right; font-variant-numeric: tabular-nums; }
.hq2-pr-table tbody tr {
  border-top: 1px solid var(--rule);
  transition: background .12s;
}
.hq2-pr-table tbody tr:hover { background: rgba(20, 16, 68, .02); }
.hq2-pr-table tbody tr.is-selected { background: rgba(200, 169, 110, .07); }
.hq2-pr-table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
}
.hq2-pr-table tbody tr:first-child td { border-top: 0; }
.hq2-pr-table .col-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--ink, #141044); }
.hq2-pr-status-pill {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--surface-2, #FAF7F2);
  color: var(--ink-3, #6E7088);
}
.hq2-pr-status-pill.is-paid { background: rgba(34, 197, 94, .12); color: #15803d; }
.hq2-pr-status-pill.is-processing { background: rgba(234, 179, 8, .14); color: #a16207; }
.hq2-pr-status-pill.is-packed { background: rgba(99, 102, 241, .12); color: #4338ca; }
.hq2-pr-status-pill.is-shipped { background: rgba(14, 165, 233, .12); color: #0369a1; }
.hq2-pr-status-pill.is-delivered { background: rgba(20, 16, 68, .08); color: var(--ink-3, #6E7088); }
.hq2-pr-status-pill.is-cancelled { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.hq2-pr-id {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-11);
  color: var(--ink-3, #6E7088);
}

/* ════════════════════════════════════════════════════════════════════
   SITE PHOTOS — staff swap-out for landing-page imagery
   ────────────────────────────────────────────────────────────────────
   Tabs across the top (about / store / bakery / catering), then a
   grid of slot cards per section. Each card shows the current image
   (or "default photo" placeholder), the slot key, an aspect hint, and
   replace / revert buttons. White paper-card aesthetic to match the
   rest of mise.
   ════════════════════════════════════════════════════════════════════ */
.hq2-sphotos {
  display: flex;
  flex-direction: column;
  background: var(--bg);
}
.hq2-sphotos-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(720px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(237, 230, 255, .85) 0%, transparent 60%),
    radial-gradient(520px 360px at 110% 95%, rgba(220, 245, 232, .55) 0%, transparent 55%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
}
.hq2-sphotos-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }

.hq2-sphotos-tabs {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  gap: 4px;
  padding: 10px clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  flex-wrap: wrap;
}
.hq2-sphotos-tab {
  font-family: var(--font-ui);
  font-size: var(--t-12);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .02em;
  padding: 6px 14px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--ink-3, #6E7088);
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.hq2-sphotos-tab:hover { color: var(--ink, #141044); background: rgba(20, 16, 68, .05); }
.hq2-sphotos-tab.is-active {
  background: var(--ink, #141044);
  color: #fff;
  border-color: var(--ink, #141044);
}

.hq2-sphotos-body {
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.hq2-sphotos-section { display: flex; flex-direction: column; gap: 10px; }
.hq2-sphotos-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px;
}
.hq2-sphotos-section-head h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  font-weight: 800;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
  text-transform: capitalize;
}
.hq2-sphotos-section-head .meta {
  font-size: var(--t-11);
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 600;
}

.hq2-sphotos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.hq2-sphotos-card {
  background: #fff;
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
  display: flex;
  flex-direction: column;
}
.hq2-sphotos-thumb {
  aspect-ratio: 4/3;
  background: var(--surface-2, #FAF7F2);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid rgba(20, 16, 68, .05);
}
.hq2-sphotos-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hq2-sphotos-thumb-empty {
  font-family: var(--font-ui);
  font-size: var(--t-10);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
}
.hq2-sphotos-meta {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px 4px;
}
.hq2-sphotos-meta-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq2-sphotos-meta-l b {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
}
.hq2-sphotos-key {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-10);
  color: var(--ink-3, #6E7088);
  letter-spacing: .03em;
}
.hq2-sphotos-hint {
  font-size: var(--t-11);
  color: var(--ink-3, #6E7088);
  margin-top: 2px;
}
.hq2-sphotos-ago {
  font-size: var(--t-10);
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
  white-space: nowrap;
}
.hq2-sphotos-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px 14px;
  flex-wrap: wrap;
}
.hq2-sphotos-actions .hq2-btn { font-size: var(--t-12); padding: 6px 12px; }
.hq2-sphotos-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-3, #6E7088);
  font-family: var(--font-ui);
  font-size: var(--t-13);
}

/* ════════════════════════════════════════════════════════════════════
   AUTO REORDER — par-level → draft POs
   ────────────────────────────────────────────────────────────────────
   Hero with a 3-KPI strip (below par / vendors / est. cost), sticky
   toolbar with the buffer + refill knobs and the "draft all POs"
   button, then per-vendor cards with editable line-item tables.
   ════════════════════════════════════════════════════════════════════ */
.hq2-ar { display: flex; flex-direction: column; background: var(--bg); }
.hq2-ar-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(720px 380px at 92% -10%, rgba(255, 230, 220, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(220, 245, 232, .55) 0%, transparent 60%),
    linear-gradient(180deg, #FFF6F0 0%, #FBF7FF 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
}
.hq2-ar-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hq2-ar-hero-r { display: flex; gap: 14px; flex-shrink: 0; }
.hq2-ar-kpis { display: grid; grid-template-columns: repeat(3, minmax(80px, 1fr)); gap: 8px; }
.hq2-ar-kpi {
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(20, 16, 68, .07);
  border-radius: 11px;
  padding: 10px 14px;
  text-align: center;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: center;
  min-width: 80px;
}
.hq2-ar-kpi b {
  font-size: 18px;
  font-weight: 900;
  color: #141044;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.hq2-ar-kpi span {
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  font-weight: 700;
}

.hq2-ar-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  flex-wrap: wrap;
  box-shadow: 0 4px 12px -8px rgba(20, 16, 68, .08);
}
.hq2-ar-knob {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: var(--t-12);
  color: var(--ink-3, #6E7088);
}
.hq2-ar-knob span {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--t-10);
}
.hq2-ar-knob select {
  font-size: var(--t-12) !important;
  padding: 4px 8px !important;
  min-width: 200px;
}
.hq2-ar-toolbar-spacer { flex: 1; }

/* Auto-draft scheduler card — sits between toolbar + body */
.hq2-ar-cron {
  margin: 0 clamp(20px, 3vw, 36px);
  padding: 14px 18px;
  background: linear-gradient(135deg, #FAFCFF 0%, #F4F8FE 100%);
  border: 1px solid var(--rule);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}
.hq2-ar-cron-l {
  flex: 1 1 320px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-ar-cron-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-ui);
}
.hq2-ar-cron-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.hq2-ar-cron-pill {
  width: 36px;
  height: 20px;
  background: #DCDCE6;
  border-radius: 999px;
  position: relative;
  transition: background .15s ease;
  flex-shrink: 0;
}
.hq2-ar-cron-pill::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform .15s ease;
  box-shadow: 0 1px 2px rgba(20,16,68,.2);
}
.hq2-ar-cron-toggle input:checked ~ .hq2-ar-cron-pill { background: #0F8B43; }
.hq2-ar-cron-toggle input:checked ~ .hq2-ar-cron-pill::after { transform: translateX(16px); }
.hq2-ar-cron-label {
  font-size: var(--t-14);
  color: var(--ink, #141044);
  font-weight: 600;
}
.hq2-ar-cron-blurb {
  margin: 0;
  font-size: var(--t-13);
  color: var(--ink-3, #6E7088);
  line-height: 1.5;
  max-width: 600px;
}
.hq2-ar-cron-r {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.hq2-ar-cron-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-ui);
}
.hq2-ar-cron-stat span {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hq2-ar-cron-stat b {
  font-size: var(--t-14);
  color: var(--ink, #141044);
}

.hq2-ar-body {
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hq2-ar-empty {
  padding: 50px 32px;
  text-align: center;
  color: var(--ink-3, #6E7088);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.hq2-ar-empty b { color: var(--ink, #141044); font-size: var(--t-14); }
.hq2-ar-empty span { font-size: var(--t-13); max-width: 480px; }

.hq2-ar-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-ar-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2, #FAF7F2);
}
.hq2-ar-card-head-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hq2-ar-card-head-l h3 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  font-weight: 800;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
}
.hq2-ar-card-head-l .meta {
  font-size: var(--t-11);
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.hq2-ar-card-head-r { display: flex; align-items: center; gap: 10px; }
.hq2-ar-card-est {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 800;
  color: var(--ink, #141044);
  font-variant-numeric: tabular-nums;
}
.hq2-ar-items {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: var(--t-12);
}
.hq2-ar-items thead th {
  text-align: left;
  font-size: var(--t-10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
}
.hq2-ar-items td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.hq2-ar-items tr:last-child td { border-bottom: 0; }
.hq2-ar-items .col-check { width: 28px; }
.hq2-ar-items .col-cur, .hq2-ar-items .col-par, .hq2-ar-items .col-line { white-space: nowrap; font-variant-numeric: tabular-nums; }
.hq2-ar-items .col-qty, .hq2-ar-items .col-price { width: 110px; }
.hq2-ar-items .col-line { width: 80px; text-align: right; font-weight: 700; color: var(--ink, #141044); }
.hq2-ar-items .col-name b { display: block; font-size: var(--t-13); font-weight: 700; color: var(--ink, #141044); }
.hq2-ar-items .col-name .hq2-ar-kind {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
}
.hq2-ar-items input[type="checkbox"] { width: 15px; height: 15px; cursor: pointer; accent-color: var(--ink, #141044); }
.hq2-ar-items .hq2-ar-qty,
.hq2-ar-items .hq2-ar-price {
  width: 95px;
  padding: 5px 8px !important;
  font-size: var(--t-12) !important;
  font-variant-numeric: tabular-nums;
}
.hq2-ar-items .col-price { position: relative; }
.hq2-ar-price-src {
  display: block;
  font-size: 9px;
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-top: 2px;
}
.hq2-ar-items tr.is-off td { opacity: .35; }
.hq2-ar-items tr.is-off input[type="checkbox"] { opacity: 1; }

/* ════════════════════════════════════════════════════════════════════
   Cost Lab — /hq2#/financials/lab
   ──────────────────────────────────────────────────────────────────── */

.hq2-lab-shell {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(380px, 1fr);
  gap: 20px;
  font-family: var(--font-ui);
  margin-top: 16px;
}

.hq2-lab-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.hq2-lab-right {
  position: sticky;
  top: 16px;
  align-self: start;
}

/* ── Picker ── */
.hq2-lab-picker {
  position: relative;
}
.hq2-lab-search {
  width: 100%;
  font-size: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  background: #ffffff;
}
.hq2-lab-search:focus {
  border-color: var(--ink, #1B1A6B);
  outline: 2px solid rgba(27, 26, 107, 0.10);
}
.hq2-lab-results {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  z-index: 10;
  max-height: 320px;
  overflow-y: auto;
}
.hq2-lab-results:empty { display: none; }
.hq2-lab-result-row {
  display: grid;
  grid-template-columns: 64px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-family: var(--font-ui);
}
.hq2-lab-result-row:last-child { border-bottom: none; }
.hq2-lab-result-row:hover { background: rgba(27, 26, 107, 0.04); }
.hq2-lab-result-row.is-selected { background: rgba(27, 26, 107, 0.08); }
.hq2-lab-result-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-lab-result-price {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
}
.hq2-lab-no-results {
  padding: 16px;
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}

.hq2-lab-kind {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.hq2-lab-kind.is-recipe  { background: rgba(27, 26, 107, 0.10); color: #1B1A6B; }
.hq2-lab-kind.is-product { background: rgba(15, 81, 50, 0.10);  color: #0f5132; }

/* ── Cost stack (left main) ── */
.hq2-lab-stack {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
}

/* Empty state stretches to fill the stack and vertically centers its
   prompt — without this, "Pick an item to start" sits pinned to the
   top of a tall panel instead of in the middle. When a real item is
   loaded the stack-head + body fill naturally and this rule isn't
   engaged. */
.hq2-lab-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  text-align: center;
  color: var(--ink-2, var(--ink));
}
.hq2-lab-empty-glyph {
  font-size: 48px;
  color: rgba(27, 26, 107, 0.20);
  margin-bottom: 16px;
  font-family: var(--font-display, 'Fraunces', serif);
}
.hq2-lab-empty h3 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  margin: 0 0 8px 0;
}
.hq2-lab-empty p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin: 0 auto 20px;
  max-width: 480px;
}
.hq2-lab-empty-shortcuts {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dotted rgba(0, 0, 0, 0.10);
  text-align: left;
  max-width: 520px;
  margin: 24px auto 0;
}
.hq2-lab-empty-shortcuts h4 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  margin: 0 0 10px 0;
}
.hq2-lab-shortcuts-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-lab-shortcut {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(200, 140, 0, 0.04);
  border: 1px solid rgba(200, 140, 0, 0.18);
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  cursor: pointer;
  text-align: left;
}
.hq2-lab-shortcut:hover { background: rgba(200, 140, 0, 0.08); }
.hq2-lab-shortcut-name { font-weight: 600; color: var(--ink, #1B1A6B); }
.hq2-lab-shortcut-margin {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hq2-lab-shortcut-margin.is-bad  { color: #b3211a; }
.hq2-lab-shortcut-margin.is-thin { color: #8a6500; }
.hq2-lab-shortcut-arrow {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}

.hq2-lab-stack-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  background: #fafafa;
}
.hq2-lab-stack-title {
  display: flex;
  align-items: center;
  gap: 10px;
}
.hq2-lab-stack-title h3 {
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
}
.hq2-lab-stack-clear {
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
}
.hq2-lab-stack-clear:hover {
  border-color: rgba(0, 0, 0, 0.24);
  color: var(--ink, #1B1A6B);
}
/* Reciprocal "↗ edit" link in the stack title — bounces back to the
   recipe/product detail editor while keeping Cost Lab state intact. */
.hq2-lab-stack-edit {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-decoration: none;
  padding: 4px 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 6px;
  transition: color 0.12s ease, border-color 0.12s ease;
}
.hq2-lab-stack-edit:hover {
  color: var(--ink, #1B1A6B);
  border-color: rgba(0, 0, 0, 0.24);
}

.hq2-lab-stack-body {
  padding: 18px 22px 22px;
}
.hq2-lab-stack-section {
  margin-bottom: 18px;
}
.hq2-lab-stack-section.is-disabled { opacity: 0.4; }
.hq2-lab-stack-section-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  margin-bottom: 8px;
  font-family: var(--font-ui);
}
.hq2-lab-stack-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.hq2-lab-stack-section-head span {
  flex: 1;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink, #1B1A6B);
}
.hq2-lab-stack-section-head b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-lab-yield {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-lab-yield > span {
  flex: none;
  font-size: 11px;
  font-weight: 500;
  text-transform: lowercase;
  letter-spacing: 0;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-lab-yield-input {
  width: 56px;
  padding: 4px 6px;
  font-size: 12px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* × separator between yield + units-per-yield inputs */
.hq2-lab-yield-x {
  display: inline-block;
  margin: 0 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
}
.hq2-lab-stack-batch {
  flex: none;
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
  text-transform: none;
  letter-spacing: 0;
}
.hq2-lab-stack-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-lab-stack-row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.2fr) auto;
  align-items: baseline;
  gap: 12px;
  padding: 6px 12px;
  font-size: 12px;
  border-radius: 4px;
}
.hq2-lab-stack-row:hover { background: rgba(27, 26, 107, 0.03); }
.hq2-lab-stack-row.is-missing {
  background: rgba(179, 33, 26, 0.06);
}
.hq2-lab-stack-row.is-fallback {
  background: rgba(200, 140, 0, 0.04);
  font-style: italic;
}
.hq2-lab-stack-label {
  color: var(--ink-2, var(--ink));
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-lab-stack-label small {
  font-weight: 500;
  font-size: 10px;
  color: #b3211a;
  margin-left: 6px;
}
.hq2-lab-stack-detail {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-lab-stack-amt {
  color: var(--ink, #1B1A6B);
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.hq2-lab-stack-empty {
  padding: 6px 12px;
  font-size: 11px;
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
}
.hq2-lab-stack-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 12px;
  margin-top: 12px;
  background: var(--ink, #1B1A6B);
  color: #ffffff;
  border-radius: 8px;
}
.hq2-lab-stack-total span {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.75);
}
.hq2-lab-stack-total b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: #ffffff;
}

/* ── Simulator (right column) ── */
.hq2-lab-sim {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.hq2-lab-sim-head {
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  padding-bottom: 12px;
}
.hq2-lab-sim-eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-lab-sim-head h3 {
  margin: 4px 0 0 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
  word-break: break-word;
}
/* Bakery / meal-prep badge — surfaces which Cost Lab math path is
   active (flat bakery pack + kitchen-share split vs per-meal stack).
   Default = meal-prep (navy chip); bakery flips to warm amber. */
.hq2-lab-sim-kind {
  display: inline-block;
  margin-top: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: #eef0ff;
  color: #4744a0;
  border: 1px solid rgba(71, 68, 160, 0.15);
  /* Clickable — flip bakery ↔ meal-prep on click. Tooltip explains. */
  cursor: pointer;
  user-select: none;
  transition: transform 80ms ease, box-shadow 80ms ease, background 120ms ease;
}
.hq2-lab-sim-kind:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(71, 68, 160, 0.18);
}
.hq2-lab-sim-kind:active {
  transform: translateY(0);
  box-shadow: none;
}
.hq2-lab-sim-kind:focus-visible {
  outline: 2px solid rgba(71, 68, 160, 0.45);
  outline-offset: 2px;
}
.hq2-lab-sim-kind[data-kind="bakery"] {
  background: #fdf1e1;
  color: #9a5b06;
  border-color: rgba(154, 91, 6, 0.20);
}
.hq2-lab-sim-kind[data-kind="bakery"]:hover {
  box-shadow: 0 2px 6px rgba(154, 91, 6, 0.22);
}
.hq2-lab-sim-kind[data-kind="bakery"]:focus-visible {
  outline-color: rgba(154, 91, 6, 0.50);
}

.hq2-lab-sim-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.hq2-lab-control {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-lab-control-lbl {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}

.hq2-lab-pack-row {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.hq2-lab-pack-btn {
  /* Hug the label so ladder names like "half dozen", "3 pack",
     "dozen" don't get clipped or wrap mid-word inside the box.
     Numeric-only pack labels (the generic 1/2/5/10 fallback) still
     hit the min-width and stay grid-like. */
  min-width: 44px;
  height: auto;
  min-height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  background: #ffffff;
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink-2, var(--ink));
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
  text-align: center;
}
.hq2-lab-pack-btn:hover {
  border-color: var(--ink, #1B1A6B);
}
.hq2-lab-pack-btn.is-active {
  background: var(--ink, #1B1A6B);
  border-color: var(--ink, #1B1A6B);
  color: #ffffff;
}
.hq2-lab-pack-custom {
  height: 36px;
  font-size: 12px;
  padding: 0 10px;
}

.hq2-lab-margin-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.hq2-lab-margin-row input[type=range] {
  flex: 1;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: linear-gradient(90deg, rgba(179, 33, 26, 0.30) 0%, rgba(200, 140, 0, 0.30) 33%, rgba(15, 81, 50, 0.30) 66%, rgba(15, 81, 50, 0.50) 100%);
  border-radius: 999px;
  outline: none;
}
.hq2-lab-margin-row input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--ink, #1B1A6B);
  border: 3px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(27, 26, 107, 0.35);
}
.hq2-lab-margin-row input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--ink, #1B1A6B);
  border: 3px solid #ffffff;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(27, 26, 107, 0.35);
}
.hq2-lab-margin-val {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  min-width: 56px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.hq2-lab-margin-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hq2-lab-preset {
  flex: 1;
  min-width: 90px;
  padding: 6px 8px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  text-transform: lowercase;
  transition: all 0.15s ease;
}
.hq2-lab-preset:hover {
  background: rgba(27, 26, 107, 0.06);
  color: var(--ink, #1B1A6B);
}

/* ── Result panel ── */
.hq2-lab-result {
  margin-top: 4px;
}
.hq2-lab-result-empty {
  padding: 24px 16px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-align: center;
  font-style: italic;
}
.hq2-lab-result-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.hq2-lab-result-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.025);
  border-radius: 8px;
  border-left: 3px solid rgba(0, 0, 0, 0.06);
}
.hq2-lab-result-cell.hq2-lab-result-suggested {
  background: rgba(27, 26, 107, 0.08);
  border-left-color: var(--ink, #1B1A6B);
}
.hq2-lab-result-cell span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-lab-result-cell b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin-top: 2px;
}
.hq2-lab-result-cell small {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 2px;
}
.hq2-lab-result-delta.is-up   { color: #0f5132; }
.hq2-lab-result-delta.is-down { color: #b3211a; }
.hq2-lab-result-delta.is-flat { color: var(--ink-3, rgba(0, 0, 0, 0.55)); }

/* Profit cell — spans the full row so the "after costs" bottom line
   reads as a verdict rather than a 5th tile crammed onto a half-row.
   Green tint when positive, red when negative, neutral when no price
   yet. Sits below the 2×2 of suggested/current/delta/cost. */
.hq2-lab-result-cell.hq2-lab-result-profitcell {
  grid-column: 1 / -1;
  background: rgba(15, 81, 50, 0.06);
  border-left-color: #0f5132;
}
.hq2-lab-result-profit.is-up   { color: #0f5132; }
.hq2-lab-result-profit.is-down { color: #b3211a; }

/* Current-price cell — editable.
   When the user types over the resolved price, .is-override flips
   the border accent so it's obvious the typed value is in effect
   and the Stripe fee is anchored to it. */
.hq2-lab-result-cell.hq2-lab-result-current.is-override {
  background: rgba(200, 140, 0, 0.08);
  border-left-color: #c88c00;
}
.hq2-lab-result-override {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 8px;
  letter-spacing: 0.08em;
  background: #c88c00;
  color: #fff;
  border-radius: 999px;
  vertical-align: middle;
}
.hq2-lab-result-priceinput {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.hq2-lab-result-priceprefix {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
  /* Reset the parent .hq2-lab-result-cell span baseline so the $
     sign doesn't render as an uppercase label. */
  text-transform: none;
}
input.hq2-lab-price-input {
  flex: 1;
  min-width: 0;
  padding: 4px 6px;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 22px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.15);
  border-radius: 6px;
}
input.hq2-lab-price-input:focus {
  outline: none;
  border-color: var(--ink, #1B1A6B);
  border-style: solid;
}
input.hq2-lab-price-input::-webkit-outer-spin-button,
input.hq2-lab-price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.hq2-lab-price-reset {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
}
.hq2-lab-price-reset:hover {
  border-color: var(--ink, #1B1A6B);
  color: var(--ink, #1B1A6B);
}
.hq2-lab-price-save {
  appearance: none;
  margin-top: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #0f5132;
  color: #fff;
  border: 1px solid #0f5132;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
}
.hq2-lab-price-save:hover {
  background: #0a3d24;
  border-color: #0a3d24;
}
.hq2-lab-price-save[hidden] { display: none !important; }

/* ── Pack-size ladder ──
   Side-by-side comparison of every pack option (from packOptions[] or
   the tier ladder, falling back to [1,2,5,10]). Each row shows the
   cost stack at that pack, the suggested price at target margin, the
   recipe's published price for that pack, the resulting margin, and a
   status pill keyed to the margin gap. Clicking a row switches the
   active pack. */
.hq2-lab-ladder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.hq2-lab-ladder:empty { display: none; }
.hq2-lab-ladder-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.hq2-lab-ladder-hint {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}
.hq2-lab-ladder-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
}
.hq2-lab-ladder-table thead th {
  background: rgba(0, 0, 0, 0.025);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  font-weight: 600;
  padding: 8px 10px;
  text-align: right;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-lab-ladder-table thead th:first-child {
  text-align: left;
}
.hq2-lab-ladder-table tbody td {
  padding: 10px;
  text-align: right;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  color: var(--ink-2, rgba(27, 26, 107, 0.85));
  white-space: nowrap;
}
.hq2-lab-ladder-table tbody td:first-child {
  text-align: left;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-lab-ladder-table tbody tr:last-child td {
  border-bottom: 0;
}
.hq2-lab-ladder-table tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.hq2-lab-ladder-table tbody tr:hover:not(.is-current) {
  background: rgba(0, 0, 0, 0.025);
}
.hq2-lab-ladder-table tbody tr.is-current {
  background: rgba(27, 26, 107, 0.06);
}
.hq2-lab-ladder-empty {
  color: rgba(0, 0, 0, 0.30);
}
.hq2-lab-ladder-pill {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: rgba(0, 0, 0, 0.06);
  color: rgba(0, 0, 0, 0.55);
}
.hq2-lab-ladder-pill.is-now {
  background: var(--ink, #1B1A6B);
  color: #fff;
  margin-left: 6px;
}
.hq2-lab-ladder-pill.is-ok {
  background: rgba(15, 81, 50, 0.12);
  color: #0f5132;
}
.hq2-lab-ladder-pill.is-thin {
  background: rgba(200, 140, 0, 0.15);
  color: #c88c00;
}
.hq2-lab-ladder-pill.is-bad {
  background: rgba(179, 33, 26, 0.12);
  color: #b3211a;
}
.hq2-lab-ladder-pill.is-unpriced {
  background: rgba(0, 0, 0, 0.05);
  color: rgba(0, 0, 0, 0.45);
}

/* ── Waterfall ── */
.hq2-lab-waterfall {
  padding-top: 4px;
}
.hq2-lab-waterfall:empty { display: none; }
.hq2-lab-water-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
  font-family: var(--font-ui);
}
.hq2-lab-water-head span {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-lab-water-head b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-lab-water-bar {
  display: flex;
  height: 26px;
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
  background: rgba(0, 0, 0, 0.03);
}
.hq2-lab-water-seg {
  display: block;
  height: 100%;
  transition: filter 0.15s ease;
}
.hq2-lab-water-seg:hover {
  filter: brightness(1.1);
}
.hq2-lab-water-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
}
.hq2-lab-water-legend span {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink-2, var(--ink));
  font-variant-numeric: tabular-nums;
}
.hq2-lab-water-legend i {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: center;
}
.hq2-lab-water-legend small {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

/* ── What-if ── */
.hq2-lab-whatif {
  padding-top: 12px;
  border-top: 1px dotted rgba(0, 0, 0, 0.10);
}
.hq2-lab-whatif-head {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  margin-bottom: 8px;
}
.hq2-lab-whatif-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.hq2-lab-whatif-btn {
  padding: 6px 12px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-2, var(--ink));
  cursor: pointer;
  transition: all 0.15s ease;
}
.hq2-lab-whatif-btn:hover {
  background: rgba(27, 26, 107, 0.08);
  border-color: var(--ink, #1B1A6B);
  color: var(--ink, #1B1A6B);
}
.hq2-lab-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  cursor: pointer;
}

/* ── Actions ── */
.hq2-lab-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-lab-actions .hq2-btn {
  width: 100%;
  justify-content: center;
}

@media (max-width: 980px) {
  .hq2-lab-shell {
    grid-template-columns: 1fr;
  }
  .hq2-lab-right {
    position: static;
  }
}

@media (max-width: 600px) {
  .hq2-lab-result-grid { grid-template-columns: 1fr; }
  .hq2-lab-margin-presets { flex-direction: column; }
  .hq2-lab-margin-presets .hq2-lab-preset { width: 100%; }
}
/* ════════════════════════════════════════════════════════════════════
   AUDIT LOG — append-only history viewer
   ────────────────────────────────────────────────────────────────────
   Hero with single-KPI strip (events count). Sticky toolbar with
   search + two pillrows (action filter, severity filter). Table view
   with avatar-led actor cell; severity tints the row's left edge so
   high-impact events catch the eye on long lists.
   ════════════════════════════════════════════════════════════════════ */
.hq2-aud { display: flex; flex-direction: column; background: var(--bg); }
.hq2-aud-hero {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(16px, 2vw, 28px);
  padding: clamp(20px, 3vw, 32px) clamp(20px, 3vw, 36px);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  background:
    radial-gradient(720px 380px at 92% -10%, rgba(237, 230, 255, .85) 0%, transparent 55%),
    radial-gradient(640px 360px at -10% 8%,  rgba(255, 230, 220, .55) 0%, transparent 60%),
    linear-gradient(180deg, #FBF7FF 0%, #FFF6F0 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
  overflow: hidden;
}
.hq2-aud-hero-l { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.hq2-aud-hero-r { display: flex; gap: 14px; flex-shrink: 0; }
.hq2-aud-toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px clamp(20px, 3vw, 36px);
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(20, 16, 68, .07);
  backdrop-filter: saturate(140%);
  -webkit-backdrop-filter: saturate(140%);
  box-shadow: 0 4px 12px -8px rgba(20, 16, 68, .08);
}
.hq2-aud-body {
  padding: clamp(14px, 2vw, 22px) clamp(20px, 3vw, 36px);
}
.hq2-aud-empty {
  padding: 32px;
  text-align: center;
  color: var(--ink-3, #6E7088);
  font-family: var(--font-ui);
  font-size: var(--t-13);
}

.hq2-aud-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: var(--t-12);
}
.hq2-aud-table thead th {
  text-align: left;
  font-size: var(--t-10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  padding: 10px 14px;
  background: var(--surface-2, #FAF7F2);
  border-bottom: 1px solid var(--rule);
}
.hq2-aud-table tbody td {
  padding: 12px 14px;
  border-top: 1px solid var(--rule);
  vertical-align: top;
}
.hq2-aud-row.sev-high {
  border-left: 3px solid #DC2626;
}
.hq2-aud-row.sev-warn {
  border-left: 3px solid #B86E14;
}
.hq2-aud-row.sev-info {
  border-left: 3px solid transparent;
}
.col-when { white-space: nowrap; width: 72px; }
.hq2-aud-ago {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-11);
  color: var(--ink-3, #6E7088);
}
.col-actor { white-space: nowrap; }
.hq2-aud-actor { display: inline-flex; align-items: center; gap: 7px; }
.hq2-aud-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}
.hq2-aud-actor-name { font-weight: 600; color: var(--ink, #141044); }
.hq2-aud-role {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-3, #6E7088);
  font-weight: 600;
}
.hq2-aud-action-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: var(--surface-2, #FAF7F2);
  color: var(--ink-3, #6E7088);
}
.hq2-aud-action-pill.is-create { background: rgba(34, 197, 94, .12); color: #15803d; }
.hq2-aud-action-pill.is-update { background: rgba(99, 102, 241, .12); color: #4338ca; }
.hq2-aud-action-pill.is-delete { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.hq2-aud-action-pill.is-publish { background: rgba(200, 169, 110, .25); color: #8E6C2E; }
.hq2-aud-target {
  font-family: ui-monospace, Menlo, monospace;
  font-size: var(--t-11);
  color: var(--ink-2, #2a2566);
}
.hq2-aud-summary { color: var(--ink, #141044); }
.hq2-aud-fields {
  display: block;
  margin-top: 4px;
  font-size: 10px;
}
.hq2-aud-fields code {
  font-family: ui-monospace, Menlo, monospace;
  background: var(--surface-2, #FAF7F2);
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  color: var(--ink-3, #6E7088);
}

/* ════════════════════════════════════════════════════════════════════
   CUSTOMER BILLING — staff-facing subscription management
   ────────────────────────────────────────────────────────────────────
   Lives in a new "Billing" tab on /hq2#/customers/<id>. One card per
   active subscription with status pill, key facts (cadence / amount /
   next charge / card last 4), and skip / pause / resume / cancel
   actions. Below that, a "recent charges" table pulled from /orders.
   ════════════════════════════════════════════════════════════════════ */
.hq2-cust-billing {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq2-cust-billing-empty {
  background: var(--surface-2, #FAF7F2);
  border: 1px dashed var(--rule);
  border-radius: 12px;
  padding: 22px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-ui);
}
.hq2-cust-billing-empty b { font-size: var(--t-13); color: var(--ink, #141044); }
.hq2-cust-billing-empty span { font-size: var(--t-12); color: var(--ink-3, #6E7088); line-height: 1.55; }

.hq2-cust-sub {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-cust-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2, #FAF7F2);
}
.hq2-cust-sub-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
}
.hq2-cust-sub-title b {
  font-size: var(--t-14);
  font-weight: 800;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
  text-transform: capitalize;
}
.hq2-cust-sub-status {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgba(20, 16, 68, .08);
  color: var(--ink-3, #6E7088);
}
.hq2-cust-sub-status.is-active    { background: rgba(34, 197, 94, .15);  color: #15803d; }
.hq2-cust-sub-status.is-paused    { background: rgba(234, 179, 8, .14); color: #a16207; }
.hq2-cust-sub-status.is-cancelled { background: rgba(239, 68, 68, .12); color: #b91c1c; }
.hq2-cust-sub-skip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgba(200, 169, 110, .25);
  color: #8E6C2E;
}
.hq2-cust-sub-id code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10px;
  color: var(--ink-3, #6E7088);
}
.hq2-cust-sub-rows {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  padding: 6px 18px 12px;
}
@media (min-width: 720px){
  .hq2-cust-sub-rows { grid-template-columns: repeat(4, 1fr); }
}
.hq2-cust-sub-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
}
.hq2-cust-sub-row dt {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  margin: 0;
}
.hq2-cust-sub-row dd {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 600;
  color: var(--ink, #141044);
  font-variant-numeric: tabular-nums;
  text-transform: capitalize;
}
.hq2-cust-sub-row dd em {
  font-style: italic;
  color: var(--ink-3, #6E7088);
  font-weight: 500;
  text-transform: none;
}
.hq2-cust-sub-acts {
  display: flex;
  gap: 8px;
  padding: 12px 18px 16px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap;
}
.hq2-cust-sub-acts .hq2-btn {
  font-size: var(--t-12);
  padding: 6px 14px;
}
.hq2-cust-sub-cancelled {
  font-size: var(--t-12);
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

.hq2-cust-charges {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-cust-charges-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  background: var(--surface-2, #FAF7F2);
}
.hq2-cust-charges-head h4 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 800;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
}
.hq2-cust-charges-head .meta {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
}
.hq2-cust-charges-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: var(--t-12);
}
.hq2-cust-charges-table thead th {
  text-align: left;
  font-size: var(--t-10);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  padding: 8px 14px;
  background: #fff;
  border-bottom: 1px solid var(--rule);
}
.hq2-cust-charges-table td {
  padding: 10px 14px;
  border-top: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.hq2-cust-charges-table tr:first-child td { border-top: 0; }
.hq2-cust-charges-table a {
  color: var(--ink, #141044);
  text-decoration: none;
}
.hq2-cust-charges-table a:hover { text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════
   SECURITY — MFA enrollment + session policy
   ────────────────────────────────────────────────────────────────────
   Lives under Settings → Security. Card is a quiet 2-row block (one
   row per concern: MFA + session timeout). MFA modal is a small
   centered panel for the enrollment / sign-in challenge flows.
   Session warning is a fixed-bottom toast-style alert that escalates
   visually as the countdown ticks.
   ════════════════════════════════════════════════════════════════════ */
.hq2-set-security {
  margin-top: 18px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 8px 22px -16px rgba(20, 16, 68, .1);
}
.hq2-set-sec-body { padding: 4px 0; }
.hq2-set-sec-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-top: 1px solid var(--rule);
}
.hq2-set-sec-row:first-child { border-top: 0; }
.hq2-set-sec-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq2-set-sec-row-l b {
  font-family: var(--font-ui);
  font-size: var(--t-13);
  font-weight: 700;
  color: var(--ink, #141044);
}
.hq2-set-sec-row-l span {
  font-size: var(--t-12);
  color: var(--ink-3, #6E7088);
}
.hq2-set-sec-row-r { display: flex; gap: 8px; align-items: center; }
.hq2-set-sec-row-meta {
  font-size: var(--t-11);
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.hq2-mfa-status {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 99px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  background: rgba(20, 16, 68, .08);
  color: var(--ink-3, #6E7088);
}
.hq2-mfa-status.is-on {
  background: rgba(34, 197, 94, .15);
  color: #15803d;
}

/* MFA modal */
.hq2-mfa-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hq2-mfa-mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 68, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hq2-mfa-panel {
  position: relative;
  background: #fff;
  border-radius: 16px;
  width: min(420px, calc(100vw - 28px));
  box-shadow: 0 24px 64px -20px rgba(20, 16, 68, .35);
  animation: hq2-mfa-pop .14s cubic-bezier(.32, .72, 0, 1);
}
@keyframes hq2-mfa-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hq2-mfa-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--rule);
}
.hq2-mfa-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: var(--t-14);
  font-weight: 800;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
}
.hq2-mfa-close {
  width: 28px; height: 28px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-3, #6E7088);
  border-radius: 6px;
}
.hq2-mfa-close:hover { background: var(--surface-2, #FAF7F2); color: var(--ink, #141044); }
.hq2-mfa-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: var(--font-ui);
  font-size: var(--t-13);
  color: var(--ink-2, #2a2566);
  line-height: 1.55;
}
.hq2-mfa-body p { margin: 0 0 8px; }
.hq2-mfa-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 4px;
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
}
.hq2-mfa-label .hq2-input {
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  font-size: var(--t-14);
}
.hq2-mfa-err {
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
  border-radius: 8px;
  font-size: var(--t-12);
}

/* Session-timeout warning */
.hq2-session-warn {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 1500;
  animation: hq2-session-warn-in .2s cubic-bezier(.32, .72, 0, 1);
}
@keyframes hq2-session-warn-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.hq2-session-warn-card {
  background: #fff;
  border: 1px solid rgba(220, 38, 38, .25);
  border-left: 4px solid #DC2626;
  border-radius: 12px;
  padding: 14px 18px;
  width: 340px;
  box-shadow: 0 18px 40px -12px rgba(20, 16, 68, .25);
  font-family: var(--font-ui);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-session-warn-card b {
  font-size: var(--t-13);
  color: var(--ink, #141044);
}
.hq2-session-warn-card p {
  margin: 0;
  font-size: var(--t-12);
  color: var(--ink-2, #2a2566);
  line-height: 1.5;
}
.hq2-session-warn-card #hq2SessionWarnCd {
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  color: #DC2626;
}
.hq2-session-warn-acts {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 4px;
}
.hq2-session-warn-acts .hq2-btn {
  font-size: var(--t-12);
  padding: 5px 12px;
}

/* ════════════════════════════════════════════════════════════════════
   Ingredient import modal — recipe/product editor → Claude → review
   ──────────────────────────────────────────────────────────────────── */

.hq2-item-section-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}
.hq2-item-empty {
  padding: 28px 22px;
  text-align: center;
  font-family: var(--font-ui);
  background: rgba(0, 0, 0, 0.02);
  border-radius: 10px;
}
.hq2-item-empty p {
  margin: 0 0 6px 0;
  font-size: 14px;
  color: var(--ink-2, var(--ink));
}
.hq2-item-empty-hint {
  font-size: 12px !important;
  color: var(--ink-3, rgba(0, 0, 0, 0.55)) !important;
  line-height: 1.6 !important;
  margin: 8px 0 0 0 !important;
}
.hq2-item-empty-hint b {
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}

/* Import modal */
.hq2-ingimp-modal {
  max-width: 640px;
  width: 100%;
}
.hq2-ingimp-blurb {
  font-size: 13px;
  line-height: 1.6;
  color: var(--ink-2, var(--ink));
  margin: 0 0 16px 0;
  font-family: var(--font-ui);
}

.hq2-ingimp-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 8px;
  margin-bottom: 14px;
  font-family: var(--font-ui);
}
.hq2-ingimp-tab {
  flex: 1;
  padding: 8px 14px;
  border: none;
  background: transparent;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.hq2-ingimp-tab.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.hq2-ingimp-pane { display: none; }
.hq2-ingimp-pane.is-active { display: block; }

/* Drop zone */
.hq2-ingimp-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 36px 24px;
  background: #fafafa;
  border: 2px dashed rgba(0, 0, 0, 0.14);
  border-radius: 12px;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-ui);
  transition: all 0.15s ease;
}
.hq2-ingimp-drop:hover,
.hq2-ingimp-drop.is-dragging {
  background: rgba(27, 26, 107, 0.04);
  border-color: var(--ink, #1B1A6B);
}
.hq2-ingimp-drop-glyph {
  font-size: 32px;
  color: var(--ink, #1B1A6B);
  font-weight: 700;
  line-height: 1;
}
.hq2-ingimp-drop-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-ingimp-drop-sub {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-ingimp-drop-filename {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 600;
  color: #0f5132;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}
.hq2-ingimp-drop-filename:empty { display: none; }

/* Paste textarea */
.hq2-ingimp-paste-label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hq2-ingimp-textarea {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 8px;
  resize: vertical;
  min-height: 200px;
}

/* Status bar */
.hq2-ingimp-status {
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 12px;
  font-family: var(--font-ui);
  min-height: 18px;
  background: transparent;
}
.hq2-ingimp-status:empty { display: none; }
.hq2-ingimp-status.is-loading {
  background: rgba(27, 26, 107, 0.06);
  color: var(--ink, #1B1A6B);
}
.hq2-ingimp-status.is-loading::before {
  content: '⏳ ';
  margin-right: 4px;
}
.hq2-ingimp-status.is-danger {
  background: rgba(179, 33, 26, 0.08);
  color: #b3211a;
}
.hq2-ingimp-status.is-danger::before {
  content: '⚠️ ';
  margin-right: 4px;
}

/* Review modal — wide layout so ingredient names + candidate dropdowns
 * don't truncate. v3 polish (Jun 2026): the v2 attempt at 1080px never
 * actually applied because the base rule `.hq2-modal-overlay > .hq2-modal
 * { max-width: 600px }` (specificity 0,2,0) beat the lone `.hq2-ingimp-
 * review-modal` selector (0,1,0). Use the parent>child selector here so
 * specificity matches AND comes later in source order, guaranteeing
 * override. 1280px on large screens, clamped at 96vw so on smaller
 * displays it still fits with breathing room. */
.hq2-modal-overlay > .hq2-modal.hq2-ingimp-review-modal {
  max-width: min(1280px, 96vw);
  width: min(1280px, 96vw);
}
.hq2-ingimp-review-summary {
  font-size: 13px;
  font-family: var(--font-ui);
  color: var(--ink-2, var(--ink));
  margin-bottom: 14px;
  padding: 10px 14px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 6px;
  line-height: 1.6;
}
.hq2-ingimp-review-summary b {
  color: var(--ink, #1B1A6B);
  font-weight: 700;
}
.hq2-ingimp-review-summary code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
}
.hq2-ingimp-hint {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
}

.hq2-ingimp-review-table-wrap {
  max-height: 50vh;
  overflow-y: auto;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.hq2-ingimp-review-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 13px;
  table-layout: fixed;
}
/* v3 polish: explicit column widths so NAME doesn't get squeezed.
 * Columns: name | qty | unit | catalog | × remove. table-layout:fixed
 * above ensures these widths actually apply (default `auto` lets long
 * content stretch a column and squish neighbours).
 *   name:    flexible (the column with most variable content)
 *   qty:     ~96px, monospace
 *   unit:    ~96px (room for "tbsp" / "scoop" / "pinch")
 *   catalog: ~340px (picker dropdown + change/new links)
 *   ×:       ~52px (button width + cell padding)
 */
.hq2-ingimp-review-table th:nth-child(1),
.hq2-ingimp-review-table td:nth-child(1) { min-width: 220px; }
.hq2-ingimp-review-table th:nth-child(2),
.hq2-ingimp-review-table td:nth-child(2) { width: 96px; }
.hq2-ingimp-review-table th:nth-child(3),
.hq2-ingimp-review-table td:nth-child(3) { width: 96px; }
.hq2-ingimp-review-table th:nth-child(4),
.hq2-ingimp-review-table td:nth-child(4) { width: 340px; }
.hq2-ingimp-review-table th:nth-child(5),
.hq2-ingimp-review-table td:nth-child(5) { width: 52px; }
.hq2-ingimp-review-table thead th {
  position: sticky;
  top: 0;
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  white-space: nowrap;
  z-index: 1;
}
.hq2-ingimp-review-table tbody td {
  padding: 6px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.hq2-ingimp-review-table tbody tr:last-child td {
  border-bottom: none;
}
.hq2-ingimp-review-table tbody tr:hover td {
  background: rgba(27, 26, 107, 0.02);
}
.hq2-ingimp-input {
  width: 100%;
  padding: 6px 10px;
  font-size: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  background: #ffffff;
}
.hq2-ingimp-input:focus {
  outline: 2px solid rgba(27, 26, 107, 0.20);
  outline-offset: 0;
  border-color: var(--ink, #1B1A6B);
}
.hq2-ingimp-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  width: 80px;
}
.hq2-ingimp-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-ingimp-tag.is-ok   { background: rgba(15, 81, 50, 0.10);  color: #0f5132; }
.hq2-ingimp-tag.is-warn { background: rgba(200, 140, 0, 0.14); color: #8a6500; }

/* v2 — candidate picker + add-to-catalog button inside the catalog cell */
.hq2-ingimp-cat-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: stretch;
  min-width: 260px;
}
.hq2-ingimp-cat-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

/* v2 polish — full-catalog search mode (replaces the dropdown when the
 * user clicks "change" or "search catalog"). Type-to-filter list of
 * every ingredient in /ingredients. */
.hq2-ingimp-cat-search { gap: 4px; }
.hq2-ingimp-search-input {
  font-size: 12px;
  padding: 6px 8px;
}
.hq2-ingimp-search-results {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid rgba(27, 26, 107, 0.12);
  border-radius: 6px;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.hq2-ingimp-search-row {
  text-align: left;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(27, 26, 107, 0.06);
  padding: 6px 10px;
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  color: var(--ink);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.hq2-ingimp-search-row:last-child { border-bottom: none; }
.hq2-ingimp-search-row:hover { background: rgba(27, 26, 107, 0.04); }
.hq2-ingimp-search-vendor {
  font-size: 10px;
  color: var(--muted, #7B7A9A);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hq2-ingimp-search-empty {
  padding: 8px 10px;
  font-size: 11px;
  color: var(--muted, #7B7A9A);
  font-style: italic;
}

/* v2 polish — remove (×) button per row */
.hq2-ingimp-remove {
  background: transparent;
  border: 1px solid rgba(27, 26, 107, 0.12);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  font-size: 18px;
  line-height: 1;
  color: var(--muted, #7B7A9A);
  cursor: pointer;
  font-family: inherit;
  padding: 0;
  display: grid;
  place-items: center;
}
.hq2-ingimp-remove:hover {
  background: rgba(220, 38, 38, 0.08);
  border-color: #DC2626;
  color: #DC2626;
}
.hq2-ingimp-row-removed td {
  opacity: 0.5;
  background: rgba(27, 26, 107, 0.02);
}
.hq2-ingimp-removed-label {
  font-style: italic;
  color: var(--muted, #7B7A9A);
  text-decoration: line-through;
  font-size: 12px;
}

/* v2 polish — rich add-to-catalog modal (mirrors supply-inventory form) */
.hq2-riching-form { display: flex; flex-direction: column; gap: 12px; }
.hq2-riching-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  align-items: end;
}
.hq2-riching-row .hq2-content-input-lbl em {
  color: #B45309;
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
  margin-left: 4px;
}
.hq2-riching-unit-hint {
  color: var(--muted, #7B7A9A);
  font-weight: 400;
  font-style: italic;
}
.hq2-riching-hint {
  font-size: 11px;
  color: var(--muted, #7B7A9A);
  line-height: 1.5;
  margin: 0;
  grid-column: span 2;
}
/* v3 — auto-detect provenance pill underneath the density fields.
 * Shows "auto · USDA" or "auto · AI" so staff knows the value came
 * from auto-fill and can override with confidence. Loading + missing
 * states surface via data-state attribute on the same span. */
.hq2-riching-auto-hint,
.hq2-supinv-auto-hint {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  margin-top: 6px;
  background: rgba(15, 81, 50, 0.08);
  color: #0f5132;
}
.hq2-riching-auto-hint[data-state="loading"],
.hq2-supinv-auto-hint[data-state="loading"] {
  background: rgba(27, 26, 107, 0.06);
  color: rgba(27, 26, 107, 0.65);
  font-style: italic;
}
.hq2-riching-auto-hint[data-state="missing"],
.hq2-supinv-auto-hint[data-state="missing"] {
  background: rgba(200, 140, 0, 0.10);
  color: #8a6500;
}
/* The density pill lives INSIDE the grams-per-cup label (under its
   input) — never as a direct grid item, where it blockified into a
   full-height slab. Hug content width within the label's column. */
.hq2-supinv-form-row .hq2-supinv-auto-hint {
  align-self: flex-start;
}
.hq2-riching-gate-msg {
  background: rgba(245, 158, 11, 0.10);
  border: 1px solid rgba(245, 158, 11, 0.3);
  color: #92400E;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.hq2-riching-acts {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(27, 26, 107, 0.08);
}
.hq2-riching-acts .hq2-btn-primary:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
@media (max-width: 720px) {
  .hq2-riching-row { grid-template-columns: 1fr; }
}
.hq2-ingimp-select {
  width: 100%;
  font-size: 11px;
  padding: 4px 6px;
}
.hq2-ingimp-link {
  background: transparent;
  border: none;
  color: #1B1A6B;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 2px 4px;
  text-decoration: underline;
  font-family: inherit;
}
.hq2-ingimp-link:hover { color: #2D2FA8; }
.hq2-ingimp-link-strong {
  background: #1B1A6B;
  color: #fff;
  text-decoration: none;
  padding: 4px 10px;
  border-radius: 5px;
  letter-spacing: 0.05em;
}
.hq2-ingimp-link-strong:hover { background: #2D2FA8; color: #fff; }

@media (max-width: 600px) {
  .hq2-ingimp-review-table { font-size: 11px; }
  .hq2-ingimp-input { font-size: 11px; padding: 4px 6px; }
  .hq2-ingimp-num { width: 60px; }
  .hq2-ingimp-cat-cell { min-width: 140px; }
}
/* ════════════════════════════════════════════════════════════════════
   Sub Perks editor — /hq2#/financials/perks
   ──────────────────────────────────────────────────────────────────── */

.hq2-perk-saved {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  min-width: 180px;
  text-align: right;
}

.hq2-perk-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
  margin-top: 16px;
  font-family: var(--font-ui);
}

.hq2-perk-tier-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.hq2-perk-tier-head {
  display: grid;
  grid-template-columns: 12px 1fr auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-perk-tier-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  align-self: center;
}
.hq2-perk-tier-head h3 {
  margin: 0;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 17px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.005em;
  line-height: 1.1;
}
.hq2-perk-tier-head span {
  display: block;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 2px;
}
.hq2-perk-tier-count {
  align-self: center;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: rgba(0, 0, 0, 0.03);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.hq2-perk-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hq2-perk-list-empty {
  font-size: 12px;
  color: rgba(0, 0, 0, 0.35);
  font-style: italic;
  padding: 14px 0;
  text-align: center;
}
.hq2-perk-row {
  display: grid;
  grid-template-columns: 6px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
}
.hq2-perk-row:hover {
  background: rgba(27, 26, 107, 0.04);
}
.hq2-perk-row-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  align-self: center;
}
.hq2-perk-row-input {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-ui);
  color: var(--ink-2, var(--ink));
  width: 100%;
}
.hq2-perk-row-input:focus {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.10);
  outline: 2px solid rgba(27, 26, 107, 0.10);
}
.hq2-perk-row-rm {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  font-size: 16px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
  transition: all 0.15s ease;
}
.hq2-perk-row-rm:hover {
  background: rgba(179, 33, 26, 0.10);
  color: #b3211a;
}

.hq2-perk-add {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.hq2-perk-add-input {
  flex: 1;
  font-size: 12px;
  padding: 8px 10px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 6px;
}
.hq2-perk-add-input:focus {
  border-color: var(--ink, #1B1A6B);
  outline: 2px solid rgba(27, 26, 107, 0.10);
}

.hq2-perk-extras {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
  border-top: 1px dotted rgba(0, 0, 0, 0.10);
}
.hq2-perk-extras-row {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  cursor: pointer;
  user-select: none;
}
.hq2-perk-extras-row > span:first-child {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  min-width: 70px;
}
.hq2-perk-discount-input {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.hq2-perk-discount {
  width: 60px;
  padding: 4px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  text-align: right;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 4px;
}
.hq2-perk-discount-input span {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 11px;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════════════
   Phantom subscriptions callout — paintFinancialsSubs
   ──────────────────────────────────────────────────────────────────── */
.hq2-fi-phantom-callout {
  margin-bottom: 14px;
  padding: 12px 16px;
  background: rgba(200, 140, 0, 0.06);
  border: 1px solid rgba(200, 140, 0, 0.18);
  border-left: 3px solid #c88c00;
  border-radius: 8px;
  font-family: var(--font-ui);
}
.hq2-fi-phantom-callout header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-fi-phantom-callout header b {
  font-size: 13px;
  color: #8a6500;
  font-weight: 700;
}
.hq2-fi-phantom-callout header span {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  line-height: 1.5;
}
.hq2-fi-phantom-callout header code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 10px;
}
.hq2-fi-phantom-callout details {
  margin-top: 10px;
  font-size: 12px;
}
.hq2-fi-phantom-callout summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2, var(--ink));
  padding: 4px 0;
}
.hq2-fi-phantom-callout ul {
  list-style: none;
  margin: 6px 0 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.hq2-fi-phantom-callout li {
  font-size: 11px;
  color: var(--ink-2, var(--ink));
  padding: 4px 8px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 4px;
}
.hq2-fi-phantom-callout li code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 10px;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 2px;
}
.hq2-fi-phantom-callout li b {
  color: #b3211a;
  font-variant-numeric: tabular-nums;
}
.hq2-fi-phantom-more {
  font-style: italic;
  color: var(--ink-3, rgba(0, 0, 0, 0.55)) !important;
  background: transparent !important;
}

/* ════════════════════════════════════════════════════════════════════
   BUNDLES — Bundle Contents tab + picker modal
   ──────────────────────────────────────────────────────────────────── */

/* Bundle items list (existing rows in the tab) */
.hq2-bundle-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--font-ui);
}
.hq2-bundle-row-edit {
  display: grid;
  grid-template-columns: 56px 1fr 80px 90px 28px;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
}
.hq2-bundle-row-edit:hover {
  background: rgba(0, 0, 0, 0.04);
}
.hq2-bundle-row-kind {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: rgba(0, 0, 0, 0.06);
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
}
.hq2-bundle-row-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-bundle-row-qty {
  width: 100%;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.hq2-bundle-row-price {
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.hq2-bundle-row-rm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 6px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: all 0.15s ease;
}
.hq2-bundle-row-rm:hover {
  background: #fee;
  border-color: #fcc;
  color: #b3211a;
}

/* Summary panel — parts total, bundle price, savings */
.hq2-bundle-summary {
  margin-top: 18px;
  padding: 16px 18px;
  background: rgba(31, 51, 96, 0.04);
  border: 1px solid rgba(31, 51, 96, 0.10);
  border-radius: 12px;
  font-family: var(--font-ui);
}
.hq2-bundle-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--ink-2, var(--ink));
}
.hq2-bundle-row .lbl {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-bundle-row .val {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1B1A6B);
}
.hq2-bundle-row-final {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  font-size: 14px;
}
.hq2-bundle-row-final.is-discount .val {
  color: #0f5132;
}
.hq2-bundle-row-final.is-markup .val {
  color: #b3211a;
}
.hq2-bundle-row-final .pct {
  font-size: 11px;
  font-weight: 500;
  opacity: 0.7;
}
.hq2-bundle-note {
  margin: 12px 0 0 0;
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-bundle-note b {
  color: var(--ink-2, var(--ink));
  font-weight: 600;
}

/* Picker modal */
.hq2-bundle-picker {
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
}
.hq2-bundle-picker .hq2-modal-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  flex: 1;
  min-height: 0;
}
.hq2-bundle-picker-search {
  width: 100%;
  font-size: 14px;
}
.hq2-bundle-picker-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
  max-height: 50vh;
  padding-right: 4px;
}
.hq2-bundle-pick-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font-ui);
}
.hq2-bundle-pick-row:hover {
  background: rgba(31, 51, 96, 0.04);
  border-color: rgba(31, 51, 96, 0.20);
  transform: translateY(-1px);
}
.hq2-bundle-pick-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-bundle-pick-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-bundle-pick-meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-bundle-pick-price {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  margin-left: 12px;
}

@media (max-width: 600px) {
  .hq2-bundle-row-edit {
    grid-template-columns: 50px 1fr 60px 70px 26px;
    gap: 6px;
    padding: 8px 10px;
  }
  .hq2-bundle-row-name { font-size: 12px; }
  .hq2-bundle-row-price { font-size: 11px; }
}

/* ════════════════════════════════════════════════════════════════════
   hq2Select — custom dropdown component
   ────────────────────────────────────────────────────────────────────
   Replaces native <select> with a brand-styled menu.  Trigger matches
   .hq2-input typography; popover floats below (or flips above on
   overflow). Marked is-active during keyboard navigation, is-selected
   for the current value.
   ──────────────────────────────────────────────────────────────────── */
.hq2-select {
  position: relative;
  font-family: var(--font-ui);
  display: inline-block;
  width: 100%;
}
.hq2-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.14);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.hq2-select-trigger:hover {
  border-color: rgba(0, 0, 0, 0.24);
  background: #fafafa;
}
.hq2-select-trigger:focus,
.hq2-select.is-open .hq2-select-trigger {
  outline: none;
  border-color: rgba(31, 51, 96, 0.50);
  box-shadow: 0 0 0 3px rgba(31, 51, 96, 0.10);
}
.hq2-select-label {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-select-label.is-placeholder {
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  font-weight: 400;
}
.hq2-select-chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  transition: transform 0.18s ease, color 0.12s ease;
  flex-shrink: 0;
}
.hq2-select.is-open .hq2-select-chev {
  transform: rotate(180deg);
  color: var(--ink, #1B1A6B);
}
.hq2-select-pop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  box-shadow:
    0 12px 28px -8px rgba(31, 51, 96, 0.20),
    0 4px 10px -2px rgba(0, 0, 0, 0.06);
  padding: 4px;
  max-height: 280px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
/* JS sets pop.hidden = true to close the dropdown. The user-agent
   default for [hidden] is `display: none`, but the rule above gives
   .hq2-select-pop `display: flex` (higher specificity than the UA),
   so the close call had no visual effect — the popover stayed open.
   Tommy: "the drop down on the media tool is permanently stuck open."
   Force display:none with !important to win against any future
   open-state styling that adds display: flex to the same element. */
.hq2-select-pop[hidden] {
  display: none !important;
}
.hq2-select-opt {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 8px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
  text-align: left;
  cursor: pointer;
  transition: background 0.10s ease;
}
.hq2-select-opt:hover,
.hq2-select-opt.is-active {
  background: rgba(31, 51, 96, 0.06);
}
.hq2-select-opt.is-selected {
  background: rgba(31, 51, 96, 0.10);
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}
.hq2-select-opt.is-selected.is-active {
  background: rgba(31, 51, 96, 0.14);
}

/* ════════════════════════════════════════════════════════════════════
   FINANCIALS HUB — accounting-software polish
   ──────────────────────────────────────────────────────────────────── */

/* Tighter section heads — clear horizontal rule + tabular labels */
.hq2-dash-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin: 32px 0 12px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hq2-dash-section-head h2 {
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink, #1B1A6B);
  margin: 0;
}
.hq2-dash-section-head .meta {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

/* All currency cells use tabular-nums by default in financials */
.hq2-fi-card,
.hq2-fi-card .tnum,
.hq2-fi-stats .stat-val,
.hq2-fi-pl td,
.hq2-fi-pl th {
  font-variant-numeric: tabular-nums;
}

/* Expense + ledger forms — give them more breathing room and better
   alignment with the new custom dropdowns. */
.hq2-fi-exp-form,
.hq2-fi-lg-form {
  display: grid;
  grid-template-columns: minmax(200px, 1.6fr) 100px 140px 130px auto;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  align-items: center;
}
.hq2-fi-lg-form {
  grid-template-columns: 130px 110px 160px 100px minmax(180px, 1fr) auto auto;
}
@media (max-width: 900px) {
  .hq2-fi-exp-form { grid-template-columns: 1fr 1fr; }
  .hq2-fi-lg-form  { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   SUPPLY CHAIN · INVENTORY page — manual ingredient + packaging input
   ──────────────────────────────────────────────────────────────────── */

.hq2-supinv {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: var(--font-ui);
  margin-top: 18px;
}

/* Kind switcher (Ingredients / Packaging) */
.hq2-supinv-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  width: fit-content;
}
.hq2-supinv-tab {
  padding: 7px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.12s ease;
}
.hq2-supinv-tab.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Toolbar */
.hq2-supinv-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
}
.hq2-supinv-search {
  flex: 1;
  max-width: 360px;
}
.hq2-supinv-toolbar { flex-wrap: wrap; }
.hq2-supinv-vendorfilter { flex: none; max-width: 200px; }
/* Primary action hugs the right edge — search + filters read left,
   "add" reads right, instead of five controls in a center clump. */
#hq2SupInvAddBtn { margin-left: auto; }
/* "no price" cleanup toggle — warns when active. */
#hq2SupInvNoPrice.is-active {
  background: var(--warning-bg, rgba(255,244,214,.6));
  border-color: var(--warning, rgba(200,140,0,.5));
  color: var(--warning, #8a5d00);
}

/* Form */
.hq2-supinv-form {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq2-supinv-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 760px) {
  .hq2-supinv-form-row { grid-template-columns: 1fr; }
}
.hq2-supinv-form-acts {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 14px;
  margin-top: 4px;
}

/* List/table */
.hq2-supinv-list {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  overflow: hidden;
}
.hq2-supinv-table {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
}
.hq2-supinv-row {
  display: grid;
  /* 9 columns — leading 24px checkbox cell (bulk merge/delete) +
     data columns + row-actions cell at the end. */
  grid-template-columns: 24px 1.8fr 1.2fr 0.6fr 0.8fr 0.9fr 0.55fr 0.7fr 60px;
  gap: 12px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  color: var(--ink-2, var(--ink));
}
.hq2-supinv-row:last-child { border-bottom: none; }
/* Data rows are clickable (open the editor). The header row sets
   pointer-events: none below so the cursor styling is data-row-only. */
.hq2-supinv-row[data-supinv-id] {
  cursor: pointer;
}
.hq2-supinv-row[data-supinv-id]:hover {
  background: rgba(31, 51, 96, 0.04);
}
.hq2-supinv-row.hq2-supinv-row-head {
  background: rgba(0, 0, 0, 0.02);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 9px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  cursor: default;
}
.hq2-supinv-row-acts {
  display: flex;
  justify-content: flex-end;
}
.hq2-supinv-row-acts .hq2-btn {
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
}
.hq2-supinv-row .name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-supinv-row .tnum {
  text-align: right;
  font-variant-numeric: tabular-nums;
  /* A value must never wrap to a second line — a wrapped qty makes the
     whole row's baseline drift and the column looks misaligned. */
  white-space: nowrap;
}
/* Leading checkbox cell — its own click target so ticking never opens
   the row editor. The header row's copy is the select-all box. */
.hq2-supinv-checkcell {
  display: flex;
  align-items: center;
}
.hq2-supinv-checkcell input[type=checkbox] {
  margin: 0;
  cursor: pointer;
  accent-color: #1B1A6B;
}
/* Header row hosts the select-all checkbox — it needs a pointer even
   though the head row itself styles as inert (cursor: default). */
.hq2-supinv-row-head .hq2-supinv-checkcell { cursor: pointer; }
.hq2-supinv-table-pkg .hq2-supinv-row {
  /* Same 7-column grid for packaging table */
}
@media (max-width: 900px) {
  .hq2-supinv-row {
    grid-template-columns: 22px 1.4fr 0.9fr 0.5fr 0.6fr 0.7fr 0.45fr 0.55fr 50px;
    gap: 8px;
    padding: 10px 12px;
    font-size: 12px;
  }
  .hq2-supinv-row-acts .hq2-btn {
    padding: 3px 6px;
    font-size: 10px;
  }
}

.hq2-supinv-portnote {
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-align: center;
  margin: 4px 0 0 0;
  padding: 12px 16px;
  background: rgba(200, 140, 0, 0.04);
  border: 1px dashed rgba(200, 140, 0, 0.30);
  border-radius: 10px;
}

/* ════════════════════════════════════════════════════════════════════
   QUICK COUNT — /hq2#/supplyChain/quickcount
   Mobile-first walk-around inventory counter. Designed phone-first;
   wider viewports just get more breathing room around the same rows.
═══════════════════════════════════════════════════════════════════ */
body.hq2-app .hq2-qc {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 88px);
  font-family: var(--font-ui);
  /* Defensive overflow lock so a single offending child (e.g. a long
     placeholder text in an input) can't push the whole section wider
     than the viewport. */
  min-width: 0;
  max-width: 100%;
}
body.hq2-app .hq2-qc-hero {
  display: flex; flex-direction: column; gap: 6px;
  padding: 0;
}
body.hq2-app .hq2-qc-h1 {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  letter-spacing: -0.01em;
}
body.hq2-app .hq2-qc-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

/* Sticky toolbar — search + scan button.
   Desktop/tablet: side-by-side via 2-col grid.
   Phone (≤480px): stack so scan button gets full width and is never
   pushed off-screen by the search input's intrinsic min-content. */
body.hq2-app .hq2-qc-toolbar {
  position: sticky;
  top: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  background: var(--surface, #fff);
  padding: 8px 0;
  margin: 0;
}
@media (max-width: 480px) {
  body.hq2-app .hq2-qc-toolbar {
    grid-template-columns: 1fr;
  }
  body.hq2-app .hq2-qc-toolbar .hq2-qc-scanbtn {
    justify-content: center;
    width: 100%;
  }
}
body.hq2-app .hq2-qc-search {
  height: 44px;
  font-size: 15px;
  padding: 0 14px;
  border-radius: 10px;
  min-width: 0;
  width: 100%;
}
body.hq2-app .hq2-qc-scanbtn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 44px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 600;
  background: var(--ink, #1B1A6B);
  color: #fff;
  border: none;
  border-radius: 10px;
}
body.hq2-app .hq2-qc-scanbtn:hover { filter: brightness(1.08); text-decoration: none; }
body.hq2-app .hq2-qc-scanbtn .ic { font-size: 18px; line-height: 1; }

/* Kind tabs (ingredients / packaging) */
body.hq2-app .hq2-qc-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
}
body.hq2-app .hq2-qc-tab {
  height: 40px;
  font-size: 14px;
  font-weight: 600;
  background: transparent;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  border: none;
  border-radius: 9px;
  cursor: pointer;
  transition: background .12s, color .12s;
}
body.hq2-app .hq2-qc-tab.is-active {
  background: var(--surface, #fff);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Sort row — small chip group */
body.hq2-app .hq2-qc-sort {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
body.hq2-app .hq2-qc-sort::-webkit-scrollbar { display: none; }
body.hq2-app .hq2-qc-sortbtn {
  flex: 0 0 auto;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  cursor: pointer;
}
body.hq2-app .hq2-qc-sortbtn.is-active {
  color: var(--ink, #1B1A6B);
  background: rgba(31, 51, 96, 0.08);
  border-color: rgba(31, 51, 96, 0.30);
}

/* List + rows — single-column, full-width, thumb-sized */
body.hq2-app .hq2-qc-list {
  display: flex; flex-direction: column;
  gap: 8px;
}
body.hq2-app .hq2-qc-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
}
body.hq2-app .hq2-qc-grouphead {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 12px 4px 4px;
}
body.hq2-app .hq2-qc-row {
  display: grid;
  /* minmax(0, 1fr) so the info column can shrink and the stepper
     stays visible on narrow phones. */
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  transition: background .25s, border-color .25s, box-shadow .25s;
}
/* Phones — keep the desktop "info + stepper on the same row" layout
   visible by compressing the stepper, NOT by stacking it underneath.
   The user expectation on iPhone 17 Pro is to see the same content as
   desktop, just condensed — so we shrink the qty input, the −/+
   buttons, and the unit label and tighten the row's own padding +
   internal gap. On the very narrow Mini/SE widths (≤340px) we still
   fall back to stacking because compressing further would push the
   tap targets below the 36px usable floor. */
@media (max-width: 640px) {
  body.hq2-app .hq2-qc-row {
    padding: 10px 12px;
    gap: 8px;
  }
  body.hq2-app .hq2-qc-stepper {
    padding: 2px;
  }
  body.hq2-app .hq2-qc-step-btn {
    width: 32px;
    height: 36px;
    font-size: 20px;
  }
  body.hq2-app .hq2-qc-step-input {
    width: 44px;
    height: 36px;
    padding: 0 2px;
  }
  body.hq2-app .hq2-qc-step-unit {
    padding: 0 4px 0 6px;
    font-size: 10px;
    min-width: 14px;
  }
  body.hq2-app .hq2-qc-name {
    font-size: 14px;
  }
  body.hq2-app .hq2-qc-meta {
    font-size: 11px;
  }
}
/* SE / mini fallback — at ≤340px even the compressed stepper crowds
   the info column too much, so stack underneath. */
@media (max-width: 340px) {
  body.hq2-app .hq2-qc-row {
    grid-template-columns: 1fr;
  }
  body.hq2-app .hq2-qc-row .hq2-qc-stepper {
    justify-self: stretch;
    justify-content: space-between;
  }
}
body.hq2-app .hq2-qc-row.is-low {
  border-color: rgba(200, 140, 0, 0.50);
  background: rgba(255, 244, 214, 0.50);
}
body.hq2-app .hq2-qc-row.is-out {
  border-color: rgba(179, 33, 26, 0.55);
  background: rgba(254, 226, 224, 0.55);
}
body.hq2-app .hq2-qc-row.is-saving {
  border-color: rgba(31, 51, 96, 0.40);
  box-shadow: 0 0 0 3px rgba(31, 51, 96, 0.10);
}
body.hq2-app .hq2-qc-row.is-saved {
  border-color: rgba(46, 139, 87, 0.55);
  background: rgba(220, 250, 230, 0.55);
}
body.hq2-app .hq2-qc-row.is-error {
  border-color: rgba(179, 33, 26, 0.65);
  background: rgba(254, 226, 224, 0.65);
}
body.hq2-app .hq2-qc-row.is-flash {
  animation: hq2QcFlash 1.4s ease-out;
}
@keyframes hq2QcFlash {
  0%   { box-shadow: 0 0 0 8px rgba(31, 51, 96, 0.35); }
  100% { box-shadow: 0 0 0 0 rgba(31, 51, 96, 0); }
}

body.hq2-app .hq2-qc-row-info {
  min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
body.hq2-app .hq2-qc-name {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  line-height: 1.25;
}
body.hq2-app .hq2-qc-meta {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  line-height: 1.35;
}
body.hq2-app .hq2-qc-alert {
  display: inline-block;
  padding: 2px 6px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 4px;
  vertical-align: middle;
}
body.hq2-app .hq2-qc-alert.is-low { background: #FCE7B0; color: #7A4F00; }
body.hq2-app .hq2-qc-alert.is-out { background: #B3211A; color: #fff; }

/* Stepper — −  [qty]  +  unit. 44px minimum tap targets. */
body.hq2-app .hq2-qc-stepper {
  display: inline-flex; align-items: center; gap: 0;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 12px;
  padding: 3px;
}
body.hq2-app .hq2-qc-step-btn {
  width: 38px;
  height: 38px;
  font-size: 22px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink, #1B1A6B);
  background: transparent;
  border: none;
  border-radius: 9px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: rgba(31, 51, 96, 0.18);
}
body.hq2-app .hq2-qc-step-btn:active {
  background: rgba(31, 51, 96, 0.12);
}
body.hq2-app .hq2-qc-step-input {
  width: 62px;
  height: 38px;
  text-align: center;
  font-size: 16px;          /* >=16px so iOS doesn't zoom on focus */
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1B1A6B);
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 9px;
  padding: 0 4px;
  -moz-appearance: textfield;
}
body.hq2-app .hq2-qc-step-input::-webkit-outer-spin-button,
body.hq2-app .hq2-qc-step-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
body.hq2-app .hq2-qc-step-input:focus {
  outline: 2px solid rgba(31, 51, 96, 0.40);
  outline-offset: 1px;
}
body.hq2-app .hq2-qc-step-unit {
  padding: 0 6px 0 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  min-width: 18px;
}

/* Floating add button row */
body.hq2-app .hq2-qc-fab-row {
  position: sticky;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  z-index: 3;
  display: flex;
  justify-content: center;
  padding-top: 8px;
  pointer-events: none;
}
body.hq2-app .hq2-qc-fab {
  pointer-events: auto;
  height: 48px;
  padding: 0 20px;
  font-size: 15px;
  font-weight: 700;
  background: var(--ink, #1B1A6B);
  color: #fff;
  border: none;
  border-radius: 24px;
  box-shadow: 0 6px 20px rgba(31, 51, 96, 0.30);
  cursor: pointer;
}
body.hq2-app .hq2-qc-fab:active { transform: translateY(1px); }

/* Status footer (sticky just above FAB) */
body.hq2-app .hq2-qc-status {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 4px 0 0;
}

/* ── Scan modal ─────────────────────────────────────────────────── */
body.hq2-app .hq2-qc-scan {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: env(safe-area-inset-top, 0px) 12px env(safe-area-inset-bottom, 0px);
}
/* [hidden] override — without this, the `display: flex` above outranks
   the UA `[hidden] { display: none }` rule and the modal never closes
   when JS sets `.hidden = true` (X tap, ESC, backdrop, …). Same pattern
   used elsewhere in this file (e.g. .hq2-notif-panel[hidden]). */
body.hq2-app .hq2-qc-scan[hidden] { display: none !important; }
body.hq2-app .hq2-qc-scan-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
body.hq2-app .hq2-qc-scan-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--surface, #fff);
  border-radius: 18px;
  overflow: hidden;
  display: flex; flex-direction: column;
  max-height: calc(100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px);
}
body.hq2-app .hq2-qc-scan-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 14px;
}
body.hq2-app .hq2-qc-x {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1;
  background: transparent;
  border: none;
  color: var(--ink-2, rgba(0, 0, 0, 0.70));
  border-radius: 10px;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  touch-action: manipulation;
}
body.hq2-app .hq2-qc-x:hover  { background: rgba(0, 0, 0, 0.04); color: var(--ink, #1B1A6B); }
body.hq2-app .hq2-qc-x:active { background: rgba(0, 0, 0, 0.10); }
body.hq2-app .hq2-qc-scan-body {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #0a0a0a;
  overflow: hidden;
}
@media (max-width: 480px) {
  /* On phones the manual-entry row matters as much as the preview —
     don't let the 4:3 video crowd it out on short viewports. */
  body.hq2-app .hq2-qc-scan-body { aspect-ratio: 16 / 11; }
}
body.hq2-app .hq2-qc-scan-video {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  background: transparent;
}
body.hq2-app .hq2-qc-scan-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
body.hq2-app .hq2-qc-scan-frame {
  width: 70%; max-width: 280px;
  aspect-ratio: 5 / 2;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.25);
}
body.hq2-app .hq2-qc-scan-hint {
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  text-align: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  padding: 0 16px;
}
body.hq2-app .hq2-qc-scan-manual {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px 16px 16px;
  background: var(--surface, #fff);
}
body.hq2-app .hq2-qc-scan-manual-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
body.hq2-app .hq2-qc-scan-manual-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
body.hq2-app .hq2-qc-scan-manual-row .hq2-input {
  height: 44px;
  font-size: 16px;            /* iOS no-zoom */
}
body.hq2-app .hq2-qc-scan-manual-row .hq2-btn {
  height: 44px;
  padding: 0 18px;
}

/* ── Add-new bottom sheet ───────────────────────────────────────── */
body.hq2-app .hq2-qc-sheet {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
/* See note on .hq2-qc-scan[hidden] above — same root cause. */
body.hq2-app .hq2-qc-sheet[hidden] { display: none !important; }
body.hq2-app .hq2-qc-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.40);
}
body.hq2-app .hq2-qc-sheet-card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: var(--surface, #fff);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 8px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-height: 90vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
body.hq2-app .hq2-qc-sheet-handle {
  width: 36px; height: 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  margin: 4px auto 8px;
}
body.hq2-app .hq2-qc-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 15px;
}
body.hq2-app .hq2-qc-sheet-form {
  display: flex; flex-direction: column; gap: 10px;
}
body.hq2-app .hq2-qc-sheet-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
body.hq2-app .hq2-qc-sheet-row .hq2-input,
body.hq2-app .hq2-qc-sheet-form .hq2-input {
  height: 44px;
  font-size: 16px;            /* iOS no-zoom */
}
body.hq2-app .hq2-qc-sheet-more {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 4px 0;
}
body.hq2-app .hq2-qc-sheet-more summary {
  cursor: pointer;
  padding: 8px 0;
  font-weight: 600;
}
body.hq2-app .hq2-qc-sheet-acts {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 4px;
}
body.hq2-app .hq2-qc-sheet-acts .hq2-btn { height: 44px; padding: 0 18px; }

/* Mobile sizing tweaks */
@media (max-width: 480px) {
  body.hq2-app .hq2-qc-sheet-row {
    grid-template-columns: 1fr 1fr;
  }
  body.hq2-app .hq2-qc-step-input { width: 56px; }
  body.hq2-app .hq2-qc-h1 { font-size: 20px; }
}

/* Desktop refinements — wider rows, hover */
@media (min-width: 720px) {
  body.hq2-app .hq2-qc-row { padding: 14px 18px; }
  body.hq2-app .hq2-qc-row:hover {
    border-color: rgba(31, 51, 96, 0.25);
  }
  body.hq2-app .hq2-qc-name { font-size: 16px; }
}

/* ════════════════════════════════════════════════════════════════════
   SHOPPING MODE — /hq2#/supplyChain/shopping
═══════════════════════════════════════════════════════════════════ */
body.hq2-app .hq2-shop {
  display: flex; flex-direction: column;
  gap: 12px;
  padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 16px);
  font-family: var(--font-ui);
  min-width: 0;
  max-width: 100%;
}

/* Start screen (store picker) */
body.hq2-app .hq2-shop-start {
  display: flex; flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}
body.hq2-app .hq2-shop-start-h {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
}
body.hq2-app .hq2-shop-start-sub {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
body.hq2-app .hq2-shop-store-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
body.hq2-app .hq2-shop-store {
  height: 56px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
body.hq2-app .hq2-shop-store.is-active {
  color: var(--ink, #1B1A6B);
  background: rgba(31, 51, 96, 0.08);
  border-color: rgba(31, 51, 96, 0.40);
}
body.hq2-app .hq2-shop-start-acts {
  display: flex; justify-content: center;
}
body.hq2-app .hq2-shop-start-btn {
  height: 48px;
  padding: 0 28px;
  font-size: 15px;
  font-weight: 700;
  border-radius: 24px;
}

/* Active trip */
body.hq2-app .hq2-shop-active {
  display: flex; flex-direction: column;
  gap: 12px;
}
body.hq2-app .hq2-shop-bar {
  position: sticky; top: 0; z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: var(--surface, #fff);
  padding: 8px 0;
}
body.hq2-app .hq2-shop-bar-store {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
body.hq2-app .hq2-shop-bar-tot {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink, #1B1A6B);
}
body.hq2-app .hq2-shop-cta {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}
body.hq2-app .hq2-shop-scan-cta {
  height: 64px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 14px;
  background: var(--ink, #1B1A6B);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
body.hq2-app .hq2-shop-scan-cta .ic { font-size: 22px; line-height: 1; }
body.hq2-app .hq2-shop-add-cta {
  height: 64px;
  padding: 0 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 14px;
}

body.hq2-app .hq2-shop-items {
  display: flex; flex-direction: column;
  gap: 6px;
}
body.hq2-app .hq2-shop-item {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  min-width: 0;
}
/* Left side wrapper — must shrink so long product names don't push the
   row wider than the page. */
body.hq2-app .hq2-shop-item > div:first-child,
body.hq2-app .hq2-shop-item-l {
  flex: 1 1 auto;
  min-width: 0;
}
body.hq2-app .hq2-shop-item-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  /* Wrap long product names instead of truncating — the user needs the
     full name visible to confirm what they just scanned. */
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.3;
}
body.hq2-app .hq2-shop-item-meta {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
body.hq2-app .hq2-shop-item-undo {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}
body.hq2-app .hq2-shop-item-undo:hover { color: #B3211A; border-color: rgba(179, 33, 26, 0.3); }

/* Confirm sheet (qty + price) */
body.hq2-app .hq2-shop-confirm {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 4px;
}
body.hq2-app .hq2-shop-confirm-item {
  font-size: 15px;
  color: var(--ink, #1B1A6B);
  padding: 8px 10px;
  background: rgba(31, 51, 96, 0.05);
  border-radius: 10px;
}
body.hq2-app .hq2-shop-confirm-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
body.hq2-app .hq2-shop-confirm-unit {
  display: flex; flex-direction: column; gap: 4px;
}
body.hq2-app .hq2-shop-confirm-unit-val {
  height: 44px;
  display: flex; align-items: center;
  padding: 0 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}
@media (max-width: 480px) {
  body.hq2-app .hq2-shop-confirm-row { grid-template-columns: 1fr 1fr; }
}
body.hq2-app .hq2-shop-confirm .hq2-input { height: 44px; font-size: 16px; }

/* ════════════════════════════════════════════════════════════════════
   PER-INGREDIENT DETAIL BOTTOM SHEET (Stock | History | Recipes)
═══════════════════════════════════════════════════════════════════ */
body.hq2-app .hq2-det {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: flex-end; justify-content: center;
}
body.hq2-app .hq2-det-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.40);
}
body.hq2-app .hq2-det-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  background: var(--surface, #fff);
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  padding: 6px 16px calc(env(safe-area-inset-bottom, 0px) + 16px);
  max-height: 92vh;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
}
body.hq2-app .hq2-det-handle {
  width: 36px; height: 4px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 2px;
  margin: 4px auto 4px;
}
body.hq2-app .hq2-det-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 12px;
}
body.hq2-app .hq2-det-title {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 0;
}
body.hq2-app .hq2-det-title b {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  word-break: break-word;
}
body.hq2-app .hq2-det-title .muted {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
body.hq2-app .hq2-det-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
}
body.hq2-app .hq2-det-tab {
  height: 36px;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  border: none;
  border-radius: 8px;
  cursor: pointer;
}
body.hq2-app .hq2-det-tab.is-active {
  background: var(--surface, #fff);
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}
body.hq2-app .hq2-det-body { display: flex; flex-direction: column; gap: 10px; }

/* Stock tab */
body.hq2-app .hq2-det-stock { display: flex; flex-direction: column; gap: 10px; }
body.hq2-app .hq2-det-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
body.hq2-app .hq2-det-row .hq2-input { height: 44px; font-size: 16px; }
@media (max-width: 480px) {
  body.hq2-app .hq2-det-row { grid-template-columns: 1fr 1fr; }
}
body.hq2-app .hq2-det-cpm {
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  background: rgba(31, 51, 96, 0.05);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-det-cpm .muted {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 400;
}
body.hq2-app .hq2-det-barcodes-lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-bottom: 4px;
}
body.hq2-app .hq2-det-barcodes-chips {
  display: flex; flex-wrap: wrap; gap: 6px;
}
body.hq2-app .hq2-det-barcode-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 6px;
}
body.hq2-app .hq2-det-barcode-x {
  width: 20px; height: 20px;
  background: transparent; border: none; cursor: pointer;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 16px;
  line-height: 1;
}
body.hq2-app .hq2-det-acts {
  display: flex; justify-content: flex-end; gap: 8px;
  padding-top: 4px;
}
body.hq2-app .hq2-det-acts .hq2-btn { height: 44px; padding: 0 18px; }

/* History tab */
body.hq2-app .hq2-det-history { display: flex; flex-direction: column; gap: 4px; }
body.hq2-app .hq2-det-log-entry {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
body.hq2-app .hq2-det-log-entry:last-child { border-bottom: none; }
body.hq2-app .hq2-det-log-icon {
  font-size: 18px;
  text-align: center;
  line-height: 1.2;
  color: var(--ink, #1B1A6B);
}
body.hq2-app .hq2-det-log-primary {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  word-break: break-word;
}
body.hq2-app .hq2-det-log-meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════════════
   ATTACH-TO-EXISTING PICKER (scan miss → ranked candidates)
═══════════════════════════════════════════════════════════════════ */
body.hq2-app .hq2-attach-warn {
  background: #FFF4D6;
  color: #7A4F00;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
}
body.hq2-app .hq2-attach-search {
  padding: 4px 0;
}
body.hq2-app .hq2-attach-search .hq2-input { height: 44px; font-size: 16px; }
body.hq2-app .hq2-attach-list {
  display: flex; flex-direction: column; gap: 6px;
}
body.hq2-app .hq2-attach-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
body.hq2-app .hq2-attach-row:hover {
  border-color: rgba(31, 51, 96, 0.30);
  background: rgba(31, 51, 96, 0.03);
}
body.hq2-app .hq2-attach-row-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.hq2-app .hq2-attach-row-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
body.hq2-app .hq2-attach-row-meta {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-attach-row-go {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2, rgba(0, 0, 0, 0.65));
  white-space: nowrap;
}
body.hq2-app .hq2-attach-acts {
  display: flex; justify-content: space-between; gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
body.hq2-app .hq2-attach-acts .hq2-btn { height: 44px; padding: 0 16px; }

/* ════════════════════════════════════════════════════════════════════
   OVERVIEW TILES — Supply chain hub landing (above legacy KPI strip)
═══════════════════════════════════════════════════════════════════ */
body.hq2-app .hq2-ovr-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0 4px;
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 880px) {
  body.hq2-app .hq2-ovr-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.hq2-app .hq2-ovr-tile {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  color: var(--ink, #1B1A6B);
  text-decoration: none;
  transition: border-color .12s, transform .12s, box-shadow .12s;
  /* Without min-width:0 a long value like "$10,500" forces the grid
     column wider than 1fr, which pushes the whole 2-col layout past
     the viewport on phones. */
  min-width: 0;
  overflow: hidden;
}
body.hq2-app .hq2-ovr-tile .lbl,
body.hq2-app .hq2-ovr-tile b,
body.hq2-app .hq2-ovr-tile .hint {
  min-width: 0;
  max-width: 100%;
  /* Allow labels + values to wrap naturally instead of being cut by
     ellipsis. On a 1-col stacked layout (≤480px) every tile has the
     full viewport width to itself, so "SPENT · LAST 7 DAYS" reads in
     full. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.hq2-app .hq2-ovr-tile:hover {
  border-color: rgba(31, 51, 96, 0.30);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(31, 51, 96, 0.08);
  text-decoration: none;
}
body.hq2-app .hq2-ovr-tile.is-warn-tile {
  border-color: rgba(200, 140, 0, 0.30);
  background: rgba(255, 244, 214, 0.40);
}
body.hq2-app .hq2-ovr-tile .lbl {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
body.hq2-app .hq2-ovr-tile b {
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--ink, #1B1A6B);
  line-height: 1.1;
}
body.hq2-app .hq2-ovr-tile .hint {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}

/* ════════════════════════════════════════════════════════════════════
   ACTIVITY FEED — /hq2#/supplyChain/log
   Scoped to #hq2ActList. The dashboard overview's activity stream
   (#hq2OvAct) uses the same .hq2-act-row class but with a horizontal
   grid layout (dot · name · amount · when) defined at line ~6092.
   Don't widen these selectors to plain .hq2-act-row or the dashboard
   stream will inherit the supply-chain stacked-card treatment.
═══════════════════════════════════════════════════════════════════ */
body.hq2-app #hq2ActList {
  display: flex; flex-direction: column;
  gap: 4px;
}
body.hq2-app #hq2ActList .hq2-act-row {
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: var(--surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  font: inherit; color: inherit;
  transition: background .12s, border-color .12s;
  min-width: 0;
  overflow: hidden;
}
body.hq2-app #hq2ActList .hq2-act-row:hover {
  border-color: rgba(31, 51, 96, 0.25);
  background: rgba(31, 51, 96, 0.02);
}
body.hq2-app #hq2ActList .hq2-act-row-name,
body.hq2-app #hq2ActList .hq2-act-row-meta,
body.hq2-app #hq2ActList .hq2-act-row > * {
  min-width: 0;
  max-width: 100%;
  /* Wrap freely — the user wants the full product name visible without
     having to rotate to landscape. Long names just take more vertical
     space, which is what a phone has plenty of. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
body.hq2-app #hq2ActList .hq2-act-row-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  white-space: normal;
}
body.hq2-app #hq2ActList .hq2-act-row-entry .hq2-det-log-entry {
  border-bottom: none;
  padding: 0;
}

/* ════════════════════════════════════════════════════════════════════
   IT & HR · Schedule (weekly grid + swap requests)
   ──────────────────────────────────────────────────────────────────── */

.hq2-sched-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0;
  font-family: var(--font-ui);
}
.hq2-sched-range {
  font-weight: 600;
  font-size: 13px;
  color: var(--ink, #1B1A6B);
  padding: 0 10px;
  font-variant-numeric: tabular-nums;
}
.hq2-sched-grid-wrap {
  overflow-x: auto;
  padding: 14px;
}
.hq2-sched-grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 4px;
  font-family: var(--font-ui);
  font-size: 12px;
}
.hq2-sched-grid th {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-align: left;
  padding: 6px 8px;
  background: rgba(0, 0, 0, 0.03);
  border-radius: 6px;
}
.hq2-sched-name-h { min-width: 140px; }
.hq2-sched-name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  padding: 8px;
  white-space: nowrap;
  background: rgba(31, 51, 96, 0.04);
  border-radius: 6px;
  font-size: 12px;
}
.hq2-sched-cell {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 4px;
  min-width: 110px;
  vertical-align: top;
}
.hq2-sched-shift {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  padding: 6px 8px;
  margin-bottom: 4px;
  background: rgba(31, 51, 96, 0.06);
  border: 1px solid rgba(31, 51, 96, 0.16);
  border-radius: 4px;
  font-family: inherit;
  font-size: 11px;
  color: var(--ink, #1B1A6B);
  text-align: left;
  cursor: pointer;
  transition: background 0.12s ease;
}
.hq2-sched-shift:hover { background: rgba(31, 51, 96, 0.10); }
.hq2-sched-shift b { font-weight: 600; font-variant-numeric: tabular-nums; }
.hq2-sched-shift .role {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hq2-sched-tag {
  display: inline-block;
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.06);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 2px;
}
.hq2-sched-tag.is-ok  { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-sched-tag.is-bad { background: rgba(179, 33, 26, 0.12); color: #b3211a; }
.hq2-sched-empty {
  width: 100%;
  height: 32px;
  background: transparent;
  border: 1px dashed rgba(0, 0, 0, 0.10);
  border-radius: 4px;
  color: var(--ink-3, rgba(0, 0, 0, 0.40));
  cursor: pointer;
  transition: all 0.12s ease;
  font-size: 14px;
}
.hq2-sched-empty:hover {
  border-color: rgba(31, 51, 96, 0.30);
  background: rgba(31, 51, 96, 0.04);
}

.hq2-sched-swaps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  font-family: var(--font-ui);
}
.hq2-sched-swap-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: rgba(200, 140, 0, 0.04);
  border: 1px solid rgba(200, 140, 0, 0.20);
  border-radius: 8px;
  gap: 12px;
}
.hq2-sched-swap-l {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
}
.hq2-sched-swap-l b { font-weight: 600; color: var(--ink, #1B1A6B); }
.hq2-sched-swap-l .meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-sched-swap-r { display: flex; gap: 6px; }

/* ════════════════════════════════════════════════════════════════════
   IT & HR · Tickets kanban
   ──────────────────────────────────────────────────────────────────── */

.hq2-tk-board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  padding: 4px 0;
  font-family: var(--font-ui);
}
@media (max-width: 1024px) {
  .hq2-tk-board { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .hq2-tk-board { grid-template-columns: 1fr; }
}
.hq2-tk-col {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-tk-col-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-2, var(--ink));
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-tk-dot { width: 8px; height: 8px; border-radius: 50%; }
.hq2-tk-dot.is-amber { background: #c88c00; }
.hq2-tk-dot.is-navy  { background: #1B1A6B; }
.hq2-tk-dot.is-green { background: #0f5132; }
.hq2-tk-dot.is-gray  { background: #6B6E84; }
.hq2-tk-col-count {
  margin-left: auto;
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 7px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-2, var(--ink));
}
.hq2-tk-col-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 50px;
}
.hq2-tk-col-empty {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.40));
  text-align: center;
  padding: 16px 0;
  font-style: italic;
}
.hq2-tk-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  font-family: inherit;
}
.hq2-tk-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.10);
}
.hq2-tk-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
}
.hq2-tk-cat {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  background: rgba(0, 0, 0, 0.06);
  padding: 2px 7px;
  border-radius: 4px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-tk-pri {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 4px;
}
.hq2-tk-pri.is-low    { background: rgba(0, 0, 0, 0.06); color: var(--ink-3); }
.hq2-tk-pri.is-normal { background: rgba(31, 51, 96, 0.10); color: #1B1A6B; }
.hq2-tk-pri.is-high   { background: rgba(200, 140, 0, 0.14); color: #8a6500; }
.hq2-tk-pri.is-urgent { background: rgba(179, 33, 26, 0.14); color: #b3211a; }
.hq2-tk-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  line-height: 1.4;
}
.hq2-tk-meta {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-tk-meta .age { font-variant-numeric: tabular-nums; }

/* ════════════════════════════════════════════════════════════════════
   Media · Photos library + Editorial calendar
   ──────────────────────────────────────────────────────────────────── */

.hq2-mp-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  margin: 16px 0;
  font-family: var(--font-ui);
}
.hq2-mp-tags {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
  flex-wrap: wrap;
}
.hq2-mp-tag {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: all 0.12s ease;
}
.hq2-mp-tag.is-active {
  background: #ffffff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.hq2-mp-upload {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.hq2-mp-upload .hq2-select { width: auto; min-width: 120px; }
.hq2-mp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding: 14px;
}
.hq2-mp-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  padding: 0;
}
.hq2-mp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.14);
}
.hq2-mp-thumb {
  aspect-ratio: 1 / 1;
  background: rgba(0, 0, 0, 0.04);
}
.hq2-mp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.hq2-mp-info {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-mp-info b {
  font-size: 12px;
  color: var(--ink, #1B1A6B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-mp-info span {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Editorial calendar */
.hq2-ed-month {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-display, var(--font-ui));
  color: var(--ink, #1B1A6B);
  padding: 0 10px;
}
.hq2-ed-cal {
  padding: 10px;
  font-family: var(--font-ui);
}
.hq2-ed-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.hq2-ed-cal-row.hq2-ed-cal-head {
  margin-bottom: 4px;
}
.hq2-ed-cal-day-h {
  text-align: center;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 6px 0;
}
.hq2-ed-cal-day {
  min-height: 100px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: background 0.12s ease;
}
.hq2-ed-cal-day:hover {
  background: rgba(31, 51, 96, 0.03);
}
.hq2-ed-cal-day.is-empty {
  background: transparent;
  border: none;
  cursor: default;
}
.hq2-ed-cal-day.is-today {
  border-color: rgba(31, 51, 96, 0.40);
  box-shadow: 0 0 0 2px rgba(31, 51, 96, 0.10);
}
.hq2-ed-cal-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2, var(--ink));
  font-variant-numeric: tabular-nums;
}
.hq2-ed-post {
  display: block;
  width: 100%;
  text-align: left;
  padding: 4px 6px;
  font-size: 10px;
  font-weight: 600;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: inherit;
}
.hq2-ed-post.is-draft     { background: rgba(0, 0, 0, 0.06);    color: var(--ink-3); }
.hq2-ed-post.is-scheduled { background: rgba(31, 51, 96, 0.12); color: #1B1A6B;       }
.hq2-ed-post.is-published { background: rgba(15, 81, 50, 0.12); color: #0f5132;       }
.hq2-ed-post.is-ch-blog::before    { content: '✎ '; opacity: 0.6; }
.hq2-ed-post.is-ch-social::before  { content: '◯ '; opacity: 0.6; }
.hq2-ed-post.is-ch-email::before   { content: '✉ '; opacity: 0.6; }
.hq2-ed-post.is-ch-landing::before { content: '◰ '; opacity: 0.6; }
.hq2-ed-more {
  font-size: 9px;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE + DROPDOWN-CLIPPING FIX (Tommy: financials cut off,
   dropdowns broken, ledger cut off; mise needs to work on smaller
   MacBook Air)
   ────────────────────────────────────────────────────────────────────
   1. .hq2-fi-card had `overflow: hidden` to mask the rounded corners
      of inner content. That clipped every absolute-positioned dropdown
      popup rendered inside a card. Switched to overflow:visible and
      paired the JS popup with position:fixed coords so it escapes
      ANY ancestor overflow.

   2. The 8-tab Money strip wrapped onto two ugly rows on narrow
      screens. Now horizontal-scrolls instead.

   3. The ledger table had ~600px+ fixed columns and the long
      description column blew off the right edge. Wrapped in a
      horizontal-scroll container with min-width:720px.

   Plus a smaller-laptop responsive pass (1180px = MBA usable inside
   main, after rail + page padding) that tightens grids that
   previously assumed >=1280px.
   ════════════════════════════════════════════════════════════════════ */

.hq2-fi-card,
.hq2-mkt-card,
.hq2-co-card,
.hq2-supply-card {
  overflow: visible;
}
.hq2-fi-card .hq2-fi-head,
.hq2-fi-card .hq2-fi-body:first-child {
  border-top-left-radius:  inherit;
  border-top-right-radius: inherit;
}
.hq2-fi-card .hq2-fi-body:last-child,
.hq2-fi-card .hq2-fi-exp-list:last-child,
.hq2-fi-card .hq2-fi-lg-body:last-child {
  border-bottom-left-radius:  inherit;
  border-bottom-right-radius: inherit;
  overflow: hidden;
}
.hq2-select.is-open .hq2-select-pop { z-index: 1000; }

.hq2-mkt-tabs {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  max-width: 100%;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.hq2-mkt-tabs::-webkit-scrollbar { display: none; }
.hq2-mkt-tab { white-space: nowrap; flex-shrink: 0; }

.hq2-fi-lg-body {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hq2-fi-lg-table { min-width: 720px; }

@media (max-width: 1180px){
  .hq2-fi-lg-table th.lg-h-account { width: 130px; }
  .hq2-fi-lg-table th.lg-h-amt,
  .hq2-fi-lg-table th.lg-h-bal     { width: 96px; }
}

.hq2-fi-exp-list { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 1180px){
  .hq2-fi-exp { grid-template-columns: 80px 80px minmax(180px, 1fr) 80px 28px; }
}

@media (max-width: 1180px){
  .hq2-fi-exp-form {
    grid-template-columns: minmax(220px, 1fr) 100px 130px 130px auto;
  }
}
@media (max-width: 980px){
  .hq2-fi-exp-form { grid-template-columns: 1fr 1fr; gap: 6px; }
  .hq2-fi-exp-form button { grid-column: span 2; }
}
@media (max-width: 1180px){
  .hq2-fi-lg-form { grid-template-columns: 130px 110px 1fr 110px 1fr auto auto; gap: 6px; }
}
@media (max-width: 980px){
  .hq2-fi-lg-form { grid-template-columns: 1fr 1fr; }
  .hq2-fi-lg-form button { grid-column: span 2; }
}

@media (max-width: 1180px){
  .hq2-fi-row-2up { grid-template-columns: 1fr; }
}

@media (max-width: 1180px){
  .hq2-hub-hero,
  .hq2-fi-hero,
  .hq2-mkt-shell-hero,
  .hq2-cust-hero,
  .hq2-order-hero {
    flex-direction: column;
    align-items: stretch;
  }
  .hq2-fi-hero-r,
  .hq2-hub-hero-r,
  .hq2-cust-hero-r,
  .hq2-order-hero-r {
    align-self: stretch;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .hq2-range-pills,
  .hq2-orders-pillrow {
    flex-wrap: wrap;
    max-width: 100%;
  }
  .hq2-crm { grid-template-columns: 200px 1fr; }
}

@media (max-width: 1080px){
  .hq2-crm   { grid-template-columns: 1fr; }
  .hq2-item-edit-hero { flex-direction: column; }
  .hq2-item-photo, .hq2-item-photo-stack { max-width: 100%; }
}

@media (max-width: 1180px){
  .hq2-page { padding: 16px 14px 32px; }
}

.hq2-mkt-shell-hero { z-index: 0; }
.hq2-mkt-tabs       { position: relative; z-index: 1; }

@media (max-width: 720px){
  .hq2-set-sec-row { flex-direction: column; align-items: stretch; gap: 8px; }
  .hq2-set-sec-row-r { justify-content: flex-start; }
   COMMERCE · Bundles + Variants tabs
   ──────────────────────────────────────────────────────────────────── */

/* Bundles list */
.hq2-cmb-table {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.hq2-cmb-row {
  display: grid;
  grid-template-columns: 2fr 0.9fr 0.9fr 0.9fr 1.1fr 0.8fr;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  color: var(--ink-2, var(--ink));
  text-decoration: none;
  transition: background 0.12s ease;
}
.hq2-cmb-row:hover {
  background: rgba(31, 51, 96, 0.03);
}
.hq2-cmb-row.hq2-cmb-row-head {
  background: rgba(0, 0, 0, 0.02);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 9px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  pointer-events: none;
}
.hq2-cmb-row .name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-cmb-row .tnum { text-align: right; }
.hq2-cmb-savings.is-discount { color: #0f5132; }
.hq2-cmb-savings.is-markup   { color: #b3211a; }
.hq2-cmb-savings small { font-size: 10px; opacity: 0.7; font-weight: 500; }
.hq2-cmb-status {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 4px;
  text-align: center;
}
.hq2-cmb-status.is-published { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-cmb-status.is-draft     { background: rgba(0, 0, 0, 0.06);    color: var(--ink-3, rgba(0, 0, 0, 0.55)); }

/* Variants — ladder-grouped recipe table */
.hq2-cmv-block {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 16px;
  font-family: var(--font-ui);
}
.hq2-cmv-block-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: rgba(31, 51, 96, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-cmv-block-head-l {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.hq2-cmv-block-head b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
}
.hq2-cmv-block-id {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-family: var(--font-mono, ui-monospace, monospace);
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
}
.hq2-cmv-block-head .meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  flex-shrink: 0;
}
.hq2-cmv-table {
  display: flex;
  flex-direction: column;
}
.hq2-cmv-row {
  display: grid;
  /* grid-template-columns is set inline per-ladder so the column
     count exactly matches the ladder's tier count. */
  gap: 8px;
  align-items: center;
  padding: 10px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  transition: background 0.12s ease;
}
.hq2-cmv-row:hover { background: rgba(31, 51, 96, 0.03); }
.hq2-cmv-row:last-child { border-bottom: none; }
.hq2-cmv-row.hq2-cmv-row-head {
  background: rgba(0, 0, 0, 0.02);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 8px 18px;
  pointer-events: none;
}
.hq2-cmv-row .hq2-cmv-name,
.hq2-cmv-row .name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-cmv-row .tnum,
.hq2-cmv-row .hq2-cmv-cell { text-align: right; }
.hq2-cmv-th-tier {
  text-align: right;
}
.hq2-cmv-coverage {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 700;
  letter-spacing: 0.04em;
  text-align: center;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  display: inline-block;
  justify-self: center;
}
.hq2-cmv-coverage.is-full    { background: rgba(15, 81, 50, 0.10); color: #0f5132; }
.hq2-cmv-coverage.is-partial { background: rgba(184, 110, 20, 0.12); color: #B86E14; }
.hq2-cmv-coverage.is-low     { background: rgba(179, 33, 26, 0.10); color: #B3211A; }
.hq2-cmv-empty-cell {
  color: rgba(0, 0, 0, 0.32) !important;
  font-style: italic;
}

/* Empty-state row inside an active-but-unwired ladder block. */
.hq2-cmv-empty-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 18px;
  background: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  color: var(--ink-2, rgba(0, 0, 0, 0.7));
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
}
.hq2-cmv-empty-row .hq2-cmv-empty-glyph {
  font-size: 18px;
  color: var(--ink-3, rgba(0, 0, 0, 0.4));
  flex-shrink: 0;
}
.hq2-cmv-empty-row code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
}

/* Reference-only ladder strip */
.hq2-cmv-ref {
  background: #ffffff;
  border: 1px dashed rgba(0, 0, 0, 0.10);
  border-radius: 12px;
  margin-top: 18px;
  padding: 14px 18px;
  font-family: var(--font-ui);
}
.hq2-cmv-ref-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hq2-cmv-ref-head b {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.6));
}
.hq2-cmv-ref-head .meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-cmv-ref-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-cmv-ref-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 10px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 999px;
  font-size: 11px;
  color: var(--ink-2, rgba(0, 0, 0, 0.7));
}
.hq2-cmv-ref-chip b {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-cmv-ref-chip small {
  font-size: 9.5px;
  color: var(--ink-3, rgba(0, 0, 0, 0.5));
  font-variant-numeric: tabular-nums;
}

/* Unwired recipes hint at the very bottom */
.hq2-cmv-unwired {
  background: rgba(184, 110, 20, 0.04);
  border: 1px solid rgba(184, 110, 20, 0.18);
  border-radius: 12px;
  margin-top: 16px;
  padding: 14px 18px;
  font-family: var(--font-ui);
}
.hq2-cmv-unwired-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hq2-cmv-unwired-head b {
  font-size: 12px;
  font-weight: 700;
  color: #8a4f0e;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hq2-cmv-unwired-head .meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-cmv-unwired-list {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.hq2-cmv-unwired-chip {
  display: inline-block;
  padding: 4px 10px;
  background: #ffffff;
  border: 1px solid rgba(184, 110, 20, 0.2);
  border-radius: 999px;
  font-size: 11.5px;
  color: var(--ink, #1B1A6B);
  text-decoration: none;
  transition: background 0.12s ease;
}
.hq2-cmv-unwired-chip:hover {
  background: rgba(184, 110, 20, 0.08);
}

/* Variants v2 — ladder filter pills (sits inside .hq2-fi-body, above the table) */
.hq2-cmv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 14px 18px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  background: rgba(31, 51, 96, 0.02);
}
.hq2-cmv-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-ui);
  color: var(--ink-2, rgba(0, 0, 0, 0.7));
  cursor: pointer;
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.hq2-cmv-pill:hover {
  background: rgba(31, 51, 96, 0.06);
  border-color: rgba(31, 51, 96, 0.18);
}
.hq2-cmv-pill.is-active {
  background: var(--ink, #1B1A6B);
  border-color: var(--ink, #1B1A6B);
  color: #ffffff;
}
.hq2-cmv-pill small {
  font-size: 10px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.hq2-cmv-pill.is-active small { opacity: 0.85; }

/* Missing-price cell — dimmed em-dash, matches margin-board missing tone */
.hq2-cmv-cell-missing {
  color: rgba(0, 0, 0, 0.3);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   CONSUMER GOODS · Launch + SKU tabs
   ──────────────────────────────────────────────────────────────────── */

/* Launch checklist cards */
.hq2-cgln-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin: 12px 18px;
  font-family: var(--font-ui);
  overflow: hidden;
}
.hq2-cgln-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  background: rgba(31, 51, 96, 0.03);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-cgln-kind {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(31, 51, 96, 0.10);
  color: #1B1A6B;
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 8px;
}
.hq2-cgln-name {
  font-size: 14px;
  color: var(--ink, #1B1A6B);
  text-decoration: none;
  font-weight: 600;
}
.hq2-cgln-name:hover { text-decoration: underline; }
.hq2-cgln-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  font-variant-numeric: tabular-nums;
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  font-weight: 600;
}
.hq2-cgln-bar {
  width: 120px;
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.hq2-cgln-fill {
  height: 100%;
  background: linear-gradient(90deg, #1B1A6B, #4744a0);
  transition: width 0.3s ease;
}
.hq2-cgln-steps {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4px 16px;
  padding: 14px 18px;
}
@media (max-width: 700px) {
  .hq2-cgln-steps { grid-template-columns: 1fr; }
}
.hq2-cgln-step {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 6px 0;
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  cursor: pointer;
  user-select: none;
}
.hq2-cgln-step input[type=checkbox] {
  margin-top: 2px;
  cursor: pointer;
  accent-color: #1B1A6B;
}
.hq2-cgln-step.is-done {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-decoration: line-through;
}

/* SKU registry — sectioned tables, one per kind
   ────────────────────────────────────────────────────────────────────
   Layout: each kind (Products / Meals / Ingredients / Packaging) gets
   its own card-shaped table with header strip + count + sortable-feel
   columns. Barcodes are click-to-print buttons that open a popup
   window with a print-ready label. */
.hq2-cgsku-section {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 12px;
  margin: 14px 18px;
  overflow: hidden;
  font-family: var(--font-ui);
}
.hq2-cgsku-section-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 14px 18px;
  background: rgba(31, 51, 96, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.hq2-cgsku-section-head b {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
}
.hq2-cgsku-section-count {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-variant-numeric: tabular-nums;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}
.hq2-cgsku-table-wrap {
  overflow-x: auto;
}
.hq2-cgsku-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.hq2-cgsku-table thead th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 11px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.015);
  white-space: nowrap;
}
.hq2-cgsku-table thead th small {
  font-size: 9px;
  font-weight: 500;
  opacity: 0.7;
  margin-left: 4px;
  text-transform: none;
  letter-spacing: 0;
}
.hq2-cgsku-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  transition: background 0.10s ease;
}
.hq2-cgsku-table tbody tr:last-child { border-bottom: none; }
.hq2-cgsku-table tbody tr:hover { background: rgba(31, 51, 96, 0.025); }
.hq2-cgsku-table td {
  padding: 12px 14px;
  vertical-align: middle;
  color: var(--ink-2, var(--ink));
}

/* Column sizing */
.hq2-cgsku-c-name { width: 32%; }
.hq2-cgsku-c-sku  { width: 22%; }
.hq2-cgsku-c-meta { width: 18%; font-size: 11px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); }
.hq2-cgsku-c-bar  { width: 200px; }
.hq2-cgsku-c-acts { width: 80px; text-align: right; }

.hq2-cgsku-table .hq2-cgsku-c-name b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-cgsku-c-sku code {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.05);
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--ink, #1B1A6B);
  display: inline-block;
}
.hq2-cgsku-c-sku.is-auto code {
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  background: rgba(200, 140, 0, 0.08);
}
.hq2-cgsku-c-sku .meta {
  display: block;
  font-size: 9px;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Section-head kind chip — same colors as before */
.hq2-cgsku-kind {
  display: inline-block;
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
}
.hq2-cgsku-kind-product    { background: rgba(31, 51, 96, 0.10);  color: #1B1A6B; }
.hq2-cgsku-kind-recipe     { background: rgba(15, 81, 50, 0.10);  color: #0f5132; }
.hq2-cgsku-kind-ingredient { background: rgba(200, 140, 0, 0.10); color: #8a6500; }
.hq2-cgsku-kind-packaging  { background: rgba(120, 110, 130, 0.10); color: #6B6E84; }

/* Click-to-print barcode button */
.hq2-cgsku-bar-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: var(--font-ui);
}
.hq2-cgsku-bar-btn svg {
  display: block;
  pointer-events: none;
}
.hq2-cgsku-bar-btn:hover {
  border-color: rgba(31, 51, 96, 0.30);
  background: rgba(31, 51, 96, 0.03);
  transform: translateY(-1px);
}
.hq2-cgsku-bar-hint {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  font-weight: 600;
  margin-top: 1px;
}
.hq2-cgsku-bar-btn:hover .hq2-cgsku-bar-hint { color: var(--ink-2, var(--ink)); }

@media (max-width: 1100px) {
  .hq2-cgsku-c-name { width: auto; }
  .hq2-cgsku-c-meta { display: none; }
  .hq2-cgsku-table thead th.hq2-cgsku-c-meta { display: none; }
}
@media (max-width: 760px) {
  .hq2-cgsku-c-bar { display: none; }
  .hq2-cgsku-table thead th.hq2-cgsku-c-bar { display: none; }
  .hq2-cgsku-section { margin: 10px 12px; }
}

/* ════════════════════════════════════════════════════════════════════
   MANUFACTURING · Kitchen mode — full UI
   ────────────────────────────────────────────────────────────────────
   Tap-friendly station-by-station prep board. Big targets because
   staff are working with their hands full.
   ──────────────────────────────────────────────────────────────────── */

/* Kitchen mode pages need full-bleed (the section-internal padding
   handles the gutters) and natural page scroll (long station list).
   The base .hq2-page constraint of max-width:1280px + outer padding
   was bunching the kitchen layout into a centered column with the
   pastel hero clipped against the page edge. */
.hq2-page--kitchen {
  padding: 0 !important;
  max-width: none !important;
  animation: none;
}

.hq2-kitchen-hero {
  padding: 28px 32px 8px;
  font-family: var(--font-ui);
}
.hq2-kitchen-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-bottom: 8px;
}
.hq2-kitchen-h1 {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 44px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  margin: 0 0 6px 0;
  line-height: 1.1;
}
.hq2-kitchen-sub {
  font-size: 15px;
  color: var(--ink-2, var(--ink));
  margin: 0 0 14px 0;
  line-height: 1.5;
}
.hq2-kitchen-meta {
  font-size: 12px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 18px;
  font-variant-numeric: tabular-nums;
}
.hq2-mfg-subnav { padding-top: 8px; }

/* Progress strip — station chooser */
.hq2-kitchen-progress {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 18px 32px;
  background: rgba(31, 51, 96, 0.04);
  border-radius: 16px;
  margin: 0 24px 18px;
  font-family: var(--font-ui);
}
.hq2-kitchen-step {
  flex: 1 1 auto;
  min-width: 130px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: all 0.15s ease;
}
.hq2-kitchen-step:hover {
  border-color: rgba(31, 51, 96, 0.30);
}
.hq2-kitchen-step.is-active {
  background: var(--ink, #1B1A6B);
  border-color: var(--ink, #1B1A6B);
  color: #ffffff;
  box-shadow: 0 8px 20px -8px rgba(31, 51, 96, 0.40);
}
.hq2-kitchen-step.is-active .hq2-kitchen-step-num,
.hq2-kitchen-step.is-active .hq2-kitchen-step-name { color: #ffffff; }
.hq2-kitchen-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: rgba(31, 51, 96, 0.10);
  color: var(--ink, #1B1A6B);
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.hq2-kitchen-step.is-active .hq2-kitchen-step-num {
  background: rgba(255, 255, 255, 0.20);
}
.hq2-kitchen-step-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  letter-spacing: 0.02em;
}

/* Station board */
.hq2-kitchen-board {
  padding: 0 24px 32px;
  font-family: var(--font-ui);
}
.hq2-kitchen-station {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 16px;
  padding: 24px 28px;
  margin-bottom: 18px;
  box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.06);
}
.hq2-kitchen-station-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-kitchen-station-name {
  grid-column: 1;
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 26px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-kitchen-station-hint {
  grid-column: 1;
  grid-row: 2;
  font-size: 13px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 2px;
}
.hq2-kitchen-station-progress {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: center;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2, var(--ink));
}

/* Checklist (setup, pack stations) */
.hq2-kitchen-checklist {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hq2-kitchen-check {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: rgba(0, 0, 0, 0.02);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
  width: 100%;
}
.hq2-kitchen-check:hover {
  background: rgba(31, 51, 96, 0.04);
}
.hq2-kitchen-check.is-done {
  background: rgba(15, 81, 50, 0.05);
  border-color: rgba(15, 81, 50, 0.20);
}
.hq2-kitchen-check-box {
  width: 26px;
  height: 26px;
  border: 2px solid rgba(0, 0, 0, 0.20);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: transparent;
  transition: all 0.15s ease;
}
.hq2-kitchen-check.is-done .hq2-kitchen-check-box {
  background: #0f5132;
  border-color: #0f5132;
  color: #ffffff;
}
.hq2-kitchen-check-text {
  font-size: 16px;
  color: var(--ink, #1B1A6B);
  font-weight: 500;
}
.hq2-kitchen-check.is-done .hq2-kitchen-check-text {
  color: var(--ink-3, rgba(0, 0, 0, 0.45));
  text-decoration: line-through;
}

/* Cards (cooking + portion + label stations) */
.hq2-kitchen-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px;
}
.hq2-kitchen-card {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  background: #ffffff;
  border: 2px solid rgba(0, 0, 0, 0.10);
  border-radius: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  text-align: left;
  min-height: 88px;
}
.hq2-kitchen-card:hover {
  border-color: rgba(31, 51, 96, 0.30);
  transform: translateY(-1px);
}
.hq2-kitchen-card.is-done {
  background: rgba(15, 81, 50, 0.05);
  border-color: rgba(15, 81, 50, 0.30);
}
.hq2-kitchen-card-l {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.hq2-kitchen-card-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  line-height: 1.3;
}
.hq2-kitchen-card-qty {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.hq2-kitchen-card-ing {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 4px;
  line-height: 1.5;
}
.hq2-kitchen-card-r {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50%;
  flex-shrink: 0;
  align-self: center;
  color: transparent;
  transition: all 0.15s ease;
}
.hq2-kitchen-card.is-done .hq2-kitchen-card-r {
  background: #0f5132;
  color: #ffffff;
}
.hq2-kitchen-card-r svg { width: 16px; height: 16px; }

/* Empty + nav */
.hq2-kitchen-empty {
  padding: 60px 32px;
  text-align: center;
  font-size: 15px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: rgba(0, 0, 0, 0.02);
  border: 1px dashed rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  font-family: var(--font-ui);
}
.hq2-kitchen-empty-soft {
  background: transparent;
  border: none;
  padding: 24px;
  font-size: 13px;
}
.hq2-kitchen-nav {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-kitchen-nav-btn {
  padding: 12px 22px;
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  cursor: pointer;
  transition: all 0.15s ease;
}
.hq2-kitchen-nav-btn:hover { background: rgba(31, 51, 96, 0.06); }
.hq2-kitchen-nav-btn.is-primary {
  background: var(--ink, #1B1A6B);
  border-color: var(--ink, #1B1A6B);
  color: #ffffff;
}
.hq2-kitchen-nav-btn.is-primary:hover {
  background: #2D2FA8;
  border-color: #2D2FA8;
}

/* Mobile — stack progress strip vertically and shrink padding */
@media (max-width: 720px) {
  .hq2-kitchen-hero { padding: 20px 18px 8px; }
  .hq2-kitchen-h1   { font-size: 32px; }
  .hq2-kitchen-progress {
    margin: 0 14px 14px;
    padding: 12px;
    flex-direction: column;
  }
  .hq2-kitchen-step { min-width: 0; padding: 10px 14px; }
  .hq2-kitchen-board { padding: 0 14px 24px; }
  .hq2-kitchen-station { padding: 18px 18px; }
  .hq2-kitchen-station-name { font-size: 22px; }
  .hq2-kitchen-cards { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   MANUFACTURING · QA Checklist
   ──────────────────────────────────────────────────────────────────── */
.hq2-qa-row {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 10px;
  margin: 8px 18px;
  padding: 14px 18px;
  font-family: var(--font-ui);
  position: relative;
}
.hq2-qa-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.hq2-qa-row-head b {
  font-size: 14px;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
}
.hq2-qa-row-head .meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-qa-row-gates {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hq2-qa-chip {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.hq2-qa-chip.is-ok  { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-qa-chip.is-bad { background: rgba(179, 33, 26, 0.12); color: #b3211a; }
.hq2-qa-chip.is-na  { background: rgba(0, 0, 0, 0.06);    color: var(--ink-3, rgba(0, 0, 0, 0.55)); }
.hq2-qa-row-notes {
  font-size: 12px;
  color: var(--ink-2, var(--ink));
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(0, 0, 0, 0.08);
  font-style: italic;
}
.hq2-qa-row .hq2-btn-sm {
  position: absolute;
  top: 14px;
  right: 18px;
}

/* QA gate edit modal */
.hq2-qa-gates-edit {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-qa-gate-edit {
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 12px 14px;
}
.hq2-qa-gate-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.hq2-qa-gate-head b {
  font-size: 13px;
  color: var(--ink, #1B1A6B);
  font-weight: 600;
}
.hq2-qa-gate-detail {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  line-height: 1.5;
}
.hq2-qa-gate-toggle {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 6px;
}
.hq2-qa-gate-btn {
  padding: 5px 12px;
  background: transparent;
  border: none;
  border-radius: 4px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  cursor: pointer;
  transition: all 0.12s ease;
}
.hq2-qa-gate-btn.is-active[data-qa-val="pass"] { background: #0f5132; color: #ffffff; }
.hq2-qa-gate-btn.is-active[data-qa-val="fail"] { background: #b3211a; color: #ffffff; }
.hq2-qa-gate-btn.is-active[data-qa-val="na"]   { background: #ffffff; color: var(--ink-2, var(--ink)); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Comms Preferences + Rules */
.hq2-cpref-list { display: flex; flex-direction: column; gap: 10px; font-family: var(--font-ui); }
.hq2-cpref-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 16px;
  align-items: center;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.025);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 8px;
}
.hq2-cpref-row-info b { font-size: 13px; color: var(--ink, #1B1A6B); display: block; }
.hq2-cpref-row-info .meta { font-size: 11px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); }
.hq2-cpref-toggle { font-size: 12px; color: var(--ink-2, var(--ink)); cursor: pointer; display: flex; align-items: center; gap: 6px; }
.hq2-crul-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: var(--font-ui);
}
.hq2-crul-row:last-child { border-bottom: none; }
.hq2-crul-row:hover { background: rgba(31, 51, 96, 0.02); }
.hq2-crul-row-l { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-width: 0; }
.hq2-crul-row-l b { font-size: 14px; font-weight: 600; color: var(--ink, #1B1A6B); }
.hq2-crul-row-l .meta { font-size: 11px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); }
.hq2-crul-row-l code { font-family: ui-monospace, Menlo, monospace; background: rgba(0, 0, 0, 0.05); padding: 1px 5px; border-radius: 3px; font-size: 10px; }
.hq2-crul-row-r { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.hq2-crul-status { font-size: 10px; padding: 3px 8px; border-radius: 4px; text-transform: uppercase; font-weight: 700; letter-spacing: 0.06em; }
.hq2-crul-status.is-on  { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-crul-status.is-off { background: rgba(0, 0, 0, 0.06);    color: var(--ink-3, rgba(0, 0, 0, 0.55)); }

/* SEO table tone overrides */
.hq2-cmb-table .tnum.is-bad  { color: #b3211a; }
.hq2-cmb-table .tnum.is-warn { color: #8a6500; }

/* Contact Center skills matrix */
.hq2-ccs-row {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  align-items: center;
  font-family: var(--font-ui);
}
.hq2-ccs-row:last-child { border-bottom: none; }
.hq2-ccs-name b { font-size: 13px; color: var(--ink, #1B1A6B); }
.hq2-ccs-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hq2-ccs-chip {
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: all 0.12s ease;
  font-family: inherit;
}
.hq2-ccs-chip:hover {
  background: rgba(0, 0, 0, 0.08);
  color: var(--ink-2, var(--ink));
}
.hq2-ccs-chip.is-on { color: #ffffff; border-color: transparent; }
.hq2-ccs-chip.is-on.is-orange { background: #C8A96E; }
.hq2-ccs-chip.is-on.is-green  { background: #0f5132; }
.hq2-ccs-chip.is-on.is-gold   { background: #c88c00; }
.hq2-ccs-chip.is-on.is-navy   { background: #1B1A6B; }
.hq2-ccs-chip.is-on.is-purple { background: #4744a0; }
.hq2-ccs-chip.is-on.is-gray   { background: #6B6E84; }
@media (max-width: 700px) {
  .hq2-ccs-row { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════════
   SUPPLY INVENTORY · duplicate scanner modal
   ──────────────────────────────────────────────────────────────────── */
.hq2-supinv-dupes-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--font-ui);
}
.hq2-supinv-dupes-cluster {
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 10px;
  overflow: hidden;
  background: #ffffff;
}
.hq2-supinv-dupes-cluster-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(31, 51, 96, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-supinv-dupes-cluster-head b {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
}
.hq2-supinv-dupes-cluster-head .meta {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: ui-monospace, Menlo, monospace;
}
.hq2-supinv-dupes-rows {
  display: flex;
  flex-direction: column;
}
.hq2-supinv-dupes-row {
  display: grid;
  grid-template-columns: 24px 1fr 70px;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  cursor: pointer;
  transition: background 0.10s ease;
}
.hq2-supinv-dupes-row:last-child { border-bottom: none; }
.hq2-supinv-dupes-row:hover { background: rgba(31, 51, 96, 0.02); }
.hq2-supinv-dupes-row.is-canonical {
  background: rgba(15, 81, 50, 0.04);
}
.hq2-supinv-dupes-row input[type=radio] {
  margin: 0;
  cursor: pointer;
  accent-color: #0f5132;
}
.hq2-supinv-dupes-row-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-supinv-dupes-row-info b {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-supinv-dupes-row-info .meta {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-supinv-dupes-keep,
.hq2-supinv-dupes-drop {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 4px;
  text-align: center;
}
.hq2-supinv-dupes-keep {
  background: rgba(15, 81, 50, 0.14);
  color: #0f5132;
}
.hq2-supinv-dupes-drop {
  background: rgba(179, 33, 26, 0.10);
  color: #b3211a;
}

/* Inline hint inside the ingredient form (package size / price flow) */
.hq2-supinv-form-hint {
  margin: 0;
  padding: 8px 12px;
  font-family: var(--font-ui);
  font-size: 11px;
  line-height: 1.6;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: rgba(31, 51, 96, 0.04);
  border: 1px dashed rgba(31, 51, 96, 0.18);
  border-radius: 8px;
  align-self: end;
  grid-column: span 2;
}
.hq2-supinv-unit-hint {
  font-weight: 400;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-size: 10px;
  margin-left: 4px;
  text-transform: lowercase;
  letter-spacing: 0;
}
@media (max-width: 760px) {
  .hq2-supinv-form-hint { grid-column: span 1; }
}

/* Marketing-type templates on Comms hub — subtle purple wash so the
   read-only rows are visually distinct from the editable transactional
   rows. */
.hq2-ct-card.is-marketing {
  background: linear-gradient(180deg, rgba(120, 80, 200, 0.03), transparent);
  border-color: rgba(120, 80, 200, 0.18);
}

/* ════════════════════════════════════════════════════════════════════
   IT & HR · Overview dashboards
   ──────────────────────────────────────────────────────────────────── */
.hq2-ithr-dash-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 1100px) {
  .hq2-ithr-dash-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .hq2-ithr-dash-grid { grid-template-columns: 1fr; }
}

/* Onboarding pipeline */
.hq2-ithr-onb-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 18px;
  font-family: var(--font-ui);
}
.hq2-ithr-onb-row {
  display: grid;
  grid-template-columns: 220px 1fr 70px;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  background: rgba(31, 51, 96, 0.03);
  border: 1px solid rgba(31, 51, 96, 0.08);
  border-radius: 8px;
  text-decoration: none;
  transition: background 0.12s ease;
}
.hq2-ithr-onb-row:hover { background: rgba(31, 51, 96, 0.07); }
.hq2-ithr-onb-name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-ithr-onb-name b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-ithr-onb-name .meta {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hq2-ithr-onb-bar {
  height: 8px;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 4px;
  overflow: hidden;
}
.hq2-ithr-onb-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}
.hq2-ithr-onb-fill.is-good  { background: linear-gradient(90deg, #0f5132, #2E8657); }
.hq2-ithr-onb-fill.is-warn  { background: linear-gradient(90deg, #c88c00, #e6b54a); }
.hq2-ithr-onb-fill.is-stale { background: linear-gradient(90deg, #6B6E84, #9aa0b8); }
.hq2-ithr-onb-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-2, var(--ink));
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.hq2-ithr-onb-more {
  text-align: center;
  padding: 8px;
  font-size: 12px;
}
.hq2-ithr-onb-more a {
  color: var(--ink-2, var(--ink));
  text-decoration: none;
}
.hq2-ithr-onb-more a:hover { text-decoration: underline; }

/* This-week shifts mini-bar */
.hq2-ithr-week {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
  padding: 14px 18px 6px;
  font-family: var(--font-ui);
}
.hq2-ithr-week-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hq2-ithr-week-bar {
  width: 100%;
  height: 80px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 4px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hq2-ithr-week-fill {
  width: 100%;
  background: linear-gradient(180deg, #1B1A6B, #4744a0);
  border-radius: 4px 4px 0 0;
  transition: height 0.3s ease;
}
.hq2-ithr-week-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
}
.hq2-ithr-week-day {
  font-size: 10px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.hq2-ithr-week-foot {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-align: center;
  padding: 6px 0 14px;
  font-family: var(--font-ui);
}

/* IT tickets — priority breakdown */
.hq2-ithr-tk-pri-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  padding: 14px 18px 6px;
  font-family: var(--font-ui);
}
.hq2-ithr-tk-pri {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 8px;
}
.hq2-ithr-tk-pri b {
  font-size: 18px;
  font-weight: 700;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
}
.hq2-ithr-tk-pri span {
  font-size: 9px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-ithr-tk-pri.is-urgent { background: rgba(179, 33, 26, 0.10); }
.hq2-ithr-tk-pri.is-urgent b { color: #b3211a; }
.hq2-ithr-tk-pri.is-high   { background: rgba(200, 140, 0, 0.10); }
.hq2-ithr-tk-pri.is-high b { color: #8a6500; }
.hq2-ithr-tk-pri.is-normal { background: rgba(31, 51, 96, 0.06); }
.hq2-ithr-tk-pri.is-low    { background: rgba(0, 0, 0, 0.04); }
.hq2-ithr-tk-foot {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  text-align: center;
  padding: 6px 0 14px;
  font-family: var(--font-ui);
}

/* Skill coverage grid */
.hq2-ithr-sk-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 18px;
  font-family: var(--font-ui);
}
.hq2-ithr-sk-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
}
.hq2-ithr-sk-row.is-bad  { background: rgba(179, 33, 26, 0.06); color: #b3211a; }
.hq2-ithr-sk-row.is-warn { background: rgba(200, 140, 0, 0.08); color: #8a6500; }
.hq2-ithr-sk-row.is-ok   { background: rgba(15, 81, 50, 0.04);  color: #0f5132; }
.hq2-ithr-sk-label {
  text-transform: capitalize;
  font-weight: 500;
}
.hq2-ithr-sk-count {
  font-size: 13px;
  font-weight: 700;
}

/* Pending staff invites — Directory tab */
.hq2-ithr-invites {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 18px;
  font-family: var(--font-ui);
}
.hq2-ithr-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  background: rgba(200, 140, 0, 0.04);
  border: 1px solid rgba(200, 140, 0, 0.18);
  border-radius: 8px;
}
.hq2-ithr-invite-l {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.hq2-ithr-invite-l b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-ithr-invite-l .meta {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
}
.hq2-ithr-invite-r {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}

/* Low-stock badges in inventory list */
.hq2-supinv-alert {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-ui);
  vertical-align: middle;
}
.hq2-supinv-alert.is-low {
  background: rgba(200, 140, 0, 0.14);
  color: #8a6500;
}
.hq2-supinv-alert.is-out {
  background: rgba(179, 33, 26, 0.14);
  color: #b3211a;
  animation: hq2-supinv-pulse 2s ease-in-out infinite;
}
@keyframes hq2-supinv-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
.hq2-supinv-row.is-low-stock {
  background: rgba(200, 140, 0, 0.04);
}
.hq2-supinv-row .is-low-num {
  color: #8a6500;
  font-weight: 700;
}

/* Inline package-count helper text in the form */
.hq2-supinv-form-help {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-family: var(--font-ui);
  font-style: italic;
  min-height: 16px;     /* reserve space so the form doesn't jump */
}


/* ── Supply chain · Receiving ────────────────────────────────── */
.hq2-rec-cta-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: var(--s-3) 0;
  flex-wrap: wrap;
}
.hq2-rec-cta-hint {
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.hq2-rec-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-rec-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  border-bottom: 2px solid rgba(0, 0, 0, 0.08);
}
.hq2-rec-table th.ar, .hq2-rec-table td.ar { text-align: right; }
.hq2-rec-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  vertical-align: middle;
}
.hq2-rec-table td b { color: var(--ink); font-weight: 700; }
.hq2-rec-line {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  font-size: 11px;
  font-weight: 600;
}
.hq2-rec-line b { color: #8a6500; font-variant-numeric: tabular-nums; margin-left: 3px; }
.hq2-rec-line.is-more { font-style: italic; color: var(--ink-3); }

/* Modal — log-receiving */
.hq2-rec-lines-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 12px 0 8px;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.hq2-rec-lines {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}
.hq2-rec-line-row {
  display: grid;
  grid-template-columns: 110px 1.5fr 80px 90px 100px 130px auto;
  gap: 6px;
  padding: 8px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 8px;
  align-items: center;
}
@media (max-width: 880px) {
  .hq2-rec-line-row {
    grid-template-columns: 1fr 1fr;
  }
  .hq2-rec-line-row .hq2-rec-line-x { grid-column: 1 / -1; justify-self: end; }
}
.hq2-rec-line-row .hq2-input {
  font-size: 12px;
  padding: 6px 8px;
}
.hq2-rec-line-x {
  width: 32px;
  height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}
.hq2-rec-line-lotwrap {
  display: flex;
  gap: 4px;
  align-items: center;
}
.hq2-rec-line-lotwrap .hq2-input { flex: 1; min-width: 0; }
.hq2-rec-line-lot-gen {
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}
.hq2-rec-lot {
  display: inline-block;
  background: #F4F8FE;
  color: #1B5DB0;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  margin: 0 2px 2px 0;
  border: 1px solid rgba(27, 93, 176, .15);
}
.hq2-rec-lot:hover { background: #E4ECFA; text-decoration: none; }
.hq2-rec-summary {
  display: flex;
  justify-content: space-between;
  padding: 10px 12px;
  background: rgba(255, 252, 244, 0.6);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  margin: 10px 0;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-3);
}
.hq2-rec-summary b {
  color: var(--ink);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}

/* ── Customer service · Knowledge base ───────────────────────── */
.hq2-kb-fill { flex: 1; }
.hq2-kb-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: box-shadow 0.18s ease;
}
.hq2-kb-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.hq2-kb-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.hq2-kb-card-head-l {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-kb-card-head-l b {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink);
}
.hq2-kb-card-head-r {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.hq2-kb-views {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  padding: 2px 8px;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 999px;
}
.hq2-kb-slug code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--ink-3);
  background: rgba(27, 26, 107, 0.06);
  padding: 2px 8px;
  border-radius: 4px;
}
.hq2-kb-preview {
  font-family: var(--font-ui);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-3);
  background: rgba(0, 0, 0, 0.02);
  padding: 10px 12px;
  border-radius: 6px;
  max-height: 60px;
  overflow: hidden;
}
.hq2-kb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.hq2-kb-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 252, 244, 0.85);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
}
.hq2-kb-foot {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-style: italic;
}


/* ════════════════════════════════════════════════════════════════════
   Consumer Goods · Wholesale price tiers — /hq2#/consumerGoods/wholesale
   ──────────────────────────────────────────────────────────────────── */

.hq2-cg-ws-table-wrap {
  width: 100%;
  overflow-x: auto;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-cg-ws-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-ui);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
.hq2-cg-ws-table thead th {
  background: #fafafa;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  white-space: nowrap;
}
.hq2-cg-ws-table thead th.ar { text-align: right; }
.hq2-cg-ws-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  color: var(--ink-2, var(--ink));
  vertical-align: middle;
}
.hq2-cg-ws-table tbody td.ar { text-align: right; white-space: nowrap; }
.hq2-cg-ws-table tbody tr:last-child td { border-bottom: none; }
.hq2-cg-ws-table tbody tr:hover td { background: rgba(27, 26, 107, 0.02); }
.hq2-cg-ws-table tbody tr.is-unpriced td {
  background: rgba(200, 140, 0, 0.04);
}
.hq2-cg-ws-table tbody tr.is-unpriced:hover td {
  background: rgba(200, 140, 0, 0.08);
}

.hq2-cg-ws-name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  max-width: 280px;
}
.hq2-cg-ws-sku {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  background: rgba(0, 0, 0, 0.04);
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.hq2-cg-ws-note {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-style: italic;
  margin-top: 3px;
  font-weight: 400;
}
.hq2-cg-ws-empty {
  color: rgba(0, 0, 0, 0.25);
  font-weight: 500;
}

/* Reuse hq2-pr-tone classes if present; define our own colors so the
   wholesale page is self-contained when the margin module's CSS isn't
   yet on the page. */
.hq2-pr-tone {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.hq2-pr-tone.is-strong { background: rgba(15, 81, 50, 0.12); color: #0f5132; }
.hq2-pr-tone.is-ok     { background: rgba(27, 26, 107, 0.10); color: #1B1A6B; }
.hq2-pr-tone.is-thin   { background: rgba(200, 140, 0, 0.16); color: #8a6500; }
.hq2-pr-tone.is-bad    { background: rgba(179, 33, 26, 0.14); color: #b3211a; }

/* Edit modal */
.hq2-cg-ws-modal {
  max-width: 520px;
  width: 100%;
}
.hq2-cg-ws-modal-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 18px;
  padding: 14px 16px;
  background: rgba(27, 26, 107, 0.04);
  border-radius: 8px;
}
.hq2-cg-ws-modal-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hq2-cg-ws-modal-stat span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  font-weight: 600;
}
.hq2-cg-ws-modal-stat b {
  font-family: var(--font-display, 'Fraunces', serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--ink, #1B1A6B);
  font-variant-numeric: tabular-nums;
}

.hq2-cg-ws-suggest {
  background: none;
  border: none;
  color: var(--ink, #1B1A6B);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  margin-left: 8px;
  text-decoration: underline;
}
.hq2-cg-ws-suggest:hover { color: #4744a0; }

.hq2-cg-ws-modal-hint {
  display: block;
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  margin-top: 6px;
  font-weight: 500;
  min-height: 14px;
}
.hq2-cg-ws-modal-hint.is-strong { color: #0f5132; }
.hq2-cg-ws-modal-hint.is-ok     { color: #1B1A6B; }
.hq2-cg-ws-modal-hint.is-thin   { color: #8a6500; }
.hq2-cg-ws-modal-hint.is-bad    { color: #b3211a; font-weight: 600; }

@media (max-width: 600px) {
  .hq2-cg-ws-table { font-size: 11px; }
  .hq2-cg-ws-table tbody td, .hq2-cg-ws-table thead th { padding: 8px 8px; }
  .hq2-cg-ws-name { max-width: 160px; }
  .hq2-cg-ws-modal-summary { grid-template-columns: 1fr 1fr; }
}


/* Inline saved/error indicator on the supply inventory form */
.hq2-supinv-saved-flag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 6px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  background: rgba(15, 81, 50, 0.10);
  color: #0f5132;
  margin-right: auto;            /* push to left of action buttons */
}
.hq2-supinv-saved-flag.is-pulse {
  animation: hq2-saved-pulse 0.4s cubic-bezier(.32, .72, 0, 1);
}
.hq2-supinv-saved-flag.is-error {
  background: rgba(179, 33, 26, 0.10);
  color: #b3211a;
}
@keyframes hq2-saved-pulse {
  0%   { transform: scale(0.9); opacity: 0; }
  60%  { transform: scale(1.05); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* Skill coverage table layout — rendered as real <table> for layout
   robustness (works even if external CSS misses). Tone styling is
   additive on top of the table base. */
.hq2-ithr-sk-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 12px;
  margin: 6px 0;
}
.hq2-ithr-sk-table thead th {
  text-align: left;
  padding: 8px 14px;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  background: rgba(0, 0, 0, 0.02);
}
.hq2-ithr-sk-h-cnt { text-align: right !important; }
.hq2-ithr-sk-h-tone { text-align: right !important; }
.hq2-ithr-sk-table tbody tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}
.hq2-ithr-sk-table tbody tr:last-child { border-bottom: none; }
.hq2-ithr-sk-table td {
  padding: 7px 14px;
  vertical-align: middle;
  color: var(--ink-2, var(--ink));
}
.hq2-ithr-sk-table .hq2-ithr-sk-label {
  text-transform: capitalize;
  font-weight: 500;
  color: var(--ink, #1B1A6B);
}
.hq2-ithr-sk-table .hq2-ithr-sk-count {
  text-align: right;
  font-size: 14px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hq2-ithr-sk-table .hq2-ithr-sk-tone-cell {
  text-align: right;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hq2-ithr-sk-table tr.is-bad .hq2-ithr-sk-count,
.hq2-ithr-sk-table tr.is-bad .hq2-ithr-sk-tone-cell {
  color: #b3211a;
}
.hq2-ithr-sk-table tr.is-warn .hq2-ithr-sk-count,
.hq2-ithr-sk-table tr.is-warn .hq2-ithr-sk-tone-cell {
  color: #8a6500;
}
.hq2-ithr-sk-table tr.is-ok .hq2-ithr-sk-count,
.hq2-ithr-sk-table tr.is-ok .hq2-ithr-sk-tone-cell {
  color: #0f5132;
}
.hq2-ithr-sk-table tr.is-bad  td { background: rgba(179, 33, 26, 0.04); }
.hq2-ithr-sk-table tr.is-warn td { background: rgba(200, 140, 0, 0.04); }

/* Onboarding pipeline — extend tones with not-started red */
.hq2-ithr-onb-fill.is-bad {
  background: linear-gradient(90deg, #b3211a, #d46b66);
}

/* ════════════════════════════════════════════════════════════════════
   TRACEABILITY · /hq2#/supplyChain/traceability
   ──────────────────────────────────────────────────────────────────── */
.hq2-trace {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 clamp(20px, 3vw, 36px);
  margin-bottom: 40px;
}
.hq2-trace-tabs {
  display: flex;
  gap: 4px;
  background: rgba(20, 16, 68, .04);
  padding: 4px;
  border-radius: 10px;
  align-self: flex-start;
}
.hq2-trace-tab {
  border: none;
  background: transparent;
  padding: 8px 14px;
  border-radius: 7px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  cursor: pointer;
}
.hq2-trace-tab.is-active {
  background: #fff;
  color: var(--ink, #141044);
  box-shadow: 0 1px 2px rgba(20,16,68,.08);
  font-weight: 600;
}
.hq2-trace-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.hq2-trace-input { flex: 1; min-width: 240px; max-width: 480px; }
.hq2-trace-date  { width: 160px; }
.hq2-trace-stats {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.hq2-trace-stat-pill {
  background: rgba(20, 16, 68, .04);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  color: var(--ink-3, #6E7088);
}
.hq2-trace-stat-pill b { color: var(--ink, #141044); }

.hq2-trace-result {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.hq2-trace-summary {
  background: linear-gradient(135deg, #FFFCF6 0%, #FAF3E6 100%);
  border: 1px solid rgba(200, 160, 60, .2);
  border-radius: 14px;
  padding: 18px 22px;
}
.hq2-trace-summary-head h2 {
  margin: 4px 0 14px;
  font-family: var(--font-display, var(--font-ui));
  font-size: var(--t-22, 22px);
  color: var(--ink, #141044);
  letter-spacing: -.01em;
}
.hq2-trace-summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}
.hq2-trace-summary-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 14px;
  background: rgba(255,255,255,.6);
  border-radius: 10px;
}
.hq2-trace-summary-cell b {
  font-size: 22px;
  color: var(--ink, #141044);
  font-family: var(--font-display, var(--font-ui));
}
.hq2-trace-summary-cell span {
  font-size: 11.5px;
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.hq2-trace-summary-callout {
  background: linear-gradient(135deg, #fff 0%, #FFF6E0 100%);
  outline: 2px solid rgba(200, 130, 0, .3);
}

.hq2-trace-step {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow: hidden;
}
.hq2-trace-step-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-ui);
}
.hq2-trace-step-head b { color: var(--ink, #141044); font-size: 14px; }
.hq2-trace-step-num {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink, #141044);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.hq2-trace-step-body {
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hq2-trace-empty {
  font-size: 13px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
  padding: 8px 0;
}
.hq2-trace-card {
  background: rgba(20, 16, 68, .02);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 10px;
  overflow: hidden;
}
.hq2-trace-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,.7);
  border-bottom: 1px solid rgba(20, 16, 68, .04);
  font-family: var(--font-ui);
  font-size: 13px;
}
.hq2-trace-card-head b { color: var(--ink, #141044); }
.hq2-trace-card-head span { color: var(--ink-3, #6E7088); font-size: 12px; }
.hq2-trace-card-head a { color: inherit; text-decoration: none; }
.hq2-trace-card-head a:hover { text-decoration: underline; }
.hq2-trace-card-body {
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-2, #45456b);
}
.hq2-trace-line { line-height: 1.55; }
.hq2-trace-line-lbl {
  color: var(--ink-3, #6E7088);
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: 11px;
  margin-right: 4px;
}
.hq2-trace-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.hq2-trace-table th,
.hq2-trace-table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
}
.hq2-trace-table th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3, #6E7088);
  font-weight: 500;
  background: rgba(20, 16, 68, .02);
}
.hq2-trace-email {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 12px;
  color: var(--ink-2, #45456b);
}
.hq2-trace-orderlink {
  display: inline-block;
  background: #F4F8FE;
  color: #1B5DB0;
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  text-decoration: none;
  margin: 0 2px 2px 0;
  border: 1px solid rgba(27, 93, 176, .15);
}
.hq2-trace-orderlink:hover { background: #E4ECFA; text-decoration: none; }
.hq2-trace-orderlink-more {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  font-style: italic;
}

/* ════════════════════════════════════════════════════════════════════
   COMMERCE · PRODUCTS TAB — inline editor + listing table.
   Mirrors .hq2-cmb-row layout style; adds variant editor + status pills.
   ════════════════════════════════════════════════════════════════════ */
.hq2-cmp-table {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.hq2-cmp-row {
  display: grid;
  grid-template-columns: 2.2fr 1fr 0.8fr 0.7fr 0.6fr 0.7fr;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  color: var(--ink-2, var(--ink));
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.hq2-cmp-row:hover {
  background: rgba(31, 51, 96, 0.03);
}
.hq2-cmp-row.hq2-cmp-row-head {
  background: rgba(0, 0, 0, 0.02);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 9px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.10);
  pointer-events: none;
  cursor: default;
}
.hq2-cmp-row .name {
  font-weight: 600;
  color: var(--ink, #1B1A6B);
}
.hq2-cmp-row .tnum { text-align: right; }
.hq2-cmp-status {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 9px;
  border-radius: 4px;
  text-align: center;
}
.hq2-cmp-status.is-live  { background: rgba(15, 81, 50, 0.12);  color: #0f5132; }
.hq2-cmp-status.is-draft { background: rgba(0, 0, 0, 0.06);     color: var(--ink-3, rgba(0, 0, 0, 0.55)); }

/* Editor modal — drawer-style inline product editor */
.hq2-cmp-edit-grid { display: flex; flex-direction: column; gap: 12px; }
.hq2-cmp-edit-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 600px) {
  .hq2-cmp-edit-row { grid-template-columns: 1fr; }
}
.hq2-cmp-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(31, 51, 96, 0.04);
  cursor: pointer;
  font-family: var(--font-ui);
}
.hq2-cmp-toggle b { font-size: 13px; color: var(--ink, #1B1A6B); }
.hq2-cmp-toggle i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); margin-top: 2px; }
.hq2-cmp-toggle input { width: 18px; height: 18px; cursor: pointer; }
.hq2-cmp-toggle span { flex: 1; }

.hq2-cmp-var-block {
  border: 1px dashed rgba(0, 0, 0, 0.12);
  border-radius: 10px;
  padding: 12px 14px;
  background: rgba(0, 0, 0, 0.015);
}
.hq2-cmp-var-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.hq2-cmp-var-head b { font-size: 13px; color: var(--ink, #1B1A6B); }
.hq2-cmp-var-head i { display: block; font-style: normal; font-size: 11px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); margin-top: 2px; }
.hq2-cmp-var-empty { font-size: 12px; color: var(--ink-3, rgba(0, 0, 0, 0.55)); padding: 6px 0; }
.hq2-cmp-var-row {
  display: grid;
  grid-template-columns: 1fr 1fr 0.8fr 1fr 32px;
  gap: 8px;
  align-items: center;
  margin-bottom: 6px;
}
.hq2-cmp-var-row.hq2-cmp-var-row-head {
  font-size: 10px;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 0 4px;
  margin-bottom: 4px;
}
.hq2-cmp-var-x {
  width: 32px; height: 32px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
}

/* ════════════════════════════════════════════════════════════════════
   COMMERCE · BUNDLES TAB — matrix view + view toggle (list / matrix)
   ════════════════════════════════════════════════════════════════════ */
.hq2-cmb-view-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.hq2-cmb-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.hq2-cmb-view-btn.is-active {
  background: #fff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.hq2-cmb-matrix {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
}
.hq2-cmb-mat-row {
  display: grid;
  grid-template-columns: 2fr 0.5fr 0.9fr 0.9fr 0.9fr 0.7fr 0.9fr 0.9fr 0.7fr 0.8fr;
  gap: 10px;
  align-items: center;
  padding: 11px 18px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-size: 13px;
  text-decoration: none;
  color: var(--ink-2, var(--ink));
  transition: background 0.12s ease;
}
.hq2-cmb-mat-row:hover { background: rgba(31, 51, 96, 0.03); }
.hq2-cmb-mat-row.hq2-cmb-mat-row-head {
  background: rgba(0, 0, 0, 0.02);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 9px 18px;
  pointer-events: none;
}
.hq2-cmb-mat-row .name { font-weight: 600; color: var(--ink, #1B1A6B); }
.hq2-cmb-mat-row .ar { text-align: right; }
.hq2-cmb-mat-profit.is-good { color: #0f5132; font-weight: 600; }
.hq2-cmb-mat-profit.is-bad  { color: #b3211a; font-weight: 600; }
.hq2-cmb-mat-foot {
  font-size: 11px;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  padding: 10px 18px 0;
  margin: 0;
  font-family: var(--font-ui);
}
.hq2-cmb-mat-foot code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 10.5px;
}

/* ════════════════════════════════════════════════════════════════════
   COMMERCE · CROSS-SELL — pairs / triples mode toggle
   ════════════════════════════════════════════════════════════════════ */
.hq2-cx-mode-toggle {
  display: inline-flex;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
  margin-right: 8px;
}
.hq2-cx-mode-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink-3, rgba(0, 0, 0, 0.55));
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
}
.hq2-cx-mode-btn.is-active {
  background: #fff;
  color: var(--ink, #1B1A6B);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}


/* ════════════════════════════════════════════════════════════════════
   FS · SALES TAX FILINGS + PAYROLL EXPORT
   ────────────────────────────────────────────────────────────────────
   Shared layout shell for both finance worksheet pages
   (/hq2#/financialServices/sales-tax + /payroll-export).
   ════════════════════════════════════════════════════════════════════ */
.hq2-fst-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 20px 0 18px;
  padding: 14px 16px;
  background: var(--hq2-card, #fff);
  border: 1px solid var(--hq2-border, rgba(0, 0, 0, 0.08));
  border-radius: 10px;
}
.hq2-fst-month-picker {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
}
.hq2-fst-lbl {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}
.hq2-fst-select {
  padding: 9px 11px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.16);
  border-radius: 8px;
  color: #1B1A6B;
  min-width: 220px;
}
.hq2-fst-controls .hq2-btn {
  margin-left: auto;
}
.hq2-fst-controls .hq2-btn + .hq2-btn {
  margin-left: 8px;
}

.hq2-fst-row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 16px;
  margin: 16px 0;
}
@media (max-width: 900px) {
  .hq2-fst-row { grid-template-columns: 1fr; }
}

.hq2-fst-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  line-height: 1.45;
}
.hq2-fst-table th,
.hq2-fst-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.hq2-fst-table th {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
  background: rgba(27, 26, 107, 0.03);
}
.hq2-fst-table td.ar,
.hq2-fst-table th.ar {
  text-align: right;
}
.hq2-fst-table tr.hq2-fst-table-sum td {
  font-weight: 600;
  background: rgba(27, 26, 107, 0.04);
  border-top: 1px solid rgba(27, 26, 107, 0.18);
}
.hq2-fst-table tr.hq2-fst-table-final td {
  font-weight: 700;
  font-size: 14px;
  background: rgba(27, 26, 107, 0.07);
  border-top: 2px solid rgba(27, 26, 107, 0.32);
  border-bottom: 2px solid rgba(27, 26, 107, 0.32);
}
.hq2-fst-table tr.hq2-fst-table-final.hq2-fst-var-bad td {
  background: rgba(179, 33, 26, 0.07);
  color: #b3211a;
  border-color: rgba(179, 33, 26, 0.32);
}
.hq2-fst-table tr.hq2-fst-table-final.hq2-fst-var-warn td {
  background: rgba(200, 140, 0, 0.07);
  color: #8a6500;
  border-color: rgba(200, 140, 0, 0.32);
}

.hq2-fst-variance-note {
  margin: 12px 16px 14px;
  padding: 9px 12px;
  font-size: 12.5px;
  background: rgba(15, 81, 50, 0.06);
  color: #0f5132;
  border-left: 3px solid #0f5132;
  border-radius: 4px;
}
.hq2-fst-variance-note.hq2-fst-var-bad {
  background: rgba(179, 33, 26, 0.06);
  color: #b3211a;
  border-left-color: #b3211a;
}
.hq2-fst-variance-note.hq2-fst-var-warn {
  background: rgba(200, 140, 0, 0.06);
  color: #8a6500;
  border-left-color: #8a6500;
}
.hq2-fst-filed-note {
  margin: 6px 16px 14px;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.6);
  font-style: italic;
}

.hq2-fst-status-filed::before {
  content: '✓ ';
  font-weight: 700;
  color: #0f5132;
}

.hq2-fst-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
}
.hq2-fst-pill.is-filed { background: rgba(15, 81, 50, 0.12);  color: #0f5132; }
.hq2-fst-pill.is-draft { background: rgba(200, 140, 0, 0.14); color: #8a6500; }
.hq2-fst-pill.is-empty { background: rgba(0, 0, 0, 0.06);     color: rgba(0, 0, 0, 0.5); }
.hq2-fst-pill.is-warn  { background: rgba(179, 33, 26, 0.10); color: #b3211a; margin-left: 6px; }

.hq2-fst-empty {
  padding: 28px 22px;
  text-align: center;
  color: rgba(0, 0, 0, 0.55);
  font-size: 13.5px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 6px;
  margin: 14px;
}
.hq2-fst-foot {
  margin-top: 18px;
  padding: 12px 16px;
  background: rgba(200, 140, 0, 0.07);
  border: 1px dashed rgba(200, 140, 0, 0.32);
  border-radius: 8px;
  font-size: 12.5px;
  color: #5e4a00;
  line-height: 1.55;
}
.hq2-fst-foot a { color: #1B1A6B; text-decoration: underline; }

.hq2-fst-row-sub {
  font-size: 11.5px;
  color: rgba(0, 0, 0, 0.5);
  margin-top: 1px;
}
.hq2-fst-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  color: rgba(0, 0, 0, 0.7);
}
.hq2-fst-zero {
  color: rgba(0, 0, 0, 0.4);
}

}

/* ════════════════════════════════════════════════════════════════════
   COST LAB · RECOMMENDED PACKS — AI-powered pack-size suggestions
   ──────────────────────────────────────────────────────────────────
   Inline panel inside the Cost Lab simulator card (button + tagline).
   Modal opens on click — 3-question form, then AI-generated cards
   each with their own "Apply" button + a single "Apply all" at top.
   ════════════════════════════════════════════════════════════════════ */

.hq2-lab-recpack {
  margin-top: 14px;
  padding: 14px 16px;
  background: linear-gradient(135deg, rgba(200, 169, 110, .10), rgba(237, 230, 255, .25));
  border: 1px solid rgba(200, 169, 110, .35);
  border-radius: 12px;
}
.hq2-lab-recpack-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.hq2-lab-recpack-eyebrow {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep, #8E6C2E);
}
.hq2-lab-recpack-head p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-3, #6E7088);
  line-height: 1.45;
}

/* Modal */
.hq2-recpack-modal {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hq2-recpack-mask {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 68, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.hq2-recpack-panel {
  position: relative;
  background: #fff;
  border-radius: 18px;
  width: min(560px, calc(100vw - 28px));
  max-height: calc(100vh - 60px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px -20px rgba(20, 16, 68, .35);
  animation: hq2-recpack-pop .14s cubic-bezier(.32, .72, 0, 1);
}
@keyframes hq2-recpack-pop {
  from { opacity: 0; transform: translateY(8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.hq2-recpack-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--rule, rgba(20, 16, 68, .07));
  flex-shrink: 0;
}
.hq2-recpack-eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep, #8E6C2E);
  margin-bottom: 4px;
}
.hq2-recpack-head h2 {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.005em;
  color: var(--ink, #141044);
}
.hq2-recpack-close {
  width: 30px; height: 30px;
  background: transparent;
  border: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--ink-3, #6E7088);
  border-radius: 8px;
}
.hq2-recpack-close:hover { background: var(--surface-2, #FAF7F2); color: var(--ink, #141044); }

.hq2-recpack-body {
  padding: 18px 22px 22px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.hq2-recpack-summary {
  background: var(--surface-2, #FAF7F2);
  border: 1px solid rgba(20, 16, 68, .06);
  border-radius: 10px;
  padding: 12px 14px;
}
.hq2-recpack-summary dl {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0;
  font-family: var(--font-ui);
}
.hq2-recpack-summary dl > div { display: flex; flex-direction: column; gap: 2px; }
.hq2-recpack-summary dt {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
}
.hq2-recpack-summary dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink, #141044);
  font-variant-numeric: tabular-nums;
}

.hq2-recpack-form { display: flex; flex-direction: column; gap: 12px; }
.hq2-recpack-field {
  display: flex; flex-direction: column; gap: 5px;
}
.hq2-recpack-field > span {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
}
.hq2-recpack-field > span em {
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-3, #6E7088);
  margin-left: 4px;
}
.hq2-recpack-field .hq2-input {
  font-size: 14px;
  padding: 10px 12px;
}
.hq2-recpack-field textarea.hq2-input { min-height: 60px; resize: vertical; }
.hq2-recpack-err {
  margin-top: 4px;
  padding: 8px 12px;
  background: rgba(220, 38, 38, .1);
  color: #b91c1c;
  border-radius: 8px;
  font-size: 12px;
}

/* Results */
.hq2-recpack-results { display: flex; flex-direction: column; gap: 12px; }
.hq2-recpack-results-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.hq2-recpack-results-head h3 {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink, #141044);
}
.hq2-recpack-cards { display: flex; flex-direction: column; gap: 8px; }
.hq2-recpack-card {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--rule, rgba(20, 16, 68, .07));
  border-radius: 10px;
  align-items: center;
}
.hq2-recpack-card-l { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.hq2-recpack-card-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink, #141044);
  letter-spacing: -.005em;
  text-transform: capitalize;
}
.hq2-recpack-card-qty {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
}
.hq2-recpack-card-rationale {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-2, #2a2566);
  line-height: 1.45;
}
.hq2-recpack-card-r { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.hq2-recpack-card-price {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #141044);
  font-variant-numeric: tabular-nums;
}
.hq2-recpack-apply { font-size: 12px; padding: 6px 12px; }

.hq2-recpack-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px dashed var(--rule, rgba(20, 16, 68, .07));
  flex-wrap: wrap;
}
.hq2-recpack-foot-note {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  line-height: 1.4;
}
.hq2-recpack-foot-note code {
  background: var(--surface-2, #FAF7F2);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px;
}

@media (max-width: 540px){
  .hq2-recpack-summary dl { grid-template-columns: 1fr 1fr; }
  .hq2-recpack-card { flex-direction: column; align-items: flex-start; }
  .hq2-recpack-card-r { width: 100%; justify-content: space-between; }
}

/* ════════════════════════════════════════════════════════════════════
   CONSUMER GOODS · MARGIN BOARD — expandable per-pack breakdown
   Tommy: "show all the pack options if applicable. Make the recipe
   expandable to show pack sizes as a dropdown."
   ════════════════════════════════════════════════════════════════════ */
.hq2-cg-table .col-expand {
  width: 28px;
  padding-left: 8px !important;
  padding-right: 0 !important;
}
.hq2-cg-expand-btn {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  color: var(--ink-3, #6E7088);
  padding: 0;
  transition: background .12s, color .12s, transform .15s ease;
}
.hq2-cg-expand-btn:hover {
  background: rgba(20, 16, 68, .08);
  color: var(--ink, #141044);
}
.hq2-cg-expand-btn.is-open {
  transform: rotate(90deg);
  color: var(--ink, #141044);
}
.hq2-cg-expand-spacer {
  display: inline-block;
  width: 22px;
  height: 22px;
}

.hq2-cg-row.is-expandable {
  cursor: pointer;
}
.hq2-cg-row.is-expandable:hover {
  background: rgba(20, 16, 68, .025);
}
.hq2-cg-row.is-open {
  background: rgba(200, 169, 110, .07);
}
.hq2-cg-row.is-open td {
  border-bottom-color: transparent;
}

.hq2-cg-pack-count {
  display: inline-block;
  margin-left: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gold-deep, #8E6C2E);
  background: rgba(200, 169, 110, .15);
  padding: 1px 7px;
  border-radius: 99px;
  vertical-align: middle;
}
.hq2-cg-per-unit {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3, #6E7088);
  margin-left: 4px;
}

/* Detail row — the expanded pack-by-pack breakdown */
.hq2-cg-detail td {
  padding: 0 !important;
  background: rgba(200, 169, 110, .04);
  border-bottom: 1px solid var(--rule, rgba(20, 16, 68, .07));
}
.hq2-cg-pack-table {
  display: flex;
  flex-direction: column;
  margin: 0 38px 12px;
  background: #fff;
  border: 1px solid var(--rule, rgba(20, 16, 68, .08));
  border-radius: 10px;
  overflow: hidden;
  font-family: var(--font-ui);
  font-size: 12px;
}
.hq2-cg-pack-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 60px 90px 90px 90px 80px 80px;
  gap: 8px;
  align-items: center;
  padding: 8px 14px;
  border-top: 1px solid var(--rule, rgba(20, 16, 68, .07));
}
.hq2-cg-pack-row:first-child { border-top: 0; }
.hq2-cg-pack-head {
  background: var(--surface-2, #FAF7F2);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
}
.hq2-cg-pack-row .ar { text-align: right; }
.hq2-cg-pack-row .tnum { font-variant-numeric: tabular-nums; }
.hq2-cg-pack-row b {
  color: var(--ink, #141044);
  font-weight: 700;
  text-transform: capitalize;
}

@media (max-width: 920px){
  .hq2-cg-pack-table { margin-left: 12px; margin-right: 12px; }
  .hq2-cg-pack-row {
    grid-template-columns: minmax(100px, 1.3fr) 50px 80px 80px 70px 70px 70px;
    font-size: 11px;
    padding: 8px 10px;
  }
}

/* ─── Pricing · Bakery tab (/hq2#/financials/bakery) ────────────────
   Recipe-grouped pack-size pricing preview. One section per tier-ladder
   (sweets / loaf / sheet / etc.), one card per recipe within, one row
   per pack-size on each recipe. Mirrors the meal Pricing preview but
   uses the recipe→ladder→pack hierarchy instead of cart-size tiers. */
.hq2-bp-ladder-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 20px;
  padding: 6px;
  background: #fff;
  border: 1px solid var(--rule, rgba(20, 16, 68, .08));
  border-radius: 14px;
}
.hq2-bp-ladder-btn {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  padding: 9px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: var(--ink-3, #6E7088);
  letter-spacing: 0.02em;
  transition: background .15s, color .15s;
  text-align: left;
  font-family: var(--font-ui);
}
.hq2-bp-ladder-btn .ttl {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink, #141044);
  text-transform: lowercase;
}
.hq2-bp-ladder-btn .meta {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--ink-3, #6E7088);
  margin-top: 2px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.hq2-bp-ladder-btn:hover { background: rgba(20, 16, 68, .03); }
.hq2-bp-ladder-btn.is-active { background: var(--ink, #141044); }
.hq2-bp-ladder-btn.is-active .ttl,
.hq2-bp-ladder-btn.is-active .meta { color: #fff; }
.hq2-bp-ladder-btn.is-active .meta { color: rgba(255, 255, 255, .7); }

.hq2-bp-body { display: flex; flex-direction: column; gap: 28px; }
.hq2-bp-ladder-section {}
.hq2-bp-ladder-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 0 0 12px;
}
.hq2-bp-ladder-head h2 {
  font-size: 14px;
  font-weight: 800;
  margin: 0;
  color: var(--ink, #141044);
  text-transform: lowercase;
  letter-spacing: -0.005em;
}
.hq2-bp-ladder-meta {
  font-size: 11px;
  color: var(--ink-3, #6E7088);
  letter-spacing: 0.02em;
}
.hq2-bp-ladder-meta code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 10.5px;
  background: rgba(20, 16, 68, .05);
  padding: 1px 5px;
  border-radius: 4px;
  color: var(--ink-2, #3b3766);
}

.hq2-bp-recipes { display: flex; flex-direction: column; gap: 14px; }

.hq2-bp-recipe {
  background: #fff;
  border: 1px solid var(--rule, rgba(20, 16, 68, .08));
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.hq2-bp-recipe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--rule, rgba(20, 16, 68, .07));
}
.hq2-bp-recipe-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hq2-bp-recipe-title h3 {
  font-size: 13.5px;
  font-weight: 800;
  margin: 0;
  color: var(--ink, #141044);
}

.hq2-bp-pack-grid {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  font-size: 12px;
}
.hq2-bp-pack-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) 50px 80px 80px 90px 80px 70px 70px;
  gap: 8px;
  align-items: center;
  padding: 8px 6px;
  border-top: 1px solid var(--rule, rgba(20, 16, 68, .06));
}
.hq2-bp-pack-row:first-child { border-top: 0; }
.hq2-bp-pack-head {
  background: var(--surface-2, #FAF7F2);
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-3, #6E7088);
  border-radius: 6px;
  padding: 7px 6px;
}
.hq2-bp-pack-row .ar { text-align: right; }
.hq2-bp-pack-row .tnum { font-variant-numeric: tabular-nums; }
.hq2-bp-pack-row b {
  color: var(--ink, #141044);
  font-weight: 700;
}
.hq2-bp-perunit { color: var(--ink-3, #6E7088); }

@media (max-width: 920px){
  .hq2-bp-pack-row {
    grid-template-columns: minmax(100px, 1.3fr) 40px 70px 70px 80px 70px 60px 60px;
    font-size: 11px;
    padding: 8px 4px;
  }
  .hq2-bp-ladder-picker { padding: 4px; gap: 4px; }
  .hq2-bp-ladder-btn { padding: 7px 10px; }
}

/* Bakery delivery economics card + fulfillment toggle */
.hq2-bp-del-card { margin-bottom: 18px; }

/* Setup hint at the top of the bakery tab — explains the "★ sellable
   units per batch" recipe field so users don't misset recipeYield. */
.hq2-bp-setup-hint {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  margin: 0 0 16px;
  background: rgba(200, 140, 0, 0.06);
  border: 1px solid rgba(200, 140, 0, 0.20);
  border-radius: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2, #3b3766);
}
.hq2-bp-setup-hint svg {
  flex-shrink: 0;
  color: #8a6500;
  margin-top: 1px;
}
.hq2-bp-setup-hint b {
  color: var(--ink, #141044);
  font-weight: 700;
}
.hq2-bp-fulfill-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(20, 16, 68, .05);
  border-radius: 999px;
  padding: 3px;
}
.hq2-bp-fulfill-toggle button {
  appearance: none;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  padding: 5px 14px;
  border-radius: 999px;
  cursor: pointer;
  text-transform: lowercase;
}
.hq2-bp-fulfill-toggle button.is-active {
  background: #fff;
  color: var(--ink, #141044);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}
.hq2-bp-del-body { padding: 12px 16px 14px; }
.hq2-bp-del-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}
.hq2-bp-del-stat {
  padding: 10px 12px;
  background: var(--surface-2, #FAF7F2);
  border: 1px solid var(--rule, rgba(20, 16, 68, .07));
  border-radius: 8px;
}
.hq2-bp-del-stat .lbl {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--ink-3, #6E7088);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.hq2-bp-del-stat b {
  font-size: 16px;
  font-weight: 800;
  color: var(--ink, #141044);
  font-variant-numeric: tabular-nums;
}
.hq2-bp-del-stat.is-headline {
  background: #fff;
  border: 1px solid rgba(98, 84, 160, .25);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .02);
}
.hq2-bp-del-stat.is-headline b {
  font-size: 18px;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
}
.hq2-bp-del-note {
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  line-height: 1.55;
  margin: 0;
}
.hq2-bp-del-note b { color: var(--ink, #141044); font-weight: 700; }
.hq2-bp-del-note code {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 11px;
  background: rgba(200, 68, 44, .12);
  color: #a8331f;
  padding: 1px 5px;
  border-radius: 4px;
}

/* "Not viable for delivery" tag on individual pack rows */
.hq2-bp-not-viable {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(200, 68, 44, .12);
  color: #a8331f;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}

@media (max-width: 920px){
  .hq2-bp-del-grid { grid-template-columns: 1fr 1fr; }
}

/* ─── Cost Lab clickable stat cards + item-list modal ───────────────
   The "items priced" + "uncosted items" stat cards open a modal listing
   exactly which items fall in each bucket so Tommy can click through to
   the recipe / product detail page and fix the gap. */
.hq2-stat-card--clickable {
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, box-shadow .15s ease, transform .12s ease;
}
.hq2-stat-card--clickable::after {
  content: '→';
  position: absolute;
  top: 10px;
  right: 12px;
  font-size: 12px;
  color: var(--ink-3, #6E7088);
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
}
.hq2-stat-card--clickable:hover {
  border-color: rgba(20, 16, 68, .35);
  box-shadow: 0 4px 12px -4px rgba(20, 16, 68, .14);
}
.hq2-stat-card--clickable:hover::after {
  opacity: 1;
  transform: translateX(2px);
}
.hq2-stat-card--clickable:focus-visible {
  outline: 2px solid var(--ink, #141044);
  outline-offset: 2px;
}
.hq2-cl-list { list-style: none; margin: 0; padding: 0; }
.hq2-cl-list-row {
  display: grid;
  grid-template-columns: 1fr auto 16px;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule, rgba(20, 16, 68, .08));
  text-decoration: none;
  color: var(--ink, #141044);
  font-family: var(--font-ui);
  transition: background .12s ease;
}
.hq2-cl-list-row:hover { background: var(--surface-2, #FAF7F2); }
.hq2-cl-list-name {
  font-size: var(--t-13, 13px);
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: lowercase;
}
.hq2-cl-list-meta {
  font-size: var(--t-12, 12px);
  font-weight: 600;
  color: var(--ink-3, #6E7088);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.hq2-cl-list-arrow {
  color: var(--ink-3, #6E7088);
  font-size: 14px;
  transition: transform .12s ease;
}
.hq2-cl-list-row:hover .hq2-cl-list-arrow { transform: translateX(2px); color: var(--ink, #141044); }

/* ─── Partners hub ──────────────────────────────────────────────────
   Wholesale customers + suppliers in one CRM. Pattern lifted from
   the /pipeline catering kanban (same drag-drop UX) with list-view
   alternative for power-users. */

.hq2-pt-toolbar {
  display: flex; gap: 12px; align-items: center;
  margin: 16px 0 12px;
}
.hq2-pt-toolbar .tb-search { flex: 1; max-width: 360px; }

.hq2-pt-view-toggle {
  display: inline-flex;
  background: var(--surface-2, #FAF7F2);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 2px;
}
.hq2-pt-view-btn {
  appearance: none; border: 0; background: transparent;
  padding: 7px 14px; border-radius: 999px;
  font-family: var(--font-ui); font-size: 12px; font-weight: 700;
  color: var(--ink-3, #6E7088); cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.hq2-pt-view-btn.is-active { background: var(--ink, #141044); color: #fff; }

.hq2-pt-pill {
  display: inline-flex; align-items: center;
  padding: 2px 9px;
  border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  text-transform: lowercase;
  background: var(--surface-2, #FAF7F2);
  color: var(--ink-2, #2a2566);
  border: 1px solid var(--rule);
}
.hq2-pt-pill--type-wholesale { background: rgba(45, 47, 168, .08); color: #2D2FA8; border-color: rgba(45, 47, 168, .25); }
.hq2-pt-pill--type-supplier  { background: rgba(200, 169, 110, .12); color: #8B6914; border-color: rgba(200, 169, 110, .35); }
.hq2-pt-pill--type-resource  { background: rgba(46, 125, 80, .10); color: #2E7D50; border-color: rgba(46, 125, 80, .30); }

/* ── List view ── */
.hq2-pt-list {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--r-md, 12px);
  overflow: hidden;
}
.hq2-pt-list-head,
.hq2-pt-list-row {
  display: grid;
  grid-template-columns: 2fr 100px 110px 1.2fr 1fr 0.8fr;
  gap: 12px;
  padding: 12px 18px;
  align-items: center;
  font-family: var(--font-ui);
}
.hq2-pt-list-head {
  background: var(--surface-2, #FAF7F2);
  border-bottom: 1px solid var(--rule);
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3, #6E7088);
}
.hq2-pt-list-row {
  text-decoration: none; color: var(--ink, #141044);
  border-bottom: 0.5px solid var(--rule);
  transition: background .12s ease;
  font-size: 13px;
}
.hq2-pt-list-row:hover { background: var(--surface-2, #FAF7F2); }
.hq2-pt-list-row:last-child { border-bottom: 0; }
.hq2-pt-list-name { display: flex; flex-direction: column; gap: 2px; }
.hq2-pt-list-name small { color: var(--ink-3, #6E7088); font-size: 11.5px; }
.hq2-pt-list-meta, .hq2-pt-list-rev { color: var(--ink-2); font-weight: 600; }

/* ── Kanban view ── */
.hq2-pt-kanban {
  /* One row, always — extra stages scroll sideways instead of wrapping
     into a second row of empty boxes. */
  display: flex;
  gap: 12px;
  margin-top: 4px;
  overflow-x: auto;
  padding-bottom: 8px;
}
.pt-col {
  flex: 1 0 200px;
  min-width: 200px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 10px;
  min-height: 240px;
  transition: background .15s ease, border-color .15s ease;
}
.pt-col.is-dropping {
  background: rgba(63, 143, 91, .08);
  border-color: rgba(63, 143, 91, .35);
}
.pt-col header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 6px 10px;
  font-family: var(--font-ui);
}
.pt-col header b {
  font-size: 12px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink, #141044);
}
.pt-col header .pl-col-count {
  font-size: 11px; font-weight: 800; color: var(--ink-3, #6E7088);
  background: #fff; border-radius: 999px;
  padding: 1px 8px; border: 1px solid var(--rule);
}
.pt-col-body { display: flex; flex-direction: column; gap: 8px; }
.pt-col-body .pl-empty {
  font-size: 12px; color: var(--ink-3, #8a8ca1);
  text-align: center; padding: 18px 8px;
  font-style: italic;
}
.pt-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 12px 8px;
  font-family: var(--font-ui);
  cursor: grab;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.pt-card:hover { border-color: rgba(20, 16, 68, .35); box-shadow: 0 4px 12px -4px rgba(20, 16, 68, .12); }
.pt-card.is-dragging { opacity: .5; cursor: grabbing; }
.pt-card-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 4px;
}
.pt-card-head b {
  font-size: 13px; font-weight: 800; letter-spacing: -.005em;
  color: var(--ink, #141044);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pt-card-contact { font-size: 11.5px; font-weight: 600; color: var(--ink-2); }
.pt-card-meta { font-size: 11px; color: var(--ink-3, #6E7088); margin-top: 2px; }
.pt-card-foot {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 6px; padding-top: 6px;
  border-top: 0.5px solid var(--rule);
  font-size: 10.5px;
}
.pt-card-rev { font-weight: 800; color: var(--ink, #141044); }
.pt-card-last { color: var(--ink-3, #6E7088); }

.hq2-pt-orphans {
  margin-top: 24px;
  background: rgba(0,0,0,.02);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 10px 14px;
  font-family: var(--font-ui);
  font-size: 12px; color: var(--ink-3);
}
.hq2-pt-orphans summary { cursor: pointer; font-weight: 700; }
.hq2-pt-orphan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

/* ── Detail page ── */
.hq2-pt-detail {
  display: flex; flex-direction: column; gap: 16px;
  padding: 0;
}
.hq2-pt-detail-head {
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 14px 0;
}
.hq2-pt-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; }

.hq2-pt-detail-card {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 18px 20px;
  font-family: var(--font-ui);
}
.hq2-pt-detail-card h3 {
  margin: 0 0 12px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3, #6E7088);
}
.hq2-pt-detail-card h3 small { font-weight: 600; color: var(--ink-3); letter-spacing: 0; text-transform: none; }
.hq2-pt-empty {
  margin: 0; font-size: 12.5px; color: var(--ink-3, #6E7088); font-style: italic;
}

.hq2-pt-detail-name {
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 14px;
}
.hq2-pt-detail-name-input {
  appearance: none; border: 0; background: transparent;
  padding: 4px 6px; margin-left: -6px;
  font-family: var(--font-display, var(--font-ui));
  font-size: 26px; font-weight: 800; letter-spacing: -.02em;
  color: var(--ink, #141044); width: 100%;
  border-bottom: 1.5px dashed transparent;
  transition: border-color .12s ease;
}
.hq2-pt-detail-name-input:focus {
  outline: none;
  border-bottom-color: rgba(20, 16, 68, .35);
}
.hq2-pt-detail-stage label { display: flex; flex-direction: column; gap: 4px; max-width: 240px; }
.hq2-pt-detail-stage label span {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3, #6E7088);
}

.hq2-pt-detail-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.hq2-pt-detail-fields label {
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-pt-detail-fields label span {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3, #6E7088);
}

.hq2-pt-detail-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
}

.hq2-pt-linked,
.hq2-pt-contacts,
.hq2-pt-files {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px;
}
.hq2-pt-linked li,
.hq2-pt-contacts li,
.hq2-pt-files li {
  display: flex; gap: 10px; align-items: center;
  padding: 8px 10px;
  background: var(--surface-2, #FAF7F2);
  border-radius: 8px;
  font-size: 13px;
}
.hq2-pt-linked a, .hq2-pt-files a {
  color: var(--ink, #141044); font-weight: 700; text-decoration: none;
  flex: 1;
}
.hq2-pt-linked a:hover, .hq2-pt-files a:hover { text-decoration: underline; }
.hq2-pt-c-title { font-size: 11.5px; color: var(--ink-3); }
.hq2-pt-contacts li b { min-width: 110px; }
.hq2-pt-contacts a { color: var(--ink-2); text-decoration: none; font-size: 12px; }
.hq2-pt-contacts a:hover { text-decoration: underline; }

.hq2-pt-unlink, .hq2-pt-cdel, .hq2-pt-fdel {
  appearance: none; border: 0; background: transparent;
  color: var(--ink-3, #6E7088); cursor: pointer;
  font-size: 14px; padding: 2px 6px; border-radius: 4px;
  transition: color .12s ease, background .12s ease;
}
.hq2-pt-unlink:hover, .hq2-pt-cdel:hover, .hq2-pt-fdel:hover {
  color: #b54848; background: rgba(181, 72, 72, .08);
}

.hq2-pt-f-meta { font-size: 11px; color: var(--ink-3); }

.hq2-pt-notes {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hq2-pt-note {
  background: var(--surface-2, #FAF7F2);
  border-left: 3px solid rgba(20, 16, 68, .15);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  font-family: var(--font-ui);
  font-size: 12.5px; line-height: 1.45;
}
.hq2-pt-note--system   { border-left-color: rgba(20, 16, 68, .2); opacity: .8; }
.hq2-pt-note--call     { border-left-color: #2D2FA8; }
.hq2-pt-note--email    { border-left-color: #8B6914; }
.hq2-pt-note--meeting  { border-left-color: #3F8F5B; }
.hq2-pt-note--sample   { border-left-color: #C8A96E; }
.hq2-pt-note-head {
  display: flex; justify-content: space-between; gap: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3, #6E7088);
  margin-bottom: 4px;
}
.hq2-pt-note-body { color: var(--ink-2); white-space: pre-wrap; }

@media (max-width: 880px){
  .hq2-pt-list-head, .hq2-pt-list-row {
    grid-template-columns: 1.5fr 80px 100px 0.8fr;
  }
  .hq2-pt-list-row > :nth-child(4),
  .hq2-pt-list-head > :nth-child(4) { display: none; }
  .hq2-pt-list-row > :nth-child(5),
  .hq2-pt-list-head > :nth-child(5) { display: none; }
}

/* ── Deal sizer (Partners → /partners/sizer) ─────────────────────── */
.hq2-ds-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-top: 16px;
}
.hq2-ds-verdict   { grid-column: 1 / -1; }
.hq2-ds-scenarios { grid-column: 1 / -1; }
.hq2-ds-ref       { grid-column: 1 / -1; }

.hq2-ds-step-head {
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.hq2-ds-step-n {
  background: var(--tc-navy); color: #fff;
  padding: 2px 8px; border-radius: 99px;
  font-size: 10px; letter-spacing: .1em;
}
.hq2-ds-step-sub {
  font-size: 12.5px; color: var(--ink-3);
  margin: 0 0 12px; line-height: 1.4;
}
.hq2-ds-step-sub code {
  background: var(--cream); padding: 1px 5px; border-radius: 4px;
  font-size: 11.5px;
}
.hq2-ds-chips {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px;
}
.hq2-ds-chip {
  background: var(--cream); border: 1px solid var(--rule);
  border-radius: 99px; padding: 6px 12px;
  font-size: 12.5px; font-family: inherit; color: var(--ink-2);
  cursor: pointer; transition: background .12s, border-color .12s, color .12s;
}
.hq2-ds-chip:hover  { background: #fff; border-color: var(--tc-navy-soft); }
.hq2-ds-chip.is-active {
  background: var(--tc-navy); border-color: var(--tc-navy);
  color: #fff; font-weight: 700;
}
.hq2-ds-empty { color: var(--ink-3); font-size: 12.5px; font-style: italic; }

.hq2-ds-form { display: flex; flex-direction: column; gap: 10px; }
.hq2-ds-row { display: flex; flex-direction: column; gap: 3px; }
.hq2-ds-label {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  text-transform: lowercase;
}
.hq2-ds-input-wrap {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border: 1px solid var(--rule);
  border-radius: 8px; padding: 0 10px;
  transition: border-color .12s;
}
.hq2-ds-input-wrap:focus-within { border-color: var(--tc-navy-soft); }
.hq2-ds-pfx {
  color: var(--ink-3); font-size: 13px; font-weight: 600;
}
.hq2-ds-input {
  border: 0 !important; padding: 8px 0 !important; background: transparent !important;
  font: inherit; color: var(--ink);
  flex: 1; width: 100%; min-width: 0;
}
.hq2-ds-input:focus { outline: none; }
.hq2-ds-hint {
  font-size: 11px; color: var(--ink-3);
}
.hq2-ds-check {
  display: flex; align-items: center; gap: 8px;
  font-size: 12.5px; color: var(--ink-2);
  margin-top: 4px; cursor: pointer;
}

.hq2-ds-model-tabs {
  display: flex; gap: 4px; margin-bottom: 10px;
  background: var(--cream); padding: 3px; border-radius: 8px;
}
.hq2-ds-model-tab {
  flex: 1; background: transparent; border: 0;
  padding: 6px 10px; font: inherit; font-size: 12px;
  color: var(--ink-2); border-radius: 6px; cursor: pointer;
}
.hq2-ds-model-tab.is-active {
  background: #fff; color: var(--tc-navy); font-weight: 700;
  box-shadow: 0 1px 2px rgba(27, 26, 107, 0.08);
}

.hq2-ds-verdict-top {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 12px; margin-bottom: 16px;
}
.hq2-ds-verdict-card {
  background: var(--cream); border-radius: 12px; padding: 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-ds-verdict-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.hq2-ds-verdict-val {
  font-size: 26px; color: var(--tc-navy); line-height: 1.1;
}
.hq2-ds-verdict-sub {
  font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
}
.hq2-ds-per-unit {
  background: var(--cream); border-radius: 12px; padding: 12px 16px;
  margin-bottom: 14px;
}
.hq2-ds-pu-row {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 6px 0; font-size: 13px; color: var(--ink-2);
}
.hq2-ds-pu-row + .hq2-ds-pu-row { border-top: 1px solid var(--rule); }
.hq2-ds-pu-sub  { color: var(--ink); font-weight: 600; }
.hq2-ds-pu-total {
  border-top: 2px solid var(--tc-navy) !important;
  margin-top: 4px; padding-top: 10px;
  color: var(--tc-navy); font-weight: 800; font-size: 14px;
}
.hq2-ds-verdict-note {
  padding: 12px 14px; border-radius: 10px;
  font-size: 13px; line-height: 1.5;
}
.hq2-ds-tone-good { background: rgba(63, 143, 91, 0.08);  color: #2A6F44; border-left: 3px solid var(--leaf); }
.hq2-ds-tone-warn { background: rgba(200, 169, 110, 0.14);color: #7A5A1F; border-left: 3px solid var(--tc-gold); }
.hq2-ds-tone-bad  { background: rgba(179, 33, 26, 0.08);  color: #842018; border-left: 3px solid var(--danger); }

.hq2-ds-table {
  width: 100%; border-collapse: collapse; font-size: 12.5px;
}
.hq2-ds-table th {
  text-align: left; padding: 10px 12px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--rule);
}
.hq2-ds-table td {
  padding: 10px 12px; border-bottom: 1px solid var(--rule);
  color: var(--ink-2); vertical-align: middle;
}
.hq2-ds-table tr:last-child td { border-bottom: 0; }
.hq2-ds-table .tnum { font-variant-numeric: tabular-nums; }

.hq2-ds-pill {
  display: inline-block; padding: 2px 10px; border-radius: 99px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase;
}
.hq2-ds-pill-walk    { background: rgba(179, 33, 26, 0.12);   color: #842018; }
.hq2-ds-pill-thin    { background: rgba(200, 169, 110, 0.18); color: #7A5A1F; }
.hq2-ds-pill-healthy { background: rgba(63, 143, 91, 0.14);   color: #2A6F44; }
.hq2-ds-pill-strong  { background: var(--tc-navy);            color: #fff; }

@media (max-width: 880px){
  .hq2-ds-grid { grid-template-columns: 1fr; }
  .hq2-ds-verdict-top { grid-template-columns: repeat(2, 1fr); }
  .hq2-ds-table th, .hq2-ds-table td { padding: 8px 6px; font-size: 11.5px; }
}
@media (max-width: 560px){
  .hq2-ds-verdict-top { grid-template-columns: 1fr 1fr; }
  .hq2-ds-verdict-val { font-size: 22px; }
}

/* ════════════════════════════════════════════════════════════════════
   PACKAGING · VENDORS  (/hq2#/packaging/vendors)
   ════════════════════════════════════════════════════════════════════ */
.hq2-pkg-vendors { display: flex; flex-direction: column; gap: var(--s-5); }
.hq2-pkg-vendor-cat { display: flex; flex-direction: column; gap: var(--s-2); }
.hq2-pkg-vendor-cat-head {
  font-family: var(--font-ui); font-size: 14px; font-weight: 800;
  letter-spacing: .04em; color: var(--ink-2); margin: 0 0 4px;
}
.hq2-pkg-vendor-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-3);
}
@media (max-width: 880px) { .hq2-pkg-vendor-grid { grid-template-columns: 1fr; } }
.hq2-pkg-vendor-empty {
  grid-column: 1 / -1;
  padding: var(--s-3);
  background: rgba(15,12,32,.03);
  border: 1px dashed var(--rule);
  border-radius: var(--r-lg);
}

.hq2-pkg-vendor-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .12s;
}
.hq2-pkg-vendor-card:hover { border-color: var(--tc-gold); }
.hq2-pkg-vendor-card.is-active {
  border-color: var(--tc-navy); border-width: 1.5px;
  box-shadow: 0 0 0 2px rgba(27,26,107,.08);
  cursor: default;
}
.hq2-pkg-vendor-name {
  font-family: var(--font-ui); font-size: 14px; font-weight: 800;
  color: var(--ink); display: flex; align-items: center; gap: var(--s-2);
}
.hq2-pkg-vendor-sku {
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-3);
}
.hq2-pkg-vendor-price {
  font-family: var(--font-ui); font-size: 22px; font-weight: 800;
  letter-spacing: -.02em; color: var(--tc-navy);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
  display: flex; align-items: baseline; gap: 6px;
}
.hq2-pkg-vendor-unit {
  font-size: 11px; font-weight: 600; color: var(--ink-3);
  letter-spacing: 0;
}
.hq2-pkg-vendor-active {
  font-family: var(--font-ui); font-size: 9px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 10px;
  background: var(--tc-navy); color: #fff;
}
.hq2-pkg-vendor-chips {
  display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px;
}
.hq2-pkg-vendor-chip {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .04em; text-transform: lowercase;
  padding: 3px 8px; border-radius: 99px;
  background: rgba(15,12,32,.06); color: var(--ink-2);
}
.hq2-pkg-vendor-chip.is-recyclable { background: rgba(63,143,91,.14); color: #2A6F44; }
.hq2-pkg-vendor-chip.is-reusable   { background: rgba(27,26,107,.10); color: var(--tc-navy); }
.hq2-pkg-vendor-chip.is-warn       { background: rgba(179,33,26,.10); color: #842018; }

.hq2-pkg-vendor-actions {
  position: absolute; top: 8px; right: 8px;
  display: flex; gap: 4px;
  opacity: 0; transition: opacity .15s;
}
.hq2-pkg-vendor-card:hover .hq2-pkg-vendor-actions { opacity: 1; }
@media (hover: none) { .hq2-pkg-vendor-actions { opacity: 1; } }
.hq2-pkg-vendor-action {
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: rgba(15,12,32,.06); color: var(--ink-3);
  font-family: var(--font-ui); font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 0; line-height: 1;
}
.hq2-pkg-vendor-action:hover { background: var(--tc-gold); color: #1a1a1a; }
.hq2-pkg-vendor-action-del:hover { background: rgba(179,33,26,.12); color: var(--danger, #B3211A); }

.hq2-pkg-vendor-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; min-height: 120px;
  background: transparent; border: 1.5px dashed var(--rule-strong, rgba(15,12,32,.16));
  border-radius: var(--r-lg); padding: var(--s-4);
  font-family: var(--font-ui); cursor: pointer;
  color: var(--ink-3); transition: border-color .15s, background .15s, color .15s;
}
.hq2-pkg-vendor-add:hover {
  border-color: var(--tc-gold); background: rgba(200,169,110,.04); color: var(--tc-gold-dark, #8A6F3F);
}
.hq2-pkg-vendor-add-glyph { font-size: 28px; font-weight: 700; line-height: 1; }
.hq2-pkg-vendor-add-lbl   { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }

.hq2-pkg-vendor-form {
  margin-top: var(--s-2);
  background: var(--surface); border: 1.5px solid var(--tc-gold);
  border-radius: var(--r-lg); padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.hq2-pkg-vendor-form-head {
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--tc-gold-dark, #8A6F3F);
  margin: 0;
}
.hq2-pkg-vendor-form-row { display: grid; gap: var(--s-3); }
.hq2-pkg-vendor-form-row-2 { grid-template-columns: 1fr 1fr; }
.hq2-pkg-vendor-form-row-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .hq2-pkg-vendor-form-row-2, .hq2-pkg-vendor-form-row-3 { grid-template-columns: 1fr; }
}
.hq2-pkg-vendor-form-actions { display: flex; gap: var(--s-2); }
.hq2-pkg-vendor-check {
  flex-direction: row; align-items: center; gap: 8px;
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-2);
}
.hq2-pkg-vendor-check input { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════
   PACKAGING · BUILD COST  (/hq2#/packaging/build)
   ════════════════════════════════════════════════════════════════════ */
.hq2-pkg-build-summary {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden; margin-bottom: var(--s-4);
}
@media (max-width: 880px) { .hq2-pkg-build-summary { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .hq2-pkg-build-summary { grid-template-columns: repeat(2, 1fr); } }
.hq2-pkg-build-tile {
  background: var(--surface); padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-pkg-build-tile.is-total { background: rgba(27,26,107,.04); }
.hq2-pkg-build-tile-lbl {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-pkg-build-tile-val {
  font-family: var(--font-ui); font-weight: 800; font-size: var(--t-22);
  letter-spacing: -.02em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-pkg-build-tile.is-total .hq2-pkg-build-tile-val { color: var(--tc-navy); }

.hq2-pkg-build-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin-bottom: var(--s-4);
}
@media (max-width: 1100px) { .hq2-pkg-build-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .hq2-pkg-build-grid { grid-template-columns: 1fr; } }

.hq2-pkg-build-card {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-pkg-build-card h4 {
  font-family: var(--font-ui); font-size: 13px; font-weight: 800;
  letter-spacing: .02em; color: var(--ink); margin: 0 0 6px;
  padding-bottom: var(--s-2); border-bottom: 1px solid var(--rule);
}
.hq2-pkg-build-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: var(--s-3); padding: 4px 0;
  font-family: var(--font-ui); font-size: 12.5px;
}
.hq2-pkg-build-row label { color: var(--ink-3); flex: 1; }
.hq2-pkg-build-row input.hq2-input { width: 110px; text-align: right; }
.hq2-pkg-build-computed {
  font-family: var(--font-ui); font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums; font-size: 13px;
}
.hq2-pkg-build-row.is-total {
  background: rgba(27,26,107,.04);
  margin: 0 calc(var(--s-4) * -1); padding: 6px var(--s-4);
  border-top: 1px solid var(--rule);
}
.hq2-pkg-build-row.is-total label { color: var(--ink-2); font-weight: 700; }
.hq2-pkg-build-row.is-total .hq2-pkg-build-computed { color: var(--tc-navy); font-size: 14px; }
.hq2-pkg-build-note { font-size: 11px; color: var(--ink-4); margin: 4px 0 0; font-style: italic; }

.hq2-pkg-build-sub {
  font-family: var(--font-ui); font-size: 14px; font-weight: 800;
  margin: var(--s-4) 0 var(--s-2); color: var(--ink);
}
.hq2-pkg-build-sub-meta { color: var(--ink-4); font-weight: 500; }
.hq2-pkg-build-spend {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  font-family: var(--font-ui); font-size: 13px;
}
.hq2-pkg-build-spend th, .hq2-pkg-build-spend td {
  padding: 10px 14px; text-align: right;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.hq2-pkg-build-spend th:first-child, .hq2-pkg-build-spend td:first-child { text-align: left; color: var(--ink-3); }
.hq2-pkg-build-spend th {
  background: rgba(15,12,32,.04); font-weight: 800;
  letter-spacing: .04em; text-transform: lowercase;
  font-size: 11px; color: var(--ink-2);
}
.hq2-pkg-build-spend tbody tr:last-child td { border-bottom: 0; }
.hq2-pkg-build-foot { font-size: 11px; color: var(--ink-4); margin: 8px 0 0; font-style: italic; }

/* Category segmented toggle — entrée / bakery */
.hq2-pkg-build-segwrap {
  display: flex; align-items: center; gap: var(--s-3);
  margin: 0 0 var(--s-3); padding: 0;
}
.hq2-pkg-build-seg-lbl {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-pkg-build-seg-group {
  display: inline-flex; border: 1px solid var(--rule);
  border-radius: var(--r-md); overflow: hidden; background: var(--surface);
}
.hq2-pkg-build-seg {
  appearance: none; border: 0; background: transparent; cursor: pointer;
  padding: 7px 14px; font-family: var(--font-ui); font-size: 12.5px;
  font-weight: 700; color: var(--ink-3);
  border-right: 1px solid var(--rule);
}
.hq2-pkg-build-seg:last-child { border-right: 0; }
.hq2-pkg-build-seg:hover { background: rgba(15,12,32,.04); color: var(--ink); }
.hq2-pkg-build-seg.is-active {
  background: var(--tc-navy); color: #fff;
}

/* Breakdown bar — "where the packaging dollar goes" */
.hq2-pkg-build-breakdown {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}
.hq2-pkg-build-breakdown-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px;
}
.hq2-pkg-build-breakdown-title {
  font-family: var(--font-ui); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-pkg-build-breakdown-total {
  font-family: var(--font-ui); font-weight: 800; font-size: 16px;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hq2-pkg-build-breakdown-bar {
  display: flex; width: 100%; height: 28px; border-radius: 4px;
  overflow: hidden; background: rgba(15,12,32,.04);
}
.hq2-pkg-build-breakdown-seg {
  height: 100%; display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.hq2-pkg-build-breakdown-pct {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: #fff; letter-spacing: .02em;
}
.hq2-pkg-build-breakdown-empty {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-4);
  font-style: italic;
}
.hq2-pkg-build-breakdown-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: 10px;
}
.hq2-pkg-build-breakdown-leg {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}
.hq2-pkg-build-breakdown-leg b { color: var(--ink); font-weight: 700; }
.hq2-pkg-build-breakdown-leg small { color: var(--ink-4); }
.hq2-pkg-build-breakdown-leg-dot {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}

/* ════════════════════════════════════════════════════════════════════
   PACKAGING · TOTES  (/hq2#/packaging/totes)
   ════════════════════════════════════════════════════════════════════ */
.hq2-pkg-totes-inputs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3);
  margin-bottom: var(--s-4);
}
@media (max-width: 560px) { .hq2-pkg-totes-inputs { grid-template-columns: 1fr; } }

.hq2-pkg-totes-tbl {
  width: 100%; border-collapse: collapse;
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); overflow: hidden;
  font-family: var(--font-ui); font-size: 13px;
  margin-bottom: var(--s-4);
}
.hq2-pkg-totes-tbl th, .hq2-pkg-totes-tbl td {
  padding: 10px 14px; border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.hq2-pkg-totes-tbl th {
  background: rgba(15,12,32,.04); font-weight: 800;
  letter-spacing: .04em; text-transform: lowercase;
  font-size: 11px; color: var(--ink-2); text-align: left;
}
.hq2-pkg-totes-tbl td { color: var(--ink-2); }
.hq2-pkg-totes-tbl tbody tr:last-child td { border-bottom: 0; }
.hq2-pkg-totes-tbl .ar { text-align: right; }
.hq2-pkg-totes-tbl tr.is-highlight {
  background: rgba(200,169,110,.10);
}
.hq2-pkg-totes-tbl tr.is-highlight td { color: var(--ink); font-weight: 700; }

.hq2-pkg-totes-readout {
  background: rgba(27,26,107,.04);
  border-left: 3px solid var(--tc-navy);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-ui); font-size: 13px; color: var(--ink-2);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.hq2-pkg-totes-readout b { color: var(--ink); }

/* ════════════════════════════════════════════════════════════════════
   ORDER ECONOMICS TAB  (#/financials/orderEconomics)
   ════════════════════════════════════════════════════════════════════ */
.hq2-oe-subs {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-4);
  margin-bottom: var(--s-4);
}
.hq2-oe-subs-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-3);
}
.hq2-oe-subs-eyebrow {
  font-family: var(--font-ui); font-size: 10px; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-oe-subs-meta {
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-4);
}
.hq2-oe-subs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3) var(--s-4);
}
@media (max-width: 880px) { .hq2-oe-subs-grid { grid-template-columns: 1fr; } }
.hq2-oe-subs-row {
  display: grid; grid-template-rows: auto auto auto;
  gap: 2px; padding: 6px 0;
  border-bottom: 1px dashed var(--rule);
}
.hq2-oe-subs-row:last-child, .hq2-oe-subs-row:nth-last-child(2) { border-bottom: 0; }
.hq2-oe-subs-lbl {
  font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3);
}
.hq2-oe-subs-val {
  font-family: var(--font-ui); font-size: 14px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.hq2-oe-subs-from { font-size: 11px; color: var(--ink-4); }
.hq2-oe-subs-from code {
  background: rgba(15,12,32,.05); padding: 1px 5px; border-radius: 3px;
  font-size: 10.5px; color: var(--ink-3);
}
.hq2-oe-subs-link {
  color: var(--tc-navy); text-decoration: none; font-weight: 700;
  border-bottom: 1px dashed var(--tc-navy);
}
.hq2-oe-subs-link:hover { color: var(--tc-gold-dark, #8A6F3F); border-color: var(--tc-gold); }

.hq2-oe-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4);
  margin-bottom: var(--s-4);
}
@media (max-width: 880px) { .hq2-oe-grid { grid-template-columns: 1fr; } }
.hq2-oe-inputs {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
}

.hq2-oe-pkg {
  display: flex; flex-direction: column; gap: var(--s-2);
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
}
.hq2-oe-pkg-head {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
.hq2-oe-pkg-lbl {
  font-family: var(--font-ui); font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  margin-right: auto;
}
.hq2-oe-pkg-pill {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  letter-spacing: .04em; text-transform: lowercase;
  padding: 4px 10px; border-radius: 99px;
  background: rgba(15,12,32,.06); color: var(--ink-3);
  border: none; cursor: pointer;
}
.hq2-oe-pkg-pill.is-active { background: var(--tc-navy); color: #fff; }
.hq2-oe-pkg-build { display: flex; flex-direction: column; gap: 2px; }
.hq2-oe-pkg-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 4px 0; font-family: var(--font-ui); font-size: 12.5px;
  border-bottom: 1px dashed var(--rule);
}
.hq2-oe-pkg-row:last-child { border-bottom: 0; }
.hq2-oe-pkg-row-lbl { color: var(--ink-3); }
.hq2-oe-pkg-row-val { font-weight: 700; color: var(--tc-navy); font-variant-numeric: tabular-nums; }
.hq2-oe-pkg-row.is-total .hq2-oe-pkg-row-lbl { color: var(--ink); font-weight: 700; font-size: 13px; }
.hq2-oe-pkg-row.is-total .hq2-oe-pkg-row-val { color: var(--tc-gold-dark, #8A6F3F); font-weight: 800; font-size: 14px; }
.hq2-oe-pkg-edit {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  color: var(--tc-navy); text-decoration: none;
  border-bottom: 1px dashed var(--tc-navy);
}
.hq2-oe-pkg-edit:hover { color: var(--tc-gold-dark, #8A6F3F); border-color: var(--tc-gold); }
.hq2-oe-pkg-flat { display: flex; flex-direction: column; gap: var(--s-2); }
.hq2-oe-pkg-flat-note { font-size: 11px; color: var(--ink-4); margin: 4px 0 0; font-style: italic; }

.hq2-oe-delivery {
  display: grid; grid-template-columns: 1fr 1fr 1fr auto;
  gap: var(--s-3); align-items: end;
  margin-bottom: var(--s-4);
}
@media (max-width: 880px) { .hq2-oe-delivery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .hq2-oe-delivery { grid-template-columns: 1fr; } }
.hq2-oe-partner-btn {
  font-family: var(--font-ui); font-size: 11px; font-weight: 700;
  padding: 8px 12px; border-radius: 6px;
  background: rgba(200,169,110,.10); color: var(--tc-gold-dark, #8A6F3F);
  border: 1px solid rgba(200,169,110,.30); cursor: pointer; white-space: nowrap;
}
.hq2-oe-partner-btn:hover { background: rgba(200,169,110,.18); }

.hq2-oe-sub {
  font-family: var(--font-ui); font-size: 14px; font-weight: 800;
  margin: var(--s-4) 0 var(--s-2); color: var(--ink);
}
.hq2-oe-bar {
  display: flex; height: 32px;
  background: rgba(15,12,32,.06); border-radius: 6px; overflow: hidden;
  margin-bottom: var(--s-2);
}
.hq2-oe-bar-seg {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-ui); font-size: 11px; font-weight: 800;
  color: #fff; min-width: 0;
  transition: width .18s ease;
}
.hq2-oe-bar-seg.is-ing { background: var(--tc-navy); }
.hq2-oe-bar-seg.is-pkg { background: var(--tc-gold); color: #1a1a1a; }
.hq2-oe-bar-seg.is-del { background: #C87555; }
.hq2-oe-bar-seg.is-ovh { background: #9E9DB3; }
.hq2-oe-bar-seg.is-mar { background: #5a8a4a; }

.hq2-oe-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
  font-family: var(--font-ui); font-size: 12px; color: var(--ink-2);
}
.hq2-oe-legend-item { display: flex; align-items: center; gap: 6px; }
.hq2-oe-legend-sw { width: 12px; height: 12px; border-radius: 3px; }
.hq2-oe-legend-sw.is-ing { background: var(--tc-navy); }
.hq2-oe-legend-sw.is-pkg { background: var(--tc-gold); }
.hq2-oe-legend-sw.is-del { background: #C87555; }
.hq2-oe-legend-sw.is-ovh { background: #9E9DB3; }
.hq2-oe-legend-sw.is-mar { background: #5a8a4a; }

.hq2-oe-kpis { margin-top: var(--s-4); }

.hq2-oe-read {
  background: rgba(63,143,91,.10); border-left: 3px solid #5a8a4a;
  padding: var(--s-3) var(--s-4); margin: var(--s-3) 0 var(--s-4);
  font-family: var(--font-ui); font-size: 13.5px; color: var(--ink-2);
  border-radius: 0 var(--r-lg) var(--r-lg) 0;
}
.hq2-oe-read.is-warn   { background: rgba(200,169,110,.12); border-left-color: var(--tc-gold); }
.hq2-oe-read.is-danger { background: rgba(179,33,26,.10); border-left-color: #B3211A; }
.hq2-oe-read b { color: var(--ink); }

.hq2-oe-scn {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-4);
  margin-top: var(--s-4);
}
.hq2-oe-scn-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: var(--s-3);
}
.hq2-oe-scn-head h3 {
  font-family: var(--font-ui); font-size: 14px; font-weight: 800;
  margin: 0; color: var(--ink);
}
.hq2-oe-scn-meta { font-family: var(--font-ui); font-size: 11px; color: var(--ink-4); }
.hq2-oe-scn-bar {
  display: grid; grid-template-columns: 1fr auto;
  gap: var(--s-2); margin-bottom: var(--s-3);
}
.hq2-oe-scn-empty {
  font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-4);
  font-style: italic; padding: var(--s-3) 0;
}
.hq2-oe-scn-list {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3);
}
@media (max-width: 880px) { .hq2-oe-scn-list { grid-template-columns: 1fr; } }
.hq2-oe-scn-card {
  background: rgba(15,12,32,.03); border: 1px solid var(--rule);
  border-radius: var(--r-lg); padding: var(--s-3) var(--s-4);
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-oe-scn-card-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
}
.hq2-oe-scn-card-head b {
  font-family: var(--font-ui); font-size: 13px; color: var(--ink);
}
.hq2-oe-scn-card-meta {
  font-family: var(--font-ui); font-size: 11px; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-oe-scn-card-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ════════════════════════════════════════════════════════════════════
   COLD CHAIN · PROTOCOL REFERENCE PANELS
   ════════════════════════════════════════════════════════════════════ */
.hq2-cc-protocol {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: var(--r-lg); margin-bottom: var(--s-3);
  overflow: hidden;
}
.hq2-cc-protocol-head {
  list-style: none; cursor: pointer;
  padding: var(--s-3) var(--s-4);
  display: flex; align-items: baseline; gap: var(--s-3); flex-wrap: wrap;
  font-family: var(--font-ui);
}
.hq2-cc-protocol-head::-webkit-details-marker { display: none; }
.hq2-cc-protocol-head::before {
  content: '▸'; color: var(--ink-3);
  font-size: 12px; line-height: 1;
  transition: transform .15s;
}
.hq2-cc-protocol[open] .hq2-cc-protocol-head::before {
  transform: rotate(90deg);
}
.hq2-cc-protocol-lbl {
  font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; color: var(--ink);
}
.hq2-cc-protocol-meta {
  font-size: 11px; color: var(--ink-4);
  margin-left: auto;
}
.hq2-cc-protocol-body {
  padding: 0 var(--s-4) var(--s-4);
  border-top: 1px solid var(--rule);
}
.hq2-cc-protocol-sub {
  font-family: var(--font-ui); font-size: 12.5px; font-weight: 800;
  letter-spacing: .04em; color: var(--ink-2);
  margin: var(--s-3) 0 6px;
}
.hq2-cc-protocol-tbl {
  width: 100%; border-collapse: collapse;
  font-family: var(--font-ui); font-size: 12.5px;
  border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
}
.hq2-cc-protocol-tbl th, .hq2-cc-protocol-tbl td {
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--rule);
  font-variant-numeric: tabular-nums;
}
.hq2-cc-protocol-tbl th {
  background: rgba(15,12,32,.04); font-size: 10.5px;
  font-weight: 800; letter-spacing: .04em; text-transform: lowercase;
  color: var(--ink-2);
}
.hq2-cc-protocol-tbl tbody tr:last-child td { border-bottom: 0; }
.hq2-cc-protocol-tbl td.is-safe { color: #2A6F44; font-weight: 700; }
.hq2-cc-protocol-tbl td.is-warn { color: #842018; font-weight: 700; }

.hq2-cc-protocol-rules {
  display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-ui); font-size: 13px;
  color: var(--ink-2);
}
.hq2-cc-protocol-rule {
  padding: 8px 10px;
  background: rgba(15,12,32,.03);
  border-left: 3px solid var(--tc-navy);
  border-radius: 0 6px 6px 0;
}
.hq2-cc-protocol-rule.is-warn {
  background: rgba(179,33,26,.06); border-left-color: #B3211A;
}
.hq2-cc-protocol-rule b { color: var(--ink); }
.hq2-cc-protocol-foot {
  font-size: 11px; color: var(--ink-4); font-style: italic;
  margin: var(--s-3) 0 0;
}

/* ════════════════════════════════════════════════════════════════════
   CHART · uniform aspect ratio (no text stretching)

   Charts marked .hq2-chart-fitted + preserveAspectRatio="xMidYMid meet"
   scale their SVG content proportionally so axis labels render at the
   correct letter proportions even when the host card is wider than the
   chart's viewBox. Per-id aspect-ratio rules pin each chart to its
   viewBox so height auto-derives from the rendered width.

   Why: most charts were rendered with preserveAspectRatio="none" inside
   wide cards, stretching axis text horizontally ~2x compared to its
   intended vertical scale, producing the "squished" letter look on
   Partners cost-curve and several Financials charts.
   ──────────────────────────────────────────────────────────────────── */
.hq2-chart-fitted {
  width: 100%;
  height: auto;
  max-width: 1100px;
  display: block;
  margin: 0 auto;
}
#hq2DpChart   { aspect-ratio: 720 / 320; }
#hq2ProjChart { aspect-ratio: 720 / 280; }
#hq2RfChart   { aspect-ratio: 720 / 300; }
#hq2CmpChart  { aspect-ratio: 720 / 240; }
#hq2FcChart   { aspect-ratio: 720 / 240; }

/* ──────────────────────────────────────────────────────────────────
   KITCHEN COMPARISON · /hq2#/kitchenComparison
   ──────────────────────────────────────────────────────────────────
   List = sortable comparison table.
   Detail = two-column card (pricing on the left, glance + features on the right).
   Form = inputs in a single padded card.
   Reuses .hq2-hub-eyebrow / .hq2-hub-h1 / .hq2-hub-mission for the
   hero, .hq2-btn-* for actions, .hq2-input + .hq2-label for fields.
   ────────────────────────────────────────────────────────────────── */
.hq2-kc {
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: 24px 28px 60px;
  max-width: 1240px;
  margin: 0 auto;
  width: 100%;
}
.hq2-kc-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.hq2-kc-hero-l { flex: 1 1 320px; min-width: 0; }
.hq2-kc-hero-r { display: flex; gap: 10px; flex-wrap: wrap; }
.hq2-kc-crumb {
  color: var(--ink-3);
  text-decoration: none;
}
.hq2-kc-crumb:hover { color: var(--tc-navy); }

.hq2-kc-controls {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hq2-kc-controls .hq2-label { margin-bottom: 0; }
.hq2-kc-controls-meta {
  font-size: var(--t-12);
  color: var(--ink-3);
  margin-left: auto;
}

.hq2-kc-body { width: 100%; }

.hq2-kc-table-wrap {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  overflow-x: auto;
}
.hq2-kc-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 880px;
  font-size: var(--t-13);
}
.hq2-kc-table thead th {
  text-align: left;
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: 12px 14px;
  border-bottom: 1.5px solid var(--rule-strong);
  background: var(--surface-2);
  white-space: nowrap;
}
.hq2-kc-table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--rule);
  vertical-align: middle;
}
.hq2-kc-row { cursor: pointer; transition: background-color 120ms ease; border-left: 3px solid transparent; }
.hq2-kc-row:hover { background: var(--surface-2); }
.hq2-kc-row.is-active { border-left-color: var(--tc-navy); }
.hq2-kc-row.is-cheapest:not(.is-active) { border-left-color: #10B981; }
.hq2-kc-name { font-weight: var(--w-semibold); color: var(--ink); }
.hq2-kc-muted { color: var(--ink-3); }
.hq2-kc-money { font-weight: var(--w-bold); color: var(--tc-navy); }
.hq2-kc-perm { font-weight: var(--w-semibold); color: var(--tc-gold); }
.hq2-kc-actions { text-align: right; white-space: nowrap; }

.hq2-kc-pill {
  display: inline-block;
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  padding: 2px 9px;
  border-radius: 99px;
  letter-spacing: .02em;
  text-transform: lowercase;
  white-space: nowrap;
}
.hq2-kc-pill.is-success { color: #047857; background: rgba(16,185,129,.12); }
.hq2-kc-pill.is-warn    { color: #B45309; background: rgba(217,119,6,.14); }
.hq2-kc-pill.is-info    { color: #1D4ED8; background: rgba(37,99,235,.12); }
.hq2-kc-pill.is-danger  { color: #B91C1C; background: rgba(220,38,38,.12); }
.hq2-kc-pill.is-muted   { color: var(--ink-3); background: var(--surface-2); }

.hq2-kc-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}
.hq2-kc-tag.is-active   { background: rgba(28,40,84,.1); color: var(--tc-navy); }
.hq2-kc-tag.is-cheapest { background: rgba(16,185,129,.14); color: #047857; }

.hq2-kc-empty {
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: 14px;
  padding: 60px 24px;
  text-align: center;
  color: var(--ink-3);
}
.hq2-kc-empty-glyph { font-size: 38px; margin-bottom: 8px; color: var(--ink-4); }
.hq2-kc-empty-title { font-size: var(--t-14); font-weight: var(--w-bold); color: var(--ink); margin-bottom: 4px; }
.hq2-kc-empty-sub   { font-size: var(--t-13); }

/* ─── Detail page ── */
.hq2-kc-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 16px;
}
@media (max-width: 880px){
  .hq2-kc-detail-grid { grid-template-columns: 1fr; }
}
.hq2-kc-side { display: flex; flex-direction: column; gap: 12px; }

.hq2-kc-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 20px;
}
.hq2-kc-card-eye {
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.hq2-kc-plain { font-size: var(--t-13); line-height: 1.7; color: var(--ink-2); }

.hq2-kc-tiers {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-13);
}
.hq2-kc-tiers thead th {
  text-align: left;
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-3);
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
.hq2-kc-tiers tbody td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--rule);
}
.hq2-kc-tiers tbody tr.is-picked { background: rgba(200,169,110,.12); }
.hq2-kc-num { text-align: right; white-space: nowrap; }

.hq2-kc-callout {
  margin-top: 14px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  font-size: var(--t-13);
  color: var(--ink-2);
}
.hq2-kc-callout-money { color: var(--tc-gold); font-weight: var(--w-bold); }

.hq2-kc-dl {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-13);
}
.hq2-kc-dl > div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--rule);
}
.hq2-kc-dl > div:last-child { border-bottom: 0; }
.hq2-kc-dl dt { color: var(--ink-3); margin: 0; }
.hq2-kc-dl dd { margin: 0; font-weight: var(--w-semibold); color: var(--ink); text-align: right; }

.hq2-kc-feat {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--t-13);
  color: var(--ink-2);
}
.hq2-kc-yes { color: #10B981; font-weight: var(--w-bold); margin-right: 6px; }
.hq2-kc-no  { color: var(--danger); font-weight: var(--w-bold); margin-right: 6px; }

/* ─── Form ── */
.hq2-kc-formcard {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 14px;
  padding: 24px;
  max-width: 940px;
}
.hq2-kc-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 12px;
}
.hq2-kc-form-grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 720px){
  .hq2-kc-form-grid,
  .hq2-kc-form-grid-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px){
  .hq2-kc-form-grid,
  .hq2-kc-form-grid-4 { grid-template-columns: 1fr; }
}
.hq2-kc-form-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  margin: 14px 0;
}
.hq2-kc-form-block {
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
}
.hq2-kc-tier-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
  margin-bottom: 8px;
}
.hq2-kc-tier-row .hq2-kc-tier-x { color: var(--danger); padding: 6px 10px; }
.hq2-kc-feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  font-size: var(--t-13);
  color: var(--ink-2);
}
@media (max-width: 720px){
  .hq2-kc-feat-grid { grid-template-columns: 1fr 1fr; }
  .hq2-kc-tier-row  { grid-template-columns: 1fr 1fr; }
}
.hq2-kc-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-13);
}
.hq2-kc-form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
#hq2CfChart   { aspect-ratio: 720 / 240; }

/* ─── Breakeven · kitchen-comparison pointer line + Overhead tab card ── */

/* Pointer line on /kitchenComparison list, replacing the v1 scenario
   strip. Tells the reader where the column's numbers come from. */
.hq2-kc-be-source {
  background: rgba(4,120,87,.06);
  border: 1px solid rgba(4,120,87,.22);
  border-radius: 10px;
  padding: 10px 14px;
  margin: 14px 0;
  font-size: var(--t-13);
  color: var(--ink);
  line-height: 1.45;
}
.hq2-kc-be-source a { color: var(--tc-navy); font-weight: var(--w-bold); }
.hq2-kc-be-source b { font-variant-numeric: tabular-nums; }

/* Breakeven cell on the comparison table — single number, small wk hint. */
.hq2-kc-be { white-space: nowrap; }
.hq2-kc-be > b { color: var(--tc-navy); font-weight: var(--w-bold); }
.hq2-kc-be-wk { color: var(--ink-3); font-size: var(--t-11); }

/* Breakeven card on /financials/overhead — full-width below volume
   sensitivity. Visually mirrors hq2-fi-card chrome but with a navy
   headline strip. */
.hq2-oh-be-headline {
  display: flex; align-items: baseline; gap: 16px;
  background: linear-gradient(180deg, rgba(27,26,107,0.05) 0%, transparent 100%);
  margin: -16px -16px 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.hq2-oh-be-num {
  font-size: 28px; font-weight: var(--w-bold); color: var(--tc-navy);
  font-variant-numeric: tabular-nums; line-height: 1;
  flex-shrink: 0;
}
.hq2-oh-be-num-sub {
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.4;
  flex: 1 1 260px; min-width: 0;
}
.hq2-oh-be-num-sub b { color: var(--ink); font-weight: var(--w-bold); }

/* Plain-English explainer under the headline. Collapsed by default —
   pops open inline so the headline copy can stay terse. */
.hq2-oh-be-explainer {
  margin: 0 0 12px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface-2);
}
.hq2-oh-be-explainer summary {
  cursor: pointer;
  padding: 8px 12px;
  font-size: var(--t-12);
  font-weight: var(--w-bold);
  color: var(--tc-navy);
  list-style: none;
  user-select: none;
  display: flex; align-items: center; gap: 6px;
}
.hq2-oh-be-explainer summary::-webkit-details-marker { display: none; }
.hq2-oh-be-explainer summary::before {
  content: "▸";
  font-size: 10px; color: var(--ink-3);
  transition: transform 120ms ease;
}
.hq2-oh-be-explainer[open] summary::before { transform: rotate(90deg); }
.hq2-oh-be-explainer-body {
  padding: 4px 14px 12px;
  font-size: var(--t-12); color: var(--ink-2);
  line-height: 1.55;
}
.hq2-oh-be-explainer-body p { margin: 6px 0; }
.hq2-oh-be-explainer-body ul { margin: 6px 0; padding-left: 18px; }
.hq2-oh-be-explainer-body li { margin: 4px 0; }
.hq2-oh-be-explainer-body b { color: var(--ink); font-weight: var(--w-bold); }
.hq2-oh-be-explainer-body i { color: var(--ink-3); }

.hq2-oh-be-table { width: 100%; border-collapse: collapse; margin: 0 0 12px; }
.hq2-oh-be-table thead th {
  text-align: left; padding: 8px 8px 6px;
  font-size: 10px; font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .03em;
  border-bottom: 1px solid var(--rule);
}
.hq2-oh-be-table thead th:not(:first-child) { text-align: right; }
.hq2-oh-be-table tbody td {
  padding: 9px 8px; border-bottom: 1px solid var(--rule);
  font-size: var(--t-13); color: var(--ink);
}
.hq2-oh-be-table tbody td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; font-weight: var(--w-bold); }
.hq2-oh-be-table tbody tr.is-target { background: rgba(4,120,87,.06); }
.hq2-oh-be-table tbody tr.is-target td:first-child { font-weight: var(--w-bold); }
.hq2-oh-be-target-pill {
  display: inline-block; margin-left: 8px;
  background: #047857; color: #fff; font-size: 9px; font-weight: var(--w-bold);
  padding: 2px 6px; border-radius: 4px; letter-spacing: .06em;
  vertical-align: middle;
}
.hq2-oh-be-neg { color: var(--danger); }

.hq2-oh-be-formula {
  padding: 8px 12px;
  background: var(--surface-2); border-radius: 8px;
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.5;
  font-variant-numeric: tabular-nums;
  margin-bottom: 10px;
}
.hq2-oh-be-formula b { color: var(--ink); font-weight: var(--w-bold); }
.hq2-oh-be-formula code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; font-size: 0.92em;
}

.hq2-oh-be-caveats {}
.hq2-oh-be-caveat {
  display: flex; gap: 8px; padding: 8px 0;
  border-top: 1px solid var(--rule);
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.45;
}
.hq2-oh-be-caveat:first-child { border-top: 0; padding-top: 10px; }
.hq2-oh-be-caveat-icon {
  flex-shrink: 0; width: 16px; height: 16px; border-radius: 99px;
  background: rgba(200,169,110,.18); color: #8b6a1f;
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--w-bold); font-size: 10px;
  align-self: flex-start; margin-top: 2px;
}
.hq2-oh-be-caveat b { color: var(--tc-navy); }
.hq2-oh-be-caveat code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,.05); padding: 1px 5px; border-radius: 4px; font-size: 0.92em;
}

/* Breakeven headline — bakery share pill (inline callout next to the
   "$XXX/mo kitchen" mention so the user sees the bakery split applied). */
.hq2-oh-be-bakery-pill {
  display: inline-block; margin-left: 4px;
  background: rgba(200,169,110,.16); color: #8b6a1f;
  font-size: 10px; font-weight: var(--w-bold);
  padding: 2px 7px; border-radius: 99px; letter-spacing: .02em;
  vertical-align: middle; cursor: help;
}

/* ═══════════════════════════════════════════════════════════════════
   OVERHEAD — bakery panel (kitchen-share allocation)
   ═══════════════════════════════════════════════════════════════════ */

/* Slider + number input on one row inside the "kitchen share" label.
   Slider takes the lion's share of the width; number is a narrow box
   on the right so the user can type a precise value. Both stay in
   sync via the input handlers in bindFinancialsOverheadTab. */
.hq2-oh-bakery-share-row {
  display: flex; align-items: center; gap: 12px;
}
.hq2-oh-bakery-slider {
  flex: 1 1 auto; min-width: 0;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, rgba(200,169,110,.55), rgba(27,26,107,.45));
  outline: none; cursor: pointer;
}
.hq2-oh-bakery-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tc-navy); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
}
.hq2-oh-bakery-slider::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--tc-navy); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
}
.hq2-oh-bakery-num {
  flex: 0 0 64px; max-width: 64px;
  text-align: right;
}

/* 3-up output row showing effective rent / allocated / bakery net.
   Sits below the inputs so the user sees the dollar consequence of
   the slider position in real time. */
.hq2-oh-bakery-out {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin: 14px 0 4px;
  padding: 14px 16px;
  background: var(--surface-2); border-radius: 10px;
}
.hq2-oh-bakery-out-stat {
  display: flex; flex-direction: column; gap: 4px;
  text-align: left;
}
.hq2-oh-bakery-out-stat b {
  font-size: 22px; font-weight: var(--w-bold); color: var(--tc-navy);
  font-variant-numeric: tabular-nums; line-height: 1;
}
.hq2-oh-bakery-out-stat b.is-negative { color: #C0392B; }
.hq2-oh-bakery-out-stat span {
  font-size: var(--t-11); color: var(--ink-3); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em; font-weight: var(--w-bold);
}

/* 4 KPIs → 2×2 on medium widths before collapsing to a single
   column on phones, so the numbers never crush together. */
@media (max-width: 1080px) {
  .hq2-oh-bakery-out { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .hq2-oh-bakery-out { grid-template-columns: 1fr; gap: 12px; }
}

/* Derived-packaging metadata column — sits beside the readonly
   $ value to explain where the number comes from. The link is
   already styled via .hq2-pr-edit-link; this just lays the strip
   out. Spans 2 grid cells because the readonly input is so narrow. */
.hq2-oh-pkg-derived-meta {
  grid-column: span 2;
  display: flex; flex-direction: column;
  gap: 2px; padding: 6px 0 0;
  font-size: var(--t-12); color: var(--ink-3);
  align-self: center;
}
.hq2-oh-pkg-derived-lbl {
  font-size: 10px; font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
}
.hq2-oh-pkg-derived-link {
  color: var(--tc-navy); font-weight: var(--w-bold);
  text-decoration: none; font-size: var(--t-13);
}
.hq2-oh-pkg-derived-link:hover { text-decoration: underline; }
.hq2-oh-pkg-derived-sub {
  font-size: var(--t-11); color: var(--ink-3); line-height: 1.35;
}
/* Delivery gas-cost estimator output line (under the delivery row). */
.hq2-oh-gas-derived {
  display: flex; flex-direction: column;
  gap: 3px; padding: 8px 0 0;
}
.hq2-oh-gas-derived-out {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  font-size: var(--t-13); color: var(--ink-2);
}
.hq2-oh-gas-derived-out b {
  color: var(--tc-navy); font-weight: var(--w-bold);
  font-variant-numeric: tabular-nums;
}
.hq2-oh-gas-use {
  color: var(--tc-navy); font-weight: var(--w-bold);
  font-size: var(--t-12); cursor: pointer; text-decoration: none;
}
.hq2-oh-gas-use:hover { text-decoration: underline; }
.hq2-oh-gas-derived-sub {
  font-size: var(--t-11); color: var(--ink-3); line-height: 1.35;
}

/* Readonly variant of hq2-input — for the derived packaging value. */
.hq2-input[readonly] {
  background: var(--surface-2);
  color: var(--ink); font-weight: var(--w-bold);
  cursor: default;
}
@media (max-width: 720px) {
  .hq2-oh-pkg-derived-meta { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERHEAD — DECISIONS panel (Coach view · synthesized verdict)
   ═══════════════════════════════════════════════════════════════════ */

/* Top-of-page synthesis card. Sits ABOVE the inputs grid because
   the answer matters more than the data. Two-column body: rule-
   based action items on the left, paco's coach-style insight on
   the right. */
.hq2-oh-decisions {
  margin-bottom: 16px;
  padding: 0;
  background: var(--surface, #fff);
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--rule);
  box-shadow: 0 1px 3px rgba(15,12,32,.04);
}
.hq2-oh-decisions-head {
  padding: 18px 22px 16px;
  background: linear-gradient(180deg, rgba(200,169,110,.10) 0%, rgba(200,169,110,.02) 100%);
  border-bottom: 1px solid var(--rule);
}
.hq2-oh-decisions-eyebrow {
  font-size: var(--t-11); font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.hq2-oh-decisions-pill-row {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

/* Verdict pill — the single-word answer. Color = state. */
.hq2-oh-verdict-pill {
  font-size: 17px; font-weight: var(--w-bold);
  padding: 7px 16px; border-radius: 99px;
  letter-spacing: .06em; text-transform: uppercase;
  flex-shrink: 0;
}
.hq2-oh-verdict-pill.is-viable {
  background: #047857; color: #fff;
  box-shadow: 0 1px 3px rgba(4,120,87,.25);
}
.hq2-oh-verdict-pill.is-tight {
  background: linear-gradient(180deg, #C8A96E 0%, #B89860 100%); color: #2a1f0a;
  box-shadow: 0 1px 3px rgba(200,169,110,.30);
}
.hq2-oh-verdict-pill.is-underwater {
  background: #C0392B; color: #fff;
  box-shadow: 0 1px 3px rgba(192,57,43,.25);
}
.hq2-oh-verdict-pill.is-pending {
  background: var(--surface-2); color: var(--ink-3);
  box-shadow: none;
}

.hq2-oh-verdict-sub {
  flex: 1 1 320px; min-width: 260px;
  font-size: var(--t-14); color: var(--ink); line-height: 1.5;
}
.hq2-oh-verdict-sub b { color: var(--tc-navy); font-weight: var(--w-bold); }
.hq2-oh-verdict-sub i { color: var(--ink-3); font-style: italic; }
.hq2-oh-verdict-sub a { color: var(--tc-navy); text-decoration: underline; }
.hq2-oh-verdict-sub .hq2-oh-net-neg { color: #C0392B; }

/* Body — 2 columns (actions | AI). Stacks on mobile. */
.hq2-oh-decisions-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 0;
}
.hq2-oh-decisions-col {
  padding: 18px 22px 20px;
}
.hq2-oh-decisions-col + .hq2-oh-decisions-col {
  border-left: 1px solid var(--rule);
}
.hq2-oh-decisions-col-ai {
  background: rgba(27,26,107,.02);
}
.hq2-oh-decisions-section-h {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--t-11); font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 14px;
}
.hq2-oh-ai-cat {
  width: 18px; height: 26px; flex-shrink: 0;
}

/* Action list — bordered cards with title / impact / why. The
   "why" is small / muted text under the title row so the panel
   still scans at a glance. */
.hq2-oh-actions {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.hq2-oh-action {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 4px 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-left: 3px solid var(--tc-navy);
  border-radius: 0 8px 8px 0;
}
.hq2-oh-action-l {
  font-size: var(--t-14); color: var(--ink); line-height: 1.4;
}
.hq2-oh-action-l b { color: var(--tc-navy); font-weight: var(--w-bold); }
.hq2-oh-action-r {
  font-size: var(--t-13); font-weight: var(--w-bold); color: #047857;
  font-variant-numeric: tabular-nums; text-align: right;
  align-self: start;
}
.hq2-oh-action-why {
  grid-column: 1 / -1;
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.45;
}
.hq2-oh-action.is-loading {
  display: block;
  color: var(--ink-3); font-style: italic;
  border-left-color: var(--rule);
}
.hq2-oh-action-pricing  { border-left-color: #C8A96E; }
.hq2-oh-action-demand   { border-left-color: var(--tc-navy); }
.hq2-oh-action-bakery   { border-left-color: #A87D44; }
.hq2-oh-action-discount { border-left-color: #C8A96E; }
.hq2-oh-action-monitor  { border-left-color: #047857; }

/* AI insight body — paragraph text with a watchline callout at
   the bottom. The watchline is the explicit trigger telling the
   user what they're watching for. */
.hq2-oh-ai-body p {
  font-size: var(--t-14); color: var(--ink); line-height: 1.55;
  margin: 0 0 10px;
}
.hq2-oh-ai-body p:last-of-type { margin-bottom: 12px; }
.hq2-oh-ai-body b { color: var(--tc-navy); font-weight: var(--w-bold); }
.hq2-oh-ai-body i { font-style: italic; color: var(--ink-3); }
.hq2-oh-ai-loading {
  color: var(--ink-3); font-style: italic;
}
.hq2-oh-ai-watch {
  margin-top: 10px;
  padding: 10px 14px;
  background: rgba(200,169,110,.10);
  border-left: 3px solid #C8A96E;
  border-radius: 0 8px 8px 0;
  font-size: var(--t-13); color: var(--ink); line-height: 1.5;
}
.hq2-oh-ai-watch b { color: var(--tc-navy); font-weight: var(--w-bold); }
.hq2-oh-ai-watch-lbl {
  display: inline-block; margin-right: 6px;
  font-size: var(--t-11); font-weight: var(--w-bold);
  color: #8b6a1f; text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 900px) {
  .hq2-oh-decisions-body { grid-template-columns: 1fr; }
  .hq2-oh-decisions-col + .hq2-oh-decisions-col {
    border-left: 0;
    border-top: 1px solid var(--rule);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERHEAD — Breakeven · tier-mix sliders
   ═══════════════════════════════════════════════════════════════════ */

.hq2-oh-mix-block {
  margin: 0 0 14px;
  padding: 12px 14px;
  background: rgba(27,26,107,.03);
  border: 1px solid var(--rule);
  border-radius: 10px;
}
.hq2-oh-mix-head {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.hq2-oh-mix-h {
  font-size: var(--t-11); font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em;
  flex-shrink: 0;
}
.hq2-oh-mix-sub {
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.4;
  flex: 1 1 280px; min-width: 0;
}
.hq2-oh-mix-sub b { color: var(--tc-navy); font-weight: var(--w-bold); }

/* 3-up by default — 3 tier sliders fit on one row at typical card
   widths. minmax(110px,1fr) means 3 columns at ~366px container,
   2 columns at ~244px, 1 column below that. Keeps thumb + label
   readable while reclaiming the orphan-row vertical space. */
.hq2-oh-mix-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px 14px;
}
.hq2-oh-mix-row-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px; gap: 6px;
}
.hq2-oh-mix-row-lbl {
  font-size: var(--t-12); color: var(--ink); font-weight: var(--w-bold);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-oh-mix-row-pct {
  font-size: var(--t-13); color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.hq2-oh-mix-row-pct b {
  color: var(--tc-navy); font-weight: var(--w-bold);
  margin-right: 2px;
}
.hq2-oh-mix-slider {
  width: 100%;
  -webkit-appearance: none; appearance: none;
  height: 4px; border-radius: 4px;
  background: linear-gradient(to right, rgba(27,26,107,.50), rgba(200,169,110,.50));
  outline: none; cursor: pointer;
}
.hq2-oh-mix-slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tc-navy); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
}
.hq2-oh-mix-slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--tc-navy); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  cursor: pointer;
}

/* mix % column on the per-tier table — muted vs the bold
   contribution / breakeven figures so the eye stays on the math. */
.hq2-oh-be-table tbody td:nth-child(2) {
  font-weight: var(--w-normal);
  color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════
   OVERHEAD — Planning Mode (capacity + demand ramp + sparkline)
   ═══════════════════════════════════════════════════════════════════ */

.hq2-oh-pm-body { display: flex; flex-direction: column; gap: 22px; }

.hq2-oh-pm-section-h {
  font-size: var(--t-11); font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 4px;
}
.hq2-oh-pm-section-sub {
  font-size: var(--t-12); color: var(--ink-3); line-height: 1.45;
}
.hq2-oh-pm-section-sub b { color: var(--tc-navy); font-weight: var(--w-bold); }

.hq2-oh-pm-cap-head, .hq2-oh-pm-ramp-head { margin-bottom: 12px; }
.hq2-oh-pm-cap-grid,
.hq2-oh-pm-ramp-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.hq2-oh-pm-cap-out {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--surface-2); border-radius: 10px;
}
.hq2-oh-pm-cap-stat {
  display: flex; flex-direction: column; gap: 4px;
}
.hq2-oh-pm-cap-stat b {
  font-size: 20px; font-weight: var(--w-bold); color: var(--tc-navy);
  font-variant-numeric: tabular-nums; line-height: 1;
}
/* The "1 sub · 4 cust/mo" combined stat carries more text than a
   single number — drop the font a notch so it fits without wrap on
   typical card widths. */
.hq2-oh-pm-cap-stat b#hq2OhPmCapDemand {
  font-size: 16px;
}
.hq2-oh-pm-cap-stat b.is-underused  { color: var(--ink); }
.hq2-oh-pm-cap-stat b.is-matched    { color: #047857; }
.hq2-oh-pm-cap-stat b.is-capbound   { color: #C0392B; }
.hq2-oh-pm-cap-stat b.is-pending    { color: var(--ink-3); }
.hq2-oh-pm-cap-stat span {
  font-size: var(--t-11); color: var(--ink-3); line-height: 1.3;
  text-transform: uppercase; letter-spacing: .04em; font-weight: var(--w-bold);
}

/* Sparkline + axes + tooltip wrapper. Aspect ratio comes from the
   SVG viewBox; the wrapper sets max-width and lets it scale. */
.hq2-oh-pm-chart {
  margin-top: 4px;
}
.hq2-oh-pm-chart-wrap {
  position: relative;
  background: var(--surface-2);
  border-radius: 12px;
  padding: 10px 4px 6px;
}
.hq2-oh-pm-svg {
  display: block; width: 100%; height: auto;
  max-height: 320px;
  font-family: var(--font-sans, inherit);
}
.hq2-oh-pm-grid {
  stroke: rgba(15,12,32,.07); stroke-width: 1;
}
.hq2-oh-pm-line {
  stroke: var(--tc-navy); stroke-width: 2.5; stroke-linejoin: round;
}
.hq2-oh-pm-be-line {
  stroke: #C8A96E; stroke-width: 1.5; stroke-dasharray: 5 4;
}
.hq2-oh-pm-cap-line {
  stroke: rgba(15,12,32,.30); stroke-width: 1.5; stroke-dasharray: 3 4;
}
.hq2-oh-pm-be-label {
  fill: #8b6a1f; font-size: 11px; font-weight: 700;
}
.hq2-oh-pm-cap-label {
  fill: var(--ink-3); font-size: 11px; font-weight: 700;
}
.hq2-oh-pm-axis-x {
  fill: var(--ink-3); font-size: 11px;
}
.hq2-oh-pm-axis-y {
  fill: var(--ink-3); font-size: 10px;
  font-variant-numeric: tabular-nums; text-anchor: end;
}

/* Dots — green at/above BE, muted under, gold ring on the crossover.
   The visible dot has NO pointer events; the larger sibling hit
   circle owns hover. This avoids the 10×10 hit-target problem +
   the unreliable CSS `r` animation on Safari. */
.hq2-oh-pm-dot {
  pointer-events: none;
  stroke: #fff; stroke-width: 1.5;
  transition: r .12s ease;
}
.hq2-oh-pm-dot.is-be    { fill: #047857; }
.hq2-oh-pm-dot.is-under { fill: rgba(15,12,32,.40); }
.hq2-oh-pm-dot.is-cross {
  stroke: #C8A96E; stroke-width: 3;
}

/* Vertical hit-band — invisible rect, one per month, full chart
   height. Hovering anywhere in a month's column triggers the
   tooltip for that month. Replaces the overlapping circle hit-
   target approach which had cross-browser issues with fill:transparent
   + pointer-events:all. The near-zero alpha fill (rgba 0.001) is a
   real painted color that all SVG hit-test implementations honor as
   a hit target — pure "transparent" gets treated as "no fill" in
   strict browsers and silently drops events. */
.hq2-oh-pm-band {
  fill: rgba(0, 0, 0, 0.001);
  cursor: pointer;
  pointer-events: all;
}
/* When the bind handler adds .is-hovered to the visible dot, it
   bumps the radius cleanly via CSS (using r attribute won't animate
   reliably; we instead use a CSS custom property + filter for the
   visual halo). */
.hq2-oh-pm-dot.is-hovered {
  filter: drop-shadow(0 0 0 2px rgba(4,120,87,.25));
  stroke-width: 2.5;
}

/* Custom HTML tooltip. Positioned in % of the chart wrapper so it
   tracks correctly across CSS scaling. translate(-50%, ...) keeps
   it centered above the dot. */
.hq2-oh-pm-tooltip {
  position: absolute;
  transform: translate(-50%, calc(-100% - 12px));
  background: var(--tc-navy); color: #fff;
  padding: 8px 10px; border-radius: 8px;
  font-size: var(--t-12); line-height: 1.4;
  min-width: 150px; max-width: 220px;
  box-shadow: 0 4px 12px rgba(0,0,0,.18);
  opacity: 0; transition: opacity .12s ease;
  pointer-events: none;
  z-index: 4;
}
.hq2-oh-pm-tt-h {
  font-weight: var(--w-bold); font-size: var(--t-13);
  border-bottom: 1px solid rgba(255,255,255,.18);
  padding-bottom: 4px; margin-bottom: 6px;
}
.hq2-oh-pm-tt-row {
  display: flex; justify-content: space-between; gap: 10px;
  font-variant-numeric: tabular-nums;
}
.hq2-oh-pm-tt-row span { color: rgba(255,255,255,.7); }
.hq2-oh-pm-tt-row b { color: #fff; font-weight: var(--w-bold); }
.hq2-oh-pm-tt-row.is-net {
  margin-top: 6px; padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,.18);
}
.hq2-oh-pm-tt-row.is-net.is-pos b { color: #6CE0A4; }
.hq2-oh-pm-tt-row.is-net.is-neg b { color: #FFB4A8; }

/* Legend below the chart — three pills explaining dot states +
   crossover month callout. */
.hq2-oh-pm-legend {
  display: flex; flex-wrap: wrap; gap: 12px 18px;
  margin-top: 6px; padding: 8px 12px 4px;
  font-size: var(--t-12); color: var(--ink-3);
}
.hq2-oh-pm-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.hq2-oh-pm-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  display: inline-block; flex-shrink: 0;
}
.hq2-oh-pm-legend-dot.is-be    { background: #047857; }
.hq2-oh-pm-legend-dot.is-under { background: rgba(15,12,32,.40); }
.hq2-oh-pm-legend-item.is-cross-note { color: var(--ink); }
.hq2-oh-pm-legend-item.is-cross-note b { color: var(--tc-navy); font-weight: var(--w-bold); }

/* Collapsible 12-month dollar table. */
.hq2-oh-pm-detail {
  border: 1px solid var(--rule); border-radius: 10px;
  background: var(--surface, #fff);
}
.hq2-oh-pm-detail > summary {
  cursor: pointer;
  padding: 10px 14px;
  font-size: var(--t-13); font-weight: var(--w-bold);
  color: var(--ink);
  user-select: none;
}
.hq2-oh-pm-detail[open] > summary {
  border-bottom: 1px solid var(--rule);
}
.hq2-oh-pm-table-host { padding: 4px 12px 12px; }
.hq2-oh-pm-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--t-13);
}
.hq2-oh-pm-table thead th {
  text-align: left; padding: 8px 10px 6px;
  font-size: var(--t-11); font-weight: var(--w-bold);
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .04em;
  border-bottom: 1px solid var(--rule);
}
.hq2-oh-pm-table thead th:not(:first-child) { text-align: right; }
.hq2-oh-pm-table tbody td {
  padding: 8px 10px; border-bottom: 1px solid var(--rule);
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hq2-oh-pm-table tbody td:not(:first-child) { text-align: right; }
.hq2-oh-pm-table tbody tr.is-be td { background: rgba(4,120,87,.04); }
.hq2-oh-pm-table tbody tr.is-be td b { color: #047857; }
.hq2-oh-pm-table tbody tr.is-under td b { color: #C0392B; }

@media (max-width: 720px) {
  .hq2-oh-pm-cap-out { grid-template-columns: 1fr; gap: 12px; }
  .hq2-oh-pm-tooltip { min-width: 130px; font-size: var(--t-11); }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERHEAD — assumptions footer (read-the-model calibration)
   ═══════════════════════════════════════════════════════════════════ */

.hq2-oh-assumptions {
  margin-top: 18px;
  background: rgba(27,26,107,.02);
  border: 1px solid var(--rule);
  border-radius: 12px;
}
.hq2-oh-assumptions-body { padding: 6px 4px 14px; }
.hq2-oh-assumptions-list {
  list-style: none; padding: 0; margin: 0;
}
.hq2-oh-assumptions-list li {
  padding: 12px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: var(--t-13); color: var(--ink); line-height: 1.55;
}
.hq2-oh-assumptions-list li:last-child { border-bottom: 0; }
.hq2-oh-assumptions-list li b {
  color: var(--tc-navy); font-weight: var(--w-bold);
  margin-right: 4px;
}
.hq2-oh-assumptions-list li i {
  font-style: italic; color: var(--ink-3);
}

/* ═══════════════════════════════════════════════════════════════════
   COACHES — tandocoach approvals admin (mise /hq2#/coaches)
   ═══════════════════════════════════════════════════════════════════ */

/* Status tab strip — Pending / Approved / Rejected with inline counts.
   Active tab gets navy underline + ink color. */
.hq2-fi-tabs {
  display: flex; gap: 4px; margin: 18px 0 0;
  border-bottom: 1px solid var(--line, rgba(15,12,32,.08));
}
.hq2-fi-tab {
  appearance: none; background: transparent; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 700; color: var(--ink-2, #5a5c70);
  padding: 10px 14px 12px; letter-spacing: -.005em;
  display: inline-flex; align-items: center; gap: 8px;
  border-bottom: 2px solid transparent;
  transition: color .14s ease, border-color .14s ease;
}
.hq2-fi-tab:hover { color: var(--ink, #1b1a6b); }
.hq2-fi-tab[aria-selected="true"], .hq2-fi-tab.is-on {
  color: var(--ink, #1b1a6b);
  border-bottom-color: var(--tc-navy, #1b1a6b);
}
.hq2-fi-tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 6px;
  background: var(--surface-2, rgba(15,12,32,.06)); color: var(--ink-2, #5a5c70);
  border-radius: 99px; font-size: 11px; font-weight: 800; line-height: 1;
}
.hq2-fi-tab[aria-selected="true"] .hq2-fi-tab-count,
.hq2-fi-tab.is-on .hq2-fi-tab-count {
  background: var(--tc-navy, #1b1a6b); color: #fff;
}

/* Card empty-state */
.hq2-fi-empty {
  padding: 32px 22px; text-align: center;
  color: var(--ink-3, #6b6b7b); font-size: 13.5px; font-weight: 500;
  line-height: 1.5;
}
.hq2-fi-empty code {
  background: var(--surface-2, rgba(15,12,32,.06));
  padding: 1px 6px; border-radius: 6px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 12px;
}

/* Coach row in the list */
.hq2-coaches-row {
  display: grid; grid-template-columns: 44px 1fr auto;
  gap: 14px; align-items: center;
  padding: 14px 18px;
  border-top: 1px solid var(--line, rgba(15,12,32,.06));
  cursor: pointer; transition: background .14s ease;
}
.hq2-coaches-row:first-child { border-top: 0; }
.hq2-coaches-row:hover { background: var(--surface-2, rgba(15,12,32,.03)); }
.hq2-coaches-av {
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--tc-navy, #1b1a6b), var(--tc-navy-soft, #2548BE));
  color: #fff; font-weight: 900; font-size: 17px;
  display: grid; place-items: center;
  letter-spacing: -.02em;
}
.hq2-coaches-body { min-width: 0; }
.hq2-coaches-name {
  font-weight: 800; font-size: 14px; color: var(--ink, #1b1a6b);
  letter-spacing: -.012em; display: inline-flex; align-items: center; gap: 8px;
}
.hq2-coaches-meta {
  font-size: 12px; font-weight: 600; color: var(--ink-2, #5a5c70);
  margin-top: 2px; letter-spacing: -.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hq2-coaches-meta code {
  background: var(--surface-2, rgba(15,12,32,.06));
  padding: 1px 6px; border-radius: 5px;
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace; font-size: 11px;
  letter-spacing: .04em;
}
.hq2-coaches-sub {
  font-size: 11.5px; font-weight: 600; color: var(--ink-3, #6b6b7b);
  margin-top: 3px; letter-spacing: -.005em;
}
.hq2-coaches-actions {
  display: flex; gap: 8px; flex-shrink: 0; cursor: default;
}
.hq2-coaches-actions .hq2-btn { font-size: 12.5px; padding: 8px 14px; }

/* Inline pill (tier badge: free / PRO) */
.hq2-pill {
  display: inline-flex; align-items: center; padding: 2px 8px;
  background: var(--surface-2, rgba(15,12,32,.06)); color: var(--ink-2, #5a5c70);
  border-radius: 99px; font-size: 10px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
}
.hq2-pill-gold {
  background: linear-gradient(135deg, #F2D079, #C8A96E);
  color: #1A1508;
  box-shadow: 0 2px 4px rgba(184,138,26,.30);
}

@media (max-width: 720px) {
  .hq2-coaches-row { grid-template-columns: 38px 1fr; }
  .hq2-coaches-actions { grid-column: 1 / -1; padding-top: 6px; }
}

/* ────────────────────────────────────────────────────────────────────
   COACH DETAIL MODAL — popped when staff clicks a coach row in the
   /hq2#/coaches list. Replaces the legacy native alert() with a real
   hq2-style detail surface. Mirrors the data shape of the
   mise-coaches.html drawer (profile grid · certifications · bio ·
   rejection note · action buttons) so staff see the same context
   whether they're in mise-coaches or hq2.
   ──────────────────────────────────────────────────────────────────── */
.hq2-coaches-detail { max-width: 640px !important; }
.hq2-coaches-detail .hq2-cd-status {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px; border-radius: 10px;
  font-size: 12.5px; font-weight: 700; letter-spacing: -.005em;
  margin-bottom: 18px;
}
.hq2-coaches-detail .hq2-cd-status-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.hq2-coaches-detail .hq2-cd-status-warn {
  background: rgba(224,179,65,.12); color: #7A5410;
}
.hq2-coaches-detail .hq2-cd-status-warn .hq2-cd-status-dot { background: #E0B341; }
.hq2-coaches-detail .hq2-cd-status-good {
  background: rgba(22,163,74,.10); color: #15803D;
}
.hq2-coaches-detail .hq2-cd-status-good .hq2-cd-status-dot { background: #16A34A; }
.hq2-coaches-detail .hq2-cd-status-bad {
  background: rgba(220,38,38,.08); color: #B42318;
}
.hq2-coaches-detail .hq2-cd-status-bad .hq2-cd-status-dot { background: #DC2626; }

.hq2-coaches-detail .hq2-cd-h {
  margin: 22px 0 10px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3, #6b6b7b);
}
.hq2-coaches-detail .hq2-cd-h:first-of-type { margin-top: 0; }

.hq2-coaches-detail .hq2-cd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.hq2-coaches-detail .hq2-cd-cell {
  background: var(--surface-2, rgba(15,12,32,.025));
  border: 1px solid var(--line, rgba(15,12,32,.06));
  border-radius: 10px; padding: 10px 12px;
}
.hq2-coaches-detail .hq2-cd-lbl {
  font-size: 10.5px; font-weight: 800; letter-spacing: .10em;
  text-transform: uppercase; color: var(--ink-3, #6b6b7b);
  margin-bottom: 4px;
}
.hq2-coaches-detail .hq2-cd-val {
  font-size: 13.5px; font-weight: 700; color: var(--ink, #1b1a6b);
  letter-spacing: -.005em; word-break: break-word;
}

.hq2-coaches-detail .hq2-cd-certs {
  display: flex; flex-direction: column; gap: 6px;
}
.hq2-coaches-detail .hq2-cd-cert {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: var(--surface-2, rgba(15,12,32,.025));
  border: 1px solid var(--line, rgba(15,12,32,.06));
  border-radius: 10px;
}
.hq2-coaches-detail .hq2-cd-cert-lbl {
  font-size: 13px; font-weight: 700; color: var(--ink, #1b1a6b);
}
.hq2-coaches-detail .hq2-cd-cert-id {
  font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  font-size: 11.5px; font-weight: 700;
  color: var(--ink-2, #5a5c70);
  letter-spacing: .02em;
}
.hq2-coaches-detail .hq2-cd-cert-id.is-missing {
  color: #B42318; font-family: var(--font-ui);
  font-style: italic; font-weight: 600; letter-spacing: -.005em;
}

.hq2-coaches-detail .hq2-cd-bio {
  padding: 12px 14px;
  background: var(--surface-2, rgba(15,12,32,.025));
  border: 1px solid var(--line, rgba(15,12,32,.06));
  border-radius: 10px;
  font-size: 13.5px; line-height: 1.55; color: var(--ink-2, #3A4458);
  white-space: pre-wrap;
}

.hq2-coaches-detail .hq2-cd-reject-note {
  padding: 12px 14px;
  background: #FAF7F0;
  border: 1px solid rgba(184,138,26,.20);
  border-left: 3px solid #B88A1A;
  border-radius: 6px;
  font-size: 13.5px; line-height: 1.55; color: #2A2520;
  white-space: pre-wrap;
}

.hq2-coaches-detail .hq2-cd-empty {
  padding: 16px;
  text-align: center;
  font-size: 13px; color: var(--ink-3, #6b6b7b);
  background: var(--surface-2, rgba(15,12,32,.025));
  border: 1px dashed var(--line, rgba(15,12,32,.10));
  border-radius: 10px;
}

@media (max-width: 560px) {
  .hq2-coaches-detail .hq2-cd-grid { grid-template-columns: 1fr; }
  .hq2-coaches-detail .hq2-modal-foot {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .hq2-coaches-detail .hq2-modal-foot .hq2-btn { width: 100%; text-align: center; }
}

/* ════════════════════════════════════════════════════════════════════
   MOBILE FOUNDATION  (Phase 1 of the mobile rollout · 2026-05-18)
   ────────────────────────────────────────────────────────────────────
   Establishes the primitives every later mobile phase depends on:

     1. Safe-area variables (Dynamic Island / notch handling)
     2. iOS Safari zoom prevention (force inputs ≥16px on ≤640px)
     3. WCAG / iOS HIG 44×44 touch targets on every interactive surface
        that survives at phone size
     4. Standardized breakpoint vocabulary:
          ── 960px → tablet  (rail stays — content stays multi-col)
          ── 640px → phone   (rail off, bottom tab bar in Phase 2)
          ── 380px → compact (one-handed iPhone SE / mini)
     5. Defensive overflow-x lock + masthead safe-area inset

   NOTE: Legacy breakpoints (880 / 720 / 600 / 560 / 540 / 460 / 380)
   scattered through the file stay intact for now. As later phases
   audit each surface they should migrate toward the canonical
   960 / 640 / 380 vocabulary.

   The rail-hide rule for ≤640px lives next to its sibling surface
   rules (search "Hide rail at PHONE size" earlier in this file).
   ════════════════════════════════════════════════════════════════════ */

body.hq2-app {
  /* env() resolves to 0 on non-notch devices, so these vars are safe
     to consume unconditionally. Requires viewport-fit=cover in the
     HTML <meta viewport> or the values stay 0 even on notch iPhones. */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* Bottom-tab-bar reservation. Phase 1 leaves this at 0px so today's
     layouts don't shift. Phase 2 raises it to ~64px + --safe-bottom
     so sticky footers and fixed panels can subtract it. */
  --bottom-nav-h: 0px;
}

/* Tap polish — applies on all viewports because touch can come from
   any device (laptops with touch screens, foldables, tablets). The
   custom highlight ink replaces iOS's default gray flash with a
   subtle navy. touch-action:manipulation cancels the 300ms tap-to-
   doubletap delay on older mobile browsers. */
body.hq2-app button,
body.hq2-app .hq2-btn,
body.hq2-app .hq2-rail-icon,
body.hq2-app .hq2-cmdk-trigger,
body.hq2-app .hq2-mh-bell,
body.hq2-app .hq2-mh-profile,
body.hq2-app .hq2-mh-site,
body.hq2-app .hq2-range-pills button {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(27, 26, 107, .12);
}

/* ── Tablet+ safe-area: padding the sticky masthead so a Dynamic
      Island never paints over crumb / brand. The rail (when visible)
      already lives behind/around the safe area on the left edge. ── */
@media (max-width: 960px) {
  body.hq2-app .hq2-masthead {
    padding-top: var(--safe-top);
    height: calc(var(--mh-h) + var(--safe-top));
  }
}

/* ── PHONE layer (≤640px) — the critical layer.
      iOS zoom prevention, 44px tap targets, masthead density. ── */
@media (max-width: 640px) {

  /* iOS Safari refuses to autofocus inputs <16px and instead zooms
     the page in to fit the field, which then doesn't fit back out.
     16px is the universal cure. Visual density on desktop is
     unaffected because this is scoped to the phone breakpoint. */
  body.hq2-app .hq2-input,
  body.hq2-app .hq2-textarea,
  body.hq2-app .hq2-select,
  body.hq2-app input[type='text'],
  body.hq2-app input[type='email'],
  body.hq2-app input[type='password'],
  body.hq2-app input[type='search'],
  body.hq2-app input[type='tel'],
  body.hq2-app input[type='number'],
  body.hq2-app input[type='url'],
  body.hq2-app input[type='date'],
  body.hq2-app input[type='time'],
  body.hq2-app input[type='datetime-local'],
  body.hq2-app textarea,
  body.hq2-app select {
    font-size: 16px;
    line-height: 1.35;
  }

  /* 44×44 minimum tap targets (Apple HIG + WCAG 2.5.5). We bump
     min-height + bottom/top padding instead of overriding all
     padding so existing density-tuned horizontal padding survives. */
  body.hq2-app .hq2-btn {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  body.hq2-app .hq2-btn-sm {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }
  body.hq2-app .hq2-btn-lg { min-height: 48px; }

  /* Masthead actions visible on phone: bell, profile, cmdk, site link.
     Original desktop sizes are 30×30 — bumped to 40×40 so they meet
     the 44px touch target after the masthead's own padding adds the
     remaining few px on each side. */
  body.hq2-app .hq2-mh-bell,
  body.hq2-app .hq2-mh-profile {
    width: 40px;
    height: 40px;
  }

  /* Cmd+K trigger collapses to an icon-only search button on phone:
     no kbd hint (there's no keyboard to chord), no "jump to..." label
     (the magnifying glass is universal). The search SVG sits centered. */
  body.hq2-app .hq2-cmdk-trigger {
    height: 40px;
    min-width: 40px;
    padding: 0;
    justify-content: center;
  }
  body.hq2-app .hq2-cmdk-trigger .kbd,
  body.hq2-app .hq2-cmdk-trigger > span:not(.kbd) {
    display: none;
  }

  /* tandoco.com link — icon-only on phone, same reason as cmdk. */
  body.hq2-app .hq2-mh-site {
    width: 40px;
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  body.hq2-app .hq2-mh-site span { display: none; }

  /* Range pills — tertiary controls, kept slim but tappable. */
  body.hq2-app .hq2-range-pills button {
    min-height: 36px;
    padding-left: 14px;
    padding-right: 14px;
  }

  /* Defensive overflow lock — without this, a fixed-width panel
     (detail panel at 480px, notif panel at 360px, etc.) pushes the
     body wide and breaks every other surface. Phase 3 makes those
     panels properly responsive; this guard catches anything that
     slips through. */
  body.hq2-app .hq2-main { overflow-x: hidden; }
  body.hq2-app .hq2-page { max-width: 100%; overflow-x: hidden; }

  /* Masthead breathing — desktop 20px side padding crowds tools on
     375px viewports. */
  body.hq2-app .hq2-masthead {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
    gap: var(--s-2);
  }

  /* Brand sub-label "mise" duplicates the page title on phones and
     steals tap space from the masthead tools. */
  body.hq2-app .hq2-mh-brand .hq2-brand-sub { display: none; }
}

/* ── COMPACT layer (≤380px) — one-handed iPhones (SE/mini).
      Inherits everything from the ≤640px layer; only adds further
      density squeezes that would have been too aggressive on a
      standard 375-414px phone. ── */
@media (max-width: 380px) {
  body.hq2-app .hq2-mh-brand .hq2-brand-mark { font-size: 18px; }
  body.hq2-app .hq2-masthead {
    padding-left: var(--s-2);
    padding-right: var(--s-2);
  }
}

/* ── Hover neutralization on touch-only devices. Sticky :hover
      states on iOS Safari ("the button stays gold after I tap it
      then scroll away") are a known annoyance. This block drops the
      hover styles only when the primary pointing device is coarse,
      so desktop with a mouse is unaffected. The exhaustive list
      below covers the surfaces that survive at phone size; more
      will be added in Phase 5. ── */
@media (hover: none) {
  body.hq2-app .hq2-btn-primary:hover { background: var(--tc-navy); }
  body.hq2-app .hq2-btn-secondary:hover {
    background: var(--surface);
    border-color: var(--rule-strong);
  }
  body.hq2-app .hq2-btn-ghost:hover {
    background: transparent;
    color: var(--ink-2);
  }
  body.hq2-app .hq2-btn-danger:hover { background: var(--danger); }
  body.hq2-app .hq2-btn-gold:hover { background: var(--tc-gold); }
  body.hq2-app .hq2-mh-bell:hover {
    color: var(--ink-3);
    border-color: var(--rule);
    background: transparent;
  }
  body.hq2-app .hq2-cmdk-trigger:hover {
    border-color: var(--rule-strong);
    color: var(--ink-3);
  }
}

/* ════════════════════════════════════════════════════════════════════
   END mobile foundation. Phases that stack on top:
   · Phase 2 — bottom tab bar (will set --bottom-nav-h)
   · Phase 3 — modal / detail-panel / cmdk bottom-sheet collapse
   · Phase 4 — per-surface (KPI grid, CRM table, charts, kitchen)
   · Phase 5 — swipe gestures, pull-to-refresh, keyboard avoidance
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   MOBILE TAB BAR  (Phase 2 of the mobile rollout · 2026-05-18)
   ────────────────────────────────────────────────────────────────────
   At ≤640px the desktop rail is hidden (see "Hide rail at PHONE size"
   earlier in this file). The tab bar below replaces it as the primary
   nav: 5 hot-surface tabs + a 'more' tab that opens a drawer with
   every other module. Active state mirrors currentRoute via
   renderMobileTabBar() in hq2.js, called from the same hashchange
   path that re-renders the desktop rail.

   The bar lives inside .hq2-shell (post-auth state) but uses
   position:fixed so .hq2-shell's overflow:hidden does not clip it.
   Safe-area bottom inset is honored so the bar lifts above the iOS
   home indicator on notch / Dynamic-Island devices.
   ════════════════════════════════════════════════════════════════════ */

/* Hidden by default — desktop never sees these elements. */
.hq2-mtab,
.hq2-mdrawer,
.hq2-mdrawer-mask { display: none; }

@media (max-width: 640px) {
  /* Raise the bottom-nav reservation set in the foundation block so
     fixed footers / sticky panels can subtract --bottom-nav-h. */
  body.hq2-app { --bottom-nav-h: 64px; }

  /* Reserve scroll-area at the bottom of .hq2-main so the last row
     of content isn't covered by the fixed tab bar. */
  body.hq2-app .hq2-main {
    padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom));
  }

  /* ── Tab bar shell ── */
  body.hq2-app .hq2-mtab {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: fixed;
    left: 0; right: 0; bottom: 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: var(--ink);
    border-top: 1px solid rgba(255, 255, 255, .08);
    z-index: 14;
    box-shadow: 0 -8px 24px -8px rgba(15, 12, 32, .35);
  }

  body.hq2-app .hq2-mtab-item,
  body.hq2-app .hq2-mtab-item:link,
  body.hq2-app .hq2-mtab-item:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 4px 8px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, .72);
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: lowercase;
    text-decoration: none;
    cursor: pointer;
    position: relative;
    transition: color .15s ease;
    -webkit-tap-highlight-color: transparent;
    min-height: 44px;
  }
  body.hq2-app .hq2-mtab-item svg {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
  }
  body.hq2-app .hq2-mtab-item.is-active,
  body.hq2-app .hq2-mtab-item.is-active:link,
  body.hq2-app .hq2-mtab-item.is-active:visited {
    color: var(--tc-gold);
  }
  body.hq2-app .hq2-mtab-item.is-active::before {
    content: '';
    position: absolute;
    top: 0;
    left: 30%; right: 30%;
    height: 2px;
    background: var(--tc-gold);
    border-radius: 0 0 2px 2px;
  }
  body.hq2-app .hq2-mtab-item:active {
    color: var(--tc-gold-light);
  }

  /* Badge on tab item (mirrors the rail badge pattern). */
  body.hq2-app .hq2-mtab-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(8px);
    min-width: 14px;
    height: 14px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tc-gold);
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-variant-numeric: tabular-nums;
    box-shadow: 0 0 0 1.5px var(--ink);
  }
  body.hq2-app .hq2-mtab-badge.is-warn     { background: #D9A200; color: #fff; }
  body.hq2-app .hq2-mtab-badge.is-critical { background: #C8442C; color: #fff; }

  /* ── Drawer backdrop ── */
  body.hq2-app .hq2-mdrawer-mask {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 32, .5);
    z-index: 15;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s var(--ease);
  }
  body.hq2-app .hq2-mdrawer-mask.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  /* ── Drawer sheet — slides up from bottom ── */
  body.hq2-app .hq2-mdrawer {
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    max-height: 86vh;
    max-height: 86dvh;
    background: var(--surface);
    border-radius: 18px 18px 0 0;
    z-index: 16;
    transform: translateY(100%);
    transition: transform .26s var(--ease);
    box-shadow: 0 -16px 48px -16px rgba(15, 12, 32, .35);
    padding-bottom: var(--safe-bottom);
  }
  body.hq2-app .hq2-mdrawer.is-open {
    transform: translateY(0);
  }

  body.hq2-app .hq2-mdrawer-grab {
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--rule-strong);
    margin: 8px auto 4px;
    flex-shrink: 0;
  }

  body.hq2-app .hq2-mdrawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 18px 12px;
    border-bottom: 1px solid var(--rule);
    flex-shrink: 0;
  }
  body.hq2-app .hq2-mdrawer-head h2 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: -.015em;
  }
  body.hq2-app .hq2-mdrawer-close {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    color: var(--ink-3);
    display: grid;
    place-items: center;
    cursor: pointer;
  }
  body.hq2-app .hq2-mdrawer-close:active { transform: scale(.95); }

  body.hq2-app .hq2-mdrawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 14px 8px;
    -webkit-overflow-scrolling: touch;
  }

  body.hq2-app .hq2-mdrawer-group {
    margin-bottom: 14px;
  }
  body.hq2-app .hq2-mdrawer-group:last-child {
    margin-bottom: 0;
  }
  body.hq2-app .hq2-mdrawer-cap {
    font-family: var(--font-ui);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--ink-4);
    padding: 0 8px 6px;
  }
  body.hq2-app .hq2-mdrawer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
  }
  body.hq2-app .hq2-mdrawer-item,
  body.hq2-app .hq2-mdrawer-item:link,
  body.hq2-app .hq2-mdrawer-item:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 6px;
    border-radius: 12px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    line-height: 1.15;
    min-height: 72px;
    cursor: pointer;
    position: relative;
  }
  body.hq2-app .hq2-mdrawer-item:active {
    background: var(--surface);
    transform: scale(.98);
  }
  body.hq2-app .hq2-mdrawer-item.is-active,
  body.hq2-app .hq2-mdrawer-item.is-active:link,
  body.hq2-app .hq2-mdrawer-item.is-active:visited {
    background: var(--tc-navy);
    border-color: var(--tc-navy);
    color: #fff;
  }
  body.hq2-app .hq2-mdrawer-item svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
  body.hq2-app .hq2-mdrawer-item.is-active svg { stroke: #fff; }

  /* Mini-badge on a drawer item — same shape as the rail badge. */
  body.hq2-app .hq2-mdrawer-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--tc-gold);
    color: var(--ink);
    font-size: 9px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  body.hq2-app .hq2-mdrawer-foot {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--rule);
    flex-shrink: 0;
    background: var(--surface);
  }
  body.hq2-app .hq2-mdrawer-flink,
  body.hq2-app .hq2-mdrawer-flink:link,
  body.hq2-app .hq2-mdrawer-flink:visited {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px;
    border-radius: 10px;
    background: var(--surface-2);
    border: 1px solid var(--rule);
    color: var(--ink-2);
    font-family: var(--font-ui);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    min-height: 44px;
  }
  body.hq2-app .hq2-mdrawer-flink:active {
    background: var(--surface);
    transform: scale(.98);
  }

  /* When the drawer is open, lock body scroll so the page underneath
     doesn't bounce around. JS adds .is-drawer-open to <body>. */
  body.hq2-app.is-drawer-open { overflow: hidden; }
}

/* ════════════════════════════════════════════════════════════════════
   END mobile tab bar. Subsequent phases:
   · Phase 3 — modal / detail-panel / cmdk bottom-sheet collapse
   · Phase 4 — per-surface (KPI grid, CRM table, charts, kitchen)
   · Phase 5 — swipe gestures, pull-to-refresh, keyboard avoidance
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   MOBILE OVERLAYS  (Phase 3 of the mobile rollout · 2026-05-18)
   ────────────────────────────────────────────────────────────────────
   Bottom-sheet collapse for every overlay primitive at ≤640px:

     · .hq2-modal-overlay  (openHq2Modal output)  → bottom sheet
     · .hq2-detail-panel   (KPI drilldown)        → bottom sheet
     · .hq2-notif-panel    (bell dropdown)        → top sheet
     · .hq2-cmdk + mask    (command palette)      → full-screen
     · .hq2-ob-modal       (onboarding walkthrough)→ full-screen

   The pattern: each overlay's existing desktop animation (right-slide,
   center-pop, top-drop) is replaced inside the @media (max-width:640px)
   layer with a bottom-up slide. Grab handles + safe-area-inset padding
   keep the sheets feeling native on iOS / Android.

   We DO NOT rewrite the underlying JS — every openXxx() helper keeps
   its existing class-flip API (.is-on / .is-open / .hidden). All
   mobile-specific look is pure CSS, scoped to the phone breakpoint.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── .hq2-modal-overlay → bottom sheet ──
     Default desktop: flex-centered card, max-width 600. Mobile:
     dock to the bottom edge so the sheet rises from there; the
     existing `hq2-modal-pop` keyframe is overridden by the override
     animation below so the transform is a slide-up not a tiny pop.
     The .hq2-modal-foot stays sticky to the visible bottom by being
     inside the sheet's flex column. */
  body.hq2-app .hq2-modal-overlay {
    padding: 0;
    align-items: flex-end;
    padding-top: 0;
  }
  body.hq2-app .hq2-modal-overlay > .hq2-modal {
    max-width: 100%;
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - 24px);
    border-radius: 18px 18px 0 0;
    border-bottom: none;
    border-left: none;
    border-right: none;
    animation: hq2-modal-sheet-up .26s cubic-bezier(.32, .72, 0, 1);
    padding-bottom: var(--safe-bottom);
  }
  /* Grab handle — a 36×4 pill sitting above the head row. We synth it
     via a pseudo on the modal so existing markup doesn't have to
     change. Pointer-events:none keeps any tap from getting intercepted. */
  body.hq2-app .hq2-modal-overlay > .hq2-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--rule-strong);
    margin: 8px auto 4px;
    flex-shrink: 0;
    pointer-events: none;
  }
  @keyframes hq2-modal-sheet-up {
    from { transform: translateY(100%); opacity: 1; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  /* The .hq2-modal-mask path (legacy openHq2Modal pattern from earlier
     in this file) — same bottom-sheet rules. */
  body.hq2-app .hq2-modal-mask {
    align-items: flex-end;
    padding: 0;
  }
  body.hq2-app .hq2-modal-mask .hq2-modal {
    max-width: 100%;
    width: 100%;
    max-height: calc(100dvh - var(--safe-top) - 24px);
    border-radius: 18px 18px 0 0;
    padding-bottom: var(--safe-bottom);
  }
  body.hq2-app .hq2-modal-mask .hq2-modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--rule-strong);
    margin: 8px auto 4px;
    flex-shrink: 0;
    pointer-events: none;
  }

  /* ── .hq2-detail-panel → bottom sheet ──
     Desktop: 480px right-side slide-in. Mobile: full-width bottom
     sheet with slide-up. The existing .is-on class still flips us
     to "open" state, just along a different axis. */
  body.hq2-app .hq2-detail-panel {
    top: auto;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    max-height: calc(100dvh - var(--safe-top) - 24px);
    border-left: none;
    border-top: 1px solid var(--rule);
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    box-shadow: 0 -16px 48px -16px rgba(15, 12, 32, .35);
    padding-bottom: var(--safe-bottom);
  }
  body.hq2-app .hq2-detail-panel.is-on { transform: translateY(0); }
  body.hq2-app .hq2-detail-panel::before {
    content: '';
    display: block;
    position: absolute;
    top: 8px; left: 50%;
    width: 36px;
    height: 4px;
    margin-left: -18px;
    border-radius: 2px;
    background: var(--rule-strong);
    pointer-events: none;
  }
  /* Push the head down by the grab-handle height so the close X
     doesn't collide with the grabber. */
  body.hq2-app .hq2-detail-panel .hq2-detail-head {
    padding-top: calc(var(--s-4) + 8px);
  }

  /* ── .hq2-notif-panel → top sheet ──
     Default: 360px wide, anchored under the bell. Mobile: full-width
     dropdown that respects safe-area + masthead height. The
     animation stays a slight slide-down (matches existing
     hq2NotifIn keyframe). */
  body.hq2-app .hq2-notif-panel {
    top: calc(var(--mh-h) + var(--safe-top) + 4px);
    right: var(--s-3);
    left: var(--s-3);
    width: auto;
    max-width: none;
    max-height: calc(100dvh - var(--mh-h) - var(--safe-top) - 12px);
    border-radius: 14px;
  }

  /* ── .hq2-cmdk-mask + .hq2-cmdk → full-screen ──
     Desktop: 640px-wide palette floating at 12vh top. Mobile: full-
     screen takeover with sticky input pinned to the safe-area top.
     The mobile drawer (Phase 2) is the everyday "jump to a module"
     UX; cmdk on mobile is for power users + global commands. */
  body.hq2-app .hq2-cmdk-mask {
    padding-top: 0;
    align-items: stretch;
  }
  body.hq2-app .hq2-cmdk {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    box-shadow: none;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  body.hq2-app .hq2-cmdk-input {
    padding: 14px 18px;
    font-size: 16px;
    position: sticky;
    top: var(--safe-top);
    background: var(--surface);
    z-index: 2;
  }
  body.hq2-app .hq2-cmdk-list {
    padding: var(--s-3) var(--s-2) calc(var(--s-3) + var(--safe-bottom));
  }
  body.hq2-app .hq2-cmdk-item {
    padding: 14px 12px;
    font-size: 14px;
  }

  /* ── .hq2-ob-modal → full-screen sheet ──
     The onboarding walkthrough auto-opens on first sign-in and runs
     a paco-narrated tour. Centered card at 620px on desktop is fine;
     on phone the card was awkwardly cramped. Full-screen lets the
     paco illustration breathe and gives the speech bubble room. */
  body.hq2-app .hq2-ob-modal {
    top: 0; left: 0;
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
    border: none;
    transform: translateY(100%);
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
  }
  body.hq2-app .hq2-ob-modal.is-open {
    transform: translateY(0);
  }
  body.hq2-app .hq2-ob-close {
    top: calc(var(--safe-top) + 14px);
    right: 14px;
  }
}

/* ════════════════════════════════════════════════════════════════════
   END mobile overlays. Subsequent phases:
   · Phase 4 — per-surface (KPI grid, CRM table, charts, kitchen)
   · Phase 5 — swipe gestures, pull-to-refresh, keyboard avoidance
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   MOBILE SURFACES  (Phase 4 of the mobile rollout · 2026-05-18)
   ────────────────────────────────────────────────────────────────────
   Tunes individual high-traffic surfaces for the phone breakpoint:

     · Overview "The Pass" — KPI grid 1-col at compact, chart heights
     · Status line — compress to high-signal items only
     · CRM customer table — hide secondary cells, lean on detail sheet
     · Range pills — horizontally scrollable instead of wrapping
     · Generic table fallback — h-scroll wrapper for the rest
     · Page hero / sub-tab patterns — full-bleed padding tighten

   These rules are scoped tightly (each one names the specific class
   it's overriding) so the legacy desktop layout stays intact for
   anyone NOT on phone size.
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {

  /* ── Status line — compress to high-signal only ──
     5 tallies side-by-side overflow the rail-less phone width. Keep
     pulse + ready + orders today + clock; hide the two mid-tallies
     (in-flight, catering inquiries). The detail value still lives on
     the Overview surface; the statusline is a glanceable header. */
  body.hq2-app .hq2-statusline {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
    gap: var(--s-3);
    font-size: 11px;
  }
  body.hq2-app .hq2-statusline > .hq2-sl-tally:nth-of-type(2),
  body.hq2-app .hq2-statusline > .hq2-sl-tally:nth-of-type(3) {
    /* Hide "in flight" and "catering inquiries" tallies. The remaining
       three (pulse-tally aside) — ready · orders today · clock —
       fit comfortably on a 320px viewport. */
    display: none;
  }
  body.hq2-app .hq2-sl-pulse { font-size: 11px; }

  /* The main column shrinks its top reservation since the statusline
     stays the same height; no change needed. */

  /* ── Overview KPI grid — 1 column at compact ──
     The existing rules go 6 → 3 → 2; we add a 1-col fallback for
     very narrow viewports where 2 columns make tiles unreadable.
     Tiles stay touch-friendly (min-height 88px). */
  body.hq2-app .hq2-kpis {
    gap: var(--s-2);
  }
  body.hq2-app .hq2-kpis > * {
    min-height: 88px;
  }

  /* Chart panels — the SVG is already responsive via viewBox +
     preserveAspectRatio. The wrapping panel needs a sensible height
     ceiling so two stacked charts don't dominate the viewport. */
  body.hq2-app .hq2-overview-chart-body {
    height: 180px;
    min-height: 0;
  }
  body.hq2-app .hq2-ovc-svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ── Range pills — scroll horizontally ──
     5 pills (today/7d/30d/90d/YTD) + 2px gaps + 14px side padding
     overflow on phone. Allow horizontal scroll so all are reachable
     without wrapping into a second row that breaks the masthead
     layout. */
  body.hq2-app .hq2-range-pills {
    max-width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.hq2-app .hq2-range-pills::-webkit-scrollbar { display: none; }
  body.hq2-app .hq2-range-pills button {
    flex-shrink: 0;
  }

  /* ── CRM customer table — card-like row collapse ──
     Desktop: 7-column grid (~830px minimum). Phone: collapse to
     [check] [name + email] [stage] and hide the secondary cells
     (LTV, orders, last-order, tags). Tapping a row opens the detail
     bottom sheet (Phase 3) which surfaces all the hidden fields. */
  body.hq2-app .hq2-crm-table .ct-head {
    display: none;
  }
  body.hq2-app .hq2-crm-table .ct-row {
    grid-template-columns: 28px 1fr auto;
    height: auto;
    min-height: 64px;
    padding: 10px 14px;
    align-items: center;
    gap: 4px 12px;
  }
  body.hq2-app .hq2-crm-table .ct-cell {
    padding: 0;
  }
  body.hq2-app .hq2-crm-table .ct-cell-check {
    padding: 0;
  }
  body.hq2-app .hq2-crm-table .ct-cell-name {
    min-width: 0;
  }
  body.hq2-app .hq2-crm-table .ct-cell-stage {
    justify-self: end;
    font-size: 10px;
  }
  /* Hide the four "secondary" cells; users see them in the detail
     bottom-sheet (Phase 3) when they tap a row. */
  body.hq2-app .hq2-crm-table .ct-cell-ltv,
  body.hq2-app .hq2-crm-table .ct-cell-orders,
  body.hq2-app .hq2-crm-table .ct-cell-last,
  body.hq2-app .hq2-crm-table .ct-cell-tags {
    display: none;
  }
  /* The selected/open indicator (gold left bar) stays useful. */
  body.hq2-app .hq2-crm-table .ct-row.is-open {
    box-shadow: inset 3px 0 0 var(--tc-navy);
  }

  /* ── Generic h-scroll fallback for any table that doesn't have
        a card-collapse path yet (yield, lots, ingredient-import,
        recipe-doctor, etc). Pages that already wrap their table in
        a `.hq2-...-wrap` get this behavior automatically when the
        wrapper sets overflow-x:auto; this rule catches the rest. ── */
  body.hq2-app .hq2-page table,
  body.hq2-app .hq2-page .hq2-table {
    /* If a raw <table> overflows, scroll instead of overflowing the
       body. The block-level wrapping ensures the table doesn't push
       the page wide. */
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Compact (≤380px) — single-column KPIs for one-handed phones ── */
@media (max-width: 380px) {
  body.hq2-app .hq2-kpis {
    grid-template-columns: 1fr;
  }
  /* Stack chart panels vertically (the existing 1100px rule already
     drops .hq2-charts-row to 1fr, so this is mostly a safety net. */
  body.hq2-app .hq2-charts-row {
    grid-template-columns: 1fr;
    gap: var(--s-3);
  }
  /* CRM rows: drop the stage pill on the narrowest phones so the
     name has full breathing room. */
  body.hq2-app .hq2-crm-table .ct-cell-stage {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════════
   END mobile surfaces. Final phase:
   · Phase 5 — swipe gestures, pull-to-refresh, keyboard avoidance,
     hover neutralization expansion, focus-visible polish
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   MOBILE TOUCH ERGONOMICS  (Phase 5 of the mobile rollout · 2026-05-18)
   ────────────────────────────────────────────────────────────────────
   The final polish layer. JS-driven primitives (swipe-to-dismiss,
   keyboard avoidance) live in hq2.js; this block handles CSS-only
   concerns:

     · Visible drag-state on bottom sheets (transform comes from JS,
       transition stays here)
     · Expanded @media (hover: none) coverage — phone Safari was
       still leaving stuck :hover states on rail icons, modal heads,
       and the cmdk row hover. Phase 1 covered the basics; this
       extends to every interactive surface that survives at phone
       size.
     · Focus-visible polish — bigger / brighter outlines on touch
       devices where the system can't draw its own ring.
     · :active feedback for tappable cards (cards aren't <button>s but
       behave like them when wrapped in <a>).
   ════════════════════════════════════════════════════════════════════ */

/* Swipe-drag transition — when JS sets a transform on an element with
   .is-dragging the transition is removed (so the drag feels 1:1). On
   release the class is dropped and the transform clears back to the
   stylesheet-defined open/closed state, with the .26s sheet-up easing. */
body.hq2-app .hq2-mdrawer.is-dragging,
body.hq2-app .hq2-detail-panel.is-dragging,
body.hq2-app .hq2-modal-overlay > .hq2-modal.is-dragging,
body.hq2-app .hq2-modal-mask .hq2-modal.is-dragging {
  transition: none !important;
}

/* Expanded hover neutralization — Phase 1 covered the basic buttons;
   this catches everything else that survives at phone size. */
@media (hover: none) {
  /* Mise rail icons (visible on tablet 641-960) */
  body.hq2-app .hq2-rail-icon:hover,
  body.hq2-app .hq2-rail-icon:hover svg {
    background: rgba(255, 255, 255, .06) !important;
    color: #fff !important;
    stroke: #fff !important;
    transform: none !important;
  }
  body.hq2-app .hq2-rail-icon.is-active:hover {
    background: var(--tc-gold) !important;
    color: var(--ink) !important;
  }
  body.hq2-app .hq2-rail-icon.is-active:hover svg { stroke: var(--ink) !important; }

  /* Tab bar — keep active gold; non-active stays muted white. */
  body.hq2-app .hq2-mtab-item:hover {
    color: rgba(255, 255, 255, .72);
  }
  body.hq2-app .hq2-mtab-item.is-active:hover {
    color: var(--tc-gold);
  }

  /* Drawer items + modal close + cmdk items */
  body.hq2-app .hq2-mdrawer-item:hover {
    background: var(--surface-2);
  }
  body.hq2-app .hq2-mdrawer-item.is-active:hover {
    background: var(--tc-navy);
  }
  body.hq2-app .hq2-modal-close:hover {
    background: transparent;
    color: var(--ink-3);
  }
  body.hq2-app .hq2-cmdk-item:hover {
    background: transparent;
  }
  body.hq2-app .hq2-cmdk-item.is-cursor {
    /* keyboard-cursor state still works on Bluetooth keyboards */
    background: var(--surface-2);
  }

  /* CRM table row hover — turn off the desktop hover so a tap doesn't
     leave the row painted as "hovered" until the next tap somewhere. */
  body.hq2-app .hq2-crm-table .ct-row:hover {
    background: var(--surface);
  }
  body.hq2-app .hq2-crm-table .ct-row.is-selected:hover {
    background: rgba(27, 26, 107, .04);
  }
  body.hq2-app .hq2-crm-table .ct-row.is-open:hover {
    background: rgba(27, 26, 107, .07);
  }

  /* Range pills — keep active visible, neutralize hover for inactive. */
  body.hq2-app .hq2-range-pills button:hover:not(.is-active) {
    color: var(--ink-3);
  }
}

/* :active feedback on tappable surfaces — gives users tactile-ish
   confirmation that the tap registered. Pairs well with the
   -webkit-tap-highlight-color set in Phase 1. */
@media (max-width: 640px) {
  body.hq2-app .hq2-btn:active { transform: scale(.97); }
  body.hq2-app .hq2-mdrawer-item:active { transform: scale(.98); }
  body.hq2-app .hq2-crm-table .ct-row:active { background: var(--surface-2); }
  body.hq2-app .hq2-cmdk-item:active { background: var(--surface-2); }
  body.hq2-app .hq2-pass-row:active { background: var(--surface-2); }
}

/* Focus-visible polish — make the focus ring brighter on touch
   devices since users may navigate with an attached Bluetooth
   keyboard. The default browser ring is often too subtle. */
@media (hover: none) {
  body.hq2-app *:focus-visible {
    outline: 2px solid var(--tc-navy-soft);
    outline-offset: 2px;
    border-radius: 4px;
  }
  body.hq2-app .hq2-btn:focus-visible,
  body.hq2-app .hq2-rail-icon:focus-visible,
  body.hq2-app .hq2-mtab-item:focus-visible,
  body.hq2-app .hq2-mdrawer-item:focus-visible {
    outline-color: var(--tc-gold);
    outline-offset: 3px;
  }
}

/* iOS bounce-scroll suppression on body — keeps the page from
   over-scrolling and revealing the white background behind the
   fixed tab bar / drawer. Only on phone; desktop scroll feels
   are unaffected. */
@media (max-width: 640px) {
  body.hq2-app {
    overscroll-behavior-y: contain;
  }
  body.hq2-app .hq2-main {
    overscroll-behavior-y: contain;
  }
}

/* ════════════════════════════════════════════════════════════════════
   END mobile touch ergonomics. The mobile rollout is complete:
   foundation → tab bar → overlays → surfaces → ergonomics.
   ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   SUPPLY CHAIN — comprehensive mobile pass  (2026-05-21)
   ────────────────────────────────────────────────────────────────────
   Covers every sub-page reached from the .hq2-fs-subnav under
   /hq2#/supplyChain — Overview, Count, Shopping, Log, Catalog,
   Receiving, Ingredients, Packaging, Demand forecast, Vendor pricing,
   Traceability. Goals:
     · The 11-tab subnav becomes a single horizontally-scrollable row
       so it doesn't eat 2-3 vertical rows on every page header.
     · Page heroes (eyebrow + h1 + sub) shrink so the toolbar lands
       above the fold on a 393x852 viewport.
     · Every section container clamps to viewport width and allows its
       children to shrink below their intrinsic min-content (the bug
       that pushed the Count scan-button off-screen).
     · FAB on Count + Shopping shrinks to a compact pill on tiny
       phones so it covers less of the list it floats above.
   ════════════════════════════════════════════════════════════════════ */

/* ── Subnav — single-row horizontal scroll on tablets AND phones ── */
@media (max-width: 880px) {
  body.hq2-app .hq2-hub-hero .hq2-fs-subnav,
  body.hq2-app .hq2-fs-hero-with-tabs .hq2-fs-subnav,
  body.hq2-app .hq2-qc-hero + .hq2-fs-subnav,
  body.hq2-app .hq2-fs-subnav {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
  }
  body.hq2-app .hq2-fs-subnav::-webkit-scrollbar { display: none; }
  body.hq2-app .hq2-fs-subnav .hq2-mkt-tab {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 6px 12px;
    font-size: 13px;
  }
}

/* ── Section container overflow safety ── */
@media (max-width: 880px) {
  body.hq2-app .hq2-qc,
  body.hq2-app .hq2-shop,
  body.hq2-app .hq2-supinv,
  body.hq2-app .hq2-trace,
  body.hq2-app .hq2-supply-grid,
  body.hq2-app .hq2-supply-panel,
  body.hq2-app .hq2-supply-vendors {
    min-width: 0;
    max-width: 100%;
  }
}

/* ── Phone-only hero compaction (≤640px) ── */
@media (max-width: 640px) {
  body.hq2-app .hq2-qc-hero,
  body.hq2-app .hq2-hub-hero {
    gap: 4px;
    padding: 4px 0 0;
  }
  body.hq2-app .hq2-qc-h1,
  body.hq2-app .hq2-hub-h1 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
  }
  body.hq2-app .hq2-qc-sub,
  body.hq2-app .hq2-hub-mission {
    font-size: 13px;
    line-height: 1.4;
  }
  body.hq2-app .hq2-hub-eyebrow {
    font-size: 10px;
  }
  /* The Count + Shopping subtitles are intentionally instructional but
     they double the hero height on a phone. Two lines max, ellipsis
     beyond — the full text still reads on tablet+. */
  body.hq2-app .hq2-qc-sub {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* ── Count + Shopping FAB — compact on phones, doesn't block the
      bottom item while still being one-thumb reachable. ── */
@media (max-width: 640px) {
  body.hq2-app .hq2-qc-fab-row {
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--bottom-nav-h, 64px) + 12px);
  }
  body.hq2-app .hq2-qc-fab {
    height: 44px;
    padding: 0 18px;
    font-size: 14px;
    box-shadow: 0 4px 14px rgba(31, 51, 96, 0.28);
  }
  /* Hide-on-scroll — JS toggles .is-tucked when the user is scrolling
     DOWN, so the FAB slides out of the way and reveals the last item.
     Reappears the moment the user scrolls up (or hits the top). */
  body.hq2-app .hq2-qc-fab-row.is-tucked {
    transform: translateY(120%);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
    pointer-events: none;
  }
  body.hq2-app .hq2-qc-fab-row {
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
  }
}

/* ── KPI / tile grids on supply hub — 2-col below 720px, 1-col on
      very narrow phones so the values don't truncate. ── */
/* On narrow phones (≤480px) stack the KPI strip + overview tiles to a
   SINGLE column. Two columns at 393px gave each tile ~175px which was
   too narrow for labels like "VENDORS AFFECTED" or values like
   "$5.99" to read in full — the user was rotating to landscape just
   to access them. One column per tile gives each label/value full
   viewport width. */
@media (max-width: 480px) {
  body.hq2-app .hq2-supply-kpis {
    grid-template-columns: 1fr;
  }
  body.hq2-app .hq2-ovr-tiles {
    grid-template-columns: 1fr;
  }
  body.hq2-app .hq2-ovr-tile { padding: 12px 14px; }
  body.hq2-app .hq2-ovr-tile b { font-size: 22px; }
  body.hq2-app .hq2-supply-kpi { padding: 12px 14px; }
}

/* ── Vendor cards on supply hub — full-width, taller tap targets,
      no horizontal scroll on the items inside. ── */
@media (max-width: 640px) {
  body.hq2-app .hq2-supply-vendor {
    padding: 12px 14px;
  }
  body.hq2-app .hq2-supply-vendor-items {
    font-size: 12px;
  }
  body.hq2-app .hq2-supply-item {
    flex-wrap: wrap;
    gap: 2px 8px;
  }
}

/* ── Tables that don't naturally fit a phone (Catalog, Pricing,
      Receiving log, Traceability lineage) — wrap in horizontal scroll
      instead of forcing the page wider than the viewport. ── */
@media (max-width: 880px) {
  body.hq2-app .hq2-supinv,
  body.hq2-app .hq2-trace {
    overflow-x: hidden;
  }
  body.hq2-app .hq2-supinv-table,
  body.hq2-app .hq2-supinv-table-pkg {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Tighten .hq2-page padding on phones so the toolbars + tabs get
      a few more pixels to themselves. ── */
@media (max-width: 480px) {
  body.hq2-app .hq2-page { padding: 12px 12px 28px; }
}

/* ── Universal viewport overflow guard on every supply-chain section
      root. The grid + flex children inside each one have explicit
      min-width: 0 constraints (see earlier in this file), but this is
      the last-resort clip so any new child that misses the constraint
      pattern still can't blow the page wider than the viewport. ── */
body.hq2-app .hq2-qc,
body.hq2-app .hq2-shop,
body.hq2-app .hq2-supinv,
body.hq2-app .hq2-trace,
body.hq2-app .hq2-supply-grid,
body.hq2-app .hq2-supply-kpis,
body.hq2-app .hq2-ovr-tiles,
body.hq2-app .hq2-supply-panel,
body.hq2-app .hq2-supply-vendors,
body.hq2-app .hq2-act-list {
  overflow-x: hidden;
  max-width: 100%;
}

/* Also extend the .hq2-page overflow-x: hidden up to ≤880px so iPad-
   in-portrait (810px) and small landscape phones (≤880px) get the
   same clipping treatment as a 393px phone. */
@media (max-width: 880px) {
  body.hq2-app .hq2-main { overflow-x: hidden; }
  body.hq2-app .hq2-page { overflow-x: hidden; max-width: 100%; }
}

/* ════════════════════════════════════════════════════════════════════
   TOP-LEVEL HORIZONTAL CLIP  (2026-05-22)
   ────────────────────────────────────────────────────────────────────
   Belt-and-suspenders guard. Even with .hq2-main / .hq2-page clipping,
   any escape (position:fixed child, viewport-units inside a margin'd
   element, an off-by-1px overflow from a sub-pixel rounding) could
   still let the page horizontally scroll. Clip at html / body / shell
   so the user can never scroll the window itself sideways on a phone
   — the only legitimate horizontal scroll surfaces are explicitly
   opted-in containers (.hq2-fs-subnav, .hq2-range-pills, tables).
   ════════════════════════════════════════════════════════════════════ */
@media (max-width: 880px) {
  html, body.hq2-app, body.hq2-app .hq2-shell {
    max-width: 100vw;
    overflow-x: clip;
  }
  /* Fallback for browsers without `overflow-x: clip` (older Safari) —
     `hidden` does almost the same job; it also creates a scroll
     containing block which is the trade-off. */
  @supports not (overflow-x: clip) {
    html, body.hq2-app, body.hq2-app .hq2-shell {
      overflow-x: hidden;
    }
  }
}

/* ── Quick count surfaces — hard clamp to viewport on phones ── */
@media (max-width: 880px) {
  body.hq2-app .hq2-qc,
  body.hq2-app .hq2-qc-toolbar,
  body.hq2-app .hq2-qc-tabs,
  body.hq2-app .hq2-qc-sort,
  body.hq2-app .hq2-qc-list,
  body.hq2-app .hq2-qc-row {
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }
  /* Kind tabs explicit fit — 1fr/1fr only does its job when the grid
     container itself has a usable width. The min-width: 0 above lets
     the implicit min-content of each button shrink, but the tab text
     ("Ingredients", "Packaging") is short enough that text-overflow
     isn't needed; we just allow the buttons to compress padding. */
  body.hq2-app .hq2-qc-tab {
    min-width: 0;
    padding: 0 8px;
    font-size: 13px;
    height: 38px;
  }
  /* Sort chips — already horizontally scrollable. Keep them visually
     contained to viewport width so the scroll container doesn't push
     the page wider. */
  body.hq2-app .hq2-qc-sort {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}

/* ════════════════════════════════════════════════════════════════════
   MARKET MODE — pop-up till
   ──────────────────────────────────────────────────────────────────
   Mobile-first. Layout:
     ┌─────────────────────────────────────┐
     │ shift chip (sticky top)              │ ← totals + end-shift
     ├─────────────────────────────────────┤
     │ [meals] [bakery] tabs                │
     ├─────────────────────────────────────┤
     │ tile grid                            │
     │  ┌────┐ ┌────┐                       │
     │  │meal│ │meal│                       │
     │  └────┘ └────┘                       │
     │ ...scrollable...                     │
     ├─────────────────────────────────────┤
     │ recent tickets (compact)             │
     ├─────────────────────────────────────┤
     │ cart (sticky bottom)                 │
     │  - line · - · qty · + · $            │
     │  totals + tax                        │
     │  [clear] [cash] [card]               │
     └─────────────────────────────────────┘
   In ?popout=market mode body.hq2-driver-popout strips the rail/
   masthead so this fills the screen. */

body.hq2-app .hq2-market {
  min-height: calc(100vh - var(--mh-h, 56px));
  background: var(--bg);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
}
body.hq2-app .hq2-market-loading {
  padding: 40px 16px;
  color: var(--ink-4);
  text-align: center;
  font-size: 14px;
}

/* ── open-shift form ─────────────────────────────────────────────── */
body.hq2-app .hq2-market-open {
  max-width: 520px;
  margin: 0 auto;
  padding: 24px 16px 48px;
}
body.hq2-app .hq2-market-open-h {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: var(--tc-navy);
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
body.hq2-app .hq2-market-open-d {
  font-size: 14px;
  color: var(--ink-3);
  margin: 0 0 24px;
  line-height: var(--lh-snug);
}
body.hq2-app .hq2-market-open-float {
  display: block;
  margin: 0 0 20px;
}
body.hq2-app .hq2-market-open-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}
body.hq2-app .hq2-market-open-float input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  font-family: var(--font-ui);
  box-sizing: border-box;
}
body.hq2-app .hq2-market-open-float input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .12);
}
body.hq2-app .hq2-market-open-float small {
  display: block;
  margin-top: 6px;
  color: var(--ink-4);
  font-size: 12px;
}

/* ZIP input (open-shift form) — drives tax-rate lookup. */
body.hq2-app .hq2-market-open-zip { display: block; margin: 0 0 20px; }
body.hq2-app .hq2-market-open-zip input {
  width: 140px;
  height: 52px;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
  letter-spacing: .04em;
}
body.hq2-app .hq2-market-open-zip input:focus {
  outline: none;
  border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .12);
}
body.hq2-app .hq2-market-open-zip small {
  display: block; margin-top: 6px; color: var(--ink-4); font-size: 12px;
}

/* Bill-breakdown float input — counts per denomination + live total. */
body.hq2-app .hq2-market-open-cash { display: block; margin: 0 0 20px; }
body.hq2-app .hq2-market-open-bills {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin: 6px 0 4px;
}
body.hq2-app .hq2-market-open-bills label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: stretch;
  min-width: 0;  /* let the grid shrink below input's intrinsic min-width */
}
body.hq2-app .hq2-market-open-bills label span {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .04em;
  text-align: center;
}
body.hq2-app .hq2-market-open-bills input {
  width: 100%;
  min-width: 0;
  height: 44px;
  padding: 0 6px;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 10px;
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}
body.hq2-app .hq2-market-open-bills input:focus {
  outline: none; border-color: var(--tc-navy);
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .12);
}
body.hq2-app .hq2-market-open-cash small {
  display: block; margin-top: 6px; color: var(--ink-3);
  font-size: 12.5px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 420px){
  body.hq2-app .hq2-market-open-bills { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  body.hq2-app .hq2-market-open-bills input { padding: 0 4px; font-size: 15px; }
  body.hq2-app .hq2-market-open-bills label span { font-size: 9.5px; }
}
body.hq2-app .hq2-market-open-stock {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 24px;
}
body.hq2-app .hq2-market-open-stock summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-2);
  list-style: none;
  padding: 4px 0;
}
body.hq2-app .hq2-market-open-stock summary::-webkit-details-marker { display: none; }
body.hq2-app .hq2-market-open-hint {
  font-weight: 400;
  color: var(--ink-4);
  font-size: 12px;
  margin-left: 4px;
}
body.hq2-app .hq2-market-open-stock-section {
  margin: 12px 0 4px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
body.hq2-app .hq2-market-open-stock-section:first-of-type {
  border-top: none;
  padding-top: 0;
}
body.hq2-app .hq2-market-open-stock-section h3 {
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 8px;
}
body.hq2-app .hq2-market-stock-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
body.hq2-app .hq2-market-stock-name {
  flex: 1;
  font-size: 14px;
  color: var(--ink-2);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.hq2-app .hq2-market-stock-qty {
  width: 72px;
  height: 38px;
  padding: 0 10px;
  font-size: 16px;
  text-align: right;
  background: var(--surface-2);
  border: 1px solid var(--rule-strong);
  border-radius: 8px;
  font-family: var(--font-ui);
  box-sizing: border-box;
}
body.hq2-app .hq2-market-open-cta {
  width: 100%;
  height: 56px;
  font-size: 16px;
  font-weight: 800;
  border-radius: 14px;
}
body.hq2-app .hq2-market-open-foot {
  margin: 16px 0 0;
  color: var(--ink-4);
  font-size: 12px;
  text-align: center;
}
body.hq2-app .hq2-market-open-foot code {
  font-family: var(--font-mono);
  background: var(--tc-cream-2);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11.5px;
  color: var(--tc-navy);
}

/* ── shift chip (sticky top) ─────────────────────────────────────── */
body.hq2-app .hq2-market-chip {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--tc-navy);
  color: #fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
body.hq2-app .hq2-market-chip-totals {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.hq2-app .hq2-market-chip-total {
  font-size: 20px;
  font-weight: 800;
  font-family: var(--font-display);
  color: #fff;
  letter-spacing: -.01em;
}
body.hq2-app .hq2-market-chip-meta {
  font-size: 11.5px;
  color: rgba(255,255,255,.78);
  font-weight: 500;
}
body.hq2-app .hq2-market-chip-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
body.hq2-app .hq2-market-chip-pill {
  background: rgba(255,255,255,.10);
  color: #fff;
  border: 1px dashed rgba(255,255,255,.3);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}
body.hq2-app .hq2-market-chip-pill:hover {
  background: rgba(255,255,255,.18);
  border-style: solid;
}
/* Stripe Terminal reader status pill — only rendered when running
   inside the Capacitor native shell (see renderTerminalReaderPill). */
body.hq2-app .hq2-market-chip-pill--reader.is-connected {
  background: rgba(46, 134, 87, .25);
  border-color: rgba(120, 220, 170, .55);
  border-style: solid;
}
body.hq2-app .hq2-market-chip-pill--reader.is-connecting,
body.hq2-app .hq2-market-chip-pill--reader.is-searching {
  background: rgba(255,255,255,.15);
  border-style: solid;
}
body.hq2-app .hq2-market-chip-pill--reader.is-error,
body.hq2-app .hq2-market-chip-pill--reader.is-disconnected {
  background: rgba(220, 90, 70, .25);
  border-color: rgba(255, 160, 140, .6);
  border-style: solid;
}

/* Pair-reader modal sheet list */
body.hq2-app .hq2-market-pair-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  max-height: 240px;
  overflow-y: auto;
}
body.hq2-app .hq2-market-pair-reader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  background: var(--surface-2);
  border-radius: 10px;
  margin-bottom: 8px;
}
body.hq2-app .hq2-market-pair-reader-info {
  flex: 1;
  min-width: 0;
  font-family: var(--font-ui);
  font-size: 13px;
}
body.hq2-app .hq2-market-pair-reader-info b {
  color: var(--ink);
  font-weight: 700;
}
body.hq2-app .hq2-market-pair-reader-info small {
  color: var(--ink-4);
  font-size: 11.5px;
  margin-left: 4px;
}
body.hq2-app .hq2-market-pair-connect {
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
}
body.hq2-app .hq2-market-pair-connect:hover { background: var(--tc-navy-deep); }
body.hq2-app .hq2-market-pair-connect:disabled { opacity: .6; cursor: not-allowed; }
body.hq2-app .hq2-market-pair-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
body.hq2-app .hq2-market-pair-actions .hq2-btn {
  flex: 1;
}
body.hq2-app .hq2-market-pair-disconnect {
  background: var(--surface);
  color: var(--danger);
  border: 1px solid var(--danger);
}
body.hq2-app .hq2-market-pair-disconnect:hover {
  background: var(--danger-bg, rgba(220, 53, 69, .08));
}

body.hq2-app .hq2-market-chip-close {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  font-family: var(--font-ui);
  cursor: pointer;
  white-space: nowrap;
}
body.hq2-app .hq2-market-chip-close:hover {
  background: rgba(255,255,255,.18);
}

/* ── tabs ────────────────────────────────────────────────────────── */
body.hq2-app .hq2-market-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 56px; /* under the chip */
  z-index: 5;
}
body.hq2-app .hq2-market-tab {
  flex: 1;
  height: 38px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-family: var(--font-ui);
}
body.hq2-app .hq2-market-tab.is-active {
  background: var(--tc-cream-2);
  color: var(--tc-navy);
}

/* ── pending banner ──────────────────────────────────────────────── */
body.hq2-app .hq2-market-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--warning-bg);
  color: var(--ink-2);
  font-size: 13px;
  border-bottom: 1px solid var(--rule);
}
body.hq2-app .hq2-market-banner.is-warn {
  background: var(--danger-bg);
  color: var(--danger);
  font-weight: 600;
}
body.hq2-app .hq2-market-banner-action {
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  font-family: var(--font-ui);
}

/* ── tile grid ───────────────────────────────────────────────────── */
body.hq2-app .hq2-market-grid {
  display: grid;
  /* Text-only tiles — denser grid. The operator scans by name not by
     photo, so packing 3 per row on a phone (was 2) means a lot less
     scrolling to reach a tile that's mid-menu. Earlier image tiles
     forced 2 columns on phone because the photos were the focal
     point; now that the name IS the focal point, we can shrink and
     pack tighter. */
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  padding: 8px 8px 16px;
  flex: 1;
  align-content: start;
}
body.hq2-app .hq2-market--has-cart {
  padding-bottom: 280px;
}
@media (min-width: 480px) {
  body.hq2-app .hq2-market-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 720px) {
  body.hq2-app .hq2-market-grid { grid-template-columns: repeat(5, 1fr); }
}
@media (min-width: 960px) {
  body.hq2-app .hq2-market-grid { grid-template-columns: repeat(6, 1fr); }
}
body.hq2-app .hq2-market-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  overflow: hidden;
  text-align: center;
  cursor: pointer;
  font-family: var(--font-ui);
  padding: 10px 6px;
  min-height: 78px;
  gap: 3px;
  transition: transform .08s ease, box-shadow .12s ease;
}
body.hq2-app .hq2-market-tile:hover {
  box-shadow: 0 2px 8px rgba(15, 12, 32, .08);
}
body.hq2-app .hq2-market-tile:active {
  transform: scale(.96);
}
body.hq2-app .hq2-market-tile.is-out {
  opacity: .5;
  cursor: not-allowed;
}
/* Image element retained for backward-compat but hidden — the new
   tile design is text-only. */
body.hq2-app .hq2-market-tile-img {
  display: none !important;
}
body.hq2-app .hq2-market-tile-body {
  display: contents;
}
body.hq2-app .hq2-market-tile-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.hq2-app .hq2-market-tile-price {
  font-size: 14px;
  font-weight: 800;
  color: var(--tc-navy);
  font-family: var(--font-display);
}
body.hq2-app .hq2-market-tile-left {
  font-size: 10px;
  color: var(--ink-4);
  font-weight: 600;
}
body.hq2-app .hq2-market-tile.is-out .hq2-market-tile-left {
  color: var(--danger);
  font-weight: 700;
}

/* ── search bar ─────────────────────────────────────────────────────
   Sits between the tabs and the tile grid. Filters tiles by name as
   the operator types — useful once menus grow past 8-10 items where
   scanning + scrolling gets slow. Empty input shows everything. */
body.hq2-app .hq2-market-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
}
body.hq2-app .hq2-market-search-input {
  flex: 1;
  height: 36px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  padding: 0 14px;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--ink);
  outline: none;
}
body.hq2-app .hq2-market-search-input:focus {
  border-color: var(--tc-navy);
  background: #fff;
}
body.hq2-app .hq2-market-search-input::placeholder {
  color: var(--ink-5);
}
body.hq2-app .hq2-market-search-clear {
  width: 28px; height: 28px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--surface-2);
  color: var(--ink-4);
  font-size: 16px;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex: 0 0 28px;
}
body.hq2-app .hq2-market-search-clear:hover {
  background: var(--rule);
  color: var(--ink-2);
}

/* ── empty states ────────────────────────────────────────────────── */
body.hq2-app .hq2-market-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-4);
}
body.hq2-app .hq2-market-empty--grid {
  grid-column: 1 / -1;
  background: var(--surface);
  border: 1px dashed var(--rule-strong);
  border-radius: 12px;
  padding: 28px 16px;
}
body.hq2-app .hq2-market-empty code {
  font-family: var(--font-mono);
  background: var(--tc-cream-2);
  padding: 1px 5px;
  border-radius: 4px;
  font-size: 11.5px;
}

/* ── recent tickets rail (between grid and cart) ─────────────────── */
body.hq2-app .hq2-market-tickets {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  padding: 10px 14px 6px;
}
body.hq2-app .hq2-market-tickets h3 {
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 6px;
}
body.hq2-app .hq2-market-tickets ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 156px;
  overflow-y: auto;
}
body.hq2-app .hq2-market-tk {
  display: grid;
  grid-template-columns: 64px 1fr auto auto;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  padding: 6px 8px;
  background: var(--surface-2);
  border-radius: 8px;
  border-left: 3px solid var(--rule-strong);
}
body.hq2-app .hq2-market-tk.is-pending {
  border-left-color: var(--warning);
  background: var(--warning-bg);
}
body.hq2-app .hq2-market-tk.is-paid {
  border-left-color: var(--success);
}
body.hq2-app .hq2-market-tk.is-voided {
  opacity: .6;
  text-decoration: line-through;
}
body.hq2-app .hq2-market-tk-amt {
  font-weight: 800;
  color: var(--tc-navy);
  font-family: var(--font-display);
  font-size: 13px;
}
body.hq2-app .hq2-market-tk-items {
  color: var(--ink-3);
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.hq2-app .hq2-market-tk-status {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-4);
}
body.hq2-app .hq2-market-tk.is-paid .hq2-market-tk-status { color: var(--success); }
body.hq2-app .hq2-market-tk.is-pending .hq2-market-tk-status { color: var(--warning); }
body.hq2-app .hq2-market-tk-void {
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-size: 16px;
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
body.hq2-app .hq2-market-tk-void:hover { background: var(--danger-bg); color: var(--danger); }
body.hq2-app .hq2-market-tk-match {
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}

/* ── cart (sticky bottom) ────────────────────────────────────────── */
body.hq2-app .hq2-market-cart {
  position: sticky;
  bottom: 0;
  z-index: 6;
  background: var(--surface);
  border-top: 2px solid var(--rule-strong);
  padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -4px 14px rgba(15, 12, 32, .06);
}
/* Popout (mobile/home-screen) — sticky was unreliable on iOS PWA
   (cart rendered mid-viewport with tiles visible above and below
   instead of pinning to the viewport bottom). Force position:fixed
   so it's deterministic. The 280px section-level padding-bottom
   below ensures content above the cart isn't covered. */
body.hq2-driver-popout .hq2-market-cart {
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  box-shadow: 0 -1px 0 rgba(15, 12, 32, .12);   /* thin border, not a floating shadow */
}
/* Empty-cart footer — flush and minimal. No box-shadow, no
   prominent border, no big padding. The operator sees it as a
   thin instruction strip at the bottom, not a floating card. */
body.hq2-app .hq2-market-cart--empty {
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  background: transparent;
  border-top: 1px solid var(--rule);
  box-shadow: none;
}
body.hq2-app .hq2-market-cart-empty {
  color: var(--ink-4);
  font-size: 12px;
  font-style: italic;
  display: block;
  margin-top: 4px;
}
/* When cart is empty, the +custom-item pill is the only interactive
   element so it stays prominent — but the surrounding container
   blends in. */
body.hq2-app .hq2-market-cart--empty .hq2-market-cart-pills {
  margin-bottom: 0;
  justify-content: center;
}
body.hq2-app .hq2-market-cart-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  max-height: 30vh;
  overflow-y: auto;
}
body.hq2-app .hq2-market-cart-line {
  display: grid;
  grid-template-columns: 24px 1fr 28px 28px 28px auto;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  font-size: 13px;
}
/* On a phone the till has a tiny tile grid to begin with — once the
   cart fills with 5+ items the line list pushes the menu offscreen
   entirely. In popout mode cap the list to ~18vh (≈ 3 visible rows
   with a scrollbar) and tighten line padding so the cart panel
   doesn't swallow the screen. The operator scrolls within the list
   to reach later items rather than the whole cart expanding. */
body.hq2-driver-popout .hq2-market-cart-list {
  max-height: 18vh;
}
body.hq2-driver-popout .hq2-market-cart-line {
  padding: 2px 0;
  font-size: 12.5px;
}
body.hq2-app .hq2-market-cart-rm {
  background: transparent;
  border: none;
  color: var(--ink-4);
  font-size: 18px;
  width: 22px; height: 22px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
}
body.hq2-app .hq2-market-cart-rm:hover { background: var(--danger-bg); color: var(--danger); }
body.hq2-app .hq2-market-cart-name {
  color: var(--ink);
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
body.hq2-app .hq2-market-cart-qty {
  width: 28px; height: 28px;
  background: var(--tc-cream-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  color: var(--ink-2);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
body.hq2-app .hq2-market-cart-qty:active { background: var(--rule); }
body.hq2-app .hq2-market-cart-qty-val {
  text-align: center;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-cart-amt {
  font-weight: 700;
  color: var(--tc-navy);
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-family: var(--font-display);
}
body.hq2-app .hq2-market-cart-totals {
  border-top: 1px solid var(--rule);
  padding-top: 8px;
  margin-bottom: 10px;
}
body.hq2-app .hq2-market-cart-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  padding: 2px 0;
}
body.hq2-app .hq2-market-cart-row--total {
  font-size: 16px;
  font-weight: 800;
  color: var(--tc-navy);
  padding-top: 4px;
  border-top: 1px dashed var(--rule);
  margin-top: 4px;
}
body.hq2-app .hq2-market-cart-actions {
  display: grid;
  grid-template-columns: 80px 1fr 1fr;
  gap: 8px;
}
body.hq2-app .hq2-market-cart-clear {
  background: var(--surface-2);
  color: var(--ink-3);
  border: 1px solid var(--rule-strong);
  border-radius: 12px;
  height: 52px;
  font-size: 13px;
  font-weight: 700;
}
body.hq2-app .hq2-market-cart-cash {
  background: var(--success);
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 52px;
  font-size: 15px;
  font-weight: 800;
}
body.hq2-app .hq2-market-cart-cash:hover { background: #246b46; }
body.hq2-app .hq2-market-cart-card {
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 52px;
  font-size: 15px;
  font-weight: 800;
}
body.hq2-app .hq2-market-cart-card:hover { background: var(--tc-navy-deep); }
body.hq2-app .hq2-market-cart-cash:disabled,
body.hq2-app .hq2-market-cart-card:disabled,
body.hq2-app .hq2-market-cart-clear:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* ── popout mode: market till fills the screen ─────────────────────
   The default body.hq2-driver-popout rule keeps a 12px padding on
   .hq2-page so the driver popout can breathe. Market mode wants to
   be full-bleed — kill that padding entirely when the route is
   hq2-page--market (added by renderPage in scripts/hq2.js). */
body.hq2-driver-popout .hq2-page--market,
body.hq2-app .hq2-page--market {
  padding: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  width: 100% !important;
  height: auto !important;
  overflow: visible !important;
}
body.hq2-driver-popout .hq2-market {
  min-height: 0 !important;
}
/* Market popout — also drop the shell min-height: 100vh that the
   driver popout needs for long route lists but creates a cream
   strip under the market till when only a few tiles are stocked.
   Scoped to hq2-market-popout (set alongside hq2-driver-popout when
   ?popout=market) so the driver popout is untouched. */
body.hq2-market-popout .hq2-shell {
  min-height: 0 !important;
}
body.hq2-market-popout .hq2-market-grid {
  flex: 0 0 auto;
}
/* On iPhone (Dynamic Island / notch) the chip's content was rendering
   partially behind the system pill — the "$0.00" total disappeared
   into the safe-area zone and only the meta line + buttons were
   visible. Two-pronged fix:
     1. align-items: flex-end pins all chip content to the BOTTOM of
        the chip box, well clear of the safe-area inset on top.
     2. min-height guarantees the chip is tall enough that the
        bottom-anchored content has room to breathe below the
        Dynamic Island, even on the tallest iOS pills. */
body.hq2-driver-popout .hq2-market-chip {
  top: 0;
  align-items: flex-end;
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-bottom: 10px;
  min-height: calc(54px + env(safe-area-inset-top, 0px));
}
body.hq2-driver-popout .hq2-market-tabs {
  /* Drawer panel is no longer sticky (see above) so tabs stick
     directly under the chip — 8 + 38 + 10 = 56px chip height plus
     the safe-area inset. */
  top: calc(56px + env(safe-area-inset-top, 0px));
}

/* ── cash tender modal ──────────────────────────────────────────────
   Appears when the operator taps the cash button. Quick-amount tiles
   let them tap the bill the customer handed without typing. The
   change number is rendered in big numerals — that's the whole point.
   The till does the math; the operator just hands change. */
body.hq2-app .hq2-market-tender-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .55);
  display: grid;
  place-items: end center;
  z-index: 120;
  padding: 0;
}
@media (min-width: 540px) {
  body.hq2-app .hq2-market-tender-overlay { place-items: center; padding: 16px; }
}
body.hq2-app .hq2-market-tender-card {
  width: 100%;
  max-width: 480px;
  background: #FFFFFF;
  border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -10px 40px rgba(15, 12, 32, .3);
  font-family: 'Inter', sans-serif;
}
@media (min-width: 540px) {
  body.hq2-app .hq2-market-tender-card { border-radius: 22px; }
}
body.hq2-app .hq2-market-tender-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
body.hq2-app .hq2-market-tender-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #FAF9F4;
  border: 1px solid rgba(15, 12, 32, .07);
  font-size: 18px;
  color: #4D4E70;
  cursor: pointer;
  flex: 0 0 32px;
  line-height: 1;
  padding: 0;
}
body.hq2-app .hq2-market-tender-head h3 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1B1A6B;
  letter-spacing: -.01em;
}
body.hq2-app .hq2-market-tender-due {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: #4D4E70;
}
body.hq2-app .hq2-market-tender-quicks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
body.hq2-app .hq2-market-tender-quick {
  height: 56px;
  background: #FAF9F4;
  border: 1.5px solid rgba(15, 12, 32, .07);
  border-radius: 14px;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #17182A;
  cursor: pointer;
  padding: 0 8px;
  font-variant-numeric: tabular-nums;
  transition: transform .08s ease, background .12s ease;
}
body.hq2-app .hq2-market-tender-quick:active { transform: scale(.96); }
body.hq2-app .hq2-market-tender-quick.is-on {
  background: #1B1A6B;
  color: #fff;
  border-color: #1B1A6B;
}
body.hq2-app .hq2-market-tender-custom { margin: 0 0 12px; }
body.hq2-app .hq2-market-tender-custom label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #4D4E70;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}
body.hq2-app .hq2-market-tender-input {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  font-size: 22px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
  color: #17182A;
  background: #fff;
  border: 1.5px solid #1B1A6B;
  border-radius: 12px;
  box-sizing: border-box;
}
body.hq2-app .hq2-market-tender-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .15);
}
body.hq2-app .hq2-market-tender-status {
  margin: 4px 0 16px;
  padding: 14px 16px;
  border-radius: 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
body.hq2-app .hq2-market-tender-status.is-idle {
  background: #FAF9F4;
  border: 1px dashed rgba(15, 12, 32, .14);
  justify-content: center;
}
body.hq2-app .hq2-market-tender-status.is-idle .hq2-market-tender-status-lbl {
  font-size: 13px; color: #6B6B85; font-style: italic;
}
body.hq2-app .hq2-market-tender-status.is-ok {
  background: #E6F4EC;
  border: 1px solid rgba(46, 134, 87, .2);
}
body.hq2-app .hq2-market-tender-status.is-short {
  background: #FBECEC;
  border: 1px solid rgba(179, 58, 26, .2);
}
body.hq2-app .hq2-market-tender-status-lbl {
  font-size: 13px;
  font-weight: 700;
  color: #2C2D45;
  text-transform: uppercase;
  letter-spacing: .04em;
}
body.hq2-app .hq2-market-tender-status.is-ok .hq2-market-tender-status-lbl { color: #2E8657; }
body.hq2-app .hq2-market-tender-status.is-short .hq2-market-tender-status-lbl { color: #B33A1A; }
body.hq2-app .hq2-market-tender-status-val {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 32px;
  font-weight: 900;
  color: #2E8657;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
body.hq2-app .hq2-market-tender-status.is-short .hq2-market-tender-status-val { color: #B33A1A; }

/* Bill breakdown under the change number — "give: 1× $10 + 1× $5 + 4× $1 + 2× 25¢" */
body.hq2-app .hq2-market-tender-breakdown {
  margin: -10px 0 14px;
  padding: 10px 12px;
  background: #F2EEE5;
  border: 1px dashed rgba(15, 12, 32, .12);
  border-radius: 10px;
  font-size: 12.5px;
  color: #2C2D45;
  font-weight: 600;
  line-height: 1.6;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
body.hq2-app .hq2-market-tender-bill {
  display: inline-block;
  padding: 3px 8px;
  background: #fff;
  border: 1px solid rgba(15, 12, 32, .07);
  border-radius: 8px;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-tender-bill b {
  color: #1B1A6B;
  font-weight: 800;
  margin-right: 2px;
}
body.hq2-app .hq2-market-tender-actions {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 10px;
}
body.hq2-app .hq2-market-tender-cancel {
  background: #FAF9F4;
  color: #4D4E70;
  border: 1px solid rgba(15, 12, 32, .14);
  border-radius: 12px;
  height: 52px;
  font-size: 14px;
  font-weight: 700;
}
body.hq2-app .hq2-market-tender-done {
  background: #2E8657;
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 52px;
  font-size: 15px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-tender-done:hover { background: #246b46; }
body.hq2-app .hq2-market-tender-done:disabled {
  background: rgba(15, 12, 32, .07);
  color: #6B6B85;
  cursor: not-allowed;
}

/* ── end-of-shift modal — per-item breakdown + drawer math ───────── */
body.hq2-app .hq2-market-end-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 32, .55);
  display: grid;
  place-items: center;
  z-index: 110;
  padding: 16px;
  overflow-y: auto;
}
body.hq2-app .hq2-market-end-card {
  width: 100%;
  max-width: 460px;
  background: #FFFFFF;
  border-radius: 18px;
  padding: 22px 22px calc(22px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 20px 60px rgba(15, 12, 32, .3);
  font-family: 'Inter', sans-serif;
  max-height: 92vh;
  overflow-y: auto;
}
body.hq2-app .hq2-market-end-card h2 {
  margin: 0 0 4px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #1B1A6B;
  letter-spacing: -.01em;
}
body.hq2-app .hq2-market-end-sub {
  font-size: 13px;
  color: #6B6B85;
  margin-bottom: 16px;
}
body.hq2-app .hq2-market-end-dl { margin: 0 0 12px; }
body.hq2-app .hq2-market-end-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  font-size: 14px;
  color: #2C2D45;
}
body.hq2-app .hq2-market-end-row + .hq2-market-end-row {
  border-top: 1px solid rgba(15, 12, 32, .07);
}
body.hq2-app .hq2-market-end-row b {
  color: #1B1A6B;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-end-row.is-total {
  font-size: 16px;
  border-top: 2px dashed rgba(15, 12, 32, .14);
  padding-top: 10px;
  margin-top: 6px;
}
body.hq2-app .hq2-market-end-drawer {
  margin: 14px 0;
  padding: 14px;
  background: #FAF9F4;
  border-radius: 12px;
  border: 1px solid rgba(15, 12, 32, .07);
}
body.hq2-app .hq2-market-end-drawer-lbl {
  font-size: 11px;
  font-weight: 800;
  color: #6B6B85;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 4px;
}
body.hq2-app .hq2-market-end-drawer-v {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #1B1A6B;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-end-drawer small {
  display: block;
  margin-top: 4px;
  color: #6B6B85;
  font-size: 11.5px;
}
body.hq2-app .hq2-market-end-h3 {
  font-size: 11px;
  font-weight: 800;
  color: #4D4E70;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 14px 0 8px;
}
body.hq2-app .hq2-market-end-items {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 4px;
}
body.hq2-app .hq2-market-end-items li {
  display: flex;
  gap: 10px;
  padding: 8px 12px;
  background: #FAF9F4;
  border-radius: 8px;
  font-size: 13.5px;
  color: #17182A;
}
body.hq2-app .hq2-market-end-qty {
  font-weight: 800;
  color: #1B1A6B;
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}
body.hq2-app .hq2-market-end-empty {
  margin: 0 0 16px;
  padding: 12px;
  color: #6B6B85;
  font-size: 13px;
  text-align: center;
  background: #FAF9F4;
  border-radius: 8px;
}
body.hq2-app .hq2-market-end-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
body.hq2-app .hq2-market-end-back {
  background: #FAF9F4;
  color: #2C2D45;
  border: 1px solid rgba(15, 12, 32, .14);
  border-radius: 12px;
  height: 48px;
  font-size: 14px;
  font-weight: 700;
}
body.hq2-app .hq2-market-end-confirm {
  background: #B33A1A;
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 48px;
  font-size: 14px;
  font-weight: 800;
}
body.hq2-app .hq2-market-end-confirm:hover { background: #8a2c13; }

/* ── QR-pay modal (real Stripe Checkout via QR code) ──────────────
   Mirrors the demo's modal but powered by a live Stripe Checkout
   Session URL. The QR image is generated client-side via api.qrserver.com
   for simplicity — swap to a local QR lib if reliability becomes a
   concern.

   Three states:
     creating → spinner ("preparing payment…")
     waiting  → big QR + pulsing dot
     paid     → green checkmark + amount + "next customer →" */
body.hq2-app .hq2-market-qr-overlay {
  position: fixed; inset: 0;
  background: rgba(15, 12, 32, .85);
  display: grid;
  place-items: center;
  z-index: 140;
  padding: 16px;
  overflow-y: auto;
}
body.hq2-app .hq2-market-qr-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 22px;
  padding: 18px 22px calc(20px + env(safe-area-inset-bottom, 0px));
  font-family: var(--font-ui);
  text-align: center;
  box-shadow: 0 30px 80px rgba(15, 12, 32, .5);
}
body.hq2-app .hq2-market-qr-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
body.hq2-app .hq2-market-qr-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  font-size: 18px; color: var(--ink-3);
  cursor: pointer; line-height: 1; padding: 0;
}
body.hq2-app .hq2-market-qr-amount {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 900;
  color: var(--tc-navy);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
body.hq2-app .hq2-market-qr-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--warning);
  background: var(--warning-bg);
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  margin-bottom: 16px;
}
body.hq2-app .hq2-market-qr-dot {
  width: 8px; height: 8px;
  background: var(--warning);
  border-radius: 50%;
  animation: hq2QrPulse 1.2s ease-in-out infinite;
}
@keyframes hq2QrPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .4; transform: scale(1.4); }
}
body.hq2-app .hq2-market-qr-frame {
  display: grid; place-items: center;
  background: #fff;
  border: 2px solid var(--rule);
  border-radius: 16px;
  padding: 14px;
  margin: 0 auto 14px;
  max-width: 280px;
  min-height: 260px;
}
body.hq2-app .hq2-market-qr-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
body.hq2-app .hq2-market-qr-creating {
  color: var(--ink-4);
  font-size: 13px;
  font-style: italic;
  padding: 80px 0;
}
body.hq2-app .hq2-market-qr-hint {
  font-size: 13px;
  color: var(--ink-2);
  margin: 0 0 14px;
  line-height: 1.45;
}
body.hq2-app .hq2-market-qr-hint b {
  color: var(--tc-navy);
  font-weight: 800;
}
body.hq2-app .hq2-market-qr-actions { margin-bottom: 10px; }
body.hq2-app .hq2-market-qr-manual {
  background: transparent;
  color: var(--tc-navy);
  border: 1.5px solid rgba(27, 26, 107, .25);
  border-radius: 12px;
  padding: 10px 16px;
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
}
body.hq2-app .hq2-market-qr-manual:hover { background: var(--surface-2); }
body.hq2-app .hq2-market-qr-cancel {
  background: transparent;
  color: var(--ink-4);
  border: none;
  font-family: var(--font-ui);
  font-size: 12.5px;
  cursor: pointer;
  text-decoration: underline;
  padding: 4px;
}
body.hq2-app .hq2-market-qr-card--paid { padding-top: 36px; }
body.hq2-app .hq2-market-qr-check {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  font-size: 50px; font-weight: 900;
  display: grid; place-items: center;
  margin: 0 auto 18px;
  animation: hq2QrCheckPop .35s ease-out;
}
@keyframes hq2QrCheckPop {
  0% { transform: scale(.4); opacity: 0; }
  60% { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
body.hq2-app .hq2-market-qr-paid-amt {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 900;
  color: var(--tc-navy);
  margin: 0 0 4px;
  letter-spacing: -.02em;
}
body.hq2-app .hq2-market-qr-paid-sub {
  font-size: 13.5px;
  color: var(--ink-4);
  margin: 0 0 22px;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-qr-next {
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 52px;
  width: 100%;
  font-family: var(--font-ui);
  font-size: 15px; font-weight: 800;
  cursor: pointer;
}
body.hq2-app .hq2-market-qr-next:hover { background: var(--tc-navy-deep); }

/* ── optional "send receipt" form on card success modal ─────────── */
body.hq2-app .hq2-market-card-receipt-toggle {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px dashed var(--rule-strong);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-3);
  font-family: var(--font-ui);
  cursor: pointer;
  margin: 0 0 14px;
}
body.hq2-app .hq2-market-card-receipt-toggle:hover {
  background: var(--surface-2);
  border-style: solid;
  color: var(--ink);
}
body.hq2-app .hq2-market-card-receipt.is-open {
  display: flex;
  gap: 6px;
  margin: 0 0 14px;
  flex-wrap: wrap;
}
body.hq2-app .hq2-market-card-receipt-input {
  flex: 1;
  height: 42px;
  min-width: 0;
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 14px;
  font-family: var(--font-ui);
  color: var(--ink);
  background: var(--surface-2);
  outline: none;
}
body.hq2-app .hq2-market-card-receipt-input:focus {
  border-color: var(--tc-navy);
  background: #fff;
}
body.hq2-app .hq2-market-card-receipt-send {
  height: 42px;
  padding: 0 16px;
  background: var(--tc-navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  font-family: var(--font-ui);
  cursor: pointer;
}
body.hq2-app .hq2-market-card-receipt-send:hover {
  background: var(--tc-navy-deep);
}
body.hq2-app .hq2-market-card-receipt-send:disabled,
body.hq2-app .hq2-market-card-receipt-input:disabled {
  opacity: .55;
  cursor: not-allowed;
}
body.hq2-app .hq2-market-card-receipt-err {
  flex: 1 0 100%;
  font-size: 12px;
  color: var(--danger);
  font-weight: 600;
  margin-top: 2px;
}
body.hq2-app .hq2-market-card-receipt.is-sent {
  background: var(--success-bg, #E6F4EC);
  border: 1px solid var(--success);
  border-radius: 10px;
  padding: 10px;
  font-size: 13px;
  font-weight: 700;
  color: var(--success);
  margin: 0 0 14px;
  text-align: center;
}

/* ── card-flow choice modal (QR vs Stripe app) ──────────────────── */
body.hq2-app .hq2-market-cardchoice-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 14px 0 6px;
}
body.hq2-app .hq2-market-cardchoice-btn {
  display: grid;
  grid-template-columns: 56px 1fr;
  grid-template-rows: auto auto;
  gap: 4px 14px;
  align-items: center;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid rgba(15, 12, 32, .12);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-ui);
  transition: transform .08s ease, border-color .12s ease, background .12s ease;
}
body.hq2-app .hq2-market-cardchoice-btn:hover {
  border-color: var(--tc-navy);
  background: var(--surface-2);
}
body.hq2-app .hq2-market-cardchoice-btn:active { transform: scale(.98); }
body.hq2-app .hq2-market-cardchoice-emoji {
  grid-row: 1 / 3;
  grid-column: 1;
  font-size: 36px;
  line-height: 1;
  align-self: center;
  text-align: center;
}
body.hq2-app .hq2-market-cardchoice-name {
  grid-row: 1;
  grid-column: 2;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 800;
  color: var(--tc-navy);
}
body.hq2-app .hq2-market-cardchoice-blurb {
  grid-row: 2;
  grid-column: 2;
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.4;
}

/* Stripe-app instructions list */
body.hq2-app .hq2-market-stripeapp-steps {
  margin: 6px 0 14px;
  padding: 14px 18px 14px 38px;
  background: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: 12px;
  text-align: left;
  list-style: decimal;
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.55;
}
body.hq2-app .hq2-market-stripeapp-steps li {
  padding: 3px 0;
}
body.hq2-app .hq2-market-stripeapp-steps li b {
  color: var(--tc-navy);
  font-weight: 800;
}
body.hq2-app .hq2-market-stripeapp-steps li::marker {
  color: var(--tc-gold);
  font-weight: 800;
}

/* Big "open Stripe app" deep-link button — sits at the top of the
   Stripe-app pay modal, primary call-to-action. iOS may or may not
   honor the stripe-dashboard:// URL scheme; either way the button
   is the strongest visual prompt. */
body.hq2-app .hq2-market-stripeapp-launch {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: #635BFF;  /* Stripe brand purple */
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
  margin: 4px 0 14px;
  font-family: var(--font-ui);
  box-shadow: 0 4px 14px rgba(99, 91, 255, .35);
  transition: transform .08s ease, box-shadow .12s ease;
}
body.hq2-app .hq2-market-stripeapp-launch:hover {
  box-shadow: 0 6px 18px rgba(99, 91, 255, .45);
}
body.hq2-app .hq2-market-stripeapp-launch:active {
  transform: scale(.98);
}
body.hq2-app .hq2-market-stripeapp-launch-icon {
  font-size: 28px;
  line-height: 1;
}
body.hq2-app .hq2-market-stripeapp-launch-body {
  display: flex;
  flex-direction: column;
  text-align: left;
  flex: 1;
}
body.hq2-app .hq2-market-stripeapp-launch-body b {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.01em;
}
body.hq2-app .hq2-market-stripeapp-launch-body small {
  font-size: 12px;
  opacity: .85;
  margin-top: 2px;
}

/* Test tile — always-visible 50¢ verification sale */
body.hq2-app .hq2-market-tile.is-test {
  background: #FBF4DC;
  border: 2px dashed var(--tc-gold);
}
body.hq2-app .hq2-market-tile.is-test:hover {
  background: #F8EDC8;
}
body.hq2-app .hq2-market-tile-img--test {
  background: var(--tc-gold);
  color: #fff;
  font-size: 32px;
}
body.hq2-app .hq2-market-tile-left--test {
  color: var(--tc-gold-dark) !important;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* "⚠ default" indicator on the tile price — shown when a recipe
   has no price field set and we're falling back to $11.50. */
body.hq2-app .hq2-market-tile.is-default-price .hq2-market-tile-price small {
  display: inline-block;
  margin-left: 4px;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--warning);
  background: var(--warning-bg);
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: .02em;
  vertical-align: middle;
}

/* ── drawer panel ──────────────────────────────────────────────────
   Compact strip under the shift chip showing current bill counts. */
body.hq2-app .hq2-market-drawer {
  background: #FAF9F4;
  border-bottom: 1px solid rgba(15, 12, 32, .07);
  /* No sticky — keeping THREE stacked sticky elements (chip + drawer
     + tabs, all recomputing safe-area offsets on every scroll frame)
     was making iOS Safari stutter / rubber-band weirdly in popout
     mode. The cash drawer is reference info — operator glances at it
     occasionally, doesn't need it pinned during browse. Chip + tabs
     stay sticky for the running totals and meals/bakery toggle. */
}
body.hq2-app .hq2-market-drawer summary {
  list-style: none;
  cursor: pointer;
  padding: 4px 14px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
body.hq2-app .hq2-market-drawer summary::-webkit-details-marker { display: none; }
body.hq2-app .hq2-market-drawer-h {
  font-size: 11.5px;
  font-weight: 800;
  color: #1B1A6B;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-drawer-hint {
  font-size: 10px;
  color: #6B6B85;
}
/* In popout mode the till is the whole UI — verbose "tap to see what's
   in the box" copy eats vertical room. Drop the hint when the drawer
   is collapsed; the dollar amount alone is enough cue and tapping the
   strip still expands it. */
body.hq2-driver-popout .hq2-market-drawer:not([open]) .hq2-market-drawer-hint {
  display: none;
}
body.hq2-app .hq2-market-drawer-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 16px 10px;
}
body.hq2-app .hq2-market-drawer-cell {
  padding: 4px 10px;
  background: #fff;
  border: 1px solid rgba(15, 12, 32, .07);
  border-radius: 8px;
  font-size: 11.5px;
  color: #2C2D45;
  font-variant-numeric: tabular-nums;
}
body.hq2-app .hq2-market-drawer-cell b {
  color: #1B1A6B; font-weight: 800; margin-right: 2px;
}
body.hq2-app .hq2-market-drawer-cell.is-low {
  background: #FBF4DC;
  border-color: rgba(184, 134, 11, .3);
  color: #B8860B;
}
body.hq2-app .hq2-market-drawer-cell.is-zero {
  opacity: .5;
}
body.hq2-app .hq2-market-drawer-empty {
  font-size: 12px; color: #6B6B85; font-style: italic;
}

/* ── cart pill row (custom + discount buttons) ──────────────────── */
body.hq2-app .hq2-market-cart-pills {
  display: flex;
  gap: 6px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
body.hq2-app .hq2-market-cart-pill {
  background: #FAF9F4;
  border: 1px dashed rgba(15, 12, 32, .14);
  color: #1B1A6B;
  font-size: 11.5px;
  font-weight: 700;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
}
body.hq2-app .hq2-market-cart-pill:hover {
  background: #F2EEE5;
  border-style: solid;
}

/* Discount row in cart totals */
body.hq2-app .hq2-market-cart-row--discount {
  color: #B33A1A;
  font-weight: 700;
}
body.hq2-app .hq2-market-cart-row--discount > span:first-child {
  display: flex; align-items: center; gap: 6px;
}
body.hq2-app .hq2-market-cart-discount-rm {
  background: transparent;
  border: none;
  color: #B33A1A;
  font-size: 14px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}
body.hq2-app .hq2-market-cart-line.is-custom .hq2-market-cart-name em {
  font-style: normal;
  font-size: 10.5px;
  color: #C8A96E;
  font-weight: 800;
  text-transform: uppercase;
  margin-left: 4px;
  letter-spacing: .04em;
}

/* ── generic discount + custom modal ───────────────────────────────
   Both use the same overlay/card shell. */
body.hq2-app .hq2-market-overlay-modal {
  position: fixed; inset: 0;
  background: rgba(15, 12, 32, .55);
  display: grid;
  place-items: center;
  z-index: 130;
  padding: 16px;
  overflow-y: auto;
}
body.hq2-app .hq2-market-modal-card {
  width: 100%;
  max-width: 440px;
  background: #fff;
  border-radius: 18px;
  padding: 22px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 20px 60px rgba(15, 12, 32, .3);
  font-family: 'Inter', sans-serif;
  max-height: 92vh;
  overflow-y: auto;
}
body.hq2-app .hq2-market-modal-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
body.hq2-app .hq2-market-modal-close {
  width: 32px; height: 32px;
  border-radius: 999px;
  background: #FAF9F4;
  border: 1px solid rgba(15, 12, 32, .07);
  font-size: 18px; color: #4D4E70;
  cursor: pointer; flex: 0 0 32px;
  padding: 0; line-height: 1;
}
body.hq2-app .hq2-market-modal-head h3 {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 18px;
  font-weight: 800;
  color: #1B1A6B;
}
body.hq2-app .hq2-market-modal-sub {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #6B6B85;
}
body.hq2-app .hq2-market-modal-quicks {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  margin-bottom: 14px;
}
body.hq2-app .hq2-market-modal-quick {
  height: 44px;
  background: #FAF9F4;
  border: 1.5px solid rgba(15, 12, 32, .07);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #17182A;
  cursor: pointer;
  padding: 0 4px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
body.hq2-app .hq2-market-modal-quick:active { transform: scale(.97); }
body.hq2-app .hq2-market-modal-quick--danger {
  grid-column: span 1;
  background: #FBECEC;
  color: #B33A1A;
  border-color: rgba(179, 58, 26, .25);
  font-size: 11.5px;
}
body.hq2-app .hq2-market-modal-field {
  display: block;
  margin-bottom: 12px;
}
body.hq2-app .hq2-market-modal-field span {
  display: block;
  font-size: 11px;
  font-weight: 800;
  color: #4D4E70;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}
body.hq2-app .hq2-market-modal-field input {
  width: 100%;
  height: 44px;
  padding: 0 12px;
  font-size: 16px;
  font-weight: 600;
  color: #17182A;
  background: #fff;
  border: 1.5px solid rgba(15, 12, 32, .14);
  border-radius: 10px;
  font-family: 'Inter', sans-serif;
  box-sizing: border-box;
}
body.hq2-app .hq2-market-modal-field input:focus {
  outline: none; border-color: #1B1A6B;
  box-shadow: 0 0 0 3px rgba(27, 26, 107, .12);
}
body.hq2-app .hq2-market-modal-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 6px;
}
body.hq2-app .hq2-market-modal-cancel {
  background: #FAF9F4;
  color: #4D4E70;
  border: 1px solid rgba(15, 12, 32, .14);
  border-radius: 12px;
  height: 48px;
  font-size: 13.5px;
  font-weight: 700;
  font-family: 'Inter', sans-serif;
}
body.hq2-app .hq2-market-modal-ok {
  background: #1B1A6B;
  color: #fff;
  border: none;
  border-radius: 12px;
  height: 48px;
  font-size: 14px;
  font-weight: 800;
  font-family: 'Inter', sans-serif;
}
body.hq2-app .hq2-market-modal-ok:hover { background: #0F0E47; }

/* ── tender modal: warning state on breakdown when drawer short ─── */
body.hq2-app .hq2-market-tender-breakdown.is-short {
  background: #FBF4DC;
  border-color: rgba(184, 134, 11, .3);
  color: #2C2D45;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 12px 14px;
}
body.hq2-app .hq2-market-tender-breakdown.is-short .hq2-market-tender-bill {
  background: #fff;
}
body.hq2-app .hq2-market-tender-breakdown-lbl {
  font-weight: 700;
  margin-right: 4px;
}
body.hq2-app .hq2-market-tender-short-head {
  font-size: 13px;
  font-weight: 800;
  color: #B8860B;
  margin-bottom: 2px;
}
body.hq2-app .hq2-market-tender-short-opt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid rgba(184, 134, 11, .2);
  border-radius: 8px;
}
body.hq2-app .hq2-market-tender-short-opt-letter {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  background: #B8860B;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  border-radius: 50%;
  flex: 0 0 22px;
  margin-top: 1px;
}
body.hq2-app .hq2-market-tender-short-opt-body {
  font-size: 13px;
  color: #2C2D45;
  line-height: 1.45;
}
body.hq2-app .hq2-market-tender-short-opt-body b {
  font-weight: 800;
  color: #1B1A6B;
}
body.hq2-app .hq2-market-tender-short-meta {
  font-size: 11.5px;
  color: #6B6B85;
  font-style: italic;
  margin-top: 2px;
}

/* ── tender modal: receipt-email collapsible ───────────────────── */
body.hq2-app .hq2-market-tender-receipt {
  margin: -6px 0 14px;
  padding: 10px 12px;
  background: #FAF9F4;
  border: 1px solid rgba(15, 12, 32, .07);
  border-radius: 10px;
}
body.hq2-app .hq2-market-tender-receipt summary {
  list-style: none;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 700;
  color: #2C2D45;
}
body.hq2-app .hq2-market-tender-receipt summary::-webkit-details-marker { display: none; }
body.hq2-app .hq2-market-tender-receipt-hint {
  font-weight: 400;
  color: #6B6B85;
  font-size: 11px;
  margin-left: 4px;
}
body.hq2-app .hq2-market-tender-receipt input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  margin: 8px 0 4px;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
  background: #fff;
  border: 1px solid rgba(15, 12, 32, .14);
  border-radius: 8px;
  box-sizing: border-box;
}
body.hq2-app .hq2-market-tender-receipt small {
  display: block;
  margin-top: 4px;
  color: #6B6B85;
  font-size: 11px;
}

/* ════════════════════════════════════════════════════════════════════
   TOP PICKS — /hq2#/topPicks
   ════════════════════════════════════════════════════════════════════ */
.hq2-tp-cfg {
  display: grid;
  grid-template-columns: 1fr 1fr 200px;
  gap: var(--s-3);
  align-items: end;
}
@media (max-width: 720px) {
  .hq2-tp-cfg { grid-template-columns: 1fr; }
}
.hq2-tp-cfg-num .hq2-input { font-variant-numeric: tabular-nums; }

.hq2-tp-list { display: flex; flex-direction: column; gap: var(--s-2); }

.hq2-tp-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: border-color var(--t-fast), background var(--t-fast);
}
.hq2-tp-row:hover { border-color: var(--rule-strong); background: var(--surface-2); }
.hq2-tp-row.is-over { opacity: .58; }

.hq2-tp-rank {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--w-black);
  font-size: var(--t-13);
  color: var(--ink-4);
  font-variant-numeric: tabular-nums;
}
.hq2-tp-thumb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  background-size: cover;
  background-position: center;
  background-color: var(--tc-cream-2);
  border: 1px solid var(--rule);
}
.hq2-tp-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tc-gold);
  font-size: var(--t-18);
}
.hq2-tp-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.hq2-tp-name {
  font-weight: var(--w-bold);
  font-size: var(--t-14);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-tp-tags { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; }

/* Badge-flag toggle chips on each top-picks row. Chip order = the store
   card's badge priority; .is-live (★) = the badge the card shows now. */
.hq2-tp-flags { display: flex; gap: var(--s-1); flex-wrap: wrap; align-items: center; margin-top: 2px; }
.hq2-tp-flagchip {
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-4);
  font-size: var(--t-11);
  font-weight: var(--w-bold);
  letter-spacing: .01em;
  padding: 2px 9px;
  line-height: 1.5;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.hq2-tp-flagchip:hover { border-color: var(--rule-strong); color: var(--ink-2); }
.hq2-tp-flagchip.is-on {
  background: rgba(27, 26, 107, .06);
  border-color: var(--tc-navy-soft);
  color: var(--tc-navy);
}
.hq2-tp-flagchip.is-live {
  background: var(--tc-navy);
  border-color: var(--tc-navy);
  color: #fff;
}

.hq2-tp-acts { flex: 0 0 auto; display: flex; gap: var(--s-1); }
.hq2-tp-iconbtn {
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: var(--t-15);
  line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.hq2-tp-iconbtn:hover { background: var(--tc-cream); border-color: var(--rule-strong); }
.hq2-tp-iconbtn:disabled { opacity: .3; cursor: default; }
.hq2-tp-iconbtn-rm:hover { background: var(--danger-bg); border-color: var(--danger); color: var(--danger); }

.hq2-tp-cut {
  text-align: center;
  font-size: var(--t-11);
  color: var(--ink-4);
  padding: var(--s-1) 0;
  letter-spacing: .02em;
}
.hq2-tp-seed {
  margin-bottom: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: 1px solid var(--tc-gold);
  border-radius: var(--r-md);
  background: rgba(200, 169, 110, .10);
  color: var(--tc-gold-dark);
  font-size: var(--t-12);
  line-height: 1.45;
}
.hq2-tp-seed b { color: var(--ink-2); }

/* Picker modal */
.hq2-tp-picklist {
  margin-top: var(--s-3);
  max-height: 52vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}
.hq2-tp-pickrow {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  width: 100%;
  padding: var(--s-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.hq2-tp-pickrow:hover { background: var(--surface-2); border-color: var(--rule-strong); }
.hq2-tp-pickrow.is-on { background: rgba(27, 26, 107, .06); border-color: var(--tc-navy-soft); }
.hq2-tp-pickrow.is-already { opacity: .5; cursor: default; }
.hq2-tp-pickname {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--w-medium);
  font-size: var(--t-14);
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hq2-tp-pickcheck {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
  background: var(--tc-cream-2);
  color: var(--ink-2);
  font-weight: var(--w-bold);
}
.hq2-tp-pickrow.is-on .hq2-tp-pickcheck { background: var(--tc-navy); color: #fff; }
.hq2-tp-pickflag { flex: 0 0 auto; font-size: var(--t-11); color: var(--ink-4); }
.hq2-tp-pickcount { font-size: var(--t-12); color: var(--ink-3); align-self: center; }

/* ════════════════════════════════════════════════════════════════════
   MONEY · OVERVIEW FACELIFT (2026-06-21)
   Unifies every Financials panel around one language: gold-accent card
   eyebrows, a two-column money-in/money-out P&L, soft subscription tiles,
   gradient source bars, a friendly all-clear refund state, and a
   "show more" footer that caps the long expense + ledger lists.
   Palette mirrors the existing .hq2-fi-card tokens (navy #141044, gold
   #C8A96E / deep #B8923E, danger #C0392B, success #1F7A3F, cream #F1EFE8).
   ════════════════════════════════════════════════════════════════════ */

/* Two-up rows align to the top so a shorter card (e.g. subscriptions next
   to the taller P&L) takes its own height instead of stretching to match
   and leaving a big empty gap below its content. */
.hq2-fi-row-2up { align-items: start; }

/* Gold eyebrow accent before each card-header label */
.hq2-fi-head > span:first-child { display: inline-flex; align-items: center; }
.hq2-fi-head > span:first-child::before {
  content: ""; width: 6px; height: 6px; border-radius: 2px;
  background: #C8A96E; margin-right: 8px; flex: 0 0 auto;
}

/* KPI stat cards */
.hq2-fi-stats .hq2-stat {
  background: #FFFEFB; border: 1px solid rgba(20,16,68,.07);
  border-radius: 14px; padding: 13px 15px;
  display: flex; flex-direction: column; gap: 5px; align-items: flex-start;
}
.hq2-fi-stats .stat-lbl {
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #6E7088;
}
.hq2-fi-stats .stat-val { font-size: 24px; font-weight: 800; letter-spacing: -.01em; color: #141044; }
.hq2-fi-stats .hq2-stat.is-neg .stat-val { color: #C0392B; }
.hq2-fi-stats .stat-delta { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; }
.hq2-fi-stats .stat-delta.is-up   { color: #1F7A3F; background: rgba(31,122,63,.1); }
.hq2-fi-stats .stat-delta.is-down { color: #C0392B; background: rgba(192,57,43,.1); }
.hq2-fi-stats .stat-delta.is-flat { color: #9094A6; background: transparent; padding-left: 0; }

/* P&L — two columns + net bar (full-bleed, so kill the body padding) */
#hq2FiPL { padding: 0; }
.pl2-cols { display: grid; grid-template-columns: 1fr 1fr; }
.pl2-col { padding: 13px 16px; }
.pl2-cols .pl2-col:first-child { border-right: 1px solid rgba(20,16,68,.06); }
.pl2-eyebrow {
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: #C8A96E; margin-bottom: 9px;
}
.pl2-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12.5px; color: #3D3E5C; }
.pl2-row b { color: #141044; font-variant-numeric: tabular-nums; }
.pl2-row span:last-child { font-variant-numeric: tabular-nums; }
.pl2-row.pl2-neg span:last-child { color: #C0392B; }
.pl2-row.pl2-empty span { color: #9094A6; font-style: italic; }
.pl2-sum {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0 1px; margin-top: 3px; border-top: 1px solid rgba(20,16,68,.06);
}
.pl2-sum span { font-size: 12px; font-weight: 800; color: #141044; }
.pl2-sum b { font-size: 16px; color: #141044; font-variant-numeric: tabular-nums; }
.pl2-sum.pl2-neg b { color: #C0392B; }
.pl2-note { font-size: 9.5px; color: #9094A6; font-style: italic; margin-top: 1px; }
.pl2-net {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-top: 2px solid rgba(20,16,68,.1);
  background: linear-gradient(135deg, rgba(255,230,220,.5), rgba(237,230,255,.5));
}
.pl2-net-lbl { font-size: 10.5px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #6E7088; }
.pl2-net-val { font-size: 20px; letter-spacing: -.01em; font-variant-numeric: tabular-nums; margin-left: auto; }
.pl2-net.tone-ok     .pl2-net-val { color: #1F7A3F; }
.pl2-net.tone-danger .pl2-net-val { color: #C0392B; }
.pl2-net-margin { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 99px; }
.pl2-net.tone-ok     .pl2-net-margin { color: #1F7A3F; background: rgba(31,122,63,.1); }
.pl2-net.tone-danger .pl2-net-margin { color: #C0392B; background: rgba(192,57,43,.1); }
@media (max-width: 560px){
  .pl2-cols { grid-template-columns: 1fr; }
  .pl2-cols .pl2-col:first-child { border-right: 0; border-bottom: 1px solid rgba(20,16,68,.06); }
}

/* Subscriptions — FLAT stat grid (no box-in-box). Cells are just
   label+value separated by thin rules, matching the P&L column feel.
   NB: must reset the original .hq2-fi-grid background (var(--rule), the
   grey) + its negative margins, or the grey block / box-in-box returns. */
.hq2-fi-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0; background: transparent; margin: 0; }
.hq2-fi-cell { background: transparent; border: 0; border-radius: 0; padding: 11px 4px; }
/* vertical rule between columns (not after the 3rd in a row) */
.hq2-fi-cell:not(:nth-child(3n)):not(.hq2-fi-cell-wide) { border-right: 1px solid rgba(20,16,68,.06); }
/* horizontal rule above the 2nd row of stats (cells 4–6) */
.hq2-fi-cell:nth-child(4), .hq2-fi-cell:nth-child(5), .hq2-fi-cell:nth-child(6) { border-top: 1px solid rgba(20,16,68,.06); }
/* The custom dropdown wrapper (.hq2-select) inherits a legacy border +
   padding from an older rule, which sits OUTSIDE the trigger button's own
   border → a double-bordered, box-in-box dropdown. Reset the wrapper in
   the money forms so only the trigger shows a (single) border. */
.hq2-fi-lg-form .hq2-select,
.hq2-fi-exp-form .hq2-select { border: 0; background: transparent; padding: 0; border-radius: 0; }

.hq2-fi-cell .lbl { font-size: 9.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #9094A6; }
.hq2-fi-cell .val { font-size: 20px; font-weight: 800; color: #141044; margin-top: 3px; }
.hq2-fi-cell-wide {
  grid-column: 1 / -1; background: transparent; padding: 11px 4px 2px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  border-top: 1px solid rgba(20,16,68,.06); border-radius: 0; margin-top: 6px;
}
.hq2-fi-cell-wide .lbl { font-size: 12px; font-weight: 800; letter-spacing: 0; text-transform: none; color: #141044; }
.hq2-fi-cell-wide .val { font-size: 12px; margin-top: 0; padding: 2px 9px; border-radius: 99px; }
.hq2-fi-cell-wide .val.tone-ok   { color: #1F7A3F; background: rgba(31,122,63,.1); }
.hq2-fi-cell-wide .val.tone-warn { color: #B8923E; background: rgba(184,146,62,.14); }

/* Revenue-mix legend chips */
.hq2-fi-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 10px; }
.hq2-fi-leg-item { font-size: 11.5px; color: #3D3E5C; display: flex; align-items: center; gap: 6px; }
.hq2-fi-leg-item i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.hq2-fi-leg-item b { color: #141044; }

/* Top sources — navy→gold gradient bars */
.hq2-fi-src { margin-bottom: 12px; }
.hq2-fi-src:last-child { margin-bottom: 0; }
.hq2-fi-src-head { display: flex; justify-content: space-between; font-size: 12.5px; margin-bottom: 7px; }
.hq2-fi-src-head b { color: #141044; }
.hq2-fi-src-head span { color: #6E7088; font-variant-numeric: tabular-nums; }
.hq2-fi-src-bar { height: 7px; border-radius: 99px; background: rgba(20,16,68,.06); overflow: hidden; }
.hq2-fi-src-bar i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #141044, #B8923E); }

/* Refunds — friendly all-clear */
.hq2-fi-allclear { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 22px 10px; color: #1F7A3F; }
.hq2-fi-allclear .ac-glyph {
  display: inline-flex; width: 30px; height: 30px; align-items: center; justify-content: center;
  border-radius: 50%; background: rgba(31,122,63,.12);
}
.hq2-fi-allclear .ac-glyph svg { width: 15px; height: 15px; }
.hq2-fi-allclear span:last-child { font-size: 12px; color: #6E7088; }

/* Promos rows */
.hq2-fi-promo-row { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 12.5px; border-bottom: 1px solid rgba(20,16,68,.05); }
.hq2-fi-promo-row:last-child { border-bottom: 0; }
.hq2-fi-promo-code { font-family: ui-monospace, SFMono-Regular, monospace; font-size: 12px; font-weight: 700; color: #141044; background: #F1EFE8; padding: 2px 8px; border-radius: 6px; }
.hq2-fi-promo-name { font-weight: 700; color: #141044; }
.hq2-fi-promo-discount { font-size: 12px; font-weight: 700; color: #B8923E; }
.hq2-fi-promo-uses, .hq2-fi-promo-applies { margin-left: auto; font-size: 11.5px; color: #6E7088; }
.hq2-fi-promo-applies { background: #F1EFE8; padding: 1px 8px; border-radius: 99px; }
.hq2-fi-promo-more { font-size: 11px; color: #9094A6; padding: 8px 0 2px; }

/* Expenses rows — horizontal padding on the ROWS (not the .hq2-fi-exp-list
   container, which zeroes the body padding) so the date isn't flush against
   the edge while the "show more" footer stays full-bleed. */
.hq2-fi-exp { display: flex; align-items: center; gap: 11px; padding: 8px 16px; font-size: 12.5px; border-bottom: 1px solid rgba(20,16,68,.05); }
.hq2-fi-exp-list > .watch-empty { padding-left: 16px; padding-right: 16px; }
.hq2-fi-exp:last-child { border-bottom: 0; }
.hq2-fi-exp-date { min-width: 62px; color: #9094A6; font-variant-numeric: tabular-nums; }
.hq2-fi-exp-cat { background: #F1EFE8; color: #7A5A1E; font-size: 10.5px; font-weight: 700; padding: 1px 8px; border-radius: 99px; white-space: nowrap; }
.hq2-fi-exp-desc { flex: 1; color: #3D3E5C; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hq2-fi-exp-amt { color: #C0392B; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Ledger source tags + signed amounts */
.lg-srctag { font-size: 9.5px; font-weight: 700; padding: 1px 7px; border-radius: 99px; }
.lg-srctag-order, .lg-srctag-catering { color: #185FA5; background: rgba(24,95,165,.1); }
.lg-srctag-expense, .lg-srctag-refund { color: #A32D2D; background: rgba(163,45,45,.1); }
.lg-srctag-manual { color: #7A5A1E; background: rgba(184,146,62,.16); }
.lg-row.is-income  .lg-amt b { color: #1F7A3F; }
.lg-row.is-expense .lg-amt b { color: #C0392B; }

/* "show more" footer — expenses + ledger */
.hq2-fi-more {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 11px; margin-top: 4px;
  border-top: 1px solid rgba(20,16,68,.06); background: rgba(255,255,255,.4);
}
.hq2-fi-more .more-count { font-size: 11.5px; color: #9094A6; }
.hq2-fi-more .more-btn {
  font-size: 11.5px; font-weight: 700; color: #141044; cursor: pointer;
  background: #fff; border: 1px solid rgba(20,16,68,.15); border-radius: 99px; padding: 5px 15px;
}
.hq2-fi-more .more-btn:hover { border-color: #C8A96E; }
.hq2-fi-more .more-all { font-size: 11.5px; font-weight: 700; color: #6E7088; cursor: pointer; background: transparent; border: 0; padding: 5px 6px; }
.hq2-fi-more .more-all:hover { color: #141044; }