/* Deep Dive 5 - lesson kit: tiles, the two-voice talk block, the "write it down"
 * callout, and the circle/box marks for like terms.
 *
 * New file, 2026-10-11, for Math 7 Unit 4 "Hand It Out, Take It Back". Built as a shared
 * stylesheet rather than page CSS because later lessons will reuse all four pieces.
 * Everything here is scoped to its own class names, so loading it changes nothing on a
 * page that does not use them.
 *
 * Accessibility notes that are load-bearing, not decoration:
 *   - every tile is one <a>, so the whole card is clickable AND keyboard focusable
 *   - the two voices are told apart by a text label, never by colour alone
 *   - like terms are marked by SHAPE (pill vs square), never by colour alone
 *   - the character figures are decorative and aria-hidden; the names are real text
 */

/* ---------- tiles ------------------------------------------------------- */
/* Janet's rule: no coloured stripe down one side. That is the look every machine-made
 * page has. The numeral is the anchor instead. */
.kit-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.kit-tile {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: start;
  column-gap: 16px;
  row-gap: 4px;
  border: 2px solid var(--mist, #D4DBDF);
  border-radius: 6px;
  background: #fff;
  padding: 16px 18px;
  text-decoration: none;
  color: inherit;
}
.kit-tile:hover { background: #FAFBFC; border-color: var(--accent-dark, #1B3A5C); }
.kit-tile:focus-visible { outline: 3px solid #F4A261; outline-offset: 2px; }
.kit-tile .kit-n {
  grid-row: 1 / span 3;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--accent-dark, #1B3A5C);
  color: #fff;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  display: grid; place-items: center;
}
.kit-tile .kit-t {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--text-strong, #1B3A5C);
  line-height: 1.25;
}
.kit-tile .kit-d { font-size: 16px; color: var(--text, #2d2348); line-height: 1.45; }
.kit-tile .kit-start {
  justify-self: start;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-dark, #1B3A5C);
  border: 1.5px solid var(--accent-dark, #1B3A5C);
  border-radius: 999px;
  padding: 2px 9px;
}

/* ---------- the two-voice talk block ------------------------------------ */
.kit-talk {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 14px;
  margin: 16px 0;
}
.kit-voice {
  /* The dark "say" band sets white text for everything inside it. This card keeps its own
     white background wherever it sits, so it has to state its text colour or the words
     vanish (dd5-guide.css does the same for the old speech bubble). */
  color: var(--text, #2d2348);
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid var(--mist, #D4DBDF);
  border-radius: 6px;
  padding: 13px 15px;
  background: #fff;
}
.kit-voice img { width: 56px; height: auto; display: block; }
.kit-voice .kit-who {
  display: block;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--accent-dark, #1B3A5C);
  margin-bottom: 3px;
}
.kit-voice .kit-mode {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-dim, #5A6B7D);
  border: 1px solid var(--mist, #D4DBDF);
  border-radius: 3px;
  padding: 1px 6px;
  margin-left: 6px;
  white-space: nowrap;
}
.kit-voice p { margin: 0; font-size: 17px; line-height: 1.5; }

/* ---------- write it down ------------------------------------------------ */
.kit-writedown {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  gap: 13px;
  align-items: start;
  border: 2px solid var(--accent-dark, #1B3A5C);
  border-radius: 6px;
  background: #FFFDF6;
  padding: 14px 16px;
  margin: 16px 0;
}
.kit-writedown svg { width: 26px; height: 26px; color: var(--accent-dark, #1B3A5C); }
.kit-writedown p { margin: 0; font-size: 16.5px; line-height: 1.5; }

/* ---------- like terms: shape carries the meaning ------------------------ */
.term-var, .term-const {
  display: inline-block;
  padding: 1px 9px;
  margin: 0 1px;
  font-weight: 700;
  border: 2px solid currentColor;
  line-height: 1.5;
}
.term-var { border-radius: 999px; color: #1B4F8A; }      /* variable terms: a circle */
.term-const { border-radius: 3px; color: #8A5514; }      /* constants: a box */

/* ---------- one step per line, like work on paper ------------------------ */
.kit-work { margin: 10px 0; font-size: 18px; line-height: 2.1; }
.kit-work > span { display: block; }
/* a step label sits to the RIGHT of its line, so it must stay inline inside it */
.kit-work .kit-where { display: inline; font-size: 13px; }

/* ---------- the big "let me try a few" button ---------------------------- */
.kit-try {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  color: #fff;
  background: var(--accent-dark, #1B3A5C);
  border: 2px solid var(--accent-dark, #1B3A5C);
  border-radius: 6px;
  padding: 13px 22px;
  text-decoration: none;
  margin-top: 6px;
}
.kit-try:hover { background: #fff; color: var(--accent-dark, #1B3A5C); }
.kit-try:focus-visible { outline: 3px solid #F4A261; outline-offset: 3px; }

.kit-where {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-dim, #5A6B7D);
}

@media (max-width: 560px) {
  .kit-tile { grid-template-columns: 42px minmax(0, 1fr); column-gap: 12px; padding: 14px; }
  .kit-tile .kit-n { width: 36px; height: 36px; font-size: 18px; }
  .kit-tile .kit-t { font-size: 18px; }
}

/* ---------- numbered steps ----------------------------------------------- */
.kit-steps { margin: 10px 0 0; padding-left: 22px; font-size: 17px; line-height: 1.65; }
.kit-steps li { margin-bottom: 7px; }

/* ---------- the two-voice word table ------------------------------------- */
.kit-words { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 16.5px; }
.kit-words th {
  text-align: left;
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent-dark, #1B3A5C);
  border-bottom: 2px solid var(--mist, #D4DBDF);
  padding: 0 12px 7px 0;
}
.kit-words td { vertical-align: top; padding: 9px 12px 9px 0; border-bottom: 1px solid var(--mist, #D4DBDF); line-height: 1.5; }
.kit-words tr:last-child td { border-bottom: 0; }
@media (max-width: 560px) {
  .kit-words, .kit-words tbody, .kit-words tr, .kit-words td, .kit-words th { display: block; }
  .kit-words thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
  .kit-words tr { border-bottom: 1px solid var(--mist, #D4DBDF); padding: 8px 0; }
  .kit-words td { border: 0; padding: 2px 0; }
}

/* ---------- Listen buttons (added 2026-10-11, Janet's recordings) ------------
 * Two shapes. Inside a voice block the button sits under the speaker's name, so it reads
 * as part of what that character is saying. On a card with no character, a .kit-listen row
 * says who is reading and carries the button. Both only appear when dd5-audio.js finds a
 * recording, so a card with no clip looks exactly as it did. */
.kit-voice .dd5-audio-btn { margin: 1px 0 6px; }

.kit-listen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 11px;
  margin: 2px 0 14px;
}
.kit-listen img { width: 40px; height: auto; display: block; flex: none; }
.kit-listen .kit-listen-who {
  font-family: "Fredoka", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dim, #5A6B7D);
}
.kit-listen .dd5-audio-btn { margin: 0; }
/* the pill is two words and must not break across lines at phone width */
.kit-listen .dd5-audio-btn span { white-space: nowrap; }
@media print { .kit-listen { display: none; } }

/* ---------- a drawn figure (2026-10-12) ----------------------------------------------
 * For the thing a sentence cannot say: arrows showing a number being handed to every term
 * inside a parenthesis, sign and all. The SVG takes the page's text colour, so it works on
 * any of the site's accents without a second copy. */
.kit-figure { margin: 14px 0; padding: 0; }
.kit-figure .kit-svg {
  display: block;
  width: 100%;
  max-width: 620px;
  height: auto;
  color: var(--accent-dark, #1B3A5C);
}
.kit-figure figcaption {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text, #2d2348);
  margin-top: 6px;
  max-width: 620px;
}

/* ---------- the raised negative sign (Janet, 2026-10-12) ------------------------------
 * A negative NUMBER is written with its sign raised and small, so it reads as part of the
 * number rather than as an operation: 4x + ⁻2x, not 4x + (−2x). Subtraction keeps a normal
 * full-size minus, which is the whole point: the two are different things and should not
 * look the same. Matches .pp-sup in the practice engine, so a problem and its explanation
 * look identical. */
.kit-neg {
  font-size: .72em;
  vertical-align: super;
  line-height: 0;
  font-weight: 700;
  margin-right: .02em;
}

/* ---------- a Listen button inside the word table (2026-10-13) ------------------------
 * Elle says the word, Finn says what it means, so each cell can have its own clip. A full
 * "Listen" pill in every cell would shout louder than the words, so it is the icon alone;
 * the accessible name still says which voice and which word. */
.kit-words td .dd5-audio-btn {
  margin: 0 7px 0 0;
  padding: 4px;
  width: 25px;
  height: 25px;
  border-width: 1.5px;
  vertical-align: -5px;
}
.kit-words td .dd5-audio-btn span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.kit-words td .dd5-audio-btn svg { width: 13px; height: 13px; }

/* ---------- a Listen button in front of each worked-example step (2026-10-13) ----------
 * Janet: "put a speaker in front of each step in the worked example", in place of the
 * two-voice box that used to sit under it. Every step line reserves the same left gutter
 * whether or not it has a recording yet, so the expressions stay in one column and the
 * buttons read as bullets down the side. Icon only, like the word table: a full "Listen"
 * pill on five lines would shout louder than the maths. */
.kit-marked > span { padding-left: 34px; }
.kit-marked > span .dd5-audio-btn {
  margin: 0 9px 0 -34px;
  padding: 4px;
  width: 25px;
  height: 25px;
  border-width: 1.5px;
  vertical-align: -5px;
}
.kit-marked > span .dd5-audio-btn span {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap;
}
.kit-marked > span .dd5-audio-btn svg { width: 13px; height: 13px; }

/* ---------- a voice card on the dark "say" band (2026-10-13) --------------------------
 * The band is styled by each lesson's own <style>, which sets .say p and .say strong to
 * white. Plain inheritance loses to those, so the card wins its own words back by name.
 * Without this the big idea reads as an empty white box. */
.lesson-card.say .kit-voice,
.lesson-card.say .kit-voice p,
.lesson-card.say .kit-voice strong,
.lesson-card.say .kit-voice em,
.lesson-card.say .kit-voice .kit-who { color: var(--text, #2d2348); }
.lesson-card.say .kit-voice .kit-mode,
.lesson-card.say .kit-voice .dd5-audio-btn { color: var(--navy, #1B3A5C); }
.lesson-card.say .kit-voice .dd5-audio-btn { border-color: var(--navy, #1B3A5C); background: #fff; }
.lesson-card.say .kit-voice .dd5-audio-btn.is-playing { background: var(--navy, #1B3A5C); color: #fff; }

/* ---------- net-worth money table (2026-10-15, Math 7 Unit 3) -------------------------
 * Finn's money picture: a real <table> with a <caption>, "Have (+)" / "Owe (-)" headers
 * (the + and - carry the meaning, never colour), one amount per row in its own column, and
 * a Net worth row spanning both columns with the result in words. accent-on-white and
 * text-on-white both pass WCAG AA. Shared so later Unit 3 lessons (multiplying, dividing)
 * reuse it. Replaced the Plus-the-Opposite chip styles, which nothing uses any more. */
.networth-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; margin: 12px 0; }
.networth { border-collapse: collapse; margin: 12px 0; width: 100%; max-width: 360px; font-size: 16.5px; }
.networth caption { text-align: left; font-weight: 600; color: var(--text-dim, #5A6B7D); font-size: 14px; padding-bottom: 6px; }
.networth th {
  text-align: center; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: .03em; text-transform: uppercase;
  color: var(--accent-dark, #1B3A5C); border-bottom: 2px solid var(--mist, #D4DBDF); padding: 4px 10px 7px;
}
.networth td { border-bottom: 1px solid var(--mist, #D4DBDF); padding: 7px 10px; text-align: center; }
.networth .nw-amt { font-weight: 700; color: var(--text, #2d2348); }
.networth tfoot .nw-total { text-align: left; background: #FBFCFD; font-size: 15.5px; line-height: 1.45; border-bottom: 0; }
.networth .nw-label {
  display: inline-block; font-family: "Fredoka", system-ui, sans-serif; font-weight: 600;
  font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--accent-dark, #1B3A5C);
  margin-right: 6px;
}

/* Listen to both: dd5-audio.js adds the button only when both files exist, so the container
 * is empty and takes no space until the recordings land. */
.kit-talk-both { margin: -2px 0 12px; }
.kit-talk-both:empty { display: none; }
.kit-talk-both .dd5-audio-both { margin: 0; }

/* ---------- number-line figure (2026-10-15, Math 7 Unit 3) ---------------------------
 * The SVG itself is generated by number_line_svg() in tools/math7-add-subtract/build.py
 * and reuses the existing .kit-figure wrapper (width:100%, caption, accent colour). This
 * only holds it to a sensible width so a short line does not stretch across a desktop. To
 * make a new one, call number_line_svg(lo, hi, dots=, jumps=, brackets=); see the builder. */
.kit-numline .kit-svg { max-width: 560px; }