/* nightcoop.net — the SDK's pages (sdk.html and the sdk-*.html sdkdocs.py writes), on top of site.css.
   Code takes the site's colours: the game's yellow for keywords, a softer cyan than the links for strings, green for
   numbers, the red for the preprocessor and annotations, the faint grey for comments. */

/* the pages are English: a visitor in another language reads one line saying so */
html:lang(en) .sdk-lang-note { display: none; }
.sdk-lang-note { margin: 0; color: var(--faint); }
/* a file name is one long word: on a phone it breaks rather than widening the page */
.sdk-hero > * { min-width: 0; }
.sdk-hero h1 { overflow-wrap: anywhere; }
.sdk-src-hero h1 { font-size: clamp(1.8rem, 4.2vw, 4.4rem); }
.sdk-hero .eyebrow a { color: inherit; text-decoration: none; }
.sdk-hero .eyebrow a:hover { color: var(--text); }
.sdk-hero .lede a { color: var(--p2); }
.sdk-hero .lede .path { font-size: .8em; }
.sdk-facts { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.sdk-facts b { color: var(--text); font-weight: 500; }
.sdk-facts code { font-size: .74rem; }

/* ---------- the aside: every page of the SDK, then the parts of this one ---------- */
.sdk-toc nav { display: grid; gap: .6rem; }
.sdk-toc .eyebrow { margin: 0; }
.sdk-toc ol + .eyebrow { margin-top: .9rem; }
.sdk-toc a[aria-current="page"] { color: var(--text); border-color: var(--p2); background: var(--panel); }
@media (min-width: 64em) {
  /* a long page has many parts: the list scrolls on its own and stays under the header */
  .sdk-toc nav { max-height: calc(100vh - var(--top-h) - 3rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--line-hi) transparent; padding-right: .4rem; }
  .sdk-toc a { padding-block: .32rem; font-size: .88rem; }
  .sdk-toc a[aria-current="page"] { background: none; border-left-color: var(--p2); }
}

/* ---------- the text of a guide ---------- */
.sdk-doc { max-width: 58rem; }
.sdk-doc article.intro { padding-top: 0; }
.sdk-doc h2 code, .sdk-doc h3 code, .sdk-doc h4 code { font-size: .78em; }
.sdk-doc h4 { margin: 1.8rem 0 .55rem; font: 600 .82rem/1.3 var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--text); }
.sdk-doc h5, .sdk-doc h6 { margin: 1.4rem 0 .5rem; font: 600 .95rem/1.3 var(--body); color: var(--text); }
.sdk-doc li > ul, .sdk-doc li > ol { margin: .45rem 0 0; }
.sdk-doc li > p { margin: 0 0 .45rem; }
.sdk-doc blockquote { margin: 0 0 1.2rem; padding: .9rem 1.1rem; background: var(--panel); border-left: 2px solid var(--p2); }
.sdk-doc blockquote p { color: var(--text); }
.sdk-doc blockquote p:last-child { margin: 0; }
.sdk-doc hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line); }
.sdk-doc .tbl table { min-width: 40rem; }
/* a name in a table breaks only at its spaces: «registerMod(&info)» stays whole and the column takes its width */
.sdk-doc .tbl code { font-size: .8rem; overflow-wrap: normal; }
.sdk-doc a { overflow-wrap: anywhere; }
.sdk-doc a code { color: var(--p2); }
.sdk-doc a[target="_blank"]::after { content: " ↗"; color: var(--faint); }
.sdk-pager { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1px; margin-top: 1.5rem; background: var(--line); border: 1px solid var(--line); }
.sdk-pager a { display: grid; gap: .3rem; align-content: start; padding: 1rem 1.2rem; background: var(--ground); color: var(--text); text-decoration: none; font: 600 1.05rem/1.3 var(--body); }
.sdk-pager a span { font: 600 .7rem var(--hud); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); }
.sdk-pager a[rel="next"] { text-align: end; }
.sdk-pager a[rel="next"] span::after { content: " →"; color: var(--p1); }
.sdk-pager a[rel="prev"] span::before { content: "← "; color: var(--p1); }
.sdk-pager a:hover { background: var(--panel); }
.sdk-from { margin: 1.2rem 0 0; }
.sdk-from a { color: var(--p2); }

