/* =============================================================================
   CSS Custom Properties / Design Tokens
   All reusable values live here. Reference them with var(--name) everywhere else.
   ============================================================================= */

:root {
  /* Brand colours */
  --color-tutor: #7C3AED;         /* Purple — JS Tutor feature */
  --color-tutor-light: #A78BFA;
  --color-console: #0EA5E9;       /* Blue — JS Console feature */
  --color-console-light: #38BDF8;

  /* Neutrals (dark mode base) */
  --color-bg: #282a36;            /* Dracula dark background */
  --color-bg-light: #F8F8F2;      /* Dracula foreground — off-white, used as light surface */
  --color-surface: #1A1A1A;
  --color-surface-2: #242424;
  --color-border: #2E2E2E;
  --color-text: #F0F0F0;
  --color-text-muted: #888888;

  /* Semantic colours */
  --color-success: #22C55E;
  --color-error: #EF4444;
  --color-warning: #F59E0B;

  /* Brand accent — terminal green used across the UI */
  --color-green: #50fa7b;

  /* Typography */
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'Source Code Pro', 'JetBrains Mono', monospace;
}


/* =============================================================================
   Base / Global Reset
   Normalise browser defaults so every element behaves consistently.
   ============================================================================= */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  background-color: var(--color-bg);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

a {
  color: var(--color-tutor-light);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}


/* =============================================================================
   Navigation  (shared across all pages)
   ============================================================================= */

.nav {
  /* 3-column grid: logo | about (centre) | login (right) */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 52px;
}

.nav__logo {
  /* Logo image in the left column */
  width: 100px;
  height: auto;
  justify-self: start;
}

.nav__link {
  font-family: var(--font-mono);
  font-size: 1.5rem;      /* 24px — slightly scaled from Figma's 32px */
  color: var(--color-green);
  text-decoration: none;
  transition: opacity 0.2s;
  /* Centre column — auto-centred by the grid */
  justify-self: center;
}

.nav__link:hover {
  opacity: 0.75;
  text-decoration: none;
}

/* Right column — wraps login + signUp (or greeting + logout) pushed to the far right */
.nav__right {
  display: flex;
  align-items: center;
  gap: 32px;
  justify-self: end;
}

/* "Hi, username" greeting shown when logged in */
.nav__greeting {
  font-family: var(--font-mono);
  font-size: 1.5rem;
  color: var(--color-text-muted);
}

/* Logout link — Dracula pink */
.nav__link--logout {
  color: #FF79C6;
}


/* =============================================================================
   Landing Page  (index.php)
   Full-viewport hero with two retro computer CTAs.
   ============================================================================= */

