/* =============================================================================
   The /Compare/ hub (.cmp-)

   Loaded on top of tyres-for.css, which supplies the tf- landing shell: the
   dark header band, the alternating section grounds, the table, the chips and
   the CTA. Only the parts that are peculiar to a comparison live here - the
   builder in the header band, the head-to-head cards, the record columns.

   Same typographic rule as the rest of the family: anything measured sits in
   the mono utility face with tabular figures, anything written is the body
   grotesque. Bare-class anchors are written a.class:link/:visited because
   style.css paints every anchor #003366 at (0,0,1,1), which beats a class.
   ========================================================================== */

.cmp {
    --cmp-line-on-ink: rgba(255, 255, 255, 0.14);
    --cmp-ground-on-ink: rgba(255, 255, 255, 0.05);
}

.cmp-rec,
.cmp-card__tests,
.cmp-card__score,
.cmp-table__n,
.cmp-tyre__meta,
.cmp-brandpair__meta,
.cmp-group__meta,
.cmp-latest__meta,
.cmp-dir__n,
.cmp-slot__shared {
    font-family: var(--tf-mono);
    font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   The builder

   Sits inside the dark header band, so it is a frosted panel on ink like
   .tf-verdict rather than a card on paper. Two slots and a "vs" is the shape
   people already hold in their heads for a comparison; the third to eighth
   tyre is a disclosure, not a default, because most visitors want two.
   ========================================================================== */

.cmp-builder {
    margin-top: 26px;
    max-width: 820px;
    background: var(--cmp-ground-on-ink);
    border: 1px solid var(--cmp-line-on-ink);
    border-radius: 6px;
    padding: 16px 18px 14px;
}

.cmp-builder__title {
    margin: 0 0 12px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--tf-mono);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tf-cyan);
}

.cmp-builder__slots {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    align-items: end;
}

/* The "vs" is decoration between two columns; stacked on a phone there is no
   between, so it goes. */
.cmp-builder__vs { display: none; }

@media (min-width: 700px) {
    .cmp-builder__slots {
        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
        gap: 12px;
    }
    .cmp-builder__vs {
        display: block;
        padding-bottom: 11px;
        font-family: var(--tf-mono);
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 0.12em;
        color: var(--tf-muted-on-ink);
    }
    /* A third tyre and beyond wraps onto its own full-width row rather than
       squeezing the first two: the slots hold long model names. */
    .cmp-slot[data-slot="2"] ~ .cmp-slot,
    .cmp-slot[data-slot="2"] { grid-column: 1 / -1; }
}

.cmp-slot { position: relative; min-width: 0; }

.cmp-slot__label {
    display: block;
    margin: 0 0 5px;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tf-muted-on-ink);
}

.cmp-slot__input {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--cmp-line-on-ink);
    border-radius: 4px;
    color: var(--tf-text);
    font-size: 0.95rem;
    line-height: 1.3;
}

.cmp-slot__input::placeholder { color: #7a8792; }
.cmp-slot__input:focus {
    outline: 3px solid var(--tf-cyan);
    outline-offset: 1px;
}

/* A chosen tyre replaces its input, so the slot always shows either a
   question or an answer and never both. */
.cmp-slot__chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.94);
    border: 1px solid var(--tf-cyan);
    border-radius: 4px;
    min-height: 43px;
    box-sizing: border-box;
}

.cmp-slot__chosen img {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    object-fit: contain;
}

.cmp-slot__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.9rem;
    line-height: 1.25;
    color: var(--tf-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-slot__clear {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 3px;
    color: var(--tf-muted);
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.cmp-slot__clear:hover { background: var(--tf-mist); color: var(--tf-text); }

.cmp-slot__results {
    position: absolute;
    z-index: 30;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 3px;
    max-height: 300px;
    overflow-y: auto;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 4px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}

.cmp-slot__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--tf-line);
    text-align: left;
    cursor: pointer;
}

.cmp-slot__opt:last-child { border-bottom: 0; }
.cmp-slot__opt:hover,
.cmp-slot__opt.is-active { background: var(--tf-mist); }

/* Never tested: listed, but nothing to compare it on. */
.cmp-slot__opt--off { cursor: default; }
.cmp-slot__opt--off:hover { background: none; }
.cmp-slot__opt--off img { opacity: 0.45; }
.cmp-slot__opt--off span { color: var(--tf-muted); }

.cmp-slot__opt img {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    object-fit: contain;
}

.cmp-slot__opt span {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.3;
    color: var(--tf-text);
}

.cmp-slot__shared {
    flex: 0 0 auto;
    font-size: 0.74rem;
    color: var(--tf-muted);
    white-space: nowrap;
}

.cmp-slot__empty {
    padding: 10px 11px;
    font-size: 0.85rem;
    color: var(--tf-muted);
}

.cmp-builder__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}

