/* =============================================================
   FAIR BUSINESS — DESIGN SYSTEM
   Tokens, base, and shared components used across all panel pages.
   Source of truth distilled from existing prototypes.
   ============================================================= */

/* ============== TOKENS ============== */
:root {
  /* Brand */
  --white: #FFFFFF;
  --green: #38AD4E;
  --green-hover: #2E9341;
  --green-light: #4DBE63;
  --green-dark: #237D38;
  --green-darker: #1A5E2A;
  --green-50:  #F4FAF3;
  --green-100: #E5F1E3;
  --green-200: #C9E5C3;
  --green-600: #2E9341;

  /* Neutrals */
  --slate-900: #0F172A;
  --slate-800: #1E293B;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748B;
  --slate-400: #94A3B8;
  --slate-300: #CBD5E1;
  --slate-200: #E2E8F0;
  --slate-100: #F1F5F9;
  --slate-50:  #F8FAFC;

  /* Semantic */
  --red-700: #B91C1C;
  --red-600: #DC2626;
  --red-500: #EF4444;
  --red-100: #FEE2E2;
  --red-50:  #FEF2F2;

  --amber-700: #B45309;
  --amber-500: #F59E0B;
  --amber-400: #FBBF24;
  --amber-100: #FEF3C7;
  --amber-50:  #FFFBEB;

  --blue-700: #1D4ED8;
  --blue-600: #2563EB;
  --blue-500: #3B82F6;
  --blue-100: #DBEAFE;
  --blue-50:  #EFF6FF;

  --purple-600: #7C3AED;
  --purple-100: #EDE9FE;
  --purple-50:  #F5F3FF;

  /* Shadows */
  --shadow-xs: 0 1px 1px 0 rgba(15,23,42,.04);
  --shadow-sm: 0 1px 2px 0 rgba(15,23,42,.05);
  --shadow-md: 0 4px 16px -4px rgba(15,23,42,.08);
  --shadow-lg: 0 12px 40px -8px rgba(15,23,42,.18), 0 0 0 1px rgba(15,23,42,.05);
  --shadow-mega: 0 20px 48px -16px rgba(15,23,42,.14);
  --shadow-cta: 0 4px 14px -2px rgba(56,173,78,.30);
  --shadow-card: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
  --shadow-card-hover: 0 8px 28px -8px rgba(15,23,42,.12), 0 2px 6px rgba(15,23,42,.04);
  --shadow-drawer: -20px 0 60px -10px rgba(15,23,42,.20);

  /* Radii */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 20px;
  --radius-full: 999px;

  /* Easing */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);

  /* Layout */
  /* v1.2.90: bumped 1280 → 1400 for more breathing room on archives + single
     pages. Surrounding files with hardcoded 1280px max-width (public-*.css,
     footer.css) were updated in the same release to match. */
  --container: 1400px;
  --container-narrow: 880px;
  --sidebar-w: 320px;
  --sidebar-collapsed-w: 72px;

  /* ─────────── Typography scale (v1.2.49 → v1.2.90 uplift) ───────────
   * Use these tokens for EVERY font-size in templates. If a value you
   * need isn't here, snap to the nearest token rather than inventing a
   * new one — the design suffers more from inconsistent scale than from
   * 1px size deltas.
   *
   * v1.2.90: every step bumped 8-17% for readability. Body default
   * (--fs-md) kept at a +1px conservative bump (14→15) so form-control
   * + button heights don't need re-padding. Larger tokens got bigger
   * uplifts since headings have more room to breathe.
   *
   * Token       Use case                                       v89   v90
   * ─────────   ────────────────────────────────────────────   ───   ───
   * --fs-xs     eyebrow caps, tiny labels, footer micro-print  11    12
   * --fs-sm     meta info (timestamps, byline, badge counts)   12    13
   * --fs-base   table cells, dense secondary text              13    14
   * --fs-md     BODY DEFAULT, paragraph, form fields, buttons  14    15
   * --fs-lg     emphasized body, list item titles              15    16
   * --fs-xl     card titles, H6, intro paragraphs              16    18
   * --fs-2xl    H5, sidebar headings                           18    20
   * --fs-3xl    H4, subsection headings                        22    24
   * --fs-4xl    H3, panel titles                               28    32
   * --fs-5xl    H2, page titles                                32    36
   * --fs-6xl    major section dividers                         36    42
   * --fs-7xl    H1, hero subhead                               44    50
   * --fs-display hero only, once per page max                  52    60
   */
  --fs-xs:      12px;
  --fs-sm:      13px;
  --fs-base:    14px;
  --fs-md:      15px;
  --fs-lg:      16px;
  --fs-xl:      18px;
  --fs-2xl:     20px;
  --fs-3xl:     24px;
  --fs-4xl:     32px;
  --fs-5xl:     36px;
  --fs-6xl:     42px;
  --fs-7xl:     50px;
  --fs-display: 60px;

  /* ─────────── Line-height tokens (v1.2.49 → v1.2.50) ───────────
   * 13 raw values were in use across the theme — replace with these
   * 4 semantic tokens. Pick by the role of the text, not the size.
   *
   * --lh-tight    1.1   display, hero — visual punch
   * --lh-snug     1.25  H1-H3 — headings still readable but compact
   * --lh-normal   1.55  BODY DEFAULT (v1.2.50: bumped 1.5 → 1.55)
   *                    per PDF audit. Georgian script has tall ascenders
   *                    and descenders that crowd at 1.5; 1.55 adds the
   *                    breathing room without feeling sparse.
   * --lh-relaxed  1.7   long-form paragraphs (article bodies, T&C) */
  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-relaxed: 1.7;

  /* Mobile breakpoint helpers */
  --mobile-row1: 60px;
  --mobile-row2: 56px;
}

/* ============== FONT FACES ==============
 * v1.2.110 — TBC Contractica CAPS family for branded headings (Latin + Georgian).
 *
 * Why CAPS: per brand direction, headings + titles use the all-caps variant.
 * Georgian script has no case distinction so the CAPS family's Georgian glyphs
 * are stylistic — a heavier, more architectural rendering than the default body
 * font (FiraGO). Body / paragraph text stays on FiraGO for long-form legibility.
 *
 * Weights loaded:
 *   - 700 Bold: h1, h2, .h-display, .page-title (main headlines, hero copy)
 *   - 500 Medium: h3, h4, h5, h6 (sub-headings, card titles, sidebar labels)
 *
 * Two weights kept on purpose — every extra @font-face is +100 KB on first paint.
 * Light / Regular / Book + the non-CAPS family are available in the source pack
 * if we want to extend to body or display weights later (assets/fonts/ source
 * was tbc contractica 9/, copied from the brand package).
 *
 * font-display: swap means: render text in FiraGO immediately, swap to
 * Contractica when it arrives — no FOIT, just FOUT.
 * ============================================ */
@font-face {
  font-family: 'TBC Contractica CAPS';
  src: url('../fonts/TBCContracticaCAPS-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'TBC Contractica CAPS';
  src: url('../fonts/TBCContracticaCAPS-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ============== RESET / BASE ============== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'FiraGO', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--slate-900);
  background: var(--slate-50);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-md);
  line-height: var(--lh-normal); /* v1.2.49: was raw 1.5 → token */
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--green-100); color: var(--green-dark); }

