/* =========================================================
   Shared styles for the standalone legal pages (issue #35 impeccable
   critique/audit — P0 finding: these pages used a hand-picked --teal /
   system-font palette with zero relationship to DESIGN.md, "Departure
   Fever"). This is a whole-screen conversion per that file's own migration
   rule ("convert a screen whole, never half").

   These pages don't (and per CLAUDE.md, shouldn't) load css/style.css —
   they stay self-contained, no build step, view-source-able on their own.
   So every custom property below is a COPY of the app's real --df-* /
   --vn-* token values (css/style.css's own "converted dense screen" family
   — the same one itinerary/expenses/admin-adjacent panels use, not the
   landing page's louder --lp-* poster family, which is a better match for
   a document meant to be read for minutes at a stretch than the landing
   page's saturated sunlight-apricot hero ground would be), never re-picked
   locally. This is The Aliased Ink Rule, applied the only way a file with
   no cascade access to css/style.css's real tokens can apply it: verbatim
   copy plus a paper trail. If the source values in css/style.css ever
   move, these must move with them — same "keep in sync" trade-off
   index.html's own inline theme-boot script already accepts against
   js/utils.js's real implementation.

   Font loading, dark-mode contrast, and the language/theme-sync JS all
   live one level up from here; this file is presentation only.
   ========================================================= */

