/* ============================================================
   ARCHIPEDIA — shared chapter styles (loaded after the page's own
   <style>, so these rules win on equal specificity).
   Fixes measured on 2026-10-05: chapter nav overflowed at 375 px
   (scrollWidth 385–443), no focus style, no reduced motion, small
   touch targets, no print layout.
   ============================================================ */
/* Filled blue with white text uses --bp-solid (defined in each chapter's palette:
   light #1D4ED8, dark #2563EB). Dark --bp #3B82F6 under white is only 3.68:1. */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;padding:8px 12px;background:var(--bp-solid);color:#fff;border-radius:6px}
.skip-link:focus{left:8px}
:focus-visible{outline:2px solid var(--bp);outline-offset:2px}

/* Nav: wrap instead of pushing the language/theme controls off-screen. */
.nav{flex-wrap:wrap;row-gap:6px}
@media (max-width:520px){
  .nav-title{white-space:normal;overflow-wrap:anywhere;min-width:0;flex:1 1 100%;order:3}
  .nav-chap{display:none}
}
/* Clip stray horizontal overflow on the root only. `clip` (unlike `hidden`)
   creates no scroll container, and body keeps overflow:visible, so the
   sticky .nav / .section-nav keep working. Do not add overflow to body. */
html{overflow-x:clip}
/* .section-nav sticks directly below the nav; --nav-h is the nav's measured
   height (chapter-common.js, ResizeObserver) — ~48 px, ~92 px when it wraps. */
.section-nav{top:var(--nav-h,48px)}
img,canvas,svg,table{max-width:100%}
/* EN readers: hide the German markup until setLang() has translated it (no language flash). Set by the <head> script, removed by chapter-common.js. */
html.i18n-pending body{visibility:hidden}

@media (pointer:coarse){
  .lt-opt,.theme-btn,.nav-back,.snav-dot,.cf-chip,.cf-link,.cf-back,button{min-height:44px;min-width:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Chapter footer: prev/next + all chapters + back to timeline. */
.cf{max-width:1100px;margin:48px auto 32px;padding:24px 20px;border-top:1px solid var(--card-border);display:grid;gap:18px;font-family:var(--font)}
.cf-pn{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cf-link{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--card-border);border-radius:10px;background:var(--card);color:var(--text2);text-decoration:none;font-size:12px}
.cf-link span{color:var(--text);font-weight:600;font-size:14px}
.cf-next{text-align:right}
.cf-link:hover{border-color:var(--bp)}
.cf-all{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.cf-label{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text2);margin-right:4px}
.cf-chip{display:inline-flex;align-items:center;padding:6px 10px;border:1px solid var(--card-border);border-radius:999px;font-size:12px;color:var(--text);text-decoration:none}
.cf-chip[aria-current]{background:var(--bp-solid);color:#fff;border-color:var(--bp-solid)}
.cf-back{font-size:13px;color:var(--bp);text-decoration:none}
@media (max-width:520px){.cf-pn{grid-template-columns:1fr}.cf-next{text-align:left}}

/* Print: content only, no sticky chrome. */
@media print{
  .nav,.section-nav,.theme-btn,.lang-toggle,.lt-opt,.cf-all,.skip-link{display:none!important}
  body{background:#fff!important;color:#000!important}
  *{box-shadow:none!important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:10px}
}