/* onboarding.html 専用スタイル
   元コード: web/onboarding.html:19-74（分割時点の HEAD 基準・2026-07-19） */
.step-nav { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }
.step-pill {
  padding: 10px 16px;
  border-radius: 30px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: var(--text-2);
  font-size: 13px;
  font-weight: 600;
  flex: 1;
  min-width: 140px;
  text-align: center;
  /* 2026-07-23 (Round 13-2 B-5): transition: all を明示リスト化 */
  transition: transform .15s, background .15s, border-color .15s, box-shadow .15s, color .15s, opacity .15s;
  cursor: pointer;
  user-select: none;
}
.step-pill:hover { background: rgba(91,140,255,.12); border-color: var(--accent); }
.step-pill.active {
  background: linear-gradient(135deg, var(--accent), var(--gold));
  color: #0b1018;
  border-color: var(--gold);
  box-shadow: 0 4px 12px rgba(91,140,255,.3);
}
.step-pill.done { background: rgba(52,211,153,.08); border-color: var(--ok, #4ade80); color: var(--ok, #4ade80); }
.staff-row {
  display: grid;
  grid-template-columns: 30px 1.5fr 1fr 0.8fr 0.8fr 0.6fr 50px;
  gap: 8px;
  align-items: center;
  padding: 8px;
  background: rgba(255,255,255,.02);
  border-radius: 6px;
  margin-bottom: 6px;
}
.staff-row input, .staff-row select {
  padding: 6px 8px;
  font-size: 13px;
}
.lvl-radio-group {
  display: flex;
  gap: 4px;
  justify-content: center;
}
.lvl-radio-group label {
  cursor: pointer;
  font-size: 11px;
  padding: 4px 6px;
  border-radius: 4px;
  background: rgba(255,255,255,.05);
}
/* 2026-07-23 (Round 14 CSS-Agent R2-HC #35): display:none だとキーボード Tab で focus 不可 (WCAG 2.1.1)。
   position:absolute で flow から外し、opacity:0 で不可視、pointer-events:none で誤クリック回避。
   `+ span` sibling selector は DOM order ベースなので影響なし。label click は正常動作。
   視覚レイアウトは display:none と同等 (flow を占有しない・不可視)。 */
.lvl-radio-group input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.lvl-radio-group input[type="radio"]:checked + span { color: var(--gold); font-weight: bold; }
/* 2026-07-23 (Round 15 CSS-Agent S1-HC #21): position:absolute+opacity:0 radio が
   Tab focus 到達しても視覚的 focus indicator 皆無だった (WCAG 2.4.7 違反)。
   sibling `+ span` に outline を付与して視認可能化。既存の hover/checked スタイルには非干渉。 */
.lvl-radio-group input[type="radio"]:focus-visible + span {
  outline: 2px solid var(--accent, #5b8cff);
  outline-offset: 2px;
}
.lvl-radio-group input[type="radio"]:focus + span {
  outline: 2px solid var(--accent, #5b8cff);
  outline-offset: 2px;
}
.pane { display: none; }
.pane.active { display: block; }