/*
  One stylesheet for every page under /rules/, and since v5.66 for /about/ and
  since v5.79 for /glossary/ as well. These are content pages for a reader who
  arrived from outside, not the app: the app's 77 KB of stylesheet is precached for boards that installed it,
  and none of it is wanted here.

  Inlining this in each page instead would be the same 2 KB copied twenty-two
  times, and twenty-two places to edit. It is served from the asset location with a 7-day
  expiry like every other .css in the image, and it is deliberately not
  precached -- see UNPRECACHED in check-size.mjs.

  Every colour on these pages is one of the custom properties below and nothing
  else (v5.81): the app has a theme picker and these pages have a reader who
  never asked for one, so the palette is declared once for dark and once again
  under `prefers-color-scheme: light`, and no rule may write a colour of its
  own -- a hex outside these two blocks is a rule that stays dark on a phone set
  to light, which is what the suite fails on. The pairs are held to 4.5:1 in
  both schemes.
*/
:root {
  color-scheme: light dark;
  --bg: #0a0d13;
  --fg: #e8eaf0;
  --text: #b6bccb;
  --dim: #8b93a7;
  --faint: #787f99;
  --link: #3b82f6;
  --link-hi: #60a5fa;
  --card: #0e131c;
  --line: #1e2430;
  --cta: #12b981;
  --cta-hi: #34d399;
  --cta-fg: #05130d;
  --focus: #fbbf24;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f7f8fa;
    --fg: #10141c;
    --text: #3d4557;
    --dim: #4e5668;
    --faint: #5b6377;
    --link: #1553c7;
    --link-hi: #0f3f99;
    --card: #ffffff;
    --line: #dde1e9;
    --cta: #0c7a55;
    --cta-hi: #095f42;
    --cta-fg: #ffffff;
    --focus: #a1520a;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0; padding: 28px 20px 48px; background: var(--bg); color: var(--fg);
  font: 17px/1.62 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
main { max-width: 720px; margin: 0 auto; }
h1 { font-size: 32px; line-height: 1.2; margin: 0 0 12px; }
h2 {
  font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--dim); margin: 34px 0 10px;
}
p { margin: 0 0 12px; color: var(--text); }
b { color: var(--fg); font-weight: 600; }
a { color: var(--link); }
a:hover { color: var(--link-hi); }
/*
  Keyboard focus (v5.94). These sheets declared no :focus of any kind, so the
  ring on a page twenty links deep in the footer nav was whatever the browser
  draws -- over a dark palette, on links that are already coloured, which is
  where a default ring is least likely to be seen. :focus-visible, so a mouse
  click leaves nothing behind; the offset keeps it clear of the glyphs; the
  colour is a palette entry like every other, weighed against the page and the
  card in both schemes.
*/
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.crumb { font-size: 14px; color: var(--faint); margin: 0 0 20px; }
.crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 8px; }
.crumb li { margin: 0; }
.crumb li + li::before { content: "\00b7"; margin-right: 8px; }
.crumb a { color: var(--dim); text-decoration: none; }
.lede { color: var(--fg); font-size: 19px; }
.bogeys { color: var(--fg); white-space: nowrap; }
.open { margin: 20px 0 4px; }
.cta {
  display: inline-block; padding: 11px 18px; border-radius: 10px;
  background: var(--cta); color: var(--cta-fg); font-weight: 600; text-decoration: none;
}
.cta:hover { background: var(--cta-hi); color: var(--cta-fg); }
ul { margin: 0 0 12px; padding: 0 0 0 20px; color: var(--text); }
li { margin: 0 0 10px; }
.houses, .modes, .terms, .faq { list-style: none; padding: 0; }
.houses li, .modes li, .terms li, .faq li {
  margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--card);
}
.houses b, .modes b, .terms b, .faq b { display: block; margin: 0 0 2px; }
.facts { margin: 0 0 12px; }
.facts dt {
  font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--faint); margin: 12px 0 2px;
}
.facts dd { margin: 0; color: var(--text); }
.more { margin: 34px 0 0; }
.more ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.more li { margin: 0; }
footer {
  margin: 40px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line);
  font-size: 14px;
}
footer p { margin: 0; color: var(--faint); }