/* =====================================================================================================
   A7 (ADR-066): the press conference (PressConferenceScreen.ts) -- the room in 3D, the camera on the
   manager; over it the light, sharp system: white plates, ink type, Barlow Condensed for names and
   labels, Barlow for what is said. Blue only for the tile chosen; the tone is a word, never a colour.
   Sized in the finale's unit --u. No letterbox: the overlay needs the frame's foot.
   ===================================================================================================== */
.finale.is-press::before, .finale.is-press::after { display: none; }
.finale.is-press { cursor: default; }
.pc { position: absolute; inset: 0; pointer-events: none; font-family: var(--font-ui, Barlow, Arial, sans-serif); color: var(--ink-900); }
.pc > * { pointer-events: auto; }
.pc .keycap { margin-left: calc(var(--u) * .6); }

/* the top: the title on a plate, the progress, the way out */
.pc-top { position: absolute; left: calc(var(--u) * 2.2); right: calc(var(--u) * 2.2); top: calc(var(--u) * 1.8); display: flex; align-items: flex-start; gap: calc(var(--u) * 1.2); pointer-events: none; }
.pc-top > * { pointer-events: auto; }
.pc-title { display: flex; flex-direction: column; background: var(--surface); backdrop-filter: blur(18px); box-shadow: var(--shadow-1); padding: calc(var(--u) * .55) calc(var(--u) * 1.1); border-left: 4px solid var(--ink-900); animation: pc-rise 340ms var(--ease-out) both; }
.pc-title b { font: 700 max(13px, calc(var(--u) * 1.2)) var(--font-display); letter-spacing: .08em; text-transform: uppercase; }
.pc-title span { font: 500 max(12px, calc(var(--u) * .9)) var(--font-ui); color: var(--ink-500); }
.pc-progress { display: flex; flex-direction: column; gap: 6px; background: var(--surface); backdrop-filter: blur(18px); box-shadow: var(--shadow-1); padding: calc(var(--u) * .55) calc(var(--u) * 1.1); min-width: calc(var(--u) * 11); animation: pc-rise 340ms 60ms var(--ease-out) both; }
.pc-count { font: 700 max(12px, calc(var(--u) * .95)) var(--font-display); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-700); }
.pc-segs { display: flex; gap: 4px; }
.pc-segs i { flex: 1; height: 4px; background: var(--surface-ink); transition: background var(--t-base) var(--ease-std); }
.pc-segs i.is-done { background: var(--ink-900); }
.pc-segs i.is-on { background: var(--ink-500); }
.pc-skip { margin-left: auto; min-height: 44px; display: inline-flex; align-items: center; padding: 0 calc(var(--u) * 1.1); background: var(--surface); backdrop-filter: blur(18px); box-shadow: var(--shadow-1); border: 0; border-radius: 0; cursor: pointer;
  font: 700 max(13px, calc(var(--u) * 1.0)) var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-900); transition: background var(--t-micro) var(--ease-std), transform var(--t-micro) var(--ease-std); }
.pc-skip:hover { background: var(--paper); }
.pc-skip:active { transform: translateY(1px); }
.pc-skip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* the question: who asks, small; what they ask, large -- at the frame's foot, left */
.pc-ask { position: absolute; left: calc(var(--u) * 2.2); bottom: calc(var(--u) * 8.2); width: min(62%, calc(var(--u) * 62)); background: var(--surface-strong); box-shadow: var(--shadow-2); padding: calc(var(--u) * 1.0) calc(var(--u) * 1.4); }
.pc-ask:empty { display: none; }
.pc-who { display: flex; gap: calc(var(--u) * .7); align-items: baseline; margin: 0 0 calc(var(--u) * .35); }
.pc-who b { font: 700 max(11px, calc(var(--u) * .85)) var(--font-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-700); }
.pc-who span { font: 500 max(11px, calc(var(--u) * .85)) var(--font-ui); color: var(--ink-500); }
.pc-q { margin: 0; font: 500 max(16px, calc(var(--u) * 1.45)) / 1.3 var(--font-ui); color: var(--ink-900); }

/* the answers: tiles along the foot (the system's tile: sharp, translucent, a left rule; chosen = white, blue rule) */
.pc-answers { position: absolute; left: calc(var(--u) * 2.2); right: calc(var(--u) * 2.2); bottom: calc(var(--u) * 1.8); display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: calc(var(--u) * .7); }
.pc-tile { position: relative; display: flex; align-items: flex-start; gap: calc(var(--u) * .7); min-height: max(56px, calc(var(--u) * 4.6)); padding: calc(var(--u) * .8) calc(var(--u) * 1.0); text-align: left; cursor: pointer;
  background: var(--surface); backdrop-filter: blur(18px); border: 0; border-left: 4px solid transparent; border-radius: 0; box-shadow: var(--shadow-1); color: var(--ink-700);
  transition: background var(--t-micro) var(--ease-std), transform var(--t-micro) var(--ease-std), border-color var(--t-fast) var(--ease-std), opacity var(--t-base) var(--ease-std);
  animation: pc-rise 340ms calc(var(--i, 0) * 60ms + 120ms) var(--ease-out) both; }
.pc-tile .keycap { margin: 2px 0 0; flex: none; }
.pc-tile:hover { background: var(--paper); transform: translateY(-2px); color: var(--ink-900); }
.pc-tile:active { transform: translateY(1px); }
.pc-tile.is-on { background: var(--paper); border-left-color: var(--accent); color: var(--ink-900); box-shadow: var(--shadow-2); }
.pc-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.pc-tile-body { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.pc-tile-text { font: 500 max(13px, calc(var(--u) * 1.0)) / 1.32 var(--font-ui); }
.pc-promise { font: 600 max(11px, calc(var(--u) * .78)) var(--font-ui); color: var(--ink-500); }
.pc-tone { flex: none; font: 700 max(10px, calc(var(--u) * .72)) var(--font-display); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-700); background: var(--surface-ink); padding: 3px 7px; }
/* while someone speaks the question and the tiles step back (the containers fade; their own entrance animations would
   otherwise hold them at full opacity) */
.pc[data-phase="saying"] .pc-ask, .pc[data-phase="saying"] .pc-answers, .pc[data-phase="outro"] .pc-ask, .pc[data-phase="outro"] .pc-answers {
  animation: pc-out 260ms var(--ease-std) forwards; pointer-events: none; }
@keyframes pc-out { to { opacity: 0; transform: translateY(8px); visibility: hidden; } }

/* someone at the table speaks: the strap and the line, bottom centre */
.pc-say { position: absolute; left: 50%; bottom: calc(var(--u) * 3.2); transform: translateX(-50%); width: min(76%, calc(var(--u) * 72)); }
.pc-say:empty { display: none; }
.pc-strap { display: inline-flex; margin: 0; box-shadow: var(--shadow-1); }
.pc-strap b { background: var(--ink-900); color: #fff; padding: calc(var(--u) * .4) calc(var(--u) * .9); font: 700 max(12px, calc(var(--u) * 1.0)) var(--font-display); letter-spacing: .1em; text-transform: uppercase; }
.pc-strap span { background: var(--paper); padding: calc(var(--u) * .4) calc(var(--u) * .9); font: 600 max(12px, calc(var(--u) * .95)) var(--font-display); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-500); }
.pc-line { margin: 0; background: var(--surface-strong); box-shadow: var(--shadow-2); padding: calc(var(--u) * .9) calc(var(--u) * 1.3); font: 500 max(16px, calc(var(--u) * 1.4)) / 1.32 var(--font-ui); }
.pc-react { margin: 0; background: var(--surface); backdrop-filter: blur(18px); padding: calc(var(--u) * .5) calc(var(--u) * 1.3); font: 500 max(12px, calc(var(--u) * .9)) var(--font-ui); color: var(--ink-500); }
.pc-hint { display: inline-flex; align-items: center; margin-top: calc(var(--u) * .5); padding: 4px 4px 4px 10px; background: var(--surface); backdrop-filter: blur(18px); font: 600 max(11px, calc(var(--u) * .8)) var(--font-ui); color: var(--ink-700); }

/* the flash's glow from below the frame */
.pc-glow { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none !important; opacity: 0;
  background: radial-gradient(ellipse 70% 100% at 50% 100%, rgba(235, 242, 255, .55), rgba(235, 242, 255, 0) 70%); }
.pc-glow.is-on { animation: pc-flash 360ms ease-out both; }
@keyframes pc-flash { 0% { opacity: calc(var(--flash, 1) * .9); } 100% { opacity: 0; } }
.pc .is-in { animation: pc-rise 340ms var(--ease-out) both; }
@keyframes pc-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.pc .pc-say.is-in { animation-name: pc-rise-c; }
@keyframes pc-rise-c { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* landscape phones: the question on the left, the tiles stacked on the right */
@media (max-height: 520px) {
  .pc-top { top: 8px; left: 12px; right: 12px; gap: 8px; }
  .pc-title { padding: 4px 10px; } .pc-title span { display: none; }
  .pc-progress { min-width: 120px; padding: 4px 10px; }
  .pc-ask { left: 12px; top: 48px; bottom: auto; width: 40%; padding: 8px 12px; }
  .pc-who { margin-bottom: 2px; }
  .pc-q { font-size: 14px; }
  .pc-answers { left: auto; right: 12px; bottom: 12px; top: 64px; width: 54%; grid-template-columns: 1fr; grid-auto-rows: minmax(44px, auto); align-content: end; gap: 6px; }
  .pc-tile { min-height: 44px; padding: 6px 10px; }
  .pc-tile-text { font-size: 12.5px; line-height: 1.25; }
  .pc-say { width: 86%; bottom: 12px; }
  .pc-line { font-size: 14px; padding: 8px 12px; }
}
@media (prefers-reduced-motion: reduce) { .pc *, .pc { animation-duration: 1ms !important; transition-duration: 1ms !important; } }
.pc[data-phase="outro"] .pc-skip { opacity: 0; pointer-events: none; transition: opacity var(--t-base) var(--ease-std); }