/* This guide's own additions to the vendored family chrome in site.css: its accent -- none,
   since the parent's subject is the family, so it resolves to the action role in the same
   three slots, DESIGN.md#published-guide-chrome -- and the page content this small site draws
   that no other guide shares. Loaded after site.css. Hand-maintained; never vendored.

   Sized on [the scale](../../../DESIGN.md#the-scale) as of 2026-08-13, which it had never
   been: type on the nine steps, spacing on `0.25/0.5/0.75/1/1.5/2/3rem`, radius from
   site.css's `--radius-xs/-sm/-radius/-lg`. Twenty declarations moved and none by more than a
   step -- twelve distances, three sizes, four radii and one reserved height, drawn from twelve
   distinct off-step values: `1.4`, `1.35`, `1.25`, `1.15`, `1.1`, `0.9375`, `0.9`, `0.85`,
   `0.7`, `0.6`, `0.35`, `0.3rem`. Nine of the twelve were within `0.1rem` of a step they were
   not on, which is the shape this drift takes: not a value chosen against the scale, a value
   chosen without it. site.css was reconciled onto the same steps when it was vendored; this
   file is the half nothing was watching, and `tests/test_guide_scale.py` now reads the two
   together the way a browser does.

   Two of them had no nearest step to move to. `0.9375rem` sits exactly between Body small
   (`0.875rem`) and Body (`1rem`), so duty decided it rather than arithmetic: all three were
   supporting text beside primary prose -- a card's purpose line, a definition in a grid, a
   request to be copied -- and Body small is the step for body copy in that role. `1.25rem` is
   a type step and not a spacing one, so the callout's horizontal padding went to `1rem` with
   its vertical rather than up to `1.5rem`.

   The two `minmax()` track minimums are measures rather than steps, the same as site.css's
   `76ch` body measure: each is the width below which a card's contents stop fitting, so the
   grid answers to its contents and not to the spacing scale. */

:root {
  --accent: var(--action);
  --accent-surface: rgb(10 132 255 / 14%);
}

html[data-theme="light"] {
  --accent-surface: rgb(10 132 255 / 12%);
}

/* The three products. Each card is one product's invitation: what it answers, where to open
   it, and where its guide and its license live. */
.product-grid {
  display: grid;
  gap: 1rem;
  margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.product-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.product-card h2 {
  margin: 0;
  font-size: 1.25rem;
}

/* A product on its way out. The card still opens it, because it is still running; this line is
   what keeps a new operator from starting there. */
.product-card .lifecycle {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.product-card .question {
  margin: 0.25rem 0 0;
  color: var(--action-text);
  font-size: 0.875rem;
  font-weight: 700;
}

.product-card p {
  color: var(--muted);
}

.product-card .purpose {
  flex: 1;
  margin: 0.75rem 0 1rem;
  font-size: 0.875rem;
}

.product-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.callout {
  margin: 2rem 0 0;
  padding: 1rem;
  border: 1px solid var(--line);
  border-left: 0.25rem solid var(--action);
  border-radius: var(--radius);
  background: var(--surface);
}

.callout p {
  margin: 0;
  color: var(--muted);
}

.callout p + p {
  margin-top: 0.75rem;
}

.terms {
  display: grid;
  gap: 0.75rem;
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.terms li {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.875rem;
}

.terms strong {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--ink);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.copy-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1rem;
  margin: 1rem 0 0;
}

.copy-field code {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}

/* Reserved rather than grown into: the result appears where the space already was, so the
   page does not move under a pointer that has just pressed the button. `1.4rem` did not
   reserve it -- 0.875rem of text at the body's 1.65 line-height is a 1.44rem line box, so
   the page still moved, by less than a pixel. The step above it covers the line. */
.copy-status {
  min-height: 1.5rem;
  margin: 0.5rem 0 0;
  color: var(--muted);
  font-size: 0.875rem;
}