/* ==========================================================================
   Rebate Application Wizard — layout, stepper and step-specific styles.
   Extends the global tw-* component library; only adds what's not in tw.css.
   ========================================================================== */

/* Tailwind's `.hidden` utility (display: none) lives in styles.css, which
   loads before wizard.css. Layout rules below like `.wizard-row { display: grid }`
   have equal specificity and would otherwise win by source order, leaving
   rows tagged `hidden` still rendered. Reassert the utility here so show/hide
   logic on grid/flex rows works as written. */
.hidden { display: none !important; }

/* ── Phosphor icon glyphs used by the wizard but not registered in tw.css ──
   tw.css only wires up a curated subset. These mappings use the same
   codepoints as fonts/phosphor-icons/regular/style.css so the bundled woff2
   renders them correctly without loading the full icon stylesheet.          */
.ph-cooking-pot::before       { content: "\e764"; }
.ph-thermometer-cold::before  { content: "\e5c8"; }
.ph-snowflake::before         { content: "\e5aa"; }
.ph-washing-machine::before   { content: "\ede8"; }
.ph-wind::before              { content: "\e5d2"; }
.ph-fan::before               { content: "\e9f2"; }
.ph-shirt-folded::before      { content: "\ea92"; }
.ph-basket::before            { content: "\e964"; }
.ph-house-line::before        { content: "\e2c4"; }
.ph-package::before           { content: "\e390"; }
.ph-file::before              { content: "\e230"; }
.ph-file-pdf::before          { content: "\e702"; }
.ph-file-doc::before          { content: "\eb1e"; }
.ph-file-xls::before          { content: "\eb22"; }
.ph-file-image::before        { content: "\ea24"; }
.ph-receipt::before           { content: "\e3ec"; }
.ph-bank::before              { content: "\e0b4"; }
.ph-paper-plane-tilt::before  { content: "\e398"; }
.ph-shield-check::before      { content: "\e40c"; }
.ph-printer::before           { content: "\e3dc"; }
.ph-envelope-simple::before   { content: "\e218"; }
.ph-question::before          { content: "\e3e8"; }
.ph-lock-simple::before       { content: "\e308"; }
.ph-chats-circle::before      { content: "\e17e"; }
.ph-download-simple::before   { content: "\e20c"; }
.ph-arrow-square-out::before  { content: "\e5de"; }

:root {
    --wizard-max-width: 72rem;
    --wizard-gap: 2rem;
    --stepper-circle: 2.25rem;
}

/* ── Global BC Hydro chrome (header & footer wrappers) ────────────────────
   #divHeader / #divFooter in _Layout.cshtml. Two very different things render
   inside them and they need opposite treatment:

   1. The CMS chrome (HeaderViewComponent → CmsContentService) is authored for
      bchydro.com, where the bars run edge to edge and only the inner rail is
      capped — the chrome's own header.min.css does that with
      `#bchydro-top-header { margin: 0 auto; max-width: 1398px }`. So the
      wrapper must impose no width of its own; it spans the viewport and lets
      the chrome lay itself out. (If the chrome instead renders at some
      narrower fixed width, its stylesheet did not load — check that the CMS
      clientlib URLs were absolutised, not that this rule is missing.)

   2. The static fallback — CMSUtils:ShowStaticHeaderAndFooter, or any CMS
      failure — is a single screenshot PNG. Tailwind preflight makes <img> a
      block box, so at its natural width it pins to the left edge. Centre it,
      and cap it at 100% so a 1607px-wide screenshot cannot force a horizontal
      scrollbar on a narrow viewport.                                        */
.site-chrome {
    width: 100%;
}

.site-chrome > img {
    display: block;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}
.site-chrome .container {
    width: 100% !important;
    max-width: 100% !important;
}

/* ── Placeholder bars for the global (site-wide) header & footer ──────────── */
.global-chrome {
    background: repeating-linear-gradient(45deg,
        #f3f4f6 0 10px,
        #e5e7eb 10px 20px);
    color: #6b7280;
    font: 600 0.6875rem var(--font-body, 'Noto Sans', sans-serif);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 1rem;
    text-align: center;
    border: 1px dashed #9ca3af;
    min-height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ── Page layout ──────────────────────────────────────────────────────────── */
.wizard-page {
    background: #ffffff;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Match the shadow used by .tw-card for every white surface in the wizard */
.wizard-stepper,
.wizard-card,
.wizard-aside,
.wizard-actions {
    box-shadow: 0 0 12px rgb(0 0 0 / 0.06);
}

/* Keyboard focus ring on the file dropzone (it's role="button" in JS) */
.tw-file-drop:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-color: var(--color-primary);
}

.wizard-main {
    flex: 1;
    padding: 2rem 1.25rem 6rem;
}

.wizard-shell {
    max-width: var(--wizard-max-width);
    margin: 0 auto;
}

/* Guarded steps (1–5) render this class so the step is hidden from the very
   first paint. window.wizard.guard() removes it once the required session
   state is present; a deep-link that fails the guard is redirected while
   still cloaked, so the step never flashes before the bounce to /rebate-wizard.
   The welcome page is never cloaked. Wizard requires JS, so a no-JS visitor
   (who couldn't use the form anyway) simply sees nothing here. */
.wizard-cloak {
    visibility: hidden;
}

.wizard-intro {
    margin: 0 0 1.5rem;
}

.wizard-intro h1 {
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
    color: var(--color-foreground);
}

.wizard-intro p.lead {
    color: var(--color-muted);
    font-size: 0.9375rem;
    margin: 0;
    max-width: 44rem;
}

/* ── Stepper ──────────────────────────────────────────────────────────────── */
.wizard-stepper {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem 1rem;
    margin-bottom: 1.5rem;
}

.wizard-stepper ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    gap: 0.5rem;
}

.wizard-stepper li {
    flex: 1 1 0;
    text-align: center;
    position: relative;
    min-width: 0;
}

.wizard-stepper li + li::before {
    content: "";
    position: absolute;
    top: calc(var(--stepper-circle) / 2);
    right: 50%;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    z-index: 0;
    transform: translateY(-50%);
}

.wizard-stepper li.is-complete + li::before,
.wizard-stepper li.is-current + li::before {
    background: var(--color-primary);
}

.wizard-step-marker {
    width: var(--stepper-circle);
    height: var(--stepper-circle);
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.5rem;
    position: relative;
    z-index: 1;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.wizard-stepper li.is-complete .wizard-step-marker {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.wizard-stepper li.is-current .wizard-step-marker {
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.wizard-step-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-muted);
    line-height: 1.2;
    padding: 0 0.25rem;
    overflow-wrap: anywhere;
}

.wizard-stepper li.is-current .wizard-step-label,
.wizard-stepper li.is-complete .wizard-step-label {
    color: var(--color-foreground);
}

.wizard-stepper li.is-current .wizard-step-label {
    color: var(--color-primary);
}

/* Mobile: collapse to the current step only */
@media (max-width: 640px) {
    .wizard-stepper {
        padding: 1rem;
    }
    .wizard-stepper ol {
        gap: 0.25rem;
    }
    .wizard-stepper li:not(.is-current) .wizard-step-label {
        display: none;
    }
}

/* ── Two-column content/sidebar grid ───────────────────────────────────────── */
.wizard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 18rem;
    gap: var(--wizard-gap);
    align-items: start;
}

@media (max-width: 960px) {
    .wizard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.wizard-content {
    min-width: 0;
}

.wizard-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.wizard-aside {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    overflow: hidden;
}

.wizard-aside-head {
    background: var(--color-primary);
    color: #fff;
    padding: 0.625rem 1rem;
    font-weight: 700;
    font-size: 0.8125rem;
}

.wizard-aside-body {
    padding: 0.875rem 1rem;
    font-size: 0.8125rem;
    color: var(--color-foreground);
    line-height: 1.5;
}

.wizard-aside-body ul,
.wizard-aside-body ol {
    margin: 0.25rem 0 0;
    padding-left: 1.25rem;
}

.wizard-aside-body ul {
    list-style: disc outside;
}

.wizard-aside-body ol {
    list-style: decimal outside;
}

.wizard-aside-body li + li {
    margin-top: 0.35rem;
}

.wizard-aside-body li::marker {
    color: var(--color-muted);
}

/* Preflight makes anchors inherit color with no underline — restyle any
   link inside an aside to match .wizard-inline-link. */
.wizard-aside-body a {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

.wizard-aside-body a:hover,
.wizard-aside-body a:focus-visible {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.wizard-aside-body a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

/* ── Cards / section styling specific to the wizard ─────────────────────── */
.wizard-card {
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.25rem;
}

.wizard-card + .wizard-card {
    margin-top: 0;
}

.wizard-card h2 {
    font-family: var(--font-heading);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 0.25rem;
}

/* A card heading sits tight against its .section-hint on purpose — the pair
   reads as title + subtitle, and the hint's own 1rem bottom margin is what
   separates the heading block from the body. Cards with no hint had nothing
   supplying that gap, so their content nearly touched the title; give those
   headings the 1rem themselves.

   Direct children only: headings nested in a flex header row (step 3's "Your
   appliances", step 4's "Upload files", the summary and product-finder result
   heads) are laid out against a badge or buttons, where a bottom margin would
   knock them out of vertical alignment. */
.wizard-card > h2:not(:has(+ .section-hint)) {
    margin-bottom: 1rem;
}

.wizard-card h3 {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 1.25rem 0 0.5rem;
}

.wizard-card p.section-hint {
    color: var(--color-muted);
    font-size: 0.8125rem;
    margin: 0 0 1rem;
}

/* Form row pairing a label (left) with a control (right), two-col on desktop */
.wizard-row {
    display: grid;
    grid-template-columns: 17rem minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
    margin-bottom: 0.85rem;
}

.wizard-row > .tw-label,
.wizard-row > label.tw-label {
    margin: 0.4rem 0 0;
    font-weight: 600;
    color: var(--color-foreground);
}

.wizard-row .tw-form-text {
    display: block;
    margin-top: 0.25rem;
}

/* `.tw-form-error` visibility is owned by tw.css — hidden by default,
   shown only when the sibling input is in the error state. Don't re-assert
   `display: block` here or the message will leak in by default. */

.wizard-row--stack {
    grid-template-columns: minmax(0, 1fr);
}

/* Long-prompt rows (e.g. dynamic program questions): give the label the
   flexible width so the question text can breathe, and pin the control to a
   compact fixed column on the right. */
.wizard-row--question {
    grid-template-columns: minmax(0, 1fr) 16rem;
}

.wizard-row--question > .tw-label {
    line-height: 1.4;
}

@media (max-width: 880px) {
    .wizard-row--question {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Step-5 "Influence on decision and rebates" card */
.feedback-subhead {
    margin: 1.5rem 0 0.75rem;
}

/* Step-5 satisfaction survey — 1–5 rating scale (reuses the questionnaire tables) */
.feedback-question {
    border: 0;
    padding: 0;
    margin: 0 0 1.25rem;
}
.feedback-question > legend {
    padding: 0;
    margin: 0 0 0.5rem;
    font-weight: 600;
}
.feedback-scale {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.feedback-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0.2rem;
    min-width: 3.75rem;
    padding: 0.45rem 0.5rem;
    border: 1px solid var(--color-light);
    border-radius: 0.5rem;
    cursor: pointer;
    text-align: center;
}
/* Keep the native radio focusable + in the a11y tree, hidden only visually. */
.feedback-tile input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.feedback-num {
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1;
}
.feedback-cap {
    font-size: 0.7rem;
    line-height: 1.2;
    color: var(--color-dark-light, #64748b);
}
.feedback-tile:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-light-light);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}
.feedback-tile:has(input:focus-visible) {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .wizard-row {
        grid-template-columns: minmax(0, 1fr);
    }
    .wizard-row > .tw-label {
        margin-bottom: 0.25rem;
    }
}

.required-mark {
    color: var(--color-danger);
    margin-left: 0.15rem;
}

/* Info button that opens a popover next to a label (e.g. account-number help) */
.wizard-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-left: 0.3rem;
    background: none;
    border: 0;
    padding: 0;
    color: var(--color-primary);
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
}

.wizard-info-btn:hover {
    color: var(--color-primary-hover);
}

.wizard-info-btn:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

/* ── Account-number field with inline lookup status ─────────────────────────
   The account number is looked up against the provider's database as the user
   types (step 1). The status indicator overlays the right edge of the input:
   a spinner while the request is in flight, then a green check on a hit or an
   amber warning on a miss. A miss never blocks the form, so the input keeps
   its normal border and only the message below it changes.

   The `.tw-form-error` span stays *inside* this wrapper and immediately after
   the input so tw.css's `.tw-input-error + .tw-form-error` sibling rule still
   reveals it. The status icon is absolutely positioned, so it can follow. */
.account-field {
    position: relative;
}

.account-field > .tw-input {
    /* Reserve room so a long account number never runs under the icon. */
    padding-right: 2.25rem;
}

.account-field-status {
    position: absolute;
    right: 0.625rem;
    /* Centre on the input's first line box rather than on this wrapper, which
       also holds the error span. Offset and height mirror .tw-input's
       border + padding-top and its line-height × font-size. */
    top: calc(1px + 0.5rem);
    height: calc(1.5 * var(--text-base, 1rem));
    display: none;
    align-items: center;
    font-size: 1.15rem;
    line-height: 1;
    pointer-events: none;
}

.account-field-status.is-busy,
.account-field-status.is-found,
.account-field-status.is-missing {
    display: flex;
}

.account-field-status.is-found {
    color: var(--color-success);
}

.account-field-status.is-missing {
    color: var(--color-warning);
}

/* Lookup outcome message below the field. Not an error — the customer can
   continue with an account we couldn't find. Scoped with :not(.hidden) so the
   `hidden` utility still wins when the script toggles it off. */
.account-status-msg:not(.hidden) {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--text-xs);
}

.account-status-msg.is-found {
    color: var(--color-success);
}

.account-status-msg.is-missing {
    color: var(--color-warning);
}

/* Step-3 modal: the chosen retailer sells online only, so the in-store city
   cascade came back empty. Same :not(.hidden) scoping as .account-status-msg
   so the `hidden` utility still wins when the script toggles it off. Unlike
   that one this IS blocking — the appliance can't be saved as an in-store
   purchase — so it reads in the danger colour. */
.store-online-only-msg:not(.hidden) {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--text-xs);
    color: var(--color-danger);
}

/* ── Segmented customer-type selector (radio cards) ─────────────────────── */
.customer-type-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.customer-type-option {
    position: relative;
}

.customer-type-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.customer-type-option label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 1rem 1.125rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.customer-type-option input[type="radio"]:focus-visible + label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.customer-type-option input[type="radio"]:checked + label {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.customer-type-option .icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: 1;
}

.customer-type-option .title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-foreground);
    display: block;
    margin-bottom: 0.15rem;
}

.customer-type-option .hint {
    font-size: 0.75rem;
    color: var(--color-muted);
    display: block;
    line-height: 1.35;
}

/* Geography-disabled rebate methods (Step 2): the input is `disabled` so it
   can't be selected, the row is dimmed, and `.hint` carries the reason from
   sproc_lookup_rebate_methods. */
.customer-type-option.is-unavailable label {
    background: var(--color-light-light);
    border-style: dashed;
    cursor: not-allowed;
    opacity: 0.7;
}
.customer-type-option.is-unavailable .icon,
.customer-type-option.is-unavailable .title {
    color: var(--color-muted);
}

/* ── Program cards (step 2) ─────────────────────────────────────────────── */
.program-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.program-card {
    position: relative;
}

.program-card input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    cursor: pointer;
}

.program-card label {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.875rem 1rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    cursor: pointer;
    min-height: 100%;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.program-card input[type="checkbox"]:focus-visible + label {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.program-card input[type="checkbox"]:checked + label {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
    box-shadow: inset 0 0 0 1px var(--color-primary);
}

.program-card .icon {
    font-size: 1.5rem;
    color: var(--color-primary);
    line-height: 1;
    flex: 0 0 auto;
}

.program-card .title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--color-foreground);
    display: block;
    margin-bottom: 0.1rem;
}

