/* Claude: customer-wizard project. Minimal layout for /strata/quote (and
   future /commercial/quote) — one question at a time, with Previous/Next
   bar + thin progress bar at the bottom. Uses the existing OHD design
   tokens from site.css (--graphite, --red, --concrete, etc.).

   Wizard-specific accent: navy. The site-wide brand red stays on the
   public marketing pages (LeadForm, hero CTAs, footer); the wizard uses
   navy on selected answer buttons and the primary Next/Submit button so
   visitors can tell which surface they're in. Unselected button styling
   (white + line-strong border, hover steel-2) is unchanged. */

:root {
    --wizard-accent: #1E3A8A;       /* navy — selected & primary */
    --wizard-accent-deep: #172554;  /* darker navy — primary hover */
    --wizard-accent-tint: rgba(30, 58, 138, 0.06);  /* Claude: default answer-button background — light navy */
    --wizard-accent-tint-selected: rgba(30, 58, 138, 0.18);  /* Claude: selected answer-button — slightly darker navy */
}

.wizard-page {
    padding: 48px 0 96px;
    min-height: 80vh;
    background: var(--concrete);
}

.wizard-shell {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    max-width: 720px;
    margin: 0 auto;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 60vh;
}

.wizard-header {
    padding: 24px 32px 0;
}

.wizard-body {
    padding: 16px 32px 32px;
    flex: 1 1 auto;
}

/* Claude: chat-style transcript. Capped at 50vh with internal scroll so a
   long transcript never pushes the active question off-screen; new entries
   land at the bottom (newest closest to the question they answered). The
   WizardForm scrolls to bottom on advance via JS interop. */

.wizard-transcript {
    padding: 16px 32px;
    border-bottom: 1px solid var(--line);
    background: var(--white);
    max-height: 50vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.transcript-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Claude: chat-style entrance animation. Each bubble fades up from below
   to mimic a text message arriving. Sequenced so the visitor sees the
   just-answered Q+A settle into the transcript FIRST, then the new
   active question slides into the wizard-body. Total dance ~750ms:
       0   ms  transcript question bubble starts
     100   ms  transcript answer bubble starts (chains after Q)
     450   ms  active question bubble starts (after transcript settles)
   `backwards` keeps each bubble invisible during its pre-delay so it
   doesn't flash at full opacity before sliding in. Bumped translateY
   from 8px to 14px so the "moving into the chat" motion is more
   noticeable, especially against the bigger active-question bubble. */
@keyframes transcript-pop-in {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.transcript-question {
    align-self: flex-start;
    max-width: 80%;
    padding: 8px 12px;
    background: var(--concrete);
    color: var(--graphite);
    border-radius: 14px 14px 14px 4px;
    font-size: 14px;
    line-height: 1.4;
    animation: transcript-pop-in 400ms ease-out backwards;
}

.transcript-answer {
    align-self: flex-end;
    max-width: 80%;
    padding: 8px 12px;
    background: var(--wizard-accent-tint);
    color: var(--graphite);
    border: 1px solid transparent;
    border-radius: 14px 14px 4px 14px;
    font: inherit;
    font-size: 14px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: border-color 120ms ease, background-color 120ms ease;
    animation: transcript-pop-in 400ms ease-out 100ms backwards;
}

/* Respect the OS "reduce motion" setting -- accessibility default. */
@media (prefers-reduced-motion: reduce) {
    .transcript-question,
    .transcript-answer {
        animation: none;
    }
}

.transcript-answer:hover:not(:disabled),
.transcript-answer:focus-visible {
    border-color: var(--wizard-accent);
    background: var(--wizard-accent-tint-selected);
    outline: none;
}

.transcript-answer:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}

/* Claude: empty/skipped answer bubble. Visitor was asked the question
   but moved on without supplying an answer. Render the bubble shape so
   they can see what they skipped + click it to revisit, but mute the
   styling (dashed border, lower opacity, fixed minimum size) so it
   reads as "no answer" rather than "an empty answer". */
.transcript-answer.is-empty {
    min-width: 64px;
    min-height: 28px;
    background: transparent;
    border: 1px dashed var(--steel-2, #B0B6BE);
    opacity: 0.6;
}

.transcript-answer.is-empty:hover:not(:disabled),
.transcript-answer.is-empty:focus-visible {
    border-color: var(--wizard-accent);
    background: var(--wizard-accent-tint);
    opacity: 1;
}

.wizard-footer {
    border-top: 1px solid var(--line);
    background: var(--concrete);
    padding: 16px 32px 0;
    position: relative;
}

.wizard-footer-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 16px;
}

.wizard-empty {
    padding: 48px 32px;
    text-align: center;
    color: var(--steel);
}

/* Questions */

.wizard-question {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.wizard-question-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--graphite);
    margin: 0;
}

