/**
 * certification.css — the AGI Certification Program section.
 * Extends tokens/site/components. New idioms only; everything shared
 * stays in components.css.
 */

/* ── Requirement block: normative → evidence → cell ─────────────── */

.req { border: 1px solid var(--rule-soft); border-radius: var(--r-md); margin: 1.6em 0; background: var(--paper-raise); overflow: hidden; }

.req-head { display: flex; align-items: baseline; gap: 12px; padding: 1em 1.3em 0.8em; border-bottom: 1px solid var(--rule-soft); background: var(--paper-sunk); flex-wrap: wrap; }
.req-id   { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; color: var(--accent); }
.req-name { font-family: var(--serif); font-size: 1.06rem; font-weight: 600; color: var(--ink-strong); }
.req-tier { margin-left: auto; font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.13em; text-transform: uppercase; padding: 2px 7px; border: 1px solid; border-radius: var(--r-sm); }
.req-tier.t-core    { color: var(--safe); border-color: var(--safe); }
.req-tier.t-proposed{ color: var(--accent); border-color: var(--accent); }
.req-tier.t-forward { color: var(--neutral); border-color: var(--neutral); }
.req-tier.t-exp     { color: var(--ink-faint); border-color: var(--rule-strong); border-style: dashed; }

.req-body { padding: 1.1em 1.3em 1.2em; }
.req-body p { font-family: var(--serif); font-size: 0.95rem; line-height: 1.68; color: var(--ink); margin: 0.5em 0; }
.req-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-dim); display: block; margin: 1em 0 0.3em; }

/* Evidence footer — estate + code, the four-views join */
.req-evidence { border-top: 1px solid var(--rule-soft); padding: 0.9em 1.3em 1.1em; background: var(--paper); }
.ev-row { display: flex; gap: 10px; align-items: baseline; margin: 0.35em 0; flex-wrap: wrap; }
.ev-k { font-family: var(--mono); font-size: 9px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-dim); min-width: 64px; }
.ev-v { font-family: var(--sans); font-size: 12px; color: var(--ink); line-height: 1.55; flex: 1; }
.ev-v code, .ev-code { font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); }
.ev-claim { font-family: var(--mono); font-size: 10.5px; color: var(--ink-strong); }
.ev-tests { font-family: var(--mono); font-size: 10px; color: var(--safe); white-space: nowrap; }

/* ── Tier stack (static SVG-ish, built from divs) ───────────────── */

.tiers { display: flex; flex-direction: column; gap: 8px; max-width: 640px; margin: 1.8em auto; }
.tier-row { border: 1px solid var(--rule-soft); border-left: var(--edge) solid var(--accent); border-radius: var(--r-md); padding: 0.85em 1.1em; background: var(--paper-raise); }
.tier-row.t-core { border-left-color: var(--safe); }
.tier-row.t-fwd  { border-left-color: var(--neutral); }
.tier-name { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-strong); }
.tier-desc { font-family: var(--sans); font-size: 11.5px; color: var(--ink-muted); margin-top: 3px; line-height: 1.5; }

/* ── Cell tree + cell cards ─────────────────────────────────────── */

.cell-tree { font-family: var(--mono); font-size: 11px; line-height: 1.8; color: var(--ink-soft); background: var(--paper-sunk); border: 1px solid var(--rule-soft); border-radius: var(--r-md); padding: 1.1em 1.4em; max-width: 560px; margin: 1.4em auto; white-space: pre; overflow-x: auto; }

.cells-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; width: 100%; }
.cell-card { border: 1px solid var(--rule-soft); border-radius: var(--r-md); padding: 1em 1.15em; background: var(--paper-raise); }
.cell-id { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; color: var(--ink-strong); }
.cell-status { float: right; font-family: var(--mono); font-size: 8px; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 6px; border: 1px solid; border-radius: var(--r-sm); }
/* Passing: a cell with a result rather than a specification. */
.cell-status.s-passing    { color: var(--safe); border-color: var(--safe); background: color-mix(in srgb, var(--safe) 10%, transparent); }
.cell-status.s-scaffolded { color: var(--safe); border-color: var(--safe); }
.cell-status.s-specified  { color: var(--accent); border-color: var(--accent); }
.cell-status.s-gap        { color: var(--dual); border-color: var(--dual); border-style: dashed; }
.cell-sc  { font-family: var(--serif); font-size: 0.88rem; line-height: 1.6; color: var(--ink); margin-top: 0.6em; }
.cell-pass{ font-family: var(--sans); font-size: 11px; color: var(--ink-muted); margin-top: 0.5em; line-height: 1.55; }
.cell-n   { font-family: var(--mono); font-size: 9px; color: var(--ink-dim); margin-top: 0.5em; display: block; }

/* ── Known Deltas register ──────────────────────────────────────── */

