/* The rules route. Its own stylesheet, loaded after web/event-grid.css.
 *
 * WHAT THIS FILE DOES NOT DO: define a palette, a face, a ground or a topbar.
 * Those come from event-grid.css, read-only, exactly as docs.css and kol.css
 * take them.
 *
 * AND IT DOES NOT DEFINE THE PANEL EITHER, which is the one way this file
 * differs from docs.css. Every `.think*` rule still lives in event-grid.css,
 * where it was written, because four of them are shared selectors whose other
 * half is still rendered by the grid:
 *
 *   .think, .goat                              isolation
 *   .think::before, .goat::before              the travelling ring (ships off)
 *   .think-step::before, .goat-card::before    the step/card gleam
 *   .panel, .think                             the 699px padding
 *
 * Splitting those to bring the panel here would copy ~96 lines of decorative
 * CSS into a second file -- and the stylesheet says in as many words that the
 * ring is "shared by both panels rather than copied into each". Fifteen tests
 * also read those rules out of event-grid.css by name. The markup moved; the
 * rules that draw it are shared and stayed. This file is additive only.
 */

/* ---- the note that came with the block ---------------------------------- */

/* THE TRAP p.rule-note'S OWN COMMENT PREDICTED, sprung by the move.
 *
 * That rule is `p.rule-note` at (0,1,1) and it says so directly: a bare class
 * "loses to any `<container> p` body-copy rule, which is how the first cut of
 * this rendered at 15px in --text-muted -- the size and ink it exists NOT to
 * be." On the grid it sat in a .goat-bubble, which has no such rule. Here it
 * sits in .think-copy, which does: `.think-copy p:not(.think-lede)` is (0,2,1)
 * and wins, so the note arrived as body copy -- 1em, --text-muted, the exact
 * failure described.
 *
 * `.rules .think-copy p.rule-note` is (0,3,1), so this wins outright rather
 * than on load order. Source order would in fact settle a (0,2,1) tie in this
 * file's favour, but a trap that has already caught someone once should not be
 * held off by which <link> comes second.
 *
 * The values are p.rule-note's own, not new ones -- only the margin differs,
 * and only because this note now follows a 4-card list instead of the last
 * line of a bubble. 12px of air read as attached to the final card. */
.rules .think-copy p.rule-note {
  margin: 28px 0 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: var(--text-subtle);
}

/* ---- the page ----------------------------------------------------------- */

/* THE PANEL BRINGS ITS OWN TOP CLEARANCE and this page does not add any.
 * `.think` carries `margin: 96px auto 0` -- 88px of fixed topbar plus 8 -- and
 * it was the first element on the grid for exactly that reason. It is the first
 * element here too, so the value still means what it says and is left alone.
 * The grid's .hero has taken a copy of it now that the vault leads that page.
 *
 * The bottom is the only thing the move actually changed. On the grid the panel
 * was followed by the vault, so it needed no air under it; standing alone, the
 * body's 64px bottom padding is all there is between the last step card and the
 * end of the document, and at that point the page looks truncated rather than
 * finished. This is the panel's own top clearance mirrored underneath, so the
 * one block on the page sits in equal air. */
.rules {
  margin-bottom: 96px;
}