/* ==========================================================================
   BASE — Reset, Typography, Utilities
   Practice Hub · Academic Command Center
========================================================================== */

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans); background-color: var(--bg-base);
    color: var(--text-primary); line-height: 1.5; overflow-x: hidden;
    -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
button, a {
    font-family: inherit; cursor: pointer; border: none; background: none; outline: none;
    transition: all 0.2s ease; text-decoration: none; color: inherit;
}
/* Ensure interactive controls meet minimum tap target on mobile */
button:not(.filter-pill):not(.color-lbl-btn):not(.nc-copy-btn):not(.stepper-btn):not(.type-btn):not(.topic-add-btn):not(.ncs-btn):not(#mockSelectAllTopics) {
    min-height: var(--tap-target);
}

/* ── Form Elements ── */
input, textarea, select {
    font-family: inherit; font-size: 16px; /* 16px prevents iOS zoom */
    background: var(--bg-card-2); border: 1px solid var(--border);
    color: var(--text-primary); border-radius: var(--radius-sm);
    padding: 0.75rem 1rem; outline: none; transition: border-color 0.2s, box-shadow 0.2s;
    min-height: var(--tap-target); width: 100%;
}
input:focus, textarea:focus, select:focus { border-color: var(--indigo-light); box-shadow: 0 0 0 2px var(--indigo-dim); }
textarea { resize: vertical; min-height: 120px; }
ul { list-style: none; }
img { max-width: 100%; display: block; }
code { font-family: var(--font-mono); font-size: 0.9em; background: rgba(0,0,0,0.3); padding: 0.2rem 0.4rem; border-radius: 4px; }

/* ── Utilities ── */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mt-4 { margin-top: 2rem; }
.mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.w-100 { width: 100%; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--text-tertiary); border-radius: 10px; }

/* ── Backgrounds ── */
.animated-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 0%, rgba(99, 102, 241, 0.05), transparent 60%); }
.scroll-progress-bar { position: fixed; top: 0; left: 0; height: 3px; background: var(--grad-indigo); z-index: 9999; width: 0%; transition: width 0.1s linear; }

/* ── Animations ── */
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }