/*
 * booking_form_v2.css — Conditional booking form engine (BOOKFORM-V2-1).
 *
 * Ported from docs/diagnostics/booking_form_v2_mockup.html. Uses the real
 * brand tokens emitted by templates/components/brand_tokens.html (the
 * mockup's --brand-* names were sample placeholders, per its own comment)
 * — never hardcoded hex. This stylesheet only affects markup that opts
 * into it (.branch / .scope-card / .pill); a legacy form's existing
 * generic question rendering never references these classes, so it is
 * visually unaffected.
 */

/* Branch reveal: grid-rows 0fr -> 1fr. One property, no measured heights.
   Hidden branches stay mounted (not display:none) so their field values
   persist and still serialize when the user switches away (AC6). */
.branch { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 180ms ease-out; }
.branch.open { grid-template-rows: 1fr; }
.branch > div { overflow: hidden; min-height: 0; }
.branch:not(.open) > div { visibility: hidden; } /* hidden branches leave the tab order */
.branch.open > div { visibility: visible; transition: visibility 0s; }

/* Trunk chooser — a required, always-visible single-choice question that
   controls one or more branches (e.g. "What are we painting?"). */
.scope-card {
    display: flex; align-items: center; gap: .75rem; min-height: 3.5rem;
    padding: .875rem 1rem; background: var(--brand-surface); border: 1.5px solid var(--brand-border);
    border-radius: var(--brand-radius); cursor: pointer; transition: border-color 120ms, background 120ms;
}
.scope-card .dot {
    width: 1.25rem; height: 1.25rem; flex: none; border-radius: 9999px;
    border: 2px solid var(--brand-border); transition: all 120ms;
}
input:checked + .scope-card { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
input:checked + .scope-card .dot {
    border-color: var(--brand-primary); background: var(--brand-primary);
    box-shadow: inset 0 0 0 3.5px var(--brand-surface);
}
input:focus-visible + .scope-card { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* BOOKFORM-V2-CHECKED-STATE-1: state-driven twin of the two rules above,
   for option rows whose input isn't guaranteed an adjacent sibling of the
   card (the generic renderer nests input type inside `<template x-if>`).
   Same visual grammar, applied via an explicit :class binding instead of
   the sibling combinator. */
.scope-card.selected { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); }
.scope-card.selected .dot {
    border-color: var(--brand-primary); background: var(--brand-primary);
    box-shadow: inset 0 0 0 3.5px var(--brand-surface);
}

/* Branch-member choice options — tap pills. */
.pill {
    display: flex; align-items: center; justify-content: center; min-height: 3rem;
    padding: .625rem .875rem; background: var(--brand-surface); border: 1.5px solid var(--brand-border);
    border-radius: calc(var(--brand-radius) - 2px); cursor: pointer; font-size: .9375rem;
    text-align: center; transition: border-color 120ms, background 120ms;
}
input:checked + .pill { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); font-weight: 600; }
input:focus-visible + .pill { outline: 2px solid var(--brand-primary); outline-offset: 2px; }

/* BOOKFORM-V2-CHECKED-STATE-1: state-driven twin of the rule above — see
   .scope-card.selected comment. */
.pill.selected { border-color: var(--brand-primary); background: color-mix(in srgb, var(--brand-primary) 8%, transparent); font-weight: 600; }

.pl-sub-label { display: block; font-size: .8125rem; font-weight: 400; color: var(--brand-text-muted); margin-top: .125rem; }

.pl-badge {
    font-size: .6875rem; font-weight: 700; padding: .125rem .5rem; border-radius: 9999px;
    background: var(--brand-primary); color: var(--brand-on-primary); white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
    .branch, .scope-card, .pill { transition: none; }
}