/* The film's chain card and subtitles (docs/design/spec.md, FROZEN), moved out of the first HTML when spec-r3's selector
   joined it (spec-r3 §8: the budget of spec-r2 §7 holds). Nothing here shows before film.js runs, and film.js, a module
   after this link, runs only once it has applied: the card is hidden until the chain starts, the subtitles empty until
   the film writes them. Scripting off, it loads in the head (index.html's noscript), as the card shows from 1024. */
.card { background: var(--card); border-radius: 18px; padding: 16px 18px 14px; width: 278px;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -18px var(--shadow-m); }
.card h2 { margin: 0 0 10px; font-size: 13px; font-weight: 700; color: var(--mute); display: flex; justify-content: space-between; }
.card h2 .tag { color: var(--blue); font-weight: 600; }
.acc { list-style: none; margin: 0; padding: 0; }
.acc > li { border-top: 1px solid var(--line); }
.acc > li:first-child { border-top: 0; }
.acc .hd { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; padding: 7px 0 5px; }
.acc .bd { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s cubic-bezier(.2,.7,.2,1); }
.acc li.open .bd { grid-template-rows: 1fr; }
.acc .bd > div { overflow: hidden; }
.acc .ph { display: flex; justify-content: space-between; font-size: 13px; color: var(--mute); padding: 2px 0 4px 12px; }
.st { font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 7px; color: var(--mute); }
.st::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.st.ringing { color: var(--blue); } .st.ringing::before { animation: ping 1s ease-out infinite; }
.st.red { color: var(--red-t); } .st.red::before { animation: pingr 1s ease-out infinite; }
.st.accepted { color: var(--green-t); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 var(--blue-50); } 100% { box-shadow: 0 0 0 7px var(--blue-0); } }
@keyframes pingr { 0% { box-shadow: 0 0 0 0 var(--red-50); } 100% { box-shadow: 0 0 0 7px var(--red-0); } }

/* subtitles: the call's own lines, a rule before the speaker (Air Force), words blurring in (Puture) */
.subs { position: absolute; left: 47vw; right: var(--pad); bottom: 6vh; min-height: 70px; }
.subs small { display: flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; color: var(--blue); margin-bottom: 5px; }
.subs small.caller { color: var(--red-t); } .subs small.accepter { color: var(--green-t); } .subs small.narrator { color: var(--mute); }
.subs small .rule { display: block; height: 2px; width: 32px; background: currentColor; transform-origin: left; }
.subs p { margin: 0; font-size: 19px; line-height: 1.32; font-weight: 600; max-width: 34ch;
  text-shadow: 0 0 6px var(--paper), 0 0 12px var(--paper), 0 0 18px var(--paper); }
.subs p span { display: inline-block; }

/* the 9 key with the sound on, and the selector folded once the call is under way: both set by film.js only, so they
   moved here from the first HTML when the headline's short-screen fit needed its bytes */
.key.live { background: var(--red-t); color: var(--card); box-shadow: 0 1px 0 var(--key-live-edge), 0 6px 0 var(--key-live-edge), 0 10px 24px var(--red-glow); }
.key.live::after { animation: keyping 1.6s ease-out infinite; }
@keyframes keyping { 0% { opacity: .7; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.18); } }
.folded .alt { max-height: 0; opacity: 0; margin-top: -18px; visibility: hidden; }
@media (max-width: 760px) { .folded .alt { margin-top: -14px; } }
/* the phone: the progress strip comes in under way (47vh less 46 px, 38 tall) while the headline stays until the chain
   card (spec-rev2), so once folded the headline takes the card's place, 47vh, and no longer shrinks: at 46vh its first
   line box ran 4 to 8 px under the strip's blue progress line ("One" at 2.21:1, site-r11-run4). Folded back, 46vh. */
@media (max-width: 760px) {
  .js:not(.still) .copy::before { transition: flex-basis .6s cubic-bezier(.2, .7, .2, 1); }
  .folded .copy::before { flex: 0 0 47vh; flex-basis: 47svh; }
}

@media (prefers-reduced-motion: reduce) { .st::before, .key.live::after { animation: none !important; } .acc .bd { transition: none; } }
@media (min-width: 761px) and (max-width: 1023px) {
  .card { width: min(400px, 100%); }
  .subs { left: var(--pad); right: var(--pad); bottom: 6vh; min-height: 0; }
}
@media (max-width: 760px) {
  .card { width: auto; }
  .subs { left: 16px; right: 16px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); min-height: 0; }
  .subs p { font-size: 16px; }
}

/* The section menu (spec-r3 §3, §4, §6, §7; menu.js, which makes all of it). The opener sits in the bar before Skip;
   from 761 the menu is a card under the bar at the right (the explainer panel's card), below it the whole screen under
   the bar. It lives inside the bar's .tools (Tab order), so these rules undo the bar's pill buttons for its entries,
   and it sits under the bar's controls (z-index -1 in the bar's stacking context) */
