@layer reset, tokens, base, components, report, utilities, overrides;

/* ---- src/tokens.css ---- */
/* Design tokens — seeded from reelmetric-script-web/static/css/reelmetrics-theme.css
   as it stood after T151.10 (monochrome set). ADR-0054 SS2.2. */
@layer tokens {
:root {
  /* T153.02 (D9): this declared dark while the page beneath it renders
     light (--rm-paper #fafafa / --rm-ink #0a0a0a, T151.10's monochrome
     set) -- asking the browser for dark form controls and scrollbars on a
     white page. Corrected to match what actually renders. A concept whose
     own page is dark may override this directly in its own [data-theme]
     block -- color-scheme is the one native (non --rm-*) property the
     override contract allows, see docs/theme_override_contract.md. */
  color-scheme: light;

  /* Color palette — monochrome only (T151.10). Names are kept for a smaller diff;
     values are black/white/neutral-gray so every rule built on these tokens,
     used or not, resolves to monochrome without a per-rule rewrite. */
  --rm-ink: #0a0a0a;
  --rm-ink-2: #141414;
  --rm-panel: #1c1c1c;
  --rm-panel-2: #242424;
  --rm-cream: #ffffff;
  --rm-paper: #fafafa;
  --rm-muted: #9a9a9a;
  --rm-muted-2: #737373;
  --rm-line: rgba(255, 255, 255, 0.14);
  --rm-line-strong: rgba(255, 255, 255, 0.28);
  /* Legacy accent-token names, still consumed by the unused landing-hero rules
     below (0 references in the six submitter templates as of T151.10) — kept
     monochrome so nothing that later reuses them regains color by accident. */
  --rm-gold: #3a3a3a;
  --rm-gold-2: #737373;
  --rm-red: #2b2b2b;
  --rm-teal: #2b2b2b;
  --rm-blue: #2b2b2b;

  /* Typography scale */
  --rm-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --rm-font-serif: Georgia, "Times New Roman", serif;
  --rm-text-xs: 0.78rem;
  --rm-text-sm: 0.9rem;
  --rm-text-md: 1rem;
  --rm-text-lg: 1.15rem;
  --rm-text-xl: 1.45rem;
  --rm-text-2xl: 2rem;
  --rm-text-3xl: 3rem;
  --rm-text-4xl: 4.7rem;

  /* Layout and spacing */
  --rm-page-pad: 1.5rem;
  --rm-container: 1180px;
  --rm-section: 6rem;
  --rm-section-tight: 4rem;
  --rm-radius: 8px;
  --rm-radius-sm: 6px;
  --rm-shadow: 0 24px 70px rgba(0, 0, 0, 0.28);
  --rm-shadow-soft: 0 16px 34px rgba(0, 0, 0, 0.18);
  --rm-page-bg: linear-gradient(135deg, var(--rm-paper) 0%, #f5f0e6 100%);
  --rm-page-noise-opacity: 0.03;
  --rm-section-divider: 0 solid transparent;
  --rm-section-ink-fg: var(--rm-cream);
  --rm-section-ink-bg: var(--rm-ink);
  --rm-section-ink-kicker: rgba(255, 255, 255, 0.82);
  --rm-section-ink-muted: var(--rm-muted);
  --rm-section-ink-card-fg: var(--rm-cream);
  --rm-section-ink-card-bg: var(--rm-panel);
  --rm-section-paper-lead: #58616d;
  --rm-card-bg: var(--rm-panel);
  --rm-card-border: var(--rm-line);
  --rm-card-radius: var(--rm-radius);
  --rm-card-shadow: var(--rm-shadow-soft);

  /* Shared component roles. Defaults preserve the current monochrome surface;
     themes can now move app cards, buttons, status rows, and upload controls
     without overriding selector internals. */
  --rm-brand-mark-color: #ffffff;
  --rm-brand-mark-bg: #000000;
  --rm-button-primary-fg: #ffffff;
  --rm-button-primary-bg: #000000;
  --rm-button-primary-bg-hover: #262626;
  --rm-button-secondary-fg: #000000;
  --rm-button-secondary-border: #b5b5b5;
  --rm-button-secondary-bg: #ffffff;
  --rm-button-secondary-border-hover: #000000;
  --rm-button-secondary-bg-hover: #f2f2f2;
  --rm-button-disabled-fg: #8a8a8a;
  --rm-button-disabled-bg: #e5e5e5;
  --rm-card-paper-border: rgba(9, 11, 15, 0.12);
  --rm-card-paper-bg: #ffffff;
  --rm-card-paper-shadow: 0 12px 28px rgba(9, 11, 15, 0.08);
  --rm-paper-muted: #5d6672;
  --rm-status-row-border: #e5e5e5;
  --rm-status-badge-fg: #333333;
  --rm-status-badge-bg: #f5f5f5;
  --rm-status-badge-border: #d0d0d0;
  --rm-status-badge-dot: #a3a3a3;
  --rm-status-badge-active-fg: #000000;
  --rm-status-badge-active-bg: #ffffff;
  --rm-status-badge-active-border: #000000;
  --rm-status-badge-active-dot: #000000;
  --rm-progress-track: #e0e0e0;
  --rm-progress-dot-bg: #ffffff;
  --rm-progress-dot-border: #c7c7c7;
  --rm-progress-active: #000000;
  --rm-progress-active-ring: rgba(0, 0, 0, 0.1);
  --rm-progress-label: #737373;
  --rm-progress-label-active: #000000;
  --rm-progress-check-fg: #ffffff;
  --rm-dropzone-border: #b5b5b5;
  --rm-dropzone-bg: #fafafa;
  --rm-dropzone-border-hover: #000000;
  --rm-dropzone-bg-hover: #f2f2f2;
  --rm-dropzone-icon-border: #000000;
  --rm-dropzone-file-bg: #000000;
  --rm-dropzone-file-fg: #ffffff;
  --rm-link-accent: #000000;
  --rm-danger-text: #000000;
  --rm-cta-accent-bg: rgba(232, 174, 77, 0.14);
  --rm-cta-rule-color: rgba(247, 239, 225, 0.06);
  --rm-landing-bg: var(--rm-cream);
  --rm-landing-ink: var(--rm-black);
  --rm-landing-muted: var(--rm-charcoal);
  --rm-landing-font-sans: Arial, Helvetica, sans-serif;
  --rm-landing-font-serif: Georgia, "Times New Roman", serif;
  --rm-landing-font-wordmark: Impact, Haettenschweiler, "Arial Black", "Franklin Gothic Heavy", sans-serif;
  --rm-landing-wordmark-size: clamp(5.1rem, 15.8vw, 19rem);
  --rm-landing-wordmark-line-height: 0.78;
  --rm-landing-wordmark-letter-spacing: clamp(-0.015em, 0.08vw, 0.02em);
  --rm-landing-wordmark-max-width: calc(100vw - clamp(1rem, 2vw, 1.8rem));
  --rm-landing-wordmark-transform: scaleY(1.48);
  --rm-landing-wordmark-mobile-size: clamp(3.2rem, 15.5vw, 6.8rem);
  --rm-landing-wordmark-mobile-max-width: calc(100vw - 1rem);
  --rm-landing-wordmark-mobile-transform: scaleY(1.22);
  --rm-hero-bg:
    linear-gradient(90deg, rgba(9, 11, 15, 0.92), rgba(9, 11, 15, 0.66) 48%, rgba(9, 11, 15, 0.2)),
    linear-gradient(180deg, rgba(9, 11, 15, 0.2), rgba(9, 11, 15, 0.94)),
    var(--rm-ink-2);
  --rm-hero-rule-bg:
    repeating-linear-gradient(
      0deg,
      rgba(247, 239, 225, 0.08) 0,
      rgba(247, 239, 225, 0.08) 1px,
      transparent 1px,
      transparent 56px
    );
  --rm-hero-rule-opacity: 0.28;
  --rm-hero-fade-bg: linear-gradient(180deg, transparent, var(--rm-ink));
  --rm-hero-fg: var(--rm-cream);
  --rm-hero-kicker: rgba(247, 239, 225, 0.76);
  --rm-hero-lead: rgba(247, 239, 225, 0.76);
  --rm-hero-border: 0 solid transparent;
  --rm-hero-min-height: clamp(360px, 46vh, 500px);
  --rm-hero-min-height-tablet: 420px;
  --rm-hero-min-height-mobile: 380px;
  --rm-hero-content-pad-top: 4.25rem;
  --rm-hero-content-pad-bottom: 3.75rem;
  --rm-hero-content-pad-top-mobile: 3.25rem;
  --rm-hero-content-pad-bottom-mobile: 3rem;
  --rm-hero-h1-max-width: 15ch;
  --rm-hero-h1-size: min(var(--rm-text-4xl), 4.25rem);
  --rm-cta-bg:
    linear-gradient(90deg, var(--rm-cta-accent-bg), transparent 50%),
    var(--rm-panel);
  --rm-cta-fg: var(--rm-cream);
  --rm-cta-border: var(--rm-line);
  --rm-cta-shadow: var(--rm-shadow);
  --rm-cta-kicker: rgba(247, 239, 225, 0.78);
  --rm-cta-lead: rgba(247, 239, 225, 0.76);
  --rm-cta-overlay-opacity: 0.28;

  /* T152.03: script-web's static/css/styles.css defined its own 13-name token
     vocabulary (--charcoal, --slate, --amber, --muted, --border, --panel,
     --panel-white, --script-white, --light-gray, --bg, --text, --accent,
     --accent-hv) with no --rm-* equivalent for these five distinct values.
     --panel/--panel-white/--script-white/--bg already had exact matches
     (--rm-cream, --rm-paper) and are not duplicated here. */
  --rm-charcoal: #1a1a1a;
  --rm-charcoal-hover: #262626;
  --rm-slate: #595959;
  --rm-light-gray: #e5e5e5;
  --rm-black: #000000;

  /* T153.03 -- report surface (report_user.html, .ru-*). Every value below is
     a value-for-value transcription of a literal this template's own inline
     style block used to hardcode; nothing was redesigned, only named. Black,
     white, --rm-paper's gray, --rm-muted's gray, and --rm-charcoal's gray
     already had exact matches above and are reused, not duplicated. */
  --rm-report-muted: #6b6b6b;
  --rm-report-body: #4a4a4a;
  --rm-report-border: #d9d9d9;
  --rm-report-border-soft: #dcdcdc;
  --rm-report-border-chip: #d0d0d0;
  --rm-report-border-card: #e2e2e2;
  --rm-report-border-hair: #ececec;
  --rm-report-eyebrow-bg: var(--rm-cream);
  --rm-report-eyebrow-color: var(--rm-charcoal);
  --rm-report-eyebrow-border: var(--rm-report-accent);
  --rm-report-chip-bg: var(--rm-paper);
  --rm-report-chip-color: var(--rm-report-body);
  --rm-report-panel-bg: var(--rm-paper);
  --rm-report-panel-border: var(--rm-report-border-card);
  --rm-report-panel-radius: 8px;
  --rm-report-panel-radius-sm: 6px;
  --rm-report-card-padding: 1rem;
  --rm-report-card-padding-sm: 0.75rem;
  --rm-report-dialogue-border-accent: var(--rm-black);
  --rm-report-data-fill: var(--rm-black);
  --rm-report-table-heading-color: var(--rm-report-muted);
  --rm-report-table-heading-border: 1px solid var(--rm-report-border);
  --rm-report-phase-bg: var(--rm-cream);
  --rm-report-phase-fg: var(--rm-charcoal);
  --rm-report-phase-border: var(--rm-muted);
  --rm-report-pending-bg: var(--rm-cream);
  --rm-report-pending-radius: 10px;

  /* T153.03 -- document surface (decision_package.html .dp-*, worksheet_public.html
     .wp-* -- near-identical dark navy/gold layouts, predating T151.10's monochrome
     pass and never converted; preserved as-is, per D7, not corrected here). Screen
     values shared by both templates: */
  --rm-report-doc-panel-bg: rgba(22, 27, 36, 0.88);
  --rm-report-doc-shadow: 0 22px 60px rgba(0, 0, 0, .34);
  --rm-report-doc-track-bg: rgba(255, 255, 255, .07);
  --rm-report-doc-field-bg: rgba(255, 255, 255, .025);
  --rm-report-doc-hair: rgba(255, 255, 255, .04);
  --rm-report-doc-accent-2: #f5c86a;
  --rm-report-doc-accent-bg-soft: rgba(232, 174, 77, .08);
  --rm-report-doc-accent-border: rgba(232, 174, 77, .3);
  /* decision_package.html only (print button / market pill): */
  --rm-report-doc-accent-bg: rgba(232, 174, 77, .14);
  --rm-report-doc-accent-bg-hover: rgba(232, 174, 77, .22);
  /* decision_package.html's @media print block -- a separate, print-safe
     light palette layered on top of the screen colors above. */
  --rm-report-doc-print-border: #ccc;
  --rm-report-doc-print-ink: #111;
  --rm-report-doc-print-muted: #555;
  --rm-report-doc-print-muted-2: #666;
  --rm-report-doc-print-track-bg: #eee;
  --rm-report-doc-print-accent: #d4a843;
  --rm-report-doc-print-accent-dark: #8a6d1b;
  --rm-report-doc-print-accent-bg: #fff8e6;
  --rm-report-doc-print-pill-bg: #f5e6c8;

  /* T153.03 -- script-web's static/sample_report.html: a wholly separate dark
     orange/blue visual language with its own page-local :root, none of it
     related to the report/document families above. Moved wholesale, prefixed
     to avoid colliding with any future unrelated use of a generic name like
     --accent or --shadow; original page-local names kept as the suffix so
     the mapping back to the source rules is legible. */
  --rm-report-sr-bg: #0f1116;
  --rm-report-sr-bg-end: #0c0e13;
  --rm-report-sr-bg-soft: #151923;
  --rm-report-sr-panel: rgba(22, 26, 36, 0.9);
  --rm-report-sr-panel-strong: #1d2230;
  --rm-report-sr-line: rgba(255, 255, 255, 0.08);
  --rm-report-sr-line-strong: rgba(255, 255, 255, 0.12);
  --rm-report-sr-text: #f4efe7;
  --rm-report-sr-muted: #a6afbf;
  --rm-report-sr-accent: #ff9d00;
  --rm-report-sr-accent-soft: rgba(255, 157, 0, 0.12);
  --rm-report-sr-accent-2: #49b3ff;
  --rm-report-sr-good: #49d39b;
  --rm-report-sr-warn: #f5b84b;
  --rm-report-sr-shadow: 0 22px 60px rgba(0, 0, 0, 0.34);
  --rm-report-sr-radius-xl: 24px;
  --rm-report-sr-radius-lg: 18px;
  --rm-report-sr-radius-md: 14px;
  --rm-report-sr-radius-sm: 10px;
  /* Additional one-off literals used directly in sample_report.html's rules,
     never routed through its own page-local :root: */
  --rm-report-sr-glow-1: rgba(255, 157, 0, 0.14);
  --rm-report-sr-glow-2: rgba(73, 179, 255, 0.11);
  --rm-report-sr-surface-veil: rgba(255, 255, 255, 0.03);
  --rm-report-sr-on-accent: #101217;
  --rm-report-sr-accent-dark: #e87c1f;
  --rm-report-sr-track-bg: rgba(255, 255, 255, 0.07);
  --rm-report-sr-track-bg-2: rgba(255, 255, 255, 0.08);
  --rm-report-sr-ring-inner-1: rgba(21, 25, 35, 0.96);
  --rm-report-sr-ring-inner-2: rgba(16, 18, 24, 0.96);
  --rm-report-sr-accent-glow: rgba(255, 157, 0, 0.16);
  --rm-report-sr-accent-border: rgba(255, 157, 0, 0.22);
  --rm-report-sr-accent-light: #ffd280;
  --rm-report-sr-accent2-light: #9fe1ff;
  --rm-report-sr-good-bg: rgba(73, 211, 155, 0.12);
  --rm-report-sr-accent-pale: #ffcb6b;
  --rm-report-sr-card-bg: rgba(255, 255, 255, 0.025);

  /* T153.03 -- landing's static/sample_report.html: a third, light amber/slate
     card layout, also page-local before this task. var(--slate)/var(--amber)/
     var(--border)/var(--text) referenced by that file are pre-existing,
     already-undefined custom properties (no declaration anywhere in this
     repo's committed CSS) -- left exactly as-is (D7): defining them now would
     change what currently renders, which is a fix, not an extraction, and out
     of this task's scope. */
  --rm-report-lsr-pill-bg: rgba(255, 255, 255, 0.74);
  --rm-report-lsr-track-bg: rgba(74, 85, 104, 0.12);
  --rm-report-lsr-accent-light: #ffbe40;
  --rm-report-lsr-shadow-glow: rgba(255, 157, 0, 0.2);
  --rm-report-lsr-note-bg: rgba(255, 157, 0, 0.08);
  --rm-report-lsr-card-bg: rgba(255, 255, 255, 0.72);

  /* T153.05 -- report_user.html (.ru-*) structural/typography roles this
     task adds so a document theme (Festival Broadsheet) can shift rhythm,
     density and heading voice without a template edit. Every default below
     is a value-for-value transcription of the literal report.css already
     hardcoded at the corresponding declaration site (D7 -- the no-theme
     build stays byte-identical); this section only *names* those literals
     as overridable roles, it does not introduce a redesign. Sites not
     listed here (money-shot, char-card, angle-card, comp-card interior
     type, pill sizing) are named as an explicit gap in T153.05's
     completion evidence rather than silently tokenized or silently
     skipped -- Festival Broadsheet's "editorial rhythm" claim rests on the
     roles below (headings, body prose, section container, tables), not on
     every micro-component. */
  --rm-report-font-heading: var(--rm-font-serif);
  --rm-report-font-ui: var(--rm-font-sans);

  --rm-report-text-h1: clamp(1.9rem, 3.4vw, 3rem);   /* .ru-hero-copy h1 */
  --rm-report-text-h2: 1.14rem;                      /* .ru-section h2 */
  --rm-report-leading-h1: 1.05;                      /* .ru-hero-copy h1 */
  --rm-report-leading-lead: 1.8;                     /* .ru-hero-lead */
  --rm-report-leading-sub: 1.65;                     /* .ru-section-sub */
  --rm-report-leading-card: 1.75;                    /* .ru-card p, .ru-pending p */

  --rm-report-section-radius: 10px;                  /* .ru-section */
  --rm-report-section-border: 1px solid var(--rm-report-border-soft);
  --rm-report-section-bg: var(--rm-cream);
  /* Empty by default -- a theme sets this to render a full-width rule
     between sections instead of (or in addition to) the bordered-card
     look above; report.css applies it as border-top on .ru-section. */
  --rm-report-section-divider: none;

  --rm-report-pill-radius: 999px;                    /* .ru-pill, .ru-chip, .ru-eyebrow, .ru-mini-pill */

  --rm-report-table-border: 1px solid var(--rm-report-border-hair); /* .ru-arc-table/.ru-focus-table td */
  --rm-report-table-cell-padding: .5rem .6rem;

  /* T153.05 -- accent roles. report.css had no third color beyond black/
     charcoal/paper (T151.10 monochrome); these two default to the existing
     monochrome values (D7) and give a document theme's "accent"/"secondary"
     palette slots (ADR-0055 SS2.1) somewhere specific to land -- mini-pill
     and pill-accent fills, the eyebrow border, and the report's headline
     numbers (stat value, comp title, beat score) for --rm-report-accent;
     the comp-score badge and the money-shot marker for
     --rm-report-accent-2. Not every black/charcoal use in report.css was
     re-routed through these two -- ordinary body headings (h1/h2, arc-idx,
     char-name) stay on --rm-black/--rm-charcoal on purpose, so a themed
     accent reads as emphasis rather than recoloring the whole page. */
  --rm-report-accent: var(--rm-black);
  --rm-report-accent-2: var(--rm-charcoal);

  /* T153.05 / ADR-0055 SS2.2 -- Festival Jewel, the fixed fingerprint color
     contract. These eight tokens are the ONLY themeable-looking values in
     this file a theme file may NOT override -- build/build.py's contract
     validator hard-rejects any `--rm-fingerprint-*` declaration inside a
     src/themes/*.css file regardless of this allowlist mechanism's normal
     "any declared --rm-* token" rule, and
     tests/test_t153_05_fingerprint_contract.py enforces both that block and
     that these hex values never appear rendered outside a `.rm-fingerprint`
     -scoped rule. Genre order is FREEZE-ALPHA-002's canonical eight; do not
     reassign a color to a different genre without a new ADR. */
  --rm-fingerprint-drama: #355070;
  --rm-fingerprint-comedy: #e9c46a;
  --rm-fingerprint-action: #e76f51;
  --rm-fingerprint-thriller-suspense: #6d597a;
  --rm-fingerprint-horror: #5a2333;
  --rm-fingerprint-romance: #b56576;
  --rm-fingerprint-sci-fi-fantasy: #2d8c8c;
  --rm-fingerprint-family-inspirational: #f4a261;
}
}

/* ---- src/base.css ---- */
/* Reset + base page/section/typography primitives. ADR-0054 SS2.2. */
@layer reset {
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}
}

