/* Platform chrome — nav, forms, tables, account and admin.
   Loaded alongside styles.css, which owns the lesson surface and the palette. */

/* Reversed out on the red masthead. */
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.nav a, .linkish {
  font: inherit; font-size: .88rem; font-weight: 500;
  padding: 7px 11px; border-radius: 8px;
  color: #fff; text-decoration: none;
  border: 0; background: transparent; cursor: pointer;
}
.nav a:hover, .linkish:hover { background: rgba(255, 255, 255, .18); color: #fff; }
.nav a.on {
  background: #fff; color: var(--red); font-weight: 700;
}
.inline { display: inline; }

/* Lessons and Just chat come first on the bar and are a different kind of thing
   from Account and the admin tools — a hairline says so without a second row. */
.nav-split {
  width: 1px; align-self: stretch; min-height: 20px;
  background: rgba(255, 255, 255, .38); margin: 0 5px;
}

main.page { max-width: 1180px; margin: 0 auto; padding: clamp(16px, 4vw, 40px); display: block; }
main.page.narrow { max-width: 460px; }

/* --- hero ---------------------------------------------------------------- */
/* smashingenglish.com's shape: a teal band, white Titan One headline, an
   eyebrow above it, copy left and Laura standing on the right. Full-bleed, so
   it reads as a band across the page rather than another card. */

/* Rendered from base.html's `chrome` block, which sits outside <main> — so it
   is already the full width of the page and needs no negative-margin trickery.
   (It had some; it put a horizontal scrollbar on every page.) */
.hero {
  background: var(--teal);
  color: var(--on-teal);
  padding: clamp(22px, 3.5vw, 40px) clamp(16px, 4vw, 40px) 0;
  overflow: hidden;
  /* The cyan strip her site runs under its hero. */
  border-bottom: 6px solid var(--cyan);
}

.hero-inner {
  display: grid; gap: 20px; align-items: end;
  grid-template-columns: minmax(0, 1fr);
  max-width: 1100px; margin: 0 auto;
  padding-bottom: clamp(22px, 3.5vw, 40px);
}
@media (min-width: 760px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) 220px;
    padding-bottom: 0;           /* Laura stands on the band's floor */
    min-height: 260px;
  }
}

.hero-eyebrow {
  margin: 0 0 6px;
  font: 1.05rem/1.3 var(--font-display);
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--on-teal-soft);
}
.hero a { color: var(--on-teal); }
.hero h1 {
  margin: 0 0 12px;
  font: 2.1rem/1.05 var(--font-hero);
  letter-spacing: .01em; text-transform: uppercase;
  color: var(--on-teal);
}
@media (min-width: 760px) { .hero h1 { font-size: 2.7rem; } }
.hero p { margin: 0; color: var(--on-teal-soft); max-width: 46ch; }
.hero .hero-logo { width: 150px; height: auto; margin-bottom: 14px; }

/* Laura stands on the band's floor, cropped by the band itself rather than
   scaled down to a thumbnail — the same trick her own site uses. */
.hero-laura {
  display: none;
  width: 220px; height: auto;
  align-self: end;
  margin-bottom: -2px;   /* kill the inline-image baseline gap */
}
@media (min-width: 760px) { .hero-laura { display: block; } }

/* --- but on the home page she is the point -------------------------------
   Everywhere else Laura is decoration on a band and hiding her on a narrow
   screen buys room for the form underneath. Here she is the reason the page
   exists — "it is about her and she needs to be seen" — and a phone is where
   most students will see it, so hiding her there is hiding her from nearly
   everybody.

   Smaller, and beside the words rather than under them: stacked, she would push
   the two doors off the first screen, and Laura's own feedback was that the
   doors have to be the first thing you meet. */
.hero-home .hero-inner {
  grid-template-columns: minmax(0, 1fr) 112px;
  gap: 12px; align-items: end;
  padding-bottom: 0; min-height: 200px;
}
.hero-home .hero-laura { display: block; width: 112px; }
.hero-home h1 { font-size: 1.5rem; }
.hero-home .hero-inner > div:first-child { align-self: center; padding-bottom: 18px; }

@media (min-width: 760px) {
  .hero-home .hero-inner { grid-template-columns: minmax(0, 1fr) 220px; min-height: 260px; }
  .hero-home .hero-laura { width: 220px; }
  .hero-home h1 { font-size: 2.7rem; }
}

