/*
 * Vektor theme — layered on top of Bootstrap 5.3 via CSS custom properties.
 *
 * No build step: Bootstrap comes from the CDN and this file overrides its
 * variables. That is the documented Bootstrap 5.3 theming path, and it keeps
 * `git clone && python manage.py runserver` working with no Node toolchain.
 *
 * Palette rationale (a product decision, not decoration):
 *
 * - "board": chalkboard green. Deep, low-arousal green is the colour Peruvian
 *   students already associate with a classroom, and low-arousal hues lower
 *   test anxiety. It carries every surface that is about reading and studying.
 * - "chalk": warm off-white instead of pure white. Cheap phone screens in
 *   daylight turn #FFF into glare; a warm tint stays readable and reads as
 *   chalk on a board.
 * - "flame": amber. Reserved for the streak and the single primary action per
 *   screen. Amber on deep green is the highest-contrast pairing available here,
 *   so the eye finds the action without needing a bigger button.
 * - "right" / "review": answer feedback. Wrong answers use a muted coral, not
 *   alarm red — a student who feels punished stops coming back, and the point
 *   of the daily quiz is the explanation that follows it.
 */

:root {
  /* Chalkboard green */
  --ap-board-950: #0b1a16;
  --ap-board-900: #10241f;
  --ap-board-800: #16302a;
  --ap-board-700: #1d4038;
  --ap-board-600: #26564b;
  --ap-board-500: #2f6b5c;
  --ap-board-400: #4a8c7b;
  --ap-board-300: #7fb3a3;
  --ap-board-200: #b4d6ca;
  --ap-board-100: #dcede7;
  --ap-board-50: #f1f8f5;

  /* Chalk */
  --ap-chalk: #f7f5ef;
  --ap-chalk-dim: #d5d0c2;

  /* Streak and primary action */
  --ap-flame-700: #b45309;
  --ap-flame-600: #d97706;
  --ap-flame-500: #f59e0b;
  --ap-flame-400: #fbbf24;
  --ap-flame-100: #fef3c7;

  /* Answer feedback */
  --ap-right-700: #15803d;
  --ap-right-600: #16a34a;
  --ap-right-100: #dcfce7;
  --ap-review-700: #a53f3d;
  --ap-review-600: #be4b49;
  --ap-review-100: #fde8e6;

  /* ------------------------------------------------- Bootstrap global tokens */
  --bs-primary: var(--ap-board-700);
  --bs-primary-rgb: 29, 64, 56;

  --bs-body-bg: var(--ap-board-50);
  --bs-body-color: var(--ap-board-900);
  --bs-secondary-color: var(--ap-board-400);
  --bs-border-color: var(--ap-board-100);
  --bs-border-radius: 0.75rem;
  --bs-border-radius-lg: 0.875rem;
  --bs-border-radius-xl: 1rem;

  --bs-link-color: var(--ap-board-600);
  --bs-link-hover-color: var(--ap-board-800);

  /* No webfont: every downloaded kilobyte is one the student pays for. */
  --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 1rem;

  --bs-focus-ring-color: rgba(245, 158, 11, 0.5);
  --bs-focus-ring-width: 0.2rem;
}

