/* /channels: the same hero + window as the work page. inside the window: every channel in a sidebar, our biggest videos on phones */
.win-bar .who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.who > img { width: 30px; height: 30px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; transition: opacity .22s var(--ease); }
.who .t { min-width: 0; transition: opacity .22s var(--ease); }
.who.swap .t, .who.swap > img { opacity: 0; }
.who b { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; }
.who .t > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 12.5px; }
.bar-r { display: flex; align-items: center; gap: 8px; }
.btn.sq { width: 38px; padding: 0; }
.btn.sq svg { width: 18px; height: 18px; }
.btn.open svg { width: 14px; height: 14px; }
.sound svg { width: 18px; height: 18px; }
.sound .spk { fill: currentColor; stroke: none; }
.sound .on { display: none; }
.sound[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #111; }
.sound[aria-pressed="true"] .on { display: inline; }
.sound[aria-pressed="true"] .off { display: none; }

.split { display: grid; grid-template-columns: 290px minmax(0, 1fr); }

/* sidebar: every channel. click one and the phones show only its videos; its ↗ (and "open channel" up top) are the only links out */
.side { max-height: clamp(520px, 66vh, 700px); overflow-y: auto; scrollbar-width: thin; padding: 14px 10px; border-right: 1px solid var(--line); }
.rh { display: flex; align-items: center; gap: 8px; padding: 2px 8px 10px; color: var(--muted); font-size: 13px; font-weight: 600; }
.rh span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line-2); border-radius: 999px; color: var(--ink); font-size: 11px; }
#railList { display: flex; flex-direction: column; gap: 4px; }
.rc { cursor: pointer; display: grid; grid-template-columns: 36px minmax(0, 1fr) 30px; align-items: center; gap: 10px; padding: 6px 8px; border: 1px solid transparent; border-radius: 14px;
  transition: background .25s var(--ease), border-color .25s var(--ease); }
.rc:hover { background: rgba(255, 255, 255, .05); border-color: var(--line); }
.rc.on { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .26); }
.rc:focus-visible { outline-offset: -2px; }
.rc > img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.rc b { display: flex; align-items: center; gap: 7px; min-width: 0; font-size: 14px; font-weight: 600; }
.rc > span { min-width: 0; }
.rc i { display: block; overflow: hidden; color: var(--muted); font-style: normal; font-size: 12px; white-space: nowrap; text-overflow: ellipsis; }
.rc .ext { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line-2); border-radius: 9px; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
/* only the ↗ itself lights up: the row picks the channel, the ↗ is the one that leaves the site */
.rc .ext:hover { background: var(--ink); border-color: var(--ink); color: #111; box-shadow: 0 0 18px rgba(255, 255, 255, .35); }
.rc .ext svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* the stage: phones in a cover-flow */
.stagebox { position: relative; isolation: isolate; overflow: hidden; container-type: size; height: clamp(520px, 66vh, 700px); border-radius: 0 0 21px 0; outline: none;
  background: radial-gradient(48% 56% at 50% 48%, rgba(120, 140, 255, .14), rgba(11, 11, 12, 0) 72%), linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(0, 0, 0, .25));
  user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.stagebox:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.flow { position: absolute; inset: 0; perspective: 1900px; perspective-origin: 50% 44%; cursor: grab; }
.rig { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 1.2s cubic-bezier(.2, .7, .2, 1); pointer-events: none; }
.flow.drag { cursor: grabbing; }
.phone { --pw: clamp(140px, calc((100cqh - 96px) * .4615), 320px); position: absolute; left: 50%; top: calc(50% - 18px); width: var(--pw); height: calc(var(--pw) * 2.1667);
  margin: calc(var(--pw) * -1.0833) 0 0 calc(var(--pw) * -.5); padding: calc(var(--pw) * .034); border-radius: calc(var(--pw) * .168);
  background: linear-gradient(150deg, #474b57 0%, #15161b 18%, #07080b 58%, #2a2c33 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16), inset 0 0 0 calc(var(--pw) * .013) #000, 0 60px 90px -36px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
  transition: transform .95s var(--ease), opacity .95s var(--ease), filter .95s var(--ease); will-change: transform; cursor: pointer; pointer-events: auto; }
.flow.drag .phone { transition: none; }
/* switching channel: everything fades out, the new channel fades in; nothing slides */
.flow, .stagebox .empty, .dots { transition: opacity .3s var(--ease); }
.stagebox.out .flow, .stagebox.out .empty, .stagebox.out .dots { opacity: 0; }
.flow.still .phone, .phone.jump { transition: none !important; }
/* a phone wrapping from one end of the fan to the other fades out, jumps, fades back in */
.phone.gone { opacity: 0 !important; transition: opacity .2s var(--ease) !important; }
.phone::after { content: ''; position: absolute; z-index: -1; left: 10%; right: 10%; bottom: calc(var(--pw) * -.1); height: calc(var(--pw) * .12); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0)); filter: blur(5px); pointer-events: none; }
.scr { position: relative; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * .136); background: #000; -webkit-mask-image: -webkit-radial-gradient(white, black); }
.scr > img, .scr video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; }
.scr video { opacity: 0; transition: opacity .45s var(--ease); }
.scr video.on { opacity: 1; }
.island { position: absolute; z-index: 3; top: calc(var(--pw) * .052); left: 50%; width: 30%; height: calc(var(--pw) * .088); transform: translateX(-50%); border-radius: 999px; background: #000; }
.status { position: absolute; z-index: 3; top: calc(var(--pw) * .06); left: 9%; right: 9%; display: flex; justify-content: space-between; align-items: center;
  font-size: calc(var(--pw) * .046); font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 4px rgba(0, 0, 0, .35); pointer-events: none; }
.status i { position: relative; width: calc(var(--pw) * .075); height: calc(var(--pw) * .036); border: 1px solid rgba(255, 255, 255, .85); border-radius: 3px; }
.status i::after { content: ''; position: absolute; inset: 1px; right: 22%; border-radius: 1px; background: #fff; }
.phone .side { position: absolute; z-index: 3; right: 4.5%; bottom: 10%; display: grid; justify-items: center; gap: calc(var(--pw) * .06); padding: 0; border: 0; font-size: calc(var(--pw) * .042); font-weight: 600;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55); pointer-events: none; }
.phone .side img { width: calc(var(--pw) * .13); height: calc(var(--pw) * .13); border: 1.5px solid #fff; border-radius: 50%; object-fit: cover; }
.phone .side span { display: grid; justify-items: center; gap: 2px; }
.phone .side svg { width: calc(var(--pw) * .1); height: calc(var(--pw) * .1); fill: #fff; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .4)); }
.meta { position: absolute; z-index: 3; left: 6.5%; right: 24%; bottom: 6.5%; font-size: calc(var(--pw) * .046); line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, .6); pointer-events: none; }
.meta b { display: block; margin-bottom: 3px; font-weight: 600; }
.meta span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; opacity: .92; }
.sheen { position: absolute; z-index: 4; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(116deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0) 26%, rgba(255, 255, 255, 0) 74%, rgba(255, 255, 255, .05)); }

