/*
  Tempris hosted report — overlay shim.
  Loaded after each report's own stylesheet to re-skin the existing
  HTML into the Tempris.ai design register without touching markup.
  Three blocks: (1) tokens, (2) typography, (3) chrome reset.
*/

/* ───────────────────────────────────────────────────────────
   Font — Schibsted Grotesk (matches src/app/layout.tsx)
   ─────────────────────────────────────────────────────────── */
@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:wght@400;500;600;700&display=swap");

/* ───────────────────────────────────────────────────────────
   1. Tokens — design system, plus remap of legacy report vars
   ─────────────────────────────────────────────────────────── */
:root {
  /* Tempris design tokens (subset from src/app/globals.css) */
  --color-paper: oklch(98.8% 0.004 42);
  --color-paper-raised: oklch(99.6% 0.003 42);
  --color-paper-sunken: oklch(96.6% 0.006 42);
  --color-ink: oklch(23% 0.012 35);
  --color-ink-secondary: oklch(40% 0.014 35);
  --color-ink-muted: oklch(46% 0.012 38);
  --color-line: oklch(89% 0.006 42);
  --color-line-strong: oklch(82% 0.008 42);
  --color-oxblood: oklch(42% 0.16 27);
  --color-oxblood-hover: oklch(36% 0.15 27);
  --color-oxblood-wash: oklch(96% 0.02 30);
  --color-data-oxblood: oklch(42% 0.16 27);
  --color-data-teal: oklch(50% 0.1 220);
  --color-data-teal-soft: oklch(72% 0.07 220);
  --color-data-ink: oklch(35% 0.012 35);
  --color-data-grey: oklch(64% 0.01 40);

  --text-display: clamp(2.75rem, 1.6rem + 3.6vw, 4.5rem);
  --text-h1: clamp(2rem, 1.4rem + 2vw, 3rem);
  --text-h2: clamp(1.5rem, 1.2rem + 1.1vw, 2.125rem);
  --text-h3: 1.375rem;
  --text-lead: 1.1875rem;
  --text-base: 1rem;
  --text-sm: 0.875rem;
  --text-eyebrow: 0.8125rem;

  --shadow-resting: 0 1px 2px oklch(23% 0.01 35 / 0.05);
  --shadow-raised: 0 4px 16px oklch(23% 0.01 35 / 0.07);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* Legacy report var names — re-pointed at Tempris tokens */
  --bg: var(--color-paper);
  --panel: var(--color-paper);
  --soft: var(--color-paper-sunken);
  --text: var(--color-ink);
  --muted: var(--color-ink-muted);
  --border: var(--color-line);
  --chip: var(--color-paper-sunken);
  --accent: var(--color-oxblood);
  --accent-2: var(--color-data-teal);
  --shadow: none;
  --radius: var(--radius-lg);

  /* Automation 4-segment palette — distinguishable, restrained */
  --auto-teal: var(--color-data-teal);
  --auto-plum: var(--color-data-teal-soft);
  --auto-emerald: var(--color-data-grey);
  --auto-dark-teal: var(--color-data-ink);

  /* PE dual-series — saturated oxblood + deeper teal.
     ls = oxblood (Deal Team); bs = deep teal (Support funcs).
     Both pushed darker/more chroma so they don't read washed out. */
  --ls: var(--color-oxblood);
  --bs: oklch(40% 0.13 215);
  --lsLight: oklch(82% 0.08 27);
  --bsLight: oklch(80% 0.08 215);
}

/* ───────────────────────────────────────────────────────────
   2. Typography — Schibsted Grotesk + fluid clamp scale
   ─────────────────────────────────────────────────────────── */
