/* =============================================
   swipe.css: the full-page swipe deck
   Used on: swipe.html
   Built to the swipe-hero blueprint (docs/swipe-hero-design-research.md):
   dark stage, 3-deep card stack, drag physics, stamps, deal-labelled cards.
   Classes are prefixed `sw-`.

   Deal colors come from the shared tokens in styles.css (--deal-*), with
   the same values written here as fallbacks. Color never works alone: every
   badge and number also says its label or carries a sign.

   Layouts:
   - phones and tablets: the deck, then its buttons, then the deal panel
   - desktop (1024px and up): the deck and the deal panel side by side
   - phones held sideways (landscape, 500px tall or less): a smaller
     landscape card with its buttons under it, the panel beside it
   ============================================= */

/* ---------- Helpers ---------- */
/* Widths below include padding and borders */
.sw-stage,
.sw-stage *,
.sw-stage *::before,
.sw-stage *::after,
.sw-backdrop,
.sw-backdrop *,
.sw-toast {
    box-sizing: border-box;
}

.sw-sr-only {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* `hidden` must win over the display rules below */
.sw-stage [hidden],
.sw-backdrop[hidden],
.sw-backdrop [hidden] {
    display: none !important;
}

/* Deal colors, by MMDeal key (badge chip, ring, bar) */
.key-screaming  { --sw-deal: var(--deal-screaming, #22C55E); }
.key-great      { --sw-deal: var(--deal-great, #16A34A); }
.key-good       { --sw-deal: var(--deal-good, #86EFAC); }
.key-fair       { --sw-deal: var(--deal-fair, #9CA3AF); }
.key-overpriced { --sw-deal: var(--deal-overpriced, #F28B82); }
.key-check,
.key-pending    { --sw-deal: var(--deal-check, #D1D5DB); }

/* Deal text on dark backgrounds, by tone */
.tone-positive { --sw-tone: var(--deal-positive-text, #86EFAC); }
.tone-negative { --sw-tone: var(--deal-negative-text, #F28B82); }
.tone-neutral  { --sw-tone: var(--deal-neutral-text, #D1D5DB); }

/* ---------- Stage ---------- */
.sw-stage {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 60px); /* nav height */
    min-height: calc(100dvh - 60px);
    padding: 12px clamp(12px, 3vw, 28px) 24px;
    overflow: hidden;
}

/* ---------- Top bar: location, counter, Garage ---------- */
.sw-topbar {
    position: relative;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    max-width: 1060px;
    width: 100%;
    margin: 0 auto 8px;
}

/* The location button: a flat secondary button (the class name is older) */
.sw-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-pill:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--field-border); }
.sw-pill .sw-pill-sub { color: var(--text-muted); font-weight: 500; }
.sw-pill-city:empty { display: none; }

.sw-counter-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}
.sw-counter {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.sw-counter b { color: var(--accent); font-weight: 800; }

/* (i) buttons: a 44px target around a small circled "i" */
.sw-info-btn {
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.sw-info-btn:hover,
.sw-info-btn[aria-expanded="true"] { color: var(--text); }
.sw-info-i {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    font-size: 0.72rem;
    font-weight: 800;
    font-style: normal;
    line-height: 1;
}
.sw-info-sm { width: 32px; height: 32px; margin: -6px 0; vertical-align: middle; }
.sw-info-sm .sw-info-i { width: 17px; height: 17px; font-size: 0.66rem; }

/* The limits tooltip (a disclosure: its text is always in the page) */
.sw-tip {
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 20;
    width: max-content;
    max-width: min(300px, calc(100vw - 32px));
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: #1C2130;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    color: var(--text);
    font-size: 0.82rem;
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
}

.sw-garage-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 8px 16px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-strong);
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-garage-btn:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--field-border);
}

/* ---------- Main: prompt, deck, deal panel ---------- */
.sw-main {
    position: relative;
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "prompt" "deck" "panel";
    align-content: center;
    justify-items: center;
    gap: 16px;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    min-height: 0;
}

.sw-deck-col {
    grid-area: deck;
    /* Card width: fits the screen width and leaves room for the top bar,
       the buttons and the hint under it */
    --deck-w: min(430px, 90vw, calc((100vh - 280px) * 0.75));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    min-width: 0;
}
@supports (height: 1dvh) {
    .sw-deck-col { --deck-w: min(430px, 90vw, calc((100dvh - 280px) * 0.75)); }
}
/* The first-visit prompt takes about 160px more; below 300px wide cards get
   hard to read, so a short screen scrolls a little instead */
.sw-stage.has-prompt .sw-deck-col { --deck-w: max(min(300px, 90vw), min(430px, 90vw, calc((100vh - 440px) * 0.75))); }
@supports (height: 1dvh) {
    .sw-stage.has-prompt .sw-deck-col { --deck-w: max(min(300px, 90vw), min(430px, 90vw, calc((100dvh - 440px) * 0.75))); }
}

.sw-deck {
    position: relative;
    isolation: isolate; /* card z-indexes stay inside the deck */
    width: var(--deck-w);
    aspect-ratio: 3 / 4;
}
/* A message instead of cards: as tall as its text needs, never shorter than a card */
.sw-deck.has-state {
    display: flex;
    aspect-ratio: auto;
    min-height: calc(var(--deck-w) * 4 / 3);
}

/* ---------- First visit: "Show cars near you?" ---------- */
.sw-locprompt {
    grid-area: prompt;
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    width: min(560px, 100%);
    padding: 12px 16px;
    border-radius: 14px;
    border: 1px solid rgba(255, 107, 61, 0.3);
    background: var(--panel);
}
.sw-locprompt-text { padding-right: 36px; }
.sw-locprompt-title { margin: 0; font-size: 0.98rem; font-weight: 700; color: var(--text); }
.sw-locprompt-sub { margin: 2px 0 0; font-size: 0.82rem; color: var(--text-muted); }
.sw-locprompt-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-locprompt .sw-form-error,
.sw-locprompt .sw-form-status { flex-basis: 100%; }
/* Empty messages stay in the page (live regions) but take no room */
.sw-locprompt .sw-form-error:empty,
.sw-locprompt .sw-form-status:empty { position: absolute; }
.sw-locprompt .sw-x { top: 4px; right: 4px; }

.sw-btn-primary,
.sw-btn-secondary {
    min-height: 44px;
    padding: 10px 14px;
    border-radius: var(--radius-btn);
    font: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-btn-primary { border: none; background: var(--accent-strong, #C2410C); color: var(--text); }
.sw-btn-primary:hover { background: var(--accent-strong-hover, #B93A0A); }
.sw-btn-secondary { border: 1px solid var(--border-strong); background: transparent; color: var(--text); }
.sw-btn-secondary:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--field-border); }
.sw-stage [aria-busy="true"],
.sw-backdrop [aria-busy="true"] { cursor: progress; opacity: 0.75; }

/* Messages under a form: errors are role="alert", confirmations role="status" */
.sw-form-error,
.sw-form-status {
    margin: 0;
    font-size: 0.84rem;
    line-height: 1.4;
    text-align: left;
}
.sw-form-error { color: #FCA5A5; font-weight: 600; }
.sw-form-status { color: var(--text); }
.sw-form-error:not(:empty),
.sw-form-status:not(:empty) { margin-top: 8px; }

/* Round close button (dialogs, prompt) */
.sw-x {
    position: absolute;
    top: 8px;
    right: 8px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}
.sw-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.08); }

/* ---------- Cards (hero anatomy, page-tuned) ---------- */
.sw-card {
    position: absolute;
    inset: 0;
    margin: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
    transform-origin: center bottom;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
    user-select: none;
    -webkit-user-select: none;
}
.sw-card.is-top { touch-action: pan-y; cursor: grab; will-change: transform; }
.sw-card.is-top:active { cursor: grabbing; }
.sw-card.dragging { transition: none; }

.sw-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    -webkit-user-drag: none;
    background: var(--panel-muted);
}
.sw-card-noimg {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--text-muted);
    font-size: 0.9rem;
    font-weight: 600;
    background: var(--panel-muted);
}

.sw-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11, 15, 25, 0.10) 0%,
        rgba(11, 15, 25, 0) 30%,
        rgba(11, 15, 25, 0.55) 60%,
        rgba(11, 15, 25, 0.94) 100%);
    pointer-events: none;
}

/* Commit color wash */
.sw-wash {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.sw-card.flash-like .sw-wash { background: radial-gradient(circle at 70% 40%, rgba(16, 185, 129, 0.38), transparent 72%); opacity: 1; }
.sw-card.flash-nope .sw-wash { background: radial-gradient(circle at 30% 40%, rgba(239, 68, 68, 0.38), transparent 72%); opacity: 1; }

/* Deal badge, top left: the label, then the score in a colored chip.
   A solid dark base keeps the white label readable over any photo. */
.sw-deal-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    max-width: calc(100% - 28px);
    margin: 0;
    padding: 4px 4px 4px 12px;
    border-radius: 999px;
    border: 1px solid var(--sw-deal, rgba(255, 255, 255, 0.2));
    background: var(--bg);
    color: #F9FAFB;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.2;
}
.sw-deal-score {
    display: grid;
    place-items: center;
    min-width: 30px;
    height: 30px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--sw-deal, #9CA3AF);
    color: var(--deal-on, #0B0F19);
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
/* Check price: an outlined gray pill, no score */
.sw-deal-badge.key-check { padding: 7px 12px; border-style: dashed; }

/* LIKE / NOPE stamps */
.sw-stamp {
    position: absolute;
    top: 26px;
    z-index: 4;
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    padding: 4px 16px;
    border-radius: 10px;
    border: 3px solid;
    opacity: 0;
    pointer-events: none;
    text-transform: uppercase;
}
.sw-stamp.like { right: 18px; transform: rotate(14deg);  color: var(--success, #10B981); border-color: var(--success, #10B981); }
.sw-stamp.nope { left: 18px;  transform: rotate(-14deg); color: var(--error, #EF4444);   border-color: var(--error, #EF4444); }

/* Cards peeking behind the top one show only their edges: their text would
   otherwise print under the top card. A drag uncovers the next card's text. */
.sw-card .sw-info,
.sw-card .sw-deal-badge,
.sw-card .sw-ad-body { transition: opacity 0.25s ease; }
.sw-card:not(.is-top):not(.revealing) .sw-info,
.sw-card:not(.is-top):not(.revealing) .sw-deal-badge,
.sw-card:not(.is-top):not(.revealing) .sw-ad-body { opacity: 0; }

/* Card info overlay */
.sw-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 18px;
}
/* The hook: "$2,400 under MarketMatch Value", in the deal's tone, on a dark
   base so it stays readable over any photo. Each base is the tone's tint
   already mixed into the dark: one flat color, no layers. */
.sw-hook {
    display: inline-block;
    max-width: 100%;
    margin: 0 0 8px;
    padding: 5px 11px;
    border-radius: 8px;
    border: 1px solid rgba(209, 213, 219, 0.4);
    background: rgba(35, 39, 49, 0.82);
    color: var(--sw-tone, #D1D5DB);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1.3;
}
.sw-hook.tone-positive {
    border-color: rgba(134, 239, 172, 0.45);
    background: rgba(15, 50, 38, 0.83);
}
.sw-hook.tone-negative {
    border-color: rgba(242, 139, 130, 0.5);
    background: rgba(50, 36, 43, 0.83);
}
.sw-price { margin: 0; font-family: var(--font-display); font-size: 2.4rem; font-weight: 800; letter-spacing: 0; color: #fff; line-height: 1; }
.sw-name  { margin: 6px 0 0; font-size: 1.02rem; font-weight: 600; color: #F9FAFB; line-height: 1.3; }
.sw-meta  { margin-top: 8px; display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; font-size: 0.82rem; color: #D1D5DB; }
.sw-meta-item { display: inline-flex; align-items: center; gap: 5px; }
.sw-meta-item.is-unknown { font-style: italic; }
.sw-meta-ic { width: 14px; height: 14px; flex: none; opacity: 0.85; }
.sw-ic { width: 15px; height: 15px; flex: none; }

/* "View listing" on the card: a 44px tall target without growing the card */
.sw-card-link {
    display: inline-block;
    margin: -13px -4px;
    padding: 13px 4px;
    color: #E5E7EB;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.sw-card-link:hover { color: #fff; }

/* ---------- Action buttons ---------- */
.sw-actions {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 20px;
}
/* Like and Pass: round icon buttons. Hover changes the border and fill only. */
.sw-btn {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: var(--panel);
    color: #fff;
    font-size: 1.45rem;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-btn svg { width: 26px; height: 26px; }
.sw-btn.nope { color: #FCA5A5; }
.sw-btn.like { color: #6EE7B7; }
.sw-btn.nope:hover { border-color: var(--error, #EF4444);   background: rgba(239, 68, 68, 0.15); }
.sw-btn.like:hover { border-color: var(--success, #10B981); background: rgba(16, 185, 129, 0.15); }
.sw-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* No card to swipe (a message is showing): no buttons either */
.sw-stage.is-state .sw-actions,
.sw-stage.is-state .sw-hint { display: none; }

.sw-hint {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    transition: opacity 0.4s ease;
}
.sw-hint.hidden { opacity: 0; }

/* ---------- Skeleton (loading card) ---------- */
.sw-skeleton {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
    background: var(--panel);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.sw-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.05) 50%, transparent 70%);
    animation: sw-shimmer 1.4s ease-in-out infinite;
}
@keyframes sw-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}
.sw-skeleton .sk-img { position: absolute; inset: 0 0 34% 0; background: var(--panel-muted); }
.sw-skeleton .sk-line { position: absolute; left: 18px; border-radius: 6px; background: var(--panel-muted); height: 14px; }
.sw-skeleton .sk-1 { bottom: 26%; width: 40%; height: 26px; }
.sw-skeleton .sk-2 { bottom: 19%; width: 62%; }
.sw-skeleton .sk-3 { bottom: 13%; width: 48%; }

/* ---------- Deck messages and dialogs share one look ---------- */
.sw-state,
.sw-dialog {
    border-radius: 22px;
    background: var(--panel);
    border: 1px solid var(--border-subtle);
}
/* A dialog floats over the dimmed page: a tight dark shadow, never a glow */
.sw-dialog { box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); }
.sw-state,
.sw-gate {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}
.sw-state h2,
.sw-dialog h2 {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.02em;
    line-height: 1.25;
    text-wrap: balance;
}
.sw-state h2:focus { outline: none; }
.sw-state h2:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.sw-state p,
.sw-gate p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }

/* A message in place of the cards (empty, out of the area, error) */
.sw-state {
    position: relative;
    flex: 1;
    justify-content: center;
    width: 100%;
    padding: 28px 22px;
}

.sw-gate-ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 107, 61, 0.12);
    border: 1px solid rgba(255, 107, 61, 0.3);
    color: var(--accent);
}
.sw-gate-ic img { width: 34px; height: 34px; display: block; }

/* Primary action: white on the deeper orange (5.2:1), flat */
.sw-gate-cta {
    display: block;
    width: 100%;
    min-height: 48px;
    margin-top: 6px;
    padding: 13px 22px;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    background: var(--accent-strong, #C2410C);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.35;
    text-align: center;
    text-decoration: none;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-gate-cta:hover {
    background: var(--accent-strong-hover, #B93A0A);
}
.sw-gate-alt {
    display: inline-block;
    min-height: 44px;
    padding: 11px 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font: inherit;
    font-size: 0.9rem;
    line-height: 1.4;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.sw-gate-alt:hover { color: var(--text); }

/* ---------- Out-of-area waitlist ---------- */
.sw-waitlist { width: 100%; margin-top: 6px; text-align: left; }
.sw-waitlist label { display: block; margin-bottom: 6px; font-size: 0.88rem; font-weight: 600; color: var(--text); }
.sw-waitlist-row { display: flex; gap: 8px; }
.sw-waitlist input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--field-border);
    background: var(--panel-muted);
    color: var(--text);
    font: inherit;
    font-size: 1rem; /* 16px keeps iPhones from zooming in */
}
.sw-waitlist input[aria-invalid="true"] { border-color: #F28B82; }
.sw-waitlist-go {
    min-height: 44px;
    padding: 10px 14px;
    border: none;
    border-radius: var(--radius-btn);
    background: var(--accent-strong, #C2410C);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-waitlist-go:hover { background: var(--accent-strong-hover, #B93A0A); }

/* ---------- Ad card (house upsell slot) ---------- */
.sw-card.sw-ad {
    background: var(--panel);
    border: 1px solid var(--border-subtle);
}
.sw-ad-body {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 30px 26px;
    gap: 12px;
}
.sw-ad-body h2 { margin: 0; font-size: 1.45rem; font-weight: 800; color: #fff; letter-spacing: -0.02em; }
.sw-ad-body p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; }
.sw-ad-body .sw-gate-cta { width: auto; min-width: 60%; }
/* "Ad" says what this card is: plain small text, not a pill */
.sw-ad-body .sw-ad-tag {
    position: absolute;
    top: 14px;
    left: 16px;
    color: var(--text-muted);
    font-size: 0.8rem;
    font-weight: 600;
}
.sw-ad-body .sw-ad-hint { font-size: 0.8rem; }

/* ---------- Deal panel ---------- */
.sw-panel {
    grid-area: panel;
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: min(430px, 100%);
    padding: 22px;
    border-radius: var(--radius-lg, 16px);
    border: 1px solid var(--border-subtle);
    background: var(--panel);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Phones and tablets: no panel until there is a car to describe */
.sw-panel.is-empty { display: none; }
.sw-panel.swap { opacity: 0; transform: translateY(6px); transition: none; }
.sw-panel-body { display: flex; flex-direction: column; gap: 16px; }
.sw-panel-label {
    margin: 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 600;
}
.sw-panel-score {
    display: flex;
    align-items: center;
    gap: 16px;
}
.sw-ring { position: relative; width: 84px; height: 84px; flex: none; }
.sw-ring svg { transform: rotate(-90deg); display: block; }
.sw-ring .ring-bg { stroke: rgba(255, 255, 255, 0.1); }
.sw-ring .ring-fg { stroke: var(--sw-deal, #9CA3AF); transition: stroke-dashoffset 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.sw-ring.key-check .ring-bg { stroke: var(--sw-deal); stroke-dasharray: 4 5; opacity: 0.6; }
.sw-ring-num {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}
.sw-panel-score-copy .t { margin: 0; font-weight: 700; font-size: 1.05rem; color: var(--text); }
.sw-panel-outof { font-weight: 500; font-size: 0.85rem; color: var(--text-muted); }
.sw-panel-score-copy .d { margin: 2px 0 0; font-size: 0.85rem; color: var(--text-muted); }

.sw-panel-prices,
.sw-panel-facts { margin: 0; display: flex; flex-direction: column; }
.sw-panel-prices { gap: 8px; }
.sw-panel-row,
.sw-panel-fact { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 0.9rem; }
.sw-panel-row dt,
.sw-panel-fact dt { color: var(--text-muted); }
.sw-panel-row dd,
.sw-panel-fact dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.sw-panel-fact { padding: 9px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.88rem; }
.sw-panel-fact:last-child { border-bottom: none; }
.sw-explainer {
    margin: -6px 0 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    font-size: 0.84rem;
    line-height: 1.45;
}
.sw-panel-bar { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.sw-panel-bar i {
    display: block;
    height: 100%;
    border-radius: 4px;
    background: var(--sw-deal, #9CA3AF);
    transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.sw-panel-margin { margin: -6px 0 0; display: flex; flex-direction: column; gap: 2px; color: var(--sw-tone, #D1D5DB); }
.sw-panel-signed { font-size: 1rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.sw-panel-words { font-size: 0.84rem; font-weight: 600; }
.sw-panel-note { margin: 0; font-size: 0.86rem; line-height: 1.45; color: var(--deal-neutral-text, #D1D5DB); }
/* Warnings under a scored deal (no mileage listed, or a very steep discount):
   a hairline all round in a light orange tint */
.sw-panel-caution {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid rgba(255, 107, 61, 0.35);
    border-radius: var(--radius-sm, 8px);
}

.sw-panel-link {
    display: block;
    min-height: 44px;
    text-align: center;
    padding: 12px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-strong);
    color: var(--text);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-panel-link:hover { background: rgba(255, 255, 255, 0.04); border-color: var(--field-border); }
.sw-panel-empty { margin: 0; color: var(--text-muted); font-size: 0.85rem; text-align: center; padding: 30px 0; }

/* ---------- Dialogs: gates and "Change location" ---------- */
.sw-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000; /* above the sticky nav and its menu */
    display: flex;
    padding: 16px;
    overflow-y: auto;
    background: rgba(5, 8, 15, 0.74);
    opacity: 0;
    transition: opacity 0.25s ease;
}
.sw-backdrop.show { opacity: 1; }
.sw-dialog {
    position: relative;
    width: min(400px, 100%);
    margin: auto;
    padding: 30px 26px 22px;
    transform: scale(0.96) translateY(10px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.sw-backdrop.show .sw-dialog { transform: none; }
.sw-dialog:focus { outline: none; }
.sw-gate h2 { padding: 0 20px; }

/* Change location */
.sw-zip-dialog { width: min(380px, 100%); padding: 22px 20px 20px; text-align: left; }
.sw-zip-dialog h2 { margin: 0 44px 14px 0; font-size: 1.2rem; }
.sw-field-label { display: block; margin-bottom: 6px; font-size: 0.85rem; font-weight: 600; color: var(--text); }
.sw-zip-row { display: flex; gap: 8px; }
.sw-zip-input {
    flex: 1;
    min-width: 0;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--field-border);
    background: var(--panel-muted);
    color: var(--text);
    font: inherit;
    font-size: 1rem; /* 16px keeps iPhones from zooming in */
    letter-spacing: 0.04em;
}
.sw-zip-input[aria-invalid="true"] { border-color: #F28B82; }
.sw-zip-go {
    min-height: 44px;
    min-width: 64px;
    padding: 10px 16px;
    border: none;
    border-radius: var(--radius-btn);
    background: var(--accent-strong, #C2410C);
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-zip-go:hover { background: var(--accent-strong-hover, #B93A0A); }
.sw-zip-suggestions { list-style: none; margin: 6px 0 0; padding: 0; max-height: 200px; overflow-y: auto; }
.sw-zip-suggestions:empty { margin: 0; }
.sw-suggestion {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.9rem;
    text-align: left;
    cursor: pointer;
}
.sw-suggestion:hover { background: var(--panel-muted); }
.sw-suggestion-zip { font-weight: 700; font-variant-numeric: tabular-nums; }
.sw-suggestion-city { color: var(--text-muted); }
.sw-link-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 2px;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
}
.sw-link-btn:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Distance radius picker */
.sw-dist { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.sw-dist-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.sw-dist-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.sw-dist-cap { font-size: 0.78rem; color: var(--text-muted); }
.sw-dist-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-dist-chip {
    min-height: 44px;
    padding: 8px 14px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-strong);
    background: var(--panel-muted);
    color: var(--text);
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--dur-short) var(--ease-out), border-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out);
}
.sw-dist-chip:hover { border-color: var(--field-border); }
.sw-dist-chip.active {
    background: var(--accent);
    border-color: var(--accent);
    color: #0B0F19;
}
.sw-dist-chip.locked {
    color: var(--text-muted);
    border-style: dashed;
}
.sw-dist-chip.locked:hover { color: #FFB48C; border-color: rgba(255, 107, 61, 0.5); }
.sw-lock { width: 12px; height: 12px; vertical-align: -1px; margin-left: 5px; }

/* ---------- Toast ---------- */
.sw-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    z-index: 1100;
    padding: 12px 20px;
    border-radius: 12px;
    background: rgba(28, 33, 48, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 600;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: max-content;
    max-width: min(440px, calc(100vw - 32px));
    text-align: center;
}
.sw-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- One-time gesture nudge ---------- */
@keyframes sw-nudge {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
    28%      { transform: translate3d(30px, 0, 0) rotate(3deg); }
    56%      { transform: translate3d(-16px, 0, 0) rotate(-1.6deg); }
    78%      { transform: translate3d(6px, 0, 0) rotate(0.6deg); }
}
.sw-card.is-top.sw-nudge { animation: sw-nudge 1.15s ease-in-out 0.6s 1; }

/* ---------- Desktop: deck and deal panel side by side ---------- */
@media (min-width: 1024px) {
    .sw-main {
        grid-template-columns: auto 320px;
        grid-template-areas: "prompt prompt" "deck panel";
        justify-content: center;
        align-items: center;
        column-gap: clamp(24px, 4vw, 56px);
    }
    .sw-panel { width: 320px; }
    .sw-panel.is-empty { display: flex; }
    .sw-stage.is-state .sw-panel { display: none; }
    .sw-stage.is-state .sw-main { grid-template-columns: auto; grid-template-areas: "prompt" "deck"; }
}

/* ---------- Phones ---------- */
@media (max-width: 640px) {
    .sw-stage { padding: 8px 12px 16px; }
    .sw-topbar { flex-wrap: wrap; row-gap: 2px; }
    .sw-counter-wrap { order: 3; width: 100%; }
    .sw-main { gap: 12px; }
    /* Top bar two rows (about 100px), buttons and gaps under the card */
    .sw-deck-col { --deck-w: min(380px, 88vw, calc((100vh - 270px) * 0.75)); gap: 12px; }
    .sw-btn { width: 64px; height: 64px; }
    /* A compact prompt, so the card and its Like and Pass buttons still fit
       on the first screen. The zip pill above already shows where the deck
       is, so that line stays for screen readers only. */
    .sw-locprompt { padding: 10px 12px; gap: 8px 12px; }
    .sw-locprompt-sub {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }
    .sw-locprompt-actions { width: 100%; }
    .sw-locprompt-actions button { flex: 1 1 auto; }
    .sw-dialog { padding: 28px 18px 18px; }
    .sw-zip-dialog { padding: 20px 16px 16px; }
}
@media (max-width: 640px) {
    .sw-stage.has-prompt .sw-deck-col { --deck-w: max(min(200px, 88vw), min(380px, 88vw, calc((100vh - 364px) * 0.75))); }
}
@supports (height: 1dvh) {
    @media (max-width: 640px) {
        .sw-deck-col { --deck-w: min(380px, 88vw, calc((100dvh - 270px) * 0.75)); }
        /* The compact first-visit prompt takes about 100px more; the card
           shrinks so Like and Pass stay on screen (never below 200px wide) */
        .sw-stage.has-prompt .sw-deck-col { --deck-w: max(min(200px, 88vw), min(380px, 88vw, calc((100dvh - 364px) * 0.75))); }
    }
}
@media (max-width: 480px) {
    .sw-pill-city { display: none; }
}
@media (max-width: 360px) {
    .sw-locprompt-actions button { padding: 10px 8px; font-size: 0.82rem; }
    .sw-info { padding: 14px; }
    .sw-price { font-size: 2.05rem; }
    .sw-deal-badge { top: 10px; left: 10px; font-size: 0.78rem; }
    .sw-pill, .sw-garage-btn { padding: 8px 12px; }
}

/* ---------- Phones held sideways ----------
   About 390px tall: nav (60) + top bar (50) leave about 270px, so the card
   turns wide (3:2) with the buttons under it and the panel beside it. */
@media (orientation: landscape) and (max-height: 500px) {
    .sw-stage { min-height: 0; padding: 6px 16px 10px; }
    .sw-topbar { flex-wrap: nowrap; margin-bottom: 6px; }
    .sw-counter-wrap { order: 0; width: auto; }
    .sw-counter { font-size: 0.78rem; }
    .sw-main {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas: "deck prompt" "deck panel";
        align-content: start;
        align-items: start;
        justify-items: stretch;
        column-gap: 20px;
        row-gap: 10px;
        max-width: 1060px;
    }
    .sw-deck-col,
    .sw-stage.has-prompt .sw-deck-col {
        --deck-w: min(46vw, calc((100vh - 60px - 72px - 70px) * 3 / 2));
        gap: 8px;
    }
    .sw-deck { aspect-ratio: 3 / 2; }
    .sw-deck.has-state { min-height: calc(var(--deck-w) * 2 / 3); }
    .sw-hint { display: none; }
    .sw-actions { gap: 16px; }
    .sw-btn { width: 52px; height: 52px; }
    .sw-btn svg { width: 22px; height: 22px; }
    .sw-panel {
        width: auto;
        max-height: calc(100vh - 60px - 72px);
        overflow-y: auto;
        padding: 16px;
        gap: 12px;
    }
    .sw-panel.is-empty { display: none; }
    .sw-locprompt { width: auto; }
    .sw-locprompt-actions { width: auto; }

    /* A compact card */
    .sw-card, .sw-skeleton { border-radius: 16px; }
    .sw-deal-badge { top: 8px; left: 8px; gap: 6px; padding: 3px 3px 3px 10px; font-size: 0.74rem; }
    .sw-deal-badge.key-check { padding: 5px 10px; }
    .sw-deal-score { min-width: 24px; height: 24px; font-size: 0.74rem; }
    .sw-stamp { top: 14px; font-size: 1.1rem; padding: 2px 10px; }
    .sw-info { padding: 10px; }
    .sw-hook { margin-bottom: 4px; padding: 3px 6px; font-size: 0.72rem; }
    .sw-price { font-size: 1.7rem; }
    .sw-name { margin-top: 2px; font-size: 0.9rem; }
    /* Mileage, distance and the listing link are in the panel right beside it */
    .sw-card .sw-meta { display: none; }

    /* A message instead of cards gets the whole width */
    .sw-stage.is-state .sw-main { grid-template-columns: minmax(0, 1fr); grid-template-areas: "prompt" "deck"; }
    .sw-stage.is-state .sw-panel { display: none; }
    .sw-stage.is-state .sw-main .sw-deck-col { --deck-w: min(560px, 100%); }
    .sw-state { padding: 18px 20px; gap: 8px; }
    .sw-state .sw-gate-ic { display: none; }
    .sw-state h2 { font-size: 1.15rem; }

    .sw-dialog { padding: 18px 20px 14px; }
    .sw-gate { gap: 8px; }
    .sw-gate .sw-gate-ic { display: none; }
    .sw-dialog h2 { font-size: 1.15rem; }
}
@supports (height: 1dvh) {
    @media (orientation: landscape) and (max-height: 500px) {
        .sw-deck-col,
        .sw-stage.has-prompt .sw-deck-col { --deck-w: min(46vw, calc((100dvh - 60px - 72px - 70px) * 3 / 2)); }
        .sw-panel { max-height: calc(100dvh - 60px - 72px); }
    }
}
/* Narrow or very short sideways screens (older small iPhones) */
@media (orientation: landscape) and (max-height: 500px) and (max-width: 700px) {
    .sw-pill-city { display: none; }
}
@media (orientation: landscape) and (max-height: 340px) {
    /* A card about 120px tall: the panel beside it says the same sentence */
    .sw-card .sw-hook { display: none; }
    .sw-name { font-size: 0.8rem; }
    .sw-price { font-size: 1.45rem; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .sw-card { transition: opacity 0.2s ease; }
    .sw-card .sw-info,
    .sw-card .sw-deal-badge,
    .sw-card .sw-ad-body { transition: none; }
    .sw-card.is-top.sw-nudge { animation: none; }
    .sw-skeleton::after { animation: none; }
    .sw-backdrop,
    .sw-dialog,
    .sw-panel { transition: none; }
    .sw-dialog { transform: none; }
}

/* ---------- Counter meters: "12 of 25 swipes" over a thin bar ---------- */
.sw-counter.has-meters {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}
.sw-meter {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    min-width: 96px;
}
.sw-meter-text { display: block; line-height: 1.2; }
.sw-meter-track {
    display: block;
    height: 3px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.sw-meter-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.sw-meter.is-hot .sw-meter-fill { background: #FF4D4D; }
.sw-meter.is-hot b { color: #FF4D4D; }
@media (max-width: 640px) {
    .sw-counter.has-meters { gap: 14px; }
    .sw-meter { min-width: 88px; }
}
@media (max-width: 360px) {
    .sw-counter.has-meters { font-size: 0.76rem; gap: 10px; }
    .sw-meter { min-width: 0; }
}

/* ---------- Limit gates: "what you're missing" behind the panel ---------- */
.sw-backdrop.has-preview { flex-direction: column; align-items: center; }
.sw-backdrop.has-preview .sw-dialog { z-index: 1; margin: 0 auto auto; }
.sw-gate-preview {
    position: relative;
    z-index: 0;
    flex: none;
    width: min(360px, 100%);
    margin: auto auto -30px; /* the gate panel overlaps the bottom of the strip */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    pointer-events: none;
}
.sw-gate-preview-cap {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: 0.01em;
}
.sw-gate-thumbs {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
}
.sw-gate-thumb {
    position: relative;
    flex: 0 1 104px;
    aspect-ratio: 3 / 4;
    max-height: 132px;
    border-radius: var(--radius-md, 12px);
    overflow: hidden;
    background: var(--panel, #111827);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.45);
}
.sw-gate-thumb:nth-child(1) { transform: rotate(-4deg) translateY(4px); }
.sw-gate-thumb:nth-child(3) { transform: rotate(4deg) translateY(4px); }
.sw-gate-thumb img,
.sw-gate-thumb-none {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(6px);
    transform: scale(1.12); /* hides the soft edge the blur leaves */
}
.sw-gate-thumb-none { background: var(--panel-muted, #1C2130); }
.sw-gate-thumb-score {
    position: absolute;
    top: 6px;
    left: 6px;
    min-width: 30px;
    padding: 3px 7px;
    border-radius: var(--radius-sm, 8px);
    background: var(--sw-deal, #9CA3AF);
    color: var(--deal-on, #0B0F19);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    max-width: calc(100% - 12px);
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (max-width: 640px) {
    .sw-gate-preview { width: min(300px, 100%); margin-bottom: -26px; }
    .sw-gate-thumb { flex-basis: 84px; max-height: 108px; }
}
@media (orientation: landscape) and (max-height: 500px) {
    .sw-gate-preview { display: none; }
    .sw-backdrop.has-preview .sw-dialog { margin: auto; }
}
@media (prefers-reduced-motion: reduce) {
    .sw-meter-fill { transition: none; }
}