.program-card .rebate {
    font-size: 0.75rem;
    color: var(--color-muted);
    display: block;
}

/* The payment card has a heading but no section-hint, which used to leave the
   derived notice sitting on the h2's 0.25rem — the `.wizard-card > h2` rule now
   gives every hintless heading that 1rem, so the local compensation this note
   carried is gone. */

/* Derived rebate-delivery note (step 2) — leading icon sized to match the
   .tw-alert flex row (icon + message), same treatment as .doc-requirement .icon. */
.rebate-method-note .icon {
    font-size: 1.25rem;
    line-height: 1.5;
    flex: 0 0 auto;
}

/* ── Appliance list (step 3) ────────────────────────────────────────────── */
.appliance-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.appliance-row {
    display: grid;
    grid-template-columns: 2.5rem minmax(0, 1fr) auto;
    gap: 1rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.875rem 1rem;
}

.appliance-row .appliance-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.375rem;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.appliance-row .appliance-meta {
    min-width: 0;
}

.appliance-row .appliance-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: var(--color-foreground);
    margin: 0 0 0.15rem;
    line-height: 1.2;
}

.appliance-row .appliance-detail {
    font-size: 0.8125rem;
    color: var(--color-muted);
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.85rem;
}

.appliance-row .appliance-detail span::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: currentColor;
    margin: 0 0.5rem 0.15rem 0;
    vertical-align: middle;
    opacity: 0.5;
}

