/*
 * The site strip: one thin bar, the same on every page.
 *
 * ── One file, two deliveries ────────────────────────────────────────────────
 *
 * This is the only copy. The planner bundles it (`main.tsx` imports it, so it
 * works under `npm run dev` as well as in the build), and `docker/Dockerfile`
 * copies this same path to /var/www/spickme/sitenav.css, which the static pages
 * link. It lives here rather than beside those pages because the planner's build
 * context is `web/plan` alone and could not reach it there — whereas the image
 * build sees the whole repository and can reach it here. Two copies would drift,
 * and "identical on every page" is the entire point.
 *
 * ── Why it looks like this ───────────────────────────────────────────────────
 *
 * Navigation here is a *locator*, not a destination. The content is what people
 * came for, so the strip is 40px tall, hairline-bordered, translucent, and set
 * in the muted ink — it recedes until looked at, and lifts on hover or focus.
 * It never repeats the page's own title; the H1 below it does that job better.
 *
 * The path is drawn as a miniature line diagram — an origin node, a hairline,
 * a terminus — because that is the app's own language. Every journey in this
 * product is a thread with stops on it, so the route *through the site* is
 * drawn the same way. It reads as transit signage rather than as website
 * chrome, and it costs no more space than plain text with slashes would.
 *
 * ── Why there is no JavaScript ───────────────────────────────────────────────
 *
 * The legal pages and the connection viewer are served under a CSP whose
 * `script-src` admits nothing beyond the shared /theme.js snippet (and the
 * viewer's own modules) — they deliberately run no page script. A strip that
 * needed script would silently lose its menu exactly there, and would lose it
 * anywhere the moment a script fails to arrive, so the disclosure is a plain
 * <details>. The cost is that the menu
 * closes on its own button rather than on an outside click; the benefit is that
 * it behaves identically under every policy on this origin, and with scripting
 * off entirely.
 *
 * ── Tokens ───────────────────────────────────────────────────────────────────
 *
 * Only the tokens every page defines are used — --paper, --paper-low, --ink,
 * --muted, --outline, --coral — each with a fallback, so a page that has not
 * declared one still renders rather than falling back to unstyled black. Theme
 * switching is left entirely to the host page: this file names no colour of its
 * own, so it follows whatever light/dark mechanism that page already uses.
 */

