/* =============================================
   QT Academy - the kid-friendly course theme
   =============================================
   Loaded after qt-tokens.css on academy.html only, so the three existing courses
   are untouched. It retunes the palette and the display type and adds a few
   sports-anime cues; the slide types, player and charts are unchanged.
   ============================================= */

:root {
  /* Brighter ground, so the page reads as daylight rather than a terminal. */
  --color-bg: #12142b;
  --color-surface: #1d2044;
  --color-raised: #292d5c;
  --color-sunken: #0d0f22;
  --color-text: #f2f3ff;

  /* Electric blue lead, magenta counter, gold for the moment something lands. */
  --color-accent: #4ea8ff;
  --color-accent-strong: #2f7ddb;
  --color-pos: #3ddc97;
  --color-neg: #ff5c8a;
  --color-warn: #ffc857;

  --color-divider: color-mix(in srgb, #f2f3ff 20%, transparent);
  --color-divider-strong: color-mix(in srgb, #4ea8ff 45%, transparent);
}

/* Display type with more attack than Inter. Loaded locally, like every other face. */
@font-face {
  font-family: 'Academy Display';
  src: local('Outfit'), local('Outfit-Bold');
  font-weight: 700;
  font-display: swap;
}

.qt-slide h1,
.qt-slide h2,
.cv-lesson-hero h1 {
  font-family: 'Outfit', 'Inter', system-ui, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* Eyebrows read as arc markers: "Arc 1 · Read 1". */
.qt-slide .qt-slide-eyebrow,
.qt-slide [class*='eyebrow'] {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}

/* The callout is the line a character says. Give it a speaker's edge. */
.qt-slide .qt-callout {
  border-left: 3px solid var(--color-warn);
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--color-warn) 14%, transparent),
    transparent 60%);
  font-weight: 600;
}

/* Speed lines behind the title slide - the one genre flourish, kept cheap. */
.qt-slide.qt-sl-title::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  background: repeating-linear-gradient(
    74deg,
    transparent 0 22px,
    color-mix(in srgb, var(--color-accent) 12%, transparent) 22px 23px
  );
  mask-image: linear-gradient(105deg, #000 0%, transparent 62%);
}

/* Step numbers as jersey numbers. */
.qt-slide .qt-step-num {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 1.05em;
}

@media (prefers-reduced-motion: reduce) {
  .qt-slide.qt-sl-title::before { display: none; }
}

/* ---- The cast ----
   The speaker chip sits where the eyebrow is, so a slide visibly belongs to a
   character. Avatars are placeholders (assets/js/academy-cast.js); real art
   replaces the SVG without touching layout. */
.qt-speaker {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-right: 0.85rem;
  padding: 0.18rem 0.6rem 0.18rem 0.18rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--speaker-colour) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--speaker-colour) 45%, transparent);
  vertical-align: middle;
}

.qt-speaker-art {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--speaker-colour) 30%, #0d0f22);
  flex: none;
}

.qt-speaker-name {
  font-family: 'Outfit', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.01em;
  color: var(--speaker-colour);
  text-transform: none;
}

/* The eyebrow keeps its own line when a chip is present on a narrow screen. */
@media (max-width: 560px) {
  .qt-speaker { margin-bottom: 0.4rem; }
}

/* Slide types without an eyebrow (definition) get the chip on its own row. */
.qt-speaker-row {
  display: flex;
  justify-content: center;
  margin-bottom: 0.9rem;
}

/* Real character art is a square webp per expression, drawn as a cover background so the
   circle never distorts it. Falls back to the placeholder SVG for anyone without art. */
.qt-speaker-photo {
  display: block;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  border: 1px solid color-mix(in srgb, var(--speaker-colour) 60%, transparent);
}

/* ---- The bust ----
   The character stands in the lower-right corner of the slide: large enough to read as
   art rather than an icon, behind the text, faded on its top and left edges so it joins
   the slide instead of sitting on it.
   NOTE: .qt-slide is position:absolute; inset:0 in qt-slideshow.css. Never override that -
   making it relative drops every slide into normal flow, so they stack downward and the
   active one scrolls out of sight. The absolute slide is already the bust's containing box. */
