/*
 * Chief website — design system 1.0, "Instrument".
 *
 * The tokens here mirror src/styles/globals.css. The site and the app are one
 * system, so a colour or a size that changes in the app changes here too.
 *
 * Fonts are self-hosted rather than fetched from a font CDN. The app's CSP
 * allows font-src 'self' for exactly this reason, and a site whose headline
 * claim is that nothing about you is sent anywhere should not open with a
 * request to Google on every page load.
 */

@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/instrument-sans-latin-wght-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
}

:root {
  /* Five colours. Grey does everything else. */
  --graphite: #14171a;
  --paper: #f4f5f3;
  --slate: #2c5c7a;
  --verified: #3f6b4f;
  --attention: #b8761f;

  --verified-text: #2f5a3d;
  --attention-text: #8a5510;
  --attention-surface: #f5ebdc;

  --surface: #fafbf9;
  --surface-sunk: #edefeb;
  --rule: #d6d9d4;
  --rule-strong: #bfc3be;
  --muted: #5a6169;

  /* Dark panel, as used inside light pages. */
  --panel: #14171a;
  --panel-raised: #1b1f23;
  --panel-tile: #282e33;
  --panel-text: #edefec;
  --panel-muted: #8b9299;
  --panel-verified: #7fa98a;
  --panel-slate: #8fb7ce;
  --panel-attention: #d9903a;
  --panel-rule: rgba(237, 239, 236, 0.1);
  --panel-input: rgba(237, 239, 236, 0.18);
  --panel-sunk: #232a2f;

  --measure: 1160px;
  --sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
}

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--graphite);
  font-family: var(--sans);
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--slate);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover {
  color: #1e4359;
}

h1,
h2,
h3,
p {
  margin: 0;
}

svg {
  flex-shrink: 0;
}

.shell {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 40px;
}

/* Sizes are fixed: 10, 12, 14, 16, 20 in the app. The site adds display sizes
   for headlines, which the app has no use for. */
