/* Brand creator (start-v2). Two-step dialog: Selection → Verify. Tier classes
   (.tier-recognized / .tier-resolving / .tier-located / .tier-named) are
   applied to the outer slot/shell and drive visual treatment. See
   `labels/routes/wizard.py` module docstring for the tier contract. */

.creator-launch {
    max-width: 600px;
    margin: var(--wa-space-3xl) auto;
    padding: 0 var(--wa-space-l);
    text-align: center;
}
.creator-header h1 {
    font-size: var(--wa-font-size-2xl);
    margin: 0 0 var(--wa-space-2xs);
}
.creator-subtitle {
    color: var(--wa-color-text-quiet);
    margin: 0 0 var(--wa-space-l);
    font-size: var(--wa-font-size-m);
}

#creator-dialog-selection::part(body),
#creator-dialog-verify::part(body) {
    padding: var(--wa-space-m) var(--wa-space-l) var(--wa-space-s);
}

/* The poll element is an invisible hx-trigger host — display:contents
   removes its box so wa-stack's gap doesn't reserve space for it
   after the Add Brand button. */
#resolving-poll {
    display: contents;
}

/* No card-style frame around the search field — claim the full dialog
   width for results. Selected mode just toggles visibility on
   already-rendered children: the input keeps its full HTMX search
   bindings and stays editable, so typing in the selected state can drop
   the selection client-side without a swap (start_v2.js handles it). */
.creator-fields-frame--selected .creator-fields {
    --gap: var(--wa-space-2xs);
}
.creator-fields-frame--selected .field-spinner,
.creator-fields-frame--selected .gmaps-end-badge,
.creator-fields-frame--selected .gmaps-attribution-mobile,
.creator-fields-frame--selected .name-results,
.creator-fields-frame--selected .field-hints {
    display: none;
}
.creator-field-clear {
    --wa-color-neutral-on-quiet: var(--wa-color-text-quiet);
}

.gmaps-end-badge {
    height: 14px;
    width: auto;
    display: inline-block;
    margin-right: var(--wa-space-2xs);
    opacity: 0.85;
}
.gmaps-end-badge--dark { display: none; }
.wa-dark .gmaps-end-badge--light { display: none; }
.wa-dark .gmaps-end-badge--dark { display: inline-block; }

.gmaps-attribution-mobile {
    display: none;
    justify-content: flex-end;
    margin-top: var(--wa-space-2xs);
    padding-right: var(--wa-space-2xs);
}
.gmaps-attribution-img {
    height: 14px;
    width: auto;
    opacity: 0.85;
}
.gmaps-attribution-img--dark { display: none; }
.wa-dark .gmaps-attribution-img--light { display: none; }
.wa-dark .gmaps-attribution-img--dark { display: inline-block; }

@media (max-width: 600px) {
    .gmaps-end-badge--light,
    .gmaps-end-badge--dark,
    .wa-dark .gmaps-end-badge--light,
    .wa-dark .gmaps-end-badge--dark { display: none; }
    .gmaps-attribution-mobile { display: flex; }
}

.field-spinner { --track-width: 2px; }

.field-hints {
    margin-top: var(--wa-space-xs);
}
/* Body-text size + normal color so users read the two-path guidance as
   primary copy. The bolded prompts mark each path. */
.field-hint {
    margin: 0;
    font-size: var(--wa-font-size-m);
    color: var(--wa-color-text-normal);
    line-height: var(--wa-line-height-normal);
}
.field-hint strong {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-bold);
}

/* Reserve dropdown height up front so the dialog doesn't grow vertically
   the moment a user types and results land. Static skeletons fill this
   space on initial open; typing flips them to animated; HTMX response
   replaces them with the real list. The dialog stretches downward when
   more than ~3 results land — no internal scroll. */
.name-results {
    margin-top: var(--wa-space-xs);
    min-height: 240px;
}

/* No internal scroll — the dialog stretches when there are more matches.
   The min-height on .name-results keeps the panel from collapsing when
   the user has typed but results are still in flight. */
