/* GENERATED by scripts/ui.ts from data/brand/ba-tokens.css, src/ui/tokens.css, src/ui/components.css and src/ui/pages/*.css: edit those, then run it. */

/**
 * BoardingArea Design Tokens CSS
 * Source: Rebecca (BoardingArea UI/UX), delivered by Sean 2026-09-29. Brand source of truth: do not edit values here;
 * map them in src/ui/tokens.css. See data/brand/README.md for the showcase page's differences.
 */

:root {
  --ba-color-background: var(--ba-color-slate-100);
  --ba-color-border: var(--ba-color-slate-100);
  --ba-color-border-strong: var(--ba-color-slate-300);
  --ba-color-danger: var(--ba-color-danger-600);
  --ba-color-danger-muted: var(--ba-color-danger-400);
  --ba-color-danger-subtle: var(--ba-color-danger-200);
  --ba-color-info: var(--ba-color-info-500);
  --ba-color-info-muted: var(--ba-color-info-300);
  --ba-color-info-subtle: var(--ba-color-info-200);
  --ba-color-primary: var(--ba-color-primary-green);
  --ba-color-primary-strong: var(--ba-color-primary-green-dark);
  --ba-color-ring: var(--ba-color-primary-green);
  --ba-color-success: var(--ba-color-green-600);
  --ba-color-success-muted: var(--ba-color-green-500);
  --ba-color-success-subtle: var(--ba-color-green-400);
  --ba-color-surface: var(--ba-color-primary-white);
  --ba-color-surface-muted: var(--ba-color-slate-50);
  --ba-color-text: var(--ba-color-primary-black);
  --ba-color-text-muted: var(--ba-color-slate-500);
  --ba-color-text-subtle: var(--ba-color-slate-400);
  --ba-color-warning: var(--ba-color-warning-400);
  --ba-color-warning-muted: var(--ba-color-warning-300);
  --ba-color-warning-subtle: var(--ba-color-warning-100);

  --ba-border-radius-default: var(--ba-border-radius-none);
  --ba-border-radius-sm: var(--ba-border-radius-md);
  --ba-border-radius-md: var(--ba-border-radius-lg);
  --ba-border-radius-lg: var(--ba-border-radius-2xl);
  --ba-border-radius-full: var(--ba-border-radius-full);
  --ba-text-xs: var(--ba-size-xs);
  --ba-text-sm: var(--ba-size-sm);
  --ba-text-base: var(--ba-size-md);
  --ba-text-lg: var(--ba-size-lg);
  --ba-text-xl: var(--ba-size-xl);
  --ba-text-2xl: var(--ba-size-2xl);
  --ba-text-3xl: var(--ba-size-3xl);
  --ba-text-4xl: var(--ba-size-4xl);
  --ba-text-5xl: var(--ba-size-5xl);
  --ba-text-6xl: var(--ba-size-6xl);
  --ba-text-7xl: var(--ba-size-7xl);
  --ba-text-8xl: var(--ba-size-8xl);
  --ba-text-9xl: var(--ba-size-9xl);

  --ba-font-family-body: var(--ba-family-serif);
  --ba-font-family-headings: var(--ba-family-sans);
  --ba-font-family-mono: var(--ba-family-mono);

  --ba-color-primary-black: #000000;
  --ba-color-primary-white: #ffffff;
  --ba-color-primary-grey-light: #d5dadb;
  --ba-color-primary-grey: #5c7074;
  --ba-color-primary-grey-dark: #2c3638;
  --ba-color-primary-green: #47991e;
  --ba-color-primary-green-dark: #336e16;

  --ba-color-green-50: #ecfae5;
  --ba-color-green-100: #dcf0d1;
  --ba-color-green-200: #cbe7bd;
  --ba-color-green-300: #bbdda9;
  --ba-color-green-400: #aad395;
  --ba-color-green-500: #89c06e;
  --ba-color-green-600: #68ac46;
  --ba-color-green-700: var(--ba-color-primary-green);
  --ba-color-green-800: var(--ba-color-primary-green-dark);
  --ba-color-green-900: #2b5c12;
  --ba-color-green-950: #1c3d0c;

  --ba-color-neutral-50: #fafafa;
  --ba-color-neutral-100: #f5f5f5;
  --ba-color-neutral-200: #e5e5e5;
  --ba-color-neutral-300: #d4d4d4;
  --ba-color-neutral-400: #a3a3a3;
  --ba-color-neutral-500: #737373;
  --ba-color-neutral-600: #525252;
  --ba-color-neutral-700: #404040;
  --ba-color-neutral-800: #262626;
  --ba-color-neutral-900: #111111;
  --ba-color-neutral-950: #0a0a0a;

  --ba-color-slate-50: #eff1f1;
  --ba-color-slate-100: var(--ba-color-primary-grey-light);
  --ba-color-slate-200: #bec6c7;
  --ba-color-slate-300: #9da9ac;
  --ba-color-slate-400: #7d8d90;
  --ba-color-slate-500: var(--ba-color-primary-grey);
  --ba-color-slate-600: #4a5a5d;
  --ba-color-slate-700: var(--ba-color-primary-grey-dark);
  --ba-color-slate-800: #1c2223;
  --ba-color-slate-900: #121617;
  --ba-color-slate-950: #090b0c;

  --ba-color-danger-50: #fef2f2;
  --ba-color-danger-100: #fee2e2;
  --ba-color-danger-200: #fecaca;
  --ba-color-danger-300: #fca5a5;
  --ba-color-danger-400: #f87171;
  --ba-color-danger-500: #ef4444;
  --ba-color-danger-600: #dc2626;
  --ba-color-danger-700: #b91c1c;
  --ba-color-danger-800: #991b1b;
  --ba-color-danger-900: #7f1d1d;
  --ba-color-danger-950: #450a0a;

  --ba-color-warning-50: #fffbeb;
  --ba-color-warning-100: #fef3c7;
  --ba-color-warning-200: #fde68a;
  --ba-color-warning-300: #fcd34d;
  --ba-color-warning-400: #fbbf24;
  --ba-color-warning-500: #f59e0b;
  --ba-color-warning-600: #d97706;
  --ba-color-warning-700: #b45309;
  --ba-color-warning-800: #92400e;
  --ba-color-warning-900: #78350f;
  --ba-color-warning-950: #451a03;

  --ba-color-info-50: #f6fbff;
  --ba-color-info-100: #e8f4ff;
  --ba-color-info-200: #cbe6ff;
  --ba-color-info-300: #9ad0ff;
  --ba-color-info-400: #4ab0ff;
  --ba-color-info-500: #008cdd;
  --ba-color-info-600: #006fb1;
  --ba-color-info-700: #00578c;
  --ba-color-info-800: #003d64;
  --ba-color-info-900: #002743;
  --ba-color-info-950: #001324;

  --ba-border-radius-none: 0px;
  --ba-border-radius-xs: 2px;
  --ba-border-radius-sm: 4px;
  --ba-border-radius-md: 6px;
  --ba-border-radius-lg: 8px;
  --ba-border-radius-xl: 12px;
  --ba-border-radius-2xl: 16px;
  --ba-border-radius-3xl: 24px;
  --ba-border-radius-full: 999px;

  --ba-breakpoint-sm: 500px;
  --ba-breakpoint-md: 768px;
  --ba-breakpoint-lg: 1150px;
  --ba-breakpoint-xl: 1350px;
  --ba-breakpoint-2xl: 1536px;

  --ba-container-xs: 320px;
  --ba-container-sm: 384px;
  --ba-container-md: 448px;
  --ba-container-lg: 512px;
  --ba-container-xl: 576px;
  --ba-container-2xl: 672px;
  --ba-container-3xl: 768px;
  --ba-container-4xl: 896px;
  --ba-container-5xl: 1024px;
  --ba-container-6xl: 1152px;
  --ba-container-7xl: 1280px;

  --ba-family-sans: "Source Sans Pro";
  --ba-family-serif: "Source Serif Pro";
  --ba-family-mono: "SF Pro";

  --ba-weight-thin: 100;
  --ba-weight-extralight: 200;
  --ba-weight-light: 300;
  --ba-weight-normal: 400;
  --ba-weight-medium: 500;
  --ba-weight-semibold: 600;
  --ba-weight-bold: 700;
  --ba-weight-extrabold: 800;
  --ba-weight-black: 900;

  --ba-size-xs: 12px;
  --ba-size-sm: 14px;
  --ba-size-md: 16px;
  --ba-size-lg: 18px;
  --ba-size-xl: 20px;
  --ba-size-2xl: 24px;
  --ba-size-3xl: 30px;
  --ba-size-4xl: 36px;
  --ba-size-5xl: 48px;
  --ba-size-6xl: 60px;
  --ba-size-7xl: 72px;
  --ba-size-8xl: 96px;
  --ba-size-9xl: 128px;

  --ba-leading-1: 16px;
  --ba-leading-2: 20px;
  --ba-leading-3: 24px;
  --ba-leading-4: 28px;
  --ba-leading-5: 32px;
  --ba-leading-6: 36px;
  --ba-leading-7: 40px;
  --ba-leading-8: 48px;
  --ba-leading-9: 48px;
  --ba-leading-10: 60px;
  --ba-leading-11: 72px;
  --ba-leading-12: 96px;
  --ba-leading-13: 128px;

  --ba-tracking-tighter: -0.800000011920929px;
  --ba-tracking-tight: -0.4000000059604645px;
  --ba-tracking-normal: 0px;
  --ba-tracking-wide: 0.4000000059604645px;
  --ba-tracking-wider: 0.800000011920929px;
  --ba-tracking-widest: 1.600000023841858px;

  --ba-box-shadow-default: 0 0 3px rgba(92,112,116,.2);
  --ba-box-shadow-glow: 0 0px 6px 0 rgba(71 153 30 / 50%);

  --ba-opacity-0: 0;
  --ba-opacity-5: 5;
  --ba-opacity-10: 10;
  --ba-opacity-20: 20;
  --ba-opacity-25: 25;
  --ba-opacity-30: 30;
  --ba-opacity-40: 40;
  --ba-opacity-50: 50;
  --ba-opacity-60: 60;
  --ba-opacity-70: 70;
  --ba-opacity-75: 75;
  --ba-opacity-80: 80;
  --ba-opacity-90: 90;
  --ba-opacity-95: 95;
  --ba-opacity-100: 100;

  --ba-blur-none: 0px;
  --ba-blur-xs: 4px;
  --ba-blur-sm: 8px;
  --ba-blur-md: 12px;
  --ba-blur-lg: 16px;
  --ba-blur-xl: 24px;
  --ba-blur-2xl: 40px;
  --ba-blur-3xl: 64px;

  --ba-border-width-0: 0px;
  --ba-border-width-1: 1px;
  --ba-border-width-2: 2px;
  --ba-border-width-4: 4px;
  --ba-border-width-8: 8px;
}

[data-theme="dark"],
.dark-mode {
  --ba-color-background : var(--ba-color-slate-950);
  --ba-color-surface : var(--ba-color-slate-900);
  --ba-color-surface-muted : var(--ba-color-slate-800);
  --ba-color-text : var(--ba-color-primary-white);
  --ba-color-text-muted : var(--ba-color-slate-100);
  --ba-color-text-subtle : var(--ba-color-slate-200);
  --ba-color-border : var(--ba-color-slate-900);
  --ba-color-border-strong : var(--ba-color-slate-800);
}

/* BoardingArea Tools design tokens (docs/36). Rebecca's BoardingArea tokens (data/brand/ba-tokens.css, F1.1) are the only
   source of colours, fonts, radii, shadows and the type scale: scripts/ui.ts builds public/tools/hub.css from that file,
   this one and src/ui/components.css, and writes the light values into the WordPress plugin's --ba-* defaults. This
   file maps our semantic names onto hers and holds no colour of its own. Where her named token fails WCAG AA on a
   surface we put it on, the nearest step of the same scale that passes is used, and docs/44 §7 lists it for Rebecca.
   Light by default; dark with prefers-color-scheme (unless the reader chose light) or data-theme="dark" on <html>,
   which the theme toggle sets (her file's own dark block answers the attribute; the media query repeats it). Every
   pair tests/ui-tokens.test.ts names passes AA (4.5:1 for text, 3:1 for marks) in both themes. */
:root {
  /* Surfaces and lines: her semantic tokens. */
  --color-bg: var(--ba-color-background);
  --color-surface: var(--ba-color-surface);
  --color-surface-2: var(--ba-color-surface-muted);
  --color-surface-raised: var(--ba-color-surface);
  --color-border: var(--ba-color-border);
  --color-border-strong: var(--ba-color-border-strong);
  /* Text. Her text-muted (slate-500) is 3.7:1 on her slate-100 background, so secondary text is slate-700 (her
     primary grey-dark) and tertiary slate-600, which pass on the background and on every surface. */
  --color-text: var(--ba-color-text);
  --color-text-2: var(--ba-color-slate-700);
  --color-text-3: var(--ba-color-slate-600);
  /* The one accent, her primary green, is 3.6:1 on white: it colours marks, rings and fills. Green text and links use
     green-900 (primary-strong is 6.2:1 on white but 4.4:1 on the background); buttons are primary-strong with white. */
  --color-accent: var(--ba-color-primary);
  --color-accent-hover: var(--ba-color-primary-strong);
  --color-accent-strong: var(--ba-color-green-900);
  /* R1.1: "Insider" in the wordmark, her primary green; in light her darker primary green (the primary is 2.5:1 on the
     background, primary-strong 4.4:1). */
  --color-wordmark: var(--ba-color-primary-strong);
  --color-accent-subtle: var(--ba-color-green-50);
  --color-accent-line: var(--ba-color-green-200);
  --color-button: var(--ba-color-primary-strong);
  --color-button-hover: var(--ba-color-green-900);
  --color-on-accent: var(--ba-color-primary-white);
  /* Status: her subtle backgrounds; the text a step darker in the same scale, so a chip passes AA. */
  --color-positive: var(--ba-color-green-900);   --color-positive-subtle: var(--ba-color-success-subtle);
  --color-negative: var(--ba-color-danger-800);  --color-negative-subtle: var(--ba-color-danger-subtle);
  --color-warning: var(--ba-color-warning-800);  --color-warning-subtle: var(--ba-color-warning-subtle);
  --color-info: var(--ba-color-info-700);        --color-info-subtle: var(--ba-color-info-subtle);
  --color-muted: var(--ba-color-slate-600);      --color-muted-subtle: var(--ba-color-surface-muted);
  /* Chart marks: her green and slate scales, each 3:1 against the surfaces charts sit on. */
  --color-chart: var(--ba-color-primary);
  --color-chart-2: var(--ba-color-slate-500);
  --color-chart-grid: var(--ba-color-slate-100);
  --color-series-1: var(--ba-color-green-800); --color-series-2: var(--ba-color-green-700); --color-series-3: var(--ba-color-slate-700);
  --color-series-4: var(--ba-color-slate-500); --color-series-5: var(--ba-color-slate-400);
  --color-mark: var(--ba-color-slate-500);
  /* Her ring is the primary green; on the slate-100 background that is 2.5:1, so the focus ring is primary-strong. */
  --color-focus: var(--ba-color-primary-strong);
  --color-brand: var(--ba-color-primary-grey-dark);
  --color-on-brand: var(--ba-color-primary-white);
  --color-overlay: color-mix(in srgb, var(--ba-color-slate-950) 45%, transparent);

  /* Spacing: 4-point scale. */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  /* Radii: hers (the file's primitives, declared after its semantic aliases, win: sm 4, md 6, lg 8). */
  --radius-sm: var(--ba-border-radius-md); --radius: var(--ba-border-radius-lg); --radius-lg: var(--ba-border-radius-2xl);
  --radius-full: var(--ba-border-radius-full);
  /* Shadows: her one resting shadow; raised (popovers, the drawer) is the same shadow over a border. */
  --shadow-1: var(--ba-box-shadow-default);
  --shadow-2: var(--ba-box-shadow-default);
  --shadow-glow: var(--ba-box-shadow-glow);
  /* Type: headings Source Sans, body Source Serif, figures and code mono (her file names "SF Pro" for mono, which is
     not a monospace; the showcase uses JetBrains Mono). The Adobe kit's family names come first. */
  --font: "source-serif-pro", var(--ba-font-family-body), "Source Serif 4", Georgia, serif;
  --font-headings: "source-sans-pro", var(--ba-font-family-headings), "Source Sans 3", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: var(--ba-text-xs); --text-sm: var(--ba-text-sm); --text-base: var(--ba-text-sm); --text-md: var(--ba-text-base);
  --text-lg: var(--ba-text-xl); --text-xl: var(--ba-text-2xl); --text-2xl: var(--ba-text-3xl);
  --text-3xl: var(--ba-text-4xl); --text-4xl: var(--ba-text-5xl); --text-5xl: var(--ba-text-6xl);
  /* Her leading is in px per size; the body's is a ratio (her leading-3 over size-md, 24/16) so headings inherit it right. */
  --leading: 1.5; --leading-tight: 1.25;
  --tracking-tight: var(--ba-tracking-tight); --tracking-wide: var(--ba-tracking-wide); --tracking-wider: var(--ba-tracking-wider);
  --tracking-widest: var(--ba-tracking-widest);
  --weight-medium: var(--ba-weight-medium); --weight-semibold: var(--ba-weight-semibold); --weight-bold: var(--ba-weight-bold);
  --weight-black: var(--ba-weight-black);
  /* Layout: her containers. */
  --sidebar-width: 232px; --content-max: var(--ba-container-7xl); --front-max: var(--ba-container-6xl);
  color-scheme: light;
}

/* Dark: the reader's system setting, unless they chose light; or their choice of dark. Her file's dark values are
   repeated for the media query (her block answers only the attribute); ours follow. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ba-color-background: var(--ba-color-slate-950); --ba-color-surface: var(--ba-color-slate-900); --ba-color-surface-muted: var(--ba-color-slate-800);
    --ba-color-text: var(--ba-color-primary-white); --ba-color-text-muted: var(--ba-color-slate-100); --ba-color-text-subtle: var(--ba-color-slate-200);
    --ba-color-border: var(--ba-color-slate-900); --ba-color-border-strong: var(--ba-color-slate-800);
    --color-surface-raised: var(--ba-color-surface-muted);
    --color-text-2: var(--ba-color-text-muted); --color-text-3: var(--ba-color-text-subtle);
    --color-accent-strong: var(--ba-color-green-500); --color-accent-subtle: var(--ba-color-green-950); --color-accent-line: var(--ba-color-green-900);
    --color-wordmark: var(--ba-color-primary);
    --color-positive: var(--ba-color-green-500); --color-positive-subtle: var(--ba-color-green-950);
    --color-negative: var(--ba-color-danger-400); --color-negative-subtle: var(--ba-color-danger-950);
    --color-warning: var(--ba-color-warning-300); --color-warning-subtle: var(--ba-color-warning-950);
    --color-info: var(--ba-color-info-300); --color-info-subtle: var(--ba-color-info-950);
    --color-muted: var(--ba-color-text-muted); --color-muted-subtle: var(--ba-color-surface-muted);
    --color-mark: var(--ba-color-slate-400); --color-focus: var(--ba-color-green-500); --color-chart: var(--ba-color-green-500);
    --color-chart-2: var(--ba-color-slate-300); --color-chart-grid: var(--ba-color-slate-800);
    --color-series-1: var(--ba-color-green-300); --color-series-2: var(--ba-color-green-700); --color-series-3: var(--ba-color-slate-100);
    --color-series-4: var(--ba-color-slate-300); --color-series-5: var(--ba-color-slate-400);
    --color-brand: var(--ba-color-slate-950); --color-on-brand: var(--ba-color-primary-white);
    --color-overlay: color-mix(in srgb, var(--ba-color-primary-black) 60%, transparent);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --color-surface-raised: var(--ba-color-surface-muted);
  --color-text-2: var(--ba-color-text-muted); --color-text-3: var(--ba-color-text-subtle);
  --color-accent-strong: var(--ba-color-green-500); --color-accent-subtle: var(--ba-color-green-950); --color-accent-line: var(--ba-color-green-900);
  --color-wordmark: var(--ba-color-primary);
  --color-positive: var(--ba-color-green-500); --color-positive-subtle: var(--ba-color-green-950);
  --color-negative: var(--ba-color-danger-400); --color-negative-subtle: var(--ba-color-danger-950);
  --color-warning: var(--ba-color-warning-300); --color-warning-subtle: var(--ba-color-warning-950);
  --color-info: var(--ba-color-info-300); --color-info-subtle: var(--ba-color-info-950);
  --color-muted: var(--ba-color-text-muted); --color-muted-subtle: var(--ba-color-surface-muted);
  --color-mark: var(--ba-color-slate-400); --color-focus: var(--ba-color-green-500); --color-chart: var(--ba-color-green-500);
  --color-chart-2: var(--ba-color-slate-300); --color-chart-grid: var(--ba-color-slate-800);
  --color-series-1: var(--ba-color-green-300); --color-series-2: var(--ba-color-green-700); --color-series-3: var(--ba-color-slate-100);
  --color-series-4: var(--ba-color-slate-300); --color-series-5: var(--ba-color-slate-400);
  --color-brand: var(--ba-color-slate-950); --color-on-brand: var(--ba-color-primary-white);
  --color-overlay: color-mix(in srgb, var(--ba-color-primary-black) 60%, transparent);
  color-scheme: dark;
}

/* The theme hooks (docs/30): the --ba-* names the pages and the WordPress plugin have always used, mapped onto the
   tokens. An embed's ?accent= and friends set the tokens themselves (embed.js), so both follow. */
:root {
  --ba-font: var(--font); --ba-font-headings: var(--font-headings); --ba-mono: var(--font-mono);
  --ba-brand: var(--color-brand); --ba-brand-2: var(--ba-color-slate-600); --ba-brand-ink: var(--color-on-brand);
  --ba-accent: var(--color-accent); --ba-accent-strong: var(--color-accent-strong); --ba-accent-soft: var(--color-accent-subtle);
  --ba-accent-line: var(--color-accent-line); --ba-accent-hover: var(--color-accent-hover);
  --ba-ink: var(--color-text); --ba-ink-2: var(--color-text-2); --ba-muted: var(--color-text-3); --ba-quiet-mark: var(--color-mark);
  --ba-line: var(--color-border); --ba-input-line: var(--color-border-strong); --ba-bg: var(--color-bg);
  --ba-surface: var(--color-surface); --ba-subtle: var(--color-surface-2);
  --ba-good-bg: var(--color-positive-subtle); --ba-good-ink: var(--color-positive);
  --ba-warn-bg: var(--color-warning-subtle); --ba-warn-line: var(--color-warning); --ba-warn-ink: var(--color-warning); --ba-warn-soft: var(--color-warning-subtle);
  --ba-bad-bg: var(--color-negative-subtle); --ba-bad-ink: var(--color-negative); --ba-alert: var(--color-negative); --ba-late: var(--color-warning);
  --ba-quiet-bg: var(--color-muted-subtle); --ba-quiet-ink: var(--color-muted);
  --ba-info-bg: var(--color-info-subtle); --ba-info-ink: var(--color-info);
  --ba-reported-ink: var(--color-warning); --ba-reported-line: var(--color-warning);
  --ba-range: var(--color-accent-line);
  --ba-radius: var(--radius); --ba-shadow: var(--shadow-1);
}

/* BoardingArea Tools components (docs/36): every colour, space, radius and size from src/ui/tokens.css. No hex
   colours here; tests/ui-tokens.test.ts and tests/embed.test.ts check. Built into public/tools/hub.css by scripts/ui.ts. */
/* ---- Base ------------------------------------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: var(--text-base)/var(--leading) var(--ba-font); color: var(--color-text); background: var(--color-bg);
  font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
a { color: var(--color-accent-strong); text-underline-offset: 2px; }
a:hover { color: var(--color-text); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.wrap { max-width: var(--content-max); margin: 0 auto; }
.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; }
.skip { position: absolute; left: var(--space-2); top: -40px; z-index: 50; background: var(--color-surface); color: var(--color-text); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm); }
.skip:focus { top: var(--space-2); box-shadow: var(--shadow-2); }

/* ---- Type roles (Rebecca's brand, F1.1): headings and UI labels in Source Sans, body in Source Serif, figures and
   code in the mono. Chips are pills at 12/600; tables' headers xs uppercase with wide tracking; blockquotes a green rule. */
h1, h2, h3, h4, h5, h6, .brand, nav.tools, .nav-label, .seg span, .tabs, label, legend, th, .badge, .chip, .pill, .st, .seed, .flag,
.kpi-label, .section-title, .section-bar, .page-controls, .globalbar, .prov, .legend, .eyebrow { font-family: var(--font-headings); }
.kpi-value, .fig, .mono, code, kbd, samp, pre { font-family: var(--font-mono); }
.badge, .chip, .st, .seed, .flag { border-radius: var(--radius-full); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
blockquote { margin: var(--space-4) 0; padding: var(--space-2) var(--space-4); border-left: 4px solid var(--color-accent); background: var(--color-surface-2);
  font-style: italic; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
pre.code { background: var(--ba-color-slate-900); color: var(--ba-color-slate-50); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); overflow-x: auto;
  font-size: var(--text-sm); }

/* ---- Shell: a persistent left nav; on phones a top bar and a drawer ---------------------------------------- */
body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: 1fr auto; min-height: 100vh; }
/* The sidebar's surface runs the page's full height, past the sticky nav (and in full-page captures). */
body { background: linear-gradient(to right, var(--color-surface) calc(var(--sidebar-width) - 1px), var(--color-border) calc(var(--sidebar-width) - 1px) var(--sidebar-width), var(--color-bg) var(--sidebar-width)); }
/* A page without the shell (the 404s, docs/39 m29): one column, no sidebar surface. */
body.plain { display: block; background: var(--color-bg); }
body.plain main, body.plain footer.site { max-width: 760px; margin: 0 auto; }
header.site { grid-row: 1 / span 2; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column;
  background: var(--color-surface); border-right: 1px solid var(--color-border); padding: var(--space-4) var(--space-3); }
.shell-bar { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-2) var(--space-4); }
.brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font-weight: var(--weight-bold); font-size: var(--text-md); margin-right: auto; }
.brand:hover { color: var(--color-text); }
.brand svg { flex: none; }
.brand small { font-weight: var(--weight-medium); color: var(--color-text-3); font-size: var(--text-sm); }
.brand .brand-insider { font-weight: inherit; color: var(--color-wordmark); }
.icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text-2); cursor: pointer; }
.icon-btn:hover { background: var(--color-surface-2); color: var(--color-text); }
.nav-toggle { display: none; }
/* The theme toggle sits at the top right of the content, over the page's head (which leaves room for it). */
.theme-toggle { flex: none; }
.theme-toggle .i-moon, :root[data-theme="dark"] .theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-sun { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: block; }
}
nav.tools { display: flex; flex-direction: column; gap: var(--space-4); }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label { margin: 0 0 var(--space-1); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em;
  text-transform: uppercase; color: var(--color-text-3); }
nav.tools a { display: block; padding: 6px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text-2); text-decoration: none; font-size: var(--text-base);
  font-weight: var(--weight-medium); }
nav.tools a:hover { background: var(--color-surface-2); color: var(--color-text); }
nav.tools a[aria-current="page"] { background: var(--color-accent-subtle); color: var(--color-accent-strong); box-shadow: inset 3px 0 0 var(--color-accent); }
nav.tools a[hidden] { display: none; }
main { grid-column: 2; min-width: 0; padding: var(--space-6) var(--space-8) var(--space-10); }
footer.site { grid-column: 2; border-top: 1px solid var(--color-border); padding: var(--space-4) var(--space-8); font-size: var(--text-sm); color: var(--color-text-3); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
footer.site a { color: var(--color-text-3); }
.nav-scrim { display: none; }

@media (max-width: 900px) {
  body { display: block; background: var(--color-bg); }
  header.site { position: sticky; z-index: 30; height: auto; overflow: visible; flex-direction: row; padding: var(--space-2) var(--space-4);
    border-right: 0; border-bottom: 1px solid var(--color-border); }
  .shell-bar { width: 100%; padding: 0; }
  .nav-toggle { display: inline-grid; }
  .theme-toggle { position: static; }
  nav.tools { position: fixed; top: 0; bottom: 0; left: 0; z-index: 40; width: min(300px, 85vw); overflow-y: auto; padding: var(--space-5) var(--space-3);
    background: var(--color-surface); box-shadow: var(--shadow-2); transform: translateX(-105%); transition: transform .18s ease; visibility: hidden; }
  .nav-open nav.tools { transform: none; visibility: visible; }
  .nav-open .nav-scrim { display: block; position: fixed; inset: 0; z-index: 35; background: var(--color-overlay); }
  main { padding: var(--space-4); }
  footer.site { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { nav.tools { transition: none; } }

/* ---- Page head: title and subtitle, the provenance line, the page's controls ------------------------------ */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-3) var(--space-6);
  margin: 0 0 var(--space-5); padding-right: 48px; }
.page-title { min-width: 0; flex: 1 1 360px; }
.page-controls { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.page-controls label.inline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-3); }
.page-controls select, .page-controls input { width: auto; min-width: 150px; padding: 6px 10px; font-size: var(--text-sm); }
/* The blog filter is filled with the blogs' names after the page paints; auto width grew it to the longest name,
   narrowing the title beside it until the intro wrapped a line (AI referrals, +21 px at 1440). Its filled width, fixed. */
.page-controls select[name="blog"] { width: 206px; }
@media (max-width: 900px) { .page-head { padding-right: 0; } }
/* The page's own theme toggle sits at the head's right (stamped by scripts/ui.ts); the sidebar's is for phones. */
.page-head { position: relative; }
.page-head .theme-toggle { position: absolute; top: 0; right: 0; }
@media (min-width: 901px) { body:has(.page-head .theme-toggle) .shell-bar .theme-toggle { display: none; } }
@media (max-width: 900px) { .page-head .theme-toggle { display: none; } }
.embed .theme-toggle { display: none; }

/* Segmented control: a radio group that looks like one control (window switchers, brand / non-brand). Arrow keys move
   between options, as radios do. */
.seg { display: inline-flex; padding: 2px; gap: 2px; background: var(--color-surface-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; opacity: 0; inset: 0; width: 100%; min-width: 0; height: 100%; margin: 0; padding: 0; cursor: pointer; }
.seg span { display: block; padding: 4px 12px; border-radius: 4px; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-2); white-space: nowrap; }
.seg input:checked + span { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }
.seg input:focus-visible + span { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.seg label:hover span { color: var(--color-text); }
/* The standard window control (docs/37): a window this page's source can't serve is shown, disabled, with why. */
.seg label.is-off span { opacity: .45; }
.seg label.is-off input { cursor: not-allowed; }
.seg label.is-off:hover span { color: var(--color-text-2); }
@media (max-width: 600px) { .page-controls .seg-window, .page-controls .seg-compare { flex: 1 1 100%; } .seg-window label, .seg-compare label { flex: 1; } .seg-window span, .seg-compare span { text-align: center; padding: 4px 6px; } }
h1 { font-size: var(--text-xl); line-height: var(--leading-tight); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-1); }
.lede { color: var(--color-text-2); margin: var(--space-1) 0 0; max-width: 80ch; }
.connect { margin-top: 28px; }
.connect code { overflow-wrap: anywhere; }
.connect .muted { color: var(--ba-muted); font-size: .92em; }
/* The provenance line: one compact line under the title, the full text in a popover behind the (i). */
.prov { position: relative; display: flex; align-items: center; gap: var(--space-2); max-width: 100%; color: var(--color-text-3); font-size: var(--text-xs);
  margin: 0; line-height: 1.5; }
.prov:not(:has(.prov-text)) { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prov a { color: var(--color-text-3); }
.prov-more { flex: none; display: inline-grid; place-items: center; width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 1px solid var(--color-border-strong);
  background: transparent; color: var(--color-text-3); font: var(--weight-bold) 11px/1 var(--font); cursor: pointer; }
.prov-more:hover, .prov-more[aria-expanded="true"] { background: var(--color-surface-2); color: var(--color-text); }
.popover { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(520px, 90vw); padding: var(--space-3) var(--space-4); background: var(--color-surface-raised);
  color: var(--color-text-2); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-2); font-size: var(--text-sm); white-space: normal; }
.popover[hidden] { display: none; }
.popover ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-1); }
.popover b { color: var(--color-text); font-weight: var(--weight-semibold); }
.notice-failed { color: var(--ba-alert); }
.toc { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 8px; font-size: .9rem; }
.method section { background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: 4px 18px 12px; margin: 16px 0; }
.method section h2 { margin-top: 14px; }
.method dl { display: grid; grid-template-columns: 150px 1fr; gap: 6px 16px; margin: 0; }
.method dt { font-weight: 700; color: var(--color-text); font-size: .9rem; }
.method dd { margin: 0; }
.method section:target { border-color: var(--ba-accent); box-shadow: 0 0 0 2px var(--ba-accent-line); }
h2 { font-size: 1.15rem; margin: 28px 0 10px; }


form.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; background: var(--ba-surface);
  border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: 14px; margin-bottom: 18px; }
form.filters label { display: flex; flex-direction: column; font-size: .8rem; color: var(--ba-muted); gap: 4px; flex: 1 1 150px; }
form.filters label.wide { flex: 3 1 260px; }
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--ba-input-line); border-radius: var(--radius-sm); background: var(--ba-surface); color: var(--ba-ink); width: 100%; }
textarea { min-height: 84px; resize: vertical; }
/* Rebecca's primary button: headings font 14/600, radius-md, 10×20. Its green is primary-strong at rest (white on her
   primary green is 3.6:1, under AA for 14 px), green-900 on hover. */
button { background: var(--color-button); color: var(--color-on-accent); border: 0; border-radius: var(--radius-sm); padding: 10px 20px; cursor: pointer;
  font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-headings); }
button:hover { background: var(--color-button-hover); }
button[disabled] { opacity: .6; cursor: wait; }

.status { color: var(--ba-muted); margin: 8px 0 16px; font-size: .94rem; }
.notice { background: var(--ba-warn-bg); border: 1px solid var(--ba-warn-line); border-radius: var(--ba-radius); padding: 16px; }
.notice h3 { margin: 0 0 6px; }
.badge { display: inline-block; background: var(--color-accent-subtle); color: var(--color-accent-strong); border-radius: 999px; padding: 1px 9px; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.badge.quiet { background: var(--ba-quiet-bg); color: var(--color-text); }
.badge.late { background: var(--ba-late); }
.badge.failed { background: var(--ba-alert); }
section.block { margin-bottom: 20px; }
code { font: .88em/1.4 var(--ba-mono); background: var(--ba-subtle); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
code.sa { font-size: 1rem; user-select: all; }
.meta { color: var(--ba-muted); font-size: .85rem; }

.results { display: grid; gap: 12px; }
.post h3 { margin: 2px 0 6px; font-size: 1.05rem; line-height: 1.35; }
.post p { margin: 0; color: var(--ba-ink-2); font-size: .95rem; }

.chart { background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: 12px 14px; margin-bottom: 16px; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .caption { font-size: .82rem; color: var(--ba-muted); margin-top: 4px; }

table.data { width: 100%; border-collapse: collapse; background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); overflow: hidden; }
table.data th, table.data td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--ba-line); vertical-align: top; font-size: .94rem; }
table.data th { background: var(--ba-subtle); color: var(--color-text-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wider); }
table.data td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
table.data td.nowrap { white-space: nowrap; }
table.data svg.spark { display: block; overflow: visible; }
table.data tr:last-child td { border-bottom: 0; }
details summary { cursor: pointer; color: var(--ba-accent-strong); font-size: .88rem; margin-top: 4px; }
details ul { margin: 6px 0 0; padding-left: 18px; }

.answer { background: var(--ba-surface); border: 1px solid var(--ba-line); border-radius: var(--ba-radius); padding: 18px 20px; }
.answer h2, .answer h3 { margin: 12px 0 6px; font-size: 1.1rem; }
.answer h2:first-child, .answer h3:first-child { margin-top: 0; }
.answer sup a { text-decoration: none; font-weight: 700; padding: 0 1px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.pill { display: inline-flex; gap: 6px; align-items: baseline; background: var(--ba-accent-soft); border: 1px solid var(--ba-accent-line); border-radius: 999px; padding: 5px 12px; text-decoration: none; color: var(--color-text); font-size: .88rem; max-width: 100%; }
.pill b { color: var(--ba-accent-strong); }
.pill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* Status chips, shared by the verified-data pages (offers, values, transfer bonuses) and the WordPress plugin. */
.st { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.st-verified { background: var(--ba-good-bg); color: var(--ba-good-ink); }
.st-partial, .st-wide { background: var(--ba-warn-soft); color: var(--ba-warn-ink); }
.st-editorial { background: var(--ba-info-bg); color: var(--ba-info-ink); }
.st-conflict { background: var(--ba-bad-bg); color: var(--ba-bad-ink); }
.st-single, .st-stale, .st-none, .st-ended, .st-expired { background: var(--ba-quiet-bg); color: var(--ba-quiet-ink); }
.st-reported { background: var(--ba-surface); color: var(--ba-reported-ink); border: 1px dashed var(--ba-reported-line); }
.seed { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px dashed var(--ba-quiet-mark); color: var(--ba-quiet-ink); }
.flag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--ba-bad-bg); color: var(--ba-bad-ink); }
dl.legend { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; font-size: 14px; }
dl.legend dd { margin: 0; }

/* Charts (hub.js): marks take their colours from the theme. */
.ba-bar { fill: var(--ba-accent); }
.ba-bar--under { fill: var(--ba-quiet-mark); }
.ba-chart-label { fill: var(--ba-ink-2); }
.ba-chart-value { fill: var(--color-text); }
.ba-chart-axis { fill: var(--ba-muted); }
.ba-chart-ref { stroke: var(--color-text-2); }

/* ?embed=1 (docs/30): inside a WordPress page. No header and no footer (embed.js removes both; this hides them
   before it runs); the page is its one root, main.ba-tools. ?provenance=0 hides the provenance strip, never the
   failed-check notice. */
.embed header.site, .embed footer.site, .embed .skip { display: none; }
.embed body { display: block; min-height: 0; }
.embed main { padding: var(--space-2) 0; }
.embed body, body.embed { background: transparent; }
.embed .page-head { padding-right: 0; }
.no-prov .prov { display: none; }
.no-prov .prov-notice { display: block; }
.prov-notice { display: none; color: var(--ba-alert); font-size: .8rem; margin: 0 0 10px; }

@media (max-width: 640px) {
  h1 { font-size: 1.35rem; }
  table.data .hide-sm { display: none; }
  table.data th, table.data td { padding: 8px; }
  .method dl { grid-template-columns: 1fr; }
  .method dd { margin-bottom: 6px; }
}

/* Staff workbench (/tools/workbench, docs/34) */
.wb-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 16px 0 12px; align-items: center; }
.wb-tabs .wb-out { margin-left: auto; }
button.secondary { background: transparent; color: var(--ba-accent-strong); border: 1px solid var(--ba-accent-line); padding: 4px 10px; font-weight: 500; }
button.secondary:hover { background: var(--ba-accent-soft); }
h2 button.csv { font-size: .75rem; margin-left: 8px; vertical-align: middle; }
.scroll { overflow-x: auto; }
pre.wb-json { background: var(--ba-subtle); padding: 12px; border-radius: 6px; overflow-x: auto; font-size: .82rem; }
/* `form.filters label { display: flex }` would otherwise beat the hidden attribute on per-view fields. */
.ba-tools--workbench [hidden] { display: none !important; }

