/* ════════════════════════════════════════════════════════════
   Smart Match — 3-step in-tab wizard (single unified card)
   Uses sb-shared.css tokens + gradient-border-subtle card.
   ════════════════════════════════════════════════════════════ */

.sm-wiz {
    /* One card. No max-width — fills the dash-tab-content width.
       Solid translucent fill (70% card-fill) + 4px backdrop-filter blur.
       Gradient border applied via ::before pseudo-element (masked ring)
       so it doesn't bleed under the translucent fill like a border-box
       gradient would. Matches .sb-gradient-border from sb-shared.css. */
    position: relative;
    border-radius: var(--sb-radius-lg, 12px);
    /* overflow visible so custom-select panels can escape the card */
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--sb-card-fill) 70%, transparent);
    border: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: sm-wiz-in 280ms ease-out, sm-wiz-breathe 4.5s ease-in-out infinite 280ms;
}

.sm-wiz::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: var(--sb-gradient);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
}

/* Sections sit above the ::before border ring */
.sm-wiz-top,
.sm-wiz-body,
.sm-wiz-foot { position: relative; z-index: 0; }

/* Custom-select panels (gx-forms.js) must float above the breathing
   glow shadow, the card border ring, the dashboard subnav, etc. */
.sm-wiz .sb-custom-select.open .sb-custom-select-options,
.sm-wiz .sb-custom-datepicker.open .sb-datepicker-panel,
.sm-wiz .sb-custom-timepicker.open .sb-timepicker-panel { z-index: 200; }

@keyframes sm-wiz-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes sm-wiz-breathe {
    0%, 100% {
        box-shadow:
            0 0 14px color-mix(in srgb, var(--sb-ice) 10%, transparent),
            0 0 28px color-mix(in srgb, var(--sb-violet) 6%, transparent);
    }
    50% {
        box-shadow:
            0 0 22px color-mix(in srgb, var(--sb-ice) 22%, transparent),
            0 0 44px color-mix(in srgb, var(--sb-violet) 12%, transparent);
    }
}

/* Intro block uses .featured-row-header + .sb-waveform-sep from
   sb-shared.css to match dashboard Overview — no local overrides needed. */

/* ── Inline calendar (Step 1 — When) ────────────────────────── */
.sm-cal {
    max-width: 560px;
    margin: 0 auto;
}

.sm-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-sm);
    margin-bottom: var(--sb-space-sm);
}

.sm-cal-month-label {
    flex: 1;
    text-align: center;
    color: var(--sb-text);
}

.sm-cal-legend {
    margin-top: var(--sb-space-sm);
    justify-content: center;
}

/* Selected day — gradient border + glow (overrides .avail-available hover) */
.sm-wiz .month-grid-day.sm-cal-selected,
.sm-wiz .month-grid-day.sm-cal-selected:hover {
    background:
        linear-gradient(
            color-mix(in srgb, var(--sb-violet) 20%, var(--sb-card-fill)),
            color-mix(in srgb, var(--sb-violet) 20%, var(--sb-card-fill))
        ) padding-box,
        var(--sb-gradient) border-box;
    border: 1px solid transparent;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sb-violet) 30%, transparent),
                0 4px 16px color-mix(in srgb, var(--sb-violet) 22%, transparent);
    color: var(--sb-text);
}
.sm-wiz .month-grid-day.sm-cal-selected .month-grid-day-status {
    color: var(--sb-violet);
    font-weight: 600;
}

/* Past days — muted and non-interactive */
.sm-wiz .month-grid-day.sm-cal-past {
    opacity: 0.3;
    cursor: not-allowed;
    background: transparent;
    border-color: color-mix(in srgb, var(--sb-border) 50%, transparent);
}
.sm-wiz .month-grid-day.sm-cal-past:hover {
    background: transparent;
    border-color: color-mix(in srgb, var(--sb-border) 50%, transparent);
}

/* Today marker — soft ice ring */
.sm-wiz .month-grid-day.today:not(.sm-cal-selected):not(.sm-cal-past) {
    border-color: var(--sb-ice);
}

