/*
 * The pupil's lesson player.
 *
 * Layered on student.css rather than replacing it: the display-options
 * vocabulary (--q-paper, --q-card, --q-font, --q-scale and the tint and
 * dyslexia profiles) is defined there, and a pupil set up on the quiz page
 * must get the same treatment here without a second set of rules to keep in
 * step.
 *
 * What this file does NOT do is invent its own look. It used to: a grey page,
 * system type and a blue of its own, on a product that is warm cream, Nunito
 * and one particular blue everywhere else. A pupil opening a link their
 * teacher sent had no way of telling the two were the same thing. The tokens
 * below are the app's, named locally so a tint or a reading profile can still
 * override the ones that belong to the pupil rather than to us.
 *
 * The guide half of a section is rendered by booklet-render.js, which emits
 * the same .bk-* classes the printed booklet uses. Those are styled by
 * booklet-print.css, which is a print stylesheet built around A4 sheets and
 * page breaks — so it is deliberately NOT loaded here. The handful of .bk-*
 * rules at the bottom of this file are a screen reading of the same blocks.
 */

/*
 * The reading defaults, restated as the app's.
 *
 * student.css sets these on :root and this file loads after it, so these win
 * by source order. The reading profiles and the tints do NOT lose out: they
 * are written as html[data-a11y] / html[data-tint], one specificity step
 * above :root, so a pupil on OpenDyslexic or blue paper still gets exactly
 * what they chose.
 */
:root {
    --q-font: "Nunito", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --q-paper: #f5efe7;
    --q-card: #fffdf9;
}

:root {
    --lp-ink: #1e1b2e;
    --lp-muted: #6b6580;
    --lp-line: rgba(221, 213, 200, 0.95);
    --lp-accent: #3660ff;
    --lp-accent-deep: #2448d8;
    --lp-accent-soft: rgba(54, 96, 255, 0.08);
    --lp-correct: #1c7a4a;
    --lp-correct-soft: #e3f4ea;
    --lp-partial: #9a6b00;
    --lp-partial-soft: #fdf3d7;
    --lp-wrong: #b14637;
    --lp-wrong-soft: #fdecec;
    --lp-radius: 12px;
    --lp-shadow: 0 10px 30px rgba(30, 27, 46, .06);
    --lp-shadow-card: 0 18px 48px rgba(30, 27, 46, .08);
    /* Inputs and answer boxes: near-white on the warm ground rather than flat
       #fff, which reads as a hole punched in the paper. */
    --lp-field: rgba(255, 255, 255, 0.72);
    --lp-field-focus: rgba(255, 255, 255, 0.95);
}

body {
    color: var(--lp-ink);
    margin: 0;
    line-height: var(--q-line-height);
}

/*
 * The app's wash, and only when the pupil has not asked for coloured paper.
 *
 * A tint is a reading aid: someone who picked yellow needs yellow, not yellow
 * with our gradient over the top of it. data-tint is removed rather than set
 * to a value when the default is chosen (see applyPrefs in learn.js), so the
 * absence of the attribute is a reliable "they have not chosen".
 */
html:not([data-tint]) body {
    background: linear-gradient(160deg, #f5efe7 0%, #efe6db 46%, #f7f1ea 100%);
    background-attachment: fixed;
}
html:not([data-tint]) body::before {
    content: '';
    position: fixed;
    inset: 0;
    background:
        radial-gradient(circle at 18% 22%, rgba(54, 96, 255, 0.055) 0%, transparent 40%),
        radial-gradient(circle at 82% 68%, rgba(244, 180, 71, 0.08) 0%, transparent 38%);
    pointer-events: none;
    z-index: 0;
}

#learn-app {
    position: relative;
    z-index: 1;
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 5rem;
}

/* ── Whose product this is ───────────────────────────── */

.lp-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -.3px;
    /* The mark is blue, the word is not — same as the teacher's nav, where
       #nav .logo resolves to var(--text) and only .logo-mark is accented. */
    color: var(--lp-ink);
    user-select: none;
    /* Clear of the display-options pill, which is fixed to the same corner of
       the viewport and does not know this exists. */
    padding-right: 4rem;
}
.lp-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--lp-accent), #60a5fa);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: 0;
    box-shadow: 0 5px 14px rgba(54, 96, 255, .32);
    transform: rotate(-4deg);
    flex-shrink: 0;
}


/* ── The display-options control, in this page's palette ─────
 *
 * student.css draws it in the quiz page's greys and its own blue. Left alone
 * it is the one thing on screen still wearing the old look, and it is pinned
 * to the top corner where that is most obvious. Only the colours are taken
 * over: the geometry, the 44px targets and the narrow-screen behaviour are
 * that file's and stay there.
 */
