/* BoldUI 0.3.2: original foundations and component styles used by this site. */
/* =============================================================================
   Bacon & Bold — BoldUI · Design Tokens
   Canonical values from the B&B Brand Design Guide v2.3 (2026).
   Every value here is authoritative — do not "correct" them (see guide notes).
   ============================================================================= */

:root,
.bb-theme {
  /* ---------------------------------------------------------------------------
     CORE BRAND COLORS
     Composition ratio: 60% off-white · 25–30% ink · ~10% red.
     "Client work should always be the most colorful thing in the room."
     --------------------------------------------------------------------------- */
  --bb-color-red: #e32738; /* B&B Red — primary accent, CTA & section accents */
  --bb-color-red-rgb: 227, 39, 56;
  --bb-color-red-hover: #cf2131; /* darker red — primary button / red CTA hover */
  --bb-color-cream: #f9f6f3; /* Warm Off-White — the page ground */
  --bb-color-cream-rgb: 249, 246, 243;
  --bb-color-ink: #080609; /* Near-Black — text, icons & accents ONLY, never a bg */
  --bb-color-ink-rgb: 8, 6, 9;
  --bb-color-white: #ffffff; /* Pure White — card surfaces, one level above cream */

  /* Red tint system — 20% steps, never below 40% (loses identity) */
  --bb-color-red-100: #e32738;
  --bb-color-red-80: #e95260;
  --bb-color-red-60: #ee7d87;
  --bb-color-red-40: #f4a8af;
  --bb-color-red-dot: #d72332; /* halftone dot — a touch darker than base */
  --bb-color-red-deep: #9c1b27; /* red text on light-red wash (AA on small caps) */
  --bb-color-red-wash: rgba(227, 39, 56, 0.14); /* brand tint wash — brand-tone pills & accents */

  /* ---------------------------------------------------------------------------
     CHART CATEGORICAL PALETTE — red leads, then muted, warm, editorial hues.
     One system for every multi-series chart (System 1 · Categorical).
     --------------------------------------------------------------------------- */
  --bb-cat-1: #e32738; /* red (hero) */
  --bb-cat-2: #c8871f; /* ochre */
  --bb-cat-3: #2f8f77; /* teal */
  --bb-cat-4: #3a6ea5; /* slate blue */
  --bb-cat-5: #7d5197; /* plum */
  --bb-cat-6: #c0603c; /* clay */
  --bb-cat-7: #7a8b4f; /* sage */
  --bb-cat-8: #c25b7a; /* rose */
  --bb-cat-9: #57565e; /* graphite */
  --bb-cat-10: #b0a08a; /* sand */

  --bb-scrim: rgba(8, 6, 9, 0.42); /* overlay backdrop — modals, drawers */

  /* ---------------------------------------------------------------------------
     INK ALPHA SCALE — the functional greyscale is ink at reduced opacity.
     --------------------------------------------------------------------------- */
  --bb-ink-90: rgba(8, 6, 9, 0.9);
  --bb-ink-86: rgba(8, 6, 9, 0.86);
  --bb-ink-72: rgba(8, 6, 9, 0.72);
  --bb-ink-62: rgba(8, 6, 9, 0.62); /* ghost button text */
  --bb-ink-35: rgba(8, 6, 9, 0.35); /* UI Grey — secondary text, placeholders */
  --bb-ink-22: rgba(8, 6, 9, 0.22); /* default border */
  --bb-ink-12: rgba(8, 6, 9, 0.12); /* subdued border / divider */
  --bb-ink-08: rgba(8, 6, 9, 0.08); /* ink focus halo */
  --bb-ink-05: rgba(8, 6, 9, 0.05); /* faint elevation shadow */

  /* ON-RED TEXT RAMP — one hue (white), stepped opacity. The rendered colour
     warms/darkens as opacity drops (a tint over red), never a second grey.
     Title & icon-buttons are true white; everything below steps down to build
     hierarchy without a second colour. Buttons stay opaque — alpha would be too
     faint to read at a glance. (Was cream #F9F6F3; changed to this system.) */
  --bb-on-red-strong: #ffffff; /* 100% — card title · primary & icon-button text (loudest) */
  --bb-on-red: rgba(255, 255, 255, 0.86); /* 86% — body copy */
  --bb-on-red-hint: rgba(255, 255, 255, 0.75); /* 75% — hints / secondary emphasis */
  --bb-on-red-subdued: rgba(255, 255, 255, 0.7); /* 70% — eyebrow · label · muted icon */
  --bb-on-red-chrome: rgba(255, 255, 255, 0.65); /* 65% — footer chrome: carousel / add row */
  --bb-on-red-placeholder: rgba(255, 255, 255, 0.55); /* 55% — placeholder floor */
  --bb-on-red-frost: rgba(255, 255, 255, 0.2); /* frosted pill fill (e.g. count badge) */
  --bb-on-red-line: rgba(255, 255, 255, 0.28); /* hairline rule / track on red */

  /* ---------------------------------------------------------------------------
     SEMANTIC ROLE TOKENS
     --------------------------------------------------------------------------- */
  --bb-text: var(--bb-color-ink);
  --bb-text-secondary: var(--bb-ink-62);
  --bb-text-subdued: var(--bb-ink-35);
  --bb-text-on-red: var(--bb-on-red);
  --bb-text-brand: var(--bb-color-red);

  --bb-surface-ground: var(--bb-color-cream); /* page background */
  --bb-surface: var(--bb-color-white); /* cards, panels */
  --bb-surface-accent: var(--bb-color-red); /* the accent plane */
  --bb-surface-sunken: #f2eee9; /* slightly recessed cream */

  --bb-border: var(--bb-ink-22);
  --bb-border-subdued: var(--bb-ink-12);
  --bb-border-strong: var(--bb-ink-35);

  /* ---------------------------------------------------------------------------
     SEMANTIC UI TONES — functional STATUS only (pills, dots, banners, validation).
     Never a section background or decorative accent.

     Each tone is applied by TREATMENT, never as a solid fill:
       · solid → the LINE  — a border, 3px rule, dot or icon
       · text  → the LABEL — the AA-safe deepened tone
       · wash  → the FILL  — a light tint behind the content
     No status is ever a solid saturated fill. For CRITICAL this is load-bearing:
     a solid saturated red fill always means the BRAND (primary buttons, accent
     cards, red sections), so danger is expressed only as a red LINE + WASH + deep
     TEXT — the "split by treatment" rule: filled = brand, outlined = danger.
     All text tones pass WCAG AA on their wash and on the #F9F6F3 ground.
     --------------------------------------------------------------------------- */
  /* Critical / Error / Destructive — the red tone. Shares the brand hue but is a
     separate role: only ever a line + wash + text, never a fill. */
  --bb-critical: #e32738; /* the danger LINE — border / rule / dot / icon */
  --bb-critical-border: #e32738; /* the destructive outline (intent alias) */
  --bb-critical-text: #9c1b27; /* the danger LABEL — deepened, AA-safe */
  --bb-critical-wash: rgba(227, 39, 56, 0.14); /* danger FILL — pills & banners */
  --bb-critical-wash-soft: rgba(227, 39, 56, 0.08); /* danger FILL — destructive control rest */
  --bb-critical-wash-faint: rgba(227, 39, 56, 0.04); /* danger FILL — input error background */

  --bb-success: #2e8b4e; /* solid/line — approved / live / passed / published */
  --bb-success-text: #1e6b3a; /* label */
  --bb-success-wash: rgba(46, 139, 78, 0.14); /* fill */

  --bb-warning: #d99411; /* solid/line — pending / needs review / draft */
  --bb-warning-text: #8a5a00; /* label */
  --bb-warning-wash: rgba(217, 148, 17, 0.16); /* fill */

  --bb-info: #2f6db3; /* solid/line — in progress / syncing */
  --bb-info-text: #1e4c82; /* label */
  --bb-info-wash: rgba(47, 109, 179, 0.14); /* fill */

  /* ---------------------------------------------------------------------------
     TYPOGRAPHY
     Two typefaces, each a clear role. Anything else is unauthorized.
     Fonts must be self-hosted (@fontsource) — never the Google CDN (GDPR/DE).
     --------------------------------------------------------------------------- */
  --bb-font-sans: "Montserrat", ui-sans-serif, system-ui, -apple-system,
    "Segoe UI", Roboto, sans-serif;
  --bb-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Monaco,
    Consolas, monospace;

  --bb-weight-regular: 400;
  --bb-weight-medium: 500;
  --bb-weight-semibold: 600;
  --bb-weight-bold: 700;
  --bb-weight-black: 900;

  /* Editorial type scale (px) */
  --bb-font-display: 48px; /* H1 Claim · Black · -0.02em */
  --bb-font-h1: 40px; /* Bold · -0.02em */
  --bb-font-h2: 32px; /* Bold */
  --bb-font-h3: 24px; /* Bold */
  --bb-font-h4: 20px;
  --bb-font-body-lg: 18px; /* Body · Regular · 1.65 */
  --bb-font-body: 15px; /* UI body & inputs — Montserrat 15px */
  --bb-font-body-sm: 13px; /* card body */
  --bb-font-caption: 14px; /* Regular · 1.6 */
  --bb-font-eyebrow: 12px; /* mono eyebrow */
  --bb-font-mono-sm: 11px; /* mono label */

  --bb-tracking-tight: -0.02em; /* display & H1 */
  --bb-tracking-normal: 0;
  --bb-tracking-eyebrow: 0.16em; /* mono eyebrow */
  --bb-tracking-pill: 0.15em; /* status pill */

  --bb-leading-tight: 1.1;
  --bb-leading-heading: 1.2;
  --bb-leading-body: 1.65;
  --bb-leading-snug: 1.55;

  /* ---------------------------------------------------------------------------
     SPACING — 8px base grid (matches the halftone raster).
     --------------------------------------------------------------------------- */
  --bb-space-0: 0;
  --bb-space-025: 2px;
  --bb-space-05: 4px;
  --bb-space-1: 8px;
  --bb-space-15: 12px;
  --bb-space-2: 16px;
  --bb-space-25: 20px;
  --bb-space-3: 24px;
  --bb-space-4: 32px;
  --bb-space-5: 40px;
  --bb-space-6: 48px;
  --bb-space-8: 64px;
  --bb-space-10: 80px;
  --bb-space-12: 96px;

  /* ---------------------------------------------------------------------------
     RADIUS — the corner signals the frame, not the brand. Both are B&B.
     --------------------------------------------------------------------------- */
  --bb-radius-none: 0px; /* editorial buttons — graphic layout elements */
  --bb-radius-button-editorial: 0px;
  --bb-radius-input: 8px; /* inputs are crisper than cards — intentional */
  --bb-radius-button-ui: 10px; /* repeated-use interactive controls */
  --bb-radius-card: 12px; /* content surfaces */
  --bb-radius-lg: 16px;
  --bb-radius-pill: 999px;

  /* ---------------------------------------------------------------------------
     ELEVATION
     --------------------------------------------------------------------------- */
  --bb-shadow-card: 0 1px 2px rgba(8, 6, 9, 0.05), 0 6px 20px rgba(8, 6, 9, 0.07);
  --bb-shadow-raised: 0 2px 4px rgba(8, 6, 9, 0.06),
    0 12px 32px rgba(8, 6, 9, 0.1);
  --bb-shadow-overlay: 0 16px 48px rgba(8, 6, 9, 0.18);
  --bb-shadow-focus: 0 0 0 3px rgba(8, 6, 9, 0.08); /* ink halo — the focus signature */
  --bb-shadow-focus-critical: 0 0 0 3px rgba(227, 39, 56, 0.12);

  /* ---------------------------------------------------------------------------
     CONTROL SIZING
     --------------------------------------------------------------------------- */
  --bb-control-height: 44px; /* canonical — consistent across all button variants */
  --bb-control-height-sm: 36px;
  --bb-control-height-lg: 48px;
  --bb-control-height-xs: 28px;

  /* ---------------------------------------------------------------------------
     MOTION
     --------------------------------------------------------------------------- */
  --bb-duration-fast: 120ms;
  --bb-duration: 180ms;
  --bb-duration-slow: 280ms;
  --bb-ease: cubic-bezier(0.2, 0, 0, 1);
  --bb-ease-out: cubic-bezier(0, 0, 0.2, 1);

  /* ---------------------------------------------------------------------------
     Z-INDEX
     --------------------------------------------------------------------------- */
  --bb-z-base: 1;
  --bb-z-dropdown: 100;
  --bb-z-sticky: 200;
  --bb-z-overlay: 900;
  --bb-z-modal: 1000;
  --bb-z-toast: 1100;
  --bb-z-tooltip: 1200;

  /* ---------------------------------------------------------------------------
     HALFTONE — one dot grid, three intensities by surface beneath.
     --------------------------------------------------------------------------- */
  --bb-halftone-size: 8px;
  --bb-halftone-dot: #d72332;
  --bb-halftone-radius: 1.87px;
  --bb-halftone-opacity-white: 0.08; /* faint white-card accent (opt-in) */

  /* Layout */
  --bb-page-max: 1200px;
  --bb-focus-ring-width: 3px;
}