@layer base {
body.rm-theme-page {
  margin: 0;
  min-height: 100vh;
  font-family: var(--rm-font-sans);
  font-size: var(--rm-text-md);
  color: var(--rm-ink);
  background: var(--rm-paper);
  line-height: 1.65;
}

.rm-theme-page a {
  color: inherit;
}

.rm-container {
  width: min(var(--rm-container), calc(100% - (var(--rm-page-pad) * 2)));
  margin: 0 auto;
}

.rm-section {
  padding: var(--rm-section) 0;
  border-top: var(--rm-section-divider);
}

.rm-section--tight {
  padding: var(--rm-section-tight) 0;
}

.rm-section--paper {
  color: var(--rm-ink);
  background: var(--rm-paper);
}

.rm-section--ink {
  color: var(--rm-section-ink-fg);
  background: var(--rm-section-ink-bg);
}

.rm-section-head {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(280px, 0.52fr);
  gap: 3rem;
  align-items: end;
  margin-bottom: 2.5rem;
}

.rm-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 1rem;
  color: #4a4a4a;
  font-size: var(--rm-text-xs);
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.rm-section--ink .rm-kicker {
  color: var(--rm-section-ink-kicker);
}

.rm-kicker::before {
  content: "";
  width: 2.4rem;
  height: 1px;
  background: currentColor;
}

.rm-theme-page h1,
.rm-theme-page h2,
.rm-theme-page h3,
.rm-theme-page p {
  margin-top: 0;
}

/* T153.09: Bootstrap declares its own pink for `code` (see the task's
   Notes for the exact value); nothing in this design system competed for
   that selector, so layering Bootstrap alone (base.html) doesn't fix it --
   this is the competing rule that does. Deliberately not spelling the hex
   literal here -- it would land verbatim in the compiled bundle (build.py
   concatenates comments as-is) and trip this repo's and script-web's own
   hex-palette allowlist guard as a phantom new color. */
.rm-theme-page code,
.rm-theme-page kbd,
.rm-theme-page samp {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.9em;
  color: inherit;
}

.rm-theme-page h1,
.rm-theme-page h2,
.rm-theme-page h3 {
  color: inherit;
  line-height: 1.05;
  letter-spacing: 0;
}

.rm-theme-page h1 {
  max-width: 12ch;
  margin-bottom: 1.3rem;
  font-family: var(--rm-font-serif);
  font-size: var(--rm-text-4xl);
  font-weight: 700;
}

.rm-theme-page h2 {
  margin-bottom: 1rem;
  font-family: var(--rm-font-serif);
  font-size: var(--rm-text-3xl);
  font-weight: 700;
}

.rm-theme-page h3 {
  margin-bottom: 0.65rem;
  font-size: var(--rm-text-xl);
  font-weight: 800;
}

.rm-lead {
  max-width: 42rem;
  color: var(--rm-muted);
  font-size: var(--rm-text-lg);
}

.rm-section--paper .rm-lead,
.rm-section--paper .rm-muted {
  color: var(--rm-section-paper-lead);
}

.rm-muted {
  color: var(--rm-muted);
}

.rm-small {
  font-size: var(--rm-text-sm);
}

/* Ported from reelmetric-script-web/static/css/styles.css by T152.03 (D10). */
html, body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, sans-serif;
  color: var(--rm-charcoal);
  background: var(--rm-page-bg);
  min-height: 100vh;
  position: relative;
}

/* Subtle film grain overlay */
body::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: var(--rm-page-noise-opacity);
  pointer-events: none;
  z-index: -1;
}

/* The bare *,*::before,*::after reset here is safe in any layer: it is
   !important, and important declarations invert normal layer order (earlier
   layer wins), so it overrides every non-important transition/animation
   declared in components/overrides regardless of this layer's position.
   The one non-important sub-rule from the source media query, `.reveal`'s
   opacity/transform reset, is NOT safe here: base is cascade-earlier than
   components, so a non-important base rule can never beat a non-important
   components rule (.reveal's default opacity:0). That one line is ported
   into components.css's `@layer utilities` block instead, next to `.reveal`
   itself, where utilities' later position makes the override actually apply. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}
}

/* ---- src/components.css ---- */
/* Component classes (buttons, nav, hero, cards, tables, etc.) plus
   responsive/reduced-motion utility rules. ADR-0054 SS2.2. */
@layer components {
/* T153.09: reelmetric-script-web's <main class="container"> is a Bootstrap
   container (base.html, retained for its row / col-N / btn-N utilities) --
   its 1140px max-width and side padding clip every full-bleed .rm-section
   nested inside it. Nothing here competed for `main.container` before, so
   layering Bootstrap alone doesn't fix this either; this is the competing
   rule. Scoped to the exact class combo base.html uses, so it cannot touch
   any other .container, .row, or .col-N usage inside a page's own content.
   (A CSS comment ends at its first asterisk-then-slash pair. An earlier
   draft of this comment wrote two Bootstrap class stems back to back with
   only that pair between them and, unnoticed by anything short of an
   actual browser parse, closed itself early -- which silently dropped the
   whole rule below with no build error. See this task's own Notes for how
   that was found.) */
main.container {
  max-width: none;
  padding-right: 0;
  padding-left: 0;
}

.rm-topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 10;
  padding: 1.1rem 0;
}

.rm-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.rm-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--rm-cream);
  font-weight: 900;
  text-decoration: none;
}

.rm-brand-mark {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  border: 1px solid var(--rm-line-strong);
  border-radius: 50%;
  color: var(--rm-brand-mark-color);
  background: var(--rm-brand-mark-bg);
  font-family: var(--rm-font-serif);
  font-weight: 700;
}

.rm-nav-links {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  margin-left: auto;
}

.rm-nav-links a {
  color: rgba(247, 239, 225, 0.82);
  font-size: var(--rm-text-sm);
  font-weight: 750;
  text-decoration: none;
}

.rm-nav-links a:hover {
  color: var(--rm-cream);
}

/* Light-background variant: dark ink nav text for pages without a dark hero
   (T153.10) -- and, for the same reason, no hero to float over. The base
   .rm-topbar is position:absolute so it can overlay landing's full-bleed
   dark hero without pushing that hero's own content down; a --light page
   has no hero, so the absolute positioning just paints the header over
   whatever is first in the page instead -- on script-web's report page,
   the report's own document header. Reserving real space in normal flow
   is what a header with nothing to float over needs. */
.rm-topbar--light {
  position: static;
}

.rm-topbar--light .rm-brand {
  color: var(--rm-ink);
}

.rm-topbar--light .rm-nav-links a {
  color: var(--rm-ink);
}

.rm-topbar--light .rm-nav-links a:hover {
  color: var(--rm-ink-2);
}

.rm-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.85rem;
  padding: 0.78rem 1.1rem;
  border: 1px solid transparent;
  border-radius: var(--rm-radius-sm);
  font-family: inherit;
  font-size: var(--rm-text-sm);
  font-weight: 850;
  line-height: 1;
  text-align: center;
  text-decoration: none;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.rm-button:hover {
  transform: translateY(-1px);
}

/* One button hierarchy, per user_surface_audit_2026-08-23.md §Design Direction:
   primary = black bg / white text; secondary = white bg / black text / gray
   border; disabled = light gray bg / medium gray text. */
.rm-button--primary {
  color: var(--rm-button-primary-fg);
  background: var(--rm-button-primary-bg);
  box-shadow: none;
}

.rm-button--primary:hover {
  background: var(--rm-button-primary-bg-hover);
}

.rm-button--secondary {
  color: var(--rm-button-secondary-fg);
  border-color: var(--rm-button-secondary-border);
  background: var(--rm-button-secondary-bg);
}

.rm-button--secondary:hover {
  border-color: var(--rm-button-secondary-border-hover);
  background: var(--rm-button-secondary-bg-hover);
}

.rm-button--dark {
  color: var(--rm-button-primary-fg);
  background: var(--rm-button-primary-bg);
}

.rm-button[disabled],
.rm-button--disabled {
  color: var(--rm-button-disabled-fg);
  background: var(--rm-button-disabled-bg);
  border-color: var(--rm-button-disabled-bg);
  cursor: not-allowed;
}

.rm-button[disabled]:hover,
.rm-button--disabled:hover {
  transform: none;
}

.rm-button-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}

.rm-hero {
  position: relative;
  display: grid;
  min-height: var(--rm-hero-min-height);
  overflow: hidden;
  /* T153.08: like .rm-section--ink below, set a light color here so any
     bare heading inside inherits it (base.css's .rm-theme-page h1/h2/h3
     is color:inherit). Before T152.04 moved the page base from dark to
     light, this was unnecessary -- the page's own dark foreground already
     applied. .rm-hero .rm-lead already sets its own explicit light color
     and is unaffected; this is what a bare <h1> was missing. */
  color: var(--rm-hero-fg);
  border-bottom: var(--rm-hero-border);
  background: var(--rm-hero-bg);
}

.rm-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--rm-hero-rule-bg);
  opacity: var(--rm-hero-rule-opacity);
}

.rm-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 34%;
  background: var(--rm-hero-fade-bg);
}

.rm-hero-content {
  position: relative;
  z-index: 2;
  align-self: start;
  padding-top: var(--rm-hero-content-pad-top);
  padding-bottom: var(--rm-hero-content-pad-bottom);
}

.rm-hero-copy {
  max-width: 58rem;
}

.rm-hero .rm-kicker {
  color: var(--rm-hero-kicker);
}

.rm-hero h1 {
  max-width: var(--rm-hero-h1-max-width);
  font-size: var(--rm-hero-h1-size);
}

.rm-hero .rm-lead {
  max-width: 46rem;
  margin-bottom: 2rem;
  color: var(--rm-hero-lead);
}

.rm-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2rem;
  max-width: 43rem;
}

.rm-pill {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.36rem 0.72rem;
  border: 1px solid var(--rm-line);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  font-size: var(--rm-text-xs);
  font-weight: 800;
}

.rm-hero-visual {
  position: absolute;
  inset: 7.5rem -2rem 4rem auto;
  z-index: 1;
  width: min(56vw, 760px);
  min-width: 560px;
  opacity: 0.88;
  pointer-events: none;
}

.rm-product-frame,
.rm-script-frame,
.rm-signal-frame {
  position: absolute;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  background: rgba(22, 27, 36, 0.82);
  box-shadow: var(--rm-shadow);
  backdrop-filter: blur(14px);
}

.rm-product-frame {
  top: 2rem;
  right: 2rem;
  width: 540px;
  min-height: 430px;
  padding: 1rem;
}

.rm-script-frame {
  top: 13rem;
  right: 29rem;
  width: 250px;
  padding: 1rem;
  transform: rotate(-2deg);
}

.rm-signal-frame {
  top: 25.8rem;
  right: 9rem;
  width: 320px;
  padding: 1rem;
}

.rm-window-bar {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.rm-window-dot {
  width: 0.58rem;
  height: 0.58rem;
  border-radius: 50%;
  background: var(--rm-line-strong);
}

.rm-window-dot:nth-child(1) {
  background: var(--rm-red);
}

.rm-window-dot:nth-child(2) {
  background: var(--rm-gold);
}

.rm-window-dot:nth-child(3) {
  background: var(--rm-teal);
}

.rm-score-panel {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 1rem;
  align-items: center;
  min-height: 152px;
  padding: 1rem;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  background: rgba(9, 11, 15, 0.48);
}

.rm-score-ring {
  display: grid;
  place-items: center;
  width: 7.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(var(--rm-gold) 0 82%, rgba(247, 239, 225, 0.12) 82% 100%);
}

.rm-score-ring span {
  display: grid;
  place-items: center;
  width: 5.2rem;
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--rm-cream);
  background: var(--rm-ink-2);
  font-size: var(--rm-text-xl);
  font-weight: 900;
}

.rm-product-title {
  margin: 0 0 0.35rem;
  color: var(--rm-cream);
  font-size: var(--rm-text-md);
  font-weight: 900;
}

.rm-product-copy {
  margin: 0;
  color: var(--rm-muted);
  font-size: var(--rm-text-sm);
}

.rm-bar-stack {
  display: grid;
  gap: 0.65rem;
  margin-top: 1rem;
}

.rm-data-row {
  display: grid;
  grid-template-columns: 6.5rem 1fr 2.5rem;
  gap: 0.7rem;
  align-items: center;
  color: var(--rm-muted);
  font-size: var(--rm-text-xs);
  font-weight: 800;
}

.rm-data-track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(247, 239, 225, 0.12);
}

.rm-data-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--rm-gold);
}

.rm-data-fill--teal {
  background: var(--rm-teal);
}

.rm-data-fill--red {
  background: var(--rm-red);
}

.rm-data-fill--blue {
  background: var(--rm-blue);
}

.rm-script-lines {
  display: grid;
  gap: 0.55rem;
}

.rm-script-line {
  height: 0.52rem;
  border-radius: 999px;
  background: rgba(247, 239, 225, 0.18);
}

.rm-script-line:nth-child(2),
.rm-script-line:nth-child(5) {
  width: 72%;
}

.rm-script-line:nth-child(3),
.rm-script-line:nth-child(7) {
  width: 88%;
}

.rm-script-callout {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rm-line);
  color: var(--rm-gold-2);
  font-size: var(--rm-text-xs);
  font-weight: 900;
}

.rm-signal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem;
}

.rm-mini-metric {
  min-height: 5.5rem;
  padding: 0.75rem;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius-sm);
  background: rgba(9, 11, 15, 0.38);
}

.rm-mini-metric strong {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--rm-cream);
  font-size: var(--rm-text-xl);
  line-height: 1;
}

.rm-mini-metric span {
  display: block;
  color: var(--rm-muted);
  font-size: var(--rm-text-xs);
  font-weight: 800;
}

.rm-value-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border-top: 1px solid var(--rm-line);
  border-bottom: 1px solid var(--rm-line);
  background: var(--rm-line);
}

.rm-value-item {
  padding: 2rem;
  background: var(--rm-ink-2);
}

.rm-value-item strong {
  display: block;
  margin-bottom: 0.45rem;
  color: var(--rm-cream);
  font-size: var(--rm-text-lg);
}

.rm-value-item p {
  max-width: 25rem;
  margin-bottom: 0;
  color: var(--rm-muted);
  font-size: var(--rm-text-sm);
}

