/* /listing-check/{token} - the page the feed-check email opens. One centred card on the dark canvas;
   buttons are the shared .home-btn styles from public.css. Stacks the two buttons on a phone. */

.listing-check {
    display: grid;
    justify-items: center;
    padding: 56px 16px 96px;
}

.listing-check__card {
    width: 100%;
    max-width: 640px;
    box-sizing: border-box;
    padding: 32px;
    background: var(--sa-surface);
    border: 1px solid var(--sa-line);
    border-radius: var(--sa-radius-xl);
    box-shadow: var(--sa-shadow);
}

.listing-check__card h1 {
    margin: 8px 0 14px;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3vw, 1.9rem);
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.listing-check__card p {
    color: var(--sa-ink-2);
    line-height: 1.55;
}

.listing-check__card a {
    color: var(--sa-primary);
}

.listing-check__card--done {
    text-align: center;
}

.listing-check__card--done .mud-icon-root {
    color: var(--sa-ok-ink);
}

.listing-check__vehicle {
    display: grid;
    gap: 2px;
    margin: 0 0 16px;
    padding: 14px 16px;
    border-radius: var(--sa-radius-md);
    background: var(--sa-bg);
    border: 1px solid var(--sa-line-soft);
}

.listing-check__vehicle strong {
    font-family: var(--font-display);
    font-size: 1.15rem;
}

.listing-check__vehicle span {
    color: var(--sa-ink-3);
    font-size: 0.9rem;
}

.listing-check__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 20px 0 8px;
}

.listing-check__actions .home-btn:disabled {
    opacity: 0.5;
    cursor: default;
}

.listing-check__confirm {
    margin-top: 16px;
    padding: 16px;
    border-radius: var(--sa-radius-md);
    background: var(--sa-warn-bg);
    border: 1px solid var(--sa-warn-ink);
}

.listing-check__confirm p {
    margin: 0;
    color: var(--sa-ink);
}

.listing-check__error {
    color: var(--sa-bad-ink) !important;
    font-weight: 600;
}

.listing-check__note {
    margin: 20px 0 0;
    font-size: 0.85rem;
}

@media (max-width: 560px) {
    .listing-check { padding-top: 32px; }
    .listing-check__card { padding: 22px 18px; }
    .listing-check__actions { flex-direction: column; }
    .listing-check__actions .home-btn { width: 100%; white-space: normal; text-align: center; }
}