/* Airlock site — one stylesheet, dark theme default.

   The tokens come from the product, never from a palette invented for
   the site: background and text are the overlay card's own colors,
   copied from src/ui.rs (Palette::dark); selected-bg, border, and muted
   are the card's derived blends — the text at 20% / 18% / 55% over the
   card, computed by the same integer math as the renderer's blend_over.
   The one addition is --hub, the app icon's amber, spent only on
   "current workspace". Spacing steps the card's 4/8 grid; hairline
   borders are the only separation, exactly as on the overlay; the
   selection band is the one fill (it hovers links the way it highlights
   rows).

   The landing page borrows the card's own grammar for its first screen:
   one 12 px frame, one inner hairline between the claim and the render,
   and the same face the overlay paints — the desktop's interface font
   (system-ui here), never a downloaded family. */

:root {
  --background: #1E2126;   /* COLOR_BACKGROUND — the card, alpha dropped: a page, not a wallpaper */
  --text: #F2F4F8;         /* COLOR_TEXT */
  --selected-bg: #484B50;  /* COLOR_SELECTED_BG — text at 20% over the card */
  --border: #44464B;       /* COLOR_BORDER — text at 18% over the card */
  --muted: #929599;        /* the row-hint color — text at 55% over the card */
  --hub: #FA9218;          /* the app icon's hub — the page's one accent, only ever "you are here" */
  --radius: 12px;          /* RADIUS — the card's corner rounding */
  --mono: ui-monospace, "Cascadia Mono", Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: dark;      /* the site is the dark card; native controls follow */
}

* { box-sizing: border-box; }

/* The selection band is the one fill, here too: selected text highlights
   the way a selected row does. */

::selection { background: var(--selected-bg); }

/* Inside the band's own fills the selection band would disappear: pre and
   kbd paint the same --selected-bg the selection uses, so highlighted
   command text looked unselectable. There the selection inverts — the
   text fill with the card's letters — still only the site's own colors. */

pre ::selection, kbd::selection { background: var(--text); color: var(--background); }

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

body {
  margin: 0;
  background: var(--background);
  color: var(--text);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }

/* The landing page runs wider: the hero is two cells, and the sections
   are a heading column beside their text. Subpages keep the one-column
   reading measure. */

.home .wrap { max-width: 1060px; }

/* The chrome runs the landing page's width everywhere, so the header
   and footer do not jump when you move between the landing page and a
   docs page. The docs pages' own main still holds 720. */

body > header .wrap,
body > footer .wrap { max-width: 1060px; }

/* Header and footer take the card's hairline treatment: the border is
   the only separation, no shadows, no fades. */

body > header { border-bottom: 1px solid var(--border); }

body > header .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 24px;
}

.brand {
  margin: 0;
  font-weight: 600;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
  text-decoration: none;
}

.brand img { flex: none; }

body > header nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }

main .wrap { padding-top: 32px; padding-bottom: 48px; }

body > footer { border-top: 1px solid var(--border); margin-top: 48px; }

body > footer .wrap { padding: 24px; color: var(--muted); font-size: 0.875rem; }

body > footer p { margin: 0 0 8px; }

/* Content links underline, the way the card's hints sit in a row; the
   nav is chrome, so it stays quiet until hovered — the selection band
   fills on hover exactly as it fills the selected row. */

a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

a:hover { background: var(--selected-bg); }

body > header nav a {
  text-decoration: none;
  color: var(--muted);
}

body > header nav a:hover,
body > footer a:hover,
.muted a:hover { color: var(--text); }

body > header nav a[aria-current="page"] { color: var(--text); }

/* The landing page's first screen is the card, at page scale: one 12 px
   frame around the claim, the commands, and the real render, divided by
   one inner hairline. The command block keeps the selection band as the
   page's only fill. */

.hero {
  margin-top: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: clip;
}

.hero-copy { padding: 32px 24px; }

.gesture { margin: 0; color: var(--muted); font-size: 1.125rem; }

.hero .gesture kbd { font-size: 1.125rem; padding: 0.16em 0.5em; }

.hero h1 {
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 16px 0 12px;
  max-width: 20ch;
}

h1, h2 { text-wrap: balance; }

/* The lede sits at the reading measure; it is the agreed one-liner, so
   the line breaks do the emphasis, not a colored word. */

.lede { font-size: 1.0625rem; line-height: 1.65; max-width: 46ch; margin: 0; }

.quick-install { margin-top: 28px; }

.quick-install pre { margin: 0; }

.fine { margin: 12px 0 0; max-width: 52ch; color: var(--muted); font-size: 0.875rem; }

