/*
 * Folia Library — design tokens + base styles.
 *
 * Desktop ≥1024px only for MVP. Mobile breakpoint deferred.
 * No raw hex outside :root — everything resolves through tokens.
 */

:root {
  /* Color tokens */
  --color-bg:               #fafaf9;  /* slate-50 */
  --color-bg-elevated:      #ffffff;
  --color-fg:               #0f172a;  /* slate-900 */
  --color-muted:            #64748b;  /* slate-500 */
  --color-faint:            #94a3b8;  /* slate-400 */
  --color-border:           #e2e8f0;  /* slate-200 */
  --color-border-strong:    #cbd5e1;  /* slate-300 */
  --color-accent:           #16a34a;  /* green-600 — add-to-workspace verb */
  --color-accent-hover:     #15803d;  /* green-700 */
  --color-accent-bg:        #f0fdf4;  /* green-50 */
  --color-ecv:              #f59e0b;  /* amber-500 — ECV gold */
  --color-validation-ok:    #16a34a;
  --color-validation-warn:  #f59e0b;
  --color-validation-fail:  #dc2626;  /* red-600 */
  --color-validation-muted: #64748b;
  --color-code-bg:          #f1f5f9;  /* slate-100 */

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Sizing */
  --topbar-h: 56px;
  --sidebar-w: 360px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  /* Type scale */
  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 15px;
  --text-lg: 17px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 4px 12px rgba(15, 23, 42, 0.06);
}

/* ─── Reset / base ──────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a {
  color: var(--color-fg);
  text-decoration: none;
}
a:hover { color: var(--color-accent-hover); }

code, pre, .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

button {
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  color: inherit;
}
button:disabled,
button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ─── Top bar ───────────────────────────────────────────────────────── */

.topbar {
  height: var(--topbar-h);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: 0 var(--space-6);
  background: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 50;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--color-fg);
  letter-spacing: -0.01em;
}
.wordmark-mark { font-size: var(--text-lg); }
.wordmark:hover { color: var(--color-accent-hover); }

.crumbs {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
  overflow: hidden;
  white-space: nowrap;
}
.crumb-link {
  color: var(--color-muted);
}
.crumb-link:hover { color: var(--color-fg); }
.crumb-current {
  color: var(--color-fg);
  font-weight: 500;
}
.crumb-sep {
  color: var(--color-faint);
  margin: 0 var(--space-1);
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.cmdk-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 10px;
  font-size: var(--text-xs);
  color: var(--color-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.12s, color 0.12s;
}
.cmdk-chip:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
.cmdk-key {
  font-family: var(--font-mono);
  font-weight: 500;
}

.user-menu {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-muted);
  cursor: pointer;
}

/* ─── Detail grid ───────────────────────────────────────────────────── */

.detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
  gap: var(--space-8);
  padding: var(--space-8) var(--space-6);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
  flex: 1;
}

.detail-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.detail-center {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  min-height: 200px;
}

.detail-sidebar {
  align-self: start;
  position: sticky;
  top: calc(var(--topbar-h) + var(--space-6));
}

/* ─── Sidebar ───────────────────────────────────────────────────────── */

.sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.sidebar-section {
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

.sidebar-section-title {
  margin: 0 0 var(--space-3) 0;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.sidebar-section-body {
  font-size: var(--text-sm);
  color: var(--color-fg);
}

/* kv table */
.kv-table {
  margin: 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  column-gap: var(--space-4);
  row-gap: var(--space-2);
  font-size: var(--text-sm);
}
.kv-key {
  color: var(--color-muted);
  font-weight: 500;
}
.kv-val {
  margin: 0;
  color: var(--color-fg);
  word-break: break-word;
}
.units-val { font-family: var(--font-mono); font-size: 0.92em; }

/* citation */
.citation {
  margin: 0;
  padding: var(--space-3);
  border-left: 2px solid var(--color-border-strong);
  background: var(--color-bg);
  border-radius: var(--radius-sm);
}
.citation p { margin: 0 0 var(--space-2) 0; }
.citation-link { color: var(--color-accent); font-family: var(--font-mono); font-size: var(--text-xs); }

/* mono block */
.mono-block {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-code-bg);
  border-radius: var(--radius-sm);
  overflow-x: auto;
  font-size: var(--text-xs);
}
.mono-block code { font-family: var(--font-mono); }

/* output list */
.output-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); }
.output-item { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.output-item:first-child { border-top: none; padding-top: 0; }
.output-head { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.output-name { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-fg); }
.output-type, .output-units { font-size: var(--text-xs); color: var(--color-muted); }
.output-desc { margin: var(--space-1) 0 0 0; font-size: var(--text-xs); color: var(--color-muted); }

/* reproducibility */
.repro-block { display: flex; flex-direction: column; gap: var(--space-2); }
.repro-row { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-xs); }
.repro-label { color: var(--color-muted); width: 56px; flex-shrink: 0; }
.repro-code {
  font-family: var(--font-mono);
  background: var(--color-code-bg);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  word-break: break-all;
}
.repro-link { color: var(--color-accent); }

/* ─── Depth marker ──────────────────────────────────────────────────── */

.depth-marker {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--color-fg);
  padding: 2px 0;
  font-size: var(--text-sm);
  border-bottom: 1px solid transparent;
  transition: border-color 0.12s, color 0.12s;
}
.depth-marker:hover {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent);
}
.depth-marker-glyph {
  color: var(--color-faint);
  font-size: 0.9em;
}
.depth-marker:hover .depth-marker-glyph { color: var(--color-accent); }
.depth-marker-empty { color: var(--color-faint); font-style: italic; }

.depth-marker-list-block {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.depth-marker-item {
  display: block;
}

.depth-marker-list { display: inline; }
.depth-marker-sep { color: var(--color-faint); }

/* ─── Validation badge ──────────────────────────────────────────────── */

.validation-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.validation-glyph { font-weight: 600; }

.validation-ok    { color: var(--color-validation-ok);    border-color: var(--color-validation-ok); background: rgba(22, 163, 74, 0.06); }
.validation-warn  { color: var(--color-validation-warn);  border-color: var(--color-validation-warn); background: rgba(245, 158, 11, 0.06); }
.validation-fail  { color: var(--color-validation-fail);  border-color: var(--color-validation-fail); background: rgba(220, 38, 38, 0.06); }
.validation-muted { color: var(--color-validation-muted); border-color: var(--color-border); background: var(--color-bg); }

/* ─── Action row ────────────────────────────────────────────────────── */

.action-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-6);
  padding: var(--space-4) 0 0 0;
  border-top: 1px solid var(--color-border);
}

