/* Tyre-page owner reviews section (.tr-reviews and friends).
   Rendered by includes/Tyre/tyre_display_reviews.php + templates/partials/reviews-*.

   Built on the new look's shared tokens (--tr-* in style.css) and its grammar,
   so the band reads like the ones above it rather than a widget dropped onto
   the page: the big band title with its one action on the right, 1180px of
   hairline-bordered white panels with 8px radii, mono uppercase eyebrows,
   measured things (scores, counts, sizes, distances, dates) in the mono face,
   cyan as the only accent and green / amber / red only where a score is being
   judged.

   Every list in here resets its own padding: style.css pads every li by 10px
   below 768px, which is what used to open the mobile cards up into gaps. */

.tr-reviews {
    --rv-line: var(--tr-line, #dde3e9);
    --rv-soft: #edf1f5;                  /* hairlines inside a panel */
    --rv-mist: var(--tr-mist, #eef1f4);
    --rv-paper: var(--tr-paper, #ffffff);
    --rv-text: var(--tr-text, #17202a);
    --rv-muted: var(--tr-muted, #5d6a75);
    --rv-faint: #9aa6b1;                 /* icons only, never text */
    --rv-cyan: var(--tr-cyan, #0db1e7);
    --rv-cyan-ink: #0a7ea8;              /* cyan dark enough to read as text */
    --rv-cyan-tint: #e3f5fc;
    --rv-good: var(--tr-good, #1d9e55);
    --rv-mid: var(--tr-mid, #b57a00);
    --rv-poor: var(--tr-poor, #c0392b);
    --rv-good-bar: #1d9e55;
    --rv-mid-bar: #e0a40f;
    --rv-poor-bar: #d9493a;
    --rv-good-tint: rgba(29, 158, 85, 0.12);
    --rv-mid-tint: rgba(181, 122, 0, 0.13);
    --rv-poor-tint: rgba(192, 57, 43, 0.1);
    --rv-mono: var(--tr-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
    --rv-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

    color: var(--rv-text);
}

/* The one eyebrow every block in the section uses: a mono label, with the
   "from N reviews" scope beside it in the reading face. */
.tr-rv-eyebrow {
    margin: 0 0 10px;
    font-family: var(--rv-mono);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rv-muted);
}

.tr-rv-eyebrow__scope {
    margin-left: 8px;
    font-family: var(--rv-sans);
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

/* Sub-sections inside the band (featured reviews, the full list): the tf
   season-title size, one step down from the band title. Resets the global
   h1 box, which the page-2 list title would otherwise wear. */
.tr-rv-subhead {
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.25;
    color: var(--rv-text);
}

/* ==========================================================================
   Masthead: band title, then one panel - what owners say | owner ratings
   ========================================================================== */

.tr-rv-masthead__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}

.tr-rv-masthead__title {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: var(--rv-text);
}

/* Same button the other bands carry ("View Test Results", "View All"). */
.tr-reviews a.tr-rv-masthead__action,
.tr-reviews a.tr-rv-masthead__action:link,
.tr-reviews a.tr-rv-masthead__action:visited {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 1px solid var(--rv-cyan);
    border-radius: 4px;
    background: var(--rv-cyan);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
}

.tr-reviews a.tr-rv-masthead__action:hover,
.tr-reviews a.tr-rv-masthead__action:focus {
    background: #0a9bcc;
    border-color: #0a9bcc;
    color: #ffffff;
}

.tr-rv-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    margin-top: 16px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: var(--rv-paper);
}

.tr-rv-say,
.tr-rv-rates {
    min-width: 0;
    padding: 16px;
}

.tr-rv-say + .tr-rv-rates {
    border-top: 1px solid var(--rv-line);
}

/* --- What owners say ------------------------------------------------------ */

/* The paragraph an AI answer is most likely to lift, so it reads as prose
   rather than as a caption. */
.tr-rv-say__text {
    margin: 0;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--rv-text);
    max-width: var(--tr-measure, none);
}

.tr-rv-say__text + .tr-rv-say__text {
    margin-top: 10px;
}

/* Owners praise / Owners criticise, where a tyre has no trait chips. */
.tr-rv-say__cols {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 14px 28px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rv-soft);
}

.tr-rv-say__heading {
    margin: 0 0 6px;
    font-family: var(--rv-mono);
    font-size: 0.68rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.tr-rv-say__col--pos .tr-rv-say__heading { color: var(--rv-good); }
.tr-rv-say__col--neg .tr-rv-say__heading { color: var(--rv-mid); }

.tr-rv-say__col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tr-rv-say__col li {
    position: relative;
    margin: 0;
    padding: 0 0 0 20px;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--rv-text);
}

.tr-rv-say__col li + li {
    margin-top: 5px;
}

.tr-rv-say__col li::before {
    position: absolute;
    left: 0;
    top: 1px;
    font-family: FontAwesome;
    font-size: 0.78rem;
}

.tr-rv-say__col--pos li::before { content: "\f00c"; color: var(--rv-good); }
.tr-rv-say__col--neg li::before { content: "\f068"; color: var(--rv-mid); }

/* What owners mention most: counted chips, each a filter on the list. */
.tr-rv-traits {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--rv-soft);
}

.tr-rv-traits__row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tr-rv-trait {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 6px 8px 6px 11px;
    border: 1px solid var(--rv-line);
    border-radius: 999px;
    background: var(--rv-paper);
    color: var(--rv-text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.tr-rv-trait .fa { font-size: 0.76rem; }
.tr-rv-trait.is-pos .fa { color: var(--rv-good); }
.tr-rv-trait.is-neg .fa { color: var(--rv-mid); }

.tr-rv-trait__n {
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--rv-mist);
    font-family: var(--rv-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rv-muted);
}

.tr-rv-trait:hover { border-color: var(--rv-cyan); }

.tr-rv-trait.is-active {
    border-color: var(--rv-cyan);
    background: var(--rv-cyan-tint);
    color: #075985;
}

.tr-rv-trait.is-active .tr-rv-trait__n {
    background: var(--rv-paper);
    color: #075985;
}

.tr-rv-traits__hint {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--rv-muted);
}

/* --- Owner ratings ---------------------------------------------------------- */

/* One column of labelled bars, best first. They used to run eight abreast
   across the top of the box, which shrank every name to fit. */
.tr-rv-rates__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 9px 28px;
}

/* The bar column is fixed so every bar starts and ends at the same x and the
   lengths compare at a glance; the name takes the rest and wraps rather than
   truncating ("Adhérence sur le mouillé", "Karlı Zeminde Tutunma"). */
.tr-rv-rate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(64px, 110px) 3.2em;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
}

.tr-rv-rate__name {
    font-size: 0.85rem;
    line-height: 1.3;
    color: var(--rv-text);
    overflow-wrap: break-word;
}

.tr-rv-rate__track {
    display: block;
    height: 6px;
    border-radius: 3px;
    background: var(--rv-mist);
    overflow: hidden;
}

.tr-rv-rate__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
}

.tr-rv-rate__fill.is-high { background: var(--rv-good-bar); }
.tr-rv-rate__fill.is-mid  { background: var(--rv-mid-bar); }
.tr-rv-rate__fill.is-low  { background: var(--rv-poor-bar); }

.tr-rv-rate__value {
    font-family: var(--rv-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.82rem;
    font-weight: 600;
    text-align: right;
    color: var(--rv-text);
}

/* The overall figure heads the column, a step heavier than its breakdown. */
.tr-rv-rate--overall {
    grid-column: 1 / -1;
    margin-bottom: 3px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--rv-soft);
}

.tr-rv-rate--overall .tr-rv-rate__name { font-weight: 700; }
.tr-rv-rate--overall .tr-rv-rate__track { height: 8px; border-radius: 4px; }
.tr-rv-rate--overall .tr-rv-rate__value { font-size: 0.95rem; font-weight: 700; }

/* Stacked under the prose, the bars have the whole width: two columns. */
@media (min-width: 560px) {
    .tr-rv-rates__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-rv-rate--overall { max-width: calc(50% - 14px); }
    .tr-rv-say__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 900px) {
    .tr-rv-summary { grid-template-columns: minmax(0, 1fr) 340px; }
    .tr-rv-say,
    .tr-rv-rates { padding: 20px 24px; }
    .tr-rv-say + .tr-rv-rates {
        border-top: 0;
        border-left: 1px solid var(--rv-line);
    }
    /* Beside the prose, the bars are a single column again. */
    .tr-rv-say + .tr-rv-rates .tr-rv-rates__list { grid-template-columns: minmax(0, 1fr); }
    .tr-rv-say + .tr-rv-rates .tr-rv-rate--overall { max-width: none; }

    /* Only one half to show (a tyre with too few reviews for a summary): it
       takes the panel, and the bars spread across it. */
    .tr-rv-summary--single { grid-template-columns: minmax(0, 1fr); }
    .tr-rv-summary--single .tr-rv-rates__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tr-rv-summary--single .tr-rv-rate--overall { max-width: calc(33.33% - 19px); }
}

@media (min-width: 768px) {
    .tr-rv-masthead__title { font-size: 1.8rem; }
}

/* ==========================================================================
   Featured reviews
   ========================================================================== */

.tr-rv-highlights {
    margin-top: 30px;
}

.tr-rv-highlights .tr-rv-subhead {
    margin-bottom: 12px;
}

/* A row you swipe on a phone; three abreast from tablet up. */
.tr-rv-highlights__grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 20px;
    -webkit-overflow-scrolling: touch;
    /* Runs to the screen edge through the band's 20px gutter. */
    margin: 0 -20px;
    padding: 0 20px 4px;
    scrollbar-width: thin;
}

.tr-rv-hl {
    flex: 0 0 84%;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 14px 16px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: var(--rv-paper);
}

.tr-rv-highlights__grid--1 .tr-rv-hl { flex-basis: 100%; }

@media (min-width: 760px) {
    .tr-rv-highlights__grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        overflow: visible;
        margin: 0;
        padding: 0;
    }
    .tr-rv-highlights__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .tr-rv-highlights__grid--1 { grid-template-columns: minmax(0, 560px); }
}

