/* ◈ DOC — the reading surface for the site's document pages (terms, privacy, disclosure).
   Measured 2026-09-03: all three rendered as unstyled Courier New, black on white, while every
   other page on the storefront is Inter and JetBrains Mono on a dark ground. They are linked
   from the footer of every page, so a visitor left the site's world by clicking "Terms".
   The legal TEXT is untouched — only its setting. One stylesheet, three pages, so they cannot
   drift apart the way the bottom bar did.

   IT FOLLOWS ITS SITE'S GROUND. Measured 2026-09-03 across nine surfaces: geneticdesigner.io is
   dark everywhere (luminance 6-10); seedbankinternational.com is LIGHT everywhere (239-255) with
   dark overlay consoles. Porting this sheet unchanged to the light site made clicking "Terms"
   drop the reader out of that site's world — the exact fault it was written to fix, in reverse.
   The palette below is DEFAULTS (dark); the light site overrides the tokens in its own game.css,
   which loads after this file. */
.doc {
  --doc-ink: var(--doc-ink-c, #e9e9f4);
  --doc-mut: var(--doc-mut-c, #a8a3c6);
  --doc-line: var(--doc-line-c, rgba(194, 163, 255, .18));
  --doc-line-2: rgba(255, 255, 255, .12);
  /* the accent themes per storefront: purple here, green on the other one */
  --doc-accent: var(--sbi-accent, #c2a3ff);
  background: var(--doc-bg, #0a0912);
  color: var(--doc-ink);
  font-family: var(--game-sans, "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif);
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
  padding: 34px 20px calc(96px + env(safe-area-inset-bottom, 0px));
  /* room for the fixed bottom bar on a phone and the rail on a desktop */
}
.doc > * { max-width: 62ch; margin-left: auto; margin-right: auto; }

.doc h1 {
  font-family: var(--game-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 19px; font-weight: 500; line-height: 1.35;
  text-transform: uppercase; letter-spacing: .14em;
  color: var(--doc-head, #fff);
  margin: 8px auto 6px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--doc-line);
}
.doc h2 {
  font-family: var(--game-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 13px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .16em;
  color: var(--doc-accent);
  margin: 38px auto 10px;
}
.doc p { margin: 0 auto 14px; }
.doc ul { margin: 0 auto 16px; padding-left: 20px; }
.doc li { margin: 7px 0; }
.doc strong { color: var(--doc-head, #fff); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.doc a { color: var(--doc-accent); text-decoration: none; border-bottom: 1px solid var(--doc-line); }
.doc a:hover, .doc a:focus-visible { color: var(--doc-head, #fff); border-bottom-color: var(--doc-accent); }

/* the "last updated" line — it was 12px #666, which is unreadable on a dark ground */
.doc .doc-meta {
  font-family: var(--game-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--doc-mut);
  margin: 0 auto 26px;
}
.doc .back {
  max-width: 62ch; margin: 40px auto 0; padding-top: 16px;
  border-top: 1px solid var(--doc-line);
  font-family: var(--game-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
}
@media (max-width: 700px) {
  .doc { font-size: 15.5px; padding: 26px 18px calc(100px + env(safe-area-inset-bottom, 0px)); }
  .doc h1 { font-size: 17px; letter-spacing: .1em; }
  .doc h2 { font-size: 12.5px; }
}