.name-result-list {
    display: flex;
    flex-direction: column;
    background: var(--wa-color-surface-raised);
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    box-shadow: var(--wa-shadow-m);
    overflow: hidden;
}
.name-result {
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
    padding: var(--wa-space-2xs) var(--wa-space-m);
    color: var(--wa-color-text-normal);
    cursor: pointer;
    border-bottom: 1px solid var(--wa-color-surface-border);
    outline: none;
}
.name-result:last-child { border-bottom: none; }
.name-result:hover,
.name-result:focus-visible,
.name-result.is-active {
    background: var(--wa-color-surface-lowered);
}
/* Wider-than-tall container — most logos are horizontal wordmarks; this
   gives them room to render at full width without forcing a square crop.
   Square or tall logos still letterbox cleanly via object-fit: contain. */
.name-result-icon {
    width: 128px;
    height: 56px;
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-neutral-fill-quiet);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: var(--wa-color-text-normal);
}
.name-result-icon img { width: 100%; height: 100%; object-fit: contain; }
.name-result-icon wa-icon {
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-brand-fill-loud);
}
.name-result-body { flex: 1; min-width: 0; }
.name-result-name {
    font-weight: var(--wa-font-weight-bold);
    font-size: var(--wa-font-size-l);
    line-height: var(--wa-line-height-condensed);
}
.name-result-name.brand-color {
    color: var(--wa-color-brand-fill-loud);
}
.name-result-sub {
    display: flex;
    align-items: center;
    gap: var(--wa-space-2xs);
    margin-top: var(--wa-space-3xs);
    font-size: var(--wa-font-size-m);
    color: var(--wa-color-text-quiet);
}
.name-result-sub wa-icon { font-size: var(--wa-font-size-m); }
.name-result-sub.with-domain { color: var(--wa-color-brand-fill-loud); }
.name-result-sub .dot { color: var(--wa-color-text-quiet); }
.name-result-fallback {
    background: var(--wa-color-surface-lowered);
    border-top: 1px solid var(--wa-color-surface-border);
}

/* Zero-results notice — sits above the always-present "continue anyway"
   fallback row. Quieter visual weight than a real result. */
.name-result-empty {
    display: flex;
    align-items: flex-start;
    gap: var(--wa-space-m);
    padding: var(--wa-space-m);
    background: var(--wa-color-warning-fill-quiet);
    color: var(--wa-color-text-normal);
    border-bottom: 1px solid var(--wa-color-surface-border);
}
.name-result-empty wa-icon {
    font-size: var(--wa-font-size-l);
    color: var(--wa-color-warning-border-loud);
    flex-shrink: 0;
    margin-top: 2px;
}
.name-result-empty-title {
    font-weight: var(--wa-font-weight-semibold);
    font-size: var(--wa-font-size-m);
    line-height: var(--wa-line-height-condensed);
}
.name-result-empty-sub {
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    margin-top: var(--wa-space-3xs);
}
.name-result-empty code {
    font-family: var(--wa-font-family-code);
    font-size: 0.92em;
    background: var(--wa-color-surface-default);
    border-radius: var(--wa-border-radius-s);
    padding: 0 var(--wa-space-3xs);
}

/* Skeleton rows (start_v2.js injects these on every keystroke). Match the
   real-result-row geometry so the swap from skeleton → result doesn't
   shift the dialog. */
.name-result-list--skeleton .name-result-skeleton {
    cursor: default;
    pointer-events: none;
}
/* Override the in-flight sibling-dim from .name-result-list.htmx-request —
   skeleton rows are already abstract; dimming them while the real request
   lands removes the only visual the user has. */
.name-result-list--skeleton.htmx-request .name-result-skeleton {
    opacity: 1;
}
.name-result-skeleton .skel-icon {
    width: 128px;
    height: 56px;
    flex-shrink: 0;
}
.name-result-skeleton .skel-icon::part(indicator) {
    border-radius: var(--wa-border-radius-m);
}
.name-result-skeleton .name-result-body {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}
.name-result-skeleton .skel-name {
    width: 55%;
    height: 1.1em;
}
.name-result-skeleton .skel-sub {
    width: 35%;
    height: 0.95em;
}
/* While /select is in flight: a top progress bar on the dropdown, a
   brighter spinner on the clicked row, and dimmed siblings. Keeps a
   clear "something's happening" signal even for 1–2s lookups. */
.name-result-list {
    position: relative;
}
.name-result-list.htmx-request::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--wa-color-brand-fill-loud) 50%,
        transparent 100%
    );
    background-size: 40% 100%;
    background-repeat: no-repeat;
    animation: name-result-bar-slide 1.1s linear infinite;
    z-index: 1;
    pointer-events: none;
}
.name-result-list.htmx-request .name-result:not(.htmx-request) {
    opacity: 0.4;
    pointer-events: none;
}
.name-result.htmx-request {
    background: var(--wa-color-surface-lowered);
    cursor: wait;
}
.name-result.htmx-request::after {
    content: '';
    width: 18px;
    height: 18px;
    margin-left: auto;
    border: 2px solid var(--wa-color-brand-fill-loud);
    border-top-color: transparent;
    border-radius: 50%;
    animation: name-result-spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes name-result-spin {
    to { transform: rotate(360deg); }
}
@keyframes name-result-bar-slide {
    0%   { background-position: -40% 0; }
    100% { background-position: 140% 0; }
}

/* Detail slot loading placeholder: shows while /select is resolving so
   the user sees activity in the destination area, not just on the row. */
.detail-card-slot.htmx-request {
    display: flex;
    min-height: 120px;
    align-items: center;
    justify-content: center;
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-l);
}
.detail-card-slot.htmx-request::before {
    content: 'Looking this up…';
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}
.detail-card-slot.htmx-request::after {
    content: '';
    width: 18px;
    height: 18px;
    margin-left: var(--wa-space-s);
    border: 2px solid var(--wa-color-brand-fill-loud);
    border-top-color: transparent;
    border-radius: 50%;
    animation: name-result-spin 0.6s linear infinite;
    flex-shrink: 0;
}

.detail-card-slot {
    min-height: 0;
}
.detail-card-slot:not(.is-filled) {
    display: none;
}

/* Tiered detail card: Recognized + Resolving both get the brand-color
   takeover (they both have a logo + primary color). Located + Named get the
   neutral surface because they have no brand color. */
.detail-card {
    position: relative;
    display: block;
}
.tier-recognized .detail-card,
.tier-resolving .detail-card {
    background: var(--brand-primary);
    color: var(--card-fg, #ffffff);
}
.tier-located .detail-card,
.tier-named .detail-card {
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
}
.detail-card-helper {
    margin: 0;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-quiet);
    font-style: italic;
}
.detail-card::part(body) {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
}
.detail-card-close {
    position: absolute;
    top: var(--wa-space-2xs);
    right: var(--wa-space-2xs);
    --wa-color-neutral-on-quiet: var(--card-fg);
    color: var(--card-fg);
}
/* Vertically centered confirmation: logo on top, name + URL stacked
   below. Reads as a single "is this you?" portrait. */
.detail-card-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--wa-space-s);
}
.detail-card-logo {
    height: 100px;
    max-width: 250px;
    object-fit: contain;
}
.detail-card-title {
    min-width: 0;
}
.detail-card-name {
    font-size: var(--wa-font-size-xl);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
}
.detail-card-meta {
    font-size: var(--wa-font-size-s);
    opacity: 0.85;
    margin-top: var(--wa-space-3xs);
}
.detail-card-facts {
    font-size: var(--wa-font-size-s);
    opacity: 0.92;
}
.detail-card-fact {
    display: flex;
    align-items: center;
    gap: var(--wa-space-xs);
}
.detail-card-fact wa-icon {
    font-size: var(--wa-font-size-xs);
    opacity: 0.75;
}
.creator-actions {
    margin-top: var(--wa-space-s);
}

/* Verify/Building step. Recognized + Resolving get the brand-color hero;
   Located + Named fall through to the neutral default. */
.building-hero {
    border-radius: var(--wa-border-radius-l);
    padding: var(--wa-space-m) var(--wa-space-l);
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
    background: var(--wa-color-surface-raised);
    color: var(--wa-color-text-normal);
}
.processing-shell.tier-recognized .building-hero,
.processing-shell.tier-resolving .building-hero {
    background: var(--brand-primary, var(--wa-color-brand-fill-loud));
    color: var(--card-fg, #ffffff);
}
.building-hero-body {
    display: flex;
    align-items: center;
    gap: var(--wa-space-m);
}
.building-hero-logo {
    height: 40px;
    max-width: 160px;
    object-fit: contain;
    flex-shrink: 0;
}
.building-hero-title {
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
    flex: 1;
    min-width: 0;
}

.verify-title {
    margin: 0;
    font-size: var(--wa-font-size-l);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
}
.verify-subtitle {
    margin: 0;
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-s);
}

/* Verify main grid — mobile stacks preview-then-fields; desktop places
   preview on the right column and fields on the left. The preview sticks
   to the top of its column so it stays visible as the user scrolls the
   (potentially long) form. */
.verify-main {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-m);
}
.verify-preview-col {
    min-width: 0;
}
@media (min-width: 720px) {
    .verify-main {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
        grid-template-areas: "fields preview";
        gap: var(--wa-space-l);
        align-items: start;
    }
    .verify-main .verify-preview-col {
        grid-area: preview;
        position: sticky;
        top: var(--wa-space-s);
    }
    .verify-main .verify-fields {
        grid-area: fields;
    }
}

.verify-address-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--wa-space-xs);
}
.verify-address-row-minimal {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    gap: var(--wa-space-xs);
}

/* Collapsible profile sections (address, phone). All inputs are
   form-included regardless of open/closed state. */
wa-details.verify-section {
    border: 1px solid var(--wa-color-surface-border);
    border-radius: var(--wa-border-radius-m);
    background: var(--wa-color-surface-default);
    overflow: hidden;
}
/* Hide wa-details' built-in chevron — .verify-section-toggle is our
   filled/empty indicator and serves as the affordance. */
wa-details.verify-section::part(icon) {
    display: none;
}
wa-details.verify-section::part(summary) {
    padding: 0;
}
.verify-section-summary {
    display: flex;
    align-items: center;
    gap: var(--wa-space-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    cursor: pointer;
    list-style: none;
    font-size: var(--wa-font-size-s);
    user-select: none;
}
wa-details.verify-section:hover .verify-section-summary {
    background: var(--wa-color-surface-lowered);
}
.verify-section-icon {
    color: var(--wa-color-text-quiet);
    flex-shrink: 0;
    font-size: var(--wa-font-size-s);
}
.verify-section-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.verify-section-value {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: var(--wa-line-height-condensed);
}
.verify-section-prompt {
    color: var(--wa-color-text-normal);
    font-weight: var(--wa-font-weight-semibold);
    line-height: var(--wa-line-height-condensed);
}
.verify-section-caption {
    font-size: var(--wa-font-size-2xs);
    color: var(--wa-color-text-quiet);
    line-height: var(--wa-line-height-normal);
}
.verify-optional {
    color: var(--wa-color-text-quiet);
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-normal);
}
.verify-section-toggle {
    color: var(--wa-color-brand-fill-loud);
    font-size: var(--wa-font-size-2xs);
    font-weight: var(--wa-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
}
wa-details.verify-section[open] .verify-section-summary {
    border-bottom: 1px solid var(--wa-color-surface-border);
    background: var(--wa-color-surface-lowered);
}
.verify-section-body {
    padding: var(--wa-space-m);
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-s);
}
.verify-color-field {
    display: flex;
    flex-direction: column;
    gap: var(--wa-space-2xs);
}
.verify-color-label {
    font-size: var(--wa-font-size-s);
    font-weight: var(--wa-font-weight-semibold);
    color: var(--wa-color-text-normal);
}
.verify-color-hint {
    margin: 0;
    font-size: var(--wa-font-size-2xs);
    color: var(--wa-color-text-quiet);
}

/* Note: .pending-brand-card styles live in labels-theme.css so they
   load on every page (via base.html). They'd be broken here —
   start_v2.css is only loaded on /start. */
.building-intro p {
    margin: 0;
    font-size: var(--wa-font-size-s);
    color: var(--wa-color-text-normal);
}
.building-preview {
    background: var(--wa-color-surface-lowered);
    border-radius: var(--wa-border-radius-m);
    padding: var(--wa-space-m);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
}
.building-tiles {
    display: flex;
    flex-direction: row;
    gap: var(--wa-space-m);
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}
.building-tile {
    background: var(--wa-color-surface-raised);
    border-radius: var(--wa-border-radius-s);
    padding: var(--wa-space-s) var(--wa-space-m);
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 1 260px;
}
.building-tile svg {
    width: 100%;
    height: auto;
    max-height: 60px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.15));
}

.processing-shell {
    padding: var(--wa-space-l) 0;
}