/* ══════════════════════════════════════════════════════════════════════════
   Conversation cards — the master copy

   THIS IS THE ONLY COPY THAT IS EDITED. Each module gets a copy of this file
   beside its own module.css; never edit a module's copy. See INSTALL.md.

   Three formats, built from the approved mock-up (Anu, 9 October 2026):

     .cc-say              a conversation card. MiM purple, and purple appears
                          on nothing else in these three formats.
     .cc-say--annot       annotated dialogue: the sentence split into parts
                          the learner can tap, with the notes beside them.
     .cc-alts             conversation alternatives: two cards side by side.
     .cc-lens             patient lens: Compare first, then what the patient
                          hears, then the better phrasing.

   ⚠ COLOUR IS DOING WORK HERE, SO IT IS RATIONED. MiM purple means "language
   you would say". MI light teal means "what the patient hears", and the
   patient-lens panel is the only place it appears anywhere in the course. A
   third colour, or either of these used decoratively, breaks the thing the
   learner is being taught to read.

   ⚠ EVERY SIZE IS `calc(Npx * var(--fs-scale))`. The engine's text-size
   control multiplies that token; a hardcoded px size ignores it and the
   learner who turns text up gets a card that does not move.

   ⚠ EVERY COLOUR HAS A `body.night-mode` RULE. `--fg` is not redefined in
   night mode, so a card that sets its own ground must set its own type colour
   too — the trap this course has now hit three times.
   ══════════════════════════════════════════════════════════════════════════ */

.cc-say,
.cc-compare,
.cc-hears {
  --cc-lang: var(--mim-purple-aa);
  --cc-lang-wash: rgba(183, 163, 252, 0.18);
  --cc-lang-mark: rgba(183, 163, 252, 0.75);
  /* MI light teal. Not in the kit, so it is declared here and nowhere else. */
  --cc-patient: #D7E8D2;
  --cc-patient-ink: #2F4A3A;
}
body.night-mode .cc-say,
body.night-mode .cc-compare,
body.night-mode .cc-hears {
  --cc-lang-wash: rgba(183, 163, 252, 0.14);
  --cc-lang-mark: rgba(183, 163, 252, 0.45);
  --cc-patient: #22302A;
  --cc-patient-ink: #D7E8D2;
}