.micro {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.mono {
  font-family: var(--mono);
}

/* ---- Header ---- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

/* The row is aligned on the baseline, not on the centre of each box. The
   three text runs in it are set at three different sizes — 19px wordmark,
   14px links, 13px button label — and centring boxes of three different
   heights leaves their baselines a pixel or two apart, which reads as a
   mistake rather than as a decision.
 
   Baseline alignment costs something: an inline-flex box does not expose the
   baseline of its text. A flex container's baseline is synthesised from its
   first flex item, which in all three of these is an icon, so the row would
   line up on the bottom edges of the icons instead. The wordmark, the GitHub
   link and the header button are therefore laid out inline rather than as
   flex containers, which gives each of them a real text baseline, and each
   mark is placed against it by an explicit `vertical-align` offset.
 
   Two rules, because there are two kinds of mark here. **The logo is a
   letter**: its `C` is drawn to the cap height of the type beside it, so it
   sits on the baseline exactly as the `C` of "Chief" does. **An icon is not a
   letter**: the Octocat and the download arrow are both drawn taller than the
   cap height of the word they label, so standing one on the baseline throws
   all of its overshoot upward and it reads as floating above the line. Those
   two are centred on the cap height instead — the overshoot splits evenly
   above the cap and below the baseline, which is what "level with the word"
   actually looks like.
 
   Every offset is worked out from the artwork rather than chosen: an icon is
   drawn with padding inside its viewBox, so the ink is not the box and only
   the drawing says where the gap is. That is why these are five different
   numbers and not one shared value, and it is why `e2e/website.spec.ts`
   measures the ink rather than trusting any of them.
 
   The height is padding rather than a fixed 68px, because a baseline-aligned
   flex line is placed at the start of the container rather than in the middle
   of it — a fixed height would hang the whole row from the top. */
.site-header .shell {
  min-height: 68px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding-top: 17px;
  padding-bottom: 17px;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

.wordmark p {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.035em;
}

.site-header .wordmark {
  display: inline-block;
  white-space: nowrap;
}

.site-header .wordmark p {
  display: inline;
}

/* The `C` stands on the baseline, where the `C` of "Chief" beside it does.
   Its arc is a 7-unit circle stroked at 3.2 in a 32-unit viewBox, so the ink
   reaches 24.6 of 32 and the remaining 7.4 is the tile's own padding: at 26px
   that is 26 x 7.4 / 32 = 6.01px of box below the line. The two then agree on
   their cap height as well as their baseline — the arc is 13.98px tall and
   Instrument Sans at 19px caps at 14px — which is the whole reason the mark
   reads as a letter rather than as an icon. */
.site-header .wordmark svg {
  vertical-align: -6px;
  margin-right: 10px;
}

.site-nav {
  display: flex;
  align-items: baseline;
  gap: 26px;
}

/* The download button lives in this nav but is not a nav link. `.site-nav a`
   is (0,1,1) and `.btn-primary` is (0,1,0), so without the `:not(.btn)` the
   link rules win on specificity and paint the button `--muted` on graphite —
   about 2.1:1, under AA — and then `--graphite` on graphite when hovered,
   which is invisible. Excluding `.btn` is the fix; raising `.btn-primary`'s
   specificity instead would only move the fight somewhere else. */
.site-nav a:not(.btn) {
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}

.nav-external {
  display: inline-block;
  white-space: nowrap;
}

/* Centred on the cap height of "GitHub", per `.site-header .shell`. The
   Octocat's legs end at 22 of a 24-unit viewBox and the round caps take its
   ink to 23, so at 15px the ink is 13.75px tall with 0.625px of padding under
   it. Against a 10.2px cap height that is 3.55px of overshoot, and half of it
   goes below the line: 10.2 / 2 less 13.75 / 2, less the 0.625 of padding,
   puts the box 2.4px under the baseline. */
.nav-external svg {
  vertical-align: -2.4px;
  margin-right: 7px;
}

.site-nav a:not(.btn):hover {
  color: var(--graphite);
}

.site-nav a:not(.btn)[aria-current='page'] {
  color: var(--graphite);
  font-weight: 600;
  border-bottom-color: var(--graphite);
}

/* Inline rather than inline-flex, for the baseline the row is aligned on —
   see `.site-header .shell`. The height comes from the line box plus the
   button's own borders, so 32 + 1 + 1 is the 34px `.btn-sm` asks for. */
.site-header .btn {
  display: inline-block;
  height: auto;
  line-height: 32px;
  white-space: nowrap;
}

/* And the download arrow, against "Download" at 13px. Its ink runs 2 to 22 of
   24 — the tray's stroke below, the shaft's cap above — so at 15px it is
   12.5px tall on 1.25px of padding, and a 9.4px cap height puts the box 2.8px
   under the baseline. */
.site-header .btn svg {
  vertical-align: -2.8px;
  margin-right: 8px;
}

/* ---- Buttons ---- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary {
  height: 46px;
  background: var(--graphite);
  padding: 0 22px;
  color: var(--paper);
}

.btn-primary:hover {
  background: #000;
  color: var(--paper);
}

.btn-sm {
  height: 34px;
  padding: 0 15px;
  font-size: 13px;
  gap: 8px;
}

.btn-ghost {
  height: 46px;
  border-color: var(--rule-strong);
  padding: 0 18px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
}

.btn-light {
  height: 42px;
  background: var(--panel-text);
  padding: 0 20px;
  font-size: 14px;
  color: var(--graphite);
}

.btn-light:hover {
  color: var(--graphite);
  background: #fff;
}

/* ---- Chips ---- */

.chip-verified {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--verified);
  border-radius: 4px;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--verified-text);
}

/* ---- Hero ---- */

.hero {
  padding: 72px 40px 64px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  margin-top: 22px;
  font-size: 60px;
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.038em;
}

