/* =========================================================
   Home page: the multiviewer (four tiles)
   ========================================================= */
/* ---------- Multiviewer: four sources on one wall ---------- */
#stage{height:calc(100% - 30px);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:6px;padding:6px;
  padding-top:calc(6px + env(safe-area-inset-top,0px));padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
/* source pictures */
.roll{position:absolute;left:0;right:0;top:0;display:grid;gap:9px;padding:56px 18px;font-size:10px;letter-spacing:.08em;color:var(--faint);opacity:.55;
  animation:rollUp 40s linear infinite}
.roll.credits{text-align:center;justify-items:center;animation-duration:30s}
.roll.credits b{display:block;font-weight:400;color:var(--dim);letter-spacing:.18em;margin-top:6px}
@keyframes rollUp{from{transform:translateY(0)}to{transform:translateY(-50%)}}
.chart{position:absolute;left:50%;top:50%;width:min(62%,62vh);aspect-ratio:1;transform:translate(-50%,-50%);opacity:.22}
.chart i{position:absolute;inset:0;border:1px solid var(--bone);border-radius:50%}
.chart i:nth-child(2){inset:18%}.chart i:nth-child(3){inset:36%}
.chart b{position:absolute;background:var(--bone)}
.chart b:nth-of-type(1){left:50%;top:-8%;bottom:-8%;width:1px}.chart b:nth-of-type(2){top:50%;left:-8%;right:-8%;height:1px}
.chart .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(231,226,215,.5),transparent 25%);animation:sweep 6s linear infinite}
@keyframes sweep{to{transform:rotate(360deg)}}
.noise{position:absolute;inset:0;width:100%;height:100%;opacity:.16;image-rendering:pixelated}

@media (max-width:640px) and (orientation:portrait){
  #stage{grid-template-columns:1fr;grid-template-rows:repeat(6,minmax(140px,1fr));height:auto;min-height:100%}
  .chart{width:min(50%,18vh)}
}
@media (prefers-reduced-motion:reduce){
  .roll,.chart .sweep{animation:none}
}


/* Logbook tile: a ruled page with a pen waiting on the line */
.ruled{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0 27px,rgba(231,226,215,.08) 27px 28px);opacity:.9}
.ruled::before{content:"";position:absolute;top:0;bottom:0;left:56px;width:1px;background:rgba(255,24,36,.28)}
.ruled .sig{position:absolute;left:72px;bottom:58px;font-family:"Permanent Marker","Bradley Hand",cursive;font-size:18px;color:var(--faint);transform:rotate(-2deg)}
.ruled .caret{position:absolute;left:170px;bottom:60px;width:2px;height:20px;background:var(--tally);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}
@media (prefers-reduced-motion:reduce){.ruled .caret{animation:none}}

/* status strip under the multiviewer, with the Privacy link */
.mv-foot{height:30px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding-inline:8px;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint)}
.mv-foot a{color:var(--dim);text-decoration:none;border-bottom:1px solid transparent}
.mv-foot a:hover,.mv-foot a:focus-visible{color:var(--bone);border-bottom-color:var(--tally)}
@media (max-width:640px) and (orientation:portrait){.mv-foot{height:auto;padding-block:14px calc(14px + env(safe-area-inset-bottom,0px))}}


/* First Letters tile (CAM 5): in rehearsal, not linked yet.
   A small phrase board fills in behind the name in the show's tile colours. */
.tile--rehearsal{cursor:default}
.tile--rehearsal:hover{border-color:var(--line);background:#070707}
.tile--rehearsal:hover .name{font-variation-settings:"wdth" 70}
.tile--rehearsal .src{container-type:size}
.tile--rehearsal .umd .tl i{background:#5C4210}
.fl-board{position:absolute;left:0;right:0;top:13cqh;display:flex;justify-content:center;gap:min(1cqw,2.4cqh);opacity:.55}
.fl-board i,.fl-board b{--s:min(6cqw,15cqh);flex:none}
.fl-board i{width:var(--s);height:var(--s);border-radius:calc(var(--s) * .16);display:grid;place-items:center;
  background:#00000E;box-shadow:inset 0 0 0 calc(var(--s) * .07) #1F2FD1;color:transparent;
  font-style:normal;font-family:var(--display);font-weight:900;font-size:calc(var(--s) * .62);line-height:1;font-variation-settings:"wdth" 100;
  transition:background .35s,box-shadow .35s,color .35s}
.fl-board b{width:calc(var(--s) * .45)}
.fl-board i.g{background:#008F00;box-shadow:inset 0 0 0 calc(var(--s) * .07) #1BB40B;color:#fff}
.fl-board i.r{background:#780B0B;box-shadow:inset 0 0 0 calc(var(--s) * .07) #B40B0B}
.fl-board i.y{background:#FFD400;box-shadow:inset 0 0 0 calc(var(--s) * .07) #FFEA6F}
.tile--rehearsal .rehearsal{position:absolute;left:0;right:0;top:calc(50% + clamp(18px,3vw,44px));z-index:2;display:flex;justify-content:center;align-items:center;gap:8px;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--amber)}
.tile--rehearsal .rehearsal i{width:7px;height:7px;border-radius:50%;background:var(--amber);animation:ldBlink 1.4s steps(2) infinite}
@media (prefers-reduced-motion:reduce){.fl-board i{transition:none}.tile--rehearsal .rehearsal i{animation:none}}