/* The case film pages: /cases/olive-mendoza, /cases/amber-holding, /cases/the-factory.
   A case film is not a video file. The browser draws it as it plays (film.js),
   so it brings its own controls, and takes the shape of the box this gives it. */
:root {
    --cream: #FBFAF6;
    --ink: #18211F;
    --muted: #56605B;
    --line: rgba(24, 33, 31, 0.12);
    --brand: #234D6F;
    /* The page round the film. These follow the site's theme (the class the
       page's first script puts on <html>); the film keeps its own colours. */
    --page: #FBFAF6;
    --page-ink: #18211F;
    --page-muted: #56605B;
    --page-line: rgba(24, 33, 31, 0.12);
    --page-accent: #234D6F;
    --panel: #FFFFFF;
    --hover: rgba(24, 33, 31, 0.06);
}

html.dark {
    --page: #0F172A;
    --page-ink: #F9FAFB;
    --page-muted: #9CA3AF;
    --page-line: #374151;
    --page-accent: #93C5FD;
    --panel: #1F2937;
    --hover: rgba(255, 255, 255, 0.08);
}

/* Going to the learning hub and coming from it, the two pages cross-fade
   (in browsers that can). */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }
}

* {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--page);
    color: var(--page-ink);
    /* Outfit arrives with film.js, which carries the font the films use. */
    font: 400 17px/1.5 Outfit, system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ── The way back to the learning hub ───────────────────────────────────── */
.case-top {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    height: 56px;
    padding: 0 max(20px, calc((100vw - 1100px) / 2));
    border-bottom: 1px solid var(--page-line);
    background: color-mix(in srgb, var(--page) 94%, transparent);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.case-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: -10px;
    padding: 8px 12px 8px 10px;
    border-radius: 10px;
    color: var(--page-ink);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
}

.case-back:hover {
    background: var(--hover);
}

.case-back:focus-visible,
.case-logo:focus-visible {
    outline: 3px solid var(--page-accent);
    outline-offset: 2px;
}

.case-logo {
    display: block;
    border-radius: 8px;
}

.case-logo img {
    display: block;
    height: 26px;
    width: auto;
}

/* The mark is drawn in ink: on the dark page it is turned to white. */
html.dark .case-logo img {
    filter: invert(1);
}

main {
    max-width: 1140px;
    margin: 0 auto;
    padding: 26px 20px 56px;
}

/* Said only when a choice could not be sent to the account. */
.case-saved {
    max-width: 64ch;
    margin: 16px 0 0;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(157, 81, 69, 0.1);
    color: #7c3b31;
    font-weight: 500;
}

.case-saved[hidden] {
    display: none;
}

html.dark .case-saved {
    background: rgba(217, 138, 124, 0.14);
    color: #ecb3a8;
}

/* Asked before leaving a film that has been started and not answered. */
.case-leave {
    position: fixed;
    inset: 0;
    z-index: 2147483200;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(24, 33, 31, 0.45);
}

.case-leave[hidden] {
    display: none;
}

.case-leave-card {
    width: min(420px, 100%);
    padding: 26px 26px 22px;
    border-radius: 20px;
    background: var(--panel);
    color: var(--page-ink);
    box-shadow: 0 24px 60px rgba(24, 33, 31, 0.28);
}

.case-leave-card h2 {
    margin: 0 0 8px;
    font-size: 21px;
    letter-spacing: -0.01em;
}

.case-leave-card p {
    margin: 0 0 20px;
    color: var(--page-muted);
}

.case-leave-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.case-leave-actions button {
    padding: 10px 18px;
    border: 1.5px solid var(--page-line);
    border-radius: 10px;
    background: var(--panel);
    color: var(--page-ink);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.case-leave-actions .case-leave-stay {
    border-color: var(--brand);
    background: var(--brand);
    color: #fff;
}

html.dark .case-leave-actions .case-leave-stay {
    border-color: #7FB3DD;
    background: #7FB3DD;
    color: #111827;
}

.case-leave-actions button:focus-visible {
    outline: 3px solid var(--page-accent);
    outline-offset: 2px;
}

.tag {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--page-accent);
}

