/* ─── Reset & base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --color-bg:           #ffffff;
  --color-bg-secondary: #f5f5f3;
  --color-bg-tertiary:  #eeede9;
  --color-text:         #1a1a18;
  --color-text-muted:   #2d4a7a;
  --color-text-hint:    #4a6a9a;
  --color-border:       rgba(0,0,0,0.12);
  --color-border-mid:   rgba(0,0,0,0.22);
  --color-accent:       #185FA5;
  --color-accent-light: #E6F1FB;
  --color-accent-dark:  #0C447C;
  --color-accent-text:  #042C53;
  --radius-md:          8px;
  --radius-lg:          12px;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html { font-size: 16px; }
body {
  font-family: var(--font);
  background: var(--color-bg-tertiary);
  color: var(--color-text);
  line-height: 1.6;
  min-height: 100vh;
}

/* ─── Layout ───────────────────────────────────────────────────── */
.page-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1rem 3rem;
}

.page-wrap--narrow {
  max-width: 480px;
}

/* ─── Top bar ──────────────────────────────────────────────────── */
.top-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 1rem 0 1.25rem;
  border-bottom: 0.5px solid var(--color-border);
  margin-bottom: 1.5rem;
}

.logo {
  height: 28px;
  width: auto;
  display: block;
}

.logo-title {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.top-bar-role,
.top-bar-help {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.top-bar-role { flex: 1; }

.top-bar-help:hover { color: var(--color-accent); }

.connection-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4caf50;
  flex-shrink: 0;
  transition: background 0.3s;
}

.connection-indicator--off { background: #e53935; }

.qr-note {
  font-size: 11px;
  color: var(--color-text-hint);
  margin-top: 4px;
  text-align: center;
}

/* ─── Card ─────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}

/* Images embedded in question/answer Markdown must never overflow their card. */
.card img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

/* ─── Labels & meta ────────────────────────────────────────────── */
.section-label {
  font-size: 11px;
  color: var(--color-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* Section titles that sit above a card rather than inside it (e.g. "Load
   questions" above #section-repo, "Questions" above #section-questions) —
   same size/case as .section-label, but bold and in the stronger accent blue
   so they read as titles rather than muted field labels. */
.section-label--bold {
  font-weight: 700;
  color: var(--color-accent);
}

.meta-line {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-top: 8px;
}

.meta-line--error {
  color: #c0392b;
  font-weight: 500;
}

/* ─── Form elements ────────────────────────────────────────────── */
input[type="text"],
select {
  flex: 1;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  outline: none;
  transition: border-color 0.15s;
}

input[type="text"]:focus,
select:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.12);
}

/* ─── Buttons ──────────────────────────────────────────────────── */
.btn-primary {
  background: var(--color-accent);
  color: #E6F1FB;
  /* Transparent border matches btn-secondary's 0.5px outline so buttons keep
     identical geometry when the state machine swaps their class. */
  border: 0.5px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--color-accent-dark); }
.btn-primary:disabled { opacity: 0.4; cursor: default; }

.btn-secondary {
  background: none;
  color: var(--color-text);
  border: 0.5px solid var(--color-border-mid);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: var(--color-bg-secondary); }

.btn-light {
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  /* Transparent border matches btn-secondary — see .btn-primary above. */
  border: 0.5px solid transparent;
  padding: 8px 16px;
  border-radius: var(--radius-md);
  font-size: 14px;
  font-family: var(--font);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-light:hover { background: #cde3f7; }
.btn-light:disabled { opacity: 0.4; cursor: default; }

.btn-full { width: 100%; padding: 12px; font-size: 15px; }

.btn-row {
  display: flex;
  gap: 8px;
  margin-top: 1rem;
}

/* The Open/Pause toggle swaps its label between ▶ and the taller ⏸ glyph,
   which renders ~2px higher (from a fallback font) and would grow the button
   box on every toggle. Fixing the height and centering the label via flex
   contains the glyph instead of letting it expand the box, so the button —
   and the whole row's baseline — stays put across all states. */
.btn-row > button {
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* The toggle's label switches between "▶ Open" and the wider "⏸ Pause";
   reserve the wider label's width so the button never resizes on toggle. */
#btn-activate { min-width: 88px; }

/* ─── File / repo row ──────────────────────────────────────────── */
.file-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Local-file option — the primary/first way to load questions (lowest entry
   barrier: grab the example file, edit, run). Sits at the top of the card. The
   label grows so the From-file button lines up at the right edge, matching the
   From-GitHub button's position and size in the row below. */
.file-source-alt {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* The GitHub repo row is now the second option — separate it from the
   file-source row above so the two read as distinct peers. */
#repo-row {
  margin-top: 10px;
}
.file-source-alt .section-label {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* The source buttons (From GitHub / From file / Replace file) sit in stacked
   rows and read as one choice — give them the same width so they line up. */
#btn-pull, #btn-choose-file, #btn-replace-file {
  min-width: 148px;
}

/* Loaded-file name: a read-only input framed like the repo URL field, but with
   a light-gray background to signal it can't be edited. Inherits the base
   input[type="text"] box (border/height/radius/flex); only the state overrides
   below distinguish it. */
.local-file-name {
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* readonly text inputs can keep native control chrome that masks a custom
     background in some browsers (notably iOS Safari) unless appearance is
     reset — belt-and-braces alongside the background override below. */
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg-tertiary) !important;   /* same gray as an already-visited question */
  color: var(--color-text);
  cursor: default;
}
.local-file-name:focus {
  outline: none;
  box-shadow: none;
  border-color: var(--color-border-mid);
}

/* Muted text-button used for the two source switch links (repo ↔ local file). */
.link-muted {
  background: none;
  border: none;
  padding: 0;
  margin-top: 6px;
  color: var(--color-text-hint);
  font-size: 12px;
  font-family: var(--font);
  cursor: pointer;
  text-decoration: none;
}
.link-muted:hover { text-decoration: underline; }

/* Row holding the pull/upload status text and the switch-source link, so the
   link sits at the same vertical position as the status text instead of on
   its own line below it. Only one of the two link-muted buttons is visible
   at a time, so this degrades to "status left, link right" either way. */
.status-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.status-row .meta-line,
.status-row .link-muted {
  margin-top: 8px;
}

/* Visually hidden but still focusable/readable by assistive tech and still a
   real form control (loadFile() listens to its value/change unchanged). */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Custom file dropdown (replaces the native <select> UI) ─────────────
   iOS/iPadOS Safari renders an open <select> with its own native picker
   sheet, which page CSS cannot reach at all — no font-size, row height, or
   wrap control applies there. Long or numerous filenames become unreadable.
   This is a fully custom-styled replacement: same size/font as the repo-URL
   text field, one line per file, truncated with an ellipsis — never wrapped. */
.dropdown { position: relative; flex: 1; width: 100%; }

.dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  height: 36px;
  padding: 0 10px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--color-text);
  background: var(--color-bg);
  border: 0.5px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s;
}

.dropdown-btn:focus,
.dropdown-btn[aria-expanded="true"] {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(24,95,165,0.12);
}

#file-select-label {
  flex: 1;
  min-width: 0;
  text-align: left;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.dropdown-caret {
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

.dropdown-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  margin: 0;
  padding: 4px;
  list-style: none;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border-mid);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

.dropdown-item {
  padding: 8px 10px;
  font-size: 14px;
  font-family: var(--font);
  color: var(--color-text);
  border-radius: var(--radius-md);
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dropdown-item:hover,
.dropdown-item.dropdown-item--active {
  background: var(--color-bg-secondary);
}

.dropdown-item[aria-selected="true"] {
  background: var(--color-accent-light);
  color: var(--color-accent-text);
}

/* ─── Question list ────────────────────────────────────────────── */
.question-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 1rem;
}

/* Active card parked inline in place of a question snippet (accordion). The
   list's flex gap supplies spacing, so drop the card's own bottom margin. */
.question-list > #section-active {
  margin: 0;
}

.q-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 14px;
  transition: background 0.12s, border-color 0.12s;
}

.q-item:hover { background: var(--color-bg-secondary); }

/* A question that has been opened at least once this session — greyed out to
   help orientation in long decks. Darker than the plain/hover backgrounds
   (reuses the page's own background tone) so it reads as "already covered"
   rather than just "hovered". active-q (the currently open card) overrides it. */
.q-item.visited { background: var(--color-bg-tertiary); }
.q-item.visited:hover { background: var(--color-bg-secondary); }

.q-item.active-q {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent-text);
}

.q-text { flex: 1; }

.q-badge {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  background: var(--color-bg-secondary);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.q-item.active-q .q-badge {
  background: #B5D4F4;
  color: var(--color-accent-dark);
}

/* ─── Active question panel ────────────────────────────────────── */
/* Badges (timer + answered count) sit on their own right-aligned row above the
   question, so the question text — and any code block inside it — spans the full
   card width like the answer options below, with no reflow when the timer's text
   width changes. */
.active-badges {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  min-height: 22px;   /* reserve the badge row height so the layout doesn't shift
                         between states where a badge is hidden vs shown */
}

.active-header {
  margin-bottom: 14px;
}

.active-question-text {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  flex: 1;
}

.badge-live {
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
}

.badge-closed {
  background: var(--color-bg-tertiary);
  color: var(--color-text-muted);
}

.badge-inactive {
  background: #fff8e1;
  color: #e65100;
}

/* Live stopwatch shown in place of the badge while a question is active */
.badge-running {
  background: #ffebee;
  color: #c62828;
  font-variant-numeric: tabular-nums;
}

/* ─── Join info ────────────────────────────────────────────────── */
.join-row {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 12px 0;
  border-top: 0.5px solid var(--color-border);
  border-bottom: 0.5px solid var(--color-border);
  margin-bottom: 14px;
}

.join-url {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-accent);
  word-break: break-all;
}

/* Compact stack of label + link rows (projector / participant / shortlink) */
.join-links__label {
  margin-top: 8px;
  margin-bottom: 4px;
}

/* ─── Live stats ───────────────────────────────────────────────── */
.live-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 14px;
}

.stat-card {
  background: var(--color-bg-secondary);
  border-radius: var(--radius-md);
  padding: 12px;
  text-align: center;
}

.stat-num {
  font-size: 28px;
  font-weight: 500;
}

.stat-label {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ─── Bar chart ────────────────────────────────────────────────── */
.bar-wrap { margin-top: 4px; }


/* ─── Participant — join screen ───────────────────────────────── */
.join-screen-inner {
  text-align: center;
  padding: 1rem 0;
}

.waiting-msg {
  font-size: 14px;
  color: var(--color-text-muted);
}

/* ─── Participant — question screen ───────────────────────────── */
.type-hint {
  font-size: 12px;
  color: var(--color-text-hint);
  margin-bottom: 8px;
}

.q-heading {
  font-size: 18px;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}

.answer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 1.25rem;
}

.answer-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-size: 15px;
  background: var(--color-bg);
  transition: background 0.12s, border-color 0.12s;
  user-select: none;
}

.answer-opt:hover { background: var(--color-bg-secondary); }

/* Let the answer text column shrink inside the flex row and break long
   words/URLs instead of forcing horizontal overflow on narrow screens */
.answer-opt > div:last-child {
  min-width: 0;
  overflow-wrap: break-word;
}

.answer-opt.selected {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  color: var(--color-accent-text);
}

.answer-opt.answer-correct {
  border-color: #4caf50;
  background: #e8f5e9;
  color: #1b5e20;
}

.answer-opt.answer-correct .opt-key {
  background: #4caf50;
  color: #fff;
  border-color: #4caf50;
}

.opt-key {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-bg-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
  color: var(--color-text-muted);
  border: 1px solid var(--color-text-muted);
}

/* Multi-select answers use rounded-square keys (checkbox convention);
   single-select keeps the round radio-style circle above. */
.answer-opt.opt-multi .opt-key {
  border-radius: 6px;
}

.answer-opt.selected .opt-key {
  background: var(--color-accent);
  color: #E6F1FB;
  border-color: var(--color-accent);
}

.opt-bar-wrap {
  display: none;
  margin-top: 6px;
  height: 6px;
  background: var(--color-bg-tertiary);
  border-radius: 3px;
  overflow: hidden;
}

.opt-bar-wrap.visible { display: block; }

.opt-bar-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: 3px;
  transition: width 0.4s ease;
}

.answer-opt.selected .opt-bar-fill { background: var(--color-accent-dark); }

.opt-bar-pct {
  font-size: 11px;
  color: var(--color-text-hint);
  margin-top: 3px;
  display: none;
}

.opt-bar-pct.visible { display: block; }

/* ─── Footer ───────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 1.5rem 0 1rem;
  display: flex;
  justify-content: center;
  gap: 1.5rem;
}

.site-footer a {
  font-size: 12px;
  color: var(--color-text-hint);
  text-decoration: none;
}

.site-footer a:hover { color: var(--color-text-muted); }

/* ─── Markdown rendering ───────────────────────────────────────── */
.active-question-text p,
.q-heading p { margin: 0 0 0.5em; }
.active-question-text p:last-child,
.q-heading p:last-child { margin-bottom: 0; }

.active-question-text pre,
.q-heading pre {
  background: var(--color-bg-secondary);
  border: 0.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 10px 14px;
  margin: 0.75em 0 0;
  overflow-x: auto;
}

.active-question-text code,
.q-heading code,
.answer-opt code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.9em;
  background: var(--color-bg-secondary);
  border-radius: 3px;
  padding: 1px 5px;
}

.active-question-text pre code,
.q-heading pre code {
  background: none;
  padding: 0;
  font-size: 13px;
}

/* Wide display math ($$...$$) scrolls horizontally instead of overflowing
   the page on narrow (mobile) screens */
.active-question-text .katex-display,
.q-heading .katex-display,
.answer-opt .katex-display {
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 2px; /* room for scrollbar without clipping descenders */
}


/* ─── Mobile / tablet ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .page-wrap { padding: 0 0.75rem 2rem; }

  /* Larger touch targets for all buttons */
  .btn-primary, .btn-secondary, .btn-light {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 15px;
  }

  /* Button row wraps and each button fills the row */
  .btn-row {
    flex-wrap: wrap;
  }
  .btn-row > button {
    flex: 1 1 auto;
    min-width: calc(50% - 4px);
  }

  /* Repo input + button, and the local source row, both wrap so the button
     drops below its input/label rather than squeezing it on narrow screens. */
  .file-row,
  .file-source-alt {
    flex-wrap: wrap;
  }
  .file-row input[type="text"] {
    min-width: 0;
  }
  /* When wrapped, the button spans the full row instead of hugging its label. */
  #btn-pull,
  #btn-choose-file {
    flex: 1 1 100%;
  }

  /* QR code row stacks on very small screens */
  .join-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Active question header stacks badge below text */
  .active-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
}