/* ═══════════════════════════════════════════════════════════════════════════
   classreviews.css — the Class reviews tab (Run 53, E4). Rendered by
   classreviews.js. Dark-only, like the rest of the panel.
   ⚠ Transcript text is UNTRUSTED and very often Arabic inside this English
   page: every line, quote and note carries dir="auto" in the markup AND
   `unicode-bidi: plaintext` here, so each one takes its direction from its own
   first strong letter instead of the page's (the plan's §8 rule).
   ⚠ No list here is a `.data-table`: a chip inside a truncating cell paints
   nothing while every DOM assertion passes (Run 33/36) — rows wrap instead.
   ═══════════════════════════════════════════════════════════════════════════ */

.cr-root { display: block; }
.cr-card .panel-header { gap: var(--space-md); flex-wrap: wrap; }
.cr-card .panel-body > * + * { margin-top: var(--space-md); }
.cr-muted { color: var(--text-secondary); font-size: 0.84rem; }
.cr-error { color: #FCA5A5; font-size: 0.86rem; line-height: 1.5; }
.cr-notice {
    color: #FCD34D; font-size: 0.86rem; line-height: 1.5; margin-bottom: var(--space-md);
    padding: 10px 12px; border-radius: var(--radius-sm);
    background: rgba(245, 158, 11, 0.10); border: 1px solid rgba(245, 158, 11, 0.25);
}
.cr-card + .cr-notice { margin-top: var(--space-md); }   /* Run 61: the notice under the settings card no longer touches it */
.cr-head-meta { color: var(--text-secondary); font-size: 0.84rem; }
.cr-text { unicode-bidi: plaintext; }

/* ── chips ── */
.cr-chip {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 0.72rem; font-weight: 600; font-family: var(--font-display); letter-spacing: 0.02em;
    white-space: nowrap; vertical-align: middle;
    background: rgba(148, 163, 194, 0.15); color: #C3CAE0;
}
.cr-chip-ok { background: rgba(34, 197, 94, 0.15); color: #4ADE80; }
.cr-chip-warn { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.cr-chip-bad { background: rgba(239, 68, 68, 0.15); color: #F87171; }
.cr-chip-live { background: rgba(99, 102, 241, 0.18); color: #A5A8FF; }

/* ── review settings (full access) ── */
.cr-settings { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-md) var(--space-xl); }
.cr-settings > * + * { margin-top: 0 !important; }
.cr-field .detail-label, .cr-flag-form .detail-label { display: block; width: auto; margin-bottom: 6px; }
.cr-field .filter-select { min-width: 260px; max-width: 100%; }
.cr-settings-hint { flex-basis: 100%; }
.cr-settings > .cr-notice, .cr-settings > .cr-error { flex-basis: 100%; margin-bottom: 0; }
.cr-root .seg-btn:disabled, .cr-root .filter-select:disabled { opacity: 0.45; cursor: not-allowed; }
/* Run 61 — the keeping period (full access): number box + "days" + Save */
.cr-days { display: flex; align-items: center; gap: 8px; }
.cr-days-input { width: 96px; flex: 0 0 auto; }
.cr-days-unit { color: var(--text-secondary); font-size: 0.86rem; }
.cr-root .cr-days-input:disabled, .cr-root #crDaysSave:disabled { opacity: 0.45; cursor: not-allowed; }

/* ── list ── */
.cr-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); }
.cr-search { flex: 1 1 260px; min-width: 0; max-width: 420px; }
.cr-list { list-style: none; display: flex; flex-direction: column; gap: var(--space-sm); }
.cr-row {
    display: grid; width: 100%; text-align: left; cursor: pointer;
    grid-template-columns: minmax(160px, 1.1fr) minmax(200px, 2fr) auto; gap: 6px var(--space-lg); align-items: center;
    padding: 14px 16px; border-radius: var(--radius-md);
    background: rgba(17, 24, 39, 0.5); border: 1px solid var(--border-default);
    color: var(--text-primary); font: inherit; font-size: 0.88rem;
    transition: border-color var(--duration-fast), background var(--duration-fast);
}
.cr-row:hover, .cr-row:focus-visible { border-color: rgba(123, 128, 212, 0.45); background: rgba(46, 49, 146, 0.08); outline: none; }
.cr-row-head, .cr-row-people { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-label { font-family: var(--font-display); font-weight: 600; font-size: 0.98rem; }
.cr-when { color: var(--text-secondary); font-size: 0.82rem; }
.cr-row-who { overflow-wrap: anywhere; }
.cr-row-chips { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.cr-empty { padding: var(--space-2xl) var(--space-lg); }

/* ── one class ── */
.cr-back-row { margin-bottom: var(--space-md); }
.cr-kv { display: flex; gap: var(--space-md); font-size: 0.88rem; line-height: 1.5; }
.cr-kv + .cr-kv { margin-top: 6px !important; }
.cr-kv > span:first-child { flex: 0 0 120px; color: var(--text-secondary); }
.cr-kv > span:last-child { color: var(--text-primary); min-width: 0; overflow-wrap: anywhere; }
.cr-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.cr-meta { display: flex; flex-wrap: wrap; gap: 4px var(--space-lg); color: var(--text-secondary); font-size: 0.84rem; }

/* flags */
.cr-flag {
    padding: 14px 16px; border-radius: var(--radius-md);
    background: rgba(16, 20, 40, 0.6); border: 1px solid var(--border-default); border-left: 3px solid #F87171;
}
.cr-flag + .cr-flag { margin-top: var(--space-md); }
.cr-flag-confirmed { border-left-color: #FBBF24; }
.cr-flag-dismissed, .cr-flag-superseded { border-left-color: rgba(148, 163, 194, 0.45); }
.cr-flag > * + * { margin-top: var(--space-sm); }
.cr-flag-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px var(--space-md); }
.cr-flag-cat { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--text-primary); }
.cr-flag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-flag-where { font-size: 0.86rem; color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cr-goto { background: none; border: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent-light); cursor: pointer; }
.cr-goto:hover { text-decoration: underline; }
.cr-quote {
    margin-left: 0; margin-right: 0; padding: 10px 14px; border-radius: var(--radius-sm);
    background: rgba(239, 68, 68, 0.07); border-inline-start: 3px solid rgba(248, 113, 113, 0.6);
    color: var(--text-primary); font-size: 0.95rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere;
}
.cr-unverified { color: #FCD34D; font-size: 0.82rem; line-height: 1.5; }
.cr-why { color: var(--text-primary); font-size: 0.88rem; line-height: 1.55; }
.cr-handled { color: var(--text-secondary); font-size: 0.84rem; line-height: 1.5; }
.cr-flag-form { display: flex; flex-direction: column; gap: 8px; }
.cr-note { min-height: 70px; }

/* roles */
.cr-role {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    font-family: var(--font-display); vertical-align: middle; white-space: nowrap;
    background: rgba(148, 163, 194, 0.15); color: #C3CAE0;
}
.cr-role-teacher { background: rgba(99, 102, 241, 0.18); color: #A5A8FF; }
.cr-role-student { background: rgba(34, 197, 94, 0.13); color: #86EFAC; }
.cr-role-host_account { background: rgba(245, 158, 11, 0.15); color: #FBBF24; }
.cr-role-staff { background: rgba(56, 189, 248, 0.15); color: #7DD3FC; }   /* Run 61: a Jam3ah staff member in a classroom class */

/* Run 61 — an UNCLEAR classroom line (low-confidence speech-to-text): marked
   with the word "Unclear" (not colour alone) and muted; never evidence. */
.cr-unclear {
    display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 600;
    font-family: var(--font-display); vertical-align: middle; white-space: nowrap;
    border: 1px dashed rgba(155, 163, 194, 0.55); color: var(--text-secondary); background: transparent;
}
.cr-seg-unclear .cr-seg-text { color: var(--text-secondary); font-style: italic; }

/* transcript */
.cr-transcript { list-style: none; display: flex; flex-direction: column; }
.cr-seg {
    display: grid; grid-template-columns: 44px 1fr; gap: 10px; padding: 8px 6px;
    border-bottom: 1px solid rgba(148, 163, 194, 0.07); border-radius: 6px;
    transition: background 0.4s;
}
.cr-seg-min { color: var(--text-secondary); font-size: 0.78rem; font-variant-numeric: tabular-nums; padding-top: 2px; text-align: right; }
.cr-seg-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cr-seg-who { font-size: 0.8rem; font-weight: 600; color: var(--text-primary); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cr-seg-text { display: block; color: var(--text-primary); font-size: 0.92rem; line-height: 1.6; overflow-wrap: anywhere; }
.cr-seg-hit { background: rgba(245, 158, 11, 0.16); }

@media (max-width: 900px) {
    .cr-row { grid-template-columns: 1fr; }
    .cr-row-chips { justify-content: flex-start; }
}
@media (max-width: 600px) {
    .cr-kv { flex-direction: column; gap: 0; }
    .cr-kv > span:first-child { flex: none; }
    .cr-field, .cr-field .filter-select { width: 100%; min-width: 0; }
    .cr-search { max-width: none; flex-basis: 100%; }
    .cr-seg { grid-template-columns: 34px 1fr; gap: 8px; }
}