/* Shared with rokstones.io/static/style.css up to "site: rok-lang.org". */

:root {
  --bg: #fcfbfd;
  --fg: #1e1f26;
  --muted: #5b5e6b;
  --line: #e6e3ec;
  --line-strong: #85838f;
  --panel: #f4f2f7;
  --code-bg: #f5f3f8;
  --accent: #0369a1;
  --accent-soft: #e0f2fe;
  --accent-2: #be185d;
  --accent-2-deep: #9d174d;
  --accent-2-soft: #fce7f3;
  --on-accent: #ffffff;
  --focus: #db2777;
  --glow-1: rgb(244 114 182 / .28);
  --glow-2: rgb(56 189 248 / .24);
  --shadow: 0 1px 2px rgb(30 20 50 / .06), 0 8px 24px rgb(30 20 50 / .08);
  /* Popups: the page in light, a step up in dark. */
  --raised: var(--bg);
  --k: #be185d;
  --t: #0e7490;
  --s: #4d7c0f;
  --n: #b45309;
  --c: #6b6e7a;
  --a: #9d174d;
  --note: #0369a1;
  --important: #be185d;
  --warning: #89621f;
  --caution: #b84036;
  --tip: #24774d;

  --mono: "rok-mono-math", ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "D2Coding", monospace;
  --sans: system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* Type scale: 16px base, ratio 1.25, rounded to the 4px grid. */
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-2xl: 2rem;
  --fs-3xl: 3rem;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;

  --header-h: 61px;
  --measure: 46rem;
  --target: 44px;

  color-scheme: light dark;
}

/* Dark: by the system setting unless the reader picked light, or by the
   reader's pick (search.js sets data-theme on <html>). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15151b;
    --fg: #e6e5ec;
    --muted: #9c9eab;
    --line: #2b2b35;
    --line-strong: #6a6a78;
    --panel: #1c1c24;
    --code-bg: #1e1e27;
    --accent: #7dd3fc;
    --accent-soft: #0c2c40;
    --accent-2: #f9a8d4;
    --accent-2-deep: #fbcfe8;
    --accent-2-soft: #3b1a2e;
    --on-accent: #15151b;
    --focus: #f472b6;
    --glow-1: rgb(244 114 182 / .22);
    --glow-2: rgb(56 189 248 / .18);
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .45);
    --k: #f9a8d4;
    --t: #67e8f9;
    --s: #a3d977;
    --n: #fdba74;
    --c: #8a8c99;
    --a: #f472b6;
    --note: #7dd3fc;
    --important: #f9a8d4;
    --warning: #e0b057;
    --caution: #ef8478;
    --tip: #6fcf97;
    --raised: var(--panel);
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --bg: #15151b;
  --fg: #e6e5ec;
  --muted: #9c9eab;
  --line: #2b2b35;
  --line-strong: #6a6a78;
  --panel: #1c1c24;
  --code-bg: #1e1e27;
  --accent: #7dd3fc;
  --accent-soft: #0c2c40;
  --accent-2: #f9a8d4;
  --accent-2-deep: #fbcfe8;
  --accent-2-soft: #3b1a2e;
  --on-accent: #15151b;
  --focus: #f472b6;
  --glow-1: rgb(244 114 182 / .22);
  --glow-2: rgb(56 189 248 / .18);
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 12px 32px rgb(0 0 0 / .45);
  --k: #f9a8d4;
  --t: #67e8f9;
  --s: #a3d977;
  --n: #fdba74;
  --c: #8a8c99;
  --a: #f472b6;
  --note: #7dd3fc;
  --important: #f9a8d4;
  --warning: #e0b057;
  --caution: #ef8478;
  --tip: #6fcf97;
  --raised: var(--panel);
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ui-monospace (SF Mono) lacks some math glyphs (sqrt, compose, union): take them from a mono font that
   does, so tables in <pre> keep their columns. */
@font-face {
  font-family: "rok-mono-math";
  src: local("Menlo"), local("DejaVu Sans Mono"), local("Cascadia Mono"), local("Consolas");
  unicode-range: U+2190-21FF, U+2200-22FF, U+2300-23FF, U+25A0-25FF;
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + var(--sp-4));
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--fs-base)/1.65 var(--sans);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); text-decoration: underline; }
::selection { background: var(--accent-2-soft); }

/* Links in running text are underlined: in dark mode the link color
   alone is too close to the body text. */
article :is(p, li, td, th, dd, blockquote) a {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
article :is(p, li, td, th, dd, blockquote) a:hover { text-decoration-color: currentColor; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 2px;
}

kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 0.4em;
  border: 1px solid var(--line-strong);
  border-bottom-width: 2px;
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--muted);
  font: 600 var(--fs-xs)/1.6 var(--mono);
  text-align: center;
}

