/* r3-exam: exam mode, integrity panel, similarity check and question analytics. Colours come from the theme variables. */

.r3x__note { color: var(--muted); font-size: 13px; margin: 6px 0; }
.r3x__hidden { display: none; }

/* Exam room: fills the quiz page under its header and scrolls in its body, like the ordinary quiz. */
.r3x { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.r3x__window { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; color: var(--muted); font-size: 14px; margin: 8px 0; }
.r3x__rules-title { font-size: 15px; margin: 16px 0 6px; }
.r3x__rules { list-style: none; padding: 0; margin: 0 auto 16px; max-width: 520px; text-align: left; display: grid; gap: 6px; }
.r3x__rules li { padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.r3x__consent { max-width: 640px; text-align: left; }
.r3x__consent .take__intro-head, .r3x__consent .take__intro-icon { text-align: center; }
.r3x__consent-list { display: grid; gap: 4px; margin: 12px 0; }
.r3x__consent-list dt { font-weight: 600; margin-top: 8px; }
.r3x__consent-list dd { margin: 0; color: var(--ink); }
.r3x__status { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px 16px; border-bottom: 1px solid var(--line); }
.r3x__badge { font-weight: 600; color: var(--brand-ink); }
.r3x__cam { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; margin-left: auto; }
.r3x__preview { width: 64px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--bg); }
.r3x__preview--large { width: 240px; height: 180px; display: block; margin: 12px auto; }
.r3x__body--nocopy { -webkit-user-select: none; user-select: none; }
.r3x__body--nocopy textarea, .r3x__body--nocopy input { -webkit-user-select: text; user-select: text; }
.r3x__gate { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 16px;
    background: color-mix(in srgb, var(--ink) 55%, transparent); }
.r3x__gate-box { max-width: 440px; width: 100%; padding: 24px; border-radius: 16px; background: var(--bg); color: var(--ink); text-align: center;
    display: grid; gap: 12px; border: 1px solid var(--line); }

/* Exam settings in the quiz editor */
.r3x-settings input[type="datetime-local"] { width: 100%; }

/* Integrity panel */
.r3x-integrity { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.r3x-integrity__title { font-size: 16px; margin-bottom: 4px; }
.r3x-integrity__sub { font-size: 14px; margin: 12px 0 6px; }
.r3x-integrity__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.r3x-timeline { list-style: none; margin: 0; padding: 0 0 0 12px; border-left: 2px solid var(--line); display: grid; gap: 4px; max-height: 260px; overflow: auto; }
.r3x-timeline__item { display: flex; gap: 10px; font-size: 13px; }
.r3x-timeline__item time { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 64px; }
.r3x-timeline__item--flag span { font-weight: 600; }
.r3x-snapshots { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.r3x-snapshots__item { margin: 0; }
.r3x-snapshots__item img { width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line); display: block; }
.r3x-snapshots__item figcaption { font-size: 12px; color: var(--muted); text-align: center; }

/* Similarity */
.r3x-sim { margin: 10px 0; display: grid; gap: 6px; font-size: 14px; }
.r3x-sim__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.r3x-sim__muted { color: var(--muted); }
.r3x-sim__ai { margin-left: auto; }
.r3x-sim__matches { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.r3x-sim__matches li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.r3x-sim__compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.r3x-sim__col { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--bg); min-width: 0; }
.r3x-sim__colhead { font-weight: 600; margin-bottom: 6px; }
.r3x-sim__text { white-space: pre-wrap; overflow-wrap: anywhere; max-height: 320px; overflow: auto; line-height: 1.5; }
.r3x-sim__text mark { background: color-mix(in srgb, var(--brand) 22%, transparent); color: inherit; border-radius: 3px; }
.r3x-sim__hint { border: 1px dashed var(--line); border-radius: 10px; padding: 10px; display: grid; gap: 6px; }
.r3x-sim__hint ul { margin: 0; padding-left: 18px; }

/* Question analytics */
.r3x-qa { display: grid; gap: 8px; margin: 12px 0; }
.r3x-qa__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.r3x-qa__title { font-size: 17px; margin: 0; }
.r3x-qa__meta { color: var(--muted); font-size: 13px; }
.r3x-qa__head .btn { margin-left: auto; }
.r3x-qa__table td { vertical-align: top; }
.r3x-qa__toggle { text-align: left; }
.r3x-qa__type { display: block; color: var(--muted); font-size: 12px; }
.r3x-qa__opttable { width: 100%; border-collapse: collapse; font-size: 13px; }
.r3x-qa__opttable th, .r3x-qa__opttable td { text-align: left; padding: 4px 6px; border-bottom: 1px solid var(--line); }
.r3x-qa__bar { display: inline-block; width: 80px; height: 8px; border-radius: 4px; background: var(--line); vertical-align: middle; overflow: hidden; margin-right: 6px; }
.r3x-qa__bar span { display: block; height: 100%; background: var(--brand); }

@media (max-width: 640px) {
    .r3x__cam { margin-left: 0; }
    .r3x-qa__head .btn { margin-left: 0; }
}