/* The film stage (film-bar.js): while a film is open the model view
   shows it, beside the page's usual panels. The canvas stops above a
   strip that holds the one control bar; the film's frame sits centred
   in the canvas with the shade outside it clipped to the view; one
   Close (top right, where the corner tools were; captions own the top
   left) and, while the film is prepared, a card saying what
   it waits on. The corner's view tools and the pick hint step aside. */
:root { --film-strip: 3.1rem; }
body.film-open .pane-viewer canvas { height: calc(100% - var(--film-strip)); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
body.film-stage .view-corner, body.film-stage .pick, body.film-stage .scrubbed-note { display: none; }

/* One way out. */
.film-exit { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 6; display: inline-flex; gap: 0.4rem; min-height: 2.1rem; padding: 0 0.8rem 0 0.6rem; font-weight: 600; background: var(--glass); border: 1px solid var(--line-strong); border-radius: 999px; color: var(--text); }
.film-exit:hover { border-color: var(--accent); background: var(--glass-strong); }
.film-exit .icon { width: 0.85rem; height: 0.85rem; }

/* The frame: it covers the canvas and clips its hole's shade. */
.film-frame { position: absolute; left: 0; right: 0; top: 0; bottom: var(--film-strip); overflow: hidden; border-radius: var(--radius) var(--radius) 0 0; pointer-events: none; z-index: 2; }
.film-hole { position: absolute; box-shadow: 0 0 0 100vmax rgba(8, 12, 20, 0.6); outline: 1px solid rgba(255, 255, 255, 0.18); }
.film-caption { position: absolute; z-index: 3; pointer-events: none; display: flex; flex-direction: column; gap: 0.35em; color: #f5f7fa; transition: opacity 0.1s linear; max-width: 70%; }
.film-caption strong { font-size: 1.6em; font-weight: 600; }
.film-caption-title strong { font-size: 2.1em; }
.film-caption span { opacity: 0.8; }
.film-caption-dark { color: #111318; }

/* Preparing: a card in the middle of the view (quiet, top centre, when
   an open film is only updating after an edit). */
.film-loading { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 5; display: flex; align-items: center; gap: 0.8rem; padding: 0.85rem 1.1rem; width: max-content; max-width: calc(100% - 2rem); white-space: nowrap; background: var(--glass-strong); border: 1px solid var(--line-strong); border-radius: var(--radius); box-shadow: 0 12px 30px var(--shadow); }
.film-loading-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.film-loading-text strong { font-weight: 650; }
#film-loading-stage { color: var(--muted); font: 0.85rem var(--mono); }
.film-loading-quiet { top: 0.6rem; transform: translateX(-50%); padding: 0.35rem 0.75rem; gap: 0.5rem; border-radius: 999px; }
.film-loading-quiet .film-loading-text { flex-direction: row; gap: 0.5rem; align-items: baseline; }
.film-loading-quiet strong { font-size: 0.85rem; }
.spinner { width: 1.2rem; height: 1.2rem; flex: none; border-radius: 50%; border: 2px solid var(--line-strong); border-top-color: var(--accent); animation: spin 0.8s linear infinite; }
.film-loading-quiet .spinner { width: 0.85rem; height: 0.85rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* The control bar, in the strip under the canvas. */
.film-bar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--film-strip); z-index: 5; display: flex; align-items: center; gap: 0.7rem; padding: 0 0.6rem; background: var(--card); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.film-play { flex: none; width: 2.2rem; height: 2.2rem; min-height: 0; padding: 0; border-radius: 50%; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.film-play:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.film-play .icon { width: 0.9rem; height: 0.9rem; }
.film-play .icon-pause, body.film-playing .film-play .icon-play { display: none; }
body.film-playing .film-play .icon-pause { display: block; }
.film-time { flex: none; font: 0.8rem var(--mono); font-variant-numeric: tabular-nums; color: var(--muted); }
.film-step { flex: 0 1 12rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-size: 0.85rem; }
.film-icon-button { flex: none; width: 2.1rem; height: 2.1rem; min-height: 0; padding: 0; background: transparent; border-color: transparent; color: var(--muted); }
.film-icon-button:hover, .film-icon-button[aria-expanded="true"] { color: var(--text); background: var(--raised-hover); border-color: var(--line-strong); }
.menu-up { top: auto; bottom: calc(100% + 8px); }
.film-export-menu { min-width: 15rem; }
.film-export-menu > #film-export { justify-content: center; margin: 0.15rem 0.45rem; background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 650; }
.film-export-menu > #film-export:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.film-export-state { padding: 0 0.45rem; font-size: 0.82em; color: var(--muted); white-space: normal; }
.film-export-state:empty { display: none; }

/* The timeline: chapters (one per step) filled to the time, and a
   playhead; a tall hit area around thin bars, inset by the playhead's
   radius so the head never overhangs the time beside it at 0:00. */
.film-timeline { position: relative; flex: 1 1 10rem; min-width: 6rem; height: 2rem; padding: 0 0.7rem; display: flex; align-items: center; cursor: pointer; touch-action: none; outline-offset: 2px; border-radius: 4px; }
.film-chapters { display: flex; gap: 3px; width: 100%; align-items: center; }
.film-chapter { position: relative; flex-basis: 0; min-width: 4px; height: 5px; border-radius: 3px; background: color-mix(in srgb, var(--text) 16%, transparent); overflow: hidden; transition: height 0.12s ease; }
.film-chapter i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); }
.film-chapter-title { background: color-mix(in srgb, var(--text) 26%, transparent); }
.film-timeline:hover .film-chapter, .film-timeline-drag .film-chapter, .film-timeline:focus-visible .film-chapter { height: 8px; }
.film-playhead { position: absolute; left: 0; top: 50%; width: 0.85rem; height: 0.85rem; margin: -0.425rem 0 0 -0.425rem; border-radius: 50%; background: var(--text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent), 0 1px 4px rgba(0, 0, 0, 0.5); pointer-events: none; }

/* A narrow model view (a 1024 px screen's middle column) drops the
   step's title: it was squeezed to a letter and the timeline to a
   stub. The caption on the frame still names the step. */
.pane-viewer { container: viewer / inline-size; }
@container viewer (max-width: 32rem) {
  .film-step { display: none; }
  .film-bar { gap: 0.55rem; }
}

/* The History sheet's film list is a phone's (mobile.css); a wide
   screen has the script card's rail. */
.film-list { display: none; }