/* ---- Components (public/tools/ui.js, docs/36) ------------------------------------------------------------- */
/* Sections and grids */
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: var(--space-8) 0 var(--space-3); }
.section-title h2 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.section-title a { font-size: var(--text-sm); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 1100px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .grid-2, .grid-3 { grid-template-columns: minmax(0, 1fr); } }
.panel { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-4) var(--space-5); min-width: 0; }

/* The (i) beside a tile, a chart title or a column: its popover opens below, kept inside the viewport. */
.info { position: relative; display: inline-flex; vertical-align: middle; margin-left: var(--space-1); }
.info .popover { width: min(340px, 80vw); font-weight: 400; text-transform: none; letter-spacing: 0; }
.kpi .info .popover, th .info .popover { left: auto; right: -8px; }

/* KPI tile */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-5); }
.kpi { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 160px; margin: 0; padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); }
.kpi-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.kpi-label { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--color-text-2); }
.kpi-label a { color: inherit; text-decoration: none; }
.kpi-label a:hover { text-decoration: underline; }
.kpi-value { margin: var(--space-2) 0 0; font-size: var(--text-2xl); line-height: 1.1; font-weight: var(--weight-semibold); letter-spacing: -.02em; color: var(--color-text); }
.kpi-unit { margin-left: var(--space-1); font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--color-text-3); letter-spacing: 0; }
.kpi-foot { margin: var(--space-1) 0 var(--space-2); min-height: 18px; font-size: var(--text-xs); color: var(--color-text-3); }
.kpi .spark, .kpi .spark-space { margin-top: auto; width: 100%; height: 32px; }
@media (max-width: 600px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
  .kpi { min-height: 150px; padding: var(--space-3); }
  .kpi-value { font-size: var(--text-xl); }
}
.kpi--warn { border-color: var(--color-warning); }
.kpi--warn .kpi-value { color: var(--color-warning); }
.kpi--bad { border-color: var(--color-negative); }
.kpi--bad .kpi-value { color: var(--color-negative); }
.delta { font-weight: var(--weight-semibold); white-space: nowrap; }
.delta.is-good { color: var(--color-positive); }
.delta.is-bad { color: var(--color-negative); }
.delta.is-flat { color: var(--color-text-3); }
.delta-vs { font-weight: 400; color: var(--color-text-3); }

/* Chart card */
.chart-card { position: relative; min-width: 0; margin: 0 0 var(--space-4); padding: var(--space-4) var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); }
.chart-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-3); }
.chart-head h2 { display: flex; align-items: center; margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.chart-sub { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-3); }
.chart-note { display: inline-block; padding: 0 6px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-2); font-size: var(--text-xs); }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); color: var(--color-text-2); }
.legend li { display: flex; align-items: center; gap: 6px; }
.legend-mark { width: 10px; height: 10px; border-radius: 2px; background: var(--color-chart); }
.legend-mark.mark-neutral { background: var(--color-chart-2); }
.legend-mark.mark-line { height: 2px; border-radius: 1px; background: var(--color-text-2); }
.plot { position: relative; }
.plot svg.ts { display: block; overflow: visible; }

/* SVG marks: every colour from the theme */
svg .grid { stroke: var(--color-chart-grid); stroke-width: 1; vector-effect: non-scaling-stroke; }
svg .axis { fill: var(--color-text-3); font-size: 11px; }
svg.ts .axis { font-size: 11px; }
svg .bar.mark-accent { fill: var(--color-chart); }
svg .bar.mark-neutral { fill: var(--color-chart-2); opacity: .55; }
svg .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
svg .line.mark-accent { stroke: var(--color-chart); }
/* The five series (docs/37): stacked areas, several lines, and their legend marks. */
svg .area.s1, svg .stack.s1 { fill: var(--color-series-1); } svg .line.s1 { stroke: var(--color-series-1); }
svg .area.s2, svg .stack.s2 { fill: var(--color-series-2); } svg .line.s2 { stroke: var(--color-series-2); }
svg .area.s3, svg .stack.s3 { fill: var(--color-series-3); } svg .line.s3 { stroke: var(--color-series-3); }
svg .area.s4, svg .stack.s4 { fill: var(--color-series-4); } svg .line.s4 { stroke: var(--color-series-4); }
svg .area.s5, svg .stack.s5 { fill: var(--color-series-5); } svg .line.s5 { stroke: var(--color-series-5); }
svg .stack { stroke: var(--color-surface); stroke-width: 1; opacity: .92; }
svg .dot.s1 { fill: var(--color-series-1); } svg .dot.s2 { fill: var(--color-series-2); } svg .dot.s3 { fill: var(--color-series-3); } svg .dot.s4 { fill: var(--color-series-4); } svg .dot.s5 { fill: var(--color-series-5); }
.legend-mark.s1 { background: var(--color-series-1); } .legend-mark.s2 { background: var(--color-series-2); } .legend-mark.s3 { background: var(--color-series-3); }
.legend-mark.s4 { background: var(--color-series-4); } .legend-mark.s5 { background: var(--color-series-5); }
svg .line.mark-neutral { stroke: var(--color-text-2); }
svg .area.mark-accent { fill: var(--color-chart); opacity: .14; stroke: none; }
svg .area.mark-neutral { fill: var(--color-chart-2); opacity: .14; stroke: none; }
svg .dot.mark-accent { fill: var(--color-chart); }
svg .dot.mark-neutral { fill: var(--color-text-2); }
svg .dot-mark { stroke: var(--color-surface); stroke-width: 2; }
svg .ref { stroke: var(--color-mark); stroke-width: 1; stroke-dasharray: 2 3; vector-effect: non-scaling-stroke; }
svg .hit { fill: transparent; }
svg .hit.on { fill: var(--color-text); opacity: .06; }
.tip { position: absolute; z-index: 15; pointer-events: none; padding: 6px 10px; background: var(--color-surface-raised); color: var(--color-text-2);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-2); font-size: var(--text-xs); white-space: nowrap; }
.tip[hidden] { display: none; }
.tip b { color: var(--color-text); font-weight: var(--weight-semibold); }
svg.spark { display: block; overflow: visible; }

/* Horizontal bars (HTML, so labels wrap) */
.hbars { position: relative; display: grid; gap: var(--space-2); }
.hbar { display: grid; grid-template-columns: minmax(96px, 34%) minmax(0, 1fr) 64px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
/* U2.4: a name gets its room before a bar does: the labels share one column as wide as the longest name, the
   bars take what is left (24px at least), so every bar still starts at the same place. */
@supports (grid-template-columns: subgrid) {
  .hbars { grid-template-columns: minmax(0, max-content) minmax(24px, 1fr) auto; column-gap: var(--space-3); }
  .hbar { grid-column: 1 / -1; grid-template-columns: subgrid; }
}
.hbar-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.hbar-sub { display: block; font-size: var(--text-xs); color: var(--color-text-3); overflow: hidden; text-overflow: ellipsis; }
.hbar-track { height: 10px; background: var(--color-surface-2); border-radius: 3px; overflow: hidden; }
.hbar-fill { display: block; height: 100%; border-radius: 3px; background: var(--color-chart); }
.hbar-fill.mark-neutral { background: var(--color-chart-2); }
.hbar-value { text-align: right; color: var(--color-text-2); font-weight: var(--weight-medium); white-space: nowrap; }
.hbar:hover .hbar-fill { filter: brightness(.92); }
/* Narrow phones: the label above its bar, full width, so long titles aren't cut to a few words. */
@media (max-width: 480px) {
  .hbars { grid-template-columns: minmax(0, 1fr); }
  .hbar { grid-column: auto; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "track value"; row-gap: 4px; }
  .hbar-label { grid-area: label; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .hbar-track { grid-area: track; }
  .hbar-value { grid-area: value; }
}

/* Data table */
.table-wrap { position: relative; max-width: 100%; overflow-x: auto; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
table.dt { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); }
table.dt th, table.dt td { padding: 10px var(--space-3); text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
table.dt thead th { position: sticky; top: 0; z-index: 2; background: var(--color-surface-2); color: var(--color-text-2); font-size: var(--text-xs); font-weight: var(--weight-semibold);
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
table.dt tbody tr:last-child td { border-bottom: 0; }
table.dt tbody tr:not(.dt-detail):hover td { background: var(--color-surface-2); }
table.dt .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.dt th.num .th-sort { flex-direction: row-reverse; }
.th-sort { display: inline-flex; align-items: center; gap: 4px; padding: 0; background: none; border: 0; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; cursor: pointer; }
.th-sort:hover { background: none; color: var(--color-text); }
.sort-ind { width: 8px; height: 10px; opacity: .35; background: currentColor;
  clip-path: polygon(50% 0, 100% 40%, 0 40%, 50% 0, 0 60%, 100% 60%, 50% 100%); }
th[aria-sort="ascending"] .sort-ind { opacity: 1; clip-path: polygon(50% 10%, 100% 70%, 0 70%); }
th[aria-sort="descending"] .sort-ind { opacity: 1; clip-path: polygon(0 30%, 100% 30%, 50% 90%); }
th[aria-sort] { color: var(--color-text); }
.dt-x { width: 36px; padding-right: 0 !important; }
.dt-toggle { display: inline-grid; place-items: center; width: 24px; height: 24px; padding: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-2);
  font-size: 18px; line-height: 1; font-weight: 400; }
.dt-toggle:hover { background: var(--color-surface-2); color: var(--color-text); }
.dt-toggle span { display: block; transition: transform .12s ease; }
.dt-toggle[aria-expanded="true"] span { transform: rotate(90deg); }
tr.dt-detail td { background: var(--color-bg); color: var(--color-text-2); font-size: var(--text-sm); }
tr.dt-detail[hidden] { display: none; }
.dt-more { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-3) 0 0; }
.btn-ghost { background: transparent; color: var(--color-accent-strong); border: 1px solid var(--color-border-strong); padding: 5px 12px; font-size: var(--text-sm); font-weight: var(--weight-medium); }
.btn-ghost:hover { background: var(--color-surface-2); color: var(--color-text); }
.quiet-line { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-2); }
.cell-title { font-weight: var(--weight-medium); }
.cell-sub { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-3); }
/* A post table (UI.table stack: true, docs/39 m34) on a phone: each row a card, the title across the width, the other
   cells as "Label  value" lines; the head stays for screen readers only. */
@media (max-width: 600px) {
  table.dt-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.dt-stack, table.dt-stack tbody, table.dt-stack tr, table.dt-stack td { display: block; width: 100%; }
  table.dt-stack tbody tr:not(.dt-detail) { position: relative; padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
  table.dt-stack tbody tr:last-child { border-bottom: 0; }
  table.dt-stack td { border-bottom: 0; padding: 2px var(--space-3); text-align: left; }
  table.dt-stack td[data-label] { display: flex; justify-content: space-between; gap: var(--space-3); }
  table.dt-stack td[data-label]::before { content: attr(data-label); flex: none; color: var(--color-text-3); font-size: var(--text-xs); }
  table.dt-stack td.num { text-align: right; }
  table.dt-stack td.dt-primary { padding-top: var(--space-1); padding-bottom: var(--space-1); padding-right: 44px; font-size: var(--text-base); }
  table.dt-stack td.dt-x { position: absolute; top: var(--space-2); right: var(--space-2); width: auto; padding: 0; }
  table.dt-stack td.dt-x:empty { display: none; }
  table.dt-stack tr.dt-detail[hidden], table.dt-stack td.hide-sm { display: none; }
}
@media (max-width: 640px) { table.dt .hide-sm { display: none; } table.dt th, table.dt td { padding: 8px 6px; } table.dt thead th { white-space: normal; letter-spacing: .02em; } }

/* Status badges: the .st chips above, plus the states the hub shows */
.st-quiet, .st-older, .st-ok { background: var(--ba-quiet-bg); color: var(--ba-quiet-ink); }
.st-failed { background: var(--color-negative-subtle); color: var(--color-negative); box-shadow: inset 0 0 0 1px var(--color-negative); }
.st-late { background: var(--ba-warn-soft); color: var(--ba-warn-ink); }

/* Skeletons: the size of what replaces them, so nothing moves */
.skel { display: block; border-radius: var(--radius-sm); background: var(--color-surface-2); animation: skel 1.4s ease-in-out infinite; }
.skel-line { height: 12px; margin: var(--space-2) 0; }
.skel-line.w30 { width: 30%; } .skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; }
.skel-block { height: 30px; width: 55%; margin: var(--space-2) 0; }
.skel-plot { height: var(--h, 220px); }
@media (max-width: 600px) { .skel-plot { height: var(--h-sm, var(--h, 220px)); } }
.skel-text { display: inline-block; height: 1em; vertical-align: middle; }
.skel-text.w30 { width: 30%; min-width: 120px; } .skel-text.w60 { width: 60%; min-width: 180px; }
.skel-row { height: 20px; margin: 12px var(--space-3); }
.skel-card { padding: var(--space-2) 0; }
.skel-hbars .skel-line { height: 14px; margin: 10px 0; }
@keyframes skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }

/* Before the page's script runs (the browser may paint while hub.js and ui.js load), a page's data containers hold
   the height of their skeletons, so nothing moves when they fill. Pages name them #kpis, #chart and #table. Only
   until the page is ready (UI.ready sets data-ready): a container a page leaves empty on purpose, such as an empty
   search's KPIs and chart, then takes no room (docs/39 m30: about 460 px blank).
   P1.4: these are defaults, of no specificity (:where), so a page's own measured reservation (console-reserve.css, C1)
   wins: with the ids in them they beat it, and Search demand's key figures started at 160 px and grew to 443 at 1100. */
:where(:root:not([data-ready]) main #kpis:empty) { min-height: 160px; margin-bottom: var(--space-5); }
:where(:root:not([data-ready]) main #chart:empty) { min-height: 304px; margin-bottom: var(--space-4); }
:where(:root:not([data-ready]) main #table:empty) { min-height: 254px; }
@media (max-width: 600px) { :where(:root:not([data-ready]) main #kpis:empty) { min-height: 308px; } }
/* The footer starts below the fold, so a short page's content settling never moves it on screen. */
main { min-height: 100vh; }
.embed main { min-height: 0; }

/* Filter bar: a page's filters in one panel under its head (card offers, points values, promotions). */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.filter-bar label.inline, .filter-bar .fb-field { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-3); }
.filter-bar select, .filter-bar input[type="search"] { width: auto; min-width: 140px; padding: 6px 10px; font-size: var(--text-sm); }
.filter-bar input[type="search"] { min-width: 200px; }
.filter-bar .fb-count { margin-left: auto; font-size: var(--text-sm); color: var(--color-text-3); }
/* The count is written by the page's script; on phones it wraps to its own line, so it holds that line from the first
   paint (a space in an empty count), and the filter bar doesn't grow under the reader. */
.filter-bar .fb-count:empty::before { content: '\00a0'; }
.filter-bar .btn-ghost { padding: 4px 10px; }
@media (max-width: 600px) { .filter-bar select, .filter-bar input[type="search"] { min-width: 0; flex: 1 1 140px; } .filter-bar label.inline, .filter-bar .fb-field { flex: 1 1 100%; } .filter-bar .fb-field select { flex: 1; } }

/* Empty and quiet states: say why */
.empty { display: grid; place-items: center; gap: var(--space-1); min-height: 140px; padding: var(--space-6) var(--space-4); text-align: center; border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius); background: var(--color-surface); }
.chart-card .empty { min-height: 180px; border: 0; background: var(--color-bg); }
.empty-title { margin: 0; font-weight: var(--weight-semibold); color: var(--color-text); }
.empty-reason { margin: 0; max-width: 60ch; font-size: var(--text-sm); color: var(--color-text-3); }

/* Overview (/tools/): the health strip, a six-tile KPI row, ranked lists, the status mix */
.health-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; min-height: 36px; margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); font-size: var(--text-sm); color: var(--color-text-2); }
.health-strip .skel { flex: 1; margin: 0; }
/* U2.5: a strip or notice with nothing in it isn't drawn: no empty grey bar. */
.health-strip:empty, .notice:empty, .prov-notice:empty { display: none; }
.skel-card-change { gap: var(--space-2); min-height: 118px; }
@media (max-width: 600px) { .health-strip .hs-detail { display: none; } }
main #pulse:empty { min-height: 324px; margin-bottom: var(--space-4); }
@media (max-width: 600px) { .ba-tools--index #kpis:empty { min-height: 466px; } }
.dot-st { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 2px; background: var(--color-mark); }
.dot-st.is-ok { background: var(--color-positive); }
.dot-st.is-warn { background: var(--color-warning); }
.health-strip strong { color: var(--color-text); font-weight: var(--weight-semibold); }
@media (min-width: 1280px) { .kpis-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.grid-2 + .grid-2 { margin-top: var(--space-4); }
.panel .section-title { margin: 0 0 var(--space-3); }
.panel-sub { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-3); }
.rank-list { margin: 0; padding: 0; list-style: none; counter-reset: rank; }
.rank-list li { display: flex; align-items: center; gap: var(--space-3); min-height: 52px; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); counter-increment: rank; }
.rank-list li:first-child { border-top: 0; }
.rank-list li::before { content: counter(rank); flex: none; width: 18px; color: var(--color-text-3); font-size: var(--text-sm); text-align: right; }
.rank-main { flex: 1; min-width: 0; font-size: var(--text-sm); line-height: 1.35; }
.rank-main a { color: var(--color-text); text-decoration: none; font-weight: var(--weight-medium); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank-main a:hover { text-decoration: underline; }
.rank-fig { flex: none; min-width: 64px; text-align: right; font-size: var(--text-xs); color: var(--color-text-3); white-space: nowrap; }
.rank-fig b { display: block; font-size: var(--text-md); color: var(--color-text); font-weight: var(--weight-semibold); }
.rank-list .spark { flex: none; }
@media (max-width: 480px) { .rank-list .spark { display: none; } }
.mix { display: flex; width: 100%; max-width: 280px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--color-surface-2); }
.mix span { display: block; height: 100%; }
.mix-verified { background: var(--color-positive); }
.mix-editorial { background: var(--color-info); }
.mix-partial, .mix-wide { background: var(--color-warning); }
.mix-conflict { background: var(--color-negative); }
.mix-reported { background: var(--color-chart-2); }
.mix-single, .mix-stale, .mix-none, .mix-ended, .mix-expired { background: var(--color-mark); opacity: .5; }
.mix-legend { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; font-size: var(--text-xs); color: var(--color-text-3); }
.nowrap { white-space: nowrap; }
.connect.panel { margin-top: var(--space-8); }
/* Small multiples (docs/37): a grid of small cards, one sparkline each. */
.multiples { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--space-3); }
.mult { margin: 0; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); min-width: 0; }
.mult-title { margin: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mult-title a { color: var(--color-text); text-decoration: none; }
.mult-title a:hover { text-decoration: underline; }
.mult-value { margin: 2px 0 var(--space-1); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.mult-note { font-size: var(--text-xs); font-weight: var(--weight-regular, 400); color: var(--color-text-3); }
.mult .spark { display: block; width: 100%; height: 40px; }
.mult-sub { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-3); }
svg .spark-band { fill: var(--color-accent-subtle); }
/* Pipeline timeline (/tools/status): runs coloured by outcome. */
svg .run { fill: var(--color-chart); }
svg .run-failed { fill: var(--color-negative); }
svg .run-partial { fill: var(--color-warning); }
svg .lane-label { fill: var(--color-text-2); }

/* This week in numbers (Overview, docs/37): the sentences, each linking to where its figure comes from. */
.week-panel { margin: 0 0 var(--space-4); }
.week-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); }
.week-list li { position: relative; padding-left: var(--space-4); font-size: var(--text-sm); line-height: 1.45; }
.week-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 6px; height: 6px; border-radius: 50%; background: var(--color-chart); }
.week-list a { color: var(--color-text); text-decoration: none; }
.week-list a:hover { text-decoration: underline; }
@media (max-width: 900px) { .week-list { grid-template-columns: 1fr; } }
main #week:empty { min-height: 160px; }
#week .skel-hbars { min-height: 160px; }
.panel-foot { margin: var(--space-3) 0 0; font-size: var(--text-xs); color: var(--color-text-3); }
.hbar-sub .spark { vertical-align: middle; margin-left: 4px; }
.connect.panel h2 { margin-top: 0; }

/* Live now (Overview and Trending): the network's active readers, the top posts and blogs right now. */
/* Chart extras (docs/37): shaded runs of days (history the index holds only part of) and a dashed comparison line. */
.ts .band { fill: var(--color-warning-subtle); opacity: .7; }
.ts .band-label { fill: var(--color-warning); }
.ts .line.dashed { stroke-dasharray: 5 4; stroke-width: 1.5; }
.legend-mark.mark-dashed { background: none; border-top: 2px dashed var(--color-chart-2); height: 0; margin-top: 5px; }
.legend-mark.mark-warn { background: var(--color-warning); }
.legend-mark.mark-bad { background: var(--color-negative); }
.legend-mark.mark-band { background: var(--color-warning-subtle); border: 1px solid var(--color-warning); }
.live-strip { margin: 0 0 var(--space-5); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); }
.live-head { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-3); }
.live-head h2 { margin: 0; font-size: var(--text-md); font-weight: var(--weight-semibold); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-positive); box-shadow: 0 0 0 3px var(--color-positive-subtle); }
.live-meta { font-size: var(--text-sm); color: var(--color-text-3); }
.live-meta strong { color: var(--color-warning); font-weight: var(--weight-medium); }
.live-grid { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2fr) minmax(0, 1.4fr); gap: var(--space-5); align-items: start; }
/* U2.4: the blogs' list takes the room its longest name needs (to 290px); the post titles, cut short already, give it. */
@media (min-width: 901px) { .live-grid { grid-template-columns: minmax(160px, 0.8fr) minmax(0, 2fr) minmax(0, 290px); } }
.live-grid > * { min-width: 0; }
.live-total .kpi-value { margin: 0; }
.live-cap { margin: var(--space-1) 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-3); }
.live-total .spark { width: 100%; height: 32px; }
.live-h { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
/* Rows of a fixed height (one-line titles), so the strip's height is known before its data arrives: no layout shift. */
.live-posts li { min-height: 44px; height: 44px; padding: 2px 0; }
.live-posts .live-title { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.live-posts .live-title a { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live-posts .live-title .st { flex: none; }
.live-posts .cell-sub { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 901px) { .live-strip { min-height: 540px; } main #live:empty { min-height: 540px; margin-bottom: var(--space-5); } .skel-live .live-grid .skel-block { height: 440px; } }
@media (max-width: 900px) { .live-grid { grid-template-columns: 1fr; } main #live:empty { min-height: 640px; } .skel-live .live-grid .skel-block { height: 120px; } }
/* Phones (docs/39 m33): titles cut at about 25 characters on one line; two lines there, with the full title on hover. */
@media (max-width: 600px) {
  .live-posts li { height: auto; min-height: 60px; }
  .live-posts .live-title a { white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
}

/* The design reference page (/tools/ui-kit): swatches, type, spacing, radii and shadows, read from the tokens. */
.kit-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-4); }
.kit-swatch { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; font-size: var(--text-xs); }
.kit-swatch > span { display: block; height: 48px; border-bottom: 1px solid var(--color-border); }
.kit-swatch figcaption { padding: var(--space-2); overflow-wrap: anywhere; }
.kit-row { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0; font-size: var(--text-xs); }
.kit-row code { width: 150px; flex: none; }
.kit-bar { display: inline-block; height: 12px; background: var(--color-chart); border-radius: 2px; }
.kit-radii, .kit-shadows { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: var(--space-4) 0; }
.kit-box { margin: 0; width: 160px; height: 88px; display: flex; align-items: flex-end; padding: var(--space-3); background: var(--color-surface); border: 1px solid var(--color-border); font-size: var(--text-xs); }
.kit-demo { margin: var(--space-3) 0 var(--space-2); }
.kit-code { margin: 0 0 var(--space-6); }
.kit-code summary { font-size: var(--text-sm); }
.kit-code pre { margin: var(--space-2) 0 0; padding: var(--space-3); max-height: 260px; overflow: auto; background: var(--color-surface-2); border-radius: var(--radius-sm);
  font: var(--text-xs)/1.5 var(--font-mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.kit-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* DEMO_MODE (docs/27): a bar fixed to the bottom of the window on every hub page, so it moves nothing on the page. */
/* Below the header (30), the drawer's scrim (35) and the drawer (40), so an open drawer is whole (Block N M20). */
.demo-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: var(--space-2) var(--space-4); background: var(--color-warning-subtle);
  color: var(--color-text); border-top: 1px solid var(--color-warning); font-size: var(--text-sm); text-align: center; }
.demo-banner a { color: inherit; text-decoration: underline; }
/* The banner's measured height (hub.js; it wraps to 95 px at 390 px), so nothing ends up under it. */
body.has-demo-banner { padding-bottom: var(--demo-banner-h, 56px); }

/* Traffic quality (docs/41): a page says when it leaves automated-looking views out. */
.quality-note { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--color-text-2);
  background: var(--color-warning-subtle); border-left: 3px solid var(--color-warning); border-radius: var(--radius-sm); }
.quality-note[hidden] { display: none; }

/* Annotations on charts (M-1): what happened on a day. */
.note-line { stroke: var(--color-text-3); stroke-width: 1; stroke-dasharray: 3 3; }
.note-dot { fill: var(--color-warning); stroke: var(--color-surface); stroke-width: 1.5; }

/* U1.0: a sparkline's per-day dots: solid for a day that cleared a bar, hollow for one that didn't. */
.spark .dot-solid { fill: var(--color-accent); stroke: none; }
.spark .dot-hollow { fill: var(--color-surface); stroke: var(--color-accent); stroke-width: 1.2; }

/* ---- U1.1: the kit's newer parts ---------------------------------------------------------------------------------- */
/* A second chart series (the second pressed card): its own colour on the right axis. */
svg .line.mark-series-3 { stroke: var(--color-series-3); }
svg .dot.mark-series-3 { fill: var(--color-series-3); }
.legend-mark.mark-series-3 { background: var(--color-series-3); }

/* Metric cards that drive the chart (Search Console's): a pressed card is a line; its top edge takes the line's colour. */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0; margin: 0 0 var(--space-3); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.card { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; margin: 0; padding: var(--space-3) var(--space-4) var(--space-3);
  border: 0; border-right: 1px solid var(--color-border); border-top: 3px solid transparent; border-radius: 0; background: transparent; color: var(--color-text);
  font: inherit; text-align: left; cursor: pointer; }
.card:last-child { border-right: 0; }
.card:hover { background: var(--color-surface-2); }
.card:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.card-on { background: var(--color-accent-subtle); }
.card-on.card-slot-0 { border-top-color: var(--color-chart); }
.card-on.card-slot-1 { border-top-color: var(--color-series-3); }
.card-label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-2); }
.card-value { font-size: var(--text-xl); font-weight: var(--weight-semibold); font-variant-numeric: tabular-nums; line-height: var(--leading-tight); }
.card-foot { font-size: var(--text-xs); color: var(--color-text-3); min-height: 1.3em; }
.card .st { margin-top: var(--space-1); }
@media (max-width: 600px) { .cards { grid-template-columns: repeat(2, 1fr); } .card:nth-child(2n) { border-right: 0; } .card { border-bottom: 1px solid var(--color-border); } }
/* U2.1: never a lone card on its own row: three in a row, six as two rows of three (staff), wider than a phone. */
@media (min-width: 601px) {
  .cards-n3, .cards-n6 { grid-template-columns: repeat(3, 1fr); }
  .cards-n6 .card:nth-child(3n) { border-right: 0; }
  .cards-n6 .card:nth-child(-n+3) { border-bottom: 1px solid var(--color-border); }
}
/* U2.4: said once above the cards (what the changes are against, the source's agreement); a list's unit in its header. */
.cards-head { margin: 0 0 var(--space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.live-h-unit { font-weight: 400; color: var(--color-text-3); font-size: var(--text-xs); margin-left: var(--space-1); }
@media (min-width: 641px) { .cell-name { white-space: nowrap; } table.dt-compact th, table.dt-compact td { padding-left: 6px; padding-right: 6px; } table.dt-compact thead th { white-space: normal; } }
@media (max-width: 1280px) { table.dt .hide-md { display: none; } }
/* U2.7: a figure's context beside it ("small usual day", "unusual visits, checking"). */
.fig-context { font-size: var(--text-xs); color: var(--color-text-3); white-space: nowrap; }
/* In a table the context sits under its figure and wraps, so it never widens the column past a name (U2.4). */
table.dt .fig-context { display: block; white-space: normal; line-height: var(--leading-tight); }
/* U2.2: a series' axis said once, in words, above it. */
.series-caption { margin: 0 0 var(--space-1); }
/* U2.1: a public card leads with its change and draws its line; it isn't a button. */
.card-change { cursor: default; }
.card-change:hover { background: transparent; }
.card-change .card-label { display: inline-flex; align-items: center; gap: var(--space-1); }
.card-spark { display: block; width: 100%; margin-top: var(--space-1); }
.card-spark .spark { width: 100%; height: 26px; }
@media (max-width: 600px) {
  .cards-change { grid-template-columns: 1fr; }
  .cards-change .card { border-right: 0; display: grid; grid-template-columns: 1fr 45%; column-gap: var(--space-3); align-items: center; }
  .cards-change .card-label, .cards-change .card-value, .cards-change .card-foot { grid-column: 1; }
  .cards-change .card-spark { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
  .cards-change .card:last-child { border-bottom: 0; }
}

/* Tables (Clicky's density): tools above, a pinned Total row, shares in grey, trends in green and red. */
.dt-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); }
.dt-filter input { width: min(280px, 100%); padding: 5px 10px; font-size: var(--text-sm); }
.dt-size { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-text-3); white-space: nowrap; }
.dt-size select { width: auto; padding: 3px 6px; font-size: var(--text-xs); }
table.dt tr.dt-total td { font-weight: var(--weight-semibold); background: var(--color-surface-2); }
.dt-share { color: var(--color-text-3); font-variant-numeric: tabular-nums; }
.trend { font-variant-numeric: tabular-nums; color: var(--color-text-3); white-space: nowrap; }
.trend-good { color: var(--color-positive); }
.trend-bad { color: var(--color-negative); }
table.dt td.num, table.dt th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* A tab strip of links (a page's breakdowns). */
.tabs { flex-wrap: wrap; margin: 0 0 var(--space-3); }
.tabs a { display: block; padding: 5px 14px; border-radius: 4px; color: var(--color-text-2); font-size: var(--text-sm); font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.tabs a:hover { color: var(--color-text); }
.tabs a[aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }

/* Source and reading badges. */
.st-agrees, .st-read { background: var(--color-accent-subtle); color: var(--color-accent-strong); }
.st-diverges, .st-unusual { background: var(--color-warning-subtle); color: var(--color-warning); }
.st-clickyonly { background: var(--color-info-subtle); color: var(--color-info); }
.st-skimmed { background: var(--color-muted-subtle); color: var(--color-muted); }

/* The global bar (U1.2): date chips, custom dates, compare, blog picker; one on every analytics page. */
.globalbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-2) var(--space-3);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.globalbar .seg { flex-wrap: wrap; }
.globalbar .gb-custom { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-xs); color: var(--color-text-3); }
.globalbar .gb-custom input { padding: 3px 6px; font-size: var(--text-xs); }
.globalbar .gb-blog { flex: 1 1 200px; display: flex; gap: var(--space-2); justify-content: flex-end; align-items: center; }
.globalbar .gb-blog input { width: min(240px, 100%); padding: 4px 10px; font-size: var(--text-sm); }
.globalbar .gb-note { width: 100%; margin: 0; font-size: var(--text-xs); color: var(--color-text-3); }
.globalbar[hidden], .globalbar .gb-custom[hidden] { display: none; }
.globalbar .gb-custom label { display: flex; gap: var(--space-1); align-items: center; }
.globalbar .gb-apply { padding: 3px 10px; font-size: var(--text-xs); }
/* A page's own window, compare (and the report's dates and blog) while the bar stands in for them; an embed keeps them. */
.gb-on .gb-mirrored { display: none !important; }
@media (max-width: 640px) { .globalbar .gb-blog { justify-content: stretch; } .globalbar .gb-blog input { width: 100%; } }
.globalbar .gb-when { font-size: var(--text-xs); color: var(--color-text-3); }
.card:disabled { cursor: default; }
.card:disabled:hover { background: transparent; }

/* The section strip (U1b): the section's name, then its tabs, above the page head (Clicky's tab strip, GA4's section). */
.section-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-3); }
.section-bar .section-name { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .06em; text-transform: uppercase;
  color: var(--color-text-3); text-decoration: none; }
.section-bar .section-name:hover { color: var(--color-text); }
.section-bar .tabs { margin: 0; }
.embed .section-bar { display: none; }
.section-bar .tabs a[hidden] { display: none; }
@media (max-width: 640px) { .section-bar .tabs { overflow-x: auto; flex-wrap: nowrap; max-width: 100%; } }

/* U1b.4: Ask BoardingArea, the search box at the top of the nav. */
.nav-ask { margin: 0 0 var(--space-3); }
.nav-ask input { width: 100%; padding: 6px 10px; font-size: var(--text-sm); }

/* U1b.5: Live now's two lines: GA4 Realtime solid, Clicky's hours dashed, with a one-line legend. */
.live-lines .line { fill: none; stroke-width: 1.6; }
.live-lines .line-dash { stroke-dasharray: 3 3; }
.live-legend { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1) var(--space-2); margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-3); }
.live-legend .lg-solid, .live-legend .lg-dash { display: inline-block; width: 14px; height: 0; border-top: 2px solid var(--color-chart); }
.live-legend .lg-dash { border-top: 2px dashed var(--color-text-3); }

/* "Why this number" (V2.2, docs/43 §3): staff only. A small "?" beside a figure; its inputs in a drawer on the right
   (the whole width on a phone), above the header (30) and the nav drawer (40). */
.why-btn { display: inline-grid; place-items: center; width: 16px; height: 16px; margin-left: var(--space-1); padding: 0; vertical-align: middle; border-radius: 50%;
  border: 1px dashed var(--color-border-strong); background: transparent; color: var(--color-text-3); font: var(--weight-bold) 10px/1 var(--font); cursor: help; }
.why-btn:hover, .why-btn:focus-visible { background: var(--color-surface-2); color: var(--color-text); border-style: solid; }
.why-strip { margin: var(--space-2) 0 0; }
.why-drawer { position: fixed; z-index: 45; top: 0; right: 0; bottom: 0; width: min(560px, 100vw); overflow-y: auto; padding: var(--space-4); background: var(--color-surface-raised);
  color: var(--color-text-2); border-left: 1px solid var(--color-border); box-shadow: var(--shadow-2); font-size: var(--text-sm); }
.why-drawer[hidden] { display: none; }
.why-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-2); }
.why-head h2 { margin: 0; font-size: var(--text-md, 1rem); color: var(--color-text); }
.why-part { margin: var(--space-3) 0; }
.why-part h3 { margin: 0 0 var(--space-1); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .04em; color: var(--color-text-3); }
.why-dl { display: grid; grid-template-columns: max-content 1fr; gap: 2px var(--space-3); margin: 0; }
.why-dl dt { color: var(--color-text-3); }
.why-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.why-dl .why-dl { grid-column: 1 / -1; }
.why-table { width: 100%; border-collapse: collapse; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.why-table th, .why-table td { padding: 2px var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; white-space: nowrap; }
.why-table tr.why-off td { color: var(--color-text-3); text-decoration: line-through; }

/* ---- "How we know" (T2.1) and a spike's line (T2.2) ------------------------------------------------------------- */
.know-btn { width: auto; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-full); font: var(--weight-semibold) var(--text-xs)/1 var(--font-headings);
  letter-spacing: 0; white-space: nowrap; }
.info.know { margin-left: var(--space-1); }
.know-pop { width: min(420px, 90vw); }
.know-panel { display: grid; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-text-2); }
.know-status { margin: 0; }
.know-chip { font-size: var(--text-xs); }
.know-dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); margin: 0; }
.know-dl dt { font: var(--weight-semibold) var(--text-xs)/1.5 var(--font-headings); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--color-text-3); }
.know-dl dd { margin: 0; color: var(--color-text); }
.know-dl ul { margin: 0; padding-left: var(--space-4); }
.know-method { margin: 0; font-size: var(--text-xs); color: var(--color-text-3); }
.know-trace pre { max-height: 260px; overflow: auto; font-size: var(--text-xs); }
.fd-know { margin-top: var(--space-3); font-size: var(--text-sm); }
.fd-know summary { cursor: pointer; font: var(--weight-semibold) var(--text-xs)/1.4 var(--font-headings); color: var(--color-accent-strong); }
.fd-know .know-panel { margin-top: var(--space-2); padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: var(--color-surface-2); }
.live-spike { margin: var(--space-2) 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: var(--text-sm); color: var(--color-text); }
.live-spike-check { color: var(--color-text-2); }

/* ---- T2.6: the console in Rebecca's type at 1100 px. UI text is headings text (her rule: labels and UI in Source
   Sans); the serif body is wider, so the status strip wrapped and Live now's titles cut early. The strip, the ranked
   lists and the live columns take the headings font, and Live now's columns size to their content. */
.health-strip, .health-strip *, .live-strip .rank-main, .live-strip .cell-sub, .live-meta, .live-cap, .hbar, .hbar-label, .hbar-value,
.blog-list .cell-name, .rank-list, .card-foot, .cards-head { font-family: var(--font-headings); }
@media (min-width: 901px) {
  .live-grid { grid-template-columns: minmax(150px, max-content) minmax(0, 1fr) minmax(200px, max-content); }
  .live-total { max-width: 190px; }
}
/* T2.6: the status strip on one line from 901 px: its detail a size smaller under 1280 px, cut with an ellipsis if it must. */
@media (min-width: 901px) {
  .health-strip { flex-wrap: nowrap; }
  .health-strip .hs-detail { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .health-strip strong, .health-strip a { flex: none; }
}
@media (min-width: 901px) and (max-width: 1279px) { .health-strip .hs-detail { font-size: var(--text-xs); } }

/* ---- G2.4: the console in the front door's card language (Rebecca's surface boxes: her border, radius-lg, default
   shadow, 24 px padding; a caps label, a mono figure, a caption). ------------------------------------------------ */
.kpi, .cards-change .card-change, .stat-box { padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border-strong);
  border-radius: var(--radius); box-shadow: var(--shadow-1); }
.kpi-label, .cards-change .card-label, .stat-label { font: var(--weight-semibold) var(--text-xs)/1.3 var(--font-headings); letter-spacing: var(--tracking-wider);
  text-transform: uppercase; color: var(--color-text-3); }