.dots { position: absolute; z-index: 5; left: 50%; bottom: 18px; display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(11, 11, 12, .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transform: translateX(-50%); }
.dots button { position: relative; width: 7px; height: 7px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .35); transition: width .55s var(--ease), background .3s var(--ease); }
.dots button[aria-selected="true"] { width: 30px; background: rgba(255, 255, 255, .25); }
.dots button::after { content: ''; position: absolute; inset: 0; background: var(--ink); transform: scaleX(0); transform-origin: 0 50%; }
.dots button[aria-selected="true"]::after { transform: scaleX(1); }
.dots button.run::after { animation: fill var(--dur, 6500ms) linear both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (max-width: 860px) {
  .split { display: block; }
  .side { max-height: none; overflow: visible; padding: 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .rh { display: none; }
  #railList { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  #railList::-webkit-scrollbar { display: none; }
  .rc { flex: 0 0 auto; grid-template-columns: 32px auto; gap: 8px; padding: 6px 12px 6px 6px; border-color: var(--line); border-radius: 999px; }
  .rc > img { width: 32px; height: 32px; }
  .rc i, .rc .ext { display: none; }
  .stagebox { height: clamp(500px, 74svh, 640px); border-radius: 0 0 17px 17px; }
  .phone { --pw: clamp(140px, calc((100cqh - 96px) * .4615), 230px); }
}
@media (max-width: 700px) {
  .win-bar .who .t > span { display: none; }
  .sound span { display: none; }
  .sound { width: 38px; padding: 0; }
  #prev, #next { display: none; } /* phones swipe, so the bar keeps one row: who's playing, sound, open */
}

/* the x posts are square films: letterboxed, like the x app shows them */
.phone.contain .scr > img, .phone.contain .scr video { object-fit: contain; background: #000; }
/* a channel with nothing public to play */
.empty { position: absolute; z-index: 6; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 24px; text-align: center; }
.empty > img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--line-2), 0 20px 50px -20px rgba(0, 0, 0, .8); }
.empty b { display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 600; }
.empty p { max-width: 32ch; color: var(--muted); }
.empty .btn { margin-top: 4px; }
.empty .btn svg { width: 14px; height: 14px; }
@media (max-width: 700px) {
  .btn.open { width: 38px; padding: 0; }
  .btn.open span { display: none; }
}