.a11y-btn {
    border: 1px solid var(--lp-line);
    background: var(--q-card);
    color: var(--lp-ink);
    box-shadow: var(--lp-shadow);
}
.a11y-btn:hover { border-color: rgba(54, 96, 255, .35); color: var(--lp-accent-deep); }
.a11y-btn[aria-expanded="true"] {
    border-color: rgba(54, 96, 255, .35);
    background: var(--lp-accent-soft);
    color: var(--lp-accent-deep);
}

.a11y-panel {
    background: var(--q-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    box-shadow: var(--lp-shadow-card);
}
.a11y-panel-sub { color: var(--lp-muted); }
.a11y-select {
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    background: var(--lp-field);
    color: var(--lp-ink);
}
.a11y-select:focus {
    outline: none;
    border-color: rgba(54, 96, 255, .22);
    box-shadow: 0 0 0 4px var(--lp-accent-soft);
}
.a11y-reset {
    background: rgba(30, 27, 46, .06);
    color: var(--lp-ink);
}
.a11y-reset:hover { background: rgba(30, 27, 46, .1); }

/* Before anything has loaded, this is the whole page. It was an unstyled
   paragraph in the top-left corner. */
#loading-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
    color: var(--lp-muted);
}

/* ── Cards and forms ─────────────────────────────────── */

