/* Jade Seal legal pages (P24). Static, no script, no web fonts: /legal/* is served under
   default-src 'none'; style-src 'self' (tools/deploy.sh), so everything here is this one file and system type.
   Tokens follow the game's (src/00_head.html :root): ink ground, paper text, gold rules, jade links, lacquer seal. */
:root {
  --ink: #0F1115; --ink-deep: #0C0E12; --stone: #1C1F26; --line: #3A3F4B;
  --paper: #EDE4D0; --paper-dim: rgba(237, 228, 208, .78); --mist: #8C909B;
  --jade: #5FB39A; --jade-hi: #8FD6BE; --gold: #E0A94A; --lacquer: #C8433A;
  --ui: "Thonburi", "Leelawadee UI", "Noto Sans Thai", "Sukhumvit Set", system-ui, sans-serif;
  --display: "Noto Serif Thai", "Thonburi", Georgia, serif;
  --measure: 44rem; --tap: 44px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ink-deep); -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0; min-height: 100vh; color: var(--paper); font: 400 1rem/1.75 var(--ui);
  background: radial-gradient(ellipse 90% 60% at 80% 0%, #17221F, transparent 70%), var(--ink-deep);
  overflow-wrap: anywhere;
}
a { color: var(--jade); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--jade-hi); }
a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* the masthead: seal, name, the three documents and the language switch */
.top { border-bottom: 1px solid var(--line); background: rgba(12, 14, 18, .85); }
.top-in { max-width: var(--measure); margin: 0 auto; padding: 12px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.brand { display: inline-flex; align-items: center; gap: 12px; min-height: var(--tap); color: var(--paper); text-decoration: none; font: 700 1.125rem/1.2 var(--display); }
.brand:hover { color: var(--paper); }
.seal { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 6px; background: var(--lacquer); color: #F4E4D8; font: 700 1rem/1 var(--display); transform: rotate(-4deg); box-shadow: inset 0 0 0 2px rgba(244, 228, 216, .5); }
.docs ul, .langs ul { display: flex; flex-wrap: wrap; gap: 0 22px; margin: 0; padding: 0; list-style: none; }
.docs li, .langs li { margin: 0; }
.docs a, .langs a { display: inline-flex; align-items: center; min-height: var(--tap); min-width: var(--tap); color: var(--paper-dim); text-decoration: none; font-size: .9375rem; }
.docs a:hover, .langs a:hover { color: var(--paper); }
.docs a[aria-current="page"] { color: var(--gold); box-shadow: inset 0 -2px 0 var(--gold); }
.langs { margin-left: auto; }
.langs a { font-size: .875rem; }
.docs { width: 100%; border-top: 1px solid rgba(58, 63, 75, .6); }

/* the document */
main { max-width: var(--measure); margin: 0 auto; padding: 8px 16px 64px; }
.doc { padding-top: 32px; }
.doc + .doc { margin-top: 48px; border-top: 1px solid var(--line); }
.eyebrow { margin: 0; color: var(--gold); font: 600 .8125rem/1.4 var(--ui); letter-spacing: .08em; text-transform: uppercase; }
h1 { margin: 6px 0 4px; font: 700 clamp(1.75rem, 1.2rem + 2.4vw, 2.5rem)/1.2 var(--display); color: var(--paper); }
.meta { margin: 0 0 24px; color: var(--mist); font-size: .875rem; }
h2 { margin: 36px 0 8px; padding-left: 12px; border-left: 3px solid var(--gold); font: 600 1.25rem/1.4 var(--display); color: var(--paper); }
p, ul { margin: 0 0 14px; color: var(--paper-dim); }
ul { padding-left: 1.25rem; }
li { margin-bottom: 8px; }
li::marker { color: var(--gold); }
strong { color: var(--paper); font-weight: 600; }
code { font: .875em/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: var(--paper); background: var(--stone); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.note { padding: 12px 16px; border: 1px solid rgba(224, 169, 74, .35); border-radius: 8px; background: rgba(224, 169, 74, .06); color: var(--paper); }

.foot { max-width: var(--measure); margin: 0 auto; padding: 20px 16px 40px; border-top: 1px solid var(--line); color: var(--mist); font-size: .875rem; }
.foot p { margin: 0; color: var(--mist); }
.foot a { display: inline-flex; align-items: center; min-height: var(--tap); }

@media print {
  html, body { background: #fff; color: #000; }
  .top, .foot { display: none; }
  p, ul, h1, h2, strong, code { color: #000; }
}