body {
  font-family: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;
  font-size: 0.9375rem; /* 15px — denser reading rhythm than marketing body */
  line-height: 1.55;
  letter-spacing: 0;
  font-optical-sizing: auto;
  font-feature-settings: "kern", "liga", "calt";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 { text-wrap: balance; font-weight: 600; }
p { text-wrap: pretty; }

.tabular-nums, [class*="-percentage"], [class*="-total"], .automation-axis,
.histogram-axis, .legend-card-meta {
  font-variant-numeric: tabular-nums;
}

/* Display / hero typography on slide-era pages
   (the structural re-author will replace these elements; this is the
   interim hold so they don't look broken under the new tokens) */
.cover-title { font-size: var(--text-h1); line-height: 1.1; letter-spacing: -0.015em; }
.cover-name {
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  text-transform: none;
  font-weight: 600;
}
.cover-sub {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-line-strong);
  padding-top: 10px;
  margin-top: 10px;
}
.about-title {
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 1.25rem;
}
.about-body { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink); }
.workplace-title {
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 2.5rem;
  text-transform: none;
  text-align: left;
}
.workplace-label {
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  font-weight: 500;
  text-transform: none;
}

/* Header band (current "page title" row above content) */
.title-wrap h1,
.title-wrap h2 {
  font-size: var(--text-h2);
  line-height: 1.16;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.title-wrap .sub { font-size: var(--text-sm); color: var(--color-ink-muted); }

/* Brand wordmark (sidebar top) — stays small but de-tracked */
.brand__wordmark { font-size: var(--text-sm); letter-spacing: 0.04em; font-weight: 600; }
.report-title { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-muted); }

/* Content-area headings */
.histogram-header h3,
.automation-header h3,
.treemap-container h3 {
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 600;
}
.use-case-title,
.adjacency-group-title {
  font-size: 1.0625rem;
  line-height: 1.35;
  font-weight: 600;
}
.use-case-card { padding: 14px 16px; }
.use-case-card + .use-case-card { margin-top: 12px; }
.workflow-step-title { font-size: 0.8125rem; }
.workflow-details { font-size: 0.8125rem; margin: 0 0 0.5rem 36px; }
.workflow-prompt { margin-left: 36px; }
.workflow-code { font-size: 0.8125rem; }
/* Future role design — two-column comparative spec.
   Sizes tuned for ~440-670px column widths at 1120 container. */
.future-column h1 {
  font-size: 0.8125rem;
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-oxblood);
  margin: 0 0 1.25rem;
}
.future-column h2 {
  font-size: 1rem;
  line-height: 1.25;
  letter-spacing: -0.005em;
  font-weight: 600;
  margin: 1.5rem 0 0.5rem;
  color: var(--color-ink);
}
.future-column h3 {
  font-size: 0.9375rem;
  line-height: 1.3;
  font-weight: 600;
  margin: 1rem 0 0.375rem;
}
.future-column p,
.future-column li {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--color-ink);
}
.future-column p { margin: 0 0 0.625rem; }
.future-column ul { margin: 0 0 0.75rem 1rem; padding: 0; }
.future-column li { margin: 0 0 0.375rem; }
.future-column hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 1.25rem 0;
}
.future-column.future-column-aside {
  background: var(--color-paper-sunken);
  border-left: 1px solid var(--color-oxblood);
  padding: 1.25rem 1.25rem 1rem 1.5rem;
}
.future-column.future-column-aside h1 {
  /* Hide redundant "Head of DEI" in the aside column — the layout already pairs */
  display: none;
}
.future-column.future-column-aside p strong:first-child {
  color: var(--color-oxblood);
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  display: block;
  margin: 0 0 0.25rem;
  font-weight: 600;
}
.future-layout {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1.5rem;
  align-items: start;
}
@media (max-width: 900px) {
  .future-layout { grid-template-columns: 1fr; }
  .future-column.future-column-aside { border-left: none; border-top: 1px solid var(--color-oxblood); }
}

/* Eyebrows — every small uppercase label collapses onto one token */
.use-case-label,
.workflow-prompt-label,
.adjacencies-label,
.future-summary-caption,
.histogram-band-labels,
.cover-mark {
  font-size: var(--text-eyebrow);
  line-height: 1.2;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
}

