/* Adapter from the existing data-rich templates to the full-site UI package. */
body {
  background: var(--page) !important;
  color: var(--ink) !important;
  font-family: var(--font-ui) !important;
}

main { min-height: 55vh; }
.container { width: min(var(--content-max), calc(100% - (var(--page-gutter) * 2))) !important; max-width: none !important; }
.container.narrow, .narrow { width: min(820px, calc(100% - (var(--page-gutter) * 2))) !important; }

h1, h2, h3, .scientific-name, .footer-wordmark { color: var(--ink) !important; font-family: var(--font-editorial) !important; }
p, li, dt, dd, label, small { color: var(--muted); }
a { color: var(--lavender-700); }
a:hover { color: var(--gold-700); }
code, pre, .mono, .accession, .coordinate, .sequence-text { font-family: var(--font-mono) !important; }

.page-hero, .compact-page-hero, .pathway-hero {
  position: relative;
  overflow: hidden;
  padding: 52px 0 42px !important;
  color: var(--ink) !important;
  background:
    radial-gradient(circle at 92% 20%, color-mix(in srgb, var(--lavender-300) 34%, transparent), transparent 29%),
    linear-gradient(145deg, var(--surface) 0%, var(--surface-soft) 100%) !important;
  border-bottom: 1px solid var(--line) !important;
}
.page-hero::after, .compact-page-hero::after, .pathway-hero::after {
  content: "" !important;
  position: absolute;
  right: 3%;
  top: 18px;
  width: 190px;
  height: 190px;
  opacity: .28;
  background: url("../portal/illustrations/genome-ring-light.e7f3b8efa5ec.svg") center/contain no-repeat;
  pointer-events: none;
}
html[data-theme="dark"] .page-hero::after,
html[data-theme="dark"] .compact-page-hero::after,
html[data-theme="dark"] .pathway-hero::after { background-image: url("../portal/illustrations/genome-ring-dark.2d5dc1fcab48.svg"); }
.page-hero h1, .compact-page-hero h1, .pathway-hero h1 { max-width: 980px; margin: 8px 0 12px !important; font-size: clamp(34px, 4vw, 58px) !important; line-height: 1.05 !important; letter-spacing: -.035em !important; }
.page-hero p, .compact-page-hero p, .pathway-hero p { max-width: 780px; font-size: 17px !important; line-height: 1.65 !important; }
.eyebrow, .section-label, .record-kicker { color: var(--gold-700) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .11em !important; text-transform: uppercase; }

.section { padding: 48px 0 !important; }
.section-toned { background: var(--page-alt) !important; border-block: 1px solid var(--line) !important; }
.section-header { margin-bottom: 24px !important; }
.section-header h2 { font-size: clamp(24px, 2.4vw, 34px) !important; }

.card-blur, .metric-card, .species-card, .gene-card, .tool-card, .reference-card,
.roadmap-card, .workflow-card, .pathway-card, .tree-card, .workbench-card,
.empty-state, .data-tile, .filter-panel, .result-panel, .tree-panel,
.organelle-map-card, .organelle-gene-browser, .sequence-evidence-card {
  color: var(--ink) !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
}
.card-blur:hover, .species-card:hover, .gene-card:hover, .tool-card:hover,
.reference-card:hover, .pathway-card:hover, .tree-card:hover {
  border-color: var(--gold-300) !important;
  box-shadow: var(--shadow-md) !important;
  transform: translateY(-2px) !important;
}
.card-blur::before, .card-blur::after, .species-card::before, .species-card::after,
.gene-card::before, .gene-card::after, .tool-card::before, .tool-card::after { content: none !important; }

.btn { min-height: 42px !important; padding: 0 17px !important; border-radius: var(--radius-sm) !important; box-shadow: none !important; font-weight: 700 !important; }
.btn-primary { color: var(--reverse-ink) !important; background: var(--lavender-900) !important; border: 1px solid var(--lavender-900) !important; }
.btn-primary:hover { background: var(--gold-700) !important; border-color: var(--gold-700) !important; }
.btn-soft, .btn-ghost { color: var(--ink) !important; background: var(--surface) !important; border: 1px solid var(--line-strong) !important; }
.btn-soft:hover, .btn-ghost:hover { background: var(--gold-75) !important; border-color: var(--gold-300) !important; }

