/* K/20X Loyalty Engine — global theme overrides
 *
 * Light mode follows the Rainy Coffee palette
 *   #0a0a0a black · #fafafa white · #8b6f47 coffee · #4a90a4 rain · #ff6b35 accent · #d4d4d4 grey
 *
 * Accessibility goals: WCAG 2.1 AA contrast on body/muted/border text in both
 * themes; 24px+ touch target on the toggle; visible focus ring; reduced-motion
 * support; status colors chosen so luminance differs across red/green/blue
 * (deuteranopia/protanopia friendly — pair with shape/labels for state, never
 * color alone).
 *
 * Two CSS-var conventions exist in this codebase; both are mapped below.
 */

[data-theme="light"] {
  /* Modern dashboard pages */
  --bg: #fafafa;
  --surface: #ffffff;
  --card: #ffffff;
  --card-hover: #f1f1f1;
  --border: rgba(10, 10, 10, 0.18);          /* visible on #fafafa */
  --border-hover: rgba(255, 107, 53, 0.55);
  --text: #0a0a0a;                            /* 19:1 on bg, AAA */
  --muted: #4b4b4b;                           /* 8.6:1, AAA */
  --dim:   #6c6c6c;                           /* 5.1:1, AA */
  --accent: #ff6b35;                          /* Rainy Coffee accent (decorative/large text) */
  --accent-strong: #c2410c;                   /* 5.5:1 on bg, for small-text accent use */
  --accent-glow: rgba(255, 107, 53, 0.10);
  --green:  #15803d;                          /* 5.5:1, AA, distinct hue from red */
  --blue:   #1d4ed8;                          /* 7.7:1, AAA */
  --red:    #b91c1c;                          /* 6.7:1, AAA */
  --purple: #6d28d9;                          /* 7.6:1, AAA */
  --cyan:   #0e7490;                          /* 6.0:1, AAA */
  --orange: #c2410c;                          /* 5.5:1, AA */

  /* Login + classic dashboard convention */
  --black: #fafafa;
  --white: #0a0a0a;
  --gray-100: #0a0a0a;
  --gray-300: #2a2a2a;
  --gray-500: #4b4b4b;
  --yellow: #ff6b35;
  --ring:   rgba(255, 107, 53, 0.45);
  --grid-line: rgba(255, 107, 53, 0.06);
  --glow:      rgba(74, 144, 164, 0.12);

  /* Executive Brief convention (program-executive-brief, etc.) */
  --bar: #f3f3f3;
  --bsub: rgba(10, 10, 10, 0.06);
  --tx:  #0a0a0a;                              /* 19:1, AAA */
  --tx2: #1f1f1f;                              /* 16:1, AAA */
  --tx3: #4b4b4b;                              /* 8.6:1, AAA */
  --tx4: #6c6c6c;                              /* 5.1:1, AA */
  --tx5: #8a8a8a;                              /* 3.5:1 — decorative labels only */

  --gold:    #c2410c;                          /* used as text/accent — 5.5:1 AA */
  --gold-bg: rgba(255, 107, 53, 0.10);
  --gold-br: rgba(255, 107, 53, 0.45);

  --grn:    #15803d;                           /* 5.5:1 AA */
  --grn-bg: rgba(21, 128, 61, 0.10);
  --grn-br: rgba(21, 128, 61, 0.30);

  --red:    #b91c1c;                           /* 6.7:1 AAA */
  --red-bg: rgba(185, 28, 28, 0.08);
  --red-br: rgba(185, 28, 28, 0.28);

  --blu:    #1d4ed8;                           /* 7.7:1 AAA */
  --blu-bg: rgba(29, 78, 216, 0.08);
  --blu-br: rgba(29, 78, 216, 0.28);

  --pur:    #6d28d9;                           /* 7.6:1 AAA */
  --pur-bg: rgba(109, 40, 217, 0.08);
  --pur-br: rgba(109, 40, 217, 0.28);

  --amb:    #b45309;                           /* 5.0:1 AA */
  --amb-bg: rgba(180, 83, 9, 0.10);
  --amb-br: rgba(180, 83, 9, 0.30);

  /* Compact convention (data-export, loyalty-intel)
   * NOTE: --r is intentionally NOT overridden — pulsing-points.html uses it
   * as a 12px border-radius. Red color in those two pages will appear in the
   * dark-mode shade in light mode. Acceptable trade-off vs breaking layout. */
  --sf:  #ffffff;
  --cd:  #ffffff;
  --cd2: #f3f3f3;
  --bdr:  rgba(10, 10, 10, 0.18);
  --bdr2: rgba(10, 10, 10, 0.10);
  --mt:  #4b4b4b;                              /* muted, AAA */
  --dm:  #6c6c6c;                              /* dim, AA */
  --y:   #c2410c;                              /* yellow-accent, AA */
  --yg:  rgba(255, 107, 53, 0.10);
  --yb:  rgba(255, 107, 53, 0.18);
  --g:   #15803d;
  --gg:  rgba(21, 128, 61, 0.10);
  --b:   #1d4ed8;                              /* blue */
  --bg2: rgba(29, 78, 216, 0.10);              /* blue-tint background — note name collision-safe */
  --p:   #6d28d9;
  --pg:  rgba(109, 40, 217, 0.10);
  --o:   #c2410c;
  --og:  rgba(255, 107, 53, 0.10);
  --rg:  rgba(185, 28, 28, 0.10);

  /* idre-configurator convention */
  --panel:      #ffffff;
  --yellow-dim: rgba(255, 107, 53, 0.10);
  --success:    #15803d;
  --danger:     #b91c1c;

  /* pulsing-points & dashboard-hub-service: dim/glow/bright variants */
  --accent-dim:    rgba(255, 107, 53, 0.12);
  --accent-bright: #d04017;
  --green-dim:     rgba(21, 128, 61, 0.10);
  --red-dim:       rgba(185, 28, 28, 0.10);
  --blue-dim:      rgba(29, 78, 216, 0.10);
}

