/* The static pages: methodology, right of reply, privacy. Same tokens as the front page. */
:root {
  --ink: #101418; --muted: #5c6672; --paper: #fff; --sub: #f4f6f8;
  --line: #dfe4e9; --accent: #123a6b; --on-accent: #fff;
}
@media (prefers-color-scheme: dark) {
  :root { --ink:#e8ecf1; --muted:#95a1af; --paper:#0e1216; --sub:#161c23;
          --line:#252d36; --accent:#7ea9dd; --on-accent:#0e1216; }
}
* { box-sizing: border-box; }
body { margin:0; padding:1.5rem 1rem 4rem; background:var(--paper); color:var(--ink);
       font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif; }
.family-bar, main, footer { max-width: 760px; margin: 0 auto; }
/* Family bar (civic-ui FamilyBar, native markup): hub link, tool name, status, language. */
.family-bar { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem 1rem;
              padding-bottom:1rem; border-bottom:1px solid var(--line); margin-bottom:1.5rem; }
.family-bar a { display:inline-flex; align-items:center; min-height:44px; text-decoration:none; }
.hub { color:var(--ink); font-weight:600; }
.home { font-weight:700; color:var(--accent); }
.status-badge { display:inline-flex; align-items:center; gap:.35rem; padding:.1rem .55rem;
  border-radius:999px; font-size:.8rem; font-weight:600; color:#146c2e; background:#e6f4ea; }
.status-badge::before { content:""; width:.5rem; height:.5rem; border-radius:50%; background:currentColor; }
@media (prefers-color-scheme: dark) { .status-badge { color:#7fd69a; background:#14261a; } }
.family-bar .lang-toggle { margin-left:auto; }
@media (max-width: 480px) { .family-bar .home { flex-basis:100%; min-height:32px; } }
a { color: var(--accent); }
.lang-toggle { display:flex; gap:.25rem; }
.lang-toggle button { min-width:44px; min-height:44px; border:1px solid var(--line);
  background:var(--paper); color:var(--ink); border-radius:6px; font:inherit; cursor:pointer; }
.lang-toggle button[aria-pressed="true"] { background:var(--accent); color:var(--on-accent);
  border-color:var(--accent); }
.lang-toggle button:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
h1 { font-size:1.7rem; line-height:1.2; letter-spacing:-.02em; margin-bottom:.25rem; }
.provenance { margin:0 0 1.5rem; color:var(--muted); font-size:.9rem; }
.provenance a[aria-current] { color:var(--muted); text-decoration:none; }
.toc { font-size:.95rem; columns:2; column-gap:1.5rem; }
.toc ol { margin:0; padding-left:1.2rem; }
.toc li { break-inside:avoid; padding:.15rem 0; }
@media (max-width: 480px) { .toc { columns:1; } }
h2 { margin-top:2rem; font-size:1.25rem; }
h3 { font-size:1.05rem; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size:.9em;
       background:var(--sub); padding:.1em .3em; border-radius:4px; }
pre { background:var(--sub); padding:.8rem; border-radius:6px; overflow-x:auto; }
pre code { background:none; padding:0; }
table { border-collapse:collapse; display:block; overflow-x:auto; max-width:100%; }
th, td { border:1px solid var(--line); padding:.35rem .6rem; text-align:left; vertical-align:top; }
footer { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--line);
         color:var(--muted); font-size:.9rem; }
footer a { display:inline-block; padding:.6rem 0; }
/* One language at a time. Keyed on <html lang>, which lang.js sets; a reader without
   JavaScript gets both, from the <noscript> rule in the page. */
html[lang="ro"] [data-lang="en"], html[lang="en"] [data-lang="ro"] { display:none; }