/* ============================================================
   VerdictGit — specifications page
   Loaded after site.css + legal.css, on specs.html only.
   Tables, requirement cards, tier badges, page TOC.
   ============================================================ */

.specs-main { padding: 136px 0 96px; }
.page-head { max-width: 820px; }
.page-sub { color: var(--muted); font-size: 18px; margin-top: 18px; }
.page-sub strong { color: var(--text); }

/* proof strip sits tighter under the page head than in the hero */
.specs-main .proof-strip { margin: 40px 0 0; max-width: none; }

/* ---------- on-page TOC ---------- */
.spec-toc {
  display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px;
}
.spec-toc a {
  font-size: 14px; font-weight: 600; text-decoration: none; color: var(--muted);
  border: 1px solid var(--line-strong); border-radius: 999px;
  padding: 8px 16px; background: var(--panel); transition: border-color 0.15s ease, color 0.15s ease;
}
.spec-toc a:hover { border-color: rgba(16, 185, 129, 0.5); color: var(--accent-2); }

/* ---------- spec sections ---------- */
.spec-section { padding-top: 88px; }
.spec-section .section-head { margin-bottom: 38px; }
.spec-subhead { font-size: 21px; font-weight: 800; letter-spacing: -0.02em; margin: 42px 0 18px; }
.spec-cards { margin-top: 20px; }
.spec-cards a, .req-card a, .faq-a a {
  color: var(--accent-2); text-decoration: underline; text-underline-offset: 3px;
}
.spec-cards a:hover, .req-card a:hover, .faq-a a:hover { color: #6ee7b7; }

/* ---------- spec tables ---------- */
.table-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--panel); overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.table-wrap + .table-wrap { margin-top: 20px; }
.spec-table { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15.5px; }
.spec-table th {
  font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2);
  text-align: left; padding: 15px 22px; border-bottom: 1px solid var(--line-strong);
  background: rgba(148, 163, 184, 0.04);
}
.spec-table td {
  padding: 15px 22px; color: var(--muted); vertical-align: top;
  border-bottom: 1px solid var(--line); line-height: 1.55;
}
.spec-table tbody tr:last-child td { border-bottom: 0; }
.spec-table td:first-child { color: var(--text); font-weight: 600; white-space: nowrap; }
.spec-table td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); font-weight: 600; }
.spec-table th.num { text-align: right; }
.spec-table .mono { color: var(--accent-2); font-size: 13.5px; word-break: break-all; }
.spec-table td .mono { white-space: normal; }

/* support-level + tier badges */
.lvl, .tier {
  display: inline-block; font-family: var(--mono); font-size: 11.5px; font-weight: 600;
  letter-spacing: 0.06em; padding: 3px 10px; border-radius: 999px; white-space: nowrap;
}
.lvl-primary, .tier-exact {
  color: var(--accent-2); background: rgba(16, 185, 129, 0.12);
  border: 1px solid rgba(16, 185, 129, 0.4);
}
.lvl-secondary, .tier-probable {
  color: var(--warn); background: rgba(251, 191, 36, 0.09);
  border: 1px solid rgba(251, 191, 36, 0.35);
}
.tier-conflict {
  color: var(--bad); background: rgba(248, 113, 113, 0.09);
  border: 1px solid rgba(248, 113, 113, 0.35);
}
.tier-none {
  color: var(--muted); background: rgba(148, 163, 184, 0.08);
  border: 1px solid var(--line-strong);
}

/* ---------- integrity / note panel ---------- */
.spec-note {
  margin-top: 20px;
  background: linear-gradient(180deg, rgba(16, 185, 129, 0.09), rgba(16, 185, 129, 0.03));
  border: 1px solid rgba(16, 185, 129, 0.38);
  border-radius: var(--radius); padding: 24px 28px;
}
.spec-note h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; margin-bottom: 8px; }
.spec-note p { color: var(--muted); font-size: 15.5px; }
.spec-note strong { color: var(--text); }

/* ---------- requirement cards ---------- */
.req-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.req-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 28px;
}
.req-name {
  display: inline-block; font-family: var(--mono); font-size: 12px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2);
  border: 1px solid rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.08);
  padding: 5px 11px; border-radius: 8px; margin-bottom: 14px;
}
.req-card p { color: var(--muted); font-size: 15.5px; }
.req-card strong { color: var(--text); }

/* verdict-state chips (base .chip lives in site.css) */
.state-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* specs page terminal example shouldn't force hero-size text */
.specs-main .terminal { margin-bottom: 20px; }

/* ---------- responsive ---------- */
@media (max-width: 860px) {
  .specs-main { padding-top: 116px; }
  .spec-section { padding-top: 64px; }
  .req-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .spec-table { min-width: 560px; }
  .spec-table th, .spec-table td { padding: 13px 16px; }
  .spec-note { padding: 20px; }
}