/* RealRacer voice casting studio — dedicated /voices experience. */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.voice-studio-page {
  width: min(1280px, calc(100vw - 240px));
  max-width: 1280px;
  padding-bottom: 108px;
}

/* The page title now rides the shared .rr-page-header (Bebas Neue 52px,
   typography.css) exactly like /laps + /sessions + /settings — so the top of
   the page matches the rest of the logged-in app instead of a bespoke
   Inter-Tight hero. Only the live voice-library status pill stays local,
   sitting at the end of the header row. */
.voice-hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 11px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  background: rgba(7, 7, 11, 0.62);
  color: var(--muted);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.voice-live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 4px rgba(0, 200, 100, 0.1);
}

.voices-upsell {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid rgba(255, 128, 0, 0.42);
  border-radius: var(--radius-lg);
  background: var(--orange-soft);
}

.voices-upsell[hidden] { display: none; }

.voices-upsell-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: var(--orange);
  color: #08080c;
  font: 800 12px/1 var(--display);
}

.team-cast {
  padding: 22px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.section-kicker,
.voice-browser-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
}

.section-kicker { margin-bottom: 16px; }

.section-kicker > div,
.browser-title-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.section-index {
  color: var(--orange);
  font: 500 10px/1 var(--mono);
  letter-spacing: 0.12em;
}

.section-kicker h2,
.voice-browser h2 {
  margin: 0;
  color: var(--text);
  font: 700 22px/1.1 var(--display);
  letter-spacing: -0.02em;
}

.section-kicker > p,
.voice-browser-head > div > p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.team-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.team-rail-loading {
  grid-column: 1 / -1;
  min-height: 124px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--border-2);
  border-radius: 10px;
  color: var(--muted);
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.team-seat {
  --role-color: var(--orange);
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  min-height: 112px;
  padding: 13px;
  overflow: hidden;
  text-align: left;
  color: var(--text);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}

.team-seat::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  background: var(--role-color);
  opacity: .35;
  transition: opacity .18s ease, height .18s ease;
}

.team-seat:hover {
  border-color: color-mix(in srgb, var(--role-color) 48%, var(--border-2));
  transform: translateY(-1px);
}

.team-seat.is-active {
  border-color: color-mix(in srgb, var(--role-color) 72%, var(--border-2));
  background: color-mix(in srgb, var(--role-color) 8%, var(--surface-2));
}

.team-seat.is-active::after { height: 3px; opacity: 1; }
.role-broadcaster { --role-color: var(--orange); }
.role-engineer { --role-color: var(--cyan); }
.role-spotter { --role-color: var(--amber); }
.role-coach { --role-color: var(--green); }

.team-seat-copy { min-width: 0; }