.delta { border-left: 2px solid var(--dual); padding: 0.7em 0 0.7em 1.2em; margin: 1em 0; }
.delta-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.delta-id { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--dual); }
.delta-title { font-family: var(--serif); font-size: 0.98rem; font-weight: 600; color: var(--ink-strong); }
.delta-affects { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-dim); border: 1px solid var(--rule); padding: 1px 6px; border-radius: var(--r-sm); }
.delta p { font-family: var(--serif); font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0.4em 0 0; }
.delta .disp { font-family: var(--sans); font-size: 11.5px; color: var(--ink-muted); }
.delta .disp strong { font-family: var(--mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--neutral); font-weight: 500; }

/* ── Six-step flow rail (static) ────────────────────────────────── */

.flow { counter-reset: step; max-width: 640px; margin: 1.6em auto; }
.flow-step { position: relative; padding: 0 0 1.1em 2.6em; border-left: 1px solid var(--rule-strong); margin-left: 13px; }
.flow-step:last-child { border-left-color: transparent; }
.flow-step::before { counter-increment: step; content: counter(step); position: absolute; left: -14px; top: -2px; width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--accent); background: var(--paper); color: var(--accent); font-family: var(--mono); font-size: 11px; display: flex; align-items: center; justify-content: center; }
.flow-step .fs-t { font-family: var(--serif); font-size: 0.98rem; font-weight: 600; color: var(--ink-strong); }
.flow-step .fs-d { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); line-height: 1.55; margin-top: 2px; }

/* ── Mark usage panels ──────────────────────────────────────────── */

.mark-panel { border: 1px solid var(--rule-soft); border-radius: var(--r-md); padding: 1.1em 1.3em; background: var(--paper-raise); }
.mark-lockup { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; color: var(--ink-strong); }
.marks-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; width: 100%; }

@media (max-width: 620px) { .req-head { padding: 0.9em 1em 0.7em; } .req-body, .req-evidence { padding-left: 1em; padding-right: 1em; } }

/* ── Mechanism figures (inline SVG, token-driven) ───────────────── */

figure.mech { margin: 2em auto; max-width: 660px; }
figure.mech svg { display: block; width: 100%; height: auto; }

.mech .fx        { fill: var(--paper-raise); stroke: var(--ink-soft); stroke-width: 1; }
.mech .fx-safe   { fill: var(--paper-raise); stroke: var(--safe); stroke-width: 1.2; }
.mech .fx-dual   { fill: var(--paper-raise); stroke: var(--dual); stroke-width: 1.2; }
.mech .fx-halo   { fill: none; stroke: var(--dual); stroke-width: 1; stroke-dasharray: 4 3; }
.mech .fx-rule   { stroke: var(--rule-strong); stroke-width: 1; }
.mech .fx-thresh { stroke: var(--ink-dim); stroke-width: 0.8; stroke-dasharray: 5 4; }
.mech .fx-zone   { fill: var(--paper-sunk); stroke: none; }
.mech .fx-arrow  { stroke: var(--ink-dim); stroke-width: 1; fill: none; }
.mech .fx-arrow-dual { stroke: var(--dual); stroke-width: 1; fill: none; }
.mech .fx-signal { stroke: var(--ink); stroke-width: 1.4; fill: none; }
.mech .fx-signal-accent { stroke: var(--accent); stroke-width: 1.6; fill: none; }
.mech .fx-drop   { stroke: var(--dual); stroke-width: 0.8; stroke-dasharray: 2 3; }
.mech .fx-dot-accent { fill: var(--accent); }
.mech .fx-dot-dual   { fill: var(--dual); }

.mech .fl { font-family: var(--mono); font-size: 11px; fill: var(--ink-strong); }
.mech .fm { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.04em; fill: var(--ink-dim); }
.mech .fm-dual { fill: var(--dual); }

/* ── Schema demo — a real data shape, annotated ─────────────────── */

.schema { max-width: 640px; margin: 1.8em auto; border: 1px solid var(--rule-soft); border-radius: var(--r-md); overflow: hidden; background: var(--paper-raise); }
.schema-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0.6em 1.1em; background: var(--paper-sunk); border-bottom: 1px solid var(--rule-soft); }
.schema-name { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; color: var(--ink-strong); }
.schema-src  { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.schema pre  { margin: 0; padding: 1em 1.2em; font-family: var(--mono); font-size: 11px; line-height: 1.75; color: var(--ink); overflow-x: auto; }
.schema .sk  { color: var(--accent-deep); }
.schema .sv  { color: var(--ink-soft); }
.schema .sc  { color: var(--ink-faint); font-style: italic; }

/* ── Corpus coverage tiles ──────────────────────────────────────── */

.coverage { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; max-width: 520px; margin: 1.6em auto 0.6em; }
.coverage .tile { aspect-ratio: 1; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 8px; color: var(--ink-dim); }