/* 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; } }

/* 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);
  max-height: min(30vh, 230px); overflow-y: auto;
}
.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); }
}