/*
 * Content-specific styling for the Proteus homepage.
 *
 * Deliberately small. `site.css` owns the layout, the section rhythm, the
 * cards, the buttons and the type scale; this file only covers shapes that are
 * a property of the content rather than of the page — the 14-row fault table
 * and the 5-row guard policy table.
 *
 * Rules this file keeps to:
 *
 *   - Every colour, space, radius and font comes from a `--p-*` token. No
 *     literal colours, and no `--p-*` value is redefined here.
 *   - Class names are prefixed `c-` so nothing here can collide with a
 *     `site.css` class, now or after either file is edited.
 *   - Both themes come free, because the tokens already switch.
 *
 * Any block here is a candidate for deletion: if `site.css` grows a shared
 * class that does the same job, use that and remove the block. It exists
 * because no shared class covered it yet, not because the homepage needs two
 * stylesheets.
 */

/* ---------------------------------------------------------------------------
 * Fault kinds — 14 rows of `name` + one-line signature.
 *
 * A definition list, because that is what it is: the fault name is the term
 * and the signature is the definition. Two columns where there is room, one
 * column stacked below 40rem, so a long signature never crushes the name into
 * a two-character-wide strip.
 * ------------------------------------------------------------------------- */

.c-faults {
  margin: 0;
  border-top: 1px solid var(--p-border);
}

.c-faults > div {
  display: grid;
  grid-template-columns: minmax(14rem, 18rem) 1fr;
  gap: var(--p-space-2) var(--p-space-6);
  align-items: baseline;
  padding: var(--p-space-3) 0;
  border-bottom: 1px solid var(--p-border);
}

.c-faults dt {
  font-family: var(--p-mono);
  font-size: 0.875rem;
  color: var(--p-accent);
  overflow-wrap: anywhere;
}

.c-faults dd {
  margin: 0;
  color: var(--p-muted);
}

@media (max-width: 40rem) {
  .c-faults > div {
    grid-template-columns: 1fr;
    gap: var(--p-space-1);
  }
}

/* ---------------------------------------------------------------------------
 * Guard policies — 5 rows of `name` + behaviour, with the default marked.
 *
 * Same two-column definition shape, plus a chip on the default. The chip is
 * text, not a colour alone: which policy is the default is information, and
 * colour cannot carry information on its own.
 * ------------------------------------------------------------------------- */

.c-policies {
  margin: 0;
  border-top: 1px solid var(--p-border);
}

.c-policies > div {
  display: grid;
  grid-template-columns: minmax(12rem, 16rem) 1fr;
  gap: var(--p-space-2) var(--p-space-6);
  align-items: baseline;
  padding: var(--p-space-3) 0;
  border-bottom: 1px solid var(--p-border);
}

.c-policies dt {
  font-family: var(--p-mono);
  font-size: 0.875rem;
  color: var(--p-text);
  overflow-wrap: anywhere;
}

.c-policies dd {
  margin: 0;
  color: var(--p-muted);
}

.c-policies [data-default] dt {
  color: var(--p-accent);
}

.c-default-chip {
  display: inline-block;
  margin-left: var(--p-space-2);
  padding: 0 var(--p-space-2);
  border: 1px solid var(--p-accent);
  border-radius: var(--p-radius-sm);
  font-family: var(--p-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--p-accent);
  white-space: nowrap;
}

@media (max-width: 40rem) {
  .c-policies > div {
    grid-template-columns: 1fr;
    gap: var(--p-space-1);
  }
}

/* ---------------------------------------------------------------------------
 * Stat row — the 68 / 12 / 56 / 393 figures.
 *
 * `auto-fit` rather than a fixed count so four figures reflow to two-by-two at
 * 768 and one column at 360 without a breakpoint per layout.
 * ------------------------------------------------------------------------- */

.c-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--p-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.c-stat-value {
  display: block;
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--p-accent);
  font-variant-numeric: tabular-nums;
}

.c-stat-label {
  display: block;
  margin-top: var(--p-space-2);
  font-size: 0.875rem;
  color: var(--p-muted);
}

/* ---------------------------------------------------------------------------
 * Inline code inside body copy, emitted by `codeTokens()`.
 *
 * Only a hair of styling: enough that `PutMetricData` reads as a literal, not
 * enough to speckle a paragraph with boxes. A `<pre>` block is `site.css`'s.
 * ------------------------------------------------------------------------- */

.c-code {
  font-family: var(--p-mono);
  font-size: 0.9375em;
  color: var(--p-accent);
  overflow-wrap: anywhere;
}