/* Extracted from bota-chat's static/style.css: base rules the page shell
   needs (reset, root variables, header/nav) plus every .quiz-*, .hoeren-*
   and translate-widget (.tap-*, .translate-*, .translated-text,
   .news-item-actions) class actually used by the Hören templates/JS. The
   full file also had chat/news/offers/admin/exercise-list rules that don't
   apply here — not copied. */

* { box-sizing: border-box; }
html { font-size: 16px; }
html[data-font-size="large"] { font-size: 18px; }
html[data-font-size="xlarge"] { font-size: 20px; }
:root {
  --bg: #fafafa;
  --surface: #fff;
  --border: #e5e5e5;
  --text: #1a1a1a;
  --text-muted: #6b6b6b;
  --accent: #2d2d2d;
  --accent-contrast: #fff;
  --radius: 16px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #16171a;
    --surface: #212226;
    --border: #34353a;
    --text: #f0f0f0;
    --text-muted: #9a9a9f;
    --accent: #e8e8e8;
    --accent-contrast: #1a1a1a;
  }
}
body {
  font-family: system-ui, -apple-system, sans-serif;
  max-width: 720px;
  margin: 0 auto;
  padding: 1.25rem 1rem 3rem;
  color: var(--text);
  background: var(--bg);
}
/* Arabic diacritics (tashkil) sit above/below the letter and get clipped by
   Latin-tuned line-height — needs more room than the rest of the UI. */
:lang(ar) { line-height: 1.9; }
header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
header .header-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; margin-inline-start: auto; }
header nav.lang-switch { display: flex; gap: 0.5rem; order: 1; }
header nav.lang-switch a {
  text-decoration: none; padding: 0.25rem 0.6rem; border-radius: 6px;
  color: var(--text-muted); font-size: 0.85rem; border: 1px solid var(--border);
}
header nav.lang-switch a.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
header nav.font-switch { display: flex; gap: 0.35rem; align-items: baseline; order: 2; }
header nav.font-switch a {
  text-decoration: none; padding: 0.15rem 0.45rem; border-radius: 6px; line-height: 1;
  color: var(--text-muted); border: 1px solid var(--border); font-weight: 600;
}
header nav.font-switch a.active { background: var(--accent); color: var(--accent-contrast); border-color: var(--accent); }
header nav.font-switch a.font-size-normal { font-size: 0.75rem; }
header nav.font-switch a.font-size-large { font-size: 0.95rem; }
header nav.font-switch a.font-size-xlarge { font-size: 1.15rem; }

h1 { font-size: 1.4rem; }

.back-link {
  display: inline-block; color: var(--text-muted); text-decoration: none; font-size: 0.9rem; margin-bottom: 0.5rem;
}
.back-link:hover { text-decoration: underline; }
/* The glyph itself doesn't mirror with the page (U+2190 always points left);
   flip it so "back" still visually points toward the start of the line. */
[dir="rtl"] .back-arrow { display: inline-block; transform: scaleX(-1); }

.branch-tiles { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
.branch-tile {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); text-decoration: none; color: inherit;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.branch-tile:hover { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08); transform: translateY(-1px); }
.branch-tile-icon { width: 112px; max-width: 30%; height: auto; object-fit: contain; flex-shrink: 0; }
.branch-tile-text { min-width: 0; }
.branch-tile-text h2 { margin: 0 0 0.25rem; font-size: 1.05rem; }
.branch-tile-text p { margin: 0; color: var(--text-muted); font-size: 0.9rem; }

.quiz-title { font-size: 1.3rem; margin: 0.5rem 0 1rem; }
.quiz-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 1.25rem;
  white-space: pre-line;
}
.quiz-progress { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.5rem; }
/* This exam's own text — question, options, transcript, explanation — is
   always German, regardless of interface language (see hoeren.py:
   get_exam() never translates it). Forcing ltr here isn't an RTL-only
   patch: it's what keeps German punctuation ("?", ".") anchored to the
   right end of the sentence instead of drifting to whichever side the
   *interface* language happens to read from. */
