/* Auto-loaded runtime CSS for the "retro-modern" template.
 *
 * 13 layouts (E1-E13) + Closing (reuses E1).
 * Canvas: 1920×1080. All positions absolute, native px.
 *
 * Source of truth: /Users/liujingwan/Downloads/retro-modern-design-spec.html
 * Mirrors the prompt CSS in python/html_gen_prompt.py
 * (_RETRO_MODERN_STAT_CARD_CSS) so AI-generated decks and runtime-rendered
 * decks look identical.
 *
 * 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="retro-modern"] —
 * never bare. Class names use `rm-` prefix to avoid collisions.
 */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Merriweather:ital,wght@0,400;0,500;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');


[data-template="retro-modern"] {

  /* ── PALETTE — 5+1 tokens ─────────────────────────────────────────── */
  --rm-olive: #797015 !important;          /* dark bg (E1, E5, E6 / Closing) */
  --rm-chartreuse: #F2FF47 !important;     /* bright bg + ink-on-dark */
  --rm-brown: #8F613B !important;          /* ink-on-bright */
  --rm-marigold: #FDA244 !important;       /* accent / E8 bg / date text */
  --rm-logo-yellow: #FDFC60 !important;    /* logo block only (E1) */
  --rm-white: #FFFFFF !important;          /* panel + E10 bg + E11 bg */
  --rm-image-grey: transparent !important;     /* placeholder transparent — dev-only design-spec used #D9D9D9 to mark image slot positions (Rainy 2026-06-25) */
  --rm-image-label: #9a9a9a !important;    /* AI IMAGE label color */

  /* ── TYPOGRAPHY ──────────────────────────────────────────────────── */
  --rm-font-sans: 'Manrope', system-ui, sans-serif !important;
  --rm-font-serif: 'Merriweather', Georgia, serif !important;
  --rm-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace !important;

  /* ── TYPE SCALE (1920×1080 px) — per design spec ──────────────────── */
  --rm-sz-display: 200px !important;       /* E1, E2 title */
  --rm-sz-section: 160px !important;       /* E3 section / chapter */
  --rm-sz-metric: 120px !important;        /* E6 metrics */
  --rm-sz-headline: 80px !important;       /* E7, E8, E9, E11, E12, E13 */
  --rm-sz-body-lg: 56px !important;        /* E4, E5, E10 body */
  --rm-sz-body-date: 48px !important;      /* E1, E2 date + E12 attribution */
  --rm-sz-sub: 32px !important;            /* E2, E6, E7, E8, E9, E11 sub + slide num */
  --rm-sz-body-sm: 24px !important;        /* E8 grid + E11 list rows */

  /* Cross-template aliases */
  --font-heading: 'Manrope', system-ui, sans-serif !important;
  --font-body: 'Merriweather', Georgia, serif !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   RETRO MODERN — base hygiene
   .slide stays TRANSPARENT so editor backdrop doesn't paint white through
   gaps (task #109 daisy lesson). Visible bg color lives on .slide-scale-inner
   + per-layout overrides.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"].slide,
[data-template="retro-modern"] .slide {
  background: transparent !important;
  font-family: var(--rm-font-sans) !important;
  color: var(--rm-brown) !important;
  position: relative !important;
  overflow: hidden !important;
  /* Force left text-align so dashboard library cards (which inherit
     text-align: center from the page wrapper) don't shift our absolute
     children. Per-element overrides (E2 centered / E1 date right / etc.)
     beat this via higher specificity + their own !important. */
  text-align: left !important;
}

[data-template="retro-modern"] .slide > .slide-scale-inner,
[data-template="retro-modern"].slide > .slide-scale-inner {
  background: var(--rm-white) !important;
  font-family: var(--rm-font-sans) !important;
  color: var(--rm-brown) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  position: relative !important;
}

/* height:100% scoped to generate-modal canvas + thumbnail iframes ONLY.
   Main editor canvas keeps inner at the fixed 1920px design height so
   absolute-positioned children land at the correct y.
   Mirrors graphic-grid-runtime.css:101. */
#genStudioCanvas [data-template="retro-modern"] .slide > .slide-scale-inner,
#genStudioCanvas [data-template="retro-modern"].slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="retro-modern"] .slide > .slide-scale-inner,
.gen-studio-slide-thumb [data-template="retro-modern"].slide > .slide-scale-inner {
  height: 100% !important;
}

[data-template="retro-modern"] h1,
[data-template="retro-modern"] h2,
[data-template="retro-modern"] h3,
[data-template="retro-modern"] h4 {
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  color: inherit !important;
  margin: 0 !important;
}

[data-template="retro-modern"] p,
[data-template="retro-modern"] li,
[data-template="retro-modern"] span,
[data-template="retro-modern"] div {
  font-family: inherit !important;
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   IMAGE PLACEHOLDERS
   Grey #D9D9D9 cells with "AI IMAGE" label until <img data-ai-prompt> is
   resolved. Spec line 120-123: image-slot z-index 3 (above bg + overlays).
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"] .rm-image,
[data-template="retro-modern"] .rm-section-bg,
[data-template="retro-modern"] .rm-banner-image,
[data-template="retro-modern"] .rm-stack-image,
[data-template="retro-modern"] .rm-grid-image,
[data-template="retro-modern"] .rm-quote-image,
[data-template="retro-modern"] .rm-contact-image,
[data-template="retro-modern"] .rm-lists-image,
[data-template="retro-modern"] .rm-cluster-image {
  position: absolute !important;
  background: var(--rm-image-grey) !important;
  overflow: hidden !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

[data-template="retro-modern"] .rm-image:empty::before,
[data-template="retro-modern"] .rm-section-bg:empty::before,
[data-template="retro-modern"] .rm-banner-image:empty::before,
[data-template="retro-modern"] .rm-stack-image:empty::before,
[data-template="retro-modern"] .rm-grid-image:empty::before,
[data-template="retro-modern"] .rm-quote-image:empty::before,
[data-template="retro-modern"] .rm-contact-image:empty::before,
[data-template="retro-modern"] .rm-lists-image:empty::before,
[data-template="retro-modern"] .rm-cluster-image:empty::before {
  content: "AI IMAGE" !important;
  font-family: var(--rm-font-mono) !important;
  font-size: 18px !important;
  letter-spacing: 0.14em !important;
  color: var(--rm-image-label) !important;
  text-transform: uppercase !important;
}

[data-template="retro-modern"] .rm-image > img,
[data-template="retro-modern"] .rm-section-bg > img,
[data-template="retro-modern"] .rm-banner-image > img,
[data-template="retro-modern"] .rm-stack-image > img,
[data-template="retro-modern"] .rm-grid-image > img,
[data-template="retro-modern"] .rm-quote-image > img,
[data-template="retro-modern"] .rm-contact-image > img,
[data-template="retro-modern"] .rm-lists-image > img,
[data-template="retro-modern"] .rm-cluster-image > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}


/* Chart container — dashed border, used on E6 */
[data-template="retro-modern"] .rm-chart-slot {
  position: absolute !important;
  background: var(--rm-image-grey) !important;
  border: 2px dashed #b7b7b7 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}

[data-template="retro-modern"] .rm-chart-slot:empty::before {
  content: "CHART / DATA" !important;
  font-family: var(--rm-font-mono) !important;
  font-size: 18px !important;
  letter-spacing: 0.14em !important;
  color: var(--rm-image-label) !important;
  text-transform: uppercase !important;
}

[data-template="retro-modern"] .rm-chart-slot > canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* When a real Chart.js canvas renders into the slot (sample / use-this-
   style), drop the grey placeholder fill + dashed border so the chart
   sits directly on the chartreuse slide bg. (Rainy 2026-06-01 — "不要
   bg".) */
[data-template="retro-modern"] .rm-chart-slot--filled {
  background: transparent !important;
  border: none !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SHARED — slide number (bottom-right)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"] .rm-page-num {
  position: absolute !important;
  right: 79px !important;
  top: 986px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--rm-sz-sub) !important;
  letter-spacing: -0.04em !important;
  z-index: 4 !important;
}


/* Decorative SVGs — circles, dots, flower, quote-mark.
   Always positioned absolute; opacity per spec.
   Note: rm-circles is the background-shape layer on E1/E2 — z below content. */
[data-template="retro-modern"] .rm-circles,
[data-template="retro-modern"] .rm-noise,
[data-template="retro-modern"] .rm-section-overlay {
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
}
[data-template="retro-modern"] .rm-circles { opacity: 0.15 !important; z-index: 1 !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-circles svg { width: 100% !important; height: 100% !important; display: block !important; }

[data-template="retro-modern"] .rm-dots,
[data-template="retro-modern"] .rm-flower,
[data-template="retro-modern"] .rm-quote-glyph {
  position: absolute !important;
  pointer-events: none !important;
  z-index: 2 !important;
}
[data-template="retro-modern"] .rm-dots svg,
[data-template="retro-modern"] .rm-flower svg,
[data-template="retro-modern"] .rm-quote-glyph svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
[data-template="retro-modern"] .rm-quote-glyph { opacity: 0.15 !important; z-index: 1 !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E1 — Title (dark)
   olive bg + 3 chartreuse circles 0.15 + logo block + date top-right + title bottom-left
   Also used by Closing slide.
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="cover-dark"] > .slide-scale-inner,
[data-template="retro-modern"][data-layout="closing"]   > .slide-scale-inner {
  background: var(--rm-olive) !important;
}

[data-template="retro-modern"] .rm-cover-logo {
  position: absolute !important;
  left: 60px !important;
  top: 60px !important;
  width: 100px !important;
  height: 120px !important;
  background: var(--rm-logo-yellow) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-cover-date {
  position: absolute !important;
  left: 1360px !important;
  top: 64px !important;
  width: 500px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-date) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.4 !important;
  color: var(--rm-marigold) !important;
  text-align: right !important;
  white-space: pre-line !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-cover-title {
  position: absolute !important;
  left: 60px !important;
  top: 600px !important;
  width: 1800px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-display) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: var(--rm-chartreuse) !important;
  text-align: left !important;
  z-index: 2 !important;
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E2 — Title (bright, centered)
   chartreuse bg + 3 marigold circles 0.15 + sub above + huge title centered + date below
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="cover-bright"] > .slide-scale-inner {
  background: var(--rm-chartreuse) !important;
}

[data-template="retro-modern"] .rm-cover-sub-c {
  position: absolute !important;
  left: 0 !important;
  top: 236px !important;
  width: 1920px !important;
  text-align: center !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-date) !important;
  letter-spacing: -0.02em !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-cover-title-c {
  position: absolute !important;
  left: 0 !important;
  top: 360px !important;
  width: 1920px !important;
  text-align: center !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-display) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
  margin: 0 !important;
}

[data-template="retro-modern"] .rm-cover-date-c {
  position: absolute !important;
  left: 0 !important;
  top: 810px !important;
  width: 1920px !important;
  text-align: center !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-date) !important;
  letter-spacing: -0.02em !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E3 — Section divider
   AI image full-bleed (z:0) + noise (z:1) + olive 0.4 overlay (z:2) +
   section number top-left + section title bottom-left (both z:3)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="section-divider"] > .slide-scale-inner {
  background: var(--rm-olive) !important;
}

[data-template="retro-modern"] .rm-section-bg {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  width: 1920px !important;
  height: 1080px !important;
}

[data-template="retro-modern"] .rm-noise {
  position: absolute !important;
  inset: 0 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") !important;
  background-size: 300px 300px !important;
  background-repeat: repeat !important;
  opacity: 0.5 !important;
  mix-blend-mode: soft-light !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

[data-template="retro-modern"] .rm-section-overlay {
  position: absolute !important;
  inset: 0 !important;
  background: var(--rm-olive) !important;
  opacity: 0.4 !important;
  z-index: 2 !important;
  pointer-events: none !important;
}

[data-template="retro-modern"] .rm-section-num {
  position: absolute !important;
  left: 60px !important;
  top: 60px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-section) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--rm-chartreuse) !important;
  text-align: left !important;
  z-index: 3 !important;
  margin: 0 !important;
}

[data-template="retro-modern"] .rm-section-title {
  position: absolute !important;
  left: 60px !important;
  top: 868px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-section) !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  color: var(--rm-chartreuse) !important;
  text-align: left !important;
  z-index: 3 !important;
  margin: 0 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E4 — Body + image cluster
   chartreuse bg + 3 image slots + body text + slide num
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="body-image-cluster"] > .slide-scale-inner {
  background: var(--rm-chartreuse) !important;
}

[data-template="retro-modern"][data-layout="body-image-cluster"] .rm-cluster-image[data-cell="1"] {
  left: 159px !important; top: 0 !important;
  width: 501px !important; height: 325px !important;
}
[data-template="retro-modern"][data-layout="body-image-cluster"] .rm-cluster-image[data-cell="2"] {
  left: 1232px !important; top: -123px !important;
  width: 296px !important; height: 325px !important;
}
[data-template="retro-modern"][data-layout="body-image-cluster"] .rm-cluster-image[data-cell="3"] {
  left: 1460px !important; top: 500px !important;
  width: 460px !important; height: 426px !important;
}

[data-template="retro-modern"] .rm-cluster-body {
  position: absolute !important;
  left: 60px !important;
  top: 560px !important;
  width: 1340px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-lg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.39 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E5 — Body + caption
   olive bg + body left + caption right + 3-dot decoration bottom-left
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="body-caption"] > .slide-scale-inner {
  background: var(--rm-olive) !important;
}

[data-template="retro-modern"] .rm-bc-body {
  position: absolute !important;
  left: 60px !important;
  top: 70px !important;
  width: 1340px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-lg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.39 !important;
  color: var(--rm-chartreuse) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-bc-caption {
  position: absolute !important;
  left: 1380px !important;
  top: 64px !important;
  width: 480px !important;
  text-align: right !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--rm-sz-sub) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--rm-chartreuse) !important;
  z-index: 2 !important;
}

