/* ============================================
   FHM unified header (mobile UX direction, 2026-08-30)
   Spec: dev/design-review/mobile-ux/index.html, section "The direction: one
   bar, one headline, one button" / item 03 "Header".

   Replaces three header systems (.ed-masthead on the front page,
   .ed-topbar on interior pages, and the chapter .header) with one sticky
   56px bar on every page. Nav collapses into a full-screen sheet under
   900px; above that the links sit inline and a "Start the SIE" pill joins
   them. The Night toggle (injected by night-mode.js) mounts inside the
   sheet's foot only — see the .fh-menu__foot rule at the bottom of this
   file — never as a bar icon or a floating pill.

   Chapter pages keep their own title/breadcrumb/progress bar as page
   content below this header; folding that into the bar is reading-page
   work (item 07), not this pass.
   ============================================ */

.fh-header {
    position: sticky;
    top: 0;
    z-index: 40;
    height: 56px;
    background: color-mix(in srgb, var(--fh-paper) 92%, transparent);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid var(--fh-rule);
}

.fh-header__in {
    max-width: var(--ed-max-width, 1120px);
    margin: 0 auto;
    height: 100%;
    padding: 0 var(--fh-space-lg);
    display: flex;
    align-items: center;
    gap: 8px;
}

a.fh-header__mark:link,
a.fh-header__mark:visited {
    color: var(--fh-ink);
}

.fh-header__mark {
    font-family: var(--fh-font-display);
    font-weight: 500;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
    text-decoration: none;
    color: var(--fh-ink);
    margin-right: auto;
    white-space: nowrap;
}

.fh-header__links {
    display: none;
    gap: 4px;
    margin-right: 8px;
}
.fh-header__links a {
    font-family: var(--fh-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    text-decoration: none;
    color: var(--fh-ink-2);
    padding: 8px 12px;
    border-radius: 999px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}
.fh-header__links a[aria-current] {
    color: var(--fh-ink);
    background: var(--fh-tint);
}

.fh-header__cta {
    display: none;
    margin-right: 4px;
}

.fh-header__actions {
    display: flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.fh-menu-btn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    border: 0;
    background: transparent;
    color: var(--fh-ink);
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    flex-shrink: 0;
}
.fh-menu-btn:hover,
.fh-menu-btn:active {
    background: var(--fh-tint);
}
.fh-menu-btn svg {
    width: 22px;
    height: 22px;
}

/* ---------- Menu sheet ---------- */
.fh-menu {
    position: fixed;
    inset: 0;
    z-index: 200;
    background: var(--fh-paper);
    display: none;
    flex-direction: column;
}
.fh-menu[data-open="true"] {
    display: flex;
}
.fh-menu__top {
    height: 56px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--fh-space-lg);
    border-bottom: 1px solid var(--fh-rule);
}
.fh-menu__top .fh-header__mark {
    margin-right: 0;
}
.fh-menu__nav {
    padding: 8px var(--fh-space-lg);
    overflow-y: auto;
}
.fh-menu__nav a {
    display: flex;
    align-items: baseline;
    gap: 14px;
    text-decoration: none;
    color: var(--fh-ink);
    padding: 14px 0;
    min-height: 56px;
    border-bottom: 1px solid var(--fh-rule);
    font-family: var(--fh-font-display);
    font-size: 1.65rem;
    font-weight: 500;
    letter-spacing: -0.02em;
}
.fh-menu__nav a[aria-current] {
    color: var(--fh-accent-text);
}
.fh-menu__nav a small {
    font-family: var(--fh-font-mono);
    font-size: 0.7rem;
    color: var(--fh-ink-2);
    letter-spacing: 0.08em;
    min-width: 1.6em;
}
.fh-menu__nav a em {
    font-style: normal;
    font-family: var(--fh-font-body);
    font-size: 0.85rem;
    color: var(--fh-ink-2);
    margin-left: auto;
    font-weight: 400;
}
.fh-menu__foot {
    margin-top: auto;
    padding: 16px var(--fh-space-lg) 28px;
    display: grid;
    gap: 10px;
    flex-shrink: 0;
}
/* The toggle night-mode.js builds is a small pill by default; inside the
   sheet foot it becomes a full-width row so it reads as "a preference,
   used once" rather than another nav link. */
.fh-menu__foot .theme-toggle {
    width: 100%;
    justify-content: center;
    min-height: 52px;
    border-radius: var(--fh-radius-sm);
    margin-left: 0;
}

@media (min-width: 900px) {
    .fh-header,
    .fh-menu__top {
        height: 64px;
    }
    .fh-header__in {
        padding: 0 var(--fh-space-2xl);
    }
    .fh-header__links {
        display: flex;
    }
    .fh-header__cta {
        display: inline-flex;
    }
    .fh-menu-btn--nav {
        display: none;
    }
}

/* ============================================
   Contents pill (chapter pages, mobile UX direction, 2026-08-30)
   Spec: dev/design-review/mobile-ux/deep-dive.html, "09 Reading furniture".
   Built by assets/js/contents-pill.js from the page's existing .toc — see
   that file for why this is additive rather than a per-page markup change.
   ============================================ */
