.learn-page {
    /* 230px cue column + gap + a notes column that IS the text measure
       (~72ch), so text, figures, and decks all share the same width. */
    max-width: 910px;
    margin: 0 auto;
    padding: 0 16px;
}

/* --- Cornell-notes layout ---
   Wide screens get a two-column grid: a narrow cue column on the left
   (guiding questions, like the study guides' "Questions to be Answered")
   and the notes on the right. Markup stays flat: section headings span
   both columns, .cue elements go left, everything else flows right. */
@media (min-width: 861px) {
    .learn-page {
        display: grid;
        grid-template-columns: 230px minmax(0, 1fr);
        column-gap: 44px;
        align-items: start;
    }

    .learn-page > * {
        grid-column: 2;
    }

    .learn-page > .breadcrumb,
    .learn-page > h1,
    .learn-page > .intro,
    .learn-page > .early-note,
    .learn-page > .deeper-reading,
    .learn-page > .qta,
    .learn-page > .practice-box,
    .learn-page > .feedback-note {
        grid-column: 1 / -1;
    }

    /* Section headings live in (and center over) the notes column; the cue
       question auto-places into the margin beside them. */
    .learn-page > h2 {
        grid-column: 2;
        text-align: center;
    }

    .learn-page > .cue {
        grid-column: 1;
        /* The cue PRECEDES the key idea in markup and lands in its row:
           auto-placement moves the cursor col 2 (h2) -> col 1 (cue), and a
           backward column step increments the row — putting the cue in the
           row BELOW the h2, where the key idea (col 2) then joins it. (If
           the cue instead followed the key idea, the same rule would bump
           the cue one row further down.) Matching 14px top margins align
           their first lines. */
        margin-top: 14px;
    }
}

/* Cue-column question: the Cornell "cue" for each section. Sits tight under
   the heading's left edge so heading + question read as one unit. */
.cue {
    font-style: italic;
    color: #4f42b5;
    font-size: 0.95em;
    line-height: 1.45;
    margin: 4px 0 4px;
}

.cue::before {
    content: "Q: ";
    font-style: normal;
    font-weight: 700;
}

/* "Questions to be Answered" index (mirrors the study-guide format). */
.qta {
    border: 1px solid #e2e0ef;
    background: #fafafa;
    border-radius: 10px;
    padding: 14px 20px;
    margin: 20px 0 4px;
}

.qta-head {
    margin: 0 0 8px;
    font-weight: 700;
    color: #4f42b5;
}

.qta ol {
    margin: 0;
    padding-left: 22px;
    columns: 2;
    column-gap: 36px;
}

.qta li {
    margin: 4px 0;
    break-inside: avoid;
}

@media (max-width: 700px) {
    .qta ol {
        columns: 1;
    }
}

.learn-page h1 {
    line-height: 1.25;
    margin-bottom: 4px;
}

.learn-page .intro {
    color: #555;
    /* Spans the full header width so its right edge lines up with the
       "Questions to be answered" box below it. */
    max-width: none;
    font-size: 1.05em;
}

.breadcrumb {
    font-size: 0.85em;
    color: #777;
}

.deeper-reading {
    color: #777;
    font-size: 0.88em;
    margin-top: 0;
}

.learn-page h2 {
    margin-top: 40px;
    margin-bottom: 8px;
    padding-top: 18px;
    border-top: 1px solid #eee;
    line-height: 1.3;
}

/* The key idea IS the main content — the section's thesis statement, not a
   side note. Slightly larger and darker than body text, no box or bar. */
.key-idea {
    font-size: 1.06em;
    color: #1d1d1d;
    line-height: 1.5;
    margin: 14px 0;
    max-width: 68ch;
}

.key-idea p {
    margin: 0;
    max-width: none;
}

.learn-page p {
    max-width: 72ch;
    line-height: 1.55;
}

/* Figures are centered within the same 72ch measure as the paragraphs, so
   image and text share a center axis. PNGs have transparent backgrounds
   (white was converted to alpha), so they sit directly on the page color. */
.learn-page figure {
    margin: 14px 0 18px;
    max-width: 72ch;
    text-align: center;
}

.learn-page figure img {
    max-width: min(100%, 580px);
    height: auto;
}

.learn-page figcaption {
    color: #777;
    font-size: 0.85em;
    margin: 6px auto 0;
    text-align: center;
    max-width: 62ch;
}

/* main.css resets ul { list-style: none } site-wide — restore real bullets
   for content lists inside guides. */
.learn-page ul.rule-list {
    list-style: disc;
    padding-left: 24px;
}

.rule-list li {
    margin: 6px 0;
    line-height: 1.5;
}

/* Draft-only: visible marker where a third-party figure was excluded, so
   review doesn't require reading the HTML source. Removed at publish. */
.draft-placeholder {
    border: 2px dashed #c9c4e4;
    color: #777;
    border-radius: 8px;
    padding: 12px 16px;
    margin: 16px 0;
    font-size: 0.9em;
    max-width: 72ch;
}

.practice-box {
    border: 1px solid #e2e0ef;
    background: #fafafa;
    border-radius: 10px;
    padding: 16px 20px;
    margin: 36px 0 20px;
}

.practice-box h2 {
    margin: 0 0 10px;
    padding-top: 0;
    border-top: none;
    font-size: 1.15em;
}

.practice-box ul {
    margin: 0;
    padding-left: 20px;
}

