/* Page components for the field guide, cofactors, library, metabolites and mechanism hero (from the previous theme, relit). */
.dossier-card,
.evidence-card,
.record-aside section {
  background: linear-gradient(145deg, rgba(238, 240, 243, 0.027), transparent 36%), rgba(30, 33, 36, 0.94);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.07);
}
/* Home / live proof of product depth */
.nocturne-hero {
  display: grid;
  grid-template-columns: minmax(0,.72fr) minmax(600px,1.28fr);
  min-height: calc(100svh - 72px);
  align-items: center;
  gap: 24px;
  width: min(100%,1600px);
  padding: 24px 24px;
  margin: auto;
}
/* Community and learning routes */
.community-hero,
.mechanism-hero,
.flashcard-hero,
.library-hero { background: transparent; }
.community-hero h1,
.mechanism-hero h1,
.flashcard-hero h1,
.library-hero h1,
.guide-chapter h2,
.guide-panel h2,
.passport-main h2,
.cofactor-card h2,
.mechanism-intro h2 { font-family: var(--display); font-weight: 400; letter-spacing: -.01em; }
.community-controls,
.guide-toc,
.passport-card,
.cofactor-card,
.notebook-panel,
.mechanism-family,
.mechanism-browser,
.flashcard-workspace,
.library-card { border-color: var(--glass-line); border-radius: 5px; background: linear-gradient(145deg,rgba(238, 240, 243, 0.035),transparent 38%),var(--glass); box-shadow: var(--glass-shadow); backdrop-filter: blur(20px) saturate(1.1); }
.cofactor-grid { align-items: start; }
.cofactor-card { min-height: 0; }
.cofactor-explanation { min-height: 0; }
.passport-structure,
.cofactor-structure,
.molecule-paper,
.chemistry-paper {
  position: relative;
  display: grid;
  min-height: 280px;
  place-items: center;
  overflow: hidden;
  padding: 1rem;
  border: 1px solid rgba(238, 240, 243, 0.255);
  border-radius: 5px;
  background: radial-gradient(circle at 18% 14%,rgba(238, 240, 243, 0.102),transparent 35%),var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.156),inset 0 1px rgba(0, 0, 0, 0.312);
}
.passport-structure img,
.cofactor-structure img,
.molecule-paper img,
.chemistry-paper img { width: 100%; height: 260px; object-fit: contain; }
.passport-structure[data-structure-shape="wide"],
.cofactor-structure[data-structure-shape="wide"] { min-height: 210px; aspect-ratio: 1.65 / 1; }
.passport-structure[data-structure-shape="wide"] img,
.cofactor-structure[data-structure-shape="wide"] img { height: 155px; }
.passport-structure[data-structure-shape="landscape"],
.cofactor-structure[data-structure-shape="landscape"] { min-height: 250px; aspect-ratio: 1.3 / 1; }
.passport-structure[data-structure-shape="tall"],
.cofactor-structure[data-structure-shape="tall"] { min-height: 360px; aspect-ratio: .82 / 1; }
.passport-structure[data-structure-shape="tall"] img,
.cofactor-structure[data-structure-shape="tall"] img { height: 305px; }
.structure-expand { position: absolute; right: .7rem; top: .65rem; z-index: 2; min-height: 36px; padding: .45rem .55rem; border: 1px solid rgba(238,240,243,.25); border-radius: 6px; background: rgba(238, 240, 243, 0.102); color: #4f4854; font: 700 .75rem var(--mono); text-decoration: none; }
.passport-structure figcaption,
.cofactor-structure figcaption { color: var(--muted); font: .75rem var(--mono); text-align: center; }
.guide-chapter { scroll-margin-top: 94px; }
.guide-visual {
  overflow: hidden;
  min-height: 360px;
  margin: 1.5rem 0 2rem;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(145deg,color-mix(in srgb, var(--bio) 4%, transparent),transparent 55%),var(--surface);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.083);
}
.guide-visual svg { width: 100%; min-height: 340px; }
.guide-visual > figcaption { padding: .75rem 1rem; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; }
.guide-compartment-field { fill: color-mix(in srgb, var(--bio) 9%, transparent); stroke: color-mix(in srgb, var(--bio) 35%, transparent); }
.guide-svg-kicker, .guide-svg-note { fill: var(--muted); font: 700 10px var(--mono);  }
.guide-cycle-ring { fill: none; stroke: var(--amber); stroke-width: 4; stroke-dasharray: 2 12; stroke-linecap: round; opacity: .72; }
.guide-cycle-nodes circle { r: 12px; fill: #15171a; stroke: var(--amber); stroke-width: 2; }
.guide-cycle-nodes circle.focus { fill: var(--brand); stroke: var(--line-strong); }
.guide-cycle-labels, .guide-cycle-labels text { fill: var(--ink); font: 600 11px var(--sans); paint-order: stroke; stroke: #1b1e21; stroke-width: 4px; stroke-linejoin: round; }
.guide-cycle-labels .center { font: 400 28px var(--display); }
.guide-cycle-labels .meta { fill: var(--muted); font: 8px var(--mono); }
.guide-entry-arrow { fill: none; stroke: var(--brand); stroke-width: 3; }
.guide-energy-arrow { fill: none; stroke: var(--cyan); stroke-width: 2.5; stroke-dasharray: 4 7; }
.guide-visual-depth { display: grid; grid-template-columns: minmax(260px,.85fr) 1.15fr; align-items: center; padding: 1.2rem; }
.guide-visual-depth figcaption { grid-column: 1 / -1; margin: 1rem -1.2rem -1.2rem; }
.guide-depth-world { position: relative; display: grid; width: min(310px,90%); aspect-ratio: 1; place-items: center; justify-self: center; border: 1px solid color-mix(in srgb, var(--bio) 35%, transparent); border-radius: 50%; background: radial-gradient(circle,color-mix(in srgb, var(--bio) 8%, transparent),transparent 62%); color: var(--ink); font: 400 18px var(--display); }
.guide-depth-world::before, .guide-depth-world::after { position: absolute; inset: 13%; content: ""; border: 1px solid color-mix(in srgb, var(--violet) 28%, transparent); border-radius: 44% 56% 51% 49%; transform: rotate(24deg); }
.guide-depth-world::after { inset: 30%; border-color: color-mix(in srgb, var(--brand) 40%, transparent); transform: rotate(-18deg); }
.guide-depth-world i { position: absolute; width: 9px; height: 9px; border: 1px solid var(--cyan); border-radius: 50%; background: var(--surface); }
.guide-depth-world i:nth-of-type(1) { left: 9%; top: 48%; }
.guide-depth-world i:nth-of-type(2) { right: 12%; top: 30%; }
.guide-depth-world i:nth-of-type(3) { right: 25%; bottom: 13%; }
.guide-depth-world i:nth-of-type(4) { left: 27%; top: 17%; }
.guide-depth-world i:nth-of-type(5) { left: 22%; bottom: 23%; }
.guide-depth-world i:nth-of-type(6) { right: 8%; bottom: 42%; }
.guide-visual-depth ol { padding: 0; margin: 0; list-style: none; }
.guide-visual-depth li { display: grid; grid-template-columns: 36px 1fr; gap: .8rem; padding: .8rem; border-bottom: 1px solid var(--line); }
.guide-visual-depth li b { color: var(--violet); font: 700 .75rem var(--mono); }
.guide-visual-depth li span { color: var(--ink); font-weight: 700; }
.guide-visual-depth li small { display: block; color: var(--dim); font: .75rem var(--mono); }
.guide-membrane-band { fill: color-mix(in srgb, var(--bio) 14%, transparent); stroke: color-mix(in srgb, var(--bio) 40%, transparent); }
.guide-membrane-line { fill: none; stroke: var(--bio); stroke-width: 3; stroke-dasharray: 2 8; }
.guide-transporter rect { fill: #1b1a2c; stroke: var(--violet); stroke-width: 2; }
.guide-transport-arrows path { fill: none; stroke: var(--brand); stroke-width: 3; }
.guide-visual-cofactors > div { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: rgba(238, 240, 243, 0.033); }
.guide-visual-cofactors article { display: grid; min-height: 340px; place-items: center; padding: 1rem; background: var(--paper); color: var(--paper-ink); text-align: center; }
.guide-visual-cofactors img { width: 100%; height: 240px; object-fit: contain; }
.guide-visual-cofactors article strong { font-size: .82rem; }
.guide-visual-cofactors article span { color: var(--muted); font: .75rem var(--mono); }
.guide-visual-oxalo > div { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; padding: 1.1rem; background: var(--paper); color: var(--paper-ink); }
.guide-visual-oxalo article { display: grid; min-height: 300px; place-items: center; padding: .8rem; border: 1px solid rgba(238,240,243,.09); border-radius: 4px; text-align: center; }
.guide-visual-oxalo article.focus { border-color: color-mix(in srgb, var(--brand) 55%, transparent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 5%, transparent); }
.guide-visual-oxalo img { width: 100%; height: 210px; object-fit: contain; }
.guide-visual-oxalo i { padding: .5rem; color: var(--brand); font-size: 20px; }
.guide-visual-oxalo article strong { font-size: .78rem; }
.guide-visual-oxalo article span { color: var(--muted); font: .75rem var(--mono); }
.guide-visual-routes > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }
.guide-visual-routes > header span { color: var(--brand-bright); font: 700 .75rem var(--mono);  }
.guide-visual-routes > header strong { color: var(--muted); font-size: .75rem; }
.guide-route-diagram { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; padding: 1.2rem; }
.guide-route-diagram a { display: grid; min-height: 112px; padding: .85rem; border: 1px solid var(--line); border-radius: 4px; background: rgba(238, 240, 243, 0.014); text-decoration: none; }
.guide-route-diagram a:hover { border-color: color-mix(in srgb, var(--bio) 58%, transparent); background: color-mix(in srgb, var(--bio) 4%, transparent); }
.guide-route-diagram a > span { color: var(--ink); font-size: .76rem; font-weight: 720; }
.guide-route-diagram a > small { align-self: end; color: var(--dim); font: .75rem var(--mono); }
.guide-route-diagram i { position: relative; display: flex; align-items: center; justify-content: space-between; height: 25px; margin: .4rem 0; }
.guide-route-diagram i::before { position: absolute; left: 4px; right: 4px; top: 12px; height: 1px; content: ""; background: linear-gradient(90deg,var(--bio),var(--violet)); }
.guide-route-diagram b { position: relative; width: 8px; height: 8px; border: 1px solid var(--bio); border-radius: 50%; background: var(--surface); }
.mechanism-paper,
.mechanism-scene-paper { background-color: var(--paper); color: var(--paper-ink); }
/* Sharp glass finish across the product. Circular scientific marks remain
   circular; every rectangular control and content vessel uses a small radius. */
:is(
  .hero-instrument, .status-banner, .scope-panel, .filter-bar,
  .dossier-card, .evidence-card, .empty-state, .identity-stamp,
  .record-aside section, .source-chip, .evidence-list a, .measurement-panel,
  .refusal-callout, .source-description, .citation-panel, .table-region,
  .comparison-picker, .fixture-picker, .decision-panel, .refusal-list article,
  .source-record, .policy-code-grid article, .download-grid article,
  .result-list a, .community-load-state, .community-empty, .guide-chapter,
  .guide-ideas, .guide-pathway-card, .guide-sources a, .guide-index-card,
  .guide-domain-card, .metabolite-passport, .community-method-strip li,
  .cofactor-card, .cofactor-transformation, .cofactor-key-grid,
  .community-privacy-card, .notebook-status, .notebook-tour,
  .notebook-panel, .notebook-item, .notebook-data, .library-hero-index,
  .library-open-grid, .library-filter, .library-state, .library-asset-card,
  .library-pack-grid article, .library-calculus, .mechanisms-hero-figure figcaption,
  .mechanism-mobile-picker select, .mechanism-browser, .mechanism-search input,
  .mechanism-category-chips button, .mechanisms-family-index button,
  .mechanism-stage, .mechanism-stage-tools button, .mechanism-structure-card,
  .mechanism-helper-list, .mechanism-step-controls button, .mechanism-step-jump button,
  [data-mechanism-panel], .mechanism-process-entity, .mechanism-narration button,
  .mechanism-deep-detail, .mechanism-deep-detail dl div, .mechanism-scope-badge,
  .mechanism-identifier-list code, .mechanism-source-list a, .mechanisms-mcat-tags span,
  .flashcard-workspace, .flashcard-filter, .flashcard-card, .flashcards-progress-panel
) { border-radius: 4px; }
:is(
  .hero-instrument, .status-banner, .scope-panel, .filter-bar,
  .dossier-card, .evidence-card, .empty-state, .identity-stamp,
  .record-aside section, .measurement-panel, .source-description, .citation-panel,
  .table-region, .comparison-picker, .fixture-picker, .decision-panel,
  .source-record, .policy-code-grid article, .download-grid article,
  .result-list a, .community-load-state, .community-empty, .guide-chapter,
  .guide-index-card, .guide-domain-card, .metabolite-passport, .cofactor-card,
  .community-privacy-card, .notebook-tour, .notebook-panel, .notebook-data,
  .library-hero-index, .library-filter, .library-state, .library-asset-card,
  .library-pack-grid article, .library-calculus, .mechanism-browser,
  .mechanism-stage, .flashcard-workspace, .flashcards-progress-panel
) {
  border-color: var(--glass-line);
  background-color: var(--glass);
  background-image: linear-gradient(145deg, rgba(238, 240, 243, 0.035), transparent 38%);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(20px) saturate(1.1);
}
@media (max-width: 720px) {
  .passport-structure,
  .cofactor-structure { min-height: 250px; }
  .guide-visual-depth { grid-template-columns: 1fr; }
  .guide-depth-world { width: min(260px,82vw); margin-block: .6rem 1.2rem; }
  .guide-visual-cofactors > div { grid-template-columns: 1fr; }
  .guide-visual-cofactors article { min-height: 300px; }
  .guide-visual-oxalo > div { grid-template-columns: 1fr; gap: .65rem; }
  .guide-visual-oxalo i { transform: rotate(90deg); justify-self: center; }
  .guide-route-diagram { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}
.license-matrix { margin-top: 2.2rem; }