/* ============================================
   ProtoBible Developer Spec — Styles
   Storybook-style docs with light/dark themes
   ============================================ */

/* --- Font Faces --- */
@font-face {
  font-family: 'Codec Cold Heavy';
  src: url('fonts/CodecColdHeavy-Bold.woff2') format('woff2'),
       url('fonts/CodecColdHeavy-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Diagramm';
  src: url('fonts/Diagramm-Regular.woff2') format('woff2'),
       url('fonts/Diagramm-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Diagramm';
  src: url('fonts/Diagramm-Bold.woff2') format('woff2'),
       url('fonts/Diagramm-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  ascent-override: 90%;
  descent-override: 22%;
  line-gap-override: 0%;
}

/* --- Layout Variables (theme-independent) --- */
:root {
  --nav-width: 260px;
  --max-content: 960px;
  --transition-speed: 0.2s;
}

/* --- Wireframe color tokens (theme-aware, used by hero/home schematics) --- */
[data-theme="dark"] {
  --wf-canvas: #080D16;
  --wf-accent: #d35a3c;
  --wf-accent-fade: rgba(211, 90, 60, 0);
  --wf-surface: #141B1F;
  --wf-surface-2: #3A474F;
  --wf-text: #EBF0F2;
  --wf-text-dim: rgba(235, 240, 242, 0.55);
  --wf-orange: #FFA014;
  --wf-ai-1: #7C6CAD;
  --wf-ai-2: #4A8FB8;
}
[data-theme="light"] {
  --wf-canvas: #FFFFFF;
  --wf-accent: #d35a3c;
  --wf-accent-fade: rgba(211, 90, 60, 0);
  --wf-surface: #F5EBDB;
  --wf-surface-2: #EBF0F2;
  --wf-text: #252F35;
  --wf-text-dim: rgba(37, 47, 53, 0.6);
  --wf-orange: #FFA014;
  --wf-ai-1: #7C6CAD;
  --wf-ai-2: #4A8FB8;
}

/* --- Dark Theme (default) --- */
[data-theme="dark"] {
  --spec-bg: #0A0E14;
  --spec-surface: #121820;
  --spec-border: #1E2A3A;
  --spec-accent: #4A9EFF;
  --spec-dim: #3A4A5C;
  --spec-accent-bg: rgba(74,158,255,0.08);
  --spec-accent-code: rgba(74,158,255,0.08);
  --spec-hover: rgba(255,255,255,0.04);
  --text-primary: #FFFFFF;
  --text-secondary: rgba(255,255,255,0.7);
  --text-tertiary: rgba(255,255,255,0.5);
  --spec-wireframe-bg: #0D1117;
  --spec-wireframe-border: #2A3A4E;
  --spec-wireframe-fill: #162030;
  --spec-wireframe-text: #8B9BB0;
  --spec-wireframe-image: linear-gradient(135deg, #1a2a40, #0f1a28);
  --spec-success: #3FB950;
  --spec-warning: #D29922;
  --spec-danger: #F85149;
  --swatch-border: rgba(255,255,255,0.1);
  --dot-bg: rgba(255,255,255,0.3);
  --dot-active: white;
  --pill-bg: rgba(255,255,255,0.1);
  --callout-info-bg: rgba(74,158,255,0.08);
  --callout-warning-bg: rgba(210,153,34,0.08);
  --callout-danger-bg: rgba(248,81,73,0.08);
  --badge-token-bg: rgba(74,158,255,0.15);
  --badge-mobile-bg: rgba(63,185,80,0.15);
  --badge-tablet-bg: rgba(210,153,34,0.15);
  --tr-hover: rgba(255,255,255,0.02);
  --scrollbar-track: var(--spec-surface);
  --scrollbar-thumb: var(--spec-border);
  --hamburger-color: var(--text-secondary);
}

/* --- Light Theme --- */
[data-theme="light"] {
  --spec-bg: #FFFFFF;
  --spec-surface: #F8F9FA;
  --spec-border: #DCE4E8;
  --spec-accent: #055F96;
  --spec-dim: #7A8B94;
  --spec-accent-bg: rgba(5,95,150,0.06);
  --spec-accent-code: rgba(5,95,150,0.06);
  --spec-hover: rgba(0,0,0,0.03);
  --text-primary: #252F35;
  --text-secondary: rgba(37,47,53,0.7);
  --text-tertiary: rgba(37,47,53,0.5);
  --spec-wireframe-bg: #F3F5F7;
  --spec-wireframe-border: #CFD9DD;
  --spec-wireframe-fill: #EBF0F2;
  --spec-wireframe-text: #556570;
  --spec-wireframe-image: linear-gradient(135deg, #DCE4E8, #CFD9DD);
  --spec-success: #2D7D2D;
  --spec-warning: #8A6D00;
  --spec-danger: #C53030;
  --swatch-border: rgba(0,0,0,0.1);
  --dot-bg: rgba(0,0,0,0.2);
  --dot-active: var(--text-primary);
  --pill-bg: rgba(0,0,0,0.06);
  --callout-info-bg: rgba(5,95,150,0.06);
  --callout-warning-bg: rgba(138,109,0,0.06);
  --callout-danger-bg: rgba(197,48,48,0.06);
  --badge-token-bg: rgba(5,95,150,0.1);
  --badge-mobile-bg: rgba(45,125,45,0.1);
  --badge-tablet-bg: rgba(138,109,0,0.1);
  --tr-hover: rgba(0,0,0,0.02);
  --scrollbar-track: #F3F5F7;
  --scrollbar-thumb: #CFD9DD;
  --hamburger-color: var(--text-primary);
}

/* --- Transitions --- */
body, .nav-sidebar, .main-content, .wireframe, table, th, td, pre, .callout,
.nav-sidebar a, .tab, .badge, .pill, .wf-card, .wf-image, .dots, .dot,
.swatch-box, .token-bar, .radius-preview {
  transition: background-color var(--transition-speed), color var(--transition-speed),
              border-color var(--transition-speed);
}

/* --- Reset --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Diagramm', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background: var(--spec-bg);
  -webkit-font-smoothing: antialiased;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--scrollbar-track); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }

/* --- Navigation Sidebar --- */
.nav-sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: var(--nav-width);
  background: var(--spec-surface);
  border-right: 1px solid var(--spec-border);
  overflow-y: auto;
  padding: 0 0 20px;
  z-index: 100;
}

.nav-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 16px 20px;
  border-bottom: 1px solid var(--spec-border);
  position: sticky;
  top: 0;
  background: var(--spec-surface);
  z-index: 10;
}

.nav-header .logo {
  font-family: 'Codec Cold Heavy', 'Arial Black', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--spec-accent);
  letter-spacing: 0.3px;
}

.nav-header-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.icon-btn:hover { background: var(--spec-hover); color: var(--text-primary); }
.icon-btn .material-symbols-rounded { font-size: 20px; }

.hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--spec-surface);
  color: var(--hamburger-color);
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.hamburger .material-symbols-rounded { font-size: 22px; }

.nav-sidebar .nav-section {
  padding: 16px 20px 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--spec-dim);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav-sidebar a {
  display: block;
  padding: 6px 20px 6px 28px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 13px;
  transition: all 0.15s;
  border-right: 2px solid transparent;
}
.nav-sidebar a:hover { color: var(--text-primary); background: var(--spec-hover); }
.nav-sidebar a.active {
  color: var(--spec-accent);
  background: var(--spec-accent-bg);
  border-right-color: var(--spec-accent);
}

/* --- Main Content --- */
.main-content {
  margin-left: var(--nav-width);
  max-width: var(--max-content);
  padding: 40px 48px 80px;
}

/* --- Headings --- */
h1 {
  font-family: 'Codec Cold Heavy', 'Arial Black', sans-serif;
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: -0.3px;
}
h2 {
  font-family: 'Diagramm', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  margin: 40px 0 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--spec-border);
}
h3 {
  font-family: 'Diagramm', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  margin: 24px 0 12px;
  color: var(--spec-accent);
}

.meta {
  font-size: 12px;
  color: var(--spec-dim);
  margin-bottom: 32px;
}
.meta span { margin-right: 16px; }

p { margin-bottom: 12px; color: var(--text-secondary); }

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 13px;
}
th {
  text-align: left;
  padding: 8px 12px;
  background: var(--spec-surface);
  color: var(--spec-dim);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid var(--spec-border);
}
td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--spec-border);
  color: var(--text-secondary);
}
td code {
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12px;
  color: var(--spec-accent);
  background: var(--spec-accent-code);
  padding: 2px 6px;
  border-radius: 3px;
}
tr:hover td { background: var(--tr-hover); }

/* --- Code blocks --- */
pre {
  background: var(--spec-surface);
  border: 1px solid var(--spec-border);
  border-radius: 6px;
  padding: 16px;
  overflow-x: auto;
  margin: 12px 0 20px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 12px;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- Color swatch --- */
.color-swatch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.color-swatch .swatch {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--swatch-border);
  flex-shrink: 0;
}

/* --- Interactive swatch (token reference) --- */
.swatch-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  position: relative;
  min-width: 56px;
}
.swatch-item:hover .swatch-box {
  transform: scale(1.1);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.swatch-box {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--swatch-border);
  transition: transform 0.15s, box-shadow 0.15s;
}
.swatch-name {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.swatch-hex {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--spec-dim);
}
.swatch-item.copied::after {
  content: 'Copied!';
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--spec-accent);
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  white-space: nowrap;
  animation: fadeUp 0.8s ease forwards;
}
@keyframes fadeUp {
  0% { opacity: 1; transform: translateX(-50%) translateY(0); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-8px); }
}

