:root {
  --bg:     #ffffff;   /* page background — pure white */
  --card:   #f6f7fa;   /* post / section cards — slightly darker than bg */
  --soft:   #eceef3;   /* nested boxes (clue, picks, search results) */
  --fg:     #111;
  --muted:  #5a6371;
  --border: #d8dce4;
  --accent: #2563eb;
  --accent-fg: #fff;
  --hit:    #15803d;
  --miss:   #dc2626;
  --serif:  "Iowan Old Style","Charter",Georgia,serif;
}
[data-theme="dark"] {
  --bg:     #0b0b0c;
  --card:   #16181c;   /* lighter than bg so cards stand off the page */
  --soft:   #1f222a;
  --fg:     #e5e7eb;
  --muted:  #94a3b8;
  --border: #2a2f3a;
  --accent: #60a5fa;
  --accent-fg: #0b0b0c;
  --hit:    #22c55e;
  --miss:   #f87171;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.layout {
  max-width: 720px;
  margin: 0 auto;
  padding: 0 16px 96px;
}

.topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; justify-content: space-between; align-items: center;
  gap: 12px;
  padding: 10px 4px;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}

/* QUIZGRAM wordmark on the left of the topbar — lower-case to match the
   minimalist aesthetic of the topbar links. */
.topbar-brand {
  font-family: "Lora", Georgia, serif;
  font-weight: 600; font-size: 18px; letter-spacing: 0.06em;
  color: var(--fg); text-decoration: none;
  padding: 0 4px;
}
.topbar-brand .b1 { color: #9ca3af; }
.topbar-brand .b2 { color: var(--fg); }

/* Top actions are text links (not pill buttons). Theme toggle + install
   stay as small icon buttons with no border. */
.top-actions { display: flex; gap: 14px; align-items: center; }
.top-link {
  background: transparent; border: none;
  color: var(--muted); text-decoration: none;
  font: inherit; font-size: 14px; font-weight: 500;
  padding: 0; cursor: pointer;
  height: 32px; display: inline-flex; align-items: center;
  white-space: nowrap;
}
.top-link:hover { color: var(--fg); }
.top-link.me-handle { color: var(--fg); font-weight: 700; }
.top-link.top-link-strong { color: var(--accent); font-weight: 600; }
.top-link.top-link-strong:hover { color: var(--accent); text-decoration: underline; }

/* Admin/user-mode switch in the topbar. Only rendered for accounts with the
   admin privilege; reflects the current per-session toggle. */
.top-link.mode-switch {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  padding: 0 10px; height: 26px;
  border-radius: 6px;
}
.top-link.mode-switch.as-admin { background: var(--accent); color: var(--accent-fg); }
.top-link.mode-switch.as-admin:hover { filter: brightness(0.95); }
.top-link.mode-switch.as-user { background: var(--soft); color: var(--muted); border: 1px solid var(--border); }
.top-link.mode-switch.as-user:hover { color: var(--fg); }
.top-link.mode-switch:disabled { opacity: 0.6; cursor: wait; }

.top-actions .install-btn,
.top-actions .theme-toggle {
  width: 32px; height: 32px; min-width: 32px;
  padding: 0; border: none; background: transparent; color: var(--muted);
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
}
.top-actions .install-btn:hover,
.top-actions .theme-toggle:hover { color: var(--fg); background: var(--soft); }
.top-actions .install-btn span { display: none; }   /* icon-only in topbar */

/* Notification dot + count for the Groups link. */
.badge-dot {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--miss); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 1;
  min-width: 18px; height: 18px; border-radius: 999px;
  padding: 0 5px; margin-left: 6px;
}

@media (max-width: 480px) {
  .topbar { gap: 8px; }
  .top-actions { gap: 10px; }
  .topbar-brand { font-size: 16px; }
}

.tabbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  display: flex; justify-content: space-around;
  background: var(--bg); border-top: 1px solid var(--border);
  padding: 8px 4px;
}
.tabbar a {
  color: var(--muted); text-decoration: none;
  padding: 4px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  font-size: 11px;
  position: relative;
  border-radius: 8px;
  transition: color 0.12s ease, transform 0.12s ease;
}
.tabbar a:hover { color: var(--fg); }
.tabbar a svg { width: 22px; height: 22px; }
.tab-label { letter-spacing: 0.02em; }

/* Active tab — bigger icon, accent color, bolder label, plus a top accent
   bar so it's unmistakable on small screens. */
.tabbar a.active { color: var(--accent); }
.tabbar a.active svg { width: 26px; height: 26px; transform: translateY(-1px); }
.tabbar a.active .tab-label { font-weight: 700; }
.tabbar a.active::before {
  content: ''; position: absolute; top: -8px; left: 25%; right: 25%; height: 3px;
  background: var(--accent); border-radius: 0 0 4px 4px;
}

.fab-compose {
  position: fixed; right: 18px; bottom: 76px; z-index: 25;
  height: 44px; padding: 0 16px;
  border-radius: 10px;
  background: #000; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
  text-decoration: none;
  font-weight: 700; font-size: 14px; letter-spacing: 0.04em;
}
.fab-compose svg { width: 18px; height: 18px; }
.fab-compose-label { line-height: 1; }
.fab-compose:hover { transform: translateY(-1px); }
/* `display: inline-flex` above wins over the UA's [hidden]{display:none} rule,
   so explicitly hide it here too. */
.fab-compose[hidden] { display: none !important; }

.muted.small { font-size: 12px; }

/* Card-thumbnail <img> children — fill the existing div wrapper, cover crop,
   transparent background so the masked gradient still shows on .masked. The
   wrappers keep their aspect-ratio + border-radius from existing rules. */
.quiz-qart-thumb img,
.quiz-mcq-opt .thumb img,
.quiz-card .thumb img,
.search-result .thumb img,
.saved-tile-thumb img,
.compose-pick .pick-thumb img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  border-radius: inherit;
}

