[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #2563eb !important; outline-offset: 3px; }
#counter { color: #f8fafc; background: #1e293b; opacity: 1; border-radius: .25rem; padding: .15rem .4rem; }
.slides-container { min-width: 0; }
#progress { flex-wrap: wrap; justify-content: center; }
.nav-center { min-width: 0; max-width: calc(100% - 7rem); }
#progress .progress-dot { flex-shrink: 0; }
/* Floating actions must clear slide navigation in both writing directions. */
.glossary-btn, .story-indicator-btn { position: absolute; bottom: 5.5rem; }
.story-indicator-btn { max-width: calc(100% - 5rem); }
#studyTable th { color: #1e293b; }
.glossary-content a { color: #93c5fd; text-decoration: underline; }
.glossary-section-label { color: #faf8f5; margin-block: 1rem; }
.keyboard-help-trigger { margin-inline-start: .5rem; }
.tool-section-header[role="button"] { cursor: pointer; }
/* Arabic RTL puts the Next arrow in the bottom-left corner where the
   fixed glossary launcher otherwise overlaps it. Keep both pointer targets
   independently reachable at desktop and mobile viewport widths. */
html[dir="rtl"] .glossary-btn { bottom: 5.5rem; }

/* In right-to-left layouts the desktop sidebar occupies the right edge.
 * The story action must not obscure its Daily Review button. Keep it beside
 * (not atop) the glossary launcher and above the slide navigation. */
html[dir="rtl"] .story-indicator-btn {
  right: auto;
  left: 5rem;
  bottom: 5.5rem;
  max-width: calc(100vw - 6rem);
}