/* The $GOOD whitepaper (/docs/). A light reading surface under the site's dark nav: sidebar, article
   at a comfortable measure, and an "On this page" list on wide screens. Type comes only from the
   --site-f-* roles in shared/chrome.css; pages are generated by tools/pages.py. */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--site-nav-clear) + 12px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--site-cream); color: var(--site-ink); font-family: var(--site-body); -webkit-font-smoothing: antialiased; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
img { max-width: 100%; height: auto; }
::selection { background: var(--site-lime); color: var(--site-ink); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--site-lime); color: var(--site-ink); font: var(--site-f-strong); border-radius: 999px; }
.skip:focus { top: 16px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

:root {
  --d-line: rgba(12, 6, 2, .12);
  --d-line-2: rgba(12, 6, 2, .2);
  --d-text-2: rgba(12, 6, 2, .66);
  --d-panel: #fff;
  --d-wash: rgba(12, 6, 2, .04);
  --d-side: 264px;
  --d-toc: 220px;
}

/* ── Layout ── */
.docs {
  display: grid; grid-template-columns: var(--d-side) minmax(0, 1fr);
  max-width: 1320px; margin: 0 auto; padding: calc(var(--site-nav-clear) + 8px) clamp(16px, 3vw, 40px) 0;
}
.docs-main { display: grid; grid-template-columns: minmax(0, 1fr) var(--d-toc); gap: 48px; padding: 32px 0 96px clamp(24px, 4vw, 56px); }
.docs-article { min-width: 0; max-width: 760px; }

/* ── Sidebar ── */
.docs-side { position: sticky; top: calc(var(--site-nav-clear) + 8px); align-self: start; max-height: calc(100vh - var(--site-nav-clear) - 16px); overflow-y: auto; padding: 32px 20px 32px 0; border-right: 1px solid var(--d-line); }
.docs-side__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.docs-side__title { font: var(--site-f-title-2); color: var(--site-ink); text-decoration: none; }
.docs-side__title span { margin-left: 6px; padding: 3px 8px; border-radius: 999px; background: var(--site-lime); font: var(--site-f-label); vertical-align: 2px; }
.docs-side__menu { display: none; }
.docs-nav { margin-top: 20px; }
.docs-nav__group { margin: 20px 0 6px; font: var(--site-f-label); color: var(--d-text-2); }
.docs-nav ul { list-style: none; margin: 0; padding: 0; }
.docs-nav li a { display: block; padding: 7px 12px; border-radius: 8px; font: var(--site-f-body); line-height: 1.35; color: var(--site-ink); text-decoration: none; }
.docs-nav li a:hover { background: var(--d-wash); }
.docs-nav li a[aria-current="page"] { background: var(--site-ink); color: var(--site-cream); font-weight: 700; }
.docs-nav a:focus-visible, .docs-side__title:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 2px; }
.docs-nav__pdf { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 24px; padding: 12px 14px; border: 1px solid var(--d-line-2); border-radius: 12px; font: var(--site-f-strong); color: var(--site-ink); text-decoration: none; }
.docs-nav__pdf span { font: var(--site-f-small); color: var(--d-text-2); }
.docs-nav__pdf:hover { border-color: var(--site-ink); }
.docs-nav__pdf--audit { margin-top: 10px; }

