/* VXP · inner pages (conformance, status, examples). Uses the tokens of vxp.css. */

.page-head { padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 56px); position: relative; overflow: hidden; isolation: isolate; border-bottom: 1px solid var(--line); }
.page-head::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto 40%; height: 160%; pointer-events: none; filter: blur(10px);
	background: radial-gradient(closest-side at 60% 40%, rgba(65, 144, 174, 0.16), transparent 70%), radial-gradient(closest-side at 86% 60%, rgba(194, 107, 77, 0.12), transparent 72%); }
.page-head .wrap { display: grid; gap: 18px; }
.page-head h1 { font-size: clamp(38px, 5.2vw, 68px); line-height: 1; letter-spacing: -0.05em; max-width: 18ch; }
.page-head .lead { max-width: 64ch; }
.page-meta { display: flex; flex-wrap: wrap; gap: 6px 22px; font: 400 13px var(--mono); color: var(--mute); max-width: none; }

.toc { list-style: none; margin: 8px 0 0; padding: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px 22px; border-top: 1px solid var(--line); font: 400 13px var(--mono); }
.toc a { color: var(--ink-soft); text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }

.sec--tight { padding-block: clamp(56px, 7vw, 96px); }
.sec__head--sm { margin-bottom: clamp(28px, 4vw, 44px); }
.sub-h { font-size: clamp(20px, 1.8vw, 24px); letter-spacing: -0.025em; line-height: 1.15; margin: 0 0 6px; }
.sub-lead { color: var(--ink-soft); margin-bottom: 22px; }
.group + .group { margin-top: clamp(56px, 7vw, 88px); }
.group__head { display: grid; gap: 10px; padding-bottom: 18px; border-bottom: 1px solid var(--ink); margin-bottom: 0; }
.group__head p { color: var(--ink-soft); }

