/* ==========================================================================
   TypeMaster India — Global Polish Layer
   Cross-cutting, non-destructive refinements applied on top of the existing
   design system (style.css / app.css). Built entirely on the shared design
   tokens so light + dark themes stay in sync. Loaded last so it can gently
   elevate shared surfaces without overriding page-specific styling.
   ========================================================================== */

/* ---------------- Themed scrollbars ---------------- */
* {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 45%, transparent) transparent;
}
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 40%, transparent);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-muted) 65%, transparent);
    background-clip: content-box;
}

/* ---------------- Text selection ---------------- */
::selection {
    background: color-mix(in srgb, var(--primary) 32%, transparent);
    color: var(--text);
}

/* ---------------- Mobile tap highlight ---------------- */
a, button, .btn, .nav-link, [role="button"] {
    -webkit-tap-highlight-color: transparent;
}

/* ---------------- Global focus-visible ring (accessibility) ----------------
   Only shows for keyboard users; never for mouse clicks. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
    border-radius: 10px;
}

/* ---------------- Button press feedback ---------------- */
.btn { will-change: transform; }
.btn:active { transform: translateY(0) scale(.985); }
.btn-brand:active,
.btn-accent:active,
.btn-ghost:active { transform: translateY(0) scale(.985); }

/* Disabled buttons should look and behave inert */
.btn:disabled,
.btn.disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* ---------------- Navbar scroll elevation ----------------
   .is-scrolled is toggled from app.js once the page scrolls a little. */
.tm-navbar {
    transition: background .3s ease, box-shadow .3s ease, border-color .3s ease, padding .25s ease;
}
.tm-navbar.is-scrolled {
    background: color-mix(in srgb, var(--bg-2) 88%, transparent);
    box-shadow: 0 10px 34px rgba(2, 8, 23, .28);
    border-bottom-color: var(--border-strong);
}

/* ---------------- Link + card motion consistency ---------------- */
.feature-card,
.exam-card,
.tm-stat,
.quick-action,
.score-card,
.panel {
    will-change: transform;
}

/* Consistent, slightly springy easing for the core interactive surfaces */
.feature-card,
.exam-card,
.tm-stat,
.quick-action,
.score-card {
    transition: transform .28s cubic-bezier(.2, .7, .3, 1),
                box-shadow .28s ease,
                border-color .28s ease;
}

/* ---------------- Image defaults ---------------- */
img { max-width: 100%; }

/* ---------------- Flash / alert polish ---------------- */
main > .container > .alert {
    border-radius: 14px;
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
    animation: tmFadeUp .4s ease both;
}

/* ---------------- Section reveal on scroll ----------------
   Elements tagged with data-reveal fade+rise in when they enter the viewport.
   Opt-in only, so nothing existing changes unless markup adds the attribute. */
[data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .3, 1);
}
[data-reveal].revealed {
    opacity: 1;
    transform: none;
}

/* ---------------- Reduced motion (accessibility) ----------------
   Respect users who ask the OS to minimise animation. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal] { opacity: 1; transform: none; }
}