/* ============================================================
   page-whitepaper.css
   Page-specific styles for mios_website.html
   Requires: global.css, page-header-banner.css
   ============================================================ */

/* ── TAXONOMY GRID ──────────────────────────────────────────── */
.taxonomy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.taxonomy-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1.25rem;
}
.taxonomy-abbr {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  color: var(--accent); letter-spacing: 0.08em; margin-bottom: 0.3rem;
}
.taxonomy-name {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.5rem;
}
.taxonomy-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.55; }

/* ── ARCHITECTURE PILLARS ───────────────────────────────────── */
.arch-pillars { display: flex; flex-direction: column; gap: 1.25rem; margin: 1.5rem 0; }
.arch-pillar {
  display: grid; grid-template-columns: 3rem 1fr;
  gap: 1rem; align-items: start;
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1.25rem;
}
.pillar-num {
  font-family: var(--font-mono); font-size: 1.5rem; font-weight: 600;
  color: var(--border-md); line-height: 1; padding-top: 0.15rem;
}
.pillar-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.4rem;
}
.pillar-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ── ROADMAP ────────────────────────────────────────────────── */
.roadmap {
  display: flex; flex-direction: column; gap: 0;
  margin: 1.5rem 0; position: relative;
}
.roadmap::before {
  content: ''; position: absolute;
  left: 6.5rem; top: 0; bottom: 0;
  width: 1px; background: var(--border-md);
}
.phase {
  display: grid; grid-template-columns: 6.5rem 1fr;
  gap: 1.5rem; padding: 1.25rem 0; position: relative;
}
.phase:not(:last-child) { border-bottom: 1px solid var(--border); }
.phase-label { text-align: right; padding-right: 1.5rem; position: relative; }
.phase-label::after {
  content: ''; position: absolute;
  right: -5px; top: 0.4rem;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--navy);
}
.phase-time {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  color: var(--accent); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.4;
}
.phase-name {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.35rem;
}
.phase-desc { font-size: 0.88rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ── SECTOR GRID ────────────────────────────────────────────── */
.sector-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.sector-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: 4px; padding: 1.25rem; border-top: 2px solid var(--accent);
}
.sector-name {
  font-family: var(--font-display); font-size: 0.95rem; font-weight: 700;
  color: var(--text); margin-bottom: 0.4rem;
}
.sector-desc { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; }

/* ── COMPARE TABLE ──────────────────────────────────────────── */
.compare-table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; font-size: 0.88rem; }
.compare-table th {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent);
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border-md); text-align: left;
}
.compare-table td {
  padding: 0.75rem 1rem; border-bottom: 1px solid var(--border);
  color: var(--text-muted); line-height: 1.6; vertical-align: top;
}
.compare-table tr:last-child td { border-bottom: none; }
.compare-table td:first-child {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--text); white-space: nowrap;
}
.compare-table td.positive { color: #82c48c; }
.compare-table td.negative { color: #c48282; }

/* ── CODE BLOCK ─────────────────────────────────────────────── */
.code-block {
  background: #060f1c; border: 1px solid var(--border-md);
  border-radius: 4px; padding: 1.5rem 1.75rem;
  margin: 1.5rem 0; overflow-x: auto;
}
.code-block pre {
  font-family: var(--font-mono); font-size: 0.82rem;
  line-height: 1.65; color: #a8d8a0; margin: 0; white-space: pre;
}
.code-block .code-comment { color: #5a7a6a; }
.code-block .code-keyword { color: #c792ea; }
.code-block .code-type    { color: #82aaff; }
.code-block .code-string  { color: #c3e88d; }
.code-block .code-number  { color: #f78c6c; }
.code-block .code-label {
  font-family: var(--font-mono); font-size: 0.65rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-dim); margin-bottom: 0.75rem; display: block;
}

/* ── DIAGRAM BOX ────────────────────────────────────────────── */
.diagram-box {
  background: #060f1c; border: 1px solid var(--border-md);
  border-radius: 4px; padding: 1.75rem; margin: 1.75rem 0; overflow-x: auto;
}
.diagram-box pre {
  font-family: var(--font-mono); font-size: 0.78rem;
  line-height: 1.6; color: var(--text-muted); margin: 0; white-space: pre;
}
.diagram-label {
  font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-dim);
  margin-bottom: 1rem; display: flex; align-items: center; gap: 0.6rem;
}
.diagram-label::before {
  content: ''; display: block; width: 1.5rem; height: 1px; background: var(--accent);
}
.diagram-box .hl-accent { color: #e74c3c; }
.diagram-box .hl-gold   { color: var(--gold); }
.diagram-box .hl-green  { color: #82c48c; }
.diagram-box .hl-dim    { color: var(--text-dim); }

/* ── RISK GRID ──────────────────────────────────────────────── */
.risk-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem; margin: 1.5rem 0;
}
.risk-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-left: 3px solid var(--accent); border-radius: 0 4px 4px 0;
  padding: 1.1rem 1.25rem;
}
.risk-title {
  font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent-lt); margin-bottom: 0.4rem;
}
.risk-desc { font-size: 0.84rem; color: var(--text-muted); line-height: 1.6; }
.risk-mitigation {
  font-size: 0.8rem; color: var(--text-dim);
  margin-top: 0.5rem; font-style: italic; line-height: 1.5;
}

/* ── H4 SUB-SUBSECTION ──────────────────────────────────────── */
h4.sub-subsection-title {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-lt);
  margin: 1.75rem 0 0.6rem;
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .arch-pillar { grid-template-columns: 1fr; }
  .roadmap::before { display: none; }
  .phase { grid-template-columns: 1fr; gap: 0.5rem; }
  .phase-label { text-align: left; }
  .phase-label::after { display: none; }
  .compare-table { font-size: 0.78rem; }
  .compare-table th, .compare-table td { padding: 0.6rem 0.6rem; }
}

/* ── PRECEDENT / COMPARISON TABLE ───────────────────────────── */
.precedent-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: .82rem;
}
.precedent-table th, .precedent-table td {
  border: 1px solid var(--border);
  padding: .55rem .85rem;
  text-align: left;
}
.precedent-table th {
  color: var(--gold);
  font-weight: 600;
  letter-spacing: .03em;
  background: rgba(255,255,255,0.02);
}
.precedent-table td { color: var(--text-dim); }
.precedent-table tr:first-child td { color: var(--text); }