/* Passages and question groups: exam room, study cards, question cards on public pages. */
/* Passage + highlighting */
.passage { max-width: 70ch; user-select: text; -webkit-user-select: text; }
.passage h2 { font-size: 1.3rem; }
.passage p { margin-bottom: 1em; }
.passage .para-label { font-weight: 800; margin-right: .5em; }
mark.hl { background: var(--highlight); color: inherit; cursor: pointer; border-radius: 2px; }
.hl-tool { position: fixed; z-index: 30; transform: translate(-50%, -100%); }

/* Questions */
.q-group { margin: 24px 0; }
.q-instructions { font-weight: 600; }
.q-group-title { font-size: 1.05rem; text-align: center; padding: 8px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.opt-legend { list-style: none; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-small); }
.opt-legend li { margin: 2px 0; }
.question {
  display: grid; grid-template-columns: 44px 1fr; gap: 10px;
  padding: 12px 8px; border-radius: var(--radius-small); scroll-margin-top: 16px;
}
.question.is-current { background: #f2f6fc; box-shadow: inset 3px 0 0 var(--focus); }
.q-head { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.q-num {
  min-width: 34px; height: 34px; padding: 0 6px; display: grid; place-items: center;
  border: 2px solid var(--primary); border-radius: var(--radius-small); font-weight: 800; font-size: .9rem;
}
.flag-btn {
  width: 34px; height: 30px; border: 1px solid var(--border); border-radius: var(--radius-small);
  background: var(--surface); color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1;
}
.flag-btn.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.q-prompt { margin-bottom: 8px; }
.options { display: grid; gap: 6px; }
.option {
  display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; font-weight: 400;
  border: 1px solid var(--border); border-radius: var(--radius-small); cursor: pointer; background: var(--surface);
}
.option:has(input:checked) { border-color: var(--primary); background: #eef3f8; }
.option input { margin-top: .3em; width: 18px; height: 18px; flex: none; }
.option .opt-id { font-weight: 800; min-width: 1.4em; }
.options.inline { grid-template-columns: repeat(auto-fit, minmax(110px, max-content)); }
input.gap { display: inline-block; width: 12em; max-width: 100%; min-height: 36px; margin: 0 .3em; padding: .2em .5em; }
.q-body select { max-width: 260px; }