.quiz-question-text, .quiz-option, .hoeren-transcript-text, .hoeren-explanation, .quiz-explanation {
  direction: ltr;
  text-align: start;
}
.quiz-question-text { font-size: 1.05rem; font-weight: 500; margin-bottom: 1rem; }
.quiz-options { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.75rem; }
.quiz-option {
  padding: 0.6rem 0.8rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  font-size: 0.92rem;
}
.quiz-option:hover:not(:disabled) { border-color: var(--text-muted); }
.quiz-option:disabled { cursor: default; }
.quiz-option.correct { border-color: #2e7d32; background: #2e7d3222; }
.quiz-option.wrong { border-color: #c0392b; background: #c0392b22; }
.quiz-option.chosen { border-color: var(--text-muted); background: var(--border); }

.quiz-feedback { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.quiz-feedback-correct { color: #2e7d32; font-weight: 600; margin-bottom: 0.4rem; }
.quiz-feedback-wrong { color: #c0392b; font-weight: 600; margin-bottom: 0.4rem; }
.quiz-correct-answer { font-size: 0.9rem; margin-bottom: 0.5rem; }
.quiz-explanation { font-size: 0.88rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.75rem; }

.hoeren-audio { width: 100%; margin-bottom: 0.4rem; }
.hoeren-listen-hint { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.hoeren-transcript-block { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px dashed var(--border); }
.hoeren-transcript-title { font-size: 0.85rem; margin: 0 0 0.4rem; color: var(--text-muted); }
.hoeren-transcript-text { font-size: 0.88rem; line-height: 1.5; white-space: normal; }
.hoeren-transcript-text p { margin: 0 0 0.5rem; }
.hoeren-explanation { font-style: italic; color: var(--text-muted); }

.hoeren-exam-card { display: flex; flex-direction: column; gap: 0.75rem; }
.hoeren-phase-desc { font-size: 0.85rem; color: var(--text-muted); }
.hoeren-answering-hint { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-bottom: 0.75rem; }
.hoeren-answer-next-btn { display: block; width: 100%; margin-top: 0.75rem; }
.hoeren-readonly-options .quiz-option { cursor: default; }
.hoeren-readonly-options .quiz-option:hover { border-color: var(--border); }
.hoeren-used-hint { font-size: 0.78rem; color: #8b5cf6; margin-bottom: 0.25rem; }
.quiz-option.hoeren-option-used { position: relative; padding-inline-end: 2.2rem; }
.quiz-option.hoeren-option-used::after {
  content: "✓";
  position: absolute;
  inset-inline-end: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  color: #8b5cf6;
  font-weight: 700;
  font-size: 1.05rem;
}
.hoeren-countdown { display: flex; align-items: center; gap: 0.6rem; }
.hoeren-countdown-track {
  flex: 1;
  height: 8px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}
.hoeren-countdown-bar {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  background: var(--accent);
  transition: width 1s linear, background-color 0.3s ease;
}
.hoeren-countdown-bar.hoeren-countdown-low { background: #c0392b; }
.hoeren-countdown-num {
  min-width: 1.8rem;
  text-align: end;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}
.hoeren-exam-audio { display: none; }
.hoeren-listening-indicator {
  text-align: center;
  font-size: 1rem;
  padding: 1.5rem 0;
  animation: chat-pulse 1.4s ease-in-out infinite;
}
.hoeren-your-level { margin-top: 0.5rem; font-weight: 600; }
.hoeren-level-note { font-size: 0.78rem; color: var(--text-muted); font-style: italic; margin-top: 0.3rem; }
.hoeren-completed-badge { color: #2e7d32; font-weight: 700; margin-inline-start: 0.3rem; }
.hoeren-paid-badge {
  font-size: 0.72rem; font-weight: 600; margin-inline-start: 0.4rem;
  padding: 0.1rem 0.4rem; border-radius: 4px;
  background: var(--border); color: var(--text-muted);
}
.hoeren-stats-score { font-size: 0.95rem; margin-top: 0.3rem; }
.hoeren-stats-level { font-size: 0.9rem; font-weight: 600; margin-top: 0.2rem; }
.hoeren-teil-title { font-size: 0.9rem; margin: 1rem 0 0.5rem; color: var(--text-muted); }
.hoeren-review-no-answer { font-size: 0.9rem; color: #c0392b; margin-bottom: 0.4rem; }
.hoeren-review-audio { width: 100%; margin-top: 0.6rem; }
.hoeren-review-text-btn { margin-top: 0.5rem; }

.quiz-next-btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 10px;
  border: none;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.quiz-next-btn:disabled { opacity: 0.5; cursor: default; }

.quiz-finished { text-align: center; }
.quiz-finished-title { font-size: 1.2rem; margin-bottom: 0.5rem; }
.quiz-finished-result { font-size: 1rem; color: var(--text-muted); margin-bottom: 1rem; }

.quiz-mistakes { margin-top: 1.25rem; }
.quiz-mistakes-title { font-size: 1rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.quiz-mistake-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  margin-bottom: 0.6rem;
  white-space: pre-line;
}
.quiz-mistake-item .quiz-question-text { font-size: 0.95rem; margin-bottom: 0.5rem; }
.quiz-mistake-your-answer { font-size: 0.88rem; color: #c0392b; margin-bottom: 0.3rem; }

.quiz-finished-actions {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: stretch;
  margin-top: 1.25rem;
}
.quiz-btn-secondary {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
}
.quiz-btn-secondary:hover { border-color: var(--text-muted); }

@keyframes chat-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.news-item-actions {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
}
.translate-btn {
  font-size: 0.8rem; padding: 0.25rem 0.6rem; border-radius: 6px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.translated-text {
  margin-top: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 8px;
  background: var(--bg); border: 1px dashed var(--border); font-size: 0.9rem; line-height: 1.5;
}