html, body { transition: background-color .25s ease, color .25s ease; }

/* ──────────────────────────────────────────────────────────────────────
 * Unified header — normalizes both conventions used across the codebase
 * so every page looks identical:
 *   • .topbar  (modern pages: dashboard-hub, ops-lookup, edit-users, etc.)
 *   • .top     (pulsing-points, data-export, loyalty-intel)
 * Each page keeps its own per-page text/buttons; this stylesheet only
 * controls the visual shell. Pure CSS, no DOM rewriting — designed to last.
 * ────────────────────────────────────────────────────────────────────── */

.topbar, .top {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  min-height: 56px;
  padding: 0 24px;
  margin: 0;
  background: rgba(10, 10, 15, 0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: inherit;
}
[data-theme="light"] .topbar,
[data-theme="light"] .top {
  background: rgba(250, 250, 250, 0.94);
  border-bottom-color: rgba(10, 10, 10, 0.12);
  color: #0a0a0a;
}

/* Direct children become flex rows (left brand · right actions) */
.topbar > *,
.top > * {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* Brand logo */
.topbar .logo,
.topbar .brand-name,
.top .logo {
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 2px;
  color: #FFD400;
  white-space: nowrap;
}
[data-theme="light"] .topbar .logo,
[data-theme="light"] .topbar .brand-name,
[data-theme="light"] .top .logo {
  color: #c2410c;
}
.topbar .brand-sub,
.top .logo-s,
.top .logo-sub,
.top .tbc {
  font-size: 9px;
  color: #71717a;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
}
[data-theme="light"] .topbar .brand-sub,
[data-theme="light"] .top .logo-s,
[data-theme="light"] .top .logo-sub,
[data-theme="light"] .top .tbc { color: #4b4b4b; }

/* Page title + breadcrumb (any of these conventions) */
.topbar .tb-page,
.top .pg,
.top .tpg {
  font-size: 14px;
  font-weight: 700;
  color: #fafafa;
  white-space: nowrap;
}
[data-theme="light"] .topbar .tb-page,
[data-theme="light"] .top .pg,
[data-theme="light"] .top .tpg { color: #0a0a0a; }
.topbar .tb-crumb,
.top .tbc {
  font-size: 9px;
  color: #71717a;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: .5px;
  margin-top: 2px;
}
[data-theme="light"] .topbar .tb-crumb,
[data-theme="light"] .top .tbc { color: #4b4b4b; }

/* Vertical divider used between brand and page-title */
.topbar .tb-divider,
.topbar .sep,
.top .tdiv,
.top .sep {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, 0.10);
  flex: none;
}
[data-theme="light"] .topbar .tb-divider,
[data-theme="light"] .topbar .sep,
[data-theme="light"] .top .tdiv,
[data-theme="light"] .top .sep { background: rgba(10, 10, 10, 0.12); }

/* Live-status dot */
.topbar .dot,
.topbar .live,
.top .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #15803d;
  flex: none;
}

/* Status pills (LIVE, Updated, EN, Loading…) */
.topbar .tb-pill,
.top .pill,
.top .st {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
  font-size: 11px;
  color: #a1a1aa;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
}
[data-theme="light"] .topbar .tb-pill,
[data-theme="light"] .top .pill,
[data-theme="light"] .top .st {
  background: #ffffff;
  border-color: rgba(10, 10, 10, 0.15);
  color: #4b4b4b;
}

/* User pill (admin@CLIENT) */
.topbar .tb-user,
.top .usr {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgba(255, 212, 0, 0.10);
  border: 1px solid rgba(255, 212, 0, 0.20);
  font-size: 12px;
  font-weight: 700;
  color: #FFD400;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  white-space: nowrap;
}
[data-theme="light"] .topbar .tb-user,
[data-theme="light"] .top .usr {
  background: rgba(255, 107, 53, 0.12);
  border-color: rgba(194, 65, 12, 0.30);
  color: #c2410c;
}

/* Header action buttons (Refresh, Hub-back, etc.) */
.topbar .tb-btn,
.top .bk {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.04);
  color: #a1a1aa;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.topbar .tb-btn:hover,
.top .bk:hover {
  color: #ff6b35;
  border-color: rgba(255, 107, 53, 0.50);
  background: rgba(255, 107, 53, 0.10);
}
[data-theme="light"] .topbar .tb-btn,
[data-theme="light"] .top .bk {
  background: #ffffff;
  border-color: rgba(10, 10, 10, 0.18);
  color: #0a0a0a;
}
[data-theme="light"] .topbar .tb-btn:hover,
[data-theme="light"] .top .bk:hover {
  color: #c2410c;
  border-color: #c2410c;
  background: rgba(255, 107, 53, 0.08);
}

/* ──────────────────────────────────────────────────────────────────────
 * Theme toggle button — fully self-contained styling so it looks identical
 * regardless of host page CSS. Mimics the topbar `.tb-btn` aesthetic.
 * ────────────────────────────────────────────────────────────────────── */

.k20x-theme-toggle,
.k20x-theme-toggle:link,
.k20x-theme-toggle:visited {
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 38px;
  height: 30px;
  margin: 0 0 0 6px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
  color: #d4d4d4;                             /* 11:1 on dark — AAA */
  cursor: pointer;
  font: inherit;
  line-height: 1;
  vertical-align: middle;
  text-decoration: none;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.k20x-theme-toggle svg {
  width: 16px;
  height: 16px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
}
.k20x-theme-toggle:hover {
  background: rgba(255, 107, 53, 0.12);
  border-color: rgba(255, 107, 53, 0.55);
  color: #ff6b35;                             /* 7:1 on dark, AAA */
}
.k20x-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.50);
  border-color: #ff6b35;
}
.k20x-theme-toggle:active { transform: scale(0.96); }

/* Light mode: invert background, darken accent for AA-on-white */
[data-theme="light"] .k20x-theme-toggle {
  background: #ffffff;
  border-color: rgba(10, 10, 10, 0.22);
  color: #0a0a0a;                             /* 19:1, AAA */
}
[data-theme="light"] .k20x-theme-toggle:hover {
  background: rgba(255, 107, 53, 0.10);
  border-color: #c2410c;
  color: #c2410c;                             /* 5.5:1, AA */
}
[data-theme="light"] .k20x-theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.45);
  border-color: #c2410c;
}