/* =============================================================================
   The Halftone System
   One dot grid — #d72332 in an 8×8px raster, dot radius 1.87px. How strongly it
   reads depends entirely on the surface beneath it (three surfaces, 3 intensities):

     · Off-white ground → NEVER (dots on cream read as dirt)
     · White card       → ~8% faint, corner-masked (opt-in)
     · Red surface      → full strength, corner-anchored, never flat-tiled

   The dots are never tiled edge-to-edge: they sit densest at one origin and fade
   across ~2/3 of the surface, framing the content instead of fighting it.
   Never on buttons, chips, swatches, inputs, logos or thin rules.
   ============================================================================= */

.bb-halftone {
  position: relative;
  isolation: isolate;
}

.bb-halftone::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit; /* clip the dot grid to the surface's rounded corners */
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Ccircle%20cx='4'%20cy='4'%20r='1.87'%20fill='%23d72332'/%3E%3C/svg%3E");
  background-size: var(--bb-halftone-size) var(--bb-halftone-size);
  /* Default origin: bottom-right (furthest from a top-left headline). */
  -webkit-mask-image: radial-gradient(
    135% 135% at 100% 100%,
    #000 0%,
    #000 26%,
    transparent 68%
  );
  mask-image: radial-gradient(
    135% 135% at 100% 100%,
    #000 0%,
    #000 26%,
    transparent 68%
  );
}