/* Body copy adjustments inside dense cards */
.use-case-description,
.adjacency-meta,
.automation-task,
.subtask-title,
.task-title {
  font-size: var(--text-sm);
  line-height: 1.55;
}

/* Numeric callouts — oxblood, tabular */
.task-percentage,
.subtask-percentage,
.automation-total {
  color: var(--color-oxblood);
  font-variant-numeric: tabular-nums;
}

/* ───────────────────────────────────────────────────────────
   3. Chrome reset — strip app-shell affordances
   ─────────────────────────────────────────────────────────── */

/* Flat surfaces, no shadows */
body {
  background: var(--color-paper);
}
.sidebar,
.main,
.use-case-card,
.summary-panel,
.future-column,
.adjacency-group,
.cover-brand-logo,
.automation-toggle,
.histogram-tooltip,
.automation-tooltip,
.cover {
  box-shadow: none;
}

/* Cover panel — flat */
.cover {
  background: var(--color-paper);
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
}

/* Treemap — flat sunken paper instead of cool gradient */
.treemap {
  background: var(--color-paper-sunken);
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
}

/* Sidebar panel — kill the floating-card shadow + tighten chrome
   (still present on body pages until structural re-author lands) */
.sidebar {
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}
.main {
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
  background: var(--color-paper);
}
.header { border-bottom-color: var(--color-line); }

/* Nav — typographic wayfinding, no pill state */
.nav-link {
  color: var(--color-ink-muted);
  border-color: transparent;
  border-radius: var(--radius-sm);
  padding: 8px 10px 8px 12px;
  font-size: var(--text-sm);
}
.nav-link:hover {
  color: var(--color-ink);
  background: var(--color-paper-sunken);
  border-color: transparent;
}
.nav-link.is-active {
  color: var(--color-ink);
  background: var(--color-paper-sunken);
  border: 1px solid transparent;
  border-left: 1px solid var(--color-oxblood);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  box-shadow: none;
  font-weight: 600;
}
.nav-link-arrow { color: var(--color-oxblood); }
.nav-group-title { color: var(--color-ink); font-weight: 600; font-size: var(--text-sm); }

/* Chips — hairline border, no fill */
.chip {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink-muted);
  font-size: var(--text-eyebrow);
  font-weight: 500;
  letter-spacing: 0.02em;
  padding: 4px 10px;
}

/* Use-case + adjacency cards — flat */
.use-case-card,
.summary-panel,
.future-column,
.adjacency-group {
  background: var(--color-paper);
  border-color: var(--color-line);
  border-radius: var(--radius-lg);
}
.adjacency-pane {
  background: var(--color-paper-sunken);
  border-color: var(--color-line);
}
.adjacency-item {
  background: var(--color-paper);
  border-color: var(--color-line);
}

/* Tier colour — collapse to weight contrast, not three hues */
.adjacency-group[data-tier="strong"] .adjacency-group-title { color: var(--color-oxblood); }
.adjacency-group[data-tier="medium"] .adjacency-group-title { color: var(--color-ink); }
.adjacency-group[data-tier="weak"] .adjacency-group-title { color: var(--color-ink-muted); }

/* Workflow code — paper-sunken, ink text, mono fallback */
.workflow-code {
  background: var(--color-paper-sunken);
  color: var(--color-ink);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-md);
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--text-sm);
  line-height: 1.5;
}
.workflow {
  background: var(--color-paper-sunken);
  border-color: var(--color-line);
  border-radius: var(--radius-md);
}
.workflow summary::after { color: var(--color-ink-muted); }
.workflow-step-index {
  background: var(--color-oxblood-wash);
  color: var(--color-oxblood);
  font-weight: 600;
}
.workflow-details li::before { color: var(--color-oxblood); }