.rm-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.rm-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.rm-card {
  border: 1px solid var(--rm-card-border);
  border-radius: var(--rm-card-radius);
  background: var(--rm-card-bg);
  box-shadow: var(--rm-card-shadow);
}

.rm-section--ink .rm-card {
  color: var(--rm-section-ink-card-fg);
  background: var(--rm-section-ink-card-bg);
}

.rm-section--ink .rm-card .rm-muted,
.rm-section--ink .rm-card p {
  color: var(--rm-section-ink-muted);
}

.rm-card--paper {
  border-color: var(--rm-card-paper-border);
  color: var(--rm-ink);
  background: var(--rm-card-paper-bg);
  box-shadow: var(--rm-card-paper-shadow);
}

.rm-card-body {
  padding: 1.35rem;
}

.rm-step {
  display: grid;
  min-height: 18rem;
  align-content: space-between;
}

.rm-step-number {
  color: var(--rm-gold);
  font-family: var(--rm-font-serif);
  font-size: var(--rm-text-3xl);
  font-weight: 700;
  line-height: 1;
}

.rm-step p {
  margin-bottom: 0;
  color: var(--rm-muted);
}

.rm-section--paper .rm-step p {
  color: var(--rm-paper-muted);
}

.rm-insight-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(340px, 0.65fr);
  gap: 1rem;
  align-items: stretch;
}

.rm-analysis-board {
  min-height: 36rem;
  overflow: hidden;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  background:
    linear-gradient(180deg, rgba(247, 239, 225, 0.04), rgba(247, 239, 225, 0)),
    var(--rm-panel);
  box-shadow: var(--rm-shadow);
}

.rm-board-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border-bottom: 1px solid var(--rm-line);
}

.rm-board-title {
  color: var(--rm-cream);
  font-weight: 900;
}

.rm-board-status {
  color: var(--rm-teal);
  font-size: var(--rm-text-xs);
  font-weight: 900;
}

.rm-board-body {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(260px, 0.7fr);
  gap: 1rem;
  padding: 1rem;
}

.rm-slate-panel {
  min-height: 15rem;
  padding: 1rem;
  border: 1px solid var(--rm-line);
  border-radius: var(--rm-radius);
  background: rgba(9, 11, 15, 0.34);
}

.rm-panel-label {
  margin: 0 0 0.8rem;
  color: var(--rm-muted);
  font-size: var(--rm-text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.rm-quote {
  margin: 0;
  color: var(--rm-cream);
  font-family: var(--rm-font-serif);
  font-size: var(--rm-text-2xl);
  line-height: 1.22;
}

.rm-risk-list {
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rm-risk-list li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  color: var(--rm-muted);
  font-size: var(--rm-text-sm);
}

.rm-risk-list li::before {
  content: "";
  width: 0.58rem;
  height: 0.58rem;
  margin-top: 0.43rem;
  border-radius: 50%;
  background: var(--rm-gold);
  flex: 0 0 auto;
}

.rm-comp-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--rm-muted);
  font-size: var(--rm-text-sm);
}

.rm-comp-table th,
.rm-comp-table td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rm-line);
  text-align: left;
}

.rm-comp-table th {
  color: var(--rm-muted-2);
  font-size: var(--rm-text-xs);
  font-weight: 900;
  text-transform: uppercase;
}

.rm-comp-table td:last-child,
.rm-comp-table th:last-child {
  text-align: right;
}

.rm-comp-table strong {
  color: var(--rm-cream);
}

.rm-insight-aside {
  display: grid;
  gap: 1rem;
}

.rm-score-card {
  min-height: 17.5rem;
  padding: 1.35rem;
}

.rm-score-number {
  display: block;
  margin: 1.1rem 0 0.35rem;
  color: var(--rm-gold);
  font-family: var(--rm-font-serif);
  font-size: 5.2rem;
  font-weight: 700;
  line-height: 0.9;
}

.rm-score-card p {
  color: var(--rm-muted);
}

.rm-tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.rm-tag {
  display: inline-flex;
  padding: 0.33rem 0.62rem;
  border: 1px solid var(--rm-line);
  border-radius: 999px;
  color: var(--rm-muted);
  background: rgba(247, 239, 225, 0.04);
  font-size: var(--rm-text-xs);
  font-weight: 850;
}

.rm-cta {
  position: relative;
  overflow: hidden;
  padding: 4rem;
  border: 1px solid var(--rm-cta-border);
  border-radius: var(--rm-radius);
  color: var(--rm-cta-fg);
  background: var(--rm-cta-bg);
  box-shadow: var(--rm-cta-shadow);
}

.rm-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 5.4rem,
      var(--rm-cta-rule-color) 5.4rem,
      var(--rm-cta-rule-color) 5.5rem
    );
  opacity: var(--rm-cta-overlay-opacity);
  pointer-events: none;
}

.rm-cta-content {
  position: relative;
  z-index: 1;
  max-width: 48rem;
}

.rm-cta .rm-kicker {
  color: var(--rm-cta-kicker);
}

.rm-cta .rm-lead {
  color: var(--rm-cta-lead);
}

.rm-footer {
  padding: 2rem 0;
  border-top: 1px solid var(--rm-line);
  color: var(--rm-muted);
  background: var(--rm-ink);
}

.rm-footer-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  align-items: center;
  justify-content: space-between;
}

.rm-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.rm-footer a {
  color: var(--rm-muted);
  font-size: var(--rm-text-sm);
  text-decoration: none;
}

.rm-footer a:hover {
  color: var(--rm-cream);
}

/* Ported from reelmetric-script-web/static/css/styles.css by T152.03 (D10) —
   app-specific components with no equivalent in the shared set above. */

/* ── Status rows / badges (platform_status.html, platform_submit_success.html) ── */
.status-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rm-status-row-border);
}
.status-row:last-child {
  border-bottom: none;
}
.status-row-center {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  align-items: baseline;
  padding: 0.6rem 0 1rem;
}
.status-label {
  color: var(--rm-slate);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-desc {
  color: var(--rm-slate);
  font-size: 0.92rem;
  text-align: center;
  margin: 0 0 1rem;
}
.status-details {
  margin-top: 0.75rem;
}

/* Status badge: weight and a leading marker carry meaning, not color. */
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--rm-status-badge-border);
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: capitalize;
  color: var(--rm-status-badge-fg);
  background: var(--rm-status-badge-bg);
}
.status-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--rm-status-badge-dot);
}
.status-badge.status-released {
  border-color: var(--rm-status-badge-active-border);
  color: var(--rm-status-badge-active-fg);
  background: var(--rm-status-badge-active-bg);
  font-weight: 800;
}
.status-badge.status-released::before {
  background: var(--rm-status-badge-active-dot);
}
.status-badge.status-failed {
  border-color: var(--rm-status-badge-active-border);
  border-width: 2px;
  color: var(--rm-status-badge-active-fg);
  background: var(--rm-status-badge-active-bg);
}
.status-badge.status-failed::before {
  background: var(--rm-status-badge-active-dot);
}

.link-accent {
  color: var(--rm-link-accent);
  font-weight: 700;
  text-decoration: underline;
}

/* ── Progress timeline (platform_status.html) ───────────────────────────── */
.progress-timeline {
  display: flex;
  justify-content: space-between;
  margin: 1.5rem 0;
  position: relative;
}
.progress-timeline-track {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: var(--rm-progress-track);
  z-index: 0;
  transform: translateY(-50%);
}
.progress-timeline-step {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 20%;
}
.progress-timeline-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--rm-progress-dot-bg);
  border: 2px solid var(--rm-progress-dot-border);
  margin: 0 auto 0.5rem;
}
.progress-timeline-dot.active {
  background: var(--rm-progress-dot-bg);
  border-color: var(--rm-progress-active);
  box-shadow: 0 0 0 3px var(--rm-progress-active-ring);
}
.progress-timeline-dot.done {
  background: var(--rm-progress-active);
  border-color: var(--rm-progress-active);
}
.progress-timeline-dot.done::after {
  content: "\2713";
  display: block;
  color: var(--rm-progress-check-fg);
  font-size: 13px;
  line-height: 20px;
}
.progress-timeline-label {
  font-size: 0.85rem;
  color: var(--rm-progress-label);
}
.progress-timeline-label.active {
  color: var(--rm-progress-label-active);
  font-weight: 700;
}

/* ── Form controls (upload.html) ─────────────────────────────────────────── */
.form-section + .form-section {
  margin-top: 1.25rem;
}
.form-label {
  display: block;
  margin-bottom: 0.35rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--rm-charcoal);
}
.form-help {
  margin: 0.35rem 0 0;
  font-size: 0.82rem;
  color: var(--rm-slate);
}
.form-help.text-danger {
  color: var(--rm-danger-text);
  font-weight: 700;
}
.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

/* ── Designed upload control (replaces the bare native file input) ───────── */
.rm-dropzone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--rm-dropzone-border);
  border-radius: 10px;
  background: var(--rm-dropzone-bg);
  text-align: center;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.rm-dropzone:hover,
.rm-dropzone.is-dragover {
  border-color: var(--rm-dropzone-border-hover);
  background: var(--rm-dropzone-bg-hover);
}
.rm-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.rm-dropzone-icon {
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--rm-dropzone-icon-border);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  line-height: 1;
}
.rm-dropzone-title {
  font-weight: 700;
  color: var(--rm-charcoal);
}
.rm-dropzone-meta {
  font-size: 0.82rem;
  color: var(--rm-slate);
}
.rm-dropzone-filename {
  display: none;
  margin-top: 0.5rem;
  padding: 0.4rem 0.75rem;
  border-radius: 999px;
  background: var(--rm-dropzone-file-bg);
  color: var(--rm-dropzone-file-fg);
  font-size: 0.82rem;
  font-weight: 700;
}
.rm-dropzone-filename.is-visible {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

/* ── Scroll reveal (optional JS triggers .reveal; static/js/scroll-reveal.js) ── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Landing hero (T152.04) ── ported verbatim from reelmetric-landing's
   index.html page-local <style> block. A standalone marketing splash page
   with no header/nav chrome — deliberately not built on .rm-theme-page's
   cascade (that would swap this page's Arial/Georgia/Impact type for the
   rest of the site's Inter), so tokens are referenced directly. Colors:
   --black(#000)->--rm-black, --white(#f7f7f4)->--rm-cream(#ffffff, ~3%
   channel delta, imperceptible), --muted(#1d1d1a)->--rm-charcoal(#1a1a1a,
   ~2% delta) — the source page's unused fourth token, --soft, has no
   equivalent and was not ported (grep-confirmed zero uses in index.html). */
.rm-landing-page {
  margin: 0;
  min-height: 100vh;
  color: var(--rm-landing-ink);
  background: var(--rm-landing-bg);
  font-family: var(--rm-landing-font-sans);
}

.rm-landing-stage {
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  overflow: hidden;
  background: var(--rm-landing-bg);
  border: 0;
  border-radius: 0;
}

.rm-landing-topline,
.rm-landing-tagline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: clamp(0.8rem, 1.6vw, 1.4rem) clamp(0.8rem, 1.8vw, 1.8rem);
  font-size: clamp(1rem, 1.75vw, 1.7rem);
  line-height: 1;
}

.rm-landing-contact {
  justify-self: end;
  color: inherit;
  text-align: right;
  text-decoration: none;
}

.rm-landing-main {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(0.7rem, 1.6vw, 1.4rem) clamp(0.4rem, 0.9vw, 0.9rem);
  text-align: center;
}

.rm-landing-wordmark {
  margin: 0;
  color: var(--rm-landing-ink);
  font-family: var(--rm-landing-font-wordmark);
  font-size: var(--rm-landing-wordmark-size);
  font-stretch: condensed;
  font-weight: 900;
  letter-spacing: var(--rm-landing-wordmark-letter-spacing);
  line-height: var(--rm-landing-wordmark-line-height);
  text-transform: uppercase;
  max-width: var(--rm-landing-wordmark-max-width);
  transform: var(--rm-landing-wordmark-transform);
  transform-origin: center;
  white-space: nowrap;
}

.rm-landing-tagline {
  grid-template-columns: 1fr;
  padding-bottom: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--rm-landing-muted);
  font-family: var(--rm-landing-font-serif);
  text-align: center;
}
}

