/* ═══════════════════════════════════════════════════
   SAMRO STUDIOS · Missed Call Test and clip page
   ═══════════════════════════════════════════════════

   Loaded AFTER /quiz/quiz.css, which owns the tokens, the shell, the fields,
   the submit button and the result screen. Everything here is what those two
   pages need and the quiz does not: the consent tick, the three line "what
   happens" list, the player on the clip page and its two empty states.

   Designed at 390px first, same as the quiz. Zero em dashes.
   ═══════════════════════════════════════════════════ */

/* ── the form ───────────────────────────────────────────────────────────── */

.q__h + .q__lede {
  margin-bottom: 26px;
}

/* The consent tick. A 24px box with a 44px tap target around it, and the
   sentence is the label, so the whole line is pressable. */
.tick {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 18px 0 20px;
  padding: 14px 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  cursor: pointer;
}

.tick input {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--accent-a);
  cursor: pointer;
}

.tick:has(input:focus-visible) {
  outline: 2px solid var(--accent-b);
  outline-offset: 2px;
}

.tick.is-bad {
  border-color: #e5a396;
  background: #fdeeea;
}

/* A field the server named. The message sits under the input it belongs to,
   so the eye does not have to travel back up the form to find the fix. */
.field.is-bad input {
  border-color: #c9412a;
}

.field__bad {
  display: block;
  margin-top: 6px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #9b2312;
}

/* The promise directly under the button, where a thumb is already looking.
   Heavier than the consent line below it, because it is the sentence that
   answers "what is this going to cost me", and nobody reads legal type. */
.under {
  margin: 12px 0 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: var(--ink);
}

/* What actually happens, in three lines. Not cards: three sentences with a
   rule between them read faster than three boxes and weigh nothing. */
.steps3 {
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.steps3 li {
  padding: 13px 0;
  font-size: 0.9375rem;
  color: var(--body);
  border-bottom: 1px solid var(--line);
}

.steps3 b {
  color: var(--ink);
  font-weight: 600;
}

/* The result screen's secondary way out, under the filled button. */
.after {
  display: block;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--body);
}

a.submit {
  text-decoration: none;
  text-align: center;
}

/* ── the clip page ──────────────────────────────────────────────────────── */

.clip__when {
  margin: 0 0 6px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--muted);
}

/* The player. A native <audio> keeps the scrubber, the volume and the
   keyboard behaviour every platform already knows, and it is the one control
   on the page that must not be reinvented. */
.player {
  width: 100%;
  margin: 22px 0 8px;
  border-radius: var(--r);
}

.clip__what {
  margin: 0 0 24px;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--body);
}

.clip__what b {
  color: var(--ink);
  font-weight: 600;
}

/* Loading and the two ways there is nothing to play. Quiet, not alarming:
   an expired clip is the normal end of a link that lived in a text message. */
.clip__state {
  margin: 22px 0 24px;
  padding: 18px 18px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--body);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
}

@media (min-width: 640px) {
  .tick {
    padding: 16px 18px;
  }
}