/* chrome.css: header, navigation, phone menu and footer (B3).
   Uses only contract tokens; values live in tokens.css (B1).
   Third pass: the header is fixed over the chapters. --header-h is its real height;
   chapters.css pads every chapter by it, so the bar never covers a heading. */

:root {
  --header-h: 60px;
}

@media (min-width: 768px) {
  :root {
    --header-h: 72px;
  }
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--header-h);
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-small);
  font-weight: 600;
  line-height: 1.4;
}

.site-header__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  height: 100%;
  padding-inline: var(--margin);
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* The skip link lives outside the header; keep it visible when the page is scrolled. */
.skip-link {
  position: fixed;
  z-index: 100;
}

.site-header a:not(.button) {
  color: inherit;
  text-decoration: none;
}

.wordmark {
  font-weight: 800;
  letter-spacing: -0.02em;
  white-space: nowrap;
  margin-right: auto;
  padding-block: var(--space-2);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Inline links: tablet and up */
.site-nav__inline {
  display: none;
}

.site-nav a {
  display: inline-block;
  padding-block: var(--space-2);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.site-nav a:hover {
  text-decoration: underline;
}

.site-nav a[aria-current="page"] {
  color: var(--accent);
  text-decoration: underline;
}

/* ---------- Phone menu (<details>, works without JS) ---------- */
.site-menu > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--space-2) var(--space-1);
  user-select: none;
}

.site-menu > summary::-webkit-details-marker {
  display: none;
}

.site-menu > summary::marker {
  content: "";
}

.site-menu__open,
.site-menu[open] .site-menu__closed {
  display: none;
}

.site-menu[open] .site-menu__open {
  display: inline;
}

.site-menu > summary:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

/* Panel drops below the bar across the full width; it floats, so it sits on the surface tone. */
.site-nav .site-menu__panel {
  position: fixed;
  z-index: 60;
  left: 0;
  right: 0;
  top: var(--header-h);
  max-height: calc(100vh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  margin: 0;
  background: var(--surface);
  padding: var(--space-3) var(--margin) var(--space-5);
  font-size: var(--step-lead);
  font-weight: 600;
  line-height: 1.25;
}

.site-menu__panel li + li {
  margin-top: var(--space-1);
}

.site-menu__panel a {
  display: block;
  padding-block: var(--space-2);
}

/* ---------- Theme toggle ---------- */
.theme-toggle {
  display: none; /* useless without JS; head.html adds html.js */
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  margin: 0;
  padding: var(--space-2) var(--space-1);
  cursor: pointer;
}

.js .theme-toggle {
  display: inline-block;
}

.theme-toggle:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}

.site-header__action {
  white-space: nowrap;
}

@media (min-width: 768px) {
  .site-header__inner {
    gap: var(--space-5);
  }

  .site-nav__inline {
    display: flex;
    gap: var(--space-5);
  }

  .site-menu {
    display: none;
  }

  .theme-toggle {
    padding-inline: 0;
  }
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg);
  color: var(--muted);
  font-family: var(--font-sans);
  font-size: var(--step-small);
  line-height: 1.5;
  margin: 0;
}

.site-footer__inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding: var(--space-6) var(--margin);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3) var(--space-5);
}

/* Phone: a short stacked list. Tablet and up: one line with dot separators. */
.site-footer__line {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

.site-footer__line > li {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) {
  .site-footer__line {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    /* No dot characters: a wrapped second line can never start with a separator. */
    gap: var(--space-1) var(--space-5);
  }
}

.site-footer__name {
  color: var(--ink);
  font-weight: 600;
}

.site-footer a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

.site-footer a:hover {
  color: var(--accent);
}

.site-footer__top {
  font-weight: 600;
  white-space: nowrap;
}

/* No colour transitions here: the registered colour tokens fade the whole chrome
   with the page (palettes.md 4.4). A local transition would make links trail the fade. */

/* Pages with no chapters (404, or any page not yet converted): clear the fixed header.
   Chapters pad themselves by --header-h (chapters.css). */
body:not(:has([data-chapter])) > main {
  padding-top: var(--header-h);
}

/* Very narrow phones (below 360px): the header cannot hold the wordmark, Menu, theme toggle
   and the button. The menu lists an Email me link instead. */
.site-menu__email {
  display: none;
}

@media (max-width: 359px) {
  .site-menu__email {
    display: list-item;
  }

  .site-header__action {
    display: none;
  }
}

/* ---------- Loading screen (header.html .intro) ----------
   A short black screen with a laptop icon, on phones and tablets only (touch screens: no hover, coarse pointer),
   once per visit (head.html adds .intro-seen after that). Pure CSS, so it clears on its own even without JS;
   it fades out after 2s and never blocks the page after that. */
.intro { display: none; }
@media (hover: none) and (pointer: coarse) {
  .intro {
    position: fixed; inset: 0; z-index: 1000;
    display: grid; place-content: center; justify-items: center; gap: var(--space-4);
    background: #000; color: #fff; text-align: center; padding: var(--margin);
    animation: intro-out 450ms ease 2000ms forwards;
  }
}
.intro__text { font-size: var(--step-lead); font-weight: 600; letter-spacing: -0.01em; }
html.intro-seen .intro { display: none; }
@keyframes intro-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .intro { animation-duration: 1ms; }
}