/* ReadingChallenge.UI — shared styles. Colours come from each app's --rc-* tokens (see app.css). */

:root {
    --rc-focus: #0a4d8c;
}

/* Visible keyboard focus everywhere (WCAG 2.4.7). Mouse clicks keep the normal look. */
:focus-visible {
    outline: 3px solid var(--rc-focus) !important;
    outline-offset: 2px !important;
    box-shadow: none !important;
}

/* Skip link: hidden until focused (WCAG 2.4.1). */
.rc-skip-link {
    position: absolute;
    left: 1rem;
    top: -4rem;
    z-index: 2000;
    padding: .75rem 1rem;
    background: #fff;
    color: #0a2540;
    font-weight: 600;
    border-radius: .375rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
}

    .rc-skip-link:focus {
        top: 1rem;
    }

.rc-icon {
    flex-shrink: 0;
    vertical-align: -0.2em;
}

/* Modal (Bootstrap markup driven by Blazor, no Bootstrap JS) */
body.rc-modal-open {
    overflow: hidden;
}

.modal.show {
    background: transparent;
}

/* Toasts */
.rc-toasts {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    max-width: min(28rem, calc(100vw - 2rem));
}

.rc-toasts-errors {
    bottom: auto;
    top: 1rem;
}

.rc-toast {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1rem;
    border-radius: .5rem;
    border: 1px solid transparent;
    background: #fff;
    box-shadow: 0 6px 24px rgba(10, 37, 64, .18);
    color: #1f2328;
}

.rc-toast-text {
    flex: 1;
}

.rc-toast-success { border-color: #1a6e3a; border-left-width: 6px; }
.rc-toast-success .rc-icon { color: #1a6e3a; }
.rc-toast-info { border-color: #0a4d8c; border-left-width: 6px; }
.rc-toast-info .rc-icon { color: #0a4d8c; }
.rc-toast-warning { border-color: #8a5a00; border-left-width: 6px; }
.rc-toast-warning .rc-icon { color: #8a5a00; }
.rc-toast-error { border-color: #b4232f; border-left-width: 6px; }
.rc-toast-error .rc-icon { color: #b4232f; }

/* Loading */
.rc-loading {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    color: #3d4752;
}

/* Busy buttons: the "Please wait…" message and its spinner sit next to the button (never inside it). The status
   region is always in the page (empty when idle) so screen readers announce the message when it appears. */
.rc-busy {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem .75rem;
    max-width: 100%;
}

.rc-busy-block {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
}

.rc-busy-status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    color: #3d4752;            /* 9.6:1 on white */
    font-weight: 600;
}

    .rc-busy-status:empty {
        gap: 0;
    }

.rc-busy-spinner {
    flex-shrink: 0;
    color: #0a4d8c;            /* 8.2:1 on white (non-text contrast 3:1 needed) */
}

/* Busy: the button keeps focus but looks unavailable (no colour change needed for meaning: the message says it). */
.btn[aria-disabled="true"] {
    opacity: .7;
    cursor: progress;
    pointer-events: auto;
}

/* With reduced motion the spinner is replaced by a still ring; the message carries the meaning. */
@media (prefers-reduced-motion: reduce) {
    .spinner-border {
        animation: none !important;
        border-right-color: currentColor;
        opacity: .6;
    }
}

/* Stepper */
.rc-stepper {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    padding: 0;
    margin: 0 0 1.5rem;
    counter-reset: step;
}

.rc-step {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: #3d4752;
}

.rc-step-marker {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid currentColor;
    font-weight: 700;
}

.rc-step-current {
    color: #0a4d8c;
    font-weight: 700;
}

    .rc-step-current .rc-step-marker {
        background: #0a4d8c;
        border-color: #0a4d8c;
        color: #fff;
    }

.rc-step-done {
    color: #1a6e3a;
}

/* Stat card */
.rc-stat .rc-stat-label {
    font-size: .875rem;
    font-weight: 600;
    color: #3d4752;
    text-transform: uppercase;
    letter-spacing: .03em;
}

.rc-stat .rc-stat-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    color: #0a2540;
}

.rc-stat .rc-stat-hint {
    font-size: .875rem;
    color: #3d4752;
}

/* Respect reduced-motion preferences (WCAG 2.3.3). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}