/* The response journey has one main action at a time. All colours inherit the
   shared light/dark palette; state, wording and icons carry meaning together.
   Corners, gaps and type sizes come from the scales in tokens.css: the three
   screen cards take --r-card, and everything nested inside one (the mic check,
   the transcript, feedback rows, notices) takes --r-sm. */
#p-screen-ready,
#p-screen-card,
#p-screen-done { max-width: 800px; padding-bottom: var(--sp-48); }
#p-screen-ready .ready-card,
#p-screen-done .card-hero {
  max-width: none;
  padding: clamp(var(--sp-24), 4.5vw, var(--sp-48));
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  text-align: left;
}
#p-screen-ready .ready-card { padding-block: clamp(var(--sp-24), 3vw, var(--sp-32)); }
#p-screen-ready .ready-card .hero-emoji { width: 62px; height: 62px; margin-bottom: var(--sp-16); }
/* The activity icon tile is a small card of its own, so it takes the card
   corner: at 62-76px that reads as the same shape as the card around it. */
#p-screen-start .hero-emoji,
#p-screen-ready .hero-emoji,
#p-screen-done .hero-emoji {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  margin: 0 0 var(--sp-24);
  background: var(--accent-soft);
  border-radius: var(--r-card);
}
/* The icon's artwork is a rounded navy tile painted on a square with off-white
   corners, which showed as white notches on the dark theme. Cropped to a
   radius just past the tile's own, the same way the header logos are. */
#p-screen-start .hero-emoji img,
#p-screen-ready .hero-emoji img,
#p-screen-done .hero-emoji img { display: block; width: 50px; height: 50px; border-radius: 24%; }
/* The demo's start card is centred, unlike Ready and Done. */
#p-screen-start .hero-emoji { margin: 0 auto var(--sp-16); }
#p-screen-ready h1,
#p-screen-done h1 {
  margin: 0 0 var(--sp-16);
  font: 700 clamp(1.9rem, 5vw, 2.65rem)/1.15 var(--font-play);
  letter-spacing: -.022em;
  max-width: 19ch;
  text-wrap: balance;
}
#p-screen-ready .ready-activity {
  margin: 0 0 var(--sp-8);
  color: var(--c-accent-ink);
  font-size: var(--fs-14);
  font-weight: 600;
}
#p-screen-ready .ready-line { color: var(--fg-muted); font-size: .95rem; max-width: 52ch; }
#p-screen-ready .mic-check {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-16);
  text-align: left;
  padding: var(--sp-24);
  margin: var(--sp-24) 0;
  background: var(--bg-soft);
  border: 0;
  border-radius: var(--r-sm);
}
#p-screen-ready .mic-check > strong,
#p-screen-ready .mic-check > p,
#p-screen-ready .mic-check > audio { grid-column: 1 / -1; margin: 0; }
#p-screen-ready .mic-check > strong { font: 650 1.08rem var(--font-play); }
#p-screen-ready .mic-check > p { font-size: var(--fs-14); line-height: 1.55; color: var(--fg-muted); }
#p-screen-ready .mic-check > p:empty { display: none; }
#p-screen-ready .mic-check .btn { background: var(--card); min-height: 46px; font-size: var(--fs-14); }
/* The button and the meter share one row at the same height: one control, and
   beside it the place its result appears. The meter is a flat well rather than
   a second outlined box, so it does not read as another button. */
#p-check-mic { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-8); }
#p-check[data-state="recording"] #p-check-mic::before {
  content: "";
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--c-alert);
}
#p-screen-ready .check-meter {
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 46px;
  padding: 0 var(--sp-16);
  background: var(--card);
  border-radius: var(--r-btn);
}
/* Layout owns the canvas's box; the script only reads it. At rest it shows a
   dotted line in the same bar rhythm the live meter draws, so starting the
   test grows bars out of the line instead of popping them in from nothing. */
#p-check-meter {
  display: block;
  flex: 1;
  min-width: 0;
  height: 26px;
  color: var(--action);
  background: repeating-linear-gradient(90deg,
      color-mix(in oklch, var(--action) 30%, transparent) 0 4px, transparent 4px 7px)
    left center / 100% 2px no-repeat;
}
#p-check[data-state="recording"] #p-check-meter { background: none; }
#p-ready-go { min-height: 52px; padding-inline: var(--sp-24); width: 100%; }
#p-check-audio,
#p-recorded-audio { width: 100%; min-width: 0; height: 48px; }

