/* blockspace.wiki: a docs layout. Phone first: one column, the sections in a
   menu; from 60rem a left sidebar; from 82rem an on-page contents column too.
   Light and dark follow the system. System fonts, nothing fetched.
   The family chips use block.space's five-colour key (colour-key-v2). */

:root {
  color-scheme: light dark;
  --ground: #f6f8fb; --surface: #ffffff; --sunk: #eaf0f6;
  --ink: #12202e; --ink-2: #3a5068; --ink-3: #5a6e84; --head: #0f3f72;
  --link: #1257a5; --rule: #d6e1ec; --rule-2: #b3c7da; --accent: #2a78d6;
  --live: #0b7a25; --soon: #8a5a00; --theory-bg: #fff6e0; --theory-rule: #e2b64a;
  --fam-sat: #1192e8; --fam-rune: #b28600; --fam-brc20: #198038; --fam-alkane: #6929c4; --fam-omni: #9f1853; --fam-other: #b4b2aa;
  --sans: system-ui, -apple-system, "Segoe UI", Ubuntu, Roboto, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Ubuntu Mono", "DejaVu Sans Mono", Menlo, monospace;
  --measure: 70ch;
}
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0b1420; --surface: #111d2b; --sunk: #1a2a3b;
    --ink: #e9f0f7; --ink-2: #b0c3d6; --ink-3: #8ea4ba; --head: #a8cdf2;
    --link: #8fc0ee; --rule: #23364a; --rule-2: #3a5670; --accent: #4a92ea;
    --live: #35c351; --soon: #f0b429; --theory-bg: #2a2310; --theory-rule: #8a6d1e;
    --fam-sat: #3d94dd; --fam-rune: #bf8800; --fam-brc20: #2aae73; --fam-alkane: #834bed; --fam-omni: #d0188e; --fam-other: #626059;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 16px/1.6 var(--sans); }