.qt-speaker-bust {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(170px, 24%, 300px);
  aspect-ratio: 1;
  height: auto;
  max-height: 72%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.92;
  -webkit-mask-image: linear-gradient(200deg, transparent 0%, #000 38%),
                      linear-gradient(90deg, transparent 0%, #000 34%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(200deg, transparent 0%, #000 38%),
              linear-gradient(90deg, transparent 0%, #000 34%);
  mask-composite: intersect;
}

/* Text keeps the front, and the slide reserves the corner rather than letting the
   character sit on top of a sentence. */
.qt-slide > *:not(.qt-speaker-bust) { position: relative; z-index: 1; }

.qt-slide.has-bust { padding-right: clamp(170px, 24%, 300px); }

/* A three-card stat row needs 3 x 180px + gaps. The bust takes about a quarter of the slide,
   which drops the row to 2 + 1 and pushes the slide into scroll. Narrower cards keep it on one
   line; the rule only applies where a bust is actually present, so phones are unaffected. */
.qt-slide.has-bust.qt-sl-stats .qt-stat-card { flex-basis: 132px; }

/* Comparison and steps slides already run wide; give them a little more of the width back. */
.qt-slide.has-bust.qt-sl-compare,
.qt-slide.has-bust.qt-sl-steps { padding-right: clamp(150px, 20%, 260px); }
.qt-slide.has-bust.qt-sl-compare .qt-speaker-bust,
.qt-slide.has-bust.qt-sl-steps .qt-speaker-bust { width: clamp(150px, 20%, 260px); opacity: 0.85; }

/* No room for it on a phone, and it would sit under the text. */
@media (max-width: 720px) {
  .qt-speaker-bust { display: none; }
}

/* ---- The book pages, brought in line with the Academy home (Michael, 2026-09-28) ----
   The note was that an arc page looked like a QT Trading Lab module page: correct for the
   adult courses and too serious here. Same three moves as the home page - the display serif
   on titles, the gold off the covers for furniture, and warmer cards - so that clicking a
   book from the shelf does not feel like leaving the Academy. */
:root { --ac-gold: #d9b871; --ac-gold-dim: #8a7444; }

.cv-title,
.cv-lesson-hero h1,
.hero-title,
.cv-card h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.005em;
}

.cv-title { font-size: clamp(1.9rem, 4vw, 2.6rem); }

/* Arc numbers read as chapter numbers rather than list indices. */
.cv-lesson-id,
.qt-module-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--ac-gold);
}

.cv-crumbs,
.qt-eyebrow,
.hero-kicker,
.qt-label,
.toolkit-section-title {
  color: var(--ac-gold);
}

/* A gold hairline under the arc title, the way the covers rule off their own. */
.cv-head { border-bottom: 1px solid color-mix(in srgb, var(--ac-gold) 22%, transparent); }

.cv-tab[aria-current="page"] { border-bottom-color: var(--ac-gold); color: var(--color-text); }

/* The drill is the one page a reader is meant to do something on, so it gets the most
   warmth rather than the least. */
.toolkit-card,
.cv-card {
  border-color: color-mix(in srgb, var(--ac-gold) 18%, var(--color-divider));
}

.toolkit-card:hover { border-color: color-mix(in srgb, var(--ac-gold) 40%, transparent); }

/* Book One's drills want a chart and Book Two is where a platform gets set up, so Book One
   carries a standing note (course.drillNote) saying what is needed in the meantime.
   Michael, 2026-09-28: "how are they going to accomplish any of the drills". */
.drill-note {
  margin: 0 0 18px;
  padding: 12px 16px;
  border-left: 3px solid var(--ac-gold);
  border-radius: 0 var(--radius-md, 12px) var(--radius-md, 12px) 0;
  background: color-mix(in srgb, var(--ac-gold) 8%, transparent);
  color: var(--ink2);
  font-size: 14px;
  line-height: 1.6;
  max-width: 72ch;
}

/* ---- The book front page (Michael, 2026-09-29) ----
   Cover, progress, and the arc list that used to live on the Academy home. Clicking a book
   from the shelf lands here, so the home page can go back to being progress and covers. */
.cv-book-hero {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  align-items: center;
  gap: clamp(20px, 3vw, 40px);
  margin-top: 14px;
}

.cv-book-cover {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: cover;
  border: 1px solid var(--ac-gold-dim);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.cv-book-copy { min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.cv-book-copy .cv-title { margin: 0; }
.cv-book-sub { margin: 0; color: var(--ink2); font-size: 1.05rem; }
.cv-book-progress {
  margin: 0;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ac-gold);
}

.cv-book-head { border-bottom: 0; }

/* The arcs, as cards rather than a sidebar list. */
.cv-arcs { display: flex; flex-direction: column; gap: 12px; }

.cv-arc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 18px;
  padding: 16px 20px;
  border: 1px solid var(--color-divider);
  border-left: 3px solid color-mix(in srgb, var(--ac-gold) 35%, transparent);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: border-color 140ms ease, transform 140ms ease;
}

.cv-arc:hover { border-color: var(--ac-gold); transform: translateX(2px); }
.cv-arc.is-done { border-left-color: var(--color-pos); }

.cv-arc-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.8rem;
  color: var(--ac-gold);
  line-height: 1;
}

.cv-arc-body { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cv-arc-title { font-weight: 600; color: var(--color-text); }
.cv-arc-blurb { color: var(--ink2); font-size: 14px; line-height: 1.5; }

.cv-arc-bar { height: 3px; border-radius: 2px; background: var(--color-divider); overflow: hidden; }
.cv-arc-fill { display: block; height: 100%; background: var(--color-accent); }

.cv-arc-state {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3, var(--ink2));
  white-space: nowrap;
}

@media (max-width: 720px) {
  .cv-book-hero { grid-template-columns: minmax(0, 1fr); }
  .cv-book-cover { max-width: 260px; }
  .cv-arc { grid-template-columns: auto minmax(0, 1fr); }
  .cv-arc-state { grid-column: 2; }
}

