:root {
  --ink:        #1b1d20;
  --ink-soft:   #4a4f56;
  --ink-faint:  #8b929b;
  --rule:       #dfe3e8;
  --paper:      #ffffff;
  --paper-soft: #f7f8f9;

  --accent:      #14595c;
  --accent-soft: #e8f1f0;
  --accent-line: #a8ccc9;

  --ok:          #1b6e46;
  --ok-soft:     #edf6f0;
  --ok-line:     #97c9ae;

  --bad:         #b03a26;
  --bad-soft:    #fbeeea;
  --bad-line:    #e2a999;

  --pearl-bg:    #fbf4e4;
  --pearl-line:  #c9973a;
  --pearl-ink:   #6b4d14;

  --trap-bg:     #fbefec;
  --trap-line:   #b4543f;
  --trap-ink:    #7d3423;

  --flag-bg:     #f2f0fa;
  --flag-line:   #6f5fae;

  /* Deliberately its own pair, not a reuse of --bad (means "wrong answer" a few hundred
     pixels away on the same screen), --flag-* (means "disputed source data" on the same
     meta row), or --ink-faint (already the OFF state of the neighboring star button). */
  --discard:      #5c6470;
  --discard-soft: #eef0f3;

  --serif: "Charter", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans:  "Inter", "Helvetica Neue", -apple-system, "Segoe UI", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:        #e8e9eb;
    --ink-soft:   #b7bcc3;
    --ink-faint:  #7a828c;
    --rule:       #33383f;
    --paper:      #16181b;
    --paper-soft: #1d2024;

    --accent:      #5fb8ba;
    --accent-soft: #10292a;
    --accent-line: #2a5254;

    --ok:          #6fce9a;
    --ok-soft:     #10261c;
    --ok-line:     #2c5c40;

    --bad:         #e8836c;
    --bad-soft:    #2c1712;
    --bad-line:    #6b3226;

    --pearl-bg:    #2a230f;
    --pearl-line:  #a67a2e;
    --pearl-ink:   #e0bf80;

    --trap-bg:     #2a1712;
    --trap-line:   #b4543f;
    --trap-ink:    #e5a493;

    --flag-bg:     #201d33;
    --flag-line:   #9a8ad6;

    --discard:      #9aa4b2;
    --discard-soft: #22262c;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper-soft);
}

a { color: inherit; }

header.topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1rem;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
header.topbar .brand {
  font-family: var(--sans); font-weight: 700; font-size: .95rem;
  color: var(--accent); letter-spacing: .01em; white-space: nowrap;
}
header.topbar nav { display: flex; gap: .35rem; flex-wrap: wrap; }
header.topbar nav a {
  font-family: var(--sans); font-size: .8rem; font-weight: 600;
  text-decoration: none; color: var(--ink-soft);
  padding: .35rem .6rem; border-radius: 8px;
}
header.topbar nav a.active { color: var(--accent); background: var(--accent-soft); }
header.topbar { flex-wrap: wrap; }   /* five nav items + a user chip won't fit on a phone */

.text-size-ctl { display: flex; gap: .3rem; }
.text-size-ctl button {
  font-family: var(--sans); font-weight: 700; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 8px;
  padding: .3rem .55rem; line-height: 1; cursor: pointer;
}
.text-size-ctl button:first-child { font-size: .72rem; }
.text-size-ctl button:last-child { font-size: .95rem; }
.text-size-ctl button:hover { background: var(--paper-soft); }
.text-size-ctl button:disabled { opacity: .4; cursor: default; }