/* The hero's own copy sits above her shoulder line, not on the floor. */
@media (min-width: 760px) {
  .hero-inner > div:first-child { align-self: center; padding-bottom: 24px; }
}

/* The logo is teal artwork, so it would vanish on the teal band. On the hero it
   sits on its own white plate — the same trick her own site uses for the round
   badge in the nav. */
.hero-plate {
  display: inline-block; background: var(--card);
  border-radius: 14px; padding: 10px 14px; margin-bottom: 14px;
}
.hero-plate img { display: block; width: 150px; height: auto; }
main.lesson-layout {
  display: grid; gap: clamp(16px, 3vw, 28px);
  grid-template-columns: minmax(0, 1fr);
  max-width: 1180px; margin: 0 auto; padding: clamp(16px, 4vw, 40px);
}
@media (min-width: 900px) {
  main.lesson-layout { grid-template-columns: minmax(340px, 420px) minmax(0, 1fr); align-items: start; }
}

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 20px; margin-bottom: 20px;
}
/* styles.css uppercases h2 for the lesson transcript header; card headings in
   the account and admin pages read better in sentence case. */
.card h2, .card h3 {
  margin-top: 0;
  text-transform: none;
  letter-spacing: -.005em;
  color: var(--ink);
  font-size: 1rem;
}
.card h3 { font-size: .92rem; }

.page-title {
  font-size: 1.35rem; letter-spacing: -.01em; text-transform: none;
  color: var(--ink); margin: 0 0 4px;
}
.page-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start; justify-content: space-between; margin-bottom: 16px;
}
.sub { color: var(--ink-soft); font-size: .85rem; margin: 0 0 12px; }
.sub.block { display: block; }
.caveat { max-width: 68ch; }

.status-strip.standalone {
  grid-column: 1 / -1;
  padding: 10px clamp(16px, 4vw, 40px) 0;
  margin: 0;
}
.meter-item { gap: 8px; }
.meter {
  display: inline-block; width: 90px; height: 6px;
  border-radius: 3px; background: var(--line); overflow: hidden;
}
.meter.wide { display: block; width: 100%; height: 9px; margin: 8px 0 12px; }
/* Credits remaining, so it runs cyan → yellow → red as they drain. */
.meter-fill { display: block; height: 100%; width: 0; background: var(--cyan); transition: width .3s ease; }
.meter-fill.warn { background: var(--yellow); }
.meter-fill.full { background: var(--red); }

/* --- secondary text ------------------------------------------------------
   `.muted` has been used in the templates since the beginning and never had a
   rule, so it rendered at full weight — the explanatory line under a heading
   read as loudly as the heading. */

.muted { color: var(--ink-soft); }
.small { font-size: .82rem; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* What Laura remembers about a student. Set apart from the surrounding form
   fields because it is the one block on the page the student can read but not
   type into. */
.remembered {
  border-left: 3px solid var(--cyan);
  padding: 2px 0 2px 14px;
  margin: 14px 0;
}
.remembered h3 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin: 14px 0 4px;
}
.remembered p { margin: 0 0 6px; }
.remembered ul { margin: 0; padding-left: 18px; }
.remembered li { margin-bottom: 4px; }

/* Same block in the admin centre, below the notes Laura types herself — ruled
   off so it's obvious which half she wrote and which half the tutor did. */
.memory-note { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.memory-note h3 { margin-top: 0; }
.memory-note h4 {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin: 22px 0 8px;
}

/* One habit per card. The two counts sit on the same line and read as one
   sentence, because the judgement about whether to say anything needs both. */
.habits { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.habits li {
  border: 1px solid var(--line); border-left: 3px solid var(--cyan);
  border-radius: 8px; padding: 10px 12px; background: var(--paper);
}
.habit-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.habits p { margin: 4px 0 0; }
.habits .inline { margin-top: 6px; }
/* `.linkish` is white, for the red masthead it was written for. On a pale card
   that is an invisible button. */
.habits .linkish {
  padding: 4px 0; color: var(--danger);
  text-decoration: underline; text-underline-offset: 3px;
}
.habits .linkish:hover { background: transparent; color: var(--danger); opacity: .75; }

/* --- forms --------------------------------------------------------------- */

.stack { display: grid; gap: 14px; }
.grid-form {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); align-items: end;
}
.grid-form button { grid-column: 1 / -1; justify-self: start; }

textarea, select {
  font: inherit; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); color: var(--ink); width: 100%;
  resize: vertical;
}
textarea:focus-visible, select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.check { display: flex; align-items: center; gap: 9px; font-size: .85rem; color: var(--ink-soft); }
.check input { width: 16px; height: 16px; accent-color: var(--accent); }