.lp-card {
    background: var(--q-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 2rem;
    margin-top: 1.5rem;
    box-shadow: var(--lp-shadow);
}
.lp-card-narrow { max-width: 26rem; margin-left: auto; margin-right: auto; }

.lp-title {
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: -.01em;
    margin: 0 0 .35rem;
}
.lp-subtitle { font-size: 1.1rem; margin: 1.25rem 0 .5rem; }
.lp-sub { color: var(--lp-muted); margin: 0 0 1rem; }
.lp-hint { color: var(--lp-muted); font-size: .9rem; margin: .1rem 0 .4rem; }

.lp-form { display: flex; flex-direction: column; }
/* Groups inside the form lay out the same way the form does, so a wrapped
   field still fills the column instead of falling back to an input's
   intrinsic width. */
.lp-form > div { display: flex; flex-direction: column; }

.lp-label { font-weight: 600; margin-top: .95rem; }

.lp-input {
    font: inherit;
    /* 16px floor: iOS zooms the whole page in on focus below that, and a pupil
       on a school iPad then has to pinch back out to read the question. */
    font-size: max(1rem, 16px);
    padding: .65rem .75rem;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    background: var(--lp-field);
    color: inherit;
    margin-top: .3rem;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lp-input:focus:not(:focus-visible) {
    outline: none;
    border-color: rgba(54, 96, 255, .22);
    background: var(--lp-field-focus);
    box-shadow: 0 0 0 4px var(--lp-accent-soft);
}

.lp-input-code {
    text-transform: uppercase;
    letter-spacing: .3em;
    font-size: max(1.45rem, 16px);
    font-weight: 800;
    text-align: center;
    /* The indent cancels the trailing letter-space, which otherwise pushes a
       centred code half a character to the left of true. */
    text-indent: .3em;
    padding-top: .8rem;
    padding-bottom: .8rem;
}

.lp-input:focus-visible,
.lp-answer:focus-visible,
.lp-btn:focus-visible,
.lp-link:focus-visible {
    outline: 3px solid var(--lp-accent);
    outline-offset: 2px;
}

.lp-error {
    background: var(--lp-wrong-soft);
    border: 1px solid rgba(140, 47, 47, .22);
    color: #8c2f2f;
    padding: .7rem .85rem;
    border-radius: 10px;
    margin: 0 0 .5rem;
}

.lp-btn {
    font: inherit;
    font-weight: 600;
    /* 44px: a finger target, not a mouse target. The app's buttons are
       shorter, and a phone in a classroom is the common case here. */
    min-height: 44px;
    padding: .6rem 1.25rem;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    margin-top: 1rem;
    transition: background .15s ease, box-shadow .15s ease, transform .1s ease;
}
.lp-btn:active { transform: scale(.98); }

.lp-btn-primary {
    background: linear-gradient(90deg, var(--lp-accent), #60a5fa);
    color: #fff;
    box-shadow: 0 10px 24px rgba(54, 96, 255, .22);
}
.lp-btn-primary:hover {
    background: linear-gradient(90deg, var(--lp-accent-deep), #4f94e8);
    box-shadow: 0 14px 28px rgba(54, 96, 255, .28);
}
.lp-btn-quiet {
    background: rgba(255, 255, 255, .72);
    border-color: var(--lp-line);
    color: var(--lp-ink);
}
.lp-btn-quiet:hover { background: rgba(255, 255, 255, .95); }
.lp-btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.lp-link {
    font: inherit;
    background: none;
    border: 0;
    color: var(--lp-accent);
    text-decoration: underline;
    cursor: pointer;
    padding: .35rem .1rem;
}

.lp-alt { margin-top: 1.5rem; color: var(--lp-muted); }

/* ── Sitting a lesson ────────────────────────────────── */

.lp-lesson-head { margin: 1.25rem 0 1.1rem; }
.lp-lesson-title { font-size: 1.35rem; letter-spacing: -.01em; margin: .4rem 0 .2rem; }
.lp-lesson-progress { color: var(--lp-muted); margin: 0 0 .55rem; font-size: .95rem; }

.lp-progressbar {
    height: 6px;
    border-radius: 999px;
    background: rgba(30, 27, 46, .07);
    overflow: hidden;
}
.lp-progressbar-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--lp-accent), #60a5fa);
    transition: width .35s ease;
}

.lp-body {
    background: var(--q-card);
    border: 1px solid var(--lp-line);
    border-radius: var(--lp-radius);
    padding: 1.75rem;
    box-shadow: var(--lp-shadow);
}

.lp-chapter {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .78rem;
    font-weight: 700;
    color: var(--lp-muted);
    margin: 0 0 .2rem;
}

.lp-heading { font-size: 1.28rem; letter-spacing: -.01em; margin: 0 0 1rem; }

.lp-now-try {
    font-size: 1.05rem;
    margin: 2.1rem 0 .85rem;
    padding-top: 1.1rem;
    border-top: 2px solid var(--lp-line);
}

.lp-no-qs { color: var(--lp-muted); }

.lp-qs, .lp-parts { list-style: none; margin: 0; padding: 0; }
.lp-qs { display: flex; flex-direction: column; gap: 1.6rem; }

.lp-q-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }

.lp-q-num {
    font-weight: 800;
    background: linear-gradient(135deg, var(--lp-accent), #60a5fa);
    color: #fff;
    box-shadow: 0 4px 10px rgba(54, 96, 255, .25);
    border-radius: 999px;
    min-width: 1.65rem;
    height: 1.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
}

.lp-q-tier {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .14rem .5rem;
    border-radius: 999px;
    background: rgba(30, 27, 46, .06);
    color: var(--lp-muted);
}
.lp-tier-warmup { background: var(--lp-correct-soft); color: var(--lp-correct); }
.lp-tier-practice { background: #e4edff; color: #27508f; }
.lp-tier-exam_style { background: #f3e6f8; color: #6b3b8c; }

.lp-q-marks { font-size: .85rem; color: var(--lp-muted); font-weight: 600; }

.lp-q-text { margin-bottom: .5rem; line-height: var(--q-line-height); }

.lp-parts { margin-left: .5rem; border-left: 2px solid var(--lp-line); padding-left: .95rem; }
.lp-part { margin-top: 1rem; }

.lp-answer {
    font: inherit;
    font-size: max(1rem, 16px);
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
    background: var(--lp-field);
    resize: vertical;
    line-height: var(--q-line-height);
    min-height: 3.2em;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.lp-answer:focus {
    outline: none;
    border-color: rgba(54, 96, 255, .22);
    background: var(--lp-field-focus);
    box-shadow: 0 0 0 4px var(--lp-accent-soft);
}

/* ── Footer ──────────────────────────────────────────── */

/*
 * The bar the work scrolls under.
 *
 * The band is drawn by ::before rather than on the footer itself, and it is
 * 100vw wide rather than the footer's own width. #learn-app is 46rem and
 * centred, so a background painted on the footer stops where the column does
 * — two hard vertical seams running up the page either side of the buttons.
 * Invisible on the flat grey this page used to be; obvious the moment the
 * ground became a gradient.
 *
 * overflow-x: clip on the body is what keeps that 100vw from adding a
 * horizontal scrollbar. Deliberately `clip` and not `hidden`: hidden makes the
 * body a scroll container, which would stop the footer sticking at all.
 *
 * Opaque, and NOT backdrop-filtered. It was a blurred translucent band, and
 * against the Next button's shadow that drew a hard-edged pale rectangle
 * around the button — Chrome composites an element overlapping a
 * backdrop-filter onto its own layer, and the layer's bounds are the shadow's
 * bounds, which is a rectangle nobody asked for. The old button's shadow was
 * 1px and hid it; the app's is 24px and does not. A bar whose whole job is to
 * stop work showing through it has no use for translucency anyway.
 */
body { overflow-x: clip; }

.lp-footer {
    position: sticky;
    bottom: 0;
    padding: .75rem 0 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.lp-footer::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 100vw;
    margin-left: -50vw;
    border-top: 1px solid var(--lp-line);
    background: var(--q-paper);
    /* Behind the buttons, in front of the page. */
    z-index: -1;
}

.lp-save { margin: 0; color: var(--lp-muted); font-size: .9rem; min-height: 1.2em; }
.lp-nav { display: flex; gap: .6rem; }
.lp-nav .lp-btn { margin-top: 0; }

/* ── Marking and results ─────────────────────────────── */

.lp-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.4rem;
}

.lp-spinner {
    width: 36px;
    height: 36px;
    margin: 1.5rem auto;
    border: 3px solid var(--lp-line);
    border-top-color: var(--lp-accent);
    border-radius: 50%;
    animation: lp-spin 900ms linear infinite;
}

@keyframes lp-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .lp-spinner { animation-duration: 3s; }
    .lp-progressbar-fill { transition: none; }
    .lp-lesson-card, .lp-btn { transition: none; }
}

.lp-score {
    font-size: 1.45rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.01em;
    margin: .2rem 0 0;
}

/* The shape of the marks in one line, before the question-by-question detail. */
.lp-legend { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .6rem; }
.lp-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    color: var(--lp-muted);
    font-weight: 500;
}
.lp-legend-dot {
    width: .55em;
    height: .55em;
    border-radius: 999px;
    background: var(--lp-line);
}
.lp-legend-correct .lp-legend-dot { background: var(--lp-correct); }
.lp-legend-partial .lp-legend-dot { background: var(--lp-partial); }
.lp-legend-incorrect .lp-legend-dot { background: var(--lp-wrong); }

.lp-result-section { margin-bottom: 2rem; }

/* A marked question sits inside .lp-body, which is already the card colour —
   so a card of the same colour reads as a box drawn for no reason. Lifted a
   shade instead, which is the same move the tints make between paper and
   card, and keeps working on coloured paper because it is a white wash rather
   than a fixed colour. */
.lp-result {
    background: rgba(255, 255, 255, .55);
    border: 1px solid var(--lp-line);
    border-radius: 10px;
    padding: .9rem 1.1rem;
    margin-bottom: .9rem;
}

.lp-result-mark { font-weight: 800; font-variant-numeric: tabular-nums; }
.lp-result-verdict {
    font-size: .82rem;
    font-weight: 700;
    padding: .1rem .55rem;
    border-radius: 999px;
    background: rgba(30, 27, 46, .06);
    color: var(--lp-muted);
    margin-left: .4rem;
}
.lp-result-correct .lp-result-verdict { background: #e0f2e7; color: #1c7a4a; }
.lp-result-partial .lp-result-verdict { background: #fff3d6; color: #8a6100; }
.lp-result-incorrect .lp-result-verdict { background: #fdecec; color: #b23b3b; }

.lp-result-block { margin-top: .6rem; }

.lp-result-label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lp-muted);
    margin-bottom: .15rem;
}

.lp-result-text { margin: 0; white-space: pre-wrap; }

.lp-feedback .lp-result-text {
    background: var(--lp-accent-soft);
    border-radius: 8px;
    padding: .6rem .75rem;
}

/* The teacher's own header: brand, then the way back out. */
.lp-header { margin-top: 1.25rem; }

/* ── Handing-in confirmation ─────────────────────────── */

.lp-confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(20, 24, 34, .45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.lp-confirm-overlay[hidden] { display: none; }

.lp-confirm { margin-top: 0; max-width: 22rem; width: 100%; }
.lp-confirm-text { font-weight: 600; margin: 0 0 .4rem; }
.lp-confirm-actions { justify-content: flex-end; margin-top: .8rem; }
.lp-confirm-actions .lp-btn { margin-top: 0; }

/* ── The guide, on screen ────────────────────────────── */
/*
 * booklet-render.js emits the printed booklet's .bk-* classes. These are a
 * screen reading of them — no page geometry, no floats, no callout gutter.
 */

.lp-guide { font-size: 1rem; }
.lp-guide > * + * { margin-top: .9rem; }

.lp-guide .bk-p { margin: 0; line-height: var(--q-line-height); }

.lp-guide .bk-heading { font-size: 1.05rem; font-weight: 700; margin: 1.2rem 0 .3rem; }

.lp-guide .bk-points { margin: 0; padding-left: 1.4rem; }
.lp-guide .bk-points li { margin-bottom: .45rem; }

.lp-guide .bk-example,
.lp-guide .bk-facts,
.lp-guide .bk-worked,
.lp-guide .bk-check,
.lp-guide .bk-equation,
.lp-guide .bk-def,
.lp-guide .bk-roundup {
    border-radius: 10px;
    padding: .8rem .95rem;
    background: var(--lp-accent-soft);
}

.lp-guide .bk-facts { background: #f0f7f0; }
.lp-guide .bk-worked { background: #faf6ee; }
.lp-guide .bk-roundup { background: #f7f3fa; font-style: italic; }
.lp-guide .bk-def { background: #f3f5f8; }

/* Asides sit in the flow on screen. On paper they float into a margin, which
   needs a page to float within — there is no page here, and a narrow phone has
   nowhere to put one. */
.lp-guide .bk-tip,
.lp-guide .bk-mistake {
    border-left: 4px solid var(--lp-accent);
    background: var(--lp-accent-soft);
    padding: .65rem .85rem;
    border-radius: 0 10px 10px 0;
    float: none;
    width: auto;
    margin: 0;
}
.lp-guide .bk-mistake { border-left-color: var(--lp-wrong); background: #fdf3f3; }

.lp-guide .bk-key { text-decoration: underline; font-weight: 600; }

/* The small caps-ish labels the renderer puts on asides, examples and terms. */
.lp-guide .bk-aside-label,
.lp-guide .bk-example-tag,
.lp-guide .bk-points-title {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--lp-muted);
    margin-bottom: .25rem;
}

.lp-guide .bk-term { font-weight: 700; }
.lp-guide .bk-worked-q { font-weight: 600; }
.lp-guide .bk-worked-a { font-weight: 600; margin-top: .4rem; }
.lp-guide .bk-steps { margin: .4rem 0 0; padding-left: 1.4rem; }
.lp-guide .bk-steps li { margin-bottom: .3rem; }
.lp-guide .bk-qc-a { color: var(--lp-muted); }
.lp-guide .bk-sub { color: var(--lp-muted); font-size: .9rem; }
.lp-guide .bk-equation-tex { text-align: center; }
.lp-guide .bk-equation-meaning { color: var(--lp-muted); font-size: .9rem; margin-top: .3rem; }
.lp-guide .bk-table-title { font-weight: 600; margin-bottom: .3rem; }
.lp-guide .bk-roundup-quip { font-weight: 600; }

.lp-guide .bk-table-wrap { overflow-x: auto; }
.lp-guide table { border-collapse: collapse; width: 100%; }
.lp-guide th, .lp-guide td { border: 1px solid var(--lp-line); padding: .4rem .55rem; text-align: left; }

/* Same plate as the print and editor versions: centred, narrower than the
   measure, height-capped so a tall diagram cannot own the whole viewport. */
.lp-guide .bk-figure {
    max-width: min(400px, 100%);
    margin: 1rem auto;
    text-align: center;
}
.lp-guide .bk-figure img {
    display: inline-block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 240px;
    padding: .3rem;
    background: #fff;
    border: 1px solid var(--lp-line);
    border-radius: 8px;
}
.lp-guide .bk-figure figcaption { font-size: .8rem; color: var(--lp-muted); margin-top: .4rem; }
.lp-guide .bk-figure .bk-credit { display: block; font-size: .7rem; opacity: .75; }

@media (max-width: 480px) {
    #learn-app { padding: 1rem .75rem 5rem; }
    .lp-body, .lp-card { padding: 1.15rem; }
    .lp-footer { gap: .6rem; }
    .lp-nav { width: 100%; }
    .lp-nav .lp-btn { flex: 1 1 auto; }
}

/* A table written into a question, drawn by the shared renderer. The .bk-table
   rules further up are scoped to .lp-guide, and a question is not in the
   guide — it appears whether or not the teacher included the guide at all. */
.lp-q-text .bk-table-wrap,
.lsn-answer-q .bk-table-wrap { overflow-x: auto; margin: .6rem 0; }

.lp-q-text .bk-table,
.lsn-answer-q .bk-table { border-collapse: collapse; width: 100%; }

.lp-q-text .bk-table th, .lp-q-text .bk-table td,
.lsn-answer-q .bk-table th, .lsn-answer-q .bk-table td {
    border: 1px solid var(--lp-line, #dde2ea);
    padding: .4rem .55rem;
    text-align: left;
}

.lp-q-text .bk-table th,
.lsn-answer-q .bk-table th { background: rgba(0, 0, 0, .04); font-weight: 600; }