.home {
  /* Fill the viewport without scrolling */
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.home__title {
  /* "JavaScript Socratic Tutor" — centred below the nav */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2.5rem;          /* ~40px matching Figma */
  color: var(--color-green);
  text-align: center;
  margin-top: 10px;
  letter-spacing: 0.01em;
}

.home__computers {
  /* Two computers side by side — take up all remaining vertical space */
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 88px;                  /* gap between the two computers */
  flex: 1;
  padding-top: 70px;
}

.home__computer {
  /* Each computer is a relative container so the label can overlay the screen */
  position: relative;
  width: 420px;
  flex-shrink: 0;
  --computer-label-top: 38%;
  --computer-label-left: 50%;
}

/* Hide the real cursor when hovering the Study / Practice computers */
.home__computer--study:hover,
.home__computer--study:hover a,
.home__computer--study:hover img,
.home__computer--practice:hover,
.home__computer--practice:hover a,
.home__computer--practice:hover img {
  cursor: none !important;
}

/* The red pill image that follows the mouse */
.custom-cursor {
  position: fixed;
  width: 100px;
  height: 100px;
  pointer-events: none;   /* So it never blocks clicks or hover detection */
  z-index: 9999;
  display: none;           /* Hidden by default, shown via JS on hover */
}

.home__computer-image-link {
  display: block;
}

.home__computer-image-link img {
  /* Computer image fills the container width */
  width: 100%;
  height: auto;
  display: block;
}

.home__computer-link {
  /* The label "Study" / "Practice" sits on top of the dark screen area.
     Positioned at ~38% from the top of the image to land on the screen. */
  position: absolute;
  top: var(--computer-label-top);
  left: var(--computer-label-left);
  transform: translate(-50%, -50%);
  width: 55%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 2rem;
  color: var(--color-green);
  text-decoration: none;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 0.2s;
}

.home__computer:hover .home__computer-link {
  opacity: 0.75;
  text-decoration: none;
}


/* =============================================================================
   About Page  (about.php)
   Full-page text block explaining the platform.
   ============================================================================= */

.about__content {
  /* Large text block — generous horizontal padding matches the Figma left offset */
  padding: 48px 142px 64px;
  max-width: 1440px;
}

.about__content p {
  /* White, bold, monospace — matching the Figma text node */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.5rem;      /* ~24px, scaled down slightly from Figma's 40px for readability */
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.about__content p:last-child {
  margin-bottom: 0;
}


/* =============================================================================
   Study Page  (study.php)
   Scrollable roadmap — pick a topic to start a Socratic discussion.
   ============================================================================= */

.study__subtitle {
  /* "Select topic to start a discussion" — green, centred below the nav */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-green);
  text-align: center;
  padding: 32px 52px 24px;
}

.study__roadmap {
  /* Scrollable content area — left-aligned, generous horizontal padding */
  padding: 0 96px 64px;
}


/* Phase heading: "Phase 1 — The Very Basics" */
.roadmap-phase {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: #FF79C6;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Collapsible topic — wraps the summary + list */
.roadmap-topic {
  margin-top: 0.75rem;
  /* Remove the default browser triangle marker */
  list-style: none;
}

/* The clickable topic title row */
.roadmap-topic summary {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: #ffffff;
  cursor: pointer;
  /* Replace the default triangle with our own arrow */
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 4px 0;
  user-select: none;
  transition: color 0.15s;
}

/* Hide default marker in all browsers */
.roadmap-topic summary::-webkit-details-marker { display: none; }

/* Custom arrow — points right when closed, down when open */
.roadmap-topic summary::before {
  content: '▶';
  font-size: 0.7rem;
  color: var(--color-green);
  transition: transform 0.2s;
  display: inline-block;
}

.roadmap-topic[open] summary::before {
  transform: rotate(90deg);
}

.roadmap-topic summary:hover {
  color: var(--color-green);
}

/* Bullet list of sub-topics */
.roadmap-list {
  list-style: none;          /* checkboxes replace the bullets */
  padding-left: 2.5rem;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
}

/* Flex row: [checkbox] [link] — aligned on the text baseline */
.roadmap-list li {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  line-height: 1.8;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Checkbox: green accent, pointer cursor, fixed size */
.topic-check {
  cursor: pointer;
  accent-color: var(--color-green); /* tints the checkbox when checked */
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

/* Each list item links to tutor.php */
.roadmap-list a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.15s, opacity 0.15s;
}

.roadmap-list a:hover {
  color: var(--color-green);
  text-decoration: none;
}

/* Studied state: strikethrough + faded — applied by JS when checkbox is checked */
.roadmap-list a.topic--studied {
  text-decoration: line-through;
  opacity: 0.45;
}



/* Sticky note reminder — positioned on the right side with a rotation */
.study__sticky-note {
  position: fixed;
  bottom: 80px;
  right: 40px;
  width: 200px;
  padding: 16px;
  font-family: 'Coming Soon', cursive;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background: #FFEB99;         /* Sticky note yellow */
  border: 1px solid #FFD700;
  border-radius: 2px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(-3deg);    /* Slight counter-clockwise angle */
  text-align: center;
  z-index: 10;
  pointer-events: none;        /* Don't interfere with page interactions */
}

/* =============================================================================
   Tutor Page  (tutor.php)
   Full-viewport chat interface for the Socratic JS tutor.
   ============================================================================= */

/* Make the tutor page fill exactly one viewport — no page scroll.
   The messages area scrolls internally instead.
   100dvh tracks the visual viewport on mobile (address bar + home indicator aware),
   which prevents the input area from being clipped on iOS Safari. */
.page--tutor {
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Centred column that fills the remaining height below the nav */
.tutor__container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;          /* lets flex children shrink below their content size */
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px 0;
}

/* ── Topic header ─────────────────────────────────────────────────── */

/* Pill-shaped card showing the current phase and topic name */
.tutor__header {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 16px;
  flex-shrink: 0;           /* never shrink — always visible above the messages */
  margin-bottom: 0;
}

/* "Phase ?" label — muted, uppercase */
.tutor__header-phase {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Thin vertical divider between phase and topic */
.tutor__header-divider {
  width: 1px;
  height: 16px;
  background: var(--color-border);
  flex-shrink: 0;
}

/* Topic name — purple, bold */
.tutor__header-topic {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--color-tutor);
}

/* ── Messages area ───────────────────────────────────────────────── */

/* Scrollable column of message bubbles */
.tutor__messages {
  flex: 1;
  overflow-y: auto;
  min-height: 0;            /* required for overflow-y to work inside a flex parent */
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px 0;
}

/* One row = one turn in the conversation */
.tutor__message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* User messages sit on the right */
.tutor__message--user {
  flex-direction: row-reverse;
}

/* ── Avatar ───────────────────────────────────────────────────────── */

/* Purple circle with "JS" initials — shown next to tutor messages */
.tutor__avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-tutor);
  color: #ffffff;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Bubbles ──────────────────────────────────────────────────────── */

/* Shared bubble base — max 72% width so long messages don't span the full row */
.tutor__bubble {
  max-width: 72%;
  padding: 12px 16px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.65;
}

/* Tutor bubble: white card with a flat top-left corner (points toward avatar) */
.tutor__message--ai .tutor__bubble {
  background: #ffffff;
  color: #1a1a1a;
  border: 0.5px solid var(--color-border);
  border-radius: 4px 12px 12px 12px;
}

/* User bubble: solid purple with a flat top-right corner */
.tutor__message--user .tutor__bubble {
  background: var(--color-tutor);
  color: #ffffff;
  border-radius: 12px 4px 12px 12px;
}

/* Inline code in tutor messages — dark tint on white */
.tutor__message--ai .tutor__bubble code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(0, 0, 0, 0.07);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Inline code in user messages — light tint on purple */
.tutor__message--user .tutor__bubble code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
  padding: 1px 5px;
}

/* ── Input area ───────────────────────────────────────────────────── */

/* Pinned to the bottom of the container — never scrolls away.
   env(safe-area-inset-bottom) adds extra bottom space on iPhones with
   a home indicator bar so the textarea is never hidden behind it. */
.tutor__input-area {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  padding: 16px 0 max(20px, env(safe-area-inset-bottom));
  border-top: 0.5px solid var(--color-border);
  flex-shrink: 0;
}

/* Textarea: grows as the user types, caps at ~3 lines */
#chat-input {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 15px;
  color: #1a1a1a;
  background: #ffffff;
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 14px;
  resize: none;
  outline: none;
  line-height: 1.5;
  min-height: 44px;
  max-height: 120px;
  overflow-y: auto;
  transition: border-color 0.15s;
}

