/* AISA v2.0 — technical documentation (level 3). Extends site.css. */
.docwrap { display: grid; grid-template-columns: var(--sw) minmax(0, 1fr); gap: 0; max-width: none; margin: 0; }
:root { --sw: 300px; }
body.side-off { --sw: 0px; }
body.side-off .side { display: none; }
@media (min-width: 981px) { .docwrap > .doc { grid-column: 2; } }
.side {
  position: sticky; top: var(--nav-h); height: calc(100vh - var(--nav-h)); overflow-y: auto;
  border-right: 1px solid var(--line-2); padding: 12px 8px 28px 14px; background: var(--bg); font-size: 12.9px;
  scrollbar-width: thin;
}
.side .grp { margin-bottom: 11px; }
.side .grp > b { display: block; font-size: 10.5px; letter-spacing: 1.1px; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; padding-left: 7px; }
.side a { display: block; color: var(--text-2); padding: 2.5px 7px; border-radius: 6px; line-height: 1.28; }
.side a:hover { background: var(--bg-2); text-decoration: none; color: var(--text); }
.side a.on { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side .sub a { padding-left: 20px; font-size: 13px; }
.side .sub b { display: block; padding: 6px 8px 2px; font-size: 12.5px; color: var(--text); }
.doc { padding: 26px 42px 88px; max-width: none; min-width: 0; }
.crumb { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--accent); }
.doc h1 { font-size: 36px; letter-spacing: -1px; line-height: 1.1; margin: 6px 0 18px; }
.doc h2 { font-size: 26px; letter-spacing: -.6px; margin: 40px 0 12px; padding-top: 10px; border-top: 1px solid var(--line-2); }
.doc h3 { font-size: 19px; margin: 28px 0 8px; }
.doc h4 { font-size: 16px; margin: 20px 0 6px; }
.doc p, .doc li { font-size: 15.5px; line-height: 1.6; color: var(--text-2); }
.doc p { margin: 10px 0; }
.doc strong { color: var(--text); }
.doc ul, .doc ol { margin: 8px 0 8px 24px; }
.doc li { margin: 4px 0; }
.doc hr { border: 0; border-top: 1px solid var(--line-2); margin: 24px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 13.5px; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; overflow: hidden; }
.doc th { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11.5px; text-transform: uppercase; letter-spacing: .8px; background: var(--bg); }
.doc td { padding: 8px 10px; border-bottom: 1px solid var(--line-2); vertical-align: top; line-height: 1.5; color: var(--text-2); }
.doc tr:last-child td { border-bottom: 0; }
.doc .tbl { overflow-x: auto; margin: 16px 0; }
.doc .tbl table { margin: 0; }
.doc code { background: var(--bg-2); border-radius: 5px; padding: 1px 6px; font-size: 13px; font-family: ui-monospace, "Cascadia Code", Consolas, Menlo, monospace; color: var(--text); }
.doc pre { background: #1d1d1f; color: #e6e6ea; border-radius: 12px; padding: 16px 18px; overflow-x: auto; font-size: 13px; line-height: 1.5; margin: 14px 0; }
.doc pre code { background: none; padding: 0; color: inherit; font-size: inherit; }
.doc pre.mermaid { background: #fff; color: var(--text); border: 1px solid var(--line-2); border-radius: 12px; padding: 18px; overflow-x: auto; text-align: center; }
.doc pre.mermaid svg { max-width: 100%; height: auto; }
.doc blockquote { border-left: 3px solid var(--accent); margin: 14px 0; padding: 10px 16px; background: var(--accent-soft); border-radius: 0 10px 10px 0; }
.doc blockquote p { margin: 4px 0; }
.doc img { max-width: 100%; }
.doc a { text-decoration: none; border-bottom: 1px solid rgba(11,87,208,.3); }
.doc a:hover { border-bottom-color: var(--accent); }
.doc .xref { border-bottom: 1px dotted var(--muted); color: var(--text-2); cursor: help; }
.tag { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .6px; padding: 1px 6px; border-radius: 5px; vertical-align: 1px; margin-right: 2px; line-height: 1.5; }
.tag-f { background: var(--auto-soft); color: var(--auto); }
.tag-p { background: var(--accent-soft); color: var(--accent); }
.tag-c { background: var(--human-soft); color: var(--human); }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); margin: 0 0 18px; }
.pn { display: flex; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line-2); font-size: 14px; }
.pn a { border: 0; }
.pn span { display: block; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.dochome h1 { margin-top: 10px; }
.dochome .cards { margin-top: 22px; }
.dochome .card h3 { font-size: 18px; }
.dochome .card a { border: 0; }
.dochome .card ul { margin: 8px 0 0 0; list-style: none; }
.dochome .card li { font-size: 13.5px; margin: 3px 0; }
.dochome .card li a { color: var(--text-2); }
.dochome .card li a:hover { color: var(--accent); }
.side-toggle { display: none; }
@media (max-width: 980px) {
  .docwrap { grid-template-columns: 1fr; }
  .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line-2); padding: 14px 18px; display: none; }
  .side.open { display: block; }
  .side-toggle { display: inline-block; margin: 14px 18px 0; font-size: 13px; }
  .doc { padding: 20px 18px 60px; }
}
@media print { nav.top, .side, .pn, footer { display: none; } .docwrap { display: block; } .doc { max-width: none; padding: 0; } }


