/**
 * PlaidCars — cars surface (archive + detail).
 *
 * Brand tokens are defined here as CSS custom properties so future
 * refactors (dark mode, a/b tests) can swap values without touching
 * the rest of the file. Defaults match Wolf's existing astra-child
 * baseline: #900 red, #f9f9f9 background, black text, white on red
 * for inverse chrome.
 *
 * Mobile-first. Breakpoints follow Astra: 543px (mobile→tablet) and
 * 921px (tablet→desktop).
 *
 * Voice: closer to a Bloomberg terminal than a classifieds site. No
 * SaaS gradients, no decorative shadows. Numbers in tabular-nums.
 */

:root {
    --pc-accent:        #900;
    --pc-accent-hover:  #c00;
    --pc-bg:            #f9f9f9;
    --pc-card-bg:       #ffffff;
    --pc-text:          #0a0a0a;
    --pc-text-muted:    #555;
    --pc-text-faint:    #888;
    --pc-border:        #e5e5e5;
    --pc-border-strong: #c8c8c8;
    --pc-radius:        4px;
    --pc-shadow-card:   0 1px 0 rgba(0,0,0,.04);

    /* Deal-score palette — semantic, not decorative */
    --pc-deal-great:    #1f7a1f;
    --pc-deal-good:     #58a92e;
    --pc-deal-fair:     #6c6c6c;
    --pc-deal-above:    #c98c1a;
    --pc-deal-over:     #b71c1c;
}

/* ============================================================
 * Reset / typography for the cars surface only — avoid bleeding
 * into other Astra pages.
 * ============================================================ */
.pc-tm-archive,
.pc-tm-car {
    background: var(--pc-bg);
    color: var(--pc-text);
    font-family: system-ui, -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
.pc-tm-archive *,
.pc-tm-car * { box-sizing: border-box; }

.pc-tm-archive h1, .pc-tm-archive h2, .pc-tm-archive h3,
.pc-tm-car h1, .pc-tm-car h2, .pc-tm-car h3 {
    color: var(--pc-accent);
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}

/* ============================================================
 * Archive page layout
 * ============================================================ */
.pc-tm-archive {
    padding: 16px;
    max-width: 1440px;
    margin: 0 auto;
}

.pc-tm-archive__header { margin-bottom: 12px; }
.pc-tm-archive__title { font-size: 22px; margin: 0 0 4px; }
.pc-tm-archive__lede  { color: var(--pc-text-muted); margin: 0 0 12px; font-size: 14px; }

/* Breadcrumbs (landings only) */
.pc-tm-archive__crumbs {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pc-text-faint);
}
.pc-tm-archive__crumb { color: var(--pc-text-muted); text-decoration: none; }
.pc-tm-archive__crumb:hover { color: var(--pc-accent); }
.pc-tm-archive__crumb--current { color: var(--pc-text); }
.pc-tm-archive__crumb-sep { color: var(--pc-text-faint); padding: 0 4px; }

/* Landing intro paragraph (above the fold, after H1) */
.pc-tm-archive__intro {
    color: var(--pc-text);
    font-size: 14px;
    line-height: 1.55;
    margin: 0 0 16px;
    max-width: 760px;
}
.pc-tm-archive__intro p { margin: 0 0 8px; }
.pc-tm-archive__intro p:last-child { margin-bottom: 0; }

/* Landing footer block (after results) */
.pc-tm-archive__landing-footer {
    margin-top: 32px;
    padding: 20px 24px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    color: var(--pc-text-muted);
    font-size: 14px;
    line-height: 1.55;
    max-width: 760px;
}
.pc-tm-archive__landing-footer p { margin: 0 0 8px; }
.pc-tm-archive__landing-footer p:last-child { margin: 0; }
.pc-tm-archive__landing-footer a { color: var(--pc-accent); }
.pc-tm-archive__landing-footer a:hover { color: var(--pc-accent-hover); }

.pc-tm-archive__layout {
    display: block;   /* mobile: stacked */
}

@media (min-width: 921px) {
    .pc-tm-archive { padding: 24px; }
    .pc-tm-archive__title { font-size: 28px; }
    .pc-tm-archive__layout {
        display: grid;
        /* v0.61.0 CR-059 — `minmax(0, 1fr)` instead of bare `1fr` so
         * the results column always claims the remaining viewport
         * width regardless of inner content size. Bare `1fr` is
         * `minmax(auto, 1fr)`, and `auto` measures intrinsic
         * content; on 0-result filter combinations (e.g.
         * `?model=cybertruck&trim=awd_dual_motor`) the panel only
         * contained the "No Teslas match these filters" line, so the
         * column shrank to ~⅓ width, leaving most of the viewport
         * empty grey. `minmax(0, 1fr)` lets the column shrink
         * children but never below its allotted track size. */
        grid-template-columns: 260px minmax(0, 1fr);
        gap: 24px;
        align-items: start;
    }
}

/* CR-010 — Mobile filter toggle (legacy "Filters [N]" button) is no
 * longer rendered in the template; the four chips + "More filters"
 * <details> replace it. The class selectors are kept defined here
 * as inert no-ops so any cached HTML or external link with the data
 * attribute doesn't break layout. */
.pc-tm-archive__filter-toggle { display: none; }

/* ============================================================
 * CR-010 — Mobile filter bar collapse
 *
 * Mobile (<921px): four always-visible chips (Market · Year · Trim ·
 * Price max) + a "More filters" <details> expander wrapping every
 * fieldset. The chip row is hidden on desktop; the <summary> inside
 * the expander is also hidden on desktop so the sidebar shows its
 * full form. Touch targets are ≥44×44px per CR-010 §"Risks".
 * ============================================================ */
.pc-tm-archive__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.pc-tm-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid var(--pc-border-strong);
    background: var(--pc-card-bg);
    color: var(--pc-text);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.pc-tm-chip:hover,
.pc-tm-chip:focus-visible {
    border-color: var(--pc-text);
    color: var(--pc-text);
    text-decoration: none;
    outline: none;
}
.pc-tm-chip--add { color: var(--pc-text-muted); border-style: dashed; }
.pc-tm-chip--add:hover,
.pc-tm-chip--add:focus-visible { color: var(--pc-text); border-style: solid; }
.pc-tm-chip__plus {
    font-weight: 700;
    font-size: 16px;
    line-height: 1;
    color: var(--pc-accent);
}

.pc-tm-chip--active {
    background: var(--pc-text);
    color: #fff;
    border-color: var(--pc-text);
    padding: 6px 6px 6px 14px;  /* tight on the right; the × button has its own padding */
}
.pc-tm-chip--active:hover { color: #fff; border-color: var(--pc-text); }
.pc-tm-chip__label {
    font-weight: 600;
    letter-spacing: -.005em;
}
.pc-tm-chip__clear {
    /* The × tap target. Padding + min size keeps the hit area ≥30px
     * inside the 44px-tall chip; the chip's own padding pads the rest. */
    appearance: none;
    background: transparent;
    border: 0;
    color: #fff;
    font-size: 18px;
    line-height: 1;
    font-weight: 600;
    margin-left: 4px;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    min-width: 32px;
    min-height: 32px;
}
.pc-tm-chip__clear:hover,
.pc-tm-chip__clear:focus-visible {
    background: var(--pc-accent);
    color: #fff;
    outline: none;
}

/* Desktop hides the chip row — the sidebar is the canonical filter
 * surface and the chips would be visually redundant alongside it. */
@media (min-width: 921px) {
    .pc-tm-archive__chips { display: none; }
}

/* "More filters" <details> expander */
.pc-tm-more-filters { display: block; }
.pc-tm-more-filters__summary {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px;
    margin: 0 0 12px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius);
    font-weight: 600;
    font-size: 14px;
    color: var(--pc-text);
    cursor: pointer;
    list-style: none;            /* hides the default disclosure triangle */
    user-select: none;
}
.pc-tm-more-filters__summary::-webkit-details-marker { display: none; }
.pc-tm-more-filters__summary::marker { content: ''; }
.pc-tm-more-filters__summary:hover { border-color: var(--pc-text); }
.pc-tm-more-filters__summary:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: -1px;
    border-color: var(--pc-accent);
}
.pc-tm-more-filters__label { flex: 1; }
.pc-tm-more-filters__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pc-accent);
    color: #fff;
    border-radius: 999px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
}
.pc-tm-more-filters__badge[hidden] { display: none; }
.pc-tm-more-filters__chevron {
    color: var(--pc-text-muted);
    transition: transform .15s;
}
.pc-tm-more-filters[open] .pc-tm-more-filters__chevron { transform: rotate(180deg); }

/* Desktop: the sidebar IS the form. The <details> summary is hidden;
 * the archive JS adds `open=""` on mount so the contents flow
 * naturally. Without JS, the user would see a "More filters" button
 * on desktop — degraded but not broken. */
@media (min-width: 921px) {
    .pc-tm-more-filters__summary { display: none; }
}

/* Mobile-only "Done" button — closes the expander after applying.
 * Visible on mobile inside the filter actions row; the JS hides it
 * when the <details> is closed so it doesn't sit awkwardly with the
 * Apply / Reset buttons in the chip-only state. */
.pc-tm-archive__filter-done {
    display: inline-block;
    min-height: 44px;
}
@media (min-width: 921px) {
    /* v0.61.1 OPS-CR-147 §2 — specificity bumped from (0,1,0) to
     * (0,2,0) so this hide rule survives the later `.pc-tm-btn
     * { display: inline-block }` cascade at line ~596. The Done
     * button carries both classes; equal-specificity source-order
     * was winning at `.pc-tm-btn`, leaving the mobile-only Done
     * button visible on desktop. The .pc-tm-btn.pc-tm-archive__
     * filter-done compound selector wins cleanly. */
    .pc-tm-btn.pc-tm-archive__filter-done { display: none; }
}

/* Touch-target floor on Apply / Reset / form selects on mobile to
 * match the 44×44 chip floor (CR-010 §"Risks" line 2). */
@media (max-width: 920px) {
    .pc-tm-btn { min-height: 44px; }
    .pc-tm-field select,
    .pc-tm-field input[type="number"] { min-height: 44px; }
    .pc-tm-radio,
    .pc-tm-toggle { min-height: 32px; }  /* checkbox/radio rows are taller via the label gap */
}

/* ============================================================
 * CR-009 — Orientation matrix (trim × year cohort grid)
 *
 * Mobile (<640px): vertical list of cohort cards (the .pc-tm-matrix__cards
 *   <ul>); the desktop grid is display:none. Tap target = whole card.
 * Desktop (≥640px): the .pc-tm-matrix__grid <table> reveals; the cards
 *   <ul> is display:none.
 *
 * The 640px breakpoint is intentionally below CR-010's 921px sidebar
 * breakpoint — per the implementation prompt §"Mobile cliff at
 * 640–767px", the matrix benefits from showing its desktop grid earlier
 * than the filter sidebar reflows.
 *
 * Inherits the Plate Design System v1 grammar (white-rect + thin border
 * + plate typography); cells use the price-chip grammar. See
 * docs/frontend-launch/UAE-DESIGN-SYSTEM-v1.md → pc-tm-matrix-cell.
 * ============================================================ */
.pc-tm-matrix {
    margin: 0 0 16px;
    padding: 12px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
}
.pc-tm-matrix__intro {
    margin: 0 0 10px;
    font-size: 14px;
    color: var(--pc-text);
    font-weight: 500;
    letter-spacing: -.005em;
}
.pc-tm-matrix__empty {
    margin: 0;
    font-size: 13px;
    color: var(--pc-text-muted);
}

/* ----- Mobile cohort-card list (<640px) ----- */
.pc-tm-matrix__cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-tm-matrix__card { margin: 0; }
.pc-tm-matrix__card-link {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    min-height: 44px;
    background: var(--pc-bg);
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius);
    color: var(--pc-text);
    text-decoration: none;
    transition: border-color .12s, background .12s;
}
.pc-tm-matrix__card-link:hover,
.pc-tm-matrix__card-link:focus-visible {
    border-color: var(--pc-text);
    background: var(--pc-card-bg);
    outline: none;
}
.pc-tm-matrix__card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-weight: 600;
    font-size: 14px;
    color: var(--pc-text);
}
.pc-tm-matrix__card-year { color: var(--pc-accent); font-weight: 700; }
.pc-tm-matrix__card-trim { letter-spacing: -.005em; }
.pc-tm-matrix__card-body {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 13px;
    color: var(--pc-text-muted);
    font-variant-numeric: tabular-nums;
}
.pc-tm-matrix__card-count { font-weight: 600; color: var(--pc-text); }
.pc-tm-matrix__card-sep   { color: var(--pc-text-faint); }
.pc-tm-matrix__card-median { color: var(--pc-text-muted); }

/* ----- Desktop trim × year grid (≥640px) ----- */
.pc-tm-matrix__grid-wrap { display: none; }
.pc-tm-matrix__grid { width: 100%; border-collapse: separate; border-spacing: 4px; }
.pc-tm-matrix__corner {
    width: 1%;
    text-align: left;
    padding: 0;
    background: transparent;
    border: 0;
}
.pc-tm-matrix__col-head {
    padding: 4px 6px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pc-text-faint);
    font-weight: 600;
    text-align: center;
    background: transparent;
    border: 0;
}
.pc-tm-matrix__row-head {
    padding: 6px 8px;
    font-size: 13px;
    color: var(--pc-text);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
    background: transparent;
    border: 0;
}
.pc-tm-matrix__cell {
    padding: 0;
    text-align: center;
    vertical-align: middle;
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius);
    background: var(--pc-card-bg);
    min-width: 56px;
    min-height: 36px;
    font-variant-numeric: tabular-nums;
}
.pc-tm-matrix__cell--empty {
    background: var(--pc-bg);
    border-style: dashed;
    border-color: var(--pc-border);
    color: var(--pc-text-faint);
    font-size: 14px;
    pointer-events: none;
    opacity: .55;
}
.pc-tm-matrix__cell--active { transition: border-color .12s, background .12s; }
.pc-tm-matrix__cell--active:hover { border-color: var(--pc-text); }
.pc-tm-matrix__cell-link {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 4px;
    padding: 8px 6px;
    color: var(--pc-text);
    text-decoration: none;
    font-size: 13px;
    line-height: 1.1;
}
.pc-tm-matrix__cell-link:hover,
.pc-tm-matrix__cell-link:focus-visible {
    color: var(--pc-text);
    text-decoration: none;
    outline: none;
}
.pc-tm-matrix__cell-link:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: -1px;
}
.pc-tm-matrix__cell-count  { font-weight: 700; }
.pc-tm-matrix__cell-sep    { color: var(--pc-text-faint); }
.pc-tm-matrix__cell-median { color: var(--pc-text-muted); }

@media (min-width: 640px) {
    .pc-tm-matrix { padding: 16px; }
    .pc-tm-matrix__intro { font-size: 15px; margin-bottom: 12px; }
    .pc-tm-matrix__cards { display: none; }
    .pc-tm-matrix__grid-wrap { display: block; overflow-x: auto; }
}

