/*
 * Scenario Learning accessibility compatibility layer.
 *
 * This file intentionally lives outside the generated application bundle so
 * accessibility fixes survive source recovery and can be removed independently
 * when they are incorporated into the primary frontend source.
 */

/* Keep native binary controls large enough to operate by touch or pointer. */
input[type="checkbox"],
input[type="radio"] {
  min-inline-size: 24px;
  min-block-size: 24px;
  flex: 0 0 auto;
}

/* A two-colour ring stays visible on both the light and dark application panels. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid #f8fafc !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 5px #0f172a !important;
}

/* White text on the original #9f7aea background was only 3.26:1. */
.sllt46-badge.purple {
  color: #111827 !important;
}

/* Do not let the multi-row command header cover the small-screen workspace. */
@media (max-width: 860px) {
  .sllt46-topbar {
    position: static !important;
    inset-block-start: auto !important;
  }

  .sllt46-topbar,
  .sllt46-main,
  .sllt46-grid,
  .sllt46-card,
  .sllt46-panel {
    min-inline-size: 0;
  }

  .sllt46-topbar,
  .sllt46-nav {
    max-inline-size: 100%;
  }
}

/* WCAG 2.2.2 / 2.3.3: remove nonessential movement for this preference. */
@media (prefers-reduced-motion: reduce) {
  html,
  html:focus-within,
  body,
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation: none !important;
    transition: none !important;
  }
}