/* Focus visibility */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

/* ============== LAYOUT UTILITIES ============== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }
.container-narrow { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }
/* v1.2.121 (#15) — `.fb-container` was referenced by search.php, index.php
   (.fb-fallback) and 404.php (.fb-404) but never declared, so those pages had
   full-bleed, padding-less content. Alias it to the narrow content width — these
   are text/result pages, not wide card grids, so the 880px measure reads better
   than the full 1400px. One declaration fixes all three templates. */
.fb-container { max-width: var(--container-narrow); margin: 0 auto; padding: 0 24px; }

.stack { display: flex; flex-direction: column; }
.row { display: flex; }
.between { display: flex; align-items: center; justify-content: space-between; }
.center-x { display: flex; justify-content: center; }
.center-y { display: flex; align-items: center; }

.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.gap-6  { gap: 24px; }
.gap-8  { gap: 32px; }

.muted { color: var(--slate-500); }
.subtle { color: var(--slate-400); }

/* ============== TYPOGRAPHY ==============
 *
 * v1.2.49: naked h1-h6 element rules below + the .h-* utility classes.
 *
 * Before v1.2.49 only the utility classes existed. Templates that wrote
 * raw <h1> without remembering to add `.h-1` fell back to browser
 * defaults (32px serif) — giving the audit-flagged inconsistent type.
 * The naked rules below mirror the utility classes 1:1, so every <h2>
 * is automatically sized like .h-2 unless the template overrides.
 *
 * The .h-* utility classes remain so designers can apply heading
 * styling to non-heading elements (e.g. <span class="h-3">).
 */

/* v1.2.50 corrections vs v1.2.49 (PDF audit re-comparison):
 *   - h2: 32 → 28  (PDF rec "26-28", v1.2.49 was at the high end of a "20-32" complaint zone)
 *   - h3: 22 → 18  (PDF rec "17-18", v1.2.49 was way too big for the subsection role
 *                   templates actually use <h3> for — card titles, panel headers etc.)
 *   - h4: 18 → 16  (cascade down since h3 took the 18 slot)
 *   - h5: 16 → 15
 *   - h6: 15 → 14  (matches body — h6 is rarely used, mostly for screen-reader semantics)
 *
 * v1.2.52: REMOVED `color: var(--slate-900)` from every heading rule.
 *   Before: headings forced themselves to dark slate regardless of context.
 *   Result: the `<h2>` inside .cta-business (dark navy section, white text
 *   inherited from container) rendered dark-on-dark = invisible.
 *   After: headings inherit color from their parent. Body sets slate-900,
 *   so most contexts still get dark text. Dark sections that override their
 *   own text color via `.cta-business { color: white }` etc now pass the
 *   white inheritance through to nested headings, as expected.
 */
/* v1.2.110 — TBC Contractica CAPS applied to every heading + the .h-* utility
   classes. Weight choice notes:
   - h1, h2, .h-display, .page-title → 700 (Bold) for impact at large sizes
   - h3 → 600 was the previous FiraGO weight; mapped to 700 (Contractica's
     mid-weight Medium 500 reads thin at 18px after the visual style change,
     bumping to Bold keeps the visual weight users are used to)
   - h4-h6 → 500 (Medium) so smaller titles don't feel oppressive; provides
     a clear visual hierarchy below the h1/h2/h3 cluster.
   Letter-spacing tightened by ~0.005em where Contractica's wider default
   spacing made tracking feel loose. */
h1, .h-1 {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-7xl);            /* 44px */
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: var(--lh-snug);
}
h2, .h-2 {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-4xl);            /* 28px */
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: var(--lh-snug);
}
h3, .h-3 {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-2xl);            /* 18px */
  font-weight: 700;
  letter-spacing: -.012em;
  line-height: var(--lh-snug);
}
h4, .h-4 {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-xl);             /* 16px */
  font-weight: 500;
  letter-spacing: -.008em;
  line-height: var(--lh-snug);
}
h5, .h-5 {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-lg);             /* 15px */
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: var(--lh-snug);
}
h6, .h-6 {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-md);             /* 14px — same as body but bold */
  font-weight: 500;
  line-height: var(--lh-snug);
}
/* v1.2.110 — also catch title-utility classes that live on <span> / <div>
   instead of <h*>, so the h-tag font-family inheritance doesn't reach them.
   `.card-title`, `.section-head-title`, `.page-title`, `.hero-title`,
   `.article-title`, `.company-name` are the common offenders found across
   the theme. Anywhere else that wants the branded title look can add the
   `.h-display` or `.h-1` … `.h-6` utility class — those cascade Contractica
   via the rules above. */
.card-title,
.section-head-title,
.page-title,
.hero-title,
.article-title,
.company-name,
.sb-label {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
}

/* v1.2.121 (#16) — let long unbroken strings (URLs, emails, hashtags, very
   long company names, Georgian compound words) wrap instead of forcing the
   element wider than its column. Applied to EVERY heading element + every
   title-utility class declared above (the full list, intentionally NOT a
   subset) so no surface is missed. `break-word` keeps normal word-breaking
   first and only breaks mid-word when a single token can't fit; `anywhere`
   additionally lets the token's width be ignored for min-content sizing so a
   long word inside a CSS grid/flex child can't blow out the track width — this
   is the actual cause of the complaint-page right-column clip on mobile.
   These elements are short-text titles, so the visual cost of mid-word breaks
   is negligible and only triggers in the overflow edge case. */
h1, .h-1,
h2, .h-2,
h3, .h-3,
h4, .h-4,
h5, .h-5,
h6, .h-6,
.h-display,
.card-title,
.section-head-title,
.page-title,
.hero-title,
.article-title,
.company-name,
.sb-label {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Hero display — explicit class, no naked counterpart. */
.h-display {
  font-family: 'TBC Contractica CAPS', 'FiraGO', sans-serif;
  font-size: var(--fs-display);        /* 52px */
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: var(--lh-tight);
}
.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--slate-400);
}
.eyebrow.is-green { color: var(--green-600); }

/* ─────────── FB-specific text utilities (v1.2.50) ───────────
 * Per PDF audit recommendations. Replace raw inline font-size on
 * these element classes whenever you spot them in templates.
 *
 * .fb-score-display  the big colored Score number on cards/pages.
 *                    Audit had 18-20px scattered; this gives all
 *                    surfaces the same 24px reading.
 * .fb-meta           timestamps, "filed by X", small captions in
 *                    card footers. Audit found 12px crowded — bump
 *                    to 13px for legibility.
 * .fb-breadcrumb     nav/breadcrumb trails. 13px (was 11-12) — small
 *                    enough to feel chrome-level but legible.
 * .fb-caption        image captions, supporting paragraphs.
 *                    15px / relaxed line-height for content density.
 */