/* On the desktop sidebar layout (≥921px) the matrix sits in the
 * grid's main column above the result list, spanning the full width
 * the layout grid hands it. Nothing extra needed — block-level by
 * default. The sidebar form is in a separate grid column. */
.pc-tm-archive__layout > .pc-tm-matrix { /* no-op anchor selector for clarity */ }

/* ============================================================
 * Filter rail
 * ============================================================ */
.pc-tm-archive__filters {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 16px;
    display: none;
    margin-bottom: 16px;
}
.pc-tm-archive__filters.is-open { display: block; }
@media (min-width: 921px) {
    .pc-tm-archive__filters {
        display: block;
        position: sticky;
        top: 24px;
        max-height: calc(100vh - 48px);
        overflow: auto;
    }
}

.pc-tm-filter {
    border: 0;
    margin: 0 0 16px;
    padding: 0;
    border-bottom: 1px solid var(--pc-border);
    padding-bottom: 16px;
}
.pc-tm-filter:last-of-type { border-bottom: 0; padding-bottom: 0; }
.pc-tm-filter legend {
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--pc-text);
    margin-bottom: 8px;
    padding: 0;
}
.pc-tm-filter__hint {
    color: var(--pc-text-faint);
    font-size: 12px;
    margin: 0 0 8px;
    line-height: 1.4;
}

.pc-tm-filter--grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
}
.pc-tm-filter--grid legend { grid-column: 1 / -1; }

.pc-tm-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 8px;
}
.pc-tm-field:last-child { margin-bottom: 0; }
.pc-tm-field__label {
    font-size: 12px;
    color: var(--pc-text-muted);
}
.pc-tm-field select,
.pc-tm-field input[type="number"] {
    background: #fff;
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius);
    padding: 8px 10px;
    font: inherit;
    color: inherit;
    width: 100%;
}
.pc-tm-field select:focus,
.pc-tm-field input:focus {
    outline: 2px solid var(--pc-accent);
    outline-offset: -1px;
    border-color: var(--pc-accent);
}

.pc-tm-radio,
.pc-tm-toggle {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 14px;
    line-height: 1.4;
    padding: 4px 0;
    cursor: pointer;
}
.pc-tm-radio input,
.pc-tm-toggle input { margin-top: 2px; }

.pc-tm-archive__filter-actions {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.pc-tm-btn {
    display: inline-block;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--pc-radius);
    font: inherit;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
}
.pc-tm-btn--primary {
    background: var(--pc-accent);
    color: #fff;
}
.pc-tm-btn--primary:hover { background: var(--pc-accent-hover); color: #fff; }
.pc-tm-btn--ghost {
    background: transparent;
    color: var(--pc-text);
    border-color: var(--pc-border-strong);
}
.pc-tm-btn--ghost:hover { border-color: var(--pc-text); color: var(--pc-text); }

/* ============================================================
 * Results: count bar, grid, cards
 * ============================================================ */
.pc-tm-archive__results { min-width: 0; }
.pc-tm-archive__results[aria-busy="true"] { opacity: .5; transition: opacity .15s; }

.pc-tm-archive-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    margin-bottom: 12px;
}
.pc-tm-archive-count {
    margin: 0;
    font-size: 14px;
    color: var(--pc-text-muted);
}
.pc-tm-archive-count strong {
    color: var(--pc-text);
    font-weight: 700;
}
/* v0.31 (CR-003 PR-003b): catalogue context line — "of Y tracked in UAE" */
.pc-tm-archive-count__context {
    color: var(--pc-text-faint);
    font-weight: 400;
}
.pc-tm-archive-count__context-note {
    font-size: 12px;
    color: var(--pc-text-faint);
}
/* v0.37 (CR-004): archive-card seller chip — business name pill / private pill */
.pc-tm-archive-card__seller {
    margin: 4px 0 0;
    line-height: 1;
}
.pc-tm-chip--business,
.pc-tm-chip--private {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    line-height: 1.5;
    text-transform: none;
    letter-spacing: 0;
}
.pc-tm-chip--business {
    background: #e8f0fe;
    color: #1a4789;
    border: 1px solid #c1d3ee;
}
.pc-tm-chip--private {
    background: #f3f3f3;
    color: #555;
    border: 1px solid #ddd;
}

/* v0.34 (CR-001 PR-001c): non-Model-Y empty-state — "No Model 3 listings yet" */
.pc-tm-archive-empty--model {
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    max-width: 640px;
    margin: 24px auto;
    text-align: center;
}
.pc-tm-archive-empty--model p {
    margin: 0 0 10px;
    font-size: 15px;
    color: var(--pc-text-muted);
    line-height: 1.5;
}
.pc-tm-archive-empty--model p:last-child { margin-bottom: 0; }
.pc-tm-archive-empty--model strong {
    color: var(--pc-text);
    font-weight: 700;
}
.pc-tm-archive-sort select {
    background: #fff;
    border: 1px solid var(--pc-border-strong);
    border-radius: var(--pc-radius);
    padding: 6px 10px;
    font: inherit;
    font-size: 13px;
}

/* ============================================================
 * v0.51.3 (CR-011) — Active-filter summary strip
 *
 * Sits between the orientation matrix (CR-009) and the legacy
 * archive-bar (which now carries only the page-N-of-M context).
 * Mobile: stacks summary-on-top, sort-below. Desktop (≥640px):
 * row layout, summary on left, sort on right. The "Clear all"
 * link inherits the archive-empty link colours so the affordance
 * reads as a reset action in both states.
 * ============================================================ */
.pc-tm-archive-summary {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 10px 12px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    margin-bottom: 8px;
}
@media (min-width: 640px) {
    .pc-tm-archive-summary {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
    }
}
.pc-tm-archive-summary__phrase {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-text);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.pc-tm-archive-summary__count {
    font-weight: 700;
    color: var(--pc-text);
}
.pc-tm-archive-summary__sep {
    color: var(--pc-text-faint);
}
.pc-tm-archive-summary__dims {
    color: var(--pc-text);
    font-weight: 500;
    /* Truncate on a single line at narrow widths; the +N affordance
     * handles overflow semantically anyway. */
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-tm-archive-summary__dims--default {
    font-weight: 400;
    color: var(--pc-text-muted);
}
.pc-tm-archive-summary__more {
    color: var(--pc-text-muted);
    font-size: 13px;
    font-weight: 400;
}
.pc-tm-archive-summary__clear {
    margin-left: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-accent);
    text-decoration: none;
}
.pc-tm-archive-summary__clear:hover {
    color: var(--pc-accent-hover);
    text-decoration: underline;
}
.pc-tm-archive-summary__sort {
    flex-shrink: 0;
}

/* v0.55.1 (CR-006): "Business first / Private first" toggle chip pair.
 * Lives to the LEFT of the sort dropdown when sort=sold_by. On mobile
 * <640px the .pc-tm-archive-summary is flex-direction: column, so the
 * toggle naturally stacks above the dropdown (which itself sits above
 * the count phrase due to source order). On ≥640px the row layout
 * places it inline with the dropdown.
 *
 * Visual vocabulary reuses .pc-tm-chip + .pc-tm-chip--active from the
 * filter chip system — no new colors, just a slightly tighter padding
 * to keep the pair compact. */
