/* Onboarding V5 — additive styles layered on top of styles.css.
   Targets the signed-out state of the live driving page. */

/* ─── YouTube button (used in topbar + control panel + chat) ─── */
.yt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: #fff;
  color: #0a0908;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.15s, transform 0.06s;
}
.yt-btn:hover { filter: brightness(0.95); }
.yt-btn:active { transform: scale(0.97); }
.yt-btn .yt-mark {
  position: relative;
  display: inline-block;
  width: 18px; height: 13px;
  background: #ff0033;
  border-radius: 3px;
}
.yt-btn .yt-mark::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 4px 0 4px 6px;
  border-color: transparent transparent transparent #fff;
}
.yt-btn-sm { padding: 7px 12px; font-size: 12px; }
.yt-btn-sm .yt-mark { width: 16px; height: 11px; }
.yt-btn-block {
  width: 100%;
  padding: 11px 14px;
  font-size: 13px;
}

/* ─── Control panel — signed-out variant ─── */
.cp-signedout .cp-head { justify-content: flex-start; }
.cp-pitch { display: flex; flex-direction: column; gap: 6px; padding: 0 2px; }
.cp-pitch-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--fg);
}
.cp-pitch-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
}
.cp-divider {
  height: 1px;
  background: var(--border);
  margin: 2px 0;
}
.cp-body-locked .dpad-btn {
  opacity: 0.55;
  cursor: not-allowed;
  background: rgba(255,255,255,0.025);
  color: var(--dim);
}
.cp-body-locked .dpad-btn:hover { background: rgba(255,255,255,0.025); }
.cp-body-locked .key-hints { opacity: 0.55; }

/* ─── Chat — locked compose row ─── */
.chat-compose-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-top: 1px solid var(--border);
  background: rgba(0,0,0,0.18);
  color: var(--dim);
  font-family: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
}
.chat-compose-locked:hover { background: rgba(0,0,0,0.28); color: var(--fg-2); }
.chat-compose-locked > span { flex: 1; }
.chat-compose-locked .chat-compose-arrow {
  /* points down-left toward the control panel sign-in button */
  transform: rotate(-135deg);
  color: var(--accent);
}