/* In-page navigation: tabs, the pill sub navigation, tab panels and the wizard step rail. */

.tabs {
  display: flex; gap: 2px; margin-bottom: 20px; padding: 0 10px; overflow-x: auto; overflow-y: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-l); box-shadow: var(--sh-card);
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tabs a, .tabs .tab {
  padding: 14px 14px 12px;
  border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer;
  color: var(--ink-3); font-size: var(--fs-s); font-weight: 500; white-space: nowrap;
  transition: color .15s ease, border-color .15s ease;
}
.tabs a:hover, .tabs .tab:hover { color: var(--ink); }
.tabs a.on, .tabs .tab.on { color: var(--brand-text); border-bottom-color: var(--brand); font-weight: 600; }

.subnav {
  display: inline-flex; gap: 2px; max-width: 100%; padding: 3px; overflow-x: auto;
  border-radius: var(--r-m); background: var(--panel-3); scrollbar-width: none;
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: var(--r-s);
  color: var(--ink-3); font-size: var(--fs-s); font-weight: 500; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.subnav a:hover { color: var(--ink); }
.subnav a.on { background: var(--panel); color: var(--ink); font-weight: 600; box-shadow: var(--sh-xs); }

/* Tab panels: only the chosen one shows. */
.rpanel, .spanel, .mpanel { display: none; }
.rpanel.on, .spanel.on, .mpanel.on { display: block; }

/* ---------- Wizard step rail ---------- */
.srail { display: flex; align-items: center; padding: 0 4px 6px; margin-top: -10px; }
.srail .s {
  display: flex; align-items: center; gap: 9px; flex: none;
  padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
}
.srail .s.locked { cursor: default; pointer-events: none; }
.srail .dot {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--line-strong); background: var(--panel); color: var(--ink-4);
  font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.srail .lbl { font-size: var(--fs-s); font-weight: 500; color: var(--ink-4); white-space: nowrap; transition: color .15s ease; }
.srail .bar { flex: 1; min-width: 18px; height: 2px; margin: 0 14px; border-radius: 2px; background: var(--line); overflow: hidden; }
.srail .bar > i { display: block; width: 0; height: 100%; background: var(--brand); transition: width .3s ease; }
.srail .bar.fill > i { width: 100%; }
.srail .s.done .dot { background: var(--brand-soft); border-color: transparent; color: var(--brand-text); }
.srail .s.done .lbl { color: var(--ink-2); }
.srail .s.now .dot { background: var(--brand); border-color: var(--brand); color: var(--on-brand); box-shadow: var(--focus-ring); }
.srail .s.now .lbl { color: var(--ink); font-weight: 600; }
.srail .s:hover:not(.locked) .dot { border-color: var(--brand); }
.srail .s:hover:not(.locked) .lbl { color: var(--ink); }

@media (max-width: 800px) {
  .srail .lbl { display: none; }
  .srail .s.now .lbl { display: block; }
  .srail .bar { margin: 0 8px; }
}