.pc-tm-archive-summary__sold-by-toggle {
    display: inline-flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.pc-tm-chip--sold-by-toggle {
    padding: 4px 10px;
    font-size: 13px;
    border: 1px solid var(--pc-border);
    border-radius: 999px;
    color: var(--pc-text-muted);
    background: transparent;
    text-decoration: none;
    line-height: 1.4;
    white-space: nowrap;
}
.pc-tm-chip--sold-by-toggle:hover,
.pc-tm-chip--sold-by-toggle:focus-visible {
    color: var(--pc-text);
    border-color: var(--pc-text);
    text-decoration: none;
}
.pc-tm-chip--sold-by-toggle.pc-tm-chip--active {
    background: var(--pc-text);
    color: #fff;
    border-color: var(--pc-text);
    cursor: default;
}
.pc-tm-chip--sold-by-toggle.pc-tm-chip--active:hover {
    color: #fff;
    border-color: var(--pc-text);
}

.pc-tm-archive-empty {
    padding: 24px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    color: var(--pc-text-muted);
    text-align: center;
}
.pc-tm-archive-empty a { color: var(--pc-accent); font-weight: 600; }
.pc-tm-archive-empty a:hover { color: var(--pc-accent-hover); }

.pc-tm-archive-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
/* v0.53.3 — operator pivot a second time: drop the 2-col tier entirely.
 * Grid stays 1-col at every width. Mobile keeps the existing block layout
 * (image on top, body below). Desktop gets the horizontal flex layout
 * inside the card (image left, body right) at the full single-column width
 * so the image isn't squeezed into a tile that crops the car body. The
 * gap bumps up at >=720px so the cards don't run into each other when
 * they're full-width and taller. */
@media (min-width: 720px) { .pc-tm-archive-grid { gap: 16px; } }

.pc-tm-archive-card {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
    transition: transform .15s, box-shadow .15s;
    box-shadow: var(--pc-shadow-card);
}
.pc-tm-archive-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.pc-tm-archive-card__link {
    display: block;
    color: inherit;
    text-decoration: none;
}
.pc-tm-archive-card__link:hover,
.pc-tm-archive-card__link:focus { color: inherit; text-decoration: none; }

.pc-tm-archive-card__image-wrap {
    position: relative;
    background: var(--pc-bg);
    aspect-ratio: 16 / 10;
    overflow: hidden;
}
.pc-tm-archive-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pc-tm-archive-card__body { padding: 12px 14px 14px; }

/* v0.53.3 — horizontal card layout at >=720px, now applied to the full
 * single-column card (no 2-col grid above it). Image-left / facts-right
 * with the image at a fixed flex-basis so it doesn't grow with viewport
 * width — at 1200-1400px content widths the image still sits at a
 * sensible 360px so the whole car body is visible. The 16:10 aspect-ratio
 * is preserved (NOT overridden with `auto`) so the image keeps its
 * proportions instead of getting stretched/cropped to the card's body
 * height. The card grows vertically to fit whichever side is taller. */
@media (min-width: 720px) {
    .pc-tm-archive-card__link {
        display: flex;
        align-items: stretch;
        /* No fixed min-height — the image's intrinsic 16:10 aspect ratio
         * sets the card height; the body fills alongside. */
        /* v0.61.0 CR-062 — explicit flex-direction defends against any
         * future global `.pc-tm-archive-card__link { flex-direction:
         * column }` rule (e.g. a mobile reset that leaks into desktop)
         * collapsing the horizontal layout. The original CR-062 cache-
         * theory diagnosis was incorrect — Wolf has no WP-Rocket; W3
         * Total Cache is disabled; Cloudflare was purged before the
         * audit ran. The real cause of the v0.61.0-era collapse was a
         * nested <a class="...cohort-link" href="/methodology/"> inside
         * the outer `<a class="...__link">` for insufficient-data cards
         * (every Cybertruck), which the WHATWG parser auto-closes the
         * outer anchor around — destroying the flex container BEFORE
         * any rule on it can apply. Fixed in OPS-CR-147 §1 by moving
         * the cohort line out to a sibling of the link. These
         * defensive rules remain as defence-in-depth against future
         * regressions of the flex rule itself. */
        flex-direction: row;
    }
    .pc-tm-archive-card__image-wrap {
        flex: 0 0 360px;
        /* Keep aspect-ratio: 16 / 10 from the base rule. The wrap is
         * 360x225 by default; image stretches to fill on object-fit: cover. */
        /* v0.61.0 CR-062 — explicit max-width hardens against any
         * future rule (or stale cached rule) overriding flex-basis;
         * the image-wrap cannot exceed its allotted column width even
         * if the flex shorthand parses differently in some browser. */
        max-width: 360px;
    }
    .pc-tm-archive-card__body {
        flex: 1 1 auto;
        min-width: 0; /* let the spec strip truncate inside the body */
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 16px 18px 18px;
    }
}
/* v0.53.3 — wider workspace for the horizontal card on larger screens.
 * At >=1024px the image grows to 440px so it's properly readable; the body
 * column still has ~700-900px depending on container width, plenty for
 * the spec strip + cohort line + expander + chip row. */
@media (min-width: 1024px) {
    .pc-tm-archive-card__image-wrap {
        flex: 0 0 440px;
        /* v0.61.0 CR-062 — bump max-width in sync with flex-basis. */
        max-width: 440px;
    }
}
.pc-tm-archive-card__title {
    font-size: 15px;
    color: var(--pc-text);
    font-weight: 600;
    margin: 0 0 4px;
    line-height: 1.3;
}
/* ============================================================
 * v0.52.2 (CR-012 PR-012a) — Dense card spec strip
 *
 * Replaces the legacy meta line + standalone price-line + sparkline
 * footline. 3-column × 2-row grid on desktop; 2-column × 3-row stack
 * on narrow mobile (<420px) so labels never wrap awkwardly.
 *
 * Layout selectors removed in this PR (no longer rendered):
 *   .pc-tm-archive-card__price-line  — price now lives in PRICE cell
 *   .pc-tm-archive-card__meta        — replaced by spec strip
 *   .pc-tm-archive-card__footline    — sparkline promoted, sources line dropped
 *   .pc-tm-archive-card__sources     — multi-source count moved off-card
 *   .pc-tm-badge--dom                — DOM moved into spec strip DAYS cell
 * ============================================================ */
.pc-tm-archive-card__price {
    color: var(--pc-accent);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
}
.pc-tm-archive-card__price--unknown {
    color: var(--pc-text-faint);
    font-weight: 500;
    font-size: 14px;
}
.pc-tm-archive-card__km {
    /* Retained for any partial that still references it (e.g. summary
     * surfaces in admin previews). Card cells now use .pc-tm-spec-cell. */
    color: var(--pc-text-muted);
    font-size: 13px;
}

.pc-tm-archive-card__spec-strip {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    gap: 8px 12px;
    margin: 8px 0 0;
    padding: 0;
}
.pc-tm-spec-cell {
    margin: 0;
    min-width: 0; /* allow long values to truncate within the cell */
}
.pc-tm-spec-cell__label {
    display: block;
    margin: 0;
    color: var(--pc-text-faint);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.2;
}
.pc-tm-spec-cell__value {
    display: block;
    margin: 2px 0 0;
    color: var(--pc-text);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    /* Truncate overlong specs (e.g. "GCC · HW3 · …") rather than break the grid. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pc-tm-spec-cell--price .pc-tm-spec-cell__value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    /* Price cell hosts the inline sparkline; let it span vertical room. */
    white-space: nowrap;
    overflow: visible;
}
.pc-tm-spec-cell--price .pc-tm-archive-card__price {
    font-size: 15px;
}
.pc-tm-spec-cell--days .pc-tm-spec-cell__value {
    color: var(--pc-text-muted);
    font-size: 12px;
}

/* Mobile fallback: 2 columns × 3 rows so the strip never pinches at 375px.
 * Per CR-012 §"PR-012a" line 33: 2-col × 3-row stack is acceptable at narrow widths. */
@media (max-width: 419px) {
    .pc-tm-archive-card__spec-strip {
        grid-template-columns: 1fr 1fr;
        gap: 8px 10px;
    }
}

.pc-tm-archive-card__spark {
    display: inline-flex;
    align-items: center;
    color: var(--pc-text-faint);
    flex: 0 0 auto;
}
.pc-tm-sparkline { display: block; overflow: visible; }
.pc-tm-sparkline--down { color: var(--pc-deal-great); }
.pc-tm-sparkline--up   { color: var(--pc-deal-over); }
.pc-tm-sparkline--flat { color: var(--pc-text-faint); }

/* ============================================================
 * v0.52.3 (CR-012 PR-012b) — Cohort-context micro-line
 *
 * Sits BELOW the spec strip on every archive card. Three pieces:
 *
 *   {Verdict}  ·  AED Xk below N-car median  ·  [inline range bar]
 *
 * The verdict is colored by deal-score band to match the corner
 * badge palette. The range bar is a thin 80×8 SVG (border + median
 * tick + subject marker) using currentColor so it inherits the row's
 * text color. insufficient_data path uses muted text + a methodology
 * link, NO range bar (per CR-012 PR-012b §"insufficient_data path").
 * ============================================================ */
.pc-tm-archive-card__cohort {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 6px;
    margin: 8px 0 0;
    color: var(--pc-text-muted);
    font-size: 12px;
    line-height: 1.3;
}
.pc-tm-archive-card__cohort-verdict {
    color: var(--pc-text);
    font-weight: 600;
}
.pc-tm-archive-card__cohort--great_deal   .pc-tm-archive-card__cohort-verdict { color: var(--pc-deal-great); }
.pc-tm-archive-card__cohort--good_deal    .pc-tm-archive-card__cohort-verdict { color: var(--pc-deal-good); }
.pc-tm-archive-card__cohort--fair_price   .pc-tm-archive-card__cohort-verdict { color: var(--pc-text); }
.pc-tm-archive-card__cohort--above_market .pc-tm-archive-card__cohort-verdict { color: var(--pc-deal-above); }
.pc-tm-archive-card__cohort--overpriced   .pc-tm-archive-card__cohort-verdict { color: var(--pc-deal-over); }
.pc-tm-archive-card__cohort--insufficient { color: var(--pc-text-faint); }
.pc-tm-archive-card__cohort--insufficient .pc-tm-archive-card__cohort-verdict { color: var(--pc-text-muted); font-weight: 500; }
.pc-tm-archive-card__cohort-sep {
    color: var(--pc-text-faint);
}
.pc-tm-archive-card__cohort-delta {
    color: var(--pc-text-muted);
    font-variant-numeric: tabular-nums;
}
.pc-tm-archive-card__cohort-bar {
    display: inline-flex;
    align-items: center;
    color: var(--pc-border-strong);
    flex: 0 0 auto;
    margin-left: auto; /* push the bar to the right edge when the line has room */
}
.pc-tm-archive-card__cohort-link {
    color: var(--pc-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--pc-border-strong);
    text-underline-offset: 2px;
    font-size: 12px;
}
.pc-tm-archive-card__cohort-link:hover,
.pc-tm-archive-card__cohort-link:focus {
    color: var(--pc-accent);
    text-decoration-color: currentColor;
}

/* v0.61.1 OPS-CR-147 §1 — sibling-context cohort padding.
 *
 * Pre-CR-147: cohort lived inside `.pc-tm-archive-card__body` and
 * inherited the body's 14/18px left/right padding, plus the body's
 * 14/18px bottom padding gave it breathing room below. The cohort's
 * own `margin-top: 8px` (above) supplied the gap between spec strip
 * and cohort.
 *
 * Post-CR-147: cohort is a SIBLING of `.pc-tm-archive-card__link`
 * (moved out because its insufficient-data branch emits an inner <a>
 * which the parser auto-closed the outer link around — the entire
 * card flex container was destroyed). Now flush against the card edge
 * with no padding context. Re-apply horizontal padding to mirror the
 * body so the cohort aligns with the spec strip above; zero out
 * margin-top because the body's own bottom padding now provides
 * the gap. Bottom padding here gives the same rhythm before the
 * `.pc-tm-archive-card__specs-expander` border-top dashed-line kicks
 * in below. Direct-child selector keeps the rule scoped to the
 * sibling position only (the dense card variant nests cohorts
 * deeper — left intentionally untouched). */
.pc-tm-archive-card > .pc-tm-archive-card__cohort {
    margin-top: 0;
    padding: 0 14px 14px;
}
@media (min-width: 720px) {
    .pc-tm-archive-card > .pc-tm-archive-card__cohort {
        padding: 0 18px 18px;
    }
}

/* The range-bar SVG itself. Currentcolor stroke for border + tick;
 * the subject marker uses currentColor too but is overridden to a
 * darker token so it reads as the dominant element of the bar.
 * Component spec lives in `docs/frontend-launch/UAE-DESIGN-SYSTEM-v1.md`
 * under `pc-tm-range-bar` (v1.1 addition). */
.pc-tm-range-bar {
    display: block;
    overflow: visible;
}
.pc-tm-range-bar__marker {
    color: var(--pc-text);
}
.pc-tm-archive-card__cohort-bar .pc-tm-range-bar__marker {
    fill: var(--pc-text);
}

/* ============================================================
 * v0.52.4 (CR-012 PR-012c) — Quick-narrow chip row
 *
 * A row of up to three additive-filter chips at the card footer.
 * Order: trim, year, specs region. Each chip is an <a> that adds
 * its filter to the current URL state (no JS). Smart suppression
 * lives in pc_tm_card_narrow_chips() — when all three dimensions
 * are already pinned in the URL, the row renders zero chips and
 * the .pc-tm-archive-card__narrow container is absent.
 *
 * The .pc-tm-chip--narrow variant is a slightly denser take on
 * the standard .pc-tm-chip--add (shorter, smaller type), tuned
 * for the card footer where the chip row is information-density-
 * sensitive. The shared .pc-tm-chip grammar (plus icon, dashed
 * border on --add, hover state) is inherited unchanged.
 * ============================================================ */
.pc-tm-archive-card__narrow {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0;
    padding: 0;
}
.pc-tm-chip--narrow {
    /* Denser than the desktop filter-bar chips: 32px tall, 11px
     * type, 4px×10px padding. Still meets the WCAG 2.5.5 minimum
     * for inline link tap targets (Level AAA target size is the
     * 44px minimum we use on the main chip; AA + the row context
     * here keeps it usable for thumb taps without overwhelming
     * the card body). */
    min-height: 32px;
    padding: 4px 10px;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .01em;
}
.pc-tm-chip--narrow .pc-tm-chip__plus {
    font-size: 13px;
}
.pc-tm-chip--narrow .pc-tm-chip__label {
    font-weight: 500;
}

/* ============================================================
 * v0.52.6 (CR-014) — Specs-region always-visible expander
 *
 * A pure-CSS <details>/<summary> disclosure that sits below the
 * card body (sibling of the main anchor, alongside the narrow
 * chip row from PR-012c). Default-collapsed: shows a one-line
 * summary answering "is this a GCC car?". Tap-to-expand reveals
 * a 3–5-sentence paragraph and a link to /methodology/#specs-regions.
 *
 * No JavaScript. The native <details> element provides keyboard
 * accessibility (tab to summary, enter/space toggles), screen-
 * reader semantics, and tap-to-expand on mobile.
 *
 * The collapsed footprint is fixed at 32px so toggling between
 * cards doesn't cause CLS. The chevron rotates 180° when open
 * (CSS-only). On prefers-reduced-motion the transition is
 * suppressed.
 *
 * Surface contract: this lives inside .pc-tm-archive-card but
 * OUTSIDE the card's main <a> — <summary> is invalid HTML inside
 * an anchor. Both archive templates render it as a sibling.
 * ============================================================ */
.pc-tm-archive-card__specs-expander {
    margin: 8px 0 0;
    padding: 0;
    border-top: 1px dashed var(--pc-border);
    background: transparent;
}
.pc-tm-archive-card__specs-summary {
    /* Native marker suppressed — we render our own chevron so the
     * row's visual rhythm matches the other dense card surfaces. */
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 32px;
    padding: 6px 0;
    color: var(--pc-text-muted);
    font-size: 12px;
    line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
}
.pc-tm-archive-card__specs-summary::-webkit-details-marker { display: none; }
.pc-tm-archive-card__specs-summary::marker                  { display: none; content: ''; }
.pc-tm-archive-card__specs-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}
.pc-tm-archive-card__specs-summary-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    color: var(--pc-text-faint);
    font-size: 12px;
    line-height: 1;
    transition: transform 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .pc-tm-archive-card__specs-summary-chevron { transition: none; }
}
.pc-tm-archive-card__specs-expander[open] .pc-tm-archive-card__specs-summary-chevron {
    transform: rotate(180deg);
}
.pc-tm-archive-card__specs-summary:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
    border-radius: var(--pc-radius);
}
.pc-tm-archive-card__specs-detail {
    padding: 4px 0 8px;
}
.pc-tm-archive-card__specs-paragraph {
    margin: 0 0 6px;
    color: var(--pc-text-muted);
    font-size: 12px;
    line-height: 1.45;
}
.pc-tm-archive-card__specs-link {
    color: var(--pc-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--pc-border-strong);
    text-underline-offset: 2px;
    font-size: 12px;
}
.pc-tm-archive-card__specs-link:hover,
.pc-tm-archive-card__specs-link:focus {
    color: var(--pc-accent);
    text-decoration-color: currentColor;
}

/* GCC summary line carries a slightly stronger color than the muted
 * default — it's the "good news" answer and worth a hint of weight
 * to differentiate it from the seven non-GCC variants. The other
 * seven inherit the default muted color; no per-region accent so the
 * card visual rhythm stays calm (per CR-014 §"Out-of-scope items
 * surfaced" — no per-region badge color in v1). */
.pc-tm-archive-card__specs-expander--gcc .pc-tm-archive-card__specs-summary-text {
    color: var(--pc-text);
}

/* ============================================================
 * v0.52.7 (CR-015) — Generation pill
 *
 * Small classification pill that sits next to the YEAR value in the
 * mini-spec strip on Model Y cards only (the resolver returns null
 * for non-Y models and the template short-circuits before emitting
 * the markup). Two variants:
 *
 *   .pc-tm-gen-pill--juniper      — the 2026+ refresh (accent border)
 *   .pc-tm-gen-pill--pre_juniper  — the 2020–2025 design (plate grammar)
 *
 * Purely decorative — no link, no toggle, no JS. The pill text is
 * operator-editable via wp_options (pc_tm_generation_pill_label_*).
 *
 * Mobile (375px tested): pill wraps onto its own line beneath the year
 * value when the YEAR cell is too narrow to fit both inline. The cell
 * value uses `display: inline-flex; flex-wrap: wrap` so the value +
 * pill remain a single accessible group without breaking the spec
 * strip's row alignment.
 * ============================================================ */
.pc-tm-spec-cell--year .pc-tm-spec-cell__value {
    /* Override the default `white-space: nowrap` so the pill can wrap
     * beneath the year value on narrow cells.
     *
     * v0.55.9 (CR-024): tightened to clip residual overflow at the cell
     * boundary. Pre-CR-024 this rule set `overflow: visible` so the
     * wrap-line could "spill" if the pill was wider than the cell —
     * which at mid-widths (700–920px, image=360px sidebar) let the
     * pill bleed rightward into the neighbouring SPECS cell and overrun
     * "Long Range" → "2025 Pre-Juniper" → "GCC" → next column. The
     * fix is to keep flex-wrap (pill still wraps below year vertically)
     * but clip any horizontal residual with `overflow: hidden`. Mobile
     * 2-col stack at <420px continues to work because the cell width
     * doubles and the pill fits inline. */
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 6px;
    white-space: normal;
    overflow: hidden;
    max-width: 100%;
}
/* And contain residual overflow at the cell level too — defence in
 * depth in case a future rule re-introduces `overflow: visible` on
 * the value. */
.pc-tm-spec-cell--year {
    overflow: hidden;
}
.pc-tm-spec-cell__year-value {
    /* Keep the year digits on one piece visually — the pill is the
     * thing that wraps, never the four-digit number. */
    white-space: nowrap;
}
.pc-tm-gen-pill {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--pc-text-faint);
    border-radius: 999px;
    background: transparent;
    color: var(--pc-text-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    /* Pill never participates in ellipsis truncation. */
    white-space: nowrap;
    flex: 0 0 auto;
}
.pc-tm-gen-pill--pre_juniper {
    /* Plate grammar: thin border, muted text, neutral surface. The 2020–
     * 2025 design is the "default" generation in the UAE market today;
     * a calm look avoids implying it's worse than Juniper. */
    border-color: var(--pc-text-faint);
    color: var(--pc-text-muted);
}
.pc-tm-gen-pill--juniper {
    /* Accent variant for the 2026+ refresh — brand red on the border
     * and text, transparent fill so the pill stays light at card scale.
     * Calibrated against the deal-score badge palette (which uses solid
     * fills) so the two surfaces don't compete. */
    border-color: var(--pc-accent);
    color: var(--pc-accent);
}

/* ============================================================
 * v0.59.10 (BATCH-FE-006 PR-C — CR-050 §"Scope" item 2):
 * Cybertruck "Pickup" body-type badge
 * ============================================================
 * Small inline-block chip that occupies the (otherwise empty)
 * generation-pill slot in the YEAR cell on Cybertruck cards. Same
 * structural position as `.pc-tm-gen-pill` so the YEAR cell's
 * inline-flex layout (set above on `.pc-tm-spec-cell--year
 * .pc-tm-spec-cell__value`) handles wrap + overflow without further
 * tuning. Plate-design-system grammar — thin border, muted text,
 * neutral surface — so the badge reads as a calm body-type tag,
 * not a CTA or alert.
 *
 * Mutually exclusive with the gen pill: the card template renders
 * one OR the other based on `$car->model` (Model Y → pill;
 * Cybertruck → badge; Model 3/S/X → neither).
 * ============================================================ */
.pc-tm-cybertruck-pickup-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--pc-text-faint);
    border-radius: 4px;
    background: transparent;
    color: var(--pc-text-muted);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .02em;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ============================================================
 * .pc-tm-cybertruck-nacs-badge — CR-052 archive-card surface
 * ============================================================
 * Small amber-tinted sibling to `.pc-tm-cybertruck-pickup-badge`
 * in the YEAR cell on Cybertruck cards with US/CA specs. Q-604
 * lock — small badge, plate-design-system grammar, amber accent
 * so the buyer's eye catches the charge-port mismatch warning
 * at archive-scan time. aria-label carries the AT-expanded
 * description from `pc_tm_nacs_warning_aria_label()`.
 *
 * Tailwind amber-50 fill / amber-700 border / amber-900 text —
 * one shade lighter than the .pc-tm-charging-callout treatment
 * because the archive surface tolerates less ink than the
 * detail-page callout.
 * ============================================================ */
