/* The film, v3. A 16:9 stage (4:5 on a phone); every size inside comes from --u, a share of the stage's width.
   Two typefaces only: display for names and captions, body for everything else.
   Color has one job each: amber = needs work, red = coverage lost, grey = done on the call, green = confirmed by the carrier.
   The desk is drawn after the live app: dark top bar, her list on the left, the member in the middle, history on the right. */

.film-wrap { display: flex; flex-direction: column; gap: 10px; container: filmwrap / inline-size; }
.film { --u: 1.15cqw; --bar: var(--navy); position: relative; aspect-ratio: 16 / 9; width: 100%; max-width: 100%; container-type: inline-size; background: linear-gradient(180deg, var(--surface) 0%, var(--film-bg) 100%); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; font-family: var(--body); color: var(--ink); }
.film * { transition: opacity .6s ease, transform .7s cubic-bezier(.2,.7,.2,1), left .8s cubic-bezier(.2,.7,.2,1), top .8s cubic-bezier(.2,.7,.2,1), width .8s cubic-bezier(.2,.7,.2,1), background-color .5s ease, color .5s ease, border-color .5s ease, stroke .5s ease, max-height .6s ease, padding .6s ease, margin .6s ease; }
.film.snap * { transition: none !important; }
.film .sw-b, .film .sw-c { display: none; }

/* ---------- brand, from the first second ---------- */
.f-mark { position: absolute; left: calc(1.6 * var(--u)); top: calc(1.4 * var(--u)); background: var(--navy); border-radius: calc(.6 * var(--u)); padding: calc(.55 * var(--u)) calc(.9 * var(--u)); line-height: 0; z-index: 6; }
.f-mark img { height: calc(2 * var(--u)); width: auto; display: block; }

/* ---------- the two tools, and what links them to the member ---------- */
.f-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.f-links line { stroke-width: 2; vector-effect: non-scaling-stroke; }
.f-links .l1 { stroke: var(--wire-strong); }
.f-links .l2 { stroke: var(--wire-strong); stroke-dasharray: 5 6; }
.f-links.phone { display: none; }
.f-tool { position: absolute; top: 47%; width: 27%; padding: calc(1.3 * var(--u)) calc(1.5 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--surface); border: 1px solid var(--wire-strong); box-shadow: 0 calc(.4 * var(--u)) calc(1.4 * var(--u)) var(--shadow); display: flex; flex-direction: column; gap: calc(.8 * var(--u)); }
.f-tool b { font: 600 calc(1.2 * var(--u)) var(--body); color: var(--muted); letter-spacing: .03em; text-transform: uppercase; }
.f-bit { font-size: calc(1.5 * var(--u)); font-weight: 600; padding: calc(.45 * var(--u)) calc(.9 * var(--u)); border-radius: calc(.6 * var(--u)); background: var(--wire); align-self: flex-start; }
.f-bit.warn { background: var(--late-soft); color: var(--late); }
.f-meter { display: flex; flex-direction: column; gap: calc(.4 * var(--u)); font-size: calc(1.2 * var(--u)); color: var(--muted); }
.f-meter span { display: block; height: calc(.7 * var(--u)); border-radius: 99px; background: var(--wire); overflow: hidden; }
.f-meter i { display: block; height: 100%; width: 0; background: var(--late); border-radius: 99px; }
.t1 { left: 8%; } .t2 { right: 8%; }