/* ── the card ──────────────────────────────────────────────────────────── */
.cc-say {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--cc-lang-wash);
  border: 1px solid var(--cc-lang);
  border-radius: 14px;
  padding: 20px 22px 18px;
  margin: var(--sp-4, 20px) 0 var(--sp-5, 28px);
  max-width: var(--measure, 700px);
  min-width: 0;
}
.cc-say__label {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc(11px * var(--fs-scale));
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mim-purple-aa-dark);
}
body.night-mode .cc-say__label { color: #cdbcff; }
.cc-say__label svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* ⚠ UPRIGHT, NOT ITALIC, and the same decision as the phrase cards: a whole
   clinical script in italic serif is hard to read, and the quotation marks
   the copy already carries are what mark it as speech. */
.cc-say__phrase {
  margin: 0;
  font-family: var(--font-primary); font-weight: var(--weight-regular);
  font-size: calc(19px * var(--fs-scale)); line-height: 1.5;
  color: var(--fg);
}
body.night-mode .cc-say__phrase { color: rgba(255, 255, 255, 0.92); }
.cc-say__when {
  margin: 0;
  font-family: var(--font-primary);
  font-size: calc(15px * var(--fs-scale)); line-height: 1.5;
  color: var(--fg-muted);
}
body.night-mode .cc-say__when { color: rgba(255, 255, 255, 0.68); }

/* ── annotated dialogue ────────────────────────────────────
   ⚠ THE NUMBER IS THE CONTROL, NOT THE SENTENCE. Anu, 9 October 2026:
   *"the number 1 looks a bit different, the circle is different from number 2
   and 3. Can we make the numbers as hotspots and give learners instructions to
   click the numbers."* She is right about the circles: the whole part used to
   be one inline <button>, so a part that wrapped onto two lines carried its
   badge at the end of a broken inline box and sat differently from a badge on
   a part that did not wrap. With the badge as its own inline-block button, all
   of them are the same shape wherever the text breaks.

   ⚠ THE NOTES ARE VISIBLE AT REST. Tapping a number only highlights it and
   its note; nothing is hidden from a learner who never taps, which is why this
   needs no activity gate and the screen keeps its ordinary scroll gate. */
.cc-seg {
  border-bottom: 2px dotted var(--fg-muted);
  border-radius: 2px;
  transition: background-color var(--dur-base, .2s) var(--ease-standard, ease),
              color var(--dur-base, .2s) var(--ease-standard, ease);
}
body.night-mode .cc-seg { border-bottom-color: rgba(255, 255, 255, 0.5); }
.cc-part {
  display: inline-grid; place-items: center; vertical-align: 2px;
  width: calc(22px * var(--fs-scale)); height: calc(22px * var(--fs-scale));
  margin: 0 2px 0 5px; padding: 0;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--fg); color: var(--bg);
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc(12px * var(--fs-scale)); line-height: 1;
  transition: transform var(--dur-base, .2s) var(--ease-standard, ease);
}
.cc-part:hover { transform: scale(1.12); }
body.night-mode .cc-part { background: rgba(255, 255, 255, 0.92); color: #17171b; }
/* ⚠ THE NUMBERS STAY SOLID. THE WORDS ARE WHAT DIM. Anu, 13 October 2026, on
   SHAReT Module 2 screen 31: *"When I click number 1, the other two numbers
   get greyed out even though they are still clickable. But the learners won't
   know that. Can we still make all the numbers visible but just grey out the
   text?"*

   The whole segment used to drop to `opacity: 0.45`, and a number sits INSIDE
   its segment, so the buttons faded with the words. A faded control reads as a
   disabled one, and these three are the only way through the screen.

   ⚠ OPACITY CANNOT BE UNDONE ON A CHILD. An element can never be more opaque
   than its parent, so there is no rule that brings the button back while the
   segment is still dimmed. The dimming has to stop being opacity, which is
   why this is a colour now.

   ⚠ AND THE OLD DIM WAS FAILING AA WHERE NOTHING COULD SEE IT. Measured on
   the card's own wash: `opacity: 0.45` on body text is 3.33:1, under the 4.5
   AA needs. `audit.js` never caught it because it compares computed colours
   and opacity is not one - the same blind spot that hid the predict verdict's
   em dash. The replacement measures 5.8:1 in daylight and 7.4:1 after dark. */
.cc-say--annot.is-picked .cc-seg { color: rgba(0, 0, 0, 0.62); }
.cc-say--annot.is-picked .cc-seg.is-picked {
  color: inherit; background: var(--cc-lang-mark); border-bottom-color: transparent;
}
.cc-say--annot.is-picked .cc-seg.is-picked .cc-part {
  background: var(--mim-purple-aa); color: var(--mim-white);
}
body.night-mode .cc-say--annot.is-picked .cc-seg { color: rgba(255, 255, 255, 0.62); }
body.night-mode .cc-say--annot.is-picked .cc-seg.is-picked {
  color: rgba(255, 255, 255, 0.92);
}
.cc-part:focus-visible,
.cc-reveal:focus-visible { outline: 3px solid var(--mim-purple); outline-offset: 3px; }

/* Anu, 9 October 2026: *"the numbered boxes look very bunched together. Space
   it out."* The notes ran at an 8px gap with 10px of inner padding, which read
   as one block rather than as one note per part. */
.cc-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.cc-notes li {
  display: grid; grid-template-columns: 24px 1fr; gap: 12px;
  padding: 14px 16px; border-radius: 10px;
  font-family: var(--font-primary);
  font-size: calc(15px * var(--fs-scale)); line-height: 1.5;
  color: var(--fg-muted);
}
.cc-notes li b {
  display: grid; place-items: center;
  width: 22px; height: 22px; margin-top: 1px; border-radius: 999px;
  font-size: calc(12px * var(--fs-scale)); font-weight: var(--weight-semibold);
  background: var(--fg); color: var(--bg);
}
.cc-notes li.is-on { background: var(--mim-white); color: var(--fg); }

/* ⚠ A NOTE STAYS OUT OF THE WAY UNTIL ITS NUMBER IS PRESSED. Anu, 13 October
   2026, on SHAReT Module 2 screen 31: *"only reveal the 1, 2, and 3 feedback
   once they click the respective numbers. So the learner should first see
   only the first paragraph after Say in the box."* All three used to be
   printed under the sentence from the start, which left the numbered buttons
   with nothing to reveal and gave away the reading of a sentence the learner
   is meant to look at first.

   `is-seen` is set on first press and never cleared (conversation-cards.js),
   so the notes accumulate as the learner works through 1, 2 and 3 rather
   than replacing one another.

   Scoped to the ANNOTATED card only. `.cc-notes` outside `.cc-say--annot`
   has no numbered buttons to reveal it, so hiding it there would hide it for
   good. */
.cc-say--annot .cc-notes li { display: none; }
.cc-say--annot .cc-notes li.is-seen { display: grid; }

/* The list keeps no gap while it is empty, or the sentence sits above a band
   of nothing on a screen the learner has not touched yet. */
.cc-say--annot .cc-notes:not(:has(.is-seen)) { gap: 0; }
body.night-mode .cc-notes li { color: rgba(255, 255, 255, 0.68); }
body.night-mode .cc-notes li b { background: rgba(255, 255, 255, 0.92); color: #17171b; }
body.night-mode .cc-notes li.is-on { background: #17171b; color: rgba(255, 255, 255, 0.92); }

/* ── conversation alternatives ─────────────────────────────────────────── */
.cc-alts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px; align-items: start;
  max-width: var(--measure, 700px);
  margin: var(--sp-4, 20px) 0 var(--sp-5, 28px);
}
@media (max-width: 760px) { .cc-alts { grid-template-columns: 1fr; } }
.cc-alts .cc-say { margin: 0; justify-content: space-between; }
.cc-alts .cc-say__phrase { font-size: calc(17px * var(--fs-scale)); }

/* ── patient lens ──────────────────────────────────────────────────────── */
.cc-lens {
  display: grid; gap: 14px;
  max-width: var(--measure, 700px);
  margin: var(--sp-4, 20px) 0 var(--sp-5, 28px);
}
.cc-compare {
  display: flex; flex-direction: column; gap: 12px;
  background: var(--mim-grey-light); border: 1px solid var(--border);
  border-radius: 14px; padding: 20px 22px;
}
body.night-mode .cc-compare { background: #232329; border-color: rgba(255, 255, 255, 0.18); }
.cc-compare .cc-say__phrase { color: var(--fg-muted); }
body.night-mode .cc-compare .cc-say__phrase { color: rgba(255, 255, 255, 0.68); }
.cc-compare .cc-say__label { color: var(--fg-muted); }
body.night-mode .cc-compare .cc-say__label { color: rgba(255, 255, 255, 0.68); }

.cc-reveal {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 8px 18px;
  border: 0; border-radius: var(--radius-pill, 999px);
  background: var(--mim-black); color: var(--mim-white);
  font-family: var(--font-primary); font-weight: var(--weight-semibold);
  font-size: calc(14px * var(--fs-scale));
  cursor: pointer;
}
body.night-mode .cc-reveal { background: var(--mim-purple); color: var(--mim-black); }
.cc-reveal svg {
  width: 16px; height: 16px;
  transition: transform var(--dur-base, .3s) var(--ease-standard, ease);
}
.cc-reveal[aria-expanded="true"] svg { transform: rotate(180deg); }

.cc-hears {
  display: flex; flex-direction: column; gap: 8px;
  background: var(--cc-patient); color: var(--cc-patient-ink);
  border-radius: 14px; padding: 18px 22px;
}
.cc-hears .cc-say__label,
.cc-hears .cc-say__phrase { color: var(--cc-patient-ink); }
body.night-mode .cc-hears .cc-say__label,
body.night-mode .cc-hears .cc-say__phrase { color: var(--cc-patient-ink); }
.cc-hears .cc-say__phrase { font-size: calc(17px * var(--fs-scale)); }

/* The reveal animates only when the learner has not asked for less motion.
   The class is set by conversation-cards.js, which reads the engine's live
   toggle rather than the media query alone. */
.cc-lens__out.cc-animate { animation: cc-slide .35s var(--ease-standard, ease); }
@keyframes cc-slide {
  from { opacity: 0.2; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-lens__out.cc-animate { animation: none; }
  .cc-part, .cc-reveal svg { transition: none; }
}

/* The card can be the reveal of a free recall, where its container is a <ul>.
   It is wrapped in an <li> so the list stays valid HTML; this takes the list
   furniture back off. */
li.cc-recall-item { list-style: none; margin: 0; padding: 0; }
li.cc-recall-item::marker { content: none; }
li.cc-recall-item .cc-say { margin: 0; }