.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;
}

.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);
}

/* min-height reserves space so the dialog doesn't jump when results load. */
.name-results {
    margin-top: var(--wa-space-xs);
    min-height: 240px;
}

.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 {
    background: var(--wa-color-surface-lowered);
}
.name-result.is-active {
    background: var(--wa-color-brand-fill-quiet);
}
/* 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);
}

/* Match real row geometry — prevents shift on skeleton → result swap. */
.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;
}
/* In-flight: progress bar on list, spinner on clicked row, dim siblings. */
.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; }
}

/* Loading placeholder while selection resolves. */
.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;
}
.building-hero-logo-row {
    display: flex;
    justify-content: flex-start;
}
.building-hero-logo {
    height: 48px;
    max-width: 200px;
    object-fit: contain;
}

/* 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);
}

.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;
}