body {
  /* Room for the fixed bottom navigation plus the iOS home indicator. */
  padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

@media (min-width: 576px) {
  body {
    padding-bottom: 2rem;
  }
}

/* Visible focus everywhere: the default outline disappears on deep green, and
   plenty of our students navigate with a cheap keyboard or a screen reader. */
:focus-visible {
  outline: 3px solid var(--ap-flame-500);
  outline-offset: 2px;
}

.app-shell {
  max-width: 42rem;
}

/* ---------------------------------------------------------------- surfaces */
.card {
  --bs-card-border-color: var(--ap-board-100);
  --bs-card-border-radius: var(--bs-border-radius-lg);
  --bs-card-inner-border-radius: var(--bs-border-radius);
}

/* The chalkboard panel: used for the one thing that matters on each screen. */
.card-board {
  background-color: var(--ap-board-700);
  color: var(--ap-chalk);
  border: 0;
  border-radius: var(--bs-border-radius-lg);
}

.card-board .text-dim {
  color: var(--ap-chalk-dim);
}

.bg-board {
  background-color: var(--ap-board-700) !important;
}

.bg-board-soft {
  background-color: var(--ap-board-100) !important;
}

.text-board {
  color: var(--ap-board-700) !important;
}

.text-board-muted {
  color: var(--ap-board-400) !important;
}

.text-flame {
  color: var(--ap-flame-500) !important;
}

/* ----------------------------------------------------------------- buttons */
/* Built with Bootstrap's per-component variables, so every button state,
   focus ring and disabled style keeps working for free. */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-border-radius: var(--bs-border-radius);
  /* 44px minimum: the accessibility floor for a thumb on a small screen. */
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

/* One flame button per screen. That is the entire purpose of the colour. */
.btn-flame {
  --bs-btn-color: var(--ap-board-950);
  --bs-btn-bg: var(--ap-flame-500);
  --bs-btn-border-color: var(--ap-flame-500);
  --bs-btn-hover-color: var(--ap-board-950);
  --bs-btn-hover-bg: var(--ap-flame-400);
  --bs-btn-hover-border-color: var(--ap-flame-400);
  --bs-btn-active-bg: var(--ap-flame-600);
  --bs-btn-active-border-color: var(--ap-flame-600);
  --bs-btn-disabled-bg: var(--ap-flame-500);
  --bs-btn-disabled-border-color: var(--ap-flame-500);
}

.btn-board {
  --bs-btn-color: var(--ap-chalk);
  --bs-btn-bg: var(--ap-board-700);
  --bs-btn-border-color: var(--ap-board-700);
  --bs-btn-hover-color: var(--ap-chalk);
  --bs-btn-hover-bg: var(--ap-board-600);
  --bs-btn-hover-border-color: var(--ap-board-600);
  --bs-btn-active-bg: var(--ap-board-800);
}

.btn-outline-board {
  --bs-btn-color: var(--ap-board-700);
  --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--ap-board-200);
  --bs-btn-hover-color: var(--ap-board-800);
  --bs-btn-hover-bg: var(--ap-board-50);
  --bs-btn-hover-border-color: var(--ap-board-300);
}

/* ------------------------------------------------------------------ badges */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-border-radius: 999px;
  --bs-badge-padding-x: 0.6rem;
  --bs-badge-padding-y: 0.35rem;
}

.badge-board {
  background-color: var(--ap-board-100);
  color: var(--ap-board-700);
}

.badge-flame {
  background-color: var(--ap-flame-100);
  color: var(--ap-flame-700);
}

.badge-right {
  background-color: var(--ap-right-100);
  color: var(--ap-right-700);
}

.badge-review {
  background-color: var(--ap-review-100);
  color: var(--ap-review-700);
}

/* ---------------------------------------------------------------- progress */
.progress {
  --bs-progress-height: 0.5rem;
  --bs-progress-bg: var(--ap-board-100);
  --bs-progress-border-radius: 999px;
  --bs-progress-bar-bg: var(--ap-board-500);
}

/* ------------------------------------------------------------------- stats */
.stat {
  background-color: #fff;
  border: 1px solid var(--ap-board-100);
  border-radius: var(--bs-border-radius-lg);
  padding: 0.625rem 0.5rem;
  text-align: center;
}

.stat-value {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ap-board-800);
  font-variant-numeric: tabular-nums;
}

.stat-label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ap-board-400);
}

/* ------------------------------------------------------------------- forms */
.form-control,
.form-select {
  min-height: 2.75rem;
  border-color: var(--ap-board-200);
  /* 16px: anything smaller makes iOS Safari zoom on focus. */
  font-size: 1rem;
}

.form-control:focus,
.form-select:focus {
  border-color: var(--ap-board-500);
  box-shadow: 0 0 0 0.2rem var(--ap-board-100);
}

.form-label {
  font-weight: 600;
  color: var(--ap-board-800);
  margin-bottom: 0.375rem;
}

/* ------------------------------------------------------------ quiz choices */
/* The whole row is the target: thumbs on a 5" screen are imprecise. */
.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.875rem;
  background-color: #fff;
  border: 2px solid var(--ap-board-100);
  border-radius: var(--bs-border-radius);
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}

.choice:hover {
  border-color: var(--ap-board-300);
}

.choice:has(input:checked) {
  border-color: var(--ap-board-500);
  background-color: var(--ap-board-50);
}