.cmp-builder__add {
    padding: 0;
    background: none;
    border: 0;
    color: var(--tf-cyan);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
}

.cmp-builder__add:hover { text-decoration: underline; }
.cmp-builder__add[hidden] { display: none; }

a.cmp-builder__go,
button.cmp-builder__go {
    border: 0;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 12px 26px;
    border-radius: 4px;
    background: var(--tf-cyan);
    color: #fff;
    font-weight: 700;
}

button.cmp-builder__go:disabled {
    background: rgba(255, 255, 255, 0.16);
    color: var(--tf-muted-on-ink);
    cursor: not-allowed;
}

.cmp-builder__note {
    margin: 12px 0 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--tf-muted-on-ink);
}

.cmp-builder__note--warn { color: #ffc9c2; }


/* ==========================================================================
   Head-to-head cards
   ========================================================================== */

.cmp-cards {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    margin-top: 18px;
}

@media (min-width: 620px) { .cmp-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .cmp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

a.cmp-card,
a.cmp-card:link,
a.cmp-card:visited {
    display: flex;
    flex-direction: column;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    overflow: hidden;
    color: var(--tf-text);
    text-decoration: none;
    transition: border-color 0.15s, transform 0.15s;
}

a.cmp-card:hover {
    border-color: var(--tf-cyan);
    transform: translateY(-2px);
}

.cmp-card__shot {
    display: block;
    background: var(--tf-mist);
    line-height: 0;
}

/* The vs artwork is drawn 1000x400, and any other ratio would crop into the
   tyres, so the box takes the artwork's own shape. */
.cmp-card__shot img {
    width: 100%;
    height: auto;
    aspect-ratio: 5 / 2;
    object-fit: cover;
}

.cmp-card__body {
    display: block;
    padding: 12px 14px 13px;
}

.cmp-card__season {
    display: inline-block;
    margin-bottom: 6px;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tf-muted);
}

.cmp-card__title {
    display: block;
    font-size: 0.98rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.cmp-card__title i { font-style: normal; color: var(--tf-muted); font-weight: 400; }

.cmp-card__record {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-top: 8px;
    font-size: 0.82rem;
    line-height: 1.4;
}

.cmp-card__tests { color: var(--tf-muted); font-size: 0.76rem; align-self: center; }

.cmp-card__scores {
    display: flex;
    gap: 16px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tf-line);
}

.cmp-card__score {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
}

.cmp-card__score em {
    font-style: normal;
    font-family: inherit;
    color: var(--tf-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}


/* ==========================================================================
   The record columns

   .cmp-rec is the compressed head-to-head: who leads, and by how much. It is
   deliberately not colour-coded green/red - a tyre that loses 7-9 across
   sixteen tests has not failed, and painting it red would say it had.
   ========================================================================== */

.cmp-table { min-width: 720px; }

.cmp-table__pair a,
.cmp-table__pair a:link,
.cmp-table__pair a:visited {
    color: var(--tf-text);
    text-decoration: none;
    font-weight: 600;
    line-height: 1.35;
}

.cmp-table__pair a:hover { color: var(--tf-cyan); }
.cmp-table__pair i { font-style: normal; font-weight: 400; color: var(--tf-muted); }

.cmp-table__n { text-align: center; width: 96px; }
.cmp-table__scores { white-space: nowrap; width: 132px; }
.cmp-table__sep { color: var(--tf-muted); margin: 0 2px; }

.cmp-rec { font-size: 0.85rem; color: var(--tf-text); }
.cmp-rec b { font-weight: 700; }
.cmp-rec--level { color: var(--tf-muted); }
.cmp-rec--none { color: var(--tf-muted); font-size: 0.8rem; }


/* ==========================================================================
   The tyres everything else is measured against
   ========================================================================== */

.cmp-tyres {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 18px;
}

@media (min-width: 620px) { .cmp-tyres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cmp-tyres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Column with the rival line pushed to the bottom, so the "most read
   against" rows line up across a row of cards whose names wrap differently. */
.cmp-tyre {
    display: flex;
    flex-direction: column;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    padding: 11px 13px 10px;
}

a.cmp-tyre__main,
a.cmp-tyre__main:link,
a.cmp-tyre__main:visited {
    display: flex;
    align-items: center;
    gap: 11px;
    color: var(--tf-text);
    text-decoration: none;
}

a.cmp-tyre__main:hover .cmp-tyre__name { color: var(--tf-cyan); }

.cmp-tyre__shot { flex: 0 0 auto; width: 44px; height: 44px; object-fit: contain; }
.cmp-tyre__text { flex: 1 1 auto; min-width: 0; }

.cmp-tyre__name {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.3;
}

.cmp-tyre__meta {
    display: block;
    margin-top: 3px;
    font-size: 0.76rem;
    color: var(--tf-muted);
}

.cmp-tyre__meta .tf-chip { margin-left: 6px; }

.cmp-tyre__rival {
    /* auto so the rule sits on the card's floor whatever the name above did;
       the spacing above it is the padding, not a margin auto would eat. */
    margin: auto 0 0;
    padding-top: 12px;
    border-top: 1px solid var(--tf-line);
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--tf-muted);
}

.cmp-tyre__rival a,
.cmp-tyre__rival a:link,
.cmp-tyre__rival a:visited {
    color: var(--tf-cyan);
    font-weight: 600;
    text-decoration: none;
}

.cmp-tyre__rival a:hover { text-decoration: underline; }


/* ==========================================================================
   Brand against brand
   ========================================================================== */

.cmp-brandpairs {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 12px;
    margin-top: 18px;
}

a.cmp-brandpair,
a.cmp-brandpair:link,
a.cmp-brandpair:visited {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 12px 13px;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    color: var(--tf-text);
    text-decoration: none;
    text-align: center;
}

a.cmp-brandpair:hover { border-color: var(--tf-cyan); }

.cmp-brandpair__logos {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
}

.cmp-brandpair__logos img { max-width: 68px; max-height: 30px; object-fit: contain; }

.cmp-brandpair__logos b {
    font-family: var(--tf-mono);
    font-size: 0.66rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--tf-muted);
}

.cmp-brandpair__title { font-size: 0.9rem; font-weight: 700; line-height: 1.3; }
.cmp-brandpair__title i { font-style: normal; font-weight: 400; color: var(--tf-muted); }
.cmp-brandpair__meta { font-size: 0.74rem; color: var(--tf-muted); }


/* ==========================================================================
   Group comparisons, recently added
   ========================================================================== */

.cmp-groups,
.cmp-latest {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    background: var(--tf-paper);
}

.cmp-group,
.cmp-latest li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    padding: 11px 14px;
    border-bottom: 1px solid var(--tf-line);
}