.user-chip {
  display: flex; align-items: center; gap: .4rem;
  font-family: var(--sans); font-size: .78rem; color: var(--ink-faint);
}
.user-chip .who {
  font-weight: 700; color: var(--ink-soft); max-width: 9rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.user-chip .logout-btn {
  font-family: var(--sans); font-size: .74rem; font-weight: 600;
  color: var(--ink-soft); background: var(--paper);
  border: 1px solid var(--rule); border-radius: 8px;
  padding: .25rem .5rem; cursor: pointer;
}

main {
  max-width: 46rem;
  margin: 0 auto;
  padding: 1rem 1rem calc(4rem + env(safe-area-inset-bottom, 0));
}

.hidden { display: none !important; }

/* --------------------------------------------------------------- scope screen -- */

.section-title {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin: 1.5rem 0 .6rem;
}
.section-title:first-child { margin-top: .25rem; }

.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
@media (max-width: 480px) { .card-grid { grid-template-columns: 1fr; } }

.scope-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
  padding: .85rem 1rem; font-family: inherit; color: inherit;
}
.scope-card .title { font-family: var(--sans); font-weight: 700; font-size: .95rem; }
.scope-card .count {
  font-family: var(--sans); font-size: .78rem; color: var(--ink-faint); margin-top: .15rem;
}
.scope-card.review { border-color: var(--accent-line); background: var(--accent-soft); }
.scope-card.review .title { color: var(--accent); }
.scope-card.disabled { opacity: .5; pointer-events: none; }
/* Not ".scope-card .browse-link": app.js appends this link as a SIBLING of the card,
   not a child, so a descendant selector here never matched -- it rendered unstyled. */
.browse-link {
  display: inline-block; margin-top: .4rem; font-family: var(--sans);
  font-size: .76rem; font-weight: 600; color: var(--accent); text-decoration: none;
}

.resume-card {
  background: var(--pearl-bg); border: 1px solid var(--pearl-line);
  border-radius: 12px; padding: .85rem 1rem; margin-bottom: 1rem;
  font-family: var(--sans); font-size: .85rem; color: var(--pearl-ink);
  display: flex; justify-content: space-between; align-items: center; gap: .5rem;
}
.resume-card button {
  font-family: var(--sans); font-weight: 700; font-size: .8rem;
  background: var(--pearl-line); color: #fff; border: none; border-radius: 8px;
  padding: .4rem .8rem; cursor: pointer;
}

.session-options {
  display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; align-items: center;
  font-family: var(--sans); font-size: .82rem; color: var(--ink-soft);
  margin: .75rem 0 .25rem; padding: .75rem 1rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
}
.session-options label { display: flex; align-items: center; gap: .35rem; }
.session-options select, .session-options input {
  font-family: var(--sans); font-size: .82rem; padding: .35rem .5rem;
  border-radius: 6px; border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}

/* -------------------------------------------------------------- question screen -- */

.progress-strip {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--sans); font-size: .8rem; color: var(--ink-faint); margin-bottom: .5rem;
}
.progress-bar {
  height: 4px; background: var(--rule); border-radius: 2px; overflow: hidden; margin-bottom: .9rem;
}
.progress-bar > div { height: 100%; background: var(--accent); }

.meta-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap;
}
.meta-tags { display: flex; gap: .35rem; flex-wrap: wrap; }

.tag {
  font-family: var(--sans); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-line); border-radius: 10px;
  padding: .15rem .5rem; white-space: nowrap;
}
.tag.warn { color: var(--flag-line); background: var(--flag-bg); border-color: var(--flag-line); }

.icon-actions { display: flex; align-items: center; gap: .1rem; flex: 0 0 auto; }

.star-btn {
  background: none; border: none; cursor: pointer; font-size: 1.4rem; line-height: 1;
  color: var(--ink-faint); padding: .2rem;
}
.star-btn.on { color: var(--pearl-line); }

/* Deliberately identical geometry to .star-btn -- same ghost icon-button treatment,
   sitting immediately beside it. Only the glyph and the "on" color differ. */
.discard-btn {
  background: none; border: none; cursor: pointer; font-size: 1.35rem; line-height: 1;
  color: var(--ink-faint); padding: .2rem;
}
.discard-btn.on { color: var(--discard); }

.review-row.is-discarded { background: var(--discard-soft); border-color: var(--discard); }
.review-row.is-discarded .stem-preview { color: var(--ink-soft); }

figure.exhibit { text-align: center; margin: 0 0 .8rem; }
figure.exhibit img {
  max-width: 100%; max-height: 60vh; object-fit: contain;
  border: 1px solid var(--rule); border-radius: 6px; cursor: zoom-in;
}
.exhibit.missing {
  padding: .7rem; text-align: center; font-family: var(--sans); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; color: var(--flag-line);
  background: var(--flag-bg); border: 1px dashed var(--flag-line); border-radius: 6px;
  margin: 0 0 .8rem;
}

.zoom-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 1rem;
}
.zoom-overlay img { max-width: 100%; max-height: 100%; object-fit: contain; }

.stem { margin: 0 0 .9rem; }
.stem p { margin: 0 0 .5rem; }