h1 {
    margin: 4px 0 8px;
    font-size: clamp(27px, 4vw, 40px);
    line-height: 1.1;
    letter-spacing: -0.025em;
}

.lede {
    max-width: 64ch;
    margin: 0 0 18px;
    color: var(--page-muted);
}

/* The film's box takes the focus when it is started, so that it has the keys
   (Space, the arrows, M, C, F); that is not something to draw a ring round. */
.lf:focus {
    outline: none;
}

.lf-key:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: 2px;
}

/* ── The film: the picture, and its controls underneath ─────────────────── */
.lf {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 18px;
    background: var(--cream);
    box-shadow: 0 0 0 1.5px var(--line), 0 30px 60px -34px rgba(30, 42, 36, 0.4);
}

/* The picture takes the shape of this box. Wide by default, and never taller
   than the screen, so the controls stay in view … */
.lf-stage {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: calc(100svh - 120px);
    background: var(--cream);
}

/* … and upright where the screen is narrow, as a phone's is. */
@media (max-width: 700px) {
    main {
        padding: 14px 12px 40px;
    }

    /* The film comes first on a small screen, with only its title above it. */
    .lede {
        display: none;
    }

    .lf-stage {
        aspect-ratio: auto;
        height: min(calc(100svh - 206px), 170vw);
    }
}

/* A phone held sideways: the film is the page. */
@media (orientation: landscape) and (max-height: 520px) {
    main {
        padding: 8px 12px 24px;
    }

    .tag,
    h1,
    .lede {
        display: none;
    }

    /* No height to spare: the header is short, and scrolls away with the page. */
    .case-top {
        position: static;
        height: 44px;
    }

    .lf-stage {
        aspect-ratio: auto;
        height: calc(100svh - 70px);
        max-height: none;
    }
}

/* Full screen. Where the browser offers the real thing, the film uses it. An
   iPhone offers it to videos only, so there the film takes over the browser
   window instead. Either way it gets this class. */
.lf.lf-full {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    border-radius: 0;
    box-shadow: none;
    touch-action: none;
}

.lf.lf-full .lf-stage {
    flex: 1 1 auto;
    min-height: 0;
    height: auto;
    max-height: none;
    aspect-ratio: auto;
}

/* Clear of the notch at the sides and the home bar at the foot. */
.lf.lf-full .lf-bar {
    padding: 6px max(8px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}

/* A phone held sideways has no height to spare. The controls lie over the
   foot of the picture, and are put away while the film plays. */
.lf.lf-over .lf-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 0;
    background: rgba(255, 255, 255, 0.94);
    transition: opacity 0.2s ease, transform 0.2s ease;
    /* Just clear of the home bar: the full strip an iPhone asks for would cost the picture too much. */
    padding-bottom: max(6px, min(12px, env(safe-area-inset-bottom)));
}

.lf.lf-over.lf-playing .lf-bar {
    opacity: 0;
    transform: translateY(100%);
    pointer-events: none;
}

/* Measures the strip an iPhone keeps at the foot of the screen for its home bar. */
.lf-safe {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: env(safe-area-inset-bottom, 0px);
    visibility: hidden;
    pointer-events: none;
}

/* While the film fills the window, the page behind it stays put. (It also
   takes the film's colour then: film.js sets that.) */
html.lf-locked,
html.lf-locked body {
    overflow: hidden;
}

.lf-bar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border-top: 1.5px solid var(--line);
    background: #fff;
}

.lf-key {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
}

.lf-key:hover {
    background: rgba(24, 33, 31, 0.07);
}

/* Shown in place of the pause sign while the film waits for its sound. */
.lf-spin {
    width: 18px;
    height: 18px;
    border: 2.5px solid rgba(24, 33, 31, 0.2);
    border-top-color: var(--ink);
    border-radius: 50%;
    animation: lf-spin 0.8s linear infinite;
}

@keyframes lf-spin {
    to {
        transform: rotate(360deg);
    }
}

.lf-cc {
    width: auto;
    height: 26px;
    margin: 0 7px;
    padding: 0 7px;
    border: 1.5px solid var(--ink);
    border-radius: 7px;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.03em;
}