.practice-box li {
    margin: 7px 0;
}

.practice-box .pdf {
    color: #777;
    font-size: 0.9em;
}

.practice-cta {
    display: inline-block;
    background: #6153cc;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    margin: 10px 0 4px;
}

.practice-cta:hover {
    background: #4f42b5;
}

.feedback-note {
    color: #666;
    font-size: 0.9em;
    border-top: 1px solid #eee;
    padding-top: 14px;
    margin-top: 24px;
}

/* --- Live example deck --- */

.live-deck {
    border: 1px solid #e2e0ef;
    border-radius: 10px;
    background: #fff;
    margin: 28px 0;
    padding: 14px 18px 16px;
}

.deck-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.deck-title {
    font-weight: 600;
    color: #4f42b5;
    /* One line always — a wrapping title would change the widget's height
       when the mode switch swaps it for the shorter "Your turn". */
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.deck-counter {
    color: #777;
    font-size: 0.85em;
    font-variant-numeric: tabular-nums;
}

.deck-stage {
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0;
    overflow: hidden;
}

.deck-stage svg {
    max-width: 100%;
    max-height: 100%;
    height: auto;
}

.deck-status {
    color: #777;
    text-align: center;
}

/* Two molecules side by side (stereo-pairs decks). */
.deck-pair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
}

.deck-pair-cell {
    flex: 0 1 50%;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.deck-pair-cell:only-child {
    flex-basis: 70%;
}

.deck-caption {
    text-align: center;
    min-height: 1.6em;
    min-height: 1lh;
    color: #333;
}

/* Pair-deck captions (relationship + names) routinely run to two lines —
   reserve both so short captions don't shift the controls below. */
.live-deck[data-kind="stereo-pairs"] .deck-caption,
.live-deck[data-kind="mf-pairs"] .deck-caption {
    min-height: 3.2em;
    min-height: 2lh;
}

/* Category chips: jump to a specific relationship type. */
.deck-cats {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.deck-cat {
    background: #f2f1f9;
    border: 1px solid #d9d6ec;
    color: #4f42b5;
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 0.85em;
    cursor: pointer;
}

.deck-cat:hover:not(:disabled) {
    background: #e6e3f5;
}

.deck-cat:disabled {
    opacity: 0.5;
    cursor: default;
}

.deck-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
    min-height: 42px;
}

.deck-nav {
    background: #f2f1f9;
    border: 1px solid #d9d6ec;
    color: #4f42b5;
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 1.05em;
    cursor: pointer;
}

.deck-nav:hover:not(:disabled) {
    background: #e6e3f5;
}

.deck-nav:disabled {
    opacity: 0.4;
    cursor: default;
}

.deck-back,
.deck-key-btn {
    font-size: 0.9em;
}

.deck-key-btn.on,
.deck-key-btn.on:hover:not(:disabled) {
    background: #4f42b5;
    border-color: #4f42b5;
    color: #fff;
}

.deck-try {
    background: #6153cc;
    border: none;
    color: #fff;
    border-radius: 8px;
    padding: 9px 18px;
    font-weight: 600;
    cursor: pointer;
}

.deck-try:hover {
    background: #4f42b5;
}

.deck-choices {
    display: flex;
    gap: 10px;
}

.deck-choice {
    background: #fff;
    border: 2px solid #6153cc;
    color: #6153cc;
    border-radius: 8px;
    padding: 8px 22px;
    font-weight: 700;
    font-size: 1.05em;
    cursor: pointer;
}

.deck-choice:hover:not(:disabled) {
    background: #f2f1f9;
}

.deck-choice.right {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}

.deck-choice.wrong {
    background: #dc3545;
    border-color: #dc3545;
    color: #fff;
}

/* Reserved line between caption and controls: present (empty) for the whole
   quiz so feedback text appearing never shifts the buttons below it. */
.deck-feedback {
    display: none;
    text-align: center;
    /* Reserve exactly one text line (body line-height is 1.6), so the row
       is the same height whether feedback text is present or not. */
    min-height: 1.6em;
    min-height: 1lh;
    margin-top: 2px;
}

.live-deck.quiz-mode .deck-feedback {
    display: block;
}

.deck-feedback.right {
    color: #28a745;
    font-weight: 600;
}

.deck-feedback.wrong {
    color: #dc3545;
    font-weight: 600;
}

.deck-practice-link {
    font-size: 0.9em;
}

@media (max-width: 600px) {
    .deck-stage {
        height: 220px;
    }
}

/* "Early version" marker: hub chip + one-line banner on the guide itself.
   Document language on purpose — these pages are correct but still being
   polished; the chip/banner (and noindex) come off as each is approved. */
.early-chip {
    display: inline-block;
    vertical-align: 2px;
    margin-left: 6px;
    padding: 1px 8px;
    border: 1px solid #d9d6ec;
    border-radius: 10px;
    background: #f2f1f9;
    color: #6153cc;
    font-size: 0.68em;
    font-weight: 600;
    white-space: nowrap;
}

.early-note {
    border: 1px solid #e2e0ef;
    background: #f7f6fc;
    border-radius: 8px;
    padding: 8px 14px;
    color: #555;
    font-size: 0.9em;
    margin: 10px 0 4px;
}

.learn-list {
    list-style: none;
    padding: 0;
}

.learn-list li {
    margin: 12px 0;
}

.learn-list .topic-desc {
    display: block;
    color: #777;
    font-size: 0.85em;
}