/* Visual refinement layer: technical handbook + scientific documentation */

:root {
  --accent-core: #1676a3;
  --accent-particle: #b06a16;
  --accent-quantum: #7059b3;
  --accent-tool: #168c7d;
}

/* Reading rhythm */
.content > h2,
.content h2 { margin-top: 3.35rem; }
.content h2 + p,
.content h2 + .card-grid,
.content h2 + .topic-figure { margin-top: 1.15rem; }

/* Interactive homepage system map */
.system-map {
  margin: 28px 0 2px;
  padding: 22px;
  border: 1px solid #d3e0e9;
  border-radius: 18px;
  background:
    radial-gradient(circle at 50% 0%, rgba(22,118,163,.10), transparent 28%),
    linear-gradient(180deg,#ffffff,#f7fafc);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.system-map-header { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:18px; }
.system-map-header strong { display:block; color:#173b56; font-size:1rem; }
.system-map-header span { color:#718194; font-size:.76rem; }
.system-map-hub { display:flex; justify-content:center; margin:0 auto 18px; }
.system-map-node {
  display:block;
  padding:11px 13px;
  border:1px solid #cad8e4;
  border-radius:10px;
  background:#fff;
  color:#244b68;
  text-align:center;
  font-size:.78rem;
  font-weight:750;
  line-height:1.25;
  box-shadow:0 3px 10px rgba(18,40,65,.04);
  text-decoration:none;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease;
}
.system-map-node:hover { transform:translateY(-2px); box-shadow:0 7px 18px rgba(18,40,65,.09); text-decoration:none; }
.system-map-node small { display:block; margin-top:3px; color:#7a8b9d; font-size:.63rem; font-weight:650; letter-spacing:.02em; }
.system-map-node.hub { min-width:220px; padding:14px 18px; border-color:#72b7ad; background:#eff9f7; color:#0e665d; font-size:.86rem; }
.system-map-branches { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:13px; }
.system-map-branch { position:relative; display:flex; flex-direction:column; gap:8px; padding-top:17px; }
.system-map-branch::before { content:""; position:absolute; top:0; left:50%; width:1px; height:12px; background:#b6c7d5; }
.system-map-branch::after { content:""; position:absolute; top:0; left:50%; width:7px; height:7px; border-right:2px solid #91a8ba; border-bottom:2px solid #91a8ba; transform:translate(-50%,6px) rotate(45deg); }
.system-map-branch.core .system-map-node { border-left:3px solid var(--accent-core); }
.system-map-branch.particle .system-map-node { border-left:3px solid var(--accent-particle); }
.system-map-branch.quantum .system-map-node { border-left:3px solid var(--accent-quantum); }
.system-map-branch.tool .system-map-node { border-left:3px solid var(--accent-tool); }
.system-map-connector { color:#98aabd; text-align:center; font-size:.74rem; line-height:1; }
.system-map-footer { margin-top:15px; color:#738397; font-size:.72rem; text-align:center; }

/* Homepage category hierarchy */
.card-grid.category-tools .reference-card { border-top: 3px solid rgba(22,140,125,.72); }
.card-grid.category-core .reference-card { border-top: 3px solid rgba(22,118,163,.72); }
.card-grid.category-particles .reference-card { border-top: 3px solid rgba(176,106,22,.72); }
.card-grid.category-quantum .reference-card { border-top: 3px solid rgba(112,89,179,.72); }
.card-grid.category-reference .reference-card { border-top: 3px solid rgba(82,106,130,.68); }

.reference-card[data-symbol] { position:relative; padding-top: 46px; }
.reference-card[data-symbol]::before {
  content: attr(data-symbol);
  position:absolute;
  top:14px;
  left:18px;
  display:grid;
  place-items:center;
  min-width:25px;
  height:25px;
  padding:0 5px;
  border:1px solid #d1dce6;
  border-radius:7px;
  background:#f7fafc;
  color:#294b65;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size:.72rem;
  font-weight:800;
  line-height:1;
  letter-spacing:-.02em;
}
.category-core .reference-card[data-symbol]::before { color:var(--accent-core); border-color:rgba(22,118,163,.28); background:rgba(22,118,163,.06); }
.category-particles .reference-card[data-symbol]::before { color:var(--accent-particle); border-color:rgba(176,106,22,.28); background:rgba(176,106,22,.06); }
.category-quantum .reference-card[data-symbol]::before { color:var(--accent-quantum); border-color:rgba(112,89,179,.28); background:rgba(112,89,179,.06); }
.category-tools .reference-card[data-symbol]::before { color:var(--accent-tool); border-color:rgba(22,140,125,.28); background:rgba(22,140,125,.06); }
.reference-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }

/* Active navigation: make location unmistakable */
.sidebar a.active {
  position:relative;
  background:#112a40;
  color:#fff;
  font-weight:760;
}
.sidebar a.active::before {
  content:"";
  position:absolute;
  left:-8px;
  top:5px;
  bottom:5px;
  width:3px;
  border-radius:2px;
  background:#62d6c7;
}

/* Page TOC: reserve space on wide screens so it never clips the article. */
.page-toc {
  float:none;
  width:100%;
  max-width:none;
  margin:0 0 26px;
  position:relative;
  max-height:300px;
  overflow:auto;
}
.page-toc a {
  border-left: 2px solid transparent;
  padding-left: 8px;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.page-toc a.active {
  border-left-color:#0f988a;
  color:#0b665e;
  background:rgba(15,152,138,.055);
  font-weight:750;
}
@media (min-width: 1350px) {
  .content:has(.page-toc) {
    padding-right: 360px;
    max-width: 1320px;
  }
  .content:has(.page-toc) .page-toc {
    position: fixed;
    z-index: 20;
    top: 168px;
    right: 24px;
    width: 286px;
    max-height: calc(100vh - 194px);
    margin:0;
    overflow-y:auto;
    scrollbar-width:thin;
    box-shadow:0 7px 24px rgba(18,40,65,.08);
  }
}

/* Publication-like figures */
main.content { counter-reset: topicfigure; }
.topic-figure { counter-increment: topicfigure; box-shadow:0 5px 18px rgba(18,40,65,.045); }
.topic-figure figcaption {
  padding-top:.72rem;
  border-top:1px solid #e4eaf0;
  text-align:left;
}
.topic-figure figcaption::before {
  content:"Figure " counter(topicfigure) ". ";
  color:#304e67;
  font-weight:800;
}
.topic-figure figcaption a { font-weight:650; }

/* Equations: subtle journal-like framing */
.equation-box {
  position:relative;
  border-left-width:3px;
  box-shadow:0 2px 10px rgba(18,40,65,.035);
}
.equation-box::before {
  content:"KEY RELATION";
  display:block;
  margin-bottom:.35rem;
  color:#5d7388;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.12em;
}

/* Technical footer index */
.footer-topics {
  display:flex;
  flex-wrap:wrap;
  gap:7px 14px;
  margin:0 0 18px;
  padding:14px 0 16px;
  border-bottom:1px solid var(--line);
}
.footer-topics a { color:#425f78; font-size:.75rem; font-weight:700; }
.footer-topics a:hover { color:#0f857a; }

/* Keep small screens uncluttered */
@media (max-width: 900px) {
  .system-map { padding:16px; }
  .system-map-header { align-items:flex-start; flex-direction:column; gap:4px; }
  .system-map-branches { grid-template-columns:1fr 1fr; }
  .reference-card[data-symbol] { padding-top:42px; }
}
@media (max-width: 620px) {
  .system-map-branches { grid-template-columns:1fr; }
  .system-map-branch::before,.system-map-branch::after { display:none; }
}

@media (prefers-reduced-motion: reduce) {
  .reference-card,.system-map-node { transition:none; }
}