.skip {
  position: absolute;
  left: 50%;
  top: var(--sp-2);
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font-size: var(--fs-sm);
  font-weight: 600;
  transform: translate(-50%, calc(-100% - var(--sp-4)));
}
.skip::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-2), var(--accent));
}
/* Only for keyboard focus: a mouse click never brings it out. The
   shadow comes with it, or it would bleed in at the top of the page. */
.skip:focus-visible { transform: translate(-50%, 0); box-shadow: var(--shadow); }
.skip:hover { text-decoration: none; color: var(--fg); }
@media (prefers-reduced-motion: no-preference) {
  .skip { transition: transform .15s ease-out; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* header */

.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
  padding: var(--sp-3) var(--sp-5);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
}

.brand {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--sp-2);
  color: var(--fg);
  font-weight: 700;
  font-size: var(--fs-md);
}
.brand:hover { text-decoration: none; color: var(--fg); }
.brand img { transition: transform .4s cubic-bezier(.3, 1.6, .5, 1); }
@media (prefers-reduced-motion: no-preference) {
  .brand:hover img { transform: rotate(-20deg) scale(1.06); }
}
/* Centre the lowercase name on its x-height, not its line box. */
.brand span { text-box: trim-both ex alphabetic; }

.main-nav { display: flex; flex-wrap: wrap; gap: 0 var(--sp-1); }
.main-nav a {
  padding: 6px var(--sp-2);
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
  white-space: nowrap;
}
.main-nav a:hover { color: var(--fg); text-decoration: none; }
.main-nav a[aria-current] {
  color: var(--fg);
  font-weight: 600;
  box-shadow: inset 0 -2px var(--accent-2);
  border-radius: 0;
}

.search { position: relative; margin-left: auto; }
.search input {
  width: 240px;
  height: 36px;
  padding: 0 40px 0 var(--sp-3);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font: inherit;
  font-size: var(--fs-base);
}
.search input::placeholder { color: var(--muted); opacity: 1; }
/* No native search widgets (the webkit clear x, decoration) on the pill. */
.search input { appearance: none; -webkit-appearance: none; }
.search input::-webkit-search-cancel-button,
.search input::-webkit-search-decoration { -webkit-appearance: none; display: none; }
.search input:focus-visible { outline-offset: 1px; }
.search kbd { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.search input:is(:focus, :not(:placeholder-shown)) + kbd { display: none; }
@media (pointer: coarse) { .search kbd { display: none; } }
.results {
  position: absolute;
  right: 0;
  top: calc(100% + var(--sp-2));
  width: min(460px, calc(100vw - 32px));
  max-height: 70vh;
  overflow-y: auto;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
}
.results a { display: block; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md); color: var(--fg); line-height: 1.4; }
.results a:hover, .results a[aria-selected="true"] { background: var(--accent-soft); text-decoration: none; color: var(--fg); }
.results code { color: var(--muted); font-size: var(--fs-sm); }
.results small { display: block; margin-top: 2px; color: var(--muted); font-size: var(--fs-sm); }
.results .src {
  float: right;
  margin-left: var(--sp-2);
  padding: 0 var(--sp-2);
  border-radius: 999px;
  background: var(--accent-2-soft);
  color: var(--accent-2);
  font: 600 var(--fs-xs)/1.7 var(--mono);
}
.results mark { padding: 0 1px; border-radius: 3px; background: var(--accent-2-soft); color: var(--accent-2); }
.results .empty { padding: var(--sp-2) var(--sp-3); color: var(--muted); }

.theme {
  flex-shrink: 0;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: none;
  color: var(--muted);
  font: 16px/1 var(--sans);
  cursor: pointer;
}
.theme:hover { color: var(--accent-2); border-color: var(--accent-2); }
.main-nav + .theme { margin-left: auto; }
@media (pointer: coarse) { .theme { width: var(--target); height: var(--target); } }

/* The hamburger: bars drawn in CSS (no font glyph), shown only when the
   nav collapses. The middle bar is the span; the two others are its
   pseudo-elements, which cross into an X when the menu is open. */
.nav-toggle {
  display: none;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--accent-2); border-color: var(--accent-2); }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
  content: "";
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
}
.nav-toggle .bars { position: relative; }
.nav-toggle .bars::before { position: absolute; left: 0; top: -6px; }
.nav-toggle .bars::after { position: absolute; left: 0; top: 6px; }
.top.nav-open .nav-toggle .bars { background: transparent; }
.top.nav-open .nav-toggle .bars::before { top: 0; transform: rotate(45deg); }
.top.nav-open .nav-toggle .bars::after { top: 0; transform: rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after {
    transition: transform 160ms ease, background-color 120ms ease, top 160ms ease;
  }
}

/* article */

