/* ============================================================================
   Onboarding — asked once.
   A single question column that answers and branches, with a progress spine
   down the side. Loaded by onboarding.html only. Tokens from css/deep.css.
   ========================================================================== */

.onb{ position:relative; padding-left:36px; }
.onb-spine{ position:absolute; left:11px; top:10px; bottom:10px; width:2px; border-radius:2px; background: rgba(var(--accent-rgb), .14); }
.onb-spine-fill{ position:absolute; inset:0; border-radius:2px; background: linear-gradient(var(--accent), var(--grad-end)); }
.onb-spine-fill::after{
  content:""; position:absolute; left:50%; bottom:0; width:8px; height:8px; margin:0 0 -4px -4px; border-radius:50%;
  background: var(--accent); box-shadow: 0 0 12px 2px rgba(var(--accent-rgb), .6);
}

.onb-q{ list-style:none; margin:0; padding:0; display:grid; gap:18px; }
.onb-item{ position:relative; }
.onb-item::before{
  content:""; position:absolute; left:-30px; top:5px; width:10px; height:10px; border-radius:50%;
  background: var(--abyss); border:2px solid var(--accent);
}
.onb-ask{ margin:0; font: 600 15px/1.35 var(--font-display); color:#eaf4fa; letter-spacing:-.01em; }
.onb-ans{
  margin:7px 0 0; padding:0 0 0 12px; border-left:2px solid rgba(var(--accent-rgb), .4);
  font-size:14.5px; line-height:1.4; color: var(--accent);
}
.onb-ans::before{ content:"\2192\00a0"; color: rgba(var(--accent-rgb), .6); }

/* the fork: two possible next questions, one taken, one not asked */
.onb-branch{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.onb-opt{
  padding:10px 12px; border-radius:10px; min-width:0;
  border:1px solid rgba(var(--accent-rgb), .13); background: rgba(255,255,255,.025);
}
.onb-opt.is-taken{ border-color: rgba(var(--accent-rgb), .42); background: rgba(var(--accent-rgb), .06); }
.onb-opt .onb-ask{ font-size:13.5px; }
.onb-opt .onb-ans{ font-size:13px; }
.onb-skip{ margin:7px 0 0; font: 600 10px/1.4 var(--mono); letter-spacing:.1em; text-transform:uppercase; color: rgba(191,238,255,.55); }

/* the fan: every module starts from the same answers */
.onb-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.onb-chips span{
  font: 600 10.5px/1 var(--font-body); letter-spacing:.04em; padding:6px 9px; border-radius:100px;
  border:1px solid rgba(var(--accent-rgb), .3); color: var(--accent-pale); background: rgba(var(--accent-rgb), .07);
}
.onb-chips span.is-dev{ border-style:dashed; color: rgba(191,238,255,.6); background:transparent; }

.onb-read{
  display:flex; flex-wrap:wrap; gap:6px 18px; justify-content:space-between; margin-top:16px;
  font:600 10.5px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color: rgba(191,238,255,.62);
}
.onb-read b{ color: var(--accent); font-weight:700; }

@media (max-width:900px){
  .onb{ padding-left:30px; }
  .onb-spine{ left:8px; }
  .onb-item::before{ left:-27px; width:9px; height:9px; }
  .onb-q{ gap:12px; }
  .onb-ask{ font-size:13.5px; }
  .onb-ans{ font-size:13px; margin-top:5px; }
  .onb-opt{ padding:8px 9px; }
  .onb-opt .onb-ask{ font-size:12px; }
  .onb-opt .onb-ans{ font-size:11.5px; }
  .onb-skip{ font-size:9px; }
  .onb-chips span{ font-size:9.5px; padding:5px 7px; }
}