/* Faint variant for white cards — same grid, dropped to ~8%. Opt-in, default off. */
.bb-halftone--faint::before {
  opacity: var(--bb-halftone-opacity-white);
}

/* ---- Mask origin variants — pick the corner that best frames the content ---- */
.bb-halftone--br::before {
  -webkit-mask-image: radial-gradient(135% 135% at 100% 100%, #000 0%, #000 26%, transparent 68%);
  mask-image: radial-gradient(135% 135% at 100% 100%, #000 0%, #000 26%, transparent 68%);
}
.bb-halftone--bl::before {
  -webkit-mask-image: radial-gradient(135% 135% at 0% 100%, #000 0%, #000 26%, transparent 68%);
  mask-image: radial-gradient(135% 135% at 0% 100%, #000 0%, #000 26%, transparent 68%);
}
.bb-halftone--tr::before {
  -webkit-mask-image: radial-gradient(135% 135% at 100% 0%, #000 0%, #000 26%, transparent 68%);
  mask-image: radial-gradient(135% 135% at 100% 0%, #000 0%, #000 26%, transparent 68%);
}
.bb-halftone--tl::before {
  -webkit-mask-image: radial-gradient(135% 135% at 0% 0%, #000 0%, #000 26%, transparent 68%);
  mask-image: radial-gradient(135% 135% at 0% 0%, #000 0%, #000 26%, transparent 68%);
}
/* Edge origins — rare, reserved for wide short horizontal bands (accent strips). */
.bb-halftone--top::before {
  -webkit-mask-image: radial-gradient(160% 120% at 50% 0%, #000 0%, #000 22%, transparent 70%);
  mask-image: radial-gradient(160% 120% at 50% 0%, #000 0%, #000 22%, transparent 70%);
}
.bb-halftone--bottom::before {
  -webkit-mask-image: radial-gradient(160% 120% at 50% 100%, #000 0%, #000 22%, transparent 70%);
  mask-image: radial-gradient(160% 120% at 50% 100%, #000 0%, #000 22%, transparent 70%);
}

.bb-button {
  --_radius: var(--bb-radius-button-ui);
  --_height: var(--bb-control-height);
  --_pad-x: var(--bb-space-25);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-1);
  height: var(--_height);
  padding: 0 var(--_pad-x);
  border: 1px solid transparent;
  border-radius: var(--_radius);
  font-family: var(--bb-font-sans);
  font-size: var(--bb-font-body);
  font-weight: var(--bb-weight-semibold); /* 600 — canonical */
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: background-color var(--bb-duration-fast) var(--bb-ease),
    border-color var(--bb-duration-fast) var(--bb-ease),
    color var(--bb-duration-fast) var(--bb-ease),
    box-shadow var(--bb-duration-fast) var(--bb-ease),
    transform var(--bb-duration-fast) var(--bb-ease);
}
.bb-button:focus-visible {
  outline: none;
  box-shadow: var(--bb-shadow-focus);
}
.bb-button:active {
  transform: translateY(0.5px);
}
.bb-button:disabled,
.bb-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.42;
  transform: none;
}
.bb-button__label {
  display: inline-block;
}

/* ---- Radius modes ---- */
.bb-button--ui {
  --_radius: var(--bb-radius-button-ui);
}
.bb-button--editorial {
  --_radius: var(--bb-radius-button-editorial);
}

/* ---- Sizes (height stays 44 for md — canonical) ---- */
.bb-button--sm {
  --_height: var(--bb-control-height-sm);
  --_pad-x: var(--bb-space-2);
  font-size: var(--bb-font-body-sm);
}
.bb-button--md {
  --_height: var(--bb-control-height);
}
.bb-button--lg {
  --_height: var(--bb-control-height-lg);
  --_pad-x: var(--bb-space-3);
  font-size: var(--bb-font-body-lg);
}

/* ---- Primary — B&B Red flat, pure-white label ---- */
.bb-button--primary {
  background-color: var(--bb-color-red);
  color: var(--bb-on-red-strong); /* pure white — opaque so it reads at button size */
  border-color: var(--bb-color-red);
}
.bb-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--bb-color-red-hover);
  border-color: var(--bb-color-red-hover);
}

/* ---- Secondary — transparent, 1px ink border ---- */
.bb-button--secondary {
  background-color: transparent;
  color: var(--bb-color-ink);
  border-color: var(--bb-ink-22);
}
.bb-button--secondary:hover:not(:disabled):not([aria-disabled="true"]) {
  border-color: var(--bb-ink-35);
  background-color: var(--bb-ink-05);
}

/* ---- Ghost — transparent, muted ink text ---- */
.bb-button--ghost {
  background-color: transparent;
  color: var(--bb-ink-62);
  border-color: transparent;
}
.bb-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--bb-ink-05);
  color: var(--bb-color-ink);
}

/* ---- Destructive — a CONFIDENT OUTLINE, never a solid red fill.
   Treatment split: a solid saturated red fill is *always* the brand (primary).
   Danger reads through a full-red 1px outline + wash + the deepened red text —
   so a destructive action is never mistaken for a friendly brand CTA, even when
   it is the primary action in a delete dialog. ---- */
.bb-button--destructive {
  background-color: var(--bb-critical-wash-soft);
  color: var(--bb-critical-text);
  border-color: var(--bb-critical-border);
}
.bb-button--destructive:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--bb-critical-wash);
  border-color: var(--bb-critical-border);
}

/* ---- Icon-only — square ---- */
.bb-button--icon-only {
  --_pad-x: 0;
  width: var(--_height);
  padding: 0;
}

/* ---- Full width ---- */
.bb-button--full {
  width: 100%;
}

/* ---- Loading ---- */
.bb-button--loading {
  cursor: progress;
}
.bb-button--loading .bb-button__label,
.bb-button--loading svg:not(.bb-spinner) {
  opacity: 0.86;
}
.bb-button__spinner {
  display: inline-flex;
}

/* ---- On red surfaces ---- */
.bb-button--on-red.bb-button--primary {
  /* Flat inverse: white fill, red text — reads on both flat & patterned red. */
  background-color: var(--bb-on-red-strong);
  color: var(--bb-color-red);
  border-color: var(--bb-on-red-strong);
}
.bb-button--on-red.bb-button--primary:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: var(--bb-on-red-strong);
  border-color: var(--bb-on-red-strong);
}
.bb-button--on-red.bb-button--secondary,
.bb-button--on-red.bb-button--ghost {
  color: var(--bb-on-red-strong);
  border-color: rgba(255, 255, 255, 0.55);
  background-color: transparent;
}
.bb-button--on-red.bb-button--secondary:hover:not(:disabled):not([aria-disabled="true"]),
.bb-button--on-red.bb-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--bb-on-red-strong);
}
.bb-button--on-red:focus-visible {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.4);
}

