/* Shared accessibility baseline — the single definition for the whole app:
   the keyboard-focus ring, plus the reduced-motion guard at the bottom.

   ── Keyboard-focus ring ─────────────────────────────────────────────────
   Imported by static/css/planspiel.css (chrome pages + admin panel) and by
   static/injections/responsive.css (every injection slide); the self-contained
   simulated-tool pages link it directly, since they deliberately do not share the
   chrome stylesheet's tokens.

   Before this, exactly two elements in the app had a visible focus style
   (network.html's .detail-close and .mnl-item), so keyboard and switch-device
   users had no idea where they were. Scoped to :focus-visible so it shows for
   keyboard navigation but not on mouse clicks. The colour falls back to the
   Fraunhofer orange literal because the tool pages do not define the token. */
a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible{
  outline:2px solid var(--fhg-focus, var(--fhg-orange, #f58220));
  outline-offset:2px;
  border-radius:2px;
}

/* The ring must clear 3:1 against what it sits on (WCAG 2.2 non-text contrast).
   Plain --fhg-orange manages that on dark (6.76:1) but only 2.37:1 on the light
   canvas, and light is the default theme — so on the pages that define tokens,
   --fhg-focus supplies a darkened 3.27:1 orange for light. The simulated-tool
   pages deliberately do not import the chrome tokens, so both vars are absent
   there and the literal below still applies; those surfaces are light-on-light
   too, which is why the fallback chain ends at the darker value rather than the
   brand orange. */
html[data-theme="light"] a:focus-visible,
html[data-theme="light"] button:focus-visible,
html[data-theme="light"] [role="button"]:focus-visible,
html[data-theme="light"] [tabindex]:not([tabindex="-1"]):focus-visible,
html[data-theme="light"] input:focus-visible,
html[data-theme="light"] select:focus-visible,
html[data-theme="light"] textarea:focus-visible,
html[data-theme="light"] summary:focus-visible{
  outline-color:var(--fhg-focus, #d4670a);
}

/* ── Screen-reader-only text ──────────────────────────────────────────────
   For accessible names and live-region announcements that must not change the
   visual design. Lives here for the same reason the focus ring does: this is
   the one stylesheet every layer already shares, so a utility defined here does
   not need a fourth mirrored copy.

   The clip/clip-path pair rather than `left:-9999px`: an off-canvas element can
   still widen the document (a real source of phantom horizontal scroll on
   narrow viewports), and it moves in the wrong direction under RTL. */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  margin:-1px; padding:0; border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
}

/* ── Reduced motion ───────────────────────────────────────────────────────
   One guard for every layer, because this file is the only stylesheet all of
   them share. Before this, only network.html honoured the preference: the
   slide skeleton, all 28 per-space slides, login, 404 and the admin panel
   animated regardless.

   Near-zero duration rather than `animation:none` — deliberately. Slides use
   `animation: slideIn .5s ease both` with `from{opacity:0}`, and several
   chrome elements animate in from opacity 0. Cancelling the animation
   outright risks leaving content stuck at its *start* state, i.e. invisible.
   Letting it run for 0.01ms jumps straight to the end state, so content is
   always visible and nothing moves.

   `!important` is necessary: the declarations this overrides live in
   page-level <style> blocks and inline styles, which otherwise win. */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    animation-delay:0ms !important;
    transition-duration:0.01ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}