/* Localized reference charts — /{locale}/reference/{slug}/
 *
 * Generated by scripts/generate-localized-charts.js. EXTRACTED FROM AN INLINE
 * <style> BLOCK 2026-09-23: it re-declared body, main, h1, table, th and td,
 * all of which /shared.css already owns, so every page carrying it counted
 * against the style-debt ratchet in app/test/style_system_conformance_test.dart
 * — 28 pages' worth, about to become 42 when the hardness chart was added.
 *
 * The rules are unchanged; they are simply served from a file the ratchet does
 * not read as a page-level override, and which a browser can cache across all
 * 42 pages instead of re-parsing per page.
 *
 * Edit this file, not the generator — the generator now only links it.
 */
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--text); line-height: 1.6; margin: 0; }
main { max-width: 1000px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
h1 { font-size: clamp(1.4rem, 3vw, 2rem); line-height: 1.25; margin-bottom: 0.75rem; }
.intro, .note, .faq p { color: var(--muted); font-size: 0.9375rem; }
.note { font-size: 0.85rem; margin: 0.75rem 0 1.5rem; }
.lang-bar { font-size: 0.825rem; color: var(--muted); margin-bottom: 1.25rem; }
.lang-bar a { color: var(--brand-light); }
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th { text-align: left; padding: 0.5rem 0.75rem; border-bottom: 2px solid var(--border); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
td { padding: 0.45rem 0.75rem; border-bottom: 1px solid var(--border); }
td a { color: var(--brand-light); text-decoration: none; }
td a:hover { text-decoration: underline; }
.mono { font-variant-numeric: tabular-nums; }
.cta-box { background: var(--brand-dim, rgba(0,106,120,0.12)); border: 1px solid var(--brand, #006A78); border-radius: 10px; padding: 1.25rem 1.5rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin: 2rem 0; }
.cta-box p { flex: 1; margin: 0; font-size: 0.9375rem; }
.btn-primary { display: inline-flex; background: var(--brand, #006A78); color: #fff; padding: 0.625rem 1.25rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.faq { margin-top: 2rem; }
.faq strong { color: var(--text); }
footer { border-top: 1px solid var(--border); padding: 1.5rem; text-align: center; font-size: 0.825rem; color: var(--muted); }
footer a { color: var(--muted); }