/* Header navigation, Audience floor and the First Night panel. Body copy 16px,
   labels 14px, metadata 12px minimum. */

/* ── header: wordmark, Play, then a navigation row that wraps or scrolls ── */
.app-header { height: auto; min-height: 72px; flex-wrap: wrap; justify-content: flex-start; gap: 10px 14px; padding: 12px 32px; }
.app-header .wordmark { margin-right: auto; }
.app-header .sound-start { order: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px; border: 1px solid #edd4a7; border-radius: 30px; background: #edd4a7; color: #26211b; font: 700 14px/1 'DM Sans', sans-serif; }
.app-header .sound-start:hover { background: #f6dfb8; }
.app[data-board=teeter] .app-header .sound-start { background: #774330; border-color: #774330; color: #fff4de; }
.header-actions { order: 1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.header-actions > button, .header-actions > a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #ddd4c42e; border-radius: 30px; background: #14171c66; color: inherit; font: 500 14px/1 'DM Sans', sans-serif; white-space: nowrap; text-decoration: none; backdrop-filter: blur(14px); transition: background .2s, border-color .2s; }
.header-actions > :is(button, a):hover { background: #ddd4c420; }
.header-actions > :is([aria-pressed=true], [aria-expanded=true]) { border-color: #ead3a9aa; background: #ead3a92a; }
.app[data-board=teeter] .header-actions > a { background: #fff2d577; border-color: #654c3b33; }
.app[data-board=teeter] .header-actions > :is([aria-pressed=true], [aria-expanded=true]) { background: #77433022; border-color: #774330; }
@media (max-width: 1240px) {
  .header-actions { order: 3; flex-basis: 100%; }
}
@media (max-width: 640px) {
  /* All seven actions stay visible: they wrap onto two rows instead of scrolling offscreen. */
  .app-header { padding: 10px 14px; }
  .header-actions { justify-content: center; gap: 6px; }
  .header-actions > button, .header-actions > a { flex: 1 1 auto; justify-content: center; font-size: 14px; padding: 0 8px; }
  .header-actions [data-action=world] { font-size: 14px; width: auto; height: auto; padding: 0 8px; }
  .header-actions [data-action=world]::before { content: none; }
}

/* ── current setup: one band of fixed size; every choice lives in the equipment gallery ── */
.setup-band { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; width: min(1180px, calc(100% - 52px)); height: 60px; margin: 0 auto; border-bottom: 1px solid color-mix(in srgb, currentColor 16%, transparent); }
.setup-silhouette { flex: none; width: 48px; height: 36px; color: #dbc493; }
.setup-silhouette svg { display: block; width: 100%; height: 100%; }
.setup-current { display: flex; flex: 1; flex-direction: column; gap: 2px; min-width: 0; margin: 0; }
.setup-current small { font: 500 12px/1.2 'IBM Plex Mono', monospace; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.setup-current strong { overflow: hidden; font: 600 15px/1.3 'DM Sans', sans-serif; white-space: nowrap; text-overflow: ellipsis; }
.setup-change { flex: none; min-height: 44px; padding: 0 18px; border: 1px solid #e2c18b77; border-radius: 30px; background: #e2c18b14; color: inherit; font: 600 14px 'DM Sans', sans-serif; cursor: pointer; transition: background .2s, border-color .2s; }
.setup-change:hover, .setup-change[aria-expanded=true] { border-color: #e7c98d; background: #e2c18b26; }
.setup-change:focus-visible { outline: 2px solid #f3d7a1; outline-offset: 3px; }
.app[data-board=teeter] .setup-silhouette { color: #654f32; }
.app[data-board=teeter] .setup-change { border-color: #654c3b66; background: #fff2d577; }
.app[data-board=teeter] .setup-change:hover, .app[data-board=teeter] .setup-change[aria-expanded=true] { border-color: #774330; background: #77433022; }
.app[data-board=teeter] .setup-change:focus-visible { outline-color: #7c4730; }
.instrument-title small { font-size: 12px; letter-spacing: .14em; }
.instrument-title p { max-width: 560px; margin-inline: auto; font-size: 16px; line-height: 1.5; color: #e8e0d1d0; }
.equipment-card-copy small { font-size: 12px; }
.equipment-card-copy > span { font-size: 14px; }
@media (max-width: 790px) {
  .instrument-areas { flex-wrap: wrap; gap: 6px; }
  .instrument-areas button { min-height: 44px; padding: 0 14px; font-size: 12px; }
}
@media (max-width: 640px) {
  .setup-band { width: calc(100% - 24px); gap: 10px; }
  .setup-silhouette { width: 36px; height: 28px; }
  .setup-change { padding: 0 14px; }
  .instrument-title small { font-size: 12px; }
  .instrument-title p { font-size: 16px; max-width: 340px; }
  .mobile-pan-hint { font-size: 12px; letter-spacing: .04em; }
  .equipment-card-copy > span { font-size: 14px; }
}

/* ── Audience ── */
.audience-floor { position: relative; z-index: 2; width: min(1180px, 100%); margin: 16px 0 26px; padding: 20px 22px 22px; border: 1px solid #e8d3ac33; border-radius: 14px; background: #0f1216ee; color: #efe6d6; font: 16px/1.5 'DM Sans', sans-serif; --stage-scale: 1; }
.aud-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.aud-kicker { margin: 0; font: 600 12px/1.2 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #e2c18b; }
.aud-head h2 { margin: 4px 0 0; font: 500 30px/1.15 'Fraunces', serif; }
.aud-head h2:focus { outline: none; }
.aud-back { flex: none; min-height: 44px; padding: 0 16px; border: 1px solid #e2c18b88; border-radius: 30px; background: #e2c18b18; font: 500 15px 'DM Sans', sans-serif; }
/* Production backdrop (art/audience-room.webp, empty floor) behind live sprite figures.
   Booth-eye camera: the stage is never wider than the 2:1 backdrop, so the image always
   fits by height (never stretched) and its horizon stays 20% down the stage. Each figure is
   sized from where its feet meet the floor; people right at the booth are clipped below. */
.audience-floor { container-type: inline-size; }
.aud-stage { --hz: .2; position: relative; container: aud-stage / size; width: 100%; height: max(50cqw, min(56.25cqw, 76svh)); min-height: 300px; margin: 16px 0 12px; border-radius: 10px; overflow: hidden; background: url(art/audience-room.webp) 50% 0 / auto 100% no-repeat, linear-gradient(#08090f, #141019 55%, #1c1410); }
.aud-lights { position: absolute; inset: 0; background: radial-gradient(40% 70% at 22% 0, rgb(255 170 80 / calc(.04 + var(--aud-energy, 0) * .24)), transparent 70%), radial-gradient(40% 70% at 78% 0, rgb(80 200 210 / calc(.03 + var(--aud-energy, 0) * .22)), transparent 70%), linear-gradient(#0000 55%, #0a0d1044); }
/* Two fixed pools of light laid flat on the floor plane; only their strength follows energy. */
.aud-floorlight { position: absolute; left: -25%; right: -25%; top: 34%; height: 80%; transform: perspective(420px) rotateX(58deg); transform-origin: 50% 0; mix-blend-mode: screen; pointer-events: none;
  background: radial-gradient(22% 30% at 36% 46%, rgb(255 178 96 / calc(var(--aud-energy, 0) * .26)), transparent 70%), radial-gradient(20% 26% at 64% 58%, rgb(92 200 210 / calc(var(--aud-energy, 0) * .2)), transparent 70%); }
.aud-crowd { position: absolute; inset: 0; }
.aud-fig { --tile: calc((var(--fy) - var(--hz)) * var(--s) / .9 * 100cqh); position: absolute; left: calc(var(--x) * 100%); top: calc(var(--fy) * 100cqh - var(--tile) * .96); width: var(--tile); height: var(--tile); margin-left: calc(var(--tile) / -2); transform-origin: 50% 96%; will-change: translate, rotate; }
/* Narrow stages show the middle of the room: people at the booth step out to the edges. */
@container aud-stage (aspect-ratio < 1.25) { .aud-fig { left: calc(var(--xn) * 100%); } }
.aud-fig::before { content: ""; position: absolute; left: 22%; right: 22%; top: 93%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / .55), transparent); }
.aud-fig::after { content: ""; position: absolute; inset: 0; background: url(/art/audience-dancers.png) no-repeat; background-size: 400% 200%; background-position: calc(var(--col) * 100% / 3) calc(var(--row) * 100%); scale: var(--flip) 1; filter: brightness(var(--lum)) saturate(var(--sat)); }
.aud-fig[data-fore]::after { filter: brightness(var(--lum)) saturate(var(--sat)) contrast(1.06); }
/* Shade along the booth edge, then the edge of the booth itself. */
.aud-near { position: absolute; inset: 0; z-index: 180; pointer-events: none; background: linear-gradient(#0000 64%, rgb(10 7 5 / .5)), linear-gradient(90deg, rgb(8 6 5 / .35), #0000 14% 86%, rgb(8 6 5 / .35)); }
.aud-near::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: max(10px, 3.2%); background: linear-gradient(#3a2618, #150d08); border-top: 1px solid #e2c18b40; box-shadow: 0 -10px 24px rgb(0 0 0 / .45); }
.audience-floor:not([data-art=ready]) .aud-crowd { display: none; }
.aud-missing { display: none; position: absolute; z-index: 200; left: 10%; right: 10%; top: 40%; margin: 0; text-align: center; font: 500 16px/1.5 'DM Sans', sans-serif; color: #e8dcc4; }
.audience-floor[data-art=missing] .aud-missing { display: block; }
.aud-level { position: absolute; z-index: 200; right: 12px; top: 14px; bottom: 14px; width: 10px; border-radius: 5px; background: #ffffff14; overflow: hidden; }
.aud-level i { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--aud-energy, 0) * 100%); background: linear-gradient(#f3c26b, #5cc7c9); }
.aud-caption { min-height: 24px; margin: 0 0 16px; font: 500 16px/1.5 'DM Sans', sans-serif; color: #f3e6cc; }
.aud-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.aud-briefs { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; }
.aud-briefs legend { margin-bottom: 8px; padding: 0; font: 600 14px 'DM Sans', sans-serif; color: #e2c18b; }
.aud-brief { display: flex; gap: 10px; padding: 12px; border: 1px solid #e8d3ac30; border-radius: 8px; cursor: pointer; }
.aud-brief input { margin-top: 5px; accent-color: #e2c18b; }
.aud-brief b { display: block; font: 600 16px/1.3 'DM Sans', sans-serif; }
.aud-brief span span { display: block; margin-top: 2px; font-size: 16px; line-height: 1.45; color: #cfc4b0; }
.aud-brief:has(input:checked) { border-color: #e2c18b; background: #e2c18b14; }
.aud-brief:has(input:focus-visible) { outline: 2px solid #f8d69a; outline-offset: 2px; }
.aud-readout { display: grid; gap: 8px; align-content: start; margin: 0; }
.aud-readout div { padding: 10px 12px; border-radius: 8px; background: #ffffff08; }
.aud-readout dt { font: 600 12px/1.2 'IBM Plex Mono', monospace; letter-spacing: .1em; text-transform: uppercase; color: #e2c18b; }
.aud-readout dd { margin: 4px 0 0; font: 500 15px/1.4 'DM Sans', sans-serif; }
.aud-note { margin: 14px 0 0; font-size: 16px; line-height: 1.5; color: #bfb6a6; }
.app[data-mode=audience] .world-caption { display: none; }
@media (max-width: 760px) {
  .audience-floor { padding: 16px 14px; border-radius: 10px; }
  .aud-head h2 { font-size: 24px; }
  .aud-stage { height: max(50cqw, min(118cqw, 66svh)); min-height: 320px; }
  .aud-panel { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .setup-change { transition: none; }
  .aud-fig { translate: none !important; rotate: none !important; }
  .aud-fig::after { filter: brightness(calc(var(--lum) * (.6 + var(--aud-energy, 0) * .4))) saturate(var(--sat)); }
}

/* ── First Night ── */
.first-night { position: fixed; z-index: 34; right: 16px; top: 88px; width: min(430px, calc(100% - 32px)); max-height: calc(100dvh - 104px); overflow: auto; overscroll-behavior: contain; padding: 16px 20px 14px; border: 1px solid #e7c58e66; border-radius: 12px; background: #172024f7; color: #eee3cf; box-shadow: 0 18px 60px #000a; backdrop-filter: blur(18px); font: 16px/1.5 'DM Sans', sans-serif; }
.first-night button { font: inherit; color: inherit; cursor: pointer; }
.first-night button:disabled { opacity: .45; cursor: not-allowed; }
.first-night :focus-visible { outline: 2px solid #f5d9a4; outline-offset: 3px; }
.fn-head { display: flex; align-items: flex-start; gap: 6px; }
.fn-head > div { flex: 1; }
.fn-kicker { margin: 0; font: 600 12px/1.2 'IBM Plex Mono', monospace; letter-spacing: .14em; color: #e2c18b; }
.fn-head h2 { margin: 4px 0 0; font: 500 26px/1.15 'Fraunces', serif; }
.fn-head h2:focus { outline: none; }
.fn-close { width: 44px; height: 44px; border: 0; background: none; font-size: 26px !important; line-height: 1; }
.fn-head > div { min-width: 0; }
.fn-head .fn-close { flex: none; }
.fn-close.fn-min-btn { width: auto; min-width: 44px; max-width: 9.5em; height: auto; min-height: 44px; padding: 4px 10px; border: 1px solid currentColor; border-radius: 6px; font-size: 14px !important; line-height: 1.15; white-space: normal; }
.first-night h3 { margin: 14px 0 8px; font: 500 21px/1.25 'Fraunces', serif; }
.first-night h3:focus { outline: none; }
.first-night h4 { margin: 0 0 6px; font: 600 16px/1.3 'DM Sans', sans-serif; }
.fn-lede { margin: 12px 0; }
.fn-quote { margin: 12px 0; padding: 12px 14px; border-left: 3px solid #e2c18b; background: #e2c18b10; font: italic 17px/1.5 'Fraunces', serif; }
.fn-quote cite { display: block; margin-top: 6px; font: normal 14px 'DM Sans', sans-serif; color: #cbbd9f; }
.fn-steps { margin: 12px 0; padding-left: 22px; font-size: 16px; }
.fn-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0; }
.fn-actions button, .fn-linkbutton { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid #e2c18b66; border-radius: 8px; background: #e2c18b12; font-size: 15px; text-decoration: none; color: inherit; }
.first-night .fn-primary { border-color: #e7c98d; background: #e7c98d; color: #1f2629; font-weight: 600; }
.fn-small { margin: 8px 0; font-size: 16px; line-height: 1.5; color: #c9bea8; }
.fn-chosen { display: grid; gap: 6px; margin: 10px 0; padding: 0; list-style: none; }
.fn-chosen li { display: flex; align-items: center; gap: 10px; padding: 8px; border: 1px solid #ffffff14; border-radius: 8px; }
.fn-art { flex: none; width: 44px; height: 44px; border-radius: 3px; background-size: cover; background-position: center; }
.fn-chosen b, .fn-crate b { display: block; font-size: 15px; font-weight: 600; }
.fn-chosen small, .fn-crate small { display: block; font-size: 13px; color: #c2b8a4; }
.fn-order { display: flex; gap: 4px; margin-left: auto; }
.fn-order button { width: 40px; height: 40px; border: 1px solid #ffffff22; border-radius: 6px; background: #ffffff08; }
.fn-crate summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-size: 15px; }
.fn-crate ul { display: grid; gap: 2px; max-height: 320px; margin: 0; padding: 0; overflow: auto; list-style: none; }
.fn-crate li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 4px; border-bottom: 1px solid #ffffff10; }
.fn-crate li button { flex: none; min-height: 40px; padding: 0 12px; border: 1px solid #e2c18b55; border-radius: 6px; background: #e2c18b10; font-size: 14px; }
.fn-rig { margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: #ffffff08; font-size: 16px; }
.fn-warn { color: #ffd59a; }
.fn-warn button, [data-live-action] button { margin-top: 6px; min-height: 40px; padding: 0 12px; border: 1px solid #ffd59a88; border-radius: 6px; background: #ffd59a14; font-size: 14px; }
.fn-plan { margin: 8px 0; padding: 0; list-style: none; font-size: 16px; }
.fn-plan b { display: inline-block; width: 64px; color: #e2c18b; }
.fn-progress { display: flex; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.fn-progress li { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #ffffff33; border-radius: 50%; font: 600 13px 'IBM Plex Mono', monospace; }
.fn-progress .current { border-color: #e7c98d; color: #e7c98d; }
.fn-progress .done { border-color: #e7c98d; background: #e7c98d; color: #1f2629; }
.fn-route { margin: 4px 0 8px; font-size: 16px; }
.fn-route b { color: #e2c18b; }
.fn-checks { display: grid; gap: 10px; margin: 10px 0; padding: 0; list-style: none; }
.fn-checks li { display: grid; grid-template-columns: 22px 1fr; gap: 4px 8px; align-items: start; }
.fn-checks li > :nth-child(n + 3) { grid-column: 2; }
.fn-tick { position: relative; width: 18px; height: 18px; margin-top: 3px; border: 2px solid #ffffff44; border-radius: 50%; }
.fn-checks li.on .fn-tick { border-color: #8fd19e; background: #8fd19e; }
.fn-checks li.on .fn-tick::after { content: ""; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #16231a; border-width: 0 2px 2px 0; rotate: 45deg; }
.fn-checks b { font-size: 15px; font-weight: 600; }
.fn-checks small { display: block; font-size: 16px; line-height: 1.4; color: #cbbfa8; }
.fn-hints { display: flex; flex-wrap: wrap; gap: 6px; }
.fn-hints button { min-height: 36px; padding: 0 10px; border: 1px solid #ffffff2a; border-radius: 6px; background: #ffffff0a; font-size: 14px; }
.fn-techniques { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 12px 0 8px; padding: 10px 12px; border: 1px solid #ffffff1a; border-radius: 8px; }
.fn-techniques legend { padding: 0 4px; font-size: 14px; font-weight: 600; color: #e2c18b; }
.fn-techniques label { display: flex; align-items: center; gap: 6px; min-height: 40px; font-size: 15px; cursor: pointer; }
.fn-techniques input { accent-color: #e7c98d; }
.fn-hint { margin: 6px 0; font-size: 16px; }
.fn-status { margin: 12px 0 0; padding: 10px 12px; border-radius: 8px; background: #e7c98d14; font-size: 16px; }
.fn-status:empty { display: none; }
.fn-lines { margin: 8px 0; padding-left: 20px; font-size: 16px; }
.fn-lines li { margin: 4px 0; }
.fn-recap { margin: 12px 0; padding: 12px; border: 1px solid #ffffff14; border-radius: 8px; }
.fn-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid #ffffff14; font-size: 14px; }
.fn-coach { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
.fn-coach input { accent-color: #e7c98d; }
.fn-link { min-height: 44px; border: 0; background: none; text-decoration: underline; font-size: 14px !important; }
.fn-confirm { color: #ffb38a; }
.first-night.fn-min .fn-body > :not(.fn-progress, .fn-status), .first-night.fn-min .fn-foot { display: none; }
@media (min-width: 1360px) { body:has(.first-night:not([hidden])) .app { margin-right: 450px; } }
@media (max-width: 640px) {
  .first-night { left: 8px; right: 8px; top: auto; bottom: 8px; width: auto; max-height: 62dvh; padding: 12px 14px; }
  .fn-head h2 { font-size: 22px; }
  .fn-close.fn-min-btn { max-width: 7.5em; font-size: 13px !important; }
}

/* ── companion links and the recording lock ── */
.notes-links .notes-tab-note { display: block; flex-basis: 100%; font-size: 13px; color: #c9bea8; }
.equipment-card[aria-disabled=true] { opacity: .5; cursor: not-allowed; }
.equipment-help b { color: #ffd59a; }