.cards-change { gap: var(--space-3); border: 0; background: transparent; }
.cards-change .card-change { border-right: 1px solid var(--color-border-strong); border-top: 1px solid var(--color-border-strong); }
.cards-change .card-value, .stat-fig { font-family: var(--font-mono); font-weight: var(--weight-semibold); color: var(--color-text); }
.cards-change .card-value { font-size: var(--text-2xl); }
.stat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: 0 0 var(--space-3); }
.stat-box { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.stat-box-accent { border: 2px solid var(--color-accent); }
.stat-label { display: flex; align-items: center; gap: var(--space-1); margin: 0; }
.stat-fig { margin: 0; font-size: var(--text-3xl); line-height: 1.1; overflow-wrap: anywhere; }
.stat-cap { margin: 0; font: var(--text-xs)/1.4 var(--font-headings); color: var(--color-text-3); }
.stat-chart { margin-top: var(--space-2); }
.stat-chart .spark { width: 100%; }
.live-verdict { margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-3); border-left: 3px solid var(--color-accent); background: var(--color-accent-subtle);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font: var(--weight-semibold) var(--text-sm)/1.4 var(--font-headings); color: var(--color-text); }
@media (min-width: 901px) { .live-grid.live-grid-2 { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); } }
.live-legend .lg-item { white-space: nowrap; }
.tab-fallback { margin: 0 0 var(--space-2); }
/* Rebecca's table convention: header xs uppercase with wide tracking, muted, on surface-muted; rows hover surface-muted. */
table.dt thead th { letter-spacing: var(--tracking-wide); color: var(--color-text-3); font-family: var(--font-headings); }
@media (max-width: 900px) { .stat-row { grid-template-columns: minmax(0, 1fr); } .stat-fig { font-size: var(--text-2xl); } }
/* G2.4: a panel loading says so in one line, in the space it will fill (no grey blocks sitting on screen). */
.loading-line { margin: 0 0 var(--space-2); font: var(--text-sm)/1.4 var(--font-headings); color: var(--color-text-3); }
[aria-hidden="true"] .skel, .skel { visibility: hidden; animation: none; }
.kpis > .loading-line, .cards > .loading-line, .live-grid > .loading-line, .stat-row > .loading-line { grid-column: 1 / -1; }
/* G2.1 N2/N4: Home's list headers may take two lines ("So far / today"), so the longer, honest labels fit at 1100 px. */
.home-blogs table.dt thead th, #home-blogs table.dt thead th { white-space: normal; }
/* G2.4: the "How we know" pill keeps a visible edge in both themes. */
.know-btn { color: var(--color-text-2); border-color: var(--color-text-3); }
/* G2.6: a change said in words ("about +10%", "within ±5%") stays on one line in its card; smaller on phones. */
.card-change .card-value { white-space: nowrap; }
@media (max-width: 500px) { .card-change .card-value { font-size: var(--text-2xl); } }

/* D3.7: the console takes three things from the front door, and nothing else (no scroll reveals on its tables): a
   frosted header where it is a top bar, hovers that ease out in 180 ms, and one entrance for its panels and tiles as
   they are drawn. Only opacity and transform move; reduced motion gets none of it. */
@media (max-width: 900px) {
  header.site { background: color-mix(in srgb, var(--color-surface) 72%, transparent); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
}
.panel, .kpi, .card, nav.tools a, .btn, .chip-btn { transition: background-color .18s cubic-bezier(.22, 1, .36, 1), border-color .18s cubic-bezier(.22, 1, .36, 1), color .18s cubic-bezier(.22, 1, .36, 1); }
@media (prefers-reduced-motion: no-preference) {
  main .panel, main .kpi { animation: console-in .45s cubic-bezier(.4, 0, .2, 1) both; }
}
@keyframes console-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }


/* U1b.2: the breakdown table above the network's mix. */
.ba-tools--acquisition .acq-report { margin: 0 0 var(--space-5); }
.ba-tools--acquisition .acq-report .meta { margin: 0 0 var(--space-2); }
.ba-tools--acquisition .acq-more-title { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* AI referrals (/tools/ai-referrals): each post's mix of assistants as one small stacked bar */
.ai-mix { display: flex; width: 120px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--color-surface-2); }
.ai-mix span { display: block; height: 100%; }
.ai-mix-lead { background: var(--color-chart); }
.ai-mix-rest { background: var(--color-chart-2); opacity: .6; }
.ai-mix-rest + .ai-mix-rest { opacity: .35; }
/* sr-only text in cells (a change's direction in words) is absolutely positioned: the table's scroller must be its
   containing block, or it widens the page on phones. Recommended for .table-wrap in components.css. */
.ba-tools--ai-referrals .table-wrap { position: relative; }
/* Phones: headers wrap and cells tighten, so the text column keeps its width (recommended for table.dt generally). */
@media (max-width: 640px) {
  .ba-tools--ai-referrals table.dt thead th { white-space: normal; vertical-align: bottom; }
  .ba-tools--ai-referrals table.dt th, .ba-tools--ai-referrals table.dt td { padding: 8px 6px; }
}

/* The two charts side by side: share by assistant, and its path over time (docs/37). */
.ai-charts { align-items: start; margin-bottom: var(--space-4); }
.ai-charts > div > .chart-card { margin: 0; }
@media (max-width: 1100px) { .ai-charts { grid-template-columns: minmax(0, 1fr); } }
/* The blocks hold their filled heights before the script runs and while the data loads (the page draws its loading
   state at once, then again when the blog list is in): Sep 24 audit, 0.03 at 1440 and 0.043 on phones. A min-height
   box keeps its content's bottom margin inside, so the loading rule for the key figures adds their 20px; the charts'
   skeletons are drawn at the filled cards' heights (ai-referrals.html). */
.ba-tools--ai-referrals .ai-charts > #chart:empty { min-height: 338px; margin-bottom: 0; }
@media (max-width: 600px) {
  .ba-tools--ai-referrals .ai-charts > #chart:empty { min-height: 448px; }
  .ba-tools--ai-referrals .ai-charts > #trend:empty { min-height: 360px; }
}
/* P1.4: the key figures' reservation is console-reserve.css's (C1, from the live page at each width). The rules that
   were here held a shorter box while the figures loaded and, with the #kpis id, beat it: at 1100 the box grew when the
   data landed (CLS 0.059 on AI referrals, 0.067 on Search demand). */

/* Ask BoardingArea (/tools/ask): the question, the answer, its numbered sources */
.ba-tools--ask .ask-form { display: grid; gap: var(--space-2); margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); }
.ba-tools--ask .ask-label { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text); }
.ba-tools--ask .ask-form textarea { min-height: 96px; font-size: var(--text-md); padding: 10px 14px; }
.ba-tools--ask .ask-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.ba-tools--ask .answer-card { padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.ba-tools--ask .answer-card .answer { padding: 0; border: 0; background: none; max-width: 80ch; line-height: 1.6; }
.ba-tools--ask .ask-wait { display: grid; gap: var(--space-1); min-height: 180px; }
.ba-tools--ask .ask-wait .meta { margin: 0 0 var(--space-2); }
.ba-tools--ask .sources { margin: 0; padding: 0; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.ba-tools--ask .source { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.ba-tools--ask .source:first-child { border-top: 0; }
.ba-tools--ask .source:target { background: var(--color-accent-subtle); }
.ba-tools--ask .source a { color: var(--color-text); font-weight: var(--weight-medium); }
.ba-tools--ask .source-n { flex: none; display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px;
  background: var(--color-accent-subtle); color: var(--color-accent-strong); font-size: var(--text-xs); font-weight: var(--weight-bold); }
@media (max-width: 600px) { .ba-tools--ask .answer-card { padding: var(--space-4); } }

/* Attribution (/tools/attribution) */
.attr-note { margin-top: var(--space-4); }
.attr-posts { margin: 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
/* Phones: headers wrap and cells tighten, so the text column keeps its width (recommended for table.dt generally). */
@media (max-width: 640px) {
  .ba-tools--attribution table.dt thead th { white-space: normal; vertical-align: bottom; }
  .ba-tools--attribution table.dt th, .ba-tools--attribution table.dt td { padding: 8px 6px; }
}

/* Blog directory (/tools/blogs) */
.ba-tools--blogs .page-controls input[type="search"] { min-width: 220px; }
.ba-tools--blogs .blog-desc { margin: 0 0 var(--space-2); max-width: 80ch; color: var(--color-text-2); }
.ba-tools--blogs tr.dt-detail p.meta { margin: 0; }
@media (max-width: 600px) {
  .ba-tools--blogs .page-controls { width: 100%; }
  .ba-tools--blogs .page-controls input[type="search"], .ba-tools--blogs .page-controls select { flex: 1 1 100%; min-width: 0; }
}

/* The traffic grid's sort, beside its title; full width on phones (docs/37). */
.section-title:has(#grid-sort) { flex-wrap: wrap; }
@media (max-width: 600px) { #grid-sort { display: flex; width: 100%; } #grid-sort label { flex: 1; } #grid-sort span { text-align: center; padding: 4px 6px; white-space: normal; } }

/* U1.4: Home's list, full width, above the directory. */
.ba-tools--blogs .blogs-usual { margin: 0 0 var(--space-5); }
.ba-tools--blogs .blogs-usual .meta { margin: 0 0 var(--space-2); }

/* One card's offer (/tools/cards/<slug>). */
.co-crumb { margin: 0 0 var(--space-1); font-size: var(--text-sm); color: var(--color-text-3); }
.co-crumb a { color: var(--color-text-3); }
.co-current { margin: 0 0 var(--space-4); }
.co-offers { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-3); }
.co-offer { display: grid; gap: 2px; padding: var(--space-4); border-radius: var(--radius); }
.co-best { background: var(--color-accent-subtle); }
.co-public { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.co-reported { box-shadow: inset 0 0 0 1px var(--ba-reported-line); background: transparent; }
.co-reported .co-v { color: var(--ba-reported-ink); font-style: italic; }
.co-k { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-3); }
.co-v { font-size: var(--text-xl); font-weight: var(--weight-semibold); color: var(--color-text); letter-spacing: -.01em; }
.co-t { font-size: var(--text-sm); color: var(--color-text-2); }
.co-s { margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-text-3); }
.co-note { margin: var(--space-3) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.co-block { margin-bottom: var(--space-4); }
.co-grid { margin-bottom: var(--space-4); }
.co-grid .table-wrap { border: 0; }
.co-sources { display: grid; gap: var(--space-3); }
.co-source { padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.co-source header { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--text-sm); }
.co-q { margin: var(--space-2) 0 0; padding: 6px 10px; border-left: 3px solid var(--color-border-strong); background: var(--color-bg); font-size: var(--text-sm); }
.co-p { margin: var(--space-1) 0 0; font-size: var(--text-sm); }
.co-url { overflow-wrap: anywhere; }
.co-timeline { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); border-left: 2px solid var(--color-border); }
.co-timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-2); font-size: var(--text-sm); }
.co-timeline li::before { content: ''; position: absolute; left: calc(-1 * var(--space-4) - 6px); top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--color-chart); box-shadow: 0 0 0 3px var(--color-surface); }
.co-when { font-weight: var(--weight-semibold); color: var(--color-text); margin-right: var(--space-1); }
/* The current offer, the KPI row and the features list hold (at least) their final height before the page's script fills
   them, so nothing below moves (Block K audit). The current offer is 205 px (244 on phones) plus its 16 px margin; the
   features list is 370-475 px across cards (353-586 on phones), so its least is reserved. */
main #current:empty { min-height: 221px; }
main #features:empty { min-height: 360px; }
@media (max-width: 600px) {
  main #current:empty { min-height: 260px; }
  .ba-tools--card-offer #kpis:empty { min-height: 466px; }
  main #features:empty { min-height: 350px; }
}

/* Credit cards on BoardingArea (/tools/cards). */
.cd-sub { margin: 0 0 var(--space-3); max-width: 90ch; }
.cd-filter select { width: auto; min-width: 180px; padding: 4px 8px; font-size: var(--text-sm); }
.cd-offer { text-decoration: none; }
#roundups-block { margin-bottom: var(--space-6); }

/* GENERATED by scripts/console_reserve.ts from the live data on 2026-09-30: each console panel's height once loaded, held
   from the first paint so the page doesn't move. Edit by re-running it, not by hand. */
@media (min-width: 1280px) {
  main[data-ba-page="index"] [id="health"] { min-height: 39px; }
  main[data-ba-page="index"] [id="health"]:has(.loading-line) { max-height: 39px; overflow: hidden; }
  main[data-ba-page="index"] [id="live"] { min-height: 764px; }
  main[data-ba-page="index"] [id="live"]:has(.loading-line) { max-height: 764px; overflow: hidden; }
  main[data-ba-page="index"] [id="net-cards"] { min-height: 190px; }
  main[data-ba-page="index"] [id="net-cards"]:has(.loading-line) { max-height: 190px; overflow: hidden; }
  main[data-ba-page="index"] [id="net-series"] { min-height: 268px; }
  main[data-ba-page="index"] [id="net-series"]:has(.loading-line) { max-height: 268px; overflow: hidden; }
  main[data-ba-page="index"] [id="home-blogs"] { min-height: 1593px; }
  main[data-ba-page="index"] [id="home-blogs"]:has(.loading-line) { max-height: 1593px; overflow: hidden; }
  main[data-ba-page="index"] [id="trending"] { min-height: 140px; }
  main[data-ba-page="index"] [id="trending"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="index"] [id="rising-home"] { min-height: 140px; }
  main[data-ba-page="index"] [id="rising-home"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="index"] [id="pulse"] { min-height: 353px; }
  main[data-ba-page="index"] [id="pulse"]:has(.loading-line) { max-height: 353px; overflow: hidden; }
  main[data-ba-page="index"] [id="kpis"] { min-height: 225px; }
  main[data-ba-page="index"] [id="kpis"]:has(.loading-line) { max-height: 225px; overflow: hidden; }
  main[data-ba-page="index"] [id="week"] { min-height: 227px; }
  main[data-ba-page="index"] [id="week"]:has(.loading-line) { max-height: 227px; overflow: hidden; }
  main[data-ba-page="index"] [id="audience"] { min-height: 362px; }
  main[data-ba-page="index"] [id="audience"]:has(.loading-line) { max-height: 362px; overflow: hidden; }
  main[data-ba-page="index"] [id="stories"] { min-height: 350px; }
  main[data-ba-page="index"] [id="stories"]:has(.loading-line) { max-height: 350px; overflow: hidden; }
  main[data-ba-page="index"] [id="search"] { min-height: 596px; }
  main[data-ba-page="index"] [id="search"]:has(.loading-line) { max-height: 596px; overflow: hidden; }
  main[data-ba-page="index"] [id="ai"] { min-height: 380px; }
  main[data-ba-page="index"] [id="ai"]:has(.loading-line) { max-height: 380px; overflow: hidden; }
  main[data-ba-page="index"] [id="verified"] { min-height: 263px; }
  main[data-ba-page="index"] [id="verified"]:has(.loading-line) { max-height: 263px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-cards"] { min-height: 343px; }
  main[data-ba-page="scorecard"] [id="sc-cards"]:has(.loading-line) { max-height: 343px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-series"] { min-height: 268px; }
  main[data-ba-page="scorecard"] [id="sc-series"]:has(.loading-line) { max-height: 268px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-table"] { min-height: 335px; }
  main[data-ba-page="scorecard"] [id="sc-table"]:has(.loading-line) { max-height: 335px; overflow: hidden; }
  main[data-ba-page="trending"] [id="live"] { min-height: 764px; }
  main[data-ba-page="trending"] [id="live"]:has(.loading-line) { max-height: 764px; overflow: hidden; }
  main[data-ba-page="trending"] [id="kpis"] { min-height: 213px; }
  main[data-ba-page="trending"] [id="kpis"]:has(.loading-line) { max-height: 213px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-breakouts"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-breakouts"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="table"] { min-height: 193px; }
  main[data-ba-page="trending"] [id="table"]:has(.loading-line) { max-height: 193px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-rising"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-rising"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="rising"] { min-height: 448px; }
  main[data-ba-page="trending"] [id="rising"]:has(.loading-line) { max-height: 448px; overflow: hidden; }
  main[data-ba-page="trending"] [id="network"] { min-height: 742px; }
  main[data-ba-page="trending"] [id="network"]:has(.loading-line) { max-height: 742px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-unusual"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-unusual"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="unusual"] { min-height: 482px; }
  main[data-ba-page="trending"] [id="unusual"]:has(.loading-line) { max-height: 482px; overflow: hidden; }
  main[data-ba-page="trending"] [id="resurging"] { min-height: 140px; }
  main[data-ba-page="trending"] [id="resurging"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-most"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-most"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="most"] { min-height: 811px; }
  main[data-ba-page="trending"] [id="most"]:has(.loading-line) { max-height: 811px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="kpis"] { min-height: 191px; }
  main[data-ba-page="ai-referrals"] [id="kpis"]:has(.loading-line) { max-height: 191px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="chart"] { min-height: 320px; }
  main[data-ba-page="ai-referrals"] [id="chart"]:has(.loading-line) { max-height: 320px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="trend"] { min-height: 339px; }
  main[data-ba-page="ai-referrals"] [id="trend"]:has(.loading-line) { max-height: 339px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="table-note"] { min-height: 20px; }
  main[data-ba-page="ai-referrals"] [id="table-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="table"] { min-height: 1860px; }
  main[data-ba-page="ai-referrals"] [id="table"]:has(.loading-line) { max-height: 1860px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="blogs-note"] { min-height: 20px; }
  main[data-ba-page="ai-referrals"] [id="blogs-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="blogs"] { min-height: 1054px; }
  main[data-ba-page="ai-referrals"] [id="blogs"]:has(.loading-line) { max-height: 1054px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="note"] { min-height: 20px; }
  main[data-ba-page="search-console"] [id="note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="cards"] { min-height: 153px; }
  main[data-ba-page="search-console"] [id="cards"]:has(.loading-line) { max-height: 153px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="series"] { min-height: 264px; }
  main[data-ba-page="search-console"] [id="series"]:has(.loading-line) { max-height: 264px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="tab-note"] { min-height: 20px; }
  main[data-ba-page="search-console"] [id="tab-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="tab"] { min-height: 575px; }
  main[data-ba-page="search-console"] [id="tab"]:has(.loading-line) { max-height: 575px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="kpis"] { min-height: 242px; }
  main[data-ba-page="search-queries"] [id="kpis"]:has(.loading-line) { max-height: 242px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="chart"] { min-height: 670px; }
  main[data-ba-page="search-queries"] [id="chart"]:has(.loading-line) { max-height: 670px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="topics"] { min-height: 419px; }
  main[data-ba-page="search-queries"] [id="topics"]:has(.loading-line) { max-height: 419px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="table-note"] { min-height: 20px; }
  main[data-ba-page="search-queries"] [id="table-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="table"] { min-height: 1635px; }
  main[data-ba-page="search-queries"] [id="table"]:has(.loading-line) { max-height: 1635px; overflow: hidden; }
  main[data-ba-page="status"] [id="counts"] { min-height: 20px; }
  main[data-ba-page="status"] [id="counts"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="status"] [id="status"] { min-height: 39px; }
  main[data-ba-page="status"] [id="status"]:has(.loading-line) { max-height: 39px; overflow: hidden; }
  main[data-ba-page="status"] [id="today"] { min-height: 721px; }
  main[data-ba-page="status"] [id="today"]:has(.loading-line) { max-height: 721px; overflow: hidden; }
  main[data-ba-page="status"] [id="kpis"] { min-height: 189px; }
  main[data-ba-page="status"] [id="kpis"]:has(.loading-line) { max-height: 189px; overflow: hidden; }
  main[data-ba-page="status"] [id="sources"] { min-height: 475px; }
  main[data-ba-page="status"] [id="sources"]:has(.loading-line) { max-height: 475px; overflow: hidden; }
  main[data-ba-page="status"] [id="coverage"] { min-height: 260px; }
  main[data-ba-page="status"] [id="coverage"]:has(.loading-line) { max-height: 260px; overflow: hidden; }
  main[data-ba-page="status"] [id="pass"] { min-height: 308px; }
  main[data-ba-page="status"] [id="pass"]:has(.loading-line) { max-height: 308px; overflow: hidden; }
  main[data-ba-page="status"] [id="verified"] { min-height: 316px; }
  main[data-ba-page="status"] [id="verified"]:has(.loading-line) { max-height: 316px; overflow: hidden; }
  main[data-ba-page="status"] [id="ga-gaps"] { min-height: 725px; }
  main[data-ba-page="status"] [id="ga-gaps"]:has(.loading-line) { max-height: 725px; overflow: hidden; }
  main[data-ba-page="status"] [id="gsc-gaps"] { min-height: 746px; }
  main[data-ba-page="status"] [id="gsc-gaps"]:has(.loading-line) { max-height: 746px; overflow: hidden; }
  main[data-ba-page="status"] [id="timeline"] { min-height: 281px; }
  main[data-ba-page="status"] [id="timeline"]:has(.loading-line) { max-height: 281px; overflow: hidden; }
  main[data-ba-page="status"] [id="add"] { min-height: 171px; }
  main[data-ba-page="status"] [id="add"]:has(.loading-line) { max-height: 171px; overflow: hidden; }
  main[data-ba-page="offers"] [id="levels"] { min-height: 313px; }
  main[data-ba-page="offers"] [id="levels"]:has(.loading-line) { max-height: 313px; overflow: hidden; }
}
@media (min-width: 901px) and (max-width: 1279px) {
  main[data-ba-page="index"] [id="health"] { min-height: 39px; }
  main[data-ba-page="index"] [id="health"]:has(.loading-line) { max-height: 39px; overflow: hidden; }
  main[data-ba-page="index"] [id="live"] { min-height: 800px; }
  main[data-ba-page="index"] [id="live"]:has(.loading-line) { max-height: 800px; overflow: hidden; }
  main[data-ba-page="index"] [id="net-cards"] { min-height: 190px; }
  main[data-ba-page="index"] [id="net-cards"]:has(.loading-line) { max-height: 190px; overflow: hidden; }
  main[data-ba-page="index"] [id="net-series"] { min-height: 268px; }
  main[data-ba-page="index"] [id="net-series"]:has(.loading-line) { max-height: 268px; overflow: hidden; }
  main[data-ba-page="index"] [id="home-blogs"] { min-height: 1628px; }
  main[data-ba-page="index"] [id="home-blogs"]:has(.loading-line) { max-height: 1628px; overflow: hidden; }
  main[data-ba-page="index"] [id="trending"] { min-height: 140px; }
  main[data-ba-page="index"] [id="trending"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="index"] [id="rising-home"] { min-height: 140px; }
  main[data-ba-page="index"] [id="rising-home"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="index"] [id="pulse"] { min-height: 379px; }
  main[data-ba-page="index"] [id="pulse"]:has(.loading-line) { max-height: 379px; overflow: hidden; }
  main[data-ba-page="index"] [id="kpis"] { min-height: 426px; }
  main[data-ba-page="index"] [id="kpis"]:has(.loading-line) { max-height: 426px; overflow: hidden; }
  main[data-ba-page="index"] [id="week"] { min-height: 308px; }
  main[data-ba-page="index"] [id="week"]:has(.loading-line) { max-height: 308px; overflow: hidden; }
  main[data-ba-page="index"] [id="audience"] { min-height: 587px; }
  main[data-ba-page="index"] [id="audience"]:has(.loading-line) { max-height: 587px; overflow: hidden; }
  main[data-ba-page="index"] [id="stories"] { min-height: 364px; }
  main[data-ba-page="index"] [id="stories"]:has(.loading-line) { max-height: 364px; overflow: hidden; }
  main[data-ba-page="index"] [id="search"] { min-height: 614px; }
  main[data-ba-page="index"] [id="search"]:has(.loading-line) { max-height: 614px; overflow: hidden; }
  main[data-ba-page="index"] [id="ai"] { min-height: 380px; }
  main[data-ba-page="index"] [id="ai"]:has(.loading-line) { max-height: 380px; overflow: hidden; }
  main[data-ba-page="index"] [id="verified"] { min-height: 319px; }
  main[data-ba-page="index"] [id="verified"]:has(.loading-line) { max-height: 319px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-cards"] { min-height: 385px; }
  main[data-ba-page="scorecard"] [id="sc-cards"]:has(.loading-line) { max-height: 385px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-series"] { min-height: 268px; }
  main[data-ba-page="scorecard"] [id="sc-series"]:has(.loading-line) { max-height: 268px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-table"] { min-height: 335px; }
  main[data-ba-page="scorecard"] [id="sc-table"]:has(.loading-line) { max-height: 335px; overflow: hidden; }
  main[data-ba-page="trending"] [id="live"] { min-height: 800px; }
  main[data-ba-page="trending"] [id="live"]:has(.loading-line) { max-height: 800px; overflow: hidden; }
  main[data-ba-page="trending"] [id="kpis"] { min-height: 243px; }
  main[data-ba-page="trending"] [id="kpis"]:has(.loading-line) { max-height: 243px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-breakouts"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-breakouts"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="table"] { min-height: 295px; }
  main[data-ba-page="trending"] [id="table"]:has(.loading-line) { max-height: 295px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-rising"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-rising"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="rising"] { min-height: 820px; }
  main[data-ba-page="trending"] [id="rising"]:has(.loading-line) { max-height: 820px; overflow: hidden; }
  main[data-ba-page="trending"] [id="network"] { min-height: 742px; }
  main[data-ba-page="trending"] [id="network"]:has(.loading-line) { max-height: 742px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-unusual"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-unusual"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="unusual"] { min-height: 482px; }
  main[data-ba-page="trending"] [id="unusual"]:has(.loading-line) { max-height: 482px; overflow: hidden; }
  main[data-ba-page="trending"] [id="resurging"] { min-height: 140px; }
  main[data-ba-page="trending"] [id="resurging"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-most"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-most"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="most"] { min-height: 1396px; }
  main[data-ba-page="trending"] [id="most"]:has(.loading-line) { max-height: 1396px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="kpis"] { min-height: 392px; }
  main[data-ba-page="ai-referrals"] [id="kpis"]:has(.loading-line) { max-height: 392px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="chart"] { min-height: 320px; }
  main[data-ba-page="ai-referrals"] [id="chart"]:has(.loading-line) { max-height: 320px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="trend"] { min-height: 313px; }
  main[data-ba-page="ai-referrals"] [id="trend"]:has(.loading-line) { max-height: 313px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="table-note"] { min-height: 20px; }
  main[data-ba-page="ai-referrals"] [id="table-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="table"] { min-height: 2358px; }
  main[data-ba-page="ai-referrals"] [id="table"]:has(.loading-line) { max-height: 2358px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="blogs-note"] { min-height: 20px; }
  main[data-ba-page="ai-referrals"] [id="blogs-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="blogs"] { min-height: 1183px; }
  main[data-ba-page="ai-referrals"] [id="blogs"]:has(.loading-line) { max-height: 1183px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="note"] { min-height: 20px; }
  main[data-ba-page="search-console"] [id="note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="cards"] { min-height: 153px; }
  main[data-ba-page="search-console"] [id="cards"]:has(.loading-line) { max-height: 153px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="series"] { min-height: 264px; }
  main[data-ba-page="search-console"] [id="series"]:has(.loading-line) { max-height: 264px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="tab-note"] { min-height: 20px; }
  main[data-ba-page="search-console"] [id="tab-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="tab"] { min-height: 727px; }
  main[data-ba-page="search-console"] [id="tab"]:has(.loading-line) { max-height: 727px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="kpis"] { min-height: 443px; }
  main[data-ba-page="search-queries"] [id="kpis"]:has(.loading-line) { max-height: 443px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="chart"] { min-height: 670px; }
  main[data-ba-page="search-queries"] [id="chart"]:has(.loading-line) { max-height: 670px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="topics"] { min-height: 419px; }
  main[data-ba-page="search-queries"] [id="topics"]:has(.loading-line) { max-height: 419px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="table-note"] { min-height: 20px; }
  main[data-ba-page="search-queries"] [id="table-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="table"] { min-height: 2769px; }
  main[data-ba-page="search-queries"] [id="table"]:has(.loading-line) { max-height: 2769px; overflow: hidden; }
  main[data-ba-page="status"] [id="counts"] { min-height: 20px; }
  main[data-ba-page="status"] [id="counts"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="status"] [id="status"] { min-height: 39px; }
  main[data-ba-page="status"] [id="status"]:has(.loading-line) { max-height: 39px; overflow: hidden; }
  main[data-ba-page="status"] [id="today"] { min-height: 742px; }
  main[data-ba-page="status"] [id="today"]:has(.loading-line) { max-height: 742px; overflow: hidden; }
  main[data-ba-page="status"] [id="kpis"] { min-height: 222px; }
  main[data-ba-page="status"] [id="kpis"]:has(.loading-line) { max-height: 222px; overflow: hidden; }
  main[data-ba-page="status"] [id="sources"] { min-height: 584px; }
  main[data-ba-page="status"] [id="sources"]:has(.loading-line) { max-height: 584px; overflow: hidden; }
  main[data-ba-page="status"] [id="coverage"] { min-height: 260px; }
  main[data-ba-page="status"] [id="coverage"]:has(.loading-line) { max-height: 260px; overflow: hidden; }
  main[data-ba-page="status"] [id="pass"] { min-height: 371px; }
  main[data-ba-page="status"] [id="pass"]:has(.loading-line) { max-height: 371px; overflow: hidden; }
  main[data-ba-page="status"] [id="verified"] { min-height: 421px; }
  main[data-ba-page="status"] [id="verified"]:has(.loading-line) { max-height: 421px; overflow: hidden; }
  main[data-ba-page="status"] [id="ga-gaps"] { min-height: 766px; }
  main[data-ba-page="status"] [id="ga-gaps"]:has(.loading-line) { max-height: 766px; overflow: hidden; }
  main[data-ba-page="status"] [id="gsc-gaps"] { min-height: 766px; }
  main[data-ba-page="status"] [id="gsc-gaps"]:has(.loading-line) { max-height: 766px; overflow: hidden; }
  main[data-ba-page="status"] [id="timeline"] { min-height: 281px; }
  main[data-ba-page="status"] [id="timeline"]:has(.loading-line) { max-height: 281px; overflow: hidden; }
  main[data-ba-page="status"] [id="add"] { min-height: 193px; }
  main[data-ba-page="status"] [id="add"]:has(.loading-line) { max-height: 193px; overflow: hidden; }
  main[data-ba-page="offers"] [id="levels"] { min-height: 339px; }
  main[data-ba-page="offers"] [id="levels"]:has(.loading-line) { max-height: 339px; overflow: hidden; }
}
@media (max-width: 900px) {
  main[data-ba-page="index"] [id="health"] { min-height: 39px; }
  main[data-ba-page="index"] [id="health"]:has(.loading-line) { max-height: 39px; overflow: hidden; }
  main[data-ba-page="index"] [id="live"] { min-height: 1825px; }
  main[data-ba-page="index"] [id="live"]:has(.loading-line) { max-height: 1825px; overflow: hidden; }
  main[data-ba-page="index"] [id="net-cards"] { min-height: 467px; }
  main[data-ba-page="index"] [id="net-cards"]:has(.loading-line) { max-height: 467px; overflow: hidden; }
  main[data-ba-page="index"] [id="net-series"] { min-height: 289px; }
  main[data-ba-page="index"] [id="net-series"]:has(.loading-line) { max-height: 289px; overflow: hidden; }
  main[data-ba-page="index"] [id="home-blogs"] { min-height: 3153px; }
  main[data-ba-page="index"] [id="home-blogs"]:has(.loading-line) { max-height: 3153px; overflow: hidden; }
  main[data-ba-page="index"] [id="trending"] { min-height: 140px; }
  main[data-ba-page="index"] [id="trending"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="index"] [id="rising-home"] { min-height: 140px; }
  main[data-ba-page="index"] [id="rising-home"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="index"] [id="pulse"] { min-height: 444px; }
  main[data-ba-page="index"] [id="pulse"]:has(.loading-line) { max-height: 444px; overflow: hidden; }
  main[data-ba-page="index"] [id="kpis"] { min-height: 635px; }
  main[data-ba-page="index"] [id="kpis"]:has(.loading-line) { max-height: 635px; overflow: hidden; }
  main[data-ba-page="index"] [id="week"] { min-height: 604px; }
  main[data-ba-page="index"] [id="week"]:has(.loading-line) { max-height: 604px; overflow: hidden; }
  main[data-ba-page="index"] [id="audience"] { min-height: 1511px; }
  main[data-ba-page="index"] [id="audience"]:has(.loading-line) { max-height: 1511px; overflow: hidden; }
  main[data-ba-page="index"] [id="stories"] { min-height: 364px; }
  main[data-ba-page="index"] [id="stories"]:has(.loading-line) { max-height: 364px; overflow: hidden; }
  main[data-ba-page="index"] [id="search"] { min-height: 835px; }
  main[data-ba-page="index"] [id="search"]:has(.loading-line) { max-height: 835px; overflow: hidden; }
  main[data-ba-page="index"] [id="ai"] { min-height: 526px; }
  main[data-ba-page="index"] [id="ai"]:has(.loading-line) { max-height: 526px; overflow: hidden; }
  main[data-ba-page="index"] [id="verified"] { min-height: 231px; }
  main[data-ba-page="index"] [id="verified"]:has(.loading-line) { max-height: 231px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-cards"] { min-height: 898px; }
  main[data-ba-page="scorecard"] [id="sc-cards"]:has(.loading-line) { max-height: 898px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-series"] { min-height: 289px; }
  main[data-ba-page="scorecard"] [id="sc-series"]:has(.loading-line) { max-height: 289px; overflow: hidden; }
  main[data-ba-page="scorecard"] [id="sc-table"] { min-height: 841px; }
  main[data-ba-page="scorecard"] [id="sc-table"]:has(.loading-line) { max-height: 841px; overflow: hidden; }
  main[data-ba-page="trending"] [id="live"] { min-height: 1825px; }
  main[data-ba-page="trending"] [id="live"]:has(.loading-line) { max-height: 1825px; overflow: hidden; }
  main[data-ba-page="trending"] [id="kpis"] { min-height: 502px; }
  main[data-ba-page="trending"] [id="kpis"]:has(.loading-line) { max-height: 502px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-breakouts"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-breakouts"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="table"] { min-height: 424px; }
  main[data-ba-page="trending"] [id="table"]:has(.loading-line) { max-height: 424px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-rising"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-rising"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="rising"] { min-height: 1114px; }
  main[data-ba-page="trending"] [id="rising"]:has(.loading-line) { max-height: 1114px; overflow: hidden; }
  main[data-ba-page="trending"] [id="network"] { min-height: 863px; }
  main[data-ba-page="trending"] [id="network"]:has(.loading-line) { max-height: 863px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-unusual"] { min-height: 61px; }
  main[data-ba-page="trending"] [id="note-unusual"]:has(.loading-line) { max-height: 61px; overflow: hidden; }
  main[data-ba-page="trending"] [id="unusual"] { min-height: 894px; }
  main[data-ba-page="trending"] [id="unusual"]:has(.loading-line) { max-height: 894px; overflow: hidden; }
  main[data-ba-page="trending"] [id="resurging"] { min-height: 140px; }
  main[data-ba-page="trending"] [id="resurging"]:has(.loading-line) { max-height: 140px; overflow: hidden; }
  main[data-ba-page="trending"] [id="note-most"] { min-height: 20px; }
  main[data-ba-page="trending"] [id="note-most"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="trending"] [id="most"] { min-height: 2151px; }
  main[data-ba-page="trending"] [id="most"]:has(.loading-line) { max-height: 2151px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="kpis"] { min-height: 582px; }
  main[data-ba-page="ai-referrals"] [id="kpis"]:has(.loading-line) { max-height: 582px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="chart"] { min-height: 466px; }
  main[data-ba-page="ai-referrals"] [id="chart"]:has(.loading-line) { max-height: 466px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="trend"] { min-height: 361px; }
  main[data-ba-page="ai-referrals"] [id="trend"]:has(.loading-line) { max-height: 361px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="table-note"] { min-height: 20px; }
  main[data-ba-page="ai-referrals"] [id="table-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="table"] { min-height: 5187px; }
  main[data-ba-page="ai-referrals"] [id="table"]:has(.loading-line) { max-height: 5187px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="blogs-note"] { min-height: 41px; }
  main[data-ba-page="ai-referrals"] [id="blogs-note"]:has(.loading-line) { max-height: 41px; overflow: hidden; }
  main[data-ba-page="ai-referrals"] [id="blogs"] { min-height: 4666px; }
  main[data-ba-page="ai-referrals"] [id="blogs"]:has(.loading-line) { max-height: 4666px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="note"] { min-height: 41px; }
  main[data-ba-page="search-console"] [id="note"]:has(.loading-line) { max-height: 41px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="cards"] { min-height: 561px; }
  main[data-ba-page="search-console"] [id="cards"]:has(.loading-line) { max-height: 561px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="series"] { min-height: 285px; }
  main[data-ba-page="search-console"] [id="series"]:has(.loading-line) { max-height: 285px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="tab-note"] { min-height: 20px; }
  main[data-ba-page="search-console"] [id="tab-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-console"] [id="tab"] { min-height: 1285px; }
  main[data-ba-page="search-console"] [id="tab"]:has(.loading-line) { max-height: 1285px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="kpis"] { min-height: 652px; }
  main[data-ba-page="search-queries"] [id="kpis"]:has(.loading-line) { max-height: 652px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="chart"] { min-height: 991px; }
  main[data-ba-page="search-queries"] [id="chart"]:has(.loading-line) { max-height: 991px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="topics"] { min-height: 462px; }
  main[data-ba-page="search-queries"] [id="topics"]:has(.loading-line) { max-height: 462px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="table-note"] { min-height: 20px; }
  main[data-ba-page="search-queries"] [id="table-note"]:has(.loading-line) { max-height: 20px; overflow: hidden; }
  main[data-ba-page="search-queries"] [id="table"] { min-height: 2718px; }
  main[data-ba-page="search-queries"] [id="table"]:has(.loading-line) { max-height: 2718px; overflow: hidden; }
  main[data-ba-page="status"] [id="counts"] { min-height: 41px; }
  main[data-ba-page="status"] [id="counts"]:has(.loading-line) { max-height: 41px; overflow: hidden; }
  main[data-ba-page="status"] [id="status"] { min-height: 85px; }
  main[data-ba-page="status"] [id="status"]:has(.loading-line) { max-height: 85px; overflow: hidden; }
  main[data-ba-page="status"] [id="today"] { min-height: 1342px; }
  main[data-ba-page="status"] [id="today"]:has(.loading-line) { max-height: 1342px; overflow: hidden; }
  main[data-ba-page="status"] [id="kpis"] { min-height: 434px; }
  main[data-ba-page="status"] [id="kpis"]:has(.loading-line) { max-height: 434px; overflow: hidden; }
  main[data-ba-page="status"] [id="sources"] { min-height: 550px; }
  main[data-ba-page="status"] [id="sources"]:has(.loading-line) { max-height: 550px; overflow: hidden; }
  main[data-ba-page="status"] [id="coverage"] { min-height: 406px; }
  main[data-ba-page="status"] [id="coverage"]:has(.loading-line) { max-height: 406px; overflow: hidden; }
  main[data-ba-page="status"] [id="pass"] { min-height: 535px; }
  main[data-ba-page="status"] [id="pass"]:has(.loading-line) { max-height: 535px; overflow: hidden; }
  main[data-ba-page="status"] [id="verified"] { min-height: 794px; }
  main[data-ba-page="status"] [id="verified"]:has(.loading-line) { max-height: 794px; overflow: hidden; }
  main[data-ba-page="status"] [id="ga-gaps"] { min-height: 771px; }
  main[data-ba-page="status"] [id="ga-gaps"]:has(.loading-line) { max-height: 771px; overflow: hidden; }
  main[data-ba-page="status"] [id="gsc-gaps"] { min-height: 771px; }
  main[data-ba-page="status"] [id="gsc-gaps"]:has(.loading-line) { max-height: 771px; overflow: hidden; }
  main[data-ba-page="status"] [id="timeline"] { min-height: 307px; }
  main[data-ba-page="status"] [id="timeline"]:has(.loading-line) { max-height: 307px; overflow: hidden; }
  main[data-ba-page="status"] [id="add"] { min-height: 390px; }
  main[data-ba-page="status"] [id="add"]:has(.loading-line) { max-height: 390px; overflow: hidden; }
  main[data-ba-page="offers"] [id="levels"] { min-height: 381px; }
  main[data-ba-page="offers"] [id="levels"]:has(.loading-line) { max-height: 381px; overflow: hidden; }
}

/* ---- C1: the console in the front door's language. Still a dashboard (dense, sortable, fast), but with the front
   door's frosted sticky header, its type scale for page titles and lead lines, its hover easing, her surfaces and
   default shadow on every stat box, the sidebar's line icons with a clear active state, one calm shimmer while a
   panel loads, and space reserved for what loads so nothing moves. Rebecca's tokens only; reduced motion gets no
   count-ups, fades or shimmer. hub.css only: the front door's and topic pages' sheets don't carry it. */
.ba-tools { --c1-ease: cubic-bezier(.2, .8, .2, 1); }

/* Fonts without holding up the first paint (shell.ts FONT_LINKS, embed.js): until her kit's faces are fetched, local faces
   sized to match Source Sans (the front door's, src/ui/pages/front.css) and a serif, so the switch barely moves a line. */
@font-face { font-family: "BA Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 400;
  size-adjust: 92%; ascent-override: 105.4%; descent-override: 31.5%; line-gap-override: 0%; }
@font-face { font-family: "BA Sans Fallback"; src: local("Arial Bold"), local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 500 800;
  size-adjust: 88.1%; ascent-override: 112.4%; descent-override: 35.2%; line-gap-override: 0%; }
:root.fonts-wait { --font-headings: "BA Sans Fallback", system-ui, sans-serif; --font: Georgia, "Times New Roman", serif; }

/* The header: the date and blog bar sticks under the top of the window, frosted, as the front door's bar does (on a
   phone the shell's own bar is the header, frosted too). */
@media (min-width: 901px) {
  main .globalbar { position: sticky; top: var(--space-3); z-index: 20; background: color-mix(in srgb, var(--color-surface) 72%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); box-shadow: var(--shadow-1); }
}
@media (max-width: 900px) {
  header.site { position: sticky; top: 0; z-index: 30; border-bottom: 1px solid color-mix(in srgb, var(--color-border-strong) 60%, transparent); }
}

/* A section's tabs scroll inside their own row on a phone; as a flex item that row must be allowed to be narrower than
   its tabs, or it widens the page (Trending was 32 px too wide at 390). */
.section-bar .tabs { min-width: 0; max-width: 100%; }
/* A figure's head (its label, the (i) and "How we know") wraps rather than run past a phone's edge. */
.kpi-head, .stat-label { flex-wrap: wrap; row-gap: 4px; min-width: 0; }

/* Page titles and lead lines at the front door's scale: the title large and tight, the lead in Source Sans. */
.page-title h1 { font: var(--weight-semibold) clamp(28px, 2.6vw, 40px)/1.12 var(--font-headings); letter-spacing: -0.02em; margin: 0 0 var(--space-2); }
.page-title .lede { font: var(--text-md)/1.55 var(--font-headings); color: var(--color-text-2); max-width: 72ch; }
.section-title h2, .panel > h2 { letter-spacing: -0.01em; }

/* Hover easing, the front door's: 220 ms out-expo on colour, border, shadow and a small lift. */
.panel, .kpi, .card, .stat-box, nav.tools a, .btn, .chip-btn, .seg span, table.dt tbody tr, .icon-btn {
  transition: background-color .22s var(--c1-ease), border-color .22s var(--c1-ease), color .22s var(--c1-ease), box-shadow .22s var(--c1-ease), transform .22s var(--c1-ease); }
@media (hover: hover) {
  .stat-box:hover, .kpi:hover, .cards-change .card-change:hover { border-color: color-mix(in srgb, var(--color-accent) 45%, var(--color-border-strong)); box-shadow: var(--shadow-2); }
}

/* Stat boxes: the assistants' cards (caps label, mono figure, caption) on her surface with the default shadow. */
.kpi, .cards-change .card-change, .stat-box { border-radius: var(--ba-border-radius-lg); box-shadow: var(--ba-box-shadow-default, var(--shadow-1)); }
.stat-fig, .kpi-value, .cards-change .card-value { font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.stat-box-accent { border: 1px solid var(--color-accent); box-shadow: var(--shadow-glow); }

/* Live now: the live dot breathes (a soft glow), its three stat boxes count up once (hub.js). */
.live-dot { position: relative; box-shadow: 0 0 0 3px var(--color-positive-subtle), 0 0 12px 2px color-mix(in srgb, var(--color-positive) 45%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .live-dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--color-positive); opacity: 0; animation: c1-breathe 2.4s ease-out infinite; }
}
@keyframes c1-breathe { 0% { transform: scale(.6); opacity: .55; } 80%, 100% { transform: scale(1.9); opacity: 0; } }

/* The sidebar: the front door's line icons, and a clear current page (her green bar, the text in full contrast). */
nav.tools a { display: flex; align-items: center; gap: 10px; }
nav.tools a svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
nav.tools a[aria-current="page"] { color: var(--color-text); font-weight: var(--weight-semibold); background: var(--color-accent-subtle); box-shadow: inset 3px 0 0 var(--color-accent); }
nav.tools a[aria-current="page"] svg { stroke: var(--color-accent-strong); opacity: 1; }
:root[data-theme="dark"] nav.tools a[aria-current="page"] svg { stroke: var(--ba-color-primary); }

/* Charts: one line weight, a hairline grid, her greens; the peak labelled (ui.js). */
svg .line { stroke-width: 1.75; }
svg line.grid { stroke: var(--color-chart-grid); stroke-width: .5; shape-rendering: crispEdges; }
svg .peak-dot { fill: var(--color-surface); stroke: var(--color-chart); stroke-width: 1.75; }
svg .peak-label { font: var(--weight-semibold) 11px/1 var(--font-headings); fill: var(--color-text-2); paint-order: stroke; stroke: var(--color-surface); stroke-width: 3px; }

/* Loading: one calm shimmer over a panel's reserved space (its grey blocks stay hidden, G2.4), and each panel's content
   fades in once when its data lands. */
:is(.kpis, .cards, .live-strip, .chart-card, .table-wrap, .skel-hbars, .stat-row):has(> .loading-line), .skel-live, .skel-card { position: relative; overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  :is(.kpis, .cards, .live-strip, .chart-card, .table-wrap, .skel-hbars, .stat-row):has(> .loading-line)::after, .skel-live::after, .skel-card::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
    background: linear-gradient(100deg, transparent 20%, color-mix(in srgb, var(--color-text) 5%, transparent) 50%, transparent 80%) 0 0 / 200% 100% no-repeat;
    animation: c1-shimmer 1.8s ease-in-out infinite; }
  main :is(#live, #net-cards, #net-series, #home-blogs, #kpis, #status, #sources, #week, #ai, #search, #stories, #trending, #rising-home, #verified) > :not(.loading-line):not([aria-hidden="true"]) {
    animation: c1-land .5s var(--c1-ease) both; }
}
@keyframes c1-shimmer { from { background-position: 150% 0; } to { background-position: -50% 0; } }
@keyframes c1-land { from { opacity: 0; } to { opacity: 1; } }

/* Space reserved for what loads, so the page doesn't move when it lands (heights measured at 1440, 1100 and 390 on
   Sep 30; scripts/console_shots.ts reports what still moves). The date bar: its row is held from the first paint
   (embed.js marks the page before it paints), and the page's own window and compare, which it replaces, never show.
   It is taller where it carries the page's windows. */
/* What hub.js hides when it draws the bar (its "mirrored" controls), hidden from the first paint instead: the page's one
   window control and its compare, the page's own blog field, and the report form's range, dates, compare and blog. */
.gb-early main .seg-window:has(input[name="window"]), .gb-early main .seg-window:has(input[name="window"]) ~ .seg-compare,
.gb-early main form.page-controls label:has([name="blog"]),
.gb-early main form.report-form label:has(:is([name="range"], [name="compare"], [name="from"], [name="to"], [name="blog"])) { display: none; }
.gb-early main .globalbar[hidden] { display: block; visibility: hidden; min-height: 49px; margin: 0 0 var(--space-4); }
.gb-early main:has(.page-head .seg-window input[name="window"]) .globalbar[hidden] { min-height: 53px; }
@media (min-width: 901px) and (max-width: 1279px) { .gb-early main:not([data-ba-page="scorecard"]):has(.page-head .seg-window input[name="window"]) .globalbar[hidden] { min-height: 92px; } }
@media (max-width: 600px) {
  .gb-early main .globalbar[hidden] { min-height: 75px; }
  .gb-early main:has(.page-head .seg-window input[name="window"]) .globalbar[hidden] { min-height: 166px; }
}
/* The held-figures note (hub.js heldBanner) arrives with the first answer: a card fixed at the foot of the window, so it
   is on screen whatever is being read and moves nothing when it comes. */
main .held-note { position: fixed; z-index: 40; bottom: var(--space-4); left: calc(var(--sidebar-width, 240px) + var(--space-6)); max-width: min(560px, calc(100vw - var(--sidebar-width, 240px) - 2 * var(--space-6)));
  margin: 0; box-shadow: var(--shadow-2); }
@media (max-width: 900px) { main .held-note { left: var(--space-3); right: var(--space-3); max-width: none; bottom: var(--space-3); } }
@media (prefers-reduced-motion: no-preference) { main .held-note { animation: c1-rise .4s var(--c1-ease) both; } }
@keyframes c1-rise { from { opacity: 0; transform: translateY(12px); } }
.embed main .held-note { position: static; margin: 0 0 var(--space-4); animation: none; }
main .held-note { padding-right: 44px; }
.held-close { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent;
  color: inherit; font: 20px/1 var(--font-headings); cursor: pointer; }
.held-close:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.held-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }

/* Every panel that loads after the page: its measured height, per page and width, in console-reserve.css. */

@media (prefers-reduced-motion: reduce) {
  .panel, .kpi, .card, .stat-box, nav.tools a, .btn, .chip-btn, .seg span, table.dt tbody tr, .icon-btn { transition: none; }
}

/* Deal alerts (/tools/deals) */
.ba-tools--deals .kind-tags { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.ba-tools--deals .st-kind { background: var(--color-accent-subtle); color: var(--color-accent-strong); font-weight: var(--weight-semibold); }
.ba-tools--deals .deal-excerpt { margin: 0 0 var(--space-2); max-width: 80ch; color: var(--color-text-2); }
.ba-tools--deals tr.dt-detail p.meta { margin: 0; }
.ba-tools--deals .kinds-sm { display: none; }
@media (max-width: 640px) { .ba-tools--deals .kinds-sm { display: inline; } }

/* The front door (F1.2–F1.6, D3): /, /ask/<topic>, /connect, /briefing, /publishers. Rebecca's tokens only
   (data/brand/README.md): one background for the whole page, content in white surface boxes (1 px border, radius-lg,
   the default shadow), figures and code mono. D3: every UI text and lead line in Source Sans (her headings face, which
   her own conventions use for buttons, labels and forms); Source Serif for the paragraphs you read (FAQ answers, the
   cited answer, the publishers page). Gondola's craft: one canvas split by hairlines, her green as a soft glow behind the
   chats and the numbers, tight big type, a frosted header, motion that only ever replays a finished page. */
/* L1.0: the console's base rules for controls and disclosures (components.css), which the front door's buttons, inputs
   and summaries have always used; here too, as / loads only its own sheet. The same values, so hub.css pages are unchanged. */
input, select, textarea, button { font: inherit; }
input, select, textarea { padding: 8px 10px; border: 1px solid var(--ba-input-line); border-radius: var(--radius-sm); background: var(--ba-surface); color: var(--ba-ink); width: 100%; }
button { background: var(--color-button); color: var(--color-on-accent); border: 0; border-radius: var(--radius-sm); padding: 10px 20px; cursor: pointer;
  font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-headings); }
button:hover { background: var(--color-button-hover); }
button[disabled] { opacity: .6; cursor: wait; }
details summary { cursor: pointer; color: var(--ba-accent-strong); font-size: .88rem; margin-top: 4px; }
details ul { margin: 6px 0 0; padding-left: 18px; }
/* D3.8: while her fonts load (they no longer block the first paint), the sans is a local Arial sized to Source Sans
   (measured in Chromium: 0.920 of its width at 400, 0.881 at 600; ascent 97 and 99, descent 29 and 31, of 100), so the
   swap doesn't move a line. */
@font-face { font-family: "BA Sans Fallback"; src: local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 400;
  size-adjust: 92%; ascent-override: 105.4%; descent-override: 31.5%; line-gap-override: 0%; }
@font-face { font-family: "BA Sans Fallback"; src: local("Arial Bold"), local("Arial"), local("Helvetica Neue"), local("Helvetica"); font-weight: 500 800;
  size-adjust: 88.1%; ascent-override: 112.4%; descent-override: 35.2%; line-gap-override: 0%; }
body.front { --font-headings: "source-sans-pro", var(--ba-font-family-headings), "BA Sans Fallback", "Source Sans 3", system-ui, sans-serif; }
/* Her kit's faces block (font-display:auto), so with script the page uses the fallback until they're fetched (.fonts-in,
   src/front/layout.ts); without script the kit loads as a plain stylesheet and is used from the start. */
.js:not(.fonts-in) body.front { --font-headings: "BA Sans Fallback", system-ui, sans-serif; --font: Georgia, "Times New Roman", serif; }
body.front { display: block; background: var(--color-bg); font: var(--text-md)/1.5 var(--font-headings);
  --fd-bar-h: 64px;
  --fd-hair: color-mix(in srgb, var(--color-border-strong) 80%, transparent);
  --fd-glow: .06;
  --fd-ease: cubic-bezier(.4, 0, .2, 1);
  --fd-ease-out: cubic-bezier(.22, 1, .36, 1);
  --fd-glass: color-mix(in srgb, var(--color-surface) 72%, transparent); }
:root[data-theme="dark"] body.front { --fd-hair: color-mix(in srgb, var(--ba-color-slate-50) 8%, transparent); --fd-glow: .12; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.front { --fd-hair: color-mix(in srgb, var(--ba-color-slate-50) 8%, transparent); --fd-glow: .12; } }
.fd-read, .fd-faq-a p, .fd-engine-text { font-family: var(--font); }
body.front main { padding: 0; overflow-x: clip; } /* the glow may bleed past a chat, never past the screen */
.fd-wrap { max-width: var(--front-max); margin: 0 auto; padding: 0 var(--space-5); }
.fd-narrow { max-width: var(--ba-container-4xl); }
.eyebrow { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-widest); text-transform: uppercase;
  color: var(--color-text-2); }
body.front h1, body.front h2, body.front h3 { font-family: var(--font-headings); color: var(--color-text); }
/* D3.1: Gondola's scale in her sizes: h1 60/60 (72/72 from 1350), h2 48/48, h3 36/40, all 600 and tight. */
body.front h1, body.front h2, body.front h3 { font-weight: var(--weight-semibold); letter-spacing: -0.02em; }
body.front h1 { font-size: var(--ba-size-6xl); line-height: var(--ba-leading-10); }
body.front h2 { font-size: var(--ba-size-5xl); line-height: var(--ba-leading-9); margin: 0 0 var(--space-6); }
body.front h3 { font-size: var(--ba-size-4xl); line-height: var(--ba-leading-7); margin: 0 0 var(--space-4); }
@media (min-width: 1350px) { body.front h1 { font-size: var(--ba-size-7xl); line-height: var(--ba-leading-11); } }
.fd-lede { max-width: 640px; color: var(--color-text-2); font: var(--ba-size-xl)/30px var(--font-headings); margin: 0 0 var(--space-6); }
.fd-note { color: var(--color-text-3); font-size: var(--text-sm); margin: var(--space-2) 0; }
.fd-sub { margin: var(--space-6) 0 var(--space-2); font: var(--weight-semibold) var(--text-sm)/1.3 var(--font-headings); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-2); }

/* ---- Buttons: Rebecca's primary (primary-strong at rest for AA, docs/44 §7a) and outline ---------------------- */
.fd-btn { display: inline-block; padding: 10px 20px; border-radius: var(--radius-sm); font: var(--weight-semibold) var(--text-sm)/1.25 var(--font-headings); text-decoration: none;
  cursor: pointer; white-space: nowrap; }
.fd-btn-primary, a.fd-btn-primary { background: var(--color-button); color: var(--color-on-accent); }
.fd-btn-primary:hover { background: var(--color-button-hover); color: var(--color-on-accent); }
.fd-btn-outline { background: transparent; color: var(--color-text); border: 1px solid var(--color-border-strong); }
.fd-btn-outline:hover { background: var(--color-surface); color: var(--color-text); }
.fd-btn-lg { padding: 14px 28px; font-size: var(--text-md); box-shadow: var(--shadow-glow); }

/* ---- Top bar (D3.1): sticky and frosted, her surface at 72% under a blur; transparent over the hero's top ------ */
.fd-bar { position: sticky; top: 0; z-index: 30; background: var(--fd-glass); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--fd-hair); transition: background-color .25s var(--fd-ease), border-color .25s var(--fd-ease); }
.fd-bar[data-top] { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.fd-bar-in { display: flex; align-items: center; gap: var(--space-4); height: var(--fd-bar-h); }
.fd-bar-cta { border-radius: var(--radius-full); padding: 7px 16px; }
.fd-brand { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text); text-decoration: none; font: var(--weight-bold) var(--ba-text-lg)/1 var(--font-headings); }
.fd-brand:hover { color: var(--color-text); }
.fd-brand-insider { font-weight: inherit; color: var(--color-wordmark); }
.fd-pill-tag b { font-weight: var(--weight-bold); color: var(--color-wordmark); }
.fd-footer-name { font-weight: var(--weight-semibold); color: var(--color-text); }
.fd-nav { display: flex; gap: var(--space-5); margin-left: auto; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fd-nav a { color: var(--color-text-2); text-decoration: none; }
.fd-nav a:hover { color: var(--color-accent-strong); }
.fd-bar .theme-toggle { flex: none; }

/* ---- Hero ----------------------------------------------------------------------------------------------------- */
.fd-hero { padding: calc(var(--space-16) + var(--space-8)) 0 calc(var(--space-10) * 2); }
.fd-hero h1 { margin: 0 0 var(--space-5); }
.fd-hero-topic { padding: var(--space-16) 0 var(--space-10); }
.fd-scope { color: var(--color-text-3); font-size: var(--text-sm); margin: calc(-1 * var(--space-3)) 0 var(--space-5); }
.fd-ask { display: flex; gap: var(--space-2); max-width: var(--ba-container-3xl); padding: var(--space-2); margin: 0 0 var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.fd-ask input { flex: 1; min-width: 0; border: 0; font: var(--text-md)/1.4 var(--font-headings); padding: 10px 12px; background: transparent; }
.fd-ask input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 0; }

/* ---- Sections ------------------------------------------------------------------------------------------------ */
.fd-section { padding: calc(var(--space-10) * 2) 0; }
/* D3.1: no bands; one canvas, each section split from the last by a hairline. */
.fd-section-alt { background: none; }
body.front main > section + section { border-top: 1px solid var(--fd-hair); }
.fd-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fd-topic { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); color: var(--color-text-2); text-decoration: none; }
.fd-topic b { font: var(--weight-semibold) var(--ba-text-lg)/1.3 var(--font-headings); color: var(--color-text); }
.fd-topic:hover { border-color: var(--color-accent); box-shadow: var(--shadow-glow); color: var(--color-text-2); }
.fd-topic-cta { margin-top: auto; font: var(--weight-semibold) var(--text-xs)/1 var(--font-mono); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-strong); }

/* ---- Feature rows and the example chats ----------------------------------------------------------------------- */

.fd-chat { margin: 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); overflow: hidden; }
.fd-chat-bar { display: flex; align-items: center; gap: 6px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); }
.fd-chat-bar span { width: 9px; height: 9px; border-radius: var(--radius-full); background: var(--color-border-strong); }
.fd-chat-bar b { margin: 0 auto; font: var(--weight-medium) var(--text-xs)/1 var(--font-mono); color: var(--color-text-3); }
.fd-chat-working { margin: 0 var(--space-4); font: var(--text-xs)/1.4 var(--font-mono); color: var(--color-text-3); }
.fd-chat-answer { padding: var(--space-4); }
.fd-chat-date { padding: 0 var(--space-4) var(--space-4); font-size: var(--text-xs); color: var(--color-text-3); }
@media (prefers-reduced-motion: reduce) { .fd-chat [data-step] { opacity: 1 !important; transform: none !important; transition: none !important; } }
.fd-chat-empty { padding: var(--space-6); }

/* ---- A result card: subject, three stat boxes, the verdict ---------------------------------------------------- */
.fd-result-subject { margin: 0 0 var(--space-3); font: var(--weight-semibold) var(--ba-text-lg)/1.3 var(--font-headings); }
.fd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--space-2); }
.fd-stat { display: flex; flex-direction: column; gap: 2px; padding: var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius); }
.fd-stat-accent { border: 2px solid var(--color-accent); }
.fd-stat-label { font: var(--weight-semibold) var(--text-xs)/1.2 var(--font-headings); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-text-3); }
.fd-stat-value { font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: 1.2; color: var(--color-text); overflow-wrap: anywhere; }
.fd-stat-note { font-size: var(--text-xs); color: var(--color-text-3); }
.fd-result-verdict { margin: var(--space-3) 0 var(--space-1); font-size: var(--text-sm); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.fd-result-sentence, .fd-result-links { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.fd-result-asof { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-3); }
.fd-result blockquote { font-size: var(--text-sm); }
.fd-result blockquote p { margin: 0 0 var(--space-1); }
.fd-result blockquote footer { font-style: normal; font-size: var(--text-xs); color: var(--color-text-3); }
.fd-chip { display: inline-block; padding: 1px 9px; font-family: var(--font-headings); line-height: 1.6; white-space: nowrap; }
.fd-chip-ok { background: var(--color-positive-subtle); color: var(--color-positive); }
.fd-chip-warn { background: var(--color-warning-subtle); color: var(--color-warning); }
.fd-chip-bad { background: var(--color-negative-subtle); color: var(--color-negative); }
.fd-chip-info { background: var(--color-info-subtle); color: var(--color-info); }
.fd-chip-quiet { background: var(--color-muted-subtle); color: var(--color-muted); }

/* ---- Lists of posts and rows --------------------------------------------------------------------------------- */
.fd-posts { margin: 0; padding: 0 0 0 var(--space-5); display: grid; gap: var(--space-3); }
.fd-post a { font-weight: var(--weight-medium); }
.fd-post-meta { display: block; font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-headings); }
.fd-posts-sub { margin-top: var(--space-2); }
.fd-rows { margin: 0; padding: 0; list-style: none; display: grid; gap: 1px; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--color-border); }
.fd-rows > li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: baseline; padding: var(--space-3) var(--space-4); background: var(--color-surface); }
.fd-rows .fd-posts-sub { grid-column: 1 / -1; }
.fd-row-fig { font-weight: var(--weight-semibold); }
.fd-row-meta { font-size: var(--text-xs); color: var(--color-text-3); white-space: nowrap; }
.fd-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); }

/* ---- Connect ---------------------------------------------------------------------------------------------------- */
/* P1.2: a step's screenshot from the operator's recordings, small, under its words. */
.fd-step-shot { display: block; width: 100%; max-width: 420px; height: auto; margin: var(--space-2) 0 var(--space-1); border-radius: var(--radius-md); box-shadow: 0 0 0 1px var(--fd-hair); }
.fd-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin: 0 0 var(--space-8); padding: 0; list-style: none; }
.fd-steps li { display: flex; flex-direction: column; gap: var(--space-1); color: var(--color-text-2); font-size: var(--text-sm); }
.fd-steps b { font: var(--weight-semibold) var(--text-md)/1.3 var(--font-headings); color: var(--color-text); }
.fd-step-n { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full); border: 2px solid var(--color-accent); font: var(--weight-bold) var(--text-sm)/1 var(--font-headings); color: var(--color-text); }
.fd-address { margin: 0 0 var(--space-5); }
.fd-address label { display: block; margin-bottom: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.fd-address-row { display: flex; gap: var(--space-2); }
.fd-address-row input { flex: 1; min-width: 0; font-size: var(--text-sm); }
.fd-tabs { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--space-6); }
.fd-tablist { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0 0 var(--space-5); padding: 0 0 var(--space-3); border-bottom: 1px solid var(--color-border); }
.fd-tablist [role="tab"], .fd-filter, .fd-copy { background: transparent; color: var(--color-text-2); border: 1px solid transparent; border-radius: var(--radius-full); padding: 6px 14px;
  font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-headings); }
.fd-tablist [role="tab"]:hover, .fd-filter:hover { background: var(--color-surface-2); color: var(--color-text); }
.fd-tablist [role="tab"][aria-selected="true"], .fd-filter[aria-pressed="true"] { background: var(--color-accent-subtle); color: var(--color-accent-strong); border-color: var(--color-accent-line); }
.fd-copy { border-color: var(--color-border-strong); color: var(--color-text); border-radius: var(--radius-sm); }
.fd-copy:hover { background: var(--color-surface-2); }
.fd-client-steps { margin: 0 0 var(--space-4); padding-left: var(--space-5); display: grid; gap: var(--space-2); }
.fd-snippet { position: relative; }
.fd-snippet pre { margin: 0; padding-right: 88px; white-space: pre-wrap; overflow-wrap: anywhere; }
.fd-snippet .fd-copy { position: absolute; top: var(--space-2); right: var(--space-2); background: var(--ba-color-slate-800); color: var(--ba-color-slate-50); border-color: var(--ba-color-slate-600); }

/* ---- The catalog ----------------------------------------------------------------------------------------------- */
.fd-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-2); }
.fd-filter { border-color: var(--color-border-strong); background: var(--color-surface); }
.fd-filter .fig { margin-left: 4px; color: var(--color-text-3); }
.fd-catalog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; padding: 0; list-style: none; }
.fd-tool { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.fd-tool[hidden] { display: none; }
.fd-tool-head { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; }
.fd-tool-head code { background: none; padding: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); overflow-wrap: anywhere; }
.fd-tool p { margin: 0; font-size: var(--text-sm); color: var(--color-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.fd-tool-group { margin-top: auto; font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-headings); }

/* ---- Recent posts, pills, FAQ, footer ------------------------------------------------------------------------ */
.fd-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.fd-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.fd-card a { font: var(--weight-semibold) var(--text-md)/1.35 var(--font-headings); color: var(--color-text); text-decoration: none; }
.fd-card a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-card-meta, .fd-card-blog { margin: 0; font-size: var(--text-xs); color: var(--color-text-3); font-family: var(--font-headings); }
.fd-pills { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.fd-pill { display: inline-block; padding: 6px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface); color: var(--color-text);
  font: var(--weight-medium) var(--text-sm)/1.3 var(--font-headings); text-decoration: none; }
.fd-pill:hover { border-color: var(--color-accent); color: var(--color-accent-strong); }
body.front .fd-answer h2 { font-size: var(--text-xl); line-height: var(--ba-leading-5); }
.fd-verified { margin: 0 0 var(--space-4); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.fd-engine-text { padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); margin: 0 0 var(--space-4); }
.skel-block { display: block; height: 160px; border-radius: var(--radius); background: var(--color-surface-2); }
.fd-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-headings); }
.fd-faq { padding: var(--space-4) var(--space-5); margin: 0 0 var(--space-2); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.fd-faq summary { cursor: pointer; font: var(--weight-semibold) var(--text-md)/1.4 var(--font-headings); }
.fd-faq p { margin: var(--space-3) 0 0; color: var(--color-text-2); }
.fd-footer { padding: var(--space-10) 0; border-top: 1px solid var(--color-border-strong); background: var(--color-surface); font-size: var(--text-sm); color: var(--color-text-3); }
.fd-footer nav { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-family: var(--font-headings); }

/* ---- Phones and small laptops ------------------------------------------------------------------------------- */
@media (max-width: 1150px) {
  .fd-catalog, .fd-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .fd-wrap { padding: 0 var(--space-4); }
  .fd-nav { display: none; }
  .fd-bar-cta { margin-left: auto; padding: 8px 12px; font-size: var(--text-xs); }
  .fd-hero { padding: var(--space-12) 0 var(--space-16); }
  body.front h1 { font-size: 40px; line-height: 44px; }
  body.front h2 { font-size: var(--ba-size-3xl); line-height: var(--ba-leading-6); }
  body.front h3 { font-size: var(--ba-size-2xl); line-height: var(--ba-leading-4); }
  .fd-lede { font-size: var(--ba-size-lg); line-height: var(--ba-leading-4); }
  .fd-section { padding: var(--space-16) 0; }
  .fd-topics, .fd-catalog, .fd-cards, .fd-steps { grid-template-columns: minmax(0, 1fr); }
  .fd-tabs { padding: var(--space-4); }
  .fd-rows > li { grid-template-columns: minmax(0, 1fr) auto; }
  .fd-rows .fd-row-meta { grid-column: 1 / -1; white-space: normal; }
}
@media (max-width: 500px) {
  .fd-brand span { display: none; }
  .fd-ask button { padding: 10px 14px; }
}

/* ---- G2.2: the front door in Gondola's structure (docs/44 §7b), Rebecca's tokens ------------------------------ */
.fd-center { text-align: center; margin-left: auto; margin-right: auto; }
body.front h2.fd-center { max-width: var(--ba-container-3xl); margin-left: auto; margin-right: auto; }
.fd-hero { display: flex; align-items: center; position: relative; overflow: hidden; }
.fd-hero-in { text-align: center; position: relative; z-index: 1; }
.fd-hero .fd-lede { max-width: 62ch; }
.fd-hero h1 { margin: var(--space-5) auto; max-width: 18ch; }
.fd-hero .fd-lede { margin: 0 auto var(--space-8); }
.fd-pill-tag { display: inline-block; margin: 0; padding: 4px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-surface);
  font: var(--weight-semibold) var(--text-xs)/1.6 var(--font-headings); letter-spacing: var(--tracking-wide); color: var(--color-text-2); }