#chat-input:focus {
  border-color: var(--color-tutor);   /* purple ring on focus */
}

/* Send button: purple, fixed height to align with textarea baseline */
#send-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 0 20px;
  height: 44px;
  background: var(--color-tutor);
  color: #ffffff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}

#send-btn:hover {
  opacity: 0.85;
}


/* =============================================================================
   Practice Page  (practice.php)
   Topic picker for the JS Console.
   ============================================================================= */

.practice__subtitle {
  /* "What do you want to practice today?" — green, centred */
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-green);
  text-align: center;
  padding: 32px 52px 24px;
}

.practice__roadmap {
  padding: 0 185px 64px;
}

/* Collapsible phase summary title — needs higher specificity to beat .roadmap-topic summary */
.roadmap-topic summary.practice-title {
  color: #FF79C6;
}

/* Phase heading */
.practice-phase {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  color: #FF79C6;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

/* Numbered list of challenges */
.practice-list {
  list-style: decimal;
  padding-left: 2.5rem;
  margin-bottom: 0.5rem;
}

/* Flex row: [checkbox] [link] — same pattern as .roadmap-list li in study.php */
.practice-list li {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: #ffffff;
  line-height: 1.8;
  display: flex;
  align-items: center;
  gap: 8px;
}

.practice-list a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.15s;
}

.practice-list a:hover {
  color: var(--color-green);
  text-decoration: none;
}

/* Practiced state: strikethrough + faded — applied by JS when checkbox is checked */
.practice-list a.topic--studied {
  text-decoration: line-through;
  opacity: 0.45;
}


