/* Styles for the onboarding wizard (get-started.html) and admin panel (admin.html).
   Reuses tokens/buttons/nav from styles.css. */

/* Ensure [hidden] wins over .btn's display:inline-flex etc. */
[hidden]{display:none !important}

.page{max-width:640px;margin:0 auto;padding:40px 0 80px}
.page-wide{max-width:820px}

/* Step progress */
.steps{display:flex;gap:8px;margin-bottom:28px}
.steps .dot{flex:1;height:5px;border-radius:3px;background:rgba(15,23,42,0.12)}
.steps .dot.on{background:var(--ink)}
.step-label{font-size:12.5px;color:var(--text-50);margin-bottom:6px}
.step-title{font-weight:800;font-size:26px;color:var(--ink);margin-bottom:24px;letter-spacing:-0.01em}

/* Fields */
.field{margin-bottom:16px}
.field label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:6px}
.field .hint{font-size:12.5px;color:var(--text-50);margin-top:6px;line-height:1.5}
.input,.textarea{width:100%;padding:12px 14px;border-radius:8px;border:1px solid rgba(15,23,42,0.16);font-size:14.5px;background:#fff;font-family:inherit}
.textarea{resize:vertical;line-height:1.5}
.input:focus,.textarea:focus{outline:none;border-color:var(--ink)}
.input.err,.textarea.err{border-color:#B3261E}
.err-msg{color:#B3261E;font-size:12px;margin-top:5px}

/* Option chips (venue type) */
.opts{display:flex;gap:10px;flex-wrap:wrap}
.opt{padding:9px 16px;border-radius:999px;font-size:13.5px;font-weight:700;border:1.5px solid rgba(15,23,42,0.16);background:#fff;color:var(--ink)}
.opt[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}

.wizard-nav{display:flex;justify-content:space-between;margin-top:32px}

.callout{padding:14px 16px;border-radius:9px;background:var(--muted);font-size:13.5px;color:var(--ink);line-height:1.5}

/* Hold / success screen */
.done{text-align:center;padding:24px 0}
.done .badge{width:64px;height:64px;border-radius:50%;background:var(--success-wash);color:var(--success);display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 20px}
.done h1{font-weight:800;font-size:28px;color:var(--ink);letter-spacing:-0.01em;margin-bottom:12px}
.done p{color:var(--text-60);font-size:15px;line-height:1.6;max-width:440px;margin:0 auto 10px}
.done .next{text-align:left;max-width:420px;margin:22px auto 0;padding:18px 20px;border-radius:12px;background:#fff;border:1px solid var(--line-soft)}
.done .next li{font-size:13.5px;color:var(--text-60);margin:6px 0}

/* Inline error banner */
.banner{padding:12px 14px;border-radius:9px;font-size:13.5px;margin-bottom:16px}
.banner-err{background:#FEE2E2;color:#B3261E}

/* Admin */
.admin-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.admin-head h1{font-size:22px;font-weight:800;color:var(--ink)}
.admin-sub{font-size:13px;color:var(--text-50)}
.gate{max-width:420px;margin:60px auto;background:#fff;border:1px solid var(--line-soft);border-radius:16px;padding:28px}
.gate h1{font-size:20px;font-weight:800;color:var(--ink);margin-bottom:6px}
.gate p{font-size:13.5px;color:var(--text-60);margin-bottom:18px;line-height:1.5}
.int-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.int{background:#fff;border:1px solid var(--line-soft);border-radius:14px;padding:16px}
.int-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:6px}
.int-name{font-size:14.5px;font-weight:700;color:var(--ink)}
.int-desc{font-size:12px;color:var(--text-50);margin-top:1px}
.pill{font-size:11px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap}
.pill-ok{background:var(--success-wash);color:var(--success)}
.pill-off{background:rgba(15,23,42,0.06);color:var(--text-50)}
.pill-err{background:#FEE2E2;color:#B3261E}
.int-detail{font-size:11.5px;color:var(--text-50);font-family:ui-monospace,Menlo,monospace;margin:8px 0 12px}
.note-secrets{margin-top:20px;padding:14px 16px;border-radius:12px;background:var(--muted);font-size:12.5px;line-height:1.55;color:var(--ink)}

@media (max-width:640px){
  .int-grid{grid-template-columns:1fr}
  .step-title,.done h1,.gate h1{font-size:22px}
}