@layer utilities {
@media (max-width: 980px) {
  :root {
    --rm-section: 4.75rem;
    --rm-text-4xl: 3.4rem;
    --rm-text-3xl: 2.35rem;
  }

  .rm-section-head,
  .rm-insight-layout,
  .rm-board-body {
    grid-template-columns: 1fr;
  }

  .rm-grid-3,
  .rm-value-strip {
    grid-template-columns: 1fr;
  }

  .rm-hero {
    min-height: var(--rm-hero-min-height-tablet);
  }

  .rm-hero-visual {
    inset: auto -9rem 1rem auto;
    width: 620px;
    min-width: 0;
    opacity: 0.36;
  }
}

@media (max-width: 720px) {
  :root {
    --rm-page-pad: 1rem;
    --rm-section: 4rem;
    --rm-section-tight: 3rem;
    --rm-text-4xl: 2.45rem;
    --rm-text-3xl: 2rem;
    --rm-text-2xl: 1.55rem;
  }

  .rm-nav {
    align-items: flex-start;
  }

  .rm-nav-links {
    display: none;
  }

  .rm-hero {
    min-height: var(--rm-hero-min-height-mobile);
  }

  .rm-hero-content {
    padding-top: var(--rm-hero-content-pad-top-mobile);
    padding-bottom: var(--rm-hero-content-pad-bottom-mobile);
  }

  .rm-hero-visual {
    display: none;
  }

  .rm-button-row,
  .rm-button {
    width: 100%;
  }

  .rm-value-item,
  .rm-card-body,
  .rm-score-card,
  .rm-slate-panel {
    padding: 1rem;
  }

  .rm-grid-2 {
    grid-template-columns: 1fr;
  }

  .rm-analysis-board {
    min-height: auto;
  }

  .rm-comp-table {
    font-size: var(--rm-text-xs);
  }

  .rm-score-number {
    font-size: 4rem;
  }

  .rm-cta {
    padding: 2rem 1.15rem;
  }

  /* Landing hero (T152.04). The source rule's .stage sub-override at this
     breakpoint (min-height/border/border-radius) duplicated its own base
     rule byte-for-byte — a no-op, confirmed by diff — and was not ported. */
  .rm-landing-topline {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .rm-landing-contact {
    justify-self: start;
    text-align: left;
  }

  .rm-landing-wordmark {
    font-size: var(--rm-landing-wordmark-mobile-size);
    letter-spacing: 0em;
    max-width: var(--rm-landing-wordmark-mobile-max-width);
    transform: var(--rm-landing-wordmark-mobile-transform);
    white-space: nowrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .rm-button:hover {
    transform: none;
  }

  /* Ported from styles.css's reduced-motion block by T152.03 — kept here
     rather than in base.css alongside its sibling !important reset, because
     this override is not !important and `components` (declared later in
     the @layer statement) would otherwise always beat a same-priority rule
     in `base` regardless of source order. See the note in base.css. */
  .reveal {
    opacity: 1;
    transform: none;
  }
}
}

/* ---- src/report.css ---- */
/* Report layer. ADR-0054 SS2.2. Populated by T153.03: extracts the report,
   document, and sample-report CSS that used to live in each consumer's own
   template-local <style> block into this shared layer, tokenized against
   tokens.css. This is a value-for-value transcription, not a redesign (D7)
   -- every literal below is exactly the value the source template used to
   hardcode, now named as a token so a later concept (T153.04) can override
   it. See docs/internal/planning/phases/phase_153_public_design_concepts.md
   SS1 for the pre-extraction measurement (173 hardcoded color literals
   across four reelmetric-script-web surfaces) this task closes out.

   Four families live here, and they render as three genuinely different
   visual languages -- extracting them into one file does not unify them,
   because they were never one design to begin with:

   1. report_user.html's .ru-* (report_user.html) -- the current light
      monochrome report (post-T151.10). The audit's shared-component names
      (rm-report-shell, rm-report-hero, rm-report-section, rm-stat,
      rm-data-bar, rm-comps-grid) are added as selector aliases alongside
      the .ru-* classes the template still uses, so the vocabulary exists
      for T153.04's concepts to target without an unnecessary template
      rename.
   2. decision_package.html's .dp-* and worksheet_public.html's .wp-* -- a
      near-twin dark navy/gold layout that predates the monochrome pass and
      was never converted. Consolidated here with their few genuine deltas
      (dp-wrap's 960px max-width vs wp-wrap's 1180px, dp-section's 16px
      radius vs wp-section's 20px, the caveat's margin position) kept as
      selector-specific overrides. rm-disclosure aliases the shared
      caveat/notes box both templates use for the same purpose.
   3 & 4. Both static/sample_report.html files (script-web, landing) --
      two more, mutually unrelated legacy demo themes, moved as-is. The
      script-web copy used entirely generic, unprefixed selectors (.card,
      .hero, .section, .btn, .pill, .chip, .wrap, .shell, .topbar, .footer,
      .brand, .muted, .eyebrow) that collided with this repo's own
      `.card` (overrides/bootstrap.css) the moment they left their
      page-local <style> block for a shared stylesheet; every one of its
      rules is therefore scoped under a single new `.rm-sr-scope` class
      added to that one page's <body> tag (the only markup change this
      task makes; see this task's own Notes for why). Landing's copy
      reuses landing's own shared classes for its outer shell already
      (.hero, .card, .card-grid, .eyebrow are landing site-wide components,
      not page-local) and its few page-local classes (.sample-*,
      .summary-note, .comparable-list, .report-excerpt, .mini-note) are
      specific enough that no such scoping was judged necessary.
      var(--slate)/var(--amber)/var(--border)/var(--text) in landing's copy
      are pre-existing, already-undefined custom properties -- left exactly
      as-is; defining them now would change what currently renders. */
@layer report {

/* ============================================================
   1. Report -- report_user.html, .ru-*
   ============================================================ */

.ru-wrap, .rm-report-shell { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 4rem; color: var(--rm-charcoal); }
.ru-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .4rem 0 1.2rem; color: var(--rm-report-muted); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .14em; border-bottom: 1px solid var(--rm-report-border); margin-bottom: 1.5rem; }
.ru-brand { color: var(--rm-black); font-weight: 700; letter-spacing: .04em; }

.ru-hero, .rm-report-hero { display: grid; grid-template-columns: 1.5fr .7fr; gap: 1rem; align-items: stretch; margin-bottom: 1rem; }
.ru-hero-copy, .ru-hero-side, .ru-section, .ru-card, .rm-report-section {
  border: var(--rm-report-section-border); background: var(--rm-report-section-bg); box-shadow: none;
}
.ru-hero-copy { border-radius: var(--rm-report-section-radius); padding: 2rem; position: relative; font-family: var(--rm-report-font-ui); }
.ru-eyebrow {
  display: inline-flex; align-items: center; gap: .5rem; padding: .38rem .7rem;
  border-radius: var(--rm-report-pill-radius); border: 1px solid var(--rm-report-eyebrow-border);
  background: var(--rm-report-eyebrow-bg); color: var(--rm-report-eyebrow-color); font-family: var(--rm-report-font-ui);
  font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; margin-bottom: .75rem;
}
.ru-hero-copy h1 {
  margin: 0 0 .6rem; font-family: var(--rm-report-font-heading);
  font-size: var(--rm-report-text-h1); line-height: var(--rm-report-leading-h1);
  letter-spacing: -.02em; color: var(--rm-black);
}
.ru-hero-lead { color: var(--rm-report-body); font-size: 1rem; line-height: var(--rm-report-leading-lead); margin: 0 0 1rem; max-width: 64ch; }
.ru-chip-row { display: flex; flex-wrap: wrap; gap: .55rem; }
.ru-chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .72rem;
  border-radius: var(--rm-report-pill-radius); border: 1px solid var(--rm-report-border-chip);
  background: var(--rm-report-chip-bg); color: var(--rm-report-chip-color); font-size: .84rem; font-weight: 700;
}
.ru-chip strong { color: var(--rm-black); }

.ru-hero-side { border-radius: var(--rm-report-section-radius); padding: 1.35rem; display: flex; flex-direction: column; gap: 1rem; }
.ru-mini-pill {
  display: inline-flex; width: fit-content; padding: .4rem .7rem; border-radius: var(--rm-report-pill-radius);
  background: var(--rm-report-accent); color: var(--rm-cream); font-weight: 700; font-size: .82rem;
}
.ru-mini-muted { color: var(--rm-report-muted); margin: 0; line-height: 1.7; font-size: .88rem; }

.ru-section, .rm-report-section {
  border-radius: var(--rm-report-section-radius); padding: 1.4rem; margin-top: 1rem;
  border-top: var(--rm-report-section-divider);
}
.ru-section h2 {
  margin: 0 0 .9rem; font-family: var(--rm-report-font-heading);
  font-size: var(--rm-report-text-h2); letter-spacing: -.01em; color: var(--rm-black);
}
.ru-section-header { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; margin-bottom: 1rem; }
.ru-section-sub { color: var(--rm-report-muted); line-height: var(--rm-report-leading-sub); margin: .15rem 0 0; max-width: 72ch; font-size: .9rem; }

.ru-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .8rem; }
.ru-stat, .rm-stat { border: 1px solid var(--rm-report-panel-border); border-radius: var(--rm-report-panel-radius); background: var(--rm-report-panel-bg); padding: var(--rm-report-card-padding); min-height: 100px; }
.ru-stat-label { color: var(--rm-report-muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin-bottom: .55rem; }
.ru-stat-value { font-size: 1.5rem; font-weight: 800; line-height: 1.05; color: var(--rm-report-accent); }
.ru-stat-hint { display: block; margin-top: .5rem; color: var(--rm-report-muted); font-size: .84rem; line-height: 1.45; }

.ru-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ru-card { border-radius: var(--rm-report-panel-radius); padding: var(--rm-report-card-padding); margin-bottom: .75rem; }
.ru-card p { margin: 0; line-height: var(--rm-report-leading-card); color: var(--rm-report-body); font-size: .9rem; }
.ru-card-label { color: var(--rm-report-muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin-bottom: .55rem; }

.ru-dialogue-line {
  background: var(--rm-report-panel-bg); border: 1px solid var(--rm-report-panel-border); border-left: 3px solid var(--rm-report-dialogue-border-accent);
  border-radius: var(--rm-report-panel-radius-sm); padding: .55rem .75rem; margin-bottom: .4rem;
  font-style: italic; font-size: .84rem; color: var(--rm-charcoal); line-height: 1.5;
}
.ru-money-shot {
  display: flex; align-items: flex-start; gap: .4rem; padding: .3rem 0;
  border-bottom: 1px solid var(--rm-report-border-card);
}
.ru-money-shot-arrow { color: var(--rm-report-accent-2); font-size: .78rem; flex-shrink: 0; margin-top: .1rem; }
.ru-money-shot span { font-size: .82rem; color: var(--rm-report-body); line-height: 1.5; }

.ru-char-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .55rem; }
.ru-char-card {
  border: 1px solid var(--rm-report-panel-border); border-radius: var(--rm-report-panel-radius-sm); padding: var(--rm-report-card-padding-sm);
  background: var(--rm-report-panel-bg);
}
.ru-char-name { font-weight: 800; font-size: .88rem; color: var(--rm-black); }
.ru-char-count { color: var(--rm-report-muted); font-size: .75rem; margin-top: .15rem; }

.ru-angle-card {
  background: var(--rm-report-panel-bg); border: 1px solid var(--rm-report-panel-border);
  border-radius: var(--rm-report-panel-radius-sm); padding: var(--rm-report-card-padding-sm); margin-bottom: .5rem;
}
.ru-angle-title { font-weight: 800; font-size: .88rem; color: var(--rm-black); }
.ru-angle-desc { color: var(--rm-report-body); font-size: .82rem; margin-top: .25rem; line-height: 1.55; }
.ru-angle-target { color: var(--rm-report-muted); font-size: .78rem; margin-top: .35rem; font-style: italic; }

.ru-beat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .9rem; }
.ru-beat-card {
  overflow: hidden; border: 1px solid var(--rm-report-panel-border); border-radius: var(--rm-report-panel-radius);
  background: var(--rm-report-panel-bg); padding: var(--rm-report-card-padding);
}
.ru-beat-topline { display: flex; justify-content: space-between; gap: .5rem; align-items: center; margin-bottom: .35rem; }
.ru-beat-index { font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; color: var(--rm-black); font-weight: 800; }
.ru-beat-score { font-size: .9rem; font-weight: 800; color: var(--rm-report-accent); }
.ru-beat-meta { color: var(--rm-report-muted); font-size: .82rem; margin-bottom: .4rem; }
.ru-beat-headline { font-size: .93rem; line-height: 1.6; color: var(--rm-black); font-weight: 700; margin-bottom: .4rem; }
.ru-beat-evidence { color: var(--rm-report-body); font-size: .84rem; line-height: 1.5; margin-bottom: .5rem; }
.ru-pill {
  display: inline-flex; align-items: center; padding: .26rem .52rem;
  border-radius: var(--rm-report-pill-radius); border: 1px solid var(--rm-report-border-chip); background: var(--rm-report-chip-bg);
  color: var(--rm-report-body); font-size: .71rem; font-weight: 700; margin-right: .3rem;
}
/* Phases are distinguished by their text label (Setup/Build/Escalate/Climax/Button),
   not by color -- all five render with the same neutral outline. */
.ru-pill-accent { background: var(--rm-report-accent); color: var(--rm-cream); border-color: var(--rm-report-accent); }
.ru-phase-setup, .ru-phase-build, .ru-phase-escalate, .ru-phase-climax, .ru-phase-button {
  background: var(--rm-report-phase-bg); color: var(--rm-report-phase-fg); border: 1px solid var(--rm-report-phase-border);
}

/* Arc compact grid */
.ru-table-scroll { overflow-x: auto; }
.ru-arc-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.ru-arc-table th { color: var(--rm-report-table-heading-color); text-transform: uppercase; letter-spacing: .1em; font-size: .71rem; font-weight: 700; padding: var(--rm-report-table-cell-padding); border-bottom: var(--rm-report-table-heading-border); text-align: left; }
.ru-arc-table td { padding: var(--rm-report-table-cell-padding); border-bottom: var(--rm-report-table-border); color: var(--rm-charcoal); vertical-align: top; }
.ru-arc-desc { min-width: 220px; white-space: normal; word-break: break-word; line-height: 1.5; }
.ru-arc-table tr:last-child td { border-bottom: none; }
.ru-arc-idx { font-weight: 800; color: var(--rm-black); font-size: .76rem; }

/* Pacing curve. --rm-value carries the per-instance bar height (ADR-0054 SS2.6
   -- dynamic values are custom-property data, never an inline height rule). */
.ru-pacing { display: grid; grid-template-columns: repeat(auto-fit, minmax(14px,1fr)); gap: .2rem; align-items: end; min-height: 100px; margin-top: .75rem; padding-top: .25rem; }
.ru-pacing-bar { border-radius: 999px 999px 4px 4px; min-height: 5px; background: var(--rm-report-data-fill); height: var(--rm-value, 4px); }

/* Distribution bars. Same --rm-value/--rm-opacity custom-property pattern. */
.ru-dist-row { display: grid; grid-template-columns: 120px 1fr 80px; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.ru-dist-label { color: var(--rm-charcoal); font-weight: 700; font-size: .88rem; text-transform: capitalize; }
.ru-dist-track { height: 9px; border-radius: 999px; background: var(--rm-report-border-hair); overflow: hidden; }
.ru-dist-fill, .rm-data-bar { height: 100%; border-radius: 999px; background: var(--rm-report-data-fill); min-width: 4px; width: var(--rm-value, 0%); opacity: var(--rm-opacity, 1); }
.ru-dist-pct { color: var(--rm-report-muted); font-size: .82rem; text-align: right; }

/* Focus table */
.ru-focus-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.ru-focus-table th { color: var(--rm-report-table-heading-color); text-transform: uppercase; letter-spacing: .1em; font-size: .71rem; padding: .45rem .6rem; border-bottom: var(--rm-report-table-heading-border); text-align: left; }
.ru-focus-table td { padding: .45rem .6rem; border-bottom: var(--rm-report-table-border); color: var(--rm-charcoal); }
.ru-focus-table tr:last-child td { border-bottom: none; }

/* Comparable films */
.ru-comp-grid, .rm-comps-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .85rem; }
.ru-comp-card { border: 1px solid var(--rm-report-panel-border); border-radius: var(--rm-report-panel-radius); background: var(--rm-report-panel-bg); padding: var(--rm-report-card-padding); }
.ru-comp-label { color: var(--rm-report-muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; font-weight: 800; }
.ru-comp-title { font-size: 1.5rem; font-weight: 800; margin-top: .45rem; color: var(--rm-report-accent); }
.ru-comp-sub { color: var(--rm-report-muted); font-size: .84rem; margin-top: .25rem; }
.ru-comp-score { display: inline-flex; margin-top: .65rem; padding: .32rem .6rem; border-radius: var(--rm-report-pill-radius); border: 1px solid var(--rm-report-accent-2); color: var(--rm-report-accent-2); font-size: .78rem; font-weight: 800; }
.ru-comp-genre-mini { display: flex; align-items: flex-end; gap: 2px; height: 34px; margin-top: .7rem; }
.ru-comp-genre-bar { flex: 1; background: var(--rm-charcoal); border-radius: 2px 2px 0 0; min-height: 2px; height: var(--rm-value, 2px); opacity: var(--rm-opacity, .85); }

/* Fixed fingerprint color contract (ADR-0055 SS2.2, T153.05). `.rm-fingerprint`
   wraps exactly the two genre-mix visuals report_user.html renders (the
   Genre Distribution section's .ru-dist-fill bars and each comparable
   film's .ru-comp-genre-bar mini-bars) via a per-instance
   `--rm-fingerprint-color` custom property the template sets from one of
   the eight fixed tokens below (never a literal hex, never a theme
   override -- build/build.py's contract validator rejects any theme file
   that sets a `--rm-fingerprint-*` token, and
   tests/test_t153_05_fingerprint_contract.py asserts these eight hex
   values never render outside this scope). The unscoped .ru-dist-fill /
   .ru-comp-genre-bar rules above stay monochrome and keep serving the
   audience-segment distribution rows in this file and in
   decision_package.html / worksheet_public.html, which are not a
   fingerprint and must not gain genre colors. */
/* Gated on an ancestor actually carrying [data-theme] (any value), not bare
   `.rm-fingerprint` -- Phase 153's whole safety margin (D2's abort clause)
   rests on "every concept is a token file that renders nothing until
   something sets data-theme" (AGENTS.md). The fingerprint contract is
   theme-*independent* (it doesn't change *which* theme is active) but it
   must not switch the still-live monochrome default report over to colored
   bars before T153.06 actually sets data-theme -- that is a real visual
   change to a production surface this phase has not been authorized to
   ship yet. */
[data-theme] .rm-fingerprint .ru-dist-fill { background: var(--rm-fingerprint-color, var(--rm-black)); }
[data-theme] .rm-fingerprint .ru-comp-genre-bar { background: var(--rm-fingerprint-color, var(--rm-charcoal)); }

/* Pending / not-ready state */
.ru-pending { max-width: 560px; margin: 4rem auto; text-align: center; padding: 2.5rem; border: 1px solid var(--rm-report-border-soft); border-radius: var(--rm-report-pending-radius); background: var(--rm-report-pending-bg); }
.ru-pending h2 { color: var(--rm-black); margin-top: 0; }
.ru-pending p { color: var(--rm-report-body); line-height: 1.75; }

.ru-empty { color: var(--rm-report-muted); font-style: italic; font-size: .9rem; }
.ru-footer { margin-top: 2rem; padding: 1rem 0 .25rem; color: var(--rm-report-muted); font-size: .86rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rm-report-border); }

@media (max-width: 980px) {
  .ru-hero, .ru-two-col, .ru-beat-grid, .ru-comp-grid, .ru-stat-grid, .ru-char-grid { grid-template-columns: 1fr; }
  .ru-dist-row { grid-template-columns: 1fr; gap: .25rem; }
  .ru-dist-pct { text-align: left; }
}

/* rm-print-toolbar: Print / Save-as-PDF (T151.11). This report is the one page
   in the product most likely to be printed or saved as a PDF and forwarded to
   someone who was never sent a magic link, so what it says on paper matters
   as much as on screen. Rules:
     - hide on-screen navigation chrome (site header/footer, buttons) --
       none of it is actionable on paper;
     - never hide the comps disclosure or any other report copy;
     - avoid orphaned headings and elements split across a page break;
     - force exact background colors so the black pill/bar charts (which
       carry information via fill, not just text) don't disappear if the
       browser's print dialog would otherwise strip background graphics;
     - let long tables (Full Trailer Arc, Focus Sequence Map) break across
       pages, but never in the middle of a row. */