.tr-rv-hl__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.tr-rv-hl__label {
    font-family: var(--rv-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rv-muted);
}

.tr-rv-hl__label .fa { margin-right: 3px; }
.tr-rv-hl--helpful  .tr-rv-hl__label .fa { color: var(--rv-cyan); }
.tr-rv-hl--critical .tr-rv-hl__label .fa { color: var(--rv-mid); }
.tr-rv-hl--longterm .tr-rv-hl__label .fa { color: var(--rv-good); }

/* Same pill as the review cards, so a featured 28% reads as the card will. */
.tr-rv-hl__score,
.tr-rv-card__score,
.tr-rv-past__score {
    flex: 0 0 auto;
    border-radius: 5px;
    background: var(--rv-mist);
    color: var(--rv-text);
    font-family: var(--rv-mono);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
}

.tr-rv-hl__score {
    padding: 3px 7px;
    font-size: 0.82rem;
}

.tr-rv-hl__score.is-high,
.tr-rv-card__score--high,
.tr-rv-past__score--high { background: var(--rv-good-tint); color: var(--rv-good); }

.tr-rv-hl__score.is-mid,
.tr-rv-card__score--mid,
.tr-rv-past__score--mid { background: var(--rv-mid-tint); color: var(--rv-mid); }

.tr-rv-hl__score.is-low,
.tr-rv-card__score--low,
.tr-rv-past__score--low { background: var(--rv-poor-tint); color: var(--rv-poor); }

.tr-rv-hl__excerpt {
    flex: 1 1 auto;
    margin: 10px 0 0;
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--rv-text);
}

/* Car, distance and helpful count as one line of metadata. */
.tr-rv-hl__meta {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--rv-muted);
}

.tr-rv-hl__meta li {
    margin: 0;
    padding: 0;
}

.tr-rv-hl__meta li + li::before {
    content: "\00b7";
    margin: 0 7px;
    color: var(--rv-faint);
}

.tr-rv-hl__num {
    font-family: var(--rv-mono);
    font-size: 0.74rem;
}

.tr-rv-hl__foot {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 12px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--rv-soft);
}

.tr-reviews a.tr-rv-hl__link,
.tr-reviews a.tr-rv-hl__link:link,
.tr-reviews a.tr-rv-hl__link:visited {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--rv-cyan-ink);
    text-decoration: none;
}

.tr-rv-hl__votes {
    font-size: 0.78rem;
    color: var(--rv-muted);
}

.tr-rv-hl__votes .fa {
    color: var(--rv-faint);
}

.tr-reviews a.tr-rv-hl__link:hover {
    text-decoration: underline;
}

/* ==========================================================================
   The list: heading, controls panel, cards
   ========================================================================== */

.tr-reviews__listing {
    margin-top: 32px;
}

.tr-reviews__listing-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

.tr-reviews__page-label {
    font-weight: 600;
    color: var(--rv-muted);
}

.tr-reviews__count {
    margin: 0;
    font-family: var(--rv-mono);
    font-size: 0.76rem;
    color: var(--rv-muted);
}

