/*
    THE CONTENT SCREENS: THE PROTOTYPE'S LAYOUT, THIS PRODUCT'S COLOURS.

    The founder's prototype (Lumio Content Studio) is the reference for how these four pages are
    ARRANGED — Textbooks, Lesson Plans, Question Bank, Flashcards. What it got right is structure:

      · a page head that says what the screen is for, in one line
      · one card per idea, each with a small bold heading and a quiet line under it
      · small, strong field labels above every control
      · generous, even spacing — 22px inside a card, 22px between them
      · a flashcard that is an object you turn over, not a paragraph with a button beside it

    NOT ONE COLOUR IS TAKEN FROM IT. The founder's instruction is explicit: layout from the
    prototype, palette from OUR theme. So every colour below is read from the theme's own Bootstrap
    variables — the school picks its theme colour on the Preferences screen, and these pages follow
    it. A hard-coded hex here would be a page that stops matching the product the day somebody
    changes the theme, and nobody would think to look in this file.

    EVERYTHING IS SCOPED UNDER .studio, so a page opts in by wrapping itself and no other screen can
    be affected by anything written here.
*/

.studio {
    /* Layout constants — the prototype's own measurements, read off the running page. */
    --studio-radius: 14px;
    --studio-gap: 22px;
    --studio-pad: 22px;

    /* Colour comes from the theme, never from here. */
    --studio-surface: var(--bs-paper-bg, #fff);
    --studio-line: var(--bs-border-color);
    --studio-ink: var(--bs-heading-color);
    --studio-ink-soft: var(--bs-body-color);
    --studio-muted: var(--bs-secondary-color);
    --studio-accent: var(--bs-primary);
    --studio-accent-soft: var(--bs-primary-bg-subtle);

    /* Depth, not colour: plain black at very low opacity works on any theme. */
    --studio-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 16px rgba(0, 0, 0, .06);
}

/* ---------------------------------------------------------------- the page */

.studio-head {
    margin-bottom: var(--studio-gap);
}

/*
    NO TITLE OF ITS OWN. The app's own page header already prints the screen's name beside its
    information icon, and a heading here repeated it — the founder saw "Textbooks" twice, one above
    the other.

    ⚠️ AND NO EXPLANATION EITHER. FOUNDER'S INSTRUCTION, 2026-09-12: "lots of static text remove from
    this & all page". Twenty-two screens opened with a paragraph explaining what the screen was for,
    and on eleven of them it was a shortened copy of the very text already behind the ⓘ beside the
    page's name — the reader was made to scroll past the same sentence twice before reaching anything
    they could use.

    THE RULE THIS BLOCK NOW KEEPS: it holds only what a reader CANNOT get from the heading — live
    data ("80 marks, 120 minutes"), a person's name on their own screen ("this is Aarav's page"), a
    way to REACH somewhere else, or a rule about using the controls below that cannot be guessed
    ("a blank box means not attempted; type 0 for attempted and scored nothing").

    Explaining the screen goes in ViewData["PageInfo"], which is what the ⓘ shows. Nothing was
    deleted in that sweep without first checking a page HAD that icon; five screens had none, so
    their paragraph was moved into one rather than thrown away.
*/
.studio-head p {
    margin: 0;
    max-width: 70ch;
    color: var(--studio-ink-soft);
}

/* ------------------------------------------------- the split top of a screen */

/*
    THE PROTOTYPE'S TOP ROW: what you are working ON beside what you can MAKE from it.

    Stacked full width, the four cards that begin this screen push the real work below the fold —
    the founder's point exactly, holding the two side by side. The prototype puts the source and its
    context in one column and the things you can create in the other, so the whole job is visible
    without scrolling.

    IT COLLAPSES BELOW 992px rather than shrinking. Two columns of form fields on a tablet gives two
    unusable columns instead of one usable one.
*/
.studio-split {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--studio-gap);
    align-items: start;
}

