/* Ancient Inquiry — shared editorial research system */

:root {
  color-scheme: light;
  --atlas-navy-950: #081521;
  --atlas-navy-900: #0d2030;
  --atlas-navy-800: #173449;
  --atlas-slate-700: #40586a;
  --atlas-slate-500: #718492;
  --atlas-slate-300: #b6c0c6;
  --atlas-stone-100: #f6f1e7;
  --atlas-stone-150: #efe8dc;
  --atlas-stone-200: #e4d9c8;
  --atlas-stone-300: #cdbda6;
  --atlas-paper: #fffdf7;
  --atlas-ink: #18242b;
  --atlas-muted: #5d686d;
  --atlas-copper-700: #7d472e;
  --atlas-copper-600: #9b5c36;
  --atlas-copper-500: #b77347;
  --atlas-blue-600: #466e86;
  --atlas-ochre-600: #8a642c;
  --atlas-rust-600: #8a4b3e;
  --atlas-teal-600: #3f6f6e;
  --atlas-success: #35634f;
  --atlas-warning: #7a5924;
  --atlas-danger: #7b403a;
  --atlas-focus: #f1bd6b;
  --atlas-shadow-sm: 0 1px 2px rgb(8 21 33 / 0.12), 0 5px 16px rgb(8 21 33 / 0.06);
  --atlas-shadow-lg: 0 22px 70px rgb(8 21 33 / 0.22);
  --atlas-border: 1px solid color-mix(in srgb, var(--atlas-navy-900) 16%, transparent);
  --atlas-radius-sm: 0.45rem;
  --atlas-radius-md: 0.8rem;
  --atlas-radius-lg: 1.25rem;
  --atlas-reading: 46rem;
  --atlas-wide: 88rem;
  --atlas-display: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --atlas-sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --topic-bg: #102536;
  --topic-accent: var(--atlas-copper-500);
  --topic-accent-2: var(--atlas-blue-600);
  --topic-pattern: rgb(255 255 255 / 0.035);
  --topic-surface: var(--atlas-paper);
  --topic-ambient-opacity: 1;
  --motion-fast: 140ms;
  --motion-medium: 240ms;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--atlas-navy-950); }
body {
  margin: 0;
  min-width: 20rem;
  min-height: 100vh;
  background:
    linear-gradient(135deg, transparent 0 46%, var(--topic-pattern) 46% 46.25%, transparent 46.25% 100%),
    radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--topic-accent) 12%, transparent), transparent 26rem),
    linear-gradient(180deg, var(--topic-bg) 0 31rem, var(--atlas-stone-150) 49rem);
  background-size: 42rem 42rem, auto, auto;
  color: var(--atlas-ink);
  font-family: var(--atlas-sans);
  font-size: 1rem;
  line-height: 1.65;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: var(--topic-ambient-opacity);
  background:
    repeating-linear-gradient(90deg, transparent 0 6.95rem, rgb(255 255 255 / 0.022) 7rem),
    repeating-linear-gradient(0deg, transparent 0 6.95rem, rgb(255 255 255 / 0.018) 7rem);
}

