/* The two controls that sit at the end of every nav: the colour-scheme button
   and the language switcher.

   They lived in chrome.css, which the home page does not load: it has its own
   header and its own sheet. So on the home page the button rendered as a blank
   pill and the languages as bare inline links, while every inner page showed
   them properly (2026-09-15). Loaded from base.html, so one copy reaches every
   page and neither sheet can drift from the other again. */

:root { --control-h: 34px; }

.themeToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--control-h);
  height: var(--control-h);
  padding: 0 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--transition-fast);
}

/* The icon shows the mode you are IN; the title (set by site.js) says what
   clicking does. It is an inline SVG rather than ☾/☀ because those characters
   are in none of the fonts this page asks for, so the button rendered as an
   empty pill on any machine without a symbol font to fall back to. */
.themeIcon {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.themeIconMoon { fill: currentColor; stroke: none; }
.themeIconSun { display: none; }
.themeToggle[data-mode="light"] .themeIconMoon { display: none; }
.themeToggle[data-mode="light"] .themeIconSun { display: block; }

.themeToggle:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* The button is 34px, under the 44px a thumb wants, and it sits between other
   tap targets. This grows the hit area without moving anything. */
.themeToggle::before {
  content: "";
  position: absolute;
  inset: -6px -5px;
}
.themeToggle { position: relative; }

/* ── language selector ──
   Plain links, no script: the switcher must work with JS off, and a crawler
   follows it to discover the other locales. */
.langSelector {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  height: var(--control-h);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 0 2px;
  /* Recessed, so the selected language can sit on --surface and read as
     raised. When both were --surface the current language was invisible. */
  background: var(--bg-subtle);
}

.langLink {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: calc(var(--control-h) - 6px);
  padding: 0 8px;
  border-radius: calc(var(--radius) - 2px);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-2);
}

.langLink:hover { color: var(--accent); }

.langLinkCurrent {
  background: var(--surface);
  color: var(--accent);
  font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--border-accent);
}