.cmp-groups li:last-child,
.cmp-latest li:last-child { border-bottom: 0; }

.cmp-group a,
.cmp-group a:link,
.cmp-group a:visited,
.cmp-latest a,
.cmp-latest a:link,
.cmp-latest a:visited {
    flex: 1 1 260px;
    color: var(--tf-text);
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

.cmp-group a:hover,
.cmp-latest a:hover { color: var(--tf-cyan); }

.cmp-latest a i { font-style: normal; font-weight: 400; color: var(--tf-muted); }

.cmp-group__meta,
.cmp-latest__meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.76rem;
    color: var(--tf-muted);
    white-space: nowrap;
}

.cmp-latest__meta .tf-chip { margin-left: 0; }

.cmp-more { margin: 12px 0 0; font-size: 0.85rem; }

.cmp-more a,
.cmp-more a:link,
.cmp-more a:visited {
    color: var(--tf-cyan);
    font-weight: 600;
    text-decoration: none;
}

.cmp-more a:hover { text-decoration: underline; }


/* ==========================================================================
   Browse by brand
   ========================================================================== */

.cmp-dir { margin-top: 20px; }

.cmp-dir__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(158px, 1fr));
    gap: 8px;
    margin-top: 10px;
}

a.cmp-dir__brand,
a.cmp-dir__brand:link,
a.cmp-dir__brand:visited {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    background: var(--tf-paper);
    border: 1px solid var(--tf-line);
    border-radius: 5px;
    color: var(--tf-text);
    text-decoration: none;
}

a.cmp-dir__brand:hover { border-color: var(--tf-cyan); color: var(--tf-cyan); }

.cmp-dir__brand img { flex: 0 0 auto; width: 26px; height: 26px; object-fit: contain; }

.cmp-dir__name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cmp-dir__n { flex: 0 0 auto; font-size: 0.78rem; color: var(--tf-muted); }


/* ==========================================================================
   FAQ
   ========================================================================== */

.cmp-faq {
    margin-top: 16px;
    border: 1px solid var(--tf-line);
    border-radius: 6px;
    background: var(--tf-paper);
    max-width: 900px;
}

.cmp-faq__item { border-bottom: 1px solid var(--tf-line); }
.cmp-faq__item:last-child { border-bottom: 0; }

.cmp-faq__q {
    padding: 13px 16px;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
    color: var(--tf-text);
    cursor: pointer;
    list-style: none;
}

.cmp-faq__q::-webkit-details-marker { display: none; }

.cmp-faq__q::after {
    content: ' \25BE';
    color: var(--tf-muted);
    font-weight: 400;
}

.cmp-faq__item[open] .cmp-faq__q::after { content: ' \25B4'; }

.cmp-faq__q:hover { color: var(--tf-cyan); }

.cmp-faq__a { padding: 0 16px 14px; }

.cmp-faq__a p {
    margin: 0;
    max-width: var(--tr-measure);
    font-size: 0.92rem;
    line-height: 1.65;
    color: var(--tf-muted);
}