@media print {
  @page { margin: 1.4cm; }

  /* Site chrome from base.html -- not part of the report itself. */
  .rm-topbar, .rm-footer { display: none !important; }

  /* Buttons only make sense on screen (View status / Read FAQ / Copy). */
  .rm-button, .rm-button--copy, [data-copy-value] { display: none !important; }

  body { background: var(--rm-cream); }
  .ru-wrap { width: 100%; margin: 0; padding: 0; color: var(--rm-black); }
  a { color: inherit; text-decoration: none; }

  /* Preserve information-bearing fills (score pills, distribution bars,
     pacing bars, genre-mix bars) instead of letting the browser drop
     backgrounds when printing. */
  .ru-mini-pill, .ru-pill-accent, .ru-dist-fill, .ru-pacing-bar,
  .ru-comp-genre-bar, .ru-eyebrow {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    color-adjust: exact;
  }

  /* Don't split a card, stat box, or hero in the middle of a page. */
  .ru-hero, .ru-hero-copy, .ru-hero-side, .ru-card, .ru-stat,
  .ru-comp-card, .ru-beat-card, .ru-char-card, .ru-angle-card,
  .ru-dialogue-line, .ru-money-shot, .ru-dist-row, .ru-pending {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* Sections break between each other, not through a heading. */
  .ru-section { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, .ru-section-header {
    break-after: avoid;
    page-break-after: avoid;
  }

  /* Long tables: let the table itself span pages, but keep each row --
     and its own heading row -- intact so a beat/genre line never splits. */
  .ru-arc-table, .ru-focus-table { break-inside: auto; }
  .ru-arc-table thead, .ru-focus-table thead { display: table-header-group; }
  .ru-arc-table tr, .ru-focus-table tr { break-inside: avoid; page-break-inside: avoid; }
  .ru-table-scroll { overflow: visible; }

  /* Give print width back to a single readable column instead of the
     screen's dense multi-column grids, so nothing is squeezed or clipped. */
  .ru-hero { grid-template-columns: 1fr; }
  .ru-two-col, .ru-comp-grid, .ru-beat-grid, .ru-char-grid { grid-template-columns: repeat(2, 1fr); }
  .ru-stat-grid { grid-template-columns: repeat(2, 1fr); }

  /* Genre labels like "Family/Inspirational" are one long slash-joined
     token with no space for the browser to wrap on, so at a narrow print
     column they were overlapping the bar instead of wrapping under it. */
  .ru-dist-row { grid-template-columns: 130px 1fr 70px; }
  .ru-dist-label { overflow-wrap: anywhere; word-break: break-word; }
}

/* ============================================================
   2. Document -- decision_package.html .dp-*, worksheet_public.html .wp-*
   Near-twin dark navy/gold layouts predating T151.10's monochrome pass,
   never converted. Preserved as-is (D7), not corrected to monochrome here.
   ============================================================ */

.dp-wrap { width: min(960px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 4rem; }
.wp-wrap { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; padding: 1.5rem 0 4rem; }

/* .wp-topbar/.wp-brand sit directly on the page's own body background
   (this file's `body { background: var(--rm-cream) }` below), not inside
   the dark .dp-section/.wp-section panel like most of this family --
   so they need the same on-cream colors the @media print block already
   uses for this family, not the panel-tuned --rm-muted/--rm-cream, which
   in a theme like Festival Broadsheet resolve to near-invisible light
   text on the page's own light background. */
.wp-topbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .4rem 0 1.2rem; color: var(--rm-report-doc-print-muted); font-size: .88rem;
  text-transform: uppercase; letter-spacing: .14em; border-bottom: 1px solid var(--rm-line); margin-bottom: 1.5rem; }
.wp-brand { color: var(--rm-report-doc-print-ink); font-weight: 700; letter-spacing: .04em; }

.dp-print-bar {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .8rem 1.2rem; border-radius: 12px; margin-bottom: 1.2rem;
  border: 1px solid var(--rm-line); background: var(--rm-report-doc-panel-bg);
}
.dp-print-btn {
  display: inline-flex; align-items: center; gap: .45rem; padding: .5rem 1rem;
  border-radius: 8px; border: 1px solid var(--rm-line-strong);
  background: var(--rm-report-doc-accent-bg); color: var(--rm-gold); font-weight: 700;
  font-size: .88rem; cursor: pointer; text-decoration: none;
}
.dp-print-btn:hover { background: var(--rm-report-doc-accent-bg-hover); }

.dp-section, .wp-section {
  padding: 1.4rem; margin-top: 1rem;
  border: 1px solid var(--rm-line); background: var(--rm-report-doc-panel-bg);
  backdrop-filter: blur(14px); box-shadow: var(--rm-report-doc-shadow);
}
.dp-section { border-radius: 16px; }
.wp-section { border-radius: 20px; }
.dp-section h2, .wp-section h2 { margin: 0 0 .9rem; font-size: 1.14rem; letter-spacing: -.03em; color: var(--rm-cream); }
.dp-section-sub, .wp-section-sub { color: var(--rm-muted); line-height: 1.65; margin: .15rem 0 0; max-width: 72ch; font-size: .9rem; }

/* Header (decision_package.html only) -- also sits on the page background,
   not the dark panel; same reasoning as .wp-topbar above. */
.dp-header { margin-bottom: 1.2rem; }
.dp-header h1 { margin: 0 0 .4rem; font-size: 1.8rem; font-weight: 800; color: var(--rm-report-doc-print-ink); }
.dp-header-meta { color: var(--rm-report-doc-print-muted); font-size: .88rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.dp-header-meta span { display: inline-flex; align-items: center; gap: .3rem; }
.dp-market-pill { padding: .25rem .65rem; border-radius: 999px; background: var(--rm-report-doc-print-pill-bg);
  color: var(--rm-report-doc-print-accent-dark); font-weight: 700; font-size: .8rem; }

/* Audience profile distribution. --rm-value carries the per-instance bar
   width (ADR-0054 SS2.6). */
.dp-dist-row, .wp-dist-row { display: grid; grid-template-columns: 140px 1fr 90px; gap: .75rem; align-items: center; margin-bottom: .5rem; }
.dp-dist-label, .wp-dist-label { color: var(--rm-cream); font-weight: 700; font-size: .88rem; text-transform: capitalize; }
.dp-dist-track, .wp-dist-track { height: 9px; border-radius: 999px; background: var(--rm-report-doc-track-bg); overflow: hidden; }
.dp-dist-fill, .wp-dist-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rm-gold), var(--rm-report-doc-accent-2)); min-width: 4px; width: var(--rm-value, 0%); }
.dp-dist-bucket, .wp-dist-bucket { color: var(--rm-muted); font-size: .82rem; text-align: right; }

/* Comps table */
.dp-comp-table, .wp-comp-table { width: 100%; border-collapse: collapse; font-size: .83rem; }
.dp-comp-table th, .wp-comp-table th { color: var(--rm-muted); text-transform: uppercase; letter-spacing: .1em; font-size: .71rem;
  font-weight: 700; padding: .5rem .6rem; border-bottom: 1px solid var(--rm-line); text-align: left; }
.dp-comp-table td, .wp-comp-table td { padding: .5rem .6rem; border-bottom: 1px solid var(--rm-report-doc-hair); color: var(--rm-cream); vertical-align: top; }
.dp-comp-table tr:last-child td, .wp-comp-table tr:last-child td { border-bottom: none; }

/* Worksheet fields */
.dp-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; }
.wp-field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem; }
.dp-field, .wp-field { border: 1px solid var(--rm-line); border-radius: 14px; background: var(--rm-report-doc-field-bg); padding: 1rem; }
.dp-field-label, .wp-field-label { color: var(--rm-muted); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; margin-bottom: .55rem; }
.dp-field-value, .wp-field-value { font-size: 1.15rem; font-weight: 700; line-height: 1.25; color: var(--rm-cream); }
.wp-field-hint { display: block; margin-top: .5rem; color: var(--rm-muted); font-size: .84rem; line-height: 1.45; }
.dp-notes-block, .wp-notes-block {
  border: 1px solid var(--rm-line); border-radius: 14px; background: var(--rm-report-doc-field-bg);
  padding: 1rem; margin-top: .8rem; color: var(--rm-cream); line-height: 1.7; font-size: .92rem;
  white-space: pre-wrap;
}

/* rm-disclosure: the shared caveat/notes box both templates use for the
   same "these are comparables, not forecasts" disclosure -- dp-caveat sits
   at the bottom of the page (margin-top), wp-caveat at the top (margin-bottom). */
/* Like .wp-topbar/.dp-header above, this box sits directly on the page
   background -- it is a sibling of .dp-section/.wp-section, not nested
   inside one (confirmed against decision_package.html/worksheet_public.html:
   .dp-caveat follows the last </section>, .wp-caveat precedes the first).
   It used to render on --rm-report-doc-accent-bg-soft (a translucent tint
   assuming a dark backdrop underneath) with --rm-gold/--rm-muted text
   (also panel-tuned); on the page's own light background that pairing is
   the exact contrast failure @media print already avoided below by using
   its own on-cream accent tokens for the same box -- so this rule now
   uses those tokens on screen too, opaque rather than translucent since
   there is no dark panel under it to tint. */
.dp-caveat, .wp-caveat, .rm-disclosure {
  border: 1px solid var(--rm-report-doc-print-accent);
  background: var(--rm-report-doc-print-accent-bg);
  border-radius: 14px;
  padding: 1rem 1.1rem;
}
.dp-caveat { margin-top: 1.5rem; }
.wp-caveat { margin-bottom: 1rem; }
.dp-caveat-title, .wp-caveat-title { color: var(--rm-report-doc-print-accent-dark); font-weight: 700; font-size: .88rem; text-transform: uppercase;
  letter-spacing: .14em; margin-bottom: .35rem; }
.dp-caveat p, .wp-caveat p { color: var(--rm-report-doc-print-muted); margin: 0; line-height: 1.65; font-size: .88rem; }
.dp-caveat p + p { margin-top: .4rem; }

.dp-empty, .wp-empty { max-width: 560px; margin: 4rem auto; text-align: center; padding: 2.5rem;
  border: 1px solid var(--rm-line); border-radius: 20px; background: var(--rm-report-doc-panel-bg); }
.dp-empty h2, .wp-empty h2 { color: var(--rm-cream); margin-top: 1rem; }
.dp-empty p, .wp-empty p { color: var(--rm-muted); line-height: 1.75; }
.wp-hourglass { font-size: 2.5rem; margin-bottom: .5rem; }

.dp-mini-muted, .wp-mini-muted { color: var(--rm-muted); margin: 0; line-height: 1.7; font-size: .88rem; }

/* Also on the page background, not a dark panel -- same reasoning as
   .wp-topbar above. */
.wp-footer { margin-top: 2rem; padding: 1rem 0 .25rem; color: var(--rm-report-doc-print-muted); font-size: .86rem;
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  border-top: 1px solid var(--rm-line); }

.wp-link-row { margin-top: 1.5rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }

/* Print styles: hide nav, buttons, decorative elements. decision_package.html
   only -- worksheet_public.html never had a print media block, unchanged. */
@media print {
  .rm-topbar, .rm-footer, .dp-print-bar { display: none !important; }
  .dp-section { box-shadow: none; background: var(--rm-cream); border-color: var(--rm-report-doc-print-border); }
  .dp-section h2 { color: var(--rm-report-doc-print-ink); }
  body { background: var(--rm-cream); color: var(--rm-report-doc-print-ink); }
  .dp-dist-track { background: var(--rm-report-doc-print-track-bg); }
  .dp-dist-fill { background: var(--rm-report-doc-print-accent); }
  .dp-comp-table th { color: var(--rm-report-doc-print-muted); }
  .dp-comp-table td { color: var(--rm-report-doc-print-ink); }
  .dp-field { background: var(--rm-paper); }
  .dp-field-label { color: var(--rm-report-doc-print-muted-2); }
  .dp-field-value { color: var(--rm-report-doc-print-ink); }
  .dp-wrap { width: 100%; padding: 0; }
}

@media (max-width: 980px) {
  .dp-dist-row, .wp-dist-row { grid-template-columns: 1fr; gap: .25rem; }
  .dp-dist-bucket, .wp-dist-bucket { text-align: left; }
}

/* ============================================================
   3. Sample report -- reelmetric-script-web's static/sample_report.html
   A third, wholly separate dark orange/blue legacy demo theme. Every rule
   below is scoped under `.rm-sr-scope` (added to that one page's <body>)
   because the source file used entirely generic, unprefixed class names
   (.card, .hero, .section, .btn, .pill, .chip, .wrap, .shell, .topbar,
   .footer, .brand, .muted, .eyebrow) that were safe only while isolated in
   their own page-local <style> block -- `.card` alone collides with
   overrides/bootstrap.css's `.card` the moment both share one compiled
   stylesheet. color-scheme:dark (this page's own, previously page-local
   :root) is scoped to the same class rather than left at :root, since
   :root here is the whole design system's shared light-monochrome root
   (T153.02 D9) and this is the one page that still wants a dark scrollbar.
   ============================================================ */

.rm-sr-scope, .rm-sr-scope *, .rm-sr-scope *::before, .rm-sr-scope *::after { box-sizing: border-box; }

body.rm-sr-scope {
  color-scheme: dark;
  scroll-behavior: smooth;
  margin: 0;
  font-family: Inter, "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--rm-report-sr-text);
  background:
    radial-gradient(circle at top left, var(--rm-report-sr-glow-1), transparent 28%),
    radial-gradient(circle at 85% 15%, var(--rm-report-sr-glow-2), transparent 22%),
    linear-gradient(180deg, var(--rm-report-sr-bg) 0%, var(--rm-report-sr-bg-end) 100%);
}

.rm-sr-scope a { color: inherit; }
.rm-sr-scope .wrap { width: min(1180px, calc(100% - 2rem)); margin: 0 auto; }
.rm-sr-scope .shell { padding: 1.25rem 0 3rem; }

.rm-sr-scope .topbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
  padding: 0.25rem 0 1rem;
  color: var(--rm-report-sr-muted);
  font-size: 0.92rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.rm-sr-scope .brand { color: var(--rm-report-sr-text); font-weight: 700; letter-spacing: 0.04em; }
.rm-sr-scope .hero {
  display: grid;
  grid-template-columns: 1.45fr 0.75fr;
  gap: 1rem;
  align-items: stretch;
  margin-bottom: 1rem;
}

.rm-sr-scope .hero-copy, .rm-sr-scope .hero-side, .rm-sr-scope .section, .rm-sr-scope .card {
  border: 1px solid var(--rm-report-sr-line);
  background: var(--rm-report-sr-panel);
  backdrop-filter: blur(14px);
  box-shadow: var(--rm-report-sr-shadow);
}

.rm-sr-scope .hero-copy {
  border-radius: var(--rm-report-sr-radius-xl);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

.rm-sr-scope .hero-copy::after {
  content: "";
  position: absolute;
  inset: auto -20% -35% auto;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--rm-report-sr-accent-glow), transparent 62%);
  pointer-events: none;
}

.rm-sr-scope .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.38rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--rm-report-sr-line-strong);
  background: var(--rm-report-sr-surface-veil);
  color: var(--rm-report-sr-accent);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}

.rm-sr-scope h1 {
  margin: 0.95rem 0 0.6rem;
  font-size: clamp(2.3rem, 4vw, 4.4rem);
  line-height: 0.95;
  letter-spacing: -0.05em;
}

.rm-sr-scope .hero-lead {
  max-width: 60rem;
  color: var(--rm-report-sr-muted);
  font-size: 1.02rem;
  line-height: 1.8;
  margin: 0 0 1rem;
}

.rm-sr-scope .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.1rem;
}

.rm-sr-scope .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.75rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--rm-report-sr-line-strong);
  background: var(--rm-report-sr-surface-veil);
  color: var(--rm-report-sr-text);
  text-decoration: none;
  font-weight: 700;
}

.rm-sr-scope .btn.primary {
  background: linear-gradient(135deg, var(--rm-report-sr-accent), var(--rm-report-sr-accent-dark));
  border-color: transparent;
  color: var(--rm-report-sr-on-accent);
}

.rm-sr-scope .hero-side {
  border-radius: var(--rm-report-sr-radius-xl);
  padding: 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: space-between;
}

.rm-sr-scope .score-ring {
  display: grid;
  place-items: center;
  min-height: 172px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 50%, var(--rm-report-sr-track-bg) 0 42%, transparent 43%),
    conic-gradient(var(--rm-report-sr-accent) 85%, var(--rm-report-sr-track-bg-2) 0);
  position: relative;
}

.rm-sr-scope .score-ring::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 50%;
  background: linear-gradient(180deg, var(--rm-report-sr-ring-inner-1), var(--rm-report-sr-ring-inner-2));
  border: 1px solid var(--rm-report-sr-line);
}

.rm-sr-scope .score-inner {
  position: relative;
  text-align: center;
  z-index: 1;
}

.rm-sr-scope .score-number {
  font-size: 3.2rem;
  font-weight: 800;
  letter-spacing: -0.06em;
  line-height: 1;
}

.rm-sr-scope .score-sub {
  margin-top: 0.3rem;
  color: var(--rm-report-sr-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
}

.rm-sr-scope .hero-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.rm-sr-scope .chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.42rem 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--rm-report-sr-line-strong);
  background: var(--rm-report-sr-surface-veil);
  color: var(--rm-report-sr-muted);
  font-size: 0.84rem;
  font-weight: 700;
}

.rm-sr-scope .chip strong { color: var(--rm-report-sr-text); }
.rm-sr-scope .section {
  border-radius: var(--rm-report-sr-radius-xl);
  padding: 1.3rem;
  margin-top: 1rem;
}

.rm-sr-scope .section h2 {
  margin: 0 0 0.9rem;
  font-size: 1.16rem;
  letter-spacing: -0.03em;
}

.rm-sr-scope .section-header {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.rm-sr-scope .section-sub {
  color: var(--rm-report-sr-muted);
  line-height: 1.65;
  margin: 0.15rem 0 0;
  max-width: 72ch;
}

.rm-sr-scope .stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
}

.rm-sr-scope .stat-card, .rm-sr-scope .compare-card, .rm-sr-scope .standout-card, .rm-sr-scope .beat-card {
  border: 1px solid var(--rm-report-sr-line);
  border-radius: var(--rm-report-sr-radius-lg);
  background: var(--rm-report-sr-card-bg);
}

.rm-sr-scope .stat-card {
  padding: 1rem;
  min-height: 110px;
}

.rm-sr-scope .stat-label {
  color: var(--rm-report-sr-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  margin-bottom: 0.55rem;
}

.rm-sr-scope .stat-value {
  font-size: 1.55rem;
  font-weight: 800;
  line-height: 1.05;
}

.rm-sr-scope .stat-hint {
  display: block;
  margin-top: 0.55rem;
  color: var(--rm-report-sr-muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.rm-sr-scope .overview-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 1rem;
}

.rm-sr-scope .copy-card {
  padding: 1rem;
  border-radius: var(--rm-report-sr-radius-lg);
  border: 1px solid var(--rm-report-sr-line);
  background: var(--rm-report-sr-card-bg);
  min-height: 100%;
}

.rm-sr-scope .copy-card p {
  margin: 0;
  line-height: 1.75;
  color: var(--rm-report-sr-muted);
}

.rm-sr-scope .mini-stack {
  display: grid;
  gap: 0.6rem;
}

.rm-sr-scope .mini-pill {
  display: inline-flex;
  width: fit-content;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  background: var(--rm-report-sr-accent-soft);
  color: var(--rm-report-sr-accent);
  font-weight: 700;
  font-size: 0.82rem;
}

.rm-sr-scope .beat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem;
}

.rm-sr-scope .beat-card {
  overflow: hidden;
  display: grid;
  grid-template-columns: 124px 1fr;
}

.rm-sr-scope .beat-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-right: 1px solid var(--rm-report-sr-line);
}

.rm-sr-scope .beat-thumb.compact {
  width: 88px;
  height: 62px;
  border-radius: 14px;
  flex-shrink: 0;
  border-right: none;
}

.rm-sr-scope .beat-body {
  padding: 0.95rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.rm-sr-scope .beat-topline {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  align-items: center;
}

.rm-sr-scope .beat-index {
  font-size: 0.76rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--rm-report-sr-accent);
  font-weight: 800;
}