.hero-sub {
  margin-top: 22px;
  max-width: 470px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

.hero-actions {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

/* The third thing beside the download button is a link rather than a third
   button: two buttons and a link is a hierarchy, three buttons is a menu. */
.hero-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 4px;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--muted);
  text-decoration: none;
}

.hero-link:hover {
  color: var(--graphite);
}

.hero-note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--muted);
}

.hero-stats {
  margin-top: 32px;
  display: flex;
  gap: 32px;
  border-top: 1px solid var(--rule);
  padding-top: 20px;
  flex-wrap: wrap;
}

.hero-stats strong {
  display: block;
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.025em;
}

.hero-stats span {
  display: block;
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

/* ---- App screenshot ----
   The Today screen as the app draws it in its dark theme, scaled to fit half
   the hero: the 56px rail, the list pane of briefs, the 48px header saying
   where the data is, and the brief. The colours are the app's dark tokens, so
   a change to one of them in src/styles/globals.css changes here too. Nothing
   moves: the app only moves while work is in flight, and a brief that has
   been written is not that. */

.frame {
  border-radius: 12px;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 20px 48px rgba(20, 23, 26, 0.16);
}

.frame-bar {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  background: var(--panel-raised);
  border-bottom: 1px solid var(--panel-rule);
}

.frame-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #3a4046;
}

.frame-title {
  margin-left: 10px;
  font-size: 12px;
  color: var(--panel-muted);
}

.frame-body {
  display: flex;
  height: 420px;
  overflow: hidden;
  color: var(--panel-text);
}

.rail {
  width: 48px;
  flex-shrink: 0;
  background: var(--panel-raised);
  border-right: 1px solid var(--panel-rule);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 11px 0;
}

.rail-mark {
  margin-bottom: 8px;
}

.rail-mark rect {
  fill: var(--panel-text);
}

.rail-mark path {
  fill: none;
  stroke: var(--panel);
  stroke-width: 3.8;
  stroke-linecap: round;
}

.rail-tile {
  display: flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: var(--panel-muted);
}

.rail-tile.is-active {
  background: var(--panel-tile);
  color: var(--panel-text);
}

/* Ask sits under a rule: it opens a drawer rather than going somewhere. */
.rail-ask {
  position: relative;
  margin-top: 13px;
}

.rail-ask::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--panel-rule);
}

.rail-shield {
  margin-top: auto;
  color: var(--panel-verified);
}

.list-pane {
  width: 132px;
  flex-shrink: 0;
  padding: 6px;
  background: var(--panel-raised);
  border-right: 1px solid var(--panel-rule);
}

.pane-label {
  padding: 8px 6px;
  font-size: 9px;
  color: var(--panel-muted);
}

.list-row {
  padding: 7px 6px;
  border-radius: 6px;
  color: var(--panel-muted);
}

.list-row.is-active {
  background: var(--panel-tile);
  color: var(--panel-text);
}

