/* Command reference (docs/reference/index.html, generated by scripts/build-reference.mjs).
   Builds on ../style.css: same tokens, pixel frames and hard shadows. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[hidden], .empty { display: none !important; }

/* ---------- Header ---------- */
.ref-top {
  background:
    linear-gradient(var(--grid) 2px, transparent 2px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--grid) 2px, transparent 2px) 0 0 / 32px 32px,
    var(--bg-hero);
}
.ref-top::after { content: ""; display: block; height: 24px; background: var(--snake-h) 0 0 / 32px 24px; image-rendering: pixelated; }
.toplinks { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ref-hero { padding-top: 18px; padding-bottom: 30px; }
.ref-hero h1 { font-size: clamp(32px, 4.6vw, 50px); margin-bottom: 14px; }
.ref-hero .lead { max-width: 75ch; margin-bottom: 10px; font-size: clamp(16px, 1.8vw, 18px); }

/* ---------- Search bar ---------- */
.searchbar { position: sticky; top: 0; z-index: 12; background: var(--bg); border-bottom: var(--b) solid var(--frame); }
.sb-inner { display: flex; align-items: center; gap: 12px; padding-top: 8px; padding-bottom: 8px; }
#q {
  flex: 1; min-width: 0; min-height: 44px; padding: 0 14px; font: 16px var(--mono); color: var(--fg); background: var(--surface);
  border: var(--b) solid var(--frame); border-radius: 0; box-shadow: 4px 4px 0 var(--drop); -webkit-appearance: none; appearance: none;
}
#q:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.qn { flex: none; font: 700 13px var(--mono); color: var(--muted); }

/* ---------- Layout: sidebar + content ---------- */
.ref-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 44px; align-items: start; }
@media (min-width: 900px) { .ref-grid { grid-template-columns: 230px minmax(0, 1fr); } }

.side { position: sticky; top: 64px; z-index: 11; margin-top: 28px; }
.side summary { display: none; }
.side .toc { max-height: calc(100vh - 92px); overflow-y: auto; padding: 4px 6px 16px 0; scrollbar-width: thin; }
.side .sg { margin: 14px 0 4px; font: 700 11.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.side .sg:first-child { margin-top: 0; }
.side ul { list-style: none; margin: 0; padding: 0; }
.side a { display: block; padding: 5px 10px; font: 600 14px/1.35 var(--mono); color: var(--muted); text-decoration: none; border-left: var(--b) solid transparent; }
.side a:hover { color: var(--fg); background: var(--accent-soft); border-left-color: var(--accent); }

@media (max-width: 899px) {
  .side { top: 63px; margin: 0 calc(-1 * max(16px, env(safe-area-inset-left, 0px))); background: var(--bg); border-bottom: 2px solid var(--line); }
  .side summary {
    display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 max(16px, env(safe-area-inset-left, 0px));
    font: 700 14.5px var(--mono); cursor: pointer; list-style: none;
  }
  .side summary::-webkit-details-marker { display: none; }
  .side summary::before { content: ""; width: 10px; height: 10px; background: var(--s-green); box-shadow: 0 0 0 2px var(--s-ink); }
  .side summary::after { content: "▾"; margin-left: auto; color: var(--muted); }
  .side[open] summary::after { content: "▴"; }
  .side .toc { max-height: 60vh; padding: 0 max(16px, env(safe-area-inset-left, 0px)) 14px; border-top: 2px solid var(--line); }
  .side .toc ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .side a { border: 2px solid var(--line); background: var(--surface); padding: 6px 10px; min-height: 36px; }
}

/* ---------- Sections ---------- */
main#inhalt { min-width: 0; }
.rs { padding-top: 52px; scroll-margin-top: 66px; }
@media (max-width: 899px) { .rs { scroll-margin-top: 112px; padding-top: 44px; } }
.rs h2 { margin-bottom: 10px; }
.rhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.rhead .chip { margin: 0; }
.pack { font: 700 12px var(--mono); color: var(--plan); background: var(--plan-soft); padding: 3px 8px; box-shadow: inset 0 0 0 2px currentColor; }
.rs .intro { font-size: 16.5px; max-width: 75ch; margin-bottom: 14px; }
.rs h3.part { margin: 34px 0 6px; font-size: 20px; }
.rs h3.part code { font-size: .95em; }
.rs h4 { margin: 26px 0 10px; font: 700 12.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; }
.rs h4::after { content: ""; flex: 1; border-top: var(--b) dotted var(--line); }
.rs h4 code { text-transform: none; letter-spacing: 0; font-size: 1.1em; }
.rs h5.cls { margin: 22px 0 8px; font: 700 15px var(--mono); }
.rs h5.cls code { font-size: 1em; background: var(--s-pale); color: var(--on-accent); box-shadow: inset 0 0 0 2px var(--s-mid); padding: 2px 8px; }
.small { font-size: 14.5px; color: var(--muted); line-height: 1.9; }
code.no { background: var(--no-soft); color: var(--no); }
.gen { margin-top: 64px; padding: 14px 16px; font-size: 14.5px; color: var(--muted); border: var(--b) dashed var(--line); }

/* entries with a description: one row each */
.rlist { border: var(--b) solid var(--frame); background: var(--surface); box-shadow: 6px 6px 0 var(--drop); margin: 0 6px 6px 0; }
.rlist .re { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px 16px; padding: 9px 14px; border-top: 2px solid var(--line); scroll-margin-top: 120px; }
.rlist .re:first-child { border-top: 0; }
@media (min-width: 760px) { .rlist .re { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); align-items: baseline; } .rlist .re .rk, .rlist .re .rv { grid-column: 1; } .rlist .re p { grid-column: 2; grid-row: 1 / span 2; } }
.rlist .sig { background: none; padding: 0; font-size: 14px; font-weight: 700; color: var(--fg); overflow-wrap: anywhere; }
.rlist p { margin: 0; font-size: 15px; color: var(--muted); }
.rk, .rv { font: 600 11.5px var(--mono); color: var(--muted); }
.rk { margin-left: 6px; padding: 0 5px; box-shadow: inset 0 0 0 1.5px var(--line); }
.rv { margin-left: 6px; overflow-wrap: anywhere; }
.rlist .rk, .rlist .rv { margin-left: 0; justify-self: start; }