.hero-card {
  margin: 0;
  padding: 32px 24px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.hero-card img { width: 100%; max-width: 420px; height: auto; }

.hero-card figcaption {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 42ch;
  color: var(--muted);
  font-size: 0.875rem;
  line-height: 1.55;
}

/* The favicon's hub, at its one job: marking the workspace the card is
   showing. It is the only color on the page that is not a grey. */

.hub {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 0.5em;
  border-radius: 50%;
  background: var(--hub);
}

@media (min-width: 900px) {
  .hero { display: grid; grid-template-columns: 1.1fr 0.9fr; }
  .hero-copy {
    padding: 48px 40px 48px 48px;
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .hero-card { border-top: 0; padding: 40px 32px; }
}

/* The narrowest phones cannot fit the compound at 32 px; dropping one
   step lets "Workspace-isolated" break only at its hyphen, never
   mid-word. */

@media (max-width: 380px) {
  .hero-copy { padding: 24px 20px; }
  .hero h1 { font-size: 1.625rem; }
  /* The two commands are the point of the page; let the band run to the
     frame's edges and step the type down rather than clip a command. */
  .quick-install { margin-left: -20px; margin-right: -20px; }
  .quick-install pre {
    border-radius: 0;
    border-left: 0;
    border-right: 0;
    padding: 12px 14px;
  }
  .quick-install pre code { font-size: 0.75rem; }
}

/* Sections read as rows of the same card: a heading column beside the
   text, one hairline above each section. Prose holds a reading measure;
   the tables are allowed the full column. */

.row-section {
  margin-top: 56px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.row-section > h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
  margin: 0 0 16px;
}

.row-section > div { min-width: 0; }

.row-section > div > :first-child { margin-top: 0; }

.row-section p { max-width: 68ch; }

/* Feature groups: a term above its list, a step below the section title
   and clear of the paragraph that follows the list before it. */

.row-section > div > h3 {
  margin: 24px 0 0;
  font-size: 1rem;
  font-weight: 600;
}

.row-section > div > h3 + ul { margin-top: 8px; }

@media (min-width: 860px) {
  .row-section {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: 0 48px;
  }
  .row-section > h2 { margin: 0; }
}

/* A stack of terms and sentences — the Why and the extra features. The
   hairline between rows is the same separation the card uses, and the
   term is the row's title. */

.rows {
  margin-top: 20px;
  border-top: 1px solid var(--border);
}

.row { padding: 14px 0; }

.row + .row { border-top: 1px solid var(--border); }

.row h3 { margin: 0; font-size: 1rem; font-weight: 600; }

.row p { margin: 4px 0 0; }

/* Subpage titles take the hero's step down one: same face, no browser
   default margins. */

main h1 { font-size: 1.75rem; line-height: 1.3; margin: 0; }

section { margin-top: 32px; }

h2 { font-size: 1.25rem; margin: 0 0 12px; }

p, ul { margin: 8px 0 0; }

ul { padding-left: 24px; }

li { margin-top: 4px; }

/* Tables carry the hairline grid; headers sit in the row-hint color,
   the card's own secondary text. Figures use tabular numerals — the
   card's hint band aligns its digits, and so do the performance
   figures. A key table's first column holds one chord and never wraps
   mid-chip. */

table {
  border-collapse: collapse;
  width: 100%;
  margin: 12px 0 0;
  display: block;
  overflow-x: auto;
  scrollbar-color: var(--border) transparent;
  font-variant-numeric: tabular-nums;
}

th, td {
  border: 1px solid var(--border);
  padding: 8px 12px;
  text-align: left;
  vertical-align: top;
}

th { color: var(--muted); font-weight: 600; font-size: 0.875rem; }

table.keys td:first-child { white-space: nowrap; }

/* On a phone the key table stacks: the chord becomes the row's title,
   the action sits under it. Same two-line shape as an overlay row, and
   no column of two-word wraps. */

@media (max-width: 700px) {
  table.keys { display: block; overflow: visible; border: 0; margin-top: 16px; }
  table.keys thead { display: none; }
  table.keys tbody, table.keys tr, table.keys td { display: block; width: auto; }
  table.keys tr { border-top: 1px solid var(--border); padding: 10px 0; }
  table.keys tr:last-child { border-bottom: 1px solid var(--border); }
  table.keys td { border: 0; padding: 0; }
  table.keys td + td { margin-top: 2px; color: var(--muted); }
}

/* Code blocks are the selection band: the one fill the overlay spends. */

code { font-family: var(--mono); font-size: 0.875em; }

pre {
  background: var(--selected-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 16px;
  overflow-x: auto;
  margin: 12px 0 0;
  scrollbar-color: var(--border) transparent;
}

pre code { font-size: 0.875rem; }

/* The install commands carry one affordance: a copy button riding the
   band's own fill, top-right, out of the command's first line. The label
   states the action and the outcome — no icon, no motion, the same text
   swap the CLI spends. The radius is the band's own 8 px rung, not the
   card's 12. */
.cmd { position: relative; }

.copy {
  position: absolute;
  top: 8px;
  right: 8px;
  padding: 6px 10px;
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1;
  color: var(--muted);
  background: var(--selected-bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  cursor: pointer;
}

.copy:hover, .copy.did { color: var(--text); }

.copy:focus-visible { outline: 1px solid var(--text); outline-offset: 1px; }

/* The demo video takes the pre's frame: one hairline and the 12 px
   radius. It holds the prose measure, not the full column — a five-minute
   recording is reference material, not a second hero, and at 68ch it sits
   at the same left edge as the paragraph that introduces it.
   preload="none" and the poster keep the section free until the visitor
   presses play — the 9.4 MB recording never loads by accident. */

.demo-video { margin: 16px 0 0; max-width: 68ch; }

.demo-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--background);
}

/* Keycaps: the row-hint keycaps — mono, the selection band behind, the
   hairline around, a deeper bottom edge for the cap's depth. */

kbd {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text);
  background: var(--selected-bg);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

.muted { color: var(--muted); }