/* SwarmKit page CSS. The kit (assets/system.css) owns tokens, grid, type, buttons, nav and footer.
   This file holds only what sits inside a visual, plus the documentation layout. */

/* ---------- hero: the lit sky ground of the art, one soft light ---------- */
.hero__art { background:
    radial-gradient(70% 60% at 18% 12%, color-mix(in oklab, var(--ground-surface) 80%, white), transparent 70%),
    radial-gradient(60% 50% at 90% 100%, color-mix(in oklab, var(--ground-bg) 75%, var(--ground-accent)), transparent 70%),
    var(--ground-bg); }
.hero__art > .ly-piece--note { left: var(--s-6); bottom: var(--s-6); width: 300px; z-index: 2; }
.hero__proof { font-size: var(--t-small); color: var(--ink); }
.d-note__line { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13px; color: #3d4247; border-top: 1px solid rgb(0 0 0 / .06); }
.d-note__line:first-of-type { border-top: 0; }
.d-note__line i { width: 18px; height: 18px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #e4e7fc; color: #1f2de6; font-style: normal; font-size: 12px; font-weight: 600; }
.d-note__line b { font-weight: 500; color: #16181a; }
.d-row .sk-thumb { display: grid; place-items: center; font: 500 12px/1 var(--font-mono); color: #4a5059; background: #e6e9ee; }
.d-row .sk-thumb--win { background: #1f2de6; color: #fff; }
.d-main .num { font-family: var(--font-mono); }
.ly-piece--main .d-row { grid-template-columns: 36px minmax(0, 1fr) 40px 104px; }
.ly-piece--main .d-main { padding-right: var(--ly-cut-room); }
@media (max-width: 1023px) { .hero__art > .ly-piece--note { left: var(--s-4); bottom: var(--s-4); width: 270px; } }
@media (max-width: 639px) { .ly-piece--main .d-row { grid-template-columns: 36px minmax(0, 1fr) 104px; } .ly-piece--main .d-row .num { display: none; } }

/* ---------- #round: the app-frame recipe ---------- */
.round-intro { font-size: var(--t-body); }
.app.ui { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); margin-top: var(--s-7); background: var(--u-bg); border: 1px solid var(--u-border); border-radius: var(--u-r); box-shadow: var(--u-shadow); }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-left: 1px solid var(--u-line); }
.app > .app__pane > .ui-panel { width: 100%; border: 0; border-radius: 0; box-shadow: none; }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--u-bg)); pointer-events: none; }
@media (min-width: 1024px) and (max-width: 1279px) { .app.ui { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app .ui-win__side { display: none; }
  .app .ui-win__body { grid-template-columns: minmax(0, 1fr); }
  .app > .app__pane + .app__pane { border-left: 0; border-top: 1px solid var(--u-line); }
}
@media (max-width: 639px) {
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
}

/* ---------- #how: three steps, one panel height ---------- */
#how .panel { --p-h: 336px; }
@media (max-width: 639px) { #how .panel { --p-h: 220px; } }

/* ---------- #testnet: receipts on the dark band ---------- */
.testnet-intro { display: grid; gap: var(--s-5); align-content: start; }
.switcher { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.switcher button { min-height: 44px; padding: 0 var(--s-5); border: 1px solid color-mix(in oklab, var(--ink) 22%, transparent); border-radius: var(--r-btn); background: transparent; color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; }
.switcher button[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.receipts { margin-top: var(--s-7); display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-height: 0; background: var(--bg); border: 1px solid color-mix(in oklab, var(--ink) 16%, transparent); border-radius: var(--r-lg); overflow: hidden; }
.receipts__bar { display: flex; align-items: center; gap: var(--s-3); height: 44px; padding: 0 var(--s-5); border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); font: 400 13px/1 var(--font-mono); color: var(--ink); }
.receipt-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); margin: 0; padding: var(--s-5) var(--s-5) var(--s-4); }
.receipt-facts dt { font-size: var(--t-label); color: var(--ink); }
.receipt-facts dd { margin: var(--s-2) 0 0; font: 500 28px/1.1 var(--font-text); letter-spacing: -0.01em; }
.receipt-facts dd .link { font: 500 var(--t-body)/1.4 var(--font-text); letter-spacing: 0; }
.receipt-table { overflow: auto; min-height: 0; padding: 0 var(--s-5); border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); }
.receipt-table table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.receipt-table th { text-align: left; font-weight: 500; font-size: var(--t-label); color: var(--ink); padding: var(--s-3) var(--s-4) var(--s-3) 0; }
.receipt-table td { padding: var(--s-3) var(--s-4) var(--s-3) 0; border-top: 1px solid color-mix(in oklab, var(--ink) 10%, transparent); white-space: nowrap; font-family: var(--font-mono); color: var(--ink); }
.receipt-table td a { color: var(--ink); }
@media (max-width: 639px) {
  .receipt-facts { grid-template-columns: 1fr 1fr; }
  .receipt-facts div:last-child { display: none; }
  .receipt-table { max-height: 280px; }
}