.pc-tm-cybertruck-nacs-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid #b45309;             /* tailwind amber-700 */
    border-radius: 4px;
    background: #fffbeb;                   /* tailwind amber-50 */
    color: #78350f;                        /* tailwind amber-900 */
    font-size: 10px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .04em;
    white-space: nowrap;
    flex: 0 0 auto;
}

/* ============================================================
 * .pc-tm-car__nacs-warning — CR-052 detail-page price-block chip
 * ============================================================
 * Compact amber chip rendered inside the .pc-tm-car__price-block
 * section, below the plate-chip pair + listing CTA and above the
 * deal-score block. Single-line; the leading ⚠️ glyph is part of
 * the operator-editable chip_text (default), so the chip carries
 * its own icon without a separate <span>. role="note" + the
 * aria_label promote the chip's short label to the AT-expanded
 * description (NACS / CCS / Supercharger nuance).
 *
 * Amber treatment matches `.pc-tm-charging-callout` (tailwind
 * amber-100 fill / amber-600 border / amber-900 text) so the
 * detail page reads with a single advisory grammar across the
 * price block + charging-map sections.
 * ============================================================ */
.pc-tm-car__nacs-warning {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-left: 3px solid #d97706;        /* tailwind amber-600 */
    border-radius: 3px;
    background: #fef3c7;                   /* tailwind amber-100 */
    color: #78350f;                        /* tailwind amber-900 */
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
}

/* ============================================================
 * Badges — deal score, days on market, recent drop
 * ============================================================ */
.pc-tm-badge {
    position: absolute;
    background: rgba(255,255,255,.95);
    color: var(--pc-text);
    padding: 4px 8px;
    border-radius: var(--pc-radius);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
}
.pc-tm-badge--deal       { top: 8px; left: 8px; color: #fff; }
/* v0.52.2 (CR-012 PR-012a): .pc-tm-badge--dom removed — days-on-market
 * moved into the spec strip's DAYS cell. */
.pc-tm-badge--drop       { bottom: 8px; left: 8px; background: var(--pc-accent); color: #fff; }
.pc-tm-badge--great_deal   { background: var(--pc-deal-great); }
.pc-tm-badge--good_deal    { background: var(--pc-deal-good); }
.pc-tm-badge--fair_price   { background: var(--pc-deal-fair); }
.pc-tm-badge--above_market { background: var(--pc-deal-above); color: #fff; }
.pc-tm-badge--overpriced   { background: var(--pc-deal-over); color: #fff; }

/* ============================================================
 * Pagination
 * ============================================================ */
.pc-tm-archive-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 16px;
    justify-content: center;
}
.pc-tm-archive-pagination__link {
    padding: 6px 12px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border-strong);
    color: var(--pc-text);
    border-radius: var(--pc-radius);
    font-size: 14px;
    text-decoration: none;
    min-width: 36px;
    text-align: center;
}
.pc-tm-archive-pagination__link:hover {
    border-color: var(--pc-accent);
    color: var(--pc-accent);
    text-decoration: none;
}
.pc-tm-archive-pagination__link--current {
    background: var(--pc-accent);
    color: #fff;
    border-color: var(--pc-accent);
    font-weight: 700;
    cursor: default;
}

/* ============================================================
 * Detail page (/cars/{id}/{slug}/)
 * ============================================================ */
.pc-tm-car {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.pc-tm-car__header { margin-bottom: 16px; }
.pc-tm-car__breadcrumb {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.pc-tm-car__breadcrumb a {
    color: var(--pc-text-muted);
    text-decoration: none;
}
.pc-tm-car__breadcrumb a:hover { color: var(--pc-accent); }
.pc-tm-car__title {
    font-size: 24px;
    line-height: 1.2;
    margin: 0 0 4px;
}
.pc-tm-car__subtitle {
    margin: 0;
    color: var(--pc-text-muted);
    font-size: 14px;
}
@media (min-width: 921px) {
    .pc-tm-car { padding: 24px; }
    .pc-tm-car__title { font-size: 32px; }
    .pc-tm-car__subtitle { font-size: 15px; }
}

.pc-tm-car__main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}
/* v0.60.2 (CR-057 PR-057b): breakpoint lowered 921px → 768px so the
 * side-by-side gallery + sidebar layout fires at standard tablet
 * width (iPad portrait 834×1194 + all wider) instead of flipping
 * across the awkward 920/921 boundary. Addresses Wolf's "image on
 * top, data on bottom" report per audit §4.15. */
@media (min-width: 768px) {
    .pc-tm-car__main {
        grid-template-columns: 1.5fr 1fr;
        gap: 24px;
    }
}

.pc-tm-car__image {
    margin: 0;
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
}
.pc-tm-car__image img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10; /* v0.28: prevents LCP CLS while the hero loads */
    object-fit: cover;
}

/* v0.30: swipeable multi-slot gallery on detail page.
 * CSS scroll-snap does the heavy lifting; JS is only for dot-sync. */
.pc-tm-car__gallery {
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
}
.pc-tm-car__gallery-track {
    display: flex;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox */
}
.pc-tm-car__gallery-track::-webkit-scrollbar { display: none; } /* WebKit */
.pc-tm-car__gallery-slot {
    flex: 0 0 100%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    margin: 0;
}
.pc-tm-car__gallery-slot img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
}
.pc-tm-car__gallery-dots {
    display: flex;
    gap: 6px;
    padding: 8px 10px;
    background: var(--pc-bg);
    border-top: 1px solid var(--pc-border);
    justify-content: center;
    flex-wrap: wrap;
}
.pc-tm-car__gallery-dot {
    appearance: none;
    border: 1px solid var(--pc-border);
    background: #fff;
    color: var(--pc-text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 10px;
    border-radius: 12px;
    cursor: pointer;
    transition: background 120ms, color 120ms, border-color 120ms;
}
.pc-tm-car__gallery-dot:hover,
.pc-tm-car__gallery-dot:focus-visible {
    border-color: var(--pc-text-muted);
    color: var(--pc-text);
    outline: none;
}
.pc-tm-car__gallery-dot.is-active {
    background: var(--pc-text);
    border-color: var(--pc-text);
    color: #fff;
}
.pc-tm-car__image-note {
    padding: 8px 12px;
    font-size: 12px;
    color: var(--pc-text-faint);
    background: var(--pc-bg);
    border-top: 1px solid var(--pc-border);
}

.pc-tm-car__sidebar {
    display: grid;
    gap: 16px;
}

/* ----- Price block ----- */
.pc-tm-car__price-block {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
}
.pc-tm-car__price {
    margin: 0;
    color: var(--pc-accent);
    font-weight: 700;
    font-size: 28px;
    line-height: 1.1;
}
.pc-tm-car__price-range {
    margin: 6px 0 0;
    color: var(--pc-text-muted);
    font-size: 13px;
}

/* ----- Deal-score block ----- */
.pc-tm-car__deal {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
}
.pc-tm-car__deal-explanation {
    margin: 8px 0 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pc-text);
}
.pc-tm-badge--inline {
    position: static;
    display: inline-block;
}

/* ----- Cohort block ----- */
.pc-tm-car__section-title {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pc-text);
    margin: 0 0 8px;
    font-weight: 700;
}
.pc-tm-car__cohort {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
}
.pc-tm-car__cohort p {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}

/* ----- Alert CTA ----- */
.pc-tm-car__alert-cta {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
}
.pc-tm-car__alert-hint {
    margin: 4px 0 12px;
    font-size: 13px;
    color: var(--pc-text-muted);
    line-height: 1.45;
}
.pc-tm-car__alert-form {
    display: flex;
    gap: 8px;
    flex-direction: column;
}
@media (min-width: 543px) {
    .pc-tm-car__alert-form { flex-direction: row; }
}
.pc-tm-car__alert-form .pc-tm-field {
    flex: 1;
    margin: 0;
}
.pc-tm-car__alert-status {
    margin: 8px 0 0;
    min-height: 1.2em;
    font-size: 13px;
}
.pc-tm-car__alert-status[data-state="success"] { color: var(--pc-deal-great); }
.pc-tm-car__alert-status[data-state="error"]   { color: var(--pc-deal-over); }
.pc-tm-car__alert-status[data-state="pending"] { color: var(--pc-text-faint); }

/* ----- Chart ----- */
.pc-tm-car__chart-section {
    margin-top: 24px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 16px;
}
.pc-tm-car__chart-shell {
    position: relative;
    height: 280px;
    width: 100%;
}
/* v0.60.2 (CR-057 PR-057b): propagated 921px → 768px so the chart
 * height grows at the same width the main grid widens. */
@media (min-width: 768px) {
    .pc-tm-car__chart-shell { height: 360px; }
}
.pc-tm-car__chart-canvas { display: block; width: 100% !important; height: 100% !important; }
.pc-tm-car__chart-empty,
.pc-tm-car__chart-fallback {
    color: var(--pc-text-muted);
    font-size: 14px;
    margin: 0;
}
.pc-tm-car__chart-table {
    margin-top: 12px;
    font-size: 13px;
}
.pc-tm-car__chart-table summary {
    cursor: pointer;
    color: var(--pc-accent);
    font-weight: 600;
    /* v0.53.2 — suppress the default browser disclosure triangle. The
     * "▶ / ▾" glyphs that ship with <details>/<summary> look like
     * artefacts from the early-2000s Web; we use a CSS-rotated chevron
     * (or, in this case, nothing — the link styling carries enough
     * affordance on its own). Same pattern is applied below to
     * .pc-tm-car__inactive summary and matches CR-014's specs expander. */
    list-style: none;
}
.pc-tm-car__chart-table summary::-webkit-details-marker { display: none; }
.pc-tm-car__chart-table summary::marker { display: none; content: ''; }
.pc-tm-car__chart-table summary::after {
    content: ' ▾';
    display: inline-block;
    transition: transform .15s ease;
    color: var(--pc-text-muted);
    font-size: 11px;
}
.pc-tm-car__chart-table[open] summary::after { transform: rotate(180deg); }
.pc-tm-car__chart-table table {
    width: 100%;
    margin-top: 8px;
    border-collapse: collapse;
}
.pc-tm-car__chart-table th,
.pc-tm-car__chart-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--pc-border);
    text-align: left;
}
.pc-tm-car__chart-table th {
    background: var(--pc-bg);
    font-size: 12px;
    text-transform: uppercase;
    color: var(--pc-text-muted);
}

/* v0.58.7 (CR-038 PR-I) — sparkline fallback for 2–3 observations.
 * Renders inline beside the "{N} observations over {N} days" caption.
 * The SVG uses currentColor, so the .pc-tm-sparkline--down/--up/--flat
 * direction classes (defined ~L1032) still apply. The --chart variant
 * adds a touch more height to read as a chart, not a card decoration. */
.pc-tm-car__chart-sparkline-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 44px;
    padding: 4px 0;
}
.pc-tm-car__chart-sparkline-wrap .pc-tm-sparkline--chart {
    flex: 0 0 auto;
}
.pc-tm-car__chart-sparkline-caption {
    margin: 0;
    color: var(--pc-text-muted);
    font-size: 13px;
    line-height: 1.4;
}

/* ----- Charging map section wrapper -----
 * v0.60.2 (CR-057 PR-057b): add the same trust-panel card surface
 * used by warranty / battery / FSD / verify so the charging-map
 * section participates in the consistent vertical rhythm instead
 * of sitting naked between the price-history chart and the
 * listings stack. Inner `pc-tm-charging-map` block keeps its own
 * dedicated map CSS unchanged. Addresses audit §4.11. */
.pc-tm-car__charging {
    margin-top: 16px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
}

/* ----- Listings table ----- */
.pc-tm-car__listings {
    margin-top: 24px;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 16px;
}
.pc-tm-car__listings-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.pc-tm-car__listing {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--pc-border);
    flex-wrap: wrap;
}
.pc-tm-car__listing:last-child { border-bottom: 0; }
.pc-tm-car__listing--best { background: linear-gradient(90deg, rgba(31,122,31,.05), transparent 60%); }
.pc-tm-car__listing-main { flex: 1; min-width: 200px; }
.pc-tm-car__listing-price {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--pc-text);
}
.pc-tm-car__best-badge {
    display: inline-block;
    margin-left: 6px;
    background: var(--pc-deal-great);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .03em;
}
.pc-tm-car__listing-meta {
    margin: 4px 0 0;
    color: var(--pc-text-muted);
    font-size: 13px;
}
.pc-tm-car__inactive {
    margin-top: 12px;
    color: var(--pc-text-muted);
    font-size: 13px;
}
.pc-tm-car__inactive summary {
    cursor: pointer;
    color: var(--pc-accent);
    font-weight: 600;
    /* v0.53.2 — suppress browser disclosure triangle; see chart-table summary above. */
    list-style: none;
}
.pc-tm-car__inactive summary::-webkit-details-marker { display: none; }
.pc-tm-car__inactive summary::marker { display: none; content: ''; }
.pc-tm-car__inactive summary::after {
    content: ' ▾';
    display: inline-block;
    transition: transform .15s ease;
    color: var(--pc-text-muted);
    font-size: 11px;
}
.pc-tm-car__inactive[open] summary::after { transform: rotate(180deg); }
.pc-tm-car__inactive-list {
    margin: 8px 0 0;
    padding-left: 20px;
}

/* v0.58.13 (CR-044 / BATCH-FE-005 PR-P) — "+N more active listings"
 * expander shown when a vehicle is cross-posted on > 3 marketplaces.
 * Reuses the CR-014 chevron grammar (▾ / rotate-180 on [open]) and
 * sits flush under the top-3 stack so the visual rhythm matches the
 * inactive-listings expander below. */
.pc-tm-car__listings-more {
    margin-top: 8px;
}
.pc-tm-car__listings-more > summary {
    cursor: pointer;
    color: var(--pc-accent);
    font-weight: 600;
    font-size: 13px;
    list-style: none;
    padding: 6px 0;
}
.pc-tm-car__listings-more > summary::-webkit-details-marker { display: none; }
.pc-tm-car__listings-more > summary::marker { display: none; content: ''; }
.pc-tm-car__listings-more > summary::after {
    content: ' ▾';
    display: inline-block;
    transition: transform .15s ease;
    color: var(--pc-text-muted);
    font-size: 11px;
}
.pc-tm-car__listings-more[open] > summary::after { transform: rotate(180deg); }
.pc-tm-car__listings-list--more {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    border-top: 1px solid var(--pc-border);
}