/* Treemap tiles — flat, hover is colour-only (no lift) */
.task-container {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.task-container:hover {
  border-color: var(--color-oxblood);
  transform: none;
  box-shadow: none;
}
.task-header { border-bottom-color: var(--color-line); }
.subtask-container {
  background: var(--color-paper-sunken);
  border-color: var(--color-line);
}
.subtask-container:hover {
  background: var(--color-paper-sunken);
  border-color: var(--color-oxblood);
}

/* Tooltips — paper-raised + line, never dark chip */
.histogram-tooltip,
.automation-tooltip {
  background: var(--color-paper-raised);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-raised);
  font-size: var(--text-sm);
  max-width: 360px;
  padding: 0.625rem 0.75rem;
}
.histogram-tooltip strong {
  display: block;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  font-weight: 600;
  margin: 0 0 0.375rem;
}
.histogram-tooltip-row {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--color-ink);
  padding: 0.125rem 0;
}
.histogram-tooltip-rule {
  color: var(--color-ink-muted);
  margin: 0 0.25rem;
}
.histogram-tooltip-score {
  font-variant-numeric: tabular-nums;
  color: var(--color-oxblood);
  font-weight: 600;
  margin-left: 0.375rem;
}
.histogram-tooltip-more {
  font-size: 0.75rem;
  color: var(--color-ink-muted);
  font-style: italic;
  margin-top: 0.25rem;
}
.histogram-chart { cursor: crosshair; }

/* Automation toggle button — quiet pill */
.automation-toggle {
  background: var(--color-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-line-strong);
  box-shadow: none;
  font-size: var(--text-sm);
  font-weight: 500;
}
.automation-toggle:hover {
  border-color: var(--color-oxblood);
  color: var(--color-oxblood);
}

/* Automation bar — flat panel + ink axis labels */
.automation-bar {
  background: var(--color-paper-sunken);
  border-radius: var(--radius-sm);
}
.automation-segment.is-active { outline-color: var(--color-ink); }
.automation-chart::before { background: var(--color-paper); }
.automation-chart::after {
  background: linear-gradient(
    to right,
    var(--color-line),
    var(--color-line) 1px,
    transparent 1px
  );
}

/* Automation legend + border */
.automation-legend { border-top-color: var(--color-line); }
.legend-swatch { border-radius: 2px; }

/* Histogram — flat panel, ink reference line */
.histogram-chart {
  background: var(--color-paper);
  border-color: var(--color-line);
}
.histogram-line { background: var(--color-line-strong); }

/* Histogram role bands — three distinguishable colours from the data palette */
.hist-role-one { background: var(--color-data-oxblood); }
.hist-role-two { background: var(--color-data-teal); }
.hist-role-three { background: var(--color-data-grey); }
.density-line.hist-role-one { stroke: var(--color-data-oxblood); }
.density-line.hist-role-two { stroke: var(--color-data-teal); }
.density-line.hist-role-three { stroke: var(--color-data-grey); }

/* Histogram legend cards — hairline border, no fill */
.legend-card,
.legend-card.hist-role-two,
.legend-card.hist-role-three {
  background: transparent;
  border: 1px solid var(--color-line-strong);
  color: var(--color-ink);
  border-radius: var(--radius-md);
  font-weight: 500;
}
.legend-card-meta { color: var(--color-ink-muted); }

/* Placeholder slabs — paper-sunken, dashed line */
.placeholder {
  background: var(--color-paper-sunken);
  border: 1px dashed var(--color-line-strong);
  border-radius: var(--radius-md);
}

/* Adjacencies select */
.adjacencies-select {
  background: var(--color-paper);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-sm);
  color: var(--color-ink);
  font-size: var(--text-sm);
}
.adjacency-empty {
  background: var(--color-paper-sunken);
  border: 1px dashed var(--color-line-strong);
  color: var(--color-ink-muted);
}

/* Adjacency item — neutral by default; heatmap toggle (below) opts in to colour. */
.adjacency-item {
  background: var(--color-paper);
  border: 1px solid var(--color-line);
  transition: background 200ms, border-color 200ms;
}