.tr-reviews__count:empty {
    display: none;
}

.tr-reviews__list.is-loading {
    opacity: 0.45;
    transition: opacity 0.15s ease;
}

.tr-reviews__empty {
    margin: 0 0 12px;
    padding: 18px;
    border: 1px dashed var(--rv-line);
    border-radius: 8px;
    text-align: center;
    font-size: 0.9rem;
    color: var(--rv-muted);
}

.tr-reviews__clear-inline {
    border: 0;
    background: transparent;
    color: var(--rv-cyan-ink);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
}

/* Load-more takes over from the numbered pages on page one. .tr-pagination is
   display:flex, which beats the hidden attribute on its own. */
.tr-pagination[hidden] {
    display: none !important;
}

.tr-reviews__more {
    margin: 14px 0 4px;
    text-align: center;
}

.tr-reviews__more-btn {
    padding: 10px 22px;
    border: 1px solid var(--rv-cyan);
    border-radius: 4px;
    background: var(--rv-paper);
    color: var(--rv-cyan-ink);
    font-size: 0.88rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tr-reviews__more-btn:hover {
    background: var(--rv-cyan);
    color: #ffffff;
}

.tr-reviews__more-btn[disabled] {
    opacity: 0.6;
    cursor: default;
}

/* --- Controls panel: score spread over search / sort / filters -------------- */

/* Everything that narrows the list, on one mist panel directly above it. */
.tr-rv-controls {
    margin: 12px 0 14px;
    padding: 14px 16px;
    border-radius: 8px;
    background: var(--rv-mist);
}

/* The whole distribution in one strip. Five stacked bars said the same thing
   in twenty times the height. */
.tr-rv-spread__bar {
    display: flex;
    gap: 2px;
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    background: #dfe5ea;
}

.tr-rv-spread__seg {
    display: block;
    height: 100%;
    flex: 0 1 auto;
}

.tr-rv-spread__seg--excellent { background: var(--rv-good-bar); }
.tr-rv-spread__seg--good      { background: var(--rv-mid-bar); }
.tr-rv-spread__seg--poor      { background: var(--rv-poor-bar); }

.tr-rv-spread__bands {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.tr-rv-spread__title {
    margin-right: 6px;
    font-family: var(--rv-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--rv-muted);
}

.tr-rv-spread__scope {
    margin-left: 6px;
    font-family: var(--rv-sans);
    font-size: 0.76rem;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.tr-rv-band {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    color: var(--rv-text);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tr-rv-band:hover:not(:disabled) {
    background: var(--rv-paper);
}

.tr-rv-band--empty,
.tr-rv-band:disabled {
    cursor: default;
    opacity: 0.45;
}

.tr-rv-band.is-active {
    border-color: var(--rv-cyan);
    background: var(--rv-cyan-tint);
    color: #075985;
}

.tr-rv-band__dot {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.tr-rv-band__dot--excellent { background: var(--rv-good-bar); }
.tr-rv-band__dot--good      { background: var(--rv-mid-bar); }
.tr-rv-band__dot--poor      { background: var(--rv-poor-bar); }

.tr-rv-band__label {
    font-family: var(--rv-mono);
    font-size: 0.76rem;
}

.tr-rv-band__count {
    font-family: var(--rv-mono);
    font-size: 0.76rem;
    font-weight: 700;
}

.tr-rv-toolbar {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--rv-line);
}

.tr-rv-toolbar[hidden] { display: none; }

/* A toolbar with no spread above it has no rule to draw. */
.tr-rv-controls > .tr-rv-toolbar:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.tr-rv-toolbar__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
}

.tr-rv-toolbar__search {
    position: relative;
    flex: 1 1 220px;
    max-width: 340px;
    display: flex;
    align-items: center;
}

.tr-rv-toolbar__search .fa {
    position: absolute;
    left: 11px;
    font-size: 0.8rem;
    color: var(--rv-faint);
    pointer-events: none;
}

.tr-rv-toolbar__input {
    width: 100%;
    padding: 7px 12px 7px 31px;
    border: 1px solid var(--rv-line);
    border-radius: 6px;
    background: var(--rv-paper);
    font-size: 0.88rem;
    color: var(--rv-text);
}

.tr-rv-toolbar__input:focus,
.tr-rv-toolbar__select:focus {
    outline: none;
    border-color: var(--rv-cyan);
    box-shadow: 0 0 0 3px rgba(13, 177, 231, 0.18);
}

.tr-rv-toolbar__sort {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

.tr-rv-toolbar__sort-label,
.tr-rv-seg__label,
.tr-rv-adv__label {
    font-family: var(--rv-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rv-muted);
    white-space: nowrap;
}

.tr-rv-toolbar__select {
    max-width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--rv-line);
    border-radius: 6px;
    background-color: var(--rv-paper);
    font-size: 0.85rem;
    color: var(--rv-text);
}

.tr-rv-toolbar__select--filter {
    padding: 5px 8px;
    font-size: 0.82rem;
}

/* Segmented control - one filter key, one value. Drawn as a single control
   because that is how it behaves: picking an option replaces the last one.
   As loose chips these looked like independent toggles that mysteriously
   switched each other off. */
.tr-rv-seg {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--rv-line);
    border-radius: 999px;
    background: var(--rv-paper);
}

.tr-rv-seg__label {
    padding: 0 5px 0 8px;
}

.tr-rv-seg__opt {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    color: var(--rv-text);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.tr-rv-seg__opt:hover {
    background: var(--rv-mist);
}

.tr-rv-seg__opt.is-active {
    background: var(--rv-cyan-tint);
    color: #075985;
    box-shadow: inset 0 0 0 1px var(--rv-cyan);
}

.tr-rv-seg__count,
.tr-rv-toggle__count {
    font-family: var(--rv-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--rv-muted);
}

.tr-rv-seg__opt.is-active .tr-rv-seg__count,
.tr-rv-toggle.is-active .tr-rv-toggle__count {
    color: #075985;
}

/* Photos is a genuine on / off, so it stays a single toggle rather than being
   forced into a group with an "Any" it does not need. */
.tr-rv-toggle,
.tr-rv-toolbar__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--rv-line);
    border-radius: 999px;
    background: var(--rv-paper);
    font-size: 0.8rem;
    color: var(--rv-text);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tr-rv-toggle:hover,
.tr-rv-toolbar__more:hover {
    border-color: var(--rv-cyan);
}

.tr-rv-toggle .fa,
.tr-rv-toolbar__more .fa {
    font-size: 0.76rem;
    color: var(--rv-faint);
}

.tr-rv-toggle.is-active {
    border-color: var(--rv-cyan);
    background: var(--rv-cyan-tint);
    color: #075985;
}

.tr-rv-toggle.is-active .fa {
    color: #075985;
}

/* The long tail: road type, driving style, car make, review stage. Real
   filters, but not what most readers came for, so they cost one button
   instead of four rows. */
.tr-rv-toolbar__more[aria-expanded="true"] {
    border-color: var(--rv-cyan);
}

.tr-rv-toolbar__more[aria-expanded="true"] .tr-rv-toolbar__more-caret {
    transform: rotate(180deg);
}

.tr-rv-toolbar__more-count {
    min-width: 17px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--rv-cyan);
    color: #ffffff;
    font-family: var(--rv-mono);
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
}

.tr-rv-toolbar__more-count[hidden] {
    display: none;
}

.tr-rv-toolbar__clear {
    padding: 5px 8px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--rv-poor);
    cursor: pointer;
}