/* 3-dot cluster — appears on E5 (chartreuse on olive) + E7 (brown on white) */
[data-template="retro-modern"] .rm-dots {
  position: absolute !important;
  z-index: 2 !important;
}
[data-template="retro-modern"][data-layout="body-caption"] .rm-dots {
  left: 60px !important;
  top: 956px !important;
  width: 208px !important;
  height: 64px !important;
}
[data-template="retro-modern"][data-layout="body-caption"] .rm-dots svg circle { fill: var(--rm-chartreuse) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E6 — Metrics + chart
   olive bg + 3 metrics (x=60/673/1287) + chart slot + flower glyph bottom-left
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="metrics-chart"] > .slide-scale-inner {
  background: var(--rm-olive) !important;
}

[data-template="retro-modern"] .rm-metric {
  position: absolute !important;
  z-index: 2 !important;
}
[data-template="retro-modern"] .rm-metric[data-cell="1"] { left: 60px !important; }
[data-template="retro-modern"] .rm-metric[data-cell="2"] { left: 673px !important; }
[data-template="retro-modern"] .rm-metric[data-cell="3"] { left: 1287px !important; }

[data-template="retro-modern"] .rm-metric-sub {
  position: absolute !important;
  top: 80px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-sub) !important;
  color: var(--rm-chartreuse) !important;
  z-index: 2 !important;
}
/* Inner sub/value are absolute INSIDE .rm-metric (which is itself
   absolute at the per-cell left). Setting per-cell left here ALSO
   would double-stack: cell-3's parent at left:1287 + child at left:
   1287 = viewport 2574, off-screen right. Force left:0 so inner
   anchors to its parent's left edge. (NOVA_KNOWLEDGE #17 — Rainy
   2026-06-19: retro-modern slide 2 only 2 of 3 metrics visible.) */
