/* GENERATED by scripts/ui.ts from data/brand/ba-tokens.css, src/ui/tokens.css, src/ui/components.css and src/ui/pages/*.css (not front, topic or topic-tiles): 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; } }


/* 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; }

/* 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); }