.fd-hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-5); margin: 0; }
.fd-quiet { font: var(--weight-semibold) var(--text-sm)/1 var(--font-headings); color: var(--color-text-2); text-decoration: none; }
.fd-quiet:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-connect-w { max-width: 900px; }
#connect .fd-steps, #connect-again .fd-steps { text-align: center; }
#connect .fd-steps li, #connect-again .fd-steps li { align-items: center; }
/* Feature rows: the text top-aligned with its chat, the chat as tall as its answer, 80 px between rows. */

.fd-chat { min-height: 0; }
.fd-stat-accent { border: 2px solid var(--color-accent); }
/* Three big figures (Gondola's numbers): mono, her primary-strong on light and primary on dark (large text: 3:1). */

.fd-ask-center { margin: 0 auto var(--space-8); }
.fd-filter-groups { display: grid; gap: var(--space-3); justify-content: center; margin: 0 0 var(--space-2); }
.fd-filter-groups .fd-filters { justify-content: center; align-items: center; margin: 0; }
.fd-filter-groups .eyebrow { margin: 0 var(--space-2) 0 0; }
.fd-theme { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
  background: var(--color-surface); color: var(--color-text-2); font: var(--weight-semibold) var(--text-xs)/1 var(--font-headings); }
.fd-theme:hover { background: var(--color-surface-2); color: var(--color-text); }
.fd-theme .i-moon { display: none; }
:root[data-theme="dark"] .fd-theme .i-sun { display: none; }
:root[data-theme="dark"] .fd-theme .i-moon { display: inline; }
@media (max-width: 768px) {
  .fd-theme-label { display: none; }
}
/* G2.3: a topic page's hero is the front door's pattern, not a full viewport; its verified block is result cards. */
.fd-hero.fd-hero-topic { display: block; min-height: 0; padding: calc(var(--fd-bar-h) + var(--space-16)) 0 var(--space-10); }
.fd-verified-grid { display: grid; gap: var(--space-4); }
.fd-verified-grid .fd-verified { margin: 0; }
@media (min-width: 1150px) { .fd-verified-grid:has(> :nth-child(2)) { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } }
#example .fd-chat { max-width: 760px; }
.fd-hero-topic .fd-lede { margin: 0 0 var(--space-5); max-width: 62ch; }
.fd-hero.fd-hero-topic h1 { margin: var(--space-3) 0 var(--space-5); max-width: none; }

/* ---- D3.1: the glow. Two or three soft blobs of her primary green behind a chat or the numbers, blurred 64 px (her
   blur-3xl); 12% in dark, 6% in light. Decoration only: no pointer events, nothing a screen reader meets. ---------- */
.fd-stage { position: relative; isolation: isolate; }

/* ---- D3.2: the hero, a full viewport with depth ------------------------------------------------------------------
   It starts under the clear header. Behind it, our route map (src/front/hero.ts): a faint graticule, the arcs the
   network writes about in her greens, the airports; a vignette of the background keeps the h1 legible. With motion the
   arcs draw in one after another, the words rise in, and as the hero leaves the map drifts at 0.4× while the words
   shrink to 0.96 and fade (scroll-driven where the browser has it, front.js otherwise). */
.fd-hero { min-height: 100vh; min-height: 100svh; margin-top: calc(-1 * var(--fd-bar-h)); padding: calc(var(--fd-bar-h) + var(--space-12)) 0 var(--space-12); }
/* Light: the same map at low contrast. */

.js-motion .fd-hero-in > * { animation: fd-rise .7s var(--fd-ease) both; }
.js-motion .fd-hero-in > :nth-child(2) { animation-delay: 80ms; }
.js-motion .fd-hero-in > :nth-child(3) { animation-delay: 160ms; }
.js-motion .fd-hero-in > :nth-child(4) { animation-delay: 240ms; }
.js-motion .fd-hero-in > :nth-child(5) { animation-delay: 420ms; }
@keyframes fd-draw { to { stroke-dashoffset: 0; } }
@keyframes fd-fade { to { opacity: 1; } }
@keyframes fd-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@supports (animation-timeline: scroll()) {
  .js-motion .fd-hero-in { animation: fd-leave linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
}
@keyframes fd-parallax { to { transform: translateY(60vh); } }
@keyframes fd-leave { to { transform: scale(.96); opacity: 0; } }

/* The glass card under the button (Gondola's testimonial): four real answers, one at a time. Without script the first
   one shows and the controls don't; with script all four share one cell, so the card never changes height. */

@media (max-width: 768px) {
  /* Phones: the whole map as a band across the top of the hero, its strokes kept at their width, no labels. */
  
  .fd-hero { min-height: 100svh; padding: calc(var(--fd-bar-h) + var(--space-10)) 0 var(--space-10); }
}

/* ---- D3.3: the motion system (public/tools/front.js). Every hidden starting state is under .js-motion, which reduced
   motion, ?still=1 and no script never get. Only transform, opacity and filter move. ------------------------------ */
.js-motion [data-reveal], .js-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(16px);
  transition: opacity .5s var(--fd-ease), transform .5s var(--fd-ease), filter .5s var(--fd-ease); transition-delay: var(--d, 0ms); }
.js-motion h2[data-reveal], .js-motion h3[data-reveal] { filter: blur(6px); }
.js-motion [data-reveal].is-in, .js-motion [data-reveal-stagger].is-in > * { opacity: 1; transform: none; filter: none; }
/* Hovers ease out in 180 ms; cards lift 2 px and their border brightens. */
.fd-topic, .fd-tool, .fd-card, .fd-faq, .fd-verified, .fd-pill, .fd-btn, .fd-filter, .fd-tablist [role="tab"] {
  transition: transform .18s var(--fd-ease-out), border-color .18s var(--fd-ease-out), box-shadow .18s var(--fd-ease-out), background-color .18s var(--fd-ease-out), color .18s var(--fd-ease-out); }
@media (hover: hover) {
  .fd-topic:hover, .fd-tool:hover, .fd-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--color-accent) 55%, var(--color-border-strong)); }
  .fd-faq:hover { border-color: var(--color-border-strong); }
}
@media (prefers-reduced-motion: reduce) { .fd-topic:hover, .fd-tool:hover, .fd-card:hover { transform: none; } }
/* The FAQ: an accordion whose answer's height animates (grid rows 0fr to 1fr) and whose chevron turns. */
body.front .fd-faq { padding: 0; }
body.front .fd-faq-q { margin: 0; font: var(--weight-semibold) var(--ba-size-lg)/1.4 var(--font-headings); letter-spacing: normal; }
.fd-faq-q button { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) var(--space-5);
  background: none; border: 0; color: var(--color-text); font: inherit; text-align: left; cursor: pointer; }
.fd-chev { flex: none; color: var(--color-text-3); transition: transform .3s var(--fd-ease); }
.fd-faq[data-open="true"] .fd-chev { transform: rotate(180deg); }
.fd-faq-a { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--fd-ease); }
.fd-faq-a > div { min-height: 0; overflow: hidden; }
.fd-faq-a p { margin: 0; padding: 0 var(--space-5) var(--space-4); color: var(--color-text-2); }
.fd-faq[data-open="false"] .fd-faq-a { grid-template-rows: 0fr; }
.fd-faq[data-open="false"] .fd-faq-a > div { visibility: hidden; transition: visibility 0s .3s; }
.fd-faqs { display: grid; gap: var(--space-2); }
.fd-faqs .fd-faq { margin: 0; }
/* The catalog collapsed: its last row fades under a mask, "Show all" below. */
.fd-catalog.is-collapsed { -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 150px), transparent); mask-image: linear-gradient(to bottom, black calc(100% - 150px), transparent); }

/* ---- D3.4: the chats, played like Gondola's. All text Source Sans; the window bar and the working line mono. ------ */
.fd-chat { max-width: 640px; margin: 0 auto; border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--fd-hair);
  box-shadow: 0 24px 48px -24px color-mix(in srgb, var(--ba-color-slate-950) 45%, transparent); }
.fd-chat-bar { border-bottom-color: var(--fd-hair); }
.fd-chat-input { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4); padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: var(--color-surface-2); border: 1px solid var(--fd-hair); border-radius: var(--radius); }
.fd-chat-field { flex: 1; min-width: 0; min-height: 1.5em; font-size: var(--text-md); line-height: 1.5; color: var(--color-text); }
.fd-chat-ph { color: var(--color-text-3); }
.fd-chat.is-typing .fd-chat-ph { display: none; }
.fd-chat.is-typing .fd-chat-typed::after { content: ''; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.15em; background: var(--ba-color-primary);
  animation: fd-caret 1s steps(1) infinite; }
