/* TRUNK CALL's page: the shared skin and stage are ../module.css (site/public/module.css); this is only what's TRUNK
   CALL's own: the line's 12 HP scale, the phone beside the panel with its cord into the socket, the plug, the voice
   button and the readout. Nothing on the panel lights, so the page is all gold. */

/* 12 HP at the line's scale */
.stage { --panel-ratio: 60.66 / 128.5; --panel-max: 335px; --panel-max-narrow: 311px; overflow-x: clip; }
.stage:focus { outline: none; }

/* the bench: the panel, and the phone beside it on the desk, its line cord into the socket. The panel's column is
   wider than the line's (the 12 HP panel stops at its 335 px, so the room goes to the phone) */
@media (min-width: 901px) { .stage-inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); } }
.bench { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: clamp(1rem, 4cqw, 2.4rem); }
.bench .panel2d { margin: 0; flex: none; }
.phone { flex: 0 1 320px; min-width: 170px; max-width: 320px; aspect-ratio: 240 / 196; position: relative; z-index: 2; }
.phone-svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0.08em 0.2em 0.25em rgba(0, 0, 0, 0.6)); }
.phone-handset { cursor: pointer; touch-action: none; transition: transform 0.25s ease; }
.phone.lifted .phone-handset { cursor: grab; }
.phone-dial { cursor: grab; touch-action: none; }
.phone.dialling .phone-dial, .phone.dialling { cursor: grabbing; }
.phone-handset:focus-visible, .phone-dial:focus-visible { outline: none; }
.phone-handset:focus-visible .phone-handle, .phone-dial:focus-visible > circle:first-child { stroke: var(--gold); stroke-width: 1.6; }
.phone-handset:hover .phone-handle { stroke: var(--gold-hi); }
.cord { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; overflow: visible; }
.stage-panel .stage-hint { width: auto; max-width: 640px; }
@container (max-width: 520px) {
  .bench { flex-wrap: wrap; }
  .phone { flex-basis: 100%; max-width: 280px; margin-top: 128px; }    /* under the panel: room for the lifted handset */
}
@media (prefers-reduced-motion: reduce) { .phone-handset { transition: none; } }

/* the 605 plug over the socket's window: a click pulls it out */
.p2-plug { position: absolute; z-index: 2; cursor: pointer; }
.p2-plug svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0.06em 0.12em 0.12em rgba(0, 0, 0, 0.7)); }
.p2-plug.out svg { opacity: 0; }
.p2-plug:hover svg { filter: drop-shadow(0 0 0.35em rgba(212, 175, 55, 0.75)); }
.p2-plug:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* the visitor's voice */
.voice-row { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.voice-row button {
  font: 600 0.82rem/1 "Poppins", system-ui, sans-serif; color: var(--ink);
  background: rgba(12, 11, 9, 0.82); border: 1px solid var(--s-line); border-radius: 0; padding: 0.55rem 0.9rem; cursor: pointer;
}
.voice-row button:hover { border-color: var(--accent); color: var(--accent-hi); }
.voice-row button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.voice-note { flex: 1 1 12rem; font-size: 0.74rem; color: var(--dim); }

/* beside the panel: the line over four seconds, the last thing that happened, the loop and the number */
#scope { display: block; width: 100%; height: 220px; }
.status { min-height: 2.8em; }
.readout { min-height: 1.4em; font: 400 0.74rem/1.4 "Space Mono", ui-monospace, monospace; color: var(--ink); }
#patch-note { min-height: 5.2em; }