/* Slide-era decorative frames — hidden until structural re-author lands */
.slide--cover .frame,
.slide--about .frame,
.slide--workplace-change .frame,
.cover-bg {
  display: none !important;
}

/* Slide page backgrounds — flat warm paper */
.slide--cover,
.slide--about,
.slide--workplace-change {
  background: var(--color-paper);
}

/* Workplace icons — currentColor inherits from parent (icons will need
   inline SVG to actually pick this up; see task #8) */
.workplace-icon { color: var(--color-oxblood); }

/* PE-report: hide inline-styled "color:green" status text and restyle */
[style*="color:green"],
[style*="color: green"] {
  color: var(--color-ink) !important;
  font-weight: 600;
}

/* Pagination breaks — flat hairline */
.pageBreak,
hr {
  border: none;
  border-top: 1px solid var(--color-line);
  margin: 2rem 0;
}

/* Focus visibility — on-brand oxblood ring */
:focus-visible {
  outline: 2px solid var(--color-oxblood);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ───────────────────────────────────────────────────────────
   4. New shell — top bar + sticky chapter strip + flat body
   (replaces .app / .sidebar / .main chrome on re-authored pages)
   ─────────────────────────────────────────────────────────── */

html:has(.report-bar),
html:has(.report-doc) {
  height: auto;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
}
body:has(.report-bar),
body:has(.report-doc) {
  background: var(--color-paper);
  margin: 0;
  height: auto;
  min-height: 100vh;
}

.report-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  height: 64px;
  padding: 0 clamp(1rem, 3vw, 2rem);
  background: oklch(98.8% 0.004 42 / 0.92);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--color-line);
}
.report-bar-jumps {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.report-bar-jumps a {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0;
}
.report-bar-jumps a:hover {
  color: var(--color-oxblood);
}
@media (max-width: 720px) {
  .report-bar-jumps { display: none; }
}
.report-bar-brand {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-ink);
}
.report-bar-brand img {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  align-self: center;
}
.report-bar-mark {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.report-bar-title {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  font-weight: 500;
}
.report-bar-contents {
  font-size: var(--text-sm);
  color: var(--color-ink);
  text-decoration: none;
  font-weight: 500;
  padding: 6px 10px;
  border-radius: var(--radius-sm);
}
.report-bar-contents:hover {
  background: var(--color-paper-sunken);
  color: var(--color-oxblood);
}

.chapter-strip {
  position: sticky;
  top: 64px;
  z-index: 39;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 10px clamp(1rem, 3vw, 2rem);
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.chapter-strip-current {
  font-weight: 500;
  color: var(--color-ink);
}
.chapter-strip-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.chapter-strip-nav a {
  color: var(--color-ink-muted);
  text-decoration: none;
  font-weight: 500;
}
.chapter-strip-nav a:hover { color: var(--color-oxblood); }
.chapter-strip-nav span { color: var(--color-line-strong); }

.report-body {
  display: block;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: clamp(1rem, 2vw, 1.75rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 7vw, 6rem);
  background: var(--color-paper);
  border: none;
  border-radius: 0;
  box-shadow: none;
}
.report-body .header {
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.report-body .content {
  padding: 0;
  overflow: visible;
}

/* When the re-authored shell is present, hide any leftover legacy chrome
   (defensive — body pages have their .app/.sidebar/.main stripped, but
   this protects against partial states during dev) */
body:has(.report-bar) .app { display: contents; }
body:has(.report-bar) .sidebar { display: none; }

/* ───────────────────────────────────────────────────────────
   5. Preface page layout — editorial title pages
   ─────────────────────────────────────────────────────────── */

.preface {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
}
.preface-eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin: 0 0 1rem;
}
.preface-title {
  font-size: var(--text-display);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 1rem;
}
.preface-rule {
  width: 56px;
  border: none;
  border-top: 1px solid var(--color-oxblood);
  margin: 1.25rem 0 1.75rem;
}
.preface-lead {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--color-ink);
  margin: 0 0 2rem;
}
.preface-body {
  font-size: var(--text-base);
  line-height: 1.62;
  color: var(--color-ink);
}
.preface-body p { margin: 0 0 1.25rem; }
.preface-meta {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.preface-meta strong {
  display: block;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin: 0 0 0.25rem;
}

/* Workplace-change preface — three-up grid */
.preface-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.preface-grid-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.preface-grid-icon {
  width: 32px;
  height: 32px;
  color: var(--color-oxblood);
}
.preface-grid-label {
  font-size: var(--text-base);
  line-height: 1.4;
  color: var(--color-ink);
  font-weight: 500;
}
@media (max-width: 700px) {
  .preface-grid { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────
   6. TOC page layout
   ─────────────────────────────────────────────────────────── */

.toc {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(2rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem);
}
.toc-eyebrow {
  display: block;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin: 0 0 1rem;
}
.toc-title {
  font-size: var(--text-h1);
  line-height: 1.1;
  letter-spacing: -0.015em;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.toc-subtitle {
  font-size: var(--text-lead);
  line-height: 1.55;
  color: var(--color-ink-muted);
  margin: 0 0 3rem;
}
.toc-group {
  margin-bottom: 2.5rem;
}
.toc-group-title {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-ink-muted);
  font-weight: 500;
  margin: 0 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-line);
}
.toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc-item {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.875rem 0;
  border-bottom: 1px solid var(--color-line);
}
.toc-item:last-child { border-bottom: none; }
.toc-item a {
  display: contents;
  text-decoration: none;
  color: var(--color-ink);
}
.toc-item:hover .toc-item-title { color: var(--color-oxblood); }
.toc-item-number {
  font-size: var(--text-eyebrow);
  letter-spacing: 0.04em;
  color: var(--color-ink-muted);
  font-variant-numeric: tabular-nums;
}
.toc-item-title {
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 1.4;
}
.toc-item-meta {
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}

/* ───────────────────────────────────────────────────────────
   7. Long-scroll document — single index.html flow
   ─────────────────────────────────────────────────────────── */

.report-doc {
  display: block;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(4rem, 8vw, 7rem);
  scroll-padding-top: 88px;
}
html:has(.report-doc) { scroll-behavior: smooth; scroll-padding-top: 88px; }

.report-section {
  scroll-margin-top: 80px;
  padding: clamp(2rem, 4vw, 3.25rem) 0;
}
.report-section + .report-section {
  border-top: 1px solid var(--color-line);
}
.report-section--cover {
  padding-top: clamp(1rem, 2vw, 1.5rem);
  padding-bottom: clamp(1.75rem, 4vw, 3rem);
}
.report-section--cover + .report-section {
  border-top: none;
}

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  font-weight: 600;
  margin: 0 0 1rem;
}
.section-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--color-oxblood);
}