/* =============================================================================
   Console Page  (console.php)
   Three-panel coding challenge: HTML editor, JS editor, live preview, output.
   All widget classes are prefixed with "c-" to avoid conflicts with other pages.
   ============================================================================= */

/* Override the dark body background for the console and tutor pages */
.page--console,
.page--tutor {
  background: var(--color-bg-light);
}

/* "about" nav link uses Dracula pink on both pages */
.page--console .nav__link,
.page--tutor .nav__link {
  color: #FF79C6;
}

/* Outer layout — centred column, capped width for readability */
.console__layout {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px 64px;
}

/* ── Task card ────────────────────────────────────────────────────── */

.c-task-card {
  background: var(--color-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* "Phase X.X — Topic name" label above the task body */
.c-task-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

/* Difficulty-level badge shown next to the phase label in the task card.
   The modifier classes below each match the accent colour used on the
   matching mode.php difficulty card, so the badge here is visually
   consistent with the card the learner clicked on the previous page. */
.c-mode-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 500;
  font-family: var(--font-sans);
  padding: 2px 7px;
  border-radius: 4px;
  margin-left: 8px;
  vertical-align: middle;
  text-transform: none;
  letter-spacing: 0;
}

/* Beginner badge — green tint matching --color-success */
.c-mode-beginner {
  background: rgba(34, 197, 94, 0.15);
  color: var(--color-success);
  border: 0.5px solid var(--color-success);
}

/* Intermediate badge — purple tint matching --color-tutor */
.c-mode-intermediate {
  background: rgba(124, 58, 237, 0.15);
  color: var(--color-tutor-light);
  border: 0.5px solid var(--color-tutor);
}

/* Advanced badge — blue tint matching --color-console */
.c-mode-advanced {
  background: rgba(14, 165, 233, 0.15);
  color: var(--color-console-light);
  border: 0.5px solid var(--color-console);
}

/* The step-by-step task instructions */
.c-task-body {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
}

.c-task-body p {
  margin-bottom: 8px;
}

.c-task-body ol {
  padding-left: 1.2rem;
  margin-top: 6px;
}

.c-task-body li {
  margin: 4px 0;
}

/* Inline code snippets inside task descriptions */
.c-task-body code {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: 4px;
  padding: 1px 5px;
}

/* ── Toolbars ─────────────────────────────────────────────────────── */

/* Centered action row for loading a fresh challenge */
.c-challenge-actions {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

/* Main toolbar above the panels: hint text left, Run/Reset buttons right */
.c-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

/* Footer toolbar inside the JS panel: hint text left, Review button right */
.c-js-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-surface);
  border-top: 0.5px solid var(--color-border);
}