/* ---------- Event card ---------- */
.event-card-body { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: start; }
.event-date-tile {
  background: var(--soft); border: 1px solid var(--border); border-radius: 10px;
  text-align: center; padding: 8px 4px;
}
.event-date-month { font-size: 11px; font-weight: 700; color: var(--miss); letter-spacing: 0.08em; }
.event-date-day   { font-size: 28px; font-weight: 800; color: var(--fg); line-height: 1; margin-top: 2px; }
.event-meta { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.event-title { margin: 0; font-size: 17px; font-weight: 700; }
.event-when, .event-where {
  display: flex; gap: 6px; align-items: center;
  color: var(--muted); font-size: 13px;
}
.event-when svg, .event-where svg { width: 14px; height: 14px; flex-shrink: 0; }
.event-description {
  margin: 4px 0 0; color: var(--fg); font-size: 14px; line-height: 1.45;
  white-space: pre-wrap;
}

/* ---------- Calendar ---------- */
.cal-page { display: flex; flex-direction: column; gap: 12px; }
.cal-header {
  display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px; align-items: center;
}
.cal-title { margin: 0; font-size: 18px; }
.cal-nav {
  background: var(--soft); border: 1px solid var(--border); color: var(--fg);
  width: 32px; height: 32px; border-radius: 999px; cursor: pointer;
  font-size: 18px; line-height: 1;
}
.cal-mode-tabs { display: flex; gap: 4px; grid-column: 1 / -1; }
.cal-mode-tabs .tab {
  background: transparent; color: var(--muted); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; font-size: 13px; cursor: pointer;
}
.cal-mode-tabs .tab.active { background: #000; color: #fff; border-color: #000; }

.cal-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px;
}
.cal-dow { font-size: 11px; color: var(--muted); font-weight: 600; text-align: center; padding: 4px 0; }
.cal-cell {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px 4px 6px; min-height: 64px; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.cal-cell:hover { border-color: var(--accent); }
.cal-cell-out { opacity: 0.4; }
.cal-cell-today { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 6%, var(--card)); }
.cal-cell-num { font-size: 12px; font-weight: 700; color: var(--fg); }
.cal-cell-events { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.cal-cell-pill {
  font-size: 10px; padding: 1px 4px; border-radius: 3px;
  background: color-mix(in srgb, var(--accent) 18%, var(--soft));
  color: var(--fg);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-cell-more { font-size: 10px; color: var(--muted); }
@media (max-width: 480px) {
  .cal-cell { min-height: 52px; padding: 2px 3px 4px; }
  .cal-cell-pill { font-size: 9px; }
}

.cal-day-list { display: flex; flex-direction: column; gap: 8px; }
.cal-day-slot { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: start; }
.cal-day-time {
  font-weight: 700; color: var(--accent); font-size: 14px;
  padding-top: 6px;
}
.cal-day-events { display: flex; flex-direction: column; gap: 6px; }
/* Multiple events at the exact same time → display in parallel rails so
   none collapse. Wraps to a column on narrow screens. */
.cal-day-events.multi { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.cal-day-event {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; cursor: pointer; text-align: left; color: var(--fg);
  display: flex; flex-direction: column; gap: 2px;
}
.cal-day-event:hover { border-color: var(--accent); }
.cal-day-event-title { font-weight: 600; font-size: 14px; }
.cal-day-event-place { font-size: 12px; color: var(--muted); }
.cal-day-event-author { font-size: 11px; }
/* Calendar location filter (text-input above the grid). */
.cal-filter-row { display: flex; gap: 8px; align-items: stretch; margin: 8px 0; }
.cal-filter-row #cal-filter { flex: 1; min-width: 0; }
/* Event-compose place typeahead — dropdown below the place input. */
.ev-place-wrap { position: relative; }
.ev-place-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 15;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  margin-top: 4px; max-height: 280px; overflow-y: auto;
}
.ev-place-results .search-result {
  display: block; width: 100%; text-align: left;
  background: transparent; border: none; padding: 8px 10px;
  cursor: pointer; color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.ev-place-results .search-result:hover { background: var(--soft); }
.ev-place-results .search-result:last-child { border-bottom: none; }
.ev-place-results .search-loading,
.ev-place-results .search-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.ev-place-tag { margin-top: 6px; }
/* Side-by-side Starts / Ends inputs. Stacks below 480px so the labels
   stay readable on narrow phones. */
.ev-datetime-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ev-datetime-cell { display: flex; flex-direction: column; }
.ev-datetime-cell input { width: 100%; min-width: 0; }
@media (max-width: 480px) {
  .ev-datetime-row { grid-template-columns: 1fr; }
}

.cal-foot { display: flex; justify-content: flex-end; margin-top: 8px; }

/* ---------- Compose ---------- */
/* Top-type segmented control (Quiz / Event) — clearly primary, solid black
   on selection so the choice is unmistakable. */
.compose-tabs.compose-toptype {
  display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  background: var(--soft); border: 1px solid var(--border); border-radius: 9px;
  padding: 3px; margin: 12px 0 14px;
}
.compose-tabs.compose-toptype .tab {
  background: transparent; color: var(--muted); border: none;
  padding: 7px 10px; font-weight: 700; font-size: 12px;
  text-align: center; cursor: pointer; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  transition: background 0.15s ease, color 0.15s ease;
}
.compose-tabs.compose-toptype .tab svg { width: 14px; height: 14px; }
.compose-tabs.compose-toptype .tab:hover { color: var(--fg); }
.compose-tabs.compose-toptype .tab.active {
  background: #000; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}

/* Inner sub-tabs (Standard / Multiple choice) — secondary in weight, ghost
   pills so they read as nested under the top-type. */
.compose-tabs:not(.compose-toptype) { display: flex; gap: 6px; margin: 0 0 16px; }
.compose-tabs:not(.compose-toptype) .tab {
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; font-weight: 600; cursor: pointer; font-size: 13px;
}
.compose-tabs:not(.compose-toptype) .tab:hover { color: var(--fg); }
.compose-tabs:not(.compose-toptype) .tab.active {
  background: #000; color: #fff; border-color: #000;
}

/* Two-tone parent groups: a "Question" block and an "Answer" block, each
   with its own subtle color tint so the writer sees the structure at a
   glance. Sections inside use --bg so they pop against the tinted parent. */
.compose-group {
  margin: 16px 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
}
.compose-question-group {
  background: color-mix(in srgb, #6366f1 6%, var(--card));
  border-color: color-mix(in srgb, #6366f1 30%, var(--border));
}
.compose-answer-group {
  background: color-mix(in srgb, #f59e0b 8%, var(--card));
  border-color: color-mix(in srgb, #f59e0b 30%, var(--border));
}
[data-theme="dark"] .compose-question-group {
  background: color-mix(in srgb, #6366f1 14%, var(--card));
}
[data-theme="dark"] .compose-answer-group {
  background: color-mix(in srgb, #f59e0b 14%, var(--card));
}
.compose-group-title {
  margin: 0;
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--muted);
  cursor: pointer; list-style: none;
}
.compose-group-title::-webkit-details-marker { display: none; }
.compose-group-title::before { content: '▸ '; color: var(--muted); }
details.compose-group[open] > .compose-group-title { margin-bottom: 10px; }
details.compose-group[open] > .compose-group-title::before { content: '▾ '; }
.compose-group .compose-section {
  background: var(--bg);
}

.compose-section {
  margin: 10px 0;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px;
}
.compose-section:first-child { margin-top: 0; }
.compose-section:last-child  { margin-bottom: 0; }
.compose-section summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.compose-section.compose-collapsible[open] { background: var(--card); }
.compose-section.compose-collapsible[open] summary { margin-bottom: 8px; }
.compose-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
.compose-label.small { font-size: 12px; font-weight: normal; color: var(--muted); margin-top: 8px; }
.compose-section textarea { resize: vertical; background: var(--bg); }
.compose-section input[type="text"], .compose-search { background: var(--bg); }

.compose-search-wrap { position: relative; margin-bottom: 8px; }
.compose-search-row { display: flex; gap: 8px; align-items: stretch; }
.compose-search-row .compose-search { flex: 1; min-width: 0; }
.compose-search-btn { white-space: nowrap; }
.compose-search-btn .wiki-w {
  font-family: 'Linux Libertine', Georgia, 'Times New Roman', serif;
  font-weight: 700; font-size: 1.05em; margin-right: 3px;
}
.compose-add-btn { white-space: nowrap; }
/* Plain free-form text input for typed answers — no search-bar styling. */
.compose-answer-input-wrap { margin-bottom: 8px; }
.compose-answer-input-row { display: flex; gap: 8px; align-items: stretch; }
.compose-answer-input-row .compose-answer-input { flex: 1; min-width: 0; }
.compose-search-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 15;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  margin-top: 4px; max-height: 360px; overflow-y: auto;
}
.compose-search-results .search-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--soft);
  position: sticky; top: 0;
}
.compose-search-results .search-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.compose-search-results .search-close:hover { color: var(--fg); }
.compose-search-results .search-list { padding: 6px; display: flex; flex-direction: column; gap: 4px; }

.compose-picks { display: flex; flex-direction: column; gap: 6px; }
.compose-pick {
  display: grid; grid-template-columns: auto 56px 1fr auto; gap: 8px;
  background: var(--soft); border-radius: 8px; padding: 8px; align-items: center;
}
.compose-pick .pick-letter {
  background: var(--fg); color: var(--bg);
  width: 22px; height: 22px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.compose-pick .pick-thumb {
  width: 56px; height: 56px; border-radius: 6px;
  background-color: var(--border); background-size: cover; background-position: center;
}
.compose-pick .pick-thumb.masked { background: linear-gradient(135deg,#1f2937,#111); }
.compose-pick .pick-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.compose-pick .pick-title { font-weight: 600; font-size: 14px; word-break: break-word; }
.compose-pick .pick-title.hidden-name { text-decoration: line-through; color: var(--muted); }
/* Disambiguator suffixes like "(philosopher)" — visually muted so the
   author can see at a glance that they're optional and removable. */
.compose-pick .pick-title-paren { color: var(--muted); font-weight: 500; }

/* Editable answer mode (allowAliases pickers): wiki source on top,
   editable Answer input + Save button below — both always visible so
   the relationship is unambiguous. */
.pick-source-row, .pick-answer-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pick-source-row { margin-bottom: 4px; }
.pick-source-label, .pick-answer-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--muted); text-transform: uppercase;
  min-width: 70px;
}
.pick-source-title {
  font-size: 13px; color: var(--muted); font-weight: 500;
  word-break: break-word;
}
.pick-answer-row { margin-top: 2px; }
.pick-title-input {
  flex: 1; min-width: 160px;
  font: inherit; font-weight: 600; font-size: 14px;
  padding: 4px 10px; border-radius: 6px;
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); outline: none;
}
.pick-title-input:focus { border-color: var(--accent); }
.pick-title-save-btn { white-space: nowrap; }
.pick-title-save-btn:disabled { opacity: 0.4; cursor: default; }
.pick-title-saved-flag {
  font-size: 11px; color: var(--hit); font-weight: 600;
  animation: pick-saved-flash 1.6s ease-out forwards;
}
@keyframes pick-saved-flash {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { opacity: 0; }
}
.compose-pick .pick-controls { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.compose-pick .tog { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }

/* Answers and their aliases render as flat sibling rows — no nesting box
   or branching framing. The aliases-panel exists in DOM under each answer
   only so the alias-input knows which answer it belongs to. */
.pick-block { display: flex; flex-direction: column; gap: 6px; }
.aliases-panel { display: flex; flex-direction: column; gap: 6px; padding: 0; }
/* Text-only chip: no thumb, no letter — just the title and remove ×. */
.compose-pick.text-only { grid-template-columns: 1fr auto; }
.possible-answers { margin-top: 6px; padding: 6px 10px; border-left: 2px solid var(--border); }
.possible-answers > summary { cursor: pointer; list-style: none; padding: 2px 0; }
.possible-answers > summary::-webkit-details-marker { display: none; }
.possible-answers > summary::before { content: '▸ '; color: var(--muted); }
.possible-answers[open] > summary::before { content: '▾ '; }
.possible-answers-label { margin-bottom: 4px; }
/* "How to write the answer" closed-by-default helper accordion. */
.compose-answer-help { margin-top: 6px; }
.compose-answer-help > summary { cursor: pointer; list-style: none; font-size: 12px; color: var(--muted); padding: 2px 0; }
.compose-answer-help > summary::-webkit-details-marker { display: none; }
.compose-answer-help > summary::before { content: '▸ '; }
.compose-answer-help[open] > summary::before { content: '▾ '; }
.compose-answer-help p { margin: 6px 0 0; }
.possible-answers-section { margin-bottom: 6px; }
.possible-answers-section:last-child { margin-bottom: 0; }
.possible-answers-form { font-size: 12px; color: var(--fg); margin-bottom: 2px; }
.possible-answers-list { list-style: none; padding: 0 0 0 10px; margin: 0; display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.possible-answers-list .pa-text { color: var(--fg); }
.possible-answers-list .pa-why { margin-left: 6px; }
/* "What also counts?" preview is hidden for now. */
.answer-examples { display: none; }
/* "What also counts?" preview accordion under each answer block. Runs the
   client-side fuzzy matcher to show the author what the leniency band
   looks like in concrete terms. */
.answer-examples {
  border-top: 1px dashed var(--border);
  padding: 8px 12px 10px;
}
.answer-examples > summary {
  cursor: pointer; list-style: none;
  font-size: 12px; font-weight: 600; color: var(--fg);
  padding: 2px 0;
}
.answer-examples > summary::-webkit-details-marker { display: none; }
.answer-examples > summary::before {
  content: '▸ '; color: var(--muted);
}
.answer-examples[open] > summary::before { content: '▾ '; }
.answer-examples-body { margin-top: 8px; display: flex; flex-direction: column; gap: 8px; }
.ex-section { display: flex; flex-direction: column; gap: 3px; }
.ex-label { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; }
.ex-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.ex-row {
  display: grid; grid-template-columns: 18px 1fr auto; gap: 8px;
  align-items: baseline; padding: 3px 6px; border-radius: 6px;
  font-size: 12px;
}
.ex-row.ex-ok  { background: color-mix(in srgb, var(--hit)  10%, transparent); }
.ex-row.ex-bad { background: color-mix(in srgb, var(--miss) 10%, transparent); }
.ex-mark { text-align: center; font-weight: 700; }
.ex-row.ex-ok  .ex-mark { color: var(--hit); }
.ex-row.ex-bad .ex-mark { color: var(--miss); }
.ex-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--fg); word-break: break-word;
}
.ex-why { white-space: nowrap; }
.ex-note { padding-top: 4px; }
.compose-pick .pick-remove {
  background: transparent; color: var(--muted); border: none;
  font-size: 20px; cursor: pointer; padding: 0; width: 28px;
}

.compose-foot { display: flex; gap: 12px; align-items: center; justify-content: flex-end; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--border); }
.compose-foot-bottom { justify-content: flex-end; margin-top: 12px; padding-top: 12px; }
.compose-preview-title { margin: 24px 0 4px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }
.compose-preview { margin: 8px 0 24px; }
.compose-preview .card { pointer-events: none; opacity: 0.95; }
.compose-warn {
  flex: 1; color: #b42318; font-size: 13px;
  background: #fef3f2; border: 1px solid #fecdca;
  padding: 6px 8px; border-radius: 6px;
}

main { padding-top: 12px; }

button, .btn {
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--accent); color: var(--accent-fg);
  border-radius: 8px;
  padding: 8px 14px;
  font-weight: 600;
  text-decoration: none;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn.ghost { background: transparent; color: var(--fg); }
.btn.small { padding: 4px 10px; font-size: 13px; }
.btn.danger-solid { background: var(--miss); color: #fff; border-color: var(--miss); }

input, textarea, select {
  font: inherit;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--fg);
  width: 100%;
}

.empty { text-align: center; color: var(--muted); padding: 32px 16px; }

.toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: var(--fg); color: var(--bg);
  padding: 10px 14px; border-radius: 8px; font-size: 14px;
  z-index: 100;
}

/* Score celebration popup — fires for ~1s after every quiz submission. */
.score-popup-overlay {
  position: fixed; inset: 0; z-index: 800;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  animation: spo-fade-in 0.15s ease;
  pointer-events: none;
}
.score-popup-overlay.out { opacity: 0; transition: opacity 0.18s ease; }
.score-popup {
  background: var(--card); border: 1px solid var(--border);
  border-radius: 18px; padding: 28px 36px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
  animation: spo-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.score-popup.perfect  { border-color: var(--hit); box-shadow: 0 16px 48px color-mix(in srgb, var(--hit) 40%, transparent); }
.score-popup.positive { border-color: var(--hit); }
.score-popup.zero     { border-color: var(--miss); box-shadow: 0 16px 48px color-mix(in srgb, var(--miss) 40%, transparent); }
.score-glyph {
  font-size: 80px; line-height: 1; font-weight: 900;
}
.score-popup.positive .score-glyph,
.score-popup.perfect  .score-glyph { color: var(--hit); }
.score-popup.zero     .score-glyph { color: var(--miss); }
.score-num {
  font-size: 38px; font-weight: 800; margin-top: 12px;
  color: var(--fg);
}
.score-num .score-of { color: var(--muted); font-weight: 600; font-size: 24px; }
.score-streak {
  margin-top: 12px; padding: 6px 14px; border-radius: 999px;
  background: color-mix(in srgb, var(--miss) 16%, transparent);
  color: var(--fg); font-size: 14px; font-weight: 600;
}
.score-streak b { color: var(--miss); }
@keyframes spo-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes spo-pop {
  0%   { transform: scale(0.5); opacity: 0; }
  100% { transform: scale(1);   opacity: 1; }
}

/* Glow pulse for perfect scores — backlights the popup with the hit color. */
.score-popup.perfect {
  animation: spo-pop 0.32s cubic-bezier(0.34, 1.56, 0.64, 1),
             perfect-glow 1.4s ease-out;
}
@keyframes perfect-glow {
  0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--hit) 90%, transparent); }
  40%  { box-shadow: 0 0 80px 28px color-mix(in srgb, var(--hit) 55%, transparent); }
  100% { box-shadow: 0 16px 48px color-mix(in srgb, var(--hit) 40%, transparent); }
}
.score-popup.perfect .score-glyph {
  animation: glyph-bounce 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.05s both;
  display: inline-block;
}
@keyframes glyph-bounce {
  0%   { transform: scale(0.3) rotate(-18deg); opacity: 0; }
  50%  { transform: scale(1.35) rotate(10deg); opacity: 1; }
  100% { transform: scale(1)    rotate(0);     opacity: 1; }
}

/* Confetti — generated by spawnConfetti(). Each piece animates from the
   center outward to its assigned --tx/--ty offset, rotating to --rot,
   fading at the end. Mixed rectangles + circles in random colors. */
.confetti {
  position: fixed; left: 50%; top: 50%;
  pointer-events: none;
  background: var(--bg);
  transform: translate(-50%, -50%) rotate(0deg);
  animation: confetti-burst var(--dur, 1.2s) cubic-bezier(0.25, 0.6, 0.4, 1) forwards;
  z-index: 801;
}
.confetti-rect { width: 9px; height: 14px; border-radius: 2px; }
.confetti-circle { width: 9px; height: 9px; border-radius: 50%; }
@keyframes confetti-burst {
  0%   { transform: translate(-50%, -50%) rotate(0deg) scale(0.5); opacity: 1; }
  10%  { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--tx)), calc(-50% + var(--ty))) rotate(var(--rot)) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .confetti, .score-popup.perfect, .score-popup.perfect .score-glyph { animation: none; }
  .confetti { display: none; }
}

.overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.4);
}
.overlay-card {
  background: var(--card); border-radius: 12px; max-width: min(560px, 96vw);
  max-height: 86vh; overflow: auto;
  padding: 0;
}
.overlay-card header { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.overlay-card .close { background: transparent; color: var(--fg); border: none; font-size: 20px; cursor: pointer; }
.confirm-title { margin: 16px 16px 0; }
.confirm-message { padding: 16px; margin: 0; color: var(--muted); }
.confirm-actions { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px; border-top: 1px solid var(--border); }

/* Handle picker (one-time on first Google sign-in). Reuses overlay shell. */
.handle-pick-row {
  display: flex; align-items: center; gap: 8px;
  margin: 0 16px;
  padding: 10px 12px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.handle-pick-at { color: var(--muted); font-weight: 600; }
.handle-pick-input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  font-size: 16px; color: var(--fg); font-weight: 600;
  letter-spacing: 0.02em;
}
.handle-pick-status { padding: 6px 16px 0; min-height: 18px; }
.handle-pick-status.handle-pick-ok  { color: var(--hit); }
.handle-pick-status.handle-pick-bad { color: var(--miss); }

/* Inline bulk-upload teaser inside the first-login handle-picker modal.
   Marked "Coming soon" — the feature exists for clubs today, but isn't
   surfaced to general users yet. */
.bulk-invite-inline {
  margin: 12px 16px 0;
  padding: 12px 14px;
  background: var(--soft);
  border: 1px dashed var(--border);
  border-radius: 8px;
  position: relative;
}
.bulk-invite-inline h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: var(--fg);
  padding-right: 80px; /* leave room for the Coming-soon tag in the corner */
}
.bulk-invite-list {
  list-style: disc; padding: 0 0 0 18px; margin: 0;
  color: var(--muted); font-size: 13px;
}
.bulk-invite-list li { margin: 3px 0; }
.coming-soon-tag {
  position: absolute; top: 10px; right: 12px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.06em;
  color: var(--accent-fg);
  background: var(--accent);
  padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase;
}