.rm-sr-scope .beat-score {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--rm-report-sr-text);
}

.rm-sr-scope .beat-meta {
  color: var(--rm-report-sr-muted);
  font-size: 0.84rem;
}

.rm-sr-scope .beat-headline {
  font-size: 0.98rem;
  line-height: 1.65;
  color: var(--rm-report-sr-text);
  font-weight: 700;
}

.rm-sr-scope .beat-evidence {
  color: var(--rm-report-sr-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.rm-sr-scope .beat-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  padding-top: 0.2rem;
}

.rm-sr-scope .pill {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--rm-report-sr-line);
  background: var(--rm-report-sr-surface-veil);
  color: var(--rm-report-sr-muted);
  font-size: 0.74rem;
  font-weight: 700;
}

.rm-sr-scope .pill-accent {
  background: var(--rm-report-sr-accent-soft);
  color: var(--rm-report-sr-accent);
  border-color: var(--rm-report-sr-accent-border);
}

.rm-sr-scope .section-grid {
  display: grid;
  gap: 1rem;
}

.rm-sr-scope .progress-row {
  display: grid;
  grid-template-columns: 150px 1fr 72px;
  gap: 0.75rem;
  align-items: center;
}

.rm-sr-scope .progress-label {
  color: var(--rm-report-sr-text);
  font-weight: 700;
  font-size: 0.9rem;
}

.rm-sr-scope .progress-track {
  height: 10px;
  border-radius: 999px;
  background: var(--rm-report-sr-track-bg);
  overflow: hidden;
}

.rm-sr-scope .progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--rm-report-sr-accent), var(--rm-report-sr-accent-light));
  min-width: 4px;
  width: var(--rm-value, 0%);
}

.rm-sr-scope .progress-fill.genre-fill {
  background: linear-gradient(90deg, var(--rm-report-sr-accent-2), var(--rm-report-sr-accent2-light));
}

.rm-sr-scope .progress-value {
  text-align: right;
  color: var(--rm-report-sr-muted);
  font-variant-numeric: tabular-nums;
  font-size: 0.82rem;
}

.rm-sr-scope .mini-hint {
  color: var(--rm-report-sr-muted);
  font-size: 0.84rem;
  line-height: 1.45;
  margin-top: -0.18rem;
  margin-bottom: 0.55rem;
}

.rm-sr-scope .compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.85rem;
}

.rm-sr-scope .compare-card {
  padding: 1rem;
}

.rm-sr-scope .compare-label {
  color: var(--rm-report-sr-muted);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.72rem;
  font-weight: 800;
}

.rm-sr-scope .compare-actual {
  font-size: 1.65rem;
  font-weight: 800;
  margin-top: 0.45rem;
}

.rm-sr-scope .compare-benchmark {
  color: var(--rm-report-sr-muted);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

.rm-sr-scope .compare-verdict {
  display: inline-flex;
  margin-top: 0.7rem;
  padding: 0.34rem 0.62rem;
  border-radius: 999px;
  background: var(--rm-report-sr-good-bg);
  color: var(--rm-report-sr-good);
  font-size: 0.78rem;
  font-weight: 800;
}

.rm-sr-scope .compare-card p {
  margin: 0.65rem 0 0;
  color: var(--rm-report-sr-muted);
  line-height: 1.6;
  font-size: 0.9rem;
}

.rm-sr-scope .standout-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-top: 1rem;
}

.rm-sr-scope .standout-card {
  padding: 0.75rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.rm-sr-scope .standout-title {
  margin-top: 0.35rem;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.4;
}

.rm-sr-scope .standout-body {
  min-width: 0;
}

.rm-sr-scope .muted { color: var(--rm-report-sr-muted); }

.rm-sr-scope .pacing-curve {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18px, 1fr));
  gap: 0.35rem;
  align-items: end;
  min-height: 136px;
  margin-top: 0.75rem;
  padding-top: 0.25rem;
}

.rm-sr-scope .pacing-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  color: var(--rm-report-sr-muted);
  font-size: 0.75rem;
}

.rm-sr-scope .pacing-bar {
  width: 100%;
  border-radius: 999px 999px 10px 10px;
  background: linear-gradient(180deg, var(--rm-report-sr-accent-pale), var(--rm-report-sr-accent));
  min-height: 18px;
  box-shadow: 0 10px 18px var(--rm-report-sr-accent-glow);
  height: var(--rm-value, 18px);
}

.rm-sr-scope .footer {
  margin-top: 1rem;
  padding: 1rem 0 0.25rem;
  color: var(--rm-report-sr-muted);
  font-size: 0.88rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.rm-sr-scope .fade-in {
  animation: rm-sr-rise 0.75s ease both;
}

@keyframes rm-sr-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 980px) {
  .rm-sr-scope .hero, .rm-sr-scope .overview-grid, .rm-sr-scope .compare-grid,
  .rm-sr-scope .standout-grid, .rm-sr-scope .stat-grid, .rm-sr-scope .beat-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .rm-sr-scope .wrap { width: min(100% - 1rem, 1180px); }
  .rm-sr-scope .hero-copy, .rm-sr-scope .hero-side, .rm-sr-scope .section { padding: 1rem; }
  .rm-sr-scope .beat-card { grid-template-columns: 1fr; }
  .rm-sr-scope .beat-thumb { border-right: none; border-bottom: 1px solid var(--rm-report-sr-line); }
  .rm-sr-scope .progress-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .rm-sr-scope .progress-value { text-align: left; }
}

/* ============================================================
   4. Sample report -- reelmetric-landing's static/sample_report.html
   A fourth, light amber/slate card layout. Lower collision risk than
   script-web's copy: its outer shell already reuses landing's own
   site-wide .hero/.card/.card-grid/.eyebrow/.cta-row components (not
   page-local), and these remaining page-local classes are specific
   enough (.sample-*, .summary-note, .comparable-list, .report-excerpt,
   .mini-note) that no extra scoping class was added. var(--slate)/
   var(--amber)/var(--border)/var(--text) below are pre-existing,
   already-undefined custom properties in this repo -- left exactly as
   they were; defining them now would change what currently renders.
   ============================================================ */

.sample-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  margin-top: 1.5rem;
}

.sample-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--rm-report-lsr-pill-bg);
  color: var(--slate);
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.sample-bars {
  display: grid;
  gap: 0.95rem;
  margin-top: 1.6rem;
}

.sample-bar {
  display: grid;
  gap: 0.35rem;
}

.sample-bar-head {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.92rem;
  color: var(--slate);
}

.sample-bar-track {
  height: 12px;
  border-radius: 999px;
  background: var(--rm-report-lsr-track-bg);
  overflow: hidden;
}

.sample-bar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--amber), var(--rm-report-lsr-accent-light));
  box-shadow: 0 0 24px var(--rm-report-lsr-shadow-glow);
  width: var(--rm-value, 0%);
}

.summary-note {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-left: 4px solid var(--amber);
  background: var(--rm-report-lsr-note-bg);
  color: var(--text);
  border-radius: 0 1rem 1rem 0;
}

.summary-note p {
  max-width: none;
}

.comparable-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
  margin-top: 1rem;
}

.comparable-list li {
  padding: 0.95rem 1rem;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  background: var(--rm-report-lsr-card-bg);
  color: var(--slate);
}

.comparable-list strong {
  color: var(--text);
}

.report-excerpt {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  background: var(--rm-report-lsr-card-bg);
}

.report-excerpt pre {
  margin: 0;
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--slate);
  font-size: 0.95rem;
  line-height: 1.6;
}

.mini-note {
  margin-top: 1rem;
  color: var(--slate);
  font-size: 0.92rem;
}

}

/* ---- src/overrides/bootstrap.css ---- */
/* Bootstrap CDN override surface. ADR-0054 SS3 keeps the Bootstrap CDN link
   in consuming templates; this layer is where a consumer's Bootstrap-default
   override rules live so they always lose to `components`/`report` in the
   cascade regardless of source order.

   Populated by T152.03 (D10) from reelmetric-script-web/static/css/styles.css
   lines 29-38 (the --bs-* variable block) and its Bootstrap component
   restyles (.btn-primary, .btn-secondary, .card, .form-control:focus, the
   .alert family). Every var(...) is rewritten from styles.css's own local
   token names onto the --rm-* vocabulary in tokens.css — see the mapping
   note there. No second token vocabulary is introduced. */
@layer overrides {

:root {
  --bs-body-bg: var(--rm-paper);
  --bs-body-color: var(--rm-charcoal);
  --bs-link-color: var(--rm-black);
  --bs-link-hover-color: var(--rm-charcoal-hover);
  --bs-border-color: var(--rm-light-gray);
  --bs-heading-color: var(--rm-charcoal);
  --bs-card-bg: var(--rm-cream);
  --bs-card-border-color: var(--rm-light-gray);
}

.btn-primary {
  background: var(--rm-black);
  border-color: var(--rm-black);
  color: #fff;
  border-radius: 6px;
  padding: 0.6rem 1.2rem;
  font-weight: 600;
  transition: all 0.15s ease-out;
}
.btn-primary:hover {
  background: var(--rm-charcoal-hover);
  border-color: var(--rm-charcoal-hover);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
}
.btn-secondary {
  background: transparent;
  border-color: var(--rm-light-gray);
  color: var(--rm-charcoal);
  border-radius: 6px;
}
.btn-secondary:hover {
  border-color: var(--rm-black);
  color: var(--rm-black);
}

.card {
  background: var(--rm-cream);
  border: 1px solid var(--rm-light-gray);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.form-control:focus {
  border-color: var(--rm-black);
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.15);
}

/* Monochrome: severity is distinguished by border weight and a text label,
   not by color (user_surface_audit_2026-08-23.md SSDesign Direction). */
.alert {
  position: relative;
  border-radius: 8px;
  border: none;
  border-left: 3px solid var(--rm-light-gray);
  background: #f7f7f7;
  color: var(--rm-charcoal);
  padding-left: 1rem;
}
.alert::before {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6b6b6b;
}
.alert-info::before {
  content: "Note";
}
.alert-success::before {
  content: "Done";
}
.alert-warning {
  border-left-color: #6b6b6b;
}
.alert-warning::before {
  content: "Warning";
}
.alert-danger,
.alert-error {
  border-left-width: 4px;
  border-left-color: #000000;
  background: #f0f0f0;
}
.alert-danger::before,
.alert-error::before {
  content: "Error";
  color: #000000;
}

}

/* ---- src/themes/archive-classic.css ---- */
/* ADR-0055 review option: Archive Classic.
   Brief source: surface #f3efe3, text #1f2421, accent #386641,
   secondary #8f2d56; Fraunces for display, Source Serif 4 for report prose,
   Inter for UI labels. The posture is bookish, soft-paneled, ruled-row, and
   print-first. This stays inside the token-only theme contract. */
@layer overrides {
[data-theme="archive-classic"] {
  color-scheme: light;

  --rm-font-sans: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rm-font-serif: "Fraunces", "Source Serif 4", Georgia, "Times New Roman", serif;

  --rm-ink: #1f2421;
  --rm-ink-2: #292f2b;
  --rm-panel: #1f2421;
  --rm-panel-2: #2b322d;
  --rm-cream: #fffaf0;
  --rm-paper: #f3efe3;
  --rm-muted: #d8ceb8;
  --rm-muted-2: #5f594d;
  --rm-line: rgba(31, 36, 33, 0.14);
  --rm-line-strong: rgba(31, 36, 33, 0.3);

  --rm-gold: #b9d6ba;
  --rm-gold-2: #8f2d56;
  --rm-red: #8f2d56;
  --rm-teal: #386641;
  --rm-blue: #386641;

  --rm-charcoal: #2b3028;
  --rm-charcoal-hover: #3a4035;
  --rm-slate: #625d52;
  --rm-light-gray: #e2dac9;
  --rm-black: #1f2421;

  --rm-text-xs: 0.82rem;
  --rm-text-sm: 0.94rem;
  --rm-text-md: 1.04rem;
  --rm-text-lg: 1.22rem;
  --rm-text-xl: 1.52rem;
  --rm-text-2xl: 2rem;
  --rm-text-3xl: 2.9rem;
  --rm-text-4xl: 4.2rem;

  --rm-page-pad: 1.25rem;
  --rm-container: 1180px;
  --rm-section: 4.6rem;
  --rm-section-tight: 3rem;
  --rm-radius: 6px;
  --rm-radius-sm: 3px;
  --rm-shadow: 0 18px 42px rgba(31, 36, 33, .12);
  --rm-shadow-soft: 0 10px 24px rgba(31, 36, 33, .09);

  --rm-report-muted: #605849;
  --rm-report-body: #403a31;
  --rm-report-border: #d9cfb8;
  --rm-report-border-soft: #e2d8c0;
  --rm-report-border-chip: #d4c9b0;
  --rm-report-border-card: #e5dcc8;
  --rm-report-border-hair: #eadfcb;

  --rm-report-doc-panel-bg: rgba(31, 36, 33, .93);
  --rm-report-doc-shadow: 0 24px 56px rgba(31, 36, 33, .26);
  --rm-report-doc-track-bg: rgba(255, 250, 240, .08);
  --rm-report-doc-field-bg: rgba(255, 250, 240, .035);
  --rm-report-doc-hair: rgba(255, 250, 240, .06);
  --rm-report-doc-accent-2: #b9d6ba;
  --rm-report-doc-accent-bg-soft: rgba(56, 102, 65, .1);
  --rm-report-doc-accent-border: rgba(56, 102, 65, .32);
  --rm-report-doc-accent-bg: rgba(56, 102, 65, .18);
  --rm-report-doc-accent-bg-hover: rgba(56, 102, 65, .26);

  --rm-report-doc-print-border: #d3c7ad;
  --rm-report-doc-print-ink: #1f2421;
  --rm-report-doc-print-muted: #5c5549;
  --rm-report-doc-print-muted-2: #6f675a;
  --rm-report-doc-print-track-bg: #e7dec9;
  --rm-report-doc-print-accent: #386641;
  --rm-report-doc-print-accent-dark: #244329;
  --rm-report-doc-print-accent-bg: #e7efe2;
  --rm-report-doc-print-pill-bg: #dbe8d5;

  --rm-report-font-heading: var(--rm-font-serif);
  --rm-report-font-ui: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rm-report-text-h1: clamp(2rem, 3.5vw, 3.25rem);
  --rm-report-text-h2: 1.24rem;
  --rm-report-leading-h1: 1.12;
  --rm-report-leading-lead: 1.85;
  --rm-report-leading-sub: 1.75;
  --rm-report-leading-card: 1.8;
  --rm-report-section-radius: 6px;
  --rm-report-section-border: 1px solid var(--rm-report-border-soft);
  --rm-report-section-bg: rgba(255, 250, 240, .74);
  --rm-report-section-divider: 2px solid var(--rm-report-border);
  --rm-report-pill-radius: 3px;
  --rm-report-table-border: 1px solid var(--rm-report-border);
  --rm-report-table-cell-padding: .62rem .7rem;
  --rm-report-accent: #386641;
  --rm-report-accent-2: #8f2d56;
}
}

/* ---- src/themes/data-room.css ---- */
/* ADR-0055 review option: Data Room.
   Brief source: surface #eef2f1, text #12201f, accent #007c89,
   secondary #6a4cc2; IBM Plex Sans for text and IBM Plex Mono for compact
   numbers/labels. The posture is dense, table-first, square, hairlined, and
   shadowless. This stays inside the token-only theme contract. */
@layer overrides {
[data-theme="data-room"] {
  color-scheme: light;

  --rm-font-sans: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rm-font-serif: "IBM Plex Sans", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --rm-ink: #12201f;
  --rm-ink-2: #182927;
  --rm-panel: #102220;
  --rm-panel-2: #162d2a;
  --rm-cream: #fbffff;
  --rm-paper: #eef2f1;
  --rm-muted: #b8d8d9;
  --rm-muted-2: #405452;
  --rm-line: rgba(18, 32, 31, 0.16);
  --rm-line-strong: rgba(18, 32, 31, 0.32);

  --rm-gold: #9fdde0;
  --rm-gold-2: #6a4cc2;
  --rm-red: #6a4cc2;
  --rm-teal: #007c89;
  --rm-blue: #007c89;

  --rm-charcoal: #182927;
  --rm-charcoal-hover: #223633;
  --rm-slate: #4a605d;
  --rm-light-gray: #d9e2e0;
  --rm-black: #12201f;

  --rm-text-xs: 0.7rem;
  --rm-text-sm: 0.82rem;
  --rm-text-md: 0.9rem;
  --rm-text-lg: 1.02rem;
  --rm-text-xl: 1.18rem;
  --rm-text-2xl: 1.55rem;
  --rm-text-3xl: 2.2rem;
  --rm-text-4xl: 3.25rem;

  --rm-page-pad: 1rem;
  --rm-container: 1380px;
  --rm-section: 3rem;
  --rm-section-tight: 1.8rem;
  --rm-radius: 0px;
  --rm-radius-sm: 0px;
  --rm-shadow: none;
  --rm-shadow-soft: none;

  --rm-report-muted: #4c5f5d;
  --rm-report-body: #263936;
  --rm-report-border: #c8d4d1;
  --rm-report-border-soft: #d2dcda;
  --rm-report-border-chip: #bfcfcb;
  --rm-report-border-card: #cfd9d7;
  --rm-report-border-hair: #dce4e2;

  --rm-report-doc-panel-bg: rgba(18, 32, 31, .94);
  --rm-report-doc-shadow: none;
  --rm-report-doc-track-bg: rgba(251, 255, 255, .08);
  --rm-report-doc-field-bg: rgba(251, 255, 255, .035);
  --rm-report-doc-hair: rgba(251, 255, 255, .06);
  --rm-report-doc-accent-2: #9fdde0;
  --rm-report-doc-accent-bg-soft: rgba(0, 124, 137, .1);
  --rm-report-doc-accent-border: rgba(0, 124, 137, .34);
  --rm-report-doc-accent-bg: rgba(0, 124, 137, .2);
  --rm-report-doc-accent-bg-hover: rgba(0, 124, 137, .3);

  --rm-report-doc-print-border: #c4cfcc;
  --rm-report-doc-print-ink: #12201f;
  --rm-report-doc-print-muted: #445653;
  --rm-report-doc-print-muted-2: #5e716e;
  --rm-report-doc-print-track-bg: #dde6e3;
  --rm-report-doc-print-accent: #007c89;
  --rm-report-doc-print-accent-dark: #00525b;
  --rm-report-doc-print-accent-bg: #e2f2f1;
  --rm-report-doc-print-pill-bg: #d2e8e7;

  --rm-report-font-heading: var(--rm-font-sans);
  --rm-report-font-ui: var(--rm-font-sans);
  --rm-report-text-h1: clamp(1.8rem, 3vw, 2.7rem);
  --rm-report-text-h2: 1.02rem;
  --rm-report-leading-h1: 1.05;
  --rm-report-leading-lead: 1.55;
  --rm-report-leading-sub: 1.45;
  --rm-report-leading-card: 1.5;
  --rm-report-section-radius: 0px;
  --rm-report-section-border: 1px solid var(--rm-report-border-soft);
  --rm-report-section-bg: var(--rm-cream);
  --rm-report-section-divider: none;
  --rm-report-pill-radius: 0px;
  --rm-report-table-border: 1px solid var(--rm-report-border);
  --rm-report-table-cell-padding: .42rem .5rem;
  --rm-report-accent: #007c89;
  --rm-report-accent-2: #6a4cc2;
}
}

