/* The accessibility panel and the language popover, linked from every header the same way
   assets/family.css is: pages/_shell.html, index.html, landing-page.html, presentation.html — one
   copy, four pages, restated in this site's own tokens (--surface, --border, --text, --sub, --muted,
   --lift, --accent). Ported from the castomo family sites' header pattern (castomui.com and siblings),
   which already solved the two problems this file solves: a colours-only switcher that offered no
   text-size, spacing or motion control, and a language list that was a flat 88-row scroller with no
   way to search it.

   TEXT SIZE, SPACING, MOTION — three more preferences beside the existing --style one, same shape:
   an attribute on <html>, a key in localStorage, read before paint by the inline script in every
   header so nothing flashes at the wrong size on load. */

/* zoom rather than font-size, because this site's type is set in a mix of px and rem and a root
   font-size change would miss every px declaration silently; zoom scales the whole rendered page
   the way a browser's own Ctrl/Cmd-+ does, and — unlike `transform: scale()` — is computed as part
   of layout, so it does not detach position: sticky (.nav) from the flow it is sticky within. */
:root[data-size="large"] body { zoom: 1.15; }
:root[data-size="xlarge"] body { zoom: 1.3; }

:root[data-spacing="wide"] body { letter-spacing: .01em; word-spacing: .12em; }
:root[data-spacing="wide"] p, :root[data-spacing="wide"] li, :root[data-spacing="wide"] .lang-name { line-height: 1.9; }

/* The same collapse @media (prefers-reduced-motion: reduce) already applies in pages.css/index.html,
   restated behind an attribute so it can be chosen independently of the OS setting. */
:root[data-motion="reduce"] { scroll-behavior: auto; }
:root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after {
  animation-duration: .01ms !important; animation-iteration-count: 1 !important;
  transition-duration: .01ms !important; scroll-behavior: auto !important;
}

/* ---------- the two header controls and their popovers ---------- */

/* Same flex slot the old .styles picker held in .nav-in (readaloud: order 2, .btn-primary: order 4;
   pages.css and every self-contained header share this — see the comment beside .nav-links there). */
.a11y, .lang { order: 3; }
/* The read-aloud trigger and the language chip now match the accessibility
   icon's own size and border — one row of matched icon buttons, not a mix of
   a square icon, a wide labelled pill and another pill. Selectors are doubled
   up (.icon-btn.readaloud, not .readaloud) on purpose: index.html,
   landing-page.html and presentation.html each carry their OWN inline copy of
   `.readaloud { … }` later in the document, at the same specificity as a
   single-class rule here — which wins on source order alone. The compound
   selector outranks it regardless of where either rule sits. */
.icon-btn.readaloud { width: 32px; padding: 0; gap: 0; position: relative; justify-content: center; }
.icon-btn.readaloud .ra-bars { display: none; }
/* The word is hidden from the eye but deliberately NOT from the accessibility
   tree — clipping it keeps the button named, in whatever language the page is
   in, without an aria-label that would pin the name to English on all 88. */
.icon-btn.readaloud #ra-label {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
/* The language chip shows only its code (EN, PL, AR…) — the full name stays
   for a screen reader via the same clip, and still shows in full inside the
   open popover's own list, which is a different element entirely. */
.lang-current .lang-name {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
@media (max-width: 900px) {
  .menu-body .a11y, .menu-body .lang { margin-block: 14px 4px; width: max-content; }
}
.a11y, .lang { position: relative; }
.icon-btn {
  display: grid; place-items: center; width: 32px; height: 32px;
  border: 1px solid var(--border); border-radius: 10px;
  color: var(--muted); background: rgba(var(--ink), 0.03);
}
.icon-btn:hover, .icon-btn[aria-expanded="true"] { color: var(--text); background: rgba(var(--ink), 0.07); }
.icon-btn svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lang-btn { width: auto; gap: 6px; padding: 0 10px; }
.lang-btn svg.chev { width: 9px; height: 9px; margin-inline-start: 1px; }

/* [hidden] FIRST, and not optional — pages.css has the identical note beside .lang-list[hidden].
   .lang-pop below sets `display: flex` at the same specificity as the browser's own
   `[hidden] { display: none }`, and an AUTHOR rule beats a user-agent rule on a tie regardless of
   which one is `!important`-free, so without this override the popover showed through its own
   hidden attribute. */
.pop[hidden] { display: none; }
.pop {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px);
  width: min(22rem, calc(100vw - 2rem)); padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--lift); z-index: 70; animation: pop-in .15s ease;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.pop-h { font-size: 17px; font-weight: 700; margin: 0; color: var(--text); }
