/* Rushmore Academy components. Needs tokens.css and base.css. Class names used by app.js, today.js, admin.js and diagnostic.js are kept. */

/* Header: the fixed top bar lives in design/header.css (shield, wordmark, links; compact once scrolled; a sheet on phones). */

/* Page title block (keeps #title and #sub) */
.ra-title h1 { margin-bottom: var(--s-2); }
.ra-title .sub { margin-bottom: var(--s-6); font-family: var(--font-text); font-size: var(--fs-2); font-style: italic; color: var(--muted); }

/* Student card */
.stu { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); flex-wrap: wrap; }
.stu strong { font-family: var(--font-heading); font-size: var(--fs-4); letter-spacing: 0; font-weight: 500; }
.stu .meta { margin-top: 2px; }

/* Block card (today) */
.card h2 { display: flex; justify-content: space-between; gap: var(--s-3); align-items: baseline; font-family: var(--font-heading); font-size: var(--fs-3); letter-spacing: 0; }
.card h2 span:first-child { flex: 1 1 auto; }
.min { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-0); letter-spacing: .12em; text-transform: uppercase; color: var(--gold-text); white-space: nowrap; }
.course { color: var(--muted); font-family: var(--font-ui); font-size: var(--fs-1); margin: 2px 0 var(--s-3); }
.card ul { margin: var(--s-2) 0 0; padding-left: 1.2em; }
.card li { margin: var(--s-2) 0; }
.card li a { font-family: var(--font-ui); font-size: var(--fs-1); margin-left: 2px; }
.card li a.lesson { color: var(--gold-text); font-weight: 600; text-decoration-color: var(--gold); }
.card.hw h2 { color: var(--text); }

/* Quiz panel (today.js: .chk button, .quiz panel, .qstem, .choice) */
.chk { display: flex; width: max-content; max-width: 100%; margin: var(--s-2) 0; font-size: var(--fs-0); padding: 8px 16px; min-height: 44px; color: var(--gold-text); border-color: var(--gold); background: transparent; font-family: var(--font-display); letter-spacing: .14em; text-transform: uppercase; font-weight: 600; }
.chk:hover { background: var(--gold-text); color: var(--parchment); border-color: var(--gold-text); }
.quiz { margin-top: var(--s-2); }
.quiz:not(:empty) { background: var(--bg-alt); border-radius: var(--r-3); padding: var(--s-4); margin-top: var(--s-3); }
.qstem { margin: 0 0 var(--s-3); font-weight: 600; font-size: var(--fs-2); font-family: var(--font-text); }
.choice { display: flex; justify-content: flex-start; width: 100%; text-align: left; margin: var(--s-2) 0; background: var(--card); border-color: var(--line); font-family: var(--font-text); font-size: var(--fs-2); font-weight: 400; }
.choice:hover:not(:disabled) { border-color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
.quiz .ok, .quiz .no { font-weight: 600; margin: var(--s-3) 0 var(--s-1); }
.quiz .meta { margin-bottom: var(--s-2); }

/* Diagnostic (diagnostic.js: .q, plain buttons, .go, .meta) */
.diag .q, .q { font-size: var(--fs-3); font-family: var(--font-text); margin: 0 0 var(--s-4); line-height: 1.4; }
.diag button { display: flex; width: 100%; justify-content: flex-start; text-align: left; margin: 0 0 var(--s-2); font-family: var(--font-text); font-size: var(--fs-2); font-weight: 400; }
.diag button:hover:not(:disabled) { border-color: var(--gold); box-shadow: inset 2px 0 0 var(--gold); }
.diag .go { background: var(--primary); color: var(--primary-ink); justify-content: center; border-color: var(--primary); }
.diag input { width: 100%; margin-bottom: var(--s-3); }

/* Toast */
.ra-toast { position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translate(-50%, 16px); opacity: 0; background: var(--ink); color: var(--parchment); font-family: var(--font-ui); font-size: var(--fs-1); padding: 12px 18px; border-radius: var(--r-3); box-shadow: var(--shadow-3); z-index: 70; max-width: min(92vw, 480px); transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out); pointer-events: none; }
.ra-toast.show { opacity: 1; transform: translate(-50%, 0); }
:root[data-theme="dark"] .ra-toast { background: var(--parchment); color: var(--ink); }

/* Badges and honors chips */
.badge, .honor-chip { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-ui); font-size: var(--fs-0); font-weight: 600; letter-spacing: .04em; padding: 4px 10px; border-radius: var(--r-1); border: 1px solid var(--line-strong); color: var(--text-soft); background: var(--card); vertical-align: middle; }
.badge.gold { border-color: var(--gold); color: var(--gold-text); }
.honor-chip { background: var(--oxblood); color: var(--oxblood-ink); border-color: var(--oxblood); font-family: var(--font-display); letter-spacing: .12em; text-transform: uppercase; }
.honor-chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--gold-bright); }

