/* Lessons and interactive practice (resources/view.php). Loaded after
   resources.css, only on pages that have practice. */

.fr-qcount i, .fr-print i { color: var(--fr-maroon); }
.fr-print { cursor: pointer; font-family: inherit; }
.fr-print:hover { border-color: var(--fr-maroon); }

/* ---------- Lesson notes ---------- */
.fr-notes { max-width: 860px; width: 100%; margin: 0 auto; }
.fr-page .fr-prose h2 { font-size: 22px; color: var(--fr-maroon-deep); margin: 26px 0 10px; }
.fr-page .fr-prose h3 { font-size: 18px; color: var(--fr-ink); margin: 20px 0 8px; }
.fr-page .fr-prose > h2:first-child, .fr-page .fr-prose > h3:first-child { margin-top: 0; }
.fr-example {
    margin: 0 0 1em; padding: 12px 16px; border-left: 4px solid var(--fr-gold);
    background: #fffaf0; border-radius: 0 10px 10px 0; font-size: 16px; line-height: 1.7;
}
.fr-table-wrap { overflow-x: auto; margin: 0 0 1em; border: 1px solid var(--fr-line); border-radius: 10px; }
.fr-table { width: 100%; border-collapse: collapse; font-size: 15px; background: #fff; }
.fr-table th, .fr-table td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--fr-line); vertical-align: top; }
.fr-table th { background: #f8f1ec; font-weight: 700; color: var(--fr-maroon-deep); }
.fr-table tr:last-child td { border-bottom: 0; }
.fr-page s { color: #b42318; text-decoration-thickness: 2px; }

/* ---------- Layout: a reading passage sits beside its questions ---------- */
.fr-practice { display: grid; gap: 24px; min-width: 0; }
.fr-tasks { display: grid; gap: 22px; min-width: 0; align-content: start; }
@media (min-width: 1000px) {
    .fr-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
    .fr-passage-col { position: sticky; top: calc(var(--fr-top, 80px) + 12px); }
    .fr-passage { max-height: calc(100vh - var(--fr-top, 80px) - 32px); overflow-y: auto; overscroll-behavior: contain; }
}
.fr-passage {
    background: #fff; border: 1px solid var(--fr-line); border-radius: var(--fr-radius);
    padding: 26px 30px; box-shadow: var(--fr-shadow); font-size: 16.5px; line-height: 1.8;
}
.fr-passage:focus-visible { outline: 3px solid var(--fr-gold); }
.fr-passage p { margin: 0 0 1em; }
.fr-page .fr-passage h2 { font-size: 24px; color: var(--fr-maroon-deep); margin: 4px 0 14px; line-height: 1.25; }
.fr-passage-kicker { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fr-muted); display: flex; align-items: center; gap: 6px; }
.fr-passage-kicker i { color: var(--fr-maroon); }

/* ---------- Listening ---------- */
.fr-listen { background: #fff; border: 1px solid var(--fr-line); border-radius: var(--fr-radius); padding: 22px 24px; box-shadow: var(--fr-shadow); display: grid; gap: 16px; }
.fr-listen-head { display: flex; gap: 16px; align-items: flex-start; }
.fr-listen-icon { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: var(--sk-listening-bg); color: var(--sk-listening); }
.fr-page .fr-listen h2 { font-size: 22px; color: var(--fr-maroon-deep); margin: 2px 0 4px; }
.fr-listen-intro { color: var(--fr-muted); }
.fr-player { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: #f6fafb; border: 1px solid #d6e8ee; }
.fr-speed { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fr-muted); margin-left: auto; }
.fr-page .fr-speed select { width: auto; padding: 7px 10px; border: 1.5px solid var(--fr-line); border-radius: 8px; background: #fff; font: 600 14px 'DM Sans', sans-serif; }
.fr-progress { flex: 1 0 100%; height: 6px; border-radius: 999px; background: #dbe9ee; overflow: hidden; }
.fr-progress span { display: block; height: 100%; width: 0; background: var(--sk-listening); transition: width .4s; }
.fr-progress.is-seekable { height: 10px; cursor: pointer; }
.fr-progress.is-seekable span { transition: width .15s linear; }
.fr-progress.is-seekable:focus-visible { outline: 3px solid var(--fr-gold); outline-offset: 2px; }
.fr-time { font: 700 14px 'DM Sans', sans-serif; color: var(--fr-muted); font-variant-numeric: tabular-nums; }
.fr-player-note { flex: 1 0 100%; font-size: 13.5px; color: var(--fr-muted); }
.fr-player-off { color: #7a5a00; background: var(--fr-gold-soft); padding: 10px 14px; border-radius: 10px; font-size: 14px; }
.fr-transcript { border: 1px solid var(--fr-line); border-radius: 12px; }
.fr-transcript summary { cursor: pointer; padding: 12px 16px; font-weight: 700; color: var(--fr-maroon); }
.fr-transcript summary small { color: var(--fr-muted); font-weight: 500; }
.fr-script { padding: 4px 16px 14px; display: grid; gap: 6px; font-size: 15.5px; line-height: 1.65; }
.fr-script p { padding: 4px 8px; border-radius: 8px; transition: background .2s; }
.fr-script p.is-speaking { background: #e4f1f5; }
.fr-script b { color: var(--fr-maroon-deep); }

/* ---------- Tasks ---------- */
.fr-task { background: #fff; border: 1px solid var(--fr-line); border-radius: var(--fr-radius); padding: 22px 24px; box-shadow: var(--fr-shadow); min-width: 0; }
.fr-task-head { margin-bottom: 16px; }
.fr-page .fr-task-head h3 { font-size: 19px; color: var(--fr-maroon-deep); }
.fr-task-ins { color: var(--fr-muted); margin-top: 4px; font-size: 15px; }
.fr-task-ins p { margin: 0 0 .4em; }
.fr-task-ins strong { color: var(--fr-ink); }
.fr-to-passage { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 14px; font-weight: 700; color: var(--fr-maroon) !important; text-decoration: none; }
.fr-passage { scroll-margin-top: calc(var(--fr-top, 80px) + 12px); }
/* On phones the passage sits above the questions: a shortcut down to them. */
.fr-to-questions { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; text-transform: none; letter-spacing: 0; font-size: 14px; color: var(--fr-maroon) !important; text-decoration: none; }
.fr-to-questions i { color: inherit; }
.fr-to-passage:hover, .fr-to-questions:hover { text-decoration: underline; }
#frQuestions, #frPassage { scroll-margin-top: calc(var(--fr-top, 80px) + 12px); }
@media (min-width: 1000px) { .fr-to-passage, .fr-to-questions { display: none; } }

/* Narrow screens: one pane at a time behind a sticky Passage / Questions switch (practice.js). */
.fr-tabs { display: none; }
@media (max-width: 999px) {
    .fr-tabbed .fr-tabs {
        display: flex; gap: 4px; padding: 4px; position: sticky; top: calc(var(--fr-top, 80px) + 6px); z-index: 20;
        background: #fff; border: 1px solid var(--fr-line); border-radius: 999px; box-shadow: var(--fr-shadow-up);
    }
    .fr-tabs button {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 42px;
        border: 0; border-radius: 999px; background: transparent; color: var(--fr-muted);
        font: 700 15px 'DM Sans', sans-serif; cursor: pointer;
    }
    .fr-tabs button[aria-selected="true"] { background: var(--fr-maroon); color: #fff; }
    .fr-tabs small { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, .07); }
    .fr-tabs button[aria-selected="true"] small { background: rgba(255, 255, 255, .2); }
    .fr-tabbed[data-view="passage"] .fr-tasks, .fr-tabbed[data-view="questions"] .fr-passage-col { display: none; }
    .fr-tabbed .fr-to-passage, .fr-tabbed .fr-to-questions { display: none; }
}
.fr-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.fr-item { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.fr-item-body { flex: 1; min-width: 0; }
.fr-qn { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font: 700 14px 'Outfit', sans-serif; background: #f3ece8; color: var(--fr-maroon-deep); }
.fr-item.is-right .fr-qn { background: #2c7a4b; color: #fff; }
.fr-item.is-wrong .fr-qn, .fr-item.is-blank .fr-qn { background: #b42318; color: #fff; }
.fr-q { font-size: 16px; line-height: 1.55; margin-bottom: 8px; padding-top: 3px; }
.fr-choices { display: grid; gap: 6px; }
.fr-choices-row { display: flex; flex-wrap: wrap; gap: 6px; }
.fr-choice { position: relative; display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1.5px solid var(--fr-line); border-radius: 10px; cursor: pointer; font-size: 15px; line-height: 1.45; transition: border-color .15s, background .15s; }
.fr-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.fr-choice:hover { border-color: #cdb8ae; }
.fr-choice:has(input:checked) { border-color: var(--fr-maroon); background: #fbf2f2; }
.fr-choice:has(input:focus-visible) { outline: 3px solid var(--fr-gold); outline-offset: 1px; }
.fr-choice:has(input:disabled) { cursor: default; }
.fr-letter { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font-size: 12px; font-weight: 700; background: #f3ece8; color: var(--fr-maroon-deep); }
.fr-choice:has(input:checked) .fr-letter { background: var(--fr-maroon); color: #fff; }
.fr-choices-row .fr-choice { padding: 7px 14px; font-weight: 600; }
/* After checking. ".fr-item" lifts these above the :has(:checked) rules. */
.fr-item .fr-choice.is-key { border-color: #2c7a4b; background: #eaf6ef; color: #1d5634; }
.fr-item .fr-choice.is-key .fr-letter { background: #2c7a4b; color: #fff; }
.fr-item .fr-choice.is-picked-wrong { border-color: #b42318; background: #fdf0ef; color: #7a1a12; text-decoration: line-through; text-decoration-color: rgba(180, 35, 24, .5); }
.fr-item .fr-choice.is-picked-wrong .fr-letter { background: #b42318; color: #fff; }

.fr-gapline { line-height: 1.95; }
.fr-page input.fr-gap {
    /* One width for every gap, so the box never hints at the answer's length. */
    display: inline-block; width: 12ch; max-width: 100%; margin: 0 4px; padding: 2px 8px;
    border: 0; border-bottom: 2px solid var(--fr-maroon); border-radius: 6px 6px 0 0; background: #fbf2f2;
    font: 600 16px 'DM Sans', sans-serif; color: var(--fr-ink); vertical-align: baseline;
}
.fr-page input.fr-gap:focus { outline: none; background: #fff3cd; }
.fr-item.is-right input.fr-gap { border-color: #2c7a4b; background: #eaf6ef; }
.fr-item.is-wrong input.fr-gap, .fr-item.is-blank input.fr-gap { border-color: #b42318; background: #fdf0ef; }
.fr-bank { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; padding: 10px 12px; background: #fffaf0; border: 1px dashed #e7c96b; border-radius: 10px; }
.fr-bank span { font-weight: 700; font-size: 14px; padding: 3px 10px; border-radius: 6px; background: #fff; border: 1px solid #efdca0; }

.fr-options { display: grid; gap: 6px; margin: 0 0 16px; padding: 12px 14px; background: #faf6f3; border-radius: 10px; }
.fr-options div { display: flex; gap: 10px; }
.fr-options dt { flex: none; min-width: 24px; padding: 0 5px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-weight: 700; font-size: 13px; background: var(--fr-maroon); color: #fff; }
.fr-options dd { margin: 0; font-size: 15px; line-height: 1.5; padding-top: 1px; }
.fr-matchline { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; }
.fr-matchline .fr-q { margin: 0; }
.fr-page select.fr-pick { width: auto; flex: none; padding: 6px 12px; border: 1.5px solid var(--fr-line); border-radius: 8px; font: 700 15px 'DM Sans', sans-serif; background: #fff; cursor: pointer; }
.fr-item.is-right select.fr-pick { border-color: #2c7a4b; background: #eaf6ef; }
.fr-item.is-wrong select.fr-pick, .fr-item.is-blank select.fr-pick { border-color: #b42318; background: #fdf0ef; }

.fr-feedback { margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size: 14.5px; line-height: 1.55; }
.fr-item.is-right .fr-feedback { background: #eaf6ef; color: #1d5634; }
.fr-item.is-wrong .fr-feedback, .fr-item.is-blank .fr-feedback { background: #fdf0ef; color: #7a1a12; }
.fr-fb-head { font-weight: 700; }
.fr-fb-why { margin-top: 3px; color: var(--fr-ink); }

.fr-task-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 18px; }
.fr-score { font: 800 18px 'Outfit', sans-serif; padding: 6px 14px; border-radius: 999px; }
.fr-score.is-full { background: #eaf6ef; color: #1d5634; }
.fr-score.is-good { background: var(--fr-gold-soft); color: #7a5a00; }
.fr-score.is-low { background: #fdf0ef; color: #7a1a12; }
.fr-task-note { color: #b42318; font-weight: 600; font-size: 14px; }

.fr-total { display: flex; align-items: center; gap: 20px; padding: 22px 24px; border-radius: var(--fr-radius); color: #fff; background: linear-gradient(135deg, var(--fr-maroon-bright), var(--fr-maroon-deep)); }
.fr-page .fr-total h3 { color: #fff; font-size: 22px; }
.fr-total p { color: rgba(255, 255, 255, .85); margin-top: 2px; }
.fr-total-ring { --pct: 0; flex: none; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(var(--fr-gold) calc(var(--pct) * 1%), rgba(255, 255, 255, .18) 0); }
.fr-total-ring span { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--fr-maroon-deep); font: 800 20px 'Outfit', sans-serif; color: var(--fr-gold); }

/* ---------- Saved progress ---------- */
.fr-mine { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: var(--fr-radius); background: #fff; border: 1px solid var(--fr-line); box-shadow: var(--fr-shadow); }
.fr-mine > i { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; background: #f6ecec; color: var(--fr-maroon); }
.fr-mine strong { display: block; font-size: 16px; color: var(--fr-ink); }
.fr-mine-meta { display: block; font-size: 14px; color: var(--fr-muted); }
.fr-mine-meta a { color: var(--fr-maroon); font-weight: 700; }
.fr-mine-ring { --pct: 0; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: conic-gradient(#2c7a4b calc(var(--pct) * 1%), #e7efe9 0); }
.fr-mine-ring b { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; font: 800 13px 'Outfit', sans-serif; color: #1d5634; }
.fr-total-save { margin-top: 8px !important; font-weight: 600; color: #fff !important; }
.fr-total-save a { color: var(--fr-gold); font-weight: 700; }
.fr-total-save i { color: var(--fr-gold); margin-right: 4px; }

/* ---------- Writing and speaking ---------- */
.fr-prompt { background: #faf6f3; border: 1px solid var(--fr-line); border-radius: 12px; padding: 16px 18px; margin-bottom: 14px; font-size: 16px; line-height: 1.65; }
.fr-prompt p { margin: 0 0 .7em; }
.fr-prompt > :last-child { margin-bottom: 0; }
.fr-prompt ul { margin: 0 0 .7em; padding-left: 1.3em; }
.fr-page .fr-writebox { width: 100%; min-height: 220px; padding: 14px 16px; border: 1.5px solid var(--fr-line); border-radius: 12px; background: #fff; font: 400 16px/1.7 'DM Sans', sans-serif; color: var(--fr-ink); resize: vertical; }
.fr-page .fr-writebox:focus { outline: none; border-color: var(--fr-maroon); box-shadow: 0 0 0 4px rgba(106, 13, 24, .08); }
.fr-writemeta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 14px; margin-top: 6px; }
.fr-wordcount { font-size: 14px; color: var(--fr-muted); font-weight: 600; }
.fr-draft { font-size: 13px; color: var(--fr-muted); }
.fr-draft button { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--fr-maroon); cursor: pointer; text-decoration: underline; }

/* After a writing task: how to get it marked. */
.fr-next { display: flex; gap: 14px; align-items: flex-start; margin-top: 16px; padding: 16px 18px; border-radius: 12px; background: #fffaf0; border: 1px solid #f1dfb3; }
.fr-next > i { flex: none; width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #fff; color: var(--fr-maroon); font-size: 17px; }
.fr-next p { font-size: 15px; margin: 2px 0 12px; }
.fr-next-actions { display: flex; flex-wrap: wrap; gap: 10px; }
#frPage[data-student="1"] .fr-next-guest, #frPage:not([data-student="1"]) .fr-next-student { display: none; }

/* A small player pinned to the bottom while the main one is scrolled away. */
.fr-mini {
    position: fixed; left: 50%; bottom: 16px; z-index: 950; transform: translate(-50%, 140%);
    display: flex; align-items: center; gap: 12px; width: min(440px, calc(100vw - 32px));
    padding: 10px 12px 10px 10px; border-radius: 14px; background: #fff; border: 1px solid #d6e8ee;
    box-shadow: 0 10px 30px rgba(31, 20, 22, .18); transition: transform .25s;
}
.fr-mini.is-on { transform: translate(-50%, 0); }
.fr-mini .fr-btn { flex: none; padding: 9px 14px; }
.fr-mini-info { flex: 1; min-width: 0; display: grid; gap: 6px; }
.fr-mini-info .fr-time { font-size: 13px; }
.fr-mini-bar { height: 5px; border-radius: 999px; background: #dbe9ee; overflow: hidden; }
.fr-mini-bar span { display: block; height: 100%; width: 0; background: var(--sk-listening); }
.fr-mini-up { flex: none; border: 0; background: none; color: var(--fr-maroon); font-size: 13px; font-weight: 700; cursor: pointer; padding: 6px; }
.fr-wordcount.is-ok { color: #2c7a4b; }
.fr-checklist { margin-top: 16px; display: grid; gap: 6px; font-size: 15px; }
.fr-checklist label { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.fr-page .fr-checklist input { width: 18px; height: 18px; margin-top: 3px; padding: 0; accent-color: #2c7a4b; flex: none; }
.fr-model { margin-top: 14px; padding: 18px 20px; border-radius: 12px; background: #f3faf6; border: 1px solid #cfe7d8; font-size: 16px; line-height: 1.75; }
.fr-model p { margin: 0 0 .9em; }
.fr-model > :last-child { margin-bottom: 0; }
.fr-model .fr-passage-kicker { margin-bottom: 8px; color: #1d5634; }

.fr-speak { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.fr-clock { display: grid; justify-items: center; min-width: 150px; padding: 12px 18px; border-radius: 14px; background: #f3ece8; transition: background .3s; }
.fr-clock-label { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fr-muted); }
.fr-clock-time { font: 800 36px/1.1 'Outfit', sans-serif; color: var(--fr-maroon-deep); font-variant-numeric: tabular-nums; }
.fr-clock.is-prep { background: var(--fr-gold-soft); }
.fr-clock.is-speak { background: #e4f1f5; }
.fr-clock.is-speak .fr-clock-time { color: var(--sk-listening); }
.fr-clock.is-done { background: #eaf6ef; }
.fr-speak-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* Part 2 notes: ruled like the paper you get in the test. */
.fr-notes-box { flex: 1 0 100%; display: grid; gap: 6px; }
.fr-notes-box label { font-size: 14px; font-weight: 700; color: var(--fr-ink); }
.fr-notes-box label i { color: var(--fr-maroon); margin-right: 4px; }
.fr-notes-box small { font-weight: 500; color: var(--fr-muted); }
.fr-page .fr-speaknotes {
    width: 100%; padding: 6px 14px; border: 1.5px solid var(--fr-line); border-radius: 10px; resize: vertical;
    font: 400 16px/28px 'DM Sans', sans-serif; color: var(--fr-ink);
    background: #fffdf7 repeating-linear-gradient(transparent 0 27px, #eadfd3 27px 28px) 0 6px / 100% 28px local;
}
.fr-page .fr-speaknotes:focus { outline: none; border-color: var(--fr-maroon); box-shadow: 0 0 0 4px rgba(106, 13, 24, .08); }
[data-record].is-rec { background: #b42318; border-color: #b42318; color: #fff !important; }
[data-record].is-rec i { animation: fr-pulse 1s infinite; }
@keyframes fr-pulse { 50% { opacity: .3; } }
.fr-playback { flex: 1 0 100%; width: 100%; max-width: 420px; }
.fr-small { flex: 1 0 100%; font-size: 13px; color: var(--fr-muted); }

@media (max-width: 640px) {
    .fr-passage, .fr-task, .fr-listen { padding: 18px 16px; }
    .fr-item { gap: 10px; }
    .fr-matchline { flex-direction: column; gap: 6px; }
    .fr-total { flex-direction: column; text-align: center; }
    .fr-speed { margin-left: 0; }
    .fr-clock { min-width: 0; flex: 1; }
    /* 16px stops iPhones zooming in when a control is tapped. */
    .fr-page select.fr-pick, .fr-page .fr-speed select { font-size: 16px; }
    .fr-page select.fr-pick { min-height: 42px; min-width: 120px; }
    .fr-page input.fr-gap { min-height: 36px; }
    .fr-next { padding: 14px; gap: 10px; }
    .fr-next > i { display: none; }
}

/* ---------- Printing a lesson gives a clean worksheet ---------- */
@media print {
    .top-bar, body > header, .nav-drawer, .drawer-overlay, .praxis-footer, .fr-crumbs, .fr-save, .fr-print,
    .fr-task-actions, .fr-player, .fr-related, .fr-total, .fr-mine, .fr-speak, .fr-wordcount, .fr-toast, .fr-feedback,
    .fr-transcript, .fr-model, .fr-checklist, .fr-next, .fr-draft, .fr-mini, .fr-to-questions, .fr-to-passage, .fr-tabs { display: none !important; }
    .fr-tabbed .fr-tasks, .fr-tabbed .fr-passage-col { display: block !important; }
    .fr-page { background: #fff; padding: 0; }
    .fr-view-head { background: none; border: 0; padding: 0 0 8px; }
    .fr-passage-col { position: static; }
    .fr-passage { max-height: none; overflow: visible; }
    .fr-split { display: block; }
    .fr-passage, .fr-task, .fr-prose, .fr-listen { box-shadow: none; }
    .fr-task { break-inside: avoid; }
    .fr-page input.fr-gap { background: none; width: 16ch; }
    .fr-page .fr-writebox { min-height: 340px; }
}