/* benchr share-card / "Download image" generator — styles for benchr-card.js.
   The JS builds the card DOM; this file styles it. Same class names (we own both).

   LAYERS
   ──────────────────────────────────────────────────────────────────────────────
   • DNA  — .bcd-dna: ALWAYS JetBrains Mono, ALWAYS LTR. Wordmark, every number/label,
            footer URL + tag. Identical on every card. Never themed by typeface.
   • SKIN — driven entirely by --card-* custom properties, switched by
            [data-theme][data-appear] on .bcd-card. One block per theme/appearance.

   The card carries its OWN --card-* vars so it looks the same regardless of the
   visitor's light/dark SITE theme. */

/* ════════════════════════════════════════════════════════════════════════════════
   THEME REGISTRY (CSS half — mirrors the THEMES object in benchr-card.js)
   --card-bg, --card-accent, --card-accent-2, --card-text, --card-muted, --card-rule,
   --card-headline-font
   ════════════════════════════════════════════════════════════════════════════════ */

/* default fonts in case a theme omits one */
.bcd-card {
  --card-mono-font: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --card-headline-font: 'Crimson Pro', 'Source Serif 4', Georgia, serif;
  --card-ar-font: 'IBM Plex Sans Arabic', 'El Messiri', system-ui, sans-serif;
}

/* ── anthropic — warm cream / coral, warm serif ─────────────────────────────── */
.bcd-card[data-theme="anthropic"][data-appear="light"] {
  --card-bg: #F4EDE4; --card-bg-2: #ECE2D4;
  --card-accent: #CC785C; --card-accent-2: #BE5A38;
  --card-text: #2E2A26; --card-muted: #6B6258; --card-rule: #D8CBBA;
  --card-headline-font: 'Newsreader', 'Source Serif 4', Georgia, serif;
}
.bcd-card[data-theme="anthropic"][data-appear="dark"] {
  --card-bg: #211C18; --card-bg-2: #2A241F;
  --card-accent: #E0997B; --card-accent-2: #CC785C;
  --card-text: #F3ECE2; --card-muted: #B6A998; --card-rule: #3C342C;
  --card-headline-font: 'Newsreader', 'Source Serif 4', Georgia, serif;
}