.pop-close { flex: none; }

.a11y-set { border: 0; padding: 0; margin: 0 0 14px; }
.a11y-set:last-child { margin-bottom: 0; }
.a11y-set legend { font-size: 13px; font-weight: 600; color: var(--sub); padding: 0; margin-bottom: 6px; display: block; }
.a11y-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.a11y-opts button {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: transparent; color: var(--sub); font-size: 13px; font-weight: 500; min-height: 32px;
}
.a11y-opts button[aria-checked="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.a11y-switch {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  padding: 6px 0; background: none; border: 0; color: var(--text); font-weight: 600; font-size: 13px; text-align: left; min-height: 36px;
}
.a11y-dot { width: 36px; height: 20px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); position: relative; flex: none; }
.a11y-dot::after { content: ""; position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--muted); transition: transform .15s ease, background .15s ease; }
.a11y-switch[aria-checked="true"] .a11y-dot { background: var(--accent); border-color: var(--accent); }
.a11y-switch[aria-checked="true"] .a11y-dot::after { transform: translateX(16px); background: var(--on-accent, #fff); }
.a11y-hint { font-size: 12.5px; color: var(--muted); margin: -2px 0 0; }

/* ---------- the language popover: search, a suggested shelf, the existing grid list ---------- */

.lang-pop { width: min(26rem, calc(100vw - 2rem)); max-height: min(70vh, 34rem); display: flex; flex-direction: column; }
.lang-pop-body { overflow-y: auto; -webkit-overflow-scrolling: touch; margin: 0 -4px; padding: 0 4px; }
.lang-search {
  display: flex; align-items: center; gap: 8px; height: 38px; margin: 0 0 10px; padding: 0 10px; flex: none;
  border: 1px solid var(--border); border-radius: 10px; background: rgba(var(--ink), 0.03);
}
.lang-search svg { width: 15px; height: 15px; stroke: var(--muted); stroke-width: 1.8; flex: none; }
.lang-search input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--text); }
.lang-search input:focus { outline: none; }
.lang-group-h { font-size: 12.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; margin: 14px 0 6px; }
.lang-group-h:first-child { margin-top: 0; }
/* The all-languages list keeps its existing grid/flag styling from pages.css; only its own scroll
   box is dropped here, because .lang-pop-body already scrolls and a box inside a box is two
   scrollbars fighting over one gesture. */
.lang-pop-body .lang-list { max-height: none; overflow: visible; border: 0; background: none; padding: 0; margin: 0; }
.lang-list li[hidden] { display: none; }
.lang-empty { font-size: 13px; color: var(--muted); margin: 0; padding: 10px 4px; }

/* ---------- mobile: a full-screen sheet instead of an off-screen dropdown ----------
   Below 640px the trigger sits close to the bar's own edge, so a popover anchored to its right edge
   (inset-inline-end: 0 above) can run off the opposite side of a narrow viewport — the family sites'
   accessibility panel had exactly this bug. Both popovers become a full-screen sheet instead, with a
   close button because outside-click stops being a reliable gesture once the sheet covers everything. */
.pop-scrim { display: none; }
@media (max-width: 640px) {
  .pop {
    position: fixed; inset: 0; width: auto; max-width: none; max-height: none; height: 100dvh;
    border-radius: 0; border: 0; box-shadow: none;
    padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    z-index: 80; animation: pop-sheet-in .18s ease;
  }
  .a11y-panel, .lang-pop { width: auto; max-height: none; }
  /* Below .nav's own z-index: 50 (see pages.css) — the popover is a descendant of .nav and cannot
     render above a sibling stacking context whose root sits higher than .nav's, however high its
     own z-index is set. */
  .pop-scrim:not([hidden]) { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .5); z-index: 45; }
}
@keyframes pop-sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
html.pop-lock, html.pop-lock body { overflow: hidden; }