[data-template="retro-modern"] .rm-metric .rm-metric-sub { left: 0 !important; }

[data-template="retro-modern"] .rm-metric-value {
  position: absolute !important;
  top: 145px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-metric) !important;
  letter-spacing: -0.04em !important;
  color: var(--rm-chartreuse) !important;
  z-index: 2 !important;
}
/* Same double-offset fix for .rm-metric-value as .rm-metric-sub. */
[data-template="retro-modern"] .rm-metric .rm-metric-value { left: 0 !important; }

[data-template="retro-modern"][data-layout="metrics-chart"] .rm-chart-slot {
  left: 580px !important;
  top: 415px !important;
  width: 1340px !important;
  height: 665px !important;
}

[data-template="retro-modern"][data-layout="metrics-chart"] .rm-flower {
  left: 60px !important;
  top: 956px !important;
  width: 208px !important;
  height: 64px !important;
  color: var(--rm-chartreuse) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E7 — Two-column text split
   chartreuse left + white panel right + title + sub + body + 3-dot decoration
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="split-text"] > .slide-scale-inner {
  background: var(--rm-chartreuse) !important;
}

[data-template="retro-modern"] .rm-split-panel {
  position: absolute !important;
  left: 700px !important;
  top: 0 !important;
  width: 1220px !important;
  height: 1080px !important;
  background: var(--rm-white) !important;
  z-index: 1 !important;
}

