/* a410mob:begin */
/* [SG-PATCH 2026-11-03 A410 | Felix] Kit 5 of the mobile sweep (Angelo 03/11: «Sì, carica Headway solo al tocco sulla campanella").
   A file of its own; zz-mobile, -2, -3 and -4 are frozen. skin.helper.php links it after zz-mobile-4.css and before zz-mobile.css.
   While the bell loads Headway's widget.js on its first activation (topbar.fragment.php, A410), the bell carries aria-busy="true":
   the glyph turns --text-muted and a ring turns around it (sg-spin of app.css, at the .8s app.css already uses for it; still under prefers-reduced-motion), the pointer
   says «progress». The state lasts until the widget is ready, the script fails, or 8 s pass; then the bell is exactly as before.
   Sizes: the ring is 28px (--space-6 + --space-1, around the 20px glyph, inside the 36px bell) with the 2px line the skin uses for
   focus rings, its track --border-strong (the field border, >= 3:1 on both themes) and its arc --pf-accent-text; every colour is a token (GL-001 section 7.3). No :has().
   (A first ring of 16px sat on the glyph with a --border track: invisible on the dark topbar in the 3x photo; replaced.) */
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway[aria-busy="true"]:not(#sg-p0):not(#sg-p1) { position: relative; cursor: progress; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway[aria-busy="true"]:not(#sg-p0):not(#sg-p1) .icon { color: var(--text-muted) !important; }
html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway[aria-busy="true"]:not(#sg-p0):not(#sg-p1)::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: calc(var(--space-6) + var(--space-1)); height: calc(var(--space-6) + var(--space-1));
  margin: calc((var(--space-6) + var(--space-1)) / -2) 0 0 calc((var(--space-6) + var(--space-1)) / -2);
  box-sizing: border-box; border: 2px solid var(--border-strong); border-top-color: var(--pf-accent-text); border-radius: var(--r-full);
  animation: sg-spin .8s linear infinite; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  html:is([data-skin="sg26"],#sg-skin) body:not(#sg-f1):not(#sg-f2) .toggleHeadway[aria-busy="true"]:not(#sg-p0):not(#sg-p1)::after { animation: none; }
}
/* a410mob:end */