.fb-score-display {
  font-size: 28px;                     /* v1.2.90: 24 → 28 to match heading uplift */
  font-weight: 700;
  line-height: var(--lh-tight);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.fb-meta {
  font-size: var(--fs-base);           /* 14px (was 13) */
  line-height: var(--lh-snug);
  color: var(--slate-500);
}
.fb-breadcrumb {
  font-size: var(--fs-base);           /* 14px (was 13) */
  line-height: var(--lh-snug);
  color: var(--slate-500);
  font-weight: 500;
}
.fb-caption {
  font-size: var(--fs-lg);             /* 16px (was 15) */
  line-height: var(--lh-relaxed);
  color: var(--slate-700);
}

/* ─────────── .fb-prose — content body class (v1.2.51) ───────────
 * Per PDF audit, body text scored 3.5/10 — too small (13-14px) and
 * too tight to read comfortably as actual prose. The fix is NOT to
 * bump the global body (would inflate every form field, button, table
 * cell). Instead, opt-in: apply .fb-prose to ARTICLE / content
 * containers — complaint bodies, review bodies, product descriptions,
 * static page content.
 *
 * Sizes: 16px / 1.7 line-height (PDF top-of-range). Drops to 15px on
 * mobile to keep cards from over-wrapping.
 */
.fb-prose {
  font-size: var(--fs-xl);             /* 16px */
  line-height: var(--lh-relaxed);      /* 1.7 */
  color: var(--slate-700);
}
.fb-prose p { margin: 0 0 12px; }
.fb-prose p:last-child { margin-bottom: 0; }
@media (max-width: 640px) {
  .fb-prose { font-size: var(--fs-lg); /* 15px on mobile */ }
}

/* ============== BUTTONS ============== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--slate-900);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .005em;
  cursor: pointer;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease), box-shadow .2s var(--ease), transform .1s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}
.btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn:disabled, .btn.is-disabled { opacity: .55; cursor: not-allowed; }

.btn-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover:not(:disabled) {
  background: var(--green-hover);
  box-shadow: var(--shadow-cta);
}
.btn-primary:active:not(:disabled) { transform: translateY(1px); background: var(--green-dark); }

/* v1.2.105 (C10): "Saved ✓" flash state — applied by fb-save-feedback.js when a
   form with data-fb-save-feedback submits successfully. Briefly swaps the
   button label to a checkmark + "Saved" so the user gets explicit confirmation
   without having to scroll up to a banner. Disabled during the flash so a
   second click can't trigger a double-submit while the page reloads. */
button.is-saved-flash,
.btn.is-saved-flash {
  background: var(--green-dark, #237d38) !important;
  color: #ffffff !important;
  cursor: default;
  pointer-events: none;
}
button.is-saved-flash .fb-saved-flash,
.btn.is-saved-flash .fb-saved-flash {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600;
}

.btn-secondary {
  background: var(--white);
  color: var(--slate-900);
  border-color: var(--slate-200);
}
.btn-secondary:hover:not(:disabled) {
  border-color: var(--slate-300);
  background: var(--slate-50);
}

.btn-ghost {
  background: transparent;
  color: var(--slate-700);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--slate-100);
  color: var(--slate-900);
}

.btn-danger {
  background: var(--white);
  color: var(--red-600);
  border-color: var(--red-100);
}
.btn-danger:hover:not(:disabled) {
  background: var(--red-50);
  border-color: var(--red-500);
  color: var(--red-700);
}

.btn-danger-solid {
  background: var(--red-500);
  color: var(--white);
}
.btn-danger-solid:hover:not(:disabled) {
  background: var(--red-600);
  box-shadow: 0 4px 14px -2px rgba(239,68,68,.30);
}

.btn-link {
  background: transparent;
  color: var(--green-600);
  height: auto;
  padding: 4px 0;
  border: none;
}
.btn-link:hover:not(:disabled) { color: var(--green-dark); text-decoration: underline; }

.btn-sm  { height: 32px; padding: 0 12px; font-size: var(--fs-base); border-radius: var(--radius-sm); }
.btn-sm svg { width: 14px; height: 14px; }
.btn-lg  { height: 48px; padding: 0 20px; font-size: var(--fs-lg); border-radius: var(--radius-md); }
.btn-lg svg { width: 18px; height: 18px; }
.btn-xl  { height: 56px; padding: 0 24px; font-size: var(--fs-xl); border-radius: var(--radius-md); }

.btn-icon { width: 40px; padding: 0; }
.btn-icon.btn-sm { width: 32px; }
.btn-icon.btn-lg { width: 48px; }

.btn-block { width: 100%; }

/* ============== FORM CONTROLS ============== */
.field { position: relative; margin-bottom: 16px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.field-row .field { margin-bottom: 0; }

.field-label {
  display: block;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--slate-700);
  margin-bottom: 6px;
}
.field-label .req { color: var(--red-500); }
.field-label .opt { color: var(--slate-400); font-weight: 400; }

.input,
.textarea,
.select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--fs-md);
  color: var(--slate-900);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), background .15s var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--slate-400); }
.input:hover, .textarea:hover, .select:hover { border-color: var(--slate-300); }
.input:focus, .textarea:focus, .select:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(56,173,78,.15);
}
.input.is-error, .textarea.is-error, .select.is-error { border-color: var(--red-500); }
.input.is-error:focus, .textarea.is-error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }
.input.is-success { border-color: var(--green); }
.input:disabled, .textarea:disabled { background: var(--slate-50); color: var(--slate-500); cursor: not-allowed; }

.input-with-icon { position: relative; }
.input-with-icon .input { padding-left: 40px; }
.input-with-icon .input-icon {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: var(--slate-400); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}

.input-with-trailing { position: relative; }
.input-with-trailing .input { padding-right: 44px; }
.input-with-trailing .trailing-btn {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--slate-400);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.input-with-trailing .trailing-btn:hover { color: var(--green); background: var(--green-50); }
.input-with-trailing .trailing-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.textarea { height: auto; padding: 12px 14px; min-height: 100px; resize: vertical; line-height: 1.5; }

