/* =====================================================================
   Report-building vignette (.rbv)
   ---------------------------------------------------------------------
   Shared by the two places a homeowner waits for their evidence packet:
   the protest wizard's post-payment step and the report viewer modal.
   Both surfaces import this file so the moment can never drift into two
   different designs the way the report itself once did.

   The vignette is a miniature of the report assembling itself: the
   masthead sets, the evidence rules ink in, the comparison bars grow,
   and the money-green recommended-value bar lands last — the same
   reading order the real chart uses. Stage gating comes from
   [data-stage] on .rbv (report-building.js), so the drawing tracks the
   work actually happening rather than decorating a timer.

   Every var() carries a literal fallback: layout.html loads the wizard
   without tokens.css, so the vignette must hold its colors on its own.
   ===================================================================== */

.rbv {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.35rem;
    max-width: 26rem;
    margin: 0 auto;
    padding: 2.25rem 1.25rem;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ── The sheet: a miniature of the report page ──────────────────── */
.rbv-sheet {
    display: flex;
    flex-direction: column;
    width: 132px;
    aspect-ratio: 8.5 / 11;
    overflow: hidden;
    background: var(--warm-50, var(--surface));
    border: 1px solid var(--border-hairline, var(--border-hairline));
    border-radius: 6px;
    box-shadow: var(--shadow-lg, 0 12px 24px -6px rgba(26, 23, 20, 0.10));
}

.rbv-masthead {
    flex: 0 0 27%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0 9px;
    background: var(--navy-900, var(--navy-900));
}

.rbv-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 9px 11px;
}

/* A line of set type. Grows from nothing to its measure — the page
   being printed, not a skeleton placeholder pulsing in place.

   The line reserves its full width in layout and reveals with scaleX,
   so eleven of these animating at once composite on the GPU instead of
   re-running layout every frame. */
.rbv-ink {
    width: var(--w);
    height: 3px;
    border-radius: 999px;
    background: var(--warm-200, var(--border-hairline));
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 90ms);
}

.rbv-masthead .rbv-ink {
    opacity: 0.92;
}

.rbv-ink--title {
    height: 5px;
}

.rbv-ink--heading {
    height: 4px;
    background: var(--warm-500, var(--text-muted));
}

/* Opens a new paragraph on the page. */
.rbv-ink--para {
    margin-top: 4px;
}

/* ── Comparison chart: the report's own bar order ───────────────── */
.rbv-chart {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: auto;
}

.rbv-bar {
    height: 6px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--warm-100, var(--surface-sunken));
}

.rbv-bar-fill {
    display: block;
    width: var(--w);
    height: 100%;
    border-radius: inherit;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 1000ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: calc(var(--i, 0) * 130ms);
}

/* Subject property reads as risk, comparables as navy, and the
   recommended value in money-green — the one green in the vignette,
   because it is the one figure the homeowner keeps. */
.rbv-bar--subject .rbv-bar-fill { background: var(--state-error, var(--state-error)); }
.rbv-bar--comp .rbv-bar-fill    { background: var(--brand, var(--brand)); }
.rbv-bar--result .rbv-bar-fill  { background: var(--money, var(--money)); }

/* ── Stage gating ───────────────────────────────────────────────── */
.rbv[data-stage] .rbv-masthead .rbv-ink { transform: scaleX(1); }

.rbv:is([data-stage="2"], [data-stage="3"], [data-stage="4"]) .rbv-body .rbv-ink {
    transform: scaleX(1);
}

.rbv:is([data-stage="3"], [data-stage="4"]) :is(.rbv-bar--subject, .rbv-bar--comp) .rbv-bar-fill {
    transform: scaleX(1);
}

.rbv[data-stage="4"] .rbv-bar--result .rbv-bar-fill { transform: scaleX(1); }

/* ── Indeterminate progress: honest "still working", no fake % ──── */
.rbv-progress {
    position: relative;
    width: 100%;
    max-width: 190px;
    height: 2px;
    overflow: hidden;
    border-radius: 999px;
    background: var(--warm-200, var(--border-hairline));
}

.rbv-progress::after {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 38%;
    border-radius: inherit;
    background: var(--brand, var(--brand));
    animation: rbv-sweep 1.7s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes rbv-sweep {
    from { transform: translateX(-105%); }
    to   { transform: translateX(268%); }
}

/* ── Copy ───────────────────────────────────────────────────────── */
.rbv-title {
    margin: 0;
    font-family: 'Piazzolla', Georgia, 'Times New Roman', serif;
    font-size: 1.0625rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--navy-900, var(--navy-900));
}

.rbv-ledger {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.8rem 0 0;
    padding: 0;
    list-style: none;
    text-align: left;
}

.rbv-step {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--text-muted, var(--text-muted));
    transition: color 400ms ease;
}

.rbv-step[data-state="done"]    { color: var(--text-body, var(--text-body)); }
.rbv-step[data-state="current"] { color: var(--navy-900, var(--navy-900)); font-weight: 600; }

/* Reassurance note for a slow render — separate from the step ledger above
   since it isn't a pipeline stage, just a "this is normal" signal. */
.rbv-note {
    margin: 0.65rem 0 0;
    font-size: 0.78rem;
    color: var(--text-muted, var(--text-muted));
    font-style: italic;
}

/* Sits on the first line's optical center so a step that wraps to two
   lines keeps its marker beside the line it belongs to. */
.rbv-dot {
    flex: none;
    display: grid;
    place-items: center;
    width: 14px;
    height: 14px;
    margin-top: 1px;
    border: 1.5px solid var(--warm-200, var(--border-hairline));
    border-radius: 999px;
    transition: border-color 400ms ease, background-color 400ms ease, box-shadow 400ms ease;
}

.rbv-step[data-state="current"] .rbv-dot {
    border-color: var(--brand, var(--brand));
    box-shadow: 0 0 0 3px var(--brand-subtle, var(--brand-subtle));
}

/* Completed steps mark in navy, never green: green is reserved for
   money the homeowner keeps, not for generic success. */
.rbv-step[data-state="done"] .rbv-dot {
    border-color: var(--brand, var(--brand));
    background: var(--brand, var(--brand));
}

.rbv-check {
    width: 8px;
    height: 8px;
    opacity: 0;
    stroke: var(--warm-50, var(--surface));
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
    transition: opacity 250ms ease;
}

.rbv-step[data-state="done"] .rbv-check { opacity: 1; }

.rbv-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 480px) {
    .rbv { gap: 1.1rem; padding: 1.75rem 1rem; }
    .rbv-sheet { width: 112px; }
    .rbv-title { font-size: 1rem; }
}

/* Reduced motion: the page arrives already set, the ledger still
   advances (changing text is not motion), and the sweep holds still. */
@media (prefers-reduced-motion: reduce) {
    .rbv-ink,
    .rbv-bar-fill {
        transform: none;
        transition: none;
    }

    .rbv-progress::after {
        width: 100%;
        opacity: 0.5;
        animation: none;
    }

    .rbv-step,
    .rbv-dot,
    .rbv-check {
        transition: none;
    }
}