.continues {
  font-family: var(--sans); font-size: .78rem; color: var(--accent);
  background: var(--accent-soft); border-left: 3px solid var(--accent-line);
  border-radius: 6px; padding: .4rem .6rem; margin: 0 0 .7rem;
}

ol.opts { list-style: none; margin: 0 0 .5rem; padding: 0; }
ol.opts li.opt {
  min-height: 3rem; display: flex; align-items: center; gap: .6rem;
  padding: .6rem .8rem; margin-bottom: .45rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  cursor: pointer; font-size: 1rem;
}
ol.opts li.opt:active { background: var(--paper-soft); }
ol.opts li.opt .lbl {
  font-family: var(--sans); font-weight: 700; color: var(--ink-faint);
  flex: 0 0 auto; width: 1.5rem; text-align: center;
}
ol.opts li.opt[disabled] { pointer-events: none; }
ol.opts li.opt.correct { background: var(--ok-soft); border-color: var(--ok-line); }
ol.opts li.opt.correct .lbl { color: var(--ok); }
ol.opts li.opt.wrong { background: var(--bad-soft); border-color: var(--bad-line); }
ol.opts li.opt.wrong .lbl { color: var(--bad); }
ol.opts li.opt .mark { margin-left: auto; font-weight: 700; }
ol.opts li.opt.correct .mark { color: var(--ok); }
ol.opts li.opt.wrong .mark { color: var(--bad); }

.reveal-link {
  display: block; text-align: center; font-family: var(--sans); font-size: .82rem;
  font-weight: 600; color: var(--ink-faint); margin: .3rem 0 1rem; cursor: pointer;
  background: none; border: none; width: 100%;
}

/* --------------------------------------------------------------- explanation -- */