.select { padding-right: 38px; 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='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; }

.field-help {
  font-size: var(--fs-sm);
  color: var(--slate-500);
  margin-top: 6px;
  line-height: 1.45;
}
.field-help.is-error { color: var(--red-600); }
.field-help.is-error .field-help-icon { color: var(--red-500); }
.field-help svg {
  display: inline-block;
  width: 14px; height: 14px;
  vertical-align: -2px;
  margin-right: 4px;
  stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.field-counter {
  font-size: var(--fs-sm);
  color: var(--slate-400);
  text-align: right;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.field-counter.is-warn { color: var(--amber-500); }
.field-counter.is-error { color: var(--red-500); font-weight: 600; }

/* ====== Floating-label form group (replicates login/register prototype's .fb-form-group) ====== */
.fb-form-group {
  position: relative;
  margin-bottom: 16px;
}
.fb-form-group label {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-md);
  color: var(--slate-400);
  pointer-events: none;
  transition: all .2s var(--ease);
  background: var(--white);
  padding: 0 4px;
  z-index: 1;
  font-weight: 400;
}
.fb-form-group.focused label,
.fb-form-group.filled label {
  top: 0;
  font-size: var(--fs-xs);
  color: var(--green);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.fb-form-group input[type="text"],
.fb-form-group input[type="email"],
.fb-form-group input[type="tel"],
.fb-form-group input[type="password"] {
  width: 100%;
  height: 50px;
  padding: 6px 14px;
  border: 1.5px solid var(--slate-200);
  border-radius: var(--radius-md);
  font-size: var(--fs-lg);
  font-family: inherit;
  color: var(--slate-900);
  background: var(--white);
  outline: none;
  transition: all .2s var(--ease);
}
.fb-form-group input[type="text"]:hover,
.fb-form-group input[type="email"]:hover,
.fb-form-group input[type="tel"]:hover,
.fb-form-group input[type="password"]:hover {
  border-color: var(--slate-300);
}
.fb-form-group input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(56,173,78,.15);
}
.fb-form-group input.error { border-color: var(--red-500); }
.fb-form-group input.error:focus { box-shadow: 0 0 0 3px rgba(239,68,68,.15); }

.fb-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  color: var(--slate-400);
  border-radius: var(--radius-xs);
  transition: color .15s var(--ease), background .15s var(--ease);
}
.fb-password-toggle:hover { color: var(--green); background: var(--green-50); }
.fb-password-toggle svg { width: 18px; height: 18px; display: block; }

/* Password strength bar (matches register-prototype's 3-stop pattern) */
.fb-password-strength { margin-top: -8px; margin-bottom: 16px; }
.fb-strength-bar {
  height: 4px;
  background: var(--slate-100);
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 6px;
}
.fb-strength-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .25s var(--ease), background .25s var(--ease);
}
.fb-strength-fill.weak { width: 33%; background: var(--red-500); }
.fb-strength-fill.medium { width: 66%; background: var(--amber-500); }
.fb-strength-fill.strong { width: 100%; background: var(--green); }
.fb-strength-text { font-size: var(--fs-sm); color: var(--slate-500); }
.fb-strength-text.weak { color: var(--red-500); }
.fb-strength-text.medium { color: var(--amber-500); }
.fb-strength-text.strong { color: var(--green); }

/* Buttons that match the auth-flow primary CTA */
.fb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 48px;
  padding: 0 18px;
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--fs-md);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: all .2s var(--ease);
  outline: none;
  text-decoration: none;
}
.fb-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.fb-btn:disabled { opacity: .6; cursor: not-allowed; }
.fb-btn-primary {
  background: var(--green);
  color: var(--white);
  box-shadow: var(--shadow-cta);
}
.fb-btn-primary:hover:not(:disabled) {
  background: var(--green-hover);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px -2px rgba(56,173,78,.4);
}
.fb-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  background: var(--green-dark);
}

.fb-btn-secondary {
  background: var(--white);
  color: var(--slate-900);
  border: 1.5px solid var(--slate-200);
}
.fb-btn-secondary:hover:not(:disabled) {
  border-color: var(--green);
  background: var(--green-50);
  color: var(--green);
}

/* Checkbox / radio */
.check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
.check input[type="checkbox"],
.check input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--slate-300);
  border-radius: var(--radius-xs);
  background: var(--white);
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color .15s var(--ease), background .15s var(--ease), box-shadow .15s var(--ease);
  margin-top: 1px;
}
.check input[type="radio"] { border-radius: 50%; }
.check input[type="checkbox"]:hover,
.check input[type="radio"]:hover { border-color: var(--green); }
.check input[type="checkbox"]:checked,
.check input[type="radio"]:checked {
  background: var(--green); border-color: var(--green);
}
.check input[type="checkbox"]:checked::after {
  content: ''; position: absolute; left: 5px; top: 1px;
  width: 5px; height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.check input[type="radio"]:checked::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 6px; height: 6px;
  background: white; border-radius: 50%;
  transform: translate(-50%, -50%);
}
.check input:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(56,173,78,.18);
}
.check-text {
  font-size: var(--fs-md);
  color: var(--slate-700);
  line-height: 1.45;
}
.check-text a { color: var(--green-600); font-weight: 500; }
.check-text a:hover { text-decoration: underline; }

/* Switch / toggle */
.switch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.switch-input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track {
  width: 40px;
  height: 22px;
  background: var(--slate-300);
  border-radius: 999px;
  position: relative;
  transition: background .2s var(--ease);
  flex-shrink: 0;
}
.switch-track::after {
  content: '';
  position: absolute;
  left: 2px; top: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .2s var(--ease);
}
.switch-input:checked + .switch-track {
  background: var(--green);
}
.switch-input:checked + .switch-track::after {
  transform: translateX(18px);
}
.switch-input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px rgba(56,173,78,.18);
}
.switch-label { font-size: var(--fs-md); font-weight: 500; color: var(--slate-700); }

/* Star rating */
.stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.stars-input { display: inline-flex; gap: 4px; }
.stars-input button {
  background: none;
  border: none;
  padding: 4px;
  color: var(--slate-300);
  transition: color .12s var(--ease), transform .1s var(--ease);
  cursor: pointer;
}
.stars-input button:hover { transform: scale(1.1); }
.stars-input button.is-active,
.stars-input button.is-hovered { color: var(--amber-400); }
.stars-input svg { width: 24px; height: 24px; fill: currentColor; }