/* Floating fallback (pages without a topbar). Same pill, just position-fixed
 * top-right so it looks identical to the topbar version. */
.k20x-theme-toggle--floating {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 9999;
  margin: 0;
}

/* Icon swap by current theme */
.k20x-theme-toggle .k20x-icon-sun { display: none; }
[data-theme="light"] .k20x-theme-toggle .k20x-icon-moon { display: none; }
[data-theme="light"] .k20x-theme-toggle .k20x-icon-sun { display: block; }

/* Reduced motion — turn off transitions for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  html, body, .k20x-theme-toggle {
    transition: none !important;
  }
  .k20x-theme-toggle:active { transform: none; }
}

/* ──────────────────────────────────────────────────────────────────────
 * Mobile header (≤768px)
 * Single row: [brand-mini] [page-title-ellipsized] [Hub] [theme-toggle]
 * Everything else hidden — no breadcrumb, no sub-brand, no extra pills,
 * no user pill, no divider. Title is the headline; it gets the space.
 * ────────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .topbar, .top {
    height: 52px;
    min-height: 52px;
    padding: 0 12px;
    gap: 8px;
    overflow: hidden;
  }
  .topbar > *, .top > * {
    gap: 8px;
    min-width: 0;
  }
  .topbar .tb-left, .top .br, .top .tb-l {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
  }
  .topbar .tb-right, .top .rt {
    flex: 0 0 auto;
  }

  /* Hide the noise */
  .topbar .brand-sub,
  .top .logo-s,
  .top .logo-sub,
  .topbar .tb-crumb,
  .top .tbc,
  .topbar .tb-divider,
  .topbar .sep,
  .top .tdiv,
  .top .sep,
  .topbar .tb-user,
  .top .usr {
    display: none !important;
  }
  /* No status pills on mobile — the brand and the page title carry the meaning,
   * the LIVE indicator is noise on a phone. */
  .topbar .tb-pill,
  .top .pill,
  .top .st {
    display: none !important;
  }

  /* Brand sits with weight on mobile — it's the authority mark.
   * Anna's call: brand is brand. No apologies. */
  .topbar .brand-name,
  .top .logo {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 1.4px;
    white-space: nowrap;
  }

  /* Page title — ellipsized, no neighbour truncates it */
  .topbar .tb-page,
  .top .pg,
  .top .tpg {
    font-size: 13px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  /* If the page has a primary section header (.hdr .hdr-t) below the topbar,
   * hide the topbar's redundant title on mobile. The full title is shown
   * properly typeset in .hdr — no truncation, no duplication. */
  body:has(.hdr .hdr-t) .topbar .tb-page,
  body:has(.hdr .hdr-t) .top .pg,
  body:has(.hdr .hdr-t) .top .tpg {
    display: none;
  }

  /* Tighter pills + buttons */
  .topbar .tb-pill,
  .top .pill {
    padding: 4px 8px;
    font-size: 10px;
  }
  .topbar .tb-btn,
  .top .bk {
    padding: 5px 9px;
    font-size: 11px;
  }
  /* Hide button label text — keep arrow only — when space is super tight */
  /* (commented out by default; uncomment if Hub label still wraps)
  .topbar .tb-btn span, .top .bk span { display: none; }
  */

  /* Theme toggle slightly smaller, no rotate jiggle on tap */
  .k20x-theme-toggle {
    width: 34px;
    height: 28px;
    margin-left: 4px;
  }
  .k20x-theme-toggle:hover { transform: none; }

  /* ── Mobile masthead block (program-executive-brief .hdr) ─────────────
   * Centered title + dynamic subtitle. Tightened bottom padding so the
   * gap to "SIGN UPS" reads compact. */
  .hdr {
    padding: 10px 16px 4px !important;
    gap: 8px !important;
    flex-wrap: wrap;
    justify-content: center !important;
  }
  .hdr .hdr-ico { display: none !important; }
  .hdr .hdr-l {
    flex: 1 1 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }
  .hdr .hdr-l > div { text-align: center !important; }
  .hdr .hdr-t {
    font-size: 14px !important;
    text-align: center !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .hdr .hdr-sub {
    font-size: 10px !important;
    text-align: center !important;
  }
  /* Stat row — full-width with the number left, period select right.
   * Anna's call: the user count is the headline number on this page. Make it
   * sing — strip the chip box, drop the number to 30px / 900 weight, demote
   * "users" to an uppercase caption underneath. The 30-days select anchors
   * to the right edge. */
  .hdr-r {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 12px !important;
  }
  /* User-count card removed on mobile — the count now lives in the bottom
   * status banner (see .status-bar rules). The .chip still updates in JS
   * because the page reads #ts-users; we just hide it visually. */
  .hdr-r .chip { display: none !important; }
  .hdr-r { justify-content: flex-end !important; }

  /* ── Section-head row (mobile only) ─────────────────────────────────
   * theme.js moves .psel out of .hdr-r into a flex row alongside the
   * first .sec-name ("SIGN UPS"). Both elements use the same line-box
   * height (22px) so a horizontal line through the middle of one text
   * crosses through the middle of the other — true vertical alignment. */
  .k20x-sec-head-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    /* No horizontal margin — parent .sec already provides it; otherwise
     * SIGN UPS would appear indented vs ACCUMULATIONS / REDEMPTIONS.
     * Tightened top padding so the masthead-to-section gap is compact. */
    margin: 0 !important;
    padding: 2px 0 4px !important;
  }
  .k20x-sec-head-row .sec-name {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
  }
  .k20x-sec-head-row .psel {
    /* Rectangular — no curves, per spec */
    border-radius: 0 !important;
    /* Font 4px smaller than SIGN UPS (22px → 18px) */
    font-size: 18px !important;
    font-weight: 700 !important;
    font-family: var(--m, 'JetBrains Mono', ui-monospace, monospace) !important;
    line-height: 22px !important;            /* same line-box as .sec-name (22px text) */
    letter-spacing: 0 !important;
    text-transform: none !important;
    color: var(--text, var(--tx, #0a0a0a)) !important;

    /* Tight, intentional sizing — height matches .sec-name's text height */
    height: 24px !important;                 /* 22 + 1px border × 2 = 24 (border-box) */
    box-sizing: border-box !important;
    padding: 0 24px 0 10px !important;       /* zero vertical, room on right for chevron */
    margin: 0 !important;
    flex: 0 0 auto !important;

    /* Restrained: 1px border, transparent fill */
    border: 1px solid var(--border, var(--bdr, rgba(255,255,255,0.18))) !important;
    background-color: transparent !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;

    /* Smaller chevron sized for the 18px line */
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 7px center !important;
    background-size: 9px 9px !important;
  }
  :root:not([data-theme="light"]) .k20x-sec-head-row .psel {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23e4e4ec' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E") !important;
  }

  /* Dropdown — sibling of the card. Same border, same surface, same radius,
   * same monospace. Custom SVG chevron replaces the browser default. */
  .hdr-r .psel {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 1px solid var(--border, var(--bdr, rgba(255,255,255,0.10))) !important;
    background-color: var(--surface, var(--sf, var(--card, rgba(255,255,255,0.02)))) !important;
    border-radius: 13px !important;
    padding: 13px 34px 13px 13px !important;   /* Fibonacci; right room for chevron */
    font-family: var(--m, 'JetBrains Mono', ui-monospace, monospace) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.3px !important;
    color: var(--text, var(--tx, #0a0a0a)) !important;
    line-height: 1 !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 10px 10px !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
  }
  /* Light theme: black chevron is correct as encoded. Dark theme: invert. */
  :root:not([data-theme="light"]) .hdr-r .psel {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10' fill='none' stroke='%23e4e4ec' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 4l3 3 3-3'/%3E%3C/svg%3E") !important;
  }
  .hdr-r .psel:hover,
  .hdr-r .psel:focus-visible {
    border-color: var(--accent, var(--gold, var(--y, var(--yellow, #ff6b35)))) !important;
    outline: none !important;
  }
  .hdr-r .psel:focus-visible {
    box-shadow: 0 0 0 3px var(--ring, rgba(255, 107, 53, 0.35)) !important;
  }

  /* ── System status: sticky bottom banner, 18px tall, with text.
   * Reads "27,889 USERS · SYSTEM: HEALTHY" (blue) or
   *       "27,889 USERS · SYSTEM: NOT HEALTHY" (red).
   * Background switches via :has() on .status-dot.on; text composed via
   * ::before + attr(data-users) populated by theme.js. */
  .status-bar {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 18px !important;
    min-height: 18px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    background: #1d4ed8 !important;            /* operational default */
    border: none !important;
    border-radius: 0 !important;
    z-index: 9990 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--m, 'JetBrains Mono', ui-monospace, monospace) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.2px !important;
    color: #ffffff !important;
    overflow: hidden !important;
    white-space: nowrap !important;
  }
  body:has(.status-bar .status-dot:not(.on)) .status-bar {
    background: #dc2626 !important;
  }
  /* Hide the page's native dot/text — banner is rendered via ::before */
  .status-bar > * { display: none !important; }
  .status-bar::before {
    content: attr(data-users) " · SYSTEM: HEALTHY";
    color: #ffffff;
  }
  body:has(.status-bar .status-dot:not(.on)) .status-bar::before {
    content: attr(data-users) " · SYSTEM: NOT HEALTHY";
  }
  body:has(.status-bar) { padding-bottom: 18px !important; }
}

/* (Earlier we hid the brand at <400px to give the title room. That rule was
 * removed: at modern phone widths (360–430px) it stripped the masthead and
 * left the topbar lopsided. The brand is the authority signal — it stays.) */