.bb-card {
  position: relative;
  border-radius: var(--bb-radius-card); /* 12px — cards are softer than inputs */
  border: 1px solid transparent;
  color: var(--bb-text);
}

/* Shape is semantic: rounded cards are objects; sharp panels structure a workspace. */
.bb-card--shape-panel {
  border-radius: var(--bb-radius-none);
}

/* Outlined — cream card with a 1px outline (standard UI context) */
.bb-card--outlined {
  background-color: var(--bb-surface-ground);
  border-color: var(--bb-border);
}

/* White — pure white, the white itself provides separation (no border) */
.bb-card--white {
  background-color: var(--bb-color-white);
  border-color: transparent;
}

/* Elevated — white + shadow, no border */
.bb-card--elevated {
  background-color: var(--bb-color-white);
  box-shadow: var(--bb-shadow-card);
}

/* Accent — B&B Red; on-red white ramp (title 100% → body 86% → eyebrow 70%) */
.bb-card--accent {
  background-color: var(--bb-color-red);
  color: var(--bb-on-red);
  border-color: var(--bb-color-red);
}
.bb-card--accent .bb-text {
  color: var(--bb-on-red);
}
.bb-card--accent .bb-text--eyebrow {
  color: var(--bb-on-red-subdued);
}
.bb-card--accent .bb-text--heading1,
.bb-card--accent .bb-text--heading2,
.bb-card--accent .bb-text--heading3,
.bb-card--accent .bb-text--heading4,
.bb-card--accent .bb-text--display {
  color: var(--bb-on-red-strong);
}

