/* U3: trade-pick takeover — first-run onboarding screen.
 *
 * Shown over the dashboard when the SPA boot detects:
 *   meta.tenant_trade === null
 *   AND meta.onboarding_complete === false
 *   AND meta.features includes 'onboarding'
 *
 * Z-index sits above modals (5000) but below toasts so transient
 * confirmations remain visible. Display is `none` by default — the
 * boot code in app.js flips it to `flex` only when the conditions
 * above hold against a positive 200 from /api/meta.
 */
#onboardingShell {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 6000;
  background: var(--surface, #fff);
  color: var(--text, #111);
  padding: 2em 1.25em;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow-y: auto;
  font-family: inherit;
}

#onboardingShell.is-open {
  display: flex;
}

#onboardingShell .onboarding-card {
  max-width: 520px;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

#onboardingShell h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  line-height: 1.25;
}

#onboardingShell .onboarding-sub {
  color: var(--muted, #666);
  font-size: 0.95rem;
  margin: 0;
}

#onboardingShell .trade-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.85em;
}

#onboardingShell .trade-btn {
  font-size: 1.1rem;
  font-weight: 600;
  padding: 1.4em 1em;
  border-radius: 14px;
  border: 1px solid var(--border, #ddd);
  background: var(--bg, #f7f7f7);
  color: var(--text, #111);
  cursor: pointer;
  transition: transform 0.1s ease, border-color 0.15s ease, background 0.15s ease;
}

#onboardingShell .trade-btn:hover,
#onboardingShell .trade-btn:focus-visible {
  border-color: var(--primary, #2563eb);
  background: var(--surface, #fff);
}

#onboardingShell .trade-btn:active {
  transform: scale(0.98);
}

#onboardingShell .trade-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

#onboardingShell .onboarding-error {
  color: #b91c1c;
  font-size: 0.9rem;
  min-height: 1.2em;
  margin: 0;
}

#onboardingShell .onboarding-confirm {
  display: flex;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  text-align: center;
}

#onboardingShell .onboarding-confirm .check {
  font-size: 2.4rem;
  line-height: 1;
}

#onboardingShell .onboarding-retry-btn {
  background: none;
  border: 1px solid var(--border, #ddd);
  border-radius: 10px;
  padding: 0.55em 1.1em;
  font-size: 0.85rem;
  color: var(--muted, #555);
  cursor: pointer;
}

#onboardingShell .onboarding-retry-btn:hover {
  border-color: var(--primary, #2563eb);
  color: var(--text, #111);
}

#onboardingShell .onboarding-retry-note {
  color: var(--muted, #666);
  font-size: 0.85rem;
  margin: 0;
}