#p-screen-card > .card-head { align-items: center; margin-bottom: var(--sp-16); gap: var(--sp-16); }
#p-screen-card .card-title { font: 650 clamp(1rem, 2.8vw, 1.2rem)/1.4 var(--font-play); color: var(--fg); }
#p-screen-card .card-count { font: 600 var(--fs-13)/1.5 var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
#p-screen-card .question-context { margin: -.5rem 0 var(--sp-16); color: var(--fg-muted); font-size: var(--fs-13); }
.question-progress { height: 7px; margin: 0 0 var(--sp-24); overflow: hidden; background: var(--track); border-radius: var(--r-pill); }
.question-progress > span { display: block; height: 100%; border-radius: inherit; background: var(--action); transition: width 350ms var(--ease-out); }
#p-screen-card > .card {
  padding: clamp(var(--sp-24), 4vw, var(--sp-32));
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-card);
}
#p-screen-card .response-steps { margin-bottom: var(--sp-32); gap: var(--sp-16); }
#p-screen-card .response-step {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding-bottom: var(--sp-8);
  border-bottom-width: 2px;
  font: 550 var(--fs-13)/1.4 var(--font-sans);
}
#p-screen-card .response-step::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--border-strong);
}
#p-screen-card .response-step.is-current { font-weight: 600; }
#p-screen-card .response-step.is-current::before,
#p-screen-card .response-step.is-complete::before { background: var(--c-accent-ink); }
#p-screen-card .response-step.is-complete { border-color: var(--c-teal); color: var(--c-accent-ink); }
#p-screen-card .ask-row { margin-bottom: var(--sp-8); }
#p-screen-card .p-instruction { color: var(--c-accent-ink); font: 600 var(--fs-13)/1.5 var(--font-sans); }
#p-screen-card .p-question {
  font: 700 clamp(1.45rem, 4.2vw, 2.05rem)/1.4 var(--font-play);
  letter-spacing: -.02em;
  margin: 0 0 var(--sp-16);
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
#p-screen-card .target { font-size: clamp(1.5rem, 4.2vw, 2.15rem); line-height: 1.6; padding: 0; }
#p-screen-card .p-asks { display: flex; flex-wrap: wrap; gap: var(--sp-8); align-items: baseline; margin-bottom: var(--sp-24); line-height: 1.65; }
#p-screen-card .p-marks { background: var(--bg-soft); border-color: var(--border); font-size: var(--fs-13); padding: var(--sp-4) var(--sp-8); }
#p-screen-card .p-depth { font-size: var(--fs-14); }
/* 44px, the floor for anything a finger has to hit (Work Plan: "At least 44px high"). */
#p-screen-card .say-btn { width: 44px; height: 44px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 50%; }
#p-screen-card .mic-zone { padding: var(--sp-32) var(--sp-16) var(--sp-24); gap: var(--sp-16); }
#p-screen-card .mic {
  width: 100px;
  height: 100px;
  box-shadow: 0 6px 0 var(--under-teal), 0 0 0 10px var(--accent-soft);
  transition: transform 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
#p-screen-card .mic:hover:not(:disabled) { transform: translateY(-2px); }
#p-screen-card .mic:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 2px 0 var(--under-teal), 0 0 0 10px var(--accent-soft); }
#p-screen-card .mic:focus-visible { outline: none; box-shadow: 0 6px 0 var(--under-teal), 0 0 0 10px var(--accent-soft), 0 0 0 13px var(--ring); }
#p-screen-card .mic.is-live { box-shadow: 0 6px 0 var(--under-berry); }
#p-screen-card .mic.is-live:focus-visible { box-shadow: 0 6px 0 var(--under-berry), 0 0 0 4px var(--ring); }
#p-screen-card .mic-label { font: 650 1.08rem/1.4 var(--font-play); margin: var(--sp-8) 0 0; }
#p-screen-card .mic-hint { color: var(--fg-muted); font-size: var(--fs-13); line-height: 1.5; text-align: center; margin: -.5rem 0 0; }
/* The 3-2-1 takes the glyph's place rather than sitting beside it, so the eye
   stays on the one control. Still teal, not berry: nothing is recording yet, and
   berry has to keep meaning exactly that. Plain text throughout, the countdown
   included — no pulse and no pop — so reduced motion has nothing to take away. */