.action-primary-slot {
  display: inline-flex;
}
.action-ghost-slot {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

.action-primary {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  font-size: var(--text-sm);
  font-weight: 500;
  border-radius: var(--radius-md);
  transition: background-color 0.12s, color 0.12s;
}
.action-primary-green {
  background: var(--color-accent);
  color: #ffffff;
}
.action-primary-green:hover {
  background: var(--color-accent-hover);
  color: #ffffff;
}
.action-primary-plain {
  background: var(--color-bg);
  color: var(--color-fg);
  border: 1px solid var(--color-border-strong);
}
.action-primary-plain:hover { border-color: var(--color-fg); }

.action-ghost {
  font-size: var(--text-sm);
  color: var(--color-muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.12s, border-color 0.12s;
}
.action-ghost:hover {
  color: var(--color-fg);
  border-bottom-color: var(--color-border-strong);
}

/* ─── Tile grid (browse pages) ──────────────────────────────────────── */

.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--space-4);
}

.tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.tile-thumb {
  aspect-ratio: 16 / 9;
  background: var(--color-code-bg);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.tile-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile-title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-fg);
  margin: 0;
}
.tile-subtitle {
  font-size: var(--text-sm);
  color: var(--color-muted);
  margin: 0;
}
.tile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}
.tile-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.tile-badge-ecv { color: var(--color-ecv); border-color: var(--color-ecv); }

/* ─── Footer ────────────────────────────────────────────────────────── */

.footer {
  flex-shrink: 0;
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
  margin-top: var(--space-8);
}
.footer-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.footer-build code { font-family: var(--font-mono); }
.footer-sep { color: var(--color-faint); }
.footer-link { color: var(--color-muted); }
.footer-link:hover { color: var(--color-fg); }

/* ─── Responsive — below 1024px, stack sidebar under main ───────────── */

@media (max-width: 1023px) {
  .detail-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .detail-sidebar {
    position: static;
  }
}

/* ─── Home page ──────────────────────────────────────────────────────── */

body.home {
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--space-12) var(--space-8);
  background: var(--color-bg);
  color: var(--color-fg);
  font-family: var(--font-sans);
}

.home-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-10);
  gap: var(--space-6);
  flex-wrap: wrap;
}

.home-header h1 {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--color-fg);
}

.home-search-hint {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.home-search-hint:hover { border-color: var(--color-border-strong); color: var(--color-fg); }
.home-search-hint kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-fg);
}

/* Globe explorer (library-globe-homepage/02) — fills the fold above the board.
   Breaks out of the centered column to span the viewport width, then the
   browse board sits below at the normal column width. */
.home-explorer {
  margin: 0 calc(50% - 50vw) var(--space-10);
  height: min(72vh, 720px);
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.home-explorer__map { width: 100%; height: 100%; }
/* Do NOT set display here — folia-view's own :host is `display:flex` and its
   internal map-wrapper relies on that flex context to size to the host. We
   only constrain the box. */
.home-explorer__map folia-view { width: 100%; height: 100%; }

.home-main { display: flex; flex-direction: column; gap: var(--space-10); }

.home-section__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin: 0 0 var(--space-5);
}

.home-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-4);
}

.home-tile {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-6);
  min-height: 140px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.home-tile:hover {
  border-color: var(--color-border-strong);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.home-tile__label {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-fg);
}
.home-tile__count {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-accent);
  align-self: flex-end;
}

.home-supporting {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.home-link {
  text-decoration: none;
  color: var(--color-muted);
  transition: color 0.15s;
}
.home-link:hover { color: var(--color-fg); }
.home-link__count {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-faint);
  margin-left: 2px;
}

.home-footer {
  margin-top: var(--space-12);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-faint);
}
.home-footer code {
  font-family: var(--font-mono);
  background: var(--color-bg-elevated);
  padding: 1px 4px;
  border-radius: 3px;
}
.home-footer a { color: var(--color-muted); }
.home-footer a:hover { color: var(--color-fg); }

/* ─── Center: shared chip primitives ────────────────────────────────── */
/* Chips appear in concept title cards, index meta rows, layer map overlays.
   Keep the base chip neutral; variants (theme/domain/platform/ecv) tint via
   token-derived rgba so they stay on-brand without raw hex outside :root. */

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.chip {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-fg);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  line-height: 1.5;
  white-space: nowrap;
}
.chip.muted {
  color: var(--color-muted);
  background: var(--color-bg);
}
.chip.theme {
  color: var(--color-accent-hover);
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}
.chip.domain {
  color: var(--color-fg);
  background: var(--color-code-bg);
  border-color: var(--color-border-strong);
}
.chip.platform {
  color: var(--color-muted);
  background: var(--color-bg);
  border-color: var(--color-border);
  font-family: var(--font-mono);
  font-size: 10px;
}
.chip.gcos-tier-1 {
  color: var(--color-ecv);
  background: rgba(245, 158, 11, 0.12);
  border-color: var(--color-ecv);
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* ─── Concept center ────────────────────────────────────────────────── */

.concept-center {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.concept-center .title-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.concept-center .title-card h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}

.concept-center .definition {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-fg);
}
.concept-center .definition.muted { color: var(--color-muted); }

.concept-center .canonical-units {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.concept-center .canonical-units .label {
  color: var(--color-muted);
  font-weight: 500;
}
.concept-center .canonical-units .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  color: var(--color-fg);
}
.concept-center .canonical-units .mono.muted { color: var(--color-faint); }
.concept-center .canonical-units .derived {
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-2);
}
.summary-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-fg);
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.summary-card:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--color-fg);
}
.summary-card .count {
  font-family: var(--font-mono);
  font-size: 36px;
  font-weight: 500;
  line-height: 1;
  color: var(--color-accent);
}
.summary-card .label {
  font-size: var(--text-sm);
  color: var(--color-muted);
}

