/* Night theme for every corpus page (scripts/build-corpus.js pageShell:
   module worksheet pages, subject / journey / catalogue / printables hubs,
   and the Hangman pages). Sits on top of corpus.css.

   Every value below is copied from teacher/class-progress.css (the site's
   design-system reference): the palette, Baloo 2 / Nunito Sans, cards
   (.rail-card), labels (.tool-control-label), the Caveat gold subheading
   (.hm-section-sub ← .rail-heading--script), the purple gummy button
   (.cp-welcome-btn) and the glass button (.hm-btn). Keep them in step.

   Screen only: corpus.css's @media print block turns the module page into
   a black-on-white worksheet, and these more specific rules would
   otherwise print white text on white paper. */

@media screen {

body.corpus-night {
    --font-display: 'Baloo 2', 'Fredoka', cursive;
    --font-body: 'Nunito Sans', system-ui, sans-serif;
    --cp-bg: #2B1D4B;
    --cp-panel: #3E2F6D;
    --cp-card: #33255A;
    --cp-accent: #EE7F3B;
    --cp-accent-soft: rgba(238,127,59,0.14);
    --cp-accent-line: rgba(238,127,59,0.6);
    background: #241a3c;
    color: #fff;
    font-family: var(--font-body);
}
.corpus-night .corpus-container { padding-top: 18px; }

/* ── Type ───────────────────────────────────────────────────────────── */
.corpus-night .corpus-title {
    font-family: var(--font-display);
    font-weight: 800;
    font-size: clamp(2rem, 4.6vw, 2.75rem);
    letter-spacing: 0;
    line-height: 1.1;
    margin: 8px 0 6px;
}
.corpus-night .corpus-section-title {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.15;
    margin: 0 0 12px;
}
/* A one-line sub under a section heading: the class page's Caveat gold */
.corpus-night .corpus-section-title + .corpus-upsell-sub {
    margin: -10px 0 14px;
    font-family: 'Caveat', cursive;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.1;
    color: #FBBF24;
}
.corpus-night .corpus-lede { color: #E4D9FF; font-size: 1.05rem; }
.corpus-night .corpus-intro-p { color: #B3A2D8; }
.corpus-night .corpus-intro-p strong { color: #fff; font-weight: 900; }
.corpus-night .corpus-meta-line { color: #9B8AC4; font-size: 0.8rem; font-weight: 600; }
.corpus-night .corpus-back { color: #9B8AC4; font-family: var(--font-body); font-weight: 700; }
.corpus-night .corpus-back:hover { color: #fff; }
.corpus-night .corpus-inline-link { color: #C4B5FD; }
.corpus-night .corpus-inline-link:hover { color: #fff; }
.corpus-night .corpus-header { margin-bottom: 30px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
/* .cp-welcome-btn */
.corpus-night .btn-start {
    padding: 12px 22px;
    border: none;
    border-radius: 14px;
    background: #7C2BF5;
    color: #fff;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 4px 0 rgba(0,0,0,.2);
    transition: transform .15s, background .15s;
    opacity: 1;
}
.corpus-night .btn-start:hover { background: #8F45FF; transform: translateY(-2px); opacity: 1; }
.corpus-night .btn-start:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }
/* .hm-btn — the glass secondary */
.corpus-night .btn-card-secondary {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 14px;
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1.2;
    transition: background .15s;
}
.corpus-night .btn-card-secondary:hover { background: rgba(255,255,255,0.18); color: #fff; }
.corpus-night .btn-card-secondary:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }

/* ── Cards (.rail-card) ─────────────────────────────────────────────── */
.corpus-night .corpus-teacher-block,
.corpus-night .corpus-flow-stage,
.corpus-night .corpus-upsell-tile,
.corpus-night .corpus-item,
.corpus-night .corpus-faq-item,
.corpus-night .corpus-action-col,
.corpus-night .corpus-split-cta-col,
.corpus-night .corpus-cta {
    background: var(--cp-card);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
}

/* Teacher block: what the page is for — print, or add to a class */
.corpus-night .corpus-teacher-block { padding: 20px 22px; box-shadow: 0 20px 44px rgba(11,16,32,.35); }
.corpus-night .corpus-teacher-line { color: #E4D9FF; font-size: 0.95rem; font-weight: 700; }
.corpus-night .corpus-teacher-actions .btn-start { font-size: 1.25rem; padding: 14px 18px; }
.corpus-night .corpus-add-secondary { padding: 11px 16px; }
.corpus-night .corpus-teacher-also { color: #B3A2D8; }

/* ── Activity flow: Learning → Applying → Testing ──────────────────── */
.corpus-night .corpus-flow-stage { padding: 14px 16px 16px; }
.corpus-night .corpus-flow-stage-label {
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 12px;
}
/* .tool-control-label */
.corpus-night .corpus-flow-activity-name {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    font-weight: 900;
    color: #9B8AC4;
    text-transform: uppercase;
}
.corpus-night .corpus-flow-arrow-shape { background: rgba(255,255,255,0.12); }
.corpus-night .flow-mock { border-radius: 10px; }
.corpus-night .flow-mock-generic { background: rgba(16,8,34,0.45); color: #B3A2D8; font-family: var(--font-body); }

/* ── Upsell: what a class adds ──────────────────────────────────────── */
.corpus-night .corpus-upsell-sub { color: #B3A2D8; font-size: 0.95rem; }
.corpus-night .corpus-upsell-tile { transition: border-color .15s; }
.corpus-night .corpus-upsell-icon-contain { background: rgba(255,255,255,0.04); }
.corpus-night .corpus-upsell-tile-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 800; line-height: 1.2; }
.corpus-night .corpus-upsell-tile-body p { color: #B3A2D8; font-size: 0.86rem; font-weight: 600; }
.corpus-night .corpus-upsell-cta .btn-start { font-size: clamp(1.4rem, 3vw, 1.9rem); padding: 14px 22px; }

/* ── Questions and answers ──────────────────────────────────────────── */
.corpus-night .corpus-section { margin: 36px 0; }
.corpus-night .corpus-item { padding: 16px 18px; margin-bottom: 10px; }
.corpus-night .corpus-item-q { font-weight: 800; font-size: 0.98rem; }
.corpus-night .corpus-option {
    color: #E4D9FF;
    font-weight: 600;
    border-radius: 13px;
    border-color: rgba(255,255,255,0.12);
    background: rgba(16,8,34,0.3);
    padding: 8px 12px;
}
/* the class page's green */
.corpus-night .corpus-option.is-correct {
    color: #A9E77A;
    border-color: rgba(119,192,67,0.5);
    background: rgba(119,192,67,0.16);
    font-weight: 800;
}
.corpus-night .corpus-item-explain { color: #B3A2D8; font-size: 0.85rem; }
.corpus-night .corpus-item code,
.corpus-night .corpus-item-q code,
.corpus-night .corpus-gap-answer,
.corpus-night .corpus-spot-code { background: rgba(16,8,34,0.45); color: #fff; }
.corpus-night .corpus-gap-answer { border-radius: 13px; }
.corpus-night .corpus-spot-line { color: #E4D9FF; }
.corpus-night .corpus-spot-line.is-buggy { color: #FBBF24; font-weight: 700; }
.corpus-night .corpus-spot-letter { color: #8E7DB8; font-weight: 700; }
.corpus-night .corpus-pair { color: #E4D9FF; font-weight: 600; padding: 4px 0; border-bottom: 1px solid rgba(255,255,255,0.08); }
.corpus-night .corpus-pair:last-child { border-bottom: none; }
.corpus-night .corpus-pair-arrow { color: #FBBF24; font-weight: 900; }

/* ── Lists, FAQ, pager ──────────────────────────────────────────────── */
.corpus-night .corpus-module-row {
    background: var(--cp-card);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 16px;
    transition: background-color .15s, border-color .15s;
}
.corpus-night .corpus-module-row:hover { background-color: var(--cp-panel); border-color: rgba(255,255,255,0.22); }
/* Worksheet / crossword / word search rows: the class page's "Print a…"
   rows (.print-row--* and their .rail-art drawings). The drawings are
   background SVGs (images/printables/), not markup, so they add nothing
   to the page's text. */
.corpus-night .corpus-module-row--worksheet,
.corpus-night .corpus-module-row--crossword,
.corpus-night .corpus-module-row--wordsearch {
    background-repeat: no-repeat, no-repeat;
    background-position: right 3% center, 0 0;
    background-size: auto 130px, 100% 100%;
}
.corpus-night .corpus-module-row--worksheet {
    background-image: url("/images/printables/art-worksheet.svg?v=2"), linear-gradient(100deg, rgba(255,255,255,.07) 30%, rgba(251,191,36,.10));
}
.corpus-night .corpus-module-row--crossword {
    background-image: url("/images/printables/art-crossword.svg?v=2"), linear-gradient(100deg, rgba(255,255,255,.07) 30%, rgba(47,182,166,.12));
}
.corpus-night .corpus-module-row--wordsearch {
    background-image: url("/images/printables/art-wordsearch.svg?v=2"), linear-gradient(100deg, rgba(255,255,255,.07) 30%, rgba(238,127,59,.12));
}
/* The crossword and word search drawings are wider: smaller, and pinned right */
.corpus-night .corpus-module-row--crossword,
.corpus-night .corpus-module-row--wordsearch { background-size: auto 112px, 100% 100%; background-position: right -10px center, 0 0; }
/* Not the same stamp on every row: each of three rows catches a different
   slice of the drawing. */
.corpus-night .corpus-module-row--worksheet:nth-child(3n+2),
.corpus-night .corpus-module-row--crossword:nth-child(3n+2),
.corpus-night .corpus-module-row--wordsearch:nth-child(3n+2) { background-position: right 2% top 35%, 0 0; }
.corpus-night .corpus-module-row--worksheet:nth-child(3n),
.corpus-night .corpus-module-row--crossword:nth-child(3n),
.corpus-night .corpus-module-row--wordsearch:nth-child(3n) { background-position: right -24px bottom 30%, 0 0; }
/* Text stays clear of the drawing where there's room for both */
.corpus-night .corpus-module-row--worksheet .corpus-module-row-text,
.corpus-night .corpus-module-row--crossword .corpus-module-row-text,
.corpus-night .corpus-module-row--wordsearch .corpus-module-row-text { position: relative; }
@media (min-width: 760px) {
    .corpus-night .corpus-module-row--worksheet .corpus-module-row-text,
    .corpus-night .corpus-module-row--crossword .corpus-module-row-text,
    .corpus-night .corpus-module-row--wordsearch .corpus-module-row-text { max-width: 70%; }
}
.corpus-night .corpus-module-label { font-weight: 800; }
.corpus-night .corpus-module-desc { color: #B3A2D8; }
.corpus-night .corpus-module-pos { color: #8E7DB8; }
.corpus-night .corpus-faq-item summary { font-weight: 800; }
.corpus-night .corpus-faq-item p { color: #B3A2D8; }
.corpus-night .corpus-pager a { color: #C4B5FD; font-weight: 700; }
.corpus-night .corpus-pager a:hover { color: #fff; }
.corpus-night .corpus-student-line { color: #B3A2D8; font-weight: 600; }

.corpus-night .class-unlocks {
    background: var(--cp-card);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 20px;
}
.corpus-night .class-unlocks-title { font-family: var(--font-display); font-size: 1.3rem; font-weight: 800; }
.corpus-night .class-unlocks-lead,
.corpus-night .class-unlocks-list { color: #E4D9FF; }
.corpus-night .class-unlocks-footnote { color: #9B8AC4; }

/* ── Hub pages: subject, journey, catalogue, printables ────────────── */
/* Play · Print · Teach under the subject H1 — .tool-control-label heads */
.corpus-night .corpus-actions { gap: 14px; }
.corpus-night .corpus-action-col { padding: 16px 18px; gap: 8px; }
.corpus-night .corpus-action-head { font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 900; color: #9B8AC4; }
.corpus-night .corpus-action-col a { font-weight: 800; line-height: 1.35; }
.corpus-night .corpus-action-col a:hover { color: #FBBF24; text-decoration: none; }
.corpus-night .corpus-journey-play { margin-top: 18px; }
.corpus-night .printables-subhead {
    margin: 22px 0 10px;
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 800;
    color: #E4D9FF;
}
.corpus-night .corpus-journeys-note { color: #B3A2D8; font-weight: 600; }
.corpus-night .corpus-section > .corpus-item { color: #E4D9FF; line-height: 1.7; }

/* Catalogue journey cards: the Discover card (journeys.css), whose fonts
   come from --font-display above */
.corpus-night .corpus-card { color: #fff; text-decoration: none; }
.corpus-night .corpus-card .card-desc { color: #B3A2D8; }
.corpus-night .corpus-card .card-meta { color: #C4B5FD; }

/* Teacher / student split CTA */
.corpus-night .corpus-split-cta-col { padding: 22px 22px 20px; }
.corpus-night .corpus-split-cta-label { font-family: var(--font-body); font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 900; color: #9B8AC4; }
.corpus-night .corpus-split-cta-col p { color: #E4D9FF; font-size: 0.92rem; font-weight: 600; }
.corpus-night .corpus-split-cta-footnote { color: #9B8AC4 !important; }
.corpus-night .corpus-cta p { color: #B3A2D8; }

/* ── Top row: back link · Copy link + Email (content/share-page.js) ──
   The pair is the journeys page's link chip as it is: journeys.css
   .panel-chip.panel-chip-icon (glass, purple on hover). Only the label
   and the fallback panel below are styled here. */
.corpus-night .corpus-toprow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 24px;
}
.corpus-night .corpus-toprow .corpus-back { margin-bottom: 0; min-width: 0; }
.share-actions { display: flex; gap: 6px; flex-shrink: 0; }
.share-btn { position: relative; text-decoration: none; }
.share-btn:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }
/* Label on hover / keyboard focus; "Copied" in gold once done */
.share-tip {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    padding: 4px 10px;
    border-radius: 999px;
    background: #1B1336;
    border: 1px solid rgba(255,255,255,.12);
    color: #E4D9FF;
    font: 800 0.72rem/1.2 var(--font-body);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-3px);
    transition: opacity .15s, transform .15s;
    z-index: 21;
}
.share-btn:hover .share-tip,
.share-btn:focus-visible .share-tip,
.share-btn.is-done .share-tip { opacity: 1; transform: none; }
.share-btn.is-done .share-tip { background: #FBBF24; border-color: #FBBF24; color: #241a3c; }
.share-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Copy-this-instead panel: clipboard refused, or no email app opened */
.share-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    z-index: 20;
    width: min(440px, calc(100vw - 32px));
    padding: 16px 16px 14px;
    border-radius: 20px;
    background: var(--cp-panel);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 20px 44px rgba(11,16,32,.45);
}
.share-panel[hidden] { display: none; }
.share-panel-label { margin: 0 0 4px; font-size: 0.72rem; letter-spacing: 1.5px; font-weight: 900; color: #9B8AC4; text-transform: uppercase; }
.share-panel-note { margin: 0 0 10px; font-size: 0.85rem; font-weight: 600; color: #E4D9FF; line-height: 1.45; }
.share-panel textarea {
    display: block;
    width: 100%;
    box-sizing: border-box;
    resize: vertical;
    background: rgba(16,8,34,0.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 13px;
    padding: 10px 12px;
    font: 600 0.88rem/1.5 var(--font-body);
}
.share-panel textarea:focus { outline: none; border-color: var(--cp-accent-line); }
.share-panel-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.share-panel-btn {
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 12px;
    padding: 7px 14px;
    font: 800 0.95rem/1.2 var(--font-display);
    cursor: pointer;
}
.share-panel-btn:hover { background: rgba(255,255,255,0.18); }
.share-panel-btn.is-primary { background: #7C2BF5; border-color: #7C2BF5; }
.share-panel-btn.is-primary:hover { background: #8F45FF; }
.share-panel-btn:focus-visible { outline: 3px solid #FBBF24; outline-offset: 3px; }

}