.appliance-row .appliance-detail span:first-child::before {
    display: none;
}

.appliance-actions {
    display: flex;
    gap: 0.35rem;
}

.appliance-action {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
    text-decoration: none;
}

.appliance-action:hover,
.appliance-action:focus-visible {
    background: var(--color-primary-light);
    text-decoration: none;
    outline: none;
}

.appliance-action:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.appliance-action--danger {
    color: var(--color-danger);
}

.appliance-action--danger:hover,
.appliance-action--danger:focus-visible {
    background: color-mix(in srgb, var(--color-danger) 12%, transparent);
}

.appliance-action--danger:focus-visible {
    outline-color: var(--color-danger);
}

.appliance-empty {
    border: 1px dashed var(--color-border);
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--color-muted);
    background: #fff;
}

.appliance-empty .icon {
    font-size: 2rem;
    color: var(--color-muted);
    display: block;
    margin-bottom: 0.5rem;
}

/* ── Document upload (step 4) ───────────────────────────────────────────── */
.doc-requirements {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    column-gap: 1.75rem;
    row-gap: 0.65rem;
    margin: 0.25rem 0 0.5rem;
}

.doc-requirement {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    font-size: 0.8125rem;
    color: var(--color-foreground);
}

.doc-requirement .icon {
    color: var(--color-success);
    font-size: 1.05rem;
    flex: 0 0 auto;
    margin-top: 0.05rem;
}

.doc-requirement strong {
    display: block;
    font-size: 0.8125rem;
    line-height: 1.3;
}

.doc-requirement span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    line-height: 1.35;
    margin-top: 0.05rem;
}

.upload-list {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.upload-item {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) auto;
    gap: 0.75rem;
    align-items: center;
    padding: 0.65rem 0.85rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.375rem;
}

.upload-item .file-icon {
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-info-light);
    color: var(--color-info);
    border-radius: 0.375rem;
    font-size: 1.1rem;
}

.upload-item .file-name {
    min-width: 0;
}

.upload-item .file-name strong {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-foreground);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.upload-item .file-name span {
    font-size: 0.6875rem;
    color: var(--color-muted);
}

.upload-item.is-pending {
    background: var(--color-light-light);
}

.upload-item.is-pending .file-icon {
    background: transparent;
}

.upload-item .upload-pending-label {
    font-size: 0.75rem;
    color: var(--color-muted);
    font-style: italic;
}

/* ── Review (step 5) ────────────────────────────────────────────────────── */
.review-section {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    background: var(--color-light-light);
}

.review-section:last-child {
    margin-bottom: 0;
}

.review-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    gap: 0.5rem;
}

.review-head h3 {
    font-family: var(--font-heading);
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: var(--color-foreground);
}

.review-edit {
    font-size: 0.8125rem;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.45rem;
    border-radius: 0.25rem;
}

.review-edit:hover,
.review-edit:focus-visible {
    background: var(--color-primary-light);
    text-decoration: underline;
    outline: none;
}

