/* Onboarding: ecranul „Cum funcționează”, stările goale care ghidează, sfatul de pe video și mesajele scurte de ajutor. */

/* ---- butoane mari și linkuri ---- */
.btn-big { min-height: 52px; padding: 8px 34px; font-size: 1.2rem; font-weight: 700; border-radius: 8px; }
.btn-link { background: transparent; border-color: transparent; color: var(--primary-hi); text-decoration: underline; text-underline-offset: 3px; }
.btn-link:hover:not([disabled]) { border-color: transparent; color: #93c5fd; }

/* ---- stări goale (zona video) ---- */
.empty-state { display: flex; flex-direction: column; align-items: center; gap: 10px; max-width: 520px; }
.empty-state h2 { font-size: 1.4rem; color: var(--text); }
.empty-state p { margin: 0; }
.empty-state .empty-or { margin: 4px 0 -4px; }

/* ---- sfatul de pe video (video încărcat, nicio instanță) ---- */
.stage-tip {
  position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 3;
  padding: 8px 12px; border-radius: var(--radius);
  background: rgba(8, 12, 16, 0.92); color: #fff; font-weight: 600; font-size: 0.95rem;
  border: 1px solid var(--focus); border-left: 6px solid var(--focus);
  pointer-events: none; /* clicul trece prin el la video */
}

/* ---- mesajul de după prima instanță (peste timeline, se poate închide) ---- */
.coach-hint {
  position: absolute; z-index: 4; left: 10px; bottom: 10px; max-width: min(560px, calc(100% - 20px));
  display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 12px;
  border-radius: var(--radius); background: #0b1218; border: 1px solid var(--line); border-left: 4px solid var(--primary-hi);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.coach-text { flex: 1; }

/* ---- butoanele de cod pe ecranul gol: contur galben, tasta mai vizibilă (fără să schimbe dimensiunile) ---- */
.cw-panel.is-first { border-color: var(--focus); box-shadow: 0 0 0 2px var(--focus); }
.cw-panel.is-first .cw-btn kbd { background: rgba(0, 0, 0, 0.6); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.7); }
@media (prefers-reduced-motion: no-preference) {
  .cw-panel.is-first { animation: ob-pulse 2.2s ease-in-out infinite; }
}
@keyframes ob-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(250, 204, 21, 0.95); }
  50% { box-shadow: 0 0 0 5px rgba(250, 204, 21, 0.3); }
}

/* ---- ecranul „Cum funcționează” ---- */
.ob-welcome { display: flex; flex-direction: column; gap: 12px; }
.ob-lead { margin: 0; font-size: 1rem; }
.ob-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ob-step { display: flex; flex-direction: column; gap: 8px; padding: 10px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; }
.ob-step h3 { display: flex; align-items: center; gap: 8px; font-size: 1.02rem; }
.ob-step p { margin: 0; font-size: 0.9rem; line-height: 1.45; }
.ob-step kbd { background: rgba(0, 0, 0, 0.45); border: 1px solid var(--line); }
.ob-num { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 700; }
.ob-art .ob-svg { display: block; width: 100%; height: 150px; }
.ob-honest { padding: 10px 12px; background: var(--panel-2); border: 1px solid var(--line); border-left: 4px solid var(--warn); border-radius: 8px; }
.ob-honest h3 { margin-bottom: 4px; }
.ob-honest p { margin: 0; }
.ob-honest p + p { margin-top: 4px; }
@media (max-width: 820px) {
  .ob-steps { grid-template-columns: minmax(0, 1fr); }
  .ob-art .ob-svg { height: 120px; }
}

/* ---- schemele SVG (culori din clase: CSP-ul nu permite stiluri inline) ---- */
.ob-bg { fill: #10151a; stroke: var(--line); stroke-width: 1; }
.ob-card { fill: var(--panel-2); stroke: var(--muted); stroke-width: 1.5; }
.ob-screen { fill: #0b1218; stroke: var(--muted); stroke-width: 2; }
.ob-base { fill: var(--panel-2); stroke: var(--muted); stroke-width: 1.5; stroke-linejoin: round; }
.ob-video { fill: #000; stroke: var(--line); stroke-width: 1; }
.ob-play { fill: var(--primary-hi); }
.ob-muted { fill: var(--muted); }
.ob-arrow { fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.ob-arrow-head { fill: var(--muted); }
.ob-pill { fill: var(--primary); }
.ob-on-pill { fill: #fff; font-weight: 600; }
.ob-cloud { fill: #55636f; }
.ob-slash { stroke: #ef4444; stroke-width: 4; stroke-linecap: round; }
.ob-track { fill: none; stroke: var(--line); stroke-width: 1.5; stroke-linecap: round; }
.ob-progress { fill: none; stroke: var(--primary-hi); stroke-width: 2.5; stroke-linecap: round; }
.ob-head { fill: #ef4444; }
.ob-code { fill: var(--c, #475569); }
.ob-code-text { fill: var(--fg, #fff); font-weight: 600; }
.ob-key { fill: none; stroke: var(--fg, #fff); stroke-opacity: 0.7; stroke-width: 1; }
.ob-lane { fill: rgba(255, 255, 255, 0.05); }
.ob-lane-bg { fill: #0b1218; stroke: var(--line); stroke-width: 1; }
.ob-bar { fill: var(--c, #475569); }
.ob-bar-sel { stroke: #fff; stroke-width: 1.5; }
.ob-handle { fill: #fff; }
.ob-cursor { fill: #fff; stroke: #000; stroke-width: 1.2; stroke-linejoin: round; }
.ob-chip { fill: none; stroke: var(--muted); stroke-width: 1.5; }
.ob-chip-solid { fill: var(--primary); stroke: var(--primary-hi); }
.ob-chip-text { fill: var(--text); font-weight: 600; }