.palette-row {
  margin-bottom: 20px;
}
.palette-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}
.swatch-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* --- Wireframe container --- */
.wireframe {
  background: var(--spec-wireframe-bg);
  border: 1px solid var(--spec-wireframe-border);
  border-radius: 8px;
  padding: 24px;
  margin: 16px 0 24px;
  position: relative;
}
.wireframe-label {
  position: absolute;
  top: -9px;
  left: 16px;
  background: var(--spec-wireframe-bg);
  padding: 0 8px;
  font-size: 10px;
  font-weight: 700;
  color: var(--spec-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- Wireframe elements --- */
.wf-card {
  background: var(--spec-wireframe-fill);
  border: 1px solid var(--spec-wireframe-border);
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}
.wf-image {
  background: var(--spec-wireframe-image);
  border-bottom: 1px solid var(--spec-wireframe-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--spec-wireframe-text);
  font-size: 10px;
}
.wf-text {
  height: 8px;
  background: var(--spec-wireframe-border);
  border-radius: 2px;
  margin: 4px 0;
}
.wf-text.short { width: 40%; }
.wf-text.medium { width: 65%; }
.wf-text.long { width: 90%; }
.wf-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  color: white;
}
.wf-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}
.wf-button.primary { background: rgba(255,255,255,0.9); color: #000; }
.wf-button.secondary { background: rgba(255,255,255,0.15); color: #fff; }
[data-theme="light"] .wf-button.primary { background: var(--text-primary); color: #fff; }
[data-theme="light"] .wf-button.secondary { background: rgba(0,0,0,0.08); color: var(--text-primary); }

/* --- Side-by-side comparison --- */
.comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin: 16px 0 24px;
}
.comparison .comp-col h4 {
  font-size: 12px;
  font-weight: 600;
  color: var(--spec-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

/* --- Gradient preview --- */
.gradient-preview {
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--spec-wireframe-border);
  margin: 8px 0;
}
.gradient-stops {
  display: flex;
  align-items: center;
  gap: 2px;
  margin: 4px 0;
}
.gradient-stop {
  flex: 1;
  text-align: center;
  font-size: 9px;
  color: var(--spec-dim);
  padding: 2px 0;
  border-top: 2px solid var(--spec-accent);
  position: relative;
}
.gradient-stop .stop-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-secondary);
}

/* --- Tabs --- */
.tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--spec-border);
  margin: 16px 0 0;
}
.tab {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--spec-dim);
  cursor: pointer;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  transition: all 0.15s;
}
.tab:hover { color: var(--text-secondary); }
.tab.active { color: var(--spec-accent); border-bottom-color: var(--spec-accent); }
.tab-content { display: none; padding-top: 16px; }
.tab-content.active { display: block; }

/* --- Callout --- */
.callout {
  padding: 12px 16px;
  border-radius: 6px;
  margin: 12px 0 20px;
  font-size: 13px;
  border-left: 3px solid;
}
.callout.info { background: var(--callout-info-bg); border-color: var(--spec-accent); }
.callout.warning { background: var(--callout-warning-bg); border-color: var(--spec-warning); }
.callout.critical { background: var(--callout-danger-bg); border-color: var(--spec-danger); }

/* --- Badge inline --- */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 700;
}
.badge.token { background: var(--badge-token-bg); color: var(--spec-accent); }
.badge.mobile { background: var(--badge-mobile-bg); color: var(--spec-success); }
.badge.tablet { background: var(--badge-tablet-bg); color: var(--spec-warning); }

/* --- Pill row --- */
.pill-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.pill {
  padding: 4px 12px;
  border-radius: 50px;
  font-size: 11px;
  font-weight: 500;
  background: var(--pill-bg);
  color: var(--text-secondary);
}
.pill.ai {
  background: linear-gradient(135deg, #00ACC1, #5E4D89);
  color: white;
}

/* --- Separator --- */
hr {
  border: none;
  border-top: 1px solid var(--spec-border);
  margin: 32px 0;
}

/* --- Dot indicator --- */
.dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin: 8px 0;
}
.dot {
  height: 6px;
  border-radius: 2px;
  background: var(--dot-bg);
}
.dot.active { width: 20px; background: var(--dot-active); }
.dot.inactive { width: 6px; }

/* --- Token Reference: Spacing bars --- */
.token-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 4px 0;
  font-size: 13px;
}
.token-bar-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-secondary);
  min-width: 100px;
  text-align: right;
}
.token-bar {
  height: 16px;
  background: var(--spec-accent);
  border-radius: 3px;
  opacity: 0.7;
  min-width: 2px;
  transition: width 0.3s;
}
.token-bar-val {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--spec-dim);
}

/* --- Token Reference: Radius preview --- */
.radius-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 6px 0;
}
.radius-preview {
  width: 48px;
  height: 48px;
  background: var(--spec-wireframe-fill);
  border: 2px solid var(--spec-accent);
  opacity: 0.7;
}
.radius-info {
  font-size: 13px;
}
.radius-info code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--spec-accent);
  background: var(--spec-accent-code);
  padding: 2px 6px;
  border-radius: 3px;
}

/* --- Token Reference: Typography sample --- */
.typo-sample {
  padding: 12px 0;
  border-bottom: 1px solid var(--spec-border);
  display: flex;
  align-items: baseline;
  gap: 16px;
}
.typo-sample-text {
  flex: 1;
}
.typo-sample-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--spec-dim);
  white-space: nowrap;
}

/* --- Token Reference: Component token groups --- */
.token-group {
  margin-bottom: 16px;
  border: 1px solid var(--spec-border);
  border-radius: 6px;
  overflow: hidden;
}
.token-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--spec-surface);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  transition: background 0.15s;
}
.token-group-header:hover { background: var(--spec-hover); }
.token-group-header .material-symbols-rounded {
  font-size: 18px;
  color: var(--spec-dim);
  transition: transform 0.2s;
}
.token-group.collapsed .token-group-header .material-symbols-rounded {
  transform: rotate(-90deg);
}
.token-group-body {
  padding: 0;
  max-height: 1000px;
  overflow: hidden;
  transition: max-height 0.3s;
}
.token-group.collapsed .token-group-body {
  max-height: 0;
}
.token-filter {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--spec-border);
  border-radius: 6px;
  background: var(--spec-surface);
  color: var(--text-primary);
  font-family: 'Diagramm', sans-serif;
  font-size: 13px;
  margin-bottom: 16px;
}
.token-filter::placeholder { color: var(--spec-dim); }
.token-filter:focus { outline: none; border-color: var(--spec-accent); }

/* --- Nav: logo & controls (matches HTML structure) --- */
.nav-sidebar .logo {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px 12px;
  font-family: 'Codec Cold Heavy', 'Arial Black', sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--spec-accent);
  letter-spacing: 0.3px;
}
.logo-star { font-size: 18px; }
.logo-spec {
  font-family: 'Diagramm', sans-serif;
  font-size: 10px;
  font-weight: 400;
  color: var(--spec-dim);
  margin-left: 4px;
}
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: none;
  color: var(--text-secondary);
  cursor: pointer;
  border-radius: 6px;
  margin: 0 20px 8px auto;
  transition: all 0.15s;
}
.theme-toggle:hover { background: var(--spec-hover); color: var(--text-primary); }
.theme-toggle .material-symbols-rounded { font-size: 20px; }

.nav-hamburger {
  display: none;
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 200;
  width: 36px;
  height: 36px;
  border: none;
  background: var(--spec-surface);
  color: var(--hamburger-color);
  border-radius: 8px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.nav-hamburger .material-symbols-rounded { font-size: 22px; }

/* --- Wireframe: phone & tablet containers --- */
.wf-phone {
  max-width: 280px;
  margin: 16px auto 24px;
}
.wf-tablet {
  max-width: 520px;
  margin: 16px auto 24px;
}

/* --- Wireframe: header bar --- */
.wf-header {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 12px;
  border-bottom: 1px solid var(--spec-wireframe-border);
}
.wf-icon-sm {
  font-size: 16px;
  color: var(--spec-wireframe-text);
}

/* --- Wireframe: hero area --- */
.wf-hero-area {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 0.75;
  margin: 8px;
}
.wf-hero-gradient {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.wf-hero-gradient.wf-gradient-dark {
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.15) 8%,
    rgba(0,0,0,0.45) 22%, rgba(0,0,0,0.72) 38%,
    rgba(0,0,0,0.90) 52%, rgba(0,0,0,0.97) 62%,
    rgba(0,0,0,1.00) 70%, rgba(0,0,0,1.00) 100%
  );
}
.wf-hero-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 12px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wf-hero-buttons {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

/* --- Wireframe: page dots --- */
.wf-page-dots {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 4px 0;
}
.wf-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--dot-bg);
}
.wf-dot-active {
  width: 24px;
  border-radius: 3px;
  background: var(--dot-active);
}

/* --- Wireframe: section & card row --- */
.wf-section {
  padding: 12px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wf-card-row {
  display: flex;
  gap: 8px;
  overflow: hidden;
}
.wf-card-poster {
  min-width: 80px;
  aspect-ratio: 9/16;
}

/* --- Wireframe: button variants (class name aliases) --- */
.wf-button-primary {
  background: rgba(255,255,255,0.9) !important;
  color: #000 !important;
}
.wf-button-secondary {
  background: rgba(255,255,255,0.15) !important;
  color: #fff !important;
}
[data-theme="light"] .wf-button-primary {
  background: var(--text-primary) !important;
  color: #fff !important;
}
[data-theme="light"] .wf-button-secondary {
  background: rgba(0,0,0,0.08) !important;
  color: var(--text-primary) !important;
}
.wf-button-outline {
  background: var(--pill-bg);
  color: var(--text-secondary);
  border: 1px solid var(--spec-border);
}
.wf-button-active {
  background: var(--spec-accent) !important;
  color: #fff !important;
  border-color: var(--spec-accent) !important;
}

/* --- Wireframe: text override (when used with inline styles) --- */
.wf-text[style] {
  height: auto;
  background: none;
}

/* --- Callout class-name aliases --- */
.callout-info { background: var(--callout-info-bg); border-left-color: var(--spec-accent); }
.callout-warning { background: var(--callout-warning-bg); border-left-color: var(--spec-warning); }

/* --- Token palette --- */
.token-palette { margin: 16px 0; }
.token-palette h3 {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 16px 0 8px;
}
.swatch-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.swatch-color {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  border: 1px solid var(--swatch-border);
}
.swatch-item span {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-tertiary);
}