[data-template="retro-modern"] .rm-split-title {
  position: absolute !important;
  left: 60px !important;
  top: 60px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-headline) !important;
  letter-spacing: -0.04em !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
  margin: 0 !important;
}

[data-template="retro-modern"] .rm-split-sub {
  position: absolute !important;
  left: 60px !important;
  top: 884px !important;
  width: 640px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--rm-sz-sub) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-split-body {
  position: absolute !important;
  left: 760px !important;
  top: 572px !important;
  width: 1100px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-sub) !important;
  line-height: 1.25 !important;
  color: var(--rm-brown) !important;
  white-space: pre-line !important;
  z-index: 2 !important;
}

[data-template="retro-modern"][data-layout="split-text"] .rm-dots {
  left: 760px !important;
  top: 60px !important;
  width: 208px !important;
  height: 64px !important;
}
[data-template="retro-modern"][data-layout="split-text"] .rm-dots svg circle { fill: var(--rm-brown) !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E8 — Title + 2×2 paragraphs
   marigold bg + image top-right + title + sub + 4 paragraph cells
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="title-grid"] > .slide-scale-inner {
  background: var(--rm-marigold) !important;
}

[data-template="retro-modern"][data-layout="title-grid"] .rm-grid-image {
  left: 1380px !important;
  top: 60px !important;
  width: 480px !important;
  height: 218px !important;
}