/* ─── Index center (formula card) ───────────────────────────────────── */

.index-center {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.formula-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.formula-name {
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-fg);
  margin: 0;
}
.formula.mono,
code.formula {
  display: block;
  padding: var(--space-4);
  background: var(--color-code-bg);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-xl);
  line-height: 1.6;
  color: var(--color-fg);
  overflow-x: auto;
  white-space: pre-wrap;
}

.band-token {
  font-family: var(--font-mono);
  color: var(--color-accent);
  border-bottom: 1px dotted transparent;
  transition: border-color 0.12s, color 0.12s;
}
.band-token:hover {
  color: var(--color-accent-hover);
  border-bottom-color: var(--color-accent);
}
/* Band-token as a chip in the .bands row keeps the chip frame but swaps the
   color to the accent so it reads as a link. */
.chip.band-token {
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border-color: var(--color-border);
  font-family: var(--font-mono);
}
.chip.band-token:hover {
  border-color: var(--color-accent);
  color: var(--color-accent-hover);
}

.bands {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-faint);
}

.index-center .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ─── Recipe center (run-meta overlay) ──────────────────────────────── */

.recipe-center {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.recipe-center .layer-map-wrap {
  position: relative;
  height: 480px;                   /* fixed — prevents ResizeObserver oscillation */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-code-bg);
  contain: layout size;            /* isolate from outer layout passes */
}
/* No outer rules on folia-view itself — let its :host styles handle sizing. */

.run-meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  max-width: 360px;
  padding: var(--space-3) var(--space-4);
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}
.run-meta .title {
  font-size: var(--text-md);
  font-weight: 600;
  color: var(--color-fg);
  line-height: 1.3;
}
.run-meta .meta {
  font-size: var(--text-xs);
  color: var(--color-muted);
  font-family: var(--font-mono);
}

/* ─── Layer center map overlays ─────────────────────────────────────── */

.layer-center {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.layer-center .layer-map-wrap {
  position: relative;
  height: 480px;                   /* fixed — prevents ResizeObserver oscillation */
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-code-bg);
  contain: layout size;            /* isolate from outer layout passes */
}
/* No outer rules on folia-view itself — let its :host styles handle sizing. */

.overlay {
  position: absolute;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  z-index: 2;
  pointer-events: none;
}
.overlay > * { pointer-events: auto; }
.overlay.top-left    { top: var(--space-3); left: var(--space-3); }
.overlay.top-right   { top: var(--space-3); right: var(--space-3); }
.overlay.bottom-left { bottom: var(--space-3); left: var(--space-3); }
.overlay .chip {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(4px);
}

/* ─── MinimalKV center (vocabulary primitives) ──────────────────────── */

.minimal-kv-center {
  display: flex;
  justify-content: center;
}
.kv-card {
  width: 100%;
  max-width: 720px;
  padding: var(--space-8);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.kv-card h1 {
  margin: 0;
  font-size: var(--text-2xl);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-fg);
}
.kv-card .description {
  margin: 0;
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--color-muted);
}
/* The KV table inside a kv-card renders as a real <table> (not the sidebar
   CSS-grid kv-table); style its rows here without disturbing the sidebar. */
.kv-card table.kv-table {
  display: table;
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}
.kv-card table.kv-table th,
.kv-card table.kv-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-border);
}
.kv-card table.kv-table tr:first-child th,
.kv-card table.kv-table tr:first-child td {
  border-top: none;
}
.kv-card table.kv-table th {
  width: 200px;
  font-weight: 500;
  color: var(--color-muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
}
.kv-card table.kv-table td {
  color: var(--color-fg);
  word-break: break-word;
}
.kv-card .muted { color: var(--color-faint); }

/* ─── Browse pages: header + facets + tiles ─────────────────────────── */

.browse,
.browse-main,
.browse-page {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-8);
  max-width: 1400px;
  margin: 0 auto;
  width: 100%;
}

.browse-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.browse-header h1,
.browse-title {
  margin: 0;
  font-size: var(--text-3xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-fg);
}
.browse-count,
.browse-summary {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}

.browse-empty {
  padding: var(--space-8);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
  background: var(--color-bg-elevated);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

/* Facet rail — index browse uses .facets > .facet-group > .facet-chips */

.facets {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.facet-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.facet-group-label,
.facet-group__title {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}
.facet-chips,
.facet-group__options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Facet chip — used as both <button> (index browse) and <a> (concept browse).
   Targets both naming conventions: facet-chip-active and facet-option--active. */
.facet-chip,
.facet-option {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-fg);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: border-color 0.12s, color 0.12s, background-color 0.12s;
  text-decoration: none;
  font-family: inherit;
}
.facet-chip:hover,
.facet-option:hover {
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}
.facet-chip-active,
.facet-option--active,
.facet-chip[aria-pressed="true"] {
  color: var(--color-accent-hover);
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}

/* Concept browse uses a single horizontal facet-bar (no grouped rail). */
.facet-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Browse tiles (browse pages also use the existing .tile + .tile-grid).
   The .tile-head wrapper is concept-specific; style it without touching the
   shared .tile rules above. */

.browse-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-4);
}
.browse-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-fg);
  text-decoration: none;
  transition: border-color 0.12s, box-shadow 0.12s, transform 0.12s;
}
.browse-tile:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
  color: var(--color-fg);
}

.tile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}
.tile-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.tile-link {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}
.tile-badge-theme {
  color: var(--color-accent-hover);
  border-color: var(--color-accent);
  background: var(--color-accent-bg);
}

/* Browse pagination — both .browse-pagination wrapper and the actual .pager. */

.browse-pagination,
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
}
.pager-link {
  display: inline-flex;
  align-items: center;
  padding: 4px var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-fg);
  background: var(--color-bg-elevated);
  text-decoration: none;
  transition: border-color 0.12s, color 0.12s;
}
.pager-link:hover {
  border-color: var(--color-border-strong);
  color: var(--color-accent-hover);
}
.pager-current {
  color: var(--color-accent-hover);
  background: var(--color-accent-bg);
  border-color: var(--color-accent);
}
.pager-disabled {
  color: var(--color-faint);
  cursor: not-allowed;
}
.pager-status {
  color: var(--color-muted);
  padding: 0 var(--space-2);
}

