/* Auto-loaded runtime CSS for the "graphic-grid" template.
 * Phase 2: design tokens, base slide hygiene, shared grid SVG hairline,
 * and all 20 layouts (E1-E20). Mirrors the prompt CSS in
 * python/html_gen_prompt.py (_GRAPHIC_GRID_STAT_CARD_CSS) so AI-generated
 * decks and runtime-rendered decks look identical.
 *
 * Source of truth: design-specs/graphic-grid.html
 * Loaded by editor.html + dashboard.html + viewer.html so saved /
 * use-this-style decks render even when prompt-injected <style> is
 * missing.
 *
 * Selectors are all scoped under [data-template="graphic-grid"] —
 * never bare. Class names use `gg-` prefix to avoid collisions.
 */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;700;900&family=JetBrains+Mono:wght@400;600&display=swap');


[data-template="graphic-grid"] {

  /* ── PALETTE — slide backgrounds + ink ─────────────────────────── */
  --gg-paper-white: #FFFFFF !important;
  --gg-ink: #000000 !important;
  --gg-signal-red: #FF383C !important;
  --gg-vivid-green: #34C759 !important;
  --gg-electric-cyan: #00C0E8 !important;
  --gg-warm-orange: #FF8D28 !important;
  --gg-sun-yellow: #FFCC00 !important;
  --gg-bold-blue: #0088FF !important;
  --gg-indigo: #6155F5 !important;

  /* ── UTILITY FILLS ─────────────────────────────────────────────── */
  --gg-image-grey: transparent !important; /* placeholder transparent — dev-only design-spec used #D9D9D9 to mark image slot positions (Rainy 2026-06-25) */
  --gg-card-grey: #E9E9E9 !important;
  --gg-accent-red: #FA1B1B !important;

  /* ── HAIRLINE GRID (rendered at 0.3 opacity per source) ────────── */
  --gg-grid-on-light: rgba(0, 0, 0, 0.3) !important;
  --gg-grid-on-dark: rgba(255, 255, 255, 0.3) !important;

  /* ── TYPOGRAPHY ────────────────────────────────────────────────── */
  --gg-font-display: "Anton", Impact, sans-serif !important;
  --gg-font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;
  --gg-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace !important;

  /* ── TYPE SCALE (1920×1080 px) — matches design-spec.html ─────── */
  --gg-sz-mega: 260px !important;
  --gg-sz-display: 190px !important;
  --gg-sz-title: 160px !important;
  --gg-sz-headline: 60px !important;
  --gg-sz-big-body: 52px !important;
  --gg-sz-subhead: 45px !important;
  --gg-sz-stat: 50px !important;
  --gg-sz-list-title: 38px !important;
  --gg-sz-index: 26px !important;
  --gg-sz-body: 25px !important;
  --gg-sz-body-sm: 20px !important;
  --gg-sz-caption-lg: 18px !important;
  --gg-sz-caption: 15px !important;

  /* Cross-template aliases */
  --font-heading: "Anton", Impact, sans-serif !important;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif !important;

}


/* ═══════════════════════════════════════════════════════════════════════════
   GRAPHIC GRID — Slide-production component CSS
   Canvas: 1920×1080. All sizes in canvas pixels (NEVER vw / vh).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── ROOT / BASE ─────────────────────────────────────────────────────── */
/* (Rainy 2026-05-31) — .slide must stay TRANSPARENT in editor: otherwise
   editor backdrop turns white wherever the slide rect is (task #109 same
   bug daisy hit). All visible bg color is painted on .slide-scale-inner
   instead — white default + per-layout color overrides (contents red /
   subtitle-columns green / etc.) all live on the inner wrapper. */
[data-template="graphic-grid"].slide,
[data-template="graphic-grid"] .slide {
  background: transparent !important;
  font-family: var(--gg-font-body) !important;
  color: var(--gg-ink) !important;
  position: relative !important;
  overflow: hidden !important;
}

[data-template="graphic-grid"] .slide > .slide-scale-inner,
[data-template="graphic-grid"].slide > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
  font-family: var(--gg-font-body) !important;
  color: var(--gg-ink) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* (Rainy 2026-05-31) — height:100% scoped to generate-modal canvas +
   thumbnail iframes ONLY. The main editor canvas needs inner at the
   fixed 1920px design height so absolute-positioned children (every
   gg-* class) land at the correct y. Mirrors signal-runtime.css:115. */
#genStudioCanvas [data-template="graphic-grid"] .slide > .slide-scale-inner,
#genStudioCanvas [data-template="graphic-grid"].slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="graphic-grid"] .slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="graphic-grid"].slide > .slide-scale-inner {
  height: 100% !important;
}

[data-template="graphic-grid"] h1,
[data-template="graphic-grid"] h2,
[data-template="graphic-grid"] h3,
[data-template="graphic-grid"] h4 {
  font-family: var(--gg-font-display) !important;
  color: inherit !important;
  margin: 0 !important;
}

[data-template="graphic-grid"] p,
[data-template="graphic-grid"] li,
[data-template="graphic-grid"] span,
[data-template="graphic-grid"] div {
  font-family: var(--gg-font-body) !important;
}

