/* The listening view, working, as the views board draws it (design/verso-views.html): a phone with a black bezel
   and a titanium edge, and inside it the words lighting up as they are read. Sizes come from the screen's own
   width, so it scales with it. */

:root { --titan: #A2A5AC; --bezel: #07080A; --paper-mute: #8C8679; --hl: #FFE27A; }
@media (prefers-color-scheme: dark) { :root { --titan: #5B5F68; } }

.dev { position: relative; width: 100%; background: var(--bezel); box-shadow: 0 0 0 2px var(--titan), 0 24px 48px -18px rgba(0, 0, 0, 0.6); }
.dev.phone { aspect-ratio: 390 / 844; border-radius: 15% / 7%; max-width: 300px; margin-inline: auto; padding: 0; }
.dev .screen {
  position: absolute; overflow: hidden; container-type: inline-size; font-family: var(--ui); line-height: 1.3;
  --s2: calc(var(--u) * 2); --s4: calc(var(--u) * 4); --s6: calc(var(--u) * 6); --s8: calc(var(--u) * 8); --s12: calc(var(--u) * 12); --s14: calc(var(--u) * 14); --s16: calc(var(--u) * 16); --s20: calc(var(--u) * 20); --s24: calc(var(--u) * 24); --s32: calc(var(--u) * 32); --s44: calc(var(--u) * 44);
  --f10: calc(var(--u) * 10); --f11: calc(var(--u) * 11); --f12: calc(var(--u) * 12); --f13: calc(var(--u) * 13); --f15: calc(var(--u) * 15); --f17: calc(var(--u) * 17); --f30: calc(var(--u) * 30);
}
.dev.phone .screen { inset: 1.6% 3.4%; border-radius: 13% / 6%; --u: calc(100cqw / 390); width: auto; height: auto; }
.dev .island { position: absolute; top: var(--s12); left: 50%; translate: -50% 0; width: calc(var(--u) * 108); height: calc(var(--u) * 30); border-radius: 99em; background: #000; z-index: 9; }
.ic { width: calc(var(--u) * 22); height: calc(var(--u) * 22); fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* The listening view: the ground from the cover, the phrase being spoken lit word by word. */
.cv { aspect-ratio: 2 / 3; border-radius: var(--s4); background: var(--c, #15324A); color: var(--t, #F3EBD8); padding: var(--s8); display: flex; flex-direction: column; justify-content: space-between; font-family: var(--reading); font-size: var(--f11); font-weight: 600; line-height: 1.15; }
.ly { position: absolute; inset: 0; background: linear-gradient(170deg, #1D4A70, #0D2135 55%, #0A1422); color: #fff; display: flex; flex-direction: column; }
.ly-head { flex: none; display: flex; gap: var(--s12); align-items: center; padding: calc(var(--u) * 62) var(--s24) var(--s8); }
.ly-head .cv { width: calc(var(--u) * 44); flex: none; font-size: calc(var(--u) * 7); padding: var(--s4); }
.ly-head b { display: block; font-size: var(--f15); font-family: var(--ui); }
.ly-head small { font-size: var(--f12); opacity: 0.65; }
.ly-lines { position: relative; flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: none; padding: 45% var(--s24) 70%; display: flex; flex-direction: column; gap: var(--s20); -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 76%, transparent); mask-image: linear-gradient(transparent, #000 16%, #000 76%, transparent); }
.ly-lines::-webkit-scrollbar { display: none; }
.ly-lines p { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 25); line-height: 1.16; letter-spacing: -0.01em; opacity: 0.3; filter: blur(calc(var(--u) * 0.9)); transition: opacity 0.45s, filter 0.45s; cursor: pointer; margin: 0; }
.ly-lines p.done { opacity: 0.42; filter: none; }
.ly-lines p.on { opacity: 1; filter: none; }
.ly-lines p.on span { opacity: 0.42; transition: opacity 0.25s; }
.ly-lines p.on span.w { opacity: 1; }
.ly-ctl { flex: none; padding: var(--s8) var(--s24) var(--s32); display: flex; flex-direction: column; gap: var(--s14); }
.ly-ctl .track { height: var(--s4); border-radius: 9em; background: rgba(255, 255, 255, 0.2); position: relative; }
.ly-ctl .track i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 9em; background: #fff; }
.ly-row { display: flex; justify-content: space-between; align-items: center; font-size: var(--f11); color: rgba(255, 255, 255, 0.65); }
.ly-row .chip { padding: var(--s6) var(--s12); border-radius: 9em; background: rgba(255, 255, 255, 0.14); color: #fff; font-weight: 600; }
.ly button { all: unset; cursor: pointer; display: grid; place-items: center; color: #fff; min-width: 44px; min-height: 44px; }
.ly button .ic { width: calc(var(--u) * 34); height: calc(var(--u) * 34); }
.ly button.pp .ic { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.ly button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 8px; }