.tr-rv-toolbar__clear:hover {
    text-decoration: underline;
}

.tr-rv-adv {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed var(--rv-line);
}

.tr-rv-adv[hidden] {
    display: none;
}

.tr-rv-adv__field {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
}

/* --- Review card -------------------------------------------------------------- */

.tr-rv-card {
    margin-bottom: 12px;
    padding: 16px 18px;
    border: 1px solid var(--rv-line);
    border-radius: 8px;
    background: var(--rv-paper);
}

.tr-rv-card:target,
.tr-rv-card.is-focused {
    border-color: var(--rv-cyan);
    box-shadow: 0 0 0 3px rgba(13, 177, 231, 0.18);
}

.tr-rv-card__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-bottom: 10px;
}

.tr-rv-card__score {
    min-width: 54px;
    padding: 6px 8px;
    font-size: 1rem;
}

.tr-rv-card__score span,
.tr-rv-past__score span {
    font-size: 0.72em;
    font-weight: 600;
}

.tr-rv-card__who {
    flex: 1 1 auto;
    min-width: 130px;
    line-height: 1.3;
}

.tr-rv-card__author {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--rv-text);
}

.tr-reviews .tr-rv-card__author a:link,
.tr-reviews .tr-rv-card__author a:visited {
    color: var(--rv-text);
    text-decoration: none;
}