/* Anton helper — used for any short-stacked display text */
[data-template="graphic-grid"] .gg-anton,
[data-template="graphic-grid"] .anton {
  font-family: var(--gg-font-display) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* Shared hairline grid SVG — full-bleed, non-interactive, sits above
   the slide bg-color but below content. */
[data-template="graphic-grid"] .grid-svg {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* All non-decoration children sit above the grid layer */
[data-template="graphic-grid"] .slide > *:not(.grid-svg),
[data-template="graphic-grid"].slide > *:not(.grid-svg) {
  position: relative;
  z-index: 2;
}

/* Common 3-cell top caption row (x130 · x1269 · x1556 · y70) */
[data-template="graphic-grid"] .gg-caption {
  position: absolute !important;
  top: 70px !important;
  font-family: var(--gg-font-body) !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-size: 26px !important;
  color: inherit !important;
}
[data-template="graphic-grid"] .gg-caption--left   { left: 130px !important; }
[data-template="graphic-grid"] .gg-caption--mid    { left: 1269px !important; }
[data-template="graphic-grid"] .gg-caption--right  { left: 1556px !important; }
[data-template="graphic-grid"] .gg-page-num {
  position: absolute !important;
  top: 70px !important;
  left: 1734px !important;
  font-family: var(--gg-font-body) !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  font-size: 22px !important;
  color: inherit !important;
}

/* Default placeholder hint for empty image cells — "AI IMAGE" text per
   design spec (line 178-179). Shows on use-this-style starter cells that
   ship empty AND during AI-gen before the backend replaces `<img
   data-ai-prompt>` with the rendered photo. Auto-hides when an <img> /
   <canvas> child is added (because :empty no longer matches). z-index:3
   sits above the hairline grid (z:1) and below all content (z:2). */
[data-template="graphic-grid"] .gg-cover-image:empty::before,
[data-template="graphic-grid"] .gg-tli-image:empty::before,
[data-template="graphic-grid"] .gg-team-image:empty::before,
[data-template="graphic-grid"] .gg-sb-image:empty::before,
[data-template="graphic-grid"] .gg-ic-image:empty::before,
[data-template="graphic-grid"] .gg-pq-image:empty::before {
  content: "AI IMAGE" !important;
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  color: #8a8a8a !important;
  pointer-events: none !important;
  z-index: 3 !important;
}

/* Universal `<img>` fill rule for ALL image cells. Without this, e.g.
   gg-tli-image / gg-team-image / gg-pq-image / gg-sb-image previously
   relied on default img sizing (intrinsic) and broke the layout. */
[data-template="graphic-grid"] .gg-cover-image > img,
[data-template="graphic-grid"] .gg-tli-image > img,
[data-template="graphic-grid"] .gg-team-image > img,
[data-template="graphic-grid"] .gg-sb-image > img,
[data-template="graphic-grid"] .gg-ic-image > img,
[data-template="graphic-grid"] .gg-pq-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E1 · COVER — Paper White + Anton 190px stacked title + grey image
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="cover"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-cover-title {
  position: absolute !important;
  left: 130px !important;
  top: 200px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 190px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
  margin: 0 !important;
}
[data-template="graphic-grid"] .gg-cover-image {
  position: absolute !important;
  z-index: 3 !important;
  left: 985px !important;
  top: 128px !important;
  width: 807px !important;
  height: 824px !important;
  background: var(--gg-image-grey) !important;
  overflow: hidden !important;
}
[data-template="graphic-grid"] .gg-cover-image > img,
[data-template="graphic-grid"] .gg-cover-image > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E2 · CONTENTS — Signal Red + 6 entries (3 cols × 2 rows)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="contents"] > .slide-scale-inner {
  background: var(--gg-signal-red) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-contents-title {
  position: absolute !important;
  left: 130px !important;
  top: 170px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-toc-item {
  position: absolute !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-toc-item .gg-toc-num {
  display: block !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  /* Tightened num→title gap (was 19px) so the numbered header sits
     closer to its item label — Rainy 2026-07-02 (contents slide feels
     less "trio glued together"). */
  margin-bottom: 8px !important;
}
[data-template="graphic-grid"] .gg-toc-item .gg-toc-title {
  display: block !important;
  font-size: 38px !important;
  letter-spacing: -0.04em !important;
  /* Tightened title→sub gap (was 12px); pairs with num-margin change
     above so each item reads as one visual unit. */
  margin-bottom: 4px !important;
}
[data-template="graphic-grid"] .gg-toc-item .gg-toc-sub {
  display: block !important;
  font-size: 26px !important;
  letter-spacing: -0.04em !important;
}
[data-template="graphic-grid"] .gg-toc-item[data-cell="1"] { left: 130px !important;  top: 655px !important; }
[data-template="graphic-grid"] .gg-toc-item[data-cell="2"] { left: 700px !important;  top: 655px !important; }
[data-template="graphic-grid"] .gg-toc-item[data-cell="3"] { left: 1270px !important; top: 655px !important; }
/* Row 2 (items 4/5/6) pushed down from 835px → 890px so the vertical
   gap between rows (previously 180px, felt cramped) widens to 235px.
   Combined with the tighter num/title/sub stacking above, each item
   reads as one block and rows breathe. Rainy 2026-07-02. */
[data-template="graphic-grid"] .gg-toc-item[data-cell="4"] { left: 130px !important;  top: 890px !important; }
[data-template="graphic-grid"] .gg-toc-item[data-cell="5"] { left: 700px !important;  top: 890px !important; }
[data-template="graphic-grid"] .gg-toc-item[data-cell="6"] { left: 1270px !important; top: 890px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E3 · NUMBERED POINTS — paper white + 3 black 150×150 badges staircased
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="numbered-points"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
/* (Rainy 2026-05-31) gg-point width capped at 565px (not 825px) so the
   body text on Point 1 / Point 2 wraps BEFORE colliding with the next
   badge in the staircase. Original 825px was wider than the 570px gap
   between Point 1 (x=129) and Point 2 badge (x=699), so long bodies
   slid behind the next badge. AI doesn't reliably emit the 4 explicit
   `<br>` line breaks from the spec — capping width forces clean wrap. */
[data-template="graphic-grid"] .gg-point {
  position: absolute !important;
  width: 565px !important;
}
[data-template="graphic-grid"] .gg-point[data-cell="1"] { left: 129px !important;  top: 128px !important; }
[data-template="graphic-grid"] .gg-point[data-cell="2"] { left: 699px !important;  top: 301px !important; }
[data-template="graphic-grid"] .gg-point[data-cell="3"] { left: 1271px !important; top: 540px !important; }
[data-template="graphic-grid"] .gg-point .gg-num-badge {
  width: 150px !important;
  height: 150px !important;
  background: var(--gg-ink) !important;
  color: var(--gg-paper-white) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gg-font-body) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
}
[data-template="graphic-grid"] .gg-point .gg-point-headline {
  margin-top: 62px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-point .gg-point-body {
  margin-top: 16px !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--gg-ink) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E4 · HEADING + STATS — Anton 160px + lead + 3 stat cards
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="heading-stats"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-heading-title {
  position: absolute !important;
  left: 130px !important;
  top: 180px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-heading-lead {
  position: absolute !important;
  left: 986px !important;
  top: 182px !important;
  width: 806px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 52px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 63px !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-stat-card {
  position: absolute !important;
  background: var(--gg-card-grey) !important;
  border-radius: 13px !important;
  padding: 36px 32px !important;
  box-sizing: border-box !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-stat-card[data-cell="1"] { left: 986px !important;  top: 504px !important; width: 806px !important; height: 199px !important; }
[data-template="graphic-grid"] .gg-stat-card[data-cell="2"] { left: 986px !important;  top: 723px !important; width: 393px !important; height: 229px !important; }
[data-template="graphic-grid"] .gg-stat-card[data-cell="3"] { left: 1399px !important; top: 723px !important; width: 393px !important; height: 229px !important; }
[data-template="graphic-grid"] .gg-stat-value {
  font-family: var(--gg-font-body) !important;
  font-size: 50px !important;
  font-weight: 500 !important;
  letter-spacing: -0.05em !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-stat-label {
  margin-top: 8px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 28px !important;
  letter-spacing: -0.01em !important;
  color: var(--gg-ink) !important;
  opacity: 0.7 !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E5 · SUBTITLE + TWO COLUMNS — Vivid Green
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="subtitle-columns"] > .slide-scale-inner {
  background: var(--gg-vivid-green) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-subtitle-title {
  position: absolute !important;
  left: 131px !important;
  top: 180px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-sub-col {
  position: absolute !important;
  top: 760px !important;
  width: 825px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 45px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 50px !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-sub-col[data-cell="1"] { left: 130px !important; }
[data-template="graphic-grid"] .gg-sub-col[data-cell="2"] { left: 985px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E6 · BIG-NUMBER TRIO — Electric Cyan
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="big-numbers"] > .slide-scale-inner {
  background: var(--gg-electric-cyan) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-big-lead {
  position: absolute !important;
  left: 130px !important;
  top: 156px !important;
  width: 1660px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 45px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 50px !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-big-num {
  position: absolute !important;
  top: 648px !important;
  width: 540px !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-big-num[data-cell="1"] { left: 132px !important; }
[data-template="graphic-grid"] .gg-big-num[data-cell="2"] { left: 700px !important; }
[data-template="graphic-grid"] .gg-big-num[data-cell="3"] { left: 1272px !important; }
[data-template="graphic-grid"] .gg-big-num .gg-big-num-value {
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
[data-template="graphic-grid"] .gg-big-num .gg-big-num-body {
  margin-top: 24px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E7 · HERO CHART + CAPTION — full-width chart/data slot + Anton headline
   (renamed from hero-image; .gg-hero-chart is a CHART/DATA container, not
   an image. Hosts a Chart.js <canvas> or HTML <table>. Visual: grey fill +
   2px dashed border + "CHART / DATA TABLE" placeholder label.)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="hero-chart"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-hero-chart {
  position: absolute !important;
  z-index: 3 !important;
  left: 130px !important;
  top: 128px !important;
  width: 1662px !important;
  height: 652px !important;
  background: var(--gg-image-grey) !important;
  border: 2px dashed #9a9a9a !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: 0.15em !important;
  color: #8a8a8a !important;
  overflow: hidden !important;
}
/* When chart actually renders, canvas/table fills the slot — the
   placeholder "CHART / DATA TABLE" text is hidden by the child. */
[data-template="graphic-grid"] .gg-hero-chart > canvas,
[data-template="graphic-grid"] .gg-hero-chart > table {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
/* When the slot is wired to a real chart (sample / use-this-style),
   drop the grey placeholder fill + dashed border so the canvas reads
   directly on the paper-white slide bg. (Rainy 2026-06-01) */
[data-template="graphic-grid"] .gg-hero-chart--filled {
  background: transparent !important;
  border: none !important;
}
[data-template="graphic-grid"] .gg-hero-headline {
  position: absolute !important;
  left: 130px !important;
  top: 820px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-hero-body {
  position: absolute !important;
  left: 985px !important;
  top: 824px !important;
  width: 805px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--gg-ink) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E8 · DARK HEADING + METRICS — Ink Black + staircase metrics right
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="dark-heading-metrics"] > .slide-scale-inner {
  background: var(--gg-ink) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-dark-headline {
  position: absolute !important;
  left: 130px !important;
  top: 388px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-dark-body {
  position: absolute !important;
  left: 130px !important;
  top: 540px !important;
  width: 800px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-dark-metric {
  position: absolute !important;
  width: 540px !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-dark-metric[data-cell="1"] { left: 1269px !important; top: 130px !important; }
[data-template="graphic-grid"] .gg-dark-metric[data-cell="2"] { left: 986px !important;  top: 439px !important; }
[data-template="graphic-grid"] .gg-dark-metric[data-cell="3"] { left: 1269px !important; top: 748px !important; }
[data-template="graphic-grid"] .gg-dark-metric .gg-metric-value {
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
[data-template="graphic-grid"] .gg-dark-metric .gg-metric-caption {
  margin-top: 28px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E9 · STAGGERED METRICS — 4 Anton 160px figures diagonally stepped
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="staggered-metrics"] > .slide-scale-inner {
  background: var(--gg-ink) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-stagger {
  position: absolute !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-stagger[data-cell="1"] { left: 471px !important;  top: 116px !important; }
[data-template="graphic-grid"] .gg-stagger[data-cell="2"] { left: 1062px !important; top: 321px !important; }
[data-template="graphic-grid"] .gg-stagger[data-cell="3"] { left: 460px !important;  top: 431px !important; }
[data-template="graphic-grid"] .gg-stagger[data-cell="4"] { left: 1022px !important; top: 636px !important; }
[data-template="graphic-grid"] .gg-stagger .gg-stagger-value {
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
[data-template="graphic-grid"] .gg-stagger .gg-stagger-caption {
  margin-top: 43px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E10 · IMAGE + COLOR BLOCK METRICS — cyan block + grey image + metrics
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="image-color-metrics"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-ic-block {
  position: absolute !important;
  left: 699px !important;
  top: 128px !important;
  width: 1092px !important;
  height: 824px !important;
  background: var(--gg-electric-cyan) !important;
  z-index: 0 !important;
}
[data-template="graphic-grid"] .gg-ic-image {
  position: absolute !important;
  z-index: 3 !important;
  left: 130px !important;
  top: 130px !important;
  width: 521px !important;
  height: 531px !important;
  background: var(--gg-image-grey) !important;
  overflow: hidden !important;
}
[data-template="graphic-grid"] .gg-ic-image > img,
[data-template="graphic-grid"] .gg-ic-image > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
[data-template="graphic-grid"] .gg-ic-hero {
  position: absolute !important;
  left: 1022px !important;
  top: 306px !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-ic-hero .gg-ic-hero-value {
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
[data-template="graphic-grid"] .gg-ic-hero .gg-ic-hero-caption {
  margin-top: 28px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
}
/* AI cross-layout borrow guard — when a subtitle-columns / big-numbers
   slide reuses `.gg-ic-hero-caption` (an image-color-metrics class) as a
   subtitle lead under the display title, the caption inherits no absolute
   positioning, sits as an in-flow block at slide left, and looks "太靠左"
   next to the big centered heading. Force it to center-align across the
   full slide width in exactly those layouts. Image-color-metrics itself
   keeps the original behaviour because the `.gg-ic-hero .gg-ic-hero-caption`
   rule above wins there via higher specificity (compound `.parent .child`
   beats a single-class selector even with same-scope layout attribute).
   Selector deliberately does NOT use `>` because the caption typically
   sits inside `.obj-html-inner` (an intermediate wrapper the renderer
   creates), not as a direct child of `.slide-scale-inner`. (Rainy
   2026-07-02 — "Type a prompt and get that exact image" should center
   under "DESCRIBE IT", regardless of screen size — this is anchored in
   the 1920px design coordinate space so all viewports render the same.) */
[data-template="graphic-grid"][data-layout="subtitle-columns"] .gg-ic-hero-caption,
[data-template="graphic-grid"][data-layout="big-numbers"] .gg-ic-hero-caption {
  position: absolute !important;
  left: 0 !important;
  top: 460px !important;
  width: 1920px !important;
  margin: 0 !important;
  text-align: center !important;
}
[data-template="graphic-grid"] .gg-ic-sub {
  position: absolute !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-ic-sub[data-cell="1"] { left: 1020px !important; top: 608px !important; }
[data-template="graphic-grid"] .gg-ic-sub[data-cell="2"] { left: 1305px !important; top: 608px !important; }
[data-template="graphic-grid"] .gg-ic-sub .gg-ic-sub-value {
  font-family: var(--gg-font-body) !important;
  font-size: 45px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
}
[data-template="graphic-grid"] .gg-ic-sub .gg-ic-sub-caption {
  margin-top: 29px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  /* 285px was too aggressive — clamped short lines like "Generated
     inside the slide" onto three lines. 460px keeps common captions on
     ONE line (~15 words at 30px ≈ 440px) while still preventing bleed
     into the right neighbour column. Rainy 2026-07-02. */
  max-width: 460px !important;
  overflow-wrap: break-word !important;
  word-wrap: break-word !important;
}
/* Widen the two-cell gap so the 460px-cap captions don't overlap
   horizontally: keep cell 1 at 1020, push cell 2 out from 1305 → 1500
   so caption edges are 1020+460=1480 ↔ 1500 = 20px gap. */
[data-template="graphic-grid"] .gg-ic-sub[data-cell="2"] { left: 1500px !important; top: 608px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E11 · HEADING + FOUR DARK CARDS
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="heading-dark-cards"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-hdc-headline {
  position: absolute !important;
  left: 130px !important;
  top: 182px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-hdc-body {
  position: absolute !important;
  left: 130px !important;
  top: 335px !important;
  width: 1660px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-hdc-rule {
  position: absolute !important;
  left: 297px !important;
  top: 801px !important;
  width: 1329px !important;
  height: 2px !important;
  background: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-dark-card {
  position: absolute !important;
  top: 653px !important;
  width: 333px !important;
  height: 299px !important;
  background: var(--gg-ink) !important;
  color: var(--gg-paper-white) !important;
  padding: 44px 28px 0 !important;
  box-sizing: border-box !important;
}
[data-template="graphic-grid"] .gg-dark-card[data-cell="1"] { left: 130px !important; }
[data-template="graphic-grid"] .gg-dark-card[data-cell="2"] { left: 573px !important; }
[data-template="graphic-grid"] .gg-dark-card[data-cell="3"] { left: 1016px !important; }
[data-template="graphic-grid"] .gg-dark-card[data-cell="4"] { left: 1459px !important; }
[data-template="graphic-grid"] .gg-dark-card .gg-dark-card-title {
  font-family: var(--gg-font-body) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  margin-bottom: 16px !important;
}
[data-template="graphic-grid"] .gg-dark-card .gg-dark-card-body {
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E12 · TIMELINE — paper white + Bold Blue half-canvas + 4 rows
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="timeline"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-tl-block {
  position: absolute !important;
  left: 937px !important;
  top: 0 !important;
  width: 983px !important;
  height: 1080px !important;
  background: var(--gg-bold-blue) !important;
  z-index: 0 !important;
}
[data-template="graphic-grid"] .gg-tl-headline {
  position: absolute !important;
  left: 130px !important;
  top: 388px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-tl-body {
  position: absolute !important;
  left: 130px !important;
  top: 540px !important;
  width: 800px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-tl-row {
  position: absolute !important;
  left: 985px !important;
  width: 808px !important;
  border-top: 2px solid var(--gg-paper-white) !important;
  color: var(--gg-paper-white) !important;
  padding-top: 36px !important;
  box-sizing: border-box !important;
}
[data-template="graphic-grid"] .gg-tl-row[data-cell="1"] { top: 124px !important; height: 213px !important; }
[data-template="graphic-grid"] .gg-tl-row[data-cell="2"] { top: 337px !important; height: 213px !important; }
[data-template="graphic-grid"] .gg-tl-row[data-cell="3"] { top: 550px !important; height: 213px !important; }
[data-template="graphic-grid"] .gg-tl-row[data-cell="4"] { top: 763px !important; height: 213px !important; }
[data-template="graphic-grid"] .gg-tl-row .gg-tl-year {
  display: inline-block !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  vertical-align: top !important;
  width: 280px !important;
}
[data-template="graphic-grid"] .gg-tl-row .gg-tl-content {
  display: inline-block !important;
  width: 510px !important;
  vertical-align: top !important;
}
[data-template="graphic-grid"] .gg-tl-row .gg-tl-title {
  font-family: var(--gg-font-body) !important;
  font-size: 30px !important;
  font-weight: 900 !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 8px !important;
}
[data-template="graphic-grid"] .gg-tl-row .gg-tl-desc {
  font-family: var(--gg-font-body) !important;
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E13 · TEXT LIST + ROUNDED IMAGE — Warm Orange
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="text-list-image"] > .slide-scale-inner {
  background: var(--gg-warm-orange) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-tli-headline {
  position: absolute !important;
  left: 130px !important;
  top: 124px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-tli-para {
  position: absolute !important;
  left: 130px !important;
  /* Widened 700 → 850 so a typical body sentence (30 char * ~15px ≈
     450px + wrap slack) doesn't split awkwardly onto orphan words like
     "frames" or "full-bleed" on their own line. Height cap ensures a
     single cell can't visually bleed into the neighbour (still relies
     on prompt keeping content ≤3 lines per cell). */
  width: 850px !important;
  max-height: 260px !important;
  overflow: hidden !important;
  font-family: var(--gg-font-body) !important;
  /* 30 → 28 gives a little more room inside the 260px cap; the
     line-height 1.35 is intentional — 1.4 read as "extra space
     between paragraphs" when the paragraphs themselves are short.
     (Rainy 2026-07-02.) */
  font-size: 28px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.35 !important;
  color: var(--gg-paper-white) !important;
}
/* Cell tops re-spaced so each 260px-cap paragraph has an obvious gap
   above/below it — 30px whitespace between cells reads as a
   deliberate paragraph break, not "content ran together". */
[data-template="graphic-grid"] .gg-tli-para[data-cell="1"] { top: 130px !important; }
[data-template="graphic-grid"] .gg-tli-para[data-cell="2"] { top: 420px !important; }
[data-template="graphic-grid"] .gg-tli-para[data-cell="3"] { top: 710px !important; }
[data-template="graphic-grid"] .gg-tli-image {
  position: absolute !important;
  z-index: 3 !important;
  left: 1005px !important;
  top: 75px !important;
  width: 840px !important;
  height: 930px !important;
  background: var(--gg-image-grey) !important;
  border-radius: 15px !important;
  overflow: hidden !important;
}
[data-template="graphic-grid"] .gg-tli-image > img,
[data-template="graphic-grid"] .gg-tli-image > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E14 · TEAM QUOTE GRID — 4 quote blocks (2×2)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="team-quotes"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-tq-block {
  position: absolute !important;
  width: 800px !important;
}
[data-template="graphic-grid"] .gg-tq-block[data-cell="1"] { left: 130px !important; top: 136px !important; }
[data-template="graphic-grid"] .gg-tq-block[data-cell="2"] { left: 984px !important; top: 136px !important; }
[data-template="graphic-grid"] .gg-tq-block[data-cell="3"] { left: 130px !important; top: 643px !important; }
[data-template="graphic-grid"] .gg-tq-block[data-cell="4"] { left: 984px !important; top: 643px !important; }
[data-template="graphic-grid"] .gg-tq-text {
  font-family: var(--gg-font-body) !important;
  font-size: 45px !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 50px !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-tq-name {
  margin-top: 32px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  color: var(--gg-accent-red) !important;
}
[data-template="graphic-grid"] .gg-tq-role {
  margin-top: 14px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  color: var(--gg-accent-red) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E15 · PULL QUOTE + IMAGE
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="pull-quote-image"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-pq-quote {
  position: absolute !important;
  left: 130px !important;
  top: 124px !important;
  width: 800px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 59px !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-pq-attr {
  position: absolute !important;
  left: 130px !important;
  top: 694px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-pq-image {
  position: absolute !important;
  z-index: 3 !important;
  left: 985px !important;
  top: 128px !important;
  width: 807px !important;
  height: 824px !important;
  background: var(--gg-image-grey) !important;
  overflow: hidden !important;
}
[data-template="graphic-grid"] .gg-pq-image > img,
[data-template="graphic-grid"] .gg-pq-image > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E16 · FULL-BLEED QUOTE — Anton 160px Bold Blue centered
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="full-quote"] > .slide-scale-inner {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-fq-quote {
  position: absolute !important;
  left: 0 !important;
  top: 300px !important;
  width: 1920px !important;
  text-align: center !important;
  font-family: var(--gg-font-display) !important;
  font-size: 160px !important;
  font-weight: 400 !important;
  line-height: 157px !important;
  color: var(--gg-bold-blue) !important;
  text-transform: uppercase !important;
}
[data-template="graphic-grid"] .gg-fq-attr {
  position: absolute !important;
  left: 0 !important;
  top: 933px !important;
  width: 1920px !important;
  text-align: center !important;
  font-family: var(--gg-font-body) !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E17 · THREE-PERSON TEAM — Indigo
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="team-three"] > .slide-scale-inner {
  background: var(--gg-indigo) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-team-person {
  position: absolute !important;
  width: 521px !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-team-person[data-cell="1"] { left: 130px !important;  top: 128px !important; }
[data-template="graphic-grid"] .gg-team-person[data-cell="2"] { left: 699px !important;  top: 128px !important; }
[data-template="graphic-grid"] .gg-team-person[data-cell="3"] { left: 1271px !important; top: 128px !important; }
[data-template="graphic-grid"] .gg-team-image {
  position: relative !important;
  z-index: 3 !important;
  width: 521px !important;
  height: 528px !important;
  background: var(--gg-image-grey) !important;
  overflow: hidden !important;
}
[data-template="graphic-grid"] .gg-team-image > img,
[data-template="graphic-grid"] .gg-team-image > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
[data-template="graphic-grid"] .gg-team-name {
  margin-top: 36px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}
[data-template="graphic-grid"] .gg-team-bio {
  margin-top: 43px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E18 · SINGLE BIO + WIDE IMAGE — Sun Yellow (BLACK ink + grid)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="single-bio"] > .slide-scale-inner {
  background: var(--gg-sun-yellow) !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-sb-image {
  position: absolute !important;
  z-index: 3 !important;
  left: 130px !important;
  top: 128px !important;
  width: 1091px !important;
  height: 824px !important;
  background: var(--gg-image-grey) !important;
  overflow: hidden !important;
}
[data-template="graphic-grid"] .gg-sb-image > img,
[data-template="graphic-grid"] .gg-sb-image > canvas {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}
[data-template="graphic-grid"] .gg-sb-name {
  position: absolute !important;
  left: 1272px !important;
  /* Was 649 — raised to 560 (Rainy 2026-07-02) so the heading + body
     block fits inside the 1080px slide height without the last line
     ("The template does the work.") getting clipped at the bottom. */
  top: 560px !important;
  font-family: var(--gg-font-display) !important;
  font-size: 60px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-ink) !important;
}
[data-template="graphic-grid"] .gg-sb-bio {
  position: absolute !important;
  left: 1272px !important;
  /* Was 802 — raised to 650 (Rainy 2026-07-02) so the ~4-line body
     paragraph clears the 1080px slide bottom. Pairs with the .gg-sb-name
     top-shift above; 90px gap between heading and body preserved. */
  top: 650px !important;
  width: 520px !important;
  font-family: var(--gg-font-body) !important;
  font-size: 36px !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--gg-ink) !important;
}


/* E19 (multi-paragraph) removed per Rainy 2026-05-30 — duplicate of
   text-list-image / single-bio body coverage. */


/* ═══════════════════════════════════════════════════════════════════════════
   E20 · CLOSING — Ink Black + Anton 260px "THANK YOU!" centered
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="closing"] > .slide-scale-inner {
  background: var(--gg-ink) !important;
  color: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"] .gg-closing-title {
  position: absolute !important;
  left: 0 !important;
  top: 330px !important;
  width: 1920px !important;
  text-align: center !important;
  font-family: var(--gg-font-display) !important;
  font-size: 260px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
  color: var(--gg-paper-white) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   D-form fallback — section-level bg
   ───────────────────────────────────────────────────────────────────────────
   Layout bg rules above target `> .slide-scale-inner`, but D-form decks
   (AI-gen via generate-modal → JsonRenderer.renderSlide) render slide
   section's direct child as `.obj-html` instead of `.slide-scale-inner`,
   so the bg selector misses and falls back to thumbWrap's inline white.
   Mirror each layout bg directly to the section element so D-form preview
   renders correct bg. Editor path (section > .slide-scale-inner) is
   unaffected because inner has inset:0 fully covering section bg paint.
   (Rainy 2026-06-22: batch fix after retro-modern proof-of-fix.)
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="graphic-grid"][data-layout="cover"],
[data-template="graphic-grid"][data-layout="full-quote"],
[data-template="graphic-grid"][data-layout="heading-dark-cards"],
[data-template="graphic-grid"][data-layout="heading-stats"],
[data-template="graphic-grid"][data-layout="hero-chart"],
[data-template="graphic-grid"][data-layout="image-color-metrics"],
[data-template="graphic-grid"][data-layout="numbered-points"],
[data-template="graphic-grid"][data-layout="pull-quote-image"],
[data-template="graphic-grid"][data-layout="team-quotes"],
[data-template="graphic-grid"][data-layout="timeline"] {
  background: var(--gg-paper-white) !important;
}
[data-template="graphic-grid"][data-layout="contents"] {
  background: var(--gg-signal-red) !important;
}
[data-template="graphic-grid"][data-layout="subtitle-columns"] {
  background: var(--gg-vivid-green) !important;
}
[data-template="graphic-grid"][data-layout="big-numbers"] {
  background: var(--gg-electric-cyan) !important;
}
[data-template="graphic-grid"][data-layout="closing"],
[data-template="graphic-grid"][data-layout="dark-heading-metrics"],
[data-template="graphic-grid"][data-layout="staggered-metrics"] {
  background: var(--gg-ink) !important;
}
[data-template="graphic-grid"][data-layout="text-list-image"] {
  background: var(--gg-warm-orange) !important;
}
[data-template="graphic-grid"][data-layout="team-three"] {
  background: var(--gg-indigo) !important;
}
[data-template="graphic-grid"][data-layout="single-bio"] {
  background: var(--gg-sun-yellow) !important;
}

/* ── Text slots declare the room they actually have ───────────────────────
 *
 * Same fix already applied to almanac. These slots set a top and a font-size
 * but no height, so each box grows with its copy and prints over whatever sits
 * beneath it — invisible until a generation writes three sentences into a slot
 * the design sized for one line.
 *
 * Each height is the distance from that slot's own top to the top of the next
 * positioned element in the same layout, text or image alike: the room the
 * layout already gave it, written down so json-renderer's _autoFitHtmlSlots can
 * enforce it. Without a height there is nothing to overflow, so that pass
 * measured every slot as fine.
 *
 * --ocu-min-font stops the fit bottoming out at 42% of the design size, which
 * for body copy means single digits. Corner marks and page numbers are excluded
 * — fixed chrome, never long. (Rainy 2026-07-28.)
 */
[data-template="graphic-grid"] .gg-big-lead { max-height: 492px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-caption { max-height: 950px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-closing-title { max-height: 690px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-contents-title { max-height: 850px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-cover-title { max-height: 820px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-dark-body { max-height: 113px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-dark-headline { max-height: 152px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-fq-attr { max-height: 87px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-fq-quote { max-height: 633px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-hdc-body { max-height: 466px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-hdc-headline { max-height: 153px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-heading-lead { max-height: 838px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-heading-title { max-height: 2px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-hero-body { max-height: 196px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-hero-chart { max-height: 692px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-hero-headline { max-height: 4px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-pq-attr { max-height: 326px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-pq-quote { max-height: 4px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-sb-bio { max-height: 370px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-sb-name { max-height: 90px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-sub-col { max-height: 260px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-subtitle-title { max-height: 840px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-tl-body { max-height: 480px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-tl-headline { max-height: 152px !important; overflow: hidden !important; }
[data-template="graphic-grid"] .gg-tli-headline { max-height: 896px !important; overflow: hidden !important; }

[data-template="graphic-grid"] .gg-big-lead , [data-template="graphic-grid"] .gg-caption , [data-template="graphic-grid"] .gg-closing-title , [data-template="graphic-grid"] .gg-contents-title , [data-template="graphic-grid"] .gg-cover-title , [data-template="graphic-grid"] .gg-dark-body , [data-template="graphic-grid"] .gg-dark-headline , [data-template="graphic-grid"] .gg-fq-attr , [data-template="graphic-grid"] .gg-fq-quote , [data-template="graphic-grid"] .gg-hdc-body , [data-template="graphic-grid"] .gg-hdc-headline , [data-template="graphic-grid"] .gg-heading-lead , [data-template="graphic-grid"] .gg-heading-title , [data-template="graphic-grid"] .gg-hero-body , [data-template="graphic-grid"] .gg-hero-chart , [data-template="graphic-grid"] .gg-hero-headline , [data-template="graphic-grid"] .gg-pq-attr , [data-template="graphic-grid"] .gg-pq-quote , [data-template="graphic-grid"] .gg-sb-bio , [data-template="graphic-grid"] .gg-sb-name , [data-template="graphic-grid"] .gg-sub-col , [data-template="graphic-grid"] .gg-subtitle-title , [data-template="graphic-grid"] .gg-tl-body , [data-template="graphic-grid"] .gg-tl-headline , [data-template="graphic-grid"] .gg-tli-headline { --ocu-min-font: 22px; }

/* An empty slot must be invisible — no placeholder shown to the user.
 *
 * These slots carry design-time affordances: a grey fill, a dashed frame, and
 * an "AI IMAGE" / "CHART / DATA" label. They are useful while building a
 * template and wrong in a finished deck — a reader should never be told what
 * we failed to put there. (Rainy 2026-07-28: "如果没有chart也不要让用户看到
 * 占位框".)
 *
 * Hiding the chrome is only safe because the gap is caught elsewhere: the
 * render-time audit reports missing_chart and media_missing, so an empty slot
 * surfaces as a warning with a Regenerate button rather than as a blank the
 * author never learns about. Removing the placeholder without that detection
 * would just make the failure quieter, which is how venture p4/p8 shipped
 * blank for a day.
 *
 * The requirement above this one still stands: the slot is supposed to be
 * filled. This governs what a reader sees when it is not.
 */
[data-template="graphic-grid"] .gg-cover-image:empty, [data-template="graphic-grid"] .gg-tli-image:empty, [data-template="graphic-grid"] .gg-team-image:empty, [data-template="graphic-grid"] .gg-sb-image:empty, [data-template="graphic-grid"] .gg-ic-image:empty, [data-template="graphic-grid"] .gg-pq-image:empty {
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
[data-template="graphic-grid"] .gg-cover-image:empty::before, [data-template="graphic-grid"] .gg-tli-image:empty::before, [data-template="graphic-grid"] .gg-team-image:empty::before, [data-template="graphic-grid"] .gg-sb-image:empty::before, [data-template="graphic-grid"] .gg-ic-image:empty::before, [data-template="graphic-grid"] .gg-pq-image:empty::before {
  content: none !important;
}