/* ─── Spotlight (⌘K) ──────────────────────────────────────────────────── */

.spotlight-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10vh;
}
.spotlight-overlay.is-open { display: flex; }
body.spotlight-open { overflow: hidden; }

.spotlight-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.35);
  backdrop-filter: blur(2px);
}

.spotlight-panel {
  position: relative;
  width: min(640px, calc(100vw - 32px));
  max-height: 72vh;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18), 0 4px 12px rgba(15, 23, 42, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: var(--font-sans);
}

.spotlight-input-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.spotlight-input {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-fg);
  padding: 4px 0;
}
.spotlight-input::placeholder { color: var(--color-faint); }
.spotlight-esc {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 2px 8px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-muted);
}

.spotlight-results {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) 0;
}
.spotlight-group { padding: 0 var(--space-3); margin-bottom: var(--space-4); }
.spotlight-group__title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  padding: 0 var(--space-3);
  margin-bottom: var(--space-2);
}
.spotlight-group__seeall {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.spotlight-group__seeall:hover { text-decoration: underline; }

.spotlight-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-fg);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background 0.1s, border-color 0.1s;
}
.spotlight-row:hover,
.spotlight-row.is-active {
  background: var(--color-bg);
  border-left-color: var(--color-accent);
}
.spotlight-row__icon {
  font-family: var(--font-mono);
  color: var(--color-faint);
  font-size: var(--text-sm);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}
.spotlight-row__title {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-fg);
  flex-shrink: 0;
}
.spotlight-row__subtitle {
  font-size: var(--text-xs);
  color: var(--color-muted);
  margin-left: auto;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.spotlight-row--agent { color: var(--color-accent); font-weight: 500; }
.spotlight-row--agent:hover { background: var(--color-accent-bg); border-left-color: var(--color-accent); }
.spotlight-row--recent .spotlight-row__icon { content: '↩'; }

.spotlight-empty {
  padding: var(--space-6) var(--space-5);
  text-align: center;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.spotlight-hint {
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-xs);
  color: var(--color-faint);
  font-family: var(--font-mono);
  display: flex;
  gap: var(--space-4);
  flex-shrink: 0;
  background: var(--color-bg);
}
.spotlight-hint kbd {
  font-family: var(--font-mono);
  padding: 1px 5px;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 3px;
  margin-right: 2px;
  color: var(--color-fg);
}

/* ─── View-yaml side sheet ───────────────────────────────────────────── */

.yaml-sheet {
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.yaml-sheet.is-open { pointer-events: auto; opacity: 1; }

.yaml-sheet__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.18);
}

.yaml-sheet__panel {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(720px, 90vw);
  background: var(--color-bg-elevated);
  border-left: 1px solid var(--color-border);
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.22s ease;
}
.yaml-sheet.is-open .yaml-sheet__panel { transform: translateX(0); }

.yaml-sheet__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
}
.yaml-sheet__path {
  flex: 1;
  color: var(--color-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.yaml-sheet__github {
  color: var(--color-accent);
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
}
.yaml-sheet__github:hover { text-decoration: underline; }
.yaml-sheet__close {
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
}
.yaml-sheet__close:hover { background: var(--color-bg); color: var(--color-fg); }

.yaml-sheet__body {
  flex: 1;
  margin: 0;
  padding: var(--space-5);
  overflow: auto;
  background: var(--color-bg);
}
.yaml-sheet__body code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  color: var(--color-fg);
  white-space: pre;
  display: block;
}

/* ─── Recipe preview (iframe demo / static image) ───────────────────── */

.recipe-preview {
  margin: var(--space-6) 0;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  overflow: hidden;
  background: var(--color-bg);
}
.recipe-preview__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg-elevated);
}
.recipe-preview__label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
}
.recipe-preview__open {
  font-size: var(--text-xs);
  color: var(--color-accent);
  text-decoration: none;
}
.recipe-preview__open:hover { text-decoration: underline; }

.recipe-preview__frame {
  display: block;
  width: 100%;
  height: 560px;
  border: 0;
  background: var(--color-bg);
}

.recipe-preview__image {
  display: block;
  width: 100%;
  height: auto;
  max-height: 600px;
  object-fit: contain;
  background: var(--color-bg);
}

/* ─── Folia-view recipe preview ─────────────────────────────────────── */

.recipe-preview--folia-view .recipe-preview__hint {
  font-size: var(--text-xs);
  color: var(--color-faint);
}
.recipe-preview--folia-view .recipe-preview__hint code {
  font-family: var(--font-mono);
  padding: 1px 4px;
  background: var(--color-bg);
  border-radius: 3px;
}
.recipe-preview__map {
  position: relative;
  /* Aspect ratio that hugs typical recipe default_bbox shapes (~1:1.2 vertical).
   * Capped so it doesn't overflow on wide screens. */
  height: clamp(520px, 70vh, 720px);
  background: var(--color-bg);
  overflow: hidden;
  contain: layout size;            /* isolate from outer layout passes */
}
/* No outer rules on folia-view itself — let its :host styles handle sizing. */

/* ========================================================================
   Globe-homepage wave-2 chrome — 03 color / 04 filters / 05 detail /
   10 search / 12 overlays. (07 AOI ships no styles — uses defaults.)
   ======================================================================== */

/* ===== library-globe-homepage/03 — color-switcher ===== */

/* ─── Color legend (library-globe-homepage/03) ───────────────────────────── */

/* Floating panel that overlays the globe map in the bottom-left corner.
   Positioned inside .home-explorer (position:relative added below). */
.cl-panel {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  min-width: 160px;
  max-width: 220px;
  pointer-events: all;
}

.cl-label {
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-muted);
  cursor: default;
  user-select: none;
}

.cl-select {
  font-size: var(--text-sm);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: var(--color-bg);
  color: var(--color-fg);
  cursor: pointer;
  width: 100%;
  appearance: auto;
}
.cl-select:hover { border-color: var(--color-border-strong); }
.cl-select:focus { outline: 2px solid var(--color-accent); outline-offset: 1px; }

/* Swatch row — flex row of small colour chips. */
.cl-swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: var(--space-1);
}

.cl-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  cursor: default;
}

/* Ensure the home explorer container is relative for absolute legend positioning. */
/* .home-explorer { position: relative; } — de-duped; defined once in the 12 block below */