.sitenav {
  position: sticky;
  top: 0;
  z-index: 60;
  /* Translucent so the content scrolling beneath stays faintly visible: the
     strip reads as a pane over the page rather than a lid on it. */
  background: color-mix(in srgb, var(--paper, #f1efea) 86%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--outline, #c8c3b8) 55%, transparent);
  /* Muted by default; the whole strip lifts to full ink when it is being used. */
  color: var(--muted, #6b6b6b);
  transition: color 160ms ease, background-color 160ms ease;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .sitenav {
    background: color-mix(in srgb, var(--paper, #f1efea) 72%, transparent);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    backdrop-filter: blur(14px) saturate(1.4);
  }
}

.sitenav:hover,
.sitenav:focus-within {
  color: var(--ink, #111418);
  background: color-mix(in srgb, var(--paper, #f1efea) 94%, transparent);
}

/* Aligns the strip's contents with the page body below it: same measure, same
   gutter, so the origin node sits directly over the content's left edge. */
.sitenav-inner {
  /* Each page declares the column it reads in, so the origin node lines up with
     the content's left edge rather than floating away from it. The default is
     the widest page's measure; the planner sets its own. */
  width: min(var(--sitenav-measure, 1180px), 100%);
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 48px);
  /* The planner asks for `viewport-fit=cover` so its bottom sheets can clear
     the home indicator, which also lets this bar run under the notch. Turned
     sideways an iPhone reserves ~47px on the leading edge and the ordinary
     padding is 34px, so the wordmark ended up behind the camera housing.
     Zero everywhere else, including on every static page, which does not ask
     for cover at all. */
  padding-left: max(clamp(18px, 4vw, 48px), env(safe-area-inset-left, 0px));
  padding-right: max(clamp(18px, 4vw, 48px), env(safe-area-inset-right, 0px));
  height: 40px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.sitenav a {
  color: inherit;
  text-decoration: none;
}

/* The planner reads in a much narrower column, and pads its strip tighter to
   match — but only where the strip is narrow anyway. It carries more controls
   than any other page (the language, the theme, the way out, the quick links,
   the menu), and pinned to 680px on a desktop those did not fit: the path
   shrank to nothing and its labels painted through the language button. So
   from laptop width up, where the quick links appear, the planner's strip
   takes the same wide measure as the front page and lays out like it. */
@media (max-width: 879px) {
  .sitenav--narrow {
    --sitenav-measure: 680px;
  }

  .sitenav--narrow .sitenav-inner {
    padding: 0 clamp(14px, 4vw, 28px);
  }
}

/* ── Origin: the mark, and the way home ──────────────────────────────────────
 *
 * Deliberately the first thing in the tab order and the leftmost thing on
 * screen. Every page that includes this strip is one click from the front page,
 * which is what the planner in particular was missing — its wordmark reloaded
 * the planner instead of leaving it.
 */
.sitenav-home {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 6px 2px;
  border-radius: 8px;
}

.sitenav-home:hover .sitenav-wordmark,
.sitenav-home:focus-visible .sitenav-wordmark {
  color: var(--ink, #111418);
}

/* The origin node of the thread. Solid, coral, and slightly larger than the
   nodes after it — a line has one start. */
.sitenav-dot {
  position: relative;
  width: 9px;
  height: 9px;
  flex: none;
  border-radius: 999px;
  background: var(--coral, #f26a4b);
}

.sitenav-home:hover .sitenav-dot::after,
.sitenav-home:focus-visible .sitenav-dot::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  background: color-mix(in srgb, var(--coral, #f26a4b) 22%, transparent);
}

/* The little count beside the wordmark: how many more quick clicks would open
   what lives behind the logo (see src/lib/knock.mjs). Deliberately small,
   deliberately grey, and the same grey at three as at one — a badge that
   brightened as it filled would be an invitation, and nothing on this strip
   invites anybody to that. Created by script; absent on a page that has never
   been knocked on. */
.sitenav-knock {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted, #6b6b6b) 22%, transparent);
  color: var(--muted, #6b6b6b);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  opacity: 0;
  transform: scale(0.55);
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}

.sitenav-knock[data-on] {
  opacity: 1;
  transform: none;
}

.sitenav-wordmark {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 160ms ease;
}

/* ── The path ────────────────────────────────────────────────────────────────
 *
 * One <li> per level. Each draws its own connector and node, so the markup
 * stays a plain ordered list and the diagram is entirely presentational.
 */
.sitenav-path {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.78rem;
  font-weight: 600;
}

.sitenav-path li {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  /* Room for the connector and the node that precede the label. */
  padding-left: 26px;
  white-space: nowrap;
  /* When the strip is short of room the path is what gives way — and it gives
     way by clipping, never by painting its label under the tools beside it. */
  overflow: hidden;
  text-overflow: ellipsis;
}

.sitenav-path li a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The connector: a hairline running back toward the previous stop. */
.sitenav-path li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 50%;
  width: 12px;
  height: 1px;
  background: color-mix(in srgb, var(--outline, #c8c3b8) 85%, transparent);
}

/* The node: hollow for a stop you can travel back to, solid coral for the one
   you are standing at. */
.sitenav-path li::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  box-sizing: border-box;
  border: 1.5px solid color-mix(in srgb, var(--outline, #c8c3b8) 95%, transparent);
  border-radius: 999px;
  background: var(--paper, #f1efea);
}

.sitenav-path li[aria-current='page'] {
  color: var(--ink, #111418);
  font-weight: 700;
}

.sitenav-path li[aria-current='page']::after {
  border-color: var(--coral, #f26a4b);
  background: var(--coral, #f26a4b);
}

.sitenav-path a:hover,
.sitenav-path a:focus-visible {
  color: var(--ink, #111418);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sitenav-spacer {
  flex: 1 1 auto;
  min-width: 8px;
}

/* ── Page-specific controls ──────────────────────────────────────────────────
 *
 * An empty slot the host page fills — the theme switch on the front page, the
 * language and settings buttons in the planner. It sits inside the strip rather
 * than in a second bar of its own, which is what keeps one 40px line the whole
 * chrome budget for a page.
 */
.sitenav-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

/* ── Quick links ─────────────────────────────────────────────────────────────
 *
 * Shortcuts, not the whole map: the menu beside them holds everything. Hidden
 * on narrow screens, where the same links are one tap away in the menu, so
 * nothing is ever only reachable at one size.
 */
.sitenav-links {
  display: none;
  align-items: center;
  gap: 2px;
  flex: none;
  font-size: 0.78rem;
  font-weight: 600;
}

.sitenav-links a {
  padding: 6px 9px;
  border-radius: 8px;
  white-space: nowrap;
}

.sitenav-links a:hover,
.sitenav-links a:focus-visible {
  color: var(--ink, #111418);
  background: color-mix(in srgb, var(--outline, #c8c3b8) 26%, transparent);
}

/* ── The menu ────────────────────────────────────────────────────────────────*/

.sitenav-more {
  position: relative;
  flex: none;
}

.sitenav-more > summary {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  cursor: pointer;
  list-style: none;
}

/* Safari draws its own triangle unless both of these are said. */
.sitenav-more > summary::-webkit-details-marker {
  display: none;
}

.sitenav-more > summary:hover,
.sitenav-more > summary:focus-visible,
.sitenav-more[open] > summary {
  color: var(--ink, #111418);
  background: color-mix(in srgb, var(--outline, #c8c3b8) 26%, transparent);
}

/* Three rules stacked — a timetable, at 14px. Drawn in CSS rather than fetched
   as an icon, because half of these pages forbid img-src from anywhere but
   this origin and none of them should pay a request for a hamburger. */
.sitenav-burger {
  position: relative;
  display: block;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.sitenav-burger::before,
.sitenav-burger::after {
  content: '';
  position: absolute;
  left: 0;
  width: 14px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
}

.sitenav-burger::before {
  top: -4.5px;
}

.sitenav-burger::after {
  top: 4.5px;
}

/* Shortened middle rule when open: the same three lines, read as "here". */
.sitenav-more[open] .sitenav-burger {
  width: 9px;
}

.sitenav-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 10;
  min-width: 208px;
  padding: 8px;
  border: 1px solid var(--outline, #c8c3b8);
  border-radius: 12px;
  background: var(--paper-low, var(--paper, #f1efea));
  box-shadow: 0 18px 44px rgb(17 20 24 / 0.16);
  color: var(--ink, #111418);
  font-size: 0.82rem;
  font-weight: 600;
  /* Eleven rows and two rules: 540px on a phone held upright, which fits, and
     more than the whole screen on the same phone turned sideways. The language
     panel below has always had this; this one had `overflow: visible` and would
     simply have run off the bottom edge with nothing to scroll. */
  max-height: calc(100vh - 60px);
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sitenav-panel a {
  display: block;
  padding: 8px 10px;
  border-radius: 8px;
}

.sitenav-panel a:hover,
.sitenav-panel a:focus-visible {
  background: color-mix(in srgb, var(--outline, #c8c3b8) 30%, transparent);
}

/* The page you are already on, listed but not offered. */
.sitenav-panel a[aria-current='page'] {
  /* The accent as words, which needs to be darker than the accent as a shape;
     pages that have not declared the distinction fall back to the mark. */
  color: var(--coral-ink, var(--coral, #f26a4b));
}

/* The one row in this panel that is a button rather than a link, and for a
   long time the only one with no rules at all: an unstyled <button> sitting
   under ten padded, hoverable rows reads as a caption, not a control. It is a
   row like the others now, with the gear in front of it so the eye finds it
   before it reads anything. */
.sitenav-panel-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sitenav-panel-action:hover,
.sitenav-panel-action:focus-visible {
  background: color-mix(in srgb, var(--outline, #c8c3b8) 30%, transparent);
}

.sitenav-gear {
  flex: none;
  color: var(--coral-ink, var(--coral, #f26a4b));
}

/* The phone-only shortcut to the same dialog. Absent by default: on a desktop
   the quick links are already in the bar and a third control beside the theme
   toggle is the crowding that moved settings into the menu in the first place.
   The rule that reveals it is down with the other widths. */
.sitenav-settings {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex: none;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: inherit;
  cursor: pointer;
}

.sitenav-settings:hover,
.sitenav-settings:focus-visible {
  background: color-mix(in srgb, var(--outline, #c8c3b8) 26%, transparent);
}

.sitenav-panel-label {
  padding: 8px 10px 4px;
  color: var(--muted, #6b6b6b);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.sitenav-panel hr {
  margin: 6px 4px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--outline, #c8c3b8) 60%, transparent);
}

/* Keyboard focus must stay visible against both grounds. */
.sitenav :focus-visible {
  outline: 2px solid var(--coral, #f26a4b);
  outline-offset: 2px;
}

/* ── Sizes ───────────────────────────────────────────────────────────────────
 *
 * The strip never changes shape, only how much of the path it can afford to
 * show. Nothing is reachable at one width and missing at another: what the
 * quick links drop, the menu still carries.
 */

/* Laptop and desktop: the shortcuts appear. */
@media (min-width: 880px) {
  .sitenav-links {
    display: flex;
  }
}

/* Large mobile: the middle of the path folds away, origin and destination stay
   — which is the part that answers "where am I?". */
@media (max-width: 620px) {
  .sitenav-path li:not([aria-current='page']) {
    /* Kept in the accessibility tree; only the label is dropped. */
    padding-left: 26px;
    font-size: 0;
  }

  .sitenav-path li:not([aria-current='page']) a {
    display: none;
  }
}

/* Small mobile: the line tightens, and on a page deep enough to have a path the
   wordmark yields its room to it. On the front page there is no path, so the
   wordmark stays — a lone coral dot is a poor brand and there was space for it
   all along. Browsers without :has() simply keep the wordmark and let the
   current crumb ellipsise, which is the safe way to be wrong. */
@media (max-width: 400px) {
  .sitenav-inner {
    height: 38px;
    gap: 2px;
  }

  .sitenav-inner:has(.sitenav-path) .sitenav-wordmark {
    /* Not display:none — screen readers still announce the link's name. */
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  /* A crumb whose label was dropped two breakpoints ago is a dot and a dash
     and nothing else: it names no page, its link is already `display: none`,
     and it reads to nobody with or without a screen reader. It was costing
     22px of a bar that has thumb-sized controls to fit — so on the narrowest
     screens the trail is simply the page you are on. */
  .sitenav-path li:not([aria-current='page']) {
    display: none;
  }

  .sitenav-path {
    font-size: 0.76rem;
  }

  .sitenav-path li {
    padding-left: 22px;
  }

  .sitenav-path li::before {
    left: 2px;
    width: 10px;
  }

  .sitenav-path li::after {
    left: 12px;
  }
}

/* Narrower still, and the crumb runs out of room for its own word.
 *
 * Measured at 320px: «Day out» had 38px of the 63 it needs and arrived as
 * "Day…", «Excursion» as "Exc…", «Usflug» as "Us…". A page name in fragments
 * is worth less than the site's name whole — and this is the one thing on the
 * strip that is said again, in full, forty pixels below it, by the tab that is
 * selected.
 *
 * So the crumb steps aside. Visually, and not out of the page — it still says
 * which page this is to anybody listening, which is what it was carrying that
 * the tabs do not.
 *
 * The wordmark does not come back in its place, and that was measured rather
 * than chosen: on the planner the strip also carries a settings button the
 * static pages have none of, and putting "Spick Me" back at 320px made the
 * whole document 329px wide. A lone coral dot is a poor brand and a page
 * wider than the phone is a worse one. The link is still the site's name to
 * anybody listening — the wordmark is hidden, not removed. */
@media (max-width: 360px) {
  .sitenav-path {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* Below 880px the quick links are gone and the menu is the only way to
   anything, which is also where the room for this comes from. The planner is
   the only page that renders it; everywhere else the selector simply matches
   nothing. */
@media (max-width: 879px) {
  .sitenav-settings {
    display: inline-flex;
  }
}

/* ── Thumbs ──────────────────────────────────────────────────────────────────
 *
 * Measured on a 390px phone before any of this: the theme buttons were 28x22,
 * the language button 47x26 and the menu 30x30. WCAG's own floor for a pointer
 * target is 24x24 and Apple and Android both ask for 44 — so two of the three
 * controls in this bar failed the floor, and the rule that fires at 400px was
 * making the bar *shorter* rather than the targets bigger.
 *
 * A capability query rather than a width one, and deliberately: a narrow window
 * on a desktop is still a mouse, and a mouse does not need 40px of anything. It
 * is also the same test the planner already uses for its own touch behaviour
 * (the time picker becomes a bottom sheet under `pointer: coarse`), so the two
 * agree about what a phone is.
 *
 * Last in the file so it wins over the width blocks above without needing
 * !important or a longer selector. */
@media (pointer: coarse) {
  .sitenav-inner {
    height: 44px;
  }

  /* 38 and 32, not 44. Apple's 44 is a recommendation and this bar cannot
     spend it: measured at 320px, 44px controls leave the breadcrumb 23px and it
     vanishes rather than ellipsising. WCAG's actual floor is 24, so these clear
     it with room and still leave the trail legible on the narrowest phone
     anybody carries. The old 22px did not clear it at all. */
  .sitenav-more > summary,
  .sitenav-settings {
    width: 38px;
    height: 38px;
    border-radius: 10px;
  }

  .theme-toggle button {
    width: 32px;
    height: 32px;
  }

  .sitenav-lang > summary {
    height: 34px;
    padding: 0 9px;
  }

  /* The list a thumb picks a language from, at a size a thumb can pick from. */
  .sitenav-lang-panel button,
  .sitenav-panel a,
  .sitenav-panel-action {
    padding-top: 11px;
    padding-bottom: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sitenav,
  .sitenav-wordmark {
    transition: none;
  }
}

/* ── The tools, on the right of the strip ───────────────────────────────────
 *
 * Two controls, in the same place on every page that has them: the language,
 * then the colour theme. They used to be neither. The theme toggle existed
 * once, in the landing page's own <style> and <script>; the planner had a
 * different control that cycled through the three states on one button; the
 * other eight pages had nothing at all, even though every one of them applies
 * a pinned theme. Same markup, same styles, same handler (docker/theme.js)
 * everywhere now.
 *
 * Language is the planner's alone, because it is the only page that has
 * translations. Offering the control where nothing would change is worse than
 * not offering it.
 */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--outline, #c8c3b8) 70%, transparent);
  border-radius: 999px;
  background: transparent;
}

.theme-toggle button {
  display: grid;
  place-items: center;
  /* 28 square, not 28x22: the smallest control on the strip was the one
     with three states to tell apart, and 22px is under the 24px WCAG floor
     for a pointer target. The strip is 40px tall and has the room. */
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}

.theme-toggle button:hover {
  color: var(--ink, #111418);
}

.theme-toggle button[aria-pressed="true"] {
  background: var(--paper-high, #e2ded4);
  color: var(--ink, #111418);
}

.theme-toggle button:focus-visible {
  outline: 2px solid var(--coral, #f26a4b);
  outline-offset: 1px;
}

/* The language, as its own control rather than three levels down in Settings.
   A <select> was tried and taken out again: at full width it overlapped the
   path beside it. This is the burger's disclosure pattern at a smaller size —
   the current language on the button, the rest in a panel under it. */
.sitenav-lang {
  position: relative;
}

.sitenav-lang > summary {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 26px;
  padding: 0 8px;
  border: 1px solid color-mix(in srgb, var(--outline, #c8c3b8) 70%, transparent);
  border-radius: 999px;
  color: var(--muted, #6b6b6b);
  cursor: pointer;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  list-style: none;
  white-space: nowrap;
}

.sitenav-lang > summary::-webkit-details-marker {
  display: none;
}

.sitenav-lang > summary:hover,
.sitenav-lang[open] > summary {
  color: var(--ink, #111418);
}

.sitenav-lang > summary:focus-visible {
  outline: 2px solid var(--coral, #f26a4b);
  outline-offset: 1px;
}

/* The button's label comes in two widths and the strip picks one: the bare
   tag ("DE") where space is tight, the language's own name where it is not.
   It used to be the short form everywhere, and for the dialects the short
   form is the name cut to four letters — so a reader on a 27-inch screen was
   shown "Bärn", "Solo" and "Bünd" and read them, reasonably, as a bug. The
   name is capped and ellipsised so "Solothurner Dütsch" cannot push the
   theme toggle off the strip. */
.sitenav-lang-full {
  display: none;
}

@media (min-width: 880px) {
  .sitenav-lang-short {
    display: none;
  }

  .sitenav-lang-full {
    display: inline-block;
    max-width: 18ch;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sitenav-lang > summary {
    height: 28px;
    padding: 0 10px;
    font-size: 0.78rem;
  }
}

.sitenav-lang-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 70;
  display: grid;
  min-width: 168px;
  max-height: min(60vh, 420px);
  overflow-y: auto;
  padding: 6px;
  border: 1px solid var(--outline, #c8c3b8);
  border-radius: 12px;
  background: var(--paper, #f1efea);
  box-shadow: 0 18px 40px rgb(0 0 0 / 0.18);
}

.sitenav-lang-panel button {
  padding: 7px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ink, #111418);
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  text-align: left;
}

.sitenav-lang-panel button:hover {
  background: color-mix(in srgb, var(--outline, #c8c3b8) 30%, transparent);
}

.sitenav-lang-panel button[aria-current="true"] {
  color: var(--coral-ink, var(--coral, #f26a4b));
  font-weight: 700;
}

.sitenav-lang-panel hr {
  height: 1px;
  margin: 5px 4px;
  border: 0;
  background: color-mix(in srgb, var(--outline, #c8c3b8) 60%, transparent);
}

.sitenav-lang-group {
  padding: 6px 10px 2px;
  color: var(--muted, #6b6b6b);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── The foot: one small block, the same on every page ───────────────────────
 *
 * The strip's counterpart at the other end. Every page used to close
 * differently — the front page with a disclaimer and seven links, the planner
 * with a centred three-liner, the forms with a row of four, the legal pages
 * with nothing at all — so a reader who found "Legal notice" at the bottom of
 * one page could not count on finding it at the bottom of the next. Now the
 * foot says the same things in the same order everywhere: the nine
 * destinations the menu offers, where the data comes from, and where it was
 * made. A page may put one paragraph of its own above those (the front page
 * its no-guarantee note, the planner what happens to a search), but nothing
 * below or between.
 *
 * Same delivery as the strip: this file, linked by every static page and
 * bundled by the planner. It sits inside each page's own reading column, so it
 * measures whatever the content above it measures.
 */

.sitefoot {
  display: grid;
  gap: 14px;
  margin-top: clamp(48px, 8vw, 84px);
  padding: 22px 0 30px;
  border-top: 1px solid color-mix(in srgb, var(--outline, #c8c3b8) 60%, transparent);
  color: var(--muted, #6b6b6b);
  font-size: 0.84rem;
  line-height: 1.6;
  text-align: left;
}

.sitefoot p {
  margin: 0;
}

.sitefoot a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: 3px;
}

.sitefoot a:hover,
.sitefoot a:focus-visible {
  color: var(--ink, #111418);
  text-decoration-color: currentColor;
}

.sitefoot :focus-visible {
  outline: 2px solid var(--coral, #f26a4b);
  outline-offset: 2px;
  border-radius: 4px;
}

/* The destinations, in the menu's order. Plain words with room between them;
   no dots, so a wrapped row does not begin with one. */
.sitefoot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-weight: 600;
}

.sitefoot-links a {
  text-decoration: none;
  white-space: nowrap;
}

.sitefoot-links a:hover,
.sitefoot-links a:focus-visible {
  text-decoration: underline;
}

.sitefoot-made {
  display: flex;
  align-items: center;
  gap: 7px;
}

/* The flag, drawn rather than fetched: half of these pages allow no image
   from anywhere but this origin, and none should pay a request for it. */
.sitefoot-flag {
  position: relative;
  display: inline-block;
  flex: none;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #da291c;
}

.sitefoot-flag::before,
.sitefoot-flag::after {
  content: '';
  position: absolute;
  background: #fff;
}

.sitefoot-flag::before {
  left: 50%;
  top: 19%;
  width: 19%;
  height: 62%;
  transform: translateX(-50%);
}

.sitefoot-flag::after {
  top: 50%;
  left: 19%;
  height: 19%;
  width: 62%;
  transform: translateY(-50%);
}