/* Muted helper text in both toolbars */
.c-toolbar__hint {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Flex spacer — pushes buttons to the right */
.c-spacer { flex: 1; }

/* ── Buttons ─────────────────────────────────────────────────────── */

/* Shared base — monospace font, consistent sizing */
.c-btn {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  padding: 7px 16px;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.c-btn:hover { opacity: 0.8; }

/* Run — filled green (brand accent) */
.c-btn--run {
  background: var(--color-green);
  color: #0F0F0F;
}

/* Reset — subtle surface style */
.c-btn--reset {
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* New Challenge — centered call-to-action above the toolbar */
.c-btn--challenge {
  background: var(--color-console);
  color: #ffffff;
}

.c-btn--challenge:disabled {
  cursor: wait;
  opacity: 0.7;
}

/* Review — ghost style using the console blue */
.c-btn--review {
  background: transparent;
  color: var(--color-console-light);
  border: 1px solid var(--color-console);
  font-size: 12px;
}

/* Secondary — muted ghost style for "Show answer" and similar buttons */
.c-btn--secondary {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-muted);
  font-size: 12px;
}

.c-btn--secondary:hover {
  color: var(--color-text);
  border-color: var(--color-text);
}

/* ── Panels (HTML, JS, Preview, Output share this chrome) ────────── */

.c-panel {
  border: 0.5px solid var(--color-border);
  border-radius: 6px;
  overflow: hidden;   /* clips CodeMirror corners neatly */
  margin-bottom: 12px;
}

/* Panel header bar: dot + filename label */
.c-panel-header {
  background: var(--color-surface);
  padding: 7px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  border-bottom: 0.5px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Coloured traffic-light dots in panel headers */
.c-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.c-dot--html    { background: #E24B4A; }  /* red   — HTML panel    */
.c-dot--js      { background: #EF9F27; }  /* amber — JS panel      */
.c-dot--out     { background: #1D9E75; }  /* green — output panel  */
.c-dot--preview { background: #0EA5E9; }  /* blue  — preview panel */

/* ── CodeMirror sizing ───────────────────────────────────────────── */

/* All editors share the same font settings */
.c-panel .CodeMirror {
  height: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
}

/* HTML panel — 260px min-height */
.c-panel .CodeMirror-scroll {
  min-height: 260px;
}

/* JS panel — taller at 320px (more room to write logic) */
#js-panel .CodeMirror-scroll {
  min-height: 320px;
}

/* ── Preview iframe ──────────────────────────────────────────────── */

/* Dracula bg — matches the CodeMirror editor panels so the preview blends in */
.c-preview-wrap {
  background: #282a36;
}

.c-preview-wrap iframe {
  width: 100%;
  height: 70px;    /* default compact height (consolenohtml hides it entirely) */
  border: none;
  display: block;
}

/* Real mode preview — taller so DOM changes are clearly visible */
.c-preview-wrap--real iframe {
  height: 240px;
}

/* ── Output panel ────────────────────────────────────────────────── */

.c-output {
  min-height: 120px;
  padding: 14px 16px;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.8;
  background: var(--color-bg);
}

/* Muted placeholder text shown before the first Run */
.c-hint { color: var(--color-text-muted); }

/* console.log output lines */
.c-log--plain { color: var(--color-text); }

/* Passing check text and icons */
.c-log--ok    { color: var(--color-success); }

/* Error text and failing check icons */
.c-log--err   { color: var(--color-error); }

/* Thin horizontal rule between log output and check results */
.c-divider {
  border: none;
  border-top: 0.5px solid var(--color-border);
  margin: 8px 0;
}

/* One row per auto-check: icon + label side by side */
.c-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 4px 0;
}

/* Fixed-width icon column so labels align cleanly */
.c-check-icon {
  font-size: 13px;
  width: 18px;
  text-align: center;
  flex-shrink: 0;
}

/* "All checks passed!" banner shown when every check is green */
.c-success {
  margin-top: 10px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-success);
}


/* =============================================================================
   Mode Page  (mode.php)
   Full-viewport centred picker — Study mode vs Real mode.
   ============================================================================= */

/* Vertically and horizontally centre everything below the nav */
.mode__layout {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 90px);  /* 90px ≈ nav height */
  padding: 32px 24px 64px;
  text-align: center;
}

/* "How do you want to practice" — small muted label */
.mode__heading {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

/* The topic name — large green headline */
.mode__topic {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-green);
  margin-bottom: 48px;
}

/* Side-by-side card row — stacks vertically on small screens */
.mode__options {
  display: flex;
  gap: 24px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

/* Shared card base */
.mode__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 280px;
  padding: 32px 28px;
  border-radius: 12px;
  border: 2px solid transparent;
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  cursor: pointer;
}

.mode__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  text-decoration: none;
}

/* Beginner card — green theme (growth / starting out).
   Uses --color-success because the palette already has a green token and
   we want to avoid inventing a new variable for a single use site. */
.mode__card--beginner {
  background: rgba(34, 197, 94, 0.12);   /* #22C55E at 12% — matches --color-success */
  border-color: var(--color-success);
}

.mode__card--beginner:hover {
  border-color: var(--color-success);
  background: rgba(34, 197, 94, 0.2);
}

/* Intermediate card — purple theme (reuses the existing tutor colour tokens) */
.mode__card--intermediate {
  background: rgba(124, 58, 237, 0.12);
  border-color: var(--color-tutor);
}

.mode__card--intermediate:hover {
  border-color: var(--color-tutor-light);
  background: rgba(124, 58, 237, 0.2);
}

/* Advanced card — blue theme (reuses the existing console colour tokens) */
.mode__card--advanced {
  background: rgba(14, 165, 233, 0.12);
  border-color: var(--color-console);
}

.mode__card--advanced:hover {
  border-color: var(--color-console-light);
  background: rgba(14, 165, 233, 0.2);
}

/* Large emoji icon */
.mode__icon {
  font-size: 2.5rem;
  margin-bottom: 16px;
  line-height: 1;
}

/* Mode name — "Study mode" / "Real mode" */
.mode__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 12px;
}

/* Per-level title colours — pick up each card's accent */
.mode__card--beginner     .mode__title { color: var(--color-success); }
.mode__card--intermediate .mode__title { color: var(--color-tutor-light); }
.mode__card--advanced     .mode__title { color: var(--color-console-light); }

/* Short description below the title */
.mode__desc {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  text-align: left;
  margin-bottom: 24px;
  flex: 1;  /* pushes the CTA to the bottom */
}

/* "Start studying →" / "Start building →" — coloured call to action */
.mode__cta {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 700;
}

/* Per-level CTA colours — same accent as the title */
.mode__card--beginner     .mode__cta { color: var(--color-success); }
.mode__card--intermediate .mode__cta { color: var(--color-tutor-light); }
.mode__card--advanced     .mode__cta { color: var(--color-console-light); }

/* Back link below the cards */
.mode__back {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 0.15s;
}

.mode__back:hover {
  color: var(--color-green);
  text-decoration: none;
}


/* =============================================================================
   Login / Register Pages  (login.php, register.php)
   Centred card on the dark background.
   ============================================================================= */

.auth {
  /* Centre the card vertically and horizontally in the remaining viewport */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(100vh - 100px); /* subtract nav height */
}

.auth__card {
  width: 100%;
  max-width: 480px;
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 48px 40px;
  margin-top: -90px;

}

.auth__title {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--color-green);
  margin-bottom: 32px;
  text-align: center;
}

