/* ===== Tier 3 SEO corpus — module / journey-hub / catalogue pages =====
   Generated by scripts/build-corpus.js. Reuses journeys.css's --purple-dark/
   --purple-mid/--accent variables and .journey-card/.journeys-grid so the
   corpus reads as the same product, not a bolted-on marketing skin. */

.corpus-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 40px 20px 60px;
}

@media (min-width: 700px) {
    .corpus-container {
        padding-left: 48px;
        padding-right: 48px;
    }
}

.corpus-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255,255,255,0.45);
    text-decoration: none;
    margin-bottom: 24px;
    transition: color 0.15s;
}
.corpus-back:hover { color: rgba(255,255,255,0.8); }

.corpus-header { margin-bottom: 36px; }

.corpus-title {
    font-family: 'Lexend Giga', sans-serif;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
    margin: 12px 0 10px;
}

.corpus-lede {
    font-size: 1rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
    max-width: 60ch;
}

.corpus-intro-p {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.7;
    max-width: 68ch;
    margin: 0 0 16px;
}

.corpus-inline-link {
    color: #b3aefc;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.corpus-inline-link:hover { color: #fff; }

/* ── Exercise sections ────────────────────────────────────────────── */
.corpus-section { margin: 32px 0; }

.corpus-section-title {
    font-family: 'Lexend Giga', sans-serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 14px;
}

.corpus-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 16px 18px;
    margin-bottom: 12px;
}

.corpus-journeys-note { font-size: 0.86rem; color: rgba(255,255,255,0.6); }

.corpus-item-q {
    font-size: 0.92rem;
    color: #fff;
    margin-bottom: 10px;
}

.corpus-item-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.corpus-option {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.6);
    padding: 6px 10px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.08);
}

.corpus-option.is-correct {
    color: #7deda9;
    border-color: rgba(46,204,113,0.4);
    background: rgba(46,204,113,0.08);
    font-weight: 600;
}

.corpus-item-explain {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    font-style: italic;
}

.corpus-item code, .corpus-item-q code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    background: rgba(0,0,0,0.25);
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
}

.corpus-gap-answer, .corpus-spot-code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.25);
    padding: 8px 12px;
    border-radius: 8px;
    white-space: pre-wrap;
    margin-bottom: 6px;
}

.corpus-spot-line {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.85rem;
    padding: 3px 0;
}

.corpus-spot-line.is-buggy { color: #f9ca6d; }
.corpus-spot-letter { color: rgba(255,255,255,0.35); min-width: 1.2em; }

.corpus-pairs { display: flex; flex-direction: column; gap: 8px; }
.corpus-pair {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.86rem;
}
.corpus-pair-arrow { color: rgba(255,255,255,0.35); }

/* ── Module list (journey hub) ────────────────────────────────────── */
.corpus-module-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.corpus-module-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s;
}
.corpus-module-row:hover { background: rgba(255,255,255,0.1); }

.corpus-module-pos {
    min-width: 24px;
    font-size: 0.78rem;
    font-weight: 700;
    color: rgba(255,255,255,0.35);
}

.corpus-module-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: #fff;
}

.corpus-module-row-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.corpus-module-desc {
    font-size: 0.78rem;
    color: rgba(255,255,255,0.5);
    line-height: 1.4;
}

/* ── FAQ (subject hub) ─────────────────────────────────────────────── */
.corpus-faq-item {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
}
.corpus-faq-item summary {
    cursor: pointer;
    font-weight: 600;
    color: #fff;
    font-size: 0.92rem;
    list-style: none;
}
.corpus-faq-item summary::-webkit-details-marker { display: none; }
.corpus-faq-item summary::after { content: '+'; float: right; color: rgba(255,255,255,0.4); }
.corpus-faq-item[open] summary::after { content: '−'; }
.corpus-faq-item p { margin-top: 10px; color: rgba(255,255,255,0.65); font-size: 0.86rem; line-height: 1.6; }

/* ── Pager / CTA ───────────────────────────────────────────────────── */
.corpus-pager {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    margin: 40px 0 24px;
    font-size: 0.86rem;
}