:root {
  /* css/style.css:79 — lets data-theme (below) pin the scheme the same way
     the app's own :root does; without this, light-dark() below only ever
     tracks the OS. */
  color-scheme: light dark;

  /* css/style.css:335-338 (--df-ground/-panel/-ink/-ink-soft) */
  --legal-ground: light-dark(#ffe3c4, #0c1410);
  --legal-panel: light-dark(#fff7ec, #151d17);
  --legal-ink: light-dark(#101a14, #ffeeda);
  --legal-ink-soft: light-dark(#4a5851, #9aa79f);
  --legal-hair: light-dark(rgba(16, 26, 20, 0.16), rgba(255, 238, 218, 0.18));

  /* css/style.css:80 (--vn-teal) / :152 (--surface-2). --legal-brand-fg is
     the exact fix for the critique's confirmed P1: white-on-mint in dark
     mode measured 2.36:1, failing WCAG AA. --surface-2 is the app's own
     answer to that same problem class (issue #432, "The Mint Flip Rule") —
     #242424 dark ink on the bright mint dark-mode fill, not literal white. */
  --legal-brand: light-dark(#10702A, #54ff82);
  --legal-brand-fg: light-dark(#ffffff, #242424);

  /* css/style.css:352 (--vn-amber) / DESIGN.md's Amber Ink — the
     text-safe variant, not the fill/border-only --vn-amber itself, used
     for the placeholder box's border+label since that's text-adjacent,
     not a filled chip. */
  --legal-amber-ink: #8A5610;
  --legal-amber-tint: light-dark(#FAEEDA, rgba(232,163,61,0.16));

  /* css/style.css:297,309 (--topbar-bg/--topbar-accent) — Field Green,
     pinned flat in both themes, unlike --legal-brand above. Reserved for
     the one full-bleed-of-green surface on these pages: the brand strip,
     matching the app's own real top bar and the landing page's nav —
     DESIGN.md: "the page opens and closes on this exact green, which is
     also the colour a visitor meets in the app's top bar one click
     later; that continuity is on purpose." Never use this for anything
     pressable — that's --legal-brand's job. */
  --legal-field-green: #10702a;
  --legal-field-fg: #ffffff;

  /* css/style.css:369-371 */
  --legal-display: 'Bricolage Grotesque Variable', 'Arial Black', Impact, sans-serif;
  --legal-sans: 'Figtree Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --legal-mono: 'Martian Mono Variable', ui-monospace, 'SF Mono', Menlo, monospace;

  /* css/style.css:378-379. Pill (999px) isn't in the --df-* set because
     DESIGN.md's button component is pill at every density — only card/stub
     radii compress. */
  --legal-radius-pill: 999px;
  --legal-radius-stub: 12px;
  --legal-radius-card: 14px;

  /* css/style.css:386-389 */
  --legal-press: 4px 4px 0 var(--legal-ink);
  --legal-press-large: 5px 5px 0 var(--legal-ink);
  --legal-press-hover: 2px 2px 0 var(--legal-ink);
  --legal-press-active: 0 0 0 var(--legal-ink);

  /* css/style.css:179,234-235 */
  --legal-tap-min: 44px;
  --legal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --legal-dur-feedback: 120ms;
}

/* css/style.css:419-420 — the explicit Light/Dark/System override. Without
   this, these pages only ever answer to the OS, which is the exact P1 the
   critique flagged: a user's deliberate in-app choice went unheard the
   moment they left the app for a legal page. legal-shared.js's
   applyLegalTheme() sets data-theme to match the app's own tbTheme
   preference before first paint. */
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: clamp(28px, 6vw, 56px) clamp(20px, 5vw, 40px) 96px;
  max-width: 840px;
  margin-inline: auto;
  background: var(--legal-ground);
  color: var(--legal-ink);
  font-family: var(--legal-sans);
  /* A Read-mode document, not a dense in-app panel — DESIGN.md's
     bodyDense (14px) tier is for screens packed with UI chrome; this is
     the opposite, minutes of continuous reading, so it takes the poster's
     own body size/line-height (1rem/1.6) instead. */
  font-size: 1rem;
  line-height: 1.65;
}

/* ---------- Brand strip ----------
   The one brand-continuity touchpoint on these pages, restored after
   review — a static Field Green mark, not the app's real top bar (that
   one needs a live session for its bell/account menu, which a logged-out
   visitor reading a privacy policy may not have; see the commit message
   for why it isn't reproduced here). Purely decorative and a link home,
   nothing else — no notification state, no account state. Language-
   agnostic ("Lancong" is the product name in both languages, per
   PRODUCT.md's Brand Commitments), so it sits once, outside both
   [data-lang] panels, unlike the lang toggle beside it. */
.legal-brandbar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--legal-field-green);
  color: var(--legal-field-fg);
  padding: 9px 18px;
  border: 2px solid var(--legal-ink);
  border-radius: var(--legal-radius-pill);
  box-shadow: var(--legal-press);
  font-family: var(--legal-sans);
  font-weight: 800;
  font-size: 0.9375rem;
  text-decoration: none;
  margin: 0 0 24px;
  transition: transform var(--legal-dur-feedback) var(--legal-ease), box-shadow var(--legal-dur-feedback) var(--legal-ease);
}
/* Route Mark, small cut, on the Field Green strip: all apricot, the dark-ground variant (DESIGN.md). */
.legal-brand-mark { width: 1.35em; height: 1.35em; flex-shrink: 0; fill: #ffe3c4; }
.legal-brandbar:hover { transform: translate(2px, 2px); box-shadow: var(--legal-press-hover); }
.legal-brandbar:active { transform: translate(4px, 4px); box-shadow: var(--legal-press-active); }

/* Prose measure — DESIGN.md caps body copy by content type (34-62ch); this
   is the longest-form content in the system, so it takes the top of that
   range, not the container's own 840px width, which exists for the ToC/
   header row to breathe rather than for line length. */
p, li { max-width: 66ch; }

[data-lang] p:first-child { margin-top: 0; }

h1 {
  font-family: var(--legal-display);
  font-weight: 800;
  /* Restrained relative to the landing hero's clamp(2.5rem,10vw,4.5rem) —
     DESIGN.md's dense-scale note: Bricolage stays on headings but
     compresses at working-screen scale. This is the page's one headline,
     sized for a document title, not a marketing hero. */
  font-size: clamp(1.65rem, 4.4vw, 2.35rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--legal-space-sm, 6px);
  text-wrap: balance;
}

.legal-meta {
  font-family: var(--legal-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
  margin: 0 0 28px;
}

h2 {
  font-family: var(--legal-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.02em;
  /* Sentence case, not uppercase — DESIGN.md's Uppercase Ceiling Rule:
     uppercase stops at headline tier (h1 above); title tier (this) is
     sentence case. */
  margin: 2.2rem 0 0.9rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--legal-hair);
  scroll-margin-top: 20px;
}
[data-lang] > h2:first-of-type { border-top: none; padding-top: 0; margin-top: 1.6rem; }

a { color: var(--legal-brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* The one focus-ring rule for the whole page — matches css/landing.css's
   own pattern exactly (a single high-level :focus-visible selector, not a
   per-component outline), which is also what closes the critique's P3
   finding that only the toggle buttons had a styled ring while plain links
   fell back to the browser default. */
:focus-visible {
  outline: 3px solid var(--legal-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

ul { padding-left: 1.3rem; margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }

/* ---------- Language toggle ----------
   Sits inside each language panel, between that panel's own <h1>/version
   line and its first <h2> — one instance per panel, not a single shared
   control above both (see legal-shared.js's own header comment for why
   duplicating the markup is fine here). */
.lang-switch {
  display: inline-flex;
  gap: 0;
  border: 2px solid var(--legal-ink);
  border-radius: var(--legal-radius-pill);
  overflow: hidden;
  box-shadow: var(--legal-press);
  margin: 4px 0 28px;
}
.lang-switch button {
  font-family: var(--legal-sans);
  font-weight: 700;
  font-size: 0.8125rem;
  padding: 9px 16px;
  min-height: var(--legal-tap-min);
  border: 0;
  background: var(--legal-panel);
  color: var(--legal-ink);
  cursor: pointer;
  transition: background var(--legal-dur-feedback) var(--legal-ease), color var(--legal-dur-feedback) var(--legal-ease);
}
.lang-switch button + button { border-left: 2px solid var(--legal-ink); }
/* Pressed state carries weight, not only fill, so the P1 contrast fix
   above isn't the only signal a low-vision reader gets — confirmed by the
   critique's own audit as already true, kept deliberately. */
.lang-switch button[aria-pressed="true"] {
  background: var(--legal-brand);
  color: var(--legal-brand-fg);
  font-weight: 800;
}
.lang-switch button:hover:not([aria-pressed="true"]) { background: var(--legal-hair); }

/* ---------- Placeholder (unresolved content) ---------- */
.placeholder {
  background: var(--legal-amber-tint);
  border: 2px dashed var(--legal-amber-ink);
  color: var(--legal-amber-ink);
  padding: 2px 8px;
  border-radius: 6px;
  font-style: italic;
  font-weight: 600;
}

/* ---------- Identity / entity block (terms.html) ---------- */
.identity {
  background: var(--legal-panel);
  border: 2px solid var(--legal-ink);
  border-radius: var(--legal-radius-card);
  box-shadow: var(--legal-press-large);
  padding: 20px 22px 22px;
  margin: 1.2rem 0 1.6rem;
  font-size: 0.9375rem;
}
.identity p { margin: 0.25rem 0; max-width: none; }

/* ---------- Cookie-category table (cookies.html) ---------- */
.tablewrap {
  overflow-x: auto;
  margin: 1rem 0 1.6rem;
  border: 2px solid var(--legal-ink);
  border-radius: var(--legal-radius-card);
  box-shadow: var(--legal-press-large);
}
table { border-collapse: collapse; width: 100%; font-size: 0.875rem; min-width: 560px; background: var(--legal-panel); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--legal-hair); vertical-align: top; max-width: none; }
th { font-family: var(--legal-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--legal-ink-soft); font-weight: 700; }
tbody tr:last-child td { border-bottom: none; }

footer.links {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 2px solid var(--legal-hair);
  font-family: var(--legal-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--legal-ink-soft);
}
footer.links a { color: var(--legal-ink-soft); }
footer.links a:hover { color: var(--legal-brand); }

[hidden] { display: none !important; }