.header-controls {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: calc((clamp(20px, 3vw, 2.5rem)) * var(--font-scale));
    transition: font-size 0.25s ease-out;
    position: relative; /* anchor for the ⋮ popover */
}

/* --- Header ⋮ menu ------------------------------------------------------- */
.header-menu-toggle {
    position: relative;
    z-index: 601; /* stays above the panel, which slides up to cover it,
                     and above the category close-hitbox (z-index 500). */
    border: none;
    background: transparent;
    cursor: pointer;
    padding: 0;
    /* A 44px square touch target, centred on the content-inset line: its centre
       (and the dots inside it) sit on that line while the box extends half its
       width into the gutter padding (margin-right) and half into the content.
       This replaces the old right-aligned-glyph hack, so the tap target — not
       just the icon — is centred on the right column. */
    width: 44px;
    height: 44px;
    margin-right: -22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-color);
    transition: var(--page-color-transition);
}

/* The ⋮ (more_vert) cross-fades into an X (close) when the menu opens. */
.hmt-icon {
    position: absolute;
    font-size: 22px;
    transition: opacity 0.2s ease;
}

.hmt-close { opacity: 0; }
.header-menu-toggle[aria-expanded="true"] .hmt-open { opacity: 0; }
.header-menu-toggle[aria-expanded="true"] .hmt-close { opacity: 1; }

.header-menu {
    position: absolute;
    top: 0; /* slide up over the toggle */
    /* Right edge sits on the toggle's right edge (the toggle's centre is on the
       content-inset line, its box extends 22px past it into the gutter), so the
       close-X lands at a comfortable inset inside the panel's top-right corner
       rather than hanging off the edge. */
    right: -22px;
    z-index: 600;
    min-width: 210px;
    background: var(--bg-color);
    border: 1px solid var(--text-color);
    border-radius: 14px;
    padding: 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Panel heading, top-left, above all the toggles. Right padding leaves room for
   the close X that floats over the panel's top-right corner. */
.header-menu-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1;
    margin: 0;
    padding: 0.35rem 2.6rem 0.6rem 0.4rem;
    color: var(--text-color);
}

.header-menu[hidden] {
    display: none;
}

.header-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    text-align: left;
    background: transparent;
    border: none;
    border-top: 1px solid var(--text-color);
    padding: 0.7rem 0.6rem 0.3rem;
    color: var(--text-color);
    font-family: var(--font-body);
    font-size: calc((1.2rem) * var(--font-scale));
    cursor: pointer;
}

.header-menu-item .hmi-icon {
    flex-shrink: 0;
    font-size: 20px; /* match the 20px icon it replaced */
}

/* Every Options row is an icon on the left + a segmented pill control on the
   right (language, theme, font size, dyslexia font), so they share one layout
   and one control style. */
.header-menu-option {
    justify-content: space-between;
}

.seg-control {
    display: inline-flex;
    flex-shrink: 0;
    border: 1px solid var(--text-color);
    border-radius: 999px;
    /* No interior dividers and no per-segment fill: the active option is shown by
       an inset circle instead, so the pill reads as one continuous capsule. */
}

.seg-opt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Square cells: a cell's centre is height/2 from its edge, so the END cells'
       centres land exactly on the pill's incircle centre (the rounded cap), and
       the indicator circle drawn in each cell sits cleanly within that cap.
       Interior cells are evenly spaced by construction. */
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: color 0.2s ease, var(--page-color-transition);
}

/* The selection indicator: a circle inset a few px from the pill, centred in the
   square cell. background is filled on hover / when checked. */
.seg-opt::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 28px;
    height: 28px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: transparent;
    transition: background-color 0.2s ease;
    z-index: 0;
}

/* Glyph / label rides above the circle. */
.seg-opt > * {
    position: relative;
    z-index: 1;
}

.seg-opt .ms-icon {
    font-size: 18px;
}

/* An unselected, un-hovered option's glyph always uses the text colour, so the
   dark-mode moon can never render white-on-white in light mode. The selected /
   hover states still invert the glyph over the filled circle (currentColor). */
.seg-opt:not([aria-checked="true"]):not(:hover) .ms-icon {
    fill: var(--text-color);
}

/* Solid feedback (no translucent wash): hover and the selected state both fill
   the inset circle; the content inverts to the page colour over it. */
.seg-opt:hover::before,
.seg-opt[aria-checked="true"]::before {
    background: var(--text-color);
}

.seg-opt:hover,
.seg-opt[aria-checked="true"] {
    color: var(--bg-color);
}

.seg-opt-label {
    font-family: var(--font-body);
    font-size: 1.05rem;
    line-height: 1;
}

/* Dyslexia previews are stable regardless of the active body font: the default
   sample always shows the base body face and the dyslexic sample always shows
   OpenDyslexic, so the pill previews what each choice *does* rather than echoing
   the current state twice. (The .seg-opt-label font-family would otherwise win
   over an inherited preview, and in dyslexic mode --font-body flips to
   OpenDyslexic, collapsing both samples to one face.) */
#dyslexia-control .seg-opt-label {
    font-family: 'IBM Plex Sans', sans-serif;
}

/* Needs the ID too, or the rule above (1 ID, 1 class) outranks it (0 ID, 2
   classes) and the dyslexic sample renders in the base face — the very bug. */
#dyslexia-control .seg-opt-dyslexic .seg-opt-label {
    font-family: 'OpenDyslexic', sans-serif;
}

/* The font-size "A" samples are sized in px so they always depict small /
   medium / large regardless of the current text scale. */
.fontsize-control .fs-a {
    font-family: var(--font-body);
    line-height: 1;
}

.fs-s { font-size: 13px; }
.fs-m { font-size: 16px; }
.fs-l { font-size: 20px; }

body.category-open .header-controls {
    font-size: calc((clamp(20px, 2vw, 2rem)) * var(--font-scale));
}