.explanation { animation: fadein .15s ease-out; }
@keyframes fadein { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.verdict {
  display: block; font-style: italic; color: var(--ink-soft); margin: 0 0 .8rem;
}
.exp h5 {
  font-family: var(--sans); font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  margin: 1.1rem 0 .4rem;
}
.exp p { margin: 0 0 .5rem; }

ul.why { list-style: none; margin: 0; padding: 0; }
ul.why li { position: relative; padding-left: 1.8rem; margin-bottom: .5rem; }
ul.why li .lbl {
  position: absolute; left: 0; font-family: var(--sans); font-weight: 700; color: var(--trap-line);
}

.trap, .pearl, .disputed {
  border-radius: 0 8px 8px 0; padding: .6rem .8rem; margin: .9rem 0 0;
}
.trap { color: var(--trap-ink); background: var(--trap-bg); border-left: 3px solid var(--trap-line); }
.trap b, .pearl h6, .disputed b {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; margin-right: .4rem; display: inline-block;
}
.trap b { color: var(--trap-line); }
.pearl { background: var(--pearl-bg); border: 1px solid var(--pearl-line); border-left: 3px solid var(--pearl-line); }
.pearl h6 { color: var(--pearl-ink); margin: 0 0 .3rem; }
.pearl ul { margin: 0; padding-left: 1.1rem; }
.pearl li { color: var(--pearl-ink); margin-bottom: .3rem; }
.disputed { background: var(--flag-bg); border-left: 3px solid var(--flag-line); color: var(--flag-line); }
.disputed b { color: var(--flag-line); }
.disputed { color: var(--ink); }

strong { font-weight: 600; }

.sticky-next {
  position: sticky; bottom: 0; z-index: 5;
  background: linear-gradient(to top, var(--paper-soft) 60%, transparent);
  padding: .8rem 0 calc(.4rem + env(safe-area-inset-bottom, 0));
  display: flex; gap: .6rem; margin-top: 1rem;
}
button.btn {
  font-family: var(--sans); font-weight: 700; font-size: .92rem;
  border: none; border-radius: 10px; padding: .7rem 1rem; cursor: pointer;
  flex: 1;
}
button.btn.primary { background: var(--accent); color: #fff; }
button.btn.ghost { background: var(--paper); color: var(--ink-soft); border: 1px solid var(--rule); flex: 0 0 auto; }

/* --------------------------------------------------------------- review lists -- */

.review-row {
  display: flex; align-items: center; gap: .6rem;
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: .6rem .8rem; margin-bottom: .5rem;
}
.review-row .dot { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
.review-row .dot.ok { background: var(--ok); }
.review-row .dot.bad { background: var(--bad); }
.review-row .dot.none { background: var(--ink-faint); }
.review-row .dot.discard { background: var(--discard); }
.review-row .body { flex: 1 1 auto; min-width: 0; }
.review-row .stem-preview { font-size: .9rem; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-row .row-meta { font-family: var(--sans); font-size: .72rem; color: var(--ink-faint); margin-top: .1rem; }
.review-row .actions { display: flex; gap: .3rem; flex: 0 0 auto; }

/* Admin rows carry full names + several full-word buttons (Deactivate/Reset password/
   Delete), unlike the tiny single-glyph ★/⊘ actions review-row was built for -- let the
   name wrap instead of ellipsizing, and force actions onto their own full-width line
   rather than fighting them for space on one row. */
.review-row.admin-row { flex-wrap: wrap; }
.review-row.admin-row .stem-preview {
  white-space: normal; overflow: visible; text-overflow: clip; font-weight: 600;
}
.review-row.admin-row .actions { flex: 1 0 100%; flex-wrap: wrap; margin-top: .5rem; }
.review-row .actions button {
  font-family: var(--sans); font-size: .76rem; font-weight: 600;
  border: 1px solid var(--rule); background: var(--paper); border-radius: 8px;
  padding: .3rem .55rem; cursor: pointer;
}
.review-header {
  display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem;
}
.review-header button.btn { flex: 0 0 auto; }
.empty-state {
  font-family: var(--sans); font-size: .88rem; color: var(--ink-faint);
  text-align: center; padding: 2rem 1rem;
}

/* --------------------------------------------------------------------- stats -- */

.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-bottom: 1.2rem; }
@media (max-width: 480px) { .stat-tiles { grid-template-columns: repeat(2, 1fr); } }
.stat-tile {
  background: var(--paper); border: 1px solid var(--rule); border-radius: 10px;
  padding: .7rem .6rem; text-align: center;
}
.stat-tile .n { font-family: var(--sans); font-weight: 700; font-size: 1.3rem; color: var(--accent); }
.stat-tile .l { font-family: var(--sans); font-size: .68rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .05em; margin-top: .1rem; }

.bar-row { margin-bottom: .7rem; }
.bar-row .label { font-family: var(--sans); font-size: .8rem; margin-bottom: .25rem; display: flex; justify-content: space-between; }
.bar-row .bar { display: flex; height: .5rem; border-radius: 3px; overflow: hidden; background: var(--rule); }
.bar-row .bar .ok { background: var(--ok); }
.bar-row .bar .wrong { background: var(--bad); }
.bar-row .bar .unseen { background: transparent; }

.session-summary { text-align: center; padding: 1rem 0; }
.session-summary .score { font-family: var(--sans); font-weight: 700; font-size: 2rem; color: var(--accent); }
.session-summary .sub { font-family: var(--sans); color: var(--ink-faint); font-size: .85rem; margin-top: .2rem; }
.session-summary .actions { display: flex; gap: .6rem; margin-top: 1.2rem; }

/* -------------------------------------------------------------------- login screen -- */

.login-form {
  display: flex; flex-direction: column; gap: .7rem;
  max-width: 20rem; margin: 3rem auto 0; padding: 1.1rem 1.2rem;
  font-family: var(--sans); font-size: .85rem; color: var(--ink-soft);
  background: var(--paper); border: 1px solid var(--rule); border-radius: 12px;
}
.login-form .section-title { margin-top: 0; }
.login-form label { display: flex; flex-direction: column; gap: .25rem; }
.login-form input {
  font-family: var(--sans);
  font-size: 1rem;            /* >=16px: below this, iOS Safari zooms the page on focus */
  padding: .5rem .6rem; border-radius: 8px;
  border: 1px solid var(--rule); background: var(--paper); color: var(--ink);
}
.login-form input:focus { outline: 2px solid var(--accent-line); outline-offset: 1px; }
.login-form button.btn { flex: 0 0 auto; margin-top: .2rem; }
.login-hint { font-size: .76rem; color: var(--ink-faint); }
.login-error {
  font-size: .8rem; color: var(--bad); background: var(--bad-soft);
  border: 1px solid var(--bad-line); border-radius: 8px; padding: .45rem .6rem;
}