/* ===== library-globe-homepage/04 — filters ===== */
  position: relative; /* anchor for the filter panel + legend overlays */

/* Filter sidebar (library-globe-homepage/04) — left overlay panel. */
.globe-filters {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  width: 240px;
  max-height: calc(100% - var(--space-6));
  overflow-y: auto;
  padding: var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  font-size: var(--text-sm, 13px);
}
.globe-filters__title {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.globe-filters__section { display: flex; flex-direction: column; gap: var(--space-2); }
.globe-filters__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-fg);
}
.globe-filters__range { display: flex; align-items: center; gap: var(--space-2); }
.globe-filters__date {
  flex: 1;
  min-width: 0;
  padding: 2px 4px;
  font: inherit;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  color: var(--color-fg);
}
.globe-filters__dash { color: var(--color-faint); }
.globe-filters__slider { width: 100%; }
.globe-filters__value { font-size: var(--text-xs); color: var(--color-muted); }
.globe-filters__note { font-size: 11px; color: var(--color-faint); line-height: 1.3; }
.globe-filters__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.globe-filters__checks { display: flex; flex-direction: column; gap: var(--space-1); }

.globe-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  cursor: pointer;
  user-select: none;
}
.globe-chip input { margin: 0; }
.globe-chip__text { text-transform: capitalize; }

.globe-check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.globe-check input { margin: 0; }