.wizard-question-text {
    color: var(--graphite);
    margin: 0;
    line-height: 1.55;
}

/* Claude: active question prompt -- same chat-bubble shape as the
   transcript-question, but bigger (this is the question being asked
   "right now"). align-self pushes it to the left of the wizard-body
   flex column so the visitor's answer area can sit on the right. The
   slide-up animation is delayed 450ms so the visitor sees the
   just-answered Q+A settle into the transcript first, then the new
   active question arrives -- reads like a chat sequence rather than
   two simultaneous pops. */
.wizard-question-prompt {
    align-self: flex-start;
    max-width: 85%;
    margin: 0;
    padding: 14px 18px;
    background: var(--concrete);
    color: var(--graphite);
    border-radius: 18px 18px 18px 4px;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.4;
    animation: transcript-pop-in 400ms ease-out 450ms backwards;
}

/* Right-aligned column for the visitor's answer surface (button list,
   comment textarea, address autocomplete, contact inputs). Mirrors the
   transcript-answer's flex-end placement so left = wizard, right =
   visitor reads at a glance. Inner children stack vertically with a
   small gap (button list above the comment box, for instance). */
.wizard-question-answer {
    align-self: flex-end;
    width: 85%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wizard-question-unsupported {
    color: var(--red);
    font-size: 14px;
}

/* Answer buttons (Check / Custom) */

.wizard-answer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-answer-button {
    width: 100%;
    text-align: left;
    padding: 14px 16px;
    background: var(--wizard-accent-tint);
    border: 2px solid var(--line);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    color: var(--graphite);
    transition: border-color 120ms ease, background-color 120ms ease;
}

.wizard-answer-button:hover {
    border-color: var(--steel-2);
}

.wizard-answer-button.is-selected {
    border-color: var(--wizard-accent);
    background: var(--wizard-accent-tint-selected);
}

.wizard-answer-status {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--concrete);
    color: var(--steel);
    font-size: 14px;
    font-weight: 600;
    flex-shrink: 0;
}

