/* wellskit-header-actions.css 1.4 — ONE header piece for every landing: Sign in + the trial
   button, beside the flag and theme switch. Hidden below 1024px (as Spa today), so phones
   are untouched. Variants: .wha--h1 (link + button), .wha--h2 (two pills), .wha--h3
   (pill with promise line, Sign in with a person icon). Colours come from the app:
   --wha-tx, --wha-tx2, --wha-line, --wha-bg (button), --wha-fg (button text), --wha-font,
   --wha-page (the header's own surface: the page colour, solid).
   1.4 (7 Oct, William's pick B, header spacing): the name stands alone on the left; every other
   group (the app's own flag/theme pill, then this piece) sits together on the right, 4px apart
   below 1024 and 12px apart from 1024. Both edges are equal at every width (the JS mirrors the
   left edge on the right). The JS marks the row (.wha-row), the first right-hand group
   (.wha-push) and the ones after it (.wha-grp); only spacing changes, nothing is restyled.
   1.3 (7 Oct, William's pick N2 = B): below 1024 Sign in shows as a 44px person icon beside
   the flag and theme switch (its words stay for screen readers); the trial pill stays
   desktop-only. The app name is never cut or hidden (row 64): see the JS name fit.
   1.2 (6 Oct, row 63, William's rule): the header looks the SAME at scroll 0 and at every
   scroll step — solid surface AND the 1px rule from the start; nothing switches on scroll.
   The surface rule carries an id-weight (:not(#wha-none)) so an app's own see-through or
   scrolled-state header rule (Pool's fading gradient, Pilates' body.scrolled) cannot win.
   1.1 (6 Oct, row 62): the header that carries this piece is SOLID at every width, light and
   dark, so nothing scrolls visibly under it; a 1px rule appears once the page moves
   (html.wha-moved, set by wellskit-header-actions.js). A menu that turns the header
   transparent on purpose (an open full-screen menu) still wins with its own !important. */
.wha{display:none}
@media (min-width:1024px){
  .wha{display:flex;align-items:center;gap:14px;margin-left:18px;flex:none}
  .wha a{white-space:nowrap;text-decoration:none;font:700 14px/1.15 var(--wha-font);min-height:44px;display:inline-flex;align-items:center;justify-content:center;gap:7px}
  .wha .wha-sign{color:var(--wha-tx);padding-inline:6px}
  .wha .wha-sign svg{width:18px;height:18px;flex:none}
  .wha .wha-trial{background:var(--wha-bg);color:var(--wha-fg);border-radius:999px;padding:0 22px;font-weight:800}
  .wha .wha-trial small{display:none;font:600 11px/1.2 var(--wha-font);opacity:.78}
  .wha--h1 .wha-sign svg,.wha--h2 .wha-sign svg{display:none}
  .wha--h2 .wha-sign{border:1px solid var(--wha-line);border-radius:999px;padding:0 18px}
  .wha--h3 .wha-sign{color:var(--wha-tx2)}
  .wha--h3 .wha-trial{flex-direction:column;gap:1px;padding:5px 24px;min-height:48px}
  .wha--h3 .wha-trial small{display:block}
}

/* rows 62 + 63: one solid header with its rule, identical at every scroll position */
html body header:has(.wha):not(#wha-none){background:var(--wha-page);-webkit-backdrop-filter:none;backdrop-filter:none;
  border-bottom:1px solid var(--wha-line);box-shadow:none;transition:none}

/* 1.3 phones and tablets: Sign in as a 44px person icon; trial pill desktop-only */
@media (max-width:1023.98px){
  .wha{display:flex;align-items:center;margin-left:0;flex:none}
  .wha .wha-trial{display:none}
  .wha .wha-sign{position:relative;width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;color:var(--wha-tx);text-decoration:none}
  .wha .wha-sign svg{display:block;width:22px;height:22px;flex:none}
  .wha .wha-sign > :not(svg){position:absolute!important;display:block!important;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;margin:0;padding:0;border:0;left:0;top:0;
    font-size:1px!important;line-height:1px}
}

/* 1.4 layout B: name left, the rest grouped right; one cluster gap, set here */
:root{--wha-cluster:4px}
@media (min-width:1024px){:root{--wha-cluster:12px}}
html body header .wha-row:not(#wha-none){column-gap:0!important;justify-content:flex-start!important}
html body header .wha-row>.wha-push:not(#wha-none){margin-left:auto!important}
html body header .wha-row>.wha-grp:not(#wha-none){margin-left:var(--wha-cluster)!important}