/* ---------- code ---------- */
pre.hl { tab-size: 4; }
.hl .k, .hl .kd, .hl .kn, .hl .kr, .hl .kp, .hl .kc, .hl .ow { color: var(--p1); }
.hl .kt, .hl .nc, .hl .nn, .hl .nb, .hl .bp { color: #f4e9a6; }
.hl .s, .hl .s1, .hl .s2, .hl .sa, .hl .sb, .hl .sc, .hl .sd, .hl .se, .hl .sh, .hl .si, .hl .sx, .hl .sr, .hl .ss, .hl .dl { color: #8af2f7; }
.hl .m, .hl .mi, .hl .mf, .hl .mh, .hl .mo, .hl .mb, .hl .il { color: var(--ok); }
.hl .c, .hl .c1, .hl .cm, .hl .cs, .hl .ch { color: var(--faint); font-style: italic; }
.hl .cp, .hl .cpf, .hl .nd, .hl .na { color: #ff7d93; font-style: normal; }
.hl .nf, .hl .fm { color: var(--text); font-weight: 500; }
.hl .nv, .hl .vg, .hl .vi { color: #c6f7ff; }
.hl .o, .hl .p { color: var(--dim); }
.hl .err { color: inherit; border: 0; background: none; }

/* a file with numbered lines: the numbers are drawn by the CSS, so selecting and copying takes the code alone */
pre.src { counter-reset: ln; padding-left: 0; }
pre.src .l { display: inline-block; min-width: 100%; counter-increment: ln; }
pre.src .l:target { background: color-mix(in srgb, var(--p1) 16%, transparent); }
pre.src .ln { display: inline-block; width: 3.4em; margin-right: 1.1em; padding-right: .8em; border-right: 1px solid var(--line); text-align: right; color: var(--line-hi); text-decoration: none; -webkit-user-select: none; user-select: none; }
pre.src .ln::before { content: counter(ln); }
pre.src .ln:hover, pre.src .l:target .ln { color: var(--p1); }
.sdk-src-wrap { padding-bottom: 4rem; }
.sdk-src-wrap pre { margin: 0; font-size: .82rem; }
.sdk-file { margin: 0 0 1.8rem; }
.sdk-file figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: .6rem .9rem; background: var(--panel); border: 1px solid var(--line); border-bottom: 0; }
.sdk-file figcaption .path { margin-right: auto; }
.sdk-file figcaption .dl, .sdk-code a, .sdk-files td:last-child a { color: var(--p2); font: 600 .74rem var(--hud); letter-spacing: .12em; text-transform: uppercase; }
.sdk-file pre { margin: 0; max-height: min(75vh, 46rem); overflow: auto; font-size: .82rem; }
.sdk-code { list-style: none; padding: 0 !important; }
.sdk-code li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .7rem; }
.sdk-code li > a:first-child { font: inherit; letter-spacing: normal; text-transform: none; }
.sdk-code li .fine { flex-basis: 100%; min-width: 0; overflow-wrap: anywhere; }
.sdk-notes { margin: 0 0 1.2rem; border: 1px solid var(--line); background: var(--panel); }
.sdk-notes summary { cursor: pointer; padding: .75rem 1rem; font: 600 .78rem var(--hud); letter-spacing: .12em; text-transform: uppercase; color: var(--p2); }
.sdk-notes summary code { text-transform: none; letter-spacing: normal; }
.sdk-notes > :not(summary) { margin-inline: 1rem; }
.sdk-notes pre { white-space: pre-wrap; }

/* ---------- sdk.html ---------- */
.sdk-head { margin-bottom: 2rem; }
.sdk-guides { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.sdk-guides a { position: relative; display: grid; gap: .45rem; align-content: start; height: 100%; padding: 1.2rem 1.25rem 1.35rem; background: var(--ground); color: var(--dim); text-decoration: none; font-size: .94rem; transition: background-color .2s; }
.sdk-guides a::before { content: ""; position: absolute; top: -1px; left: -1px; width: 1.4rem; height: 2px; background: var(--p2); }
.sdk-guides a:hover { background: var(--panel); }
.sdk-guides b { color: var(--text); font: 600 1.1rem/1.3 var(--body); }
.sdk-guides .eyebrow { --c: var(--p2); font-size: .7rem; }
.sdk-code-grid { display: grid; gap: 1.4rem; }
/* one card in its row (the one port): the whole row, not one track of three with empty ones beside it */
.sdk-code-grid .cards.single { grid-template-columns: 1fr; }
#start .steps a, .facts dd a { color: var(--p2); }
.sdk-files table { min-width: 44rem; }
.sdk-files td.num { white-space: nowrap; font: 400 .8rem var(--mono); }
.sdk-files td:first-child .path { font-size: .8rem; }
.sdk-files a.path { color: var(--p2); }