/* Phase 2.0F.4C.1 - shortlist layout redesign. */
.shortlist-page {
    --shortlist-border: #d7e2f0;
    --shortlist-ink: #10213a;
    --shortlist-muted: #64748b;
    --shortlist-blue: #1463ff;
    --shortlist-blue-dark: #0b3d9b;
    --shortlist-surface: #ffffff;
    --shortlist-surface-soft: #f5f8fc;
    max-width: 1320px;
    gap: 1.5rem;
    padding: .65rem 0 3rem;
}

.shortlist-page .shortlist-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(13rem, auto);
    align-items: center;
    gap: 2rem;
    overflow: hidden;
    padding: clamp(1.5rem, 3vw, 2.35rem);
    border: 1px solid #bdd4f4;
    border-radius: 1.35rem;
    background:
        radial-gradient(circle at 92% 0%, rgba(0, 163, 255, .22), transparent 32%),
        linear-gradient(135deg, #f7fbff 0%, #edf5ff 58%, #f9fcff 100%);
    box-shadow: 0 18px 45px rgba(15, 45, 91, .09);
}

.shortlist-hero-copy {
    min-width: 0;
}

.shortlist-page .shortlist-hero h1 {
    max-width: 48rem;
    margin: .3rem 0 .65rem;
    font-size: clamp(2rem, 4vw, 3.1rem);
    line-height: 1.02;
    letter-spacing: -.045em;
}

.shortlist-page .shortlist-hero p {
    max-width: 54rem;
    font-size: .98rem;
    line-height: 1.65;
}

.shortlist-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem;
    margin-top: 1.15rem;
}

.shortlist-refresh-status {
    color: #52657e;
    font-size: .78rem;
    font-weight: 700;
}

.shortlist-page .shortlist-count-pill {
    min-height: 2.2rem;
    padding: .45rem .8rem;
    border-color: #a8c9f3;
    background: rgba(255, 255, 255, .82);
    color: #164d96;
    box-shadow: 0 4px 12px rgba(25, 85, 160, .08);
}

.shortlist-page .shortlist-hero-actions {
    display: grid;
    align-content: center;
    justify-items: stretch;
    gap: .65rem;
    min-width: 13rem;
}

.shortlist-page .shortlist-hero-actions .btn {
    justify-content: center;
    min-height: 2.75rem;
    white-space: nowrap;
}

.shortlist-clear-action {
    min-height: auto !important;
    padding-block: .25rem !important;
    font-size: .82rem;
}

.shortlist-overview {
    padding: clamp(1rem, 2.3vw, 1.5rem);
    border: 1px solid var(--shortlist-border);
    border-radius: 1.3rem;
    background: var(--shortlist-surface-soft);
    box-shadow: 0 14px 36px rgba(15, 31, 49, .06);
}

.shortlist-section-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.shortlist-section-heading h2 {
    margin: .18rem 0 0;
    color: var(--shortlist-ink);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    letter-spacing: -.025em;
}

.shortlist-section-count {
    display: grid;
    min-width: 3rem;
    min-height: 3rem;
    place-items: center;
    border: 1px solid #c9daf0;
    border-radius: .9rem;
    background: #fff;
    color: #165bb8;
    font-weight: 900;
    box-shadow: 0 6px 16px rgba(17, 73, 146, .08);
}

.shortlist-page .shortlist-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 1rem;
}

.shortlist-page .shortlist-car-card {
    position: relative;
    display: grid;
    grid-template-rows: auto auto auto auto auto 1fr;
    align-content: stretch;
    gap: 1rem;
    min-height: 0;
    padding: 1.15rem;
    border: 1px solid #d5e0ed;
    border-radius: 1.15rem;
    background: #fff;
    box-shadow: 0 9px 26px rgba(15, 31, 49, .055);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.shortlist-page .shortlist-car-card:hover {
    border-color: #a9c6ea;
    box-shadow: 0 16px 34px rgba(15, 45, 91, .095);
    transform: translateY(-1px);
}

.shortlist-page .shortlist-car-card.is-preferred {
    border-color: #2b78e8;
    background: linear-gradient(180deg, #fff 0%, #f8fbff 100%);
    box-shadow: 0 0 0 3px rgba(43, 120, 232, .11), 0 16px 36px rgba(16, 71, 147, .11);
}

.shortlist-card-topline {
    display: grid;
    grid-template-columns: auto auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    min-height: 1.85rem;
}

.shortlist-card-position {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    border-radius: .65rem;
    background: linear-gradient(135deg, #1567ff, #08a1df);
    color: #fff;
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .04em;
}

.shortlist-card-date {
    color: var(--shortlist-muted);
    font-size: .74rem;
    font-weight: 700;
}

.shortlist-preferred-banner {
    justify-self: start;
    overflow: hidden;
    padding: .25rem .55rem;
    border-radius: 999px;
    background: #e9f3ff;
    color: #1358af;
    font-size: .7rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shortlist-remove-action {
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: .6rem;
    background: transparent;
    color: #8a98aa;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.shortlist-remove-action:hover,
.shortlist-remove-action:focus-visible {
    border-color: #ffd0cc;
    background: #fff3f2;
    color: #c5332c;
}

.shortlist-page .shortlist-car-card-head {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: stretch;
    gap: 1rem;
}

.shortlist-car-identity {
    min-width: 0;
}

.shortlist-page .shortlist-car-identity h2 {
    margin: 0 0 .25rem;
    color: var(--shortlist-ink);
    font-size: clamp(1.08rem, 2vw, 1.3rem);
    line-height: 1.2;
    letter-spacing: -.025em;
}

.shortlist-car-identity p {
    margin: 0 0 .55rem;
    color: var(--shortlist-muted);
    font-size: .82rem;
}

.shortlist-decision-status {
    display: inline-flex;
    align-items: center;
    min-height: 1.65rem;
    padding: .2rem .5rem;
    border-radius: 999px;
    background: #eef3f8;
    color: #475a72 !important;
    font-size: .68rem !important;
    font-weight: 800;
}

.shortlist-card-scores {
    display: grid;
    grid-template-columns: repeat(2, minmax(5rem, auto));
    gap: .55rem;
}

.shortlist-page .shortlist-score,
.shortlist-page .shortlist-fit {
    display: grid;
    align-content: center;
    justify-items: start;
    min-width: 5.4rem;
    padding: .65rem .72rem;
    border: 1px solid #d8e5f4;
    border-radius: .85rem;
    background: #f7faff;
    text-align: left;
}

.shortlist-page .shortlist-score {
    color: var(--shortlist-ink) !important;
}

.shortlist-page .shortlist-score small,
.shortlist-page .shortlist-fit small {
    color: #677a93;
    font-size: .64rem;
    font-weight: 800;
    line-height: 1.1;
}

.shortlist-page .shortlist-score > strong,
.shortlist-page .shortlist-fit > strong {
    margin-top: .2rem;
    color: #1259b5;
    font-size: 1.25rem;
    line-height: 1;
}

.shortlist-page .shortlist-score > strong em {
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    color: #6c7d92;
    font-size: .62rem;
    font-style: normal;
}

.shortlist-page .shortlist-score > span {
    width: max-content;
    margin-top: .3rem;
    padding: .12rem .34rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 900;
}

.shortlist-page .shortlist-score > span.is-positive { background: #e7f8ef; color: #147348; }
.shortlist-page .shortlist-score > span.is-negative { background: #fff0ef; color: #af302b; }
.shortlist-page .shortlist-score > span.is-neutral { background: #edf1f6; color: #617187; }

.shortlist-page .shortlist-fit {
    min-width: 5.2rem;
    background: #f2edff;
    color: #5d3eb1;
}

.shortlist-page .shortlist-fit > strong {
    color: #5d3eb1;
}

.shortlist-page .shortlist-card-badges {
    min-height: 1.8rem;
}

.shortlist-page .shortlist-risk,
.shortlist-page .shortlist-alert-badge,
.shortlist-page .shortlist-stale-badge {
    min-height: 1.65rem;
    padding: .2rem .5rem;
    font-size: .69rem;
}

.shortlist-page .shortlist-card-summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .65rem;
}

.shortlist-page .shortlist-card-summary div {
    min-height: 4.25rem;
    padding: .75rem .8rem;
    border: 1px solid #e1e8f1;
    border-radius: .85rem;
    background: #f7f9fc;
}

.shortlist-page .shortlist-card-summary dt {
    color: #677890;
    font-size: .68rem;
    font-weight: 750;
}

.shortlist-page .shortlist-card-summary dd {
    margin-top: .3rem;
    font-size: 1rem;
    line-height: 1.2;
}

.shortlist-card-progress {
    display: grid;
    gap: .7rem;
    padding: .8rem;
    border: 1px solid #e0e8f2;
    border-radius: .9rem;
    background: #fbfcfe;
}

.shortlist-card-progress > div {
    display: grid;
    gap: .35rem;
}

.shortlist-card-progress span {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: #50627a;
    font-size: .72rem;
}

.shortlist-card-progress strong {
    color: var(--shortlist-ink);
    font-weight: 800;
}

.shortlist-card-progress em {
    font-style: normal;
    font-weight: 850;
}

.shortlist-card-progress progress {
    width: 100%;
    height: .5rem;
    overflow: hidden;
    border: 0;
    border-radius: 999px;
    background: #e6edf5;
    accent-color: var(--shortlist-blue);
}

.shortlist-card-progress progress::-webkit-progress-bar {
    border-radius: 999px;
    background: #e6edf5;
}

.shortlist-card-progress progress::-webkit-progress-value {
    border-radius: 999px;
    background: linear-gradient(90deg, #1768ff, #05a4e8);
}

.shortlist-card-progress progress::-moz-progress-bar {
    border-radius: 999px;
    background: linear-gradient(90deg, #1768ff, #05a4e8);
}

.shortlist-page .shortlist-card-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-self: end;
    gap: .6rem;
    margin-top: 0;
    padding-top: .1rem;
}

.shortlist-page .shortlist-card-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.55rem;
    padding-inline: .7rem;
    font-size: .78rem;
}

.shortlist-page .shortlist-highlight-summary {
    gap: .8rem;
    margin: 0;
    padding: 1rem;
    border: 1px solid var(--shortlist-border);
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 31, 49, .055);
}

.shortlist-page .shortlist-highlight-summary article {
    min-width: 0;
    padding: .9rem 1rem;
    border: 0;
    border-left: 3px solid #5d93dd;
    border-radius: .75rem;
    background: #f7faff;
}

.shortlist-page .shortlist-highlight-summary strong {
    overflow: hidden;
    margin: .35rem 0 .2rem;
    font-size: .92rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.shortlist-page .shortlist-priorities,
.shortlist-page .shortlist-differences,
.shortlist-page .shortlist-metric-controls,
.shortlist-page .shortlist-comparison-shell,
.shortlist-page .shortlist-data-health {
    margin: 0;
    border: 1px solid var(--shortlist-border);
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 31, 49, .05);
}

.shortlist-page .shortlist-priorities,
.shortlist-page .shortlist-differences,
.shortlist-page .shortlist-metric-controls,
.shortlist-page .shortlist-data-health {
    padding: 1.25rem;
}

.shortlist-page .shortlist-comparison-shell {
    padding: .85rem;
}

.shortlist-page .shortlist-metric-controls {
    align-items: center;
}

.shortlist-page .shortlist-scroll-toolbar {
    margin-bottom: .75rem;
    border-color: #d7e2f0;
    background: #f7faff;
}

.shortlist-page .shortlist-comparison {
    border-radius: .9rem;
    box-shadow: inset -1.5rem 0 1.5rem -1.8rem rgba(15, 31, 49, .4);
}

.shortlist-page .shortlist-grid-car.shortlist-grid-sticky {
    background: #edf4fd;
}

.shortlist-page .shortlist-grid-car.is-preferred {
    background: #deecff;
}

.shortlist-page .shortlist-grid-value.is-notable {
    background: #eaf8f1;
}

@media (max-width: 980px) {
    .shortlist-page .shortlist-hero {
        grid-template-columns: 1fr;
    }

    .shortlist-page .shortlist-hero-actions {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
    }

    .shortlist-clear-action {
        grid-column: 1 / -1;
    }

    .shortlist-page .shortlist-cards {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 620px) {
    .shortlist-page {
        gap: 1rem;
        padding-top: .2rem;
    }

    .shortlist-page .shortlist-hero,
    .shortlist-overview,
    .shortlist-page .shortlist-priorities,
    .shortlist-page .shortlist-differences,
    .shortlist-page .shortlist-metric-controls,
    .shortlist-page .shortlist-data-health {
        padding: 1rem;
        border-radius: 1rem;
    }

    .shortlist-page .shortlist-hero-actions,
    .shortlist-page .shortlist-card-actions {
        grid-template-columns: 1fr;
    }

    .shortlist-section-heading {
        align-items: center;
    }

    .shortlist-card-topline {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .shortlist-preferred-banner {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .shortlist-page .shortlist-car-card-head {
        grid-template-columns: 1fr !important;
    }

    .shortlist-card-scores {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .shortlist-page .shortlist-score,
    .shortlist-page .shortlist-fit {
        width: 100%;
        min-width: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .shortlist-page .shortlist-car-card {
        transition: none;
    }
}