/* Docs page: the site's system (style.css) plus a reading layout, the live proof panel and code styling. */

.docs-page main { padding-top: var(--nav-h); }
.docs-hero { padding: 96px 0 40px; position: relative; isolation: isolate; }
.docs-hero::before { content: ''; position: absolute; inset: -40px 0 auto; height: 420px; z-index: -1; background: radial-gradient(50% 70% at 20% 0%, rgba(74, 92, 255, 0.16), transparent 70%); pointer-events: none; }
.docs-hero h1 { margin-top: 16px; font: 700 clamp(36px, 5.4vw, 68px)/1 var(--f-display); letter-spacing: -0.045em; transform: skewX(-8deg); transform-origin: 0 100%; }
.docs-hero p { margin-top: 20px; max-width: 660px; font-size: 17px; line-height: 1.65; color: #b9bbcb; }
.docs-meta { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 12.5px; color: var(--t3); }

/* ------------------------------------------------------------------ proof panel */
.docs-proof { padding-top: 24px; padding-bottom: 24px; scroll-margin-top: calc(var(--nav-h) + 16px); }
.proof-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.proof-head h2 { margin-top: 12px; font: 700 clamp(26px, 3.2vw, 38px)/1.05 var(--f-display); letter-spacing: -0.04em; transform: skewX(-8deg); transform-origin: 0 100%; }
.proof-status { display: inline-flex; align-items: center; gap: 10px; height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--s1); font: 500 12.5px var(--f-mono); color: var(--t2); }
.pdot { width: 8px; height: 8px; border-radius: 50%; background: var(--t3); position: relative; }
.proof-status[data-state='live'] .pdot, .proof-status[data-state='sim'] .pdot { background: var(--acc-hi); }
.proof-status[data-state='live'] .pdot::after, .proof-status[data-state='sim'] .pdot::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: inherit; animation: ping 1.8s var(--ease) infinite; }
.proof-status[data-state='live'] { border-color: var(--acc-line); color: #fff; }
.proof-status[data-state='offline'] { border-style: dashed; }
.proof-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.pcard { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.pcard .big { font: 600 26px/1.15 var(--f-sans); letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .sub { font-size: 12.5px; color: var(--t3); }
.pcard .rows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; }
.pcard .rows div { display: flex; justify-content: space-between; gap: 10px; }
.pcard .rows span:last-child { color: #fff; font-variant-numeric: tabular-nums; font-family: var(--f-mono); font-size: 12.5px; }
.mode-tag { display: inline-flex; align-self: flex-start; align-items: center; height: 26px; padding: 0 10px; border-radius: 7px; font: 400 10px var(--f-wide); letter-spacing: 0.22em; text-transform: uppercase; border: 1px dashed var(--line-3); color: var(--t2); }
.mode-tag[data-mode='mainnet'] { border: 0; background: #fff; color: #000; }
.mode-tag[data-mode='devnet'] { border-style: solid; border-color: var(--acc-line); color: var(--acc-hi); }
.ok-tag { color: var(--acc-hi); }
.bad-tag { color: #fff; font-weight: 600; }
.pjobs { grid-column: 1 / -1; overflow: hidden; }
.pjobs .board-head { padding: 14px 20px; min-height: 0; }
.status-chip { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 999px; font: 500 11.5px var(--f-mono); border: 1px solid var(--line-2); color: var(--t2); }
.status-chip[data-s='ok'] { background: #fff; color: #000; border-color: transparent; }
.status-chip[data-s='error'] { border-color: rgba(255, 255, 255, 0.6); color: #fff; font-weight: 600; }
.status-chip[data-s='never'], .status-chip[data-s='skipped'] { border-style: dashed; }
.sim { font: 500 11px var(--f-mono); color: var(--lilac); margin-left: 6px; }
.proof-offline { grid-column: 1 / -1; padding: 28px; border-style: dashed; }
.proof-offline h3 { font: 650 18px var(--f-sans); }
.proof-offline p { margin-top: 8px; color: var(--t2); max-width: 720px; }
.proof-verify { margin-top: 12px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 20px; align-items: center; }
.proof-verify p { margin-top: 6px; font-size: 14px; color: var(--t2); }
.proof-verify .code { margin: 0; }
@media (max-width: 1080px) { .proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .proof-grid, .proof-verify { grid-template-columns: minmax(0, 1fr); } .pjobs .hide-sm { display: none; } }

/* ------------------------------------------------------------------ reading layout */
.docs-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding-top: 48px; padding-bottom: 120px; align-items: start; }
.docs-toc { position: sticky; top: calc(var(--nav-h) + 24px); max-height: calc(100vh - var(--nav-h) - 48px); overflow: auto; padding-right: 8px; scrollbar-width: thin; }
.docs-toc > .label { margin-bottom: 12px; }
.docs-toc ol, .docs-toc ul { list-style: none; margin: 0; padding: 0; }
.docs-toc > ol > li { margin-bottom: 4px; }
.docs-toc a { display: block; padding: 6px 10px; border-radius: 8px; font-size: 13.5px; color: var(--t2); border-left: 2px solid transparent; transition: color 160ms, background-color 160ms; }
.docs-toc a:hover { color: #fff; background: rgba(255, 255, 255, 0.04); }
.docs-toc a.active { color: #fff; border-left-color: var(--acc-hi); background: rgba(74, 92, 255, 0.08); }
.docs-toc ul a { padding: 4px 10px 4px 34px; font-size: 12.5px; color: var(--t3); }
.toc-n { display: inline-block; width: 24px; font: 500 11.5px var(--f-mono); color: var(--t3); }
.docs-menu { display: none; }

.docs-body { max-width: 800px; min-width: 0; }
.dsec { position: relative; padding-top: 56px; margin-top: 56px; border-top: 1px solid var(--line); scroll-margin-top: calc(var(--nav-h) + 12px); }
.dsec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dsec-num { font: 500 12.5px var(--f-mono); color: var(--acc-hi); margin-bottom: 10px; }
.dsec-title { font: 700 clamp(26px, 3vw, 34px)/1.1 var(--f-display); letter-spacing: -0.035em; transform: skewX(-8deg); transform-origin: 0 100%; margin-bottom: 18px; }
.docs-body h3, .docs-body h4, .docs-body h5 { position: relative; color: #fff; scroll-margin-top: calc(var(--nav-h) + 16px); }
.docs-body h3 { font: 650 20px/1.3 var(--f-sans); letter-spacing: -0.02em; margin: 36px 0 12px; }
.docs-body h4 { font: 650 16.5px/1.35 var(--f-sans); margin: 26px 0 10px; }
.docs-body h5 { font: 600 14.5px/1.35 var(--f-sans); margin: 20px 0 8px; }
.anchor { position: absolute; left: -22px; color: var(--t3); opacity: 0; font-weight: 400; transition: opacity 160ms; }
.dh:hover .anchor, .anchor:focus-visible { opacity: 1; }
.docs-body p, .docs-body li { font-size: 15.5px; line-height: 1.75; color: #b4b6c7; }
.docs-body p { margin: 0 0 14px; }
.docs-body ul, .docs-body ol { margin: 0 0 16px; padding-left: 22px; }
.docs-body li { margin: 4px 0; }
.docs-body li::marker { color: var(--t3); }
.docs-body strong { color: #fff; font-weight: 600; }
.docs-body a { color: var(--acc-hi); text-decoration: underline; text-decoration-color: rgba(159, 176, 255, 0.35); text-underline-offset: 3px; }
.docs-body a:hover { text-decoration-color: currentColor; }
.docs-body a.anchor { text-decoration: none; color: var(--t3); }
.docs-body hr { border: 0; border-top: 1px solid var(--line); margin: 28px 0; }
.docs-body :not(pre) > code { font: 500 13px var(--f-mono); padding: 2px 6px; border-radius: 6px; background: var(--s2); border: 1px solid var(--line); color: #e3e6f5; white-space: nowrap; }
.docs-body code.path { color: var(--acc-hi); }
.callout { margin: 18px 0; padding: 14px 18px; border-radius: 12px; border: 1px solid var(--acc-line); background: rgba(74, 92, 255, 0.07); }
.callout p:last-child { margin-bottom: 0; }

/* code */
.code { margin: 16px 0 20px; border: 1px solid var(--line-2); border-radius: 14px; background: #06060b; overflow: hidden; }
.code-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 10px 7px 16px; border-bottom: 1px solid var(--line); font: 500 11.5px var(--f-mono); color: var(--t3); text-transform: lowercase; }
.code-copy { height: 26px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--line-2); background: transparent; color: var(--t2); font: 500 11.5px var(--f-mono); cursor: pointer; }
.code-copy:hover { color: #fff; border-color: var(--line-3); }
.code pre, pre.diagram { margin: 0; padding: 16px 18px; overflow-x: auto; font: 400 13.2px/1.68 var(--f-mono); color: #d7daea; tab-size: 2; }
pre.diagram { margin: 16px 0 20px; border: 1px solid var(--line-2); border-radius: 14px; background: radial-gradient(80% 100% at 0% 0%, rgba(74, 92, 255, 0.07), transparent 60%), #06060b; color: #c3c8e6; line-height: 1.5; }
.tbl-scroll { margin: 16px 0 22px; overflow-x: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--s1); }
.dtbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dtbl th { text-align: left; font-weight: 500; font-size: 12px; color: var(--t3); padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dtbl td { padding: 10px 14px; border-bottom: 1px solid var(--line); color: var(--t2); vertical-align: top; }
.dtbl tr:last-child td { border-bottom: 0; }

/* syntax colours in the brand palette */
.hljs-keyword, .hljs-built_in, .hljs-selector-tag, .hljs-meta .hljs-keyword { color: #b8a6ff; }
.hljs-string, .hljs-regexp, .hljs-template-string, .hljs-attr .hljs-string { color: #9fb0ff; }
.hljs-number, .hljs-literal, .hljs-symbol { color: #ffffff; }
.hljs-title, .hljs-title.function_, .hljs-function .hljs-title { color: #e8ebff; font-weight: 500; }
.hljs-comment, .hljs-quote { color: #5d6078; font-style: normal; }
.hljs-attr, .hljs-property, .hljs-variable, .hljs-params { color: #cfd3ea; }
.hljs-type, .hljs-class .hljs-title, .hljs-title.class_ { color: #7fe3ff; }
.hljs-meta, .hljs-doctag { color: #8a8da6; }
.hljs-punctuation, .hljs-operator { color: #8a8da6; }
.hljs-addition { color: #9fb0ff; } .hljs-deletion { color: #7c7f94; text-decoration: line-through; }

@media (max-width: 980px) {
  .docs-layout { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 32px; }
  .docs-menu { display: inline-flex; }
  .docs-toc { position: fixed; z-index: 60; left: 0; top: var(--nav-h); bottom: 0; width: min(320px, 86vw); max-height: none; padding: 20px 16px; background: rgba(6, 6, 11, 0.97); border-right: 1px solid var(--line-2); transform: translateX(-102%); transition: transform 260ms var(--ease-out); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .docs-toc.open { transform: none; }
  .anchor { display: none; }
}
@media (max-width: 560px) { .docs-hero { padding-top: 64px; } .docs-body p, .docs-body li { font-size: 15px; } .code pre, pre.diagram { font-size: 12.2px; } }

/* parts: Protocol, then Backend code */
.docs-toc .toc-part { margin: 18px 0 6px; padding-left: 10px; font: 400 9.5px var(--f-wide); letter-spacing: 0.26em; text-transform: uppercase; color: var(--acc-hi); }
.docs-toc .toc-part:first-child { margin-top: 0; }
.dpart { margin: 72px 0 0; padding-top: 24px; border-top: 1px solid var(--acc-line); font: 400 10.5px var(--f-wide); letter-spacing: 0.3em; text-transform: uppercase; color: var(--acc-hi); }
.dpart:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.dpart + .dsec { margin-top: 20px; padding-top: 0; border-top: 0; }

/* diagrams need every box-drawing glyph in one monospace font, or the lines drift; Geist Mono lacks them */
pre.diagram { font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; font-size: 12.8px; }