/* 3px ink top rule — clip to the card radius */
.bb-card--top-rule {
  border-top: 3px solid var(--bb-color-ink);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* Red left rule — editorial callout (white surfaces only) */
.bb-card--left-rule {
  border-left: 3px solid var(--bb-color-red);
}

/* Clickable affordance */
.bb-card--clickable {
  cursor: pointer;
  transition: box-shadow var(--bb-duration) var(--bb-ease),
    transform var(--bb-duration) var(--bb-ease);
}
.bb-card--clickable:hover {
  box-shadow: var(--bb-shadow-raised);
  transform: translateY(-1px);
}
.bb-card--clickable:focus-visible {
  outline: none;
  box-shadow: var(--bb-shadow-focus);
}

.bb-panel {
  box-shadow: none;
}

.bb-panel--bordered:not(.bb-card--accent) {
  border-color: var(--bb-border-subdued);
}

.bb-navitem {
  position: relative;
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--bb-space-1);
  padding: 8px var(--bb-space-15);
  border: 0;
  border-radius: var(--bb-radius-input);
  background: transparent;
  text-align: left; /* <button> defaults to center — labels must read left */
  font-family: var(--bb-font-sans);
  font-size: var(--bb-font-body);
  font-weight: var(--bb-weight-medium);
  line-height: 1;
  color: var(--bb-text-secondary);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--bb-duration-fast) var(--bb-ease),
    color var(--bb-duration-fast) var(--bb-ease),
    border-color var(--bb-duration-fast) var(--bb-ease);
}
.bb-navitem:hover {
  background: var(--bb-ink-05);
  color: var(--bb-text);
}
.bb-navitem:focus-visible {
  outline: none;
  box-shadow: var(--bb-shadow-focus);
}

