/* FxDart docs site */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f7fb;
  --text: #1c2033;
  --text-dim: #5b617a;
  --accent: #6c5ce7;
  --accent-strong: #4834d4;
  --border: #e3e6f0;
  --code-bg: #f2f3f9;
  --out-bg: #141622;
  --out-text: #d8ddf5;
  --err: #e5484d;
  --ok: #2f9e68;
  /* "slower than the baseline" on the parallel benchmark — a result to
     notice, not a failure, so it is deliberately not --err. */
  --warn: #c2610f;
  --rx: #d6336c;
  --max: 900px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12141f;
    --bg-soft: #191c2b;
    --text: #e6e8f5;
    --text-dim: #9aa0bd;
    --accent: #8f7ff7;
    --accent-strong: #a99bff;
    --border: #2a2e45;
    --code-bg: #1d2032;
    --out-bg: #0c0e18;
    --out-text: #ccd2ee;
    --warn: #f0913c;
    --rx: #e64980;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.65;
}
main { max-width: var(--max); margin: 0 auto; padding: 2rem 1.25rem 5rem; }

/* header */
.site-header {
  border-bottom: 1px solid var(--border);
  background: var(--bg-soft);
}
.site-header .inner {
  max-width: var(--max); margin: 0 auto; padding: 0.7rem 1.25rem;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
}
.site-header .logo {
  font-weight: 800; font-size: 1.15rem; text-decoration: none; color: var(--text);
}
.site-header .logo span { color: var(--accent); }
.site-header nav { display: flex; gap: 1rem; flex-wrap: wrap; }
.site-header nav a { color: var(--text-dim); text-decoration: none; font-size: 0.95rem; }
.site-header nav a:hover, .site-header nav a.active { color: var(--accent); }

/* typography */
h1 { font-size: 2.1rem; line-height: 1.2; margin: 1.2rem 0 0.6rem; }
h2 { font-size: 1.45rem; margin-top: 2.4rem; border-bottom: 1px solid var(--border); padding-bottom: 0.35rem; }
h3 { font-size: 1.12rem; margin-top: 1.8rem; }
a { color: var(--accent-strong); }
p, li { color: var(--text); }
.dim { color: var(--text-dim); }
.hero-sub { font-size: 1.15rem; color: var(--text-dim); max-width: 46rem; }
.hero-logo { margin: 1rem 0 0; }
.hero-logo img { display: block; width: 100%; max-width: 400px; height: auto; }
/* the wordmark is dark navy on a light rim; lift it slightly on dark backgrounds */
@media (prefers-color-scheme: dark) {
  .hero-logo img { filter: brightness(1.18) saturate(1.05); }
}

/* code */
code {
  background: var(--code-bg);
  padding: 0.12em 0.36em;
  border-radius: 5px;
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.9em;
}
pre.code, .snippet {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  overflow-x: auto;
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
}
pre.code code { background: none; padding: 0; }

.signature {
  background: linear-gradient(90deg, var(--code-bg), transparent);
  border-left: 4px solid var(--accent);
  border-radius: 6px;
  padding: 0.65rem 1rem;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.9rem;
  overflow-x: auto;
  white-space: pre;
}

/* tables */
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: 0.95rem; display: block; overflow-x: auto; }
th, td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
th { background: var(--bg-soft); }