/* ----- Similar rail ----- */
.pc-tm-car__similar {
    margin-top: 24px;
}
.pc-tm-car__similar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
@media (min-width: 543px) { .pc-tm-car__similar-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 921px) { .pc-tm-car__similar-list { grid-template-columns: repeat(6, 1fr); } }
.pc-tm-car__similar-card {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
}
.pc-tm-car__similar-card a {
    display: block;
    color: inherit;
    text-decoration: none;
}
.pc-tm-car__similar-card img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    display: block;
}
.pc-tm-car__similar-body { padding: 8px 10px 10px; }
.pc-tm-car__similar-title {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--pc-text);
    line-height: 1.3;
}
.pc-tm-car__similar-price {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--pc-accent);
    font-weight: 700;
}
.pc-tm-car__similar-price span { color: var(--pc-text-muted); font-weight: 400; font-size: 11px; }

/* ----- Screen-reader only -----
 * v0.55.9 (CR-024): `.sr-only` added as a standard utility-class alias
 * for the WordPress-convention `.screen-reader-text`. The implementation
 * is the WCAG-recommended "1px box + clip + position-absolute" pattern
 * (NOT `display: none` — that would hide from screen readers too). Use
 * `.sr-only` whenever a template needs to render copy as machine-readable
 * markup without it appearing visually to sighted users — typical
 * defensive use-case: rendering an alt-string as a sibling caption next
 * to an `<img>` so the `<img alt="">` attribute stays canonical and the
 * caption never leaks into the visual layout. Both class names map to
 * the same ruleset; pick whichever matches the surrounding convention. */
.screen-reader-text,
.sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ============================================================
 * Compare (/cars/compare/{a}/{b}[/{c}]/)
 * ============================================================ */
.pc-tm-compare {
    padding: 16px;
    max-width: 1280px;
    margin: 0 auto;
    background: var(--pc-bg);
    color: var(--pc-text);
    font-family: system-ui, -apple-system, "Inter", "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
}
@media (min-width: 921px) { .pc-tm-compare { padding: 24px; } }

.pc-tm-compare__breadcrumb {
    margin: 0 0 8px;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--pc-text-faint);
}
.pc-tm-compare__breadcrumb a {
    color: var(--pc-text-muted);
    text-decoration: none;
}
.pc-tm-compare__breadcrumb a:hover { color: var(--pc-accent); }

.pc-tm-compare__title {
    color: var(--pc-accent);
    font-size: 24px;
    margin: 0 0 16px;
    font-weight: 700;
}
@media (min-width: 921px) { .pc-tm-compare__title { font-size: 28px; } }

.pc-tm-compare__empty {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 24px;
    color: var(--pc-text-muted);
}
.pc-tm-compare__empty a { color: var(--pc-accent); font-weight: 600; margin-left: 8px; }

.pc-tm-compare__table-wrap {
    overflow-x: auto;
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    box-shadow: var(--pc-shadow-card);
}
.pc-tm-compare__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.pc-tm-compare__table th,
.pc-tm-compare__table td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--pc-border);
    text-align: left;
    vertical-align: middle;
}
.pc-tm-compare__table tbody tr:nth-child(even) { background: rgba(0,0,0,.015); }
.pc-tm-compare__table tbody tr:last-child td,
.pc-tm-compare__table tbody tr:last-child th { border-bottom: 0; }
.pc-tm-compare__table thead th {
    background: var(--pc-bg);
    border-bottom: 2px solid var(--pc-border-strong);
}
.pc-tm-compare__table tbody th {
    color: var(--pc-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 11px;
    width: 140px;
    background: rgba(0,0,0,.02);
}

.pc-tm-compare__col-header {
    text-align: left;
    min-width: 200px;
}
.pc-tm-compare__col-image {
    display: block;
    width: 100%;
    aspect-ratio: 16/10;
    background: var(--pc-bg);
    overflow: hidden;
    border-radius: var(--pc-radius);
    margin-bottom: 6px;
}
.pc-tm-compare__col-image img {
    display: block; width: 100%; height: 100%; object-fit: cover;
}
.pc-tm-compare__col-title {
    color: var(--pc-text);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    display: block;
    line-height: 1.3;
}
.pc-tm-compare__col-title:hover { color: var(--pc-accent); }

.pc-tm-compare__cell--price {
    color: var(--pc-accent);
    font-weight: 700;
    font-size: 16px;
}
.pc-tm-compare__residual {
    display: inline-block;
    margin-left: 8px;
    color: var(--pc-text-muted);
    font-size: 12px;
}
.pc-tm-compare__na {
    color: var(--pc-text-faint);
    font-size: 13px;
    font-style: italic;
}
.pc-tm-compare__cell--spark { color: var(--pc-text-faint); }
.pc-tm-compare__cell--cta { padding-top: 14px; padding-bottom: 14px; }
.pc-tm-compare__note {
    margin: 14px 0 0;
    color: var(--pc-text-muted);
    font-size: 13px;
    line-height: 1.45;
}
.pc-tm-compare__note a { color: var(--pc-accent); }

/* ============================================================
 * Similar-rail "Compare" CTA on detail page
 * ============================================================ */
.pc-tm-car__similar-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}
.pc-tm-car__similar-hint {
    margin: 0;
    color: var(--pc-text-faint);
    font-size: 12px;
}
.pc-tm-car__similar-card { position: relative; }
.pc-tm-car__similar-compare {
    display: block;
    text-align: center;
    background: rgba(255,255,255,.92);
    border-top: 1px solid var(--pc-border);
    color: var(--pc-text-muted);
    font-size: 12px;
    padding: 6px 8px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
}
.pc-tm-car__similar-compare:hover {
    background: var(--pc-accent);
    color: #fff;
}

/* Chart empty-state "single observation" variant */
.pc-tm-car__chart-empty--single {
    background: var(--pc-bg);
    padding: 16px 20px;
    border-radius: var(--pc-radius);
    line-height: 1.5;
    color: var(--pc-text);
}
.pc-tm-car__chart-empty--single strong { color: var(--pc-accent); }

/* RTL-safe — use logical properties so the v1.1 Arabic flip is free */
.pc-tm-archive,
.pc-tm-car,
.pc-tm-compare {
    padding-inline-start: 16px;
    padding-inline-end: 16px;
}

/* ============================================================
 * v0.52.9 (CR-013) — "Similar but different" rail (detail page)
 *
 * Three-column rail below the existing "Similar cars" rail on
 * /cars/{id}/{slug}/. Mobile-first 375px: columns stack vertically,
 * each column's list flows vertically with up to 3 mini-cards.
 * Desktop (≥720px): three columns side-by-side in a CSS grid.
 *
 * Zero JS. No carousel, no swiper — pure CSS grid + flex.
 * The mini-cards lazy-load images (browser-native) so the rail
 * does not compete with the main detail-page LCP.
 * ============================================================ */
.pc-tm-rail {
    margin-top: 32px;
    margin-bottom: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--pc-border);
}
.pc-tm-rail__title {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 600;
    color: var(--pc-text);
    letter-spacing: -0.01em;
}
.pc-tm-rail__hint {
    margin: 0 0 16px;
    color: var(--pc-text-muted);
    font-size: 13px;
}
.pc-tm-rail__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
@media (min-width: 720px) {
    .pc-tm-rail__columns {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }
}
.pc-tm-rail__column {
    min-width: 0;
}
.pc-tm-rail__column-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--pc-text-muted);
    border-left: 2px solid var(--pc-accent);
    padding-left: 8px;
    line-height: 1.3;
}
.pc-tm-rail__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Mini-card — slimmer variant of the archive card. Plate-grammar
 * mirrors .pc-tm-archive-card but at smaller scale; no expander,
 * no narrow chips, no range bar. */
.pc-tm-rail__card {
    position: relative;
    background: #fff;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    overflow: hidden;
    transition: border-color .15s ease, transform .15s ease;
}
.pc-tm-rail__card:hover {
    border-color: var(--pc-text);
}
.pc-tm-rail__card-link {
    display: flex;
    gap: 10px;
    padding: 8px;
    text-decoration: none;
    color: inherit;
    align-items: stretch;
    min-height: 44px; /* WCAG tap-target */
}
.pc-tm-rail__image-wrap {
    position: relative;
    flex: 0 0 96px;
    width: 96px;
    aspect-ratio: 16 / 10;
    background: var(--pc-bg);
    border-radius: var(--pc-radius);
    overflow: hidden;
}
.pc-tm-rail__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.pc-tm-rail__badge {
    position: absolute;
    top: 4px;
    left: 4px;
    font-size: 9px;
    padding: 1px 5px;
    line-height: 1.3;
}
.pc-tm-rail__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: center;
}
.pc-tm-rail__head {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 6px;
    font-size: 12px;
    color: var(--pc-text-muted);
    line-height: 1.3;
}
.pc-tm-rail__year {
    font-weight: 600;
    color: var(--pc-text);
}
.pc-tm-rail__trim {
    color: var(--pc-text-muted);
}
.pc-tm-rail__pill {
    /* inherits .pc-tm-gen-pill base; just nudge type size for the
     * smaller mini-card scale */
    font-size: 9px;
    padding: 0 4px;
}
.pc-tm-rail__price {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pc-tm-rail__price--unknown {
    color: var(--pc-text-faint);
    font-weight: 500;
}
.pc-tm-rail__meta {
    margin: 0;
    font-size: 11px;
    color: var(--pc-text-faint);
    line-height: 1.3;
}

/* Deal-score accent on the card — subtle left-border tint rather than
 * a full background fill, so the row of three cards in one column
 * doesn't shout. Matches the archive-card visual restraint pattern. */
.pc-tm-rail__card--great_deal { border-left: 3px solid var(--pc-accent); }
.pc-tm-rail__card--good_deal  { border-left: 3px solid var(--pc-text); }
.pc-tm-rail__card--fair_price { border-left: 3px solid var(--pc-text-faint); }

/* ============================================================
 * v0.54.2 (CR-017) — Warranty status section + pill
 *
 * Lives between the cohort context block and the price-history chart
 * on the public detail page. Three rows (Basic vehicle / Battery &
 * drive unit / future drivetrain), each with a status pill + remaining
 * time + remaining km + one-line context.
 *
 * Mobile-first canvas: 375px. Rows stack vertically; the pill wraps
 * onto its own line when the row label runs out of horizontal room.
 *
 * Pill variants inherit the deal-badge palette:
 *   --great → --pc-deal-great (Active · GCC honoured)
 *   --bad   → --pc-deal-over  (Active · UAE honour void / Voided)
 *   --amber → --pc-deal-above (Operator override)
 *   --grey  → --pc-text-faint  (Expired)
 *
 * See UAE-DESIGN-SYSTEM-v1.md → pc-tm-warranty-pill (v1.1).
 * ============================================================ */
.pc-tm-car__warranty {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-tm-car__warranty-list {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pc-tm-car__warranty-row {
    border-top: 1px solid var(--pc-border);
    padding-top: 12px;
}
.pc-tm-car__warranty-row:first-child {
    border-top: 0;
    padding-top: 0;
}
.pc-tm-car__warranty-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    margin-bottom: 4px;
}
.pc-tm-car__warranty-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--pc-text);
    line-height: 1.3;
}
.pc-tm-car__warranty-remaining {
    margin: 2px 0 4px;
    font-size: 13px;
    color: var(--pc-text-muted);
    line-height: 1.4;
}
.pc-tm-car__warranty-context {
    margin: 0;
    font-size: 13px;
    color: var(--pc-text-muted);
    line-height: 1.45;
}
.pc-tm-car__warranty-footer {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--pc-border);
    font-size: 12px;
    color: var(--pc-text-faint);
    line-height: 1.4;
}
.pc-tm-car__warranty-footer a {
    color: var(--pc-text-muted);
    text-decoration: underline;
}
.pc-tm-car__warranty-footer a:hover {
    color: var(--pc-text);
}

/* The pill itself. Plate grammar — small rounded rectangle, solid fill
 * + white text where the variant carries colour, neutral fill for the
 * grey "Expired" state. 999px radius distinguishes the pill from the
 * 4px-radius chips. Type stays at 12px even at the 375px canvas, with
 * 13px-equivalent reading weight via the 600 font-weight. */
.pc-tm-warranty-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: .01em;
    white-space: nowrap;
    color: #fff;
    background: var(--pc-text-faint);
    border: 1px solid transparent;
}
.pc-tm-warranty-pill--great { background: var(--pc-deal-great); }
.pc-tm-warranty-pill--bad   { background: var(--pc-deal-over); }
.pc-tm-warranty-pill--amber { background: var(--pc-deal-above); color: #fff; }
.pc-tm-warranty-pill--grey  {
    background: transparent;
    color: var(--pc-text-faint);
    border-color: var(--pc-border-strong);
}

/* ============================================================
 * v0.55.3 (CR-018) — Battery health estimate section + band motif
 *
 * Lives between the v0.54.2 warranty section and the price-history
 * chart on the public detail page. The band is a 4-segment inline
 * SVG (significant / notable / typical / healthy, left-to-right)
 * with a triangle marker positioned linearly at the computed
 * percentage. Mobile-first canvas: 375px.
 *
 * Segment colours inherit the deal-score palette so the v1 token set
 * stays single-sourced:
 *   significant → --pc-deal-over   (red — "investigate before purchase")
 *   notable     → --pc-deal-above  (amber — "above-average wear")
 *   typical     → --pc-deal-good   (light green — "normal for 3–5yr")
 *   healthy     → --pc-deal-great  (green — "within typical band")
 *
 * The marker is decorative (`aria-hidden="true"`); the role="img" +
 * aria-label on the wrapper carry the band-state semantics for screen
 * readers. The text label below the band carries the visible meaning.
 *
 * See UAE-DESIGN-SYSTEM-v1.md → pc-tm-battery-band (v1.1).
 * ============================================================ */
.pc-tm-car__battery {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-tm-battery-band {
    position: relative;
    width: 100%;
    max-width: 280px;
    height: 24px;
    margin: 14px 0 8px;
    /* Marker overflows above the band — reserve vertical room so the
     * triangle isn't clipped at the top of the wrapper. */
    padding-top: 10px;
    box-sizing: content-box;
}
.pc-tm-battery-band__segments {
    display: block;
    width: 100%;
    height: 24px;
    border-radius: var(--pc-radius);
    overflow: hidden;
}
.pc-tm-battery-band__seg                       { /* shared */ }
.pc-tm-battery-band__seg--significant          { fill: var(--pc-deal-over); }
.pc-tm-battery-band__seg--notable              { fill: var(--pc-deal-above); }
.pc-tm-battery-band__seg--typical              { fill: var(--pc-deal-good); }
.pc-tm-battery-band__seg--healthy              { fill: var(--pc-deal-great); }

/* Marker — absolutely-positioned via inline `left: N%`; the negative
 * translate-X anchors the triangle's tip horizontally over the
 * percentage point. */
.pc-tm-battery-band__marker {
    position: absolute;
    top: 0;
    width: 10px;
    height: 8px;
    margin-left: -5px;
    color: var(--pc-text);
    pointer-events: none;
}
.pc-tm-battery-band__triangle {
    display: block;
}

.pc-tm-car__battery-summary {
    margin: 6px 0 4px;
    font-size: 13px;
    line-height: 1.4;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    align-items: baseline;
}
.pc-tm-car__battery-band-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.3;
}
.pc-tm-car__battery-band-label--healthy           { color: var(--pc-deal-great); }
.pc-tm-car__battery-band-label--typical_wear      { color: var(--pc-deal-good); }
.pc-tm-car__battery-band-label--notable_wear      { color: var(--pc-deal-above); }
.pc-tm-car__battery-band-label--significant_wear  { color: var(--pc-deal-over); }
.pc-tm-car__battery-pct {
    color: var(--pc-text-muted);
    font-size: 13px;
}
.pc-tm-car__battery-range {
    margin: 4px 0 6px;
    font-size: 13px;
    color: var(--pc-text);
    line-height: 1.4;
}
.pc-tm-car__battery-footnote {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--pc-text-faint);
    line-height: 1.45;
}
.pc-tm-car__battery-12v {
    margin: 6px 0 0;
    font-size: 12px;
    color: var(--pc-text-muted);
    line-height: 1.45;
}
.pc-tm-car__battery-methodology {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--pc-border);
    font-size: 12px;
    line-height: 1.4;
}
.pc-tm-car__battery-methodology a {
    color: var(--pc-text-muted);
    text-decoration: underline;
}
.pc-tm-car__battery-methodology a:hover {
    color: var(--pc-text);
}

