/* Student page, loaded AFTER styles.css. Same language as the projector and the
   club's orientation deck: black, white, one amber, Geist. Paul's layouts stay;
   this only replaces the colour/ornament layer (gradients, glows, glass, radii). */
@import url('/static/fonts/fonts.css');

:root {
  --ink: #FFF; --ink-dark: #FFF; --navy: #0A0A0A; --navy-2: #0A0A0A; --surface: #0A0A0A; --surface-2: #111;
  --paper: #0A0A0A; --paper-2: #111; --line: #262626; --line-dark: #262626;
  --muted: #8F8F8F; --muted-dark: #8F8F8F;
  --orange: #F59E0B; --orange-soft: #111; --violet: #F59E0B; --violet-2: #F59E0B; --cyan: #F59E0B; --cyan-soft: #111;
  --lime: #6BE27F; --yellow: #F59E0B; --red: #FF6B6B; --white: #FFF;
  --shadow: none; --glow: none; --radius: 0;
  --mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace;
  --sans: 'Geist', -apple-system, 'Segoe UI', sans-serif;
}
html, .student-body { background: #0A0A0A; }
.student-body::before { display: none; }
body { color: #FFF; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible { outline: 2px solid #F59E0B; outline-offset: 2px; }

/* no ornament */
.ambient-orb, .orb-one, .orb-two, .lobby::after, .lesson-stage::before, .button-glow::after, .collab-ring, .success-rings i,
.room-ticket::before, .room-ticket::after, .brand-logos, .brand small { display: none !important; }
* { box-shadow: none !important; backdrop-filter: none !important; text-shadow: none !important; filter: none !important; }
*, *::before, *::after { border-radius: 0 !important; }
.avatar, .member-avatar, .commit-stamp, .commit-stamp i, .success-rings span, .leader-pulse, .status-dot, .timeline-commit span,
.practice-progress i, .history-node i, .mini-graph i, .instruction-card li i, .collab-ring i, .lock-pill { border-radius: 50% !important; }

/* type */
h1, h2, h3 { font-weight: 900; letter-spacing: -.02em; }
.eyebrow, .welcome-label, .next-prompt span, .instruction-card > header, .assignment-card > span, .puzzle-card > span,
.room-ticket span, .room-ticket small, .stage-zone small, .history-stack > span, .remote-stack > span, .window-title small {
  font-family: var(--mono); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: #F59E0B; }
.welcome-copy h1 em, .lesson-slide h1 em, .practice-complete h1 em { color: #F59E0B; background: none; -webkit-text-fill-color: #F59E0B; }
.welcome-copy > p:last-child, .slide-copy > p:last-child, .section-intro > p:last-child, .lobby-head p:last-child { color: #8F8F8F; }
.brand b { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: #8F8F8F; }
.topbar { border-bottom: 1px solid #262626; }

/* surfaces: flat, one hairline */
.panel, .welcome-form, .identity-card, .practice-shell, .instruction-card, .assignment-card, .command-sheet, .secret-form,
.mission-hero, .puzzle-card, .team-option, .team-node, .leader-console, .waiting-note, .next-prompt, .terminal, .repo-explorer,
.repo-state, .code-window, .commit-terminal, .stage-zone, .sync-machine, .start-card, .github-repo-button, .repo-provisioning,
.repo-side-link, .mission-alert, .history-stack, .remote-stack, .diff-preview, .toast, .join-form input, .field input, .field select,
.terminal-form, .window-title, .terminal-bar, .code-window header, .diff-preview header, .section-intro, .completed-flow span,
.puzzle-card button, .github-orbit > i, .start-card code, .assignment-card pre, .next-prompt > code, .stage-command code, .modified-chip {
  background: #0A0A0A !important; background-image: none !important; border-color: #262626 !important; color: #FFF; }
.welcome-form, .identity-card, .panel, .practice-shell, .instruction-card, .assignment-card, .command-sheet, .secret-form, .mission-hero,
.puzzle-card, .team-option, .team-node, .next-prompt, .terminal, .repo-explorer, .repo-state, .code-window, .stage-zone, .sync-machine,
.start-card, .github-repo-button, .mission-alert, .history-stack, .remote-stack, .room-ticket { border: 1px solid #262626 !important; }
.stage-zone { border-style: dashed !important; }
.stage-zone.ready, .puzzle-card.solved, .tree-file.staged, .team-option:hover, .github-repo-button:hover, .repo-side-link:hover { border-color: #F59E0B !important; }
.mission-alert { border-left: 1px solid #262626 !important; color: #FFF; }
.field label, .form-heading h2, .identity-card h3, .team-option h2, .next-prompt h2, .repo-state h3, .command-sheet h3, .secret-form label,
.window-title, .instruction-card li, .start-card strong, .sync-machine strong, .puzzle-card h2, .team-node strong { color: #FFF; }
.form-heading { border-bottom: 1px solid #262626; }
.form-heading > span { background: none !important; border: 1px solid #262626; color: #F59E0B; font-family: var(--mono); }
.field input, .field select, .join-form input, .secret-form input { color: #FFF !important; background: #000 !important; border: 1px solid #262626 !important; }
.field input::placeholder { color: #4a4a4a; }
.room-ticket { background: #0A0A0A !important; background-image: none !important; color: #FFF !important; }
.room-ticket strong { color: #F59E0B; }
.avatar, .member-avatar, .form-heading > span, .collab-ring i, .commit-stamp i, .success-rings span, .instruction-card li i {
  background: #111 !important; background-image: none !important; color: #FFF !important; border: 1px solid #262626 !important; }
.leader-pulse, .status-dot { background: #F59E0B !important; }
.team-node .crown { color: #F59E0B; }

/* buttons: amber = do this, outline = the other thing */
.button, .update-button, .terminal-form button, .move-row button, .puzzle-card button {
  color: #0A0A0A !important; background: #F59E0B !important; background-image: none !important; border: 1px solid #F59E0B !important;
  font-family: var(--mono); font-weight: 500; letter-spacing: .06em; transform: none !important; }
.button:hover, .update-button:hover { transform: none !important; filter: none !important; background: #FFB627 !important; }
.button.secondary, .button.quiet, .puzzle-card button, .terminal-form button { color: #FFF !important; background: transparent !important; border: 1px solid #3a3a3a !important; opacity: 1; }
.button.quiet:hover, .puzzle-card button:hover, .terminal-form button:hover { border-color: #F59E0B !important; color: #F59E0B !important; background: transparent !important; }
.button.danger { background: #FF6B6B !important; border-color: #FF6B6B !important; }

/* progress and state: amber = where you are, green = done, nothing glows */
.slide-progress i { background: #262626; }
.slide-progress i.active { background: #F59E0B; background-image: none; animation: none; }
.practice-progress i { background: #0A0A0A; border-color: #262626; color: #8F8F8F; }
.practice-progress .current i { color: #F59E0B; border-color: #F59E0B; animation: none; }
.practice-progress .done i { color: #0A0A0A; background: #6BE27F; border-color: #6BE27F; }
.practice-progress .current { color: #F59E0B; } .practice-progress .done { color: #6BE27F; }
.timeline-track i { background: #262626; }
.timeline-commit span { background: #0A0A0A; border-color: #F59E0B; }
.tree-file i, .tree-file b { color: #F59E0B; }
.tree-file.staged { background: transparent !important; } .tree-file.staged b { color: #6BE27F; }
.terminal-line.success { color: #6BE27F; } .terminal-line.hint { color: #F59E0B; } .terminal-line.system { color: #8F8F8F; }
.terminal-line.input { color: #FFF; } .terminal-line.output { color: #C8C8C8; } .terminal-form > span { color: #F59E0B; }
.terminal-output { font-size: 13px; } .terminal-line { color: #C8C8C8; }
.code-window pre del { color: #FF6B6B; background: transparent; } .code-window pre ins { color: #6BE27F; background: transparent; }
.diff-preview del { color: #FF6B6B; background: transparent; } .diff-preview ins { color: #6BE27F; background: transparent; }
.code-window header i, .terminal-bar i { display: none; }
.state-meter strong, .start-card code, .assignment-card pre, .next-prompt > code, .commit-terminal strong { color: #F59E0B; }
.commit-stamp { color: #6BE27F; border-color: #6BE27F !important; }
.model-display > div { border-top: 1px solid #262626; }
.sync-arrows span, .sync-arrows .pull-arrow { color: #F59E0B; }
.floating-file { background: #F59E0B !important; background-image: none !important; color: #0A0A0A !important; }
.stage-zone.ready .floating-file { background: #6BE27F !important; }
.toast.error { border-left: 1px solid #FF6B6B !important; } .toast.success { border-left: 1px solid #6BE27F !important; }
.plain-loader { border-color: #262626; border-top-color: #F59E0B; }

/* the intro: eyes on the screen */
.intro-card { min-height: calc(100vh - 140px); display: grid; place-content: center; text-align: center; gap: 18px; }
.intro-card .n { font-family: var(--mono); font-size: 13px; letter-spacing: .28em; color: #F59E0B; text-transform: uppercase; }
.intro-card h1 { font-size: clamp(40px, 6vw, 88px); line-height: .96; letter-spacing: -.03em; margin: 0; }
.intro-card p { color: #8F8F8F; font-size: clamp(16px, 1.6vw, 22px); max-width: 640px; margin: 0 auto; }
.intro-card .hint { font-family: var(--mono); font-size: 12px; letter-spacing: .22em; color: #4a4a4a; text-transform: uppercase; margin-top: 24px; }

/* leftovers found on the team screen */
.option-icon { background: transparent !important; border: 1px solid #262626 !important; color: #F59E0B; }
.phase-badge, .status-badge, .step-counter { background: transparent !important; border: 1px solid #262626 !important; color: #8F8F8F; font-family: var(--mono); font-weight: 500; letter-spacing: .18em; text-transform: uppercase; }
.step-counter { color: #F59E0B; }
.option-number { color: #262626; }

/* activity surfaces added after the teaching deck */
.madlib-entry { border: 1px solid #262626; background: #0a0a0a; padding: 22px; display: grid; gap: 18px; }
.madlib-entry > header, .deck-hand > header, .deck-local > header { display: flex; justify-content: space-between; gap: 16px; align-items: center; font-family: var(--mono); }
.madlib-entry > header span, .deck-hand > header span { color: #f59e0b; font-size: 11px; letter-spacing: .18em; }
.madlib-entry form { display: grid; gap: 12px; }
.madlib-entry label { display: grid; gap: 7px; color: #8f8f8f; font-size: 12px; }
.madlib-entry input { width: 100%; background: #000; border: 1px solid #262626; color: #fff; padding: 12px; font: inherit; }
.madlib-entry p { color: #8f8f8f; font-size: 12px; line-height: 1.55; margin: 0; }
.madlib-entry code { color: #f59e0b; }
.madlib-download { text-align: center; }
.github-invite-help { display: inline-block; margin-top: 10px; color: #f59e0b; font: 700 11px var(--mono); text-decoration: none; }
.github-invite-help:hover { text-decoration: underline; }
.solved-secret strong { color: #6be27f; }

.deck-page { padding: 30px clamp(20px, 4vw, 64px) 48px; display: grid; gap: 24px; min-height: calc(100vh - 90px); }
.deck-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; }
.deck-head h1 { margin: 4px 0; font-size: clamp(42px, 6vw, 82px); line-height: .95; }
.deck-head > div > p:last-child { color: #8f8f8f; max-width: 700px; }
.deck-score { border-left: 1px solid #262626; padding-left: 28px; display: grid; }
.deck-score strong { color: #f59e0b; font: 700 42px/1 var(--mono); }
.deck-score span { color: #8f8f8f; font-size: 12px; }
.deck-board { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(340px, .75fr); gap: 18px; }
.deck-repo, .deck-terminal, .deck-hand { border: 1px solid #262626; background: #080808; padding: 20px; }
.deck-repo { display: grid; grid-template-columns: 1fr 90px 1fr; align-items: center; }
.deck-github, .deck-local { min-height: 150px; border: 1px solid #262626; padding: 18px; display: grid; gap: 12px; }
.deck-github { grid-template-columns: auto 1fr; align-items: center; }
.deck-github svg { width: 34px; height: 34px; }
.deck-github span { display: grid; }
.deck-github small { color: #8f8f8f; }
.deck-github > b { grid-column: 1 / -1; color: #f59e0b; font-family: var(--mono); }
.deck-arrow { display: grid; justify-items: center; gap: 7px; color: #8f8f8f; font: 10px var(--mono); text-align: center; }
.deck-arrow i { width: 100%; border-top: 1px solid #f59e0b; }
.deck-local > div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #1c1c1c; padding-top: 10px; color: #8f8f8f; font-size: 12px; }
.deck-local strong { color: #fff; text-align: right; }
.deck-terminal { padding: 0; min-height: 230px; overflow: hidden; }
.deck-terminal > header { border-bottom: 1px solid #262626; padding: 12px 16px; color: #8f8f8f; font: 11px var(--mono); letter-spacing: .15em; }
#deck-terminal-output { height: 205px; overflow: auto; padding: 12px 16px; font: 12px/1.5 var(--mono); }
#deck-terminal-output p { margin: 0 0 6px; color: #8f8f8f; }
#deck-terminal-output .input { color: #fff; }
#deck-terminal-output .success { color: #6be27f; }
#deck-terminal-output .error { color: #ff6b6b; }
.deck-hand { display: grid; gap: 15px; }
.deck-hand > header small { color: #8f8f8f; }
.deck-hand > div { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.deck-hand button { min-height: 115px; border: 1px solid #3a3a3a; background: #0a0a0a; color: #fff; padding: 18px; display: grid; align-content: space-between; gap: 18px; text-align: left; cursor: pointer; transition: border-color .18s, transform .18s; }
.deck-hand button:hover { border-color: #f59e0b; transform: translateY(-3px); }
.deck-hand button span { color: #f59e0b; font: 10px var(--mono); letter-spacing: .16em; }
.deck-hand button code { white-space: normal; font: 13px/1.45 var(--mono); }
.deck-complete { min-height: calc(100vh - 100px); display: grid; place-content: center; justify-items: center; text-align: center; }
.deck-complete h1 { font-size: clamp(48px, 7vw, 92px); line-height: .92; margin: 12px 0; }
.deck-complete p:last-child { color: #8f8f8f; }

@media (max-width: 900px) {
  .deck-head { align-items: start; }
  .deck-board { grid-template-columns: 1fr; }
  .deck-repo { grid-template-columns: 1fr; gap: 12px; }
  .deck-arrow { grid-template-columns: 1fr auto 1fr; }
  .deck-arrow i { height: 1px; }
  .deck-hand > div { grid-template-columns: 1fr; }
}