/* --- Semantic table --- */
.semantic-table td { vertical-align: middle; }
.inline-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--swatch-border);
  vertical-align: middle;
  margin-right: 6px;
}
.table-scroll { overflow-x: auto; margin: 12px 0 20px; }

/* --- Typography samples --- */
.typography-samples { margin: 16px 0; }
.type-sample {
  padding: 12px 0;
  border-bottom: 1px solid var(--spec-border);
}
.type-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--spec-dim);
  margin-bottom: 4px;
}

/* --- Token groups (details/summary) --- */
.token-groups { margin: 16px 0; }
.token-groups details {
  margin-bottom: 8px;
  border: 1px solid var(--spec-border);
  border-radius: 6px;
  overflow: hidden;
}
.token-groups summary {
  padding: 10px 16px;
  background: var(--spec-surface);
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
}
.token-groups summary::before {
  content: '▶';
  font-size: 10px;
  color: var(--spec-dim);
  transition: transform 0.2s;
  display: inline-block;
}
.token-groups details[open] summary::before {
  transform: rotate(90deg);
}
.token-groups summary:hover { background: var(--spec-hover); }
.token-groups table { margin: 0; }
.token-groups .token-subgroup {
  margin: 12px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
}
.token-section-heading {
  margin-top: 24px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.muted { color: var(--text-tertiary); font-weight: 400; font-size: 0.9em; }
.dim { color: var(--spec-dim); }
.array-cell { font-family: 'JetBrains Mono', monospace; font-size: 0.9em; }
.array-cell code { padding: 0 4px; }

/* --- Acceptance criteria callout --- */
.acceptance-criteria {
  background: var(--spec-accent-bg);
  border-left: 3px solid var(--spec-accent);
  padding: 12px 16px;
  border-radius: 4px;
  margin: 16px 0;
}

/* --- Platform mapping callout --- */
.platform-mapping {
  background: var(--spec-surface);
  border: 1px solid var(--spec-border);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 12px 0;
}
.platform-mapping h4 {
  margin: 0 0 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary);
}
.platform-mapping table { margin: 0; font-size: 0.9em; }
.platform-mapping table td { padding: 4px 8px; }