.tr-reviews .tr-rv-card__author a:hover {
    color: var(--rv-cyan-ink);
    text-decoration: underline;
}

/* Unnamed reviewers read as plain secondary text: there is no verification
   behind them, so nothing here should look like a trust mark. */
.tr-rv-card__author--unnamed {
    font-weight: 500;
    color: var(--rv-muted);
}

.tr-rv-card__badge {
    margin-left: 6px;
    font-size: 0.72rem;
    font-weight: 600;
}

.tr-rv-card__date {
    display: block;
    margin-top: 2px;
    font-family: var(--rv-mono);
    font-size: 0.72rem;
    color: var(--rv-muted);
}

/* Review-journey stage: where in the tyre's life this report was written. */
.tr-rv-card__stage {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid var(--rv-line);
    border-radius: 4px;
    background: var(--rv-paper);
    font-family: var(--rv-mono);
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--rv-muted);
}

.tr-rv-card__stage--2 { border-color: rgba(13, 177, 231, 0.45); background: var(--rv-cyan-tint); color: #075985; }
.tr-rv-card__stage--3 { border-color: rgba(29, 158, 85, 0.4); background: var(--rv-good-tint); color: var(--rv-good); }

.tr-rv-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 16px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 1px solid var(--rv-soft);
    font-size: 0.82rem;
    line-height: 1.45;
    color: var(--rv-muted);
}

.tr-rv-card__facts li {
    margin: 0;
    padding: 0;
}

.tr-rv-card__facts .fa {
    margin-right: 3px;
    font-size: 0.76rem;
    color: var(--rv-faint);
}

.tr-reviews .tr-rv-card__facts a:link,
.tr-reviews .tr-rv-card__facts a:visited {
    color: var(--rv-text);
    font-weight: 600;
    text-decoration: none;
}

.tr-reviews .tr-rv-card__facts a:hover {
    color: var(--rv-cyan-ink);
    text-decoration: underline;
}

.tr-rv-card__num {
    font-family: var(--rv-mono);
    font-size: 0.78rem;
}

.tr-rv-card__body {
    font-size: 0.95rem;
    line-height: 1.65;
    color: var(--rv-text);
    overflow-wrap: break-word;
}

.tr-rv-card__body p:last-child {
    margin-bottom: 0;
}

/* Folded, not truncated: the whole review stays in the HTML so crawlers and AI
   engines always see the full text even when it's visually collapsed. */
.tr-rv-card__body--clamped {
    max-height: 9.9em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 68%, transparent 100%);
}

.tr-rv-card__body.is-expanded {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

.tr-rv-card__expand {
    margin-top: 6px;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--rv-cyan-ink);
    cursor: pointer;
}

.tr-rv-card__expand:hover {
    text-decoration: underline;
}

.tr-rv-card__images {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.tr-rv-card__images img {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--rv-line);
    border-radius: 6px;
}

.tr-rv-card__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--rv-soft);
}

/* Open, the scores are taller than the link, so the link sits at the top of the
   row rather than floating down beside the middle of the bars. Browsers without
   :has() keep the centred version, which is only wrong by a few pixels. */
.tr-rv-card__foot:has(.tr-rv-card__scores[open]) {
    align-items: flex-start;
}

/* Shares the footer row with the helpful link; grows into the width the link
   isn't using when opened. */
.tr-rv-card__scores {
    flex: 1 1 auto;
    min-width: 0;
}

.tr-rv-card__scores summary {
    cursor: pointer;
    font-family: var(--rv-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rv-muted);
}

.tr-rv-card__scores summary:hover {
    color: var(--rv-text);
}

.tr-rv-scorelist {
    list-style: none;
    margin: 10px 0 2px;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 6px 24px;
}

/* Same fixed bar column as the owner ratings, for the same reason. */
.tr-rv-scorelist li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px 24px;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 0;
}

.tr-rv-scorelist__label {
    font-size: 0.8rem;
    line-height: 1.3;
    color: var(--rv-muted);
    overflow-wrap: break-word;
}

.tr-rv-scorelist__track {
    height: 6px;
    border-radius: 3px;
    background: var(--rv-mist);
    overflow: hidden;
}

.tr-rv-scorelist__fill {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--rv-cyan);
}

.tr-rv-scorelist__fill--excellent { background: var(--rv-good-bar); }
.tr-rv-scorelist__fill--good      { background: var(--rv-mid-bar); }
.tr-rv-scorelist__fill--poor      { background: var(--rv-poor-bar); }