#p-screen-card .mic-count {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 700 2.6rem/1 var(--font-play);
  font-variant-numeric: tabular-nums;
  opacity: 0;
}
#p-screen-card .mic.is-counting .mic-count { opacity: 1; }
#p-screen-card .mic.is-counting .mic-glyph { opacity: 0; }
/* Tabular figures, or every second the time jiggles sideways by a pixel. */
#p-screen-card .mic-timer {
  margin: -.5rem 0 0;
  color: var(--fg-muted);
  font: 600 .95rem/1.4 var(--font-sans);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
#p-screen-card .mic-left { margin-left: var(--sp-8); color: var(--c-alert); }
#p-screen-card .meter-wrap { margin-top: var(--sp-8); }
#p-screen-card .meter-status { font-family: var(--font-sans); font-size: var(--fs-13); letter-spacing: 0; }
#p-screen-card .live-heard { font-size: var(--fs-14); line-height: 1.6; }
#p-screen-card:is([data-phase="review"], [data-phase="working"], [data-phase="recovery"], [data-phase="result"]) .mic-zone { display: none; }
#p-screen-card:is([data-phase="countin"], [data-phase="recording"], [data-phase="working"]) .actionbar,
#p-screen-card[data-phase="review"] #p-next { display: none; }
/* Playback and Submit live inside the card. A bottom-sticky secondary bar
   slides over them on short screens, so keep the complete response in flow. */
#p-screen-card .actionbar { position: static; gap: var(--sp-16); margin-top: var(--sp-16); padding-inline: 0; }
#p-screen-card .actionbar .btn { min-height: 48px; min-width: 150px; flex: 0 1 auto; }
#p-screen-card .actionbar .btn-go { padding-inline: var(--sp-24); }
#p-screen-card .actionbar .btn-ghost { background: transparent; color: var(--fg); border-color: var(--border-strong); }
#p-screen-card #p-next { margin-left: auto; }
#p-screen-card[data-phase="review"] .actionbar { justify-content: center; }
#p-screen-card .submission-recovery {
  margin: var(--sp-24) 0 0;
  padding: var(--sp-24);
  background: var(--accent-soft);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  text-align: left;
}
#p-screen-card .recorded-heading { margin: 0 0 var(--sp-8); font: 700 1.4rem var(--font-play); }
#p-screen-card .recorded-description { margin: 0 0 var(--sp-16); font-size: var(--fs-14); line-height: 1.6; color: var(--fg-muted); }
#p-screen-card #p-recorded-audio { display: block; margin: var(--sp-16) 0; }
#p-screen-card #p-submit-answer,
#p-screen-card #p-save-retry { min-height: 48px; width: 100%; }
#p-screen-card #p-save-recovery { background: var(--bg-soft); border-inline-start: 3px solid var(--c-gold-deep); }
#p-screen-card #p-save-message { margin: 0 0 var(--sp-16); font-size: var(--fs-14); line-height: 1.6; }
#p-screen-card .notice { margin-top: var(--sp-24); padding: var(--sp-16); border-radius: var(--r-sm); line-height: 1.6; }
#p-screen-card .grading { min-height: 155px; padding: var(--sp-48) var(--sp-16) var(--sp-24); }
#p-screen-card .grading-text { font: 650 var(--fs-20) var(--font-play); color: var(--fg); }
#p-screen-card .grading-sub { font-size: var(--fs-14); line-height: 1.5; margin-top: var(--sp-8); }
#p-screen-card .grading-bar { top: var(--sp-24); }

