/* preview/toc/toc.css — Topic Atlas. Reuses custom properties from
   preview/style.css (--text-secondary, --text-muted, --border, --brand-blue,
   --bg-subtle, --radius) so the atlas matches the rest of the site. */

.atlas-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}
.atlas-tabs a,
.atlas-tabs button {
  padding: 8px 14px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 0.9em;
  border: none;
  border-bottom: 2px solid transparent;
  background: none;
  font-family: inherit;
  cursor: pointer;
}
.atlas-tabs a.active,
.atlas-tabs button.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
  font-weight: 600;
}

.atlas-filters {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 0;
  background: var(--bg-page);
  border-bottom: 1px solid var(--border);
  margin-bottom: 16px;
}

.atlas-search {
  flex: 1 1 220px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.95em;
}

.atlas-select {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-size: 0.9em;
  color: var(--text-primary);
  background: var(--bg-page);
}

.atlas-reset {
  padding: 8px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  font-size: 0.9em;
}
.atlas-reset:hover { background: var(--border-light); }

.atlas-subject {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  margin-bottom: 8px;
}
.atlas-subject > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  cursor: pointer;
  list-style: none;
}
.atlas-subject > summary::-webkit-details-marker { display: none; }
.atlas-subject-title { font-weight: 600; }
.atlas-subject-meta { color: var(--text-muted); font-size: 0.85em; }
.atlas-subject-body { padding: 0 14px 12px 14px; }

.atlas-module {
  border-top: 1px solid var(--border-light);
}
.atlas-module > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 10px 4px;
  cursor: pointer;
  list-style: none;
}
.atlas-module > summary::-webkit-details-marker { display: none; }
.atlas-module-title { font-weight: 500; }
.atlas-module-meta { color: var(--text-muted); font-size: 0.82em; white-space: nowrap; }
.atlas-module-body { padding: 0 4px 12px 16px; }
.atlas-module-leaf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 4px;
  border-top: 1px solid var(--border-light);
}

.atlas-item {
  padding: 8px 0;
  border-bottom: 1px solid var(--border-light);
}
.atlas-item:last-child { border-bottom: none; }
.atlas-item-title { color: var(--brand-blue); text-decoration: none; margin-left: 6px; }
.atlas-item-title:hover { text-decoration: underline; }

.atlas-type {
  display: inline-block;
  font-size: 0.72em;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  border-radius: 4px;
  padding: 2px 6px;
}

.atlas-meta { color: var(--text-muted); font-size: 0.82em; margin-left: 8px; }

.atlas-badge {
  font-size: 0.75em;
  color: var(--green);
  background: var(--bg-subtle);
  border-radius: 4px;
  padding: 2px 6px;
}

.atlas-headings {
  list-style: none;
  margin: 4px 0 0 22px;
  padding: 0;
}
.atlas-headings li { font-size: 0.85em; color: var(--text-secondary); padding: 2px 0; }
.atlas-headings a { color: inherit; text-decoration: none; }
.atlas-headings a:hover { text-decoration: underline; }

.atlas-built { color: var(--text-muted); font-size: 0.82em; margin-top: 16px; }
.atlas-loading, .atlas-empty { color: var(--text-muted); padding: 10px 4px; font-size: 0.9em; }
.atlas-error { color: var(--red); padding: 10px 4px; font-size: 0.9em; }

/* Search view: flat, cross-subject result list. */
.atlas-results { display: flex; flex-direction: column; }
.atlas-result {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 8px 4px;
  border-bottom: 1px solid var(--border-light);
}
.atlas-result-heading {
  padding-left: 20px;
  color: var(--text-secondary);
}
.atlas-result-heading .atlas-item-title { color: var(--text-secondary); font-weight: 400; }

