/* The scenario cards of the menus (14 Oct 2026, PREMIERE): the console's list,
   the solo menu and the start page, after the storyboard page
   (docs/storyboards/viewer/style.css): the accent along the top edge, the title
   in Big Shoulders caps, the tagline in Courier Prime italic in the accent, and
   a clapperboard slate with RUN TIME and ENDINGS. The card takes the page's own
   tokens (the storyboard's paper on a light page); a container with .sc-night
   gives the storyboard's night. static/js/scenario_cards.js builds the face and
   sets --sc-accent on each card.
   An edition's tokens.css may set the faces and the slate (18 Oct 2026):
   --sc-font-label, -title, -tagline, -num; --sc-night-paper, -ink, -muted, -rule;
   --sc-slate-bg, -line, -rule, -ink, -muted; and the sizes and tracking below.
   Every one defaults to the storyboard's own value. */
.sc-night {
    --sc-paper: var(--sc-night-paper, #11161b);
    --sc-ink: var(--sc-night-ink, #e4e8ec);
    --sc-muted: var(--sc-night-muted, #93a0ac);
    --sc-rule: var(--sc-night-rule, #27313b);
}
.sc-card {
    position: relative;
    display: grid;
    align-content: start;
    gap: 8px;
    min-width: 0;
    padding: 16px 18px 16px;
    background: var(--sc-paper, var(--surface, #ffffff));
    color: var(--sc-ink, var(--ink, #121519));
    border: 1px solid var(--sc-rule, var(--line, #d3d9df));
    border-top: 4px solid var(--sc-accent, var(--accent, #2c3742));
    border-radius: 6px;
    text-align: left;
    font-family: 'Archivo', system-ui, sans-serif;
}
.sc-kicker, .sc-title, .sc-tagline { display: block; }
.sc-kicker {
    font-family: var(--sc-font-label, 'Courier Prime', 'Courier New', Courier, monospace);
    font-weight: var(--sc-label-weight);
    font-size: var(--sc-kicker-size, 12.5px);
    letter-spacing: var(--sc-kicker-track, 0.08em);
    text-transform: uppercase;
    color: var(--sc-muted, var(--mut, #5d6874));
    overflow-wrap: anywhere;
}
.sc-title {
    font-family: var(--sc-font-title, 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif);
    font-weight: 800;
    font-stretch: var(--sc-title-stretch);
    font-size: var(--sc-title-size, 34px);
    line-height: 1;
    letter-spacing: var(--sc-title-track, 0.02em);
    text-transform: uppercase;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: var(--sc-ink, var(--ink, #121519));
}
.sc-tagline {
    font-family: var(--sc-font-tagline, 'Courier Prime', 'Courier New', Courier, monospace);
    font-style: var(--sc-tagline-style, italic);
    font-size: 15px;
    line-height: 1.4;
    color: var(--sc-accent, var(--accent, #2c3742));
    overflow-wrap: anywhere;
}
/* Cells as wide as what they hold, sharing what is left: a run time keeps to
   one line beside ENDINGS, and a long one puts ENDINGS on a row of its own. */
.sc-slate {
    display: flex;
    flex-wrap: wrap;
    margin: 4px 0 0;
    border: 2px solid var(--sc-slate-line, var(--sc-ink, var(--ink, #121519)));
    border-radius: 4px;
    background: var(--sc-slate-bg, var(--sc-paper, var(--surface, #ffffff)));
    color: var(--sc-slate-ink);
    overflow: hidden;
}
.sc-slate-cell {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    padding: 7px 12px 8px;
    border-right: 1px solid var(--sc-slate-rule, var(--sc-rule, var(--line, #d3d9df)));
}
.sc-slate-cell:last-child { border-right: 0; }
.sc-slate .sc-k {
    display: block;
    font-family: var(--sc-font-label, 'Courier Prime', 'Courier New', Courier, monospace);
    font-weight: var(--sc-label-weight);
    font-size: var(--sc-k-size, 11.5px);
    letter-spacing: var(--sc-k-track, 0.1em);
    text-transform: uppercase;
    color: var(--sc-slate-muted, var(--sc-muted, var(--mut, #5d6874)));
}
.sc-slate .sc-v {
    display: block;
    margin: 2px 0 0;
    font-family: var(--sc-font-num, 'Big Shoulders Display', 'Arial Narrow', Impact, sans-serif);
    font-weight: var(--sc-num-weight, 800);
    font-size: var(--sc-num-size, 24px);
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}