.stars-display { display: inline-flex; align-items: center; gap: 1px; }
.stars-display svg { width: 14px; height: 14px; fill: var(--slate-200); }
.stars-display svg.is-filled { fill: var(--amber-400); }
.stars-display svg.is-half { fill: url(#half-star-gradient); }

.stars-sm svg { width: 12px; height: 12px; }
.stars-md svg { width: 16px; height: 16px; }
.stars-lg svg { width: 20px; height: 20px; }
.stars-xl svg { width: 28px; height: 28px; }

/* ============== STATUS BADGES — SINGLE SOURCE OF TRUTH ==============
 *
 * Every status pill across the site uses .badge + a .badge-<status> modifier.
 * This is the ONLY place that defines colors for these. Page-level CSS files
 * MUST NOT redeclare .badge-pending / .badge-active / .badge-resolved / etc.
 * If a page needs a different visual treatment, use a different class name —
 * don't override these.
 *
 * Color philosophy:
 *   - bg = -50 shade (light, low-saturation wash so text dominates)
 *   - text = -600/-700 shade for legibility
 *   - dot (::before) = -500 shade (bright, signals the semantic meaning at
 *     a glance even without reading the label)
 *
 * Semantic meanings:
 *   pending     → amber  → awaiting action (moderation / response queue)
 *   active      → blue   → in-progress, attention required
 *   processing  → purple → action taken, waiting on other party
 *   resolved    → green  → success / closed positive
 *   rejected    → slate  → dismissed / inactive (neutral, not failure)
 *   unsolved    → red    → failed / auto-closed unresolved (only RED status)
 *
 * If you see "pending" rendering as red, search the codebase for duplicate
 * `.badge-pending` rules that override these. They should not exist.
 */
/* Canonical pill — fully rounded ("status chip" convention). Each variant
   below adds a tinted background, matching border, and a colored dot via
   ::before. Two sizes: default (26px, inline-list use) + .badge-lg (34px,
   hero use). Page CSS files (public-complaint, public-product, public-
   company) used to declare their own pill classes (.ch-status-pill,
   .similar-row-status, .complaint-status) — all removed; everything routes
   through .badge here now. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 12px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: .02em;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  white-space: nowrap;
  line-height: 1;
}
.badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.badge::before {
  content: '';
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.badge.no-dot::before { display: none; }

/* Text + background per status.
   Pending uses amber-600 (#D97706) not amber-700 (#B45309). amber-700 has
   such a high red component that on small bold text inside a colored pill
   most viewers read it as red-brown — exactly the "error" cue we don't want
   for an "awaiting action" status. amber-600 keeps WCAG-AA contrast on
   amber-50 while reading as clearly orange-yellow. */
/* Background + matching border. Border is the -200 shade — same hue as the
   bg, slightly darker — so the pill has a defined edge without competing
   with the colored text. Without the border the pills bleed into card
   backgrounds and lose their "chip" identity. */
.badge-pending    { background: var(--amber-50);  color: var(--amber-600);  border-color: var(--amber-200); }
.badge-active     { background: var(--blue-50);   color: var(--blue-700);   border-color: var(--blue-100); }
.badge-processing { background: var(--purple-50); color: var(--purple-600); border-color: var(--purple-200, #DDD6FE); }
.badge-resolved   { background: var(--green-50);  color: var(--green-600);  border-color: var(--green-200); }
.badge-rejected   { background: var(--slate-100); color: var(--slate-600);  border-color: var(--slate-200); }
.badge-unsolved   { background: var(--red-50);    color: var(--red-600);    border-color: var(--red-100); }

/* Dot colors per status. Explicit overrides so the small ::before doesn't
   inherit the dark text color (which would make all dots look brown-red).
   Each dot uses the -500 shade so the green dot looks green, the amber dot
   looks amber, etc. — clear signal even at 6px. */
.badge-pending::before    { background: var(--amber-500); }
.badge-active::before     { background: var(--blue-500); }
.badge-processing::before { background: var(--purple-600); }
.badge-resolved::before   { background: #22C55E; }
.badge-rejected::before   { background: var(--slate-400); }
.badge-unsolved::before   { background: var(--red-500); }
.badge-live { background: var(--green-50); color: var(--green-600); }
.badge-draft { background: var(--slate-100); color: var(--slate-600); }
.badge-info { background: var(--blue-50); color: var(--blue-700); }
/* A14/B2: "Company replied" tag on My-reviews rows — distinct blue so a replied
   review is easy to spot among the Live/Pending/Rejected status pills. */
.badge-replied { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-100); }
.badge-replied::before { background: var(--blue-500); }

.badge-public { background: var(--blue-50); color: var(--blue-700); }
.badge-private { background: var(--slate-100); color: var(--slate-700); }

.badge-solid {
  background: var(--green); color: white;
  height: 24px; padding: 0 10px;
  font-size: var(--fs-xs);
}
.badge-solid::before { background: white; }

/* Hero variant — visibly larger, with uppercase + tracking so it reads as a
   stage indicator at the top of a single page. Used on .complaint-hero,
   single article hero, etc. */
.badge-lg {
  height: 32px;
  padding: 0 14px;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.badge-lg::before { width: 7px; height: 7px; }

/* ============== CARDS ============== */
.card {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}
.card-padded { padding: 24px; }
.card-padded-lg { padding: 32px; }

.card-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.card-header-title { font-size: var(--fs-xl); font-weight: 600; color: var(--slate-900); }
.card-header-subtitle { font-size: var(--fs-base); color: var(--slate-500); margin-top: 2px; }
.card-body { padding: 20px; }
.card-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  background: var(--slate-50);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.card-hoverable {
  transition: box-shadow .25s var(--ease), border-color .15s var(--ease), transform .15s var(--ease);
  cursor: pointer;
}
.card-hoverable:hover {
  box-shadow: var(--shadow-card-hover);
  border-color: var(--slate-300);
}

/* ============== TAB NAV (replicates company-page-prototype) ============== */
.tab-nav {
  background: var(--white);
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-lg);
  margin: 0 0 24px;
  padding: 4px;
  display: flex; align-items: center;
  gap: 2px;
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar { display: none; }
.tab {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px;
  background: transparent;
  border: none; border-radius: var(--radius-sm);
  font-size: var(--fs-base); font-weight: 500;
  color: var(--slate-600);
  white-space: nowrap;
  transition: all .15s var(--ease);
  cursor: pointer;
  font-family: inherit;
}
.tab:hover { background: var(--slate-50); color: var(--slate-900); }
.tab.is-active {
  background: var(--slate-900);
  color: var(--white);
  font-weight: 600;
}
.tab-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 18px;
  padding: 0 6px;
  background: var(--slate-100);
  color: var(--slate-700);
  border-radius: 999px;
  font-size: var(--fs-xs);
  font-weight: 600;
}
.tab.is-active .tab-count {
  background: rgba(255,255,255,.15);
  color: var(--white);
}

/* Inline count next to tab label (no wrapper / no badge) */
.tab .tab-num {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--slate-400);
  font-variant-numeric: tabular-nums;
  margin-left: 4px;
}
.tab.is-active .tab-num {
  color: rgba(255,255,255,.7);
}

/* ============== AVATARS ============== */
.avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: var(--fs-base);
  font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ============== AVATAR CIRCULARITY ENFORCEMENT ==============
 *
 * Profile pictures (people, NOT company logos) must always render circular.
 * Several per-page avatar classes were declared with `border-radius: 50%` on
 * the container but no `overflow: hidden` and no rule on the nested `<img>`,
 * so the image overflowed the rounded boundary and rendered as a rectangle.
 *
 * This block enforces the contract globally:
 *   - every known avatar class becomes a circle with clipped contents
 *   - the inner `<img>` fills the circle and is cropped via object-fit:cover
 *
 * Company-logo containers (`.sb-vendor-logo`, `.cc-logo`, `.product-card-thumb`,
 * `vendor-avatar` etc.) keep their own rounded-square styles and are NOT
 * affected — those represent brands, not people.
 */
.sb-filer-avatar,
.review-avatar,
.account-hero-avatar,
.thread-avatar,
.thread-msg-avatar,
.cc-filer .fb-avatar,
.cc-filer .fa,
.fb-thread__avatar,
.fb-row-thumb.is-person,
.fb-actor-card-avatar {
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative;
}
.sb-filer-avatar > img,
.review-avatar > img,
.account-hero-avatar > img,
.thread-avatar > img,
.thread-msg-avatar > img,
.cc-filer .fb-avatar > img,
.cc-filer .fa > img,
.fb-thread__avatar > img,
.fb-row-thumb.is-person > img,
.fb-actor-card-avatar > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.avatar.avatar-green { background: linear-gradient(135deg, var(--green-light), var(--green-dark)); color: white; }
.avatar.avatar-slate { background: var(--slate-900); color: white; }

.avatar-xs { width: 24px; height: 24px; font-size: 10px; }
.avatar-sm { width: 32px; height: 32px; font-size: var(--fs-sm); }
.avatar-md { width: 40px; height: 40px; font-size: var(--fs-base); }
.avatar-lg { width: 56px; height: 56px; font-size: var(--fs-xl); }
.avatar-xl { width: 88px; height: 88px; font-size: var(--fs-3xl); }
.avatar-2xl { width: 120px; height: 120px; font-size: var(--fs-4xl); }

.avatar-stack { display: inline-flex; }
.avatar-stack > .avatar { border: 2px solid var(--white); margin-left: -8px; }
.avatar-stack > .avatar:first-child { margin-left: 0; }

/* ============== ALERTS ============== */
.alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-size: var(--fs-md);
  line-height: 1.5;
}
.alert-icon {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
  stroke: currentColor; fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
.alert-content { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; margin-bottom: 2px; line-height: 1.4; }
.alert-message { color: inherit; opacity: .85; font-size: var(--fs-base); }
.alert-actions { display: flex; gap: 8px; margin-top: 10px; }

.alert-info {
  background: var(--blue-50);
  border-color: rgba(59, 130, 246, .15);
  color: var(--blue-700);
}
.alert-success {
  background: var(--green-50);
  border-color: var(--green-100);
  color: var(--green-dark);
}
.alert-warning {
  background: var(--amber-50);
  border-color: rgba(245, 158, 11, .2);
  color: var(--amber-700);
}
.alert-danger {
  background: var(--red-50);
  border-color: var(--red-100);
  color: var(--red-700);
}

/* ============== TOOLBAR / FILTERS ============== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }

.search-input {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 360px;
}
.search-input input {
  width: 100%;
  height: 40px;
  padding: 0 14px 0 38px;
  border: 1px solid var(--slate-200);
  border-radius: var(--radius-md);
  background: var(--white);
  font-size: var(--fs-md);
  color: var(--slate-900);
  outline: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.search-input input::placeholder { color: var(--slate-400); }
.search-input input:focus {
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(56,173,78,.15);
}
.search-input svg {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px;
  stroke: var(--slate-400); fill: none;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}

/* ============== EMPTY STATE ============== */
.empty-state {
  text-align: center;
  padding: 56px 24px;
  max-width: 480px;
  margin: 0 auto;
}
.empty-state-icon {
  width: 96px; height: 96px;
  margin: 0 auto 24px;
  border-radius: 50%;
  background: var(--green-50);
  color: var(--green-600);
  display: inline-flex; align-items: center; justify-content: center;
}
.empty-state-icon svg {
  width: 40px; height: 40px;
  stroke: currentColor; fill: none;
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.empty-state-title {
  font-size: var(--fs-3xl);
  font-weight: 600;
  color: var(--slate-900);
  letter-spacing: -.012em;
  margin-bottom: 10px;
}
.empty-state-message {
  font-size: var(--fs-lg);
  color: var(--slate-500);
  line-height: 1.55;
  margin-bottom: 24px;
}
.empty-state-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }

/* ============== TIMELINE ============== */
.timeline { position: relative; padding-left: 28px; }
.timeline::before {
  content: '';
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--slate-200);
}
.timeline-item {
  position: relative;
  padding-bottom: 24px;
}
.timeline-item:last-child { padding-bottom: 0; }
.timeline-dot {
  position: absolute;
  left: -28px;
  top: 4px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--slate-300);
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 1;
}
.timeline-dot svg {
  width: 10px; height: 10px;
  stroke: white; fill: none;
  stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
}
.timeline-dot.is-done { background: var(--green); border-color: var(--green); }
.timeline-dot.is-active {
  background: var(--white);
  border-color: var(--green);
  box-shadow: 0 0 0 4px rgba(56,173,78,.18);
}
.timeline-dot.is-rejected { background: var(--red-500); border-color: var(--red-500); }
.timeline-dot.is-resolved { background: var(--green); border-color: var(--green); }
.timeline-meta {
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--slate-400);
  font-weight: 600;
  margin-bottom: 2px;
}
.timeline-title {
  font-size: var(--fs-md);
  font-weight: 600;
  color: var(--slate-900);
  margin-bottom: 4px;
}
.timeline-body {
  font-size: var(--fs-base);
  color: var(--slate-600);
  line-height: 1.5;
}

/* Header styles live in header.css (verbatim port of header-prototype.html). */

/* ============== MODAL / DIALOG ============== */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center;
  z-index: 999;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility 0s linear .25s;
}
.modal-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.modal {
  background: var(--white);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  max-width: 520px;
  width: 100%;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  transform: scale(.95) translateY(8px);
  transition: transform .25s var(--ease);
}
.modal-backdrop.is-open .modal { transform: scale(1) translateY(0); }
.modal-header {
  padding: 20px 24px 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--slate-100);
}
.modal-title { font-size: var(--fs-2xl); font-weight: 600; color: var(--slate-900); letter-spacing: -.005em; }
.modal-close {
  width: 32px; height: 32px;
  background: transparent; border: none; border-radius: var(--radius-sm);
  color: var(--slate-500);
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.modal-close:hover { background: var(--slate-100); color: var(--slate-900); }
.modal-close svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.modal-body { padding: 20px 24px; }
.modal-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--slate-100);
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px;
  background: var(--slate-50);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ============== TOOLTIPS / POPOVERS ============== */
.tooltip {
  position: relative;
  display: inline-flex;
}
.tooltip[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate-900);
  color: white;
  font-size: var(--fs-sm);
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  z-index: 60;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* A3/A10 — disabled-look for CTAs that must stay hoverable so their tooltip
   still shows the reason they're disabled. Unlike a real :disabled (which
   swallows pointer events on buttons), pointer-events stays auto so
   [data-fb-tip] below can fire on hover; the click itself is suppressed by the
   JS that owns this state. */
.is-cta-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: auto;
}

/* A3/A10 — instant, wrapping CSS tooltip bound to [data-fb-tip]. Reuses the
   .tooltip visual style above (slate-900 bg, white text, --fs-sm ≈13px,
   radius-sm, shadow) but differs in two ways the disabled-CTA case needs:
   (1) it wraps to a readable max-width instead of single-line nowrap, so a
   full "why is this disabled" sentence is legible, and (2) it carries a small
   arrow. No transition / no delay → the bubble appears the instant the
   element is hovered. Position it on any element directly (it doesn't require
   the .tooltip wrapper); add position:relative so the absolute bubble anchors
   to it. Hover-only by design — on touch there's no hover, so tap behavior on
   these elements is unchanged. */
[data-fb-tip] { position: relative; }
[data-fb-tip]:hover::after,
[data-fb-tip]:focus-visible::after {
  content: attr(data-fb-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--slate-900);
  color: white;
  font-size: var(--fs-sm);          /* ~13px */
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: normal;              /* wrap long reasons */
  max-width: 260px;
  width: max-content;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  z-index: 60;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}
/* Arrow — a small slate-900 triangle pointing down toward the element. */
[data-fb-tip]:hover::before,
[data-fb-tip]:focus-visible::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--slate-900);
  z-index: 60;
  pointer-events: none;
}