#p-screen-card .p-result-block { margin-top: var(--sp-24); padding-top: var(--sp-24); border-top: 1px solid var(--border); }
#p-screen-card .feedback-source { margin: 0 0 var(--sp-8); color: var(--fg-muted); font-size: var(--fs-13); font-weight: 600; }
#p-screen-card .verdict-head { font: 700 clamp(1.4rem, 4vw, 1.7rem)/1.3 var(--font-play); letter-spacing: -.015em; }
#p-screen-card .verdict-sub { font: 400 .95rem/1.7 var(--font-sans); margin-top: var(--sp-8); max-width: 62ch; }
#p-screen-card .verdict-figure { color: var(--c-accent-ink); font: 650 .95rem var(--font-sans); background: var(--accent-soft); border-radius: var(--r-xs); padding: var(--sp-4) var(--sp-8); }
#p-screen-card .verdict-figure::after { content: none; }
#p-screen-card .p-heard-label { margin: var(--sp-24) 0 var(--sp-8); font: 600 var(--fs-13) var(--font-sans); color: var(--fg-muted); text-transform: none; letter-spacing: 0; }
#p-screen-card .p-heard { background: var(--bg-soft); border: 0; border-radius: var(--r-sm); padding: var(--sp-16); font-size: .95rem; line-height: 1.75; }
#p-screen-card .p-feedback { margin-top: var(--sp-24); padding: 0; border: 0; }
#p-screen-card .p-feedback-head { font: 650 var(--fs-16) var(--font-play); letter-spacing: 0; text-transform: none; color: var(--fg); }
#p-screen-card .kp-result { gap: var(--sp-8); margin-top: var(--sp-8); }
#p-screen-card .kp-result-row { padding: var(--sp-16); background: var(--bg-soft); border: 0; border-radius: var(--r-sm); font-size: var(--fs-14); line-height: 1.6; }
#p-screen-card .kp-mark { width: 1.3rem; flex: none; }
#p-screen-card .kp-held-note { line-height: 1.6; margin-top: var(--sp-16); }
#p-screen-card .p-tech { margin-top: var(--sp-24); }
#p-screen-card .p-tech > summary { min-height: 44px; font-size: var(--fs-13); }
#p-screen-card .p-submitted { background: var(--accent-soft); border: 0; padding: var(--sp-24); border-radius: var(--r-sm); }
#p-screen-card .submitted-head { display: flex; align-items: center; gap: var(--sp-8); font: 700 1.4rem/1.3 var(--font-play); color: var(--fg); }
#p-screen-card .submitted-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--action); color: var(--action-ink); font: 650 var(--fs-18) var(--font-sans); }
#p-screen-card .submitted-sub { color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; margin: var(--sp-8) 0 0; }
#p-screen-card .p-submitted .p-heard { background: var(--card); }

#p-screen-done .hero-note { margin: 0; color: var(--fg-muted); font: 400 .95rem/1.7 var(--font-sans); }
#p-screen-done .recap-visit { margin: var(--sp-8) 0 0; color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; }
#p-screen-done .recap-list-title { margin: var(--sp-24) 0 var(--sp-8); font: 650 var(--fs-16) var(--font-play); }
#p-screen-done .sum-tiles { display: flex; gap: var(--sp-32); padding: var(--sp-24) 0; margin: var(--sp-24) 0 var(--sp-8); border-top: 1px solid var(--border); border-bottom: 0; }
#p-screen-done .tile { padding: 0; text-align: left; }
#p-screen-done .tile-num { font: 700 2.05rem/1.2 var(--font-play); color: var(--c-accent-ink); }
#p-screen-done .tile-cap { font: 400 var(--fs-13)/1.5 var(--font-sans); text-transform: none; letter-spacing: 0; margin-top: var(--sp-4); }
#p-screen-done .sum-list { margin: 0 0 var(--sp-24); }
#p-screen-done .sum-row { gap: var(--sp-16); align-items: start; padding: var(--sp-16) 0; border-bottom: 1px solid var(--border); font-size: var(--fs-14); line-height: 1.65; }
#p-screen-done .sum-dot { display: grid; place-items: center; width: 28px; height: 28px; margin: 0; flex: none; border: 0; border-radius: var(--r-xs); background: var(--bg-soft); color: var(--fg-muted); font: 600 var(--fs-13) var(--font-sans); }
#p-screen-done .sum-q { overflow-wrap: anywhere; }
#p-screen-done .sum-score { margin-top: .1rem; font: 550 var(--fs-13)/1.6 var(--font-sans); color: var(--fg-muted); white-space: nowrap; }
#p-screen-done .sum-score.is-answered { color: var(--c-accent-ink); }
#p-screen-done .teacher-note { margin: var(--sp-16) 0 var(--sp-24); padding: var(--sp-16); background: var(--bg-soft); border: 0; border-radius: var(--r-sm); color: var(--fg-muted); font-size: var(--fs-14); }
#p-screen-done .sum-actions { display: flex; gap: var(--sp-8); justify-content: space-between; }
#p-screen-done .sum-actions .btn { min-height: 48px; }
#p-screen-done #p-restart { margin-left: auto; }
#p-screen-card :is(#p-question, #p-target)[tabindex="-1"]:focus,
#p-screen-card :is(.recorded-heading, .submitted-head, #a-verdict)[tabindex="-1"]:focus,
#p-screen-ready h1[tabindex="-1"]:focus,
#p-screen-done h1[tabindex="-1"]:focus { outline: none; box-shadow: none; }