/* entries without a description: compact chips */
.chips { list-style: none; margin: 0 0 6px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { display: inline-flex; align-items: baseline; flex-wrap: wrap; gap: 0 4px; max-width: 100%; font-size: 13.5px; color: var(--muted); padding: 3px 8px; background: var(--surface); border: 2px solid var(--line); scroll-margin-top: 120px; }
.chips li code { background: none; padding: 0; font-size: 13px; color: var(--fg); }
.members { padding-left: 14px; border-left: 6px solid var(--line); margin: 0 0 10px; }
.members .rlist { box-shadow: 4px 4px 0 var(--drop); }
.members .rlist + .chips { margin-top: 12px; }
.inh { margin: 12px 0 6px; font-size: 13.5px; color: var(--muted); }
.re:target { outline: 3px solid var(--accent); outline-offset: 2px; }

/* example: code, output, plot */
.ex { margin: 6px 8px 18px 0; }
.ex figcaption { display: inline-block; font: 700 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-accent); background: var(--s-light); padding: 5px 10px; }
.ex .codeblock { margin: 0; font-size: 14px; box-shadow: 6px 6px 0 var(--drop); }
.codeblock .n { color: #f6a96b; }
.out-label { margin-top: 12px; font: 700 11.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.out { margin: 4px 0 0; padding: 10px 14px; overflow-x: auto; font: 13.5px/1.55 var(--mono); background: var(--code-bg); border: 2px solid var(--line); }
.out code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.plot { margin-top: 4px; background: #fff; border: var(--b) solid var(--frame); max-width: 660px; }
.plot svg { display: block; width: 100%; height: auto; }
.ex-note { margin: 10px 0 0; font-size: 14.5px; color: var(--muted); }

/* notes */
.notes { margin: 18px 6px 8px 0; padding: 12px 16px 6px; background: var(--surface); border: var(--b) solid var(--frame); border-left-width: 10px; box-shadow: 5px 5px 0 var(--drop); }
.notes h3 { font: 700 12.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin: 0 0 6px; }
.notes ul { margin: 0 0 8px; padding-left: 20px; }
.notes li { font-size: 15px; margin-bottom: 6px; }
.notes + .notes { border-left-color: var(--accent-fill); }

/* tables (language, kara characters, game types) */
.rt { min-width: 0; font-size: 15px; table-layout: fixed; }
.rt td { min-width: 0; }
.rt td:last-child { width: auto; white-space: normal; }
.rt th:first-child { width: 20%; }
.rt.lang th:first-child { width: 15%; }
.rt.lang th:nth-child(2), .rt.lang th:nth-child(3) { width: 42.5%; }
.rt td, .rt td:first-child { width: auto; }
.wc { font-size: 18px !important; font-weight: 800; }
code.img { font-size: 12.5px; }
.snip { margin: 8px 0 0; padding: 8px 10px; overflow-x: auto; font: 12.5px/1.5 var(--mono); background: var(--term-bg); color: var(--term-fg); border: 2px solid var(--s-ink); }
.snip code { background: none; padding: 0; font-size: inherit; overflow-wrap: normal; }
.snip.no { border-color: var(--no); }
.msg { margin: 4px 0 0; font-size: 13px; color: var(--no); }
.errs { margin: 0; padding-left: 20px; font-size: 15px; }
.errs li { margin-bottom: 4px; }
.errs code { margin-right: 6px; }

/* while searching only the hits count */
body.searching .rs .intro, body.searching .ex, body.searching .notes, body.searching .rhead, body.searching .gen { display: none; }
body.searching .rs { padding-top: 28px; }

@media (max-width: 560px) {
  .rt, .rt tbody { display: block; }
  .rt tbody tr { display: block; padding: 12px 14px; }
  .rt td { display: block; width: auto !important; padding: 0; margin-bottom: 6px; }
  .rt td:nth-child(2) { color: var(--fg); }
  .ex .codeblock { font-size: 12.5px; padding: 14px; }
  .rs h5.cls { font-size: 14px; }
}