/* Intake flow - builds on site tokens from styles.css */

.intake-page {
 padding-bottom: 4rem;
}

.intake-hero {
 padding: 2.5rem 0 1.5rem;
 text-align: center;
}

.intake-hero .section__heading {
 margin-inline: auto;
}

.intake-hero .section__lede {
 margin-inline: auto;
}

.intake-shell {
 max-width: 760px;
 margin: 0 auto;
 padding: 0 var(--gutter);
}

.intake-progress {
 display: flex;
 flex-wrap: wrap;
 gap: 0.4rem;
 justify-content: center;
 margin: 0 0 1.75rem;
 list-style: none;
 padding: 0;
}

.intake-progress li {
 font-size: 0.72rem;
 letter-spacing: var(--tracking-wide);
 text-transform: uppercase;
 color: var(--color-ink-muted);
 padding: 0.35rem 0.65rem;
 border-radius: 999px;
 border: 1px solid transparent;
}

.intake-progress li[data-active="true"] {
 color: var(--color-ink);
 border-color: var(--color-gold);
 background: var(--color-surface);
 font-weight: 700;
}

.intake-progress li[data-done="true"] {
 color: var(--color-ink);
}

.panel {
 display: none;
 background: var(--color-cream);
 border: 1px solid rgba(196, 164, 132, 0.35);
 border-radius: var(--radius-md);
 padding: clamp(1.25rem, 3vw, 2rem);
 box-shadow: var(--shadow-card);
}

.panel[data-active="true"] {
 display: block;
}

.panel__title {
 font-family: var(--font-display);
 font-size: 1.6rem;
 margin: 0 0 0.5rem;
}

.panel__lede {
 color: var(--color-ink-muted);
 margin: 0 0 1.5rem;
}

.choice-grid {
 display: grid;
 gap: 1rem;
 grid-template-columns: 1fr;
}

@media (min-width: 700px) {
 .choice-grid {
 grid-template-columns: repeat(3, 1fr);
 }
}

.choice-card {
 appearance: none;
 border: 1px solid rgba(36, 28, 20, 0.15);
 background: #fff;
 border-radius: var(--radius-md);
 padding: 1.25rem 1rem;
 text-align: left;
 cursor: pointer;
 transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.choice-card:hover,
.choice-card:focus-visible {
 border-color: var(--color-gold);
 transform: translateY(-2px);
 box-shadow: var(--shadow-card);
}

.choice-card strong {
 display: block;
 font-family: var(--font-display);
 font-size: 1.15rem;
 margin-bottom: 0.35rem;
}

.choice-card span {
 color: var(--color-ink-muted);
 font-size: 0.95rem;
}

.intake-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 margin-top: 1.5rem;
}

.intake-status {
 min-height: 1.4em;
 margin: 0.75rem 0 0;
 color: var(--color-ink-muted);
}

.intake-status[data-state="error"] {
 color: #b54a2c;
 font-weight: 700;
}

.intake-status[data-state="success"] {
 color: #2f6a3d;
 font-weight: 700;
}

.spinner-row {
 display: flex;
 align-items: center;
 gap: 0.75rem;
 color: var(--color-ink-muted);
 margin: 1rem 0;
}

.spinner {
 width: 1.1rem;
 height: 1.1rem;
 border: 2px solid rgba(36, 28, 20, 0.15);
 border-top-color: var(--color-bg-dark);
 border-radius: 50%;
 animation: spin 0.8s linear infinite;
}

@keyframes spin {
 to {
 transform: rotate(360deg);
 }
}

.readback {
 background: var(--color-surface);
 border-left: 3px solid var(--color-gold);
 padding: 1rem 1.1rem;
 margin: 1rem 0;
}

.readback p {
 margin: 0 0 0.75rem;
}

.readback ul {
 margin: 0;
 padding-left: 1.1rem;
 color: var(--color-ink-muted);
}

.thumb-row {
 display: flex;
 gap: 1rem;
 align-items: flex-start;
 margin-bottom: 1rem;
}

.thumb-row img {
 width: 140px;
 height: 105px;
 object-fit: cover;
 border-radius: var(--radius-sm);
 border: 1px solid var(--color-gold);
}

.dims {
 display: none;
 grid-template-columns: repeat(3, 1fr);
 gap: 0.75rem;
}

.dims[data-open="true"] {
 display: grid;
}

@media (max-width: 600px) {
 .dims[data-open="true"] {
 grid-template-columns: 1fr;
 }
}

.review-list {
 list-style: none;
 padding: 0;
 margin: 0;
}

.review-list li {
 display: grid;
 grid-template-columns: 140px 1fr;
 gap: 0.75rem;
 padding: 0.65rem 0;
 border-bottom: 1px solid rgba(36, 28, 20, 0.08);
}

.review-list li span:first-child {
 font-size: 0.78rem;
 letter-spacing: var(--tracking-mid);
 text-transform: uppercase;
 color: var(--color-ink-muted);
 font-weight: 700;
}

.ballpark {
 text-align: center;
 padding: 1rem 0;
}

.ballpark__range {
 font-family: var(--font-display);
 font-size: clamp(1.8rem, 4vw, 2.6rem);
 margin: 0.5rem 0 1rem;
}

.helper {
 font-size: 0.88rem;
 color: var(--color-ink-muted);
 margin: 0.25rem 0 0;
}

.file-list {
 margin: 0.75rem 0 0;
 padding: 0;
 list-style: none;
 color: var(--color-ink-muted);
 font-size: 0.92rem;
}

.toggle-row {
 display: flex;
 flex-wrap: wrap;
 gap: 0.75rem;
 margin-bottom: 1rem;
}

.toggle-row button {
 flex: 1;
 min-width: 180px;
}

.toggle-row button[aria-pressed="true"] {
 background: var(--color-bg-dark);
 color: var(--color-cream);
 border-color: var(--color-bg-dark);
}