/* ===== Onboarding shell ===== */
.onboard-wrap { width: 100%; max-width: 620px; }

.onboard-brand {
  color: #fff; text-align: center; margin-bottom: 28px;
}
.onboard-brand .dot-mark { color: var(--primary); }
.onboard-brand p { color: #94a3b8; font-size: 13px; margin-top: 6px; }

/* Three ticket-stub progress markers */
.stub-progress { display: flex; justify-content: center; gap: 10px; margin-bottom: 24px; }
.stub-progress .stub {
  width: 34px; height: 22px; border: 1.5px solid #475569; border-radius: 4px;
  position: relative; opacity: 0.5; transition: all 0.25s var(--ease);
}
.stub-progress .stub.done { opacity: 1; border-color: var(--primary); background: rgba(14,165,233,0.15); }
.stub-progress .stub.current { opacity: 1; border-color: #fff; }
.stub-progress .stub::after {
  content: ''; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 0;
  border-left: 1.5px dashed #475569; transform: translateX(-50%);
}
.stub-progress .stub.done::after { border-left-color: var(--primary); }

/* ===== The boarding pass card ===== */
.boarding-pass {
  background: #fff;
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: grid;
  grid-template-columns: 1fr 108px;
  position: relative;
  overflow: hidden;
  animation: slideUpFade 0.35s var(--ease);
}

.bp-main { padding: 28px 26px; }
.bp-eyebrow { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.bp-code { font-family: var(--font-mono); font-size: 11px; color: var(--text-faint); letter-spacing: 0.04em; }

.bp-question { font-size: 18px; font-weight: 700; color: var(--ink); line-height: 1.4; margin-bottom: 18px; letter-spacing: -0.01em; }
.bp-question .hint { display: block; font-size: 12px; font-weight: 500; color: var(--text-muted); margin-top: 4px; text-transform: none; letter-spacing: 0; }

.bp-options { display: flex; flex-direction: column; gap: 8px; }
.bp-option {
  text-align: left; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card-sunken); font-size: 13px; font-weight: 600; color: var(--text); cursor: pointer;
  transition: border-color 0.15s, background 0.15s; display: flex; align-items: center; justify-content: space-between;
}
.bp-option:hover:not(:disabled) { border-color: var(--primary); background: #fff; }
.bp-option:disabled { cursor: default; }
.bp-option.correct { border-color: var(--success); background: rgba(16,185,129,0.08); color: #047857; }
.bp-option.incorrect { border-color: var(--danger); background: rgba(220,38,38,0.06); color: #b91c1c; }
.bp-option .check-icon { font-size: 12px; font-weight: 800; }

/* multi-select variant for "Lesson 1" */
.bp-option.multi.selected { border-color: var(--primary); background: rgba(14,165,233,0.08); }

/* Perforated divider between main stub and small stub */
.bp-divider {
  position: relative;
  border-left: 2px dashed var(--border-strong);
}
.bp-divider::before, .bp-divider::after {
  content: ''; position: absolute; left: -8px; width: 16px; height: 16px;
  background: var(--ink); border-radius: 50%;
}
.bp-divider::before { top: -8px; }
.bp-divider::after { bottom: -8px; }

.bp-stub {
  display: flex; flex-direction: column; align-items: center; justify-content: space-between;
  padding: 20px 10px; background: var(--card-sunken);
}
.bp-stub .stub-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); writing-mode: vertical-rl; }
.bp-barcode { display: flex; gap: 2px; align-items: flex-end; height: 34px; }
.bp-barcode span { width: 2px; background: var(--ink); opacity: 0.55; }

/* Validation stamp — the signature moment */
.bp-stamp {
  position: absolute; top: 50%; left: 38%; transform: translate(-50%, -50%) rotate(-9deg);
  font-family: var(--font-mono); font-weight: 800; font-size: 26px; letter-spacing: 0.05em;
  padding: 8px 18px; border: 3px solid currentColor; border-radius: 8px;
  pointer-events: none; animation: stampIn 0.5s var(--ease);
  background: rgba(255,255,255,0.75);
}
.bp-stamp.pass { color: var(--success); }
.bp-stamp.fail { color: var(--danger); }

.bp-footer { margin-top: 20px; display: flex; justify-content: flex-end; }

.onboard-skip {
  display: block; margin: 18px auto 0; text-align: center; color: #64748b;
  font-size: 12px; background: none; border: none; cursor: pointer; text-decoration: underline;
}
.onboard-skip:hover { color: #94a3b8; }

@media (max-width: 560px) {
  .boarding-pass { grid-template-columns: 1fr; }
  .bp-divider { border-left: none; border-top: 2px dashed var(--border-strong); }
  .bp-divider::before, .bp-divider::after { top: -8px; left: 24px; }
  .bp-divider::after { left: auto; right: 24px; bottom: auto; }
  .bp-stub { flex-direction: row; }
  .bp-stub .stub-label { writing-mode: horizontal-tb; }
}