@media (min-width: 992px) {
    .studio-split {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
}

/* A card inside the split carries the gap itself, so the grid does not double it. */
.studio-split > .studio-card,
.studio-split > div > .studio-card:last-child {
    margin-bottom: 0;
}

.studio-split > div {
    display: grid;
    gap: var(--studio-gap);
    align-content: start;
}

/* ---------------------------------------------------------------- the tiles */

/*
    "CREATE" — one tile per thing this product can make.

    THE COLOURS ARE THE THEME'S, NOT THE PROTOTYPE'S. Its tiles are indigo, emerald, amber and rose
    as fixed hexes; ours are the four Bootstrap intents the school's own theme defines, so the tiles
    follow a theme change instead of quietly becoming the only part of the page that did not (the
    standing rule at the top of this file).
*/
.studio-tiles {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 16px;
}

@media (min-width: 576px) {
    .studio-tiles {
        grid-template-columns: 1fr 1fr;
    }
}

.studio-tile {
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px;
    text-align: left;
    text-decoration: none;
    color: inherit;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}

.studio-tile:hover,
.studio-tile:focus-visible {
    color: inherit;
    border-color: var(--studio-accent);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
    transform: translateY(-1px);
}

/*
    A TILE THAT LEADS NOWHERE YET SAYS SO BY LOOKING SPENT. Until a class and a subject are chosen
    there is nothing to generate against, and a tile that looks live but refuses is worse than one
    that plainly is not ready.
*/
.studio-tile.is-waiting {
    opacity: .55;
    pointer-events: none;
}

.studio-tile-icon {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 10px;
    display: grid;
    place-items: center;
    font-size: 20px;
}

.studio-tile-name {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--studio-ink);
}

.studio-tile-what {
    display: block;
    font-size: 11.5px;
    margin-top: 2px;
    color: var(--studio-muted);
}

.studio-tile-plan   { background: var(--bs-primary-bg-subtle); color: var(--bs-primary); }
.studio-tile-work   { background: var(--bs-success-bg-subtle); color: var(--bs-success); }
.studio-tile-ask    { background: var(--bs-warning-bg-subtle); color: var(--bs-warning); }
.studio-tile-recall { background: var(--bs-danger-bg-subtle);  color: var(--bs-danger); }

/* ---------------------------------------------------------------- cards */

.studio-card {
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    box-shadow: var(--studio-shadow);
    padding: var(--studio-pad);
    margin-bottom: var(--studio-gap);
}

.studio-card > h3 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
    color: var(--studio-ink);
}

.studio-sub {
    margin: 0 0 16px;
    font-size: 13.5px;
    color: var(--studio-ink-soft);
}

/* The last thing in a card should not push it open at the bottom. */
.studio-card > :last-child {
    margin-bottom: 0;
}

/* ---------------------------------------------------------------- fields */

/*
    Only the LABEL is restyled — smaller and bolder than the body, sitting close above its control.
    The controls themselves are left entirely to the theme, so a box on this page is the same box as
    on every other screen in the product.
*/
.studio .form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--studio-ink-soft);
}

.studio .form-text {
    font-size: 12.5px;
}

/* ---------------------------------------------------------------- action tiles */

/*
    A TILE, NOT A BUTTON: what it is on one line, what it gives you on the next. A row of bare
    buttons asks the reader to already know the difference between them.
*/
.studio-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 12px;
}

.studio-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    padding: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s;
}

.studio-tile:hover {
    border-color: var(--studio-accent);
    box-shadow: var(--studio-shadow);
    color: inherit;
    text-decoration: none;
}

.studio-tile .studio-tile-mark {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 10px;
    background: var(--studio-accent-soft);
    color: var(--studio-accent);
    font-size: 18px;
}

.studio-tile .studio-tile-title {
    display: block;
    font-weight: 600;
    line-height: 1.2;
}

.studio-tile .studio-tile-note {
    display: block;
    font-size: 12.5px;
    color: var(--studio-muted);
}

/* ---------------------------------------------------------------- the quiet button */

/*
    A PILL, NOT A BUTTON. The prototype puts its secondary action — "manage stored outcomes" — under
    the fields as a small outlined pill, so it reads as "there is more to see here" rather than
    competing with the thing you came to press. Ours says VIEW, because on this screen the syllabus is
    to be looked at and never edited.
*/
.studio-pill-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border: 1px solid var(--studio-line);
    border-radius: 999px;
    background: var(--studio-surface);
    color: var(--studio-accent);
    font-size: 12.5px;
    font-weight: 600;
}

.studio-pill-btn:hover {
    border-color: var(--studio-accent);
    background: var(--studio-accent-soft);
}

/* ---------------------------------------------------------------- small parts */

.studio-pill {
    display: inline-block;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--studio-accent-soft);
    color: var(--studio-accent);
    font-size: 12.5px;
    font-weight: 600;
}

.studio-stat {
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    padding: 12px 14px;
    background: var(--studio-surface);
}

.studio-stat .studio-stat-value {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--studio-ink);
}

.studio-stat .studio-stat-label {
    font-size: 12.5px;
    color: var(--studio-muted);
}

.studio-empty {
    padding: 28px;
    text-align: center;
    color: var(--studio-ink-soft);
    border: 1px dashed var(--studio-line);
    border-radius: 12px;
}

/* ---------------------------------------------------------------- the flip card */

/*
    A CARD THAT TURNS OVER, because that is what a flashcard is. The prototype gives the whole face a
    click target and a hint rather than a button beside a paragraph, and the deck then reads as
    something to work through rather than a list to read.
*/
.studio-flip {
    perspective: 1200px;
    cursor: pointer;
    height: 100%;
}

.studio-flip-inner {
    position: relative;
    height: 100%;
    min-height: 168px;
    transition: transform .5s;
    transform-style: preserve-3d;
}

.studio-flip.is-flipped .studio-flip-inner {
    transform: rotateY(180deg);
}

.studio-flip-face {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    backface-visibility: hidden;
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    border-radius: var(--studio-radius);
    box-shadow: var(--studio-shadow);
    padding: 18px;
    overflow: auto;
}

/* The answer side is tinted with the THEME's own accent, so it follows the school's colour. */
.studio-flip-back {
    transform: rotateY(180deg);
    background: var(--studio-accent-soft);
}

.studio-flip-tag {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--studio-muted);
}

.studio-flip-hint {
    margin-top: auto;
    font-size: 12px;
    color: var(--studio-muted);
}

@media (prefers-reduced-motion: reduce) {
    .studio-flip-inner { transition: none; }
}

/* ---------------------------------------------------------------- the deck */

/*
    ONE BIG CARD, CENTRED, WITH AN ARROW EACH SIDE. The prototype's shape, and the reason is that a
    deck is worked THROUGH: the card has to be the only thing on screen worth looking at, or the eye
    reads the next one and the recall never happens.

    EVERY COLOUR HERE COMES FROM THE THEME. The prototype's card is a blue gradient; ours is the
    school's own primary, so a school that changes its colour changes this too.
*/
.studio-deck {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.studio-deck-stage {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 760px;
}

.studio-deck-cards {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 320px;
}

.studio-deck-slot {
    display: none;
}

.studio-deck-slot.is-current {
    display: block;
}

.studio-deck-slot .studio-flip-inner {
    min-height: 320px;
}

/* THE QUESTION SIDE CARRIES THE COLOUR; the answer side is the quiet one, so turning it over reads
   as arriving somewhere rather than as another card. */
.studio-deck-slot .studio-flip-face {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 32px;
    background: linear-gradient(150deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 72%, #000));
    border-color: transparent;
    color: #fff;
}

.studio-deck-slot .studio-flip-face .studio-flip-tag,
.studio-deck-slot .studio-flip-face .studio-flip-hint {
    color: rgba(255, 255, 255, .78);
}

.studio-deck-slot .studio-flip-back {
    background: var(--studio-surface);
    border-color: var(--studio-line);
    color: inherit;
}

.studio-deck-slot .studio-flip-back .studio-flip-tag,
.studio-deck-slot .studio-flip-back .studio-flip-hint {
    color: var(--studio-muted);
}

.studio-deck-text {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    text-wrap: balance;
}

.studio-deck-options,
.studio-deck-why {
    font-size: 14px;
    white-space: pre-wrap;
    opacity: .85;
}

.studio-deck-hint,
.studio-deck-slot .studio-flip-hint {
    margin-top: auto;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .08em;
}

.studio-deck-arrow {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--studio-line);
    background: var(--studio-surface);
    color: var(--bs-primary);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
}

.studio-deck-arrow:hover {
    background: var(--studio-accent-soft);
}

.studio-deck-count {
    font-size: 13px;
    color: var(--studio-muted);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 575.98px) {
    .studio-deck-stage { gap: 6px; }
    .studio-deck-slot .studio-flip-face { padding: 20px; }
    .studio-deck-text { font-size: 17px; }
}

/* ---------------------------------------------------------------- the board */

/*
    TEACH — READ FROM THE BACK ROW, NOT FROM A DESK.

    Every other screen here is read by one person at arm's length. This one is projected onto a wall
    and read by thirty children at four metres, which is the only reason it has type sizes of its own:
    the theme's body size is right everywhere else and unreadable here.

    THE SIZES ARE IN rem, so a school that scales its browser text scales this with it.
*/
.teach-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--studio-ink);
}

.teach-section + .teach-section {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--studio-line);
}

.teach-section h4 {
    margin: 0 0 12px;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--studio-accent);
}

.teach-field + .teach-field {
    margin-top: 14px;
}

.teach-label {
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--studio-muted);
}

.teach-value {
    margin-top: 3px;
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--studio-ink-soft);
}

/* Full screen puts the stage on a white ground with room to breathe, and scrolls if it must. */
.teach-stage:fullscreen {
    overflow-y: auto;
    padding: 40px 56px;
    background: var(--studio-surface);
}

.teach-stage:fullscreen .teach-value {
    font-size: 1.25rem;
}

/* ------------------------------------------------- a question, on the board */

/*
    DARK ON PURPOSE, and the one place in this product that is. A projector in a lit classroom washes
    out pale backgrounds; white text on near-black is what carries to the back of the room. It is also
    an unmistakable signal that the screen has changed mode — the class is being shown something.
*/
.teach-board {
    position: fixed;
    inset: 0;
    z-index: 1080;
    background: #0f0f14;
    color: #fff;
    display: grid;
    place-items: center;
    padding: 4vh 5vw;
    overflow-y: auto;
}

body.teach-board-open {
    overflow: hidden;
}

.teach-board-inner {
    width: min(1100px, 100%);
}

.teach-board-close {
    position: absolute;
    top: 18px;
    right: 22px;
    background: none;
    border: 0;
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    opacity: .7;
    cursor: pointer;
}

.teach-board-close:hover {
    opacity: 1;
}

.teach-board-type {
    font-size: .95rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .65;
    margin-bottom: 14px;
}

.teach-board-question {
    font-size: clamp(1.6rem, 3.2vw, 2.6rem);
    font-weight: 600;
    line-height: 1.3;
}

.teach-board-options {
    margin-top: 26px;
    display: grid;
    gap: 12px;
}

.teach-board-option {
    font-size: clamp(1.1rem, 2vw, 1.5rem);
    padding: 10px 16px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 10px;
}

/*
    THE ANSWER IS HIDDEN UNTIL ASKED FOR — that is the whole point of the control. Green because it is
    the answer, and it is the only colour on this screen that means anything.
*/
.teach-board-answer {
    margin-top: 26px;
    padding: 16px 20px;
    border-radius: 10px;
    background: rgba(25, 135, 84, .18);
    border: 1px solid rgba(25, 135, 84, .45);
    font-size: clamp(1.2rem, 2.2vw, 1.7rem);
    font-weight: 600;
}

.teach-board-nav {
    margin-top: 32px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.teach-board-count {
    opacity: .65;
    font-size: .95rem;
}

/* ------------------------------------------------------- a child's own progress */

/*
    THE ENCOURAGEMENT STRIP, ON THE PRACTICE SCREEN AND NOWHERE ELSE.

    ⚠️ READ BY A MINOR. Everything in it is about THAT child — points they earned, days they turned
    up, awards they are near. There is no rank, no class average, no other pupil's name, and there
    must never be: a leaderboard tells the bottom half of a class, every day, that they are the
    bottom half, and drives away the child who most needs to keep practising.

    COLOUR COMES FROM THE THEME like everything else in this file. The one exception is the flame
    beside a streak, which is an emoji rather than a colour, so it survives any palette.
*/
.studio-earned {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: var(--studio-gap);
}

.studio-earned-tile {
    flex: 1 1 130px;
    padding: 14px 16px;
    border-radius: var(--studio-radius);
    background: var(--studio-surface);
    border: 1px solid var(--studio-line);
    box-shadow: var(--studio-shadow);
}

.studio-earned-figure {
    display: block;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--studio-accent);
    font-variant-numeric: tabular-nums;
}

.studio-earned-label {
    display: block;
    margin-top: 2px;
    font-size: .8rem;
    color: var(--studio-muted);
}

.studio-award {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    margin: 0 8px 8px 0;
    border-radius: 999px;
    font-size: .85rem;
    background: var(--studio-accent-soft);
    border: 1px solid var(--studio-accent);
    color: var(--studio-ink);
}

/* Still to earn: the same shape, quietened — visible as something to aim at, not as a failure. */
.studio-award-locked {
    background: transparent;
    border-style: dashed;
    border-color: var(--studio-line);
    color: var(--studio-muted);
}

/* ================================================================ one chapter's teaching plan */

/*
    WHY THIS SECTION EXISTS. The lesson-plan screen showed a chapter's lectures as a five-column
    TABLE, and a lecture is not a table row: it carries a title, a length, its own sub-topics, its own
    slice of the outcomes, a set of suggested videos WITH PICTURES, and five actions. Crushed into
    columns, the outcomes became a wall of bullets, the videos a stack of cropped thumbnails, and the
    actions ran off the right-hand edge of a 1440px screen — the founder's "ui is not proper".

    A LECTURE IS A RECORD, SO IT IS DRAWN AS A CARD. The rule of thumb is the one every content tool
    uses: a table when the eye compares one column down a list, a card when the eye reads one item
    across. Nobody scans a column of lesson outcomes looking for the largest.

    ⚠️ EVERY COLOUR IS THE THEME'S, like the rest of this file. A hex here is a page that stops
    matching the product the day a school changes its theme colour.
*/

/* ---------------------------------------------------------------- the chapter's progress */

/*
    HOW MUCH OF THIS CHAPTER IS PREPARED, ON ONE LINE. It was previously countable only by reading
    down the table and noticing which rows said "Write it" — so a teacher with eleven lectures could
    not answer "am I ready for Monday?" without counting.
*/
.studio-progress {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    margin-bottom: 14px;
}

.studio-progress-figure {
    font-size: 15px;
    font-weight: 700;
    color: var(--studio-ink);
    white-space: nowrap;
}

.studio-meter {
    flex: 1 1 180px;
    min-width: 140px;
    height: 8px;
    border-radius: 999px;
    background: var(--studio-line);
    overflow: hidden;
}

.studio-meter-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--studio-accent);
}

/* ---------------------------------------------------------------- one lecture */