.lf-cc[aria-pressed="true"],
.lf-cc[aria-pressed="true"]:hover {
    background: var(--ink);
    color: #fff;
}

.lf-track {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    min-width: 60px;
    height: 40px;
    margin: 0 8px 0 6px;
}

.lf-track input {
    width: 100%;
    height: 40px;
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.lf-track input:focus-visible {
    outline: 3px solid var(--brand);
    outline-offset: -8px;
    border-radius: 12px;
}

.lf-track input::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(to right, var(--brand) var(--done, 0%), rgba(24, 33, 31, 0.14) var(--done, 0%));
}

.lf-track input::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(24, 33, 31, 0.14);
}

.lf-track input::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background: var(--brand);
}

.lf-track input::-webkit-slider-thumb {
    width: 16px;
    height: 16px;
    margin-top: -5px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    -webkit-appearance: none;
}

.lf-track input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border: 0;
    border-radius: 50%;
    background: var(--brand);
}

/* Where the film stops to ask its question. */
.lf-mark {
    position: absolute;
    top: 50%;
    width: 10px;
    height: 10px;
    margin: -5px 0 0 -5px;
    border: 2.5px solid var(--brand);
    border-radius: 50%;
    background: #fff;
    pointer-events: none;
}

.lf-time {
    flex: none;
    margin-right: 2px;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    color: var(--muted);
    white-space: nowrap;
}

/* A phone has its own volume keys; the room goes to the track instead. */
@media (max-width: 480px) {
    .lf-mute {
        display: none;
    }
}

/* And on a phone the clock goes too, to leave the track room beside the back
   button: the track says as much. */
@media (max-width: 430px) {
    .lf-time {
        display: none;
    }
}

/* ── Under the film ─────────────────────────────────────────────────────── */
.notes {
    max-width: 64ch;
    margin: 26px 0 0;
}

.notes h2 {
    margin: 0 0 6px;
    font-size: 19px;
    letter-spacing: -0.01em;
}

.notes ol {
    margin: 0;
    padding-left: 22px;
}

.notes li {
    margin: 4px 0;
}

.notes p {
    margin: 14px 0 0;
    font-size: 15px;
    color: var(--page-muted);
}

/* ── The dark page: the film's box and its controls ─────────────────────── */
html.dark .lf {
    box-shadow: 0 0 0 1.5px var(--page-line), 0 30px 60px -34px rgba(0, 0, 0, 0.7);
}

html.dark .lf-bar {
    border-top-color: var(--page-line);
    background: var(--panel);
}

html.dark .lf.lf-over .lf-bar {
    background: rgba(31, 41, 55, 0.94);
}

html.dark .lf-key {
    color: #F9FAFB;
}

html.dark .lf-key:hover {
    background: rgba(255, 255, 255, 0.09);
}

html.dark .lf-key:focus-visible,
html.dark .lf-track input:focus-visible {
    outline-color: #93C5FD;
}

html.dark .lf-spin {
    border-color: rgba(255, 255, 255, 0.22);
    border-top-color: #F9FAFB;
}

html.dark .lf-cc {
    border-color: #F9FAFB;
}

html.dark .lf-cc[aria-pressed="true"],
html.dark .lf-cc[aria-pressed="true"]:hover {
    background: #F9FAFB;
    color: #111827;
}

html.dark .lf-track input::-webkit-slider-runnable-track {
    background: linear-gradient(to right, #7FB3DD var(--done, 0%), rgba(255, 255, 255, 0.2) var(--done, 0%));
}

html.dark .lf-track input::-moz-range-track {
    background: rgba(255, 255, 255, 0.2);
}

html.dark .lf-track input::-moz-range-progress {
    background: #7FB3DD;
}

html.dark .lf-track input::-webkit-slider-thumb {
    background: #7FB3DD;
}

html.dark .lf-track input::-moz-range-thumb {
    background: #7FB3DD;
}

html.dark .lf-mark {
    border-color: #7FB3DD;
    background: var(--panel);
}

html.dark .lf-time {
    color: var(--page-muted);
}