/* Result count + empty-state legend (bottom-left). */
.globe-legend {
  position: absolute;
  left: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;
  max-width: 260px;
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  backdrop-filter: blur(6px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
}
.globe-legend__count { color: var(--color-fg); font-weight: 600; }
.globe-legend__empty { margin-top: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.globe-legend__empty-msg { color: var(--color-muted); }
.globe-legend__clear {
  align-self: flex-start;
  padding: 2px 8px;
  font: inherit;
  font-size: var(--text-xs);
  color: var(--color-accent);
  background: var(--color-accent-bg);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.globe-legend__clear:hover { color: #fff; background: var(--color-accent); }

/* ===== library-globe-homepage/05 — item-detail ===== */

/* ─── Item detail panel (idp) — globe homepage right chrome ──────────── */
/* Positioned absolutely inside .home-explorer; shown/hidden with idp--visible.
   Z-index sits above folia-view (z-index: auto) but below spotlight (z-index: 30). */

.idp {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 300px;
  max-height: calc(100% - var(--space-8));
  overflow-y: auto;
  background: rgba(255, 255, 255, 0.97);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  font-size: var(--text-sm);
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0;
}
.idp--visible {
  display: flex;
}

/* Header row: media + headline + pin button */
.idp-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* Modality icon or thumbnail */
.idp-modality-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-muted);
}
.idp-modality-icon svg {
  width: 20px;
  height: 20px;
}
.idp-modality-icon--sar           { color: #D55E00; }
.idp-modality-icon--hyperspectral { color: #E69F00; }
.idp-modality-icon--optical       { color: #56B4E9; }
.idp-modality-icon--lidar         { color: #009E73; }
.idp-modality-icon--thermal       { color: #0072B2; }

.idp-thumbnail {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.idp-headline {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.idp-mission-link,
.idp-dataset-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}
.idp-mission-link:hover { color: var(--color-accent-hover); text-decoration: underline; }
.idp-mission-link--null { color: var(--color-muted); font-weight: 400; }

.idp-dataset-link {
  font-size: var(--text-xs);
  font-weight: 400;
  font-family: var(--font-mono);
  color: var(--color-muted);
}
.idp-dataset-link:hover { color: var(--color-accent-hover); }
.idp-dataset-link--null { text-decoration: none; }

/* Pin button */
.idp-pin-btn {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-muted);
  cursor: pointer;
  padding: 0;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.idp-pin-btn:hover {
  background: var(--color-bg);
  color: var(--color-fg);
  border-color: var(--color-border-strong);
}
.idp-pin-btn--active {
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

/* Badges row */
.idp-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.idp-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: 600;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.idp-badge--modality   { background: var(--color-code-bg); color: var(--color-fg); border: 1px solid var(--color-border); }
.idp-badge--license.idp-badge--open   { background: var(--color-accent-bg); color: var(--color-accent); border: 1px solid var(--color-accent); }
.idp-badge--license.idp-badge--nc     { background: rgba(245, 158, 11, 0.1); color: #b45309; border: 1px solid #fbbf24; }
.idp-badge--license.idp-badge--gated  { background: rgba(220, 38, 38, 0.08); color: #b91c1c; border: 1px solid #fca5a5; }

/* Metadata rows */
.idp-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.idp-row {
  display: flex;
  gap: var(--space-3);
  padding: 3px 0;
  font-size: var(--text-sm);
  align-items: baseline;
}
.idp-row__key {
  flex: 0 0 80px;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.idp-row__val {
  flex: 1 1 auto;
  color: var(--color-fg);
  overflow-wrap: anywhere;
}
.idp-location {
  font-style: italic;
  color: var(--color-muted);
}
.idp-aoi-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-2);
  background: var(--color-accent-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* CTAs */
.idp-ctas {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
}
.idp-cta {
  display: block;
  text-align: center;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.idp-cta--primary {
  background: var(--color-accent);
  color: #fff;
  border: 1px solid var(--color-accent);
}
.idp-cta--primary:hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #fff;
}
.idp-cta--secondary {
  background: transparent;
  color: var(--color-fg);
  border: 1px solid var(--color-border);
}
.idp-cta--secondary:hover {
  background: var(--color-bg);
  border-color: var(--color-border-strong);
  color: var(--color-fg);
}

/* ===== library-globe-homepage/10 — search ===== */
/* Header search bar (library-globe-homepage/10) — always-visible pill that
   opens the spotlight overlay on click. Collapses to icon-only on narrow. */
.home-search-bar {
  flex: 1;
  max-width: 480px;
}
.home-search-bar__field {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-muted);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.home-search-bar__field:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-sm);
  color: var(--color-fg);
}
.home-search-bar__field:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}
.home-search-bar__icon {
  flex-shrink: 0;
  color: var(--color-faint);
}
.home-search-bar__placeholder {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.home-search-bar__kbd {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: 1px 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  color: var(--color-fg);
  flex-shrink: 0;
}
/* Narrow screens: hide placeholder text + kbd hint, keep icon */
@media (max-width: 600px) {
  .home-search-bar { max-width: 40px; }
  .home-search-bar__placeholder,
  .home-search-bar__kbd { display: none; }
  .home-search-bar__field { padding: var(--space-2); justify-content: center; }
}

/* Spotlight result-type badge (library-globe-homepage/10) — small coloured
   pill shown left of action-kind in the result row hint area. */
.spotlight-type-badge {
  font-size: var(--text-xs);
  padding: 1px 6px;
  border-radius: 99px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-muted);
  flex-shrink: 0;
  text-transform: lowercase;
}
/* Action-kind hint shown in the bottom footer bar of the panel */
.spotlight-hint-action {
  color: var(--color-accent);
  font-weight: 500;
}


/* ===== library-globe-homepage/12 — layer-tray ===== */
/* Tray trigger bar — sits at the bottom-left of the explorer section. */
.home-explorer__trays {
  position: absolute;
  bottom: var(--space-4);
  left: var(--space-4);
  display: flex;
  gap: var(--space-2);
  z-index: 10;
}
/* Make the explorer a positioning context for the tray trigger. */
.home-explorer { position: relative; }


/* ─── Layer overlay tray (library-globe-homepage/12) ───────────────────── */

/* Sidebar "Layers" tray-open button (sits in the explorer chrome). */
.explorer-tray-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.explorer-tray-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-bg);
}

/* Tray popover — fixed over the explorer at the top-left. */
.layer-tray {
  position: fixed;
  top: 80px;
  left: var(--space-6);
  z-index: 200;
  width: 340px;
  max-height: calc(100vh - 120px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: none;
}
.layer-tray[hidden] { display: none; }

.layer-tray__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.layer-tray__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
  color: var(--color-fg);
}
.layer-tray__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--text-sm);
  padding: var(--space-1);
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.layer-tray__close:hover { color: var(--color-fg); }

.layer-tray__list {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-3) 0;
}

/* Individual layer row */
.layer-tray-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  transition: background 0.1s;
}
.layer-tray-row:hover { background: var(--color-bg); }

.layer-tray-row__icon {
  font-size: var(--text-sm);
  flex-shrink: 0;
  width: 1.25rem;
  text-align: center;
  color: var(--color-muted);
}
.layer-tray-row__name {
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-fg);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.layer-tray-row__note {
  font-size: 10px;
  color: var(--color-muted);
  font-style: italic;
  white-space: nowrap;
  flex-shrink: 0;
}

/* License badges */
.layer-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge--open {
  background: #e6f4ea;
  color: #2e7d32;
  border: 1px solid #a5d6a7;
}
.badge--nc {
  background: #fff8e1;
  color: #f57f17;
  border: 1px solid #ffe082;
}

/* Toggle button */
.layer-tray-row__toggle {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.layer-tray-row__toggle:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.layer-tray-row__toggle--active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.layer-tray-row__toggle--active:hover {
  background: var(--color-accent-hover, var(--color-accent));
  border-color: var(--color-accent-hover, var(--color-accent));
  color: #fff;
}
.layer-tray-row__toggle:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* Active-overlay stacked legend (sub-ticket 12) — opacity + reorder controls. */
.layer-tray__active:empty {
  display: none;
}
.layer-tray__active {
  border-top: 1px solid #e2e8f0;
  margin-top: 8px;
  padding-top: 8px;
}
.layer-tray__active-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 0 0 6px;
}
.overlay-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}
.overlay-legend-row__name {
  flex: 1;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.overlay-legend-row__controls {
  display: flex;
  align-items: center;
  gap: 4px;
}
.overlay-legend-row__opacity {
  width: 72px;
}
.overlay-legend-row__move,
.overlay-legend-row__remove {
  border: 1px solid #cbd5e1;
  background: #fff;
  border-radius: 4px;
  width: 22px;
  height: 22px;
  line-height: 1;
  font-size: 11px;
  cursor: pointer;
  color: #475569;
}
.overlay-legend-row__move:hover:not(:disabled),
.overlay-legend-row__remove:hover {
  background: #f1f5f9;
}
.overlay-legend-row__move:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ========================================================================
   Globe-homepage/06 — time histogram
   A bottom strip below the globe: stacked monthly bars + drag-to-brush.
   ======================================================================== */

/* Outer wrapper — full width, sits directly below .home-explorer. */
.time-histogram-container {
  margin: 0 calc(50% - 50vw);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: var(--space-3) var(--space-4) var(--space-2);
  overflow: hidden;
}

/* Inner strip holds the bars + axis + hint. */
.time-histogram {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  user-select: none;
  cursor: crosshair;
}

/* Bar row — fixed height; bars grow from the bottom. */
.time-histogram__bars {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 56px;
  width: 100%;
}

/* Individual bar — flex column of stacked segments, grows from bottom. */
.time-histogram__bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 2px 2px 0 0;
  overflow: hidden;
  transition: opacity 0.1s;
  min-width: 2px;
  opacity: 0.8;
}
.time-histogram__bar:hover {
  opacity: 1;
  outline: 1px solid rgba(0,0,0,0.25);
}
.time-histogram__bar--selected {
  opacity: 1;
  outline: 2px solid var(--color-accent, #0072B2);
  outline-offset: 1px;
}

/* A coloured segment within a bar (one per modality). */
.time-histogram__seg {
  min-height: 2px;
}

/* X-axis tick labels. */
.time-histogram__axis {
  display: flex;
  gap: 2px;
}
.time-histogram__tick {
  flex: 1;
  font-size: 10px;
  color: var(--color-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  min-width: 2px;
  padding-top: 2px;
}

/* Hint line below the axis. */
.time-histogram__hint {
  font-size: 10px;
  color: var(--color-faint, var(--color-muted));
  text-align: right;
  pointer-events: none;
}

/* Empty state message. */
.time-histogram__empty {
  font-size: var(--text-xs);
  color: var(--color-muted);
  padding: var(--space-2) 0;
  text-align: center;
}

/* ========================================================================
   Globe-homepage/14 — index tray
   NDVI / SAVI / NBR / NDWI → folia-view compute layer.
   ======================================================================== */

.index-tray {
  position: fixed;
  top: 80px;
  left: var(--space-6);
  z-index: 200;
  width: 340px;
  max-height: calc(100vh - 120px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  outline: none;
}
.index-tray[hidden] { display: none; }
.index-tray__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}
.index-tray__title {
  font-size: var(--text-sm);
  font-weight: 600;
  margin: 0;
  color: var(--color-fg);
}
.index-tray__close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-muted);
  font-size: var(--text-sm);
  padding: var(--space-1);
  border-radius: 4px;
  line-height: 1;
  transition: color 0.15s;
}
.index-tray__close:hover { color: var(--color-fg); }
.index-tray__list {
  overflow-y: auto;
  flex: 1;
  padding: var(--space-3) 0;
}
.index-tray-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.index-tray-row:last-child { border-bottom: none; }
.index-tray-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}
.index-tray-row__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-fg);
}
.index-tray-row__formula {
  font-size: 11px;
  color: var(--color-muted);
  font-family: var(--font-mono, ui-monospace, monospace);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index-tray-row__needs {
  font-size: 10px;
  color: var(--color-muted);
}
.index-tray-row__const { color: var(--color-fg); }
.index-tray-row__note { font-style: italic; }
.index-tray-row__apply {
  flex-shrink: 0;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: 500;
  border-radius: 5px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-fg);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  white-space: nowrap;
}
.index-tray-row__apply:hover:not(:disabled) {
  border-color: var(--color-accent);
  color: var(--color-accent);
}
.index-tray-row__apply[aria-pressed="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
}
.index-tray-row__apply:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