/* ---------- Login ---------- */
.login-card {
  text-align: center;
  padding: 40px 16px;
  max-width: 420px; margin: 0 auto;
}
.brand-large {
  font-family: "Lora", Georgia, serif;
  font-weight: 600; font-size: 38px; letter-spacing: 0.06em;
  color: var(--fg);
}
.brand-large .b1 { color: #9ca3af; }
.brand-large .b2 { color: var(--fg); }
.brand-tag { color: var(--muted); margin-top: 4px; font-size: 14px; }

.login-attribution {
  margin-top: 16px;
  text-align: left;
  font-size: 11px; letter-spacing: 0.06em;
  color: var(--muted);
}

/* On the login surface, only the topbar wordmark is hidden — the brand
   already sits big-and-centered inside the login card, so showing it twice
   would be redundant. Topbar chrome (theme toggle, etc.) and the bottom
   tabbar stay visible. The body view marker is set in render(). */
body[data-view="login"] .topbar-brand { visibility: hidden; }
.login-actions { display: flex; flex-direction: column; gap: 8px; margin: 24px 0; }
.login-row { display: flex; gap: 8px; }
.login-row > * { flex: 1; }
.login-or { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.login-google-btn {
  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
  width: 100%; justify-content: center;
}
.login-google-btn[disabled] {
  background: #f3f4f6; color: #9ca3af; border-color: #e5e7eb;
  cursor: not-allowed; opacity: 1;
}
.login-google-btn[disabled] .g-mark { filter: grayscale(1) opacity(0.5); }
.login-google-btn .g-mark { width: 18px; height: 18px; display: inline-block; }
.login-error {
  background: #fef3f2; border: 1px solid #fecdca; color: #b42318;
  padding: 8px 10px; border-radius: 8px; font-size: 13px;
}
.login-features {
  list-style: disc; text-align: left; color: var(--muted); margin: 24px 0; padding: 0 16px 0 32px;
  font-family: var(--serif); font-style: italic;
}

/* ---------- Card ---------- */
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px; margin-bottom: 16px;
}
.card.just-voted { animation: pulse 0.8s ease; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(37,99,235,0.4); } 100% { box-shadow: 0 0 0 12px rgba(37,99,235,0); } }
.reposted-hat { display: flex; gap: 6px; align-items: center; color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.reposted-hat svg { width: 14px; height: 14px; flex-shrink: 0; }
.card-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.author { display: flex; gap: 8px; align-items: center; color: var(--fg); text-decoration: none; }
.avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--soft); }
.avatar-identicon { object-fit: cover; image-rendering: -webkit-optimize-contrast; }
.handle { font-weight: 600; }
.club-badge {
  background: var(--accent); color: var(--accent-fg);
  font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700;
  letter-spacing: 0.05em;
}
.aap-badge {
  background: var(--hit); color: #fff;
  font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 700;
  letter-spacing: 0.05em; margin-left: 4px;
}
.admin-toggle-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; }
.admin-toggle-row > div { flex: 1; }
.admin-toggle-row p { margin: 4px 0 0; }
.ts { color: var(--muted); font-size: 12px; margin-left: auto; }
.follow-btn {
  background: var(--accent); color: var(--accent-fg); border-color: var(--accent);
  padding: 4px 10px; font-size: 13px; border-radius: 6px;
}
.follow-btn.following { background: transparent; color: var(--fg); }