/* Mobile canvas: the band stretches full-width and grows to 32px
 * tall so the marker triangle remains comfortably tappable-adjacent
 * even on a 375px viewport. The card padding stays at 14/16 to match
 * the warranty section above it. */
@media (max-width: 480px) {
    .pc-tm-battery-band {
        max-width: 100%;
        height: 32px;
    }
    .pc-tm-battery-band__segments {
        height: 32px;
    }
}

/* ============================================================
 * v0.58.8 (CR-037 / BATCH-FE-005 PR-J) — Basic Tesla specs block
 *
 * New trust-signal panel sitting between the battery section (CR-018)
 * and the FSD section (CR-035). Reuses the existing panel grammar
 * (var(--pc-card-bg), 1px var(--pc-border), var(--pc-radius), 14/16
 * padding, 16px top margin) so the three sibling panels — battery,
 * Tesla specs, FSD — share a single visual rhythm down the page.
 *
 * The <dl> uses a two-column grid layout: label on the left
 * (auto-sized to widest label), value on the right (1fr). At <480px
 * the grid collapses to a single column with each label/value pair
 * stacked. No <table> — definition-list semantics per handoff
 * §CR-037 step 2 + §AC3.
 *
 * Methodology footnote is muted typography (one font-size step
 * below body, var(--pc-text-muted)) matching the battery / FSD /
 * specs-region footnote pattern. Fallback paragraph uses the same
 * muted color but at body font-size since it's the only content
 * in the fallback state.
 * ============================================================ */
.pc-tm-car__tesla-specs {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-tm-car__tesla-specs-list {
    margin: 10px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 16px;
    row-gap: 6px;
    font-size: 14px;
    line-height: 1.4;
}
.pc-tm-car__tesla-specs-list dt {
    color: var(--pc-text-muted);
    font-weight: 500;
    margin: 0;
}
.pc-tm-car__tesla-specs-list dd {
    color: var(--pc-text);
    margin: 0;
}
.pc-tm-car__tesla-specs-list dd strong {
    font-weight: 600;
}
.pc-tm-car__tesla-specs-footnote {
    margin: 12px 0 0;
    font-size: 12px;
    color: var(--pc-text-muted);
    line-height: 1.45;
}
.pc-tm-car__tesla-specs-methodology-link,
.pc-tm-car__tesla-specs-footnote a {
    color: var(--pc-text-muted);
    text-decoration: underline;
    margin-left: 4px;
}
.pc-tm-car__tesla-specs-methodology-link:hover,
.pc-tm-car__tesla-specs-footnote a:hover {
    color: var(--pc-text);
}
.pc-tm-car__tesla-specs-fallback {
    margin: 10px 0 0;
    font-size: 14px;
    color: var(--pc-text-muted);
    line-height: 1.45;
}
.pc-tm-car__tesla-specs-fallback-link {
    color: var(--pc-text);
    text-decoration: underline;
}
.pc-tm-car__tesla-specs-fallback-link:hover {
    color: var(--pc-text-muted);
}

/* Mobile: collapse the two-column grid into a stacked layout. The
 * label sits above its value with no row gap so each pair reads as
 * one logical block. */
@media (max-width: 480px) {
    .pc-tm-car__tesla-specs-list {
        grid-template-columns: 1fr;
        row-gap: 10px;
    }
    .pc-tm-car__tesla-specs-list dt {
        margin-bottom: 2px;
    }
}

/* ============================================================
 * v0.55.4 (CR-019) — FSD / Autopilot story panel
 *
 * Plain text panel — no SVG, no JS. Sits between the v0.55.3
 * battery section and the price-history chart. Reuses the same
 * card surface treatment as the warranty + battery sections so
 * the three trust-signal panels share a visual rhythm.
 *
 * The HW chip is a minimal v1.1 design-system addition: a neutral
 * single-colour variant of the existing .pc-tm-chip family,
 * non-interactive (no hover, no focus ring, no padded × button).
 * It carries the literal hardware label ("HW3" / "HW4") and the
 * aria-label spells out "Autopilot hardware HW3/HW4" so a screen
 * reader gets the same context as the visible label.
 * ============================================================ */
.pc-tm-car__fsd {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-tm-car__fsd-head {
    margin: 10px 0 12px;
}
.pc-tm-chip--hw {
    /* Neutral one-colour variant — non-interactive. Reuses the
     * shared .pc-tm-chip frame (44px tall, 999px radius, 12px
     * horizontal padding) so the pill grammar stays consistent
     * with the rest of the chip family. No hover state, no focus
     * ring, no cursor — the chip is a label, not a control. */
    cursor: default;
    background: var(--pc-card-bg);
    color: var(--pc-text);
    border-color: var(--pc-border-strong);
    /* Compact: the chip carries a tight 3-character label; pad
     * down from the 44px touch-target default so it doesn't
     * dominate the panel visually. */
    min-height: 32px;
    padding: 4px 12px;
    font-size: 13px;
    letter-spacing: .02em;
}
.pc-tm-chip--hw:hover,
.pc-tm-chip--hw:focus-visible {
    /* Override the .pc-tm-chip:hover border-darken so the chip
     * reads as a static label, not an interactive element. */
    border-color: var(--pc-border-strong);
    color: var(--pc-text);
    cursor: default;
}
.pc-tm-car__fsd-canonical {
    margin: 0 0 10px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-text);
}
.pc-tm-car__fsd-story {
    margin: 0 0 12px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-text);
}
.pc-tm-car__fsd-methodology {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--pc-border);
    font-size: 13px;
}
.pc-tm-car__fsd-methodology a {
    color: var(--pc-text-muted);
    text-decoration: none;
}
.pc-tm-car__fsd-methodology a:hover {
    color: var(--pc-text);
    text-decoration: underline;
}

/* ============================================================
 * v0.58.5 (CR-035) — FSD section restructure
 *
 * Replaces the wall-of-prose layout (v0.55.4) with a compact HW
 * badge line + 3-row semantic <table> + one lead sentence +
 * methodology link. The legacy .pc-tm-car__fsd-canonical /
 * .pc-tm-car__fsd-story / .pc-tm-car__fsd-methodology rules above
 * remain in the stylesheet for backwards compatibility with any
 * theme override that hasn't migrated yet (and for the methodology
 * page section which still consumes the same wp_options keys).
 *
 * HW chip color modifiers: amber for HW3 (region-gated FSD path,
 * non-upgradable autopilot computer) and green for HW4 (forward
 * platform for future Tesla self-driving features). Colors reuse
 * the existing deal-score palette tokens for visual consistency
 * with the rest of the trust-signal stack.
 * ============================================================ */

.pc-tm-chip--hw--amber {
    background: rgba(201, 140, 26, 0.10); /* 10% --pc-deal-above tint */
    border-color: var(--pc-deal-above);
    color: var(--pc-deal-above);
}
.pc-tm-chip--hw--amber:hover,
.pc-tm-chip--hw--amber:focus-visible {
    border-color: var(--pc-deal-above);
    color: var(--pc-deal-above);
}
.pc-tm-chip--hw--green {
    background: rgba(31, 122, 31, 0.10); /* 10% --pc-deal-great tint */
    border-color: var(--pc-deal-great);
    color: var(--pc-deal-great);
}
.pc-tm-chip--hw--green:hover,
.pc-tm-chip--hw--green:focus-visible {
    border-color: var(--pc-deal-great);
    color: var(--pc-deal-great);
}

.pc-tm-car__fsd-hw-line {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 12px;
    font-size: 14px;
    color: var(--pc-text-muted);
}

.pc-tm-car__fsd-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.4;
    table-layout: fixed;
}
.pc-tm-car__fsd-table thead th {
    text-align: left;
    font-weight: 600;
    color: var(--pc-text-muted);
    padding: 6px 8px;
    border-bottom: 1px solid var(--pc-border);
    font-size: 12px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}
.pc-tm-car__fsd-table tbody th,
.pc-tm-car__fsd-table tbody td {
    padding: 8px;
    border-bottom: 1px solid var(--pc-border);
    vertical-align: top;
    text-align: left;
}
.pc-tm-car__fsd-table tbody tr:last-child th,
.pc-tm-car__fsd-table tbody tr:last-child td {
    border-bottom: 0;
}
.pc-tm-car__fsd-table-feature {
    font-weight: 600;
    color: var(--pc-text);
    width: 28%;
}
.pc-tm-car__fsd-table-state {
    font-weight: 600;
    color: var(--pc-text);
    width: 22%;
    font-variant-numeric: tabular-nums;
}
.pc-tm-car__fsd-table-in-uae {
    color: var(--pc-text);
    width: 50%;
}

.pc-tm-car__fsd-lead {
    margin: 12px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--pc-border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--pc-text);
}
.pc-tm-car__fsd-methodology-link {
    color: var(--pc-text-muted);
    text-decoration: none;
    margin-left: 4px;
    white-space: nowrap;
}
.pc-tm-car__fsd-methodology-link:hover {
    color: var(--pc-text);
    text-decoration: underline;
}

@media (max-width: 480px) {
    /* Mobile (375px target): the 3-column table is dense; let the
     * "What it does in UAE" column wrap freely while the Feature
     * and State columns stay compact. table-layout: fixed above
     * already prevents the state column from collapsing. */
    .pc-tm-car__fsd-table {
        font-size: 12px;
    }
    .pc-tm-car__fsd-table thead th,
    .pc-tm-car__fsd-table tbody th,
    .pc-tm-car__fsd-table tbody td {
        padding: 6px 4px;
    }
    .pc-tm-car__fsd-table-feature { width: 32%; }
    .pc-tm-car__fsd-table-state   { width: 24%; }
    .pc-tm-car__fsd-table-in-uae  { width: 44%; }
}

/* v0.55.5 (CR-020) — Specs-region deep explainer panel.
 * REMOVED in v0.60.2 (BATCH-FE-007 PR-D — CR-057 PR-057b) per audit
 * §4.5 / §5: the deep-panel markup was eliminated by BATCH-FE-005
 * PR-M (CR-046b uniqueness consolidation — superseded by the compact
 * specs-region card in CR-036, see block below) but the CSS rules
 * were left behind. Audit confirmed zero markup references across
 * all 5 sampled vehicles. ~46 LOC removed. */

/* ============================================================
 * v0.58.6 (CR-036 / BATCH-FE-005 PR-H) — Specs-region compact
 * CARD. Asymmetric two-case render — GCC compact, non-GCC bullet
 * callout — sharing the SAME surface size but DIFFERENT visual
 * emphasis. Replaces the CR-020 deep-paragraph treatment above
 * for the detail-page surface only (methodology page section
 * still consumes the longer CR-020 paragraphs).
 *
 *   .pc-tm-car__specs-region--gcc     — neutral/green accent
 *                                       (var(--pc-deal-great))
 *   .pc-tm-car__specs-region--non_gcc — amber/orange accent
 *                                       (var(--pc-deal-above))
 *
 * Mobile-first. 375px: heading wraps cleanly; bullets reflow with
 * normal block spacing; no fixed widths. Reuses the same card
 * surface treatment (border + radius + bg) as the warranty /
 * battery / FSD panels so the trust-signal rhythm stays consistent.
 * ============================================================ */
.pc-tm-car__specs-region {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-left-width: 4px;
    border-radius: var(--pc-radius);
    padding: 12px 14px;
    margin-top: 16px;
}
.pc-tm-car__specs-region--gcc {
    /* Neutral/green accent — buyer-positive, GCC is the baseline. */
    border-left-color: var(--pc-deal-great);
}
.pc-tm-car__specs-region--non_gcc {
    /* Amber/orange accent — more prominent emphasis without alarming
     * the buyer. Same hue family as the CR-035 HW3 chip. */
    border-left-color: var(--pc-deal-above);
}
.pc-tm-car__specs-region-heading {
    margin: 0 0 6px;
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
    color: var(--pc-text);
}
.pc-tm-car__specs-region--gcc .pc-tm-car__specs-region-heading {
    color: var(--pc-deal-great);
}
.pc-tm-car__specs-region--non_gcc .pc-tm-car__specs-region-heading {
    color: var(--pc-deal-above);
}
.pc-tm-car__specs-region-body {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--pc-text);
}
.pc-tm-car__specs-region-body .pc-tm-car__specs-region-card-body {
    margin: 0;
}
/* v0.60.2 (CR-057 PR-057b): padding-left 18px → 22px + explicit
 * `list-style-position: outside` + `margin-left: 0` so the disc
 * glyph sits comfortably inside the panel's 12px 14px interior
 * padding instead of clipping against the left edge. Addresses
 * Wolf's "bullet points don't work" report (most visible on the
 * non-GCC Cybertruck id 375) per audit §4.2. */
.pc-tm-car__specs-region-card-bullets {
    margin: 0;
    margin-left: 0;
    padding-left: 22px;
    list-style: disc;
    list-style-position: outside;
}
.pc-tm-car__specs-region-card-bullets li {
    margin: 2px 0;
    font-size: 14px;
    line-height: 1.5;
}
.pc-tm-car__specs-region-card-bullets strong {
    font-weight: 600;
    color: var(--pc-text);
}
.pc-tm-car__specs-region-methodology {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--pc-border);
    font-size: 13px;
}
.pc-tm-car__specs-region-methodology a {
    color: var(--pc-text-muted);
    text-decoration: none;
}
.pc-tm-car__specs-region-methodology a:hover {
    color: var(--pc-text);
    text-decoration: underline;
}