/* ---- Active — the red destination. Solid red FILL (the "selected" treatment);
   the red wash is reserved for critical/danger. tab & marker override below. ---- */
.bb-navitem--active {
  background: var(--bb-color-red);
  color: var(--bb-on-red-strong);
  font-weight: var(--bb-weight-semibold);
}
.bb-navitem--active:hover {
  background: var(--bb-color-red-hover);
  color: var(--bb-on-red-strong);
}

.bb-navitem__icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.bb-navitem__label {
  flex: 1 1 auto;
}

/* ---- Optional trailing count pill ---- */
.bb-navitem__count {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 var(--bb-space-05);
  border-radius: var(--bb-radius-pill);
  background: var(--bb-ink-08);
  color: var(--bb-text-secondary);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-font-mono-sm);
  font-weight: var(--bb-weight-semibold);
  line-height: 1;
}
/* Count on a solid-red pill = frosted white; on the line variants = solid red. */
.bb-navitem--active .bb-navitem__count {
  background: var(--bb-on-red-frost);
  color: var(--bb-on-red-strong);
}
.bb-navitem--tab.bb-navitem--active .bb-navitem__count,
.bb-navitem--marker.bb-navitem--active .bb-navitem__count {
  background: var(--bb-color-red);
  color: var(--bb-on-red-strong);
}

/* =====================================================================
   variant="tab" — full-height underline. Horizontal navbars only.
   The active tab gets a red bottom rule that sits on the bar's edge.
   ===================================================================== */
.bb-navitem--tab {
  align-self: stretch;
  height: 100%;
  border-radius: 0;
  margin-bottom: -1px; /* overlap the bar's 1px bottom rule */
  border-bottom: 2px solid transparent;
}
.bb-navitem--tab:hover {
  background: transparent;
  color: var(--bb-text);
}
.bb-navitem--tab.bb-navitem--active,
.bb-navitem--tab.bb-navitem--active:hover {
  background: transparent;
  color: var(--bb-text);
  border-bottom-color: var(--bb-color-red);
}
.bb-navitem--tab:focus-visible {
  border-radius: var(--bb-radius-input) var(--bb-radius-input) 0 0;
}

/* =====================================================================
   variant="step" — a numbered chip over a title + description. The active
   step fills the CHIP red (a light neutral row highlight), never the whole
   row — a heavy red fill would drown the two-line content.
   ===================================================================== */
.bb-navitem--step {
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--bb-space-15);
  padding: var(--bb-space-1) var(--bb-space-15);
  white-space: normal;
}
.bb-navitem--step .bb-navitem__index {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--bb-radius-pill);
  border: 1px solid var(--bb-border);
  background: transparent;
  color: var(--bb-text-subdued);
  font-family: var(--bb-font-mono);
  font-size: var(--bb-font-mono-sm);
  font-weight: var(--bb-weight-semibold);
  line-height: 1;
}
.bb-navitem--step .bb-navitem__steptext {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.bb-navitem--step .bb-navitem__label {
  font-weight: var(--bb-weight-semibold);
  line-height: 1.2;
  color: var(--bb-text);
}
.bb-navitem--step .bb-navitem__desc {
  font-family: var(--bb-font-sans);
  font-size: var(--bb-font-body-sm);
  font-weight: var(--bb-weight-regular);
  line-height: 1.25;
  color: var(--bb-text-subdued);
  white-space: normal;
}
.bb-navitem--step:hover {
  background: var(--bb-ink-05);
}
/* Active step — red chip + light neutral row, NOT the full-red pill. */
.bb-navitem--step.bb-navitem--active,
.bb-navitem--step.bb-navitem--active:hover {
  background: var(--bb-ink-05);
  color: var(--bb-text);
}
.bb-navitem--step.bb-navitem--active .bb-navitem__index {
  border-color: var(--bb-color-red);
  background: var(--bb-color-red);
  color: var(--bb-on-red-strong);
}

/* =====================================================================
   variant="marker" — a red edge bar + deep-red label, no fill.
   Quiet, list-style sidebars.
   ===================================================================== */
.bb-navitem--marker.bb-navitem--active,
.bb-navitem--marker.bb-navitem--active:hover {
  background: transparent;
  color: var(--bb-color-red-deep);
}
.bb-navitem--marker.bb-navitem--active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  bottom: 7px;
  width: 3px;
  border-radius: 0 var(--bb-radius-pill) var(--bb-radius-pill) 0;
  background: var(--bb-color-red);
}

/* SegmentedControl — an inset track for a small set of view/mode choices. */
.bb-segmented {
  display: inline-flex;
  align-items: center;
  gap: var(--bb-space-025);
  padding: var(--bb-space-05);
  background: var(--bb-ink-05);
  border-radius: var(--bb-radius-button-ui);
  font-family: var(--bb-font-sans);
}
.bb-segmented--full {
  display: flex;
  width: 100%;
}

.bb-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bb-space-05);
  flex: 1 1 auto;
  padding: 6px var(--bb-space-15);
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-family: var(--bb-font-sans);
  font-weight: var(--bb-weight-medium);
  line-height: 1;
  color: var(--bb-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--bb-duration-fast) var(--bb-ease),
    color var(--bb-duration-fast) var(--bb-ease),
    box-shadow var(--bb-duration-fast) var(--bb-ease);
}
.bb-segmented__item:hover {
  color: var(--bb-text);
}
.bb-segmented__item:focus-visible {
  outline: none;
  box-shadow: var(--bb-shadow-focus);
}

/* Active — a raised white pill lifts out of the track. */
.bb-segmented__item--active,
.bb-segmented__item--active:hover {
  background: var(--bb-color-white);
  color: var(--bb-text);
  box-shadow: 0 1px 2px var(--bb-ink-08);
}

.bb-segmented__icon {
  flex: 0 0 auto;
}

/* ---- Sizes ---- */
.bb-segmented--sm .bb-segmented__item {
  padding: 4px var(--bb-space-1);
  font-size: var(--bb-font-body-sm);
}
.bb-segmented--md .bb-segmented__item {
  font-size: var(--bb-font-body);
}
.bb-segmented--lg .bb-segmented__item {
  min-height: var(--bb-control-height-lg);
  padding: 0 var(--bb-space-25);
  font-size: var(--bb-font-body);
  font-weight: var(--bb-weight-semibold);
}

/* Strong — sharp dashboard tabs with a visible selected rule. */
.bb-segmented--strong {
  gap: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--bb-border-subdued);
  border-radius: var(--bb-radius-none);
}
.bb-segmented--strong .bb-segmented__item {
  position: relative;
  border-radius: var(--bb-radius-none);
}
.bb-segmented--strong .bb-segmented__item--active,
.bb-segmented--strong .bb-segmented__item--active:hover {
  background: var(--bb-color-white);
  box-shadow: inset 0 0 0 1px var(--bb-border);
}
.bb-segmented--strong .bb-segmented__item--active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  background: var(--bb-color-red);
}

/* ---- Mobile: the track scrolls sideways instead of clipping or pushing
       the page wider, and every segment is a thumb-sized target. ---- */
