/* Shared chrome for every guide page (all languages).
   The landing page deliberately keeps its own inline CSS — it is a single-file
   scroll experience with zero external requests. Guides are ordinary articles,
   so one small cached stylesheet across ~12 pages beats 12 inline copies.
   Tokens mirror lib/theme/palette.ts / tailwind.config.ts. */

:root {
  color-scheme: dark;
  /* Brand amber (PALETTE.accent). These pages are dark-only — declared above —
     so the raw accent FILL is safe as text here: 10.1:1 on --ink, 9.4:1 on
     --panel. That is why there is no accent-ink counterpart the way the app
     needs one for its light scheme (sw-accent-ink exists because the accent
     lands at 2.1:1 on cream). Use --accent for amber TEXT and hairlines. */
  --accent:#F3B411;
  /* COIN_GRADIENTS.gold — light top, deep bottom. Only for gold FILLS that
     carry their own dark ink: the CTA pill, the brand mark. */
  --gold-hi:#F9D96A; --gold-lo:#D6A81C;
  --ink:#131216; --cream:#F4EDDF;
  --fg:#EAE6DF; --fg2:#97918a;
  --hair:#2a2724; --panel:#1c1a19;
}
* { box-sizing: border-box; }
body {
  margin:0; background:var(--ink); color:var(--fg);
  font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap { max-width:740px; margin:0 auto; padding:36px 20px 80px; }

/* Masthead + language switcher */
.brand { display:inline-flex; align-items:center; gap:10px; margin-bottom:22px; text-decoration:none; }
.brand span { color:var(--cream); font-weight:700; font-size:18px; }
.langs { display:flex; gap:14px; margin-bottom:20px; font-size:12.5px; }
.langs a { color:var(--fg2); text-decoration:none; text-transform:uppercase; letter-spacing:.08em; }
.langs a:hover { color:var(--accent); }
.langs a[aria-current] { color:var(--accent); }
.crumb { font-size:13px; color:var(--fg2); margin:0 0 18px; }
.crumb a { color:var(--fg2); }

/* Type */
h1 { color:var(--cream); font-size:34px; line-height:1.2; margin:0 0 12px; letter-spacing:-0.02em; }
.standfirst { color:var(--fg2); font-size:18px; line-height:1.6; margin:0 0 8px; }
.updated { color:#6f6a64; font-size:13px; margin:0 0 34px; }
h2 { color:var(--accent); font-size:21px; margin:40px 0 10px; letter-spacing:-0.01em; }
h3 { color:var(--cream); font-size:17px; margin:28px 0 6px; }
p { margin:0 0 14px; }
a { color:var(--accent); }
ul, ol { padding-left:22px; }
li { margin:6px 0; }
strong { color:var(--cream); }
code { background:#201e1c; padding:1px 6px; border-radius:4px; font-size:14px; }

/* Equations */
.eq {
  background:var(--panel); border:1px solid var(--hair); border-radius:9px;
  padding:14px 16px; margin:16px 0; color:var(--cream);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; line-height:1.9;
  overflow-x:auto;
}

/* Tables scroll rather than pushing the page sideways */
table { border-collapse:collapse; width:100%; margin:16px 0; font-size:14.5px; display:block; overflow-x:auto; }
th, td { border:1px solid #35322d; padding:9px 11px; text-align:left; vertical-align:top; }
th { color:var(--cream); background:var(--panel); font-weight:600; }

/* Callouts: safety (never a green light), key takeaway, care (help-seeking) */
.safety { border:1px solid #5c3a2e; background:#241a17; border-radius:10px; padding:16px 18px; margin:26px 0; }
.safety strong { color:#f0a68a; }
.key { border-left:3px solid var(--gold-lo); background:var(--panel); border-radius:0 8px 8px 0; padding:14px 18px; margin:24px 0; }
.care { border:1px solid #3b4f3a; background:#181f18; border-radius:10px; padding:16px 18px; margin:26px 0; }
.care strong { color:#a8d0a0; }

.refs { font-size:14px; color:var(--fg2); }
.refs li { margin:10px 0; }

/* Call to action */
.cta { border:1px solid var(--hair); background:var(--panel); border-radius:12px; padding:22px; margin:40px 0 0; }
.cta h2 { margin-top:0; }
.btn {
  display:inline-block; background:linear-gradient(180deg,var(--gold-hi),var(--gold-lo));
  color:#2E1F27; font-weight:700; text-decoration:none;
  padding:11px 20px; border-radius:9px; margin-top:8px;
}
.btn:active { opacity:.85; }

.related { margin:38px 0 0; padding-top:24px; border-top:1px solid var(--hair); }
.related ul { list-style:none; padding:0; }
.related li { margin:10px 0; }

/* Hub cards */
.cards { list-style:none; padding:0; margin:0; }
.cards li { margin:0 0 16px; }
.card {
  display:block; border:1px solid var(--hair); background:var(--panel);
  border-radius:12px; padding:20px 22px; text-decoration:none;
  transition:border-color .18s ease, transform .18s ease;
}
.card:hover, .card:focus-visible { border-color:var(--gold-lo); transform:translateY(-2px); }
.card h3 { color:var(--cream); font-size:19px; margin:0 0 7px; letter-spacing:-0.01em; }
.card p { color:var(--fg2); font-size:15px; margin:0; }

/* FAQ disclosure */
details { border-bottom:1px solid var(--hair); padding:12px 0; }
summary { color:var(--cream); cursor:pointer; font-weight:600; min-height:24px; }
summary:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:3px; }
details p { margin:10px 0 0; }

footer { margin-top:44px; padding-top:22px; border-top:1px solid var(--hair); color:var(--fg2); font-size:13.5px; }
footer nav { display:flex; flex-wrap:wrap; gap:20px; margin-top:12px; }
footer nav a { color:var(--fg2); font-size:12.5px; text-decoration:none; }
footer nav a:hover { color:var(--accent); }

@media (prefers-reduced-motion: reduce) {
  .card { transition:none; }
  .card:hover, .card:focus-visible { transform:none; }
}