/* ============================================================
 * v0.55.6 (CR-021) — Things-to-verify panel.
 *
 * Cohort-tailored buyer-due-diligence checklist. Surfaces on every
 * detail page (Q-408 always-on contract) between the v0.55.5
 * specs-region deep panel and the price-history chart. Pure text
 * panel — no SVG, no JS.
 *
 * Shares the same card surface treatment as warranty / battery /
 * FSD / specs-region-deep so the five trust-signal panels read as
 * a consistent vertical rhythm.
 *
 * Bullet list uses generous line-height (1.55) because each bullet
 * is multi-sentence (a short subject + concrete check). Bullet
 * spacing (margin-bottom 12px) is wider than a typical <ul> so
 * each bullet reads as a discrete prompt rather than a run-on
 * checklist. Mobile 375px: bullets reflow without horizontal
 * scroll because no fixed widths are imposed.
 *
 * Methodology footer mirrors the same border-top + muted-text
 * affordance as the warranty / battery / FSD / specs-region-deep
 * methodology footers.
 * ============================================================ */
.pc-tm-car__verify {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-tm-car__verify-intro {
    margin: 10px 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pc-text-muted);
}
/* v0.58.11 (CR-041 / BATCH-FE-005 PR-N) — collapsible verify panel.
 * Reuses the chevron + marker-suppression grammar from
 * pc-tm-archive-card__specs-expander (CR-014, v0.52.5). Closed by
 * default; opens into a compact checklist (one line per item,
 * full body in the <li>'s title= tooltip). */
.pc-tm-car__verify-expander {
    margin: 0;
    padding: 0;
}
.pc-tm-car__verify-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0;
    -webkit-tap-highlight-color: transparent;
}
.pc-tm-car__verify-summary::-webkit-details-marker { display: none; }
.pc-tm-car__verify-summary::marker                  { display: none; content: ''; }
.pc-tm-car__verify-summary-text {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 15px;
    line-height: 1.45;
    color: var(--pc-text);
}
.pc-tm-car__verify-summary-text strong {
    font-weight: 600;
    margin-right: 6px;
}
.pc-tm-car__verify-summary-preview {
    color: var(--pc-text-muted);
    font-weight: 400;
    font-size: 14px;
}
.pc-tm-car__verify-summary-chevron {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    color: var(--pc-text-faint);
    font-size: 14px;
    line-height: 1;
    transition: transform 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
    .pc-tm-car__verify-summary-chevron { transition: none; }
}
.pc-tm-car__verify-expander[open] .pc-tm-car__verify-summary-chevron {
    transform: rotate(180deg);
}
.pc-tm-car__verify-summary:focus-visible {
    outline: 2px solid var(--pc-accent);
    outline-offset: 2px;
    border-radius: var(--pc-radius);
}
.pc-tm-car__verify-detail {
    padding-top: 10px;
}
.pc-tm-car__verify-list {
    /* Reset WP default list padding — the row's own ☐ glyph carries
     * the bullet weight, so we suppress the browser list marker and
     * align flush with the panel padding. */
    margin: 0;
    padding-left: 0;
    list-style: none;
}
.pc-tm-car__verify-item {
    margin: 0;
    padding: 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--pc-text);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    border-bottom: 1px solid var(--pc-border);
    cursor: help; /* signal the title= tooltip on hover */
}
.pc-tm-car__verify-item:last-child {
    border-bottom: 0;
}
.pc-tm-car__verify-item-check {
    flex: 0 0 auto;
    color: var(--pc-text-muted);
    font-size: 14px;
    line-height: 1.45;
}
.pc-tm-car__verify-item-title {
    flex: 1 1 auto;
    min-width: 0;
}
.pc-tm-car__verify-methodology {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--pc-border);
    font-size: 13px;
}
.pc-tm-car__verify-methodology a {
    color: var(--pc-text-muted);
    text-decoration: none;
}
.pc-tm-car__verify-methodology a:hover {
    color: var(--pc-text);
    text-decoration: underline;
}

/* ============================================================
 * v0.55.7 (CR-022) — VIN-derived facts panel.
 *
 * Sits between the things-to-verify panel (CR-021) and the
 * price-history chart. Reuses the same card surface treatment
 * (background, border, radius, padding) as the warranty /
 * battery / FSD / specs-region-deep / things-to-verify panels
 * so the trust-signal rhythm reads consistently.
 *
 * The panel renders three decoded facts as a tight bullet list,
 * each with a bolded short subject (e.g. "Plant of manufacture.")
 * followed by the decoded value. The optional per-plant blurb
 * sits below as a paragraph, and the methodology footer mirrors
 * the same border-top + muted-text affordance as the other five
 * trust-signal panels.
 *
 * The VIN string itself is NEVER rendered — there is no CSS
 * selector here that targets a VIN-bearing element because no
 * such element exists in the markup (per the privacy contract
 * in MASTER-PLAN-v2.md §9 and the helper's load-bearing return
 * shape).
 *
 * Mobile 375px: bullets and blurb reflow without horizontal
 * scroll because no fixed widths are imposed.
 * ============================================================ */
.pc-tm-car__vin-facts {
    background: var(--pc-card-bg);
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    padding: 14px 16px;
    margin-top: 16px;
}
.pc-tm-car__vin-intro {
    margin: 10px 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pc-text-muted);
}
.pc-tm-car__vin-facts-list {
    margin: 0 0 14px;
    padding-left: 20px;
    list-style: disc outside;
}
.pc-tm-car__vin-fact {
    margin: 0 0 8px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pc-text);
}
.pc-tm-car__vin-fact:last-child {
    margin-bottom: 0;
}
.pc-tm-car__vin-fact-note {
    margin-left: 4px;
    font-size: 13px;
    color: var(--pc-text-muted);
}
.pc-tm-car__vin-plant-blurb {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--pc-text);
}
.pc-tm-car__vin-methodology {
    margin: 14px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--pc-border);
    font-size: 13px;
}
.pc-tm-car__vin-methodology a {
    color: var(--pc-text-muted);
    text-decoration: none;
}
.pc-tm-car__vin-methodology a:hover {
    color: var(--pc-text);
    text-decoration: underline;
}

/* === v0.55.8 (CR-023) — Performance disambiguation note ===
 * Renders below the title/subtitle and above the sidebar's price chip.
 * Visual treatment: quiet aside. Subtle accent left border + slightly
 * muted italic body, so the note reads as a trust-through-admission
 * surface rather than a warning. Page-weight delta < 2 KB gzipped
 * (text-only; no images, no SVG, no JS).
 *
 * Mobile 375px: full-width with padding inside the header — no
 * horizontal scroll, long source-name + trim labels wrap cleanly.
 */
.pc-tm-car__disambig {
    margin: 12px 0 0;
    padding: 10px 12px;
    border-left: 3px solid var(--pc-accent, #1f6feb);
    background: var(--pc-surface-muted, #f5f7fa);
    border-radius: 0 4px 4px 0;
    font-size: 14px;
    line-height: 1.5;
    font-style: italic;
    color: var(--pc-text-muted, #4a5568);
    max-width: 720px;
}
@media (max-width: 480px) {
    .pc-tm-car__disambig {
        font-size: 13px;
        padding: 9px 10px;
        margin-top: 10px;
    }
}

/* ============================================================
 * CR-025 PR-025a — Multiselect chip-group filters.
 *
 * Replaces single <select> dropdowns in the filter sidebar for
 * year, trim, exterior color, and (new) interior color. The chip
 * frame inherits .pc-tm-chip's 44px-tall touch target + 1px border;
 * the .pc-tm-chip--filter modifier changes the radius from 999px
 * (pill) to 4px (rectangular toggle) so the toggle-chip grammar is
 * visually distinct from the add-chip pill grammar above the form.
 * Active state uses --pc-text fill (matches .pc-tm-chip--active).
 * ============================================================ */

.pc-tm-archive__chip-group {
    border: 0;
    padding: 0;
    margin: 0 0 14px 0;
}
.pc-tm-archive__chip-group-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--pc-text-muted);
    margin: 0 0 6px 0;
    padding: 0;
    text-transform: uppercase;
}
.pc-tm-archive__chip-group-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

.pc-tm-chip--filter {
    /* Toggle-chip grammar. Distinct from .pc-tm-chip--add (dashed
     * pill) and .pc-tm-chip--active (price-chip plate fill). */
    border-radius: 4px;
    padding: 6px 12px;
    min-height: 44px;
    font-size: 13px;
    font-weight: 500;
    background: var(--pc-card-bg);
    color: var(--pc-text);
    cursor: pointer;
}
.pc-tm-chip--filter:hover,
.pc-tm-chip--filter:focus-visible {
    border-color: var(--pc-text);
    color: var(--pc-text);
}
/* v0.61.0 CR-060 — explicit "not pressed" baseline. Without it, the
 * chip's selected fill could visually linger across the brief window
 * between aria-pressed=false being set and the next paint, when the
 * popstate path rehydrates from URL. The :not() chain is paranoid
 * but cheap; it guarantees the chip resets cleanly. */
.pc-tm-chip--filter[aria-pressed="false"]:not(.pc-tm-chip--filter-on) {
    background: var(--pc-card-bg);
    color: var(--pc-text);
    border-color: var(--pc-border);
}
.pc-tm-chip--filter[aria-pressed="true"],
.pc-tm-chip--filter.pc-tm-chip--filter-on {
    background: var(--pc-text);
    color: #fff;
    border-color: var(--pc-text);
}
.pc-tm-chip--filter[aria-pressed="true"]:hover,
.pc-tm-chip--filter.pc-tm-chip--filter-on:hover {
    background: var(--pc-text);
    color: #fff;
    border-color: var(--pc-text);
}

/* Swatch variant — chip carries a small color circle preceding the
 * label. Exterior uses the 16px swatch; interior uses the 12px
 * .pc-tm-chip--swatch-sm modifier so the two filter rows read as
 * a primary + secondary visual hierarchy. */
.pc-tm-chip--swatch {
    padding-left: 8px;
}
.pc-tm-chip__swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .18);
    flex-shrink: 0;
}
.pc-tm-chip__swatch--sm,
.pc-tm-chip--swatch-sm .pc-tm-chip__swatch {
    width: 12px;
    height: 12px;
}
/* When the chip is pressed (dark fill) bump the swatch border to a
 * light tone so white / pearl swatches stay visible against the
 * fill. */
.pc-tm-chip--filter[aria-pressed="true"] .pc-tm-chip__swatch {
    border-color: rgba(255, 255, 255, .35);
}

/* Mobile 375px — keep chip rows scannable; gap drops slightly so
 * 4-column color grids fit two rows. Touch target stays 44px. */
@media (max-width: 480px) {
    .pc-tm-archive__chip-group-row {
        gap: 5px;
    }
    .pc-tm-chip--filter {
        font-size: 12.5px;
        padding: 6px 10px;
    }
}

/* ============================================================
 * CR-025 PR-025b — Listing status section + dual-handle sliders
 * ============================================================
 *
 * Status section sits at the top of the filter rail, above the
 * "More filters" expander. Three radios, mutually exclusive.
 * Renders as a tight vertical stack on mobile, can wrap to two
 * lines on wider screens via flex-wrap.
 *
 * Slider — two <input type="range"> elements stacked on a shared
 * track via absolute positioning. Approach: the inputs are pointer-
 * events:none on their bodies (so the track between thumbs is a
 * passive band), but each thumb pseudo-element re-enables pointer
 * events so handles stay draggable. The visible track + selected
 * range are drawn on a sibling .pc-tm-slider__track div via a
 * ::before pseudo. Endpoint labels (formatted with thousands
 * separator by JS) flank the track.
 * ------------------------------------------------------------ */

.pc-tm-archive__status-section {
    margin: 0 0 16px;
    padding: 12px 14px;
    border: 1px solid #e2e6ea;
    border-radius: 8px;
    background: #fafbfc;
}
.pc-tm-archive__section-heading {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1c;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
.pc-tm-archive__status-options {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pc-tm-archive__status-option {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #2a2a2a;
    line-height: 1.4;
    padding: 4px 0;
    min-height: 28px;
}
.pc-tm-archive__status-option input[type="radio"] {
    margin: 0;
    accent-color: #c50000;
    width: 16px;
    height: 16px;
}
.pc-tm-archive__status-option:hover {
    color: #000;
}
@media (min-width: 921px) {
    /* Desktop: a touch more breathing room around the section. */
    .pc-tm-archive__status-section {
        margin-bottom: 18px;
    }
}

/* ---- Slider group ---- */
.pc-tm-archive__slider-group {
    padding: 8px 0 4px;
}
.pc-tm-slider {
    position: relative;
    margin: 6px 0 10px;
    user-select: none;
}
.pc-tm-slider__endpoints {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0 0 8px;
    font-size: 12.5px;
    color: #4a4a4a;
    font-variant-numeric: tabular-nums;
    gap: 8px;            /* v0.59.16 CR-055 hardening — guarantees a minimum
                          * visual gutter between min + max labels even when
                          * the parent cell narrows past the comfortable
                          * threshold. Pre-CR-054 the parent was force-flexed
                          * to ~50px wide which collapsed the labels into
                          * each other; this gap keeps them apart so a future
                          * regression degrades gracefully (labels wrap rather
                          * than overlap as "AED 0AED 0…"). */
    min-width: 0;
}
.pc-tm-slider__endpoint {
    white-space: nowrap;
    font-weight: 500;
    min-width: 0;        /* v0.59.16 CR-055 hardening — flex children otherwise
                          * inherit content-size as min-width, which prevents
                          * shrinking when the cell is narrow and causes the
                          * labels to overflow visually. */
}
.pc-tm-slider__endpoint output {
    font-weight: 600;
    color: #1c1c1c;
}

.pc-tm-slider__track {
    position: relative;
    height: 28px;          /* enough for the thumbs to live in */
    min-height: 28px;      /* v0.59.16 CR-055 hardening — anchor the track
                            * height so a future flex container that tries to
                            * `align-items: stretch` the slider group doesn't
                            * collapse the track to its content (the two range
                            * inputs are absolutely positioned and contribute
                            * zero intrinsic height). The pre-CR-054 layout
                            * exposed this as a "red square" symptom in Wolf's
                            * 2026-05-26 audit when the parent cell shrank
                            * past the inherited width and the track + thumbs
                            * visually collapsed onto each other. */
    margin: 0 8px;         /* breathing room so thumb at value=0 / max isn't clipped */
}
.pc-tm-slider__track::before {
    /* Underlying full-width track band */
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: #d8dde2;
    border-radius: 2px;
    pointer-events: none;
}

/* Both range inputs occupy the same area. We hide their default
 * tracks (cross-browser quirks fenced individually) and re-enable
 * pointer events only on the thumb. The selected-range visual
 * band between the two thumbs is drawn via a JS-set CSS custom
 * property pair (--pc-tm-slider-lo / --pc-tm-slider-hi as
 * percentages) on the parent .pc-tm-slider element + a
 * .pc-tm-slider__track::after rule. */
.pc-tm-slider__range {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;        /* body is passive; thumbs re-enable below */
    outline: none;
}
.pc-tm-slider__range:focus {
    outline: none;
}
/* WebKit / Blink / new Edge */
.pc-tm-slider__range::-webkit-slider-runnable-track {
    background: transparent;
    height: 4px;
    border: none;
}
.pc-tm-slider__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c50000;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    cursor: pointer;
    margin-top: -8px;            /* center on the 4px track */
}
.pc-tm-slider__range:focus-visible::-webkit-slider-thumb {
    outline: 2px solid #c50000;
    outline-offset: 2px;
}
/* Firefox */
.pc-tm-slider__range::-moz-range-track {
    background: transparent;
    height: 4px;
    border: none;
}
.pc-tm-slider__range::-moz-range-thumb {
    pointer-events: auto;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #c50000;
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
    cursor: pointer;
}
.pc-tm-slider__range:focus-visible::-moz-range-thumb {
    outline: 2px solid #c50000;
    outline-offset: 2px;
}

/* Selected range visual band — drawn via custom properties set by
 * the JS slider coordinator on the parent .pc-tm-slider element.
 * Falls back to no band (just the underlying grey track) before
 * JS hydrates. */
.pc-tm-slider__track::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: var(--pc-tm-slider-lo, 0%);
    right: calc(100% - var(--pc-tm-slider-hi, 100%));
    height: 4px;
    background: #c50000;
    border-radius: 2px;
    pointer-events: none;
}

