/* Deep Dive 5 - Finn, the guide character.
 * PILOT, 2026-10-07: loaded by Math 1 Lesson 1 only. No other page references this file.
 * Scoped entirely to .dd5-* so it cannot affect anything that does not opt in.
 * Line-art figure in the lesson's own accent colour, white bubble with a 1px Mist
 * border and no shadow, which is the house card treatment.
 */

.dd5-say {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  margin: 14px 0 0;
}
.dd5-say .dd5-finn {
  width: 56px;
  height: 56px;
  color: var(--accent-dark, #1B3A5C);
  flex: none;
}
.dd5-say .dd5-bubble,
.dd5-say .pp-hint-box {
  position: relative;
  background: #fff;
  border: 1px solid var(--mist, #D4DBDF);
  border-radius: 4px;
  padding: 12px 16px;
  font-size: 16.5px;
  line-height: 1.55;
  color: var(--text, #2d2348);
  margin: 0;
}
/* the little pointer, drawn as two triangles so the 1px border reads through */
.dd5-say .dd5-bubble::before,
.dd5-say .pp-hint-box::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 18px;
  border: 9px solid transparent;
  border-right-color: var(--mist, #D4DBDF);
  border-left: 0;
}
.dd5-say .dd5-bubble::after,
.dd5-say .pp-hint-box::after {
  content: "";
  position: absolute;
  left: -8px;
  top: 18px;
  border: 9px solid transparent;
  border-right-color: #fff;
  border-left: 0;
}
.dd5-say .dd5-bubble p { margin: 0 0 8px; font-size: inherit; }
.dd5-say .dd5-bubble p:last-child { margin-bottom: 0; }
.dd5-say .dd5-name {
  display: block;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark, #1B3A5C);
  margin-bottom: 3px;
}

/* The practice-card version. Hidden until the engine puts the hint box into
 * its "show" state, which dd5-guide.js mirrors onto this row. */
.dd5-say-hint { display: none; margin: 0 0 14px; }
.dd5-say-hint.is-on { display: grid; }
/* the engine's own hint styling would fight the bubble, so neutralise it */
.dd5-say-hint .pp-hint-box.show { display: block; }

/* On a dark "say" band the figure goes white and the bubble keeps dark text,
 * otherwise both inherit the band's white and vanish. */
.lesson-card.say .dd5-say .dd5-finn { color: #fff; }
.lesson-card.say .dd5-say .dd5-bubble,
.lesson-card.say .dd5-say .dd5-bubble p { color: var(--text, #2d2348); font-size: 16.5px; }
.lesson-card.say .dd5-say .dd5-bubble { border-color: #fff; }
.lesson-card.say .dd5-say .dd5-bubble::before { border-right-color: #fff; }

@media (max-width: 560px) {
  .dd5-say { grid-template-columns: 40px minmax(0, 1fr); gap: 10px; }
  .dd5-say .dd5-finn { width: 40px; height: 40px; }
  .dd5-say .dd5-bubble, .dd5-say .pp-hint-box { font-size: 15.5px; padding: 10px 13px; }
}