/* jam/public/ui/wall.css — the jam as a wall, and the soundbed's readouts.
   The wall is the studio app's (two-planets-creative src/components/universe/universe.css, the
   Live view's ?wall=1): the picture fills the screen, a heads-up display sits over it in 48 px
   gutters with soft scrims top and foot; the name top left, the clock and a row of counts top
   right, the live stream in a card down the right, the caption bottom left, a strip of readouts
   along the foot and a 2 px progress line under everything. HUD text never moves by itself: the
   light on the stage moves, rows arrive with a short flash, captions rise in.

   One sheet for three places: a jam's wall (body.walled), the readouts under a jam's stage
   (.transport .readouts) and the landing page's screen (.screen .wall-hud). The HUD sizes itself
   to its box (a size container), so the landing's small screen is the wall, smaller. */

/* ── the readouts: the soundbed, measured (ui/monitor.js) ─────────────────── */
.readouts { display: flex; align-items: flex-start; gap: 8px 22px; flex-wrap: wrap; min-width: 0; }
.ro { display: inline-flex; flex-direction: column; gap: 1px; flex: none; }
.ro .k { font: 400 9.5px/1.3 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.ro .v { font: 400 13.5px/1.3 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ro .v.dim { color: var(--ink-dim); }
.ro .v small { font-size: .72em; color: var(--ink-3); margin-left: 3px; letter-spacing: .04em; }
.ro.f-bpm .v { display: inline-flex; align-items: center; gap: 7px; }
.beat { width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); transition: background .25s, box-shadow .25s; flex: none; }
.beat.on { background: var(--warm); box-shadow: 0 0 10px var(--warm); transition: none; }
.beat.on.down { background: var(--ink); box-shadow: 0 0 12px var(--ink); }
.segs { display: inline-flex; gap: 3px; align-items: center; }
.segs i { font: 400 8.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--ink-dim); border: 1px solid var(--line-strong); padding: 3px 3px 2px; transition: color .4s, background .4s, border-color .4s; }
.segs i.on { color: var(--on-warm); background: var(--ink-2); border-color: var(--ink-2); }
.segs i.on.voice { background: var(--warm); border-color: var(--warm); }
.vu { position: relative; display: inline-block; width: 96px; height: 6px; background: var(--line-strong); overflow: visible; vertical-align: middle; }
.vu i { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--success) 0%, var(--warm) 72%, var(--danger) 100%); background-size: 96px 100%; }
.vu s { position: absolute; top: -3px; bottom: -3px; left: 0; width: 1px; background: var(--ink); opacity: .8; }
.ro.f-level .v { display: inline-flex; align-items: center; gap: 8px; }
.ro.f-state .v::before { content: ''; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-dim); margin-right: 7px; vertical-align: 1px; }
.ro.f-state.on .v::before { background: var(--live); animation: breathe 2s ease-in-out infinite; }
.transport .readouts { flex: 1 1 520px; min-width: 0; padding-left: 18px; border-left: 1px solid var(--line); flex-wrap: nowrap; overflow: hidden; gap: 8px 18px; }
@media (max-width: 1500px) { .transport .readouts .f-perBar, .transport .readouts .f-offChord { display: none; } }
@media (max-width: 1280px) { .transport .readouts .more { display: none; } }
@media (max-width: 720px) { .transport .readouts { order: 5; flex-basis: 100%; padding: 10px 0 0; border-left: 0; border-top: 1px solid var(--line); flex-wrap: wrap; } }

/* The piano roll of what is heard: the lab's (public/lab/lab.js roll()), drawn by ui/monitor.js. */
.roll { display: block; width: 100%; height: 72px; border-top: 1px solid var(--line); background: var(--well); }