.card-quiz-body { display: flex; flex-direction: column; gap: 10px; }
.quiz-question { font-size: 16px; font-weight: 400; margin: 0; line-height: 1.4; white-space: pre-line; }
/* Single-image question — wrap in a square so tall/portrait Wikipedia
   images don't dominate the card. Centered, capped at a reasonable max
   width; the image itself fills the square via object-fit: cover. */
.quiz-question-image {
  display: block; width: 100%; max-width: 280px; aspect-ratio: 1;
  margin: 4px auto; border-radius: 8px; overflow: hidden;
  background: var(--soft);
}
.quiz-question-image img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}

.quiz-q-articles {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: 8px;
  /* Cap the whole grid so a single big square thumb doesn't dominate the
     card — multi-article layouts (2-5) fill this width naturally. */
  max-width: 360px;
}
.quiz-q-articles[data-count="1"] { --n: 1; max-width: 200px; margin-left: auto; margin-right: auto; }
.quiz-q-articles[data-count="2"] { --n: 2; max-width: 280px; }
.quiz-q-articles[data-count="3"] { --n: 3; }
.quiz-q-articles[data-count="4"] { --n: 4; }
.quiz-q-articles[data-count="5"] { --n: 5; }
.quiz-qart {
  background: var(--soft); border-radius: 8px; padding: 6px;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  position: relative;
}
.quiz-qart-letter {
  position: absolute; top: 4px; left: 6px;
  background: var(--fg); color: var(--bg);
  width: 20px; height: 20px; border-radius: 50%;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.quiz-qart-thumb {
  width: 100%; aspect-ratio: 1; border-radius: 6px;
  background-color: var(--border); background-size: cover; background-position: center;
}
.quiz-qart-thumb.masked { background: linear-gradient(135deg,#1f2937,#111); }
.quiz-qart-title { font-size: 12px; text-align: center; line-height: 1.2; }

/* MCQ options: always one row. Mobile width gets tight at 5 options but
   thumbnails + titles still fit thanks to minmax(0, 1fr). */
.quiz-mcq-opts {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 6px;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
}
.quiz-mcq-opts[data-count="1"] { --n: 1; }
.quiz-mcq-opts[data-count="2"] { --n: 2; }
.quiz-mcq-opts[data-count="3"] { --n: 3; }
.quiz-mcq-opts[data-count="4"] { --n: 4; }
.quiz-mcq-opts[data-count="5"] { --n: 5; }
.quiz-mcq-opt {
  background: var(--soft); border: 2px solid transparent; border-radius: 8px;
  padding: 4px; cursor: pointer;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
  min-width: 0;
}
/* Hover preview only on devices with a real pointer (desktop). On touch
   devices :hover sticks after a tap, which made an unselected box look
   still-picked. Picked state uses a stronger tint so it's clearly
   distinguishable from hover. */
@media (hover: hover) and (pointer: fine) {
  .quiz-mcq-opt:hover:not(.picked) {
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  }
}
.quiz-mcq-opt.picked {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 18%, var(--soft));
}
/* Result states. .correct = correct AND picked (solid green). .missed =
   correct but the voter didn't pick it (faded green outline + "MISSED"
   label). .incorrect = picked but wrong (red). Unpicked-and-wrong stays
   neutral. */
.quiz-mcq-opt.correct   { border-color: var(--hit);  background: color-mix(in srgb, var(--hit)  22%, var(--soft)); }
.quiz-mcq-opt.missed    { border-color: var(--hit); border-style: dashed; background: color-mix(in srgb, var(--hit) 6%, var(--soft)); }
.quiz-mcq-opt.incorrect { border-color: var(--miss); background: color-mix(in srgb, var(--miss) 14%, var(--soft)); }
.quiz-mcq-opt.correct, .quiz-mcq-opt.missed, .quiz-mcq-opt.incorrect { position: relative; }

.quiz-mcq-opt .thumb {
  width: 100%; aspect-ratio: 1; border-radius: 6px;
  background-color: var(--border); background-size: cover; background-position: center;
  position: relative;
}
/* Center the result glyph over the thumbnail. Big, with a heavy text-shadow
   so it stays legible on bright Wikipedia thumbnails. */
.quiz-mcq-opt.correct   .thumb::after,
.quiz-mcq-opt.incorrect .thumb::after,
.quiz-mcq-opt.missed    .thumb::after {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 900; line-height: 1;
  font-size: 64px;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 0 6px rgba(255, 255, 255, 0.4);
}
.quiz-mcq-opt.correct   .thumb::after { content: '✓'; color: var(--hit); }
.quiz-mcq-opt.incorrect .thumb::after { content: '✗'; color: var(--miss); }
/* Missed (correct option the voter didn't pick) — show a faded ✓ to convey
   "this was a right answer you didn't tap" without the false signal of a
   solid green. Plus a corner MISSED badge for unambiguity. */
.quiz-mcq-opt.missed .thumb::after { content: '✓'; color: var(--hit); opacity: 0.5; }
.quiz-mcq-opt.missed::before {
  content: 'MISSED'; position: absolute; top: 4px; right: 4px;
  background: var(--miss); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: 0.04em;
  padding: 2px 5px; border-radius: 4px;
  z-index: 1;
}
@media (max-width: 480px) {
  .quiz-mcq-opt.correct .thumb::after,
  .quiz-mcq-opt.incorrect .thumb::after,
  .quiz-mcq-opt.missed .thumb::after { font-size: 44px; }
}
.quiz-mcq-opt .thumb.masked { background: linear-gradient(135deg,#1f2937,#111); }
.quiz-mcq-opt .opt-title { font-size: 12px; line-height: 1.15; text-align: center; word-break: break-word; }
.quiz-mcq-opt .opt-share { font-size: 11px; color: var(--muted); }
.quiz-mcq-hint { color: var(--muted); font-size: 13px; margin: 0; }

.quiz-list-input { position: relative; }
.quiz-list-results {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 10;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  margin-top: 4px; max-height: 320px; overflow-y: auto;
}
.search-result {
  display: flex; gap: 8px; align-items: center; padding: 8px;
  background: transparent; border: none; color: var(--fg);
  width: 100%; text-align: left; cursor: pointer; border-radius: 0;
}
.search-result:hover { background: var(--soft); }
.search-result .thumb { width: 36px; height: 36px; border-radius: 4px; background-color: var(--border); background-size: cover; background-position: center; }
.search-result .result-title { font-size: 14px; }

.quiz-list-guesses { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-list-guesses li {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  padding: 4px 10px; border-radius: 16px; font-size: 13px;
  display: inline-flex; gap: 4px; align-items: center;
}
.qg-remove { background: transparent; border: none; color: var(--muted); cursor: pointer; padding: 0; font-size: 16px; }

.quiz-clue-row { background: var(--soft); padding: 8px; border-radius: 8px; }
.quiz-clue.hidden { display: none; }
.quiz-clue-text { margin: 0; font-style: italic; color: var(--muted); }

.quiz-submit-row { display: flex; justify-content: flex-end; }

.quiz-result {
  background: var(--soft); padding: 12px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 8px;
}
.quiz-result-score { font-size: 14px; font-weight: 600; }
.quiz-show-answer-row { margin-top: 8px; }
.quiz-answer-reveal h4 { margin: 8px 0 4px; }
.quiz-answer-reveal .quiz-answer-links-h { margin-top: 14px; }
.quiz-answer-text-list {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: flex; flex-direction: column; gap: 4px;
}
.quiz-answer-text-list li {
  font-size: 16px; font-weight: 600; color: var(--fg);
  text-transform: uppercase;
}
.quiz-answer-reveal .quiz-card .ttl { text-transform: uppercase; }
.quiz-result h4 { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin: 4px 0 0; }
.quiz-canonical { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.quiz-canonical li {
  background: var(--card); border: 1px solid var(--border);
  padding: 4px 10px; border-radius: 16px; font-size: 12px;
}
.quiz-canonical li.hit { background: color-mix(in srgb, var(--hit) 18%, transparent); border-color: var(--hit); }
.quiz-canonical li.miss { background: color-mix(in srgb, var(--miss) 12%, transparent); border-color: color-mix(in srgb, var(--miss) 50%, var(--border)); }

/* Single-answer quizzes show Answer + Your guess in one row for easy compare. */
.quiz-side-by-side { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qsbs-col h4 { margin: 4px 0 4px; }
.quiz-cards-single { grid-template-columns: 1fr !important; }

/* Result-view article cards. One row, max 5 per row; >5 wraps but each card
   still gets minmax(0, 1fr) so phone widths stay readable. Container is
   capped at 50% of body width — half-size tiles on the result panel keep
   the score line and the cards readable on the same screen. */
.quiz-cards {
  list-style: none; padding: 0; margin: 4px 0 0;
  display: grid; gap: 6px;
  grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr));
  max-width: 50%;
}
.quiz-cards[data-count="1"] { --n: 1; }
.quiz-cards[data-count="2"] { --n: 2; }
.quiz-cards[data-count="3"] { --n: 3; }
.quiz-cards[data-count="4"] { --n: 4; }
.quiz-cards[data-count="5"] { --n: 5; }
.quiz-cards-single { --n: 1 !important; grid-template-columns: 1fr !important; }
.quiz-card {
  width: 100%;
  background: var(--card); border: 2px solid var(--border); border-radius: 8px;
  padding: 4px; cursor: pointer; color: var(--fg); text-align: center;
  display: flex; flex-direction: column; gap: 4px;
}
.quiz-card:hover { border-color: var(--accent); }
.quiz-card.hit  { border-color: var(--hit);  background: color-mix(in srgb, var(--hit)  10%, var(--card)); }
.quiz-card.miss { border-color: var(--miss); background: color-mix(in srgb, var(--miss) 10%, var(--card)); }
.quiz-card .thumb {
  width: 100%; aspect-ratio: 1;
  background-color: var(--soft);
  background-size: cover; background-position: center;
  border-radius: 4px;
}
.quiz-card { padding: 4px; }
.quiz-card .ttl { font-size: 11px; line-height: 1.15; word-break: break-word; }

/* Question article images leak the article name through the browser's
   right-click "open image in new tab" menu and through the long-press
   menu on mobile. Block both: the image stays decorative-only inside
   .quiz-qart-thumb, and the wrapper handles any clicks. */
.quiz-qart-thumb img {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;
}

/* Full-page Wikipedia overlay. Black-and-white toolbar with QUIZGRAM brand
   + back arrow + escape-hatch "open in new tab" arrow. */
.wiki-overlay {
  position: fixed; inset: 0; z-index: 500;
  display: flex; flex-direction: column;
  background: var(--bg);
}
.wiki-toolbar {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 14px;
  background: #000; color: #fff;
}
.wiki-toolbar .wiki-back {
  background: transparent; color: #fff; border: 1px solid #fff;
  padding: 6px 10px; border-radius: 6px; font-weight: 600; cursor: pointer;
  display: inline-flex; gap: 6px; align-items: center;
}
.wiki-toolbar .wiki-back:hover { background: #fff; color: #000; }
.wiki-toolbar .wiki-back svg { width: 16px; height: 16px; }
.wiki-toolbar .wiki-brand {
  font-family: "Optima", "Optima Nova", "Palatino", serif;
  letter-spacing: 0.12em; font-weight: 700; font-size: 18px;
  margin-left: auto;
}
.wiki-toolbar .wiki-newtab {
  color: #fff; text-decoration: none; font-size: 18px;
  border: 1px solid #fff; border-radius: 6px;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.wiki-toolbar .wiki-newtab:hover { background: #fff; color: #000; }
.wiki-iframe { flex: 1; width: 100%; border: none; background: var(--bg); }

.card-foot {
  margin-top: 12px; padding-top: 10px;
  border-top: 1px dotted var(--border);
  display: flex; flex-direction: column; gap: 8px;
  /* ~10% smaller than the previous 13px baseline used across stats + rx-row */
  font-size: 12px;
}
.card-stats-row { display: flex; gap: 12px; flex-wrap: wrap; color: var(--muted); }
.card-stats-row .stat { background: transparent; border: none; padding: 0; color: inherit; font: inherit; }
.card-stats-row .stat-wins {
  cursor: pointer; text-decoration: underline dotted;
}
.card-stats-row .stat b { color: var(--fg); }
.card-rx-row { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 6px; }
.like-btn, .repost-btn, .share-btn, .icon-btn, .delete-btn {
  background: transparent; color: var(--muted);
  border: none; border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex; gap: 4px; align-items: center;
  font: inherit; cursor: pointer;
}
.like-btn.active, .repost-btn.active { color: var(--accent); }
.share-btn:hover { color: var(--fg); }
.repost-btn svg, .share-btn svg, .like-btn svg { width: 22px; height: 22px; }
.like-btn .like-emoji { font-size: 22px; line-height: 1; }
.rx-label { font-weight: 600; }
.rx-count { color: var(--muted); }
.repost-btn.active .rx-count { color: var(--accent); }
.delete-btn:hover { color: var(--miss); }
.delete-btn svg { width: 22px; height: 22px; }

/* Live answer entry — type → "+ Add" stages a guess. The "Wanna check
   Wikipedia?" link below opens the optional Wikipedia results dropdown
   so the voter can pick a canonical article instead of typing. */
.quiz-list-input-row { display: flex; gap: 8px; align-items: stretch; }
.quiz-list-input-row .quiz-list-search { flex: 1; min-width: 0; }
.quiz-list-add-btn { white-space: nowrap; }
.quiz-list-wiki-link {
  display: inline-block; margin-top: 6px;
  background: transparent; border: none;
  color: var(--accent); font: inherit; font-size: 12px;
  cursor: pointer; padding: 0;
  text-decoration: underline; text-underline-offset: 3px;
}
.quiz-list-wiki-link:hover { filter: brightness(0.9); }
.quiz-list-wiki-link:disabled { opacity: 0.6; cursor: wait; }
.quiz-list-wiki-link .wiki-w {
  font-family: 'Linux Libertine', Georgia, 'Times New Roman', serif;
  font-weight: 700; font-size: 1.05em; margin-right: 2px;
}
.quiz-list-results .search-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--soft);
}
.quiz-list-results .search-close {
  background: transparent; border: none; color: var(--muted);
  font-size: 22px; line-height: 1; cursor: pointer; padding: 0 6px;
}
.quiz-list-results .search-close:hover { color: var(--fg); }
.search-list { padding: 6px; }
.search-loading, .search-empty { padding: 12px; color: var(--muted); font-size: 13px; text-align: center; }

/* Per-card PPT-add icon (admin-only). Inherits the rx-row look — borderless,
   icon-only — and turns accent-colored when the post is already in the deck. */
.ppt-add-btn {
  background: transparent; color: var(--muted);
  border: none; border-radius: 6px; padding: 4px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.ppt-add-btn svg { width: 22px; height: 22px; }
.ppt-add-btn:hover { color: var(--fg); }
.ppt-add-btn.added { color: var(--accent); }

/* Floating "Deck (N) — Download" chip, bottom-right. */
.ppt-deck-chip {
  position: fixed; right: 16px; bottom: 76px; z-index: 26;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; height: 40px; border-radius: 999px;
  background: var(--accent); color: var(--accent-fg);
  border: none; cursor: pointer; font: inherit; font-weight: 600; font-size: 13px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}
.ppt-deck-chip svg { width: 18px; height: 18px; }
.ppt-deck-chip:disabled { opacity: 0.7; cursor: wait; }
.ppt-deck-chip-cta { font-size: 11px; opacity: 0.85; padding-left: 4px; border-left: 1px solid currentColor; }
.ppt-deck-chip:hover { filter: brightness(0.95); }

/* Watchlist export bar — sits above the list. */
.watchlist-export { margin: 0 0 12px; display: flex; justify-content: flex-end; }

.theme-toggle {
  background: transparent; color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px;
  padding: 4px; cursor: pointer;
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
}
.theme-toggle svg { width: 16px; height: 16px; }
.theme-toggle:hover { background: var(--soft); }

/* Floating install pill — same format as the take5games.com FAB. Mounted
   on <body>, fixed bottom-left so it sits clear of the FAB compose button
   on the right. */
.fab-install {
  position: fixed; left: 14px; bottom: 76px; z-index: 25;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  background: #000; color: #fff;
  border: 1px solid #444; border-radius: 999px;
  font: 600 13px/1 system-ui, -apple-system, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.fab-install svg { width: 14px; height: 14px; flex-shrink: 0; }
.fab-install:hover { transform: translateY(-1px); }
@media (max-width: 380px) {
  .fab-install span { display: none; }
  .fab-install { padding: 8px; }
}

.ath-modal { width: min(420px, 96vw); }
.ath-body { padding: 14px; }
.ath-steps { margin: 0; padding-left: 22px; }
.ath-steps li { margin: 8px 0; line-height: 1.4; }

/* ---------- Listing pages ---------- */
.page-title { font-size: 22px; margin: 8px 0 16px; }
.compose-title-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.compose-title-row .page-title { margin: 8px 0; }
.compose-close {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; color: var(--muted);
  border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer;
}
.compose-close:hover { color: var(--fg); background: var(--soft); }
.compose-close svg { width: 18px; height: 18px; }
.page-subtitle { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

/* Explore-page user search. Sticky-ish search input above the post list,
   with a result dropdown that pushes content (not absolute) so it works
   cleanly on mobile. */
.explore-search {
  position: relative;
  margin: 8px 0 14px;
}
.explore-search input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  font-size: 14px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--fg);
  outline: none;
}
.explore-search input:focus { border-color: var(--accent); background: var(--bg); }
.explore-search-icon {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
.explore-search-results {
  margin-top: 6px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  max-height: 360px; overflow-y: auto;
}
.user-search-result {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  text-decoration: none; color: var(--fg);
  border-bottom: 1px solid var(--border);
}
.user-search-result:last-child { border-bottom: none; }
.user-search-result:hover { background: var(--soft); }
.user-search-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.user-search-handle { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 6px; }
.user-search-dn { font-size: 12px; color: var(--muted); }
.user-search-following { font-size: 10px; color: var(--accent); font-weight: 600; }
.user-search-empty { padding: 14px; text-align: center; color: var(--muted); font-size: 13px; }
.sentinel { display: flex; justify-content: center; padding: 16px; }

/* ---------- Saved ---------- */
/* Saved articles grid: predictable 5-per-row on tablet/desktop, 3-per-row
   on phones. minmax(0, 1fr) prevents tile overflow on narrow widths. */
.saved-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 600px) {
  .saved-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
}
.saved-tile {
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  padding: 4px; position: relative; min-width: 0;
}
.saved-tile-link {
  display: flex; flex-direction: column; gap: 4px;
  color: var(--fg); text-decoration: none;
  background: transparent; border: none; padding: 0; cursor: pointer;
  width: 100%; text-align: center;
}
.saved-tile-thumb {
  width: 100%; aspect-ratio: 1;
  background-color: var(--border);
  background-size: cover; background-position: center;
  border-radius: 6px;
}
.saved-tile-title {
  font-size: 11px; line-height: 1.15;
  word-break: break-word;
}
.saved-remove-btn {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px; padding: 0;
  background: rgba(0,0,0,0.5); color: #fff; border: none; border-radius: 50%;
  cursor: pointer; font-size: 18px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- Profile ---------- */
.profile-head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; padding: 16px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.profile-avatar { width: 64px; height: 64px; }
.profile-meta { flex: 1; min-width: 0; }
.profile-actions { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 600px) {
  /* Below 600px the actions row drops to a full-width strip under the meta
     so Sign out / Follow get a comfortable touch target instead of being
     squeezed into a 50-pixel sliver next to the avatar. */
  .profile-actions { flex-basis: 100%; margin-top: 4px; }
}
.profile-name { margin: 0; font-size: 20px; }
.profile-dn { color: var(--muted); font-size: 14px; }
.profile-counts { display: flex; gap: 16px; margin-top: 8px; font-size: 14px; color: var(--muted); }
.profile-counts b { color: var(--fg); }

/* Profile stats accordion. Closed by default; one plain row inside, no
   pills — every metric inline-spaced and reads as a single sentence. */
.profile-stats {
  margin-top: 10px;
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.profile-stats > summary {
  padding: 8px 12px;
  font-size: 13px; font-weight: 700; color: var(--fg);
  cursor: pointer;
  list-style: none;
}
.profile-stats > summary::-webkit-details-marker { display: none; }
.profile-stats > summary::before {
  content: '▸ '; color: var(--muted); display: inline-block; transition: transform 0.15s ease;
}
.profile-stats[open] > summary::before { content: '▾ '; }
.profile-stats-body {
  padding: 8px 12px 12px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.profile-stats-row {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  font-size: 13px; color: var(--muted);
}
.profile-stats-label { font-weight: 600; color: var(--fg); }
.profile-stats-item b { color: var(--fg); font-weight: 700; }
/* Photo: [Avatar] [Google photo] segmented choice. */
.profile-photo-choice { display: inline-flex; gap: 4px; }
.profile-photo-opt {
  background: var(--bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 4px 12px; font-size: 12px; cursor: pointer;
}
.profile-photo-opt[aria-pressed="true"] {
  background: var(--accent); color: var(--bg); border-color: var(--accent);
}
.profile-photo-opt:disabled { opacity: 0.6; cursor: wait; }

/* ---------- Groups ---------- */
.vis-pill {
  display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 0.05em;
  padding: 2px 6px; border-radius: 4px; margin-left: 6px; vertical-align: middle;
}
.vis-pill.private { background: var(--miss); color: #fff; }
.vis-pill.public  { background: var(--hit);  color: #fff; }
.vis-pill.owner   { background: var(--accent); color: var(--accent-fg); }
.vis-pill.admin   { background: var(--fg);      color: var(--bg); }

.group-create-form { display: flex; flex-direction: column; gap: 8px; }
.group-create-form input[type="text"] {
  background: var(--bg); border: 1px solid var(--border); padding: 8px 10px;
  border-radius: 6px; font: inherit; color: var(--fg); margin-top: 4px;
}
.group-create-form .row-actions { gap: 12px; flex-wrap: wrap; align-items: center; }
.group-create-form label[for], .group-create-form > .row-actions label { font-weight: normal; }
.group-create-form .row-actions label { display: inline-flex; gap: 4px; align-items: center; cursor: pointer; }

.group-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) { .group-grid { grid-template-columns: repeat(2, 1fr); } }
.group-tile { background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.group-tile-link { display: block; padding: 12px; color: var(--fg); text-decoration: none; }
.group-tile-link:hover { background: var(--soft); border-radius: 10px; }
.group-tile-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.group-tile-desc { color: var(--muted); font-size: 13px; margin: 6px 0 4px; }
.group-tile-meta { font-size: 12px; }

.group-header { margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.page-title-sm { font-size: 16px; margin: 16px 0 8px; }

.profile-groups { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; font-size: 13px; }
.group-pill {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  background: var(--soft); color: var(--fg);
  text-decoration: none; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border);
}
.group-pill:hover { background: var(--card); }
.group-pill.private { border-color: color-mix(in srgb, var(--miss) 50%, var(--border)); }
.group-pill.manage { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }

.card-group-chip {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--soft); color: var(--muted);
  text-decoration: none; font-size: 11px; font-weight: 600;
  border: 1px solid var(--border);
  margin-left: 4px;
}
.card-group-chip.private {
  border-color: color-mix(in srgb, var(--miss) 50%, var(--border));
  color: var(--miss);
}
.card-group-chip:hover { background: var(--card); }

.compose-target-section { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 12px; }
.compose-target-select { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 8px; font: inherit; color: var(--fg); }

.user-row .vis-pill { margin-left: auto; }
.btn.danger { color: var(--miss); border-color: color-mix(in srgb, var(--miss) 50%, var(--border)); }
.profile-counts .count-link {
  background: transparent; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--muted);
  text-decoration: underline dotted;
}
.profile-counts .count-link:hover { color: var(--fg); }
.profile-counts .count-link b { color: var(--fg); }

/* Followers / following list popup. */
.user-list-modal { width: min(420px, 96vw); }
.user-list-body { padding: 8px 0; max-height: 60vh; overflow-y: auto; }
.user-list { list-style: none; padding: 0; margin: 0; }
.user-list li { padding: 8px 14px; }
.user-list .user-row {
  display: flex; align-items: center; gap: 10px;
  color: var(--fg); text-decoration: none;
}
.user-list .user-row:hover { background: var(--soft); border-radius: 6px; }
.user-list .user-row .avatar { width: 32px; height: 32px; }
.user-list .user-row .handle { font-weight: 600; }
.user-list .user-row .dn { color: var(--muted); font-size: 13px; }

/* ---------- Winners modal ---------- */
.winners-modal { width: min(420px, 96vw); }
.winners-body { padding: 12px; }
.winners-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.winners-list li { display: flex; align-items: center; gap: 8px; }
.winner-link { display: flex; align-items: center; gap: 8px; color: var(--fg); text-decoration: none; flex: 1; }
.winner-link .avatar { width: 28px; height: 28px; }
.winner-link .dn { color: var(--muted); font-size: 13px; }
.winner-clue-tag { font-size: 11px; background: var(--soft); padding: 2px 6px; border-radius: 10px; color: var(--muted); }
.winner-ts { color: var(--muted); font-size: 12px; }

/* ---------- Admin ---------- */
/* Admin renders as a full-viewport overlay that escapes the layout container,
   so we can use the full screen width on phones. Topbar/tabbar/install-FAB
   are hidden via body[data-view="admin"] below. */
.admin-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--bg); color: var(--fg);
  overflow-y: auto;
  padding: 0;
}
/* Header keeps the safe-area padding so the × clears notches; content
   below uses the full viewport width so phone real-estate isn't wasted. */
.admin-overlay-header {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  background: var(--bg);
  padding: 8px max(env(safe-area-inset-right), 10px) 8px max(env(safe-area-inset-left), 10px);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.admin-overlay-header .page-title { margin: 0; }
.admin-overlay-close {
  background: transparent; border: none; color: var(--fg);
  font-size: 28px; line-height: 1; cursor: pointer; padding: 4px 10px; border-radius: 6px;
}
.admin-overlay-close:hover { background: var(--soft); }
body[data-view="admin"] .topbar,
body[data-view="admin"] .tabbar,
body[data-view="admin"] .fab-compose,
body[data-view="admin"] .fab-install,
body[data-view="admin"] .ppt-deck-chip { display: none !important; }
body[data-view="admin"] main { padding: 0 !important; max-width: none !important; }
/* Admin sections: edge-to-edge horizontally, only vertical breathing room. */
.admin-section { margin: 0 0 12px; padding: 8px 6px; border: 1px solid var(--border); border-radius: 0; border-left: none; border-right: none; }
.admin-section h3 { margin: 0 0 12px; font-size: 16px; }
.admin-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.admin-list li { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 6px 8px; background: var(--soft); border-radius: 6px; flex-wrap: wrap; }
.admin-account-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.admin-account-meta { gap: 4px; }
.admin-account-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.admin-account-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); padding: 1px 5px; background: var(--bg); border-radius: 4px; }
.admin-account-email {
  display: block; width: 100%;
  margin-top: 2px; padding-top: 4px;
  border-top: 1px dotted var(--border);
  word-break: break-all;
  font-size: 12px;
}
/* Shared "set any user's avatar" form at the top of the Accounts section. */
.admin-avatar-form {
  display: grid; grid-template-columns: minmax(110px, 1fr) minmax(180px, 2fr) auto;
  gap: 6px; margin: 8px 0 4px;
}
.admin-avatar-form input { padding: 6px 8px; min-width: 0; font-size: 13px; }
@media (max-width: 480px) {
  .admin-avatar-form { grid-template-columns: 1fr 1fr; }
  .admin-avatar-form button { grid-column: 1 / -1; }
}
.admin-avatar-hint { margin: 0 0 8px; }
.btn.danger { color: var(--miss); border-color: color-mix(in srgb, var(--miss) 30%, var(--border)); }
.btn.danger:hover { background: color-mix(in srgb, var(--miss) 12%, var(--soft)); }

/* Report-flag icon button on cards. Icon-only — no text label. Matches the
   borderless geometry of Like/Repost/Share so all rx-row buttons align. */
.report-btn {
  background: transparent; color: var(--muted);
  border: none; border-radius: 6px;
  padding: 4px 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.report-btn svg { width: 22px; height: 22px; }
.report-btn:hover { color: var(--fg); }
.report-btn.reported { color: var(--miss); }
.report-btn:disabled { cursor: default; opacity: 1; }

/* Admin reported-posts list. */
.admin-reports li { align-items: flex-start; }
.admin-report-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.admin-report-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-report-count {
  font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--miss) 14%, var(--soft));
  color: var(--miss);
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.admin-report-snippet { color: var(--fg); font-size: 14px; word-break: break-word; }
.admin-report-reporters { word-break: break-word; }
.admin-list li.empty { background: transparent; color: var(--muted); justify-content: center; }
.row-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.muted { color: var(--muted); }
.aqr-handle { padding: 12px 0; border-bottom: 1px solid var(--border); }
.aqr-handle header { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.aqr-handle a { color: var(--fg); text-decoration: none; }
.aqr-counts { font-size: 13px; }
.aqr-counts .aqr-count-pending { color: var(--accent); font-weight: 700; }
.aqr-cadence { width: 60px; padding: 4px 6px; }
/* Quiz reserves table — compact, full-width on phone with horizontal scroll
   if the actions cell needs more room. */
.aqr-table-wrap { overflow-x: auto; }
.aqr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.aqr-table thead th {
  text-align: left; font-weight: 600; padding: 6px 8px;
  border-bottom: 1px solid var(--border); color: var(--muted);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.aqr-table tbody td { padding: 6px 8px; vertical-align: middle; border-bottom: 1px solid var(--border); }
.aqr-table tbody a { color: var(--fg); text-decoration: none; }
.aqr-table .aqr-count-pending { color: var(--accent); font-weight: 700; }
.aqr-table .aqr-cadence { width: 60px; padding: 4px 6px; }
.aqr-table .aqr-row-actions { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.aqr-pending-row td { padding: 0 8px 8px; border-bottom: 1px solid var(--border); }
.aqr-pending-row details > summary { cursor: pointer; font-size: 12px; color: var(--muted); padding: 4px 0; }
.aqr-pending { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; gap: 4px; }
.aqr-pending li { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 6px 8px; background: var(--soft); border-radius: 6px; font-size: 13px; }
.aqr-upload-label .btn { display: inline-block; cursor: pointer; }
#aqr-result { background: var(--soft); padding: 10px; border-radius: 8px; font-size: 13px; margin-top: 12px; }
.aqr-result-loading { color: var(--muted); font-style: italic; }
.aqr-result-err { color: var(--miss); font-weight: 600; }
.aqr-result-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; flex-wrap: wrap; margin-bottom: 8px;
}
.aqr-result-actions { display: flex; gap: 6px; }
.aqr-result-section { margin-top: 6px; }
.aqr-result-section > summary { cursor: pointer; padding: 6px 0; }
.aqr-result-list { list-style: decimal; padding-left: 24px; margin: 6px 0 0; display: flex; flex-direction: column; gap: 8px; }
.aqr-result-list li { padding: 8px 10px; border-radius: 6px; }
.aqr-result-accepted li { background: color-mix(in srgb, var(--hit) 12%, var(--soft)); }
.aqr-result-rejected li { background: color-mix(in srgb, var(--miss) 12%, var(--soft)); }
.aqr-result-list .aqr-q { font-weight: 600; color: var(--fg); }
.aqr-result-list .aqr-a { margin-top: 2px; color: var(--muted); }
.aqr-result-list .aqr-a b { color: var(--fg); }
.aqr-result-list .aqr-reason { margin-top: 4px; font-size: 12px; color: var(--miss); }
.aqr-result-list .aqr-hint { color: var(--muted); }
.aqr-result-list .aqr-line { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--muted); padding: 1px 5px; background: var(--bg); border-radius: 4px; margin-right: 4px; }
.aqr-via-search { font-size: 11px; font-weight: 600; color: var(--accent); background: var(--bg); padding: 1px 6px; border-radius: 4px; margin-left: 6px; cursor: help; }
.aqr-result-flagged li { background: color-mix(in srgb, #f59e0b 18%, var(--soft)); }
.aqr-result-flagged li.aqr-result-inserted { background: color-mix(in srgb, var(--hit) 12%, var(--soft)); opacity: 0.85; }
.aqr-reason-flagged { color: #b45309; }
.aqr-flagged-actions { margin-top: 6px; }