/*
  Shared across every page of the site. One stylesheet, no build step, no dependencies —
  the pages are hand-written HTML that link it.
*/

:root {
  --bg: #141519;
  --panel: #191b20;
  --panel-2: #1b1d23;
  --line: #2c2f37;
  --text: #e8eaef;
  --dim: #aeb5c0;
  --faint: #8b93a0;
  --accent: #8fb7ff;
  --blue: #5784f7;
  --amber: #e0a33f;
  --green: #6fca8f;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(circle, rgba(143,183,255,0.05) 1px, transparent 1.4px);
  background-size: 24px 24px;
}
h1, h2, h3, h4 { font-family: "Space Grotesk", "Helvetica Neue", Arial, sans-serif; letter-spacing: -0.015em; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid rgba(143,183,255,0.3); }
a:hover { color: #b3cdff; border-bottom-color: currentColor; }
code, pre, .mono { font-family: "JetBrains Mono", Menlo, monospace; }
ul { list-style: none; }
b { color: var(--text); font-weight: 600; }

.wrap { max-width: 872px; margin: 0 auto; padding: 0 44px; }
.wrap.wide { max-width: 1040px; }

header { border-bottom: 1px solid var(--line); background: rgba(20,21,25,0.9); position: sticky; top: 0; backdrop-filter: blur(8px); z-index: 10; }
header .wrap { display: flex; align-items: center; gap: 16px; height: 56px; }
header .home { color: var(--text); border: 0; font-family: "Space Grotesk", sans-serif; font-weight: 600; font-size: 15px; white-space: nowrap; }
header .home span { color: var(--accent); }
header nav { display: flex; gap: 18px; font-size: 14px; margin-left: auto; }
header nav a { color: var(--dim); border: 0; }
header nav a:hover { color: var(--accent); }
header nav a.on { color: var(--accent); }

.hero { position: relative; overflow: hidden; padding: 64px 0 44px; border-bottom: 1px solid var(--line); }
.hero.small { padding: 44px 0 34px; }
.hero::before { content: ""; position: absolute; width: 620px; height: 620px; right: -220px; top: -340px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(87,132,247,0.26), rgba(87,132,247,0)); pointer-events: none; }
.hero .wrap { position: relative; }
.label { font-family: "JetBrains Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
h1 { font-size: 40px; line-height: 1.12; font-weight: 700; color: #fff; margin: 12px 0 16px; }
.hero.small h1 { font-size: 32px; }
h1 span { color: var(--accent); }
.lede { font-size: 18px; color: var(--dim); max-width: 660px; }

/* The header is sticky, so an anchor jump has to stop short of it or the heading lands
   underneath. Sections carry the ids, so the margin belongs on them as well as on headings. */
section { padding: 48px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 60px; }
section:last-of-type { border-bottom: 0; }
h2 { font-size: 25px; font-weight: 600; color: #fff; margin-bottom: 8px; scroll-margin-top: 72px; }
h2 + .sub { color: var(--faint); margin-bottom: 26px; }
h3 { font-size: 17px; font-weight: 600; color: #fff; margin-bottom: 4px; scroll-margin-top: 72px; }
h4 { font-size: 15px; font-weight: 600; color: #fff; margin-bottom: 3px; }
/* Flow spacing. `.snippet` has to be named alongside `pre` in every one of these, because
   site.js wraps each pre in one at runtime — so a rule written only against `pre` stops
   matching the moment the page finishes loading, and the block loses its margin entirely. */
:is(p, ul, ol, table) + :is(p, ul, ol, table) { margin-top: 14px; }
/* A code block gets much more air than prose does: it is a change of register, it is boxed,
   and the copy button sits in its top-right corner. Prose spacing around one reads as
   cramped even when the number looks reasonable next to the 14px above. */
:is(p, ul, ol, table, pre, .snippet) + :is(pre, .snippet) { margin-top: 30px; }
:is(pre, .snippet) + :is(p, ul, ol, table) { margin-top: 30px; }
/* The wrapper owns the spacing once it exists, or the inner pre would add its own on top. */
.snippet > pre { margin-top: 0; }
.muted { color: var(--dim); }
.faint { color: var(--faint); }

pre {
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px;
  padding: 13px 52px 13px 15px; overflow-x: auto; font-size: 13.5px; line-height: 1.65; color: #d7dce4;
}
pre .c { color: var(--faint); }
/* pre scrolls horizontally, so the button cannot live inside it — it would scroll away
   with the content. The wrapper is added at runtime, around every pre on the page. */
.snippet { position: relative; }
.copy {
  position: absolute; top: 7px; right: 7px; width: 30px; height: 30px;
  display: grid; place-items: center; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 7px; color: var(--faint);
  opacity: 0; transition: opacity 0.12s, color 0.12s, border-color 0.12s;
}
.snippet:hover .copy, .copy:focus-visible { opacity: 1; }
.copy:hover { color: var(--accent); border-color: rgba(143,183,255,0.4); }
.copy.done { color: var(--green); border-color: rgba(111,202,143,0.45); opacity: 1; }
.copy svg { width: 15px; height: 15px; }

ul.list li { padding-left: 18px; position: relative; color: var(--dim); margin-top: 7px; }
ul.list li::before { content: ""; position: absolute; left: 3px; top: 11px; width: 5px; height: 5px; border-radius: 50%; background: var(--line); }
ol.list { padding-left: 20px; }
ol.list li { color: var(--dim); margin-top: 9px; }
ol.list li::marker { color: var(--accent); font-family: "JetBrains Mono", Menlo, monospace; font-size: 13px; }
p code, li code, td code, dd code { background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; font-size: 13px; color: #cfd6e2; }
/* A hyphen is a line-break opportunity, so `--help` split into "--" and "help" on two lines
   with a box drawn round each half. Only `nowrap` suppresses that — overflow-wrap and
   word-break do not reach it. Every inline code on the site fits a 390px column except one,
   which asks to break with `class="brk"`. */
:is(p, li, td, dd) code { white-space: nowrap; }
:is(p, li, td, dd) code.brk { white-space: normal; }

.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
.cards.three { grid-template-columns: 1fr 1fr 1fr; }
.card { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: 16px 18px; }
.card .label { margin-bottom: 8px; }
.card h3 { margin-bottom: 6px; }
.card p { font-size: 14.5px; color: var(--dim); }
a.card { border-bottom: 1px solid var(--line); display: block; }
a.card:hover { border-color: rgba(143,183,255,0.4); }
a.card h3 { color: #fff; }

.step { display: grid; grid-template-columns: 34px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--line); }
.step:first-of-type { border-top: 0; padding-top: 4px; }
.step > i {
  font-style: normal; font-family: "JetBrains Mono", Menlo, monospace; font-size: 12px; font-weight: 500;
  color: var(--accent); background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px;
  height: 30px; display: grid; place-items: center;
}
/* A grid track's item is min-width:auto by default, so a wide <pre> widens the track
   past the page instead of scrolling inside its own box. */
.step > div { min-width: 0; }
.step p { font-size: 15px; color: var(--dim); margin-top: 4px; }
/* Tighter inside a numbered step, where the snippet is part of the instruction rather than
   a break from it — and again, both names, for before and after site.js runs. */
.step :is(pre, .snippet) { margin-top: 18px; }
.step :is(pre, .snippet) + :is(p, ul, ol, table) { margin-top: 18px; }

.check { border: 1px solid rgba(143,183,255,0.28); background: rgba(87,132,247,0.07); border-radius: 9px; padding: 11px 14px; margin-top: 11px; font-size: 14.5px; color: var(--dim); }
.check b { color: var(--text); }
/* The badge is a ::before on the class rather than markup in each box, so a .check
   added later cannot quietly be the one without it. */
.check::before { content: "✓ Check"; display: block; font-family: "JetBrains Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 7px; }
.note { border-left: 2px solid var(--amber); padding: 7px 0 8px 18px; margin-top: 16px;
  font-size: 14.5px; line-height: 1.72; color: var(--dim); }

table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
td, th { padding: 8px 0; border-top: 1px solid var(--line); vertical-align: top; color: var(--dim); text-align: left; }
th { color: var(--faint); font-family: "JetBrains Mono", Menlo, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; border-top: 0; }
tr:first-child td { border-top: 0; }
td:first-child { width: 200px; padding-right: 16px; color: var(--accent); font-family: "JetBrains Mono", Menlo, monospace; font-size: 13px; white-space: nowrap; }
table.wide-first td:first-child { width: 260px; }
/* `.free` is the variant whose first column is prose rather than an identifier. The width
   still has to be stated, and on the td: not every one of these tables has a header row, and
   the ones that do not were letting the label column wrap. */
table.free :is(td, th):first-child { width: 155px; white-space: normal; }
table.free td:first-child { color: var(--dim); font-family: inherit; font-size: 14.5px; }

/* The systems catalogue: one row per skill, dense enough to scan the whole set. */
.sys { border-top: 1px solid var(--line); padding: 14px 0; display: grid; grid-template-columns: 210px 1fr; gap: 18px; }
.sys:first-of-type { border-top: 0; }
.sys > div { min-width: 0; }
.sys .n { font-family: "JetBrains Mono", Menlo, monospace; font-size: 13.5px; color: var(--accent); word-break: break-word; }
.sys .n small { display: block; margin-top: 5px; font-family: "Instrument Sans", sans-serif; font-size: 12px; color: var(--faint); letter-spacing: 0; }
.sys p { font-size: 14.5px; color: var(--dim); }
.sys .v { margin-top: 6px; font-family: "JetBrains Mono", Menlo, monospace; font-size: 12.5px; color: var(--faint); word-break: break-word; }
.sys .v b { color: var(--dim); font-weight: 500; }

.pill { display: inline-block; font-family: "JetBrains Mono", Menlo, monospace; font-size: 10.5px; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 5px; border: 1px solid var(--line); color: var(--faint); vertical-align: 2px; }
.pill.w { border-color: rgba(224,163,63,0.4); color: var(--amber); }
.pill.r { border-color: rgba(111,202,143,0.35); color: var(--green); }

.toc { border: 1px solid var(--line); border-radius: 11px; background: var(--panel); padding: 14px 18px; margin-top: 22px; }
.toc .label { margin-bottom: 9px; }
.toc ul { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.toc a { font-size: 14.5px; border: 0; color: var(--dim); }
.toc a:hover { color: var(--accent); }

.next { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }
.next a { border: 1px solid var(--line); border-radius: 9px; padding: 9px 15px; font-size: 14.5px; color: var(--dim); background: var(--panel); }
.next a:hover { color: var(--accent); border-color: rgba(143,183,255,0.4); }

footer { padding: 34px 0 60px; color: var(--faint); font-size: 14px; border-top: 1px solid var(--line); }
footer p { max-width: 660px; }
footer code { font-size: 12.5px; }

@media (max-width: 720px) {
  .cards.three { grid-template-columns: 1fr; }
  .sys { grid-template-columns: 1fr; gap: 6px; }
  .toc ul { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  /* The gutter above is generous for reading; on a phone it is width the text needs. */
  .wrap { padding: 0 20px; }
  h1 { font-size: 30px; }
  .hero.small h1 { font-size: 26px; }
  h2 { font-size: 22px; }
  .cards { grid-template-columns: 1fr; }
  header nav { gap: 13px; font-size: 13px; }
  td { display: block; border-top: 0; padding: 2px 0; }
  th { display: none; }
  tr { display: block; padding: 9px 0; border-top: 1px solid var(--line); }
  td:first-child, table.wide-first td:first-child { width: auto; white-space: normal; }
}
@media (max-width: 520px) {
  header nav { gap: 11px; font-size: 12px; }
}