/*
 * app.css — plain CSS only. No Sass, no PostCSS, no build step.
 *
 * Bootstrap 5 does the heavy lifting; this file holds only what Bootstrap
 * cannot express. Keep it small: if a utility class exists, use it instead.
 */

:root {
    --exam-surface: #f8f7f2;
    --exam-focus: #0d6efd;
}

body {
    background-color: var(--exam-surface);
    -webkit-text-size-adjust: 100%;
}

/*
 * Visible focus everywhere. Bootstrap only styles focus on its own components,
 * and the question palette in Phase 5 must be fully keyboard navigable.
 */
:focus-visible {
    outline: 3px solid var(--exam-focus);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Respect a candidate who has asked the OS for reduced motion. */
@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;
    }
}

/* ── exam UI ─────────────────────────────────────────────────────────── */

.clock {
    font-variant-numeric: tabular-nums;   /* digits stop jittering as they change */
    font-size: 1.5rem;
    line-height: 1.1;
}

.palette-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(2.5rem, 1fr));
    gap: 0.375rem;
}

.palette-btn {
    aspect-ratio: 1;
    padding: 0;
    font-size: 0.8125rem;
    font-variant-numeric: tabular-nums;
}

/* The current question needs to be distinguishable from an answered one
   without relying on colour alone. */
.palette-current {
    outline: 3px solid var(--bs-primary);
    outline-offset: 1px;
}

.option-row {
    cursor: pointer;
    background-color: var(--bs-body-bg);
    transition: background-color 0.12s ease, border-color 0.12s ease;
}

.option-row:hover {
    background-color: var(--bs-secondary-bg);
}

.option-selected {
    border-color: var(--bs-primary) !important;
    background-color: rgba(var(--bs-primary-rgb), 0.06);
}

.option-key {
    min-width: 1.25rem;
}

.option-text {
    /* Option text is candidate-facing content of unknown length; never let a
       long unbroken string push the card sideways. */
    overflow-wrap: anywhere;
}

.exam-header {
    z-index: 1020;
}

@media (max-width: 575.98px) {
    .clock { font-size: 1.25rem; }
    .palette-grid { grid-template-columns: repeat(auto-fill, minmax(2.25rem, 1fr)); }
}