/*
 * Cross-cutting interaction rules for every MBAMS page.
 *
 * These were missing app-wide rather than page by page, so they live in one
 * file that each page links last. Editing sixteen inline <style> blocks to
 * say the same thing is how they drifted apart in the first place.
 *
 * Covers: UI/UX standard sections 2.1, 4, 5.2, 10.1, 13.3, 13.4 and 14.2.
 */

/* ── 4. Focus must always be visible ─────────────────────────────────────
   Pages used to set `outline: none` and signal focus with a border colour
   alone, which disappears for anyone who cannot distinguish the two greys
   and for every keyboard user on a high-contrast display. */
:focus-visible {
    outline: 2px solid var(--accent, #1877F2);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Keep the ring clear of a coloured control's own background. */
.btn:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
    outline-color: currentColor;
    outline-offset: 3px;
}

/* A focused field must never sit under the sticky header. */
:target,
h1, h2, h3, h4, h5, h6 {
    scroll-margin-top: 5rem;
}

/* ── 13.4. Skip to content ───────────────────────────────────────────────
   Visible only once focused, so it costs sighted users nothing. */
.skip-link {
    position: absolute;
    left: 0.5rem;
    top: -4rem;
    z-index: 9999;
    padding: 0.625rem 1rem;
    /* The fill under white text is the deeper blue: the flat one measures
       4.23:1 here, under the 4.5 floor. */
    background: var(--accent-strong, #1569E0);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 0.5rem 0.5rem;
    transition: top 0.15s ease;
}
.skip-link:focus {
    top: 0;
}

/* ── 5.2. 16px minimum on mobile fields ──────────────────────────────────
   iOS Safari zooms the whole page in when a focused field is under 16px,
   and does not zoom back out. Several screens used 12px and 13px. */
@media (max-width: 48rem) {
    input, select, textarea {
        font-size: max(1rem, 100%);
    }
}

/* ── 2.1. Touch targets ──────────────────────────────────────────────────
   44px on touch pointers, 24px on precise ones. Applied to the hit area,
   so a small icon keeps its visual size and gains reachable padding. */
/*
 * Wrapped in :where() so these carry no specificity.
 *
 * They are a floor, not a ceiling. Written plainly, `a.btn` here (0,1,1) beat
 * `.btn` in style.css (0,1,0) and this file loads last — so the 24px
 * fine-pointer minimum silently overrode the app's 44px and left the header
 * and action buttons at 31px and 38px. :where() makes anything in the app's
 * own stylesheet win, while these still apply to markup nothing else styles.
 */
@media (pointer: coarse) {
    :where(button, [role="button"], a.btn, input[type="submit"], input[type="button"],
           .nav-item, .tab-item, .icon-btn) {
        min-height: 44px;
        min-width: 44px;
    }
}
@media (pointer: fine) {
    :where(button, [role="button"], a.btn, input[type="submit"], input[type="button"]) {
        min-height: 24px;
        min-width: 24px;
    }
}

/* Stops the double-tap-to-zoom delay without disabling zoom itself. */
button, [role="button"], a, label, select, summary {
    touch-action: manipulation;
}

/* ── 14.2. Comparable figures line up ────────────────────────────────────
   Attendance counts, percentages and LRNs are read in columns. */
td, th, .stat-value, .count, .percentage, .lrn, output, time {
    font-variant-numeric: tabular-nums;
}

/* ── 13.3. Status is never colour alone ──────────────────────────────────
   Present and absent were distinguished only by green and red. */
.status-present::before { content: "\2713\00a0"; }
.status-absent::before  { content: "\2715\00a0"; }
.status-present::before,
.status-absent::before  { font-weight: 700; }

/* ── 10.1. Respect reduced motion ────────────────────────────────────────
   Honours the setting without removing transitions that convey state, by
   collapsing them to a duration below the perception threshold. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── 8. Overlays must not scroll the page behind them ────────────────── */
.modal, .modal-body, .drawer, .sheet, .offcanvas {
    overscroll-behavior: contain;
}

/* ── 22. Long names and long content must not break the layout ────────── */
.card, .list-item, .cell, td, th, .name, .student-name {
    min-width: 0;
    overflow-wrap: break-word;
}

/* ── 13.2. Hide decoration from assistive technology ────────────────────
   Bootstrap Icons are decorative wherever a text label sits beside them.
   Icon-only controls still need their own aria-label. */
[class^="bi-"][aria-hidden="true"],
[class*=" bi-"][aria-hidden="true"] {
    speak: none;
}