.primary {
  /* See the note on `.mic` in styles.css: the `font` shorthand cannot take
     `inherit` as its family, so this whole declaration used to be dropped. #57 */
  font: inherit; font-weight: 700; font-size: .95rem; line-height: 1;
  padding: 12px 18px;
  color: #fff; background: var(--accent);
  border: 0; border-radius: 9px; cursor: pointer;
}
.primary:hover { background: var(--accent-deep); }
.primary.wide, .ghost.wide { width: 100%; }
/* The one red button on a form: destructive, and it should look it. */
.ghost.danger { color: var(--danger); border-color: var(--danger); }
.ghost.danger:hover { background: var(--danger-soft); }

/* --- notices -------------------------------------------------------------
   Three levels, three brand colours. Cyan for "here is some information",
   yellow for "careful", red for "this is wrong". */

.notice, .notice-banner {
  padding: 11px 14px; border-radius: 9px; margin: 0 0 16px;
  background: var(--cyan-soft); color: var(--teal-deep); font-size: .88rem;
  border-left: 4px solid var(--cyan);
}
.notice.good { background: var(--teal-soft); color: var(--teal-deep); border-left-color: var(--teal); }
.notice.warn { background: var(--yellow-soft); color: var(--yellow-ink); border-left-color: var(--yellow); }
.notice.bad { background: var(--danger-soft); color: var(--danger); border-left-color: var(--red); }
.error-banner a, .notice-banner a { color: inherit; font-weight: 600; }

/* Sits above <main>, so it carries its own gutters rather than inheriting the
   page ones. Deliberately hard to skim past. */
.security-banner {
  max-width: 1100px; margin: 16px auto 0; padding: 14px 16px;
  border: 1px solid var(--red); border-left-width: 5px;
}
.security-banner ul { margin: 8px 0 6px; padding-left: 18px; }
.security-banner li { margin-bottom: 4px; }
.security-banner .sub { display: block; opacity: .8; }

/* --- data display -------------------------------------------------------- */

.cols { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) {
  .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

.tiles {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); margin-bottom: 20px;
}
/* A coloured cap on each tile, cycling the palette. The admin centre keeps the
   brand's colours without the brand's volume — no red bar over a page of
   margins, but not six identical grey boxes either. */
.tile {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; display: grid; gap: 3px; box-shadow: var(--shadow);
  border-top: 4px solid var(--tile-colour, var(--teal));
}
.tile:nth-child(5n + 1) { --tile-colour: var(--teal); }
.tile:nth-child(5n + 2) { --tile-colour: var(--cyan); }
.tile:nth-child(5n + 3) { --tile-colour: var(--navy); }
.tile:nth-child(5n + 4) { --tile-colour: var(--yellow); }
.tile:nth-child(5n + 5) { --tile-colour: var(--teal-logo); }

.tile.alarm { --tile-colour: var(--red); background: var(--danger-soft); }
.tile.alarm .tile-value { color: var(--danger); }

.tile-label {
  font: .88rem/1 var(--font-display); letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-soft);
}
.tile-value {
  font-size: 1.7rem; font-weight: 700;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
  color: var(--ink);
}
.tile-note { font-size: .74rem; color: var(--ink-soft); }

.bignum { font-size: 2.1rem; font-weight: 650; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bignum .unit, .price .unit { font-size: .9rem; font-weight: 400; color: var(--ink-soft); }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 12px; margin: 16px 0 0; }
.stats div { display: grid; gap: 2px; }
.stats dt { font-size: .7rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.stats dd { margin: 0; font-size: 1.1rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.table th {
  text-align: left; font-size: .7rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft); font-weight: 600; padding: 0 10px 8px; border-bottom: 1px solid var(--line);
}
.table td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table tr:last-child td { border-bottom: 0; }
.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table a { color: var(--accent); text-decoration: none; }
.table a:hover { text-decoration: underline; }

.pill {
  display: inline-block; font: .78rem/1.5 var(--font-display); letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--ink-soft);
}
.pill.good { background: var(--teal); color: #fff; }
.pill.bad { background: var(--red); color: #fff; }
.pill.warn { background: var(--yellow); color: var(--yellow-ink); }
.current-pill { background: var(--cyan); color: #fff; }

.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: .88rem; }
.checklist li { display: flex; align-items: center; gap: 9px; }
.checklist li em { margin-left: auto; font-style: normal; font-size: .76rem; color: var(--ink-soft); }
.checklist li.on .dot { background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

/* --- plans --------------------------------------------------------------- */

.plan-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.plan {
  border: 1px solid var(--line); border-radius: 12px; padding: 18px;
  display: grid; gap: 8px; align-content: start;
}
.plan.current { border-color: var(--accent); background: var(--accent-soft); }
.plan h3 { margin: 0; }
.price { margin: 0; font-size: 1.6rem; font-weight: 650; letter-spacing: -.02em; }
.ticks { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; font-size: .84rem; color: var(--ink-soft); }
.ticks li::before { content: "\2713  "; color: var(--accent); font-weight: 700; }

/* --- CRM ----------------------------------------------------------------- */

.pattern {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px; margin-bottom: 10px; background: var(--paper);
}
.pattern-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.examples { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .85rem; color: var(--ink-soft); }

.bars { display: flex; align-items: flex-end; gap: 8px; height: 160px; padding-top: 10px; }
.bar {
  flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; height: 100%; gap: 4px;
}
.bar-fill { width: 100%; min-height: 2px; background: var(--accent); border-radius: 4px 4px 0 0; }
.bar-label { font-size: .62rem; color: var(--ink-soft); white-space: nowrap; }
.bar-value { font-size: .7rem; font-variant-numeric: tabular-nums; color: var(--ink-soft); order: -1; }


/* --- modality picker ------------------------------------------------------ */

.modes {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  border: 0; margin: 0; padding: 0;
}
.modes legend {
  font-size: .82rem; color: var(--ink-soft); padding: 0; margin-bottom: 6px;
}
.mode {
  display: grid; gap: 2px; justify-items: center; text-align: center;
  padding: 10px 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
}
.mode:hover { border-color: var(--accent); }
.mode input { position: absolute; opacity: 0; pointer-events: none; }
.mode-name { font-size: .85rem; font-weight: 700; }
.mode-rate { font-size: .7rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.mode.unaffordable { opacity: .55; }

/* Colour-coded by what they cost to serve, cheapest to dearest: cyan, teal,
   red. The palette happens to run in that order, so the colour is carrying
   real information rather than decorating — a student can see that video is
   the expensive one before reading the rate. */
.mode:nth-of-type(1) { --mode-colour: var(--cyan); }
.mode:nth-of-type(2) { --mode-colour: var(--teal); }
.mode:nth-of-type(3) { --mode-colour: var(--red); }

.mode { border-top: 3px solid var(--mode-colour); }
.mode:has(input:checked) {
  border-color: var(--mode-colour);
  background: var(--mode-colour);
}
.mode:has(input:checked) .mode-name,
.mode:has(input:checked) .mode-rate { color: #fff; }

/* --- practice sets --------------------------------------------------------
   The line Laura has asked for, held where the student can read it while they
   speak. Deliberately the loudest thing on the page during a drill: everything
   else is chrome, and this is the only bit they have to do something with. */

.practice {
  border: 1px solid var(--line); border-left: 4px solid var(--cyan);
  border-radius: 10px; padding: 14px 16px; margin: 12px 0;
  background: var(--cyan-soft);
}
.practice-progress {
  margin: 0 0 6px; font-size: .74rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--teal-deep); font-weight: 700;
}
.practice-phrase { margin: 0; font-size: 1.15rem; font-weight: 600; line-height: 1.4; }
.practice-note { margin: 6px 0 0; }
.practice button { margin-top: 10px; }

/* --- lessons and courses --------------------------------------------------
   The picker used to be a <select>, which read as exactly what it was. A course
   with lessons and something to earn at the end reads as a curriculum, and that
   is what a paying student thinks they are buying. */

/* The right-hand column: whichever door you came through on top, the
   conversation underneath. Stacked rather than swapped, because the script has
   to stay readable at the moment they are reading it aloud. */
.workspace {
  display: grid; gap: clamp(16px, 3vw, 28px);
  align-content: start; min-width: 0;
}

/* styles.css cards every bare <section>. A tab panel is a container, not a
   card — the courses inside it are the cards, and a box round a box makes both
   harder to see. Just chat has nothing of its own, so it brings its own card. */
.tab-panel {
  background: none; border: 0; border-radius: 0;
  box-shadow: none; padding: 0;
}
#course-list .course:last-child { margin-bottom: 0; }

.chat-intro {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px;
}
.chat-intro h3 { margin: 0 0 10px; font-size: 1.05rem; }
.chat-intro p { margin: 0 0 10px; max-width: 62ch; }
.chat-intro p:last-child { margin-bottom: 0; }

.badge-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .8rem; font-weight: 700; padding: 6px 12px; border-radius: 999px;
  background: var(--cyan-soft); color: var(--teal-deep);
  border: 1px solid var(--cyan);
}
/* Gold is for finishing without needing a correction. Bronze is for finishing,
   which is the one that matters — see `LessonProgress`. */
.badge.gold { background: var(--yellow-soft); color: var(--yellow-ink); border-color: var(--yellow); }

.course {
  border: 1px solid var(--line); border-radius: 12px;
  padding: 16px; margin-bottom: 14px; background: var(--card);
}
.course.done { border-color: var(--cyan); }
.course-head { display: flex; gap: 12px; align-items: flex-start; }

/* The default disclosure triangle sits outside the flex row and can't be
   styled, so it goes and the chevron on the right stands in for it. */
.course > summary { list-style: none; cursor: pointer; }
.course > summary::-webkit-details-marker { display: none; }
.course > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 8px;
}
.course-headings { flex: 1; min-width: 0; }
.course-chevron {
  flex: none; align-self: flex-start; width: 9px; height: 9px; margin: 6px 4px 0;
  border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft);
  transform: rotate(45deg); transition: transform .15s ease;
}
.course[open] > summary .course-chevron { transform: rotate(-135deg); }
.course > summary:hover .course-chevron { border-color: var(--ink); }
/* Folded, the progress line is the last thing in the box and doesn't need to
   hold a gap open under itself. */
.course:not([open]) .course-progress { margin-bottom: 0; }
.course-emoji { font-size: 1.6rem; line-height: 1; }
.course-head h3 { margin: 0 0 4px; font-size: 1rem; }
.course-head .sub { margin: 0; }
.course-progress { margin: 12px 0 8px; }
.course-progress .sub { margin: 4px 0 0; }

.lesson-list { list-style: none; margin: 0; padding: 0; }
.lesson-row + .lesson-row { border-top: 1px solid var(--line); }
.lesson-pick {
  display: flex; align-items: center; gap: 12px; width: 100%;
  font: inherit; text-align: left; padding: 11px 4px;
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
}
.lesson-pick:hover { background: var(--paper); }
.tick {
  flex: 0 0 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .75rem; font-weight: 700;
  background: var(--line); color: var(--ink-soft);
}
.lesson-row.done .tick { background: var(--cyan); color: #fff; }
.lesson-title { flex: 1; }
.lesson-kind { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); }

/* The brief. Everything a student needs before pressing record: what they will
   learn, what she is listening for, and the actual lines. */
/* Housed like the course cards it replaces — floating on the paper on its own
   made it read as a stray fragment rather than the lesson you had opened. */
.brief {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px;
}
.brief-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.brief-head h3 { flex: 1; }
.ghost.small { padding: 5px 10px; font-size: .78rem; }
.brief .back { padding: 4px 0; color: var(--teal-deep); text-decoration: underline; }
.brief .back:hover { background: transparent; opacity: .75; }
.brief h3 { margin: 10px 0 6px; font-size: 1.1rem; }
.brief h4 {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-soft); margin: 18px 0 6px;
}
.brief-objective { margin: 0; max-width: 68ch; }
.brief-listening {
  border-left: 3px solid var(--yellow); background: var(--yellow-soft);
  padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 14px 0 0;
}
.brief-listening h4 { margin-top: 0; color: var(--yellow-ink); }
.brief-listening p { margin: 0; }
.script { margin: 0; padding-left: 20px; max-width: 68ch; }
.script li { margin-bottom: 8px; }
.script-note { display: block; font-size: .82rem; color: var(--ink-soft); }


/* --- starting over --------------------------------------------------------
   Two irreversible things on the account page. They fold shut by default so
   they don't read as buttons waiting to be pressed, and open into a full
   explanation rather than a dialog you dismiss on reflex. */
.startover { border-top: 1px solid var(--line); padding: 4px 0; }
.startover:first-of-type { border-top: 0; }
.startover > summary {
  list-style: none; cursor: pointer;
  padding: 12px 2px; font-weight: 600; color: var(--ink);
}
.startover > summary::-webkit-details-marker { display: none; }
.startover > summary::after {
  content: '›'; float: right; color: var(--ink-soft);
  transition: transform .15s ease; display: inline-block;
}
.startover[open] > summary::after { transform: rotate(90deg); }
.startover > summary:hover { color: var(--accent); }
.startover > summary:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}
.startover-body { padding: 0 2px 16px; max-width: 62ch; }
.startover-body p { margin: 0 0 12px; }
.startover-body .notice { margin: 0 0 14px; }


/* --- the stage (issue #40) -------------------------------------------------
   Laura, what she just said, the line to say, the button to say it with — one
   column, that order, nothing between them. The controls used to be spread
   across two columns with the button below the fold, so every single turn was
   read-left, scroll, press, look-right, come back. */

.stage { display: grid; gap: 16px; align-content: start; }

