/* =========================================================================
   SayDoJournal — onboarding flow styles
   Loaded after styles.css (which provides the design tokens + .btn styles).
   ========================================================================= */

.ob {
  min-height: 100dvh;
  background: var(--sage-bg);
  display: flex;
  flex-direction: column;
  transition: background 400ms var(--ease-out);
}
.ob--dark { background: var(--ink-deep); }

/* Top bar */
.ob-top {
  flex: none;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px clamp(20px, 5vw, 32px);
}
.ob-brand { font: 700 18px var(--font-sans); letter-spacing: -0.01em; color: var(--ink); }
.ob--dark .ob-brand { color: var(--sage-bg); }
.ob-skip { background: none; border: none; cursor: pointer; font: 600 14px var(--font-sans); color: var(--text-faint); }
.ob-skip:hover { color: var(--brand-green); }

/* Body */
.ob-body {
  flex: 1;
  display: flex; flex-direction: column; justify-content: center;
  padding: 24px clamp(20px, 5vw, 32px);
  width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
}
.ob-step[hidden] { display: none; }
.ob-step--center { text-align: center; }

.ob-eyebrow { font: 600 13px var(--font-sans); letter-spacing: 2.1px; text-transform: uppercase; color: var(--brand-green); margin-bottom: 14px; }
.ob-h1 { font: 700 clamp(30px, 7vw, 42px)/1.05 var(--font-sans); letter-spacing: -0.025em; color: var(--ink); margin: 0; }
.ob-h1 em { font: italic 400 clamp(32px, 7.4vw, 46px) var(--font-serif-accent); }
.ob--dark .ob-h1 { color: var(--sage-bg); }
.ob-lead { font: 400 17px/25px var(--font-sans); color: var(--text-muted); margin: 18px 0 0; max-width: 440px; }
.ob-step--center .ob-lead { margin: 18px auto 0; }
.ob--dark .ob-lead { color: rgba(247, 249, 242, 0.72); }

/* Round icon badges */
.ob-badge-icon {
  display: inline-flex; width: 52px; height: 52px; border-radius: var(--radius-pill);
  background: var(--green-tint); color: var(--brand-green);
  align-items: center; justify-content: center; margin-bottom: 22px;
}
.ob-done-icon {
  display: inline-flex; width: 88px; height: 88px; border-radius: var(--radius-pill);
  background: rgba(216, 255, 133, 0.14); color: var(--lime);
  align-items: center; justify-content: center; margin-bottom: 26px;
}

/* Welcome feature rows */
.ob-features { display: flex; flex-direction: column; gap: 14px; margin-top: 34px; }
.ob-feature { display: flex; align-items: center; gap: 14px; }
.ob-feat-icon {
  flex: none; width: 44px; height: 44px; border-radius: var(--radius-pill);
  background: var(--green-tint); color: var(--brand-green);
  display: flex; align-items: center; justify-content: center;
}
.ob-feat-t { font: 600 16px var(--font-sans); color: var(--ink); }
.ob-feat-d { font: 400 16px var(--font-sans); color: var(--text-muted); }

/* Goal textarea */
.ob-textarea {
  width: 100%; box-sizing: border-box; margin-top: 26px; resize: vertical;
  font: 600 18px/1.4 var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 16px; outline: none;
}
.ob-textarea:focus { border-color: var(--brand-green); }

/* Intentions */
.ob-intentions { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ob-intention {
  display: flex; align-items: center; gap: 12px;
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 4px 16px;
}
.ob-intention:focus-within { border-color: var(--brand-green); }
.ob-int-num { flex: none; width: 16px; font: 700 15px var(--font-sans); color: var(--text-faint); }
.ob-int-input { flex: 1; border: none; outline: none; background: transparent; font: 500 17px var(--font-sans); color: var(--ink); padding: 14px 0; }
.ob-count { font: 400 14px var(--font-sans); color: var(--text-faint); margin-top: 14px; }

/* Phone field */
.ob-field { margin-top: 26px; }
.ob-label { display: block; font: 600 14px var(--font-sans); color: var(--ink); margin-bottom: 8px; }
.ob-input {
  width: 100%; box-sizing: border-box; font: 500 16px var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 14px 16px; outline: none;
}
.ob-input:focus { border-color: var(--brand-green); }
.ob-helper { font: 400 13px var(--font-sans); color: var(--text-faint); margin: 8px 0 0; }

/* Multi-field form (about you) */
.ob-form { display: flex; flex-direction: column; gap: 18px; margin-top: 26px; }
.ob-form .ob-field { margin-top: 0; }
.ob-select-wrap { position: relative; }
.ob-select {
  -webkit-appearance: none; appearance: none;
  width: 100%; box-sizing: border-box; cursor: pointer;
  font: 500 16px var(--font-sans); color: var(--ink);
  background: var(--surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 14px 42px 14px 16px; outline: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230a211f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 15px center;
}
.ob-select:focus { border-color: var(--brand-green); }
.ob-select:has(option[value=""]:checked) { color: var(--text-faint); }

/* Validation */
.ob-input.is-invalid, .ob-select.is-invalid { border-color: var(--error); }
.ob-input.is-invalid:focus, .ob-select.is-invalid:focus { border-color: var(--error); }
.ob-error { font: 500 13px var(--font-sans); color: var(--error); margin: 8px 0 0; }
.ob-error[hidden] { display: none; }

/* Single-select choice cards (how did you hear / plan) */
.ob-choices { display: flex; flex-direction: column; gap: 12px; margin-top: 26px; }
.ob-choice {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  font-family: var(--font-sans); cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-card); padding: 16px 18px;
  transition: border-color 150ms var(--ease-out), background 150ms var(--ease-out);
}
.ob-choice:hover { border-color: var(--border-strong); }
.ob-choice.is-selected { border-color: var(--brand-green); background: var(--green-tint); }
.ob-choice-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ob-choice-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 4px; }
.ob-choice-label { font: 600 16px var(--font-sans); color: var(--ink); }
.ob-choice-tag {
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--error); background: rgba(164, 85, 46, 0.1);
  padding: 4px 8px; border-radius: var(--radius-pill); white-space: nowrap;
}
.ob-choice-desc { font: 400 13px/1.35 var(--font-sans); color: var(--text-muted); }
.ob-choice-pricing { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
.ob-choice-was { font: 500 12px var(--font-sans); color: var(--text-faint); text-decoration: line-through; }
.ob-choice-price { font: 700 16px var(--font-sans); color: var(--ink); }
.ob-choice-note { font: 600 11px var(--font-sans); color: var(--brand-green); }
.ob-choice-check {
  flex: none; width: 22px; height: 22px; border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-green); color: var(--sage-bg);
  opacity: 0; transform: scale(0.6); transition: all 150ms var(--ease-out);
}
.ob-choice.is-selected .ob-choice-check { opacity: 1; transform: none; }

/* Notification toggles card */
.ob-toggles { margin-top: 18px; padding: 18px; }
.ob-toggle { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ob-tg-t { font: 600 15px var(--font-sans); color: var(--ink); }
.ob-tg-s { font: 400 13px var(--font-sans); color: var(--text-muted); }
.ob-divider { border-top: 1px solid var(--border-subtle); margin: 16px 0; }

/* Switch */
.switch {
  flex: none; width: 46px; height: 28px; border-radius: var(--radius-pill);
  border: none; background: var(--ink-12); position: relative; cursor: pointer; padding: 0;
  transition: background 200ms var(--ease-out);
}
.switch.is-on { background: var(--brand-green); }
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: var(--radius-pill);
  background: #fff; box-shadow: 0 1px 3px rgba(10, 33, 31, 0.25);
  transition: transform 200ms var(--ease-out);
}
.switch.is-on .switch-knob { transform: translateX(18px); }

/* Footer nav */
.ob-footer {
  flex: none; padding: 18px clamp(20px, 5vw, 32px) 30px;
  width: 100%; max-width: 560px; margin: 0 auto; box-sizing: border-box;
  display: flex; flex-direction: column; gap: 20px;
}
.ob-dots { display: flex; gap: 7px; justify-content: center; }
.ob-dot { width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--ink-12); transition: all 300ms var(--ease-out); }
.ob-dot.is-done { background: var(--brand-green); }
.ob-dot.is-active { width: 22px; background: var(--brand-green); }
.ob--dark .ob-dot { background: rgba(247, 249, 242, 0.2); }
.ob--dark .ob-dot.is-done, .ob--dark .ob-dot.is-active { background: var(--lime); }
.ob-nav { display: flex; gap: 12px; align-items: center; }
.ob-next, .ob-done-btn { flex: 1; }
.ob-next[hidden], .ob-done-btn[hidden], .ob-back[hidden], .ob-skip[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .ob, .ob-dot, .switch, .switch-knob { transition: none; }
}