/* ── Search ── */
.docs-search { position: relative; margin-top: 18px; }
.docs-search input {
  width: 100%; min-height: 42px; padding: 0 40px 0 14px;
  background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 10px;
  font: var(--site-f-body); color: var(--site-ink);
}
.docs-search input::placeholder { color: var(--d-text-2); }
.docs-search input:focus { outline: 2px solid var(--site-ink); outline-offset: 1px; border-color: var(--site-ink); }
.docs-search kbd { position: absolute; right: 10px; top: 11px; padding: 2px 7px; border: 1px solid var(--d-line-2); border-radius: 6px; font: var(--site-f-label); color: var(--d-text-2); }
.docs-results {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px);
  list-style: none; margin: 0; padding: 6px; max-height: 60vh; overflow-y: auto;
  background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 12px; box-shadow: 0 18px 40px rgba(12, 6, 2, .14);
}
.docs-results a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--site-ink); text-decoration: none; }
.docs-results a b { display: block; font: var(--site-f-strong); }
.docs-results a small { display: block; margin-top: 2px; font: var(--site-f-small); color: var(--d-text-2); }
.docs-results a span { display: -webkit-box; margin-top: 4px; font: var(--site-f-small); color: var(--site-ink); -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.docs-results mark { background: rgba(204, 255, 0, .7); color: inherit; border-radius: 3px; }
.docs-results [aria-selected="true"] a, .docs-results a:hover { background: var(--d-wash); }
.docs-results__none { padding: 12px; font: var(--site-f-small); color: var(--d-text-2); }

/* ── Article ── */
.docs-crumb { font: var(--site-f-label); color: var(--d-text-2); }
.docs-article h1 { margin-top: 10px; font: var(--site-f-display-2); letter-spacing: -.02em; text-transform: uppercase; }
.docs-article h2 { position: relative; margin-top: 48px; padding-top: 4px; font: var(--site-f-title-1); letter-spacing: -.01em; }
.docs-article h3 { margin-top: 28px; font: var(--site-f-title-2); }
.docs-anchor { position: absolute; left: -1.1em; color: var(--d-text-2); text-decoration: none; opacity: 0; transition: opacity .15s ease; }
.docs-article h2:hover .docs-anchor { opacity: 1; }
.docs-article p, .docs-article li { font: var(--site-f-body); line-height: 1.75; color: rgba(12, 6, 2, .86); }
.docs-article p { margin-top: 16px; }
.docs-article .docs-lead { margin-top: 18px; font: var(--site-f-lead); color: var(--site-ink); }
.docs-article ul, .docs-article ol { margin-top: 14px; padding-left: 22px; }
.docs-article li + li { margin-top: 4px; }
.docs-article a { color: var(--site-ink); text-decoration: underline; text-decoration-color: rgba(12, 6, 2, .35); text-underline-offset: 3px; }
.docs-article a:hover { text-decoration-color: var(--site-ink); }
.docs-article a:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 2px; border-radius: 3px; }
.docs-article strong { font-weight: 700; color: var(--site-ink); }
.docs-mono { font: var(--site-f-mono); word-break: break-all; }
.docs-verse { font: var(--site-f-title-1) !important; color: var(--site-ink) !important; }
.docs-signoff { margin-top: 32px !important; font: var(--site-f-display-2) !important; text-transform: uppercase; letter-spacing: -.02em; color: var(--site-ink) !important; }

/* tables scroll sideways on narrow screens instead of breaking the page */
.docs-table { margin-top: 20px; overflow-x: auto; border: 1px solid var(--d-line-2); border-radius: 12px; background: var(--d-panel); }
.docs-table table { width: 100%; border-collapse: collapse; font: var(--site-f-body); }
.docs-table th, .docs-table td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--d-line); }
.docs-table tr:last-child th, .docs-table tr:last-child td { border-bottom: 0; }
.docs-table thead th { background: var(--d-wash); font: var(--site-f-label); color: var(--d-text-2); white-space: nowrap; }
.docs-table tbody th { font-weight: 700; white-space: nowrap; }
.docs-table td { font-variant-numeric: tabular-nums; }
/* On phones the label column would otherwise keep its full nowrap width and crush the values into one word a line */
@media (max-width: 600px) { .docs-table tbody th { width: 36%; white-space: normal; } .docs-table th, .docs-table td { padding: 10px 12px; } }
/* The audit findings table has four columns; on phones each finding becomes a small card (name, then
   severity and status side by side, then the explanation) instead of four squeezed columns */
@media (max-width: 600px) {
  .findings thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .findings tr { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; padding: 14px 14px 16px; border-bottom: 1px solid var(--d-line); }
  .findings tr:last-child { border-bottom: 0; }
  .docs-table .findings td { padding: 0; border: 0; }
  .findings td:nth-child(1) { grid-column: 1 / -1; font-weight: 700; }
  .findings td:nth-child(2), .findings td:nth-child(3) { font: var(--site-f-small); color: var(--d-text-2); }
  .findings td:nth-child(4) { grid-column: 1 / -1; }
}

/* address rows: label, the address in full, copy and explorer */
.addr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 6px 16px; margin-top: 12px; padding: 14px 16px; background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 12px; }
.addr__label { grid-column: 1 / -1; font: var(--site-f-label); color: var(--d-text-2); }
.addr__value { min-width: 0; font: var(--site-f-mono); font-size: 14px; color: var(--site-ink); word-break: break-all; }
.addr__actions { display: flex; gap: 8px; }
.addr__btn {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px;
  background: transparent; border: 0; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--d-line-2); cursor: pointer;
  font: var(--site-f-label); color: var(--site-ink) !important; text-decoration: none !important; white-space: nowrap;
}
.addr__btn:hover { box-shadow: inset 0 0 0 1px var(--site-ink); }
.addr__btn:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 2px; }
button.addr__btn { background: var(--site-lime); box-shadow: none; }