#menu-open .burger { display: grid; gap: 3px; width: 14px; }
#menu-open .burger i { display: block; height: 2px; background: var(--ink); border-radius: 1px; }
#menu-open .ml { font-weight: 700; }
#menu-open[aria-expanded="true"] { border-color: var(--blue); background: var(--card); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.menu { position: fixed; z-index: -1; top: calc(76px + env(safe-area-inset-top, 0px)); right: var(--pad); width: min(440px, calc(100% - 32px));
  max-height: calc(100vh - 96px - env(safe-area-inset-top, 0px)); overflow: auto; overscroll-behavior: contain; padding: 20px 22px 18px;
  background: var(--card); border-radius: 18px; box-shadow: 0 1px 0 var(--line), 0 18px 48px var(--shadow-m); white-space: normal;
  animation: menu-in .18s cubic-bezier(.2,.7,.2,1); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-6px); } }
.still .menu { animation: none; }
.menu .mh { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--mute); }
.menu .m-calls + .mh { margin-top: 18px; }
.menu ul, .menu ol { list-style: none; margin: 0; padding: 0; }
.menu .mc, .menu .m-secs a { display: grid; align-items: center; gap: 14px; width: 100%; min-height: 0; border: 0; background: none; color: var(--ink);
  text-align: left; white-space: normal; }
.menu .mc { grid-template-columns: 40px 1fr; padding: 8px 6px; border-radius: 10px; font: inherit; }
.menu .mc b { font-size: 16px; font-weight: 800; line-height: 20px; }
.menu .mc em { display: none; margin-left: 10px; font-style: normal; font-size: 13px; font-weight: 700; color: var(--blue); }
.menu .mc[aria-current] em { display: inline; }
.menu .mc small { display: block; margin-top: 1px; font-size: 13px; line-height: 17px; color: var(--mute); }
.menu .mc[aria-disabled] { cursor: default; }
.menu .mc:hover, .menu .m-secs a:hover { border-color: transparent; background: none; }
.menu .mc:not([aria-disabled]):hover, .menu .m-secs a:hover { background: var(--paper); }
.menu .mc:not([aria-disabled]):hover b, .menu .m-secs a:hover { color: var(--blue); }
.menu .pk { font-size: 19px; font-weight: 800; font-style: normal; color: var(--ink); }
.menu .mc[aria-disabled] .pk { color: var(--mute); }
.menu .mc[aria-current] .pk { background: var(--blue); color: var(--card); box-shadow: 0 1px 0 var(--line), 0 4px 0 var(--ink), 0 6px 14px var(--shadow-s); }
.menu .m-secs a { grid-template-columns: 30px 1fr; padding: 9px 6px 7px; border-radius: 8px; font-size: 17px; font-weight: 700; }
.menu .m-secs b { display: grid; place-items: center; height: 24px; padding-top: 2px; box-sizing: border-box; border: 1.5px solid var(--blue); color: var(--blue);
  font-size: 13px; font-weight: 800; }
.menu .m-secs a[aria-current] b { background: var(--blue); color: var(--card); }
/* a jump crosses the page under a paper veil (menu.js; never with reduced motion) */
body::after { content: ""; position: fixed; inset: 0; z-index: 40; background: var(--paper); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .16s, visibility 0s .16s; }
.veil body::after { opacity: 1; visibility: visible; transition: opacity .16s; }
/* with reduced motion the bar is fixed to the top too, so the menu is in reach anywhere (Sebastien, 2026-10-29); its
   ground turns opaque once the page moves under it (rest.js). ?still alone keeps it in the flow for the frame exports */
@media (prefers-reduced-motion: reduce) { .js .bar { position: fixed; } }
@media (max-width: 760px) {
  /* the phone's bar has room for three controls: the opener takes Skip's place (its second entry is the explainer) */
  .has-menu #skipfilm { display: none; }
  #menu-open { padding-inline: 11px; }
  #menu-open .ml { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .menu { top: 0; left: 0; right: 0; bottom: 0; width: auto; max-height: none; padding: calc(84px + env(safe-area-inset-top, 0px)) 20px 28px;
    border-radius: 0; box-shadow: none; animation-name: menu-fade; }
  @keyframes menu-fade { from { opacity: 0; } }
  .menu .mc { grid-template-columns: 34px 1fr; }
  .menu .pk { font-size: 16px; }
}
/* spec-r5 (FROZEN 2026-10-31): a key with a drawn mark (lockout's padlock, spec-r3 §6, never a digit); injury's 9 as a
   small key under another call's; the lockout call in the line's blue, not first aid's red: it is an ask, not an
   emergency (html.call-s03, set by film.js); the breakdown call too (html.call-s01, spec-r5 §13: both blue) */
.key svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; margin-top: -6px; }
.pk.nine { font: 800 19px/1 var(--font); font-style: normal; color: var(--mute); padding-top: 3px; }
.call-s03 .key::after, .call-s01 .key::after { border-color: var(--blue); }
.call-s03 .key.live, .call-s01 .key.live { background: var(--blue); color: var(--card); box-shadow: 0 1px 0 var(--ink), 0 6px 0 var(--ink), 0 10px 24px var(--blue-25); }
.call-s03 .subs small.caller, .call-s01 .subs small.caller { color: var(--blue); }
/* the procedure card's "Word for word": a steady blue dot, never the chain card's ringing ping (nothing rings in this call) */
.st.reading { color: var(--blue); }