/* ── Test rows ──────────────────────────────────────────────────────────────── */
.tests { list-style: none; margin: 0; padding: 0; }
.test { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(0, 2.4fr); gap: clamp(18px, 3vw, 40px); padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.test h3 { font-size: 19px; letter-spacing: -0.02em; line-height: 1.25; }
.test__what { margin-top: 8px; color: var(--ink-soft); font-size: 15px; }
.test dl { margin: 0; display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px 14px; font-size: 14px; }
.test dt { font: 400 12.5px var(--mono); color: var(--mute); padding-top: 2px; }
.test dd { margin: 0; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.test dd code { font-size: 12.5px; color: var(--ink); }
.test__res { display: grid; gap: 8px; justify-items: start; }
.test__num { font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.04em; line-height: 1; }
.test__num small { display: block; font: 400 12.5px/1.45 var(--mono); color: var(--mute); letter-spacing: 0; margin-top: 8px; }
.test__res a { font: 400 13px var(--mono); }
.test--pending .test__num { color: var(--mute); }
@media (max-width: 960px) {
	.test { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
	.test__res { grid-column: 1; grid-row: 2; }
	.test > :nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 680px) {
	.test { grid-template-columns: 1fr; gap: 14px; }
	.test__res, .test > :nth-child(2) { grid-column: auto; grid-row: auto; }
	.test dl { grid-template-columns: 1fr; gap: 2px; }
	.test dd { margin-bottom: 8px; }
}

/* ── Copyable code (light theme) ───────────────────────────────────────────── */
.codebox { position: relative; margin: 0; min-width: 0; }
.codebox pre { margin: 0; background: var(--soft); border: 1px solid var(--line); border-radius: var(--r-md); padding: 16px 18px; overflow: auto; font-size: 12.8px; line-height: 1.65; color: var(--ink); tab-size: 2; max-height: 460px; }
.codebox figcaption { font: 400 12.5px var(--mono); color: var(--mute); margin-bottom: 8px; padding-right: 76px; }
.copy { position: absolute; top: 0; right: 0; height: 28px; padding: 0 10px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); font: 400 12.5px var(--sans); cursor: pointer; }
.copy:hover { border-color: var(--ink); color: var(--ink); }
.codebox--plain .copy { top: -2px; }
.cmt { color: var(--mute); }

/* ── Notices and context ───────────────────────────────────────────────────── */
.ctx { display: grid; gap: 10px; border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; max-width: 86ch; }
.ctx p, .ctx li { color: var(--ink-soft); font-size: 15.5px; }
.ctx ul { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.ctx b { color: var(--ink); font-weight: 500; }

/* ── Status tables ─────────────────────────────────────────────────────────── */
.tbl--wide table { min-width: 1080px; font-size: 13.5px; }
.tbl--wide th, .tbl--wide td { padding: 12px 12px; }
.tbl--wide td:first-child { min-width: 180px; }
.yes { color: #2e7556; }
.no { color: var(--mute); }
.part { color: #8a5a1f; }
.tbl td small { display: block; color: var(--mute); font-size: 12.5px; margin-top: 4px; line-height: 1.45; }
.legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 32px; margin: 0 0 22px; font-size: 14px; }
.legend div { display: grid; grid-template-columns: 170px 1fr; gap: 10px; }
.legend dt { font: 400 12.5px var(--mono); color: var(--ink); padding-top: 2px; }
.legend dd { margin: 0; color: var(--ink-soft); }
@media (max-width: 820px) { .legend { grid-template-columns: 1fr; } .legend div { grid-template-columns: 1fr; gap: 2px; } }

.pend { list-style: none; margin: 0; padding: 0; counter-reset: pend; border-top: 1px solid var(--line); }
.pend > li { display: grid; grid-template-columns: 44px minmax(0, 3fr) minmax(0, 7fr); gap: 0 clamp(16px, 3vw, 40px); padding: 22px 0; border-bottom: 1px solid var(--line); counter-increment: pend; }
.pend > li::before { content: counter(pend, decimal-leading-zero); font: 400 13px var(--mono); color: var(--mute); padding-top: 4px; }
.pend h3 { font-size: 18px; letter-spacing: -0.02em; line-height: 1.25; }
.pend p, .pend ul { color: var(--ink-soft); font-size: 15px; margin: 0; }
.pend ul { padding-left: 18px; display: grid; gap: 4px; }
.pend p + p, .pend p + ul { margin-top: 8px; }
@media (max-width: 760px) { .pend > li { grid-template-columns: 36px minmax(0, 1fr); } .pend > li > div { grid-column: 2; } .pend h3 { margin-bottom: 8px; } }

.hist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.hist > li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.hist time { font: 400 13px var(--mono); color: var(--ink); padding-top: 2px; }
.hist p { color: var(--ink-soft); }
.hist ul { margin: 8px 0 0; padding-left: 18px; color: var(--ink-soft); display: grid; gap: 4px; }
@media (max-width: 600px) { .hist > li { grid-template-columns: 1fr; gap: 6px; } }

/* ── Examples ──────────────────────────────────────────────────────────────── */
.label { font: 400 12.5px var(--mono); color: var(--ink); border-left: 2px solid var(--permit); padding-left: 10px; }
.ex-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.ex-grid > figure > p { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }
@media (max-width: 900px) { .ex-grid { grid-template-columns: 1fr; } }

.ops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.op { border: 1px solid var(--line); border-radius: var(--r-md); padding: 22px; display: grid; gap: 14px; align-content: start; background: var(--paper); min-width: 0; }
.op__top { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font: 400 12.5px var(--mono); color: var(--mute); }
.op__top b { color: var(--ink); font-weight: 500; }
.op h3 { font-size: 20px; letter-spacing: -0.02em; line-height: 1.2; }
.op dl { margin: 0; display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 7px 14px; font-size: 14px; }
.op dt { font: 400 12.5px var(--mono); color: var(--mute); padding-top: 2px; }
.op dd { margin: 0; color: var(--ink-soft); min-width: 0; overflow-wrap: anywhere; }
.op dd code { font-size: 12.5px; color: var(--ink); }
.op__proof { font: 400 12.5px/1.55 var(--mono); padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink-soft); }
.op__proof a { color: var(--ink); }
.op--wide { grid-column: 1 / -1; }
.op--wide dl { grid-template-columns: 118px minmax(0, 1fr); }
.timeline { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--line); }
.timeline li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--ink-soft); }
.timeline time { font: 400 12.5px var(--mono); color: var(--ink); padding-top: 2px; }
.op--future { background: transparent; border-style: dashed; }
@media (max-width: 820px) {
	.ops { grid-template-columns: 1fr; }
	.op dl, .op--wide dl { grid-template-columns: 1fr; gap: 2px; }
	.op dd { margin-bottom: 8px; }
	.timeline li { grid-template-columns: 1fr; gap: 2px; }
}

.files { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.files li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.files a { font: 400 13px var(--mono); overflow-wrap: anywhere; }
.files span { color: var(--ink-soft); }
@media (max-width: 680px) { .files li { grid-template-columns: 1fr; gap: 2px; } }