.team-seat-role {
  display: block;
  margin-bottom: 7px;
  color: var(--role-color);
  font: 500 9px/1 var(--mono);
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.team-seat-name {
  display: block;
  overflow: hidden;
  color: var(--text);
  font: 700 16px/1.1 var(--display);
  letter-spacing: -0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.team-seat-character {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Four resolution-independent race instruments, one face per radio role. */
.voice-tachometer {
  width: 66px;
  height: 66px;
  flex: 0 0 auto;
  display: block;
  overflow: visible;
  color: var(--tacho-color);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .34));
  pointer-events: none;
}

.voice-tachometer.is-large { width: 104px; height: 104px; }

.tacho-case {
  fill: #090a0f;
  stroke: #343844;
  stroke-width: 3.5;
}

.tacho-bezel {
  fill: #171922;
  stroke: rgba(232, 237, 242, .14);
  stroke-width: 1.2;
}

.tacho-face {
  fill: #0d0f15;
  stroke: color-mix(in srgb, var(--tacho-color) 38%, #343844);
  stroke-width: 1;
}

.tacho-tick {
  stroke: rgba(232, 237, 242, .34);
  stroke-width: 1;
}

.tacho-tick.is-major {
  stroke: rgba(232, 237, 242, .88);
  stroke-width: 1.7;
}

.tacho-numeral {
  fill: #e8edf2;
  font: 700 5px/1 var(--mono);
  text-anchor: middle;
  dominant-baseline: central;
}

.tacho-unit,
.tacho-multiplier {
  fill: rgba(232, 237, 242, .62);
  font-family: var(--mono);
  text-anchor: middle;
}

.tacho-unit { font-size: 5px; letter-spacing: .08em; }
.tacho-multiplier { font-size: 3.5px; }

.tacho-redline {
  fill: none;
  stroke: #ff4d55;
  stroke-width: 4.5;
  stroke-linecap: round;
  filter: drop-shadow(0 0 2px rgba(255, 77, 85, .5));
}

.tacho-needle {
  color: var(--tacho-color);
  transform-origin: 50px 50px;
  animation: tacho-settle 520ms cubic-bezier(.2, .8, .2, 1) both;
}

.tacho-needle-shadow { fill: rgba(0, 0, 0, .78); }
.tacho-needle-body { fill: currentColor; filter: drop-shadow(0 0 4px currentColor); }
.tacho-hub-outer { fill: #242732; stroke: #050608; stroke-width: 1.5; }
.tacho-hub { fill: #090a0f; stroke: var(--tacho-color); stroke-width: 1.5; }

.tacho-glass {
  fill: none;
  stroke: rgba(255, 255, 255, .14);
  stroke-width: 1.5;
  stroke-linecap: round;
}

.tacho-detail { fill: none; stroke: var(--tacho-color); opacity: .34; }
.tacho-detail-ring { stroke-width: .7; }
.tacho-detail-ring.is-inner { stroke-dasharray: 1 2.2; opacity: .2; }
.tacho-detail-sector { stroke-width: 1.2; }
.tacho-detail-chevrons { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.tacho-detail-coach { stroke-width: 1.2; }
.tacho-detail-gear { stroke-width: 1.4; stroke-linecap: round; }
.tacho-detail-dot { fill: var(--tacho-color); opacity: .42; }

.variant-broadcast .tacho-case {
  stroke: color-mix(in srgb, var(--tacho-color) 48%, #343844);
  stroke-width: 4.2;
}

.variant-strategy .tacho-bezel { stroke-dasharray: 1.4 1.8; }
.variant-strategy .tacho-face { stroke-width: 1.4; }
.variant-traffic .tacho-tick.is-major { stroke: var(--tacho-color); stroke-width: 2.1; }
.variant-coach .tacho-glass {
  stroke: color-mix(in srgb, var(--tacho-color) 30%, transparent);
  stroke-width: 1;
}

@keyframes tacho-settle {
  from { transform: rotate(-130deg); }
  to { transform: rotate(var(--needle-angle)); }
}

.casting-studio {
  display: grid;
  grid-template-columns: minmax(300px, 0.82fr) minmax(0, 1.7fr);
  gap: 18px;
  align-items: start;
}

.casting-studio[hidden] { display: none; }

.audition-console {
  --role-color: var(--orange);
  position: sticky;
  top: 18px;
  min-width: 0;
  padding: 22px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--role-color) 35%, var(--border-2));
  border-radius: var(--radius-lg);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--role-color) 8%, transparent), transparent 54%),
    var(--surface);
}

.audition-console::after {
  content: '';
  position: absolute;
  width: 190px;
  height: 190px;
  top: -110px;
  right: -90px;
  border: 1px solid color-mix(in srgb, var(--role-color) 18%, transparent);
  border-radius: 50%;
  box-shadow: 0 0 0 28px color-mix(in srgb, var(--role-color) 3%, transparent), 0 0 0 54px color-mix(in srgb, var(--role-color) 2%, transparent);
  pointer-events: none;
}

.console-topline,
.browser-title-row,
.console-talent,
.console-play,
.save-team-summary {
  display: flex;
  align-items: center;
}

.console-topline {
  position: relative;
  z-index: 1;
  justify-content: space-between;
  gap: 14px;
}

.on-air-badge,
.console-role,
.console-label,
.browser-count,
.audition-status {
  font-family: var(--mono);
  text-transform: uppercase;
}

.on-air-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--role-color);
  font-size: 9px;
  letter-spacing: .11em;
}

.on-air-badge i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--role-color) 12%, transparent);
}

.console-role {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .09em;
}

.console-talent {
  position: relative;
  z-index: 1;
  align-items: center;
  gap: 16px;
  min-height: 118px;
  margin-top: 18px;
}

.console-label {
  margin-bottom: 5px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .1em;
}

.console-talent h2 {
  margin: 0;
  color: var(--text);
  font: 700 28px/1 var(--display);
  letter-spacing: -.02em;
}

.console-talent p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.radio-wave {
  display: flex;
  align-items: center;
  gap: 4px;
  height: 44px;
  margin: 8px 0 14px;
  padding: 0 4px;
  border-block: 1px solid var(--border);
}

.radio-wave span {
  width: 3px;
  height: 5px;
  flex: 1;
  max-width: 8px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--role-color) 55%, var(--faint));
  opacity: .45;
  transform-origin: center;
}

.radio-wave span:nth-child(3n+1) { height: 13px; }
.radio-wave span:nth-child(4n+2) { height: 22px; }
.radio-wave span:nth-child(5n) { height: 31px; }

.audition-console.is-playing .radio-wave span {
  opacity: 1;
  animation: voice-wave .72s ease-in-out infinite alternate;
}

.audition-console.is-playing .radio-wave span:nth-child(2n) { animation-delay: -.24s; }
.audition-console.is-playing .radio-wave span:nth-child(3n) { animation-delay: -.48s; }

@keyframes voice-wave {
  from { transform: scaleY(.25); }
  to { transform: scaleY(1); }
}

.audition-console blockquote {
  min-height: 76px;
  margin: 0;
  color: var(--text);
  font: 600 18px/1.38 var(--display);
  letter-spacing: -.02em;
}

.audition-line-picker {
  display: flex;
  gap: 7px;
  margin: 14px 0 18px;
}

.line-choice {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--muted);
  font: 500 10px/1 var(--mono);
}

.line-choice:hover,
.line-choice.is-active {
  border-color: var(--role-color);
  color: var(--role-color);
}

.line-choice.is-active { background: color-mix(in srgb, var(--role-color) 10%, var(--surface-2)); }

.console-play {
  width: 100%;
  min-height: 58px;
  gap: 12px;
  padding: 10px 14px;
  text-align: left;
  border: 1px solid var(--role-color);
  border-radius: 10px;
  background: var(--role-color);
  color: #07070b;
}

.console-play:disabled { opacity: .58; cursor: wait; }

.console-play-icon {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  padding-left: 2px;
  border-radius: 50%;
  background: rgba(7,7,11,.13);
  font-size: 12px;
}

.console-play-copy { display: flex; flex-direction: column; gap: 2px; }
.console-play-copy strong { font-size: 13px; }
.console-play-copy small { font: 500 9px/1.2 var(--mono); letter-spacing: .07em; text-transform: uppercase; opacity: .7; }

.audition-status {
  min-height: 13px;
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 9px;
  line-height: 1.4;
  letter-spacing: .06em;
}

.audition-status.is-error { color: var(--rose); }

.voice-browser {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.voice-browser-head {
  align-items: center;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.browser-title-row { margin: 5px 0 5px; }

.browser-count {
  padding: 4px 7px;
  border: 1px solid var(--border-2);
  border-radius: 999px;
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .06em;
}

.voice-search {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(270px, 42%);
  min-height: 44px;
  padding: 0 12px;
  border: 1px solid var(--border-2);
  border-radius: 9px;
  background: var(--surface-2);
  color: var(--muted);
}

.voice-search:focus-within {
  border-color: var(--orange);
  color: var(--orange);
}

.voice-search input {
  width: 100%;
  min-width: 0;
  padding: 0;
  outline: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 500 12px/1 var(--body);
}

.voice-search input::placeholder { color: var(--muted); }

.voice-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.voice-card {
  --role-color: var(--orange);
  position: relative;
  display: grid;
  grid-template-columns: 66px minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  min-height: 142px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface-2);
  transition: border-color .16s ease, background .16s ease;
}

.voice-card:hover { border-color: var(--border-2); }

.voice-card.is-selected {
  border-color: color-mix(in srgb, var(--role-color) 65%, var(--border-2));
  background: color-mix(in srgb, var(--role-color) 6%, var(--surface-2));
}

.voice-card-copy { min-width: 0; }

.voice-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.voice-card h3 {
  margin: 0;
  color: var(--text);
  font: 700 15px/1.1 var(--display);
  letter-spacing: -.025em;
}

.voice-card-badge {
  flex: 0 0 auto;
  padding: 3px 5px;
  border: 1px solid color-mix(in srgb, var(--role-color) 38%, var(--border));
  border-radius: 5px;
  color: var(--role-color);
  font: 500 8px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.voice-card-meta {
  margin: 5px 0 0;
  color: var(--muted);
  font: 500 9px/1 var(--mono);
  letter-spacing: .06em;
  text-transform: uppercase;
}

.voice-card-character {
  min-height: 31px;
  margin: 7px 0 9px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.35;
}

.voice-card-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.voice-select,
.voice-quick-play {
  min-height: 44px;
  padding: 6px 9px;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 600;
}

.voice-select {
  border: 1px solid var(--role-color);
  background: transparent;
  color: var(--role-color);
}

.voice-select:hover,
.voice-card.is-selected .voice-select {
  background: var(--role-color);
  color: #07070b;
}

.voice-card.is-selected .voice-select { cursor: default; }

.voice-quick-play {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--border-2);
  background: transparent;
  color: var(--muted);
}

.voice-quick-play:hover,
.voice-quick-play.is-playing { border-color: var(--muted); color: var(--text); }

.voice-empty {
  min-height: 230px;
  display: grid;
  place-content: center;
  gap: 10px;
  text-align: center;
  color: var(--muted);
}

.voice-empty[hidden] { display: none; }

.voice-empty button {
  min-height: 44px;
  padding: 8px;
  border: 0;
  background: none;
  color: var(--orange);
  font-size: 12px;
}

.voices-error {
  min-height: 230px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 24px;
  text-align: center;
  border: 1px solid rgba(255, 91, 91, .35);
  border-radius: var(--radius-lg);
  background: rgba(255, 91, 91, .05);
  color: var(--muted);
}

.voices-error[hidden] { display: none; }
.voices-error strong { color: var(--text); font: 700 20px/1.1 var(--display); }

.voices-save-dock {
  position: sticky;
  z-index: 20;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 70px;
  padding: 11px 12px 11px 16px;
  margin-top: 18px;
  border: 1px solid var(--border-2);
  border-radius: 12px;
  background: rgba(13, 13, 20, .93);
  box-shadow: 0 16px 45px rgba(0,0,0,.42);
  backdrop-filter: blur(16px);
}

.voices-save-dock[hidden] { display: none; }
.save-team-summary { gap: 12px; min-width: 0; }
.save-team-summary > div:last-child { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.save-team-summary strong { color: var(--text); font: 700 13px/1.1 var(--display); }
.save-team-summary span { color: var(--muted); font: 500 9px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.save-team-summary span.is-error { color: var(--rose); }

.save-avatars { display: flex; align-items: center; padding-left: 8px; }

.save-avatar {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-left: -8px;
  border: 2px solid var(--surface);
  border-radius: 50%;
  background: color-mix(in srgb, var(--save-color) 18%, var(--surface-2));
  color: var(--save-color);
  font: 700 8px/1 var(--mono);
}

.voices-save-button { min-width: 150px; }

.voices-save-button:disabled {
  opacity: 1;
  cursor: not-allowed;
  border-color: var(--border-2);
  background: var(--surface-2);
  color: var(--faint);
}

.team-seat:focus-visible,
.line-choice:focus-visible,
.console-play:focus-visible,
.voice-select:focus-visible,
.voice-quick-play:focus-visible,
.voice-empty button:focus-visible,
.voices-save-button:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 3px;
}

@media (max-width: 1060px) {
  .team-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .casting-studio { grid-template-columns: minmax(280px, .78fr) minmax(0, 1.3fr); }
  .voice-list { grid-template-columns: 1fr; }
}

@media (max-width: 980px) {
  .voice-studio-page { width: 100%; }
}

@media (max-width: 760px) {
  .voice-studio-page { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important; }
  /* Page title responsive sizing comes from .rr-page-header (typography.css). */
  .voice-hero-meta { align-self: flex-start; }
  .casting-studio { grid-template-columns: 1fr; }
  .audition-console { position: relative; top: 0; }
  .voice-browser-head { align-items: stretch; flex-direction: column; }
  .voice-search { width: 100%; min-width: 0; }
  .voice-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 580px) {
  .team-cast, .audition-console, .voice-browser { padding: 16px; }
  .section-kicker { align-items: flex-start; flex-direction: column; gap: 5px; }
  .team-rail { grid-template-columns: 1fr 1fr; gap: 7px; }
  .team-seat { grid-template-columns: 48px minmax(0, 1fr); gap: 9px; min-height: 88px; padding: 10px; }
  .team-seat .voice-tachometer { width: 48px; height: 48px; }
  .team-seat-character { display: none; }
  .team-seat-name { font-size: 14px; }
  .voice-list { grid-template-columns: 1fr; }
  .voice-card { min-height: 132px; }
  .voice-select, .voice-quick-play { min-height: 44px; }
  .audition-console blockquote { min-height: 62px; font-size: 17px; }
  .voices-save-dock { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); gap: 10px; padding-left: 12px; }
  .save-avatars { display: none; }
  .voices-save-button { min-width: 132px; }
}

@media (prefers-reduced-motion: reduce) {
  .team-seat, .voice-card { transition: none; }
  .audition-console.is-playing .radio-wave span { animation: none; }
  .tacho-needle { animation: none; transform: rotate(var(--needle-angle)); }
}