/* --- Hero tablet exploded layered view --- */
.hero-explode-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0;
}
.hero-explode-frame {
  position: relative;
  /* HeroVideoCardTablet: modifier.fillMaxWidth().aspectRatio(1f / heroCarousel.aspectRatioTablet).
     The token stores H/W; inverting gives the CSS W/H ratio. */
  aspect-ratio: calc(1 / var(--t-heroCarousel-aspectRatioTablet));
  border-radius: 8px;
  overflow: hidden;
  background: var(--spec-wireframe-bg);
  border: 1px solid var(--spec-wireframe-border);
}
.hero-explode-frame::after {
  content: attr(data-label);
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 5;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.hero-layer {
  position: absolute;
  top: 0;
  bottom: 0;
  transition: opacity 0.2s;
}
/* Image layer renders the default state — flat extracted gradientBase color.
   In the running app, the actual image (ContentScale.Crop, focal Y 0.35) fills
   this rectangle; we don't fake a portrait. */
.hero-layer-image {
  right: 0;
  width: 70%;
  background: var(--cmp-grad-base, #1c2a32);
  z-index: 1;
}
.hero-layer-image::after {
  content: 'image — 70% width · 16:9 · focal Y 0.35';
  position: absolute;
  bottom: 6px;
  right: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.05em;
}
.hero-layer-gradient {
  left: 0;
  width: 50%;
  z-index: 2;
  background: linear-gradient(
    90deg,
    var(--wf-accent) 0%,
    var(--wf-accent) 60%,
    rgba(38, 60, 84, 0.75) 70%,
    rgba(38, 60, 84, 0.5) 80%,
    rgba(38, 60, 84, 0.25) 90%,
    transparent 100%
  );
}
.hero-layer-content {
  left: 0;
  width: 40%;
  z-index: 3;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hero-layer-content .hl-badge {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hero-layer-content .hl-spacer { flex: 1; }
.hero-layer-content .hl-title {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}
.hero-layer-content .hl-desc {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.3;
  margin-top: 2px;
}
.hero-layer-content .hl-cta {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
.hero-layer-content .hl-cta .hl-btn {
  font-size: 9px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 12px;
}
.hero-layer-content .hl-cta .hl-btn.primary {
  background: rgba(255, 255, 255, 0.92);
  color: #1a2530;
}
.hero-layer-content .hl-cta .hl-btn.secondary {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
}

/* Frame variants — isolate one layer, dim others */
.hero-explode-frame.show-image .hero-layer-gradient,
.hero-explode-frame.show-image .hero-layer-content { opacity: 0.08; }
.hero-explode-frame.show-gradient .hero-layer-image { opacity: 0.18; }
.hero-explode-frame.show-gradient .hero-layer-image::after,
.hero-explode-frame.show-gradient .hero-layer-content { opacity: 0.08; }
.hero-explode-frame.show-content .hero-layer-image { opacity: 0.18; }
.hero-explode-frame.show-content .hero-layer-image::after,
.hero-explode-frame.show-content .hero-layer-gradient { opacity: 0.08; }

/* Caption row beneath each frame */
.hero-explode-caption {
  font-size: 11px;
  color: var(--text-secondary);
  margin-top: 6px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.hero-explode-caption code {
  font-size: 10px;
  white-space: nowrap;
}

/* --- Generic exploded wireframe (legacy / shared) --- */
.wireframe-exploded {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Responsive --- */
@media (max-width: 1200px) {
  .comparison { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-sidebar {
    transform: translateX(-100%);
    transition: transform 0.3s;
  }
  .nav-sidebar.open,
  .nav-sidebar.nav-open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0,0,0,0.3);
  }
  .hamburger, .nav-hamburger { display: flex; }
  .main-content {
    margin-left: 0;
    padding: 60px 16px 60px;
  }
  .swatch-group { gap: 4px; }
  .swatch-box { width: 32px; height: 32px; }
  .swatch-name { font-size: 8px; }
}

/* ===== Screenshot & Wireframe Pair Layouts ===== */
.wireframe-pair {
  display: flex;
  gap: 24px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.wireframe-col {
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.wf-label {
  font-size: 0.8em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--spec-dim);
  margin: 0;
}
.wf-screenshot {
  width: 100%;
  border-radius: var(--spec-radius);
  border: 1px solid var(--spec-border);
  display: block;
}
.inline-screenshot {
  max-width: 300px;
  border-radius: var(--spec-radius);
  border: 1px solid var(--spec-border);
  margin: 12px 0;
  display: block;
}
.wf-hero-img,
.wf-card-img {
  background: var(--spec-border);
  border-radius: 4px;
}
.wf-hero-title {
  font-weight: 700;
  font-size: 1.1em;
  color: #fff;
  margin-bottom: 4px;
}
.wf-hero-desc {
  font-size: 0.8em;
  color: rgba(255,255,255,0.7);
  margin-bottom: 8px;
}
.wf-hero-btn {
  background: #fff;
  color: #000;
  padding: 4px 12px;
  border-radius: 20px;
  display: inline-block;
  font-size: 0.7em;
  width: fit-content;
}
.wf-section-title {
  font-weight: 600;
  font-size: 0.85em;
  margin-bottom: 8px;
}
.wf-row {
  display: flex;
  gap: 8px;
}
.wf-card {
  background: var(--spec-surface);
  border-radius: 4px;
  aspect-ratio: 9/16;
  min-width: 40px;
  flex: 1;
}
.wf-surface {
  background: var(--spec-surface);
}
.wf-dots {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-top: 8px;
}
.wf-dot {
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: rgba(255,255,255,0.3);
}
.wf-dot.active {
  width: 20px;
  background: rgba(255,255,255,1);
}
.wf-nav {
  font-size: 0.65em;
  padding: 4px 8px;
  border-radius: 16px;
  background: var(--spec-surface);
  display: inline-block;
}
.wf-accent {
  background: var(--wf-accent, #1a2a3a);
}

/* ============================================================
   Component visual replicas — themed frames
   ============================================================
   Each .cmp-frame is a self-contained visual rendering of a
   component, with its own theme + viewport context regardless
   of the document theme. Compose with .cmp-grid for layouts.
   ============================================================ */
.cmp-grid {
  display: grid;
  gap: 16px;
  margin: 16px 0 24px;
}
.cmp-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cmp-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cmp-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.cmp-grid.cols-2-1 { grid-template-columns: 2fr 1fr; }

@media (max-width: 900px) {
  .cmp-grid.cols-3, .cmp-grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .cmp-grid.cols-2, .cmp-grid.cols-3, .cmp-grid.cols-4 { grid-template-columns: 1fr; }
}

.cmp-frame {
  background: var(--cmp-canvas);
  border: 1px solid var(--spec-border);
  border-radius: 10px;
  padding: 16px;
  position: relative;
  overflow: hidden;
}
/* Token sources:
   - Dark: SemanticColors dark + heroCarousel defaults (MediathekTokenModels.kt)
   - Light: heroCarousel.copy(borderColor = Color(0x261A1A1A)) etc. */
.cmp-frame[data-mode="dark"] {
  --cmp-canvas: #080D16;                        /* semantic.dark.background.canvas */
  --cmp-text: #EBF0F2;                          /* semantic.dark.text.primary */
  --cmp-text-secondary: #CFD9DD;                /* semantic.dark.text.secondary */
  --cmp-text-tertiary: #A8B5BC;                 /* semantic.dark.text.tertiary */
  --cmp-surface: #3A474F;                       /* semantic.dark.background.surface */
  --cmp-surface-raised: #252F35;                /* semantic.dark.background.surfaceRaised */
  --cmp-surface-sunken: #141B1F;                /* semantic.dark.background.surfaceSunken */
  --cmp-border: rgba(255, 255, 255, 0.15);      /* heroCarousel.borderColor dark */
  --cmp-row-tint: rgba(255, 255, 255, 0.05);    /* MenuDrawer nav row target */
  --cmp-orange: #FFA014;                        /* primitives.colors.brand.orange */
  --cmp-red: #DD2626;                           /* badge.live red */
  /* AI gradient now consumed via --s-ai-gradient-* from partials/component-tokens.css */
  --cmp-grad-base: #1c2a32;                     /* representative extracted gradientBase (dynamic per slide) */
  color: var(--cmp-text);
}
.cmp-frame[data-mode="light"] {
  --cmp-canvas: #FFFFFF;                        /* semantic.light.background.canvas */
  --cmp-text: #252F35;                          /* semantic.light.text.primary */
  --cmp-text-secondary: #556570;
  --cmp-text-tertiary: #7A8B94;
  --cmp-surface: #F5EBDB;                       /* semantic.light.background.surface (warm) */
  --cmp-surface-raised: #FFFFFF;
  --cmp-surface-sunken: #EBF0F2;
  --cmp-border: rgba(26, 26, 26, 0.15);         /* heroCarousel.borderColor light = Color(0x261A1A1A) */
  --cmp-row-tint: rgba(0, 0, 0, 0.05);
  --cmp-orange: #FFA014;
  --cmp-red: #DD2626;
  --cmp-grad-base: #1c2a32;                     /* same extracted color regardless of theme */
  color: var(--cmp-text);
}
.cmp-frame .cmp-tag {
  position: absolute;
  top: 8px; right: 8px;
  z-index: 10;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 8px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.5);
  color: #fff;
  pointer-events: none;
}
.cmp-frame[data-mode="light"] .cmp-tag {
  background: rgba(20, 27, 31, 0.85);
}
.cmp-frame .cmp-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.cmp-frame .cmp-stage.fill { display: block; }
.cmp-frame .cmp-stage.col { flex-direction: column; gap: 12px; align-items: stretch; }

/* ---------- Dimensions callout (prominent aspect-ratio + size block) ---------- */
.dim-callout {
  margin: 16px 0 24px;
  padding: 16px 18px;
  background: var(--spec-accent-bg);
  border-left: 3px solid var(--spec-accent);
  border-radius: 0 8px 8px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 720px) {
  .dim-callout { grid-template-columns: 1fr; }
}
.dim-block { display: flex; gap: 14px; align-items: center; }
.dim-sample {
  flex-shrink: 0;
  background: var(--spec-wireframe-fill);
  border: 1px dashed var(--spec-wireframe-border);
  border-radius: 4px;
}
.dim-sample.mobile {
  width: 60px;                                  /* W:H = 0.75 → 60×80 = portrait 3:4 */
  height: 80px;
}
.dim-sample.tablet {
  width: 152px;                                 /* W:H = 2.54 → 152×60 — landscape */
  height: 60px;
}
.dim-info { font-family: 'JetBrains Mono', monospace; font-size: 11px; line-height: 1.5; color: var(--text-secondary); }
.dim-info strong { color: var(--text-primary); font-size: 12px; display: block; margin-bottom: 2px; }
.dim-info code { font-size: 10px; }
.dim-info .source-cite {
  display: block;
  font-size: 9px;
  margin-top: 4px;
  color: var(--spec-dim);
}

/* Source citation chip — used inline to point at .kt file:line */
.cite {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: rgba(127, 127, 127, 0.08);
  color: var(--text-tertiary);
  padding: 1px 6px;
  border-radius: 3px;
  margin-left: 4px;
  white-space: nowrap;
}

/* ---------- HeroVideoCard mobile replica ---------- */
/* HeroCardShell wrapper: cornerRadius=24dp, 1dp inset border, dark-only shadow */
.cv-hero-mobile {
  position: relative;
  border-radius: var(--t-heroCarousel-cornerRadius);
  overflow: hidden;
  aspect-ratio: var(--t-heroCarousel-aspectRatioMobile);
  width: 100%;
  max-width: 280px;
  margin: 0 auto;
  border: var(--t-heroCarousel-borderWidth) solid var(--t-heroCarousel-borderColor);
}
.cmp-frame[data-mode="dark"] .cv-hero-mobile {
  /* elevation token from heroCarousel; shadow render is dark-only per HeroCardShell.kt:41 */
  box-shadow: 0 var(--t-heroCarousel-elevation) calc(var(--t-heroCarousel-elevation) * 2) rgba(0, 0, 0, 0.6);
}

/* Default background = HeroCardShell's gradientBaseColor (extracted per slide).
   The image (ContentScale.Crop) renders on top in the running app. We render
   only the default state — flat extracted color — so the spec doesn't pretend
   to depict any specific content image. */
.cv-hero-mobile .image {
  position: absolute; inset: 0;
  background-color: var(--cmp-grad-base);
  background-image: var(--cmp-image-url, none);
  background-size: cover;
  background-position: center;
  z-index: 0;
}
/* Apply the same image-url override pattern to .cv-poster so cards can show
   real artwork when a fixture provides imageUrl. */
.cv-poster .image,
.cv-poster::before {
  background-image: var(--cmp-image-url, none);
  background-size: cover;
  background-position: center;
}
/* BtvLogo SVG variant — used in cmp-frames when we want the real logo paths
   instead of the Material Symbol star approximation. Set --logo-accent and
   --logo-text inline on the SVG (or on a parent .cv-topbar). */
.cv-topbar .btv-logo-svg {
  height: 22px;
  width: auto;
}
.cmp-frame[data-mode="dark"] .cv-topbar .btv-logo-svg { --logo-text: #fff; }
.cmp-frame[data-mode="light"] .cv-topbar .btv-logo-svg { --logo-text: #1a1a1a; }
/* Allow the buttongroup container to show overflow chips (Mehr trigger
   shouldn't get clipped if the cmp-frame is narrower than 5 chips). */
.cv-btngroup {
  overflow: visible;
}

/* Badge: top-left, INSIDE padding (16dp). "VIDEO" dark pill. */
.cv-hero-mobile .badge {
  position: absolute; top: 16px; left: 16px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  padding: 4px 9px; border-radius: 999px;
}

/* Bottom gradient zone: anchored bottom, fillWidth, contains content with
   contentTopPadding=140dp (≈ 50% of card height at our render scale).
   The gradient itself (background-image of this box) uses the 8 dark / 7 light
   stops applied to the extracted gradientBase color (we use a dark teal as
   representative example). */
.cv-hero-mobile .grad-zone {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 1;
  /* contentTopPadding=140dp at full size; scaled here so content lands in
     bottom ~45% of the card */
  padding: 50% 16px 16px;
  display: flex; flex-direction: column;
  gap: 4px;
}
/* Gradient fade color is driven by per-slide --cmp-grad-fade-r/g/b custom
   properties (set inline on the cmp-frame). Defaults below match a
   representative dark teal (28,42,50) and a representative warm peach
   (253,215,176) so the rule renders sensibly when no per-slide values
   are supplied.
   Scrim model (HeroContentScrim.kt): the fade band reaches full opacity at
   the anchor = contentTopPadding (140dp) + scrimFadeShift (52dp) = 192dp from
   the zone top — the first headline baseline — and spans scrimFadeHeight
   (240dp) upward, extending 48dp above the zone (so the zone top starts at
   band position 0.2, already slightly tinted). Replica is scaled to a ~350dp
   zone: anchor ≈ 55%, band stops mapped as (pos×240 − 48) / 350. */
.cmp-frame[data-mode="dark"] .cv-hero-mobile .grad-zone {
  --cmp-grad-fade-r: 28; --cmp-grad-fade-g: 42; --cmp-grad-fade-b: 50;
  background: linear-gradient(180deg,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.29) 0%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.45) 7%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.72) 23%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.90) 37%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.97) 47%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 1.00) 55%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 1.00) 100%
  );
}
.cmp-frame[data-mode="light"] .cv-hero-mobile .grad-zone {
  --cmp-grad-fade-r: 253; --cmp-grad-fade-g: 215; --cmp-grad-fade-b: 176;
  background: linear-gradient(180deg,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.04) 0%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.05) 1%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.50) 21%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.82) 37%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 0.95) 47%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 1.00) 55%,
    rgba(var(--cmp-grad-fade-r), var(--cmp-grad-fade-g), var(--cmp-grad-fade-b), 1.00) 100%
  );
}
/* Light-mode title needs a darker fill since the gradient now ends in a warm tone */
.cmp-frame[data-mode="light"] .cv-hero-mobile .title,
.cmp-frame[data-mode="light"] .cv-hero-mobile .eyebrow,
.cmp-frame[data-mode="light"] .cv-hero-mobile .desc { color: #1a1a1a; }
.cmp-frame[data-mode="light"] .cv-hero-mobile .eyebrow { color: #3a3a3a; }

.cv-hero-mobile .eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 400;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 2px;
}
.cv-hero-mobile .title {
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 19px; font-weight: 700;
  line-height: 1.05;
  color: #fff;
  letter-spacing: -0.01em;
}
.cv-hero-mobile .cta {
  align-self: flex-start;
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 5px 12px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 600;
}
.cv-hero-mobile .cta .play {
  font-size: 12px;
  display: inline-block;
}

/* ---------- HeroCardShell replica ----------
   Tokens: heroCarousel.cornerRadius=24dp, borderWidth=1dp,
   borderColor=rgba(255,255,255,0.15) dark / rgba(26,26,26,0.15) light,
   elevation=16dp (dark-only render guard in shell), shadowColor=#000,
   shadowAmbientAlpha=0.5, gap2xs=8dp outer padding for shadow room.
   Background = gradientBaseColor (extracted per slide). */
.cv-shell-outer {
  width: 100%;
  max-width: 248px;                             /* visible card 232 + 8dp pad each side */
  aspect-ratio: var(--t-heroCarousel-aspectRatioMobile);
  margin: 0 auto;
  padding: 8px;                                 /* gap2xs outer padding (not in tokens.json — DesignTokens.spacing.gap2xs) */
  position: relative;
}
.cv-shell {
  position: absolute;
  inset: 8px;
  border-radius: var(--t-heroCarousel-cornerRadius);
  border: var(--t-heroCarousel-borderWidth) solid var(--t-heroCarousel-borderColor);
  background: var(--cmp-grad-base);             /* extracted gradientBase — dynamic per slide */
  overflow: hidden;
}
.cmp-frame[data-mode="dark"] .cv-shell {
  /* elevation + shadowColor from tokens; ambientAlpha=0.5 not exposed in tokens.json */
  box-shadow:
    0 calc(var(--t-heroCarousel-elevation) / 2) var(--t-heroCarousel-elevation) rgba(0, 0, 0, 0.5),
    0 var(--t-heroCarousel-elevation) calc(var(--t-heroCarousel-elevation) * 1.5) rgba(0, 0, 0, 0.4);
}
.cv-shell .slot {
  position: absolute; inset: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.35);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  padding: 8px;
}