.list-row p:first-child {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.list-row .mono {
  margin-top: 2px;
  font-size: 10px;
}

.detail-pane {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.pane-head {
  height: 40px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--panel-rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 0 16px;
}

.pane-head p:first-child {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.pane-head .mono {
  min-width: 0;
  overflow: hidden;
  font-size: 9.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: var(--panel-muted);
}

.detail-body {
  flex: 1;
  min-height: 0;
  padding: 16px 18px;
}

.brief-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.detail-head {
  margin-right: 2px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* The app's `machine` chip: a sunk fill, mono, never a solid colour. */
.app-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  padding: 2px 6px;
  font-family: var(--mono);
  font-size: 9.5px;
  white-space: nowrap;
  background: var(--panel-sunk);
  color: var(--panel-muted);
}

.app-chip.is-quiet {
  border: 1px solid var(--panel-rule);
  background: none;
  font-family: var(--sans);
}

.brief-path {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 9.5px;
  color: var(--panel-muted);
}

.app-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  height: 26px;
  padding: 0 9px;
  border-radius: 6px;
  border: 1px solid var(--panel-input);
  font-size: 11px;
  font-weight: 500;
}

.brief-list {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.brief-list li {
  position: relative;
  padding-left: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.brief-list li::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 1px;
  width: 3px;
  height: 3px;
  border-radius: 999px;
  background: var(--panel-slate);
}

.drafted {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--panel-rule);
}

.drafted .micro {
  font-size: 9px;
  color: var(--panel-muted);
}

.draft-card {
  margin-top: 9px;
  padding: 11px 12px;
  border-radius: 8px;
  border: 1px solid var(--panel-rule);
  background: var(--panel-raised);
}

.draft-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.draft-head p {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.draft-body {
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.5;
}

/* ---- Sections ---- */

.band {
  border-top: 1px solid var(--rule);
  background: var(--surface-sunk);
}

.section {
  padding: 72px 40px;
}

.section h2 {
  font-size: 32px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.cards-3 {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.card {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 8px;
  padding: 28px;
}

.card h3 {
  margin-top: 16px;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.card p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
  text-wrap: pretty;
}

/* ---- Dark feature panel ---- */

.panel {
  border-radius: 12px;
  background: var(--panel);
  color: var(--panel-text);
  padding: 48px;
}

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.panel .micro {
  color: var(--panel-verified);
}

.panel h2 {
  margin-top: 18px;
  font-size: 36px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.panel-sub {
  margin-top: 20px;
  max-width: 440px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--panel-muted);
  text-wrap: pretty;
}

.panel .btn-light {
  margin-top: 26px;
}

.ledger {
  display: flex;
  flex-direction: column;
}

.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid rgba(237, 239, 236, 0.12);
  padding: 14px 0;
  font-size: 15px;
}

.ledger-row:last-child {
  border-bottom: 0;
}

.ledger-row .mono {
  font-size: 12px;
  color: var(--panel-verified);
  text-align: right;
}

.ledger-row .mono.is-quiet {
  color: var(--panel-muted);
}

/* ---- Steps ---- */

.steps {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.step {
  background: var(--surface);
  padding: 28px;
}

.step h3 {
  margin-top: 12px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.step p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.step .mono {
  font-size: 12px;
  color: var(--muted);
}

.meter {
  margin-top: 14px;
  height: 6px;
  width: 100%;
  overflow: hidden;
  border-radius: 999px;
  background: #eaece9;
}

.meter span {
  display: block;
  height: 100%;
  background: var(--graphite);
}

.code-word {
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 18px;
  letter-spacing: 0.16em;
}

/* ---- Download CTA ---- */

.get {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--surface);
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.get h2 {
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.028em;
}

.get-sub {
  margin-top: 12px;
  max-width: 400px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--muted);
}

.get-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.get-tile {
  display: inline-flex;
  flex-direction: column;
  gap: 4px;
  border-radius: 8px;
  border: 1px solid var(--rule-strong);
  padding: 16px 22px;
  text-decoration: none;
  color: var(--graphite);
}

.get-tile:hover {
  color: var(--graphite);
  border-color: var(--graphite);
}

.get-tile.is-primary {
  background: var(--graphite);
  border-color: var(--graphite);
  color: var(--paper);
}

.get-tile.is-primary:hover {
  color: var(--paper);
}

.get-tile-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}

.get-tile-meta {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--muted);
}

.get-tile.is-primary .get-tile-meta {
  color: inherit;
  opacity: 0.7;
}

/* ---- Long-form pages ---- */

.page {
  padding: 64px 40px 88px;
}

.page h1 {
  margin-top: 16px;
  font-size: 52px;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -0.035em;
  max-width: 800px;
}

.page-sub {
  margin-top: 22px;
  max-width: 680px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--muted);
  text-wrap: pretty;
}

.arch {
  margin-top: 44px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--panel-text);
  padding: 40px;
}

.arch-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}

.arch-node {
  border: 1px solid rgba(237, 239, 236, 0.14);
  border-radius: 8px;
  padding: 20px;
}

