/* Rijjin legal pages — shared stylesheet.

   Theme follows the OS only (prefers-color-scheme). There is no in-page toggle,
   so no [data-theme] overrides are needed: light tokens sit on bare :root and the
   dark block redefines them. */

:root {
  --bg: #ffffff;
  --surface: #f6f8fa;
  --surface-2: #eef1f5;
  --text: #1a1d21;
  --muted: #5c6470;
  --border: #e2e5ea;
  --accent: #316ec3;
  --warm: #e66e0d;
  --link: #2860b4;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14171a;
    --surface: #1c2024;
    --surface-2: #232830;
    --text: #e8eaed;
    --muted: #9aa3ad;
    --border: #2c3238;
    --accent: #64a8ee;
    --warm: #f38a27;
    --link: #7cb8f2;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* CJK pages get a CJK-aware stack and a little more leading. */
body:lang(ja), body:lang(zh), body:lang(ko) {
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", YuGothic, "Noto Sans JP",
    "Segoe UI", Roboto, sans-serif;
  line-height: 1.9;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand { display: inline-flex; align-items: center; margin-right: auto; }
.brand img { height: 30px; width: auto; display: block; }

/* ---------- language picker ---------- */

/* Mirrors the Flutter LanguagePicker in lib/main.dart: same 32px pill, same
   Material glyphs, and a menu card standing in for PopupMenuButton — so the
   control is identical whichever page you land on.

   Built by legal.js from its LANGS registry. The bare link inside the button is
   what shows if the script has not run. */

.lang-picker { position: relative; display: inline-block; }

.lang-picker .lang-button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: 32px;
  padding: 0 8px;
  border: 1px solid var(--border);
  /* Mirrors kCardRadius in the app (glaze themes/common.dart). Was 999px; the picker
     stands beside the site's own header action, and the two must round alike. */
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

.lang-picker .lang-button:hover {
  background: var(--surface-2);
  border-color: color-mix(in srgb, var(--border) 55%, var(--muted));
}

.lang-picker .lang-button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.lang-picker .glyph { flex: none; fill: var(--muted); }

/* The endonym still lives in the DOM for screen readers and `aria-label`
   fallbacks; the button shows the globe and caret only, mirroring the app. */
.lang-picker .lang-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- menu (the PopupMenuButton stand-in) ---- */

.lang-picker .lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: var(--surface);
  border-radius: 12px;
  /* Material elevation 8 — the menu is lifted by shadow, not outlined. */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .30), 0 4px 8px 3px rgba(0, 0, 0, .15);
  z-index: 40;
}

.lang-picker .lang-menu[hidden] { display: none; }

.lang-picker .lang-menu li { margin: 0; }

.lang-picker .lang-menu button {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
}

.lang-picker .lang-menu button:hover,
.lang-picker .lang-menu button:focus-visible {
  background: color-mix(in srgb, var(--text) 8%, transparent);
  outline: none;
}

/* Fixed leading slot, matching the 22px SizedBox in the Flutter menu so the
   labels line up whether or not a row is the current one. */
.lang-picker .lang-menu .tick {
  flex: none;
  width: 22px;
  height: 16px;
  fill: var(--accent);
}

.lang-picker .lang-menu .tick.empty { visibility: hidden; }

/* ---------- layout ---------- */

main {
  max-width: 760px;
  margin: 0 auto;
  padding-block: 48px 80px;
  padding-inline: 20px;
}

.doc-title { font-size: 2rem; line-height: 1.25; margin: 0 0 8px; letter-spacing: -.02em; }
.effective-date { margin: 0 0 32px; color: var(--muted); font-size: .9rem; }

.notice {
  margin: 0 0 36px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--warm);
  border-radius: 6px;
  font-size: .9rem;
  color: var(--muted);
}

.notice p { margin: 0; }
.notice p + p { margin-top: 8px; }

nav.toc {
  margin: 0 0 44px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

nav.toc h2 {
  margin: 0 0 10px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}

nav.toc h2::after { content: none; }
nav.toc ol { margin: 0; padding-left: 1.3em; }
nav.toc li { margin: 5px 0; font-size: .94rem; }

h2 {
  margin: 44px 0 14px;
  font-size: 1.28rem;
  line-height: 1.35;
  letter-spacing: -.01em;
  scroll-margin-top: 80px;
}

h2::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  margin-top: 10px;
  background: var(--warm);
  border-radius: 2px;
}

p { margin: 0 0 18px; }
ul { margin: 0 0 18px; padding-left: 1.4em; }
li { margin: 10px 0; }
li > strong:first-child { color: var(--text); }

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.legalese { font-size: .88rem; color: var(--muted); line-height: 1.75; }

/* Verbatim all-caps statutory disclaimers. Full text colour, so they stay as
   conspicuous as the source intends; only size and leading are relaxed. */
.disclaimer { font-size: .84rem; line-height: 1.85; letter-spacing: .005em; }

address {
  font-style: normal;
  padding: 16px 20px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  margin: 0 0 18px;
}

/* ---------- footer ---------- */

.site-footer {
  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: .86rem;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
}

.site-footer .spacer { margin-right: auto; }

@media (max-width: 520px) {
  body { font-size: 16px; }
  main { padding-block: 32px 56px; }
  .doc-title { font-size: 1.6rem; }
  .brand img { height: 26px; }
}

@media print {
  .site-header, nav.toc, .lang-picker { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  main { max-width: none; }
}