.sm-cal-footer {
    margin-top: var(--sb-space-md);
    padding-top: var(--sb-space-sm);
    border-top: 1px solid color-mix(in srgb, var(--sb-border) 50%, transparent);
    font-size: var(--sb-text-sm);
    color: var(--sb-text-muted);
    text-align: center;
}

.sm-cal-picked strong {
    color: var(--sb-text);
    font-weight: 600;
}

/* ── Top section: header + stepper on one surface ──────────── */
.sm-wiz-top {
    padding: var(--sb-space-lg) var(--sb-space-lg) var(--sb-space-md);
    border-bottom: 1px solid color-mix(in srgb, var(--sb-border) 70%, transparent);
    background: transparent;
}

.sm-wiz-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sb-space-md);
}

.sm-wiz-header-text { min-width: 0; }

.sm-wiz-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    margin-bottom: 8px;
}

.sm-wiz-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--sb-violet);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sb-violet) 22%, transparent);
    animation: sm-pulse 2s ease-in-out infinite;
}

@keyframes sm-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.8); }
}

.sm-wiz-title {
    margin: 0;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    background: var(--sb-gradient-text);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* ── Cap pill ──────────────────────────────────────────────── */
.sm-cap-pill {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--sb-text-muted);
    padding: 8px 14px;
    border-radius: 999px;
    background: linear-gradient(var(--sb-card-fill), var(--sb-card-fill)) padding-box,
        linear-gradient(135deg,
            color-mix(in srgb, var(--sb-ice) 30%, transparent),
            color-mix(in srgb, var(--sb-violet) 30%, transparent)) border-box;
    border: 1px solid transparent;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

/* ── Stepper — station cards + chevron connectors ──────────── */
.sm-stepper {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 -4px;
}

.sm-stepper-station {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--sb-radius);
    border: 1px solid var(--sb-border);
    background: color-mix(in srgb, var(--sb-card-fill) 50%, transparent);
    cursor: pointer;
    transition: all var(--sb-transition);
    outline: none;
}

.sm-stepper-station:focus-visible {
    border-color: var(--sb-ice);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sb-ice) 30%, transparent);
}

.sm-stepper-station.pending {
    opacity: 0.62;
    cursor: default;
    background: transparent;
}
.sm-stepper-station.pending:hover {
    border-color: var(--sb-border);
}

.sm-stepper-station.done {
    border-color: color-mix(in srgb, var(--sb-ice) 35%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-card-fill) 65%, transparent);
}

.sm-stepper-station.done:hover {
    border-color: var(--sb-ice);
}

.sm-stepper-station.active {
    border-color: color-mix(in srgb, var(--sb-violet) 55%, var(--sb-border));
    background: color-mix(in srgb, var(--sb-card-fill) 80%, transparent);
}

/* Badge — no box, just a large stylised numeral (or checkmark) */
.sm-stepper-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 42px;
    min-height: 42px;
    color: var(--sb-text-muted);
    transition: color var(--sb-transition), filter var(--sb-transition);
    line-height: 1;
}

.sm-stepper-num {
    font-family: 'Rajdhani', var(--sb-font-family, system-ui), sans-serif;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}

.sm-stepper-station.active .sm-stepper-badge {
    color: transparent;
    background: linear-gradient(135deg, var(--sb-ice), var(--sb-violet));
    -webkit-background-clip: text;
    background-clip: text;
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--sb-violet) 45%, transparent));
}

.sm-stepper-station.done .sm-stepper-badge {
    color: var(--sb-ice);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--sb-ice) 35%, transparent));
}

.sm-stepper-station.done .sm-stepper-badge svg {
    width: 26px;
    height: 26px;
}

/* Info (label + sublabel) */
.sm-stepper-info { min-width: 0; }

.sm-stepper-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-text-muted);
    line-height: 1.1;
}

.sm-stepper-sublabel {
    font-size: 0.78rem;
    color: var(--sb-text-secondary);
    margin-top: 4px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sm-stepper-station.active .sm-stepper-label { color: var(--sb-text); }
.sm-stepper-station.done   .sm-stepper-label { color: var(--sb-ice); }
.sm-stepper-station.active .sm-stepper-sublabel { color: var(--sb-text); }

/* Chevron connectors */
.sm-stepper-chev {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--sb-border);
    padding: 0 4px;
    flex-shrink: 0;
}