input, select, textarea, .search-input, .filter-control {
  color: var(--ink) !important;
  background: var(--surface-raised) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--focus) !important; outline-offset: 2px; border-color: var(--focus) !important; }

table { width: 100%; color: var(--ink) !important; background: var(--surface) !important; border-collapse: collapse !important; }
thead th { color: var(--ink-soft) !important; background: var(--surface-soft) !important; border-bottom: 1px solid var(--line-strong) !important; font-size: 12px !important; letter-spacing: .055em; text-transform: uppercase; }
tbody td { color: var(--ink-soft) !important; border-bottom: 1px solid var(--line) !important; }
tbody tr:hover { background: var(--gold-75) !important; }
.table-scroll, .table-wrap { border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; background: var(--surface); }

.status-pill, .evidence-badge, .status-badge { border-radius: 999px !important; box-shadow: none !important; font-weight: 700 !important; }
.status-available, .status-stable, .status-pill.present { color: var(--status-available) !important; }
.status-metadata { color: var(--status-metadata) !important; }
.status-unavailable, .status-reference, .status-pill.absent { color: var(--status-unavailable) !important; }
.status-nd { color: var(--status-nd) !important; }
.status-pill.partial { color: var(--gold-800) !important; }
.evidence-note, .alert-card, .tool-message, .boundary-banner { color: var(--ink-soft) !important; background: var(--surface-soft) !important; border: 1px solid var(--line) !important; border-left: 4px solid var(--gold-600) !important; border-radius: var(--radius-sm) !important; }

.filter-panel { background: var(--surface-soft) !important; }
.pagination-bar { background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; }
.active-filter, .filter-chip { color: var(--lavender-900) !important; background: var(--lavender-75) !important; border-color: var(--lavender-300) !important; }

/* Scientific canvases remain first-class and retain the existing organelle implementation. */
.page-research-view .site-header { position: sticky; top: 0; }
.tree-viewer-shell, .tree-canvas, .pathway-expression-panel, .alignment-viewer,
.sequence-viewer, .organelle-map-stage, .genome-map-stage {
  color: var(--ink) !important;
  background: var(--surface-contrast) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
}
.organelle-map-card, .organelle-gene-browser { overflow: hidden; }
.organelle-map-stage svg, .tree-canvas svg { max-height: none !important; }
.organelle-data-panel { color: var(--ink) !important; background: var(--surface) !important; border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important; }
.organelle-gene-row, .organelle-fact-list div { border-color: var(--line) !important; }
.organelle-gene-row:hover { background: var(--gold-75) !important; }
.tree-toolbar, .viewer-toolbar, .organelle-toolbar, .alignment-toolbar, .heatmap-toolbar { color: var(--ink) !important; background: var(--surface-soft) !important; border-color: var(--line) !important; }
.heatmap-cell:hover { outline: 2px solid var(--focus) !important; outline-offset: 1px; }

html[data-theme="dark"] .page-hero,
html[data-theme="dark"] .compact-page-hero,
html[data-theme="dark"] .pathway-hero { background: radial-gradient(circle at 92% 20%, rgba(117,83,147,.22), transparent 29%), linear-gradient(145deg, var(--surface) 0%, var(--page-alt) 100%) !important; }

@media (max-width: 900px) {
  .page-hero::after, .compact-page-hero::after, .pathway-hero::after { right: -55px; opacity: .16; }
  .organelle-visual-layout { grid-template-columns: 1fr !important; }
}

@media (max-width: 760px) {
  .page-hero, .compact-page-hero, .pathway-hero { padding: 36px 0 30px !important; }
  .section { padding: 36px 0 !important; }
  .card-blur, .metric-card, .species-card, .gene-card, .tool-card, .reference-card,
  .pathway-card, .tree-card, .workbench-card, .filter-panel, .result-panel { border-radius: var(--radius-sm) !important; }
}

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