.auth__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.auth__label {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--color-text-muted);
}

.auth__input {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 10px 14px;
  outline: none;
  transition: border-color 0.15s;
}

.auth__input:focus {
  border-color: var(--color-green);
}

.auth__errors {
  /* Shown on register when multiple validation errors exist */
  list-style: none;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.auth__errors li {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-error);
}

.auth__error {
  /* Shown when login fails — single message */
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-error);
  margin-bottom: 16px;
  text-align: center;
}

.auth__submit {
  width: 100%;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1rem;
  color: #0F0F0F;
  background-color: var(--color-green);
  border: none;
  border-radius: 4px;
  padding: 12px;
  cursor: pointer;
  margin-top: 8px;
  transition: opacity 0.2s;
}

.auth__submit:hover {
  opacity: 0.85;
}

.auth__footer {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 24px;
}

.auth__footer a {
  color: var(--color-green);
}


/* =============================================================================
   Media Queries — ALL breakpoints collected here, largest → smallest
   max-width overrides because the base CSS is desktop-first.
   ============================================================================= */


/* ── 1024px — Tablets / small laptops ──────────────────────────────────────── */
@media (max-width: 1024px) {

  /* Nav — tighten the wide horizontal padding */
  .nav {
    padding: 16px 32px;
  }

  /* Home — shrink computers so they don't overflow the viewport */
  .home__computer {
    width: 340px;
  }

  .home__computers {
    gap: 48px;
    padding-top: 40px;
  }

  /* About — less extreme side padding */
  .about__content {
    padding: 40px 64px 56px;
  }

  /* Study / Practice — tighter side margins on the roadmap lists */
  .study__roadmap {
    padding: 0 48px 64px;
  }

  .practice__roadmap {
    padding: 0 80px 64px;
  }
}


/* ── 768px — Tablets ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Nav — reduce padding, font, and right-side gap */
  .nav {
    padding: 12px 24px;
  }

  .nav__logo {
    width: 80px;
  }

  .nav__link {
    font-size: 1.1rem;
  }

  .nav__greeting {
    font-size: 1.1rem;
  }

  .nav__right {
    gap: 20px;
  }

  /* Home — smaller computers, tighter gap */
  .home__computer {
    width: 280px;
  }

  .home__computers {
    gap: 32px;
    padding-top: 32px;
  }

  .home__computer-link {
    font-size: 1.5rem;
  }

  /* About */
  .about__content {
    padding: 32px 40px 48px;
  }

  .about__content p {
    font-size: 1.2rem;
  }

  /* Study */
  .study__subtitle {
    font-size: 1.5rem;
    padding: 24px 32px 20px;
  }

  .study__roadmap {
    padding: 0 32px 64px;
  }

  /* Practice */
  .practice__subtitle {
    font-size: 1.5rem;
    padding: 24px 32px 20px;
  }

  .practice__roadmap {
    padding: 0 32px 64px;
  }

  /* Mode — narrower cards */
  .mode__card {
    width: 240px;
    padding: 24px 20px;
  }

  /* Auth — less negative top margin on smaller screens */
  .auth__card {
    padding: 40px 32px;
    margin-top: -40px;
  }
}


