/* VXP · documentation pages (specification and architecture). Built on vxp.css: same tokens,
   typography and radii. Only what is specific goes here: side index, anchors, requirements, marks and figures. */

:root {
	--operator: #8fb6cc;
	--doc-side: 248px;
}

/* ── Document header ───────────────────────────────────────────────────────── */
.dochead { padding-block: clamp(56px, 8vw, 104px) clamp(36px, 5vw, 56px); border-bottom: 1px solid var(--line); position: relative; overflow: hidden; isolation: isolate; }
.dochead::before { content: ""; position: absolute; z-index: -1; inset: -40% -20% auto 45%; height: 170%; 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% 62%, rgba(194, 107, 77, 0.12), transparent 72%); }
.dochead .wrap { display: grid; gap: 18px; }
.dochead .h1 { font-size: clamp(40px, 5.4vw, 72px); }
.dochead__meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 400 13px var(--mono); color: var(--mute); max-width: none; }

/* ── Layout with index ─────────────────────────────────────────────────────── */
.doc { width: var(--wrap); margin-inline: auto; display: grid; grid-template-columns: var(--doc-side) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); padding-block: 48px 120px; }
.doc__body { min-width: 0; max-width: 820px; }
.toc { position: sticky; top: 88px; align-self: start; max-height: calc(100vh - 104px); overflow: auto; font-size: 14px; padding-right: 6px; }
.toc summary { list-style: none; cursor: pointer; font: 500 13px var(--mono); color: var(--ink-soft); padding: 4px 0 12px; }
.toc summary::-webkit-details-marker { display: none; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.toc ol ol { padding: 2px 0 6px 26px; }
.toc a { display: grid; grid-template-columns: 26px 1fr; text-decoration: none; color: var(--ink-soft); padding: 5px 8px 5px 0; border-radius: var(--r-sm); line-height: 1.35; }
.toc ol ol a { display: block; font-size: 13.5px; color: var(--mute); padding: 3px 0; }
.toc a span { font: 400 12px var(--mono); color: var(--mute); padding-top: 1px; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="location"] { color: var(--ink); font-weight: 500; }
.toc a[aria-current="location"] span { color: var(--permit); }
@media (min-width: 1001px) { .toc summary { pointer-events: none; } }
@media (max-width: 1000px) {
	.doc { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 0; }
	.toc { position: sticky; top: 64px; z-index: 10; max-height: none; overflow: visible; margin-inline: calc(-1 * (100vw - 100%) / 2); padding: 0; background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
	.toc details { width: var(--wrap); margin-inline: auto; }
	.toc summary { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; font-size: 13.5px; color: var(--ink); }
	.toc summary::after { content: "Show"; font: 400 12.5px var(--mono); color: var(--mute); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 2px 8px; }
	.toc details[open] summary::after { content: "Hide"; }
	.toc:has(details[open]) { background: var(--paper); box-shadow: 0 24px 40px -24px rgba(10, 10, 10, 0.25); }
	.toc details[open] > ol { max-height: min(62vh, 520px); overflow: auto; padding-bottom: 14px; }
	.doc__body { padding-top: 40px; }
}

/* ── Sections ──────────────────────────────────────────────────────────────── */
.dsec { padding-top: 56px; scroll-margin-top: 84px; }
.dsec:first-child { padding-top: 0; }
.dsec + .dsec { border-top: 1px solid var(--line); margin-top: 56px; }
.dsec h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.06; letter-spacing: -0.04em; display: flex; gap: 14px; align-items: baseline; }
.dsec h2 .n { font: 400 14px var(--mono); color: var(--mute); letter-spacing: 0; flex: none; }
.dsec h3 { font-size: clamp(20px, 2vw, 24px); line-height: 1.18; letter-spacing: -0.025em; margin-top: 44px; scroll-margin-top: 84px; }
.dsec h4 { font: 500 15px var(--sans); margin-top: 28px; }
.dsec > p, .dsec .prose > p, .dsec > ul, .dsec > ol { margin-top: 16px; color: var(--ink-soft); }
.dsec > p + p { margin-top: 12px; }
.dsec ul, .dsec ol { padding-left: 20px; max-width: 70ch; }
.dsec li + li { margin-top: 6px; }
.dsec code { background: var(--soft); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 0.84em; overflow-wrap: anywhere; }
.dsec pre code, .fig code { background: none; border: 0; padding: 0; }
@media (max-width: 1000px) { .dsec, .dsec h3 { scroll-margin-top: 134px; } }

.anchor { margin-left: 2px; text-decoration: none; color: var(--mute); opacity: 0; font: 400 0.6em var(--mono); transition: opacity 0.2s; }
h2:hover .anchor, h3:hover .anchor, .anchor:focus-visible { opacity: 1; }
@media (hover: none) { .anchor { opacity: 0.45; } }

/* ── Marks ─────────────────────────────────────────────────────────────────── */
.mk { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: 0.01em; border: 1px solid currentColor; border-radius: var(--r-sm); padding: 4px 7px; vertical-align: 3px; white-space: nowrap; }
.mk--exp { color: #8a5a1f; }
.mk--pend { color: var(--mute); border-style: dashed; }
.mk--info { color: var(--permit); }
.mk--norm { color: var(--ink); }
h2 .mk, h3 .mk { font-size: 11px; vertical-align: 6px; letter-spacing: 0; }
.kw { font: 600 0.82em var(--mono); letter-spacing: 0.02em; color: var(--ink); }

/* ── Normative requirements ────────────────────────────────────────────────── */
.reqs { display: grid; margin-top: 22px; border-top: 1px solid var(--line); }
.req { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 90px; }
.req__id { font: 500 13px var(--mono); color: var(--ink); text-decoration: none; padding-top: 2px; }
.req__id:hover { text-decoration: underline; }
.req > div { color: var(--ink-soft); display: grid; gap: 10px; min-width: 0; }
.req > div > p { max-width: 70ch; }
.req ul { margin: 0; }
.req:target { background: linear-gradient(90deg, rgba(47, 104, 134, 0.07), transparent 70%); }
.req .mk { margin-left: 4px; }
@media (max-width: 520px) { .req { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 1000px) { .req { scroll-margin-top: 140px; } }

/* ── Informative blocks ────────────────────────────────────────────────────── */
.info { margin-top: 24px; border: 1px dashed rgba(47, 104, 134, 0.45); border-radius: var(--r-md); padding: 18px 20px; display: grid; gap: 12px; color: var(--ink-soft); background: rgba(47, 104, 134, 0.025); }
.info > .mk { justify-self: start; }
.info .tbl { background: var(--paper); }
.callout { margin-top: 24px; border-left: 2px solid var(--ink); padding: 4px 0 4px 18px; color: var(--ink-soft); max-width: 72ch; }
.callout b { color: var(--ink); font-weight: 500; }
.pending { margin-top: 18px; border: 1px dashed var(--line); border-color: #c9c9c3; border-radius: var(--r-md); padding: 16px 18px; display: grid; gap: 10px; color: var(--ink-soft); }
.pending > .mk { justify-self: start; }
.pending ul { margin: 0; }

/* ── Document tables ───────────────────────────────────────────────────────── */
.dsec .tbl { margin-top: 22px; }
.tbl--fit table { min-width: 0; }
.tbl table code { white-space: nowrap; }
.tbl td code { background: none; border: 0; padding: 0; }
.tbl--fit td code { white-space: normal; overflow-wrap: anywhere; }
.tbl caption { caption-side: bottom; text-align: left; font-size: 13px; color: var(--mute); padding: 10px 16px; border-top: 1px solid var(--line); }

/* ── Copyable code ─────────────────────────────────────────────────────────── */
.code { position: relative; margin-top: 20px; border: 1px solid var(--line-deep); border-radius: var(--r-lg); background: #0c0d0d; color: rgba(243, 243, 239, 0.8); overflow: hidden; }
.code__head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 92px 10px 14px; border-bottom: 1px solid var(--line-deep); font: 400 12.5px var(--mono); color: rgba(243, 243, 239, 0.56); }
.code__head b { color: var(--on-deep); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.code pre { margin: 0; padding: 16px; overflow: auto; max-height: 460px; font-size: 12.5px; line-height: 1.6; tab-size: 2; }
.code pre:focus-visible { outline-offset: -2px; }
.copy { position: absolute; top: 6px; right: 8px; height: 28px; padding: 0 11px; border-radius: var(--r-sm); border: 1px solid var(--line-deep); background: #161818; color: var(--on-deep); font: 400 12.5px var(--sans); cursor: pointer; z-index: 1; }
.copy:hover { border-color: rgba(243, 243, 239, 0.5); }
.copy:focus-visible { outline: 2px solid var(--agent); outline-offset: 2px; }
.code--plain { background: var(--soft); border-color: var(--line); color: var(--ink-soft); }
.code--plain pre { font-size: 12.5px; }

/* ── Figures (hand-drawn diagrams) ─────────────────────────────────────────── */
.fig { margin: 26px 0 0; border: 1px solid var(--line-deep); border-radius: var(--r-lg); background: var(--deep); color: var(--on-deep); padding: clamp(16px, 2.6vw, 28px); position: relative; overflow: hidden; isolation: isolate; }
.fig::before { content: ""; position: absolute; inset: -30% -10% auto; height: 120%; z-index: -1; pointer-events: none;
	background: radial-gradient(circle at 10% 0%, rgba(37, 105, 142, 0.28), transparent 46%), radial-gradient(circle at 96% 10%, rgba(194, 107, 77, 0.18), transparent 42%); }
.fig svg { width: 100%; height: auto; overflow: visible; }
.fig figcaption { margin-top: 14px; font-size: 14px; color: var(--on-deep-soft); max-width: 72ch; }
.fig figcaption b { color: var(--on-deep); font-weight: 500; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line-deep); font: 400 12px var(--mono); color: var(--on-deep-soft); list-style: none; padding-left: 0; }
.legend li { display: flex; align-items: center; gap: 8px; margin: 0; }
.legend i { display: inline-block; width: 22px; height: 12px; border-radius: 2px; }
.legend .l-norm { border: 1.5px solid var(--on-deep); }
.legend .l-ref { border: 1.5px dashed var(--on-deep-soft); }
.legend .l-co { background: var(--company); }
.legend .l-op { border: 1.5px solid var(--operator); }
.fig--narrow svg { max-width: 640px; margin-inline: auto; }
.svg-wide { display: block; }
.svg-tall { display: none; }
@media (max-width: 640px) { .has-tall .svg-wide { display: none; } .has-tall .svg-tall { display: block; } }

/* ── Participants ──────────────────────────────────────────────────────────── */
.actors { margin-top: 26px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--ink); }
.actor { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; padding: 20px 20px 20px 0; border-bottom: 1px solid var(--line); align-items: start; }
.actor:nth-child(odd) { border-right: 1px solid var(--line); }
.actor:nth-child(even) { padding-left: 22px; }
.actor svg { width: 44px; height: 44px; border-radius: var(--r-md); background: var(--deep); padding: 6px; }
.actor h3 { margin: 0; font-size: 19px; letter-spacing: -0.02em; }
.actor p { margin-top: 6px; color: var(--ink-soft); font-size: 15px; }
.actor .role { font: 400 12px var(--mono); color: var(--mute); margin-top: 8px; }
@media (max-width: 720px) { .actors { grid-template-columns: 1fr; } .actor:nth-child(odd) { border-right: 0; } .actor:nth-child(even) { padding-left: 0; } }

/* ── Two-column list: normative and reference ──────────────────────────────── */
.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin-top: 24px; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.split > div { padding: 18px 20px; display: grid; gap: 10px; align-content: start; }
.split > div + div { border-left: 1px dashed #c9c9c3; background: var(--soft); }
.split h4 { margin: 0; }
.split ul { margin: 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
@media (max-width: 720px) { .split { grid-template-columns: 1fr; } .split > div + div { border-left: 0; border-top: 1px dashed #c9c9c3; } }

.doc-next { margin-top: 72px; padding-top: 28px; border-top: 1px solid var(--ink); display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.doc-next p { color: var(--ink-soft); }

/* ── Diagram strokes ───────────────────────────────────────────────────────── */
.fig svg text { font-family: var(--mono); font-size: 13px; fill: var(--on-deep); }
.fig svg .sm { font-size: 11.5px; fill: var(--on-deep-soft); }
.fig svg .lg { font-family: var(--sans); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.fig svg .box { fill: rgba(255, 255, 255, 0.035); stroke: var(--on-deep); stroke-width: 1.3; }
.fig svg .box--ref { fill: none; stroke: var(--on-deep-soft); stroke-dasharray: 5 4; }
.fig svg .box--op { stroke: var(--operator); }
.fig svg .box--final { fill: rgba(255, 255, 255, 0.08); }
.fig svg .ln { stroke: var(--on-deep-soft); stroke-width: 1.3; fill: none; }
.fig svg .ln--dash { stroke-dasharray: 4 4; }
.fig svg .ln--strong { stroke: var(--on-deep); }
.fig svg .zone { fill: rgba(143, 182, 204, 0.05); stroke: var(--operator); stroke-width: 1.3; stroke-dasharray: 7 5; }
.fig svg .op-t { fill: var(--operator); }
.fig ol.steps { margin: 14px 0 0; padding-left: 22px; color: var(--on-deep-soft); font-size: 14px; display: grid; gap: 4px; max-width: 72ch; }
.fig ol.steps b { color: var(--on-deep); font-weight: 500; }
.fig--narrow svg { max-width: 560px; }
.fig svg.halo text { paint-order: stroke; stroke: #0a0b0b; stroke-width: 6px; stroke-linejoin: round; }
@media (max-width: 560px) { .fig svg.seq { display: none; } .fig svg.seq + .steps { margin-top: 0; } }
.swipe { display: none; font: 400 12px var(--mono); color: var(--on-deep-soft); margin-bottom: 10px; }
@media (max-width: 560px) {
	.fig--wide { overflow-x: auto; }
	.fig--wide svg { min-width: 520px; }
	.fig--wide .swipe { display: block; position: sticky; left: 0; }
	.fig--wide figcaption { position: sticky; left: 0; max-width: calc(100vw - 82px); }
}