/* Module picker + score report. These are our own screens, so they borrow the
   Bluebook palette without pretending to be a Bluebook screen. */

.page { max-width: 1080px; margin: 0 auto; padding: 34px 26px 70px; }
.page h1 { font-size: 30px; margin: 0 0 6px; }
.page .sub { color: var(--ink-soft); margin: 0 0 26px; font-size: 15px; }

.topbar {
  background: var(--band); border-bottom: 2px dashed var(--band-line);
  padding: 14px 26px; display: flex; align-items: center; gap: 18px;
}
.topbar .brand { font-weight: 700; font-size: 18px; }
.topbar .spacer { flex: 1; }
.topbar a { color: var(--blue); font-weight: 600; text-decoration: none; font-size: 15px; }
.topbar a:hover { text-decoration: underline; }

.modgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; }
.modcard {
  border: 1px solid #cfd4e4; border-radius: 10px; padding: 14px 16px;
  background: #fff; text-align: left; display: flex; flex-direction: column; gap: 6px;
}
.modcard:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(28,78,216,.12); }
.modcard .name { font-weight: 700; font-size: 17px; }
.modcard .meta { font-size: 13px; color: var(--ink-soft); }
.modcard .score { font-size: 13px; font-weight: 700; }
.modcard .bar { height: 6px; border-radius: 3px; background: #e6e6ee; overflow: hidden; }
.modcard .bar i { display: block; height: 100%; background: var(--blue); }
.modcard.untouched .score { color: var(--ink-soft); font-weight: 400; }

.summary { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 26px; }
.stat {
  border: 1px solid #cfd4e4; border-radius: 10px; padding: 16px 22px; min-width: 150px;
}
.stat .big { font-size: 30px; font-weight: 700; }
.stat .lbl { font-size: 13px; color: var(--ink-soft); }
.stat.good .big { color: var(--green); }
.stat.bad .big { color: var(--red); }

.section-title { font-size: 20px; margin: 30px 0 12px; }

.bars { display: flex; flex-direction: column; gap: 10px; }
.barrow { display: grid; grid-template-columns: 250px 1fr 84px; gap: 14px; align-items: center; }
.barrow .nm { font-size: 14px; }
.barrow .track { height: 20px; background: #ebedf3; border-radius: 4px; overflow: hidden; }
.barrow .track i { display: block; height: 100%; background: var(--blue); }
.barrow .track i.weak { background: var(--red); }
.barrow .track i.mid { background: #d9a406; }
.barrow .track i.strong { background: var(--green); }
.barrow .val { font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }

.filters { display: flex; gap: 10px; margin: 22px 0 16px; flex-wrap: wrap; }
.chip {
  border: 1px solid #c3c9dc; background: #fff; border-radius: 999px;
  padding: 7px 16px; font-size: 14px;
}
.chip.on { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 600; }

.qcard { border: 1px solid #d5d9e6; border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.qcard > summary {
  list-style: none; cursor: pointer; padding: 13px 18px; display: flex;
  align-items: center; gap: 14px; background: #fafbfe;
}
.qcard > summary::-webkit-details-marker { display: none; }
.qcard[open] > summary { border-bottom: 1px solid #e3e6f0; }
.qcard .idx { font-weight: 700; width: 30px; }
.qcard .tag { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: #eef0f7; }
.qcard .verdict { margin-left: auto; font-weight: 700; font-size: 14px; }
.qcard .verdict.ok { color: var(--green); }
.qcard .verdict.no { color: var(--red); }
.qcard .verdict.skip { color: var(--ink-soft); }
.qcard .inner { padding: 18px 22px 24px; }

.answers { display: flex; gap: 26px; flex-wrap: wrap; margin: 16px 0 8px; font-family: var(--serif); font-size: 16px; }
.answers .lab { font-family: var(--sans); font-size: 12px; color: var(--ink-soft); display: block; }
.answers .yours.no { color: var(--red); }
.answers .right { color: var(--green); font-weight: 700; }

.review-choice { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line);
  border-radius: 9px; padding: 10px 15px; margin-bottom: 9px; }
.review-choice .letter { width: 26px; height: 26px; border: 1px solid var(--ink);
  border-radius: 50%; display: grid; place-items: center; font-size: 14px; flex: none;
  font-family: var(--serif); }
.review-choice .ctext { font-family: var(--serif); font-size: 16px; }
.review-choice .ctext p { margin: 0; }
.review-choice.is-correct { border: 2px solid var(--green); background: #f2fbf4; padding: 9px 14px; }
.review-choice.is-correct .letter { background: var(--green); border-color: var(--green); color: #fff; }
.review-choice.is-wrong { border: 2px solid var(--red); background: #fdf3f2; padding: 9px 14px; }
.review-choice.is-wrong .letter { background: var(--red); border-color: var(--red); color: #fff; }
.review-choice .badge { margin-left: auto; font-size: 12px; font-weight: 700; }

.rationale {
  font-family: var(--serif); font-size: 16px; line-height: 1.6;
  background: #f7f8fc; border-left: 4px solid var(--blue);
  padding: 15px 18px; border-radius: 0 6px 6px 0; margin-top: 16px;
}
.rationale h4 { font-family: var(--sans); font-size: 13px; text-transform: uppercase;
  letter-spacing: .6px; color: var(--ink-soft); margin: 0 0 8px; }
.rationale p { margin: 0 0 11px; }
.rationale p:last-child { margin-bottom: 0; }
/* A handful of source explanations name the wrong choice letter; extraction
   flags those so the reader isn't left with a contradiction. */
.rationale .rat-warning {
  font-family: var(--sans); font-size: 14px; background: #fff5e0;
  border: 1px solid #e0a83a; border-radius: 6px; padding: 10px 12px;
}

/* ---------- profile picker ---------- */

.page.picker { max-width: 720px; padding-top: 90px; text-align: center; }
.page.picker h1 { font-size: 34px; }
.page.picker .sub { margin-bottom: 40px; }
.profilegrid { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.profilecard {
  width: 210px; background: #fff; border: 1px solid #cfd4e4; border-radius: 14px;
  padding: 26px 18px; display: flex; flex-direction: column; align-items: center;
  gap: 10px;
}
.profilecard:hover { border-color: var(--blue); box-shadow: 0 4px 18px rgba(28,78,216,.16); }
.avatar {
  width: 76px; height: 76px; border-radius: 50%; background: var(--blue);
  color: #fff; display: grid; place-items: center; font-size: 32px; font-weight: 700;
}
/* Second user gets its own colour so the two are distinguishable at a glance. */
.profilecard:nth-child(2) .avatar { background: #1a7f37; }
.profilecard .pname { font-size: 18px; font-weight: 700; }
.profilecard .phint { font-size: 13px; color: var(--ink-soft); }

.topbar .whoami { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; }
.avatar.sm {
  width: 26px; height: 26px; font-size: 13px; border-radius: 50%;
  background: var(--blue); color: #fff; display: grid; place-items: center;
  font-weight: 700;
}
/* Match the picker, where the second user is green. */
.avatar.sm[data-user="b"] { background: #1a7f37; }

/* ---------- miss map (green/red per-question grid) ---------- */

.missmap { display: flex; flex-direction: column; gap: 8px; }
.misslegend { display: flex; gap: 22px; font-size: 12px; color: var(--ink-soft);
  margin-bottom: 4px; align-items: center; }
.misslegend > span { display: inline-flex; align-items: center; gap: 7px; }
.misslegend .mcell { width: 12px; height: 12px; }
.missrow { display: grid; grid-template-columns: 92px 1fr 52px; gap: 12px;
  align-items: center; }
.missrow .mlabel { font-size: 12px; color: var(--ink-soft); }
.missrow .mscore { font-size: 12px; color: var(--ink-soft); text-align: right;
  font-variant-numeric: tabular-nums; }
.mcells { display: flex; flex-wrap: wrap; gap: 4px; }
.mcell { width: 18px; height: 18px; border-radius: 3px; display: inline-block; }
.mcell.ok { background: #eaf3de; border: 1px solid #3b6d11; }
.mcell.no { background: #fcebeb; border: 1px solid #a32d2d; }
.mcell.blank { background: #fff; border: 1px dashed #a32d2d; }

.empty { color: var(--ink-soft); font-size: 15px; padding: 20px 0; }
table.hist { width: 100%; border-collapse: collapse; font-size: 14px; }
table.hist th, table.hist td { text-align: left; padding: 9px 12px; border-bottom: 1px solid #e6e8f0; }
table.hist th { font-size: 12px; text-transform: uppercase; color: var(--ink-soft); letter-spacing: .5px; }
table.hist a { color: var(--blue); font-weight: 600; text-decoration: none; }