/* ══════════════════════════════════════════════════════════════════════════
AUTH CARD — the sign-in / register surface, for BOTH tiers
──────────────────────────────────────────────────────────────────────────
Extracted from shared/styles.css:234-303 on 2026-08-16. It lived there
because only instructor/index.html used it; the student login modal
(shared/student-auth.js) hand-rolled a second, visually unrelated design in
inline styles. Now there is one card and two consumers:
instructor/index.html s this file directly (it also links
shared/styles.css, which no longer holds these
rules — the pointer comment there says so).
shared/student-auth.js injects a to this file at kernel load.
WHY A SEPARATE FILE, not a block in shared/styles.css: none of the nine
pages that load student-auth.js link shared/styles.css — index.html,
courses/_shared/{chapter,hub,lab}.html and courses/{grades,tools,practice,
join,calendar}/index.html. Verified 2026-08-16.
── Two rules this file must keep ──────────────────────────────────────────
1. NO BARE ELEMENT SELECTORS AT THE TOP LEVEL. This lands on nine content
pages; a bare `input {}` or `button {}` would restyle chapter bodies the
same way shared/styles.css would restyle 33 dashboards. Every top-level
selector is scoped to .authcard, .auth-* or .ax-auth-*.
shared/styles.test.js enforces this for both files.
2. NEVER READ A BARE var(--accent) / var(--card) / var(--border) / --text2
/ --text3 / --bg2 / --bg3. courses/_shared/_chapter.css:19-31 defines
every one of those names with DIFFERENT values, and --accent is
deliberately overridden per course (courses/{id}.accentColor;
shared/theme-loader.js:14 keeps it off the theme whitelist on purpose).
Reading them would tint this card purple on one course and orange on the
next — and index.html defines none of them at all. So the palette below
is declared as --auth-* locals with LITERAL values.
The literals are the Stage-4 dashboard values (docs/dashboard-design.md
§2, 2026-08-15). They are duplicated from shared/styles.css :root by
necessity, not oversight — if that palette moves, move these too.
No dark-mode block: dark mode is deliberately not shipped on dashboard
surfaces yet (dashboard-design.md §"Dark mode", tracked as VD-12/Stage 5).
══════════════════════════════════════════════════════════════════════════ */
.authcard {
/* Palette — literal copies of the Stage-4 --ax-* values. See note 2 above. */
--auth-accent: #0E8C7A;
--auth-accent-ink: #0A5147;
--auth-accent-rgb: 14,140,122;
--auth-surface: #FFFFFF;
--auth-border: #E9E9E4;
--auth-field-bg: #FBFBF9;
--auth-quiet: #F1F0EC;
--auth-ink: #191C24;
--auth-ink-2: #585E6E;
--auth-ink-3: #9195A3;
--auth-ok: #5F9420;
--auth-ok-bg: #E4F0D4;
--auth-ok-fg: #2C4A12;
--auth-err: #A32D2D;
--auth-err-bg: #F9DEDE;
--auth-err-fg: #6B1E1E;
--auth-r-lg: 16px;
--auth-r: 8px;
--auth-sh-2: 0 2px 6px rgba(20,24,40,.06), 0 12px 32px -14px rgba(20,24,40,.18);
--auth-font: "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
position: relative; z-index: 1;
max-width: 460px; width: 100%;
background: var(--auth-surface);
border: 1px solid var(--auth-border);
border-radius: var(--auth-r-lg);
box-shadow: var(--auth-sh-2);
overflow: hidden;
font-family: var(--auth-font);
color: var(--auth-ink);
/* Column so a tall register form can scroll its body while the accent rail
below stays pinned to the top of the card. */
display: flex; flex-direction: column;
max-height: 100%;
text-align: start;
box-sizing: border-box;
}
.authcard *, .authcard *::before, .authcard *::after { box-sizing: border-box; }
/* The 4px accent rail. Kept as ::before so the card needs no extra element. */
.authcard::before {
content: ''; display: block; flex: none;
height: 4px; background: var(--auth-accent);
}
.auth-card-body {
padding: 36px 40px 32px;
overflow-y: auto;
/* Momentum scroll inside the modal on iOS without the page scrolling too. */
-webkit-overflow-scrolling: touch;
}
/* ── Header ──────────────────────────────────────────────────────────────── */
/* On instructor/index.html the mark is the canonical wordmark (shared/logo.js,
[data-axlogo]). Most student pages do NOT load logo.js, so student-auth.js
renders a plain text wordmark into .auth-wordmark instead — same file, two
hosts, so both are styled here. */
.auth-header { text-align: center; margin-bottom: 28px; }
.auth-header h2 {
font-size: 1.55rem; font-weight: 700;
margin: 0 0 4px; color: var(--auth-ink);
}
.auth-header p { color: var(--auth-ink-3); font-size: 0.88rem; margin: 0; }
.auth-wordmark {
display: block; margin-bottom: 12px;
font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em;
color: var(--auth-ink);
}
.auth-wordmark .auth-wordmark-ai { color: var(--auth-accent); }
/* ── Mode toggle (Sign In / Create Account) ──────────────────────────────── */
.auth-mode-toggle {
display: flex; margin-bottom: 22px;
border: 1.5px solid var(--auth-border); border-radius: 10px;
overflow: hidden; background: var(--auth-quiet);
}
.auth-mode-btn {
flex: 1; padding: 10px 8px; border: none; background: transparent;
font-family: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer;
color: var(--auth-ink-3); transition: background .18s, color .18s;
}
.auth-mode-btn.active {
background: var(--auth-accent); color: #fff;
border-radius: var(--auth-r); margin: 2px;
box-shadow: 0 1px 6px rgba(var(--auth-accent-rgb), 0.28);
}
/* ── Fields ──────────────────────────────────────────────────────────────── */
.authcard input, .authcard select {
width: 100%; padding: 10px 14px;
border: 1.5px solid var(--auth-border); border-radius: var(--auth-r);
font-size: 0.95rem; font-family: inherit; color: var(--auth-ink);
background: var(--auth-field-bg); margin-bottom: 12px; outline: none;
transition: border-color .2s, box-shadow .2s;
}
.authcard input:focus, .authcard select:focus {
border-color: var(--auth-accent);
box-shadow: 0 0 0 3px rgba(var(--auth-accent-rgb), 0.14);
background: #fff;
}
.auth-field { margin-bottom: 14px; }
.auth-field input, .auth-field select { margin-bottom: 0; }
.auth-label {
display: block; font-size: 0.76rem; font-weight: 700;
color: var(--auth-ink-2); margin-bottom: 5px;
text-transform: uppercase; letter-spacing: 0.8px;
}
/* Optional-field marker: lighter than the label, on the same line. */
.auth-label .auth-optional {
font-weight: 600; letter-spacing: 0.4px;
text-transform: none; color: var(--auth-ink-3);
}
/* Guidance under a field (e.g. "Your KSU email looks like …"). Set by
student-auth.js from the institutions registry, so it is often empty. */
.auth-hint {
font-size: 0.78rem; line-height: 1.5;
color: var(--auth-ink-3); margin-top: 6px;
}
/* ── Primary button ──────────────────────────────────────────────────────── */
/* Flat, not a gradient (dashboard-design.md §3: "a gradient primary button is
the single loudest template tell"). No hover-lift — §3 allows colour and
opacity only. */
.auth-btn {
width: 100%; padding: 11px;
background: var(--auth-accent);
color: #fff; border: none; border-radius: var(--auth-r);
font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer;
letter-spacing: 0.3px; transition: background .2s, opacity .2s;
box-shadow: 0 2px 8px rgba(var(--auth-accent-rgb), 0.22);
}
.auth-btn:hover:not(:disabled) { background: var(--auth-accent-ink); }
.auth-btn:disabled { opacity: 0.55; cursor: not-allowed; }
/* ── Messages ────────────────────────────────────────────────────────────── */
/* Hidden until a handler sets display:block — both kernels toggle inline. */
.auth-msg-err, .auth-msg-ok {
font-size: 0.84rem; margin-bottom: 14px;
padding: 9px 12px; border-radius: var(--auth-r);
display: none; line-height: 1.5;
}
.auth-msg-err {
background: var(--auth-err-bg); border: 1px solid var(--auth-err);
color: var(--auth-err-fg);
}
.auth-msg-ok {
background: var(--auth-ok-bg); border: 1px solid var(--auth-ok);
color: var(--auth-ok-fg);
}
/* A link offered inside an error ("New here? Create an account"). */
.auth-msg-err .auth-link { color: var(--auth-err-fg); text-decoration: underline; }
/* ── Secondary actions ───────────────────────────────────────────────────── */
.auth-help {
margin: 14px 0 0; font-size: 0.8rem;
color: var(--auth-ink-3); text-align: center;
}
.auth-link {
color: var(--auth-accent); cursor: pointer; background: none;
border: none; padding: 0; font-family: inherit; font-size: inherit;
font-weight: 600;
}
.auth-link:hover { text-decoration: underline; }
/* ── Consent row (student signup only) ───────────────────────────────────── */
/* The privacy/terms checkbox is the consent moment — no student PII enters the
platform except by the student ticking this. Given weight accordingly: a
bordered well rather than a loose checkbox, so it reads as part of the form
rather than fine print under it. */
.auth-consent {
display: flex; align-items: flex-start; gap: 10px;
margin: 4px 0 16px; padding: 12px 14px;
background: var(--auth-field-bg);
border: 1px solid var(--auth-border); border-radius: 10px;
font-size: 0.82rem; line-height: 1.55; color: var(--auth-ink-2);
cursor: pointer;
}
.auth-consent input[type="checkbox"] {
width: auto; margin: 2px 0 0; flex: none;
accent-color: var(--auth-accent); cursor: pointer;
}
.auth-consent a { color: var(--auth-accent); font-weight: 600; }
/* ── AcademeX ID display (post-signup) ───────────────────────────────────── */
/* The one number a student is told to write on paper exams, so it is set
large in the mono face and given the accent tint the rest of the card
spends sparingly. */
.auth-code {
background: rgba(var(--auth-accent-rgb), 0.07);
border: 1px solid rgba(var(--auth-accent-rgb), 0.28);
border-radius: 10px; padding: 12px 14px; margin-bottom: 16px;
text-align: center;
}
.auth-code-label {
font-size: 0.72rem; font-weight: 700; letter-spacing: 0.8px;
text-transform: uppercase; color: var(--auth-ink-2); margin-bottom: 4px;
}
.auth-code-value {
font-family: "Space Grotesk", ui-monospace, Consolas, monospace;
font-size: 1.45rem; font-weight: 700; letter-spacing: 2px;
color: var(--auth-accent-ink);
}
.auth-code-note {
font-size: 0.76rem; line-height: 1.5;
color: var(--auth-ink-3); margin-top: 6px;
}
/* ── Verify / status pane ────────────────────────────────────────────────── */
.auth-status { text-align: center; padding: 4px 0; }
.auth-status-icon {
width: 52px; height: 52px; margin: 0 auto 14px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
background: rgba(var(--auth-accent-rgb), 0.10);
color: var(--auth-accent-ink); font-size: 1.6rem;
}
.auth-status h3 {
font-size: 1.2rem; font-weight: 700;
margin: 0 0 8px; color: var(--auth-ink);
}
.auth-status p {
color: var(--auth-ink-2); font-size: 0.9rem;
line-height: 1.6; margin: 0 0 16px;
}
/* ── Overlay (student modal + consent gate) ──────────────────────────────── */
/* The scrim is the ink colour at low alpha, not neutral black — black over a
warm ground reads grey-green. */
.auth-overlay {
position: fixed; inset: 0; z-index: 10000;
display: flex; align-items: center; justify-content: center;
padding: 24px;
background: rgba(25, 28, 36, 0.55);
font-family: var(--auth-font);
}
/* Sits above the access-gate panel, which student-auth.js's modal gets
re-parented into (shared/access-gate.js:243-253). */
.auth-overlay-gate { z-index: 100000; }
/* ── Focus visibility ────────────────────────────────────────────────────── */
/* Inputs carry their own teal ring above; these are the controls that had no
visible focus state at all. Added with the extraction — :focus-visible only,
so pointer users see no change. */
.auth-btn:focus-visible,
.auth-mode-btn:focus-visible,
.auth-link:focus-visible,
.auth-consent input[type="checkbox"]:focus-visible {
outline: 2px solid var(--auth-accent-ink);
outline-offset: 2px;
}
/* ── Motion + responsive ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.authcard input, .authcard select,
.auth-btn, .auth-mode-btn {
transition: none !important;
}
}
@media (max-width: 520px) {
.auth-card-body { padding: 28px 22px 24px; }
.auth-overlay { padding: 12px; }
.auth-header { margin-bottom: 22px; }
}