.review-edit:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.wizard-inline-link {
    color: var(--color-primary);
    text-decoration: underline;
    font-weight: 600;
}

.wizard-inline-link:hover,
.wizard-inline-link:focus-visible {
    color: var(--color-primary-hover);
    text-decoration: underline;
}

.wizard-inline-link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 0.125rem;
}

.review-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.5rem 1.5rem;
}

.review-list dt,
.review-list .k {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--color-muted);
    margin: 0;
}

.review-list dd,
.review-list .v {
    font-size: 0.8125rem;
    color: var(--color-foreground);
    margin: 0.1rem 0 0;
    word-break: break-word;
}

.consent-block {
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    background: #fff;
}

.consent-block legend {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1rem;
    padding: 0;
    margin-bottom: 0.5rem;
}

.consent-block label {
    display: flex;
    gap: 0.55rem;
    align-items: flex-start;
    padding: 0.45rem 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    cursor: pointer;
}

/* ── Sticky wizard action bar ───────────────────────────────────────────── */
.wizard-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.875rem 1.25rem;
}

.wizard-actions .secondary {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.wizard-save-hint {
    font-size: 0.75rem;
    color: var(--color-muted);
}

/* On phones, stack the bar: hint full-width on top, each button full-width
   below. The submitted page packs four buttons in here (Print / Track /
   Browse rebates / Start another) which would otherwise clip. */
@media (max-width: 640px) {
    .wizard-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .wizard-actions .secondary {
        flex-direction: column;
        width: 100%;
    }
    .wizard-actions .secondary > .tw-btn {
        width: 100%;
    }
}

/* ── Skip link ──────────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    background: var(--color-primary);
    color: #fff;
    padding: 0.5rem 0.875rem;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.8125rem;
    text-decoration: none;
    z-index: 200;
    transition: top 0.15s;
}

.skip-link:focus {
    top: 1rem;
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* ── Success / submitted page ───────────────────────────────────────────── */
.submitted-hero-head {
    text-align: center;
    padding: 0.5rem 0 1.5rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
}

.submitted-hero-head .submitted-icon {
    margin: 0 auto 1rem;
}

.submitted-hero-head h2 {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-foreground);
    margin: 0 0 0.5rem;
    line-height: 1.2;
}

.submitted-hero-lead {
    font-size: 0.9375rem;
    color: var(--color-muted);
    line-height: 1.55;
    margin: 0 auto 1.25rem;
    max-width: 34rem;
}

.submitted-hero-head .reference-box {
    max-width: 22rem;
    margin: 0 auto;
    text-align: center;
}

.submitted-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: var(--color-success-light);
    color: var(--color-success);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin-bottom: 1rem;
}

.reference-box {
    background: var(--color-light-light);
    border: 1px dashed var(--color-border);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
}

.reference-box .k {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-muted);
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.reference-box .v {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--color-primary);
    letter-spacing: 0.05em;
}

.next-steps {
    text-align: left;
    margin: 0;
}

.next-steps h2,
.next-steps h3 {
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.next-steps ol {
    margin: 0;
    padding-left: 1.5rem;
    font-size: 0.875rem;
    color: var(--color-foreground);
    list-style: decimal outside;
}

.next-steps li + li {
    margin-top: 0.5rem;
}

.next-steps li::marker {
    color: var(--color-primary);
    font-weight: 700;
}

.submitted-thanks {
    margin: 1.25rem 0 0;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    text-align: center;
    font-style: italic;
    color: var(--color-muted);
    font-size: 0.9375rem;
}

/* Visible tab focus — applied to links and form controls that might not inherit */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* sr-only (for screen-reader only labels) */
.sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ── Application tracker (lookup) ────────────────────────────────────────── */
.tracker-illu {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary-light);
    color: var(--color-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.wizard-row.tracker-row {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Program + program-questions summaries on step 5 and application-summary:
   an explicit two-column grid. The auto-fill default fits three narrow
   columns, which squeezes long question text and leaves the third column
   empty for the short Program rows. */
#review-program-list.review-list,
#program-list.review-list,
#review-questions-list.review-list,
#questions-list.review-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 640px) {
    #review-program-list.review-list,
    #program-list.review-list,
    #review-questions-list.review-list,
    #questions-list.review-list {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Feedback survey + rebate choice on application-summary: one full-width
   column (each question + rating on its own row), with a subtle divider above
   the rebate choice only when it sits beneath a non-empty ratings list. */
#sum-feedback-list.review-list,
#sum-rebate-pref-list.review-list {
    grid-template-columns: minmax(0, 1fr);
}
#sum-feedback-list:not(:empty) + #sum-rebate-pref-list:not(:empty) {
    margin-top: 0.85rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--color-border);
}