/* Lesson page (also linked from lesson.css) */
.lesson main > h1, .lesson h1 { font-size: var(--fs-6); margin-bottom: var(--s-6); }
.lesson section { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--s-5) 0 var(--s-4); margin: 0; }
.lesson section h2 { font-family: var(--font-display); font-size: var(--fs-0); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--s-3); font-weight: 600; }
.lesson section:first-of-type { border-top: 1px solid var(--gold); }
.lesson ol, .lesson ul { padding-left: 1.3em; } .lesson li { margin: var(--s-2) 0; }
.lesson #widget { background: var(--bg-alt); border-radius: var(--r-3); padding: var(--s-5); margin-top: var(--s-5); }
.lesson #widget h3 { font-family: var(--font-heading); font-size: var(--fs-4); font-weight: 500; letter-spacing: 0; margin: 0 0 var(--s-4); }
.lesson #widget button { display: block; width: 100%; text-align: left; margin: 0 0 var(--s-2); }
.lesson #widget p { color: var(--muted); font-family: var(--font-ui); font-size: var(--fs-1); margin-top: var(--s-3); }

/* Settings panel (mounted by motion.js) */
.ra-panel { position: fixed; z-index: 61; right: max(16px, env(safe-area-inset-right)); bottom: calc(max(16px, env(safe-area-inset-bottom)) + 60px); width: min(92vw, 340px); background: var(--card); color: var(--text); border-radius: var(--r-3); box-shadow: var(--shadow-3); padding: var(--s-5); font-family: var(--font-ui); transform: translateY(8px); opacity: 0; visibility: hidden; transition: opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out), visibility 0s linear var(--t-base); }
.ra-panel.open { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.ra-panel h2 { font-family: var(--font-display); font-size: var(--fs-0); letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--gold-text); margin: 0 0 var(--s-3); font-weight: 600; }
.ra-panel .opt { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: 10px 0; border-top: 1px solid var(--line); font-size: var(--fs-1); }
.ra-panel .opt:first-of-type { border-top: 0; }
.ra-panel .opt span { color: var(--text); }
.ra-panel select { min-height: 44px; padding: 6px 30px 6px 10px; font-size: max(1rem, var(--fs-0)); }
/* The switch is a 56 by 44 target; the track and knob are drawn inside it. */
.ra-panel .switch { position: relative; width: 56px; height: 44px; border-radius: 22px; background: transparent; border: 0; padding: 0; min-height: 0; flex: 0 0 auto; }
.ra-panel .switch::before { content: ''; position: absolute; top: 8px; left: 4px; width: 48px; height: 28px; border-radius: 14px; background: var(--line-strong); transition: background-color var(--t-fast) var(--ease-out); }
.ra-panel .switch::after { content: ''; position: absolute; top: 11px; left: 7px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); transition: transform var(--t-fast) var(--ease-out); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); }
.ra-panel .switch[aria-checked="true"]::before { background: var(--gold); }
.ra-panel .switch[aria-checked="true"]::after { transform: translateX(20px); }
.ra-panel .close { width: 100%; margin-top: var(--s-4); min-height: 44px; font-size: var(--fs-0); }

/* Scroll reveal lives in design/motion.css (.reveal, .is-in, data-reveal, data-stagger, data-split). This is the page-load fade for app shells. */
.fade-in { animation: ra-fade 1100ms cubic-bezier(.4, .05, .3, 1) both; }
@keyframes ra-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .fade-in { animation: none; } }
:root[data-motion="reduce"] .fade-in { animation: none; }

/* Small screens: headings need less size */
@media (max-width: 480px) { h1 { font-size: var(--fs-5); } .lesson h1, .lesson main > h1 { font-size: var(--fs-5); } }
/* Administration: emails are not inscriptions */
main.admin .stu strong { font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-2); letter-spacing: 0; text-transform: none; }

/* shown only while the app retries a request after a restart or a busy moment */
.ra-reconnect { position: fixed; left: 50%; bottom: max(1rem, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 90; max-width: min(92vw, 28rem); padding: .75rem 1.1rem; background: #15202B; color: #F4EFE4; border: 1px solid #A1782B; text-align: center; box-shadow: 0 6px 24px rgba(0, 0, 0, .3); }

/* Real math notation (MathML): a touch larger than the surrounding text, in a math-capable face */
math { font-family: 'STIX Two Math', 'Cambria Math', 'Latin Modern Math', 'Noto Sans Math', serif; font-size: 1.14em; }
.choice math, button math { pointer-events: none; }