/* ── the HUD ──────────────────────────────────────────────────────────────── */
.wall-hud { position: absolute; inset: 0; z-index: 5; pointer-events: none; container: wall / size; color: var(--ink-2); font-family: var(--mono); --g: clamp(14px, 3.4cqw, 48px); }
/* The foot (roll and readouts) is measured in the container's units on .w-layer, which is inside it. */
.w-layer { --roll-h: clamp(34px, 5.4cqh, 62px); --foot-b: clamp(12px, 2cqh, 24px); --foot-h: calc(var(--foot-b) + var(--roll-h) + 62px); }
.wall-hud::before, .wall-hud::after { content: ''; position: absolute; left: 0; right: 0; pointer-events: none; }
.wall-hud::before { top: 0; height: clamp(90px, 22cqh, 210px); background: linear-gradient(var(--ground) 30%, transparent); opacity: .92; }
.wall-hud::after { bottom: 0; height: clamp(120px, 34cqh, 330px); background: linear-gradient(transparent, rgba(10, 10, 12, .94) 62%); }
.w-layer { position: absolute; inset: 0; z-index: 1; }
.w-card { background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--line-strong); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

.w-title { position: absolute; top: calc(var(--g) * .75); left: var(--g); max-width: 52cqw; }
.w-brand { margin: 0; display: flex; align-items: center; gap: 12px; font: 400 clamp(11px, 1.15cqw, 22px)/1 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.w-brand img { width: clamp(16px, 1.6cqw, 30px); height: auto; display: block; }
.w-name { margin: clamp(8px, 1.1cqw, 18px) 0 0; font: 500 clamp(18px, 2.5cqw, 46px)/1.12 var(--sans); letter-spacing: -.01em; color: var(--ink); text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.w-legend { list-style: none; margin: clamp(8px, 1cqw, 16px) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font: 400 clamp(8.5px, .62cqw, 11px)/1.4 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3); }
.w-legend li { display: inline-flex; align-items: center; gap: 6px; }
.w-legend .fig { width: 6px; height: 6px; }

.w-meta { position: absolute; top: calc(var(--g) * .75); right: var(--g); text-align: right; }
.w-clock { font: 400 clamp(20px, 1.8cqw, 34px)/1 var(--mono); letter-spacing: .06em; color: var(--ink); font-variant-numeric: tabular-nums; }
.w-date { margin-top: 6px; font: 400 clamp(8.5px, .6cqw, 11px)/1.4 var(--mono); letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); }
.w-kpis { display: flex; gap: clamp(14px, 1.4cqw, 26px); justify-content: flex-end; margin-top: clamp(10px, 1cqw, 18px); }
.kpi { text-align: right; }
.kpi b { display: block; font: 400 clamp(15px, 1.2cqw, 22px)/1.2 var(--mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.kpi span { font: 400 clamp(8px, .55cqw, 10px)/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--live); margin-right: 6px; vertical-align: 1px; animation: breathe 2s ease-in-out infinite; }
.live-dot.off { background: var(--ink-dim); animation: none; }

/* The live stream: what is being said, as it is said. */
.w-stream { position: absolute; right: var(--g); top: clamp(120px, 20cqh, 200px); bottom: calc(var(--foot-h) + 14px); width: clamp(260px, 25cqw, 440px); padding: 14px 16px; overflow: hidden; }
.w-stream::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, var(--surface)); pointer-events: none; }
.w-stream-head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.stream { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.srow { display: grid; grid-template-columns: 54px minmax(0, 1fr); gap: 0 10px; padding: 7px 0 8px; border-bottom: 1px solid var(--line); --fig: var(--ink-dim); }
.srow .t { font: 400 10.5px/1.6 var(--mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.srow .h { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.srow .b { font: 400 8.5px/1.6 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); border-left: 2px solid var(--fig); padding-left: 6px; white-space: nowrap; }
.srow .s { font: 400 11.5px/1.5 var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.srow .s.human { color: var(--warm); }
.srow .x { grid-column: 2; margin: 2px 0 0; font: 400 13px/1.45 var(--sans); color: var(--ink-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.srow.note .x { font: 400 11px/1.5 var(--mono); color: var(--ink-3); -webkit-line-clamp: 1; }
.srow.read { --fig: var(--warm); }
.srow.read .x { color: var(--ink); }
.srow.fresh { animation: flash 1.2s ease; }
@keyframes flash { from { background: color-mix(in srgb, var(--cool) 22%, transparent); transform: translateX(-6px); } to { background: transparent; transform: none; } }
.srow.focus { background: color-mix(in srgb, var(--warm) 14%, transparent); }
.srow.focus .b { color: var(--warm); }
.srow.focus .x { color: var(--ink); }

/* Bottom left: where the room is, the read of it, and the words being heard. */
.w-story { position: absolute; left: var(--g); bottom: calc(var(--foot-h) + 14px); width: min(60cqw, 820px); display: grid; gap: clamp(8px, 1.1cqh, 14px); }
/* A soft dark behind the words, as the studio's scrims keep HUD text legible over the map. */
.w-story::before { content: ''; position: absolute; inset: -18% -14% -16% -8%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 62% at 40% 58%, rgba(8, 8, 10, .72), rgba(8, 8, 10, .35) 55%, transparent 78%); }
.w-section { font-size: clamp(9px, .66cqw, 12px); letter-spacing: .2em; }
.w-why { margin: -4px 0 0; font: 400 clamp(12px, .9cqw, 16px)/1.5 var(--sans); color: var(--ink-2); max-width: 64ch; text-shadow: 0 1px 14px rgba(0, 0, 0, .9); }
.w-why:empty { display: none; }
.w-caption .c { margin: 0; font: 300 clamp(19px, 2.15cqw, 40px)/1.24 var(--sans); color: var(--ink); letter-spacing: -.005em; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .8); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.w-caption .m { margin: 10px 0 0; font: 400 clamp(8.5px, .58cqw, 10.5px)/1.4 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--ink-3); }
.w-caption.ceremony .c { color: var(--warm); }
.w-caption.rise, .w-sub.rise { animation: rise-in .6s var(--ease-arrive); }
@keyframes rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.w-sub { --fig: var(--ink-dim); border-left: 2px solid var(--fig); padding: 2px 0 2px 14px; max-width: 70ch; transition: opacity 1.2s; }
.w-sub.faded { opacity: .35; }
.w-sub .who { display: flex; gap: 10px; align-items: baseline; font: 400 clamp(8.5px, .62cqw, 11px)/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.w-sub .who b { font-weight: 400; color: var(--ink); letter-spacing: .1em; }
.w-sub .who .shape { color: var(--fig); }
.w-sub p { margin: 4px 0 0; font: 400 clamp(13px, 1.06cqw, 19px)/1.45 var(--sans); color: var(--ink-prose); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.w-sub:empty { display: none; }

/* The foot: a piano roll of what is heard, and the readouts under it. */
.w-foot { position: absolute; left: var(--g); right: var(--g); bottom: var(--foot-b); display: grid; gap: 10px; }
.w-roll { height: var(--roll-h); border: 0; background: none; opacity: .9; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 100%); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 100%); }
.w-foot .readouts { gap: 6px clamp(12px, 1.6cqw, 34px); border-top: 1px solid var(--line); padding-top: 10px; flex-wrap: nowrap; overflow: hidden; }
.w-foot .ro .k { font-size: clamp(8px, .55cqw, 10px); }
.w-foot .ro .v { font: 300 clamp(12px, 1.05cqw, 20px)/1.25 var(--mono); }
.w-foot .vu { width: clamp(60px, 6cqw, 120px); background-size: clamp(60px, 6cqw, 120px) 100%; }
.w-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; }
.w-progress i { display: block; height: 100%; background: var(--cool); opacity: .55; transform-origin: 0 0; transform: scaleX(0); transition: transform 1s linear; }

/* Controls, only while someone is at the screen (the cursor moved in the last few seconds). */
.w-controls { position: absolute; top: calc(var(--g) * .75); left: 50%; transform: translate(-50%, -6px); display: flex; gap: 8px; opacity: 0; transition: opacity .3s, transform .3s; pointer-events: none; z-index: 3; }
.awake .w-controls { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.w-controls .btn { background: rgba(10, 10, 12, .7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

/* The curtain: a wall opened by its address has to be clicked once before it may play. */
.w-curtain { position: absolute; inset: 0; z-index: 4; display: grid; place-items: center; pointer-events: auto; cursor: pointer; background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10, 10, 12, .55), rgba(10, 10, 12, .9)); text-align: center; padding: var(--g); animation: fade-in .8s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.w-curtain .inner { display: grid; justify-items: center; gap: 14px; max-width: 46rem; }
.w-curtain img { width: clamp(44px, 5cqw, 84px); height: auto; opacity: .95; }
.w-curtain .eyebrow { letter-spacing: .32em; }
.w-curtain h2 { font: 500 clamp(24px, 3.4cqw, 60px)/1.1 var(--sans); letter-spacing: -.015em; color: var(--ink); text-wrap: balance; }
.w-curtain .go { margin-top: 10px; display: inline-flex; align-items: center; gap: 12px; font: 400 clamp(11px, .8cqw, 14px)/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--warm); border: 1px solid var(--warm); padding: 14px 22px; background: rgba(10, 10, 12, .4); }
.w-curtain .go svg { width: 12px; height: 12px; fill: currentColor; }
.w-curtain:hover .go { background: var(--warm); color: var(--on-warm); }
.w-curtain .silent { font: 400 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); background: none; border: 0; padding: 6px; }
.w-curtain .silent:hover { color: var(--ink); }

/* Smaller boxes: the landing's screen, a laptop, a phone held up. */
@container wall (max-width: 1100px) {
  .w-stream { width: clamp(240px, 32cqw, 360px); }
  .w-story { width: calc(100cqw - var(--g) * 3 - clamp(240px, 32cqw, 360px)); }
  .w-foot .ro.f-chord, .w-foot .ro.f-bar { display: none; }
}
@container wall (max-width: 760px) {
  .w-stream, .w-legend, .w-kpis .kpi.more { display: none; }
  .w-story { width: calc(100cqw - var(--g) * 2); }
  .w-foot .readouts { flex-wrap: wrap; }
  .w-title { max-width: 60cqw; }
  .w-date { display: none; }
  .w-foot .ro.more { display: none; }
  /* The readouts wrap to two lines here: the foot keeps room for both. */
  .w-layer { --foot-h: calc(var(--foot-b) + var(--roll-h) + 104px); }
  /* On a phone the controls sit over the middle of the picture, clear of the name and the words. */
  .w-controls { top: 40%; }
}
@container wall (max-height: 520px) {
  .w-why { display: none; }
  .w-caption .c { -webkit-line-clamp: 2; }
}

/* ── a jam's wall: the room put away, the stage over the whole screen ───────── */
body.walled { overflow: hidden; }
body.walled .bar, body.walled .under, body.walled .app-foot, body.walled .instrument > .roll, body.walled .transport, body.walled .hud { display: none !important; }
body.walled .stage-wrap { position: fixed; inset: 0; height: 100vh; height: 100dvh; z-index: 1000; cursor: none; }
/* On a wall the network draws above the foot's roll and readouts, not under them. */
body.walled #stage, .screen #stage { height: 87%; bottom: auto; }
body.walled .stage-wrap.awake { cursor: default; }
body.walled .wall-hud .w-layer { animation: hud-drift 1800s ease-in-out infinite alternate; }
@keyframes hud-drift { 0% { transform: translate(0, 0); } 25% { transform: translate(3px, -2px); } 50% { transform: translate(-2px, 3px); } 75% { transform: translate(-3px, -1px); } 100% { transform: translate(2px, 2px); } }

@media (prefers-reduced-motion: reduce) {
  .srow.fresh, .w-caption.rise, .w-sub.rise, body.walled .wall-hud .w-layer { animation: none; }
}