a { color: var(--link); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
code, pre, kbd { font-family: var(--mono); font-size: 0.9em; }
code { background: var(--sunk); padding: 0.08em 0.3em; border-radius: 4px; overflow-wrap: anywhere; }
pre { background: var(--sunk); padding: 0.8rem 1rem; border-radius: 8px; overflow-x: auto; line-height: 1.45; }
pre code { background: none; padding: 0; overflow-wrap: normal; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 0.5rem 1rem; z-index: 9; }
.skip:focus { left: 0.5rem; }
.muted { color: var(--ink-3); }

/* top bar */
.top { display: flex; align-items: center; gap: 1rem; justify-content: space-between; padding: 0.6rem 1rem;
       background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 5; }
.brand { font-weight: 700; color: var(--head); text-decoration: none; display: flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.search-mini input { width: 9.5rem; max-width: 40vw; padding: 0.35rem 0.6rem; border: 1px solid var(--rule-2);
       border-radius: 6px; background: var(--ground); color: var(--ink); font: inherit; font-size: 0.92rem; }

/* shell */
.shell { max-width: 84rem; margin: 0 auto; display: block; }
.side { padding: 0.5rem 1rem 0; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side li { margin: 0; }
.side a { text-decoration: none; display: block; padding: 0.22rem 0.4rem; border-radius: 5px; color: var(--ink-2); }
.side a[aria-current] { background: var(--sunk); color: var(--head); font-weight: 600; }
.side a:hover { color: var(--link); }
.side li > details > summary { cursor: pointer; display: flex; align-items: center; gap: 0.15rem; }
.side li > details > summary a { display: inline-block; font-weight: 600; color: var(--ink); }
.side li.leaf > a { font-weight: 600; color: var(--ink); }
.side li > details ul { padding-left: 0.7rem; border-left: 1px solid var(--rule); margin: 0.1rem 0 0.4rem 0.6rem; font-size: 0.93rem; }
.menu { border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 0.4rem 0.7rem; }
.menu > summary { cursor: pointer; font-weight: 600; color: var(--head); }
.menu-wide { display: none; }

main { padding: 0.5rem 1rem 2rem; min-width: 0; }
article { max-width: var(--measure); }
h1 { font-size: 1.9rem; line-height: 1.2; color: var(--head); margin: 0.6rem 0 0.4rem; letter-spacing: -0.01em; overflow-wrap: anywhere; }
h2 { font-size: 1.35rem; color: var(--head); margin: 2rem 0 0.5rem; padding-top: 0.6rem; border-top: 1px solid var(--rule); }
h3 { font-size: 1.08rem; margin: 1.4rem 0 0.4rem; }
h2, h3 { scroll-margin-top: 4rem; }
.anchor { opacity: 0; text-decoration: none; font-weight: 400; color: var(--ink-3); }
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }
.lede { font-size: 1.1rem; color: var(--ink-2); margin-top: 0; }
.prose p, .prose li { overflow-wrap: break-word; }
blockquote { margin: 1rem 0; padding: 0.2rem 1rem; border-left: 3px solid var(--rule-2); color: var(--ink-2); }
.table { overflow-x: auto; margin: 1rem 0; }
table { border-collapse: collapse; font-size: 0.93rem; min-width: 100%; }
th, td { text-align: left; padding: 0.4rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
th { background: var(--sunk); }
td code { white-space: nowrap; }

.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0; margin: 0.4rem 0 0; font-size: 0.86rem; color: var(--ink-3); }
.crumbs li + li::before { content: "›"; margin-right: 0.3rem; }
.crumbs a { color: var(--ink-3); }

.toc { margin: 1rem 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); padding: 0.4rem 0.8rem; font-size: 0.92rem; }
.toc summary { font-weight: 600; color: var(--head); cursor: pointer; }
.toc ol { list-style: none; padding: 0; margin: 0.3rem 0; }
.toc li.l3 { padding-left: 0.9rem; }
.toc a { text-decoration: none; display: block; padding: 0.1rem 0; }

.note { border: 1px solid var(--rule); border-left: 4px solid var(--accent); background: var(--surface); padding: 0.7rem 1rem; border-radius: 6px; margin: 1rem 0; }
.note.theory { background: var(--theory-bg); border-color: var(--theory-rule); }
.card { display: grid; grid-template-columns: max-content 1fr; gap: 0.3rem 1rem; background: var(--surface); border: 1px solid var(--rule);
        border-radius: 8px; padding: 0.8rem 1rem; margin: 1rem 0; }
.card dt { color: var(--ink-3); font-size: 0.9rem; }
.card dd { margin: 0; overflow-wrap: anywhere; }
.status { font-size: 0.78rem; font-weight: 700; padding: 0.08rem 0.45rem; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; }
.status.live { color: var(--live); }
.status.soon { color: var(--soon); }
dl.terms dt { font-weight: 600; margin-top: 0.8rem; }
dl.terms dd { margin: 0.1rem 0 0; }
dl.bib > div { margin: 0.7rem 0; }
dl.bib dt { font-weight: 600; }
dl.bib dd { margin: 0; font-size: 0.93rem; overflow-wrap: anywhere; }
ol.sources { font-size: 0.93rem; padding-left: 1.3rem; overflow-wrap: anywhere; }
ul.index { list-style: none; padding: 0; }
ul.index > li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
ul.related { padding-left: 1.2rem; }
ul.cols { columns: 16rem; padding-left: 1.1rem; }
.az a { font-family: var(--mono); font-weight: 700; padding: 0 0.15rem; }
.filter { margin: 0.8rem 0; }
.filter select { font: inherit; padding: 0.25rem; background: var(--surface); color: var(--ink); border: 1px solid var(--rule-2); border-radius: 6px; }
.js-only { display: none; }
.js .js-only { display: block; }
ol.timeline { list-style: none; padding: 0; }
ol.timeline li { padding: 0.5rem 0 0.5rem 0.9rem; border-left: 2px solid var(--rule-2); margin-left: 0.3rem; }
ol.timeline time { font-family: var(--mono); font-weight: 700; color: var(--head); margin-right: 0.4rem; }
ol.timeline .muted { display: block; font-size: 0.86rem; }
.asof, .updated { font-size: 0.85rem; color: var(--ink-3); margin-top: 1.5rem; }
.updated { margin-top: 0.3rem; }

.grid { display: grid; grid-template-columns: 1fr; gap: 0.7rem; margin: 1.2rem 0; }
.tile { display: block; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 0.8rem 1rem; text-decoration: none; color: var(--ink); }
.tile strong { color: var(--head); }
.tile span:last-child { display: block; color: var(--ink-2); font-size: 0.93rem; }
.tile:hover { border-color: var(--accent); }

.chip { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.85rem; padding: 0.05rem 0.5rem; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); white-space: nowrap; }
.chip i { width: 0.7rem; height: 0.7rem; border-radius: 2px; display: inline-block; }
.fam-sat i { background: var(--fam-sat); } .fam-rune i { background: var(--fam-rune); } .fam-brc20 i { background: var(--fam-brc20); }
.fam-alkane i { background: var(--fam-alkane); } .fam-omni i { background: var(--fam-omni); } .fam-other i { background: var(--fam-other); }