/* ---- The drill, rebuilt as a practice match (Michael, 2026-09-29) ----
   The adult courses get a two-panel worksheet, which is right for them. The Academy already
   has its own recurring set piece - an exercise is set, you work alone, you fill in a sheet -
   so the page is built as that instead. */
.ac-drill { display: flex; flex-direction: column; gap: 26px; max-width: 900px; }

.ac-drill-head { display: flex; flex-direction: column; gap: 8px; }

.ac-drill-title {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  line-height: 1.15;
  margin: 0;
}

.ac-drill-intro { margin: 0; color: var(--ink2); line-height: 1.6; max-width: 68ch; }

.ac-drill-label {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ac-gold);
  margin-bottom: 12px;
}

.ac-drill-count { color: var(--ink3, var(--ink2)); }

/* Steps, numbered like the arcs rather than bulleted like a form. */
.ac-drill-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.ac-drill-step label {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  padding: 12px 16px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease;
}

.ac-drill-step label:hover { border-color: color-mix(in srgb, var(--ac-gold) 45%, transparent); }

.ac-drill-step input { margin: 0; accent-color: var(--ac-gold); width: 16px; height: 16px; }

.ac-drill-num {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 1.15rem;
  color: var(--ac-gold);
  line-height: 1;
}

.ac-drill-text { line-height: 1.55; }

.ac-drill-step.is-done label { background: color-mix(in srgb, var(--color-pos) 7%, transparent); border-color: color-mix(in srgb, var(--color-pos) 32%, transparent); }
.ac-drill-step.is-done .ac-drill-text { color: var(--ink2); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--color-pos) 60%, transparent); }
.ac-drill-step.is-done .ac-drill-num { color: var(--color-pos); }

/* The sheet is a form you type into, not a placeholder that vanishes on the first keystroke. */
.ac-drill-hint { margin: 0 0 10px; color: var(--ink3, var(--ink2)); font-size: 13px; }

.ac-drill-area {
  width: 100%;
  min-height: 340px;
  padding: 18px 20px;
  border: 1px solid color-mix(in srgb, var(--ac-gold) 22%, var(--color-divider));
  border-radius: 12px;
  background: var(--color-sunken);
  color: var(--color-text);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.8;
  resize: vertical;
  tab-size: 4;
}

.ac-drill-area:focus { outline: none; border-color: var(--ac-gold); }

.ac-drill-saved { color: var(--color-pos); font-size: 13px; align-self: center; }

/* Reminders sit underneath rather than competing for half the page. */
.ac-drill-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }

.ac-drill-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 16px;
  border: 1px solid var(--color-divider);
  border-top: 2px solid color-mix(in srgb, var(--ac-gold) 45%, transparent);
  border-radius: 10px;
  background: color-mix(in srgb, var(--ac-gold) 4%, transparent);
}

.ac-drill-card strong { font-family: 'DM Serif Display', Georgia, serif; font-weight: 400; font-size: 1.05rem; }
.ac-drill-card span { color: var(--ink2); font-size: 13.5px; line-height: 1.5; }

@media (max-width: 560px) {
  .ac-drill-step label { grid-template-columns: auto minmax(0, 1fr); gap: 10px; }
  .ac-drill-num { display: none; }
}

/* The drill's supplied chart. Book One's drills used to open with "pick any chart", which a
   reader who has not been shown a platform cannot do (Michael, 2026-09-29). */
.ac-drill-chart-frame {
  position: relative;
  border: 1px solid color-mix(in srgb, var(--ac-gold) 22%, var(--color-divider));
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-sunken);
}

.ac-drill-chart-frame .qt-chart-canvas { height: clamp(260px, 38vw, 400px); width: 100%; }

/* The covered read, from Book Three, as something you can actually do here. */
.ac-drill-cover {
  position: absolute;
  inset: 0 0 0 58%;
  /* Solid, so nothing leaks through the part they are meant not to see. */
  background: var(--color-sunken);
  border-left: 2px dashed color-mix(in srgb, var(--ac-gold) 55%, transparent);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease;
}

.ac-drill-chart.is-covered .ac-drill-cover { opacity: 1; }

.ac-drill-uncover { margin-top: 12px; }

@media (prefers-reduced-motion: reduce) {
  .ac-drill-cover { transition: none; }
}

/* The chart's own header. Michael, 2026-09-29: the first drill asks which timeframe it is and
   the chart never says, which makes it unanswerable. A platform puts the instrument and the
   timeframe along the top, so this does too - and labels the data as practice, because it is
   generated rather than a recording of anything. */
.ac-drill-chart-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-divider);
  background: color-mix(in srgb, var(--color-raised) 60%, transparent);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.ac-drill-ticker {
  color: var(--color-text);
  font-weight: 600;
  text-transform: uppercase;
}

.ac-drill-tf {
  padding: 2px 9px;
  border-radius: 5px;
  background: color-mix(in srgb, var(--ac-gold) 18%, transparent);
  color: var(--ac-gold);
  text-transform: uppercase;
}

.ac-drill-feed {
  margin-left: auto;
  color: var(--ink3, var(--ink2));
  text-transform: uppercase;
}

@media (max-width: 480px) {
  .ac-drill-feed { display: none; }
}