/* Before a lesson she is the product and gets the room. Once talking starts she
   becomes the person you are talking to rather than the picture you are looking
   at, and the space goes to the conversation. Without this the microphone drops
   off the bottom of a 768px laptop screen — the bug that started all of this.

   A circle, not a squashed band: shrinking the full-length photo to a 76px
   strip left her an unreadable sliver, which reads as a broken image rather
   than a deliberate thumbnail. Scaled up and cropped to her face, it reads the
   way any other picture of a person you are talking to reads. */
.avatar-frame { margin-bottom: 0; }
.stage.running .avatar-frame {
  aspect-ratio: 1; height: 60px; width: 60px;
  border-radius: 50%; justify-self: start;
}
.stage.running .avatar-photo {
  height: auto; width: 165%;
  left: 50%; top: -6%; bottom: auto;
  transform: translateX(-50%);
}
.stage.running .avatar-caption { display: none; }

/* Guidance for before you start. Mid-lesson it is a line of text between the
   button and the box, and the student has already read it. */
.stage.running #mic-hint { display: none; }

/* What Laura just said, directly under her face. Capped and scrollable: a long
   reply must never be able to push the button off the screen. */
.latest {
  border-radius: 10px; padding: 12px 14px;
  background: var(--teal); color: var(--on-teal);
  border-left: 4px solid var(--cyan);
  /* The panel is capped so a long reply can never push the microphone off the
     screen (#40). The scrolling moved inside it, onto the words alone, so the
     replay control stays put — a control that scrolls out of the box it lives
     in is a control the student cannot find. */
  max-height: min(30vh, 230px);
  display: flex; flex-direction: column; overflow: hidden;
}
.latest-body { overflow-y: auto; min-height: 0; }
.latest-who {
  margin: 0 0 4px;
  font: .82rem/1 var(--font-display); letter-spacing: .08em; text-transform: uppercase;
  color: var(--on-teal-soft);
}
.latest-said { margin: 0; font-size: 1.02rem; }
.latest-verdict { margin: 0 0 8px; }

.talk { display: grid; gap: 10px; }
.talk .hint { margin: 0; }

/* Decisions made once, before starting. Full size until then; one line after. */
.setup { display: grid; gap: 14px; }
.setup-line {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin: 0; font-size: .78rem; color: var(--ink-soft);
}
/* `.linkish` is white — written for the red masthead. On a pale card that is an
   invisible button. */
.linkish.quiet {
  padding: 0; color: var(--accent); font-size: .78rem;
  text-decoration: underline; text-underline-offset: 3px;
}
.linkish.quiet:hover { background: transparent; opacity: .75; }

/* The mode picker's radio is opacity:0, so without this a keyboard user tabs
   through Written / Spoken / Video with nothing to look at. */
.mode:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }

/* --- the script -----------------------------------------------------------
   One list doing two jobs: the brief before you start, the tracker once you
   have. The line being said right now is deliberately *not* written out here —
   it is on the stage next to the button, and printing it in both columns is
   what had a student's eyes crossing the page twice a turn. */