[data-template="retro-modern"] .rm-grid-title {
  position: absolute !important;
  left: 60px !important;
  top: 60px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-headline) !important;
  letter-spacing: -0.04em !important;
  color: var(--rm-chartreuse) !important;
  z-index: 2 !important;
  margin: 0 !important;
}

[data-template="retro-modern"] .rm-grid-sub {
  position: absolute !important;
  left: 60px !important;
  top: 512px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-sub) !important;
  color: var(--rm-chartreuse) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-grid-cell {
  position: absolute !important;
  width: 530px !important;
  z-index: 2 !important;
}
[data-template="retro-modern"] .rm-grid-cell[data-cell="1"] { left: 800px !important;  top: 510px !important; }
[data-template="retro-modern"] .rm-grid-cell[data-cell="2"] { left: 1380px !important; top: 510px !important; }
[data-template="retro-modern"] .rm-grid-cell[data-cell="3"] { left: 800px !important;  top: 796px !important; }
[data-template="retro-modern"] .rm-grid-cell[data-cell="4"] { left: 1380px !important; top: 796px !important; }

[data-template="retro-modern"] .rm-grid-cell-title {
  font-family: var(--rm-font-sans) !important;
  font-weight: 700 !important;
  font-size: var(--rm-sz-body-sm) !important;
  letter-spacing: -0.01em !important;
  color: var(--rm-chartreuse) !important;
  margin-bottom: 10px !important;
}

[data-template="retro-modern"] .rm-grid-cell-body {
  font-family: var(--rm-font-sans) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-sm) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.42 !important;
  color: var(--rm-chartreuse) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E9 — Body + image stack
   chartreuse left + white panel right + title + 3 stacked images + body + flower
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="body-image-stack"] > .slide-scale-inner {
  background: var(--rm-chartreuse) !important;
}

