/* 05 – multicam, the page's quality bar. A laptop: the director's wall on the left, the words on the right. A phone:
   the words, the request right above the wall, the wall, one line and the link under it.
   The wall is a dark panel with one video. Laptop file (v12-05-wall.mp4, 1704×720; tools/chapters/0405/media/wall-05b.sh): the cut 1280×720 on the left,
   the three live angles 412×232 in a column at x 1292, y 0 / 244 / 488. Phone file (…-wall-phone.mp4, 960×726 from
   1280×968): the cut on top, the angles 418×235 in a row at x 0 / 431 / 862, y 732. The angle on air is framed in
   yellow; under the picture, one lane per camera with its stretches on air and a sound lane that never breaks.
   Every switch (the frame, the names, the lanes) is a hard cut on the picture's own frame, like the edit itself: no
   transitions on any of them (v12 polish; a sliding frame straddled two tiles mid-move). */
.mx-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
.mx-words h2 { max-width: 12ch; }
.mx-words .lead { max-width: 24em; }
.mx-ask { margin-top: var(--s5); }
.mx-wall { margin: var(--s4) 0 0; }
.mx-more { margin-top: var(--s5); }
@media (min-width: 980px) {
  .mx-grid { grid-template-columns: minmax(0, 7.4fr) minmax(0, 4.6fr); grid-template-rows: auto auto 1fr; grid-template-areas: "wall words" "wall ask" "wall more"; column-gap: var(--s7); }
  .mx-words { grid-area: words; }
  .mx-ask { grid-area: ask; }
  .mx-more { grid-area: more; align-self: start; }
  .mx-wall { grid-area: wall; align-self: center; margin: 0; }
}

.mx-wall { padding: 14px 16px 18px; border-radius: var(--r-card); background: var(--night); box-shadow: var(--sh-3); color: var(--night-ink); }
.mx-screen { --s: .4; position: relative; aspect-ratio: 1704 / 720; border-radius: 0; overflow: visible; }
.mx-screen.is-phone { aspect-ratio: 960 / 726; }
.mx-screen.nc-box { background-color: var(--night); }
/* The angle on air, framed in the logo's yellow */
.mx-lit { position: absolute; z-index: 3; pointer-events: none; left: calc(75.822% - 3px); top: calc(var(--i, 2) * 33.889% - 3px); width: calc(24.178% + 6px); height: calc(32.222% + 6px);
  border: 3px solid var(--yellow); border-radius: calc(10px * var(--s) + 3px); }   /* a hard cut, never a slide */