/* ── Print: hide chrome, sidebar and interactive controls ─────────────────
   Customers print the application-summary as a record. Strip BCH global
   header/footer, the helper-cards sidebar, action-bar buttons and the
   decision-banner CTA so only the application content prints. */
@media print {
    .global-chrome,
    .site-chrome,
    .wizard-sidebar,
    .wizard-actions,
    .decision-cta {
        display: none !important;
    }

    .wizard-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ── Decision banner (summary page top) ─────────────────────────────────── */
.decision-banner {
    border-radius: 0.625rem;
    padding: 1.5rem 1.75rem;
    margin-bottom: 1.5rem;
    display: grid;
    grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    gap: 1.25rem;
    align-items: center;
    border: 1px solid transparent;
}

.decision-banner .icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.85);
}

.decision-banner .headline {
    font-family: var(--font-heading);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 0.15rem;
}

.decision-banner .subline {
    font-size: 0.875rem;
    margin: 0;
    opacity: 0.9;
}

.decision-banner .badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.6rem;
}

.decision-banner .decision-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.35rem;
    font-size: 0.75rem;
}

/* Status colour variants */
.decision-banner.is-approved {
    background: var(--color-success-light);
    color: #044a28;
    border-color: rgba(4, 106, 56, 0.25);
}
.decision-banner.is-approved .icon { color: var(--color-success); }

.decision-banner.is-review {
    background: var(--color-info-light);
    color: #114a60;
    border-color: rgba(8, 145, 178, 0.25);
}
.decision-banner.is-review .icon { color: var(--color-info); }

.decision-banner.is-action {
    background: var(--color-warning-light);
    color: #7a3f03;
    border-color: rgba(217, 119, 6, 0.3);
}
.decision-banner.is-action .icon { color: var(--color-warning); }

.decision-banner.is-denied {
    background: var(--color-danger-light);
    color: #7a0000;
    border-color: rgba(208, 0, 0, 0.3);
}
.decision-banner.is-denied .icon { color: var(--color-danger); }

@media (max-width: 640px) {
    .decision-banner {
        grid-template-columns: 3rem minmax(0, 1fr);
    }
    .decision-banner .decision-cta {
        grid-column: 1 / -1;
        align-items: flex-start;
    }
}

/* ── Reference line (summary header) ────────────────────────────────────── */
.reference-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
    align-items: center;
    background: var(--color-light-light);
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.75rem 1.25rem;
    margin-bottom: 1.25rem;
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.reference-strip strong {
    color: var(--color-foreground);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.05em;
    font-weight: 700;
}

.reference-strip .divider {
    width: 1px;
    height: 1rem;
    background: var(--color-border);
}

/* ── Timeline (activity / status history) ───────────────────────────────── */
.timeline {
    list-style: none !important;
    padding: 0;
    margin: 0;
    position: relative;
}

.timeline::before {
    content: "";
    position: absolute;
    left: 0.625rem;
    top: 0.25rem;
    bottom: 0.25rem;
    width: 2px;
    background: var(--color-border);
}

.timeline li {
    position: relative;
    padding: 0 0 1.1rem 2rem;
}

.timeline li:last-child {
    padding-bottom: 0;
}

.timeline .t-dot {
    position: absolute;
    left: 0;
    top: 0.15rem;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--color-border);
    color: var(--color-muted);
    font-size: 0.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.timeline li.is-done .t-dot {
    background: var(--color-success);
    border-color: var(--color-success);
    color: #fff;
}

.timeline li.is-current .t-dot {
    background: #fff;
    border-color: var(--color-primary);
    color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.timeline .t-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-foreground);
    margin: 0 0 0.1rem;
    line-height: 1.3;
}