/* ---------- CardPoster replica ----------
   Tokens (cardPoster): cornerRadius=16dp, aspectRatio=9/16=0.5625,
   borderColor=rgba(255,255,255,0.15) dark / rgba(26,26,26,0.15) light,
   borderWidth=1dp, shadowElevation=8dp, shadowColor=rgba(0,0,0,0.3),
   bgColor=#141B1F dark / #FFFFFF light,
   fallbackGradientEnd=#080D16 dark / #FFFFFF light,
   fallbackTextColor=#EBF0F2 dark / #252F35 light.
   Tokens (cardSplit, used for fallback title): titleFontSizeSp=16, weight=Medium, lineHeight=20.
   Shadow renders in BOTH modes (no isLightMode guard in CardPoster.kt). */
.cv-poster {
  position: relative;
  aspect-ratio: var(--t-cardPoster-aspectRatio);
  border-radius: var(--t-cardPoster-cornerRadius);
  overflow: hidden;
  border: var(--t-cardPoster-borderWidth) solid var(--t-cardPoster-borderColor);
  background-color: var(--t-cardPoster-bgColor);      /* Image (ContentScale.Crop) renders on top in app */
  background-image: var(--cmp-image-url, none);
  background-size: cover;
  background-position: center;
  box-shadow: 0 calc(var(--t-cardPoster-shadowElevation) / 2) var(--t-cardPoster-shadowElevation) var(--t-cardPoster-shadowColor);
}
.cv-poster.s { width: 96px; }                   /* cardPoster.widthSmall=120dp scaled to fit doc frame */
.cv-poster.m { width: 128px; }                  /* cardPoster.widthMedium=160dp scaled */
.cv-poster.l { width: 160px; }                  /* cardPoster.widthLarge=200dp scaled */

/* Progress bar — progress.barColor + progress.barTrackColor (both component-layer tokens) */
.cv-poster .progress-bar {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: var(--t-progress-barHeight);
  background: var(--t-progress-barTrackColor);
}
.cv-poster .progress-bar::after {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 60%;
  background: var(--t-progress-barColor);
}

/* Fallback (CardPoster.kt:90–117): Brush.linearGradient[bgColor, bgColor*0.8, canvas]
   + DiagrammFontFamily title at cardSplit.titleFontSize/Weight/LineHeight */