/* The "max" range sits visually above the "min" so its thumb wins
 * the hit-test when they overlap at the same value. Z-index swap
 * happens via JS when min approaches max (R-503 — touch reliability). */
.pc-tm-slider__range--min { z-index: 2; }
.pc-tm-slider__range--max { z-index: 3; }

/* Manual entry disclosure under each slider. Collapsed by default;
 * the marker tone is muted to keep the slider as the primary
 * affordance. */
.pc-tm-slider__manual {
    margin: 6px 0 0;
    font-size: 13px;
}
.pc-tm-slider__manual > summary {
    cursor: pointer;
    color: #6a6a6a;
    padding: 4px 0;
    list-style: none;
}
.pc-tm-slider__manual > summary::-webkit-details-marker {
    display: none;
}
.pc-tm-slider__manual > summary::before {
    content: '▸ ';
    display: inline-block;
    margin-right: 4px;
    color: #9a9a9a;
    transition: transform 120ms ease-in-out;
}
.pc-tm-slider__manual[open] > summary::before {
    content: '▾ ';
}
.pc-tm-slider__manual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 6px;
}

/* Mobile 375px — slider track gets a touch more vertical breathing
 * room for thumb hit-targets. Endpoint labels stay readable. */
@media (max-width: 480px) {
    .pc-tm-slider__track {
        height: 32px;
        margin: 0 10px;
    }
    .pc-tm-slider__endpoints {
        font-size: 12px;
    }
}

/* ============================================================
 * v0.56.8 (CR-026 PR-026b) — detail-page polish
 * ============================================================
 *
 * Three additive surfaces inside the price-block sidebar
 * section:
 *   .pc-tm-car__dates         first-seen / last-refreshed pair
 *   .pc-tm-car__external-cta  promoted deep-link CTA
 *
 * Plus a chip-row rhythm tweak so the interior color swatch
 * sits comfortably alongside the exterior swatch + region
 * chip.
 */

.pc-tm-car__dates {
    margin: 10px 0 0;
    font-size: 12.5px;
    color: var(--pc-text-muted);
    line-height: 1.35;
}

.pc-tm-car__external-cta {
    margin: 12px 0 0;
}
.pc-tm-car__external-cta-link {
    display: inline-block;
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}

/* v0.60.2 (CR-057 PR-057b): chips-row base flex rule. Prior to PR-D
 * the wrapper had ONLY the mobile-breakpoint `row-gap` override below
 * and no desktop base — children flowed visually because each chip is
 * `display: inline-flex` but wrap behavior at 481px+ relied on default
 * line-height only. Matches the chip-row grammar CR-054 established
 * for the archive surface `pc-tm-archive__chip-group-row`. Per audit
 * §4.1. */
.pc-tm-car__chips-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    margin-bottom: 12px;
}

/* Tighten chip-row gap on mobile so the trim + exterior swatch +
 * interior swatch + region chip don't push to four lines at 375px.
 * Most cars carry three of the four; the fourth wraps cleanly. */
@media (max-width: 480px) {
    .pc-tm-car__chips-row {
        row-gap: 6px;
    }
    .pc-tm-car__dates {
        font-size: 12px;
    }
}

/* ============================================================
 * v0.58.2 (BATCH-FE-005 PR-D — CR-033 PR-033a) — Primary filter row
 * ============================================================
 *
 * Four customer-first filters (price slider, mileage slider, year
 * multiselect, trim multiselect) now live in a top-of-rail primary
 * block above the More-filters disclosure. Layout:
 *
 *   default / mobile (<768px) — vertical stack
 *   tablet (768-1023px)       — 2x2 grid (sliders top, chips bottom)
 *   desktop (>=1024px)        — single tight horizontal row, four
 *                                equal-width cells
 *
 * No JS changes: the slider coordinator + multi-select bindings
 * already scope to the `[data-pc-tm-slider]` / `[data-pc-tm-multi-
 * select]` attributes, both of which remain on the four fieldsets.
 *
 * CR-033b (PR-E at v0.58.3) reorganises the More-filters disclosure
 * into a button-toggled popover with the top-3-color rule. The
 * primary row stays as-is. */

.pc-tm-archive__primary {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0 0 16px;
}

/* Inside the primary row, fieldsets drop the default 8px top-padding
 * inherited from .pc-tm-archive__slider-group so the row sits flush
 * to the section above. Legends stay readable above each cell. */
.pc-tm-archive__primary-cell {
    margin: 0;
    padding: 0;
    border: 0;
    min-width: 0;            /* allow flex children to shrink below content width */
}
.pc-tm-archive__primary-cell > legend {
    padding: 0 0 6px;
    font-size: 13px;
    font-weight: 600;
    color: #1c1c1c;
    letter-spacing: 0.01em;
    text-transform: uppercase;
}
/* Inside the primary row, the slider group's default top-padding
 * would push the legend down; reset it here so the legend baseline
 * aligns across all four cells. */
.pc-tm-archive__primary .pc-tm-archive__slider-group {
    padding: 0;
}
/* Compact slider track + endpoints inside the primary row so the
 * four cells fit comfortably side-by-side on desktop without the
 * row growing taller than the chip cells. */
.pc-tm-archive__primary .pc-tm-slider {
    margin: 2px 0 6px;
}

/* v0.60.3 hotfix (BATCH-FE-007 PR-A re-apply of CR-054) — the legacy
 * tablet 2x2 grid + desktop flex-row overrides removed. `.pc-tm-archive
 * __primary` lives inside a 260px sticky sidebar (`.pc-tm-archive
 * __layout` @ 921px+); flexing four cells horizontally inside that
 * column compressed each cell to ~50px, narrower than any chip, so
 * each chip wrapped onto its own row AND the sliders' min/max labels
 * concatenated visually + the track collapsed. Now `.pc-tm-archive
 * __primary` stays column-stacked at all viewports; chips flow
 * horizontally inside `.pc-tm-archive__chip-group-row` (display: flex;
 * flex-wrap: wrap; gap: 6px); the slider keeps its full sidebar width.
 *
 * NOTE: this CSS removal was originally part of PR-A (v0.59.15) but
 * was lost in the §16 branch-contamination + parent-merge-SHA rewrite
 * churn documented in BATCH-FE-007-RETRO §4. The PR-A audit found the
 * overrides still in main; this hotfix re-applies the actual removal.
 *
 * Future caveat: if a redesign extracts `.pc-tm-archive__primary` OUT
 * of the 260px sidebar into a top-row layout, the row-flex override
 * MAY be wanted back — but with explicit width hardening so cells
 * don't collapse below chip width.
 */

/* =====================================================================
 * v0.58.3 (BATCH-FE-005 PR-E — CR-033 PR-033b) — Advanced popover +
 * colour top-3 + Other expander.
 *
 * Two sibling <details class="pc-tm-archive__more-filters"> disclosures
 * replace the legacy .pc-tm-more-filters block. The primary popover
 * carries the curated five secondary filters (exterior color, interior
 * color, listing status, FSD hardware, specs region) — all five are
 * stacked vertically inside .pc-tm-archive__more-filters-body. The
 * sibling .pc-tm-archive__more-filters--extra carries the long-tail
 * filters (market, model, title status, dealer type, hide private).
 *
 * Both popovers are native <details>; no JS, no positioning overlay.
 * On every breakpoint they expand INLINE below the summary. The
 * chevron rotates 180° on [open], reusing the visual grammar from
 * .pc-tm-archive-card__specs-summary-chevron (CR-021).
 *
 * Nested .pc-tm-archive__color-other <details> handles the long-tail
 * chip reveal inside the exterior + interior colour fieldsets. */

.pc-tm-archive__more-filters {
    display: block;
    margin: 0 0 12px;
    border: 1px solid var(--pc-border, #d8d8d8);
    border-radius: 8px;
    background: #fff;
}

.pc-tm-archive__more-filters[open] {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pc-tm-archive__more-filters-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #1c1c1c;
    list-style: none;
    user-select: none;
}

.pc-tm-archive__more-filters-summary::-webkit-details-marker { display: none; }
.pc-tm-archive__more-filters-summary::marker { content: ''; }

.pc-tm-archive__more-filters-summary:hover {
    background: var(--pc-card-bg, #f7f7f7);
    border-radius: 8px 8px 0 0;
}

.pc-tm-archive__more-filters-summary:focus-visible {
    outline: 2px solid var(--pc-accent, #0b66c2);
    outline-offset: 2px;
}

.pc-tm-archive__more-filters-label {
    flex: 1;
    /* Parenthesised "(N)" count suffix is part of the label text — no
     * separate badge bubble per the handoff spec
     * ("More filters (2)"). */
}

.pc-tm-archive__more-filters-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    color: #6a6a6a;
    font-size: 13px;
    line-height: 1;
}

.pc-tm-archive__more-filters[open] > .pc-tm-archive__more-filters-summary .pc-tm-archive__more-filters-chevron {
    transform: rotate(180deg);
}

.pc-tm-archive__more-filters-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 14px 14px;
    border-top: 1px solid var(--pc-border, #ececec);
}

/* The legacy .pc-tm-more-filters block grammar is RETAINED elsewhere
 * in this file so any cached HTML from an in-flight AJAX paint using
 * the older class names still renders gracefully. No removal here. */

/* Sibling "Other filters" popover — muted styling to signal it's the
 * long-tail (less-common) controls. Same expand-inline behaviour. */
.pc-tm-archive__more-filters--extra {
    background: transparent;
    border-color: var(--pc-border-faint, #ebebeb);
}
.pc-tm-archive__more-filters--extra > .pc-tm-archive__more-filters-summary {
    color: #4a4a4a;
    font-weight: 500;
}

/* Nested "Other (N)" disclosure inside the exterior + interior colour
 * fieldsets. Reveals the long-tail chips inline below the top-3 row.
 * The chip swatches keep their canonical fill — only the surround
 * styling distinguishes the long-tail row. */
.pc-tm-archive__color-other {
    display: block;
    margin: 6px 0 0;
}

.pc-tm-archive__color-other-summary {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 500;
    color: #555;
    background: var(--pc-card-bg, #f3f3f3);
    border-radius: 14px;
    list-style: none;
    user-select: none;
}

.pc-tm-archive__color-other-summary::-webkit-details-marker { display: none; }
.pc-tm-archive__color-other-summary::marker { content: ''; }

.pc-tm-archive__color-other-summary:hover {
    background: #e7e7e7;
}

.pc-tm-archive__color-other-summary:focus-visible {
    outline: 2px solid var(--pc-accent, #0b66c2);
    outline-offset: 2px;
}

.pc-tm-archive__color-other-label {
    /* Count suffix is part of the label text. */
}

.pc-tm-archive__color-other-chevron {
    display: inline-block;
    transition: transform 0.2s ease;
    color: #8a8a8a;
    font-size: 11px;
    line-height: 1;
}

.pc-tm-archive__color-other[open] > .pc-tm-archive__color-other-summary .pc-tm-archive__color-other-chevron {
    transform: rotate(180deg);
}

.pc-tm-archive__color-other-row {
    margin-top: 8px;
}

/* Desktop tweak — the popover body widens to a comfortable two-column
 * inner-grid when the rail has room. Status + hardware + specs region
 * sit alongside each other instead of stacking. Colour chip groups
 * keep their full-width row to allow the chip wrap behaviour to flow. */
@media (min-width: 1024px) {
    .pc-tm-archive__more-filters-body {
        padding: 8px 16px 16px;
    }
}

/* Honour reduced-motion preference for the chevron rotations. */
@media (prefers-reduced-motion: reduce) {
    .pc-tm-archive__more-filters-chevron,
    .pc-tm-archive__color-other-chevron {
        transition: none;
    }
}

/* ------------------------------------------------------------------
 * v0.58.9 (BATCH-FE-005 PR-K — CR-039) — deal-score caveat surface.
 *
 * Two visual primitives:
 *
 *   .pc-tm-badge__caveat-asterisk
 *       Tight inline asterisk after the badge label. Shows on the
 *       archive card corner badge, the cohort micro-line verdict,
 *       the rail mini-card badge, the detail-page inline badge, the
 *       compare-table badge, and the similar-vehicles rail badge.
 *       Single character; inherits the badge's text colour so it
 *       reads as part of the label, not a separate adornment.
 *
 *   .pc-tm-car__deal-caveat
 *       Footnote-style line below the detail-page deal sentence.
 *       Muted text, ~12-13px, no link. Three modifier classes
 *       (--salvage / --modified / --salvage_modified) reserved for
 *       optional flag-specific colour treatment; default rule applies
 *       to all three.
 * ------------------------------------------------------------------ */

.pc-tm-badge__caveat-asterisk {
    /* Inline-flow so the asterisk hugs the label without breaking it
     * across lines. font-weight: bold to make the asterisk read at
     * the badge's compressed size. */
    display: inline;
    font-weight: 700;
    margin-left: 1px;
    line-height: inherit;
    color: inherit;
}

.pc-tm-archive-card__cohort-caveat-asterisk {
    display: inline;
    font-weight: 700;
    margin-left: 1px;
    line-height: inherit;
    color: inherit;
}

.pc-tm-car__deal-caveat {
    /* Footnote tone — muted text, slightly smaller than body. Margin
     * pulls it close to the explanation sentence above (8px top); no
     * bottom margin so the next section flows naturally. */
    margin: 8px 0 0;
    font-size: 0.8125rem; /* 13px at the 16px root */
    line-height: 1.45;
    color: var(--pc-text-muted, #6b7280);
}

.pc-tm-car__deal-caveat--salvage,
.pc-tm-car__deal-caveat--salvage_modified {
    /* Salvage variant carries the heavier warning. Same muted tone as
     * the modified variant by default — operators can edit the copy
     * in wp_options without needing a separate visual treatment. */
}