/* Chevron colour reflects completion of the left-hand station */
.sm-stepper-station.done + .sm-stepper-chev {
    color: var(--sb-ice);
}
.sm-stepper-station.active + .sm-stepper-chev {
    color: color-mix(in srgb, var(--sb-violet) 70%, transparent);
}

/* ── Body ───────────────────────────────────────────────────── */
.sm-wiz-body {
    padding: var(--sb-space-lg);
    background: transparent;
    animation: sm-step-in 240ms ease-out;
}

@keyframes sm-step-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Form fields ────────────────────────────────────────────── */
.sm-wiz-form {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-md);
    max-width: 560px;
    margin: 0 auto;          /* centre step content horizontally */
}

.sm-checks {
    display: flex;
    flex-direction: column;
    gap: var(--sb-space-sm);
    margin-top: 4px;
}

.sm-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-field-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-text-secondary);
}

.sm-field-help {
    margin: 2px 0 0;
    font-size: 0.78rem;
    color: var(--sb-text-muted);
    line-height: 1.5;
}

.sm-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sb-space-md);
}

.sm-pa-check {
    margin-top: 4px;
    padding: 12px 14px;
    background: color-mix(in srgb, var(--sb-ice) 4%, transparent);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    transition: border-color var(--sb-transition), background var(--sb-transition);
}
.sm-pa-check:hover {
    border-color: var(--sb-ice);
    background: color-mix(in srgb, var(--sb-ice) 7%, transparent);
}

.sm-wiz .sb-input:focus,
.sm-wiz .sb-select:focus,
.sm-wiz .sb-custom-select-trigger:focus,
.sm-wiz .sb-datepicker-trigger:focus {
    border-color: var(--sb-violet);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--sb-violet) 18%, transparent);
}

/* ── Footer ─────────────────────────────────────────────────── */
.sm-wiz-foot {
    padding: var(--sb-space-md) var(--sb-space-lg);
    border-top: 1px solid color-mix(in srgb, var(--sb-border) 70%, transparent);
    background: transparent;
}

.sm-wiz-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sb-space-md);
}

.sm-wiz-footer-meta {
    flex: 1 1 auto;
    text-align: center;
    font-size: 0.8rem;
    color: var(--sb-text-muted);
    font-weight: 500;
}

.sm-send-btn {
    min-width: 180px;
}

.sm-wiz-footer .sb-btn[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Back button — full-ice border on hover */
.sm-wiz-footer .sb-btn-ghost:not([disabled]):hover {
    border-color: var(--sb-ice);
    color: var(--sb-ice);
    box-shadow: 0 0 0 1px var(--sb-ice), 0 0 12px color-mix(in srgb, var(--sb-ice) 30%, transparent);
}

/* ── Matches step ───────────────────────────────────────────── */
.sm-cap-hint {
    margin-bottom: var(--sb-space-md);
    padding: 12px 16px;
    background: linear-gradient(90deg,
        color-mix(in srgb, var(--sb-ice) 8%, transparent),
        color-mix(in srgb, var(--sb-violet) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--sb-ice) 22%, var(--sb-border));
    border-radius: var(--sb-radius);
    font-size: var(--sb-text-sm);
    color: var(--sb-text-secondary);
    line-height: 1.5;
}

.sm-cap-hint strong {
    color: var(--sb-ice);
    font-weight: 700;
}

/* Results grid uses .browse-results-grid from sb-shared.css (same as
   explore.html). Cards rendered via window.renderProfileCardShell for
   pixel parity with explore. Smart Match adds two overlays:
     .sm-pick-check — select checkbox in the top-left
     .sm-pick-score — match score chip in the top-right
   and a selected-state wrapper that gradient-borders the whole card. */
.sm-results-grid { margin-top: 4px; }

.sm-pick-wrap {
    position: relative;
    border-radius: var(--sb-radius);
    cursor: pointer;
    transition: transform var(--sb-transition);
}

.sm-pick-wrap:hover { transform: translateY(-2px); }

.sm-pick-wrap > .performer-card {
    /* Let Smart Match own the click target on the wrapper, not the card */
    pointer-events: none;
}

.sm-pick-selected > .performer-card {
    box-shadow: 0 0 0 2px var(--sb-violet),
                0 6px 24px color-mix(in srgb, var(--sb-violet) 25%, transparent);
}

.sm-pick-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(0.4);
}
.sm-pick-disabled:hover { transform: none; }