@media (max-width: 767px) {
  .bb-segmented {
    display: flex;
    max-width: 100%;
    flex-wrap: nowrap;
    /* `overflow-y: hidden` keeps the strong variant's clipping intact. */
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .bb-segmented::-webkit-scrollbar {
    display: none;
  }

  .bb-segmented__item {
    flex: 0 0 auto;
    min-height: var(--bb-control-height);
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
  }
  /* Full-width still fills the track when the options fit; it just can't squash. */
  .bb-segmented--full .bb-segmented__item {
    flex: 1 0 auto;
  }

  .bb-segmented--sm .bb-segmented__item {
    padding: var(--bb-space-05) var(--bb-space-15);
  }
  .bb-segmented--lg .bb-segmented__item {
    min-height: var(--bb-control-height-lg);
  }
}

.bb-text {
  margin: 0;
  font-family: var(--bb-font-sans);
  color: var(--bb-text);
}

/* ---- Variants (the canonical type scale) ---- */
.bb-text--display {
  font-size: var(--bb-font-display);
  font-weight: var(--bb-weight-black);
  letter-spacing: var(--bb-tracking-tight);
  line-height: var(--bb-leading-tight);
}
.bb-text--heading1 {
  font-size: var(--bb-font-h1);
  font-weight: var(--bb-weight-bold);
  letter-spacing: var(--bb-tracking-tight);
  line-height: var(--bb-leading-heading);
}
.bb-text--heading2 {
  font-size: var(--bb-font-h2);
  font-weight: var(--bb-weight-bold);
  line-height: var(--bb-leading-heading);
}
.bb-text--heading3 {
  font-size: var(--bb-font-h3);
  font-weight: var(--bb-weight-bold);
  line-height: var(--bb-leading-heading);
}
.bb-text--heading4 {
  font-size: var(--bb-font-h4);
  font-weight: var(--bb-weight-bold);
  line-height: var(--bb-leading-snug);
}
.bb-text--bodyLg {
  font-size: var(--bb-font-body-lg);
  font-weight: var(--bb-weight-regular);
  line-height: var(--bb-leading-body);
}
.bb-text--body {
  font-size: var(--bb-font-body);
  font-weight: var(--bb-weight-regular);
  line-height: var(--bb-leading-snug);
}
.bb-text--bodySm {
  font-size: var(--bb-font-body-sm);
  font-weight: var(--bb-weight-regular);
  line-height: var(--bb-leading-snug);
}
.bb-text--caption {
  font-size: var(--bb-font-caption);
  font-weight: var(--bb-weight-regular);
  line-height: 1.6;
  color: var(--bb-text-secondary);
}
.bb-text--eyebrow {
  font-family: var(--bb-font-mono);
  font-size: var(--bb-font-eyebrow);
  font-weight: var(--bb-weight-semibold);
  letter-spacing: var(--bb-tracking-eyebrow);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--bb-color-red);
}

/* ---- Tones ---- */
.bb-text--tone-secondary {
  color: var(--bb-text-secondary);
}
.bb-text--tone-subdued {
  color: var(--bb-text-subdued);
}
.bb-text--tone-brand {
  color: var(--bb-color-red);
}
.bb-text--tone-onRedStrong {
  color: var(--bb-on-red-strong);
}
.bb-text--tone-onRed {
  color: var(--bb-on-red);
}
.bb-text--tone-onRedHint {
  color: var(--bb-on-red-hint);
}
.bb-text--tone-onRedSubdued {
  color: var(--bb-on-red-subdued);
}
.bb-text--tone-onRedChrome {
  color: var(--bb-on-red-chrome);
}
.bb-text--tone-onRedPlaceholder {
  color: var(--bb-on-red-placeholder);
}
.bb-text--tone-critical {
  color: var(--bb-critical-text);
}
.bb-text--tone-success {
  color: var(--bb-success-text);
}
.bb-text--tone-warning {
  color: var(--bb-warning-text);
}
.bb-text--tone-info {
  color: var(--bb-info-text);
}

/* ---- Weights ---- */
.bb-text--weight-regular {
  font-weight: var(--bb-weight-regular);
}
.bb-text--weight-medium {
  font-weight: var(--bb-weight-medium);
}
.bb-text--weight-semibold {
  font-weight: var(--bb-weight-semibold);
}
.bb-text--weight-bold {
  font-weight: var(--bb-weight-bold);
}
.bb-text--weight-black {
  font-weight: var(--bb-weight-black);
}

/* ---- Modifiers ---- */
.bb-text--align-start {
  text-align: start;
}
.bb-text--align-center {
  text-align: center;
}
.bb-text--align-end {
  text-align: end;
}
.bb-text--italic {
  font-style: italic;
}
.bb-text--truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}