.section-title {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.125rem);
  line-height: 1.16;
  letter-spacing: -0.012em;
  font-weight: 600;
  margin: 0 0 0.75rem;
  color: var(--color-ink);
}
.section-lead {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--color-ink);
  max-width: 64ch;
  margin: 0 0 1.5rem;
}

/* Cover section — large display title, oxblood rule, minimal meta */
.section-cover-title {
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-weight: 600;
  margin: 0 0 0.75rem;
}
.section-cover-meta {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-line);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}
.section-cover-meta strong {
  display: block;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-oxblood);
  font-weight: 600;
  margin: 0 0 0.25rem;
}

/* Section anchor link (the small jumpy thing next to title) */
.section-anchor {
  font-size: var(--text-sm);
  color: var(--color-oxblood);
  text-decoration: none;
  font-weight: 500;
  margin-left: 0.75rem;
  opacity: 0;
  transition: opacity 150ms;
}
.section-title:hover .section-anchor { opacity: 1; }

/* Inline link to appendix or external detail */
.detail-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--color-oxblood);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid var(--color-oxblood-wash);
  padding-bottom: 2px;
  width: fit-content;
}
.detail-link:hover {
  color: var(--color-oxblood-hover);
  border-bottom-color: var(--color-oxblood);
}
.detail-link::after { content: "→"; }

