/* ───────────────────────────────────────
   FILE: css/pages.css
   PURPOSE: Philosophy/doc page prose, page hero rules, and the roadmap grid
            (including its responsive single-column override).
   PART OF: Sentinel website stylesheet (split from css/styles.css)
   LAST UPDATED: 2026-06-05
   ─────────────────────────────────────── */

/* DOC / PHILOSOPHY PAGES */
.doc-shell { padding-bottom: 120px; }
.doc-prose { max-width: 720px; }
.doc-prose .doc-rule { margin: 38px 0 14px; }
.doc-prose .doc-rule:first-child { margin-top: 0; }

/* ROADMAP */
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  background: var(--border);
  gap: 1px;
}
.roadmap-col {
  background: var(--card);
  padding: 24px 22px;
}
.roadmap-col-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border);
  padding-bottom: 14px;
  margin-bottom: 14px;
}
.roadmap-col-tag {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--accent);
}
.roadmap-col-sub {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--muted);
}
.roadmap-item {
  font-size: 14px;
  color: var(--text-dim);
  line-height: 1.5;
  padding: 9px 0;
  border-bottom: 1px solid var(--border-2);
}
.roadmap-item:last-child { border-bottom: none; }
.roadmap-note {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--muted);
}

@media (max-width: 860px) {
  .roadmap-grid { grid-template-columns: 1fr; }
}

/* ─── PHILOSOPHY CONCEPT DIAGRAM (Part 3) ────────────────── */
/* One self-drawing visual per page; driven by js/philosophy/philosophy.js. */
.phil-concept { width: 100%; max-width: 640px; margin: 4px 0 34px; }
.phil-concept svg { width: 100%; height: auto; display: block; overflow: visible; }

.pc-stroke {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s var(--ease-io);
}
.pc-stroke.dim { stroke: var(--border); stroke-width: 1; }
.phil-concept.drawn .pc-stroke { stroke-dashoffset: 0; }
.pc-stroke.s1 { transition-delay: 0.12s; }
.pc-stroke.s2 { transition-delay: 0.30s; }
.pc-stroke.s3 { transition-delay: 0.48s; }
.pc-stroke.s4 { transition-delay: 0.66s; }
.pc-stroke.s5 { transition-delay: 0.84s; }

.pc-fill, .pc-text { opacity: 0; transition: opacity 0.5s ease; }
.phil-concept.drawn .pc-fill, .phil-concept.drawn .pc-text { opacity: 1; }
.pc-fill { fill: var(--accent); }
.pc-text.t1 { transition-delay: 0.35s; }
.pc-text.t2 { transition-delay: 0.55s; }
.pc-text.t3 { transition-delay: 0.75s; }
.pc-text.t4 { transition-delay: 0.95s; }
.pc-text.t5 { transition-delay: 1.15s; }

.pc-label  { fill: var(--muted);  font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; }
.pc-accent { fill: var(--accent); font-family: var(--font-mono); font-size: 12px; letter-spacing: 2px; }
.pc-strong { fill: var(--text);   font-family: var(--font-body); font-size: 15px; }

@media (prefers-reduced-motion: reduce) {
  .pc-stroke { transition: none; stroke-dashoffset: 0; }
  .pc-fill, .pc-text { transition: none; opacity: 1; }
}

/* ─── CONDENSED LEDE + FULL-TEXT EXPANDER (Part 3) ───────── */
.doc-lede {
  font-size: 17px;
  line-height: 1.72;
  color: var(--text-dim);
  max-width: 680px;
}
.doc-lede p { margin-bottom: 16px; }
.doc-lede strong { color: var(--text); font-weight: 600; }
.doc-lede em { color: var(--accent); font-style: normal; }

.doc-fulltext { margin-top: 30px; border-top: 1px solid var(--border); padding-top: 16px; }
.doc-fulltext > summary {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.24em;
  color: var(--accent);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.doc-fulltext > summary::-webkit-details-marker { display: none; }
.doc-fulltext > summary::after { content: '[ + ]'; color: var(--muted); }
.doc-fulltext[open] > summary::after { content: '[ – ]'; }
.doc-fulltext > summary:hover { color: var(--text); }
.doc-fulltext .doc-prose { margin-top: 18px; max-width: 720px; }