article h1, article h2, article h3, article h4 {
  position: relative;
  line-height: 1.25;
  text-wrap: balance;
}
article h1 { font-size: var(--fs-2xl); line-height: 1.2; margin: var(--sp-2) 0 var(--sp-4); letter-spacing: -0.01em; }
article h2 {
  font-size: var(--fs-xl);
  margin: var(--sp-7) 0 var(--sp-4);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(90deg, var(--accent-2), var(--accent)) left bottom / 40px 2px no-repeat;
}
article h3 { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
article h4 { font-size: var(--fs-base); margin: var(--sp-5) 0 var(--sp-2); }
/* A heading's code is part of the heading, not a chip inside it. */
:is(h1, h2, h3, h4) code:not(pre code) { padding: 0; background: none; font-size: 0.92em; }
.anchor { position: absolute; left: -1em; width: 1em; color: var(--muted); opacity: 0; font-weight: 400; }
:is(h1, h2, h3, h4):hover .anchor, .anchor:focus-visible { opacity: 1; text-decoration: none; }

article p, article ul, article ol, article blockquote, article pre, article .table-wrap, article dl, article .code { margin: 0 0 var(--sp-4); }
article p, article li { text-wrap: pretty; }
article ul, article ol { padding-left: 1.5em; }
article li + li { margin-top: var(--sp-1); }
article li > ul, article li > ol { margin: var(--sp-1) 0; }
article li::marker { color: var(--accent-2); }
article img { max-width: 100%; height: auto; }
article hr { border: 0; border-top: 1px solid var(--line); margin: var(--sp-6) 0; }

code, pre { font-family: var(--mono); font-size: 0.875em; }
:not(pre) > code {
  padding: 0.125em 0.375em;
  border-radius: var(--r-sm);
  background: var(--code-bg);
  word-break: normal;
  overflow-wrap: anywhere;
}
/* On a panel the code background matches it: outline the chip instead. */
:is(.callout, .card, th) :not(pre) > code {
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
}
pre {
  padding: var(--sp-4);
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--code-bg);
  line-height: 1.55;
  tab-size: 4;
}
pre code { font-size: 1em; }
.k { color: var(--k); }
.t { color: var(--t); }
.s { color: var(--s); }
.n { color: var(--n); }
.c { color: var(--c); font-style: italic; }
.a { color: var(--a); }

/* A code block with its copy button (search.js wraps it). */
.code { position: relative; }
.code > pre { margin: 0; }
/* try and copy ride in a header strip at the top-right, a fixed gap apart. */
.code-tools {
  position: absolute;
  top: 4px;
  right: var(--sp-2);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
}
.copy {
  padding: 2px var(--sp-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bg);
  color: var(--muted);
  font: 600 var(--fs-xs)/1.6 var(--sans);
  cursor: pointer;
  opacity: 0;
}
.code:hover .copy, .copy:focus-visible, .copy.done { opacity: 1; }
.copy:hover { color: var(--accent-2); border-color: var(--accent-2); }

/* A language'd block is a little macOS window: the border and rounding
   move to the wrapper so the title bar and code read as one pane. */