/* ---------- the live app's top bar (appears with the desk) ---------- */
.f-appbar { position: absolute; left: 0; right: 0; top: 0; height: 8%; background: var(--bar); color: #fff; display: flex; align-items: center; gap: calc(1.4 * var(--u)); padding: 0 calc(2 * var(--u)); font-size: calc(1.15 * var(--u)); opacity: 0; transform: translateY(-100%); z-index: 5; }
.f-appbar .brand { line-height: 0; }
.f-appbar .brand img { height: calc(2.2 * var(--u)); width: auto; display: block; }
.f-appbar .pill { padding: calc(.2 * var(--u)) calc(.8 * var(--u)); border-radius: 99px; background: rgba(255,255,255,.12); white-space: nowrap; }
.f-appbar .grow { flex: 1; }

/* ---------- the member ---------- */
.f-member { position: absolute; left: 35%; top: 10%; width: 30%; padding: calc(1.5 * var(--u)); border-radius: calc(1.2 * var(--u)); background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 calc(.8 * var(--u)) calc(2.6 * var(--u)) var(--shadow); display: flex; flex-direction: column; gap: calc(1 * var(--u)); z-index: 2; }
.f-who { display: flex; align-items: center; gap: calc(1.1 * var(--u)); }
.f-face { width: calc(4 * var(--u)); height: calc(4 * var(--u)); border-radius: 50%; background: var(--accent); color: var(--accent-ink); flex: none; display: grid; place-items: center; font: 700 calc(1.4 * var(--u)) var(--display); }
.f-name { display: flex; flex-direction: column; gap: calc(.15 * var(--u)); flex: 1; min-width: 0; }
.f-name b { font: 600 calc(1.8 * var(--u))/1.2 var(--display); }
.f-name small { font-size: calc(1.2 * var(--u)); color: var(--muted); line-height: 1.3; }
.f-oncall { font-size: calc(1.2 * var(--u)); font-weight: 600; color: var(--accent); display: flex; align-items: center; gap: calc(.5 * var(--u)); opacity: 0; white-space: nowrap; }
.f-ring { width: calc(1 * var(--u)); height: calc(1 * var(--u)); border-radius: 50%; background: var(--accent); }
.film.fixed:not(.nextfile) .f-ring { animation: f-pulse 1.2s ease-out infinite; }
@keyframes f-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); } 100% { box-shadow: 0 0 0 calc(1.2 * var(--u)) transparent; } }
.f-status { align-self: flex-start; font-size: calc(1.3 * var(--u)); font-weight: 700; padding: calc(.35 * var(--u)) calc(1.1 * var(--u)); border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.f-issues { display: flex; flex-direction: column; }
.f-issue { display: flex; align-items: center; justify-content: space-between; gap: calc(.8 * var(--u)); font-size: calc(1.45 * var(--u)); line-height: 1.3; font-weight: 600; padding: 0 calc(.9 * var(--u)); margin-top: 0; border-radius: calc(.6 * var(--u)); background: var(--late-soft); color: var(--late); opacity: 0; transform: translateY(calc(-6 * var(--u))) scale(.92); max-height: 0; overflow: hidden; }
.f-issue em { font-style: normal; font-size: calc(1.15 * var(--u)); font-weight: 700; padding: calc(.2 * var(--u)) calc(.8 * var(--u)); border-radius: 99px; background: var(--surface); color: var(--ink); border: 1px solid var(--wire-strong); opacity: 0; white-space: nowrap; }

/* ---------- the carrier's file ---------- */
.f-file { position: absolute; left: 39%; top: 2%; width: 22%; padding: calc(.9 * var(--u)) calc(1.2 * var(--u)); border-radius: calc(.8 * var(--u)); background: var(--ink); color: var(--bg); display: flex; flex-direction: column; gap: calc(.2 * var(--u)); opacity: 0; transform: translateY(calc(-12 * var(--u))); z-index: 6; }
.f-file b { font: 600 calc(1.4 * var(--u)) var(--display); }
.f-file span { font-size: calc(1.15 * var(--u)); opacity: .85; }

/* ---------- the working screen: list, member, history ---------- */
.f-col { position: absolute; top: 11%; height: 70%; border-radius: calc(1 * var(--u)); background: var(--surface); border: 1px solid var(--wire-strong); padding: calc(1.2 * var(--u)); display: flex; flex-direction: column; gap: calc(.5 * var(--u)); opacity: 0; transform: translateY(calc(2 * var(--u))); overflow: hidden; }
.f-list { left: 3%; width: 23%; }
.f-hist { left: 73%; width: 24%; }
.f-col h4 { margin: 0 0 calc(.3 * var(--u)); font: 700 calc(1.3 * var(--u)) var(--display); display: flex; justify-content: space-between; }
.f-col h4 span { color: var(--muted); font-weight: 600; }
.f-row { display: flex; align-items: center; justify-content: space-between; gap: calc(.6 * var(--u)); padding: calc(.55 * var(--u)) calc(.8 * var(--u)); border-radius: calc(.5 * var(--u)); font-size: calc(1.3 * var(--u)); border-bottom: 1px solid var(--wire); max-height: calc(4 * var(--u)); overflow: hidden; }
.f-row b { font-weight: 600; }
.f-row .tg { font-size: calc(1.1 * var(--u)); font-weight: 600; padding: calc(.15 * var(--u)) calc(.6 * var(--u)); border-radius: 99px; background: var(--late-soft); color: var(--late); white-space: nowrap; }
.f-row.open { background: var(--accent-soft); outline: calc(.2 * var(--u)) solid var(--accent); border-bottom-color: transparent; }
.f-h { display: flex; flex-direction: column; gap: calc(.1 * var(--u)); font-size: calc(1.2 * var(--u)); padding-bottom: calc(.5 * var(--u)); border-bottom: 1px solid var(--wire); opacity: 0; transform: translateX(calc(2 * var(--u))); }
.f-h small { color: var(--muted); font-size: calc(1.05 * var(--u)); }
.f-h b { font-weight: 600; }

/* ---------- the closing card ---------- */
.f-end { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1.3 * var(--u)); text-align: center; opacity: 0; pointer-events: none; padding: 0 calc(6 * var(--u)); background: linear-gradient(180deg, var(--surface) 0%, var(--film-bg) 100%); z-index: 7; }
.f-end .f-brand { background: var(--navy); border-radius: calc(.9 * var(--u)); padding: calc(1 * var(--u)) calc(1.8 * var(--u)); line-height: 0; }
.f-end .f-brand img { height: calc(3.4 * var(--u)); width: auto; display: block; }
.f-end strong { font: 700 calc(4.4 * var(--u))/1.12 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.f-end p { font-size: calc(1.6 * var(--u)); color: var(--muted); max-width: none; }
.f-end .f-ask { font: 600 calc(1.45 * var(--u)) var(--body); padding: calc(.9 * var(--u)) calc(2.2 * var(--u)); border-radius: calc(.7 * var(--u)); background: var(--accent); color: var(--accent-ink); margin-top: calc(.6 * var(--u)); }

/* ---------- caption and progress ---------- */
.f-cap { position: absolute; left: 6%; right: 6%; bottom: 6%; font: 600 calc(2.4 * var(--u))/1.25 var(--display); text-align: center; text-wrap: balance; z-index: 8; transition: opacity .2s ease !important; }
.f-cap.in { animation: f-capin .28s ease-out both; }
@keyframes f-capin { from { opacity: .15; transform: translateY(calc(.6 * var(--u))); } to { opacity: 1; transform: none; } }
.f-prog { position: absolute; left: 0; bottom: 0; height: calc(.45 * var(--u)); background: var(--accent); width: 0; transition: none !important; z-index: 9; }

.film-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.film-controls button { font: 600 0.88rem var(--body); padding: 7px 16px; border-radius: 99px; border: 1px solid var(--wire-strong); background: var(--surface); color: var(--ink); cursor: pointer; }
.film-controls .note { font-size: 0.82rem; color: var(--muted); }
.film-words { font-size: 0.92rem; color: var(--muted); }
.film-words summary { cursor: pointer; color: var(--ink); font-weight: 600; }
.film-words ol { margin: 8px 0 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 4px; }

/* ================= beats (added in order; later rules win) ================= */
/* grace: the grace period runs out in the spreadsheet nobody is watching */
.film.grace .f-meter i { width: 100%; transition: width 3s linear; }
/* lost: coverage ends */
.film.lost:not(.same) .f-status .sw-a, .film.lost:not(.same) .f-meter .sw-a { display: none; }
.film.lost:not(.same) .f-status .sw-b, .film.lost:not(.same) .f-meter .sw-b { display: inline; }
.film.lost .f-meter { color: var(--lost); font-weight: 700; }
.film.lost .f-meter i { background: var(--lost); }
.film.lost .f-status { background: var(--lost); color: var(--surface); }
.film.lost .f-member { border-color: var(--lost); }
.film.lost .f-face { background: var(--wire-strong); color: var(--surface); }
.film.lost .f-links .l2 { stroke: var(--lost); }
/* same: rewind into myRetentionDesk */
.film.same .f-member { border-color: var(--accent); }
.film.same .f-face { background: var(--accent); color: var(--accent-ink); }
.film.same .f-status { background: var(--accent-soft); color: var(--accent); }
.film.same .f-tool, .film.same .f-links { opacity: 0; }
.film.same .f-tool { transform: translateY(calc(-8 * var(--u))) scale(.6); }
/* file: the carrier's morning file arrives */
.film.file .f-file { opacity: 1; transform: none; }
.film.file .f-member { top: 16%; }
/* issues: everything open lands on the member */
.film.issues .f-issue { opacity: 1; transform: none; max-height: calc(6 * var(--u)); padding-block: calc(.55 * var(--u)); margin-top: calc(.7 * var(--u)); }
.film.issues .f-issue:nth-child(2) { transition-delay: .25s; }
.film.issues .f-issue:nth-child(3) { transition-delay: .5s; }
.film.issues .f-issue:nth-child(4) { transition-delay: .75s; }
/* desk: it becomes her working screen, as the live app draws it */
.film.desk .f-mark { opacity: 0; }
.film.desk .f-appbar { opacity: 1; transform: none; }
.film.desk .f-col { opacity: 1; transform: none; }
.film.desk .f-hist { transition-delay: .2s; }
.film.desk .f-member { left: 28%; top: 11%; width: 43%; }
.film.desk .f-file { opacity: 0; transform: translateY(calc(-12 * var(--u))); }
/* fixed: she is on the call. fix1..fix3: each fix is done on the call, one at a time, in step with its caption */
.film.fixed .f-oncall { opacity: 1; }
.film.fix1 .f-issue:nth-child(1), .film.fix2 .f-issue:nth-child(2), .film.fix3 .f-issue:nth-child(3) { background: var(--wire); color: var(--ink); }
.film.fix1 .f-issue:nth-child(1) em, .film.fix2 .f-issue:nth-child(2) em, .film.fix3 .f-issue:nth-child(3) em,
.film.fix1 .f-h:nth-of-type(1), .film.fix2 .f-h:nth-of-type(2), .film.fix3 .f-h:nth-of-type(3) { opacity: 1; transform: none; }
/* nextfile: the carrier's next file arrives */
.film.nextfile .f-oncall { opacity: 0; }
.film.nextfile .f-file { opacity: 1; transform: none; left: 49%; top: 66%; width: 22%; }
.film.nextfile .f-file .sw-a { display: none; }
.film.nextfile .f-file .sw-b { display: inline; }
.film.nextfile .f-issue, .film.nextfile .f-issue em, .film.nextfile .f-h { transition-delay: 0s; }
/* confirmed: two stuck, and she leaves the Delinquent list; one did not and stays open */
.film.confirmed .f-issue { background: var(--accent-soft); color: var(--accent); }
.film.confirmed .f-issue em { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.film.confirmed .f-issue .sw-a { display: none; }
.film.confirmed .f-issue .sw-b { display: inline; }
.film.confirmed .f-issue.stays { background: var(--late-soft); color: var(--late); }
.film.confirmed .f-issue.stays em { background: var(--surface); color: var(--late); border-color: var(--late); }
.film.confirmed .f-issue.stays .sw-b { display: none; }
.film.confirmed .f-issue.stays .sw-c { display: inline; }
.film.confirmed .f-issue:nth-child(2), .film.confirmed .f-issue:nth-child(2) em { transition-delay: .35s; }
.film.confirmed .f-issue:nth-child(3), .film.confirmed .f-issue:nth-child(3) em { transition-delay: .7s; }
.film.confirmed .f-row.open { max-height: 0; padding-block: 0; opacity: 0; border-bottom-width: 0; outline-width: 0; transition-delay: 1.4s; }
.film.confirmed .f-list h4 .n1 { display: none; }
.film.confirmed .f-list h4 .n2 { display: inline; }
/* covered: the payoff, same member still covered */
.film.covered .f-status .sw-a { display: none; }
.film.covered .f-status .sw-c { display: inline; }
.film.covered .f-status { background: var(--accent); color: var(--accent-ink); transform: scale(1.06); }
.film.covered .f-file { opacity: 0; }
/* end: the promise */
.film.end .f-end { opacity: 1; transition-delay: .2s; }
.film.end .f-cap { opacity: 0; }
.f-list h4 .n2 { display: none; }

/* ================= phone: taller stage, bigger words, the member alone on the desk ================= */
@container filmwrap (max-width: 560px) {
  .film { --u: 2.4cqw; aspect-ratio: 4 / 5; }
  .f-member { left: 8%; top: 10%; width: 84%; }
  .f-tool { top: 41%; width: 42%; }
  .t1 { left: 5%; } .t2 { right: 5%; }
  .f-links.wide { display: none; }
  .f-links.phone { display: block; }
  .film.file .f-member { top: 17%; }
  .f-file { left: 46%; width: 48%; top: 3%; }
  .f-col { display: none; }
  .f-appbar { height: 7%; }
  .f-appbar .pill, .f-appbar .grow + span { display: none; }
  .film.desk .f-member { left: 6%; top: 11%; width: 88%; }
  .film.nextfile .f-file { left: 44%; top: 65%; width: 50%; }
  .f-cap { font-size: calc(2.15 * var(--u)); bottom: 5%; }
  .f-end strong { font-size: calc(3.6 * var(--u)); }
  .f-end p { font-size: calc(1.5 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  .film * { transition-duration: .01s !important; transition-delay: 0s !important; animation: none !important; }
}
/* Status words switch crisply: no color fade on the badge or its words */
.film .f-status, .film .f-status * { transition: background-color .3s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
/* The sound button stands out a little: it is the one choice a viewer makes */
.film-controls .sound { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.film-controls .sound[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* v5: three tools across (dialer, billing spreadsheet, documents folder); both unwatched tools turn red when coverage is lost */
.t1 { left: 3%; } .t2 { left: 36.5%; right: auto; } .t3 { right: 3%; }
.f-links .l3 { stroke: var(--wire-strong); stroke-dasharray: 5 6; }
.film.lost .f-links .l3 { stroke: var(--lost); }
.f-note { font-size: calc(1.2 * var(--u)); color: var(--muted); }
.f-note .sw-b { display: none; }
.film.lost:not(.same) .f-note .sw-a { display: none; }
.film.lost:not(.same) .f-note .sw-b { display: inline; color: var(--lost); font-weight: 700; }
.film.grace .f-meter i { transition: width 5s linear; }
@container filmwrap (max-width: 560px) {
  .t1 { left: 5%; } .t2 { left: auto; right: 5%; } .t3 { left: 29%; right: auto; top: 61%; }
}
@container filmwrap (max-width: 560px) {
  .f-tool { top: 31%; }
  .t3 { top: 57%; }
}
/* v6: her day, as the app's bottom bar shows it. Each save counts at once; it lights up on "Our work counts the moment we save it." */
.f-today { position: absolute; left: 3%; right: 3%; top: 83%; height: 5%; border-radius: calc(.7 * var(--u)); background: var(--bar); color: #e6eef3; display: flex; align-items: center; gap: calc(2 * var(--u)); padding: 0 calc(1.4 * var(--u)); font-size: calc(1.15 * var(--u)); opacity: 0; transform: translateY(calc(2 * var(--u))); z-index: 4; }
.f-today b { color: #fff; }
.f-today i { font-style: normal; font-weight: 700; color: #fff; margin-left: calc(.3 * var(--u)); }
.f-today .sw-b { display: none; }
.film.desk .f-today { opacity: 1; transform: none; }
.film.fix1 .f-today span:nth-of-type(1) .sw-a, .film.fix1 .f-today span:nth-of-type(2) .sw-a, .film.fix2 .f-today .t-ren .sw-a { display: none; }
.film.fix1 .f-today span:nth-of-type(1) .sw-b, .film.fix1 .f-today span:nth-of-type(2) .sw-b, .film.fix2 .f-today .t-ren .sw-b { display: inline; color: var(--teal); }
.film.counts .f-today { box-shadow: 0 0 0 calc(.35 * var(--u)) var(--teal); transform: scale(1.02); }
.film.nextfile .f-today { box-shadow: none; transform: none; }
.film.end .f-today { opacity: 0; }
@container filmwrap (max-width: 560px) { .f-today { display: none; } }
/* v6 spacing: the desk columns end a little higher so her Today bar clears the caption */
.f-col { height: 67%; }
.f-today { top: 80.5%; height: 4.6%; }
/* v7: not just these three. Her real work lists fill in one by one, ending with "+ any new report". */
.f-lists { position: absolute; left: 31%; width: 38%; top: 10%; padding: calc(1.4 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(1.2 * var(--u)); background: var(--surface); border: 2px solid var(--accent); box-shadow: 0 calc(1 * var(--u)) calc(3 * var(--u)) var(--shadow); display: flex; flex-direction: column; gap: calc(.45 * var(--u)); opacity: 0; transform: scale(.94); z-index: 6; pointer-events: none; }
.f-lists h4 { margin: 0 0 calc(.3 * var(--u)); font: 700 calc(1.5 * var(--u)) var(--display); }
.f-li { font-size: calc(1.3 * var(--u)); font-weight: 600; padding: calc(.45 * var(--u)) calc(.9 * var(--u)); border-radius: calc(.5 * var(--u)); background: var(--wire); opacity: 0; transform: translateX(calc(-2 * var(--u))); }
.f-li.more { background: var(--accent-soft); color: var(--accent); }
.film.lists .f-lists { opacity: 1; transform: none; }
.film.lists .f-li { opacity: 1; transform: none; }
.film.lists .f-li:nth-of-type(2) { transition-delay: .25s; } .film.lists .f-li:nth-of-type(3) { transition-delay: .5s; }
.film.lists .f-li:nth-of-type(4) { transition-delay: .75s; } .film.lists .f-li:nth-of-type(5) { transition-delay: 1s; }
.film.lists .f-li:nth-of-type(6) { transition-delay: 1.3s; } .film.lists .f-li:nth-of-type(7) { transition-delay: 1.6s; }
.film.lists .f-li:nth-of-type(8) { transition-delay: 1.9s; } .film.lists .f-li:nth-of-type(9) { transition-delay: 2.2s; }
.film.lists .f-li:nth-of-type(10) { transition-delay: 3s; }
.film.end .f-lists { opacity: 0; }
@container filmwrap (max-width: 560px) { .f-lists { left: 8%; width: 84%; top: 9%; } }
/* v7 fit: the lists in two columns so the panel clears the caption */
.f-lists { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(.8 * var(--u)); row-gap: calc(.5 * var(--u)); left: 24%; width: 52%; top: 12%; align-content: start; }
.f-lists h4 { grid-column: 1 / -1; }
.f-li.more { grid-column: 1 / -1; text-align: center; }
@container filmwrap (max-width: 560px) { .f-lists { left: 5%; width: 90%; top: 10%; } .f-li { font-size: calc(1.15 * var(--u)); padding-inline: calc(.6 * var(--u)); } }
/* v8: "Paid with me" leaves her Delinquent list at the save and waits in "Waiting to clear"; the carrier's next file clears it */
.f-wtc { margin-top: auto !important; padding-top: calc(.6 * var(--u)); border-top: 1px solid var(--wire); font-size: calc(1.2 * var(--u)) !important; }
.f-wtc .w1, .f-wtc .w2 { display: none; }
.film.fix1 .f-wtc .w0 { display: none; } .film.fix1 .f-wtc .w1 { display: inline; color: var(--late); }
.film.confirmed .f-wtc .w1 { display: none; } .film.confirmed .f-wtc .w2 { display: inline; color: var(--accent); }
.film.fix1 .f-row.open { max-height: 0; padding-block: 0; opacity: 0; border-bottom-width: 0; outline-width: 0; transition-delay: .4s; }
.film.fix1 .f-list h4 .n1 { display: none; } .film.fix1 .f-list h4 .n2 { display: inline; }
/* v8 fit: two-line captions never touch the desk. Desk ends higher, Today bar above the caption band, smaller caption on the desk. */
.f-col { height: 61%; }
.f-today { top: 74%; height: 4.4%; }
.film.desk .f-cap { font-size: calc(2.05 * var(--u)); bottom: 3.5%; }
.film.nextfile .f-file { top: 61%; height: auto; }
.film.end .f-cap { font-size: calc(2.4 * var(--u)); }
@container filmwrap (max-width: 560px) { .film.nextfile .f-file { top: 62%; } }

/* ================= v9: cover frame, one big play button, controls inside the frame ================= */
.film-stage { position: relative; }
.film-stage .film { display: block; }
/* The cover rests on her working screen; no caption, no progress, the tools long gone */
.film-stage.poster .f-cap, .film-stage.poster .f-prog, .film-stage.poster .f-file { opacity: 0 !important; }
.film-stage.poster .film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(2,31,60,0) 35%, rgba(2,31,60,.38) 100%); z-index: 9; pointer-events: none; }
.film-big { position: absolute; left: 50%; bottom: 9%; transform: translateX(-50%); z-index: 11; display: none; align-items: center; gap: 12px; padding: 12px 22px 12px 14px; border-radius: 999px; border: 0; background: var(--navy); color: #fff; font: 600 1rem var(--body); cursor: pointer; box-shadow: 0 10px 30px rgba(2,31,60,.35); white-space: nowrap; }
.film-big small { font-weight: 500; color: #9fdde0; font-size: .85rem; }
.film-big .tri { width: 38px; height: 38px; border-radius: 50%; background: var(--teal); position: relative; flex: none; }
.film-big .tri::after { content: ""; position: absolute; left: 15px; top: 11px; border-left: 13px solid var(--navy); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.film-big:hover { background: #06315c; }
.film-big:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
.film-stage.poster .film-big { display: inline-flex; }
/* Small controls inside the bottom corner while it plays */
.film-ui { position: absolute; right: 10px; top: 10px; z-index: 11; display: flex; gap: 6px; }
.film-ui button { font: 600 .74rem var(--body); padding: 5px 10px; border-radius: 999px; border: 0; background: rgba(2,31,60,.72); color: #fff; cursor: pointer; }
.film-ui button:hover { background: rgba(2,31,60,.9); }
.film-ui button[aria-pressed="true"] { background: var(--teal); color: var(--navy); }
.film-stage.poster .film-ui { display: none; }
.film-note { margin: 0; font-size: .8rem; color: var(--muted); }
/* The end card is the brand and one line, no second headline and no button */
.f-end p { font-size: calc(1.8 * var(--u)); color: var(--ink); }
.f-end .f-brand img { height: calc(4.2 * var(--u)); }
@container filmwrap (max-width: 560px) {
  .film-big { padding: 10px 16px 10px 10px; font-size: .92rem; bottom: 6%; }
  .film-big small { display: none; }
  .film-big .tri { width: 32px; height: 32px; }
  .film-big .tri::after { left: 12px; top: 9px; border-left-width: 11px; border-top-width: 7px; border-bottom-width: 7px; }
}
@media (hover: hover) {
  .film-ui { opacity: 0; transition: opacity .2s ease; }
  .film-stage:hover .film-ui, .film-ui:focus-within { opacity: 1; }
}
.film-big { bottom: 3%; }
/* Phone: the tool cards sit below the member card, never under it */
@container filmwrap (max-width: 560px) {
  .f-tool { top: 39%; }
  .t3 { top: 58%; }
}
@container filmwrap (max-width: 560px) { .t3 { top: 61.5%; } }
/* Controls sit under the picture, never on it */
.film-ui { position: static; opacity: 1 !important; margin-top: 8px; justify-content: flex-end; }
.film-ui button { background: var(--surface); color: var(--ink); border: 1px solid var(--wire-strong); }
.film-ui button:hover { background: var(--wire); }
.film-ui button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }
/* Phone: the three tools in one row, high enough that no caption reaches them */
@container filmwrap (max-width: 560px) {
  .f-tool { top: 37%; width: 30%; padding: calc(.9 * var(--u)) calc(1 * var(--u)); gap: calc(.6 * var(--u)); }
  .t1 { left: 3%; right: auto; } .t2 { left: 35%; right: auto; } .t3 { left: 67%; right: auto; top: 37%; }
  .f-tool b { font-size: calc(1 * var(--u)); letter-spacing: 0; }
  .f-bit { font-size: calc(1.2 * var(--u)); }
  .f-meter, .f-note { font-size: calc(1 * var(--u)); }
}
/* Desktop: everything in the film a size larger; the opening member card wider, the tools a little lower */
@container filmwrap (min-width: 561px) {
  .film { --u: 1.32cqw; }
  .f-member { left: 32%; width: 36%; }
  .f-tool { top: 53%; }
}
@container filmwrap (min-width: 561px) { .f-tool { top: 49.5%; } }
/* Desktop: the next morning's file lands in the empty lower part of the History column, clear of the member card */
@container filmwrap (min-width: 561px) { .film.nextfile .f-file { left: 74%; top: 56%; width: 22%; } }