.arch-node.is-engine {
  border-color: var(--panel-verified);
}

.arch-node p:first-child {
  font-size: 15px;
  font-weight: 600;
}

.arch-node .mono {
  margin-top: 6px;
  font-size: 12px;
  color: var(--panel-muted);
}

.arch-arrow {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--panel-verified);
}

.arch-foot {
  margin-top: 24px;
  border-top: 1px solid rgba(237, 239, 236, 0.12);
  padding-top: 22px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tag-attention {
  border-radius: 4px;
  background: #3a2b14;
  padding: 3px 10px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--panel-attention);
}

.arch-foot p {
  font-size: 14px;
  line-height: 1.6;
  color: var(--panel-muted);
  flex: 1;
  min-width: 280px;
}

.cards-2 {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.card-lg {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 8px;
  padding: 32px;
}

.card-lg > p:first-child {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.prose-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.prose-list strong {
  color: var(--graphite);
}

.table {
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  overflow: hidden;
}

.table-row {
  padding: 11px 14px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

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

.table-row .mono {
  font-size: 12px;
}

.table-row span:last-child {
  color: var(--muted);
  text-align: right;
}

.card-lg .after-note {
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

.cards-3.is-tight {
  margin-top: 20px;
}

.cards-3.is-tight .card h3 {
  margin-top: 0;
  font-size: 17px;
}

/* ---- Docs ---- */

.docs {
  padding: 56px 40px 88px;
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 56px;
  align-items: start;
}

.docs-nav {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.docs-nav-group p {
  margin-bottom: 10px;
}

.docs-nav-links {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
}

.docs-nav-links a {
  color: var(--muted);
  padding-left: 14px;
  text-decoration: none;
}

.docs-nav-links a:hover {
  color: var(--graphite);
}

.docs-nav-links a.is-current {
  font-weight: 600;
  color: var(--graphite);
  border-left: 2px solid var(--graphite);
  padding-left: 12px;
}

.docs-article {
  max-width: 720px;
}

.docs-article h1 {
  margin-top: 14px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.docs-lede {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
}

.docs-article h2 {
  margin-top: 40px;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.docs-article h2 + p {
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--muted);
}

.docs-article code {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--graphite);
}

pre {
  margin: 16px 0 0;
  border: 1px solid var(--rule);
  background: var(--panel);
  color: var(--panel-text);
  border-radius: 8px;
  padding: 20px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.7;
  overflow-x: auto;
}

.note {
  margin-top: 26px;
  border-left: 2px solid var(--verified);
  background: var(--surface);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  font-size: 14px;
  line-height: 1.65;
}

.note.is-attention {
  border-left-color: var(--attention);
}

.grid-table {
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
}

.grid-table-head,
.grid-table-row {
  display: grid;
  grid-template-columns: 1.4fr 0.7fr 0.7fr 1.6fr;
  gap: 12px;
  padding: 13px 16px;
  align-items: center;
}

.grid-table-head {
  background: var(--surface-sunk);
  padding: 11px 16px;
}

.grid-table-row {
  background: var(--surface);
  border-top: 1px solid var(--rule);
  font-size: 14px;
}

.grid-table-row .mono {
  font-size: 13px;
}

.grid-table-row span:not(.mono) {
  color: var(--muted);
}

.faq {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--rule);
  background: var(--surface);
  border-radius: 8px;
  padding: 18px 20px;
}

.faq-item p:first-child {
  font-size: 15px;
  font-weight: 600;
}

.faq-item p + p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

/* ---- Changelog ----
   Generated into website/changelog.html from CHANGELOG.md, so these rules
   dress a shape no one hand-writes. The release number is a machine fact and
   so is the date, which is why both are mono and the date stays ISO: this is
   an instrument, and a reader comparing it to a tag or a filename should not
   have to translate. */

.changelog {
  margin-top: 40px;
  border-bottom: 1px solid var(--rule);
}

.release {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 40px;
  padding: 34px 0;
  border-top: 1px solid var(--rule);
}

.release-mark {
  /* Held beside its changes while a long release scrolls past. 84px is the
     68px header plus room to breathe under it. */
  position: sticky;
  top: 84px;
  align-self: start;
}

.release-version {
  font-family: var(--mono);
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -0.02em;
}

.release-date {
  margin-top: 7px;
  font-size: 12px;
  color: var(--muted);
}

.release-latest {
  margin-top: 13px;
  display: inline-block;
  border: 1px solid var(--verified);
  border-radius: 4px;
  padding: 3px 9px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--verified-text);
}

.release-group + .release-group {
  margin-top: 28px;
}

.release-group .micro {
  /* The section titles come from the changelog as "Features" and "Fixes"; the
     micro label lowercases them the way every other label on the site is. */
  text-transform: lowercase;
  letter-spacing: 0.1em;
}

.change-list {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.change {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  padding: 11px 0;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.6;
}

.change-scope {
  flex: none;
  /* Wide enough for `integrations`, the longest scope commitlint allows, so
     every subject in a release starts at the same x. A ragged left edge down
     seventy lines is the difference between a table and a list. */
  min-width: 96px;
  font-size: 12px;
  color: var(--slate);
}

.change-subject {
  flex: 1 1 240px;
  text-wrap: pretty;
}

.change-sha {
  flex: none;
  font-size: 12px;
  color: var(--muted);
  text-decoration: none;
}

.change-sha:hover {
  color: var(--graphite);
}

/* Amber, because a breaking change is the one line in a release that needs
   the reader rather than telling them something. A tinted fill with dark
   text, never solid colour behind 10px type. */
.change-breaking {
  flex: none;
  border-radius: 4px;
  background: var(--attention-surface);
  padding: 2px 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--attention-text);
}

/* ---- Footer ---- */

.site-footer {
  border-top: 1px solid var(--rule);
  background: var(--surface-sunk);
}

.footer-top {
  padding: 44px 40px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 48px;
  flex-wrap: wrap;
}

.footer-blurb {
  margin-top: 14px;
  max-width: 320px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.footer-cols {
  display: flex;
  gap: 64px;
  flex-wrap: wrap;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}

.footer-col .micro {
  margin-bottom: 3px;
  color: var(--graphite);
}

.footer-col a {
  color: var(--muted);
  text-decoration: none;
}

.footer-col a:hover {
  color: var(--graphite);
}

.footer-base {
  border-top: 1px solid var(--rule);
}

.footer-base .shell {
  padding: 18px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-base .mono {
  font-size: 12px;
  color: var(--muted);
}

.footer-badge {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--verified-text);
}

/* ---- Responsive ----
   The canvas is a fixed 1440px artboard. A real site is not, so the two-column
   grids collapse in order and the app screenshot drops its list pane before it
   drops the detail pane — the detail is what the section is showing. */

@media (max-width: 1080px) {
  .hero-grid,
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .hero h1 {
    font-size: 48px;
  }

  .panel-sub,
  .hero-sub {
    max-width: none;
  }

  .arch-grid {
    grid-template-columns: 1fr;
  }

  .arch-arrow {
    text-align: center;
  }

  .arch-arrow br {
    display: none;
  }
}

@media (max-width: 900px) {
  .cards-3,
  .cards-2,
  .steps {
    grid-template-columns: 1fr;
  }

  .docs {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .docs-nav {
    position: static;
  }

  .grid-table-head {
    display: none;
  }

  .grid-table-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  /* The version rail stops being a rail: sticky beside 40px of nothing is
     worse than a heading on top of what it names. */
  .release {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 28px 0;
  }

  .release-mark {
    position: static;
    display: flex;
    align-items: baseline;
    gap: 12px;
  }

  .release-date,
  .release-latest {
    margin-top: 0;
  }

  /* No column to line up with once the subject wraps under its scope. */
  .change-scope {
    min-width: 0;
  }
}

@media (max-width: 720px) {
  .shell,
  .hero,
  .section,
  .page,
  .docs,
  .footer-top,
  .footer-base .shell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero h1 {
    font-size: 38px;
  }

  .page h1 {
    font-size: 36px;
  }

  .section h2,
  .get h2 {
    font-size: 26px;
  }

  .panel,
  .arch,
  .get,
  .card-lg {
    padding: 28px;
  }

  .list-pane {
    display: none;
  }

  .site-nav {
    gap: 16px;
  }

  .frame-body {
    height: 380px;
  }
}

/* A phone. The header is one row and has to stay one row: the wordmark, two
   links, GitHub and the download button do not fit across 360px at desktop
   sizes, and what the overflow actually did was push the download button —
   the one thing in the header anybody presses — off the right-hand edge.
 
   So the row is tightened rather than wrapped. The GitHub link keeps its icon
   and loses its label, which is clipped rather than removed so it is still the
   link's accessible name; every other item is stepped down one size. Nothing
   leaves the header, and the button stays on screen. */
@media (max-width: 560px) {
  .shell,
  .hero,
  .section,
  .page,
  .docs,
  .footer-top,
  .footer-base .shell {
    padding-left: 16px;
    padding-right: 16px;
  }

  .site-header .shell {
    gap: 14px;
  }

  .site-nav {
    gap: 14px;
  }

  .site-header .wordmark svg {
    width: 22px;
    height: 22px;
    /* The tile's padding below its ink, at this size: 22 x 7.4 / 32 = 5.09px.
       The offset is a function of the size, so stepping the mark down moves
       it. The GitHub mark is not stepped down, so its own offset stands. */
    vertical-align: -5px;
    margin-right: 8px;
  }

  .site-header .wordmark p {
    font-size: 17px;
  }

  .site-nav a:not(.btn) {
    font-size: 13px;
  }

  .nav-label {
    /* Clipped, not `display: none`: the icon on its own has no accessible
       name, and a link that reads as nothing to a screen reader is a worse
       outcome than a wide header. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .nav-external svg {
    /* The mark keeps its size here but the text does not, and the offset is a
       function of the text's cap height: 9.4px at 13px rather than 10.2px. */
    vertical-align: -2.8px;
    margin-right: 0;
  }

  .site-header .btn {
    padding: 0 12px;
    font-size: 12px;
  }

  .site-header .btn svg {
    width: 14px;
    height: 14px;
    /* Both step down, so both halves of the sum move: 11.67px of ink on
       1.17px of padding, against an 8.7px cap height at 12px. */
    vertical-align: -2.65px;
    margin-right: 6px;
  }

  /* A change is two lines on a phone rather than three columns: the scope and
     the commit it links to sit on one row, and the sentence gets the width. */
  .change {
    gap: 4px 10px;
  }

  .change-scope,
  .change-sha {
    order: 1;
  }

  .change-sha {
    margin-left: auto;
  }

  .change-subject {
    order: 2;
    flex: 1 1 100%;
  }
}

/* A small phone — 320px is the narrowest screen anybody still browses on, and
   at that width the row runs out of room even tightened. Something has to
   leave, and it is the GitHub link: it is the only item in the header that is
   also in the footer of every page, and the alternative is the download
   button going off the edge again. */
@media (max-width: 400px) {
  .site-header .nav-external {
    display: none;
  }

  .site-header .shell,
  .site-nav {
    gap: 10px;
  }

  .site-header .btn {
    padding: 0 10px;
  }
}

/* ---- Small utilities ----
   These exist so the pages carry no inline style attributes, which lets the
   Content-Security-Policy in vercel.json keep style-src at 'self' rather than
   opening it up to 'unsafe-inline'. */

.sprite {
  position: absolute;
  width: 0;
  height: 0;
}

.mt-8 {
  margin-top: 8px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-24 {
  margin-top: 24px;
}

.docs-crumb {
  font-size: 12px;
  color: var(--muted);
}

.meter span.is-62 {
  width: 62%;
}