/* Image audit grid (Task 11). */
.atlas-image-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.atlas-image {
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 8px;
}
.atlas-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
}
.atlas-image figcaption { font-size: 0.82em; margin-top: 6px; color: var(--text-primary); }
.atlas-image-meta { font-size: 0.75em; color: var(--text-muted); margin-top: 2px; }
.atlas-image-module { font-size: 0.75em; color: var(--brand-blue); text-decoration: none; display: block; margin-top: 2px; }
.atlas-image-module:hover { text-decoration: underline; }
.atlas-image-suppressed { opacity: .45; }

@media (max-width: 480px) {
  .atlas-filters { flex-direction: column; align-items: stretch; }
  .atlas-select, .atlas-reset { width: 100%; }
}

/* — Tree view — */
.atlas-viewtabs { display: flex; gap: 8px; margin: 0 0 12px; }
.atlas-viewtabs button {
  background: none; border: 1px solid var(--border, #d0d0d0); border-radius: 4px;
  padding: 4px 12px; cursor: pointer; font: inherit; color: var(--text-secondary, #555);
}
.atlas-viewtabs button.active {
  border-color: currentColor; color: var(--text-primary, #111); font-weight: 600;
}
.atlas-tree-wrap { overflow-x: auto; }
.atlas-tree { font: 12px system-ui, sans-serif; display: block; }
.atlas-tree-links path { fill: none; stroke: var(--border, #ccc); stroke-width: 1.2px; }
.atlas-tree-node { cursor: pointer; }
.atlas-tree-node circle.has-children { fill: var(--text-primary, #333); }
.atlas-tree-node circle.leaf { fill: #fff; stroke: var(--border, #999); }
.atlas-tree-node text { fill: var(--text-primary, #111); }
.atlas-tree-node a text { fill: #1a5fb4; text-decoration: underline; }
.atlas-tree-subject text { font-weight: 600; }
.atlas-tree-heading text { fill: var(--text-secondary, #555); }
.atlas-tree-meta { fill: var(--text-secondary, #777); font-size: 11px; }

/* — Gap view — */
.atlas-gap-subject { border-bottom: 1px solid var(--border, #e5e5e5); padding: 8px 0; }
.atlas-gap-subject.covered { opacity: 0.55; }
.atlas-gap-subject summary { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.atlas-gap-bar {
  flex: 1; height: 6px; border-radius: 3px;
  background: #e6c9c9; overflow: hidden; min-width: 80px;
}
.atlas-gap-fill { display: block; height: 100%; background: #3a7d44; }
.atlas-gap-name { font-weight: 600; }
.atlas-gap-count { color: var(--text-secondary, #666); font-size: 12px; white-space: nowrap; }
.atlas-gap-finding { margin: 8px 0; color: var(--text-secondary, #555); }
.atlas-gap-topic { margin: 12px 0 4px; font-size: 13px; }
.atlas-gap-row { display: flex; gap: 10px; padding: 3px 0; align-items: baseline; flex-wrap: wrap; }
.atlas-gap-code { font-family: ui-monospace, monospace; font-weight: 600; min-width: 74px; }
.atlas-gap-text { flex: 1; min-width: 200px; }

/* — Heatmap — */
.atlas-heatmap-wrap { overflow-x: auto; }
.atlas-heatmap {
  display: grid;
  gap: 2px;
  min-width: 480px;
  font-size: 0.82em;
}
.atlas-heat-corner, .atlas-heat-colhead {
  padding: 6px 8px;
  font-weight: 600;
  color: var(--text-secondary, #555);
  white-space: nowrap;
}
.atlas-heat-colhead { text-align: center; font-family: ui-monospace, monospace; }
.atlas-heat-rowhead {
  padding: 6px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.atlas-heat-total-label { font-weight: 600; border-top: 2px solid var(--border, #ccc); }
.atlas-heat-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  border-radius: 3px;
  color: var(--text-primary, #111);
  font-family: ui-monospace, monospace;
  font-size: 0.9em;
}
.atlas-heat-cell.atlas-heat-total { border-top: 2px solid var(--border, #ccc); border-radius: 3px 3px 0 0; }
.atlas-heat-cell.atlas-heat-dark { color: #fff; }
.atlas-heat-cell.atlas-heat-absent {
  background: repeating-linear-gradient(
    45deg, var(--bg-subtle, #f4f4f4), var(--bg-subtle, #f4f4f4) 4px,
    var(--border-light, #e5e5e5) 4px, var(--border-light, #e5e5e5) 8px);
}
.atlas-heat-legend {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 12px;
  font-size: 0.82em;
  color: var(--text-secondary, #555);
}
.atlas-heat-legend-label { font-weight: 600; margin-right: 2px; }
.atlas-heat-legend-text { margin-right: 12px; }
.atlas-heat-swatch {
  display: inline-block;
  width: 18px;
  height: 14px;
  border-radius: 2px;
  margin-right: 2px;
}
.atlas-heat-swatch.atlas-heat-absent {
  border: 1px solid var(--border, #ccc);
  margin-left: 6px;
}

/* — 3D graph — */
.atlas-graph3d { width: 100%; height: 70vh; min-height: 420px; border-radius: 6px; overflow: hidden; }
.atlas-graph3d canvas { display: block; }

/* — Sunburst — */
.atlas-sunburst-wrap { display: flex; justify-content: center; }
.atlas-sunburst { width: 100%; max-width: 640px; height: auto; display: block; }
.atlas-sunburst-arcs path { stroke: var(--bg, #fff); stroke-width: 1px; }
.atlas-sunburst-centre-circle { fill: none; pointer-events: all; cursor: pointer; }
.atlas-sunburst-centre-name {
  fill: var(--text-primary, #111); font: 600 13px system-ui, sans-serif;
}
.atlas-sunburst-centre-count { fill: var(--text-secondary, #666); font: 11px system-ui, sans-serif; }

/* ===========================================================================
   Public site (project academe-atlas; domain not yet assigned) — appended,
   nothing above is modified.
   This file is also served to the gated hub, where preview/style.css supplies
   the custom properties and the base reset. The public build copies toc.css
   ALONE, so every rule below is scoped to .public-* / body.public-body and
   re-declares the tokens the atlas client needs. On the gated site no element
   carries .public-body, so none of this applies there.
   =========================================================================== */

body.public-body {
  /* Mirrors preview/style.css :root so the .atlas-* rules above resolve when
     style.css is not on the page. Scoped to the body, never to :root, so the
     gated site's own values are untouched. */
  --brand-blue: #2563eb;
  --brand-dark: #1e293b;
  --text-primary: #1e293b;
  --text-secondary: #64748b;
  --text-muted: #94a3b8;
  --bg-page: #ffffff;
  --bg-subtle: #f8fafc;
  --bg-nav: #f1f5f9;
  --border: #e2e8f0;
  --border-light: #f1f5f9;
  --green: #16a34a;
  --amber: #d97706;
  --red: #dc2626;
  --radius: 8px;

  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-text-size-adjust: 100%;
}
body.public-body * { box-sizing: border-box; }

.public-shell { display: flow-root; }
.public-container { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
.public-narrow { max-width: 760px; }

/* — Header and footer — */
.public-topbar {
  background: var(--brand-dark);
  color: #fff;
  padding: 14px 0;
}
.public-topbar .public-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: baseline;
  justify-content: space-between;
}
.public-brand { font-size: 1.05em; font-weight: 700; letter-spacing: -0.01em; }
.public-brand a { color: #fff; text-decoration: none; }
.public-topbar-note { font-size: 0.8em; color: #cbd5e1; }
.public-topbar-note a { color: #cbd5e1; }

.public-foot {
  margin-top: 56px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.82em;
}
.public-foot p { margin: 0 0 6px; }

/* — Hero — */
.public-hero {
  background: var(--brand-dark);
  color: #fff;
  padding: 56px 0 52px;
}
.public-hero h1 {
  margin: 0 0 20px;
  font-size: 2em;
  line-height: 1.3;
  letter-spacing: -0.02em;
  font-weight: 700;
}
.public-hero-lede { margin: 0 0 16px; font-size: 1.05em; color: #e2e8f0; }
.public-hero-objection {
  margin: 0;
  padding: 14px 16px;
  border-left: 3px solid var(--brand-blue);
  background: rgba(255, 255, 255, 0.06);
  border-radius: 0 var(--radius) var(--radius) 0;
  color: #e2e8f0;
  font-size: 0.96em;
}
.public-hero-objection em { color: #fff; }

/* — Sections — */
.public-section { padding: 44px 0 0; }
.public-section h2 {
  margin: 0 0 6px;
  font-size: 1.35em;
  letter-spacing: -0.01em;
  line-height: 1.35;
}
.public-section h3 { margin: 0 0 8px; font-size: 1.05em; line-height: 1.4; }
.public-section p { margin: 0 0 14px; }
.public-kicker {
  margin: 0 0 18px;
  color: var(--text-secondary);
  font-size: 0.95em;
}

/* — Figures band — */
.public-figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.public-figure {
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.public-figure-value {
  display: block;
  font-size: 1.7em;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--brand-dark);
}
.public-figure-label {
  display: block;
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.88em;
  line-height: 1.45;
}
.public-stamp {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.82em;
}

/* — Pillars — */
.public-pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-pillar {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.public-pillar p { margin: 0 0 10px; font-size: 0.95em; }
.public-pillar p:last-child { margin-bottom: 0; }
.public-pillar-note { color: var(--text-secondary); font-size: 0.88em; }

/* — Named list (Canvas) — */
.public-names {
  margin: 0 0 14px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--brand-blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--bg-subtle);
  font-size: 0.95em;
  line-height: 1.9;
}

/* — Diagram grid — */
.public-diagrams {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.public-diagram { margin: 0; }
.public-diagram img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-page);
}
.public-diagram figcaption {
  margin-top: 8px;
  color: var(--text-secondary);
  font-size: 0.88em;
  line-height: 1.5;
}
.public-diagram-title { display: block; color: var(--text-primary); font-weight: 600; }

/* — Call to action — */
.public-cta {
  margin-top: 44px;
  padding: 28px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-subtle);
}
.public-cta h2 { margin: 0 0 8px; }
.public-cta p { margin: 0 0 16px; color: var(--text-secondary); }
/* Scoped to body.public-body so it outranks the generic
   `body.public-body a { color: var(--brand-blue) }` rule further down. As a
   bare `.public-btn` (0,1,0) it lost to that selector (0,1,1) and the label
   rendered blue-on-blue — an invisible call to action. */
body.public-body .public-btn {
  display: inline-block;
  padding: 11px 20px;
  border-radius: var(--radius);
  background: var(--brand-blue);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
body.public-body .public-btn:hover { background: #1d4ed8; color: #fff; }

/* — The public atlas surface — */
.public-surface { padding: 28px 0 0; }
.public-surface h1 { margin: 0 0 6px; font-size: 1.5em; letter-spacing: -0.01em; }
.public-surface-lede { margin: 0 0 20px; color: var(--text-secondary); }
.public-back { display: inline-block; margin-bottom: 14px; font-size: 0.85em; }
body.public-body a { color: var(--brand-blue); }

/* — 400px and narrower: everything collapses to one column — */
@media (max-width: 560px) {
  .public-container { padding: 0 16px; }
  .public-hero { padding: 36px 0 32px; }
  .public-hero h1 { font-size: 1.5em; }
  .public-figures,
  .public-pillars,
  .public-diagrams { grid-template-columns: 1fr; }
  .public-figure-value { font-size: 1.45em; }
}