:root {
  --radius: 14px;
  --maxw: 34rem;
  /* light palette (default). --on-strong = text on accent/pass/fail fills.
     --fail darkened so white text clears 4.5:1. */
  --bg: #fafaf9;
  --surface: #fff;
  --text: #1c1c1a;
  --muted: #63635e;
  --border: #e3e3df;
  --accent: #2f6f4f;
  --pass: #2f6f4f;
  --fail: #9e3f29;
  --on-strong: #fff;
}
/* dark palette, applied via data-theme="dark" or when the system prefers dark
   and no explicit choice (data-theme is system/absent). The accent/pass/fail
   fills are light here, so --on-strong flips to near-black for contrast. */
:root { color-scheme: light dark; }
:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="dark"] {
  --bg: #16170f; --surface: #21221a; --text: #ece9df;
  --muted: #a6a597; --border: #34352b; --accent: #6fae87; --pass: #6fae87; --fail: #e0937c;
  --on-strong: #0e1c13;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    --bg: #16170f; --surface: #21221a; --text: #ece9df;
    --muted: #a6a597; --border: #34352b; --accent: #6fae87; --pass: #6fae87; --fail: #e0937c;
    --on-strong: #0e1c13;
  }
}

* { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }

/* visually hidden but available to screen readers */
.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;
}

/* visible keyboard focus on every interactive control */
:focus-visible { outline: 3px solid var(--text); outline-offset: 2px; border-radius: 4px; }
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  .btn:active, .menu-btn:active { transform: none; }
}
body {
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
}
#app {
  max-width: var(--maxw);
  margin-inline: auto;
  padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom));
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.loading { color: var(--muted); margin: auto; }

/* ---- hero (start / done) ---- */
.hero { margin: auto 0; text-align: center; display: flex; flex-direction: column; gap: 1.5rem; }
.hero h1 { font-size: 1.6rem; font-weight: 650; }
.hero .count { font-size: 3.5rem; font-weight: 700; line-height: 1; color: var(--accent); }
.hero .count small { display: block; font-size: 0.9rem; font-weight: 500; color: var(--muted); margin-top: 0.4rem; }

.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem; }
.stats div { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 0.6rem 0.2rem; }
.stats .n { font-size: 1.3rem; font-weight: 650; }
.stats .l { font-size: 0.7rem; color: var(--muted); }

.chips { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center; }
.chip {
  font: inherit; font-size: 0.85rem; padding: 0.35rem 0.8rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface);
  color: var(--text); cursor: pointer;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }

/* ---- buttons ---- */
.btn {
  font: inherit; font-weight: 600; padding: 0.85rem 1.4rem; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }
.btn.pass { background: var(--pass); border-color: var(--pass); color: var(--on-strong); }
.btn.fail { background: var(--fail); border-color: var(--fail); color: var(--on-strong); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn:active { transform: translateY(1px); }
.actions { display: flex; gap: 0.7rem; }
.actions .btn { flex: 1; }

/* ---- progress ---- */
.progress { display: flex; gap: 2px; height: 5px; margin-bottom: 1rem; }
.progress span { flex: 1; border-radius: 2px; background: var(--border); }
.progress span.done { background: var(--muted); }
.progress span.cur { background: var(--accent); }

/* ---- card ---- */
.card-wrap { flex: 1; display: flex; flex-direction: column; }
.card {
  flex: 1; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1.5rem; display: flex; flex-direction: column; position: relative; min-height: 16rem;
}
.badges { position: absolute; top: 0.7rem; right: 0.7rem; display: flex; gap: 0.35rem; }
.badge { font-size: 0.65rem; font-weight: 600; padding: 0.15rem 0.5rem; border-radius: 999px; background: var(--border); color: var(--muted); }
.badge.rev { background: #46506b; color: #fff; }
.badge.fail { background: var(--fail); color: var(--on-strong); }
.relation { text-align: center; color: var(--muted); font-size: 0.85rem; margin-bottom: 0.5rem; }
.face { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 0.6rem; }
.face.q { font-size: 1.6rem; font-weight: 600; }
/* images fill the card width, but never upscale past their natural size */
.face img, .extra img { width: 100%; max-width: max-content; height: auto; border-radius: 8px; }
.divider { border: none; border-top: 1px solid var(--border); margin: 1rem 0; }
.extra { color: var(--muted); font-size: 0.9rem; text-align: center; }
.hint { text-align: center; color: var(--muted); font-size: 0.75rem; margin-top: 0.8rem; }

/* ---- leaflet map ---- */
.map { width: 100%; height: 240px; margin-top: 1rem; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.map .leaflet-container { width: 100%; height: 100%; background: var(--surface); }

@media (max-width: 600px) { .hint { display: none; } }

/* ---- install guide ---- */
.install { font-size: 0.85rem; color: var(--muted); text-align: left; max-width: 26rem; margin-inline: auto; }
.install summary { cursor: pointer; text-align: center; color: var(--accent); font-weight: 600; }
.install p { margin: 0.6rem 0; }
.install strong { color: var(--text); }

/* ---- settings menu ---- */
.menu-btn {
  position: fixed; top: max(0.6rem, env(safe-area-inset-top)); right: 0.6rem; z-index: 10;
  font: inherit; font-size: 1.3rem; line-height: 1; width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text); cursor: pointer;
}
.menu-btn:active { transform: translateY(1px); }

.menu-modal {
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
  color: var(--text); padding: 0; max-width: 22rem; width: calc(100% - 2rem);
}
.menu-modal::backdrop { background: rgba(0, 0, 0, 0.5); }
.menu-body { display: flex; flex-direction: column; gap: 0.7rem; padding: 1.3rem; }
.menu-body h2 { font-size: 1.1rem; font-weight: 650; margin-bottom: 0.2rem; }
.menu-body .warn { font-size: 0.9rem; color: var(--fail); margin-bottom: 0.6rem; }

/* native radio group styled as a segmented control */
.seg { border: 0; padding: 0; margin: 0; min-inline-size: 0; }
.seg legend { font-size: 0.8rem; color: var(--muted); padding: 0; margin-bottom: 0.4rem; }
.seg-opts { display: flex; gap: 0.3rem; }
.seg-opts label {
  flex: 1; text-align: center; font-size: 0.85rem; padding: 0.5rem; cursor: pointer;
  border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text);
}
.seg-opts input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg-opts label:has(input:checked) { background: var(--accent); border-color: var(--accent); color: var(--on-strong); }
.seg-opts label:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }