/*
 * Library recipes: the list page and a recipe's page (library/recipes/).
 * The tiles, switches, cards and headings are design-system components; this
 * sheet only spaces the page, sets the run of show's measure and says what
 * prints. A printed recipe is the version on screen: its title, the version
 * line, the tiles outlined and the run of show, on one US Letter page.
 */

.recipe-page {
    padding-block: var(--space-8) var(--space-12);
}

/* While the header shows its nav, the page's left edge meets the LIBRARY
   tag's (js/recipe-page.js measures it and adds the class). */
@media screen and (min-width: 941px) {
    .recipe-page--aligned {
        width: auto; /* ws-container's 100% plus this margin would scroll sideways */
        margin-inline-start: calc(var(--recipe-inset) - var(--space-4));
    }
}

/* The tiles' Quick view and Swap panels. The site header stays on top as the
   page scrolls and layers above a side panel, so the panels start below it, on
   a phone too, where the panel otherwise takes the whole screen
   (js/recipe-page.js measures the header). They are a step wider than the
   panel's 360px default, so an exercise's steps get room without the panel
   taking over the recipe. */
.recipe-panel {
    --ws-side-panel-top: var(--recipe-header-height, 64px);
    --ws-side-panel-width: var(--container-xs);
}

/* An exercise's own words, as formatContent() writes them (lines broken with <br>,
   lists for steps and materials): its sections in Quick view, and a swapped-in
   exercise's Library steps in the run of show. */
.recipe-panel__text,
.recipe-run__library {
    max-inline-size: 70ch;
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--text-default);
}

.recipe-panel__text :is(ul, ol),
.recipe-run__library :is(ul, ol) {
    margin: 0;
    padding-inline-start: var(--space-5);
}

/* formatContent() leaves a <br> between list items; the items space themselves. */
.recipe-panel__text :is(ul, ol) > br,
.recipe-run__library :is(ul, ol) > br {
    display: none;
}

.recipe-panel__text li + li,
.recipe-run__library li + li {
    margin-block-start: var(--space-2);
}

/* Shown on paper only: the switches say it on screen. */
.recipe-version {
    display: none;
    margin: 0;
}

.recipe-run {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* The timeline and each step are white cards, the surface and edge the exercise
   tiles use; a step is as wide as the timeline, and its text keeps its measure. */
.recipe-shape,
.recipe-run__card {
    --card-bg: var(--bg-surface);
}

.recipe-run__script,
.recipe-run__line {
    max-inline-size: 70ch;
    margin: 0;
    font-size: var(--text-body);
    line-height: var(--leading-relaxed);
    color: var(--text-default);
}

.recipe-run__label {
    font-weight: var(--font-semibold);
    color: var(--text-dark);
}

/* A length change, FLIP-style (js/recipe-length.js): .is-flipping puts each block
   back in its old box with a transform, .is-reshaping carries it to the new one.
   The names and minutes fade back in as the blocks settle. The duration tokens
   fall to zero under reduced motion, and the script skips all of it there. */
.recipe-shape .ws-session-shape__block {
    transform-origin: 0 50%;
}

.recipe-shape .is-flipping .ws-session-shape__block {
    transform: translateX(var(--flip-x, 0)) scaleX(var(--flip-scale, 1));
    transition: none;
}

.recipe-shape .is-flipping .ws-session-shape__part > * {
    opacity: 0;
}

.recipe-shape .is-reshaping .ws-session-shape__block {
    transition: transform var(--duration-slow) var(--ease-spring);
}

.recipe-shape .is-reshaping .ws-session-shape__part > * {
    transition: opacity var(--duration-slow) var(--ease-out) var(--duration-fast);
}

@media print {
    @page {
        size: letter;
        margin: 0.5in;
    }

    /* The site header, and the footer composite's three parts (Level Up grid,
       newsletter call to action, footer). */
    .wsh-header,
    .ws-level-up,
    section.cta,
    footer.footer,
    .ws-breadcrumb,
    .recipe-switches,
    .recipe-share,
    .recipe-run__line a,
    .ws-exercise-tile__actions,
    .recipe-panel {
        display: none !important;
    }

    .recipe-page {
        padding-block: 0;
    }

    .recipe-version {
        display: block;
        font-size: var(--text-small);
        font-weight: var(--font-semibold);
        color: var(--text-dark);
    }

    .ws-exercise-tile {
        background: none;
        border-color: var(--gray-400);
    }

    .ws-exercise-formula {
        --formula-tile: 9rem;
    }

    .recipe-run {
        gap: var(--space-3);
    }

    .recipe-run__step {
        break-inside: avoid;
    }

    /* Paper keeps the run of show as plain text, so the recipe still fits one page. */
    .recipe-run__card {
        padding: 0;
        border: none;
        background: none;
    }

    .recipe-run__script,
    .recipe-run__line,
    .recipe-run__library {
        max-inline-size: none;
    }

    .recipe-run__script,
    .recipe-run__line,
    .recipe-run__library {
        font-size: var(--text-meta);
        line-height: var(--leading-snug);
        color: var(--text-dark);
    }
}