.sm-pick-check {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 26px;
    height: 26px;
    border: 2px solid var(--sb-border);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    font-weight: 700;
    background: color-mix(in srgb, var(--sb-card-fill) 85%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: transparent;
    z-index: 3;
    transition: all var(--sb-transition);
}

.sm-pick-selected .sm-pick-check {
    border-color: transparent;
    background: linear-gradient(135deg, var(--sb-ice), var(--sb-violet));
    color: #fff;
    box-shadow: 0 0 12px color-mix(in srgb, var(--sb-violet) 50%, transparent);
}

.sm-pick-score {
    position: absolute;
    top: 10px;
    right: 10px;
    font-family: 'Rajdhani', var(--sb-font-family, system-ui), sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--sb-ice);
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--sb-card-fill) 85%, transparent);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: 1px solid color-mix(in srgb, var(--sb-ice) 40%, transparent);
    z-index: 3;
    min-width: 40px;
    text-align: center;
}

.sm-pick-fallback {
    padding: 24px;
    background: var(--sb-card-fill);
    border: 1px solid var(--sb-border);
    border-radius: var(--sb-radius);
    color: var(--sb-text);
    font-weight: 600;
}

.sm-empty {
    padding: 56px 24px;
    text-align: center;
    color: var(--sb-text-muted);
    font-size: var(--sb-text-sm);
    border: 1px dashed var(--sb-border);
    border-radius: var(--sb-radius);
    line-height: 1.6;
}

/* ── Skeleton ───────────────────────────────────────────────── */
.sm-skeleton {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sm-skel-row {
    height: 70px;
    border-radius: var(--sb-radius);
    background: linear-gradient(90deg,
        var(--sb-card-fill),
        color-mix(in srgb, var(--sb-card-fill) 70%, var(--sb-border)),
        var(--sb-card-fill));
    background-size: 200% 100%;
    animation: sm-shimmer 1.4s ease-in-out infinite;
}

@keyframes sm-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: -100% 0; }
}

/* ── Mobile ─────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .sm-wiz-top { padding: var(--sb-space-md); }
    .sm-wiz-header {
        flex-direction: column;
        gap: var(--sb-space-sm);
        margin-bottom: var(--sb-space-md);
    }
    .sm-cap-pill { align-self: flex-start; }
    .sm-wiz-title { font-size: 1.3rem; }
    .sm-stepper { margin: 0; }
    .sm-stepper-station { padding: 8px 10px; gap: 8px; }
    .sm-stepper-badge { width: 34px; min-height: 34px; }
    .sm-stepper-num { font-size: 1.5rem; }
    .sm-stepper-station.done .sm-stepper-badge svg { width: 22px; height: 22px; }
    .sm-stepper-sublabel { display: none; }
    .sm-stepper-chev { padding: 0; }
    .sm-stepper-chev svg { width: 10px; height: 16px; }
    .sm-wiz-body { padding: var(--sb-space-md); }
    .sm-wiz-foot { padding: var(--sb-space-sm) var(--sb-space-md); }
    .sm-field-row { grid-template-columns: 1fr; }
    .sm-pick-check { width: 22px; height: 22px; top: 8px; left: 8px; }
    .sm-pick-score { top: 8px; right: 8px; font-size: 0.85rem; padding: 3px 8px; }
    .sm-wiz-footer { flex-wrap: wrap; }
    .sm-wiz-footer-meta {
        order: 3;
        flex: 1 0 100%;
        text-align: left;
    }
    .sm-send-btn { min-width: 0; flex: 1 1 auto; }
}