.studio-lessons {
    display: grid;
    gap: 14px;
    margin-top: 16px;
}

.studio-lesson {
    border: 1px solid var(--studio-line);
    border-radius: 12px;
    background: var(--studio-surface);
    overflow: hidden;
}

/*
    THE ONE WITH NO PLAN IS MARKED DOWN ITS EDGE, not by the absence of a button. A missing thing is
    invisible in a list of present ones; a teacher scanning eleven lectures for the unprepared two
    should find them without reading every row.
*/
.studio-lesson.is-unplanned {
    border-left: 3px solid var(--bs-warning);
}

.studio-lesson.is-planned {
    border-left: 3px solid var(--bs-success);
}

.studio-lesson-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--studio-line);
}

/* The period number, as a marker rather than a column. */
.studio-lesson-no {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--studio-accent-soft);
    color: var(--studio-accent);
    font-size: 13px;
    font-weight: 700;
}

.studio-lesson-name {
    flex: 1 1 220px;
    min-width: 0;
}

.studio-lesson-name strong {
    display: block;
    font-size: 14.5px;
    color: var(--studio-ink);
}

.studio-lesson-sub {
    margin-top: 4px;
    font-size: 12.5px;
    color: var(--studio-muted);
    white-space: pre-line;
}

/* Status, in words as well as in the edge colour — colour alone carries no meaning. */
.studio-lesson-state {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.studio-lesson-state.is-planned {
    background: var(--bs-success-bg-subtle);
    color: var(--bs-success);
}

.studio-lesson-state.is-unplanned {
    background: var(--bs-warning-bg-subtle);
    color: var(--bs-warning);
}

/*
    TWO COLUMNS INSIDE THE CARD: what the period is answerable for, and what may be shown in it.
    Collapses to one below 992px rather than shrinking, for the same reason .studio-split does.
*/
.studio-lesson-body {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 16px;
}

@media (min-width: 992px) {
    .studio-lesson-body {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.studio-lesson-part > h4 {
    margin: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--studio-muted);
}

.studio-covers {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--studio-ink-soft);
}

.studio-covers li + li {
    margin-top: 4px;
}

/* ---------------------------------------------------------------- the videos */

/*
    A PICTURE AND A TITLE, SIDE BY SIDE. In the table these were stacked inside a 20rem column, so a
    four-video list was taller than everything beside it and pushed the actions off the screen.
*/
.studio-videos {
    display: grid;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.studio-video {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.studio-video img {
    flex: 0 0 auto;
    width: 88px;
    height: 50px;
    object-fit: cover;
    border-radius: 6px;
    background: var(--studio-line);
}

.studio-video-what {
    min-width: 0;
    font-size: 12.5px;
}

.studio-video-what a {
    display: block;
    font-weight: 600;
    color: var(--studio-ink);
    line-height: 1.3;
}

.studio-video-who {
    color: var(--studio-muted);
}

/* ---------------------------------------------------------------- what you can do with it */

/*
    THE ACTIONS IN A FOOTER OF THEIR OWN, so they cannot be squeezed by whatever the lecture happens
    to contain. In the table they shared a cell with five videos and were pushed out of sight.
*/
.studio-lesson-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--studio-line);
    background: var(--bs-tertiary-bg, transparent);
}

/* Pushes everything after it to the right-hand end of the footer. */
.studio-lesson-foot .studio-foot-gap {
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------- reference, folded away */

/*
    THE BOUND IS REFERENCE, NOT THE JOB. It must stay on the page — a teacher has to be able to see
    what the plan may cover BEFORE anything is spent — but four outcomes of prose above the work
    pushed the lectures below the fold. Open by default, foldable once read.
*/
.studio-fold > summary {
    cursor: pointer;
    font-size: 15px;
    font-weight: 700;
    color: var(--studio-ink);
}

.studio-fold > summary::marker {
    color: var(--studio-muted);
}

.studio-fold-body {
    margin-top: 12px;
}