/* ---- src/themes/dense-tool.css ---- */
/* T153.04 -- Concept 4/4: dense-tool.
   Brief: compact, tabular, high information density -- the direction that
   suits someone comparing twelve scripts rather than reading one (phase 153
   D3: tokens only).

   Same structural limit named in radical.css's comment applies here: report.css
   hardcodes the report/document family's own spacing and type scale, so this
   concept's "density" reaches the app-chrome and landing surfaces (via
   --rm-text-*/--rm-radius/--rm-section/--rm-container, which components.css
   does consume) and the report's *palette* (flatter, cooler, more utilitarian
   than the seeded monochrome), not the report's internal layout. A future
   task that tokenizes report.css's own spacing is what would let a "dense"
   concept actually tighten the report's own tables and cards.

   --rm-muted and --rm-gold below are light tints, not dark ones -- see
   muted-minimal.css's header comment for why (report.css's only use of
   either sits on the permanently-dark document panel, so even a light
   concept needs a light value there; components.css's separate, conflicting
   use of --rm-gold as light-landing text is a carried finding, not fixed
   here). --rm-red keeps its own distinct hue -- a real error/negative-state
   signal a comparison tool needs, unlike muted-minimal's one-hue budget. */
@layer overrides {
[data-theme="dense-tool"] {
  color-scheme: light;

  --rm-ink: #14171c;
  --rm-ink-2: #1c2027;
  --rm-panel: #1a1d23;
  --rm-panel-2: #22262d;
  --rm-cream: #ffffff;
  --rm-paper: #f4f6f8;
  --rm-muted: #aeb8c2;
  --rm-muted-2: #3f4750;
  --rm-line: rgba(20, 23, 28, 0.14);
  --rm-line-strong: rgba(20, 23, 28, 0.26);

  --rm-gold: #7ec2ea;
  --rm-gold-2: #a9d8f0;
  --rm-red: #d9827c;
  --rm-teal: #7ec2ea;
  --rm-blue: #7ec2ea;

  --rm-charcoal: #1f242b;
  --rm-charcoal-hover: #2a3038;
  --rm-slate: #4c5560;
  --rm-light-gray: #e2e7eb;
  --rm-black: #14171c;

  --rm-text-xs: 0.72rem;
  --rm-text-sm: 0.84rem;
  --rm-text-md: 0.92rem;
  --rm-text-lg: 1.05rem;
  --rm-text-xl: 1.25rem;
  --rm-text-2xl: 1.7rem;
  --rm-text-3xl: 2.4rem;
  --rm-text-4xl: 3.6rem;

  --rm-page-pad: 1rem;
  --rm-container: 1320px;
  --rm-section: 3.25rem;
  --rm-section-tight: 2rem;
  --rm-radius: 6px;
  --rm-radius-sm: 4px;
  --rm-shadow: 0 10px 28px rgba(15, 20, 25, .18);
  --rm-shadow-soft: 0 6px 16px rgba(15, 20, 25, .12);

  --rm-report-muted: #545d68;
  --rm-report-body: #2b3038;
  --rm-report-border: #d7dde2;
  --rm-report-border-soft: #dee3e7;
  --rm-report-border-chip: #cfd6db;
  --rm-report-border-card: #dbe1e5;
  --rm-report-border-hair: #e6eaed;

  --rm-report-doc-panel-bg: rgba(20, 23, 28, .92);
  --rm-report-doc-shadow: 0 16px 40px rgba(15, 20, 25, .34);
  --rm-report-doc-track-bg: rgba(255, 255, 255, .08);
  --rm-report-doc-field-bg: rgba(255, 255, 255, .03);
  --rm-report-doc-hair: rgba(255, 255, 255, .05);
  --rm-report-doc-accent-2: #7ec2ea;
  --rm-report-doc-accent-bg-soft: rgba(15, 94, 140, .12);
  --rm-report-doc-accent-border: rgba(15, 94, 140, .34);
  --rm-report-doc-accent-bg: rgba(15, 94, 140, .2);
  --rm-report-doc-accent-bg-hover: rgba(15, 94, 140, .28);

  --rm-report-doc-print-border: #ccc;
  --rm-report-doc-print-ink: #14171c;
  --rm-report-doc-print-muted: #454d56;
  --rm-report-doc-print-muted-2: #5c6672;
  --rm-report-doc-print-track-bg: #eef1f3;
  --rm-report-doc-print-accent: #0f5e8c;
  --rm-report-doc-print-accent-dark: #093a57;
  --rm-report-doc-print-accent-bg: #e8f1f7;
  --rm-report-doc-print-pill-bg: #d7e7f0;
}
}

/* ---- src/themes/editorial.css ---- */
/* T153.04 -- Concept 3/4: editorial.
   Brief: serif, generous, reads as a research memo -- the direction that
   suits the "market intelligence" positioning (phase 153 D3: tokens only).

   The report/document family (report.css) doesn't declare its own
   font-family -- it inherits from body.rm-theme-page, which reads
   var(--rm-font-sans) (confirmed by grep: no font-family rule anywhere in
   .ru-*/.dp-*/.wp-*). There is no separate --rm-font-report token to flip
   just the report serif, so this concept overrides --rm-font-sans itself to
   hold a serif stack -- a deliberate token-name/value mismatch, allowed by
   the contract (any declared --rm-* token may be set to any value) and
   noted here so it reads as a choice, not an error. --rm-font-serif is set
   to the same family so anything in components.css that already reads it
   directly (landing hero/section headings) matches rather than clashes.
   Generous spacing and a warmer, higher-contrast ink/paper carry the rest of
   "research memo" through the surfaces tokens actually reach.

   --rm-muted and --rm-gold below are light tints, not dark ones -- see
   muted-minimal.css's header comment for why (report.css's only use of
   either sits on the permanently-dark document panel, so even a light
   concept needs a light value there; components.css's separate, conflicting
   use of --rm-gold as light-landing text is a carried finding, not fixed
   here). */
@layer overrides {
[data-theme="editorial"] {
  color-scheme: light;

  --rm-font-sans: "Source Serif 4", Georgia, "Times New Roman", serif;
  --rm-font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --rm-ink: #1c1912;
  --rm-ink-2: #262219;
  --rm-panel: #241f16;
  --rm-panel-2: #2e281c;
  --rm-cream: #fffdf8;
  --rm-paper: #faf6ec;
  --rm-muted: #c9bfa8;
  --rm-muted-2: #4f4a3e;
  --rm-line: rgba(28, 25, 18, 0.14);
  --rm-line-strong: rgba(28, 25, 18, 0.26);

  --rm-gold: #d9a860;
  --rm-gold-2: #e8c48c;
  --rm-red: #d9a860;
  --rm-teal: #d9a860;
  --rm-blue: #d9a860;

  --rm-charcoal: #2c2717;
  --rm-charcoal-hover: #3b3420;
  --rm-slate: #5c5646;
  --rm-light-gray: #ece5d4;
  --rm-black: #1c1912;

  --rm-text-xs: 0.82rem;
  --rm-text-sm: 0.95rem;
  --rm-text-md: 1.08rem;
  --rm-text-lg: 1.25rem;
  --rm-text-xl: 1.55rem;
  --rm-text-2xl: 2.15rem;
  --rm-text-3xl: 3.15rem;
  --rm-text-4xl: 4.6rem;

  --rm-section: 7rem;
  --rm-section-tight: 4.5rem;
  --rm-radius: 4px;
  --rm-radius-sm: 3px;
  --rm-shadow: 0 20px 50px rgba(38, 30, 12, .2);
  --rm-shadow-soft: 0 12px 28px rgba(38, 30, 12, .14);

  --rm-report-muted: #5c5546;
  --rm-report-body: #3a3324;
  --rm-report-border: #e4dcc7;
  --rm-report-border-soft: #ece5d4;
  --rm-report-border-chip: #ded5bd;
  --rm-report-border-card: #ece5d4;
  --rm-report-border-hair: #f0eadd;

  --rm-report-doc-panel-bg: rgba(28, 25, 18, .9);
  --rm-report-doc-shadow: 0 24px 60px rgba(38, 30, 12, .3);
  --rm-report-doc-track-bg: rgba(255, 253, 248, .08);
  --rm-report-doc-field-bg: rgba(255, 253, 248, .035);
  --rm-report-doc-hair: rgba(255, 253, 248, .06);
  --rm-report-doc-accent-2: #d9a860;
  --rm-report-doc-accent-bg-soft: rgba(122, 74, 23, .1);
  --rm-report-doc-accent-border: rgba(122, 74, 23, .32);
  --rm-report-doc-accent-bg: rgba(122, 74, 23, .18);
  --rm-report-doc-accent-bg-hover: rgba(122, 74, 23, .26);

  --rm-report-doc-print-border: #d6cbb0;
  --rm-report-doc-print-ink: #1c1912;
  --rm-report-doc-print-muted: #55503f;
  --rm-report-doc-print-muted-2: #6b6455;
  --rm-report-doc-print-track-bg: #f0eadd;
  --rm-report-doc-print-accent: #7a4a17;
  --rm-report-doc-print-accent-dark: #4a2c0d;
  --rm-report-doc-print-accent-bg: #f7ecd9;
  --rm-report-doc-print-pill-bg: #efdfc0;
}
}

/* ---- src/themes/festival-broadsheet.css ---- */
/* T153.05 -- Festival Broadsheet, the ADR-0055 SS2.1 winning document theme
   (signed by Mike King and Cheryl King, 2026-09-05): "Producer briefing meets
   festival program -- warm, literate, less SaaS."

   Palette per ADR-0055: surface #fff7e8, text #24211c, accent #245c9c,
   secondary #c05a3b. Typefaces: Newsreader for report titles/section heads,
   Libre Franklin for tables/UI (loaded in reelmetric-script-web's base.html,
   alongside the existing unconditional Inter link -- see that file's T153.05
   comment). This concept touches the whole site's tokens, not only the
   report family, following editorial.css's own precedent (the "producer
   briefing" read is meant to carry through app chrome and landing too, not
   stop at the report).

   Everything outside the four named colors and two named typefaces below is
   a derived value, not a specified one, and is called out here rather than
   presented as part of the signed brief:
     - --rm-paper, and every --rm-* tint/shade of the four named colors, are
       this task's own interpretation of "warm, literate."
     - The T153.05 report-structure tokens (section-radius/border/bg/divider,
       pill-radius, table styling, type/leading scale) implement "editorial
       rhythm, wider line height, full-width section dividers, fewer pills,
       tables read like review ledgers" as concretely as the current token
     contract allows: sections become square near-white briefing panels with
       full-width top dividers; pills flatten from a fully round 999px to a
       4px tag radius; table rows get a slightly heavier, visible-by-design
       rule instead of a near-invisible hairline. This is a genuinely
       different structural read from the other themes on file and reviewers
       should weigh in on it specifically, not just the color choice. */
