/* domains/consult-profile-rycolston-com/page.css
 * Form-specific styles. Tokens + reset + text styles come from tokens.css
 * (synced from the design system at deploy time). Uses --p-*/--s-* vars only. */

.wrap { max-width: 680px; margin: 0 auto; padding: 32px 20px 96px; }

.eyebrow {
  font-size: var(--p-text-12); font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-ls-wider); text-transform: uppercase;
  color: var(--s-text-muted); margin: 0 0 10px;
}
h1 {
  font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: clamp(28px, 3.2vw, var(--p-text-38)); line-height: var(--p-lh-heading);
  letter-spacing: var(--p-ls-snug); margin: 0 0 6px;
}
.sub { color: var(--s-text-muted); font-size: var(--p-text-15); margin: 0; }

/* context card */
.ctx {
  margin: 24px 0 8px; background: var(--s-surface-raised);
  border: 1px solid var(--s-border-muted); border-radius: var(--s-radius-panel);
  box-shadow: var(--s-shadow-sm); padding: 18px 20px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px;
}
.ctx .full { grid-column: 1 / -1; }
.ctx dt {
  font-size: var(--p-text-11); font-weight: var(--p-weight-semibold);
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--s-text-soft); margin: 0 0 3px;
}
.ctx dd { margin: 0; font-size: var(--p-text-15); font-weight: var(--p-weight-medium); color: var(--s-text-secondary); }

/* section blocks */
.block { margin-top: 28px; }
.block > h2 {
  font-family: var(--p-font-display); font-weight: var(--p-weight-medium);
  font-size: var(--p-text-22); line-height: var(--p-lh-heading);
  letter-spacing: var(--p-ls-snug); margin: 0 0 4px;
}
.block > p.hint { color: var(--s-text-muted); font-size: var(--p-text-14); margin: 0 0 16px; }

/* outcome pills */
.outcomes { display: flex; flex-direction: column; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  background: var(--s-surface-raised); border: 1.5px solid var(--s-border-strong);
  border-radius: var(--s-radius-control); cursor: pointer;
  transition: all var(--s-motion-hover); font-size: var(--p-text-15); font-weight: var(--p-weight-medium);
}
.opt:hover { border-color: var(--p-olive-500); background: var(--p-olive-50); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .dot { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--s-border-strong); transition: all var(--s-motion-hover); }
.opt.sel { border-color: var(--p-olive-700); background: var(--p-olive-50); box-shadow: 0 0 0 1px var(--p-olive-700); }
.opt.sel .dot { border-color: var(--p-olive-700); background: var(--p-olive-700); box-shadow: inset 0 0 0 3px var(--p-cream-50); }
.opt.cancel.sel { border-color: var(--p-accent-brick); box-shadow: 0 0 0 1px var(--p-accent-brick); background: #fbeeea; }
.opt.cancel.sel .dot { border-color: var(--p-accent-brick); background: var(--p-accent-brick); }
.opt .tag { margin-left: auto; font-size: var(--p-text-11); font-weight: var(--p-weight-semibold); letter-spacing: 0.08em; text-transform: uppercase; color: var(--s-text-soft); }

/* profile fields */
#profile { display: none; }
#profile.show { display: block; animation: fade var(--p-duration-slow) var(--p-ease-out); }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.field { margin-top: 22px; }
.field label { display: flex; align-items: center; gap: 8px; font-size: var(--p-text-15); font-weight: var(--p-weight-semibold); color: var(--s-text-primary); margin-bottom: 4px; }
.field label .emoji { font-size: var(--p-text-18); }
.field label .sublabel { font-weight: var(--p-weight-regular); color: var(--s-text-soft); font-size: var(--p-text-13); }
.field .q { font-size: var(--p-text-13); color: var(--s-text-muted); margin: 0 0 8px; font-style: italic; }
.ctl {
  width: 100%; background: var(--s-surface-raised); border: 1.5px solid var(--s-border-strong);
  border-radius: 14px; padding: 12px 14px; font-family: inherit; font-size: var(--p-text-15);
  color: var(--s-text-primary); transition: border-color var(--s-motion-hover);
}
.ctl:focus { outline: none; border-color: var(--p-olive-700); box-shadow: 0 0 0 3px rgba(63,74,40,.12); }
textarea.ctl { min-height: 84px; resize: vertical; line-height: 1.5; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.price-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.price-row .dash { color: var(--s-text-soft); font-weight: var(--p-weight-semibold); }
.price { position: relative; }
.price .dollar { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--s-text-soft); font-weight: var(--p-weight-semibold); }
.price .ctl { padding-left: 26px; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { padding: 8px 15px; border-radius: var(--s-radius-control); border: 1.5px solid var(--s-border-strong); background: var(--s-surface-raised); font-size: var(--p-text-14); font-weight: var(--p-weight-medium); cursor: pointer; transition: all var(--s-motion-press); user-select: none; }
.chip:hover { border-color: var(--p-olive-500); }
.chip.on { background: var(--p-olive-700); color: var(--s-text-inverse); border-color: var(--p-olive-700); }

/* submit */
.actions { margin-top: 36px; display: flex; flex-direction: column; gap: 14px; }
.btn { width: 100%; padding: 16px 24px; border: none; border-radius: var(--s-radius-control); background: var(--s-action-primary-bg); color: var(--s-action-primary-fg); font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); box-shadow: var(--s-shadow-md); transition: background var(--s-motion-hover), transform var(--s-motion-press); }
.btn:hover { background: var(--s-action-primary-bg-hover); }
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .6; cursor: default; }
.foot { text-align: center; font-size: var(--p-text-13); color: var(--s-text-soft); }
.foot b { color: var(--s-text-muted); font-weight: var(--p-weight-semibold); }

/* states */
.banner { margin-top: 20px; padding: 14px 18px; border-radius: var(--s-radius-panel); background: #fbeeea; color: var(--s-feedback-error); border: 1px solid rgba(197,58,31,.25); font-size: var(--p-text-14); font-weight: var(--p-weight-medium); }
.done { margin-top: 40px; text-align: center; }
.done-mark { width: 64px; height: 64px; margin: 0 auto 18px; border-radius: 50%; background: var(--s-feedback-success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 32px; }
.done h2 { font-family: var(--p-font-display); font-weight: var(--p-weight-medium); font-size: var(--p-text-26); margin: 0 0 6px; }
.done p { color: var(--s-text-muted); margin: 0; }

@media (max-width: 520px) {
  .ctx { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  .price-row { grid-template-columns: 1fr; }
  .price-row .dash { display: none; }
}