.cv-poster.fallback {
  background: linear-gradient(135deg, var(--t-cardPoster-bgColor) 0%, rgba(20, 27, 31, 0.8) 50%, var(--t-cardPoster-fallbackGradientEnd) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;                                /* DesignTokens.spacing.paddingDefault=16dp (not in tokens.json) */
}
.cv-poster.fallback .fallback-title {
  font-family: 'Diagramm', system-ui, sans-serif;
  font-size: var(--t-cardSplit-titleFontSize);
  font-weight: 500;                             /* cardSplit.titleFontWeight=Medium */
  line-height: var(--t-cardSplit-titleLineHeight);
  text-align: center;
  color: var(--t-cardPoster-fallbackTextColor);
}

/* ---------- RowSection (PlaylistRow) replica ----------
   Source: ui/components/sections/RowSection.kt + playlist tokens.
   Column { Text(title) + LazyRow }. Title:
     fontFamily=Diagramm, fontSize=rowTitleFontSizeSp=16sp,
     fontWeight=rowTitleFontWeight=Medium, color=text.primary,
     padding(start=rowHorizontalPadding=16dp, bottom=rowTitleBottomSpacing=8dp).
   LazyRow:
     contentPadding=PaddingValues(horizontal=rowHorizontalPadding=16dp),
     Arrangement.spacedBy(rowItemSpacing=16dp).
   Card width: dynamic on phone (~1.5 cards visible), per cardSize on tablet. */
.cv-rowsection {
  width: 100%;
  background: var(--cmp-canvas);
  padding: 16px 0;
  border-radius: 8px;
}
.cv-rowsection .row-title {
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 16px;
  font-weight: 500;                              /* rowTitleFontWeight = Medium */
  color: var(--cmp-text);
  padding: 0 16px 8px 16px;                      /* start=rowHorizontalPadding bottom=rowTitleBottomSpacing */
  margin: 0;
}
.cv-rowsection .row-track {
  display: flex;
  gap: 16px;                                     /* rowItemSpacing */
  padding: 0 16px;                               /* contentPadding horizontal */
  overflow-x: auto;
  scrollbar-width: none;
}
.cv-rowsection .row-track::-webkit-scrollbar { display: none; }

/* Top10 row variation (CardTop10 with overlap) */
.cv-top10row {
  width: 100%;
  background: var(--cmp-canvas);
  padding: 16px 0;
}
.cv-top10row .row-title {
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 16px; font-weight: 500;
  color: var(--cmp-text);
  padding: 0 16px 8px 16px;
}
.cv-top10row .row-track {
  display: flex;
  align-items: flex-end;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.cv-top10row .row-track::-webkit-scrollbar { display: none; }
.cv-top10row .top10-item {
  position: relative;
  flex: 0 0 auto;
  margin-left: -38px;                            /* posterWidth(160dp)-rankNumOuterOverlap(100dp) at our scale */
  padding-left: 38px;
}
.cv-top10row .top10-item:first-child { margin-left: 0; padding-left: 0; }
.cv-top10row .top10-rank {
  position: absolute;
  left: -10px; bottom: -8px;
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-weight: 900;
  font-size: 110px;                              /* rankNumFontSize=200sp scaled */
  color: transparent;
  -webkit-text-stroke: 3px rgba(255, 255, 255, 0.22);  /* rankNumBorderColorDark */
  line-height: 0.85;
  z-index: 0;
  pointer-events: none;
}
.cmp-frame[data-mode="light"] .cv-top10row .top10-rank {
  -webkit-text-stroke: 3px rgba(20, 27, 31, 0.25);
}

/* HeroCarousel replica — simple wrapper around an inner pager + dots below */
.cv-herocarousel {
  width: 100%;
  display: flex; flex-direction: column;
  gap: 12px;
  align-items: center;
}
.cv-herocarousel .pager {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
}

/* ============================================================
   Button system replica (MediathekButton + ProtoBibleButton)
   ============================================================
   Source:  packages/android/.../ui/components/ProtoBibleButton.kt
   Sizes (mobile, from DesignTokens.button):
     xsmall: height=28dp, paddingX=12dp, paddingY=6dp, fontSize=12sp, fontWeight=Medium, iconSize=14dp
     small:  height=32dp, paddingX=16dp, paddingY=8dp, fontSize=14sp, fontWeight=Normal, iconSize=16dp
     medium: height=40dp, paddingX=20dp, paddingY=10dp, fontSize=16sp, fontWeight=Normal, iconSize=20dp
   Shape: pill (cornerRadiusFull=50%).
   Border: only for ColorScheme.Regular Secondary, not Mediathek.
   For "Mediathek" scheme (used everywhere on home screen):
     Primary: dark bg=rgba(255,255,255,0.75) text=#252F35 / light bg=#252F35 text=#FFFFFF
     Secondary: dark bg=rgba(255,255,255,0.15) text=#EBF0F2 / light bg=rgba(37,47,53,0.10) text=#252F35
     Tertiary: bg=transparent · pressed = base @ 0.10 · text = same as Secondary text
     Overlay: dark bg=rgba(255,255,255,0.50) text=#FFFFFF / light bg=rgba(37,47,53,0.50) text=#FFFFFF
     Disabled: alpha 0.3-0.4 reductions (see source).
   AI gradient (Primary + ButtonFunction.AI):
     dark: linear-gradient(90deg, #0097A7, #4D3F71)
     light: linear-gradient(90deg, #00ACC1, #5E4D89)
     text = ai.textOnBackground.default = #FFFFFF in both modes. */
.cv-btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 6px;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  white-space: nowrap;
  border: none;
  cursor: default;
  user-select: none;
  transition: background-color 0.15s ease, opacity 0.15s ease;
}
.cv-btn .material-symbols-rounded {
  display: inline-block;
  line-height: 1;
}
/* Sizes */
.cv-btn.size-xsmall { height: 28px; padding: 0 12px; font-size: 12px; font-weight: 500; }
.cv-btn.size-xsmall .material-symbols-rounded { font-size: 14px; }
.cv-btn.size-small  { height: 32px; padding: 0 16px; font-size: 14px; font-weight: 400; }
.cv-btn.size-small .material-symbols-rounded { font-size: 16px; }
.cv-btn.size-medium { height: 40px; padding: 0 20px; font-size: 16px; font-weight: 400; }
.cv-btn.size-medium .material-symbols-rounded { font-size: 20px; }

/* Mediathek Primary */
.cmp-frame[data-mode="dark"] .cv-btn.type-primary { background: rgba(255, 255, 255, 0.75); color: #252F35; }
.cmp-frame[data-mode="dark"] .cv-btn.type-primary.state-pressed { background: rgba(255, 255, 255, 0.85); }
.cmp-frame[data-mode="dark"] .cv-btn.type-primary.state-disabled { background: rgba(255, 255, 255, 0.3); color: rgba(37, 47, 53, 0.4); }
.cmp-frame[data-mode="light"] .cv-btn.type-primary { background: #252F35; color: #FFFFFF; }
.cmp-frame[data-mode="light"] .cv-btn.type-primary.state-pressed { background: rgba(37, 47, 53, 0.8); }
.cmp-frame[data-mode="light"] .cv-btn.type-primary.state-disabled { background: rgba(37, 47, 53, 0.3); color: rgba(255, 255, 255, 0.5); }

/* Mediathek Secondary */
.cmp-frame[data-mode="dark"] .cv-btn.type-secondary { background: rgba(255, 255, 255, 0.15); color: #EBF0F2; }
.cmp-frame[data-mode="dark"] .cv-btn.type-secondary.state-pressed { background: rgba(255, 255, 255, 0.25); }
.cmp-frame[data-mode="dark"] .cv-btn.type-secondary.state-disabled { background: rgba(255, 255, 255, 0.08); color: rgba(235, 240, 242, 0.4); }
.cmp-frame[data-mode="light"] .cv-btn.type-secondary { background: rgba(37, 47, 53, 0.10); color: #252F35; }
.cmp-frame[data-mode="light"] .cv-btn.type-secondary.state-pressed { background: rgba(37, 47, 53, 0.15); }
.cmp-frame[data-mode="light"] .cv-btn.type-secondary.state-disabled { background: rgba(37, 47, 53, 0.05); color: rgba(37, 47, 53, 0.4); }

/* Mediathek Tertiary */
.cmp-frame[data-mode="dark"] .cv-btn.type-tertiary { background: transparent; color: #EBF0F2; }
.cmp-frame[data-mode="dark"] .cv-btn.type-tertiary.state-pressed { background: rgba(255, 255, 255, 0.10); }
.cmp-frame[data-mode="dark"] .cv-btn.type-tertiary.state-disabled { color: rgba(235, 240, 242, 0.4); }
.cmp-frame[data-mode="light"] .cv-btn.type-tertiary { background: transparent; color: #252F35; }
.cmp-frame[data-mode="light"] .cv-btn.type-tertiary.state-pressed { background: rgba(37, 47, 53, 0.10); }
.cmp-frame[data-mode="light"] .cv-btn.type-tertiary.state-disabled { color: rgba(37, 47, 53, 0.4); }

/* Mediathek Overlay (always white text on semi-dark bg, used in hero) */
.cmp-frame[data-mode="dark"] .cv-btn.type-overlay { background: rgba(255, 255, 255, 0.50); color: #FFFFFF; }
.cmp-frame[data-mode="dark"] .cv-btn.type-overlay.state-pressed { background: rgba(255, 255, 255, 0.65); }
.cmp-frame[data-mode="light"] .cv-btn.type-overlay { background: rgba(37, 47, 53, 0.50); color: #FFFFFF; }
.cmp-frame[data-mode="light"] .cv-btn.type-overlay.state-pressed { background: rgba(37, 47, 53, 0.65); }

/* AI Primary — gradient bg, white text */
.cmp-frame[data-mode="dark"] .cv-btn.type-ai { background: linear-gradient(90deg, #0097A7, #4D3F71); color: #FFFFFF; }
.cmp-frame[data-mode="light"] .cv-btn.type-ai { background: linear-gradient(90deg, #00ACC1, #5E4D89); color: #FFFFFF; }
.cmp-frame[data-mode="dark"] .cv-btn.type-ai.state-disabled { background: linear-gradient(90deg, #00838F, #6A5A9A); }
.cmp-frame[data-mode="light"] .cv-btn.type-ai.state-disabled { background: linear-gradient(90deg, #B2EBF2, #9F8FC2); }

/* Secondary label (small text below main label) */
.cv-btn .cv-btn-stack { display: flex; flex-direction: column; align-items: center; line-height: 1.1; }
.cv-btn .cv-btn-secondary {
  font-size: 0.72em;
  opacity: 0.7;
  font-weight: 400;
}

/* Full-width helper */
.cv-btn.full { width: 100%; display: flex; }

/* Button matrix table layout */
.btn-matrix {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--cmp-border);
}
.btn-matrix:last-child { border-bottom: none; }
.btn-matrix .btn-row-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--cmp-text-tertiary);
}
.btn-matrix-header {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 1fr;
  gap: 14px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--cmp-border);
}
.btn-matrix-header > div {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--cmp-text-tertiary);
  font-weight: 600;
}

/* ---------- ButtonGroup replica ----------
   Source: ButtonGroupSection.kt + ProtoBibleButton.kt + MediathekColors object.
   Multi-item: Row of MediathekButton Secondary Small + (optional) "Mehr" trigger
     with KeyboardArrowDown trailing icon, opens Material3 DropdownMenu.
   Single AI item: ProtoBibleButton Primary Medium AI, full-width with gradient bg.
   Single non-AI item: MediathekButton Primary Medium, full-width.
   Pill (Secondary Small, Mediathek scheme):
     dark bg = rgba(255,255,255,0.15)         · text = #EBF0F2
     light bg = rgba(37,47,53,0.10)           · text = #252F35
     no border (border only for ColorScheme.Regular Secondary, not Mediathek)
     height = button.small.height = 32dp · paddingX=16dp · fontSize=14sp
     pill shape (50% radius). */
.cv-btngroup {
  display: flex;
  gap: var(--t-buttonGroup-spacing);             /* component-layer buttonGroup.spacing */
  flex-wrap: nowrap;
  align-items: center;
}
.cv-btngroup .pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: var(--t-buttonGroup-height);
  padding: 0 16px;                               /* button.small.paddingX (semantic responsive — not in component layer) */
  border-radius: 999px;                          /* pill shape — buttonGroup.cornerRadius=50 is a Compose % not a CSS px */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px; font-weight: 500;             /* button.small.fontSize / weight (semantic responsive — not migrated) */
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.15);         /* MediathekColors.secondaryBackground (private object — not a token) */
  color: #EBF0F2;                                /* DarkSemanticColors.text.primary */
}
.cmp-frame[data-mode="light"] .cv-btngroup .pill {
  background: rgba(37, 47, 53, 0.10);            /* getMediathekBackgroundColorLight Secondary default */
  color: #252F35;                                /* LightSemanticColors.text.primary */
}
/* "Mehr" trigger — same Secondary Small pill, with KeyboardArrowDown icon */
.cv-btngroup .pill .chevron {
  font-size: 16px;
}

/* AI variant — ProtoBibleButton Primary Medium with AI gradient.
   button.medium semantic responsive (height=40dp, paddingX=20dp, fontSize=16sp) — not migrated.
   ai.gradient.{defaultStart,defaultEnd} migrated via --s-ai-gradient-* (FR-009).
   ai.textOnBackground.default = #FFFFFF in both modes. */
.cv-ai-button {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  width: 100%;
  height: 40px;                                  /* button.medium.height (semantic responsive) */
  padding: 0 20px;                               /* button.medium.paddingX */
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px; font-weight: 600;             /* button.medium.fontSize */
  color: #FFFFFF;                                /* ai.textOnBackground.default */
  background: linear-gradient(90deg, var(--s-ai-gradient-defaultStart) 0%, var(--s-ai-gradient-defaultEnd) 100%);
}
.cv-ai-button .sparkle { font-size: 18px; }

/* Dropdown — Material3 DropdownMenu via DropdownContainer primitive.
   Visually: surface-raised bg, rounded, padded items with brandBody text. */
.cv-dropdown {
  margin-top: 8px;
  background: var(--cmp-surface-raised);
  border: 1px solid var(--cmp-border);
  border-radius: 12px;                           /* radius.md tablet, 12dp mobile */
  padding: 4px;
  width: 220px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}
.cv-dropdown .item {
  padding: 10px 14px;
  border-radius: 6px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;                               /* brandBody base size */
  color: var(--cmp-text);                        /* text.primary */
}
.cv-dropdown .item:hover { background: var(--cmp-row-tint); }

/* ---------- PageIndicator replica ----------
   Source: PageIndicator.kt + heroCarousel tokens.
   indicatorDotSize=6dp · indicatorDotSelectedWidth=20dp · indicatorDotSpacing=3dp
   (horizontal padding each side, so visible gap is 6dp).
   indicatorDotCornerRadius=4dp (rounded rectangle, NOT a circle).
   pageIndicatorInactiveAlpha=0.3.
   pageIndicatorAnimationDurationMs=200.
   activeColor: dark = text.onColor (#FFFFFF), light = text.primary (#252F35).
   inactiveColor: same as active with alpha 0.3.
   NOTE: NOT orange. The brand orange is for ProgressBar fill, not page indicators. */
.cv-pageindicator {
  display: flex; align-items: center;
  justify-content: center;
  padding: 8px 0;                                /* gap2xs vertical */
}
.cv-pageindicator .dot {
  width: var(--t-heroCarousel-indicatorDotSize);
  height: var(--t-heroCarousel-indicatorDotSize);
  margin: 0 var(--t-heroCarousel-indicatorDotSpacing);
  border-radius: var(--t-heroCarousel-indicatorDotCornerRadius);
  /* pageIndicatorAnimationDurationMs not exposed in tokens.json — uses kt default 200 */
  transition: width 200ms ease, background-color 200ms ease;
}
/* pageIndicatorInactiveAlpha=0.3 not exposed in tokens.json — uses kt default */
.cmp-frame[data-mode="dark"] .cv-pageindicator .dot {
  background: rgba(255, 255, 255, 0.3);          /* text.onColor at inactiveAlpha=0.3 */
}
.cmp-frame[data-mode="dark"] .cv-pageindicator .dot.active {
  width: var(--t-heroCarousel-indicatorDotSelectedWidth);
  background: #FFFFFF;                           /* text.onColor full alpha */
}
.cmp-frame[data-mode="light"] .cv-pageindicator .dot {
  background: rgba(37, 47, 53, 0.3);             /* text.primary at inactiveAlpha=0.3 */
}
.cmp-frame[data-mode="light"] .cv-pageindicator .dot.active {
  width: var(--t-heroCarousel-indicatorDotSelectedWidth);
  background: #252F35;                           /* text.primary full alpha */
}

/* ---------- TopBar / BtvLogo replica ----------
   Source: BtvLogo.kt (ui/components/brand) + CollectionScreen.kt (header row).
   Header row: navBarHeight=56dp, Row(start=gapDefault=16dp, end=gap2xs=8dp,
     vertical=center, horizontal=spaceBetween).
   BtvLogo at the home screen passes height=Space5_5=22dp.
     Star (logo_star vector): tint = accentColor (default Orange500=#FFA014,
       dynamic from hero), size = height = 22dp.
     bibel (logo_bibel_text vector): tint = textColor (semanticColors.text.primary),
       width = btvLogo.bibelWidth=52dp × scale, height = h × 0.9 = 19.8dp.
     APP (logo_app_text vector): tint = accentColor, width = btvLogo.appWidth=28dp ×
       scale, height = h × 0.55 = 12.1dp.
     Gaps: btvLogo.starBibelGap=5dp, btvLogo.bibelAppGap=3dp.
   Icon row (right): IconButton(Cast) + IconButton(PersonText), tint =
     headerIconTint = text.primary.
   NOTE: in production these are SVG vector drawables. We approximate with text. */
.cv-topbar {
  position: relative;
  height: 56px;                                  /* navigation.mobile.navBarHeight */
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px 0 16px;                         /* end=gap2xs · start=gapDefault */
}
.cv-topbar.opaque {
  background: var(--cmp-canvas);
  border-bottom: 1px solid var(--cmp-border);
}
.cv-topbar .btv-logo {
  display: inline-flex; align-items: flex-end; gap: 0;
  height: 22px;                                  /* Space5_5 */
}
.cv-topbar .btv-logo .star {
  color: var(--cmp-orange);                      /* accentColor (Orange500 default, dynamic) */
  font-size: 22px;                               /* = height */
  line-height: 1;
}
.cv-topbar .btv-logo .bibel {
  margin-left: 5px;                              /* btvLogo.starBibelGap */
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 19px;                               /* h × 0.9 */
  font-weight: 700;
  color: var(--cmp-text);                        /* text.primary */
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: lowercase;
}
.cv-topbar .btv-logo .app {
  margin-left: 3px;                              /* btvLogo.bibelAppGap */
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 12px;                               /* h × 0.55 */
  font-weight: 700;
  color: var(--cmp-orange);                      /* accentColor */
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  align-self: flex-end;
  padding-bottom: 1px;
}
.cv-topbar .icons {
  display: flex; gap: 4px; align-items: center;
}
.cv-topbar .icons .material-symbols-rounded {
  font-size: 24px;                               /* default IconButton icon size */
  color: var(--cmp-text);                        /* headerIconTint = text.primary */
  padding: 6px;                                  /* IconButton hit area */
}

/* ---------- MenuDrawer replica ----------
   Source: MenuDrawerOverlay.kt + DrawerContent (same file).
   Mobile: full-screen overlay = canvasColor at overlayBgAlpha=0.95.
   Tablet: full-screen black scrim @ tabletScrimAlpha=0.4 +
     right-aligned panel @ tabletDrawerWidth=380dp, fully opaque canvas.
   Login: MediathekButton Primary Medium with leading Login icon, full-width.
   Nav rows: clip(RoundedCornerShape(radius.md=12dp mobile/24dp tablet)),
     bg = menuDrawer.rowBgColor (TARGET: 5%-alpha tint on canvas — currently
     solid in code due to regression in commit 4419c7fe; tracked as S005),
     padding h=gapDefault=16dp v=Space3_5=14dp, icon size=24dp,
     label = body 16sp Medium DiagrammFontFamily, color = text.primary.
   Divider: fillMaxWidth, height=1dp, color = text.primary @ dividerAlpha=0.1.
   "Prototyp" label: 12sp SemiBold DiagrammFontFamily, alpha 0.5,
     letterSpacing = typography.letterSpacingOverline.
   Toggle rows: same as nav rows but vertical padding gap2_5xs=6dp.
   Switch: Material3 standard ~52×32dp, checked track = brand.orange,
     unchecked track = border.strong (dark) / border.default (light). */
.cv-menudrawer {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 19.5;                        /* phone proportions */
  max-width: 220px;
  margin: 0 auto;
  border-radius: 16px;                           /* outer frame for the doc — not a token */
  overflow: hidden;
  border: 1px solid var(--cmp-border);
  background: var(--cmp-canvas);
}
.cv-menudrawer.tablet {
  aspect-ratio: 16 / 11;
  max-width: 460px;
}
.cv-menudrawer .drawer-bg {
  position: absolute; inset: 0;
  background: var(--cmp-canvas);
  opacity: var(--t-menuDrawer-overlayBgAlpha);
}
.cv-menudrawer .drawer-content {
  position: relative; z-index: 1;
  padding: 24px 16px 16px;                       /* gapL top·bottom · gapDefault sides — DrawerContent has gapL padding */
  display: flex; flex-direction: column; gap: 4px;
  height: 100%;
  overflow: hidden;
}
.cv-menudrawer .close {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  font-size: 22px; color: var(--cmp-text);
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
}
/* Login = MediathekButton Primary Medium with leading login icon */
.cv-menudrawer .login-cta {
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  height: 36px;                                  /* approx button.medium scaled */
  padding: 0 16px;
  border-radius: 999px;                          /* pill shape */
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;             /* button.medium.fontWeight */
  margin: 28px 0 16px;                           /* statusbar spacer (navBarHeight) + gapL bottom */
  background: rgba(255, 255, 255, 0.75);         /* MediathekColors.primaryBackground (dark) */
  color: #252F35;                                /* MediathekColors.primaryText */
}
.cv-menudrawer .login-cta .material-symbols-rounded {
  font-size: 16px;
}
.cmp-frame[data-mode="light"] .cv-menudrawer .login-cta {
  background: #252F35;                           /* getMediathekBackgroundColorLight Primary default */
  color: #FFFFFF;                                /* getMediathekContentColorLight Primary */
}
/* Nav row */
.cv-menudrawer .nav-item {
  display: flex; align-items: center; gap: 16px;
  padding: 11px 16px;                            /* h=gapDefault, v=Space3_5 ~14dp scaled */
  border-radius: 12px;                           /* radius.md mobile */
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;             /* body 16sp Medium scaled */
  /* TARGET (post-S005): 5%-alpha tint */
  background: rgba(255, 255, 255, 0.05);
  color: var(--cmp-text);
}
.cmp-frame[data-mode="light"] .cv-menudrawer .nav-item {
  background: rgba(0, 0, 0, 0.05);
}
.cv-menudrawer .nav-item .material-symbols-rounded {
  font-size: 20px;                               /* icon.md=24dp scaled */
  color: var(--cmp-text);                        /* tint = text.primary */
}
/* Divider — text.primary @ dividerAlpha=0.1 */
.cv-menudrawer .divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
  margin: 12px 0;                                /* gapDefault each side ≈ 16dp scaled */
}
.cmp-frame[data-mode="light"] .cv-menudrawer .divider {
  background: rgba(0, 0, 0, 0.1);
}
/* Prototyp label */
.cv-menudrawer .section-label {
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 11px;                               /* label 12sp scaled */
  font-weight: 600;                              /* SemiBold */
  text-transform: none;
  letter-spacing: 0.06em;                        /* overline letterSpacing */
  color: var(--cmp-text);
  opacity: 0.5;                                  /* sectionLabelAlpha */
  padding: 4px 16px 8px;
}
/* Toggle row — slightly smaller vertical padding than nav row */
.cv-menudrawer .toggle-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px;                             /* v=gap2_5xs=6dp scaled */
  border-radius: 12px;                           /* radius.md */
  font-family: 'Diagramm', 'Codec Cold Heavy', system-ui, sans-serif;
  font-size: 13px; font-weight: 500;
  background: rgba(255, 255, 255, 0.05);
  color: var(--cmp-text);
}
.cmp-frame[data-mode="light"] .cv-menudrawer .toggle-row {
  background: rgba(0, 0, 0, 0.05);
}
/* Switch — Material3 standard proportions */
.cv-menudrawer .toggle-row .switch {
  width: 32px; height: 18px;
  background: var(--cmp-surface);                /* border.strong dark / border.default light */
  border-radius: 999px;
  position: relative;
}
.cmp-frame[data-mode="light"] .cv-menudrawer .toggle-row .switch {
  background: rgba(0, 0, 0, 0.18);
}
.cv-menudrawer .toggle-row.on .switch {
  background: var(--cmp-orange);                 /* checked track = brand.orange */
}
.cv-menudrawer .toggle-row .switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 3px;
  width: 14px; height: 14px;
  background: #fff;
  border-radius: 50%;
}
.cv-menudrawer .toggle-row.on .switch::after { left: 15px; }

/* Tablet — scrim + 380dp right panel */
.cv-menudrawer.tablet .scrim {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.4);                /* tabletScrimAlpha */
  z-index: 1;
}
.cv-menudrawer.tablet .panel {
  position: absolute;
  top: 0; bottom: 0; right: 0;
  width: 65%;                                    /* approx 380/580 for the schematic frame */
  background: var(--cmp-canvas);                 /* fully opaque canvas — NOT 0.95 alpha */
  z-index: 2;
  padding: 16px 16px 16px;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 4px;
}
.cv-menudrawer.tablet .drawer-bg { display: none; }
.cv-menudrawer.tablet .drawer-content { display: none; }

/* ============================================================
   Home schematic — accurate structural rendering
   ============================================================ */
.home-schematic {
  position: relative;
  background: var(--wf-canvas);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  border: 1px solid var(--spec-border);
}
.home-schematic.mobile { aspect-ratio: 9 / 19.5; max-width: 280px; }
.home-schematic.tablet { aspect-ratio: 4 / 3; max-width: 540px; }

.hs-bleed {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(180deg,
    var(--wf-accent) 0%,
    rgba(211, 90, 60, 0.72) 30%,
    rgba(211, 90, 60, 0.42) 55%,
    rgba(211, 90, 60, 0.18) 80%,
    transparent 100%
  );
  z-index: 0;
}

.hs-header {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  height: 36px;
}
.hs-header .hs-logo {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--wf-text);
  font-weight: 700;
  font-size: 11px;
}
.hs-header .hs-logo .star { color: var(--wf-orange); font-size: 12px; }
.hs-header .hs-logo .accent { color: var(--wf-orange); }
.hs-header .hs-icons { display: flex; gap: 8px; color: var(--wf-text); font-size: 13px; opacity: 0.85; }

.hs-content {
  position: relative;
  z-index: 1;
  padding: 36px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Hero in schematic — default bg = extracted gradientBaseColor (flat).
   Image fills in production. */
.hs-hero {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.12);
  aspect-ratio: 0.75;
  background: #1c2a32;                           /* representative gradientBase */
}
.hs-hero.tablet { aspect-ratio: 16 / 9; }
.hs-hero.tablet .hs-hero-image-pane {
  position: absolute; right: 0; top: 0; bottom: 0; width: 70%;
  background: #1c2a32;                           /* same flat default bg */
}
.hs-hero.tablet .hs-hero-bridge {
  position: absolute; left: 0; top: 0; bottom: 0; width: 50%;
  background: linear-gradient(90deg, var(--wf-accent) 0%, var(--wf-accent) 60%, transparent 100%);
}
.hs-hero-mobile-grad {
  position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
  background: linear-gradient(180deg, transparent 0%, rgba(58, 36, 24, 0.85) 50%, var(--wf-canvas) 100%);
}
.hs-hero-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 8px 10px 10px;
  display: flex; flex-direction: column; gap: 3px;
}
.hs-hero.tablet .hs-hero-content {
  bottom: auto; top: 0; right: auto;
  width: 40%;
  height: 100%;
  padding: 10px;
  justify-content: space-between;
}
.hs-hero-badge {
  align-self: flex-start;
  background: rgba(0, 0, 0, 0.45);
  color: #fff;
  padding: 1px 7px;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.hs-hero-title {
  color: #fff; font-weight: 700; font-size: 11px; line-height: 1.15;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.hs-hero-desc {
  color: rgba(255, 255, 255, 0.72); font-size: 8px; line-height: 1.3;
}
.hs-hero-btn {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.92); color: #1a2530;
  padding: 3px 9px; border-radius: 10px;
  font-size: 8px; font-weight: 600;
  margin-top: 3px;
}
.hs-hero-dots {
  position: absolute; bottom: -2px; left: 0; right: 0;
  display: flex; gap: 2px; justify-content: center;
  z-index: 4;
}
.hs-hero.tablet .hs-hero-dots { bottom: -10px; }
.hs-hero-dots::before {
  content: ''; display: block;
}
.hs-hero-dot {
  width: 4px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.4);
}
.hs-hero-dot.active { width: 14px; background: #FFFFFF; }   /* text.onColor (active dot is white in dark, dark grey in light — see PageIndicator) */

/* Section titles */
.hs-section-title {
  color: var(--wf-text); font-weight: 600;
  font-size: 9px; padding: 6px 6px 0;
}

/* Card row */
.hs-card-row {
  display: flex; gap: 6px;
  padding: 0 6px;
  overflow: hidden;
}
.hs-poster {
  flex: 0 0 auto;
  width: 52px;
  aspect-ratio: 9 / 16;
  background: #141B1F;                           /* cardPoster.bgColor dark */
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  position: relative;
  overflow: hidden;
}
[data-theme="light"] .hs-poster {
  background: #FFFFFF;                           /* cardPoster.bgColor light */
  border-color: rgba(0, 0, 0, 0.12);
}
.hs-poster::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--wf-orange); width: 65%;
}
.hs-poster.no-progress::after { display: none; }
.hs-poster.landscape { aspect-ratio: 16 / 9; width: 90px; }
.hs-poster.avatar { aspect-ratio: 1; border-radius: 50%; width: 54px; }

/* ButtonGroup row */
.hs-buttongroup {
  display: flex; gap: 5px; padding: 0 6px;
  flex-wrap: nowrap; overflow: hidden;
}
.hs-pill {
  flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.12);
  color: var(--wf-text);
  font-size: 8px; font-weight: 500;
  padding: 4px 10px; border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  white-space: nowrap;
}
[data-theme="light"] .hs-pill {
  background: rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.08);
}
.hs-pill.mehr { background: rgba(255, 255, 255, 0.06); }

