/* ============================================================
   rule.css - the 162 pages under /rule/.

   Every one of them carried this byte-identical block inline: 2.3 kB x 162 = 380 kB of the
   same CSS, shipped 162 times and cached zero times. It is one file now.

   WHY IT IS NOT IN rot.css. That was tried in v3.7 and reverted, and the reason still stands:
   these selectors are ordinary names - .ey, .cta, .rel, h1, p - that 92 other pages also use
   with their OWN inline definitions. A global rule would hand those pages properties their
   own CSS never sets, and flip which declaration wins against tool.css. Only .ruleline, .seq
   and .fails could move, because they appear on rule pages and nowhere else.

   A SEPARATE SHEET THAT ONLY RULE PAGES LINK has neither problem. No other page loads it, so
   no other page can be reached by it, whatever the names are.

   ORDER MATTERS: this is linked immediately AFTER rot.css and before the per-page <style>
   that sets --accent. That is the same cascade position the inline block used to occupy, so
   every tie between this sheet and rot.css resolves exactly as it did before.

   Generated pages only. build-registry.py emits the <link>; do not add page-specific rules
   here, and do not import it into a hand-authored page.
   ============================================================ */

*{ box-sizing:border-box; }
body{ margin:0; background:radial-gradient(1200px 600px at 75% -10%,var(--bg-rad-1) 0%,transparent 55%),radial-gradient(900px 500px at 0% 0%,var(--bg-rad-2) 0%,transparent 50%), var(--ink); color:var(--text); font-family:'Inter',system-ui,sans-serif; line-height:1.6; -webkit-font-smoothing:antialiased; }
.wrap{ max-width:720px; margin:0 auto; padding:30px 20px 70px; }
.crumb{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted-2); margin-bottom:22px; }
h1{ font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:26px; line-height:1.25; margin:0 0 16px; letter-spacing:-.015em; }
h2{ font-family:'Space Grotesk',sans-serif; font-weight:600; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin:26px 0 9px; }
p{ font-size:14px; color:var(--muted); margin:0 0 12px; }
.crumb a{ color:var(--muted); text-decoration:none; }
.crumb a:hover{ color:var(--text); }
.ey{ display:flex; align-items:center; gap:9px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:10px; }
.ey .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); flex:none; }
.ey .no{ margin-left:auto; color:var(--muted-2); letter-spacing:.06em; font-weight:600; }
.cta{ display:inline-flex; align-items:center; gap:8px; margin:6px 0 4px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; text-decoration:none; color:var(--accent); border:1px solid var(--accent); border-radius:9px; padding:9px 14px; }
.cta:hover{ background:color-mix(in srgb, var(--accent) 12%, transparent); }
.rel{ display:grid; gap:8px; margin:10px 0 0; padding:0; list-style:none; }
.rel a{ display:block; text-decoration:none; padding:11px 13px; border-radius:10px; border:1px solid var(--line); background:var(--panel); }
.rel a:hover{ border-color:var(--accent); }
.rel .t{ display:block; font-size:13.5px; color:var(--text); font-weight:600; }
.rel .s{ display:block; font-size:12px; color:var(--muted); margin-top:2px; }
footer{ margin-top:34px; padding-top:16px; border-top:1px solid var(--line); font-size:11px; color:var(--muted-2); }
footer a{ color:var(--muted); }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }