/* The launch site's one stylesheet (SPEC P8-M01-S04-T02): the landing, support and terms pages and the legal pages under
   /privacy/ link it. Logical properties only, readable from 320 CSS px, AA contrast in light and dark, the font from
   the app's own origin. The palette is the launch kit's brand (docs/launch/brand/brand.md): Ink, Arena Blue, Paper,
   Slate and White, with Signal Amber behind highlighted text; Night, Sky and Mist in dark. */
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --site-text: #14213d;
  --site-muted: #5c6670;
  --site-background: #f6f7f9;
  --site-surface: #ffffff;
  --site-link: #1f5fbf;
  --site-mark: #f4b43a;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --site-text: #f2f2f2;
    --site-muted: #c3c8d2;
    --site-background: #0f1626;
    --site-surface: #1c2438;
    --site-link: #8ab4f8;
    --site-mark: #5a4a00;
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--site-background);
  color: var(--site-text);
  font-family: "Inter", system-ui, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  overflow-wrap: break-word;
}

a {
  color: var(--site-link);
}

a:focus-visible {
  outline: 3px solid var(--site-link);
  outline-offset: 2px;
}

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  inset-block-start: -10rem;
  background: var(--site-background);
  padding: 0.5rem 1rem;
}

.skip:focus {
  inset-block-start: 1rem;
}

header,
main,
footer {
  max-inline-size: 48rem;
  margin-inline: auto;
  padding-inline: 1rem;
}

header nav,
footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding-block: 1rem;
}

header nav > a {
  font-weight: 700;
  font-size: 1.25rem;
  text-decoration: none;
}

nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav a[aria-current="page"] {
  font-weight: 700;
}

footer {
  margin-block-start: 3rem;
  border-block-start: 1px solid var(--site-surface);
  color: var(--site-muted);
}

h1,
h2,
h3 {
  font-weight: 700;
}

h1 {
  font-size: 2rem;
  line-height: 1.2;
}

h2 {
  font-size: 1.4rem;
  margin-block-start: 2rem;
}

h3 {
  font-size: 1.15rem;
}

figure {
  margin-inline: 0;
  margin-block: 1.5rem;
}

img,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
  border-radius: 8px;
  background: var(--site-surface);
}

figcaption {
  color: var(--site-muted);
  font-size: 0.9rem;
}

mark,
[role="note"] {
  background: var(--site-mark);
  color: var(--site-text);
}

[role="note"] {
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

/* The guides' lists, code and tables (AH-0068, R763): ordered and nested lists indent as a list does by default,
   code sits on the surface colour (AA in light and dark), and a table's cells wrap anywhere, so a table fits 320 px
   (a scrolling box would need a keyboard stop); one that still does not fit scrolls inside its box, never the page. */
ol,
li > ul {
  padding-inline-start: 2.5rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.95em;
  background: var(--site-surface);
  color: var(--site-text);
  padding-inline: 0.25rem;
  border-radius: 4px;
}

.table {
  overflow-x: auto;
  margin-block: 1.5rem;
}

table {
  border-collapse: collapse;
}

th,
td {
  border: 1px solid var(--site-muted);
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
  vertical-align: top;
  overflow-wrap: anywhere;
}

th {
  text-align: start;
}