.brief-head { align-items: baseline; gap: 10px; }
.brief-position {
  font: .82rem/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); white-space: nowrap;
}

.script { list-style: none; padding-left: 0; }
.script .line {
  display: flex; gap: 10px; align-items: baseline;
  margin: 0; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.script .line:last-child { border-bottom: 0; }
.line-mark {
  flex: 0 0 18px; text-align: center;
  font-size: .8rem; color: var(--cyan); font-weight: 700;
}
.line-text { flex: 1; min-width: 0; }
.line.done .line-text { color: var(--ink-soft); }
.line.current { background: var(--cyan-soft); border-radius: 8px; padding: 7px 10px; }
.line.current .line-mark { color: var(--teal-deep); }
.line-text.now {
  font: .78rem/1.5 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep);
}

/* Mid-lesson the course list is inert: opening another lesson would show one
   thing on screen while the server carried on with another. */
.lesson-pick:disabled { cursor: default; opacity: .5; }
.lesson-pick:disabled:hover { background: transparent; }

#end-lesson { margin-top: 4px; }

/* Phones get one column in DOM order — Laura, her reply, the line, the button,
   then the script and the history. Nothing to reorder: the stage was written
   in the order a student needs it. */
@media (max-width: 899px) {
  .stage.running .avatar-frame { height: 52px; width: 52px; }
  .latest { max-height: min(32vh, 260px); }
}

/* --- the front door --------------------------------------------------------
   Laura, after her first hour with the POC: "when I first click on, it feels
   mixed between structured lesson and general chat. Is there a way to have two
   buttons when you log on?"

   So: two doors, and nothing else competing with them. They are deliberately
   enormous — a student who has just signed in should not have to read anything
   to find the thing they want, and the two paths through this product are not
   a preference buried in a panel, they are the product. */
main.home-layout {
  /* `main` is a two-column grid from 900px up — that is the lesson page's
     stage-and-script layout, and inheriting it here dealt the heading and the
     subtitle into separate columns. This page stacks; the doors do their own
     columns below. */
  display: block;
  max-width: 900px; margin: 0 auto;
  padding: clamp(20px, 5vw, 56px) clamp(16px, 4vw, 40px);
}

/* The greeting moved onto the hero band with Laura, so what used to carry it
   here is gone and the doors are the first thing in the page body. */

.doors {
  display: grid; gap: clamp(14px, 2.5vw, 20px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 720px) {
  .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.door {
  display: grid; gap: 8px; align-content: start;
  padding: clamp(20px, 3.5vw, 30px);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
  text-decoration: none; color: var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.door:hover, .door:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 8px 24px rgba(20, 63, 73, .16);
}
.door-icon { font-size: 1.9rem; line-height: 1; }
/* Body font, not the display face. Bebas Neue has no lowercase, so a full
   sentence set in it comes out as small caps — fine for "LESSONS" in the
   masthead, wrong for "I just want to talk", which has to read as something a
   student would actually say. */
.door-title { font-size: 1.2rem; font-weight: 700; letter-spacing: -.01em; }
.door-body { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; }
.door-go { margin-top: 6px; font-weight: 600; color: var(--accent); }

/* The two doors are not the same kind of thing, and colouring them identically
   made the page read as one choice repeated. Chat is the warm, low-commitment
   one; lessons is the structured one. */
.door-chat .door-go { color: var(--red-deep); }
.door-chat:hover, .door-chat:focus-visible { border-color: var(--red); }

/* What stops this page being a toll gate: one tap back to the exact lesson,
   which is fewer taps than the shelf it replaced. */
.resume {
  display: grid; gap: 6px;
  margin-top: clamp(16px, 3vw, 24px); padding: 16px 20px;
  background: var(--accent-soft); border: 1px solid transparent;
  border-radius: var(--radius); text-decoration: none; color: var(--ink);
}
.resume:hover, .resume:focus-visible { border-color: var(--accent); }
.resume-label {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-deep); font-weight: 700;
}
.resume-title { font-size: 1.05rem; font-weight: 600; }
.resume-progress { display: grid; gap: 5px; }

.home-badges { margin-top: clamp(20px, 4vw, 32px); }
.home-badges h2 {
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 10px;
}

.home-credits {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline;
  margin-top: clamp(24px, 5vw, 40px);
  font-size: .85rem; color: var(--ink-soft);
}
.home-credits .low { color: var(--red-deep); font-weight: 600; }

/* --- being told what to do -------------------------------------------------
   The other half of Laura's feedback: "the speech box just says 'say
   something'." This sits directly above the button, because that is where the
   student is looking when the question occurs to them. */
.instruction {
  margin: 0 0 2px; text-align: center;
  font-size: .95rem; font-weight: 600; color: var(--ink);
}

/* --- the greeting's transport ----------------------------------------------
   Laura starts talking on page load. Alex: "you can't replay it or see that
   anything is playing if the user's machine is on mute."

   It lives on her teal panel, so everything here is reversed out — the ghost
   button's teal-on-transparent was very nearly invisible against it. The moving
   bar is the important part: with the sound off it is the only thing on the
   page saying audio is running. */
.player {
  display: flex; align-items: center; gap: 10px;
  /* `flex: none` so it keeps its height while the words above it scroll. */
  flex: none; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}

.player-button {
  flex: none; width: 34px; height: 34px; padding: 0;
  display: grid; place-items: center;
  border-radius: 50%; cursor: pointer;
  color: var(--on-teal); background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .5);
}
.player-button:hover { background: rgba(255, 255, 255, .3); }

