/* 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).
   RU (2026-10-04): the words are Russian (parts/05, ru/VOICE.md). The camera names are «Общий», «Крупный», «С рук».
   With sound on, Russian captions sit over the cut (.mx-cc), one row above the sound button.
   The Russian headline is set as «Несколько камер. / Один ролик.»; the word column remains wide enough for the first
   line, and the wall stays readable beside it. */
.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, 1fr) max(calc((100% - var(--s7)) * 4.6 / 12), calc(clamp(36px, 4.1vw, 60px) * 8.4)); grid-template-rows: auto auto 1fr; grid-template-areas: "wall words" "wall ask" "wall more"; column-gap: var(--s7); }
  .mx-words h2 { max-width: none; }   /* RU: the column sets the measure (above) */
  .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); }
/* RU: Russian captions of the English talk while the sound is on (media/v12-ru-05-wall.vtt, read by js/05), centred on
   the cut and one row above the sound button; the talk card's caption look (base.css .tc-cc) */
.mx-cc { position: absolute; left: 37.559%; bottom: 60px; z-index: 2; transform: translateX(-50%); width: max-content; max-width: calc(75.117% - 24px); margin: 0; color: #fff; font: 600 clamp(16px, 1.4vw, 20px)/1.6 var(--font); text-align: center; text-wrap: balance; pointer-events: none; }
.mx-cc > span { padding: 3px 10px 4px; border-radius: 7px; background: rgba(0, 0, 0, .74); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.mx-cc:empty { display: none; }
.mx-screen.is-phone .mx-cc { left: 50%; bottom: calc(25.62% + 60px); max-width: calc(100% - 20px); font-size: 16px; }

/* 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 is base.css's 32 px.
     The Russian heading keeps its two intended lines at the short-phone size. */
  .mx-words h2 { max-width: none; }
  .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 (max-width: 359px) { .mx-words h2 { font-size: 32px; } }   /* Leave room for the first Russian line. */
@media (prefers-reduced-motion: reduce) { .mx-lanes { transition: none; } }