[data-template="retro-modern"] .rm-stack-panel {
  position: absolute !important;
  left: 1320px !important;
  top: 0 !important;
  width: 600px !important;
  height: 1080px !important;
  background: var(--rm-white) !important;
  z-index: 1 !important;
}

[data-template="retro-modern"][data-layout="body-image-stack"] .rm-stack-image[data-cell="1"] {
  left: 1380px !important; top: 60px !important;
  width: 480px !important; height: 280px !important;
}
[data-template="retro-modern"][data-layout="body-image-stack"] .rm-stack-image[data-cell="2"] {
  left: 1380px !important; top: 400px !important;
  width: 480px !important; height: 280px !important;
}
[data-template="retro-modern"][data-layout="body-image-stack"] .rm-stack-image[data-cell="3"] {
  left: 1380px !important; top: 740px !important;
  width: 480px !important; height: 280px !important;
}

[data-template="retro-modern"] .rm-stack-title {
  position: absolute !important;
  left: 60px !important;
  top: 60px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-headline) !important;
  letter-spacing: -0.04em !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
  margin: 0 !important;
}

[data-template="retro-modern"] .rm-stack-body {
  position: absolute !important;
  left: 60px !important;
  top: 862px !important;
  width: 1190px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-sub) !important;
  line-height: 1.25 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"][data-layout="body-image-stack"] .rm-flower {
  left: 1024px !important;
  top: 84px !important;
  width: 208px !important;
  height: 64px !important;
  color: var(--rm-brown) !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E10 — Body + caption + banner image
   white bg + body left + caption right + banner image bottom (1920×280)
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="body-banner"] > .slide-scale-inner {
  background: var(--rm-white) !important;
}

[data-template="retro-modern"][data-layout="body-banner"] .rm-banner-image {
  left: 0 !important;
  top: 800px !important;
  width: 1920px !important;
  height: 280px !important;
}

[data-template="retro-modern"] .rm-banner-body {
  position: absolute !important;
  left: 60px !important;
  top: 70px !important;
  width: 1340px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-lg) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.39 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-banner-caption {
  position: absolute !important;
  left: 1380px !important;
  top: 64px !important;
  width: 480px !important;
  text-align: right !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--rm-sz-sub) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E11 — Image panel + two lists
   white bg + image left (700×1080 full-height) + title overlay + sub + 2 lists
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="image-lists"] > .slide-scale-inner {
  background: var(--rm-white) !important;
}

[data-template="retro-modern"][data-layout="image-lists"] .rm-lists-image {
  left: 0 !important;
  top: 0 !important;
  width: 700px !important;
  height: 1080px !important;
}

[data-template="retro-modern"] .rm-lists-title {
  position: absolute !important;
  left: 60px !important;
  top: 944px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-headline) !important;
  letter-spacing: -0.04em !important;
  color: var(--rm-chartreuse) !important;
  z-index: 4 !important;
  margin: 0 !important;
}

[data-template="retro-modern"] .rm-lists-sub {
  position: absolute !important;
  left: 760px !important;
  top: 62px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-sub) !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-list-col {
  position: absolute !important;
  top: 632px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-sm) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
}

[data-template="retro-modern"] .rm-list-col[data-cell="1"] { left: 796px !important; }
[data-template="retro-modern"] .rm-list-col[data-cell="2"] { left: 1376px !important; }
[data-template="retro-modern"] .rm-list-col > span { display: block !important; height: 50px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   E12 — Quote
   chartreuse bg + 480×280 image top-left + huge quote glyph 0.15 + quote text + attribution
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="quote"] > .slide-scale-inner {
  background: var(--rm-chartreuse) !important;
}

[data-template="retro-modern"][data-layout="quote"] .rm-quote-image {
  left: 60px !important;
  top: 60px !important;
  width: 480px !important;
  height: 280px !important;
}

