/* Design tokens taken verbatim from the product UI (see BRIEF.md).
   Deliberate rules carried over from the product: zero corner radius, no shadows, no tonal colour
   fills (no green/amber/red badges: importance comes from wording and placement), tabular figures. */
:root {
  --bg: #132131;
  --surface: #1A2A3C;
  --line: #273D54;
  --line-strong: #375473;
  --accent: #4FA3E3;
  --text: #E4EDF6;
  --text-muted: #BACCDE;
  --text-quiet: #8298B1;
  --danger: #E06C6C;
  --font: "Reddit Mono", ui-monospace, "DejaVu Sans Mono", monospace;
}
* { box-sizing: border-box; border-radius: 0 !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.65;
  font-variant-numeric: tabular-nums; font-feature-settings: "tnum";
}
.wrap { max-width: 54rem; margin: 0 auto; padding: 0 1.25rem; }
/* header, main and footer all carry .wrap, and a class selector beats a type selector. Vertical
   padding for them therefore has to be set on <element>.wrap, otherwise .wrap's shorthand above
   silently zeroes it out. Horizontal padding keeps coming from .wrap. */

/* header + nav */
/* No wordmark in the header: the name is carried by the heading of the overview page. */
/* The header is in the column like everything else, so its rule ends where the footer's does. The
   domain is the last item of the menu and margin-left:auto puts it at the right edge of that column.
   Remember the trap above: the padding has to sit on header.wrap, not on header. */
header { border-bottom: 1px solid var(--line); }
header.wrap { padding-top: 1.5rem; padding-bottom: 1.25rem; }
header nav { margin-top: 0; }
nav .domain { margin-left: auto; color: var(--text-quiet); }
nav { margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: 0.9375rem; }
nav a { border: 0; color: var(--text-muted); }
nav a:hover, nav a[aria-current="page"] { color: var(--accent); }

/* text */
main.wrap { padding-top: 2rem; padding-bottom: 4rem; }
h1 { font-size: 1.6rem; font-weight: 500; line-height: 1.3; margin: 0 0 1.25rem; }
h2 { font-size: 1.1875rem; font-weight: 500; margin: 3rem 0 1rem; padding-top: 1.75rem; border-top: 1px solid var(--line); }
h3 { font-size: 1rem; font-weight: 500; margin: 2rem 0 0.5rem; }
p, li { color: var(--text-muted); }
p { max-width: 42rem; }
ul { padding-left: 1.25rem; }
li { margin: 0.35rem 0; }
.lead { color: var(--text); font-size: 1.0625rem; }
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
a:hover, a:focus { border-bottom-color: var(--accent); }
strong { color: var(--text); font-weight: 500; }
code { background: var(--surface); padding: 0.05em 0.35em; border: 1px solid var(--line); }
pre {
  background: var(--surface); border: 1px solid var(--line); margin: 1rem 0;
  padding: 0.875rem 1rem; overflow-x: auto; font-size: 0.875rem; color: var(--text-muted);
}
pre code { background: none; border: 0; padding: 0; }

/* blocks */
.panel { border: 1px solid var(--line-strong); background: var(--surface); padding: 1.125rem 1.25rem; margin: 1.5rem 0; }
.panel p:last-child, .panel ul:last-child { margin-bottom: 0; }
.panel p:first-child { margin-top: 0; }
.quiet { color: var(--text-quiet); font-size: 0.875rem; }
table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; font-size: 0.9375rem; }
th, td { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { color: var(--text-quiet); font-weight: 500; }
td.no { color: var(--text-quiet); }
ol.steps { counter-reset: s; list-style: none; padding-left: 0; }
ol.steps li { counter-increment: s; padding-left: 2.5rem; position: relative; }
ol.steps li::before {
  content: counter(s); position: absolute; left: 0; top: 0;
  color: var(--text-quiet); border: 1px solid var(--line-strong); padding: 0 0.4rem;
}
footer { border-top: 1px solid var(--line); color: var(--text-quiet); font-size: 0.875rem; }
footer.wrap { padding-top: 1.5rem; padding-bottom: 3rem; }
footer a { color: var(--text-quiet); }
footer nav { margin: 0; gap: 1rem; font-size: 0.875rem; }