/* Workplace 6-up grid for use inside a long-scroll section */
.section-workplace-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  margin-top: 1rem;
}
.section-workplace-grid .preface-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}
.section-workplace-grid .preface-grid-icon {
  width: 44px;
  height: 44px;
  stroke-width: 1.5;
}
.section-workplace-grid .preface-grid-label {
  font-size: 0.9375rem;
  line-height: 1.4;
  font-weight: 500;
  color: var(--color-ink);
  max-width: 18ch;
}
@media (max-width: 700px) {
  .section-workplace-grid { grid-template-columns: 1fr 1fr; }
}

/* ───────────────────────────────────────────────────────────
   10. Alternating section bands — subtle warm-paper variation
   ─────────────────────────────────────────────────────────── */

.report-section {
  position: relative;
  isolation: isolate;
}
.report-section--banded::before {
  content: "";
  position: absolute;
  inset: 0;
  margin-inline: calc(50% - 50vw);
  background: var(--color-paper-sunken);
  z-index: -1;
}

/* PE report — preserve .wrap side padding and tighten top rhythm
   so the section-eyebrow + title sit cleanly above the dense bar grids. */
.wrap.report-section {
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 3vw, 2rem) clamp(2rem, 4vw, 3rem);
}
.wrap.report-section + .wrap.report-section {
  border-top: 1px solid var(--color-line);
}

/* ───────────────────────────────────────────────────────────
   11. Section details — collapse-to-summary pattern
   ─────────────────────────────────────────────────────────── */

.section-details {
  margin-top: 1.5rem;
  border-top: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
}
.section-details > summary {
  list-style: none;
  cursor: pointer;
  padding: 0.875rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-ink);
}
.section-details > summary::-webkit-details-marker { display: none; }
.section-details > summary::after {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--color-oxblood-wash);
  color: var(--color-oxblood);
  font-size: 1rem;
  font-weight: 500;
  transition: transform 200ms var(--ease-out-quart, ease);
}
.section-details[open] > summary::after { content: "−"; }
.section-details > summary:hover { color: var(--color-oxblood); }
.section-details-body { padding: 1rem 0 1.5rem; }

/* Body content above a collapsed details block — short list of what's inside */
.section-teaser {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.section-teaser li {
  position: relative;
  padding: 0.375rem 0 0.375rem 1.25rem;
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-ink-secondary);
}
.section-teaser li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.875rem;
  width: 12px;
  height: 1px;
  background: var(--color-oxblood);
}
.section-teaser--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}
@media (max-width: 640px) {
  .section-teaser--cols { grid-template-columns: 1fr; }
}

/* Heatmap toggle inside a details body — give it some space above the list */
.section-details-body > .heatmap-toggle {
  display: inline-flex;
  margin: 0 0 1rem;
}

/* ───────────────────────────────────────────────────────────
   12. Heatmap toggle — CSS-only checkbox + :has() state
   ─────────────────────────────────────────────────────────── */

.heatmap-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
  cursor: pointer;
  user-select: none;
}
.heatmap-toggle input {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--color-line-strong);
  position: relative;
  cursor: pointer;
  transition: background 150ms;
  margin: 0;
}
.heatmap-toggle input::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-paper-raised);
  transition: transform 150ms;
}
.heatmap-toggle input:checked { background: var(--color-oxblood); }
.heatmap-toggle input:checked::before { transform: translateX(14px); }

/* When toggle is on, surface the per-item --temp-color (set inline by the
   adjacency renderer JS). The JS now outputs a brand oxblood gradient. */