/* cards / category grid */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; margin-top: 1.4rem; }
.card {
  border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem;
  background: var(--bg-soft); text-decoration: none; color: var(--text);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.card:hover { border-color: var(--accent); transform: translateY(-2px); }
.card h3 { margin: 0 0 0.3rem; font-size: 1.02rem; color: var(--accent-strong); }
.card p { margin: 0; font-size: 0.88rem; color: var(--text-dim); }

.fn-list { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: 0.8rem 0 0; list-style: none; }
.fn-list a {
  display: inline-block; padding: 0.25rem 0.7rem; border: 1px solid var(--border);
  border-radius: 999px; text-decoration: none; font-size: 0.88rem;
  font-family: ui-monospace, Menlo, monospace; color: var(--text);
  background: var(--bg);
}
.fn-list a:hover { border-color: var(--accent); color: var(--accent-strong); }

/* big call-to-action button (e.g. the Daily Ledger demo app) */
.demo-cta {
  display: inline-flex; align-items: center; gap: 0.6rem;
  margin: 1.4rem 0 0.4rem;
  padding: 0.85rem 1.6rem;
  background: linear-gradient(135deg, #00b894, #006b54);
  color: #fff; text-decoration: none;
  font-size: 1.05rem; font-weight: 700; line-height: 1.3;
  border-radius: 999px;
  box-shadow: 0 4px 18px rgba(0, 184, 148, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.demo-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0, 184, 148, 0.5); }
.demo-cta .demo-cta-emoji { font-size: 1.3rem; }
/* purple variant for the Dart-vs-FxDart comparison entry */
.demo-cta.cta-compare {
  background: linear-gradient(135deg, #6c5ce7, #4834d4);
  box-shadow: 0 4px 18px rgba(108, 92, 231, 0.35);
}
.demo-cta.cta-compare:hover { box-shadow: 0 6px 24px rgba(108, 92, 231, 0.5); }

.demo-cta.cta-compare-rx {
  background: linear-gradient(135deg, #d6336c, #a61e4d);
  box-shadow: 0 4px 18px rgba(214, 51, 108, 0.4);
}
.demo-cta.cta-compare-rx:hover { box-shadow: 0 6px 24px rgba(214, 51, 108, 0.5); }

/* deep-indigo variant for the theory textbook (docs/theory/) */
.demo-cta.cta-theory {
  background: linear-gradient(135deg, #5a4fd6, #372a96);
  box-shadow: 0 4px 18px rgba(90, 79, 214, 0.35);
}
.demo-cta.cta-theory:hover { box-shadow: 0 6px 24px rgba(90, 79, 214, 0.5); }

/* pros / cons */
.proscons { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 640px) { .proscons { grid-template-columns: 1fr; } }
.proscons .box { border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.2rem; background: var(--bg-soft); }
.proscons h3 { margin-top: 0; }
.proscons .pros h3 { color: var(--ok); }
.proscons .cons h3 { color: var(--err); }
.proscons ul { margin: 0.4rem 0 0; padding-left: 1.2rem; }
.proscons li { margin: 0.35rem 0; font-size: 0.95rem; }

/* playground */
.playground {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.4rem 0 2rem;
  background: var(--bg-soft);
}
.pg-toolbar {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.5rem 0.75rem; border-bottom: 1px solid var(--border);
}
.pg-toolbar button {
  font: inherit; font-size: 0.88rem; cursor: pointer;
  border-radius: 8px; padding: 0.3rem 0.9rem; border: 1px solid transparent;
}
.pg-run { background: var(--accent); color: #fff; font-weight: 600; }
.pg-run:hover { background: var(--accent-strong); }
.pg-run:disabled { opacity: 0.55; cursor: default; }
.pg-reset { background: transparent; color: var(--text-dim); border-color: var(--border) !important; }
.pg-reset:hover { color: var(--text); }
.pg-status { font-size: 0.82rem; color: var(--text-dim); font-style: italic; }
.playground textarea { /* pre-CodeMirror fallback */
  width: 100%; min-height: 200px; border: 0; padding: 0.8rem 1rem;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 0.88rem;
  background: var(--code-bg); color: var(--text); resize: vertical;
}
.pg-output {
  margin: 0; padding: 0.8rem 1rem;
  background: var(--out-bg); color: var(--out-text);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.86rem; line-height: 1.5;
  max-height: 300px; overflow: auto;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
}
.pg-out { color: var(--out-text); }
.pg-err { color: #ff8589; }
.pg-dim { color: #767d9e; font-style: italic; }

/* CodeMirror theming
   NOTE ON SPECIFICITY: codemirror.min.css is loaded from the CDN *after*
   this file, and it sets `.CodeMirror { background: white; color: black }`.
   A bare `.CodeMirror` rule here has equal specificity and therefore loses,
   which left the editor white-on-pastel in dark mode. Every rule that has to
   beat the CDN is written as `.CodeMirror.cm-s-fxdart` (0,2,0) so it wins
   regardless of link order. Don't "simplify" these back to `.CodeMirror`. */
.CodeMirror.cm-s-fxdart {
  height: auto;
  width: 100%;
  background: var(--code-bg);
  color: var(--text);
  font-family: "SF Mono", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  padding: 0.4rem 0;
}
.cm-s-fxdart .CodeMirror-gutters { background: var(--code-bg); border-right: 1px solid var(--border); }
/* No opacity here: dimming --text-dim any further drops line numbers below
   the 4.5:1 contrast floor against --code-bg. */
.cm-s-fxdart .CodeMirror-linenumber { color: var(--text-dim); }
.cm-s-fxdart .CodeMirror-cursor { border-left: 2px solid var(--accent); }
/* CDN ships `.CodeMirror-focused .CodeMirror-selected { background: #d9d9d9 }`
   — a light grey selection that vanishes against the dark editor. */
.cm-s-fxdart .CodeMirror-selected,
.cm-s-fxdart.CodeMirror-focused .CodeMirror-selected { background: #33395c; }
.cm-s-fxdart .CodeMirror-activeline-background { background: rgba(255, 255, 255, 0.035); }
.cm-s-fxdart .CodeMirror-matchingbracket {
  color: var(--accent-strong) !important; border-bottom: 1px solid var(--accent-strong);
}

.cm-s-fxdart .cm-keyword { color: #c99bf0; }
.cm-s-fxdart .cm-def { color: #7cc0ff; }
.cm-s-fxdart .cm-variable { color: var(--text); }
.cm-s-fxdart .cm-variable-2 { color: #ecc98a; }
.cm-s-fxdart .cm-variable-3 { color: #ecc98a; }
.cm-s-fxdart .cm-type { color: #ecc98a; }
.cm-s-fxdart .cm-string { color: #a5d68a; }
.cm-s-fxdart .cm-string-2 { color: #a5d68a; }
.cm-s-fxdart .cm-number { color: #e0a878; }
.cm-s-fxdart .cm-atom { color: #e0a878; }
.cm-s-fxdart .cm-comment { color: #99a0b8; font-style: italic; }
.cm-s-fxdart .cm-operator { color: #63c9d6; }
/* cm-builtin was previously unstyled, so it fell through to the CDN default
   and rendered as low-contrast mud: fx, map, filter, toList, print. */
.cm-s-fxdart .cm-builtin { color: #7cc0ff; }
.cm-s-fxdart .cm-property { color: #7cc0ff; }
.cm-s-fxdart .cm-meta { color: #63c9d6; }
.cm-s-fxdart .cm-qualifier { color: #ecc98a; }
.cm-s-fxdart .cm-punctuation,
.cm-s-fxdart .cm-bracket { color: var(--text); }
.cm-s-fxdart .cm-error { color: #ff8589; }

@media (prefers-color-scheme: light) {
  .cm-s-fxdart .CodeMirror-selected,
  .cm-s-fxdart.CodeMirror-focused .CodeMirror-selected { background: #d5d9ee; }
  .cm-s-fxdart .CodeMirror-activeline-background { background: rgba(0, 0, 0, 0.03); }
  /* Darker than the usual One Light palette on purpose: --code-bg (#f2f3f9)
     is lighter than the editor these colors were designed for, so the stock
     values land at 3.0-3.8:1. Every value below is >= 4.5:1 on that bg. */
  .cm-s-fxdart .cm-keyword { color: #9425a0; }
  .cm-s-fxdart .cm-def { color: #2f5fd0; }
  .cm-s-fxdart .cm-string, .cm-s-fxdart .cm-string-2 { color: #2c7230; }
  .cm-s-fxdart .cm-number, .cm-s-fxdart .cm-atom { color: #8a5000; }
  .cm-s-fxdart .cm-comment { color: #5f6672; }
  .cm-s-fxdart .cm-operator, .cm-s-fxdart .cm-meta { color: #00637f; }
  .cm-s-fxdart .cm-type,
  .cm-s-fxdart .cm-variable-2,
  .cm-s-fxdart .cm-variable-3,
  .cm-s-fxdart .cm-qualifier { color: #7a5200; }
  .cm-s-fxdart .cm-builtin, .cm-s-fxdart .cm-property { color: #2f5fd0; }
}

/* Dart vs FxDart comparison
   ---------------------------------------------------------------------- */
/* Detail pages hold two editors side by side; the prose column is too narrow. */
main.cmp-wide { max-width: 1280px; }

.comparison {
  display: grid;
  /* minmax(0, 1fr) — not 1fr. Grid items default to min-width: auto, so a
     CodeMirror whose longest line is ~90ch inflates the track past 50% and
     the other panel is clipped by .playground { overflow: hidden }. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.1rem;
  align-items: start; margin: 1.4rem 0 2rem;
}
@media (max-width: 900px) { .comparison { grid-template-columns: 1fr; } }
.cmp-panel { min-width: 0; }
.cmp-panel h3 { margin: 0 0 0.5rem; }
.cmp-panel .playground { margin: 0; }

.badge {
  display: inline-block; padding: 0.08rem 0.6rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; vertical-align: middle;
  border: 1px solid var(--border);
}
.verdict-fxdart { background: var(--accent); border-color: var(--accent); color: #fff; }
.verdict-tie { background: var(--bg-soft); color: var(--text-dim); }
.verdict-native { background: var(--ok); border-color: var(--ok); color: #fff; }
.verdict-rxdart { background: var(--rx); border-color: var(--rx); color: #fff; }
.badge-async { background: var(--out-bg); border-color: var(--out-bg); color: var(--out-text); }

/* Speed badge: the *measured* standpoint on the index rows, next to the
   filled code-verdict badge. Hollow where the verdict is filled, ⚡-prefixed,
   and worded "faster / same speed" — three redundant cues, so color (same
   side-hues as the verdict badges) reinforces the pairing but never carries
   the distinction alone. */
.badge-speed { background: transparent; font-weight: 500; }
.speed-fxdart { border-color: var(--accent); color: var(--accent); }
.speed-tie { border-color: var(--border); color: var(--text-dim); }
.speed-native { border-color: var(--ok); color: var(--ok); }
.speed-rxdart { border-color: var(--rx); color: var(--rx); }
.cmp-speed-legend { margin-top: -0.4rem; font-size: 0.88rem; }

.cmp-meta { margin: 0.2rem 0 0.4rem; }
.cmp-fns { margin: 0.4rem 0 1rem; }

/* Benchmark section: two labeled bars per metric. Identity is carried by the
   row labels; color (native = --ok, fxdart = --accent, matching the verdict
   badges) is reinforcement, never the only signal. */
.cmp-bench .bench-meta { margin: 0.3rem 0 1rem; font-size: 0.88rem; }

/* One block per N-scale (N=100 / N=10,000 / headline), side by side on wide
   screens so growth reads left to right; bar widths are relative within a
   block — compare across blocks by the printed values. */
.bench-scales {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem;
}
@media (max-width: 1000px) { .bench-scales { grid-template-columns: 1fr; } }
.bench-scale h3 {
  margin: 0 0 0.6rem; font-size: 1.05rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.25rem;
}
.bench-metric { margin: 0.6rem 0 1rem; }
.bench-metric h4 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.bench-row {
  display: grid; grid-template-columns: 5.5rem 1fr 4.8rem;
  gap: 0.5rem; align-items: center; margin: 0 0 2px;
}
.bench-name { font-size: 0.88rem; color: var(--text-dim); }
.bench-track {
  background: var(--bg-soft); border-radius: 4px; overflow: hidden;
  height: 1.05rem;
}
.bench-bar {
  display: block; height: 100%;
  border-radius: 0 4px 4px 0; /* data-end rounded, baseline flat */
  min-width: 3px;
}
.bench-native { background: var(--ok); }
.bench-fxdart { background: var(--accent); }
.bench-rxdart { background: var(--rx); }
/* A case that publishes a second FxDart spelling gets a third bar: same hue
   as the FxDart bar, lightened, so it reads as a variant of it rather than a
   third contender. */
.bench-fxdart-strict { background: color-mix(in srgb, var(--accent) 55%, transparent); }
.bench-val {
  font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem;
  color: var(--text); white-space: nowrap; text-align: right;
}
.cmp-bench .bench-note { font-size: 0.85rem; margin: 0.5rem 0 0; }
@media (max-width: 520px) {
  .bench-row { grid-template-columns: 5rem 1fr 4.5rem; }
}

/* --- the parallel benchmark page ------------------------------------------
   Four rows per block instead of two, and no verdict badge: the answer here
   is a shape, not a winner, so the colour says "faster / slower than the
   plain loop" and the printed multiplier says it again in words. Bar widths
   are relative within a block; compare across blocks by the values. */
.pbench-page .hero-sub { font-size: 1.05rem; color: var(--text-dim); }
.pbench-case {
  margin: 2rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--border);
}
.pbench-case > h2 { margin: 0 0 0.8rem; }
/* Wider name column than the two-way chart: these labels are sentences
   ("fxdart chain, one isolate"), not one word. */
.pbench .bench-row { grid-template-columns: 12rem 1fr 14rem; }
.pbench .bench-scale { margin: 0 0 1.4rem; }
.pbench-base { background: var(--text-dim); }
.pbench-win { background: var(--accent); }
.pbench-loss { background: var(--warn); }
/* Same fill as the baseline — a tie is "as fast as the loop", not an
   empty track. --bg-soft on a --bg-soft track made the bar vanish. */
.pbench-tie { background: var(--text-dim); }
.pbench-note { font-style: normal; opacity: 0.85; margin-left: 0.35rem; }
em.pbench-base { color: var(--text-dim); }
em.pbench-win { color: var(--accent); }
em.pbench-loss { color: var(--warn); }
em.pbench-tie { color: var(--text-dim); }
.pbench-code { margin: 1rem 0 0; }
.pbench-code > summary {
  cursor: pointer; font-weight: 600; margin: 0 0 0.6rem;
}
/* Two across on a wide screen: the four programs are short, and the point is
   how little differs between them. */
.pbench-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}
@media (max-width: 900px) { .pbench-grid { grid-template-columns: 1fr; } }
.pbench-code figure { margin: 0; }
.pbench-code figcaption {
  font-size: 0.85rem; color: var(--text-dim); margin: 0 0 0.3rem;
}
.pbench-code pre { margin: 0; overflow-x: auto; }
.pbench-work { margin: 0 0 1rem; }
@media (max-width: 700px) {
  .pbench .bench-row { grid-template-columns: 7.5rem 1fr 7.5rem; }
  .pbench .bench-name { font-size: 0.8rem; }
  /* ko/es notes ("6.65배 더 빠름", "6.65x más rápido") do not fit 7.5rem
     on one line; drop the multiplier under the time instead of clipping. */
  .pbench .bench-val { white-space: normal; line-height: 1.25; }
  .pbench-note { display: block; margin-left: 0; }
}

.cmp-expected summary {
  cursor: pointer; font-weight: 600; margin: 1rem 0 0.4rem;
}
.cmp-expected pre.code { margin-top: 0.4rem; }

/* TOC: curated picks + filter bar */
.cmp-picks {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--bg-soft); border-radius: 8px;
  padding: 0.7rem 1rem; font-size: 0.93rem;
}
.cmp-picks span { font-weight: 600; margin-right: 0.3rem; }
.cmp-picks a { white-space: nowrap; }

.cmp-filter {
  display: flex; flex-wrap: wrap; gap: 0.45rem; align-items: center;
  margin: 1.2rem 0 0.4rem;
}
.cmp-filter button {
  font: inherit; font-size: 0.85rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text-dim);
  padding: 0.25rem 0.8rem;
}
.cmp-filter button:hover { border-color: var(--accent); color: var(--accent-strong); }
.cmp-filter button.active {
  background: var(--accent); border-color: var(--accent); color: #fff;
}
.cmp-filter input {
  font: inherit; font-size: 0.85rem;
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--bg); color: var(--text);
  padding: 0.25rem 0.8rem; min-width: 14rem;
}
.cmp-filter input:focus { outline: 2px solid var(--accent); border-color: transparent; }

/* TOC rows */
.cmp-list { list-style: none; margin: 1rem 0 0; padding: 0; }
.cmp-list > li {
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--bg-soft); margin: 0.6rem 0; padding: 0.75rem 1rem;
  transition: border-color 0.15s ease;
}
.cmp-list > li:hover { border-color: var(--accent); }
.cmp-row {
  display: flex; gap: 0.9rem; align-items: baseline;
  text-decoration: none; color: var(--text);
}
.cmp-num {
  flex: none; min-width: 2rem; text-align: right;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700; color: var(--accent-strong);
}
.cmp-row-body { display: block; }
.cmp-row-body strong { color: var(--accent-strong); }
.cmp-row-body .dim { display: block; font-size: 0.9rem; }
.cmp-list .cmp-fns { margin: 0.5rem 0 0 2.9rem; }
.cmp-list .fn-list a { font-size: 0.8rem; padding: 0.15rem 0.55rem; }

/* tutorial nav */
.tut-nav {
  display: flex; justify-content: space-between; gap: 1rem;
  margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--border);
  font-size: 0.92rem;
}
.tut-nav a { text-decoration: none; }
.breadcrumb { font-size: 0.85rem; color: var(--text-dim); margin-top: 0.6rem; }
.breadcrumb a { color: var(--text-dim); }
.breadcrumb a:hover { color: var(--accent); }

.callout {
  border: 1px solid var(--border); border-left: 4px solid var(--accent);
  background: var(--bg-soft); border-radius: 8px;
  padding: 0.7rem 1rem; margin: 1rem 0; font-size: 0.93rem;
}

footer.site-footer {
  border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: 0.85rem;
  padding: 1.4rem 1.25rem 2.2rem; text-align: center;
}
footer.site-footer a { color: var(--text-dim); }

/* language switcher + translation status
   ---------------------------------------------------------------------- */
/* Pushed to the far end of the header bar; wraps under the nav on narrow
   screens rather than squeezing it. Plain links, no JS — the switcher works
   with scripting disabled and crawlers follow it to the localized pages. */
.lang-switcher {
  margin-inline-start: auto;
  display: flex; align-items: baseline; gap: 0.5rem;
  font-size: 0.85rem;
}
.lang-switcher .lang-label {
  color: var(--text-dim); opacity: 0.75;
}
.lang-switcher .lang-label::after { content: ':'; }
.lang-switcher ul {
  display: flex; flex-wrap: wrap; gap: 0.1rem 0.6rem;
  list-style: none; margin: 0; padding: 0;
}
.lang-switcher a {
  color: var(--text-dim); text-decoration: none; white-space: nowrap;
}
.lang-switcher a:hover { color: var(--accent); }
.lang-switcher a[aria-current="page"] {
  color: var(--text); font-weight: 600;
}

/* Shown on a page that exists only in English. */
.i18n-banner {
  margin: 0 0 1.5rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--bg-soft);
  color: var(--text-dim);
  font-size: 0.9rem;
}
.i18n-banner a { color: var(--accent-strong); }

@media (max-width: 640px) {
  /* Full-width row under the nav; the label would eat most of a phone line. */
  .lang-switcher { margin-inline-start: 0; flex-basis: 100%; }
  .lang-switcher .lang-label { display: none; }
}