[data-template="retro-modern"][data-layout="quote"] .rm-quote-glyph {
  left: 60px !important;
  top: 60px !important;
  width: 1031px !important;
  height: 1062px !important;
  color: var(--rm-brown) !important;
  opacity: 0.15 !important;
  z-index: 1 !important;
}

[data-template="retro-modern"] .rm-quote-text {
  position: absolute !important;
  left: 60px !important;
  top: 497px !important;
  width: 1620px !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-headline) !important;
  letter-spacing: -0.04em !important;
  line-height: 0.95 !important;
  color: var(--rm-brown) !important;
  white-space: pre-line !important;
  z-index: 3 !important;
}

[data-template="retro-modern"] .rm-quote-attr {
  position: absolute !important;
  left: 60px !important;
  top: 962px !important;
  font-family: var(--rm-font-serif) !important;
  font-weight: 500 !important;
  font-size: var(--rm-sz-body-date) !important;
  letter-spacing: -0.02em !important;
  color: var(--rm-brown) !important;
  z-index: 3 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   E13 — Contact / closing
   chartreuse bg + marigold image panel left (1220×1080) + Contact title right + body right
   ═══════════════════════════════════════════════════════════════════════════ */

[data-template="retro-modern"][data-layout="contact"] > .slide-scale-inner {
  background: var(--rm-chartreuse) !important;
}

[data-template="retro-modern"][data-layout="contact"] .rm-contact-image {
  left: 0 !important;
  top: 0 !important;
  width: 1220px !important;
  height: 1080px !important;
  /* fallback colour when AI image still pending matches spec marigold panel */
  background: var(--rm-marigold) !important;
}

[data-template="retro-modern"] .rm-contact-title {
  position: absolute !important;
  left: 1360px !important;
  top: 60px !important;
  width: 500px !important;
  text-align: right !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 800 !important;
  font-size: var(--rm-sz-headline) !important;
  letter-spacing: -0.04em !important;
  color: var(--rm-brown) !important;
  z-index: 2 !important;
  margin: 0 !important;
  white-space: pre-line !important;
}

[data-template="retro-modern"] .rm-contact-body {
  position: absolute !important;
  left: 1320px !important;
  top: 660px !important;
  width: 540px !important;
  text-align: right !important;
  font-family: var(--rm-font-sans) !important;
  font-weight: 600 !important;
  font-size: var(--rm-sz-sub) !important;
  letter-spacing: -0.04em !important;
  line-height: 1.4 !important;
  color: var(--rm-brown) !important;
  white-space: pre-line !important;
  z-index: 2 !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   D-form fallback — section-level bg
   ───────────────────────────────────────────────────────────────────────────
   The 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`.
   The selector misses, fallback to white via thumb container.
   Mirror each layout bg directly to the section element (`[data-template]
   [data-layout]`) so D-form preview renders the correct bg. Editor path
   (section > .slide-scale-inner) is unaffected because inner has inset:0
   covering section bg with its own paint. (Rainy 2026-06-22: generate-modal
   preview "Slide 1/3/4 都是白底" — JsonRenderer D-form path lacks the
   .slide-scale-inner wrapper.)
   Specificity (2 attrs = 0,2,0) ties the base `.slide` transparent rule
   above; source order after makes these win.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-template="retro-modern"][data-layout="cover-dark"],
[data-template="retro-modern"][data-layout="closing"],
[data-template="retro-modern"][data-layout="section-divider"],
[data-template="retro-modern"][data-layout="body-caption"],
[data-template="retro-modern"][data-layout="metrics-chart"] {
  background: var(--rm-olive) !important;
}
[data-template="retro-modern"][data-layout="cover-bright"],
[data-template="retro-modern"][data-layout="body-image-cluster"],
[data-template="retro-modern"][data-layout="split-text"],
[data-template="retro-modern"][data-layout="body-image-stack"],
[data-template="retro-modern"][data-layout="quote"],
[data-template="retro-modern"][data-layout="contact"] {
  background: var(--rm-chartreuse) !important;
}
[data-template="retro-modern"][data-layout="title-grid"] {
  background: var(--rm-marigold) !important;
}
[data-template="retro-modern"][data-layout="body-banner"],
[data-template="retro-modern"][data-layout="image-lists"] {
  background: var(--rm-white) !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="retro-modern"] .rm-banner-body { max-height: 950px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-banner-caption { max-height: 6px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-bc-body { max-height: 950px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-bc-caption { max-height: 6px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-cluster-body { max-height: 460px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-contact-body { max-height: 360px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-contact-title { max-height: 600px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-cover-date { max-height: 172px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-cover-date-c { max-height: 210px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-cover-sub-c { max-height: 124px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-cover-title { max-height: 210px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-cover-title-c { max-height: 240px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-grid-sub { max-height: 508px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-grid-title { max-height: 452px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-list-col { max-height: 388px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-lists-sub { max-height: 882px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-lists-title { max-height: 76px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-metric-sub { max-height: 65px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-metric-value { max-height: 875px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-quote-attr { max-height: 58px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-quote-text { max-height: 465px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-section-num { max-height: 808px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-section-title { max-height: 152px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-split-body { max-height: 312px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-split-sub { max-height: 136px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-split-title { max-height: 512px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-stack-body { max-height: 158px !important; overflow: hidden !important; }
[data-template="retro-modern"] .rm-stack-title { max-height: 802px !important; overflow: hidden !important; }

[data-template="retro-modern"] .rm-banner-body , [data-template="retro-modern"] .rm-banner-caption , [data-template="retro-modern"] .rm-bc-body , [data-template="retro-modern"] .rm-bc-caption , [data-template="retro-modern"] .rm-cluster-body , [data-template="retro-modern"] .rm-contact-body , [data-template="retro-modern"] .rm-contact-title , [data-template="retro-modern"] .rm-cover-date , [data-template="retro-modern"] .rm-cover-date-c , [data-template="retro-modern"] .rm-cover-sub-c , [data-template="retro-modern"] .rm-cover-title , [data-template="retro-modern"] .rm-cover-title-c , [data-template="retro-modern"] .rm-grid-sub , [data-template="retro-modern"] .rm-grid-title , [data-template="retro-modern"] .rm-list-col , [data-template="retro-modern"] .rm-lists-sub , [data-template="retro-modern"] .rm-lists-title , [data-template="retro-modern"] .rm-metric-sub , [data-template="retro-modern"] .rm-metric-value , [data-template="retro-modern"] .rm-quote-attr , [data-template="retro-modern"] .rm-quote-text , [data-template="retro-modern"] .rm-section-num , [data-template="retro-modern"] .rm-section-title , [data-template="retro-modern"] .rm-split-body , [data-template="retro-modern"] .rm-split-sub , [data-template="retro-modern"] .rm-split-title , [data-template="retro-modern"] .rm-stack-body , [data-template="retro-modern"] .rm-stack-title { --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="retro-modern"] .rm-image:empty, [data-template="retro-modern"] .rm-section-bg:empty, [data-template="retro-modern"] .rm-banner-image:empty, [data-template="retro-modern"] .rm-stack-image:empty, [data-template="retro-modern"] .rm-grid-image:empty, [data-template="retro-modern"] .rm-quote-image:empty, [data-template="retro-modern"] .rm-contact-image:empty, [data-template="retro-modern"] .rm-lists-image:empty, [data-template="retro-modern"] .rm-cluster-image:empty, [data-template="retro-modern"] .rm-chart-slot:empty {
  background: transparent !important;
  border: none !important;
  outline: none !important;
}
[data-template="retro-modern"] .rm-image:empty::before, [data-template="retro-modern"] .rm-section-bg:empty::before, [data-template="retro-modern"] .rm-banner-image:empty::before, [data-template="retro-modern"] .rm-stack-image:empty::before, [data-template="retro-modern"] .rm-grid-image:empty::before, [data-template="retro-modern"] .rm-quote-image:empty::before, [data-template="retro-modern"] .rm-contact-image:empty::before, [data-template="retro-modern"] .rm-lists-image:empty::before, [data-template="retro-modern"] .rm-cluster-image:empty::before, [data-template="retro-modern"] .rm-chart-slot:empty::before {
  content: none !important;
}