@media (max-width: 560px) {
  /* The corner stays the card's own on a phone; only the padding tightens. */
  #p-screen-card > .card,
  #p-screen-ready .ready-card,
  #p-screen-done .card-hero { padding: var(--sp-24); }
  #p-screen-card .response-steps { gap: var(--sp-8); margin-bottom: var(--sp-24); }
  #p-screen-card .response-step { font-size: var(--fs-13); gap: var(--sp-4); }
  #p-screen-card .response-step::before { display: none; }
  #p-screen-card .p-question { line-height: 1.4; }
  #p-screen-card .mic-zone { padding-top: var(--sp-24); padding-bottom: var(--sp-16); }
  #p-screen-card .mic { width: 92px; height: 92px; }
  #p-screen-card .p-submitted,
  #p-screen-card .submission-recovery { padding: var(--sp-16); }
  #p-screen-card .actionbar .btn { min-width: 0; max-width: 65%; }
  #p-screen-ready .mic-check { padding: var(--sp-16); grid-template-columns: minmax(0, 1fr); }
  #p-screen-ready .hero-emoji,
  #p-screen-done .hero-emoji { width: 62px; height: 62px; margin-bottom: var(--sp-16); }
  #p-screen-ready .hero-emoji img,
  #p-screen-done .hero-emoji img { width: 42px; height: 42px; }
  #p-screen-done .sum-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: var(--sp-8); }
  #p-screen-done .sum-score { grid-column: 2; }
  #p-screen-done .sum-actions { flex-direction: column-reverse; }
  #p-screen-done .sum-actions .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .question-progress > span,
  #p-screen-card .mic { transition: none; }
  #p-screen-card .mic:hover:not(:disabled),
  #p-screen-card .mic:active:not(:disabled) { transform: none; }
}

/* --- Microphone help, the picker, Pause, and answers kept on the device ---- */

/* The check's picker and steps run the full width of its grid, under the result. */
#p-screen-ready .mic-check > .mic-picker-slot,
#p-screen-ready .mic-check > .mic-help { grid-column: 1 / -1; margin: 0; }

/* One labelled dropdown. The skin is the shared .select-wrap, already 44px. */
.mic-picker { display: grid; gap: var(--sp-8); }
.mic-picker-name { font: 600 var(--fs-13)/1.4 var(--font-sans); color: var(--fg); }
.mic-picker-select { min-width: 0; text-overflow: ellipsis; }

/* A refused microphone: the reason, the steps, one way on. The gold edge is the
   one a save needing another try already wears — something to do, not an alarm. */
.mic-help { text-align: left; }
#p-screen-card .mic-help {
  margin: var(--sp-24) 0 0;
  padding: var(--sp-16) var(--sp-24);
  background: var(--bg-soft);
  border-inline-start: 3px solid var(--c-gold-deep);
  border-radius: var(--r-sm);
}
.mic-help-lead { margin: 0 0 var(--sp-16); font-size: .92rem; line-height: 1.6; color: var(--fg); }
.mic-help-title { margin: 0 0 var(--sp-8); font: 600 var(--fs-14)/1.5 var(--font-sans); color: var(--fg); }
.mic-help-steps { display: grid; gap: var(--sp-8); margin: 0 0 var(--sp-16); padding-left: var(--sp-24); font-size: var(--fs-14); line-height: 1.6; color: var(--fg); }
.mic-help-steps:last-child { margin-bottom: 0; }
.mic-help .mic-picker-slot { margin: 0 0 var(--sp-16); }
.mic-help-retry { width: 100%; min-height: 48px; }