.search-big { display: flex; gap: 0.5rem; margin: 1rem 0; }
.search-big input { flex: 1; min-width: 0; padding: 0.55rem 0.7rem; font: inherit; border: 1px solid var(--rule-2); border-radius: 8px; background: var(--surface); color: var(--ink); }
.search-big button { font: inherit; padding: 0.5rem 0.9rem; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
#results ol { list-style: none; padding: 0; }
#results li { padding: 0.55rem 0; border-bottom: 1px solid var(--rule); }
#results .k { font-size: 0.8rem; color: var(--ink-3); }

.foot { border-top: 1px solid var(--rule); padding: 1rem; color: var(--ink-3); font-size: 0.88rem; max-width: 84rem; margin: 0 auto; }
.foot .machine a { white-space: nowrap; }

@media (min-width: 40rem) {
  .grid { grid-template-columns: 1fr 1fr; }
  .search-mini input { width: 14rem; }
}
@media (min-width: 60rem) {
  .shell { display: grid; grid-template-columns: 16rem minmax(0, 1fr); gap: 1.5rem; padding: 0 1rem; }
  .side { position: sticky; top: 3.2rem; align-self: start; max-height: calc(100vh - 3.4rem); overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--rule-2) transparent; padding: 1rem 0; font-size: 0.95rem; }
  .menu { display: none; }
  .menu-wide { display: block; }
  main { padding: 0.5rem 0 3rem; }
  h1 { font-size: 2.2rem; }
}
@media (min-width: 78rem) {
  article { display: grid; grid-template-columns: minmax(0, var(--measure)) 14rem; column-gap: 2rem; max-width: none; }
  article > * { grid-column: 1; }
  article > .toc { grid-column: 2; grid-row: 1 / span 6; position: sticky; top: 4rem; align-self: start; border: 0; background: none; padding: 0; margin-top: 1rem; }
  .toc summary { pointer-events: none; list-style: none; }
  .toc summary::-webkit-details-marker { display: none; }
  .toc ol { border-left: 1px solid var(--rule); padding-left: 0.8rem; }
}
@media print { .top, .side, .foot, .toc { display: none; } }
.side li > details > summary { list-style: none; }
.side li > details > summary::-webkit-details-marker { display: none; }
.side li > details > summary::before { content: "▸"; color: var(--ink-3); width: 0.9rem; flex: none; font-size: 0.8rem; }
.side li > details[open] > summary::before { content: "▾"; }
.side li.leaf { padding-left: 0.9rem; }