/* ========================================================================
   Globe-homepage/15 — use-case wizard + themes panel
   Bottom-CTA bar, wizard modal, theme grid.
   ======================================================================== */

.bottom-cta {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border-top: 1px solid var(--color-border);
}
.bottom-cta__btn {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
  color: var(--color-fg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.bottom-cta__btn:hover {
  border-color: var(--color-accent);
  background: var(--color-bg-elevated);
}

/* Use-case wizard modal */
.ucw { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; }
.ucw--hidden { display: none; }
.ucw__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.5); }
.ucw__panel {
  position: relative;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  width: min(560px, 95vw);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ucw__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.ucw__title { font-size: var(--text-lg); font-weight: 600; margin: 0; }
.ucw__close { background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: var(--text-lg); line-height: 1; padding: var(--space-1); border-radius: 4px; }
.ucw__body { flex: 1; overflow-y: auto; padding: var(--space-5); }
.ucw__footer { padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); display: flex; gap: var(--space-2); justify-content: flex-end; }
.ucw__btn { padding: var(--space-2) var(--space-4); border-radius: 6px; border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-fg); cursor: pointer; font-size: var(--text-sm); }
.ucw__btn--primary { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.ucw__goal-card { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: 8px; background: var(--color-bg); cursor: pointer; text-align: left; width: 100%; }
.ucw__goal-card--selected { border-color: var(--color-accent); background: var(--color-bg-elevated); }
.ucw__goal-card__icon { font-size: 20px; }
.ucw__goal-card__title { font-size: var(--text-sm); font-weight: 600; color: var(--color-fg); }
.ucw__goal-card__desc { font-size: var(--text-xs); color: var(--color-muted); }
.ucw__goal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); }

/* Themes panel */
.themes-panel {
  position: fixed;
  top: 80px;
  right: var(--space-6);
  z-index: 300;
  width: 400px;
  max-height: calc(100vh - 120px);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.themes-panel[hidden] { display: none; }
.themes-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.themes-panel__title { font-size: var(--text-sm); font-weight: 600; margin: 0; }
.themes-panel__close { background: none; border: none; cursor: pointer; color: var(--color-muted); font-size: var(--text-sm); padding: var(--space-1); border-radius: 4px; }
.themes-panel__grid {
  overflow-y: auto;
  padding: var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2);
}
.theme-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-bg);
  text-decoration: none;
  color: var(--color-fg);
  transition: border-color 0.15s;
}
.theme-card:hover { border-color: var(--color-accent); }
.theme-card__icon { font-size: 20px; }
.theme-card__title { font-size: var(--text-sm); font-weight: 600; }
.theme-card__desc { font-size: var(--text-xs); color: var(--color-muted); }
.theme-card__badge { font-size: 10px; padding: 2px 6px; border-radius: 4px; }
.theme-card__badge--empty { background: var(--color-bg-elevated); color: var(--color-muted); border: 1px solid var(--color-border); }

/* ─── Mission timeline (missions browse) ────────────────────────────── */

.mission-timeline {
  margin: var(--space-6) 0;
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.mission-timeline-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-lg);
  font-weight: 600;
}
.mission-timeline-subtitle {
  margin: 0 0 var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-muted);
}
.mission-timeline svg {
  display: block;
  width: 100%;
  height: auto;
}
.mission-timeline a { text-decoration: none; }
.tl-grid { stroke: var(--color-border); stroke-width: 1; }
.tl-year {
  fill: var(--color-faint);
  font-family: var(--font-mono);
  font-size: 10px;
  text-anchor: middle;
}
.tl-label {
  fill: var(--color-fg);
  font-family: var(--font-sans);
  font-size: 11px;
  text-anchor: end;
}
.mission-timeline a:hover .tl-label { fill: var(--color-accent-hover); }
.tl-bar-operational { fill: var(--color-accent); }
.tl-bar-decommissioned { fill: var(--color-border-strong); }
.mission-timeline a:hover .tl-bar-operational { fill: var(--color-accent-hover); }
.mission-timeline a:hover .tl-bar-decommissioned { fill: var(--color-faint); }
.tl-event { stroke: var(--color-ecv); stroke-width: 2; }
.mission-timeline-legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-muted);
}
.tl-key { display: inline-flex; align-items: center; gap: var(--space-2); }
.tl-swatch {
  display: inline-block;
  width: 14px;
  height: 8px;
  border-radius: 2px;
}
.tl-swatch-operational { background: var(--color-accent); }
.tl-swatch-decommissioned { background: var(--color-border-strong); }
.tl-swatch-event { width: 2px; height: 12px; background: var(--color-ecv); border-radius: 0; }
.mission-timeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  margin-bottom: var(--space-4);
}
.mission-timeline-chips .facet-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.tl-row { transition: transform 0.2s ease; }
.tl-row.tl-hidden { display: none; }