.mx-screen.is-phone .mx-lit { left: calc(var(--i, 2) * 33.672% - 3px); top: calc(75.62% - 3px); width: calc(32.656% + 6px); height: calc(24.277% + 6px); border-width: 2.5px; }
/* The angles' names: on the tiles on a laptop, under them on a phone */
.mx-cam { position: absolute; z-index: 2; left: calc(75.822% + 7px); top: calc(var(--i) * 33.889% + 7px); padding: 4px 9px; border-radius: 8px; background: rgba(17, 18, 16, .74); color: #fff; font: 600 16px/1.15 var(--font); pointer-events: none; }
.mx-cam.is-on { background: var(--yellow); color: var(--ink); }
.mx-screen.is-phone .mx-cam { display: none; }
.mx-names { display: none; }
.mx-wall.is-phone .mx-names { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.016%; margin-top: 6px; text-align: center; }
.mx-names span { font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--night-muted); }
.mx-names span.is-on { color: var(--yellow); }
.mx-tag { top: 12px; left: 12px; }
.mx-sound { position: absolute; right: calc(24.883% + 10px); bottom: 10px; z-index: 3; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font: 600 16px/1 var(--font); color: #fff; background: rgba(17, 18, 16, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 0; border-radius: var(--r-pill); padding: 0 16px 0 13px; cursor: pointer; transition: background-color .2s; }
.mx-sound:hover { background: rgba(17, 18, 16, .82); }
.mx-sound .ico { width: 18px; height: 18px; }
.mx-screen.is-phone .mx-sound { right: 10px; bottom: calc(25.62% + 10px); }

/* Who is on air: one lane per camera, yellow where it is in the cut; under them the sound, one take that never breaks.
   A playhead on the video's clock. Before the wall plays (until the reply) the lanes rest dimmed. */
.mx-lanes { --lab: 108px; position: relative; display: grid; gap: 8px; margin-top: 16px; transition: opacity .4s ease; }
.mx-wall:not(.is-live) .mx-lanes { opacity: .5; }
.mx-lane { display: grid; grid-template-columns: var(--lab) minmax(0, 1fr); align-items: center; }
.mx-lane b { display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 600; color: var(--night-muted); }
.mx-lane b .ico { width: 18px; height: 18px; }
.mx-lane.is-on b { color: var(--yellow); }
.mx-track { position: relative; height: 14px; border-radius: 4px; background: rgba(242, 240, 233, .08); overflow: hidden; }
.mx-track i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: rgba(232, 180, 0, .42); }
.mx-lane.is-on .mx-track i.is-now { background: var(--yellow); }
.mx-snd b { color: var(--night-2); }
.mx-wave { height: 26px; background: none; border-radius: 0; overflow: visible; }
.mx-wave svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.mx-wave .w-dim { fill: rgba(242, 240, 233, .22); }
.mx-wave .w-lit { fill: var(--night-ink); clip-path: inset(0 calc((1 - var(--p, 0)) * 100%) 0 0); }
.mx-head { position: absolute; top: -5px; bottom: -5px; left: var(--lab); width: 2px; margin-left: -1px; border-radius: 1px; background: #fff; transform: translateX(var(--hx, 0px)); pointer-events: none; opacity: 0; transition: opacity .3s; }
.mx-wall.is-live .mx-head { opacity: 1; }

.mx-note { margin: 0; max-width: 24em; font-size: 18px; line-height: 1.45; font-weight: 500; color: var(--ink-2); text-wrap: pretty; }
.mx-more .link { margin-top: var(--s1); }

@media (max-width: 979px) { .mx-words h2 { max-width: 16ch; } }
@media (max-width: 719px) {
  /* at the natural stop (the headline under the header) the request and the whole wall share a 390×844 screen */
  .mx-ask { margin-top: var(--s3); }
  .mx-wall { margin-top: var(--s2); padding: 10px 10px 12px; border-radius: var(--r-card); }
  .mx-tag { top: 8px; left: 8px; }
  .mx-lanes { --lab: 94px; gap: 7px; margin-top: 10px; }
  .mx-track { height: 12px; }
  .mx-wave { height: 22px; }
  .mx-more { margin-top: var(--s4); }
}
@media (max-width: 719px) and (max-height: 760px) {
  /* A short phone (375×667, or a 390 phone under Safari's bars): at the natural stop the headline, the request, its
     reply and the whole wall – the picture, the angles, the camera lanes and the sound lane – share the screen. The
     lead goes (the reply and the sound lane say it), the lanes sit closer, and the headline steps down to 32 px – or a
     hair less where "More than one camera?" would not fit one line (337 px at 32 px; a 375 phone has 335, and WebKit
     sets it a pixel or two wider): two lines, never three. It may reach 6 px into the gutter, like 04's. */
  .mx-words h2 { font-size: min(32px, calc((100vw - 34px) / 10.8)); max-width: none; margin-right: -6px; }
  .mx-words .lead { display: none; }
  .mx-ask { margin-top: var(--s3); }
  .mx-wall { margin-top: var(--s2); padding: 8px 10px 10px; }
  .mx-wall.is-phone .mx-names { margin-top: 4px; }
  .mx-lanes { gap: 5px; margin-top: 8px; }
  .mx-lane b { line-height: 18px; }
  .mx-wave { height: 20px; }
}
@media (prefers-reduced-motion: reduce) { .mx-lanes { transition: none; } }