body:has(#heatmap-toggle:checked) .adjacency-item {
  background: var(--temp-color, var(--color-paper));
  border-color: color-mix(in oklch, var(--temp-color, var(--color-line)) 60%, var(--color-line));
}
body:has(#heatmap-toggle:checked) .adjacency-item .adjacency-skill,
body:has(#heatmap-toggle:checked) .adjacency-item .adjacency-meta {
  color: var(--color-ink);
}

/* ───────────────────────────────────────────────────────────
   8. Treemap fitting — task containers shrink to fit, tighter type
   ─────────────────────────────────────────────────────────── */

.treemap {
  height: auto;
  min-height: 360px;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
  padding: 12px;
}
.task-container {
  min-width: 0;
  min-height: 180px;
  padding: 10px 12px;
  border-width: 1px;
}
.task-header { margin-bottom: 6px; padding-bottom: 4px; }
.task-title {
  font-size: 0.75rem;
  line-height: 1.25;
  word-break: break-word;
  font-weight: 600;
}
.task-percentage { font-size: 0.6875rem; }
.subtask-container { padding: 5px 7px; }
.subtask-title {
  font-size: 0.6875rem;
  line-height: 1.2;
  word-break: break-word;
  font-weight: 500;
}
.subtask-percentage { font-size: 0.625rem; }

/* Automation chart — tighter label column at 1120px width */
.automation-chart {
  --label-width: clamp(220px, 28%, 300px);
  transform: none;
}
.automation-axis {
  margin-left: calc(var(--label-width) + var(--chart-gap));
  width: calc(100% - var(--label-width) - var(--chart-gap));
  transform: none;
}
.automation-chart::after { display: none; }
.automation-label { padding-right: 14px; }
.automation-subtask { font-size: var(--text-base); }

/* Histogram chart — full width inside container */
.histogram-chart { width: 100%; }
.histogram-density { width: 100%; }

/* Future role design layout — collapse to single column at narrower widths */
@media (max-width: 960px) {
  .future-summary { grid-template-columns: 1fr; }
  .future-layout { grid-template-columns: 1fr; }
}

/* ───────────────────────────────────────────────────────────
   9. More oxblood — table headers, dividers, anchors
   ─────────────────────────────────────────────────────────── */

table { border-collapse: collapse; }
thead th, .detailsTable th {
  background: transparent;
  color: var(--color-ink-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--color-oxblood);
  text-transform: uppercase;
  font-size: var(--text-eyebrow);
  letter-spacing: 0.06em;
  padding: 10px 10px 8px;
  text-align: left;
}
.detailsTable td {
  border-bottom: 1px solid var(--color-line);
  border-left: none;
  border-right: none;
  padding: 8px 10px;
}
.detailsTable tbody tr:last-child td { border-bottom: none; }
.detailsTable tfoot th {
  background: transparent;
  color: var(--color-ink);
  border-top: 1px solid var(--color-oxblood);
  border-bottom: none;
  text-transform: none;
  font-size: var(--text-sm);
  letter-spacing: 0;
  padding-top: 10px;
}

/* Inline anchor links inside body content */
.report-doc a:not([class]),
.report-body a:not([class]) {
  color: var(--color-oxblood);
  text-decoration: none;
  border-bottom: 1px solid var(--color-oxblood-wash);
  padding-bottom: 1px;
}
.report-doc a:not([class]):hover,
.report-body a:not([class]):hover {
  color: var(--color-oxblood-hover);
  border-bottom-color: var(--color-oxblood);
}

/* h3-level subsections within content — oxblood eyebrow rule above */
.report-doc h3,
.report-body h3 {
  position: relative;
  padding-top: 0.5rem;
}

/* Subtle oxblood numeric emphasis */
.report-doc .automation-total,
.report-body .automation-total {
  color: var(--color-oxblood);
  font-weight: 600;
}

/* Adjacency tier title — bigger oxblood differentiation */
.adjacency-group[data-tier="strong"] {
  border-top: 1px solid var(--color-oxblood);
  padding-top: 1rem;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html:has(.report-doc) { scroll-behavior: auto; }
}