.corpus-pager a {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
}
.corpus-pager a:hover { color: #fff; }

.corpus-cta {
    text-align: center;
    padding: 28px 20px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    margin-top: 12px;
}

.corpus-cta p {
    color: rgba(255,255,255,0.6);
    font-size: 0.9rem;
    margin-bottom: 14px;
}

.corpus-cta a.btn-start {
    display: inline-block;
}

/* ── Teacher block (module pages) ─────────────────────────────────── */
.corpus-teacher-block {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 20px 22px;
    margin: 24px 0 32px;
}
.corpus-teacher-line { color: rgba(255,255,255,0.8); font-size: 0.9rem; line-height: 1.6; margin-bottom: 14px; }
.corpus-teacher-actions { display: flex; flex-direction: column; gap: 10px; }
.corpus-teacher-actions .btn-card-secondary { text-align: center; }

/* Small muted metadata line (e.g. "Part of: ...") — deliberately distinct
   from .corpus-lede so it doesn't compete with the module's own concept
   line for visual weight. */
.corpus-meta-line { font-size: 0.78rem; color: rgba(255,255,255,0.45); margin-top: 6px; }

/* ── Upsell block (module pages) ──────────────────────────────────── */
.corpus-upsell { margin: 40px 0 12px; }
.corpus-upsell-sub { color: rgba(255,255,255,0.55); font-size: 0.88rem; margin: -6px 0 18px; }
.corpus-upsell-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
@media (min-width: 640px) {
    .corpus-upsell-grid { grid-template-columns: 1fr 1fr; }
}
.corpus-upsell-tile {
    display: flex;
    align-items: stretch;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
}
/* Fixed-width column, stretched to the tile's full (content-driven) height —
   the image reads as a photo strip, not a small padded icon. */
.corpus-upsell-icon {
    width: 120px;
    height: 100%;
    object-fit: cover;
    flex-shrink: 0;
}
.corpus-upsell-tile-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px 18px;
    min-width: 0;
}

/* The certificate art is a wide document, not a photo — cropping it in
   (like the cover-fit badge/Sprint tiles) zooms into an unrecognisable,
   pixelated sliver. Show it whole instead, on its own light card. */
.corpus-upsell-icon-contain {
    width: 150px;
    object-fit: contain;
    padding: 10px;
    background: rgba(255,255,255,0.03);
}
.corpus-upsell-tile-title { font-weight: 700; color: #fff; font-size: 0.9rem; margin-bottom: 4px; }
.corpus-upsell-tile-body p { color: rgba(255,255,255,0.6); font-size: 0.82rem; line-height: 1.5; margin: 0; }

/* Real Study Buddy brand assets (Caveat wordmark + the .sb-module-card
   ruled-paper background from student/study-buddy.css), reused unmodified
   rather than a fabricated screenshot-shaped recreation of the app. */
.corpus-upsell-sb-card {
    width: 120px;
    height: 100%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
    background-color: #fbf7ea;
    background-image: repeating-linear-gradient(to bottom, transparent, transparent 15px, rgba(90,110,190,0.25) 16px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}
.corpus-upsell-sb-wordmark {
    font-family: 'Caveat', cursive;
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.05;
    color: #2D2B55;
}
.corpus-upsell-cta { text-align: center; margin-top: 26px; }
.corpus-upsell-cta .btn-start { display: block; width: 100%; font-size: 1.72rem; padding: 16px 20px; }

/* ── Activity flow (module pages) — Learning/Applying/Testing ──────── */
.corpus-flow { margin: 40px 0 12px; }
.corpus-flow-track {
    display: flex;
    align-items: stretch;
    gap: 10px;
    margin-top: 4px;
}
.corpus-flow-stage {
    flex: 1;
    min-width: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    padding: 14px;
}
.corpus-flow-stage-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 2.04rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #b3aefc;
    line-height: 1.1;
    margin-bottom: 16px;
}
.corpus-flow-arrow {
    display: flex;
    flex-shrink: 0;
    width: 34px;
}
.corpus-flow-arrow-shape {
    width: 100%;
    background: rgba(255,255,255,0.14);
    clip-path: polygon(0% 30%, 55% 30%, 55% 0%, 100% 50%, 55% 100%, 55% 70%, 0% 70%);
}
.corpus-flow-activity-name {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    margin: 14px 0 6px;
}
.corpus-flow-stage-label + .corpus-flow-activity-name { margin-top: 0; }

@media (max-width: 640px) {
    .corpus-flow-track { flex-direction: column; }
    .corpus-flow-arrow { width: 100%; height: 30px; }
    .corpus-flow-arrow-shape { transform: rotate(90deg); }
}

/* Mini mocks — small, schematic recreations built from each real activity
   page's own CSS tokens (colours, fonts, gradients), not screenshots and
   not a fabricated look-alike. Text is illustrative, not literal content. */
.flow-mock { border-radius: 8px; overflow: hidden; font-family: 'SFMono-Regular', Consolas, monospace; }

.flow-mock-duo { background: linear-gradient(180deg, #E8F0F7 0%, #F5F7FA 100%); padding: 7px 8px; }
.fm-duo-prompt { font-size: 8px; color: #2C3E50; margin-bottom: 5px; line-height: 1.3; }
.fm-duo-hl { background: rgba(155,138,196,0.18); color: #6B5B95; border-radius: 3px; padding: 0 2px; }
.fm-duo-cards { display: flex; gap: 4px; }
.fm-duo-card { flex: 1; background: #fff; border: 1px solid #cbd5e1; border-radius: 5px; padding: 4px; font-size: 8px; text-align: center; color: #2C3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-duo-card.is-correct { border-color: #7FB069; background: rgba(127,176,105,0.16); color: #3f6b2c; font-weight: 700; }

.flow-mock-matches { background: #D4E5F7; padding: 7px 8px; display: flex; flex-direction: column; gap: 2px; align-items: stretch; }
.fm-matches-card { font-size: 8px; padding: 4px 6px; border-radius: 5px; border: 1.5px solid; color: #2C3E50; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.fm-matches-card.fm-matches-error { background: rgba(255,229,232,0.9); border-color: #E76B74; }
.fm-matches-card.fm-matches-correct { background: rgba(232,245,233,0.9); border-color: #7FB069; }
.fm-matches-card.fm-matches-terminal { background: rgba(28,28,28,0.92); border-color: #555; color: #e0e0e0; }
.fm-matches-arrow { text-align: center; font-size: 8px; line-height: 1; color: rgba(44,62,80,0.4); }
.fm-matches-def { background: rgba(255,255,255,0.6); border: 1.5px dashed rgba(44,62,80,0.3); border-radius: 5px; padding: 4px 6px; font-size: 7.5px; color: #2C3E50; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.flow-mock-meanings { background: #fff; padding: 7px 8px; }
.fm-meanings-label { font-size: 6.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #95A5A6; }
.fm-meanings-term { font-size: 9px; font-weight: 700; color: #2C3E50; margin: 2px 0 5px; }
.fm-meanings-rule { height: 1px; background: #E0E0E0; margin-bottom: 5px; }
.fm-meanings-def { font-size: 7.5px; color: #5A6C7D; margin-top: 2px; font-family: 'Lexend Deca', sans-serif; }

.flow-mock-practice { background: #fff; }
.fm-practice-code { padding: 6px 7px; font-size: 8.5px; color: #2C3E50; }
.fm-practice-caret { background: #8800FF; color: #fff; border-radius: 2px; padding: 0 1px; }
.fm-practice-typing { background: #2D2B55; height: 14px; }

.flow-mock-gaps { background: #F8F9FA; border: 1px solid #E0E0E0; padding: 7px 8px; }
.fm-gaps-blank { font-size: 8.5px; color: #2C3E50; margin-bottom: 5px; }
.fm-gaps-dash { display: inline-block; width: 22px; border-bottom: 2px dashed #5B8DEE; margin-right: 3px; }
.fm-gaps-btn { background: linear-gradient(135deg, #5B8DEE, #4ECDC4); color: #fff; font-size: 7.5px; font-weight: 700; text-align: center; border-radius: 20px; padding: 4px 0; font-family: 'Lexend Deca', sans-serif; }

.flow-mock-spots { background: #fff; padding: 4px; }
.fm-spots-line { font-size: 8px; color: #2C3E50; padding: 3px 5px; border-radius: 4px; white-space: nowrap; }
.fm-spots-line.is-flagged { background: #E3EAFF; }
.fm-spots-num { color: #95A5A6; margin-right: 6px; }

/* Fallback when a module's content doesn't yield a usable real sample —
   plain description, no fabricated code (see flowGenericMock). */
.flow-mock-generic {
    background: rgba(255,255,255,0.06);
    padding: 10px 8px;
    font-family: 'Lexend Deca', sans-serif;
    font-size: 8.5px;
    line-height: 1.4;
    color: rgba(255,255,255,0.55);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}

/* ── Split CTA (teacher / student) ────────────────────────────────── */
.corpus-split-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}
.corpus-split-cta-col {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    padding: 22px 20px;
    text-align: center;
}
.corpus-split-cta-label {
    font-family: 'Lexend Deca', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: rgba(255,255,255,0.4);
    margin-bottom: 8px;
}
.corpus-split-cta-col p { color: rgba(255,255,255,0.7); font-size: 0.86rem; line-height: 1.5; margin-bottom: 14px; }
.corpus-split-cta-col .btn-start { display: inline-block; margin-bottom: 8px; }
.corpus-split-cta-footnote { font-size: 0.72rem !important; color: rgba(255,255,255,0.4) !important; margin: 8px 0 0 !important; }

@media (max-width: 640px) {
    .corpus-split-cta { grid-template-columns: 1fr; }
}

/* ── Print (module pages) ─────────────────────────────────────────── */
.corpus-print-fields { display: none; }

@media print {
    .no-print { display: none !important; }
    .top-nav, .corpus-back, .corpus-pager { display: none !important; }
    .corpus-container { max-width: 100%; padding: 0; }
    body { background: #fff; color: #000; }
    .corpus-title { color: #000; }
    .corpus-lede { color: #333; }
    .corpus-item { background: #fff; border: 1px solid #ccc; }
    .corpus-item-q { color: #000; }
    .corpus-print-fields {
        display: block;
        font-size: 10pt;
        color: #333;
        border-bottom: 1px solid #ccc;
        padding-bottom: 10px;
        margin-bottom: 16px;
    }
}