@keyframes fd-caret { 50% { opacity: 0; } }
.fd-chat-send { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-full); background: var(--color-button); color: var(--color-on-accent); }
.fd-chat-send.is-sent { animation: fd-pulse .45s var(--fd-ease-out); }
@keyframes fd-pulse { 40% { transform: scale(.86); box-shadow: var(--ba-box-shadow-glow); } 100% { transform: none; box-shadow: 0 0 0 10px transparent; } }
.fd-chat-thread { display: grid; gap: var(--space-3); padding: 0 var(--space-4) var(--space-4); }
.fd-chat-bubble { justify-self: end; max-width: 85%; margin: 0; padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--color-accent-subtle); border: 1px solid var(--color-accent-line); color: var(--color-text); font-size: var(--text-md); }
body.front .fd-chat-working { margin: 0; font: var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-3); }
.fd-chat-answer { padding: 0; }
/* The working line's shimmer: a band of light moving across the text while the tool is "working". */
.fd-chat-working.is-working .fd-shimmer { background: linear-gradient(90deg, var(--color-text-3) 0%, var(--color-text-3) 40%, var(--color-text) 50%, var(--color-text-3) 60%, var(--color-text-3) 100%);
  background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: fd-shimmer 1.2s linear infinite; }
@keyframes fd-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.fd-chat.is-playing [data-bubble]:not(.is-shown), .fd-chat.is-playing [data-step]:not(.is-shown) { opacity: 0; }
.fd-chat.is-playing [data-step] { transition: opacity .45s var(--fd-ease), transform .45s var(--fd-ease); }
.fd-chat.is-playing .fd-chat-answer:not(.is-shown) { transform: translateY(12px); }
/* The result card (the chats and the topic pages): the decisive stat outlined in her success colour with its figure in
   primary, the verdict in primary, the one sentence behind a 2 px rule. */
.fd-stat { border-color: var(--fd-hair); background: var(--color-surface); }
.fd-stat-accent { border: 1.5px solid var(--ba-color-success); }
.fd-stat-value { font-family: var(--font-mono); }
.fd-stat-accent .fd-stat-value { color: var(--ba-color-primary); }
.fd-result-verdict { font-weight: var(--weight-semibold); color: var(--color-accent-strong); }
.fd-result-sentence { padding-left: var(--space-3); border-left: 2px solid var(--ba-color-primary); }
/* Feature rows: text 5/12 and chat 7/12, centred against each other, 128 px apart (96 on phones, text first). */

@media (max-width: 768px) { .fd-chat-input { margin: var(--space-3); } .fd-chat-thread { padding: 0 var(--space-3) var(--space-3); } }

/* ---- D3.5: "How an answer is checked" ------------------------------------------------------------------------------
   Stacked (phones, reduced motion, no script): four steps, each its words beside its picture. Pinned (from 900 px, with
   motion): the section is 300vh, its panel sticks under the header, the words form a list on a rail at the left and the
   pictures share one cell at the right; data-step (front.js) says which is lit. */
.fd-how h2 { margin-bottom: var(--space-12); }
.fd-how-steps { position: relative; display: grid; gap: var(--space-16); }
.fd-how-step { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
.fd-how-copy { position: relative; padding-left: var(--space-12); }
.fd-how-num { position: absolute; left: 0; top: 2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--radius-full);
  border: 1.5px solid var(--ba-color-primary); font: var(--weight-semibold) var(--text-sm)/1 var(--font-mono); color: var(--color-text); background: var(--color-bg); }
body.front .fd-how-copy h3 { font-size: var(--ba-size-2xl); line-height: var(--ba-leading-4); margin: 0 0 var(--space-2); }
.fd-how-copy p { margin: 0; color: var(--color-text-2); }
.fd-how-vis { position: relative; padding: var(--space-6); border-radius: var(--radius-lg); background: var(--color-surface); border: 1px solid var(--fd-hair); min-height: 220px;
  display: flex; flex-direction: column; justify-content: center; }
.fd-how-q { align-self: flex-end; max-width: 85%; margin: 0 0 var(--space-3); padding: var(--space-2) var(--space-4); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-sm) var(--radius-lg);
  background: var(--color-accent-subtle); border: 1px solid var(--color-accent-line); font-size: var(--ba-size-lg); }
.fd-how-call { margin: 0; font: var(--text-xs)/1.5 var(--font-mono); color: var(--color-text-3); }
.fd-how-join { position: relative; display: grid; place-items: center; }
.fd-how-badge { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--space-3); margin: 0; padding: var(--space-3) var(--space-5); border-radius: var(--radius-full);
  background: var(--color-surface); border: 1.5px solid var(--ba-color-success); box-shadow: var(--ba-box-shadow-glow); }
.fd-how-badge { flex-wrap: wrap; justify-content: center; }
.fd-how-badge b { font-size: var(--ba-size-xl); color: var(--ba-color-primary); white-space: nowrap; }
.fd-how-badge span:last-child { font-size: var(--text-sm); color: var(--color-text-2); }
.fd-how-rail, .fd-how-marks { display: none; }
@media (max-width: 899px) { .fd-how-step { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } .fd-how-steps { gap: var(--space-12); } }

@media (min-width: 900px) {
  .js-motion .fd-how { padding: 0; }
  .js-motion .fd-how-track { position: relative; height: 300vh; view-timeline: --fd-how block; }
  .js-motion .fd-how-pin { position: sticky; top: var(--fd-bar-h); min-height: calc(100vh - var(--fd-bar-h)); display: flex; align-items: center; padding: var(--space-10) 0; }
  .js-motion .fd-how-pin > .fd-wrap { width: 100%; }
  .js-motion .fd-how-marks { display: block; position: absolute; inset: 0; pointer-events: none; }
  .js-motion .fd-how-marks i { position: absolute; left: 0; right: 0; height: 25%; }
  .js-motion .fd-how-marks i:nth-child(2) { top: 25%; } .js-motion .fd-how-marks i:nth-child(3) { top: 50%; } .js-motion .fd-how-marks i:nth-child(4) { top: 75%; }
  .js-motion .fd-how-join { min-height: 150px; }
  .js-motion .fd-how-steps { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: repeat(4, auto) 1fr; column-gap: var(--space-12); row-gap: var(--space-6); }
  .js-motion .fd-how-step { display: contents; }
  .js-motion .fd-how-copy { grid-column: 1; grid-row: var(--n); }
  .js-motion .fd-how-copy :is(h3, p) { opacity: .38; transition: opacity .4s var(--fd-ease); }
  .js-motion .fd-how-copy .fd-how-num { border-color: var(--color-border-strong); color: var(--color-text-3); }
  .js-motion .fd-how-vis { grid-column: 2; grid-row: 1 / 6; align-self: center; min-height: 380px; opacity: 0; transform: translateY(16px) scale(.98);
    transition: opacity .5s var(--fd-ease), transform .5s var(--fd-ease); pointer-events: none; }
  .js-motion .fd-how-rail { display: block; grid-column: 1; grid-row: 1 / 5; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--fd-hair); }
  .js-motion .fd-how-rail i { position: absolute; inset: 0; background: var(--ba-color-primary); transform-origin: top; transform: scaleY(var(--how-p, .25)); transition: transform .5s var(--fd-ease); }
  .js-motion .fd-how[data-step="1"] [data-n="1"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)), .js-motion .fd-how[data-step="2"] [data-n="2"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)),
  .js-motion .fd-how[data-step="3"] [data-n="3"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)), .js-motion .fd-how[data-step="4"] [data-n="4"] :is(.fd-how-vis, .fd-how-copy :is(h3, p)) { opacity: 1; transform: none; pointer-events: auto; }
  .js-motion .fd-how[data-step="1"] [data-n="1"] .fd-how-num, .js-motion .fd-how[data-step="2"] :is([data-n="1"], [data-n="2"]) .fd-how-num,
  .js-motion .fd-how[data-step="3"] :is([data-n="1"], [data-n="2"], [data-n="3"]) .fd-how-num, .js-motion .fd-how[data-step="4"] .fd-how-num { border-color: var(--ba-color-primary); color: var(--color-text); }
  /* Step 2: the sources light up one by one. Step 3: they close in on one verified badge. Step 4: the blogger's links glow. */
  .js-motion .fd-how[data-step="3"] [data-n="3"] .fd-how-badge { animation: fd-pop .5s var(--fd-ease-out) both; animation-delay: 650ms; }
  .js-motion .fd-how [data-n="4"] .fd-result-links a::after { transform: scaleX(0); }
  .js-motion .fd-how[data-step="4"] [data-n="4"] .fd-result-links a::after { animation: fd-underline .7s var(--fd-ease) both; animation-delay: 350ms; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 900px) { .js-motion .fd-how-rail i { transition: none; animation: fd-fill linear both; animation-timeline: --fd-how; animation-range: contain 0% contain 100%; } }
}
@keyframes fd-pop { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: none; } }
@keyframes fd-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Step 4's blogger links, marked: a tint and a 2 px underline in primary (which draws in with motion). */
.fd-how [data-n="4"] .fd-result-links a { position: relative; padding: 0 2px; border-radius: var(--radius-sm); background: var(--color-accent-subtle); text-decoration: none; }
.fd-how [data-n="4"] .fd-result-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--ba-color-primary); transform-origin: left; }
@keyframes fd-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* ---- D3.6: the daily briefing (front door and /briefing) and /publishers ------------------------------------------- */
.fd-brief { display: grid; gap: 0; margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.fd-brief-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--space-4); padding: var(--space-5) 0; border-top: 1px solid var(--fd-hair); }
.fd-brief-item:last-child { border-bottom: 1px solid var(--fd-hair); }
.fd-brief-rank { font-size: var(--ba-size-4xl); line-height: 1; font-weight: var(--weight-semibold); color: var(--ba-color-primary); }
.fd-brief-meta { margin: 0 0 var(--space-1); font-size: var(--text-xs); color: var(--color-text-3); }
.fd-brief-title { font: var(--weight-semibold) var(--ba-size-xl)/1.3 var(--font-headings); color: var(--color-text); text-decoration: none; }
.fd-brief-title:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-brief-why { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-2); }
.fd-pubs { display: grid; gap: var(--space-10); }
body.front .fd-pub h3 { font-size: var(--ba-size-3xl); line-height: var(--ba-leading-5); margin: 0 0 var(--space-3); }
.fd-pub p { margin: 0 0 var(--space-2); }
.fd-pub-so { color: var(--color-text-2); padding-left: var(--space-3); border-left: 2px solid var(--ba-color-primary); }
body.front .fd-section h2:not(.fd-center) { font-size: var(--ba-size-4xl); line-height: var(--ba-leading-7); margin-top: var(--space-6); }
@media (max-width: 768px) { .fd-brief-item { grid-template-columns: 40px minmax(0, 1fr); } .fd-brief-rank { font-size: var(--ba-size-3xl); } }

/* ---- D4.1: light first, a calm canvas (docs/48) ------------------------------------------------------------------
   Apple's product pages are white with a pale grey for alternate sections and tiles; here that is Rebecca's surface
   (white) as the canvas and her surface-muted (slate-50) for tiles, in the light theme. Dark, which every page opens in
   (E1.0, src/front/layout.ts): her slate-950 canvas and slate-900 tiles. Two sections are dark "cinematic" bands in
   either theme (.fd-dark: the sentence and "How an answer is checked"). One accent, her greens. No glow but the hero's;
   no mono chips; caps eyebrows on two sections only (.eyebrow-caps), the rest sentence case, as Apple's are. */
:root[data-theme="light"] body.front { --color-bg: var(--ba-color-primary-white); --fd-tile: var(--ba-color-slate-50);
  --fd-hair: color-mix(in srgb, var(--ba-color-slate-300) 45%, transparent); }
:root[data-theme="dark"] body.front { --fd-tile: var(--ba-color-slate-900); }
body.front { --fd-tile: var(--ba-color-slate-50); }
/* The cinematic band: her dark values, set on the section, in either theme (on the dark theme it goes to black). */
.fd-dark { --color-bg: var(--ba-color-slate-950); --color-surface: var(--ba-color-slate-900); --color-surface-2: var(--ba-color-slate-800);
  --color-border: var(--ba-color-slate-900); --color-border-strong: var(--ba-color-slate-800); --fd-tile: var(--ba-color-slate-900);
  --color-text: var(--ba-color-primary-white); --color-text-2: var(--ba-color-slate-100); --color-text-3: var(--ba-color-slate-200);
  --color-accent-strong: var(--ba-color-green-500); --color-accent-subtle: var(--ba-color-green-950); --color-accent-line: var(--ba-color-green-900);
  --color-positive: var(--ba-color-green-500); --color-positive-subtle: var(--ba-color-green-950); --color-focus: var(--ba-color-green-500);
  --fd-hair: color-mix(in srgb, var(--ba-color-slate-50) 10%, transparent);
  color-scheme: dark; background: var(--color-bg); color: var(--color-text); }
:root[data-theme="dark"] .fd-dark { --color-bg: var(--ba-color-primary-black); }
body.front main > section.fd-dark, body.front main > section.fd-dark + section { border-top: 0; }

/* Type (Apple's scale in her faces and sizes): the hero 96/96 from 1350, 80/80 from 769, 48/50 on phones, 600, −0.03em,
   filled with a gradient across her greens; section headlines 56/60; gallery captions 28/32; body 19/28 Source Sans,
   short paragraphs that open on a bold phrase. */
body.front h1, body.front h2 { letter-spacing: -0.03em; }
body.front h2 { font-size: 56px; line-height: 60px; margin: 0 0 var(--space-6); }
body.front .fd-display { font-size: 80px; line-height: 80px; font-weight: var(--weight-semibold); letter-spacing: -0.03em; }
@media (min-width: 1350px) { body.front .fd-display { font-size: var(--ba-size-8xl); line-height: var(--ba-leading-12); } }
.fd-grad { background: linear-gradient(100deg, var(--ba-color-green-900) 0%, var(--ba-color-primary-strong) 38%, var(--ba-color-primary) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
:root[data-theme="dark"] .fd-grad, .fd-dark .fd-grad { background-image: linear-gradient(100deg, var(--ba-color-green-200) 0%, var(--ba-color-green-500) 50%, var(--ba-color-primary) 100%); }
.fd-caption { font: var(--weight-semibold) 28px/32px var(--font-headings); letter-spacing: -0.01em; }
.fd-body, .fd-lede { font: var(--weight-normal, 400) 19px/28px var(--font-headings); color: var(--color-text-2); }
.fd-body b, .fd-lede b { font-weight: var(--weight-semibold); color: var(--color-text); }
body.front .eyebrow { font: var(--weight-semibold) 21px/21px var(--font-headings); letter-spacing: normal; text-transform: none; color: var(--color-text-2); }
body.front .eyebrow-caps { font-size: var(--text-xs); line-height: 1.4; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent-strong); }
.fd-btn-lg { box-shadow: none; border-radius: var(--radius-full); padding: 14px 30px; font-size: 17px; }
.fd-btn-primary { border-radius: var(--radius-full); }
/* Tiles on the white canvas: the pale grey, no border, no shadow (Apple's tiles). */
:root[data-theme="light"] body.front :is(.fd-faq, .fd-tabs, .fd-topic, .fd-tool, .fd-card, .fd-verified, .fd-how-vis, .fd-engine-text) {
  background: var(--fd-tile); border-color: transparent; box-shadow: none; }
@media (max-width: 768px) {
  body.front .fd-display { font-size: var(--ba-size-5xl); line-height: 50px; }
  body.front h2 { font-size: 36px; line-height: 40px; }
  .fd-caption { font-size: 24px; line-height: 28px; }
  .fd-body, .fd-lede { font-size: 17px; line-height: 26px; }
}

/* ---- D4.2: the hero, the network as a living globe (src/front/globe.ts, public/tools/front/globe.js) ---------------
   Stacked (phones, reduced motion, no script): the words, then the globe as a still picture, then its caption. Pinned
   (from 769 px, with motion): the hero is 250vh and its panel sticks for 150vh of scroll; the globe grows and rises
   while globe.js tilts it, and the words lift away. CSS scroll timelines where the browser has them, front.js else.
   The hero's glow is the only one on the page: her primary, soft, behind the globe. */
.fd-hero { display: block; min-height: 0; overflow: clip; padding: calc(var(--fd-bar-h) + var(--space-16)) 0 var(--space-10); text-align: center; }
.fd-hero-pin { position: relative; }
.fd-hero .fd-hero-in { position: relative; z-index: 2; }
.fd-hero h1 { max-width: 1100px; margin: var(--space-6) auto var(--space-6); text-wrap: balance; }
.fd-hero .fd-lede { max-width: 36em; margin: 0 auto var(--space-8); }
.fd-hero-globe { position: relative; z-index: 1; width: min(640px, 100%); margin: var(--space-12) auto 0; }
.fd-globe { position: relative; margin: 0; }
.fd-globe svg { display: block; width: 100%; height: auto; aspect-ratio: 1; overflow: visible; }
/* G3.1: the still (src/front/globe-still.ts) is the canvas's first frame, in the same --globe-* colours; its opacities
   and widths are on its elements. The atmosphere is part of it, so there is no CSS glow. On phones and without motion it
   is the globe, and its arcs are drawn brighter, as the old still frame had them (globe-frame.js STILL_ARC). */
.fd-globe-still :is(path, circle) { stroke-linecap: round; stroke-linejoin: round; }
.fd-globe-still path, .fd-gs-ring, .fd-gs-pulse { fill: none; }
.fd-gs-sphere { stroke: var(--globe-rim); }
.fd-gs-grid { stroke: var(--globe-grid); }
.fd-gs-dots { opacity: var(--globe-land-a); } /* no dot overlaps another, so the group's opacity is each dot's */
.fd-gs-dots path { stroke: var(--globe-land); }
.fd-gs-net, .fd-gs-arcs path { stroke: var(--globe-arc); }
.fd-gs-ring { stroke: var(--globe-city); }
.fd-gs-city { fill: var(--globe-city); }
.fd-gs-pulse { stroke: var(--globe-core); }
.fd-gs-node { fill: var(--globe-core); }
.fd-gs-heart { fill: var(--globe-head); }
:root:not(.js-motion) .fd-gs-arcs { stroke-opacity: .55; stroke-width: 1.2; }
@media (max-width: 768px) { .fd-gs-arcs { stroke-opacity: .55; stroke-width: 1.2; } }
/* The caption shows once: under the still globe, or (pinned, from 769 px with motion) at the foot of the hero. */
.fd-hero-note { display: none; }
.fd-globe-cap { max-width: 44em; margin: var(--space-4) auto 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
/* The canvas's colours, her greens and slates only, read by globe.js from the run (it redraws when the theme changes):
   the land, the network's countries and the one shown, the arcs and their lights, the cities, the core, the atmosphere's
   rim, the sphere lit from the upper left, and the graticule. */
.fd-run, .fd-globe { --globe-land: var(--ba-color-green-800); --globe-land-a: .6; --globe-country: var(--ba-color-green-600); --globe-active: var(--ba-color-primary-strong);
  --globe-arc: var(--ba-color-primary); --globe-head: var(--ba-color-green-900); --globe-city: var(--ba-color-primary); --globe-core: var(--ba-color-green-700);
  --globe-rim: var(--ba-color-green-400); --globe-ocean-hi: var(--ba-color-primary-white); --globe-ocean-lo: var(--ba-color-slate-50); --globe-grid: var(--ba-color-slate-400); }
:root[data-theme="dark"] :is(.fd-run, .fd-globe) { --globe-land: var(--ba-color-green-500); --globe-land-a: .5; --globe-country: var(--ba-color-green-300); --globe-active: var(--ba-color-green-50);
  --globe-arc: var(--ba-color-green-300); --globe-head: var(--ba-color-green-50); --globe-city: var(--ba-color-green-400); --globe-core: var(--ba-color-green-200);
  --globe-rim: var(--ba-color-green-600); --globe-ocean-hi: var(--ba-color-slate-900); --globe-ocean-lo: var(--ba-color-slate-950); --globe-grid: var(--ba-color-slate-500); }
/* E1.2: the network's core (BoardingArea, Colorado Springs), its calm layer of arcs to the home countries, and the
   caption's (i). */
.fd-globe-corename { white-space: nowrap; color: var(--color-text-2); }
.fd-globe-corename i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; vertical-align: 1px;
  background: var(--ba-color-green-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-color-primary) 30%, transparent); }
:root[data-theme="dark"] .fd-globe-corename i { background: var(--ba-color-green-200); }
.fd-info { display: inline; position: relative; }
.fd-info summary { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%;
  font: italic 600 11px/1 var(--font-headings); cursor: pointer; list-style: none; vertical-align: 1px; }
.fd-info summary::-webkit-details-marker { display: none; }
.fd-info summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fd-info > span { position: absolute; bottom: calc(100% + 8px); right: -8px; z-index: 5; width: max-content; max-width: min(22em, 80vw); padding: 10px 14px;
  border-radius: var(--ba-border-radius-md); background: var(--color-surface); box-shadow: var(--ba-box-shadow-default); color: var(--color-text); text-align: left; }
@media (min-width: 769px) {
  .js-motion .fd-hero { height: 250vh; padding: 0; }
  .js-motion .fd-hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip; }
  .js-motion .fd-hero .fd-hero-in { padding-top: calc(var(--fd-bar-h) + 7vh); }
  /* G3.1: the globe sits in the flow under the words, its sphere 24 px below the button row (the still's sphere starts
     4% of its box down), so no dot is ever behind a word; globe.js grows it only once the words have lifted away. */
  .js-motion .fd-hero-globe { width: min(900px, 74vw); margin: calc(var(--space-6) - 0.04 * min(900px, 74vw)) auto 0; }
  .js-motion .fd-globe-cap { position: absolute; left: 0; right: 0; top: calc(100% + var(--space-2)); }
  .js-motion .fd-hero-globe .fd-globe-cap { display: none; }
  .js-motion .fd-hero-note { display: block; position: absolute; left: 0; right: 0; bottom: var(--space-6); z-index: 3; margin: 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
}
@supports (animation-timeline: scroll()) {
  @media (min-width: 769px) {
    .js-motion .fd-hero .fd-hero-in { animation: fd-hero-lift linear both; animation-timeline: scroll(root); animation-range: 0 70vh; }
    .js-motion .fd-hero-note { animation: fd-fade-out linear both; animation-timeline: scroll(root); animation-range: 0 30vh; }
  }
}
@keyframes fd-hero-lift { to { transform: translateY(-18vh); opacity: 0; } }
/* ---- E1.3: the stage. With motion from 769 px the globe is drawn on a sticky, full-screen canvas behind the hero and
   "Who the experts are" (the run), at its size on screen × devicePixelRatio: it grows through the hero and glides to the
   left half as the experts arrive, with no bitmap ever scaled by CSS. The hero's still picture holds its place until
   the stage has drawn. The sections above it let the pointer through except where there is something to use. */
.fd-stage { display: none; }
.fd-core-hot { position: absolute; left: 0; top: 0; z-index: 3; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; pointer-events: auto; }
.fd-core-hot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.fd-core-tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); padding: 6px 10px; border-radius: var(--ba-border-radius-md);
  background: var(--color-surface); box-shadow: var(--ba-box-shadow-default); font: var(--weight-semibold) 13px/1.2 var(--font-headings); color: var(--color-text);
  white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s var(--fd-ease-out); }
.fd-core-hot:is(:hover, :focus-visible) .fd-core-tip { opacity: 1; }
@media (min-width: 769px) {
  /* The track covers the run and holds the stage, so the stage sticks for exactly the run and leaves with it. */
  .js-motion .fd-run { position: relative; }
  .js-motion .fd-stage-track { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .js-motion .fd-stage { display: block; position: sticky; top: 0; height: 100vh; }
  .js-motion .fd-stage canvas { display: block; width: 100%; height: 100%; }
  .js-motion .fd-run > section { position: relative; z-index: 1; pointer-events: none; }
  .js-motion .fd-run :is(.fd-hero-in > *, .fd-hero-note, .fd-ex-side) { pointer-events: auto; }
  /* The hand-off (G3.1): the canvas fades in over the still once its first frame is drawn; then the still is hidden. */
  .js-motion .fd-stage canvas { opacity: 0; transition: opacity .2s linear; }
  .js-motion .fd-run[data-drawn] .fd-stage canvas { opacity: 1; }
  .js-motion .fd-run[data-live] .fd-hero-globe { visibility: hidden; }
}
.fd-stage-label { position: absolute; left: 0; top: 0; margin: 0; padding: 6px 14px; border-radius: var(--radius-full); opacity: 0; white-space: nowrap;
  background: color-mix(in srgb, var(--color-surface) 78%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: var(--ba-box-shadow-default); font: var(--weight-semibold) 15px/1.2 var(--font-headings); color: var(--color-text); will-change: transform, opacity; }
@keyframes fd-fade-out { to { opacity: 0; } }

/* ---- D4.3: one sentence, revealed (the first dark band, src/front/sentence.ts) -----------------------------------
   The track is 220vh with motion; its panel sticks for the length of it and the words light in turn: word i goes from
   0.15 to 1 over its own slice of the track's scroll (a view timeline; front.js sets each word's opacity where there
   isn't one). Only opacity moves. */
.fd-sentence { padding: calc(var(--space-16) * 2) 0; }
.fd-statement { max-width: 22ch; margin: 0 auto; text-align: left; font: var(--weight-semibold) 64px/72px var(--font-headings); letter-spacing: -0.025em; color: var(--color-text); text-wrap: pretty; }
.fd-word-accent { color: var(--ba-color-green-500); }
@media (min-width: 1350px) { .fd-statement { font-size: 72px; line-height: 80px; } }
@media (max-width: 768px) { .fd-statement { font-size: 36px; line-height: 42px; } .fd-sentence { padding: var(--space-16) 0; } }
.js-motion .fd-sentence { padding: 0; }
.js-motion .fd-sentence-track { height: 220vh; view-timeline: --fd-sentence block; }
.js-motion .fd-sentence-pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; align-items: center; }
.js-motion .fd-sentence-pin > .fd-wrap { width: 100%; }
.js-motion .fd-word { opacity: .15; }
@supports (animation-timeline: view()) {
  /* Word i lights over its slice of the track's middle 60% (from 10% to 70% of its scroll): opacity only. */
  .js-motion .fd-word { animation: fd-word-in linear both; animation-timeline: --fd-sentence;
    animation-range: contain calc(10% + 60% * var(--i) / var(--n)) contain calc(10% + 60% * (var(--i) + 1) / var(--n)); }
}
@keyframes fd-word-in { from { opacity: .15; } to { opacity: 1; } }
/* L1.1, made quieter in L2.2: the day's titles are texture behind the sentence, not text beside it. Four rows at about
   45% of the sentence's size (30 px, 32 from 1350, 16 on phones), 4.5% of the band's text colour (5% on phones), a 1 px
   blur, faded out towards every edge. The sentence's own block is kept clear by a soft patch of the band's background
   behind it (.fd-statement::before). Each row holds its titles twice and moves half its width, alternate rows the other
   way, 270 to 390 s a loop: only transform moves. They move only with motion and only while the band is on screen
   (front.js adds .is-live); served still. scripts/sentence_contrast.ts checks the words against it at five points. */
.fd-sentence-pin { position: relative; }
.fd-drift { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; justify-content: space-evenly; overflow: hidden; pointer-events: none;
  opacity: .045; filter: blur(1px); --fd-drift-mask: radial-gradient(ellipse 70% 65% at 50% 50%, black 45%, transparent 100%);
  -webkit-mask-image: var(--fd-drift-mask); mask-image: var(--fd-drift-mask); }
.fd-drift-row { display: flex; width: max-content; margin: 0; white-space: nowrap; font: var(--weight-semibold) 30px/1.1 var(--font-headings); letter-spacing: -0.01em; color: var(--color-text); }
@media (min-width: 1350px) { .fd-drift-row { font-size: 32px; } }
.fd-statement { position: relative; }
.fd-sentence-pin .fd-drift ~ .fd-wrap .fd-statement::before { content: ''; position: absolute; inset: -.3em -.5em; z-index: -1; border-radius: 48px; background: var(--color-bg);
  box-shadow: 0 0 56px 40px var(--color-bg); }
.fd-drift-set { display: flex; flex: none; }
.fd-drift-set > span { padding-right: 1.4em; }
.fd-sentence-pin > .fd-wrap { position: relative; z-index: 1; }
@media (max-width: 768px) { .fd-drift-row { font-size: 16px; } .fd-drift { opacity: .05; } }
.js-motion .fd-drift-row { animation: fd-titles var(--dur, 180s) linear infinite; animation-play-state: paused; }
.js-motion .fd-drift-row:nth-child(even) { animation-direction: reverse; }
.js-motion .fd-sentence.is-live .fd-drift-row { animation-play-state: running; }
@keyframes fd-titles { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- L1.2: the product in a device (src/front/device.ts) ---------------------------------------------------------
   Our own drawings, true to a phone's and a laptop's proportions: a metal band and a black bezel, rounded screens, a
   camera pill, side buttons, a reflection across the glass and a soft shadow on the page; no maker's logo. The metal
   and glass are her slates in either theme, as real devices are; only the screens follow the theme (--fd-screen-bg: her
   slate-900 dark, white light, the same as the stills' background, src/front/assistants.ts). From 1100 px: a pinned
   progress rail, the four steps in a left column, and the laptop (ChatGPT) with the phone (Claude) in front of it pinned
   on the right. Below 1100 px the stage is display: contents, so the two devices stack between the steps. */
.fd-device-sec h2 { margin-bottom: var(--space-4); }
.fd-dv { --fd-screen-bg: var(--ba-color-slate-900); --fd-screen-tile: var(--ba-color-slate-800);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); margin-top: var(--space-12); }
:root[data-theme="light"] .fd-dv { --fd-screen-bg: var(--ba-color-primary-white); --fd-screen-tile: var(--ba-color-slate-100); }
/* One image per theme: only the reader's is shown (and so fetched: a lazy image that isn't displayed isn't loaded). */
.fd-dv .fd-th-light, :root[data-theme="light"] .fd-dv .fd-th-dark, .fd-dv [hidden] { display: none; }
:root[data-theme="light"] .fd-dv .fd-th-light { display: block; }
.fd-story { order: 1; max-width: 34em; }
.fd-story[data-story="3"], .fd-story[data-story="4"] { order: 4; }
.fd-story-n { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-bottom: var(--space-3); border-radius: 50%;
  border: 1px solid var(--color-border-strong); font: var(--weight-semibold) 13px/1 var(--font-headings); color: var(--color-text-2); }
body.front .fd-story h3 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; margin: 0 0 var(--space-3); }
.fd-story .fd-body { margin: 0; }
.fd-dv-stage { display: contents; }
.fd-phone { order: 2; justify-self: center; }
.fd-try { order: 3; }
.fd-laptop { order: 5; justify-self: center; width: min(640px, 100%); }
.fd-dv-rail { display: none; }
.fd-dv-cap { margin-top: var(--space-4); text-align: center; font: 13px/1.4 var(--font-headings); color: var(--color-text-3); }
.fd-dv-cap b { color: var(--color-text); font-weight: var(--weight-semibold); }

/* The phone: 9 : 19.5; a 1.3% metal band, a 3% black bezel, the screen's corners 13% of its width. */
.fd-phone { --pw: min(300px, 78vw); position: relative; width: var(--pw); margin: 0; transform-style: preserve-3d; }
.fd-phone-body { position: relative; aspect-ratio: 9 / 19.5; padding: calc(var(--pw) * .013); border-radius: calc(var(--pw) * .165);
  background: linear-gradient(135deg, var(--ba-color-slate-300), var(--ba-color-slate-600) 18%, var(--ba-color-slate-400) 42%, var(--ba-color-slate-700) 70%, var(--ba-color-slate-400));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-color-primary-white) 35%, transparent), 0 60px 90px -45px color-mix(in srgb, var(--ba-color-primary-black) 70%, transparent),
    0 24px 40px -22px color-mix(in srgb, var(--ba-color-primary-black) 55%, transparent); }
/* Side buttons: the action button and two volume keys on the left (one shape and its shadows), the side key on the right. */
.fd-phone-body::before, .fd-phone-body::after { content: ''; position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ba-color-slate-700), var(--ba-color-slate-400)); }
.fd-phone-body::before { left: -3px; top: 17%; height: 5%; box-shadow: 0 calc(var(--pw) * .14) 0 0 var(--ba-color-slate-500), 0 calc(var(--pw) * .27) 0 0 var(--ba-color-slate-500); }
.fd-phone-body::after { right: -3px; top: 26%; height: 12%; background: linear-gradient(270deg, var(--ba-color-slate-700), var(--ba-color-slate-400)); }
.fd-phone-bezel { position: relative; height: 100%; padding: calc(var(--pw) * .03); border-radius: calc(var(--pw) * .152); background: var(--ba-color-primary-black); }
/* The glass: a soft highlight from the upper left, over everything on the screen. */
.fd-phone-bezel::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, color-mix(in srgb, var(--ba-color-primary-white) 14%, transparent) 0%, transparent 28%, transparent 64%, color-mix(in srgb, var(--ba-color-primary-white) 5%, transparent) 82%, transparent 100%); }
.fd-screen { position: relative; overflow: hidden; background: var(--fd-screen-bg); color: var(--color-text); color-scheme: dark; }
:root[data-theme="light"] .fd-screen { color: var(--ba-color-slate-950); color-scheme: light; }
.fd-phone-screen { height: 100%; display: flex; flex-direction: column; border-radius: calc(var(--pw) * .125); }
.fd-island { position: absolute; z-index: 3; top: calc(var(--pw) * .032); left: 50%; width: 31%; height: calc(var(--pw) * .09); transform: translateX(-50%); border-radius: 999px; background: var(--ba-color-primary-black); }
.fd-status { display: flex; align-items: center; justify-content: space-between; height: calc(var(--pw) * .15); flex: none; padding: 0 calc(var(--pw) * .085) 0 calc(var(--pw) * .1);
  font: var(--weight-semibold) 13px/1 var(--font-headings); }
.fd-status-i { display: block; }
.fd-scroll { flex: 1; min-height: 0; overflow: hidden; }
.fd-compose { display: flex; align-items: center; justify-content: space-between; flex: none; margin: 6px 10px 14px; padding: 6px 6px 6px 16px; border-radius: 999px;
  background: var(--fd-screen-tile); font: 13px/1 var(--font-headings); color: color-mix(in srgb, currentColor 55%, transparent); }
/* The send key: its arrow drawn on a 18 px grid and centred in a 30 px circle (the old Ask's arrow sat off centre). */
.fd-compose i, .fd-try-box button { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--color-button); color: var(--color-on-accent); }
.fd-compose i svg, .fd-try-box button svg { display: block; width: 16px; height: 16px; }

/* The chat inside: the question, blank lines for the assistant's own words, today's card. */
.fd-chat { display: grid; gap: 12px; padding: 6px 12px 18px; font: 13px/1.45 var(--font-headings); }
.fd-chat-q { justify-self: end; max-width: 86%; margin: 0; padding: 9px 13px; border-radius: 18px; background: var(--fd-screen-tile); font-size: 14px; line-height: 1.35; }
.fd-lines { display: grid; gap: 7px; padding: 2px 0; }
.fd-lines i { display: block; height: 8px; border-radius: 4px; background: color-mix(in srgb, currentColor 13%, transparent); }
.fd-lines i:nth-child(2) { width: 94%; } .fd-lines i:nth-child(3) { width: 68%; } .fd-lines i:nth-child(4) { width: 81%; }
.fd-card-img { display: block; width: 100%; height: auto; }

/* The laptop: a 16 : 10 screen in a black bezel with an aluminium edge and a camera, on a wider base with its lip. */
.fd-laptop { --lw: min(640px, 100%); position: relative; margin: 0; transform-style: preserve-3d; }
.fd-laptop-lid { position: relative; padding: 2.2% 2.2% 3%; border-radius: 18px 18px 4px 4px; background: var(--ba-color-primary-black);
  box-shadow: inset 0 0 0 1.5px var(--ba-color-slate-400), inset 0 0 0 3px var(--ba-color-slate-800), 0 40px 70px -40px color-mix(in srgb, var(--ba-color-primary-black) 70%, transparent); }
.fd-laptop-lid::before { content: ''; position: absolute; top: .9%; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: var(--ba-color-slate-800); box-shadow: inset 0 0 0 1.5px var(--ba-color-slate-700); }
.fd-laptop-lid::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, color-mix(in srgb, var(--ba-color-primary-white) 9%, transparent) 0%, transparent 30%, transparent 100%); }
.fd-laptop-screen { display: flex; aspect-ratio: 16 / 10; border-radius: 4px; }
.fd-laptop-base { position: relative; height: 13px; margin: 0 -6.5%; border-radius: 1px 1px 12px 12px / 1px 1px 10px 10px;
  background: linear-gradient(to bottom, var(--ba-color-slate-200), var(--ba-color-slate-300) 30%, var(--ba-color-slate-500) 80%, var(--ba-color-slate-600));
  box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--ba-color-primary-black) 60%, transparent); }
.fd-laptop-base::before { content: ''; position: absolute; top: 0; left: 50%; width: 15%; height: 5px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: var(--ba-color-slate-400);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--ba-color-primary-black) 35%, transparent); }
.fd-side { flex: none; display: grid; align-content: start; gap: 10px; width: 22%; padding: 16px 12px; background: color-mix(in srgb, var(--fd-screen-tile) 55%, var(--fd-screen-bg)); }
.fd-side i { display: block; height: 7px; border-radius: 4px; background: color-mix(in srgb, currentColor 11%, transparent); }
.fd-side i:first-child { width: 60%; height: 9px; margin-bottom: 8px; background: color-mix(in srgb, currentColor 20%, transparent); }
.fd-side i:nth-child(3) { width: 80%; } .fd-side i:nth-child(5) { width: 70%; }
.fd-win { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fd-win .fd-chat { max-width: 440px; margin: 0 auto; padding-top: 18px; }
.fd-win .fd-compose { width: min(440px, 90%); margin: 6px auto 12px; }
/* L2.0: a screen that plays a recording is dark in either theme (there are no light takes yet), in the app's own
   background: her neutral-900 for Claude's (the nearest of her greys to the recording's), black for ChatGPT's. The clip fills the laptop's
   16:10 screen; on the phone it sits under the status bar at its own shape, the chat's room below it. */
.fd-screen.has-clip { --fd-screen-bg: var(--ba-color-neutral-900); --fd-screen-tile: var(--ba-color-slate-800); color: var(--ba-color-slate-50); color-scheme: dark; }
.fd-laptop-screen.has-clip { --fd-screen-bg: var(--ba-color-primary-black); }
.fd-clip-box { position: relative; flex: none; }
.fd-clip-poster, .fd-clip { display: block; width: 100%; height: auto; }
.fd-clip { position: absolute; inset: 0; height: 100%; opacity: 0; transition: opacity .3s var(--fd-ease); }
.fd-clip.is-on { opacity: 1; }
.fd-laptop-screen .fd-clip-box { flex: 1; }
.fd-laptop-screen :is(.fd-clip-poster, .fd-clip) { height: 100%; object-fit: cover; }
.fd-live-box { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.fd-phone-screen > .fd-compose { margin-top: auto; }
.fd-lback { margin: 0; }
.fd-lback button { padding: 6px 12px; border-radius: 999px; background: var(--fd-screen-tile); color: inherit; font: var(--weight-semibold) 12px/1 var(--font-headings); }

/* "Try your own question": a large field with a centred send key, three questions to tap, and the speed. */
.fd-try { max-width: 34em; }
.fd-try-h { margin: 0 0 var(--space-4); font: 19px/28px var(--font-headings); color: var(--color-text-2); }
.fd-try-h b { color: var(--color-text); font-weight: var(--weight-semibold); }
.fd-try-box { position: relative; display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 20px; border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface);
  transition: border-color .2s, box-shadow .2s; }
.fd-try-box:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ba-color-primary) 30%, transparent); }
.fd-try-box input { flex: 1; min-width: 0; padding: 10px 0; border: 0; background: transparent; font: 17px/1.3 var(--font-headings); color: var(--color-text); outline: none; }
.fd-try-box button { width: 40px; height: 40px; }
.fd-try-box button svg { width: 18px; height: 18px; }
.fd-try-pills { margin-top: var(--space-4); }
.fd-try-fast { margin: var(--space-5) 0 0; font: 15px/1.4 var(--font-headings); color: var(--color-text-2); }
.fd-try-fast b { font-size: 17px; color: var(--color-accent-strong); }
.fd-try-fast span { color: var(--color-text-3); }

