/* ==========================================================================
   header.css — the shared header (v2, 2026-10-13)
   --------------------------------------------------------------------------
   Loaded by every page with the shared header, after the page's own
   stylesheets; header.js drives it. It refines styles.css §6 / §6b and the
   "More" menu without editing them.

   At rest: one bar, the approved P, the links in the middle, Light /
   System and Sign in on the right.
   Scrolled (.is-scrolled, past 12 px): the bar's surface dissolves into
   three capsules (mark · links · controls) that glide out toward the
   sides. The header stays fixed, so every control is always one reach
   away.
   Phones (< 640 px): mark · Sign in · Menu. The menu is the same links
   (and More's four) as a sheet under the bar (.is-open).

   Contents   1 tokens · 2 frame · 3 surfaces · 4 the mark · 5 links and
              controls · 6 scrolled · 7 phones and the sheet · 8 page
              offsets · 9 reduced motion
   Record: docs/header.md.
   ========================================================================== */

/* ---------- 1. Tokens ------------------------------------------------------- */
:root {
  --pf-head-h: 72px;                       /* what the scrolled header covers: sticky offsets */
  --pf-head-ease: cubic-bezier(.22, 1, .36, 1);
  --pf-head-dur: 520ms;
  --pf-head-r: 16px;
  --pf-head-pill: 44px;                    /* every capsule and the bar's rows */
}

/* ---------- 2. Frame -------------------------------------------------------- */
.pf-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 80;                             /* under the intro and the skip links */
  padding: 16px 16px 0;
  pointer-events: none;                    /* only the capsules take the pointer */
  transition: padding var(--pf-head-dur) var(--pf-head-ease);
}
@media (min-width: 640px) { .pf-header { padding: 20px 32px 0; } }

.pf-header .pf-nav {
  position: relative;
  pointer-events: auto;
  height: 60px;
  padding-inline: 8px;
  gap: 12px;
  border: 0;
  border-radius: var(--pf-head-r);
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: max-width var(--pf-head-dur) var(--pf-head-ease),
              padding var(--pf-head-dur) var(--pf-head-ease),
              height var(--pf-head-dur) var(--pf-head-ease);
}

/* ---------- 3. Surfaces ----------------------------------------------------- */
/* The bar and the three capsules are pseudo-elements, so they cross-fade
   (blur included) without touching the controls on top of them. */
.pf-header .pf-nav::before,
.pf-header .pf-nav-brand::before,
.pf-header .pf-nav-links::before,
.pf-header .pf-nav-end::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid var(--border-soft);
  border-radius: var(--pf-head-r);
  background: var(--nav-fill);
  box-shadow: var(--shadow-hairline), 0 1px 2px rgb(var(--shadow-rgb) / .04);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  pointer-events: none;
  transition: opacity calc(var(--pf-head-dur) * .7) var(--pf-head-ease);
}
.pf-header .pf-nav-brand::before,
.pf-header .pf-nav-links::before,
.pf-header .pf-nav-end::before {
  opacity: 0;
  /* more solid than the bar: a capsule floats over the page's content */
  background: color-mix(in srgb, var(--paper) 84%, transparent);
  border-radius: calc(var(--pf-head-r) - 2px);
  box-shadow: var(--shadow-hairline), 0 1px 2px rgb(var(--shadow-rgb) / .04), 0 10px 28px -18px rgb(var(--shadow-rgb) / .35);
}

.pf-header .pf-nav-brand,
.pf-header .pf-nav-links,
.pf-header .pf-nav-end {
  position: relative;
  height: var(--pf-head-pill);
  align-items: center;
}
.pf-header .pf-nav-links,
.pf-header .pf-nav-end { padding-inline: 4px; }

/* ---------- 4. The mark ----------------------------------------------------- */
/* The approved P (PLANSFLOW BRANDING/FINAL, 8 October), alone (the name
   beside it was removed on 2026-10-13), optically centred in a square,
   full-height target. */
.pf-header .pf-nav-brand {
  display: inline-flex;
  justify-self: start;
  justify-content: center;
  min-width: var(--pf-head-pill);
  padding-inline: 11px;
  color: var(--ink);
  border-radius: calc(var(--pf-head-r) - 2px);
}
.pf-header .pf-nav-brand:hover { opacity: 1; }
.pf-logo {
  position: relative;
  display: block;
  flex: none;
  width: auto;
  height: 22px;
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease-standard);
}
:root[data-theme="dark"] .pf-logo { color: #FFFFFF; }
.pf-header .pf-nav-brand:hover .pf-logo { opacity: .72; }

/* ---------- 5. Links and controls ------------------------------------------- */
.pf-header .pf-nav-links { gap: 2px; }
.pf-header .pf-nav-link { position: relative; padding: 8px 12px; border-radius: 10px; }
.pf-header .pf-nav-more-btn { padding: 8px 12px; }
.pf-header .pf-nav-signin {
  position: relative;
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 10px;
}
.pf-header .pf-theme { position: relative; }
.pf-header .pf-nav-menu { top: calc(100% + 12px); }
.pf-header .pf-nav-menu::before { top: -12px; height: 12px; }

.pf-header .pf-nav-brand:focus-visible,
.pf-header .pf-nav-link:focus-visible,
.pf-header .pf-nav-signin:focus-visible,
.pf-nav-toggle:focus-visible { outline: 2px solid var(--flow); outline-offset: 2px; }

/* the phone menu button — only below 640 px, and only with JS */
.pf-nav-toggle { display: none; }

/* ---------- 6. Scrolled ----------------------------------------------------- */
.pf-header.is-scrolled { padding-top: 10px; }
.pf-header.is-scrolled .pf-nav {
  height: var(--pf-head-pill);
  padding-inline: 0;
  max-width: calc(var(--shell-max) + 12rem);   /* the outer capsules glide toward the sides */
}
.pf-header.is-scrolled .pf-nav::before { opacity: 0; }
.pf-header.is-scrolled .pf-nav-brand::before,
.pf-header.is-scrolled .pf-nav-links::before,
.pf-header.is-scrolled .pf-nav-end::before { opacity: 1; }

/* ---------- 7. Phones and the sheet ----------------------------------------- */
@media (max-width: 639px) {
  :root { --pf-head-h: 64px; }
  .pf-header .pf-nav { grid-template-columns: 1fr auto; padding-inline: 6px; height: 56px; }
  .pf-header.is-scrolled { padding-top: 8px; }
  .pf-header.is-scrolled .pf-nav { padding-inline: 0; }
  .pf-header .pf-nav-end { gap: 6px; padding-inline: 4px; }

  html.js .pf-nav-toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid var(--border-soft);
    border-radius: 10px;
    background: rgb(var(--tint-rgb) / 0.04);
    color: var(--ink);
    cursor: pointer;
  }
  .pf-nav-toggle i {
    position: absolute;
    left: 11px;
    width: 14px;
    height: 1.5px;
    border-radius: 1px;
    background: currentColor;
    transition: transform 320ms var(--pf-head-ease);
  }
  .pf-nav-toggle i:first-child { transform: translateY(-3.5px); }
  .pf-nav-toggle i:last-child { transform: translateY(3.5px); }
  .pf-header.is-open .pf-nav-toggle i:first-child { transform: rotate(45deg); }
  .pf-header.is-open .pf-nav-toggle i:last-child { transform: rotate(-45deg); }

  /* the sheet: the same links, under the bar */
  html.js .pf-header .pf-nav-links {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    height: auto;
    max-height: calc(100vh - 96px);
    max-height: calc(100svh - 96px);
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--border-soft);
    border-radius: var(--pf-head-r);
    background: var(--paper);
    box-shadow: 0 1px 2px rgb(var(--shadow-rgb) / .05), 0 24px 48px -24px rgb(var(--shadow-rgb) / .35);
    font-size: 17px;
    color: var(--ink);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px) scale(.985);
    transform-origin: top right;
    transition: opacity 220ms var(--pf-head-ease), transform 320ms var(--pf-head-ease), visibility 0s linear 320ms;
  }
  html.js .pf-header .pf-nav-links::before { display: none; }
  html.js .pf-header.is-open .pf-nav-links {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  html.js .pf-header .pf-nav-link { display: flex; align-items: center; min-height: 48px; padding: 0 14px; border-radius: 10px; }
  html.js .pf-header .pf-nav-more { display: block; }
  html.js .pf-header .pf-nav-more-btn { display: none; }
  /* More's four links, inline after a hairline */
  html.js .pf-header .pf-nav-menu {
    position: static;
    display: grid;
    min-width: 0;
    margin-top: 6px;
    padding: 6px 0 0;
    border: 0;
    border-top: 1px solid var(--border-soft);
    border-radius: 0;
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: inherit;
    transform: none;
    transition: none;
  }
  html.js .pf-header .pf-nav-menu::before { display: none; }
  html.js .pf-header .pf-nav-menu-link { display: flex; align-items: center; min-height: 44px; padding: 0 14px; font-size: 15px; }
}
@media (max-width: 359px) {
  .pf-header { padding-inline: 10px; }
  .pf-header .pf-nav { gap: 6px; padding-inline: 0; }
  .pf-header .pf-nav-end { gap: 4px; }
  .pf-header .pf-nav-signin { padding: 0 10px; }
}

/* ---------- 8. Page offsets ------------------------------------------------- */
/* The header is fixed now, so things that dock at the top dock under it. */
@media (min-width: 960px) {
  .pf-doc-side { top: calc(var(--pf-head-h) + 8px); max-height: calc(100vh - var(--pf-head-h) - 24px); }
}
@media (min-width: 1200px) { .pf-doc-toc { top: calc(var(--pf-head-h) + 8px); } }
@media (max-width: 700px) { .ix-stage .sw-steps { top: var(--pf-head-h); } }
/* Docs headings were 2rem from the top; a #link now stops below the header */
.pf-doc-body h2 { scroll-margin-top: calc(var(--pf-head-h) + 16px); }

/* ---------- 9. Reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pf-header, .pf-header .pf-nav, .pf-nav-toggle i { transition-duration: 0s; }
  html.js .pf-header .pf-nav-links { transform: none; transition: opacity 120ms linear, visibility 0s linear 120ms; }
}