/* AI single-item button */
.hs-ai-button {
  display: flex; align-items: center; justify-content: center;
  gap: 6px;
  margin: 0 6px;
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 9px; font-weight: 600;
  color: #fff;
  background: linear-gradient(90deg, var(--wf-ai-1) 0%, var(--wf-ai-2) 100%);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 1px 6px rgba(124, 108, 173, 0.25);
}
.hs-ai-button .sparkle {
  font-size: 10px;
}

/* Top10 row */
.hs-top10-row {
  display: flex; gap: 0; padding: 0 6px 4px;
  align-items: flex-end; overflow: hidden;
}
.hs-top10-item {
  position: relative;
  width: 56px;
  flex: 0 0 auto;
  margin-left: -22px;
}
.hs-top10-item:first-child { margin-left: 0; }
.hs-top10-item .hs-top10-rank {
  position: absolute;
  left: -4px; bottom: -2px;
  font-family: 'Codec Cold Heavy', 'Diagramm', system-ui, sans-serif;
  font-weight: 900;
  font-size: 42px;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
  line-height: 0.9;
  z-index: 0;
}
[data-theme="light"] .hs-top10-item .hs-top10-rank {
  -webkit-text-stroke: 1.5px rgba(20, 27, 31, 0.6);
}
.hs-top10-item .hs-top10-card {
  position: relative; z-index: 1; margin-left: 22px;
  width: 36px; aspect-ratio: 9 / 16;
  background: #141B1F;                           /* cardPoster.bgColor dark */
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
[data-theme="light"] .hs-top10-item .hs-top10-card {
  background: #FFFFFF;
  border-color: rgba(0, 0, 0, 0.1);
}

/* Featured / hero-row section in home — flat extracted gradientBase */
.hs-featured {
  margin: 0 6px;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 11;
  background: #1c2a32;
  position: relative;
}
.hs-featured::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(0, 0, 0, 0.65) 100%);
}
.hs-featured-content {
  position: absolute; left: 0; right: 0; bottom: 6px;
  padding: 0 8px; z-index: 2;
  color: #fff; font-size: 8px; font-weight: 600;
}

/* Annotation labels (offset to the side of the schematic) */
.home-annotated {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 220px;
  gap: 18px;
  align-items: start;
}
.home-annotated.tablet { grid-template-columns: minmax(0, 1fr) 220px; }
.home-annotations {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11px;
}
.home-annotations .ann {
  border-left: 2px solid var(--spec-accent);
  padding: 4px 8px;
  background: var(--spec-accent-bg);
  border-radius: 0 4px 4px 0;
}
.home-annotations .ann strong {
  display: block; color: var(--text-primary); font-weight: 600; font-size: 11px;
}
.home-annotations .ann span {
  color: var(--text-secondary); font-size: 10px;
}

@media (max-width: 768px) {
  .wireframe-pair { flex-direction: column; }
  .wireframe-col { max-width: 100%; }
  .home-annotated, .home-annotated.tablet { grid-template-columns: 1fr; }
}