/* Report a problem, the consent-basis dialog, and the small links that sit
   under both audiences' screens (Report a problem, Trust centre).

   Everything here is built from the shared modal and tokens. The report dialog
   is the one dialog that has to show a list as well as ask a question, so it
   scrolls inside itself instead of growing past a phone's screen. The dialog's
   own corner and padding are the shared .modal-body's (styles.css). */

/* ── The report dialog ───────────────────────────────────────────────────── */

.report-modal .report-body {
  width: min(480px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  text-align: left;
}
.report-modal .modal-title { margin-bottom: var(--sp-8); }

.report-field { display: block; margin-top: var(--sp-16); }
.report-field .mono-label { margin-bottom: var(--sp-4); }
.report-modal .report-text { min-height: 6.5rem; }

.report-hint,
.report-never {
  margin: var(--sp-8) 0 0;
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--fg-muted);
}

/* Shown only when the scrub changed what was typed, so the person sees the
   text that will actually leave, not the text they wrote. */
.report-scrubbed {
  margin: var(--sp-8) 0 0;
  padding: var(--sp-8);
  border-left: 3px solid var(--border-strong);
  background: var(--bg-soft);
  font-size: var(--fs-13);
  line-height: 1.45;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* A short uppercase label with tracking: the one kind of text allowed --fs-12. */
.report-sent-head {
  margin: var(--sp-16) 0 var(--sp-8);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-12);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--fg-muted);
}

.report-facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--sp-4) var(--sp-16);
  margin: 0;
  padding: var(--sp-8) var(--sp-16);
  background: var(--bg-soft);
  border-radius: var(--r-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  line-height: 1.45;
}
.report-facts dt { color: var(--fg-muted); }
.report-facts dd { margin: 0; color: var(--fg); overflow-wrap: anywhere; }
.report-fact-line { display: block; }
.report-fact-line + .report-fact-line { margin-top: var(--sp-4); }

.report-status { margin: var(--sp-16) 0 0; font-size: var(--fs-14); line-height: 1.45; }
.report-status:empty { display: none; }
.report-status.is-error { color: var(--c-alert); }

.report-done { text-align: center; }

/* A phone has no room for two columns of facts; each label sits over its
   value instead. */
@media (max-width: 480px) {
  .report-facts { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .report-facts dd { margin-bottom: var(--sp-8); }
  .report-facts dd:last-child { margin-bottom: 0; }
}

/* ── The consent-basis dialog ────────────────────────────────────────────── */

.consent-modal .consent-body {
  width: min(460px, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  overflow: auto;
  text-align: left;
}
.consent-modal .modal-icon { margin-inline: 0; }
.consent-modal .modal-icon.is-quiet {
  background: var(--accent-soft);
  color: var(--c-accent-ink);
}
.consent-basis {
  margin: var(--sp-16) 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--sp-8);
}
.consent-basis legend { padding: 0; margin-bottom: var(--sp-8); }
.consent-option {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  min-height: 44px;
  padding: var(--sp-4) 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--field);
  font-size: var(--fs-14);
  cursor: pointer;
}
.consent-option:hover { border-color: var(--border-strong); }
.consent-option:has(input:checked) {
  border-color: var(--c-accent-ink);
  background: var(--accent-soft);
}
.consent-option input { accent-color: var(--action); margin: 0; width: 1.05rem; height: 1.05rem; flex: none; }
.consent-option input:focus-visible { box-shadow: 0 0 0 var(--ring-w) var(--ring); border-radius: 50%; }
.consent-note-field { display: block; margin-top: var(--sp-16); }
.consent-modal .consent-note { min-height: 4.5rem; }
.consent-foot {
  margin: var(--sp-8) 0 0;
  font-size: var(--fs-13);
  line-height: 1.45;
  color: var(--fg-muted);
}

/* ── Footer links ────────────────────────────────────────────────────────── */

/* In the teacher's status bar: the bar's own mono type and muted colour, so
   the two links read as part of the frame, not as page content. The bar is a
   grid of named areas (teacher-workspace.css), with a centred help area. */
.t-foot .t-foot-links {
  grid-area: help;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  justify-self: center;
  gap: 0 var(--sp-16);
}
.t-foot-link {
  font: inherit;
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: var(--sp-4);
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.t-foot-link:hover { color: var(--fg); text-decoration-color: currentColor; }
.t-foot-link:focus-visible { border-radius: var(--r-xs); }

/* Under a student's screens: centred, quiet, and big enough for a finger.
   Outside the screen sections so every student screen gets it without each
   one repeating it. */
.p-foot {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-24);
  max-width: 620px;
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-16) calc(var(--sp-16) + env(safe-area-inset-bottom, 0px));
}
.p-foot-link {
  font: inherit;
  font-size: var(--fs-14);
  color: var(--fg-muted);
  background: none;
  border: 0;
  padding: 0 var(--sp-4);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-underline-offset: 3px;
  cursor: pointer;
}
.p-foot-link:hover { color: var(--fg); text-decoration-color: currentColor; }

/* The trust link under the recording notice: the one place a child is told
   what happens to their voice, so the place to find out more sits under it. */
.rec-trust { margin: var(--sp-16) 0 0; font-size: var(--fs-14); color: var(--fg-muted); }
.rec-trust a { color: var(--c-accent-ink); text-underline-offset: 3px; }

@media (max-width: 700px) {
  .t-foot-link { min-height: 44px; }
}