/* The live answer in the phone (front.js): the question, a reading line, the verdict, the card, the experts. */
.fd-phone.is-live .fd-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.fd-phone.is-live .fd-scroll-in { animation: none !important; transform: none !important; }
.fd-live-verdict { margin: 0; font: var(--weight-semibold) 15px/1.4 var(--font-headings); }
.fd-live-reading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12px; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-live-reading::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ba-color-primary); animation: fd-pulse 1.1s ease-in-out infinite; }
@keyframes fd-pulse { 50% { opacity: .25; transform: scale(.7); } }
.fd-lcard { display: grid; gap: 8px; padding: 12px; border: 1px solid color-mix(in srgb, currentColor 14%, transparent); border-radius: 14px; }
.fd-lcard-t { margin: 0; font: var(--weight-semibold) 13px/1.3 var(--font-headings); }
.fd-lstats { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.fd-lstat { padding: 8px 9px; border-radius: 10px; background: var(--fd-screen-tile); }
.fd-lstat.is-accent { box-shadow: inset 0 0 0 1px var(--ba-color-primary); }
.fd-lstat small { display: block; font: var(--weight-semibold) 9.5px/1.2 var(--font-headings); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-lstat b { display: block; margin-top: 2px; font: var(--weight-semibold) 17px/1.15 var(--font-mono); }
.fd-lstat span { display: block; font-size: 11px; color: color-mix(in srgb, currentColor 65%, transparent); }
.fd-lcard-text { margin: 0; font-size: 12.5px; }
.fd-lbadge { margin: 0; font-size: 11.5px; color: color-mix(in srgb, currentColor 65%, transparent); }
.fd-lbadge i { font-style: normal; font-weight: var(--weight-semibold); color: var(--ba-color-green-500); }
:root[data-theme="light"] .fd-lbadge i { color: var(--ba-color-primary-strong); }
.fd-llinks { margin: 0; font-size: 11.5px; }
.fd-llinks a, .fd-lexperts a b { color: var(--ba-color-green-500); }
:root[data-theme="light"] .fd-llinks a, :root[data-theme="light"] .fd-lexperts a b { color: var(--ba-color-primary-strong); }
.fd-lsub { margin: 4px 0 0; font: var(--weight-semibold) 10px/1.2 var(--font-headings); letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-lexperts { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fd-lexperts a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; background: var(--fd-screen-tile); color: inherit; text-decoration: none; font-size: 12px; line-height: 1.3; }
.fd-lexperts small { font-size: 10.5px; color: color-mix(in srgb, currentColor 60%, transparent); }
.fd-lmore { margin: 2px 0 0; font-size: 12px; }
.fd-live > * { animation: fd-land .45s var(--fd-ease-out) both; }
@keyframes fd-land { from { opacity: 0; transform: translateY(8px); } }

/* From 1100 px: rail | steps | the pinned stage. L2.1: one composition, larger: the laptop (ChatGPT) about 60% of the
   content width and the phone (Claude) about 22%, the phone in front of the laptop's lower-right corner, over its bezel
   and base only, never its screen (the lid's screen ends at 72.4% of the stage; the phone starts at 73%). The stage runs
   into the page's right margin where there is one, so the steps keep their column. */
@media (min-width: 1100px) {
  .fd-dv { grid-template-columns: 28px minmax(300px, 320px) minmax(0, 1fr); column-gap: var(--space-8); row-gap: 0; }
  .fd-story, .fd-try { grid-column: 2; order: 0; }
  .fd-story { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; }
  .fd-story:first-of-type { min-height: 60vh; justify-content: flex-start; padding-top: 12vh; }
  .fd-try { padding: 8vh 0 18vh; }
  .fd-dv-rail { display: block; grid-column: 1; grid-row: 1 / span 5; }
  .fd-dv-rail-in { position: sticky; top: calc(50vh - 18vh); height: 36vh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; }
  .fd-dv-rail-in::before, .fd-dv-fill { content: ''; position: absolute; top: 6px; bottom: 6px; left: 50%; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--fd-hair); }
  .fd-dv-fill { background: var(--ba-color-primary); transform-origin: top; transform: scaleY(var(--dv-p, 0)); transition: transform .5s var(--fd-ease); }
  .fd-dv-rail-in b { position: relative; width: 12px; height: 12px; border-radius: 50%; background: var(--color-bg); box-shadow: inset 0 0 0 2px var(--color-border-strong); transition: box-shadow .3s, background .3s; }
  .fd-dv[data-at="1"] .fd-dv-rail-in b:nth-of-type(-n+1), .fd-dv[data-at="2"] .fd-dv-rail-in b:nth-of-type(-n+2), .fd-dv[data-at="3"] .fd-dv-rail-in b:nth-of-type(-n+3), .fd-dv[data-at="4"] .fd-dv-rail-in b {
    background: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent); }
  .fd-dv[data-at="1"] { --dv-p: 0; } .fd-dv[data-at="2"] { --dv-p: .333; } .fd-dv[data-at="3"] { --dv-p: .667; } .fd-dv[data-at="4"] { --dv-p: 1; }
  .fd-dv-stage { display: block; grid-column: 3; grid-row: 1 / span 5; position: sticky; top: calc(var(--fd-bar-h) + 3vh); height: calc(100vh - var(--fd-bar-h) - 6vh); min-height: 620px; max-height: 860px;
    margin-right: calc(-1 * max(0px, (100vw - var(--front-max)) / 2 - var(--space-6))); perspective: 1800px; container-type: inline-size;
    --fd-phone-w: clamp(220px, 40cqi, 330px); --fd-lap-in: max(44px, 5cqi); }
  /* P1.1: the phone is sized first (326 px at 1440, so the card's figures in its recording read at 11 px), the laptop takes
     the rest. The laptop starts 44 px in, or 5% of the stage (its base overhangs its lid by 6.5% and its turn brings its
     left edge forward), so it never reaches the steps; its lid ends 4 px under the phone's edge, over the bezel, never the
     screen. From 1100 to
     1350 both scale down with the stage rather than cover the text. */
  .fd-laptop { position: absolute; left: var(--fd-lap-in); bottom: 14%; width: calc(100cqi - var(--fd-phone-w) - var(--fd-lap-in) + 4px); transform-origin: 100% 60%; }
  .fd-phone { --pw: var(--fd-phone-w); position: absolute; right: 0; bottom: calc(14% - 36px); z-index: 2; transform-origin: 0% 60%; }
  .fd-dv-stage .fd-dv-cap { position: absolute; left: 0; right: 0; }
  .fd-laptop .fd-dv-cap { top: 100%; margin-top: calc(var(--space-4) + 13px); }
}
@media (max-width: 768px) {
  body.front .fd-story h3 { font-size: 26px; line-height: 30px; }
  .fd-dv { gap: var(--space-8); }
}
/* Motion, from 1100 px: the steps dim until they're the one in view; the devices turn and their screens scroll with the
   section (a view timeline on the grid; front.js where there isn't one). Below 1100 px each screen scrolls as its own
   device passes. Only transform moves. */
@media (min-width: 1100px) {
  .js-motion .fd-story { opacity: .28; transition: opacity .45s var(--fd-ease); }
  .js-motion .fd-story.is-current { opacity: 1; }
  .js-motion .fd-phone { transform: rotateY(-8deg) rotateX(2deg); }
  .js-motion .fd-laptop { transform: rotateY(6deg) rotateX(2deg); }
}
@supports (animation-timeline: view()) {
  .js-motion .fd-dv { view-timeline: --fd-device block; }
  .js-motion .fd-phone, .js-motion .fd-laptop { view-timeline: --fd-own block; }
  .js-motion .fd-scroll-in { animation: fd-read linear both; animation-timeline: --fd-own; animation-range: cover 30% cover 80%; }
  @media (min-width: 1100px) {
    .js-motion .fd-phone { animation: fd-phone-turn linear both; animation-timeline: --fd-device; animation-range: contain 0% contain 100%; }
    .js-motion .fd-laptop { animation: fd-laptop-turn linear both; animation-timeline: --fd-device; animation-range: contain 0% contain 100%; }
    .js-motion .fd-scroll-in { animation-timeline: --fd-device; animation-range: contain 8% contain 70%; }
  }
}
/* L2.1: each turns about the edge where they meet (the laptop its right, the phone its left), so the overlap holds. */
@keyframes fd-phone-turn { from { transform: rotateY(-8deg) rotateX(2deg); } to { transform: rotateY(3deg) rotateX(-1deg); } }
@keyframes fd-laptop-turn { from { transform: rotateY(6deg) rotateX(2deg); } to { transform: rotateY(-2deg) rotateX(-1deg); } }
@keyframes fd-read { from { transform: none; } to { transform: translateY(calc(-1 * var(--fd-read, 0px))); } }

/* ---- L1.3: the highlights as five vertical scenes (src/front/highlights.ts) -------------------------------------------
   Each scene is edge to edge (L2.3: its content's height plus even padding, no empty band above), on its own deep tint of her palette with a soft glow and a fine dot texture
   (green for offers, slate for points, a warm neutral for promotions, green into slate for coverage, slate for readers;
   pale tints of the same on the light theme). The words sit on one side and the visual on the other, alternating, from
   1100 px; stacked below. Each scene's motion starts when it arrives (.is-active, front.js) and ends on the served
   state, which no script, reduced motion and ?still=1 see. Only transform, opacity and stroke offsets move. */
.fd-hl-sec { padding-bottom: 0; }
.fd-hl-sec > .fd-wrap h2 { margin-bottom: var(--space-10); }
.fd-scene { --sc-a: color-mix(in srgb, var(--ba-color-green-900) 55%, var(--ba-color-green-950)); --sc-b: var(--ba-color-slate-950); --sc-glow: var(--ba-color-primary); --sc-text: var(--ba-color-primary-white);
  --sc-text-2: var(--ba-color-slate-100); --sc-text-3: var(--ba-color-slate-300); --sc-tile: color-mix(in srgb, var(--ba-color-primary-white) 7%, transparent);
  --sc-line: color-mix(in srgb, var(--ba-color-primary-white) 12%, transparent);
  position: relative; display: flex; align-items: center; padding: clamp(72px, 11vh, 120px) 0; overflow: hidden; color: var(--sc-text); color-scheme: dark;
  background: radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--sc-glow) 18%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ba-color-primary-white) 5%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--sc-a), var(--sc-b)); }
.fd-scene-points { --sc-a: var(--ba-color-slate-800); --sc-b: var(--ba-color-slate-950); --sc-glow: var(--ba-color-info-500); }
.fd-scene-promos { --sc-a: var(--ba-color-neutral-800); --sc-b: var(--ba-color-neutral-950); --sc-glow: var(--ba-color-warning-500); }
.fd-scene-cover { --sc-a: var(--ba-color-green-950); --sc-b: var(--ba-color-slate-950); --sc-glow: var(--ba-color-green-500); }
.fd-scene-readers { --sc-a: var(--ba-color-slate-900); --sc-b: var(--ba-color-primary-black); --sc-glow: var(--ba-color-primary); }
:root[data-theme="light"] .fd-scene { --sc-text: var(--ba-color-slate-950); --sc-text-2: var(--ba-color-slate-800); --sc-text-3: var(--ba-color-slate-600);
  --sc-tile: color-mix(in srgb, var(--ba-color-primary-white) 70%, transparent); --sc-line: color-mix(in srgb, var(--ba-color-slate-900) 12%, transparent); color-scheme: light;
  background: radial-gradient(60% 70% at 78% 30%, color-mix(in srgb, var(--sc-glow) 14%, transparent), transparent 70%),
    radial-gradient(color-mix(in srgb, var(--ba-color-slate-900) 6%, transparent) 1px, transparent 1.4px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--sc-a), var(--sc-b)); }
:root[data-theme="light"] .fd-scene-cards { --sc-a: var(--ba-color-green-50); --sc-b: var(--ba-color-green-100); }
:root[data-theme="light"] .fd-scene-points { --sc-a: var(--ba-color-slate-50); --sc-b: var(--ba-color-slate-100); }
:root[data-theme="light"] .fd-scene-promos { --sc-a: var(--ba-color-neutral-50); --sc-b: var(--ba-color-warning-50); }
:root[data-theme="light"] .fd-scene-cover { --sc-a: var(--ba-color-green-50); --sc-b: var(--ba-color-slate-50); }
:root[data-theme="light"] .fd-scene-readers { --sc-a: var(--ba-color-primary-white); --sc-b: var(--ba-color-slate-100); }
.fd-scene-in { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: center; }
.fd-scene-n { display: block; margin-bottom: var(--space-4); font: var(--weight-semibold) 14px/1 var(--font-mono); letter-spacing: .1em; color: var(--sc-glow); }
:root[data-theme="light"] .fd-scene-n { color: var(--ba-color-primary-strong); }
body.front .fd-scene h3 { margin: 0 0 var(--space-4); font-size: 48px; line-height: 52px; letter-spacing: -0.03em; color: var(--sc-text); }
.fd-scene-line { max-width: 26em; margin: 0; font: 21px/30px var(--font-headings); color: var(--sc-text-2); }
.fd-scene-note { margin: var(--space-6) 0 0; font: 13px/1.5 var(--font-headings); color: var(--sc-text-3); }
.fd-scene-note a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
.fd-scene-vis { display: grid; place-items: center; min-width: 0; }
.fd-scene .fd-hl-missing { color: var(--sc-text-3); font-size: var(--text-md); }
@media (min-width: 1100px) {
  .fd-scene-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-16); }
  .fd-scene:nth-of-type(even) .fd-scene-copy { order: 2; }
}
@media (max-width: 768px) {
  .fd-scene { min-height: 0; padding: var(--space-12) 0; }
  body.front .fd-scene h3 { font-size: 32px; line-height: 36px; }
  .fd-scene-line { font-size: 18px; line-height: 26px; }
}
/* Arrival: the words rise in; each visual has its own entrance below. */
.js-motion .fd-scene .fd-scene-copy > * { opacity: 0; transform: translateY(16px); transition: opacity .7s var(--fd-ease-out), transform .7s var(--fd-ease-out); }
.js-motion .fd-scene.is-active .fd-scene-copy > * { opacity: 1; transform: none; }
.js-motion .fd-scene.is-active .fd-scene-copy > :nth-child(2) { transition-delay: .08s; } .js-motion .fd-scene.is-active .fd-scene-copy > :nth-child(3) { transition-delay: .16s; }
.js-motion .fd-scene.is-active .fd-scene-copy > :nth-child(4) { transition-delay: .24s; }

/* 1. Offers: credit-card faces dealt in from a stack in depth, then each turns on its hinge to show its check. */
.fd-ocards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); width: 100%; max-width: 640px; margin: 0; padding: 0; list-style: none; perspective: 1100px; }
.fd-ocard { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; aspect-ratio: 1.586; padding: var(--space-5); border-radius: 16px; overflow: hidden;
  color: var(--ba-color-primary-white); background: linear-gradient(135deg, var(--ba-color-green-700), var(--ba-color-green-900) 60%, var(--ba-color-green-950));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-color-primary-white) 14%, transparent), 0 24px 40px -22px color-mix(in srgb, var(--ba-color-primary-black) 70%, transparent); transform-style: preserve-3d; }
.fd-ocard:nth-child(2) { background: linear-gradient(135deg, var(--ba-color-slate-600), var(--ba-color-slate-800) 60%, var(--ba-color-slate-950)); }
.fd-ocard:nth-child(3) { background: linear-gradient(135deg, var(--ba-color-neutral-500), var(--ba-color-neutral-700) 60%, var(--ba-color-neutral-900)); }
.fd-ocard:nth-child(4) { background: linear-gradient(135deg, var(--ba-color-green-500), var(--ba-color-green-800) 65%, var(--ba-color-green-950)); }
.fd-ocard::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, color-mix(in srgb, var(--ba-color-primary-white) 16%, transparent), transparent 40%); }
.fd-ocard-chip { position: absolute; top: 18%; left: var(--space-5); width: 34px; height: 26px; border-radius: 5px; background: linear-gradient(135deg, var(--ba-color-warning-200), var(--ba-color-warning-500));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ba-color-primary-black) 25%, transparent); }
.fd-ocard-name { font: var(--weight-semibold) 13px/1.25 var(--font-headings); color: color-mix(in srgb, var(--ba-color-primary-white) 80%, transparent); }
.fd-ocard b { font: var(--weight-semibold) 24px/1.1 var(--font-headings); letter-spacing: -0.01em; }
.fd-ocard-check { font: var(--weight-semibold) 12px/1.4 var(--font-headings); color: var(--ba-color-green-200); }
.fd-ocard-check i { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-right: 4px; border-radius: 50%; background: var(--ba-color-primary); color: var(--ba-color-primary-white); font-style: normal; font-size: 10px; }
/* L2.3: one motion per card, so nothing overrides it: dealt in from the stack, turned 50° on its hinge (with the 30° tilt it
   starts at, 56° from face-on at most, so never edge-on), then swinging face-on, where every card ends. */
.js-motion .fd-scene.is-active .fd-ocard { animation: fd-deal 1.5s var(--fd-ease-out) both; animation-delay: calc(var(--i) * 160ms); }
.js-motion .fd-scene:not(.is-active) .fd-ocard { opacity: 0; }
.js-motion .fd-scene.is-active .fd-ocard-check { animation: fd-pop .4s var(--fd-ease-out) both; animation-delay: calc(1.5s + var(--i) * 160ms); }
@keyframes fd-deal { 0% { opacity: 0; transform: translate3d(var(--dx, 0), var(--dy, 0), -320px) rotateX(30deg) rotateY(50deg) rotateZ(calc((var(--i) - 1.5) * 7deg)); }
  55% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(0) rotateY(50deg) rotateZ(0); } 100% { opacity: 1; transform: none; } }
@keyframes fd-in { from { opacity: 0; } }

/* 2. The gauge, large: it sweeps to the value, the floor drops in, the figure counts up (front.js), and every 7 s the
   next program takes its place (the three are stacked; only .is-on shows). */
.fd-gauges { position: relative; display: grid; width: min(560px, 100%); }
.fd-gauge-one { grid-area: 1 / 1; margin: 0; transition: opacity .6s var(--fd-ease); }
.fd-gauge-one:not(.is-on) { opacity: 0; visibility: hidden; }
.fd-gauge { width: 100%; overflow: visible; }
.fd-gauge-track, .fd-gauge-range, .fd-gauge-val { fill: none; stroke-width: 22; }
.fd-gauge-track { stroke: var(--sc-line, color-mix(in srgb, var(--color-text) 8%, transparent)); stroke-linecap: round; }
.fd-gauge-range { stroke: color-mix(in srgb, var(--ba-color-primary) 30%, transparent); stroke-width: 36; }
.fd-gauge-val { stroke: var(--ba-color-primary); stroke-linecap: round; }
.fd-gauge-needle { transform-origin: 200px 200px; transform: rotate(var(--deg)); }
.fd-gauge-needle line { stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
.fd-gauge-needle circle { fill: currentColor; }
.fd-gauge-floor line { stroke: var(--ba-color-warning-400); stroke-width: 4; stroke-linecap: round; }
.fd-gauge-floor text { font: var(--weight-semibold) 14px var(--font-headings); fill: currentColor; text-anchor: middle; }
.fd-gauge-fig { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: calc(-1 * var(--space-12)); text-align: center; }
.fd-gauge-fig b { font: var(--weight-semibold) 72px/1 var(--font-headings); letter-spacing: -0.03em; }
.fd-gauge-fig span { font: 16px/1.4 var(--font-headings); color: var(--sc-text-2, var(--color-text-2)); }
.fd-gauge-fig small { font: 13px/1.4 var(--font-headings); color: var(--sc-text-3, var(--color-text-3)); }
.fd-gauge-dots { display: flex; justify-content: center; gap: 8px; margin-top: var(--space-5); }
.fd-gauge-dots i { width: 7px; height: 7px; border-radius: 4px; background: currentColor; opacity: .3; transition: width .4s var(--fd-ease-out), opacity .4s; }
.fd-gauge-dots i.is-on { width: 22px; opacity: .9; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-val { stroke-dasharray: 1 1; animation: fd-gauge-draw 1.5s var(--fd-ease) both .15s; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-needle { animation: fd-needle 1.5s var(--fd-ease) both .15s; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-range { animation: fd-in .8s var(--fd-ease) backwards .5s; }
.js-motion .fd-scene.is-active .fd-gauge-one.is-on .fd-gauge-floor { animation: fd-drop .7s cubic-bezier(.34, 1.56, .64, 1) both 1.1s; }
.js-motion .fd-scene:not(.is-active) .fd-gauge-val { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@keyframes fd-gauge-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fd-needle { from { transform: rotate(0deg); } to { transform: rotate(var(--deg)); } }
@keyframes fd-drop { from { opacity: 0; transform: translateY(-28px); } }

/* 3. The countdown: the ring fills as the scene is scrolled (a view timeline; on arrival where there isn't one), the days
   tick down to today's count (front.js), and a strip shows the next promotions' end dates, today at its left. */
.fd-scene-promos .fd-scene-vis { display: flex; flex-direction: column; align-items: center; }
.fd-count { position: relative; width: 260px; aspect-ratio: 1; }
.fd-count svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.fd-count-track, .fd-count-ring { fill: none; stroke-width: 12; }
.fd-count-track { stroke: var(--sc-line, color-mix(in srgb, var(--color-text) 8%, transparent)); }
.fd-count-ring { stroke: var(--ba-color-warning-400); stroke-linecap: round; stroke-dasharray: var(--k) 1; }
:root[data-theme="light"] .fd-count-ring { stroke: var(--ba-color-warning-600); }
.fd-count-n { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 0; }
.fd-count-n b { font: var(--weight-semibold) 88px/1 var(--font-headings); letter-spacing: -0.03em; }
.fd-count-n span { font: 15px/1.4 var(--font-headings); color: var(--sc-text-3, var(--color-text-3)); }
.fd-count-what { max-width: 30em; margin: var(--space-5) auto 0; text-align: center; font: 17px/1.5 var(--font-headings); color: var(--sc-text-2, var(--color-text-2)); }
.fd-count-what b { color: var(--sc-text, var(--color-text)); }
.fd-cal { width: min(620px, 100%); margin-top: var(--space-10); }
.fd-cal-h { margin: 0 0 var(--space-3); font: var(--weight-semibold) 12px/1 var(--font-headings); letter-spacing: .08em; text-transform: uppercase; color: var(--sc-text-3); }
.fd-cal-strip { position: relative; height: 56px; margin: 44px 56px 0 0; padding: 0; list-style: none; border-top: 2px solid var(--sc-line); }
.fd-cal-strip > li { position: absolute; top: -7px; left: calc(var(--x, 0) * 100%); display: grid; justify-items: start; gap: 2px; font: 12px/1.25 var(--font-headings); white-space: nowrap; }
.fd-cal-strip > li i { width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: var(--sc-b, var(--color-bg)); box-shadow: inset 0 0 0 2px var(--ba-color-warning-400); }
.fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) { top: auto; bottom: 100%; margin-bottom: -7px; align-content: end; }
.fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) i { order: 3; }
.fd-cal-strip b { margin: 4px 0 0 -6px; font-weight: var(--weight-semibold); color: var(--sc-text); }
.fd-cal-strip span { margin-left: -6px; color: var(--sc-text-3); }
.fd-cal-mark.is-first i { background: var(--ba-color-warning-400); box-shadow: 0 0 0 5px color-mix(in srgb, var(--ba-color-warning-400) 25%, transparent); }
.fd-cal-today span { margin: 8px 0 0 -14px; font-weight: var(--weight-semibold); color: var(--sc-text-2); }
.fd-cal-strip > li.is-late { translate: -100% 0; justify-items: end; text-align: right; }
.fd-cal-strip > li.is-late :is(i, b, span) { margin-left: 0; margin-right: -6px; }
@media (max-width: 768px) {
  /* Phones: the strip becomes a short list, each end date on its own line. */
  .fd-cal-strip { height: auto; margin: 0; border-top: 0; display: grid; gap: 10px; }
  .fd-cal-strip > li, .fd-cal-strip > li.is-late, .fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) { position: static; translate: none; display: grid; grid-template-columns: 12px auto 1fr; align-items: center;
    column-gap: 10px; margin: 0; text-align: left; }
  .fd-cal-strip > li :is(i, b, span), .fd-cal-strip > li.is-late :is(i, b, span), .fd-cal-strip > li:nth-child(odd):not(.fd-cal-today) i { order: 0; margin: 0; }
  .fd-cal-strip span { justify-self: end; }
  .fd-cal-today { display: none !important; }
}
.js-motion .fd-scene.is-active .fd-cal-mark { animation: fd-pop .45s var(--fd-ease-out) both; animation-delay: calc(.5s + var(--i) * 140ms); }
.js-motion .fd-scene:not(.is-active) .fd-cal-mark { opacity: 0; }
@supports (animation-timeline: view()) {
  .js-motion .fd-count-ring { animation: fd-ring linear both; animation-timeline: view(); animation-range: cover 15% cover 55%; }
}
@supports not (animation-timeline: view()) {
  .js-motion .fd-scene.is-active .fd-count-ring { animation: fd-ring 1.8s var(--fd-ease) both .2s; }
}
@keyframes fd-ring { from { stroke-dasharray: 0 1; } }
/* 4. The constellation (shared with D4.9: its picture, legend and details). */
.fd-bubbles { width: 100%; height: auto; overflow: visible; }
.fd-bub circle { fill: var(--bub); fill-opacity: .82; stroke: var(--color-bg); stroke-width: 2; transition: fill-opacity .2s var(--fd-ease-out), transform .2s var(--fd-ease-out); transform-box: fill-box; transform-origin: center; }
.fd-bub text { font: var(--weight-semibold) 15px var(--font-headings); fill: var(--ba-color-primary-white); text-anchor: middle; pointer-events: none; }
.fd-bub { cursor: pointer; outline: none; }
.fd-bub:hover circle, .fd-bub:focus-visible circle, .fd-bub.is-on circle { fill-opacity: 1; transform: scale(1.06); }
.fd-bub:focus-visible circle { stroke: var(--color-focus); stroke-width: 3; }
.fd-t-cards { --bub: var(--ba-color-primary); } .fd-t-deals { --bub: var(--ba-color-green-500); } .fd-t-hotels { --bub: var(--ba-color-green-800); }
.fd-t-flights { --bub: var(--ba-color-slate-500); } .fd-t-trips { --bub: var(--ba-color-green-300); } .fd-t-news { --bub: var(--ba-color-slate-700); }
:root[data-theme="dark"] .fd-t-news { --bub: var(--ba-color-slate-400); } :root[data-theme="dark"] .fd-t-hotels { --bub: var(--ba-color-green-700); }
.fd-constellation-compact .fd-bub-list, .fd-constellation-compact .fd-lone { display: none; }
/* 4. Who covered what: the week's bubbles, large. They settle in from scattered, newest last, with a spring, then drift
   a few pixels each on their own slow loop; a tap says who had the story first (front.js fills the line under them). */
.fd-scene-cover .fd-constellation { width: 100%; }
.fd-scene-cover .fd-bub circle { stroke: var(--sc-b); }
.fd-bub-say { min-height: 3em; margin: var(--space-3) 0 0; text-align: center; font: 15px/1.45 var(--font-headings); color: var(--sc-text-2); }
.fd-bub-say b { color: var(--sc-text); }
.fd-bub-say a { color: inherit; }
.js-motion :is(.fd-scene-cover, .fd-cov-live) .fd-bub { animation: fd-bub-float var(--fd, 7s) ease-in-out infinite alternate; animation-delay: calc(var(--i) * -0.9s); }
/* L2.5: a bubble's count settles with its circle; before, the counts stood alone in the empty picture until the circles came. */
.fd-bub text { transform-box: fill-box; transform-origin: center; }
.js-motion :is(.fd-scene-cover, .fd-cov-live):not(.is-active) .fd-bub :is(circle, text) { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -40px)) scale(.3); }
.js-motion :is(.fd-scene-cover, .fd-cov-live).is-active .fd-bub :is(circle, text) { animation: fd-settle .9s cubic-bezier(.34, 1.4, .64, 1) backwards; animation-delay: calc(var(--o, var(--i)) * 70ms); }
/* L1.6: a story that arrived since the reader's last visit pulses once, after the settle (front.js marks it .is-new). */
.js-motion .fd-cov-live.is-active .fd-bub.is-new circle { animation: fd-settle .9s cubic-bezier(.34, 1.4, .64, 1) backwards, fd-new 1.2s var(--fd-ease-out) calc(var(--o, var(--i)) * 70ms + 1.1s) 1; }
@keyframes fd-new { 0% { stroke: var(--ba-color-primary); stroke-width: 2; } 40% { stroke: var(--ba-color-green-300); stroke-width: 10; } 100% { stroke-width: 2; } }
.fd-cov-tick { display: inline-flex; align-items: center; gap: 8px; margin: calc(-1 * var(--space-2)) 0 var(--space-6); font: var(--weight-semibold) 13px/1 var(--font-headings); color: var(--color-text-3); }
.fd-cov-tick i { width: 8px; height: 8px; border-radius: 50%; background: var(--ba-color-primary); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ba-color-primary) 50%, transparent); }
.js-motion .fd-cov-tick i { animation: fd-tick-pulse 2.4s var(--fd-ease-out) infinite; }
@keyframes fd-tick-pulse { 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.fd-lone-h span { margin-left: var(--space-2); font-size: 15px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-3); }
.fd-bub-meta b { font-weight: var(--weight-semibold); color: var(--color-accent-strong); }
@keyframes fd-settle { from { opacity: 0; transform: translate(var(--sx, 0), var(--sy, -40px)) scale(.3); } }
@keyframes fd-bub-float { from { transform: translate(0, 0); } to { transform: translate(var(--fx, 4px), var(--fy, -5px)); } }

/* 5. Readers, hour by hour: the ratio line draws itself as the scene arrives, then the peak and its label. */
.fd-readers { width: 100%; height: auto; overflow: visible; }
.fd-readers-base { stroke: var(--sc-text-3, var(--color-text-3)); stroke-dasharray: 4 5; stroke-width: 1; }
.fd-readers-line { fill: none; stroke: var(--ba-color-primary); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.fd-readers-area { fill: color-mix(in srgb, var(--ba-color-primary) 14%, transparent); }
.fd-readers-peak { fill: var(--ba-color-primary); stroke: var(--sc-b, var(--color-bg)); stroke-width: 3; }
.fd-readers-t { font: var(--weight-semibold) 14px var(--font-headings); fill: var(--sc-text-2, var(--color-text-2)); text-anchor: end; }
.fd-readers-pk { text-anchor: start; fill: var(--sc-text, var(--color-text)); }
.fd-readers-pk.is-left { text-anchor: end; }
.fd-readers-axis { stroke: var(--sc-line, var(--fd-hair)); stroke-width: 1; }
.fd-readers-tick { stroke: var(--sc-text-3, var(--color-text-3)); stroke-width: 1; }
.fd-readers-ax { font: 13px var(--font-headings); fill: var(--sc-text-3, var(--color-text-3)); text-anchor: middle; }
.js-motion .fd-scene.is-active .fd-readers-line { stroke-dasharray: 1 1; animation: fd-gauge-draw 2.4s var(--fd-ease) both .2s; }
.js-motion .fd-scene:not(.is-active) .fd-readers-line { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.js-motion .fd-scene:not(.is-active) :is(.fd-readers-area, .fd-readers-peak, .fd-readers-pk) { opacity: 0; }
.js-motion .fd-scene.is-active :is(.fd-readers-area, .fd-readers-peak, .fd-readers-pk) { animation: fd-in .6s var(--fd-ease) backwards 2.2s; }
@media (max-width: 768px) {
  .fd-ocards { gap: var(--space-3); }
  .fd-ocard { aspect-ratio: auto; min-height: 118px; padding: 34px var(--space-3) var(--space-3); border-radius: 12px; }
  .fd-ocard-chip { top: 10px; left: auto; right: 10px; width: 22px; height: 16px; border-radius: 4px; }
  .fd-ocard b { font-size: 17px; } .fd-ocard-name { font-size: 11px; } .fd-ocard-check { font-size: 10.5px; }
  .fd-gauge-fig b { font-size: 52px; }
  .fd-count { width: 200px; } .fd-count-n b { font-size: 68px; }
}

/* ---- Sean's pitch (D4), E1.4: "Who the experts are": the countries the network's experts write from, then every blog
   by name. Beside the countries (west to east from the United States, G3.2; each opening to its blogs) sits the globe, on the stage, with motion from
   769 px; otherwise a 2D map of the same countries, filled in her green, with their counts (on phones the one-blog
   countries' counts are left to the list, where Europe's would overlap). The strip below drifts: two rows of name chips,
   each sideways forever (a duplicate list makes the loop seamless; transform only), the second the other way, paused
   while pointed at or focused. Without motion, one wrapped list. */
.fd-ex-grid { display: grid; gap: var(--space-10); align-items: start; }
@media (min-width: 769px) { .fd-ex-grid { grid-template-columns: 1fr 1fr; gap: var(--space-12); } }
.fd-experts h2 { margin-bottom: var(--space-4); }
.fd-experts .fd-lede { max-width: 40em; }
.fd-map { display: block; width: 100%; height: auto; }
.fd-map-land { fill: var(--color-text-3); opacity: .16; }
.fd-map-countries path { fill: var(--ba-color-green-600); stroke: var(--color-bg); stroke-width: .8; }
:root[data-theme="dark"] .fd-map-countries path { fill: var(--ba-color-green-500); }
.fd-map-lead { stroke: var(--color-text-3); stroke-width: 1; opacity: .7; }
.fd-map-count circle { r: 20px; fill: var(--color-surface); stroke: var(--ba-color-primary); stroke-width: 1.5; }
.fd-map-count text { font: var(--weight-semibold) 21px var(--font-headings); fill: var(--color-text); text-anchor: middle; dominant-baseline: central; }
@media (max-width: 768px) {
  .fd-map-count circle { r: 25px; stroke-width: 2.5; } .fd-map-count text { font-size: 28px; } .fd-map-lead { stroke-width: 2; }
  .fd-map-one { display: none; }
}
.fd-cn-list { margin: var(--space-8) 0 var(--space-4); padding: 0; list-style: none; border-top: 1px solid var(--fd-hair, var(--color-border)); }
.fd-cn { border-bottom: 1px solid var(--fd-hair, var(--color-border)); }
.fd-cn summary { display: flex; align-items: baseline; gap: var(--space-3); padding: 16px 4px; cursor: pointer; list-style: none; color: var(--color-text-2);
  transition: color .2s var(--fd-ease-out); }
.fd-cn summary::-webkit-details-marker { display: none; }
.fd-cn summary b { font: var(--weight-semibold) 21px/1.25 var(--font-headings); letter-spacing: -0.01em; }
.fd-cn summary span { margin-left: auto; font: 15px/1.2 var(--font-headings); color: var(--color-text-3); }
.fd-cn summary::after { content: '+'; width: 1em; font: 20px/1 var(--font-headings); color: var(--color-text-3); text-align: center; }
.fd-cn details[open] summary::after { content: '−'; }
.fd-cn summary:hover, .fd-cn details[open] summary, .fd-cn.is-active summary { color: var(--color-text); }
.fd-cn.is-active summary b { color: var(--color-accent-strong); }
.fd-cn summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--ba-border-radius-md); }
.fd-cn-blogs { columns: 2 12em; gap: var(--space-6); margin: 0; padding: 0 4px var(--space-5); list-style: none; }
.fd-cn-blogs li { break-inside: avoid; padding: 3px 0; }
.fd-cn-blogs a { font: 15px/1.4 var(--font-headings); color: var(--color-text-2); text-decoration: none; }
.fd-cn-blogs a:hover { color: var(--color-accent-strong); text-decoration: underline; }
@media (min-width: 769px) {
  :root:not(.js-motion) .fd-ex-map { position: sticky; top: calc(var(--fd-bar-h) + var(--space-8)); }
  /* With motion the globe is drawn in the left half (the stage); the map keeps its box, which globe.js measures. The
     section ends 40vh after the list, so its last country can reach the middle of the screen. */
  .js-motion .fd-ex-map { position: sticky; top: 10vh; height: 80vh; }
  .js-motion .fd-ex-map .fd-map { visibility: hidden; }
  .js-motion .fd-experts { padding-bottom: 40vh; }
}
.fd-experts-strip { padding: 0 0 calc(var(--space-10) * 2); }
.fd-ex-rows { display: grid; gap: var(--space-3); margin: var(--space-10) 0 var(--space-6); }
.fd-ex-row { display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent); }
.fd-ex-list { display: flex; flex: none; gap: var(--space-3); margin: 0; padding: 0 var(--space-3) 0 0; list-style: none; }
.fd-ex-list a { display: flex; align-items: baseline; gap: var(--space-2); padding: 12px 20px; border-radius: var(--radius-full); background: var(--fd-tile); color: var(--color-text); text-decoration: none; white-space: nowrap;
  transition: background-color .18s var(--fd-ease-out); }