/* Uri's line before a question's first recording: in the ink colour and the
   rounded face, a little larger than the instructions it stands in for. */
#p-screen-card .mic-hint.is-breath { color: var(--fg); font: 650 var(--fs-16)/1.5 var(--font-play); }

/* Pause sits quietly under the clock: the big button still finishes. */
#p-screen-card .mic-pause {
  min-height: 44px;
  min-width: 132px;
  padding-inline: var(--sp-24);
  background: transparent;
  color: var(--fg);
  border-color: var(--border-strong);
}
/* Paused reads at a glance from across a classroom: the halo stops and fades,
   the bars dim, and the meter says "paused" in the ink colour. The clock is
   left at full strength. It is still the answer's length, and supporting text
   stays at --fg-muted rather than being faded below it (Work Plan item 115,
   "Tiny grey text"). */
#p-screen-card .mic.is-live.is-paused .mic-pulse { animation: none; transform: none; opacity: .35; }
.meter-wrap.is-paused #p-meter { opacity: .45; }
.meter-wrap.is-paused .meter-status { color: var(--fg); font-weight: 600; }
#p-screen-card[data-phase="paused"] .actionbar { display: none; }

/* The recap's way back to what was skipped leads; "Back to your class" follows.
   Order puts the lead on the right in a row, and on top once the row stacks. */
#p-screen-done #p-copy { order: 0; }
#p-screen-done #p-restart { order: 1; }
#p-screen-done #p-revisit { order: 2; }

/* The class page's offer of a kept answer, first in the work column. */
#cp-recover { margin-bottom: var(--sp-24); }
.cp-recover-card {
  padding: var(--sp-24);
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--c-gold-deep);
  border-radius: var(--r-card);
}
.cp-recover-card h2 { margin: 0 0 var(--sp-8); font: 700 1.2rem/1.3 var(--font-play); color: var(--fg); }
.cp-recover-card p { margin: 0 0 var(--sp-16); max-width: 64ch; color: var(--fg-muted); font-size: var(--fs-14); line-height: 1.6; overflow-wrap: anywhere; }
.cp-recover-actions { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cp-recover-actions .btn { min-height: 48px; }
/* A skipped question is a choice the child made, so it reads in ink, not grey. */
#p-screen-work .cw-none.is-skipped { color: var(--fg); font-weight: 600; }

/* Work past its due date, said above the question, on the ready screen and on
   the activity's page, in ink at reading size: it is the first thing to read.
   Calm, in the accent, where late answers are still accepted; the recovery
   card's gold edge where an answer would not be sent. */
.late-note {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-16);
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--c-accent-ink);
  border-radius: var(--r-card);
  color: var(--fg);
  font: 500 var(--fs-16)/1.5 var(--font-body);
  max-width: 72ch;
  overflow-wrap: anywhere;
}
.late-note.is-closed { border-inline-start-color: var(--c-gold-deep); background: color-mix(in srgb, var(--c-gold) 10%, var(--card)); }
.late-note[hidden] { display: none; }
#p-screen-ready .late-note { margin: var(--sp-16) 0; }
#p-screen-work .cw-closed.late-note { margin: 0; }
/* A child brought back to the class page because the activity closed. */
.cp-note {
  margin: 0 0 var(--sp-16);
  padding: var(--sp-16);
  background: var(--card);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--c-gold-deep);
  border-radius: var(--r-card);
  color: var(--fg);
  font: 500 var(--fs-14)/1.5 var(--font-body);
}
.cp-note[hidden] { display: none; }

@media (max-width: 560px) {
  #p-screen-card .mic-help { padding: var(--sp-16); }
  .cp-recover-card { padding: var(--sp-16); }
  .cp-recover-actions .btn { flex: 1 1 100%; }
}

/* The way back from a question to its activity. A backchip, as the demo's
   "All activities" is, but full touch height: children tap it on tablets. */
#p-screen-card .activity-back { min-height: 44px; }