/* ─── Reproducibility Hub (reproduction primitive) ─────────────────────── */

/* Browse: sub-nav to Explore/Compare + validation status legend. */
.repro-subnav {
  display: flex;
  gap: var(--space-3);
  margin: var(--space-3) 0 var(--space-4);
}
.repro-subnav__link {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.repro-subnav__link:hover { border-color: var(--color-accent); background: var(--color-accent-bg); }

.repro-legend {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  font-size: 0.75rem;
  color: var(--color-muted);
}
.repro-legend li { display: flex; align-items: center; gap: var(--space-2); }

/* Detail: card head, paper line, description. */
.repro-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
}
.repro-card__title { font-size: 1.375rem; font-weight: 700; margin: 0; line-height: 1.25; }
.repro-paper { font-size: 0.875rem; color: var(--color-muted); margin: var(--space-2) 0 0; }
.repro-doi { color: var(--color-accent); text-decoration: none; font-family: var(--font-mono); font-size: 0.8125rem; }
.repro-doi:hover { text-decoration: underline; }
.repro-card__desc { font-size: 0.9375rem; color: var(--color-fg); margin: var(--space-3) 0 0; }

/* Detail: interactive locator map. */
.repro-map { margin: var(--space-5) 0; border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.repro-map__canvas { height: 320px; width: 100%; }
.repro-map--empty {
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-faint);
  font-size: 0.875rem;
  background: var(--color-code-bg);
}

/* Detail: tab bar + panels. */
.repro-tabs { margin-top: var(--space-5); }
.repro-tabbar {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}
.repro-tabbar__btn {
  appearance: none;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
}
.repro-tabbar__btn:hover { color: var(--color-fg); }
.repro-tabbar__btn.is-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.repro-tabpanel { padding: var(--space-4) 0; font-size: 0.875rem; }
.repro-tabpanel[hidden] { display: none; }
.repro-empty { color: var(--color-muted); font-size: 0.875rem; margin: var(--space-2) 0; }

.repro-spec__group, .repro-side__group { margin-bottom: var(--space-3); }
.repro-spec__title, .repro-side__title {
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-faint);
  margin-bottom: var(--space-2);
}
.repro-spec__chips, .repro-side__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.repro-spec__src, .repro-validate__ref { font-size: 0.8125rem; color: var(--color-muted); margin-top: var(--space-3); }
.chip.method { background: var(--color-accent-bg); border-color: var(--color-accent); color: var(--color-accent-hover); }
.chip.op-name { font-family: var(--font-mono); font-size: 0.75rem; }

/* Detail: metric assertion table (Validate tab) + leaderboard share styling. */
.repro-metrics, .repro-lb {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.repro-metrics th, .repro-lb th {
  text-align: left;
  font-weight: 600;
  color: var(--color-faint);
  text-transform: uppercase;
  font-size: 0.6875rem;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
}
.repro-metrics td, .repro-lb td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.repro-metric__name, .repro-lb__metric { font-weight: 500; }
.repro-metric__observed, .repro-lb__value { font-family: var(--font-mono); color: var(--color-accent-hover); }
.repro-metric__threshold, .repro-metric__by { color: var(--color-muted); font-family: var(--font-mono); }

/* Detail: lineage + validation history. */
.repro-lineage { list-style: none; margin: 0; padding: 0; }
.repro-lineage li {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px dashed var(--color-border);
}
.repro-lineage__k {
  flex: 0 0 92px;
  font-weight: 600;
  color: var(--color-accent);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.repro-lineage__v { color: var(--color-fg); }
.repro-lineage__note, .repro-history__note {
  font-size: 0.75rem;
  color: var(--color-faint);
  margin-top: var(--space-3);
}
.repro-history { margin-top: var(--space-6); }
.repro-history__title { font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-3); }
.repro-history__list { list-style: none; margin: 0; padding: 0; }
.repro-history__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--color-code-bg);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
}
.repro-history__when { color: var(--color-muted); font-family: var(--font-mono); }
.repro-history__metric { color: var(--color-accent-hover); font-family: var(--font-mono); }

/* Explore view: full-width map + result list. */
.repro-explore { padding: var(--space-6); max-width: 1400px; margin: 0 auto; width: 100%; }
.repro-explore__title { font-size: 1.375rem; font-weight: 700; margin: 0; }
.repro-explore__lede { color: var(--color-muted); font-size: 0.9375rem; margin: var(--space-2) 0 var(--space-4); }
.repro-explore__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-6); }
.repro-explore__map { height: 560px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.repro-explore__list { align-self: start; }
.repro-explore__count { font-size: 0.75rem; color: var(--color-faint); text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: var(--space-2); }
.repro-explore__results { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.repro-explore__results a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: 0.8125rem;
  color: var(--color-fg);
  text-decoration: none;
}
.repro-explore__results a:hover { border-color: var(--color-accent); background: var(--color-accent-bg); }
.repro-explore__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.repro-explore__clear {
  margin-top: var(--space-3);
  font-size: 0.8125rem;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg-elevated);
  cursor: pointer;
}

/* Compare view: leaderboard grouped by theme. */
.repro-compare { padding: var(--space-6); max-width: 1200px; margin: 0 auto; width: 100%; }
.repro-compare__title { font-size: 1.375rem; font-weight: 700; margin: 0; }
.repro-compare__lede { color: var(--color-muted); font-size: 0.9375rem; margin: var(--space-2) 0 var(--space-6); max-width: 68ch; }
.repro-lb__section { margin-bottom: var(--space-8); }
.repro-lb__heading { font-size: 1rem; font-weight: 600; margin: 0 0 var(--space-3); }
.repro-lb__title a { color: var(--color-accent); text-decoration: none; font-weight: 500; }
.repro-lb__title a:hover { text-decoration: underline; }
.repro-lb__na { color: var(--color-faint); font-style: italic; }
.repro-lb__ref code { font-size: 0.75rem; }

@media (max-width: 900px) {
  .repro-explore__layout { grid-template-columns: 1fr; }
  .repro-explore__map { height: 380px; }
}