.timeline .t-meta {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: 0;
}

.timeline .t-note {
    font-size: 0.8125rem;
    color: var(--color-foreground);
    margin: 0.3rem 0 0;
    line-height: 1.45;
}

/* ── Product finder (find efficient products) ──────────────────────────── */
.results-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.results-head h2 {
    margin: 0;
}

.results-head .meta {
    font-size: 0.8125rem;
    color: var(--color-muted);
}

.results-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: #fff;
}

.results-table {
    width: 100%;
    min-width: 56rem;
    border-collapse: collapse;
    font-size: 0.8125rem;
}

.results-table thead th {
    background: var(--color-light-light);
    color: var(--color-foreground);
    font-weight: 700;
    text-align: left;
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: bottom;
    font-size: 0.75rem;
    line-height: 1.3;
    white-space: normal;
}

.results-table tbody td {
    padding: 0.75rem 0.875rem;
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
    color: var(--color-foreground);
}

.results-table tbody tr:nth-child(even) td {
    background: var(--color-light-light);
}

.results-table tbody tr:hover td {
    background: var(--color-primary-light);
}

.results-table tbody tr:last-child td {
    border-bottom: 0;
}

.results-table .num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.results-table .brand-model {
    min-width: 10rem;
}

.results-table .brand-model strong {
    display: block;
    font-weight: 700;
    color: var(--color-foreground);
}

.results-table .brand-model span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-muted);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    margin-top: 0.1rem;
}

.results-table .rebate-total {
    font-weight: 700;
    color: var(--color-success);
}

.results-footnote {
    font-size: 0.75rem;
    color: var(--color-muted);
    margin: 0.75rem 0 0;
    line-height: 1.5;
}

.results-footnote em {
    font-style: italic;
}

.results-empty {
    border: 1px dashed var(--color-border);
    border-radius: 0.5rem;
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--color-muted);
    background: #fff;
}

.results-empty .icon {
    font-size: 2.25rem;
    color: var(--color-muted);
    display: block;
    margin-bottom: 0.5rem;
}

/* Read-only cues — dim Edit links and show a subtle "read only" badge */
.readonly-badge {
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    color: var(--color-muted);
    background: var(--color-light);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
}

/* ── Welcome (pre-step-1 landing page) ──────────────────────────────────── */
/* Campaign rebate amounts on the welcome card — appliance left, dollar figure
   right, so the amounts line up without a table. No bullets, so this one does
   not need the preflight list-style fix the lists below do. */
.rebate-amounts {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    font-size: 0.875rem;
    color: var(--color-foreground);
}

.rebate-amounts li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
}

.rebate-amounts li:last-child {
    border-bottom: 0;
}

.rebate-amounts .amount {
    font-weight: 700;
    color: var(--color-primary);
    white-space: nowrap;
}

/* Tailwind preflight strips list styles; re-apply for the welcome page's
   requirement / note lists inside cards. */
.welcome-list {
    list-style: disc outside;
    padding-left: 1.25rem;
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--color-foreground);
    line-height: 1.5;
}

.welcome-list li + li {
    margin-top: 0.45rem;
}

ol.welcome-list {
    list-style: decimal outside;
}

ol.welcome-list > li::marker {
    color: var(--color-primary);
    font-weight: 700;
}

.welcome-list ul {
    list-style: circle outside;
    padding-left: 1.25rem;
    margin: 0.45rem 0 0;
}

.welcome-list ol {
    list-style: lower-alpha outside;
    padding-left: 1.5rem;
    margin: 0.45rem 0 0;
}

.welcome-consent {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

/* Checkbox is a direct child of the option wrapper (not nested inside the
   label) so tw.css's `:has(> .tw-input-error) > .tw-form-error` reveal rule
   fires when wizard.js flags the unchecked required box. */
.consent-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 0.6rem;
    align-items: start;
    font-size: 0.875rem;
}

.consent-option .tw-checkbox {
    margin-top: 0.2rem;
}

.consent-option label {
    cursor: pointer;
    line-height: 1.5;
}

.consent-option .tw-form-text,
.consent-option .tw-form-error {
    grid-column: 2;
}