[data-theme-family="human-origins"] { --topic-bg: #18272b; --topic-accent: #b36f45; --topic-accent-2: #6f7b72; --topic-pattern: rgb(214 177 127 / 0.045); }
[data-theme-family="climate-catastrophe"], [data-theme-family="climate-and-catastrophe"] { --topic-bg: #122634; --topic-accent: #7294a5; --topic-accent-2: #7b674b; --topic-pattern: rgb(169 204 218 / 0.045); }
[data-theme-family="archaeology-monuments"], [data-theme-family="archaeology-stone"] { --topic-bg: #242724; --topic-accent: #b27a4b; --topic-accent-2: #85735d; --topic-pattern: rgb(223 197 157 / 0.045); }
[data-theme-family="ancient-civilizations"] { --topic-bg: #242631; --topic-accent: #ba7446; --topic-accent-2: #697b88; --topic-pattern: rgb(214 187 147 / 0.04); }
[data-theme-family="texts-traditions"], [data-theme-family="manuscript-archive"], [data-theme-family="tradition"] { --topic-bg: #27242a; --topic-accent: #b66d48; --topic-accent-2: #806c74; --topic-pattern: rgb(220 192 154 / 0.04); }
[data-theme-family="mysteries-anomalies"], [data-theme-family="astronomy"] { --topic-bg: #172a2b; --topic-accent: #a77a50; --topic-accent-2: #527675; --topic-pattern: rgb(188 207 196 / 0.035); }
[data-theme-family="claims-theories"], [data-theme-family="claim-dossier"], [data-theme-family="connection-analysis"] { --topic-bg: #2a2328; --topic-accent: #ad674e; --topic-accent-2: #716a78; --topic-pattern: rgb(217 179 162 / 0.04); }
[data-theme-family="researchers-thinkers"], [data-theme-family="scholarly-archive"], [data-theme-family="scientific-method"] { --topic-bg: #202733; --topic-accent: #ad744d; --topic-accent-2: #657c91; --topic-pattern: rgb(192 203 218 / 0.04); }

/* Restrained signature variants: atmosphere only; semantic colors and structure remain global. */
[data-topic-id="CM-063"] { --topic-bg: #292823; --topic-accent: #bd7b49; --topic-accent-2: #8b795e; }
[data-topic-id="CM-062"] { --topic-bg: #252923; --topic-accent: #ae7749; --topic-accent-2: #7c826e; }
[data-topic-id="CM-002"] { --topic-bg: #1f292a; --topic-accent: #b66d43; --topic-accent-2: #747b72; }
[data-topic-id="CM-001"] { --topic-bg: #1b292b; --topic-accent: #a86f49; --topic-accent-2: #647a76; }
[data-topic-id="CM-005"] { --topic-bg: #182a32; --topic-accent: #658e91; --topic-accent-2: #7b7990; }
[data-topic-id="CM-013"] { --topic-bg: #142936; --topic-accent: #7e9eaa; --topic-accent-2: #706f68; }
[data-topic-id="CM-025"] { --topic-bg: #192833; --topic-accent: #8da2a8; --topic-accent-2: #8b6746; }
[data-topic-id="CM-022"] { --topic-bg: #32302a; --topic-accent: #c39865; --topic-accent-2: #9b8466; }
[data-topic-id="CM-051"] { --topic-bg: #252932; --topic-accent: #9a7460; --topic-accent-2: #6d8791; }
[data-topic-id="CM-072"] { --topic-bg: #2a252c; --topic-accent: #aa7356; --topic-accent-2: #766779; }
[data-topic-id="CM-084"] { --topic-bg: #2b262a; --topic-accent: #b3714d; --topic-accent-2: #736d76; }

[data-theme-mode="quiet"] { --topic-ambient-opacity: 0.35; }
[data-theme-mode="minimal"], [data-reading-mode="true"] {
  --topic-bg: var(--atlas-navy-900);
  --topic-pattern: transparent;
  --topic-ambient-opacity: 0;
}

::selection { background: color-mix(in srgb, var(--atlas-focus) 58%, white); color: var(--atlas-navy-950); }
:focus-visible { outline: 3px solid var(--atlas-focus); outline-offset: 3px; }
img, svg { max-width: 100%; }
a { color: var(--atlas-copper-700); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
a:hover { color: var(--atlas-rust-600); }
button, input, select, textarea { font: inherit; }
button, select, input[type="checkbox"], input[type="radio"] { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.58; }

/* This static release has no server-side button handlers. Without scripting,
   retain links/details and hide controls that would otherwise be inert. */
.no-js button,
.no-js .js-only,
.no-js .filter-panel,
.no-js .graph-controls,
.no-js .graph-shell,
.no-js [data-route-form],
.no-js [data-personal-edge-form],
.no-js [data-search-form] { display: none !important; }

h1, h2, h3, h4 {
  color: var(--atlas-navy-950);
  font-family: var(--atlas-display);
  font-weight: 600;
  line-height: 1.12;
  text-wrap: balance;
}
h1 { margin: 0; font-size: clamp(2.35rem, 6vw, 5.1rem); letter-spacing: -0.035em; }
h2 { margin: 2.75rem 0 1rem; font-size: clamp(1.7rem, 3.2vw, 2.65rem); }
h3 { margin: 2rem 0 0.75rem; font-size: clamp(1.25rem, 2vw, 1.65rem); }
h4 { margin: 1.5rem 0 0.5rem; font-size: 1.12rem; }
p, ul, ol { margin-block: 0 1.1rem; }
small, .text-small { font-size: 0.875rem; }
.muted { color: var(--atlas-muted); }
.eyebrow, .record-id {
  color: var(--atlas-copper-700);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.6rem;
  left: 0.6rem;
  padding: 0.75rem 1rem;
  border-radius: var(--atlas-radius-sm);
  background: var(--atlas-paper);
  color: var(--atlas-navy-950);
  transform: translateY(-180%);
  transition: transform var(--motion-fast) ease;
}
.skip-link:focus { transform: translateY(0); }

.container { width: min(calc(100% - 2rem), var(--atlas-wide)); margin-inline: auto; }
.reading-width { width: min(100%, var(--atlas-reading)); }
.stack > * + * { margin-top: var(--stack-space, 1rem); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--cluster-gap, 0.65rem); align-items: center; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.site-header {
  position: relative;
  z-index: 30;
  border-bottom: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(8 21 33 / 0.92);
  color: white;
  backdrop-filter: blur(16px);
}
.site-header__inner { min-height: 4.75rem; display: flex; align-items: center; gap: 1.1rem; }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; color: white; text-decoration: none; font-weight: 800; letter-spacing: 0.075em; white-space: nowrap; }
.brand__mark { width: 2rem; height: 2rem; color: var(--topic-accent); }
.primary-nav { margin-inline: auto; }
.primary-nav ul, .utility-nav { display: flex; gap: 0.15rem; align-items: center; padding: 0; margin: 0; list-style: none; }
.primary-nav a, .utility-nav a, .header-button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 0.72rem;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  color: rgb(255 255 255 / 0.82);
  font-size: 0.91rem;
  font-weight: 650;
  text-decoration: none;
}
.primary-nav a:hover, .utility-nav a:hover, .header-button:hover, [aria-current="page"] { background: rgb(255 255 255 / 0.08); color: white; }
.menu-trigger, .utility-nav__menu { display: none; }

.breadcrumbs { padding-block: 1rem; color: rgb(255 255 255 / 0.7); font-size: 0.88rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0.45rem; padding: 0; margin: 0; list-style: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.45rem; color: rgb(255 255 255 / 0.34); }
.breadcrumbs a { color: inherit; }

.hero, .topic-hero {
  color: white;
  /* Explicit dark backdrop so hero text stays legible even where the page
     gradient has faded to the light reading surface below. */
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--topic-bg) 94%, black) 0 100%);
  border-block-end: 1px solid rgb(255 255 255 / 0.08);
  padding: clamp(3.5rem, 9vw, 8.5rem) 0 clamp(3rem, 7vw, 6rem);
}
.hero h1, .topic-hero h1 { color: white; max-width: 15ch; overflow-wrap: anywhere; }
.hero__lede, .topic-hero__lede { max-width: 48rem; margin-top: 1.35rem; color: rgb(255 255 255 / 0.84); font-size: clamp(1.05rem, 2vw, 1.3rem); text-shadow: 0 1px 2px rgb(0 0 0 / 0.35); }
.hero__actions, .topic-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(19rem, 0.92fr); gap: clamp(2rem, 7vw, 6rem); align-items: center; }
.atlas-snapshot { display: grid; gap: 0.45rem; padding: 1rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--atlas-radius-lg); background: rgb(8 21 33 / 0.56); box-shadow: var(--atlas-shadow-lg); }
.snapshot-node { min-height: 3.5rem; display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0.75rem; align-items: center; padding: 0.65rem 0.8rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: 999px; background: rgb(255 255 255 / 0.06); color: white; text-decoration: none; }
.snapshot-node:hover { background: rgb(255 255 255 / 0.11); color: white; }
.snapshot-node .record-id { color: var(--topic-accent); }
.snapshot-edge { display: flex; justify-content: center; gap: 0.65rem; color: rgb(255 255 255 / 0.64); font-size: 0.74rem; text-transform: capitalize; }
.snapshot-edge::before { content: "↓"; color: var(--topic-accent); }
.topic-hero { padding-top: 2rem; }
.topic-hero__meta { display: flex; flex-wrap: wrap; gap: 0.6rem 1.1rem; margin-top: 1.25rem; color: rgb(255 255 255 / 0.72); }
.topic-hero .record-id { color: color-mix(in srgb, var(--topic-accent) 72%, white); }

.button {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.62rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--atlas-navy-900);
  color: white;
  font-weight: 750;
  line-height: 1.2;
  text-decoration: none;
  transition: background var(--motion-fast) ease, transform var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.button:hover { background: var(--atlas-navy-800); color: white; transform: translateY(-1px); }
.button--copper { background: var(--atlas-copper-600); }
.button--copper:hover { background: var(--atlas-copper-700); }
.button--paper { background: var(--atlas-paper); color: var(--atlas-navy-950); }
.button--paper:hover { background: var(--atlas-stone-150); color: var(--atlas-navy-950); }
.button--ghost { border-color: currentColor; background: transparent; color: inherit; }
.button--subtle { border-color: color-mix(in srgb, var(--atlas-navy-900) 20%, transparent); background: transparent; color: var(--atlas-navy-900); }
.button--subtle:hover { background: var(--atlas-stone-150); color: var(--atlas-navy-950); }
.icon-button { min-width: 2.75rem; min-height: 2.75rem; display: inline-grid; place-items: center; border: var(--atlas-border); border-radius: 50%; background: var(--atlas-paper); color: var(--atlas-navy-900); }

.page-surface { background: var(--atlas-stone-150); padding-block: clamp(2.5rem, 6vw, 6rem); }
.reading-surface {
  border: var(--atlas-border);
  border-radius: var(--atlas-radius-lg);
  background: color-mix(in srgb, var(--topic-surface) 97%, var(--topic-accent) 3%);
  box-shadow: var(--atlas-shadow-sm);
}
.reading-surface--padded { padding: clamp(1.25rem, 4vw, 3.25rem); }
.section-header { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.section-header h2 { margin: 0; }
.section-lede { max-width: 45rem; color: var(--atlas-muted); }

.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: 0.75rem; }
.stat { padding: 1.15rem; border-left: 2px solid var(--topic-accent); background: rgb(255 255 255 / 0.55); }
.stat strong { display: block; color: var(--atlas-navy-950); font-family: var(--atlas-display); font-size: 1.8rem; line-height: 1; }
.stat span { display: block; margin-top: 0.35rem; color: var(--atlas-muted); font-size: 0.84rem; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr)); gap: 1rem; }
.card {
  min-width: 0;
  padding: 1.25rem;
  border: var(--atlas-border);
  border-radius: var(--atlas-radius-md);
  background: var(--atlas-paper);
  box-shadow: var(--atlas-shadow-sm);
}
.card h2, .card h3 { margin-top: 0.35rem; }
.card__meta { display: flex; flex-wrap: wrap; gap: 0.45rem 0.75rem; color: var(--atlas-muted); font-size: 0.84rem; }
.card__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.topic-card { display: flex; flex-direction: column; border-top: 3px solid var(--topic-accent); }
.topic-card .card__actions { margin-top: auto; padding-top: 1rem; }
.compact-list { display: grid; gap: 0.5rem; }
.compact-row { display: grid; grid-template-columns: 7rem minmax(12rem, 1.2fr) minmax(9rem, 0.7fr) minmax(10rem, 1fr) auto; gap: 1rem; align-items: center; padding: 0.8rem 1rem; border: var(--atlas-border); border-radius: var(--atlas-radius-sm); background: var(--atlas-paper); }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 1.8rem;
  padding: 0.25rem 0.58rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: var(--atlas-slate-700);
  background: rgb(255 255 255 / 0.55);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.15;
}
.badge::before { content: ""; width: 0.46rem; height: 0.46rem; flex: 0 0 auto; border-radius: 50%; background: currentColor; }
.badge--evidence { color: var(--atlas-success); }
.badge--debate { color: var(--atlas-warning); }
.badge--claim { color: var(--atlas-danger); }
.badge--tradition { color: var(--atlas-copper-700); }
.badge--neutral::before { border-radius: 0.1rem; }

.topic-view-nav {
  position: sticky;
  z-index: 20;
  top: 0;
  overflow-x: auto;
  border-block: 1px solid rgb(255 255 255 / 0.1);
  background: rgb(13 32 48 / 0.97);
  scrollbar-width: thin;
}
.topic-view-nav ul { width: max-content; min-width: 100%; display: flex; gap: 0.1rem; padding: 0; margin: 0; list-style: none; }
.topic-view-nav a { min-height: 3.35rem; display: inline-flex; align-items: center; padding: 0.6rem 0.9rem; border-bottom: 3px solid transparent; color: rgb(255 255 255 / 0.75); font-size: 0.9rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.topic-view-nav a:hover, .topic-view-nav a[aria-current="page"] { border-color: var(--topic-accent); color: white; }

.topic-layout { display: grid; grid-template-columns: minmax(10rem, 0.55fr) minmax(0, 2.2fr) minmax(14rem, 0.78fr); gap: 1.5rem; align-items: start; }
.in-page-nav, .context-rail { position: sticky; top: 4.5rem; }
.in-page-nav { padding: 0.8rem; }
.in-page-nav ol { padding: 0; margin: 0; list-style: none; }
.in-page-nav a { display: block; padding: 0.5rem 0.65rem; border-left: 2px solid var(--atlas-stone-300); color: var(--atlas-muted); font-size: 0.86rem; text-decoration: none; }
.in-page-nav a:hover { border-color: var(--topic-accent); color: var(--atlas-navy-950); }
.topic-main { min-width: 0; }
.context-rail { display: grid; gap: 0.8rem; }
.context-card { padding: 1rem; border: var(--atlas-border); border-radius: var(--atlas-radius-md); background: var(--atlas-paper); }
.context-card h2, .context-card h3 { margin: 0 0 0.55rem; font-family: var(--atlas-sans); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }

.callout { margin-block: 1.25rem; padding: 1.1rem 1.2rem; border-left: 4px solid var(--atlas-blue-600); border-radius: 0 var(--atlas-radius-sm) var(--atlas-radius-sm) 0; background: #edf2f3; }
.callout--supports { border-color: var(--atlas-success); background: #edf4ef; }
.callout--limits { border-color: var(--atlas-rust-600); background: #f6eeea; }
.callout--caution { border-color: var(--atlas-warning); background: #f8f1e2; }
.callout h3, .callout h4 { margin-top: 0; font-family: var(--atlas-sans); font-size: 0.78rem; font-weight: 850; letter-spacing: 0.11em; text-transform: uppercase; }

.evidence-list, .connection-list, .source-list, .timeline-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.evidence-record, .connection-record, .source-record, .timeline-record { min-width: 0; padding: 1.25rem; border: var(--atlas-border); border-radius: var(--atlas-radius-md); background: var(--atlas-paper); overflow-wrap: anywhere; }
.evidence-record__meta, .connection-record__meta, .source-record__meta { min-width: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.65rem; margin-block: 1rem; }
.meta-pair { min-width: 0; }
.meta-pair dt { color: var(--atlas-muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.meta-pair dd { min-width: 0; margin: 0.15rem 0 0; overflow-wrap: anywhere; }

.table-scroll { max-width: 100%; overflow-x: auto; border: var(--atlas-border); border-radius: var(--atlas-radius-md); }
table { width: 100%; border-collapse: collapse; background: var(--atlas-paper); }
th, td { padding: 0.8rem 0.9rem; border-bottom: var(--atlas-border); text-align: left; vertical-align: top; }
th { background: var(--atlas-stone-150); color: var(--atlas-navy-950); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; }

.filters-layout { display: grid; grid-template-columns: minmax(14rem, 0.55fr) minmax(0, 2fr); gap: 1.25rem; align-items: start; }
.filter-panel { position: sticky; top: 1rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1rem; border: var(--atlas-border); border-radius: var(--atlas-radius-md); background: var(--atlas-paper); }
.filter-toggle { display: none; }
.filter-group { padding-block: 0.8rem; border-bottom: var(--atlas-border); }
.filter-group:last-child { border-bottom: 0; }
.filter-group legend, .filter-group__label { margin-bottom: 0.5rem; color: var(--atlas-navy-950); font-weight: 800; }
.check-row { min-height: 2.35rem; display: flex; align-items: center; gap: 0.55rem; }
.check-row input { width: 1.15rem; height: 1.15rem; accent-color: var(--atlas-copper-600); }
.field { display: grid; gap: 0.35rem; }
.field label { font-size: 0.84rem; font-weight: 750; }
.field input, .field select, .field textarea, .search-input {
  width: 100%;
  min-height: 2.85rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid var(--atlas-stone-300);
  border-radius: var(--atlas-radius-sm);
  background: white;
  color: var(--atlas-ink);
}
.field textarea { min-height: 8rem; resize: vertical; }
.view-switcher { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.view-switcher button[aria-pressed="true"] { background: var(--atlas-navy-900); color: white; }
.empty-state { padding: 2rem; border: 1px dashed var(--atlas-stone-300); border-radius: var(--atlas-radius-md); background: rgb(255 255 255 / 0.45); text-align: center; }

.graph-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.32fr); min-height: 36rem; overflow: hidden; border: var(--atlas-border); border-radius: var(--atlas-radius-lg); background: var(--atlas-navy-950); color: white; }
.graph-canvas { position: relative; height: clamp(36rem, 68vh, 52rem); min-height: 36rem; overflow: hidden; background: radial-gradient(circle at 50% 45%, rgb(39 67 84 / 0.72), rgb(8 21 33 / 0.98) 72%); touch-action: pan-y pinch-zoom; user-select: none; }
.graph-canvas::after { content: "Ctrl/⌘ + scroll to zoom · drag the background to pan"; position: absolute; inset: auto 0.75rem 0.65rem auto; z-index: 2; padding: 0.3rem 0.55rem; border-radius: 999px; background: rgb(8 21 33 / 0.78); color: rgb(255 255 255 / 0.72); font-size: 0.72rem; pointer-events: none; }
.graph-canvas[data-panning="true"] { cursor: grabbing; }
.graph-canvas svg { width: 100%; height: 100%; min-height: 0; display: block; cursor: grab; outline-offset: -4px; }
.graph-pan-surface { fill: transparent; pointer-events: all; }
.graph-edge { stroke: rgb(205 219 228 / 0.38); stroke-width: 1.6; fill: none; vector-effect: non-scaling-stroke; transition: opacity 120ms ease, stroke 120ms ease, stroke-width 120ms ease; }
.graph-edge--strong { stroke: var(--atlas-focus); stroke-width: 2.4; }
.graph-edge--thematic { stroke-dasharray: 5 6; }
.graph-edge--directed { color: var(--atlas-copper-500); stroke: currentColor; }
.graph-edge--muted { opacity: 0.16; }
.graph-edge--related, .graph-edge--hover { stroke: #fff2bd; stroke-width: 3.6; opacity: 1; }
.graph-edge-hit { stroke: transparent; stroke-width: 16; fill: none; pointer-events: stroke; cursor: pointer; vector-effect: non-scaling-stroke; }
.graph-node rect { fill: rgb(18 49 67 / 0.96); stroke: rgb(255 255 255 / 0.72); stroke-width: 1.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 6px 9px rgb(0 0 0 / 0.34)); transition: fill 120ms ease, stroke 120ms ease, stroke-width 120ms ease; }
.graph-node--center rect { fill: #234f67; stroke: var(--atlas-focus); stroke-width: 2.5; }
.graph-node--related rect { stroke: #fff2bd; stroke-width: 2.5; }
.graph-node[data-selected="true"] rect { fill: var(--atlas-copper-600); stroke: white; stroke-width: 3; }
.graph-node:hover rect, .graph-node:focus rect { fill: #28617f; stroke: white; stroke-width: 3; }
.graph-node text { fill: white; font-family: var(--atlas-sans); font-size: 12px; font-weight: 750; letter-spacing: 0.005em; pointer-events: none; }
.graph-node, .graph-canvas [role="button"] { cursor: pointer; }
.graph-inspector { min-height: 0; max-height: clamp(36rem, 68vh, 52rem); overflow: auto; padding: 1.25rem; border-left: 1px solid rgb(255 255 255 / 0.14); background: #102536; }
.graph-inspector h2, .graph-inspector h3 { color: white; }
.graph-inspector .record-id { color: #a0a8b0; }
.graph-inspector .meta-pair dt { color: #afb8c1; }
.graph-controls { display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem; padding: 0.8rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); background: var(--atlas-navy-900); color: white; }
.graph-controls button, .graph-controls select { min-height: 2.75rem; }
.graph-viewport-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; padding: 0.25rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--atlas-radius-sm); background: rgb(255 255 255 / 0.05); }
.graph-zoom-status { min-width: 3.5rem; color: rgb(255 255 255 / 0.78); font-size: 0.8rem; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.graph-filter-group { padding: 0; border: 0; }
.graph-topic-picker { min-width: min(100%, 18rem); }
.graph-disclaimer { padding: 0.75rem 1rem; background: #f8f1e2; color: var(--atlas-ink); font-size: 0.84rem; }
.relationship-fallback { margin-top: 1.25rem; }

.timeline-track { position: relative; min-height: 7rem; padding: 2rem 1rem 0.5rem; border-top: var(--atlas-border); background: var(--atlas-paper); }
.timeline-track svg { width: 100%; height: 5rem; display: block; overflow: visible; }
.timeline-axis { stroke: var(--atlas-stone-300); stroke-width: 2; }
.timeline-marker { cursor: pointer; }
.timeline-marker circle { fill: var(--topic-accent); stroke: white; stroke-width: 3; }
.timeline-marker:focus circle, .timeline-marker:hover circle { fill: var(--atlas-navy-900); stroke: var(--atlas-focus); stroke-width: 5; }
.timeline-lane-label { position: absolute; top: 0.45rem; left: 1rem; font-size: 0.78rem; font-weight: 850; letter-spacing: 0.08em; text-transform: uppercase; }

.path-rail { display: grid; gap: 0; }
.path-stop { position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; }
.path-stop__marker { width: 2.25rem; height: 2.25rem; display: grid; place-items: center; z-index: 1; border: 2px solid var(--topic-accent); border-radius: 50%; background: var(--atlas-paper); font-weight: 800; }
.path-stop:not(:last-child)::before { content: ""; position: absolute; top: 2.25rem; bottom: 0; left: 1.08rem; width: 2px; background: var(--atlas-stone-300); }
.path-transition { margin: 1rem 0 1rem 4rem; padding: 1rem; border-left: 3px solid var(--atlas-blue-600); background: var(--atlas-stone-150); }
.path-transition[data-reviewed="false"] { border-style: dashed; border-color: var(--atlas-warning); }

.site-footer { padding: 3rem 0 6rem; background: var(--atlas-navy-950); color: rgb(255 255 255 / 0.7); }
.site-footer h2, .site-footer h3 { color: white; }
.footer-grid { display: grid; grid-template-columns: minmax(15rem, 1.4fr) repeat(3, minmax(9rem, 0.6fr)); gap: 2rem; }
.site-footer ul { padding: 0; list-style: none; }
.site-footer a { color: rgb(255 255 255 / 0.78); }

.mobile-bottom-nav { display: none; }
dialog { width: min(calc(100% - 2rem), 45rem); max-height: calc(100vh - 2rem); padding: 0; border: 0; border-radius: var(--atlas-radius-lg); background: var(--atlas-paper); box-shadow: var(--atlas-shadow-lg); }
dialog::backdrop { background: rgb(5 13 20 / 0.76); backdrop-filter: blur(3px); }
.dialog__header { position: sticky; z-index: 2; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; border-bottom: var(--atlas-border); background: var(--atlas-paper); }
.dialog__header h2 { margin: 0; font-size: 1.5rem; }
.dialog__body { padding: 1.2rem; }
.no-js dialog { display: none; }

.notice { padding: 0.9rem 1rem; border: var(--atlas-border); border-radius: var(--atlas-radius-sm); background: var(--atlas-stone-100); }
.notice--important { border-left: 4px solid var(--atlas-warning); }
.live-region { min-height: 1.3em; }
progress { width: 100%; height: 0.8rem; border: 0; border-radius: 999px; overflow: hidden; background: var(--atlas-stone-200); accent-color: var(--atlas-copper-600); }
progress::-webkit-progress-bar { background: var(--atlas-stone-200); }
progress::-webkit-progress-value { background: var(--atlas-copper-600); }
progress::-moz-progress-bar { background: var(--atlas-copper-600); }
details { margin-block: 0.8rem; border: var(--atlas-border); border-radius: var(--atlas-radius-sm); background: rgb(255 255 255 / 0.45); }
summary { min-height: 2.75rem; padding: 0.65rem 0.8rem; color: var(--atlas-navy-950); font-weight: 800; cursor: pointer; }
details > :not(summary) { margin-inline: 0.9rem; }
[data-topic-view] { scroll-margin-top: 5rem; }
[data-topic-view][hidden] { display: none; }
.genealogy-shell { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 0.34fr); overflow: hidden; border: var(--atlas-border); border-radius: var(--atlas-radius-lg); background: var(--atlas-navy-950); color: white; }
.genealogy-shell [data-genealogy-canvas] { min-height: 24rem; }
.genealogy-shell [data-genealogy-canvas] svg { width: 100%; height: auto; min-height: 24rem; display: block; }
.genealogy-shell [data-genealogy-inspector] { padding: 1.2rem; border-left: 1px solid rgb(255 255 255 / 0.14); background: #102536; }
.genealogy-shell [data-genealogy-inspector] h3 { color: white; }
.genealogy-shell [data-genealogy-inspector] .record-id { color: #a0a8b0; }
.genealogy-shell [data-genealogy-inspector] .meta-pair dt { color: #afb8c1; }

@media (max-width: 72rem) {
  .primary-nav { display: none; }
  .utility-nav__menu { display: list-item; }
  .menu-trigger { display: inline-grid; }
  .topic-layout { grid-template-columns: minmax(0, 1fr) minmax(14rem, 0.38fr); }
  .in-page-nav { display: none; }
  .compact-row { grid-template-columns: 6rem minmax(12rem, 1fr) minmax(8rem, 0.6fr) auto; }
  .compact-row > :nth-child(4) { display: none; }
}

@media (max-width: 52rem) {
  body { background-attachment: scroll; padding-bottom: 4.7rem; }
  body::before { position: absolute; }
  .utility-nav__saved { display: none; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero { padding-top: 3rem; }
  .topic-layout, .filters-layout, .graph-shell, .genealogy-shell { grid-template-columns: minmax(0, 1fr); }
  .context-rail, .filter-panel { position: static; max-height: none; }
  .graph-inspector, .genealogy-shell [data-genealogy-inspector] { max-height: none; border-top: 1px solid rgb(255 255 255 / 0.14); border-left: 0; }
  .filter-panel { display: none; }
  .filter-panel[data-open="true"] { display: block; }
  .filter-toggle { display: inline-flex; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .mobile-bottom-nav {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    min-height: 4.3rem;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    border-top: 1px solid rgb(255 255 255 / 0.12);
    background: rgb(8 21 33 / 0.97);
    backdrop-filter: blur(16px);
  }
  .mobile-bottom-nav a, .mobile-bottom-nav button { min-width: 0; min-height: 4.3rem; display: grid; place-items: center; padding: 0.4rem; border: 0; background: transparent; color: rgb(255 255 255 / 0.75); font-size: 0.72rem; font-weight: 750; text-align: center; text-decoration: none; }
  .mobile-bottom-nav [aria-current="page"] { color: white; box-shadow: inset 0 3px 0 var(--topic-accent); }
}

@media (max-width: 38rem) {
  .container { width: min(calc(100% - 1rem), var(--atlas-wide)); }
  .site-header__inner { min-height: 4rem; }
  .brand__text { font-size: 0.84rem; }
  .hero, .topic-hero { padding-inline: 0.35rem; }
  h1 { font-size: clamp(2.2rem, 13vw, 3.8rem); }
  .reading-surface { border-radius: var(--atlas-radius-md); }
  .reading-surface--padded { padding: 1.05rem; }
  .card-grid { grid-template-columns: 1fr; }
  .compact-row { grid-template-columns: 1fr auto; gap: 0.4rem; }
  .compact-row > :not(:nth-child(2)):not(:last-child) { display: none; }
  .evidence-record__meta, .connection-record__meta, .source-record__meta { grid-template-columns: 1fr; }
  .graph-canvas { height: 70vh; min-height: 27rem; max-height: 43rem; }
  .graph-canvas svg { min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .button { min-height: 2.9rem; }
  .topic-actions .button { flex: 1 1 7rem; }
  .table-scroll table[data-mobile="stack"] thead { display: none; }
  .table-scroll table[data-mobile="stack"], .table-scroll table[data-mobile="stack"] tbody, .table-scroll table[data-mobile="stack"] tr, .table-scroll table[data-mobile="stack"] td { display: block; width: 100%; }
  .table-scroll table[data-mobile="stack"] tr { padding: 0.75rem; border-bottom: var(--atlas-border); }
  .table-scroll table[data-mobile="stack"] td { display: grid; grid-template-columns: minmax(7rem, 0.45fr) 1fr; gap: 0.75rem; padding: 0.4rem; border: 0; }
  .table-scroll table[data-mobile="stack"] td::before { content: attr(data-label); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

@media (prefers-contrast: more) {
  :root { --atlas-border: 2px solid currentColor; --atlas-muted: #384247; }
  .reading-surface, .card, .context-card { box-shadow: none; }
  .badge { background: white; }
}

@media (forced-colors: active) {
  * { forced-color-adjust: auto; }
  .badge::before { border: 1px solid currentColor; }
  .graph-node rect, .graph-edge { stroke: CanvasText; }
}

@media print {
  body { background: white; color: black; padding: 0; }
  body::before, .site-header, .topic-view-nav, .mobile-bottom-nav, .site-footer, .hero__actions, .topic-actions, .filter-panel, .graph-controls, dialog { display: none !important; }
  .hero, .topic-hero { padding: 1rem 0; color: black; }
  .hero h1, .topic-hero h1, .hero__lede, .topic-hero__lede { color: black; }
  .page-surface { padding: 0; background: white; }
  [data-topic-view][hidden] { display: block !important; }
  .reading-surface, .card, .context-card { border: 1px solid #777; box-shadow: none; break-inside: avoid; }
  a { color: black; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; }
}

/* Final Ancient Inquiry experience layer
   Same research system, different evidence environment. Topic atmosphere is
   decorative and never changes evidence semantics, navigation, or reading contrast. */
.topic-hero { position: relative; isolation: isolate; overflow: hidden; }
.topic-hero > .container { position: relative; z-index: 2; }
.topic-hero::before,
.topic-hero::after { content: ""; position: absolute; pointer-events: none; }
.topic-hero::before {
  z-index: 0;
  inset: 0;
  opacity: calc(var(--topic-ambient-opacity) * 0.5);
  background:
    radial-gradient(circle at 78% 26%, color-mix(in srgb, var(--topic-accent) 20%, transparent) 0 0.16rem, transparent 0.18rem),
    linear-gradient(105deg, transparent 0 61%, color-mix(in srgb, var(--topic-accent-2) 12%, transparent) 61% 61.2%, transparent 61.2% 100%);
  background-size: 3.7rem 3.7rem, 22rem 22rem;
}
.topic-hero::after {
  z-index: 1;
  inset: 0 0 0 52%;
  opacity: 0.3;
  background:
    repeating-linear-gradient(90deg, transparent 0 3.95rem, color-mix(in srgb, var(--topic-accent) 18%, transparent) 4rem),
    repeating-linear-gradient(0deg, transparent 0 3.95rem, color-mix(in srgb, var(--topic-accent-2) 15%, transparent) 4rem);
  mask-image: linear-gradient(90deg, transparent, black 26%);
}

[data-theme-family="human-origins"] .topic-hero::before {
  background:
    repeating-linear-gradient(172deg, transparent 0 2.7rem, rgb(220 188 145 / 0.055) 2.75rem 2.84rem),
    radial-gradient(ellipse at 78% 28%, rgb(186 122 76 / 0.16), transparent 26rem);
}
[data-theme-family="archaeology-monuments"] .topic-hero::before,
[data-theme-family="archaeology-stone"] .topic-hero::before {
  background:
    linear-gradient(90deg, transparent 0 72%, rgb(225 197 158 / 0.045) 72% 72.25%, transparent 72.25%),
    linear-gradient(0deg, transparent 0 66%, rgb(225 197 158 / 0.045) 66% 66.25%, transparent 66.25%),
    radial-gradient(ellipse at 78% 30%, rgb(184 124 71 / 0.15), transparent 27rem);
  background-size: 8rem 8rem, 8rem 8rem, auto;
}
[data-theme-family="manuscript-archive"] .topic-hero::before,
[data-theme-family="texts-traditions"] .topic-hero::before,
[data-theme-family="tradition"] .topic-hero::before {
  background:
    repeating-linear-gradient(0deg, transparent 0 1.82rem, rgb(226 196 154 / 0.055) 1.86rem 1.91rem),
    linear-gradient(95deg, transparent 0 76%, rgb(225 191 144 / 0.08) 76% 76.2%, transparent 76.2%);
}
[data-theme-family="climate-catastrophe"] .topic-hero::before,
[data-theme-family="climate-and-catastrophe"] .topic-hero::before {
  background:
    repeating-linear-gradient(175deg, transparent 0 2.25rem, rgb(171 207 220 / 0.06) 2.3rem 2.38rem),
    linear-gradient(100deg, transparent 0 68%, rgb(154 124 86 / 0.08) 68% 68.25%, transparent 68.25%);
}
[data-theme-family="scientific-method"] .topic-hero::before,
[data-theme-family="scholarly-archive"] .topic-hero::before {
  background:
    repeating-linear-gradient(90deg, transparent 0 4.95rem, rgb(190 210 223 / 0.045) 5rem 5.05rem),
    repeating-linear-gradient(0deg, transparent 0 4.95rem, rgb(190 210 223 / 0.035) 5rem 5.05rem);
}
[data-theme-family="claim-dossier"] .topic-hero::before,
[data-theme-family="claims-theories"] .topic-hero::before,
[data-theme-family="connection-analysis"] .topic-hero::before {
  background:
    linear-gradient(104deg, transparent 0 68%, rgb(225 185 163 / 0.07) 68% 68.2%, transparent 68.2%),
    repeating-linear-gradient(0deg, transparent 0 3.4rem, rgb(225 185 163 / 0.035) 3.45rem 3.5rem);
}
[data-theme-family="astronomy"] .topic-hero::before {
  background:
    radial-gradient(circle at 74% 30%, rgb(220 211 184 / 0.16) 0 0.08rem, transparent 0.1rem),
    radial-gradient(circle at 86% 54%, rgb(220 211 184 / 0.12) 0 0.07rem, transparent 0.09rem),
    linear-gradient(24deg, transparent 0 74%, rgb(178 205 206 / 0.075) 74% 74.18%, transparent 74.18%);
  background-size: 3.2rem 3.2rem, 5rem 5rem, auto;
}

/* Topic-specific abstract signatures. These are evidence-environment motifs,
   not reconstructions or claims about what occurred. */
.topic-signature {
  width: 5.5rem;
  height: 5.5rem;
  margin: 0 0 1rem auto;
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: 50%;
  opacity: 0.68;
  color: var(--topic-accent);
  background:
    radial-gradient(circle at center, transparent 0 31%, currentColor 32% 33%, transparent 34%),
    linear-gradient(45deg, transparent 48%, currentColor 49% 51%, transparent 52%),
    linear-gradient(-45deg, transparent 48%, currentColor 49% 51%, transparent 52%);
}

/* Every canonical topic receives a stable decorative seed. The first hex
   character shifts the environmental layer; the second varies the abstract
   signature. These selectors never encode evidence status or claim strength. */
[data-topic-variant^="0"] { --topic-shift-x: -4%; --topic-angle: -1.8deg; }
[data-topic-variant^="1"] { --topic-shift-x: -3%; --topic-angle: -1.4deg; }
[data-topic-variant^="2"] { --topic-shift-x: -2%; --topic-angle: -1.0deg; }
[data-topic-variant^="3"] { --topic-shift-x: -1%; --topic-angle: -0.6deg; }
[data-topic-variant^="4"] { --topic-shift-x: 0%; --topic-angle: -0.2deg; }
[data-topic-variant^="5"] { --topic-shift-x: 1%; --topic-angle: 0.2deg; }
[data-topic-variant^="6"] { --topic-shift-x: 2%; --topic-angle: 0.6deg; }
[data-topic-variant^="7"] { --topic-shift-x: 3%; --topic-angle: 1deg; }
[data-topic-variant^="8"] { --topic-shift-x: 4%; --topic-angle: 1.4deg; }
[data-topic-variant^="9"] { --topic-shift-x: 5%; --topic-angle: 1.8deg; }
[data-topic-variant^="a"] { --topic-shift-x: -5%; --topic-angle: 2.2deg; }
[data-topic-variant^="b"] { --topic-shift-x: -2.5%; --topic-angle: 2.6deg; }
[data-topic-variant^="c"] { --topic-shift-x: 0.5%; --topic-angle: -2.6deg; }
[data-topic-variant^="d"] { --topic-shift-x: 2.5%; --topic-angle: -2.2deg; }
[data-topic-variant^="e"] { --topic-shift-x: 4.5%; --topic-angle: 0.9deg; }
[data-topic-variant^="f"] { --topic-shift-x: -4.5%; --topic-angle: -0.9deg; }

[data-topic-variant$="0"] { --topic-shift-y: -3%; --signature-rotate: -8deg; --signature-scale: 0.94; }
[data-topic-variant$="1"] { --topic-shift-y: -2%; --signature-rotate: -6deg; --signature-scale: 0.97; }
[data-topic-variant$="2"] { --topic-shift-y: -1%; --signature-rotate: -4deg; --signature-scale: 1; }
[data-topic-variant$="3"] { --topic-shift-y: 0%; --signature-rotate: -2deg; --signature-scale: 1.03; }
[data-topic-variant$="4"] { --topic-shift-y: 1%; --signature-rotate: 0deg; --signature-scale: 0.95; }
[data-topic-variant$="5"] { --topic-shift-y: 2%; --signature-rotate: 2deg; --signature-scale: 0.98; }
[data-topic-variant$="6"] { --topic-shift-y: 3%; --signature-rotate: 4deg; --signature-scale: 1.01; }
[data-topic-variant$="7"] { --topic-shift-y: 4%; --signature-rotate: 6deg; --signature-scale: 1.04; }
[data-topic-variant$="8"] { --topic-shift-y: -4%; --signature-rotate: 8deg; --signature-scale: 0.96; }
[data-topic-variant$="9"] { --topic-shift-y: -2.5%; --signature-rotate: 10deg; --signature-scale: 0.99; }
[data-topic-variant$="a"] { --topic-shift-y: -0.5%; --signature-rotate: 12deg; --signature-scale: 1.02; }
[data-topic-variant$="b"] { --topic-shift-y: 1.5%; --signature-rotate: -12deg; --signature-scale: 1.05; }
[data-topic-variant$="c"] { --topic-shift-y: 3.5%; --signature-rotate: -10deg; --signature-scale: 0.93; }
[data-topic-variant$="d"] { --topic-shift-y: -3.5%; --signature-rotate: 7deg; --signature-scale: 1.06; }
[data-topic-variant$="e"] { --topic-shift-y: 0.75%; --signature-rotate: -7deg; --signature-scale: 0.92; }
[data-topic-variant$="f"] { --topic-shift-y: 2.75%; --signature-rotate: 5deg; --signature-scale: 1.07; }

[data-topic-id] .topic-hero::before {
  transform: translate3d(var(--topic-shift-x, 0), var(--topic-shift-y, 0), 0) rotate(var(--topic-angle, 0));
  transform-origin: 78% 30%;
}
[data-topic-id] .topic-signature {
  transform: rotate(var(--signature-rotate, 0)) scale(var(--signature-scale, 1));
  transform-origin: center;
}

[data-topic-id="CM-063"] .topic-signature,
[data-topic-id="CM-062"] .topic-signature {
  border-radius: 2.75rem 2.75rem 0.6rem 0.6rem;
  background: linear-gradient(90deg, transparent 43%, currentColor 44% 56%, transparent 57%), linear-gradient(0deg, currentColor 0 16%, transparent 17%);
}
[data-topic-id="CM-022"] .topic-signature {
  transform: rotate(-18deg);
  border-radius: 55% 45% 60% 40%;
  background: radial-gradient(ellipse at 50% 35%, currentColor 0 16%, transparent 18%), radial-gradient(ellipse at 50% 66%, currentColor 0 23%, transparent 25%);
}
[data-topic-id="CM-005"] .topic-signature {
  border-radius: 0;
  border-color: transparent;
  background: repeating-linear-gradient(90deg, transparent 0 0.42rem, currentColor 0.45rem 0.58rem, transparent 0.61rem 0.92rem), linear-gradient(45deg, transparent 45%, currentColor 46% 49%, transparent 50%);
}
[data-topic-id="CM-025"] .topic-signature,
[data-topic-id="CM-013"] .topic-signature {
  border-radius: 0;
  border-color: transparent;
  background: repeating-linear-gradient(0deg, transparent 0 0.8rem, currentColor 0.84rem 0.96rem, transparent 1rem 1.45rem);
}
[data-topic-id="CM-051"] .topic-signature,
[data-topic-id="CM-072"] .topic-signature {
  background: radial-gradient(ellipse at center, transparent 0 25%, currentColor 27% 29%, transparent 31% 43%, currentColor 45% 47%, transparent 49%);
}
[data-topic-id="CM-084"] .topic-signature {
  border-radius: 0.45rem;
  background: repeating-linear-gradient(90deg, transparent 0 0.55rem, currentColor 0.58rem 0.72rem, transparent 0.75rem 1.05rem), repeating-linear-gradient(0deg, transparent 0 1.05rem, rgb(255 255 255 / 0.1) 1.08rem 1.12rem);
}

[data-topic-id="CM-063"] .topic-hero::after,
[data-topic-id="CM-062"] .topic-hero::after {
  background:
    linear-gradient(90deg, transparent 0 25%, color-mix(in srgb, var(--topic-accent) 42%, transparent) 25% 31%, transparent 31% 69%, color-mix(in srgb, var(--topic-accent) 42%, transparent) 69% 75%, transparent 75%),
    linear-gradient(0deg, transparent 0 64%, color-mix(in srgb, var(--topic-accent) 40%, transparent) 64% 70%, transparent 70%),
    repeating-linear-gradient(135deg, transparent 0 2.9rem, color-mix(in srgb, var(--topic-accent-2) 13%, transparent) 3rem);
}
[data-topic-id="CM-005"] .topic-hero::after {
  background:
    repeating-linear-gradient(90deg, transparent 0 1.4rem, color-mix(in srgb, var(--topic-accent) 18%, transparent) 1.45rem 1.55rem),
    repeating-linear-gradient(0deg, transparent 0 2.2rem, color-mix(in srgb, var(--topic-accent-2) 17%, transparent) 2.25rem 2.35rem);
}
[data-topic-id="CM-013"] .topic-hero::after,
[data-topic-id="CM-025"] .topic-hero::after {
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--topic-accent) 15%, transparent) 0 0.45rem, transparent 0.45rem 2.6rem),
    linear-gradient(120deg, transparent, color-mix(in srgb, var(--topic-accent-2) 20%, transparent));
}
[data-topic-id="CM-022"] .topic-hero::after {
  background:
    radial-gradient(ellipse 1.2rem 2.6rem at 25% 28%, color-mix(in srgb, var(--topic-accent) 28%, transparent) 0 46%, transparent 50%),
    radial-gradient(ellipse 1.15rem 2.45rem at 48% 56%, color-mix(in srgb, var(--topic-accent) 24%, transparent) 0 46%, transparent 50%),
    radial-gradient(ellipse 1.1rem 2.35rem at 72% 34%, color-mix(in srgb, var(--topic-accent) 21%, transparent) 0 46%, transparent 50%);
}
[data-topic-id="CM-051"] .topic-hero::after,
[data-topic-id="CM-072"] .topic-hero::after {
  background:
    repeating-linear-gradient(0deg, transparent 0 1.7rem, color-mix(in srgb, var(--topic-accent) 18%, transparent) 1.75rem 1.84rem),
    radial-gradient(ellipse at 70% 75%, transparent 0 42%, color-mix(in srgb, var(--topic-accent-2) 22%, transparent) 43% 44%, transparent 45% 100%);
}
[data-topic-id="CM-084"] .topic-hero::after {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--topic-accent) 15%, transparent) 0 1px, transparent 1px),
    linear-gradient(0deg, color-mix(in srgb, var(--topic-accent-2) 14%, transparent) 0 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 2.2rem, color-mix(in srgb, var(--topic-accent) 20%, transparent) 2.25rem 2.33rem);
  background-size: 5rem 5rem, 5rem 5rem, auto;
}

[data-theme-mode="quiet"] .topic-hero::after { opacity: 0.14; }
[data-theme-mode="minimal"] .topic-hero::before,
[data-theme-mode="minimal"] .topic-hero::after,
[data-theme-mode="minimal"] .topic-signature,
[data-reading-mode="true"] .topic-hero::before,
[data-reading-mode="true"] .topic-hero::after,
[data-reading-mode="true"] .topic-signature { display: none; }

.topic-opening { display: grid; gap: 1.25rem; }
.orientation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.orientation-card,
.orientation-assessment,
.source-foundation {
  min-width: 0;
  padding: 1.1rem;
  border: var(--atlas-border);
  border-radius: var(--atlas-radius-md);
  background: color-mix(in srgb, var(--topic-surface) 95%, var(--topic-accent) 5%);
  box-shadow: var(--atlas-shadow-sm);
}
.orientation-card h3,
.orientation-assessment h3,
.source-foundation h3 { margin-top: 0.55rem; }
.orientation-card--limits { border-left: 4px solid var(--atlas-warning); }
.source-foundation__roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 0.45rem 1rem; padding-left: 1.2rem; }

.evidence-ledger { display: grid; gap: 1.2rem; }
.evidence-ledger-record { border-left: 5px solid var(--atlas-blue-600); }
.evidence-ledger-record > h3 { margin-top: 0.45rem; }
.source-trail-panel { margin-top: 1rem; background: var(--atlas-stone-100); }
.source-trail { display: grid; gap: 0.75rem; padding: 0 0 1rem 1rem; list-style: none; overflow-wrap: anywhere; }
.source-trail > li { display: grid; grid-template-columns: 2rem minmax(0, 1fr); gap: 0.7rem; align-items: start; overflow-wrap: anywhere; }
.source-trail__step { width: 1.8rem; height: 1.8rem; display: grid; place-items: center; border-radius: 50%; background: var(--atlas-navy-900); color: white; font-size: 0.75rem; font-weight: 800; }
.evidence-matrix { margin-top: 1.2rem; }

.claim-review-list { display: grid; gap: 1.35rem; }
.claim-review-record { padding: clamp(1rem, 2.5vw, 1.5rem); border: var(--atlas-border); border-left: 5px solid var(--atlas-rust-600); border-radius: var(--atlas-radius-md); background: var(--atlas-paper); box-shadow: var(--atlas-shadow-sm); overflow-wrap: anywhere; }
.claim-dual-track { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1rem; }
.claim-track { min-width: 0; padding: 1rem; border: var(--atlas-border); border-radius: var(--atlas-radius-md); overflow-wrap: anywhere; }
.claim-track--source { background: color-mix(in srgb, var(--atlas-stone-100) 92%, var(--atlas-blue-600) 8%); border-top: 4px solid var(--atlas-success); }
.claim-track--interpretation { background: color-mix(in srgb, var(--atlas-stone-100) 92%, var(--atlas-rust-600) 8%); border-top: 4px solid var(--atlas-rust-600); }
.claim-track h4 { margin-top: 0.75rem; }

.connection-compass { display: grid; gap: 0.8rem; border-top: 4px solid var(--topic-accent); }
.connection-compass__list { display: grid; gap: 0.55rem; }
.connection-compass__item {
  width: 100%;
  min-height: 4.35rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.15rem 0.7rem;
  align-items: center;
  padding: 0.65rem 0.75rem;
  border: var(--atlas-border);
  border-radius: var(--atlas-radius-md);
  background: var(--atlas-paper);
  color: var(--atlas-ink);
  text-align: left;
}
.connection-compass__item:hover { border-color: var(--topic-accent); background: color-mix(in srgb, var(--atlas-paper) 94%, var(--topic-accent) 6%); }
.connection-compass__relationship { grid-column: 1 / -1; color: var(--atlas-copper-700); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.connection-drawer { width: min(44rem, calc(100% - 1rem)); height: 100vh; max-height: 100vh; margin-right: 0; border-radius: var(--atlas-radius-lg) 0 0 var(--atlas-radius-lg); }
.connection-drawer .dialog__body { max-height: calc(100vh - 5rem); overflow: auto; }

.topic-continuations { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.continuation-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; padding: 1.1rem; border: var(--atlas-border); border-top: 4px solid var(--topic-accent); border-radius: var(--atlas-radius-md); background: var(--atlas-paper); box-shadow: var(--atlas-shadow-sm); }
.continuation-card .button { margin-top: auto; }
.continuation-surface { border-top: 1px solid color-mix(in srgb, var(--topic-accent) 40%, transparent); }

.atlas-thread-strip { display: grid; grid-template-columns: minmax(13rem, 0.65fr) minmax(0, 1.35fr) auto; gap: 1rem; align-items: center; margin-block: 1rem; padding: 0.85rem 1rem; border: 1px solid rgb(255 255 255 / 0.12); border-radius: var(--atlas-radius-lg); background: rgb(8 21 33 / 0.88); color: white; box-shadow: var(--atlas-shadow-sm); }
.atlas-thread-strip__intro p { margin: 0; color: rgb(255 255 255 / 0.72); }
.atlas-thread-strip .eyebrow { color: color-mix(in srgb, var(--topic-accent) 72%, white); }
.atlas-thread-strip__list { min-width: 0; max-height: 8rem; overflow: auto; }
.atlas-thread-strip .atlas-thread-list { display: flex; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.atlas-thread-strip .atlas-thread-entry { min-width: 12rem; padding: 0.45rem 0.6rem; border: 1px solid rgb(255 255 255 / 0.14); border-radius: var(--atlas-radius-sm); background: rgb(255 255 255 / 0.055); }
.atlas-thread-strip .atlas-thread-entry::before { display: none; }
.atlas-thread-strip .atlas-thread-entry a { color: white; }
.atlas-thread-strip .atlas-thread-entry__reason { margin: 0.2rem 0 0; color: rgb(255 255 255 / 0.62); font-size: 0.72rem; }
.atlas-thread-strip .record-id { color: var(--topic-accent); }
.atlas-thread-widget { position: fixed; z-index: 48; right: 1rem; bottom: 1rem; width: min(28rem, calc(100% - 2rem)); }
.atlas-thread-trigger { min-height: 3rem; display: flex; align-items: center; gap: 0.55rem; margin-left: auto; padding: 0.65rem 0.9rem; border: 1px solid rgb(255 255 255 / 0.2); border-radius: 999px; background: var(--atlas-navy-950); color: white; box-shadow: var(--atlas-shadow-lg); font-weight: 800; }
.atlas-thread-count { min-width: 1.55rem; min-height: 1.55rem; display: inline-grid; place-items: center; border-radius: 50%; background: var(--topic-accent); color: var(--atlas-navy-950); font-size: 0.75rem; font-weight: 900; }
.atlas-thread-panel { max-height: min(70vh, 40rem); overflow: auto; margin-top: 0.6rem; padding: 1rem; border: var(--atlas-border); border-radius: var(--atlas-radius-lg); background: var(--atlas-paper); box-shadow: var(--atlas-shadow-lg); }
.atlas-thread-panel__header { display: flex; justify-content: space-between; gap: 0.8rem; align-items: flex-start; margin-bottom: 0.8rem; }
.atlas-thread-panel__header h2 { margin: 0; }
.atlas-thread-list { display: grid; gap: 0; padding: 0; margin: 0 0 1rem; list-style: none; }
.atlas-thread-entry { position: relative; display: grid; gap: 0.2rem; padding: 0.75rem 0.5rem 0.75rem 1.5rem; border-left: 2px solid var(--atlas-stone-300); }
.atlas-thread-entry::before { content: ""; position: absolute; top: 1rem; left: -0.38rem; width: 0.65rem; height: 0.65rem; border: 2px solid var(--topic-accent); border-radius: 50%; background: var(--atlas-paper); }
.atlas-thread-entry__topic { font-weight: 800; }
.atlas-thread-entry__reason { margin: 0; color: var(--atlas-muted); font-size: 0.82rem; }
.atlas-thread-list--compact .atlas-thread-entry:nth-last-child(n+8) { display: none; }
.atlas-thread-library { display: grid; gap: 1rem; }

.explore-mode-grid,
.signature-experience-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.explore-mode-card { border-top: 4px solid var(--topic-accent); }
.explore-mode-panel { width: 100%; padding: clamp(1rem, 3vw, 2rem); }

[data-reading-mode="true"] .context-rail { display: none; }
[data-reading-mode="true"] .topic-layout { grid-template-columns: minmax(0, var(--atlas-reading)); justify-content: center; }

@media (max-width: 70rem) {
  .topic-continuations { grid-template-columns: 1fr 1fr; }
  .atlas-thread-strip { grid-template-columns: 1fr; }
  .atlas-thread-strip .atlas-thread-list { overflow-x: auto; }
}

@media (max-width: 52rem) {
  .orientation-grid,
  .claim-dual-track,
  .topic-continuations,
  .signature-experience-grid,
  .explore-mode-grid { grid-template-columns: 1fr; }
  .topic-signature { width: 4.25rem; height: 4.25rem; margin-left: 0; }
  .topic-hero::after { inset: 0 0 0 30%; }
  .connection-drawer { width: 100%; height: min(92vh, 52rem); max-height: 92vh; margin: auto 0 0; border-radius: var(--atlas-radius-lg) var(--atlas-radius-lg) 0 0; }
  .atlas-thread-widget { right: 0.5rem; bottom: 5rem; max-width: calc(100% - 1rem); }
  .atlas-thread-strip { display: none; }
}

@media print {
  .atlas-thread-widget,
  .atlas-thread-strip,
  .topic-hero::before,
  .topic-hero::after,
  .topic-signature,
  .connection-drawer { display: none !important; }
}