/* ============================================================
   css/wiki.css — shared by wiki.html, graph.html, news.html, and
   theories.html. Three-column wiki shell, explorer tree, TOC,
   mini-graph, the full graph page's toolbar, and the simpler
   feed-list layout used by the two off-graph tabs. Reuses design
   tokens from css/styles.css (loaded first on every page here).
   ============================================================ */

/* ── off-graph feed pages (news.html, theories.html) ── */
.feed-hero { padding: 40px 40px 8px; }
.feed-toolbar { padding: 16px 40px 0; display: flex; flex-direction: column; gap: 10px; }
.feed-filter-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.feed-filter-row .label-mono { margin-right: 4px; text-transform: none; }
.feed-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; padding: 24px 40px 56px; }
.feed-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; padding: 20px; }
.feed-article-wrap { padding: 24px 40px 64px; max-width: 860px; }
.feed-status {
  margin-top: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.5px;
  color: var(--muted); line-height: 1.5;
}
.feed-related-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

.wiki-shell {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr) 300px;
  align-items: start;
  flex: 1;
}

.wiki-explorer, .wiki-rail {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 20px;
  border-right: 1px solid var(--border);
}

.wiki-rail { border-right: none; border-left: 1px solid var(--border); }

.wiki-article { min-width: 0; padding: 40px 48px 64px; }

@media (max-width: 1150px) {
  .wiki-shell { grid-template-columns: 240px minmax(0, 1fr); }
  .wiki-rail { display: none; }
}

.wiki-browse-toggle { display: none; }
.wiki-explorer-backdrop { display: none; }

/* Below this point the explorer stops taking up grid space at all — it
   becomes a fixed off-canvas drawer (same visual language as the header's
   nav drawer), toggled by .wiki-browse-toggle. That's what makes the
   article full-width by default instead of getting pushed below a long
   explorer tree. The right rail (mini-graph + TOC) isn't hidden here, just
   demoted to a normal block that now naturally lands below the article in
   flow order, since the explorer no longer occupies a column beside it. */
@media (max-width: 900px) {
  .wiki-shell { grid-template-columns: 1fr; }

  .wiki-explorer {
    position: fixed;
    top: 0;
    left: -320px;
    width: min(300px, 84vw);
    height: 100%;
    z-index: 950;
    background: var(--surface);
    border-right: 1px solid var(--border);
    transition: left 220ms ease;
  }
  .wiki-explorer.is-open { left: 0; }

  .wiki-rail {
    display: block;
    position: static;
    max-height: none;
    border-left: none;
    border-top: 1px solid var(--border);
    padding: 24px 20px 40px;
  }

  .wiki-article { padding: 24px 16px 48px; }

  .wiki-browse-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    padding: 0 16px;
    height: 44px;
    border: 1px solid var(--border-hover);
    border-radius: var(--r-control);
    background: none;
    color: var(--text);
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 1px;
    cursor: pointer;
  }

  .wiki-explorer-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 940;
    opacity: 0;
    pointer-events: none;
    transition: opacity 200ms ease;
  }
  .wiki-explorer-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .wiki-explorer, .wiki-explorer-backdrop { transition: none; }
}

/* ── explorer ── */
.wiki-explorer-search { margin-bottom: 16px; }
.wiki-explorer-search input { width: 100%; }

.wiki-tree-group { margin-bottom: 18px; }
.wiki-tree-group-head {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 2px;
  color: var(--muted-dim); text-transform: uppercase; margin-bottom: 6px;
}

.wiki-tree-phase summary {
  cursor: pointer; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 1.5px;
  color: var(--muted); padding: 4px 2px; list-style: none;
}
.wiki-tree-phase summary::-webkit-details-marker { display: none; }
.wiki-tree-phase[open] summary { color: var(--text-soft); }

.wiki-tree-item {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px; margin: 1px 0;
  border-radius: var(--r-control); font-size: 13px; color: var(--muted); text-decoration: none;
}
.wiki-tree-item:hover { background: var(--field); color: var(--text); }
.wiki-tree-item.is-active { background: rgba(70,196,110,0.1); color: var(--terminal); }
.wiki-tree-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }

.wiki-tree-row { display: flex; align-items: center; gap: 2px; }
.wiki-tree-row .wiki-tree-item { flex: 1; min-width: 0; }
.wiki-tree-watch {
  flex-shrink: 0; width: 26px; height: 26px; margin: 1px 0;
  border-radius: 5px; border: 1.5px solid var(--border-hover); background: none;
  color: var(--bg); font-size: 12px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.wiki-tree-watch.is-watched { background: var(--terminal); border-color: var(--terminal); color: var(--bg); }
.wiki-tree-watch:hover { border-color: var(--terminal); }

.wiki-tree-more {
  background: none; border: none; color: var(--muted-dim); font-family: var(--font-mono);
  font-size: 10px; letter-spacing: 1px; padding: 4px 8px; cursor: pointer;
}
.wiki-tree-more:hover { color: var(--text); }

/* ── article ── */
.wiki-news-banner {
  margin-top: 20px; padding: 12px 16px; border-radius: var(--r-control);
  background: rgba(244,63,94,0.08); border: 1px solid rgba(244,63,94,0.35);
  color: var(--text-soft); font-size: 13px; line-height: 1.5;
}
.wiki-news-banner strong { color: #f43f5e; }

.wiki-article-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.wiki-watch-toggle {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  margin-left: auto; border-radius: var(--r-control); border: 1px solid var(--border-hover);
  background: none; color: var(--muted); font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1px; cursor: pointer;
}
.wiki-watch-toggle:hover { border-color: var(--terminal); color: var(--text); }
.wiki-watch-toggle.is-watched { background: rgba(70,196,110,0.1); border-color: var(--terminal); color: var(--terminal); }
.wiki-watch-check {
  width: 16px; height: 16px; border-radius: 3px; border: 1.5px solid currentColor;
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px;
}
.wiki-article-title-row { display: flex; align-items: center; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.wiki-article-title { font-size: 44px; }
.wiki-section { margin-top: 32px; }
.wiki-summary-lede { font-size: 17px; color: var(--text-soft); }

.wiki-importance-meter {
  height: 6px; background: var(--field); border-radius: var(--r-dot); overflow: hidden; margin: 10px 0;
}
.wiki-importance-fill { height: 100%; background: linear-gradient(90deg, var(--infinity), var(--terminal)); }
.wiki-relevance-note { font-family: var(--font-mono); font-size: 11px; color: var(--muted-dim); margin-top: 8px; }

.wiki-related-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 12px;
}
.wiki-related-card { display: flex; gap: 10px; align-items: center; color: inherit; text-decoration: none; }
.wiki-related-card .wiki-node-thumb, .wiki-related-card .wiki-node-monogram { width: 36px; height: 36px; font-size: 14px; }
.wiki-related-name { font-family: var(--font-display); font-weight: 600; font-size: 14px; }
.wiki-related-type { font-family: var(--font-mono); font-size: 9px; color: var(--muted-dim); letter-spacing: 1px; }

.wiki-node-thumb, .wiki-node-monogram {
  border-radius: 50%; flex-shrink: 0; object-fit: cover; display: flex;
  align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700;
}
.wiki-node-thumb.is-title, .wiki-node-monogram.is-title { border-radius: var(--r-card); aspect-ratio: 16/9; width: auto; }
.wiki-node-monogram { border: 1px solid var(--border-hover); }

.wiki-link { border-bottom: 1px dotted currentColor; }
.wiki-link-broken { color: var(--muted-dim); border-bottom: 1px dotted var(--muted-dim); cursor: help; }

.wiki-notfound-suggestions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }

/* ── right rail: TOC + mini-graph ── */
.wiki-rail-block { margin-bottom: 24px; }
.wiki-toc { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.wiki-toc button {
  all: unset; cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: 1px; color: var(--muted); padding: 4px 0; display: block; width: 100%;
}
.wiki-toc button:hover { color: var(--text); }

#wiki-rail-graph svg { display: block; width: 100%; height: auto; }
.wiki-minigraph-empty { font-size: 12px; color: var(--muted-dim); }
.mini-node { cursor: pointer; }
.mini-node:hover { filter: brightness(1.3); }

/* ── full graph page ── */
.graph-shell { display: flex; flex-direction: column; flex: 1; }
.graph-toolbar { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; padding: 16px 40px; border-bottom: 1px solid var(--border); }
.graph-type-toggle { display: flex; gap: 6px; flex-wrap: wrap; }
.graph-importance-control { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; color: var(--muted); flex-wrap: wrap; }
.graph-importance-control input[type="range"] { width: 160px; accent-color: var(--terminal); }
.graph-legend { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-family: var(--font-mono); font-size: 10px; color: var(--muted-dim); }
.graph-legend-dot { display: inline-flex; align-items: center; gap: 6px; }
.graph-legend-dot span { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.graph-hint-touch { display: none; }

#graph-canvas-wrap { position: relative; flex: 1; overflow: hidden; min-height: 320px; touch-action: none; }
#graph-svg { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
#graph-svg:active { cursor: grabbing; }

@media (max-width: 700px) {
  .graph-toolbar { padding: 12px 16px; gap: 10px; }
  .graph-legend-dot .graph-legend-note { display: none; }
  .graph-hint-desktop { display: none; }
  .graph-hint-touch { display: inline; }
  .graph-importance-control input[type="range"] { width: 120px; }
}
.graph-node-label {
  font-family: var(--font-display); font-size: 10px; fill: var(--text-soft); pointer-events: none;
  text-shadow: 0 0 4px var(--bg), 0 0 4px var(--bg), 0 0 4px var(--bg);
}

.filter-chip {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: 1.2px; padding: 6px 12px;
  border-radius: var(--r-pill); border: 1px solid var(--border-hover); background: transparent;
  color: var(--muted); cursor: pointer; white-space: nowrap;
}
.filter-chip:hover { border-color: #556; }
.filter-chip.is-active { background: var(--text); color: var(--bg); border-color: var(--text); }