/* ═══════════════════════════════════════════════════════
   other.css — additive only, never edits existing vars
   ═══════════════════════════════════════════════════════ */

/* ══════════════════════════════
   SOURCE VIEWER — shared shell
   Uses reader-shell / reader-bar from app.css
   ══════════════════════════════ */

/* Topbar extras */
.sv-pages-wrap {
  display: flex; align-items: center; gap: 6px; margin-left: auto; flex-shrink: 0;
}
.sv-pages {
  font-size: 12px; color: var(--ink4); font-weight: 600;
}

/* Extension toggle tag */
.sv-ext-tag {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 3px 9px; border-radius: 99px;
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  background: var(--bg3); color: var(--ink3);
  border: 1.5px solid var(--border);
  transition: background var(--t), color var(--t), border-color var(--t);
  white-space: nowrap;
}
.sv-ext-tag:not([disabled]):hover {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.sv-ext-tag.sv-tag-active {
  background: var(--ink); color: var(--bg); border-color: var(--ink);
}
.sv-ext-tag[disabled] { pointer-events: none; }

/* Body wrapper — fills remaining height */
.sv-body-wrap {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}

/* ── PDF view ── */
.sv-pdf-wrap {
  flex: 1; display: flex; flex-direction: column; overflow: hidden; min-height: 0;
}
.sv-pdf-scroll {
  flex: 1; overflow-y: auto; overflow-x: auto;
  display: flex; justify-content: center;
  background: #525659; /* classic PDF viewer grey bg */
  padding: 20px 12px;
  /* Enable native pinch-to-zoom on mobile */
  touch-action: pan-x pan-y pinch-zoom;
}
.sv-pdf-canvas-col {
  display: flex; flex-direction: column;
  align-items: center; gap: 16px; min-width: min-content;
}
.sv-pdf-canvas {
  display: block;
  box-shadow: 0 3px 18px rgba(0,0,0,.45);
  border-radius: 2px;
  background: #fff;
  /* max-width: 100%; — intentionally NOT set, allow horizontal scroll */
  /* touch-action is on parent for pinch */
}
.sv-pdf-foot {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px; flex-shrink: 0;
  border-top: 1.5px solid var(--border);
  background: var(--bg2);
}
.sv-pdf-lbl {
  font-size: 13px; font-weight: 700; color: var(--ink);
  min-width: 60px; text-align: center;
}

/* ── Text / MD body ── */
.sv-reader-body {
  flex: 1; overflow-y: auto;
  /* inherits .reader-body typography from pages.css */
}
.sv-pre {
  font-family: 'JetBrains Mono','Fira Code','Courier New',monospace;
  font-size: 13px; line-height: 1.75; color: var(--ink2);
  white-space: pre-wrap; word-break: break-word;
  padding: 0; margin: 0;
}

/* DOCX formatted output */
.sv-docx-body {
  padding: 0; line-height: 1.7; color: var(--ink);
}
.sv-docx-body p  { margin-bottom: 10px; }
.sv-docx-body h1 { font-size: 20px; font-weight: 800; margin: 22px 0 10px; }
.sv-docx-body h2 { font-size: 17px; font-weight: 700; margin: 18px 0 8px; }
.sv-docx-body h3 { font-size: 15px; font-weight: 700; margin: 14px 0 6px; }
.sv-docx-body table { border-collapse: collapse; width: 100%; margin: 12px 0; }
.sv-docx-body td,
.sv-docx-body th  { border: 1px solid var(--border); padding: 7px 10px; font-size: 13px; }
.sv-docx-body th  { background: var(--bg2); font-weight: 700; }
.sv-docx-body ul,
.sv-docx-body ol  { padding-left: 20px; margin-bottom: 10px; }
.sv-docx-body li  { margin-bottom: 4px; }

/* Error state inside viewer */
.sv-error {
  display: flex; align-items: center; gap: 8px;
  padding: 32px 24px; color: var(--error); font-size: 14px; font-weight: 600;
}

/* Dark mode adjustments */
[data-theme="dark"] .sv-pdf-scroll { background: #1a1a1a; }
[data-theme="dark"] .sv-pdf-canvas { filter: brightness(.9); }

/* ══════════════════════════════
   QUIZ — "show at end" mode styles
   ══════════════════════════════ */

/* Neutral selected state — no green, no red */
.quiz-opt.selected-only {
  border-color: var(--ink3);
  background: var(--bg2);
  color: var(--ink);
  opacity: 1;
}
.quiz-opt.selected-only .opt-letter {
  background: var(--ink);
  color: var(--bg);
}

/* Neutral feedback banner */
.quiz-feedback.neutral {
  background: var(--bg2);
  color: var(--ink3);
}

/* "Results at end" badge in score row */
.quiz-mode-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 700; letter-spacing: .03em;
  color: var(--ink4); padding: 3px 8px;
  border: 1.5px solid var(--border);
  border-radius: 99px; flex-shrink: 0;
}
.quiz-mode-badge i { font-size: 12px; }