/* ── openai — near-black / green, geometric sans ────────────────────────────── */
.bcd-card[data-theme="openai"][data-appear="light"] {
  --card-bg: #F7F7F8; --card-bg-2: #ECECEE;
  --card-accent: #10A37F; --card-accent-2: #0D8A6C;
  --card-text: #15161A; --card-muted: #5E6068; --card-rule: #DEDFE2;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}
.bcd-card[data-theme="openai"][data-appear="dark"] {
  --card-bg: #0B0C0E; --card-bg-2: #16181B;
  --card-accent: #1FBF95; --card-accent-2: #10A37F;
  --card-text: #FFFFFF; --card-muted: #9AA0A6; --card-rule: #25282C;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}

/* ── google — deep / blue→violet, geometric sans ────────────────────────────── */
.bcd-card[data-theme="google"][data-appear="light"] {
  --card-bg: #F6F8FC; --card-bg-2: #E9EEF8;
  --card-accent: #4285F4; --card-accent-2: #8E7CFF;
  --card-text: #1A1C20; --card-muted: #5A6270; --card-rule: #D6DEEC;
  --card-headline-font: 'Manrope', system-ui, sans-serif;
}
.bcd-card[data-theme="google"][data-appear="dark"] {
  --card-bg: #0C1018; --card-bg-2: #141B28;
  --card-accent: #5B9BFF; --card-accent-2: #8E7CFF;
  --card-text: #F5F7FB; --card-muted: #97A2B4; --card-rule: #232C3C;
  --card-headline-font: 'Manrope', system-ui, sans-serif;
}

/* ── mistral — dark / orange→red, clean sans ────────────────────────────────── */
.bcd-card[data-theme="mistral"][data-appear="light"] {
  --card-bg: #FBF6F1; --card-bg-2: #F6E9DC;
  --card-accent: #FF7000; --card-accent-2: #EA2A2A;
  --card-text: #2A1D14; --card-muted: #715B4B; --card-rule: #EAD8C6;
  --card-headline-font: 'Manrope', system-ui, sans-serif;
}
.bcd-card[data-theme="mistral"][data-appear="dark"] {
  --card-bg: #161009; --card-bg-2: #211810;
  --card-accent: #FF8A2A; --card-accent-2: #F0452E;
  --card-text: #FBF1E7; --card-muted: #BBA48F; --card-rule: #36281B;
  --card-headline-font: 'Manrope', system-ui, sans-serif;
}

/* ── deepseek — dark / blue, sans ───────────────────────────────────────────── */
.bcd-card[data-theme="deepseek"][data-appear="light"] {
  --card-bg: #F5F6FD; --card-bg-2: #E7EAFB;
  --card-accent: #4D6BFE; --card-accent-2: #3550E0;
  --card-text: #14161F; --card-muted: #5A6075; --card-rule: #D6DBF6;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}
.bcd-card[data-theme="deepseek"][data-appear="dark"] {
  --card-bg: #0A0C15; --card-bg-2: #121529;
  --card-accent: #6B83FF; --card-accent-2: #4D6BFE;
  --card-text: #F4F5FB; --card-muted: #969CB6; --card-rule: #20253F;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}

/* ── meta — dark / Meta blue, sans ──────────────────────────────────────────── */
.bcd-card[data-theme="meta"][data-appear="light"] {
  --card-bg: #F4F8FE; --card-bg-2: #E5EFFC;
  --card-accent: #0668E1; --card-accent-2: #0A4FB0;
  --card-text: #15181D; --card-muted: #586172; --card-rule: #D2E0F4;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}
.bcd-card[data-theme="meta"][data-appear="dark"] {
  --card-bg: #080C14; --card-bg-2: #101727;
  --card-accent: #3F8DF2; --card-accent-2: #0668E1;
  --card-text: #F3F6FB; --card-muted: #93A0B6; --card-rule: #1D2740;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}

/* ── alibaba (Qwen) — deep indigo→purple, geometric sans ────────────────────── */
.bcd-card[data-theme="alibaba"][data-appear="light"] {
  --card-bg: #F5F5FE; --card-bg-2: #E8E6FB;
  --card-accent: #615CED; --card-accent-2: #4A3FD4;
  --card-text: #14131F; --card-muted: #5B5876; --card-rule: #D8D5F4;
  --card-headline-font: 'Space Grotesk', system-ui, sans-serif;
}
.bcd-card[data-theme="alibaba"][data-appear="dark"] {
  --card-bg: #0B0A16; --card-bg-2: #161329;
  --card-accent: #8A85FF; --card-accent-2: #615CED;
  --card-text: #F4F3FB; --card-muted: #989AC0; --card-rule: #221F3D;
  --card-headline-font: 'Space Grotesk', system-ui, sans-serif;
}

/* ── moonshot (Kimi) — dark, cool slate→violet, humanist sans ───────────────── */
.bcd-card[data-theme="moonshot"][data-appear="light"] {
  --card-bg: #F5F6FA; --card-bg-2: #E8EAF4;
  --card-accent: #6A5CF0; --card-accent-2: #4C5670;
  --card-text: #161823; --card-muted: #585F75; --card-rule: #D7DAE8;
  --card-headline-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}
.bcd-card[data-theme="moonshot"][data-appear="dark"] {
  --card-bg: #0A0B11; --card-bg-2: #14161F;
  --card-accent: #7C5CFF; --card-accent-2: #94A0BC;
  --card-text: #F3F4FA; --card-muted: #939AB2; --card-rule: #1F212E;
  --card-headline-font: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ── xai (Grok) — near-black, crisp near-white, tight geometric sans (minimal) ─ */
.bcd-card[data-theme="xai"][data-appear="light"] {
  --card-bg: #FAFAFA; --card-bg-2: #ECECEC;
  --card-accent: #0A0A0A; --card-accent-2: #3A3A3A;
  --card-text: #0A0A0A; --card-muted: #5E5E5E; --card-rule: #DCDCDC;
  --card-headline-font: 'Sora', system-ui, sans-serif;
}
.bcd-card[data-theme="xai"][data-appear="dark"] {
  --card-bg: #050505; --card-bg-2: #131313;
  --card-accent: #F5F5F5; --card-accent-2: #B8B8B8;
  --card-text: #F7F7F7; --card-muted: #8C8C8C; --card-rule: #1E1E1E;
  --card-headline-font: 'Sora', system-ui, sans-serif;
}

/* ── microsoft (Phi) — blue/teal, clean corporate sans ──────────────────────── */
.bcd-card[data-theme="microsoft"][data-appear="light"] {
  --card-bg: #F4F9FD; --card-bg-2: #E3F0FA;
  --card-accent: #0078D4; --card-accent-2: #008575;
  --card-text: #14181D; --card-muted: #566270; --card-rule: #D0E2F0;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}
.bcd-card[data-theme="microsoft"][data-appear="dark"] {
  --card-bg: #07101A; --card-bg-2: #0F1E2C;
  --card-accent: #3AA0F0; --card-accent-2: #2DC6B5;
  --card-text: #F2F7FB; --card-muted: #90A1B2; --card-rule: #16293A;
  --card-headline-font: 'Inter', system-ui, sans-serif;
}

/* ── benchr (DEFAULT) — deep near-black / benchr purple, display serif ───────── */
.bcd-card[data-theme="benchr"][data-appear="light"] {
  --card-bg: #FBFAF7; --card-bg-2: #F0ECF8;
  --card-accent: #4A2A7E; --card-accent-2: #2C1A52;
  --card-text: #0C0A12; --card-muted: #5C5470; --card-rule: #E0DAEC;
  --card-headline-font: 'Crimson Pro', 'Source Serif 4', Georgia, serif;
}
.bcd-card[data-theme="benchr"][data-appear="dark"] {
  --card-bg: #0D0B14; --card-bg-2: #181327;
  --card-accent: #C6B2EA; --card-accent-2: #9C7FD6;
  --card-text: #F4F1FA; --card-muted: #A79CC0; --card-rule: #241D38;
  --card-headline-font: 'Crimson Pro', 'Source Serif 4', Georgia, serif;
}

/* ════════════════════════════════════════════════════════════════════════════════
   THE CARD — DNA frame + shared structure (sized in CSS px; snapDOM scales it up)
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-card {
  box-sizing: border-box;
  position: relative;
  /* opaque base colour ALWAYS (fallback hard-coded in case a theme var is ever unset) so the card —
     and therefore the exported PNG — is never transparent anywhere. The radial tint sits ON TOP of
     this solid base. */
  background-color: var(--card-bg, #0D0B14);
  color: var(--card-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-style: normal;
  /* subtle skin depth — never decoration, just a tonal field that reads as "designed" */
  background-image: radial-gradient(120% 90% at 88% -10%, var(--card-bg-2) 0%, transparent 60%);
  -webkit-font-smoothing: antialiased;
}
/* Change 4 — MORPH animation: when the owner switches Size / Appearance / Theme the card animates
   its box (width/height) and colours instead of snapping. Only the PREVIEW node transitions; the
   exporting state below kills it so a capture is never caught mid-animation. */
.bcd-card--preview {
  /* NOTE: `transform` is intentionally NOT transitioned. transform is how fitInto contain-fits the
     card to the preview stage (transform: scale(fit)); it MUST apply instantly. Transitioning it let
     a re-fit get caught mid-animation, leaving the card stuck near scale 1 → it overflowed the stage.
     The size morph still reads as animated because the card BOX (width/height) + colours transition;
     the fit scale snaps to keep it contained. */
  transition:
    width .25s cubic-bezier(.2,.7,.2,1),
    height .25s cubic-bezier(.2,.7,.2,1),
    background-color .25s ease,
    color .25s ease;
}
.bcd-card *,
.bcd-card *::before,
.bcd-card *::after { box-sizing: border-box; font-style: normal; }

/* sizes — these are the EXACT export dimensions in CSS px */
.bcd-card[data-size="square"] { width: 1080px; height: 1080px; padding: 84px; }
.bcd-card[data-size="wide"]   { width: 1200px; height: 630px;  padding: 60px 72px; }

/* ── DNA — JetBrains Mono, LTR everywhere ─────────────────────────────────────── */
.bcd-dna {
  font-family: var(--card-mono-font) !important;
  direction: ltr !important;
  font-style: normal !important;
  font-variant-ligatures: none;
  -webkit-font-feature-settings: "liga" 0;
  font-feature-settings: "liga" 0;
}

/* top bar: wordmark TL (constant) + optional kicker */
.bcd-top {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex: 0 0 auto;
}
.bcd-brand { display: flex; align-items: baseline; gap: 16px; min-width: 0; }
.bcd-wordmark {
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--card-text);
  line-height: 1;
}
/* DECK slide counter — mono DNA, sits next to the wordmark; reads "1/total" … "N/total" per slide
   (total is dynamic: a deck is 3–5 slides depending on how much substantive content the page has) */
.bcd-slidecount {
  font-weight: 600; line-height: 1; color: var(--card-muted);
  letter-spacing: 0.04em;
  padding: 0.18em 0.5em; border-radius: 6px;
  border: 1.5px solid var(--card-rule);
}
.bcd-card[data-size="square"] .bcd-slidecount { font-size: 22px; }
.bcd-card[data-size="wide"]   .bcd-slidecount { font-size: 17px; }
.bcd-card[data-size="square"] .bcd-wordmark { font-size: 40px; }
.bcd-card[data-size="wide"]   .bcd-wordmark { font-size: 30px; }
.bcd-wordmark::after {
  /* the benchr accent dot — a tiny brand tick, not "decoration" */
  content: ""; display: inline-block; vertical-align: baseline;
  width: 0.16em; height: 0.16em; margin-left: 0.12em; border-radius: 50%;
  background: var(--card-accent);
}
.bcd-kicker {
  font-family: var(--card-headline-font);
  font-weight: 600; color: var(--card-muted);
  letter-spacing: 0.02em; text-transform: uppercase;
  font-size: 22px; text-align: right;
}
.bcd-card[data-size="wide"] .bcd-kicker { font-size: 18px; }
.bcd-card--ar .bcd-kicker { font-family: var(--card-ar-font); }

/* main content region — fills the space between top bar and footer */
.bcd-main {
  flex: 1 1 auto;
  display: flex; flex-direction: column; justify-content: center;
  min-height: 0;
  padding: 32px 0;
}
.bcd-card[data-size="wide"] .bcd-main { padding: 18px 0; }
.bcd-main--rtl { direction: rtl; text-align: right; }

/* WIDE (1200×630) — single-subject content is much narrower than the landscape card, so it hugged the
   left edge with a big empty right half. CENTER it horizontally (it's already vertically centered via
   .bcd-main) so wide cards read balanced + tidy. comparison + ranking fill the width by design and keep
   their own alignment. */
.bcd-card[data-size="wide"] .bcd-spec,
.bcd-card[data-size="wide"] .bcd-dep,
.bcd-card[data-size="wide"] .bcd-best,
.bcd-card[data-size="wide"] .bcd-tool,
.bcd-card[data-size="wide"] .bcd-generic,
.bcd-card[data-size="wide"] .bcd-slide--cover { align-items: center; text-align: center; }
.bcd-card[data-size="wide"] .bcd-spec__prices,
.bcd-card[data-size="wide"] .bcd-spec__notes,
.bcd-card[data-size="wide"] .bcd-dep__repl,
.bcd-card[data-size="wide"] .bcd-best__winner { justify-content: center; align-items: center; }
.bcd-card[data-size="wide"] .bcd-spec .bcd-takeaway,
.bcd-card[data-size="wide"] .bcd-generic .bcd-takeaway,
.bcd-card[data-size="wide"] .bcd-best .bcd-takeaway,
.bcd-card[data-size="wide"] .bcd-slide--cover .bcd-takeaway { margin-left: auto; margin-right: auto; }
/* RTL wide: keep the same centered alignment (override the LTR-left / RTL-right defaults) */
.bcd-main--rtl.bcd-card[data-size="wide"] .bcd-takeaway,
.bcd-card[data-size="wide"] .bcd-main--rtl .bcd-takeaway { margin-left: auto; margin-right: auto; }

/* footer — URL (DNA, LTR) left, reference tag right */
.bcd-foot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-top: 22px;
  border-top: 1.5px solid var(--card-rule);
  font-size: 19px; font-weight: 500;
  letter-spacing: 0.01em;
}
.bcd-card[data-size="wide"] .bcd-foot { font-size: 15px; padding-top: 16px; }
.bcd-foot__url { color: var(--card-accent); font-weight: 600; }
.bcd-foot__tag { color: var(--card-muted); letter-spacing: 0.12em; }
/* footer stays LTR even on AR cards (it's DNA), so URL is always on the left */

/* ── shared text elements ─────────────────────────────────────────────────────── */
.bcd-headline {
  font-family: var(--card-headline-font);
  font-weight: 700; line-height: 1.04; color: var(--card-text);
  letter-spacing: -0.015em;
}
.bcd-card--ar .bcd-headline { font-family: var(--card-ar-font); letter-spacing: 0; line-height: 1.25; }
.bcd-headline--lg { font-size: 78px; }
.bcd-headline--md { font-size: 60px; }
.bcd-headline--sm { font-size: 40px; }
.bcd-card[data-size="wide"] .bcd-headline--lg { font-size: 52px; }
.bcd-card[data-size="wide"] .bcd-headline--md { font-size: 42px; }
.bcd-card[data-size="wide"] .bcd-headline--sm { font-size: 30px; }

.bcd-takeaway {
  font-family: var(--card-headline-font);
  color: var(--card-muted); font-weight: 500;
  font-size: 30px; line-height: 1.4; margin-top: 22px;
  max-width: 30ch;
}
.bcd-card--ar .bcd-takeaway { font-family: var(--card-ar-font); line-height: 1.7; max-width: 34ch; }
.bcd-card[data-size="wide"] .bcd-takeaway { font-size: 22px; margin-top: 14px; }
.bcd-main--rtl .bcd-takeaway { margin-left: auto; }

/* ── stat (DNA): number + label ───────────────────────────────────────────────── */
.bcd-stat { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
/* line-height MUST be >= 1: a sub-1 line-height let the glyph ink (descenders, the "/" in
   "68 tok/s", "$") overflow the line box downward and collide with the label below. Keep the
   value (value + its unit) on ONE line so "68 tok/s" never wraps on top of its label. */
.bcd-stat__num {
  font-weight: 700; line-height: 1; color: var(--card-text);
  letter-spacing: -0.03em; font-size: 56px; white-space: nowrap;
}
.bcd-stat--accent .bcd-stat__num { color: var(--card-accent); }
.bcd-stat--big .bcd-stat__num { font-size: 132px; }
.bcd-card[data-size="wide"] .bcd-stat--big .bcd-stat__num { font-size: 96px; }
.bcd-stat__label {
  font-weight: 500; color: var(--card-muted);
  letter-spacing: 0.1em; font-size: 18px; text-transform: uppercase;
}
.bcd-card[data-size="wide"] .bcd-stat__label { font-size: 14px; }
.bcd-stat__est {
  font-size: 0.42em; color: var(--card-muted); font-weight: 500;
  letter-spacing: 0; vertical-align: super; text-transform: none;
}

/* a tiny mono note line (fallback model, ranking caption, etc.) */
.bcd-note {
  color: var(--card-muted); font-size: 20px; font-weight: 500;
  margin-top: 24px; letter-spacing: 0.01em;
}
.bcd-card[data-size="wide"] .bcd-note { font-size: 15px; margin-top: 14px; }

/* ════════════════════════════════════════════════════════════════════════════════
   ARCHETYPE 1 — model-spec
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-spec { display: flex; flex-direction: column; gap: 4px; }
.bcd-spec__prices {
  display: flex; gap: 72px; flex-wrap: wrap; margin-bottom: 36px;
}
.bcd-card[data-size="wide"] .bcd-spec__prices { gap: 48px; margin-bottom: 18px; }
.bcd-spec__prices--free .bcd-stat--big .bcd-stat__num { font-size: 72px; }
.bcd-card[data-size="wide"] .bcd-spec__prices--free .bcd-stat--big .bcd-stat__num { font-size: 52px; }
.bcd-spec__notes {
  display: flex; gap: 56px; flex-wrap: wrap; margin-top: 30px;
}
.bcd-card[data-size="wide"] .bcd-spec__notes { gap: 40px; margin-top: 16px; }
.bcd-main--rtl .bcd-spec__prices,
.bcd-main--rtl .bcd-spec__notes { flex-direction: row-reverse; justify-content: flex-end; }

/* ════════════════════════════════════════════════════════════════════════════════
   ARCHETYPE 2 — comparison (split provider accents)
   CONTAINED two-column layout: side A | VS | side B, with a verdict block beneath. Every element is
   sized to FIT its column — names clamp to two lines, the key stat is capped well below the single-card
   "big" size so it can't collide with the name / the other column / the VS, and overflow is hidden so
   nothing bleeds past the 1080² / 1200×630 card edge.
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-cmp { display: flex; flex-direction: column; height: 100%; gap: 28px; min-height: 0; }
.bcd-cmp__grid {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch;
  gap: 28px; flex: 1 1 auto; min-height: 0;
}
.bcd-cmp__side {
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
  min-width: 0; overflow: hidden;            /* contain everything within the column */
}
.bcd-cmp__side--b { text-align: right; align-items: flex-end; }
.bcd-cmp__side--a { text-align: left;  align-items: flex-start; }
/* each side inherits its OWN provider accent from its nested data-theme/appear */
.bcd-cmp__name {
  font-family: var(--card-headline-font); font-weight: 700;
  font-size: 44px; line-height: 1.08; color: var(--card-text);
  /* clamp a long model name to two lines so it wraps INSIDE the column instead of bleeding out */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
  overflow: hidden; max-width: 100%; word-break: break-word; overflow-wrap: anywhere;
}
.bcd-card--ar .bcd-cmp__name { font-family: var(--card-ar-font); line-height: 1.3; }
.bcd-card[data-size="wide"] .bcd-cmp__name { font-size: 32px; -webkit-line-clamp: 2; }
/* the per-side stats: capped so they FIT the column (the single-card 132px "big" would overflow and
   collide). The number stays on one line; the label wraps under it. */
.bcd-cmp__side .bcd-stat { min-width: 0; max-width: 100%; }
.bcd-cmp__side .bcd-stat__num { color: var(--card-accent); }
.bcd-cmp__side .bcd-stat--big .bcd-stat__num {
  font-size: 60px; letter-spacing: -0.02em; white-space: nowrap;
  max-width: 100%;
}
.bcd-card[data-size="wide"] .bcd-cmp__side .bcd-stat--big .bcd-stat__num { font-size: 46px; }
/* the secondary (non-big) stat in a side */
.bcd-cmp__side .bcd-stat__num { font-size: 38px; }
.bcd-card[data-size="wide"] .bcd-cmp__side .bcd-stat__num { font-size: 28px; }
.bcd-cmp__side .bcd-stat__label { font-size: 16px; white-space: normal; line-height: 1.3; }
.bcd-card[data-size="wide"] .bcd-cmp__side .bcd-stat__label { font-size: 13px; }
/* the "FREE / SELF-HOSTED" value is TEXT, not a number — let it wrap to two lines and shrink so it
   never renders as a giant single-line monster that overlaps the other column. */
.bcd-cmp__side .bcd-stat--big .bcd-stat__num.bcd-cmp__free,
.bcd-cmp__side .bcd-cmp__free {
  font-size: 34px; line-height: 1.12; white-space: normal;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bcd-card[data-size="wide"] .bcd-cmp__side .bcd-cmp__free { font-size: 26px; }
.bcd-cmp__side--b .bcd-stat { align-items: flex-end; text-align: right; }
.bcd-cmp__side--a .bcd-stat { align-items: flex-start; text-align: left; }
/* the centred VS divider — a slim full-height rule with the mono "VS" centred on it */
.bcd-cmp__vs {
  align-self: center;
  font-weight: 700; font-size: 34px; color: var(--card-muted);
  letter-spacing: 0.05em; opacity: 0.85;
  padding: 0 4px;
}
.bcd-card[data-size="wide"] .bcd-cmp__vs { font-size: 26px; }
.bcd-cmp__verdict {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px;
  border-top: 1.5px solid var(--card-rule); padding-top: 24px;
  min-width: 0; overflow: hidden;
}
.bcd-cmp__verdict-lab { font-size: 17px; letter-spacing: 0.12em; color: var(--card-accent); font-weight: 600; }
.bcd-cmp__verdict-txt {
  font-family: var(--card-headline-font); font-size: 28px; line-height: 1.35; color: var(--card-text);
  /* contain a long verdict to three lines so it never pushes the block past the footer */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.bcd-card--ar .bcd-cmp__verdict-txt { font-family: var(--card-ar-font); line-height: 1.55; }
.bcd-card[data-size="wide"] .bcd-cmp__verdict-txt { font-size: 21px; -webkit-line-clamp: 2; }
.bcd-card[data-size="wide"] .bcd-cmp__verdict { padding-top: 16px; }
/* RTL: side A sits on the right; keep the per-side text alignment intact via the grid flow */
.bcd-main--rtl .bcd-cmp__grid { direction: rtl; }

/* ════════════════════════════════════════════════════════════════════════════════
   ARCHETYPE 3 — deprecation (huge mono DATE, urgent)
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-dep { display: flex; flex-direction: column; gap: 8px; }
.bcd-dep .bcd-stat--big .bcd-stat__num {
  font-size: 116px; letter-spacing: -0.02em;
}
.bcd-card[data-size="wide"] .bcd-dep .bcd-stat--big .bcd-stat__num { font-size: 84px; }
.bcd-dep .bcd-stat__label { font-size: 24px; letter-spacing: 0.14em; }
.bcd-card[data-size="wide"] .bcd-dep .bcd-stat__label { font-size: 17px; }
/* urgency colour: soon/today → accent-2 (the deeper/redder tone), past → muted */
.bcd-dep--soon .bcd-stat__label { color: var(--card-accent-2); }
.bcd-dep--past .bcd-stat__label { color: var(--card-muted); }
.bcd-dep .bcd-headline { margin-top: 28px; }
.bcd-dep__repl {
  display: flex; flex-direction: column; gap: 8px; margin-top: 34px;
  border-top: 1.5px solid var(--card-rule); padding-top: 24px;
}
.bcd-dep__repl-lab { font-size: 17px; letter-spacing: 0.12em; color: var(--card-muted); font-weight: 600; }
.bcd-dep__repl-val { font-size: 34px; font-weight: 700; color: var(--card-accent); letter-spacing: -0.01em; }
.bcd-card[data-size="wide"] .bcd-dep__repl-val { font-size: 26px; }
.bcd-card[data-size="wide"] .bcd-dep__repl { margin-top: 16px; padding-top: 14px; }

/* ════════════════════════════════════════════════════════════════════════════════
   ARCHETYPE 4 — ranking (1..N list, mono scores, accent on #1)
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-rank { display: flex; flex-direction: column; gap: 28px; height: 100%; }
.bcd-rank .bcd-headline { flex: 0 0 auto; }
.bcd-rank__list { display: flex; flex-direction: column; gap: 0; flex: 1 1 auto; justify-content: center; }
.bcd-rank__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 28px; padding: 18px 0; border-bottom: 1.5px solid var(--card-rule);
}
.bcd-rank__row:last-child { border-bottom: 0; }
.bcd-rank__pos {
  font-weight: 700; font-size: 40px; color: var(--card-muted);
  width: 1.4em; text-align: right; line-height: 1;
}
.bcd-rank__row--top .bcd-rank__pos { color: var(--card-accent); }
.bcd-rank__name {
  font-family: var(--card-headline-font); font-weight: 600;
  font-size: 40px; color: var(--card-text); line-height: 1.1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bcd-card--ar .bcd-rank__name { font-family: var(--card-ar-font); }
.bcd-rank__row--top .bcd-rank__name { color: var(--card-accent); }
.bcd-rank__score { font-weight: 700; font-size: 40px; color: var(--card-text); letter-spacing: -0.02em; }
.bcd-rank__row--top .bcd-rank__score { color: var(--card-accent); }
.bcd-card[data-size="wide"] .bcd-rank__pos,
.bcd-card[data-size="wide"] .bcd-rank__name,
.bcd-card[data-size="wide"] .bcd-rank__score { font-size: 28px; }
.bcd-card[data-size="wide"] .bcd-rank__row { padding: 9px 0; }
.bcd-card[data-size="wide"] .bcd-rank { gap: 14px; }
.bcd-main--rtl .bcd-rank__pos { text-align: left; }

/* ════════════════════════════════════════════════════════════════════════════════
   ARCHETYPE 5 — best-for
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-best { display: flex; flex-direction: column; gap: 14px; }
.bcd-best .bcd-headline { margin-bottom: 18px; }
.bcd-best__winner { display: flex; flex-direction: column; gap: 6px; }
.bcd-best__winner-lab { font-size: 18px; letter-spacing: 0.12em; color: var(--card-accent); font-weight: 600; }
.bcd-best__winner-name {
  font-family: var(--card-headline-font); font-weight: 700;
  font-size: 68px; color: var(--card-text); line-height: 1.02;
}
.bcd-card--ar .bcd-best__winner-name,
.bcd-card--ar .bcd-best__runner-name { font-family: var(--card-ar-font); }
.bcd-card[data-size="wide"] .bcd-best__winner-name { font-size: 48px; }
.bcd-best__runner { display: flex; align-items: baseline; gap: 14px; margin-top: 8px; }
.bcd-best__runner-lab { font-size: 16px; letter-spacing: 0.12em; color: var(--card-muted); font-weight: 600; }
.bcd-best__runner-name { font-family: var(--card-headline-font); font-weight: 600; font-size: 38px; color: var(--card-muted); }
.bcd-card[data-size="wide"] .bcd-best__runner-name { font-size: 28px; }
.bcd-main--rtl .bcd-best__runner { flex-direction: row-reverse; justify-content: flex-end; }

/* ════════════════════════════════════════════════════════════════════════════════
   ARCHETYPE 6 — tool   /   7 — generic  (lean on shared headline/takeaway/stat)
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-tool, .bcd-generic { display: flex; flex-direction: column; gap: 14px; }
.bcd-tool .bcd-stat--big { margin-bottom: 18px; }
.bcd-tool .bcd-stat--big .bcd-stat__num { font-size: 112px; }
.bcd-card[data-size="wide"] .bcd-tool .bcd-stat--big .bcd-stat__num { font-size: 80px; }

/* ════════════════════════════════════════════════════════════════════════════════
   DECK SLIDES — a 3–5 card deck (cover + 2–4 points). Same DNA + skin as the single card; only the
   body layout differs. Each slide carries the mono "N/total" counter (styled above).

   Point slides are PACKED: a SMALL mono index chip + the section heading on one row, then a
   substantial fill block (paragraph + optional bullet list + an optional standout stat) that grows to
   fill the card's vertical space. The ordinal is a quiet index, NOT a giant glyph dominating a blank
   card (the old 120px ordinal is what made "empty" slides look ~90% whitespace).
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-slide { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.bcd-slide--cover { justify-content: center; gap: 8px; }
.bcd-slide--cover .bcd-takeaway { margin-top: 26px; max-width: 30ch; }
.bcd-card[data-size="wide"] .bcd-slide--cover .bcd-takeaway { margin-top: 16px; max-width: 46ch; }

/* point slide: heading row (small ordinal + heading), then the fill block beneath */
.bcd-slide--point { justify-content: flex-start; gap: 0; padding-top: 4px; }
.bcd-slide__head {
  flex: 0 0 auto; display: flex; align-items: baseline; gap: 18px; min-width: 0;
}
.bcd-main--rtl .bcd-slide__head { flex-direction: row-reverse; }
/* the index chip — small, mono, accent; a label not a hero */
.bcd-slide__ord {
  flex: 0 0 auto;
  font-weight: 700; line-height: 1; color: var(--card-accent);
  letter-spacing: 0; opacity: 0.9;
  border: 2px solid var(--card-rule); border-radius: 10px;
  padding: 0.12em 0.42em;
}
.bcd-card[data-size="square"] .bcd-slide__ord { font-size: 30px; }
.bcd-card[data-size="wide"]   .bcd-slide__ord { font-size: 22px; }
.bcd-slide__head .bcd-headline { flex: 1 1 auto; min-width: 0; }
.bcd-main--rtl .bcd-slide__ord { text-align: center; }
/* Point-slide headlines run a notch smaller than the default md size. Two reasons: (1) they share the
   card with a full body paragraph, so a slightly smaller head balances the slide; (2) on EXPORT, snapDOM
   rasterizes the serif headline and can fall back to a wider font in the SVG — a 60px headline that just
   fits on one line live then RE-WRAPS to two lines in the PNG and collides with the body. The smaller
   size keeps a comfortable width margin so it stays on its intended line count in the exported image. */
.bcd-card[data-size="square"] .bcd-slide--point .bcd-headline { font-size: 46px; }
.bcd-card[data-size="wide"]   .bcd-slide--point .bcd-headline { font-size: 33px; }

/* the fill block — grows to occupy the space below the heading so the slide reads FULL */
.bcd-slide__fill {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: flex-start;
  margin-top: 22px;
}
.bcd-card[data-size="wide"] .bcd-slide__fill { margin-top: 12px; }
.bcd-slide__fill .bcd-takeaway { margin-top: 0; max-width: 42ch; color: var(--card-text); }
.bcd-card[data-size="square"] .bcd-slide__fill .bcd-takeaway { font-size: 32px; line-height: 1.42; }
.bcd-card[data-size="wide"]   .bcd-slide__fill .bcd-takeaway { font-size: 22px; max-width: 60ch; }
.bcd-card--ar .bcd-slide__fill .bcd-takeaway { max-width: 48ch; }

/* bullet list — page-sourced excerpts, mono dash marks (DNA), contained */
.bcd-slide__bullets {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 14px; min-width: 0;
}
.bcd-card[data-size="wide"] .bcd-slide__bullets { gap: 9px; margin-top: 14px; }
.bcd-slide__bullet {
  display: flex; gap: 14px; align-items: baseline; min-width: 0;
  font-family: var(--card-headline-font); color: var(--card-text);
}
.bcd-card--ar .bcd-slide__bullet { font-family: var(--card-ar-font); }
.bcd-main--rtl .bcd-slide__bullet { flex-direction: row-reverse; text-align: right; }
.bcd-slide__bullet-mark { flex: 0 0 auto; color: var(--card-accent); font-weight: 700; }
.bcd-slide__bullet-txt {
  flex: 1 1 auto; min-width: 0; font-weight: 500; line-height: 1.34;
  /* keep each bullet to two lines so three of them always fit the card */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.bcd-card[data-size="square"] .bcd-slide__bullet { font-size: 27px; }
.bcd-card[data-size="wide"]   .bcd-slide__bullet { font-size: 19px; }

/* a quiet standout stat at the foot of the fill block (mono, accent) */
.bcd-slide__stat {
  margin-top: auto; padding-top: 16px;
  font-weight: 700; color: var(--card-accent); letter-spacing: -0.02em; line-height: 1;
}
.bcd-card[data-size="square"] .bcd-slide__stat { font-size: 44px; }
.bcd-card[data-size="wide"]   .bcd-slide__stat { font-size: 30px; padding-top: 8px; }
.bcd-main--rtl .bcd-slide__stat { text-align: right; }

/* ════════════════════════════════════════════════════════════════════════════════
   TRIGGER BUTTON — one sharp "Download image" button on every page
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-trigger {
  position: fixed; right: 16px; bottom: 16px; z-index: 95;
  font-family: var(--font-mono, 'JetBrains Mono', monospace) !important;
  direction: ltr;
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 10px 16px;
  color: var(--orange, #4A2A7E);
  background: var(--white, #fff);
  border: 1.5px solid var(--orange, #4A2A7E);
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  -webkit-tap-highlight-color: transparent;
  transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.bcd-trigger:hover,
.bcd-trigger:focus-visible {
  background: var(--orange, #4A2A7E); color: var(--white, #fff);
  transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.bcd-trigger:focus-visible { outline: 2px solid var(--orange, #4A2A7E); outline-offset: 3px; }
/* dark site theme: keep the chip legible */
html[data-theme="dark"] .bcd-trigger {
  color: var(--accent-on-dark, #C6B2EA);
  background: rgba(13, 11, 20, 0.92);
  border-color: var(--accent-on-dark, #C6B2EA);
}
html[data-theme="dark"] .bcd-trigger:hover,
html[data-theme="dark"] .bcd-trigger:focus-visible {
  background: var(--accent-on-dark, #C6B2EA); color: #0D0B14;
}
[dir="rtl"] .bcd-trigger { right: auto; left: 16px; }

/* ── IN-CONTENT variant: the trigger is mounted into the article flow (after the short-answer /
   page head) instead of floating in the corner. Drop the fixed positioning + corner offsets +
   pill shadow; keep the sharp mono label + accent border so it stays on-brand. The wrapper gives
   it its own line and spacing under the answer it belongs to. ── */
.bcd-trigger-wrap { margin: 22px 0 4px; }
.bcd-trigger--inline {
  position: static; right: auto; bottom: auto; left: auto; z-index: auto;
  box-shadow: none;
  display: inline-flex; align-items: center; gap: 0.5em;
  vertical-align: middle;
}
.bcd-trigger--inline:hover,
.bcd-trigger--inline:focus-visible { box-shadow: none; }
/* the corner-only RTL flip must not apply to the in-flow button */
[dir="rtl"] .bcd-trigger--inline { right: auto; left: auto; }
.bcd-trigger--inline::before {
  /* a small downward-arrow mark so the mono label still reads as a download action, on-brand */
  content: "\2193"; font-weight: 700; opacity: 0.85;
}

/* ════════════════════════════════════════════════════════════════════════════════
   PANEL / OVERLAY — fixed overlay (no layout shift); live preview === export node
   ════════════════════════════════════════════════════════════════════════════════ */
.bcd-lock { overflow: hidden !important; }

.bcd-overlay {
  position: fixed; inset: 0; z-index: 2147483600;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 7, 14, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-style: normal;
}
.bcd-overlay--in { opacity: 1; }

.bcd-panel {
  background: var(--white, #fff);
  color: var(--black, #0C0A12);
  border-radius: 16px;
  /* TWO-COLUMN on desktop: a big preview fills its own full-height column on one side, the controls
     stack on the other. A square card preview is HEIGHT-bound in a single column (it competes with the
     control rows for vertical space) so it stayed small; its own column makes it large and the size is
     INDEPENDENT of viewport height. A determinate panel height lets the 1fr preview row claim real
     space. Only the on-screen PREVIEW grows — the exported PNG is captured at the card's true 1080/1200
     px via .bcd-card--exporting (transform:none), so downloads keep their natural sizes. */
  width: min(880px, calc(100vw - 32px));
  height: min(620px, calc(100vh - 48px));
  max-height: calc(100vh - 48px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "head     head"
    "stage    controls"
    "stage    actions";
  overflow: hidden;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  transform: translateY(8px) scale(0.99);
  transition: transform .22s cubic-bezier(.2,.7,.2,1);
}
.bcd-overlay--in .bcd-panel { transform: none; }
/* place each region into the two-column grid */
.bcd-panel__head { grid-area: head; }
.bcd-stage { grid-area: stage; border-right: 1px solid var(--rule, #E0DAEC); }
html[data-theme="dark"] .bcd-stage { border-right-color: #2A2340; }
.bcd-controls { grid-area: controls; align-self: start; overflow: auto; border-top: 0; }
.bcd-actions { grid-area: actions; }
/* in the narrow controls column the label+segment don't fit side by side (e.g. "Wide 1200×630"
   clipped) — stack the label above a full-width segment so every option fits */
.bcd-controls .bcd-field { flex-direction: column; align-items: stretch; gap: 7px; }
.bcd-controls .bcd-seg { width: 100%; }
.bcd-controls .bcd-seg__btn { flex: 1 1 0; text-align: center; }
/* narrow window / phone: single column. Switch OFF the desktop two-column grid → a FLEX column so the
   actions row (the Download button) PINS to the bottom and stays visible, while the preview + controls
   take the space above and scroll if needed. With the grid + overflow:hidden a tall stack overflowed
   the capped panel height and CLIPPED the bottom — so on phones the "Download" button disappeared. */
@media (max-width: 760px) {
  .bcd-panel {
    width: min(560px, calc(100vw - 20px));
    height: auto;
    max-height: calc(100vh - 20px);
    display: flex;
    flex-direction: column;
    overflow-y: auto;                       /* the whole panel scrolls → NOTHING is clipped */
    -webkit-overflow-scrolling: touch;
  }
  .bcd-panel__head { flex: 0 0 auto; }
  .bcd-stage { flex: 0 0 auto; overflow: visible; border-right: 0; }
  .bcd-controls { flex: 0 0 auto; overflow: visible; border-top: 1px solid var(--rule, #E0DAEC); }
  html[data-theme="dark"] .bcd-controls { border-top-color: #2A2340; }
  /* the Download row STAYS pinned to the bottom of the panel (sticky over an opaque bg) so it is
     ALWAYS visible on a phone instead of being scrolled/clipped out of view */
  .bcd-actions {
    flex: 0 0 auto;
    position: sticky; bottom: 0; z-index: 1;
    background: var(--white, #fff);
  }
  html[data-theme="dark"] .bcd-actions { background: #15121E; }
}
/* panel chrome follows the visitor's SITE theme so it feels native, but the CARD inside never does */
html[data-theme="dark"] .bcd-panel { background: #15121E; color: #F4F1FA; }

.bcd-panel__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid var(--rule, #E0DAEC);
}
html[data-theme="dark"] .bcd-panel__head { border-color: #2A2340; }
.bcd-panel__title {
  font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--black, #0C0A12);
}
html[data-theme="dark"] .bcd-panel__title { color: #F4F1FA; }
.bcd-panel__close {
  font-size: 16px; line-height: 1; width: 32px; height: 32px;
  border-radius: 8px; color: var(--black, #0C0A12);
  display: grid; place-items: center; cursor: pointer;
  transition: background .15s ease;
}
.bcd-panel__close:hover { background: rgba(0,0,0,0.07); }
html[data-theme="dark"] .bcd-panel__close { color: #F4F1FA; }
html[data-theme="dark"] .bcd-panel__close:hover { background: rgba(255,255,255,0.1); }

/* live preview stage — the card is scaled down to fit; transform keeps it pixel-faithful.
   SOLID neutral backdrop (NOT a checkerboard): a checkered transparency pattern read as
   "the image is transparent / not a full picture". A flat soft-gray field makes the card read as a
   complete, solid image and works under both light and dark panel chrome. */
.bcd-stage {
  flex: 1 1 auto; min-height: 0; overflow: auto;
  display: flex; align-items: center; justify-content: center;
  padding: 18px;
  background: #ECECEF;
}
html[data-theme="dark"] .bcd-stage {
  background: #1B1726;
}
/* preview card: CONTAIN-FIT to the stage. The JS (fitPreview) computes scale = min(stageW/cardW,
   stageH/cardH) and writes `transform: scale(s)` + compensating negative right/bottom margins
   INLINE, so the WHOLE card (wordmark → footer) is always visible — never width-only-fit (which
   clipped the top and bottom). transform-origin is the TOP-LEFT corner so the painted footprint is
   exactly cardW*s × cardH*s and the negative margins collapse the reserved box to that size; the
   flex stage then centres it. The exported node is the SAME element at full size. */
.bcd-card--preview { flex: 0 0 auto; transform-origin: top left; }
/* During export the JS adds .bcd-card--exporting: drop the fit-to-panel transform + its
   compensating margins (these win over the inline styles via !important) so snapDOM/html-to-image
   capture the node at its TRUE 1080/1200 px. Content is unchanged — only the preview down-scale is
   removed → preview === PNG. */
.bcd-card--preview.bcd-card--exporting {
  transform: none !important;
  margin: 0 !important;
  /* kill the morph transition during capture so snapDOM never grabs the node mid-animation */
  transition: none !important;
}

/* ── DECK preview: big selected slide on top (claims most of the stage), a compact row of 5 numbered
   thumbnails below it (above the controls). The stage becomes a column; the big region grows from a
   ZERO basis so it reliably takes all the space the small thumbnail strip leaves — both use the SAME
   contain-fit so the whole slide shows, never cropped. ── */
/* tighter padding in deck mode so the big preview + thumb row both get room */
.bcd-stage--deck { flex-direction: column; gap: 10px; padding: 14px; }
/* The big region grows to fill the stage, but carries a real min-height so it never collapses to zero
   (the scaled card has no intrinsic height, which would otherwise let the flex column — and the
   content-sized panel — collapse around it). flex-grow takes all the space the small thumb strip
   leaves, so slide 1 reads genuinely LARGE; on tall viewports it grows much bigger than this floor. */
.bcd-stage__big {
  flex: 1 1 auto; min-height: 96px; width: 100%;
  display: flex; align-items: center; justify-content: center;
}
.bcd-thumbs {
  flex: 0 0 auto; display: flex; gap: 8px; align-items: stretch; justify-content: center;
  width: 100%;
}
/* thumbnails are HEIGHT-constrained so they stay small and the big preview dominates */
.bcd-thumb {
  flex: 0 0 auto;
  position: relative; cursor: pointer;
  border-radius: 7px; padding: 3px;
  background: rgba(0,0,0,0.04);
  border: 1.5px solid transparent;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
html[data-theme="dark"] .bcd-thumb { background: rgba(255,255,255,0.05); }
.bcd-thumb:hover { transform: translateY(-1px); }
.bcd-thumb--active { border-color: var(--orange, #4A2A7E); background: rgba(74,42,126,0.08); }
html[data-theme="dark"] .bcd-thumb--active { border-color: var(--accent-on-dark, #C6B2EA); background: rgba(198,178,234,0.12); }
.bcd-thumb:focus-visible { outline: 2px solid var(--orange, #4A2A7E); outline-offset: 2px; }
/* the thumb keeps the slide's aspect ratio; the clone is contain-fit into it by JS. We fix a small
   HEIGHT (square: 52px) and let width follow the aspect ratio so the strip never crowds the preview. */
.bcd-thumb__inner {
  position: relative; height: 46px; width: 46px;
  overflow: hidden; border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  background: #fff;
}
.bcd-thumbs[data-size="wide"] .bcd-thumb__inner { width: 88px; height: 46px; } /* 1200:630 ≈ 1.9:1 */
.bcd-card--preview.bcd-card--exporting,
.bcd-card--thumb { /* keep the thumbnail clone non-interactive + top-left scaled */ }
.bcd-card--thumb { flex: 0 0 auto; transform-origin: top left; pointer-events: none; }
.bcd-thumb__n {
  position: absolute; top: 5px;
  font-size: 10px; font-weight: 700; line-height: 1;
  color: #fff; background: rgba(0,0,0,0.55);
  padding: 2px 5px; border-radius: 4px; letter-spacing: 0.04em;
}
[dir="ltr"] .bcd-thumb__n, .bcd-thumb__n { left: 7px; }
[dir="rtl"] .bcd-thumb__n { left: auto; right: 7px; }

/* off-screen render host: gives detached deck slides FULL 1080/1200 layout during capture.
   Positioned far off-screen (NOT display:none / visibility:hidden — those yield zero/blank layout). */
.bcd-capture-host {
  position: fixed; left: -100000px; top: 0;
  width: 0; height: 0; overflow: visible;
  pointer-events: none; opacity: 1; z-index: -1;
}

.bcd-controls {
  display: flex; flex-direction: column; gap: 11px;
  padding: 13px 18px; border-top: 1px solid var(--rule, #E0DAEC);
}
html[data-theme="dark"] .bcd-controls { border-color: #2A2340; }
.bcd-field { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.bcd-field__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-deep, #5C5470); white-space: nowrap;
}
html[data-theme="dark"] .bcd-field__label { color: #A79CC0; }

.bcd-seg {
  display: inline-flex; gap: 2px; padding: 3px;
  background: var(--code-bg, #F0ECF8); border-radius: 9px;
}
html[data-theme="dark"] .bcd-seg { background: #211B33; }
.bcd-seg__btn {
  font-family: var(--font-mono, monospace);
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  padding: 7px 12px; border-radius: 7px;
  color: var(--accent-deep, #5C5470); cursor: pointer;
  white-space: nowrap; transition: background .15s ease, color .15s ease;
}
html[data-theme="dark"] .bcd-seg__btn { color: #A79CC0; }
.bcd-seg__btn[aria-pressed="true"] {
  background: var(--orange, #4A2A7E); color: var(--white, #fff);
}
html[data-theme="dark"] .bcd-seg__btn[aria-pressed="true"] { background: var(--accent-on-dark, #C6B2EA); color: #0D0B14; }
.bcd-seg__btn:focus-visible { outline: 2px solid var(--orange, #4A2A7E); outline-offset: 1px; }

.bcd-actions {
  display: flex; gap: 10px; padding: 16px 18px;
  border-top: 1px solid var(--rule, #E0DAEC);
}
html[data-theme="dark"] .bcd-actions { border-color: #2A2340; }
.bcd-btn {
  flex: 1 1 0;
  font-family: var(--font-mono, monospace);
  font-size: 13px; font-weight: 600; letter-spacing: 0.02em;
  padding: 13px 16px; border-radius: 9px;
  border: 1.5px solid var(--rule, #E0DAEC);
  background: var(--white, #fff); color: var(--black, #0C0A12);
  cursor: pointer; transition: transform .15s ease, opacity .15s ease, background .15s ease;
}
html[data-theme="dark"] .bcd-btn { background: #211B33; color: #F4F1FA; border-color: #2A2340; }
.bcd-btn:hover { transform: translateY(-1px); }
.bcd-btn:disabled { opacity: 0.6; cursor: progress; transform: none; }
.bcd-btn--primary {
  background: var(--orange, #4A2A7E); color: var(--white, #fff); border-color: var(--orange, #4A2A7E);
}
html[data-theme="dark"] .bcd-btn--primary { background: var(--accent-on-dark, #C6B2EA); color: #0D0B14; border-color: var(--accent-on-dark, #C6B2EA); }
.bcd-btn:focus-visible { outline: 2px solid var(--orange, #4A2A7E); outline-offset: 2px; }

/* ── toast ─────────────────────────────────────────────────────────────────────── */
.bcd-toast {
  position: fixed; bottom: 24px; left: 50%; z-index: 2147483601;
  transform: translateX(-50%) translateY(8px);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 13px; font-weight: 600;
  background: var(--black, #111); color: var(--white, #fff);
  padding: 11px 18px; border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.32);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.bcd-toast--in { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── responsive: the preview scale is computed in JS (contain-fit), so no per-breakpoint
   transform overrides are needed — just reflow the controls so the panel fits narrow screens. ── */
@media (max-width: 520px) {
  .bcd-field { flex-direction: column; align-items: stretch; gap: 6px; }
  .bcd-seg { width: 100%; }
  .bcd-seg__btn { flex: 1 1 0; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bcd-overlay, .bcd-panel, .bcd-trigger, .bcd-btn, .bcd-toast { transition: none; }
}