/**
 * LumorowLMS — CELPIP Reading frontend styles.
 * Layout based on CELPIP's two-pane look (source left, questions right).
 * Brand orange via shared.css custom properties.
 */

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

/* ── Header row ───────────────────────────────────── */
.llmsb-cpr-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f3f4f6;
    border-bottom: 1px solid var(--llmsb-border);
    padding: 12px 18px;
    gap: 16px;
}
.llmsb-cpr-title {
    color: var(--llmsb-dark);
    font-weight: 600;
    font-size: 1rem;
}
.llmsb-cpr-timer {
    color: var(--llmsb-mid);
    font-size: .92rem;
    white-space: nowrap;
}
.llmsb-cpr-timer-val { color: var(--llmsb-dark); font-weight: 700; }
.llmsb-cpr-timer--low .llmsb-cpr-timer-val { color: var(--llmsb-primary); }
.llmsb-cpr-timer--up .llmsb-cpr-timer-val  { color: var(--llmsb-wrong); }
.llmsb-cpr-timer--up .llmsb-cpr-timer::after {
    content: ' — time\'s up, finish when ready';
    color: var(--llmsb-wrong);
    font-style: italic;
    font-weight: 500;
}

/* ── Two-pane layout ──────────────────────────────── */
.llmsb-cpr-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.llmsb-cpr-source {
    background: #fff;
    padding: 20px 22px;
    border-right: 1px solid var(--llmsb-border);
    line-height: 1.65;
    color: var(--llmsb-dark);
    font-size: .95rem;
}
.llmsb-cpr-questions {
    background: var(--llmsb-primary-pale);
    padding: 20px 22px;
    line-height: 1.6;
    color: var(--llmsb-dark);
    font-size: .95rem;
}

/* ── Instructions (info pill style) ──────────────── */
.llmsb-cpr-instruction {
    color: var(--llmsb-primary-dk);
    font-weight: 600;
    font-size: .95rem;
    margin: 0 0 12px;
    position: relative;
    padding-left: 26px;
    line-height: 1.45;
}
.llmsb-cpr-instruction::before {
    content: 'i';
    position: absolute;
    left: 0;
    top: 1px;
    width: 18px;
    height: 18px;
    background: var(--llmsb-primary);
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 18px;
    font-style: italic;
    font-family: serif;
    font-weight: 700;
    font-size: .8rem;
}

/* ── Source content variations ───────────────────── */
.llmsb-cpr-source-body p { margin: 0 0 .85rem; }
.llmsb-cpr-source-body p:last-child { margin-bottom: 0; }

.llmsb-cpr-para { margin-bottom: 1rem; }
.llmsb-cpr-para:last-child { margin-bottom: 0; }
.llmsb-cpr-para-label { font-weight: 700; color: var(--llmsb-primary); }

.llmsb-cpr-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.llmsb-cpr-card {
    background: #f9fafb;
    border: 1px solid var(--llmsb-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.llmsb-cpr-card-title {
    font-weight: 700;
    color: var(--llmsb-primary);
    font-size: 1rem;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.llmsb-cpr-card-details {
    list-style: disc;
    padding-left: 18px;
    margin: 0;
    color: var(--llmsb-mid);
    font-size: .9rem;
}
.llmsb-cpr-card-details li { margin-bottom: 3px; }

/* ── Question groups + lists ──────────────────────── */
.llmsb-cpr-group {
    background: #fff;
    border: 1px solid var(--llmsb-border);
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 14px;
}
.llmsb-cpr-group:last-child { margin-bottom: 0; }

.llmsb-cpr-q-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    counter-reset: cpr-q;
}
/* Inline flow (was display:flex/flex-wrap). With flex-wrap, when the
   question text was long enough to need 2 lines, the dropdown got
   bumped to its own row below — opening a full line-height gap
   between the text and the dropdown. Block layout with inline-block
   children lets the dropdown sit at the end of the wrapped text. */
.llmsb-cpr-q {
    display: block;
    position: relative;
    padding-left: 1.8em;
    counter-increment: cpr-q;
}
.llmsb-cpr-q::before {
    content: counter(cpr-q) '.';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 700;
    color: var(--llmsb-mid);
}
.llmsb-cpr-q-text { /* flows inline alongside the dropdown */ }
.llmsb-cpr-q--match .llmsb-cpr-q-text { padding-left: 0; }

.llmsb-cpr-cloze p {
    margin: 0 0 1rem;
    line-height: 1.85;
}
.llmsb-cpr-cloze p:last-child { margin-bottom: 0; }

/* ── Custom dropdown ──────────────────────────────── */
.llmsb-cpr-q-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    min-width: 110px;
    margin: 0 2px;
}
.llmsb-cpr-dd-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    min-width: 110px;
    padding: 4px 10px;
    background: #fff;
    border: 1px solid #94a3b8;
    border-radius: 4px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--llmsb-dark);
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,.04);
}
.llmsb-cpr-dd-trigger:hover:not(:disabled) {
    border-color: var(--llmsb-primary);
}
.llmsb-cpr-dd-trigger:focus-visible {
    outline: 2px solid var(--llmsb-primary);
    outline-offset: 1px;
}
.llmsb-cpr-dd-value {
    flex: 1 1 auto;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 280px;
}
.llmsb-cpr-q-dropdown.has-value .llmsb-cpr-dd-trigger {
    background: #e0f2fe;
    border-color: #0284c7;
    color: var(--llmsb-dark);
}
.llmsb-cpr-dd-arrow {
    color: var(--llmsb-mid);
    font-size: .75rem;
    line-height: 1;
}
.llmsb-cpr-dd-trigger:disabled { cursor: not-allowed; opacity: .85; }