.fd-ex-list a:hover { background: var(--color-accent-subtle); }
.fd-ex-list b { font: var(--weight-semibold) 17px/1.2 var(--font-headings); }
.fd-ex-list span { font: 14px/1.2 var(--font-headings); color: var(--color-text-3); }
.fd-ex-note { margin: 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
.fd-ex-copy { display: none; }
:root:not(.js-motion) .fd-ex-rows { max-width: var(--front-max); margin-left: auto; margin-right: auto; padding: 0 var(--space-5); }
:root:not(.js-motion) .fd-ex-row { -webkit-mask-image: none; mask-image: none; }
:root:not(.js-motion) .fd-ex-list { flex-wrap: wrap; flex: 1; }
.js-motion .fd-ex-copy { display: flex; }
.js-motion .fd-ex-list { animation: fd-drift 90s linear infinite; }
.js-motion .fd-ex-right .fd-ex-list { animation-direction: reverse; animation-duration: 110s; }
.js-motion .fd-ex-row:is(:hover, :focus-within) .fd-ex-list { animation-play-state: paused; }
@keyframes fd-drift { to { transform: translateX(-100%); } }
@media (max-width: 768px) { .fd-ex-list a { padding: 10px 16px; } .fd-ex-list b { font-size: 15px; } }
/* Without motion the strip is a wrapped list of the 30 most active blogs (the note links every blog). */
:root:not(.js-motion) .fd-ex-right { display: none; }
:root:not(.js-motion) .fd-ex-left .fd-ex-list li:nth-child(n+31) { display: none; }
@media (max-width: 768px) { :root:not(.js-motion) .fd-ex-left .fd-ex-list li:nth-child(n+13) { display: none; } }

/* ---- D4.7: how an answer is checked, the second dark band, in Apple's language -----------------------------------
   One line per step, larger pictures: the network as a field of dots (L1.5), the verified badge and the catch, then the
   answer. The pinned sequence and its rail are D3.5's. */
.fd-how { padding: calc(var(--space-16) * 2) 0; }
body.front .fd-how h2 { margin-bottom: var(--space-16); }
body.front .fd-how-copy h3 { font-size: 32px; line-height: 36px; letter-spacing: -0.02em; }
.fd-how-copy p { font: 19px/28px var(--font-headings); color: var(--color-text-2); }
.fd-how-num { background: var(--color-bg); }
.fd-how-vis { border: 0; border-radius: 28px; background: var(--ba-color-slate-900); min-height: 300px; padding: var(--space-10); }
:root[data-theme="dark"] .fd-how-vis { background: var(--ba-color-slate-900); }
:root[data-theme="light"] body.front .fd-how .fd-how-vis { background: var(--ba-color-slate-900); }
.fd-how-q { font-size: 24px; line-height: 1.35; padding: var(--space-4) var(--space-6); background: var(--color-button); color: var(--color-on-accent); border: 0; border-radius: 24px 24px 6px 24px; }
.fd-how-badge { padding: var(--space-4) var(--space-6); background: var(--ba-color-slate-950); box-shadow: 0 0 0 1px var(--ba-color-primary), 0 0 40px -6px color-mix(in srgb, var(--ba-color-primary) 55%, transparent); }
.fd-how-badge b { font-size: 28px; color: var(--ba-color-green-400); }
.fd-how .fd-result { color: var(--color-text); }
.fd-how .fd-stat { background: var(--ba-color-slate-950); }
@media (min-width: 900px) {
  .js-motion .fd-how { padding: 0; }
  .js-motion .fd-how-copy :is(h3, p) { opacity: .3; }
}
@media (max-width: 768px) { .fd-how-vis { padding: var(--space-6); border-radius: 22px; } }

/* L1.5: step 2, the whole network as a field of dots, one per blog, its name on hover; the blogs that wrote about the
   card light up in turn (in the pinned version, as step 2 arrives; stacked, lit). Step 3: the catch, the stated figure
   turning over to the verified one. */
.fd-net { width: 100%; }
.fd-net-field { display: grid; grid-template-columns: repeat(auto-fill, minmax(18px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.fd-net-dot { position: relative; justify-self: center; width: 12px; height: 12px; border-radius: 50%; background: color-mix(in srgb, var(--ba-color-slate-50) 16%, transparent); }
.fd-net-dot.is-cov { background: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent), 0 0 18px color-mix(in srgb, var(--ba-color-primary) 55%, transparent); }
.fd-net-dot:hover { z-index: 2; transform: scale(1.5); }
.fd-net-dot:hover::after { content: attr(data-name); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.667); transform-origin: bottom center;
  padding: 5px 10px; border-radius: 8px; background: var(--ba-color-primary-white); color: var(--ba-color-slate-950); font: var(--weight-semibold) 18px/1.2 var(--font-headings); white-space: nowrap; pointer-events: none; }
.fd-net-key { display: flex; align-items: center; gap: 8px; margin: var(--space-5) 0 0; font: 14px/1.4 var(--font-headings); color: var(--color-text-2); }
.fd-net-key i { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ba-color-primary); }
.fd-how-join { gap: var(--space-6); }
.fd-catch { width: 100%; padding: var(--space-5); border-radius: 18px; background: var(--ba-color-slate-950); box-shadow: inset 0 0 0 1px var(--fd-hair); text-align: center; }
.fd-catch-h { margin: 0; font: var(--weight-semibold) 11px/1.3 var(--font-headings); letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-3); }
.fd-catch-what { margin: var(--space-2) 0 var(--space-3); font: 16px/1.3 var(--font-headings); color: var(--color-text-2); }
.fd-flip { perspective: 600px; }
.fd-flip-card { display: inline-grid; }
.fd-flip-card b { grid-area: 1 / 1; font: var(--weight-semibold) 60px/1 var(--font-headings); letter-spacing: -0.03em; backface-visibility: hidden; }
.fd-flip-from { color: var(--ba-color-danger-400); text-decoration: line-through; text-decoration-thickness: 4px; transform: rotateX(180deg); }
.fd-flip-to { color: var(--ba-color-green-400); }
.fd-catch-was { margin: var(--space-3) 0 0; font: 14px/1.4 var(--font-headings); color: var(--color-text-2); }
@media (min-width: 900px) {
  .js-motion .fd-how .fd-net-dot.is-cov { background: color-mix(in srgb, var(--ba-color-slate-50) 16%, transparent); box-shadow: none; }
  .js-motion .fd-how[data-step="2"] .fd-net-dot.is-cov { animation: fd-dot-on .6s var(--fd-ease-out) both; animation-delay: calc(250ms + var(--k) * 180ms); }
  .js-motion .fd-how:is([data-step="3"], [data-step="4"]) .fd-net-dot.is-cov { background: var(--ba-color-primary); }
  .js-motion .fd-how[data-step="3"] .fd-flip-from { animation: fd-flip-out 1s var(--fd-ease) both .5s; }
  .js-motion .fd-how[data-step="3"] .fd-flip-to { animation: fd-flip-in 1s var(--fd-ease) both .5s; }
}
@keyframes fd-dot-on { from { background: color-mix(in srgb, var(--ba-color-slate-50) 16%, transparent); box-shadow: none; transform: scale(1); }
  45% { transform: scale(1.6); } to { background: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent), 0 0 18px color-mix(in srgb, var(--ba-color-primary) 55%, transparent); transform: none; } }
@keyframes fd-flip-out { from { transform: rotateX(0); } to { transform: rotateX(180deg); } }
@keyframes fd-flip-in { from { transform: rotateX(-180deg); } to { transform: rotateX(0); } }
@media (max-width: 768px) { .fd-net-field { gap: 8px; grid-template-columns: repeat(auto-fill, minmax(14px, 1fr)); } .fd-net-dot { width: 10px; height: 10px; } .fd-flip-card b { font-size: 48px; } }

/* ---- D4.8: Ask, live (src/front/ask-live.ts, front.js) --------------------------------------------------------------
   The field: 64 px tall, fully round, a soft shadow (Apple's search). The answer below it in the order it streams. */
.fd-askl { display: flex; align-items: center; gap: var(--space-3); max-width: 760px; height: 64px; margin: var(--space-8) auto var(--space-5); padding: 0 8px 0 24px;
  border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--fd-hair);
  box-shadow: 0 18px 50px -24px color-mix(in srgb, var(--ba-color-slate-950) 40%, transparent), 0 2px 6px -2px color-mix(in srgb, var(--ba-color-slate-950) 12%, transparent); }
.fd-askl:focus-within { border-color: var(--ba-color-primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ba-color-primary) 22%, transparent), 0 18px 50px -24px color-mix(in srgb, var(--ba-color-slate-950) 40%, transparent); }
.fd-askl-icon { display: grid; color: var(--color-text-3); }
.fd-askl input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font: 19px/1 var(--font-headings); color: var(--color-text); outline: none; }
.fd-askl button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: var(--color-button); color: var(--color-on-accent); cursor: pointer; }
.fd-askl button:hover { background: var(--color-button-hover); }
.fd-askl-pills { justify-content: center; }
.fd-askl-out { max-width: 760px; margin: var(--space-10) auto 0; }
.fd-askl-card { padding: var(--space-8); border-radius: 28px; background: var(--fd-tile); display: grid; gap: var(--space-5); }
:root[data-theme="dark"] .fd-askl-card { background: var(--ba-color-slate-900); }
.fd-askl-q { margin: 0; font: var(--weight-semibold) 15px/1.4 var(--font-headings); color: var(--color-text-3); }
.fd-askl-verdict { margin: 0; font: var(--weight-semibold) 24px/32px var(--font-headings); letter-spacing: -0.01em; color: var(--color-text); }
.fd-askl-h { margin: 0 0 var(--space-2); font: var(--weight-semibold) 13px/1.3 var(--font-headings); letter-spacing: var(--tracking-wide); color: var(--color-accent-strong); }
.fd-askl-verified { display: grid; gap: var(--space-2); }
.fd-askl-verified p { margin: 0; padding: var(--space-3) var(--space-4); border-radius: 14px; background: var(--color-accent-subtle); font: 16px/1.5 var(--font-headings); color: var(--color-text); }
.fd-askl-verified a { font-size: 14px; }
.fd-askl-text { font: 17px/1.6 var(--font); color: var(--color-text-2); }
.fd-askl-text p, .fd-askl-text ul { margin: 0 0 var(--space-3); }
.fd-askl-text .fd-a-head { font-family: var(--font-headings); }
.fd-askl-sources { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-askl-sources a { display: grid; gap: 4px; height: 100%; padding: var(--space-4); border-radius: 16px; background: var(--color-surface); text-decoration: none; color: var(--color-text-3); font: 13px/1.35 var(--font-headings);
  transition: transform .18s var(--fd-ease-out); }
.fd-askl-sources a:hover { transform: translateY(-2px); }
.fd-askl-sources b { color: var(--color-text); }
.fd-askl-sources span { color: var(--color-accent-strong); font-size: 15px; line-height: 1.35; }
.fd-askl-note { margin: 0; font: var(--text-sm)/1.5 var(--font-headings); color: var(--color-text-3); }
.fd-askl-part { animation: fd-rise .45s var(--fd-ease) both; }
/* The shimmer while it starts. */
.fd-skel { display: grid; gap: 10px; }
.fd-skel i { display: block; height: 14px; border-radius: 7px; background: linear-gradient(90deg, color-mix(in srgb, var(--color-text) 6%, transparent) 30%, color-mix(in srgb, var(--color-text) 14%, transparent) 50%, color-mix(in srgb, var(--color-text) 6%, transparent) 70%);
  background-size: 300% 100%; animation: fd-shimmer 1.3s linear infinite; }
.fd-skel i:nth-child(1) { width: 70%; height: 22px; } .fd-skel i:nth-child(3) { width: 85%; } .fd-skel i:nth-child(4) { width: 60%; }
@media (prefers-reduced-motion: reduce) { .fd-skel i, .fd-askl-part { animation: none; } }
@media (max-width: 768px) { .fd-askl { height: 56px; padding-left: 18px; } .fd-askl input { font-size: 17px; } .fd-askl button { width: 42px; height: 42px; } .fd-askl-card { padding: var(--space-5); border-radius: 22px; } }
body.front .fd-askl-h { font: var(--weight-semibold) 13px/1.3 var(--font-headings); letter-spacing: var(--tracking-wide); color: var(--color-accent-strong); margin: 0 0 var(--space-2); }
.fd-askl-sources small { font-size: 12px; }

/* ---- D4.9: coverage, as a picture (src/front/constellation.ts) ------------------------------------------------------
   From 900 px the bubbles on the left and the chosen story's details on the right; the stories only one blog covered sit
   apart below. With script only the chosen story's details show (the biggest to start; hover, focus or tap another);
   without it every story's details are listed. */
.fd-constellation:not(.fd-constellation-compact) { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
@media (min-width: 900px) { .fd-constellation:not(.fd-constellation-compact) { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: center; }
  .fd-constellation .fd-bub-legend, .fd-constellation .fd-lone { grid-column: 1 / -1; } }
.fd-bub-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; font: var(--text-sm)/1.4 var(--font-headings); color: var(--color-text-2); }
.fd-bub-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; border-radius: 50%; background: var(--bub); vertical-align: -1px; }
.fd-bub-list { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-bub-detail { display: grid; gap: var(--space-2); padding: var(--space-5); border-radius: 20px; background: var(--fd-tile); }
.js .fd-constellation:not(.fd-constellation-compact) .fd-bub-list > :not(.is-on) { display: none; }
.js .fd-bub-detail.is-on { animation: fd-rise .35s var(--fd-ease) both; }
.fd-bub-title { font: var(--weight-semibold) 21px/1.3 var(--font-headings); color: var(--color-text); text-decoration: none; }
.fd-bub-title:hover { color: var(--color-accent-strong); text-decoration: underline; }
.fd-bub-meta { font: var(--text-sm)/1.4 var(--font-headings); color: var(--color-text-3); }
.fd-bub-blogs { font: var(--text-sm)/1.6 var(--font-headings); }
.fd-lone { padding-top: var(--space-6); border-top: 1px solid var(--fd-hair); }
.fd-lone-h { margin: 0 0 var(--space-4); font: var(--weight-semibold) 21px/1.3 var(--font-headings); color: var(--color-text); }
.fd-lone-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.fd-lone-list .fd-bub-detail { padding: var(--space-4); border-radius: 16px; }
.fd-lone-list .fd-bub-title { font-size: 16px; }
.js-motion .fd-cov-sec .fd-bubbles.is-in .fd-bub, .js-motion .fd-cov-sec .fd-bub { transition: opacity .5s var(--fd-ease); }
@media (min-width: 900px) {
  .fd-constellation:not(.fd-constellation-compact) .fd-bubbles { grid-column: 1; grid-row: 1; }
  .fd-constellation:not(.fd-constellation-compact) .fd-bub-list { grid-column: 2; grid-row: 1; }
  .fd-constellation:not(.fd-constellation-compact) .fd-bub-legend { grid-row: 2; }
  .fd-constellation:not(.fd-constellation-compact) .fd-lone { grid-row: 3; }
  :root:not(.js) .fd-constellation:not(.fd-constellation-compact) .fd-bub-list { max-height: 460px; overflow-y: auto; }
}

/* ---- D4.10: topics, connect, FAQ -----------------------------------------------------------------------------------
   Topics: ten large tiles, each a line-drawn icon of ours, the name and one line; a grid of five from 1100 px, snap-
   scrolling sideways on phones. Connect: the tabs as a segmented control. */
.fd-ttiles-scroll { max-width: var(--front-max); margin: var(--space-8) auto 0; padding: 0 var(--space-5); }
.fd-ttiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.fd-ttile { display: flex; flex-direction: column; gap: var(--space-2); height: 100%; min-height: 230px; padding: var(--space-6); border-radius: 24px; background: var(--fd-tile);
  color: var(--color-text-2); text-decoration: none; transition: transform .2s var(--fd-ease-out), background-color .2s var(--fd-ease-out); }
:root[data-theme="dark"] .fd-ttile { background: var(--ba-color-slate-900); }
.fd-ttile svg { fill: none; stroke: var(--ba-color-primary); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; margin-bottom: var(--space-4); }
.fd-ttile b { font: var(--weight-semibold) 21px/1.2 var(--font-headings); color: var(--color-text); }
.fd-ttile span { font: 15px/1.45 var(--font-headings); }
@media (hover: hover) { .fd-ttile:hover { transform: translateY(-3px); color: var(--color-text-2); } }
@media (max-width: 1100px) { .fd-ttiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) {
  .fd-ttiles-scroll { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 var(--space-4); scroll-padding: 0 var(--space-4); }
  .fd-ttiles-scroll::-webkit-scrollbar { display: none; }
  .fd-ttiles { display: flex; width: max-content; gap: var(--space-3); }
  .fd-ttiles > li { width: 64vw; scroll-snap-align: start; }
  .fd-ttile { min-height: 200px; }
}
/* The segmented control. */
body.front .fd-segmented { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 3px; margin: 0 0 var(--space-5); border: 0; border-radius: var(--radius-full); background: var(--fd-tile); }
:root[data-theme="dark"] body.front .fd-segmented { background: var(--ba-color-slate-800); }
body.front .fd-segmented [role="tab"] { padding: 8px 20px; border: 0; border-radius: var(--radius-full); background: transparent; color: var(--color-text-2); font-size: 15px; }
body.front .fd-segmented [role="tab"][aria-selected="true"] { background: var(--color-surface); color: var(--color-text);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ba-color-slate-950) 18%, transparent); border: 0; }
:root[data-theme="dark"] body.front .fd-segmented [role="tab"][aria-selected="true"] { background: var(--ba-color-slate-600); }
body.front .fd-tabs { padding: var(--space-8); border-radius: 28px; }
.fd-dev-intro { margin: 0 auto; }
body.front .fd-dev-tools { margin-top: var(--space-16); }
#developers { border-top: 1px solid var(--fd-hair); }

/* R1.2: Go Insider, the waitlist (src/insider/page.ts): on / after "How an answer is checked", and at /insider. Three
   perks as her cards, each marked coming soon; one email row; the optional ticks in a wrapping grid. */
.fd-ins .fd-lede.fd-center { margin-left: auto; margin-right: auto; }
.fd-ins-perks { list-style: none; margin: var(--space-8) 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.fd-ins-perks li { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-1); }
body.front .fd-ins-perks h3 { font-size: var(--ba-size-2xl); line-height: var(--ba-leading-7); margin: 0; }
.fd-ins-perks p { margin: 0; color: var(--color-text-2); }
.fd-ins-soon { align-self: flex-start; padding: 2px 10px; border-radius: var(--radius-full); background: var(--color-accent-subtle); color: var(--color-accent-strong);
  font: var(--weight-semibold) var(--text-xs)/1.6 var(--font-headings); letter-spacing: var(--tracking-wider); text-transform: uppercase; }
.fd-ins-form { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-4); }
.fd-ins-price { margin: 0; font: var(--weight-semibold) var(--ba-size-lg)/1.4 var(--font-headings); color: var(--color-text); }
.fd-ins-short .fd-ins-price, .fd-ins-short .fd-ins-more { text-align: center; }
.fd-ins-row { display: flex; gap: var(--space-3); align-items: flex-end; }
.fd-ins-email { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); font-size: var(--text-sm); color: var(--color-text-2); }
.fd-ins-email input { font-size: var(--text-md); padding: 10px 12px; }
.fd-ins-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.fd-ins-set { margin: 0; padding: 0; border: 0; }
.fd-ins-set legend { padding: 0; margin-bottom: var(--space-2); font: var(--weight-semibold) var(--text-md)/1.4 var(--font-headings); color: var(--color-text); }
.fd-ins-set legend span { font-weight: var(--ba-weight-normal); color: var(--color-text-3); }
.fd-ins-boxes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-2) var(--space-4); }
.fd-ins-boxes label { display: flex; gap: var(--space-2); align-items: center; font-size: var(--text-sm); color: var(--color-text-2); }
.fd-ins-boxes input { width: auto; accent-color: var(--color-button); }
.fd-ins-full { max-width: none; margin: 0; }
.fd-ins-form > .fd-btn { align-self: flex-start; }
.fd-ins-note { margin: 0; }
.fd-ins-more { margin: 0; }
.fd-ins-status { margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4); border-radius: var(--radius); border: 1px solid var(--color-border); }
.fd-ins-ok { background: var(--color-surface); border-color: var(--color-accent-line); border-left: 4px solid var(--color-accent); color: var(--color-text); }
.fd-ins-bad { background: var(--color-surface); border-color: var(--color-border); border-left: 4px solid var(--color-negative); color: var(--color-text); }
@media (max-width: 899px) { .fd-ins-perks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) { .fd-ins-row { flex-direction: column; align-items: stretch; } }


/* U1.3: Home is the network: its cards and series, the blog list, breakouts and rising, then the rest below. */
.ba-tools--index .home-network, .ba-tools--index .home-blogs { margin: var(--space-5) 0; }
.ba-tools--index .home-network .meta, .ba-tools--index .home-blogs .meta { margin: 0 0 var(--space-2); }
.ba-tools--index .home-more { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }

/* How this works (/tools/methodology): a readable document, its table of contents kept in view beside it on wide
   screens. Every section id is an anchor the pages' provenance links point at. */
.ba-tools--methodology .method-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.ba-tools--methodology .toc { display: block; margin: 0; padding: var(--space-3) var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); font-size: var(--text-sm); }
.ba-tools--methodology .toc-label { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: .04em; text-transform: uppercase;
  color: var(--color-text-3); }
.ba-tools--methodology .toc ol { display: flex; flex-wrap: wrap; gap: 2px var(--space-1); margin: 0; padding: 0; list-style: none; }
.ba-tools--methodology .toc a { display: block; padding: 3px var(--space-2); border-radius: var(--radius-sm); color: var(--color-text-2); text-decoration: none; }
.ba-tools--methodology .toc a:hover { background: var(--color-surface-2); color: var(--color-text); }
.ba-tools--methodology .toc a[aria-current] { background: var(--color-accent-subtle); color: var(--color-accent-strong); font-weight: var(--weight-medium); }
@media (min-width: 1100px) {
  .ba-tools--methodology .method-layout { grid-template-columns: 200px minmax(0, 1fr); align-items: start; }
  .ba-tools--methodology .toc { position: sticky; top: var(--space-6); max-height: calc(100vh - var(--space-12)); overflow-y: auto; padding: var(--space-2) 0;
    background: transparent; border: 0; }
  .ba-tools--methodology .toc-label { padding: 0 var(--space-2); }
  .ba-tools--methodology .toc ol { display: block; }
  .ba-tools--methodology .toc a { padding: 5px var(--space-2); }
}
.ba-tools--methodology .method-body { max-width: 820px; min-width: 0; }
.ba-tools--methodology .method-body section { margin: 0 0 var(--space-4); padding: var(--space-5) var(--space-6); background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); scroll-margin-top: var(--space-6); }
.ba-tools--methodology .method-body section:target { border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-subtle); }
.ba-tools--methodology .method-body section h2 { margin: 0 0 var(--space-4); font-size: var(--text-lg); font-weight: var(--weight-semibold); line-height: var(--leading-tight); }
.ba-tools--methodology .method-body dl { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--space-3) var(--space-5); margin: 0; }
.ba-tools--methodology .method-body dt { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-text-2); }
.ba-tools--methodology .method-body dd { margin: 0; color: var(--color-text); line-height: 1.6; }
.ba-tools--methodology .method-body p, .ba-tools--methodology .method-body li { line-height: 1.6; }
.ba-tools--methodology .method-body strong { font-weight: var(--weight-semibold); }
@media (max-width: 640px) {
  .ba-tools--methodology .method-body section { padding: var(--space-4); }
  .ba-tools--methodology .method-body dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .ba-tools--methodology .method-body dd { margin-bottom: var(--space-3); }
}

/* The fairness chart in #trending (Block L, docs/38): grouped bars per size decile, the blogs' share as a reference line. */
.ba-tools--methodology figure.fair { margin: var(--space-3) 0 0; }
.ba-tools--methodology .fair-chart { display: block; width: 100%; height: auto; max-width: 640px; margin-top: var(--space-2); }
.ba-tools--methodology .fair-chart .grid { stroke: var(--color-chart-grid); stroke-width: 1; }
.ba-tools--methodology .fair-chart .ref { stroke: var(--color-text-2); stroke-width: 2; stroke-dasharray: 4 3; }
.ba-tools--methodology .fair-chart .tick { font-size: 11px; fill: var(--color-text-3); }
.ba-tools--methodology .fair-chart .bar.mark-neutral { opacity: 1; }
.ba-tools--methodology .fair figcaption { font-size: var(--text-xs); color: var(--color-text-3); margin-top: var(--space-1); }
.ba-tools--methodology .fair-table { margin-top: var(--space-2); font-size: var(--text-sm); }

/* Card offers (/tools/cards/offers). */
.of-pair { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.of-offer { display: grid; min-width: 128px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--color-surface-2); line-height: 1.3; }
.of-best { background: var(--color-accent-subtle); }
.of-public { background: transparent; box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.of-k { font-size: 11px; font-weight: var(--weight-semibold); letter-spacing: .03em; text-transform: uppercase; color: var(--color-text-3); }
.of-v { font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--color-text); white-space: nowrap; }
.of-s { font-size: var(--text-xs); color: var(--color-text-3); }
.of-perk { display: inline-block; margin: 0 2px 2px 0; padding: 1px 7px; border-radius: 999px; background: var(--color-surface-2); color: var(--color-text-2); font-size: var(--text-xs); white-space: nowrap; }
.of-type { background: var(--color-info-subtle); color: var(--color-info); }
.of-reported { color: var(--ba-reported-ink); font-style: italic; font-weight: var(--weight-semibold); }
.of-detail p { margin: 0 0 var(--space-1); }
.of-note { margin: var(--space-3) 0 var(--space-6); }
.of-legends { margin-top: var(--space-6); }
.of-legends h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); }
#rep-block, #nv-block { margin-bottom: var(--space-6); }
.filter-bar .fb-field { min-width: 0; max-width: 100%; }
.filter-bar .fb-field select { max-width: 260px; }
@media (max-width: 600px) { .filter-bar .fb-field select { max-width: none; width: 100%; min-width: 0; } }
.of-cov { display: grid; gap: 2px; min-width: 150px; font-size: var(--text-sm); }
.of-cov > span { white-space: nowrap; }

/* The page paints before its script runs, and the level index's data comes after it: these blocks hold their filled
   heights (components.css keeps #kpis' and #chart's margins; #levels brings its card's), so the offers table doesn't
   jump down (CLS up to 0.099 at 1440). The index's skeleton is drawn at the same height (offers.html). */
.ba-tools--offers #kpis:empty { min-height: 177px; }
.ba-tools--offers #chart:empty { min-height: 493px; }
.ba-tools--offers #levels:empty { min-height: 312px; margin-bottom: var(--space-4); }
@media (max-width: 600px) {
  .ba-tools--offers #kpis:empty { min-height: 486px; }
  .ba-tools--offers #chart:empty { min-height: 724px; }
  .ba-tools--offers #levels:empty { min-height: 401px; }
}

/* Points values (/tools/points-values): the value, spread and floor chart, and the range column. */
.pv-chart { position: relative; display: grid; gap: 2px; }
.pv-row { display: grid; grid-template-columns: minmax(120px, 26%) minmax(0, 1fr) 56px; align-items: center; gap: var(--space-3); min-height: 26px; font-size: var(--text-sm); }
.pv-row:not(.pv-axis):hover { background: var(--color-surface-2); border-radius: var(--radius-sm); }
.pv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-text); }
.pv-plot { min-width: 0; }
.pv-plot .pv-svg { display: block; width: 100%; height: 22px; }
.pv-val { text-align: right; font-weight: var(--weight-semibold); color: var(--color-text); }
.pv-val.is-seed, .pv-cell-val.is-seed { color: var(--color-text-3); font-style: italic; }
.pv-axis { min-height: 18px; margin-top: var(--space-1); }
.pv-ticks { position: relative; height: 16px; margin: 0 4px; border-top: 1px solid var(--color-border); }
.pv-ticks span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 11px; color: var(--color-text-3); }
svg .pv-track { stroke: var(--color-chart-grid); stroke-width: 2; }
svg .pv-range { fill: var(--color-chart-2); opacity: .45; }
svg .pv-value { fill: var(--color-chart); }
svg .pv-value.is-seed { fill: var(--color-text-3); }
svg .pv-floor { stroke: var(--color-warning); stroke-width: 2; stroke-dasharray: 3 2; }
.legend-mark.pv-legend-floor { width: 2px; height: 12px; border-radius: 0; background: repeating-linear-gradient(to bottom, var(--color-warning) 0 3px, transparent 3px 5px); }
.pv-cell-val { font-size: var(--text-md); font-weight: var(--weight-semibold); }
.pv-range-cell { display: block; }
.pv-range-cell .pv-svg { display: block; }
.pv-detail p { margin: 0 0 var(--space-1); }
.pv-legend { margin-top: var(--space-6); }
.pv-legend h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); }
@media (max-width: 600px) { .pv-row { grid-template-columns: minmax(90px, 34%) minmax(0, 1fr) 44px; gap: var(--space-2); } }
.pv-sources { display: grid; grid-template-columns: repeat(2, max-content); gap: 2px var(--space-3); font-size: var(--text-xs); white-space: nowrap; }
.pv-src-name { display: inline-block; min-width: 40px; color: var(--color-text-3); }
.pv-marks { position: relative; display: block; height: 22px; margin: 0 4px; }
.pv-marks::before { content: ''; position: absolute; left: 0; right: 0; top: 10px; height: 2px; background: var(--color-chart-grid); }
.pv-m-range { position: absolute; top: 7px; height: 8px; margin-left: -2px; border-radius: 4px; background: var(--color-chart-2); opacity: .5; }
.pv-m-value { position: absolute; top: 3px; width: 3px; height: 16px; margin-left: -1.5px; border-radius: 1px; background: var(--color-chart); }
.pv-m-value.is-seed { background: var(--color-text-3); }
.pv-m-floor { position: absolute; top: 0; bottom: 0; width: 0; margin-left: -1px; border-left: 2px dashed var(--color-warning); }

/* The page paints before its script fills these: they hold their filled heights (components.css keeps the margins),
   so the list below doesn't jump down (CLS 0.05 at 1440). */
.ba-tools--points-values #kpis:empty { min-height: 177px; }
.ba-tools--points-values #chart:empty { min-height: 562px; }
@media (max-width: 600px) {
  .ba-tools--points-values #kpis:empty { min-height: 476px; }
  .ba-tools--points-values #chart:empty { min-height: 607px; }
}

/* Loyalty promotions (/tools/promotions); shares .tb-* with transfer bonuses and .filter-bar with offers. */
.pr-what { display: block; font-weight: var(--weight-medium); color: var(--color-text); }
.ba-tools--promotions .hbar-sub .st { margin-right: 4px; }
/* The page paints before its script runs, and the empty blocks hold components.css's reserved heights; this page's
   are taller (a chart of up to 12 promotions; five key figures stacked on a phone), so the verified table and the
   legend jumped down as it filled (CLS 0.083 at 1440). Its own heights here; the generic rules keep the margins. */
.ba-tools--promotions #chart:empty { min-height: 654px; }
@media (max-width: 600px) {
  .ba-tools--promotions #kpis:empty { min-height: 477px; }
  .ba-tools--promotions #chart:empty { min-height: 975px; }
}

/* The sister-blog referral graph (P2, docs/40): tokens only, both themes. */
.rg { width: 100%; height: auto; display: block; }
.rg-edge { fill: none; stroke: var(--color-accent); stroke-opacity: 0.45; }
.rg-edge:hover { stroke-opacity: 0.9; }
.rg-arrowhead { fill: var(--color-accent); fill-opacity: 0.6; }
.rg-node { fill: var(--color-chart); stroke: var(--color-surface); stroke-width: 1.5; }
.rg-label { font-size: 11px; fill: var(--color-text-2); }

/* The report (/tools/report, R1.2, docs/34): Google's screens from the store. The filters as a toolbar panel, the cards,
   the daily line, the tab strip and the tab's table. */
.ba-tools--report .report-form { gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4); }
.ba-tools--report .report-form label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-3); }
.ba-tools--report .report-form input, .ba-tools--report .report-form select { padding: 6px 10px; font-size: var(--text-sm); }
.ba-tools--report .report-window { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-2); }
.ba-tools--report .report-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.ba-tools--report .report-card { min-height: 0; }
.ba-tools--report .report-card .kpi-value { font-size: var(--text-xl); }
.ba-tools--report .report-chart { margin: 0 0 var(--space-5); }
.ba-tools--report .report-chart-body { min-height: 240px; }
.ba-tools--report .report-tabs { flex-wrap: wrap; margin: 0 0 var(--space-3); }
.ba-tools--report .report-tabs a { display: block; padding: 5px 14px; border-radius: 4px; color: var(--color-text-2); font-size: var(--text-sm);
  font-weight: var(--weight-medium); text-decoration: none; white-space: nowrap; }
.ba-tools--report .report-tabs a:hover { color: var(--color-text); }
.ba-tools--report .report-tabs a[aria-current="page"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }
.ba-tools--report .report-tab-title, .ba-tools--report .wb-table-title { margin: var(--space-4) 0 var(--space-2); }
.ba-tools--report .report-tab-title h2, .ba-tools--report .wb-table-title h2 { font-size: var(--text-base); }
.ba-tools--report .report-table .report-total th, .ba-tools--report .report-table .report-total td { font-weight: var(--weight-semibold); background: var(--color-surface-2); }
.ba-tools--report .report-table th[scope="row"] { max-width: 420px; overflow-wrap: anywhere; font-weight: var(--weight-medium); }
.ba-tools--report .report-notes { margin: var(--space-4) 0 0; padding-left: 1.1em; font-size: var(--text-sm); color: var(--color-text-2); }
.ba-tools--report .report-meta { margin-top: var(--space-3); }
.ba-tools--report .report-live { margin: var(--space-4) 0 var(--space-2); }
@media (max-width: 600px) { .ba-tools--report .report-tabs a { padding: 4px 8px; } }
.ba-tools--report .report-home { margin: 0 0 var(--space-6); }
.ba-tools--report .report-home .spark { color: var(--color-accent); vertical-align: middle; }
.ba-tools--report .report-home table tr > :first-child, .ba-tools--report .report-home table tr > :nth-child(2):has(a) { min-width: 150px; }
.ba-tools--report .report-badge { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-3); }
.ba-tools--report .report-badge--agrees::before { content: "● "; color: var(--color-accent); }
.ba-tools--report .report-badge--diverges { color: var(--color-text); font-weight: var(--weight-medium); }
.ba-tools--report .report-badge--diverges::before { content: "▲ "; color: var(--ba-alert); }
/* P1.4: the global bar is filled by the page's script (its dates, compare and blog picker), and on the report it wraps:
   its height once filled is held from the first paint (measured on the live page, Sep 30), so the report under it
   doesn't move when it lands. Was CLS 0.047 at 1100 and 0.095 on phones. */
main[data-ba-page="report"] #globalbar { min-height: 53px; }
@media (min-width: 901px) and (max-width: 1279px) { main[data-ba-page="report"] #globalbar { min-height: 92px; } }
@media (max-width: 900px) { main[data-ba-page="report"] #globalbar { min-height: 166px; } }

/* Blog scorecard (/tools/blogs/<slug>) and entity hub (/tools/topic/<type>/<id>): breadcrumb, source chips, sections */
.crumb { margin: 0 0 var(--space-1); font-size: var(--text-sm); }
.crumb a { color: var(--color-text-3); text-decoration: none; }
.crumb a:hover { color: var(--color-text); text-decoration: underline; }
.sc-flags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-3) 0 0; }
.sc-charts { margin-bottom: var(--space-4); }
.sc-charts .chart-card { margin: 0; height: 100%; }
.sc-section { margin-bottom: var(--space-4); }
.sc-section .table-wrap { position: relative; border: 0; border-radius: 0; margin: 0 calc(-1 * var(--space-5)); max-width: none; }
.sc-section table.dt th:first-child, .sc-section table.dt td:first-child { padding-left: var(--space-5); }
.sc-section table.dt th:last-child, .sc-section table.dt td:last-child { padding-right: var(--space-5); }
.sc-section .dt-more { margin-bottom: 0; }
.tp-ask { margin: var(--space-3) 0 0; }
.tp-note { margin: var(--space-3) 0 0; }
@media (max-width: 640px) {
  .sc-section table.dt thead th { white-space: normal; vertical-align: bottom; }
  .sc-section table.dt th, .sc-section table.dt td { padding: 8px 6px; }
  .sc-section table.dt th:first-child, .sc-section table.dt td:first-child { padding-left: var(--space-5); }
}

/* P3: most viewed and most read, side by side on wide screens. */
.sc-pair { display: grid; gap: var(--space-4); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .sc-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.sc-pair .sc-section { margin-bottom: 0; }
.sc-note { margin: var(--space-2) 0 var(--space-4); }

/* U1.4: the blog's report above its scorecard. */
.ba-tools--scorecard .sc-report { margin: 0 0 var(--space-5); }
.ba-tools--scorecard .sc-report .meta { margin: 0 0 var(--space-2); }
.ba-tools--scorecard #sc-tabs { margin: var(--space-4) 0 var(--space-2); }
.ba-tools--scorecard .sc-more { margin-top: var(--space-6); border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
/* U1b.4: the peers table fits its third of the row (it was 57 px too wide at 1440). */
.ba-tools--scorecard .sc-peers th, .ba-tools--scorecard .sc-peers td { padding-left: var(--space-2); padding-right: var(--space-2); }
.ba-tools--scorecard .sc-peers th { white-space: normal; }

/* S1.3: the Search section's Surfaces tab: the note, the weekly split, each surface's top pages. */
.ba-tools--search-console .surf-note { margin: var(--space-4) 0 var(--space-3); }
.ba-tools--search-console #surf-weeks { margin: 0 0 var(--space-4); }
.ba-tools--search-console #surf-pages .panel h2 { font-size: var(--text-md); }

/* Search demand (/tools/search-queries) */
/* sr-only text in cells must be contained by the table's scroller (see ai-referrals.css). */
.ba-tools--search-queries .table-wrap { position: relative; }
/* Phones: headers wrap and cells tighten, so the text column keeps its width (recommended for table.dt generally). */
@media (max-width: 640px) {
  .ba-tools--search-queries table.dt thead th { white-space: normal; vertical-align: bottom; }
  .ba-tools--search-queries table.dt th, .ba-tools--search-queries table.dt td { padding: 8px 6px; }
}

/* The share chart and the topic lines side by side (docs/37). */
.sq-charts { align-items: start; margin-bottom: var(--space-4); }
.sq-charts > div > .chart-card { margin: 0; }
@media (max-width: 1100px) { .sq-charts { grid-template-columns: minmax(0, 1fr); } }

/* The key figures hold their filled height before the script runs (empty) and while the data loads (the skeleton's
   four tiles are shorter than the real ones, which carry a comparison). With a min-height the tiles' 20px margin
   stays inside the box, so the loading rule adds it. The charts' skeletons are drawn at their filled heights
   (search-queries.html). Was CLS 0.04 at 1440 and 0.052 on phones. */
/* Before the script runs, the share chart holds its card's height (the grid's cards have no margin). */
.ba-tools--search-queries .sq-charts > #chart:empty { min-height: 649px; margin-bottom: 0; }
@media (max-width: 600px) {
  .ba-tools--search-queries .sq-charts > #chart:empty { min-height: 951px; }
  .ba-tools--search-queries .sq-charts > #topics:empty { min-height: 481px; }
}
/* P1.4: the key figures' reservation is console-reserve.css's (C1, from the live page at each width). The rules that
   were here held a shorter box while the figures loaded and, with the #kpis id, beat it: at 1100 the box grew when the
   data landed (CLS 0.059 on AI referrals, 0.067 on Search demand). */

/* Network search (/tools/search): the search bar, and results as a list */
.ba-tools--search .search-bar { margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.ba-tools--search .search-main { display: flex; gap: var(--space-2); }
.ba-tools--search .search-main input { flex: 1; min-width: 0; padding: 10px 14px; font-size: var(--text-md); }
.ba-tools--search .search-main button { flex: none; }
.ba-tools--search .search-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3); margin-top: var(--space-3); }
.ba-tools--search .search-filters label { display: flex; flex-direction: column; gap: 4px; font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-3); }
.ba-tools--search .search-filters input, .ba-tools--search .search-filters select { padding: 6px 10px; font-size: var(--text-sm); }
.ba-tools--search .results-list { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.ba-tools--search .result { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
.ba-tools--search .result:first-child { border-top: 0; }
.ba-tools--search .result-meta { margin: 0; font-size: var(--text-xs); color: var(--color-text-3); }
.ba-tools--search .result-blog { color: var(--color-text-2); font-weight: var(--weight-semibold); }
.ba-tools--search .result h3 { margin: 2px 0 var(--space-1); font-size: var(--text-md); line-height: 1.35; font-weight: var(--weight-semibold); }
.ba-tools--search .result h3 a { color: var(--color-text); text-decoration: none; }
.ba-tools--search .result h3 a:hover { color: var(--color-accent-strong); text-decoration: underline; }
.ba-tools--search .result-text { margin: 0; max-width: 90ch; font-size: var(--text-sm); color: var(--color-text-2); }
.ba-tools--search .result-text mark { background: var(--color-accent-subtle); color: var(--color-text); border-radius: 2px; padding: 0 1px; }
.ba-tools--search .result-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: var(--space-2) 0 0; }
.ba-tools--search .tag { display: inline-block; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface-2);
  color: var(--color-text-2); font-size: var(--text-xs); text-decoration: none; }