.code[data-lang] {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--code-bg);
}
.code[data-lang] > pre {
  border: 0;
  border-radius: 0;
  padding-top: var(--sp-4);
}
.code-head {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  height: 36px;
  padding: 0 var(--sp-4);
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
/* The traffic lights, same palette as the terminal windows. */
.code-head .lights { flex: 0 0 auto; display: flex; gap: 6px; margin-right: var(--sp-2); }
.code-head .lights i { width: 11px; height: 11px; border-radius: 50%; background: #f9a8d4; }
.code-head .lights i + i { background: #7dd3fc; }
.code-head .lights i + i + i { background: #3a3a46; }
.code-title { color: var(--muted); font: 600 var(--fs-xs) var(--mono); letter-spacing: 0.02em; }
/* In the bar the tools are a static flex item and always shown. */
.code-head .code-tools { position: static; margin-left: auto; }
.code-head .copy { opacity: 1; }
/* Joined to an output block below: square the shared edge. */
.code[data-lang]:has(+ pre.output) { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.copy.done { color: var(--tip); border-color: var(--tip); }
@media (pointer: coarse) {
  .copy { opacity: 1; min-height: 32px; padding: 0 var(--sp-3); }
  /* The button is always shown here: keep the first line clear of it. */
  .code > pre { padding-top: 48px; }
}
@media (prefers-reduced-motion: no-preference) {
  .copy { transition: opacity 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out; }
}

pre.output {
  position: relative;
  padding-top: 30px;
  background: var(--panel);
  border-style: solid;
}
pre.output::before {
  content: "▸ output";
  position: absolute;
  top: 7px;
  left: var(--sp-4);
  color: var(--accent-2);
  font: 600 var(--fs-xs) var(--mono);
  letter-spacing: 0.02em;
}
article :is(pre, .code):has(+ pre.output) { margin-bottom: 0; }
article pre:has(+ pre.output), article .code:has(+ pre.output) > pre { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
article :is(pre, .code):has(+ pre.output) + pre.output { border-top: 1px dashed var(--line); border-top-left-radius: 0; border-top-right-radius: 0; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
th, td { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); vertical-align: top; }
/* Code in a cell stays whole; the table scrolls instead. */
:is(td, th) > code { overflow-wrap: normal; white-space: nowrap; }
th { background: var(--panel); text-align: left; }

blockquote { margin-left: 0; padding: 0 var(--sp-4); border-left: 3px solid var(--line); color: var(--muted); }

.callout {
  --kind: var(--note);
  --icon: "i";
  margin: 0 0 var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line);
  border-left: 4px solid var(--kind);
  border-radius: var(--r-md);
  background: var(--panel);
}
.callout > :last-child { margin-bottom: 0; }
.callout-title {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin: 0 0 var(--sp-1);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--kind);
}
.callout-title::before {
  content: var(--icon);
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--kind);
  color: var(--bg);
  font: 700 11px/1 var(--mono);
}
.callout.important { --kind: var(--important); --icon: "★"; }
.callout.warning { --kind: var(--warning); --icon: "!"; }
.callout.caution { --kind: var(--caution); --icon: "×"; }
.callout.tip { --kind: var(--tip); --icon: "✓"; }

.footnote { font-size: var(--fs-sm); color: var(--muted); }

footer {
  padding: var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: var(--fs-sm);
  text-align: center;
}
footer p { margin: var(--sp-1) 0; }
footer a { display: inline-block; padding: 2px 0; }
footer .links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-3); margin: 0 0 var(--sp-2); padding: 0; list-style: none; }
/* The dot ends a line rather than starting one. */
footer .links li:not(:last-child)::after { content: "·"; margin-left: var(--sp-3); color: var(--line-strong); }
footer p { text-wrap: balance; }
footer .made { font-family: var(--mono); font-size: var(--fs-xs); }
footer .made::before { content: "// "; color: var(--accent-2); }
footer .by { margin: var(--sp-3) 0 var(--sp-1); }
footer .by a { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .main-nav a, .cta a, .card, .pager a, .side a, .stones a, .results a {
    transition: color 120ms ease-out, background-color 120ms ease-out, border-color 120ms ease-out, transform 160ms ease-out, box-shadow 160ms ease-out;
  }
}

/* 404 */

.lost { padding: var(--sp-7) 0 var(--sp-6); text-align: center; }
.lost img { width: 88px; height: 88px; }
@media (prefers-reduced-motion: no-preference) {
  .lost img { animation: spin 6s linear infinite; }
}
@keyframes spin { to { transform: rotate(360deg); } }
.lost h1 { margin: var(--sp-4) 0 var(--sp-2); font-size: var(--fs-2xl); }
.lost p { margin: 0 auto var(--sp-5); max-width: 32rem; color: var(--muted); }
.lost pre.err { max-width: 34rem; margin: 0 auto var(--sp-5); text-align: left; white-space: pre-wrap; }
.lost .err .e { color: var(--caution); font-weight: 700; }
.lost .err .h { color: var(--tip); font-weight: 700; }
.lost .err .g { color: var(--accent); }

/* print */

@media print {
  .skip, .top, .side, .pager, footer, .copy, .search, .lang-switch, .anchor { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .wrap, main { display: block; max-width: none; padding: 0; }
  a { color: inherit; text-decoration: underline; }
  pre { white-space: pre-wrap; border: 1px solid #ccc; break-inside: avoid; }
  article h2 { background: none; break-after: avoid; }
}

/* site: rok-lang.org */

/* A very tall code block collapses behind a show-all bar (search.js). */
.code.tall.collapsed > pre { max-height: 420px; overflow: hidden; }
.code.tall .expand { border: 0; color: var(--accent-2); font: 600 var(--fs-xs) var(--sans); cursor: pointer; }
.code.tall .expand:hover { color: var(--accent-2-deep); }
.code.tall.collapsed .expand {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 68px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: var(--sp-2);
  background: linear-gradient(transparent, var(--code-bg));
}
.code.tall:not(.collapsed) .expand {
  display: block;
  width: 100%;
  padding: var(--sp-2);
  border-top: 1px solid var(--line);
  background: var(--panel);
}

/* The ? keyboard-shortcuts card. */
.kbd-help { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; padding: var(--sp-4); background: rgb(20 20 30 / .45); }
.kbd-card { width: min(380px, 100%); padding: var(--sp-5); border: 1px solid var(--line-strong); border-radius: var(--r-lg); background: var(--raised); box-shadow: var(--shadow); }
.kbd-card h2 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.kbd-card dl { display: grid; grid-template-columns: auto 1fr; gap: var(--sp-2) var(--sp-4); margin: 0; align-items: center; }
.kbd-card dt { justify-self: start; display: flex; gap: 4px; }
.kbd-card dd { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* A back-to-top button on long docs pages. */
.to-top {
  position: fixed;
  right: var(--sp-5);
  bottom: var(--sp-5);
  z-index: 30;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--raised);
  color: var(--fg);
  font-size: var(--fs-lg);
  cursor: pointer;
  box-shadow: var(--shadow);
}
.to-top[hidden] { display: none; }
.to-top:hover { color: var(--accent-2); border-color: var(--accent-2); }
@media (prefers-reduced-motion: no-preference) { .to-top { transition: color 120ms, border-color 120ms; } }
@media print { .to-top { display: none; } }

.wrap {
  display: grid;
  grid-template-columns: 264px minmax(0, var(--measure));
  justify-content: center;
  gap: var(--sp-7);
  padding: 0 var(--sp-5);
}
.wide .wrap, .home .wrap { grid-template-columns: minmax(0, var(--measure)); }

.side {
  position: sticky;
  top: var(--header-h);
  align-self: start;
  max-height: calc(100vh - var(--header-h));
  overflow-y: auto;
  padding: var(--sp-5) var(--sp-1) var(--sp-5) 0;
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.side summary { display: none; }
.side .up { display: block; margin: 0 0 var(--sp-3); padding: var(--sp-1) var(--sp-2); color: var(--muted); }
.side-title { margin: 0 0 var(--sp-2); font-weight: 700; }
.side-title a { display: block; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--fg); }
.side ul { list-style: none; margin: 0; padding: 0; }
.side .pages > li { margin: 2px 0; }
.side .pages a { display: block; padding: var(--sp-1) var(--sp-2); border-radius: var(--r-sm); color: var(--muted); }
.side a:hover { background: var(--panel); color: var(--fg); text-decoration: none; }
.side .cur > a, .side a.cur { color: var(--fg); background: var(--accent-soft); font-weight: 600; }
.side .toc { margin: var(--sp-1) 0 var(--sp-2) var(--sp-3); border-left: 1px solid var(--line); }
.side .toc a { margin-left: -1px; padding: 3px var(--sp-3); border-left: 2px solid transparent; border-radius: 0; color: var(--muted); background: none; font-weight: 400; }
/* The section in view (search.js). */
.side .toc a[aria-current] { border-left-color: var(--accent-2); color: var(--fg); font-weight: 600; }

main { min-width: 0; padding: var(--sp-6) 0 var(--sp-8); }
main:focus { outline: none; }

article .lang-switch { float: right; margin: var(--sp-2) 0 var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
article .lang-switch :is(a, [aria-current]) { display: inline-block; padding: 2px 6px; border-radius: var(--r-sm); }
article .lang-switch [aria-current] { color: var(--fg); font-weight: 600; background: var(--panel); }

/* docs: the brand's tag, the version menu and the banner (search.js) */

.brand .docs-tag { text-box: normal; margin-left: 2px; padding: 0 6px; border-radius: 999px; background: var(--accent-2-soft); color: var(--accent-2); font: 600 var(--fs-xs)/1.7 var(--mono); }
.vers { position: relative; flex-shrink: 0; margin-left: calc(-1 * var(--sp-3)); }
.vers summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--sp-2);
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  color: var(--muted);
  font: 600 var(--fs-xs)/1.6 var(--mono);
  list-style: none;
  cursor: pointer;
}
.vers summary::-webkit-details-marker { display: none; }
/* A masked chevron, not a font glyph, so it stays crisp and aligned. */
.vers summary::after {
  content: "";
  width: 9px;
  height: 9px;
  background: var(--accent-2);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
}
.vers summary:hover { color: var(--fg); border-color: var(--accent-2); }
/* A finger-sized hit area around the small pill. */
.vers summary { position: relative; }
.vers summary::before { content: ""; position: absolute; inset: -10px -6px; }
.vers-menu {
  position: absolute;
  left: 0;
  top: calc(100% + var(--sp-2));
  z-index: 11;
  min-width: 180px;
  margin: 0;
  padding: var(--sp-1);
  list-style: none;
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
}
.vers-menu:empty { display: none; }
.vers-menu a { display: flex; justify-content: space-between; gap: var(--sp-3); padding: 6px var(--sp-3); border-radius: var(--r-sm); color: var(--fg); font: 500 var(--fs-sm)/1.5 var(--mono); }
.vers-menu a:hover { background: var(--accent-soft); text-decoration: none; color: var(--fg); }
.vers-menu a[aria-current] { color: var(--accent-2); font-weight: 700; }
.vers-menu small { color: var(--muted); font: 500 var(--fs-xs) var(--sans); }
.ver-banner {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: var(--accent-2-soft);
  color: var(--fg);
  font-size: var(--fs-sm);
  text-align: center;
}
.ver-banner::before { content: "⚠"; color: var(--accent-2); }
.ver-banner a { font-weight: 600; color: var(--accent-2); }

/* API pages: one framed block per item, its members as rows. */

.api-item { margin: 0 0 var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.api-item h3 { margin: 0; padding: var(--sp-2) var(--sp-4); font-family: var(--mono); font-size: var(--fs-base); background: var(--panel); border-bottom: 1px solid var(--line); }
.api-item h3 a { display: inline-block; padding: 3px 0; color: var(--fg); }
.api-item h3 a:hover { color: var(--accent-2); }
.api-item pre { border: 0; border-radius: 0; background: none; }
.api-item pre.sig { margin: 0; padding: var(--sp-3) var(--sp-4); }
.api-item > p { margin: 0 var(--sp-4) var(--sp-3); }
.api-item .members { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.api-item .members > li { margin: 0; padding: var(--sp-2) var(--sp-4); }
.api-item .members > li + li { border-top: 1px solid var(--line); }
.api-item .members > li:target { background: var(--accent-2-soft); }
.api-item .members pre { margin: 0; padding: 0; }
.api-item .members p { margin: var(--sp-1) 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--muted); }
.api-item .impls { margin: 0; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-sm); color: var(--muted); }
.api-item .impls summary { cursor: pointer; padding: 2px 0; }
.api-item .impls ul { list-style: none; margin: var(--sp-2) 0 0; padding-left: var(--sp-4); }
.api-item .api-more { margin: 0; padding: var(--sp-2) var(--sp-4); border-top: 1px solid var(--line); font: 600 var(--fs-sm) var(--mono); }
.api-item .api-more a { color: var(--accent-2); }
article .api-list { list-style: none; padding-left: 0; }
.api-list li { margin: var(--sp-1) 0; }
article .api-list li a { text-decoration: none; }
.api-list span { color: var(--muted); font-size: var(--fs-sm); }

.pager { display: flex; gap: var(--sp-4); margin-top: var(--sp-7); }
.pager a { flex: 1; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); color: var(--fg); line-height: 1.4; }
.pager a:hover { border-color: var(--accent-2); text-decoration: none; color: var(--fg); }
.pager small { display: block; margin-bottom: 2px; color: var(--muted); font: 600 var(--fs-xs)/1.6 var(--mono); }
.pager .prev small::before { content: "← "; color: var(--accent-2); }
.pager .next small::after { content: " →"; color: var(--accent-2); }
.pager .next { text-align: right; margin-left: auto; }

/* landing */

.hero { padding: var(--sp-7) 0 var(--sp-5); text-align: center; }
.hero img {
  width: 104px;
  height: 104px;
  filter: drop-shadow(-14px -6px 22px var(--glow-1)) drop-shadow(14px 8px 22px var(--glow-2));
}
@media (prefers-reduced-motion: no-preference) {
  .hero img { transition: transform .6s cubic-bezier(.3, 1.6, .5, 1); }
  .hero img:hover { transform: rotate(-30deg); }
}
.hero h1 { font-size: var(--fs-3xl); line-height: 1.1; margin: var(--sp-3) 0 var(--sp-3); letter-spacing: -0.02em; }
.hero .lead { margin: 0 auto var(--sp-2); max-width: 42rem; font-size: var(--fs-lg); line-height: 1.5; color: var(--muted); text-wrap: balance; }
.home article h1 .anchor { display: none; }
.cta { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin: var(--sp-5) 0; }
.cta a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding: 0 var(--sp-5);
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--fg);
  font-weight: 600;
  white-space: nowrap;
}
.cta a:hover { border-color: var(--accent-2); text-decoration: none; color: var(--fg); transform: translateY(-1px); }
.cta a.primary { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
.cta a.primary::after { content: "→"; margin-left: var(--sp-2); }
.cta a.primary:hover { background: var(--accent-2-deep); border-color: var(--accent-2-deep); color: var(--on-accent); }

/* The install line: a tiny terminal. */
.install { max-width: 34rem; margin: 0 auto; text-align: left; }
.lead + .install { margin-top: var(--sp-5); }
.install .code > pre, .install > pre { padding: var(--sp-3) 72px var(--sp-3) var(--sp-4); border-radius: 999px; white-space: pre; }
.install .code-tools { top: 50%; right: var(--sp-3); transform: translateY(-50%); }
.install .copy { opacity: 1; }
.install code::before { content: "$ "; color: var(--accent-2); font-weight: 700; user-select: none; }
.install p { margin: var(--sp-2) 0 0; text-align: center; color: var(--muted); font-size: var(--fs-sm); }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin: var(--sp-5) 0; }
.card { padding: var(--sp-1) var(--sp-5) var(--sp-1); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.card h3 { margin-top: var(--sp-4); }
a.card { display: block; padding: var(--sp-4) var(--sp-5); color: var(--fg); }
a.card:hover { border-color: var(--accent-2); text-decoration: none; color: var(--fg); transform: translateY(-2px); box-shadow: 0 10px 24px -12px var(--glow-1); }
a.card h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-md); color: var(--accent); }
a.card h3::after { content: " →"; color: var(--accent-2); opacity: 0; }
a.card:hover h3::after { opacity: 1; }
a.card p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.cards .tag { display: block; margin: 0 0 var(--sp-1); color: var(--accent-2); font: 600 var(--fs-xs)/1.6 var(--mono); }
article ol.chapters { list-style: none; padding-left: 0; }
ol.chapters li { margin: 0 0 var(--sp-4); padding-left: var(--sp-4); border-left: 2px solid var(--line); }
ol.chapters li:hover { border-left-color: var(--accent-2); }
article ol.chapters li > a { font-weight: 600; font-size: var(--fs-md); text-decoration: none; }
ol.chapters p { margin: 2px 0 0; color: var(--muted); }

