/* start.css: layout glue for the sign-up page, from the approved mockup
 * systems/mockup-studio/pages/home-tracker-signup. Light only (ADR 0006). */
[hidden] { display: none !important; }
.nav__brand { white-space: nowrap; }
.nav__back { font-size: var(--p-text-15); font-weight: var(--p-weight-semibold); color: var(--s-text-brand); text-decoration: underline; text-underline-offset: 3px; padding: var(--s-space-sm) 0; }
.nav__back:focus-visible { outline: 2px solid var(--s-action-primary-bg); outline-offset: 2px; border-radius: 2px; }

.signup { padding-block: var(--s-space-2xl) var(--s-space-section-y); }
.signup .section__header { margin-bottom: var(--s-space-xl); }
.signup .t-display-lg { margin: 0; }
.signup__wrap { max-width: 640px; margin-inline: auto; }

.step { margin: 0 0 var(--s-space-lg); padding: var(--s-space-xl); }
.step > h2 { margin: 0 0 var(--s-space-xs); }
.step__sub { margin: 0 0 var(--s-space-lg); color: var(--s-text-muted); font-size: var(--p-text-16); }
.step__num { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: var(--s-space-sm); border-radius: 50%; background: var(--p-olive-100); color: var(--s-text-brand); font: var(--p-weight-semibold) var(--p-text-15)/1 var(--p-font-body); vertical-align: 3px; }

.fields { display: grid; gap: var(--s-space-lg); }
.fields--two { grid-template-columns: 1fr 1fr; gap: var(--s-space-md); }
.field__label .opt { text-transform: none; letter-spacing: 0; font-weight: var(--p-weight-medium); color: var(--s-text-soft); }
.field__help { font-size: var(--p-text-14); line-height: 1.45; color: var(--s-text-muted); margin: 0; }
.field__help--filled { color: var(--s-text-brand); font-weight: var(--p-weight-medium); }
.field .input { min-height: 48px; }
select.input { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--s-text-muted) 50%), linear-gradient(135deg, var(--s-text-muted) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 36px; }
.money { position: relative; }
.money__sign { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--s-text-muted); pointer-events: none; }
.money .input { padding-left: 28px; }
.group { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: var(--s-space-xs); }
.group legend { padding: 0; margin-bottom: var(--s-space-xs); }
.group .input { background: var(--s-surface-raised); border: 1px solid var(--s-border-subtle); border-radius: var(--s-radius-subtle); padding: var(--s-space-md); min-height: 48px; }
.group .input:focus { border-color: var(--s-action-primary-bg); box-shadow: 0 0 0 3px rgba(63, 74, 40, 0.15); }
.group .input[aria-invalid="true"] { border-color: var(--s-feedback-error); box-shadow: 0 0 0 3px rgba(197, 58, 31, 0.15); }

.card > .price, .price { color: var(--s-text-primary); flex: none; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s-space-xs) var(--s-space-sm); margin: 0; }
.price .t-display-md { font-family: var(--p-font-display); }
.card > .price__renew, .card > .refund, .card > .step__sub { flex: none; }
.price__renew { margin: var(--s-space-xs) 0 0; color: var(--s-text-secondary); font-size: var(--p-text-16); }
.refund { margin: var(--s-space-sm) 0 var(--s-space-lg); font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); color: var(--s-text-primary); }
.submit { display: grid; gap: var(--s-space-sm); }
.submit .btn { width: 100%; }
.submit__status { margin: 0; min-height: 1.4em; text-align: center; }

.choices { gap: var(--s-space-sm); }
.choice { display: flex; align-items: flex-start; gap: var(--s-space-md); background: var(--s-surface-raised); border: 1px solid var(--s-border-subtle); border-radius: var(--s-radius-subtle); padding: var(--s-space-md); cursor: pointer; }
.choice:has(input:checked) { border-color: var(--s-action-primary-bg); box-shadow: 0 0 0 1px var(--s-action-primary-bg); }
.choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(63, 74, 40, 0.15); }
.choice input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--s-action-primary-bg); }
.choice__body { display: grid; gap: 2px; }
.choice__title { font-weight: var(--p-weight-semibold); color: var(--s-text-primary); font-size: var(--p-text-16); }
.choice__help { font-size: var(--p-text-15); line-height: 1.45; color: var(--s-text-secondary); }
.choices[aria-invalid="true"] .choice, .choice:has(input[aria-invalid="true"]) { border-color: var(--s-feedback-error); }
.addon { display: grid; gap: var(--s-space-sm); margin-top: var(--s-space-xl); padding-top: var(--s-space-lg); border-top: 1px solid var(--s-border-muted); }
.addon__cap { margin: 0; font-size: var(--p-text-16); font-weight: var(--p-weight-semibold); color: var(--s-text-primary); }
.addon__terms { margin: 0; font-size: var(--p-text-14); line-height: 1.5; color: var(--s-text-secondary); }
.choice--consent { background: var(--s-surface-sunken); }
.submit__note { margin: 0; text-align: center; }
.done__block { margin: var(--s-space-lg) 0 0; padding-top: var(--s-space-lg); border-top: 1px solid var(--s-border-muted); }
.done__block h3 { margin: 0 0 var(--s-space-sm); }
.done__steps { margin: 0 0 var(--s-space-md); padding-left: 22px; color: var(--s-text-secondary); }
.done__steps li { margin: 6px 0; }
.done .robot { display: block; overflow-wrap: anywhere; color: var(--s-text-primary); }

.done { text-align: left; }
.done h2 { margin: 0 0 var(--s-space-md); }
.done p { margin: 0 0 var(--s-space-md); color: var(--s-text-secondary); flex: none; }
.done:focus { outline: none; }

@media (max-width: 640px) {
  .signup { padding-top: var(--s-space-xl); }
  .step { padding: var(--s-space-lg); }
  .footer__top { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .fields--two { grid-template-columns: 1fr; }
}