/**
 * LumorowLMS — Duolingo Read & Complete frontend styles
 * Layout/feel adapted from Duolingo DET; brand orange via shared.css vars.
 */

.llmsb-drc-block {
    background: #fff;
    border: 1px solid var(--llmsb-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.05);
    margin-bottom: 2rem;
}

.llmsb-drc-task {
    padding: 0;
}
.llmsb-drc-task.hidden { display: none; }

/* ── Header (timer + task num) ──────────────────── */
.llmsb-drc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    border-bottom: 1px solid var(--llmsb-border);
    background: #fff;
    gap: 16px;
}
.llmsb-drc-timer {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--llmsb-mid);
    font-size: 1rem;
}
.llmsb-drc-timer-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--llmsb-mid); }
.llmsb-drc-timer-val {
    color: var(--llmsb-dark);
    font-weight: 800;
    font-size: 1.05rem;
    font-variant-numeric: tabular-nums;
}
.llmsb-drc-timer-label { color: var(--llmsb-muted); font-size: .9rem; }
.llmsb-drc-task.llmsb-drc-timer--low .llmsb-drc-timer-val { color: var(--llmsb-primary); }
.llmsb-drc-task.llmsb-drc-timer--up  .llmsb-drc-timer-val { color: var(--llmsb-wrong); }
.llmsb-drc-task-num {
    font-size: .85rem;
    color: var(--llmsb-muted);
    font-weight: 600;
}

/* ── Instruction + passage title ────────────────── */
.llmsb-drc-instruction {
    text-align: center;
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--llmsb-dark);
    margin: 40px 24px 28px;
}
.llmsb-drc-passage-title {
    text-align: center;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--llmsb-dark);
    margin: 0 24px 22px;
}

/* ── Passage layout ─────────────────────────────── */
.llmsb-drc-passage {
    max-width: 880px;
    margin: 0 auto 32px;
    padding: 0 24px;
    color: var(--llmsb-dark);
    font-size: 1.1rem;
    line-height: 2.4;          /* extra room for cells inline */
    text-align: left;
}
.llmsb-drc-passage p { margin: 0 0 1rem; }
.llmsb-drc-passage p:last-child { margin-bottom: 0; }

/* ── Blank word: row of cells ───────────────────── */
.llmsb-drc-word {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    margin: 0 2px;
    vertical-align: -3px;       /* nudge to align with surrounding text baseline */
}
.llmsb-drc-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 28px;
    line-height: 1;
    background: #fff;
    border: 1.5px solid #d6d6db;
    border-radius: 4px;
    font: inherit;
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
    color: var(--llmsb-dark);
    padding: 0;
    text-align: center;
    box-sizing: border-box;
    text-transform: lowercase;
}
.llmsb-drc-cell.given {
    color: var(--llmsb-dark);
    cursor: default;
}
input.llmsb-drc-cell {
    appearance: none;
    -webkit-appearance: none;
    outline: none;
    transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
    caret-color: var(--llmsb-primary);
}
input.llmsb-drc-cell:focus {
    border-color: var(--llmsb-primary);
    background: var(--llmsb-primary-pale);
    box-shadow: 0 0 0 2px rgba(247, 114, 5, .25);
}
input.llmsb-drc-cell.filled { background: #f9fafb; }
input.llmsb-drc-cell:disabled { background: #f9fafb; color: var(--llmsb-muted); }

/* Revealed (after Check Answers) — per-cell colour + a tooltip-ish badge on the word. */
input.llmsb-drc-cell.correct {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
    box-shadow: none;
}
input.llmsb-drc-cell.incorrect {
    background: #fee2e2;
    border-color: #dc2626;
    color: #991b1b;
    box-shadow: none;
}

/* ── Results panel (per-task table) ─────────────── */
.llmsb-drc-results[hidden] { display: none; }
.llmsb-drc-results {
    margin: 8px 24px 24px;
    border-top: 1px solid var(--llmsb-border);
    padding-top: 16px;
}
.llmsb-drc-results-table {
    width: 100%;
    max-width: 720px;
    margin: 0 auto;
    border-collapse: collapse;
    font-size: .92rem;
}
.llmsb-drc-results-table th,
.llmsb-drc-results-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--llmsb-border);
    text-align: left;
}
.llmsb-drc-results-table th {
    background: #f9fafb;
    color: var(--llmsb-muted);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.llmsb-drc-results-table td.n    { color: var(--llmsb-muted); width: 36px; }
.llmsb-drc-results-table td.word { font-weight: 600; }
.llmsb-drc-results-table td.word strong { color: var(--llmsb-primary); }
.llmsb-drc-results-table td.you  { color: var(--llmsb-dark); }
.llmsb-drc-results-table tr.ok td.mark { color: var(--llmsb-correct); font-weight: 800; }
.llmsb-drc-results-table tr.no td.mark { color: var(--llmsb-wrong);   font-weight: 800; }

/* ── Check button + score ─────────────────────────
   .llmsb-drc-check inherits the standard centered .llmsb-check-btn
   style from shared.css — do NOT override width here, the global
   standard is a normal-sized centered button on every block. */
.llmsb-drc-score { margin: 0 22px 22px; }

/* ── Responsive ─────────────────────────────────── */
@media (max-width: 520px) {
    .llmsb-drc-instruction { font-size: 1.15rem; margin: 24px 16px 16px; }
    .llmsb-drc-passage     { font-size: 1rem; line-height: 2.2; padding: 0 16px; }
    .llmsb-drc-cell        { width: 18px; height: 24px; font-size: .9rem; }
}