/* ══════════════════════════════════════════════════════════════════════════
   SELLiora — GUIDED SETUP STYLES (R1)
   Tokens only, .ob-* prefixed. Mirrors the stepped form-builder layout:
   numbered rail on the left, one panel at a time on the right.
   ══════════════════════════════════════════════════════════════════════════ */

#ob-modal {
  position: fixed; inset: 0; z-index: 9000;
  background: rgba(15, 23, 42, .55);
  display: grid; place-items: center; padding: 20px;
  backdrop-filter: blur(2px);
}

.ob-card {
  display: grid; grid-template-columns: 262px minmax(0, 1fr);
  width: min(860px, 100%); max-height: 90vh;
  background: var(--s); border: 1px solid var(--bd);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
}

/* ── stepped rail ───────────────────────────────────────────────────────── */
.ob-side { background: var(--s2); border-right: 1px solid var(--bd); padding: 22px 18px; overflow-y: auto; }
.ob-brand { font-size: 17px; font-weight: 700; letter-spacing: -.01em; }
.ob-blurb { font-size: 12.5px; color: var(--t2); margin: 6px 0 18px; line-height: 1.5; }

.ob-step { display: flex; gap: 11px; align-items: flex-start; padding: 9px 10px;
           border-radius: 10px; margin-bottom: 2px; }
.ob-step.on { background: var(--pl); }
.ob-step b { display: block; font-size: 13px; font-weight: 600; color: var(--t); }
.ob-step span { display: block; font-size: 11.5px; color: var(--t3); margin-top: 1px; line-height: 1.4; }
.ob-step.on b { color: var(--p); }

.ob-n { flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%;
        display: grid; place-items: center; font-size: 11px; font-weight: 700;
        background: var(--bd); color: var(--t3); margin-top: 1px; }
.ob-step.on .ob-n   { background: var(--p); color: var(--text-on-primary); }
.ob-step.done .ob-n { background: var(--g); color: #fff; }

.ob-prog { margin-top: 18px; font-size: 11px; color: var(--t3); }
.ob-pbar { height: 4px; border-radius: 2px; background: var(--bd); margin-top: 6px; overflow: hidden; }
.ob-pbar i { display: block; height: 100%; background: var(--p); border-radius: 2px; transition: width .25s ease; }

/* ── panel ──────────────────────────────────────────────────────────────── */
.ob-main { padding: 22px 24px 18px; overflow-y: auto; display: flex; flex-direction: column; }
.ob-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ob-head h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; }
.ob-x { background: none; border: 0; font-size: 22px; line-height: 1; color: var(--t3); cursor: pointer; padding: 0 4px; }
.ob-x:hover { color: var(--t); }

/* The "why" line is the reason this wizard exists — give it real weight
   rather than burying it as caption text under the field. */
.ob-why {
  font-size: 13px; color: var(--t2); line-height: 1.6;
  margin: 9px 0 18px; padding-left: 12px;
  border-left: 3px solid var(--acc);
}

.ob-help { font-size: 12.5px; color: var(--t2); margin-bottom: 11px; }

.ob-f { margin-bottom: 15px; }
.ob-f label { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 5px; }
.ob-f input {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--inp-bd); border-radius: 9px;
  background: var(--inp); color: var(--t);
}
.ob-f input:focus { outline: none; border-color: var(--p); box-shadow: 0 0 0 3px var(--ring); }
.ob-fh { font-size: 11.5px; color: var(--t3); margin-top: 5px; line-height: 1.45; }

.ob-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.ob-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 12px; border: 1px solid var(--bd2); border-radius: 20px;
  font-size: 12.5px; font-weight: 500; cursor: pointer; background: var(--s);
}
.ob-chip:hover { border-color: var(--pm); }
.ob-chip:has(input:checked) { background: var(--pl); border-color: var(--p); color: var(--p); }
.ob-chip input { accent-color: var(--p); margin: 0; }
.ob-tag { font-size: 10.5px; color: var(--t3); font-weight: 500; }

/* Answers the follow-up question before it gets asked. */
.ob-note {
  font-size: 12.5px; color: var(--t2); line-height: 1.55;
  background: var(--s2); border: 1px solid var(--bd);
  border-radius: 9px; padding: 10px 12px; margin-bottom: 10px;
}
.ob-note b { color: var(--t); font-weight: 600; }

.ob-copy { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.ob-copy code {
  flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14px; font-weight: 600; letter-spacing: .04em;
  background: var(--s2); border: 1px dashed var(--bd2);
  border-radius: 8px; padding: 9px 12px;
}

.ob-err { color: var(--r); font-size: 12.5px; min-height: 18px; margin: 2px 0 6px; }

.ob-foot { display: flex; gap: 8px; align-items: center; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--bd); }
.ob-btn {
  padding: 8px 16px; border: 1px solid var(--bd2); border-radius: 9px;
  background: var(--s); color: var(--t); font: inherit; font-size: 13px;
  font-weight: 500; cursor: pointer;
}
.ob-btn:hover { border-color: var(--pm); color: var(--p); }
.ob-btn.pri { background: var(--p); border-color: var(--p); color: var(--text-on-primary); margin-left: auto; }
.ob-btn.pri:hover { background: var(--pd); color: var(--text-on-primary); }
.ob-btn.pri:disabled { opacity: .6; cursor: default; }
.ob-btn.ghost { border-color: transparent; color: var(--t3); }
.ob-btn.ghost:hover { color: var(--t2); }
.ob-btn.sm { padding: 6px 12px; font-size: 12px; }
.ob-btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }

@media (max-width: 720px) {
  .ob-card { grid-template-columns: 1fr; max-height: 94vh; }
  /* Keep the progress bar on mobile, drop the step list — it costs half
     the screen and the header already says where you are. */
  .ob-side { padding: 16px; }
  #ob-rail .ob-step { display: none; }
  #ob-rail .ob-step.on { display: flex; }
  .ob-blurb { display: none; }
  .ob-main { padding: 16px 16px 14px; }
}
@media (prefers-reduced-motion: reduce) { .ob-pbar i { transition: none; } }