/* Shared stylesheet for the generated rule pages.
   A real stylesheet rather than 22 copies of an inline <style>: these pages are
   machine-written, and duplicating the CSS into each one would mean regenerating
   every page to change a colour. Same tokens as the rest of the site. */
:root{
  --canvas:#0F1319; --surface:#151A22; --surface2:#1A202A;
  --ink:#E8ECF2; --muted:#8A93A6; --line:rgba(255,255,255,0.08); --line-bright:rgba(255,255,255,0.18);
  --accent:#3B82F6; --verify:#10B981; --warn:#F59E0B;
  --s-2:clamp(.74rem, .72rem + .1vw, .8rem); --s-1:clamp(.9rem, .87rem + .14vw, .98rem);
  --s0:clamp(1.02rem, .96rem + .28vw, 1.18rem); --s1:clamp(1.2rem, 1.08rem + .58vw, 1.5rem);
  --s2:clamp(1.7rem, 1.25rem + 1.9vw, 2.6rem);
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--canvas);color:var(--ink);
  font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:var(--s0);line-height:1.6;letter-spacing:-.008em;-webkit-font-smoothing:antialiased}
.w{max-width:800px;margin:0 auto;padding:0 24px}
h1,h2{font-family:"Space Grotesk",sans-serif;font-weight:700;letter-spacing:-.03em;
  line-height:1.12;text-wrap:balance}
a{color:var(--accent)}

nav{border-bottom:1px solid var(--line)}
nav .w{display:flex;align-items:center;justify-content:space-between;height:62px;gap:20px;max-width:960px}
.logo{font-family:"Space Grotesk",sans-serif;font-size:1.18rem;font-weight:700;
  color:var(--ink);text-decoration:none}
.logo span{color:var(--muted)}
.navlinks{display:flex;gap:20px;font-family:"Space Mono",monospace;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.08em}
.navlinks a{color:var(--muted);text-decoration:none}
.navlinks a:hover{color:var(--ink)}

main{padding:clamp(30px,5vw,56px) 0 clamp(40px,6vw,70px)}
.crumb{font-family:"Space Mono",monospace;font-size:var(--s-2);color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:16px}
.crumb a{color:var(--muted)}
h1{font-size:var(--s2);margin-bottom:16px}
.answer{font-size:var(--s1);color:var(--ink);line-height:1.5;margin-bottom:18px}

/* The verification stamp. Above the table on purpose — it is the reason to keep
   reading, not a footnote to it. */
.checked{font-family:"Space Mono",monospace;font-size:var(--s-2);color:var(--muted);
  background:var(--surface);border:1px solid var(--line);border-left:2px solid var(--verify);
  border-radius:2px;padding:11px 14px;margin-bottom:26px;letter-spacing:.02em}

table{width:100%;border-collapse:collapse;background:var(--surface2);
  border:1px solid var(--line-bright);border-radius:3px;margin-bottom:18px;
  display:block;overflow-x:auto}
caption{font-family:"Space Mono",monospace;font-size:var(--s-2);color:var(--muted);
  text-transform:uppercase;letter-spacing:.08em;text-align:left;padding:14px 18px;
  border-bottom:1px solid var(--line)}
tbody{display:table;width:100%}
th,td{text-align:left;vertical-align:top;padding:12px 18px;border-top:1px solid var(--line);
  font-size:var(--s-1);font-weight:400}
tbody tr:first-child th,tbody tr:first-child td{border-top:0}
th{font-family:"Space Mono",monospace;font-size:var(--s-2);color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;width:210px;line-height:1.5}
@media(max-width:620px){
  tbody,tr,th,td{display:block;width:auto}
  th{padding-bottom:2px;border-top:1px solid var(--line)}
  td{padding-top:0;border-top:0}
}
/* A quotation is the authority speaking. Styled as one so nobody reads it as a
   number this site worked out. */
q{display:block;quotes:none;border-left:2px solid var(--line-bright);padding-left:12px;
  color:var(--muted);font-style:italic}
code{display:block;font-family:"Space Mono",monospace;font-size:var(--s-2);
  background:var(--canvas);border:1px solid var(--line);border-radius:2px;
  padding:9px 11px;line-height:1.5;margin-bottom:6px;white-space:pre-wrap;word-break:break-word}
.ok{display:block;font-size:var(--s-2);color:var(--verify);margin-bottom:8px}
.gap{display:block;font-size:var(--s-2);color:var(--warn);line-height:1.5}

.note{font-size:var(--s-2);color:var(--muted);max-width:70ch;margin-bottom:30px}

.cta{padding:20px 22px;background:var(--surface);border:1px solid var(--line-bright);
  border-left:2px solid var(--accent);border-radius:3px;margin-bottom:32px}
.cta b{display:block;font-family:"Space Grotesk",sans-serif;font-size:var(--s1);margin-bottom:6px}
.cta p{font-size:var(--s-1);color:var(--muted);margin-bottom:14px}
.btn{display:inline-block;font-family:"Space Mono",monospace;font-size:var(--s-2);
  text-transform:uppercase;letter-spacing:.09em;font-weight:700;padding:13px 24px;
  border-radius:2px;background:var(--accent);color:#fff;border:1px solid var(--accent);
  text-decoration:none}
.btn:hover{background:#2f74e0}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.related{margin-bottom:28px}
.related h2{font-size:var(--s1);margin-bottom:10px}
.related ul{list-style:none;display:grid;gap:7px}
.related li{font-size:var(--s-1);padding-left:14px;position:relative}
.related li::before{content:"→";position:absolute;left:0;color:var(--accent)}

.disclaimer{border-top:1px solid var(--line);padding-top:20px;font-size:var(--s-2);
  color:var(--muted);max-width:76ch;line-height:1.6}
footer{border-top:1px solid var(--line);padding:22px 0;font-size:var(--s-2);color:var(--muted)}
footer .w{max-width:960px}
footer a{color:inherit}