.fh-contents-wrap {
    position: sticky;
    top: 56px;
    z-index: 20;
}
.fh-contents {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    margin: 8px 0 0 var(--fh-space-lg);
    padding: 0 14px;
    border: 1px solid var(--fh-rule);
    border-radius: 999px;
    background: color-mix(in srgb, var(--fh-paper) 92%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--fh-ink);
    font-family: var(--fh-font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
}
.fh-contents svg {
    width: 14px;
    height: 14px;
    margin-left: 2px;
}
.fh-contents[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.fh-contents__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--fh-accent);
    flex-shrink: 0;
}
.fh-contents__panel {
    margin: 8px var(--fh-space-lg) 0;
    padding: 8px var(--fh-space-md);
    border: 1px solid var(--fh-rule);
    border-radius: var(--fh-radius);
    background: var(--fh-surface);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    max-height: min(60vh, 420px);
    overflow-y: auto;
}
.fh-contents__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.fh-contents__item {
    border-bottom: 1px solid var(--fh-rule);
}
.fh-contents__item:last-child {
    border-bottom: 0;
}
.fh-contents__link {
    display: flex;
    align-items: baseline;
    gap: 12px;
    min-height: 44px;
    padding: 8px 4px;
    text-decoration: none;
    color: var(--fh-ink);
    font-family: var(--fh-font-body);
    font-size: 0.95rem;
}
.fh-contents__number {
    font-family: var(--fh-font-mono);
    font-size: 0.7rem;
    color: var(--fh-ink-2);
    min-width: 1.6em;
}

/* ============================================
   Grouped navigation (2026-08-31)
   Two groups above 900px, Research and Education, each a button that opens
   a panel; About stays a plain link. Markup is generated by
   scripts/apply-nav.js, behavior lives in assets/js/menu.js. Below 900px
   the same structure is flattened into the sheet with group eyebrows.
   ============================================ */
.fh-nav__group {
    position: relative;
}
.fh-nav__toggle {
    font-family: var(--fh-font-body);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--fh-ink-2);
    padding: 8px 10px 8px 12px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.fh-nav__toggle svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}
.fh-nav__toggle:hover,
.fh-nav__toggle[aria-expanded="true"] {
    color: var(--fh-ink);
    background: var(--fh-tint);
}
.fh-nav__toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.fh-nav__group[data-active="true"] > .fh-nav__toggle {
    color: var(--fh-ink);
    background: var(--fh-tint);
}
.fh-nav__panel {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    min-width: 248px;
    padding: 8px;
    background: var(--fh-surface);
    border: 1px solid var(--fh-rule);
    border-radius: var(--fh-radius);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14);
    z-index: 50;
}
.fh-nav__toggle[aria-expanded="true"] + .fh-nav__panel {
    display: block;
}
.fh-header__links .fh-nav__panel a,
.fh-header__links .fh-nav__panel a:link,
.fh-header__links .fh-nav__panel a:visited {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: var(--fh-radius-sm);
    color: var(--fh-ink);
    font-size: 0.95rem;
    line-height: 1.25;
    white-space: nowrap;
    background: transparent;
}
.fh-header__links .fh-nav__panel a:hover,
.fh-header__links .fh-nav__panel a:focus-visible {
    background: var(--fh-tint);
}
.fh-header__links .fh-nav__panel a[aria-current] {
    color: var(--fh-accent-text);
}
.fh-nav__panel a small {
    font-family: var(--fh-font-body);
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--fh-ink-2);
}
.fh-nav__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 2px 12px 10px;
}
.fh-header__links .fh-nav__sub a,
.fh-header__links .fh-nav__sub a:link,
.fh-header__links .fh-nav__sub a:visited {
    flex-direction: row;
    min-height: 32px;
    padding: 4px 11px;
    border: 1px solid var(--fh-rule);
    border-radius: 999px;
    font-family: var(--fh-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fh-ink);
}
.fh-header__links .fh-nav__sub a[aria-current] {
    border-color: var(--fh-accent);
    background: var(--fh-tint);
    color: var(--fh-accent-text);
}

/* Sheet: group eyebrows and the exam chip row */
.fh-menu__group {
    margin: 22px 0 2px;
    font-family: var(--fh-font-mono);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fh-ink-2);
}
.fh-menu__group:first-child {
    margin-top: 10px;
}
.fh-menu__nav a:has(+ .fh-menu__sub) {
    border-bottom: 0;
}
.fh-menu__sub {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 0 14px calc(1.6em + 14px);
    border-bottom: 1px solid var(--fh-rule);
}
.fh-menu__nav .fh-menu__sub a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 14px;
    border: 1px solid var(--fh-rule);
    border-radius: 999px;
    font-family: var(--fh-font-mono);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fh-ink);
}
.fh-menu__nav .fh-menu__sub a[aria-current] {
    border-color: var(--fh-accent);
    background: var(--fh-tint);
    color: var(--fh-accent-text);
}