/* ── 640px — Phones ─────────────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Navigation ───────────────────────────────────────────────── */

  /* Compact padding, smaller font so all three columns fit on 375px */
  .nav {
    padding: 12px 16px;
  }

  .nav__logo {
    width: 64px;
  }

  .nav__link {
    font-size: 0.875rem;
  }

  .nav__greeting {
    font-size: 0.8rem;
    max-width: 80px;          /* truncate long usernames instead of overflowing */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .nav__right {
    gap: 10px;
  }

  /* ── Home — stack computers vertically ───────────────────────── */

  /* Let the page scroll — stacked computers won't fit in one viewport */
  .home {
    height: auto;
    min-height: 100dvh;       /* dvh avoids the iOS browser-chrome jump */
    overflow: visible;
  }

  .home__title {
    font-size: 1.4rem;
    padding: 0 16px;
    margin-top: 16px;
  }

  .home__computers {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 24px;
    padding-bottom: 40px;
  }

  /* min() ensures the computer never overflows a narrow viewport */
  .home__computer {
    width: min(320px, 88vw);
    flex-shrink: 1;
  }

  /* ── About ────────────────────────────────────────────────────── */

  .about__content {
    padding: 20px 16px 40px;
  }

  .about__content p {
    font-size: 1rem;
    line-height: 1.7;
  }

  /* ── Study ────────────────────────────────────────────────────── */

  .study__subtitle {
    font-size: 1.2rem;
    padding: 16px 16px 12px;
  }

  .study__roadmap {
    padding: 0 16px 48px;
  }

  /* Sticky note overlaps content on small screens — hide it */
  .study__sticky-note {
    display: none;
  }

  /* ── Practice ─────────────────────────────────────────────────── */

  .practice__subtitle {
    font-size: 1.2rem;
    padding: 16px 16px 12px;
  }

  .practice__roadmap {
    padding: 0 16px 48px;
  }

  /* ── Tutor ────────────────────────────────────────────────────── */

  /* dvh accounts for the mobile address-bar so the chat never gets clipped */
  .page--tutor {
    height: 100dvh;
  }

  .tutor__container {
    padding: 8px 12px 0;
  }

  /* Wider bubbles so short lines don't wrap awkwardly on a narrow screen */
  .tutor__bubble {
    max-width: 90%;
    font-size: 14px;
    padding: 10px 12px;
  }

  /* ── Console ──────────────────────────────────────────────────── */

  .console__layout {
    padding: 16px 12px 48px;
  }

  /* Let the hint text wrap onto its own line rather than squeezing the buttons */
  .c-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }

  .c-toolbar .c-toolbar__hint {
    width: 100%;
  }

  /* Slightly shorter editors so the full widget fits on a phone screen */
  .c-panel .CodeMirror-scroll {
    min-height: 180px;
  }

  #js-panel .CodeMirror-scroll {
    min-height: 220px;
  }

  /* ── Mode ─────────────────────────────────────────────────────── */

  .mode__layout {
    padding: 24px 16px 48px;
    min-height: calc(100dvh - 90px);
  }

  .mode__topic {
    font-size: 1.5rem;
    margin-bottom: 32px;
  }

  /* Stack the difficulty cards vertically on phones */
  .mode__options {
    flex-direction: column;
    align-items: center;
  }

  .mode__card {
    width: min(340px, 90vw);
  }

  /* ── Auth (login / register) ──────────────────────────────────── */

  /* Remove the negative top margin that assumes a fixed nav height */
  .auth {
    align-items: flex-start;
    padding: 32px 16px;
    min-height: auto;
  }

  .auth__card {
    max-width: 100%;
    padding: 32px 20px;
    margin-top: 0;
  }

  .auth__title {
    font-size: 1.375rem;
    margin-bottom: 24px;
  }
}