.llmsb-cpr-dd-popover {
    position: absolute;
    top: calc(100% + 4px);
    /* Anchor to the trigger's RIGHT edge so the popover grows
       leftward. Triggers sit at the right side of each question,
       so anchoring left (the previous default) made the options
       extend off the right side of the viewport and get clipped. */
    right: 0;
    left: auto;
    z-index: 50;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,.12);
    padding: 6px;
    min-width: 220px;
    max-width: 380px;
    display: none;
}
.llmsb-cpr-q-dropdown.open .llmsb-cpr-dd-popover { display: block; }

.llmsb-cpr-dd-option {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    border-radius: 4px;
    font-family: inherit;
    font-size: .92rem;
    color: var(--llmsb-dark);
    cursor: pointer;
    text-align: left;
    line-height: 1.4;
}
.llmsb-cpr-dd-option:hover { background: var(--llmsb-primary-pale); }
.llmsb-cpr-dd-option.selected { background: var(--llmsb-primary-pale); }
.llmsb-cpr-dd-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 2px solid #94a3b8;
    flex-shrink: 0;
    box-sizing: border-box;
    background: #fff;
    position: relative;
}
.llmsb-cpr-dd-option.selected .llmsb-cpr-dd-radio {
    border-color: var(--llmsb-primary);
}
.llmsb-cpr-dd-option.selected .llmsb-cpr-dd-radio::after {
    content: '';
    position: absolute;
    inset: 2px;
    background: var(--llmsb-primary);
    border-radius: 50%;
}
.llmsb-cpr-dd-text { flex: 1 1 auto; }

/* ── Revealed state (after Check Answers) ─────────── */
.llmsb-cpr-q-dropdown.locked .llmsb-cpr-dd-popover { display: none !important; }
.llmsb-cpr-q-dropdown.correct .llmsb-cpr-dd-trigger {
    background: #dcfce7;
    border-color: #16a34a;
    color: #166534;
}
.llmsb-cpr-q-dropdown.incorrect .llmsb-cpr-dd-trigger {
    background: #fee2e2;
    border-color: #dc2626;
    color: #991b1b;
}
.llmsb-cpr-q-dropdown.unanswered .llmsb-cpr-dd-trigger {
    background: #f3f4f6;
    border-color: #94a3b8;
    color: var(--llmsb-mid);
    font-style: italic;
}
.llmsb-cpr-q-dropdown.unanswered .llmsb-cpr-dd-value::before {
    content: '— ';
}
/* Show correct answer on incorrect/unanswered as a tooltip-like badge */
.llmsb-cpr-q-dropdown.incorrect::after,
.llmsb-cpr-q-dropdown.unanswered::after {
    content: '✓ ' attr(data-correct-label);
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    background: #dcfce7;
    color: #166534;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    vertical-align: middle;
}

/* ── Check Answers button + score ─────────────────── */
/* No size/margin overrides on .llmsb-cpr-check — let the
   shared `.llmsb-check-btn` rule render it at standard size,
   centered. shared.css explicitly warns against width:100%
   overrides here. */
.llmsb-cpr-score {
    margin: 0 20px 20px;
}

/* ── Responsive ───────────────────────────────────── */
@media (max-width: 880px) {
    .llmsb-cpr-layout { grid-template-columns: 1fr; }
    .llmsb-cpr-source { border-right: 0; border-bottom: 1px solid var(--llmsb-border); }
    .llmsb-cpr-header { flex-wrap: wrap; }
}

@media (max-width: 520px) {
    .llmsb-cpr-source, .llmsb-cpr-questions { padding: 16px 14px; }
    .llmsb-cpr-dd-trigger { font-size: .85rem; min-width: 90px; }
    .llmsb-cpr-dd-value   { max-width: 200px; }
    .llmsb-cpr-dd-popover { min-width: 200px; }
}