/*
 * Vorstellungsgespräch. Layout only; colour and type come from ui.css tokens.
 */
.interview { display: grid; gap: var(--s-4); }
.iv-form { display: grid; gap: var(--s-3); }
.iv-tracks { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.interview .btn.iv-soon:disabled { opacity: 1; color: var(--muted); border-color: var(--line); cursor: not-allowed; }
.iv-card summary { cursor: pointer; font-weight: 600; }
.iv-card .label { margin-top: var(--s-3); }
.iv-phrases, .iv-mistakes { display: grid; gap: var(--s-2); margin: 0; padding-left: var(--s-4); }
.iv-mistakes .sub { display: block; color: var(--muted); }
.iv-sheet__q { break-inside: avoid; margin-top: var(--s-4); }
.iv-sheet__q h2 { font-size: var(--fs-18); }
.interview-sheet { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius, 12px); padding: var(--s-5); }
.interview-sheet h1 { font-size: var(--fs-28); }

@media (min-width: 768px) {
  .iv-form { grid-template-columns: 1fr 1fr; }
  .iv-form .btn { grid-column: 1 / -1; justify-self: start; }
}

@media print {
  @page { margin: 14mm; }
  body { background: white; color: black; }
  .rail, .topbar, .tabbar, .toast-region, .skip-link, .iv-noprint { display: none !important; }
  .shell, .shell.is-collapsed { display: block; background: none; }
  .shell__content { width: 100%; margin: 0; }
  .interview-sheet { border: 0; padding: 0; background: white; color: black; }
  .iv-sheet__q { break-inside: avoid; }
  a { text-decoration: none; }
}