.tr-rv-scorelist__value {
    font-family: var(--rv-mono);
    font-size: 0.8rem;
    font-weight: 600;
    text-align: right;
    color: var(--rv-text);
}

.tr-reviews a.tr-rv-card__helpful,
.tr-reviews a.tr-rv-card__helpful:link,
.tr-reviews a.tr-rv-card__helpful:visited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Holds the right edge whether or not this card has a scores toggle. */
    margin-left: auto;
    flex: 0 0 auto;
    font-size: 0.82rem;
    color: var(--rv-muted);
    text-decoration: none;
}

.tr-rv-card__helpful strong {
    font-family: var(--rv-mono);
    font-weight: 700;
    color: var(--rv-text);
}

.tr-reviews a.tr-rv-card__helpful:hover,
.tr-reviews a.tr-rv-card__helpful:hover strong {
    color: var(--rv-cyan-ink);
}

.tr-reviews a.tr-rv-card__helpful.is-voted,
.tr-reviews a.tr-rv-card__helpful.is-voted strong {
    color: var(--rv-good);
    pointer-events: none;
}

/* --- Our reply to a review ------------------------------------------------ */

.tr-rv-reply {
    margin: -4px 0 12px 22px;
    padding: 12px 16px;
    border-left: 3px solid var(--rv-cyan);
    border-radius: 0 8px 8px 0;
    background: var(--rv-mist);
}

.tr-rv-reply__who {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: var(--rv-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--rv-text);
}

.tr-rv-reply__who img {
    width: 22px;
    height: 24px;
}

.tr-rv-reply__text {
    margin-top: 6px;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--rv-text);
    overflow-wrap: break-word;
}

/* ==========================================================================
   Review journey - one owner's repeat reports on the same set

   The current report renders as an ordinary card; its earlier entries hang off
   the bottom of it on a timeline rail, dimmer and tighter, so the group reads
   top-down as "here is where this set is now, and here is where it came from".
   ========================================================================== */

.tr-rv-journey {
    margin-bottom: 12px;
    padding: 8px 8px 2px;
    border-left: 3px solid var(--rv-faint);
    border-radius: 8px;
    background: var(--rv-mist);
}

/* The accent takes the stage the set has reached, so a group's colour says at a
   glance whether the newest report is a first impression or a worn-out one. */
.tr-rv-journey--2 { border-left-color: var(--rv-cyan); }
.tr-rv-journey--3 { border-left-color: var(--rv-good); }

/* The card keeps its own white against the group's ground - it is the current
   report, and the entries below it are the ones that recede. */
.tr-rv-journey .tr-rv-card {
    margin-bottom: 8px;
}

.tr-rv-journey__past {
    list-style: none;
    margin: 0 0 6px 14px;
    /* The rail: the dots sit on it, so it starts under the card rather than at
       the group's top edge. */
    padding: 2px 8px 0 18px;
    border-left: 2px solid var(--rv-line);
}

.tr-rv-past {
    position: relative;
    margin: 0;
    padding: 8px 0 10px;
}

.tr-rv-past + .tr-rv-past {
    border-top: 1px dashed var(--rv-line);
}

/* Stage dot on the rail. Coloured the same way as the stage chip it sits beside,
   so the eye can follow initial -> mid-life -> end of life without reading. */
.tr-rv-past::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 15px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rv-faint);
    box-shadow: 0 0 0 3px var(--rv-mist);
}

.tr-rv-past--2::before { background: var(--rv-cyan); }
.tr-rv-past--3::before { background: var(--rv-good); }

.tr-rv-past__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 10px;
    margin-bottom: 6px;
}

/* Reads as a pill like the card's score, at the smaller weight an earlier entry
   deserves - it is context for the current score, not a headline of its own. */
.tr-rv-past__score {
    padding: 2px 7px;
    font-size: 0.8rem;
}

.tr-rv-past__at {
    font-family: var(--rv-mono);
    font-size: 0.76rem;
    color: var(--rv-muted);
}

.tr-rv-past__at .fa {
    margin-right: 3px;
    font-size: 0.74rem;
    color: var(--rv-faint);
}

.tr-rv-past__date {
    margin-left: auto;
    font-family: var(--rv-mono);
    font-size: 0.72rem;
    color: var(--rv-muted);
}

.tr-rv-past__body {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #2c3a47;
    overflow-wrap: break-word;
}