/* Drawn in CSS rather than set as text: a ▶/⏸ glyph renders at a different
   size and baseline in every font on every platform, and inside a 34px circle
   that is the difference between centred and not. */
.player-icon {
  width: 0; height: 0; margin-left: 3px;
  border-left: 11px solid currentColor;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}
.player-button.playing .player-icon {
  width: 11px; height: 13px; margin-left: 0;
  border: 0;
  border-left: 4px solid currentColor;
  border-right: 4px solid currentColor;
}

.player-track {
  flex: 1 1 auto; min-width: 0; height: 18px;
  margin: 0; padding: 0; cursor: pointer;
  background: transparent; appearance: none; -webkit-appearance: none;
}
.player-track:disabled { cursor: default; opacity: .5; }

/* Why the lesson list is not responding, said where the list is. Yellow rather
   than red: nothing has gone wrong, the student is simply already busy. */
.in-lesson {
  display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center;
  justify-content: space-between;
  margin-bottom: 16px; padding: 12px 16px;
  background: var(--yellow-soft); border: 1px solid var(--yellow);
  border-radius: var(--radius);
}
.in-lesson-why { margin: 0; font-size: .9rem; color: var(--yellow-ink); }
.in-lesson button { flex: none; }

/* Waiting for a lesson to be picked. The microphone already greys itself out
   (`.mic:disabled`); without this the typed row stayed looking perfectly usable
   beside it, which is a worse lie than an obviously dead control. */
.typed input:disabled,
.typed button:disabled {
  opacity: .45; cursor: not-allowed;
}
.typed button:disabled:hover { background: transparent; }
.player-track::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28);
}
.player-track::-moz-range-track {
  height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .28);
}
.player-track::-webkit-slider-thumb {
  appearance: none; -webkit-appearance: none;
  width: 12px; height: 12px; margin-top: -4px;
  border-radius: 50%; background: var(--on-teal); border: 0;
}
.player-track::-moz-range-thumb {
  width: 12px; height: 12px;
  border-radius: 50%; background: var(--on-teal); border: 0;
}
.player-track:focus-visible { outline: 2px solid var(--on-teal); outline-offset: 3px; }

.player-time {
  flex: none; font-size: .78rem; color: var(--on-teal-soft);
  /* Tabular so the row does not twitch as the seconds tick over. */
  font-variant-numeric: tabular-nums;
}

/* --- the paywall -----------------------------------------------------------
   Reached by pressing Talk to Laura with nothing to spend. Since sign-up
   stopped granting free credits this is the normal first thing a new student
   meets, so it is deliberately not styled as an error: cream and teal like the
   rest of the product, not the red of something having gone wrong. */
.paywall {
  grid-column: 1 / -1;
  background: var(--card); border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius); box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 26px);
  display: grid; gap: 8px; justify-items: start;
}
.paywall h2 { margin: 0; font-size: 1.1rem; text-transform: none; color: var(--ink); }
.paywall p { margin: 0; }
.paywall .primary { margin-top: 8px; text-decoration: none; text-align: center; }