/* Q3 Recall — custom styles (plain CSS so no build step is needed; Tailwind
   utilities + brand colours are provided by the Tailwind Play CDN + inline
   tailwind.config in the layout). */

/* Dyslexia-friendly font, self-hosted from /fonts (GDPR-friendly). Falls back
   to a CDN/Lexend/system font if the files aren't present. */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexic-Regular.woff2') format('woff2');
    font-weight: 400; font-display: swap;
}
@font-face {
    font-family: 'OpenDyslexic';
    src: url('/fonts/OpenDyslexic-Bold.woff2') format('woff2');
    font-weight: 700; font-display: swap;
}

html { -webkit-tap-highlight-color: transparent; }
body { background: #f8fafc; color: #1f1430; font-family: 'Inter', system-ui, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; }
html.dark body { background: #160d22; color: #f1f5f9; }

[x-cloak] { display: none !important; }
.app-scroll::-webkit-scrollbar { width: 0; height: 0; }
.preline { white-space: pre-line; }

.press { transition: transform .08s ease, filter .12s ease; }
.press:active { transform: scale(.97); }

.card { background: #fff; border-radius: 1rem; box-shadow: 0 1px 3px rgba(31,20,48,.08), 0 1px 2px rgba(31,20,48,.06); }
html.dark .card { background: rgba(58,18,54,.45); box-shadow: none; }

/* Traffic-light self-assessment buttons */
.tl-btn { flex: 1 1 0%; border-radius: 1rem; padding: 1.25rem .75rem; font-weight: 800; color: #fff; text-align: center; font-size: 1.05rem; box-shadow: 0 1px 3px rgba(31,20,48,.08); }
.tl-green { background: #16a34a; }
.tl-amber { background: #d97706; }
.tl-red   { background: #dc2626; }
.tl-btn:hover { filter: brightness(1.05); }

/* Colour-blind-safe traffic lights: prepend a distinct symbol */
html.cb .tl-red::before   { content: '\2717  '; }   /* ✗ */
html.cb .tl-amber::before { content: '\2248  '; }   /* ≈ */
html.cb .tl-green::before  { content: '\2713  '; }   /* ✓ */

/* Adjustable base text size (scales the rem-based UI), independent of dyslexia */
html.txt-sm { font-size: 15px; } html.txt-base { font-size: 16px; }
html.txt-lg { font-size: 18px; } html.txt-xl { font-size: 20px; }

/* Dyslexia mode */
html.dyslexia body { font-family: 'OpenDyslexic', 'Lexend', 'Comic Sans MS', sans-serif; letter-spacing: .02em; }
html.dyslexia main { line-height: 1.9; }
html.dyslexia:not(.dark) body { background: #f7f1e3; }
html.dyslexia:not(.dark) .card { background: #fffdf7; }
.dyslexia .flashcard { font-size: 1.4rem; line-height: 2.0; letter-spacing: .05em; word-spacing: .14em; }

/* Login hero photo cycle */
.hero-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: heroCycle 18s infinite; }
.hero-layer:nth-child(1) { animation-delay: 0s; }
.hero-layer:nth-child(2) { animation-delay: 6s; }
.hero-layer:nth-child(3) { animation-delay: 12s; }
@keyframes heroCycle { 0%{opacity:0;transform:scale(1.06);} 8%{opacity:1;} 28%{opacity:1;transform:scale(1.12);} 36%{opacity:0;} 100%{opacity:0;} }

/* Dark-mode native form controls stay readable */
html.dark select, html.dark input, html.dark textarea { color-scheme: dark; color: #f1f5f9; }
html.dark select option { background: #2a1d3d; color: #f1f5f9; }

/* Base form-control styling so inputs are always visible (independent of the
   Tailwind "forms" plugin, which doesn't reliably load from the CDN). */
input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]),
select,
textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: .6rem;
    padding: .55rem .75rem;
    background-color: #fff;
    color: #1f1430;
    line-height: 1.4;
    font-size: 1rem;
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: #4e1848;
    box-shadow: 0 0 0 3px rgba(78,24,72,.18);
}
input[type=checkbox], input[type=radio] { width: 1.05rem; height: 1.05rem; accent-color: #4e1848; }
input[type=file] { font-size: .9rem; }
html.dark input:not([type=checkbox]):not([type=radio]):not([type=file]),
html.dark select,
html.dark textarea {
    background-color: #2a1d3d;
    border-color: rgba(255,255,255,.15);
    color: #f1f5f9;
}
::placeholder { color: #94a3b8; }