/* ============== STATE SWITCHER (debug overlay, used on prototype pages) ============== */
.state-switcher {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 500;
  background: var(--slate-900);
  color: white;
  border-radius: var(--radius-xl);
  padding: 14px;
  box-shadow: 0 20px 50px -10px rgba(0,0,0,.4);
  min-width: 280px;
  border: 1px solid rgba(255,255,255,.08);
  font-family: 'FiraGO', sans-serif;
}
.state-switcher.is-collapsed {
  min-width: 0;
  padding: 10px 14px;
}
.state-switcher.is-collapsed .ss-content { display: none; }
.state-switcher.is-collapsed .ss-header { padding-bottom: 0; margin-bottom: 0; border: none; }
.ss-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ss-title {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--slate-400);
  display: inline-flex; align-items: center; gap: 6px;
}
.ss-title::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 3px rgba(56,173,78,.25);
}
.ss-toggle-btn {
  background: transparent;
  border: none;
  color: var(--slate-400);
  cursor: pointer;
  width: 22px; height: 22px;
  border-radius: var(--radius-xs);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s var(--ease), color .15s var(--ease);
}
.ss-toggle-btn:hover { background: rgba(255,255,255,.08); color: white; }
.ss-toggle-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ss-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ss-row:last-child { margin-bottom: 0; }
.ss-label {
  font-size: var(--fs-xs);
  color: var(--slate-400);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.ss-toggle {
  display: flex;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.ss-toggle button {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--slate-400);
  font-size: var(--fs-base);
  font-weight: 500;
  padding: 7px 12px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .15s var(--ease), color .15s var(--ease);
  white-space: nowrap;
}
.ss-toggle button:hover { color: white; }
.ss-toggle button.is-active {
  background: var(--green);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 8px rgba(56,173,78,.4);
}

/* ============== HELPERS ============== */
.divider {
  height: 1px;
  background: var(--slate-200);
  border: none;
  margin: 16px 0;
}
.divider-vertical {
  width: 1px;
  background: var(--slate-200);
  align-self: stretch;
}

.hide { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

.skeleton {
  background: linear-gradient(90deg, var(--slate-100) 0%, var(--slate-200) 50%, var(--slate-100) 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ============== PAGE-LEVEL HORIZONTAL-OVERFLOW GUARD (v1.2.121 #16) ==========
 * A single oversized child (a long pasted URL, an attachment filename, a wide
 * data-grid, the complaint right-column "public visibility" block) used to push
 * the document wider than the viewport on narrow screens. The page then scrolled
 * sideways and the right edge of cards looked "cut off" / clipped.
 *
 * Guard the BODY rather than the per-template content wrapper because there is
 * no single shared content element (templates open their own <main class="container">
 * or <section class="fb-*">, closed in footer.php). `overflow-x: clip` is chosen
 * over `hidden`:
 *   - `clip` does NOT establish a scroll container / scroll port, so it does NOT
 *     break `position: sticky` on the header (.fb-header) or the mobile bottom
 *     bar — `overflow: hidden` would have broken both.
 *   - It still hard-clips horizontal bleed so nothing escapes the viewport width.
 * `overflow-y: visible` is kept explicit so vertical sticky/scroll behavior is
 * untouched (clip + visible is a valid pair that does not force a scroll box).
 *
 * Compatibility: `overflow: clip` needs Safari 16+ (Sep 2022), Chrome/Edge 90+,
 * Firefox 81+. Older Safari ignores the declaration and simply falls back to the
 * previous (default `visible`) behavior — no worse than before, no breakage.
 * The word-break rule on headings/titles above is what actually prevents most of
 * the overflow at the source; this is the belt-and-braces catch-all. */
html { overflow-x: clip; }
body {
  overflow-x: clip;
  overflow-y: visible;
}

/* ============== RESPONSIVE BASE ============== */
@media (max-width: 768px) {
  .container, .container-narrow, .fb-container { padding: 0 16px; }
  .field-row { grid-template-columns: 1fr; }
  /* v1.2.90: bumped mobile heading floor to match desktop uplift. */
  .h-1, .h-display { font-size: 28px; }
  .h-2 { font-size: 26px; }
  .h-3 { font-size: 20px; }
  .card-padded { padding: 18px; }
  .card-padded-lg { padding: 22px; }
  .state-switcher { left: 16px; right: 16px; bottom: 16px; min-width: 0; }
}

/* ============== AVATAR (UNIVERSAL) ==============
 * Used everywhere a person or company is represented:
 *   <span class="fb-avatar"> ... </span>  (gradient + letter fallback)
 *   <span class="fb-avatar has-img"><img …></span>  (uploaded photo)
 * Compatible with the legacy `.fa` chip class (we still emit `class="fa fb-avatar"`).
 */
.fb-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  overflow: hidden;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-transform: uppercase;
  background: linear-gradient(135deg, #38AD4E, #0F803F);
}
/* Default size only when no other size class / inline style is supplied. */
.fb-avatar:not(.avatar-xs):not(.avatar-sm):not(.avatar-md):not(.avatar-lg):not(.avatar-xl):not(.avatar-2xl):not(.fa):not(.thread-avatar):not(.thread-msg-avatar):not(.sb-filer-avatar):not(.account-hero-avatar):not(.fb-vendor-stack__chip):not([style*="width"]) {
  width: 28px;
  height: 28px;
  font-size: 12px;
}
.fb-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.fb-avatar.has-img { background: var(--white); }
.fb-company-avatar { background: var(--slate-200); color: var(--slate-700); border: 1px solid var(--slate-200); }
.fb-company-avatar.has-img { background: var(--white); }

/* ============== ATTACH GRID + LIGHTBOX (UNIVERSAL) ==============
 * Used by every page that lists a complaint's evidence — public single, account
 * complaint detail, company complaint detail. Bigger tiles than before (was 140px).
 */
.attach-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.attach-tile {
  aspect-ratio: 1 / 1;
  min-height: 150px;
  border-radius: var(--radius-md);
  background: var(--slate-100);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  border: 1px solid var(--slate-200);
  transition: transform .15s var(--ease), border-color .15s var(--ease), box-shadow .15s var(--ease);
  text-decoration: none;
  color: inherit;
  display: block;
}
.attach-tile:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px -8px rgba(15, 128, 63, .25);
}
.attach-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.attach-tile.is-pdf {
  background: var(--white);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px;
  text-align: center;
}
.attach-tile.is-pdf svg {
  width: 40px; height: 40px;
  stroke: var(--red-500);
  fill: var(--red-50);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.attach-tile.is-pdf .file-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-700);
  word-break: break-all;
  line-height: 1.3;
}
.attach-tile.is-pdf .file-size { font-size: 11px; color: var(--slate-500); }
.attach-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 8px 10px;
  font-size: 11px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0,0,0,.65) 0%, rgba(0,0,0,.0) 100%);
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Lightbox overlay */
.fb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .92);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease;
}
.fb-lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}
.fb-lightbox__img {
  max-width: 92vw;
  max-height: 86vh;
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
  background: #fff;
}
.fb-lightbox__caption {
  position: absolute;
  left: 0; right: 0; bottom: 16px;
  text-align: center;
  color: #fff;
  font-size: 13px;
  padding: 0 24px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
.fb-lightbox__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-lightbox__close:hover { background: rgba(255, 255, 255, .22); }
.fb-lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fb-lightbox__nav:hover { background: rgba(255, 255, 255, .22); }
.fb-lightbox__nav.is-prev { left: 18px; }
.fb-lightbox__nav.is-next { right: 18px; }
.fb-lightbox__nav[hidden] { display: none; }

/* ----------- File-attach preview widget (fb-attach-preview.js) ----------- */
.fb-attach-drop {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border: 1px dashed var(--slate-300);
	border-radius: var(--radius-md);
	background: var(--slate-50);
	cursor: pointer;
	transition: border-color .15s, background .15s;
	margin-top: 8px;
}
.fb-attach-drop:hover,
.fb-attach-drop:focus-within,
.fb-attach-drop.is-dragover {
	border-color: var(--green);
	background: rgba(56, 173, 78, .04);
}
.fb-attach-drop-icon { flex: none; display: inline-flex; }
.fb-attach-drop-text strong { font-size: 13px; color: var(--slate-700); font-weight: 600; }
.fb-attach-list {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.fb-attach-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: var(--radius-sm);
}
.fb-attach-row-thumb {
	flex: none;
	width: 36px; height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-sm);
	background: var(--slate-100);
	overflow: hidden;
}
.fb-attach-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fb-attach-row-meta { flex: 1; min-width: 0; }
.fb-attach-row-name {
	font-size: 13px;
	color: var(--slate-800);
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.fb-attach-row-size {
	font-size: 11px;
	color: var(--slate-500);
}
.fb-attach-row-remove {
	flex: none;
	border: 0;
	background: transparent;
	color: var(--slate-500);
	cursor: pointer;
	padding: 4px;
	border-radius: var(--radius-sm);
}
.fb-attach-row-remove:hover { background: var(--slate-100); color: var(--red-600); }

/* ===========================================================================
   Share dropdown (v1.2.84) — desktop-only popover anchored to .fb-share-btn.
   Mobile keeps the native Web Share sheet (handled in JS).
   =========================================================================== */
.fb-share-menu {
	position: absolute;
	z-index: 9999;
	min-width: 220px;
	background: var(--white, #fff);
	border: 1px solid var(--slate-200, #E2E8F0);
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.18);
	padding: 6px;
	font-size: 14px;
	animation: fb-share-menu-in 120ms cubic-bezier(.2,.8,.2,1);
}
@keyframes fb-share-menu-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}
.fb-share-menu-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 9px 12px;
	border-radius: 8px;
	color: var(--slate-700, #334155);
	text-decoration: none;
	background: transparent;
	border: 0;
	width: 100%;
	cursor: pointer;
	font: inherit;
	text-align: left;
	transition: background 80ms ease, color 80ms ease;
}
.fb-share-menu-item:hover,
.fb-share-menu-item:focus-visible {
	background: var(--slate-50, #F8FAFC);
	color: var(--slate-900, #0F172A);
	outline: none;
}
.fb-share-menu-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}
.fb-share-menu-icon svg { width: 100%; height: 100%; }
.fb-share-menu-label { flex: 1; font-weight: 500; }
.fb-share-menu-item--done {
	color: var(--green-700, #15803D) !important;
	background: var(--green-50, #F0FDF4) !important;
}
.fb-share-menu-item--done .fb-share-menu-icon { color: var(--green-600, #16A34A) !important; }

/* =============================================================================
 * FILTER BAR (rating pills + sort dropdown)
 *
 * v1.2.109: promoted from public-company.css to the global design system. The
 * same .filter-bar / .filter-pill / .filter-select markup is used on:
 *   - single-fb_company.php (reviews + complaints filters)
 *   - single-fb_product.php (reviews filter, added in v1.2.105 / C2)
 *   - any future page that copies the pattern
 *
 * Public-company.css and account.css still carry duplicate rules — those load
 * AFTER design-system on their respective pages, so they take precedence
 * silently (identical rules → same visual result). The duplication can be
 * removed in a future cleanup pass; leaving it now avoids risk on already-
 * working pages.
 * ============================================================================= */
.filter-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	padding: 14px 24px;
	border-top: 1px solid var(--slate-100);
	background: var(--slate-50);
}
.filter-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--white);
	border: 1px solid var(--slate-200);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--slate-600);
	transition: all .15s var(--ease);
	cursor: pointer;
	font-family: inherit;
}
.filter-pill:hover {
	border-color: var(--slate-300);
	color: var(--slate-900);
}
.filter-pill.is-active {
	background: var(--slate-900);
	border-color: var(--slate-900);
	color: var(--white);
}
.filter-pill svg {
	width: 11px;
	height: 11px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}
.filter-divider { flex: 1; }
.filter-select {
	appearance: none;
	-webkit-appearance: none;
	height: 32px;
	padding: 0 28px 0 12px;
	background: var(--white)
		url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="%2364748B" stroke-width="2.2" fill="none" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>')
		no-repeat right 8px center / 12px;
	border: 1px solid var(--slate-200);
	border-radius: var(--radius-sm);
	font-family: inherit;
	font-size: 12px;
	color: var(--slate-700);
	cursor: pointer;
}
.filter-select:focus {
	outline: none;
	border-color: var(--green);
	box-shadow: 0 0 0 3px rgba(56,173,78,.15);
}

/* v1.2.112: helpful-vote "stat only" modifier.
   Applied via `.review-helpful.is-stat-only`, `.cc-helpful-btn.is-stat-only`, etc.
   when the current viewer can't vote (review/complaint author, or vendor of the
   reviewed product / targeted company). The element renders as a non-interactive
   span — the count stays visible (transparency) but no click affordance. */
.review-helpful.is-stat-only,
.cc-helpful-btn.is-stat-only {
	cursor: default;
	background: var(--slate-50);
	border-color: var(--slate-200);
	color: var(--slate-600);
	pointer-events: none;
}
.review-helpful.is-stat-only:hover,
.cc-helpful-btn.is-stat-only:hover {
	background: var(--slate-50);
	border-color: var(--slate-200);
}

/* N5 (2026-06-09): the disabled-CTA tooltip was a CSS ::after clipped by .article-hero /
   .sb-card overflow:hidden (needed for rounded corners). Replaced with a JS fixed-position
   bubble (fb-tooltip.js) that escapes all overflow. Neutralize the old pseudo tooltip here. */
[data-fb-tip]:hover::after, [data-fb-tip]:focus-visible::after,
[data-fb-tip]:hover::before, [data-fb-tip]:focus-visible::before { content: none !important; }
.fb-tip-pop{
  position:fixed; z-index:99999; pointer-events:none;
  background:var(--slate-900,#0f172a); color:#fff;
  font-size:12px; font-weight:500; line-height:1.4; text-align:center;
  max-width:220px; padding:7px 10px; border-radius:8px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.4);
  opacity:0; transition:opacity .08s ease;
}
.fb-tip-pop.is-shown{ opacity:1; }
.fb-tip-pop::after{ content:''; position:absolute; top:100%; left:var(--fb-tip-arrow,50%);
  transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--slate-900,#0f172a); }
.fb-tip-pop.is-below::after{ top:auto; bottom:100%; border-top-color:transparent; border-bottom-color:var(--slate-900,#0f172a); }