.callout { margin-top: 20px; padding: 16px 18px; background: rgba(242, 194, 48, .14); border-left: 3px solid var(--site-gold); border-radius: 0 12px 12px 0; }
.callout p { margin: 0 !important; }

.docs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
.docs-card { display: block; padding: 16px 18px; background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 12px; text-decoration: none !important; }
.docs-card b { display: block; font: var(--site-f-strong); color: var(--site-ink); }
.docs-card span { display: block; margin-top: 4px; font: var(--site-f-small); color: var(--d-text-2); }
.docs-card:hover { border-color: var(--site-ink); }
.docs-entity { display: flex; flex-direction: column; gap: 2px; margin-top: 20px; padding: 18px 20px; background: var(--d-panel); border: 1px solid var(--d-line-2); border-radius: 12px; font: var(--site-f-body); }
.docs-entity b { font: var(--site-f-title-2); }
.docs-entity a { margin-top: 8px; font: var(--site-f-small); }

.docs-alloc { display: flex; gap: 3px; height: 40px; margin-top: 20px; }
.docs-alloc span { flex: var(--w); display: flex; align-items: center; justify-content: center; border-radius: 8px; font: var(--site-f-label); }
.a1 { background: var(--site-lime); color: var(--site-ink); }
.a2 { background: #8fb300; color: var(--site-ink); }
.a3 { background: var(--site-ink); color: var(--site-cream); }
.a4 { background: var(--site-hood); color: var(--site-cream); }
.a5 { background: var(--site-gold); color: var(--site-ink); }
.key { display: inline-block; width: 10px; height: 10px; margin-right: 10px; border-radius: 3px; vertical-align: 0; }

.docs-article__foot { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--d-line); }
.docs-meta { margin: 0 !important; font: var(--site-f-small) !important; color: var(--d-text-2) !important; }
.docs-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 20px; }
.docs-pager a { display: block; padding: 14px 18px; border: 1px solid var(--d-line-2); border-radius: 12px; text-decoration: none; }
.docs-pager a:hover { border-color: var(--site-ink); }
.docs-pager span { display: block; font: var(--site-f-small); color: var(--d-text-2); }
.docs-pager b { display: block; margin-top: 2px; font: var(--site-f-strong); color: var(--site-ink); }
.docs-pager__next { text-align: right; grid-column: 2; }

/* ── On this page ── */
.docs-toc { position: sticky; top: calc(var(--site-nav-clear) + 40px); align-self: start; padding-top: 8px; }
.docs-toc p { font: var(--site-f-label); color: var(--d-text-2); }
.docs-toc ul { list-style: none; margin: 10px 0 0; padding: 0; border-left: 1px solid var(--d-line); }
.docs-toc a { display: block; margin-left: -1px; padding: 5px 0 5px 14px; border-left: 2px solid transparent; font: var(--site-f-small); color: var(--d-text-2); text-decoration: none; }
.docs-toc a:hover { color: var(--site-ink); }
.docs-toc a.is-active { border-left-color: var(--site-ink); color: var(--site-ink); font-weight: 700; }

.site-footer { margin-top: 0; }

/* ── Narrower screens ── */
@media (max-width: 1199px) {
  .docs-main { grid-template-columns: minmax(0, 1fr); }
  .docs-toc { display: none; }
}
@media (max-width: 899px) {
  .docs { grid-template-columns: minmax(0, 1fr); padding-top: calc(var(--site-nav-clear) + 4px); }
  .docs-side { position: static; max-height: none; overflow: visible; padding: 16px 0 12px; border-right: 0; border-bottom: 1px solid var(--d-line); }
  .docs-side__menu { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; background: var(--site-ink); color: var(--site-cream); border: 0; border-radius: 999px; cursor: pointer; font: var(--site-f-strong); }
  .docs-side__menu[aria-expanded="true"] { background: var(--site-lime); color: var(--site-ink); }
  .docs-side__menu:focus-visible { outline: 2px solid var(--site-ink); outline-offset: 2px; }
  .js .docs-nav { display: none; }
  .js .docs-nav.is-open { display: block; }
  .docs-main { padding: 24px 0 72px; }
  .docs-anchor { display: none; }
  .docs-cards { grid-template-columns: 1fr; }
  .addr { grid-template-columns: 1fr; }
}