/* The home page's terminal: lines come in one by one, commands typed. */

.term { max-width: 34rem; margin: var(--sp-6) auto 0; border-radius: var(--r-lg); background: #1c1c24; color: #e6e5ec; text-align: left; box-shadow: 0 24px 50px -24px rgb(3 105 161 / .45); transform: rotate(-1.5deg); }
.term-bar { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 var(--sp-4); border-bottom: 1px solid #2b2b35; }
.term-bar i { width: 11px; height: 11px; border-radius: 50%; background: #f9a8d4; }
.term-bar i + i { background: #7dd3fc; }
.term-bar i + i + i { background: #3a3a46; }
.term-bar span { margin-left: auto; color: #9c9eab; font: 600 var(--fs-xs) var(--mono); }
.term-again { margin-left: var(--sp-3); padding: 0 var(--sp-2); border: 1px solid #3a3a46; border-radius: 999px; background: none; color: #9c9eab; font: 600 var(--fs-xs)/1.7 var(--sans); cursor: pointer; }
.term-again:hover { color: #f9a8d4; border-color: #f9a8d4; }
.term pre { margin: 0; padding: var(--sp-4); border: 0; background: none; color: inherit; font-size: 0.8125rem; line-height: 1.7; white-space: normal; }
/* One block per line; the newlines between them in the source are not lines. */
.term .l { display: block; min-height: 1.7em; white-space: pre-wrap; }
.term b { color: #f472b6; }
.term em { font-style: normal; color: #6fcf97; font-weight: 600; }
.term .out { color: #fbcfe8; font-weight: 600; }
.term .cursor { display: inline-block; width: .6em; height: 1.1em; vertical-align: -.2em; border-radius: 2px; background: #f472b6; }
.term .type { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; }
@media (prefers-reduced-motion: no-preference) {
  .term.play .l { opacity: 0; animation: term-in 1ms linear forwards; animation-delay: var(--d); }
  .term.play .type { width: 0; animation: term-type 0.8s steps(var(--n)) forwards; animation-delay: calc(var(--d) + 0.1s); }
  .term .cursor { animation: blink 1s steps(1) infinite; }
}
@keyframes term-in { to { opacity: 1; } }
@keyframes term-type { to { width: calc(var(--n) * 1ch); } }
@keyframes blink { 50% { opacity: 0; } }

/* The download page: one card per platform. */

.lead-sm { margin: 0 0 var(--sp-4); font-size: var(--fs-md); color: var(--muted); }
.dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin: 0 0 var(--sp-5); }
.dl-os { position: relative; padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.dl-os h3 { margin: 0; font-size: var(--fs-md); }
.dl-os p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.dl-os > code { display: inline-block; margin: var(--sp-2) 0 var(--sp-3); font-size: var(--fs-xs); }
/* The platform's mark in the card's colour (static/os/, Font Awesome Free). */
.dl-glyph { position: absolute; top: var(--sp-4); right: var(--sp-4); width: 26px; height: 26px; background: var(--fg); -webkit-mask: var(--os) center / contain no-repeat; mask: var(--os) center / contain no-repeat; }
.os-apple { --os: url(os/apple.svg); }
.os-linux { --os: url(os/linux.svg); }
.os-windows { --os: url(os/windows.svg); }
.dl-os:hover .dl-glyph { background: var(--accent-2); }
.credit { margin-top: var(--sp-6); color: var(--muted); font-size: var(--fs-xs); }
.dl-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
article .dl-links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--sp-3); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--fg); font: 600 var(--fs-sm) var(--mono); text-decoration: none; }
article .dl-links a:hover { border-color: var(--accent-2); color: var(--accent-2); }
article .dl-links a.primary { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent); }
article .dl-links a.primary:hover { background: var(--accent-2-deep); border-color: var(--accent-2-deep); color: var(--on-accent); }
.dl-os .dl-sum { margin-top: var(--sp-2); font: 600 var(--fs-xs) var(--mono); }
article .dl-sum a { color: var(--muted); }

/* Feature tiles under the hero. */

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-3); margin: var(--sp-7) 0 0; }
.tile { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--panel); }
.tile .glyph { display: inline-block; margin-bottom: var(--sp-2); padding: 2px var(--sp-2); border-radius: var(--r-sm); background: var(--accent-2-soft); box-shadow: none; color: var(--accent-2); font-weight: 700; }
.tile h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); }
.tile p { margin: 0; color: var(--muted); font-size: var(--fs-sm); }

/* Docs: reading progress, code labels, the edit link, the copied toast. */

.progress { position: fixed; left: 0; top: 0; z-index: 30; height: 3px; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--read, 0)); background: linear-gradient(90deg, var(--accent-2), var(--accent)); pointer-events: none; }
article .edit { margin: var(--sp-7) 0 0; font: 600 var(--fs-sm) var(--sans); }
article .edit a { color: var(--muted); text-decoration: none; }
article .edit a::before { content: "✎ "; color: var(--accent-2); }
article .edit a:hover { color: var(--accent-2); }
.toast { position: fixed; left: 50%; bottom: var(--sp-6); z-index: 40; padding: var(--sp-2) var(--sp-4); border-radius: 999px; background: var(--fg); color: var(--bg); font: 600 var(--fs-sm) var(--mono); transform: translateX(-50%); box-shadow: var(--shadow); }
/* small screens */

/* The header folds into the hamburger exactly when the full nav would no
   longer fit on one row. search.js measures that (forcing the row not to
   wrap or shrink) and toggles .nav-compact, so the same rule serves any
   number of links on any page -- no per-page width breakpoint. */
.top.nav-measuring { flex-wrap: nowrap; }
.top.nav-measuring > * { flex-shrink: 0; }
.top.nav-measuring .main-nav { flex-wrap: nowrap; flex-shrink: 0; }

.top.nav-compact { position: relative; flex-wrap: wrap; gap: 0 var(--sp-3); padding: var(--sp-2) var(--sp-4); }
.nav-compact .brand { min-height: var(--target); }
.nav-compact .vers { margin-left: 0; }
.nav-compact .vers summary { min-height: 36px; }
.nav-compact .vers-menu { min-width: 160px; }
.nav-compact .nav-toggle { display: inline-grid; order: 0; margin-left: auto; }
.nav-compact .theme { order: 0; margin-left: var(--sp-2); }
.nav-compact .search { order: 1; flex: 0 0 100%; min-width: 0; margin: var(--sp-2) 0 0; position: relative; z-index: 2; }
.nav-compact .search input { width: 100%; height: 40px; }
.nav-compact .main-nav {
  order: 3;
  position: absolute;
  top: calc(100% + var(--sp-1));
  right: var(--sp-4);
  min-width: 220px;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2);
  background: var(--raised);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  z-index: 30;
  display: none;
}
.top.nav-compact.nav-open .main-nav { display: flex; }
.nav-compact .main-nav a { display: flex; align-items: center; min-height: var(--target); padding: 0 var(--sp-3); border-radius: var(--r-sm); white-space: nowrap; }
.nav-compact .main-nav a:hover, .nav-compact .main-nav a:focus-visible { color: var(--accent-2); background: var(--panel); }
.nav-compact .results { position: fixed; left: var(--sp-4); right: var(--sp-4); top: 60px; width: auto; }
.nav-compact .results a { min-height: var(--target); }
@media (max-width: 860px) {
  html { scroll-padding-top: var(--sp-4); }
  /* On a phone, trim the version pill to just the channel name. */
  .vers-full { display: none; }
  .wrap { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 0 var(--sp-4); }
  .wide .wrap, .home .wrap { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; max-height: none; padding: var(--sp-4) 0 0; font-size: var(--fs-base); }
  .side details { border: 1px solid var(--line); border-radius: var(--r-md); padding: 0 var(--sp-3); }
  .side summary { display: list-item; cursor: pointer; font-weight: 600; padding: 10px 0; }
  .side details[open] { padding-bottom: var(--sp-2); }
  .side .pages a, .side-title a, .side .up, .side .toc a { padding-top: 10px; padding-bottom: 10px; }
  main { padding: var(--sp-5) 0 var(--sp-7); }
  .anchor { display: none; }
  article h1 { font-size: 1.75rem; }
  article .lang-switch :is(a, [aria-current]) { padding: var(--sp-2) 10px; }
  .hero { padding-top: var(--sp-6); }
  .hero h1 { font-size: 2.5rem; }
  .install { font-size: 0.8125rem; }
  .install .code > pre { border-radius: var(--r-lg); white-space: pre-wrap; overflow-wrap: normal; }
  .pager { flex-direction: column; }
  .pager a { min-height: var(--target); }
  .pager .next { margin-left: 0; }
  .term { transform: none; }
  .dl { grid-template-columns: minmax(0, 1fr); }
  /* Tiles: the glyph beside its text, to keep the column short. */
  .tile { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; padding: var(--sp-3) var(--sp-4); }
  .tile .glyph { grid-row: span 2; justify-self: start; margin: 2px 0 0; }
  /* Signatures wrap, continuation lines indented. */
  .api-item pre { white-space: pre-wrap; padding-left: calc(var(--sp-4) + 2ch); text-indent: -2ch; }
  .api-item .members pre { padding-left: 2ch; }
}