@layer overrides {
[data-theme="festival-broadsheet"] {
  color-scheme: light;

  --rm-font-sans: "Libre Franklin", Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rm-font-serif: "Newsreader", Georgia, "Times New Roman", serif;

  --rm-ink: #24211c;
  --rm-ink-2: #2e2a23;
  --rm-panel: #1d1a15;
  --rm-panel-2: #26221b;
  --rm-cream: #fffdf7;
  --rm-paper: #fff7e8;
  /* Light tint, not a dark one -- report.css's only use of --rm-muted sits
     on the permanently-dark document panel (.dp-section-sub/.dp-field-label/
     .dp-caveat p), so even this light-surface concept needs a light value
     there. Same reasoning editorial.css's own header comment already names
     for this exact token. Verified live via check_contrast.py, not
     reasoned from source: a mid-tone tan measured 3.26:1 against the
     composited panel background (fails 4.5:1); this measured 8.01:1. */
  --rm-muted: #d8cbab;
  --rm-muted-2: #55503f;
  --rm-line: rgba(36, 33, 28, 0.14);
  --rm-line-strong: rgba(36, 33, 28, 0.28);

  /* Legacy accent-token names -- reused for the two ADR-0055 accents rather
     than left monochrome (D3 allows any value for an already-declared
     token). --rm-gold specifically renders as text on the document panel's
     own translucent accent-tinted background (.dp-market-pill,
     .dp-caveat-title) -- the same dark-panel legibility problem as
     --rm-muted above, so it is a light sky-blue tint of the signed accent,
     not the accent's own mid-tone value (measured 1.72:1 with the mid-tone,
     7.08:1 with this tint). --rm-teal/--rm-blue carry the primary accent's
     mid-tone (used on light surfaces only, per components.css); --rm-red/
     --rm-gold-2 carry the secondary. */
  --rm-gold: #9dc9ee;
  --rm-gold-2: #c05a3b;
  --rm-red: #c05a3b;
  --rm-teal: #245c9c;
  --rm-blue: #245c9c;

  --rm-charcoal: #34302a;
  --rm-charcoal-hover: #423d33;
  --rm-slate: #6b6252;
  --rm-light-gray: #ece0c8;
  --rm-black: #1a1712;

  --rm-text-xs: 0.8rem;
  --rm-text-sm: 0.95rem;
  --rm-text-md: 1.05rem;
  --rm-text-lg: 1.2rem;
  --rm-text-xl: 1.5rem;
  --rm-text-2xl: 2.05rem;
  --rm-text-3xl: 3.05rem;
  --rm-text-4xl: 4.65rem;

  --rm-section: 4rem;
  --rm-section-tight: 3rem;
  --rm-radius: 4px;
  --rm-radius-sm: 3px;
  --rm-shadow: none;
  --rm-shadow-soft: none;
  --rm-page-bg: #fff7e8;
  --rm-page-noise-opacity: 0;
  --rm-section-divider: 1px solid #d8cbb5;
  --rm-section-ink-fg: #24211c;
  --rm-section-ink-bg: #fffdf7;
  --rm-section-ink-kicker: #245c9c;
  --rm-section-ink-muted: #5f5646;
  --rm-section-ink-card-fg: #24211c;
  --rm-section-ink-card-bg: #fff7e8;
  --rm-section-paper-lead: #5f5646;
  --rm-card-bg: #fffdf7;
  --rm-card-border: #d8cbb5;
  --rm-card-radius: 0px;
  --rm-card-shadow: none;

  --rm-brand-mark-color: #fffdf7;
  --rm-brand-mark-bg: #245c9c;
  --rm-button-primary-fg: #fffdf7;
  --rm-button-primary-bg: #245c9c;
  --rm-button-primary-bg-hover: #163a63;
  --rm-button-secondary-fg: #245c9c;
  --rm-button-secondary-border: #d8cbb5;
  --rm-button-secondary-bg: #fffdf7;
  --rm-button-secondary-border-hover: #245c9c;
  --rm-button-secondary-bg-hover: #eaf1f8;
  --rm-button-disabled-fg: #7f7564;
  --rm-button-disabled-bg: #ece0c8;
  --rm-card-paper-border: #d8cbb5;
  --rm-card-paper-bg: #fffdf7;
  --rm-card-paper-shadow: none;
  --rm-paper-muted: #5f5646;
  --rm-status-row-border: #d8cbb5;
  --rm-status-badge-fg: #5f5646;
  --rm-status-badge-bg: #fff7e8;
  --rm-status-badge-border: #d8cbb5;
  --rm-status-badge-dot: #c05a3b;
  --rm-status-badge-active-fg: #fffdf7;
  --rm-status-badge-active-bg: #245c9c;
  --rm-status-badge-active-border: #245c9c;
  --rm-status-badge-active-dot: #fffdf7;
  --rm-progress-track: #d8cbb5;
  --rm-progress-dot-bg: #fffdf7;
  --rm-progress-dot-border: #d8cbb5;
  --rm-progress-active: #245c9c;
  --rm-progress-active-ring: rgba(36, 92, 156, .16);
  --rm-progress-label: #6b6248;
  --rm-progress-label-active: #24211c;
  --rm-progress-check-fg: #fffdf7;
  --rm-dropzone-border: #d8cbb5;
  --rm-dropzone-bg: #fffdf7;
  --rm-dropzone-border-hover: #245c9c;
  --rm-dropzone-bg-hover: #eaf1f8;
  --rm-dropzone-icon-border: #245c9c;
  --rm-dropzone-file-bg: #245c9c;
  --rm-dropzone-file-fg: #fffdf7;
  --rm-link-accent: #245c9c;
  --rm-danger-text: #9a4029;
  --rm-cta-accent-bg: rgba(192, 90, 59, .18);
  --rm-cta-rule-color: rgba(255, 253, 247, .08);
  --rm-landing-bg: #fff7e8;
  --rm-landing-ink: #24211c;
  --rm-landing-muted: #5f5646;
  --rm-landing-font-sans: var(--rm-font-sans);
  --rm-landing-font-serif: var(--rm-font-serif);
  --rm-landing-font-wordmark: var(--rm-font-serif);
  --rm-landing-wordmark-size: clamp(4rem, 11vw, 13rem);
  --rm-landing-wordmark-line-height: .88;
  --rm-landing-wordmark-letter-spacing: 0em;
  --rm-landing-wordmark-max-width: calc(100vw - clamp(2rem, 4vw, 4rem));
  --rm-landing-wordmark-transform: none;
  --rm-landing-wordmark-mobile-size: clamp(3rem, 13vw, 5.8rem);
  --rm-landing-wordmark-mobile-max-width: calc(100vw - 1.5rem);
  --rm-landing-wordmark-mobile-transform: none;
  --rm-hero-bg: #fff7e8;
  --rm-hero-rule-bg: none;
  --rm-hero-rule-opacity: 0;
  --rm-hero-fade-bg: none;
  --rm-hero-fg: #24211c;
  --rm-hero-kicker: #245c9c;
  --rm-hero-lead: #423d33;
  --rm-hero-border: 2px solid #245c9c;
  --rm-hero-min-height: clamp(340px, 42vh, 470px);
  --rm-hero-min-height-tablet: 390px;
  --rm-hero-min-height-mobile: 360px;
  --rm-hero-content-pad-top: 5rem;
  --rm-hero-content-pad-bottom: 3.8rem;
  --rm-hero-content-pad-top-mobile: 3.75rem;
  --rm-hero-content-pad-bottom-mobile: 3rem;
  --rm-hero-h1-max-width: 18ch;
  --rm-hero-h1-size: clamp(3rem, 5.2vw, 5.2rem);
  --rm-cta-bg: #fffdf7;
  --rm-cta-fg: #24211c;
  --rm-cta-border: #245c9c;
  --rm-cta-shadow: none;
  --rm-cta-kicker: #245c9c;
  --rm-cta-lead: #423d33;
  --rm-cta-overlay-opacity: 0;

  /* Darker than a first pass -- #7a7058 measured 4.18:1 on --rm-paper,
     just under WCAG AA; this measures 5.17:1, verified live. */
  --rm-report-muted: #6b6248;
  --rm-report-body: #423d33;
  --rm-report-border: #e6d9bd;
  --rm-report-border-soft: #ecdfc4;
  --rm-report-border-chip: #e2d4b6;
  --rm-report-border-card: #ecdfc4;
  --rm-report-border-hair: #f2e8d2;
  --rm-report-eyebrow-bg: #245c9c;
  --rm-report-eyebrow-color: #fffdf7;
  --rm-report-eyebrow-border: #245c9c;
  --rm-report-chip-bg: #fffdf7;
  --rm-report-chip-color: #423d33;
  --rm-report-panel-bg: #fffdf7;
  --rm-report-panel-border: #d8cbb5;
  --rm-report-panel-radius: 0px;
  --rm-report-panel-radius-sm: 0px;
  --rm-report-card-padding: 1.05rem;
  --rm-report-card-padding-sm: .78rem;
  --rm-report-dialogue-border-accent: #c05a3b;
  --rm-report-data-fill: #245c9c;
  --rm-report-table-heading-color: #245c9c;
  --rm-report-table-heading-border: 2px solid #d8cbb5;
  --rm-report-phase-bg: #fffdf7;
  --rm-report-phase-fg: #423d33;
  --rm-report-phase-border: #d8cbb5;
  --rm-report-pending-bg: #fffdf7;
  --rm-report-pending-radius: 0px;

  --rm-report-doc-panel-bg: rgba(36, 33, 28, .92);
  --rm-report-doc-shadow: 0 24px 60px rgba(36, 33, 28, .32);
  --rm-report-doc-track-bg: rgba(255, 247, 232, .08);
  --rm-report-doc-field-bg: rgba(255, 247, 232, .035);
  --rm-report-doc-hair: rgba(255, 247, 232, .06);
  --rm-report-doc-accent-2: #9dc9ee;
  --rm-report-doc-accent-bg-soft: rgba(36, 92, 156, .1);
  --rm-report-doc-accent-border: rgba(36, 92, 156, .32);
  --rm-report-doc-accent-bg: rgba(36, 92, 156, .18);
  --rm-report-doc-accent-bg-hover: rgba(36, 92, 156, .26);

  --rm-report-doc-print-border: #ddd0ac;
  --rm-report-doc-print-ink: #24211c;
  --rm-report-doc-print-muted: #5c5546;
  --rm-report-doc-print-muted-2: #6b6455;
  --rm-report-doc-print-track-bg: #f2e8d2;
  --rm-report-doc-print-accent: #245c9c;
  --rm-report-doc-print-accent-dark: #163a63;
  --rm-report-doc-print-accent-bg: #eaf1f8;
  --rm-report-doc-print-pill-bg: #dce9f3;

  /* T153.05 report structure -- see this file's header comment. */
  --rm-report-font-heading: var(--rm-font-serif);
  --rm-report-font-ui: var(--rm-font-sans);

  --rm-report-text-h1: clamp(2.1rem, 3.6vw, 3.4rem);
  --rm-report-text-h2: 1.28rem;
  --rm-report-leading-h1: 1.1;
  --rm-report-leading-lead: 1.9;
  --rm-report-leading-sub: 1.8;
  --rm-report-leading-card: 1.85;

  --rm-report-section-radius: 0px;
  --rm-report-section-border: 1px solid var(--rm-report-border);
  --rm-report-section-bg: #fffdf7;
  --rm-report-section-divider: 2px solid var(--rm-report-accent);

  --rm-report-pill-radius: 4px;

  --rm-report-table-border: 1px solid var(--rm-report-border);
  --rm-report-table-cell-padding: .65rem .75rem;

  --rm-report-accent: #245c9c;
  --rm-report-accent-2: #c05a3b;
}
}

/* ---- src/themes/muted-minimal.css ---- */
/* T153.04 -- Concept 1/4: muted-minimal.
   Brief: the current black-and-white report, opened to a narrow chromatic
   budget -- one accent hue, low saturation, used only for state and data
   (market pills, caveat titles, print highlights). Closest to today and the
   lowest-risk outcome if it wins (phase 153 D3: tokens only, see
   docs/theme_override_contract.md).

   The one accent is a muted slate-teal (~#3d6b7a); --rm-red/--rm-teal/--rm-blue
   are deliberately mapped to the same hue rather than left distinct, because
   "narrow chromatic budget" means this concept has exactly one hue to spend,
   not three unused ones. Everything else is a small warm-neutral shift off
   the seeded pure black/white (T151.10), not a redesign.

   --rm-muted and --rm-gold below are LIGHT tints, not dark ones, on purpose.
   Grep confirms report.css's only use of --rm-muted (.dp-section-sub,
   .dp-field-label, .dp-caveat p) and of --rm-gold/--rm-gold-2 (.dp-market-pill,
   .dp-caveat-title) sits on the permanently-dark document panel
   (--rm-report-doc-panel-bg), so even this light overall concept needs a
   light value there to read -- a dark "accent" text was this task's own
   first draft, caught failing WCAG AA by this task's contrast checker.
   Carried finding, not fixed here: components.css separately uses --rm-gold
   as text color on light landing backgrounds for large display numerals
   (.rm-step-number / .rm-score-number), a second, conflicting role no single
   value can satisfy at both AA thresholds simultaneously (checked by hand;
   this task's contrast tool only checks report.css, per its own docstring). */
@layer overrides {
[data-theme="muted-minimal"] {
  color-scheme: light;

  --rm-ink: #171512;
  --rm-ink-2: #211f1b;
  --rm-panel: #221f1b;
  --rm-panel-2: #2b2822;
  --rm-cream: #ffffff;
  --rm-paper: #faf9f7;
  --rm-muted: #b7c1c6;
  --rm-muted-2: #56524c;
  --rm-line: rgba(23, 21, 18, 0.12);
  --rm-line-strong: rgba(23, 21, 18, 0.24);

  --rm-gold: #8fc4d4;
  --rm-gold-2: #b7dbe5;
  --rm-red: #8fc4d4;
  --rm-teal: #8fc4d4;
  --rm-blue: #8fc4d4;

  --rm-charcoal: #2b2926;
  --rm-charcoal-hover: #3a3733;
  --rm-slate: #57534e;
  --rm-light-gray: #e7e3de;
  --rm-black: #171512;

  --rm-report-muted: #635f58;
  --rm-report-body: #443f39;
  --rm-report-border: #ddd8d2;
  --rm-report-border-soft: #e2ded8;
  --rm-report-border-chip: #d8d3cc;
  --rm-report-border-card: #e6e2db;
  --rm-report-border-hair: #ececea;

  --rm-report-doc-panel-bg: rgba(23, 21, 18, 0.9);
  --rm-report-doc-shadow: 0 22px 60px rgba(0, 0, 0, .3);
  --rm-report-doc-track-bg: rgba(255, 255, 255, .08);
  --rm-report-doc-field-bg: rgba(255, 255, 255, .03);
  --rm-report-doc-hair: rgba(255, 255, 255, .05);
  --rm-report-doc-accent-2: #8fc4d4;
  --rm-report-doc-accent-bg-soft: rgba(47, 89, 103, .12);
  --rm-report-doc-accent-border: rgba(47, 89, 103, .34);
  --rm-report-doc-accent-bg: rgba(47, 89, 103, .2);
  --rm-report-doc-accent-bg-hover: rgba(47, 89, 103, .28);

  --rm-report-doc-print-border: #ccc;
  --rm-report-doc-print-ink: #171512;
  --rm-report-doc-print-muted: #4d4a44;
  --rm-report-doc-print-muted-2: #66625b;
  --rm-report-doc-print-track-bg: #eee;
  --rm-report-doc-print-accent: #2f5967;
  --rm-report-doc-print-accent-dark: #1c363e;
  --rm-report-doc-print-accent-bg: #eef3f4;
  --rm-report-doc-print-pill-bg: #dbe6e8;
}
}

/* ---- src/themes/radical.css ---- */
/* T153.04 -- Concept 2/4: radical.
   Brief: deliberately far from today, and different in structure, not only
   palette -- type scale, density, whether the report reads as a document or
   a dashboard (phase 153 D3: tokens only, see docs/theme_override_contract.md).

   Finding 1, carried rather than worked around: reelmetric-design-system/
   src/report.css hardcodes every font-size, border-radius, spacing, and
   container-width literal for the .ru-*/.dp-*/.wp-* families directly in
   rem/px -- none of it reads --rm-text-*, --rm-radius*, --rm-shadow*,
   --rm-section*, or --rm-container (confirmed by grep; zero matches). Only
   report.css's *colors* and its inherited font-family (via body.rm-theme-page)
   are tokenized today. This concept delivers "far from today" through a full
   dark-mode palette inversion, a genuinely different (denser, geometric)
   sans stack, and a much larger data/heading contrast range -- the token
   levers that actually reach the report -- while --rm-text-*/--rm-radius/
   --rm-shadow/--rm-section/--rm-container widen the *app-chrome and landing*
   surfaces (components.css does consume those). Making the report's own type
   scale and spacing concept-selectable needs new tokens in report.css -- out
   of this task's scope (D3 forbids a template/CSS-structure edit here) and
   named as a follow-up rather than solved by widening the contract silently.

   Finding 2, and the more load-bearing one: --rm-cream cannot be one value
   for a fully dark-inverted report. report.css uses it two incompatible
   ways -- as a light-card *background* paired with dark ink in the report
   family (.ru-hero-copy: background var(--rm-cream), color var(--rm-charcoal))
   and as a *foreground text color* on the permanently-dark document panel in
   the decision-package/worksheet family (.dp-section h2, .dp-field-value:
   color var(--rm-cream)). Once ink (--rm-charcoal/--rm-black) flips light
   for a dark report page, the first role needs --rm-cream dark (so ink stays
   legible on it); the second role needs --rm-cream light regardless (its
   background, the document panel, is independently always dark). No single
   value satisfies both, and there is no token-only way to give the two
   selectors different values -- that would mean editing report.css itself,
   out of scope here. Verified by exhausting both directions with this task's
   contrast checker rather than asserted: cream dark passes every .ru-* pair
   and fails the two .dp-*/.wp-* panel-text pairs; cream light does the exact
   reverse.

   Resolution: this concept keeps --rm-cream dark and prioritizes the report
   family, which is the phase's actual subject ("whether *the report* reads
   as a document or a dashboard") -- the decision-package/worksheet family
   predates T151.10's monochrome pass and was already flagged in T153.03's
   own completion notes as a "pre-existing, half-converted inconsistency,
   preserved exactly as-is." To keep that family passing too rather than
   silently regressing it, --rm-report-doc-panel-bg and its neighboring
   track/field/hair tokens are flipped *light* here (a light document card
   floating on the dark dashboard canvas), which requires --rm-muted and
   --rm-gold to go dark again within that one family, in the opposite
   direction from how this concept uses them everywhere else. This is a
   real, deliberate per-surface split, not an oversight -- read together with
   this comment. */
@layer overrides {
[data-theme="radical"] {
  color-scheme: dark;

  --rm-ink: #f4f5f7;
  --rm-ink-2: #dfe2e8;
  --rm-panel: #15161d;
  --rm-panel-2: #1c1e28;
  --rm-cream: #12131a;
  --rm-paper: #0a0b0f;
  --rm-line: rgba(255, 255, 255, 0.14);
  --rm-line-strong: rgba(255, 255, 255, 0.26);

  /* --rm-muted and --rm-gold/--rm-gold-2 are dark here, not light, because
     their only consumer in report.css (.dp-section-sub/.dp-field-label/
     .dp-caveat p, and .dp-market-pill/.dp-caveat-title) is the document
     panel below, which this concept flips light -- see the header comment's
     Finding 2. Everywhere else in this concept "muted"/"accent" reads light
     (--rm-report-muted, the report family's own separate token, stays light
     a few lines down) -- this is the one deliberate exception. */
  --rm-muted: #4a4f57;
  --rm-muted-2: #c1c7d6;
  --rm-gold: #7a4a00;
  --rm-gold-2: #a8720a;
  --rm-red: #ff5470;
  --rm-teal: #2ec4b6;
  --rm-blue: #5390ff;

  --rm-charcoal: #f4f5f7;
  --rm-charcoal-hover: #dfe2e8;
  --rm-slate: #aab2c5;
  --rm-light-gray: #262a35;
  --rm-black: #ffffff;

  --rm-font-sans: "Space Grotesk", "Segoe UI", Inter, ui-sans-serif, system-ui,
    -apple-system, sans-serif;

  --rm-text-xs: 0.8rem;
  --rm-text-sm: 0.92rem;
  --rm-text-md: 1.05rem;
  --rm-text-lg: 1.3rem;
  --rm-text-xl: 1.65rem;
  --rm-text-2xl: 2.3rem;
  --rm-text-3xl: 3.4rem;
  --rm-text-4xl: 5.4rem;

  --rm-page-pad: 1.25rem;
  --rm-container: 1360px;
  --rm-section: 5rem;
  --rm-section-tight: 3rem;
  --rm-radius: 16px;
  --rm-radius-sm: 10px;
  --rm-shadow: 0 32px 90px rgba(0, 0, 0, .6);
  --rm-shadow-soft: 0 18px 44px rgba(0, 0, 0, .46);

  --rm-report-muted: #9aa2b5;
  --rm-report-body: #cdd2de;
  --rm-report-border: rgba(255, 255, 255, .16);
  --rm-report-border-soft: rgba(255, 255, 255, .12);
  --rm-report-border-chip: rgba(255, 255, 255, .18);
  --rm-report-border-card: rgba(255, 255, 255, .16);
  --rm-report-border-hair: rgba(255, 255, 255, .1);

  --rm-report-doc-panel-bg: rgba(244, 241, 234, .94);
  --rm-report-doc-shadow: 0 26px 70px rgba(0, 0, 0, .5);
  --rm-report-doc-track-bg: rgba(18, 19, 26, .1);
  --rm-report-doc-field-bg: rgba(18, 19, 26, .04);
  --rm-report-doc-hair: rgba(18, 19, 26, .08);
  --rm-report-doc-accent-2: #a8720a;
  --rm-report-doc-accent-bg-soft: rgba(168, 114, 10, .12);
  --rm-report-doc-accent-border: rgba(168, 114, 10, .34);
  --rm-report-doc-accent-bg: rgba(168, 114, 10, .18);
  --rm-report-doc-accent-bg-hover: rgba(168, 114, 10, .26);

  --rm-report-doc-print-border: #ccc;
  --rm-report-doc-print-ink: #f4f1ea;
  --rm-report-doc-print-muted: #c1c7d6;
  --rm-report-doc-print-muted-2: #9aa2b5;
  --rm-report-doc-print-track-bg: rgba(255, 255, 255, .12);
  --rm-report-doc-print-accent: #ffb703;
  --rm-report-doc-print-accent-dark: #ffcf6b;
  --rm-report-doc-print-accent-bg: #2b2410;
  --rm-report-doc-print-pill-bg: #241f0e;
}
}