/* ---------- #sdk: the in-page SDK runner (a drawn window holding a live control) ---------- */
.sdk-copy { display: grid; gap: var(--s-5); align-content: start; }
.sdk-copy h2 { margin-bottom: var(--s-2); }
.play { border: 1px solid var(--u-border); border-radius: var(--u-r); background: var(--u-bg); box-shadow: var(--u-shadow); overflow: hidden; color: var(--u-ink, var(--ink)); }
.play__bar { display: flex; align-items: center; gap: var(--s-3); height: 44px; padding: 0 var(--s-4); border-bottom: 1px solid var(--u-line); font: 400 13px/1 var(--font-mono); color: var(--muted); }
.play__code { margin: 0; padding: var(--s-5) var(--s-6); border-bottom: 1px solid var(--u-line); background: #0f1115; color: #e6e8ee; font: 400 13px/1.75 var(--font-mono); overflow-x: auto; }
.play__code .k { color: #9fb0ff; } .play__code .f { color: #ffffff; } .play__code .s { color: #b9e3c6; } .play__code .c { color: #aab0bc; }
.play__body { display: grid; gap: var(--s-4); padding: var(--s-6); }
.play__label { font-size: var(--t-label); font-weight: 500; }
.play select { min-height: 48px; padding: 0 var(--s-4); border: 1px solid var(--u-border); border-radius: var(--r-sm); background: var(--bg); color: var(--ink); font: 400 16px var(--font-text); }
.play__stages { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); font: 400 13px/1 var(--font-mono); }
.play__stages li { padding: var(--s-3) 0 0; border-top: 2px solid var(--u-line); color: var(--muted); }
.play__stages li.is-done { border-color: var(--ink); color: var(--ink); }
.play__stages li.is-now { border-color: var(--action); color: var(--action); }
.play__out { min-height: 84px; margin: 0; font: 400 var(--t-lead)/1.45 var(--font-text); }
.play__btn { justify-self: start; }
@media (max-width: 639px) { .play__btn { justify-self: stretch; } .play__out { min-height: 120px; font-size: 18px; } }


/* ---------- #rules: the statement set large enough to hold its screen ---------- */
#rules .mo-wh__text { font-size: clamp(32px, 3.9vw, 56px); max-width: 1180px; line-height: 1.12; }

/* ---------- documentation pages ---------- */
.docs { padding-top: calc(var(--nav) + var(--s-7)); padding-bottom: var(--s-9); }
.docs .wrap { display: grid; grid-template-columns: 232px minmax(0, 1fr) 184px; gap: var(--s-8); align-items: start; }
.docs-nav { position: sticky; top: calc(var(--nav) + var(--s-6)); max-height: calc(100svh - var(--nav) - var(--s-8)); overflow: auto; padding-right: var(--s-3); }
.docs-nav__search { display: grid; gap: var(--s-2); margin-bottom: var(--s-6); font-size: var(--t-label); font-weight: 500; }
.docs-nav__search input { min-height: 44px; padding: 0 var(--s-3); border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: var(--r-sm); background: var(--surface); color: var(--ink); font: 400 16px var(--font-text); }
#search-results:not(:empty) { display: grid; gap: var(--s-1); margin: calc(var(--s-4) * -1) 0 var(--s-6); padding-bottom: var(--s-4); border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); font-size: var(--t-small); }
#search-results a { padding: var(--s-2) 0; color: var(--action); }
.docs-nav h2 { margin: var(--s-6) 0 var(--s-2); font: 500 var(--t-label)/1.4 var(--font-text); color: var(--muted); letter-spacing: 0; }
.docs-nav h2:first-of-type { margin-top: 0; }
.docs-nav a.docs-nav__link { display: flex; align-items: center; min-height: 36px; padding: 0 var(--s-3); margin-left: calc(var(--s-3) * -1); border-left: 2px solid transparent; font-size: var(--t-small); color: var(--ink); text-decoration: none; }
.docs-nav a.docs-nav__link:hover { color: var(--action); }
.docs-nav a.docs-nav__link[aria-current="page"] { border-left-color: var(--action); color: var(--action); font-weight: 500; }
.docs-menu { display: none; }
.doc { min-width: 0; max-width: 760px; }
.doc__crumb { margin: 0 0 var(--s-4); font: 400 13px/1.4 var(--font-mono); color: var(--muted); }
.doc h1 { font: var(--display-weight) clamp(36px, 3.4vw, 52px)/1.06 var(--font-display); letter-spacing: var(--display-tracking-xl); margin: 0 0 var(--s-4); max-width: 18ch; }
.doc__lead { font-size: var(--t-lead); line-height: 1.5; color: var(--muted); margin: 0 0 var(--s-5); max-width: 62ch; }
.doc__actions { display: flex; flex-wrap: wrap; gap: var(--s-5); align-items: center; padding-bottom: var(--s-6); margin-bottom: var(--s-6); border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); font-size: var(--t-small); }
.doc__body h2 { font: var(--display-weight) 28px/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin: var(--s-8) 0 var(--s-4); scroll-margin-top: calc(var(--nav) + var(--s-5)); }
.doc__body h3 { font: 500 20px/1.3 var(--font-display); margin: var(--s-6) 0 var(--s-3); }
.doc__body p, .doc__body li { font-size: 16px; line-height: 1.75; max-width: 68ch; }
.doc__body p { margin: 0 0 var(--s-4); }
.doc__body ul, .doc__body ol { padding-left: var(--s-5); margin: 0 0 var(--s-5); }
.doc__body li { margin: var(--s-1) 0; }
.doc__body a { color: var(--action); text-underline-offset: 3px; }
.doc__body :not(pre) > code { font: 400 .875em var(--font-mono); background: var(--surface); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.code-block { position: relative; margin: 0 0 var(--s-5); }
.doc__body pre { margin: 0; padding: var(--s-5); padding-top: var(--s-7); overflow: auto; background: #0f1115; color: #e6e8ee; border-radius: var(--r-md); font: 400 13.5px/1.75 var(--font-mono); }
.doc__body pre code { font: inherit; background: none; padding: 0; }
/* syntax colours (build-time spans from highlight.mjs); every token 7:1 or more on #0f1115 */
.doc__body pre .tk-keyword { color: #9fb0ff; }
.doc__body pre .tk-string { color: #b9e3c6; }
.doc__body pre .tk-number, .doc__body pre .tk-literal { color: #f5c58a; }
.doc__body pre .tk-comment { color: #a3a9b5; font-style: italic; }
.doc__body pre .tk-type { color: #f2b8cf; }
.doc__body pre .tk-fn { color: #7fd4ff; }
.doc__body pre[data-lang]::before { content: attr(data-lang); position: absolute; top: var(--s-3); left: var(--s-5); font: 500 12px/1 var(--font-mono); color: #a3a9b5; text-transform: lowercase; }
.doc__body pre[data-lang="ts"]::before { content: "typescript"; }
.copy-code { position: absolute; top: var(--s-2); right: var(--s-2); min-height: 32px; padding: 0 var(--s-3); border: 1px solid rgb(255 255 255 / .16); border-radius: var(--r-sm); background: transparent; color: #c6cad3; font: 500 13px/1 var(--font-text); cursor: pointer; }
.copy-code:hover { color: #fff; border-color: rgb(255 255 255 / .4); }
.doc__body table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-6); font-size: var(--t-small); display: block; overflow-x: auto; }
.doc__body th, .doc__body td { text-align: left; vertical-align: top; padding: var(--s-3) var(--s-4) var(--s-3) 0; border-bottom: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); line-height: 1.6; }
.doc__body th { font-weight: 500; font-size: var(--t-label); color: var(--muted); }
.doc__body td:first-child { white-space: nowrap; }
.doc__body .note { padding: var(--s-4) var(--s-5); border-left: 2px solid var(--action); background: var(--surface); }
.api-module + .api-module { margin-top: var(--s-6); }
.doc__next { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); margin-top: var(--s-9); padding-top: var(--s-5); border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); font-size: var(--t-small); color: var(--muted); }
.doc__next a { font: 500 var(--t-lead)/1.3 var(--font-display); color: var(--ink); text-decoration: none; }
.doc__next a:hover { color: var(--action); }
.docs-toc { position: sticky; top: calc(var(--nav) + var(--s-6)); font-size: var(--t-label); }
.docs-toc h2 { margin: 0 0 var(--s-3); font: 500 var(--t-label)/1.4 var(--font-text); color: var(--muted); letter-spacing: 0; }
.docs-toc a { display: block; padding: var(--s-1) 0; color: var(--ink); text-decoration: none; line-height: 1.5; }
.docs-toc a:hover, .docs-toc a.is-on { color: var(--action); }
.docs-foot { border-top: 1px solid color-mix(in oklab, var(--ink) 12%, transparent); padding: var(--s-6) 0; font-size: var(--t-small); color: var(--muted); }
.docs-foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-5); }
.docs-foot nav { display: flex; flex-wrap: wrap; gap: var(--s-5); }
.docs-foot a { color: var(--ink); }
@media (max-width: 1279px) { .docs .wrap { grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-7); } .docs-toc { display: none; } }
@media (max-width: 899px) {
  .docs .wrap { display: block; }
  .docs-nav { position: static; max-height: none; padding: 0; margin-bottom: var(--s-7); }
  .docs-menu { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 48px; padding: 0 var(--s-4); margin-bottom: var(--s-4); border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: var(--r-sm); background: transparent; color: var(--ink); font: 500 16px var(--font-text); }
  .docs-nav__groups { display: none; }
  .docs-nav[data-open] .docs-nav__groups { display: block; }
  .docs-nav a.docs-nav__link { min-height: 44px; }
  .doc__body pre { font-size: 12.5px; padding: var(--s-4); padding-top: var(--s-7); }
}

/* ---------- phone: whole rows only ---------- */
@media (max-width: 639px) {
  .ly-piece--main .d-tabs { display: none; }
  .ly-piece--main .d-row:nth-child(n+3) { display: none; }
  .receipt-table { max-height: none; overflow: visible; }
  .receipt-table tbody tr:nth-child(n+4) { display: none; }
  .receipts { overflow: visible; display: block; }
  .receipt-table th:nth-child(2), .receipt-table td:nth-child(2) { display: none; }
  .receipt-table { padding: 0 var(--s-4); }
  .receipt-facts { padding: var(--s-4); }
  .nav__actions .nav__link { display: none; }
  .play__code { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; padding: var(--s-4); }
}
@media (max-width: 379px) { .nav__actions .btn { display: none; } }
@media (max-width: 639px) { #questions .faq__item:nth-child(5), #questions .grid > div:first-child > p { display: none; } }

/* ---------- the SwarmKit mark: six agents trace an S, the winning bid at its centre ---------- */
.nav__logo .logo-mark { width: 24px; height: 24px; flex: none; }
footer .nav__logo .logo-mark { width: 22px; height: 22px; }