.ba-tools--search .tag:hover { color: var(--color-text); border-color: var(--color-border-strong); }
@media (max-width: 600px) {
  .ba-tools--search .search-bar { padding: var(--space-3); }
  .ba-tools--search .search-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-tools--search .result { padding: var(--space-3); }
}

/* Freshness and coverage (/tools/status): the sources, then the coverage, analytics read and verified-data check as cards. */
.ba-tools--status .status-cards, .ba-tools--status .status-verified, .ba-tools--status .status-add { margin-top: var(--space-4); }
.ba-tools--status #sources + .status-cards { margin-top: var(--space-6); }
.ba-tools--status .facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-4); margin: 0; font-size: var(--text-sm); }
.ba-tools--status .facts dt { color: var(--color-text-3); font-weight: var(--weight-medium); }
.ba-tools--status .facts dd { margin: 0; color: var(--color-text); }
.ba-tools--status .checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) var(--space-6); margin: 0 0 var(--space-3); padding: 0; list-style: none; font-size: var(--text-sm); }
.ba-tools--status .checks li { display: flex; align-items: flex-start; gap: var(--space-2); }
.ba-tools--status .checks .st { flex: none; min-width: 58px; text-align: center; }
.ba-tools--status .status-add h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ba-tools--status .status-add .steps { padding-left: var(--space-5); line-height: 1.6; }
.ba-tools--status .status-add p { margin: 0 0 var(--space-3); }
.ba-tools--status .gap-list .table-wrap { border: 0; }
@media (max-width: 760px) { .ba-tools--status .checks { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .ba-tools--status .facts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .ba-tools--status .facts dd { margin-bottom: var(--space-2); } }
.ba-tools--status .hbar { grid-template-columns: minmax(96px, 40%) minmax(0, 1fr) 84px; }

/* The pipeline timeline (docs/37): its box held before the data arrives. */
main #timeline:empty { min-height: 300px; }
section[aria-labelledby="h-timeline"] { margin-bottom: var(--space-4); }
/* The blocks /health fills hold their final height from the first paint (Block K audit: when /health answered after the
   page painted, the sources table pushed everything below it ~300 px). Five fixed sources, so these are stable. */
main #sources:empty { min-height: 344px; }
.ba-tools--status #kpis:empty { min-height: 177px; }
main #coverage:empty, main #pass:empty { min-height: 158px; }
@media (max-width: 600px) {
  main #sources:empty { min-height: 410px; }
  .ba-tools--status #kpis:empty { min-height: 331px; }
  main #coverage:empty { min-height: 250px; }
  main #pass:empty { min-height: 344px; }
}
.ba-tools--status #sources > .skel-card { min-height: 344px; box-sizing: border-box; }
@media (max-width: 600px) { .ba-tools--status #sources > .skel-card { min-height: 410px; } }
/* And while /health loads (Sep 24 audit, 0.034 on phones): the skeletons are shorter than what replaces them, so the
   blocks hold their filled heights with a skeleton in them too. (The key figures' 20px margin is absorbed by the
   Sources title's larger one either way, so their rule is the filled height.) The status line wraps on phones. */
.ba-tools--status #kpis:has(.skel) { min-height: 177px; }
main #coverage:has(.skel), main #pass:has(.skel) { min-height: 158px; }
.ba-tools--status #status:has(.skel) { min-height: 38px; box-sizing: border-box; }
@media (max-width: 600px) {
  .ba-tools--status #kpis:has(.skel) { min-height: 331px; }
  main #coverage:has(.skel) { min-height: 250px; }
  main #pass:has(.skel) { min-height: 344px; }
  .ba-tools--status #status:has(.skel) { min-height: 61px; }
}

/* Top stories (/tools/top-stories) */
.ba-tools--top-stories .rel-list { margin: var(--space-1) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-1); }
.ba-tools--top-stories .rel-list a { color: var(--color-text); }
.ba-tools--top-stories tr.dt-detail p { margin: 0; }

/* ---- Topic tiles' live previews (T1.2): beside each tile's icon, a figure, a few words and a mini chart from its
   page's data (public/tools/topic-tiles.js fills them). The box has a fixed height, so a tile is the same size with a
   preview or without one, and the front door's layout doesn't move when they arrive. */
.fd-ttile-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); min-height: 60px; }
.fd-ttile-top svg { flex: none; }
.fd-ttile-live { display: grid; grid-template-columns: auto; justify-items: end; align-content: start; gap: 3px; min-width: 0; height: 60px; overflow: hidden; text-align: right; }
.fd-ttile-live .tt-fig { font: 600 15px/1.2 var(--font-mono); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fd-ttile-live .tt-sub { font: 11px/1.25 var(--font-headings); color: var(--color-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.fd-ttile-live .tt-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.fd-ttile-live .tt-bars i { display: block; width: 5px; height: var(--h); border-radius: 2px; background: var(--ba-color-primary); opacity: .75; transform-origin: bottom; }
.fd-ttile-live .tt-fig, .fd-ttile-live .tt-sub { transition: opacity .5s ease, transform .5s ease; }
.fd-ttile-live:not(.is-live) .tt-fig, .fd-ttile-live:not(.is-live) .tt-sub { opacity: 0; transform: translateY(4px); }
.fd-ttile-live .tt-bars i { transition: transform .7s cubic-bezier(.2, .8, .2, 1) calc(var(--j, 0) * 60ms + 200ms); }
.fd-ttile-live:not(.is-live) .tt-bars i { transform: scaleY(0); }
@media (prefers-reduced-motion: reduce) { .fd-ttile-live .tt-fig, .fd-ttile-live .tt-sub, .fd-ttile-live .tt-bars i { transition: none; } }

/* ---- Topic pages (T1.1): /ask/<topic>. A hero with one live figure, the topic's live module on a tinted band, the
   week's bubbles, the experts' newest posts, a compact Ask, related topics. Each topic has its own tint from Rebecca's
   palette (--tp-tint, --tp-deep), so no page is a black field: her greens for money and points, her info blues for
   flying, her warm neutrals for hotels and places. Rebecca's tokens only. */
body.front { --tp-tint: var(--ba-color-green-500); --tp-deep: var(--ba-color-green-950); }
.tp-hero-cabins, .tp-hero-lounges, .tp-hero-fares, .tp-hero-search { --tp-tint: var(--ba-color-info-500); --tp-deep: var(--ba-color-info-950); }
.tp-hero-hotels, .tp-hero-destinations, .tp-hero-briefing { --tp-tint: var(--ba-color-warning-400); --tp-deep: var(--ba-color-warning-950); }
body.front:has(.tp-hero-cabins, .tp-hero-lounges, .tp-hero-fares, .tp-hero-search) { --tp-tint: var(--ba-color-info-500); --tp-deep: var(--ba-color-info-950); }
body.front:has(.tp-hero-hotels, .tp-hero-destinations, .tp-hero-briefing) { --tp-tint: var(--ba-color-warning-400); --tp-deep: var(--ba-color-warning-950); }

/* The hero: its own (not the front door's full-screen one), the tint as a soft light from the top right, and the one
   live figure. */
.tp-hero { position: relative; overflow: hidden; isolation: isolate; padding: calc(var(--fd-bar-h) + var(--space-16)) 0 var(--space-12); }
body.front .tp-hero h1 { margin: var(--space-3) 0 var(--space-4); max-width: 16ch; }
.tp-hero .fd-lede { margin: 0; max-width: 56ch; }
.js-motion .tp-hero .fd-wrap > :not([data-reveal]) { animation: tp-rise .7s cubic-bezier(.2, .8, .2, 1) both; }
.js-motion .tp-hero .fd-wrap > :nth-child(2) { animation-delay: 80ms; }
.js-motion .tp-hero .fd-wrap > :nth-child(3) { animation-delay: 160ms; }
.js-motion .tp-hero .fd-wrap > :nth-child(4) { animation-delay: 260ms; }
.js-motion .tp-hero .fd-wrap > :nth-child(5) { animation-delay: 340ms; }
.tp-hero::before { content: ""; position: absolute; inset: -20% -10% auto 30%; height: 140%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--tp-tint) 22%, transparent), transparent 70%); filter: blur(24px); }
:root[data-theme="light"] .tp-hero::before { background: radial-gradient(closest-side, color-mix(in srgb, var(--tp-tint) 16%, transparent), transparent 70%); }
body.front .tp-hero .eyebrow, body.front .tp-sec .eyebrow, body.front .tp-ask-sec .eyebrow { margin: 0 0 var(--space-3); font: var(--weight-semibold) 13px/1.2 var(--font-headings);
  letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--tp-tint); }
.tp-figure { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: var(--space-1) var(--space-5); margin: var(--space-10) 0 var(--space-8); max-width: 760px; }
.tp-figure b { font: 600 clamp(48px, 9vw, 88px)/1 var(--font-mono); letter-spacing: -0.03em; color: var(--color-text); font-variant-numeric: tabular-nums;
  background: linear-gradient(120deg, var(--color-text) 30%, var(--tp-tint)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.tp-figure span { font: var(--weight-semibold) var(--ba-size-xl)/1.3 var(--font-headings); color: var(--color-text-2); max-width: 26ch; padding-bottom: 6px; }
.tp-figure small { grid-column: 1 / -1; font: var(--text-xs)/1.4 var(--font-mono); color: var(--color-text-3); letter-spacing: .02em; }
.tp-jump { margin: 0; }

/* The module's band: the topic's deep tint, fading back to the page at the foot. */
.tp-module { background: linear-gradient(180deg, color-mix(in srgb, var(--tp-deep) 70%, var(--color-bg)) 0%, var(--color-bg) 100%); }
:root[data-theme="light"] .tp-module { background: linear-gradient(180deg, color-mix(in srgb, var(--tp-tint) 9%, var(--color-bg)) 0%, var(--color-bg) 100%); }
.tp-sec .fd-lede { max-width: 62ch; }
.tp-sub { margin-top: calc(var(--space-10) * 1.5); }
body.front .tp-sub h3 { font-size: var(--ba-size-3xl); line-height: var(--ba-leading-5); margin: 0 0 var(--space-2); }
.tp-sub-lead { margin: 0 0 var(--space-6); color: var(--color-text-2); max-width: 62ch; }
.tp-foot { margin: var(--space-6) 0 0; max-width: 78ch; font-size: var(--text-sm); color: var(--color-text-3); }
.tp-foot a, .tp-method { color: var(--color-accent-strong); font-weight: var(--weight-semibold); }
.tp-empty { padding: var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--ba-border-radius-lg); color: var(--color-text-2); margin: 0; }
.tp-dim { color: var(--color-text-3); }

/* Long lists rise in item by item as each arrives (public/tools/topic.js), not all at once when 15% of the list is in
   view: a list of 67 cards is taller than any screen. */
.js-motion [data-rise] > :not(.is-in) { opacity: 0; transform: translateY(14px); }
.js-motion [data-rise] > * { transition: opacity .55s ease, transform .55s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--k, 0) * 70ms); }

/* Chips and tags */
.tp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--radius-full); font: var(--weight-semibold) 12px/1.5 var(--font-headings); white-space: nowrap; }
.tp-chip-ok { background: var(--color-positive-subtle); color: var(--color-positive); }
.tp-chip-ok::before { content: "\2713"; }
.tp-chip-warn { background: var(--color-warning-subtle); color: var(--color-warning); }
.tp-chip-bad { background: var(--color-negative-subtle); color: var(--color-negative); }
.tp-chip-info { background: var(--color-info-subtle); color: var(--color-info); }
.tp-chip-quiet { background: var(--color-muted-subtle); color: var(--color-muted); }
.tp-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tp-tags li, .tp-tag { display: inline-block; padding: 2px 10px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong); font: 12px/1.5 var(--font-headings); color: var(--color-text-2); }
.tp-tag-warn { border-color: color-mix(in srgb, var(--color-warning) 50%, transparent); color: var(--color-warning); }
.tp-tags-line { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--space-3) 0 0; }

/* Filters and segmented buttons */
.tp-filters { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-4) var(--space-5); margin: 0 0 var(--space-6); padding: var(--space-5);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent); border: 1px solid var(--color-border-strong); border-radius: var(--ba-border-radius-lg); backdrop-filter: blur(8px); }
.tp-filters label, .tp-filters legend, .tp-check label, .tp-lounge-pick label { display: grid; gap: 6px; font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-headings); color: var(--color-text-2); }
.tp-filters fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.tp-filters legend { margin-bottom: 6px; padding: 0; }
.tp-filters select, .tp-check select, .tp-check input, .tp-lounge-pick select { min-height: 42px; padding: 8px 12px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm);
  background: var(--color-surface); color: var(--color-text); font: var(--text-md)/1.3 var(--font-headings); }
.tp-filters select:focus-visible, .tp-check :is(select, input):focus-visible, .tp-lounge-pick select:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.tp-seg, .tp-checks { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-seg legend, .tp-checks legend { flex-basis: 100%; }
.tp-seg label, .tp-checks label { display: inline-flex; position: relative; }
.tp-seg input, .tp-checks input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tp-seg span, .tp-checks span, .tp-seg-b { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--color-border-strong);
  background: var(--color-surface); color: var(--color-text-2); font: var(--weight-semibold) var(--text-sm)/1.2 var(--font-headings); cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.tp-seg input:checked + span, .tp-checks input:checked + span, .tp-seg-b.is-on { background: var(--color-accent-subtle); border-color: var(--color-accent); color: var(--color-text); }
.tp-seg input:focus-visible + span, .tp-checks input:focus-visible + span, .tp-seg-b:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tp-seg-b small { font: 12px/1 var(--font-mono); color: var(--color-text-3); }
.tp-board-tools { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--space-5); }
.tp-count { margin: 0 0 0 auto; font: var(--text-sm)/1.2 var(--font-headings); color: var(--color-text-3); align-self: center; }
.tp-count b { color: var(--color-text); font-family: var(--font-mono); }
[data-filtered] > [hidden] { display: none; }
/* A long grid shows its first twelve until "Show all" (or a filter) opens it; without script, all of it. */
.js [data-clip]:not(.is-all) > :nth-child(n+13) { display: none; }
.tp-all { display: flex; justify-content: center; margin: var(--space-6) 0 0; }
.tp-all[hidden] { display: none; }

/* Stat boxes (W1's) */
.tp-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; margin: var(--space-3) 0; }
.tp-stat { display: grid; gap: 2px; padding: 10px 12px; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-bg) 55%, var(--color-surface)); border: 1px solid var(--color-border-strong); }
.tp-stat-accent { border-color: color-mix(in srgb, var(--color-accent) 60%, transparent); }
.tp-stat-label { font: var(--weight-semibold) 11px/1.2 var(--font-headings); letter-spacing: .08em; text-transform: uppercase; color: var(--color-text-3); white-space: nowrap; }
.tp-stat-fig { font: 600 18px/1.15 var(--font-mono); letter-spacing: -0.02em; color: var(--color-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tp-stat-note { font-size: 12px; color: var(--color-text-3); }

/* Cards: the offers grid */
.tp-offers { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tp-offer { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--ba-border-radius-lg); background: var(--color-surface);
  border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-1); transition: transform .25s ease, box-shadow .25s ease, border-color .25s; }
@media (hover: hover) { .tp-offer:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--color-accent) 50%, var(--color-border-strong)); box-shadow: var(--shadow-2); } }
.tp-offer-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin: 0; font: var(--text-xs)/1.3 var(--font-headings); color: var(--color-text-3); letter-spacing: .02em; }
body.front .tp-offer-name { font-size: var(--ba-size-xl); line-height: 1.25; margin: 0; }
.tp-offer-note { margin: 0; font-size: var(--text-sm); color: var(--color-text-2); }
.tp-offer-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2); margin: auto 0 0; padding-top: var(--space-3); border-top: 1px solid var(--fd-hair); font-size: var(--text-sm); color: var(--color-text-3); }
.tp-offer-foot a { font-weight: var(--weight-semibold); color: var(--color-accent-strong); }

/* Points: the values board */
.tp-table-wrap { overflow-x: auto; border-radius: var(--ba-border-radius-lg); border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.tp-table { width: 100%; border-collapse: collapse; font: var(--text-sm)/1.35 var(--font-headings); }
.tp-table th, .tp-table td { padding: 10px 14px; text-align: left; border-top: 1px solid var(--fd-hair); vertical-align: middle; }
.tp-table thead th { border-top: 0; font: var(--weight-semibold) 11px/1.2 var(--font-headings); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-3); background: color-mix(in srgb, var(--color-bg) 40%, var(--color-surface)); white-space: nowrap; }
.tp-table thead button { all: unset; cursor: pointer; }
.tp-table thead button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tp-table thead button::after { content: " \2195"; opacity: .45; }
.tp-table thead button[aria-sort="descending"]::after { content: " \2193"; opacity: 1; color: var(--color-accent); }
.tp-table thead button[aria-sort="ascending"]::after { content: " \2191"; opacity: 1; color: var(--color-accent); }
.tp-table tbody tr { transition: background .2s; }
@media (hover: hover) { .tp-table tbody tr:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); } }
.tp-table tbody th { font-weight: var(--weight-semibold); min-width: 180px; }
.tp-prog { display: block; color: var(--color-text); }
.tp-prog-type { display: block; font: 12px/1.3 var(--font-headings); font-weight: 400; color: var(--color-text-3); }
.tp-val b { font: 600 17px/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.tp-floor, .tp-spread { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--color-text-2); white-space: nowrap; }
.tp-bar-cell { width: 34%; min-width: 160px; }
.tp-bar { position: relative; display: block; height: 18px; border-radius: 9px; background: color-mix(in srgb, var(--color-text) 6%, transparent); }
.tp-bar i { position: absolute; top: 0; bottom: 0; display: block; }
.tp-bar-band { border-radius: 9px; background: color-mix(in srgb, var(--color-accent) 28%, transparent); }
.tp-bar-mark { left: 0; width: var(--x); border-radius: 9px 0 0 9px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-accent) 35%, transparent));
  border-right: 3px solid var(--color-accent); transform-origin: left; }
.tp-bar-floor { width: 2px; top: -4px !important; bottom: -4px !important; background: var(--color-warning); }
.js-motion tbody[data-rise] .tp-bar-mark { transform: scaleX(0); transition: transform .9s cubic-bezier(.2, .8, .2, 1) 150ms; }
.js-motion tbody[data-rise] > .is-in .tp-bar-mark { transform: none; }
.tp-legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: var(--space-3) 0 0; font-size: 13px; color: var(--color-text-3); }
.tp-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tp-key { position: static !important; display: inline-block !important; width: 18px; height: 10px; border-radius: 5px; }
.tp-legend .tp-bar-mark { width: 18px; }
.tp-legend .tp-bar-floor { width: 2px; height: 14px; border-radius: 0; }

/* Points: the redemption checker */
.tp-check { display: grid; grid-template-columns: 2fr 1fr 1fr auto; align-items: end; gap: var(--space-4); padding: var(--space-6); border-radius: var(--ba-border-radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-1); }
.tp-check .fd-btn { min-height: 42px; }
.tp-dollar { position: relative; display: block; }
.tp-dollar::before { content: "$"; position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--color-text-3); }
.tp-dollar input { padding-left: 24px; width: 100%; }
.tp-check input { width: 100%; }
.tp-check-out { grid-column: 1 / -1; min-height: 64px; }
.tp-check-out .tp-verdict { margin: 0 0 var(--space-3); font: var(--weight-semibold) var(--ba-size-lg)/1.4 var(--font-headings); color: var(--color-text); }
.tp-check-out .tp-stats { max-width: 560px; }

/* Promotions and transfer bonuses, with their rings */
.tp-promos { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tp-promo { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-4); align-items: start; padding: var(--space-5); border-radius: var(--ba-border-radius-lg);
  background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-1); }
.tp-promo-title { margin: 0; font: var(--weight-semibold) var(--text-xs)/1.3 var(--font-headings); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-3); }
.tp-promo-what { margin: 4px 0 var(--space-3); font: var(--weight-semibold) var(--ba-size-lg)/1.35 var(--font-headings); color: var(--color-text); }
.tp-promo-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; color: var(--color-text-3); }
.tp-promo-links { margin: var(--space-2) 0 0; font-size: 13px; color: var(--color-text-3); }
.tp-promo-links a, .tp-experts a { color: var(--color-accent-strong); font-weight: var(--weight-semibold); }
.tp-experts { margin: var(--space-3) 0 0; padding: var(--space-3) 0 0; list-style: none; border-top: 1px solid var(--fd-hair); display: grid; gap: 6px; font-size: 14px; }
.tp-experts span { color: var(--color-text-3); font-size: 13px; }
.tp-ring { position: relative; width: 64px; height: 64px; }
.tp-ring svg { transform: rotate(-90deg); display: block; }
.tp-ring circle { fill: none; stroke-width: 6; }
.tp-ring-bg { stroke: color-mix(in srgb, var(--color-text) 10%, transparent); }
.tp-ring-fg { stroke: var(--tp-tint); stroke-linecap: round; stroke-dasharray: var(--c); stroke-dashoffset: var(--off); }
.tp-ring-open .tp-ring-fg { stroke: none; }
.js-motion [data-rise] > * .tp-ring-fg { stroke-dashoffset: var(--c); transition: stroke-dashoffset 1.4s cubic-bezier(.2, .8, .2, 1) .2s; }
.js-motion [data-rise] > .is-in .tp-ring-fg { stroke-dashoffset: var(--off); }
.tp-ring > span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.tp-ring b { font: 600 18px/1 var(--font-mono); color: var(--color-text); }
.tp-ring small { display: block; margin-top: 2px; font: 10px/1 var(--font-headings); color: var(--color-text-3); text-transform: uppercase; letter-spacing: .06em; }

/* Posts, reviews, deals */
.tp-posts, .tp-reviews, .tp-deals { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tp-post, .tp-review { display: flex; flex-direction: column; gap: 6px; padding: var(--space-5); border-radius: var(--ba-border-radius-lg); background: var(--color-surface); border: 1px solid var(--color-border-strong);
  transition: transform .25s ease, border-color .25s; }
@media (hover: hover) { .tp-post:hover, .tp-review:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--tp-tint) 50%, var(--color-border-strong)); } }
.tp-post-meta { display: flex; justify-content: space-between; gap: var(--space-2); margin: 0; font: var(--weight-semibold) 12px/1.3 var(--font-headings); color: var(--color-text-3); letter-spacing: .02em; }
.tp-post-meta time { font-weight: 400; white-space: nowrap; }
.tp-post-title { font: var(--weight-semibold) var(--ba-size-lg)/1.35 var(--font-headings); color: var(--color-text); text-decoration: none; }
.tp-post-title:hover { color: var(--color-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.tp-post-line { margin: 0; font: var(--text-sm)/1.5 var(--ba-font-family-body, serif); color: var(--color-text-2); }
.tp-quote { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-4); border-left: 4px solid var(--tp-tint); background: color-mix(in srgb, var(--tp-tint) 7%, transparent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.tp-quote p { margin: 0; font: italic var(--text-sm)/1.55 var(--ba-font-family-body, serif); color: var(--color-text); }

/* Lounges */
.tp-lounge-pick { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); margin: 0 0 var(--space-4); }
.tp-lounges { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.tp-lounge { padding: var(--space-5); border-radius: var(--ba-border-radius-lg); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
body.front .tp-lounge h3 { font-size: var(--ba-size-xl); line-height: 1.3; margin: 0 0 var(--space-2); }
.tp-lounge-access { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 var(--space-3); font-size: 13px; color: var(--color-text-3); }
.tp-lounge-posts, .tp-place ul, .tp-cabin ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.tp-lounge-posts a, .tp-place a, .tp-cabin a { color: var(--color-text); font-weight: var(--weight-semibold); }
.tp-lounge-posts span, .tp-place li span, .tp-cabin li > span { display: block; color: var(--color-text-3); font-size: 13px; }
.tp-lounge-out { transition: opacity .25s; }
.tp-lounge-out[aria-busy="true"] { opacity: .45; }

/* Cabins: side by side */
.tp-cabins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.tp-cabin { padding: var(--space-5); border-radius: var(--ba-border-radius-lg); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
.tp-cabins.is-picking .tp-cabin[data-off] { display: none; }
.tp-cabin header { padding-bottom: var(--space-3); margin-bottom: var(--space-4); border-bottom: 1px solid var(--fd-hair); }
body.front .tp-cabin h3 { font-size: var(--ba-size-2xl); line-height: 1.2; margin: 0 0 4px; }
.tp-cabin header p { margin: 0; color: var(--color-text-3); font-size: var(--text-sm); }
.tp-cabin header b { font: 600 var(--ba-size-lg)/1 var(--font-mono); color: var(--tp-tint); }
.tp-cabin li { display: grid; gap: 4px; }
.tp-cabin .tp-quote { margin: 0 0 2px; }

/* Destinations: the map */
.tp-map-wrap { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: var(--space-5); align-items: start; margin: 0 0 var(--space-5); }
.tp-map { width: 100%; height: auto; display: block; border-radius: var(--ba-border-radius-lg); background: color-mix(in srgb, var(--tp-deep) 50%, var(--color-surface)); border: 1px solid var(--color-border-strong); }
:root[data-theme="light"] .tp-map { background: color-mix(in srgb, var(--tp-tint) 6%, var(--color-surface)); }
.tp-map-land { fill: color-mix(in srgb, var(--color-text) 12%, transparent); }
.tp-dot { cursor: pointer; outline: none; }
.tp-dot circle { fill: color-mix(in srgb, var(--tp-tint) 55%, transparent); stroke: var(--tp-tint); stroke-width: 1.5; transition: fill .2s, transform .3s; transform-box: fill-box; transform-origin: center; }
.tp-dot text { font: 600 13px/1 var(--font-headings); fill: var(--color-text); text-anchor: middle; paint-order: stroke; stroke: var(--color-bg); stroke-width: 4px; opacity: 0; transition: opacity .2s; pointer-events: none; }
.tp-dot:is(:hover, :focus-visible, .is-on) circle { fill: var(--tp-tint); }
.tp-dot:is(:hover, :focus-visible, .is-on) text, .tp-dot:nth-child(-n+5) text { opacity: 1; }
.js-motion .tp-map .tp-dot circle { transform: scale(0); }
.js-motion .tp-map.is-in .tp-dot circle { transform: none; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1) calc(var(--i) * 45ms), fill .2s; }
.tp-places { min-height: 280px; }
.tp-place { padding: var(--space-5); border-radius: var(--ba-border-radius-lg); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
body.front .tp-place h3 { font-size: var(--ba-size-2xl); margin: 0 0 var(--space-4); }
.tp-place h3 small { font: 13px/1 var(--font-headings); color: var(--color-text-3); margin-left: 6px; }

/* Briefing: the day's stories */
.tp-stories { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.tp-stories li { position: relative; display: grid; grid-template-columns: 88px 1fr; gap: 2px var(--space-4); padding: var(--space-4) var(--space-5); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border-strong); }
.tp-stories li::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); background: color-mix(in srgb, var(--tp-tint) 10%, transparent); transform-origin: left; transition: transform 1s cubic-bezier(.2, .8, .2, 1); z-index: 0; }
.js-motion .tp-stories > li:not(.is-in)::before { transform: scaleX(0); }
.tp-stories li > * { position: relative; }
.tp-story-n { grid-row: span 2; align-self: center; font: 12px/1.2 var(--font-headings); color: var(--color-text-3); }
.tp-story-n b { display: block; font: 600 26px/1 var(--font-mono); color: var(--color-text); }
.tp-stories a { font: var(--weight-semibold) var(--text-md)/1.35 var(--font-headings); color: var(--color-text); }
.tp-story-by { font-size: 13px; color: var(--color-text-3); }

/* Search: what readers are reading */
.tp-trend { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: var(--space-4); margin: 0; padding: 0; list-style: none; counter-reset: tr; }
.tp-trend li { display: flex; flex-direction: column; gap: 4px; padding: var(--space-5); border-radius: var(--ba-border-radius-lg); background: var(--color-surface); border: 1px solid var(--color-border-strong); }
.tp-trend-kind { margin: 0; font: var(--weight-semibold) 11px/1.2 var(--font-headings); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-3); }
.tp-trend-name { margin: 0; font: var(--weight-semibold) var(--ba-size-2xl)/1.2 var(--font-headings); color: var(--color-text); }
.tp-trend-lift { margin: 0; color: var(--color-text-2); font-size: var(--text-sm); }
.tp-trend-lift b { font: 600 var(--ba-size-xl)/1 var(--font-mono); color: var(--tp-tint); }
.tp-trend-meta { margin: 0 0 var(--space-2); font-size: 13px; color: var(--color-text-3); }
.tp-trend a { margin-top: auto; font: var(--weight-semibold) var(--text-sm)/1.4 var(--font-headings); color: var(--color-text); }
.tp-trend-by { font-size: 12px; color: var(--color-text-3); }

/* The Ask: compact, and its answer as a card */
.tp-ask-sec { background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--tp-tint) 12%, transparent), transparent 60%); }
.tp-ask { position: relative; display: flex; align-items: center; gap: var(--space-2); max-width: var(--ba-container-3xl); margin: 0 0 var(--space-4); padding: 6px 6px 6px var(--space-4);
  border-radius: var(--radius-full); background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2); transition: border-color .2s, box-shadow .2s; }
.tp-ask:focus-within { border-color: var(--color-accent); box-shadow: var(--shadow-glow); }
.tp-ask input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--color-text); font: var(--text-md)/1.4 var(--font-headings); padding: 10px 4px; }
.tp-ask input:focus { outline: none; }
.tp-ask button { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--color-button); color: var(--color-on-accent); cursor: pointer; transition: background .2s, transform .2s; }
.tp-ask button svg { display: block; }
.tp-ask button:hover { background: var(--color-button-hover); transform: translateX(2px); }
.tp-ask button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.tp-ask-out:empty { display: none; }
.tp-ask-out { margin-top: var(--space-6); }
.tp-answer { padding: var(--space-6); border-radius: var(--ba-border-radius-lg); background: var(--color-surface); border: 1px solid var(--color-border-strong); box-shadow: var(--shadow-2); animation: tp-rise .4s ease both; }
.tp-answer-q { margin: 0 0 var(--space-3); font: var(--text-sm)/1.4 var(--font-headings); color: var(--color-text-3); }
.tp-answer-verdict { margin: 0 0 var(--space-4); font: var(--weight-semibold) var(--ba-size-xl)/1.4 var(--font-headings); color: var(--color-text); }
.tp-answer-facts { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.tp-answer-facts li { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-bg) 50%, var(--color-surface)); font-size: var(--text-sm); }
.tp-answer-body { margin: 0 0 var(--space-4); font: var(--text-md)/1.6 var(--ba-font-family-body, serif); color: var(--color-text); white-space: pre-line; }
.tp-answer-body a { color: var(--color-accent-strong); }
.tp-answer-posts { display: grid; gap: 6px; margin: 0; padding: var(--space-4) 0 0; list-style: none; border-top: 1px solid var(--fd-hair); font-size: var(--text-sm); }
.tp-answer-posts a { font-weight: var(--weight-semibold); color: var(--color-text); }
.tp-answer-posts span { color: var(--color-text-3); }
.tp-typing { display: inline-flex; gap: 4px; }
.tp-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--color-text-3); animation: tp-blink 1s infinite; }
.tp-typing i:nth-child(2) { animation-delay: .15s; }
.tp-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tp-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes tp-rise { from { opacity: 0; transform: translateY(8px); } }

/* Related topics and the rest */
.tp-rel-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: var(--front-max); margin: 0 0 var(--space-6); padding: 0; }
.tp-more { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; font-size: var(--text-sm); }
.tp-more a { color: var(--color-text-2); }

@media (max-width: 1100px) {
  .tp-check { grid-template-columns: 1fr 1fr; }
  .tp-map-wrap { grid-template-columns: 1fr; }
  .tp-places { min-height: 0; }
}
@media (max-width: 768px) {
  .tp-figure b { font-size: 56px; }
  .tp-filters { padding: var(--space-4); }
  .tp-filters > label { flex: 1 1 140px; }
  .tp-count { margin: 0; flex-basis: 100%; }
  .tp-offers, .tp-promos, .tp-posts, .tp-reviews, .tp-deals, .tp-lounges, .tp-trend { grid-template-columns: 1fr; }
  .tp-cabins { grid-template-columns: 1fr; }
  .tp-check { grid-template-columns: 1fr; padding: var(--space-5); }
  .tp-table th, .tp-table td { padding: 10px; }
  .tp-bar-cell { min-width: 110px; }
  .tp-rel-tiles { grid-template-columns: 1fr; }
  .tp-stories li { grid-template-columns: 64px 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tp-offer, .tp-post, .tp-review, .tp-ask button { transition: none; }
  .tp-answer { animation: none; }
}

/* Transfer bonuses (/tools/transfer-bonuses) and promotions (/tools/promotions): anchored rows, the days-left note. */
.tb-pct { font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text); }
.tb-soon { color: var(--color-warning); font-weight: var(--weight-semibold); }
.tb-post + .tb-post { margin-top: var(--space-2); }
.tb-block { margin-top: var(--space-6); }
.tb-legend { margin-top: var(--space-6); }
.tb-legend h2 { margin: 0 0 var(--space-3); font-size: var(--text-md); }
table.dt tr:target td { background: var(--color-accent-subtle); }
/* The page paints before its script fills these, and the empty blocks held components.css's generic heights (160,
   304); the filled ones are taller, so the tables and the legend jumped down as it filled (CLS 0.073 at 1440). Their
   filled heights here; the generic rules keep the margins. As Promotions. */
.ba-tools--transfer-bonuses #kpis:empty { min-height: 177px; }
.ba-tools--transfer-bonuses #chart:empty { min-height: 357px; }
/* The active table starts inside the first screen at 1440; its height is the day's count of bonuses, so it holds
   enough to keep what follows (the legend) below the fold until it is drawn. */
.ba-tools--transfer-bonuses #active:empty { min-height: 240px; }
@media (max-width: 600px) {
  .ba-tools--transfer-bonuses #kpis:empty { min-height: 486px; }
  .ba-tools--transfer-bonuses #chart:empty { min-height: 517px; }
}

/* Trending (/tools/trending): the tiers in one column, in the order of Block L (docs/33 §12). */
.trend-main > section + section { margin-top: var(--space-2); }
.trend-main .section-title:first-child { margin-top: var(--space-4); }
.trend-links { margin: var(--space-3) 0 0; font-size: var(--text-sm); }
.trend-links .meta { color: var(--color-muted); margin-left: var(--space-2); }
/* Momentum (Block L): the score as a thin bar in its cell, and each component as a bar in the expanded row. */
.mom-score { display: inline-block; width: 36px; height: 6px; margin-right: 6px; vertical-align: middle; background: var(--color-chart-grid); border-radius: 3px; overflow: hidden; }
.mom-score i, .mom-bar i { display: block; height: 100%; background: var(--color-chart); }
.mom-bars { display: grid; gap: 4px; margin-top: var(--space-2); max-width: 640px; }
.mom-row { display: grid; grid-template-columns: minmax(0, 220px) 120px minmax(0, 1fr); gap: var(--space-2); align-items: center; font-size: var(--text-sm); }
.mom-bar { height: 8px; background: var(--color-chart-grid); border-radius: 4px; overflow: hidden; }
.mom-val { color: var(--color-muted); }
@media (max-width: 600px) { .mom-row { grid-template-columns: minmax(0, 1fr) 80px; } .mom-val { grid-column: 1 / -1; } }

/* Staff workbench (/tools/workbench, docs/34): segmented view tabs, the report builder as a toolbar panel, data tables. */
.ba-tools--workbench .wb-login { max-width: 560px; }
.ba-tools--workbench .wb-login h2 { margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: var(--weight-semibold); }
.ba-tools--workbench .wb-login .filters { margin: 0; padding: 0; border: 0; background: transparent; }
.ba-tools--workbench .wb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-3); }
.ba-tools--workbench .wb-tabs { margin: 0; flex-wrap: wrap; }
.ba-tools--workbench .wb-tabs [role="tab"] { padding: 5px 14px; border: 0; border-radius: 4px; background: transparent; color: var(--color-text-2);
  font-size: var(--text-sm); font-weight: var(--weight-medium); white-space: nowrap; }
.ba-tools--workbench .wb-tabs [role="tab"]:hover { color: var(--color-text); background: transparent; }
.ba-tools--workbench .wb-tabs [role="tab"][aria-selected="true"] { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-1); }
.ba-tools--workbench .wb-out { margin: 0; }
.ba-tools--workbench .wb-form { gap: var(--space-3); padding: var(--space-4); margin-bottom: var(--space-4); }
.ba-tools--workbench .wb-form label { font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--color-text-3); }
.ba-tools--workbench .wb-form input, .ba-tools--workbench .wb-form select { padding: 6px 10px; font-size: var(--text-sm); }
.ba-tools--workbench .wb-form button[type="submit"] { padding: 7px 20px; }
.ba-tools--workbench .wb-table-title { margin: var(--space-6) 0 var(--space-2); }
.ba-tools--workbench .wb-table-title h2 { font-size: var(--text-base); }
.ba-tools--workbench #out > .section-title:first-child { margin-top: 0; }
.ba-tools--workbench #status { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-3); }
.ba-tools--workbench pre.wb-json { background: var(--color-surface-2); color: var(--color-text); border-radius: var(--radius-sm); font: var(--text-xs)/1.5 var(--font-mono); }