.choice-correct,
.choice-correct:hover {
  border-color: var(--ap-right-600);
  background-color: var(--ap-right-100);
}

.choice-wrong,
.choice-wrong:hover {
  border-color: var(--ap-review-600);
  background-color: var(--ap-review-100);
}

.choice-marker {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid var(--ap-board-200);
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--ap-board-500);
}

.choice:has(input:checked) .choice-marker {
  border-color: var(--ap-board-500);
  background-color: var(--ap-board-500);
  color: var(--ap-chalk);
}

.choice-marker-right {
  border-color: var(--ap-right-600);
  background-color: var(--ap-right-600);
  color: #fff;
}

.choice-marker-wrong {
  border-color: var(--ap-review-600);
  background-color: var(--ap-review-600);
  color: #fff;
}

/* ------------------------------------------------------------- bottom nav */
.bottom-nav {
  background-color: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--ap-board-100);
  padding-bottom: env(safe-area-inset-bottom);
}

.bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 3.5rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ap-board-400);
}

.bottom-nav a.active {
  color: var(--ap-board-700);
}

.nav-icon {
  font-size: 1.125rem;
  line-height: 1;
}

/* ------------------------------------------------------------- lesson body */
/* Styles the sanitized HTML produced by apps/core/markdown.py. */
.lesson-body {
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--ap-board-900);
}

.lesson-body > * + * {
  margin-top: 1rem;
}

.lesson-body h2 {
  margin-top: 1.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ap-board-800);
}

.lesson-body h3 {
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--ap-board-500);
}

.lesson-body strong {
  font-weight: 700;
  color: var(--ap-board-800);
}

.lesson-body ul,
.lesson-body ol {
  padding-left: 1.25rem;
}

.lesson-body li + li {
  margin-top: 0.375rem;
}

.lesson-body a {
  color: var(--ap-board-600);
  font-weight: 500;
  text-underline-offset: 2px;
}

.lesson-body code {
  background-color: var(--ap-board-100);
  color: var(--ap-board-800);
  padding: 0.1rem 0.35rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.lesson-body pre {
  background-color: var(--ap-board-900);
  color: var(--ap-chalk);
  padding: 0.875rem;
  border-radius: var(--bs-border-radius);
  overflow-x: auto;
  font-size: 0.875rem;
}

.lesson-body pre code {
  background: transparent;
  color: inherit;
  padding: 0;
}

.lesson-body blockquote {
  border-left: 4px solid var(--ap-board-300);
  background-color: var(--ap-board-50);
  padding: 0.5rem 1rem;
  font-style: italic;
}

/* Wide content scrolls inside its own box: the page itself never does. */
.lesson-body table {
  display: block;
  width: 100%;
  overflow-x: auto;
  font-size: 0.9375rem;
  border-collapse: collapse;
}

.lesson-body th,
.lesson-body td {
  border: 1px solid var(--ap-board-100);
  padding: 0.375rem 0.625rem;
  text-align: left;
}

.lesson-body th {
  background-color: var(--ap-board-50);
  font-weight: 600;
}

/* Collapsible worked examples: native <details>, zero JavaScript. */
.lesson-body details,
.solution-box {
  border: 1px solid var(--ap-board-200);
  background-color: var(--ap-board-50);
  border-radius: var(--bs-border-radius-lg);
  overflow: hidden;
}

.lesson-body details > summary,
.solution-box > summary {
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: var(--ap-board-700);
  cursor: pointer;
  list-style: none;
}

.lesson-body details > summary::-webkit-details-marker,
.solution-box > summary::-webkit-details-marker {
  display: none;
}

.lesson-body details > summary::before,
.solution-box > summary::before {
  content: "▸ ";
  color: var(--ap-flame-600);
}

.lesson-body details[open] > summary::before,
.solution-box[open] > summary::before {
  content: "▾ ";
}

.lesson-body details > summary:hover,
.solution-box > summary:hover {
  background-color: var(--ap-board-100);
}

.lesson-body details > *:not(summary) {
  padding-inline: 1rem;
}

.lesson-body details > *:last-child {
  padding-bottom: 1rem;
}

/* Display maths scrolls instead of stretching the page. */
.katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0.25rem 0;
}

[x-cloak] {
  display: none !important;
}