/* Design-document layer. Loads on top of hub.css, which owns the brand tokens,
   fonts, code styling, SVG diagram primitives and the base reset.
   Only styles specific to numbered design documents belong here. */

/* ---- document column: narrower than the hub's, for long-form reading ---- */
.wrap{max-width:860px}
body{line-height:1.65}
/* Scope the link colour to document body content. A global `a` rule here would
   load after hub.css and repaint the nav links petrol-on-petrol. */
main a, header .abstract a{color:var(--blue)}

/* ---- navigation ----
   Documents use the hub's standard nav so every section stays reachable from
   inside a document. Only the nav bar keeps the full-width column; the reading
   column below it stays narrow. */
nav .wrap{max-width:1120px}
header .crumb{margin-bottom:16px}

/* ---- masthead ---- */
header{padding:52px 0 36px;border-bottom:1px solid var(--line);background:
  radial-gradient(760px 300px at 90% -70px, rgba(51,124,155,.14), transparent 65%)}
.doc-meta-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}
.chip.no{color:var(--blue);background:rgba(0,91,130,.06);border:1px solid rgba(0,91,130,.18)}
.chip.status{color:var(--orange);background:rgba(204,78,11,.08);border:1px solid rgba(204,78,11,.3)}
.chip.status.approved{color:var(--green);background:rgba(31,157,107,.08);border-color:rgba(31,157,107,.25)}
.chip.status.superseded{color:var(--mute);background:rgba(134,149,171,.1);border-color:rgba(134,149,171,.35)}
header h1{font-family:var(--disp);font-weight:800;font-size:clamp(28px,4vw,40px);line-height:1.12;letter-spacing:-.02em;margin-bottom:14px}
.abstract{font-size:17px;color:var(--slate);max-width:64ch}
.meta-table{margin-top:26px;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.meta-cell{background:var(--panel);padding:10px 14px}
.meta-cell b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--cyan);font-weight:600;margin-bottom:2px}
.meta-cell span{font-size:14px}

/* ---- numbered body ---- */
main{padding:44px 0 24px}
main h2{font-family:var(--disp);font-weight:700;font-size:23px;letter-spacing:-.01em;margin:38px 0 12px;padding-top:8px}
main h2:first-child{margin-top:0}
main h2 .sec-no{font-family:var(--mono);font-size:13px;color:var(--orange);font-weight:600;margin-right:10px}
main h3{font-family:var(--disp);font-weight:700;font-size:17px;margin:26px 0 8px}
main p{margin-bottom:14px;max-width:72ch;color:var(--ink)}
main ul,main ol{margin:0 0 14px 22px;max-width:70ch}
main li{margin-bottom:6px}

/* ---- code: documents use a dark block, deliberately distinct from the hub's inline style ---- */
pre{background:#0B3349;color:#DCEAF2;font-family:var(--mono);font-size:13px;line-height:1.6;border-radius:10px;padding:18px 20px;overflow-x:auto;margin:0 0 18px;border-left:3px solid var(--orange)}
pre code{background:none;border:none;padding:0;color:inherit;font-size:1em}
p code,li code,td code{background:rgba(0,91,130,.07);border:1px solid rgba(0,91,130,.14);border-radius:4px;padding:1px 5px;color:var(--deep)}

/* ---- callouts ---- */
.callout{border:1px solid var(--line);border-left:3px solid var(--blue);background:var(--panel);border-radius:8px;padding:14px 18px;margin:0 0 18px;font-size:14.5px;color:var(--slate)}
.callout.warn{border-left-color:var(--orange)}
.callout b{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;display:block;margin-bottom:4px;color:var(--cyan)}
.callout.warn b{color:var(--orange)}

/* ---- document tables ---- */
table.doc{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:14px;background:var(--panel);border:1px solid var(--line);border-radius:10px;overflow:hidden}
table.doc th{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;text-align:left;color:var(--cyan);background:rgba(0,91,130,.05);padding:9px 14px;border-bottom:1px solid var(--line)}
table.doc td{padding:9px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--slate)}
table.doc tr:last-child td{border-bottom:none}

/* ---- figures: hub.css owns the SVG primitives (.bx, .ln, .tt, .ts, .tl) ---- */
.figure{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:22px;margin:0 0 18px;text-align:center}
.figure svg{display:block;width:100%;height:auto}
.figure figcaption{font-family:var(--mono);font-size:12px;color:var(--slate);margin-top:12px;text-align:left}

/* ---- footer ---- */
footer{margin-top:40px;padding:30px 0 44px}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:#fff}