.tr-rv-past__body p:last-child {
    margin-bottom: 0;
}

/* Same fold as the current card, shallower: see render_previous_thread_reviews. */
.tr-rv-past__body--clamped {
    max-height: 6.4em;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 62%, transparent 100%);
}

.tr-rv-past__body.is-expanded {
    max-height: none;
    -webkit-mask-image: none;
    mask-image: none;
}

/* ==========================================================================
   Things that sit in the list: the quick-rate ask and the third-position ad
   (their own sheets style them site-wide; these bring them onto the tokens)
   ========================================================================== */

.tr-reviews .quick-rate {
    margin-bottom: 12px;
    border: 1px solid var(--rv-line);
    border-left: 3px solid var(--rv-cyan);
    border-radius: 8px;
    box-shadow: none;
}

.tr-reviews .quick-rate__question {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--rv-text);
}

.tr-reviews .quick-rate__subtitle {
    margin-top: 3px;
    font-size: 0.85rem;
    color: var(--rv-muted);
}

.tr-reviews .quick-rate__stars .review-stars__star {
    border-color: var(--rv-line);
    border-radius: 6px;
    background: var(--rv-paper);
}

.tr-reviews a.quick-rate__browse,
.tr-reviews a.quick-rate__browse:link,
.tr-reviews a.quick-rate__browse:visited {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--rv-cyan-ink);
}

.tr-reviews .quick-rate__footer {
    border-top: 1px solid var(--rv-line);
    background: var(--rv-mist);
}

.tr-reviews [data-ad-pos="third"] {
    margin-bottom: 12px !important;
    border-color: var(--rv-line);
    border-radius: 8px;
    overflow: hidden;
}

/* ==========================================================================
   No reviews yet
   ========================================================================== */

.tr-rv-invite {
    margin-top: 16px;
    padding: 20px 22px;
    border: 1px dashed var(--rv-line);
    border-radius: 8px;
    background: var(--rv-paper);
    font-size: 0.95rem;
    line-height: 1.6;
}

.tr-rv-invite p {
    margin: 0 0 8px;
}

.tr-rv-invite .tr-rv-invite__title {
    margin-bottom: 6px;
    font-size: 1.1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.tr-rv-invite .tr-rv-invite__action {
    margin: 16px 0 0;
}

.tr-reviews a.tr-rv-invite__btn,
.tr-reviews a.tr-rv-invite__btn:link,
.tr-reviews a.tr-rv-invite__btn:visited {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 4px;
    background: var(--rv-cyan);
    color: #ffffff;
    font-weight: 700;
    text-decoration: none;
}

.tr-reviews a.tr-rv-invite__btn:hover,
.tr-reviews a.tr-rv-invite__btn:focus {
    background: #0a9bcc;
    color: #ffffff;
}

.tr-rv-invite__btn .fa {
    font-size: 0.72rem;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 640px) {
    .tr-rv-toolbar__search {
        flex: 1 1 100%;
        max-width: none;
    }

    /* "across 98 written reviews" is worth a line on a desktop row and worth a
       whole extra line of band buttons on a phone. */
    .tr-rv-spread__scope {
        display: none;
    }

    .tr-rv-adv__field {
        flex: 1 1 100%;
    }

    .tr-rv-adv__field .tr-rv-toolbar__select {
        flex: 1 1 auto;
    }

    .tr-rv-card {
        padding: 14px;
    }

    .tr-rv-card__facts {
        gap: 3px 12px;
        font-size: 0.8rem;
    }

    /* The rail costs width a phone hasn't got: pull it in and let the dots sit
       tight against the text. */
    .tr-rv-journey {
        padding: 6px 6px 2px;
    }

    .tr-rv-journey__past {
        margin-left: 7px;
        padding-left: 13px;
    }

    .tr-rv-past::before {
        left: -19px;
    }

    .tr-rv-past__date {
        /* On two lines the date would otherwise be pushed to its own row by the
           auto margin; let it follow the mileage instead. */
        margin-left: 0;
    }

    .tr-rv-reply {
        margin-left: 10px;
    }

    .tr-rv-scorelist {
        grid-template-columns: minmax(0, 1fr);
    }

    /* A little tighter so more of the chips share a row. */
    .tr-rv-trait {
        gap: 6px;
        padding: 5px 7px 5px 10px;
        font-size: 0.82rem;
    }

    .tr-rv-say__text {
        font-size: 0.95rem;
        line-height: 1.6;
    }
}