.wizard-answer-status-pass     { background: #DCFCE7; color: #166534; }
.wizard-answer-status-marginal { background: #FEF3C7; color: #92400E; }
.wizard-answer-status-fail     { background: #FEE2E2; color: #991B1B; }
.wizard-answer-status-na       { background: var(--concrete); color: var(--steel); }

.wizard-answer-text {
    flex: 1 1 auto;
}

.wizard-answer-check {
    color: var(--wizard-accent);
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

/* Fields (Comment / Address / Contact) */

.wizard-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.wizard-field-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--steel);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.wizard-field-input,
.wizard-field-textarea {
    width: 100%;
    font: inherit;
    color: var(--graphite);
    padding: 12px 14px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    background: var(--white);
    transition: border-color 120ms ease;
}

.wizard-field-input:focus,
.wizard-field-textarea:focus {
    outline: none;
    border-color: var(--wizard-accent);
}

.wizard-field-textarea {
    resize: vertical;
    min-height: 96px;
    line-height: 1.45;
}

.wizard-contact-input,
.wizard-address-input {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.wizard-contact-hint {
    font-size: 13px;
    color: var(--red);
    margin: 0;
}

/* Photo upload — Claude: lives in the wizard footer between Previous
   and Next, so the wrapper has no box framing of its own. The label is
   styled to match the secondary nav buttons. */

.wizard-photo-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.wizard-photo-upload-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    cursor: pointer;
    font: inherit;
    font-weight: 600;
    color: var(--graphite);
    transition: border-color 120ms ease;
}

.wizard-photo-upload-label:hover {
    border-color: var(--steel-2);
}

.wizard-photo-upload-icon { font-size: 16px; }

.wizard-photo-upload-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.wizard-photo-upload-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 4px;
    font-size: 12px;
    color: var(--steel);
}

.wizard-photo-upload-item.is-uploading {
    color: var(--steel-2);
    font-style: italic;
}

.wizard-photo-upload-error { color: var(--red); }

.wizard-photo-upload-remove {
    border: none;
    background: transparent;
    color: var(--steel);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0 2px;
}

.wizard-photo-upload-remove:hover { color: var(--red); }

/* Footer buttons */

.wizard-btn {
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.wizard-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.wizard-btn-primary {
    background: var(--wizard-accent);
    color: var(--white);
}

.wizard-btn-primary:hover:not(:disabled) {
    background: var(--wizard-accent-deep);
}

.wizard-btn-secondary {
    background: var(--white);
    color: var(--graphite);
    border: 1px solid var(--line-strong);
}

.wizard-btn-secondary:hover:not(:disabled) {
    border-color: var(--steel-2);
}

/* Claude: destructive variant -- shown on Q1 only when a resumed wizard
   has pre-existing answers from a prior session. Red border + red label
   signal that this nukes data; same .wizard-btn padding/sizing so it
   occupies the same footer slot as Previous would. */
.wizard-btn-clear {
    background: var(--white);
    color: var(--red);
    border: 1px solid var(--red);
}

.wizard-btn-clear:hover:not(:disabled) {
    background: rgba(217, 55, 42, 0.06);
}

/* Invisible placeholder that fills the left-hand slot when neither
   Previous nor Clear is shown (fresh wizard, Q1). Keeps the
   space-between flex layout pinning Next to the right. */
.wizard-footer-spacer {
    width: 1px;
}

.wizard-error {
    color: var(--red);
    font-size: 14px;
    margin: 0 0 16px;
}

/* Progress bar */

.wizard-progress-bar {
    height: 4px;
    width: 100%;
    background: var(--line);
    margin: 0 -32px;
    width: calc(100% + 64px);
}

.wizard-progress-bar-fill {
    height: 100%;
    background: var(--wizard-accent);
    transition: width 240ms ease;
}

/* Claude: customer-wizard Phase 2 — AI report streaming surface on
   /thank-you?wizard=1. Lives inside the existing .legal-contact-card-ish
   container; only its inner pieces are scoped here. */

.ai-report-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
}

.ai-report-header h2 {
    color: var(--graphite);
}

.ai-report-text {
    margin-top: 16px;
    line-height: 1.55;
    color: var(--graphite);
    min-height: 80px;
}

.ai-report-text h1,
.ai-report-text h2 {
    font-weight: 700;
    color: var(--graphite);
    margin: 20px 0 8px;
}

.ai-report-text h1 { font-size: 22px; }
.ai-report-text h2 { font-size: 18px; }
.ai-report-text h3 { font-size: 15px; margin: 16px 0 6px; }
.ai-report-text h4 { font-size: 14px; margin: 12px 0 4px; color: var(--steel); }

.ai-report-text p {
    margin: 0 0 12px;
}

.ai-report-text strong { font-weight: 700; }
.ai-report-text em     { font-style: italic; }

/* Lists -- single level. The markdown renderer doesn't support nested
   lists; the system prompt tells Claude to stay flat. */
.ai-report-text ul,
.ai-report-text ol {
    margin: 0 0 12px;
    padding-left: 24px;
}
.ai-report-text li {
    margin-bottom: 4px;
    line-height: 1.55;
}

/* Tables -- typical use is cost breakdowns or comparison data. */
.ai-report-text table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 14px;
}
.ai-report-text th,
.ai-report-text td {
    padding: 8px 10px;
    border: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}
.ai-report-text thead th {
    background: var(--concrete);
    font-weight: 700;
    color: var(--graphite);
}

/* Inline code -- for short snippets like cycle counts or part numbers. */
.ai-report-text code {
    background: var(--concrete);
    border-radius: 3px;
    padding: 1px 5px;
    font-family: 'Consolas', 'Menlo', monospace;
    font-size: 13px;
}

/* Block quote -- left rule in brand red. */
.ai-report-text blockquote {
    margin: 12px 0;
    padding: 6px 0 6px 14px;
    border-left: 3px solid var(--red);
    color: var(--graphite);
}

/* Horizontal rule. */
.ai-report-text hr {
    border: none;
    border-top: 1px solid var(--line);
    margin: 16px 0;
}

.ai-report-error {
    margin-top: 12px;
    padding: 12px 16px;
    background: rgba(217, 55, 42, 0.06);
    border: 1px solid var(--red);
    border-radius: 4px;
    color: var(--red);
}

.ai-report-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Claude: anchors have no :disabled, so the AI-report Download button
   uses .is-disabled + aria-disabled while the report is still streaming.
   pointer-events:none blocks the click; the visual styling tells the
   visitor the button is going to be ready, just not yet. */
.btn.is-disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.ai-report-actions .btn-outline {
    background: var(--white);
    color: var(--graphite);
    border: 1px solid var(--line-strong);
    padding: 14px 28px;
    border-radius: 4px;
    text-decoration: none;
}