/* ---------- wide layout: prose stays readable, tables and diagrams use the room ---------- */
.doc > p, .doc > ul, .doc > ol, .doc > blockquote, .doc .legend, .doc .crumb { max-width: 96ch; }
.doc h1, .doc h2, .doc h3, .doc h4 { max-width: 40ch; }
.doc h2 { max-width: none; }
.doc .tbl { margin: 18px 0; }
.doc table { font-size: 14px; }
.doc td, .doc th { padding: 10px 14px; }

/* ---------- diagrams ---------- */
.doc pre.mermaid { background:#fff; border:1px solid #d6dee8; padding:20px; overflow:auto; text-align:center; box-shadow:none; }
.diagram { margin:24px 0; background:#fff; border:1px solid #d6dee8; border-radius:8px; overflow:hidden; color:#243b54; }
.diagram-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:10px 14px; border-bottom:1px solid #e0e6ef; background:#f7f9fc; }
.diagram-name { margin-right:auto; font-size:13px; font-weight:600; }
.diagram-toolbar button, .diagram-close { border:1px solid #c5d1df; border-radius:4px; padding:5px 11px; background:#fff; color:#24486b; font-family:inherit; font-size:13px; line-height:1.5; font-weight:600; cursor:pointer; }
.diagram-toolbar button:hover, .diagram-close:hover { background:#edf3fa; }
.diagram-toolbar button:disabled { opacity:.4; cursor:default; }
.diagram-toolbar output { min-width:4ch; text-align:center; font:12px ui-monospace,monospace; }
.diagram .diagram-viewport { display:block; margin:0; padding:20px 16px; border:0; border-radius:0; max-height:720px; overflow:auto; background:#fff; text-align:center; }
.diagram .diagram-viewport > svg { display:inline-block; max-width:none !important; height:auto !important; vertical-align:top; }
.diagram .node rect, .diagram .node polygon, .diagram .node circle { filter:none; }
.diagram .node rect { rx:5px; ry:5px; }
.diagram svg a:hover .label-container, .diagram svg a:focus .label-container { stroke-width:2.5px !important; }
.diagram svg a { cursor:pointer; }
.diagram svg a:focus-visible { outline:2px solid #235fc1; outline-offset:4px; }
.diagram button:focus-visible, .diagram summary:focus-visible, .diagram-viewport:focus-visible, .diagram-close:focus-visible { outline:3px solid #7badeb; outline-offset:-3px; }
.diagram-guide { margin:0; padding:10px 16px; color:#5b6e85; font-family:inherit; font-size:13px; line-height:1.5; border-top:1px solid #e0e6ef; }
.diagram-links { padding:0 16px 12px; font-size:13px; }
.diagram-links summary { color:#235fc1; cursor:pointer; }
.diagram-links ul { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:7px 28px; padding-left:18px; }
.diagram-links a { color:#235fc1; }
.diagram-dialog { width:calc(100vw - 32px); max-width:none; height:calc(100vh - 32px); max-height:none; padding:14px; border:1px solid #aabace; border-radius:8px; background:#f7f9fc; }
.diagram-dialog::backdrop { background:rgba(15,29,48,.65); }
.diagram-dialog .diagram { margin:12px 0 0; }
.diagram-dialog .diagram-viewport { max-height:calc(100vh - 215px); }
.mermaidTooltip { max-width:360px; padding:9px 12px !important; border:1px solid #afbed1 !important; border-radius:5px !important; background:#fff !important; color:#243b54 !important; font:14px/1.45 'Segoe UI',sans-serif !important; box-shadow:0 4px 14px #1b365322; z-index:10000; pointer-events:none; }
@media(max-width:600px) { .diagram-toolbar { gap:5px; padding:8px; } .diagram-name { flex-basis:100%; } .diagram-dialog { padding:7px; width:calc(100vw - 12px); height:calc(100vh - 12px); } }

/* ---------- long tables: three rows, then the rest on request ---------- */
.doc table > tbody > tr.row-more { display: none; }
.doc table.rows-open > tbody > tr.row-more { display: table-row; }
button.tmore {
  display: block; width: 100%; margin: -14px 0 20px; padding: 9px 14px; text-align: left;
  background: var(--bg); border: 1px solid var(--line-2); border-top: 0;
  border-radius: 0 0 10px 10px; cursor: pointer; font: inherit; color: var(--accent);
  font-size: 13px; font-weight: 600; transition: background .15s;
}
button.tmore:hover { background: var(--accent-soft); }
button.tmore span::before { content: "ƒa"; display: inline-block; margin-right: 8px; transform: rotate(90deg); }

/* ---------- folded sections (granular goals, baseline) ---------- */
.fold { margin: 40px 0 0; }
.fold details { border: 1px solid var(--line-2); border-radius: 14px; background: #fff; }
.fold summary {
  list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; gap: 14px;
  border-radius: 14px; transition: background .15s;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary:hover { background: var(--bg); }
.fold .fold-h { font-size: 17px; font-weight: 600; color: var(--text); flex: 1; }
.fold .fold-x { flex: none; font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: .6px; text-transform: uppercase; }
.fold .fold-x::after { content: "show"; }
.fold details[open] .fold-x::after { content: "hide"; }
.fold details[open] summary { border-radius: 14px 14px 0 0; border-bottom: 1px solid var(--line-2); background: var(--bg); }
.fold-b { padding: 8px 26px 26px; }
.fold-b > h2:first-of-type { margin-top: 16px; border-top: 0; padding-top: 0; }
@media (max-width: 980px) { .doc { padding: 20px 18px 60px; } .doc > p, .doc > ul, .doc > ol { max-width: none; } }

/* ---------- one goal table: two lines per row, the reasoning opens in the cell ---------- */
.doc .gc { position: relative; max-height: 3.05em; overflow: hidden; }
.doc .gc.gc-open, .doc .gc.gc-fit { max-height: none; overflow: visible; }
.doc td.idc { white-space: nowrap; font-weight: 600; color: var(--text); }
.doc p.hint { font-size: 14px; color: var(--muted); }
button.gx {
  margin: 5px 0 0; padding: 0; background: none; border: 0; cursor: pointer; font: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--accent); letter-spacing: .2px;
}
button.gx:hover { text-decoration: underline; }
button.gx:not(.gx-open) span::before { content: "\2026\00a0"; }
.doc .gd { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); }
.doc .gc:not(.gc-open) .gd { border-top-color: transparent; }
.doc .gd-h {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .9px; text-transform: uppercase;
  color: var(--muted); margin-bottom: 8px;
}
.doc .gd p { margin: 9px 0; font-size: 14px; line-height: 1.62; }
.doc .gd > p:first-of-type { margin-top: 0; }
.doc .gd .tbl { margin: 12px 0; }
.doc .gd table { font-size: 13px; }
.doc .gd td, .doc .gd th { padding: 7px 10px; }
.doc tr.row-hit > td { background: var(--accent-soft); }
.doc tr.row-hit > td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* ---------- the sidebar toggle ---------- */
.sidebtn {
  position: fixed; top: calc(var(--nav-h) + 10px); left: calc(var(--sw) - 30px); z-index: 40;
  width: 24px; height: 24px; padding: 0; border-radius: 7px; border: 1px solid var(--line-2);
  background: #fff; color: var(--muted); cursor: pointer; font: 600 13px/22px inherit;
  transition: left .18s, background .15s;
}
.sidebtn:hover { background: var(--bg-2); color: var(--accent); }
body.side-off .sidebtn { left: 10px; }
.sidebtn::before { content: "\2039"; }
body.side-off .sidebtn::before { content: "\203A"; }
@media (max-width: 980px) { .sidebtn { display: none; } }

/* ---------- a module node on the platform diagram opens its graph ---------- */
.doc pre.mermaid .clickable { cursor: pointer; }
.doc pre.mermaid .clickable rect { transition: filter .15s; }
.doc pre.mermaid .clickable:hover rect { filter: brightness(.95); }
.fold.gfold { margin: 18px 0 0; }
.fold.gfold + .fold.gfold { margin-top: 10px; }
.fold.gfold .fold-h { font-size: 15.5px; }
.fold.gfold summary { padding: 13px 18px; }

/* the dark platform slabs keep light labels whatever the label renderer does */
.doc pre.mermaid g.plat foreignObject div,
.doc pre.mermaid g.plat foreignObject span,
.doc pre.mermaid g.plat foreignObject p,
.doc pre.mermaid g.plat .nodeLabel,
.doc pre.mermaid g.plat text { color: #f5f5f7 !important; fill: #f5f5f7 !important; }
/* the root-module node (classDef rootm — not 'root', which is mermaid's own wrapper group) keeps white labels the same way */
.doc pre.mermaid g.rootm foreignObject div,
.doc pre.mermaid g.rootm foreignObject span,
.doc pre.mermaid g.rootm foreignObject p,
.doc pre.mermaid g.rootm .nodeLabel,
.doc pre.mermaid g.rootm text { color: #ffffff !important; fill: #ffffff !important; }

/* the goal section a diagram node points at */
.doc h3.part-hit { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; border-radius: 0 6px 6px 0; transition: background .2s; }

/* ---------- wireframe gallery ---------- */
.wfgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; margin: 18px 0 26px; }
figure.wf { margin: 0; }
figure.wf a { display: block; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #fff; transition: box-shadow .16s, transform .16s; }
figure.wf a:hover { box-shadow: 0 6px 22px rgba(22,33,58,.13); transform: translateY(-2px); }
figure.wf img { display: block; width: 100%; height: auto; }
figure.wf figcaption { font-size: 13px; color: var(--text-2); padding: 8px 2px 0; line-height: 1.45; }
figure.wf figcaption b { color: var(--text); }
#wflb { position: fixed; inset: 0; z-index: 200; background: rgba(16,20,28,.82); display: none; align-items: center; justify-content: center; padding: 28px; cursor: zoom-out; }
#wflb.on { display: flex; }
#wflb img { width: min(1180px, 94vw); height: auto; max-height: 88vh; background: #fff; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
#wflb .cap { position: fixed; left: 0; right: 0; bottom: 14px; text-align: center; color: #fff; font-size: 13.5px; }
#wflb .x { position: fixed; top: 14px; right: 18px; color: #fff; font-size: 26px; line-height: 1; }

/* ---------- foldable sidebar groups ---------- */
.side .grp > b { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 5px; }
.side .grp > b::before { content: "\25BE"; font-size: 8px; line-height: 1; color: var(--line); transition: transform .15s; }
.side .grp.shut > b::before { transform: rotate(-90deg); }
.side .grp > b:hover { color: var(--text-2); }
.side .grp > b:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.side .grp.shut > a, .side .grp.shut > .sub { display: none; }
.side .grp.shut { margin-bottom: 6px; }

/* ---------- file preview pages (DDL, contracts, validators) ---------- */
.doc h1 code { font-size: .78em; background: var(--bg-2); padding: 2px 10px; border-radius: 8px; }
.doc p.filehead { max-width: none; line-height: 1.7; }
.doc p.filesibs { max-width: none; font-size: 13px; color: var(--muted); line-height: 1.8; }
.doc p.filesibs a { margin-right: 2px; }
.doc pre.listing { max-height: none; font-size: 12.5px; line-height: 1.55; tab-size: 4; counter-reset: ln; }